@bloom-housing/ui-components 12.7.2 → 12.7.3

package/dist/src/forms/PhoneMask.js

@@ -1,13 +1,14 @@
 import React from "react";
-import { IMaskInput } from "react-imask";
+import MaskedInput from "react-text-mask";
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export var PhoneMask = React.forwardRef(function (props, ref) {
     var value = props.value, onChange = props.onChange, name = props.name, disabled = props.disabled, placeholder = props.placeholder;
     return (React.createElement(React.Fragment, null,
-        React.createElement(IMaskInput, { "aria-labelledby": "phone-label", className: "input", disabled: disabled, id: name, mask: "(000) 000-0000", name: name, 
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            onAccept: function (value, _) {
-                onChange(value);
-            }, placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : "", ref: ref, type: "tel", unmask: false, value: value })));
+        React.createElement(MaskedInput, { mask: ["(", /[1-9]/, /\d/, /\d/, ")", " ", /\d/, /\d/, /\d/, "-", /\d/, /\d/, /\d/, /\d/], className: "input", type: "tel", placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : "", guide: false, id: name, value: value, name: name, disabled: disabled, 
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            onChange: function (e) {
+                e.persist();
+                onChange(e);
+            }, ref: ref, "aria-labelledby": "phone-label" })));
 });
 //# sourceMappingURL=PhoneMask.js.map

package/dist/src/forms/PhoneMask.js.map

@@ -1 +1 @@
-{"version":3,"file":"PhoneMask.js","sourceRoot":"","sources":["../../../src/forms/PhoneMask.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAExC,8DAA8D;AAC9D,MAAM,CAAC,IAAM,SAAS,GAAG,KAAK,CAAC,UAAU,CAAC,UAAC,KAAU,EAAE,GAAQ;IACrD,IAAA,KAAK,GAA4C,KAAK,MAAjD,EAAE,QAAQ,GAAkC,KAAK,SAAvC,EAAE,IAAI,GAA4B,KAAK,KAAjC,EAAE,QAAQ,GAAkB,KAAK,SAAvB,EAAE,WAAW,GAAK,KAAK,YAAV,CAAU;IAE9D,OAAO,CACL;QACE,oBAAC,UAAU,uBACQ,aAAa,EAC9B,SAAS,EAAC,OAAO,EACjB,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE,IAAI,EACR,IAAI,EAAE,gBAAgB,EACtB,IAAI,EAAE,IAAI;YACV,6DAA6D;YAC7D,QAAQ,EAAE,UAAC,KAAK,EAAE,CAAC;gBACjB,QAAQ,CAAC,KAAK,CAAC,CAAA;YACjB,CAAC,EACD,WAAW,EAAE,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,EAAE,EAC9B,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,KAAK,EACV,MAAM,EAAE,KAAK,EACb,KAAK,EAAE,KAAK,GACZ,CACD,CACJ,CAAA;AACH,CAAC,CAAC,CAAA"}
+{"version":3,"file":"PhoneMask.js","sourceRoot":"","sources":["../../../src/forms/PhoneMask.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,WAAW,MAAM,iBAAiB,CAAA;AAEzC,8DAA8D;AAC9D,MAAM,CAAC,IAAM,SAAS,GAAG,KAAK,CAAC,UAAU,CAAC,UAAC,KAAU,EAAE,GAAQ;IACrD,IAAA,KAAK,GAA4C,KAAK,MAAjD,EAAE,QAAQ,GAAkC,KAAK,SAAvC,EAAE,IAAI,GAA4B,KAAK,KAAjC,EAAE,QAAQ,GAAkB,KAAK,SAAvB,EAAE,WAAW,GAAK,KAAK,YAAV,CAAU;IAE9D,OAAO,CACL;QACE,oBAAC,WAAW,IACV,IAAI,EAAE,CAAC,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,EACzF,SAAS,EAAC,OAAO,EACjB,IAAI,EAAC,KAAK,EACV,WAAW,EAAE,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,EAAE,EAC9B,KAAK,EAAE,KAAK,EACZ,EAAE,EAAE,IAAI,EACR,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ;YAClB,8DAA8D;YAC9D,QAAQ,EAAE,UAAC,CAAM;gBACf,CAAC,CAAC,OAAO,EAAE,CAAA;gBACX,QAAQ,CAAC,CAAC,CAAC,CAAA;YACb,CAAC,EACD,GAAG,EAAE,GAAG,qBACS,aAAa,GAC9B,CACD,CACJ,CAAA;AACH,CAAC,CAAC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bloom-housing/ui-components",
-  "version": "12.7.2",
+  "version": "12.7.3",
   "author": "Sean Albert <sean.albert@exygy.com>",
   "description": "Shared user interface components for Bloom affordable housing system",
   "homepage": "https://github.com/bloom-housing/ui-components",
@@ -77,6 +77,7 @@
     "@types/react-map-gl": "^5.2.10",
     "@types/react-tabs": "^2.3.2",
     "@types/react-test-renderer": "^18.0.0",
+    "@types/react-text-mask": "^5.4.14",
     "@types/react-transition-group": "^4.4.0",
     "@types/webpack": "5.28.0",
     "@typescript-eslint/eslint-plugin": "^5.12.1",
@@ -142,11 +143,11 @@
     "react-dropzone": "^11.3.2",
     "react-focus-lock": "^2.9.4",
     "react-hook-form": "^6.15.5",
-    "react-imask": "^7.6.1",
     "react-map-gl": "^6.1.16",
     "react-media": "^1.10.0",
     "react-remove-scroll": "2.5.4",
     "react-tabs": "^3.2.2",
+    "react-text-mask": "^5.5.0",
     "react-transition-group": "^4.4.1",
     "tailwindcss": "2.2.10",
     "tailwindcss-rtl": "^0.9.0",

package/src/forms/PhoneMask.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { IMaskInput } from "react-imask"
+import MaskedInput from "react-text-mask"
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const PhoneMask = React.forwardRef((props: any, ref: any) => {
@@ -7,22 +7,23 @@ export const PhoneMask = React.forwardRef((props: any, ref: any) => {
 
   return (
     <>
-      <IMaskInput
-        aria-labelledby={"phone-label"}
+      <MaskedInput
+        mask={["(", /[1-9]/, /\d/, /\d/, ")", " ", /\d/, /\d/, /\d/, "-", /\d/, /\d/, /\d/, /\d/]}
         className="input"
-        disabled={disabled}
+        type="tel"
+        placeholder={placeholder ?? ""}
+        guide={false}
         id={name}
-        mask={"(000) 000-0000"}
+        value={value}
         name={name}
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        onAccept={(value, _) => {
-          onChange(value)
+        disabled={disabled}
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        onChange={(e: any) => {
+          e.persist()
+          onChange(e)
         }}
-        placeholder={placeholder ?? ""}
         ref={ref}
-        type="tel"
-        unmask={false}
-        value={value}
+        aria-labelledby={"phone-label"}
       />
     </>
   )