@nectary/components 5.0.3 → 5.1.0

package/accordion/index.js

@@ -85,6 +85,7 @@ class Accordion extends NectaryElement {
   }
   #onChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-change")?.(e);
+    getReactEventHandler(this, "onChange")?.(e);
   };
 }
 defineCustomElement("sinch-accordion", Accordion);

package/bundle.js

@@ -586,6 +586,7 @@ class Accordion extends NectaryElement {
   }
   #onChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-change")?.(e);
+    getReactEventHandler(this, "onChange")?.(e);
   };
 }
 defineCustomElement("sinch-accordion", Accordion);
@@ -1567,6 +1568,7 @@ class RichText extends NectaryElement {
   }
   #onClickReactHandler = (e) => {
     getReactEventHandler(this, "on-element-click")?.(e);
+    getReactEventHandler(this, "onElementClick")?.(e);
   };
 }
 defineCustomElement("sinch-rich-text", RichText);
@@ -2072,7 +2074,8 @@ class Button extends NectaryElement {
       "disabled",
       "toggled",
       "size",
-      "data-size"
+      "data-size",
+      "data-managed-aria-disabled"
     ];
   }
   attributeChangedCallback(name, oldVal, newVal) {
@@ -2081,12 +2084,17 @@ class Button extends NectaryElement {
         this.#$text.textContent = newVal;
         break;
       }
+      case "data-managed-aria-disabled": {
+        this.#updateAriaDisabled(newVal);
+        break;
+      }
       case "disabled": {
         if (!isAttrEqual(oldVal, newVal)) {
           updateBooleanAttribute(this, "disabled", isAttrTrue(newVal));
         }
-        this.ariaDisabled = isAttrTrue(newVal).toString();
-        this.#internals.ariaDisabled = isAttrTrue(newVal).toString();
+        if (!this.hasAttribute("data-managed-aria-disabled")) {
+          this.#updateAriaDisabled(newVal);
+        }
         break;
       }
       case "toggled": {
@@ -2146,6 +2154,9 @@ class Button extends NectaryElement {
   get formType() {
     return getLiteralAttribute(this, formTypeValues, "form-type", "button");
   }
+  get dataManagedAriaDisabled() {
+    return getBooleanAttribute(this, "data-managed-aria-disabled");
+  }
   #onSizeUpdate() {
     if (!this.isDomConnected) {
       return;
@@ -2167,6 +2178,10 @@ class Button extends NectaryElement {
       }
     }
   };
+  #updateAriaDisabled = (newVal) => {
+    this.ariaDisabled = isAttrTrue(newVal).toString();
+    this.#internals.ariaDisabled = isAttrTrue(newVal).toString();
+  };
   #onButtonKeydown = (e) => {
     switch (e.code) {
       case "Space":
@@ -2567,6 +2582,7 @@ class Checkbox extends NectaryElement {
   };
   #onChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-change")?.(e);
+    getReactEventHandler(this, "onChange")?.(e);
   };
   #onFocusReactHandler = (e) => {
     getReactEventHandler(this, "on-focus")?.(e);
@@ -3183,6 +3199,7 @@ class Pop extends NectaryElement {
   };
   #onCloseReactHandler = (e) => {
     getReactEventHandler(this, "on-close")?.(e);
+    getReactEventHandler(this, "onClose")?.(e);
   };
   #dispatchCloseEvent() {
     this.dispatchEvent(
@@ -3641,9 +3658,11 @@ class Tooltip extends NectaryElement {
   }
   #onShowReactHandler = () => {
     getReactEventHandler(this, "on-show")?.();
+    getReactEventHandler(this, "onShow")?.();
   };
   #onHideReactHandler = () => {
     getReactEventHandler(this, "on-hide")?.();
+    getReactEventHandler(this, "onHide")?.();
   };
 }
 defineCustomElement("sinch-tooltip", Tooltip);
@@ -3989,6 +4008,7 @@ class ColorMenu extends NectaryElement {
   }
   #onChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-change")?.(e);
+    getReactEventHandler(this, "onChange")?.(e);
   };
 }
 defineCustomElement("sinch-color-menu", ColorMenu);
@@ -4528,6 +4548,7 @@ class DatePicker extends NectaryElement {
   }
   #onChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-change")?.(e);
