@draftbit/core 48.5.6 → 48.5.7-efd08d.2

package/lib/typescript/src/components/Switch.js

@@ -1,57 +1,57 @@
-import * as React from "react";
-import { Switch as NativeSwitch, } from "react-native";
-import { withTheme } from "../theming";
-import FormRow from "./FormRow";
-import { RowDirection } from "@draftbit/types";
-import { usePrevious } from "../hooks";
-function Switch({ value, defaultValue, disabled, onValueChange, activeTrackColor, inactiveTrackColor, activeThumbColor, inactiveThumbColor, theme, style, ...rest }) {
-    const activeTrackThemeColor = activeTrackColor || theme.colors.primary;
-    const inactiveTrackThemeColor = inactiveTrackColor || "#EEE";
-    const activeThumbThemeColor = activeThumbColor || "#FFF";
-    const inactiveThumbThemeColor = inactiveThumbColor || "#FFF";
-    const [checked, setChecked] = React.useState(value || defaultValue);
-    React.useEffect(() => {
-        if (value != null && value !== checked) {
-            setChecked(value);
-        }
-    }, [value, checked]);
-    // This special logic is to handle weird APIs like Airtable that return
-    // true or undefined for a boolean
-    const previousDefaultValue = usePrevious(defaultValue);
-    React.useEffect(() => {
-        if (defaultValue !== previousDefaultValue) {
-            setChecked(Boolean(defaultValue));
-        }
-    }, [defaultValue, previousDefaultValue]);
-    return (React.createElement(NativeSwitch, { value: checked, disabled: disabled, trackColor: {
-            false: inactiveTrackThemeColor,
-            true: activeTrackThemeColor,
-        }, thumbColor: value ? activeThumbThemeColor : inactiveThumbThemeColor, 
-        // @ts-ignore react-native-web only
-        activeThumbColor: activeThumbThemeColor, ios_backgroundColor: inactiveTrackThemeColor, style: style, onValueChange: (bool) => {
-            setChecked(bool);
-            onValueChange && onValueChange(bool);
-        }, ...rest }));
-}
-function Row({ label = "Label", direction = RowDirection.Row, style, value, defaultValue, disabled, onValueChange, activeTrackColor, inactiveTrackColor, activeThumbColor, inactiveThumbColor, theme, ...rest }) {
-    const [checked, setChecked] = React.useState(value != null ? value : defaultValue);
-    React.useEffect(() => {
-        if (value != null) {
-            setChecked(value);
-        }
-    }, [value]);
-    React.useEffect(() => {
-        if (defaultValue != null) {
-            setChecked(defaultValue);
-        }
-    }, [defaultValue]);
-    return (React.createElement(FormRow, { disabled: disabled, onPress: () => {
-            setChecked(!checked);
-            onValueChange && onValueChange(!checked);
-        }, label: label, direction: direction, style: style, ...rest },
-        React.createElement(Switch, { theme: theme, value: checked, disabled: disabled, onValueChange: onValueChange, activeTrackColor: activeTrackColor, inactiveTrackColor: inactiveTrackColor, activeThumbColor: activeThumbColor, inactiveThumbColor: inactiveThumbColor })));
-}
-const SwitchRow = withTheme(Row);
-export { SwitchRow };
-export default withTheme(Switch);
+import * as React from "react";
+import { Switch as NativeSwitch, } from "react-native";
+import { withTheme } from "../theming";
+import FormRow from "./FormRow";
+import { RowDirection } from "@draftbit/types";
+import { usePrevious } from "../hooks";
+function Switch({ value, defaultValue, disabled, onValueChange, activeTrackColor, inactiveTrackColor, activeThumbColor, inactiveThumbColor, theme, style, ...rest }) {
+    const activeTrackThemeColor = activeTrackColor || theme.colors.primary;
+    const inactiveTrackThemeColor = inactiveTrackColor || "#EEE";
+    const activeThumbThemeColor = activeThumbColor || "#FFF";
+    const inactiveThumbThemeColor = inactiveThumbColor || "#FFF";
+    const [checked, setChecked] = React.useState(value || defaultValue);
+    React.useEffect(() => {
+        if (value != null && value !== checked) {
+            setChecked(value);
+        }
+    }, [value, checked]);
+    // This special logic is to handle weird APIs like Airtable that return
+    // true or undefined for a boolean
+    const previousDefaultValue = usePrevious(defaultValue);
+    React.useEffect(() => {
+        if (defaultValue !== previousDefaultValue) {
+            setChecked(Boolean(defaultValue));
+        }
+    }, [defaultValue, previousDefaultValue]);
+    return (React.createElement(NativeSwitch, { value: checked, disabled: disabled, trackColor: {
+            false: inactiveTrackThemeColor,
+            true: activeTrackThemeColor,
+        }, thumbColor: value ? activeThumbThemeColor : inactiveThumbThemeColor, 
+        // @ts-ignore react-native-web only
+        activeThumbColor: activeThumbThemeColor, ios_backgroundColor: inactiveTrackThemeColor, style: style, onValueChange: (bool) => {
+            setChecked(bool);
+            onValueChange && onValueChange(bool);
+        }, ...rest }));
+}
+function Row({ label = "Label", direction = RowDirection.Row, style, value, defaultValue, disabled, onValueChange, activeTrackColor, inactiveTrackColor, activeThumbColor, inactiveThumbColor, theme, ...rest }) {
+    const [checked, setChecked] = React.useState(value != null ? value : defaultValue);
+    React.useEffect(() => {
+        if (value != null) {
+            setChecked(value);
+        }
+    }, [value]);
+    React.useEffect(() => {
+        if (defaultValue != null) {
+            setChecked(defaultValue);
+        }
+    }, [defaultValue]);
+    return (React.createElement(FormRow, { disabled: disabled, onPress: () => {
+            setChecked(!checked);
+            onValueChange && onValueChange(!checked);
+        }, label: label, direction: direction, style: style, ...rest },
+        React.createElement(Switch, { theme: theme, value: checked, disabled: disabled, onValueChange: onValueChange, activeTrackColor: activeTrackColor, inactiveTrackColor: inactiveTrackColor, activeThumbColor: activeThumbColor, inactiveThumbColor: inactiveThumbColor })));
+}
+const SwitchRow = withTheme(Row);
+export { SwitchRow };
+export default withTheme(Switch);
 //# sourceMappingURL=Switch.js.map

