From 7c18472e4aed38745c8070e913072226872f9dae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maciej=20Go=C5=82as?= <mgolas@virtuslab.com>
Date: Mon, 13 May 2024 17:25:28 +0200
Subject: [PATCH] feat: TET-901 remove onChange

---
 .../SelectablePill/SelectablePill.props.ts    |  1 -
 .../SelectablePill/SelectablePill.test.tsx    | 26 +------------------
 .../SelectablePill/SelectablePill.tsx         | 10 +------
 src/docs-components/SelectablePillDocs.tsx    | 21 ++++++++++-----
 4 files changed, 17 insertions(+), 41 deletions(-)

diff --git a/src/components/SelectablePill/SelectablePill.props.ts b/src/components/SelectablePill/SelectablePill.props.ts
index 402ca1d5..59b95532 100644
--- a/src/components/SelectablePill/SelectablePill.props.ts
+++ b/src/components/SelectablePill/SelectablePill.props.ts
@@ -14,7 +14,6 @@ export type SelectablePillProps = {
   tabIndex?: number;
   custom?: SelectablePillConfig;
   beforeComponent?: BeforeComponentProps;
-  onChange?: (state: boolean) => void;
 } & Omit<HTMLAttributes<HTMLSpanElement>, 'color'>;
 
 type BeforeComponentProps =
diff --git a/src/components/SelectablePill/SelectablePill.test.tsx b/src/components/SelectablePill/SelectablePill.test.tsx
index 1b743844..e876830c 100644
--- a/src/components/SelectablePill/SelectablePill.test.tsx
+++ b/src/components/SelectablePill/SelectablePill.test.tsx
@@ -1,8 +1,6 @@
-import { vi } from 'vitest';
-
 import { SelectablePill } from './SelectablePill';
 import { SelectablePillState } from './SelectablePillState.type';
-import { render, screen, fireEvent } from '../../tests/render';
+import { render, screen } from '../../tests/render';
 
 describe('SelectablePill', () => {
   const states: SelectablePillState[] = ['default', 'disabled'];
@@ -98,28 +96,6 @@ describe('SelectablePill', () => {
 
       selected.forEach((isSelected) => {
         describe(`isSelected ${isSelected}`, () => {
-          it('should handle onChange properly when clicked', () => {
-            const onChangeMock = vi.fn();
-            render(
-              <SelectablePill
-                text="Value"
-                state={state}
-                isSelected={isSelected}
-                onChange={onChangeMock}
-              />,
-            );
-
-            const pill = screen.getByTestId(pillPointer);
-            expect(pill).toBeInTheDocument();
-            fireEvent.click(pill);
-            if (state !== 'disabled') {
-              expect(onChangeMock).toHaveBeenCalled();
-              expect(onChangeMock).toBeCalledWith(!isSelected);
-            } else {
-              expect(onChangeMock).not.toHaveBeenCalled();
-            }
-          });
-
           it('should correctly render the checkmark', () => {
             render(
               <SelectablePill
diff --git a/src/components/SelectablePill/SelectablePill.tsx b/src/components/SelectablePill/SelectablePill.tsx
index 7aa67d50..0e840c6c 100644
--- a/src/components/SelectablePill/SelectablePill.tsx
+++ b/src/components/SelectablePill/SelectablePill.tsx
@@ -1,5 +1,5 @@
 import { Icon } from '@virtuslab/tetrisly-icons';
-import { MouseEventHandler, useCallback, useMemo, type FC } from 'react';
+import { useMemo, type FC } from 'react';
 
 import { SelectablePillProps } from './SelectablePill.props';
 import { stylesBuilder } from './stylesBuilder';
@@ -16,7 +16,6 @@ export const SelectablePill: FC<SelectablePillProps> = ({
   text,
   prefix,
   custom,
-  onChange,
   ...rest
 }) => {
   const styles = useMemo(
@@ -54,17 +53,10 @@ export const SelectablePill: FC<SelectablePillProps> = ({
     [beforeComponent],
   );
 
-  const handleOnClick: MouseEventHandler<HTMLSpanElement> = useCallback(() => {
-    if (state !== 'disabled') {
-      onChange?.(!isSelected);
-    }
-  }, [onChange, state, isSelected]);
-
   return (
     <tet.span
       tabIndex={tabIndex}
       data-state={state}
-      onClick={handleOnClick}
       data-testid="selectable-pill"
       {...styles.container}
       {...rest}
diff --git a/src/docs-components/SelectablePillDocs.tsx b/src/docs-components/SelectablePillDocs.tsx
index 8133de3b..672b0845 100644
--- a/src/docs-components/SelectablePillDocs.tsx
+++ b/src/docs-components/SelectablePillDocs.tsx
@@ -14,25 +14,29 @@ const appearances = [false, true] as const;
 const selected = [false, true] as const;
 
 const props = [
-  { text: 'Value' } as const,
-  { text: 'Value', prefix: 'Prefix' } as const,
-  { text: 'Value', beforeComponent: { icon: '20-tree' } } as const,
+  { id: '0', text: 'Value' } as const,
+  { id: '1', text: 'Value', prefix: 'Prefix' } as const,
+  { id: '2', text: 'Value', beforeComponent: { icon: '20-tree' } } as const,
   {
+    id: '3',
     text: 'Value',
     prefix: 'Prefix',
     beforeComponent: { icon: '20-tree' },
   } as const,
   {
+    id: '4',
     text: 'Value',
     beforeComponent: { avatar: { initials: 'M' } },
   } as const,
   {
+    id: '5',
     text: 'Value',
     beforeComponent: {
       avatar: { image: 'https://thispersondoesnotexist.com/' },
     },
   } as const,
   {
+    id: '6',
     text: 'Value',
     prefix: 'Prefix',
     beforeComponent: {
@@ -55,7 +59,7 @@ export const SelectablePillDocs: FC = () => (
         </SectionHeader>
         {appearances.map((appearance) => (
           <tet.div
-            key={String(appearance)}
+            key={`${state}-${appearance}`}
             display="flex"
             flexDirection="column"
             bg={appearance ? '$color-background-neutral-subtle' : undefined}
@@ -71,7 +75,11 @@ export const SelectablePillDocs: FC = () => (
             </SectionHeader>
 
             {selected.map((select) => (
-              <tet.div px="$dimension-1000" pb="$dimension-500">
+              <tet.div
+                px="$dimension-1000"
+                pb="$dimension-500"
+                key={`${state}-${appearance}-${select}`}
+              >
                 <SectionHeader variant="H3" as="h4" pt="$dimension-500">
                   Selected: {String(select)}
                 </SectionHeader>
@@ -88,8 +96,9 @@ export const SelectablePillDocs: FC = () => (
                   gap="$dimension-300"
                   py="$dimension-500"
                 >
-                  {props.map((prop) => (
+                  {props.map(({ id, ...prop }) => (
                     <SelectablePill
+                      key={id}
                       state={state}
                       isInverted={appearance}
                       isSelected={select}