@contentful/field-editor-number 1.1.0 → 1.1.1

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.1.1](https://github.com/contentful/field-editors/compare/@contentful/field-editor-number@1.1.0...@contentful/field-editor-number@1.1.1) (2022-02-14)
+
+### Bug Fixes
+
+- **number-editor:** use "text" input that syncs numeric value when valid ([#1020](https://github.com/contentful/field-editors/issues/1020)) ([0f38462](https://github.com/contentful/field-editors/commit/0f384623f969284d122255191397402bbb3e7763))
+
 # [1.1.0](https://github.com/contentful/field-editors/compare/@contentful/field-editor-number@1.0.3...@contentful/field-editor-number@1.1.0) (2022-01-11)
 
 ### Features

package/dist/field-editor-number.cjs.development.js

@@ -11,11 +11,11 @@ var f36Components = require('@contentful/f36-components');
 
 function parseNumber(value, type) {
   // This has saner semantics than parseFloat.
-  // For values with chars in 'em, it gives
+  // For values with chars in them, it gives
   // us NaN unlike parseFloat
   var floatVal = +value;
-  var hasDot = /\./g.test(value);
-  var hasFractional = /\.\d+/g.test(value);
+  var hasDot = value.includes('.');
+  var hasFractional = /^(?:\+|-)?\d+\.\d+$/.test(value);
 
   if (isEmpty(value)) {
     return {
@@ -60,38 +60,77 @@ function getRangeFromField(field) {
   return result ? result.range : {};
 }
 
+function valueToString(value) {
+  return value === undefined ? '' : String(value);
+}
+
+function InnerNumberEditor(_ref) {
+  var disabled = _ref.disabled,
+      errors = _ref.errors,
+      field = _ref.field,
+      setValue = _ref.setValue,
+      sdkValue = _ref.value;
+  var previousValue = React.useRef(valueToString(sdkValue));
+
+  var _React$useState = React.useState(valueToString(sdkValue)),
+      inputValue = _React$useState[0],
+      setInputValue = _React$useState[1];
+
+  var range = getRangeFromField(field);
+  React.useEffect(function () {
+    previousValue.current = valueToString(sdkValue);
+  }, [sdkValue]);
+  React.useEffect(function () {
+    var stringifiedSdkValue = valueToString(sdkValue); // Update the input value (string) if the SDK value (numeric) changes
+
+    if (stringifiedSdkValue !== previousValue.current && stringifiedSdkValue !== inputValue) {
+      setInputValue(stringifiedSdkValue);
+    }
+  }, [inputValue, sdkValue]);
+  return React.createElement("div", {
+    "data-test-id": "number-editor"
+  }, React.createElement(f36Components.TextInput, {
+    testId: "number-editor-input",
+    min: range.min !== undefined ? String(range.min) : '',
+    max: range.max !== undefined ? String(range.max) : '',
+    step: field.type === 'Integer' ? '1' : '',
+    isRequired: field.required,
+    isInvalid: errors.length > 0,
+    isDisabled: disabled,
+    value: inputValue,
+    // React cannot call onChange for certain changes to type="number"
+    // so we use "text" instead. See https://github.com/facebook/react/issues/6556
+    type: "text",
+    onChange: function onChange(e) {
+      var parseResult = parseNumber(e.target.value, field.type);
+      field.setInvalid(!parseResult.isValid);
+
+      if (parseResult.isValid) {
+        setValue(parseResult.value);
+      }
+
+      setInputValue(e.target.value);
+    }
+  }));
+}
+
 function NumberEditor(props) {
   var field = props.field;
-  var range = getRangeFromField(field);
   return React.createElement(fieldEditorShared.FieldConnector, {
     field: field,
     isInitiallyDisabled: props.isInitiallyDisabled
-  }, function (_ref) {
-    var value = _ref.value,
-        errors = _ref.errors,
-        disabled = _ref.disabled,
-        setValue = _ref.setValue;
-    return React.createElement("div", {
-      "data-test-id": "number-editor"
-    }, React.createElement(f36Components.TextInput, {
-      testId: "number-editor-input",
-      min: range.min !== undefined ? String(range.min) : '',
-      max: range.max !== undefined ? String(range.max) : '',
-      step: field.type === 'Integer' ? '1' : '',
-      type: "number",
-      isRequired: field.required,
-      isInvalid: errors.length > 0,
-      isDisabled: disabled,
-      value: value === undefined ? '' : String(value),
-      onChange: function onChange(e) {
-        var parseResult = parseNumber(e.target.value, field.type);
-        field.setInvalid(!parseResult.isValid);
-
-        if (parseResult.isValid) {
-          setValue(parseResult.value);
-        }
-      }
-    }));
+  }, function (_ref2) {
+    var value = _ref2.value,
+        errors = _ref2.errors,
+        disabled = _ref2.disabled,
+        setValue = _ref2.setValue;
+    return React.createElement(InnerNumberEditor, {
+      disabled: disabled,
+      errors: errors,
+      field: field,
+      setValue: setValue,
+      value: value
+    });
   });
 }
 NumberEditor.defaultProps = {

package/dist/field-editor-number.cjs.development.js.map

@@ -1 +1 @@
-{"version":3,"file":"field-editor-number.cjs.development.js","sources":["../src/parseNumber.ts","../src/NumberEditor.tsx"],"sourcesContent":["import isEmpty from 'lodash/isEmpty';\n\nexport function parseNumber(\n  value: string,\n  type: string\n): {\n  isValid: boolean;\n  value: number | undefined;\n} {\n  // This has saner semantics than parseFloat.\n  // For values with chars in 'em, it gives\n  // us NaN unlike parseFloat\n  const floatVal = +value;\n  const hasDot = /\\./g.test(value);\n  const hasFractional = /\\.\\d+/g.test(value);\n\n  if (isEmpty(value)) {\n    return {\n      isValid: true,\n      value: undefined,\n    };\n  }\n\n  if (isNaN(floatVal)) {\n    return {\n      isValid: false,\n      value: undefined,\n    };\n  }\n\n  if (type === 'Integer' && hasDot) {\n    const intVal = parseInt(value, 10);\n\n    return {\n      isValid: false,\n      value: intVal,\n    };\n  }\n\n  if (hasDot && !hasFractional) {\n    return {\n      isValid: false,\n      value: floatVal,\n    };\n  }\n\n  return {\n    isValid: true,\n    value: floatVal,\n  };\n}\n","import * as React from 'react';\nimport { FieldAPI, FieldConnector } from '@contentful/field-editor-shared';\nimport { parseNumber } from './parseNumber';\n\nimport { TextInput } from '@contentful/f36-components';\n\nexport interface NumberEditorProps {\n  /**\n   * is the field disabled initially\n   */\n  isInitiallyDisabled: boolean;\n\n  /**\n   * sdk.field\n   */\n  field: FieldAPI;\n}\n\ntype RangeValidation = { min?: number; max?: number };\n\nfunction getRangeFromField(field: FieldAPI): RangeValidation {\n  const validations = field.validations || [];\n  const result = validations.find((validation) => (validation as any).range) as\n    | { range: RangeValidation }\n    | undefined;\n  return result ? result.range : {};\n}\n\nexport function NumberEditor(props: NumberEditorProps) {\n  const { field } = props;\n\n  const range = getRangeFromField(field);\n\n  return (\n    <FieldConnector<number> field={field} isInitiallyDisabled={props.isInitiallyDisabled}>\n      {({ value, errors, disabled, setValue }) => {\n        return (\n          <div data-test-id=\"number-editor\">\n            <TextInput\n              testId=\"number-editor-input\"\n              min={range.min !== undefined ? String(range.min) : ''}\n              max={range.max !== undefined ? String(range.max) : ''}\n              step={field.type === 'Integer' ? '1' : ''}\n              type=\"number\"\n              isRequired={field.required}\n              isInvalid={errors.length > 0}\n              isDisabled={disabled}\n              value={value === undefined ? '' : String(value)}\n              onChange={(e: React.ChangeEvent<HTMLInputElement>) => {\n                const parseResult = parseNumber(e.target.value, field.type);\n                field.setInvalid(!parseResult.isValid);\n                if (parseResult.isValid) {\n                  setValue(parseResult.value);\n                }\n              }}\n            />\n          </div>\n        );\n      }}\n    </FieldConnector>\n  );\n}\n\nNumberEditor.defaultProps = {\n  isInitiallyDisabled: true,\n};\n"],"names":["parseNumber","value","type","floatVal","hasDot","test","hasFractional","isEmpty","isValid","undefined","isNaN","intVal","parseInt","getRangeFromField","field","validations","result","find","validation","range","NumberEditor","props","React","FieldConnector","isInitiallyDisabled","errors","disabled","setValue","TextInput","testId","min","String","max","step","isRequired","required","isInvalid","length","isDisabled","onChange","e","parseResult","target","setInvalid","defaultProps"],"mappings":"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"}
+{"version":3,"file":"field-editor-number.cjs.development.js","sources":["../src/parseNumber.ts","../src/NumberEditor.tsx"],"sourcesContent":["import isEmpty from 'lodash/isEmpty';\n\nexport function parseNumber(\n  value: string,\n  type: string\n): {\n  isValid: boolean;\n  value: number | undefined;\n} {\n  // This has saner semantics than parseFloat.\n  // For values with chars in them, it gives\n  // us NaN unlike parseFloat\n  const floatVal = +value;\n  const hasDot = value.includes('.');\n  const hasFractional = /^(?:\\+|-)?\\d+\\.\\d+$/.test(value);\n\n  if (isEmpty(value)) {\n    return {\n      isValid: true,\n      value: undefined,\n    };\n  }\n\n  if (isNaN(floatVal)) {\n    return {\n      isValid: false,\n      value: undefined,\n    };\n  }\n\n  if (type === 'Integer' && hasDot) {\n    const intVal = parseInt(value, 10);\n\n    return {\n      isValid: false,\n      value: intVal,\n    };\n  }\n\n  if (hasDot && !hasFractional) {\n    return {\n      isValid: false,\n      value: floatVal,\n    };\n  }\n\n  return {\n    isValid: true,\n    value: floatVal,\n  };\n}\n","import * as React from 'react';\nimport {\n  FieldAPI,\n  FieldConnector,\n  FieldConnectorChildProps,\n} from '@contentful/field-editor-shared';\nimport { parseNumber } from './parseNumber';\n\nimport { TextInput } from '@contentful/f36-components';\n\nexport interface NumberEditorProps {\n  /**\n   * is the field disabled initially\n   */\n  isInitiallyDisabled: boolean;\n\n  /**\n   * sdk.field\n   */\n  field: FieldAPI;\n}\n\ntype RangeValidation = { min?: number; max?: number };\n\nfunction getRangeFromField(field: FieldAPI): RangeValidation {\n  const validations = field.validations || [];\n  const result = validations.find((validation) => (validation as any).range) as\n    | { range: RangeValidation }\n    | undefined;\n  return result ? result.range : {};\n}\n\nfunction valueToString(value: InnerNumberEditorProps['value']) {\n  return value === undefined ? '' : String(value);\n}\n\ntype InnerNumberEditorProps = Pick<\n  FieldConnectorChildProps<number>,\n  'disabled' | 'errors' | 'setValue' | 'value'\n> & {\n  field: NumberEditorProps['field'];\n};\n\nfunction InnerNumberEditor({\n  disabled,\n  errors,\n  field,\n  setValue,\n  value: sdkValue,\n}: InnerNumberEditorProps) {\n  const previousValue = React.useRef(valueToString(sdkValue));\n  const [inputValue, setInputValue] = React.useState(valueToString(sdkValue));\n  const range = getRangeFromField(field);\n\n  React.useEffect(() => {\n    previousValue.current = valueToString(sdkValue);\n  }, [sdkValue]);\n\n  React.useEffect(() => {\n    const stringifiedSdkValue = valueToString(sdkValue);\n    // Update the input value (string) if the SDK value (numeric) changes\n    if (stringifiedSdkValue !== previousValue.current && stringifiedSdkValue !== inputValue) {\n      setInputValue(stringifiedSdkValue);\n    }\n  }, [inputValue, sdkValue]);\n\n  return (\n    <div data-test-id=\"number-editor\">\n      <TextInput\n        testId=\"number-editor-input\"\n        min={range.min !== undefined ? String(range.min) : ''}\n        max={range.max !== undefined ? String(range.max) : ''}\n        step={field.type === 'Integer' ? '1' : ''}\n        isRequired={field.required}\n        isInvalid={errors.length > 0}\n        isDisabled={disabled}\n        value={inputValue}\n        // React cannot call onChange for certain changes to type=\"number\"\n        // so we use \"text\" instead. See https://github.com/facebook/react/issues/6556\n        type=\"text\"\n        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {\n          const parseResult = parseNumber(e.target.value, field.type);\n          field.setInvalid(!parseResult.isValid);\n\n          if (parseResult.isValid) {\n            setValue(parseResult.value);\n          }\n\n          setInputValue(e.target.value);\n        }}\n      />\n    </div>\n  );\n}\n\nexport function NumberEditor(props: NumberEditorProps) {\n  const { field } = props;\n\n  return (\n    <FieldConnector<number> field={field} isInitiallyDisabled={props.isInitiallyDisabled}>\n      {({\n        value,\n        errors,\n        disabled,\n        setValue,\n      }: Pick<FieldConnectorChildProps<number>, 'disabled' | 'errors' | 'setValue' | 'value'>) => (\n        <InnerNumberEditor\n          disabled={disabled}\n          errors={errors}\n          field={field}\n          setValue={setValue}\n          value={value}\n        />\n      )}\n    </FieldConnector>\n  );\n}\n\nNumberEditor.defaultProps = {\n  isInitiallyDisabled: true,\n};\n"],"names":["parseNumber","value","type","floatVal","hasDot","includes","hasFractional","test","isEmpty","isValid","undefined","isNaN","intVal","parseInt","getRangeFromField","field","validations","result","find","validation","range","valueToString","String","InnerNumberEditor","disabled","errors","setValue","sdkValue","previousValue","React","inputValue","setInputValue","current","stringifiedSdkValue","TextInput","testId","min","max","step","isRequired","required","isInvalid","length","isDisabled","onChange","e","parseResult","target","setInvalid","NumberEditor","props","FieldConnector","isInitiallyDisabled","defaultProps"],"mappings":"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"}

package/dist/field-editor-number.cjs.production.min.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,i=require("react"),t=require("@contentful/field-editor-shared"),r=(e=require("lodash/isEmpty"))&&"object"==typeof e&&"default"in e?e.default:e,a=require("@contentful/f36-components");function n(e){var n=e.field,l=function(e){var i=(e.validations||[]).find((function(e){return e.range}));return i?i.range:{}}(n);return i.createElement(t.FieldConnector,{field:n,isInitiallyDisabled:e.isInitiallyDisabled},(function(e){var t=e.value,d=e.errors,u=e.disabled,s=e.setValue;return i.createElement("div",{"data-test-id":"number-editor"},i.createElement(a.TextInput,{testId:"number-editor-input",min:void 0!==l.min?String(l.min):"",max:void 0!==l.max?String(l.max):"",step:"Integer"===n.type?"1":"",type:"number",isRequired:n.required,isInvalid:d.length>0,isDisabled:u,value:void 0===t?"":String(t),onChange:function(e){var i=function(e,i){var t=+e,a=/\./g.test(e),n=/\.\d+/g.test(e);return r(e)?{isValid:!0,value:void 0}:isNaN(t)?{isValid:!1,value:void 0}:"Integer"===i&&a?{isValid:!1,value:parseInt(e,10)}:a&&!n?{isValid:!1,value:t}:{isValid:!0,value:t}}(e.target.value,n.type);n.setInvalid(!i.isValid),i.isValid&&s(i.value)}}))}))}n.defaultProps={isInitiallyDisabled:!0},exports.NumberEditor=n;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react"),i=require("@contentful/field-editor-shared"),r=(e=require("lodash/isEmpty"))&&"object"==typeof e&&"default"in e?e.default:e,a=require("@contentful/f36-components");function n(e){return void 0===e?"":String(e)}function l(e){var i=e.disabled,l=e.errors,u=e.field,d=e.setValue,s=e.value,o=t.useRef(n(s)),f=t.useState(n(s)),v=f[0],c=f[1],m=function(e){var t=(e.validations||[]).find((function(e){return e.range}));return t?t.range:{}}(u);return t.useEffect((function(){o.current=n(s)}),[s]),t.useEffect((function(){var e=n(s);e!==o.current&&e!==v&&c(e)}),[v,s]),t.createElement("div",{"data-test-id":"number-editor"},t.createElement(a.TextInput,{testId:"number-editor-input",min:void 0!==m.min?String(m.min):"",max:void 0!==m.max?String(m.max):"",step:"Integer"===u.type?"1":"",isRequired:u.required,isInvalid:l.length>0,isDisabled:i,value:v,type:"text",onChange:function(e){var t,i,a,n,l,s=(i=u.type,a=+(t=e.target.value),n=t.includes("."),l=/^(?:\+|-)?\d+\.\d+$/.test(t),r(t)?{isValid:!0,value:void 0}:isNaN(a)?{isValid:!1,value:void 0}:"Integer"===i&&n?{isValid:!1,value:parseInt(t,10)}:n&&!l?{isValid:!1,value:a}:{isValid:!0,value:a});u.setInvalid(!s.isValid),s.isValid&&d(s.value),c(e.target.value)}}))}function u(e){var r=e.field;return t.createElement(i.FieldConnector,{field:r,isInitiallyDisabled:e.isInitiallyDisabled},(function(e){return t.createElement(l,{disabled:e.disabled,errors:e.errors,field:r,setValue:e.setValue,value:e.value})}))}u.defaultProps={isInitiallyDisabled:!0},exports.NumberEditor=u;
 //# sourceMappingURL=field-editor-number.cjs.production.min.js.map

package/dist/field-editor-number.cjs.production.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"field-editor-number.cjs.production.min.js","sources":["../src/NumberEditor.tsx","../src/parseNumber.ts"],"sourcesContent":["import * as React from 'react';\nimport { FieldAPI, FieldConnector } from '@contentful/field-editor-shared';\nimport { parseNumber } from './parseNumber';\n\nimport { TextInput } from '@contentful/f36-components';\n\nexport interface NumberEditorProps {\n  /**\n   * is the field disabled initially\n   */\n  isInitiallyDisabled: boolean;\n\n  /**\n   * sdk.field\n   */\n  field: FieldAPI;\n}\n\ntype RangeValidation = { min?: number; max?: number };\n\nfunction getRangeFromField(field: FieldAPI): RangeValidation {\n  const validations = field.validations || [];\n  const result = validations.find((validation) => (validation as any).range) as\n    | { range: RangeValidation }\n    | undefined;\n  return result ? result.range : {};\n}\n\nexport function NumberEditor(props: NumberEditorProps) {\n  const { field } = props;\n\n  const range = getRangeFromField(field);\n\n  return (\n    <FieldConnector<number> field={field} isInitiallyDisabled={props.isInitiallyDisabled}>\n      {({ value, errors, disabled, setValue }) => {\n        return (\n          <div data-test-id=\"number-editor\">\n            <TextInput\n              testId=\"number-editor-input\"\n              min={range.min !== undefined ? String(range.min) : ''}\n              max={range.max !== undefined ? String(range.max) : ''}\n              step={field.type === 'Integer' ? '1' : ''}\n              type=\"number\"\n              isRequired={field.required}\n              isInvalid={errors.length > 0}\n              isDisabled={disabled}\n              value={value === undefined ? '' : String(value)}\n              onChange={(e: React.ChangeEvent<HTMLInputElement>) => {\n                const parseResult = parseNumber(e.target.value, field.type);\n                field.setInvalid(!parseResult.isValid);\n                if (parseResult.isValid) {\n                  setValue(parseResult.value);\n                }\n              }}\n            />\n          </div>\n        );\n      }}\n    </FieldConnector>\n  );\n}\n\nNumberEditor.defaultProps = {\n  isInitiallyDisabled: true,\n};\n","import isEmpty from 'lodash/isEmpty';\n\nexport function parseNumber(\n  value: string,\n  type: string\n): {\n  isValid: boolean;\n  value: number | undefined;\n} {\n  // This has saner semantics than parseFloat.\n  // For values with chars in 'em, it gives\n  // us NaN unlike parseFloat\n  const floatVal = +value;\n  const hasDot = /\\./g.test(value);\n  const hasFractional = /\\.\\d+/g.test(value);\n\n  if (isEmpty(value)) {\n    return {\n      isValid: true,\n      value: undefined,\n    };\n  }\n\n  if (isNaN(floatVal)) {\n    return {\n      isValid: false,\n      value: undefined,\n    };\n  }\n\n  if (type === 'Integer' && hasDot) {\n    const intVal = parseInt(value, 10);\n\n    return {\n      isValid: false,\n      value: intVal,\n    };\n  }\n\n  if (hasDot && !hasFractional) {\n    return {\n      isValid: false,\n      value: floatVal,\n    };\n  }\n\n  return {\n    isValid: true,\n    value: floatVal,\n  };\n}\n"],"names":["NumberEditor","props","field","range","result","validations","find","validation","getRangeFromField","React","FieldConnector","isInitiallyDisabled","value","errors","disabled","setValue","TextInput","testId","min","undefined","String","max","step","type","isRequired","required","isInvalid","length","isDisabled","onChange","e","parseResult","floatVal","hasDot","test","hasFractional","isEmpty","isValid","isNaN","parseInt","parseNumber","target","setInvalid","defaultProps"],"mappings":"0QA4BgBA,EAAaC,OACnBC,EAAUD,EAAVC,MAEFC,EAXR,SAA2BD,OAEnBE,GADcF,EAAMG,aAAe,IACdC,MAAK,SAACC,UAAgBA,EAAmBJ,gBAG7DC,EAASA,EAAOD,MAAQ,GAMjBK,CAAkBN,UAG9BO,gBAACC,kBAAuBR,MAAOA,EAAOS,oBAAqBV,EAAMU,sBAC9D,gBAAGC,IAAAA,MAAOC,IAAAA,OAAQC,IAAAA,SAAUC,IAAAA,gBAEzBN,sCAAkB,iBAChBA,gBAACO,aACCC,OAAO,sBACPC,SAAmBC,IAAdhB,EAAMe,IAAoBE,OAAOjB,EAAMe,KAAO,GACnDG,SAAmBF,IAAdhB,EAAMkB,IAAoBD,OAAOjB,EAAMkB,KAAO,GACnDC,KAAqB,YAAfpB,EAAMqB,KAAqB,IAAM,GACvCA,KAAK,SACLC,WAAYtB,EAAMuB,SAClBC,UAAWb,EAAOc,OAAS,EAC3BC,WAAYd,EACZF,WAAiBO,IAAVP,EAAsB,GAAKQ,OAAOR,GACzCiB,SAAU,SAACC,OACHC,WC9CpBnB,EACAW,OAQMS,GAAYpB,EACZqB,EAAS,MAAMC,KAAKtB,GACpBuB,EAAgB,SAASD,KAAKtB,UAEhCwB,EAAQxB,GACH,CACLyB,SAAS,EACTzB,WAAOO,GAIPmB,MAAMN,GACD,CACLK,SAAS,EACTzB,WAAOO,GAIE,YAATI,GAAsBU,EAGjB,CACLI,SAAS,EACTzB,MAJa2B,SAAS3B,EAAO,KAQ7BqB,IAAWE,EACN,CACLE,SAAS,EACTzB,MAAOoB,GAIJ,CACLK,SAAS,EACTzB,MAAOoB,GDCyBQ,CAAYV,EAAEW,OAAO7B,MAAOV,EAAMqB,MACtDrB,EAAMwC,YAAYX,EAAYM,SAC1BN,EAAYM,SACdtB,EAASgB,EAAYnB,cAWvCZ,EAAa2C,aAAe,CAC1BhC,qBAAqB"}
+{"version":3,"file":"field-editor-number.cjs.production.min.js","sources":["../src/NumberEditor.tsx","../src/parseNumber.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n  FieldAPI,\n  FieldConnector,\n  FieldConnectorChildProps,\n} from '@contentful/field-editor-shared';\nimport { parseNumber } from './parseNumber';\n\nimport { TextInput } from '@contentful/f36-components';\n\nexport interface NumberEditorProps {\n  /**\n   * is the field disabled initially\n   */\n  isInitiallyDisabled: boolean;\n\n  /**\n   * sdk.field\n   */\n  field: FieldAPI;\n}\n\ntype RangeValidation = { min?: number; max?: number };\n\nfunction getRangeFromField(field: FieldAPI): RangeValidation {\n  const validations = field.validations || [];\n  const result = validations.find((validation) => (validation as any).range) as\n    | { range: RangeValidation }\n    | undefined;\n  return result ? result.range : {};\n}\n\nfunction valueToString(value: InnerNumberEditorProps['value']) {\n  return value === undefined ? '' : String(value);\n}\n\ntype InnerNumberEditorProps = Pick<\n  FieldConnectorChildProps<number>,\n  'disabled' | 'errors' | 'setValue' | 'value'\n> & {\n  field: NumberEditorProps['field'];\n};\n\nfunction InnerNumberEditor({\n  disabled,\n  errors,\n  field,\n  setValue,\n  value: sdkValue,\n}: InnerNumberEditorProps) {\n  const previousValue = React.useRef(valueToString(sdkValue));\n  const [inputValue, setInputValue] = React.useState(valueToString(sdkValue));\n  const range = getRangeFromField(field);\n\n  React.useEffect(() => {\n    previousValue.current = valueToString(sdkValue);\n  }, [sdkValue]);\n\n  React.useEffect(() => {\n    const stringifiedSdkValue = valueToString(sdkValue);\n    // Update the input value (string) if the SDK value (numeric) changes\n    if (stringifiedSdkValue !== previousValue.current && stringifiedSdkValue !== inputValue) {\n      setInputValue(stringifiedSdkValue);\n    }\n  }, [inputValue, sdkValue]);\n\n  return (\n    <div data-test-id=\"number-editor\">\n      <TextInput\n        testId=\"number-editor-input\"\n        min={range.min !== undefined ? String(range.min) : ''}\n        max={range.max !== undefined ? String(range.max) : ''}\n        step={field.type === 'Integer' ? '1' : ''}\n        isRequired={field.required}\n        isInvalid={errors.length > 0}\n        isDisabled={disabled}\n        value={inputValue}\n        // React cannot call onChange for certain changes to type=\"number\"\n        // so we use \"text\" instead. See https://github.com/facebook/react/issues/6556\n        type=\"text\"\n        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {\n          const parseResult = parseNumber(e.target.value, field.type);\n          field.setInvalid(!parseResult.isValid);\n\n          if (parseResult.isValid) {\n            setValue(parseResult.value);\n          }\n\n          setInputValue(e.target.value);\n        }}\n      />\n    </div>\n  );\n}\n\nexport function NumberEditor(props: NumberEditorProps) {\n  const { field } = props;\n\n  return (\n    <FieldConnector<number> field={field} isInitiallyDisabled={props.isInitiallyDisabled}>\n      {({\n        value,\n        errors,\n        disabled,\n        setValue,\n      }: Pick<FieldConnectorChildProps<number>, 'disabled' | 'errors' | 'setValue' | 'value'>) => (\n        <InnerNumberEditor\n          disabled={disabled}\n          errors={errors}\n          field={field}\n          setValue={setValue}\n          value={value}\n        />\n      )}\n    </FieldConnector>\n  );\n}\n\nNumberEditor.defaultProps = {\n  isInitiallyDisabled: true,\n};\n","import isEmpty from 'lodash/isEmpty';\n\nexport function parseNumber(\n  value: string,\n  type: string\n): {\n  isValid: boolean;\n  value: number | undefined;\n} {\n  // This has saner semantics than parseFloat.\n  // For values with chars in them, it gives\n  // us NaN unlike parseFloat\n  const floatVal = +value;\n  const hasDot = value.includes('.');\n  const hasFractional = /^(?:\\+|-)?\\d+\\.\\d+$/.test(value);\n\n  if (isEmpty(value)) {\n    return {\n      isValid: true,\n      value: undefined,\n    };\n  }\n\n  if (isNaN(floatVal)) {\n    return {\n      isValid: false,\n      value: undefined,\n    };\n  }\n\n  if (type === 'Integer' && hasDot) {\n    const intVal = parseInt(value, 10);\n\n    return {\n      isValid: false,\n      value: intVal,\n    };\n  }\n\n  if (hasDot && !hasFractional) {\n    return {\n      isValid: false,\n      value: floatVal,\n    };\n  }\n\n  return {\n    isValid: true,\n    value: floatVal,\n  };\n}\n"],"names":["valueToString","value","undefined","String","InnerNumberEditor","disabled","errors","field","setValue","sdkValue","previousValue","React","inputValue","setInputValue","range","result","validations","find","validation","getRangeFromField","current","stringifiedSdkValue","TextInput","testId","min","max","step","type","isRequired","required","isInvalid","length","isDisabled","onChange","e","floatVal","hasDot","hasFractional","parseResult","target","includes","test","isEmpty","isValid","isNaN","parseInt","setInvalid","NumberEditor","props","FieldConnector","isInitiallyDisabled","defaultProps"],"mappings":"iQAgCA,SAASA,EAAcC,eACJC,IAAVD,EAAsB,GAAKE,OAAOF,GAU3C,SAASG,SACPC,IAAAA,SACAC,IAAAA,OACAC,IAAAA,MACAC,IAAAA,SACOC,IAAPR,MAEMS,EAAgBC,SAAaX,EAAcS,MACbE,WAAeX,EAAcS,IAA1DG,OAAYC,OACbC,EA5BR,SAA2BP,OAEnBQ,GADcR,EAAMS,aAAe,IACdC,MAAK,SAACC,UAAgBA,EAAmBJ,gBAG7DC,EAASA,EAAOD,MAAQ,GAuBjBK,CAAkBZ,UAEhCI,aAAgB,WACdD,EAAcU,QAAUpB,EAAcS,KACrC,CAACA,IAEJE,aAAgB,eACRU,EAAsBrB,EAAcS,GAEtCY,IAAwBX,EAAcU,SAAWC,IAAwBT,GAC3EC,EAAcQ,KAEf,CAACT,EAAYH,IAGdE,sCAAkB,iBAChBA,gBAACW,aACCC,OAAO,sBACPC,SAAmBtB,IAAdY,EAAMU,IAAoBrB,OAAOW,EAAMU,KAAO,GACnDC,SAAmBvB,IAAdY,EAAMW,IAAoBtB,OAAOW,EAAMW,KAAO,GACnDC,KAAqB,YAAfnB,EAAMoB,KAAqB,IAAM,GACvCC,WAAYrB,EAAMsB,SAClBC,UAAWxB,EAAOyB,OAAS,EAC3BC,WAAY3B,EACZJ,MAAOW,EAGPe,KAAK,OACLM,SAAU,SAACC,OC7EjBjC,EACA0B,EAQMQ,EACAC,EACAC,EDmEQC,GC7EdX,ED6EwDpB,EAAMoB,KCrExDQ,IATNlC,ED8EwCiC,EAAEK,OAAOtC,OCpE3CmC,EAASnC,EAAMuC,SAAS,KACxBH,EAAgB,sBAAsBI,KAAKxC,GAE7CyC,EAAQzC,GACH,CACL0C,SAAS,EACT1C,WAAOC,GAIP0C,MAAMT,GACD,CACLQ,SAAS,EACT1C,WAAOC,GAIE,YAATyB,GAAsBS,EAGjB,CACLO,SAAS,EACT1C,MAJa4C,SAAS5C,EAAO,KAQ7BmC,IAAWC,EACN,CACLM,SAAS,EACT1C,MAAOkC,GAIJ,CACLQ,SAAS,EACT1C,MAAOkC,IDkCD5B,EAAMuC,YAAYR,EAAYK,SAE1BL,EAAYK,SACdnC,EAAS8B,EAAYrC,OAGvBY,EAAcqB,EAAEK,OAAOtC,oBAOjB8C,EAAaC,OACnBzC,EAAUyC,EAAVzC,aAGNI,gBAACsC,kBAAuB1C,MAAOA,EAAO2C,oBAAqBF,EAAME,sBAC9D,mBAMCvC,gBAACP,GACCC,WAJFA,SAKEC,SANFA,OAOEC,MAAOA,EACPC,WANFA,SAOEP,QAVFA,WAiBR8C,EAAaI,aAAe,CAC1BD,qBAAqB"}

package/dist/field-editor-number.esm.js

@@ -1,15 +1,15 @@
-import { createElement } from 'react';
+import { createElement, useRef, useState, useEffect } from 'react';
 import { FieldConnector } from '@contentful/field-editor-shared';
 import isEmpty from 'lodash-es/isEmpty';
 import { TextInput } from '@contentful/f36-components';
 
 function parseNumber(value, type) {
   // This has saner semantics than parseFloat.
-  // For values with chars in 'em, it gives
+  // For values with chars in them, it gives
   // us NaN unlike parseFloat
   var floatVal = +value;
-  var hasDot = /\./g.test(value);
-  var hasFractional = /\.\d+/g.test(value);
+  var hasDot = value.includes('.');
+  var hasFractional = /^(?:\+|-)?\d+\.\d+$/.test(value);
 
   if (isEmpty(value)) {
     return {
@@ -54,38 +54,77 @@ function getRangeFromField(field) {
   return result ? result.range : {};
 }
 
+function valueToString(value) {
+  return value === undefined ? '' : String(value);
+}
+
+function InnerNumberEditor(_ref) {
+  var disabled = _ref.disabled,
+      errors = _ref.errors,
+      field = _ref.field,
+      setValue = _ref.setValue,
+      sdkValue = _ref.value;
+  var previousValue = useRef(valueToString(sdkValue));
+
+  var _React$useState = useState(valueToString(sdkValue)),
+      inputValue = _React$useState[0],
+      setInputValue = _React$useState[1];
+
+  var range = getRangeFromField(field);
+  useEffect(function () {
+    previousValue.current = valueToString(sdkValue);
+  }, [sdkValue]);
+  useEffect(function () {
+    var stringifiedSdkValue = valueToString(sdkValue); // Update the input value (string) if the SDK value (numeric) changes
+
+    if (stringifiedSdkValue !== previousValue.current && stringifiedSdkValue !== inputValue) {
+      setInputValue(stringifiedSdkValue);
+    }
+  }, [inputValue, sdkValue]);
+  return createElement("div", {
+    "data-test-id": "number-editor"
+  }, createElement(TextInput, {
+    testId: "number-editor-input",
+    min: range.min !== undefined ? String(range.min) : '',
+    max: range.max !== undefined ? String(range.max) : '',
+    step: field.type === 'Integer' ? '1' : '',
+    isRequired: field.required,
+    isInvalid: errors.length > 0,
+    isDisabled: disabled,
+    value: inputValue,
+    // React cannot call onChange for certain changes to type="number"
+    // so we use "text" instead. See https://github.com/facebook/react/issues/6556
+    type: "text",
+    onChange: function onChange(e) {
+      var parseResult = parseNumber(e.target.value, field.type);
+      field.setInvalid(!parseResult.isValid);
+
+      if (parseResult.isValid) {
+        setValue(parseResult.value);
+      }
+
+      setInputValue(e.target.value);
+    }
+  }));
+}
+
 function NumberEditor(props) {
   var field = props.field;
-  var range = getRangeFromField(field);
   return createElement(FieldConnector, {
     field: field,
     isInitiallyDisabled: props.isInitiallyDisabled
-  }, function (_ref) {
-    var value = _ref.value,
-        errors = _ref.errors,
-        disabled = _ref.disabled,
-        setValue = _ref.setValue;
-    return createElement("div", {
-      "data-test-id": "number-editor"
-    }, createElement(TextInput, {
-      testId: "number-editor-input",
-      min: range.min !== undefined ? String(range.min) : '',
-      max: range.max !== undefined ? String(range.max) : '',
-      step: field.type === 'Integer' ? '1' : '',
-      type: "number",
-      isRequired: field.required,
-      isInvalid: errors.length > 0,
-      isDisabled: disabled,
-      value: value === undefined ? '' : String(value),
-      onChange: function onChange(e) {
-        var parseResult = parseNumber(e.target.value, field.type);
-        field.setInvalid(!parseResult.isValid);
-
-        if (parseResult.isValid) {
-          setValue(parseResult.value);
-        }
-      }
-    }));
+  }, function (_ref2) {
+    var value = _ref2.value,
+        errors = _ref2.errors,
+        disabled = _ref2.disabled,
+        setValue = _ref2.setValue;
+    return createElement(InnerNumberEditor, {
+      disabled: disabled,
+      errors: errors,
+      field: field,
+      setValue: setValue,
+      value: value
+    });
   });
 }
 NumberEditor.defaultProps = {

package/dist/field-editor-number.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"field-editor-number.esm.js","sources":["../src/parseNumber.ts","../src/NumberEditor.tsx"],"sourcesContent":["import isEmpty from 'lodash/isEmpty';\n\nexport function parseNumber(\n  value: string,\n  type: string\n): {\n  isValid: boolean;\n  value: number | undefined;\n} {\n  // This has saner semantics than parseFloat.\n  // For values with chars in 'em, it gives\n  // us NaN unlike parseFloat\n  const floatVal = +value;\n  const hasDot = /\\./g.test(value);\n  const hasFractional = /\\.\\d+/g.test(value);\n\n  if (isEmpty(value)) {\n    return {\n      isValid: true,\n      value: undefined,\n    };\n  }\n\n  if (isNaN(floatVal)) {\n    return {\n      isValid: false,\n      value: undefined,\n    };\n  }\n\n  if (type === 'Integer' && hasDot) {\n    const intVal = parseInt(value, 10);\n\n    return {\n      isValid: false,\n      value: intVal,\n    };\n  }\n\n  if (hasDot && !hasFractional) {\n    return {\n      isValid: false,\n      value: floatVal,\n    };\n  }\n\n  return {\n    isValid: true,\n    value: floatVal,\n  };\n}\n","import * as React from 'react';\nimport { FieldAPI, FieldConnector } from '@contentful/field-editor-shared';\nimport { parseNumber } from './parseNumber';\n\nimport { TextInput } from '@contentful/f36-components';\n\nexport interface NumberEditorProps {\n  /**\n   * is the field disabled initially\n   */\n  isInitiallyDisabled: boolean;\n\n  /**\n   * sdk.field\n   */\n  field: FieldAPI;\n}\n\ntype RangeValidation = { min?: number; max?: number };\n\nfunction getRangeFromField(field: FieldAPI): RangeValidation {\n  const validations = field.validations || [];\n  const result = validations.find((validation) => (validation as any).range) as\n    | { range: RangeValidation }\n    | undefined;\n  return result ? result.range : {};\n}\n\nexport function NumberEditor(props: NumberEditorProps) {\n  const { field } = props;\n\n  const range = getRangeFromField(field);\n\n  return (\n    <FieldConnector<number> field={field} isInitiallyDisabled={props.isInitiallyDisabled}>\n      {({ value, errors, disabled, setValue }) => {\n        return (\n          <div data-test-id=\"number-editor\">\n            <TextInput\n              testId=\"number-editor-input\"\n              min={range.min !== undefined ? String(range.min) : ''}\n              max={range.max !== undefined ? String(range.max) : ''}\n              step={field.type === 'Integer' ? '1' : ''}\n              type=\"number\"\n              isRequired={field.required}\n              isInvalid={errors.length > 0}\n              isDisabled={disabled}\n              value={value === undefined ? '' : String(value)}\n              onChange={(e: React.ChangeEvent<HTMLInputElement>) => {\n                const parseResult = parseNumber(e.target.value, field.type);\n                field.setInvalid(!parseResult.isValid);\n                if (parseResult.isValid) {\n                  setValue(parseResult.value);\n                }\n              }}\n            />\n          </div>\n        );\n      }}\n    </FieldConnector>\n  );\n}\n\nNumberEditor.defaultProps = {\n  isInitiallyDisabled: true,\n};\n"],"names":["parseNumber","value","type","floatVal","hasDot","test","hasFractional","isEmpty","isValid","undefined","isNaN","intVal","parseInt","getRangeFromField","field","validations","result","find","validation","range","NumberEditor","props","React","FieldConnector","isInitiallyDisabled","errors","disabled","setValue","TextInput","testId","min","String","max","step","isRequired","required","isInvalid","length","isDisabled","onChange","e","parseResult","target","setInvalid","defaultProps"],"mappings":"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"}
+{"version":3,"file":"field-editor-number.esm.js","sources":["../src/parseNumber.ts","../src/NumberEditor.tsx"],"sourcesContent":["import isEmpty from 'lodash/isEmpty';\n\nexport function parseNumber(\n  value: string,\n  type: string\n): {\n  isValid: boolean;\n  value: number | undefined;\n} {\n  // This has saner semantics than parseFloat.\n  // For values with chars in them, it gives\n  // us NaN unlike parseFloat\n  const floatVal = +value;\n  const hasDot = value.includes('.');\n  const hasFractional = /^(?:\\+|-)?\\d+\\.\\d+$/.test(value);\n\n  if (isEmpty(value)) {\n    return {\n      isValid: true,\n      value: undefined,\n    };\n  }\n\n  if (isNaN(floatVal)) {\n    return {\n      isValid: false,\n      value: undefined,\n    };\n  }\n\n  if (type === 'Integer' && hasDot) {\n    const intVal = parseInt(value, 10);\n\n    return {\n      isValid: false,\n      value: intVal,\n    };\n  }\n\n  if (hasDot && !hasFractional) {\n    return {\n      isValid: false,\n      value: floatVal,\n    };\n  }\n\n  return {\n    isValid: true,\n    value: floatVal,\n  };\n}\n","import * as React from 'react';\nimport {\n  FieldAPI,\n  FieldConnector,\n  FieldConnectorChildProps,\n} from '@contentful/field-editor-shared';\nimport { parseNumber } from './parseNumber';\n\nimport { TextInput } from '@contentful/f36-components';\n\nexport interface NumberEditorProps {\n  /**\n   * is the field disabled initially\n   */\n  isInitiallyDisabled: boolean;\n\n  /**\n   * sdk.field\n   */\n  field: FieldAPI;\n}\n\ntype RangeValidation = { min?: number; max?: number };\n\nfunction getRangeFromField(field: FieldAPI): RangeValidation {\n  const validations = field.validations || [];\n  const result = validations.find((validation) => (validation as any).range) as\n    | { range: RangeValidation }\n    | undefined;\n  return result ? result.range : {};\n}\n\nfunction valueToString(value: InnerNumberEditorProps['value']) {\n  return value === undefined ? '' : String(value);\n}\n\ntype InnerNumberEditorProps = Pick<\n  FieldConnectorChildProps<number>,\n  'disabled' | 'errors' | 'setValue' | 'value'\n> & {\n  field: NumberEditorProps['field'];\n};\n\nfunction InnerNumberEditor({\n  disabled,\n  errors,\n  field,\n  setValue,\n  value: sdkValue,\n}: InnerNumberEditorProps) {\n  const previousValue = React.useRef(valueToString(sdkValue));\n  const [inputValue, setInputValue] = React.useState(valueToString(sdkValue));\n  const range = getRangeFromField(field);\n\n  React.useEffect(() => {\n    previousValue.current = valueToString(sdkValue);\n  }, [sdkValue]);\n\n  React.useEffect(() => {\n    const stringifiedSdkValue = valueToString(sdkValue);\n    // Update the input value (string) if the SDK value (numeric) changes\n    if (stringifiedSdkValue !== previousValue.current && stringifiedSdkValue !== inputValue) {\n      setInputValue(stringifiedSdkValue);\n    }\n  }, [inputValue, sdkValue]);\n\n  return (\n    <div data-test-id=\"number-editor\">\n      <TextInput\n        testId=\"number-editor-input\"\n        min={range.min !== undefined ? String(range.min) : ''}\n        max={range.max !== undefined ? String(range.max) : ''}\n        step={field.type === 'Integer' ? '1' : ''}\n        isRequired={field.required}\n        isInvalid={errors.length > 0}\n        isDisabled={disabled}\n        value={inputValue}\n        // React cannot call onChange for certain changes to type=\"number\"\n        // so we use \"text\" instead. See https://github.com/facebook/react/issues/6556\n        type=\"text\"\n        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {\n          const parseResult = parseNumber(e.target.value, field.type);\n          field.setInvalid(!parseResult.isValid);\n\n          if (parseResult.isValid) {\n            setValue(parseResult.value);\n          }\n\n          setInputValue(e.target.value);\n        }}\n      />\n    </div>\n  );\n}\n\nexport function NumberEditor(props: NumberEditorProps) {\n  const { field } = props;\n\n  return (\n    <FieldConnector<number> field={field} isInitiallyDisabled={props.isInitiallyDisabled}>\n      {({\n        value,\n        errors,\n        disabled,\n        setValue,\n      }: Pick<FieldConnectorChildProps<number>, 'disabled' | 'errors' | 'setValue' | 'value'>) => (\n        <InnerNumberEditor\n          disabled={disabled}\n          errors={errors}\n          field={field}\n          setValue={setValue}\n          value={value}\n        />\n      )}\n    </FieldConnector>\n  );\n}\n\nNumberEditor.defaultProps = {\n  isInitiallyDisabled: true,\n};\n"],"names":["parseNumber","value","type","floatVal","hasDot","includes","hasFractional","test","isEmpty","isValid","undefined","isNaN","intVal","parseInt","getRangeFromField","field","validations","result","find","validation","range","valueToString","String","InnerNumberEditor","disabled","errors","setValue","sdkValue","previousValue","React","inputValue","setInputValue","current","stringifiedSdkValue","TextInput","testId","min","max","step","isRequired","required","isInvalid","length","isDisabled","onChange","e","parseResult","target","setInvalid","NumberEditor","props","FieldConnector","isInitiallyDisabled","defaultProps"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentful/field-editor-number",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "main": "dist/index.js",
   "module": "dist/field-editor-number.esm.js",
   "typings": "dist/index.d.ts",
@@ -23,13 +23,16 @@
   "dependencies": {
     "@contentful/f36-components": "^4.0.1",
     "@contentful/f36-tokens": "^4.0.0",
-    "@contentful/field-editor-shared": "^1.1.0",
+    "@contentful/field-editor-shared": "^1.1.1",
     "emotion": "^10.0.17",
     "lodash": "^4.17.15",
     "lodash-es": "^4.17.15"
   },
   "devDependencies": {
-    "@contentful/field-editor-test-utils": "^1.1.0"
+    "@contentful/field-editor-test-utils": "^1.1.1",
+    "@testing-library/jest-dom": "^5.12.0",
+    "@testing-library/react": "^11.2.6",
+    "@testing-library/user-event": "^13.1.9"
   },
   "peerDependencies": {
     "react": ">=16.8.0"
@@ -44,5 +47,5 @@
       }
     }
   },
-  "gitHead": "107c4765108477138afd9f7ae7b018c1fe9c0bd5"
+  "gitHead": "391dd70cdc8aeb7aa7e214149c89c07176ba860d"
 }