sapo-components-ui-rn 1.1.54 → 1.1.55

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

@@ -1,4 +1,4 @@
 import * as React from "react";
 import type { ChildTextInputProps } from "./types";
-declare const TextInputFlat: ({ disabled, editable, label, error, selectionColor: customSelectionColor, cursorColor, underlineColor, underlineStyle, activeUnderlineColor, textColor, dense, style, theme, render, multiline, parentState, innerRef, onFocus, forceFocus, onBlur, onChangeText, onLayoutAnimatedText, onLabelTextLayout, onLeftAffixLayoutChange, onRightAffixLayoutChange, onInputLayout, left, right, prefix, suffix, placeholderTextColor, clearButton, contentStyle, scaledLabel, outlineStyle, outlineColor, value, textError, required, labelScaleValue, textErrorStyle, ...rest }: ChildTextInputProps) => React.JSX.Element;
+declare const TextInputFlat: ({ disabled, editable, label, error, selectionColor: customSelectionColor, cursorColor, underlineColor, underlineStyle, activeUnderlineColor, textColor, dense, style, theme, render, multiline, parentState, innerRef, onFocus, forceFocus, onBlur, onChangeText, onLayoutAnimatedText, onLabelTextLayout, onLeftAffixLayoutChange, onRightAffixLayoutChange, onInputLayout, left, right, prefix, suffix, placeholderTextColor, clearButton, contentStyle, scaledLabel, outlineStyle, outlineColor, value, textError, required, ...rest }: ChildTextInputProps) => React.JSX.Element;
 export default TextInputFlat;

package/dist/index.esm.js

