fix: single row deselection in Table (#2323)

Author: marcello-tk

.changeset/cyan-tools-design.md

@@ -0,0 +1,5 @@
+---
+"xmlui": patch
+---
+
+Fixed Table row deselection if multiple row selections are disabled.

docs/content/components/Table.md

@@ -697,6 +697,26 @@ Select a column header and set it to descending ordering.
 </App>
 ```
 
+### `idKey` (default: "id") [#idkey-default-id]
+
+This property is used to specify the unique ID property in the data array. If the idKey points to a property that does not exist in the data items, that will result in incorrect behavior when using selectable rows.
+
+```xmlui copy /idKey="key"/
+<App>
+  <Table
+    idKey="key"
+    rowsSelectable="true"
+    data="{[
+      { 'key': 0, 'name': 'John' },
+      { 'key': 1, 'name': 'Jane' },
+      { 'key': 2, 'name': 'Bill' },
+    ]}"
+  > 
+    <Column bindTo="name"/>
+  </Table>
+</App>
+```
+
 ### `initiallySelected` [#initiallyselected]
 
 An array of IDs that should be initially selected when the table is rendered. This property only has an effect when the rowsSelectable property is set to `true`.

xmlui/src/components/SelectionStore/SelectionStoreNative.tsx

@@ -28,10 +28,16 @@ type SelectionStoreProps = {
 const EMPTY_SELECTION_STATE = {
   value: EMPTY_ARRAY,
 };
-export const StandaloneSelectionStore = ({ children }) => {
+export const StandaloneSelectionStore = ({
+  children,
+  idKey,
+}: {
+  children: ReactNode;
+  idKey?: string;
+}) => {
   const [selection, setSelection] = useState(EMPTY_SELECTION_STATE);
   return (
-    <SelectionStore updateState={setSelection} selectedItems={selection.value}>
+    <SelectionStore updateState={setSelection} selectedItems={selection.value} idKey={idKey}>
       {children}
     </SelectionStore>
   );

xmlui/src/components/Table/Table.md

@@ -1609,12 +1609,12 @@ Click on any of the column headers to trigger a new sorting:
 
 %-API-END
 
-%-API-START dataIdProperty
+%-PROP-START idKey
 
-```xmlui copy /dataIdProperty="key"/
+```xmlui copy /idKey="key"/
 <App>
   <Table
-    dataIdProperty="key"
+    idKey="key"
     rowsSelectable="true"
     data="{[
       { 'key': 0, 'name': 'John' },
@@ -1627,4 +1627,4 @@ Click on any of the column headers to trigger a new sorting:
 </App>
 ```
 
-%-API-END
+%-PROP-END

xmlui/src/components/Table/Table.spec.ts

@@ -903,34 +903,11 @@ test.describe("Edge Cases", () => {
     }
   );
 
-  test("row checkboxes work when 'dataIdProperty' property is specified",
-    async ({ initTestBed, page }) => {
-      await initTestBed(`
-        <Table testId="table" rowsSelectable="true"
-          dataIdProperty="account_id"
-          data="{[
-            { account_id: 1, name: 'Item 1' },
-            { account_id: 2, name: 'Item 2' }
-          ]}">
-          <Column bindTo="account_id" width="80px">
-            <Text>{$item.account_id}</Text>
-          </Column>
-          <Column bindTo="name">
-            <Text>{$item.name}</Text>
-          </Column>
-        </Table>
-      `);
-      const checkboxes = page.locator("input[type='checkbox']");
-      await checkboxes.nth(1).check({ force: true }); // First data row
-      await expect(checkboxes.nth(1)).toBeChecked();
-      await expect(checkboxes.nth(2)).not.toBeChecked(); // Second data row
-    }
-  );
-
-  test("row checkboxes work when no 'dataIdProperty' prop and no 'id' in data items",
+  test("row checkboxes work when 'idKey' property is specified",
     async ({ initTestBed, page }) => {
       await initTestBed(`
         <Table testId="table" rowsSelectable="true"
+          idKey="account_id"
           data="{[
             { account_id: 1, name: 'Item 1' },
             { account_id: 2, name: 'Item 2' }