@tecsinapse/cortex-react 1.3.0-beta.26 → 1.3.0-beta.27

package/dist/cjs/components/Input/Mask.js

@@ -4,11 +4,13 @@ var React = require('react');
 var reactImask = require('react-imask');
 var index = require('./index.js');
 
-const useIMaskLocal = (mask, inputProps, ref, unmaskedRef) => {
+const useIMaskLocal = (mask, inputProps, ref, onChangeMask) => {
   const { ref: iMaskRef, maskRef } = reactImask.useIMask(mask, {
-    onAccept: () => {
-      if (unmaskedRef) unmaskedRef.current = maskRef.current.unmaskedValue;
-      return inputProps.onChange?.(maskRef.current);
+    onAccept: (value, mask2) => {
+      onChangeMask?.({
+        unmaskedValue: mask2._unmaskedValue,
+        value
+      });
     },
     ref: ref ? ref : React.createRef()
   });
@@ -21,33 +23,11 @@ const useIMaskLocal = (mask, inputProps, ref, unmaskedRef) => {
     iMaskRef
   };
 };
-const InputMaskExpression = React.forwardRef(({ mask, unmaskedRef, ...rest }, ref) => {
-  const { iMaskRef } = useIMaskLocal({ mask }, rest, ref, unmaskedRef);
-  return /* @__PURE__ */ React.createElement(index.Input.Root, { ...rest, ref: iMaskRef });
-});
-const InputMaskNumber = React.forwardRef(({ unmaskedRef, ...rest }, ref) => {
-  const mask = { mask: Number, scale: 2 };
-  const { iMaskRef } = useIMaskLocal(mask, rest, ref, unmaskedRef);
-  return /* @__PURE__ */ React.createElement(index.Input.Root, { ...rest, ref: iMaskRef });
-});
-const InputMaskCurrency = React.forwardRef(({ unmaskedRef, ...rest }, ref) => {
-  const mask = {
-    mask: "R$ num",
-    blocks: {
-      num: {
-        mask: Number,
-        scale: 2,
-        thousandsSeparator: ".",
-        padFractionalZeros: true,
-        radix: ",",
-        mapToRadix: ["."]
-      }
-    }
-  };
-  const { iMaskRef } = useIMaskLocal(mask, rest, ref, unmaskedRef);
-  return /* @__PURE__ */ React.createElement(index.Input.Root, { ...rest, ref: iMaskRef });
-});
+const InputMask = React.forwardRef(
+  ({ mask, onChange, ...rest }, ref) => {
+    const { iMaskRef } = useIMaskLocal(mask, rest, ref, onChange);
+    return /* @__PURE__ */ React.createElement(index.Input.Root, { ...rest, ref: iMaskRef });
+  }
+);
 
-exports.InputMaskCurrency = InputMaskCurrency;
-exports.InputMaskExpression = InputMaskExpression;
-exports.InputMaskNumber = InputMaskNumber;
+exports.InputMask = InputMask;

package/dist/cjs/components/Input/index.js

@@ -15,9 +15,7 @@ const Input = {
   Left: Left.InputLeft,
   Right: Right.InputRight,
   Search: Search.InputSearch,
-  MaskCurrency: Mask.InputMaskCurrency,
-  MaskNumber: Mask.InputMaskNumber,
-  MaskExpression: Mask.InputMaskExpression
+  Mask: Mask.InputMask
 };
 
 exports.Input = Input;

package/dist/cjs/components/Input/masks.js

@@ -0,0 +1,43 @@
+'use strict';
+
+const ExpressionMasks = {
+  CPF: "000.000.000-00",
+  CNPJ: "00.000.000/0000-00",
+  PHONE: "(00) 0000-0000",
+  PHONE_EXTENDED: "(00) 00000-0000",
+  DATE: "00/00/0000",
+  CEP: "00000-000"
+};
+const NumberIMask = { mask: Number, scale: 2 };
+const CurrencyIMask = {
+  mask: "R$ num",
+  blocks: {
+    num: {
+      mask: Number,
+      scale: 2,
+      thousandsSeparator: ".",
+      padFractionalZeros: true,
+      radix: ",",
+      mapToRadix: ["."]
+    }
+  }
+};
+const PercentageIMask = {
+  mask: "num %",
+  lazy: false,
+  blocks: {
+    num: {
+      mask: Number,
+      scale: 2,
+      thousandsSeparator: ".",
+      padFractionalZeros: true,
+      radix: ",",
+      mapToRadix: ["."]
+    }
+  }
+};
+
+exports.CurrencyIMask = CurrencyIMask;
+exports.ExpressionMasks = ExpressionMasks;
+exports.NumberIMask = NumberIMask;
+exports.PercentageIMask = PercentageIMask;

package/dist/cjs/index.js

@@ -48,6 +48,7 @@ var useSelectOptions = require('./hooks/useSelectOptions.js');
 var SnackbarSonner = require('./service/SnackbarSonner.js');
 var MenubarProvider = require('./provider/MenubarProvider.js');
 var SnackbarProvider = require('./provider/SnackbarProvider.js');
+var masks = require('./components/Input/masks.js');
 
 
 
@@ -109,3 +110,7 @@ exports.MenubarProvider = MenubarProvider.MenubarProvider;
 exports.useMenubar = MenubarProvider.useMenubar;
 exports.SnackbarProvider = SnackbarProvider.SnackbarProvider;
 exports.useSnackbar = SnackbarProvider.useSnackbar;
+exports.CurrencyIMask = masks.CurrencyIMask;
+exports.ExpressionMasks = masks.ExpressionMasks;
+exports.NumberIMask = masks.NumberIMask;
+exports.PercentageIMask = masks.PercentageIMask;

package/dist/esm/components/Input/Mask.js

@@ -2,11 +2,13 @@ import React__default, { createRef, useEffect } from 'react';
 import { useIMask } from 'react-imask';
 import { Input } from './index.js';
 
-const useIMaskLocal = (mask, inputProps, ref, unmaskedRef) => {
+const useIMaskLocal = (mask, inputProps, ref, onChangeMask) => {
   const { ref: iMaskRef, maskRef } = useIMask(mask, {
-    onAccept: () => {
-      if (unmaskedRef) unmaskedRef.current = maskRef.current.unmaskedValue;
-      return inputProps.onChange?.(maskRef.current);
+    onAccept: (value, mask2) => {
+      onChangeMask?.({
+        unmaskedValue: mask2._unmaskedValue,
+        value
+      });
     },
     ref: ref ? ref : createRef()
   });
@@ -19,31 +21,11 @@ const useIMaskLocal = (mask, inputProps, ref, unmaskedRef) => {
     iMaskRef
   };
 };
-const InputMaskExpression = React__default.forwardRef(({ mask, unmaskedRef, ...rest }, ref) => {
-  const { iMaskRef } = useIMaskLocal({ mask }, rest, ref, unmaskedRef);
-  return /* @__PURE__ */ React__default.createElement(Input.Root, { ...rest, ref: iMaskRef });
-});
-const InputMaskNumber = React__default.forwardRef(({ unmaskedRef, ...rest }, ref) => {
-  const mask = { mask: Number, scale: 2 };
-  const { iMaskRef } = useIMaskLocal(mask, rest, ref, unmaskedRef);
-  return /* @__PURE__ */ React__default.createElement(Input.Root, { ...rest, ref: iMaskRef });
-});
-const InputMaskCurrency = React__default.forwardRef(({ unmaskedRef, ...rest }, ref) => {
-  const mask = {
-    mask: "R$ num",
-    blocks: {
-      num: {
-        mask: Number,
-        scale: 2,
-        thousandsSeparator: ".",
-        padFractionalZeros: true,
-        radix: ",",
-        mapToRadix: ["."]
-      }
-    }
-  };
-  const { iMaskRef } = useIMaskLocal(mask, rest, ref, unmaskedRef);
-  return /* @__PURE__ */ React__default.createElement(Input.Root, { ...rest, ref: iMaskRef });
-});
+const InputMask = React__default.forwardRef(
+  ({ mask, onChange, ...rest }, ref) => {
+    const { iMaskRef } = useIMaskLocal(mask, rest, ref, onChange);
+    return /* @__PURE__ */ React__default.createElement(Input.Root, { ...rest, ref: iMaskRef });
+  }
+);
 
-export { InputMaskCurrency, InputMaskExpression, InputMaskNumber };
+export { InputMask };

package/dist/esm/components/Input/index.js

@@ -1,7 +1,7 @@
 import { InputBox } from './Box.js';
 import { InputFace } from './Face.js';
 import { InputLeft } from './Left.js';
-import { InputMaskCurrency, InputMaskNumber, InputMaskExpression } from './Mask.js';
+import { InputMask } from './Mask.js';
 import { InputRight } from './Right.js';
 import { InputRoot } from './Root.js';
 import { InputSearch } from './Search.js';
@@ -13,9 +13,7 @@ const Input = {
   Left: InputLeft,
   Right: InputRight,
   Search: InputSearch,
-  MaskCurrency: InputMaskCurrency,
-  MaskNumber: InputMaskNumber,
-  MaskExpression: InputMaskExpression
+  Mask: InputMask
 };
 
 export { Input };

package/dist/esm/components/Input/masks.js

@@ -0,0 +1,38 @@
+const ExpressionMasks = {
+  CPF: "000.000.000-00",
+  CNPJ: "00.000.000/0000-00",
+  PHONE: "(00) 0000-0000",
+  PHONE_EXTENDED: "(00) 00000-0000",
+  DATE: "00/00/0000",
+  CEP: "00000-000"
+};
+const NumberIMask = { mask: Number, scale: 2 };
+const CurrencyIMask = {
+  mask: "R$ num",
+  blocks: {
+    num: {
+      mask: Number,
+      scale: 2,
+      thousandsSeparator: ".",
+      padFractionalZeros: true,
+      radix: ",",
+      mapToRadix: ["."]
+    }
+  }
+};
+const PercentageIMask = {
+  mask: "num %",
+  lazy: false,
+  blocks: {
+    num: {
+      mask: Number,
+      scale: 2,
+      thousandsSeparator: ".",
+      padFractionalZeros: true,
+      radix: ",",
+      mapToRadix: ["."]
+    }
+  }
+};
+
+export { CurrencyIMask, ExpressionMasks, NumberIMask, PercentageIMask };

package/dist/esm/index.js

@@ -46,3 +46,4 @@ export { useSelectOptions } from './hooks/useSelectOptions.js';
 export { SnackbarSonner } from './service/SnackbarSonner.js';
 export { MenubarProvider, useMenubar } from './provider/MenubarProvider.js';
 export { SnackbarProvider, useSnackbar } from './provider/SnackbarProvider.js';
+export { CurrencyIMask, ExpressionMasks, NumberIMask, PercentageIMask } from './components/Input/masks.js';

package/dist/types/components/Input/Mask.d.ts

@@ -1,5 +1,3 @@
 import React from 'react';
-import { InputMaskExpressionProps, InputMaskProps } from './types';
-export declare const InputMaskExpression: React.ForwardRefExoticComponent<InputMaskExpressionProps & React.RefAttributes<HTMLInputElement>>;
-export declare const InputMaskNumber: React.ForwardRefExoticComponent<InputMaskProps & React.RefAttributes<HTMLInputElement>>;
-export declare const InputMaskCurrency: React.ForwardRefExoticComponent<InputMaskProps & React.RefAttributes<HTMLInputElement>>;
+import { InputMaskProps } from './types';
+export declare const InputMask: React.ForwardRefExoticComponent<InputMaskProps & React.RefAttributes<HTMLInputElement>>;

package/dist/types/components/Input/index.d.ts

@@ -5,8 +5,7 @@ export declare const Input: {
     Left: import("react").ForwardRefExoticComponent<import("./types").InputLeftProps & import("react").RefAttributes<HTMLDivElement>>;
     Right: import("react").ForwardRefExoticComponent<import("./types").InputRightProps & import("react").RefAttributes<HTMLDivElement>>;
     Search: import("react").ForwardRefExoticComponent<import("./types").InputSearchProps & import("react").RefAttributes<HTMLInputElement>>;
-    MaskCurrency: import("react").ForwardRefExoticComponent<import("./types").InputMaskProps & import("react").RefAttributes<HTMLInputElement>>;
-    MaskNumber: import("react").ForwardRefExoticComponent<import("./types").InputMaskProps & import("react").RefAttributes<HTMLInputElement>>;
-    MaskExpression: import("react").ForwardRefExoticComponent<import("./types").InputMaskExpressionProps & import("react").RefAttributes<HTMLInputElement>>;
+    Mask: import("react").ForwardRefExoticComponent<import("./types").InputMaskProps & import("react").RefAttributes<HTMLInputElement>>;
 };
+export * from './masks';
 export * from './types';

package/dist/types/components/Input/masks.d.ts

@@ -0,0 +1,39 @@
+export declare const ExpressionMasks: {
+    CPF: string;
+    CNPJ: string;
+    PHONE: string;
+    PHONE_EXTENDED: string;
+    DATE: string;
+    CEP: string;
+};
+export declare const NumberIMask: {
+    mask: NumberConstructor;
+    scale: number;
+};
+export declare const CurrencyIMask: {
+    mask: string;
+    blocks: {
+        num: {
+            mask: NumberConstructor;
+            scale: number;
+            thousandsSeparator: string;
+            padFractionalZeros: boolean;
+            radix: string;
+            mapToRadix: string[];
+        };
+    };
+};
+export declare const PercentageIMask: {
+    mask: string;
+    lazy: boolean;
+    blocks: {
+        num: {
+            mask: NumberConstructor;
+            scale: number;
+            thousandsSeparator: string;
+            padFractionalZeros: boolean;
+            radix: string;
+            mapToRadix: string[];
+        };
+    };
+};

package/dist/types/components/Input/types.d.ts

@@ -1,5 +1,4 @@
 import { InputBaseVariants } from '@tecsinapse/cortex-core';
-import { MutableRefObject } from 'react';
 export interface InputPropsBase {
     variants?: InputBaseVariants;
     label?: string;
@@ -19,9 +18,17 @@ export interface InputRightProps extends React.HTMLAttributes<HTMLDivElement> {
 export interface InputSearchProps extends InputProps {
     bounceTimeout?: number;
 }
-export interface InputMaskProps extends InputProps {
-    unmaskedRef?: MutableRefObject<string>;
+export type InputMaskEvent = {
+    value: string;
+    unmaskedValue: string;
+};
+export interface Mask extends Record<string, any> {
+    mask: any;
+}
+export interface InputMaskProps extends Omit<InputProps, 'onChange'> {
+    onChange?: (e: InputMaskEvent) => void;
+    mask: Mask;
 }
 export interface InputMaskExpressionProps extends InputMaskProps {
-    mask: any;
+    mask: Mask;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tecsinapse/cortex-react",
-  "version": "1.3.0-beta.26",
+  "version": "1.3.0-beta.27",
   "description": "React components based in @tecsinapse/cortex-core",
   "license": "MIT",
   "main": "dist/esm/index.js",
@@ -43,5 +43,5 @@
     "react-dom": ">=18.0.0",
     "tailwind": ">=3.3.0"
   },
-  "gitHead": "4a75bfc17fd179e230c266d71cd7b1d7d82d2df5"
+  "gitHead": "43a88a5a80a54451f5e2621363f7164927e5ef47"
 }