hazo_auth 5.1.21 → 5.1.22

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -25,6 +25,8 @@ export type UseCreateFirmFormResult = {
25
25
  isSubmitting: boolean;
26
26
  isSuccess: boolean;
27
27
  isSubmitDisabled: boolean;
28
+ /** True when Chrome autofill preview is shown but value not yet committed */
29
+ hasAutofillPreview: boolean;
28
30
  handleFieldChange: (field: keyof CreateFirmFormValues, value: string) => void;
29
31
  handleSubmit: (e: FormEvent) => Promise<void>;
30
32
  /** Ref to attach to firm_name input for DOM value sync */
@@ -1 +1 @@
1
- {"version":3,"file":"use_create_firm_form.d.ts","sourceRoot":"","sources":["../../../../../src/components/layouts/create_firm/hooks/use_create_firm_form.ts"],"names":[],"mappings":"AAIA,OAAO,EAAqD,SAAS,EAAE,MAAM,OAAO,CAAC;AAGrF,MAAM,MAAM,oBAAoB,GAAG;IACjC,SAAS,EAAE,MAAM,CAAC;IAClB,aAAa,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG;IACrC,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,SAAS,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,4CAA4C;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE;QACP,IAAI,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;QAChE,KAAK,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;KAClE,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG;IACpC,MAAM,EAAE,oBAAoB,CAAC;IAC7B,MAAM,EAAE,oBAAoB,CAAC;IAC7B,YAAY,EAAE,OAAO,CAAC;IACtB,SAAS,EAAE,OAAO,CAAC;IACnB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,oBAAoB,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9E,YAAY,EAAE,CAAC,CAAC,EAAE,SAAS,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9C,0DAA0D;IAC1D,WAAW,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC;IAC/C,8DAA8D;IAC9D,eAAe,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC;IACnD,oEAAoE;IACpE,WAAW,EAAE,MAAM,IAAI,CAAC;CACzB,CAAC;AAGF,wBAAgB,oBAAoB,CAClC,OAAO,GAAE,wBAA6B,GACrC,uBAAuB,CAmNzB"}
1
+ {"version":3,"file":"use_create_firm_form.d.ts","sourceRoot":"","sources":["../../../../../src/components/layouts/create_firm/hooks/use_create_firm_form.ts"],"names":[],"mappings":"AAIA,OAAO,EAAqD,SAAS,EAAE,MAAM,OAAO,CAAC;AAGrF,MAAM,MAAM,oBAAoB,GAAG;IACjC,SAAS,EAAE,MAAM,CAAC;IAClB,aAAa,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG;IACrC,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,SAAS,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,4CAA4C;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE;QACP,IAAI,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;QAChE,KAAK,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;KAClE,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG;IACpC,MAAM,EAAE,oBAAoB,CAAC;IAC7B,MAAM,EAAE,oBAAoB,CAAC;IAC7B,YAAY,EAAE,OAAO,CAAC;IACtB,SAAS,EAAE,OAAO,CAAC;IACnB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,6EAA6E;IAC7E,kBAAkB,EAAE,OAAO,CAAC;IAC5B,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,oBAAoB,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9E,YAAY,EAAE,CAAC,CAAC,EAAE,SAAS,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9C,0DAA0D;IAC1D,WAAW,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC;IAC/C,8DAA8D;IAC9D,eAAe,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC;IACnD,oEAAoE;IACpE,WAAW,EAAE,MAAM,IAAI,CAAC;CACzB,CAAC;AAGF,wBAAgB,oBAAoB,CAClC,OAAO,GAAE,wBAA6B,GACrC,uBAAuB,CAqQzB"}
@@ -17,6 +17,8 @@ export function use_create_firm_form(options = {}) {
17
17
  const orgStructureRef = useRef(null);
18
18
  // Counter to force re-evaluation of isSubmitDisabled after sync
19
19
  const [syncCounter, setSyncCounter] = useState(0);
20
+ // Track Chrome autofill preview state (visual overlay without DOM value)
21
+ const [hasAutofillPreview, setHasAutofillPreview] = useState(false);
20
22
  // Sync React state from DOM values (call when autofill detected or on focus)
21
23
  const syncFromDOM = useCallback(() => {
22
24
  let didSync = false;
@@ -46,6 +48,7 @@ export function use_create_firm_form(options = {}) {
46
48
  if (e.animationName === "onAutoFillStart") {
47
49
  // Delay to allow browser to populate the value
48
50
  setTimeout(syncFromDOM, 50);
51
+ setHasAutofillPreview(false); // Autofill committed
49
52
  }
50
53
  };
51
54
  const firmNameInput = firmNameRef.current;
@@ -56,9 +59,45 @@ export function use_create_firm_form(options = {}) {
56
59
  const handleFocus = () => {
57
60
  // Small delay to let browser complete any pending value changes
58
61
  setTimeout(syncFromDOM, 10);
62
+ setHasAutofillPreview(false); // User interacted, preview committed
59
63
  };
60
64
  firmNameInput === null || firmNameInput === void 0 ? void 0 : firmNameInput.addEventListener("focus", handleFocus);
61
65
  orgStructureInput === null || orgStructureInput === void 0 ? void 0 : orgStructureInput.addEventListener("focus", handleFocus);
66
+ // Handle change event - fires when autofill commits
67
+ const handleChange = () => {
68
+ setTimeout(syncFromDOM, 10);
69
+ setHasAutofillPreview(false);
70
+ };
71
+ firmNameInput === null || firmNameInput === void 0 ? void 0 : firmNameInput.addEventListener("change", handleChange);
72
+ orgStructureInput === null || orgStructureInput === void 0 ? void 0 : orgStructureInput.addEventListener("change", handleChange);
73
+ // Handle input event with inputType check for autofill
74
+ const handleInput = (e) => {
75
+ const inputEvent = e;
76
+ if (inputEvent.inputType === "insertReplacementText") {
77
+ // Autofill occurred - sync immediately
78
+ setTimeout(syncFromDOM, 10);
79
+ setHasAutofillPreview(false);
80
+ }
81
+ };
82
+ firmNameInput === null || firmNameInput === void 0 ? void 0 : firmNameInput.addEventListener("input", handleInput);
83
+ orgStructureInput === null || orgStructureInput === void 0 ? void 0 : orgStructureInput.addEventListener("input", handleInput);
84
+ // Check for :-webkit-autofill preview state periodically
85
+ // This detects Chrome's visual preview before user commits
86
+ const checkAutofillPreview = () => {
87
+ var _a, _b, _c;
88
+ const firmNameHasPreview = (_b = (_a = firmNameInput === null || firmNameInput === void 0 ? void 0 : firmNameInput.matches) === null || _a === void 0 ? void 0 : _a.call(firmNameInput, ":-webkit-autofill")) !== null && _b !== void 0 ? _b : false;
89
+ const firmNameValueEmpty = !((_c = firmNameInput === null || firmNameInput === void 0 ? void 0 : firmNameInput.value) === null || _c === void 0 ? void 0 : _c.trim());
90
+ // Preview is showing if Chrome applies :-webkit-autofill but DOM value is empty
91
+ if (firmNameHasPreview && firmNameValueEmpty) {
92
+ setHasAutofillPreview(true);
93
+ }
94
+ else if (!firmNameHasPreview || !firmNameValueEmpty) {
95
+ setHasAutofillPreview(false);
96
+ }
97
+ };
98
+ // Check periodically for autofill preview state (Chrome applies it asynchronously)
99
+ const previewCheckInterval = setInterval(checkAutofillPreview, 500);
100
+ checkAutofillPreview(); // Initial check
62
101
  // Initial sync after mount (catches pre-populated values)
63
102
  setTimeout(syncFromDOM, 100);
64
103
  return () => {
@@ -66,6 +105,11 @@ export function use_create_firm_form(options = {}) {
66
105
  orgStructureInput === null || orgStructureInput === void 0 ? void 0 : orgStructureInput.removeEventListener("animationstart", handleAutofill);
67
106
  firmNameInput === null || firmNameInput === void 0 ? void 0 : firmNameInput.removeEventListener("focus", handleFocus);
68
107
  orgStructureInput === null || orgStructureInput === void 0 ? void 0 : orgStructureInput.removeEventListener("focus", handleFocus);
108
+ firmNameInput === null || firmNameInput === void 0 ? void 0 : firmNameInput.removeEventListener("change", handleChange);
109
+ orgStructureInput === null || orgStructureInput === void 0 ? void 0 : orgStructureInput.removeEventListener("change", handleChange);
110
+ firmNameInput === null || firmNameInput === void 0 ? void 0 : firmNameInput.removeEventListener("input", handleInput);
111
+ orgStructureInput === null || orgStructureInput === void 0 ? void 0 : orgStructureInput.removeEventListener("input", handleInput);
112
+ clearInterval(previewCheckInterval);
69
113
  };
70
114
  }, [syncFromDOM]);
71
115
  const handleFieldChange = useCallback((field, value) => {
@@ -168,6 +212,7 @@ export function use_create_firm_form(options = {}) {
168
212
  isSubmitting,
169
213
  isSuccess,
170
214
  isSubmitDisabled,
215
+ hasAutofillPreview,
171
216
  handleFieldChange,
172
217
  handleSubmit,
173
218
  firmNameRef,
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/layouts/create_firm/index.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAOlD,OAAO,EACL,KAAK,sBAAsB,EAC5B,MAAM,uCAAuC,CAAC;AAQ/C,MAAM,MAAM,qBAAqB,GAAG;IAClC,sCAAsC;IACtC,SAAS,EAAE,MAAM,GAAG,eAAe,CAAC;IACpC,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2CAA2C;IAC3C,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,mBAAmB;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gCAAgC;IAChC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,sCAAsC;IACtC,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,oCAAoC;IACpC,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,0CAA0C;IAC1C,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,sCAAsC;IACtC,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,8BAA8B;IAC9B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,gDAAgD;IAChD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,sCAAsC;IACtC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,4CAA4C;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iDAAiD;IACjD,SAAS,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,6BAA6B;IAC7B,aAAa,CAAC,EAAE,sBAAsB,CAAC;IACvC,2BAA2B;IAC3B,MAAM,CAAC,EAAE;QACP,IAAI,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;QAChE,KAAK,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;KAClE,CAAC;CACH,CAAC;AAGF,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,SAAS,EACT,SAA8B,EAC9B,sBAAkC,EAClC,OAA4B,EAC5B,WAAuD,EACvD,eAA6B,EAC7B,qBAA8C,EAC9C,mBAA8C,EAC9C,yBAA6D,EAC7D,qBAAsC,EACtC,mBAAmC,EACnC,eAA4D,EAC5D,cAAoB,EACpB,WAAW,EACX,SAAS,EACT,aAAa,EACb,MAAM,GACP,EAAE,qBAAqB,2CAoJvB;AAGD,OAAO,EAAE,gBAAgB,EAAE,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/layouts/create_firm/index.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAOlD,OAAO,EACL,KAAK,sBAAsB,EAC5B,MAAM,uCAAuC,CAAC;AAQ/C,MAAM,MAAM,qBAAqB,GAAG;IAClC,sCAAsC;IACtC,SAAS,EAAE,MAAM,GAAG,eAAe,CAAC;IACpC,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2CAA2C;IAC3C,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,mBAAmB;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gCAAgC;IAChC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,sCAAsC;IACtC,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,oCAAoC;IACpC,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,0CAA0C;IAC1C,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,sCAAsC;IACtC,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,8BAA8B;IAC9B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,gDAAgD;IAChD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,sCAAsC;IACtC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,4CAA4C;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iDAAiD;IACjD,SAAS,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,6BAA6B;IAC7B,aAAa,CAAC,EAAE,sBAAsB,CAAC;IACvC,2BAA2B;IAC3B,MAAM,CAAC,EAAE;QACP,IAAI,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;QAChE,KAAK,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;KAClE,CAAC;CACH,CAAC;AAGF,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,SAAS,EACT,SAA8B,EAC9B,sBAAkC,EAClC,OAA4B,EAC5B,WAAuD,EACvD,eAA6B,EAC7B,qBAA8C,EAC9C,mBAA8C,EAC9C,yBAA6D,EAC7D,qBAAsC,EACtC,mBAAmC,EACnC,eAA4D,EAC5D,cAAoB,EACpB,WAAW,EACX,SAAS,EACT,aAAa,EACb,MAAM,GACP,EAAE,qBAAqB,2CA2JvB;AAGD,OAAO,EAAE,gBAAgB,EAAE,CAAC"}
@@ -39,7 +39,7 @@ export default function CreateFirmLayout({ image_src, image_alt = "Create your f
39
39
  if (form.isSuccess) {
40
40
  return (_jsx(TwoColumnAuthLayout, { imageSrc: image_src, imageAlt: image_alt, imageBackgroundColor: image_background_color, formContent: _jsxs(_Fragment, { children: [_jsx(FormHeader, { heading: heading, subHeading: sub_heading }), _jsxs("div", { className: "cls_create_firm_layout_success flex flex-col items-center justify-center gap-4 p-8 text-center", children: [_jsx(CheckCircle, { className: "cls_create_firm_layout_success_icon h-16 w-16 text-green-600", "aria-hidden": "true" }), _jsx("p", { className: "cls_create_firm_layout_success_message text-lg font-medium text-slate-900", children: success_message }), _jsx("p", { className: "cls_create_firm_layout_redirect_message text-sm text-muted-foreground", children: "Redirecting you to the application..." })] })] }) }));
41
41
  }
42
- return (_jsx(TwoColumnAuthLayout, { imageSrc: image_src, imageAlt: image_alt, imageBackgroundColor: image_background_color, formContent: _jsxs(_Fragment, { children: [_jsx(FormHeader, { heading: heading, subHeading: sub_heading }), _jsxs("div", { className: "cls_create_firm_layout_info mb-6 flex items-start gap-3 rounded-lg border border-blue-200 bg-blue-50 p-4", children: [_jsx(Building2, { className: "mt-0.5 h-5 w-5 flex-shrink-0 text-blue-600" }), _jsxs("div", { className: "text-sm text-blue-800", children: [_jsx("p", { className: "font-medium", children: "Welcome!" }), _jsx("p", { children: "Create your firm to start using the application. You'll become the administrator of your firm and can invite team members later." })] })] }), _jsxs("form", { className: "cls_create_firm_layout_form_fields flex flex-col gap-5", onSubmit: form.handleSubmit, "aria-label": "Create firm form", children: [renderFields(form), form.errors.form && (_jsx("div", { className: "cls_create_firm_layout_form_error rounded-md bg-red-50 p-3 text-sm text-red-600", children: form.errors.form })), _jsx(FormActionButtons, { submitLabel: submit_button_label, buttonPalette: resolvedButtonPalette, isSubmitDisabled: form.isSubmitDisabled, submitAriaLabel: "Create your firm", hideCancel: true })] })] }) }));
42
+ return (_jsx(TwoColumnAuthLayout, { imageSrc: image_src, imageAlt: image_alt, imageBackgroundColor: image_background_color, formContent: _jsxs(_Fragment, { children: [_jsx(FormHeader, { heading: heading, subHeading: sub_heading }), _jsxs("div", { className: "cls_create_firm_layout_info mb-6 flex items-start gap-3 rounded-lg border border-blue-200 bg-blue-50 p-4", children: [_jsx(Building2, { className: "mt-0.5 h-5 w-5 flex-shrink-0 text-blue-600" }), _jsxs("div", { className: "text-sm text-blue-800", children: [_jsx("p", { className: "font-medium", children: "Welcome!" }), _jsx("p", { children: "Create your firm to start using the application. You'll become the administrator of your firm and can invite team members later." })] })] }), _jsxs("form", { className: "cls_create_firm_layout_form_fields flex flex-col gap-5", onSubmit: form.handleSubmit, "aria-label": "Create firm form", children: [renderFields(form), form.errors.form && (_jsx("div", { className: "cls_create_firm_layout_form_error rounded-md bg-red-50 p-3 text-sm text-red-600", children: form.errors.form })), form.hasAutofillPreview && !form.values.firm_name && (_jsx("div", { className: "cls_create_firm_layout_autofill_hint rounded-md bg-amber-50 p-3 text-sm text-amber-700", children: "Click in the firm name field to confirm the autofilled value" })), _jsx(FormActionButtons, { submitLabel: submit_button_label, buttonPalette: resolvedButtonPalette, isSubmitDisabled: form.isSubmitDisabled, submitAriaLabel: "Create your firm", hideCancel: true })] })] }) }));
43
43
  }
44
44
  // section: exports
45
45
  export { CreateFirmLayout };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "hazo_auth",
3
- "version": "5.1.21",
3
+ "version": "5.1.22",
4
4
  "description": "Zero-config authentication UI components for Next.js with RBAC, OAuth, scope-based multi-tenancy, and invitations",
5
5
  "keywords": [
6
6
  "authentication",