Upgrade @fluentui/react to 8.x version

Author: saip92

CHANGELOG.md

@@ -22,6 +22,10 @@ should change the heading of the (upcoming) version to include a major version b
 
 - Converted the `playground` to use Typescript, including some refactoring of code to make that job easier
 
+## @rjsf/fluent-ui
+
+- Upgraded to `8.x` version of `@fluentui/react`
+
 # 5.4.0
 
 ## @rjsf/antd

packages/fluent-ui/package-lock.json

@@ -28,7 +28,7 @@
     "node": ">=14"
   },
   "peerDependencies": {
-    "@fluentui/react": "^7.190.3",
+    "@fluentui/react": "^8.106.9",
     "@rjsf/core": "^5.0.0",
     "@rjsf/utils": "^5.0.0",
     "react": "^16.14.0 || >=17"
@@ -39,7 +39,7 @@
     "@babel/plugin-transform-modules-commonjs": "^7.21.2",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
-    "@fluentui/react": "^7.190.3",
+    "@fluentui/react": "^8.106.9",
     "@rjsf/core": "^5.4.0",
     "@rjsf/utils": "^5.4.0",
     "@rjsf/validator-ajv8": "^5.4.0",

packages/fluent-ui/package.json

@@ -1,5 +1,5 @@
-import { FocusEvent, useCallback } from 'react';
-import { Checkbox } from '@fluentui/react';
+import { useCallback } from 'react';
+import { Checkbox, ICheckboxProps } from '@fluentui/react';
 import {
   ariaDescribedByIds,
   descriptionId,
@@ -13,7 +13,7 @@ import {
 import _pick from 'lodash/pick';
 
 // Keys of ICheckboxProps from @fluentui/react
-export const allowedProps = [
+export const allowedProps: (keyof ICheckboxProps)[] = [
   'ariaDescribedBy',
   'ariaLabel',
   'ariaPositionInSet',
@@ -28,7 +28,6 @@ export const allowedProps = [
   'disabled',
   'indeterminate',
   'inputProps',
-  'keytipProps',
   'label',
   'onChange',
   'onRenderLabel',
@@ -50,10 +49,7 @@ export default function CheckboxWidget<
     label,
     hideLabel,
     schema,
-    autofocus,
     onChange,
-    onBlur,
-    onFocus,
     options,
     registry,
     uiSchema,
@@ -71,9 +67,6 @@ export default function CheckboxWidget<
     [onChange]
   );
 
-  const _onBlur = ({ target: { value } }: FocusEvent<HTMLButtonElement>) => onBlur(id, value);
-  const _onFocus = ({ target: { value } }: FocusEvent<HTMLButtonElement>) => onFocus(id, value);
-
   const uiProps = _pick((options.props as object) || {}, allowedProps);
   const description = options.description ?? schema.description;
 
@@ -93,9 +86,6 @@ export default function CheckboxWidget<
         name={id}
         label={labelValue(label || undefined, hideLabel)}
         disabled={disabled || readonly}
-        autoFocus={autofocus}
-        onBlur={_onBlur}
-        onFocus={_onFocus}
         checked={typeof value === 'undefined' ? false : value}
         onChange={_onChange}
         {...uiProps}

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

@@ -1,11 +1,10 @@
-import { FormEvent, FocusEvent } from 'react';
+import { FormEvent } from 'react';
 import { Checkbox } from '@fluentui/react';
 import {
   ariaDescribedByIds,
   enumOptionsDeselectValue,
   enumOptionsIsSelected,
   enumOptionsSelectValue,
-  enumOptionsValueForIndex,
   labelValue,
   optionId,
   FormContextType,
@@ -29,15 +28,12 @@ export default function CheckboxesWidget<
   disabled,
   options,
   value,
-  autofocus,
   readonly,
   required,
   onChange,
-  onBlur,
-  onFocus,
   rawErrors = [],
 }: WidgetProps<T, S, F>) {
-  const { enumOptions, enumDisabled, emptyValue } = options;
+  const { enumOptions, enumDisabled } = options;
   const checkboxesValues = Array.isArray(value) ? value : [value];
 
   const _onChange = (index: number) => (_ev?: FormEvent<HTMLElement>, checked?: boolean) => {
@@ -48,12 +44,6 @@ export default function CheckboxesWidget<
     }
   };
 
-  const _onBlur = ({ target: { value } }: FocusEvent<HTMLButtonElement>) =>
-    onBlur(id, enumOptionsValueForIndex<S>(value, enumOptions, emptyValue));
-
-  const _onFocus = ({ target: { value } }: FocusEvent<HTMLButtonElement>) =>
-    onFocus(id, enumOptionsValueForIndex<S>(value, enumOptions, emptyValue));
-
   const uiProps = _pick((options.props as object) || {}, allowedProps);
 
   return (
@@ -70,10 +60,7 @@ export default function CheckboxesWidget<
               checked={checked}
               label={option.label}
               disabled={disabled || itemDisabled || readonly}
-              autoFocus={autofocus && index === 0}
               onChange={_onChange(index)}
-              onBlur={_onBlur}
-              onFocus={_onFocus}
               key={index}
               {...uiProps}
               aria-describedby={ariaDescribedByIds<T>(id)}

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

@@ -20,7 +20,6 @@ const allowedProps: (keyof IChoiceGroupProps)[] = [
   'selectedKey',
   'onChange',
   'label',
-  'onChanged',
   'theme',
   'styles',
   'ariaLabelledBy',

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

@@ -1,5 +1,5 @@
-import { ChangeEvent, FocusEvent } from 'react';
-import { SpinButton } from '@fluentui/react';
+import { FocusEvent, SyntheticEvent } from 'react';
+import { ISpinButtonProps, SpinButton } from '@fluentui/react';
 import {
   ariaDescribedByIds,
   FormContextType,
@@ -15,7 +15,7 @@ import _pick from 'lodash/pick';
 import FluentLabel from '../FluentLabel/FluentLabel';
 
 // Keys of ISpinButtonProps from @fluentui/react
-const allowedProps = [
+const allowedProps: (keyof ISpinButtonProps)[] = [
   'ariaDescribedBy',
   'ariaLabel',
   'ariaPositionInSet',
@@ -29,7 +29,6 @@ const allowedProps = [
   'defaultValue',
   'disabled',
   'downArrowButtonStyles',
-  'getClassNames',
   'iconButtonProps',
   'iconProps',
   'incrementButtonAriaLabel',
@@ -74,7 +73,7 @@ export default function UpDownWidget<
   registry,
 }: WidgetProps<T, S, F>) {
   const { translateString } = registry;
-  const _onChange = ({ target: { value } }: ChangeEvent<HTMLInputElement>) => onChange(Number(value));
+  const _onChange = (_: SyntheticEvent<HTMLElement>, newValue?: string) => onChange(Number(newValue));
 
   let { min, max, step } = rangeSpec<S>(schema);
   if (min === undefined) {