"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
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 _InputSt = require("./Input.st.css.js");
var _InputContext = require("./InputContext");
var _StatusIndicator = require("../StatusIndicator/StatusIndicator.constants");
var _Input = require("./Input.constants");
var _Ticker = _interopRequireDefault(require("./components/Ticker"));
var _IconAffix = _interopRequireDefault(require("./components/IconAffix"));
var _Affix = _interopRequireDefault(require("./components/Affix"));
var _Group = _interopRequireDefault(require("./components/Group"));
var _context = require("../WixStyleReactMaskingProvider/context");
var _WixStyleReactDefaultsOverrideProvider = require("../WixStyleReactDefaultsOverrideProvider");
var _StatusContext = require("../FormField/StatusContext");
var _useAutoFocusAndSelect = require("./hooks/useAutoFocusAndSelect");
var _transformAriaKebabCase = require("./utils/transformAriaKebabCase");
var _Suffix = require("./components/Suffix/Suffix");
var _excluded = ["role", "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", "onCopy", "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", "clearButtonAriaLabel", "statusMessageTooltipProps"];
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/Input/Input.tsx";
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
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 Input = exports.Input = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
  var {
    input: inputPropsDefaults
  } = (0, _react.useContext)(_WixStyleReactDefaultsOverrideProvider.WixStyleReactDefaultsOverrideContext);
  var {
      role,
      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,
      onCopy,
      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,
      clearButtonAriaLabel,
      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 {
    _onFocus,
    _onBlur,
    isFocused
  } = (0, _useAutoFocusAndSelect.useAutoFocusAndSelect)({
    localInputRef,
    onFocus,
    onBlur,
    autoFocus,
    autoSelect,
    value
  });
  (0, _react.useImperativeHandle)(ref, () => ({
    /**
     * Sets focus on the input element
     */
    focus: function focus() {
      var _localInputRef$curren;
      var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
      return (_localInputRef$curren = localInputRef.current) == null ? void 0 : _localInputRef$curren.focus(options);
    },
    /**
     * Removes focus from the input element
     */
    blur: () => {
      var _localInputRef$curren2;
      return (_localInputRef$curren2 = localInputRef.current) == null ? void 0 : _localInputRef$curren2.blur();
    },
    /**
     * Selects the text in the input element
     */
    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
     */
    setSelectionRange: (start, end) => {
      var _localInputRef$curren4;
      return (_localInputRef$curren4 = localInputRef.current) == null ? void 0 : _localInputRef$curren4.setSelectionRange(start, end);
    },
    /**
     * Clears the 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 == null || onClear(event);
    },
    /**
     * Gets the input DOM element.
     */
    input: localInputRef.current
  }));

  /**
   * 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;
    }

    // On key event
    onKeyDown == null || onKeyDown(event);

    // 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({
    role,
    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,
    onCopy,
    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: 278,
      columnNumber: 7
    }
  })) : /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({
    "data-hook": "wsr-input",
    ref: localInputRef
  }, commonProps, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 284,
      columnNumber: 7
    }
  }));
  var dataAttributes = {
    [_Input.DATA_ATTR.ROOT]: true,
    [_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
    }, className),
    dir: rtl ? 'rtl' : undefined,
    "data-hook": dataHook
  }, dataAttributes, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 300,
      columnNumber: 7
    }
  }), /*#__PURE__*/_react.default.createElement("div", {
    className: _InputSt.classes.wrapper,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 320,
      columnNumber: 9
    }
  }, prefix && /*#__PURE__*/_react.default.createElement(_InputContext.InputContext.Provider, {
    value: _objectSpread(_objectSpread({}, props), {}, {
      size,
      inPrefix: true
    }),
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 322,
      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: 329,
      columnNumber: 11
    }
  }, /*#__PURE__*/_react.default.createElement(_Suffix.Suffix, {
    statusMessage: statusMessage,
    status: status,
    disabled: disabled,
    menuArrow: menuArrow,
    suffix: suffix,
    tooltipPlacement: tooltipPlacement,
    clearButtonTooltipContent: clearButtonTooltipContent,
    clearButtonTooltipProps: clearButtonTooltipProps,
    clearButtonAriaLabel: clearButtonAriaLabel,
    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: 330,
      columnNumber: 13
    }
  }))));
});
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