@tactics/toddle-styleguide 1.2.6 → 1.2.8

package/src/components/molecules/quick-filter/quick-filter.component.d.ts

@@ -1,11 +1,18 @@
-import { VisualState } from '../../../types/visual-state.enum';
+import {VisualState} from '../../../types/visual-state.enum';
 type QuickFilterProps = {
-    id: string;
-    isLoading: boolean;
-    amount: number;
-    isSelected?: boolean;
-    onSelect: (id: string) => void;
-    visualState: VisualState;
+  id: string;
+  isLoading: boolean;
+  amount: number;
+  isSelected?: boolean;
+  onSelect: (id: string) => void;
+  visualState: VisualState;
 };
-declare const QuickFilter: ({ id, isLoading, amount, isSelected, onSelect, visualState, }: QuickFilterProps) => JSX.Element;
-export { QuickFilter as QuickFilter };
+declare const QuickFilter: ({
+  id,
+  isLoading,
+  amount,
+  isSelected,
+  onSelect,
+  visualState,
+}: QuickFilterProps) => JSX.Element;
+export {QuickFilter as QuickFilter};

package/src/components/molecules/search-input/search.component.d.ts

@@ -1,10 +1,16 @@
-import { KeyBoardTypes } from '../../../types/keyboard-types.enum';
+import {KeyBoardTypes} from '../../../types/keyboard-types.enum';
 type SearchProps = {
-    placeholder?: string;
-    onchangeText?: (text: string) => void;
-    value: string;
-    keyboardType: KeyBoardTypes;
-    onPressSearch: (text: string) => void;
+  placeholder?: string;
+  onchangeText?: (text: string) => void;
+  value: string;
+  keyboardType: KeyBoardTypes;
+  onPressSearch: (text: string) => void;
 };
-declare const Search: ({ placeholder, onchangeText, value, keyboardType, onPressSearch, }: SearchProps) => JSX.Element;
-export { Search as Search };
+declare const Search: ({
+  placeholder,
+  onchangeText,
+  value,
+  keyboardType,
+  onPressSearch,
+}: SearchProps) => JSX.Element;
+export {Search as Search};

package/src/components/molecules/search-input/search.preview.d.ts

@@ -1 +1 @@
-export declare const SearchPreview: ({}?: {}) => JSX.Element;
+export declare const SearchPreview: ({}: {}) => JSX.Element;

package/src/components/molecules/select-link/select-link.component.d.ts

@@ -1,6 +1,6 @@
 type SelectLinkProps = {
-    label: string;
-    onPress: () => void;
+  label: string;
+  onPress: () => void;
 };
-declare const SelectLink: ({ label, onPress }: SelectLinkProps) => JSX.Element;
-export { SelectLink as SelectLink };
+declare const SelectLink: ({label, onPress}: SelectLinkProps) => JSX.Element;
+export {SelectLink as SelectLink};

package/src/components/molecules/select-list-item/select-list-item.component.d.ts

@@ -1,10 +1,16 @@
 import * as React from 'react';
 type SelectListProps = {
-    title: string;
-    subtitle?: string;
-    icon: React.ReactElement;
-    onPress?: () => void;
-    inverse?: boolean;
+  title: string;
+  subtitle?: string;
+  icon: React.ReactElement;
+  onPress?: () => void;
+  inverse?: boolean;
 };
-declare const SelectListItem: ({ title, subtitle, icon, onPress, inverse, }: SelectListProps) => JSX.Element;
-export { SelectListItem as SelectListItem };
+declare const SelectListItem: ({
+  title,
+  subtitle,
+  icon,
+  onPress,
+  inverse,
+}: SelectListProps) => JSX.Element;
+export {SelectListItem as SelectListItem};

package/src/components/molecules/select-picker/select-picker.component.d.ts

@@ -1,11 +1,16 @@
 type PickerProps = {
-    placeholder?: string;
-    data: {
-        value: number | string;
-        label: string;
-    }[];
-    onChange: (item: string) => void;
-    defaultValue: string;
+  placeholder?: string;
+  data: {
+    value: number | string;
+    label: string;
+  }[];
+  onChange: (item: string) => void;
+  defaultValue: string;
 };
