react-hook-form-chakra-fields/dist/react-hook-form-chakra-fields.cjs.development.js

A collection of form fields on top of simple and accessible react component library [Chakra UI](https://chakra-ui.com/) and performant form library [React Hook Form](https://react-hook-form.com/), integrated with many other js/ts libraries.

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var React = require('react');
var React__default = _interopDefault(React);
var reactHookForm = require('react-hook-form');
var lodash = require('lodash');
var react = require('@chakra-ui/react');
var icons = require('@chakra-ui/icons');
var NumberFormat = _interopDefault(require('react-number-format'));
var currency = _interopDefault(require('currency.js'));
var dayjs = _interopDefault(require('dayjs'));
var ReactDate = require('react-datepicker');
var ReactDate__default = _interopDefault(ReactDate);
var en = _interopDefault(require('date-fns/locale/en-GB'));
require('react-datepicker/dist/react-datepicker.css');
var styled = _interopDefault(require('@emotion/styled'));
var TextMaskedInput = _interopDefault(require('react-text-mask'));
var ReactSelect = _interopDefault(require('react-select'));

function _extends() {
  _extends = Object.assign || function (target) {
    for (var i = 1; i < arguments.length; i++) {
      var source = arguments[i];

      for (var key in source) {
        if (Object.prototype.hasOwnProperty.call(source, key)) {
          target[key] = source[key];
        }
      }
    }

    return target;
  };

  return _extends.apply(this, arguments);
}

function _objectWithoutPropertiesLoose(source, excluded) {
  if (source == null) return {};
  var target = {};
  var sourceKeys = Object.keys(source);
  var key, i;

  for (i = 0; i < sourceKeys.length; i++) {
    key = sourceKeys[i];
    if (excluded.indexOf(key) >= 0) continue;
    target[key] = source[key];
  }

  return target;
}

function _taggedTemplateLiteralLoose(strings, raw) {
  if (!raw) {
    raw = strings.slice(0);
  }

  strings.raw = raw;
  return strings;
}

var FieldControl = function FieldControl(_ref) {
  var errorText = _ref.errorText,
      helperText = _ref.helperText,
      label = _ref.label,
      children = _ref.children,
      tip = _ref.tip,
      id = _ref.id,
      isRequired = _ref.isRequired,
      props = _objectWithoutPropertiesLoose(_ref, ["errorText", "helperText", "label", "children", "tip", "id", "isRequired"]);

  var infoIconColor = react.useColorModeValue('blue.500', 'blue.200');
  return React__default.createElement(react.FormControl, Object.assign({
    as: react.GridItem,
    mb: 4,
    id: id,
    "data-testid": id,
    isRequired: isRequired
  }, props), React__default.createElement(react.HStack, {
    spacing: 0
  }, label && React__default.createElement(react.FormLabel, {
    mr: "5px",
    lineHeight: 'auto',
    fontSize: 'md',
    color: 'auto'
  }, label), tip && React__default.createElement(react.Tooltip, {
    textAlign: "center",
    label: tip
  }, React__default.createElement(icons.InfoIcon, {
    mb: "5px",
    w: "13px",
    h: "13px",
    color: infoIconColor
  }))), children, React__default.createElement(react.FormErrorMessage, {
    lineHeight: "1rem"
  }, errorText), React__default.createElement(react.FormHelperText, {
    lineHeight: "1rem"
  }, helperText));
};

var FieldPrototype = function FieldPrototype(_ref) {
  var _get;

  var children = _ref.children,
      name = _ref.name,
      _ref$isRequired = _ref.isRequired,
      isRequired = _ref$isRequired === void 0 ? true : _ref$isRequired,
      props = _objectWithoutPropertiesLoose(_ref, ["children", "name", "isRequired"]);

  var methods = reactHookForm.useFormContext();
  var isInvalid = Boolean(lodash.get(methods.errors, name));
  return React__default.createElement(FieldControl, Object.assign({
    errorText: (_get = lodash.get(methods.errors, name)) == null ? void 0 : _get.message,
    isInvalid: isInvalid,
    name: name,
    isRequired: isRequired
  }, props), React__default.createElement(reactHookForm.Controller, {
    name: name,
    render: function render(props) {
      return children(methods, props, {
        isInvalid: isInvalid
      });
    }
  }));
};

var MoneyInput = function MoneyInput(_ref) {
  var hasError = _ref.hasError,
      value = _ref.value,
      props = _objectWithoutPropertiesLoose(_ref, ["hasError", "value"]);

  var formatProps = {
    thousandSeparator: ',',
    decimalSeparator: '.',
    decimalScale: 2,
    fixedDecimalScale: true,
    placeholder: '0.00'
  };
  return (// @ts-ignore
    React__default.createElement(react.Input, Object.assign({
      as: NumberFormat
    }, formatProps, props, {
      hasError: hasError,
      value: value ? currency(value, {
        precision: 10
      }).value : '',
      allowNegative: false,
      isAllowed: function isAllowed(_ref2) {
        var floatValue = _ref2.floatValue;

        if (!floatValue) {
          return true;
        }

        return floatValue >= 0 && floatValue <= 999999999999.99;
      }
    }))
  );
};

var _templateObject;
var DatePickerStyles = /*#__PURE__*/styled(react.Box)(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  .react-datepicker {\n    background-color: ", ";\n    font-family: inherit;\n    border-color: ", ";\n  }\n  .react-datepicker-wrapper,\n  .react-datepicker__input-container {\n    display: block;\n  }\n\n  .react-datepicker__input-container {\n    height: 2.5rem;\n  }\n\n  .react-datepicker__input-container > input {\n    width: 100%;\n    height: 100%;\n    border-radius: 7px;\n    border: ", ";\n  }\n\n  .react-datepicker__input-container > input:focus {\n    border: ", ";\n  }\n\n  .react-datepicker__close-icon {\n    right: 3px;\n  }\n\n  .react-datepicker__close-icon::after {\n    width: 21px;\n    height: 21px;\n    background-color: ", ";\n    color: ", ";\n    font-size: 1.1rem;\n  }\n\n  .react-datepicker__input-time-container {\n    background-color: transparent;\n    filter: ", ";\n  }\n\n  .react-datepicker-time__input {\n    background-color: transparent;\n  }\n\n  .react-datepicker__month-container,\n  .react-datepicker__header {\n    background: ", ";\n    * {\n      color: ", ";\n    }\n\n    .react-datepicker__day:hover {\n      background: ", ";\n    }\n\n    .react-datepicker__day--selected {\n      color: white;\n      background: ", ";\n      font-weight: bold;\n    }\n\n    .react-datepicker__day--keyboard-selected {\n      background-color: transparent;\n    }\n\n    .react-datepicker__day--disabled {\n      opacity: 0.4;\n    }\n  }\n"])), function (props) {
  return props.calendarBackground;
}, function (props) {
  return props.calendarSelectedBackground;
}, function (props) {
  return props.isInvalid ? "2.5px solid " + props.borderColor + " !important" : "1px solid " + props.borderColor + " !important";
}, function (props) {
  return "2px solid " + props.focusColor + " !important";
}, function (props) {
  return props.clearBtnBackground;
}, function (props) {
  return props.clearBtnColor;
}, function (props) {
  return props.isDarkMode ? 'invert(1)' : 'invert(0)';
}, function (props) {
  return props.calendarBackground;
}, function (props) {
  return props.calendarColor;
}, function (props) {
  return props.calendarDayHover;
}, function (props) {
  return props.calendarSelectedBackground;
});