+    getReactEventHandler(this, "onChange")?.(e);
   };
 }
 defineCustomElement("sinch-date-picker", DatePicker);
@@ -4695,6 +4716,7 @@ class Dialog extends NectaryElement {
   };
   #onCloseReactHandler = (e) => {
     getReactEventHandler(this, "on-close")?.(e);
+    getReactEventHandler(this, "onClose")?.(e);
   };
   #dispatchCloseEvent(detail, cancelable) {
     this.dispatchEvent(new CustomEvent("-close", { detail, cancelable }));
@@ -5682,6 +5704,7 @@ class Input extends NectaryElement {
   }
   #onChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-change")?.(e);
+    getReactEventHandler(this, "onChange")?.(e);
   };
   #onFocusReactHandler = () => {
     getReactEventHandler(this, "on-focus")?.();
@@ -5977,6 +6000,7 @@ class Tabs extends NectaryElement {
   }
   #onChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-change")?.(e);
+    getReactEventHandler(this, "onChange")?.(e);
   };
 }
 defineCustomElement("sinch-tabs", Tabs);
@@ -6209,6 +6233,7 @@ class EmojiPicker extends NectaryElement {
   };
   #onChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-change")?.(e);
+    getReactEventHandler(this, "onChange")?.(e);
   };
   get focusable() {
     return true;
@@ -6605,9 +6630,11 @@ class FilePicker extends NectaryElement {
   };
   #onChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-change")?.(e);
+    getReactEventHandler(this, "onChange")?.(e);
   };
   #onInvalidReactHandler = (e) => {
     getReactEventHandler(this, "on-invalid")?.(e);
+    getReactEventHandler(this, "onInvalid")?.(e);
   };
 }
 defineCustomElement("sinch-file-picker", FilePicker);
@@ -6850,9 +6877,11 @@ class FileDrop extends NectaryElement {
   };
   #onChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-change")?.(e);
+    getReactEventHandler(this, "onChange")?.(e);
   };
   #onInvalidReactHandler = (e) => {
     getReactEventHandler(this, "on-invalid")?.(e);
+    getReactEventHandler(this, "onInvalid")?.(e);
   };
   #dispatchChangeEvent(files) {
     this.dispatchEvent(
@@ -7159,9 +7188,11 @@ class HelpTooltip extends NectaryElement {
   };
   #onTooltipShowReactHandler = () => {
     getReactEventHandler(this, "on-show")?.();
+    getReactEventHandler(this, "onShow")?.();
   };
   #onTooltipHideReactHandler = () => {
     getReactEventHandler(this, "on-hide")?.();
+    getReactEventHandler(this, "onHide")?.();
   };
 }
 defineCustomElement("sinch-help-tooltip", HelpTooltip);
@@ -7420,6 +7451,7 @@ class Pagination extends NectaryElement {
   }
   #onChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-change")?.(e);
+    getReactEventHandler(this, "onChange")?.(e);
   };
   get focusable() {
     return true;
@@ -7534,6 +7566,7 @@ class PersistentOverlay extends NectaryElement {
   }
   #onVisibilityAlteredReactHandler = (e) => {
     getReactEventHandler(this, "on-visibility-altered")?.(e);
+    getReactEventHandler(this, "onVisibilityAltered")?.(e);
   };
 }
 defineCustomElement("sinch-persistent-overlay", PersistentOverlay);
@@ -7826,6 +7859,7 @@ class ProgressStepper extends NectaryElement {
   };
   #onChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-change")?.(e);
+    getReactEventHandler(this, "onChange")?.(e);
   };
 }
 defineCustomElement("sinch-progress-stepper", ProgressStepper);
@@ -8147,6 +8181,7 @@ class Radio extends NectaryElement {
   }
   #onChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-change")?.(e);
+    getReactEventHandler(this, "onChange")?.(e);
   };
 }
 defineCustomElement("sinch-radio", Radio);
@@ -10282,6 +10317,7 @@ class RichTextarea extends NectaryElement {
   };
   #onChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-change")?.(e);
+    getReactEventHandler(this, "onChange")?.(e);
   };
   #onFocusReactHandler = () => {
     getReactEventHandler(this, "on-focus")?.();
@@ -10291,6 +10327,7 @@ class RichTextarea extends NectaryElement {
   };
   #onSelectionReactHandler = (e) => {
     getReactEventHandler(this, "on-selection")?.(e);
