@wavemaker/app-rn-runtime 11.15.4-rc.250 → 11.15.5-1.256

package/components/input/text/text.component.js

@@ -1,6 +1,6 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import React from 'react';
-import { Platform } from 'react-native';
+import { Platform, View, Text } from 'react-native';
 import WmTextProps from './text.props';
 import { DEFAULT_CLASS } from './text.styles';
 import { WMTextInput } from '@wavemaker/app-rn-runtime/core/components/textinput.component';
@@ -8,6 +8,7 @@ import { BaseInputComponent, BaseInputState } from "@wavemaker/app-rn-runtime/co
 import { isNull } from 'lodash';
 import { AccessibilityWidgetType, getAccessibilityProps } from '@wavemaker/app-rn-runtime/core/accessibility';
 import { createSkeleton } from '@wavemaker/app-rn-runtime/components/basic/skeleton/skeleton.component';
+import WmIcon from '@wavemaker/app-rn-runtime/components/basic/icon/icon.component';
 export class WmTextState extends BaseInputState {}
 export default class WmText extends BaseInputComponent {
   constructor(props) {
@@ -41,14 +42,28 @@ export default class WmText extends BaseInputComponent {
       height: skeletonHeight
     });
   }
+  leadingIconClick() {
+    this.invokeEventCallback('onLeadingiconclick', [this.proxy]);
+  }
+  trailingIconClick() {
+    this.invokeEventCallback('onTrailingiconclick', [this.proxy]);
+  }
   renderWidget(props) {
-    var _this$state$textValue, _this$theme$getStyle, _this$theme$getStyle2;
+    var _this$state$textValue, _ref, _mergedRoot$padding, _mergedRoot$height, _this$theme$getStyle, _this$theme$getStyle2;
     let opts = {};
     const valueExpr = Platform.OS === 'web' ? 'value' : 'defaultValue';
     const foundationStyle = this.theme.getStyle('app-input');
     const classname = this.state.props.classname ? this.state.props.classname.split(" ").pop() : '';
     opts[valueExpr] = ((_this$state$textValue = this.state.textValue) === null || _this$state$textValue === void 0 ? void 0 : _this$state$textValue.toString()) || '';
-    return /*#__PURE__*/React.createElement(WMTextInput, _extends({}, this.getTestPropsForInput(), getAccessibilityProps(AccessibilityWidgetType.TEXT, props), {
+    const hasLeading = !!props.leadingiconclass;
+    const hasTrailing = !!props.trailingiconclass;
+    const mergedRoot = this.theme.mergeStyle(this.styles.root, foundationStyle === null || foundationStyle === void 0 ? void 0 : foundationStyle.root, Platform.OS === 'web' ? this.styles.inputWeb : null);
+    const basePadding = (_ref = (_mergedRoot$padding = mergedRoot === null || mergedRoot === void 0 ? void 0 : mergedRoot.padding) !== null && _mergedRoot$padding !== void 0 ? _mergedRoot$padding : mergedRoot === null || mergedRoot === void 0 ? void 0 : mergedRoot.paddingLeft) !== null && _ref !== void 0 ? _ref : 16;
+    const hassupportingtext = !!props.hint;
+    const inputHeight = (_mergedRoot$height = mergedRoot.height) !== null && _mergedRoot$height !== void 0 ? _mergedRoot$height : mergedRoot.minHeight;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, {
+      style: this.styles.inputContainer
+    }, /*#__PURE__*/React.createElement(WMTextInput, _extends({}, this.getTestPropsForInput(), getAccessibilityProps(AccessibilityWidgetType.TEXT, props), {
       ref: ref => {
         this.widgetRef = ref;
         // @ts-ignore
@@ -59,12 +74,17 @@ export default class WmText extends BaseInputComponent {
       }
     }, opts, {
       floatingLabel: props.floatinglabel,
-      floatingLabelStyle: this.styles.floatingLabel,
-      activeFloatingLabelStyle: this.theme.mergeStyle((_this$theme$getStyle = this.theme.getStyle('app-text-with-label')) === null || _this$theme$getStyle === void 0 ? void 0 : _this$theme$getStyle.activeFloatingLabel, (_this$theme$getStyle2 = this.theme.getStyle(`${classname}`)) === null || _this$theme$getStyle2 === void 0 ? void 0 : _this$theme$getStyle2.focused, this.styles.activeFloatingLabel ? this.styles.activeFloatingLabel : {}),
-      inactiveFloatingLabelStyle: this.styles.inactiveFloatingLabel,
+      inputheight: typeof inputHeight === 'number' ? inputHeight : undefined,
+      floatingLabelStyle: {
+        ...this.styles.floatingLabel
+      },
+      activeFloatingLabelStyle: this.theme.mergeStyle(this.styles.activeFloatingLabel, (_this$theme$getStyle = this.theme.getStyle('app-text-with-label')) === null || _this$theme$getStyle === void 0 ? void 0 : _this$theme$getStyle.activeFloatingLabel, (_this$theme$getStyle2 = this.theme.getStyle(`${classname}`)) === null || _this$theme$getStyle2 === void 0 ? void 0 : _this$theme$getStyle2.focused),
+      variant: props.variant,
+      labelBackground: props.variant != 'filled' ? mergedRoot === null || mergedRoot === void 0 ? void 0 : mergedRoot.backgroundColor : undefined,
       placeholderTextColor: this.styles.placeholderText.color,
       isInputFocused: this.state.isInputFocused,
-      style: [this.theme.mergeStyle(this.styles.root, foundationStyle === null || foundationStyle === void 0 ? void 0 : foundationStyle.root), this.theme.mergeStyle(this.styles.text, foundationStyle === null || foundationStyle === void 0 ? void 0 : foundationStyle.text, this.theme.getStyle(`${classname}`)), this.state.isValid ? {} : this.theme.mergeStyle(this.styles.invalid, foundationStyle === null || foundationStyle === void 0 ? void 0 : foundationStyle.invalid), this.state.isInputFocused ? this.theme.mergeStyle(this.styles.focused, foundationStyle === null || foundationStyle === void 0 ? void 0 : foundationStyle.focused, this.theme.getStyle(`${classname}`).focused) : {}, this.state.props.disabled ? this.theme.mergeStyle(foundationStyle === null || foundationStyle === void 0 ? void 0 : foundationStyle.disabled, this.theme.getStyle(`${classname}`).disabled) : {}],
+      style: [this.theme.mergeStyle(this.styles.root, foundationStyle === null || foundationStyle === void 0 ? void 0 : foundationStyle.root), this.theme.mergeStyle(this.styles.text, foundationStyle === null || foundationStyle === void 0 ? void 0 : foundationStyle.text, this.theme.getStyle(`${classname}`)), this.state.isValid ? {} : this.theme.mergeStyle(this.styles.invalid, foundationStyle === null || foundationStyle === void 0 ? void 0 : foundationStyle.invalid), this.state.isInputFocused ? this.theme.mergeStyle(this.styles.root, this.styles.focused, foundationStyle === null || foundationStyle === void 0 ? void 0 : foundationStyle.focused, this.theme.getStyle(`${classname}`).focused) : {}, this.state.props.disabled ? this.theme.mergeStyle(this.styles.root, foundationStyle === null || foundationStyle === void 0 ? void 0 : foundationStyle.disabled, this.theme.getStyle(`${classname}`).disabled) : {}, hasLeading ? this.styles.inputWithLeadingIcon : {}, hasTrailing ? this.styles.inputWithTrailingIcon : {}, Platform.OS === 'web' ? this.styles.inputWeb : null //added to override the bordercolor getting applied only in web.
+      ],
       keyboardType: this.state.keyboardType,
       autoComplete: props.autocomplete === "true" ? "username" : props.autocomplete === "false" ? "off" : props.autocomplete,
       autoFocus: props.autofocus,
@@ -78,13 +98,37 @@ export default class WmText extends BaseInputComponent {
       onBlur: this.onBlur.bind(this),
       onFocus: this.onFocus.bind(this),
       onKeyPress: this.onKeyPress.bind(this),
-      onSubmitEditing: this.onSubmitEditing.bind(this),
       onChangeText: this.onChangeText.bind(this),
       onChange: this.invokeChange.bind(this),
       allowContentSelection: this.styles.text.userSelect === 'text',
       autoCapitalize: props.autocapitalize,
-      handleLayout: this.handleLayout
-    }));
+      handleLayout: this.handleLayout,
+      leadingiconclass: props.leadingiconclass
+    })), hasLeading && /*#__PURE__*/React.createElement(View, {
+      style: [this.styles.iconWrapper, {
+        left: basePadding
+      }],
+      pointerEvents: "none"
+    }, /*#__PURE__*/React.createElement(WmIcon, {
+      id: this.getTestId('leading-icon'),
+      name: `${props.name}_leading_icon`,
+      iconclass: props.leadingiconclass,
+      styles: this.styles.leadingIcon,
+      accessible: true,
+      onTap: this.leadingIconClick.bind(this)
+    })), hasTrailing && /*#__PURE__*/React.createElement(View, {
+      style: this.theme.mergeStyle(this.styles.iconWrapper, {
+        right: basePadding
+      }),
+      pointerEvents: "none"
+    }, /*#__PURE__*/React.createElement(WmIcon, {
+      id: this.getTestId('trailing-icon'),
+      name: `${props.name}_trailing_icon`,
+      iconclass: props.trailingiconclass,
+      styles: this.styles.trailingIcon,
+      accessible: true,
+      onTap: this.trailingIconClick.bind(this)
+    }))), hassupportingtext && /*#__PURE__*/React.createElement(Text, null, props.hint));
   }
 }
 //# sourceMappingURL=text.component.js.map