ReactDate.registerLocale('en-GB', en);

var DateInput = function DateInput(_ref) {
  var _props$dateFormat, _props$timeInputLabel;

  var _ref$isInvalid = _ref.isInvalid,
      isInvalid = _ref$isInvalid === void 0 ? false : _ref$isInvalid,
      value = _ref.value,
      _onChange = _ref.onChange,
      _ref$isClearable = _ref.isClearable,
      isClearable = _ref$isClearable === void 0 ? true : _ref$isClearable,
      props = _objectWithoutPropertiesLoose(_ref, ["isInvalid", "value", "onChange", "isClearable"]);

  var _useTheme = react.useTheme(),
      colors = _useTheme.colors;

  var _useColorMode = react.useColorMode(),
      colorMode = _useColorMode.colorMode;

  var invalidColor = react.useColorModeValue(colors.red[500], colors.red[300]);
  var validColor = react.useColorModeValue(colors.gray[200], colors.gray[600]);
  var clearBtnBackground = react.useColorModeValue(colors.blue[500], colors.blue[300]);
  var clearBtnColor = react.useColorModeValue(colors.white, colors.gray[900]);
  var calendarBackground = react.useColorModeValue(colors.white, colors.gray[700]);
  var calendarColor = react.useColorModeValue(colors.gray[700], colors.white);
  var calendarSelectedBackground = react.useColorModeValue(colors.blue[500], colors.blue[300]);
  var calendarDayHover = react.useColorModeValue(colors.gray[200], colors.gray[600]);
  var dateFormat = (_props$dateFormat = props.dateFormat) != null ? _props$dateFormat : 'YYYY-MM-DDTHH:mm:ssZ';
  return React__default.createElement(DatePickerStyles, {
    isDarkMode: colorMode === 'dark',
    isInvalid: isInvalid,
    borderColor: isInvalid ? invalidColor : validColor,
    focusColor: colors.blue[500],
    clearBtnColor: clearBtnColor,
    clearBtnBackground: clearBtnBackground,
    calendarBackground: calendarBackground,
    calendarColor: calendarColor,
    calendarSelectedBackground: calendarSelectedBackground,
    calendarDayHover: calendarDayHover
  }, React__default.createElement(react.Input, Object.assign({
    as: ReactDate__default,
    autoComplete: "off",
    minDate: new Date(1900, 1, 1),
    maxDate: new Date(2999, 1, 1),
    isClearable: isClearable
  }, props, {
    locale: "en",
    dateFormat: props.showTimeInput ? 'yyy/MM/dd h:mm aa' : 'yyyy/MM/dd',
    timeInputLabel: (_props$timeInputLabel = props.timeInputLabel) != null ? _props$timeInputLabel : 'Time:',
    showPopperArrow: false,
    selected: value ? new Date(value) : null,
    // @ts-ignore
    onChange: function onChange(value, event) {
      if (!value || Array.isArray(value)) {
        _onChange(value, event);

        return;
      }

      var date = dayjs(value).hour(0).minute(0).second(0);

      _onChange(date.format(dateFormat), event);
    }
  })));
};