+    getReactEventHandler(this, "onSelection")?.(e);
   };
 }
 defineCustomElement("sinch-rich-textarea", RichTextarea);
@@ -10350,6 +10387,7 @@ class SegmentCollapse extends NectaryElement {
   };
   #onChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-change")?.(e);
+    getReactEventHandler(this, "onChange")?.(e);
   };
 }
 defineCustomElement("sinch-segment-collapse", SegmentCollapse);
@@ -10517,6 +10555,7 @@ class SegmentedControl extends NectaryElement {
   }
   #onChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-change")?.(e);
+    getReactEventHandler(this, "onChange")?.(e);
   };
 }
 defineCustomElement("sinch-segmented-control", SegmentedControl);
@@ -10688,6 +10727,7 @@ class SegmentedIconControl extends NectaryElement {
   }
   #onChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-change")?.(e);
+    getReactEventHandler(this, "onChange")?.(e);
   };
 }
 defineCustomElement("sinch-segmented-icon-control", SegmentedIconControl);
@@ -11387,9 +11427,11 @@ class SelectMenu extends NectaryElement {
   }
   #onChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-change")?.(e);
+    getReactEventHandler(this, "onChange")?.(e);
   };
   #onSearchChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-search-change")?.(e);
+    getReactEventHandler(this, "onSearchChange")?.(e);
   };
 }
 defineCustomElement("sinch-select-menu", SelectMenu);
@@ -12192,6 +12234,7 @@ class Textarea extends NectaryElement {
   }
   #onChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-change")?.(e);
+    getReactEventHandler(this, "onChange")?.(e);
   };
   #onFocusReactHandler = () => {
     getReactEventHandler(this, "on-focus")?.();
@@ -12583,6 +12626,7 @@ class TimePicker extends NectaryElement {
   };
   #onChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-change")?.(e);
+    getReactEventHandler(this, "onChange")?.(e);
   };
 }
 defineCustomElement("sinch-time-picker", TimePicker);
@@ -12842,6 +12886,7 @@ class Toast extends NectaryElement {
   }
   #onTimeoutReactHandler = (e) => {
     getReactEventHandler(this, "on-timeout")?.(e);
+    getReactEventHandler(this, "onTimeout")?.(e);
   };
 }
 defineCustomElement("sinch-toast", Toast);
@@ -12978,6 +13023,7 @@ class Toggle extends NectaryElement {
   };
   #onChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-change")?.(e);
+    getReactEventHandler(this, "onChange")?.(e);
   };
   #onFocusReactHandler = (e) => {
     getReactEventHandler(this, "on-focus")?.(e);

package/button/index.d.ts

@@ -23,4 +23,5 @@ export declare class Button extends NectaryElement {
     get focusable(): boolean;
     set formType(value: TSinchButtonFormType);
     get formType(): TSinchButtonFormType;
+    get dataManagedAriaDisabled(): boolean;
 }

package/button/index.js

