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

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

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.js","names":["fullWidth","width","Dropdown","options","onSearch","type","hideSearchBar","onSelect","value","keyExtractor","labelExtractor","setDropDownVisible","style","anchor","selectAllLabel","searchBarPlaceholder","searchArg","setSearchArg","useDebouncedState","lengthOptions","React","useMemo","length","checkedAll","setCheckedAll","useState","useEffect","onClickCheckAll","useCallback","items","map","option","aux","prev","auxArray","onChange","text","undefined","item","index"],"sources":["../../../../../src/components/molecules/Select/Dropdown/Dropdown.tsx"],"sourcesContent":["import React from 'react';\nimport { Checkbox, Text, useDebouncedState } from '@tecsinapse/react-core';\nimport { ItemSelect } from '../SelectItem';\nimport { SelectProps } from '../Select';\nimport {\n  SearchBarContainer,\n  StyledContainerCheckAll,\n  StyledContainerDropdown,\n  StyledContainerTextLabel,\n  StyledSpan,\n  OptionsContainer,\n  PaddedContainer,\n} from './styled';\nimport { SearchInput } from './components';\n\nconst fullWidth = { width: '100%' };\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  anchor,\n  selectAllLabel,\n  searchBarPlaceholder,\n}: SelectProps<Data, Type> & {\n  setDropDownVisible: (t: boolean) => void;\n}): JSX.Element => {\n  const [searchArg, setSearchArg] = useDebouncedState<string>('', onSearch);\n  const lengthOptions = React.useMemo(() => options.length, [options]);\n\n  const [checkedAll, setCheckedAll] = React.useState<boolean>(\n    type === 'multi' && (value as Data[])?.length === lengthOptions\n  );\n\n  React.useEffect(() => {\n    if (type === 'multi') {\n      lengthOptions === (value as Data[])?.length\n        ? setCheckedAll(true)\n        : setCheckedAll(false);\n    }\n  }, [value, type, lengthOptions]);\n\n  const onClickCheckAll = React.useCallback(() => {\n    const items = options.map(option => option);\n    let aux;\n    setCheckedAll(prev => {\n      aux = !prev;\n      return !prev;\n    });\n    type OnSelectArg = Parameters<typeof onSelect>[0];\n    const auxArray: Data[] = [];\n    !aux ? onSelect(auxArray as OnSelectArg) : onSelect(items as OnSelectArg);\n  }, [options, setCheckedAll, onSelect]);\n\n  const onChange = React.useCallback(\n    text => setSearchArg(text),\n    [setSearchArg]\n  );\n\n  return (\n    <StyledContainerDropdown\n      lengthOptions={lengthOptions}\n      style={style}\n      anchor={anchor}\n    >\n      {type === 'multi' && (\n        <StyledContainerCheckAll\n          onClick={hideSearchBar ? onClickCheckAll : undefined}\n        >\n          <Checkbox checked={checkedAll} onChange={onClickCheckAll} />\n          {!hideSearchBar ? (\n            <SearchBarContainer>\n              <SearchInput\n                searchArg={searchArg}\n                onChange={onChange}\n                fullWidth={fullWidth}\n                placeholder={searchBarPlaceholder}\n              />\n            </SearchBarContainer>\n          ) : (\n            <StyledContainerTextLabel>\n              <Text fontWeight=\"bold\">\n                <StyledSpan>{selectAllLabel}</StyledSpan>\n              </Text>\n            </StyledContainerTextLabel>\n          )}\n        </StyledContainerCheckAll>\n      )}\n      {type === 'single' && !hideSearchBar && (\n        <PaddedContainer>\n          <SearchInput\n            searchArg={searchArg}\n            onChange={onChange}\n            fullWidth={fullWidth}\n            placeholder={searchBarPlaceholder}\n          />\n        </PaddedContainer>\n      )}\n      <OptionsContainer lengthOptions={options.length}>\n        {options.map((item, index) => (\n          <ItemSelect\n            type={type}\n            key={keyExtractor(item)}\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={lengthOptions}\n          />\n        ))}\n      </OptionsContainer>\n    </StyledContainerDropdown>\n  );\n};\n\nexport default Dropdown;\n"],"mappings":"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"}
+{"version":3,"file":"Dropdown.js","sources":["../../../../../src/components/molecules/Select/Dropdown/Dropdown.tsx"],"sourcesContent":["import React from 'react';\nimport { Checkbox, Text, useDebouncedState } from '@tecsinapse/react-core';\nimport { ItemSelect } from '../SelectItem';\nimport { SelectProps } from '../Select';\nimport {\n  SearchBarContainer,\n  StyledContainerCheckAll,\n  StyledContainerDropdown,\n  StyledContainerTextLabel,\n  StyledSpan,\n  OptionsContainer,\n  PaddedContainer,\n} from './styled';\nimport { SearchInput } from './components';\n\nconst fullWidth = { width: '100%' };\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  anchor,\n  selectAllLabel,\n  searchBarPlaceholder,\n}: SelectProps<Data, Type> & {\n  setDropDownVisible: (t: boolean) => void;\n}): JSX.Element => {\n  const [searchArg, setSearchArg] = useDebouncedState<string>('', onSearch);\n  const lengthOptions = React.useMemo(() => options.length, [options]);\n\n  const [checkedAll, setCheckedAll] = React.useState<boolean>(\n    type === 'multi' && (value as Data[])?.length === lengthOptions\n  );\n\n  React.useEffect(() => {\n    if (type === 'multi') {\n      lengthOptions === (value as Data[])?.length\n        ? setCheckedAll(true)\n        : setCheckedAll(false);\n    }\n  }, [value, type, lengthOptions]);\n\n  const onClickCheckAll = React.useCallback(() => {\n    const items = (options as Data[]).map(option => option);\n    let aux;\n    setCheckedAll(prev => {\n      aux = !prev;\n      return !prev;\n    });\n    type OnSelectArg = Parameters<typeof onSelect>[0];\n    const auxArray: Data[] = [];\n    !aux ? onSelect(auxArray as OnSelectArg) : onSelect(items as OnSelectArg);\n  }, [options, setCheckedAll, onSelect]);\n\n  const onChange = React.useCallback(\n    text => setSearchArg(text),\n    [setSearchArg]\n  );\n\n  return (\n    <StyledContainerDropdown\n      lengthOptions={lengthOptions}\n      style={style}\n      anchor={anchor}\n    >\n      {type === 'multi' && (\n        <StyledContainerCheckAll\n          onClick={hideSearchBar ? onClickCheckAll : undefined}\n        >\n          <Checkbox checked={checkedAll} onChange={onClickCheckAll} />\n          {!hideSearchBar ? (\n            <SearchBarContainer>\n              <SearchInput\n                searchArg={searchArg}\n                onChange={onChange}\n                fullWidth={fullWidth}\n                placeholder={searchBarPlaceholder}\n              />\n            </SearchBarContainer>\n          ) : (\n            <StyledContainerTextLabel>\n              <Text fontWeight=\"bold\">\n                <StyledSpan>{selectAllLabel}</StyledSpan>\n              </Text>\n            </StyledContainerTextLabel>\n          )}\n        </StyledContainerCheckAll>\n      )}\n      {type === 'single' && !hideSearchBar && (\n        <PaddedContainer>\n          <SearchInput\n            searchArg={searchArg}\n            onChange={onChange}\n            fullWidth={fullWidth}\n            placeholder={searchBarPlaceholder}\n          />\n        </PaddedContainer>\n      )}\n      <OptionsContainer lengthOptions={options.length}>\n        {(options as Data[]).map((item, index) => (\n          <ItemSelect\n            type={type}\n            key={keyExtractor(item)}\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={lengthOptions}\n          />\n        ))}\n      </OptionsContainer>\n    </StyledContainerDropdown>\n  );\n};\n\nexport default Dropdown;\n"],"names":["useDebouncedState","React","StyledContainerDropdown","StyledContainerCheckAll","Checkbox","SearchBarContainer","StyledContainerTextLabel","Text","StyledSpan","PaddedContainer","OptionsContainer","ItemSelect"],"mappings":"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"}

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

@@ -1,44 +1,29 @@
-"use strict";
+'use strict';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _reactCore = require("@tecsinapse/react-core");
+var React = require('react');
+var reactCore = require('@tecsinapse/react-core');
+var Input = require('../../../../atoms/Input/Input.js');
 
-var _Input = require("../../../../atoms/Input");
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const InputIcon = _react.default.createElement(_reactCore.Icon, {
+const InputIcon = /* @__PURE__ */ React__default["default"].createElement(reactCore.Icon, {
   name: "magnify",
   type: "material-community",
   size: "centi",
-  style: {
-    marginHorizontal: 12
-  }
+  style: { marginHorizontal: 12 }
 });
-
-const SearchInput = _ref => {
-  let {
-    fullWidth,
-    searchArg,
-    onChange,
-    placeholder
-  } = _ref;
-  return _react.default.createElement(_Input.Input, {
+const SearchInput = ({ fullWidth, searchArg, onChange, placeholder }) => {
+  return /* @__PURE__ */ React__default["default"].createElement(Input, {
     style: fullWidth,
-    placeholder: placeholder,
+    placeholder,
     value: searchArg,
     leftComponent: InputIcon,
-    onChange: onChange
+    onChange
   });
 };
+var SearchInput$1 = React__default["default"].memo(SearchInput);
 
-var _default = _react.default.memo(SearchInput);
-
-exports.default = _default;
-//# sourceMappingURL=SearchInput.js.map
+module.exports = SearchInput$1;
+//# sourceMappingURL=SearchInput.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.js","names":["InputIcon","marginHorizontal","SearchInput","fullWidth","searchArg","onChange","placeholder","React","memo"],"sources":["../../../../../../src/components/molecules/Select/Dropdown/components/SearchInput.tsx"],"sourcesContent":["import React from 'react';\nimport { Icon } from '@tecsinapse/react-core';\nimport { Input } from '../../../../atoms/Input';\n\nconst InputIcon = (\n  <Icon\n    name=\"magnify\"\n    type=\"material-community\"\n    size=\"centi\"\n    style={{ marginHorizontal: 12 }}\n  />\n);\n\nconst SearchInput = ({ fullWidth, searchArg, onChange, placeholder }) => {\n  return (\n    <Input\n      style={fullWidth}\n      placeholder={placeholder}\n      value={searchArg}\n      leftComponent={InputIcon}\n      onChange={onChange}\n    />\n  );\n};\n\nexport default React.memo(SearchInput);\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;AAEA,MAAMA,SAAS,GACb,6BAAC,eAAD;EACE,IAAI,EAAC,SADP;EAEE,IAAI,EAAC,oBAFP;EAGE,IAAI,EAAC,OAHP;EAIE,KAAK,EAAE;IAAEC,gBAAgB,EAAE;EAApB;AAJT,EADF;;AASA,MAAMC,WAAW,GAAG,QAAqD;EAAA,IAApD;IAAEC,SAAF;IAAaC,SAAb;IAAwBC,QAAxB;IAAkCC;EAAlC,CAAoD;EACvE,OACE,6BAAC,YAAD;IACE,KAAK,EAAEH,SADT;IAEE,WAAW,EAAEG,WAFf;IAGE,KAAK,EAAEF,SAHT;IAIE,aAAa,EAAEJ,SAJjB;IAKE,QAAQ,EAAEK;EALZ,EADF;AASD,CAVD;;eAYeE,cAAA,CAAMC,IAAN,CAAWN,WAAX,C"}
+{"version":3,"file":"SearchInput.js","sources":["../../../../../../src/components/molecules/Select/Dropdown/components/SearchInput.tsx"],"sourcesContent":["import React from 'react';\nimport { Icon } from '@tecsinapse/react-core';\nimport { Input } from '../../../../atoms/Input';\n\nconst InputIcon = (\n  <Icon\n    name=\"magnify\"\n    type=\"material-community\"\n    size=\"centi\"\n    style={{ marginHorizontal: 12 }}\n  />\n);\n\nconst SearchInput = ({ fullWidth, searchArg, onChange, placeholder }) => {\n  return (\n    <Input\n      style={fullWidth}\n      placeholder={placeholder}\n      value={searchArg}\n      leftComponent={InputIcon}\n      onChange={onChange}\n    />\n  );\n};\n\nexport default React.memo(SearchInput);\n"],"names":["React","Icon"],"mappings":";;;;;;;;;;AAIA,MAAM,4BACHA,yBAAA,CAAA,aAAA,CAAAC,cAAA,EAAA;AAAA,EACC,IAAK,EAAA,SAAA;AAAA,EACL,IAAK,EAAA,oBAAA;AAAA,EACL,IAAK,EAAA,OAAA;AAAA,EACL,KAAA,EAAO,EAAE,gBAAA,EAAkB,EAAG,EAAA;AAAA,CAChC,CAAA,CAAA;AAGF,MAAM,cAAc,CAAC,EAAE,WAAW,SAAW,EAAA,QAAA,EAAU,aAAkB,KAAA;AACvE,EAAA,uBACGD,yBAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IACC,KAAO,EAAA,SAAA;AAAA,IACP,WAAA;AAAA,IACA,KAAO,EAAA,SAAA;AAAA,IACP,aAAe,EAAA,SAAA;AAAA,IACf,QAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAA,CAAA;AAEA,oBAAeA,yBAAA,CAAM,KAAK,WAAW,CAAA;;;;"}

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

@@ -1,136 +1,96 @@
-"use strict";
+'use strict';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.StyledSpan = exports.StyledContainerTextLabel = exports.StyledContainerDropdown = exports.StyledContainerCheckAll = exports.SearchBarContainer = exports.PaddedContainer = exports.OptionsContainer = void 0;
+Object.defineProperty(exports, '__esModule', { value: true });
 
-var _styled = _interopRequireDefault(require("@emotion/styled"));
+var styled = require('@emotion/styled');
+var reactCore = require('@tecsinapse/react-core');
+var react = require('@emotion/react');
 
-var _reactCore = require("@tecsinapse/react-core");
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var _react = require("@emotion/react");
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
+const anchorBottom = ({
+  theme,
+  anchor
+}) => anchor === "bottom" && react.css`
+    margin-top: ${theme.spacing.centi};
+    top: 100%;
+  `;
+const anchorTop = ({
+  theme,
+  anchor
+}) => anchor === "top" && react.css`
+    margin-bottom: ${theme.spacing.centi};
+    bottom: 100%;
+  `;
+const StyledContainerDropdown = styled__default["default"]("div")`
+  width: 100%;
+  background-color: ${({ theme }) => theme.miscellaneous.surfaceColor};
+  border-radius: ${({ theme }) => theme.borderRadius.mili};
+  box-shadow: 0 2px 8px
+    ${({ theme }) => reactCore.hex2rgba(theme.miscellaneous.shadow, 0.05)};
+  position: absolute;
+  padding-top: ${({
+  theme,
+  hideSearchBar
+}) => !hideSearchBar ? `${theme.spacing.deca}` : "0px"};
+  padding-bottom: ${({ theme }) => theme.spacing.mili};
+  z-index: ${({ theme }) => theme.zIndex.select};
+  ${anchorTop}
+  ${anchorBottom}
+`;
+const OptionsContainer = styled__default["default"]("div")`
+  max-height: 250px;
+  top: 100%;
+  overflow-y: ${({ lengthOptions = 0 }) => lengthOptions > 5 ? "scroll" : "hidden"};
+  ::-webkit-scrollbar {
+    width: 8px;
+  }
+  ::-webkit-scrollbar-thumb {
+    border-radius: ${({ theme }) => theme.borderRadius.centi};
+    background-color: ${({ theme }) => theme.color.secondary.light};
+  }
+  ::-webkit-scrollbar-thumb:hover {
+    background-color: ${({ theme }) => theme.color.primary.light};
+  },
+`;
+const SearchBarContainer = styled__default["default"]("div")`
+  padding-left: ${({ theme }) => theme.spacing.mili};
+  width: 100%;
+`;
+const PaddedContainer = styled__default["default"]("div")`
+  padding: ${({ theme }) => `${theme.spacing.mili} ${theme.spacing.deca}`};
+`;
+const StyledContainerCheckAll = styled__default["default"](PaddedContainer)`
+  flex-direction: row;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  cursor: pointer;
+  &:hover {
+    background-color: ${({ theme }) => theme.color.primary.xlight};
+  }
+  &:hover span {
+    color: ${({ theme }) => theme.color.primary.medium};
+  }
+`;
+const StyledSpan = styled__default["default"]("span")`
+  color: ${({ theme }) => theme.font.color.dark};
+  padding: ${({ theme }) => `${theme.spacing.mili} 0px`};
+`;
+const StyledContainerTextLabel = styled__default["default"]("div")`
+  padding-left: ${({ theme }) => theme.spacing.mili};
+  width: 100%;
+  display: flex;
+  overflow: hidden;
+`;
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
-const anchorBottom = _ref => {
-  let {
-    theme,
-    anchor
-  } = _ref;
-  return anchor === 'bottom' && (0, _react.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    margin-top: ", ";\n    top: 100%;\n  "])), theme.spacing.centi);
-};
-
-const anchorTop = _ref2 => {
-  let {
-    theme,
-    anchor
-  } = _ref2;
-  return anchor === 'top' && (0, _react.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    margin-bottom: ", ";\n    bottom: 100%;\n  "])), theme.spacing.centi);
-};
-
-const StyledContainerDropdown = (0, _styled.default)('div')(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  width: 100%;\n  background-color: ", ";\n  border-radius: ", ";\n  box-shadow: 0 2px 8px\n    ", ";\n  position: absolute;\n  padding-top: ", ";\n  padding-bottom: ", ";\n  z-index: ", ";\n  ", "\n  ", "\n"])), _ref3 => {
-  let {
-    theme
-  } = _ref3;
-  return theme.miscellaneous.surfaceColor;
-}, _ref4 => {
-  let {
-    theme
-  } = _ref4;
-  return theme.borderRadius.mili;
-}, _ref5 => {
-  let {
-    theme
-  } = _ref5;
-  return (0, _reactCore.hex2rgba)(theme.miscellaneous.shadow, 0.05);
-}, _ref6 => {
-  let {
-    theme,
-    hideSearchBar
-  } = _ref6;
-  return !hideSearchBar ? "".concat(theme.spacing.deca) : '0px';
-}, _ref7 => {
-  let {
-    theme
-  } = _ref7;
-  return theme.spacing.mili;
-}, _ref8 => {
-  let {
-    theme
-  } = _ref8;
-  return theme.zIndex.select;
-}, anchorTop, anchorBottom);
-exports.StyledContainerDropdown = StyledContainerDropdown;
-const OptionsContainer = (0, _styled.default)('div')(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  max-height: 250px;\n  top: 100%;\n  overflow-y: ", ";\n  ::-webkit-scrollbar {\n    width: 8px;\n  }\n  ::-webkit-scrollbar-thumb {\n    border-radius: ", ";\n    background-color: ", ";\n  }\n  ::-webkit-scrollbar-thumb:hover {\n    background-color: ", ";\n  },\n"])), _ref9 => {
-  let {
-    lengthOptions = 0
-  } = _ref9;
-  return lengthOptions > 5 ? 'scroll' : 'hidden';
-}, _ref10 => {
-  let {
-    theme
-  } = _ref10;
-  return theme.borderRadius.centi;
-}, _ref11 => {
-  let {
-    theme
-  } = _ref11;
-  return theme.color.secondary.light;
-}, _ref12 => {
-  let {
-    theme
-  } = _ref12;
-  return theme.color.primary.light;
-});
 exports.OptionsContainer = OptionsContainer;
-const SearchBarContainer = (0, _styled.default)('div')(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  padding-left: ", ";\n  width: 100%;\n"])), _ref13 => {
-  let {
-    theme
-  } = _ref13;
-  return theme.spacing.mili;
-});
-exports.SearchBarContainer = SearchBarContainer;
-const PaddedContainer = (0, _styled.default)('div')(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  padding: ", ";\n"])), _ref14 => {
-  let {
-    theme
-  } = _ref14;
-  return "".concat(theme.spacing.mili, " ").concat(theme.spacing.deca);
-});
 exports.PaddedContainer = PaddedContainer;
-const StyledContainerCheckAll = (0, _styled.default)(PaddedContainer)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  flex-direction: row;\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  cursor: pointer;\n  &:hover {\n    background-color: ", ";\n  }\n  &:hover span {\n    color: ", ";\n  }\n"])), _ref15 => {
-  let {
-    theme
-  } = _ref15;
-  return theme.color.primary.xlight;
-}, _ref16 => {
-  let {
-    theme
-  } = _ref16;
-  return theme.color.primary.medium;
-});
+exports.SearchBarContainer = SearchBarContainer;
 exports.StyledContainerCheckAll = StyledContainerCheckAll;
-const StyledSpan = (0, _styled.default)('span')(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  color: ", ";\n  padding: ", ";\n"])), _ref17 => {
-  let {
-    theme
-  } = _ref17;
-  return theme.font.color.dark;
-}, _ref18 => {
-  let {
-    theme
-  } = _ref18;
-  return "".concat(theme.spacing.mili, " 0px");
-});
-exports.StyledSpan = StyledSpan;
-const StyledContainerTextLabel = (0, _styled.default)('div')(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  padding-left: ", ";\n  width: 100%;\n  display: flex;\n  overflow: hidden;\n"])), _ref19 => {
-  let {
-    theme
-  } = _ref19;
-  return theme.spacing.mili;
-});
+exports.StyledContainerDropdown = StyledContainerDropdown;
 exports.StyledContainerTextLabel = StyledContainerTextLabel;
-//# sourceMappingURL=styled.js.map
+exports.StyledSpan = StyledSpan;
+//# sourceMappingURL=styled.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styled.js","names":["anchorBottom","theme","anchor","css","spacing","centi","anchorTop","StyledContainerDropdown","styled","miscellaneous","surfaceColor","borderRadius","mili","hex2rgba","shadow","hideSearchBar","deca","zIndex","select","OptionsContainer","lengthOptions","color","secondary","light","primary","SearchBarContainer","PaddedContainer","StyledContainerCheckAll","xlight","medium","StyledSpan","font","dark","StyledContainerTextLabel"],"sources":["../../../../../src/components/molecules/Select/Dropdown/styled.ts"],"sourcesContent":["import styled from '@emotion/styled';\nimport { hex2rgba, StyleProps } from '@tecsinapse/react-core';\nimport { SelectProps } from '../Select';\nimport { css } from '@emotion/react';\n\ntype InjectedProps = Partial<\n  StyleProps &\n    SelectProps<unknown, 'single' | 'multi'> & { lengthOptions: number }\n>;\n\nconst anchorBottom = ({\n  theme,\n  anchor,\n}: StyleProps & Omit<InjectedProps, 'theme'>) =>\n  anchor === 'bottom' &&\n  css`\n    margin-top: ${theme.spacing.centi};\n    top: 100%;\n  `;\n\nconst anchorTop = ({\n  theme,\n  anchor,\n}: StyleProps & Omit<InjectedProps, 'theme'>) =>\n  anchor === 'top' &&\n  css`\n    margin-bottom: ${theme.spacing.centi};\n    bottom: 100%;\n  `;\n\nexport const StyledContainerDropdown = styled('div')<InjectedProps>`\n  width: 100%;\n  background-color: ${({ theme }: StyleProps) =>\n    theme.miscellaneous.surfaceColor};\n  border-radius: ${({ theme }: StyleProps) => theme.borderRadius.mili};\n  box-shadow: 0 2px 8px\n    ${({ theme }: StyleProps) => hex2rgba(theme.miscellaneous.shadow, 0.05)};\n  position: absolute;\n  padding-top: ${({\n    theme,\n    hideSearchBar,\n  }: StyleProps & Partial<SelectProps<unknown, 'single' | 'multi'>>) =>\n    !hideSearchBar ? `${theme.spacing.deca}` : '0px'};\n  padding-bottom: ${({ theme }: StyleProps) => theme.spacing.mili};\n  z-index: ${({ theme }: StyleProps) => theme.zIndex.select};\n  ${anchorTop}\n  ${anchorBottom}\n`;\n\nexport const OptionsContainer = styled('div')<InjectedProps>`\n  max-height: 250px;\n  top: 100%;\n  overflow-y: ${({ lengthOptions = 0 }: InjectedProps) =>\n    lengthOptions > 5 ? 'scroll' : 'hidden'};\n  ::-webkit-scrollbar {\n    width: 8px;\n  }\n  ::-webkit-scrollbar-thumb {\n    border-radius: ${({ theme }: StyleProps) => theme.borderRadius.centi};\n    background-color: ${({ theme }: StyleProps) => theme.color.secondary.light};\n  }\n  ::-webkit-scrollbar-thumb:hover {\n    background-color: ${({ theme }: StyleProps) => theme.color.primary.light};\n  },\n`;\n\nexport const SearchBarContainer = styled('div')<Partial<StyleProps>>`\n  padding-left: ${({ theme }) => theme.spacing.mili};\n  width: 100%;\n`;\n\nexport const PaddedContainer = styled('div')<Partial<StyleProps>>`\n  padding: ${({ theme }) => `${theme.spacing.mili} ${theme.spacing.deca}`};\n`;\n\nexport const StyledContainerCheckAll = styled(PaddedContainer)<\n  Partial<StyleProps>\n>`\n  flex-direction: row;\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  cursor: pointer;\n  &:hover {\n    background-color: ${({ theme }) => theme.color.primary.xlight};\n  }\n  &:hover span {\n    color: ${({ theme }) => theme.color.primary.medium};\n  }\n`;\n\nexport const StyledSpan = styled('span')<Partial<StyleProps>>`\n  color: ${({ theme }) => theme.font.color.dark};\n  padding: ${({ theme }) => `${theme.spacing.mili} 0px`};\n`;\n\nexport const StyledContainerTextLabel = styled('div')<Partial<StyleProps>>`\n  padding-left: ${({ theme }) => theme.spacing.mili};\n  width: 100%;\n  display: flex;\n  overflow: hidden;\n`;\n"],"mappings":"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"}
+{"version":3,"file":"styled.js","sources":["../../../../../src/components/molecules/Select/Dropdown/styled.ts"],"sourcesContent":["import styled from '@emotion/styled';\nimport { hex2rgba, StyleProps } from '@tecsinapse/react-core';\nimport { SelectProps } from '../Select';\nimport { css } from '@emotion/react';\n\ntype InjectedProps = Partial<\n  StyleProps &\n    SelectProps<unknown, 'single' | 'multi'> & { lengthOptions: number }\n>;\n\nconst anchorBottom = ({\n  theme,\n  anchor,\n}: StyleProps & Omit<InjectedProps, 'theme'>) =>\n  anchor === 'bottom' &&\n  css`\n    margin-top: ${theme.spacing.centi};\n    top: 100%;\n  `;\n\nconst anchorTop = ({\n  theme,\n  anchor,\n}: StyleProps & Omit<InjectedProps, 'theme'>) =>\n  anchor === 'top' &&\n  css`\n    margin-bottom: ${theme.spacing.centi};\n    bottom: 100%;\n  `;\n\nexport const StyledContainerDropdown = styled('div')<InjectedProps>`\n  width: 100%;\n  background-color: ${({ theme }: StyleProps) =>\n    theme.miscellaneous.surfaceColor};\n  border-radius: ${({ theme }: StyleProps) => theme.borderRadius.mili};\n  box-shadow: 0 2px 8px\n    ${({ theme }: StyleProps) => hex2rgba(theme.miscellaneous.shadow, 0.05)};\n  position: absolute;\n  padding-top: ${({\n    theme,\n    hideSearchBar,\n  }: StyleProps & Partial<SelectProps<unknown, 'single' | 'multi'>>) =>\n    !hideSearchBar ? `${theme.spacing.deca}` : '0px'};\n  padding-bottom: ${({ theme }: StyleProps) => theme.spacing.mili};\n  z-index: ${({ theme }: StyleProps) => theme.zIndex.select};\n  ${anchorTop}\n  ${anchorBottom}\n`;\n\nexport const OptionsContainer = styled('div')<InjectedProps>`\n  max-height: 250px;\n  top: 100%;\n  overflow-y: ${({ lengthOptions = 0 }: InjectedProps) =>\n    lengthOptions > 5 ? 'scroll' : 'hidden'};\n  ::-webkit-scrollbar {\n    width: 8px;\n  }\n  ::-webkit-scrollbar-thumb {\n    border-radius: ${({ theme }: StyleProps) => theme.borderRadius.centi};\n    background-color: ${({ theme }: StyleProps) => theme.color.secondary.light};\n  }\n  ::-webkit-scrollbar-thumb:hover {\n    background-color: ${({ theme }: StyleProps) => theme.color.primary.light};\n  },\n`;\n\nexport const SearchBarContainer = styled('div')<Partial<StyleProps>>`\n  padding-left: ${({ theme }) => theme.spacing.mili};\n  width: 100%;\n`;\n\nexport const PaddedContainer = styled('div')<Partial<StyleProps>>`\n  padding: ${({ theme }) => `${theme.spacing.mili} ${theme.spacing.deca}`};\n`;\n\nexport const StyledContainerCheckAll = styled(PaddedContainer)<\n  Partial<StyleProps>\n>`\n  flex-direction: row;\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  cursor: pointer;\n  &:hover {\n    background-color: ${({ theme }) => theme.color.primary.xlight};\n  }\n  &:hover span {\n    color: ${({ theme }) => theme.color.primary.medium};\n  }\n`;\n\nexport const StyledSpan = styled('span')<Partial<StyleProps>>`\n  color: ${({ theme }) => theme.font.color.dark};\n  padding: ${({ theme }) => `${theme.spacing.mili} 0px`};\n`;\n\nexport const StyledContainerTextLabel = styled('div')<Partial<StyleProps>>`\n  padding-left: ${({ theme }) => theme.spacing.mili};\n  width: 100%;\n  display: flex;\n  overflow: hidden;\n`;\n"],"names":["css","styled","hex2rgba"],"mappings":"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"}

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

@@ -1,14 +1,14 @@
 import { TextProps } from '@tecsinapse/react-core';
 import React from 'react';
 export interface SelectProps<Data, Type extends 'single' | 'multi'> extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {
-    options: Data[];
+    options: ((searchInput?: string) => Promise<Data[]>) | Data[];
     onSelect: (option: Type extends 'single' ? Data | undefined : Data[]) => never | void;
     value: Type extends 'single' ? Data | undefined : Data[];
     type: Type;
     keyExtractor: (t: Data, index?: number) => string;
     labelExtractor: (t: Data) => string;
     placeholder?: string;
-    onSearch?: (searchArg: string) => void | never;
+    onSearch?: ((searchArg: string) => void) | ((searchInput?: string) => Promise<Data[]>) | never;
     searchBarPlaceholder?: string;
     hideSearchBar?: boolean;
     selectAllLabel?: string;
@@ -17,5 +17,5 @@ export interface SelectProps<Data, Type extends 'single' | 'multi'> extends Omit
     anchor?: 'top' | 'bottom';
     displayTextProps?: TextProps;
 }
-export declare const Select: <Data, Type extends "single" | "multi">({ value, options, keyExtractor, onSelect, type, labelExtractor, placeholder, onSearch, searchBarPlaceholder, hideSearchBar, label, disabled, anchor, displayTextProps, selectAllLabel, ...rest }: SelectProps<Data, Type>) => JSX.Element;
+declare const Select: <Data, Type extends "single" | "multi">({ value, options, keyExtractor, onSelect, type, labelExtractor, placeholder, onSearch, searchBarPlaceholder, hideSearchBar, label, disabled, anchor, displayTextProps, selectAllLabel, ...rest }: SelectProps<Data, Type>) => JSX.Element;
 export default Select;