@tecsinapse/react-web-kit 1.7.8 → 1.8.0

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

@@ -1,4 +1,6 @@
-export interface SelectProps<Data, Type extends 'single' | 'multi'> {
+import React from 'react';
+import { TextProps } from '@tecsinapse/react-core';
+export interface SelectProps<Data, Type extends 'single' | 'multi'> extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {
     options: Data[];
     onSelect: (option: Type extends 'single' ? Data | undefined : Data[]) => never | void;
     value: Type extends 'single' ? Data | undefined : Data[];
@@ -9,7 +11,10 @@ export interface SelectProps<Data, Type extends 'single' | 'multi'> {
     onSearch?: (searchArg: string) => void | never;
     searchBarPlaceholder?: string;
     hideSearchBar?: boolean;
+    disabled?: boolean;
     label?: string;
+    anchor?: 'top' | 'bottom';
+    displayTextProps?: TextProps;
 }
-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 declare const Select: <Data, Type extends "single" | "multi">({ value, options, keyExtractor, onSelect, type, labelExtractor, placeholder, onSearch, searchBarPlaceholder, hideSearchBar, label, disabled, anchor, displayTextProps, ...rest }: SelectProps<Data, Type>) => JSX.Element;
 export default Select;

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

@@ -34,8 +34,12 @@ const Select = ({
   labelExtractor,
   placeholder,
   onSearch,
+  searchBarPlaceholder,
   hideSearchBar = true,
   label,
+  disabled = false,
+  anchor = 'bottom',
+  displayTextProps,
   ...rest
 }) => {
   const [dropDownVisible, setDropDownVisible] = _react.default.useState(false);
@@ -44,12 +48,12 @@ const Select = ({
 
   (0, _hooks.useClickAwayListener)(refDropDown, setDropDownVisible);
   const displayValue = (0, _functions.getDisplayValue)(type, value, options, placeholder, keyExtractor, labelExtractor);
-  return _react.default.createElement(_styled.StyledContainer, {
+  return _react.default.createElement(_styled.StyledContainer, _extends({
     ref: refDropDown
-  }, _react.default.createElement(_styled.StyledInputContainer, null, _react.default.createElement(_reactCore.PressableInputContainer, _extends({
-    label: label
-  }, rest, {
+  }, rest), _react.default.createElement(_styled.StyledInputContainer, null, _react.default.createElement(_reactCore.PressableInputContainer, {
+    label: label,
     onPress: () => setDropDownVisible(!dropDownVisible),
+    disabled: disabled,
     rightComponent: _react.default.createElement(_reactCore.Icon, {
       name: "chevron-down",
       type: "material-community",
@@ -58,10 +62,10 @@ const Select = ({
         marginRight: 12
       }
     })
-  }), _react.default.createElement(_reactCore.Text, {
+  }, _react.default.createElement(_reactCore.Text, _extends({}, displayTextProps, {
     ellipsizeMode: "tail",
     numberOfLines: 1
-  }, displayValue))), _react.default.createElement(_reactTransitionGroup.Transition, {
+  }), displayValue))), _react.default.createElement(_reactTransitionGroup.Transition, {
     in: dropDownVisible,
     timeout: 300
   }, state => _react.default.createElement(_Dropdown.Dropdown, {
@@ -72,10 +76,13 @@ const Select = ({
     keyExtractor: keyExtractor,
     labelExtractor: labelExtractor,
     hideSearchBar: hideSearchBar,
+    searchBarPlaceholder: searchBarPlaceholder,
+    onSearch: onSearch,
     style: { ..._animations.defaultStyles,
-      ..._animations.transition[state]
+      ..._animations.transition[anchor][state]
     },
-    setDropDownVisible: setDropDownVisible
+    setDropDownVisible: setDropDownVisible,
+    anchor: anchor
   })));
 };
 

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

@@ -1 +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"}
+{"version":3,"sources":["../../../../src/components/molecules/Select/Select.tsx"],"names":["Select","value","options","keyExtractor","onSelect","type","labelExtractor","placeholder","onSearch","searchBarPlaceholder","hideSearchBar","label","disabled","anchor","displayTextProps","rest","dropDownVisible","setDropDownVisible","React","useState","refDropDown","useRef","displayValue","marginRight","state","defaultStyles","transition"],"mappings":";;;;;;;AAAA;;AACA;;AAMA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;AAsBO,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,oBAT4D;AAU5DC,EAAAA,aAAa,GAAG,IAV4C;AAW5DC,EAAAA,KAX4D;AAY5DC,EAAAA,QAAQ,GAAG,KAZiD;AAa5DC,EAAAA,MAAM,GAAG,QAbmD;AAc5DC,EAAAA,gBAd4D;AAe5D,KAAGC;AAfyD,CAAxC,KAgBsB;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,gCACnBjB,IADmB,EAEnBJ,KAFmB,EAGnBC,OAHmB,EAInBK,WAJmB,EAKnBJ,YALmB,EAMnBG,cANmB,CAArB;AASA,SACE,6BAAC,uBAAD;AAAiB,IAAA,GAAG,EAAEc;AAAtB,KAAuCL,IAAvC,GACE,6BAAC,4BAAD,QACE,6BAAC,kCAAD;AACE,IAAA,KAAK,EAAEJ,KADT;AAEE,IAAA,OAAO,EAAE,MAAMM,kBAAkB,CAAC,CAACD,eAAF,CAFnC;AAGE,IAAA,QAAQ,EAAEJ,QAHZ;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;AAAEW,QAAAA,WAAW,EAAE;AAAf;AAJT;AALJ,KAaE,6BAAC,eAAD,eAAUT,gBAAV;AAA4B,IAAA,aAAa,EAAC,MAA1C;AAAiD,IAAA,aAAa,EAAE;AAAhE,MACGQ,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,EAAEtB,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,EAAEI,aAPjB;AAQE,IAAA,oBAAoB,EAAED,oBARxB;AASE,IAAA,QAAQ,EAAED,QATZ;AAUE,IAAA,KAAK,EAAE,EAAE,GAAGiB,yBAAL;AAAoB,SAAGC,uBAAWb,MAAX,EAAmBW,KAAnB;AAAvB,KAVT;AAWE,IAAA,kBAAkB,EAAEP,kBAXtB;AAYE,IAAA,MAAM,EAAEJ;AAZV,IAFJ,CApBF,CADF;AAyCD,CAvEM;;;eAyEQb,M","sourcesContent":["import React from 'react';\nimport {\n  Icon,\n  PressableInputContainer,\n  Text,\n  TextProps,\n} 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  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {\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  disabled?: boolean;\n  label?: string;\n  anchor?: 'top' | 'bottom';\n  displayTextProps?: TextProps;\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  searchBarPlaceholder,\n  hideSearchBar = true,\n  label,\n  disabled = false,\n  anchor = 'bottom',\n  displayTextProps,\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} {...rest}>\n      <StyledInputContainer>\n        <PressableInputContainer\n          label={label}\n          onPress={() => setDropDownVisible(!dropDownVisible)}\n          disabled={disabled}\n          rightComponent={\n            <Icon\n              name=\"chevron-down\"\n              type=\"material-community\"\n              size=\"centi\"\n              style={{ marginRight: 12 }}\n            />\n          }\n        >\n          <Text {...displayTextProps} 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            searchBarPlaceholder={searchBarPlaceholder}\n            onSearch={onSearch}\n            style={{ ...defaultStyles, ...transition[anchor][state] }}\n            setDropDownVisible={setDropDownVisible}\n            anchor={anchor}\n          />\n        )}\n      </Transition>\n    </StyledContainer>\n  );\n};\n\nexport default Select;\n"],"file":"Select.js"}

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

@@ -45,7 +45,7 @@ const SelectItem = ({
         onSelect([...value, key]);
         [...value, key].length === lenghtOptions && setCheckedAll(true);
       } else {
-        const auxArray = value;
+        const auxArray = [...value];
         const indexToExclude = auxArray.indexOf(key);
         auxArray.splice(indexToExclude, 1);
         onSelect([...auxArray]);

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

@@ -1 +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"}
+{"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,GAAG,CAAC,GAAGpB,KAAJ,CAAzB;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/animations.d.ts

@@ -4,24 +4,48 @@ export declare const defaultStyles: {
     visibility: string;
 };
 export declare const transition: {
-    entering: {
-        transform: string;
-        opacity: number;
-        visibility: string;
+    bottom: {
+        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;
+        };
     };
-    entered: {
-        transform: string;
-        opacity: number;
-        visibility: string;
-    };
-    exiting: {
-        transform: string;
-        opacity: number;
-        visibility: string;
-    };
-    exited: {
-        transform: string;
-        opacity: number;
-        visibility: string;
+    top: {
+        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;
+        };
     };
 };

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

@@ -11,25 +11,49 @@ const defaultStyles = {
 };
 exports.defaultStyles = defaultStyles;
 const transition = {
-  entering: {
-    transform: 'translateY(-10%)',
-    opacity: 0,
-    visibility: 'hidden'
+  bottom: {
+    entering: {
+      transform: 'translateY(-10%)',
+      opacity: 0,
+      visibility: 'hidden'
+    },
+    entered: {
+      transform: 'translateY(0%)',
+      opacity: 1,
+      visibility: 'visible'
+    },
+    exiting: {
+      transform: 'translateY(0%)',
+      opacity: 1,
+      visibility: 'visible'
+    },
+    exited: {
+      transform: 'translateY(-10%)',
+      opacity: 0,
+      visibility: 'hidden'
+    }
   },
-  entered: {
-    transform: 'translateY(0%)',
-    opacity: 1,
-    visibility: 'visible'
-  },
-  exiting: {
-    transform: 'translateY(0%)',
-    opacity: 1,
-    visibility: 'visible'
-  },
-  exited: {
-    transform: 'translateY(-10%)',
-    opacity: 0,
-    visibility: 'hidden'
+  top: {
+    entering: {
+      transform: 'translateY(10%)',
+      opacity: 0,
+      visibility: 'hidden'
+    },
+    entered: {
+      transform: 'translateY(0%)',
+      opacity: 1,
+      visibility: 'visible'
+    },
+    exiting: {
+      transform: 'translateY(0%)',
+      opacity: 1,
+      visibility: 'visible'
+    },
+    exited: {
+      transform: 'translateY(10%)',
+      opacity: 0,
+      visibility: 'hidden'
+    }
   }
 };
 exports.transition = transition;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/molecules/Select/animations.ts"],"names":["defaultStyles","transition","overflow","visibility","entering","transform","opacity","entered","exiting","exited"],"mappings":";;;;;;AAAO,MAAMA,aAAa,GAAG;AAC3BC,EAAAA,UAAU,EAAE,CACV,sFADU,CADe;AAI3BC,EAAAA,QAAQ,EAAE,QAJiB;AAK3BC,EAAAA,UAAU,EAAE;AALe,CAAtB;;AAQA,MAAMF,UAAU,GAAG;AACxBG,EAAAA,QAAQ,EAAE;AACRC,IAAAA,SAAS,EAAE,kBADH;AAERC,IAAAA,OAAO,EAAE,CAFD;AAGRH,IAAAA,UAAU,EAAE;AAHJ,GADc;AAMxBI,EAAAA,OAAO,EAAE;AAAEF,IAAAA,SAAS,EAAE,gBAAb;AAA+BC,IAAAA,OAAO,EAAE,CAAxC;AAA2CH,IAAAA,UAAU,EAAE;AAAvD,GANe;AAOxBK,EAAAA,OAAO,EAAE;AAAEH,IAAAA,SAAS,EAAE,gBAAb;AAA+BC,IAAAA,OAAO,EAAE,CAAxC;AAA2CH,IAAAA,UAAU,EAAE;AAAvD,GAPe;AAQxBM,EAAAA,MAAM,EAAE;AAAEJ,IAAAA,SAAS,EAAE,kBAAb;AAAiCC,IAAAA,OAAO,EAAE,CAA1C;AAA6CH,IAAAA,UAAU,EAAE;AAAzD;AARgB,CAAnB","sourcesContent":["export const defaultStyles = {\n  transition: [\n    'transform 200ms ease-in-out, opacity 200ms ease-in-out, visibility 200ms ease-in-out',\n  ],\n  overflow: 'hidden',\n  visibility: 'hidden',\n};\n\nexport const transition = {\n  entering: {\n    transform: 'translateY(-10%)',\n    opacity: 0,\n    visibility: 'hidden',\n  },\n  entered: { transform: 'translateY(0%)', opacity: 1, visibility: 'visible' },\n  exiting: { transform: 'translateY(0%)', opacity: 1, visibility: 'visible' },\n  exited: { transform: 'translateY(-10%)', opacity: 0, visibility: 'hidden' },\n};\n"],"file":"animations.js"}
+{"version":3,"sources":["../../../../src/components/molecules/Select/animations.ts"],"names":["defaultStyles","transition","overflow","visibility","bottom","entering","transform","opacity","entered","exiting","exited","top"],"mappings":";;;;;;AAAO,MAAMA,aAAa,GAAG;AAC3BC,EAAAA,UAAU,EAAE,CACV,sFADU,CADe;AAI3BC,EAAAA,QAAQ,EAAE,QAJiB;AAK3BC,EAAAA,UAAU,EAAE;AALe,CAAtB;;AAQA,MAAMF,UAAU,GAAG;AACxBG,EAAAA,MAAM,EAAE;AACNC,IAAAA,QAAQ,EAAE;AACRC,MAAAA,SAAS,EAAE,kBADH;AAERC,MAAAA,OAAO,EAAE,CAFD;AAGRJ,MAAAA,UAAU,EAAE;AAHJ,KADJ;AAMNK,IAAAA,OAAO,EAAE;AACPF,MAAAA,SAAS,EAAE,gBADJ;AAEPC,MAAAA,OAAO,EAAE,CAFF;AAGPJ,MAAAA,UAAU,EAAE;AAHL,KANH;AAWNM,IAAAA,OAAO,EAAE;AACPH,MAAAA,SAAS,EAAE,gBADJ;AAEPC,MAAAA,OAAO,EAAE,CAFF;AAGPJ,MAAAA,UAAU,EAAE;AAHL,KAXH;AAgBNO,IAAAA,MAAM,EAAE;AACNJ,MAAAA,SAAS,EAAE,kBADL;AAENC,MAAAA,OAAO,EAAE,CAFH;AAGNJ,MAAAA,UAAU,EAAE;AAHN;AAhBF,GADgB;AAuBxBQ,EAAAA,GAAG,EAAE;AACHN,IAAAA,QAAQ,EAAE;AACRC,MAAAA,SAAS,EAAE,iBADH;AAERC,MAAAA,OAAO,EAAE,CAFD;AAGRJ,MAAAA,UAAU,EAAE;AAHJ,KADP;AAMHK,IAAAA,OAAO,EAAE;AAAEF,MAAAA,SAAS,EAAE,gBAAb;AAA+BC,MAAAA,OAAO,EAAE,CAAxC;AAA2CJ,MAAAA,UAAU,EAAE;AAAvD,KANN;AAOHM,IAAAA,OAAO,EAAE;AAAEH,MAAAA,SAAS,EAAE,gBAAb;AAA+BC,MAAAA,OAAO,EAAE,CAAxC;AAA2CJ,MAAAA,UAAU,EAAE;AAAvD,KAPN;AAQHO,IAAAA,MAAM,EAAE;AAAEJ,MAAAA,SAAS,EAAE,iBAAb;AAAgCC,MAAAA,OAAO,EAAE,CAAzC;AAA4CJ,MAAAA,UAAU,EAAE;AAAxD;AARL;AAvBmB,CAAnB","sourcesContent":["export const defaultStyles = {\n  transition: [\n    'transform 200ms ease-in-out, opacity 200ms ease-in-out, visibility 200ms ease-in-out',\n  ],\n  overflow: 'hidden',\n  visibility: 'hidden',\n};\n\nexport const transition = {\n  bottom: {\n    entering: {\n      transform: 'translateY(-10%)',\n      opacity: 0,\n      visibility: 'hidden',\n    },\n    entered: {\n      transform: 'translateY(0%)',\n      opacity: 1,\n      visibility: 'visible',\n    },\n    exiting: {\n      transform: 'translateY(0%)',\n      opacity: 1,\n      visibility: 'visible',\n    },\n    exited: {\n      transform: 'translateY(-10%)',\n      opacity: 0,\n      visibility: 'hidden',\n    },\n  },\n  top: {\n    entering: {\n      transform: 'translateY(10%)',\n      opacity: 0,\n      visibility: 'hidden',\n    },\n    entered: { transform: 'translateY(0%)', opacity: 1, visibility: 'visible' },\n    exiting: { transform: 'translateY(0%)', opacity: 1, visibility: 'visible' },\n    exited: { transform: 'translateY(10%)', opacity: 0, visibility: 'hidden' },\n  },\n};\n"],"file":"animations.js"}

package/dist/components/organisms/DataGrid/DataGrid.d.ts

@@ -1,6 +1,6 @@
-import React, { CSSProperties } from 'react';
+import React from 'react';
 import { HeadersType } from './types';
-export interface DataGridProps<Data> {
+export interface DataGridProps<Data> extends React.HTMLAttributes<HTMLDivElement> {
     headers: HeadersType<Data>[];
     data: Data[];
     rowKeyExtractor: (data: Data) => string;
@@ -22,8 +22,7 @@ export interface DataGridProps<Data> {
     onPageChange?: (page: number) => void;
     loading?: boolean;
     skeletonComponent?: React.ReactNode;
-    style?: CSSProperties;
     emptyPlaceholder?: React.ReactNode;
 }
-declare const DataGrid: <Data extends unknown>({ headers, data, rowKeyExtractor, toolbarTitle, toolbarFooter, toolbarRightIcons, selectable, selectedRows, onSelectedRows, pagination, rowsPerPage, onRowsPerPageChange, rowsPerPageOptions: _rowsPerPageOptions, rowsPerPageLabel: _rowsPerPageLabel, exportLabel, exportFunction, rowsCount, page, onPageChange, loading, skeletonComponent, style, emptyPlaceholder, }: DataGridProps<Data>) => JSX.Element;
+declare const DataGrid: <Data extends unknown>({ headers, data, rowKeyExtractor, toolbarTitle, toolbarFooter, toolbarRightIcons, selectable, selectedRows, onSelectedRows, pagination, rowsPerPage, onRowsPerPageChange, rowsPerPageOptions: _rowsPerPageOptions, rowsPerPageLabel: _rowsPerPageLabel, exportLabel, exportFunction, rowsCount, page, onPageChange, loading, skeletonComponent, emptyPlaceholder, ...rest }: DataGridProps<Data>) => JSX.Element;
 export default DataGrid;

package/dist/components/organisms/DataGrid/DataGrid.js

@@ -43,8 +43,8 @@ const DataGrid = ({
   onPageChange,
   loading = false,
   skeletonComponent,
-  style,
-  emptyPlaceholder
+  emptyPlaceholder,
+  ...rest
 }) => {
   if (selectable && (!selectedRows || !onSelectedRows)) {
     throw new Error('[DataGrid] You should specify selection handlers (selectedRows, onSelectedRows)');
@@ -66,9 +66,7 @@ const DataGrid = ({
     });
   }, [onSelectedRows, rowKeyExtractor]);
 
-  return _react.default.createElement(_Table.TableContainer, {
-    style: style
-  }, _react.default.createElement(_Table.TableToolbar, {
+  return _react.default.createElement(_Table.TableContainer, rest, _react.default.createElement(_Table.TableToolbar, {
     title: toolbarTitle,
     rightIcons: toolbarRightIcons,
     footer: toolbarFooter

package/dist/components/organisms/DataGrid/DataGrid.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/organisms/DataGrid/DataGrid.tsx"],"names":["DataGrid","headers","data","rowKeyExtractor","toolbarTitle","toolbarFooter","toolbarRightIcons","selectable","selectedRows","onSelectedRows","pagination","rowsPerPage","onRowsPerPageChange","rowsPerPageOptions","_rowsPerPageOptions","rowsPerPageLabel","_rowsPerPageLabel","exportLabel","exportFunction","rowsCount","page","onPageChange","loading","skeletonComponent","style","emptyPlaceholder","Error","React","useCallback","value","useMemo","handleSelect","current","checked","prevState","idx","findIndex","el","length","map","item","some","sel","Array","keys","padding","width"],"mappings":"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","sourcesContent":["import React, { CSSProperties } from 'react';\nimport {\n  Table,\n  TableToolbar,\n  TableContainer,\n  Tr,\n  Td,\n  TBody,\n} from '../../atoms/Table';\nimport { Header } from './Header';\nimport { Row } from './Row';\nimport { HeadersType } from './types';\nimport { Footer } from './Footer';\nimport { Skeleton } from '../../atoms/Skeleton';\nimport { getData, removeElement } from './utils';\n\nexport interface DataGridProps<Data> {\n  headers: HeadersType<Data>[];\n  data: Data[];\n  /** Unique identifier for row data */\n  rowKeyExtractor: (data: Data) => string;\n  toolbarRightIcons?: React.ReactNode;\n  toolbarFooter?: React.ReactNode;\n  toolbarTitle: string;\n  /** Enable rows selection */\n  selectable?: boolean;\n  /** Selected items */\n  selectedRows?: Data[];\n  /** Selection handler */\n  onSelectedRows?: (data: Data[] | ((prevState: Data[]) => Data[])) => void;\n  /** Shows pagination controls */\n  pagination?: boolean;\n  /** Results per page */\n  rowsPerPage?: number;\n  /** Results per page handler */\n  onRowsPerPageChange?: (value: number) => void;\n  rowsPerPageOptions?: number[];\n  rowsPerPageLabel?: (value: number) => string;\n  /** Export button label */\n  exportLabel?: string;\n  exportFunction?: () => void;\n  /** Total data elements. Only specify this property if your data is server-side */\n  rowsCount?: number;\n  /** Current page. Always start in 0 */\n  page?: number;\n  /** Current page handler */\n  onPageChange?: (page: number) => void;\n  /** Loading state. The amount of skeleton rows is based on current rowsPerPage */\n  loading?: boolean;\n  /** Custom skeleton component for better visual */\n  skeletonComponent?: React.ReactNode;\n  /** CSS style spread to TableContainer */\n  style?: CSSProperties;\n  /** Empty state placeholder */\n  emptyPlaceholder?: React.ReactNode;\n}\n\n/** Note: Consider memoizing functions for a better performance */\nconst DataGrid = <Data extends unknown>({\n  headers,\n  data,\n  rowKeyExtractor,\n  toolbarTitle,\n  toolbarFooter,\n  toolbarRightIcons,\n  selectable = false,\n  selectedRows = [],\n  onSelectedRows,\n  pagination = false,\n  rowsPerPage = 10,\n  onRowsPerPageChange,\n  rowsPerPageOptions: _rowsPerPageOptions,\n  rowsPerPageLabel: _rowsPerPageLabel,\n  exportLabel = 'Exportar',\n  exportFunction,\n  rowsCount,\n  page = 0,\n  onPageChange,\n  loading = false,\n  skeletonComponent,\n  style,\n  emptyPlaceholder,\n}: DataGridProps<Data>): JSX.Element => {\n  if (selectable && (!selectedRows || !onSelectedRows)) {\n    throw new Error(\n      '[DataGrid] You should specify selection handlers (selectedRows, onSelectedRows)'\n    );\n  }\n\n  const rowsPerPageLabel = React.useCallback(\n    value =>\n      _rowsPerPageLabel\n        ? _rowsPerPageLabel(value)\n        : `Exibir por página: ${value} itens`,\n    [_rowsPerPageLabel]\n  );\n  const rowsPerPageOptions = React.useMemo(\n    () => _rowsPerPageOptions ?? [10, 25, 50],\n    [_rowsPerPageOptions]\n  );\n\n  const handleSelect = React.useCallback(\n    (current, checked) => {\n      if (checked) {\n        onSelectedRows?.(prevState => [...prevState, current]);\n        return;\n      }\n\n      onSelectedRows?.(prevState => {\n        const idx = prevState.findIndex(\n          el => rowKeyExtractor(el) === rowKeyExtractor(current)\n        );\n        return [...removeElement(prevState, idx)];\n      });\n    },\n    [onSelectedRows, rowKeyExtractor]\n  );\n\n  return (\n    <TableContainer style={style}>\n      <TableToolbar\n        title={toolbarTitle}\n        rightIcons={toolbarRightIcons}\n        footer={toolbarFooter}\n      />\n      <Table>\n        <Header\n          selectable={selectable}\n          headers={headers}\n          data={data}\n          rowsCount={rowsCount ?? data.length}\n          rowKeyExtractor={rowKeyExtractor}\n          selectedRows={selectedRows}\n          onSelected={onSelectedRows}\n        />\n\n        {!loading ? (\n          <TBody>\n            {data.length > 0 ? (\n              getData(\n                data,\n                rowsCount,\n                page,\n                rowsPerPage,\n                pagination\n              ).map(item => (\n                <Row\n                  key={rowKeyExtractor(item)}\n                  rowKeyExtractor={rowKeyExtractor}\n                  handleSelect={handleSelect}\n                  selectable={selectable}\n                  headers={headers}\n                  data={item}\n                  checked={selectedRows?.some(\n                    sel => rowKeyExtractor(sel) === rowKeyExtractor(item)\n                  )}\n                />\n              ))\n            ) : (\n              <tr>\n                <td colSpan={99}>{emptyPlaceholder}</td>\n              </tr>\n            )}\n          </TBody>\n        ) : (\n          <TBody>\n            {[...Array(rowsPerPage).keys()].map(idx => (\n              <Tr key={`skeleton-${idx}`}>\n                <Td colSpan={99} style={{ padding: 0 }}>\n                  {skeletonComponent ?? (\n                    <Skeleton height={55} radius=\"mili\" animation=\"wave\">\n                      <div style={{ width: '100%' }} />\n                    </Skeleton>\n                  )}\n                </Td>\n              </Tr>\n            ))}\n          </TBody>\n        )}\n\n        <Footer\n          exportFunction={exportFunction}\n          exportLabel={exportLabel}\n          rowsPerPageLabel={rowsPerPageLabel}\n          rowsPerPage={rowsPerPage}\n          onRowsPerPageChange={onRowsPerPageChange}\n          rowsPerPageOptions={rowsPerPageOptions}\n          rowsCount={rowsCount ?? data.length}\n          page={page}\n          onPageChange={onPageChange}\n          pagination={pagination}\n        />\n      </Table>\n    </TableContainer>\n  );\n};\n\nexport default DataGrid;\n"],"file":"DataGrid.js"}
+{"version":3,"sources":["../../../../src/components/organisms/DataGrid/DataGrid.tsx"],"names":["DataGrid","headers","data","rowKeyExtractor","toolbarTitle","toolbarFooter","toolbarRightIcons","selectable","selectedRows","onSelectedRows","pagination","rowsPerPage","onRowsPerPageChange","rowsPerPageOptions","_rowsPerPageOptions","rowsPerPageLabel","_rowsPerPageLabel","exportLabel","exportFunction","rowsCount","page","onPageChange","loading","skeletonComponent","emptyPlaceholder","rest","Error","React","useCallback","value","useMemo","handleSelect","current","checked","prevState","idx","findIndex","el","length","map","item","some","sel","Array","keys","padding","width"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {\n  Table,\n  TableToolbar,\n  TableContainer,\n  Tr,\n  Td,\n  TBody,\n} from '../../atoms/Table';\nimport { Header } from './Header';\nimport { Row } from './Row';\nimport { HeadersType } from './types';\nimport { Footer } from './Footer';\nimport { Skeleton } from '../../atoms/Skeleton';\nimport { getData, removeElement } from './utils';\n\nexport interface DataGridProps<Data>\n  extends React.HTMLAttributes<HTMLDivElement> {\n  headers: HeadersType<Data>[];\n  data: Data[];\n  /** Unique identifier for row data */\n  rowKeyExtractor: (data: Data) => string;\n  toolbarRightIcons?: React.ReactNode;\n  toolbarFooter?: React.ReactNode;\n  toolbarTitle: string;\n  /** Enable rows selection */\n  selectable?: boolean;\n  /** Selected items */\n  selectedRows?: Data[];\n  /** Selection handler */\n  onSelectedRows?: (data: Data[] | ((prevState: Data[]) => Data[])) => void;\n  /** Shows pagination controls */\n  pagination?: boolean;\n  /** Results per page */\n  rowsPerPage?: number;\n  /** Results per page handler */\n  onRowsPerPageChange?: (value: number) => void;\n  rowsPerPageOptions?: number[];\n  rowsPerPageLabel?: (value: number) => string;\n  /** Export button label */\n  exportLabel?: string;\n  exportFunction?: () => void;\n  /** Total data elements. Only specify this property if your data is server-side */\n  rowsCount?: number;\n  /** Current page. Always start in 0 */\n  page?: number;\n  /** Current page handler */\n  onPageChange?: (page: number) => void;\n  /** Loading state. The amount of skeleton rows is based on current rowsPerPage */\n  loading?: boolean;\n  /** Custom skeleton component for better visual */\n  skeletonComponent?: React.ReactNode;\n  /** Empty state placeholder */\n  emptyPlaceholder?: React.ReactNode;\n}\n\n/** Note: Consider memoizing functions for a better performance */\nconst DataGrid = <Data extends unknown>({\n  headers,\n  data,\n  rowKeyExtractor,\n  toolbarTitle,\n  toolbarFooter,\n  toolbarRightIcons,\n  selectable = false,\n  selectedRows = [],\n  onSelectedRows,\n  pagination = false,\n  rowsPerPage = 10,\n  onRowsPerPageChange,\n  rowsPerPageOptions: _rowsPerPageOptions,\n  rowsPerPageLabel: _rowsPerPageLabel,\n  exportLabel = 'Exportar',\n  exportFunction,\n  rowsCount,\n  page = 0,\n  onPageChange,\n  loading = false,\n  skeletonComponent,\n  emptyPlaceholder,\n  ...rest\n}: DataGridProps<Data>): JSX.Element => {\n  if (selectable && (!selectedRows || !onSelectedRows)) {\n    throw new Error(\n      '[DataGrid] You should specify selection handlers (selectedRows, onSelectedRows)'\n    );\n  }\n\n  const rowsPerPageLabel = React.useCallback(\n    value =>\n      _rowsPerPageLabel\n        ? _rowsPerPageLabel(value)\n        : `Exibir por página: ${value} itens`,\n    [_rowsPerPageLabel]\n  );\n  const rowsPerPageOptions = React.useMemo(\n    () => _rowsPerPageOptions ?? [10, 25, 50],\n    [_rowsPerPageOptions]\n  );\n\n  const handleSelect = React.useCallback(\n    (current, checked) => {\n      if (checked) {\n        onSelectedRows?.(prevState => [...prevState, current]);\n        return;\n      }\n\n      onSelectedRows?.(prevState => {\n        const idx = prevState.findIndex(\n          el => rowKeyExtractor(el) === rowKeyExtractor(current)\n        );\n        return [...removeElement(prevState, idx)];\n      });\n    },\n    [onSelectedRows, rowKeyExtractor]\n  );\n\n  return (\n    <TableContainer {...rest}>\n      <TableToolbar\n        title={toolbarTitle}\n        rightIcons={toolbarRightIcons}\n        footer={toolbarFooter}\n      />\n      <Table>\n        <Header\n          selectable={selectable}\n          headers={headers}\n          data={data}\n          rowsCount={rowsCount ?? data.length}\n          rowKeyExtractor={rowKeyExtractor}\n          selectedRows={selectedRows}\n          onSelected={onSelectedRows}\n        />\n\n        {!loading ? (\n          <TBody>\n            {data.length > 0 ? (\n              getData(\n                data,\n                rowsCount,\n                page,\n                rowsPerPage,\n                pagination\n              ).map(item => (\n                <Row\n                  key={rowKeyExtractor(item)}\n                  rowKeyExtractor={rowKeyExtractor}\n                  handleSelect={handleSelect}\n                  selectable={selectable}\n                  headers={headers}\n                  data={item}\n                  checked={selectedRows?.some(\n                    sel => rowKeyExtractor(sel) === rowKeyExtractor(item)\n                  )}\n                />\n              ))\n            ) : (\n              <tr>\n                <td colSpan={99}>{emptyPlaceholder}</td>\n              </tr>\n            )}\n          </TBody>\n        ) : (\n          <TBody>\n            {[...Array(rowsPerPage).keys()].map(idx => (\n              <Tr key={`skeleton-${idx}`}>\n                <Td colSpan={99} style={{ padding: 0 }}>\n                  {skeletonComponent ?? (\n                    <Skeleton height={55} radius=\"mili\" animation=\"wave\">\n                      <div style={{ width: '100%' }} />\n                    </Skeleton>\n                  )}\n                </Td>\n              </Tr>\n            ))}\n          </TBody>\n        )}\n\n        <Footer\n          exportFunction={exportFunction}\n          exportLabel={exportLabel}\n          rowsPerPageLabel={rowsPerPageLabel}\n          rowsPerPage={rowsPerPage}\n          onRowsPerPageChange={onRowsPerPageChange}\n          rowsPerPageOptions={rowsPerPageOptions}\n          rowsCount={rowsCount ?? data.length}\n          page={page}\n          onPageChange={onPageChange}\n          pagination={pagination}\n        />\n      </Table>\n    </TableContainer>\n  );\n};\n\nexport default DataGrid;\n"],"file":"DataGrid.js"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tecsinapse/react-web-kit",
   "description": "TecSinapse React components",
-  "version": "1.7.8",
+  "version": "1.8.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "license": "MIT",
@@ -14,7 +14,8 @@
     "@emotion/native": "^11.0.0",
     "@emotion/react": "^11.4.1",
     "@emotion/styled": "^11.3.0",
-    "@tecsinapse/react-core": "^1.7.6",
+    "@tecsinapse/react-core": "^1.8.0",
+    "@types/react-native": "^0.64.4",
     "react-native-vector-icons": "^8.1.0",
     "react-transition-group": "^4.4.2"
   },
@@ -32,5 +33,5 @@
     "react-dom": ">=16.8.0",
     "react-native-web": "^0.17.1"
   },
-  "gitHead": "505f630140fe4e50cc3ce38a1f2e963cf8d42461"
+  "gitHead": "007818f30ad4257a740f6abe53c10495b1187ac1"
 }

package/src/components/atoms/Accordion/Accordion.tsx

@@ -15,7 +15,7 @@ import {
 } from './animations';
 import { useTheme } from '@emotion/react';
 
-export interface AccordionProps {
+export interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {
   open?: boolean;
   onChange?: () => void;
   title: string;
@@ -29,6 +29,7 @@ const Accordion: React.FC<AccordionProps> = ({
   onChange,
   transition = 200,
   children,
+  ...rest
 }) => {
   const [open, setOpen] = React.useState(_open);
   const [contentHeight, setContentHeight] = React.useState(0);
@@ -54,7 +55,7 @@ const Accordion: React.FC<AccordionProps> = ({
   }, [onChange]);
 
   return (
-    <AccordionContainer>
+    <AccordionContainer {...rest}>
       <TitleContainer onClick={handleClick}>
         <Transition in={open} timeout={transition}>
           {state => (

package/src/components/atoms/Modal/Modal.tsx

@@ -1,16 +1,21 @@
-import React, { CSSProperties } from 'react';
+import React from 'react';
 import { Transition } from 'react-transition-group';
 import { Overlay } from '../Overlay';
 import { ModalContainer } from './styled';
 import { defaultStyleOverlay, transitionStylesOverlay } from './animations';
 
-export interface ModalProps {
+export interface ModalProps extends React.HTMLAttributes<HTMLDivElement> {
   open: boolean;
   onClose: () => void;
-  style?: CSSProperties;
 }
 
-const Modal: React.FC<ModalProps> = ({ children, open, onClose, style }) => {
+const Modal: React.FC<ModalProps> = ({
+  children,
+  open,
+  onClose,
+  style,
+  ...rest
+}) => {
   return (
     <>
       <Overlay open={open} onClose={onClose} zIndex="modal" />
@@ -22,6 +27,7 @@ const Modal: React.FC<ModalProps> = ({ children, open, onClose, style }) => {
               ...defaultStyleOverlay,
               ...transitionStylesOverlay[state],
             }}
+            {...rest}
           >
             {children}
           </ModalContainer>

package/src/components/molecules/Breadcrumbs/Breadcrumbs.tsx

@@ -8,13 +8,13 @@ export type BreadcrumbType = {
   props?: any;
 };
 
-export interface BreadcrumbsProps {
+export interface BreadcrumbsProps extends React.HTMLAttributes<HTMLDivElement> {
   breadcrumbs: BreadcrumbType[];
 }
 
-const Breadcrumbs: FC<BreadcrumbsProps> = ({ breadcrumbs }) => {
+const Breadcrumbs: FC<BreadcrumbsProps> = ({ breadcrumbs, ...rest }) => {
   return (
-    <StyledContainerBreadcrumbs>
+    <StyledContainerBreadcrumbs {...rest}>
       {breadcrumbs.map((item, index) => {
         const { props, Component = 'a', title } = item;
         return (

package/src/components/molecules/Drawer/Drawer.tsx

@@ -1,6 +1,6 @@
 import React, { FC } from 'react';
 import { StyledContainerDrawer } from './styled';
-import { Transition } from 'react-transition-group';
+import { Transition, TransitionStatus } from 'react-transition-group';
 import { Overlay } from '../../atoms/Overlay';
 import {
   transitionStylesTopBottom,
@@ -9,10 +9,12 @@ import {
   transitionStylesLeftRight,
 } from './animations';
 
-export interface DrawerProps {
+type AnchorPosition = 'left' | 'right' | 'top' | 'bottom';
+
+export interface DrawerProps extends React.HTMLAttributes<HTMLDivElement> {
   open: boolean;
   onClose: () => void;
-  anchorPosition: 'left' | 'right' | 'top' | 'bottom';
+  anchorPosition: AnchorPosition;
 }
 
 const Drawer: FC<DrawerProps> = ({
@@ -20,8 +22,13 @@ const Drawer: FC<DrawerProps> = ({
   anchorPosition = 'right',
   onClose,
   children,
+  style,
+  ...rest
 }) => {
-  const getStyles = (anchorPosition: string, state: any) => {
+  const getStyles = (
+    anchorPosition: AnchorPosition,
+    state: TransitionStatus
+  ) => {
     const stylesLeftRight = defaultStylesLeftRight(anchorPosition);
     const transitionLeftRight = transitionStylesLeftRight(anchorPosition);
     const stylesTopBottom = defaultStylesTopBottom(anchorPosition);
@@ -46,10 +53,11 @@ const Drawer: FC<DrawerProps> = ({
       <Transition in={open} timeout={300}>
         {state => (
           <StyledContainerDrawer
-            style={getStyles(anchorPosition, state)}
+            style={{ ...style, ...getStyles(anchorPosition, state) }}
             anchorPosition={anchorPosition}
             onClose={onClose}
             open={open}
+            {...rest}
           >
             {children}
           </StyledContainerDrawer>

package/src/components/molecules/Drawer/animations.ts

@@ -1,3 +1,5 @@
+import { CSSProperties } from 'react';
+
 export const transformLeftRigthClose = (anchorPosition: string) =>
   anchorPosition === 'right' ? 'translateX(100%)' : 'translateX(-100%)';
 
@@ -8,10 +10,12 @@ export const transformTopBottomClose = (anchorPosition: string) =>
 
 export const transformTopBottomOpen = 'translateY(0%)';
 
-export const defaultStylesLeftRight = (anchorPosition: string) => {
+export const defaultStylesLeftRight = (
+  anchorPosition: string
+): CSSProperties => {
   return {
     transition: 'transform 300ms ease-in-out',
-    transform: () => transformLeftRigthClose(anchorPosition),
+    transform: transformLeftRigthClose(anchorPosition),
     overflowX: 'hidden',
     overflowY: 'auto',
   };
@@ -30,7 +34,9 @@ export const transitionStylesLeftRight = (anchorPosition: string) => {
   };
 };
 
-export const defaultStylesTopBottom = (anchorPosition: string) => {
+export const defaultStylesTopBottom = (
+  anchorPosition: string
+): CSSProperties => {
   return {
     transition: 'transform 300ms ease-in-out',
     transform: transformTopBottomClose(anchorPosition),

package/src/components/molecules/Menubar/Menubar.tsx

@@ -22,7 +22,7 @@ import {
 } from './animations';
 import { useClickAwayListener } from '../../../hooks';
 
-export interface MenubarProps {
+export interface MenubarProps extends React.HTMLAttributes<HTMLDivElement> {
   options: OptionsType[];
   leftComponents?: React.ReactNode;
   rightComponents?: React.ReactNode;
@@ -43,6 +43,7 @@ const Menubar: React.FC<MenubarProps> = ({
   mostUsedLabel = 'Mais acessados',
   searchResultsLabel = 'Resultados da busca',
   searchable = true,
+  ...rest
 }) => {
   const [search, setSearch] = React.useState<string>('');
   const [results, setResults] = React.useState<MostUsedType[]>([]);
@@ -61,7 +62,7 @@ const Menubar: React.FC<MenubarProps> = ({
   }, [search]);
 
   return (
-    <>
+    <div ref={ref => (menuRef.current = ref)} {...rest}>
       <StyledMenuBar>
         <StyledMenuButton variant="filled" color="primary" onPress={toggleOpen}>
           {!open ? (
@@ -103,10 +104,7 @@ const Menubar: React.FC<MenubarProps> = ({
       </StyledMenuBar>
       <Transition in={open} timeout={250}>
         {state => (
-          <StyledContainerOpenMenu
-            ref={ref => (menuRef.current = ref)}
-            style={getContainerOpenMenuStyles(state)}
-          >
+          <StyledContainerOpenMenu style={getContainerOpenMenuStyles(state)}>
             {!search ? (
               <>
                 {mostUsed && (
@@ -136,7 +134,7 @@ const Menubar: React.FC<MenubarProps> = ({
           </StyledContainerOpenMenu>
         )}
       </Transition>
-    </>
+    </div>
   );
 };