@@ -53,7 +53,8 @@ class Button extends NectaryElement {
       "disabled",
       "toggled",
       "size",
-      "data-size"
+      "data-size",
+      "data-managed-aria-disabled"
     ];
   }
   attributeChangedCallback(name, oldVal, newVal) {
@@ -62,12 +63,17 @@ class Button extends NectaryElement {
         this.#$text.textContent = newVal;
         break;
       }
+      case "data-managed-aria-disabled": {
+        this.#updateAriaDisabled(newVal);
+        break;
+      }
       case "disabled": {
         if (!isAttrEqual(oldVal, newVal)) {
           updateBooleanAttribute(this, "disabled", isAttrTrue(newVal));
         }
-        this.ariaDisabled = isAttrTrue(newVal).toString();
-        this.#internals.ariaDisabled = isAttrTrue(newVal).toString();
+        if (!this.hasAttribute("data-managed-aria-disabled")) {
+          this.#updateAriaDisabled(newVal);
+        }
         break;
       }
       case "toggled": {
@@ -127,6 +133,9 @@ class Button extends NectaryElement {
   get formType() {
     return getLiteralAttribute(this, formTypeValues, "form-type", "button");
   }
+  get dataManagedAriaDisabled() {
+    return getBooleanAttribute(this, "data-managed-aria-disabled");
+  }
   #onSizeUpdate() {
     if (!this.isDomConnected) {
       return;
@@ -148,6 +157,10 @@ class Button extends NectaryElement {
       }
     }
   };
+  #updateAriaDisabled = (newVal) => {
+    this.ariaDisabled = isAttrTrue(newVal).toString();
+    this.#internals.ariaDisabled = isAttrTrue(newVal).toString();
+  };
   #onButtonKeydown = (e) => {
     switch (e.code) {
       case "Space":

package/button/types.d.ts

@@ -19,6 +19,7 @@ export type TSinchButtonProps = {
     toggled?: boolean;
     /** Makes button participate in forms, `button` by default */
     'form-type'?: TSinchButtonFormType;
+    'data-managed-aria-disabled'?: boolean;
 };
 export type TSinchButtonEvents = {
     /** Click event handler */

package/checkbox/index.js

@@ -163,6 +163,7 @@ class Checkbox extends NectaryElement {
   };
   #onChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-change")?.(e);
+    getReactEventHandler(this, "onChange")?.(e);
   };
   #onFocusReactHandler = (e) => {
     getReactEventHandler(this, "on-focus")?.(e);

package/color-menu/index.js

@@ -301,6 +301,7 @@ class ColorMenu extends NectaryElement {
   }
   #onChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-change")?.(e);
+    getReactEventHandler(this, "onChange")?.(e);
   };
 }
 defineCustomElement("sinch-color-menu", ColorMenu);

package/date-picker/index.js

@@ -410,6 +410,7 @@ class DatePicker extends NectaryElement {
   }
   #onChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-change")?.(e);
+    getReactEventHandler(this, "onChange")?.(e);
   };
 }
 defineCustomElement("sinch-date-picker", DatePicker);

package/dialog/index.js

@@ -130,6 +130,7 @@ class Dialog extends NectaryElement {
   };
   #onCloseReactHandler = (e) => {
     getReactEventHandler(this, "on-close")?.(e);
+    getReactEventHandler(this, "onClose")?.(e);
   };
   #dispatchCloseEvent(detail, cancelable) {
     this.dispatchEvent(new CustomEvent("-close", { detail, cancelable }));

package/emoji-picker/index.js

@@ -146,6 +146,7 @@ class EmojiPicker extends NectaryElement {
   };
   #onChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-change")?.(e);
+    getReactEventHandler(this, "onChange")?.(e);
   };
   get focusable() {
     return true;

package/file-drop/index.js

@@ -192,9 +192,11 @@ class FileDrop extends NectaryElement {
   };
   #onChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-change")?.(e);
+    getReactEventHandler(this, "onChange")?.(e);
   };
   #onInvalidReactHandler = (e) => {
     getReactEventHandler(this, "on-invalid")?.(e);
+    getReactEventHandler(this, "onInvalid")?.(e);
   };
   #dispatchChangeEvent(files) {
     this.dispatchEvent(

package/file-picker/index.js

@@ -95,9 +95,11 @@ class FilePicker extends NectaryElement {
   };
   #onChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-change")?.(e);
+    getReactEventHandler(this, "onChange")?.(e);
   };
   #onInvalidReactHandler = (e) => {
     getReactEventHandler(this, "on-invalid")?.(e);
+    getReactEventHandler(this, "onInvalid")?.(e);
   };
 }
 defineCustomElement("sinch-file-picker", FilePicker);

package/help-tooltip/index.js

@@ -67,9 +67,11 @@ class HelpTooltip extends NectaryElement {
   };
   #onTooltipShowReactHandler = () => {
     getReactEventHandler(this, "on-show")?.();
+    getReactEventHandler(this, "onShow")?.();
   };
   #onTooltipHideReactHandler = () => {
     getReactEventHandler(this, "on-hide")?.();
+    getReactEventHandler(this, "onHide")?.();
   };
 }
 defineCustomElement("sinch-help-tooltip", HelpTooltip);

package/input/index.js

@@ -666,6 +666,7 @@ class Input extends NectaryElement {
   }
   #onChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-change")?.(e);
+    getReactEventHandler(this, "onChange")?.(e);
   };
   #onFocusReactHandler = () => {
     getReactEventHandler(this, "on-focus")?.();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/components",
