react-native-ui-lib 8.5.1 → 8.5.2-snapshot.8005

package/src/components/wizard/types.d.ts

@@ -73,7 +73,7 @@ export interface WizardProps {
      */
     activeIndex: number;
     /**
-     * The configuration of the active step (see Wizard.Step.propTypes)
+     * The configuration of the active step
      */
     activeConfig?: WizardStepProps;
     /**

package/src/components/wizard/wizard.api.json

@@ -17,7 +17,7 @@
     {
       "name": "activeConfig",
       "type": "WizardStepProps",
-      "description": "The configuration of the active step (see Wizard.Step.propTypes)"
+      "description": "The configuration of the active step"
     },
     {
       "name": "onActiveIndexChanged",

package/src/helpers/AvatarHelper.d.ts

@@ -2,7 +2,7 @@ export declare function getInitialsTypography(size: number): import("react-nativ
 export declare function hashStringToNumber(str?: string): number;
 export declare function getAvatarColors(): string[];
 export declare function getColorById(id: string, avatarColors?: string[]): string;
-export declare function getInitials(name?: string, limit?: number): Uppercase<string>;
+export declare function getInitials(name?: string, limit?: number): string;
 export declare function getBackgroundColor(name?: string, avatarColors?: string[], hashFunction?: (name?: string) => number, defaultColor?: string): string | undefined;
 export declare function isGravatarUrl(url: string): boolean;
 export declare function isBlankGravatarUrl(url: string): boolean;

package/src/hooks/useCombinedRefs/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 const useCombinedRefs = (...refs) => {
-  const targetRef = React.useRef();
+  const targetRef = React.useRef(undefined);
   React.useEffect(() => {
     refs.forEach(ref => {
       if (!ref) {
@@ -9,7 +9,6 @@ const useCombinedRefs = (...refs) => {
       if (typeof ref === 'function') {
         ref(targetRef.current);
       } else {
-        // @ts-expect-error
         ref.current = targetRef.current;
       }
     });

package/src/hooks/useDebounce/index.js

@@ -4,7 +4,7 @@ import { useCallback, useRef } from 'react';
  * This hook is used to debounce a function call
  */
 function useDebounce(func, timeout = 300) {
-  const handler = useRef();
+  const handler = useRef(undefined);
   const debouncedFunction = useCallback(args => {
     if (handler.current) {
       clearTimeout(handler.current);

package/src/hooks/useHiddenLocation/index.js

@@ -20,8 +20,8 @@ export default function useHiddenLocation() {
     };
   };
   const [hiddenLocation, setHiddenLocation] = useState(getHiddenLocation({}));
-  const ref = useRef();
-  const layoutData = useRef();
+  const ref = useRef(undefined);
+  const layoutData = useRef(undefined);
   const wasMeasured = useRef(wasMeasuredDefaultValue);
   const measure = useCallback(() => {
     if (ref.current && layoutData.current && layoutData.current.width > 0 && layoutData.current.height > 0) {

package/src/hooks/useHiddenLocation/index.web.js

@@ -16,8 +16,8 @@ export default function useHiddenLocation() {
     };
   };
   const [hiddenLocation, setHiddenLocation] = useState(getHiddenLocation({}));
-  const ref = useRef();
-  const layoutData = useRef();
+  const ref = useRef(undefined);
+  const layoutData = useRef(undefined);
   const wasMeasured = useRef(wasMeasuredDefaultValue);
   const measure = useCallback(() => {
     if (ref.current) {

package/src/hooks/useMeasure/index.d.ts

@@ -9,7 +9,7 @@ interface Measurements {
     pageY: number;
 }
 declare const _default: () => {
-    ref: import("react").MutableRefObject<RNView | undefined>;
+    ref: import("react").RefObject<RNView | undefined>;
     measurements: Measurements | undefined;
 };
 export default _default;

package/src/hooks/useMeasure/index.js

@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from 'react';
 export default () => {
-  const ref = useRef();
+  const ref = useRef(undefined);
   const [measurements, setMeasurements] = useState();
   const onMeasure = (x, y, width, height, pageX, pageY) => {
     setMeasurements({

package/src/hooks/useScrollTo/index.d.ts

@@ -5,7 +5,7 @@ export type ScrollToProps<T extends ScrollToSupportedViews> = {
     /**
      * A reference to the ScrollView (or FlatList) which the items are in
      */
-    scrollViewRef?: RefObject<T>;
+    scrollViewRef?: RefObject<T | null>;
     /**
      * Is the scroll view horizontal (default is true)
      */
@@ -15,7 +15,7 @@ export type ScrollToResultProps<T extends ScrollToSupportedViews> = {
     /**
      * A reference to the ScrollView (or FlatList) which the items are in (from the props or a created one)
      */
-    scrollViewRef: RefObject<T>;
+    scrollViewRef: RefObject<T | null>;
     /**
      * scrollTo callback.
      * offset - the x or y to scroll to.

package/src/incubator/calendar/index.js

@@ -42,7 +42,7 @@ function Calendar(props) {
     }
     return -1;
   }, [monthItems]);
-  const flashListRef = useRef();
+  const flashListRef = useRef(undefined);
   const current = useSharedValue(new Date(initialDate).setHours(0, 0, 0, 0));
   const initialMonthIndex = useRef(getItemIndex(current.value));
   const lastUpdateSource = useSharedValue(UpdateSource.INIT);

package/src/incubator/calendar/types.d.ts

@@ -111,8 +111,8 @@ export interface CalendarProps {
     showExtraDays?: boolean;
 }
 export interface AgendaProps {
-    renderEvent?: (event: Event) => React.ReactElement | null;
-    renderHeader?: (header: DateSectionHeader) => React.ReactElement | null;
+    renderEvent?: (event: Event) => React.ReactElement<any> | null;
+    renderHeader?: (header: DateSectionHeader) => React.ReactElement<any> | null;
     showLoader?: boolean;
     onEndReached?: (date: number) => void;
 }

package/src/incubator/expandableOverlay/index.d.ts

@@ -14,7 +14,7 @@ export type ExpandableOverlayProps = TouchableOpacityProps & PropsWithChildren<{
     /**
      * The content to render inside the expandable modal/dialog
      */
-    expandableContent?: React.ReactElement;
+    expandableContent?: React.ReactElement<any>;
     /**
      * Whether to use a dialog as expandable container (by default the container will be a full screen modal)
      */
@@ -38,7 +38,7 @@ export type ExpandableOverlayProps = TouchableOpacityProps & PropsWithChildren<{
     /**
      * A custom overlay to render instead of Modal or Dialog components
      */
-    renderCustomOverlay?: (props: RenderCustomOverlayProps) => React.ReactElement | undefined | null;
+    renderCustomOverlay?: (props: RenderCustomOverlayProps) => React.ReactElement<any> | undefined | null;
     /**
      * Disabled opening expandable overlay
      */

package/src/incubator/index.d.ts

@@ -7,3 +7,4 @@ export { default as Slider, SliderRef, SliderProps } from './slider';
 export { default as ChipsInput, ChipsInputProps, ChipsInputChangeReason, ChipsInputChipProps } from '../components/chipsInput';
 export { default as WheelPicker, WheelPickerProps, WheelPickerItemProps, WheelPickerAlign, WheelPickerItemValue } from '../components/WheelPicker';
 export { default as Gradient, GradientProps } from './gradient';
+export { default as Marquee, MarqueeDirections, MarqueeProps } from './marquee';

package/src/incubator/index.js

@@ -8,4 +8,5 @@ export { default as Slider, SliderRef, SliderProps } from "./slider";
 // TODO: delete exports after fully removing from private
 export { default as ChipsInput, ChipsInputProps, ChipsInputChangeReason, ChipsInputChipProps } from "../components/chipsInput";
 export { default as WheelPicker, WheelPickerProps, WheelPickerItemProps, WheelPickerAlign, WheelPickerItemValue } from "../components/WheelPicker";
-export { default as Gradient, GradientProps } from "./gradient";
+export { default as Gradient, GradientProps } from "./gradient";
+export { default as Marquee, MarqueeDirections, MarqueeProps } from "./marquee";

package/src/{components → incubator}/marquee/index.js

@@ -1,8 +1,8 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { StyleSheet } from 'react-native';
 import { useSharedValue, useAnimatedStyle, withTiming, withRepeat, Easing } from 'react-native-reanimated';
-import View from "../view";
-import Text from "../text";
+import View from "../../components/view";
+import Text from "../../components/text";
 import { MarqueeDirections, MarqueeProps } from "./types";
 const DEFAULT_DURATION = 3000;
 const DEFAULT_DURATION_PER_WORD = 250;

package/src/{components → incubator}/marquee/marquee.api.json

@@ -2,7 +2,7 @@
   "name": "Marquee",
   "category": "media",
   "description": "Marquee component for sliding text",
-  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/MarqueeScreen.tsx",
+  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/incubatorScreens/IncubatorMarqueeScreen.tsx",
   "props": [
     {"name": "label", "type": "string", "description": "Marquee label"},
     {"name": "labelStyle", "type": "TextProps['style']", "description": "Marquee label style"},

package/src/{components → incubator}/marquee/types.d.ts

@@ -1,6 +1,6 @@
 import type { PropsWithChildren } from 'react';
-import { TextProps } from '../text';
-import { ViewProps } from '../view';
+import { TextProps } from '../../components/text';
+import { ViewProps } from '../../components/view';
 export declare enum MarqueeDirections {
     RIGHT = "RIGHT",
     LEFT = "LEFT",

package/src/incubator/slider/Track.d.ts

@@ -6,7 +6,7 @@ export interface Props extends ViewProps {
     maximumTrackTintColor?: string;
     minimumTrackTintColor?: string;
     trackStyle?: StyleProp<ViewStyle>;
-    renderTrack?: () => ReactElement | ReactElement[];
+    renderTrack?: () => ReactElement<any> | ReactElement<any>[];
     onPress?: ((event: GestureResponderEvent) => void) | undefined;
 }
 declare const Track: (props: Props) => React.JSX.Element;

package/src/incubator/slider/index.d.ts

@@ -62,7 +62,7 @@ export interface SliderProps extends AccessibilityProps {
     /**
      * Custom render instead of rendering the track
      */
-    renderTrack?: () => ReactElement | ReactElement[];
+    renderTrack?: () => ReactElement<any> | ReactElement<any>[];
     /**
      * The thumb style
      */

package/src/incubator/toast/helpers/useToastTimer.js

@@ -3,7 +3,7 @@ export default ({
   autoDismiss,
   onDismiss
 }) => {
-  const timer = useRef();
+  const timer = useRef(undefined);
   const clearTimer = useCallback(() => {
     if (timer.current) {
       clearTimeout(timer.current);

package/src/incubator/toast/index.js

@@ -43,7 +43,7 @@ const Toast = props => {
     testID
   } = props;
   const directions = useRef([props.position === 'bottom' ? PanView.directions.DOWN : PanView.directions.UP, PanView.directions.LEFT, PanView.directions.RIGHT]);
-  const viewRef = useRef();
+  const viewRef = useRef(undefined);
   const [toastHeight, setToastHeight] = useState();
   const {
     clearTimer,

package/src/incubator/toast/types.d.ts

@@ -1,4 +1,4 @@
-import { ReactElement, ReactNode } from 'react';
+import { ReactElement, ReactNode, type JSX } from 'react';
 import { ImageSourcePropType, StyleProp, TextStyle, ViewStyle } from 'react-native';
 import { ButtonProps } from '../../components/button';
 import { TextProps } from '../../components/text';
@@ -52,7 +52,7 @@ export interface ToastProps {
     /**
      * should show a loader
      */
-    loaderElement?: ReactElement;
+    loaderElement?: ReactElement<any>;
     /**
      * callback for dismiss action
      */

package/src/index.d.ts

@@ -6,7 +6,7 @@ export * from 'uilib-native';
 export { asBaseComponent, Config, Constants, forwardRef, withScrollEnabler, WithScrollEnablerProps, withScrollReached, WithScrollReachedProps, UIComponent, BaseComponentInjectedProps, ForwardRefInjectedProps, ContainerModifiers, MarginModifiers, PaddingModifiers, TypographyModifiers, ColorsModifiers, BackgroundColorModifier } from './commons/new';
 export { BaseComponent, PureBaseComponent } from './commons';
 import * as Incubator from './incubator';
-export { ExpandableOverlayProps, ExpandableOverlayMethods, ToastProps, ToastPresets } from './incubator';
+export { ExpandableOverlayProps, ExpandableOverlayMethods, ToastProps, ToastPresets, MarqueeDirections, MarqueeProps } from './incubator';
 import * as Hooks from './hooks';
 import * as Modifiers from './commons/modifiers';
 export { default as LogService } from './services/LogService';
@@ -56,7 +56,6 @@ export { default as KeyboardAwareFlatList } from './components/KeyboardAwareScro
 export { default as ListItem, ListItemProps } from './components/listItem';
 export { default as LoaderScreen, LoaderScreenProps } from './components/loaderScreen';
 export { default as MaskedInput, MaskedInputProps } from './components/maskedInput';
-export { default as Marquee, MarqueeDirections, MarqueeProps } from './components/marquee';
 export { default as Modal, ModalProps, ModalTopBarProps } from './components/modal';
 export { default as NumberInput, NumberInputProps, NumberInputData } from './components/numberInput';
 export { default as Overlay, OverlayTypes } from './components/overlay';

package/src/index.js

@@ -28,6 +28,8 @@ var _exportNames = {
   ExpandableOverlayMethods: true,
   ToastProps: true,
   ToastPresets: true,
+  MarqueeDirections: true,
+  MarqueeProps: true,
   Incubator: true,
   Hooks: true,
   Modifiers: true,
@@ -139,9 +141,6 @@ var _exportNames = {
   LoaderScreenProps: true,
   MaskedInput: true,
   MaskedInputProps: true,
-  Marquee: true,
-  MarqueeDirections: true,
-  MarqueeProps: true,
   Modal: true,
   ModalProps: true,
   ModalTopBarProps: true,
@@ -911,22 +910,16 @@ Object.defineProperty(exports, "MarginModifiers", {
     return _new().MarginModifiers;
   }
 });
-Object.defineProperty(exports, "Marquee", {
-  enumerable: true,
-  get: function () {
-    return _marquee().default;
-  }
-});
 Object.defineProperty(exports, "MarqueeDirections", {
   enumerable: true,
   get: function () {
-    return _marquee().MarqueeDirections;
+    return Incubator().MarqueeDirections;
   }
 });
 Object.defineProperty(exports, "MarqueeProps", {
   enumerable: true,
   get: function () {
-    return _marquee().MarqueeProps;
+    return Incubator().MarqueeProps;
   }
 });
 Object.defineProperty(exports, "MaskedInput", {
@@ -2109,13 +2102,6 @@ function _maskedInput() {
   };
   return data;
 }
-function _marquee() {
-  const data = _interopRequireWildcard(require("./components/marquee"));
-  _marquee = function () {
-    return data;
-  };
-  return data;
-}
 function _modal() {
   const data = _interopRequireWildcard(require("./components/modal"));
   _modal = function () {

package/src/testkit/Component.driver.d.ts

@@ -1,3 +1,4 @@
+import type { JSX } from 'react';
 import { DragData, UniDriver, UniDriverClass } from './UniDriver';
 export type ComponentDriverArgs = {
     testID: string;

package/src/testkit/drivers/TestingLibraryDriver.d.ts

@@ -1,3 +1,4 @@
+import type { JSX } from 'react';
 import { DragData, UniDriver } from '../UniDriver';
 import { ReactTestInstance } from 'react-test-renderer';
 export declare class TestingLibraryDriver<Props> implements UniDriver<Props> {

package/src/typings/module.d.ts

@@ -3,11 +3,20 @@ declare namespace globalThis {
   var _UILIB_TESTING: boolean;
 }
 
+declare global {
+  // eslint-disable-next-line no-var
+  var _UILIB_TESTING: boolean;
+}
+
 // This support importing png files, typing wise
 declare module '*.png';
 
-declare namespace JSX {
-  interface IntrinsicAttributes {
-    fsTagName?: string;
+import 'react';
+
+declare module 'react' {
+  namespace JSX {
+    interface IntrinsicAttributes {
+      fsTagName?: string;
+    }
   }
 }

package/ReactNativeUiLib.podspec

@@ -1,22 +0,0 @@
-require 'json'
-
-package = JSON.parse(File.read(File.join(__dir__, 'lib/package.json')))
-
-Pod::Spec.new do |s|
-  s.name         = "ReactNativeUiLib"
-  s.version      = package['version']
-  s.summary      = "React Native UI Library"
-
-  s.authors      = "Wix.com"
-  s.homepage     = package['homepage']
-  s.license      = package['license']
-  s.platforms    = { :ios => "9.0", :tvos => "9.2" }
-
-  s.module_name  = 'ReactNativeUiLib'
-
-  s.source       = { :git => "https://github.com/wix/react-native-ui-lib.git", :tag => "#{s.version}" }
-  s.source_files  = "lib/ios/**/*.{h,m}"
-
-  s.dependency 'React'
-  s.frameworks = 'UIKit'
-end

package/marquee.d.ts

@@ -1,2 +0,0 @@
-import {Marquee} from './src';
-export default Marquee;

package/marquee.js

@@ -1 +0,0 @@
-module.exports = require('./src/components/marquee').default;

package/src/components/maskedInput/new.d.ts

@@ -1,22 +0,0 @@
-import React from 'react';
-import { TextInputProps, StyleProp, ViewStyle } from 'react-native';
-export interface MaskedInputProps extends Omit<TextInputProps, 'value'> {
-    /**
-     * Initial value to pass to masked input
-     */
-    initialValue?: string;
-    /**
-     * callback for rendering the custom input out of the value returns from the actual input
-     */
-    renderMaskedText?: (value?: string) => JSX.Element | undefined;
-    /**
-     * Custom formatter for the input value
-     */
-    formatter?: (value?: string) => string | undefined;
-    /**
-     * container style for the masked input container
-     */
-    containerStyle?: StyleProp<ViewStyle>;
-}
-declare const _default: React.ForwardRefExoticComponent<MaskedInputProps & React.RefAttributes<any>>;
-export default _default;

package/src/components/maskedInput/new.js

@@ -1,85 +0,0 @@
-import _isFunction from "lodash/isFunction";
-import _identity from "lodash/identity";
-import React, { useCallback, useEffect, useRef, useState, useImperativeHandle, forwardRef } from 'react';
-import { StyleSheet, Keyboard, TextInput } from 'react-native';
-import View from "../view";
-import Text from "../text";
-import TouchableOpacity from "../touchableOpacity";
-/**
- * @description: Mask Input to create custom looking inputs with custom formats
- * @gif: https://camo.githubusercontent.com/61eedb65e968845d5eac713dcd21a69691571fb1/68747470733a2f2f6d656469612e67697068792e636f6d2f6d656469612f4b5a5a7446666f486f454b334b2f67697068792e676966
- * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/MaskedInputScreen.tsx
- */
-function MaskedInput(props, ref) {
-  const {
-    initialValue,
-    formatter = _identity,
-    containerStyle,
-    renderMaskedText,
-    onChangeText,
-    ...others
-  } = props;
-  const [value, setValue] = useState(initialValue);
-  const inputRef = useRef();
-  const keyboardDidHideListener = useRef();
-  useImperativeHandle(ref, () => {
-    return {
-      isFocused: () => inputRef.current?.isFocused(),
-      focus,
-      blur: () => inputRef.current?.blur(),
-      clear: () => {
-        inputRef.current?.clear();
-        setValue('');
-        // NOTE: This fixes an RN issue - when triggering imperative clear method, it doesn't call onChangeText
-        onChangeText?.('');
-      }
-    };
-  });
-  useEffect(() => {
-    if (initialValue !== value) {
-      setValue(initialValue);
-    }
-  }, [initialValue]);
-  useEffect(() => {
-    keyboardDidHideListener.current = Keyboard.addListener('keyboardDidHide', () => {
-      if (inputRef.current?.isFocused()) {
-        inputRef.current?.blur();
-      }
-    });
-    return () => keyboardDidHideListener.current.remove();
-  }, []);
-  const _onChangeText = useCallback(value => {
-    const formattedValue = formatter(value) ?? '';
-    setValue(formattedValue);
-    onChangeText?.(formattedValue);
-  }, [onChangeText, formatter]);
-  const focus = useCallback(() => {
-    inputRef.current?.focus();
-  }, []);
-  const _renderMaskedText = () => {
-    if (_isFunction(renderMaskedText)) {
-      return renderMaskedText(value);
-    }
-    return <Text>{value}</Text>;
-  };
-  return <TouchableOpacity style={containerStyle} activeOpacity={1} onPress={focus}>
-      <TextInput {...others} value={value}
-    // @ts-expect-error
-    ref={inputRef} style={styles.hiddenInput} enableErrors={false} hideUnderline placeholder="" caretHidden multiline={false} onChangeText={_onChangeText} />
-      <View style={styles.maskedInputWrapper}>{_renderMaskedText()}</View>
-    </TouchableOpacity>;
-}
-const styles = StyleSheet.create({
-  hiddenInput: {
-    ...StyleSheet.absoluteFillObject,
-    zIndex: 1,
-    color: 'transparent',
-    backgroundColor: 'transparent',
-    height: undefined
-  },
-  maskedInputWrapper: {
-    zIndex: 0
-  }
-});
-MaskedInput.displayName = 'MaskedInput';
-export default forwardRef(MaskedInput);

package/src/components/maskedInput/old.js

@@ -1,95 +0,0 @@
-import _ from 'lodash';
-import PropTypes from 'prop-types';
-import React from 'react';
-import {StyleSheet, Keyboard} from 'react-native';
-import {ViewPropTypes} from 'deprecated-react-native-prop-types';
-import BaseInput from '../baseInput';
-import TextField from '../textFieldOld';
-import View from '../view';
-import Text from '../text';
-import TouchableOpacity from '../touchableOpacity';
-
-/**
- * @description: Mask Input to create custom looking inputs with custom formats
- * @gif: https://camo.githubusercontent.com/61eedb65e968845d5eac713dcd21a69691571fb1/68747470733a2f2f6d656469612e67697068792e636f6d2f6d656469612f4b5a5a7446666f486f454b334b2f67697068792e676966
- * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/MaskedInputScreen.tsx
- */
-export default class MaskedInput extends BaseInput {
-  static displayName = 'MaskedInput';
-  static propTypes = {
-    ...TextField.propTypes,
-    /**
-     * callback for rendering the custom input out of the value returns from the actual input
-     */
-    renderMaskedText: PropTypes.elementType.isRequired,
-    /**
-     * container style for the masked input container
-     */
-    containerStyle: ViewPropTypes.style
-  };
-
-  componentDidMount() {
-    this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', () => {
-      if (_.invoke(this, 'isFocused')) {
-        _.invoke(this, 'blur');
-      }
-    });
-  }
-
-  componentWillUnmount() {
-    this.keyboardDidHideListener.remove();
-  }
-
-  clear() {
-    this.setState({value: ''});
-    this.input.clear();
-  }
-
-  renderMaskedText() {
-    const {renderMaskedText} = this.props;
-    const {value} = this.state;
-
-    if (_.isFunction(renderMaskedText)) {
-      return renderMaskedText(value);
-    }
-    return <Text>{value}</Text>;
-  }
-
-  render() {
-    // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
-    const {containerStyle, style} = this.props;
-
-    return (
-      <TouchableOpacity style={containerStyle} activeOpacity={1} onPress={() => this.input.focus()}>
-        <TextField
-          ref={r => (this.input = r)}
-          containerStyle={styles.hiddenInputContainer}
-          style={styles.hiddenInput}
-          enableErrors={false}
-          hideUnderline
-          placeholder=""
-          {...this.props}
-          caretHidden
-          multiline={false}
-          onChangeText={this.onChangeText}
-        />
-        <View style={styles.maskedInputWrapper}>{this.renderMaskedText()}</View>
-      </TouchableOpacity>
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  hiddenInputContainer: {
-    ...StyleSheet.absoluteFillObject,
-    zIndex: 1
-  },
-  hiddenInput: {
-    color: 'transparent',
-    backgroundColor: 'transparent',
-    height: undefined
-  },
-  maskedInputWrapper: {
-    zIndex: 0
-  }
-});