From 93f6cda9d8a1df65cea78bddfaa236018e0c6f36 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Fri, 7 Feb 2025 15:03:24 +0530
Subject: [PATCH 1/6] add: `on:click` to checkbox for manual state changes.

---
 v2/pink-sb/src/lib/selector/Checkbox.svelte | 1 +
 1 file changed, 1 insertion(+)

diff --git a/v2/pink-sb/src/lib/selector/Checkbox.svelte b/v2/pink-sb/src/lib/selector/Checkbox.svelte
index bb53e24549..a185469d71 100644
--- a/v2/pink-sb/src/lib/selector/Checkbox.svelte
+++ b/v2/pink-sb/src/lib/selector/Checkbox.svelte
@@ -36,6 +36,7 @@
         {...$root}
         {disabled}
         use:root
+        on:click
         class:active={$isIndeterminate || $isChecked}
         class:s={size === 's'}
     >

From 8a34f074cb5ce6f88c610cd21ccd8b1d33729f4d Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Fri, 7 Feb 2025 15:04:27 +0530
Subject: [PATCH 2/6] update: checkbox state-management on table.

---
 v2/pink-sb/src/lib/table/Table.svelte | 51 +++++++++++++++++++++++++--
 1 file changed, 49 insertions(+), 2 deletions(-)

diff --git a/v2/pink-sb/src/lib/table/Table.svelte b/v2/pink-sb/src/lib/table/Table.svelte
index 8a4937baac..d1b8edf761 100644
--- a/v2/pink-sb/src/lib/table/Table.svelte
+++ b/v2/pink-sb/src/lib/table/Table.svelte
@@ -1,15 +1,62 @@
-<script>
+<script lang="ts">
     import Row from './Row.svelte';
