Fix issues with SpinButton revealed by eslint-plugin-react-hooks

change/@fluentui-react-examples-2020-10-08-11-29-41-feat-react-internal-spinButton-onChange.json

@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "Updating react-internal SpinButton.Stateful.Example to use onChange.",
+  "packageName": "@fluentui/react-examples",
+  "email": "czearing@outlook.com",
+  "dependentChangeType": "patch",
+  "date": "2020-10-08T18:29:11.274Z"
+}

change/@fluentui-react-internal-2020-10-08-11-29-41-feat-react-internal-spinButton-onChange.json

@@ -0,0 +1,8 @@
+{
+  "type": "minor",
+  "comment": "Updating react-internal SpinButton to handle onChange.",
+  "packageName": "@fluentui/react-internal",
+  "email": "czearing@outlook.com",
+  "dependentChangeType": "patch",
+  "date": "2020-10-08T18:29:41.503Z"
+}

packages/react-examples/src/react/SpinButton/SpinButton.Stateful.Example.tsx

@@ -42,18 +42,26 @@ const onSpinButtonValidate = (value: string) => {
   return String(value) + suffix;
 };
 
-export const SpinButtonStatefulExample: React.FC = () => (
-  <div style={{ width: '400px' }}>
-    <SpinButton
-      label={'SpinButton with custom implementation:'}
-      min={0}
-      max={100}
-      value={'7' + suffix}
-      onValidate={onSpinButtonValidate}
-      onIncrement={onSpinButtonIncrement}
-      onDecrement={onSpinButtonDecrement}
-      incrementButtonAriaLabel={'Increase value by 2'}
-      decrementButtonAriaLabel={'Decrease value by 2'}
-    />
-  </div>
-);
+export const SpinButtonStatefulExample: React.FC = () => {
+  const [spinButtonValue, setSpinButtonValue] = React.useState<string>('7' + suffix);
+
+  return (
+    <div style={{ width: '400px' }}>
+      <SpinButton
+        label={'SpinButton with custom implementation:'}
+        min={0}
+        max={100}
+        value={spinButtonValue}
+        onValidate={onSpinButtonValidate}
+        onIncrement={onSpinButtonIncrement}
+        onDecrement={onSpinButtonDecrement}
+        // eslint-disable-next-line react/jsx-no-bind
+        onChange={(ev: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue: string): void =>
+          setSpinButtonValue(newValue)
+        }
+        incrementButtonAriaLabel={'Increase value by 2'}
+        decrementButtonAriaLabel={'Decrease value by 2'}
+      />
+    </div>
+  );
+};

packages/react-examples/src/react/__snapshots__/SpinButton.Stateful.Example.tsx.shot

@@ -90,6 +90,7 @@ exports[`Component Examples renders SpinButton.Stateful.Example.tsx correctly 1`
           @media screen and (-ms-high-contrast: active){&:hover:after {
             border-color: Highlight;
           }
+      onChange={[Function]}
     >
       <input
         aria-disabled={false}

packages/react-internal/etc/react-internal.api.md

@@ -5075,7 +5075,7 @@ export interface ISpinButton {
 }
 
 // @public (undocumented)
-export interface ISpinButtonProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface ISpinButtonProps extends React.HTMLAttributes<HTMLInputElement | HTMLTextAreaElement>, React.RefAttributes<HTMLDivElement> {
     ariaDescribedBy?: string;
     ariaLabel?: string;
     ariaPositionInSet?: number;
@@ -5101,6 +5101,7 @@ export interface ISpinButtonProps extends React.HTMLAttributes<HTMLDivElement> {
     max?: number;
     min?: number;
     onBlur?: React.FocusEventHandler<HTMLInputElement>;
+    onChange?: (ev?: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: string) => void;
     onDecrement?: (value: string, event?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => string | void;
     onFocus?: React.FocusEventHandler<HTMLInputElement>;
     onIncrement?: (value: string, event?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => string | void;