@tecsinapse/react-web-kit 1.12.11 → 1.14.0

package/CHANGELOG.md

@@ -3,6 +3,47 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.14.0](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-web-kit@1.13.0...@tecsinapse/react-web-kit@1.14.0) (2022-02-09)
+
+
+### Bug Fixes
+
+* DateTimePicker stories ([e6cf5c1](https://github.com/tecsinapse/design-system/commit/e6cf5c1a4c11eb4113daa77fc4e5beb89c775793))
+
+
+
+
+
+# [1.13.0](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-web-kit@1.12.13...@tecsinapse/react-web-kit@1.13.0) (2022-02-02)
+
+**Note:** Version bump only for package @tecsinapse/react-web-kit
+
+
+
+
+
+## [1.12.13](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-web-kit@1.12.12...@tecsinapse/react-web-kit@1.12.13) (2022-01-28)
+
+
+### Bug Fixes
+
+* using keyExtractor instead of Data to do check validations in Select type multi ([268a4f6](https://github.com/tecsinapse/design-system/commit/268a4f6cf33d0d27d86da74c57f4ce42e485bd5f))
+
+
+
+
+
+## [1.12.12](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-web-kit@1.12.11...@tecsinapse/react-web-kit@1.12.12) (2022-01-19)
+
+
+### Bug Fixes
+
+* fix DataGrid pagination buttons ([c9d40cf](https://github.com/tecsinapse/design-system/commit/c9d40cf9a0655338a6d35d42dbc399768d8cf58d))
+
+
+
+
+
 ## [1.12.11](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-web-kit@1.12.10...@tecsinapse/react-web-kit@1.12.11) (2022-01-19)
 
 **Note:** Version bump only for package @tecsinapse/react-web-kit

package/dist/components/atoms/Dropdown/index.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { Dispatch, SetStateAction } from 'react';
+export interface DropdownProps {
+    visible: boolean;
+    setVisible: Dispatch<SetStateAction<boolean>>;
+}
+export declare const Dropdown: React.FC<DropdownProps & {
+    children: JSX.Element;
+}>;

package/dist/components/atoms/Dropdown/index.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Dropdown = void 0;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _styled = require("./styled");
+
+var _reactTransitionGroup = require("react-transition-group");
+
+var _animations = require("../../molecules/Select/animations");
+
+var _reactWebKit = require("@tecsinapse/react-web-kit");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const Component = ({
+  visible,
+  setVisible,
+  children
+}) => {
+  const refDropDown = React.useRef(null);
+  (0, _reactWebKit.useClickAwayListener)(refDropDown, setVisible);
+  return React.createElement(_reactTransitionGroup.Transition, {
+    in: visible,
+    timeout: 300
+  }, state => React.createElement(_styled.StyledContainerDropdown, {
+    style: { ..._animations.defaultStyles,
+      ..._animations.transition['bottom'][state]
+    },
+    ref: refDropDown
+  }, children));
+};
+
+const Dropdown = Component;
+exports.Dropdown = Dropdown;
+//# sourceMappingURL=index.js.map

package/dist/components/atoms/Dropdown/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/atoms/Dropdown/index.tsx"],"names":["Component","visible","setVisible","children","refDropDown","React","useRef","state","defaultStyles","transition","Dropdown"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AAEA;;;;;;AAOA,MAAMA,SAA8D,GAAG,CAAC;AACtEC,EAAAA,OADsE;AAEtEC,EAAAA,UAFsE;AAGtEC,EAAAA;AAHsE,CAAD,KAIpD;AACjB,QAAMC,WAAW,GAAGC,KAAK,CAACC,MAAN,CAAa,IAAb,CAApB;AACA,yCAAqBF,WAArB,EAAkCF,UAAlC;AAEA,SACE,oBAAC,gCAAD;AAAY,IAAA,EAAE,EAAED,OAAhB;AAAyB,IAAA,OAAO,EAAE;AAAlC,KACGM,KAAK,IACJ,oBAAC,+BAAD;AACE,IAAA,KAAK,EAAE,EAAE,GAAGC,yBAAL;AAAoB,SAAGC,uBAAW,QAAX,EAAqBF,KAArB;AAAvB,KADT;AAEE,IAAA,GAAG,EAAEH;AAFP,KAIGD,QAJH,CAFJ,CADF;AAYD,CApBD;;AAsBO,MAAMO,QAAQ,GAAGV,SAAjB","sourcesContent":["import * as React from 'react';\nimport { StyledContainerDropdown } from './styled';\nimport { Transition } from 'react-transition-group';\nimport { defaultStyles, transition } from '../../molecules/Select/animations';\nimport { Dispatch, SetStateAction } from 'react';\nimport { useClickAwayListener } from '@tecsinapse/react-web-kit';\n\nexport interface DropdownProps {\n  visible: boolean;\n  setVisible: Dispatch<SetStateAction<boolean>>;\n}\n\nconst Component: React.FC<DropdownProps & { children: JSX.Element }> = ({\n  visible,\n  setVisible,\n  children,\n}): JSX.Element => {\n  const refDropDown = React.useRef(null);\n  useClickAwayListener(refDropDown, setVisible);\n\n  return (\n    <Transition in={visible} timeout={300}>\n      {state => (\n        <StyledContainerDropdown\n          style={{ ...defaultStyles, ...transition['bottom'][state] }}\n          ref={refDropDown}\n        >\n          {children}\n        </StyledContainerDropdown>\n      )}\n    </Transition>\n  );\n};\n\nexport const Dropdown = Component;\n"],"file":"index.js"}

package/dist/components/atoms/Dropdown/styled.d.ts

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

package/dist/components/atoms/Dropdown/styled.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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: auto;
+  background-color: ${({
+  theme
+}) => theme.miscellaneous.surfaceColor};
+  border-radius: ${({
+  theme
+}) => theme.borderRadius.mili};
+  box-shadow: 0 2px 8px
+    ${({
+  theme
+}) => (0, _reactCore.hex2rgba)(theme.miscellaneous.shadow, 0.05)};
+  position: absolute;
+  padding-bottom: ${({
+  theme
+}) => theme.spacing.mili};
+  margin-top: 8px;
+  z-index: ${({
+  theme
+}) => theme.zIndex.select};
+`;
+exports.StyledContainerDropdown = StyledContainerDropdown;
+//# sourceMappingURL=styled.js.map

package/dist/components/atoms/Dropdown/styled.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/atoms/Dropdown/styled.ts"],"names":["StyledContainerDropdown","theme","miscellaneous","surfaceColor","borderRadius","mili","shadow","spacing","zIndex","select"],"mappings":";;;;;;;AAAA;;AACA;;;;AAEO,MAAMA,uBAAuB,GAAG,qBAAO,KAAP,CAAmC;AAC1E;AACA,sBAAsB,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAClBA,KAAK,CAACC,aAAN,CAAoBC,YAAa;AACrC,mBAAmB,CAAC;AAAEF,EAAAA;AAAF,CAAD,KAA2BA,KAAK,CAACG,YAAN,CAAmBC,IAAK;AACtE;AACA,MAAM,CAAC;AAAEJ,EAAAA;AAAF,CAAD,KAA2B,yBAASA,KAAK,CAACC,aAAN,CAAoBI,MAA7B,EAAqC,IAArC,CAA2C;AAC5E;AACA,oBAAoB,CAAC;AAAEL,EAAAA;AAAF,CAAD,KAA2BA,KAAK,CAACM,OAAN,CAAcF,IAAK;AAClE;AACA,aAAa,CAAC;AAAEJ,EAAAA;AAAF,CAAD,KAA2BA,KAAK,CAACO,MAAN,CAAaC,MAAO;AAC5D,CAXO","sourcesContent":["import styled from '@emotion/styled';\nimport { hex2rgba, StyleProps } from '@tecsinapse/react-core';\n\nexport const StyledContainerDropdown = styled('div')<Partial<StyleProps>>`\n  width: auto;\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-bottom: ${({ theme }: StyleProps) => theme.spacing.mili};\n  margin-top: 8px;\n  z-index: ${({ theme }: StyleProps) => theme.zIndex.select};\n`;\n"],"file":"styled.js"}

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

@@ -1,3 +1,3 @@
 import { DatePickerProps, SelectionType } from '@tecsinapse/react-core';
 export declare type WebDatePickerProps<T extends SelectionType> = Omit<DatePickerProps<T>, 'CalendarComponent' | 'renderCalendar' | 'requestCloseCalendar' | 'requestShowCalendar'>;
-export declare const DatePicker: <T extends any>({ ...rest }: WebDatePickerProps<T>) => JSX.Element;
+export declare const DatePicker: <T extends any>({ value, type, ...rest }: WebDatePickerProps<T>) => JSX.Element;

package/dist/components/molecules/DatePicker/DatePicker.js

@@ -9,7 +9,7 @@ var _reactCore = require("@tecsinapse/react-core");
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _Modal = require("./Modal");
+var _Dropdown = require("../../atoms/Dropdown");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -17,19 +17,47 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && 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 DatePicker = ({ ...rest
+const DatePicker = ({
+  value,
+  type,
+  ...rest
 }) => {
   const [visible, setVisible] = (0, _react.useState)(false);
   const show = (0, _react.useCallback)(() => setVisible(true), []);
   const close = (0, _react.useCallback)(() => setVisible(false), []);
+  const getYear = (0, _react.useMemo)(() => {
+    if (value) {
+      if (type === 'range') {
+        if (value.lowest !== undefined) return new Date(value.lowest).getFullYear();
+      } else {
+        return new Date(value).getFullYear();
+      }
+    }
+
+    return undefined;
+  }, [value]);
+  const getMonth = (0, _react.useMemo)(() => {
+    if (value) {
+      if (type === 'range') {
+        if (value.lowest !== undefined) return new Date(value.lowest).getMonth();
+      } else {
+        return new Date(value).getMonth();
+      }
+    }
+
+    return undefined;
+  }, [value]);
   return _react.default.createElement(_reactCore.DatePicker, _extends({}, rest, {
     CalendarComponent: _reactCore.Calendar,
+    value: value,
+    type: type,
+    year: getYear,
+    month: getMonth,
     requestShowCalendar: show,
     requestCloseCalendar: close,
-    renderCalendar: calendar => _react.default.createElement(_Modal.Modal, {
-      animationType: "fade",
+    renderCalendar: calendar => _react.default.createElement(_Dropdown.Dropdown, {
       visible: visible,
-      onRequestClose: close
+      setVisible: setVisible
     }, calendar)
   }));
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/molecules/DatePicker/DatePicker.tsx"],"names":["DatePicker","rest","visible","setVisible","show","close","Calendar","calendar"],"mappings":";;;;;;;AAAA;;AAIA;;AACA;;;;;;;;AAIO,MAAMA,UAAU,GAAG,CAA0B,EAAE,GAAGC;AAAL,CAA1B,KAA8E;AAEtG,QAAM,CAAEC,OAAF,EAAWC,UAAX,IAA0B,qBAAS,KAAT,CAAhC;AACA,QAAMC,IAAI,GAAG,wBAAY,MAAMD,UAAU,CAAC,IAAD,CAA5B,EAAoC,EAApC,CAAb;AACA,QAAME,KAAK,GAAG,wBAAY,MAAMF,UAAU,CAAC,KAAD,CAA5B,EAAqC,EAArC,CAAd;AAEA,SACE,6BAAC,qBAAD,eACMF,IADN;AAEE,IAAA,iBAAiB,EAAEK,mBAFrB;AAGE,IAAA,mBAAmB,EAAEF,IAHvB;AAIE,IAAA,oBAAoB,EAAEC,KAJxB;AAKE,IAAA,cAAc,EAAGE,QAAD,IACd,6BAAC,YAAD;AAAO,MAAA,aAAa,EAAC,MAArB;AAA4B,MAAA,OAAO,EAAEL,OAArC;AAA8C,MAAA,cAAc,EAAEG;AAA9D,OACGE,QADH;AANJ,KADF;AAaD,CAnBM","sourcesContent":["import {\n  Calendar,\n  DatePicker as DatePickerCore, DatePickerProps, SelectionType\n} from '@tecsinapse/react-core';\nimport React, { useCallback, useState } from 'react';\nimport { Modal } from './Modal';\n\nexport type WebDatePickerProps<T extends SelectionType> = Omit<DatePickerProps<T>, 'CalendarComponent' | 'renderCalendar' | 'requestCloseCalendar' | 'requestShowCalendar'>\n\nexport const DatePicker = <T extends SelectionType>({ ...rest }: WebDatePickerProps<T>): JSX.Element => {\n\n  const [ visible, setVisible ] = useState(false)\n  const show = useCallback(() => setVisible(true), [])\n  const close = useCallback(() => setVisible(false), [])\n  \n  return (\n    <DatePickerCore\n      {...rest}\n      CalendarComponent={Calendar}\n      requestShowCalendar={show}\n      requestCloseCalendar={close}\n      renderCalendar={(calendar) => (\n        <Modal animationType='fade' visible={visible} onRequestClose={close}>\n          {calendar}\n        </Modal>\n      )}\n    />\n  );\n};"],"file":"DatePicker.js"}
+{"version":3,"sources":["../../../../src/components/molecules/DatePicker/DatePicker.tsx"],"names":["DatePicker","value","type","rest","visible","setVisible","show","close","getYear","lowest","undefined","Date","getFullYear","getMonth","Calendar","calendar"],"mappings":";;;;;;;AAAA;;AAOA;;AACA;;;;;;;;AAUO,MAAMA,UAAU,GAAG,CAA0B;AAClDC,EAAAA,KADkD;AAElDC,EAAAA,IAFkD;AAGlD,KAAGC;AAH+C,CAA1B,KAIgB;AACxC,QAAM,CAACC,OAAD,EAAUC,UAAV,IAAwB,qBAAS,KAAT,CAA9B;AACA,QAAMC,IAAI,GAAG,wBAAY,MAAMD,UAAU,CAAC,IAAD,CAA5B,EAAoC,EAApC,CAAb;AACA,QAAME,KAAK,GAAG,wBAAY,MAAMF,UAAU,CAAC,KAAD,CAA5B,EAAqC,EAArC,CAAd;AAEA,QAAMG,OAAO,GAAG,oBAAQ,MAAM;AAC5B,QAAIP,KAAJ,EAAW;AACT,UAAIC,IAAI,KAAK,OAAb,EAAsB;AACpB,YAAKD,KAAD,CAAqBQ,MAArB,KAAgCC,SAApC,EACE,OAAO,IAAIC,IAAJ,CAAUV,KAAD,CAAqBQ,MAA9B,EAAsCG,WAAtC,EAAP;AACH,OAHD,MAGO;AACL,eAAO,IAAID,IAAJ,CAASV,KAAT,EAAwBW,WAAxB,EAAP;AACD;AACF;;AACD,WAAOF,SAAP;AACD,GAVe,EAUb,CAACT,KAAD,CAVa,CAAhB;AAYA,QAAMY,QAAQ,GAAG,oBAAQ,MAAM;AAC7B,QAAIZ,KAAJ,EAAW;AACT,UAAIC,IAAI,KAAK,OAAb,EAAsB;AACpB,YAAKD,KAAD,CAAqBQ,MAArB,KAAgCC,SAApC,EACE,OAAO,IAAIC,IAAJ,CAAUV,KAAD,CAAqBQ,MAA9B,EAAsCI,QAAtC,EAAP;AACH,OAHD,MAGO;AACL,eAAO,IAAIF,IAAJ,CAASV,KAAT,EAAwBY,QAAxB,EAAP;AACD;AACF;;AACD,WAAOH,SAAP;AACD,GAVgB,EAUd,CAACT,KAAD,CAVc,CAAjB;AAYA,SACE,6BAAC,qBAAD,eACME,IADN;AAEE,IAAA,iBAAiB,EAAEW,mBAFrB;AAGE,IAAA,KAAK,EAAEb,KAHT;AAIE,IAAA,IAAI,EAAEC,IAJR;AAKE,IAAA,IAAI,EAAEM,OALR;AAME,IAAA,KAAK,EAAEK,QANT;AAOE,IAAA,mBAAmB,EAAEP,IAPvB;AAQE,IAAA,oBAAoB,EAAEC,KARxB;AASE,IAAA,cAAc,EAAEQ,QAAQ,IACtB,6BAAC,kBAAD;AAAU,MAAA,OAAO,EAAEX,OAAnB;AAA4B,MAAA,UAAU,EAAEC;AAAxC,OACGU,QADH;AAVJ,KADF;AAiBD,CAlDM","sourcesContent":["import {\n  Calendar,\n  DatePicker as DatePickerCore,\n  DatePickerProps,\n DateRange,\n  SelectionType,\n} from '@tecsinapse/react-core';\nimport React, { useCallback, useMemo, useState } from 'react';\nimport { Dropdown } from '../../atoms/Dropdown';\n\nexport type WebDatePickerProps<T extends SelectionType> = Omit<\n  DatePickerProps<T>,\n  | 'CalendarComponent'\n  | 'renderCalendar'\n  | 'requestCloseCalendar'\n  | 'requestShowCalendar'\n>;\n\nexport const DatePicker = <T extends SelectionType>({\n  value,\n  type,\n  ...rest\n}: WebDatePickerProps<T>): JSX.Element => {\n  const [visible, setVisible] = useState(false);\n  const show = useCallback(() => setVisible(true), []);\n  const close = useCallback(() => setVisible(false), []);\n\n  const getYear = useMemo(() => {\n    if (value) {\n      if (type === 'range') {\n        if ((value as DateRange).lowest !== undefined)\n          return new Date((value as DateRange).lowest).getFullYear();\n      } else {\n        return new Date(value as Date).getFullYear();\n      }\n    }\n    return undefined;\n  }, [value]);\n\n  const getMonth = useMemo(() => {\n    if (value) {\n      if (type === 'range') {\n        if ((value as DateRange).lowest !== undefined)\n          return new Date((value as DateRange).lowest).getMonth();\n      } else {\n        return new Date(value as Date).getMonth();\n      }\n    }\n    return undefined;\n  }, [value]);\n\n  return (\n    <DatePickerCore\n      {...rest}\n      CalendarComponent={Calendar}\n      value={value}\n      type={type}\n      year={getYear}\n      month={getMonth}\n      requestShowCalendar={show}\n      requestCloseCalendar={close}\n      renderCalendar={calendar => (\n        <Dropdown visible={visible} setVisible={setVisible}>\n          {calendar}\n        </Dropdown>\n      )}\n    />\n  );\n};\n"],"file":"DatePicker.js"}

package/dist/components/molecules/DateTimePicker/DateTimePicker.js

@@ -9,7 +9,7 @@ var _reactCore = require("@tecsinapse/react-core");
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _Modal = require("./Modal");
+var _Dropdown = require("../../atoms/Dropdown");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -25,10 +25,9 @@ const DateTimePicker = ({ ...rest
   return _react.default.createElement(_reactCore.DateTimePicker, _extends({}, rest, {
     requestShowSelector: show,
     requestCloseSelector: close,
-    renderSelector: selector => _react.default.createElement(_Modal.Modal, {
-      animationType: "fade",
+    renderSelector: selector => _react.default.createElement(_Dropdown.Dropdown, {
       visible: visible,
-      onRequestClose: close
+      setVisible: setVisible
     }, selector)
   }));
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/molecules/DateTimePicker/DateTimePicker.tsx"],"names":["DateTimePicker","rest","visible","setVisible","show","close","selector"],"mappings":";;;;;;;AAAA;;AAIA;;AACA;;;;;;;;AAKO,MAAMA,cAA0C,GAAG,CAAC,EAAE,GAAGC;AAAL,CAAD,KAAiB;AAEvE,QAAM,CAAEC,OAAF,EAAWC,UAAX,IAA0B,qBAAS,KAAT,CAAhC;AACA,QAAMC,IAAI,GAAG,wBAAY,MAAMD,UAAU,CAAC,IAAD,CAA5B,EAAoC,EAApC,CAAb;AACA,QAAME,KAAK,GAAG,wBAAY,MAAMF,UAAU,CAAC,KAAD,CAA5B,EAAqC,EAArC,CAAd;AAEA,SACI,6BAAC,yBAAD,eACQF,IADR;AAEI,IAAA,mBAAmB,EAAEG,IAFzB;AAGI,IAAA,oBAAoB,EAAEC,KAH1B;AAII,IAAA,cAAc,EAAGC,QAAD,IACZ,6BAAC,YAAD;AAAO,MAAA,aAAa,EAAC,MAArB;AAA4B,MAAA,OAAO,EAAEJ,OAArC;AAA8C,MAAA,cAAc,EAAEG;AAA9D,OACKC,QADL;AALR,KADJ;AAYH,CAlBM","sourcesContent":["import {\n    DateTimePicker as DateTimePickerCore,\n    DateTimePickerProps\n} from '@tecsinapse/react-core';\nimport React, { FC, useCallback, useState } from 'react';\nimport { Modal } from './Modal';\n\n\nexport type WebDateTimePickerProps = Omit<DateTimePickerProps, 'renderSelector' | 'requestShowSelector' | 'requestCloseSelector'>\n\nexport const DateTimePicker: FC<WebDateTimePickerProps> = ({ ...rest }) => {\n\n    const [ visible, setVisible ] = useState(false)\n    const show = useCallback(() => setVisible(true), [])\n    const close = useCallback(() => setVisible(false), [])\n\n    return (\n        <DateTimePickerCore\n            {...rest}\n            requestShowSelector={show}\n            requestCloseSelector={close}\n            renderSelector={(selector) => (\n                <Modal animationType='fade' visible={visible} onRequestClose={close}>\n                    {selector}\n                </Modal>\n            )}\n        />\n    );\n};\n"],"file":"DateTimePicker.js"}
+{"version":3,"sources":["../../../../src/components/molecules/DateTimePicker/DateTimePicker.tsx"],"names":["DateTimePicker","rest","visible","setVisible","show","close","selector"],"mappings":";;;;;;;AAAA;;AAIA;;AACA;;;;;;;;AAOO,MAAMA,cAA0C,GAAG,CAAC,EAAE,GAAGC;AAAL,CAAD,KAAiB;AACzE,QAAM,CAACC,OAAD,EAAUC,UAAV,IAAwB,qBAAkB,KAAlB,CAA9B;AAEA,QAAMC,IAAI,GAAG,wBAAY,MAAMD,UAAU,CAAC,IAAD,CAA5B,EAAoC,EAApC,CAAb;AACA,QAAME,KAAK,GAAG,wBAAY,MAAMF,UAAU,CAAC,KAAD,CAA5B,EAAqC,EAArC,CAAd;AAEA,SACE,6BAAC,yBAAD,eACMF,IADN;AAEE,IAAA,mBAAmB,EAAEG,IAFvB;AAGE,IAAA,oBAAoB,EAAEC,KAHxB;AAIE,IAAA,cAAc,EAAEC,QAAQ,IACtB,6BAAC,kBAAD;AAAU,MAAA,OAAO,EAAEJ,OAAnB;AAA4B,MAAA,UAAU,EAAEC;AAAxC,OACGG,QADH;AALJ,KADF;AAYD,CAlBM","sourcesContent":["import {\n  DateTimePicker as DateTimePickerCore,\n  DateTimePickerProps,\n} from '@tecsinapse/react-core';\nimport React, { FC, useCallback, useState } from 'react';\nimport { Dropdown } from '../../atoms/Dropdown';\n\nexport type WebDateTimePickerProps = Omit<\n  DateTimePickerProps,\n  'renderSelector' | 'requestShowSelector' | 'requestCloseSelector'\n>;\n\nexport const DateTimePicker: FC<WebDateTimePickerProps> = ({ ...rest }) => {\n  const [visible, setVisible] = useState<boolean>(false);\n\n  const show = useCallback(() => setVisible(true), []);\n  const close = useCallback(() => setVisible(false), []);\n\n  return (\n    <DateTimePickerCore\n      {...rest}\n      requestShowSelector={show}\n      requestCloseSelector={close}\n      renderSelector={selector => (\n        <Dropdown visible={visible} setVisible={setVisible}>\n          {selector}\n        </Dropdown>\n      )}\n    />\n  );\n};\n"],"file":"DateTimePicker.js"}

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

@@ -7,7 +7,7 @@ interface SelectItemProps<Data, Type extends 'single' | 'multi'> {
     labelExtractor: (t: Data) => string;
     index: number;
 }
-declare const _default: <Data, Type extends "single" | "multi">({ item, onSelect, type, value, labelExtractor, setDropDownVisible, checkedAll, setCheckedAll, lenghtOptions, }: SelectItemProps<Data, Type> & {
+declare const _default: <Data, Type extends "single" | "multi">({ item, onSelect, type, value, labelExtractor, setDropDownVisible, checkedAll, setCheckedAll, lenghtOptions, keyExtractor, }: SelectItemProps<Data, Type> & {
     setDropDownVisible: (t: boolean) => void;
     checkedAll: boolean;
     setCheckedAll: (t: boolean) => void;

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

@@ -22,15 +22,20 @@ const SelectItem = ({
   setDropDownVisible,
   checkedAll,
   setCheckedAll,
-  lenghtOptions
+  lenghtOptions,
+  keyExtractor
 }) => {
   const isMulti = type === 'multi';
 
-  const [checked, setChecked] = _react.default.useState(value !== undefined && type === 'multi' && value.includes(item));
+  const [checked, setChecked] = _react.default.useState(value !== undefined && type === 'multi' && value.find(data => keyExtractor(data) === keyExtractor(item)) !== undefined);
+
+  _react.default.useEffect(() => {
+    if (!checked && value !== undefined && (type === 'multi' && value.find(data => keyExtractor(data) === keyExtractor(item)) || type === 'single' && keyExtractor(value) === keyExtractor(item))) setChecked(true);
+  }, [value, keyExtractor, type]);
 
   _react.default.useEffect(() => {
     if (type === 'multi') {
-      checkedAll ? setChecked(true) : setChecked(value.includes(item));
+      checkedAll ? setChecked(true) : setChecked(value.find(data => keyExtractor(data) === keyExtractor(item)) !== undefined);
     }
   }, [checkedAll]);
 
@@ -46,7 +51,7 @@ const SelectItem = ({
         [..._value, key].length === lenghtOptions && setCheckedAll(true);
       } else {
         const auxArray = [..._value];
-        const indexToExclude = auxArray.indexOf(key);
+        const indexToExclude = auxArray.findIndex(data => keyExtractor(data) === keyExtractor(key));
         auxArray.splice(indexToExclude, 1);
         onSelect([...auxArray]);
         setCheckedAll(false);

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","useCallback","_value","key","Array","isArray","auxChecked","length","auxArray","indexToExclude","indexOf","splice","memo"],"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,GAAGL,eAAMM,WAAN,CAChB,CAAClB,IAAD,EAAOmB,MAAP,KAAkB;AAGhB,UAAMC,GAAS,GAAGpB,IAAlB;;AACA,QAAIqB,KAAK,CAACC,OAAN,CAAcH,MAAd,CAAJ,EAA2B;AACzB,YAAMI,UAAU,GAAG,CAACb,OAApB;AACAC,MAAAA,UAAU,CAAC,CAACD,OAAF,CAAV;;AACA,UAAIa,UAAJ,EAAgB;AACdtB,QAAAA,QAAQ,CAAC,CAAC,GAAGkB,MAAJ,EAAYC,GAAZ,CAAD,CAAR;AACA,SAAC,GAAGD,MAAJ,EAAYC,GAAZ,EAAiBI,MAAjB,KAA4BhB,aAA5B,IAA6CD,aAAa,CAAC,IAAD,CAA1D;AACD,OAHD,MAGO;AACL,cAAMkB,QAAgB,GAAG,CAAC,GAAGN,MAAJ,CAAzB;AACA,cAAMO,cAAc,GAAGD,QAAQ,CAACE,OAAT,CAAiBP,GAAjB,CAAvB;AACAK,QAAAA,QAAQ,CAACG,MAAT,CAAgBF,cAAhB,EAAgC,CAAhC;AACAzB,QAAAA,QAAQ,CAAC,CAAC,GAAGwB,QAAJ,CAAD,CAAR;AACAlB,QAAAA,aAAa,CAAC,KAAD,CAAb;AACD;AACF,KAbD,MAaO;AACLN,MAAAA,QAAQ,CAACmB,GAAD,CAAR;AACAf,MAAAA,kBAAkB,CAAC,KAAD,CAAlB;AACD;AACF,GAtBe,EAuBhB,CAACJ,QAAD,EAAWI,kBAAX,EAA+BE,aAA/B,EAA8CI,UAA9C,EAA0DD,OAA1D,CAvBgB,CAAlB;;AA0BA,SACE,6BAAC,2BAAD;AAAqB,IAAA,OAAO,EAAE,MAAMO,SAAS,CAACjB,IAAD,EAAOG,KAAP;AAA7C,KACGM,OAAO,IACN,6BAAC,mBAAD;AAAU,IAAA,OAAO,EAAEC,OAAnB;AAA4B,IAAA,QAAQ,EAAE,MAAMO,SAAS,CAACjB,IAAD,EAAOG,KAAP;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,EAAED,IAAI,KAAK,QAAT,IAAqBC,KAAK,KAAKH;AAA3D,KACGI,cAAc,CAACJ,IAAD,CADjB,CADF,CADF,CAJF,CADF;AAcD,CApED;;eAsEeY,eAAMiB,IAAN,CAAW9B,UAAX,C","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 = React.useCallback(\n    (item, _value) => {\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    [onSelect, setDropDownVisible, setCheckedAll, setChecked, checked]\n  );\n\n  return (\n    <ContainerItemSelect onClick={() => clickItem(item, value)}>\n      {isMulti && (\n        <Checkbox checked={checked} onChange={() => clickItem(item, value)} />\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 React.memo(SelectItem) as typeof 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","keyExtractor","isMulti","checked","setChecked","React","useState","undefined","find","data","useEffect","clickItem","useCallback","_value","key","Array","isArray","auxChecked","length","auxArray","indexToExclude","findIndex","splice","memo"],"mappings":"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","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  keyExtractor,\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 &&\n      type === 'multi' &&\n      (value as Data[]).find(\n        data => keyExtractor(data) === keyExtractor(item)\n      ) !== undefined\n  );\n\n  React.useEffect(() => {\n    if (\n      !checked &&\n      value !== undefined &&\n      ((type === 'multi' &&\n        (value as Data[]).find(\n          data => keyExtractor(data) === keyExtractor(item)\n        )) ||\n        (type === 'single' &&\n          keyExtractor(value as Data) === keyExtractor(item)))\n    )\n      setChecked(true);\n  }, [value, keyExtractor, type]);\n\n  React.useEffect(() => {\n    if (type === 'multi') {\n      checkedAll\n        ? setChecked(true)\n        : setChecked(\n            (value as Data[]).find(\n              data => keyExtractor(data) === keyExtractor(item)\n            ) !== undefined\n          );\n    }\n  }, [checkedAll]);\n\n  const clickItem = React.useCallback(\n    (item, _value) => {\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.findIndex(\n            data => keyExtractor(data) === keyExtractor(key)\n          );\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    [onSelect, setDropDownVisible, setCheckedAll, setChecked, checked]\n  );\n\n  return (\n    <ContainerItemSelect onClick={() => clickItem(item, value)}>\n      {isMulti && (\n        <Checkbox checked={checked} onChange={() => clickItem(item, value)} />\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 React.memo(SelectItem) as typeof SelectItem;\n"],"file":"SelectItem.js"}

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

@@ -45,14 +45,16 @@ const SelectContainer = (0, _styled.default)('div')`
 }) => theme.spacing.deca};
 `;
 exports.SelectContainer = SelectContainer;
-const NavigationButton = (0, _native.default)(_Button.Button)`
-    padding: ${({
-  theme
-}) => theme.spacing.centi};
+const NavigationButton = (0, _native.default)(_Button.Button)`    
     border-radius: ${({
   theme
 }) => theme.borderRadius.mili};
+    height: 44px;
     justify-content: center;
+    padding: ${({
+  theme
+}) => theme.spacing.centi};
+    width: 44px;  
 `;
 exports.NavigationButton = NavigationButton;
 const PageButton = (0, _native.default)(NavigationButton)`

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/organisms/DataGrid/Footer/styled.ts"],"names":["TdFooterStyled","Td","theme","spacing","centi","FlexContainer","FooterContainer","FooterContainerStart","FooterContainerEnd","SelectContainer","deca","NavigationButton","Button","borderRadius","mili","PageButton","micro","PagesContainer","HoveredText","font","color","light"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;;;AAEO,MAAMA,cAAc,GAAG,qBAAOC,SAAP,CAAgC;AAC9D,aAAa,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcC,KAAM;AAChD,CAFO;;AAIA,MAAMC,aAAa,GAAG,qBAAO,KAAP,CAAc;AAC3C;AACA;AACA,CAHO;;AAKA,MAAMC,eAAe,GAAG,qBAAOD,aAAP,CAAsB;AACrD;AACA;AACA,CAHO;;AAKA,MAAME,oBAAoB,GAAG,qBAAOF,aAAP,CAAsB;AAC1D;AACA,CAFO;;AAIA,MAAMG,kBAAkB,GAAG,qBAAOH,aAAP,CAAsB;AACxD;AACA,CAFO;;AAIA,MAAMI,eAAe,GAAG,qBAAO,KAAP,CAAmC;AAClE,kBAAkB,CAAC;AAAEP,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcO,IAAK;AACpD,CAFO;;AAIA,MAAMC,gBAAgB,GAAG,qBAAaC,cAAb,CAA0C;AAC1E,eAAe,CAAC;AAAEV,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcC,KAAM;AAClD,qBAAqB,CAAC;AAAEF,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACW,YAAN,CAAmBC,IAAK;AAC5D;AACA,CAJO;;AAOA,MAAMC,UAAU,GAAG,qBAAaJ,gBAAb,CAAoD;AAC9E,qBAAqB,CAAC;AAAET,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcO,IAAK;AACvD,oBAAoB,CAAC;AAAER,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcO,IAAK;AACtD,qBAAqB,CAAC;AAAER,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACW,YAAN,CAAmBC,IAAK;AAC5D;AACA,mBAAmB,CAAC;AAAEZ,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAca,KAAM;AACtD,oBAAoB,CAAC;AAAEd,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAca,KAAM;AACvD,CAPO;;AASA,MAAMC,cAAc,GAAG,qBAAO,KAAP,CAAmC;AACjE;AACA;AACA,CAHO;;AAKA,MAAMC,WAAW,GAAG,qBAAO,KAAP,CAAmC;AAC9D;AACA;AACA,aAAa,CAAC;AAAEhB,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACiB,IAAN,CAAWC,KAAX,CAAiBC,KAAM;AACnD;AACA,CALO","sourcesContent":["import styled from '@emotion/styled';\nimport { default as nativeStyled } from '@emotion/native';\nimport { StyleProps } from '@tecsinapse/react-core';\nimport { Td } from '../../../atoms/Table';\nimport { Button } from '../../../atoms/Button';\n\nexport const TdFooterStyled = styled(Td)<Partial<StyleProps>>`\n  padding: ${({ theme }) => theme.spacing.centi} 0 0 0;\n`;\n\nexport const FlexContainer = styled('div')`\n  display: flex;\n  flex-grow: 1;\n`;\n\nexport const FooterContainer = styled(FlexContainer)`\n  justify-content: space-between;\n  align-items: center;\n`;\n\nexport const FooterContainerStart = styled(FlexContainer)`\n  justify-content: flex-start;\n`;\n\nexport const FooterContainerEnd = styled(FlexContainer)`\n  justify-content: flex-end;\n`;\n\nexport const SelectContainer = styled('div')<Partial<StyleProps>>`\n  margin-right: ${({ theme }) => theme.spacing.deca};\n`;\n\nexport const NavigationButton = nativeStyled(Button)<Partial<StyleProps>>`\n    padding: ${({ theme }) => theme.spacing.centi};\n    border-radius: ${({ theme }) => theme.borderRadius.mili};\n    justify-content: center;\n`;\n\n// Se o botão estiver ativo, renderizar outlined, caso contrario o botão é text\nexport const PageButton = nativeStyled(NavigationButton)<Partial<StyleProps>>`\n    padding-right: ${({ theme }) => theme.spacing.deca};\n    padding-left: ${({ theme }) => theme.spacing.deca};\n    border-radius: ${({ theme }) => theme.borderRadius.mili};\n    justify-content: center;\n    margin-left: ${({ theme }) => theme.spacing.micro};\n    margin-right: ${({ theme }) => theme.spacing.micro};\n`;\n\nexport const PagesContainer = styled('div')<Partial<StyleProps>>`\n  margin: 0 20px;\n  display: flex;\n`;\n\nexport const HoveredText = styled('div')<Partial<StyleProps>>`\n  user-select: none;\n  &:hover * {\n    color: ${({ theme }) => theme.font.color.light};\n  }\n`;\n"],"file":"styled.js"}
+{"version":3,"sources":["../../../../../src/components/organisms/DataGrid/Footer/styled.ts"],"names":["TdFooterStyled","Td","theme","spacing","centi","FlexContainer","FooterContainer","FooterContainerStart","FooterContainerEnd","SelectContainer","deca","NavigationButton","Button","borderRadius","mili","PageButton","micro","PagesContainer","HoveredText","font","color","light"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;;;AAEO,MAAMA,cAAc,GAAG,qBAAOC,SAAP,CAAgC;AAC9D,aAAa,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcC,KAAM;AAChD,CAFO;;AAIA,MAAMC,aAAa,GAAG,qBAAO,KAAP,CAAc;AAC3C;AACA;AACA,CAHO;;AAKA,MAAMC,eAAe,GAAG,qBAAOD,aAAP,CAAsB;AACrD;AACA;AACA,CAHO;;AAKA,MAAME,oBAAoB,GAAG,qBAAOF,aAAP,CAAsB;AAC1D;AACA,CAFO;;AAIA,MAAMG,kBAAkB,GAAG,qBAAOH,aAAP,CAAsB;AACxD;AACA,CAFO;;AAIA,MAAMI,eAAe,GAAG,qBAAO,KAAP,CAAmC;AAClE,kBAAkB,CAAC;AAAEP,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcO,IAAK;AACpD,CAFO;;AAIA,MAAMC,gBAAgB,GAAG,qBAAaC,cAAb,CAA0C;AAC1E,qBAAqB,CAAC;AAAEV,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACW,YAAN,CAAmBC,IAAK;AAC5D;AACA;AACA,eAAe,CAAC;AAAEZ,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcC,KAAM;AAClD;AACA,CANO;;AASA,MAAMW,UAAU,GAAG,qBAAaJ,gBAAb,CAAoD;AAC9E,qBAAqB,CAAC;AAAET,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcO,IAAK;AACvD,oBAAoB,CAAC;AAAER,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcO,IAAK;AACtD,qBAAqB,CAAC;AAAER,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACW,YAAN,CAAmBC,IAAK;AAC5D;AACA,mBAAmB,CAAC;AAAEZ,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAca,KAAM;AACtD,oBAAoB,CAAC;AAAEd,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAca,KAAM;AACvD,CAPO;;AASA,MAAMC,cAAc,GAAG,qBAAO,KAAP,CAAmC;AACjE;AACA;AACA,CAHO;;AAKA,MAAMC,WAAW,GAAG,qBAAO,KAAP,CAAmC;AAC9D;AACA;AACA,aAAa,CAAC;AAAEhB,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACiB,IAAN,CAAWC,KAAX,CAAiBC,KAAM;AACnD;AACA,CALO","sourcesContent":["import styled from '@emotion/styled';\nimport { default as nativeStyled } from '@emotion/native';\nimport { StyleProps } from '@tecsinapse/react-core';\nimport { Td } from '../../../atoms/Table';\nimport { Button } from '../../../atoms/Button';\n\nexport const TdFooterStyled = styled(Td)<Partial<StyleProps>>`\n  padding: ${({ theme }) => theme.spacing.centi} 0 0 0;\n`;\n\nexport const FlexContainer = styled('div')`\n  display: flex;\n  flex-grow: 1;\n`;\n\nexport const FooterContainer = styled(FlexContainer)`\n  justify-content: space-between;\n  align-items: center;\n`;\n\nexport const FooterContainerStart = styled(FlexContainer)`\n  justify-content: flex-start;\n`;\n\nexport const FooterContainerEnd = styled(FlexContainer)`\n  justify-content: flex-end;\n`;\n\nexport const SelectContainer = styled('div')<Partial<StyleProps>>`\n  margin-right: ${({ theme }) => theme.spacing.deca};\n`;\n\nexport const NavigationButton = nativeStyled(Button)<Partial<StyleProps>>`    \n    border-radius: ${({ theme }) => theme.borderRadius.mili};\n    height: 44px;\n    justify-content: center;\n    padding: ${({ theme }) => theme.spacing.centi};\n    width: 44px;  \n`;\n\n// Se o botão estiver ativo, renderizar outlined, caso contrario o botão é text\nexport const PageButton = nativeStyled(NavigationButton)<Partial<StyleProps>>`\n    padding-right: ${({ theme }) => theme.spacing.deca};\n    padding-left: ${({ theme }) => theme.spacing.deca};\n    border-radius: ${({ theme }) => theme.borderRadius.mili};\n    justify-content: center;\n    margin-left: ${({ theme }) => theme.spacing.micro};\n    margin-right: ${({ theme }) => theme.spacing.micro};\n`;\n\nexport const PagesContainer = styled('div')<Partial<StyleProps>>`\n  margin: 0 20px;\n  display: flex;\n`;\n\nexport const HoveredText = styled('div')<Partial<StyleProps>>`\n  user-select: none;\n  &:hover * {\n    color: ${({ theme }) => theme.font.color.light};\n  }\n`;\n"],"file":"styled.js"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tecsinapse/react-web-kit",
   "description": "TecSinapse React components",
-  "version": "1.12.11",
+  "version": "1.14.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "license": "MIT",
@@ -14,7 +14,7 @@
     "@emotion/native": "^11.0.0",
     "@emotion/react": "^11.4.1",
     "@emotion/styled": "^11.3.0",
-    "@tecsinapse/react-core": "^1.12.10",
+    "@tecsinapse/react-core": "^1.13.0",
     "@types/react-native": "^0.64.4",
     "react-native-vector-icons": "^8.1.0",
     "react-transition-group": "^4.4.2"
@@ -33,5 +33,5 @@
     "react-dom": ">=16.8.0",
     "react-native-web": "^0.17.1"
   },
-  "gitHead": "5a75d80ba78335d9dba890b4b75c6bc76954c380"
+  "gitHead": "d5d2193bf8716615751e28b7009da59520e8080c"
 }

package/src/components/atoms/Dropdown/index.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { StyledContainerDropdown } from './styled';
+import { Transition } from 'react-transition-group';
+import { defaultStyles, transition } from '../../molecules/Select/animations';
+import { Dispatch, SetStateAction } from 'react';
+import { useClickAwayListener } from '@tecsinapse/react-web-kit';
+
+export interface DropdownProps {
+  visible: boolean;
+  setVisible: Dispatch<SetStateAction<boolean>>;
+}
+
+const Component: React.FC<DropdownProps & { children: JSX.Element }> = ({
+  visible,
+  setVisible,
+  children,
+}): JSX.Element => {
+  const refDropDown = React.useRef(null);
+  useClickAwayListener(refDropDown, setVisible);
+
+  return (
+    <Transition in={visible} timeout={300}>
+      {state => (
+        <StyledContainerDropdown
+          style={{ ...defaultStyles, ...transition['bottom'][state] }}
+          ref={refDropDown}
+        >
+          {children}
+        </StyledContainerDropdown>
+      )}
+    </Transition>
+  );
+};
+
+export const Dropdown = Component;

package/src/components/atoms/Dropdown/styled.ts

@@ -0,0 +1,15 @@
+import styled from '@emotion/styled';
+import { hex2rgba, StyleProps } from '@tecsinapse/react-core';
+
+export const StyledContainerDropdown = styled('div')<Partial<StyleProps>>`
+  width: auto;
+  background-color: ${({ theme }: StyleProps) =>
+    theme.miscellaneous.surfaceColor};
+  border-radius: ${({ theme }: StyleProps) => theme.borderRadius.mili};
+  box-shadow: 0 2px 8px
+    ${({ theme }: StyleProps) => hex2rgba(theme.miscellaneous.shadow, 0.05)};
+  position: absolute;
+  padding-bottom: ${({ theme }: StyleProps) => theme.spacing.mili};
+  margin-top: 8px;
+  z-index: ${({ theme }: StyleProps) => theme.zIndex.select};
+`;

package/src/components/molecules/DatePicker/DatePicker.stories.tsx

@@ -23,7 +23,7 @@ Range.args = {
   label: 'Select date',
   placeholder: 'Select date',
   type: 'range',
-  closeOnPick: true,
+  closeOnPick: false,
 };
 
 const TemplateDay: Story<DatePickerProps<'day'>> = args => {

package/src/components/molecules/DatePicker/DatePicker.tsx

@@ -1,29 +1,69 @@
 import {
   Calendar,
-  DatePicker as DatePickerCore, DatePickerProps, SelectionType
+  DatePicker as DatePickerCore,
+  DatePickerProps,
+ DateRange,
+  SelectionType,
 } from '@tecsinapse/react-core';
-import React, { useCallback, useState } from 'react';
-import { Modal } from './Modal';
+import React, { useCallback, useMemo, useState } from 'react';
+import { Dropdown } from '../../atoms/Dropdown';
 
-export type WebDatePickerProps<T extends SelectionType> = Omit<DatePickerProps<T>, 'CalendarComponent' | 'renderCalendar' | 'requestCloseCalendar' | 'requestShowCalendar'>
+export type WebDatePickerProps<T extends SelectionType> = Omit<
+  DatePickerProps<T>,
+  | 'CalendarComponent'
+  | 'renderCalendar'
+  | 'requestCloseCalendar'
+  | 'requestShowCalendar'
+>;
 
-export const DatePicker = <T extends SelectionType>({ ...rest }: WebDatePickerProps<T>): JSX.Element => {
+export const DatePicker = <T extends SelectionType>({
+  value,
+  type,
+  ...rest
+}: WebDatePickerProps<T>): JSX.Element => {
+  const [visible, setVisible] = useState(false);
+  const show = useCallback(() => setVisible(true), []);
+  const close = useCallback(() => setVisible(false), []);
+
+  const getYear = useMemo(() => {
+    if (value) {
+      if (type === 'range') {
+        if ((value as DateRange).lowest !== undefined)
+          return new Date((value as DateRange).lowest).getFullYear();
+      } else {
+        return new Date(value as Date).getFullYear();
+      }
+    }
+    return undefined;
+  }, [value]);
+
+  const getMonth = useMemo(() => {
+    if (value) {
+      if (type === 'range') {
+        if ((value as DateRange).lowest !== undefined)
+          return new Date((value as DateRange).lowest).getMonth();
+      } else {
+        return new Date(value as Date).getMonth();
+      }
+    }
+    return undefined;
+  }, [value]);
 
-  const [ visible, setVisible ] = useState(false)
-  const show = useCallback(() => setVisible(true), [])
-  const close = useCallback(() => setVisible(false), [])
-  
   return (
     <DatePickerCore
       {...rest}
       CalendarComponent={Calendar}
+      value={value}
+      type={type}
+      year={getYear}
+      month={getMonth}
       requestShowCalendar={show}
       requestCloseCalendar={close}
-      renderCalendar={(calendar) => (
-        <Modal animationType='fade' visible={visible} onRequestClose={close}>
+      renderCalendar={calendar => (
+        <Dropdown visible={visible} setVisible={setVisible}>
           {calendar}
-        </Modal>
+        </Dropdown>
       )}
     />
   );
-};
+};

package/src/components/molecules/DateTimePicker/DateTimePicker.stories.tsx

@@ -14,14 +14,19 @@ const Template: Story<DateTimePickerProps> = ({ ...args }) => {
 
   return (
     <DateTimePicker
-      label={'Select date and time'}
-      placeholder={'Select date and time'}
-      mode={'datetime'}
       value={value}
       onChange={setValue}
       locale={ptBR}
+      {...args}
     />
   );
 };
 
 export const Base = Template.bind({});
+
+Base.args = {
+  mode: 'datetime',
+  format: 'dd/MM/yyyy HH:mm',
+  label: 'Select date and time',
+  placeholder: 'Select date and time'
+};

package/src/components/molecules/DateTimePicker/DateTimePicker.tsx

@@ -1,29 +1,31 @@
 import {
-    DateTimePicker as DateTimePickerCore,
-    DateTimePickerProps
+  DateTimePicker as DateTimePickerCore,
+  DateTimePickerProps,
 } from '@tecsinapse/react-core';
 import React, { FC, useCallback, useState } from 'react';
-import { Modal } from './Modal';
+import { Dropdown } from '../../atoms/Dropdown';
 
-
-export type WebDateTimePickerProps = Omit<DateTimePickerProps, 'renderSelector' | 'requestShowSelector' | 'requestCloseSelector'>
+export type WebDateTimePickerProps = Omit<
+  DateTimePickerProps,
+  'renderSelector' | 'requestShowSelector' | 'requestCloseSelector'
+>;
 
 export const DateTimePicker: FC<WebDateTimePickerProps> = ({ ...rest }) => {
+  const [visible, setVisible] = useState<boolean>(false);
 
-    const [ visible, setVisible ] = useState(false)
-    const show = useCallback(() => setVisible(true), [])
-    const close = useCallback(() => setVisible(false), [])
+  const show = useCallback(() => setVisible(true), []);
+  const close = useCallback(() => setVisible(false), []);
 
-    return (
-        <DateTimePickerCore
-            {...rest}
-            requestShowSelector={show}
-            requestCloseSelector={close}
-            renderSelector={(selector) => (
-                <Modal animationType='fade' visible={visible} onRequestClose={close}>
-                    {selector}
-                </Modal>
-            )}
-        />
-    );
+  return (
+    <DateTimePickerCore
+      {...rest}
+      requestShowSelector={show}
+      requestCloseSelector={close}
+      renderSelector={selector => (
+        <Dropdown visible={visible} setVisible={setVisible}>
+          {selector}
+        </Dropdown>
+      )}
+    />
+  );
 };

package/src/components/molecules/Select/SelectItem/SelectItem.tsx

@@ -28,6 +28,7 @@ const SelectItem = <Data, Type extends 'single' | 'multi'>({
   checkedAll,
   setCheckedAll,
   lenghtOptions,
+  keyExtractor,
 }: SelectItemProps<Data, Type> & {
   setDropDownVisible: (t: boolean) => void;
   checkedAll: boolean;
@@ -36,13 +37,36 @@ const SelectItem = <Data, Type extends 'single' | 'multi'>({
 }): JSX.Element => {
   const isMulti = type === 'multi';
   const [checked, setChecked] = React.useState<boolean>(
-    value !== undefined && type === 'multi' && (value as Data[]).includes(item)
+    value !== undefined &&
+      type === 'multi' &&
+      (value as Data[]).find(
+        data => keyExtractor(data) === keyExtractor(item)
+      ) !== undefined
   );
+
+  React.useEffect(() => {
+    if (
+      !checked &&
+      value !== undefined &&
+      ((type === 'multi' &&
+        (value as Data[]).find(
+          data => keyExtractor(data) === keyExtractor(item)
+        )) ||
+        (type === 'single' &&
+          keyExtractor(value as Data) === keyExtractor(item)))
+    )
+      setChecked(true);
+  }, [value, keyExtractor, type]);
+
   React.useEffect(() => {
     if (type === 'multi') {
       checkedAll
         ? setChecked(true)
-        : setChecked((value as Data[]).includes(item));
+        : setChecked(
+            (value as Data[]).find(
+              data => keyExtractor(data) === keyExtractor(item)
+            ) !== undefined
+          );
     }
   }, [checkedAll]);
 
@@ -59,7 +83,9 @@ const SelectItem = <Data, Type extends 'single' | 'multi'>({
           [..._value, key].length === lenghtOptions && setCheckedAll(true);
         } else {
           const auxArray: Data[] = [..._value];
-          const indexToExclude = auxArray.indexOf(key);
+          const indexToExclude = auxArray.findIndex(
+            data => keyExtractor(data) === keyExtractor(key)
+          );
           auxArray.splice(indexToExclude, 1);
           onSelect([...auxArray] as OnSelectArg);
           setCheckedAll(false);

package/src/components/organisms/DataGrid/Footer/styled.ts

@@ -30,10 +30,12 @@ export const SelectContainer = styled('div')<Partial<StyleProps>>`
   margin-right: ${({ theme }) => theme.spacing.deca};
 `;
 
-export const NavigationButton = nativeStyled(Button)<Partial<StyleProps>>`
-    padding: ${({ theme }) => theme.spacing.centi};
+export const NavigationButton = nativeStyled(Button)<Partial<StyleProps>>`    
     border-radius: ${({ theme }) => theme.borderRadius.mili};
+    height: 44px;
     justify-content: center;
+    padding: ${({ theme }) => theme.spacing.centi};
+    width: 44px;  
 `;
 
 // Se o botão estiver ativo, renderizar outlined, caso contrario o botão é text