import * as React from 'react';
import { SpinButton } from '@fluentui/react/lib/SpinButton';
// By default the field grows to fit available width. Constrain the width instead.
var styles = { spinButtonWrapper: { width: 75 } };
export 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, { 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 }));
};
//# sourceMappingURL=SpinButton.Controlled.Example.js.map