-  "version": "5.0.3",
+  "version": "5.1.0",
   "files": [
     "**/*/*.css",
     "**/*/*.json",

package/pagination/index.js

@@ -137,6 +137,7 @@ class Pagination extends NectaryElement {
   }
   #onChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-change")?.(e);
+    getReactEventHandler(this, "onChange")?.(e);
   };
   get focusable() {
     return true;

package/persistent-overlay/index.js

@@ -92,6 +92,7 @@ class PersistentOverlay extends NectaryElement {
   }
   #onVisibilityAlteredReactHandler = (e) => {
     getReactEventHandler(this, "on-visibility-altered")?.(e);
+    getReactEventHandler(this, "onVisibilityAltered")?.(e);
   };
 }
 defineCustomElement("sinch-persistent-overlay", PersistentOverlay);

package/pop/index.js

@@ -379,6 +379,7 @@ class Pop extends NectaryElement {
   };
   #onCloseReactHandler = (e) => {
     getReactEventHandler(this, "on-close")?.(e);
+    getReactEventHandler(this, "onClose")?.(e);
   };
   #dispatchCloseEvent() {
     this.dispatchEvent(

package/progress-stepper/index.js

@@ -197,6 +197,7 @@ class ProgressStepper extends NectaryElement {
   };
   #onChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-change")?.(e);
+    getReactEventHandler(this, "onChange")?.(e);
   };
 }
 defineCustomElement("sinch-progress-stepper", ProgressStepper);

package/radio/index.js

@@ -188,6 +188,7 @@ class Radio extends NectaryElement {
   }
   #onChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-change")?.(e);
+    getReactEventHandler(this, "onChange")?.(e);
   };
 }
 defineCustomElement("sinch-radio", Radio);

package/rich-text/index.js

@@ -93,6 +93,7 @@ class RichText extends NectaryElement {
   }
   #onClickReactHandler = (e) => {
     getReactEventHandler(this, "on-element-click")?.(e);
+    getReactEventHandler(this, "onElementClick")?.(e);
   };
 }
 defineCustomElement("sinch-rich-text", RichText);

package/rich-textarea/index.js

@@ -455,6 +455,7 @@ class RichTextarea extends NectaryElement {
   };
   #onChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-change")?.(e);
+    getReactEventHandler(this, "onChange")?.(e);
   };
   #onFocusReactHandler = () => {
     getReactEventHandler(this, "on-focus")?.();
@@ -464,6 +465,7 @@ class RichTextarea extends NectaryElement {
   };
   #onSelectionReactHandler = (e) => {
     getReactEventHandler(this, "on-selection")?.(e);
+    getReactEventHandler(this, "onSelection")?.(e);
   };
 }
 defineCustomElement("sinch-rich-textarea", RichTextarea);

package/segment-collapse/index.js

@@ -58,6 +58,7 @@ class SegmentCollapse extends NectaryElement {
   };
   #onChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-change")?.(e);
+    getReactEventHandler(this, "onChange")?.(e);
   };
 }
 defineCustomElement("sinch-segment-collapse", SegmentCollapse);

package/segmented-control/index.js

@@ -78,6 +78,7 @@ class SegmentedControl extends NectaryElement {
   }
   #onChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-change")?.(e);
+    getReactEventHandler(this, "onChange")?.(e);
   };
 }
 defineCustomElement("sinch-segmented-control", SegmentedControl);

package/segmented-icon-control/index.js

@@ -95,6 +95,7 @@ class SegmentedIconControl extends NectaryElement {
   }
   #onChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-change")?.(e);
+    getReactEventHandler(this, "onChange")?.(e);
   };
 }
 defineCustomElement("sinch-segmented-icon-control", SegmentedIconControl);

package/select-menu/index.js

@@ -445,9 +445,11 @@ class SelectMenu extends NectaryElement {
   }
   #onChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-change")?.(e);
+    getReactEventHandler(this, "onChange")?.(e);
   };
   #onSearchChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-search-change")?.(e);
+    getReactEventHandler(this, "onSearchChange")?.(e);
   };
 }
 defineCustomElement("sinch-select-menu", SelectMenu);

package/tabs/index.js

@@ -70,6 +70,7 @@ class Tabs extends NectaryElement {
   }
   #onChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-change")?.(e);
+    getReactEventHandler(this, "onChange")?.(e);
   };
 }
 defineCustomElement("sinch-tabs", Tabs);

