sapo-components-ui-rn 1.1.80 → 1.1.82

package/dist/components/NumberKeyboard/index.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { ViewStyle, StyleProp } from 'react-native';
 export interface NumberKeyboardProps {
     /** Giá trị hiện tại của input */
     value?: string | number;
@@ -18,6 +19,7 @@ export interface NumberKeyboardProps {
     visible: boolean;
     /** Callback khi đóng modal */
     onClose: () => void;
+    keyboardStyle?: StyleProp<ViewStyle>;
 }
 declare const _default: React.NamedExoticComponent<NumberKeyboardProps>;
 export default _default;

package/dist/components/Tag/index.d.ts

@@ -1,5 +1,5 @@
-import React from "react";
-import { StyleProp, ViewStyle, TextStyle } from "react-native";
+import React from 'react';
+import { StyleProp, ViewStyle, TextStyle } from 'react-native';
 interface TagProps {
     style?: StyleProp<ViewStyle>;
     title: string;
@@ -10,7 +10,7 @@ interface TagProps {
     leftIcon?: React.ReactNode;
     rightIcon?: React.ReactNode;
     checked?: boolean;
-    ellipsizeMode?: "head" | "middle" | "tail" | "clip";
+    ellipsizeMode?: 'head' | 'middle' | 'tail' | 'clip';
     numberOfLines?: number;
     hideRightIcon?: boolean;
     height?: number;

package/dist/components/TextInput/TextInput.d.ts

@@ -13,7 +13,7 @@ export type Props = React.ComponentPropsWithRef<typeof NativeTextInput> & {
     maxValue?: number;
     minValue?: number;
     type?: 'integer' | 'float';
-    modalStyle?: StyleProp<ViewStyle>;
+    keyboardStyle?: StyleProp<ViewStyle>;
     formatDecimal?: 1 | 2 | 3;
     required?: boolean;
     /**

package/dist/components/TextInput/TextInputNumber.d.ts

@@ -3,7 +3,7 @@ import { StyleProp, ViewStyle, TouchableOpacityProps, TextStyle } from 'react-na
 import { ThemeProp } from '../../types';
 export interface TextInputNumberProps extends TouchableOpacityProps {
     style?: StyleProp<ViewStyle>;
-    modalStyle?: StyleProp<ViewStyle>;
+    keyboardStyle?: StyleProp<ViewStyle>;
     value?: string | number;
     label?: string;
     textError?: string;
@@ -25,5 +25,5 @@ export interface TextInputNumberProps extends TouchableOpacityProps {
     textErrorStyle?: StyleProp<TextStyle>;
     height?: number;
 }
-declare const _default: React.MemoExoticComponent<({ style, value, label, textError, left, right, onChangeText, disabled, theme: themeOverrides, prefix, suffix, clearButton, maxValue, minValue, type, formatDecimal, required, labelStyle, contentStyle, textErrorStyle, height, modalStyle, ...props }: TextInputNumberProps) => React.JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ style, value, label, textError, left, right, onChangeText, disabled, theme: themeOverrides, prefix, suffix, clearButton, maxValue, minValue, type, formatDecimal, required, labelStyle, contentStyle, textErrorStyle, height, keyboardStyle, ...props }: TextInputNumberProps) => React.JSX.Element>;
 export default _default;

package/dist/index.esm.js

@@ -5413,7 +5413,7 @@ function formatShowInput(value, formatDecimal) {
     return result;
 }
 var TextInputNumber = function (_a) {
-    var style = _a.style, _b = _a.value, value = _b === void 0 ? '' : _b, _c = _a.label, label = _c === void 0 ? '' : _c, _d = _a.textError, textError = _d === void 0 ? '' : _d, left = _a.left, right = _a.right, onChangeText = _a.onChangeText, _e = _a.disabled, disabled = _e === void 0 ? false : _e; _a.theme; var _f = _a.prefix, prefix = _f === void 0 ? '' : _f, _g = _a.suffix, suffix = _g === void 0 ? '' : _g, _h = _a.clearButton, clearButton = _h === void 0 ? false : _h, _j = _a.maxValue, maxValue = _j === void 0 ? 999999999999 : _j, _k = _a.minValue, minValue = _k === void 0 ? 0 : _k, _l = _a.type, type = _l === void 0 ? 'integer' : _l, _m = _a.formatDecimal, formatDecimal = _m === void 0 ? 3 : _m, _o = _a.required, required = _o === void 0 ? false : _o, labelStyle = _a.labelStyle, contentStyle = _a.contentStyle, textErrorStyle = _a.textErrorStyle, height = _a.height, _p = _a.modalStyle, modalStyle = _p === void 0 ? {} : _p, props = __rest(_a, ["style", "value", "label", "textError", "left", "right", "onChangeText", "disabled", "theme", "prefix", "suffix", "clearButton", "maxValue", "minValue", "type", "formatDecimal", "required", "labelStyle", "contentStyle", "textErrorStyle", "height", "modalStyle"]);
+    var style = _a.style, _b = _a.value, value = _b === void 0 ? '' : _b, _c = _a.label, label = _c === void 0 ? '' : _c, _d = _a.textError, textError = _d === void 0 ? '' : _d, left = _a.left, right = _a.right, onChangeText = _a.onChangeText, _e = _a.disabled, disabled = _e === void 0 ? false : _e; _a.theme; var _f = _a.prefix, prefix = _f === void 0 ? '' : _f, _g = _a.suffix, suffix = _g === void 0 ? '' : _g, _h = _a.clearButton, clearButton = _h === void 0 ? false : _h, _j = _a.maxValue, maxValue = _j === void 0 ? 999999999999 : _j, _k = _a.minValue, minValue = _k === void 0 ? 0 : _k, _l = _a.type, type = _l === void 0 ? 'integer' : _l, _m = _a.formatDecimal, formatDecimal = _m === void 0 ? 3 : _m, _o = _a.required, required = _o === void 0 ? false : _o, labelStyle = _a.labelStyle, contentStyle = _a.contentStyle, textErrorStyle = _a.textErrorStyle, height = _a.height, _p = _a.keyboardStyle, keyboardStyle = _p === void 0 ? {} : _p, props = __rest(_a, ["style", "value", "label", "textError", "left", "right", "onChangeText", "disabled", "theme", "prefix", "suffix", "clearButton", "maxValue", "minValue", "type", "formatDecimal", "required", "labelStyle", "contentStyle", "textErrorStyle", "height", "keyboardStyle"]);
     var theme = useInternalTheme();
     var colors = theme.colors;
     var _q = useState(false), isShowModalKeyboard = _q[0], setIsShowModalKeyboard = _q[1];
@@ -5837,7 +5837,7 @@ var TextInputNumber = function (_a) {
             React__default.createElement(Text$1, { size: 14, numberOfLines: 1, color: theme.colors.textErrorDefault, style: [textErrorStyle] }, textError))),
         React__default.createElement(Modal, { visible: isShowModalKeyboard, transparent: true, animationType: "fade", onRequestClose: onCloseModalKeyboard },
             React__default.createElement(TouchableOpacity, { style: styles$c.modalOverlay, activeOpacity: 1, onPress: onCloseModalKeyboard },
-                React__default.createElement(View, { onPress: function () { }, activeOpacity: 1, backgroundColor: colors.surfacePrimaryDefault, style: [styles$c.modalContent, modalStyle] },
+                React__default.createElement(View, { onPress: function () { }, activeOpacity: 1, backgroundColor: colors.surfacePrimaryDefault, style: [styles$c.modalContent, keyboardStyle] },
                     React__default.createElement(Text$1, { style: [styles$c.modalTitle, styles$c.text18] }, label),
                     React__default.createElement(View, { width: '100%' },
                         React__default.createElement(View, { paddingHorizontal: SPACE_40 },
@@ -5976,7 +5976,7 @@ var DefaultRenderer = function (props) { return React__default.createElement(Tex
  * @extends TextInput props https://reactnative.dev/docs/textinput#props
  */
 var TextInput = forwardRef(function (_a, ref) {
-    var _b = _a.mode, mode = _b === void 0 ? 'default' : _b, _c = _a.dense, dense = _c === void 0 ? false : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.error, errorProp = _e === void 0 ? false : _e, _f = _a.multiline, multiline = _f === void 0 ? false : _f, _g = _a.editable, editable = _g === void 0 ? true : _g, contentStyle = _a.contentStyle, _h = _a.render, render = _h === void 0 ? DefaultRenderer : _h; _a.theme; var placeholderTextColor = _a.placeholderTextColor, clearButton = _a.clearButton, textError = _a.textError, prefix = _a.prefix, suffix = _a.suffix, maxValue = _a.maxValue, minValue = _a.minValue, type = _a.type, _j = _a.required, required = _j === void 0 ? false : _j, modalStyle = _a.modalStyle, rest = __rest(_a, ["mode", "dense", "disabled", "error", "multiline", "editable", "contentStyle", "render", "theme", "placeholderTextColor", "clearButton", "textError", "prefix", "suffix", "maxValue", "minValue", "type", "required", "modalStyle"]);
+    var _b = _a.mode, mode = _b === void 0 ? 'default' : _b, _c = _a.dense, dense = _c === void 0 ? false : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.error, errorProp = _e === void 0 ? false : _e, _f = _a.multiline, multiline = _f === void 0 ? false : _f, _g = _a.editable, editable = _g === void 0 ? true : _g, contentStyle = _a.contentStyle, _h = _a.render, render = _h === void 0 ? DefaultRenderer : _h; _a.theme; var placeholderTextColor = _a.placeholderTextColor, clearButton = _a.clearButton, textError = _a.textError, prefix = _a.prefix, suffix = _a.suffix, maxValue = _a.maxValue, minValue = _a.minValue, type = _a.type, _j = _a.required, required = _j === void 0 ? false : _j, keyboardStyle = _a.keyboardStyle, rest = __rest(_a, ["mode", "dense", "disabled", "error", "multiline", "editable", "contentStyle", "render", "theme", "placeholderTextColor", "clearButton", "textError", "prefix", "suffix", "maxValue", "minValue", "type", "required", "keyboardStyle"]);
     var theme = useInternalTheme();
     var isControlled = rest.value !== undefined;
     var validInputValue = isControlled ? rest.value : rest.defaultValue;
@@ -6178,7 +6178,7 @@ var TextInput = forwardRef(function (_a, ref) {
             }, onFocus: handleFocus, forceFocus: forceFocus, onBlur: handleBlur, allowFontScaling: false, onChangeText: handleChangeText, onLayoutAnimatedText: handleLayoutAnimatedText, onInputLayout: handleInputContainerLayout, onLabelTextLayout: handleLabelTextLayout, onLeftAffixLayoutChange: onLeftAffixLayoutChange, onRightAffixLayoutChange: onRightAffixLayoutChange, maxFontSizeMultiplier: maxFontSizeMultiplier, contentStyle: contentStyle, scaledLabel: scaledLabel })));
     }
     if (mode === 'number') {
-        return (React__default.createElement(TextInputNumber$1, { textError: textError, disabled: disabled, prefix: prefix, suffix: suffix, value: value, right: rest.right, left: rest.left, required: required, label: rest.label, clearButton: clearButton, onChangeText: handleChangeText, maxValue: maxValue, minValue: minValue, formatDecimal: rest.formatDecimal, type: type, modalStyle: modalStyle }));
+        return (React__default.createElement(TextInputNumber$1, { textError: textError, disabled: disabled, prefix: prefix, suffix: suffix, value: value, right: rest.right, left: rest.left, required: required, label: rest.label, clearButton: clearButton, onChangeText: handleChangeText, maxValue: maxValue, minValue: minValue, formatDecimal: rest.formatDecimal, type: type, keyboardStyle: keyboardStyle }));
     }
     return (React__default.createElement(TextInputFlat, __assign({ dense: dense, disabled: disabled, error: errorProp, textError: textError, editable: editable, prefix: prefix, suffix: suffix, clearButton: clearButton, required: required, render: render }, rest, { theme: theme, value: value, parentState: {
             labeled: labeled,
@@ -7227,36 +7227,35 @@ var SearchInput = function (_a) {
 };
 
 var Tag = function (_a) {
-    var style = _a.style, _b = _a.borderRadius, borderRadius = _b === void 0 ? CONSTANTS.BORDER_RADIUS_ROUNDED : _b, _c = _a.title, title = _c === void 0 ? "content" : _c, textStyle = _a.textStyle, onPress = _a.onPress, _d = _a.disabled, disabled = _d === void 0 ? false : _d, leftIcon = _a.leftIcon, rightIcon = _a.rightIcon, _e = _a.checked, checked = _e === void 0 ? false : _e, _f = _a.ellipsizeMode, ellipsizeMode = _f === void 0 ? "tail" : _f, _g = _a.numberOfLines, numberOfLines = _g === void 0 ? 1 : _g, _h = _a.hideRightIcon, hideRightIcon = _h === void 0 ? false : _h, _j = _a.height, height = _j === void 0 ? 32 : _j;
+    var style = _a.style, _b = _a.borderRadius, borderRadius = _b === void 0 ? CONSTANTS.BORDER_RADIUS_ROUNDED : _b, _c = _a.title, title = _c === void 0 ? 'content' : _c, textStyle = _a.textStyle, onPress = _a.onPress, _d = _a.disabled, disabled = _d === void 0 ? false : _d, leftIcon = _a.leftIcon, rightIcon = _a.rightIcon, _e = _a.checked, checked = _e === void 0 ? false : _e, _f = _a.ellipsizeMode, ellipsizeMode = _f === void 0 ? 'tail' : _f, _g = _a.numberOfLines, numberOfLines = _g === void 0 ? 1 : _g, _h = _a.hideRightIcon, hideRightIcon = _h === void 0 ? false : _h, _j = _a.height, height = _j === void 0 ? 32 : _j;
     var theme = useInternalTheme();
     var colors = theme.colors;
     var handlePressTag = useCallback(function () {
         onPress === null || onPress === void 0 ? void 0 : onPress(!checked);
     }, [checked]);
-    return (React__default.createElement(View, { row: true },
-        React__default.createElement(View, { row: true, height: height, disabled: disabled, paddingHorizontal: CONSTANTS.SPACE_12, paddingVertical: CONSTANTS.SPACE_8, borderRadius: borderRadius, center: true, style: [
-                disabled && {
-                    backgroundColor: colors.surfaceSecondaryDefault,
-                    borderColor: colors.surfaceSecondaryDefault,
-                },
-                style,
-            ], onPress: handlePressTag, backgroundColor: checked
-                ? colors.surfaceBrandInversePressed
-                : colors.surfaceBrandInverseDefault },
-            leftIcon && React__default.createElement(View, { paddingRight: CONSTANTS.SPACE_4 }, leftIcon),
-            React__default.createElement(View, null,
-                React__default.createElement(Text$1, { size: 14, numberOfLines: numberOfLines, ellipsizeMode: ellipsizeMode, style: [
-                        styles$1.textMedium,
-                        {
-                            lineHeight: 16,
-                        },
-                        disabled && {
-                            color: colors.textSecondary,
-                        },
-                        textStyle,
-                    ] }, title)),
-            rightIcon ? (React__default.createElement(View, { paddingLeft: CONSTANTS.SPACE_4 }, rightIcon)) : hideRightIcon ? (React__default.createElement(View, null)) : (React__default.createElement(View, { paddingLeft: CONSTANTS.SPACE_4 },
-                React__default.createElement(SvgIcon, { name: "IconClose", width: 20, height: 20, color: colors.iconBrandDefault }))))));
+    return (React__default.createElement(View, { row: true, height: height, disabled: disabled, paddingHorizontal: CONSTANTS.SPACE_12, paddingVertical: CONSTANTS.SPACE_8, borderRadius: borderRadius, center: true, style: [
+            disabled && {
+                backgroundColor: colors.surfaceSecondaryDefault,
+                borderColor: colors.surfaceSecondaryDefault,
+            },
+            style,
+        ], onPress: handlePressTag, backgroundColor: checked
+            ? colors.surfaceBrandInversePressed
+            : colors.surfaceBrandInverseDefault },
+        leftIcon && React__default.createElement(View, { paddingRight: CONSTANTS.SPACE_4 }, leftIcon),
+        React__default.createElement(View, { paddingHorizontal: CONSTANTS.SPACE_4 },
+            React__default.createElement(Text$1, { size: 14, numberOfLines: numberOfLines, ellipsizeMode: ellipsizeMode, style: [
+                    styles$1.textMedium,
+                    {
+                        lineHeight: 16,
+                    },
+                    disabled && {
+                        color: colors.textSecondary,
+                    },
+                    textStyle,
+                ] }, title)),
+        rightIcon ? (React__default.createElement(View, { paddingLeft: CONSTANTS.SPACE_4 }, rightIcon)) : hideRightIcon ? (React__default.createElement(View, null)) : (React__default.createElement(View, { paddingLeft: CONSTANTS.SPACE_4 },
+            React__default.createElement(SvgIcon, { name: 'IconClose', width: 20, height: 20, color: colors.iconBrandDefault })))));
 };
 var styles$1 = StyleSheet.create(__assign({}, containerStyles));
 
@@ -7281,7 +7280,7 @@ var formatNumberInput = function (value, formatDecimal) {
     return result;
 };
 var NumberKeyboard = function (_a) {
-    var _b = _a.value, value = _b === void 0 ? '' : _b, _c = _a.label, label = _c === void 0 ? '' : _c, onChangeText = _a.onChangeText, _d = _a.maxValue, maxValue = _d === void 0 ? 999999999999 : _d, _e = _a.minValue, minValue = _e === void 0 ? 0 : _e, _f = _a.type, type = _f === void 0 ? 'integer' : _f, _g = _a.formatDecimal, formatDecimal = _g === void 0 ? 3 : _g, visible = _a.visible, onClose = _a.onClose;
+    var _b = _a.value, value = _b === void 0 ? '' : _b, _c = _a.label, label = _c === void 0 ? '' : _c, onChangeText = _a.onChangeText, _d = _a.maxValue, maxValue = _d === void 0 ? 999999999999 : _d, _e = _a.minValue, minValue = _e === void 0 ? 0 : _e, _f = _a.type, type = _f === void 0 ? 'integer' : _f, _g = _a.formatDecimal, formatDecimal = _g === void 0 ? 3 : _g, visible = _a.visible, onClose = _a.onClose, keyboardStyle = _a.keyboardStyle;
     var theme = useInternalTheme();
     var colors = theme.colors;
     var _h = useState((value === null || value === void 0 ? void 0 : value.toString()) || ''), inputValue = _h[0], setInputValue = _h[1];
@@ -7587,7 +7586,7 @@ var NumberKeyboard = function (_a) {
     }, [onClose, value]);
     return (React__default.createElement(Modal, { visible: visible, transparent: true, animationType: "fade", onRequestClose: handleClose },
         React__default.createElement(TouchableOpacity, { style: styles.modalOverlay, activeOpacity: 1, onPress: handleClose },
-            React__default.createElement(View, { onPress: function () { }, activeOpacity: 1, backgroundColor: colors.surfacePrimaryDefault, style: styles.modalContent },
+            React__default.createElement(View, { onPress: function () { }, activeOpacity: 1, backgroundColor: colors.surfacePrimaryDefault, style: [styles.modalContent, keyboardStyle] },
                 React__default.createElement(Text$1, { style: [styles.text18, styles.modalTitle] }, label),
                 React__default.createElement(View, { width: '100%' },
                     React__default.createElement(View, { paddingHorizontal: SPACE_40 },