feat(react-native-li): new Container prop

Author: jsamr

packages/react-native-li/docs/react-native-li.markedlist.md

@@ -11,16 +11,16 @@ See [CSS Lists and Counters Module Level 3, Markers](https://www.w3.org/TR/css-l
 <b>Signature:</b>
 
 ```typescript
-export default function MarkedList({ children, ...props }: PropsWithChildren<MarkedListProps>): React.FunctionComponentElement<{}>;
+export default function MarkedList({ children, Container, ...props }: PropsWithChildren<MarkedListProps>): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
 ```
 
 ## Parameters
 
 |  Parameter | Type | Description |
 |  --- | --- | --- |
-|  { children, ...props } | PropsWithChildren&lt;[MarkedListProps](./react-native-li.markedlistprops.md)<!-- -->&gt; |  |
+|  { children, Container, ...props } | PropsWithChildren&lt;[MarkedListProps](./react-native-li.markedlistprops.md)<!-- -->&gt; |  |
 
 <b>Returns:</b>
 
-React.FunctionComponentElement&lt;{}&gt;
+React.ReactElement&lt;any, string \| React.JSXElementConstructor&lt;any&gt;&gt;
 

packages/react-native-li/docs/react-native-li.markedlistprops.container.md

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@jsamr/react-native-li](./react-native-li.md) &gt; [MarkedListProps](./react-native-li.markedlistprops.md) &gt; [Container](./react-native-li.markedlistprops.container.md)
+
+## MarkedListProps.Container property
+
+The component used to wrap list elements.
+
+<b>Signature:</b>
+
+```typescript
+Container?: ComponentType<any>;
+```

packages/react-native-li/docs/react-native-li.markedlistprops.md

@@ -17,6 +17,7 @@ export interface MarkedListProps
 |  Property | Type | Description |
 |  --- | --- | --- |
 |  [computeMarkerBoxWidth?](./react-native-li.markedlistprops.computemarkerboxwidth.md) | (maxCodepointsLengthInRange: number, fontSize: number) =&gt; number | <i>(Optional)</i> A function to compute marker box width depending on the maximum length of the marker string in range. |
+|  [Container?](./react-native-li.markedlistprops.container.md) | ComponentType&lt;any&gt; | <i>(Optional)</i> The component used to wrap list elements. |
 |  [counterRenderer](./react-native-li.markedlistprops.counterrenderer.md) | CounterStyleRenderer | The counter renderer for this list. |
 |  [lineStyle?](./react-native-li.markedlistprops.linestyle.md) | StyleProp&lt;ViewStyle&gt; | <i>(Optional)</i> Style for the line wrapper. |
 |  [markerBoxStyle?](./react-native-li.markedlistprops.markerboxstyle.md) | StyleProp&lt;ViewStyle&gt; | <i>(Optional)</i> Style for the marker box container. It is discouraged to set <code>(min,max)width</code> that way. Use [MarkedListProps.computeMarkerBoxWidth](./react-native-li.markedlistprops.computemarkerboxwidth.md) instead. |

packages/react-native-li/docs/react-native-li.md

@@ -8,7 +8,7 @@
 
 |  Function | Description |
 |  --- | --- |
