@contentful/field-editor-number 1.2.6 → 1.3.0

package/dist/cjs/NumberEditor.js

@@ -0,0 +1,174 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "NumberEditor", {
+    enumerable: true,
+    get: function() {
+        return NumberEditor;
+    }
+});
+const _react = _interop_require_wildcard(require("react"));
+const _f36components = require("@contentful/f36-components");
+const _f36icons = require("@contentful/f36-icons");
+const _fieldeditorshared = require("@contentful/field-editor-shared");
+const _NumberEditorstyles = require("./NumberEditor.styles");
+const _parseNumber = require("./parseNumber");
+const _utils = require("./utils");
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+var StepChangeType;
+(function(StepChangeType) {
+    StepChangeType["Increment"] = 'increment';
+    StepChangeType["Decrement"] = 'decrement';
+})(StepChangeType || (StepChangeType = {}));
+const NUMBER_STEP = 1;
+function InnerNumberEditor({ disabled , errors , field , setValue , value: sdkValue  }) {
+    const [inputValue, setInputValue] = _react.useState((0, _utils.valueToString)(sdkValue));
+    const range = (0, _utils.getRangeFromField)(field);
+    const inputRef = _react.useRef(null);
+    _react.useEffect(()=>{
+        const stringSdkValue = (0, _utils.valueToString)(sdkValue);
+        if (stringSdkValue !== inputValue) {
+            setInputValue(stringSdkValue);
+        }
+    }, [
+        sdkValue
+    ]);
+    const updateExternalValue = (value)=>{
+        if (sdkValue !== value) {
+            setValue(value);
+        }
+    };
+    const changeValueByStep = (type)=>{
+        const currentValue = Number.isNaN(+inputValue) ? 0 : +inputValue;
+        let nextValue = type === StepChangeType.Increment ? currentValue + NUMBER_STEP : currentValue - NUMBER_STEP;
+        nextValue = +nextValue.toFixed((0, _utils.countDecimals)(currentValue));
+        setInputValue((0, _utils.valueToString)(nextValue));
+        setValue(nextValue);
+    };
+    const handleControlPointerDown = (event)=>{
+        event.preventDefault();
+        inputRef.current?.focus();
+    };
+    const handleKeyDown = (event)=>{
+        const keyToFnMap = {
+            ArrowUp: ()=>changeValueByStep(StepChangeType.Increment),
+            ArrowDown: ()=>changeValueByStep(StepChangeType.Decrement)
+        };
+        const fn = keyToFnMap[event.key];
+        if (fn) {
+            event.preventDefault();
+            fn();
+        }
+    };
+    const handleInputChange = (e)=>{
+        const value = e.target.value;
+        if (!value) {
+            setInputValue(value);
+            updateExternalValue(undefined);
+            return;
+        }
+        if (!(0, _parseNumber.isNumberInputValueValid)(value, field.type)) {
+            return;
+        }
+        setInputValue(value);
+        const parsedNumber = (0, _parseNumber.parseNumber)(value, field.type);
+        field.setInvalid(parsedNumber === undefined);
+        if (parsedNumber !== undefined) {
+            updateExternalValue(parsedNumber);
+        }
+    };
+    return _react.createElement("div", {
+        "data-test-id": "number-editor",
+        className: _NumberEditorstyles.styles.container
+    }, _react.createElement(_f36components.TextInput, {
+        type: "text",
+        testId: "number-editor-input",
+        className: _NumberEditorstyles.styles.input,
+        min: range.min,
+        max: range.max,
+        isRequired: field.required,
+        isInvalid: errors.length > 0,
+        isDisabled: disabled,
+        value: inputValue,
+        ref: inputRef,
+        onChange: handleInputChange,
+        onKeyDown: handleKeyDown,
+        role: "spinbutton",
+        "aria-valuenow": sdkValue ?? 0,
+        "aria-valuetext": inputValue,
+        "aria-valuemin": range.min,
+        "aria-valuemax": range.max
+    }), !disabled && _react.createElement("div", {
+        className: _NumberEditorstyles.styles.controlsWrapper,
+        "aria-hidden": "true"
+    }, _react.createElement("button", {
+        tabIndex: -1,
+        className: _NumberEditorstyles.styles.control,
+        onClick: ()=>changeValueByStep(StepChangeType.Increment),
+        onPointerDown: handleControlPointerDown
+    }, _react.createElement(_f36icons.ArrowUpTrimmedIcon, {
+        size: "medium"
+    })), _react.createElement("button", {
+        tabIndex: -1,
+        className: _NumberEditorstyles.styles.control,
+        onClick: ()=>changeValueByStep(StepChangeType.Decrement),
+        onPointerDown: handleControlPointerDown
+    }, _react.createElement(_f36icons.ArrowDownTrimmedIcon, {
+        size: "medium"
+    }))));
+}
+function NumberEditor(props) {
+    const { field  } = props;
+    return _react.createElement(_fieldeditorshared.FieldConnector, {
+        field: field,
+        isInitiallyDisabled: props.isInitiallyDisabled
+    }, ({ value , errors , disabled , setValue  })=>_react.createElement(InnerNumberEditor, {
+            disabled: disabled,
+            errors: errors,
+            field: field,
+            setValue: setValue,
+            value: value
+        }));
+}
+NumberEditor.defaultProps = {
+    isInitiallyDisabled: true
+};

