@tecsinapse/react-web-kit 1.3.2 → 1.6.1

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/molecules/Select/Dropdown/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA","sourcesContent":["export { default as Dropdown } from './Dropdown';\n"],"file":"index.js"}

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

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+export declare const StyledContainerDropdown: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Partial<any>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledTest: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Partial<any>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SearchBarContainer: import("@emotion/styled").StyledComponent<any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledContainerCheckAll: import("@emotion/styled").StyledComponent<any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledSpan: import("@emotion/styled").StyledComponent<any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const StyledContainerTextLabel: import("@emotion/styled").StyledComponent<any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

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

@@ -0,0 +1,113 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledContainerTextLabel = exports.StyledSpan = exports.StyledContainerCheckAll = exports.SearchBarContainer = exports.StyledTest = exports.StyledContainerDropdown = void 0;
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+var _reactCore = require("@tecsinapse/react-core");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const StyledContainerDropdown = (0, _styled.default)('div')`
+  width: 100%;
+  background-color: ${({
+  theme
+}) => theme.miscellaneous.surfaceColor};
+  border-radius: ${({
+  theme
+}) => theme.borderRadius.mili};
+  box-shadow: 0px 2px 8px
+    ${({
+  theme
+}) => (0, _reactCore.hex2rgba)(theme.miscellaneous.shadow, 0.08)};
+  margin-top: ${({
+  theme
+}) => theme.spacing.centi};
+  top: 100%;
+  position: absolute;
+  padding-top: ${({
+  theme,
+  hideSearchBar
+}) => !hideSearchBar ? `${theme.spacing.deca}` : '0px'};
+  padding-bottom: ${({
+  theme
+}) => theme.spacing.mili};
+  z-index: ${({
+  theme
+}) => theme.zIndex.default};
+`;
+exports.StyledContainerDropdown = StyledContainerDropdown;
+const StyledTest = (0, _styled.default)('div')`
+  max-height: 250px;
+  top: 100%;
+  overflow-y: ${({
+  lenghtOptions = 0
+}) => lenghtOptions > 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};
+  },
+`;
+exports.StyledTest = StyledTest;
+const SearchBarContainer = (0, _styled.default)('div')`
+  padding-left: ${({
+  theme
+}) => theme.spacing.mili};
+  width: 100%;
+`;
+exports.SearchBarContainer = SearchBarContainer;
+const StyledContainerCheckAll = (0, _styled.default)('div')`
+  padding: ${({
+  theme
+}) => `${theme.spacing.mili} ${theme.spacing.deca}`};
+  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};
+  }
+`;
+exports.StyledContainerCheckAll = StyledContainerCheckAll;
+const StyledSpan = (0, _styled.default)('span')`
+  color: ${({
+  theme
+}) => theme.color.primary.medium};
+  padding: ${({
+  theme
+}) => `${theme.spacing.mili} 0px`};
+`;
+exports.StyledSpan = StyledSpan;
+const StyledContainerTextLabel = (0, _styled.default)('div')`
+  padding-left: ${({
+  theme
+}) => theme.spacing.mili};
+  width: 100%;
+  display: flex;
+  overflow: hidden;
+`;
+exports.StyledContainerTextLabel = StyledContainerTextLabel;
+//# sourceMappingURL=styled.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/molecules/Select/Dropdown/styled.ts"],"names":["StyledContainerDropdown","theme","miscellaneous","surfaceColor","borderRadius","mili","shadow","spacing","centi","hideSearchBar","deca","zIndex","default","StyledTest","lenghtOptions","color","secondary","light","primary","SearchBarContainer","StyledContainerCheckAll","xlight","medium","StyledSpan","StyledContainerTextLabel"],"mappings":"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","sourcesContent":["import styled from '@emotion/styled';\nimport { hex2rgba, StyleProps } from '@tecsinapse/react-core';\nimport { SelectProps } from '../Select';\n\nexport const StyledContainerDropdown = styled('div')<\n  Partial<StyleProps & SelectProps<any, any> & { lengthOptions: number }>\n>`\n  width: 100%;\n  background-color: ${({ theme }: StyleProps) =>\n    theme.miscellaneous.surfaceColor};\n  border-radius: ${({ theme }: StyleProps) => theme.borderRadius.mili};\n  box-shadow: 0px 2px 8px\n    ${({ theme }: StyleProps) => hex2rgba(theme.miscellaneous.shadow, 0.08)};\n  margin-top: ${({ theme }: StyleProps) => theme.spacing.centi};\n  top: 100%;\n  position: absolute;\n  padding-top: ${({\n    theme,\n    hideSearchBar,\n  }: StyleProps & Partial<SelectProps<any, any>>) =>\n    !hideSearchBar ? `${theme.spacing.deca}` : '0px'};\n  padding-bottom: ${({ theme }: StyleProps) => theme.spacing.mili};\n  z-index: ${({ theme }: StyleProps) => theme.zIndex.default};\n`;\n\nexport const StyledTest = styled('div')<\n  Partial<StyleProps & SelectProps<any, any> & { lenghtOptions: number }>\n>`\n  max-height: 250px;\n  top: 100%;\n  overflow-y: ${({\n    lenghtOptions = 0,\n  }: Partial<{ lenghtOptions: number } & StyleProps>) =>\n    lenghtOptions > 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 StyledContainerCheckAll = styled('div')<Partial<StyleProps>>`\n  padding: ${({ theme }) => `${theme.spacing.mili} ${theme.spacing.deca}`};\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.color.primary.medium};\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"],"file":"styled.js"}

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