var MaskedInput = function MaskedInput(props) {
  return React__default.createElement(react.Input, Object.assign({
    as: TextMaskedInput,
    guide: true
  }, props));
};

var TimeInput = function TimeInput(_ref) {
  var _props$value;

  var onChangeTime = _ref.onChangeTime,
      props = _objectWithoutPropertiesLoose(_ref, ["onChangeTime"]);

  var valueToInteger = function valueToInteger(val) {
    return parseInt(val, 10);
  };

  var valueToString = function valueToString(val) {
    return val.toString().padStart(2, '0');
  };

  return React__default.createElement(MaskedInput, Object.assign({
    mask: [/\d/, /\d/, ':', /\d/, /\d/],
    placeholder: "00:00",
    maxW: "120px"
  }, props, {
    onBlur: function onBlur(e) {
      if (props.onBlur) {
        props.onBlur(e);
      }

      if (onChangeTime) {
        var value = e.target.value;

        var _value$split = value.split(':'),
            hour = _value$split[0],
            minute = _value$split[1];

        var date = dayjs(new Date()).hour(valueToInteger(hour)).minute(valueToInteger(minute));

        if (date.isValid()) {
          onChangeTime(valueToString(date.hour()) + ":" + valueToString(date.minute()));
          return;
        }

        onChangeTime('');
      }
    },
    value: (_props$value = props.value) != null ? _props$value : ''
  }));
};

