@wix/design-system 1.146.1 → 1.147.0

package/dist/cjs/Input/Input.js

@@ -2,490 +2,362 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
-exports.default = void 0;
+exports.default = exports.Input = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _InputSt = require("./Input.st.css.js");
 var _InputContext = require("./InputContext");
-var _Input2 = require("./Input.constants");
 var _StatusIndicator = require("../StatusIndicator/StatusIndicator.constants");
+var _Input = require("./Input.constants");
 var _Ticker = _interopRequireDefault(require("./Ticker"));
 var _IconAffix = _interopRequireDefault(require("./IconAffix"));
 var _Affix = _interopRequireDefault(require("./Affix"));
 var _Group = _interopRequireDefault(require("./Group"));
-var _InputSuffix = _interopRequireWildcard(require("./InputSuffix"));
 var _context = require("../WixStyleReactMaskingProvider/context");
 var _WixStyleReactDefaultsOverrideProvider = require("../WixStyleReactDefaultsOverrideProvider");
+var _context2 = require("../WixDesignSystemProvider/context");
 var _StatusContext = require("../FormField/StatusContext");
-var _excluded = ["customInput", "ref"],
-  _excluded2 = ["className"];
+var _useAutoFocusAndSelect = require("./hooks/useAutoFocusAndSelect");
+var _transformAriaKebabCase = require("./utils/transformAriaKebabCase");
+var _Suffix = require("./components/Suffix/Suffix");
+var _excluded = ["autoSelect", "textOverflow", "size", "hideStatusSuffix", "clearButton", "focusOnClearClick", "border", "maxLength", "autoFocus", "onFocus", "onBlur", "value", "customInput", "min", "max", "step", "inputRef", "id", "name", "disabled", "defaultValue", "onChange", "type", "onKeyDown", "onEnterPressed", "onEscapePressed", "onPaste", "placeholder", "tabIndex", "onInputClicked", "onKeyUp", "readOnly", "disableEditing", "required", "autocomplete", "onCompositionChange", "pattern", "prefix", "suffix", "className", "status", "statusMessage", "onClear", "menuArrow", "rtl", "dataHook", "forceFocus", "noRightBorderRadius", "noLeftBorderRadius", "forceHover", "tooltipPlacement", "clearButtonTooltipContent", "clearButtonTooltipProps", "statusMessageTooltipProps"];
 var _jsxFileName = "/home/builduser/work/b60d7defec63c7cc/packages/wix-design-system/dist/cjs/Input/Input.tsx";
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var clearButtonSizeMap = {
-  [_Input2.SIZES.tiny]: 'small',
-  [_Input2.SIZES.small]: 'small',
-  [_Input2.SIZES.medium]: 'medium',
-  [_Input2.SIZES.large]: 'medium'
-};
-class Input extends _react.Component {
-  constructor(_props) {
-    var _this;
-    super(_props);
-    _this = this;
-    this.context = void 0;
-    this._isMounted = void 0;
-    this.isComposing = void 0;
-    this.input = null;
-    this._onCompositionChange = isComposing => {
-      if (this.props.onCompositionChange) {
-        this.props.onCompositionChange(isComposing);
-      }
-      this.isComposing = isComposing;
-    };
-    this._extractRef = ref => {
-      var {
-        inputRef
-      } = this.props;
-      this.input = ref;
-      if (inputRef) {
-        inputRef(ref);
-      }
-    };
-    this._handleSuffixOnClear = event => {
-      var {
-        focusOnClearClick
-      } = this.props;
-      focusOnClearClick && this.focus();
-      this.clear(event);
-    };
-    this._onFocus = event => {
-      var {
-        onFocus
-      } = this.props;
-      this._isMounted && this.setState({
-        focus: true
-      });
-      onFocus && onFocus(event);
-      if (this.props.autoSelect) {
-        // Set timeout is needed here since onFocus is called before react
-        // gets the reference for the input (specifically when autoFocus
-        // is on. So setTimeout ensures we have the ref.input needed in select)
-        setTimeout(() => {
-          /**
-            here we trying to cover edge case with chrome forms autofill,
-            after user will trigger chrome form autofill, onFocus will be called for each input,
-            each input will cause this.select, select may(mostly all time) cause new onFocus,
-            which will cause new this.select, ..., we have recursion which will all time randomly cause
-            inputs to become focused.
-            To prevent this, we check, that current input node is equal to focused node.
-          */
-          if (document && document.activeElement === this.input) {
-            this.select();
-          }
-        }, 0);
-      }
-    };
-    this._onBlur = event => {
-      this.setState({
-        focus: false
-      });
-      if (this.props.onBlur) {
-        this.props.onBlur(event);
-      }
-    };
-    this._onClick = event => {
-      this.props.onInputClicked && this.props.onInputClicked(event);
-    };
-    this._onKeyDown = event => {
-      if (this.isComposing) {
-        return;
-      }
-      var {
-        onKeyDown,
-        onEnterPressed,
-        onEscapePressed
-      } = this.props;
-
-      // On key event
-      onKeyDown && onKeyDown(event);
-
-      // Enter
-      if (event.key === 'Enter' || event.keyCode === 13) {
-        onEnterPressed && onEnterPressed(event);
-      }
-
-      // Escape
-      if (event.key === 'Escape' || event.keyCode === 27) {
-        onEscapePressed && onEscapePressed(event);
-      }
-    };
-    this._isValidInput = value => {
-      var {
-        type
-      } = this.props;
-      if (type === 'number') {
-        /*
-         * Limit our number input to contain only:
-         * - \d - digits
-         * - .  - a dot
-         * - ,  - a comma
-         * - \- - a hyphen minus
-         * - +  - a plus sign
-         */
-        return /^[\d.,\-+]*$/.test(value);
-      }
-      return true;
-    };
-    this._onChange = event => {
-      var {
-        onChange
-      } = this.props;
-      if (this._isValidInput(event.target.value)) {
-        onChange && onChange(event);
-      }
-    };
-    this._onKeyPress = event => {
-      if (!this._isValidInput(event.currentTarget.value + event.key)) {
-        event.preventDefault();
-      }
-    };
-    this._renderInput = props => {
-      var {
-          customInput,
-          ref
-        } = props,
-        rest = (0, _objectWithoutProperties2.default)(props, _excluded);
-      var CustomInputComponent = customInput;
-      var inputProps = _objectSpread({}, CustomInputComponent ? _objectSpread(_objectSpread({
-        ref
-      }, rest), {}, {
-        'data-hook': 'wsr-custom-input'
-      }) : _objectSpread({
-        ref
-      }, rest));
-      return /*#__PURE__*/_react.default.cloneElement(CustomInputComponent ? /*#__PURE__*/_react.default.createElement(CustomInputComponent, {
-        __self: this,
-        __source: {
-          fileName: _jsxFileName,
-          lineNumber: 294,
-          columnNumber: 30
-        }
-      }) : /*#__PURE__*/_react.default.createElement("input", {
-        __self: this,
-        __source: {
-          fileName: _jsxFileName,
-          lineNumber: 294,
-          columnNumber: 57
-        }
-      }), inputProps);
-    };
-    this._shouldShowStatusSuffix = _ref => {
-      var {
-        finalStatus,
-        statusFromProp
-      } = _ref;
-      return !this.props.hideStatusSuffix && (!!statusFromProp || finalStatus === 'loading') && finalStatus && Object.values(_StatusIndicator.STATUS).includes(finalStatus);
-    };
+var Input = exports.Input = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  var {
+    input: inputPropsDefaults
+  } = (0, _react.useContext)(_WixStyleReactDefaultsOverrideProvider.WixStyleReactDefaultsOverrideContext);
+  var {
+      autoSelect = true,
+      textOverflow = 'clip',
+      size = inputPropsDefaults.size,
+      hideStatusSuffix = false,
+      clearButton = false,
+      focusOnClearClick = true,
+      border = 'standard',
+      maxLength = 524288,
+      autoFocus,
+      onFocus,
+      onBlur,
+      value,
+      customInput,
+      min,
+      max,
+      step,
+      inputRef,
+      id,
+      name,
+      disabled,
+      defaultValue,
+      onChange,
+      type,
+      onKeyDown,
+      onEnterPressed,
+      onEscapePressed,
+      onPaste,
+      placeholder,
+      tabIndex,
+      onInputClicked,
+      onKeyUp,
+      readOnly,
+      disableEditing,
+      required,
+      autocomplete,
+      onCompositionChange,
+      pattern,
+      prefix,
+      suffix,
+      className,
+      status,
+      statusMessage,
+      onClear,
+      menuArrow,
+      rtl,
+      dataHook,
+      forceFocus,
+      noRightBorderRadius,
+      noLeftBorderRadius,
+      forceHover,
+      tooltipPlacement,
+      clearButtonTooltipContent,
+      clearButtonTooltipProps,
+      statusMessageTooltipProps
+    } = props,
+    rest = (0, _objectWithoutProperties2.default)(props, _excluded);
+  var isComposing = (0, _react.useRef)(false);
+  var localInputRef = (0, _react.useRef)(null);
+  var {
+    maskingClassNames
+  } = (0, _react.useContext)(_context.WixStyleReactMaskingContext);
+  var statusContext = (0, _react.useContext)(_StatusContext.StatusContext);
+  var {
+    newColorsBranding
+  } = (0, _react.useContext)(_context2.WixDesignSystemContext);
+  var {
+    _onFocus,
+    _onBlur,
+    isFocused
+  } = (0, _useAutoFocusAndSelect.useAutoFocusAndSelect)({
+    localInputRef,
+    onFocus,
+    onBlur,
+    autoFocus,
+    autoSelect,
+    value
+  });
+  (0, _react.useImperativeHandle)(ref, () => ({
     /**
      * Sets focus on the input element
-     * @param {FocusOptions} options
      */
-    this.focus = function () {
+    focus: function focus() {
+      var _localInputRef$curren;
       var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-      _this.input && _this.input.focus(options);
-    };
+      return (_localInputRef$curren = localInputRef.current) == null ? void 0 : _localInputRef$curren.focus(options);
+    },
     /**
-     * Removes focus on the input element
+     * Removes focus from the input element
      */
-    this.blur = () => {
-      this.input && this.input.blur();
-    };
+    blur: () => {
+      var _localInputRef$curren2;
+      return (_localInputRef$curren2 = localInputRef.current) == null ? void 0 : _localInputRef$curren2.blur();
+    },
     /**
-     * Selects all text in the input element
+     * Selects the text in the input element
      */
-    this.select = () => {
-      this.input && this.input.select();
-    };
+    select: () => {
+      var _localInputRef$curren3;
+      return (_localInputRef$curren3 = localInputRef.current) == null ? void 0 : _localInputRef$curren3.select();
+    },
     /**
      * Sets the start and end positions of the current text selection in the input element
      */
-    this.setSelectionRange = (start, end) => {
-      this.input && this.input.setSelectionRange(start, end);
-    };
+    setSelectionRange: (start, end) => {
+      var _localInputRef$curren4;
+      return (_localInputRef$curren4 = localInputRef.current) == null ? void 0 : _localInputRef$curren4.setSelectionRange(start, end);
+    },
     /**
-     * Clears the input.
-     * Fires onClear with the given event triggered on the clear button
-     *
-     * @param event delegated to the onClear call
+     * Clears the input value
      */
-    this.clear = event => {
-      var {
-        onClear
-      } = this.props;
-      if (!this._isControlled && this.input) {
-        this.input.value = '';
+    clear: event => {
+      // If the value is undefined, we are dealing with an uncontrolled input
+      if (value === undefined && localInputRef.current) {
+        localInputRef.current.value = '';
       }
-      onClear && onClear(event);
-    };
-    this._isMounted = false;
-    this.state = {
-      focus: false
-    };
-  }
-  componentDidMount() {
-    this._isMounted = true;
-    var {
-      autoFocus,
-      value
-    } = this.props;
-    autoFocus && this._onFocus();
+      onClear == null || onClear(event);
+    }
+  }));
 
-    /*
-     * autoFocus doesn't automatically selects text like focus do.
-     * Therefore we set the selection range, but in order to support prior implementation we set the start position as the end in order to place the cursor there.
-     */
-    if (autoFocus && !!value) {
-      var _this$input;
-      (_this$input = this.input) == null || _this$input.setSelectionRange(String(value).length, String(value).length);
+  /**
+   * Legacy reason to still support inputRef prop as prop.
+   */
+  (0, _react.useEffect)(() => {
+    if (inputRef && localInputRef.current) {
+      inputRef(localInputRef.current);
+    }
+  }, [inputRef]);
+  var isValid = (0, _react.useCallback)(val => {
+    if (type === 'number') {
+      /*
+       * Limit our number input to contain only:
+       * - \d - digits
+       * - .  - a dot
+       * - ,  - a comma
+       * - \- - a hyphen minus
+       * - +  - a plus sign
+       */
+      return /^[\d.,\-+]*$/.test(val);
+    }
+    return true;
+  }, [type]);
+  var _onChange = (0, _react.useCallback)(event => {
+    if (isValid(event.target.value)) {
+      onChange == null || onChange(event);
+    }
+  }, [isValid, onChange]);
+  var _onKeyPress = (0, _react.useCallback)(event => {
+    if (!isValid(event.currentTarget.value + event.key)) {
+      event.preventDefault();
+    }
+  }, [isValid]);
+  var _onWheel = (0, _react.useCallback)(() => {
+    if (type === 'number') {
+      var _localInputRef$curren5;
+      (_localInputRef$curren5 = localInputRef.current) == null || _localInputRef$curren5.blur();
+    }
+  }, [type]);
+  var _onKeyDown = (0, _react.useCallback)(event => {
+    if (isComposing.current) {
+      return;
     }
-  }
-  componentWillUnmount() {
-    this._isMounted = false;
-  }
-  get _isClearFeatureEnabled() {
-    var {
-      onClear,
-      clearButton
-    } = this.props;
-    return !!onClear || !!clearButton;
-  }
-  get _isControlled() {
-    var {
-      value
-    } = this.props;
-    return value !== undefined;
-  }
-  render() {
-    var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    var {
-      input: inputPropsDefaults
-    } = this.context;
-    var {
-      id,
-      name,
-      value,
-      placeholder,
-      menuArrow,
-      defaultValue,
-      tabIndex,
-      autoFocus,
-      onKeyUp,
-      onPaste,
-      disableEditing,
-      readOnly,
-      prefix,
-      suffix,
-      type,
-      maxLength,
-      textOverflow,
-      disabled,
-      status: statusProp,
-      statusMessage,
-      statusMessageTooltipProps,
-      tooltipPlacement,
-      autocomplete,
-      min,
-      max,
-      step,
-      required,
-      customInput,
-      pattern,
-      size = inputPropsDefaults.size,
-      clearButtonTooltipContent,
-      clearButtonTooltipProps
-    } = this.props;
-    var onIconClicked = event => {
-      if (!disabled) {
-        this.input && this.input.focus();
-        this._onClick(event);
-      }
-    };
 
-    // this doesn't work for uncontrolled, "value" refers only to controlled input
-    var isClearButtonVisible = this._isClearFeatureEnabled && !!value && !disabled;
+    // On key event
+    onKeyDown == null || onKeyDown(event);
 
-    // Aria Attributes
-    var shouldRenderSuffix = _ref2 => {
-      var {
-        finalStatus,
-        statusFromProp
-      } = _ref2;
-      var visibleSuffixCount = (0, _InputSuffix.getVisibleSuffixCount)({
-        status: this._shouldShowStatusSuffix({
-          finalStatus,
-          statusFromProp
-        }),
-        statusMessage,
-        disabled,
-        isClearButtonVisible,
-        menuArrow,
-        suffix
-      });
-      return visibleSuffixCount > 0;
-    };
-    var ariaAttribute = {};
-    var propsKeys = Object.keys(this.props);
-    propsKeys.filter(key => key.startsWith('aria')).map(key => ariaAttribute['aria-' + key.substr(4).toLowerCase()] = this.props[key]);
-    var {
-        className
-      } = props,
-      inputElementProps = (0, _objectWithoutProperties2.default)(props, _excluded2);
-    var inputElement = /*#__PURE__*/_react.default.createElement(_context.WixStyleReactMaskingContext.Consumer, {
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 441,
-        columnNumber: 7
-      }
-    }, _ref3 => {
-      var {
-        maskingClassNames
-      } = _ref3;
-      return /*#__PURE__*/_react.default.createElement(_StatusContext.StatusContext.Consumer, {
-        __self: this,
-        __source: {
-          fileName: _jsxFileName,
-          lineNumber: 443,
-          columnNumber: 11
-        }
-      }, statusContext => this._renderInput(_objectSpread(_objectSpread(_objectSpread({
-        min,
-        max,
-        step,
-        'data-hook': 'wsr-input',
-        'data-mask': !!maskingClassNames,
-        style: {
-          textOverflow
-        },
-        ref: this._extractRef,
-        className: (0, _InputSt.st)(_InputSt.classes.input, {}, maskingClassNames),
-        id,
-        name,
-        disabled,
-        defaultValue,
-        value,
-        onChange: this._onChange,
-        onKeyPress: this._onKeyPress,
-        maxLength,
-        onFocus: this._onFocus,
-        onBlur: this._onBlur,
-        onWheel: () => {
-          // Although it's opposed to the native behavior, we decided to blur an input type="number" on wheel event in order to prevent change in value.
-          if (type === 'number') this.blur();
-        },
-        onKeyDown: this._onKeyDown,
-        onPaste,
-        placeholder,
-        tabIndex,
-        autoFocus,
-        onClick: this._onClick,
-        onKeyUp,
-        readOnly: readOnly || disableEditing,
-        type,
-        required,
-        autoComplete: autocomplete,
-        onCompositionStart: () => this._onCompositionChange(true),
-        onCompositionEnd: () => this._onCompositionChange(false),
-        customInput,
-        pattern
-      }, (0, _StatusContext.getAriaAttributesFromContext)(statusContext)), ariaAttribute), inputElementProps)));
-    });
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: _InputSt.classes.wrapper,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 494,
-        columnNumber: 7
-      }
-    }, prefix && /*#__PURE__*/_react.default.createElement(_InputContext.InputContext.Provider, {
-      value: _objectSpread(_objectSpread({}, this.props), {}, {
-        size,
-        inPrefix: true
-      }),
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 497,
-        columnNumber: 11
-      }
-    }, prefix), inputElement, /*#__PURE__*/_react.default.createElement(_InputContext.InputContext.Provider, {
-      value: _objectSpread(_objectSpread({}, this.props), {}, {
-        size,
-        inSuffix: true
-      }),
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 508,
-        columnNumber: 9
-      }
-    }, /*#__PURE__*/_react.default.createElement(_StatusContext.StatusContext.Consumer, {
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 509,
-        columnNumber: 11
-      }
-    }, statusContext => {
-      var _getStatusFromContext;
-      var status = (_getStatusFromContext = (0, _StatusContext.getStatusFromContext)(statusContext, statusProp)) !== null && _getStatusFromContext !== void 0 ? _getStatusFromContext : undefined;
-      return shouldRenderSuffix({
-        finalStatus: status,
-        statusFromProp: statusProp
-      }) && /*#__PURE__*/_react.default.createElement(_InputSuffix.default, {
-        status: this._shouldShowStatusSuffix({
-          finalStatus: status,
-          statusFromProp: statusProp
-        }) ? status : undefined,
-        statusMessage: statusMessage,
-        disabled: disabled,
-        onIconClicked: onIconClicked,
-        isClearButtonVisible: isClearButtonVisible,
-        onClear: this._handleSuffixOnClear,
-        clearButtonSize: clearButtonSizeMap[size !== null && size !== void 0 ? size : _Input2.SIZES.medium],
-        menuArrow: menuArrow,
-        suffix: suffix,
-        statusMessageTooltipProps: _objectSpread({
-          placement: tooltipPlacement
-        }, statusMessageTooltipProps),
-        clearButtonTooltipContent: clearButtonTooltipContent,
-        clearButtonTooltipProps: clearButtonTooltipProps,
-        __self: this,
-        __source: {
-          fileName: _jsxFileName,
-          lineNumber: 519,
-          columnNumber: 19
-        }
-      });
-    })));
-  }
-}
-Input.displayName = 'Input';
-Input.defaultProps = {
-  focusOnClearClick: true,
-  autoSelect: true,
-  border: 'standard',
-  textOverflow: 'clip',
-  maxLength: 524288,
-  clearButton: false,
-  hideStatusSuffix: false
-};
+    // Enter
+    if (event.key === 'Enter' || event.keyCode === 13) {
+      onEnterPressed == null || onEnterPressed(event);
+    }
+
+    // Escape
+    if (event.key === 'Escape' || event.keyCode === 27) {
+      onEscapePressed == null || onEscapePressed(event);
+    }
+  }, [isComposing, onEnterPressed, onEscapePressed, onKeyDown]);
+  var _onClick = (0, _react.useCallback)(event => onInputClicked == null ? void 0 : onInputClicked(event), [onInputClicked]);
+  var _onCompositionChange = (0, _react.useCallback)(composing => {
+    isComposing.current = composing;
+    onCompositionChange == null || onCompositionChange(composing);
+  }, [onCompositionChange]);
+  var commonProps = _objectSpread(_objectSpread({
+    id,
+    min,
+    max,
+    step,
+    'data-mask': !!maskingClassNames,
+    className: (0, _InputSt.st)(_InputSt.classes.input, {}, maskingClassNames),
+    style: {
+      textOverflow
+    },
+    name,
+    disabled,
+    defaultValue,
+    value,
+    onFocus: _onFocus,
+    onBlur: _onBlur,
+    onChange: _onChange,
+    onKeyPress: _onKeyPress,
+    onWheel: _onWheel,
+    onKeyDown: _onKeyDown,
+    onClick: _onClick,
+    onPaste,
+    placeholder,
+    tabIndex,
+    onKeyUp,
+    readOnly: readOnly || disableEditing,
+    type,
+    required,
+    autoComplete: autocomplete,
+    onCompositionStart: () => _onCompositionChange(true),
+    onCompositionEnd: () => _onCompositionChange(false),
+    pattern,
+    maxLength
+  }, (0, _StatusContext.getAriaAttributesFromContext)(statusContext)), (0, _transformAriaKebabCase.transformAriaKebabCase)(rest));
+  var CustomInputComponent = customInput;
+  var inputElement = customInput ? /*#__PURE__*/_react.default.createElement(CustomInputComponent, (0, _extends2.default)({
+    "data-hook": "wsr-custom-input",
+    ref: localInputRef
+  }, commonProps, {
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 268,
+      columnNumber: 7
+    }
+  })) : /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({
+    "data-hook": "wsr-input",
+    ref: localInputRef
+  }, commonProps, {
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 274,
+      columnNumber: 7
+    }
+  }));
+  var dataAttributes = {
+    [_Input.DATA_ATTR.SIZE]: size,
+    [_Input.DATA_ATTR.STATUS]: (0, _StatusContext.getStatusFromContext)(statusContext, status),
+    [_Input.DATA_ATTR.PREFIX]: !!prefix,
+    [_Input.DATA_ATTR.DISABLED]: disabled,
+    [_Input.DATA_ATTR.HOVER]: forceHover,
+    [_Input.DATA_ATTR.FOCUS]: forceFocus || isFocused,
+    [_Input.DATA_ATTR.LEFTBORDERRADIUS]: noLeftBorderRadius,
+    [_Input.DATA_ATTR.RIGHTBORDERRADIUS]: noRightBorderRadius
+  };
+  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+    className: (0, _InputSt.st)(_InputSt.classes.root, {
+      size,
+      hasFocus: forceFocus || isFocused,
+      status: (0, _StatusContext.getStatusFromContext)(statusContext, status),
+      forceHover,
+      readOnly,
+      disabled,
+      border,
+      noRightBorderRadius,
+      noLeftBorderRadius,
+      newColorsBranding
+    }, className),
+    dir: rtl ? 'rtl' : undefined,
+    "data-hook": dataHook
+  }, dataAttributes, {
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 289,
+      columnNumber: 7
+    }
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: _InputSt.classes.wrapper,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 310,
+      columnNumber: 9
+    }
+  }, prefix && /*#__PURE__*/_react.default.createElement(_InputContext.InputContext.Provider, {
+    value: _objectSpread(_objectSpread({}, props), {}, {
+      size,
+      inPrefix: true
+    }),
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 312,
+      columnNumber: 13
+    }
+  }, prefix), inputElement, /*#__PURE__*/_react.default.createElement(_InputContext.InputContext.Provider, {
+    value: _objectSpread(_objectSpread({}, props), {}, {
+      size,
+      inSuffix: true
+    }),
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 319,
+      columnNumber: 11
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Suffix.Suffix, {
+    statusMessage: statusMessage,
+    status: status,
+    disabled: disabled,
+    menuArrow: menuArrow,
+    suffix: suffix,
+    tooltipPlacement: tooltipPlacement,
+    clearButtonTooltipContent: clearButtonTooltipContent,
+    clearButtonTooltipProps: clearButtonTooltipProps,
+    statusMessageTooltipProps: statusMessageTooltipProps,
+    hideStatusSuffix: hideStatusSuffix,
+    onClear: onClear,
+    clearButton: clearButton,
+    value: value,
+    size: size,
+    onInputClicked: onInputClicked,
+    focusOnClearClick: focusOnClearClick,
+    inputElementRef: localInputRef,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 320,
+      columnNumber: 13
+    }
+  }))));
+});
 Input.propTypes = {
   dataHook: _propTypes.default.any,
   className: _propTypes.default.any,
@@ -545,13 +417,14 @@ Input.propTypes = {
   clearButtonTooltipProps: _propTypes.default.any,
   statusMessageTooltipProps: _propTypes.default.any
 };
-Input.contextType = _WixStyleReactDefaultsOverrideProvider.WixStyleReactDefaultsOverrideContext;
-Input.Ticker = _Ticker.default;
-Input.IconAffix = _IconAffix.default;
-Input.Affix = _Affix.default;
-Input.Group = _Group.default;
-Input.StatusError = _StatusIndicator.STATUS.ERROR;
-Input.StatusWarning = _StatusIndicator.STATUS.WARNING;
-Input.StatusLoading = _StatusIndicator.STATUS.LOADING;
-var _default = exports.default = Input;
+Input.displayName = 'Input';
+var _default = exports.default = Object.assign(Input, {
+  Ticker: _Ticker.default,
+  IconAffix: _IconAffix.default,
+  Affix: _Affix.default,
+  Group: _Group.default,
+  StatusError: _StatusIndicator.STATUS.ERROR,
+  StatusWarning: _StatusIndicator.STATUS.WARNING,
+  StatusLoading: _StatusIndicator.STATUS.LOADING
+});
 //# sourceMappingURL=Input.js.map