@@ -0,0 +1,15 @@
+export interface SelectProps<Data, Type extends 'single' | 'multi'> {
+    options: 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;
+    searchBarPlaceholder?: string;
+    hideSearchBar?: boolean;
+    label?: string;
+}
+export declare const Select: <Data, Type extends "single" | "multi">({ value, options, keyExtractor, onSelect, type, labelExtractor, placeholder, onSearch, hideSearchBar, label, ...rest }: SelectProps<Data, Type>) => JSX.Element;
+export default Select;

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

@@ -0,0 +1,85 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Select = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactCore = require("@tecsinapse/react-core");
+
+var _hooks = require("../../../hooks");
+
+var _styled = require("./styled");
+
+var _Dropdown = require("./Dropdown");
+
+var _functions = require("./functions");
+
+var _reactTransitionGroup = require("react-transition-group");
+
+var _animations = require("./animations");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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 Select = ({
+  value,
+  options,
+  keyExtractor,
+  onSelect,
+  type,
+  labelExtractor,
+  placeholder,
+  onSearch,
+  hideSearchBar = true,
+  label,
+  ...rest
+}) => {
+  const [dropDownVisible, setDropDownVisible] = _react.default.useState(false);
+
+  const refDropDown = _react.default.useRef(null);
+
+  (0, _hooks.useClickAwayListener)(refDropDown, setDropDownVisible);
+  const displayValue = (0, _functions.getDisplayValue)(type, value, options, placeholder, keyExtractor, labelExtractor);
+  return _react.default.createElement(_styled.StyledContainer, {
+    ref: refDropDown
+  }, _react.default.createElement(_styled.StyledInputContainer, null, _react.default.createElement(_reactCore.PressableInputContainer, _extends({
+    label: label
+  }, rest, {
+    onPress: () => setDropDownVisible(!dropDownVisible),
+    rightComponent: _react.default.createElement(_reactCore.Icon, {
+      name: "chevron-down",
+      type: "material-community",
+      size: "centi",
+      style: {
+        marginRight: 12
+      }
+    })
+  }), _react.default.createElement(_reactCore.Text, {
+    ellipsizeMode: "tail",
+    numberOfLines: 1
+  }, displayValue))), _react.default.createElement(_reactTransitionGroup.Transition, {
+    in: dropDownVisible,
+    timeout: 300
+  }, state => _react.default.createElement(_Dropdown.Dropdown, {
+    options: options,
+    onSelect: onSelect,
+    value: value,
+    type: type,
+    keyExtractor: keyExtractor,
+    labelExtractor: labelExtractor,
+    hideSearchBar: hideSearchBar,
+    style: { ..._animations.defaultStyles,
+      ..._animations.transition[state]
+    },
+    setDropDownVisible: setDropDownVisible
+  })));
+};
+
+exports.Select = Select;
+var _default = Select;
+exports.default = _default;
+//# sourceMappingURL=Select.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/molecules/Select/Select.tsx"],"names":["Select","value","options","keyExtractor","onSelect","type","labelExtractor","placeholder","onSearch","hideSearchBar","label","rest","dropDownVisible","setDropDownVisible","React","useState","refDropDown","useRef","displayValue","marginRight","state","defaultStyles","transition"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;AAkBO,MAAMA,MAAM,GAAG,CAAwC;AAC5DC,EAAAA,KAD4D;AAE5DC,EAAAA,OAF4D;AAG5DC,EAAAA,YAH4D;AAI5DC,EAAAA,QAJ4D;AAK5DC,EAAAA,IAL4D;AAM5DC,EAAAA,cAN4D;AAO5DC,EAAAA,WAP4D;AAQ5DC,EAAAA,QAR4D;AAS5DC,EAAAA,aAAa,GAAG,IAT4C;AAU5DC,EAAAA,KAV4D;AAW5D,KAAGC;AAXyD,CAAxC,KAYsB;AAC1C,QAAM,CAACC,eAAD,EAAkBC,kBAAlB,IAAwCC,eAAMC,QAAN,CAAwB,KAAxB,CAA9C;;AACA,QAAMC,WAAW,GAAGF,eAAMG,MAAN,CAAa,IAAb,CAApB;;AACA,mCAAqBD,WAArB,EAAkCH,kBAAlC;AAEA,QAAMK,YAAY,GAAG,gCACnBb,IADmB,EAEnBJ,KAFmB,EAGnBC,OAHmB,EAInBK,WAJmB,EAKnBJ,YALmB,EAMnBG,cANmB,CAArB;AASA,SACE,6BAAC,uBAAD;AAAiB,IAAA,GAAG,EAAEU;AAAtB,KACE,6BAAC,4BAAD,QACE,6BAAC,kCAAD;AACE,IAAA,KAAK,EAAEN;AADT,KAEMC,IAFN;AAGE,IAAA,OAAO,EAAE,MAAME,kBAAkB,CAAC,CAACD,eAAF,CAHnC;AAIE,IAAA,cAAc,EACZ,6BAAC,eAAD;AACE,MAAA,IAAI,EAAC,cADP;AAEE,MAAA,IAAI,EAAC,oBAFP;AAGE,MAAA,IAAI,EAAC,OAHP;AAIE,MAAA,KAAK,EAAE;AAAEO,QAAAA,WAAW,EAAE;AAAf;AAJT;AALJ,MAaE,6BAAC,eAAD;AAAM,IAAA,aAAa,EAAC,MAApB;AAA2B,IAAA,aAAa,EAAE;AAA1C,KACGD,YADH,CAbF,CADF,CADF,EAoBE,6BAAC,gCAAD;AAAY,IAAA,EAAE,EAAEN,eAAhB;AAAiC,IAAA,OAAO,EAAE;AAA1C,KACGQ,KAAK,IACJ,6BAAC,kBAAD;AACE,IAAA,OAAO,EAAElB,OADX;AAEE,IAAA,QAAQ,EAAEE,QAFZ;AAGE,IAAA,KAAK,EAAEH,KAHT;AAIE,IAAA,IAAI,EAAEI,IAJR;AAKE,IAAA,YAAY,EAAEF,YALhB;AAME,IAAA,cAAc,EAAEG,cANlB;AAOE,IAAA,aAAa,EAAEG,aAPjB;AAQE,IAAA,KAAK,EAAE,EAAE,GAAGY,yBAAL;AAAoB,SAAGC,uBAAWF,KAAX;AAAvB,KART;AASE,IAAA,kBAAkB,EAAEP;AATtB,IAFJ,CApBF,CADF;AAsCD,CAhEM;;;eAkEQb,M","sourcesContent":["import React from 'react';\nimport { Icon, PressableInputContainer, Text } from '@tecsinapse/react-core';\nimport { useClickAwayListener } from '../../../hooks';\nimport { StyledContainer, StyledInputContainer } from './styled';\nimport { Dropdown } from './Dropdown';\nimport { getDisplayValue } from './functions';\nimport { Transition } from 'react-transition-group';\nimport { defaultStyles, transition } from './animations';\n\nexport interface SelectProps<Data, Type extends 'single' | 'multi'> {\n  options: Data[];\n  onSelect: (\n    option: Type extends 'single' ? Data | undefined : Data[]\n  ) => never | void;\n  value: Type extends 'single' ? Data | undefined : Data[];\n  type: Type;\n  keyExtractor: (t: Data, index?: number) => string;\n  labelExtractor: (t: Data) => string;\n  placeholder?: string;\n  onSearch?: (searchArg: string) => void | never;\n  searchBarPlaceholder?: string;\n  hideSearchBar?: boolean;\n  label?: string;\n}\n\nexport const Select = <Data, Type extends 'single' | 'multi'>({\n  value,\n  options,\n  keyExtractor,\n  onSelect,\n  type,\n  labelExtractor,\n  placeholder,\n  onSearch,\n  hideSearchBar = true,\n  label,\n  ...rest\n}: SelectProps<Data, Type>): JSX.Element => {\n  const [dropDownVisible, setDropDownVisible] = React.useState<boolean>(false);\n  const refDropDown = React.useRef(null);\n  useClickAwayListener(refDropDown, setDropDownVisible);\n\n  const displayValue = getDisplayValue<Data>(\n    type,\n    value,\n    options,\n    placeholder,\n    keyExtractor,\n    labelExtractor\n  );\n\n  return (\n    <StyledContainer ref={refDropDown}>\n      <StyledInputContainer>\n        <PressableInputContainer\n          label={label}\n          {...rest}\n          onPress={() => setDropDownVisible(!dropDownVisible)}\n          rightComponent={\n            <Icon\n              name=\"chevron-down\"\n              type=\"material-community\"\n              size=\"centi\"\n              style={{ marginRight: 12 }}\n            />\n          }\n        >\n          <Text ellipsizeMode=\"tail\" numberOfLines={1}>\n            {displayValue}\n          </Text>\n        </PressableInputContainer>\n      </StyledInputContainer>\n      <Transition in={dropDownVisible} timeout={300}>\n        {state => (\n          <Dropdown\n            options={options}\n            onSelect={onSelect}\n            value={value}\n            type={type}\n            keyExtractor={keyExtractor}\n            labelExtractor={labelExtractor}\n            hideSearchBar={hideSearchBar}\n            style={{ ...defaultStyles, ...transition[state] }}\n            setDropDownVisible={setDropDownVisible}\n          />\n        )}\n      </Transition>\n    </StyledContainer>\n  );\n};\n\nexport default Select;\n"],"file":"Select.js"}

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