+    import Cell from './Cell.svelte';
+    import Checkbox from '$lib/selector/Checkbox.svelte';
+
+    export let selection = false;
+    export let idKey: string = 'id';
+    export let selectedIds: string[] = [];
+    export let items: Array<Record<string, any>> = [];
+
+    $: someSelected = !allSelected && items.some((item) => selectedIds.includes(item[idKey]));
+    $: allSelected = items.length > 0 && items.every((item) => selectedIds.includes(item[idKey]));
+
+    function toggleAll() {
+        selectedIds = allSelected ? [] : items.map((item) => item[idKey]);
+    }
+
+    function toggleRow(id: string) {
+        if (selectedIds.includes(id)) {
+            selectedIds = selectedIds.filter((selId) => selId !== id);
+        } else {
+            selectedIds = [...selectedIds, id];
+        }
+    }
 </script>
 
 <div class="root">
     <div role="table">
         {#if $$slots.header}
             <Row type="header">
+                {#if selection}
+                    <Cell width="20px">
+                        <Checkbox
+                            size="s"
+                            checked={allSelected ? true : someSelected ? 'indeterminate' : false}
+                            on:click={toggleAll}
+                        />
+                    </Cell>
+                {/if}
                 <slot name="header" />
             </Row>
         {/if}
-        <slot />
+
+        {#if selection}
+            {#each items as tableItem}
+                <Row type="row">
+                    <Cell>
+                        <Checkbox
+                            size="s"
+                            on:click={() => toggleRow(tableItem[idKey])}
+                            checked={selectedIds.includes(tableItem[idKey])}
+                        />
+                    </Cell>
+                    <slot name="row" {tableItem} />
+                </Row>
+            {/each}
+        {:else}
+            <slot />
+        {/if}
     </div>
 </div>
 

From 29b35be3bf05cdcb3defdefa10fc5fc9b4cbcd78 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Fri, 7 Feb 2025 15:05:38 +0530
Subject: [PATCH 3/6] update: table storybook.

---
 v2/pink-sb/src/stories/Table.stories.svelte | 66 ++++++++++-----------
 1 file changed, 32 insertions(+), 34 deletions(-)

diff --git a/v2/pink-sb/src/stories/Table.stories.svelte b/v2/pink-sb/src/stories/Table.stories.svelte
index 5b8b980906..e5faf013cf 100644
--- a/v2/pink-sb/src/stories/Table.stories.svelte
+++ b/v2/pink-sb/src/stories/Table.stories.svelte
@@ -12,6 +12,14 @@
     import { Selector, Button, Badge, Tag, Icon, Status, Typography } from '$lib/index.js';
     import { Story } from '@storybook/addon-svelte-csf';
     import { IconDuplicate } from '@appwrite.io/pink-icons-svelte';
+
+    $: selectedIds = [];
+    let tableItems = [
+        { id: 1, name: 'Arman Nik', role: 'Product Engineer', location: 'Italy' },
+        { id: 2, name: 'Darshan Pandya', role: 'Product Engineer', location: 'India' },
+        { id: 3, name: 'Ernst Mulders', role: 'Product Engineer', location: 'Netherlands' },
+        { id: 4, name: 'Torsten Dittmann', role: 'Product Architect', location: 'Germany' }
+    ];
 </script>
 
 <Story name="Default">
@@ -147,40 +155,30 @@
 </Story>
 
 <Story name="Checkboxes">
-    <Table.Root>
-        <svelte:fragment slot="header">
-            <Table.Cell width="20px">
-                <Selector.Checkbox size="s" />
-            </Table.Cell>
-            <Table.Cell>Lorem</Table.Cell>
-            <Table.Cell>Ipsum</Table.Cell>
-            <Table.Cell>Dolor</Table.Cell>
-        </svelte:fragment>
-        <Table.Row>
-            <Table.Cell>
-                <Selector.Checkbox size="s" />
-            </Table.Cell>
-            <Table.Cell>Lorem</Table.Cell>
-            <Table.Cell>Ipsum</Table.Cell>
-            <Table.Cell>Dolor</Table.Cell>
-        </Table.Row>
-        <Table.Row>
-            <Table.Cell>
-                <Selector.Checkbox size="s" />
-            </Table.Cell>
-            <Table.Cell>Lorem</Table.Cell>
-            <Table.Cell>Ipsum</Table.Cell>
-            <Table.Cell>Dolor</Table.Cell>
-        </Table.Row>
-        <Table.Row>
-            <Table.Cell>
-                <Selector.Checkbox size="s" />
-            </Table.Cell>
-            <Table.Cell>Lorem</Table.Cell>
-            <Table.Cell>Ipsum</Table.Cell>
-            <Table.Cell>Dolor</Table.Cell>
-        </Table.Row>
-    </Table.Root>
+    <Layout.Stack direction="column" gap="l">
+        <Table.Root selection items={tableItems} bind:selectedIds>
+            <svelte:fragment slot="header">
+                <Table.Cell>Name</Table.Cell>
+                <Table.Cell>Role</Table.Cell>
+                <Table.Cell>Location</Table.Cell>
+            </svelte:fragment>
+
+            <svelte:fragment slot="row" let:tableItem>
+                <Table.Cell>{tableItem.name}</Table.Cell>
+                <Table.Cell>{tableItem.role}</Table.Cell>
+                <Table.Cell>{tableItem.location}</Table.Cell>
+            </svelte:fragment>
+        </Table.Root>
+
+        <Typography.Caption variant="400">Selected IDs: {selectedIds.join(', ')}</Typography.Caption
+        >
+
+        <Typography.Caption variant="400"
+            >Selected Persons: {selectedIds
+                .map((id) => tableItems.find((item) => item.id === id)?.name)
+                .join(', ')}</Typography.Caption
+        >
+    </Layout.Stack>
 </Story>
 
 <Story name="Overflow">

From 201413159b862a89d03d116ff4cd30af7dfbc0e1 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Sun, 9 Feb 2025 15:04:20 +0530
Subject: [PATCH 4/6] improve: selection logic on tables.

---
 v2/pink-sb/src/lib/table/Row.svelte   | 33 ++++++++++
 v2/pink-sb/src/lib/table/Table.svelte | 92 +++++++++++++++------------
 2 files changed, 86 insertions(+), 39 deletions(-)

diff --git a/v2/pink-sb/src/lib/table/Row.svelte b/v2/pink-sb/src/lib/table/Row.svelte
index ef4a6679ff..2dca68c6e2 100644
--- a/v2/pink-sb/src/lib/table/Row.svelte
+++ b/v2/pink-sb/src/lib/table/Row.svelte
@@ -1,8 +1,41 @@
 <script lang="ts">
+    import { getContext } from 'svelte';
+    import Cell from '$lib/table/header/Cell.svelte';
+    import Checkbox from '$lib/selector/Checkbox.svelte';
+    import { TABLE_CONTEXT, type TableContext } from './Table.svelte';
+
     export let type: 'row' | 'header' = 'row';
+    export let id: string | undefined = undefined;
+
+    const tableCtx = getContext<TableContext>(TABLE_CONTEXT);
+    let allSelected = tableCtx.allSelected;
+    let someSelected = tableCtx.someSelected;
+
+    function checkboxClick(e: MouseEvent) {
+        e.stopPropagation();
+        type === 'row' && id ? tableCtx.toggleRow(id) : tableCtx.toggleAll();
+    }
+
+    $: isChecked = () => {
+        return type === 'header'
+            ? $allSelected
+                ? true
+                : $someSelected
+                  ? 'indeterminate'
+                  : false
+            : id
+              ? tableCtx.isSelected(id)
+              : false;
+    };
 </script>
 
 <div role={type === 'row' ? 'row' : 'rowheader'}>
+    {#if tableCtx.selection}
+        <Cell width="20px">
+            <Checkbox size="s" on:click={checkboxClick} checked={isChecked()} />
+        </Cell>
+    {/if}
+
     <slot />
 </div>
 
diff --git a/v2/pink-sb/src/lib/table/Table.svelte b/v2/pink-sb/src/lib/table/Table.svelte
index d1b8edf761..effe2bd486 100644
--- a/v2/pink-sb/src/lib/table/Table.svelte
+++ b/v2/pink-sb/src/lib/table/Table.svelte
@@ -1,62 +1,76 @@
+<script context="module" lang="ts">
+    import { type Readable } from 'svelte/store';
+
+    export const TABLE_CONTEXT = Symbol('table');
+
+    export interface TableContext {
+        selection: boolean;
+        selectedIds: Readable<string[]>;
+        allSelected: Readable<boolean>;
+        someSelected: Readable<boolean>;
+        isSelected: (id: string) => boolean;
+        toggleRow: (id: string) => void;
+        toggleAll: () => void;
+    }
+</script>
+
 <script lang="ts">
     import Row from './Row.svelte';
-    import Cell from './Cell.svelte';
-    import Checkbox from '$lib/selector/Checkbox.svelte';
+    import { setContext } from 'svelte';
+    import { writable, derived } from 'svelte/store';
 
     export let selection = false;
-    export let idKey: string = 'id';
     export let selectedIds: string[] = [];
-    export let items: Array<Record<string, any>> = [];
+    export let selectableIds: string[] = [];
 
-    $: someSelected = !allSelected && items.some((item) => selectedIds.includes(item[idKey]));
-    $: allSelected = items.length > 0 && items.every((item) => selectedIds.includes(item[idKey]));
+    const selectedIdsStore = writable(selectedIds);
 
-    function toggleAll() {
-        selectedIds = allSelected ? [] : items.map((item) => item[idKey]);
+    const allSelected = derived(
+        selectedIdsStore,
+        ($ids) => selectableIds.length > 0 && selectableIds.every((id) => $ids.includes(id))
+    );
+
+    const someSelected = derived(
+        [selectedIdsStore, allSelected],
+        ([$ids, $all]) => !$all && selectableIds.some((id) => $ids.includes(id))
+    );
+
+    function isSelected(id: string): boolean {
+        return selectedIds.includes(id);
     }
 
     function toggleRow(id: string) {
-        if (selectedIds.includes(id)) {
-            selectedIds = selectedIds.filter((selId) => selId !== id);
-        } else {
-            selectedIds = [...selectedIds, id];
-        }
+        selectedIds = isSelected(id)
+            ? selectedIds.filter((sel) => sel !== id)
+            : [...selectedIds, id];
+
+        selectedIdsStore.set(selectedIds);
+    }
+
+    function toggleAll() {
+        selectedIds = $allSelected ? [] : [...selectableIds];
+        selectedIdsStore.set(selectedIds);
     }
+
+    setContext<TableContext>(TABLE_CONTEXT, {
+        selection,
+        selectedIds: selectedIdsStore,
+        allSelected,
+        someSelected,
+        isSelected,
+        toggleRow,
+        toggleAll
+    });
 </script>
 
 <div class="root">
     <div role="table">
         {#if $$slots.header}
             <Row type="header">
-                {#if selection}
-                    <Cell width="20px">
-                        <Checkbox
-                            size="s"
-                            checked={allSelected ? true : someSelected ? 'indeterminate' : false}
-                            on:click={toggleAll}
-                        />
-                    </Cell>
-                {/if}
                 <slot name="header" />
             </Row>
         {/if}
-
-        {#if selection}
-            {#each items as tableItem}
-                <Row type="row">
-                    <Cell>
-                        <Checkbox
-                            size="s"
-                            on:click={() => toggleRow(tableItem[idKey])}
-                            checked={selectedIds.includes(tableItem[idKey])}
-                        />
-                    </Cell>
-                    <slot name="row" {tableItem} />
-                </Row>
-            {/each}
-        {:else}
-            <slot />
-        {/if}
+        <slot />
     </div>
 </div>
 

From ad33cdeadb65a607498b73b7667c9bd987341334 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Sun, 9 Feb 2025 15:06:00 +0530
Subject: [PATCH 5/6] update: storybook.

---
 v2/pink-sb/src/stories/Table.stories.svelte | 21 ++++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/v2/pink-sb/src/stories/Table.stories.svelte b/v2/pink-sb/src/stories/Table.stories.svelte
index e5faf013cf..e650f2eed9 100644
--- a/v2/pink-sb/src/stories/Table.stories.svelte
+++ b/v2/pink-sb/src/stories/Table.stories.svelte
@@ -156,18 +156,22 @@
 
 <Story name="Checkboxes">
     <Layout.Stack direction="column" gap="l">
-        <Table.Root selection items={tableItems} bind:selectedIds>
+        {@const selectableIds = tableItems.map((item) => item.id.toString())}
+        <Table.Root selection {selectableIds} bind:selectedIds>
             <svelte:fragment slot="header">
                 <Table.Cell>Name</Table.Cell>
                 <Table.Cell>Role</Table.Cell>
                 <Table.Cell>Location</Table.Cell>
             </svelte:fragment>
 
-            <svelte:fragment slot="row" let:tableItem>
-                <Table.Cell>{tableItem.name}</Table.Cell>
-                <Table.Cell>{tableItem.role}</Table.Cell>
-                <Table.Cell>{tableItem.location}</Table.Cell>
-            </svelte:fragment>
+            {#each tableItems as tableItem}
+                <!-- passing `id` is impt. here -->
+                <Table.Row id={tableItem.id.toString()}>
+                    <Table.Cell>{tableItem.name}</Table.Cell>
+                    <Table.Cell>{tableItem.role}</Table.Cell>
+                    <Table.Cell>{tableItem.location}</Table.Cell>
+                </Table.Row>
+            {/each}
         </Table.Root>
 
         <Typography.Caption variant="400">Selected IDs: {selectedIds.join(', ')}</Typography.Caption
@@ -175,7 +179,10 @@
 
         <Typography.Caption variant="400"
             >Selected Persons: {selectedIds
-                .map((id) => tableItems.find((item) => item.id === id)?.name)
+                .map(
+                    (selectedId) =>
+                        tableItems.find((tableItem) => tableItem.id.toString() === selectedId)?.name
+                )
                 .join(', ')}</Typography.Caption
         >
     </Layout.Stack>

From 4e91acaaa4f6c58f9ac1ab9629bcb1549ec9c738 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Sun, 9 Feb 2025 15:20:51 +0530
Subject: [PATCH 6/6] add: error log.

---
 v2/pink-sb/src/lib/table/Row.svelte | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/v2/pink-sb/src/lib/table/Row.svelte b/v2/pink-sb/src/lib/table/Row.svelte
index 2dca68c6e2..9cf50612b1 100644
--- a/v2/pink-sb/src/lib/table/Row.svelte
+++ b/v2/pink-sb/src/lib/table/Row.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { getContext } from 'svelte';
+    import { getContext, onMount } from 'svelte';
     import Cell from '$lib/table/header/Cell.svelte';
     import Checkbox from '$lib/selector/Checkbox.svelte';
     import { TABLE_CONTEXT, type TableContext } from './Table.svelte';
@@ -27,6 +27,14 @@
               ? tableCtx.isSelected(id)
               : false;
     };
+
+    onMount(async () => {
+        if (tableCtx.selection && type === 'row' && !id) {
+            console.error(
+                "Selection mode in `Table` requires each `Row` to have a unique 'id' to avoid inconsistent states."
+            );
+        }
+    });
 </script>
 
 <div role={type === 'row' ? 'row' : 'rowheader'}>