Upgrade @fluentui/react to 8.x version (#3546)

* Upgrade @fluentui/react to 8.x version * Revert native props for checkboxes * Update peer dependency version of @fluentui/react to first production version * Update fluent-ui components to be backwards compatible with v7 * Update CHANGELOG.md Co-authored-by: Heath C <[email protected]> * Update @fluentui/react package in the playground --------- Co-authored-by: Heath C <[email protected]>
rjsf-team · May 10, 2023 · c527317 · c527317
1 parent 1c045cc
commit c527317
Show file tree

Hide file tree

Showing 12 changed files with 2,508 additions and 2,158 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -32,6 +32,7 @@ should change the heading of the (upcoming) version to include a major version b
 ## @rjsf/fluent-ui
 
 - Added support for `additionalProperties` to fluent-ui theme, fixing [#2777](https://github.com/rjsf-team/react-jsonschema-form/issues/2777).
+- Upgraded to `8.x` version of `@fluentui/react`, fixing [#3463](https://github.com/rjsf-team/react-jsonschema-form/issues/3463)
 
 ## @rjsf/utils
 

diff --git a/packages/fluent-ui/package-lock.json b/packages/fluent-ui/package-lock.json
diff --git a/packages/fluent-ui/package.json b/packages/fluent-ui/package.json
@@ -29,7 +29,7 @@
     "node": ">=14"
   },
   "peerDependencies": {
-    "@fluentui/react": "^7.190.3",
+    "@fluentui/react": ">= 7",
     "@rjsf/core": "5.6.x",
     "@rjsf/utils": "5.6.x",
     "react": "^16.14.0 || >=17"
@@ -40,7 +40,7 @@
     "@babel/plugin-transform-modules-commonjs": "^7.21.2",
     "@babel/preset-env": "^7.21.4",
     "@babel/preset-react": "^7.18.6",
-    "@fluentui/react": "^7.204.0",
+    "@fluentui/react": "^8.1.0",
     "@rjsf/core": "^5.6.2",
     "@rjsf/utils": "^5.6.2",
     "@rjsf/validator-ajv8": "^5.6.2",

diff --git a/packages/fluent-ui/src/CheckboxWidget/CheckboxWidget.tsx b/packages/fluent-ui/src/CheckboxWidget/CheckboxWidget.tsx
@@ -1,5 +1,5 @@
 import { FocusEvent, useCallback } from 'react';
-import { Checkbox } from '@fluentui/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,8 @@ export const allowedProps = [
   'disabled',
   'indeterminate',
   'inputProps',
-  'keytipProps',
+  /* Backward compatibility with fluentui v7 */
+  'keytipProps' as any,
   'label',
   'onChange',
   'onRenderLabel',
@@ -93,13 +94,21 @@ export default function CheckboxWidget<
         name={id}
         label={labelValue(label || undefined, hideLabel)}
         disabled={disabled || readonly}
-        autoFocus={autofocus}
-        onBlur={_onBlur}
-        onFocus={_onFocus}
+        inputProps={{
+          autoFocus: autofocus,
+          onBlur: _onBlur,
+          onFocus: _onFocus,
+        }}
         checked={typeof value === 'undefined' ? false : value}
         onChange={_onChange}
         {...uiProps}
         aria-describedby={ariaDescribedByIds<T>(id)}
+        /* Backward compatibility with fluentui v7 */
+        {...{
+          autoFocus: autofocus,
+          onBlur: _onBlur,
+          onFocus: _onFocus,
+        }}
       />
     </>
   );

diff --git a/packages/fluent-ui/src/CheckboxesWidget/CheckboxesWidget.tsx b/packages/fluent-ui/src/CheckboxesWidget/CheckboxesWidget.tsx
@@ -70,13 +70,21 @@ export default function CheckboxesWidget<
               checked={checked}
               label={option.label}
               disabled={disabled || itemDisabled || readonly}
-              autoFocus={autofocus && index === 0}
+              inputProps={{
+                autoFocus: autofocus && index === 0,
+                onBlur: _onBlur,
+                onFocus: _onFocus,
+              }}
               onChange={_onChange(index)}
-              onBlur={_onBlur}
-              onFocus={_onFocus}
               key={index}
               {...uiProps}
               aria-describedby={ariaDescribedByIds<T>(id)}
+              /* Backward compatibility with fluentui v7 */
+              {...{
+                autoFocus: autofocus && index === 0,
+                onBlur: _onBlur,
+                onFocus: _onFocus,
+              }}
             />
           );
         })}

diff --git a/packages/fluent-ui/src/RadioWidget/RadioWidget.tsx b/packages/fluent-ui/src/RadioWidget/RadioWidget.tsx
@@ -20,7 +20,8 @@ const allowedProps: (keyof IChoiceGroupProps)[] = [
   'selectedKey',
   'onChange',
   'label',
-  'onChanged',
+  /* Backward compatibility with fluentui v7 */
+  'onChanged' as any,
   'theme',
   'styles',
   'ariaLabelledBy',

diff --git a/packages/fluent-ui/src/UpDownWidget/UpDownWidget.tsx b/packages/fluent-ui/src/UpDownWidget/UpDownWidget.tsx
@@ -1,5 +1,5 @@
-import { ChangeEvent, FocusEvent } from 'react';
-import { SpinButton } from '@fluentui/react';
+import { ChangeEvent, 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,8 @@ const allowedProps = [
   'defaultValue',
   'disabled',
   'downArrowButtonStyles',
-  'getClassNames',
+  /* Backward compatibility with fluentui v7 */
+  'getClassNames' as any,
   'iconButtonProps',
   'iconProps',
   'incrementButtonAriaLabel',
@@ -74,7 +75,14 @@ export default function UpDownWidget<
   registry,
 }: WidgetProps<T, S, F>) {
   const { translateString } = registry;
-  const _onChange = ({ target: { value } }: ChangeEvent<HTMLInputElement>) => onChange(Number(value));
+  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) {