var DateTimeInput = function DateTimeInput(_ref) {
  var id = _ref.id,
      _ref$value = _ref.value,
      value = _ref$value === void 0 ? null : _ref$value,
      onChange = _ref.onChange,
      props = _objectWithoutPropertiesLoose(_ref, ["id", "value", "onChange"]);

  var valueToString = function valueToString(val) {
    return val.toString().padStart(2, '0');
  };

  var getTime = function getTime() {
    var date = dayjs(value != null ? value : undefined);

    if (date.isValid()) {
      return valueToString(date.hour()) + ":" + valueToString(date.minute());
    }

    return null;
  };

  var insertTimeToDate = function insertTimeToDate(date, time) {
    var _time$split = time.split(':'),
        hour = _time$split[0],
        minute = _time$split[1];

    return dayjs(date).hour(Number(hour)).minute(Number(minute)).format('YYYY-MM-DDTHH:mm:ssZ');
  };

  var _useState = React.useState(value),
      dateValue = _useState[0],
      setDateValue = _useState[1];

  var _useState2 = React.useState(getTime()),
      timeValue = _useState2[0],
      setTimeValue = _useState2[1];

  var _useState3 = React.useState(value),
      dateTimeValue = _useState3[0],
      setDateTimeValue = _useState3[1];

  React.useEffect(function () {
    if (onChange) {
      onChange(dateTimeValue);
    }
  }, [dateTimeValue]);

  var removeDate = function removeDate() {
    setDateValue(null);
    setTimeValue(null);
    setDateTimeValue(null);
  };

  var insertDate = function insertDate(date) {
    setDateValue(date);
    setTimeValue(!timeValue ? '00:00' : timeValue);
    setDateTimeValue(!timeValue ? insertTimeToDate(date, '00:00') : insertTimeToDate(date, timeValue));
  };

  var removeTime = function removeTime() {
    setTimeValue('00:00');
    setDateTimeValue(dayjs(dateTimeValue).hour(0).minute(0).second(0).format('YYYY-MM-DDTHH:mm:ssZ'));
  };

  var insertTime = function insertTime(time) {
    setTimeValue(time);
    setDateTimeValue(insertTimeToDate(dateTimeValue, time));
  };

  return React__default.createElement(react.HStack, null, React__default.createElement(react.Box, null, React__default.createElement(DateInput, Object.assign({
    id: id
  }, props, {
    onChange: function onChange(date) {
      return lodash.isEmpty(date) ? removeDate() : insertDate(date.toString());
    },
    value: dateValue
  }))), React__default.createElement(react.Box, null, React__default.createElement(TimeInput, {
    id: id + "-time",
    value: dateValue ? timeValue : undefined,
    isDisabled: !dateTimeValue,
    onChangeTime: function onChangeTime(time) {
      return lodash.isEmpty(time) ? removeTime() : insertTime(time);
    }
  })));
};

var DateTimeOnlyInput = function DateTimeOnlyInput(_ref) {
  var id = _ref.id,
      _ref$initDate = _ref.initDate,
      initDate = _ref$initDate === void 0 ? dayjs().hour(0).minute(0).toString() : _ref$initDate,
      _ref$value = _ref.value,
      value = _ref$value === void 0 ? null : _ref$value,
      onChange = _ref.onChange,
      props = _objectWithoutPropertiesLoose(_ref, ["id", "initDate", "value", "onChange"]);

  var insertTimeToDate = function insertTimeToDate(date, time) {
    var _time$split = time.split(':'),
        hour = _time$split[0],
        minute = _time$split[1];

    return dayjs(date).hour(Number(hour)).minute(Number(minute)).format('YYYY-MM-DDTHH:mm:ssZ');
  };

  var _useState = React.useState(value ? value : initDate),
      dateTimeValue = _useState[0],
      setDateTimeValue = _useState[1];

  var _useState2 = React.useState(value ? dayjs(value).format('HH:mm') : null),
      timeValue = _useState2[0],
      setTimeValue = _useState2[1];

  React.useEffect(function () {
    if (onChange) {
      if (timeValue === null) {
        return;
      }

      if (timeValue === '') {
        onChange(dateTimeValue, '');
        return;
      }

      onChange(insertTimeToDate(dateTimeValue, timeValue), timeValue);
    }
  }, [timeValue]);

  var removeTime = function removeTime() {
    setTimeValue('');
    setDateTimeValue(dayjs(dateTimeValue).hour(0).minute(0).second(0).format('YYYY-MM-DDTHH:mm:ssZ').toString());
  };

  var insertTime = function insertTime(time) {
    setTimeValue(time);
    setDateTimeValue(insertTimeToDate(dateTimeValue, time));
  };

  return React__default.createElement(react.Box, null, React__default.createElement(TimeInput, Object.assign({
    id: id,
    value: value ? timeValue : undefined,
    onChangeTime: function onChangeTime(time) {
      return lodash.isEmpty(time) ? removeTime() : insertTime(time);
    }
  }, props)));
};

var Input = function Input(props) {
  return React__default.createElement(react.Input, Object.assign({}, props));
};

var getValue = function getValue(value, isMulti) {
  if (value === null || value === undefined) {
    if (isMulti) {
      return [];
    }

    return null;
  }

  return value;
};

var findOptions = function findOptions(selectedValues, options) {
  if (options.length === 0) {
    return [];
  }

  if (selectedValues.length === 0) {
    return [];
  }

  return selectedValues.map(function (selectedValue) {
    var result = options.find(function (option) {
      return option.value === selectedValue;
    });

    if (result === undefined) {
      return {
        label: selectedValue,
        value: selectedValue
      };
    }

    return result;
  });
};

