@uncinc/uncinc-react-kitchen-sink 2.6.7 → 2.7.0

package/dist/components/Form/DateSelect/index.js

@@ -10,6 +10,7 @@ var _formik = require("formik");
 var _reactI18next = require("react-i18next");
 var _GenericFormElement = _interopRequireDefault(require("../GenericFormElement"));
 var _Input = _interopRequireDefault(require("../Select/Input"));
+var _FormikWrapper = require("../FormikWrapper");
 require("./style.scss");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -23,21 +24,31 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var DateSelect = function DateSelect(props) {
   var title = props.title,
     fieldName = props.fieldName,
+    validation = props.validation,
     yearMin = props.yearMin,
     yearMax = props.yearMax,
+    minDate = props.minDate,
+    maxDate = props.maxDate,
     hideYear = props.hideYear,
     fixedYear = props.fixedYear,
     required = props.required,
-    displayRequiredIndicator = props.displayRequiredIndicator,
     requiredError = props.requiredError,
     notValidError = props.notValidError,
     dayPlaceholder = props.dayPlaceholder,
     monthPlaceholder = props.monthPlaceholder,
-    yearPlaceholder = props.yearPlaceholder;
-  var _useFormikContext = (0, _formik.useFormikContext)(),
-    setFieldValue = _useFormikContext.setFieldValue,
-    isSubmitting = _useFormikContext.isSubmitting,
-    values = _useFormikContext.values;
+    yearPlaceholder = props.yearPlaceholder,
+    onChange = props.onChange;
+  var _useExtendedFormikCon = (0, _FormikWrapper.useExtendedFormikContext)(),
+    setFieldValue = _useExtendedFormikCon.setFieldValue,
+    setFieldError = _useExtendedFormikCon.setFieldError,
+    isSubmitting = _useExtendedFormikCon.isSubmitting,
+    touched = _useExtendedFormikCon.touched,
+    values = _useExtendedFormikCon.values,
+    errors = _useExtendedFormikCon.errors,
+    displayRequiredIndicator = _useExtendedFormikCon.displayRequiredIndicator;
+  var isTouched = touched[fieldName];
+  var value = values[fieldName];
+  var error = errors[fieldName];
   var _useTranslation = (0, _reactI18next.useTranslation)(),
     t = _useTranslation.t;
 
@@ -54,21 +65,9 @@ var DateSelect = function DateSelect(props) {
     _useState6 = _slicedToArray(_useState5, 2),
     year = _useState6[0],
     setYear = _useState6[1];
-  var _useState7 = (0, _react.useState)(),
-    _useState8 = _slicedToArray(_useState7, 2),
-    showError = _useState8[0],
-    setShowError = _useState8[1];
-  var _useState9 = (0, _react.useState)(),
-    _useState10 = _slicedToArray(_useState9, 2),
-    error = _useState10[0],
-    setError = _useState10[1];
-  var _useState11 = (0, _react.useState)(),
-    _useState12 = _slicedToArray(_useState11, 2),
-    dateNotValid = _useState12[0],
-    setDateNotValid = _useState12[1];
 
   // List all day options
-  var dayOptions = (0, _react.useCallback)(function (placeholder) {
+  var dayOptions = (0, _react.useMemo)(function (placeholder) {
     var options = [];
     if (placeholder) {
       options.push({
@@ -84,9 +83,21 @@ var DateSelect = function DateSelect(props) {
     }
     return options;
   }, []);
+  var onChangeHandler = function onChangeHandler(_ref) {
+    var changedDay = _ref.changedDay,
+      changedMonth = _ref.changedMonth,
+      changedYear = _ref.changedYear;
+    if (onChange) {
+      onChange({
+        day: changedDay || day,
+        month: changedMonth || month,
+        year: changedYear || year
+      });
+    }
+  };
 
   // List all month options
-  var monthOptions = (0, _react.useCallback)(function () {
+  var monthOptions = (0, _react.useMemo)(function () {
     var months = [t('dateselect.months.jan', 'Januari'), t('dateselect.months.feb', 'Februari'), t('dateselect.months.mar', 'Maart'), t('dateselect.months.apr', 'April'), t('dateselect.months.may', 'Mei'), t('dateselect.months.jun', 'Juni'), t('dateselect.months.jul', 'Juli'), t('dateselect.months.aug', 'Augustus'), t('dateselect.months.sep', 'September'), t('dateselect.months.oct', 'Oktober'), t('dateselect.months.nov', 'November'), t('dateselect.months.dec', 'December')];
     return months.map(function (e, i) {
       return {
@@ -94,10 +105,10 @@ var DateSelect = function DateSelect(props) {
         label: e
       };
     });
-  }, []);
+  }, [t]);
 
   // List all options for possible years from the yearMin and yearMax variables.
-  var yearOptions = (0, _react.useCallback)(function () {
+  var yearOptions = (0, _react.useMemo)(function () {
     var options = [];
     for (var index = yearMin; index <= yearMax; index++) {
       options.push({
@@ -108,85 +119,100 @@ var DateSelect = function DateSelect(props) {
     return options;
   }, [yearMin, yearMax]);
 
-  // Check if all fields are filled
-  (0, _react.useEffect)(function () {
-    if (isSubmitting) {
-      if (required && !values[fieldName]) {
-        !dateNotValid && setError(requiredError);
-        setShowError(true);
-      }
-    }
-  }, [isSubmitting]);
-
   // Validation and setting either an error or the FieldValue
   (0, _react.useEffect)(function () {
     hideYear && setYear(fixedYear || new Date().getFullYear());
 
     // All options are filled, start validation
-    if (day && month && year) {
+    if (required && (!day || !month || !year)) {
+      setFieldError(fieldName, requiredError);
+    } else if (day && month && year) {
       var date = new Date("".concat(year, "-").concat(month, "-").concat(day));
-      if (!(
-      // Take note of the exclamation mark
-      date.getDate() === day && date.getMonth() + 1 === month && date.getFullYear() === year)) {
-        // Depending on your browser, an invalid date overflows to the next month.
-        // For example, the 30th of Februari can become the 2nd of March.
-        // If that is the case, you still get a valid Date object, but it's not what
-        // the user filled in.
-        setError(notValidError);
-        setShowError(true);
-        setDateNotValid(true);
-        setFieldValue('dateSelect', '');
-        return;
-      }
-
-      // The Date is valid, so we hide previous errors and set the FieldValue
-      setShowError(false);
-      setDateNotValid(false);
-      setFieldValue('dateSelect', date);
-      return;
+      setFieldValue(fieldName, date);
     }
-
-    // In case a Date was selected and set as FieldValue, but the user decides
-    // to change the date, we want to hide previous errors and clear the FieldValue
-    // so that validation - and also the useEffect on isSubmitting - can do it's job.
-    setShowError(false);
-    setDateNotValid(false);
-    setFieldValue('dateSelect', '');
-  }, [day, month, year]);
+  }, [isSubmitting, day, month, year]);
+  var handleValidation = function handleValidation(value) {
+    if (validation && typeof validation === 'function') {
+      return validation(value);
+    }
+    if (required && (!day || !month || !year)) {
+      return requiredError || t(['webform.components.date_select.required', 'webform.required', 'webform_required']);
+    }
+    var date = new Date("".concat(year, "-").concat(month, "-").concat(day));
+    if (!(
+    // Take note of the exclamation mark
+    date.getDate() === day && date.getMonth() + 1 === month && date.getFullYear() === year)) {
+      // Depending on your browser, an invalid date overflows to the next month.
+      // For example, the 30th of Februari can become the 2nd of March.
+      // If that is the case, you still get a valid Date object, but it's not what
+      // the user filled in.
+      return notValidError || t(['webform.components.date_select.invalid', 'webform.invalid', 'webform_invalid']);
+    }
+    var isoDate = date.toISOString().split('T')[0];
+    if (minDate && date.getTime() < new Date(minDate).getTime()) {
+      return t(['webform.components.date_select.min', 'webform.min', 'webform_min'], {
+        date: isoDate,
+        minDate: minDate
+      });
+    }
+    if (maxDate && date.getTime() > new Date(maxDate).getTime()) {
+      return t(['webform.components.date_select.max', 'webform.max', 'webform_max'], {
+        date: isoDate,
+        maxDate: maxDate
+      });
+    }
+  };
   return /*#__PURE__*/_react.default.createElement(_GenericFormElement.default, {
     className: "DateSelect",
     title: title,
     required: required,
     displayRequiredIndicator: displayRequiredIndicator,
     error: error,
-    touched: showError
-  }, /*#__PURE__*/_react.default.createElement(_Input.default, {
-    id: "".concat(fieldName, "day"),
-    fieldName: "".concat(fieldName, "day"),
-    options: dayOptions(),
-    value: day,
-    placeholder: dayPlaceholder,
-    onChange: function onChange(day) {
-      return setDay(day);
-    }
-  }), /*#__PURE__*/_react.default.createElement(_Input.default, {
-    id: "".concat(fieldName, "month"),
-    fieldName: "".concat(fieldName, "month"),
-    options: monthOptions(),
-    value: month,
-    placeholder: monthPlaceholder,
-    onChange: function onChange(month) {
-      return setMonth(month);
-    }
-  }), !hideYear && /*#__PURE__*/_react.default.createElement(_Input.default, {
-    id: "".concat(fieldName, "year"),
-    fieldName: "".concat(fieldName, "year"),
-    options: yearOptions(),
-    value: year,
-    placeholder: yearPlaceholder,
-    onChange: function onChange(year) {
-      return setYear(year);
-    }
+    touched: isTouched,
+    fieldName: fieldName
+  }, /*#__PURE__*/_react.default.createElement(_formik.Field, {
+    id: fieldName,
+    name: fieldName,
+    validate: handleValidation,
+    value: value
+  }, function () {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Input.default, {
+      id: "".concat(fieldName, "day"),
+      fieldName: "".concat(fieldName, "day"),
+      options: dayOptions,
+      value: day,
+      placeholder: dayPlaceholder,
+      onChange: function onChange(day) {
+        setDay(day);
+        onChangeHandler({
+          changedDay: day
+        });
+      }
+    }), /*#__PURE__*/_react.default.createElement(_Input.default, {
+      id: "".concat(fieldName, "month"),
+      fieldName: "".concat(fieldName, "month"),
+      options: monthOptions,
+      value: month,
+      placeholder: monthPlaceholder,
+      onChange: function onChange(month) {
+        setMonth(month);
+        onChangeHandler({
+          changedMonth: month
+        });
+      }
+    }), !hideYear && /*#__PURE__*/_react.default.createElement(_Input.default, {
+      id: "".concat(fieldName, "year"),
+      fieldName: "".concat(fieldName, "year"),
+      options: yearOptions,
+      value: year,
+      placeholder: yearPlaceholder,
+      onChange: function onChange(year) {
+        setYear(year);
+        onChangeHandler({
+          changedYear: year
+        });
+      }
+    }));
   }));
 };
 DateSelect.defaultProps = {
@@ -199,7 +225,8 @@ DateSelect.defaultProps = {
   notValidError: 'Ongeldige datum',
   dayPlaceholder: 'Dag',
   monthPlaceholder: 'Maand',
-  yearPlaceholder: 'Jaar'
+  yearPlaceholder: 'Jaar',
+  validation: undefined
 };
 var _default = DateSelect;
 exports.default = _default;

package/dist/components/Form/FormikWrapper/index.d.ts

@@ -1,3 +1,8 @@
+export function useExtendedFormikContext(): any;
+export function FormikExtendedContextProvider({ children, ...props }: {
+    [x: string]: any;
+    children: any;
+}): React.JSX.Element;
 export default FormikWrapper;
-declare function FormikWrapper(props: any): React.JSX.Element;
 import React from 'react';
+declare function FormikWrapper(props: any): React.JSX.Element;

package/dist/components/Form/FormikWrapper/index.js

@@ -1,74 +1,55 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+exports.useExtendedFormikContext = exports.default = exports.FormikExtendedContextProvider = void 0;
+var _react = _interopRequireWildcard(require("react"));
 var _formik = require("formik");
-var _excluded = ["initialValues", "onSubmit", "displayRequiredIndicator", "validate", "validateOnChange", "validateOnBlur", "validateOnMount", "onReset"];
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+var _excluded = ["children"],
+  _excluded2 = ["initialValues", "onSubmit", "validate", "validateOnChange", "validateOnBlur", "validateOnMount", "onReset", "children", "displayRequiredIndicator"];
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-var renderChildrenRecursively = function renderChildrenRecursively(child, childProps, displayRequiredIndicator) {
-  var _child$props = child.props,
-    fieldName = _child$props.fieldName,
-    type = _child$props.type,
-    htmlType = _child$props.htmlType,
-    children = _child$props.children;
-  if (type === 'submit' || htmlType === 'submit') {
-    return /*#__PURE__*/_react.default.cloneElement(child, {
-      disabled: childProps.isSubmitting
-    }, children);
-  }
-  var fieldProps = {
-    touched: childProps.touched[fieldName],
-    error: childProps.errors[fieldName],
-    value: childProps.values[fieldName],
-    displayRequiredIndicator: displayRequiredIndicator
-  };
-  return /*#__PURE__*/_react.default.cloneElement(child, _objectSpread(_objectSpread({}, child.props), fieldProps), _react.default.Children.map(children, function (subchild) {
-    // Happens when we conditionally render elements.
-    if (!subchild) {
-      return null;
-    }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+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; }
+var CustomFormikContext = /*#__PURE__*/(0, _react.createContext)();
+var useExtendedFormikContext = function useExtendedFormikContext() {
+  return (0, _react.useContext)(CustomFormikContext);
+};
+exports.useExtendedFormikContext = useExtendedFormikContext;
+var FormikExtendedContextProvider = function FormikExtendedContextProvider(_ref) {
+  var children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var formikContext = (0, _formik.useFormikContext)();
 
-    // Happens for simple text nodes.
-    if (!subchild.props) {
-      return /*#__PURE__*/_react.default.createElement("span", null, subchild);
-    }
-    var _subchild$props = subchild.props,
-      fieldName = _subchild$props.fieldName,
-      children = _subchild$props.children;
-    var fieldProps = {
-      touched: childProps.touched[fieldName],
-      error: childProps.errors[fieldName],
-      value: childProps.values[fieldName],
-      displayRequiredIndicator: displayRequiredIndicator
-    };
-    if (children) {
-      return renderChildrenRecursively(subchild, _objectSpread({}, childProps), displayRequiredIndicator);
-    }
-    return /*#__PURE__*/_react.default.cloneElement(subchild, _objectSpread(_objectSpread({}, childProps), fieldProps), null);
-  }));
+  // We want to supply the elements with extra properties,
+  // so we extend the default FormikContext here with our own.
+  var value = (0, _react.useMemo)(function () {
+    return _objectSpread(_objectSpread({}, formikContext), props);
+  }, [formikContext, props]);
+  return /*#__PURE__*/_react.default.createElement(CustomFormikContext.Provider, {
+    value: value
+  }, /*#__PURE__*/_react.default.createElement(_formik.Form, null, children));
 };
+exports.FormikExtendedContextProvider = FormikExtendedContextProvider;
 var FormikWrapper = function FormikWrapper(props) {
   var initialValues = props.initialValues,
     onSubmit = props.onSubmit,
-    displayRequiredIndicator = props.displayRequiredIndicator,
     validate = props.validate,
     validateOnChange = props.validateOnChange,
     validateOnBlur = props.validateOnBlur,
     validateOnMount = props.validateOnMount,
     onReset = props.onReset,
-    restProps = _objectWithoutProperties(props, _excluded);
+    children = props.children,
+    displayRequiredIndicator = props.displayRequiredIndicator,
+    restProps = _objectWithoutProperties(props, _excluded2);
   return /*#__PURE__*/_react.default.createElement(_formik.Formik, _extends({
     initialValues: initialValues || {},
     onSubmit: onSubmit,
@@ -77,10 +58,10 @@ var FormikWrapper = function FormikWrapper(props) {
     validateOnBlur: validateOnBlur,
     validateOnMount: validateOnMount,
     onReset: onReset
-  }, restProps), function (childProps) {
-    return /*#__PURE__*/_react.default.createElement(_formik.Form, null, _react.default.Children.map(props.children, function (child) {
-      return renderChildrenRecursively(child, childProps, displayRequiredIndicator);
-    }));
+  }, restProps), function () {
+    return /*#__PURE__*/_react.default.createElement(FormikExtendedContextProvider, {
+      displayRequiredIndicator: displayRequiredIndicator
+    }, children);
   });
 };
 var _default = FormikWrapper;

package/dist/components/Form/Number/index.js

@@ -7,39 +7,46 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactI18next = require("react-i18next");
 var _TextField = _interopRequireDefault(require("../TextField"));
+var _excluded = ["min", "max", "step", "required", "requiredError", "validation"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+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; }
 var Number = function Number(props) {
-  var _useTranslation = (0, _reactI18next.useTranslation)(),
-    t = _useTranslation.t;
   var min = props.min,
     max = props.max,
     step = props.step,
     required = props.required,
-    requiredError = props.requiredError;
-  var validation = function validation(value) {
-    var error;
+    requiredError = props.requiredError,
+    validation = props.validation,
+    restProps = _objectWithoutProperties(props, _excluded);
+  var _useTranslation = (0, _reactI18next.useTranslation)(),
+    t = _useTranslation.t;
+  var handleValidation = function handleValidation(value) {
     if (required && !value) {
-      error = requiredError || t('webform.required');
+      return requiredError || t(['webform.number.required', 'webform.required', 'webform_required']);
     }
     if (min && parseInt(value) < min) {
-      error = t('webform.number.min', {
+      return t(['webform.number.min', 'webform.min', 'webform_min'], {
         min: min
       });
     }
     if (max && parseInt(value) > max) {
-      error = t('webform.number.max', {
+      return t(['webform.number.max', 'webform.max', 'webform_max'], {
         max: max
       });
     }
-    return error;
+    if (validation) {
+      return validation(value);
+    }
   };
-  return /*#__PURE__*/_react.default.createElement(_TextField.default, _extends({}, props, {
+  return /*#__PURE__*/_react.default.createElement(_TextField.default, _extends({}, restProps, {
     type: "number",
-    validation: validation,
+    validation: handleValidation,
     min: min,
     max: max,
-    step: step
+    step: step,
+    required: required
   }));
 };
 var _default = Number;

package/dist/components/Form/RadioButtons/index.js

@@ -7,13 +7,16 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _formik = require("formik");
 var _classnames = _interopRequireDefault(require("classnames"));
+var _reactI18next = require("react-i18next");
 var _GenericFormElement = _interopRequireDefault(require("../GenericFormElement"));
+var _FormikWrapper = require("../FormikWrapper");
 require("./style.scss");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
 var Radio = function Radio(props) {
   var className = props.className,
-    disabled = props.disabled;
+    disabled = props.disabled,
+    _onChange = props.onChange;
   return /*#__PURE__*/_react.default.createElement(_formik.Field, {
     name: props.name,
     validate: props.validate
@@ -24,6 +27,7 @@ var Radio = function Radio(props) {
     var classes = (0, _classnames.default)('WebformRadios__radio__input', {
       'icon-before': true,
       'icon-radio': true,
+      'icon-variant-0': !(field.value && field.value === props.value),
       'icon-variant-1': field.value && field.value === props.value
     });
     if (props.value === '__other__') {
@@ -38,7 +42,13 @@ var Radio = function Radio(props) {
         id: name,
         value: props.value,
         disabled: disabled,
-        className: className
+        className: className,
+        onChange: function onChange(event) {
+          if (_onChange) {
+            _onChange(props.value);
+          }
+          field.onChange(event);
+        }
       })), /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement("span", null, props.otherLabel ? props.otherLabel : props.label), props.description && /*#__PURE__*/_react.default.createElement("span", null, props.description)), /*#__PURE__*/_react.default.createElement("textarea", {
         placeholder: props.otherPlaceholder,
         className: inputClasses,
@@ -55,7 +65,13 @@ var Radio = function Radio(props) {
       id: name,
       value: props.value,
       disabled: disabled,
-      className: className
+      className: className,
+      onChange: function onChange(event) {
+        if (_onChange) {
+          _onChange(props.value);
+        }
+        field.onChange(event);
+      }
     })), /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement("span", null, props.label), props.description && /*#__PURE__*/_react.default.createElement("span", null, props.description)));
   });
 };
@@ -66,29 +82,43 @@ var RadioButtons = function RadioButtons(props) {
     placeholder = props.placeholder,
     fieldName = props.fieldName,
     validation = props.validation,
-    touched = props.touched,
-    error = props.error,
     type = props.type,
     options = props.options,
     _props$descriptions = props.descriptions,
     descriptions = _props$descriptions === void 0 ? {} : _props$descriptions,
-    displayRequiredIndicator = props.displayRequiredIndicator,
     className = props.className,
     wrapperClassName = props.wrapperClassName,
     _props$disabled = props.disabled,
     disabled = _props$disabled === void 0 ? false : _props$disabled,
     otherLabel = props.otherLabel,
-    otherPlaceholder = props.otherPlaceholder;
+    otherPlaceholder = props.otherPlaceholder,
+    onChange = props.onChange;
+  var _useTranslation = (0, _reactI18next.useTranslation)(),
+    t = _useTranslation.t;
+  var _useExtendedFormikCon = (0, _FormikWrapper.useExtendedFormikContext)(),
+    errors = _useExtendedFormikCon.errors,
+    touched = _useExtendedFormikCon.touched,
+    displayRequiredIndicator = _useExtendedFormikCon.displayRequiredIndicator;
+  var isTouched = touched[fieldName];
+  var error = errors[fieldName];
+  var handleValidation = function handleValidation(value) {
+    if (validation) {
+      return validation(value);
+    }
+    if (required && !value) {
+      return t(['webform.components.radio_buttons.required', 'webform.required', 'webform_required']);
+    }
+  };
   return /*#__PURE__*/_react.default.createElement(_GenericFormElement.default, {
     className: (0, _classnames.default)('RadioButtons', wrapperClassName),
     title: title,
     required: required,
     description: description,
     fieldName: fieldName,
-    touched: touched,
+    touched: isTouched,
     error: error,
     displayRequiredIndicator: displayRequiredIndicator
-  }, Object.keys(options).map(function (value, index) {
+  }, Object.keys(options).map(function (value) {
     var label = options[value];
     var description = descriptions[value] || null;
     return /*#__PURE__*/_react.default.createElement(Radio, {
@@ -102,10 +132,11 @@ var RadioButtons = function RadioButtons(props) {
       type: type || 'text',
       value: value,
       placeholder: placeholder,
-      validate: validation,
+      validate: handleValidation,
       otherLabel: otherLabel,
       otherPlaceholder: otherPlaceholder,
-      disabled: disabled
+      disabled: disabled,
+      onChange: onChange
     });
   }));
 };

package/dist/components/Form/RadioButtons/style.scss

@@ -3,6 +3,7 @@
     display: flex;
     flex-direction: column;
   }
+
   input {
     font-size: 1.8rem;
     font-weight: 500;