Update fluent-ui components to be backwards compatible with v7

Author: saip92

packages/fluent-ui/package.json

@@ -29,7 +29,7 @@
     "node": ">=14"
   },
   "peerDependencies": {
-    "@fluentui/react": "^8.1.0",
+    "@fluentui/react": ">= 7",
     "@rjsf/core": "5.6.x",
     "@rjsf/utils": "5.6.x",
     "react": "^16.14.0 || >=17"

packages/fluent-ui/src/CheckboxWidget/CheckboxWidget.tsx

@@ -28,6 +28,8 @@ export const allowedProps: (keyof ICheckboxProps)[] = [
   'disabled',
   'indeterminate',
   'inputProps',
+  /* Backward compatibility with fluentui v7 */
+  'keytipProps' as any,
   'label',
   'onChange',
   'onRenderLabel',
@@ -101,6 +103,12 @@ export default function CheckboxWidget<
         onChange={_onChange}
         {...uiProps}
         aria-describedby={ariaDescribedByIds<T>(id)}
+        /* Backward compatibility with fluentui v7 */
+        {...{
+          autoFocus: autofocus,
+          onBlur: _onBlur,
+          onFocus: _onFocus,
+        }}
       />
     </>
   );

packages/fluent-ui/src/CheckboxesWidget/CheckboxesWidget.tsx

@@ -79,6 +79,12 @@ export default function CheckboxesWidget<
               key={index}
               {...uiProps}
               aria-describedby={ariaDescribedByIds<T>(id)}
+              /* Backward compatibility with fluentui v7 */
+              {...{
+                autoFocus: autofocus && index === 0,
+                onBlur: _onBlur,
+                onFocus: _onFocus,
+              }}
             />
           );
         })}

packages/fluent-ui/src/RadioWidget/RadioWidget.tsx

@@ -20,6 +20,8 @@ const allowedProps: (keyof IChoiceGroupProps)[] = [
   'selectedKey',
   'onChange',
   'label',
+  /* Backward compatibility with fluentui v7 */
+  'onChanged' as any,
   'theme',
   'styles',
   'ariaLabelledBy',

packages/fluent-ui/src/UpDownWidget/UpDownWidget.tsx

@@ -1,4 +1,4 @@
-import { FocusEvent, SyntheticEvent } from 'react';
+import { ChangeEvent, FocusEvent, SyntheticEvent } from 'react';
 import { ISpinButtonProps, SpinButton } from '@fluentui/react';
 import {
   ariaDescribedByIds,
@@ -29,6 +29,8 @@ const allowedProps: (keyof ISpinButtonProps)[] = [
   'defaultValue',
   'disabled',
   'downArrowButtonStyles',
+  /* Backward compatibility with fluentui v7 */
+  'getClassNames' as any,
   'iconButtonProps',
   'iconProps',
   'incrementButtonAriaLabel',
@@ -73,7 +75,14 @@ export default function UpDownWidget<
   registry,
 }: WidgetProps<T, S, F>) {
   const { translateString } = registry;
-  const _onChange = (_: SyntheticEvent<HTMLElement>, newValue?: string) => onChange(Number(newValue));
+  const _onChange = (ev: ChangeEvent<HTMLInputElement> | SyntheticEvent<HTMLElement>, newValue?: string) => {
+    if (newValue) {
+      onChange(Number(newValue));
+    } else if ('value' in ev.target) {
+      /* Backward compatibility with fluentui v7 */
+      onChange(Number(ev.target.value));
+    }
+  };
 
   let { min, max, step } = rangeSpec<S>(schema);
   if (min === undefined) {