@tecsinapse/react-web-kit 1.13.0 → 1.15.2

package/CHANGELOG.md

@@ -3,6 +3,44 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.15.2](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-web-kit@1.15.1...@tecsinapse/react-web-kit@1.15.2) (2022-02-15)
+
+**Note:** Version bump only for package @tecsinapse/react-web-kit
+
+
+
+
+
+## [1.15.1](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-web-kit@1.15.0...@tecsinapse/react-web-kit@1.15.1) (2022-02-15)
+
+**Note:** Version bump only for package @tecsinapse/react-web-kit
+
+
+
+
+
+# [1.15.0](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-web-kit@1.14.0...@tecsinapse/react-web-kit@1.15.0) (2022-02-14)
+
+
+### Bug Fixes
+
+* formatWithMask util. Refactoring on useNumberMask and useStringMask hooks. ([76920f6](https://github.com/tecsinapse/design-system/commit/76920f62fb8cf9070b9b2e477dc720e9b7b24077))
+
+
+
+
+
+# [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

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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tecsinapse/react-web-kit",
   "description": "TecSinapse React components",
-  "version": "1.13.0",
+  "version": "1.15.2",
   "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.14.2",
     "@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": "7ab04c72670707ce71d0874c37347d20cf94e329"
+  "gitHead": "77f184e195dd967e7ed41aca0f562b25808e2126"
 }

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/atoms/Input/Input.stories.tsx

@@ -2,6 +2,8 @@ import { action } from '@storybook/addon-actions';
 import { Story } from '@storybook/react';
 import React, { useState } from 'react';
 import Input, { InputWebProps } from './Input';
+import { Masks } from '@tecsinapse/react-core/src';
+import { CurrencyOptions } from '@tecsinapse/react-core/src/components/atoms/Input/hooks/useNumberMask';
 
 export default {
   title: 'Hybrid/Input',
@@ -37,3 +39,72 @@ Base.args = {
   disabled: false,
   label: 'Login',
 };
+
+const TemplateStringMask: Story<InputWebProps> = args => {
+  const [value, setValue] = useState<string>('');
+
+  const onChange = text => {
+    setValue(text);
+    if (args.onChange) {
+      args.onChange(text);
+    }
+  };
+
+  return (
+    <Input
+      {...args}
+      label={args.label}
+      value={value}
+      onChange={onChange}
+      placeholder={args.placeholder}
+      mask={Masks.COMBINED_PHONE}
+    />
+  );
+};
+
+export const StringMask = TemplateStringMask.bind({});
+
+StringMask.args = {
+  onChange: value => action('onChange')(value),
+  placeholder: 'Type your phone',
+  disabled: false,
+  label: 'Phone',
+};
+
+const TemplateNumberMask: Story<InputWebProps> = args => {
+  const [value, setValue] = useState<number>(1200.2);
+
+  const onChange = text => {
+    setValue(text);
+    if (args.onChange) {
+      args.onChange(text);
+    }
+  };
+
+  const numberMaskExample: CurrencyOptions = {
+    symbol: 'R$ ',
+    separator: '.',
+    decimal: ',',
+    precision: 2,
+  };
+
+  return (
+    <Input
+      {...args}
+      label={args.label}
+      value={value}
+      onChange={onChange}
+      placeholder={args.placeholder}
+      mask={numberMaskExample}
+    />
+  );
+};
+
+export const NumberMask = TemplateNumberMask.bind({});
+
+NumberMask.args = {
+  onChange: value => action('onChange')(value),
+  placeholder: 'Type the price in R$',
+  disabled: false,
+  label: 'Price',
+};

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>
+      )}
+    />
+  );
 };