@servicetitan/form 38.2.0 → 38.3.0

package/dist/demo/index.d.ts

@@ -3,6 +3,7 @@ export * from './date-range-picker';
 export * from './file-uploader';
 export * from './number-input';
 export * from './phone-number-input';
+export * from './phone-number-input-a2';
 export * from './original-number-input';
 export * from './input-date-mask';
 //# sourceMappingURL=index.d.ts.map

package/dist/demo/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/demo/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,sBAAsB,CAAC;AACrC,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/demo/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,sBAAsB,CAAC;AACrC,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC"}

package/dist/demo/index.js

@@ -3,6 +3,7 @@ export * from './date-range-picker';
 export * from './file-uploader';
 export * from './number-input';
 export * from './phone-number-input';
+export * from './phone-number-input-a2';
 export * from './original-number-input';
 export * from './input-date-mask';
 

package/dist/demo/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/demo/index.ts"],"sourcesContent":["export * from './color-picker';\nexport * from './date-range-picker';\nexport * from './file-uploader';\nexport * from './number-input';\nexport * from './phone-number-input';\nexport * from './original-number-input';\nexport * from './input-date-mask';\n"],"names":[],"mappings":"AAAA,cAAc,iBAAiB;AAC/B,cAAc,sBAAsB;AACpC,cAAc,kBAAkB;AAChC,cAAc,iBAAiB;AAC/B,cAAc,uBAAuB;AACrC,cAAc,0BAA0B;AACxC,cAAc,oBAAoB"}
+{"version":3,"sources":["../../src/demo/index.ts"],"sourcesContent":["export * from './color-picker';\nexport * from './date-range-picker';\nexport * from './file-uploader';\nexport * from './number-input';\nexport * from './phone-number-input';\nexport * from './phone-number-input-a2';\nexport * from './original-number-input';\nexport * from './input-date-mask';\n"],"names":[],"mappings":"AAAA,cAAc,iBAAiB;AAC/B,cAAc,sBAAsB;AACpC,cAAc,kBAAkB;AAChC,cAAc,iBAAiB;AAC/B,cAAc,uBAAuB;AACrC,cAAc,0BAA0B;AACxC,cAAc,0BAA0B;AACxC,cAAc,oBAAoB"}

package/dist/demo/phone-number-input-a2.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+export declare const PhoneNumberInputA2Example: FC;
+//# sourceMappingURL=phone-number-input-a2.d.ts.map

package/dist/demo/phone-number-input-a2.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"phone-number-input-a2.d.ts","sourceRoot":"","sources":["../../src/demo/phone-number-input-a2.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,EAAE,EAAY,MAAM,OAAO,CAAC;AAyBlD,eAAO,MAAM,yBAAyB,EAAE,EA+DtC,CAAC"}

package/dist/demo/phone-number-input-a2.js

