dhre-ui-kit 0.0.190 → 0.0.192

package/lib/index.d.ts

@@ -629,6 +629,8 @@ interface CustomDropdownProps {
     itemTextStyle?: TextStyle;
     onValueChange?: (value: string) => void;
     itemContainerStyle?: ViewStyle;
+    keepPlaceholderOnFocus?: boolean;
+    selectedItemTextStyle?: TextStyle;
     menuContainerStyle?: ViewStyle;
     activeColor?: string;
     renderRightIcon?: (visible?: boolean) => JSX.Element | null | undefined;
@@ -704,7 +706,8 @@ interface IProps$1 {
     mode?: 'light' | 'dark';
 }
 type OTPInputHandle = {
-    reset: () => void;
+    reset?: () => void;
+    set?: (newOtp: string) => void;
 };
 
 declare const _default$4: (props: IProps$1 & React$1.RefAttributes<OTPInputHandle>) => React$1.JSX.Element;
@@ -733,6 +736,8 @@ interface CustomSlideButtonProps {
     textStyle?: TextStyle;
     containerStyle?: ViewStyle;
     sliderStyle?: ViewStyle;
+    slideButtonTail?: boolean;
+    slideButtonTailColor?: string;
 }
 
 declare const _default$2: (props: CustomSlideButtonProps) => React$1.JSX.Element;

package/lib/index.js

@@ -3418,7 +3418,9 @@ const CustomDropdown = (props) => {
     onValueChange,
     itemContainerStyle,
     menuContainerStyle,
-    activeColor
+    activeColor,
+    keepPlaceholderOnFocus = false,
+    selectedItemTextStyle
   } = props;
   const [value, setValue] = React.useState(defaultValue);
   const [isFocus, setIsFocus] = React.useState(false);
@@ -3446,6 +3448,22 @@ const CustomDropdown = (props) => {
       onValueChange(newValue);
     }
   };
+  const renderItem = (item) => {
+    const isSelected = item[valueField] === value;
+    return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$7.itemContainer, itemContainerStyle] }, /* @__PURE__ */ React__default["default"].createElement(
+      reactNative.Text,
+      {
+        style: [
+          styles$7.itemText,
+          itemTextStyle,
+          // Apply itemTextStyle to all items
+          isSelected && selectedItemTextStyle
+          // Apply selectedItemTextStyle to the selected item
+        ]
+      },
+      item[labelField]
+    ));
+  };
   return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$7.container, containerStyle] }, label && renderLabel(), /* @__PURE__ */ React__default["default"].createElement(
     reactNativeElementDropdown.Dropdown,
     {
@@ -3461,13 +3479,14 @@ const CustomDropdown = (props) => {
       data: data ?? [],
       labelField,
       valueField,
-      placeholder: !isFocus ? placeholder : "",
+      placeholder: keepPlaceholderOnFocus || !isFocus ? placeholder : "",
       value,
       onFocus: () => setIsFocus(true),
       onBlur: () => setIsFocus(false),
       onChange: handleValueChange,
       iconColor,
       dropdownPosition: "bottom",
+      renderItem,
       itemTextStyle,
       containerStyle: menuContainerStyle,
       activeColor,
@@ -3510,6 +3529,13 @@ const styles$7 = reactNative.StyleSheet.create({
   },
   itemListStyle: {
     maxHeight: verticalScale(150)
+  },
+  itemContainer: {
+    paddingVertical: verticalScale(8),
+    paddingHorizontal: horizontalScale(12)
+  },
+  itemText: {
+    fontSize: verticalScale(14)
   }
 });
 
@@ -3892,6 +3918,11 @@ const OTPInput = React__default["default"].forwardRef(
     React__default["default"].useImperativeHandle(ref, () => ({
       reset() {
         setOTP("");
+        refs.current[0]?.focus();
+      },
+      set(newOtp) {
+        setOTP(newOtp);
+        refs.current[newOtp?.length - 1]?.focus();
       }
     }));
     const handleChange = (index, value) => {
@@ -3904,6 +3935,9 @@ const OTPInput = React__default["default"].forwardRef(
         const newOTP = otp.slice(0, -1);
         setOTP(newOTP);
         refs.current[index - 1]?.focus();
+      } else if (value?.length === length) {
+        setOTP(value);
+        refs.current[length - 1]?.focus();
       } else {
         const newOTP = otp.slice(0, -1);
         setOTP(newOTP);
@@ -3950,6 +3984,9 @@ const OTPInput = React__default["default"].forwardRef(
         keyboardType: "numeric",
         ref: (el) => refs.current[index] = el,
         returnKeyType: otp.length === length ? "done" : "next",
+        importantForAutofill: "yes",
+        textContentType: "oneTimeCode",
+        autoComplete: "sms-otp",
         selectionColor: theme$1.CONTENT_PRIMARY
       }
     ))), /* @__PURE__ */ React__default["default"].createElement(
@@ -4192,11 +4229,17 @@ const CustomSlideButton = ({
   textStyle,
   containerStyle,
   sliderStyle,
-  size = BUTTON_WIDTH
+  size = BUTTON_WIDTH,
+  slideButtonTail,
+  slideButtonTailColor = "#fff"
 }) => {
   const value = React.useRef(0);
   const cardRef = React.useRef(null);
   const pan = React.useRef(new reactNative.Animated.Value(0)).current;
+  const slideTailCardRef = React.useRef(null);
+  slideTailCardRef?.current?.setNativeProps({
+    style: { width: 0 }
+  });
   const handleLayout = (event) => {
     const { width } = event.nativeEvent.layout;
     if (cardRef.current) {
@@ -4217,6 +4260,9 @@ const CustomSlideButton = ({
       onPanResponderMove: (evt, gestureState) => {
         if (gestureState.dx < value.current - BUTTON_WIDTH) {
           pan.setValue(gestureState.dx);
+          slideTailCardRef?.current?.setNativeProps({
+            style: { width: gestureState.dx + BUTTON_WIDTH / 2 }
+          });
         }
       },
       onPanResponderRelease: (evt, gestureState) => {
@@ -4226,11 +4272,18 @@ const CustomSlideButton = ({
             toValue: value.current - BUTTON_WIDTH - 10,
             useNativeDriver: false
           }).start();
+          slideTailCardRef?.current?.setNativeProps({
+            style: { width: value.current + BUTTON_WIDTH }
+            // Change the width here
+          });
         } else {
           reactNative.Animated.spring(pan, {
             toValue: 0,
             useNativeDriver: false
           }).start();
+          slideTailCardRef?.current?.setNativeProps({
+            style: { width: 0 }
+          });
         }
       }
     })
@@ -4240,7 +4293,13 @@ const CustomSlideButton = ({
     ...styles$2.sliderContainer,
     backgroundColor: theme.SURFACE_INVERTED,
     ...containerStyle
-  }, onLayout: handleLayout, ref: cardRef }, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$2.buttonTextContainer }, /* @__PURE__ */ React__default["default"].createElement(
+  }, onLayout: handleLayout, ref: cardRef }, slideButtonTail && /* @__PURE__ */ React__default["default"].createElement(
+    reactNative.Animated.View,
+    {
+      ref: slideTailCardRef,
+      style: [{ height: "100%", backgroundColor: slideButtonTailColor }]
+    }
+  ), /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$2.buttonTextContainer }, /* @__PURE__ */ React__default["default"].createElement(
     CustomTypography,
     {
       text: label,