@rjsf/fluentui-rc 5.14.1

package/src/FieldErrorTemplate/FieldErrorTemplate.tsx

@@ -0,0 +1,44 @@
+import { makeStyles, tokens } from '@fluentui/react-components';
+import { errorId, FieldErrorProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+
+const useStyles = makeStyles({
+  list: { marginTop: 0, marginBottom: 0, paddingLeft: 0, listStyleType: 'none' },
+  listItem: {
+    paddingLeft: tokens.spacingHorizontalL,
+    paddingTop: tokens.spacingVerticalXS,
+    paddingBottom: tokens.spacingVerticalXS,
+  },
+  errorLabel: { color: tokens.colorPaletteRedForeground1 },
+});
+
+/** The `FieldErrorTemplate` component renders the errors local to the particular field
+ *
+ * @param props - The `FieldErrorProps` for the errors being rendered
+ */
+export default function FieldErrorTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(props: FieldErrorProps<T, S, F>) {
+  const { errors = [], idSchema } = props;
+  const classes = useStyles();
+
+  if (errors.length === 0) {
+    return null;
+  }
+  const id = errorId<T>(idSchema);
+
+  return (
+    <ul className={classes.list}>
+      {errors.map((error, i: number) => {
+        return (
+          <li key={i} className={classes.listItem}>
+            <small className={classes.errorLabel} id={id}>
+              {error}
+            </small>
+          </li>
+        );
+      })}
+    </ul>
+  );
+}

package/src/FieldErrorTemplate/index.ts

@@ -0,0 +1,2 @@
+export { default } from './FieldErrorTemplate';
+export * from './FieldErrorTemplate';

package/src/FieldHelpTemplate/FieldHelpTemplate.tsx

@@ -0,0 +1,19 @@
+import { Caption1 } from '@fluentui/react-components';
+import { helpId, FieldHelpProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+
+/** The `FieldHelpTemplate` component renders any help desired for a field
+ *
+ * @param props - The `FieldHelpProps` to be rendered
+ */
+export default function FieldHelpTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(props: FieldHelpProps<T, S, F>) {
+  const { idSchema, help } = props;
+  if (!help) {
+    return null;
+  }
+  const id = helpId<T>(idSchema);
+  return <Caption1 id={id}>{help}</Caption1>;
+}

package/src/FieldHelpTemplate/index.ts

@@ -0,0 +1,2 @@
+export { default } from './FieldHelpTemplate';
+export * from './FieldHelpTemplate';

package/src/FieldTemplate/FieldTemplate.tsx

@@ -0,0 +1,80 @@
+import { Field, Text } from '@fluentui/react-components';
+import {
+  FieldTemplateProps,
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+  getTemplate,
+  getUiOptions,
+} from '@rjsf/utils';
+
+/** The `FieldTemplate` component is the template used by `SchemaField` to render any field. It renders the field
+ * content, (label, description, children, errors and help) inside of a `WrapIfAdditional` component.
+ *
+ * @param props - The `FieldTemplateProps` for this component
+ */
+export default function FieldTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(props: FieldTemplateProps<T, S, F>) {
+  const {
+    id,
+    children,
+    classNames,
+    style,
+    disabled,
+    displayLabel,
+    hidden,
+    label,
+    onDropPropertyClick,
+    onKeyChange,
+    readonly,
+    required,
+    rawErrors = [],
+    errors,
+    help,
+    description,
+    rawDescription,
+    schema,
+    uiSchema,
+    registry,
+  } = props;
+  const uiOptions = getUiOptions<T, S, F>(uiSchema);
+  const WrapIfAdditionalTemplate = getTemplate<'WrapIfAdditionalTemplate', T, S, F>(
+    'WrapIfAdditionalTemplate',
+    registry,
+    uiOptions
+  );
+
+  if (hidden) {
+    return <div style={{ display: 'none' }}>{children}</div>;
+  }
+  return (
+    <WrapIfAdditionalTemplate
+      classNames={classNames}
+      style={style}
+      disabled={disabled}
+      id={id}
+      label={label}
+      onDropPropertyClick={onDropPropertyClick}
+      onKeyChange={onKeyChange}
+      readonly={readonly}
+      required={required}
+      schema={schema}
+      uiSchema={uiSchema}
+      registry={registry}
+    >
+      <Field validationState={rawErrors.length ? 'error' : undefined} required={required}>
+        {children}
+        {displayLabel && rawDescription ? (
+          <Text as='p' block style={{ marginTop: 0, marginBottom: 0 }}>
+            {description}
+          </Text>
+        ) : null}
+        {errors}
+        {help}
+      </Field>
+    </WrapIfAdditionalTemplate>
+  );
+}

package/src/FieldTemplate/index.ts

@@ -0,0 +1,2 @@
+export { default } from './FieldTemplate';
+export * from './FieldTemplate';

package/src/FluentForm/FluentForm.ts

@@ -0,0 +1,15 @@
+import { ComponentType } from 'react';
+import { FormProps, withTheme } from '@rjsf/core';
+
+import { generateTheme } from '../Theme';
+import { FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+
+export function generateForm<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(): ComponentType<FormProps<T, S, F>> {
+  return withTheme<T, S, F>(generateTheme<T, S, F>());
+}
+
+export default generateForm();

package/src/FluentForm/index.ts

@@ -0,0 +1,2 @@
+export { default } from './FluentForm';
+export * from './FluentForm';

package/src/FluentUIRCFrameProvider.tsx

@@ -0,0 +1,21 @@
+import { FluentProvider, RendererProvider, createDOMRenderer, teamsLightTheme } from '@fluentui/react-components';
+import { ReactNode, useMemo } from 'react';
+
+const FluentWrapper = (props: { children: ReactNode; targetDocument?: HTMLDocument }) => {
+  const { children, targetDocument } = props;
+  const renderer = useMemo(() => createDOMRenderer(targetDocument), [targetDocument]);
+
+  return (
+    <RendererProvider renderer={renderer} targetDocument={targetDocument}>
+      <FluentProvider targetDocument={targetDocument} theme={teamsLightTheme}>
+        {children}
+      </FluentProvider>
+    </RendererProvider>
+  );
+};
+
+export const __createFluentUIRCFrameProvider =
+  (props: any) =>
+  ({ document }: any) => {
+    return <FluentWrapper targetDocument={document}>{props.children}</FluentWrapper>;
+  };

package/src/IconButton/IconButton.tsx

@@ -0,0 +1,73 @@
+import { Button } from '@fluentui/react-components';
+import { ArrowSortUpRegular, ArrowSortDownRegular, CopyRegular, SubtractRegular } from '@fluentui/react-icons';
+import { FormContextType, IconButtonProps, RJSFSchema, StrictRJSFSchema, TranslatableString } from '@rjsf/utils';
+
+export default function FluentIconButton<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(props: IconButtonProps<T, S, F>) {
+  const { color, uiSchema, registry, ...otherProps } = props;
+
+  return <Button {...otherProps} color='secondary' />;
+}
+
+export function CopyButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  props: IconButtonProps<T, S, F>
+) {
+  const {
+    registry: { translateString },
+  } = props;
+  return (
+    <FluentIconButton<T, S, F>
+      title={translateString(TranslatableString.CopyButton)}
+      {...props}
+      icon={<CopyRegular />}
+    />
+  );
+}
+
+export function MoveDownButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  props: IconButtonProps<T, S, F>
+) {
+  const {
+    registry: { translateString },
+  } = props;
+  return (
+    <FluentIconButton<T, S, F>
+      title={translateString(TranslatableString.MoveDownButton)}
+      {...props}
+      icon={<ArrowSortDownRegular />}
+    />
+  );
+}
+
+export function MoveUpButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  props: IconButtonProps<T, S, F>
+) {
+  const {
+    registry: { translateString },
+  } = props;
+  return (
+    <FluentIconButton<T, S, F>
+      title={translateString(TranslatableString.MoveUpButton)}
+      {...props}
+      icon={<ArrowSortUpRegular />}
+    />
+  );
+}
+
+export function RemoveButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  props: IconButtonProps<T, S, F>
+) {
+  const {
+    registry: { translateString },
+  } = props;
+  return (
+    <FluentIconButton<T, S, F>
+      title={translateString(TranslatableString.RemoveButton)}
+      {...props}
+      icon={<SubtractRegular />}
+    />
+  );
+}