package/components/input/text/text.component.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Platform","WmTextProps","DEFAULT_CLASS","WMTextInput","BaseInputComponent","BaseInputState","isNull","AccessibilityWidgetType","getAccessibilityProps","createSkeleton","WmTextState","WmText","constructor","props","getStyleClassName","classes","state","floatinglabel","push","join","renderSkeleton","skeletonWidth","skeletonHeight","skeletonwidth","_this$styles$root","styles","root","width","skeletonheight","_this$styles$root2","height","theme","skeleton","renderWidget","_this$state$textValue","_this$theme$getStyle","_this$theme$getStyle2","opts","valueExpr","OS","foundationStyle","getStyle","classname","split","pop","textValue","toString","createElement","_extends","getTestPropsForInput","TEXT","ref","widgetRef","selectionStart","selectionEnd","cursor","floatingLabel","floatingLabelStyle","activeFloatingLabelStyle","mergeStyle","activeFloatingLabel","focused","inactiveFloatingLabelStyle","inactiveFloatingLabel","placeholderTextColor","placeholderText","color","isInputFocused","style","text","isValid","invalid","disabled","keyboardType","autoComplete","autocomplete","autoFocus","autofocus","editable","readonly","secureTextEntry","type","maskchar","displayformat","background","_background","maxLength","maxchars","placeholder","onBlur","bind","onFocus","onKeyPress","onSubmitEditing","onChangeText","onChange","invokeChange","allowContentSelection","userSelect","autoCapitalize","autocapitalize","handleLayout"],"sources":["text.component.tsx"],"sourcesContent":["import React from 'react';\nimport { DimensionValue, Platform } from 'react-native';\n\nimport WmTextProps from './text.props';\nimport { DEFAULT_CLASS, WmTextStyles } from './text.styles';\nimport { WMTextInput } from '@wavemaker/app-rn-runtime/core/components/textinput.component';\nimport { BaseInputComponent, BaseInputState } from \"@wavemaker/app-rn-runtime/components/input/baseinput/baseinput.component\";\nimport { isNull } from 'lodash';\nimport { AccessibilityWidgetType, getAccessibilityProps } from '@wavemaker/app-rn-runtime/core/accessibility';\nimport { createSkeleton } from '@wavemaker/app-rn-runtime/components/basic/skeleton/skeleton.component';\n\nexport class WmTextState extends BaseInputState<WmTextProps> {\n}\n\nexport default class WmText extends BaseInputComponent<WmTextProps, WmTextState, WmTextStyles> {\n\n  constructor(props: WmTextProps) {\n    super(props, DEFAULT_CLASS, new WmTextProps(), new WmTextState());\n  }\n\n  public getStyleClassName(): string | undefined {\n    const classes = [];\n    if (this.state.props.floatinglabel) {\n      classes.push('app-text-with-label');\n    }\n    classes.push(super.getStyleClassName());\n    return classes.join(' ');\n  }\n\n  public renderSkeleton(props: WmTextProps): React.ReactNode {\n    let skeletonWidth, skeletonHeight;\n\n    if(this.props.skeletonwidth == \"0\") {\n      skeletonWidth = 0\n    } else {\n      skeletonWidth = this.props.skeletonwidth || this.styles.root?.width\n    }\n\n    if(this.props.skeletonheight == \"0\") {\n      skeletonHeight = 0\n    } else {\n      skeletonHeight = this.props.skeletonheight || this.styles.root?.height;\n    }\n\n    return createSkeleton(this.theme, this.styles.skeleton, {\n      ...this.styles.root,\n      width: skeletonWidth as DimensionValue,\n      height: skeletonHeight as DimensionValue\n    })\n  }\n\n  renderWidget(props: WmTextProps) {\n    let opts: any = {};\n    const valueExpr = Platform.OS === 'web' ? 'value' : 'defaultValue';\n    const foundationStyle = this.theme.getStyle('app-input');\n    const classname = this.state.props.classname ? this.state.props.classname.split(\" \").pop() : '';\n    opts[valueExpr] = this.state.textValue?.toString() || '';\n    return (\n        <WMTextInput\n          {...this.getTestPropsForInput()}\n          {...getAccessibilityProps(\n            AccessibilityWidgetType.TEXT,\n            props\n          )}\n          ref={(ref: any) => {this.widgetRef = ref;\n            // @ts-ignore\n          if (ref && !isNull(ref.selectionStart) && !isNull(ref.selectionEnd)) {\n            // @ts-ignore\n            ref.selectionStart = ref.selectionEnd = this.cursor;\n          }}}\n          {...opts}\n          floatingLabel={props.floatinglabel}\n          floatingLabelStyle={this.styles.floatingLabel}\n          activeFloatingLabelStyle={this.theme.mergeStyle(\n            this.theme.getStyle('app-text-with-label')?.activeFloatingLabel,\n            this.theme.getStyle(`${classname}`)?.focused,\n            this.styles.activeFloatingLabel ? this.styles.activeFloatingLabel : {} \n          )}\n          inactiveFloatingLabelStyle={this.styles.inactiveFloatingLabel}\n          placeholderTextColor={this.styles.placeholderText.color as any}\n          isInputFocused={ this.state.isInputFocused }\n          style={[this.theme.mergeStyle(this.styles.root, foundationStyle?.root),\n            this.theme.mergeStyle(this.styles.text, foundationStyle?.text, this.theme.getStyle(`${classname}`)),\n            this.state.isValid ? {} : this.theme.mergeStyle(this.styles.invalid, foundationStyle?.invalid),\n            this.state.isInputFocused ? this.theme.mergeStyle(this.styles.focused, foundationStyle?.focused, this.theme.getStyle(`${classname}`).focused) : {},\n            this.state.props.disabled ? this.theme.mergeStyle(foundationStyle?.disabled, this.theme.getStyle(`${classname}`).disabled) : {}]}\n          keyboardType={this.state.keyboardType}\n          autoComplete={props.autocomplete === \"true\" ? \"username\" : props.autocomplete === \"false\" ? \"off\" : props.autocomplete}\n          autoFocus={props.autofocus}\n          editable={props.disabled || props.readonly ? false : true}\n          secureTextEntry={props.type === 'password' && !props.maskchar ? true : false}\n          displayformat={props.displayformat}\n          background={this._background}\n          maskchar={props.maskchar}\n          maxLength={props.maxchars}\n          placeholder={props.placeholder}\n          onBlur={this.onBlur.bind(this)}\n          onFocus={this.onFocus.bind(this)}\n          onKeyPress={this.onKeyPress.bind(this)}\n          onSubmitEditing={this.onSubmitEditing.bind(this)}\n          onChangeText={this.onChangeText.bind(this)}\n          onChange={this.invokeChange.bind(this)}\n          allowContentSelection={this.styles.text.userSelect === 'text'}\n          autoCapitalize={props.autocapitalize}\n          handleLayout={this.handleLayout}\n        />\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","Platform","View","Text","WmTextProps","DEFAULT_CLASS","WMTextInput","BaseInputComponent","BaseInputState","isNull","AccessibilityWidgetType","getAccessibilityProps","createSkeleton","WmIcon","WmTextState","WmText","constructor","props","getStyleClassName","classes","state","floatinglabel","push","join","renderSkeleton","skeletonWidth","skeletonHeight","skeletonwidth","_this$styles$root","styles","root","width","skeletonheight","_this$styles$root2","height","theme","skeleton","leadingIconClick","invokeEventCallback","proxy","trailingIconClick","renderWidget","_this$state$textValue","_ref","_mergedRoot$padding","_mergedRoot$height","_this$theme$getStyle","_this$theme$getStyle2","opts","valueExpr","OS","foundationStyle","getStyle","classname","split","pop","textValue","toString","hasLeading","leadingiconclass","hasTrailing","trailingiconclass","mergedRoot","mergeStyle","inputWeb","basePadding","padding","paddingLeft","hassupportingtext","hint","inputHeight","minHeight","createElement","Fragment","style","inputContainer","_extends","getTestPropsForInput","TEXT","ref","widgetRef","selectionStart","selectionEnd","cursor","floatingLabel","inputheight","undefined","floatingLabelStyle","activeFloatingLabelStyle","activeFloatingLabel","focused","variant","labelBackground","backgroundColor","placeholderTextColor","placeholderText","color","isInputFocused","text","isValid","invalid","disabled","inputWithLeadingIcon","inputWithTrailingIcon","keyboardType","autoComplete","autocomplete","autoFocus","autofocus","editable","readonly","secureTextEntry","type","maskchar","displayformat","background","_background","maxLength","maxchars","placeholder","onBlur","bind","onFocus","onKeyPress","onChangeText","onChange","invokeChange","allowContentSelection","userSelect","autoCapitalize","autocapitalize","handleLayout","iconWrapper","left","pointerEvents","id","getTestId","name","iconclass","leadingIcon","accessible","onTap","right","trailingIcon"],"sources":["text.component.tsx"],"sourcesContent":["import React from 'react';\nimport { DimensionValue, Platform, View, Text } from 'react-native';\n\nimport WmTextProps from './text.props';\nimport { DEFAULT_CLASS, WmTextStyles } from './text.styles';\nimport { WMTextInput } from '@wavemaker/app-rn-runtime/core/components/textinput.component';\nimport { BaseInputComponent, BaseInputState } from \"@wavemaker/app-rn-runtime/components/input/baseinput/baseinput.component\";\nimport { isNull } from 'lodash';\nimport { AccessibilityWidgetType, getAccessibilityProps } from '@wavemaker/app-rn-runtime/core/accessibility';\nimport { createSkeleton } from '@wavemaker/app-rn-runtime/components/basic/skeleton/skeleton.component';\nimport WmIcon from '@wavemaker/app-rn-runtime/components/basic/icon/icon.component';\n\nexport class WmTextState extends BaseInputState<WmTextProps> {\n}\n\nexport default class WmText extends BaseInputComponent<WmTextProps, WmTextState, WmTextStyles> {\n\n  constructor(props: WmTextProps) {\n    super(props, DEFAULT_CLASS, new WmTextProps(), new WmTextState());\n  }\n\n  public getStyleClassName(): string | undefined {\n    const classes = [];\n    if (this.state.props.floatinglabel) {\n        classes.push('app-text-with-label');\n    }\n    classes.push(super.getStyleClassName());\n    return classes.join(' ');\n  }\n\n  public renderSkeleton(props: WmTextProps): React.ReactNode {\n    let skeletonWidth, skeletonHeight;\n\n    if(this.props.skeletonwidth == \"0\") {\n      skeletonWidth = 0\n    } else {\n      skeletonWidth = this.props.skeletonwidth || this.styles.root?.width\n    }\n\n    if(this.props.skeletonheight == \"0\") {\n      skeletonHeight = 0\n    } else {\n      skeletonHeight = this.props.skeletonheight || this.styles.root?.height;\n    }\n\n    return createSkeleton(this.theme, this.styles.skeleton, {\n      ...this.styles.root,\n      width: skeletonWidth as DimensionValue,\n      height: skeletonHeight as DimensionValue\n    })\n  }\n\n  private leadingIconClick() {\n    this.invokeEventCallback('onLeadingiconclick', [this.proxy]);\n  }\n\n  private trailingIconClick() {\n    this.invokeEventCallback('onTrailingiconclick', [this.proxy]);\n  }\n\n  renderWidget(props: WmTextProps) {\n    let opts: any = {};\n    const valueExpr = Platform.OS === 'web' ? 'value' : 'defaultValue';\n    const foundationStyle = this.theme.getStyle('app-input');\n    const classname = this.state.props.classname ? this.state.props.classname.split(\" \").pop() : '';\n    opts[valueExpr] = this.state.textValue?.toString() || '';\n\n    const hasLeading = !!props.leadingiconclass;\n    const hasTrailing = !!props.trailingiconclass;\n\n    const mergedRoot = this.theme.mergeStyle(this.styles.root, foundationStyle?.root,  Platform.OS === 'web' ? this.styles.inputWeb : null);\n    const basePadding = mergedRoot?.padding ?? mergedRoot?.paddingLeft ?? 16;\n    const hassupportingtext = !!(props.hint);\n    const inputHeight = mergedRoot.height ?? mergedRoot.minHeight;\n\n    return (\n      <>\n        <View style={this.styles.inputContainer}>\n        <WMTextInput\n          {...this.getTestPropsForInput()}\n          {...getAccessibilityProps(\n            AccessibilityWidgetType.TEXT,\n            props\n          )}\n          ref={(ref: any) => {this.widgetRef = ref;\n            // @ts-ignore\n          if (ref && !isNull(ref.selectionStart) && !isNull(ref.selectionEnd)) {\n            // @ts-ignore\n            ref.selectionStart = ref.selectionEnd = this.cursor;\n          }}}\n          {...opts}\n          floatingLabel={props.floatinglabel}\n          inputheight={typeof inputHeight === 'number' ? inputHeight : undefined}\n          floatingLabelStyle={{\n            ...this.styles.floatingLabel}}\n          activeFloatingLabelStyle={this.theme.mergeStyle(this.styles.activeFloatingLabel,\n            this.theme.getStyle('app-text-with-label')?.activeFloatingLabel,\n            this.theme.getStyle(`${classname}`)?.focused)    \n          }\n          variant={props.variant as 'filled' | 'outlined' | undefined}\n          labelBackground={props.variant != 'filled' ? (mergedRoot?.backgroundColor as string) : undefined}\n          placeholderTextColor={this.styles.placeholderText.color as any}\n          isInputFocused={ this.state.isInputFocused }\n          style={[this.theme.mergeStyle(this.styles.root, foundationStyle?.root),\n            this.theme.mergeStyle(this.styles.text, foundationStyle?.text, this.theme.getStyle(`${classname}`)),\n            this.state.isValid ? {} : this.theme.mergeStyle(this.styles.invalid, foundationStyle?.invalid),\n            this.state.isInputFocused ? this.theme.mergeStyle(this.styles.root, this.styles.focused, foundationStyle?.focused, this.theme.getStyle(`${classname}`).focused) : {},\n            this.state.props.disabled ? this.theme.mergeStyle(this.styles.root, foundationStyle?.disabled, this.theme.getStyle(`${classname}`).disabled) : {},\n            hasLeading ? this.styles.inputWithLeadingIcon : {},\n            hasTrailing ? this.styles.inputWithTrailingIcon : {},\n            Platform.OS === 'web' ? this.styles.inputWeb : null  //added to override the bordercolor getting applied only in web.\n          ]}\n          keyboardType={this.state.keyboardType}\n          autoComplete={props.autocomplete === \"true\" ? \"username\" : props.autocomplete === \"false\" ? \"off\" : props.autocomplete}\n          autoFocus={props.autofocus}\n          editable={props.disabled || props.readonly ? false : true}\n          secureTextEntry={props.type === 'password' && !props.maskchar ? true : false}\n          displayformat={props.displayformat}\n          background={this._background}\n          maskchar={props.maskchar}\n          maxLength={props.maxchars}\n          placeholder={props.placeholder}\n          onBlur={this.onBlur.bind(this)}\n          onFocus={this.onFocus.bind(this)}\n          onKeyPress={this.onKeyPress.bind(this)}\n          onChangeText={this.onChangeText.bind(this)}\n          onChange={this.invokeChange.bind(this)}\n          allowContentSelection={this.styles.text.userSelect === 'text'}\n          autoCapitalize={props.autocapitalize}\n          handleLayout={this.handleLayout}\n          leadingiconclass={props.leadingiconclass}\n        />\n        {hasLeading && (\n          <View\n            style={[this.styles.iconWrapper, { left: basePadding as any }]}\n            pointerEvents=\"none\"\n          >\n            <WmIcon\n              id={this.getTestId('leading-icon')}\n              name={`${props.name}_leading_icon`}\n              iconclass={props.leadingiconclass}\n              styles={this.styles.leadingIcon}\n              accessible={true}\n              onTap={this.leadingIconClick.bind(this)}\n            />\n          </View>\n        )}\n        {hasTrailing && (\n          <View\n            style={this.theme.mergeStyle(this.styles.iconWrapper, { right: basePadding as any })}\n            pointerEvents=\"none\"\n          >\n            <WmIcon\n              id={this.getTestId('trailing-icon')}\n              name={`${props.name}_trailing_icon`}\n              iconclass={props.trailingiconclass}\n              styles={this.styles.trailingIcon}\n              accessible={true}\n              onTap={this.trailingIconClick.bind(this)}\n            />\n          </View>\n        )}\n          \n      </View>\n      {hassupportingtext && (\n          <Text>\n             {props.hint}\n          </Text>\n        )\n        }\n    </>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/components/input/text/text.props.js

@@ -11,6 +11,11 @@ export default class WmTextProps extends BaseInputProps {
     _defineProperty(this, "skeletonwidth", null);
     _defineProperty(this, "autocapitalize", 'none');
     _defineProperty(this, "returnkeytype", 'auto');
+    _defineProperty(this, "onSubmitEditing", () => {});
+    _defineProperty(this, "variant", void 0);
+    _defineProperty(this, "leadingiconclass", void 0);
+    _defineProperty(this, "trailingiconclass", void 0);
+    _defineProperty(this, "moveUp", void 0);
   }
 }
 //# sourceMappingURL=text.props.js.map

