@nectary/components 5.0.3 → 5.0.4

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);
@@ -2567,6 +2569,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 +3186,7 @@ class Pop extends NectaryElement {
   };
   #onCloseReactHandler = (e) => {
     getReactEventHandler(this, "on-close")?.(e);
+    getReactEventHandler(this, "onClose")?.(e);
   };
   #dispatchCloseEvent() {
     this.dispatchEvent(
@@ -3641,9 +3645,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 +3995,7 @@ class ColorMenu extends NectaryElement {
   }
   #onChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-change")?.(e);
+    getReactEventHandler(this, "onChange")?.(e);
   };
 }
 defineCustomElement("sinch-color-menu", ColorMenu);
@@ -4528,6 +4535,7 @@ class DatePicker extends NectaryElement {
   }
   #onChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-change")?.(e);
+    getReactEventHandler(this, "onChange")?.(e);
   };
 }
 defineCustomElement("sinch-date-picker", DatePicker);
@@ -4695,6 +4703,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 +5691,7 @@ class Input extends NectaryElement {
   }
   #onChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-change")?.(e);
+    getReactEventHandler(this, "onChange")?.(e);
   };
   #onFocusReactHandler = () => {
     getReactEventHandler(this, "on-focus")?.();
@@ -5977,6 +5987,7 @@ class Tabs extends NectaryElement {
   }
   #onChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-change")?.(e);
+    getReactEventHandler(this, "onChange")?.(e);
   };
 }
 defineCustomElement("sinch-tabs", Tabs);
@@ -6209,6 +6220,7 @@ class EmojiPicker extends NectaryElement {
   };
   #onChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-change")?.(e);
+    getReactEventHandler(this, "onChange")?.(e);
   };
   get focusable() {
     return true;
@@ -6605,9 +6617,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 +6864,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 +7175,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 +7438,7 @@ class Pagination extends NectaryElement {
   }
   #onChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-change")?.(e);
+    getReactEventHandler(this, "onChange")?.(e);
   };
   get focusable() {
     return true;
@@ -7534,6 +7553,7 @@ class PersistentOverlay extends NectaryElement {
   }
   #onVisibilityAlteredReactHandler = (e) => {
     getReactEventHandler(this, "on-visibility-altered")?.(e);
+    getReactEventHandler(this, "onVisibilityAltered")?.(e);
   };
 }
 defineCustomElement("sinch-persistent-overlay", PersistentOverlay);
@@ -7826,6 +7846,7 @@ class ProgressStepper extends NectaryElement {
   };
   #onChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-change")?.(e);
+    getReactEventHandler(this, "onChange")?.(e);
   };
 }
 defineCustomElement("sinch-progress-stepper", ProgressStepper);
@@ -8147,6 +8168,7 @@ class Radio extends NectaryElement {
   }
   #onChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-change")?.(e);
+    getReactEventHandler(this, "onChange")?.(e);
   };
 }
 defineCustomElement("sinch-radio", Radio);
@@ -10282,6 +10304,7 @@ class RichTextarea extends NectaryElement {
   };
   #onChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-change")?.(e);
+    getReactEventHandler(this, "onChange")?.(e);
   };
   #onFocusReactHandler = () => {
     getReactEventHandler(this, "on-focus")?.();
@@ -10291,6 +10314,7 @@ class RichTextarea extends NectaryElement {
   };
   #onSelectionReactHandler = (e) => {
     getReactEventHandler(this, "on-selection")?.(e);
+    getReactEventHandler(this, "onSelection")?.(e);
   };
 }
 defineCustomElement("sinch-rich-textarea", RichTextarea);
@@ -10350,6 +10374,7 @@ class SegmentCollapse extends NectaryElement {
   };
   #onChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-change")?.(e);
+    getReactEventHandler(this, "onChange")?.(e);
   };
 }
 defineCustomElement("sinch-segment-collapse", SegmentCollapse);
@@ -10517,6 +10542,7 @@ class SegmentedControl extends NectaryElement {
   }
   #onChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-change")?.(e);
+    getReactEventHandler(this, "onChange")?.(e);
   };
 }
 defineCustomElement("sinch-segmented-control", SegmentedControl);
@@ -10688,6 +10714,7 @@ class SegmentedIconControl extends NectaryElement {
   }
   #onChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-change")?.(e);
+    getReactEventHandler(this, "onChange")?.(e);
   };
 }
 defineCustomElement("sinch-segmented-icon-control", SegmentedIconControl);
@@ -11387,9 +11414,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 +12221,7 @@ class Textarea extends NectaryElement {
   }
   #onChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-change")?.(e);
+    getReactEventHandler(this, "onChange")?.(e);
   };
   #onFocusReactHandler = () => {
     getReactEventHandler(this, "on-focus")?.();
@@ -12583,6 +12613,7 @@ class TimePicker extends NectaryElement {
   };
   #onChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-change")?.(e);
+    getReactEventHandler(this, "onChange")?.(e);
   };
 }
 defineCustomElement("sinch-time-picker", TimePicker);
@@ -12842,6 +12873,7 @@ class Toast extends NectaryElement {
   }
   #onTimeoutReactHandler = (e) => {
     getReactEventHandler(this, "on-timeout")?.(e);
+    getReactEventHandler(this, "onTimeout")?.(e);
   };
 }
 defineCustomElement("sinch-toast", Toast);
@@ -12978,6 +13010,7 @@ class Toggle extends NectaryElement {
   };
   #onChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-change")?.(e);
+    getReactEventHandler(this, "onChange")?.(e);
   };
   #onFocusReactHandler = (e) => {
     getReactEventHandler(this, "on-focus")?.(e);

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.0.4",
   "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 {};