@@ -5084,8 +5084,8 @@ var SvgIcon = function (_a) {
 };
 
 var TextInputFlat = function (_a) {
-    var _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.editable, editable = _c === void 0 ? true : _c, label = _a.label, _d = _a.error, error = _d === void 0 ? false : _d, customSelectionColor = _a.selectionColor, cursorColor = _a.cursorColor, underlineColor = _a.underlineColor; _a.underlineStyle; var activeUnderlineColor = _a.activeUnderlineColor, textColor = _a.textColor, dense = _a.dense, style = _a.style, theme = _a.theme, _e = _a.render, render = _e === void 0 ? function (props) { return React$3.createElement(TextInput$1, __assign({}, props)); } : _e, _f = _a.multiline, multiline = _f === void 0 ? false : _f, parentState = _a.parentState, innerRef = _a.innerRef, onFocus = _a.onFocus; _a.forceFocus; var onBlur = _a.onBlur, onChangeText = _a.onChangeText, onLayoutAnimatedText = _a.onLayoutAnimatedText, onLabelTextLayout = _a.onLabelTextLayout; _a.onLeftAffixLayoutChange; _a.onRightAffixLayoutChange; var onInputLayout = _a.onInputLayout, left = _a.left, right = _a.right, prefix = _a.prefix, suffix = _a.suffix, placeholderTextColor = _a.placeholderTextColor, clearButton = _a.clearButton, contentStyle = _a.contentStyle, scaledLabel = _a.scaledLabel, outlineStyle = _a.outlineStyle, outlineColor = _a.outlineColor, value = _a.value, textError = _a.textError, required = _a.required, _g = _a.labelScaleValue, labelScaleValue = _g === void 0 ? MINIMIZED_LABEL_FONT_SIZE : _g, textErrorStyle = _a.textErrorStyle, rest = __rest(_a, ["disabled", "editable", "label", "error", "selectionColor", "cursorColor", "underlineColor", "underlineStyle", "activeUnderlineColor", "textColor", "dense", "style", "theme", "render", "multiline", "parentState", "innerRef", "onFocus", "forceFocus", "onBlur", "onChangeText", "onLayoutAnimatedText", "onLabelTextLayout", "onLeftAffixLayoutChange", "onRightAffixLayoutChange", "onInputLayout", "left", "right", "prefix", "suffix", "placeholderTextColor", "clearButton", "contentStyle", "scaledLabel", "outlineStyle", "outlineColor", "value", "textError", "required", "labelScaleValue", "textErrorStyle"]);
-    var _h = React$3.useState(value || ""), inputValue = _h[0], setInputValue = _h[1];
+    var _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.editable, editable = _c === void 0 ? true : _c, label = _a.label, _d = _a.error, error = _d === void 0 ? false : _d, customSelectionColor = _a.selectionColor, cursorColor = _a.cursorColor, underlineColor = _a.underlineColor; _a.underlineStyle; var activeUnderlineColor = _a.activeUnderlineColor, textColor = _a.textColor, dense = _a.dense, style = _a.style, theme = _a.theme, _e = _a.render, render = _e === void 0 ? function (props) { return React$3.createElement(TextInput$1, __assign({}, props)); } : _e, _f = _a.multiline, multiline = _f === void 0 ? false : _f, parentState = _a.parentState, innerRef = _a.innerRef, onFocus = _a.onFocus; _a.forceFocus; var onBlur = _a.onBlur, onChangeText = _a.onChangeText, onLayoutAnimatedText = _a.onLayoutAnimatedText, onLabelTextLayout = _a.onLabelTextLayout; _a.onLeftAffixLayoutChange; _a.onRightAffixLayoutChange; var onInputLayout = _a.onInputLayout, left = _a.left, right = _a.right, prefix = _a.prefix, suffix = _a.suffix, placeholderTextColor = _a.placeholderTextColor, clearButton = _a.clearButton, contentStyle = _a.contentStyle, scaledLabel = _a.scaledLabel, outlineStyle = _a.outlineStyle, outlineColor = _a.outlineColor, value = _a.value, textError = _a.textError, required = _a.required, rest = __rest(_a, ["disabled", "editable", "label", "error", "selectionColor", "cursorColor", "underlineColor", "underlineStyle", "activeUnderlineColor", "textColor", "dense", "style", "theme", "render", "multiline", "parentState", "innerRef", "onFocus", "forceFocus", "onBlur", "onChangeText", "onLayoutAnimatedText", "onLabelTextLayout", "onLeftAffixLayoutChange", "onRightAffixLayoutChange", "onInputLayout", "left", "right", "prefix", "suffix", "placeholderTextColor", "clearButton", "contentStyle", "scaledLabel", "outlineStyle", "outlineColor", "value", "textError", "required"]);
+    var _g = React$3.useState(value || ""), inputValue = _g[0], setInputValue = _g[1];
     React$3.useEffect(function () {
         if (value === undefined) {
             setInputValue("");
@@ -5107,37 +5107,37 @@ var TextInputFlat = function (_a) {
     var roundness = theme.roundness;
     var font = theme.fonts.bodyLarge;
     var hasActiveOutline = parentState.focused || error;
-    var _j = getConstants(), LABEL_PADDING_TOP = _j.LABEL_PADDING_TOP, FLAT_INPUT_OFFSET = _j.FLAT_INPUT_OFFSET, MIN_HEIGHT = _j.MIN_HEIGHT;
-    var _k = (StyleSheet.flatten(style) || {}), fontSizeStyle = _k.fontSize, lineHeightStyle = _k.lineHeight, fontWeight = _k.fontWeight, height = _k.height, paddingHorizontal = _k.paddingHorizontal; _k.textAlign; __rest(_k, ["fontSize", "lineHeight", "fontWeight", "height", "paddingHorizontal", "textAlign"]);
+    var _h = getConstants(), LABEL_PADDING_TOP = _h.LABEL_PADDING_TOP, FLAT_INPUT_OFFSET = _h.FLAT_INPUT_OFFSET, MIN_HEIGHT = _h.MIN_HEIGHT;
+    var _j = (StyleSheet.flatten(style) || {}), fontSizeStyle = _j.fontSize, lineHeightStyle = _j.lineHeight, fontWeight = _j.fontWeight, height = _j.height, paddingHorizontal = _j.paddingHorizontal; _j.textAlign; __rest(_j, ["fontSize", "lineHeight", "fontWeight", "height", "paddingHorizontal", "textAlign"]);
     var fontSize = fontSizeStyle || MAXIMIZED_LABEL_FONT_SIZE;
     var lineHeight = lineHeightStyle || (Platform.OS === "web" ? fontSize * 1.2 : undefined);
     var isPaddingHorizontalPassed = paddingHorizontal !== undefined && typeof paddingHorizontal === "number";
     var adornmentConfig = getAdornmentConfig({
         left: left,
-        right: right
+        right: right,
     });
-    var _l = calculateFlatInputHorizontalPadding({
-        adornmentConfig: adornmentConfig
-    }), paddingLeft = _l.paddingLeft, paddingRight = _l.paddingRight;
+    var _k = calculateFlatInputHorizontalPadding({
+        adornmentConfig: adornmentConfig,
+    }), paddingLeft = _k.paddingLeft, paddingRight = _k.paddingRight;
     if (isPaddingHorizontalPassed) {
         paddingLeft = paddingHorizontal;
         paddingRight = paddingHorizontal;
     }
-    var _m = getFlatInputColors({
+    var _l = getFlatInputColors({
         underlineColor: underlineColor,
         activeUnderlineColor: activeUnderlineColor,
         customSelectionColor: customSelectionColor,
         textColor: textColor,
         disabled: disabled,
         error: error,
-        theme: theme
-    }), inputTextColor = _m.inputTextColor, activeColor = _m.activeColor, placeholderColor = _m.placeholderColor, errorColor = _m.errorColor, backgroundColor = _m.backgroundColor, selectionColor = _m.selectionColor;
+        theme: theme,
+    }), inputTextColor = _l.inputTextColor, activeColor = _l.activeColor, placeholderColor = _l.placeholderColor, errorColor = _l.errorColor, backgroundColor = _l.backgroundColor, selectionColor = _l.selectionColor;
     ({
         backgroundColor: backgroundColor,
         borderTopLeftRadius: theme.roundness,
-        borderTopRightRadius: theme.roundness
+        borderTopRightRadius: theme.roundness,
     });
-    var labelScale = labelScaleValue / fontSize;
+    var labelScale = MINIMIZED_LABEL_FONT_SIZE / fontSize;
     var fontScale = MAXIMIZED_LABEL_FONT_SIZE / fontSize;
     var labelWidth = parentState.labelLayout.width;
     var labelHeight = parentState.labelLayout.height;
@@ -5169,14 +5169,14 @@ var TextInputFlat = function (_a) {
         label: label,
         scale: fontScale,
         isAndroid: isAndroid,
-        styles: StyleSheet.flatten(dense ? styles$e.inputFlatDense : styles$e.inputFlat)
+        styles: StyleSheet.flatten(dense ? styles$e.inputFlatDense : styles$e.inputFlat),
     };
     var pad = calculatePadding(paddingSettings);
     adjustPaddingFlat(__assign(__assign({}, paddingSettings), { pad: pad }));
     var baseLabelTranslateY = -labelHalfHeight - (topPosition + MINIMIZED_LABEL_Y_OFFSET);
     var placeholderOpacityAnims = React$3.useRef([
         new Animated$1.Value(0),
-        new Animated$1.Value(1)
+        new Animated$1.Value(1),
     ]).current;
     var placeholderOpacity = hasActiveOutline
         ? parentState.labeled
@@ -5185,7 +5185,7 @@ var TextInputFlat = function (_a) {
     // Before it was done by setting placeholder's value to " ", but inputs have the same props
     // what causes broken styles due to: https://github.com/facebook/react-native/issues/48249
     var placeholderTextColorBasedOnState = parentState.displayPlaceholder
-        ? (placeholderTextColor !== null && placeholderTextColor !== void 0 ? placeholderTextColor : placeholderColor)
+        ? placeholderTextColor !== null && placeholderTextColor !== void 0 ? placeholderTextColor : placeholderColor
         : "transparent";
     var minHeight = height ||
         (dense ? (label ? MIN_DENSE_HEIGHT_WL : MIN_DENSE_HEIGHT) : MIN_HEIGHT);
@@ -5228,7 +5228,7 @@ var TextInputFlat = function (_a) {
             ? parentState.labelLayout.measured
                 ? 1
                 : 0
-            : 1
+            : 1,
     };
     var getBorderColor = function () {
         if (disabled) {
@@ -5248,7 +5248,7 @@ var TextInputFlat = function (_a) {
         var _a;
         if (parentState.focused) {
             return (React$3.createElement(View$1, { style: {
-                    paddingBottom: Platform.OS === "ios" ? 9 : 14
+                    paddingBottom: Platform.OS === "ios" ? 9 : 14,
                 } },
                 React$3.createElement(Text$1, { color: theme.colors.textSecondary }, " ",
                     suffix)));
@@ -5256,7 +5256,7 @@ var TextInputFlat = function (_a) {
         else if (parentState.value !== undefined &&
             ((_a = parentState.value) === null || _a === void 0 ? void 0 : _a.toString()) !== "") {
             return (React$3.createElement(View$1, { style: {
-                    paddingBottom: Platform.OS === "ios" ? 9 : 14
+                    paddingBottom: Platform.OS === "ios" ? 9 : 14,
                 } },
                 React$3.createElement(Text$1, { color: theme.colors.textSecondary }, " ",
                     suffix)));
@@ -5267,7 +5267,7 @@ var TextInputFlat = function (_a) {
         var _a;
         if (parentState.focused) {
             return (React$3.createElement(View$1, { style: {
-                    paddingBottom: Platform.OS === "ios" ? 9 : 14
+                    paddingBottom: Platform.OS === "ios" ? 9 : 14,
                 } },
                 React$3.createElement(Text$1, { color: theme.colors.textSecondary },
                     prefix, " ")));
@@ -5275,7 +5275,7 @@ var TextInputFlat = function (_a) {
         else if (parentState.value !== undefined &&
             ((_a = parentState.value) === null || _a === void 0 ? void 0 : _a.toString()) !== "") {
             return (React$3.createElement(View$1, { style: {
-                    paddingBottom: Platform.OS === "ios" ? 9 : 14
+                    paddingBottom: Platform.OS === "ios" ? 9 : 14,
                 } },
                 React$3.createElement(Text$1, { color: theme.colors.textSecondary },
                     prefix, " ")));
@@ -5298,17 +5298,17 @@ var TextInputFlat = function (_a) {
                 borderRadius: BORDER_RADIUS_6,
                 borderWidth: 1,
                 borderColor: getBorderColor(),
-                height: inputHeight,
+                height: 48,
                 overflow: "hidden",
                 backgroundColor: disabled
                     ? theme.colors.surfacePrimaryDisabled
-                    : theme.colors.surfacePrimaryDefault
+                    : theme.colors.surfacePrimaryDefault,
             } },
             React$3.createElement(View$1, { style: {
                     flexDirection: "row",
                     height: "100%",
                     alignItems: "center",
-                    justifyContent: "center"
+                    justifyContent: "center",
                 } },
                 left && React$3.createElement(View$1, { style: { paddingLeft: SPACE_12 } }, left),
                 left ? React$3.createElement(Spacer, { width: SPACE_8 }) : React$3.createElement(Spacer, { width: SPACE_12 })),
@@ -5317,8 +5317,8 @@ var TextInputFlat = function (_a) {
                     styles$e.labelContainer,
                     {
                         minHeight: minHeight,
-                        flex: 1
-                    }
+                        flex: 1,
+                    },
                 ] },
                 label ? (React$3.createElement(InputLabel$1, __assign({ inputValue: inputValue, labeled: parentState.labeled, error: parentState.error, focused: parentState.focused, scaledLabel: scaledLabel, wiggle: Boolean(parentState.value && labelProps.labelError), labelLayoutMeasured: parentState.labelLayout.measured, labelLayoutWidth: parentState.labelLayout.width, labelLayoutHeight: parentState.labelLayout.height, required: required }, labelProps))) : null,
                 React$3.createElement(View$1, { style: { flexDirection: "row", alignItems: "flex-end" } },
@@ -5328,70 +5328,70 @@ var TextInputFlat = function (_a) {
                         renderPrefix(), render === null || render === void 0 ? void 0 :
                     render(__assign(__assign({}, rest), { ref: innerRef, onChangeText: handleChangeText, value: inputValue, placeholder: rest.placeholder, editable: !disabled && editable, selectionColor: selectionColor, cursorColor: typeof cursorColor === "undefined" ? activeColor : cursorColor, placeholderTextColor: placeholderTextColorBasedOnState, onFocus: onFocus, onBlur: onBlur, underlineColorAndroid: "transparent", multiline: multiline, style: [
                             styles$e.input,
-                            __assign(__assign({ height: inputHeight, paddingLeft: paddingLeft, paddingRight: paddingRight, paddingTop: parentState.focused || parentState.value
+                            __assign(__assign({ paddingLeft: paddingLeft, paddingRight: paddingRight, paddingTop: parentState.focused || parentState.value
                                     ? Platform.OS === "android"
-                                        ? inputHeight / 4 + inputHeight / 8
-                                        : inputHeight / 4
+                                        ? SPACE_16
+                                        : SPACE_12
                                     : 0 }, font), { fontSize: fontSize, lineHeight: lineHeight, fontWeight: fontWeight, color: inputTextColor, textAlignVertical: multiline ? "top" : "center", marginTop: Platform.OS === "android" ? SPACE_8 : SPACE_6 }),
-                            contentStyle
+                            contentStyle,
                         ] })),
                     renderSuffix())),
             !disabled && clearButton && inputValue ? (React$3.createElement(TouchableOpacity, { onPress: handleClear, style: styles$e.clearButton },
                 React$3.createElement(SvgIcon, { name: "IconClearText", width: 24, height: 24 }))) : (React$3.createElement(Spacer, { width: SPACE_12 })),
             checkLineRightAction() && (React$3.createElement(Spacer, { width: 1, height: 24, backgroundColor: theme.colors.borderPrimaryDefault, style: {
-                    marginRight: SPACE_8
+                    marginRight: SPACE_8,
                 } })),
             React$3.createElement(View$1, { style: {
                     flexDirection: "row",
                     height: "100%",
                     alignItems: "center",
-                    justifyContent: "center"
+                    justifyContent: "center",
                 } },
                 right && !clearButton && React$3.createElement(Spacer, { width: SPACE_8 }),
                 right && (React$3.createElement(View$1, { style: {
-                        paddingRight: SPACE_12
+                        paddingRight: SPACE_12,
                     } }, right)))),
         error && (textError === null || textError === void 0 ? void 0 : textError.toString()) !== "" && (React$3.createElement(View$1, { style: styles$e.vError },
-            React$3.createElement(Text$1, { size: 12, numberOfLines: 1, color: theme.colors.textErrorDefault, style: [textErrorStyle] }, textError)))));
+            React$3.createElement(Text$1, { size: 12, numberOfLines: 1, color: theme.colors.textErrorDefault }, textError)))));
 };
 var styles$e = StyleSheet.create({
     placeholder: {
         position: "absolute",
-        left: 0
+        left: 0,
     },
     labelContainer: {
         paddingTop: 0,
-        paddingBottom: 0
+        paddingBottom: 0,
         // flex: 1,
     },
     input: {
         // margin: 0,
         flex: 1,
-        height: 48
+        height: 48,
     },
     inputFlat: {
         paddingTop: 24,
-        paddingBottom: 4
+        paddingBottom: 4,
     },
     inputFlatDense: {
         paddingTop: 22,
-        paddingBottom: 2
+        paddingBottom: 2,
     },
     patchContainer: {
         height: 24,
-        zIndex: 2
+        zIndex: 2,
     },
     densePatchContainer: {
         height: 22,
-        zIndex: 2
+        zIndex: 2,
     },
     clearButton: {
-        padding: SPACE_6
+        padding: SPACE_6,
     },
     vError: {
         paddingTop: SPACE_4,
-        paddingHorizontal: SPACE_12
-    }
+        paddingHorizontal: SPACE_12,
+    },
 });
 
 var TextInputDefault = function (_a) {