-export declare const SelectPicker: ({ placeholder, data, onChange, defaultValue, }: PickerProps) => JSX.Element;
+export declare const SelectPicker: ({
+  placeholder,
+  data,
+  onChange,
+  defaultValue,
+}: PickerProps) => JSX.Element;
 export {};

package/src/components/molecules/send-bubble/__snapshots__/send-text-bubble.test.js.snap

@@ -110,6 +110,7 @@ exports[`Failed text bubble test shows a DEFAULT RECEIVED text bubble that is sw
               onResponderTerminate={[Function]}
               onResponderTerminationRequest={[Function]}
               onStartShouldSetResponder={[Function]}
+              testID="edit-button"
             >
               <RNSVGSvgView
                 align="xMidYMid"
@@ -210,6 +211,7 @@ exports[`Failed text bubble test shows a DEFAULT RECEIVED text bubble that is sw
               onResponderTerminate={[Function]}
               onResponderTerminationRequest={[Function]}
               onStartShouldSetResponder={[Function]}
+              testID="delete-button"
             >
               <RNSVGSvgView
                 align="xMidYMid"
@@ -440,6 +442,7 @@ exports[`Failed text bubble test shows a DEFAULT SENT text bubble that is swipea
               onResponderTerminate={[Function]}
               onResponderTerminationRequest={[Function]}
               onStartShouldSetResponder={[Function]}
+              testID="edit-button"
             >
               <RNSVGSvgView
                 align="xMidYMid"
@@ -540,6 +543,7 @@ exports[`Failed text bubble test shows a DEFAULT SENT text bubble that is swipea
               onResponderTerminate={[Function]}
               onResponderTerminationRequest={[Function]}
               onStartShouldSetResponder={[Function]}
+              testID="delete-button"
             >
               <RNSVGSvgView
                 align="xMidYMid"
@@ -770,6 +774,7 @@ exports[`Failed text bubble test shows a WARNING RECEIVED text bubble that is sw
               onResponderTerminate={[Function]}
               onResponderTerminationRequest={[Function]}
               onStartShouldSetResponder={[Function]}
+              testID="edit-button"
             >
               <RNSVGSvgView
                 align="xMidYMid"
@@ -870,6 +875,7 @@ exports[`Failed text bubble test shows a WARNING RECEIVED text bubble that is sw
               onResponderTerminate={[Function]}
               onResponderTerminationRequest={[Function]}
               onStartShouldSetResponder={[Function]}
+              testID="delete-button"
             >
               <RNSVGSvgView
                 align="xMidYMid"
@@ -1100,6 +1106,7 @@ exports[`Failed text bubble test shows a WARNING SENT text bubble that is swipea
               onResponderTerminate={[Function]}
               onResponderTerminationRequest={[Function]}
               onStartShouldSetResponder={[Function]}
+              testID="edit-button"
             >
               <RNSVGSvgView
                 align="xMidYMid"
@@ -1200,6 +1207,7 @@ exports[`Failed text bubble test shows a WARNING SENT text bubble that is swipea
               onResponderTerminate={[Function]}
               onResponderTerminationRequest={[Function]}
               onStartShouldSetResponder={[Function]}
+              testID="delete-button"
             >
               <RNSVGSvgView
                 align="xMidYMid"
@@ -1430,6 +1438,7 @@ exports[`Failed text bubble test shows an ERROR RECEIVED text bubble that is swi
               onResponderTerminate={[Function]}
               onResponderTerminationRequest={[Function]}
               onStartShouldSetResponder={[Function]}
+              testID="edit-button"
             >
               <RNSVGSvgView
                 align="xMidYMid"
@@ -1530,6 +1539,7 @@ exports[`Failed text bubble test shows an ERROR RECEIVED text bubble that is swi
               onResponderTerminate={[Function]}
               onResponderTerminationRequest={[Function]}
               onStartShouldSetResponder={[Function]}
+              testID="delete-button"
             >
               <RNSVGSvgView
                 align="xMidYMid"
@@ -1760,6 +1770,7 @@ exports[`Failed text bubble test shows an ERROR SENT text bubble that is swipeab
               onResponderTerminate={[Function]}
               onResponderTerminationRequest={[Function]}
               onStartShouldSetResponder={[Function]}
+              testID="edit-button"
             >
               <RNSVGSvgView
                 align="xMidYMid"
@@ -1860,6 +1871,7 @@ exports[`Failed text bubble test shows an ERROR SENT text bubble that is swipeab
               onResponderTerminate={[Function]}
               onResponderTerminationRequest={[Function]}
               onStartShouldSetResponder={[Function]}
+              testID="delete-button"
             >
               <RNSVGSvgView
                 align="xMidYMid"

package/src/components/molecules/send-bubble/send-text-bubble.component.d.ts

@@ -1,11 +1,19 @@
-import { BubbleAlignment } from '../../../types/bubble-alignment.enum';
-import { VisualState } from '../../../types/visual-state.enum';
+import {BubbleAlignment} from '../../../types/bubble-alignment.enum';
+import {VisualState} from '../../../types/visual-state.enum';
 type FailedBubbleProps = {
-    text: string;
-    visualState: VisualState;
-    bubbleAlignment: BubbleAlignment;
-    onPressEdit: () => void;
-    onPressDelete: () => void;
+  id: string;
+  text: string;
+  visualState: VisualState;
+  bubbleAlignment: BubbleAlignment;
+  onPressEdit: (id: string) => void;
+  onPressDelete: (id: string) => void;
 };
-declare const SendTextBubble: ({ text, visualState, bubbleAlignment, onPressEdit, onPressDelete, }: FailedBubbleProps) => JSX.Element;
-export { SendTextBubble };
+declare const SendTextBubble: ({
+  id,
+  text,
+  visualState,
+  bubbleAlignment,
+  onPressEdit,
+  onPressDelete,
+}: FailedBubbleProps) => JSX.Element;
+export {SendTextBubble};

package/src/components/molecules/send-bubble/send-text-bubble.component.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {useContext} from 'react';
+import {useContext, useEffect, useRef} from 'react';
 
 import {Animated, Pressable, View} from 'react-native';
 import {ThemeCtx} from '../../../context/theme.context';
@@ -12,14 +12,16 @@ import {VisualState} from '../../../types/visual-state.enum';
 import {SmallText} from '../../atoms/paragraph-components';
 
 type FailedBubbleProps = {
+  id: string;
   text: string;
   visualState: VisualState;
   bubbleAlignment: BubbleAlignment;
-  onPressEdit: () => void;
-  onPressDelete: () => void;
+  onPressEdit: (id: string) => void;
+  onPressDelete: (id: string) => void;
 };
 
 const SendTextBubble = ({
+  id,
   text,
   visualState,
   bubbleAlignment,
@@ -29,6 +31,12 @@ const SendTextBubble = ({
   const context = useContext(ThemeCtx);
   const styles = Stylesheet(context, visualState, bubbleAlignment);
 
+  const swipeableRef = useRef<Swipeable>(null);
+
+  useEffect(() => {
+    swipeableRef.current?.close();
+  }, [text]);
+
   function iconColorCheck() {
     return visualState === VisualState.DEFAULT
       ? context.colors.main['0']
@@ -59,12 +67,12 @@ const SendTextBubble = ({
     return (
       <View style={styles.swipedRow}>
         <Animated.View style={[styles.swipedIcon, {opacity}]}>
-          <Pressable onPress={onPressEdit}>
+          <Pressable onPress={() => onPressEdit(id)} testID="edit-button">
             <Icon style={'regular'} name={'pencil'} color={iconColorCheck()} />
           </Pressable>
         </Animated.View>
         <Animated.View style={[styles.swipedIcon, {opacity}]}>
-          <Pressable onPress={onPressDelete}>
+          <Pressable onPress={() => onPressDelete(id)} testID="delete-button">
             <Icon style={'regular'} name={'trash'} color={iconColorCheck()} />
           </Pressable>
         </Animated.View>
@@ -75,7 +83,10 @@ const SendTextBubble = ({
   return (
     <GestureHandlerRootView>
       <View style={styles.textBubbleContainer}>
-        <Swipeable renderRightActions={RenderEditDeleteAction}>
+        <Swipeable
+          ref={swipeableRef}
+          renderRightActions={RenderEditDeleteAction}
+        >
           <SmallText
             textColor={textColorCheck(visualState)}
             addStyle={styles.text}

package/src/components/molecules/send-bubble/send-text-bubble.test.js

@@ -1,12 +1,16 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
 import {SendTextBubble} from './send-text-bubble.component';
+import {fireEvent, render} from '@testing-library/react-native';
+import {VisualState} from '../../../types/visual-state.enum';
+import {BubbleAlignment} from '../../../types/bubble-alignment.enum';
 
 describe('Failed text bubble test', () => {
   it('shows a DEFAULT SENT text bubble that is swipeable with edit and trash icon, which if we press them we can edit or delete the message', () => {
     const tree = renderer
       .create(
         <SendTextBubble
+          id={'1'}
           text={'This is a test'}
           visualState="DEFAULT"
           bubbleAlignment="SENT"
@@ -22,6 +26,7 @@ describe('Failed text bubble test', () => {
     const tree = renderer
       .create(
         <SendTextBubble
+          id={'2'}
           text={'This is a test'}
           visualState="DEFAULT"
           bubbleAlignment="RECEIVE"
@@ -37,6 +42,7 @@ describe('Failed text bubble test', () => {
     const tree = renderer
       .create(
         <SendTextBubble
+          id={'3'}
           text={'This is a test'}
           visualState="WARNING"
           bubbleAlignment="SENT"
@@ -52,6 +58,7 @@ describe('Failed text bubble test', () => {
     const tree = renderer
       .create(
         <SendTextBubble
+          id={'4'}
           text={'This is a test'}
           visualState="WARNING"
           bubbleAlignment="RECEIVE"
@@ -67,6 +74,7 @@ describe('Failed text bubble test', () => {
     const tree = renderer
       .create(
         <SendTextBubble
+          id={'4'}
           text={'This is a test'}
           visualState="ERROR"
           bubbleAlignment="SENT"
@@ -82,6 +90,7 @@ describe('Failed text bubble test', () => {
     const tree = renderer
       .create(
         <SendTextBubble
+          id={'5'}
           text={'This is a test'}
           visualState="ERROR"
           bubbleAlignment="RECEIVE"
@@ -94,3 +103,65 @@ describe('Failed text bubble test', () => {
     expect(tree).toMatchSnapshot();
   });
 });
+
+describe('SendTextBubble', () => {
+  const mockId = '123';
+  const mockText = 'Hello, world!';
+  const mockVisualState = VisualState.DEFAULT;
+  const mockBubbleAlignment = BubbleAlignment.SENT;
+  const mockOnPressEdit = jest.fn();
+  const mockOnPressDelete = jest.fn();
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should render the component correctly', () => {
+    const {getByText} = render(
+      <SendTextBubble
+        id={mockId}
+        text={mockText}
+        visualState={mockVisualState}
+        bubbleAlignment={mockBubbleAlignment}
+        onPressEdit={mockOnPressEdit}
+        onPressDelete={mockOnPressDelete}
+      />
+    );
+
+    expect(getByText(mockText)).toBeDefined();
+  });
+
+  it('should call onPressEdit when the edit button is pressed', () => {
+    const {getByTestId} = render(
+      <SendTextBubble
+        id={mockId}
+        text={mockText}
+        visualState={mockVisualState}
+        bubbleAlignment={mockBubbleAlignment}
+        onPressEdit={mockOnPressEdit}
+        onPressDelete={mockOnPressDelete}
+      />
+    );
+
+    fireEvent.press(getByTestId('edit-button'));
+
+    expect(mockOnPressEdit).toHaveBeenCalledWith(mockId);
+  });
+
+  it('should call onPressDelete when the delete button is pressed', () => {
+    const {getByTestId} = render(
+      <SendTextBubble
+        id={mockId}
+        text={mockText}
+        visualState={mockVisualState}
+        bubbleAlignment={mockBubbleAlignment}
+        onPressEdit={mockOnPressEdit}
+        onPressDelete={mockOnPressDelete}
+      />
+    );
+
+    fireEvent.press(getByTestId('delete-button'));
+
+    expect(mockOnPressDelete).toHaveBeenCalledWith(mockId);
+  });
+});

package/src/components/molecules/snackbar/snackbar.component.d.ts

@@ -1,7 +1,7 @@
-import { VisualState } from '../../../types/visual-state.enum';
+import {VisualState} from '../../../types/visual-state.enum';
 type SnackbarProps = {
-    text: string;
-    visualState: VisualState;
+  text: string;
+  visualState: VisualState;
 };
-declare const Snackbar: ({ text, visualState }: SnackbarProps) => JSX.Element;
-export { Snackbar as Snackbar };
+declare const Snackbar: ({text, visualState}: SnackbarProps) => JSX.Element;
+export {Snackbar as Snackbar};

package/src/components/molecules/swipe/swipe.component.d.ts

@@ -1,7 +1,7 @@
-import { ReactNode } from 'react';
+import {ReactNode} from 'react';
 type SwipeProps = {
-    children: ReactNode;
-    onIndexChange?: (index: number) => void;
+  children: ReactNode;
+  onIndexChange?: (index: number) => void;
 };
-declare const Swipe: ({ children, onIndexChange }: SwipeProps) => JSX.Element;
-export { Swipe as Swipe };
+declare const Swipe: ({children, onIndexChange}: SwipeProps) => JSX.Element;
+export {Swipe as Swipe};

package/src/components/molecules/tag/tag.component.d.ts

@@ -1,7 +1,13 @@
 type TagProps = {
-    value: string;
-    label: string;
-    onPress: (event: string) => void;
+  value: string;
+  label: string;
+  onPress: (value: string, isSelected: boolean) => void;
+  isSelected: boolean;
 };
-declare const Tag: ({ label, onPress, value }: TagProps) => JSX.Element;
-export { Tag as Tag };
+declare const Tag: ({
+  label,
+  onPress,
+  value,
+  isSelected,
+}: TagProps) => JSX.Element;
+export {Tag as Tag};

package/src/components/molecules/time-picker/time-picker.component.d.ts

@@ -1,8 +1,13 @@
 interface TimePickerProps {
-    initialHours: string;
-    initialMinutes: string;
-    onChangeHours: (value: string) => void;
-    onChangeMinutes: (value: string) => void;
+  initialHours: string;
+  initialMinutes: string;
+  onChangeHours: (value: string) => void;
+  onChangeMinutes: (value: string) => void;
 }
-export declare const TimePicker: ({ initialHours, initialMinutes, onChangeHours, onChangeMinutes, }: TimePickerProps) => JSX.Element;
+export declare const TimePicker: ({
+  initialHours,
+  initialMinutes,
+  onChangeHours,
+  onChangeMinutes,
+}: TimePickerProps) => JSX.Element;
 export {};

package/src/components/molecules/time-tracker/time-tracker.component.d.ts

@@ -1,8 +1,12 @@
-import { VisualState } from '../../../types/visual-state.enum';
+import {VisualState} from '../../../types/visual-state.enum';
 type TimeTrackerProps = {
-    text: string;
-    textColor?: string;
-    visualState: VisualState;
+  text: string;
+  textColor?: string;
+  visualState: VisualState;
 };
-declare const TimeTracker: ({ text, visualState, textColor }: TimeTrackerProps) => JSX.Element;
-export { TimeTracker as TimeTracker };
+declare const TimeTracker: ({
+  text,
+  visualState,
+  textColor,
+}: TimeTrackerProps) => JSX.Element;
+export {TimeTracker as TimeTracker};

package/src/components/molecules/timeline/timeline.component.d.ts

@@ -1,6 +1,9 @@
 type TimeLineProps = {
-    checkIn: string;
-    checkOut?: string;
+  checkIn: string;
+  checkOut?: string;
 };
-export declare const TimeLine: ({ checkIn, checkOut }: TimeLineProps) => JSX.Element;
+export declare const TimeLine: ({
+  checkIn,
+  checkOut,
+}: TimeLineProps) => JSX.Element;
 export {};

package/src/components/molecules/timestamp/timestamp.component.d.ts

@@ -1,6 +1,6 @@
-import { ToddleDateTime } from '../../../utilities/toddle-datetime/toddle-datetime.class';
+import {ToddleDateTime} from '../../../utilities/toddle-datetime/toddle-datetime.class';
 type TimestampProps = {
-    sent: ToddleDateTime;
+  sent: ToddleDateTime;
 };
-export declare const Timestamp: ({ sent }: TimestampProps) => JSX.Element;
+export declare const Timestamp: ({sent}: TimestampProps) => JSX.Element;
 export {};

package/src/components/molecules/wave-background/wave.component.d.ts

@@ -1,2 +1,7 @@
-import { WaveProps } from '../../atoms/static-wave/static-wave.component';
-export declare const WaveBackground: ({ customWavePath, customStyle, heightSvgContainer, positionTop, }: WaveProps) => JSX.Element;
+import {WaveProps} from '../../atoms/static-wave/static-wave.component';
+export declare const WaveBackground: ({
+  customWavePath,
+  customStyle,
+  heightSvgContainer,
+  positionTop,
+}: WaveProps) => JSX.Element;

package/src/components/molecules/wide-button/wide-button.component.d.ts

@@ -1,8 +1,13 @@
 type ButtonProps = {
-    text: string;
-    disabled?: boolean;
-    onPress?: () => void;
-    backgroundColor?: string;
+  text: string;
+  disabled?: boolean;
+  onPress?: () => void;
+  backgroundColor?: string;
 };
-declare const WideButton: ({ text, disabled, onPress, backgroundColor, }: ButtonProps) => JSX.Element;
-export { WideButton as WideButton };
+declare const WideButton: ({
+  text,
+  disabled,
+  onPress,
+  backgroundColor,
+}: ButtonProps) => JSX.Element;
+export {WideButton as WideButton};

package/src/components/organisms/child-list-item/__snapshots__/child-list-item.test.js.snap

@@ -10,7 +10,6 @@ exports[`test child list item component arrow appears when selectable is false 1
       "borderTopLeftRadius": 48,
       "borderTopRightRadius": 24,
       "flexDirection": "row",
-      "overflow": "hidden",
       "width": "100%",
     }
   }
@@ -278,7 +277,6 @@ exports[`test child list item component arrow appears when selectable is false 1
         "borderBottomRightRadius": 24,
         "borderTopRightRadius": 24,
         "justifyContent": "center",
-        "overflow": "hidden",
         "paddingRight": 8,
         "width": 48,
       }
@@ -355,7 +353,6 @@ exports[`test child list item component background is blue and text is white whe
       "borderTopLeftRadius": 48,
       "borderTopRightRadius": 24,
       "flexDirection": "row",
-      "overflow": "hidden",
       "width": "100%",
     }
   }
@@ -600,7 +597,6 @@ exports[`test child list item component make text that is too long end in ... 1`
       "borderTopLeftRadius": 48,
       "borderTopRightRadius": 24,
       "flexDirection": "row",
-      "overflow": "hidden",
       "width": "100%",
     }
   }

package/src/components/organisms/child-list-item/child-list-item.component.d.ts

@@ -1,20 +1,35 @@
 import * as React from 'react';
-import { ImageSourcePropType } from 'react-native';
-import { Initials } from '../../../models/initials.model';
-import { VisualState } from '../../../types/visual-state.enum';
+import {ImageSourcePropType} from 'react-native';
+import {Initials} from '../../../models/initials.model';
+import {VisualState} from '../../../types/visual-state.enum';
 type ChildListItemProps = {
-    id: string;
-    name: string;
-    department: string;
-    selectable: boolean;
-    isSelected: boolean;
-    onPressArrow: (id: string) => void;
-    onPressText: (id: string) => void;
-    onLongPress: (id: string) => void;
-    onSelect: (id: string) => void;
-    sourceAvatar: ImageSourcePropType | Initials;
-    textTimeTracker: string;
-    visualStateTimeTracker: VisualState;
+  id: string;
+  name: string;
+  department: string;
+  selectable: boolean;
+  isSelected: boolean;
+  onPressArrow: (id: string) => void;
+  onPressText: (id: string) => void;
+  onLongPress: (id: string) => void;
+  onSelect: (id: string) => void;
+  sourceAvatar: ImageSourcePropType | Initials;
+  textTimeTracker: string;
+  visualStateTimeTracker: VisualState;
 };
-declare const ChildListItem: React.MemoExoticComponent<({ id, name, department, selectable, isSelected, onPressArrow, onPressText, onLongPress, onSelect, sourceAvatar, textTimeTracker, visualStateTimeTracker, }: ChildListItemProps) => JSX.Element>;
-export { ChildListItem as ChildListItem };
+declare const ChildListItem: React.MemoExoticComponent<
+  ({
+    id,
+    name,
+    department,
+    selectable,
+    isSelected,
+    onPressArrow,
+    onPressText,
+    onLongPress,
+    onSelect,
+    sourceAvatar,
+    textTimeTracker,
+    visualStateTimeTracker,
+  }: ChildListItemProps) => JSX.Element
+>;
+export {ChildListItem as ChildListItem};