@contentful/field-editor-number 1.1.7 → 1.2.1

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.2.1](https://github.com/contentful/field-editors/compare/@contentful/field-editor-number@1.2.0...@contentful/field-editor-number@1.2.1) (2022-12-08)
+
+**Note:** Version bump only for package @contentful/field-editor-number
+
+# [1.2.0](https://github.com/contentful/field-editors/compare/@contentful/field-editor-number@1.1.7...@contentful/field-editor-number@1.2.0) (2022-08-22)
+
+### Features
+
+- refactoring of Number field-editor [BAU-722] ([#1203](https://github.com/contentful/field-editors/issues/1203)) ([d93698e](https://github.com/contentful/field-editors/commit/d93698e730e0eb7c83378bfaad4566a70aba23f6))
+
 ## [1.1.7](https://github.com/contentful/field-editors/compare/@contentful/field-editor-number@1.1.6...@contentful/field-editor-number@1.1.7) (2022-07-29)
 
 **Note:** Version bump only for package @contentful/field-editor-number

package/dist/NumberEditor.styles.d.ts

@@ -0,0 +1,6 @@
+export declare const styles: {
+    container: string;
+    controlsWrapper: string;
+    control: string;
+    input: string;
+};

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

@@ -5,64 +5,97 @@ 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 fieldEditorShared = require('@contentful/field-editor-shared');
-var isEmpty = _interopDefault(require('lodash/isEmpty'));
 var f36Components = require('@contentful/f36-components');
+var f36Icons = require('@contentful/f36-icons');
+var fieldEditorShared = require('@contentful/field-editor-shared');
+var tokens = _interopDefault(require('@contentful/f36-tokens'));
+var emotion = require('emotion');
 
-function parseNumber(value, type) {
-  // This has saner semantics than parseFloat.
-  // For values with chars in them, it gives
-  // us NaN unlike parseFloat
-  var floatVal = +value;
-  var hasDot = value.includes('.');
-  var hasFractional = /^(?:\+|-)?\d+\.\d+$/.test(value);
-
-  if (isEmpty(value)) {
-    return {
-      isValid: true,
-      value: undefined
-    };
-  }
-
-  if (isNaN(floatVal)) {
-    return {
-      isValid: false,
-      value: undefined
-    };
-  }
-
-  if (type === 'Integer' && hasDot) {
-    var intVal = parseInt(value, 10);
-    return {
-      isValid: false,
-      value: intVal
-    };
-  }
+var styles = {
+  container: /*#__PURE__*/emotion.css({
+    position: 'relative'
+  }),
+  controlsWrapper: /*#__PURE__*/emotion.css({
+    position: 'absolute',
+    top: '1px',
+    right: '1px',
+    width: tokens.spacingL,
+    height: 'calc(100% - 2px)',
+    display: 'flex',
+    flexDirection: 'column'
+  }),
+  control: /*#__PURE__*/emotion.css({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    minHeight: 0,
+    cursor: 'pointer',
+    padding: 0,
+    margin: 0,
+    outline: 'none',
+    border: "0 solid " + tokens.gray300,
+    background: 'none',
+    borderLeftWidth: '1px',
+    '&:first-of-type': {
+      borderTopRightRadius: tokens.borderRadiusMedium
+    },
+    '&:last-of-type': {
+      borderTopWidth: '1px',
+      borderBottomRightRadius: tokens.borderRadiusMedium
+    },
+    svg: {
+      fill: tokens.gray600
+    },
+    '&:hover': {
+      backgroundColor: tokens.gray200
+    },
+    '&:active': {
+      backgroundColor: tokens.gray300
+    }
+  }),
+  input: /*#__PURE__*/emotion.css({
+    paddingRight: tokens.spacingXl
+  })
+};
 
-  if (hasDot && !hasFractional) {
-    return {
-      isValid: false,
-      value: floatVal
-    };
+function parseNumber(value, type) {
+  if (Number.isNaN(+value)) {
+    return;
   }
 
-  return {
-    isValid: true,
-    value: floatVal
-  };
+  return type === 'Integer' ? parseInt(value, 10) : parseFloat(value);
+}
+var FLOAT_REGEX = /^[+-]?([0-9]+([.][0-9]*)?|[.][0-9]*)?$/;
+var INT_REGEX = /^[+-]?([0-9]*)$/;
+function isNumberInputValueValid(value, type) {
+  var regex = type === 'Integer' ? INT_REGEX : FLOAT_REGEX;
+  return regex.test(value);
 }
 
-function getRangeFromField(field) {
+var getRangeFromField = function getRangeFromField(field) {
   var validations = field.validations || [];
   var result = validations.find(function (validation) {
     return validation.range;
   });
   return result ? result.range : {};
-}
-
-function valueToString(value) {
+};
+var valueToString = function valueToString(value) {
   return value === undefined ? '' : String(value);
-}
+};
+var countDecimals = function countDecimals(number) {
+  var _number$toString$spli, _number$toString$spli2;
+
+  return (_number$toString$spli = (_number$toString$spli2 = number.toString().split('.')[1]) == null ? void 0 : _number$toString$spli2.length) != null ? _number$toString$spli : 0;
+};
+
+var StepChangeType;
+
+(function (StepChangeType) {
+  StepChangeType["Increment"] = "increment";
+  StepChangeType["Decrement"] = "decrement";
+})(StepChangeType || (StepChangeType = {}));
+
+var NUMBER_STEP = 1;
 
 function InnerNumberEditor(_ref) {
   var disabled = _ref.disabled,
@@ -70,46 +103,137 @@ function InnerNumberEditor(_ref) {
       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);
+  var inputRef = React.useRef(null);
   React.useEffect(function () {
-    previousValue.current = valueToString(sdkValue);
+    var stringSdkValue = valueToString(sdkValue); // Update the input value if the SDK value (numeric) changes
+
+    if (stringSdkValue !== inputValue) {
+      setInputValue(stringSdkValue);
+    } // eslint-disable-next-line react-hooks/exhaustive-deps -- we want to trigger it only when sdkValue has changed
+
   }, [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);
+  var updateExternalValue = function updateExternalValue(value) {
+    if (sdkValue !== value) {
+      setValue(value);
+    }
+  };
+
+  var changeValueByStep = function changeValueByStep(type) {
+    var currentValue = Number.isNaN(+inputValue) ? 0 : +inputValue;
+    var nextValue = type === StepChangeType.Increment ? currentValue + NUMBER_STEP : currentValue - NUMBER_STEP; // Floating point numbers cannot represent all decimals precisely in binary.
+    // This can lead to unexpected results, such as 0.1 + 0.2 = 0.30000000000000004.
+    // See more details: https://floating-point-gui.de/
+
+    nextValue = +nextValue.toFixed(countDecimals(currentValue));
+    setInputValue(valueToString(nextValue));
+    setValue(nextValue);
+  }; // Keeps focus on the input
+
+
+  var handleControlPointerDown = function handleControlPointerDown(event) {
+    var _inputRef$current;
+
+    event.preventDefault();
+    (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.focus();
+  };
+
+  var handleKeyDown = function handleKeyDown(event) {
+    var keyToFnMap = {
+      ArrowUp: function ArrowUp() {
+        return changeValueByStep(StepChangeType.Increment);
+      },
+      ArrowDown: function ArrowDown() {
+        return changeValueByStep(StepChangeType.Decrement);
+      }
+    };
+    var fn = keyToFnMap[event.key];
+
+    if (fn) {
+      event.preventDefault();
+      fn();
+    }
+  };
+
+  var handleInputChange = function handleInputChange(e) {
+    var value = e.target.value;
+
+    if (!value) {
+      setInputValue(value);
+      updateExternalValue(undefined);
+      return;
+    }
+
+    if (!isNumberInputValueValid(value, field.type)) {
+      return;
+    }
+
+    setInputValue(value);
+    var parsedNumber = parseNumber(value, field.type);
+    field.setInvalid(parsedNumber === undefined);
+
+    if (parsedNumber !== undefined) {
+      updateExternalValue(parsedNumber);
     }
-  }, [inputValue, sdkValue]);
+  };
+
   return React.createElement("div", {
-    "data-test-id": "number-editor"
-  }, React.createElement(f36Components.TextInput, {
+    "data-test-id": "number-editor",
+    className: styles.container
+  }, React.createElement(f36Components.TextInput // With type="number" react doesn't call onChange for certain inputs, for example if you type `e`
+  // so we use "text" instead and fully rely on our own validation.
+  // See more details: https://github.com/facebook/react/issues/6556
+  , {
+    // With type="number" react doesn't call onChange for certain inputs, for example if you type `e`
+    // so we use "text" instead and fully rely on our own validation.
+    // See more details: https://github.com/facebook/react/issues/6556
+    type: "text",
     testId: "number-editor-input",
-    min: range.min !== undefined ? String(range.min) : '',
-    max: range.max !== undefined ? String(range.max) : '',
-    step: field.type === 'Integer' ? '1' : '',
+    className: styles.input,
+    min: range.min,
+    max: range.max,
     isRequired: field.required,
     isInvalid: errors.length > 0,
     isDisabled: disabled,
     value: inputValue,
-    type: "number",
-    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);
-    }
-  }));
+    ref: inputRef,
+    onChange: handleInputChange,
+    onKeyDown: handleKeyDown,
+    // The same role that input type="number" has
+    // See more details: https://www.digitala11y.com/spinbutton-role/
+    role: "spinbutton",
+    "aria-valuenow": sdkValue != null ? sdkValue : 0,
+    "aria-valuetext": inputValue,
+    "aria-valuemin": range.min,
+    "aria-valuemax": range.max
+  }), !disabled && React.createElement("div", {
+    className: styles.controlsWrapper,
+    "aria-hidden": "true"
+  }, React.createElement("button", {
+    tabIndex: -1,
+    className: styles.control,
+    onClick: function onClick() {
+      return changeValueByStep(StepChangeType.Increment);
+    },
+    onPointerDown: handleControlPointerDown
+  }, React.createElement(f36Icons.ArrowUpTrimmedIcon, {
+    size: "medium"
+  })), React.createElement("button", {
+    tabIndex: -1,
+    className: styles.control,
+    onClick: function onClick() {
+      return changeValueByStep(StepChangeType.Decrement);
+    },
+    onPointerDown: handleControlPointerDown
+  }, React.createElement(f36Icons.ArrowDownTrimmedIcon, {
+    size: "medium"
+  }))));
 }
 
 function NumberEditor(props) {

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 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        type=\"number\"\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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"}
+{"version":3,"file":"field-editor-number.cjs.development.js","sources":["../src/NumberEditor.styles.ts","../src/parseNumber.ts","../src/utils.ts","../src/NumberEditor.tsx"],"sourcesContent":["import tokens from '@contentful/f36-tokens';\nimport { css } from 'emotion';\n\nexport const styles = {\n  container: css({\n    position: 'relative',\n  }),\n  controlsWrapper: css({\n    position: 'absolute',\n    top: '1px',\n    right: '1px',\n    width: tokens.spacingL,\n    height: 'calc(100% - 2px)',\n    display: 'flex',\n    flexDirection: 'column',\n  }),\n  control: css({\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    minHeight: 0,\n    cursor: 'pointer',\n    padding: 0,\n    margin: 0,\n    outline: 'none',\n    border: `0 solid ${tokens.gray300}`,\n    background: 'none',\n    borderLeftWidth: '1px',\n\n    '&:first-of-type': {\n      borderTopRightRadius: tokens.borderRadiusMedium,\n    },\n\n    '&:last-of-type': {\n      borderTopWidth: '1px',\n      borderBottomRightRadius: tokens.borderRadiusMedium,\n    },\n\n    svg: {\n      fill: tokens.gray600,\n    },\n\n    '&:hover': {\n      backgroundColor: tokens.gray200,\n    },\n\n    '&:active': {\n      backgroundColor: tokens.gray300,\n    },\n  }),\n  input: css({\n    paddingRight: tokens.spacingXl,\n  }),\n};\n","export function parseNumber(value: string, type: string) {\n  if (Number.isNaN(+value)) {\n    return;\n  }\n\n  return type === 'Integer' ? parseInt(value, 10) : parseFloat(value);\n}\n\nconst FLOAT_REGEX = /^[+-]?([0-9]+([.][0-9]*)?|[.][0-9]*)?$/;\nconst INT_REGEX = /^[+-]?([0-9]*)$/;\n\nexport function isNumberInputValueValid(value: string, type: string) {\n  const regex = type === 'Integer' ? INT_REGEX : FLOAT_REGEX;\n\n  return regex.test(value);\n}\n","import { FieldAPI } from '@contentful/field-editor-shared';\n\ntype RangeValidation = { min?: number; max?: number };\n\nexport const 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 const valueToString = (value: number | null | undefined) => {\n  return value === undefined ? '' : String(value);\n};\n\nexport const countDecimals = (number: number) => {\n  return number.toString().split('.')[1]?.length ?? 0;\n};\n","import * as React from 'react';\n\nimport { TextInput } from '@contentful/f36-components';\nimport { ArrowUpTrimmedIcon, ArrowDownTrimmedIcon } from '@contentful/f36-icons';\nimport {\n  FieldAPI,\n  FieldConnector,\n  FieldConnectorChildProps,\n} from '@contentful/field-editor-shared';\n\nimport { styles } from './NumberEditor.styles';\nimport { isNumberInputValueValid, parseNumber } from './parseNumber';\nimport { getRangeFromField, valueToString, countDecimals } from './utils';\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 InnerNumberEditorProps = Pick<\n  FieldConnectorChildProps<number>,\n  'disabled' | 'errors' | 'setValue' | 'value'\n> & {\n  field: NumberEditorProps['field'];\n};\n\nenum StepChangeType {\n  Increment = 'increment',\n  Decrement = 'decrement',\n}\n\nconst NUMBER_STEP = 1;\n\nfunction InnerNumberEditor({\n  disabled,\n  errors,\n  field,\n  setValue,\n  value: sdkValue,\n}: InnerNumberEditorProps) {\n  const [inputValue, setInputValue] = React.useState(valueToString(sdkValue));\n  const range = getRangeFromField(field);\n  const inputRef = React.useRef<HTMLInputElement>(null);\n\n  React.useEffect(() => {\n    const stringSdkValue = valueToString(sdkValue);\n    // Update the input value if the SDK value (numeric) changes\n    if (stringSdkValue !== inputValue) {\n      setInputValue(stringSdkValue);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- we want to trigger it only when sdkValue has changed\n  }, [sdkValue]);\n\n  const updateExternalValue = (value: number | undefined) => {\n    if (sdkValue !== value) {\n      setValue(value);\n    }\n  };\n\n  const changeValueByStep = (type: StepChangeType) => {\n    const currentValue = Number.isNaN(+inputValue) ? 0 : +inputValue;\n    let nextValue =\n      type === StepChangeType.Increment ? currentValue + NUMBER_STEP : currentValue - NUMBER_STEP;\n    // Floating point numbers cannot represent all decimals precisely in binary.\n    // This can lead to unexpected results, such as 0.1 + 0.2 = 0.30000000000000004.\n    // See more details: https://floating-point-gui.de/\n    nextValue = +nextValue.toFixed(countDecimals(currentValue));\n\n    setInputValue(valueToString(nextValue));\n    setValue(nextValue);\n  };\n\n  // Keeps focus on the input\n  const handleControlPointerDown: React.PointerEventHandler<HTMLButtonElement> = (event) => {\n    event.preventDefault();\n    inputRef.current?.focus();\n  };\n\n  const handleKeyDown = (event: React.KeyboardEvent<any>) => {\n    const keyToFnMap: {\n      [key: string]: () => void;\n    } = {\n      ArrowUp: () => changeValueByStep(StepChangeType.Increment),\n      ArrowDown: () => changeValueByStep(StepChangeType.Decrement),\n    };\n\n    const fn = keyToFnMap[event.key];\n    if (fn) {\n      event.preventDefault();\n      fn();\n    }\n  };\n\n  const handleInputChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {\n    const value = e.target.value;\n    if (!value) {\n      setInputValue(value);\n      updateExternalValue(undefined);\n      return;\n    }\n\n    if (!isNumberInputValueValid(value, field.type)) {\n      return;\n    }\n\n    setInputValue(value);\n\n    const parsedNumber = parseNumber(value, field.type);\n    field.setInvalid(parsedNumber === undefined);\n    if (parsedNumber !== undefined) {\n      updateExternalValue(parsedNumber);\n    }\n  };\n\n  return (\n    <div data-test-id=\"number-editor\" className={styles.container}>\n      <TextInput\n        // With type=\"number\" react doesn't call onChange for certain inputs, for example if you type `e`\n        // so we use \"text\" instead and fully rely on our own validation.\n        // See more details: https://github.com/facebook/react/issues/6556\n        type=\"text\"\n        testId=\"number-editor-input\"\n        className={styles.input}\n        min={range.min}\n        max={range.max}\n        isRequired={field.required}\n        isInvalid={errors.length > 0}\n        isDisabled={disabled}\n        value={inputValue}\n        ref={inputRef}\n        onChange={handleInputChange}\n        onKeyDown={handleKeyDown}\n        // The same role that input type=\"number\" has\n        // See more details: https://www.digitala11y.com/spinbutton-role/\n        role=\"spinbutton\"\n        aria-valuenow={sdkValue ?? 0}\n        aria-valuetext={inputValue}\n        aria-valuemin={range.min}\n        aria-valuemax={range.max}\n      />\n      {/**\n       * We hide this controls from screen readers and keyboard focus.\n       * For those purposes we have a keyboard handler. The same way native input number works.\n       */}\n      {!disabled && (\n        <div className={styles.controlsWrapper} aria-hidden=\"true\">\n          <button\n            tabIndex={-1}\n            className={styles.control}\n            onClick={() => changeValueByStep(StepChangeType.Increment)}\n            onPointerDown={handleControlPointerDown}>\n            <ArrowUpTrimmedIcon size=\"medium\" />\n          </button>\n          <button\n            tabIndex={-1}\n            className={styles.control}\n            onClick={() => changeValueByStep(StepChangeType.Decrement)}\n            onPointerDown={handleControlPointerDown}>\n            <ArrowDownTrimmedIcon size=\"medium\" />\n          </button>\n        </div>\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":["styles","container","css","position","controlsWrapper","top","right","width","tokens","spacingL","height","display","flexDirection","control","alignItems","justifyContent","minHeight","cursor","padding","margin","outline","border","gray300","background","borderLeftWidth","borderTopRightRadius","borderRadiusMedium","borderTopWidth","borderBottomRightRadius","svg","fill","gray600","backgroundColor","gray200","input","paddingRight","spacingXl","parseNumber","value","type","Number","isNaN","parseInt","parseFloat","FLOAT_REGEX","INT_REGEX","isNumberInputValueValid","regex","test","getRangeFromField","field","validations","result","find","validation","range","valueToString","undefined","String","countDecimals","number","toString","split","length","StepChangeType","NUMBER_STEP","InnerNumberEditor","disabled","errors","setValue","sdkValue","React","inputValue","setInputValue","inputRef","stringSdkValue","updateExternalValue","changeValueByStep","currentValue","nextValue","Increment","toFixed","handleControlPointerDown","event","preventDefault","current","focus","handleKeyDown","keyToFnMap","ArrowUp","ArrowDown","Decrement","fn","key","handleInputChange","e","target","parsedNumber","setInvalid","className","TextInput","testId","min","max","isRequired","required","isInvalid","isDisabled","ref","onChange","onKeyDown","role","tabIndex","onClick","onPointerDown","ArrowUpTrimmedIcon","size","ArrowDownTrimmedIcon","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,t=require("react"),i=require("@contentful/field-editor-shared"),r=(e=require("lodash/isEmpty"))&&"object"==typeof e&&"default"in e?e.default:e,n=require("@contentful/f36-components");function a(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(a(s)),f=t.useState(a(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=a(s)}),[s]),t.useEffect((function(){var e=a(s);e!==o.current&&e!==v&&c(e)}),[v,s]),t.createElement("div",{"data-test-id":"number-editor"},t.createElement(n.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:"number",onChange:function(e){var t,i,n,a,l,s=(i=u.type,n=+(t=e.target.value),a=t.includes("."),l=/^(?:\+|-)?\d+\.\d+$/.test(t),r(t)?{isValid:!0,value:void 0}:isNaN(n)?{isValid:!1,value:void 0}:"Integer"===i&&a?{isValid:!1,value:parseInt(t,10)}:a&&!l?{isValid:!1,value:n}:{isValid:!0,value:n});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;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t,n=require("react"),r=require("@contentful/f36-components"),i=require("@contentful/f36-icons"),o=require("@contentful/field-editor-shared"),a=(e=require("@contentful/f36-tokens"))&&"object"==typeof e&&"default"in e?e.default:e,u=require("emotion"),l={container:u.css({position:"relative"}),controlsWrapper:u.css({position:"absolute",top:"1px",right:"1px",width:a.spacingL,height:"calc(100% - 2px)",display:"flex",flexDirection:"column"}),control:u.css({display:"flex",alignItems:"center",justifyContent:"center",minHeight:0,cursor:"pointer",padding:0,margin:0,outline:"none",border:"0 solid "+a.gray300,background:"none",borderLeftWidth:"1px","&:first-of-type":{borderTopRightRadius:a.borderRadiusMedium},"&:last-of-type":{borderTopWidth:"1px",borderBottomRightRadius:a.borderRadiusMedium},svg:{fill:a.gray600},"&:hover":{backgroundColor:a.gray200},"&:active":{backgroundColor:a.gray300}}),input:u.css({paddingRight:a.spacingXl})},c=/^[+-]?([0-9]+([.][0-9]*)?|[.][0-9]*)?$/,s=/^[+-]?([0-9]*)$/,d=function(e){return void 0===e?"":String(e)};function f(e){var o=e.disabled,a=e.errors,u=e.field,f=e.setValue,m=e.value,p=n.useState(d(m)),v=p[0],b=p[1],g=function(e){var t=(e.validations||[]).find((function(e){return e.range}));return t?t.range:{}}(u),x=n.useRef(null);n.useEffect((function(){var e=d(m);e!==v&&b(e)}),[m]);var y=function(e){m!==e&&f(e)},I=function(e){var n,r,i,o=Number.isNaN(+v)?0:+v,a=e===t.Increment?o+1:o-1;a=+a.toFixed((n=o,null!=(r=null==(i=n.toString().split(".")[1])?void 0:i.length)?r:0)),b(d(a)),f(a)},h=function(e){var t;e.preventDefault(),null==(t=x.current)||t.focus()};return n.createElement("div",{"data-test-id":"number-editor",className:l.container},n.createElement(r.TextInput,{type:"text",testId:"number-editor-input",className:l.input,min:g.min,max:g.max,isRequired:u.required,isInvalid:a.length>0,isDisabled:o,value:v,ref:x,onChange:function(e){var t=e.target.value;if(!t)return b(t),void y(void 0);if(function(e,t){return("Integer"===t?s:c).test(e)}(t,u.type)){b(t);var n=function(e,t){if(!Number.isNaN(+e))return"Integer"===t?parseInt(e,10):parseFloat(e)}(t,u.type);u.setInvalid(void 0===n),void 0!==n&&y(n)}},onKeyDown:function(e){var n={ArrowUp:function(){return I(t.Increment)},ArrowDown:function(){return I(t.Decrement)}}[e.key];n&&(e.preventDefault(),n())},role:"spinbutton","aria-valuenow":null!=m?m:0,"aria-valuetext":v,"aria-valuemin":g.min,"aria-valuemax":g.max}),!o&&n.createElement("div",{className:l.controlsWrapper,"aria-hidden":"true"},n.createElement("button",{tabIndex:-1,className:l.control,onClick:function(){return I(t.Increment)},onPointerDown:h},n.createElement(i.ArrowUpTrimmedIcon,{size:"medium"})),n.createElement("button",{tabIndex:-1,className:l.control,onClick:function(){return I(t.Decrement)},onPointerDown:h},n.createElement(i.ArrowDownTrimmedIcon,{size:"medium"}))))}function m(e){var t=e.field;return n.createElement(o.FieldConnector,{field:t,isInitiallyDisabled:e.isInitiallyDisabled},(function(e){return n.createElement(f,{disabled:e.disabled,errors:e.errors,field:t,setValue:e.setValue,value:e.value})}))}!function(e){e.Increment="increment",e.Decrement="decrement"}(t||(t={})),m.defaultProps={isInitiallyDisabled:!0},exports.NumberEditor=m;
 //# 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 {\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        type=\"number\"\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,EACPe,KAAK,SACLM,SAAU,SAACC,OC3EjBjC,EACA0B,EAQMQ,EACAC,EACAC,EDiEQC,GC3EdX,ED2EwDpB,EAAMoB,KCnExDQ,IATNlC,ED4EwCiC,EAAEK,OAAOtC,OClE3CmC,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,IDgCD5B,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"}
+{"version":3,"file":"field-editor-number.cjs.production.min.js","sources":["../src/NumberEditor.tsx","../src/NumberEditor.styles.ts","../src/parseNumber.ts","../src/utils.ts"],"sourcesContent":["import * as React from 'react';\n\nimport { TextInput } from '@contentful/f36-components';\nimport { ArrowUpTrimmedIcon, ArrowDownTrimmedIcon } from '@contentful/f36-icons';\nimport {\n  FieldAPI,\n  FieldConnector,\n  FieldConnectorChildProps,\n} from '@contentful/field-editor-shared';\n\nimport { styles } from './NumberEditor.styles';\nimport { isNumberInputValueValid, parseNumber } from './parseNumber';\nimport { getRangeFromField, valueToString, countDecimals } from './utils';\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 InnerNumberEditorProps = Pick<\n  FieldConnectorChildProps<number>,\n  'disabled' | 'errors' | 'setValue' | 'value'\n> & {\n  field: NumberEditorProps['field'];\n};\n\nenum StepChangeType {\n  Increment = 'increment',\n  Decrement = 'decrement',\n}\n\nconst NUMBER_STEP = 1;\n\nfunction InnerNumberEditor({\n  disabled,\n  errors,\n  field,\n  setValue,\n  value: sdkValue,\n}: InnerNumberEditorProps) {\n  const [inputValue, setInputValue] = React.useState(valueToString(sdkValue));\n  const range = getRangeFromField(field);\n  const inputRef = React.useRef<HTMLInputElement>(null);\n\n  React.useEffect(() => {\n    const stringSdkValue = valueToString(sdkValue);\n    // Update the input value if the SDK value (numeric) changes\n    if (stringSdkValue !== inputValue) {\n      setInputValue(stringSdkValue);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- we want to trigger it only when sdkValue has changed\n  }, [sdkValue]);\n\n  const updateExternalValue = (value: number | undefined) => {\n    if (sdkValue !== value) {\n      setValue(value);\n    }\n  };\n\n  const changeValueByStep = (type: StepChangeType) => {\n    const currentValue = Number.isNaN(+inputValue) ? 0 : +inputValue;\n    let nextValue =\n      type === StepChangeType.Increment ? currentValue + NUMBER_STEP : currentValue - NUMBER_STEP;\n    // Floating point numbers cannot represent all decimals precisely in binary.\n    // This can lead to unexpected results, such as 0.1 + 0.2 = 0.30000000000000004.\n    // See more details: https://floating-point-gui.de/\n    nextValue = +nextValue.toFixed(countDecimals(currentValue));\n\n    setInputValue(valueToString(nextValue));\n    setValue(nextValue);\n  };\n\n  // Keeps focus on the input\n  const handleControlPointerDown: React.PointerEventHandler<HTMLButtonElement> = (event) => {\n    event.preventDefault();\n    inputRef.current?.focus();\n  };\n\n  const handleKeyDown = (event: React.KeyboardEvent<any>) => {\n    const keyToFnMap: {\n      [key: string]: () => void;\n    } = {\n      ArrowUp: () => changeValueByStep(StepChangeType.Increment),\n      ArrowDown: () => changeValueByStep(StepChangeType.Decrement),\n    };\n\n    const fn = keyToFnMap[event.key];\n    if (fn) {\n      event.preventDefault();\n      fn();\n    }\n  };\n\n  const handleInputChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {\n    const value = e.target.value;\n    if (!value) {\n      setInputValue(value);\n      updateExternalValue(undefined);\n      return;\n    }\n\n    if (!isNumberInputValueValid(value, field.type)) {\n      return;\n    }\n\n    setInputValue(value);\n\n    const parsedNumber = parseNumber(value, field.type);\n    field.setInvalid(parsedNumber === undefined);\n    if (parsedNumber !== undefined) {\n      updateExternalValue(parsedNumber);\n    }\n  };\n\n  return (\n    <div data-test-id=\"number-editor\" className={styles.container}>\n      <TextInput\n        // With type=\"number\" react doesn't call onChange for certain inputs, for example if you type `e`\n        // so we use \"text\" instead and fully rely on our own validation.\n        // See more details: https://github.com/facebook/react/issues/6556\n        type=\"text\"\n        testId=\"number-editor-input\"\n        className={styles.input}\n        min={range.min}\n        max={range.max}\n        isRequired={field.required}\n        isInvalid={errors.length > 0}\n        isDisabled={disabled}\n        value={inputValue}\n        ref={inputRef}\n        onChange={handleInputChange}\n        onKeyDown={handleKeyDown}\n        // The same role that input type=\"number\" has\n        // See more details: https://www.digitala11y.com/spinbutton-role/\n        role=\"spinbutton\"\n        aria-valuenow={sdkValue ?? 0}\n        aria-valuetext={inputValue}\n        aria-valuemin={range.min}\n        aria-valuemax={range.max}\n      />\n      {/**\n       * We hide this controls from screen readers and keyboard focus.\n       * For those purposes we have a keyboard handler. The same way native input number works.\n       */}\n      {!disabled && (\n        <div className={styles.controlsWrapper} aria-hidden=\"true\">\n          <button\n            tabIndex={-1}\n            className={styles.control}\n            onClick={() => changeValueByStep(StepChangeType.Increment)}\n            onPointerDown={handleControlPointerDown}>\n            <ArrowUpTrimmedIcon size=\"medium\" />\n          </button>\n          <button\n            tabIndex={-1}\n            className={styles.control}\n            onClick={() => changeValueByStep(StepChangeType.Decrement)}\n            onPointerDown={handleControlPointerDown}>\n            <ArrowDownTrimmedIcon size=\"medium\" />\n          </button>\n        </div>\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 tokens from '@contentful/f36-tokens';\nimport { css } from 'emotion';\n\nexport const styles = {\n  container: css({\n    position: 'relative',\n  }),\n  controlsWrapper: css({\n    position: 'absolute',\n    top: '1px',\n    right: '1px',\n    width: tokens.spacingL,\n    height: 'calc(100% - 2px)',\n    display: 'flex',\n    flexDirection: 'column',\n  }),\n  control: css({\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    minHeight: 0,\n    cursor: 'pointer',\n    padding: 0,\n    margin: 0,\n    outline: 'none',\n    border: `0 solid ${tokens.gray300}`,\n    background: 'none',\n    borderLeftWidth: '1px',\n\n    '&:first-of-type': {\n      borderTopRightRadius: tokens.borderRadiusMedium,\n    },\n\n    '&:last-of-type': {\n      borderTopWidth: '1px',\n      borderBottomRightRadius: tokens.borderRadiusMedium,\n    },\n\n    svg: {\n      fill: tokens.gray600,\n    },\n\n    '&:hover': {\n      backgroundColor: tokens.gray200,\n    },\n\n    '&:active': {\n      backgroundColor: tokens.gray300,\n    },\n  }),\n  input: css({\n    paddingRight: tokens.spacingXl,\n  }),\n};\n","export function parseNumber(value: string, type: string) {\n  if (Number.isNaN(+value)) {\n    return;\n  }\n\n  return type === 'Integer' ? parseInt(value, 10) : parseFloat(value);\n}\n\nconst FLOAT_REGEX = /^[+-]?([0-9]+([.][0-9]*)?|[.][0-9]*)?$/;\nconst INT_REGEX = /^[+-]?([0-9]*)$/;\n\nexport function isNumberInputValueValid(value: string, type: string) {\n  const regex = type === 'Integer' ? INT_REGEX : FLOAT_REGEX;\n\n  return regex.test(value);\n}\n","import { FieldAPI } from '@contentful/field-editor-shared';\n\ntype RangeValidation = { min?: number; max?: number };\n\nexport const 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 const valueToString = (value: number | null | undefined) => {\n  return value === undefined ? '' : String(value);\n};\n\nexport const countDecimals = (number: number) => {\n  return number.toString().split('.')[1]?.length ?? 0;\n};\n"],"names":["StepChangeType","styles","container","css","position","controlsWrapper","top","right","width","tokens","spacingL","height","display","flexDirection","control","alignItems","justifyContent","minHeight","cursor","padding","margin","outline","border","gray300","background","borderLeftWidth","borderTopRightRadius","borderRadiusMedium","borderTopWidth","borderBottomRightRadius","svg","fill","gray600","backgroundColor","gray200","input","paddingRight","spacingXl","FLOAT_REGEX","INT_REGEX","valueToString","value","undefined","String","InnerNumberEditor","disabled","errors","field","setValue","sdkValue","React","inputValue","setInputValue","range","result","validations","find","validation","getRangeFromField","inputRef","stringSdkValue","updateExternalValue","changeValueByStep","type","number","currentValue","Number","isNaN","nextValue","Increment","toFixed","toString","split","_number$toString$spli2","length","handleControlPointerDown","event","preventDefault","current","focus","className","TextInput","testId","min","max","isRequired","required","isInvalid","isDisabled","ref","onChange","e","target","test","isNumberInputValueValid","parsedNumber","parseInt","parseFloat","parseNumber","setInvalid","onKeyDown","fn","ArrowUp","ArrowDown","Decrement","key","role","tabIndex","onClick","onPointerDown","ArrowUpTrimmedIcon","size","ArrowDownTrimmedIcon","NumberEditor","props","FieldConnector","isInitiallyDisabled","defaultProps"],"mappings":"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"}

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

@@ -1,62 +1,95 @@
-import { createElement, useRef, useState, useEffect } from 'react';
-import { FieldConnector } from '@contentful/field-editor-shared';
-import isEmpty from 'lodash-es/isEmpty';
+import { createElement, useState, useRef, useEffect } from 'react';
 import { TextInput } from '@contentful/f36-components';
+import { ArrowUpTrimmedIcon, ArrowDownTrimmedIcon } from '@contentful/f36-icons';
+import { FieldConnector } from '@contentful/field-editor-shared';
+import tokens from '@contentful/f36-tokens';
+import { css } from 'emotion';
 
-function parseNumber(value, type) {
-  // This has saner semantics than parseFloat.
-  // For values with chars in them, it gives
-  // us NaN unlike parseFloat
-  var floatVal = +value;
-  var hasDot = value.includes('.');
-  var hasFractional = /^(?:\+|-)?\d+\.\d+$/.test(value);
-
-  if (isEmpty(value)) {
-    return {
-      isValid: true,
-      value: undefined
-    };
-  }
-
-  if (isNaN(floatVal)) {
-    return {
-      isValid: false,
-      value: undefined
-    };
-  }
-
-  if (type === 'Integer' && hasDot) {
-    var intVal = parseInt(value, 10);
-    return {
-      isValid: false,
-      value: intVal
-    };
-  }
+var styles = {
+  container: /*#__PURE__*/css({
+    position: 'relative'
+  }),
+  controlsWrapper: /*#__PURE__*/css({
+    position: 'absolute',
+    top: '1px',
+    right: '1px',
+    width: tokens.spacingL,
+    height: 'calc(100% - 2px)',
+    display: 'flex',
+    flexDirection: 'column'
+  }),
+  control: /*#__PURE__*/css({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    minHeight: 0,
+    cursor: 'pointer',
+    padding: 0,
+    margin: 0,
+    outline: 'none',
+    border: "0 solid " + tokens.gray300,
+    background: 'none',
+    borderLeftWidth: '1px',
+    '&:first-of-type': {
+      borderTopRightRadius: tokens.borderRadiusMedium
+    },
+    '&:last-of-type': {
+      borderTopWidth: '1px',
+      borderBottomRightRadius: tokens.borderRadiusMedium
+    },
+    svg: {
+      fill: tokens.gray600
+    },
+    '&:hover': {
+      backgroundColor: tokens.gray200
+    },
+    '&:active': {
+      backgroundColor: tokens.gray300
+    }
+  }),
+  input: /*#__PURE__*/css({
+    paddingRight: tokens.spacingXl
+  })
+};
 
-  if (hasDot && !hasFractional) {
-    return {
-      isValid: false,
-      value: floatVal
-    };
+function parseNumber(value, type) {
+  if (Number.isNaN(+value)) {
+    return;
   }
 
-  return {
-    isValid: true,
-    value: floatVal
-  };
+  return type === 'Integer' ? parseInt(value, 10) : parseFloat(value);
+}
+var FLOAT_REGEX = /^[+-]?([0-9]+([.][0-9]*)?|[.][0-9]*)?$/;
+var INT_REGEX = /^[+-]?([0-9]*)$/;
+function isNumberInputValueValid(value, type) {
+  var regex = type === 'Integer' ? INT_REGEX : FLOAT_REGEX;
+  return regex.test(value);
 }
 
-function getRangeFromField(field) {
+var getRangeFromField = function getRangeFromField(field) {
   var validations = field.validations || [];
   var result = validations.find(function (validation) {
     return validation.range;
   });
   return result ? result.range : {};
-}
-
-function valueToString(value) {
+};
+var valueToString = function valueToString(value) {
   return value === undefined ? '' : String(value);
-}
+};
+var countDecimals = function countDecimals(number) {
+  var _number$toString$spli, _number$toString$spli2;
+
+  return (_number$toString$spli = (_number$toString$spli2 = number.toString().split('.')[1]) == null ? void 0 : _number$toString$spli2.length) != null ? _number$toString$spli : 0;
+};
+
+var StepChangeType;
+
+(function (StepChangeType) {
+  StepChangeType["Increment"] = "increment";
+  StepChangeType["Decrement"] = "decrement";
+})(StepChangeType || (StepChangeType = {}));
+
+var NUMBER_STEP = 1;
 
 function InnerNumberEditor(_ref) {
   var disabled = _ref.disabled,
@@ -64,46 +97,137 @@ function InnerNumberEditor(_ref) {
       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);
+  var inputRef = useRef(null);
   useEffect(function () {
-    previousValue.current = valueToString(sdkValue);
+    var stringSdkValue = valueToString(sdkValue); // Update the input value if the SDK value (numeric) changes
+
+    if (stringSdkValue !== inputValue) {
+      setInputValue(stringSdkValue);
+    } // eslint-disable-next-line react-hooks/exhaustive-deps -- we want to trigger it only when sdkValue has changed
+
   }, [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);
+  var updateExternalValue = function updateExternalValue(value) {
+    if (sdkValue !== value) {
+      setValue(value);
+    }
+  };
+
+  var changeValueByStep = function changeValueByStep(type) {
+    var currentValue = Number.isNaN(+inputValue) ? 0 : +inputValue;
+    var nextValue = type === StepChangeType.Increment ? currentValue + NUMBER_STEP : currentValue - NUMBER_STEP; // Floating point numbers cannot represent all decimals precisely in binary.
+    // This can lead to unexpected results, such as 0.1 + 0.2 = 0.30000000000000004.
+    // See more details: https://floating-point-gui.de/
+
+    nextValue = +nextValue.toFixed(countDecimals(currentValue));
+    setInputValue(valueToString(nextValue));
+    setValue(nextValue);
+  }; // Keeps focus on the input
+
+
+  var handleControlPointerDown = function handleControlPointerDown(event) {
+    var _inputRef$current;
+
+    event.preventDefault();
+    (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.focus();
+  };
+
+  var handleKeyDown = function handleKeyDown(event) {
+    var keyToFnMap = {
+      ArrowUp: function ArrowUp() {
+        return changeValueByStep(StepChangeType.Increment);
+      },
+      ArrowDown: function ArrowDown() {
+        return changeValueByStep(StepChangeType.Decrement);
+      }
+    };
+    var fn = keyToFnMap[event.key];
+
+    if (fn) {
+      event.preventDefault();
+      fn();
+    }
+  };
+
+  var handleInputChange = function handleInputChange(e) {
+    var value = e.target.value;
+
+    if (!value) {
+      setInputValue(value);
+      updateExternalValue(undefined);
+      return;
+    }
+
+    if (!isNumberInputValueValid(value, field.type)) {
+      return;
+    }
+
+    setInputValue(value);
+    var parsedNumber = parseNumber(value, field.type);
+    field.setInvalid(parsedNumber === undefined);
+
+    if (parsedNumber !== undefined) {
+      updateExternalValue(parsedNumber);
     }
-  }, [inputValue, sdkValue]);
+  };
+
   return createElement("div", {
-    "data-test-id": "number-editor"
-  }, createElement(TextInput, {
+    "data-test-id": "number-editor",
+    className: styles.container
+  }, createElement(TextInput // With type="number" react doesn't call onChange for certain inputs, for example if you type `e`
+  // so we use "text" instead and fully rely on our own validation.
+  // See more details: https://github.com/facebook/react/issues/6556
+  , {
+    // With type="number" react doesn't call onChange for certain inputs, for example if you type `e`
+    // so we use "text" instead and fully rely on our own validation.
+    // See more details: https://github.com/facebook/react/issues/6556
+    type: "text",
     testId: "number-editor-input",
-    min: range.min !== undefined ? String(range.min) : '',
-    max: range.max !== undefined ? String(range.max) : '',
-    step: field.type === 'Integer' ? '1' : '',
+    className: styles.input,
+    min: range.min,
+    max: range.max,
     isRequired: field.required,
     isInvalid: errors.length > 0,
     isDisabled: disabled,
     value: inputValue,
-    type: "number",
-    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);
-    }
-  }));
+    ref: inputRef,
+    onChange: handleInputChange,
+    onKeyDown: handleKeyDown,
+    // The same role that input type="number" has
+    // See more details: https://www.digitala11y.com/spinbutton-role/
+    role: "spinbutton",
+    "aria-valuenow": sdkValue != null ? sdkValue : 0,
+    "aria-valuetext": inputValue,
+    "aria-valuemin": range.min,
+    "aria-valuemax": range.max
+  }), !disabled && createElement("div", {
+    className: styles.controlsWrapper,
+    "aria-hidden": "true"
+  }, createElement("button", {
+    tabIndex: -1,
+    className: styles.control,
+    onClick: function onClick() {
+      return changeValueByStep(StepChangeType.Increment);
+    },
+    onPointerDown: handleControlPointerDown
+  }, createElement(ArrowUpTrimmedIcon, {
+    size: "medium"
+  })), createElement("button", {
+    tabIndex: -1,
+    className: styles.control,
+    onClick: function onClick() {
+      return changeValueByStep(StepChangeType.Decrement);
+    },
+    onPointerDown: handleControlPointerDown
+  }, createElement(ArrowDownTrimmedIcon, {
+    size: "medium"
+  }))));
 }
 
 function NumberEditor(props) {

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 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        type=\"number\"\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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"}
+{"version":3,"file":"field-editor-number.esm.js","sources":["../src/NumberEditor.styles.ts","../src/parseNumber.ts","../src/utils.ts","../src/NumberEditor.tsx"],"sourcesContent":["import tokens from '@contentful/f36-tokens';\nimport { css } from 'emotion';\n\nexport const styles = {\n  container: css({\n    position: 'relative',\n  }),\n  controlsWrapper: css({\n    position: 'absolute',\n    top: '1px',\n    right: '1px',\n    width: tokens.spacingL,\n    height: 'calc(100% - 2px)',\n    display: 'flex',\n    flexDirection: 'column',\n  }),\n  control: css({\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    minHeight: 0,\n    cursor: 'pointer',\n    padding: 0,\n    margin: 0,\n    outline: 'none',\n    border: `0 solid ${tokens.gray300}`,\n    background: 'none',\n    borderLeftWidth: '1px',\n\n    '&:first-of-type': {\n      borderTopRightRadius: tokens.borderRadiusMedium,\n    },\n\n    '&:last-of-type': {\n      borderTopWidth: '1px',\n      borderBottomRightRadius: tokens.borderRadiusMedium,\n    },\n\n    svg: {\n      fill: tokens.gray600,\n    },\n\n    '&:hover': {\n      backgroundColor: tokens.gray200,\n    },\n\n    '&:active': {\n      backgroundColor: tokens.gray300,\n    },\n  }),\n  input: css({\n    paddingRight: tokens.spacingXl,\n  }),\n};\n","export function parseNumber(value: string, type: string) {\n  if (Number.isNaN(+value)) {\n    return;\n  }\n\n  return type === 'Integer' ? parseInt(value, 10) : parseFloat(value);\n}\n\nconst FLOAT_REGEX = /^[+-]?([0-9]+([.][0-9]*)?|[.][0-9]*)?$/;\nconst INT_REGEX = /^[+-]?([0-9]*)$/;\n\nexport function isNumberInputValueValid(value: string, type: string) {\n  const regex = type === 'Integer' ? INT_REGEX : FLOAT_REGEX;\n\n  return regex.test(value);\n}\n","import { FieldAPI } from '@contentful/field-editor-shared';\n\ntype RangeValidation = { min?: number; max?: number };\n\nexport const 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 const valueToString = (value: number | null | undefined) => {\n  return value === undefined ? '' : String(value);\n};\n\nexport const countDecimals = (number: number) => {\n  return number.toString().split('.')[1]?.length ?? 0;\n};\n","import * as React from 'react';\n\nimport { TextInput } from '@contentful/f36-components';\nimport { ArrowUpTrimmedIcon, ArrowDownTrimmedIcon } from '@contentful/f36-icons';\nimport {\n  FieldAPI,\n  FieldConnector,\n  FieldConnectorChildProps,\n} from '@contentful/field-editor-shared';\n\nimport { styles } from './NumberEditor.styles';\nimport { isNumberInputValueValid, parseNumber } from './parseNumber';\nimport { getRangeFromField, valueToString, countDecimals } from './utils';\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 InnerNumberEditorProps = Pick<\n  FieldConnectorChildProps<number>,\n  'disabled' | 'errors' | 'setValue' | 'value'\n> & {\n  field: NumberEditorProps['field'];\n};\n\nenum StepChangeType {\n  Increment = 'increment',\n  Decrement = 'decrement',\n}\n\nconst NUMBER_STEP = 1;\n\nfunction InnerNumberEditor({\n  disabled,\n  errors,\n  field,\n  setValue,\n  value: sdkValue,\n}: InnerNumberEditorProps) {\n  const [inputValue, setInputValue] = React.useState(valueToString(sdkValue));\n  const range = getRangeFromField(field);\n  const inputRef = React.useRef<HTMLInputElement>(null);\n\n  React.useEffect(() => {\n    const stringSdkValue = valueToString(sdkValue);\n    // Update the input value if the SDK value (numeric) changes\n    if (stringSdkValue !== inputValue) {\n      setInputValue(stringSdkValue);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- we want to trigger it only when sdkValue has changed\n  }, [sdkValue]);\n\n  const updateExternalValue = (value: number | undefined) => {\n    if (sdkValue !== value) {\n      setValue(value);\n    }\n  };\n\n  const changeValueByStep = (type: StepChangeType) => {\n    const currentValue = Number.isNaN(+inputValue) ? 0 : +inputValue;\n    let nextValue =\n      type === StepChangeType.Increment ? currentValue + NUMBER_STEP : currentValue - NUMBER_STEP;\n    // Floating point numbers cannot represent all decimals precisely in binary.\n    // This can lead to unexpected results, such as 0.1 + 0.2 = 0.30000000000000004.\n    // See more details: https://floating-point-gui.de/\n    nextValue = +nextValue.toFixed(countDecimals(currentValue));\n\n    setInputValue(valueToString(nextValue));\n    setValue(nextValue);\n  };\n\n  // Keeps focus on the input\n  const handleControlPointerDown: React.PointerEventHandler<HTMLButtonElement> = (event) => {\n    event.preventDefault();\n    inputRef.current?.focus();\n  };\n\n  const handleKeyDown = (event: React.KeyboardEvent<any>) => {\n    const keyToFnMap: {\n      [key: string]: () => void;\n    } = {\n      ArrowUp: () => changeValueByStep(StepChangeType.Increment),\n      ArrowDown: () => changeValueByStep(StepChangeType.Decrement),\n    };\n\n    const fn = keyToFnMap[event.key];\n    if (fn) {\n      event.preventDefault();\n      fn();\n    }\n  };\n\n  const handleInputChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {\n    const value = e.target.value;\n    if (!value) {\n      setInputValue(value);\n      updateExternalValue(undefined);\n      return;\n    }\n\n    if (!isNumberInputValueValid(value, field.type)) {\n      return;\n    }\n\n    setInputValue(value);\n\n    const parsedNumber = parseNumber(value, field.type);\n    field.setInvalid(parsedNumber === undefined);\n    if (parsedNumber !== undefined) {\n      updateExternalValue(parsedNumber);\n    }\n  };\n\n  return (\n    <div data-test-id=\"number-editor\" className={styles.container}>\n      <TextInput\n        // With type=\"number\" react doesn't call onChange for certain inputs, for example if you type `e`\n        // so we use \"text\" instead and fully rely on our own validation.\n        // See more details: https://github.com/facebook/react/issues/6556\n        type=\"text\"\n        testId=\"number-editor-input\"\n        className={styles.input}\n        min={range.min}\n        max={range.max}\n        isRequired={field.required}\n        isInvalid={errors.length > 0}\n        isDisabled={disabled}\n        value={inputValue}\n        ref={inputRef}\n        onChange={handleInputChange}\n        onKeyDown={handleKeyDown}\n        // The same role that input type=\"number\" has\n        // See more details: https://www.digitala11y.com/spinbutton-role/\n        role=\"spinbutton\"\n        aria-valuenow={sdkValue ?? 0}\n        aria-valuetext={inputValue}\n        aria-valuemin={range.min}\n        aria-valuemax={range.max}\n      />\n      {/**\n       * We hide this controls from screen readers and keyboard focus.\n       * For those purposes we have a keyboard handler. The same way native input number works.\n       */}\n      {!disabled && (\n        <div className={styles.controlsWrapper} aria-hidden=\"true\">\n          <button\n            tabIndex={-1}\n            className={styles.control}\n            onClick={() => changeValueByStep(StepChangeType.Increment)}\n            onPointerDown={handleControlPointerDown}>\n            <ArrowUpTrimmedIcon size=\"medium\" />\n          </button>\n          <button\n            tabIndex={-1}\n            className={styles.control}\n            onClick={() => changeValueByStep(StepChangeType.Decrement)}\n            onPointerDown={handleControlPointerDown}>\n            <ArrowDownTrimmedIcon size=\"medium\" />\n          </button>\n        </div>\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":["styles","container","css","position","controlsWrapper","top","right","width","tokens","spacingL","height","display","flexDirection","control","alignItems","justifyContent","minHeight","cursor","padding","margin","outline","border","gray300","background","borderLeftWidth","borderTopRightRadius","borderRadiusMedium","borderTopWidth","borderBottomRightRadius","svg","fill","gray600","backgroundColor","gray200","input","paddingRight","spacingXl","parseNumber","value","type","Number","isNaN","parseInt","parseFloat","FLOAT_REGEX","INT_REGEX","isNumberInputValueValid","regex","test","getRangeFromField","field","validations","result","find","validation","range","valueToString","undefined","String","countDecimals","number","toString","split","length","StepChangeType","NUMBER_STEP","InnerNumberEditor","disabled","errors","setValue","sdkValue","React","inputValue","setInputValue","inputRef","stringSdkValue","updateExternalValue","changeValueByStep","currentValue","nextValue","Increment","toFixed","handleControlPointerDown","event","preventDefault","current","focus","handleKeyDown","keyToFnMap","ArrowUp","ArrowDown","Decrement","fn","key","handleInputChange","e","target","parsedNumber","setInvalid","className","TextInput","testId","min","max","isRequired","required","isInvalid","isDisabled","ref","onChange","onKeyDown","role","tabIndex","onClick","onPointerDown","ArrowUpTrimmedIcon","size","ArrowDownTrimmedIcon","NumberEditor","props","FieldConnector","isInitiallyDisabled","defaultProps"],"mappings":"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"}

package/dist/parseNumber.d.ts

@@ -1,4 +1,2 @@
-export declare function parseNumber(value: string, type: string): {
-    isValid: boolean;
-    value: number | undefined;
-};
+export declare function parseNumber(value: string, type: string): number | undefined;
+export declare function isNumberInputValueValid(value: string, type: string): boolean;

package/dist/utils.d.ts

@@ -0,0 +1,9 @@
+import { FieldAPI } from '@contentful/field-editor-shared';
+declare type RangeValidation = {
+    min?: number;
+    max?: number;
+};
+export declare const getRangeFromField: (field: FieldAPI) => RangeValidation;
+export declare const valueToString: (value: number | null | undefined) => string;
+export declare const countDecimals: (number: number) => number;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentful/field-editor-number",
-  "version": "1.1.7",
+  "version": "1.2.1",
   "main": "dist/index.js",
   "module": "dist/field-editor-number.esm.js",
   "typings": "dist/index.d.ts",
@@ -23,13 +23,11 @@
   "dependencies": {
     "@contentful/f36-components": "^4.0.27",
     "@contentful/f36-tokens": "^4.0.0",
-    "@contentful/field-editor-shared": "^1.1.3",
-    "emotion": "^10.0.17",
-    "lodash": "^4.17.15",
-    "lodash-es": "^4.17.15"
+    "@contentful/field-editor-shared": "^1.1.4",
+    "emotion": "^10.0.17"
   },
   "devDependencies": {
-    "@contentful/field-editor-test-utils": "^1.2.2",
+    "@contentful/field-editor-test-utils": "^1.2.3",
     "@testing-library/jest-dom": "^5.12.0",
     "@testing-library/react": "^11.2.6",
     "@testing-library/user-event": "^13.1.9"
@@ -47,5 +45,5 @@
       }
     }
   },
-  "gitHead": "a7877c9f84abb504f25a25b758f86724592600b1"
+  "gitHead": "6a478978e6c65ff918a34b07b78652ab8d1e1e55"
 }