fix: added proper synthetic event emitter NO-JIRA (#130)

* fix: added proper synthetic event emitter NO-JIRA

* chore: removed unnecessary exports NO-JIRA

* feat(text input): test update NO-JIRA

* feat(text input inherited components): tests update NO-JIRA

* fix: cr issue NO-JIRA

Author: adrian-potepa

src/components/InlineSearchInput/InlineSearchInput.test.tsx

@@ -96,18 +96,18 @@ describe('InlineSearchInput', () => {
 
   it('should clear controlled text input', () => {
     const { input, clearButton } = getInlineSearchInput(
-      <InlineSearchInput value="1234" onChange={handleEventMock} />,
+      <InlineSearchInput onChange={handleEventMock} />,
     );
 
-    if (input && clearButton) {
-      fireEvent.change(input, { target: { value: 'test' } });
+    if (!input || !clearButton) return;
 
-      expect(input.value).toBe('1234');
+    fireEvent.change(input, { target: { value: 'test' } });
 
-      fireEvent.click(clearButton);
+    expect(input.value).toBe('test');
 
-      expect(handleEventMock).toBeCalledWith({ target: { value: '' } });
-    }
+    fireEvent.click(clearButton);
+
+    expect(handleEventMock).toBeCalledWith({ target: { value: '' } });
 
     expect(input).toBeDefined();
   });

src/components/SearchInput/SearchInput.test.tsx

@@ -103,13 +103,13 @@ describe('SearchInput', () => {
 
   it('should clear controlled text input', () => {
     const { input, clearButton } = getSearchInput(
-      <SearchInput value="1234" onChange={handleEventMock} />,
+      <SearchInput onChange={handleEventMock} />,
     );
 
     if (input && clearButton) {
       fireEvent.change(input, { target: { value: 'test' } });
 
-      expect(input.value).toBe('1234');
+      expect(input.value).toBe('test');
 
       fireEvent.click(clearButton);
 

src/components/TextInput/TextInput.test.tsx

@@ -126,18 +126,25 @@ describe('TextInput', () => {
   });
 
   it('should clear controlled text input', () => {
+    const mockedOnChanged = vi.fn();
+
     const { input, clearButton } = getTextInput(
-      <TextInput value="1234" onChange={handleEventMock} hasClearButton />,
+      <TextInput onChange={mockedOnChanged} hasClearButton />,
     );
 
     if (input && clearButton) {
-      fireEvent.change(input, { target: { value: 'test' } });
+      fireEvent.change(input, { target: { value: 'test value' } });
 
-      expect(input.value).toBe('1234');
+      expect(input.value).toBe('test value');
 
       fireEvent.click(clearButton);
 
-      expect(handleEventMock).toBeCalledWith({ target: { value: '' } });
+      expect(mockedOnChanged).toHaveBeenCalledWith(
+        expect.objectContaining({
+          _reactName: 'onChange',
+          target: expect.objectContaining({ value: '' }),
+        }),
+      );
     }
 
     expect(input).toBeDefined();

src/components/TextInput/useTextInput.ts

@@ -1,5 +1,4 @@
 import {
-  ChangeEvent,
   ChangeEventHandler,
   MouseEventHandler,
   FocusEvent,
@@ -53,13 +52,33 @@ export const useTextInput = ({
     [onChange],
   );
 
-  const handleOnClear: MouseEventHandler<HTMLButtonElement> =
-    useCallback(() => {
-      setInnerValue('');
-      onChange?.({
-        target: { value: '' },
-      } as ChangeEvent<HTMLInputElement>);
-    }, [onChange]);
+  const handleOnClear: MouseEventHandler<HTMLButtonElement> = () => {
+    setInnerValue('');
+
+    const input = containerRef.current?.querySelector('input');
+
+    if (!input) return;
+
+    const valueSetter = Object.getOwnPropertyDescriptor(
+      input.constructor.prototype,
+      'value',
+    )?.set;
+
+    const prototype = Object.getPrototypeOf(input);
+    const prototypeValueSetter = Object.getOwnPropertyDescriptor(
+      prototype,
+      'value',
+    )?.set;
+
+    if (valueSetter && valueSetter !== prototypeValueSetter) {
+      prototypeValueSetter?.call(input, '');
+    } else {
+      valueSetter?.call(input, '');
+    }
+
+    input.dispatchEvent(new Event('input', { bubbles: true }));
+  };
+
   return {
     innerValue,
     styles,