define(["require", "exports", "react", "@fluentui/react/lib/SpinButton"], function (require, exports, React, SpinButton_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.SpinButtonControlledExample = void 0;
    // By default the field grows to fit available width. Constrain the width instead.
    var styles = { spinButtonWrapper: { width: 75 } };
    var SpinButtonControlledExample = function () {
        var _a = React.useState('5'), value = _a[0], setValue = _a[1];
        var onChange = React.useCallback(function (event, newValue) {
            if (newValue !== undefined) {
                // In reality this might have some additional validation or other special handling
                setValue(newValue);
            }
        }, []);
        // This SpinButton is controlled because it sets `value` instead of `defaultValue`.
        // This means that it will call `onChange` when the user makes updates, but those updates will
        // only be respected if `onChange` causes an update to the `value` prop.
        return (React.createElement(SpinButton_1.SpinButton, { label: "Controlled SpinButton", value: value, min: 0, max: 100, step: 1, onChange: onChange, incrementButtonAriaLabel: "Increase value by 1", decrementButtonAriaLabel: "Decrease value by 1", styles: styles }));
    };
    exports.SpinButtonControlledExample = SpinButtonControlledExample;
});
//# sourceMappingURL=SpinButton.Controlled.Example.js.map