refactor: update TreeItemCheckbox to use TreeItemWithCheckboxToolProps and improve type safety

apps/app/src/features/openai/client/components/AiAssistant/AiAssistantManagementModal/TreeItemWithCheckbox.tsx

@@ -1,6 +1,9 @@
 import type { FC } from 'react';
 
-import type { TreeItemProps, TreeItemToolProps } from '~/features/page-tree';
+import type {
+  TreeItemProps,
+  TreeItemWithCheckboxToolProps,
+} from '~/features/page-tree';
 import { TreeItemLayout } from '~/features/page-tree/components';
 
 import styles from './TreeItemWithCheckbox.module.scss';
@@ -9,20 +12,13 @@ const moduleClass = styles['page-tree-item'] ?? '';
 
 export const treeItemWithCheckboxSize = 36; // in px
 
-type TreeItemWithCheckboxProps = TreeItemProps & {
-  key?: React.Key | null;
-};
-
 // Checkbox component to be used as customEndComponents
-const TreeItemCheckbox: FC<TreeItemToolProps> = ({ item }) => {
-  // Get checkbox props from headless-tree
-  // biome-ignore lint/suspicious/noExplicitAny: checkboxesFeature adds these methods dynamically
-  const checkboxProps = (item as any).getCheckboxProps?.() ?? {};
+const TreeItemCheckbox: FC<TreeItemWithCheckboxToolProps> = ({ item }) => {
+  const checkboxProps = item.getCheckboxProps();
 
   const handleCheckboxChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     e.stopPropagation();
-    // biome-ignore lint/suspicious/noExplicitAny: checkboxesFeature adds these methods dynamically
-    (item as any).toggleCheckedState?.();
+    item.toggleCheckedState();
   };
 
   // Prevent click events from bubbling up to the li element
@@ -50,6 +46,10 @@ const TreeItemCheckbox: FC<TreeItemToolProps> = ({ item }) => {
   );
 };
 
+type TreeItemWithCheckboxProps = TreeItemProps & {
+  key?: React.Key | null;
+};
+
 export const TreeItemWithCheckbox: FC<TreeItemWithCheckboxProps> = (props) => {
   return (
     <TreeItemLayout

apps/app/src/features/page-tree/interfaces/index.ts

@@ -1,12 +1,15 @@
 import type { IPageToDeleteWithMeta } from '@growi/core';
-import type { ItemInstance } from '@headless-tree/core';
+import type { CheckboxesFeatureDef, ItemInstance } from '@headless-tree/core';
 
 import type { InputValidationResult } from '~/client/util/use-input-validator';
 import type { IPageForTreeItem } from '~/interfaces/page';
 import type { IPageForPageDuplicateModal } from '~/states/ui/modal/page-duplicate';
 
-type TreeItemBaseProps = {
-  item: ItemInstance<IPageForTreeItem>;
+type TreeItemBaseProps<
+  TI = IPageForTreeItem,
+  I extends ItemInstance<TI> = ItemInstance<TI>,
+> = {
+  item: I;
   isEnableActions: boolean;
   isReadOnlyUser: boolean;
   onClickDuplicateMenuItem?(pageToDuplicate: IPageForPageDuplicateModal): void;
@@ -20,6 +23,11 @@ export type TreeItemToolProps = TreeItemBaseProps & {
   };
 };
 
+export type TreeItemWithCheckboxToolProps = TreeItemBaseProps<
+  IPageForTreeItem,
+  ItemInstance<IPageForTreeItem & CheckboxesFeatureDef<unknown>['itemInstance']>
+>;
+
 export type TreeItemProps = TreeItemBaseProps & {
   targetPath: string;
   targetPathOrId?: string | null;