var findOption = function findOption(selectedValue, options) {
  if (selectedValue === null) {
    return null;
  }

  if (selectedValue === '') {
    return null;
  }

  if (typeof selectedValue === 'object') {
    throw new Error("FormSelect: incorrect value type");
  }

  return options.find(function (option) {
    if (typeof option.value === 'object') {
      throw new Error("FormSelect: incorrect value type");
    }

    return option.value === selectedValue;
  }) || {
    label: selectedValue,
    value: selectedValue
  };
};

var getReadValue = function getReadValue(value, options, isMulti) {
  if (isMulti) {
    return findOptions(getValue(value, isMulti), options).map(function (opt) {
      return opt.label;
    }).join(', ');
  }

  var option = findOption(getValue(value, isMulti), options) || {
    label: ''
  };
  return option.label;
};

var SelectInput = function SelectInput(_ref) {
  var id = _ref.id,
      isInvalid = _ref.isInvalid,
      _ref$isClearable = _ref.isClearable,
      isClearable = _ref$isClearable === void 0 ? true : _ref$isClearable,
      _ref$noOptionsMessage = _ref.noOptionsMessage,
      noOptionsMessage = _ref$noOptionsMessage === void 0 ? function () {
    return 'No options';
  } : _ref$noOptionsMessage,
      _ref$loadingMessage = _ref.loadingMessage,
      loadingMessage = _ref$loadingMessage === void 0 ? function () {
    return 'Loading...';
  } : _ref$loadingMessage,
      props = _objectWithoutPropertiesLoose(_ref, ["id", "isInvalid", "isClearable", "noOptionsMessage", "loadingMessage"]);

  var _useTheme = react.useTheme(),
      colors = _useTheme.colors;

  var textColor = react.useColorModeValue(colors.gray[700], colors.white);
  var focusColor = react.useColorModeValue(colors.blue[500], colors.blue[300]);
  var boxShadowColor = react.useColorModeValue(colors.gray[200], colors.gray[600]);
  var multiValueLabelBg = react.useColorModeValue(colors.gray[100], colors.gray[400]);
  var listBgColor = react.useColorModeValue(colors.white, colors.gray[700]);
  var selectedBgColor = react.useColorModeValue(colors.blue[500], colors.blue[300]);
  var invalidColor = react.useColorModeValue(colors.red[500], colors.red[300]);
  var placeholderColor = react.useColorModeValue(colors.gray[400], colors.gray[600]);
  var inputColor = react.useColorModeValue(colors.gray[900], colors.gray[100]);
  return React__default.createElement(ReactSelect, Object.assign({
    placeholder: "",
    isClearable: isClearable,
    noOptionsMessage: noOptionsMessage,
    loadingMessage: loadingMessage,
    className: "react-select-container",
    classNamePrefix: "react-select",
    inputId: id,
    id: "select-container-" + id
  }, props, {
    styles: {
      control: function control(base, _ref2) {
        var isFocused = _ref2.isFocused,
            isDisabled = _ref2.isDisabled;
        return _extends({}, base, {
          opacity: isDisabled ? '.55' : '1',
          backgroundColor: 'transparent',
          border: 'none',
          outline: 'none',
          boxShadow: "0 0 0 " + (isFocused || isInvalid ? '2px' : '1px') + " " + (isFocused ? focusColor : isInvalid ? invalidColor : boxShadowColor)
        });
      },
      singleValue: function singleValue(base) {
        return _extends({}, base, {
          color: textColor
        });
      },
      input: function input(base) {
        return _extends({}, base, {
          color: inputColor
        });
      },
      indicatorsContainer: function indicatorsContainer(base) {
        return _extends({}, base, {
          color: 'red'
        });
      },
      option: function option(base, _ref3) {
        var isSelected = _ref3.isSelected;
        return _extends({}, base, {
          backgroundColor: isSelected ? selectedBgColor : listBgColor
        });
      },
      menu: function menu(base) {
        return _extends({}, base, {
          backgroundColor: listBgColor
        });
      },
      placeholder: function placeholder(base) {
        return _extends({}, base, {
          color: placeholderColor
        });
      },
      multiValueLabel: function multiValueLabel(base) {
        return _extends({}, base, {
          backgroundColor: multiValueLabelBg
        });
      },
      multiValueRemove: function multiValueRemove(base) {
        return _extends({}, base, {
          backgroundColor: multiValueLabelBg,
          borderRadius: '0'
        });
      }
    }
  }));
};

