fix(striker-ui): expose check all state in List

striker-ui/components/List.tsx

@@ -14,7 +14,16 @@ import {
   SxProps,
   Theme,
 } from '@mui/material';
-import { FC, ReactNode, useCallback, useMemo, useState } from 'react';
+import {
+  FC,
+  ForwardedRef,
+  forwardRef,
+  ReactNode,
+  useCallback,
+  useImperativeHandle,
+  useMemo,
+  useState,
+} from 'react';
 import { v4 as uuidv4 } from 'uuid';
 
 import { BLUE, GREY, RED } from '../lib/consts/DEFAULT_THEME';
@@ -27,7 +36,7 @@ import { BodyText } from './Text';
 
 type OnCheckboxChange = Exclude<CheckboxProps['onChange'], undefined>;
 
-type ListOptionalPropsWithDefaults<T = unknown> = {
+type ListOptionalPropsWithDefaults<T extends unknown = unknown> = {
   allowCheckAll?: boolean;
   allowEdit?: boolean;
   edit?: boolean;
@@ -40,7 +49,7 @@ type ListOptionalPropsWithDefaults<T = unknown> = {
   scroll?: boolean;
 };
 
-type ListOptionalPropsWithoutDefaults<T = unknown> = {
+type ListOptionalPropsWithoutDefaults<T extends unknown = unknown> = {
   allowAddItem?: boolean;
   allowCheckItem?: boolean;
   allowDelete?: boolean;
@@ -58,14 +67,18 @@ type ListOptionalPropsWithoutDefaults<T = unknown> = {
   renderListItemCheckboxState?: (key: string, value: T) => boolean;
 };
 
-type ListOptionalProps<T = unknown> = ListOptionalPropsWithDefaults<T> &
-  ListOptionalPropsWithoutDefaults<T>;
+type ListOptionalProps<T extends unknown = unknown> =
+  ListOptionalPropsWithDefaults<T> & ListOptionalPropsWithoutDefaults<T>;
 
-type ListProps<T = unknown> = FlexBoxProps &
+type ListProps<T extends unknown = unknown> = FlexBoxProps &
   ListOptionalProps<T> & {
     listItems: Record<string, T>;
   };
 
+type ListForwardedRefContent = {
+  setCheckAll?: (value: boolean) => void;
+};
+
 const HEADER_SPACING = '.3em';
 const LIST_DEFAULT_PROPS: Required<ListOptionalPropsWithDefaults> &
   ListOptionalPropsWithoutDefaults = {
@@ -96,7 +109,9 @@ const LIST_ICON_MIN_WIDTH = '56px';
 
 const CHECK_ALL_MIN_WIDTH = `calc(${LIST_ICON_MIN_WIDTH} - ${HEADER_SPACING})`;
 
-const List = <T,>({
+const List = forwardRef(
+  <T,>(
+    {
       header,
       allowCheckAll: isAllowCheckAll = LIST_DEFAULT_PROPS.allowCheckAll,
       allowEdit: isAllowEdit = LIST_DEFAULT_PROPS.allowEdit,
@@ -110,7 +125,10 @@ const List = <T,>({
         ...restListItemProps
       } = LIST_DEFAULT_PROPS.listItemProps,
       listItems,
-  listProps: { sx: listSx, ...restListProps } = LIST_DEFAULT_PROPS.listProps,
+      listProps: {
+        sx: listSx,
+        ...restListProps
+      } = LIST_DEFAULT_PROPS.listProps,
       onAdd,
       onDelete,
       onEdit,
@@ -126,7 +144,9 @@ const List = <T,>({
       allowEditItem: isAllowEditItem = isAllowEdit,
 
       ...rootProps
-}: ListProps<T>): ReturnType<FC<ListProps<T>>> => {
+    }: ListProps<T>,
+    ref: ForwardedRef<ListForwardedRefContent>,
+  ) => {
     const [isCheckAll, setIsCheckAll] = useState<boolean>(initialCheckAll);
 
     const addItemButton = useMemo(
@@ -285,6 +305,14 @@ const List = <T,>({
       [isScroll],
     );
 
+    useImperativeHandle(
+      ref,
+      () => ({
+        setCheckAll: (value) => setIsCheckAll(value),
+      }),
+      [],
+    );
+
     return (
       <FlexBox spacing={0} {...rootProps}>
         {headerElement}
@@ -296,8 +324,14 @@ const List = <T,>({
         </MUIList>
       </FlexBox>
     );
-};
+  },
+);
 
 List.defaultProps = LIST_DEFAULT_PROPS;
+List.displayName = 'List';
+
+export type { ListForwardedRefContent, ListProps };
 
-export default List;
+export default List as <T>(
+  props: ListProps<T> & { ref?: ForwardedRef<ListForwardedRefContent> },
+) => ReturnType<FC<ListProps<T>>>;