feat: add expandDirection prop to List.Accordion/Group (#4852)

example/src/Examples/ListAccordionExample.tsx

@@ -56,6 +56,17 @@ const ListAccordionExample = () => {
           />
         </List.Accordion>
       </List.Section>
+      <Divider />
+      <List.Section title="Expandable list item (upwards)">
+        <List.Accordion
+          left={(props) => <List.Icon {...props} icon="folder" />}
+          title="Expandable list item"
+          expandDirection="upwards"
+        >
+          <List.Item title="List item 1" />
+          <List.Item title="List item 2" />
+        </List.Accordion>
+      </List.Section>
     </ScreenWrapper>
   );
 };

example/src/Examples/ListAccordionGroupExample.tsx

@@ -71,6 +71,25 @@ const ListAccordionGroupExample = () => {
           </List.Accordion>
         </List.Section>
       </List.AccordionGroup>
+      <List.AccordionGroup expandDirection="upwards">
+        <List.Section title="Accordion Group example (upwards)">
+          <List.Accordion
+            left={(props) => <List.Icon {...props} icon="folder" />}
+            title="Expandable list item"
+            id="1"
+          >
+            <List.Item title="List item 1" />
+            <List.Item title="List item 2" />
+          </List.Accordion>
+          <List.Accordion
+            left={(props) => <List.Icon {...props} icon="folder" />}
+            title="Expandable list item 2"
+            id="2"
+          >
+            <List.Item title="List item 1" />
+          </List.Accordion>
+        </List.Section>
+      </List.AccordionGroup>
     </ScreenWrapper>
   );
 };

src/components/List/ListAccordion.tsx

@@ -136,6 +136,11 @@ export type Props = {
    * This can be used to enlarge the touchable area beyond the visible component.
    */
   hitSlop?: TouchableRippleProps['hitSlop'];
+  /**
+   * Sets expansion direction for the accordion.
+   * Can be 'downwards' (default) or 'upwards'.
+   */
+  expandDirection?: 'downwards' | 'upwards';
 };
 
 /**
@@ -202,6 +207,7 @@ const ListAccordion = ({
   titleMaxFontSizeMultiplier,
   descriptionMaxFontSizeMultiplier,
   hitSlop,
+  expandDirection: expandDirectionProp,
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
   const [expanded, setExpanded] = React.useState<boolean>(
@@ -252,8 +258,34 @@ const ListAccordion = ({
     groupContext && id !== undefined
       ? () => groupContext.onAccordionPress(id)
       : handlePressAction;
+
+  const expandDirection =
+    expandDirectionProp || groupContext?.expandDirection || 'downwards';
+
+  const expandedContent = isExpanded
+    ? React.Children.map(children, (child) => {
+        if (
+          left &&
+          React.isValidElement<ListChildProps>(child) &&
+          !child.props.left &&
+          !child.props.right
+        ) {
+          return React.cloneElement(child, {
+            style: [
+              theme.isV3 ? styles.childV3 : styles.child,
+              child.props.style,
+            ],
+            theme,
+          });
+        }
+
+        return child;
+      })
+    : null;
+
   return (
     <View>
+      {expandDirection === 'upwards' ? expandedContent : null}
       <View style={{ backgroundColor: theme?.colors?.background }}>
         <TouchableRipple
           style={[theme.isV3 ? styles.containerV3 : styles.container, style]}
@@ -339,26 +371,7 @@ const ListAccordion = ({
         </TouchableRipple>
       </View>
 
-      {isExpanded
-        ? React.Children.map(children, (child) => {
-            if (
-              left &&
-              React.isValidElement<ListChildProps>(child) &&
-              !child.props.left &&
-              !child.props.right
-            ) {
-              return React.cloneElement(child, {
-                style: [
-                  theme.isV3 ? styles.childV3 : styles.child,
-                  child.props.style,
-                ],
-                theme,
-              });
-            }
-
-            return child;
-          })
-        : null}
+      {expandDirection === 'downwards' ? expandedContent : null}
     </View>
   );
 };

src/components/List/ListAccordionGroup.tsx

@@ -13,11 +13,17 @@ export type Props = {
    * React elements containing list accordions
    */
   children: React.ReactNode;
+  /**
+   * Sets expansion direction for all accordions in the group.
+   * Can be 'downwards' (default) or 'upwards'.
+   */
+  expandDirection?: 'downwards' | 'upwards';
 };
 
 export type ListAccordionGroupContextType = {
   expandedId: string | number | undefined;
   onAccordionPress: (expandedId: string | number) => void;
+  expandDirection?: 'downwards' | 'upwards';
 } | null;
 
 export const ListAccordionGroupContext =
@@ -60,6 +66,7 @@ const ListAccordionGroup = ({
   expandedId: expandedIdProp,
   onAccordionPress,
   children,
+  expandDirection,
 }: Props) => {
   const [expandedId, setExpandedId] = React.useState<
     string | number | undefined
@@ -76,6 +83,7 @@ const ListAccordionGroup = ({
       value={{
         expandedId: expandedIdProp || expandedId, // component can be controlled or uncontrolled
         onAccordionPress: onAccordionPress || onAccordionPressDefault,
+        expandDirection,
       }}
     >
       {children}