var DateTimeField = function DateTimeField(_ref) {
  var name = _ref.name,
      label = _ref.label,
      _ref$required = _ref.required,
      required = _ref$required === void 0 ? true : _ref$required,
      disabled = _ref.disabled,
      helperText = _ref.helperText,
      id = _ref.id,
      tip = _ref.tip,
      colSpan = _ref.colSpan,
      colStart = _ref.colStart,
      colEnd = _ref.colEnd,
      rowSpan = _ref.rowSpan,
      rowStart = _ref.rowStart,
      rowEnd = _ref.rowEnd,
      props = _objectWithoutPropertiesLoose(_ref, ["name", "label", "required", "disabled", "helperText", "id", "tip", "colSpan", "colStart", "colEnd", "rowSpan", "rowStart", "rowEnd"]);

  return React__default.createElement(FieldPrototype, {
    name: name,
    isRequired: required,
    isDisabled: disabled,
    helperText: helperText,
    tip: tip,
    id: id,
    label: label,
    rowSpan: rowSpan,
    rowStart: rowStart,
    rowEnd: rowEnd,
    colSpan: colSpan,
    colStart: colStart,
    colEnd: colEnd
  }, function (_, fieldProps, _ref2) {
    var isInvalid = _ref2.isInvalid;
    return React__default.createElement(DateTimeInput, Object.assign({}, props, fieldProps, {
      id: id,
      isInvalid: isInvalid,
      onChange: function onChange(dateTimeValue) {
        fieldProps.onChange(dateTimeValue);
      }
    }));
  });
};

var DateTimeOnlyField = function DateTimeOnlyField(_ref) {
  var name = _ref.name,
      label = _ref.label,
      _ref$required = _ref.required,
      required = _ref$required === void 0 ? true : _ref$required,
      disabled = _ref.disabled,
      helperText = _ref.helperText,
      id = _ref.id,
      tip = _ref.tip,
      colSpan = _ref.colSpan,
      colStart = _ref.colStart,
      colEnd = _ref.colEnd,
      rowSpan = _ref.rowSpan,
      rowStart = _ref.rowStart,
      rowEnd = _ref.rowEnd,
      props = _objectWithoutPropertiesLoose(_ref, ["name", "label", "required", "disabled", "helperText", "id", "tip", "colSpan", "colStart", "colEnd", "rowSpan", "rowStart", "rowEnd"]);

  return React__default.createElement(FieldPrototype, {
    name: name,
    isRequired: required,
    isDisabled: disabled,
    helperText: helperText,
    tip: tip,
    id: id,
    label: label,
    rowSpan: rowSpan,
    rowStart: rowStart,
    rowEnd: rowEnd,
    colSpan: colSpan,
    colStart: colStart,
    colEnd: colEnd
  }, function (_, fieldProps, _ref2) {
    var isInvalid = _ref2.isInvalid;
    return React__default.createElement(DateTimeOnlyInput, Object.assign({}, props, fieldProps, {
      id: id,
      isInvalid: isInvalid,
      onChange: function onChange(dateTimeValue, timeValue) {
        fieldProps.onChange(timeValue ? dateTimeValue : '');
      }
    }));
  });
};

var InputField = function InputField(_ref) {
  var name = _ref.name,
      label = _ref.label,
      _ref$required = _ref.required,
      required = _ref$required === void 0 ? true : _ref$required,
      disabled = _ref.disabled,
      helperText = _ref.helperText,
      id = _ref.id,
      tip = _ref.tip,
      as = _ref.as,
      colSpan = _ref.colSpan,
      colStart = _ref.colStart,
      colEnd = _ref.colEnd,
      rowSpan = _ref.rowSpan,
      rowStart = _ref.rowStart,
      rowEnd = _ref.rowEnd,
      props = _objectWithoutPropertiesLoose(_ref, ["name", "label", "required", "disabled", "helperText", "id", "tip", "as", "colSpan", "colStart", "colEnd", "rowSpan", "rowStart", "rowEnd"]);

  var invalidColor = react.useColorModeValue('red.500', 'red.300');
  var validColor = react.useColorModeValue('green.500', 'green.300');
  return React__default.createElement(FieldPrototype, {
    name: name,
    isRequired: required,
    isDisabled: disabled,
    helperText: helperText,
    tip: tip,
    id: id,
    label: label,
    colSpan: colSpan,
    colStart: colStart,
    colEnd: colEnd,
    rowSpan: rowSpan,
    rowStart: rowStart,
    rowEnd: rowEnd
  }, function (_ref2, fieldProps, _ref3) {
    var touched = _ref2.formState.touched;
    var isInvalid = _ref3.isInvalid;
    var isTextarea = as === 'textarea';
    var iconColor = isInvalid ? invalidColor : validColor;
    return React__default.createElement(react.InputGroup, null, React__default.createElement(Input, Object.assign({}, props, fieldProps, {
      as: isTextarea ? react.Textarea : as,
      id: id
    })), touched[name] && !isTextarea && React__default.createElement(react.InputRightElement, null, isInvalid ? React__default.createElement(icons.WarningIcon, {
      color: iconColor,
      w: "20px",
      h: "20px"
    }) : React__default.createElement(icons.CheckCircleIcon, {
      color: iconColor,
      w: "20px",
      h: "20px"
    })));
  });
};