package/dist/cjs/NumberEditor.spec.js

@@ -0,0 +1,162 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _react = _interop_require_wildcard(require("react"));
+const _fieldeditortestutils = require("@contentful/field-editor-test-utils");
+require("@testing-library/jest-dom/extend-expect");
+const _react1 = require("@testing-library/react");
+const _userevent = _interop_require_default(require("@testing-library/user-event"));
+const _NumberEditor = require("./NumberEditor");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+(0, _react1.configure)({
+    testIdAttribute: 'data-test-id'
+});
+function createField({ initialValue , type ='Integer'  }) {
+    const [field] = (0, _fieldeditortestutils.createFakeFieldAPI)((field)=>{
+        jest.spyOn(field, 'setValue');
+        jest.spyOn(field, 'removeValue');
+        jest.spyOn(field, 'setInvalid');
+        return {
+            ...field,
+            type
+        };
+    }, initialValue);
+    return field;
+}
+describe('NumberEditor', ()=>{
+    afterEach(_react1.cleanup);
+    it('sets initial value', ()=>{
+        const field = createField({
+            initialValue: 42
+        });
+        (0, _react1.render)(_react.createElement(_NumberEditor.NumberEditor, {
+            field: field,
+            isInitiallyDisabled: false
+        }));
+        const $input = _react1.screen.getByTestId('number-editor-input');
+        expect($input).toHaveValue('42');
+    });
+    it('calls setValue when user inputs valid numbers', async ()=>{
+        const field = createField({});
+        (0, _react1.render)(_react.createElement(_NumberEditor.NumberEditor, {
+            field: field,
+            isInitiallyDisabled: false
+        }));
+        const $input = _react1.screen.getByTestId('number-editor-input');
+        _userevent.default.type($input, '22');
+        await (0, _react1.waitFor)(()=>{
+            expect(field.setValue).toHaveBeenCalledWith(22);
+        });
+    });
+    it('calls setValue when user inputs "0"', async ()=>{
+        const field = createField({});
+        (0, _react1.render)(_react.createElement(_NumberEditor.NumberEditor, {
+            field: field,
+            isInitiallyDisabled: false
+        }));
+        const $input = _react1.screen.getByTestId('number-editor-input');
+        _userevent.default.type($input, '0');
+        await (0, _react1.waitFor)(()=>{
+            expect(field.setValue).toHaveBeenCalledWith(0);
+        });
+    });
+    it('when Decimal type it calls setValue for every valid state', async ()=>{
+        const field = createField({
+            type: 'Decimal'
+        });
+        (0, _react1.render)(_react.createElement(_NumberEditor.NumberEditor, {
+            field: field,
+            isInitiallyDisabled: false
+        }));
+        const $input = _react1.screen.getByTestId('number-editor-input');
+        _userevent.default.type($input, '4');
+        await (0, _react1.waitFor)(()=>{
+            expect(field.setValue).toHaveBeenCalledWith(4);
+        });
+        _userevent.default.type($input, '4');
+        await (0, _react1.waitFor)(()=>{
+            expect(field.setValue).toHaveBeenCalledWith(44);
+        });
+        _userevent.default.type($input, '.');
+        await (0, _react1.waitFor)(()=>{
+            expect(field.setValue).toHaveBeenLastCalledWith(44);
+        });
+        _userevent.default.type($input, '2');
+        await (0, _react1.waitFor)(()=>{
+            expect(field.setValue).toHaveBeenCalledWith(44.2);
+        });
+        expect(field.setValue).toHaveBeenCalledTimes(3);
+    });
+    it('does not call setValue when inputting invalid numbers', ()=>{
+        const field = createField({});
+        (0, _react1.render)(_react.createElement(_NumberEditor.NumberEditor, {
+            field: field,
+            isInitiallyDisabled: false
+        }));
+        const $input = _react1.screen.getByTestId('number-editor-input');
+        _userevent.default.type($input, 'invalid');
+        expect(field.setValue).not.toHaveBeenCalled();
+    });
+    it('calls removeValue when clearing the input', async ()=>{
+        const field = createField({
+            initialValue: 42
+        });
+        (0, _react1.render)(_react.createElement(_NumberEditor.NumberEditor, {
+            field: field,
+            isInitiallyDisabled: false
+        }));
+        const $input = _react1.screen.getByTestId('number-editor-input');
+        expect($input).toHaveValue('42');
+        _userevent.default.clear($input);
+        await (0, _react1.waitFor)(()=>{
+            expect($input).toHaveValue('');
+            expect(field.setValue).not.toHaveBeenCalled();
+            expect(field.removeValue).toHaveBeenCalledTimes(1);
+            expect(field.removeValue).toHaveBeenLastCalledWith();
+        });
+    });
+});

