@tecsinapse/react-native-kit 1.16.2 → 1.17.0

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.17.0](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-native-kit@1.16.2...@tecsinapse/react-native-kit@1.17.0) (2022-05-10)
+
+
+### Bug Fixes
+
+* inputMask accepting undefined. ([6037162](https://github.com/tecsinapse/design-system/commit/6037162a564c118c8faed8359418ff7eda6d1645))
+* updating skeleton from master. ([9904009](https://github.com/tecsinapse/design-system/commit/990400938c3eb92c78ab60277971726b64410515))
+
+
+
+
+
 ## [1.16.2](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-native-kit@1.16.1...@tecsinapse/react-native-kit@1.16.2) (2022-04-21)
 
 

package/dist/components/atoms/InputMask/InputMask.d.ts

@@ -0,0 +1,8 @@
+import { FontStackType, FontWeightType, InputContainerProps, InputMaskElementProps } from '@tecsinapse/react-core';
+import { FC } from 'react';
+export interface InputMaskNativeProps extends Omit<InputMaskElementProps, 'style'>, InputContainerProps {
+    inputFontStack?: FontStackType;
+    inputFontWeight?: FontWeightType;
+}
+declare const InputMask: FC<InputMaskNativeProps>;
+export default InputMask;

package/dist/components/atoms/InputMask/InputMask.js

@@ -0,0 +1,87 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _reactCore = require("@tecsinapse/react-core");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactNative = require("react-native");
+
+var _styled = require("./styled");
+
+var _Text = require("../Text");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+const InputMask = _react.default.forwardRef(({
+  label,
+  labelColor,
+  labelColorVariant,
+  labelColorTone,
+  labelTypography,
+  labelStack,
+  labelWeight,
+  leftComponent,
+  rightComponent,
+  disabled,
+  style,
+  borderColor,
+  borderColorGradation,
+  inputFontStack = 'default',
+  inputFontWeight = 'bold',
+  inputContainerStyle,
+  variant = 'default',
+  hintComponent,
+  hint,
+  onFocus,
+  onBlur,
+  ...rest
+}, ref) => {
+  const _hint = hintComponent || _react.default.createElement(_reactCore.Hint, {
+    TextComponent: _Text.Text,
+    text: hint,
+    variant: variant
+  });
+
+  const {
+    focused,
+    handleBlur,
+    handleFocus
+  } = (0, _reactCore.useInputFocus)(onFocus, onBlur, !disabled);
+  return _react.default.createElement(_reactNative.View, {
+    style: style
+  }, _react.default.createElement(_styled.StyledInputContainer, {
+    label: label,
+    labelColor: labelColor,
+    labelColorVariant: labelColorVariant,
+    labelColorTone: labelColorTone,
+    labelTypography: labelTypography,
+    labelStack: labelStack,
+    labelWeight: labelWeight,
+    LabelComponent: _Text.Text,
+    leftComponent: leftComponent,
+    rightComponent: rightComponent,
+    borderColor: borderColor,
+    borderColorGradation: borderColorGradation,
+    inputContainerStyle: inputContainerStyle,
+    focused: focused,
+    disabled: disabled,
+    variant: variant
+  }, _react.default.createElement(_styled.StyledNativeInputMask, _extends({}, rest, {
+    ref: ref,
+    fontStack: inputFontStack,
+    fontWeight: inputFontWeight,
+    disabled: disabled,
+    onFocus: handleFocus,
+    onBlur: handleBlur
+  }))), hint && _hint);
+});
+
+InputMask.displayName = 'InputMask';
+var _default = InputMask;
+exports.default = _default;
+//# sourceMappingURL=InputMask.js.map

package/dist/components/atoms/InputMask/InputMask.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/atoms/InputMask/InputMask.tsx"],"names":["InputMask","React","forwardRef","label","labelColor","labelColorVariant","labelColorTone","labelTypography","labelStack","labelWeight","leftComponent","rightComponent","disabled","style","borderColor","borderColorGradation","inputFontStack","inputFontWeight","inputContainerStyle","variant","hintComponent","hint","onFocus","onBlur","rest","ref","_hint","Text","focused","handleBlur","handleFocus","displayName"],"mappings":";;;;;AAAA;;AAQA;;AACA;;AACA;;AACA;;;;;;AASA,MAAMA,SAAmC,GAAGC,eAAMC,UAAN,CAC1C,CACE;AACEC,EAAAA,KADF;AAEEC,EAAAA,UAFF;AAGEC,EAAAA,iBAHF;AAIEC,EAAAA,cAJF;AAKEC,EAAAA,eALF;AAMEC,EAAAA,UANF;AAOEC,EAAAA,WAPF;AAQEC,EAAAA,aARF;AASEC,EAAAA,cATF;AAUEC,EAAAA,QAVF;AAWEC,EAAAA,KAXF;AAYEC,EAAAA,WAZF;AAaEC,EAAAA,oBAbF;AAcEC,EAAAA,cAAc,GAAG,SAdnB;AAeEC,EAAAA,eAAe,GAAG,MAfpB;AAgBEC,EAAAA,mBAhBF;AAiBEC,EAAAA,OAAO,GAAG,SAjBZ;AAkBEC,EAAAA,aAlBF;AAmBEC,EAAAA,IAnBF;AAoBEC,EAAAA,OApBF;AAqBEC,EAAAA,MArBF;AAsBE,KAAGC;AAtBL,CADF,EAyBEC,GAzBF,KA0BK;AACH,QAAMC,KAAK,GAAGN,aAAa,IACzB,6BAAC,eAAD;AAAM,IAAA,aAAa,EAAEO,UAArB;AAA2B,IAAA,IAAI,EAAEN,IAAjC;AAAuC,IAAA,OAAO,EAAEF;AAAhD,IADF;;AAGA,QAAM;AAAES,IAAAA,OAAF;AAAWC,IAAAA,UAAX;AAAuBC,IAAAA;AAAvB,MAAuC,8BAC3CR,OAD2C,EAE3CC,MAF2C,EAG3C,CAACX,QAH0C,CAA7C;AAMA,SACE,6BAAC,iBAAD;AAAM,IAAA,KAAK,EAAEC;AAAb,KACE,6BAAC,4BAAD;AACE,IAAA,KAAK,EAAEV,KADT;AAEE,IAAA,UAAU,EAAEC,UAFd;AAGE,IAAA,iBAAiB,EAAEC,iBAHrB;AAIE,IAAA,cAAc,EAAEC,cAJlB;AAKE,IAAA,eAAe,EAAEC,eALnB;AAME,IAAA,UAAU,EAAEC,UANd;AAOE,IAAA,WAAW,EAAEC,WAPf;AAQE,IAAA,cAAc,EAAEkB,UARlB;AASE,IAAA,aAAa,EAAEjB,aATjB;AAUE,IAAA,cAAc,EAAEC,cAVlB;AAWE,IAAA,WAAW,EAAEG,WAXf;AAYE,IAAA,oBAAoB,EAAEC,oBAZxB;AAaE,IAAA,mBAAmB,EAAEG,mBAbvB;AAcE,IAAA,OAAO,EAAEU,OAdX;AAeE,IAAA,QAAQ,EAAEhB,QAfZ;AAgBE,IAAA,OAAO,EAAEO;AAhBX,KAkBE,6BAAC,6BAAD,eACMK,IADN;AAEE,IAAA,GAAG,EAAEC,GAFP;AAGE,IAAA,SAAS,EAAET,cAHb;AAIE,IAAA,UAAU,EAAEC,eAJd;AAKE,IAAA,QAAQ,EAAEL,QALZ;AAME,IAAA,OAAO,EAAEkB,WANX;AAOE,IAAA,MAAM,EAAED;AAPV,KAlBF,CADF,EA6BGR,IAAI,IAAIK,KA7BX,CADF;AAiCD,CAtEyC,CAA5C;;AAyEA1B,SAAS,CAAC+B,WAAV,GAAwB,WAAxB;eAEe/B,S","sourcesContent":["import {\n  FontStackType,\n  FontWeightType,\n  Hint,\n  InputContainerProps,\n  InputMaskElementProps,\n  useInputFocus,\n} from '@tecsinapse/react-core';\nimport React, { FC } from 'react';\nimport { View } from 'react-native';\nimport { StyledInputContainer, StyledNativeInputMask } from './styled';\nimport { Text } from '../Text';\n\nexport interface InputMaskNativeProps\n  extends Omit<InputMaskElementProps, 'style'>,\n    InputContainerProps {\n  inputFontStack?: FontStackType;\n  inputFontWeight?: FontWeightType;\n}\n\nconst InputMask: FC<InputMaskNativeProps> = React.forwardRef(\n  (\n    {\n      label,\n      labelColor,\n      labelColorVariant,\n      labelColorTone,\n      labelTypography,\n      labelStack,\n      labelWeight,\n      leftComponent,\n      rightComponent,\n      disabled,\n      style,\n      borderColor,\n      borderColorGradation,\n      inputFontStack = 'default',\n      inputFontWeight = 'bold',\n      inputContainerStyle,\n      variant = 'default',\n      hintComponent,\n      hint,\n      onFocus,\n      onBlur,\n      ...rest\n    },\n    ref\n  ) => {\n    const _hint = hintComponent || (\n      <Hint TextComponent={Text} text={hint} variant={variant} />\n    );\n    const { focused, handleBlur, handleFocus } = useInputFocus(\n      onFocus,\n      onBlur,\n      !disabled\n    );\n\n    return (\n      <View style={style}>\n        <StyledInputContainer\n          label={label}\n          labelColor={labelColor}\n          labelColorVariant={labelColorVariant}\n          labelColorTone={labelColorTone}\n          labelTypography={labelTypography}\n          labelStack={labelStack}\n          labelWeight={labelWeight}\n          LabelComponent={Text}\n          leftComponent={leftComponent}\n          rightComponent={rightComponent}\n          borderColor={borderColor}\n          borderColorGradation={borderColorGradation}\n          inputContainerStyle={inputContainerStyle}\n          focused={focused}\n          disabled={disabled}\n          variant={variant}\n        >\n          <StyledNativeInputMask\n            {...rest}\n            ref={ref}\n            fontStack={inputFontStack}\n            fontWeight={inputFontWeight}\n            disabled={disabled}\n            onFocus={handleFocus}\n            onBlur={handleBlur}\n          />\n        </StyledInputContainer>\n        {hint && _hint}\n      </View>\n    );\n  }\n);\n\nInputMask.displayName = 'InputMask';\n\nexport default InputMask;\n"],"file":"InputMask.js"}

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

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

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

@@ -0,0 +1,14 @@
+"use strict";
+
+exports.__esModule = true;
+exports.InputMaskNativeProps = exports.InputMask = void 0;
+
+var _InputMask = _interopRequireWildcard(require("./InputMask"));
+
+exports.InputMask = _InputMask.default;
+exports.InputMaskNativeProps = _InputMask.InputMaskNativeProps;
+
+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; }
+//# sourceMappingURL=index.js.map

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

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

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const StyledInputContainer: import("@emotion/native").StyledComponent<any, {}, {
+    ref?: import("react").Ref<any> | undefined;
+}>;
+export declare const StyledNativeInputMask: import("@emotion/native").StyledComponent<any, {}, {}>;

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

@@ -0,0 +1,27 @@
+"use strict";
+
+exports.__esModule = true;
+exports.StyledNativeInputMask = exports.StyledInputContainer = void 0;
+
+var _native = _interopRequireDefault(require("@emotion/native"));
+
+var _reactCore = require("@tecsinapse/react-core");
+
+var _styled = require("../Text/styled");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const StyledInputContainer = (0, _native.default)(_reactCore.InputContainer)`
+  min-height: ${(0, _reactCore.RFValueStr)('50px')};
+`;
+exports.StyledInputContainer = StyledInputContainer;
+const StyledNativeInputMaskBase = (0, _native.default)(_reactCore.InputMaskElement)`
+  height: ${({
+  theme
+}) => theme.typography.h5.lineHeight};
+  width: 100%;
+  padding: 0;
+`;
+const StyledNativeInputMask = (0, _native.default)(StyledNativeInputMaskBase)(_styled.fontStyles);
+exports.StyledNativeInputMask = StyledNativeInputMask;
+//# sourceMappingURL=styled.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/atoms/InputMask/styled.ts"],"names":["StyledInputContainer","InputContainer","StyledNativeInputMaskBase","InputMaskElement","theme","typography","h5","lineHeight","StyledNativeInputMask","fontStyles"],"mappings":";;;;;AAAA;;AACA;;AAMA;;;;AAGO,MAAMA,oBAAoB,GAAG,qBAAOC,yBAAP,CAA4C;AAChF,gBAAgB,2BAAW,MAAX,CAAmB;AACnC,CAFO;;AAIP,MAAMC,yBAAyB,GAAG,qBAAOC,2BAAP,CAEhC;AACF,YAAY,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,UAAN,CAAiBC,EAAjB,CAAoBC,UAAW;AAC1D;AACA;AACA,CANA;AAQO,MAAMC,qBAAqB,GAAG,qBAAON,yBAAP,EAEnCO,kBAFmC,CAA9B","sourcesContent":["import styled from '@emotion/native';\nimport {\n  InputContainer,\n  InputMaskElement,\n  RFValueStr,\n  StyleProps,\n} from '@tecsinapse/react-core';\nimport { Font, fontStyles } from '../Text/styled';\nimport { InputMaskNativeProps } from './InputMask';\n\nexport const StyledInputContainer = styled(InputContainer)<Partial<StyleProps>>`\n  min-height: ${RFValueStr('50px')};\n`;\n\nconst StyledNativeInputMaskBase = styled(InputMaskElement)<\n  Partial<InputMaskNativeProps> & Partial<StyleProps>\n>`\n  height: ${({ theme }) => theme.typography.h5.lineHeight};\n  width: 100%;\n  padding: 0;\n`;\n\nexport const StyledNativeInputMask = styled(StyledNativeInputMaskBase)<\n  Font & Partial<InputMaskNativeProps> & Partial<StyleProps>\n>(fontStyles);\n"],"file":"styled.js"}

package/dist/components/atoms/Modal/ModalLifecycleHandler.d.ts

@@ -16,6 +16,7 @@ export declare class ModalLifecycleHandler {
     sync: (id: string, modal: () => ReactElement<IBaseModal>) => void;
     destroy: (id: string) => void;
     private remove;
+    private findNode;
     show: (id: string) => void;
     close: (id: string) => void;
 }

package/dist/components/atoms/Modal/ModalLifecycleHandler.js

@@ -47,7 +47,7 @@ class ModalLifecycleHandler {
 
     this.sync = (id, modal) => {
       if (this.nodeGroup.has(id)) {
-        const savedNode = this.nodeGroup.get(id);
+        const savedNode = this.findNode(id);
         savedNode && this.nodeGroup.set(id, { ...savedNode,
           modal
         });
@@ -66,15 +66,21 @@ class ModalLifecycleHandler {
     };
 
     this.remove = id => {
-      const savedNode = this.nodeGroup.get(id);
+      const savedNode = this.findNode(id);
       savedNode && this.nodeGroup.set(id, { ...savedNode,
         lastVisualization: undefined
       });
       this.update();
     };
 
+    this.findNode = id => {
+      const node = this.nodeGroup.get(id);
+      !node && console.warn(`No modal was found with the id "${id}"`);
+      return node;
+    };
+
     this.show = id => {
-      const savedNode = this.nodeGroup.get(id);
+      const savedNode = this.findNode(id);
       savedNode && this.nodeGroup.set(id, { ...savedNode,
         visible: true,
         lastVisualization: new Date()
@@ -83,7 +89,7 @@ class ModalLifecycleHandler {
     };
 
     this.close = id => {
-      const savedNode = this.nodeGroup.get(id);
+      const savedNode = this.findNode(id);
       savedNode && this.nodeGroup.set(id, { ...savedNode,
         visible: false
       });

package/dist/components/atoms/Modal/ModalLifecycleHandler.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/atoms/Modal/ModalLifecycleHandler.ts"],"names":["ModalLifecycleHandler","constructor","attach","state","update","requestAnimationFrame","nodes","Array","from","nodeGroup","values","filter","node","visible","lastVisualization","sort","nodeA","nodeB","getTime","map","index","filteredNodes","modalElement","modal","props","React","cloneElement","key","id","isLastShown","length","close","onClose","remove","updateState","render","modals","sync","has","savedNode","get","set","destroy","delete","undefined","show","Date","Map","createModalLifecycleHandler"],"mappings":"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","sourcesContent":["import React, { Dispatch, ReactElement } from \"react\"\nimport { IBaseModal } from \"./ui/types\"\n\n/**\n * It Represents a node (usually a modal component) in the modal's lifecycle handler.\n */\ninterface ModalNode {\n    id: string\n    visible?: boolean\n    lastVisualization?: Date\n    modal: () => ReactElement<IBaseModal>\n}\n\n/**\n * Manage all modal's lifecycle.\n */\nexport class ModalLifecycleHandler {\n    \n    nodeGroup: Map<string, ModalNode>\n    state: [ReactElement<IBaseModal>[], Dispatch<ReactElement<IBaseModal>[]>] | undefined\n\n    constructor() {\n        this.nodeGroup = new Map()\n        this.state = undefined\n    }\n\n    /**\n     * Holds the ModalGroupManager state.\n     * \n     * @param state \n     */\n    public attach = (state: [ReactElement<IBaseModal>[], Dispatch<ReactElement<IBaseModal>[]>]) => {\n        this.state = state\n    }\n\n    /**\n     * Updates all the modal components.\n     */\n    public update = () => {\n        requestAnimationFrame(() => {\n            const nodes = Array.from(this.nodeGroup.values())\n                .filter(node => node.visible || !!node.lastVisualization)\n                .sort((nodeA, nodeB) => (nodeA.lastVisualization?.getTime() || 0) - (nodeB.lastVisualization?.getTime() || 0))\n                .map((node, index, filteredNodes) => {\n                    let modalElement = node.modal()\n                    let { props } = modalElement\n                    return React.cloneElement(modalElement, {\n                        ...props,\n                        key: node.id,\n                        visible: node.visible,\n                        isLastShown: filteredNodes.length - 1 === index,\n                        close: () => this.close(node.id),\n                        onClose: () => {\n                            this.remove(node.id)\n                            props.onClose?.()\n                        }\n                    })\n                })\n                \n            const [, updateState ] = this.state || []\n            updateState?.(nodes)\n        })\n    }\n\n    /**\n     * Renders all selected modals.\n     * \n     * @returns \n     */\n    public render = (): ReactElement<IBaseModal>[] => {\n        const [ modals ] = this.state || []\n        return modals || []\n    }\n\n    /**\n     * Tells to the lifecycle handler that a modal component needs to be handled.\n     * \n     * @param id \n     * @param modal \n     * @returns \n     */\n    public sync = (id: string, modal: () => ReactElement<IBaseModal>) => {\n        if (this.nodeGroup.has(id)) {\n            const savedNode = this.nodeGroup.get(id)\n            savedNode && this.nodeGroup.set(id, { ...savedNode, modal })\n            return\n        }\n        this.nodeGroup.set(id, { id, modal })\n    }\n\n    /**\n     * Destroy a modal from the lifecycle handler.\n     * \n     * @param id \n     */\n    public destroy = (id: string) => {\n        this.nodeGroup.delete(id)\n        this.update()\n    }\n\n    /**\n     * Removes a modal from the rendering stack. It tells to the lifecycle handler that a modal \n     * component is no longer used by the application.\n     * \n     * @param id \n     */\n    private remove = (id: string) => {\n        const savedNode = this.nodeGroup.get(id)\n        savedNode && this.nodeGroup.set(id, { ...savedNode, lastVisualization: undefined })\n        this.update()\n    }\n\n    /**\n     * Makes a modal appears.\n     * \n     * @param id \n     */\n    public show = (id: string) => {\n        const savedNode = this.nodeGroup.get(id)\n        savedNode && this.nodeGroup.set(id, { ...savedNode, visible: true, lastVisualization: new Date() })\n        this.update()\n    }\n\n    /**\n     * Makes a modal disappears.\n     * \n     * @param id \n     */\n    public close = (id: string) => {\n        const savedNode = this.nodeGroup.get(id)\n        savedNode && this.nodeGroup.set(id, { ...savedNode, visible: false })\n        this.update()\n    }\n}\n\n/**\n * Creates a new ModalLifecycleHandlere instance.\n * \n * @returns \n */\nexport const createModalLifecycleHandler = () => {\n    return new ModalLifecycleHandler()\n}\n"],"file":"ModalLifecycleHandler.js"}
+{"version":3,"sources":["../../../../src/components/atoms/Modal/ModalLifecycleHandler.ts"],"names":["ModalLifecycleHandler","constructor","attach","state","update","requestAnimationFrame","nodes","Array","from","nodeGroup","values","filter","node","visible","lastVisualization","sort","nodeA","nodeB","getTime","map","index","filteredNodes","modalElement","modal","props","React","cloneElement","key","id","isLastShown","length","close","onClose","remove","updateState","render","modals","sync","has","savedNode","findNode","set","destroy","delete","undefined","get","console","warn","show","Date","Map","createModalLifecycleHandler"],"mappings":"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","sourcesContent":["import React, { Dispatch, ReactElement } from \"react\"\nimport { IBaseModal } from \"./ui/types\"\n\n/**\n * It Represents a node (usually a modal component) in the modal's lifecycle handler.\n */\ninterface ModalNode {\n    id: string\n    visible?: boolean\n    lastVisualization?: Date\n    modal: () => ReactElement<IBaseModal>\n}\n\n/**\n * Manage all modal's lifecycle.\n */\nexport class ModalLifecycleHandler {\n    \n    nodeGroup: Map<string, ModalNode>\n    state: [ReactElement<IBaseModal>[], Dispatch<ReactElement<IBaseModal>[]>] | undefined\n\n    constructor() {\n        this.nodeGroup = new Map()\n        this.state = undefined\n    }\n\n    /**\n     * Holds the ModalGroupManager state.\n     * \n     * @param state \n     */\n    public attach = (state: [ReactElement<IBaseModal>[], Dispatch<ReactElement<IBaseModal>[]>]) => {\n        this.state = state\n    }\n\n    /**\n     * Updates all the modal components.\n     */\n    public update = () => {\n        requestAnimationFrame(() => {\n            const nodes = Array.from(this.nodeGroup.values())\n                .filter(node => node.visible || !!node.lastVisualization)\n                .sort((nodeA, nodeB) => (nodeA.lastVisualization?.getTime() || 0) - (nodeB.lastVisualization?.getTime() || 0))\n                .map((node, index, filteredNodes) => {\n                    let modalElement = node.modal()\n                    let { props } = modalElement\n                    return React.cloneElement(modalElement, {\n                        ...props,\n                        key: node.id,\n                        visible: node.visible,\n                        isLastShown: filteredNodes.length - 1 === index,\n                        close: () => this.close(node.id),\n                        onClose: () => {\n                            this.remove(node.id)\n                            props.onClose?.()\n                        }\n                    })\n                })\n                \n            const [, updateState ] = this.state || []\n            updateState?.(nodes)\n        })\n    }\n\n    /**\n     * Renders all selected modals.\n     * \n     * @returns \n     */\n    public render = (): ReactElement<IBaseModal>[] => {\n        const [ modals ] = this.state || []\n        return modals || []\n    }\n\n    /**\n     * Tells to the lifecycle handler that a modal component needs to be handled.\n     * \n     * @param id \n     * @param modal \n     * @returns \n     */\n    public sync = (id: string, modal: () => ReactElement<IBaseModal>) => {\n        if (this.nodeGroup.has(id)) {\n            const savedNode = this.findNode(id)\n            savedNode && this.nodeGroup.set(id, { ...savedNode, modal })\n            return\n        }\n        this.nodeGroup.set(id, { id, modal })\n    }\n\n    /**\n     * Destroy a modal from the lifecycle handler.\n     * \n     * @param id \n     */\n    public destroy = (id: string) => {\n        this.nodeGroup.delete(id)\n        this.update()\n    }\n\n    /**\n     * Removes a modal from the rendering stack. It tells to the lifecycle handler that a modal \n     * component is no longer used by the application.\n     * \n     * @param id \n     */\n    private remove = (id: string) => {\n        const savedNode = this.findNode(id)\n        savedNode && this.nodeGroup.set(id, { ...savedNode, lastVisualization: undefined })\n        this.update()\n    }\n\n    /**\n     * Find a modal node by id.\n     * \n     * @param id \n     */\n    private findNode = (id: string) => {\n        const node = this.nodeGroup.get(id)\n        !node && console.warn(`No modal was found with the id \"${id}\"`)\n        return node\n    }\n\n    /**\n     * Makes a modal appears.\n     * \n     * @param id \n     */\n    public show = (id: string) => {\n        const savedNode = this.findNode(id)\n        savedNode && this.nodeGroup.set(id, { ...savedNode, visible: true, lastVisualization: new Date() })\n        this.update()\n    }\n\n    /**\n     * Makes a modal disappears.\n     * \n     * @param id \n     */\n    public close = (id: string) => {\n        const savedNode = this.findNode(id)\n        savedNode && this.nodeGroup.set(id, { ...savedNode, visible: false })\n        this.update()\n    }\n}\n\n/**\n * Creates a new ModalLifecycleHandlere instance.\n * \n * @returns \n */\nexport const createModalLifecycleHandler = () => {\n    return new ModalLifecycleHandler()\n}\n"],"file":"ModalLifecycleHandler.js"}

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

@@ -4,3 +4,4 @@ export * from './ui/BaseModalView';
 export * from './ui/types';
 export * from './useModalManager';
 export * from './useLazyModalManager';
+export * from './useModalRemoteControl';

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

@@ -49,4 +49,12 @@ Object.keys(_useLazyModalManager).forEach(function (key) {
   if (key in exports && exports[key] === _useLazyModalManager[key]) return;
   exports[key] = _useLazyModalManager[key];
 });
+
+var _useModalRemoteControl = require("./useModalRemoteControl");
+
+Object.keys(_useModalRemoteControl).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useModalRemoteControl[key]) return;
+  exports[key] = _useModalRemoteControl[key];
+});
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/atoms/Modal/index.ts"],"names":[],"mappings":";;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from './ModalGroupManager'\nexport * from './ModalLifecycleHandler'\nexport * from './ui/BaseModalView'\nexport * from './ui/types'\nexport * from './useModalManager'\nexport * from './useLazyModalManager'"],"file":"index.js"}
+{"version":3,"sources":["../../../../src/components/atoms/Modal/index.ts"],"names":[],"mappings":";;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from './ModalGroupManager'\nexport * from './ModalLifecycleHandler'\nexport * from './ui/BaseModalView'\nexport * from './ui/types'\nexport * from './useModalManager'\nexport * from './useLazyModalManager'\nexport * from './useModalRemoteControl'"],"file":"index.js"}

package/dist/components/atoms/Modal/useLazyModalManager.d.ts

@@ -1,6 +1,6 @@
 import { ReactElement } from "react";
 import { IBaseModal } from "./ui/types";
-export declare const useLazyModalManager: () => {
+export declare const useLazyModalManager: (modalId?: string | undefined) => {
     requestUpdate: () => void;
     sync: (modal: ReactElement<IBaseModal>) => null;
     show: () => void;

package/dist/components/atoms/Modal/useLazyModalManager.js

@@ -9,8 +9,8 @@ var _uuid = require("uuid");
 
 var _ModalGroupManager = require("./ModalGroupManager");
 
-const useLazyModalManager = () => {
-  const [id] = (0, _react.useState)((0, _uuid.v4)());
+const useLazyModalManager = modalId => {
+  const [id] = (0, _react.useState)(modalId ?? (0, _uuid.v4)());
   const requestUpdate = (0, _react.useCallback)(() => _ModalGroupManager.modalLifecycle.update(), []);
   const sync = (0, _react.useCallback)(modal => {
     _ModalGroupManager.modalLifecycle.sync(id, () => modal);

package/dist/components/atoms/Modal/useLazyModalManager.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/atoms/Modal/useLazyModalManager.ts"],"names":["useLazyModalManager","id","requestUpdate","modalLifecycle","update","sync","modal","show","close","destroy"],"mappings":";;;;;AAAA;;AACA;;AACA;;AAWO,MAAMA,mBAAmB,GAAG,MAAM;AAErC,QAAM,CAACC,EAAD,IAAO,qBAAS,eAAT,CAAb;AAEA,QAAMC,aAAa,GAAG,wBAAY,MAAMC,kCAAeC,MAAf,EAAlB,EAA2C,EAA3C,CAAtB;AAEA,QAAMC,IAAI,GAAG,wBAAaC,KAAD,IAAqC;AAC1DH,sCAAeE,IAAf,CAAoBJ,EAApB,EAAwB,MAAMK,KAA9B;;AACA,WAAO,IAAP;AACH,GAHY,EAGV,CAACL,EAAD,CAHU,CAAb;AAKA,QAAMM,IAAI,GAAG,wBAAY,MAAM;AAC3BJ,sCAAeI,IAAf,CAAoBN,EAApB;AACH,GAFY,EAEV,CAACA,EAAD,CAFU,CAAb;AAIA,QAAMO,KAAK,GAAG,wBAAY,MAAM;AAC5BL,sCAAeK,KAAf,CAAqBP,EAArB;AACH,GAFa,EAEX,CAACA,EAAD,CAFW,CAAd;AAIA,wBAAU,MAAM;AACZ,WAAO,MAAME,kCAAeM,OAAf,CAAuBR,EAAvB,CAAb;AACH,GAFD,EAEG,EAFH;AAIA,SAAO;AACHC,IAAAA,aADG;AAEHG,IAAAA,IAFG;AAGHE,IAAAA,IAHG;AAIHC,IAAAA;AAJG,GAAP;AAMH,CA7BM","sourcesContent":["import { ReactElement, useCallback, useEffect, useState } from \"react\"\nimport { v4 as uuidv4 } from 'uuid'\nimport { modalLifecycle } from \"./ModalGroupManager\"\nimport { IBaseModal } from \"./ui/types\"\n\n/**\n * Use this hook to tell the modal lifecycle handler that you want to add\n * a new modal component. \n * \n * @param id \n * @param modal \n * @returns\n */\nexport const useLazyModalManager = () => {\n\n    const [id] = useState(uuidv4())\n\n    const requestUpdate = useCallback(() => modalLifecycle.update(), [])\n\n    const sync = useCallback((modal: ReactElement<IBaseModal>) => {\n        modalLifecycle.sync(id, () => modal)\n        return null\n    }, [id])\n\n    const show = useCallback(() => {\n        modalLifecycle.show(id)\n    }, [id])\n\n    const close = useCallback(() => {\n        modalLifecycle.close(id)\n    }, [id])\n    \n    useEffect(() => {\n        return () => modalLifecycle.destroy(id)\n    }, [])\n\n    return {\n        requestUpdate,\n        sync,\n        show,\n        close\n    }\n}"],"file":"useLazyModalManager.js"}
+{"version":3,"sources":["../../../../src/components/atoms/Modal/useLazyModalManager.ts"],"names":["useLazyModalManager","modalId","id","requestUpdate","modalLifecycle","update","sync","modal","show","close","destroy"],"mappings":";;;;;AAAA;;AACA;;AACA;;AAWO,MAAMA,mBAAmB,GAAIC,OAAD,IAAsB;AAErD,QAAM,CAACC,EAAD,IAAO,qBAASD,OAAO,IAAI,eAApB,CAAb;AAEA,QAAME,aAAa,GAAG,wBAAY,MAAMC,kCAAeC,MAAf,EAAlB,EAA2C,EAA3C,CAAtB;AAEA,QAAMC,IAAI,GAAG,wBAAaC,KAAD,IAAqC;AAC1DH,sCAAeE,IAAf,CAAoBJ,EAApB,EAAwB,MAAMK,KAA9B;;AACA,WAAO,IAAP;AACH,GAHY,EAGV,CAACL,EAAD,CAHU,CAAb;AAKA,QAAMM,IAAI,GAAG,wBAAY,MAAM;AAC3BJ,sCAAeI,IAAf,CAAoBN,EAApB;AACH,GAFY,EAEV,CAACA,EAAD,CAFU,CAAb;AAIA,QAAMO,KAAK,GAAG,wBAAY,MAAM;AAC5BL,sCAAeK,KAAf,CAAqBP,EAArB;AACH,GAFa,EAEX,CAACA,EAAD,CAFW,CAAd;AAIA,wBAAU,MAAM;AACZ,WAAO,MAAME,kCAAeM,OAAf,CAAuBR,EAAvB,CAAb;AACH,GAFD,EAEG,EAFH;AAIA,SAAO;AACHC,IAAAA,aADG;AAEHG,IAAAA,IAFG;AAGHE,IAAAA,IAHG;AAIHC,IAAAA;AAJG,GAAP;AAMH,CA7BM","sourcesContent":["import { ReactElement, useCallback, useEffect, useState } from \"react\"\nimport { v4 as uuidv4 } from 'uuid'\nimport { modalLifecycle } from \"./ModalGroupManager\"\nimport { IBaseModal } from \"./ui/types\"\n\n/**\n * Use this hook to tell the modal lifecycle handler that you want to add\n * a new modal component. \n * \n * @param id \n * @param modal \n * @returns\n */\nexport const useLazyModalManager = (modalId?: string) => {\n\n    const [id] = useState(modalId ?? uuidv4())\n\n    const requestUpdate = useCallback(() => modalLifecycle.update(), [])\n\n    const sync = useCallback((modal: ReactElement<IBaseModal>) => {\n        modalLifecycle.sync(id, () => modal)\n        return null\n    }, [id])\n\n    const show = useCallback(() => {\n        modalLifecycle.show(id)\n    }, [id])\n\n    const close = useCallback(() => {\n        modalLifecycle.close(id)\n    }, [id])\n    \n    useEffect(() => {\n        return () => modalLifecycle.destroy(id)\n    }, [])\n\n    return {\n        requestUpdate,\n        sync,\n        show,\n        close\n    }\n}"],"file":"useLazyModalManager.js"}

package/dist/components/atoms/Modal/useModalManager.d.ts

@@ -1,6 +1,6 @@
 import { ReactElement } from "react";
 import { IBaseModal } from "./ui/types";
-export declare const useModalManager: (modal: () => ReactElement<IBaseModal>) => {
+export declare const useModalManager: (modal: () => ReactElement<IBaseModal>, modalId?: string | undefined) => {
     show: () => void;
     close: () => void;
 };

package/dist/components/atoms/Modal/useModalManager.js

@@ -9,8 +9,8 @@ var _uuid = require("uuid");
 
 var _ModalGroupManager = require("./ModalGroupManager");
 
-const useModalManager = modal => {
-  const [id] = (0, _react.useState)((0, _uuid.v4)());
+const useModalManager = (modal, modalId) => {
+  const [id] = (0, _react.useState)(modalId ?? (0, _uuid.v4)());
 
   _ModalGroupManager.modalLifecycle.sync(id, modal);
 

package/dist/components/atoms/Modal/useModalManager.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/atoms/Modal/useModalManager.ts"],"names":["useModalManager","modal","id","modalLifecycle","sync","show","close","destroy"],"mappings":";;;;;AAAA;;AACA;;AACA;;AAWO,MAAMA,eAAe,GAAIC,KAAD,IAA2C;AAEtE,QAAM,CAACC,EAAD,IAAO,qBAAS,eAAT,CAAb;;AACAC,oCAAeC,IAAf,CAAoBF,EAApB,EAAwBD,KAAxB;;AAEA,QAAMI,IAAI,GAAG,wBAAY,MAAM;AAC3BF,sCAAeE,IAAf,CAAoBH,EAApB;AACH,GAFY,EAEV,CAACA,EAAD,CAFU,CAAb;AAIA,QAAMI,KAAK,GAAG,wBAAY,MAAM;AAC5BH,sCAAeG,KAAf,CAAqBJ,EAArB;AACH,GAFa,EAEX,CAACA,EAAD,CAFW,CAAd;AAIA,wBAAU,MAAM;AACZ,WAAO,MAAMC,kCAAeI,OAAf,CAAuBL,EAAvB,CAAb;AACH,GAFD,EAEG,EAFH;AAIA,SAAO;AACHG,IAAAA,IADG;AAEHC,IAAAA;AAFG,GAAP;AAIH,CArBM","sourcesContent":["import { ReactElement, useCallback, useEffect, useState } from \"react\"\nimport { v4 as uuidv4 } from 'uuid'\nimport { modalLifecycle } from \"./ModalGroupManager\"\nimport { IBaseModal } from \"./ui/types\"\n\n/**\n * Use this hook to tell the modal lifecycle handler that you want to add\n * a new modal component. \n * \n * @param id \n * @param modal \n * @returns\n */\nexport const useModalManager = (modal: () => ReactElement<IBaseModal>) => {\n\n    const [id] = useState(uuidv4())\n    modalLifecycle.sync(id, modal)\n\n    const show = useCallback(() => {\n        modalLifecycle.show(id)\n    }, [id])\n\n    const close = useCallback(() => {\n        modalLifecycle.close(id)\n    }, [id])\n    \n    useEffect(() => {\n        return () => modalLifecycle.destroy(id)\n    }, [])\n\n    return {\n        show,\n        close\n    }\n}"],"file":"useModalManager.js"}
+{"version":3,"sources":["../../../../src/components/atoms/Modal/useModalManager.ts"],"names":["useModalManager","modal","modalId","id","modalLifecycle","sync","show","close","destroy"],"mappings":";;;;;AAAA;;AACA;;AACA;;AAWO,MAAMA,eAAe,GAAG,CAACC,KAAD,EAAwCC,OAAxC,KAA6D;AAExF,QAAM,CAACC,EAAD,IAAO,qBAASD,OAAO,IAAI,eAApB,CAAb;;AACAE,oCAAeC,IAAf,CAAoBF,EAApB,EAAwBF,KAAxB;;AAEA,QAAMK,IAAI,GAAG,wBAAY,MAAM;AAC3BF,sCAAeE,IAAf,CAAoBH,EAApB;AACH,GAFY,EAEV,CAACA,EAAD,CAFU,CAAb;AAIA,QAAMI,KAAK,GAAG,wBAAY,MAAM;AAC5BH,sCAAeG,KAAf,CAAqBJ,EAArB;AACH,GAFa,EAEX,CAACA,EAAD,CAFW,CAAd;AAIA,wBAAU,MAAM;AACZ,WAAO,MAAMC,kCAAeI,OAAf,CAAuBL,EAAvB,CAAb;AACH,GAFD,EAEG,EAFH;AAIA,SAAO;AACHG,IAAAA,IADG;AAEHC,IAAAA;AAFG,GAAP;AAIH,CArBM","sourcesContent":["import { ReactElement, useCallback, useEffect, useState } from \"react\"\nimport { v4 as uuidv4 } from 'uuid'\nimport { modalLifecycle } from \"./ModalGroupManager\"\nimport { IBaseModal } from \"./ui/types\"\n\n/**\n * Use this hook to tell the modal lifecycle handler that you want to add\n * a new modal component. \n * \n * @param id \n * @param modal \n * @returns\n */\nexport const useModalManager = (modal: () => ReactElement<IBaseModal>, modalId?: string) => {\n\n    const [id] = useState(modalId ?? uuidv4())\n    modalLifecycle.sync(id, modal)\n\n    const show = useCallback(() => {\n        modalLifecycle.show(id)\n    }, [id])\n\n    const close = useCallback(() => {\n        modalLifecycle.close(id)\n    }, [id])\n    \n    useEffect(() => {\n        return () => modalLifecycle.destroy(id)\n    }, [])\n\n    return {\n        show,\n        close\n    }\n}"],"file":"useModalManager.js"}

package/dist/components/atoms/Modal/useModalRemoteControl.d.ts

@@ -0,0 +1,4 @@
+export declare const useModalRemoteControl: (modalId: string) => {
+    show: () => void;
+    close: () => void;
+};

package/dist/components/atoms/Modal/useModalRemoteControl.js

@@ -0,0 +1,24 @@
+"use strict";
+
+exports.__esModule = true;
+exports.useModalRemoteControl = void 0;
+
+var _react = require("react");
+
+var _ModalGroupManager = require("./ModalGroupManager");
+
+const useModalRemoteControl = modalId => {
+  const show = (0, _react.useCallback)(() => {
+    _ModalGroupManager.modalLifecycle.show(modalId);
+  }, [modalId]);
+  const close = (0, _react.useCallback)(() => {
+    _ModalGroupManager.modalLifecycle.close(modalId);
+  }, [modalId]);
+  return {
+    show,
+    close
+  };
+};
+
+exports.useModalRemoteControl = useModalRemoteControl;
+//# sourceMappingURL=useModalRemoteControl.js.map

package/dist/components/atoms/Modal/useModalRemoteControl.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/atoms/Modal/useModalRemoteControl.ts"],"names":["useModalRemoteControl","modalId","show","modalLifecycle","close"],"mappings":";;;;;AAAA;;AACA;;AASO,MAAMA,qBAAqB,GAAIC,OAAD,IAAqB;AAEtD,QAAMC,IAAI,GAAG,wBAAY,MAAM;AAC3BC,sCAAeD,IAAf,CAAoBD,OAApB;AACH,GAFY,EAEV,CAACA,OAAD,CAFU,CAAb;AAIA,QAAMG,KAAK,GAAG,wBAAY,MAAM;AAC5BD,sCAAeC,KAAf,CAAqBH,OAArB;AACH,GAFa,EAEX,CAACA,OAAD,CAFW,CAAd;AAIA,SAAO;AACHC,IAAAA,IADG;AAEHE,IAAAA;AAFG,GAAP;AAKH,CAfM","sourcesContent":["import { useCallback } from \"react\"\nimport { modalLifecycle } from \"./ModalGroupManager\"\n\n/**\n * Use it to control a specific modal wherever it's.\n * Just provide an id of a specific instance.\n * \n * @param modalId \n * @returns \n */\nexport const useModalRemoteControl = (modalId: string) => {\n\n    const show = useCallback(() => {\n        modalLifecycle.show(modalId)\n    }, [modalId])\n\n    const close = useCallback(() => {\n        modalLifecycle.close(modalId)\n    }, [modalId])\n\n    return {\n        show,\n        close\n    }\n\n}"],"file":"useModalRemoteControl.js"}

package/dist/index.d.ts

@@ -2,6 +2,7 @@ export * from '@tecsinapse/react-core';
 export { Header, HeaderProps } from './components/atoms/Header';
 export { Select, SelectNativeProps } from './components/molecules/Select';
 export { Input, InputNativeProps } from './components/atoms/Input';
+export { InputMask, InputMaskNativeProps } from './components/atoms/InputMask';
 export { TextArea, TextAreaProps } from './components/atoms/TextArea';
 export { Text, TextNativeProps } from './components/atoms/Text';
 export { Error, Loading, Success, Button, ButtonNativeProps, } from './components/atoms/Button';
@@ -17,5 +18,5 @@ export { DateTimePicker, NativeDateTimePickerProps, } from './components/molecul
 export { Avatar } from './components/atoms/Avatar';
 export { Calendar } from './components/molecules/Calendar';
 export { DateTimeSelector } from './components/molecules/DateTimeSelector';
-export { ModalGroupManager, ModalView, ModalLifecycleHandler, useLazyModalManager, useModalManager, IBaseModal, } from './components/atoms/Modal';
+export { ModalGroupManager, ModalView, ModalLifecycleHandler, useLazyModalManager, useModalManager, useModalRemoteControl, IBaseModal, } from './components/atoms/Modal';
 export { Skeleton, SkeletonProps } from './components/atoms/Skeleton';

package/dist/index.js

@@ -8,6 +8,8 @@ var _exportNames = {
   SelectNativeProps: true,
   Input: true,
   InputNativeProps: true,
+  InputMask: true,
+  InputMaskNativeProps: true,
   TextArea: true,
   TextAreaProps: true,
   Text: true,
@@ -42,11 +44,12 @@ var _exportNames = {
   ModalLifecycleHandler: true,
   useLazyModalManager: true,
   useModalManager: true,
+  useModalRemoteControl: true,
   IBaseModal: true,
   Skeleton: true,
   SkeletonProps: true
 };
-exports.SkeletonProps = exports.Skeleton = exports.IBaseModal = exports.useModalManager = exports.useLazyModalManager = exports.ModalLifecycleHandler = exports.ModalView = exports.ModalGroupManager = exports.DateTimeSelector = exports.Calendar = exports.Avatar = exports.NativeDateTimePickerProps = exports.DateTimePicker = exports.NativeDatePickerProps = exports.DatePicker = exports.SnackbarNativeProps = exports.Snackbar = exports.BadgeNativeProps = exports.Badge = exports.SnappingSliderProps = exports.SnappingSlider = exports.TagProps = exports.Tag = exports.BottomNavigatorProps = exports.BottomNavigator = exports.InputPasswordNativeProps = exports.InputPassword = exports.GroupButtonOption = exports.ButtonNativeProps = exports.Button = exports.Success = exports.Loading = exports.Error = exports.TextNativeProps = exports.Text = exports.TextAreaProps = exports.TextArea = exports.InputNativeProps = exports.Input = exports.SelectNativeProps = exports.Select = exports.HeaderProps = exports.Header = void 0;
+exports.SkeletonProps = exports.Skeleton = exports.IBaseModal = exports.useModalRemoteControl = exports.useModalManager = exports.useLazyModalManager = exports.ModalLifecycleHandler = exports.ModalView = exports.ModalGroupManager = exports.DateTimeSelector = exports.Calendar = exports.Avatar = exports.NativeDateTimePickerProps = exports.DateTimePicker = exports.NativeDatePickerProps = exports.DatePicker = exports.SnackbarNativeProps = exports.Snackbar = exports.BadgeNativeProps = exports.Badge = exports.SnappingSliderProps = exports.SnappingSlider = exports.TagProps = exports.Tag = exports.BottomNavigatorProps = exports.BottomNavigator = exports.InputPasswordNativeProps = exports.InputPassword = exports.GroupButtonOption = exports.ButtonNativeProps = exports.Button = exports.Success = exports.Loading = exports.Error = exports.TextNativeProps = exports.Text = exports.TextAreaProps = exports.TextArea = exports.InputMaskNativeProps = exports.InputMask = exports.InputNativeProps = exports.Input = exports.SelectNativeProps = exports.Select = exports.HeaderProps = exports.Header = void 0;
 
 var _reactCore = require("@tecsinapse/react-core");
 
@@ -72,6 +75,11 @@ var _Input = require("./components/atoms/Input");
 exports.Input = _Input.Input;
 exports.InputNativeProps = _Input.InputNativeProps;
 
+var _InputMask = require("./components/atoms/InputMask");
+
+exports.InputMask = _InputMask.InputMask;
+exports.InputMaskNativeProps = _InputMask.InputMaskNativeProps;
+
 var _TextArea = require("./components/atoms/TextArea");
 
 exports.TextArea = _TextArea.TextArea;
@@ -153,6 +161,7 @@ exports.ModalView = _Modal.ModalView;
 exports.ModalLifecycleHandler = _Modal.ModalLifecycleHandler;
 exports.useLazyModalManager = _Modal.useLazyModalManager;
 exports.useModalManager = _Modal.useModalManager;
+exports.useModalRemoteControl = _Modal.useModalRemoteControl;
 exports.IBaseModal = _Modal.IBaseModal;
 
 var _Skeleton = require("./components/atoms/Skeleton");

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;;;;AACA;;;;;AACA;;;;;AACA;;;;;AACA;;;;;AACA;;;;;;;;AAOA;;;;AACA;;;;;AAIA;;;;;AAIA;;;;;AACA;;;;;AAIA;;;;;AACA;;;;;AACA;;;;;AAIA;;;;;AAIA;;;;AACA;;;;AACA;;;;AACA;;;;;;;;;AAQA","sourcesContent":["export * from '@tecsinapse/react-core';\nexport { Header, HeaderProps } from './components/atoms/Header';\nexport { Select, SelectNativeProps } from './components/molecules/Select';\nexport { Input, InputNativeProps } from './components/atoms/Input';\nexport { TextArea, TextAreaProps } from './components/atoms/TextArea';\nexport { Text, TextNativeProps } from './components/atoms/Text';\nexport {\n  Error,\n  Loading,\n  Success,\n  Button,\n  ButtonNativeProps,\n} from './components/atoms/Button';\nexport { GroupButtonOption } from './components/atoms/GroupButton';\nexport {\n  InputPassword,\n  InputPasswordNativeProps,\n} from './components/molecules/InputPassword';\nexport {\n  BottomNavigator,\n  BottomNavigatorProps,\n} from './components/atoms/BottomNavigator';\nexport { Tag, TagProps } from './components/atoms/Tag';\nexport {\n  SnappingSlider,\n  SnappingSliderProps,\n} from './components/atoms/SnappingSlider';\nexport { Badge, BadgeNativeProps } from './components/atoms/Badge';\nexport { Snackbar, SnackbarNativeProps } from './components/molecules/Snackbar';\nexport {\n  DatePicker,\n  NativeDatePickerProps,\n} from './components/molecules/DatePicker';\nexport {\n  DateTimePicker,\n  NativeDateTimePickerProps,\n} from './components/molecules/DateTimePicker';\nexport { Avatar } from './components/atoms/Avatar';\nexport { Calendar } from './components/molecules/Calendar';\nexport { DateTimeSelector } from './components/molecules/DateTimeSelector';\nexport {\n  ModalGroupManager,\n  ModalView,\n  ModalLifecycleHandler,\n  useLazyModalManager,\n  useModalManager,\n  IBaseModal,\n} from './components/atoms/Modal';\nexport { Skeleton, SkeletonProps } from './components/atoms/Skeleton';\n"],"file":"index.js"}
+{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;;;;AACA;;;;;AACA;;;;;AACA;;;;;AACA;;;;;AACA;;;;;AACA;;;;;;;;AAOA;;;;AACA;;;;;AAIA;;;;;AAIA;;;;;AACA;;;;;AAIA;;;;;AACA;;;;;AACA;;;;;AAIA;;;;;AAIA;;;;AACA;;;;AACA;;;;AACA;;;;;;;;;;AASA","sourcesContent":["export * from '@tecsinapse/react-core';\nexport { Header, HeaderProps } from './components/atoms/Header';\nexport { Select, SelectNativeProps } from './components/molecules/Select';\nexport { Input, InputNativeProps } from './components/atoms/Input';\nexport { InputMask, InputMaskNativeProps } from './components/atoms/InputMask';\nexport { TextArea, TextAreaProps } from './components/atoms/TextArea';\nexport { Text, TextNativeProps } from './components/atoms/Text';\nexport {\n  Error,\n  Loading,\n  Success,\n  Button,\n  ButtonNativeProps,\n} from './components/atoms/Button';\nexport { GroupButtonOption } from './components/atoms/GroupButton';\nexport {\n  InputPassword,\n  InputPasswordNativeProps,\n} from './components/molecules/InputPassword';\nexport {\n  BottomNavigator,\n  BottomNavigatorProps,\n} from './components/atoms/BottomNavigator';\nexport { Tag, TagProps } from './components/atoms/Tag';\nexport {\n  SnappingSlider,\n  SnappingSliderProps,\n} from './components/atoms/SnappingSlider';\nexport { Badge, BadgeNativeProps } from './components/atoms/Badge';\nexport { Snackbar, SnackbarNativeProps } from './components/molecules/Snackbar';\nexport {\n  DatePicker,\n  NativeDatePickerProps,\n} from './components/molecules/DatePicker';\nexport {\n  DateTimePicker,\n  NativeDateTimePickerProps,\n} from './components/molecules/DateTimePicker';\nexport { Avatar } from './components/atoms/Avatar';\nexport { Calendar } from './components/molecules/Calendar';\nexport { DateTimeSelector } from './components/molecules/DateTimeSelector';\nexport {\n  ModalGroupManager,\n  ModalView,\n  ModalLifecycleHandler,\n  useLazyModalManager,\n  useModalManager,\n  useModalRemoteControl,\n  IBaseModal,\n} from './components/atoms/Modal';\nexport { Skeleton, SkeletonProps } from './components/atoms/Skeleton';\n"],"file":"index.js"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tecsinapse/react-native-kit",
   "description": "TecSinapse React Native components",
-  "version": "1.16.2",
+  "version": "1.17.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "license": "MIT",
@@ -13,7 +13,7 @@
   "dependencies": {
     "@emotion/native": "^11.0.0",
     "@emotion/react": "^11.4.1",
-    "@tecsinapse/react-core": "^1.15.1",
+    "@tecsinapse/react-core": "^1.16.0",
     "react-native-linear-gradient": "^2.5.6"
   },
   "repository": {
@@ -36,5 +36,5 @@
   "devDependencies": {
     "@types/uuid": "^8.3.3"
   },
-  "gitHead": "b2b885237c90b782b17e4081871b806b6191e3f2"
+  "gitHead": "ae6f88727b5e35210ada1c7ea0b54d24094af22c"
 }

package/src/components/atoms/InputMask/InputMask.tsx

@@ -0,0 +1,96 @@
+import {
+  FontStackType,
+  FontWeightType,
+  Hint,
+  InputContainerProps,
+  InputMaskElementProps,
+  useInputFocus,
+} from '@tecsinapse/react-core';
+import React, { FC } from 'react';
+import { View } from 'react-native';
+import { StyledInputContainer, StyledNativeInputMask } from './styled';
+import { Text } from '../Text';
+
+export interface InputMaskNativeProps
+  extends Omit<InputMaskElementProps, 'style'>,
+    InputContainerProps {
+  inputFontStack?: FontStackType;
+  inputFontWeight?: FontWeightType;
+}
+
+const InputMask: FC<InputMaskNativeProps> = React.forwardRef(
+  (
+    {
+      label,
+      labelColor,
+      labelColorVariant,
+      labelColorTone,
+      labelTypography,
+      labelStack,
+      labelWeight,
+      leftComponent,
+      rightComponent,
+      disabled,
+      style,
+      borderColor,
+      borderColorGradation,
+      inputFontStack = 'default',
+      inputFontWeight = 'bold',
+      inputContainerStyle,
+      variant = 'default',
+      hintComponent,
+      hint,
+      onFocus,
+      onBlur,
+      ...rest
+    },
+    ref
+  ) => {
+    const _hint = hintComponent || (
+      <Hint TextComponent={Text} text={hint} variant={variant} />
+    );
+    const { focused, handleBlur, handleFocus } = useInputFocus(
+      onFocus,
+      onBlur,
+      !disabled
+    );
+
+    return (
+      <View style={style}>
+        <StyledInputContainer
+          label={label}
+          labelColor={labelColor}
+          labelColorVariant={labelColorVariant}
+          labelColorTone={labelColorTone}
+          labelTypography={labelTypography}
+          labelStack={labelStack}
+          labelWeight={labelWeight}
+          LabelComponent={Text}
+          leftComponent={leftComponent}
+          rightComponent={rightComponent}
+          borderColor={borderColor}
+          borderColorGradation={borderColorGradation}
+          inputContainerStyle={inputContainerStyle}
+          focused={focused}
+          disabled={disabled}
+          variant={variant}
+        >
+          <StyledNativeInputMask
+            {...rest}
+            ref={ref}
+            fontStack={inputFontStack}
+            fontWeight={inputFontWeight}
+            disabled={disabled}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+          />
+        </StyledInputContainer>
+        {hint && _hint}
+      </View>
+    );
+  }
+);
+
+InputMask.displayName = 'InputMask';
+
+export default InputMask;

package/src/components/atoms/InputMask/index.ts

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

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

@@ -0,0 +1,25 @@
+import styled from '@emotion/native';
+import {
+  InputContainer,
+  InputMaskElement,
+  RFValueStr,
+  StyleProps,
+} from '@tecsinapse/react-core';
+import { Font, fontStyles } from '../Text/styled';
+import { InputMaskNativeProps } from './InputMask';
+
+export const StyledInputContainer = styled(InputContainer)<Partial<StyleProps>>`
+  min-height: ${RFValueStr('50px')};
+`;
+
+const StyledNativeInputMaskBase = styled(InputMaskElement)<
+  Partial<InputMaskNativeProps> & Partial<StyleProps>
+>`
+  height: ${({ theme }) => theme.typography.h5.lineHeight};
+  width: 100%;
+  padding: 0;
+`;
+
+export const StyledNativeInputMask = styled(StyledNativeInputMaskBase)<
+  Font & Partial<InputMaskNativeProps> & Partial<StyleProps>
+>(fontStyles);

package/src/components/atoms/Modal/ModalLifecycleHandler.ts

@@ -81,7 +81,7 @@ export class ModalLifecycleHandler {
      */
     public sync = (id: string, modal: () => ReactElement<IBaseModal>) => {
         if (this.nodeGroup.has(id)) {
-            const savedNode = this.nodeGroup.get(id)
+            const savedNode = this.findNode(id)
             savedNode && this.nodeGroup.set(id, { ...savedNode, modal })
             return
         }
@@ -105,18 +105,29 @@ export class ModalLifecycleHandler {
      * @param id 
      */
     private remove = (id: string) => {
-        const savedNode = this.nodeGroup.get(id)
+        const savedNode = this.findNode(id)
         savedNode && this.nodeGroup.set(id, { ...savedNode, lastVisualization: undefined })
         this.update()
     }
 
+    /**
+     * Find a modal node by id.
+     * 
+     * @param id 
+     */
+    private findNode = (id: string) => {
+        const node = this.nodeGroup.get(id)
+        !node && console.warn(`No modal was found with the id "${id}"`)
+        return node
+    }
+
     /**
      * Makes a modal appears.
      * 
      * @param id 
      */
     public show = (id: string) => {
-        const savedNode = this.nodeGroup.get(id)
+        const savedNode = this.findNode(id)
         savedNode && this.nodeGroup.set(id, { ...savedNode, visible: true, lastVisualization: new Date() })
         this.update()
     }
@@ -127,7 +138,7 @@ export class ModalLifecycleHandler {
      * @param id 
      */
     public close = (id: string) => {
-        const savedNode = this.nodeGroup.get(id)
+        const savedNode = this.findNode(id)
         savedNode && this.nodeGroup.set(id, { ...savedNode, visible: false })
         this.update()
     }

package/src/components/atoms/Modal/index.ts

@@ -3,4 +3,5 @@ export * from './ModalLifecycleHandler'
 export * from './ui/BaseModalView'
 export * from './ui/types'
 export * from './useModalManager'
-export * from './useLazyModalManager'
+export * from './useLazyModalManager'
+export * from './useModalRemoteControl'

package/src/components/atoms/Modal/useLazyModalManager.ts

@@ -11,9 +11,9 @@ import { IBaseModal } from "./ui/types"
  * @param modal 
  * @returns
  */
-export const useLazyModalManager = () => {
+export const useLazyModalManager = (modalId?: string) => {
 
-    const [id] = useState(uuidv4())
+    const [id] = useState(modalId ?? uuidv4())
 
     const requestUpdate = useCallback(() => modalLifecycle.update(), [])
 

package/src/components/atoms/Modal/useModalManager.ts

@@ -11,9 +11,9 @@ import { IBaseModal } from "./ui/types"
  * @param modal 
  * @returns
  */
-export const useModalManager = (modal: () => ReactElement<IBaseModal>) => {
+export const useModalManager = (modal: () => ReactElement<IBaseModal>, modalId?: string) => {
 
-    const [id] = useState(uuidv4())
+    const [id] = useState(modalId ?? uuidv4())
     modalLifecycle.sync(id, modal)
 
     const show = useCallback(() => {

package/src/components/atoms/Modal/useModalRemoteControl.ts

@@ -0,0 +1,26 @@
+import { useCallback } from "react"
+import { modalLifecycle } from "./ModalGroupManager"
+
+/**
+ * Use it to control a specific modal wherever it's.
+ * Just provide an id of a specific instance.
+ * 
+ * @param modalId 
+ * @returns 
+ */
+export const useModalRemoteControl = (modalId: string) => {
+
+    const show = useCallback(() => {
+        modalLifecycle.show(modalId)
+    }, [modalId])
+
+    const close = useCallback(() => {
+        modalLifecycle.close(modalId)
+    }, [modalId])
+
+    return {
+        show,
+        close
+    }
+
+}

package/src/index.ts

@@ -2,6 +2,7 @@ export * from '@tecsinapse/react-core';
 export { Header, HeaderProps } from './components/atoms/Header';
 export { Select, SelectNativeProps } from './components/molecules/Select';
 export { Input, InputNativeProps } from './components/atoms/Input';
+export { InputMask, InputMaskNativeProps } from './components/atoms/InputMask';
 export { TextArea, TextAreaProps } from './components/atoms/TextArea';
 export { Text, TextNativeProps } from './components/atoms/Text';
 export {
@@ -44,6 +45,7 @@ export {
   ModalLifecycleHandler,
   useLazyModalManager,
   useModalManager,
+  useModalRemoteControl,
   IBaseModal,
 } from './components/atoms/Modal';
 export { Skeleton, SkeletonProps } from './components/atoms/Skeleton';