@draftbit/core 48.5.6 → 48.5.7-26899.2

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

@@ -1,19 +1,19 @@
-import React from "react";
-import { StyleProp, ViewStyle, TextStyle } from "react-native";
-import type { Theme } from "../styles/DefaultTheme";
-import type { IconSlot } from "../interfaces/Icon";
-declare type Props = {
-    min: number;
-    max: number;
-    value?: number;
-    defaultValue?: number;
-    style?: StyleProp<ViewStyle | TextStyle>;
-    iconSize: number;
-    iconColor?: string;
-    onChange?: (value: number) => void;
-    theme: Theme;
-} & IconSlot;
-declare const _default: React.ComponentType<import("@draftbit/react-theme-provider").$Without<Props, "theme"> & {
-    theme?: import("@draftbit/react-theme-provider").$DeepPartial<any> | undefined;
-}> & import("@draftbit/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<React.ComponentType<Props> & React.FC<Props>, {}>;
-export default _default;
+import React from "react";
+import { StyleProp, ViewStyle, TextStyle } from "react-native";
+import type { Theme } from "../styles/DefaultTheme";
+import type { IconSlot } from "../interfaces/Icon";
+declare type Props = {
+    min: number;
+    max: number;
+    value?: number;
+    defaultValue?: number;
+    style?: StyleProp<ViewStyle | TextStyle>;
+    iconSize: number;
+    iconColor?: string;
+    onChange?: (value: number) => void;
+    theme: Theme;
+} & IconSlot;
+declare const _default: React.ComponentType<import("@draftbit/react-theme-provider").$Without<Props, "theme"> & {
+    theme?: import("@draftbit/react-theme-provider").$DeepPartial<any> | undefined;
+}> & import("@draftbit/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<React.ComponentType<Props> & React.FC<Props>, {}>;
+export default _default;

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

@@ -1,42 +1,42 @@
-import React, { useEffect, useState } from "react";
-import { View, Text } from "react-native";
-import { isNumber } from "lodash";
-import { withTheme } from "../theming";
-import IconButton from "./IconButton";
-import { extractStyles } from "../utilities";
-const Stepper = ({ min = -Infinity, max = Infinity, value: valueProp, defaultValue, style, iconSize = 24, iconColor, onChange, theme: { colors, typography }, Icon, }) => {
-    const { viewStyles, textStyles } = extractStyles(style);
-    const [value, setValue] = useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : 0);
-    const isValidValue = (valueArg) => valueArg >= min && valueArg <= max;
-    const handlePlusOrMinus = (type) => {
-        const newValue = type === "plus" ? value + 1 : value - 1;
-        if (isValidValue(newValue)) {
-            setValue(newValue);
-            onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
-        }
-    };
-    useEffect(() => {
-        if (valueProp != null &&
-            isNumber(valueProp) &&
-            valueProp !== value &&
-            isValidValue(valueProp)) {
-            setValue(valueProp);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [valueProp]);
-    return (React.createElement(View, { style: [{ flexDirection: "row" }, viewStyles] },
-        React.createElement(IconButton, { Icon: Icon, icon: "MaterialIcons/remove", onPress: () => handlePlusOrMinus("minus"), size: iconSize, color: iconColor, disabled: value === min, style: { opacity: value === min ? 0.5 : 1 } }),
-        React.createElement(Text, { style: [
-                typography.body1,
-                {
-                    textAlign: "center",
-                    alignSelf: "center",
-                    color: colors.medium,
-                    marginHorizontal: 8,
-                },
-                textStyles,
-            ] }, value),
-        React.createElement(IconButton, { Icon: Icon, icon: "MaterialIcons/add", onPress: () => handlePlusOrMinus("plus"), size: iconSize, color: iconColor, disabled: value === max, style: { opacity: value === max ? 0.5 : 1 } })));
-};
-export default withTheme(Stepper);
+import React, { useEffect, useState } from "react";
+import { View, Text } from "react-native";
+import { isNumber } from "lodash";
+import { withTheme } from "../theming";
+import IconButton from "./IconButton";
+import { extractStyles } from "../utilities";
+const Stepper = ({ min = -Infinity, max = Infinity, value: valueProp, defaultValue, style, iconSize = 24, iconColor, onChange, theme: { colors, typography }, Icon, }) => {
+    const { viewStyles, textStyles } = extractStyles(style);
+    const [value, setValue] = useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : 0);
+    const isValidValue = (valueArg) => valueArg >= min && valueArg <= max;
+    const handlePlusOrMinus = (type) => {
+        const newValue = type === "plus" ? value + 1 : value - 1;
+        if (isValidValue(newValue)) {
+            setValue(newValue);
+            onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+        }
+    };
+    useEffect(() => {
+        if (valueProp != null &&
+            isNumber(valueProp) &&
+            valueProp !== value &&
+            isValidValue(valueProp)) {
+            setValue(valueProp);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [valueProp]);
+    return (React.createElement(View, { style: [{ flexDirection: "row" }, viewStyles] },
+        React.createElement(IconButton, { Icon: Icon, icon: "MaterialIcons/remove", onPress: () => handlePlusOrMinus("minus"), size: iconSize, color: iconColor, disabled: value === min, style: { opacity: value === min ? 0.5 : 1 } }),
+        React.createElement(Text, { style: [
+                typography.body1,
+                {
+                    textAlign: "center",
+                    alignSelf: "center",
+                    color: colors.medium,
+                    marginHorizontal: 8,
+                },
+                textStyles,
+            ] }, value),
+        React.createElement(IconButton, { Icon: Icon, icon: "MaterialIcons/add", onPress: () => handlePlusOrMinus("plus"), size: iconSize, color: iconColor, disabled: value === max, style: { opacity: value === max ? 0.5 : 1 } })));
+};
+export default withTheme(Stepper);
 //# sourceMappingURL=Stepper.js.map

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

@@ -1,12 +1,12 @@
-import * as React from "react";
-import { ViewProps, StyleProp, ViewStyle } from "react-native";
-import type { Theme } from "../styles/DefaultTheme";
-declare type Props = {
-    elevation?: number;
-    style?: StyleProp<ViewStyle>;
-    theme: Theme;
-} & ViewProps;
-declare const _default: React.ComponentType<import("@draftbit/react-theme-provider").$Without<React.PropsWithChildren<Props>, "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>> & React.FC<React.PropsWithChildren<Props>>, {}>;
-export default _default;
+import * as React from "react";
+import { ViewProps, StyleProp, ViewStyle } from "react-native";
+import type { Theme } from "../styles/DefaultTheme";
+declare type Props = {
+    elevation?: number;
+    style?: StyleProp<ViewStyle>;
+    theme: Theme;
+} & ViewProps;
+declare const _default: React.ComponentType<import("@draftbit/react-theme-provider").$Without<React.PropsWithChildren<Props>, "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>> & React.FC<React.PropsWithChildren<Props>>, {}>;
+export default _default;

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

@@ -1,33 +1,33 @@
-/* Copied from https://github.com/callstack/react-native-paper/blob/main/src/components/Surface.tsx */
-import * as React from "react";
-import { Animated, StyleSheet, } from "react-native";
-import shadow from "../styles/shadow";
-import overlay from "../styles/overlay";
-import { withTheme } from "../theming";
-const Surface = ({ elevation: propElevation, style, theme, children, ...rest }) => {
-    const { elevation: styleElevation = 3, backgroundColor, ...restStyle } = (StyleSheet.flatten(style) || {});
-    const { dark: isDarkTheme, mode, colors } = theme;
-    const elevation = propElevation !== null && propElevation !== void 0 ? propElevation : styleElevation;
-    const evalationStyles = elevation ? shadow(elevation) : {};
-    const getBackgroundColor = () => {
-        if (backgroundColor) {
-            return backgroundColor;
-        }
-        else if (isDarkTheme && mode === "adaptive") {
-            return overlay(elevation, colors.surface);
-        }
-        else {
-            return colors.surface;
-        }
-    };
-    return (React.createElement(Animated.View, { ...rest, style: [
-            {
-                backgroundColor: getBackgroundColor(),
-                elevation,
-                ...evalationStyles,
-                ...restStyle,
-            },
-        ] }, children));
-};
-export default withTheme(Surface);
+/* Copied from https://github.com/callstack/react-native-paper/blob/main/src/components/Surface.tsx */
+import * as React from "react";
+import { Animated, StyleSheet, } from "react-native";
+import shadow from "../styles/shadow";
+import overlay from "../styles/overlay";
+import { withTheme } from "../theming";
+const Surface = ({ elevation: propElevation, style, theme, children, ...rest }) => {
+    const { elevation: styleElevation = 3, backgroundColor, ...restStyle } = (StyleSheet.flatten(style) || {});
+    const { dark: isDarkTheme, mode, colors } = theme;
+    const elevation = propElevation !== null && propElevation !== void 0 ? propElevation : styleElevation;
+    const evalationStyles = elevation ? shadow(elevation) : {};
+    const getBackgroundColor = () => {
+        if (backgroundColor) {
+            return backgroundColor;
+        }
+        else if (isDarkTheme && mode === "adaptive") {
+            return overlay(elevation, colors.surface);
+        }
+        else {
+            return colors.surface;
+        }
+    };
+    return (React.createElement(Animated.View, { ...rest, style: [
+            {
+                backgroundColor: getBackgroundColor(),
+                elevation,
+                ...evalationStyles,
+                ...restStyle,
+            },
+        ] }, children));
+};
+export default withTheme(Surface);
 //# sourceMappingURL=Surface.js.map

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

@@ -1,43 +1,43 @@
-import React from "react";
-import { StyleProp, ViewStyle, TextStyle } from "react-native";
-import { IconSlot } from "../../interfaces/Icon";
-import type { Theme } from "../../styles/DefaultTheme";
-import { RightSwipeProps, LeftSwipeProps } from "./SwipeableItemCommon";
-/**
- * Clarification Regarding left/right directions and what they mean in the context of this component
- * ------------------------------------------------------------------------------------------------------------
- * Swipe Left / Left Swipe = Swiping to the left (i.e. Swiping from the right)
- * Swipe Right / Right Swipe = Swiping to the right (i.e. Swiping from the left)
- *
- * This is only applies in the context of swipes, and not anywhere where a direction is refernced.
- * For example 'rightOpenValue' referes to the open value on the right side.
- * While 'stopRightSwipe' refers to the stop value of the swipe from left to right, which is on the left side.
- * This is because one refers to a swipe and one does not, so the word 'right' has different meanings.
- *
- * This component is built around this concept to avoid confusion
- */
-export interface SwipeableItemProps extends IconSlot {
-    closeOnPress?: boolean;
-    leftOpenValue?: number;
-    rightOpenValue?: number;
-    leftActivationValue?: number;
-    rightActivationValue?: number;
-    swipeActivationPercentage?: number;
-    stopLeftSwipe?: number;
-    stopRightSwipe?: number;
-    directionalDistanceChangeThreshold?: number;
-    friction?: number;
-    tension?: number;
-    disableLeftSwipe?: boolean;
-    disableRightSwipe?: boolean;
-    swipeToOpenVelocityContribution?: number;
-    swipeToOpenPercent?: number;
-    swipeToClosePercent?: number;
-    style?: StyleProp<ViewStyle | TextStyle>;
-    theme: Theme;
-}
-declare type Props = SwipeableItemProps & RightSwipeProps & LeftSwipeProps;
-declare const _default: React.ComponentType<import("@draftbit/react-theme-provider").$Without<React.PropsWithChildren<Props>, "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>> & React.FC<React.PropsWithChildren<Props>>, {}>;
-export default _default;
+import React from "react";
+import { StyleProp, ViewStyle, TextStyle } from "react-native";
+import { IconSlot } from "../../interfaces/Icon";
+import type { Theme } from "../../styles/DefaultTheme";
+import { RightSwipeProps, LeftSwipeProps } from "./SwipeableItemCommon";
+/**
+ * Clarification Regarding left/right directions and what they mean in the context of this component
+ * ------------------------------------------------------------------------------------------------------------
+ * Swipe Left / Left Swipe = Swiping to the left (i.e. Swiping from the right)
+ * Swipe Right / Right Swipe = Swiping to the right (i.e. Swiping from the left)
+ *
+ * This is only applies in the context of swipes, and not anywhere where a direction is refernced.
+ * For example 'rightOpenValue' referes to the open value on the right side.
+ * While 'stopRightSwipe' refers to the stop value of the swipe from left to right, which is on the left side.
+ * This is because one refers to a swipe and one does not, so the word 'right' has different meanings.
+ *
+ * This component is built around this concept to avoid confusion
+ */
+export interface SwipeableItemProps extends IconSlot {
+    closeOnPress?: boolean;
+    leftOpenValue?: number;
+    rightOpenValue?: number;
+    leftActivationValue?: number;
+    rightActivationValue?: number;
+    swipeActivationPercentage?: number;
+    stopLeftSwipe?: number;
+    stopRightSwipe?: number;
+    directionalDistanceChangeThreshold?: number;
+    friction?: number;
+    tension?: number;
+    disableLeftSwipe?: boolean;
+    disableRightSwipe?: boolean;
+    swipeToOpenVelocityContribution?: number;
+    swipeToOpenPercent?: number;
+    swipeToClosePercent?: number;
+    style?: StyleProp<ViewStyle | TextStyle>;
+    theme: Theme;
+}
+declare type Props = SwipeableItemProps & RightSwipeProps & LeftSwipeProps;
+declare const _default: React.ComponentType<import("@draftbit/react-theme-provider").$Without<React.PropsWithChildren<Props>, "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>> & React.FC<React.PropsWithChildren<Props>>, {}>;
+export default _default;

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

@@ -1,119 +1,119 @@
-import React from "react";
-import { View, StyleSheet, Text, } from "react-native";
-import Pressable from "../Pressable";
-import { extractBorderAndMarginStyles, extractEffectStyles, extractFlexItemStyles, extractPositionStyles, extractSizeStyles, extractStyles, flattenReactFragments, } from "../../utilities";
-import { SwipeRow } from "react-native-swipe-list-view";
-import { withTheme } from "../../theming";
-import SwipeableItemButton from "./SwipeableItemButton";
-import { SwipeableListContext } from "./SwipeableList";
-import { leftSwipeToSwipeableItemBehindItem, rightSwipeToSwipeableItemBehindItem, extractLeftSwipeProps, extractRightSwipeProps, } from "./SwipeableItemCommon";
-const SwipeableItem = ({ theme, style, children: childrenProp, Icon, closeOnPress, leftOpenValue, rightOpenValue, leftActivationValue, rightActivationValue, swipeActivationPercentage = 80, stopLeftSwipe, stopRightSwipe, friction = 20, disableLeftSwipe, disableRightSwipe, ...rest }) => {
-    const isEmptyObject = (object) => {
-        return Object.keys(object).length === 0;
-    };
-    const { onStartSwiping, onStopSwiping } = React.useContext(SwipeableListContext);
-    const swipeableRef = React.useRef(null);
-    const { viewStyles, textStyles } = extractStyles(style);
-    const { borderStyles, marginStyles } = extractBorderAndMarginStyles(viewStyles);
-    const sizeStyles = extractSizeStyles(viewStyles);
-    const parentContainerStyles = StyleSheet.flatten([
-        borderStyles,
-        marginStyles,
-        extractFlexItemStyles(viewStyles),
-        extractPositionStyles(viewStyles),
-        extractEffectStyles(viewStyles),
-        sizeStyles,
-    ]);
-    //Remove styles already consumed from viewStyles
-    Object.keys(parentContainerStyles).forEach((key) => delete viewStyles[key]);
-    const surfaceContainerStyles = StyleSheet.flatten([
-        viewStyles,
-        sizeStyles /* Size styles needs to be readded to surface container due to inconsistencies on web */,
-    ]);
-    const [componentWidth, setComponentWidth] = React.useState(null);
-    const children = React.useMemo(() => flattenReactFragments(React.Children.toArray(childrenProp)), [childrenProp]);
-    const leftSwipeButtons = React.useMemo(() => children.filter((child) => React.isValidElement(child) &&
-        child.type === SwipeableItemButton &&
-        child.props.revealSwipeDirection === "left"), [children]);
-    const rightSwipeButtons = React.useMemo(() => children.filter((child) => React.isValidElement(child) &&
-        child.type === SwipeableItemButton &&
-        child.props.revealSwipeDirection === "right"), [children]);
-    const remainingChildren = React.useMemo(() => React.Children.toArray(children).filter((child) => React.isValidElement(child) && child.type !== SwipeableItemButton), [children]);
-    const leftSwipe = extractLeftSwipeProps(rest);
-    const rightSwipe = extractRightSwipeProps(rest);
-    const isLeftSwipeHandled = !isEmptyObject(leftSwipe);
-    const isRightSwipeHandled = !isEmptyObject(rightSwipe);
-    if (leftSwipeButtons.length > 2 || rightSwipeButtons.length > 2) {
-        throw Error("Cannot have more than 2 SwipeableItemButton(s) per side");
-    }
-    if ((leftSwipeButtons.length && isLeftSwipeHandled) ||
-        (rightSwipeButtons.length && isRightSwipeHandled)) {
-        throw Error("Colliding configuration in SwipeableItem. You cannot have SwipeableItemButton(s) on the swipe direction where swipe handling is configured. Either reset swipe configuration or remove the button(s).");
-    }
-    //Renders a single 'behind' item. Used for both buttons and swipe handler
-    const renderBehindItem = (item, index) => (React.createElement(Pressable, { testID: "swipeable-behind-item", key: index.toString(), onPress: () => {
-            var _a, _b;
-            (_a = item.onPress) === null || _a === void 0 ? void 0 : _a.call(item);
-            if (item.closeOnPress !== false) {
-                (_b = swipeableRef.current) === null || _b === void 0 ? void 0 : _b.closeRow();
-            }
-        }, style: [
-            styles.buttonContainer,
-            { backgroundColor: item.backgroundColor || theme.colors.primary },
-        ] },
-        item.icon && (React.createElement(Icon, { name: item.icon, size: item.iconSize || 25, color: item.color || theme.colors.surface })),
-        item.title && (React.createElement(Text, { style: [textStyles, { color: item.color || theme.colors.surface }] }, item.title))));
-    const defaultLeftOpenValue = componentWidth ? componentWidth / 2 : 0;
-    const defaultRightOpenValue = componentWidth ? -componentWidth / 2 : 0;
-    return (React.createElement(View, { onLayout: (event) => {
-            setComponentWidth(event.nativeEvent.layout.width);
-        }, style: [styles.parentContainer, parentContainerStyles] },
-        React.createElement(SwipeRow, { ref: swipeableRef, leftOpenValue: isRightSwipeHandled ? 0 : leftOpenValue || defaultLeftOpenValue //If in swiping mode, don't keep open
-            , rightOpenValue: isLeftSwipeHandled ? 0 : rightOpenValue || defaultRightOpenValue, leftActivationValue: leftActivationValue || isRightSwipeHandled
-                ? defaultLeftOpenValue * (swipeActivationPercentage / 100) //When swipe passes activation percentage then it should be considered activated (call onSwipe)
-                : defaultLeftOpenValue, rightActivationValue: rightActivationValue || isLeftSwipeHandled
-                ? defaultRightOpenValue * (swipeActivationPercentage / 100)
-                : defaultRightOpenValue, stopLeftSwipe: stopRightSwipe || defaultLeftOpenValue, stopRightSwipe: stopLeftSwipe || defaultRightOpenValue, onLeftAction: isRightSwipeHandled ? () => { var _a; return (_a = rightSwipe.onSwipedRight) === null || _a === void 0 ? void 0 : _a.call(rightSwipe); } : undefined, onRightAction: isLeftSwipeHandled ? () => { var _a; return (_a = leftSwipe.onSwipedLeft) === null || _a === void 0 ? void 0 : _a.call(leftSwipe); } : undefined, swipeGestureBegan: onStartSwiping, swipeGestureEnded: onStopSwiping, closeOnRowPress: closeOnPress, friction: friction, disableLeftSwipe: disableRightSwipe, disableRightSwipe: disableLeftSwipe, ...rest },
-            React.createElement(View, { style: styles.behindContainer },
-                React.createElement(View, { style: styles.behindContainerItem }, isRightSwipeHandled
-                    ? renderBehindItem(rightSwipeToSwipeableItemBehindItem(rightSwipe), 0)
-                    : rightSwipeButtons.map((item, index) => renderBehindItem(item.props, index))),
-                React.createElement(View, { style: styles.behindContainerItem }, isLeftSwipeHandled
-                    ? renderBehindItem(leftSwipeToSwipeableItemBehindItem(leftSwipe), 0)
-                    : leftSwipeButtons.map((item, index) => renderBehindItem(item.props, index)))),
-            React.createElement(View, { style: [
-                    styles.surfaceContainer,
-                    {
-                        backgroundColor: theme.colors.background,
-                    },
-                    surfaceContainerStyles,
-                ] }, remainingChildren))));
-};
-const styles = StyleSheet.create({
-    parentContainer: {
-        overflow: "hidden",
-        minHeight: 50,
-    },
-    behindContainer: {
-        flex: 1,
-        width: "100%",
-        height: "100%",
-        flexDirection: "row",
-    },
-    behindContainerItem: {
-        flex: 1,
-        flexDirection: "row",
-    },
-    buttonContainer: {
-        flex: 1,
-        alignItems: "center",
-        justifyContent: "center",
-    },
-    surfaceContainer: {
-        width: "100%",
-        minHeight: 50,
-        overflow: "hidden",
-    },
-});
-export default withTheme(SwipeableItem);
+import React from "react";
+import { View, StyleSheet, Text, } from "react-native";
+import Pressable from "../Pressable";
+import { extractBorderAndMarginStyles, extractEffectStyles, extractFlexItemStyles, extractPositionStyles, extractSizeStyles, extractStyles, flattenReactFragments, } from "../../utilities";
+import { SwipeRow } from "react-native-swipe-list-view";
+import { withTheme } from "../../theming";
+import SwipeableItemButton from "./SwipeableItemButton";
+import { SwipeableListContext } from "./SwipeableList";
+import { leftSwipeToSwipeableItemBehindItem, rightSwipeToSwipeableItemBehindItem, extractLeftSwipeProps, extractRightSwipeProps, } from "./SwipeableItemCommon";
+const SwipeableItem = ({ theme, style, children: childrenProp, Icon, closeOnPress, leftOpenValue, rightOpenValue, leftActivationValue, rightActivationValue, swipeActivationPercentage = 80, stopLeftSwipe, stopRightSwipe, friction = 20, disableLeftSwipe, disableRightSwipe, ...rest }) => {
+    const isEmptyObject = (object) => {
+        return Object.keys(object).length === 0;
+    };
+    const { onStartSwiping, onStopSwiping } = React.useContext(SwipeableListContext);
+    const swipeableRef = React.useRef(null);
+    const { viewStyles, textStyles } = extractStyles(style);
+    const { borderStyles, marginStyles } = extractBorderAndMarginStyles(viewStyles);
+    const sizeStyles = extractSizeStyles(viewStyles);
+    const parentContainerStyles = StyleSheet.flatten([
+        borderStyles,
+        marginStyles,
+        extractFlexItemStyles(viewStyles),
+        extractPositionStyles(viewStyles),
+        extractEffectStyles(viewStyles),
+        sizeStyles,
+    ]);
+    //Remove styles already consumed from viewStyles
+    Object.keys(parentContainerStyles).forEach((key) => delete viewStyles[key]);
+    const surfaceContainerStyles = StyleSheet.flatten([
+        viewStyles,
+        sizeStyles /* Size styles needs to be readded to surface container due to inconsistencies on web */,
+    ]);
+    const [componentWidth, setComponentWidth] = React.useState(null);
+    const children = React.useMemo(() => flattenReactFragments(React.Children.toArray(childrenProp)), [childrenProp]);
+    const leftSwipeButtons = React.useMemo(() => children.filter((child) => React.isValidElement(child) &&
+        child.type === SwipeableItemButton &&
+        child.props.revealSwipeDirection === "left"), [children]);
+    const rightSwipeButtons = React.useMemo(() => children.filter((child) => React.isValidElement(child) &&
+        child.type === SwipeableItemButton &&
+        child.props.revealSwipeDirection === "right"), [children]);
+    const remainingChildren = React.useMemo(() => React.Children.toArray(children).filter((child) => React.isValidElement(child) && child.type !== SwipeableItemButton), [children]);
+    const leftSwipe = extractLeftSwipeProps(rest);
+    const rightSwipe = extractRightSwipeProps(rest);
+    const isLeftSwipeHandled = !isEmptyObject(leftSwipe);
+    const isRightSwipeHandled = !isEmptyObject(rightSwipe);
+    if (leftSwipeButtons.length > 2 || rightSwipeButtons.length > 2) {
+        throw Error("Cannot have more than 2 SwipeableItemButton(s) per side");
+    }
+    if ((leftSwipeButtons.length && isLeftSwipeHandled) ||
+        (rightSwipeButtons.length && isRightSwipeHandled)) {
+        throw Error("Colliding configuration in SwipeableItem. You cannot have SwipeableItemButton(s) on the swipe direction where swipe handling is configured. Either reset swipe configuration or remove the button(s).");
+    }
+    //Renders a single 'behind' item. Used for both buttons and swipe handler
+    const renderBehindItem = (item, index) => (React.createElement(Pressable, { testID: "swipeable-behind-item", key: index.toString(), onPress: () => {
+            var _a, _b;
+            (_a = item.onPress) === null || _a === void 0 ? void 0 : _a.call(item);
+            if (item.closeOnPress !== false) {
+                (_b = swipeableRef.current) === null || _b === void 0 ? void 0 : _b.closeRow();
+            }
+        }, style: [
+            styles.buttonContainer,
+            { backgroundColor: item.backgroundColor || theme.colors.primary },
+        ] },
+        item.icon && (React.createElement(Icon, { name: item.icon, size: item.iconSize || 25, color: item.color || theme.colors.surface })),
+        item.title && (React.createElement(Text, { style: [textStyles, { color: item.color || theme.colors.surface }] }, item.title))));
+    const defaultLeftOpenValue = componentWidth ? componentWidth / 2 : 0;
+    const defaultRightOpenValue = componentWidth ? -componentWidth / 2 : 0;
+    return (React.createElement(View, { onLayout: (event) => {
+            setComponentWidth(event.nativeEvent.layout.width);
+        }, style: [styles.parentContainer, parentContainerStyles] },
+        React.createElement(SwipeRow, { ref: swipeableRef, leftOpenValue: isRightSwipeHandled ? 0 : leftOpenValue || defaultLeftOpenValue //If in swiping mode, don't keep open
+            , rightOpenValue: isLeftSwipeHandled ? 0 : rightOpenValue || defaultRightOpenValue, leftActivationValue: leftActivationValue || isRightSwipeHandled
+                ? defaultLeftOpenValue * (swipeActivationPercentage / 100) //When swipe passes activation percentage then it should be considered activated (call onSwipe)
+                : defaultLeftOpenValue, rightActivationValue: rightActivationValue || isLeftSwipeHandled
+                ? defaultRightOpenValue * (swipeActivationPercentage / 100)
+                : defaultRightOpenValue, stopLeftSwipe: stopRightSwipe || defaultLeftOpenValue, stopRightSwipe: stopLeftSwipe || defaultRightOpenValue, onLeftAction: isRightSwipeHandled ? () => { var _a; return (_a = rightSwipe.onSwipedRight) === null || _a === void 0 ? void 0 : _a.call(rightSwipe); } : undefined, onRightAction: isLeftSwipeHandled ? () => { var _a; return (_a = leftSwipe.onSwipedLeft) === null || _a === void 0 ? void 0 : _a.call(leftSwipe); } : undefined, swipeGestureBegan: onStartSwiping, swipeGestureEnded: onStopSwiping, closeOnRowPress: closeOnPress, friction: friction, disableLeftSwipe: disableRightSwipe, disableRightSwipe: disableLeftSwipe, ...rest },
+            React.createElement(View, { style: styles.behindContainer },
+                React.createElement(View, { style: styles.behindContainerItem }, isRightSwipeHandled
+                    ? renderBehindItem(rightSwipeToSwipeableItemBehindItem(rightSwipe), 0)
+                    : rightSwipeButtons.map((item, index) => renderBehindItem(item.props, index))),
+                React.createElement(View, { style: styles.behindContainerItem }, isLeftSwipeHandled
+                    ? renderBehindItem(leftSwipeToSwipeableItemBehindItem(leftSwipe), 0)
+                    : leftSwipeButtons.map((item, index) => renderBehindItem(item.props, index)))),
+            React.createElement(View, { style: [
+                    styles.surfaceContainer,
+                    {
+                        backgroundColor: theme.colors.background,
+                    },
+                    surfaceContainerStyles,
+                ] }, remainingChildren))));
+};
+const styles = StyleSheet.create({
+    parentContainer: {
+        overflow: "hidden",
+        minHeight: 50,
+    },
+    behindContainer: {
+        flex: 1,
+        width: "100%",
+        height: "100%",
+        flexDirection: "row",
+    },
+    behindContainerItem: {
+        flex: 1,
+        flexDirection: "row",
+    },
+    buttonContainer: {
+        flex: 1,
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    surfaceContainer: {
+        width: "100%",
+        minHeight: 50,
+        overflow: "hidden",
+    },
+});
+export default withTheme(SwipeableItem);
 //# sourceMappingURL=SwipeableItem.js.map

package/lib/typescript/src/components/SwipeableItem/SwipeableItemButton.d.ts

@@ -1,5 +1,5 @@
-import React from "react";
-import { SwipeableItemBehindItem } from "./SwipeableItemCommon";
-export declare type SwipeableItemButtonProps = Omit<SwipeableItemBehindItem, "onSwipe">;
-declare const SwipeableItemButton: React.FC<SwipeableItemButtonProps>;
-export default SwipeableItemButton;
+import React from "react";
+import { SwipeableItemBehindItem } from "./SwipeableItemCommon";
+export declare type SwipeableItemButtonProps = Omit<SwipeableItemBehindItem, "onSwipe">;
+declare const SwipeableItemButton: React.FC<SwipeableItemButtonProps>;
+export default SwipeableItemButton;

package/lib/typescript/src/components/SwipeableItem/SwipeableItemButton.js

@@ -1,6 +1,6 @@
-//Renders nothing, acts as a wrapper be used by SwipeableView
-const SwipeableItemButton = () => {
-    return null;
-};
-export default SwipeableItemButton;
+//Renders nothing, acts as a wrapper be used by SwipeableView
+const SwipeableItemButton = () => {
+    return null;
+};
+export default SwipeableItemButton;
 //# sourceMappingURL=SwipeableItemButton.js.map

package/lib/typescript/src/components/SwipeableItem/SwipeableItemCommon.d.ts

@@ -1,31 +1,31 @@
-export interface SwipeableItemBehindItem {
-    title: string;
-    revealSwipeDirection: "left" | "right";
-    onPress?: () => void;
-    onSwipe?: () => void;
-    closeOnPress?: boolean;
-    icon?: string;
-    iconSize?: number;
-    backgroundColor?: string;
-    color?: string;
-}
-export interface RightSwipeProps {
-    onSwipedRight?: () => void;
-    rightSwipeTitle?: string;
-    rightSwipeIcon?: string;
-    rightSwipeIconSize?: number;
-    rightSwipeBackgroundColor?: string;
-    rightSwipeColor?: string;
-}
-export interface LeftSwipeProps {
-    onSwipedLeft?: () => void;
-    leftSwipeTitle?: string;
-    leftSwipeIcon?: string;
-    leftSwipeIconSize?: number;
-    leftSwipeBackgroundColor?: string;
-    leftSwipeColor?: string;
-}
-export declare function extractRightSwipeProps(object: object): RightSwipeProps;
-export declare function extractLeftSwipeProps(object: object): LeftSwipeProps;
-export declare function rightSwipeToSwipeableItemBehindItem(swipe: RightSwipeProps): Omit<SwipeableItemBehindItem, "onPress" | "closeOnPress">;
-export declare function leftSwipeToSwipeableItemBehindItem(swipe: LeftSwipeProps): Omit<SwipeableItemBehindItem, "onPress" | "closeOnPress">;
+export interface SwipeableItemBehindItem {
+    title: string;
+    revealSwipeDirection: "left" | "right";
+    onPress?: () => void;
+    onSwipe?: () => void;
+    closeOnPress?: boolean;
+    icon?: string;
+    iconSize?: number;
+    backgroundColor?: string;
+    color?: string;
+}
+export interface RightSwipeProps {
+    onSwipedRight?: () => void;
+    rightSwipeTitle?: string;
+    rightSwipeIcon?: string;
+    rightSwipeIconSize?: number;
+    rightSwipeBackgroundColor?: string;
+    rightSwipeColor?: string;
+}
+export interface LeftSwipeProps {
+    onSwipedLeft?: () => void;
+    leftSwipeTitle?: string;
+    leftSwipeIcon?: string;
+    leftSwipeIconSize?: number;
+    leftSwipeBackgroundColor?: string;
+    leftSwipeColor?: string;
+}
+export declare function extractRightSwipeProps(object: object): RightSwipeProps;
+export declare function extractLeftSwipeProps(object: object): LeftSwipeProps;
+export declare function rightSwipeToSwipeableItemBehindItem(swipe: RightSwipeProps): Omit<SwipeableItemBehindItem, "onPress" | "closeOnPress">;
+export declare function leftSwipeToSwipeableItemBehindItem(swipe: LeftSwipeProps): Omit<SwipeableItemBehindItem, "onPress" | "closeOnPress">;