package/textarea/index.js

@@ -343,6 +343,7 @@ class Textarea extends NectaryElement {
   }
   #onChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-change")?.(e);
+    getReactEventHandler(this, "onChange")?.(e);
   };
   #onFocusReactHandler = () => {
     getReactEventHandler(this, "on-focus")?.();

package/time-picker/index.js

@@ -325,6 +325,7 @@ class TimePicker extends NectaryElement {
   };
   #onChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-change")?.(e);
+    getReactEventHandler(this, "onChange")?.(e);
   };
 }
 defineCustomElement("sinch-time-picker", TimePicker);

package/toast/index.js

@@ -82,6 +82,7 @@ class Toast extends NectaryElement {
   }
   #onTimeoutReactHandler = (e) => {
     getReactEventHandler(this, "on-timeout")?.(e);
+    getReactEventHandler(this, "onTimeout")?.(e);
   };
 }
 defineCustomElement("sinch-toast", Toast);

package/toggle/index.js

@@ -134,6 +134,7 @@ class Toggle extends NectaryElement {
   };
   #onChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-change")?.(e);
+    getReactEventHandler(this, "onChange")?.(e);
   };
   #onFocusReactHandler = (e) => {
     getReactEventHandler(this, "on-focus")?.(e);

package/tooltip/index.js

@@ -277,9 +277,11 @@ class Tooltip extends NectaryElement {
   }
   #onShowReactHandler = () => {
     getReactEventHandler(this, "on-show")?.();
+    getReactEventHandler(this, "onShow")?.();
   };
   #onHideReactHandler = () => {
     getReactEventHandler(this, "on-hide")?.();
+    getReactEventHandler(this, "onHide")?.();
   };
 }
 defineCustomElement("sinch-tooltip", Tooltip);

package/types.d.ts

@@ -1,4 +1,4 @@
-import type { ReactifyEvents, WebComponentReactBaseProp, SafeSelect, CamelCaseify, RemoveReadonly, SetAttributes, ExtendEventListeners } from './utils/adapters';
+import type { ReactifyEvents, WebComponentReactBaseProp, SafeSelect, CamelCaseify, RemoveReadonly, SetAttributes, ExtendEventListeners, PatchReactEvents } from './utils/adapters';
 import type { CSSProperties } from 'react';
 export type TRect = {
     x: number;
@@ -7,7 +7,7 @@ export type TRect = {
     height: number;
 };
 export type NectaryComponentVanillaByType<T extends NectaryComponentMap[keyof NectaryComponentMap]> = Omit<HTMLElement, 'addEventListener' | 'removeEventListener'> & ExtendEventListeners<Required<SafeSelect<T, 'events'>>> & SetAttributes<Required<RemoveReadonly<SafeSelect<T, 'props'>>>> & Required<CamelCaseify<SafeSelect<T, 'props'>>> & Required<SafeSelect<T, 'methods'>>;
-export type NectaryComponentReactByType<T extends NectaryComponentMap[keyof NectaryComponentMap]> = WebComponentReactBaseProp<NectaryComponentVanillaByType<T>> & ReactifyEvents<SafeSelect<T, 'events'>> & RemoveReadonly<SafeSelect<T, 'props'>> & {
+export type NectaryComponentReactByType<T extends NectaryComponentMap[keyof NectaryComponentMap]> = PatchReactEvents<WebComponentReactBaseProp<NectaryComponentVanillaByType<T>>, ReactifyEvents<SafeSelect<T, 'events'>>> & RemoveReadonly<SafeSelect<T, 'props'>> & {
     style?: Partial<SafeSelect<T, 'style'>> & CSSProperties;
 };
 export type NectaryComponentVanilla<K extends keyof NectaryComponentMap> = NectaryComponentVanillaByType<NectaryComponentMap[K]>;

package/utils/adapters.d.ts

@@ -27,4 +27,5 @@ export type ReactifyEvents<T> = {
 export type WebComponentReactBaseProp<T = HTMLElement> = Omit<DetailedHTMLProps<HTMLAttributes<T>, T>, 'className' | 'style'> & {
     class?: string;
 };
+export type PatchReactEvents<T, Events> = Omit<T, keyof CamelCaseify<Events>> & Partial<CamelCaseify<Events>> & Partial<Events>;
 export {};