From df440757d2e8c0917c7073d93a71b0394178c215 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=81=9F=E3=81=B5=E3=81=BF?= <qsf@de-liker.com>
Date: Tue, 9 Jan 2024 17:30:39 +0900
Subject: [PATCH] =?UTF-8?q?fix(Table):=20`default`=20prefix=E3=82=92`selec?=
 =?UTF-8?q?tedRow`,=20`selectedRows`=20=E3=81=AB=E4=BB=98=E4=B8=8E=20(#150?=
 =?UTF-8?q?0)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Fix to add prefix

* Fix story

* Add change log
---
 .changeset/lucky-gifts-cover.md             |  5 ++++
 packages/for-ui/src/table/Table.stories.tsx |  4 +--
 packages/for-ui/src/table/Table.tsx         | 28 ++++++++++-----------
 3 files changed, 21 insertions(+), 16 deletions(-)
 create mode 100644 .changeset/lucky-gifts-cover.md

diff --git a/.changeset/lucky-gifts-cover.md b/.changeset/lucky-gifts-cover.md
new file mode 100644
index 00000000..c037740d
--- /dev/null
+++ b/.changeset/lucky-gifts-cover.md
@@ -0,0 +1,5 @@
+---
+"@4design/for-ui": patch
+---
+
+Fix/selectable table add default prefix@1499
diff --git a/packages/for-ui/src/table/Table.stories.tsx b/packages/for-ui/src/table/Table.stories.tsx
index 4c42219b..71cb84f3 100644
--- a/packages/for-ui/src/table/Table.stories.tsx
+++ b/packages/for-ui/src/table/Table.stories.tsx
@@ -49,7 +49,7 @@ export const WithSelect: Story = () => (
     columns={columns}
     data={StaticPersonData}
     getRowId={(row) => row.id.toString()}
-    selectedRow="2"
+    defaultSelectedRow="2"
     onSelectRow={(row) => console.info('Selected row: ', row)}
   />
 );
@@ -59,7 +59,7 @@ export const WithSelectMultiple: Story = () => (
     columns={columns}
     data={StaticPersonData}
     getRowId={(row) => row.id.toString()}
-    selectedRows={['2', '3', '4']}
+    defaultSelectedRows={['2', '3', '4']}
     onSelectRows={(rows) => console.info('Selected rows: ', rows)}
   />
 );
diff --git a/packages/for-ui/src/table/Table.tsx b/packages/for-ui/src/table/Table.tsx
index 35360599..eaa93b3e 100644
--- a/packages/for-ui/src/table/Table.tsx
+++ b/packages/for-ui/src/table/Table.tsx
@@ -49,17 +49,17 @@ export type TableProps<T extends RowData> = Pick<TableOptions<T>, 'data' | 'colu
 } & (
     | {
         /** If wanting to use selectable table, specify _onSelectRow_ or _onSelectRows_ exclusively */
-        selectedRow?: string;
-        selectedRows?: never;
         onSelectRow?: ((id: string | undefined) => void) | undefined;
+        defaultSelectedRow?: string;
         onSelectRows?: never;
+        defaultSelectedRows?: never;
       }
     | {
-        selectedRow?: never;
-        selectedRows?: string[];
         onSelectRow?: never;
+        defaultSelectedRow?: never;
         /** If wanting to use selectable table, specify _onSelectRow_ or _onSelectRows_ exclusively */
         onSelectRows?: ((ids: string[]) => void) | undefined;
+        defaultSelectedRows?: string[];
       }
   );
 
@@ -67,8 +67,8 @@ export const Table = <T extends RowData>({
   data,
   disablePagination,
   defaultSortColumn,
-  selectedRow,
-  selectedRows,
+  defaultSelectedRow,
+  defaultSelectedRows,
   onSelectRow,
   onSelectRows,
   onRowClick,
@@ -82,13 +82,14 @@ export const Table = <T extends RowData>({
   defaultPage = 1,
   onChangePage,
 }: TableProps<T>) => {
-  const defaultSelectedRows = selectedRow
-    ? { [selectedRow]: true }
-    : selectedRows?.reduce((acc, id) => ({ ...acc, [id]: true }), {}) ?? {};
+  const tableId = useId();
   const [sorting, setSorting] = useState<SortingState>(defaultSortColumn ? [defaultSortColumn] : []);
-  const [rowSelection, setRowSelection] = useState<RowSelectionState>(defaultSelectedRows);
+
+  const defaultRowSelection = defaultSelectedRow
+    ? { [defaultSelectedRow]: true }
+    : (defaultSelectedRows || []).reduce((acc, id) => ({ ...acc, [id]: true }), {});
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>(defaultRowSelection);
   const prevRowSelection = useRef<RowSelectionState>({});
-  const tableId = useId();
 
   const onRowSelectionChange: OnChangeFn<RowSelectionState> = useCallback(
     (updater) => {
@@ -96,11 +97,10 @@ export const Table = <T extends RowData>({
       // However, due to the React "state is snapshot" design, it is hard to get current selection without using rowSelection.
       // This may lead to some bugs if setting state several times in 1 rendering.
       const row: RowSelectionState = typeof updater === 'function' ? updater(rowSelection) : updater;
-      // If selected the same row (when single selectable table), skip it
+      // If the same row is selected (when single selectable table), skip it
       if (prevRowSelection.current === row) {
         return;
       }
-      console.info(row);
       setRowSelection(row);
       prevRowSelection.current = row;
       const selectedIds = Object.keys(row);
@@ -112,7 +112,7 @@ export const Table = <T extends RowData>({
 
   const selectRow = useCallback(
     (row: RowType<T>) => {
-      // If multiply seletable table, using toggle. Or if singly selectable table, not using toggle.
+      // If multiple seletable table, using toggle. Otherwise (singly selectable table) not using toggle.
       row.toggleSelected(onSelectRows ? undefined : true);
     },
     [onSelectRows],