Created number_input with numeric value required

src/legacy/core_plugins/kbn_vislib_vis_types/public/components/common/number_input.tsx

@@ -34,6 +34,12 @@ interface NumberInputOptionProps<ParamName extends string> {
   setValue: (paramName: ParamName, value: number | '') => void;
 }
 
+/**
+ * Do not use this component anymore.
+ * Please, use NumberInputOption in 'required_number_input.tsx'.
+ * It is required for compatibility with TS 3.7.0
+ * This should be removed in the future
+ */
 function NumberInputOption<ParamName extends string>({
   disabled,
   error,

src/legacy/core_plugins/kbn_vislib_vis_types/public/components/common/required_number_input.tsx

@@ -0,0 +1,108 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React, { ReactNode, useCallback, useEffect, ChangeEvent } from 'react';
+import { EuiFormRow, EuiFieldNumber } from '@elastic/eui';
+
+interface NumberInputOptionProps<ParamName extends string> {
+  disabled?: boolean;
+  error?: ReactNode;
+  isInvalid?: boolean;
+  label?: React.ReactNode;
+  max?: number;
+  min?: number;
+  paramName: ParamName;
+  step?: number;
+  value: number;
+  'data-test-subj'?: string;
+  setValue(paramName: ParamName, value: number): void;
+  setMultipleValidity(paramName: ParamName, isValid: boolean): void;
+}
+
+/**
+ * Use only this component instead of NumberInputOption in 'number_input.tsx'.
+ * It is required for compatibility with TS 3.7.0
+ *
+ * @param {number} props.value Should be numeric only
+ */
+function NumberInputOption<ParamName extends string>({
+  disabled,
+  error,
+  isInvalid,
+  label,
+  max,
+  min,
+  paramName,
+  step,
+  value,
+  setValue,
+  setMultipleValidity,
+  'data-test-subj': dataTestSubj,
+}: NumberInputOptionProps<ParamName>) {
+  const isValid = !isNaN(value);
+  const onChange = useCallback(
+    (ev: ChangeEvent<HTMLInputElement>) => setValue(paramName, ev.target.valueAsNumber),
+    [setValue, paramName]
+  );
+
+  useEffect(() => {
+    setMultipleValidity(paramName, isValid);
+
+    return () => setMultipleValidity(paramName, true);
+  }, [isValid, paramName]);
+
+  return (
+    <EuiFormRow label={label} error={error} isInvalid={isInvalid} fullWidth compressed>
+      <EuiFieldNumber
+        compressed
+        fullWidth
+        required
+        data-test-subj={dataTestSubj}
+        disabled={disabled}
+        isInvalid={!isValid}
+        step={step}
+        max={max}
+        min={min}
+        value={isNaN(value) ? '' : value}
+        onChange={onChange}
+      />
+    </EuiFormRow>
+  );
+}
+
+export { NumberInputOption };

src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/point_series/point_series.tsx

@@ -21,13 +21,12 @@ import { EuiPanel, EuiTitle, EuiSpacer } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 
-import { VisOptionsProps } from 'ui/vis/editors/default';
-import { BasicOptions, SwitchOption } from '../../common';
+import { BasicOptions, SwitchOption, ValidationVisOptionsProps } from '../../common';
 import { GridPanel } from './grid_panel';
 import { ThresholdPanel } from './threshold_panel';
 import { BasicVislibParams } from '../../../types';
 
-function PointSeriesOptions(props: VisOptionsProps<BasicVislibParams>) {
+function PointSeriesOptions(props: ValidationVisOptionsProps<BasicVislibParams>) {
   const { stateParams, setValue, vis } = props;
 
   return (

src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/point_series/threshold_panel.tsx

@@ -21,11 +21,16 @@ import { EuiPanel, EuiTitle, EuiColorPicker, EuiFormRow, EuiSpacer } from '@elas
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 
-import { VisOptionsProps } from 'ui/vis/editors/default';
-import { NumberInputOption, SelectOption, SwitchOption } from '../../common';
+import { SelectOption, SwitchOption, ValidationVisOptionsProps } from '../../common';
+import { NumberInputOption } from '../../common/required_number_input';
 import { BasicVislibParams } from '../../../types';
 
-function ThresholdPanel({ stateParams, setValue, vis }: VisOptionsProps<BasicVislibParams>) {
+function ThresholdPanel({
+  stateParams,
+  setValue,
+  setMultipleValidity,
+  vis,
+}: ValidationVisOptionsProps<BasicVislibParams>) {
   const setThresholdLine = useCallback(
     <T extends keyof BasicVislibParams['thresholdLine']>(
       paramName: T,
@@ -39,6 +44,12 @@ function ThresholdPanel({ stateParams, setValue, vis }: VisOptionsProps<BasicVis
     [setThresholdLine]
   );
 
+  const setThresholdLineValidity = useCallback(
+    (paramName: keyof BasicVislibParams['thresholdLine'], isValid: boolean) =>
+      setMultipleValidity(`thresholdLine__${paramName}`, isValid),
+    [setMultipleValidity]
+  );
+
   return (
     <EuiPanel paddingSize="s">
       <EuiTitle size="xs">
@@ -72,6 +83,7 @@ function ThresholdPanel({ stateParams, setValue, vis }: VisOptionsProps<BasicVis
             paramName="value"
             value={stateParams.thresholdLine.value}
             setValue={setThresholdLine}
+            setMultipleValidity={setThresholdLineValidity}
           />
 
           <NumberInputOption
@@ -86,6 +98,7 @@ function ThresholdPanel({ stateParams, setValue, vis }: VisOptionsProps<BasicVis
             step={1}
             value={stateParams.thresholdLine.width}
             setValue={setThresholdLine}
+            setMultipleValidity={setThresholdLineValidity}
           />
 
           <SelectOption

src/legacy/core_plugins/kbn_vislib_vis_types/public/utils/common_config.tsx

@@ -40,7 +40,9 @@ function getAreaOptionTabs() {
       title: i18n.translate('kbnVislibVisTypes.area.tabs.panelSettingsTitle', {
         defaultMessage: 'Panel settings',
       }),
-      editor: PointSeriesOptions,
+      editor: (props: VisOptionsProps<BasicVislibParams>) => (
+        <ValidationWrapper {...props} component={PointSeriesOptions} />
+      ),
     },
   ];
 }