@draftbit/core 48.5.6 → 48.5.7-cd0364.2

package/lib/typescript/src/components/Picker/dropdown/DropDownPicker.js

@@ -1,67 +1,67 @@
-import * as React from "react";
-import { Keyboard } from "react-native";
-import { extractStyles, flattenReactFragments, useDeepCompareMemo, } from "../../../utilities";
-import { normalizeToPickerOptions, } from "../PickerCommon";
-import PickerInputContainer from "../PickerInputContainer";
-import DropDownPickerComponent from "react-native-dropdown-picker";
-import { withTheme } from "../../../theming";
-import PickerItem from "./PickerItem";
-const DropDownPicker = ({ theme, options: optionsProp = [], onValueChange, Icon, placeholder, value, autoDismissKeyboard = true, selectedIconName = "Feather/check", selectedIconColor = theme.colors.strong, selectedIconSize = 20, dropDownBackgroundColor = theme.colors.background, dropDownBorderColor = theme.colors.divider, dropDownTextColor = theme.colors.strong, dropDownBorderWidth = 1, dropDownBorderRadius = 8, children: childrenProp, disabled, ...rest }) => {
-    const [pickerVisible, setPickerVisible] = React.useState(false);
-    const [internalValue, setInternalValue] = React.useState();
-    const isMultiSelect = Array.isArray(value);
-    const pickerItemProps = React.useMemo(() => {
-        const children = flattenReactFragments(React.Children.toArray(childrenProp));
-        // Only the props of the first PickerItem are used, any others are ignored
-        const firstPickerItem = children.find((child) => child.type === PickerItem);
-        return (firstPickerItem === null || firstPickerItem === void 0 ? void 0 : firstPickerItem.props) || {};
-    }, [childrenProp]);
-    const { viewStyles: pickerItemViewStyles, textStyles: pickerItemTextStyles } = extractStyles(pickerItemProps.style);
-    const options = useDeepCompareMemo(() => normalizeToPickerOptions(optionsProp).map((option) => ({
-        label: option.label.toString(),
-        value: option.value,
-    })), [optionsProp]);
-    React.useEffect(() => {
-        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange((isMultiSelect ? internalValue !== null && internalValue !== void 0 ? internalValue : [] : internalValue !== null && internalValue !== void 0 ? internalValue : "") // cannot determine if multiselect or not on compile time
-        );
-        // onValueChange excluded to prevent running on every re-render when using an anoymous function, which is the common case
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [internalValue]);
-    React.useEffect(() => {
-        if (pickerVisible && autoDismissKeyboard) {
-            Keyboard.dismiss();
-        }
-    }, [pickerVisible, autoDismissKeyboard]);
-    React.useEffect(() => {
-        if (disabled) {
-            setPickerVisible(false);
-        }
-    }, [disabled]);
-    return (React.createElement(PickerInputContainer, { testID: "dropdown-picker", Icon: Icon, placeholder: placeholder, selectedValue: value, options: options, onPress: () => setPickerVisible(!pickerVisible), zIndex: pickerVisible ? 100 : undefined, disabled: disabled, ...rest },
-        React.createElement(DropDownPickerComponent, { open: pickerVisible, setOpen: setPickerVisible, value: (value || null), setValue: setInternalValue, items: options, placeholder: placeholder, listMode: "SCROLLVIEW", multiple: isMultiSelect, style: { display: "none" }, listItemLabelStyle: [
-                { color: dropDownTextColor, fontSize: 14 },
-                pickerItemTextStyles,
-            ], selectedItemLabelStyle: [
-                pickerItemProps.selectedTextColor
-                    ? {
-                        color: pickerItemProps.selectedTextColor,
-                    }
-                    : {},
-                pickerItemProps.selectedTextSize
-                    ? {
-                        fontSize: pickerItemProps.selectedTextSize,
-                    }
-                    : {},
-            ], listItemContainerStyle: pickerItemViewStyles, selectedItemContainerStyle: pickerItemProps.selectedBackgroundColor
-                ? {
-                    backgroundColor: pickerItemProps.selectedBackgroundColor,
-                }
-                : {}, dropDownContainerStyle: {
-                borderColor: dropDownBorderColor,
-                borderWidth: dropDownBorderWidth,
-                borderRadius: dropDownBorderRadius,
-                backgroundColor: dropDownBackgroundColor,
-            }, TickIconComponent: () => (React.createElement(Icon, { name: selectedIconName, size: selectedIconSize, color: selectedIconColor })) })));
-};
-export default withTheme(DropDownPicker);
+import * as React from "react";
+import { Keyboard } from "react-native";
+import { extractStyles, flattenReactFragments, useDeepCompareMemo, } from "../../../utilities";
+import { normalizeToPickerOptions, } from "../PickerCommon";
+import PickerInputContainer from "../PickerInputContainer";
+import DropDownPickerComponent from "react-native-dropdown-picker";
+import { withTheme } from "../../../theming";
+import PickerItem from "./PickerItem";
+const DropDownPicker = ({ theme, options: optionsProp = [], onValueChange, Icon, placeholder, value, autoDismissKeyboard = true, selectedIconName = "Feather/check", selectedIconColor = theme.colors.strong, selectedIconSize = 20, dropDownBackgroundColor = theme.colors.background, dropDownBorderColor = theme.colors.divider, dropDownTextColor = theme.colors.strong, dropDownBorderWidth = 1, dropDownBorderRadius = 8, children: childrenProp, disabled, ...rest }) => {
+    const [pickerVisible, setPickerVisible] = React.useState(false);
+    const [internalValue, setInternalValue] = React.useState();
+    const isMultiSelect = Array.isArray(value);
+    const pickerItemProps = React.useMemo(() => {
+        const children = flattenReactFragments(React.Children.toArray(childrenProp));
+        // Only the props of the first PickerItem are used, any others are ignored
+        const firstPickerItem = children.find((child) => child.type === PickerItem);
+        return (firstPickerItem === null || firstPickerItem === void 0 ? void 0 : firstPickerItem.props) || {};
+    }, [childrenProp]);
+    const { viewStyles: pickerItemViewStyles, textStyles: pickerItemTextStyles } = extractStyles(pickerItemProps.style);
+    const options = useDeepCompareMemo(() => normalizeToPickerOptions(optionsProp).map((option) => ({
+        label: option.label.toString(),
+        value: option.value,
+    })), [optionsProp]);
+    React.useEffect(() => {
+        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange((isMultiSelect ? internalValue !== null && internalValue !== void 0 ? internalValue : [] : internalValue !== null && internalValue !== void 0 ? internalValue : "") // cannot determine if multiselect or not on compile time
+        );
+        // onValueChange excluded to prevent running on every re-render when using an anoymous function, which is the common case
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [internalValue]);
+    React.useEffect(() => {
+        if (pickerVisible && autoDismissKeyboard) {
+            Keyboard.dismiss();
+        }
+    }, [pickerVisible, autoDismissKeyboard]);
+    React.useEffect(() => {
+        if (disabled) {
+            setPickerVisible(false);
+        }
+    }, [disabled]);
+    return (React.createElement(PickerInputContainer, { testID: "dropdown-picker", Icon: Icon, placeholder: placeholder, selectedValue: value, options: options, onPress: () => setPickerVisible(!pickerVisible), zIndex: pickerVisible ? 100 : undefined, disabled: disabled, ...rest },
+        React.createElement(DropDownPickerComponent, { open: pickerVisible, setOpen: setPickerVisible, value: (value || null), setValue: setInternalValue, items: options, placeholder: placeholder, listMode: "SCROLLVIEW", multiple: isMultiSelect, style: { display: "none" }, listItemLabelStyle: [
+                { color: dropDownTextColor, fontSize: 14 },
+                pickerItemTextStyles,
+            ], selectedItemLabelStyle: [
+                pickerItemProps.selectedTextColor
+                    ? {
+                        color: pickerItemProps.selectedTextColor,
+                    }
+                    : {},
+                pickerItemProps.selectedTextSize
+                    ? {
+                        fontSize: pickerItemProps.selectedTextSize,
+                    }
+                    : {},
+            ], listItemContainerStyle: pickerItemViewStyles, selectedItemContainerStyle: pickerItemProps.selectedBackgroundColor
+                ? {
+                    backgroundColor: pickerItemProps.selectedBackgroundColor,
+                }
+                : {}, dropDownContainerStyle: {
+                borderColor: dropDownBorderColor,
+                borderWidth: dropDownBorderWidth,
+                borderRadius: dropDownBorderRadius,
+                backgroundColor: dropDownBackgroundColor,
+            }, TickIconComponent: () => (React.createElement(Icon, { name: selectedIconName, size: selectedIconSize, color: selectedIconColor })) })));
+};
+export default withTheme(DropDownPicker);
 //# sourceMappingURL=DropDownPicker.js.map

package/lib/typescript/src/components/Picker/dropdown/MultiSelectPicker.d.ts

@@ -1,6 +1,6 @@
-import * as React from "react";
-import { CommonDropDownPickerProps, MultiSelectPickerProps } from "../PickerCommon";
-declare const _default: React.ComponentType<import("@draftbit/react-theme-provider").$Without<React.PropsWithChildren<CommonDropDownPickerProps & MultiSelectPickerProps>, "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<CommonDropDownPickerProps & MultiSelectPickerProps>> & React.FC<React.PropsWithChildren<CommonDropDownPickerProps & MultiSelectPickerProps>>, {}>;
-export default _default;
+import * as React from "react";
+import { CommonDropDownPickerProps, MultiSelectPickerProps } from "../PickerCommon";
+declare const _default: React.ComponentType<import("@draftbit/react-theme-provider").$Without<React.PropsWithChildren<CommonDropDownPickerProps & MultiSelectPickerProps>, "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<CommonDropDownPickerProps & MultiSelectPickerProps>> & React.FC<React.PropsWithChildren<CommonDropDownPickerProps & MultiSelectPickerProps>>, {}>;
+export default _default;

package/lib/typescript/src/components/Picker/dropdown/MultiSelectPicker.js

@@ -1,9 +1,9 @@
-import * as React from "react";
-import DropDownPicker from "./DropDownPicker";
-import { withTheme } from "../../../theming";
-const MultiSelectPicker = ({ value, ...rest }) => {
-    //@ts-ignore Ignore theme type issues
-    return React.createElement(DropDownPicker, { value: value || [], ...rest });
-};
-export default withTheme(MultiSelectPicker);
+import * as React from "react";
+import DropDownPicker from "./DropDownPicker";
+import { withTheme } from "../../../theming";
+const MultiSelectPicker = ({ value, ...rest }) => {
+    //@ts-ignore Ignore theme type issues
+    return React.createElement(DropDownPicker, { value: value || [], ...rest });
+};
+export default withTheme(MultiSelectPicker);
 //# sourceMappingURL=MultiSelectPicker.js.map

package/lib/typescript/src/components/Picker/dropdown/PickerItem.d.ts

@@ -1,14 +1,14 @@
-import React from "react";
-import { StyleProp, ViewStyle, TextStyle } from "react-native";
-export interface PickerItemProps {
-    selectedTextSize?: number;
-    selectedTextColor?: string;
-    selectedBackgroundColor?: string;
-    style?: StyleProp<ViewStyle | TextStyle>;
-}
-/**
- * Renders nothing, only serves as a container for the props
- * Prop values are used by the DropDownPicker
- */
-export declare const PickerItem: React.FC<PickerItemProps>;
-export default PickerItem;
+import React from "react";
+import { StyleProp, ViewStyle, TextStyle } from "react-native";
+export interface PickerItemProps {
+    selectedTextSize?: number;
+    selectedTextColor?: string;
+    selectedBackgroundColor?: string;
+    style?: StyleProp<ViewStyle | TextStyle>;
+}
+/**
+ * Renders nothing, only serves as a container for the props
+ * Prop values are used by the DropDownPicker
+ */
+export declare const PickerItem: React.FC<PickerItemProps>;
+export default PickerItem;

package/lib/typescript/src/components/Picker/dropdown/PickerItem.js

@@ -1,9 +1,9 @@
-/**
- * Renders nothing, only serves as a container for the props
- * Prop values are used by the DropDownPicker
- */
-export const PickerItem = () => {
-    return null;
-};
-export default PickerItem;
+/**
+ * Renders nothing, only serves as a container for the props
+ * Prop values are used by the DropDownPicker
+ */
+export const PickerItem = () => {
+    return null;
+};
+export default PickerItem;
 //# sourceMappingURL=PickerItem.js.map

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

@@ -1,10 +1,10 @@
-import React from "react";
-import { CommonDropDownPickerProps, SinglePickerProps } from "./PickerCommon";
-interface PickerProps extends CommonDropDownPickerProps, SinglePickerProps {
-    mode?: "native" | "dropdown";
-}
-export declare const Picker: React.ComponentType<import("@draftbit/react-theme-provider").$Without<React.PropsWithChildren<PickerProps>, "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<PickerProps>> & React.FC<React.PropsWithChildren<PickerProps>>, {}>;
-export { default as MultiSelectPicker } from "./dropdown/MultiSelectPicker";
-export { default as PickerItem } from "./dropdown/PickerItem";
+import React from "react";
+import { CommonDropDownPickerProps, SinglePickerProps } from "./PickerCommon";
+interface PickerProps extends CommonDropDownPickerProps, SinglePickerProps {
+    mode?: "native" | "dropdown";
+}
+export declare const Picker: React.ComponentType<import("@draftbit/react-theme-provider").$Without<React.PropsWithChildren<PickerProps>, "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<PickerProps>> & React.FC<React.PropsWithChildren<PickerProps>>, {}>;
+export { default as MultiSelectPicker } from "./dropdown/MultiSelectPicker";
+export { default as PickerItem } from "./dropdown/PickerItem";

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

@@ -1,18 +1,18 @@
-import React from "react";
-import NativePicker from "./NativePicker";
-import DropDownPicker from "./dropdown/DropDownPicker";
-import { withTheme } from "../../theming";
-const SinglePicker = ({ mode = "native", ...rest }) => {
-    switch (mode) {
-        case "native":
-            //@ts-ignore Ignore theme type issues
-            return React.createElement(NativePicker, { ...rest });
-        case "dropdown":
-            //@ts-ignore
-            return React.createElement(DropDownPicker, { ...rest });
-    }
-};
-export const Picker = withTheme(SinglePicker);
-export { default as MultiSelectPicker } from "./dropdown/MultiSelectPicker";
-export { default as PickerItem } from "./dropdown/PickerItem";
+import React from "react";
+import NativePicker from "./NativePicker";
+import DropDownPicker from "./dropdown/DropDownPicker";
+import { withTheme } from "../../theming";
+const SinglePicker = ({ mode = "native", ...rest }) => {
+    switch (mode) {
+        case "native":
+            //@ts-ignore Ignore theme type issues
+            return React.createElement(NativePicker, { ...rest });
+        case "dropdown":
+            //@ts-ignore
+            return React.createElement(DropDownPicker, { ...rest });
+    }
+};
+export const Picker = withTheme(SinglePicker);
+export { default as MultiSelectPicker } from "./dropdown/MultiSelectPicker";
+export { default as PickerItem } from "./dropdown/PickerItem";
 //# sourceMappingURL=index.js.map

package/lib/typescript/src/components/PinInput/CustomPinInputCell.d.ts

@@ -1,12 +1,12 @@
-import React from "react";
-import { StyleProp, ViewStyle, LayoutChangeEvent } from "react-native";
-interface CustomPinInputCellProps {
-    style?: StyleProp<ViewStyle>;
-    onLayout: (event: LayoutChangeEvent) => void;
-}
-/**
- * Simple View wrapper component to create a custom pin input cell
- * Meant to be used in PinInput's renderItem
- */
-declare const CustomPinInputCell: React.FC<React.PropsWithChildren<CustomPinInputCellProps>>;
-export default CustomPinInputCell;
+import React from "react";
+import { StyleProp, ViewStyle, LayoutChangeEvent } from "react-native";
+interface CustomPinInputCellProps {
+    style?: StyleProp<ViewStyle>;
+    onLayout: (event: LayoutChangeEvent) => void;
+}
+/**
+ * Simple View wrapper component to create a custom pin input cell
+ * Meant to be used in PinInput's renderItem
+ */
+declare const CustomPinInputCell: React.FC<React.PropsWithChildren<CustomPinInputCellProps>>;
+export default CustomPinInputCell;

package/lib/typescript/src/components/PinInput/CustomPinInputCell.js

@@ -1,11 +1,11 @@
-import React from "react";
-import { View } from "react-native";
-/**
- * Simple View wrapper component to create a custom pin input cell
- * Meant to be used in PinInput's renderItem
- */
-const CustomPinInputCell = (props) => {
-    return React.createElement(View, { ...props });
-};
-export default CustomPinInputCell;
+import React from "react";
+import { View } from "react-native";
+/**
+ * Simple View wrapper component to create a custom pin input cell
+ * Meant to be used in PinInput's renderItem
+ */
+const CustomPinInputCell = (props) => {
+    return React.createElement(View, { ...props });
+};
+export default CustomPinInputCell;
 //# sourceMappingURL=CustomPinInputCell.js.map

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

@@ -1,26 +1,26 @@
-import React from "react";
-import { StyleProp, ViewStyle, TextStyle, TextInput as NativeTextInput } from "react-native";
-import { TextInputProps } from "../TextInput";
-import type { Theme } from "../../styles/DefaultTheme";
-interface CellItem {
-    cellValue: string;
-    index: number;
-    isFocused: boolean;
-}
-interface PinInputProps extends TextInputProps {
-    onInputFull?: (value: string) => void;
-    cellCount?: number;
-    clearOnCellFocus?: boolean;
-    blurOnFull?: boolean;
-    renderItem?: ({ cellValue, index, isFocused }: CellItem) => JSX.Element;
-    focusedBorderColor?: string;
-    focusedBackgroundColor?: string;
-    focusedBorderWidth?: number;
-    focusedTextColor?: string;
-    style?: StyleProp<ViewStyle | TextStyle>;
-    theme: Theme;
-}
-declare const _default: React.ComponentType<import("@draftbit/react-theme-provider").$Without<PinInputProps & React.RefAttributes<NativeTextInput>, "theme"> & {
-    theme?: import("@draftbit/react-theme-provider").$DeepPartial<any> | undefined;
-}> & import("@draftbit/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<React.ComponentType<PinInputProps & React.RefAttributes<NativeTextInput>> & React.ForwardRefExoticComponent<PinInputProps & React.RefAttributes<NativeTextInput>>, {}>;
-export default _default;
+import React from "react";
+import { StyleProp, ViewStyle, TextStyle, TextInput as NativeTextInput } from "react-native";
+import { TextInputProps } from "../TextInput";
+import type { Theme } from "../../styles/DefaultTheme";
+interface CellItem {
+    cellValue: string;
+    index: number;
+    isFocused: boolean;
+}
+interface PinInputProps extends TextInputProps {
+    onInputFull?: (value: string) => void;
+    cellCount?: number;
+    clearOnCellFocus?: boolean;
+    blurOnFull?: boolean;
+    renderItem?: ({ cellValue, index, isFocused }: CellItem) => JSX.Element;
+    focusedBorderColor?: string;
+    focusedBackgroundColor?: string;
+    focusedBorderWidth?: number;
+    focusedTextColor?: string;
+    style?: StyleProp<ViewStyle | TextStyle>;
+    theme: Theme;
+}
+declare const _default: React.ComponentType<import("@draftbit/react-theme-provider").$Without<PinInputProps & React.RefAttributes<NativeTextInput>, "theme"> & {
+    theme?: import("@draftbit/react-theme-provider").$DeepPartial<any> | undefined;
+}> & import("@draftbit/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<React.ComponentType<PinInputProps & React.RefAttributes<NativeTextInput>> & React.ForwardRefExoticComponent<PinInputProps & React.RefAttributes<NativeTextInput>>, {}>;
+export default _default;

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

@@ -1,81 +1,81 @@
-import React from "react";
-import { View, StyleSheet, } from "react-native";
-import TextInput from "../TextInput";
-import { CodeField, useClearByFocusCell, } from "react-native-confirmation-code-field";
-import { withTheme } from "../../theming";
-import PinInputText from "./PinInputText";
-import { extractStyles } from "../../utilities";
-const PinInput = React.forwardRef(({ theme, onInputFull, cellCount = 4, clearOnCellFocus = true, blurOnFull = true, renderItem, value, onChangeText, focusedBorderColor = theme.colors.primary, focusedBackgroundColor, focusedBorderWidth, focusedTextColor, style, ...rest }, ref) => {
-    const newPinInputRef = React.useRef(null);
-    // Use the provided ref or default to new ref when not provided
-    const pinInputRef = ref
-        ? ref
-        : newPinInputRef;
-    const { viewStyles, textStyles } = extractStyles(style);
-    // Clears input of a cell when focused, configured as explained here (https://github.com/retyui/react-native-confirmation-code-field/blob/master/API.md#useclearbyfocuscellvalue-string-setvalue-text-string--void)
-    const [codeFieldProps, getCellOnLayout] = useClearByFocusCell({
-        value,
-        setValue: (text) => onChangeText === null || onChangeText === void 0 ? void 0 : onChangeText(text),
-    });
-    React.useEffect(() => {
-        var _a;
-        if ((value === null || value === void 0 ? void 0 : value.length) === cellCount) {
-            if (blurOnFull) {
-                (_a = pinInputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
-            }
-            onInputFull === null || onInputFull === void 0 ? void 0 : onInputFull(value);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [value, cellCount, blurOnFull, pinInputRef]);
-    const renderCell = (cellValue, index, isFocused) => {
-        const cell = (renderItem === null || renderItem === void 0 ? void 0 : renderItem({ cellValue, index, isFocused })) || (React.createElement(View, { testID: "default-code-input-cell", style: [
-                styles.cell,
-                { borderColor: theme.colors.disabled },
-                viewStyles,
-                isFocused && focusedBorderWidth
-                    ? { borderWidth: focusedBorderWidth }
-                    : undefined,
-                isFocused && focusedBorderColor
-                    ? { borderColor: focusedBorderColor }
-                    : undefined,
-                isFocused && focusedBackgroundColor
-                    ? { backgroundColor: focusedBackgroundColor }
-                    : undefined,
-            ] },
-            React.createElement(PinInputText, { style: [
-                    styles.cellText,
-                    { color: theme.colors.strong },
-                    textStyles,
-                    isFocused && focusedTextColor
-                        ? { color: focusedTextColor }
-                        : undefined,
-                ], isFocused: isFocused }, cellValue)));
-        return React.cloneElement(cell, {
-            onLayout: clearOnCellFocus ? getCellOnLayout(index) : undefined,
-        });
-    };
-    return (React.createElement(CodeField, { ref: pinInputRef, ...(clearOnCellFocus ? codeFieldProps : {}), value: value, onChangeText: onChangeText, rootStyle: styles.rootContainer, textInputStyle: { height: "100%" }, InputComponent: TextInput, cellCount: cellCount, renderCell: ({ symbol: cellValue, index, isFocused }) => (React.createElement(React.Fragment, { key: index }, renderCell(cellValue, index, isFocused))), ...rest }));
-});
-const styles = StyleSheet.create({
-    rootContainer: {
-        justifyContent: "center",
-    },
-    cell: {
-        marginLeft: 5,
-        marginRight: 5,
-        padding: 5,
-        borderRadius: 5,
-        justifyContent: "center",
-        alignItems: "center",
-        aspectRatio: 1,
-        maxWidth: 70,
-        maxHeight: 70,
-        borderWidth: 1,
-        flex: 1,
-    },
-    cellText: {
-        fontSize: 25,
-    },
-});
-export default withTheme(PinInput);
+import React from "react";
+import { View, StyleSheet, } from "react-native";
+import TextInput from "../TextInput";
+import { CodeField, useClearByFocusCell, } from "react-native-confirmation-code-field";
+import { withTheme } from "../../theming";
+import PinInputText from "./PinInputText";
+import { extractStyles } from "../../utilities";
+const PinInput = React.forwardRef(({ theme, onInputFull, cellCount = 4, clearOnCellFocus = true, blurOnFull = true, renderItem, value, onChangeText, focusedBorderColor = theme.colors.primary, focusedBackgroundColor, focusedBorderWidth, focusedTextColor, style, ...rest }, ref) => {
+    const newPinInputRef = React.useRef(null);
+    // Use the provided ref or default to new ref when not provided
+    const pinInputRef = ref
+        ? ref
+        : newPinInputRef;
+    const { viewStyles, textStyles } = extractStyles(style);
+    // Clears input of a cell when focused, configured as explained here (https://github.com/retyui/react-native-confirmation-code-field/blob/master/API.md#useclearbyfocuscellvalue-string-setvalue-text-string--void)
+    const [codeFieldProps, getCellOnLayout] = useClearByFocusCell({
+        value,
+        setValue: (text) => onChangeText === null || onChangeText === void 0 ? void 0 : onChangeText(text),
+    });
+    React.useEffect(() => {
+        var _a;
+        if ((value === null || value === void 0 ? void 0 : value.length) === cellCount) {
+            if (blurOnFull) {
+                (_a = pinInputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+            }
+            onInputFull === null || onInputFull === void 0 ? void 0 : onInputFull(value);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [value, cellCount, blurOnFull, pinInputRef]);
+    const renderCell = (cellValue, index, isFocused) => {
+        const cell = (renderItem === null || renderItem === void 0 ? void 0 : renderItem({ cellValue, index, isFocused })) || (React.createElement(View, { testID: "default-code-input-cell", style: [
+                styles.cell,
+                { borderColor: theme.colors.disabled },
+                viewStyles,
+                isFocused && focusedBorderWidth
+                    ? { borderWidth: focusedBorderWidth }
+                    : undefined,
+                isFocused && focusedBorderColor
+                    ? { borderColor: focusedBorderColor }
+                    : undefined,
+                isFocused && focusedBackgroundColor
+                    ? { backgroundColor: focusedBackgroundColor }
+                    : undefined,
+            ] },
+            React.createElement(PinInputText, { style: [
+                    styles.cellText,
+                    { color: theme.colors.strong },
+                    textStyles,
+                    isFocused && focusedTextColor
+                        ? { color: focusedTextColor }
+                        : undefined,
+                ], isFocused: isFocused }, cellValue)));
+        return React.cloneElement(cell, {
+            onLayout: clearOnCellFocus ? getCellOnLayout(index) : undefined,
+        });
+    };
+    return (React.createElement(CodeField, { ref: pinInputRef, ...(clearOnCellFocus ? codeFieldProps : {}), value: value, onChangeText: onChangeText, rootStyle: styles.rootContainer, textInputStyle: { height: "100%" }, InputComponent: TextInput, cellCount: cellCount, renderCell: ({ symbol: cellValue, index, isFocused }) => (React.createElement(React.Fragment, { key: index }, renderCell(cellValue, index, isFocused))), ...rest }));
+});
+const styles = StyleSheet.create({
+    rootContainer: {
+        justifyContent: "center",
+    },
+    cell: {
+        marginLeft: 5,
+        marginRight: 5,
+        padding: 5,
+        borderRadius: 5,
+        justifyContent: "center",
+        alignItems: "center",
+        aspectRatio: 1,
+        maxWidth: 70,
+        maxHeight: 70,
+        borderWidth: 1,
+        flex: 1,
+    },
+    cellText: {
+        fontSize: 25,
+    },
+});
+export default withTheme(PinInput);
 //# sourceMappingURL=PinInput.js.map

package/lib/typescript/src/components/PinInput/PinInputText.d.ts

@@ -1,13 +1,13 @@
-import React from "react";
-import { TextProps } from "react-native";
-import type { Theme } from "../../styles/DefaultTheme";
-interface CustomPinInputTextProps extends TextProps {
-    cursorBlinkDuration?: number;
-    cursorText?: string;
-    isFocused?: boolean;
-    theme: Theme;
-}
-declare const _default: React.ComponentType<import("@draftbit/react-theme-provider").$Without<CustomPinInputTextProps, "theme"> & {
-    theme?: import("@draftbit/react-theme-provider").$DeepPartial<any> | undefined;
-}> & import("@draftbit/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<React.ComponentType<CustomPinInputTextProps> & React.FC<CustomPinInputTextProps>, {}>;
-export default _default;
+import React from "react";
+import { TextProps } from "react-native";
+import type { Theme } from "../../styles/DefaultTheme";
+interface CustomPinInputTextProps extends TextProps {
+    cursorBlinkDuration?: number;
+    cursorText?: string;
+    isFocused?: boolean;
+    theme: Theme;
+}
+declare const _default: React.ComponentType<import("@draftbit/react-theme-provider").$Without<CustomPinInputTextProps, "theme"> & {
+    theme?: import("@draftbit/react-theme-provider").$DeepPartial<any> | undefined;
+}> & import("@draftbit/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<React.ComponentType<CustomPinInputTextProps> & React.FC<CustomPinInputTextProps>, {}>;
+export default _default;

package/lib/typescript/src/components/PinInput/PinInputText.js

@@ -1,14 +1,14 @@
-import React from "react";
-import { Text } from "react-native";
-import { withTheme } from "../../theming";
-import { Cursor } from "react-native-confirmation-code-field";
-/**
- * Text component that can conditionally render a blinking cursor when focused and empty
- * Meant to be used within a CustomPinInputCell component
- */
-const CustomPinInputText = ({ isFocused, cursorBlinkDuration, cursorText, style, theme, children, ...rest }) => {
-    return (React.createElement(Text, { style: [{ color: theme.colors.strong }, style], ...rest }, children ||
-        (isFocused ? (React.createElement(Cursor, { cursorSymbol: cursorText, delay: cursorBlinkDuration })) : null)));
-};
-export default withTheme(CustomPinInputText);
+import React from "react";
+import { Text } from "react-native";
+import { withTheme } from "../../theming";
+import { Cursor } from "react-native-confirmation-code-field";
+/**
+ * Text component that can conditionally render a blinking cursor when focused and empty
+ * Meant to be used within a CustomPinInputCell component
+ */
+const CustomPinInputText = ({ isFocused, cursorBlinkDuration, cursorText, style, theme, children, ...rest }) => {
+    return (React.createElement(Text, { style: [{ color: theme.colors.strong }, style], ...rest }, children ||
+        (isFocused ? (React.createElement(Cursor, { cursorSymbol: cursorText, delay: cursorBlinkDuration })) : null)));
+};
+export default withTheme(CustomPinInputText);
 //# sourceMappingURL=PinInputText.js.map

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

@@ -1,3 +1,3 @@
-export { default as PinInput } from "./PinInput";
-export { default as CustomPinInputCell } from "./CustomPinInputCell";
-export { default as PinInputText } from "./PinInputText";
+export { default as PinInput } from "./PinInput";
+export { default as CustomPinInputCell } from "./CustomPinInputCell";
+export { default as PinInputText } from "./PinInputText";

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

@@ -1,4 +1,4 @@
-export { default as PinInput } from "./PinInput";
-export { default as CustomPinInputCell } from "./CustomPinInputCell";
-export { default as PinInputText } from "./PinInputText";
+export { default as PinInput } from "./PinInput";
+export { default as CustomPinInputCell } from "./CustomPinInputCell";
+export { default as PinInputText } from "./PinInputText";
 //# sourceMappingURL=index.js.map