package/dist/cjs/NumberEditor.styles.js

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "styles", {
+    enumerable: true,
+    get: function() {
+        return styles;
+    }
+});
+const _f36tokens = _interop_require_default(require("@contentful/f36-tokens"));
+const _emotion = require("emotion");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const styles = {
+    container: (0, _emotion.css)({
+        position: 'relative'
+    }),
+    controlsWrapper: (0, _emotion.css)({
+        position: 'absolute',
+        top: '1px',
+        right: '1px',
+        width: _f36tokens.default.spacingL,
+        height: 'calc(100% - 2px)',
+        display: 'flex',
+        flexDirection: 'column'
+    }),
+    control: (0, _emotion.css)({
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        minHeight: 0,
+        cursor: 'pointer',
+        padding: 0,
+        margin: 0,
+        outline: 'none',
+        border: `0 solid ${_f36tokens.default.gray300}`,
+        background: 'none',
+        borderLeftWidth: '1px',
+        '&:first-of-type': {
+            borderTopRightRadius: _f36tokens.default.borderRadiusMedium
+        },
+        '&:last-of-type': {
+            borderTopWidth: '1px',
+            borderBottomRightRadius: _f36tokens.default.borderRadiusMedium
+        },
+        svg: {
+            fill: _f36tokens.default.gray600
+        },
+        '&:hover': {
+            backgroundColor: _f36tokens.default.gray200
+        },
+        '&:active': {
+            backgroundColor: _f36tokens.default.gray300
+        }
+    }),
+    input: (0, _emotion.css)({
+        paddingRight: _f36tokens.default.spacingXl
+    })
+};

package/dist/cjs/index.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "NumberEditor", {
+    enumerable: true,
+    get: function() {
+        return _NumberEditor.NumberEditor;
+    }
+});
+const _NumberEditor = require("./NumberEditor");

package/dist/cjs/parseNumber.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    parseNumber: function() {
+        return parseNumber;
+    },
+    isNumberInputValueValid: function() {
+        return isNumberInputValueValid;
+    }
+});
+function parseNumber(value, type) {
+    if (Number.isNaN(+value)) {
+        return;
+    }
+    return type === 'Integer' ? parseInt(value, 10) : parseFloat(value);
+}
+const FLOAT_REGEX = /^[+-]?([0-9]+([.][0-9]*)?|[.][0-9]*)?$/;
+const INT_REGEX = /^[+-]?([0-9]*)$/;
+function isNumberInputValueValid(value, type) {
+    const regex = type === 'Integer' ? INT_REGEX : FLOAT_REGEX;
+    return regex.test(value);
+}