@@ -0,0 +1,99 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { observer } from 'mobx-react';
+import { PhoneNumberInputA2 } from '..';
+const cultures = {
+    nanp: {
+        PhoneFormat: {
+            SimplePhoneMask: '(999) 999-9999?',
+            SimplePhonePlaceholder: '(___) ___-____'
+        }
+    },
+    au: {
+        PhoneFormat: {
+            SimplePhoneMask: '99 9999 9999',
+            SimplePhonePlaceholder: '__ ____ ____'
+        }
+    }
+};
+export const PhoneNumberInputA2Example = observer(()=>{
+    const [value, setValue] = useState('');
+    const [cultureKey, setCultureKey] = useState('nanp');
+    const [sip, setSip] = useState(false);
+    const handleChange = (e)=>{
+        setValue(e.target.value);
+    };
+    const handleCultureChange = (e)=>{
+        setCultureKey(e.target.value);
+        setValue('');
+    };
+    return /*#__PURE__*/ _jsxs("div", {
+        children: [
+            /*#__PURE__*/ _jsxs("fieldset", {
+                children: [
+                    /*#__PURE__*/ _jsx("legend", {
+                        children: "Region"
+                    }),
+                    /*#__PURE__*/ _jsxs("label", {
+                        children: [
+                            /*#__PURE__*/ _jsx("input", {
+                                type: "radio",
+                                name: "culture",
+                                value: "nanp",
+                                checked: cultureKey === 'nanp',
+                                onChange: handleCultureChange
+                            }),
+                            "US/Canada (NANP)"
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs("label", {
+                        style: {
+                            marginLeft: 16
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx("input", {
+                                type: "radio",
+                                name: "culture",
+                                value: "au",
+                                checked: cultureKey === 'au',
+                                onChange: handleCultureChange
+                            }),
+                            "Australia"
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx("br", {}),
+            /*#__PURE__*/ _jsxs("label", {
+                children: [
+                    /*#__PURE__*/ _jsx("input", {
+                        type: "checkbox",
+                        checked: sip,
+                        onChange: (e)=>{
+                            setSip(e.target.checked);
+                            setValue('');
+                        }
+                    }),
+                    "SIP"
+                ]
+            }),
+            /*#__PURE__*/ _jsx("br", {}),
+            /*#__PURE__*/ _jsx("br", {}),
+            /*#__PURE__*/ _jsx(PhoneNumberInputA2, {
+                culture: cultures[cultureKey],
+                label: "Phone",
+                value: value,
+                onChange: handleChange,
+                sip: sip
+            }),
+            /*#__PURE__*/ _jsxs("p", {
+                children: [
+                    "Returned value: ",
+                    value
+                ]
+            })
+        ]
+    });
+});
+
+//# sourceMappingURL=phone-number-input-a2.js.map

package/dist/demo/phone-number-input-a2.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/demo/phone-number-input-a2.tsx"],"sourcesContent":["import { ChangeEvent, FC, useState } from 'react';\n\nimport { observer } from 'mobx-react';\n\nimport { Culture } from '@servicetitan/culture';\n\nimport { PhoneNumberInputA2 } from '..';\n\ntype CultureKey = 'nanp' | 'au';\n\nconst cultures: Record<CultureKey, Culture> = {\n    nanp: {\n        PhoneFormat: {\n            SimplePhoneMask: '(999) 999-9999?',\n            SimplePhonePlaceholder: '(___) ___-____',\n        },\n    } as Culture,\n    au: {\n        PhoneFormat: {\n            SimplePhoneMask: '99 9999 9999',\n            SimplePhonePlaceholder: '__ ____ ____',\n        },\n    } as Culture,\n};\n\nexport const PhoneNumberInputA2Example: FC = observer(() => {\n    const [value, setValue] = useState('');\n    const [cultureKey, setCultureKey] = useState<CultureKey>('nanp');\n    const [sip, setSip] = useState(false);\n\n    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n        setValue(e.target.value);\n    };\n\n    const handleCultureChange = (e: ChangeEvent<HTMLInputElement>) => {\n        setCultureKey(e.target.value as CultureKey);\n        setValue('');\n    };\n\n    return (\n        <div>\n            <fieldset>\n                <legend>Region</legend>\n                <label>\n                    <input\n                        type=\"radio\"\n                        name=\"culture\"\n                        value=\"nanp\"\n                        checked={cultureKey === 'nanp'}\n                        onChange={handleCultureChange}\n                    />\n                    US/Canada (NANP)\n                </label>\n                <label style={{ marginLeft: 16 }}>\n                    <input\n                        type=\"radio\"\n                        name=\"culture\"\n                        value=\"au\"\n                        checked={cultureKey === 'au'}\n                        onChange={handleCultureChange}\n                    />\n                    Australia\n                </label>\n            </fieldset>\n            <br />\n            <label>\n                <input\n                    type=\"checkbox\"\n                    checked={sip}\n                    onChange={e => {\n                        setSip(e.target.checked);\n                        setValue('');\n                    }}\n                />\n                SIP\n            </label>\n            <br />\n            <br />\n            <PhoneNumberInputA2\n                culture={cultures[cultureKey]}\n                label=\"Phone\"\n                value={value}\n                onChange={handleChange}\n                sip={sip}\n            />\n            <p>Returned value: {value}</p>\n        </div>\n    );\n});\n"],"names":["useState","observer","PhoneNumberInputA2","cultures","nanp","PhoneFormat","SimplePhoneMask","SimplePhonePlaceholder","au","PhoneNumberInputA2Example","value","setValue","cultureKey","setCultureKey","sip","setSip","handleChange","e","target","handleCultureChange","div","fieldset","legend","label","input","type","name","checked","onChange","style","marginLeft","br","culture","p"],"mappings":";AAAA,SAA0BA,QAAQ,QAAQ,QAAQ;AAElD,SAASC,QAAQ,QAAQ,aAAa;AAItC,SAASC,kBAAkB,QAAQ,KAAK;AAIxC,MAAMC,WAAwC;IAC1CC,MAAM;QACFC,aAAa;YACTC,iBAAiB;YACjBC,wBAAwB;QAC5B;IACJ;IACAC,IAAI;QACAH,aAAa;YACTC,iBAAiB;YACjBC,wBAAwB;QAC5B;IACJ;AACJ;AAEA,OAAO,MAAME,4BAAgCR,SAAS;IAClD,MAAM,CAACS,OAAOC,SAAS,GAAGX,SAAS;IACnC,MAAM,CAACY,YAAYC,cAAc,GAAGb,SAAqB;IACzD,MAAM,CAACc,KAAKC,OAAO,GAAGf,SAAS;IAE/B,MAAMgB,eAAe,CAACC;QAClBN,SAASM,EAAEC,MAAM,CAACR,KAAK;IAC3B;IAEA,MAAMS,sBAAsB,CAACF;QACzBJ,cAAcI,EAAEC,MAAM,CAACR,KAAK;QAC5BC,SAAS;IACb;IAEA,qBACI,MAACS;;0BACG,MAACC;;kCACG,KAACC;kCAAO;;kCACR,MAACC;;0CACG,KAACC;gCACGC,MAAK;gCACLC,MAAK;gCACLhB,OAAM;gCACNiB,SAASf,eAAe;gCACxBgB,UAAUT;;4BACZ;;;kCAGN,MAACI;wBAAMM,OAAO;4BAAEC,YAAY;wBAAG;;0CAC3B,KAACN;gCACGC,MAAK;gCACLC,MAAK;gCACLhB,OAAM;gCACNiB,SAASf,eAAe;gCACxBgB,UAAUT;;4BACZ;;;;;0BAIV,KAACY;0BACD,MAACR;;kCACG,KAACC;wBACGC,MAAK;wBACLE,SAASb;wBACTc,UAAUX,CAAAA;4BACNF,OAAOE,EAAEC,MAAM,CAACS,OAAO;4BACvBhB,SAAS;wBACb;;oBACF;;;0BAGN,KAACoB;0BACD,KAACA;0BACD,KAAC7B;gBACG8B,SAAS7B,QAAQ,CAACS,WAAW;gBAC7BW,OAAM;gBACNb,OAAOA;gBACPkB,UAAUZ;gBACVF,KAAKA;;0BAET,MAACmB;;oBAAE;oBAAiBvB;;;;;AAGhC,GAAG"}

package/dist/form.stories.d.ts

@@ -10,4 +10,5 @@ export declare const InputDateMask: () => import("react/jsx-runtime").JSX.Elemen
 export declare const NumberInput: () => import("react/jsx-runtime").JSX.Element;
 export declare const OrdinalNumberInput: () => import("react/jsx-runtime").JSX.Element;
 export declare const PhoneNumberInput: () => import("react/jsx-runtime").JSX.Element;
+export declare const PhoneNumberInputA2: () => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=form.stories.d.ts.map

package/dist/form.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form.stories.d.ts","sourceRoot":"","sources":["../src/form.stories.tsx"],"names":[],"mappings":";;yBAegB,GAAG;;AAHnB,wBAaE;AAEF,eAAO,MAAM,WAAW,+CAA+B,CAAC;AACxD,eAAO,MAAM,eAAe,+CAAmC,CAAC;AAChE,eAAO,MAAM,YAAY,+CAAgC,CAAC;AAC1D,eAAO,MAAM,aAAa,+CAAiC,CAAC;AAC5D,eAAO,MAAM,WAAW,+CAA+B,CAAC;AACxD,eAAO,MAAM,kBAAkB,+CAAsC,CAAC;AACtE,eAAO,MAAM,gBAAgB,+CAAoC,CAAC"}
+{"version":3,"file":"form.stories.d.ts","sourceRoot":"","sources":["../src/form.stories.tsx"],"names":[],"mappings":";;yBAgBgB,GAAG;;AAHnB,wBAaE;AAEF,eAAO,MAAM,WAAW,+CAA+B,CAAC;AACxD,eAAO,MAAM,eAAe,+CAAmC,CAAC;AAChE,eAAO,MAAM,YAAY,+CAAgC,CAAC;AAC1D,eAAO,MAAM,aAAa,+CAAiC,CAAC;AAC5D,eAAO,MAAM,WAAW,+CAA+B,CAAC;AACxD,eAAO,MAAM,kBAAkB,+CAAsC,CAAC;AACtE,eAAO,MAAM,gBAAgB,+CAAoC,CAAC;AAClE,eAAO,MAAM,kBAAkB,+CAAsC,CAAC"}

package/dist/phone-number-input/index.d.ts

@@ -1,2 +1,3 @@
 export * from './phone-number-input';
+export * from './phone-number-input-a2';
 //# sourceMappingURL=index.d.ts.map

package/dist/phone-number-input/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/phone-number-input/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/phone-number-input/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,yBAAyB,CAAC"}

package/dist/phone-number-input/index.js

@@ -1,3 +1,4 @@
 export * from './phone-number-input';
+export * from './phone-number-input-a2';
 
 //# sourceMappingURL=index.js.map

package/dist/phone-number-input/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/phone-number-input/index.ts"],"sourcesContent":["export * from './phone-number-input';\n"],"names":[],"mappings":"AAAA,cAAc,uBAAuB"}
+{"version":3,"sources":["../../src/phone-number-input/index.ts"],"sourcesContent":["export * from './phone-number-input';\nexport * from './phone-number-input-a2';\n"],"names":[],"mappings":"AAAA,cAAc,uBAAuB;AACrC,cAAc,0BAA0B"}

package/dist/phone-number-input/phone-number-input-a2.d.ts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+import { TextFieldProps } from '@servicetitan/anvil2';
+import { Culture } from '@servicetitan/culture';
+type PhoneNumberInputA2Props = TextFieldProps & {
+    sip?: boolean;
+    culture?: Culture;
+};
+export declare const PhoneNumberInputA2: FC<PhoneNumberInputA2Props>;
+export {};
+//# sourceMappingURL=phone-number-input-a2.d.ts.map

package/dist/phone-number-input/phone-number-input-a2.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"phone-number-input-a2.d.ts","sourceRoot":"","sources":["../../src/phone-number-input/phone-number-input-a2.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,EAAE,EAAe,MAAM,OAAO,CAAC;AAGrD,OAAO,EAAa,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACjE,OAAO,EAAE,OAAO,EAAiB,MAAM,uBAAuB,CAAC;AAG/D,KAAK,uBAAuB,GAAG,cAAc,GAAG;IAC5C,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,uBAAuB,CA4D1D,CAAC"}

package/dist/phone-number-input/phone-number-input-a2.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import ReactInputMask from 'react-input-mask';
+import { TextField } from '@servicetitan/anvil2';
+import { CULTURE_TOKEN } from '@servicetitan/culture';
+import { useOptionalDependencies } from '@servicetitan/react-ioc';
+export const PhoneNumberInputA2 = (props)=>{
+    var _ref;
+    const { value, onChange, placeholder: propPlaceholder, culture: propCulture, sip, ...restProps } = props;
+    const [injectedCulture] = useOptionalDependencies(CULTURE_TOKEN);
+    const culture = propCulture !== null && propCulture !== void 0 ? propCulture : injectedCulture;
+    const { SimplePhoneMask = '?9999999999', SimplePhonePlaceholder = '' } = (_ref = culture === null || culture === void 0 ? void 0 : culture.PhoneFormat) !== null && _ref !== void 0 ? _ref : {};
+    const mask = SimplePhoneMask.replace(/\?/g, '');
+    const placeholder = propPlaceholder !== null && propPlaceholder !== void 0 ? propPlaceholder : SimplePhonePlaceholder;
+    const displayValue = String(value !== null && value !== void 0 ? value : '').replace(/\D/g, '');
+    // Transform output value to digits-only (unmasked)
+    const handleChange = useCallback((event)=>{
+        if (onChange) {
+            const digitsOnly = event.target.value.replace(/\D/g, '');
+            const unmaskedEvent = {
+                ...event,
+                target: {
+                    ...event.target,
+                    value: digitsOnly
+                },
+                currentTarget: {
+                    ...event.currentTarget,
+                    value: digitsOnly
+                }
+            };
+            onChange(unmaskedEvent);
+        }
+    }, [
+        onChange
+    ]);
+    if (sip) {
+        return /*#__PURE__*/ _jsx(TextField, {
+            ...restProps,
+            value: displayValue,
+            onChange: handleChange,
+            type: "tel",
+            placeholder: placeholder
+        });
+    }
+    const renderTextField = (inputProps)=>{
+        // Exclude 'size' as it conflicts with TextField's size prop type
+        const { size: UNUSED_SIZE, ...filteredProps } = inputProps;
+        return /*#__PURE__*/ _jsx(TextField, {
+            ...filteredProps,
+            ...restProps,
+            type: "tel",
+            placeholder: placeholder
+        });
+    };
+    return /*#__PURE__*/ _jsx(ReactInputMask, {
+        value: displayValue,
+        onChange: handleChange,
+        mask: mask,
+        maskChar: null,
+        children: renderTextField
+    });
+};
+
+//# sourceMappingURL=phone-number-input-a2.js.map

package/dist/phone-number-input/phone-number-input-a2.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/phone-number-input/phone-number-input-a2.tsx"],"sourcesContent":["import { ChangeEvent, FC, useCallback } from 'react';\nimport ReactInputMask from 'react-input-mask';\n\nimport { TextField, TextFieldProps } from '@servicetitan/anvil2';\nimport { Culture, CULTURE_TOKEN } from '@servicetitan/culture';\nimport { useOptionalDependencies } from '@servicetitan/react-ioc';\n\ntype PhoneNumberInputA2Props = TextFieldProps & {\n    sip?: boolean;\n    culture?: Culture;\n};\n\nexport const PhoneNumberInputA2: FC<PhoneNumberInputA2Props> = props => {\n    const {\n        value,\n        onChange,\n        placeholder: propPlaceholder,\n        culture: propCulture,\n        sip,\n        ...restProps\n    } = props;\n\n    const [injectedCulture] = useOptionalDependencies(CULTURE_TOKEN);\n    const culture = propCulture ?? injectedCulture;\n    const { SimplePhoneMask = '?9999999999', SimplePhonePlaceholder = '' } =\n        culture?.PhoneFormat ?? {};\n\n    const mask = SimplePhoneMask.replace(/\\?/g, '');\n    const placeholder = propPlaceholder ?? SimplePhonePlaceholder;\n    const displayValue = String(value ?? '').replace(/\\D/g, '');\n\n    // Transform output value to digits-only (unmasked)\n    const handleChange = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            if (onChange) {\n                const digitsOnly = event.target.value.replace(/\\D/g, '');\n\n                const unmaskedEvent = {\n                    ...event,\n                    target: { ...event.target, value: digitsOnly },\n                    currentTarget: { ...event.currentTarget, value: digitsOnly },\n                } as ChangeEvent<HTMLInputElement>;\n\n                onChange(unmaskedEvent);\n            }\n        },\n        [onChange]\n    );\n\n    if (sip) {\n        return (\n            <TextField\n                {...restProps}\n                value={displayValue}\n                onChange={handleChange}\n                type=\"tel\"\n                placeholder={placeholder}\n            />\n        );\n    }\n\n    const renderTextField = (inputProps: Record<string, unknown>) => {\n        // Exclude 'size' as it conflicts with TextField's size prop type\n        const { size: UNUSED_SIZE, ...filteredProps } = inputProps;\n        return <TextField {...filteredProps} {...restProps} type=\"tel\" placeholder={placeholder} />;\n    };\n\n    return (\n        <ReactInputMask value={displayValue} onChange={handleChange} mask={mask} maskChar={null}>\n            {renderTextField as any}\n        </ReactInputMask>\n    );\n};\n"],"names":["useCallback","ReactInputMask","TextField","CULTURE_TOKEN","useOptionalDependencies","PhoneNumberInputA2","props","value","onChange","placeholder","propPlaceholder","culture","propCulture","sip","restProps","injectedCulture","SimplePhoneMask","SimplePhonePlaceholder","PhoneFormat","mask","replace","displayValue","String","handleChange","event","digitsOnly","target","unmaskedEvent","currentTarget","type","renderTextField","inputProps","size","UNUSED_SIZE","filteredProps","maskChar"],"mappings":";AAAA,SAA0BA,WAAW,QAAQ,QAAQ;AACrD,OAAOC,oBAAoB,mBAAmB;AAE9C,SAASC,SAAS,QAAwB,uBAAuB;AACjE,SAAkBC,aAAa,QAAQ,wBAAwB;AAC/D,SAASC,uBAAuB,QAAQ,0BAA0B;AAOlE,OAAO,MAAMC,qBAAkDC,CAAAA;;IAC3D,MAAM,EACFC,KAAK,EACLC,QAAQ,EACRC,aAAaC,eAAe,EAC5BC,SAASC,WAAW,EACpBC,GAAG,EACH,GAAGC,WACN,GAAGR;IAEJ,MAAM,CAACS,gBAAgB,GAAGX,wBAAwBD;IAClD,MAAMQ,UAAUC,wBAAAA,yBAAAA,cAAeG;IAC/B,MAAM,EAAEC,kBAAkB,aAAa,EAAEC,yBAAyB,EAAE,EAAE,WAClEN,oBAAAA,8BAAAA,QAASO,WAAW,uCAAI,CAAC;IAE7B,MAAMC,OAAOH,gBAAgBI,OAAO,CAAC,OAAO;IAC5C,MAAMX,cAAcC,4BAAAA,6BAAAA,kBAAmBO;IACvC,MAAMI,eAAeC,OAAOf,kBAAAA,mBAAAA,QAAS,IAAIa,OAAO,CAAC,OAAO;IAExD,mDAAmD;IACnD,MAAMG,eAAevB,YACjB,CAACwB;QACG,IAAIhB,UAAU;YACV,MAAMiB,aAAaD,MAAME,MAAM,CAACnB,KAAK,CAACa,OAAO,CAAC,OAAO;YAErD,MAAMO,gBAAgB;gBAClB,GAAGH,KAAK;gBACRE,QAAQ;oBAAE,GAAGF,MAAME,MAAM;oBAAEnB,OAAOkB;gBAAW;gBAC7CG,eAAe;oBAAE,GAAGJ,MAAMI,aAAa;oBAAErB,OAAOkB;gBAAW;YAC/D;YAEAjB,SAASmB;QACb;IACJ,GACA;QAACnB;KAAS;IAGd,IAAIK,KAAK;QACL,qBACI,KAACX;YACI,GAAGY,SAAS;YACbP,OAAOc;YACPb,UAAUe;YACVM,MAAK;YACLpB,aAAaA;;IAGzB;IAEA,MAAMqB,kBAAkB,CAACC;QACrB,iEAAiE;QACjE,MAAM,EAAEC,MAAMC,WAAW,EAAE,GAAGC,eAAe,GAAGH;QAChD,qBAAO,KAAC7B;YAAW,GAAGgC,aAAa;YAAG,GAAGpB,SAAS;YAAEe,MAAK;YAAMpB,aAAaA;;IAChF;IAEA,qBACI,KAACR;QAAeM,OAAOc;QAAcb,UAAUe;QAAcJ,MAAMA;QAAMgB,UAAU;kBAC9EL;;AAGb,EAAE"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@servicetitan/form",
-    "version": "38.2.0",
+    "version": "38.3.0",
     "description": "",
     "homepage": "https://docs.st.dev/docs/frontend/form",
     "repository": {
@@ -17,10 +17,11 @@
     ],
     "devDependencies": {
         "@progress/kendo-react-dateinputs": "~5.5.0",
-        "@servicetitan/confirm": "^38.2.0",
-        "@servicetitan/culture": "^38.2.0",
+        "@servicetitan/anvil2": "^2.0.1",
+        "@servicetitan/confirm": "^38.3.0",
+        "@servicetitan/culture": "^38.3.0",
         "@servicetitan/design-system": "~14.5.1",
-        "@servicetitan/form-state": "^38.2.0",
+        "@servicetitan/form-state": "^38.3.0",
         "@servicetitan/hash-browser-router": "^34.0.1",
         "@servicetitan/react-ioc": "^34.0.1",
         "@servicetitan/tokens": ">=12.2.1",
@@ -37,12 +38,18 @@
         "react": "^18.2.0",
         "resumablejs": "~1.0.2"
     },
+    "peerDependenciesMeta": {
+        "@servicetitan/anvil2": {
+            "optional": true
+        }
+    },
     "peerDependencies": {
         "@progress/kendo-react-dateinputs": "~5.5.0",
-        "@servicetitan/confirm": "^38.2.0",
-        "@servicetitan/culture": "^38.2.0",
+        "@servicetitan/anvil2": "^2.0.1",
+        "@servicetitan/confirm": "^38.3.0",
+        "@servicetitan/culture": "^38.3.0",
         "@servicetitan/design-system": ">=13.2.1",
-        "@servicetitan/form-state": "^38.2.0",
+        "@servicetitan/form-state": "^38.3.0",
         "@servicetitan/react-ioc": ">21.0.0",
         "@servicetitan/tokens": ">=12.2.1",
         "accounting": "~0.4.1",
@@ -67,5 +74,5 @@
         "less": true,
         "webpack": false
     },
-    "gitHead": "b013c9f39c05c44f888a5bca5ff6aadb89cd7a6f"
+    "gitHead": "1792c3dadb5fef82bb6263ade086b9c3b13c86fb"
 }

package/src/demo/index.ts

@@ -3,5 +3,6 @@ export * from './date-range-picker';
 export * from './file-uploader';
 export * from './number-input';
 export * from './phone-number-input';
+export * from './phone-number-input-a2';
 export * from './original-number-input';
 export * from './input-date-mask';

package/src/demo/phone-number-input-a2.tsx

@@ -0,0 +1,89 @@
+import { ChangeEvent, FC, useState } from 'react';
+
+import { observer } from 'mobx-react';
+
+import { Culture } from '@servicetitan/culture';
+
+import { PhoneNumberInputA2 } from '..';
+
+type CultureKey = 'nanp' | 'au';
+
+const cultures: Record<CultureKey, Culture> = {
+    nanp: {
+        PhoneFormat: {
+            SimplePhoneMask: '(999) 999-9999?',
+            SimplePhonePlaceholder: '(___) ___-____',
+        },
+    } as Culture,
+    au: {
+        PhoneFormat: {
+            SimplePhoneMask: '99 9999 9999',
+            SimplePhonePlaceholder: '__ ____ ____',
+        },
+    } as Culture,
+};
+
+export const PhoneNumberInputA2Example: FC = observer(() => {
+    const [value, setValue] = useState('');
+    const [cultureKey, setCultureKey] = useState<CultureKey>('nanp');
+    const [sip, setSip] = useState(false);
+
+    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+        setValue(e.target.value);
+    };
+
+    const handleCultureChange = (e: ChangeEvent<HTMLInputElement>) => {
+        setCultureKey(e.target.value as CultureKey);
+        setValue('');
+    };
+
+    return (
+        <div>
+            <fieldset>
+                <legend>Region</legend>
+                <label>
+                    <input
+                        type="radio"
+                        name="culture"
+                        value="nanp"
+                        checked={cultureKey === 'nanp'}
+                        onChange={handleCultureChange}
+                    />
+                    US/Canada (NANP)
+                </label>
+                <label style={{ marginLeft: 16 }}>
+                    <input
+                        type="radio"
+                        name="culture"
+                        value="au"
+                        checked={cultureKey === 'au'}
+                        onChange={handleCultureChange}
+                    />
+                    Australia
+                </label>
+            </fieldset>
+            <br />
+            <label>
+                <input
+                    type="checkbox"
+                    checked={sip}
+                    onChange={e => {
+                        setSip(e.target.checked);
+                        setValue('');
+                    }}
+                />
+                SIP
+            </label>
+            <br />
+            <br />
+            <PhoneNumberInputA2
+                culture={cultures[cultureKey]}
+                label="Phone"
+                value={value}
+                onChange={handleChange}
+                sip={sip}
+            />
+            <p>Returned value: {value}</p>
+        </div>
+    );
+});

package/src/form.stories.tsx

@@ -7,6 +7,7 @@ import {
     InputDateMaskExample,
     NumberInputExample,
     OrdinalNumberInputExample,
+    PhoneNumberInputA2Example,
     PhoneNumberInputExample,
 } from './demo';
 
@@ -32,3 +33,4 @@ export const InputDateMask = () => <InputDateMaskExample />;
 export const NumberInput = () => <NumberInputExample />;
 export const OrdinalNumberInput = () => <OrdinalNumberInputExample />;
 export const PhoneNumberInput = () => <PhoneNumberInputExample />;
+export const PhoneNumberInputA2 = () => <PhoneNumberInputA2Example />;

package/src/phone-number-input/index.ts

@@ -1 +1,2 @@
 export * from './phone-number-input';
+export * from './phone-number-input-a2';

package/src/phone-number-input/phone-number-input-a2.tsx

@@ -0,0 +1,73 @@
+import { ChangeEvent, FC, useCallback } from 'react';
+import ReactInputMask from 'react-input-mask';
+
+import { TextField, TextFieldProps } from '@servicetitan/anvil2';
+import { Culture, CULTURE_TOKEN } from '@servicetitan/culture';
+import { useOptionalDependencies } from '@servicetitan/react-ioc';
+
+type PhoneNumberInputA2Props = TextFieldProps & {
+    sip?: boolean;
+    culture?: Culture;
+};
+
+export const PhoneNumberInputA2: FC<PhoneNumberInputA2Props> = props => {
+    const {
+        value,
+        onChange,
+        placeholder: propPlaceholder,
+        culture: propCulture,
+        sip,
+        ...restProps
+    } = props;
+
+    const [injectedCulture] = useOptionalDependencies(CULTURE_TOKEN);
+    const culture = propCulture ?? injectedCulture;
+    const { SimplePhoneMask = '?9999999999', SimplePhonePlaceholder = '' } =
+        culture?.PhoneFormat ?? {};
+
+    const mask = SimplePhoneMask.replace(/\?/g, '');
+    const placeholder = propPlaceholder ?? SimplePhonePlaceholder;
+    const displayValue = String(value ?? '').replace(/\D/g, '');
+
+    // Transform output value to digits-only (unmasked)
+    const handleChange = useCallback(
+        (event: ChangeEvent<HTMLInputElement>) => {
+            if (onChange) {
+                const digitsOnly = event.target.value.replace(/\D/g, '');
+
+                const unmaskedEvent = {
+                    ...event,
+                    target: { ...event.target, value: digitsOnly },
+                    currentTarget: { ...event.currentTarget, value: digitsOnly },
+                } as ChangeEvent<HTMLInputElement>;
+
+                onChange(unmaskedEvent);
+            }
+        },
+        [onChange]
+    );
+
+    if (sip) {
+        return (
+            <TextField
+                {...restProps}
+                value={displayValue}
+                onChange={handleChange}
+                type="tel"
+                placeholder={placeholder}
+            />
+        );
+    }
+
+    const renderTextField = (inputProps: Record<string, unknown>) => {
+        // Exclude 'size' as it conflicts with TextField's size prop type
+        const { size: UNUSED_SIZE, ...filteredProps } = inputProps;
+        return <TextField {...filteredProps} {...restProps} type="tel" placeholder={placeholder} />;
+    };
+
+    return (
+        <ReactInputMask value={displayValue} onChange={handleChange} mask={mask} maskChar={null}>
+            {renderTextField as any}
+        </ReactInputMask>
+    );
+};