-|  [MarkedList({ children, ...props })](./react-native-li.markedlist.md) | A component which given a counter style, wraps each of its children with a [MarkedListItem()](./react-native-li.markedlistitem.md)<!-- -->. The latter prepends the child with a marker box containing a marker string representation for this child index.<!-- -->See [CSS Lists and Counters Module Level 3, Markers](https://www.w3.org/TR/css-lists-3/#markers)<!-- -->. |
+|  [MarkedList({ children, Container, ...props })](./react-native-li.markedlist.md) | A component which given a counter style, wraps each of its children with a [MarkedListItem()](./react-native-li.markedlistitem.md)<!-- -->. The latter prepends the child with a marker box containing a marker string representation for this child index.<!-- -->See [CSS Lists and Counters Module Level 3, Markers](https://www.w3.org/TR/css-lists-3/#markers)<!-- -->. |
 |  [MarkedListItem({ counterRenderer, index, startIndex, rtlLineReversed, rtlMarkerReversed, markerTextStyle, markerBoxStyle, maxNumOfCodepoints, markerTextWidth, style, renderMarker, children })](./react-native-li.markedlistitem.md) | A component which reproduces CSS3 <code>display: list-item;</code> behavior. It prepends its child with a marker box containing a marker string representation for this child index.<!-- -->See [CSS Lists and Counters Module Level 3, Markers](https://www.w3.org/TR/css-lists-3/#markers)<!-- -->. |
 |  [MarkerBox({ style, counterRenderer, counterIndex, markerTextStyle, markerTextWidth })](./react-native-li.markerbox.md) | Default component to render the list marker.<!-- -->See [CSS Lists and Counters Module Level 3, Markers](https://www.w3.org/TR/css-lists-3/#marker-pseudo) |
 |  [useMarkedList({ counterRenderer, startIndex, lineStyle, rtlLineReversed, rtlMarkerReversed, markerTextStyle, markerBoxStyle, length, renderMarker, computeMarkerBoxWidth })](./react-native-li.usemarkedlist.md) | A hook to reuse MarkedList logic to render custom lists components in combination with [MarkedListItem()](./react-native-li.markedlistitem.md)<!-- -->. |

packages/react-native-li/etc/react-native-li.api.md

@@ -4,6 +4,7 @@
 
 ```ts
 
+import type { ComponentType } from 'react';
 import type { CounterStyleRenderer } from '@jsamr/counter-style';
 import { PropsWithChildren } from 'react';
 import { default as React_2 } from 'react';
@@ -14,7 +15,7 @@ import type { TextStyle } from 'react-native';
 import { ViewStyle } from 'react-native';
 
 // @public
-function MarkedList({ children, ...props }: PropsWithChildren<MarkedListProps>): React_2.FunctionComponentElement<{}>;
+function MarkedList({ children, Container, ...props }: PropsWithChildren<MarkedListProps>): React_2.ReactElement<any, string | React_2.JSXElementConstructor<any>>;
 
 export { MarkedList }
 
@@ -34,6 +35,7 @@ export type MarkedListItemProps = Required<Pick<MarkedListProps, 'counterRendere
 // @public
 export interface MarkedListProps {
     computeMarkerBoxWidth?: (maxCodepointsLengthInRange: number, fontSize: number) => number;
+    Container?: ComponentType<any>;
     counterRenderer: CounterStyleRenderer;
     lineStyle?: StyleProp<ViewStyle>;
     markerBoxStyle?: StyleProp<ViewStyle>;

packages/react-native-li/src/MarkedList.tsx

@@ -14,12 +14,13 @@ import useMarkedList from './useMarkedList';
  */
 export default function MarkedList({
   children,
+  Container = Fragment,
   ...props
 }: PropsWithChildren<MarkedListProps>) {
   const normalChildren = Children.toArray(children);
   const listProps = useMarkedList({ ...props, length: normalChildren.length });
   return React.createElement(
-    Fragment,
+    Container,
     {},
     normalChildren.map((child, index) => {
       return (

packages/react-native-li/src/shared-types.ts

@@ -1,5 +1,5 @@
 import type { CounterStyleRenderer, RtlOptions } from '@jsamr/counter-style';
-import type { ReactNode } from 'react';
+import type { ComponentType, ReactNode } from 'react';
 import type { StyleProp, ViewStyle, TextStyle } from 'react-native';
 
 /**
@@ -108,4 +108,10 @@ export interface MarkedListProps {
    * @remarks You are advised to use {@link MarkerBox} component.
    */
   renderMarker?: (props: MarkerBoxProps) => ReactNode;
+  /**
+   * The component used to wrap list elements.
+   *
+   * @defaultValue Fragment
+   */
+  Container?: ComponentType<any>;
 }