package/dist/cjs/parseNumber.spec.js

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _parseNumber = require("./parseNumber");
+describe('parseNumber', ()=>{
+    it('should parse values properly when type is Integer', ()=>{
+        expect((0, _parseNumber.parseNumber)('1', 'Integer')).toBe(1);
+        expect((0, _parseNumber.parseNumber)('0', 'Integer')).toBe(0);
+        expect((0, _parseNumber.parseNumber)('-99', 'Interger')).toEqual(-99);
+        expect((0, _parseNumber.parseNumber)('2.89', 'Integer')).toBe(2);
+        expect((0, _parseNumber.parseNumber)('foo', 'Integer')).toBeUndefined();
+    });
+    it('should parse values properly when type is Decimal', ()=>{
+        expect((0, _parseNumber.parseNumber)('1', 'Decimal')).toBe(1);
+        expect((0, _parseNumber.parseNumber)('0', 'Integer')).toBe(0);
+        expect((0, _parseNumber.parseNumber)('-99', 'Decimal')).toEqual(-99);
+        expect((0, _parseNumber.parseNumber)('2.89', 'Decimal')).toBe(2.89);
+        expect((0, _parseNumber.parseNumber)('-12.89', 'Decimal')).toEqual(-12.89);
+        expect((0, _parseNumber.parseNumber)('foo', 'Decimal')).toBeUndefined();
+    });
+});
+describe('isNumberInputValueValid', ()=>{
+    it('should correctly validate input when type is Integer', ()=>{
+        expect((0, _parseNumber.isNumberInputValueValid)('3', 'Integer')).toBe(true);
+        expect((0, _parseNumber.isNumberInputValueValid)('33', 'Integer')).toBe(true);
+        expect((0, _parseNumber.isNumberInputValueValid)('+', 'Integer')).toBe(true);
+        expect((0, _parseNumber.isNumberInputValueValid)('-', 'Integer')).toBe(true);
+        expect((0, _parseNumber.isNumberInputValueValid)('-3', 'Integer')).toBe(true);
+        expect((0, _parseNumber.isNumberInputValueValid)('--', 'Integer')).toBe(false);
+        expect((0, _parseNumber.isNumberInputValueValid)('++', 'Integer')).toBe(false);
+        expect((0, _parseNumber.isNumberInputValueValid)('.3', 'Integer')).toBe(false);
+        expect((0, _parseNumber.isNumberInputValueValid)('0.3', 'Integer')).toBe(false);
+        expect((0, _parseNumber.isNumberInputValueValid)('3.3', 'Integer')).toBe(false);
+        expect((0, _parseNumber.isNumberInputValueValid)('foo', 'Integer')).toBe(false);
+    });
+    it('should correctly validate input when type is Decimal', ()=>{
+        expect((0, _parseNumber.isNumberInputValueValid)('3', 'Decimal')).toBe(true);
+        expect((0, _parseNumber.isNumberInputValueValid)('33', 'Decimal')).toBe(true);
+        expect((0, _parseNumber.isNumberInputValueValid)('+', 'Decimal')).toBe(true);
+        expect((0, _parseNumber.isNumberInputValueValid)('-', 'Decimal')).toBe(true);
+        expect((0, _parseNumber.isNumberInputValueValid)('-3', 'Decimal')).toBe(true);
+        expect((0, _parseNumber.isNumberInputValueValid)('3.3', 'Decimal')).toBe(true);
+        expect((0, _parseNumber.isNumberInputValueValid)('-3.3', 'Decimal')).toBe(true);
+        expect((0, _parseNumber.isNumberInputValueValid)('0', 'Decimal')).toBe(true);
+        expect((0, _parseNumber.isNumberInputValueValid)('.', 'Decimal')).toBe(true);
+        expect((0, _parseNumber.isNumberInputValueValid)('.3', 'Decimal')).toBe(true);
+        expect((0, _parseNumber.isNumberInputValueValid)('0.3', 'Decimal')).toBe(true);
+        expect((0, _parseNumber.isNumberInputValueValid)('--', 'Integer')).toBe(false);
+        expect((0, _parseNumber.isNumberInputValueValid)('++', 'Integer')).toBe(false);
+        expect((0, _parseNumber.isNumberInputValueValid)('foo', 'Integer')).toBe(false);
+        expect((0, _parseNumber.isNumberInputValueValid)('0.3.', 'Integer')).toBe(false);
+        expect((0, _parseNumber.isNumberInputValueValid)('0.3.3', 'Integer')).toBe(false);
+        expect((0, _parseNumber.isNumberInputValueValid)('..', 'Integer')).toBe(false);
+    });
+});

package/dist/cjs/utils.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    getRangeFromField: function() {
+        return getRangeFromField;
+    },
+    valueToString: function() {
+        return valueToString;
+    },
+    countDecimals: function() {
+        return countDecimals;
+    }
+});
+const getRangeFromField = (field)=>{
+    const validations = field.validations || [];
+    const result = validations.find((validation)=>validation.range);
+    return result ? result.range : {};
+};
+const valueToString = (value)=>{
+    return value === undefined ? '' : String(value);
+};
+const countDecimals = (number)=>{
+    return number.toString().split('.')[1]?.length ?? 0;
+};