package/components/input/text/text.props.js.map

@@ -1 +1 @@
-{"version":3,"names":["BaseInputProps","WmTextProps","constructor","args","_defineProperty"],"sources":["text.props.ts"],"sourcesContent":["import BaseInputProps from \"@wavemaker/app-rn-runtime/components/input/baseinput/baseinput.props\";\n\nexport default class WmTextProps extends BaseInputProps {\n  floatinglabel?: string;\n  placeholder: string = 'Enter text';\n  skeletonheight?: string = null as any;\n  skeletonwidth?: string = null as any;\n  autocapitalize?: string = 'none';\n  returnkeytype: 'auto' | 'next' | 'done' = 'auto';\n}\n"],"mappings":";;;AAAA,OAAOA,cAAc,MAAM,sEAAsE;AAEjG,eAAe,MAAMC,WAAW,SAASD,cAAc,CAAC;EAAAE,YAAA,GAAAC,IAAA;IAAA,SAAAA,IAAA;IAAAC,eAAA;IAAAA,eAAA,sBAEhC,YAAY;IAAAA,eAAA,yBACR,IAAI;IAAAA,eAAA,wBACL,IAAI;IAAAA,eAAA,yBACH,MAAM;IAAAA,eAAA,wBACU,MAAM;EAAA;AAClD","ignoreList":[]}
+{"version":3,"names":["BaseInputProps","WmTextProps","constructor","args","_defineProperty"],"sources":["text.props.ts"],"sourcesContent":["import BaseInputProps from \"@wavemaker/app-rn-runtime/components/input/baseinput/baseinput.props\";\n\nexport default class WmTextProps extends BaseInputProps {\n  floatinglabel?: string;\n  placeholder: string = 'Enter text';\n  skeletonheight?: string = null as any;\n  skeletonwidth?: string = null as any;\n  autocapitalize?: string = 'none';\n  returnkeytype: 'auto' | 'next' | 'done' = 'auto';\n  onSubmitEditing:  Function = () => {};\n  variant?: string;\n  leadingiconclass?: string;\n  trailingiconclass?: string;\n  moveUp?: boolean;\n}\n"],"mappings":";;;AAAA,OAAOA,cAAc,MAAM,sEAAsE;AAEjG,eAAe,MAAMC,WAAW,SAASD,cAAc,CAAC;EAAAE,YAAA,GAAAC,IAAA;IAAA,SAAAA,IAAA;IAAAC,eAAA;IAAAA,eAAA,sBAEhC,YAAY;IAAAA,eAAA,yBACR,IAAI;IAAAA,eAAA,wBACL,IAAI;IAAAA,eAAA,yBACH,MAAM;IAAAA,eAAA,wBACU,MAAM;IAAAA,eAAA,0BACnB,MAAM,CAAC,CAAC;IAAAA,eAAA;IAAAA,eAAA;IAAAA,eAAA;IAAAA,eAAA;EAAA;AAKvC","ignoreList":[]}