@@ -0,0 +1,16 @@
+interface SelectItemProps<Data, Type extends 'single' | 'multi'> {
+    item: Data;
+    type: Type;
+    value: Type extends 'single' ? Data | undefined : Data[];
+    onSelect: (option: Type extends 'single' ? Data | undefined : Data[]) => never | void;
+    keyExtractor: (t: Data, index: number) => string;
+    labelExtractor: (t: Data) => string;
+    index: number;
+}
+declare const SelectItem: <Data, Type extends "single" | "multi">({ item, onSelect, type, value, labelExtractor, setDropDownVisible, checkedAll, setCheckedAll, lenghtOptions, }: SelectItemProps<Data, Type> & {
+    setDropDownVisible: (t: boolean) => void;
+    checkedAll: boolean;
+    setCheckedAll: (t: boolean) => void;
+    lenghtOptions: number;
+}) => JSX.Element;
+export default SelectItem;

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

@@ -0,0 +1,76 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactCore = require("@tecsinapse/react-core");
+
+var _styled = require("./styled");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const SelectItem = ({
+  item,
+  onSelect,
+  type,
+  value,
+  labelExtractor,
+  setDropDownVisible,
+  checkedAll,
+  setCheckedAll,
+  lenghtOptions
+}) => {
+  const isMulti = type === 'multi';
+
+  const [checked, setChecked] = _react.default.useState(value !== undefined && type === 'multi' && value.includes(item));
+
+  _react.default.useEffect(() => {
+    if (type === 'multi') {
+      checkedAll ? setChecked(true) : setChecked(value.includes(item));
+    }
+  }, [checkedAll]);
+
+  const clickItem = item => {
+    const key = item;
+
+    if (Array.isArray(value)) {
+      const auxChecked = !checked;
+      setChecked(!checked);
+
+      if (auxChecked) {
+        onSelect([...value, key]);
+        [...value, key].length === lenghtOptions && setCheckedAll(true);
+      } else {
+        const auxArray = value;
+        const indexToExclude = auxArray.indexOf(key);
+        auxArray.splice(indexToExclude, 1);
+        onSelect([...auxArray]);
+        setCheckedAll(false);
+      }
+    } else {
+      onSelect(key);
+      setDropDownVisible(false);
+    }
+  };
+
+  return _react.default.createElement(_styled.ContainerItemSelect, {
+    onClick: () => clickItem(item)
+  }, isMulti && _react.default.createElement(_reactCore.Checkbox, {
+    checked: checked,
+    onChange: () => clickItem(item)
+  }), _react.default.createElement(_styled.StyledContainerTextLabel, null, _react.default.createElement(_reactCore.Text, {
+    fontWeight: "bold",
+    ellipsizeMode: "tail",
+    numberOfLines: 1
+  }, _react.default.createElement(_styled.StyledSpan, {
+    singleHighligh: type === 'single' && value === item
+  }, labelExtractor(item)))));
+};
+
+var _default = SelectItem;
+exports.default = _default;
+//# sourceMappingURL=SelectItem.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/molecules/Select/SelectItem/SelectItem.tsx"],"names":["SelectItem","item","onSelect","type","value","labelExtractor","setDropDownVisible","checkedAll","setCheckedAll","lenghtOptions","isMulti","checked","setChecked","React","useState","undefined","includes","useEffect","clickItem","key","Array","isArray","auxChecked","length","auxArray","indexToExclude","indexOf","splice"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;AAkBA,MAAMA,UAAU,GAAG,CAAwC;AACzDC,EAAAA,IADyD;AAEzDC,EAAAA,QAFyD;AAGzDC,EAAAA,IAHyD;AAIzDC,EAAAA,KAJyD;AAKzDC,EAAAA,cALyD;AAMzDC,EAAAA,kBANyD;AAOzDC,EAAAA,UAPyD;AAQzDC,EAAAA,aARyD;AASzDC,EAAAA;AATyD,CAAxC,KAeA;AACjB,QAAMC,OAAO,GAAGP,IAAI,KAAK,OAAzB;;AACA,QAAM,CAACQ,OAAD,EAAUC,UAAV,IAAwBC,eAAMC,QAAN,CAC5BV,KAAK,KAAKW,SAAV,IAAuBZ,IAAI,KAAK,OAAhC,IAA4CC,KAAD,CAAkBY,QAAlB,CAA2Bf,IAA3B,CADf,CAA9B;;AAGAY,iBAAMI,SAAN,CAAgB,MAAM;AACpB,QAAId,IAAI,KAAK,OAAb,EAAsB;AACpBI,MAAAA,UAAU,GACNK,UAAU,CAAC,IAAD,CADJ,GAENA,UAAU,CAAER,KAAD,CAAkBY,QAAlB,CAA2Bf,IAA3B,CAAD,CAFd;AAGD;AACF,GAND,EAMG,CAACM,UAAD,CANH;;AAQA,QAAMW,SAAS,GAAGjB,IAAI,IAAI;AAGxB,UAAMkB,GAAS,GAAGlB,IAAlB;;AACA,QAAImB,KAAK,CAACC,OAAN,CAAcjB,KAAd,CAAJ,EAA0B;AACxB,YAAMkB,UAAU,GAAG,CAACX,OAApB;AACAC,MAAAA,UAAU,CAAC,CAACD,OAAF,CAAV;;AACA,UAAIW,UAAJ,EAAgB;AACdpB,QAAAA,QAAQ,CAAC,CAAC,GAAGE,KAAJ,EAAWe,GAAX,CAAD,CAAR;AACA,SAAC,GAAGf,KAAJ,EAAWe,GAAX,EAAgBI,MAAhB,KAA2Bd,aAA3B,IAA4CD,aAAa,CAAC,IAAD,CAAzD;AACD,OAHD,MAGO;AACL,cAAMgB,QAAgB,GAAGpB,KAAzB;AACA,cAAMqB,cAAc,GAAGD,QAAQ,CAACE,OAAT,CAAiBP,GAAjB,CAAvB;AACAK,QAAAA,QAAQ,CAACG,MAAT,CAAgBF,cAAhB,EAAgC,CAAhC;AACAvB,QAAAA,QAAQ,CAAC,CAAC,GAAGsB,QAAJ,CAAD,CAAR;AACAhB,QAAAA,aAAa,CAAC,KAAD,CAAb;AACD;AACF,KAbD,MAaO;AACLN,MAAAA,QAAQ,CAACiB,GAAD,CAAR;AACAb,MAAAA,kBAAkB,CAAC,KAAD,CAAlB;AACD;AACF,GArBD;;AAuBA,SACE,6BAAC,2BAAD;AAAqB,IAAA,OAAO,EAAE,MAAMY,SAAS,CAACjB,IAAD;AAA7C,KACGS,OAAO,IACN,6BAAC,mBAAD;AAAU,IAAA,OAAO,EAAEC,OAAnB;AAA4B,IAAA,QAAQ,EAAE,MAAMO,SAAS,CAACjB,IAAD;AAArD,IAFJ,EAIE,6BAAC,gCAAD,QACE,6BAAC,eAAD;AAAM,IAAA,UAAU,EAAC,MAAjB;AAAwB,IAAA,aAAa,EAAC,MAAtC;AAA6C,IAAA,aAAa,EAAE;AAA5D,KACE,6BAAC,kBAAD;AAAY,IAAA,cAAc,EAAEE,IAAI,KAAK,QAAT,IAAqBC,KAAK,KAAKH;AAA3D,KACGI,cAAc,CAACJ,IAAD,CADjB,CADF,CADF,CAJF,CADF;AAcD,CAjED;;eAmEeD,U","sourcesContent":["import React from 'react';\nimport { Checkbox, Text } from '@tecsinapse/react-core';\nimport {\n  ContainerItemSelect,\n  StyledContainerTextLabel,\n  StyledSpan,\n} from './styled';\n\ninterface SelectItemProps<Data, Type extends 'single' | 'multi'> {\n  item: Data;\n  type: Type;\n  value: Type extends 'single' ? Data | undefined : Data[];\n  onSelect: (\n    option: Type extends 'single' ? Data | undefined : Data[]\n  ) => never | void;\n  keyExtractor: (t: Data, index: number) => string;\n  labelExtractor: (t: Data) => string;\n  index: number;\n}\n\nconst SelectItem = <Data, Type extends 'single' | 'multi'>({\n  item,\n  onSelect,\n  type,\n  value,\n  labelExtractor,\n  setDropDownVisible,\n  checkedAll,\n  setCheckedAll,\n  lenghtOptions,\n}: SelectItemProps<Data, Type> & {\n  setDropDownVisible: (t: boolean) => void;\n  checkedAll: boolean;\n  setCheckedAll: (t: boolean) => void;\n  lenghtOptions: number;\n}): JSX.Element => {\n  const isMulti = type === 'multi';\n  const [checked, setChecked] = React.useState<boolean>(\n    value !== undefined && type === 'multi' && (value as Data[]).includes(item)\n  );\n  React.useEffect(() => {\n    if (type === 'multi') {\n      checkedAll\n        ? setChecked(true)\n        : setChecked((value as Data[]).includes(item));\n    }\n  }, [checkedAll]);\n\n  const clickItem = item => {\n    // TS Workaround since TS won't infer the ternary operator's result type correctly\n    type OnSelectArg = Parameters<typeof onSelect>[0];\n    const key: Data = item;\n    if (Array.isArray(value)) {\n      const auxChecked = !checked;\n      setChecked(!checked);\n      if (auxChecked) {\n        onSelect([...value, key] as OnSelectArg);\n        [...value, key].length === lenghtOptions && setCheckedAll(true);\n      } else {\n        const auxArray: Data[] = value;\n        const indexToExclude = auxArray.indexOf(key);\n        auxArray.splice(indexToExclude, 1);\n        onSelect([...auxArray] as OnSelectArg);\n        setCheckedAll(false);\n      }\n    } else {\n      onSelect(key as OnSelectArg);\n      setDropDownVisible(false);\n    }\n  };\n\n  return (\n    <ContainerItemSelect onClick={() => clickItem(item)}>\n      {isMulti && (\n        <Checkbox checked={checked} onChange={() => clickItem(item)} />\n      )}\n      <StyledContainerTextLabel>\n        <Text fontWeight=\"bold\" ellipsizeMode=\"tail\" numberOfLines={1}>\n          <StyledSpan singleHighligh={type === 'single' && value === item}>\n            {labelExtractor(item)}\n          </StyledSpan>\n        </Text>\n      </StyledContainerTextLabel>\n    </ContainerItemSelect>\n  );\n};\n\nexport default SelectItem;\n"],"file":"SelectItem.js"}

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

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

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

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

