@bloom-housing/ui-components 12.0.0 → 12.0.1

package/dist/src/forms/PhoneMask.d.ts

@@ -1,2 +1,2 @@
 import React from "react";
-export declare const PhoneMask: React.ForwardRefExoticComponent<Pick<any, string | number | symbol> & React.RefAttributes<unknown>>;
+export declare const PhoneMask: React.ForwardRefExoticComponent<Omit<any, "ref"> & React.RefAttributes<unknown>>;

package/dist/src/forms/PhoneMask.js

@@ -2,9 +2,10 @@ import React from "react";
 import MaskedInput from "react-text-mask";
 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(MaskedInput, { mask: ["(", /[1-9]/, /\d/, /\d/, ")", " ", /\d/, /\d/, /\d/, "-", /\d/, /\d/, /\d/, /\d/], className: "input", type: "tel", placeholder: placeholder || "(555) 555-5555", guide: false, id: name, value: value, name: name, disabled: disabled, onChange: function (e) {
-            e.persist();
-            onChange(e);
-        }, ref: ref, "aria-labelledby": "phone-label" }));
+    return (React.createElement(React.Fragment, null,
+        React.createElement(MaskedInput, { mask: ["(", /[1-9]/, /\d/, /\d/, ")", " ", /\d/, /\d/, /\d/, "-", /\d/, /\d/, /\d/, /\d/], className: "input", type: "tel", placeholder: placeholder || "(555) 555-5555", guide: false, id: name, value: value, name: name, disabled: disabled, 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,WAAW,MAAM,iBAAiB,CAAA;AAEzC,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,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,IAAI,gBAAgB,EAC5C,KAAK,EAAE,KAAK,EACZ,EAAE,EAAE,IAAI,EACR,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,UAAC,CAAM;YACf,CAAC,CAAC,OAAO,EAAE,CAAA;YACX,QAAQ,CAAC,CAAC,CAAC,CAAA;QACb,CAAC,EACD,GAAG,EAAE,GAAG,qBACS,aAAa,GAC9B,CACH,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,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,IAAI,gBAAgB,EAC5C,KAAK,EAAE,KAAK,EACZ,EAAE,EAAE,IAAI,EACR,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,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.0.0",
+  "version": "12.0.1",
   "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",
@@ -126,6 +126,7 @@
     "@types/jwt-decode": "^2.2.1",
     "@types/mdx": "^2.0.1",
     "@types/node-polyglot": "^2.4.1",
+    "@types/react": "^18.0.32",
     "@types/react-beautiful-dnd": "^13.1.1",
     "@types/react-dom": "^16.9.5",
     "@types/react-text-mask": "^5.4.6",

package/src/forms/PhoneMask.tsx

@@ -5,22 +5,24 @@ export const PhoneMask = React.forwardRef((props: any, ref: any) => {
   const { value, onChange, name, disabled, placeholder } = props
 
   return (
-    <MaskedInput
-      mask={["(", /[1-9]/, /\d/, /\d/, ")", " ", /\d/, /\d/, /\d/, "-", /\d/, /\d/, /\d/, /\d/]}
-      className="input"
-      type="tel"
-      placeholder={placeholder || "(555) 555-5555"}
-      guide={false}
-      id={name}
-      value={value}
-      name={name}
-      disabled={disabled}
-      onChange={(e: any) => {
-        e.persist()
-        onChange(e)
-      }}
-      ref={ref}
-      aria-labelledby={"phone-label"}
-    />
+    <>
+      <MaskedInput
+        mask={["(", /[1-9]/, /\d/, /\d/, ")", " ", /\d/, /\d/, /\d/, "-", /\d/, /\d/, /\d/, /\d/]}
+        className="input"
+        type="tel"
+        placeholder={placeholder || "(555) 555-5555"}
+        guide={false}
+        id={name}
+        value={value}
+        name={name}
+        disabled={disabled}
+        onChange={(e: any) => {
+          e.persist()
+          onChange(e)
+        }}
+        ref={ref}
+        aria-labelledby={"phone-label"}
+      />
+    </>
   )
 })

package/src/navigation/LanguageNav.scss

@@ -11,7 +11,7 @@
   max-width: var(--inner-max-width);
   width: var(--inner-width);
   display: flex;
-  justify-content: end;
+  justify-content: flex-end;
   margin: auto;
   padding: var(--inner-mobile-padding);
 

package/src/page_components/listing/ListingDetailHeader.scss

@@ -11,7 +11,7 @@
   border-bottom: 1px solid var(--bloom-color-gray-400);
   color: var(--text-color);
   display: flex;
-  justify-content: start;
+  justify-content: flex-start;
 
   @media (min-width: $screen-md) {
     padding-top: 0;