var MaskedInputField = function MaskedInputField(_ref) {
  var name = _ref.name,
      props = _objectWithoutPropertiesLoose(_ref, ["name"]);

  var _useFormContext = reactHookForm.useFormContext(),
      watch = _useFormContext.watch;

  return React__default.createElement(InputField, Object.assign({
    as: MaskedInput,
    name: name,
    value: watch(name),
    guide: true
  }, props));
};

var SelectField = function SelectField(_ref) {
  var name = _ref.name,
      label = _ref.label,
      _ref$required = _ref.required,
      required = _ref$required === void 0 ? true : _ref$required,
      disabled = _ref.disabled,
      helperText = _ref.helperText,
      id = _ref.id,
      tip = _ref.tip,
      _ref$isMulti = _ref.isMulti,
      isMulti = _ref$isMulti === void 0 ? false : _ref$isMulti,
      options = _ref.options,
      onChangeEffect = _ref.onChangeEffect,
      colSpan = _ref.colSpan,
      colStart = _ref.colStart,
      colEnd = _ref.colEnd,
      rowSpan = _ref.rowSpan,
      rowStart = _ref.rowStart,
      rowEnd = _ref.rowEnd,
      _ref$requiredFieldMes = _ref.requiredFieldMessage,
      requiredFieldMessage = _ref$requiredFieldMes === void 0 ? 'Field is required' : _ref$requiredFieldMes,
      selectProps = _objectWithoutPropertiesLoose(_ref, ["name", "label", "required", "disabled", "helperText", "id", "tip", "isMulti", "options", "onChangeEffect", "colSpan", "colStart", "colEnd", "rowSpan", "rowStart", "rowEnd", "requiredFieldMessage"]);

  return React__default.createElement(FieldPrototype, {
    name: name,
    isRequired: required,
    isDisabled: disabled,
    helperText: helperText,
    tip: tip,
    id: id,
    label: label,
    rowSpan: rowSpan,
    rowStart: rowStart,
    rowEnd: rowEnd,
    colSpan: colSpan,
    colStart: colStart,
    colEnd: colEnd
  }, function (_ref2, _ref3, _ref4) {
    var isSubmitting = _ref2.formState.isSubmitting,
        setValue = _ref2.setValue,
        clearErrors = _ref2.clearErrors,
        setError = _ref2.setError;

    var value = _ref3.value,
        fieldProps = _objectWithoutPropertiesLoose(_ref3, ["value"]);

    var isInvalid = _ref4.isInvalid;
    return React__default.createElement(SelectInput, Object.assign({
      isDisabled: isSubmitting || disabled
    }, fieldProps, selectProps, {
      id: id,
      isMulti: isMulti,
      isInvalid: isInvalid,
      options: options,
      value: isMulti ? findOptions(getValue(value, true), options) : findOption(getValue(value, false), options),
      onChange: function onChange(option) {
        if (onChangeEffect) {
          onChangeEffect(option);
        }

        if (option) {
          clearErrors(name);
        }

        var onClear = function onClear() {
          if (isMulti && required) {
            setError(name, {
              message: requiredFieldMessage
            });
          }

          setValue(name, null, {
            shouldDirty: true
          });
        };

        if (!option) {
          onClear();
          return;
        }

        if (Array.isArray(option) && option.length === 0) {
          onClear();
          return;
        }

        if (Array.isArray(option)) {
          setValue(name, option.map(function (opt) {
            return opt.value;
          }), {
            shouldDirty: true
          });
          return;
        }

        setValue(name, option.value, {
          shouldDirty: true
        });
      }
    }));
  });
};