package/dist/components/molecules/Select/SelectItem/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/molecules/Select/SelectItem/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA","sourcesContent":["export { default as ItemSelect } from './SelectItem';\n"],"file":"index.js"}

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const ContainerItemSelect: import("@emotion/styled").StyledComponent<any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledSpan: import("@emotion/styled").StyledComponent<any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const StyledContainerTextLabel: import("@emotion/styled").StyledComponent<any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

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

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledContainerTextLabel = exports.StyledSpan = exports.ContainerItemSelect = void 0;
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const ContainerItemSelect = (0, _styled.default)('div')`
+  padding: ${({
+  theme
+}) => `${theme.spacing.mili} ${theme.spacing.deca}`};
+  cursor: pointer;
+  &:hover {
+    background-color: ${({
+  theme
+}) => theme.color.primary.xlight};
+  }
+  &:hover span {
+    color: ${({
+  theme
+}) => theme.color.primary.medium};
+  }
+  flex-direction: row;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+exports.ContainerItemSelect = ContainerItemSelect;
+const StyledSpan = (0, _styled.default)('span')`
+  color: ${({
+  theme,
+  singleHighligh
+}) => singleHighligh ? theme.color.primary.medium : theme.color.secondary.xdark};
+  padding: ${({
+  theme
+}) => `${theme.spacing.mili} 0px`};
+`;
+exports.StyledSpan = StyledSpan;
+const StyledContainerTextLabel = (0, _styled.default)('div')`
+  padding-left: ${({
+  theme
+}) => theme.spacing.mili};
+  width: 100%;
+  display: flex;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+exports.StyledContainerTextLabel = StyledContainerTextLabel;
+//# sourceMappingURL=styled.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/molecules/Select/SelectItem/styled.ts"],"names":["ContainerItemSelect","theme","spacing","mili","deca","color","primary","xlight","medium","StyledSpan","singleHighligh","secondary","xdark","StyledContainerTextLabel"],"mappings":";;;;;;;AAAA;;;;AAGO,MAAMA,mBAAmB,GAAG,qBAAO,KAAP,CAAmC;AACtE,aAAa,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAgB,GAAEA,KAAK,CAACC,OAAN,CAAcC,IAAK,IAAGF,KAAK,CAACC,OAAN,CAAcE,IAAK,EAAE;AAC1E;AACA;AACA,wBAAwB,CAAC;AAAEH,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACI,KAAN,CAAYC,OAAZ,CAAoBC,MAAO;AAClE;AACA;AACA,aAAa,CAAC;AAAEN,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACI,KAAN,CAAYC,OAAZ,CAAoBE,MAAO;AACvD;AACA;AACA;AACA;AACA;AACA,CAbO;;AAeA,MAAMC,UAAU,GAAG,qBAAO,MAAP,CAExB;AACF,WAAW,CAAC;AAAER,EAAAA,KAAF;AAASS,EAAAA;AAAT,CAAD,KACPA,cAAc,GAAGT,KAAK,CAACI,KAAN,CAAYC,OAAZ,CAAoBE,MAAvB,GAAgCP,KAAK,CAACI,KAAN,CAAYM,SAAZ,CAAsBC,KAAM;AAC9E,aAAa,CAAC;AAAEX,EAAAA;AAAF,CAAD,KAAgB,GAAEA,KAAK,CAACC,OAAN,CAAcC,IAAK,MAAM;AACxD,CANO;;AAQA,MAAMU,wBAAwB,GAAG,qBAAO,KAAP,CAAmC;AAC3E,kBAAkB,CAAC;AAAEZ,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcC,IAAK;AACpD;AACA;AACA;AACA;AACA;AACA,CAPO","sourcesContent":["import styled from '@emotion/styled';\nimport { StyleProps } from '@tecsinapse/react-core';\n\nexport const ContainerItemSelect = styled('div')<Partial<StyleProps>>`\n  padding: ${({ theme }) => `${theme.spacing.mili} ${theme.spacing.deca}`};\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  flex-direction: row;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n`;\n\nexport const StyledSpan = styled('span')<\n  Partial<StyleProps> & { singleHighligh: boolean }\n>`\n  color: ${({ theme, singleHighligh }) =>\n    singleHighligh ? theme.color.primary.medium : theme.color.secondary.xdark};\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  text-overflow: ellipsis;\n  white-space: nowrap;\n`;\n"],"file":"styled.js"}

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

@@ -0,0 +1,27 @@
+export declare const defaultStyles: {
+    transition: string[];
+    overflow: string;
+    visibility: string;
+};
+export declare const transition: {
+    entering: {
+        transform: string;
+        opacity: number;
+        visibility: string;
+    };
+    entered: {
+        transform: string;
+        opacity: number;
+        visibility: string;
+    };
+    exiting: {
+        transform: string;
+        opacity: number;
+        visibility: string;
+    };
+    exited: {
+        transform: string;
+        opacity: number;
+        visibility: string;
+    };
+};