package/src/IconButton/index.ts

@@ -0,0 +1,2 @@
+export { default } from './IconButton';
+export * from './IconButton';

package/src/ObjectFieldTemplate/ObjectFieldTemplate.tsx

@@ -0,0 +1,97 @@
+import { Flex } from '@fluentui/react-migration-v0-v9';
+import {
+  FormContextType,
+  ObjectFieldTemplateProps,
+  RJSFSchema,
+  StrictRJSFSchema,
+  canExpand,
+  descriptionId,
+  getTemplate,
+  getUiOptions,
+  titleId,
+} from '@rjsf/utils';
+
+/** The `ObjectFieldTemplate` is the template to use to render all the inner properties of an object along with the
+ * title and description if available. If the object is expandable, then an `AddButton` is also rendered after all
+ * the properties.
+ *
+ * @param props - The `ObjectFieldTemplateProps` for this component
+ */
+export default function ObjectFieldTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(props: ObjectFieldTemplateProps<T, S, F>) {
+  const {
+    description,
+    title,
+    properties,
+    required,
+    disabled,
+    readonly,
+    uiSchema,
+    idSchema,
+    schema,
+    formData,
+    onAddClick,
+    registry,
+  } = props;
+  const uiOptions = getUiOptions<T, S, F>(uiSchema);
+  const TitleFieldTemplate = getTemplate<'TitleFieldTemplate', T, S, F>('TitleFieldTemplate', registry, uiOptions);
+  const DescriptionFieldTemplate = getTemplate<'DescriptionFieldTemplate', T, S, F>(
+    'DescriptionFieldTemplate',
+    registry,
+    uiOptions
+  );
+  // Button templates are not overridden in the uiSchema
+  const {
+    ButtonTemplates: { AddButton },
+  } = registry.templates;
+  return (
+    <>
+      {title && (
+        <TitleFieldTemplate
+          id={titleId<T>(idSchema)}
+          title={title}
+          required={required}
+          schema={schema}
+          uiSchema={uiSchema}
+          registry={registry}
+        />
+      )}
+      {description && (
+        <DescriptionFieldTemplate
+          id={descriptionId<T>(idSchema)}
+          description={description}
+          schema={schema}
+          uiSchema={uiSchema}
+          registry={registry}
+        />
+      )}
+      <Flex fill column gap='gap.medium'>
+        {properties.map((element, index) =>
+          // Remove the <Grid> if the inner element is hidden as the <Grid>
+          // itself would otherwise still take up space.
+          element.hidden ? (
+            element.content
+          ) : (
+            <Flex column fill key={index} style={{ marginBottom: '10px' }}>
+              {element.content}
+            </Flex>
+          )
+        )}
+        {canExpand<T, S, F>(schema, uiSchema, formData) && (
+          <Flex hAlign='end'>
+            <AddButton
+              className='object-property-expand'
+              onClick={onAddClick(schema)}
+              disabled={disabled || readonly}
+              uiSchema={uiSchema}
+              registry={registry}
+            />
+          </Flex>
+        )}
+      </Flex>
+    </>
+  );
+}