var DateField = function DateField(_ref) {
  var name = _ref.name,
      label = _ref.label,
      _ref$required = _ref.required,
      required = _ref$required === void 0 ? true : _ref$required,
      disabled = _ref.disabled,
      helperText = _ref.helperText,
      id = _ref.id,
      tip = _ref.tip,
      colSpan = _ref.colSpan,
      colStart = _ref.colStart,
      colEnd = _ref.colEnd,
      rowSpan = _ref.rowSpan,
      rowStart = _ref.rowStart,
      rowEnd = _ref.rowEnd,
      props = _objectWithoutPropertiesLoose(_ref, ["name", "label", "required", "disabled", "helperText", "id", "tip", "colSpan", "colStart", "colEnd", "rowSpan", "rowStart", "rowEnd"]);

  return React__default.createElement(FieldPrototype, {
    name: name,
    isRequired: required,
    isDisabled: disabled,
    helperText: helperText,
    tip: tip,
    id: id,
    label: label,
    rowSpan: rowSpan,
    rowStart: rowStart,
    rowEnd: rowEnd,
    colSpan: colSpan,
    colStart: colStart,
    colEnd: colEnd
  }, function (_, fieldProps, _ref2) {
    var isInvalid = _ref2.isInvalid;
    return React__default.createElement(DateInput, Object.assign({
      isInvalid: isInvalid,
      id: id
    }, props, fieldProps));
  });
};

var MoneyField = function MoneyField(_ref) {
  var name = _ref.name,
      label = _ref.label,
      _ref$required = _ref.required,
      required = _ref$required === void 0 ? true : _ref$required,
      disabled = _ref.disabled,
      helperText = _ref.helperText,
      id = _ref.id,
      tip = _ref.tip,
      css = _ref.css,
      children = _ref.children,
      colSpan = _ref.colSpan,
      colStart = _ref.colStart,
      colEnd = _ref.colEnd,
      rowSpan = _ref.rowSpan,
      rowStart = _ref.rowStart,
      rowEnd = _ref.rowEnd,
      props = _objectWithoutPropertiesLoose(_ref, ["name", "label", "required", "disabled", "helperText", "id", "tip", "css", "children", "colSpan", "colStart", "colEnd", "rowSpan", "rowStart", "rowEnd"]);

  var invalidColor = react.useColorModeValue('red.500', 'red.300');
  var validColor = react.useColorModeValue('green.500', 'green.300');
  return React__default.createElement(FieldPrototype, {
    name: name,
    isRequired: required,
    isDisabled: disabled,
    helperText: helperText,
    tip: tip,
    id: id,
    label: label,
    css: css,
    colSpan: colSpan,
    colStart: colStart,
    colEnd: colEnd,
    rowSpan: rowSpan,
    rowStart: rowStart,
    rowEnd: rowEnd
  }, function (_ref2, fieldProps, _ref3) {
    var touched = _ref2.formState.touched;
    var isInvalid = _ref3.isInvalid;
    var iconColor = isInvalid ? invalidColor : validColor;
    return React__default.createElement(react.InputGroup, null, React__default.createElement(react.Flex, {
      w: "100%"
    }, React__default.createElement(react.chakra.div, {
      flex: children ? '.7' : '1'
    }, React__default.createElement(MoneyInput, Object.assign({}, props, fieldProps, {
      id: id
    })), lodash.get(touched, name) && !children && React__default.createElement(react.InputRightElement, null, isInvalid ? React__default.createElement(icons.WarningIcon, {
      color: iconColor,
      w: "20px",
      h: "20px"
    }) : React__default.createElement(icons.CheckCircleIcon, {
      color: iconColor,
      w: "20px",
      h: "20px"
    }))), children && React__default.createElement(react.chakra.div, {
      flex: ".3",
      ml: 4
    }, children)));
  });
};

exports.DateField = DateField;
exports.DateInput = DateInput;
exports.DateTimeField = DateTimeField;
exports.DateTimeInput = DateTimeInput;
exports.DateTimeOnlyField = DateTimeOnlyField;
exports.DateTimeOnlyInput = DateTimeOnlyInput;
exports.FieldControl = FieldControl;
exports.FieldPrototype = FieldPrototype;
exports.Input = Input;
exports.InputField = InputField;
exports.MaskedInput = MaskedInput;
exports.MaskedInputField = MaskedInputField;
exports.MoneyField = MoneyField;
exports.MoneyInput = MoneyInput;
exports.SelectField = SelectField;
exports.SelectInput = SelectInput;
exports.TimeInput = TimeInput;
exports.findOption = findOption;
exports.findOptions = findOptions;
exports.getReadValue = getReadValue;
exports.getValue = getValue;
//# sourceMappingURL=react-hook-form-chakra-fields.cjs.development.js.map