package/lib/typescript/src/components/TabView/TabView.d.ts

@@ -1,27 +1,27 @@
-import * as React from "react";
-import { StyleProp, ViewStyle, TextStyle } from "react-native";
-import type { IconSlot } from "../../interfaces/Icon";
-import type { Theme } from "../../styles/DefaultTheme";
-declare type TabBarPosition = "top" | "bottom";
-declare type KeyboardDismissMode = "none" | "auto" | "on-drag";
-declare type TabViewProps = {
-    onIndexChanged?: (index: number) => void;
-    onEndReached?: () => void;
-    initialTabIndex?: number;
-    tabBarPosition?: TabBarPosition;
-    keyboardDismissMode?: KeyboardDismissMode;
-    swipeEnabled?: boolean;
-    scrollEnabled?: boolean;
-    activeColor?: string;
-    inactiveColor?: string;
-    pressColor?: string;
-    indicatorColor?: string;
-    tabsBackgroundColor?: string;
-    iconSize?: number;
-    style?: StyleProp<ViewStyle | TextStyle>;
-    theme: Theme;
-} & IconSlot;
-declare const _default: React.ComponentType<import("@draftbit/react-theme-provider").$Without<React.PropsWithChildren<TabViewProps>, "theme"> & {
-    theme?: import("@draftbit/react-theme-provider").$DeepPartial<any> | undefined;
-}> & import("@draftbit/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<React.ComponentType<React.PropsWithChildren<TabViewProps>> & React.FC<React.PropsWithChildren<TabViewProps>>, {}>;
-export default _default;
+import * as React from "react";
+import { StyleProp, ViewStyle, TextStyle } from "react-native";
+import type { IconSlot } from "../../interfaces/Icon";
+import type { Theme } from "../../styles/DefaultTheme";
+declare type TabBarPosition = "top" | "bottom";
+declare type KeyboardDismissMode = "none" | "auto" | "on-drag";
+declare type TabViewProps = {
+    onIndexChanged?: (index: number) => void;
+    onEndReached?: () => void;
+    initialTabIndex?: number;
+    tabBarPosition?: TabBarPosition;
+    keyboardDismissMode?: KeyboardDismissMode;
+    swipeEnabled?: boolean;
+    scrollEnabled?: boolean;
+    activeColor?: string;
+    inactiveColor?: string;
+    pressColor?: string;
+    indicatorColor?: string;
+    tabsBackgroundColor?: string;
+    iconSize?: number;
+    style?: StyleProp<ViewStyle | TextStyle>;
+    theme: Theme;
+} & IconSlot;
+declare const _default: React.ComponentType<import("@draftbit/react-theme-provider").$Without<React.PropsWithChildren<TabViewProps>, "theme"> & {
+    theme?: import("@draftbit/react-theme-provider").$DeepPartial<any> | undefined;
+}> & import("@draftbit/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<React.ComponentType<React.PropsWithChildren<TabViewProps>> & React.FC<React.PropsWithChildren<TabViewProps>>, {}>;
+export default _default;

package/lib/typescript/src/components/TabView/TabView.js

@@ -1,50 +1,50 @@
-import * as React from "react";
-import { TabView, TabBar, } from "react-native-tab-view";
-import TabViewItem from "./TabViewItem";
-import { withTheme } from "../../theming";
-import { flattenReactFragments, extractStyles } from "../../utilities";
-const TabViewComponent = ({ Icon, onIndexChanged, onEndReached, initialTabIndex = 0, tabBarPosition, keyboardDismissMode, swipeEnabled, scrollEnabled, activeColor, inactiveColor, pressColor, indicatorColor, tabsBackgroundColor, iconSize = 16, style, theme, children: childrenProp, }) => {
-    const [index, setIndex] = React.useState(initialTabIndex);
-    const [routes, setRoutes] = React.useState([]);
-    const { textStyles, viewStyles } = extractStyles(style);
-    const children = React.useMemo(() => flattenReactFragments(React.Children.toArray(childrenProp)).filter((child) => React.isValidElement(child) && child.type === TabViewItem), [childrenProp]);
-    //Populate routes and scenes based on children
-    React.useEffect(() => {
-        const newRoutes = [];
-        children.forEach((item, idx) => {
-            const child = item;
-            newRoutes.push({
-                key: idx.toString(),
-                title: child.props.title,
-                icon: child.props.icon,
-                accessibilityLabel: child.props.accessibilityLabel,
-            });
-        });
-        setRoutes(newRoutes);
-    }, [children]);
-    const indexChangeHandler = (i) => {
-        setIndex(i);
-        onIndexChanged === null || onIndexChanged === void 0 ? void 0 : onIndexChanged(i);
-        if (i === routes.length) {
-            onEndReached === null || onEndReached === void 0 ? void 0 : onEndReached();
-        }
-    };
-    const renderTabBar = (props) => {
-        return (React.createElement(TabBar, { ...props, activeColor: activeColor || theme.colors.primary, inactiveColor: inactiveColor || "rgb(200,200,200)", pressColor: pressColor || theme.colors.primary, scrollEnabled: scrollEnabled, indicatorStyle: {
-                backgroundColor: indicatorColor || theme.colors.primary,
-            }, labelStyle: textStyles, renderIcon: ({ route, color }) => (route === null || route === void 0 ? void 0 : route.icon) ? (React.createElement(Icon, { name: route.icon, color: color, size: iconSize })) : null, style: {
-                backgroundColor: tabsBackgroundColor || theme.colors.background,
-            } }));
-    };
-    const renderScene = ({ route }) => {
-        const index = Number(route.key);
-        return children[index];
-    };
-    //Cannot render TabView without at least one tab
-    if (!routes.length) {
-        return React.createElement(React.Fragment, null);
-    }
-    return (React.createElement(TabView, { style: viewStyles, navigationState: { index, routes }, renderScene: renderScene, renderTabBar: renderTabBar, onIndexChange: indexChangeHandler, tabBarPosition: tabBarPosition, keyboardDismissMode: keyboardDismissMode, swipeEnabled: swipeEnabled }));
-};
-export default withTheme(TabViewComponent);
+import * as React from "react";
+import { TabView, TabBar, } from "react-native-tab-view";
+import TabViewItem from "./TabViewItem";
+import { withTheme } from "../../theming";
+import { flattenReactFragments, extractStyles } from "../../utilities";
+const TabViewComponent = ({ Icon, onIndexChanged, onEndReached, initialTabIndex = 0, tabBarPosition, keyboardDismissMode, swipeEnabled, scrollEnabled, activeColor, inactiveColor, pressColor, indicatorColor, tabsBackgroundColor, iconSize = 16, style, theme, children: childrenProp, }) => {
+    const [index, setIndex] = React.useState(initialTabIndex);
+    const [routes, setRoutes] = React.useState([]);
+    const { textStyles, viewStyles } = extractStyles(style);
+    const children = React.useMemo(() => flattenReactFragments(React.Children.toArray(childrenProp)).filter((child) => React.isValidElement(child) && child.type === TabViewItem), [childrenProp]);
+    //Populate routes and scenes based on children
+    React.useEffect(() => {
+        const newRoutes = [];
+        children.forEach((item, idx) => {
+            const child = item;
+            newRoutes.push({
+                key: idx.toString(),
+                title: child.props.title,
+                icon: child.props.icon,
+                accessibilityLabel: child.props.accessibilityLabel,
+            });
+        });
+        setRoutes(newRoutes);
+    }, [children]);
+    const indexChangeHandler = (i) => {
+        setIndex(i);
+        onIndexChanged === null || onIndexChanged === void 0 ? void 0 : onIndexChanged(i);
+        if (i === routes.length) {
+            onEndReached === null || onEndReached === void 0 ? void 0 : onEndReached();
+        }
+    };
+    const renderTabBar = (props) => {
+        return (React.createElement(TabBar, { ...props, activeColor: activeColor || theme.colors.primary, inactiveColor: inactiveColor || "rgb(200,200,200)", pressColor: pressColor || theme.colors.primary, scrollEnabled: scrollEnabled, indicatorStyle: {
+                backgroundColor: indicatorColor || theme.colors.primary,
+            }, labelStyle: textStyles, renderIcon: ({ route, color }) => (route === null || route === void 0 ? void 0 : route.icon) ? (React.createElement(Icon, { name: route.icon, color: color, size: iconSize })) : null, style: {
+                backgroundColor: tabsBackgroundColor || theme.colors.background,
+            } }));
+    };
+    const renderScene = ({ route }) => {
+        const index = Number(route.key);
+        return children[index];
+    };
+    //Cannot render TabView without at least one tab
+    if (!routes.length) {
+        return React.createElement(React.Fragment, null);
+    }
+    return (React.createElement(TabView, { style: viewStyles, navigationState: { index, routes }, renderScene: renderScene, renderTabBar: renderTabBar, onIndexChange: indexChangeHandler, tabBarPosition: tabBarPosition, keyboardDismissMode: keyboardDismissMode, swipeEnabled: swipeEnabled }));
+};
+export default withTheme(TabViewComponent);
 //# sourceMappingURL=TabView.js.map

package/lib/typescript/src/components/TabView/TabViewItem.d.ts

@@ -1,10 +1,10 @@
-import React from "react";
-import { StyleProp, ViewStyle } from "react-native";
-interface TabViewItemProps {
-    title: string;
-    icon?: string;
-    accessibilityLabel?: string;
-    style?: StyleProp<ViewStyle>;
-}
-declare const TabViewItem: React.FC<React.PropsWithChildren<TabViewItemProps>>;
-export default TabViewItem;
+import React from "react";
+import { StyleProp, ViewStyle } from "react-native";
+interface TabViewItemProps {
+    title: string;
+    icon?: string;
+    accessibilityLabel?: string;
+    style?: StyleProp<ViewStyle>;
+}
+declare const TabViewItem: React.FC<React.PropsWithChildren<TabViewItemProps>>;
+export default TabViewItem;

package/lib/typescript/src/components/TabView/TabViewItem.js

@@ -1,12 +1,12 @@
-import React from "react";
-import { StyleSheet, View } from "react-native";
-const TabViewItem = ({ style, children, }) => {
-    return React.createElement(View, { style: [styles.parentContainer, style] }, children);
-};
-const styles = StyleSheet.create({
-    parentContainer: {
-        flex: 1,
-    },
-});
-export default TabViewItem;
+import React from "react";
+import { StyleSheet, View } from "react-native";
+const TabViewItem = ({ style, children, }) => {
+    return React.createElement(View, { style: [styles.parentContainer, style] }, children);
+};
+const styles = StyleSheet.create({
+    parentContainer: {
+        flex: 1,
+    },
+});
+export default TabViewItem;
 //# sourceMappingURL=TabViewItem.js.map

package/lib/typescript/src/components/TabView/index.d.ts

@@ -1,2 +1,2 @@
-export { default as TabView } from "./TabView";
-export { default as TabViewItem } from "./TabViewItem";
+export { default as TabView } from "./TabView";
+export { default as TabViewItem } from "./TabViewItem";

package/lib/typescript/src/components/TabView/index.js

@@ -1,3 +1,3 @@
-export { default as TabView } from "./TabView";
-export { default as TabViewItem } from "./TabViewItem";
+export { default as TabView } from "./TabView";
+export { default as TabViewItem } from "./TabViewItem";
 //# sourceMappingURL=index.js.map

package/lib/typescript/src/components/Table/Table.d.ts

@@ -1,18 +1,18 @@
-import React from "react";
-import { StyleProp, ViewStyle, ScrollViewProps } from "react-native";
-import { Theme } from "../../styles/DefaultTheme";
-import { TableProps } from "./TableCommon";
-export interface Props<T> extends TableProps, ScrollViewProps {
-    data?: Array<T>;
-    keyExtractor?: (item: T, index: number) => string;
-    renderItem?: ({ item, index }: {
-        item: T;
-        index: number;
-    }) => JSX.Element;
-    style?: StyleProp<ViewStyle>;
-    theme: Theme;
-}
-declare const _default: React.ComponentType<import("@draftbit/react-theme-provider").$Without<React.PropsWithChildren<Props<object>>, "theme"> & {
-    theme?: import("@draftbit/react-theme-provider").$DeepPartial<any> | undefined;
-}> & import("@draftbit/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<React.ComponentType<React.PropsWithChildren<Props<object>>> & (<T extends object>({ theme, borderWidth, borderColor, borderStyle, drawTopBorder, drawBottomBorder, drawStartBorder, drawEndBorder, cellVerticalPadding, cellHorizontalPadding, data, keyExtractor, renderItem, children: childrenProp, style, ...rest }: React.PropsWithChildren<Props<T>>) => JSX.Element), {}>;
-export default _default;
+import React from "react";
+import { StyleProp, ViewStyle, ScrollViewProps } from "react-native";
+import { Theme } from "../../styles/DefaultTheme";
+import { TableProps } from "./TableCommon";
+export interface Props<T> extends TableProps, ScrollViewProps {
+    data?: Array<T>;
+    keyExtractor?: (item: T, index: number) => string;
+    renderItem?: ({ item, index }: {
+        item: T;
+        index: number;
+    }) => JSX.Element;
+    style?: StyleProp<ViewStyle>;
+    theme: Theme;
+}
+declare const _default: React.ComponentType<import("@draftbit/react-theme-provider").$Without<React.PropsWithChildren<Props<object>>, "theme"> & {
+    theme?: import("@draftbit/react-theme-provider").$DeepPartial<any> | undefined;
+}> & import("@draftbit/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<React.ComponentType<React.PropsWithChildren<Props<object>>> & (<T extends object>({ theme, borderWidth, borderColor, borderStyle, drawTopBorder, drawBottomBorder, drawStartBorder, drawEndBorder, cellVerticalPadding, cellHorizontalPadding, data, keyExtractor, renderItem, children: childrenProp, style, ...rest }: React.PropsWithChildren<Props<T>>) => JSX.Element), {}>;
+export default _default;

package/lib/typescript/src/components/Table/Table.js

@@ -1,94 +1,94 @@
-import React from "react";
-import { ScrollView, View, StyleSheet, } from "react-native";
-import { withTheme } from "../../theming";
-import { generateBorderStyles, TableStyleContext, } from "./TableCommon";
-const Table = ({ theme, borderWidth = 1, borderColor = theme.colors.divider, borderStyle = "solid", drawTopBorder = true, drawBottomBorder = false, drawStartBorder = false, drawEndBorder = false, cellVerticalPadding = 10, cellHorizontalPadding = 10, data, keyExtractor, renderItem, children: childrenProp, style, ...rest }) => {
-    //Both 'renderItem' and 'data' are optional to allow direct children. But if one is included, both need to be included
-    if ((data && !renderItem) || (renderItem && !data)) {
-        throw new Error("'renderItem' and 'data' need to both be provided to render from 'data'. Either remove them entirley or include both");
-    }
-    if (data && renderItem && childrenProp) {
-        console.warn("'children' of Table ignored due to usage of 'data' and 'renderItem'");
-    }
-    const isTableHeader = React.useCallback((object) => {
-        return object.isTableHeader;
-    }, []);
-    const isRenderItem = Array.isArray(data) && renderItem;
-    //Uses 'renderItem' and 'data' to create an array of children
-    const dataAsChildren = React.useMemo(() => {
-        if (!isRenderItem)
-            return [];
-        return data.map((item, index) => {
-            const component = renderItem({ item, index });
-            if (!component) {
-                return null;
-            }
-            const key = keyExtractor ? keyExtractor(item, index) : index.toString();
-            return React.cloneElement(component, {
-                key,
-            });
-        });
-    }, [data, renderItem, keyExtractor, isRenderItem]);
-    const children = isRenderItem
-        ? dataAsChildren
-        : React.Children.toArray(childrenProp);
-    const validChildren = React.useMemo(() => children.filter((item) => React.isValidElement(item)), [children]);
-    const childrenWithoutHeader = React.useMemo(() => {
-        const flattenedWithoutNestedHeaders = validChildren.map((item) => {
-            const nestedChildren = React.Children.toArray(item.props.children);
-            //Header can be nested in React.Fragment when in renderItem
-            const nestedHeaders = nestedChildren.filter((child) => isTableHeader(child.props));
-            if (nestedHeaders === null || nestedHeaders === void 0 ? void 0 : nestedHeaders.length) {
-                //New element excluding header children
-                return React.cloneElement(item, {
-                    children: nestedChildren.filter((child) => !isTableHeader(child.props)),
-                });
-            }
-            return item;
-        });
-        return flattenedWithoutNestedHeaders.filter((item) => !isTableHeader(item.props));
-    }, [validChildren, isTableHeader]);
-    const header = React.useMemo(() => {
-        const flattenedPossibleHeaders = validChildren.map((item) => {
-            const nestedChildren = React.Children.toArray(item.props.children);
-            //Header can be nested in React.Fragment when in renderItem
-            const nestedHeaders = nestedChildren.filter((child) => isTableHeader(child.props));
-            if (nestedHeaders === null || nestedHeaders === void 0 ? void 0 : nestedHeaders.length) {
-                return nestedHeaders[0];
-            }
-            return item;
-        });
-        const allHeaders = flattenedPossibleHeaders.filter((item) => isTableHeader(item.props));
-        if (allHeaders.length) {
-            return allHeaders[0]; //Only 1 header taken
-        }
-        return null;
-    }, [validChildren, isTableHeader]);
-    const contextValue = {
-        borderColor,
-        borderStyle,
-        borderWidth,
-        cellHorizontalPadding,
-        cellVerticalPadding,
-    };
-    const borderViewStyle = generateBorderStyles({
-        borderColor,
-        borderWidth,
-        borderStyle,
-        drawTopBorder,
-        drawBottomBorder,
-        drawStartBorder,
-        drawEndBorder,
-    });
-    return (React.createElement(TableStyleContext.Provider, { value: contextValue },
-        React.createElement(View, { style: [styles.container, borderViewStyle, style] },
-            React.createElement(React.Fragment, null, header),
-            React.createElement(ScrollView, { ...rest }, childrenWithoutHeader))));
-};
-const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-    },
-});
-export default withTheme(Table);
+import React from "react";
+import { ScrollView, View, StyleSheet, } from "react-native";
+import { withTheme } from "../../theming";
+import { generateBorderStyles, TableStyleContext, } from "./TableCommon";
+const Table = ({ theme, borderWidth = 1, borderColor = theme.colors.divider, borderStyle = "solid", drawTopBorder = true, drawBottomBorder = false, drawStartBorder = false, drawEndBorder = false, cellVerticalPadding = 10, cellHorizontalPadding = 10, data, keyExtractor, renderItem, children: childrenProp, style, ...rest }) => {
+    //Both 'renderItem' and 'data' are optional to allow direct children. But if one is included, both need to be included
+    if ((data && !renderItem) || (renderItem && !data)) {
+        throw new Error("'renderItem' and 'data' need to both be provided to render from 'data'. Either remove them entirley or include both");
+    }
+    if (data && renderItem && childrenProp) {
+        console.warn("'children' of Table ignored due to usage of 'data' and 'renderItem'");
+    }
+    const isTableHeader = React.useCallback((object) => {
+        return object.isTableHeader;
+    }, []);
+    const isRenderItem = Array.isArray(data) && renderItem;
+    //Uses 'renderItem' and 'data' to create an array of children
+    const dataAsChildren = React.useMemo(() => {
+        if (!isRenderItem)
+            return [];
+        return data.map((item, index) => {
+            const component = renderItem({ item, index });
+            if (!component) {
+                return null;
+            }
+            const key = keyExtractor ? keyExtractor(item, index) : index.toString();
+            return React.cloneElement(component, {
+                key,
+            });
+        });
+    }, [data, renderItem, keyExtractor, isRenderItem]);
+    const children = isRenderItem
+        ? dataAsChildren
+        : React.Children.toArray(childrenProp);
+    const validChildren = React.useMemo(() => children.filter((item) => React.isValidElement(item)), [children]);
+    const childrenWithoutHeader = React.useMemo(() => {
+        const flattenedWithoutNestedHeaders = validChildren.map((item) => {
+            const nestedChildren = React.Children.toArray(item.props.children);
+            //Header can be nested in React.Fragment when in renderItem
+            const nestedHeaders = nestedChildren.filter((child) => isTableHeader(child.props));
+            if (nestedHeaders === null || nestedHeaders === void 0 ? void 0 : nestedHeaders.length) {
+                //New element excluding header children
+                return React.cloneElement(item, {
+                    children: nestedChildren.filter((child) => !isTableHeader(child.props)),
+                });
+            }
+            return item;
+        });
+        return flattenedWithoutNestedHeaders.filter((item) => !isTableHeader(item.props));
+    }, [validChildren, isTableHeader]);
+    const header = React.useMemo(() => {
+        const flattenedPossibleHeaders = validChildren.map((item) => {
+            const nestedChildren = React.Children.toArray(item.props.children);
+            //Header can be nested in React.Fragment when in renderItem
+            const nestedHeaders = nestedChildren.filter((child) => isTableHeader(child.props));
+            if (nestedHeaders === null || nestedHeaders === void 0 ? void 0 : nestedHeaders.length) {
+                return nestedHeaders[0];
+            }
+            return item;
+        });
+        const allHeaders = flattenedPossibleHeaders.filter((item) => isTableHeader(item.props));
+        if (allHeaders.length) {
+            return allHeaders[0]; //Only 1 header taken
+        }
+        return null;
+    }, [validChildren, isTableHeader]);
+    const contextValue = {
+        borderColor,
+        borderStyle,
+        borderWidth,
+        cellHorizontalPadding,
+        cellVerticalPadding,
+    };
+    const borderViewStyle = generateBorderStyles({
+        borderColor,
+        borderWidth,
+        borderStyle,
+        drawTopBorder,
+        drawBottomBorder,
+        drawStartBorder,
+        drawEndBorder,
+    });
+    return (React.createElement(TableStyleContext.Provider, { value: contextValue },
+        React.createElement(View, { style: [styles.container, borderViewStyle, style] },
+            React.createElement(React.Fragment, null, header),
+            React.createElement(ScrollView, { ...rest }, childrenWithoutHeader))));
+};
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+});
+export default withTheme(Table);
 //# sourceMappingURL=Table.js.map

package/lib/typescript/src/components/Table/TableCell.d.ts

@@ -1,9 +1,9 @@
-import React from "react";
-import { StyleProp, ViewStyle } from "react-native";
-import { TableProps } from "./TableCommon";
-export interface Props extends TableProps {
-    onPress?: () => void;
-    style?: StyleProp<ViewStyle>;
-}
-declare const TableCell: React.FC<React.PropsWithChildren<Props>>;
-export default TableCell;
+import React from "react";
+import { StyleProp, ViewStyle } from "react-native";
+import { TableProps } from "./TableCommon";
+export interface Props extends TableProps {
+    onPress?: () => void;
+    style?: StyleProp<ViewStyle>;
+}
+declare const TableCell: React.FC<React.PropsWithChildren<Props>>;
+export default TableCell;