package/src/ObjectFieldTemplate/index.ts

@@ -0,0 +1,2 @@
+export { default } from './ObjectFieldTemplate';
+export * from './ObjectFieldTemplate';

package/src/RadioWidget/RadioWidget.tsx

@@ -0,0 +1,77 @@
+import { FocusEvent } from 'react';
+import {
+  ariaDescribedByIds,
+  enumOptionsIndexForValue,
+  enumOptionsValueForIndex,
+  labelValue,
+  optionId,
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+  WidgetProps,
+} from '@rjsf/utils';
+import { Label, Radio, RadioGroup, RadioGroupOnChangeData } from '@fluentui/react-components';
+
+/** The `RadioWidget` is a widget for rendering a radio group.
+ *  It is typically used with a string property constrained with enum options.
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+export default function RadioWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({
+  id,
+  options,
+  value,
+  required,
+  disabled,
+  readonly,
+  label,
+  hideLabel,
+  onChange,
+  onBlur,
+  onFocus,
+}: WidgetProps<T, S, F>) {
+  const { enumOptions, enumDisabled, emptyValue } = options;
+
+  const _onChange = (_: any, data: RadioGroupOnChangeData) =>
+    onChange(enumOptionsValueForIndex<S>(data.value, enumOptions, emptyValue));
+  const _onBlur = ({ target: { value } }: FocusEvent<HTMLInputElement>) =>
+    onBlur(id, enumOptionsValueForIndex<S>(value, enumOptions, emptyValue));
+  const _onFocus = ({ target: { value } }: FocusEvent<HTMLInputElement>) =>
+    onFocus(id, enumOptionsValueForIndex<S>(value, enumOptions, emptyValue));
+
+  const selectedIndex = enumOptionsIndexForValue<S>(value, enumOptions) ?? undefined;
+
+  return (
+    <>
+      {labelValue(
+        <Label required={required} htmlFor={id}>
+          {label || undefined}
+        </Label>,
+        hideLabel
+      )}
+      <RadioGroup
+        id={id}
+        name={id}
+        value={selectedIndex as string | undefined}
+        onChange={_onChange}
+        onBlur={_onBlur}
+        onFocus={_onFocus}
+        aria-describedby={ariaDescribedByIds<T>(id)}
+      >
+        {Array.isArray(enumOptions) &&
+          enumOptions.map((option, index) => {
+            const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
+            return (
+              <Radio
+                id={optionId(id, index)}
+                label={option.label}
+                value={String(index)}
+                key={index}
+                disabled={disabled || itemDisabled || readonly}
+              />
+            );
+          })}
+      </RadioGroup>
+    </>
+  );
+}

package/src/RadioWidget/index.ts

@@ -0,0 +1,2 @@
+export { default } from './RadioWidget';
+export * from './RadioWidget';

package/src/RangeWidget/RangeWidget.tsx

@@ -0,0 +1,49 @@
+import { FocusEvent } from 'react';
+import {
+  ariaDescribedByIds,
+  labelValue,
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+  WidgetProps,
+  rangeSpec,
+} from '@rjsf/utils';
+import { Label, Slider, SliderOnChangeData } from '@fluentui/react-components';
+
+/** The `RangeWidget` component uses the `BaseInputTemplate` changing the type to `range` and wrapping the result
+ * in a div, with the value along side it.
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+export default function RangeWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  props: WidgetProps<T, S, F>
+) {
+  const { value, readonly, disabled, onBlur, onFocus, options, schema, onChange, required, label, hideLabel, id } =
+    props;
+  const sliderProps = { value, label, id, name: id, ...rangeSpec<S>(schema) };
+
+  const _onChange = (_: any, data: SliderOnChangeData) => {
+    onChange(data.value ?? options.emptyValue);
+  };
+  const _onBlur = ({ target: { value } }: FocusEvent<HTMLInputElement>) => onBlur(id, value);
+  const _onFocus = ({ target: { value } }: FocusEvent<HTMLInputElement>) => onFocus(id, value);
+
+  return (
+    <>
+      {labelValue(
+        <Label required={required} htmlFor={id}>
+          {label || undefined}
+        </Label>,
+        hideLabel
+      )}
+      <Slider
+        disabled={disabled || readonly}
+        onChange={_onChange}
+        onBlur={_onBlur}
+        onFocus={_onFocus}
+        {...sliderProps}
+        aria-describedby={ariaDescribedByIds<T>(id)}
+      />
+    </>
+  );
+}

package/src/RangeWidget/index.ts

@@ -0,0 +1,2 @@
+export { default } from './RangeWidget';
+export * from './RangeWidget';

package/src/SelectWidget/SelectWidget.tsx

@@ -0,0 +1,98 @@
+import {
+  ariaDescribedByIds,
+  enumOptionsIndexForValue,
+  enumOptionsValueForIndex,
+  FormContextType,
+  labelValue,
+  RJSFSchema,
+  StrictRJSFSchema,
+  WidgetProps,
+} from '@rjsf/utils';
+import { Dropdown, Field, Option } from '@fluentui/react-components';
+import { OptionOnSelectData } from '@fluentui/react-combobox';
+
+function getValue(data: OptionOnSelectData, multiple: boolean) {
+  if (multiple) {
+    return data.selectedOptions;
+  }
+  return data.selectedOptions[0];
+}
+
+/** The `SelectWidget` is a widget for rendering dropdowns.
+ *  It is typically used with string properties constrained with enum options.
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+function SelectWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({
+  id,
+  options,
+  label,
+  hideLabel,
+  value,
+  required,
+  disabled,
+  readonly,
+  multiple = false,
+  autofocus = false,
+  rawErrors = [],
+  onChange,
+  onBlur,
+  onFocus,
+}: WidgetProps<T, S, F>) {
+  const { enumOptions, enumDisabled, emptyValue: optEmptyVal } = options;
+
+  const selectedIndexes = enumOptionsIndexForValue<S>(value, enumOptions, multiple);
+  let selectedIndexesAsArray: string[] = [];
+
+  if (typeof selectedIndexes === 'string') {
+    selectedIndexesAsArray = [selectedIndexes];
+  } else if (Array.isArray(selectedIndexes)) {
+    selectedIndexesAsArray = selectedIndexes.map((index) => String(index));
+  }
+
+  const dropdownValue = selectedIndexesAsArray
+    .map((index) => (enumOptions ? enumOptions[Number(index)].label : undefined))
+    .join(', ');
+
+  const _onBlur = () => onBlur(id, selectedIndexes);
+  const _onFocus = () => onFocus(id, selectedIndexes);
+  const _onChange = (_: any, data: OptionOnSelectData) => {
+    const newValue = getValue(data, multiple);
+    return onChange(enumOptionsValueForIndex<S>(newValue, enumOptions, optEmptyVal));
+  };
+
+  return (
+    <Field
+      label={labelValue(label, hideLabel)}
+      validationState={rawErrors.length ? 'error' : undefined}
+      required={required}
+    >
+      <Dropdown
+        id={id}
+        name={id}
+        multiselect={multiple}
+        className='form-control'
+        value={dropdownValue}
+        disabled={disabled || readonly}
+        autoFocus={autofocus}
+        onBlur={_onBlur}
+        onFocus={_onFocus}
+        onOptionSelect={_onChange}
+        selectedOptions={selectedIndexesAsArray}
+        aria-describedby={ariaDescribedByIds<T>(id)}
+      >
+        {Array.isArray(enumOptions) &&
+          enumOptions.map(({ value, label }, i) => {
+            const disabled = enumDisabled && enumDisabled.indexOf(value) !== -1;
+            return (
+              <Option key={i} value={String(i)} disabled={disabled}>
+                {label}
+              </Option>
+            );
+          })}
+      </Dropdown>
+    </Field>
+  );
+}
+
+export default SelectWidget;

package/src/SelectWidget/index.ts

@@ -0,0 +1,2 @@
+export { default } from './SelectWidget';
+export * from './SelectWidget';

package/src/SubmitButton/SubmitButton.tsx

@@ -0,0 +1,27 @@
+import { FormContextType, getSubmitButtonOptions, RJSFSchema, StrictRJSFSchema, SubmitButtonProps } from '@rjsf/utils';
+import { Button, makeStyles, tokens } from '@fluentui/react-components';
+
+const useStyles = makeStyles({
+  buttonRow: {
+    marginTop: tokens.spacingVerticalL,
+  },
+});
+
+export default function SubmitButton<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>({ uiSchema }: SubmitButtonProps<T, S, F>) {
+  const classes = useStyles();
+  const { submitText, norender, props: submitButtonProps } = getSubmitButtonOptions(uiSchema);
+  if (norender) {
+    return null;
+  }
+  return (
+    <div className={classes.buttonRow}>
+      <Button appearance='primary' type='submit' {...submitButtonProps}>
+        {submitText}
+      </Button>
+    </div>
+  );
+}

package/src/SubmitButton/index.ts

@@ -0,0 +1,2 @@
+export { default } from './SubmitButton';
+export * from './SubmitButton';