refactor: replace React.Children usage with context and typed props

docs/6.x/docs/guides/migration.md

@@ -188,6 +188,24 @@ e.g.:
 - The default elevation changed from level `1` to level `3`.
 - The `style` prop no longer configures the background color or border radius. You can override `theme.colors.surfaceContainerHigh` and `theme.shapes.corner.extraLarge` using the `theme` prop instead.
 
+#### `Dialog.Actions`
+
+`Dialog.Actions` no longer forces `compact` and `uppercase` on its buttons. Set them on the buttons if you want the old look.
+
+```tsx
+// Before (v5)
+<Dialog.Actions>
+  <Button onPress={hide}>Done</Button>
+</Dialog.Actions>
+
+// After (v6)
+<Dialog.Actions>
+  <Button compact uppercase onPress={hide}>
+    Done
+  </Button>
+</Dialog.Actions>
+```
+
 ### TextInput
 
 The Paper 6.x `TextInput` is a complete rewrite with a new API. Import the component the same way, but note that the props and behavior have changed significantly.
@@ -308,3 +326,59 @@ const theme = {
   style={{ fontSize: 16, color: '#1C1B1F' }}
 />
 ```
+
+### Card
+
+#### `Card.Actions`
+
+`Card.Actions` no longer styles its buttons for you. It used to force `mode="outlined"` on the first button, `mode="contained"` on the rest, and `compact` on all of them. Set what you need on each button.
+
+```tsx
+// Before (v5)
+<Card.Actions>
+  <Button>Cancel</Button>
+  <Button>Ok</Button>
+</Card.Actions>
+
+// After (v6)
+<Card.Actions>
+  <Button mode="outlined">Cancel</Button>
+  <Button mode="contained">Ok</Button>
+</Card.Actions>
+```
+
+#### `Card.Content`
+
+`Card.Content` now has 16dp of padding on every side. It used to drop its top or bottom padding when it sat next to a `Card.Cover` or `Card.Title`, so cards that mix those sections grow a little taller. Pass `style` if you want the tighter spacing back.
+
+### List
+
+#### `List.Accordion`
+
+An accordion with a `left` element now indents only its `List.Item` children. Anything else you put inside keeps its own padding, so indent it yourself to line it up with the items.
+
+```tsx
+// Before (v5)
+<List.Accordion title="Group" left={props => <List.Icon {...props} icon="folder" />}>
+  <View>
+    <Text>Custom row</Text>
+  </View>
+</List.Accordion>
+
+// After (v6)
+<List.Accordion title="Group" left={props => <List.Icon {...props} icon="folder" />}>
+  <View style={{ paddingLeft: 40 }}>
+    <Text>Custom row</Text>
+  </View>
+</List.Accordion>
+```
+
+`theme` set on `List.Accordion` no longer reaches its children either. Pass it to the child that needs the override.
+
+### ToggleButton
+
+#### `ToggleButton.Row`
+
+`ToggleButton.Row` no longer reaches into its children to style them, so a `ToggleButton` you wrap in a component of your own now picks up the segmented look.
+
+The row draws the dividers between buttons itself. A `borderWidth` or `borderColor` set on an individual `ToggleButton` no longer builds the segmented outline.

example/src/Examples/CardExample.tsx

@@ -74,8 +74,12 @@ const CardExample = () => {
         <Card style={styles.card} mode={selectedMode}>
           <Card.Cover source={require('../../assets/images/forest.jpg')} />
           <Card.Actions>
-            <Button onPress={() => {}}>Share</Button>
-            <Button onPress={() => {}}>Explore</Button>
+            <Button mode="outlined" onPress={() => {}}>
+              Share
+            </Button>
+            <Button mode="contained" onPress={() => {}}>
+              Explore
+            </Button>
           </Card.Actions>
         </Card>
         <Card style={styles.card} mode={selectedMode}>
@@ -104,12 +108,14 @@ const CardExample = () => {
           <Card.Title title="Custom Button styles" />
           <Card.Actions>
             <Button
+              mode="outlined"
               theme={{ shapes: { corner: { largeIncreased: 12 } } }}
               onPress={() => {}}
             >
               Share
             </Button>
             <Button
+              mode="contained"
               theme={{ shapes: { corner: { largeIncreased: 12 } } }}
               onPress={() => {}}
             >

example/src/Examples/TeamDetails.tsx

@@ -93,8 +93,12 @@ const News = () => {
               </Text>
             </Card.Content>
             <Card.Actions>
-              <Button onPress={() => {}}>Share</Button>
-              <Button onPress={() => {}}>Read more</Button>
+              <Button mode="outlined" onPress={() => {}}>
+                Share
+              </Button>
+              <Button mode="contained" onPress={() => {}}>
+                Read more
+              </Button>
             </Card.Actions>
           </Card>
           <Card style={styles.card} mode="contained">
@@ -110,8 +114,12 @@ const News = () => {
               </Text>
             </Card.Content>
             <Card.Actions>
-              <Button onPress={() => {}}>Share</Button>
-              <Button onPress={() => {}}>Read more</Button>
+              <Button mode="outlined" onPress={() => {}}>
+                Share
+              </Button>
+              <Button mode="contained" onPress={() => {}}>
+                Read more
+              </Button>
             </Card.Actions>
           </Card>
         </View>

src/components/Card/Card.tsx

@@ -119,8 +119,8 @@ export type Props = Omit<ViewProps, 'style'> & {
  *     </Card.Content>
  *     <Card.Cover source={{ uri: 'https://picsum.photos/700' }} />
  *     <Card.Actions>
- *       <Button>Cancel</Button>
- *       <Button>Ok</Button>
+ *       <Button mode="outlined">Cancel</Button>
+ *       <Button mode="contained">Ok</Button>
  *     </Card.Actions>
  *   </Card>
  * );
@@ -182,15 +182,6 @@ const Card = ({
     }
   });
 
-  const total = React.Children.count(children);
-  const siblings = React.Children.map(children, (child) =>
-    React.isValidElement(child) && child.type
-      ? typeof child.type !== 'string' && 'displayName' in child.type
-        ? child.type.displayName
-        : null
-      : null
-  );
-
   const { backgroundColor, borderColor: themedBorderColor } = getCardColors({
     theme,
     mode: cardMode,
@@ -204,16 +195,8 @@ const Card = ({
   const borderRadius = theme.shapes.corner.medium;
 
   const content = (
-    <View style={[styles.innerContainer, contentStyle]}>
-      {React.Children.map(children, (child, index) =>
-        React.isValidElement(child)
-          ? React.cloneElement(child as React.ReactElement<any>, {
-              index,
-              total,
-              siblings,
-            })
-          : child
-      )}
+    <View style={[styles.innerContainer, { borderRadius }, contentStyle]}>
+      {children}
     </View>
   );
 
@@ -276,6 +259,7 @@ Card.Title = CardTitle;
 const styles = StyleSheet.create({
   innerContainer: {
     flexShrink: 1,
+    overflow: 'hidden',
   },
   outline: {
     borderWidth: 1,

src/components/Card/CardActions.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 import { StyleSheet, View } from 'react-native';
 import type { StyleProp, ViewProps, ViewStyle } from 'react-native';
 
-import type { CardActionChildProps } from './utils';
 import { useInternalTheme } from '../../core/theming';
 import type { ThemeProp } from '../../theme/types';
 
@@ -26,8 +25,8 @@ export type Props = ViewProps & {
  * const MyComponent = () => (
  *   <Card>
  *     <Card.Actions>
- *       <Button>Cancel</Button>
- *       <Button>Ok</Button>
+ *       <Button mode="outlined">Cancel</Button>
+ *       <Button mode="contained">Ok</Button>
  *     </Card.Actions>
  *   </Card>
  * );
@@ -46,23 +45,7 @@ const CardActions = ({ theme, style, children, ...rest }: Props) => {
 
   return (
     <View {...rest} style={containerStyle}>
-      {React.Children.map(children, (child, index) => {
-        if (!React.isValidElement<CardActionChildProps>(child)) {
-          return child;
-        }
-
-        const compact = child.props.compact;
-        const mode =
-          child.props.mode ?? (index === 0 ? 'outlined' : 'contained');
-        const childStyle = [styles.button, child.props.style];
-
-        return React.cloneElement(child, {
-          ...child.props,
-          compact,
-          mode,
-          style: childStyle,
-        });
-      })}
+      {children}
     </View>
   );
 };
@@ -73,11 +56,9 @@ const styles = StyleSheet.create({
   container: {
     flexDirection: 'row',
     alignItems: 'center',
+    columnGap: 8,
     padding: 8,
   },
-  button: {
-    marginLeft: 8,
-  },
 });
 
 export default CardActions;

src/components/Card/CardContent.tsx

@@ -7,18 +7,6 @@ export type Props = ViewProps & {
    * Items inside the `Card.Content`.
    */
   children: React.ReactNode;
-  /**
-   * @internal
-   */
-  index?: number;
-  /**
-   * @internal
-   */
-  total?: number;
-  /**
-   * @internal
-   */
-  siblings?: Array<string | null>;
   style?: StyleProp<ViewStyle>;
 };
 
@@ -42,58 +30,15 @@ export type Props = ViewProps & {
  * export default MyComponent;
  * ```
  */
-const CardContent = ({ index, total, siblings, style, ...rest }: Props) => {
-  const cover = 'Card.Cover';
-  const title = 'Card.Title';
-
-  let contentStyle, prev, next;
-
-  if (typeof index === 'number' && siblings) {
-    prev = siblings[index - 1];
-    next = siblings[index + 1];
-  }
-
-  if (
-    (prev === cover && next === cover) ||
-    (prev === title && next === title) ||
-    total === 1
-  ) {
-    contentStyle = styles.only;
-  } else if (index === 0) {
-    if (next === cover || next === title) {
-      contentStyle = styles.only;
-    } else {
-      contentStyle = styles.first;
-    }
-  } else if (typeof total === 'number' && index === total - 1) {
-    if (prev === cover || prev === title) {
-      contentStyle = styles.only;
-    } else {
-      contentStyle = styles.last;
-    }
-  } else if (prev === cover || prev === title) {
-    contentStyle = styles.first;
-  } else if (next === cover || next === title) {
-    contentStyle = styles.last;
-  }
-
-  return <View {...rest} style={[styles.container, contentStyle, style]} />;
-};
+const CardContent = ({ style, ...rest }: Props) => (
+  <View {...rest} style={[styles.container, style]} />
+);
 
 CardContent.displayName = 'Card.Content';
 
 const styles = StyleSheet.create({
   container: {
-    paddingHorizontal: 16,
-  },
-  first: {
-    paddingTop: 16,
-  },
-  last: {
-    paddingBottom: 16,
-  },
-  only: {
-    paddingVertical: 16,
+    padding: 16,
   },
 });
 

src/components/Card/CardCover.tsx

@@ -8,14 +8,6 @@ import type { ThemeProp } from '../../theme/types';
 import { splitStyles } from '../../utils/splitStyles';
 
 export type Props = ImageProps & {
-  /**
-   * @internal
-   */
-  index?: number;
-  /**
-   * @internal
-   */
-  total?: number;
   style?: StyleProp<ViewStyle>;
   /**
    * @optional
@@ -42,13 +34,7 @@ export type Props = ImageProps & {
  *
  * @extends Image props https://reactnative.dev/docs/image#props
  */
-const CardCover = ({
-  index,
-  total,
-  style,
-  theme: themeOverrides,
-  ...rest
-}: Props) => {
+const CardCover = ({ style, theme: themeOverrides, ...rest }: Props) => {
   const theme = useInternalTheme(themeOverrides);
 
   const flattenedStyles = StyleSheet.flatten<ViewStyle>(style) || {};
@@ -59,8 +45,6 @@ const CardCover = ({
 
   const coverStyle = getCardCoverStyle({
     theme,
-    index,
-    total,
     borderRadiusStyles,
   });
 

src/components/Card/CardTitle.tsx

@@ -81,14 +81,6 @@ export type Props = ViewProps & {
    * Style for the right element wrapper.
    */
   rightStyle?: StyleProp<ViewStyle>;
-  /**
-   * @internal
-   */
-  index?: number;
-  /**
-   * @internal
-   */
-  total?: number;
   /**
    * Specifies the largest possible scale a title font can reach.
    */