tyrell-react 1.0.0-TC18 → 1.0.0-TC22
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.
- package/dist/components/TyDatePicker.d.ts.map +1 -1
- package/dist/components/TyDatePicker.js +12 -10
- package/dist/components/TyDatePicker.js.map +1 -1
- package/dist/components/TyModal.d.ts +22 -3
- package/dist/components/TyModal.d.ts.map +1 -1
- package/dist/components/TyModal.js +33 -12
- package/dist/components/TyModal.js.map +1 -1
- package/dist/components/TyPopup.d.ts.map +1 -1
- package/dist/components/TyPopup.js +9 -1
- package/dist/components/TyPopup.js.map +1 -1
- package/dist/version.d.ts +1 -1
- package/dist/version.js +1 -1
- package/package.json +1 -1
- package/src/components/TyDatePicker.tsx +8 -10
- package/src/components/TyModal.tsx +66 -31
- package/src/components/TyPopup.tsx +7 -1
- package/src/version.ts +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TyDatePicker.d.ts","sourceRoot":"","sources":["../../src/components/TyDatePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAK9D,MAAM,WAAW,uBAAuB;IACtC,+EAA+E;IAC/E,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,oDAAoD;IACpD,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,+EAA+E;IAC/E,MAAM,EAAE,WAAW,GAAG,aAAa,GAAG,OAAO,GAAG,UAAU,CAAC;IAC3D,8BAA8B;IAC9B,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;CAC1B;AAED,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,CAAC;IAC5F,+DAA+D;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,qCAAqC;IACrC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAE1B,kEAAkE;IAClE,MAAM,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAC;IAEtD,2CAA2C;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,gDAAgD;IAChD,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,qCAAqC;IACrC,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,+EAA+E;IAC/E,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;IAEvD,0DAA0D;IAC1D,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,wCAAwC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,uBAAuB,CAAC,KAAK,IAAI,CAAC;IAEjE,uCAAuC;IACvC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,EAAE,CAAC,KAAK,IAAI,CAAC;IAE1C,wCAAwC;IACxC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,EAAE,CAAC,KAAK,IAAI,CAAC;CAC5C;AAGD,eAAO,MAAM,YAAY,
|
|
1
|
+
{"version":3,"file":"TyDatePicker.d.ts","sourceRoot":"","sources":["../../src/components/TyDatePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAK9D,MAAM,WAAW,uBAAuB;IACtC,+EAA+E;IAC/E,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,oDAAoD;IACpD,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,+EAA+E;IAC/E,MAAM,EAAE,WAAW,GAAG,aAAa,GAAG,OAAO,GAAG,UAAU,CAAC;IAC3D,8BAA8B;IAC9B,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;CAC1B;AAED,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,CAAC;IAC5F,+DAA+D;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,qCAAqC;IACrC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAE1B,kEAAkE;IAClE,MAAM,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAC;IAEtD,2CAA2C;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,gDAAgD;IAChD,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,qCAAqC;IACrC,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,+EAA+E;IAC/E,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;IAEvD,0DAA0D;IAC1D,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,wCAAwC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,uBAAuB,CAAC,KAAK,IAAI,CAAC;IAEjE,uCAAuC;IACvC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,EAAE,CAAC,KAAK,IAAI,CAAC;IAE1C,wCAAwC;IACxC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,EAAE,CAAC,KAAK,IAAI,CAAC;CAC5C;AAGD,eAAO,MAAM,YAAY,uFAoJxB,CAAC"}
|
|
@@ -34,19 +34,21 @@ export const TyDatePicker = React.forwardRef(({ value, size, flavor, label, plac
|
|
|
34
34
|
onChange(customEvent);
|
|
35
35
|
}
|
|
36
36
|
}, [onChange]);
|
|
37
|
-
// Handle open events
|
|
37
|
+
// Handle open/close events. Guard with `event.target === element` so
|
|
38
|
+
// bubbled open/close events from popup-like descendants slotted inside
|
|
39
|
+
// (rare for a date-picker, but defensive — same fix as TyModal/TyPopup)
|
|
40
|
+
// don't fire the consumer's onOpen/onClose.
|
|
38
41
|
const handleOpen = useCallback((event) => {
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
42
|
+
if (event.target !== elementRef.current)
|
|
43
|
+
return;
|
|
44
|
+
if (onOpen)
|
|
45
|
+
onOpen(event);
|
|
43
46
|
}, [onOpen]);
|
|
44
|
-
// Handle close events
|
|
45
47
|
const handleClose = useCallback((event) => {
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
48
|
+
if (event.target !== elementRef.current)
|
|
49
|
+
return;
|
|
50
|
+
if (onClose)
|
|
51
|
+
onClose(event);
|
|
50
52
|
}, [onClose]);
|
|
51
53
|
// Set up event listeners
|
|
52
54
|
useEffect(() => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TyDatePicker.js","sourceRoot":"","sources":["../../src/components/TyDatePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AA6D/D,iDAAiD;AACjD,MAAM,CAAC,MAAM,YAAY,GAAG,KAAK,CAAC,UAAU,CAC1C,CAAC,EACC,KAAK,EACL,IAAI,EACJ,MAAM,EACN,KAAK,EACL,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,SAAS,EACT,MAAM,EACN,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,OAAO,EACP,GAAG,KAAK,EACT,EAAE,GAAG,EAAE,EAAE;IACR,MAAM,UAAU,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;IAE7C,wBAAwB;IACxB,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,GAAG,IAAI,UAAU,CAAC,OAAO,EAAE,CAAC;YAC9B,IAAI,OAAO,GAAG,KAAK,UAAU,EAAE,CAAC;gBAC9B,GAAG,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;YAC1B,CAAC;iBAAM,CAAC;gBACN,GAAG,CAAC,OAAO,GAAG,UAAU,CAAC,OAAO,CAAC;YACnC,CAAC;QACH,CAAC;IACH,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IAEV,8CAA8C;IAC9C,yEAAyE;IACzE,+DAA+D;IAC/D,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,mBAAmB;YAAE,OAAO;QACjC,MAAM,OAAO,GAAG,UAAU,CAAC,OAAO,CAAC;QACnC,IAAI,OAAO,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;YACnC,iDAAiD;YAChD,OAAe,CAAC,KAAK,GAAG,KAAK,IAAI,EAAE,CAAC;QACvC,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,uBAAuB;IACvB,MAAM,YAAY,GAAG,WAAW,CAAC,CAAC,KAAY,EAAE,EAAE;QAChD,MAAM,WAAW,GAAG,KAA6C,CAAC;QAClE,IAAI,QAAQ,EAAE,CAAC;YACb,QAAQ,CAAC,WAAW,CAAC,CAAC;QACxB,CAAC;IACH,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,
|
|
1
|
+
{"version":3,"file":"TyDatePicker.js","sourceRoot":"","sources":["../../src/components/TyDatePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AA6D/D,iDAAiD;AACjD,MAAM,CAAC,MAAM,YAAY,GAAG,KAAK,CAAC,UAAU,CAC1C,CAAC,EACC,KAAK,EACL,IAAI,EACJ,MAAM,EACN,KAAK,EACL,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,SAAS,EACT,MAAM,EACN,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,OAAO,EACP,GAAG,KAAK,EACT,EAAE,GAAG,EAAE,EAAE;IACR,MAAM,UAAU,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;IAE7C,wBAAwB;IACxB,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,GAAG,IAAI,UAAU,CAAC,OAAO,EAAE,CAAC;YAC9B,IAAI,OAAO,GAAG,KAAK,UAAU,EAAE,CAAC;gBAC9B,GAAG,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;YAC1B,CAAC;iBAAM,CAAC;gBACN,GAAG,CAAC,OAAO,GAAG,UAAU,CAAC,OAAO,CAAC;YACnC,CAAC;QACH,CAAC;IACH,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IAEV,8CAA8C;IAC9C,yEAAyE;IACzE,+DAA+D;IAC/D,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,mBAAmB;YAAE,OAAO;QACjC,MAAM,OAAO,GAAG,UAAU,CAAC,OAAO,CAAC;QACnC,IAAI,OAAO,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;YACnC,iDAAiD;YAChD,OAAe,CAAC,KAAK,GAAG,KAAK,IAAI,EAAE,CAAC;QACvC,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,uBAAuB;IACvB,MAAM,YAAY,GAAG,WAAW,CAAC,CAAC,KAAY,EAAE,EAAE;QAChD,MAAM,WAAW,GAAG,KAA6C,CAAC;QAClE,IAAI,QAAQ,EAAE,CAAC;YACb,QAAQ,CAAC,WAAW,CAAC,CAAC;QACxB,CAAC;IACH,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,qEAAqE;IACrE,uEAAuE;IACvE,wEAAwE;IACxE,4CAA4C;IAC5C,MAAM,UAAU,GAAG,WAAW,CAAC,CAAC,KAAY,EAAE,EAAE;QAC9C,IAAI,KAAK,CAAC,MAAM,KAAK,UAAU,CAAC,OAAO;YAAE,OAAO;QAChD,IAAI,MAAM;YAAE,MAAM,CAAC,KAAwB,CAAC,CAAC;IAC/C,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,MAAM,WAAW,GAAG,WAAW,CAAC,CAAC,KAAY,EAAE,EAAE;QAC/C,IAAI,KAAK,CAAC,MAAM,KAAK,UAAU,CAAC,OAAO;YAAE,OAAO;QAChD,IAAI,OAAO;YAAE,OAAO,CAAC,KAAwB,CAAC,CAAC;IACjD,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,yBAAyB;IACzB,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,OAAO,GAAG,UAAU,CAAC,OAAO,CAAC;QACnC,IAAI,CAAC,OAAO;YAAE,OAAO;QAErB,MAAM,SAAS,GAAmC,EAAE,CAAC;QAErD,IAAI,QAAQ,EAAE,CAAC;YACb,OAAO,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;YACjD,SAAS,CAAC,IAAI,CAAC,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC,CAAC;QAC3C,CAAC;QAED,IAAI,MAAM,EAAE,CAAC;YACX,OAAO,CAAC,gBAAgB,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;YAC7C,SAAS,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC,CAAC;QACvC,CAAC;QAED,IAAI,OAAO,EAAE,CAAC;YACZ,OAAO,CAAC,gBAAgB,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;YAC/C,SAAS,CAAC,IAAI,CAAC,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC;QACzC,CAAC;QAED,OAAO,GAAG,EAAE;YACV,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EAAE,OAAO,CAAC,EAAE,EAAE;gBACzC,OAAO,CAAC,mBAAmB,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;YAClD,CAAC,CAAC,CAAC;QACL,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,YAAY,EAAE,UAAU,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IAEvE,kDAAkD;IAClD,MAAM,iBAAiB,GAAwB;QAC7C,GAAG,KAAK;QACR,GAAG,EAAE,UAAU;KAChB,CAAC;IAEF,mDAAmD;IACnD,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;QACxB,iBAAiB,CAAC,KAAK,GAAG,KAAK,CAAC;IAClC,CAAC;IAED,IAAI,IAAI,EAAE,CAAC;QACT,iBAAiB,CAAC,IAAI,GAAG,IAAI,CAAC;IAChC,CAAC;IAED,IAAI,MAAM,EAAE,CAAC;QACX,iBAAiB,CAAC,MAAM,GAAG,MAAM,CAAC;IACpC,CAAC;IAED,IAAI,KAAK,EAAE,CAAC;QACV,iBAAiB,CAAC,KAAK,GAAG,KAAK,CAAC;IAClC,CAAC;IAED,IAAI,WAAW,EAAE,CAAC;QAChB,iBAAiB,CAAC,WAAW,GAAG,WAAW,CAAC;IAC9C,CAAC;IAED,MAAM,UAAU,GAAG,kBAAkB,CAAC,UAAU,EAAE,UAAU,EAAE,QAAQ,CAAC,CAAC;IACxE,MAAM,UAAU,GAAG,kBAAkB,CAAC,UAAU,EAAE,UAAU,EAAE,QAAQ,CAAC,CAAC;IACxE,MAAM,WAAW,GAAG,kBAAkB,CAAC,UAAU,EAAE,WAAW,EAAE,SAAS,CAAC,CAAC;IAE3E,IAAI,UAAU;QAAE,iBAAiB,CAAC,QAAQ,GAAG,EAAE,CAAC;IAChD,IAAI,UAAU;QAAE,iBAAiB,CAAC,QAAQ,GAAG,EAAE,CAAC;IAChD,IAAI,WAAW;QAAE,iBAAiB,CAAC,SAAS,GAAG,EAAE,CAAC;IAElD,IAAI,IAAI,EAAE,CAAC;QACT,iBAAiB,CAAC,IAAI,GAAG,IAAI,CAAC;IAChC,CAAC;IAED,IAAI,MAAM,EAAE,CAAC;QACX,iBAAiB,CAAC,MAAM,GAAG,MAAM,CAAC;IACpC,CAAC;IAED,IAAI,MAAM,EAAE,CAAC;QACX,iBAAiB,CAAC,MAAM,GAAG,MAAM,CAAC;IACpC,CAAC;IAED,IAAI,QAAQ,EAAE,CAAC;QACb,iBAAiB,CAAC,WAAW,CAAC,GAAG,EAAE,CAAC,CAAE,kCAAkC;IAC1E,CAAC;IAED,OAAO,KAAK,CAAC,aAAa,CAAC,gBAAgB,EAAE,iBAAiB,CAAC,CAAC;AAClE,CAAC,CACF,CAAC;AAEF,YAAY,CAAC,WAAW,GAAG,cAAc,CAAC"}
|
|
@@ -3,6 +3,15 @@ export interface TyModalEventDetail {
|
|
|
3
3
|
reason?: 'programmatic' | 'native' | 'backdrop' | 'escape' | 'close-button';
|
|
4
4
|
returnValue?: string;
|
|
5
5
|
}
|
|
6
|
+
/**
|
|
7
|
+
* Detail for the `beforeclose` event — fired *before* the modal closes,
|
|
8
|
+
* cancellable. Call `event.preventDefault()` to abort the close and render
|
|
9
|
+
* your own confirm UI; once the user consents, call `ref.current?.hide({ force: true })`
|
|
10
|
+
* to actually close (or just toggle your controlled `open` state to `false`).
|
|
11
|
+
*/
|
|
12
|
+
export interface TyModalBeforeCloseDetail {
|
|
13
|
+
reason: 'programmatic' | 'backdrop' | 'escape' | 'close-button' | 'native';
|
|
14
|
+
}
|
|
6
15
|
export interface TyModalProps extends React.HTMLAttributes<HTMLElement> {
|
|
7
16
|
/** Controls modal visibility */
|
|
8
17
|
open?: boolean;
|
|
@@ -12,17 +21,27 @@ export interface TyModalProps extends React.HTMLAttributes<HTMLElement> {
|
|
|
12
21
|
closeOnOutsideClick?: boolean;
|
|
13
22
|
/** Allow closing modal with Escape key (default: true) */
|
|
14
23
|
closeOnEscape?: boolean;
|
|
15
|
-
/** Require confirmation before closing when there are unsaved changes */
|
|
16
|
-
protected?: boolean;
|
|
17
24
|
/** React event handlers */
|
|
18
25
|
onOpen?: (event: CustomEvent<TyModalEventDetail>) => void;
|
|
19
26
|
onClose?: (event: CustomEvent<TyModalEventDetail>) => void;
|
|
27
|
+
/**
|
|
28
|
+
* Fires before the modal closes. Cancellable — call `event.preventDefault()`
|
|
29
|
+
* to abort. Use this for "discard changes?" flows with custom UI.
|
|
30
|
+
*/
|
|
31
|
+
onBeforeClose?: (event: CustomEvent<TyModalBeforeCloseDetail>) => void;
|
|
20
32
|
/** Modal content */
|
|
21
33
|
children?: React.ReactNode;
|
|
22
34
|
}
|
|
23
35
|
export interface TyModalRef {
|
|
24
36
|
show: () => void;
|
|
25
|
-
|
|
37
|
+
/**
|
|
38
|
+
* Close the modal. Without `force`, fires `beforeclose` first (consumer can
|
|
39
|
+
* cancel). With `force: true`, bypasses `beforeclose` — call this once your
|
|
40
|
+
* custom confirm UI has captured user consent.
|
|
41
|
+
*/
|
|
42
|
+
hide: (opts?: {
|
|
43
|
+
force?: boolean;
|
|
44
|
+
}) => void;
|
|
26
45
|
element: HTMLElement | null;
|
|
27
46
|
}
|
|
28
47
|
export declare const TyModal: React.ForwardRefExoticComponent<TyModalProps & React.RefAttributes<TyModalRef>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TyModal.d.ts","sourceRoot":"","sources":["../../src/components/TyModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAKtE,MAAM,WAAW,kBAAkB;IACjC,MAAM,CAAC,EAAE,cAAc,GAAG,QAAQ,GAAG,UAAU,GAAG,QAAQ,GAAG,cAAc,CAAC;IAC5E,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAGD,MAAM,WAAW,YAAa,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACrE,gCAAgC;IAChC,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf,iDAAiD;IACjD,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,+DAA+D;IAC/D,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B,0DAA0D;IAC1D,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB,
|
|
1
|
+
{"version":3,"file":"TyModal.d.ts","sourceRoot":"","sources":["../../src/components/TyModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAKtE,MAAM,WAAW,kBAAkB;IACjC,MAAM,CAAC,EAAE,cAAc,GAAG,QAAQ,GAAG,UAAU,GAAG,QAAQ,GAAG,cAAc,CAAC;IAC5E,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;;;GAKG;AACH,MAAM,WAAW,wBAAwB;IACvC,MAAM,EAAE,cAAc,GAAG,UAAU,GAAG,QAAQ,GAAG,cAAc,GAAG,QAAQ,CAAC;CAC5E;AAGD,MAAM,WAAW,YAAa,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACrE,gCAAgC;IAChC,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf,iDAAiD;IACjD,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,+DAA+D;IAC/D,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B,0DAA0D;IAC1D,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB,2BAA2B;IAC3B,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,kBAAkB,CAAC,KAAK,IAAI,CAAC;IAC1D,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,kBAAkB,CAAC,KAAK,IAAI,CAAC;IAC3D;;;OAGG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,wBAAwB,CAAC,KAAK,IAAI,CAAC;IAEvE,oBAAoB;IACpB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAGD,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB;;;;OAIG;IACH,IAAI,EAAE,CAAC,IAAI,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAC;IAC3C,OAAO,EAAE,WAAW,GAAG,IAAI,CAAC;CAC7B;AAGD,eAAO,MAAM,OAAO,iFAoInB,CAAC"}
|
|
@@ -2,7 +2,7 @@ import React, { useEffect, useRef, useImperativeHandle } from 'react';
|
|
|
2
2
|
import { useBooleanProperty, coerceBool } from '../utils/use-boolean-prop';
|
|
3
3
|
import { needsPropertyBridge } from '../utils/react-version';
|
|
4
4
|
// React wrapper for ty-modal web component
|
|
5
|
-
export const TyModal = React.forwardRef(({ open, backdrop, closeOnOutsideClick, closeOnEscape,
|
|
5
|
+
export const TyModal = React.forwardRef(({ open, backdrop, closeOnOutsideClick, closeOnEscape, onOpen, onClose, onBeforeClose, children, ...props }, ref) => {
|
|
6
6
|
const elementRef = useRef(null);
|
|
7
7
|
// Expose imperative methods through ref
|
|
8
8
|
useImperativeHandle(ref, () => ({
|
|
@@ -11,27 +11,45 @@ export const TyModal = React.forwardRef(({ open, backdrop, closeOnOutsideClick,
|
|
|
11
11
|
elementRef.current.show();
|
|
12
12
|
}
|
|
13
13
|
},
|
|
14
|
-
hide: () => {
|
|
14
|
+
hide: (opts) => {
|
|
15
15
|
if (elementRef.current && typeof elementRef.current.hide === 'function') {
|
|
16
|
-
elementRef.current.hide();
|
|
16
|
+
elementRef.current.hide(opts);
|
|
17
17
|
}
|
|
18
18
|
},
|
|
19
19
|
element: elementRef.current,
|
|
20
20
|
}), []);
|
|
21
|
-
// Handle modal events
|
|
21
|
+
// Handle modal events.
|
|
22
|
+
//
|
|
23
|
+
// ty-dropdown, ty-multiselect, ty-date-picker etc. dispatch their own
|
|
24
|
+
// `open`/`close` custom events with `bubbles: true, composed: true` when
|
|
25
|
+
// their internal popups toggle. Those events bubble up through the
|
|
26
|
+
// modal's slotted content and land on the ty-modal host — same event
|
|
27
|
+
// type, same listener. Without the `event.target === element` guard, an
|
|
28
|
+
// `onClose={() => setIsOpen(false)}` callback would fire every time the
|
|
29
|
+
// user closes a dropdown inside the modal, and the React state flip
|
|
30
|
+
// would close the modal. Core's modal.ts already applies the same guard
|
|
31
|
+
// on its internal <dialog>.onclose; this is the React-layer mirror.
|
|
22
32
|
useEffect(() => {
|
|
23
33
|
const element = elementRef.current;
|
|
24
34
|
if (!element)
|
|
25
35
|
return;
|
|
26
36
|
const handleOpen = (event) => {
|
|
27
|
-
if (
|
|
37
|
+
if (event.target !== element)
|
|
38
|
+
return;
|
|
39
|
+
if (onOpen)
|
|
28
40
|
onOpen(event);
|
|
29
|
-
}
|
|
30
41
|
};
|
|
31
42
|
const handleClose = (event) => {
|
|
32
|
-
if (
|
|
43
|
+
if (event.target !== element)
|
|
44
|
+
return;
|
|
45
|
+
if (onClose)
|
|
33
46
|
onClose(event);
|
|
34
|
-
|
|
47
|
+
};
|
|
48
|
+
const handleBeforeClose = (event) => {
|
|
49
|
+
if (event.target !== element)
|
|
50
|
+
return;
|
|
51
|
+
if (onBeforeClose)
|
|
52
|
+
onBeforeClose(event);
|
|
35
53
|
};
|
|
36
54
|
// Listen for custom modal events
|
|
37
55
|
if (onOpen) {
|
|
@@ -40,6 +58,9 @@ export const TyModal = React.forwardRef(({ open, backdrop, closeOnOutsideClick,
|
|
|
40
58
|
if (onClose) {
|
|
41
59
|
element.addEventListener('close', handleClose);
|
|
42
60
|
}
|
|
61
|
+
if (onBeforeClose) {
|
|
62
|
+
element.addEventListener('beforeclose', handleBeforeClose);
|
|
63
|
+
}
|
|
43
64
|
return () => {
|
|
44
65
|
if (onOpen) {
|
|
45
66
|
element.removeEventListener('open', handleOpen);
|
|
@@ -47,13 +68,15 @@ export const TyModal = React.forwardRef(({ open, backdrop, closeOnOutsideClick,
|
|
|
47
68
|
if (onClose) {
|
|
48
69
|
element.removeEventListener('close', handleClose);
|
|
49
70
|
}
|
|
71
|
+
if (onBeforeClose) {
|
|
72
|
+
element.removeEventListener('beforeclose', handleBeforeClose);
|
|
73
|
+
}
|
|
50
74
|
};
|
|
51
|
-
}, [onOpen, onClose]);
|
|
75
|
+
}, [onOpen, onClose, onBeforeClose]);
|
|
52
76
|
// Imperative property sync for boolean props (see use-boolean-prop.ts).
|
|
53
77
|
// Without this, flipping `open` from `true` to `false` on React 18 leaves
|
|
54
78
|
// the `open` attribute on the element and the modal stays open.
|
|
55
79
|
const isOpen = useBooleanProperty(elementRef, 'open', open);
|
|
56
|
-
const isProt = useBooleanProperty(elementRef, 'protected', isProtected);
|
|
57
80
|
// For default-true booleans (backdrop, closeOn*), only the explicit-false
|
|
58
81
|
// case is interesting — bridge it imperatively too so it propagates.
|
|
59
82
|
useEffect(() => {
|
|
@@ -80,8 +103,6 @@ export const TyModal = React.forwardRef(({ open, backdrop, closeOnOutsideClick,
|
|
|
80
103
|
};
|
|
81
104
|
if (isOpen)
|
|
82
105
|
webComponentProps.open = '';
|
|
83
|
-
if (isProt)
|
|
84
|
-
webComponentProps.protected = '';
|
|
85
106
|
// Default-true booleans use "false" string on the attribute side; the
|
|
86
107
|
// core's parseBoolAttr handles it correctly.
|
|
87
108
|
if (backdrop !== undefined && !coerceBool(backdrop)) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TyModal.js","sourceRoot":"","sources":["../../src/components/TyModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAC;AACtE,OAAO,EAAE,kBAAkB,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAC3E,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;
|
|
1
|
+
{"version":3,"file":"TyModal.js","sourceRoot":"","sources":["../../src/components/TyModal.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TyPopup.d.ts","sourceRoot":"","sources":["../../src/components/TyPopup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAIjD,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,SAAS,CAAC;IACtF,sGAAsG;IACtG,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IAEhD,6DAA6D;IAC7D,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,mFAAmF;IACnF,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB,2DAA2D;IAC3D,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,mEAAmE;IACnE,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IAEtC,kCAAkC;IAClC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IAEvC,oEAAoE;IACpE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAGD,MAAM,WAAW,cAAe,SAAQ,WAAW;IACjD,SAAS,IAAI,IAAI,CAAC;IAClB,UAAU,IAAI,IAAI,CAAC;IACnB,WAAW,IAAI,IAAI,CAAC;CACrB;AAGD,eAAO,MAAM,OAAO,
|
|
1
|
+
{"version":3,"file":"TyPopup.d.ts","sourceRoot":"","sources":["../../src/components/TyPopup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAIjD,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,SAAS,CAAC;IACtF,sGAAsG;IACtG,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IAEhD,6DAA6D;IAC7D,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,mFAAmF;IACnF,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB,2DAA2D;IAC3D,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,mEAAmE;IACnE,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IAEtC,kCAAkC;IAClC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IAEvC,oEAAoE;IACpE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAGD,MAAM,WAAW,cAAe,SAAQ,WAAW;IACjD,SAAS,IAAI,IAAI,CAAC;IAClB,UAAU,IAAI,IAAI,CAAC;IACnB,WAAW,IAAI,IAAI,CAAC;CACrB;AAGD,eAAO,MAAM,OAAO,qFA8EnB,CAAC"}
|
|
@@ -14,16 +14,24 @@ export const TyPopup = React.forwardRef(({ placement, offset, manual, disableClo
|
|
|
14
14
|
}
|
|
15
15
|
}
|
|
16
16
|
}, [ref]);
|
|
17
|
-
// Listen for popup open/close events
|
|
17
|
+
// Listen for popup open/close events.
|
|
18
|
+
// Guard with `event.target === element` so bubbled open/close events
|
|
19
|
+
// from popup-like descendants (ty-dropdown, ty-multiselect, ty-date-picker
|
|
20
|
+
// when slotted inside this popup) don't fire the consumer's onOpen/onClose.
|
|
21
|
+
// See TyModal.tsx for the same pattern + rationale.
|
|
18
22
|
useEffect(() => {
|
|
19
23
|
const element = elementRef.current;
|
|
20
24
|
if (!element)
|
|
21
25
|
return;
|
|
22
26
|
const handleOpen = (event) => {
|
|
27
|
+
if (event.target !== element)
|
|
28
|
+
return;
|
|
23
29
|
if (onOpen)
|
|
24
30
|
onOpen(event);
|
|
25
31
|
};
|
|
26
32
|
const handleClose = (event) => {
|
|
33
|
+
if (event.target !== element)
|
|
34
|
+
return;
|
|
27
35
|
if (onClose)
|
|
28
36
|
onClose(event);
|
|
29
37
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TyPopup.js","sourceRoot":"","sources":["../../src/components/TyPopup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAiC/D,2CAA2C;AAC3C,MAAM,CAAC,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CACrC,CAAC,EACC,SAAS,EACT,MAAM,EACN,MAAM,EACN,YAAY,EACZ,MAAM,EACN,OAAO,EACP,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,GAAG,EAAE,EAAE;IACR,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEhD,wBAAwB;IACxB,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,GAAG,IAAI,UAAU,CAAC,OAAO,EAAE,CAAC;YAC9B,IAAI,OAAO,GAAG,KAAK,UAAU,EAAE,CAAC;gBAC9B,GAAG,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;YAC1B,CAAC;iBAAM,CAAC;gBACN,GAAG,CAAC,OAAO,GAAG,UAAU,CAAC,OAAO,CAAC;YACnC,CAAC;QACH,CAAC;IACH,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IAEV,
|
|
1
|
+
{"version":3,"file":"TyPopup.js","sourceRoot":"","sources":["../../src/components/TyPopup.tsx"],"names":[],"mappings":"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"}
|
package/dist/version.d.ts
CHANGED
package/dist/version.js
CHANGED
|
@@ -2,5 +2,5 @@
|
|
|
2
2
|
// Generated from package.json by scripts/generate-version.js
|
|
3
3
|
// Run 'npm run generate:version' to regenerate.
|
|
4
4
|
/** Current version of tyrell-react. Synced with package.json on build. */
|
|
5
|
-
export const VERSION = '1.0.0-
|
|
5
|
+
export const VERSION = '1.0.0-TC22';
|
|
6
6
|
//# sourceMappingURL=version.js.map
|
package/package.json
CHANGED
|
@@ -114,20 +114,18 @@ export const TyDatePicker = React.forwardRef<HTMLElement, TyDatePickerProps>(
|
|
|
114
114
|
}
|
|
115
115
|
}, [onChange]);
|
|
116
116
|
|
|
117
|
-
// Handle open events
|
|
117
|
+
// Handle open/close events. Guard with `event.target === element` so
|
|
118
|
+
// bubbled open/close events from popup-like descendants slotted inside
|
|
119
|
+
// (rare for a date-picker, but defensive — same fix as TyModal/TyPopup)
|
|
120
|
+
// don't fire the consumer's onOpen/onClose.
|
|
118
121
|
const handleOpen = useCallback((event: Event) => {
|
|
119
|
-
|
|
120
|
-
if (onOpen) {
|
|
121
|
-
onOpen(customEvent);
|
|
122
|
-
}
|
|
122
|
+
if (event.target !== elementRef.current) return;
|
|
123
|
+
if (onOpen) onOpen(event as CustomEvent<{}>);
|
|
123
124
|
}, [onOpen]);
|
|
124
125
|
|
|
125
|
-
// Handle close events
|
|
126
126
|
const handleClose = useCallback((event: Event) => {
|
|
127
|
-
|
|
128
|
-
if (onClose) {
|
|
129
|
-
onClose(customEvent);
|
|
130
|
-
}
|
|
127
|
+
if (event.target !== elementRef.current) return;
|
|
128
|
+
if (onClose) onClose(event as CustomEvent<{}>);
|
|
131
129
|
}, [onClose]);
|
|
132
130
|
|
|
133
131
|
// Set up event listeners
|
|
@@ -8,27 +8,39 @@ export interface TyModalEventDetail {
|
|
|
8
8
|
returnValue?: string;
|
|
9
9
|
}
|
|
10
10
|
|
|
11
|
+
/**
|
|
12
|
+
* Detail for the `beforeclose` event — fired *before* the modal closes,
|
|
13
|
+
* cancellable. Call `event.preventDefault()` to abort the close and render
|
|
14
|
+
* your own confirm UI; once the user consents, call `ref.current?.hide({ force: true })`
|
|
15
|
+
* to actually close (or just toggle your controlled `open` state to `false`).
|
|
16
|
+
*/
|
|
17
|
+
export interface TyModalBeforeCloseDetail {
|
|
18
|
+
reason: 'programmatic' | 'backdrop' | 'escape' | 'close-button' | 'native';
|
|
19
|
+
}
|
|
20
|
+
|
|
11
21
|
// Type definitions for Ty Modal component
|
|
12
22
|
export interface TyModalProps extends React.HTMLAttributes<HTMLElement> {
|
|
13
23
|
/** Controls modal visibility */
|
|
14
24
|
open?: boolean;
|
|
15
|
-
|
|
25
|
+
|
|
16
26
|
/** Show backdrop behind modal (default: true) */
|
|
17
27
|
backdrop?: boolean;
|
|
18
|
-
|
|
28
|
+
|
|
19
29
|
/** Allow closing modal by clicking backdrop (default: true) */
|
|
20
30
|
closeOnOutsideClick?: boolean;
|
|
21
|
-
|
|
31
|
+
|
|
22
32
|
/** Allow closing modal with Escape key (default: true) */
|
|
23
33
|
closeOnEscape?: boolean;
|
|
24
|
-
|
|
25
|
-
/** Require confirmation before closing when there are unsaved changes */
|
|
26
|
-
protected?: boolean;
|
|
27
|
-
|
|
34
|
+
|
|
28
35
|
/** React event handlers */
|
|
29
36
|
onOpen?: (event: CustomEvent<TyModalEventDetail>) => void;
|
|
30
37
|
onClose?: (event: CustomEvent<TyModalEventDetail>) => void;
|
|
31
|
-
|
|
38
|
+
/**
|
|
39
|
+
* Fires before the modal closes. Cancellable — call `event.preventDefault()`
|
|
40
|
+
* to abort. Use this for "discard changes?" flows with custom UI.
|
|
41
|
+
*/
|
|
42
|
+
onBeforeClose?: (event: CustomEvent<TyModalBeforeCloseDetail>) => void;
|
|
43
|
+
|
|
32
44
|
/** Modal content */
|
|
33
45
|
children?: React.ReactNode;
|
|
34
46
|
}
|
|
@@ -36,22 +48,27 @@ export interface TyModalProps extends React.HTMLAttributes<HTMLElement> {
|
|
|
36
48
|
// Ref interface for imperative methods
|
|
37
49
|
export interface TyModalRef {
|
|
38
50
|
show: () => void;
|
|
39
|
-
|
|
51
|
+
/**
|
|
52
|
+
* Close the modal. Without `force`, fires `beforeclose` first (consumer can
|
|
53
|
+
* cancel). With `force: true`, bypasses `beforeclose` — call this once your
|
|
54
|
+
* custom confirm UI has captured user consent.
|
|
55
|
+
*/
|
|
56
|
+
hide: (opts?: { force?: boolean }) => void;
|
|
40
57
|
element: HTMLElement | null;
|
|
41
58
|
}
|
|
42
59
|
|
|
43
60
|
// React wrapper for ty-modal web component
|
|
44
61
|
export const TyModal = React.forwardRef<TyModalRef, TyModalProps>(
|
|
45
|
-
({
|
|
46
|
-
open,
|
|
47
|
-
backdrop,
|
|
48
|
-
closeOnOutsideClick,
|
|
49
|
-
closeOnEscape,
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
children,
|
|
54
|
-
...props
|
|
62
|
+
({
|
|
63
|
+
open,
|
|
64
|
+
backdrop,
|
|
65
|
+
closeOnOutsideClick,
|
|
66
|
+
closeOnEscape,
|
|
67
|
+
onOpen,
|
|
68
|
+
onClose,
|
|
69
|
+
onBeforeClose,
|
|
70
|
+
children,
|
|
71
|
+
...props
|
|
55
72
|
}, ref) => {
|
|
56
73
|
const elementRef = useRef<HTMLElement>(null);
|
|
57
74
|
|
|
@@ -62,29 +79,42 @@ export const TyModal = React.forwardRef<TyModalRef, TyModalProps>(
|
|
|
62
79
|
(elementRef.current as any).show();
|
|
63
80
|
}
|
|
64
81
|
},
|
|
65
|
-
hide: () => {
|
|
82
|
+
hide: (opts?: { force?: boolean }) => {
|
|
66
83
|
if (elementRef.current && typeof (elementRef.current as any).hide === 'function') {
|
|
67
|
-
(elementRef.current as any).hide();
|
|
84
|
+
(elementRef.current as any).hide(opts);
|
|
68
85
|
}
|
|
69
86
|
},
|
|
70
87
|
element: elementRef.current,
|
|
71
88
|
}), []);
|
|
72
89
|
|
|
73
|
-
// Handle modal events
|
|
90
|
+
// Handle modal events.
|
|
91
|
+
//
|
|
92
|
+
// ty-dropdown, ty-multiselect, ty-date-picker etc. dispatch their own
|
|
93
|
+
// `open`/`close` custom events with `bubbles: true, composed: true` when
|
|
94
|
+
// their internal popups toggle. Those events bubble up through the
|
|
95
|
+
// modal's slotted content and land on the ty-modal host — same event
|
|
96
|
+
// type, same listener. Without the `event.target === element` guard, an
|
|
97
|
+
// `onClose={() => setIsOpen(false)}` callback would fire every time the
|
|
98
|
+
// user closes a dropdown inside the modal, and the React state flip
|
|
99
|
+
// would close the modal. Core's modal.ts already applies the same guard
|
|
100
|
+
// on its internal <dialog>.onclose; this is the React-layer mirror.
|
|
74
101
|
useEffect(() => {
|
|
75
102
|
const element = elementRef.current;
|
|
76
103
|
if (!element) return;
|
|
77
104
|
|
|
78
105
|
const handleOpen = (event: CustomEvent<TyModalEventDetail>) => {
|
|
79
|
-
if (
|
|
80
|
-
|
|
81
|
-
}
|
|
106
|
+
if (event.target !== element) return;
|
|
107
|
+
if (onOpen) onOpen(event);
|
|
82
108
|
};
|
|
83
109
|
|
|
84
110
|
const handleClose = (event: CustomEvent<TyModalEventDetail>) => {
|
|
85
|
-
if (
|
|
86
|
-
|
|
87
|
-
|
|
111
|
+
if (event.target !== element) return;
|
|
112
|
+
if (onClose) onClose(event);
|
|
113
|
+
};
|
|
114
|
+
|
|
115
|
+
const handleBeforeClose = (event: CustomEvent<TyModalBeforeCloseDetail>) => {
|
|
116
|
+
if (event.target !== element) return;
|
|
117
|
+
if (onBeforeClose) onBeforeClose(event);
|
|
88
118
|
};
|
|
89
119
|
|
|
90
120
|
// Listen for custom modal events
|
|
@@ -96,6 +126,10 @@ export const TyModal = React.forwardRef<TyModalRef, TyModalProps>(
|
|
|
96
126
|
element.addEventListener('close', handleClose as EventListener);
|
|
97
127
|
}
|
|
98
128
|
|
|
129
|
+
if (onBeforeClose) {
|
|
130
|
+
element.addEventListener('beforeclose', handleBeforeClose as EventListener);
|
|
131
|
+
}
|
|
132
|
+
|
|
99
133
|
return () => {
|
|
100
134
|
if (onOpen) {
|
|
101
135
|
element.removeEventListener('open', handleOpen as EventListener);
|
|
@@ -103,14 +137,16 @@ export const TyModal = React.forwardRef<TyModalRef, TyModalProps>(
|
|
|
103
137
|
if (onClose) {
|
|
104
138
|
element.removeEventListener('close', handleClose as EventListener);
|
|
105
139
|
}
|
|
140
|
+
if (onBeforeClose) {
|
|
141
|
+
element.removeEventListener('beforeclose', handleBeforeClose as EventListener);
|
|
142
|
+
}
|
|
106
143
|
};
|
|
107
|
-
}, [onOpen, onClose]);
|
|
144
|
+
}, [onOpen, onClose, onBeforeClose]);
|
|
108
145
|
|
|
109
146
|
// Imperative property sync for boolean props (see use-boolean-prop.ts).
|
|
110
147
|
// Without this, flipping `open` from `true` to `false` on React 18 leaves
|
|
111
148
|
// the `open` attribute on the element and the modal stays open.
|
|
112
149
|
const isOpen = useBooleanProperty(elementRef, 'open', open);
|
|
113
|
-
const isProt = useBooleanProperty(elementRef, 'protected', isProtected);
|
|
114
150
|
|
|
115
151
|
// For default-true booleans (backdrop, closeOn*), only the explicit-false
|
|
116
152
|
// case is interesting — bridge it imperatively too so it propagates.
|
|
@@ -135,7 +171,6 @@ export const TyModal = React.forwardRef<TyModalRef, TyModalProps>(
|
|
|
135
171
|
};
|
|
136
172
|
|
|
137
173
|
if (isOpen) webComponentProps.open = '';
|
|
138
|
-
if (isProt) webComponentProps.protected = '';
|
|
139
174
|
|
|
140
175
|
// Default-true booleans use "false" string on the attribute side; the
|
|
141
176
|
// core's parseBoolAttr handles it correctly.
|
|
@@ -57,15 +57,21 @@ export const TyPopup = React.forwardRef<TyPopupElement, TyPopupProps>(
|
|
|
57
57
|
}
|
|
58
58
|
}, [ref]);
|
|
59
59
|
|
|
60
|
-
// Listen for popup open/close events
|
|
60
|
+
// Listen for popup open/close events.
|
|
61
|
+
// Guard with `event.target === element` so bubbled open/close events
|
|
62
|
+
// from popup-like descendants (ty-dropdown, ty-multiselect, ty-date-picker
|
|
63
|
+
// when slotted inside this popup) don't fire the consumer's onOpen/onClose.
|
|
64
|
+
// See TyModal.tsx for the same pattern + rationale.
|
|
61
65
|
useEffect(() => {
|
|
62
66
|
const element = elementRef.current;
|
|
63
67
|
if (!element) return;
|
|
64
68
|
|
|
65
69
|
const handleOpen = (event: Event) => {
|
|
70
|
+
if (event.target !== element) return;
|
|
66
71
|
if (onOpen) onOpen(event as CustomEvent);
|
|
67
72
|
};
|
|
68
73
|
const handleClose = (event: Event) => {
|
|
74
|
+
if (event.target !== element) return;
|
|
69
75
|
if (onClose) onClose(event as CustomEvent);
|
|
70
76
|
};
|
|
71
77
|
|
package/src/version.ts
CHANGED