package/components/input/text/text.styles.js

@@ -13,7 +13,6 @@ BASE_THEME.registerStyle((themeVariables, addStyle) => {
       borderStyle: 'solid',
       borderColor: themeVariables.inputBorderColor,
       backgroundColor: themeVariables.inputBackgroundColor,
-      borderRadius: 6,
       fontFamily: themeVariables.baseFont
     },
     text: {
@@ -30,7 +29,37 @@ BASE_THEME.registerStyle((themeVariables, addStyle) => {
     },
     floatingLabel: {},
     activeFloatingLabel: {},
-    inactiveFloatingLabel: {},
+    inputContainer: {
+      position: 'relative'
+    },
+    inputWithLeadingIcon: {
+      paddingLeft: 50
+    },
+    inputWithTrailingIcon: {
+      paddingRight: 48
+    },
+    iconWrapper: {
+      position: 'absolute',
+      top: 0,
+      bottom: 0,
+      justifyContent: 'center'
+    },
+    leadingIcon: {
+      root: {},
+      icon: {
+        fontSize: 24
+      }
+    },
+    trailingIcon: {
+      root: {},
+      icon: {
+        fontSize: 24
+      }
+    },
+    inputWeb: {
+      outline: 'none',
+      boxShadow: 'none'
+    },
     skeleton: {
       root: {
         width: '100%',
@@ -83,9 +112,6 @@ BASE_THEME.registerStyle((themeVariables, addStyle) => {
     },
     activeFloatingLabel: {
       color: themeVariables.activeFloatingLabelColor
-    },
-    inactiveFloatingLabel: {
-      color: themeVariables.floatingLabelColor
     }
   });
   addStyle('app-input', '', {
@@ -96,7 +122,6 @@ BASE_THEME.registerStyle((themeVariables, addStyle) => {
     placeholderText: {},
     floatingLabel: {},
     activeFloatingLabel: {},
-    inactiveFloatingLabel: {},
     skeleton: {
       root: {}
     }

package/components/input/text/text.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["BASE_THEME","defineStyles","DEFAULT_CLASS","registerStyle","themeVariables","addStyle","defaultStyles","root","minHeight","paddingTop","paddingBottom","borderWidth","paddingLeft","paddingRight","borderStyle","borderColor","inputBorderColor","backgroundColor","inputBackgroundColor","borderRadius","fontFamily","baseFont","text","fontSize","invalid","borderBottomColor","inputInvalidBorderColor","focused","inputFocusBorderColor","placeholderText","color","inputPlaceholderColor","floatingLabel","activeFloatingLabel","inactiveFloatingLabel","skeleton","width","height","flex","minWidth","maxWidth","inputDisabledBgColor","textAlign","position","top","left","floatingLabelColor","activeFloatingLabelColor"],"sources":["text.styles.ts"],"sourcesContent":["import BASE_THEME, { AllStyle, Theme } from '@wavemaker/app-rn-runtime/styles/theme';\nimport { BaseStyles, defineStyles } from '@wavemaker/app-rn-runtime/core/base.component';\nimport { ColorValue } from \"react-native\";\nimport { WmSkeletonStyles } from '@wavemaker/app-rn-runtime/components/basic/skeleton/skeleton.styles';\n\nexport type WmTextStyles = BaseStyles & {\n  invalid: AllStyle;\n  focused: AllStyle;\n  placeholderText: AllStyle;\n  floatingLabel: AllStyle;\n  activeFloatingLabel: AllStyle;\n  inactiveFloatingLabel: AllStyle;\n  skeleton: WmSkeletonStyles;\n};\n\nexport const DEFAULT_CLASS = 'app-text';\nBASE_THEME.registerStyle((themeVariables, addStyle) => {\n  const defaultStyles: WmTextStyles = defineStyles({\n    root: {\n      minHeight: 42,\n      paddingTop: 8,\n      paddingBottom: 8,\n      borderWidth: 1,\n      paddingLeft: 16,\n      paddingRight: 16,\n      borderStyle: 'solid',\n      borderColor: themeVariables.inputBorderColor,\n      backgroundColor: themeVariables.inputBackgroundColor,\n      borderRadius: 6,\n      fontFamily: themeVariables.baseFont\n    },\n    text: {\n      fontSize: 16\n    },\n    invalid: {\n      borderBottomColor: themeVariables.inputInvalidBorderColor\n    },\n    focused: {\n      borderColor: themeVariables.inputFocusBorderColor,\n    },\n    placeholderText: {\n      color: themeVariables.inputPlaceholderColor\n    },\n    floatingLabel: {},\n    activeFloatingLabel: {},\n    inactiveFloatingLabel: {},\n    skeleton: {\n      root: {\n        width: '100%',\n        height: 16,\n        borderRadius: 4\n      }\n    } as any as WmSkeletonStyles\n  });\n\n  addStyle(DEFAULT_CLASS, '', defaultStyles);\n  \n  // Add horizontal form input styles for horizontal form field layouts - positioned early to avoid overriding more specific styles\n  addStyle('form-text-input-horizontal', '', {\n    root: {\n      flex: 1, \n      minWidth: 0, \n      maxWidth: '100%',\n    },\n    text: {\n    }\n  } as BaseStyles);\n  \n  // Password widgets use the text component but have their own widget type\n  addStyle('form-password-input-horizontal', '', {\n    root: {\n      flex: 1, \n      minWidth: 0, \n      maxWidth: '100%',\n    },\n    text: {}\n  } as BaseStyles);\n  \n  addStyle(DEFAULT_CLASS + '-disabled', '', {\n    root: {\n      backgroundColor: themeVariables.inputDisabledBgColor\n    }\n  });\n  addStyle(DEFAULT_CLASS + '-rtl', '', {\n    root: {\n      textAlign: 'right'\n    }\n  });\n  addStyle(DEFAULT_CLASS + '-with-label', '', {\n    root: {\n      minHeight: 48,\n    },\n    floatingLabel: {\n      position: 'absolute',\n      top: 12,\n      left: 16,\n      fontSize: 14,\n      color: themeVariables.floatingLabelColor\n    },\n    activeFloatingLabel: {\n      color: themeVariables.activeFloatingLabelColor,\n    },\n    inactiveFloatingLabel: {\n      color: themeVariables.floatingLabelColor,\n    }\n  });\n    addStyle('app-input', '', {\n    root: {},\n    text: {},\n    invalid: {\n    },\n    focused: {},\n    placeholderText: {},\n    floatingLabel: {},\n    activeFloatingLabel: {},\n    inactiveFloatingLabel: {},\n    skeleton: {\n      root: {}\n    } as any as WmSkeletonStyles\n  });\n});"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["BASE_THEME","defineStyles","DEFAULT_CLASS","registerStyle","themeVariables","addStyle","defaultStyles","root","minHeight","paddingTop","paddingBottom","borderWidth","paddingLeft","paddingRight","borderStyle","borderColor","inputBorderColor","backgroundColor","inputBackgroundColor","fontFamily","baseFont","text","fontSize","invalid","borderBottomColor","inputInvalidBorderColor","focused","inputFocusBorderColor","placeholderText","color","inputPlaceholderColor","floatingLabel","activeFloatingLabel","inputContainer","position","inputWithLeadingIcon","inputWithTrailingIcon","iconWrapper","top","bottom","justifyContent","leadingIcon","icon","trailingIcon","inputWeb","outline","boxShadow","skeleton","width","height","borderRadius","flex","minWidth","maxWidth","inputDisabledBgColor","textAlign","left","floatingLabelColor","activeFloatingLabelColor"],"sources":["text.styles.ts"],"sourcesContent":["import BASE_THEME, { AllStyle, Theme } from '@wavemaker/app-rn-runtime/styles/theme';\nimport { BaseStyles, defineStyles } from '@wavemaker/app-rn-runtime/core/base.component';\nimport { ColorValue } from \"react-native\";\nimport { WmSkeletonStyles } from '@wavemaker/app-rn-runtime/components/basic/skeleton/skeleton.styles';\nimport { WmIconStyles } from '@wavemaker/app-rn-runtime/components/basic/icon/icon.styles';\n\nexport type WmTextStyles = BaseStyles & {\n  invalid: AllStyle;\n  focused: AllStyle;\n  placeholderText: AllStyle;\n  floatingLabel: AllStyle;\n  activeFloatingLabel: AllStyle;\n  inputContainer: AllStyle;\n  inputWithLeadingIcon: AllStyle;\n  inputWithTrailingIcon: AllStyle;\n  iconWrapper: AllStyle;\n  leadingIcon: WmIconStyles;\n  trailingIcon: WmIconStyles;\n  skeleton: WmSkeletonStyles;\n};\n\nexport const DEFAULT_CLASS = 'app-text';\nBASE_THEME.registerStyle((themeVariables, addStyle) => {\n  const defaultStyles: WmTextStyles = defineStyles({\n    root: {\n      minHeight: 42,\n      paddingTop: 8,\n      paddingBottom: 8,\n      borderWidth: 1,\n      paddingLeft: 16,\n      paddingRight: 16,\n      borderStyle: 'solid',\n      borderColor: themeVariables.inputBorderColor,\n      backgroundColor: themeVariables.inputBackgroundColor,\n      fontFamily: themeVariables.baseFont,\n    },\n    text: {\n      fontSize: 16\n    },\n    invalid: {\n      borderBottomColor: themeVariables.inputInvalidBorderColor\n    },\n    focused: {\n      borderColor: themeVariables.inputFocusBorderColor,\n    },\n    placeholderText: {\n      color: themeVariables.inputPlaceholderColor\n    },\n    floatingLabel: {},\n    activeFloatingLabel: {},\n    inputContainer: {\n      position: 'relative',\n    },\n    inputWithLeadingIcon: {\n      paddingLeft: 50,\n    },\n    inputWithTrailingIcon: {\n      paddingRight: 48,\n    },\n    iconWrapper: {\n      position: 'absolute',\n      top: 0,\n      bottom: 0,\n      justifyContent: 'center',\n    },\n    leadingIcon: {\n      root: {},\n      icon: {\n        fontSize: 24\n      },\n    } as WmIconStyles,\n    trailingIcon: {\n      root: {},\n      icon: {\n        fontSize: 24\n      },\n    } as WmIconStyles,\n    inputWeb: {\n      outline: 'none',\n      boxShadow: 'none',\n    },\n    skeleton: {\n      root: {\n        width: '100%',\n        height: 16,\n        borderRadius: 4\n      }\n    } as any as WmSkeletonStyles\n  });\n\n  addStyle(DEFAULT_CLASS, '', defaultStyles);\n\n  // Add horizontal form input styles for horizontal form field layouts - positioned early to avoid overriding more specific styles\n  addStyle('form-text-input-horizontal', '', {\n    root: {\n      flex: 1,\n      minWidth: 0,\n      maxWidth: '100%',\n    },\n    text: {\n    }\n  } as BaseStyles);\n\n  // Password widgets use the text component but have their own widget type\n  addStyle('form-password-input-horizontal', '', {\n    root: {\n      flex: 1,\n      minWidth: 0,\n      maxWidth: '100%',\n    },\n    text: {}\n  } as BaseStyles);\n\n  addStyle(DEFAULT_CLASS + '-disabled', '', {\n    root: {\n      backgroundColor: themeVariables.inputDisabledBgColor\n    }\n  });\n  addStyle(DEFAULT_CLASS + '-rtl', '', {\n    root: {\n      textAlign: 'right'\n    }\n  });\n  addStyle(DEFAULT_CLASS + '-with-label', '', {\n    root: {\n      minHeight: 48,\n    },\n    floatingLabel: {\n      position: 'absolute',\n      top: 12,\n      left: 16,\n      fontSize: 14,\n      color: themeVariables.floatingLabelColor\n    },\n    activeFloatingLabel: {\n      color: themeVariables.activeFloatingLabelColor,\n    }\n  });\n    addStyle('app-input', '', {\n    root: {},\n    text: {},\n    invalid: {\n    },\n    focused: {},\n    placeholderText: {},\n    floatingLabel: {},\n    activeFloatingLabel: {},\n    skeleton: {\n      root: {}\n    } as any as WmSkeletonStyles\n  });\n});\n"],"mappings":"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","ignoreList":[]}

package/components/input/textarea/textarea.component.js

@@ -42,7 +42,7 @@ export default class WmTextarea extends BaseInputComponent {
     });
   }
   renderWidget(props) {
-    var _this$state$textValue, _this$theme$getStyle, _this$theme$getStyle2;
+    var _this$state$textValue, _this$theme$getStyle, _this$theme$getStyle2, _this$styles$root3;
     let opts = {};
     const valueExpr = Platform.OS === 'web' ? 'value' : 'defaultValue';
     const foundationStyle = this.theme.getStyle('app-input');
@@ -67,8 +67,9 @@ export default class WmTextarea extends BaseInputComponent {
     }, opts, {
       floatingLabel: props.floatinglabel,
       floatingLabelStyle: this.styles.floatingLabel,
-      activeFloatingLabelStyle: this.theme.mergeStyle((_this$theme$getStyle = this.theme.getStyle('app-textarea-with-label')) === null || _this$theme$getStyle === void 0 ? void 0 : _this$theme$getStyle.activeFloatingLabel, (_this$theme$getStyle2 = this.theme.getStyle(`${classname}`)) === null || _this$theme$getStyle2 === void 0 ? void 0 : _this$theme$getStyle2.focused, this.styles.activeFloatingLabel ? this.styles.activeFloatingLabel : {}),
-      inactiveFloatingLabelStyle: this.styles.inactiveFloatingLabel,
+      activeFloatingLabelStyle: this.theme.mergeStyle((_this$theme$getStyle = this.theme.getStyle('app-textarea-with-label')) === null || _this$theme$getStyle === void 0 ? void 0 : _this$theme$getStyle.activeFloatingLabel, (_this$theme$getStyle2 = this.theme.getStyle(`${classname}`)) === null || _this$theme$getStyle2 === void 0 ? void 0 : _this$theme$getStyle2.focused),
+      variant: props.variant,
+      labelBackground: props.variant === 'outlined' ? (_this$styles$root3 = this.styles.root) === null || _this$styles$root3 === void 0 ? void 0 : _this$styles$root3.backgroundColor : undefined,
       autoComplete: props.autocomplete ? 'username' : 'off',
       autoFocus: props.autofocus,
       editable: props.disabled || props.readonly ? false : true,

package/components/input/textarea/textarea.component.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Platform","Text","WmTextareaProps","DEFAULT_CLASS","BaseInputComponent","BaseInputState","WMTextInput","isNull","AccessibilityWidgetType","getAccessibilityProps","createSkeleton","WmTextareaState","WmTextarea","constructor","props","getStyleClassName","classes","state","floatinglabel","push","join","renderSkeleton","skeletonWidth","skeletonHeight","skeletonwidth","_this$styles$root","styles","root","width","skeletonheight","_this$styles$root2","height","theme","skeleton","renderWidget","_this$state$textValue","_this$theme$getStyle","_this$theme$getStyle2","opts","valueExpr","OS","foundationStyle","getStyle","classname","split","pop","textValue","toString","createElement","Fragment","_extends","getTestPropsForInput","TEXTAREA","ref","widgetRef","selectionStart","selectionEnd","cursor","placeholderTextColor","placeholderText","color","isInputFocused","style","text","isValid","invalid","mergeStyle","focused","disabled","multiline","numberOfLines","background","_background","keyboardType","floatingLabel","floatingLabelStyle","activeFloatingLabelStyle","activeFloatingLabel","inactiveFloatingLabelStyle","inactiveFloatingLabel","autoComplete","autocomplete","autoFocus","autofocus","editable","readonly","maxLength","maxchars","placeholder","onBlur","bind","onFocus","onKeyPress","onChangeText","onChange","invokeChange","allowContentSelection","userSelect","handleLayout","limitdisplaytext","helpText"],"sources":["textarea.component.tsx"],"sourcesContent":["import React from 'react';\nimport { DimensionValue, Platform,Text } from 'react-native';\nimport WmTextareaProps from './textarea.props';\nimport { DEFAULT_CLASS, WmTextareaStyles } from './textarea.styles';\nimport {\n  BaseInputComponent,\n  BaseInputState\n} from '@wavemaker/app-rn-runtime/components/input/baseinput/baseinput.component';\nimport { WMTextInput } from '@wavemaker/app-rn-runtime/core/components/textinput.component';\nimport { isNull } from 'lodash';\nimport { AccessibilityWidgetType, getAccessibilityProps } from '@wavemaker/app-rn-runtime/core/accessibility';\nimport { createSkeleton } from '@wavemaker/app-rn-runtime/components/basic/skeleton/skeleton.component';\n\nexport class WmTextareaState extends BaseInputState<WmTextareaProps> {}\n\nexport default class WmTextarea extends BaseInputComponent<WmTextareaProps, WmTextareaState, WmTextareaStyles> {\n\n  constructor(props: WmTextareaProps) {\n    super(props, DEFAULT_CLASS, new WmTextareaProps(), new WmTextareaState());\n  }\n\n  public getStyleClassName(): string | undefined {\n    const classes = [];\n    if (this.state.props.floatinglabel) {\n      classes.push('app-textarea-with-label');\n    }\n    classes.push(super.getStyleClassName());\n    return classes.join(' ');\n  }\n\n  public renderSkeleton(props: WmTextareaProps): React.ReactNode {\n    let skeletonWidth, skeletonHeight;\n    if(this.props.skeletonwidth == \"0\") {\n      skeletonWidth = 0\n    } else {\n      skeletonWidth = this.props.skeletonwidth || this.styles.root?.width\n    }\n\n    if(this.props.skeletonheight == \"0\") {\n      skeletonHeight = 0\n    } else {\n      skeletonHeight = this.props.skeletonheight || this.styles.root?.height;\n    }\n\n    return createSkeleton(this.theme, this.styles.skeleton, {\n      ...this.styles.root,\n      width: skeletonWidth as DimensionValue,\n      height: skeletonHeight as DimensionValue\n    });\n  }\n\n  renderWidget(props: WmTextareaProps) {\n    let opts: any = {};\n    const valueExpr = Platform.OS === 'web' ? 'value' : 'defaultValue';\n    const foundationStyle = this.theme.getStyle('app-input');\n    const classname = this.state.props.classname ? this.state.props.classname.split(\" \").pop() : '';\n    opts[valueExpr] = this.state.textValue?.toString() || '';\n    return (\n      <>\n    <WMTextInput\n      {...this.getTestPropsForInput()}\n      {...getAccessibilityProps(\n        AccessibilityWidgetType.TEXTAREA,\n        props\n      )}\n      ref={(ref: any) => {this.widgetRef = ref;\n        // @ts-ignore\n        if (ref && !isNull(ref.selectionStart) && !isNull(ref.selectionEnd)) {\n          // @ts-ignore\n          ref.selectionStart = ref.selectionEnd = this.cursor;\n        }}}\n      placeholderTextColor={this.styles.placeholderText.color as any}\n      isInputFocused={ this.state.isInputFocused }\n      style={[this.styles.root, this.styles.text, this.state.isValid ? {} : this.styles.invalid,\n        this.state.isInputFocused ? this.theme.mergeStyle(this.styles.focused, foundationStyle?.focused, this.theme.getStyle(`${classname}`).focused) : {},\n        this.state.props.disabled ? this.theme.mergeStyle(foundationStyle?.disabled, this.theme.getStyle(`${classname}`).disabled) : {}\n      ]}\n      multiline={true}\n      numberOfLines={4}\n      background={this._background}\n      keyboardType={this.state.keyboardType}\n      {...opts}\n      floatingLabel={props.floatinglabel}\n      floatingLabelStyle={this.styles.floatingLabel}\n      activeFloatingLabelStyle={this.theme.mergeStyle(\n        this.theme.getStyle('app-textarea-with-label')?.activeFloatingLabel,\n        this.theme.getStyle(`${classname}`)?.focused,\n        this.styles.activeFloatingLabel ? this.styles.activeFloatingLabel : {} \n      )}\n      inactiveFloatingLabelStyle={this.styles.inactiveFloatingLabel}\n      autoComplete={props.autocomplete ? 'username' : 'off'}\n      autoFocus={props.autofocus}\n      editable={props.disabled || props.readonly ? false : true}\n      maxLength={props.maxchars}\n      placeholder={props.placeholder || 'Place your text'}\n      onBlur={this.onBlur.bind(this)}\n      onFocus={this.onFocus.bind(this)}\n      onKeyPress={this.onKeyPress.bind(this)}\n      onChangeText={this.onChangeText.bind(this)}\n      onChange={this.invokeChange.bind(this)}\n      allowContentSelection={this.styles.text.userSelect === 'text'}\n      handleLayout={this.handleLayout}\n    />\n     { (props.maxchars && props.limitdisplaytext) && <Text\n        style={[\n          this.styles.helpText\n        ]} >\n         {props.limitdisplaytext}\n    </Text>}\n    </>);\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","Platform","Text","WmTextareaProps","DEFAULT_CLASS","BaseInputComponent","BaseInputState","WMTextInput","isNull","AccessibilityWidgetType","getAccessibilityProps","createSkeleton","WmTextareaState","WmTextarea","constructor","props","getStyleClassName","classes","state","floatinglabel","push","join","renderSkeleton","skeletonWidth","skeletonHeight","skeletonwidth","_this$styles$root","styles","root","width","skeletonheight","_this$styles$root2","height","theme","skeleton","renderWidget","_this$state$textValue","_this$theme$getStyle","_this$theme$getStyle2","_this$styles$root3","opts","valueExpr","OS","foundationStyle","getStyle","classname","split","pop","textValue","toString","createElement","Fragment","_extends","getTestPropsForInput","TEXTAREA","ref","widgetRef","selectionStart","selectionEnd","cursor","placeholderTextColor","placeholderText","color","isInputFocused","style","text","isValid","invalid","mergeStyle","focused","disabled","multiline","numberOfLines","background","_background","keyboardType","floatingLabel","floatingLabelStyle","activeFloatingLabelStyle","activeFloatingLabel","variant","labelBackground","backgroundColor","undefined","autoComplete","autocomplete","autoFocus","autofocus","editable","readonly","maxLength","maxchars","placeholder","onBlur","bind","onFocus","onKeyPress","onChangeText","onChange","invokeChange","allowContentSelection","userSelect","handleLayout","limitdisplaytext","helpText"],"sources":["textarea.component.tsx"],"sourcesContent":["import React from 'react';\nimport { DimensionValue, Platform,Text } from 'react-native';\nimport WmTextareaProps from './textarea.props';\nimport { DEFAULT_CLASS, WmTextareaStyles } from './textarea.styles';\nimport {\n  BaseInputComponent,\n  BaseInputState\n} from '@wavemaker/app-rn-runtime/components/input/baseinput/baseinput.component';\nimport { WMTextInput } from '@wavemaker/app-rn-runtime/core/components/textinput.component';\nimport { isNull } from 'lodash';\nimport { AccessibilityWidgetType, getAccessibilityProps } from '@wavemaker/app-rn-runtime/core/accessibility';\nimport { createSkeleton } from '@wavemaker/app-rn-runtime/components/basic/skeleton/skeleton.component';\n\nexport class WmTextareaState extends BaseInputState<WmTextareaProps> {}\n\nexport default class WmTextarea extends BaseInputComponent<WmTextareaProps, WmTextareaState, WmTextareaStyles> {\n\n  constructor(props: WmTextareaProps) {\n    super(props, DEFAULT_CLASS, new WmTextareaProps(), new WmTextareaState());\n  }\n\n  public getStyleClassName(): string | undefined {\n    const classes = [];\n    if (this.state.props.floatinglabel) {\n      classes.push('app-textarea-with-label');\n    }\n    classes.push(super.getStyleClassName());\n    return classes.join(' ');\n  }\n\n  public renderSkeleton(props: WmTextareaProps): React.ReactNode {\n    let skeletonWidth, skeletonHeight;\n    if(this.props.skeletonwidth == \"0\") {\n      skeletonWidth = 0\n    } else {\n      skeletonWidth = this.props.skeletonwidth || this.styles.root?.width\n    }\n\n    if(this.props.skeletonheight == \"0\") {\n      skeletonHeight = 0\n    } else {\n      skeletonHeight = this.props.skeletonheight || this.styles.root?.height;\n    }\n\n    return createSkeleton(this.theme, this.styles.skeleton, {\n      ...this.styles.root,\n      width: skeletonWidth as DimensionValue,\n      height: skeletonHeight as DimensionValue\n    });\n  }\n\n  renderWidget(props: WmTextareaProps) {\n    let opts: any = {};\n    const valueExpr = Platform.OS === 'web' ? 'value' : 'defaultValue';\n    const foundationStyle = this.theme.getStyle('app-input');\n    const classname = this.state.props.classname ? this.state.props.classname.split(\" \").pop() : '';\n    opts[valueExpr] = this.state.textValue?.toString() || '';\n    return (\n      <>\n    <WMTextInput\n      {...this.getTestPropsForInput()}\n      {...getAccessibilityProps(\n        AccessibilityWidgetType.TEXTAREA,\n        props\n      )}\n      ref={(ref: any) => {this.widgetRef = ref;\n        // @ts-ignore\n        if (ref && !isNull(ref.selectionStart) && !isNull(ref.selectionEnd)) {\n          // @ts-ignore\n          ref.selectionStart = ref.selectionEnd = this.cursor;\n        }}}\n      placeholderTextColor={this.styles.placeholderText.color as any}\n      isInputFocused={ this.state.isInputFocused }\n      style={[this.styles.root, this.styles.text, this.state.isValid ? {} : this.styles.invalid,\n        this.state.isInputFocused ? this.theme.mergeStyle(this.styles.focused, foundationStyle?.focused, this.theme.getStyle(`${classname}`).focused) : {},\n        this.state.props.disabled ? this.theme.mergeStyle(foundationStyle?.disabled, this.theme.getStyle(`${classname}`).disabled) : {}\n      ]}\n      multiline={true}\n      numberOfLines={4}\n      background={this._background}\n      keyboardType={this.state.keyboardType}\n      {...opts}\n      floatingLabel={props.floatinglabel}\n      floatingLabelStyle={this.styles.floatingLabel}\n      activeFloatingLabelStyle={this.theme.mergeStyle(\n        this.theme.getStyle('app-textarea-with-label')?.activeFloatingLabel,\n        this.theme.getStyle(`${classname}`)?.focused)}\n      variant={props.variant as 'filled' | 'outlined' | undefined}\n      labelBackground={props.variant === 'outlined' ? (this.styles.root?.backgroundColor as string) : undefined}\n      autoComplete={props.autocomplete ? 'username' : 'off'}\n      autoFocus={props.autofocus}\n      editable={props.disabled || props.readonly ? false : true}\n      maxLength={props.maxchars}\n      placeholder={props.placeholder || 'Place your text'}\n      onBlur={this.onBlur.bind(this)}\n      onFocus={this.onFocus.bind(this)}\n      onKeyPress={this.onKeyPress.bind(this)}\n      onChangeText={this.onChangeText.bind(this)}\n      onChange={this.invokeChange.bind(this)}\n      allowContentSelection={this.styles.text.userSelect === 'text'}\n      handleLayout={this.handleLayout}\n    />\n     { (props.maxchars && props.limitdisplaytext) && <Text\n        style={[\n          this.styles.helpText\n        ]} >\n         {props.limitdisplaytext}\n    </Text>}\n    </>);\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/components/input/textarea/textarea.props.js

@@ -10,6 +10,7 @@ export default class WmTextareaProps extends BaseInputProps {
     _defineProperty(this, "skeletonheight", null);
     _defineProperty(this, "skeletonwidth", null);
     _defineProperty(this, "limitdisplaytext", null);
+    _defineProperty(this, "variant", void 0);
   }
 }
 //# sourceMappingURL=textarea.props.js.map

package/components/input/textarea/textarea.props.js.map

@@ -1 +1 @@
-{"version":3,"names":["BaseInputProps","WmTextareaProps","constructor","args","_defineProperty"],"sources":["textarea.props.ts"],"sourcesContent":["import BaseInputProps from '@wavemaker/app-rn-runtime/components/input/baseinput/baseinput.props';\n\nexport default class WmTextareaProps extends BaseInputProps {\n  floatinglabel?: string;\n  placeholder: string = 'Place your text';\n  skeletonheight?: string = null as any;\n  skeletonwidth?: string = null as any;\n  limitdisplaytext?: string = null as any;\n}\n"],"mappings":";;;AAAA,OAAOA,cAAc,MAAM,sEAAsE;AAEjG,eAAe,MAAMC,eAAe,SAASD,cAAc,CAAC;EAAAE,YAAA,GAAAC,IAAA;IAAA,SAAAA,IAAA;IAAAC,eAAA;IAAAA,eAAA,sBAEpC,iBAAiB;IAAAA,eAAA,yBACb,IAAI;IAAAA,eAAA,wBACL,IAAI;IAAAA,eAAA,2BACD,IAAI;EAAA;AAClC","ignoreList":[]}
+{"version":3,"names":["BaseInputProps","WmTextareaProps","constructor","args","_defineProperty"],"sources":["textarea.props.ts"],"sourcesContent":["import BaseInputProps from '@wavemaker/app-rn-runtime/components/input/baseinput/baseinput.props';\n\nexport default class WmTextareaProps extends BaseInputProps {\n  floatinglabel?: string;\n  placeholder: string = 'Place your text';\n  skeletonheight?: string = null as any;\n  skeletonwidth?: string = null as any;\n  limitdisplaytext?: string = null as any;\n  variant?: string;\n}\n"],"mappings":";;;AAAA,OAAOA,cAAc,MAAM,sEAAsE;AAEjG,eAAe,MAAMC,eAAe,SAASD,cAAc,CAAC;EAAAE,YAAA,GAAAC,IAAA;IAAA,SAAAA,IAAA;IAAAC,eAAA;IAAAA,eAAA,sBAEpC,iBAAiB;IAAAA,eAAA,yBACb,IAAI;IAAAA,eAAA,wBACL,IAAI;IAAAA,eAAA,2BACD,IAAI;IAAAA,eAAA;EAAA;AAElC","ignoreList":[]}

package/core/components/floatinglabel.component.js

@@ -2,32 +2,75 @@ import React, { useEffect, useState } from 'react';
 import { Animated, Text } from 'react-native';
 import { Theme } from '@wavemaker/app-rn-runtime/styles/theme';
 export const FloatingLabel = props => {
-  var _props$style, _props$style2;
-  const width = ((_props$style = props.style) === null || _props$style === void 0 ? void 0 : _props$style.width) || 160;
-  const [labelPositionX] = useState(new Animated.Value(0));
-  const [labelPositionY] = useState(new Animated.Value(0));
-  const [labelScale] = useState(new Animated.Value(1));
-  const fontSize = ((_props$style2 = props.style) === null || _props$style2 === void 0 ? void 0 : _props$style2.fontSize) || 16;
+  var _props$style;
+  const toNumber = (value, fallback) => {
+    return typeof value === 'number' ? value : fallback;
+  };
+  const fontSize = toNumber((_props$style = props.style) === null || _props$style === void 0 ? void 0 : _props$style.fontSize, 16);
+  const getAnimationValues = moveUp => {
+    const hasLeading = !!props.leadingiconclass;
+    if (!moveUp) {
+      return {
+        x: hasLeading ? 28 : 0,
+        y: 0,
+        scale: 1
+      };
+    }
+    switch (props.variant) {
+      case 'filled':
+        return {
+          x: hasLeading ? 28 : 0,
+          y: -1 * fontSize * 1,
+          scale: 0.8
+        };
+      case 'outlined':
+        return {
+          x: 0,
+          y: -1 * (fontSize + 14),
+          scale: 0.8
+        };
+      default:
+        return {
+          x: 0,
+          y: -1 * (fontSize + 14),
+          scale: 0.8
+        };
+    }
+  };
+  const initial = getAnimationValues(props.moveUp);
+  const [labelPositionX] = useState(new Animated.Value(initial.x));
+  const [labelPositionY] = useState(new Animated.Value(initial.y));
+  const [labelScale] = useState(new Animated.Value(initial.scale));
   useEffect(() => {
+    const values = getAnimationValues(props.moveUp);
     Animated.parallel([Animated.timing(labelPositionX, {
-      toValue: props.moveUp ? -1 * 0.1 * width : 0,
+      toValue: values.x,
       duration: 200,
       useNativeDriver: true
     }), Animated.timing(labelPositionY, {
-      toValue: props.moveUp ? -1 * fontSize : 0,
+      toValue: values.y,
       duration: 200,
       useNativeDriver: true
     }), Animated.timing(labelScale, {
-      toValue: props.moveUp ? 0.8 : 1,
+      toValue: values.scale,
       duration: 200,
       useNativeDriver: true
     })]).start();
   }, [props.moveUp]);
+  const outlinedNotchStyle = props.variant != 'filled' && props.moveUp ? {
+    backgroundColor: props.labelBackground || 'transparent',
+    paddingLeft: 4,
+    paddingRight: 4
+  } : {};
+  const filledWithLeadingIconStyle = props.variant === 'filled' && props.leadingiconclass ? {
+    paddingLeft: 8
+  } : {};
   return /*#__PURE__*/React.createElement(Animated.View, {
     style: [{
       position: 'absolute',
       zIndex: 1,
-      width: width,
+      alignSelf: 'flex-start',
+      pointerEvents: 'none',
       transform: [{
         translateY: labelPositionY
       }, {
@@ -35,10 +78,14 @@ export const FloatingLabel = props => {
       }, {
         scale: labelScale
       }]
-    }, props.style],
+    }, props.style, outlinedNotchStyle, filledWithLeadingIconStyle, {
+      pointerEvents: 'none'
+    }],
     pointerEvents: "none"
   }, /*#__PURE__*/React.createElement(Text, {
-    style: Theme.BASE.getTextStyle(props.style),
+    style: [Theme.BASE.getTextStyle(props.style), {
+      pointerEvents: 'none'
+    }],
     ellipsizeMode: "tail"
   }, props.label));
 };

package/core/components/floatinglabel.component.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","useState","Animated","Text","Theme","FloatingLabel","props","_props$style","_props$style2","width","style","labelPositionX","Value","labelPositionY","labelScale","fontSize","parallel","timing","toValue","moveUp","duration","useNativeDriver","start","createElement","View","position","zIndex","transform","translateY","translateX","scale","pointerEvents","BASE","getTextStyle","ellipsizeMode","label"],"sources":["floatinglabel.component.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { Animated, TextStyle, Text, ViewStyle} from 'react-native';\n\nimport { Theme } from '@wavemaker/app-rn-runtime/styles/theme';\n\nexport const FloatingLabel = (props: {\n    label?: string,\n    style?: TextStyle & ViewStyle,\n    moveUp: boolean,\n  }) => {\n    const width = (props.style?.width as number) || 160;\n    const [labelPositionX] = useState(new Animated.Value(0));\n    const [labelPositionY] = useState(new Animated.Value(0));\n    const [labelScale] = useState(new Animated.Value(1));\n    const fontSize = (props.style?.fontSize || 16);\n    useEffect(() => {\n      Animated.parallel([\n        Animated.timing(labelPositionX, {\n          toValue: props.moveUp ? -1 * 0.1 * width : 0,\n          duration: 200,\n          useNativeDriver: true,\n        }),\n        Animated.timing(labelPositionY, {\n          toValue: props.moveUp ? -1 * fontSize : 0,\n          duration: 200,\n          useNativeDriver: true,\n        }),\n        Animated.timing(labelScale, {\n          toValue: props.moveUp ? 0.8 : 1,\n          duration: 200,\n          useNativeDriver: true,\n        })\n      ]).start();\n    }, [props.moveUp]);\n    return (\n        <Animated.View style={[{\n            position: 'absolute',\n            zIndex: 1,\n            width: width,\n            transform: [\n                {translateY: labelPositionY},\n                {translateX: labelPositionX},\n                {scale: labelScale}\n            ]},\n            props.style\n        ]}\n        pointerEvents=\"none\">\n          <Text\n            style={Theme.BASE.getTextStyle(props.style)}\n            ellipsizeMode=\"tail\">\n            {props.label}\n          </Text>\n        </Animated.View>\n    );\n  };\n  "],"mappings":"AAAA,OAAOA,KAAK,IAAIC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAClD,SAASC,QAAQ,EAAaC,IAAI,QAAkB,cAAc;AAElE,SAASC,KAAK,QAAQ,wCAAwC;AAE9D,OAAO,MAAMC,aAAa,GAAIC,KAI3B,IAAK;EAAA,IAAAC,YAAA,EAAAC,aAAA;EACJ,MAAMC,KAAK,GAAG,EAAAF,YAAA,GAACD,KAAK,CAACI,KAAK,cAAAH,YAAA,uBAAXA,YAAA,CAAaE,KAAK,KAAe,GAAG;EACnD,MAAM,CAACE,cAAc,CAAC,GAAGV,QAAQ,CAAC,IAAIC,QAAQ,CAACU,KAAK,CAAC,CAAC,CAAC,CAAC;EACxD,MAAM,CAACC,cAAc,CAAC,GAAGZ,QAAQ,CAAC,IAAIC,QAAQ,CAACU,KAAK,CAAC,CAAC,CAAC,CAAC;EACxD,MAAM,CAACE,UAAU,CAAC,GAAGb,QAAQ,CAAC,IAAIC,QAAQ,CAACU,KAAK,CAAC,CAAC,CAAC,CAAC;EACpD,MAAMG,QAAQ,GAAI,EAAAP,aAAA,GAAAF,KAAK,CAACI,KAAK,cAAAF,aAAA,uBAAXA,aAAA,CAAaO,QAAQ,KAAI,EAAG;EAC9Cf,SAAS,CAAC,MAAM;IACdE,QAAQ,CAACc,QAAQ,CAAC,CAChBd,QAAQ,CAACe,MAAM,CAACN,cAAc,EAAE;MAC9BO,OAAO,EAAEZ,KAAK,CAACa,MAAM,GAAG,CAAC,CAAC,GAAG,GAAG,GAAGV,KAAK,GAAG,CAAC;MAC5CW,QAAQ,EAAE,GAAG;MACbC,eAAe,EAAE;IACnB,CAAC,CAAC,EACFnB,QAAQ,CAACe,MAAM,CAACJ,cAAc,EAAE;MAC9BK,OAAO,EAAEZ,KAAK,CAACa,MAAM,GAAG,CAAC,CAAC,GAAGJ,QAAQ,GAAG,CAAC;MACzCK,QAAQ,EAAE,GAAG;MACbC,eAAe,EAAE;IACnB,CAAC,CAAC,EACFnB,QAAQ,CAACe,MAAM,CAACH,UAAU,EAAE;MAC1BI,OAAO,EAAEZ,KAAK,CAACa,MAAM,GAAG,GAAG,GAAG,CAAC;MAC/BC,QAAQ,EAAE,GAAG;MACbC,eAAe,EAAE;IACnB,CAAC,CAAC,CACH,CAAC,CAACC,KAAK,CAAC,CAAC;EACZ,CAAC,EAAE,CAAChB,KAAK,CAACa,MAAM,CAAC,CAAC;EAClB,oBACIpB,KAAA,CAAAwB,aAAA,CAACrB,QAAQ,CAACsB,IAAI;IAACd,KAAK,EAAE,CAAC;MACnBe,QAAQ,EAAE,UAAU;MACpBC,MAAM,EAAE,CAAC;MACTjB,KAAK,EAAEA,KAAK;MACZkB,SAAS,EAAE,CACP;QAACC,UAAU,EAAEf;MAAc,CAAC,EAC5B;QAACgB,UAAU,EAAElB;MAAc,CAAC,EAC5B;QAACmB,KAAK,EAAEhB;MAAU,CAAC;IACtB,CAAC,EACFR,KAAK,CAACI,KAAK,CACb;IACFqB,aAAa,EAAC;EAAM,gBAClBhC,KAAA,CAAAwB,aAAA,CAACpB,IAAI;IACHO,KAAK,EAAEN,KAAK,CAAC4B,IAAI,CAACC,YAAY,CAAC3B,KAAK,CAACI,KAAK,CAAE;IAC5CwB,aAAa,EAAC;EAAM,GACnB5B,KAAK,CAAC6B,KACH,CACO,CAAC;AAEtB,CAAC","ignoreList":[]}
+{"version":3,"names":["React","useEffect","useState","Animated","Text","Theme","FloatingLabel","props","_props$style","toNumber","value","fallback","fontSize","style","getAnimationValues","moveUp","hasLeading","leadingiconclass","x","y","scale","variant","initial","labelPositionX","Value","labelPositionY","labelScale","values","parallel","timing","toValue","duration","useNativeDriver","start","outlinedNotchStyle","backgroundColor","labelBackground","paddingLeft","paddingRight","filledWithLeadingIconStyle","createElement","View","position","zIndex","alignSelf","pointerEvents","transform","translateY","translateX","BASE","getTextStyle","ellipsizeMode","label"],"sources":["floatinglabel.component.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { Animated, TextStyle, Text, ViewStyle} from 'react-native';\n\nimport { Theme } from '@wavemaker/app-rn-runtime/styles/theme';\n\nexport const FloatingLabel = (props: {\n    label?: string,\n    style?: TextStyle & ViewStyle,\n    moveUp: boolean,\n    variant?: 'filled' | 'outlined',\n    labelBackground?: string;\n    leadingiconclass?: string;\n    inputHeight?: number;\n  }) => {\n  const toNumber = (value: unknown, fallback: number) => {\n    return typeof value === 'number' ? value : fallback;\n  };\n  const fontSize = toNumber(props.style?.fontSize, 16);\n\n  const getAnimationValues = (moveUp: boolean) => {\n    const hasLeading = !!props.leadingiconclass;\n    if (!moveUp) {\n      return { x: hasLeading ? 28 : 0, y: 0, scale: 1 };\n    }\n\n    switch (props.variant) {\n      case 'filled':\n        return { x: hasLeading ? 28 : 0, y: -1 * fontSize * 1, scale: 0.8 };\n      case 'outlined':\n        return { x: 0, y: -1 * (fontSize + 14), scale: 0.8 }; \n      default:\n        return { x: 0, y: -1 * (fontSize + 14), scale: 0.8 };\n    }\n  };\n\n\n\n  const initial = getAnimationValues(props.moveUp);\n  const [labelPositionX] = useState(new Animated.Value(initial.x));\n  const [labelPositionY] = useState(new Animated.Value( initial.y));\n  const [labelScale] = useState(new Animated.Value(initial.scale));\n\n    useEffect(() => {\n      const values = getAnimationValues(props.moveUp);\n      Animated.parallel([\n        Animated.timing(labelPositionX, {\n          toValue: values.x,\n          duration: 200,\n          useNativeDriver: true,\n        }),\n        Animated.timing(labelPositionY, {\n          toValue: values.y,\n          duration: 200,\n          useNativeDriver: true,\n        }),\n        Animated.timing(labelScale, {\n          toValue: values.scale,\n          duration: 200,\n          useNativeDriver: true,\n        })\n      ]).start();\n    }, [props.moveUp]);\n\n    const outlinedNotchStyle = (props.variant != 'filled' && props.moveUp) ? {\n      backgroundColor: props.labelBackground || 'transparent',\n      paddingLeft: 4,\n      paddingRight: 4\n    } : {};\n\n    const filledWithLeadingIconStyle = (props.variant === 'filled' && props.leadingiconclass) ? {\n      paddingLeft: 8\n    } : {};\n\n    return (\n        <Animated.View style={[{\n            position: 'absolute',\n            zIndex: 1,\n            alignSelf: 'flex-start',\n            pointerEvents: 'none',\n            transform: [\n                {translateY: labelPositionY},\n                {translateX: labelPositionX},\n                {scale: labelScale}\n            ]},\n            props.style,\n            outlinedNotchStyle,\n            filledWithLeadingIconStyle,\n            { pointerEvents: 'none' }\n        ]}\n        pointerEvents=\"none\">\n          <Text\n            style={[Theme.BASE.getTextStyle(props.style), { pointerEvents: 'none' }]}\n            ellipsizeMode=\"tail\">\n            {props.label}\n          </Text>\n        </Animated.View>\n    );\n  };\n"],"mappings":"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","ignoreList":[]}

package/core/components/textinput.component.js

@@ -33,23 +33,6 @@ const WmCursor = /*#__PURE__*/React.memo(props => {
     }
   });
 });
-
-// TODO: Monika WMS-31071 - Consider these improvements:
-// 1. 'words' mode: Use full Title Case regex: text.replace(/\b\w+/g, word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
-// 2. 'sentences' mode: Add newline handling with regex: /(^|\.\s+|\!\s+|\?\s+|\n\s*)(\w)/g
-// 3. Add TypeScript type for mode: type AutoCapitalizeMode = 'none' | 'sentences' | 'words' | 'characters'
-const applyAutoCapitalize = (text, mode) => {
-  switch (mode) {
-    case 'characters':
-      return text.toUpperCase();
-    case 'words':
-      return text.replace(/\b\w/g, c => c.toUpperCase());
-    case 'sentences':
-      return text.replace(/(^\w|[.!?]\s+\w)/g, c => c.toUpperCase());
-    default:
-      return text;
-  }
-};
 export const WMTextInput = /*#__PURE__*/React.forwardRef((props, ref) => {
   var _props$customDisplayV, _props$floatingLabel;
   const [selectRange, setSelectRange] = useState(null);
@@ -146,9 +129,12 @@ export const WMTextInput = /*#__PURE__*/React.forwardRef((props, ref) => {
   return /*#__PURE__*/React.createElement(React.Fragment, null, props.background, props.floatingLabel ? /*#__PURE__*/React.createElement(FloatingLabel, {
     moveUp: !!(value.current || props.isInputFocused || displayValue),
     label: (_props$floatingLabel = props.floatingLabel) !== null && _props$floatingLabel !== void 0 ? _props$floatingLabel : props.placeholder,
+    variant: props.variant,
+    labelBackground: props.labelBackground,
+    leadingiconclass: props.leadingiconclass,
     style: {
       ...(props.floatingLabelStyle || []),
-      ...(props.isInputFocused ? props.activeFloatingLabelStyle || {} : value.current || displayValue ? props.inactiveFloatingLabelStyle || {} : {})
+      ...(props.isInputFocused ? props.activeFloatingLabelStyle || {} : {})
     }
   }) : null, Platform.OS === 'android' && !props.editable ? /*#__PURE__*/React.createElement(Text, _extends({
     style: [props.style, hideInput ? {
@@ -198,8 +184,8 @@ export const WMTextInput = /*#__PURE__*/React.forwardRef((props, ref) => {
     onSelectionChange: onSelectionChange,
     caretHidden: !!(selectRange !== null && selectRange !== void 0 && selectRange.end),
     onChangeText: text => {
-      if (Platform.OS === 'web' && props.autoCapitalize && props.autoCapitalize !== 'none') {
-        onChangeText(applyAutoCapitalize(text, props.autoCapitalize));
+      if (props.autoCapitalize && props.autoCapitalize === 'characters') {
+        onChangeText(text.toUpperCase());
         return;
       }
       onChangeText(text);