@bloom-housing/ui-components 12.7.2 → 12.7.4

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

@@ -1,8 +1,9 @@
+import React from "react";
 import "./Dropzone.scss";
 interface DropzoneProps {
     uploader: (file: File) => void;
     id: string;
-    label: string;
+    label: string | React.ReactNode;
     helptext?: string;
     accept?: string | string[];
     progress?: number;

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

@@ -13,7 +13,7 @@ export interface FieldProps {
     name: string;
     note?: string | JSX.Element;
     subNote?: string;
-    label?: string;
+    label?: string | React.ReactNode;
     defaultValue?: string | number;
     onDrop?: (e: React.DragEvent<HTMLElement>) => boolean;
     onPaste?: (e: React.ClipboardEvent) => boolean;

package/dist/src/forms/Field.stories.d.ts

@@ -4,6 +4,7 @@ declare const _default: {
 };
 export default _default;
 export declare const FieldDefault: () => JSX.Element;
+export declare const FieldFormattedLabel: () => JSX.Element;
 export declare const TextFieldError: () => JSX.Element;
 export declare const TextFieldErrorElement: () => JSX.Element;
 export declare const CurrencyField: () => JSX.Element;

package/dist/src/forms/Field.stories.js

@@ -9,6 +9,12 @@ export var FieldDefault = function () {
     var register = useForm({ mode: "onChange" }).register;
     return React.createElement(Field, { register: register, name: "Test Input", label: "Custom label" });
 };
+export var FieldFormattedLabel = function () {
+    var register = useForm({ mode: "onChange" }).register;
+    return (React.createElement(Field, { register: register, name: "Test Input", label: React.createElement(React.Fragment, null,
+            "Custom label ",
+            React.createElement("strong", { className: "text-alert" }, "*")) }));
+};
 export var TextFieldError = function () {
     var register = useForm({ mode: "onChange" }).register;
     return (React.createElement(Field, { register: register, name: "Test Input", label: "Custom label", type: "text", error: true, errorMessage: "Custom error message" }));

package/dist/src/forms/Field.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Field.stories.js","sourceRoot":"","sources":["../../../src/forms/Field.stories.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Field.stories.js","sourceRoot":"","sources":["../../../src/forms/Field.stories.tsx"],"names":[],"mappings":"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"}

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

@@ -9,7 +9,7 @@ export interface FieldSingle {
     disabled?: boolean;
     id: string;
     inputProps?: Record<string, unknown>;
-    label: string;
+    label: string | React.ReactNode;
     uniqueName?: boolean;
     note?: string;
     subFields?: FieldSingle[];
@@ -24,7 +24,7 @@ interface FieldGroupProps {
     fieldGroupClassName?: string;
     fieldLabelClassName?: string;
     fields?: FieldSingle[];
-    groupLabel?: string;
+    groupLabel?: string | React.ReactNode;
     groupNote?: string;
     groupSubNote?: string;
     name: string;

package/dist/src/forms/FieldGroup.js

@@ -38,9 +38,10 @@ var FieldGroup = function (_a) {
         var _a, _b, _c;
         return (React.createElement("div", { key: item.value },
             React.createElement("input", __assign({ "aria-describedby": "".concat(name, "-error"), "aria-invalid": !!error || false, type: type, id: item.id, defaultValue: item.value || item.id, name: subfieldsExist() || item.uniqueName ? "".concat(name, "-").concat(item.value || "") : name, onClick: function (e) {
+                    var _a;
                     // We cannot reliably target an individual checkbox in a field group since they have the same name, so we keep track on our own
                     if (e.currentTarget.checked) {
-                        setCheckedInputs(__spreadArray(__spreadArray([], checkedInputs, true), [item.label], false));
+                        setCheckedInputs(__spreadArray(__spreadArray([], checkedInputs, true), [((_a = item.label) === null || _a === void 0 ? void 0 : _a.toString()) || ""], false));
                     }
                     else {
                         setCheckedInputs(checkedInputs.filter(function (subset) { return item.label !== subset; }));
@@ -57,8 +58,9 @@ var FieldGroup = function (_a) {
     };
     var checkSelected = useCallback(function (formFields, checkedValues) {
         formFields === null || formFields === void 0 ? void 0 : formFields.forEach(function (field) {
+            var _a;
             if (field.defaultChecked) {
-                checkedValues.push(field.label);
+                checkedValues.push(((_a = field.label) === null || _a === void 0 ? void 0 : _a.toString()) || "");
             }
             if (field.subFields) {
                 checkSelected(field.subFields, checkedValues);
@@ -71,24 +73,24 @@ var FieldGroup = function (_a) {
         setCheckedInputs(__spreadArray([], initialValues, true));
     }, [checkSelected, setCheckedInputs, fields]);
     var getInputSet = function (item) {
-        var _a;
+        var _a, _b;
         return (React.createElement("div", { key: item.value },
             getIndividualInput(item),
-            item.additionalText && checkedInputs.indexOf(item.label) >= 0 && (React.createElement(Field, { id: item.id, key: "".concat(item.value || "", "-additionalText"), name: "".concat(name, "-").concat(item.value || ""), register: register, defaultValue: item.defaultText, placeholder: (_a = strings === null || strings === void 0 ? void 0 : strings.description) !== null && _a !== void 0 ? _a : t("t.description"), className: "mb-4", disabled: item.disabled, dataTestId: item.dataTestId }))));
+            item.additionalText && checkedInputs.indexOf(((_a = item.label) === null || _a === void 0 ? void 0 : _a.toString()) || "") >= 0 && (React.createElement(Field, { id: item.id, key: "".concat(item.value || "", "-additionalText"), name: "".concat(name, "-").concat(item.value || ""), register: register, defaultValue: item.defaultText, placeholder: (_b = strings === null || strings === void 0 ? void 0 : strings.description) !== null && _b !== void 0 ? _b : t("t.description"), className: "mb-4", disabled: item.disabled, dataTestId: item.dataTestId }))));
     };
-    return (React.createElement("div", null,
-        groupLabel && React.createElement("label", { className: "text__caps-spaced" }, groupLabel),
+    return (React.createElement("fieldset", null,
+        groupLabel && (React.createElement("legend", { className: "text__caps-spaced ".concat(error ? "text-alert" : "") }, groupLabel)),
         groupNote && React.createElement("p", { className: "field-note mb-4" }, groupNote),
         React.createElement("div", { className: "field ".concat(error ? "error" : "", " ").concat(fieldGroupClassName || "", " mb-0") }, fields === null || fields === void 0 ? void 0 : fields.map(function (item) {
-            var _a;
+            var _a, _b;
             return (React.createElement("div", { className: "field ".concat(fieldClassName || "", " mb-1"), key: item.id },
                 getInputSet(item),
-                item.subFields && checkedInputs.indexOf(item.label) >= 0 && (React.createElement("div", { className: "ml-8", key: "".concat(item.value || "", "-subfields") }, (_a = item.subFields) === null || _a === void 0 ? void 0 : _a.map(function (subItem) {
+                item.subFields && checkedInputs.indexOf(((_a = item.label) === null || _a === void 0 ? void 0 : _a.toString()) || "") >= 0 && (React.createElement("div", { className: "ml-8", key: "".concat(item.value || "", "-subfields") }, (_b = item.subFields) === null || _b === void 0 ? void 0 : _b.map(function (subItem) {
                     return getInputSet(subItem);
                 })))));
         })),
         groupSubNote && React.createElement("p", { className: "field-sub-note" }, groupSubNote),
-        error && errorMessage && (React.createElement(ErrorMessage, { id: "".concat(name, "-error"), error: error }, errorMessage))));
+        error && errorMessage ? (React.createElement(ErrorMessage, { id: "".concat(name, "-error"), error: error }, errorMessage)) : (React.createElement("span", { id: "".concat(name, "-error") }))));
 };
 export { FieldGroup as default, FieldGroup };
 //# sourceMappingURL=FieldGroup.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FieldGroup.js","sourceRoot":"","sources":["../../../src/forms/FieldGroup.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"FieldGroup.js","sourceRoot":"","sources":["../../../src/forms/FieldGroup.tsx"],"names":[],"mappings":"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"}

package/dist/src/forms/FieldGroup.stories.d.ts

@@ -6,3 +6,4 @@ export default _default;
 export declare const FieldGroupDefault: () => JSX.Element;
 export declare const FieldGroupDescriptions: () => JSX.Element;
 export declare const FieldGroupError: () => JSX.Element;
+export declare const FieldGroupFormattedLabel: () => JSX.Element;

package/dist/src/forms/FieldGroup.stories.js

@@ -35,4 +35,13 @@ export var FieldGroupError = function () {
             { id: "5678", label: "Input 2" },
         ], fieldGroupClassName: "field-group-classname", fieldClassName: "field-classname", fieldLabelClassName: "text-primary", groupNote: "Group Note", groupLabel: "Group Label" }));
 };
+export var FieldGroupFormattedLabel = function () {
+    var register = useForm({ mode: "onChange" }).register;
+    return (React.createElement(FieldGroup, { register: register, name: "Test Input", type: "checkbox", fields: [
+            { id: "1234", label: "Input 1" },
+            { id: "5678", label: "Input 2" },
+        ], fieldGroupClassName: "field-group-classname", fieldClassName: "field-classname", fieldLabelClassName: "text-primary", groupNote: "Group Note", groupLabel: React.createElement(React.Fragment, null,
+            "Custom label ",
+            React.createElement("strong", { className: "text-alert" }, "*")) }));
+};
 //# sourceMappingURL=FieldGroup.stories.js.map

package/dist/src/forms/FieldGroup.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldGroup.stories.js","sourceRoot":"","sources":["../../../src/forms/FieldGroup.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAEzC,eAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,UAAU,EAAE,CAAC,UAAC,OAAY,IAAK,OAAA,6BAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,IAAG,OAAO,EAAE,CAAO,EAAlD,CAAkD,CAAC;CACnF,CAAA;AAED,MAAM,CAAC,IAAM,iBAAiB,GAAG;IACvB,IAAA,QAAQ,GAAK,OAAO,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,SAAlC,CAAkC;IAClD,OAAO,CACL,oBAAC,UAAU,IACT,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,YAAY,EAClB,IAAI,EAAE,UAAU,EAChB,MAAM,EAAE;YACN,EAAE,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE;YAChC,EAAE,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE;SACjC,EACD,mBAAmB,EAAE,uBAAuB,EAC5C,cAAc,EAAE,iBAAiB,EACjC,mBAAmB,EAAE,cAAc,EACnC,SAAS,EAAE,YAAY,EACvB,UAAU,EAAE,aAAa,GACzB,CACH,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,IAAM,sBAAsB,GAAG;IAC5B,IAAA,QAAQ,GAAK,OAAO,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,SAAlC,CAAkC;IAClD,OAAO,CACL,oBAAC,UAAU,IACT,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,YAAY,EAClB,IAAI,EAAE,OAAO,EACb,MAAM,EAAE;YACN;gBACE,EAAE,EAAE,MAAM;gBACV,KAAK,EAAE,SAAS;gBAChB,WAAW,EAAE,CACX;;oBACa,uCAAa;mCACnB,CACR;aACF;YACD,EAAE,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,4BAA4B,EAAE;YAC3E,EAAE,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE;YAChC,EAAE,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE;SACjC,EACD,mBAAmB,EAAC,kBAAkB,EACtC,cAAc,EAAC,MAAM,EACrB,SAAS,EAAE,YAAY,EACvB,UAAU,EAAE,aAAa,GACzB,CACH,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,IAAM,eAAe,GAAG;IACrB,IAAA,QAAQ,GAAK,OAAO,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,SAAlC,CAAkC;IAClD,OAAO,CACL,oBAAC,UAAU,IACT,KAAK,EAAE,IAAI,EACX,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,WAAW,EACjB,IAAI,EAAE,UAAU,EAChB,MAAM,EAAE;YACN,EAAE,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE;YAChC,EAAE,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE;SACjC,EACD,mBAAmB,EAAE,uBAAuB,EAC5C,cAAc,EAAE,iBAAiB,EACjC,mBAAmB,EAAE,cAAc,EACnC,SAAS,EAAE,YAAY,EACvB,UAAU,EAAE,aAAa,GACzB,CACH,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"FieldGroup.stories.js","sourceRoot":"","sources":["../../../src/forms/FieldGroup.stories.tsx"],"names":[],"mappings":"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"}

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

@@ -1,8 +1,9 @@
+import React from "react";
 import { UseFormMethods, RegisterOptions } from "react-hook-form";
 import "./MultiSelectField.scss";
 export interface MultiSelectFieldItem {
     value: string;
-    label: string;
+    label: string | React.ReactNode;
 }
 export type MultiSelectDataSourceParams<T> = (query: string, render: (toRender: MultiSelectFieldItem[]) => void, isFirstCall: boolean) => T;
 export interface MultiSelectFieldProps {

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

@@ -1,3 +1,4 @@
+import React from "react";
 export declare const PhoneField: (props: {
     error?: boolean | undefined;
     errorMessage?: string | undefined;
@@ -5,7 +6,7 @@ export declare const PhoneField: (props: {
     subNote?: string | undefined;
     id?: string | undefined;
     name: string;
-    label?: string | undefined;
+    label?: string | React.ReactNode;
     caps?: boolean | undefined;
     readerOnly?: boolean | undefined;
     placeholder?: string | undefined;

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/dist/src/forms/Select.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import { UseFormMethods, RegisterOptions } from "react-hook-form";
 export interface SelectOption {
     value: string;
@@ -11,7 +12,7 @@ interface SelectProps {
     type?: string;
     id?: string;
     name: string;
-    label?: string;
+    label?: string | React.ReactNode;
     subNote?: string;
     defaultValue?: string;
     placeholder?: string;

package/dist/src/forms/Select.js

@@ -17,10 +17,10 @@ export var Select = function (_a) {
     return (React.createElement("div", { className: "field ".concat(error ? "error" : "") },
         React.createElement("label", { className: labelClassName, htmlFor: id }, label),
         React.createElement("div", { className: controlClassName },
-            React.createElement("select", __assign({ className: "input", id: id || name, name: name, "data-testid": dataTestId, "aria-describedby": describedBy ? describedBy : "".concat(id || name, "-error"), "aria-invalid": !!error || false, "aria-label": label, ref: register && register(validation), disabled: disabled, defaultValue: defaultValue !== null && defaultValue !== void 0 ? defaultValue : "" }, inputProps),
+            React.createElement("select", __assign({ className: "input", id: id || name, name: name, "data-testid": dataTestId, "aria-describedby": describedBy ? describedBy : "".concat(id || name, "-error"), "aria-invalid": !!error || false, ref: register && register(validation), disabled: disabled, defaultValue: defaultValue !== null && defaultValue !== void 0 ? defaultValue : "" }, inputProps),
                 placeholder && (React.createElement("option", { value: "", disabled: true }, placeholder)),
                 React.createElement(FormOptions, { options: options, keyPrefix: keyPrefix }))),
         subNote && React.createElement("p", { className: "field-sub-note" }, subNote),
-        error && errorMessage && (React.createElement(ErrorMessage, { id: "".concat(id || name, "-error"), error: error }, errorMessage))));
+        error && errorMessage ? (React.createElement(ErrorMessage, { id: "".concat(id || name, "-error"), error: error }, errorMessage)) : (React.createElement("span", { id: "".concat(id || name, "-error") }))));
 };
 //# sourceMappingURL=Select.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../src/forms/Select.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAA;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAA;AA8BpD,MAAM,CAAC,IAAM,MAAM,GAAG,UAAC,EAmBT;QAlBZ,KAAK,WAAA,EACL,YAAY,kBAAA,EACZ,gBAAgB,sBAAA,EAChB,cAAc,oBAAA,EACd,EAAE,QAAA,EACF,IAAI,UAAA,EACJ,KAAK,WAAA,EACL,WAAW,iBAAA,EACX,QAAQ,cAAA,EACR,UAAU,gBAAA,EACV,QAAQ,cAAA,EACR,OAAO,aAAA,EACP,SAAS,eAAA,EACT,WAAW,iBAAA,EACX,UAAU,gBAAA,EACV,YAAY,kBAAA,EACZ,OAAO,aAAA,EACP,UAAU,gBAAA;IAEV,OAAO,CACL,6BAAK,SAAS,EAAE,gBAAS,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAE;QAC7C,+BAAO,SAAS,EAAE,cAAc,EAAE,OAAO,EAAE,EAAE,IAC1C,KAAK,CACA;QACR,6BAAK,SAAS,EAAE,gBAAgB;YAC9B,yCACE,SAAS,EAAC,OAAO,EACjB,EAAE,EAAE,EAAE,IAAI,IAAI,EACd,IAAI,EAAE,IAAI,iBACG,UAAU,sBACL,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,UAAG,EAAE,IAAI,IAAI,WAAQ,kBACrD,CAAC,CAAC,KAAK,IAAI,KAAK,gBAClB,KAAK,EACjB,GAAG,EAAE,QAAQ,IAAI,QAAQ,CAAC,UAAU,CAAC,EACrC,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,YAAY,aAAZ,YAAY,cAAZ,YAAY,GAAI,EAAE,IAC5B,UAAU;gBAEb,WAAW,IAAI,CACd,gCAAQ,KAAK,EAAC,EAAE,EAAC,QAAQ,UACtB,WAAW,CACL,CACV;gBACD,oBAAC,WAAW,IAAC,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,GAAI,CAChD,CACL;QACL,OAAO,IAAI,2BAAG,SAAS,EAAC,gBAAgB,IAAE,OAAO,CAAK;QACtD,KAAK,IAAI,YAAY,IAAI,CACxB,oBAAC,YAAY,IAAC,EAAE,EAAE,UAAG,EAAE,IAAI,IAAI,WAAQ,EAAE,KAAK,EAAE,KAAK,IAClD,YAAY,CACA,CAChB,CACG,CACP,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../src/forms/Select.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAA;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAA;AA8BpD,MAAM,CAAC,IAAM,MAAM,GAAG,UAAC,EAmBT;QAlBZ,KAAK,WAAA,EACL,YAAY,kBAAA,EACZ,gBAAgB,sBAAA,EAChB,cAAc,oBAAA,EACd,EAAE,QAAA,EACF,IAAI,UAAA,EACJ,KAAK,WAAA,EACL,WAAW,iBAAA,EACX,QAAQ,cAAA,EACR,UAAU,gBAAA,EACV,QAAQ,cAAA,EACR,OAAO,aAAA,EACP,SAAS,eAAA,EACT,WAAW,iBAAA,EACX,UAAU,gBAAA,EACV,YAAY,kBAAA,EACZ,OAAO,aAAA,EACP,UAAU,gBAAA;IAEV,OAAO,CACL,6BAAK,SAAS,EAAE,gBAAS,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAE;QAC7C,+BAAO,SAAS,EAAE,cAAc,EAAE,OAAO,EAAE,EAAE,IAC1C,KAAK,CACA;QACR,6BAAK,SAAS,EAAE,gBAAgB;YAC9B,yCACE,SAAS,EAAC,OAAO,EACjB,EAAE,EAAE,EAAE,IAAI,IAAI,EACd,IAAI,EAAE,IAAI,iBACG,UAAU,sBACL,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,UAAG,EAAE,IAAI,IAAI,WAAQ,kBACrD,CAAC,CAAC,KAAK,IAAI,KAAK,EAC9B,GAAG,EAAE,QAAQ,IAAI,QAAQ,CAAC,UAAU,CAAC,EACrC,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,YAAY,aAAZ,YAAY,cAAZ,YAAY,GAAI,EAAE,IAC5B,UAAU;gBAEb,WAAW,IAAI,CACd,gCAAQ,KAAK,EAAC,EAAE,EAAC,QAAQ,UACtB,WAAW,CACL,CACV;gBACD,oBAAC,WAAW,IAAC,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,GAAI,CAChD,CACL;QACL,OAAO,IAAI,2BAAG,SAAS,EAAC,gBAAgB,IAAE,OAAO,CAAK;QACtD,KAAK,IAAI,YAAY,CAAC,CAAC,CAAC,CACvB,oBAAC,YAAY,IAAC,EAAE,EAAE,UAAG,EAAE,IAAI,IAAI,WAAQ,EAAE,KAAK,EAAE,KAAK,IAClD,YAAY,CACA,CAChB,CAAC,CAAC,CAAC,CACF,8BAAM,EAAE,EAAE,UAAG,EAAE,IAAI,IAAI,WAAQ,GAAS,CACzC,CACG,CACP,CAAA;AACH,CAAC,CAAA"}

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

@@ -1,3 +1,4 @@
+import * as React from "react";
 import "./Textarea.scss";
 import { UseFormMethods, RegisterOptions } from "react-hook-form";
 type WrapOptions = "soft" | "hard";
@@ -8,7 +9,7 @@ export interface TextareaProps {
     errorMessage?: string;
     fullWidth?: boolean;
     id?: string;
-    label: string;
+    label: string | React.ReactNode;
     maxLength?: number;
     name: string;
     note?: string;

package/dist/src/sections/GridSection.js

@@ -7,7 +7,7 @@ var GridCell = function (props) {
         gridCellClasses.push("md:col-span-".concat(props.span));
     if (props.className)
         gridCellClasses.push(props.className);
-    return (React.createElement("article", { "aria-label": (_a = props.ariaLabel) !== null && _a !== void 0 ? _a : "", className: gridCellClasses.join(" ") }, props.children));
+    return (React.createElement("div", { "aria-label": (_a = props.ariaLabel) !== null && _a !== void 0 ? _a : "", className: gridCellClasses.join(" ") }, props.children));
 };
 var GridSection = function (props) {
     var sectionClasses = ["grid-section"];

package/dist/src/sections/GridSection.js.map

@@ -1 +1 @@
-{"version":3,"file":"GridSection.js","sourceRoot":"","sources":["../../../src/sections/GridSection.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"GridSection.js","sourceRoot":"","sources":["../../../src/sections/GridSection.tsx"],"names":[],"mappings":"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"}

package/dist/src/sections/MarkdownSection.js

@@ -8,7 +8,7 @@ export var MarkdownSection = function (_a) {
         sectionClassNames.push("markdown-section--with-padding");
     return (React.createElement("div", { className: sectionClassNames.join(" ") },
         React.createElement("div", { className: "markdown-section__inner" },
-            React.createElement("article", { className: contentWidth }, children))));
+            React.createElement("div", { className: contentWidth }, children))));
 };
 export default MarkdownSection;
 //# sourceMappingURL=MarkdownSection.js.map

package/dist/src/sections/MarkdownSection.js.map

@@ -1 +1 @@
-{"version":3,"file":"MarkdownSection.js","sourceRoot":"","sources":["../../../src/sections/MarkdownSection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,wBAAwB,CAAA;AAQ/B,MAAM,CAAC,IAAM,eAAe,GAAG,UAAC,EAA6D;QAA3D,SAAS,eAAA,EAAE,eAAc,EAAd,OAAO,mBAAG,IAAI,KAAA,EAAE,QAAQ,cAAA;IACnE,IAAM,YAAY,GAAG,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,oBAAoB,CAAA;IAClE,IAAM,iBAAiB,GAAG,CAAC,kBAAkB,CAAC,CAAA;IAE9C,IAAI,OAAO;QAAE,iBAAiB,CAAC,IAAI,CAAC,gCAAgC,CAAC,CAAA;IAErE,OAAO,CACL,6BAAK,SAAS,EAAE,iBAAiB,CAAC,IAAI,CAAC,GAAG,CAAC;QACzC,6BAAK,SAAS,EAAC,yBAAyB;YACtC,iCAAS,SAAS,EAAE,YAAY,IAAG,QAAQ,CAAW,CAClD,CACF,CACP,CAAA;AACH,CAAC,CAAA;AAED,eAAe,eAAe,CAAA"}
+{"version":3,"file":"MarkdownSection.js","sourceRoot":"","sources":["../../../src/sections/MarkdownSection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,wBAAwB,CAAA;AAQ/B,MAAM,CAAC,IAAM,eAAe,GAAG,UAAC,EAA6D;QAA3D,SAAS,eAAA,EAAE,eAAc,EAAd,OAAO,mBAAG,IAAI,KAAA,EAAE,QAAQ,cAAA;IACnE,IAAM,YAAY,GAAG,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,oBAAoB,CAAA;IAClE,IAAM,iBAAiB,GAAG,CAAC,kBAAkB,CAAC,CAAA;IAE9C,IAAI,OAAO;QAAE,iBAAiB,CAAC,IAAI,CAAC,gCAAgC,CAAC,CAAA;IAErE,OAAO,CACL,6BAAK,SAAS,EAAE,iBAAiB,CAAC,IAAI,CAAC,GAAG,CAAC;QACzC,6BAAK,SAAS,EAAC,yBAAyB;YACtC,6BAAK,SAAS,EAAE,YAAY,IAAG,QAAQ,CAAO,CAC1C,CACF,CACP,CAAA;AACH,CAAC,CAAA;AAED,eAAe,eAAe,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bloom-housing/ui-components",
-  "version": "12.7.2",
+  "version": "12.7.4",
   "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/Dropzone.tsx

@@ -6,7 +6,7 @@ import "./Dropzone.scss"
 interface DropzoneProps {
   uploader: (file: File) => void
   id: string
-  label: string
+  label: string | React.ReactNode
   helptext?: string
   accept?: string | string[]
   progress?: number

package/src/forms/Field.stories.tsx

@@ -12,6 +12,21 @@ export const FieldDefault = () => {
   return <Field register={register} name={"Test Input"} label={"Custom label"} />
 }
 
+export const FieldFormattedLabel = () => {
+  const { register } = useForm({ mode: "onChange" })
+  return (
+    <Field
+      register={register}
+      name={"Test Input"}
+      label={
+        <>
+          Custom label <strong className={"text-alert"}>*</strong>
+        </>
+      }
+    />
+  )
+}
+
 export const TextFieldError = () => {
   const { register } = useForm({ mode: "onChange" })
   return (

package/src/forms/Field.tsx

@@ -16,7 +16,7 @@ export interface FieldProps {
   name: string
   note?: string | JSX.Element
   subNote?: string
-  label?: string
+  label?: string | React.ReactNode
   defaultValue?: string | number
   onDrop?: (e: React.DragEvent<HTMLElement>) => boolean
   onPaste?: (e: React.ClipboardEvent) => boolean

package/src/forms/FieldGroup.stories.tsx

@@ -76,3 +76,27 @@ export const FieldGroupError = () => {
     />
   )
 }
+
+export const FieldGroupFormattedLabel = () => {
+  const { register } = useForm({ mode: "onChange" })
+  return (
+    <FieldGroup
+      register={register}
+      name={"Test Input"}
+      type={"checkbox"}
+      fields={[
+        { id: "1234", label: "Input 1" },
+        { id: "5678", label: "Input 2" },
+      ]}
+      fieldGroupClassName={"field-group-classname"}
+      fieldClassName={"field-classname"}
+      fieldLabelClassName={"text-primary"}
+      groupNote={"Group Note"}
+      groupLabel={
+        <>
+          Custom label <strong className={"text-alert"}>*</strong>
+        </>
+      }
+    />
+  )
+}

package/src/forms/FieldGroup.tsx

@@ -14,7 +14,7 @@ export interface FieldSingle {
   disabled?: boolean
   id: string
   inputProps?: Record<string, unknown>
-  label: string
+  label: string | React.ReactNode
   uniqueName?: boolean
   note?: string
   subFields?: FieldSingle[]
@@ -30,7 +30,7 @@ interface FieldGroupProps {
   fieldGroupClassName?: string
   fieldLabelClassName?: string
   fields?: FieldSingle[]
-  groupLabel?: string
+  groupLabel?: string | React.ReactNode
   groupNote?: string
   groupSubNote?: string
   name: string
@@ -86,7 +86,7 @@ const FieldGroup = ({
           onClick={(e) => {
             // We cannot reliably target an individual checkbox in a field group since they have the same name, so we keep track on our own
             if (e.currentTarget.checked) {
-              setCheckedInputs([...checkedInputs, item.label])
+              setCheckedInputs([...checkedInputs, item.label?.toString() || ""])
             } else {
               setCheckedInputs(checkedInputs.filter((subset) => item.label !== subset))
             }
@@ -127,7 +127,7 @@ const FieldGroup = ({
     (formFields: FieldSingle[] | undefined, checkedValues: string[]) => {
       formFields?.forEach((field) => {
         if (field.defaultChecked) {
-          checkedValues.push(field.label)
+          checkedValues.push(field.label?.toString() || "")
         }
         if (field.subFields) {
           checkSelected(field.subFields, checkedValues)
@@ -147,7 +147,7 @@ const FieldGroup = ({
     return (
       <div key={item.value}>
         {getIndividualInput(item)}
-        {item.additionalText && checkedInputs.indexOf(item.label) >= 0 && (
+        {item.additionalText && checkedInputs.indexOf(item.label?.toString() || "") >= 0 && (
           <Field
             id={item.id}
             key={`${item.value || ""}-additionalText`}
@@ -164,15 +164,17 @@ const FieldGroup = ({
     )
   }
   return (
-    <div>
-      {groupLabel && <label className="text__caps-spaced">{groupLabel}</label>}
+    <fieldset>
+      {groupLabel && (
+        <legend className={`text__caps-spaced ${error ? "text-alert" : ""}`}>{groupLabel}</legend>
+      )}
       {groupNote && <p className="field-note mb-4">{groupNote}</p>}
 
       <div className={`field ${error ? "error" : ""} ${fieldGroupClassName || ""} mb-0`}>
         {fields?.map((item) => (
           <div className={`field ${fieldClassName || ""} mb-1`} key={item.id}>
             {getInputSet(item)}
-            {item.subFields && checkedInputs.indexOf(item.label) >= 0 && (
+            {item.subFields && checkedInputs.indexOf(item.label?.toString() || "") >= 0 && (
               <div className={"ml-8"} key={`${item.value || ""}-subfields`}>
                 {item.subFields?.map((subItem) => {
                   return getInputSet(subItem)
@@ -183,12 +185,14 @@ const FieldGroup = ({
         ))}
       </div>
       {groupSubNote && <p className="field-sub-note">{groupSubNote}</p>}
-      {error && errorMessage && (
+      {error && errorMessage ? (
         <ErrorMessage id={`${name}-error`} error={error}>
           {errorMessage}
         </ErrorMessage>
+      ) : (
+        <span id={`${name}-error`}></span>
       )}
-    </div>
+    </fieldset>
   )
 }
 

package/src/forms/MultiSelectField.tsx

@@ -5,7 +5,7 @@ import { Icon } from "../icons/Icon"
 
 export interface MultiSelectFieldItem {
   value: string
-  label: string
+  label: string | React.ReactNode
 }
 
 export type MultiSelectDataSourceParams<T> = (

package/src/forms/PhoneField.tsx

@@ -10,7 +10,7 @@ export const PhoneField = (props: {
   subNote?: string
   id?: string
   name: string
-  label?: string
+  label?: string | React.ReactNode
   caps?: boolean
   readerOnly?: boolean
   placeholder?: string

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"}
       />
     </>
   )

package/src/forms/Select.tsx

@@ -16,7 +16,7 @@ interface SelectProps {
   type?: string
   id?: string
   name: string
-  label?: string
+  label?: string | React.ReactNode
   subNote?: string
   defaultValue?: string
   placeholder?: string
@@ -63,7 +63,6 @@ export const Select = ({
           data-testid={dataTestId}
           aria-describedby={describedBy ? describedBy : `${id || name}-error`}
           aria-invalid={!!error || false}
-          aria-label={label}
           ref={register && register(validation)}
           disabled={disabled}
           defaultValue={defaultValue ?? ""}
@@ -78,10 +77,12 @@ export const Select = ({
         </select>
       </div>
       {subNote && <p className="field-sub-note">{subNote}</p>}
-      {error && errorMessage && (
+      {error && errorMessage ? (
         <ErrorMessage id={`${id || name}-error`} error={error}>
           {errorMessage}
         </ErrorMessage>
+      ) : (
+        <span id={`${id || name}-error`}></span>
       )}
     </div>
   )

package/src/forms/Textarea.scss

@@ -20,11 +20,12 @@
 
 .textarea-error {
   @apply border;
+  @apply border-2;
   @apply border-alert;
 }
 
 .textarea-error-message {
-  @apply text-2xs;
+  @apply text-xs;
   @apply text-alert;
   @apply block;
   @apply leading-5;

package/src/forms/Textarea.tsx

@@ -12,7 +12,7 @@ export interface TextareaProps {
   errorMessage?: string
   fullWidth?: boolean
   id?: string
-  label: string
+  label: string | React.ReactNode
   maxLength?: number
   name: string
   note?: string

package/src/global/forms.scss

@@ -229,7 +229,8 @@
   }
 
   &.error {
-    label {
+    label,
+    legend {
       @apply text-alert;
     }
 
@@ -359,7 +360,6 @@ input[type="number"] {
   @apply mt-2;
   @apply text-gray-750;
   @apply text-xs;
-  @apply tracking-wide;
   @apply font-sans;
   font-weight: normal;
 }

package/src/sections/GridSection.tsx

@@ -14,9 +14,9 @@ const GridCell = (props: GridCellProps) => {
   if (props.className) gridCellClasses.push(props.className)
 
   return (
-    <article aria-label={props.ariaLabel ?? ""} className={gridCellClasses.join(" ")}>
+    <div aria-label={props.ariaLabel ?? ""} className={gridCellClasses.join(" ")}>
       {props.children}
-    </article>
+    </div>
   )
 }
 

package/src/sections/MarkdownSection.tsx

@@ -16,7 +16,7 @@ export const MarkdownSection = ({ fullwidth, padding = true, children }: Markdow
   return (
     <div className={sectionClassNames.join(" ")}>
       <div className="markdown-section__inner">
-        <article className={contentWidth}>{children}</article>
+        <div className={contentWidth}>{children}</div>
       </div>
     </div>
   )