package/dist/esm/NumberEditor.js

@@ -0,0 +1,125 @@
+import * as React from 'react';
+import { TextInput } from '@contentful/f36-components';
+import { ArrowUpTrimmedIcon, ArrowDownTrimmedIcon } from '@contentful/f36-icons';
+import { FieldConnector } from '@contentful/field-editor-shared';
+import { styles } from './NumberEditor.styles';
+import { isNumberInputValueValid, parseNumber } from './parseNumber';
+import { getRangeFromField, valueToString, countDecimals } from './utils';
+var StepChangeType;
+(function(StepChangeType) {
+    StepChangeType["Increment"] = 'increment';
+    StepChangeType["Decrement"] = 'decrement';
+})(StepChangeType || (StepChangeType = {}));
+const NUMBER_STEP = 1;
+function InnerNumberEditor({ disabled , errors , field , setValue , value: sdkValue  }) {
+    const [inputValue, setInputValue] = React.useState(valueToString(sdkValue));
+    const range = getRangeFromField(field);
+    const inputRef = React.useRef(null);
+    React.useEffect(()=>{
+        const stringSdkValue = valueToString(sdkValue);
+        if (stringSdkValue !== inputValue) {
+            setInputValue(stringSdkValue);
+        }
+    }, [
+        sdkValue
+    ]);
+    const updateExternalValue = (value)=>{
+        if (sdkValue !== value) {
+            setValue(value);
+        }
+    };
+    const changeValueByStep = (type)=>{
+        const currentValue = Number.isNaN(+inputValue) ? 0 : +inputValue;
+        let nextValue = type === StepChangeType.Increment ? currentValue + NUMBER_STEP : currentValue - NUMBER_STEP;
+        nextValue = +nextValue.toFixed(countDecimals(currentValue));
+        setInputValue(valueToString(nextValue));
+        setValue(nextValue);
+    };
+    const handleControlPointerDown = (event)=>{
+        event.preventDefault();
+        inputRef.current?.focus();
+    };
+    const handleKeyDown = (event)=>{
+        const keyToFnMap = {
+            ArrowUp: ()=>changeValueByStep(StepChangeType.Increment),
+            ArrowDown: ()=>changeValueByStep(StepChangeType.Decrement)
+        };
+        const fn = keyToFnMap[event.key];
+        if (fn) {
+            event.preventDefault();
+            fn();
+        }
+    };
+    const handleInputChange = (e)=>{
+        const value = e.target.value;
+        if (!value) {
+            setInputValue(value);
+            updateExternalValue(undefined);
+            return;
+        }
+        if (!isNumberInputValueValid(value, field.type)) {
+            return;
+        }
+        setInputValue(value);
+        const parsedNumber = parseNumber(value, field.type);
+        field.setInvalid(parsedNumber === undefined);
+        if (parsedNumber !== undefined) {
+            updateExternalValue(parsedNumber);
+        }
+    };
+    return React.createElement("div", {
+        "data-test-id": "number-editor",
+        className: styles.container
+    }, React.createElement(TextInput, {
+        type: "text",
+        testId: "number-editor-input",
+        className: styles.input,
+        min: range.min,
+        max: range.max,
+        isRequired: field.required,
+        isInvalid: errors.length > 0,
+        isDisabled: disabled,
+        value: inputValue,
+        ref: inputRef,
+        onChange: handleInputChange,
+        onKeyDown: handleKeyDown,
+        role: "spinbutton",
+        "aria-valuenow": 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: ()=>changeValueByStep(StepChangeType.Increment),
+        onPointerDown: handleControlPointerDown
+    }, React.createElement(ArrowUpTrimmedIcon, {
+        size: "medium"
+    })), React.createElement("button", {
+        tabIndex: -1,
+        className: styles.control,
+        onClick: ()=>changeValueByStep(StepChangeType.Decrement),
+        onPointerDown: handleControlPointerDown
+    }, React.createElement(ArrowDownTrimmedIcon, {
+        size: "medium"
+    }))));
+}
+export function NumberEditor(props) {
+    const { field  } = props;
+    return React.createElement(FieldConnector, {
+        field: field,
+        isInitiallyDisabled: props.isInitiallyDisabled
+    }, ({ value , errors , disabled , setValue  })=>React.createElement(InnerNumberEditor, {
+            disabled: disabled,
+            errors: errors,
+            field: field,
+            setValue: setValue,
+            value: value
+        }));
+}
+NumberEditor.defaultProps = {
+    isInitiallyDisabled: true
+};