@rjsf/fluentui-rc 5.14.1

package/dist/index.esm.js

@@ -0,0 +1,1091 @@
+// src/FluentForm/FluentForm.ts
+import { withTheme } from "@rjsf/core";
+
+// src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx
+import { Flex } from "@fluentui/react-migration-v0-v9";
+import { jsx, jsxs } from "react/jsx-runtime";
+function ArrayFieldItemTemplate(props) {
+  const {
+    children,
+    disabled,
+    hasToolbar,
+    hasCopy,
+    hasMoveDown,
+    hasMoveUp,
+    hasRemove,
+    index,
+    onCopyIndexClick,
+    onDropIndexClick,
+    onReorderClick,
+    readonly,
+    uiSchema,
+    registry
+  } = props;
+  const { CopyButton: CopyButton2, MoveDownButton: MoveDownButton2, MoveUpButton: MoveUpButton2, RemoveButton: RemoveButton2 } = registry.templates.ButtonTemplates;
+  return /* @__PURE__ */ jsxs(Flex, { vAlign: "end", children: [
+    /* @__PURE__ */ jsx(Flex, { children }),
+    hasToolbar && /* @__PURE__ */ jsxs(Flex, { style: { marginLeft: "8px" }, children: [
+      (hasMoveUp || hasMoveDown) && /* @__PURE__ */ jsx(
+        MoveUpButton2,
+        {
+          disabled: disabled || readonly || !hasMoveUp,
+          onClick: onReorderClick(index, index - 1),
+          uiSchema,
+          registry
+        }
+      ),
+      (hasMoveUp || hasMoveDown) && /* @__PURE__ */ jsx(
+        MoveDownButton2,
+        {
+          disabled: disabled || readonly || !hasMoveDown,
+          onClick: onReorderClick(index, index + 1),
+          uiSchema,
+          registry
+        }
+      ),
+      hasCopy && /* @__PURE__ */ jsx(
+        CopyButton2,
+        {
+          disabled: disabled || readonly,
+          onClick: onCopyIndexClick(index),
+          uiSchema,
+          registry
+        }
+      ),
+      hasRemove && /* @__PURE__ */ jsx(
+        RemoveButton2,
+        {
+          disabled: disabled || readonly,
+          onClick: onDropIndexClick(index),
+          uiSchema,
+          registry
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/AddButton/AddButton.tsx
+import { TranslatableString } from "@rjsf/utils";
+import { Button } from "@fluentui/react-components";
+import { AddRegular } from "@fluentui/react-icons";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function AddButton({
+  uiSchema,
+  registry,
+  ...props
+}) {
+  const { translateString } = registry;
+  return /* @__PURE__ */ jsx2(Button, { ...props, icon: /* @__PURE__ */ jsx2(AddRegular, {}), title: translateString(TranslatableString.AddItemButton) });
+}
+
+// src/ArrayFieldTemplate/ArrayFieldTemplate.tsx
+import { makeStyles, shorthands } from "@fluentui/react-components";
+import { Flex as Flex2 } from "@fluentui/react-migration-v0-v9";
+import {
+  getTemplate,
+  getUiOptions
+} from "@rjsf/utils";
+import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var useStyles = makeStyles({
+  arrayItemList: {
+    ...shorthands.gap("12px")
+  }
+});
+function ArrayFieldTemplate(props) {
+  const { canAdd, disabled, idSchema, uiSchema, items, onAddClick, readonly, registry, required, schema, title } = props;
+  const classes = useStyles();
+  const uiOptions = getUiOptions(uiSchema);
+  const ArrayFieldDescriptionTemplate = getTemplate(
+    "ArrayFieldDescriptionTemplate",
+    registry,
+    uiOptions
+  );
+  const ArrayFieldItemTemplate2 = getTemplate(
+    "ArrayFieldItemTemplate",
+    registry,
+    uiOptions
+  );
+  const ArrayFieldTitleTemplate = getTemplate(
+    "ArrayFieldTitleTemplate",
+    registry,
+    uiOptions
+  );
+  const {
+    ButtonTemplates: { AddButton: AddButton2 }
+  } = registry.templates;
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsx3(
+      ArrayFieldTitleTemplate,
+      {
+        idSchema,
+        title: uiOptions.title || title,
+        schema,
+        uiSchema,
+        required,
+        registry
+      }
+    ),
+    /* @__PURE__ */ jsx3(
+      ArrayFieldDescriptionTemplate,
+      {
+        idSchema,
+        description: uiOptions.description || schema.description,
+        schema,
+        uiSchema,
+        registry
+      }
+    ),
+    /* @__PURE__ */ jsxs2(Flex2, { column: true, className: classes.arrayItemList, children: [
+      items && items.map(({ key, ...itemProps }) => /* @__PURE__ */ jsx3(ArrayFieldItemTemplate2, { ...itemProps }, key)),
+      canAdd && /* @__PURE__ */ jsx3(Flex2, { hAlign: "end", children: /* @__PURE__ */ jsx3(
+        AddButton2,
+        {
+          className: "array-item-add",
+          onClick: onAddClick,
+          disabled: disabled || readonly,
+          uiSchema,
+          registry
+        }
+      ) })
+    ] }, `array-item-list-${idSchema.$id}`)
+  ] });
+}
+
+// src/BaseInputTemplate/BaseInputTemplate.tsx
+import { Input, Label, makeStyles as makeStyles2 } from "@fluentui/react-components";
+import {
+  ariaDescribedByIds,
+  examplesId,
+  getInputProps,
+  labelValue
+} from "@rjsf/utils";
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var useStyles2 = makeStyles2({
+  input: {
+    width: "100%"
+  },
+  label: {
+    paddingTop: "2px",
+    paddingBottom: "2px",
+    marginBottom: "2px"
+  }
+});
+function BaseInputTemplate(props) {
+  const {
+    id,
+    placeholder,
+    required,
+    readonly,
+    disabled,
+    type,
+    value,
+    label,
+    hideLabel,
+    onChange,
+    onChangeOverride,
+    onBlur,
+    onFocus,
+    autofocus,
+    options,
+    schema
+  } = props;
+  const classes = useStyles2();
+  const inputProps = getInputProps(schema, type, options);
+  const _onChange = ({ target: { value: value2 } }) => onChange(value2 === "" ? options.emptyValue : value2);
+  const _onBlur = ({ target: { value: value2 } }) => onBlur(id, value2);
+  const _onFocus = ({ target: { value: value2 } }) => onFocus(id, value2);
+  return /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    labelValue(
+      /* @__PURE__ */ jsx4(Label, { htmlFor: id, required, disabled, className: classes.label, children: label }),
+      hideLabel
+    ),
+    /* @__PURE__ */ jsx4(
+      Input,
+      {
+        id,
+        name: id,
+        placeholder,
+        autoFocus: autofocus,
+        required,
+        disabled: disabled || readonly,
+        ...inputProps,
+        input: {
+          className: classes.input,
+          // Due to Fluent UI this does not work correctly
+          list: schema.examples ? examplesId(id) : void 0
+        },
+        value: value || value === 0 ? value : "",
+        onChange: onChangeOverride || _onChange,
+        onFocus: _onFocus,
+        onBlur: _onBlur,
+        "aria-describedby": ariaDescribedByIds(id, !!schema.examples)
+      }
+    ),
+    Array.isArray(schema.examples) && /* @__PURE__ */ jsx4("datalist", { id: examplesId(id), children: schema.examples.concat(schema.default && !schema.examples.includes(schema.default) ? [schema.default] : []).map((example) => {
+      return /* @__PURE__ */ jsx4("option", { value: example }, example);
+    }) })
+  ] });
+}
+
+// src/DescriptionField/DescriptionField.tsx
+import { Text, makeStyles as makeStyles3, tokens } from "@fluentui/react-components";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var useStyles3 = makeStyles3({
+  label: {
+    marginTop: tokens.spacingVerticalS,
+    marginBottom: tokens.spacingVerticalM
+  }
+});
+function DescriptionField(props) {
+  const { id, description } = props;
+  const classes = useStyles3();
+  if (description) {
+    return /* @__PURE__ */ jsx5(Text, { block: true, id, className: classes.label, children: description });
+  }
+  return null;
+}
+
+// src/ErrorList/ErrorList.tsx
+import { Card, Text as Text2, makeStyles as makeStyles4, shorthands as shorthands2, tokens as tokens2 } from "@fluentui/react-components";
+import { TranslatableString as TranslatableString2 } from "@rjsf/utils";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+var useStyles4 = makeStyles4({
+  errorCard: {
+    backgroundColor: tokens2.colorStatusDangerBackground1,
+    marginBottom: tokens2.spacingVerticalL,
+    "&::after": {
+      ...shorthands2.borderColor(tokens2.colorStatusDangerBorder1)
+    }
+  },
+  errorTitle: {
+    marginTop: 0,
+    marginBottom: 0
+  }
+});
+function ErrorList({
+  errors,
+  registry
+}) {
+  const { translateString } = registry;
+  const classes = useStyles4();
+  return /* @__PURE__ */ jsxs4(Card, { appearance: "outline", className: classes.errorCard, children: [
+    /* @__PURE__ */ jsx6(Text2, { as: "h6", size: 400, className: classes.errorTitle, children: translateString(TranslatableString2.ErrorsLabel) }),
+    /* @__PURE__ */ jsx6("ul", { children: errors.map((error, i) => {
+      return /* @__PURE__ */ jsx6("li", { children: error.stack }, i);
+    }) })
+  ] });
+}
+
+// src/IconButton/IconButton.tsx
+import { Button as Button2 } from "@fluentui/react-components";
+import { ArrowSortUpRegular, ArrowSortDownRegular, CopyRegular, SubtractRegular } from "@fluentui/react-icons";
+import { TranslatableString as TranslatableString3 } from "@rjsf/utils";
+import { jsx as jsx7 } from "react/jsx-runtime";
+function FluentIconButton(props) {
+  const { color, uiSchema, registry, ...otherProps } = props;
+  return /* @__PURE__ */ jsx7(Button2, { ...otherProps, color: "secondary" });
+}
+function CopyButton(props) {
+  const {
+    registry: { translateString }
+  } = props;
+  return /* @__PURE__ */ jsx7(
+    FluentIconButton,
+    {
+      title: translateString(TranslatableString3.CopyButton),
+      ...props,
+      icon: /* @__PURE__ */ jsx7(CopyRegular, {})
+    }
+  );
+}
+function MoveDownButton(props) {
+  const {
+    registry: { translateString }
+  } = props;
+  return /* @__PURE__ */ jsx7(
+    FluentIconButton,
+    {
+      title: translateString(TranslatableString3.MoveDownButton),
+      ...props,
+      icon: /* @__PURE__ */ jsx7(ArrowSortDownRegular, {})
+    }
+  );
+}
+function MoveUpButton(props) {
+  const {
+    registry: { translateString }
+  } = props;
+  return /* @__PURE__ */ jsx7(
+    FluentIconButton,
+    {
+      title: translateString(TranslatableString3.MoveUpButton),
+      ...props,
+      icon: /* @__PURE__ */ jsx7(ArrowSortUpRegular, {})
+    }
+  );
+}
+function RemoveButton(props) {
+  const {
+    registry: { translateString }
+  } = props;
+  return /* @__PURE__ */ jsx7(
+    FluentIconButton,
+    {
+      title: translateString(TranslatableString3.RemoveButton),
+      ...props,
+      icon: /* @__PURE__ */ jsx7(SubtractRegular, {})
+    }
+  );
+}
+
+// src/FieldErrorTemplate/FieldErrorTemplate.tsx
+import { makeStyles as makeStyles5, tokens as tokens3 } from "@fluentui/react-components";
+import { errorId } from "@rjsf/utils";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var useStyles5 = makeStyles5({
+  list: { marginTop: 0, marginBottom: 0, paddingLeft: 0, listStyleType: "none" },
+  listItem: {
+    paddingLeft: tokens3.spacingHorizontalL,
+    paddingTop: tokens3.spacingVerticalXS,
+    paddingBottom: tokens3.spacingVerticalXS
+  },
+  errorLabel: { color: tokens3.colorPaletteRedForeground1 }
+});
+function FieldErrorTemplate(props) {
+  const { errors = [], idSchema } = props;
+  const classes = useStyles5();
+  if (errors.length === 0) {
+    return null;
+  }
+  const id = errorId(idSchema);
+  return /* @__PURE__ */ jsx8("ul", { className: classes.list, children: errors.map((error, i) => {
+    return /* @__PURE__ */ jsx8("li", { className: classes.listItem, children: /* @__PURE__ */ jsx8("small", { className: classes.errorLabel, id, children: error }) }, i);
+  }) });
+}
+
+// src/FieldHelpTemplate/FieldHelpTemplate.tsx
+import { Caption1 } from "@fluentui/react-components";
+import { helpId } from "@rjsf/utils";
+import { jsx as jsx9 } from "react/jsx-runtime";
+function FieldHelpTemplate(props) {
+  const { idSchema, help } = props;
+  if (!help) {
+    return null;
+  }
+  const id = helpId(idSchema);
+  return /* @__PURE__ */ jsx9(Caption1, { id, children: help });
+}
+
+// src/FieldTemplate/FieldTemplate.tsx
+import { Field, Text as Text3 } from "@fluentui/react-components";
+import {
+  getTemplate as getTemplate2,
+  getUiOptions as getUiOptions2
+} from "@rjsf/utils";
+import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
+function FieldTemplate(props) {
+  const {
+    id,
+    children,
+    classNames,
+    style,
+    disabled,
+    displayLabel,
+    hidden,
+    label,
+    onDropPropertyClick,
+    onKeyChange,
+    readonly,
+    required,
+    rawErrors = [],
+    errors,
+    help,
+    description,
+    rawDescription,
+    schema,
+    uiSchema,
+    registry
+  } = props;
+  const uiOptions = getUiOptions2(uiSchema);
+  const WrapIfAdditionalTemplate2 = getTemplate2(
+    "WrapIfAdditionalTemplate",
+    registry,
+    uiOptions
+  );
+  if (hidden) {
+    return /* @__PURE__ */ jsx10("div", { style: { display: "none" }, children });
+  }
+  return /* @__PURE__ */ jsx10(
+    WrapIfAdditionalTemplate2,
+    {
+      classNames,
+      style,
+      disabled,
+      id,
+      label,
+      onDropPropertyClick,
+      onKeyChange,
+      readonly,
+      required,
+      schema,
+      uiSchema,
+      registry,
+      children: /* @__PURE__ */ jsxs5(Field, { validationState: rawErrors.length ? "error" : void 0, required, children: [
+        children,
+        displayLabel && rawDescription ? /* @__PURE__ */ jsx10(Text3, { as: "p", block: true, style: { marginTop: 0, marginBottom: 0 }, children: description }) : null,
+        errors,
+        help
+      ] })
+    }
+  );
+}
+
+// src/ObjectFieldTemplate/ObjectFieldTemplate.tsx
+import { Flex as Flex3 } from "@fluentui/react-migration-v0-v9";
+import {
+  canExpand,
+  descriptionId,
+  getTemplate as getTemplate3,
+  getUiOptions as getUiOptions3,
+  titleId
+} from "@rjsf/utils";
+import { Fragment as Fragment3, jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
+function ObjectFieldTemplate(props) {
+  const {
+    description,
+    title,
+    properties,
+    required,
+    disabled,
+    readonly,
+    uiSchema,
+    idSchema,
+    schema,
+    formData,
+    onAddClick,
+    registry
+  } = props;
+  const uiOptions = getUiOptions3(uiSchema);
+  const TitleFieldTemplate = getTemplate3("TitleFieldTemplate", registry, uiOptions);
+  const DescriptionFieldTemplate = getTemplate3(
+    "DescriptionFieldTemplate",
+    registry,
+    uiOptions
+  );
+  const {
+    ButtonTemplates: { AddButton: AddButton2 }
+  } = registry.templates;
+  return /* @__PURE__ */ jsxs6(Fragment3, { children: [
+    title && /* @__PURE__ */ jsx11(
+      TitleFieldTemplate,
+      {
+        id: titleId(idSchema),
+        title,
+        required,
+        schema,
+        uiSchema,
+        registry
+      }
+    ),
+    description && /* @__PURE__ */ jsx11(
+      DescriptionFieldTemplate,
+      {
+        id: descriptionId(idSchema),
+        description,
+        schema,
+        uiSchema,
+        registry
+      }
+    ),
+    /* @__PURE__ */ jsxs6(Flex3, { fill: true, column: true, gap: "gap.medium", children: [
+      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 : /* @__PURE__ */ jsx11(Flex3, { column: true, fill: true, style: { marginBottom: "10px" }, children: element.content }, index)
+        )
+      ),
+      canExpand(schema, uiSchema, formData) && /* @__PURE__ */ jsx11(Flex3, { hAlign: "end", children: /* @__PURE__ */ jsx11(
+        AddButton2,
+        {
+          className: "object-property-expand",
+          onClick: onAddClick(schema),
+          disabled: disabled || readonly,
+          uiSchema,
+          registry
+        }
+      ) })
+    ] })
+  ] });
+}
+
+// src/SubmitButton/SubmitButton.tsx
+import { getSubmitButtonOptions } from "@rjsf/utils";
+import { Button as Button3, makeStyles as makeStyles6, tokens as tokens4 } from "@fluentui/react-components";
+import { jsx as jsx12 } from "react/jsx-runtime";
+var useStyles6 = makeStyles6({
+  buttonRow: {
+    marginTop: tokens4.spacingVerticalL
+  }
+});
+function SubmitButton({ uiSchema }) {
+  const classes = useStyles6();
+  const { submitText, norender, props: submitButtonProps } = getSubmitButtonOptions(uiSchema);
+  if (norender) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx12("div", { className: classes.buttonRow, children: /* @__PURE__ */ jsx12(Button3, { appearance: "primary", type: "submit", ...submitButtonProps, children: submitText }) });
+}
+
+// src/TitleField/TitleField.tsx
+import { Text as Text4, Divider, makeStyles as makeStyles7 } from "@fluentui/react-components";
+import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
+var useStyles7 = makeStyles7({
+  root: {
+    marginTop: "8px",
+    marginBottom: "8px"
+  }
+});
+function TitleField({
+  id,
+  title
+}) {
+  const classes = useStyles7();
+  return /* @__PURE__ */ jsxs7("div", { id, className: classes.root, children: [
+    /* @__PURE__ */ jsx13(Text4, { as: "h5", size: 600, children: title }),
+    /* @__PURE__ */ jsx13(Divider, {})
+  ] });
+}
+
+// src/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.tsx
+import {
+  ADDITIONAL_PROPERTY_FLAG,
+  TranslatableString as TranslatableString4
+} from "@rjsf/utils";
+import { Field as Field2, Input as Input2, makeStyles as makeStyles8 } from "@fluentui/react-components";
+import { Flex as Flex4 } from "@fluentui/react-migration-v0-v9";
+import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
+var useStyles8 = makeStyles8({
+  input: {
+    width: "100%"
+  },
+  label: {
+    marginBottom: "4px"
+  }
+});
+function WrapIfAdditionalTemplate(props) {
+  const {
+    children,
+    classNames,
+    style,
+    disabled,
+    id,
+    label,
+    onDropPropertyClick,
+    onKeyChange,
+    readonly,
+    required,
+    schema,
+    uiSchema,
+    registry
+  } = props;
+  const { templates, translateString } = registry;
+  const classes = useStyles8();
+  const { RemoveButton: RemoveButton2 } = templates.ButtonTemplates;
+  const keyLabel = translateString(TranslatableString4.KeyLabel, [label]);
+  const additional = ADDITIONAL_PROPERTY_FLAG in schema;
+  const btnStyle = {
+    flex: 1,
+    paddingLeft: 6,
+    paddingRight: 6,
+    fontWeight: "bold"
+  };
+  if (!additional) {
+    return /* @__PURE__ */ jsx14("div", { className: classNames, style, children });
+  }
+  const handleBlur = ({ target }) => onKeyChange(target.value);
+  return /* @__PURE__ */ jsxs8(Flex4, { gap: "gap.medium", vAlign: "center", className: classNames, style, children: [
+    /* @__PURE__ */ jsx14("div", { children: /* @__PURE__ */ jsx14(Field2, { label: keyLabel, required, children: /* @__PURE__ */ jsx14(
+      Input2,
+      {
+        required,
+        defaultValue: label,
+        disabled: disabled || readonly,
+        id: `${id}-key`,
+        name: `${id}-key`,
+        onBlur: !readonly ? handleBlur : void 0,
+        type: "text",
+        input: {
+          className: classes.input
+        }
+      }
+    ) }) }),
+    /* @__PURE__ */ jsx14("div", { children }),
+    /* @__PURE__ */ jsx14("div", { children: /* @__PURE__ */ jsx14(
+      RemoveButton2,
+      {
+        iconType: "default",
+        style: btnStyle,
+        disabled: disabled || readonly,
+        onClick: onDropPropertyClick(label),
+        uiSchema,
+        registry
+      }
+    ) })
+  ] }, `${id}-key`);
+}
+
+// src/Templates/Templates.ts
+function generateTemplates() {
+  return {
+    ArrayFieldItemTemplate,
+    ArrayFieldTemplate,
+    BaseInputTemplate,
+    ButtonTemplates: {
+      CopyButton,
+      AddButton,
+      MoveDownButton,
+      MoveUpButton,
+      RemoveButton,
+      SubmitButton
+    },
+    DescriptionFieldTemplate: DescriptionField,
+    ErrorListTemplate: ErrorList,
+    FieldErrorTemplate,
+    FieldHelpTemplate,
+    FieldTemplate,
+    ObjectFieldTemplate,
+    TitleFieldTemplate: TitleField,
+    WrapIfAdditionalTemplate
+  };
+}
+var Templates_default = generateTemplates();
+
+// src/CheckboxWidget/CheckboxWidget.tsx
+import {
+  ariaDescribedByIds as ariaDescribedByIds2,
+  descriptionId as descriptionId2,
+  getTemplate as getTemplate4,
+  schemaRequiresTrueValue
+} from "@rjsf/utils";
+import { Checkbox } from "@fluentui/react-components";
+import { Fragment as Fragment4, jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
+function CheckboxWidget(props) {
+  const {
+    schema,
+    id,
+    value,
+    disabled,
+    readonly,
+    label = "",
+    hideLabel,
+    autofocus,
+    onChange,
+    onBlur,
+    onFocus,
+    registry,
+    options,
+    uiSchema
+  } = props;
+  const DescriptionFieldTemplate = getTemplate4(
+    "DescriptionFieldTemplate",
+    registry,
+    options
+  );
+  const required = schemaRequiresTrueValue(schema);
+  const _onChange = ({ target: { checked } }) => onChange(checked);
+  const _onBlur = ({ target: { value: value2 } }) => onBlur(id, value2);
+  const _onFocus = ({ target: { value: value2 } }) => onFocus(id, value2);
+  const description = options.description ?? schema.description;
+  return /* @__PURE__ */ jsxs9(Fragment4, { children: [
+    !hideLabel && !!description && /* @__PURE__ */ jsx15(
+      DescriptionFieldTemplate,
+      {
+        id: descriptionId2(id),
+        description,
+        schema,
+        uiSchema,
+        registry
+      }
+    ),
+    /* @__PURE__ */ jsx15(
+      Checkbox,
+      {
+        id,
+        name: id,
+        label,
+        checked: typeof value === "undefined" ? false : Boolean(value),
+        required,
+        disabled: disabled || readonly,
+        autoFocus: autofocus,
+        onChange: _onChange,
+        onBlur: _onBlur,
+        onFocus: _onFocus,
+        "aria-describedby": ariaDescribedByIds2(id)
+      }
+    )
+  ] });
+}
+
+// src/CheckboxesWidget/CheckboxesWidget.tsx
+import {
+  ariaDescribedByIds as ariaDescribedByIds3,
+  enumOptionsDeselectValue,
+  enumOptionsIsSelected,
+  enumOptionsSelectValue,
+  enumOptionsValueForIndex,
+  labelValue as labelValue2,
+  optionId
+} from "@rjsf/utils";
+import { Label as Label2, Checkbox as Checkbox2 } from "@fluentui/react-components";
+import { Flex as Flex5 } from "@fluentui/react-migration-v0-v9";
+import { Fragment as Fragment5, jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
+function CheckboxesWidget({
+  label,
+  hideLabel,
+  id,
+  disabled,
+  options,
+  value,
+  autofocus,
+  readonly,
+  required,
+  onChange,
+  onBlur,
+  onFocus
+}) {
+  const { enumOptions, enumDisabled, inline, emptyValue } = options;
+  const checkboxesValues = Array.isArray(value) ? value : [value];
+  const _onChange = (index) => ({ target: { checked } }) => {
+    if (checked) {
+      onChange(enumOptionsSelectValue(index, checkboxesValues, enumOptions));
+    } else {
+      onChange(enumOptionsDeselectValue(index, checkboxesValues, enumOptions));
+    }
+  };
+  const _onBlur = ({ target: { value: value2 } }) => onBlur(id, enumOptionsValueForIndex(value2, enumOptions, emptyValue));
+  const _onFocus = ({ target: { value: value2 } }) => onFocus(id, enumOptionsValueForIndex(value2, enumOptions, emptyValue));
+  return /* @__PURE__ */ jsxs10(Fragment5, { children: [
+    labelValue2(
+      /* @__PURE__ */ jsx16(Label2, { required, htmlFor: id, children: label || void 0 }),
+      hideLabel
+    ),
+    /* @__PURE__ */ jsx16(Flex5, { column: !inline, children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
+      const checked = enumOptionsIsSelected(option.value, checkboxesValues);
+      const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
+      return /* @__PURE__ */ jsx16(
+        Checkbox2,
+        {
+          id: optionId(id, index),
+          name: id,
+          label: option.label,
+          checked,
+          disabled: disabled || itemDisabled || readonly,
+          autoFocus: autofocus && index === 0,
+          onChange: _onChange(index),
+          onBlur: _onBlur,
+          onFocus: _onFocus,
+          "aria-describedby": ariaDescribedByIds3(id)
+        },
+        index
+      );
+    }) })
+  ] });
+}
+
+// src/RadioWidget/RadioWidget.tsx
+import {
+  ariaDescribedByIds as ariaDescribedByIds4,
+  enumOptionsIndexForValue,
+  enumOptionsValueForIndex as enumOptionsValueForIndex2,
+  labelValue as labelValue3,
+  optionId as optionId2
+} from "@rjsf/utils";
+import { Label as Label3, Radio, RadioGroup } from "@fluentui/react-components";
+import { Fragment as Fragment6, jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
+function RadioWidget({
+  id,
+  options,
+  value,
+  required,
+  disabled,
+  readonly,
+  label,
+  hideLabel,
+  onChange,
+  onBlur,
+  onFocus
+}) {
+  const { enumOptions, enumDisabled, emptyValue } = options;
+  const _onChange = (_, data) => onChange(enumOptionsValueForIndex2(data.value, enumOptions, emptyValue));
+  const _onBlur = ({ target: { value: value2 } }) => onBlur(id, enumOptionsValueForIndex2(value2, enumOptions, emptyValue));
+  const _onFocus = ({ target: { value: value2 } }) => onFocus(id, enumOptionsValueForIndex2(value2, enumOptions, emptyValue));
+  const selectedIndex = enumOptionsIndexForValue(value, enumOptions) ?? void 0;
+  return /* @__PURE__ */ jsxs11(Fragment6, { children: [
+    labelValue3(
+      /* @__PURE__ */ jsx17(Label3, { required, htmlFor: id, children: label || void 0 }),
+      hideLabel
+    ),
+    /* @__PURE__ */ jsx17(
+      RadioGroup,
+      {
+        id,
+        name: id,
+        value: selectedIndex,
+        onChange: _onChange,
+        onBlur: _onBlur,
+        onFocus: _onFocus,
+        "aria-describedby": ariaDescribedByIds4(id),
+        children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
+          const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
+          return /* @__PURE__ */ jsx17(
+            Radio,
+            {
+              id: optionId2(id, index),
+              label: option.label,
+              value: String(index),
+              disabled: disabled || itemDisabled || readonly
+            },
+            index
+          );
+        })
+      }
+    )
+  ] });
+}
+
+// src/RangeWidget/RangeWidget.tsx
+import {
+  ariaDescribedByIds as ariaDescribedByIds5,
+  labelValue as labelValue4,
+  rangeSpec
+} from "@rjsf/utils";
+import { Label as Label4, Slider } from "@fluentui/react-components";
+import { Fragment as Fragment7, jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
+function RangeWidget(props) {
+  const { value, readonly, disabled, onBlur, onFocus, options, schema, onChange, required, label, hideLabel, id } = props;
+  const sliderProps = { value, label, id, name: id, ...rangeSpec(schema) };
+  const _onChange = (_, data) => {
+    onChange(data.value ?? options.emptyValue);
+  };
+  const _onBlur = ({ target: { value: value2 } }) => onBlur(id, value2);
+  const _onFocus = ({ target: { value: value2 } }) => onFocus(id, value2);
+  return /* @__PURE__ */ jsxs12(Fragment7, { children: [
+    labelValue4(
+      /* @__PURE__ */ jsx18(Label4, { required, htmlFor: id, children: label || void 0 }),
+      hideLabel
+    ),
+    /* @__PURE__ */ jsx18(
+      Slider,
+      {
+        disabled: disabled || readonly,
+        onChange: _onChange,
+        onBlur: _onBlur,
+        onFocus: _onFocus,
+        ...sliderProps,
+        "aria-describedby": ariaDescribedByIds5(id)
+      }
+    )
+  ] });
+}
+
+// src/SelectWidget/SelectWidget.tsx
+import {
+  ariaDescribedByIds as ariaDescribedByIds6,
+  enumOptionsIndexForValue as enumOptionsIndexForValue2,
+  enumOptionsValueForIndex as enumOptionsValueForIndex3,
+  labelValue as labelValue5
+} from "@rjsf/utils";
+import { Dropdown, Field as Field3, Option } from "@fluentui/react-components";
+import { jsx as jsx19 } from "react/jsx-runtime";
+function getValue(data, multiple) {
+  if (multiple) {
+    return data.selectedOptions;
+  }
+  return data.selectedOptions[0];
+}
+function SelectWidget({
+  id,
+  options,
+  label,
+  hideLabel,
+  value,
+  required,
+  disabled,
+  readonly,
+  multiple = false,
+  autofocus = false,
+  rawErrors = [],
+  onChange,
+  onBlur,
+  onFocus
+}) {
+  const { enumOptions, enumDisabled, emptyValue: optEmptyVal } = options;
+  const selectedIndexes = enumOptionsIndexForValue2(value, enumOptions, multiple);
+  let selectedIndexesAsArray = [];
+  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 : void 0).join(", ");
+  const _onBlur = () => onBlur(id, selectedIndexes);
+  const _onFocus = () => onFocus(id, selectedIndexes);
+  const _onChange = (_, data) => {
+    const newValue = getValue(data, multiple);
+    return onChange(enumOptionsValueForIndex3(newValue, enumOptions, optEmptyVal));
+  };
+  return /* @__PURE__ */ jsx19(
+    Field3,
+    {
+      label: labelValue5(label, hideLabel),
+      validationState: rawErrors.length ? "error" : void 0,
+      required,
+      children: /* @__PURE__ */ jsx19(
+        Dropdown,
+        {
+          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": ariaDescribedByIds6(id),
+          children: Array.isArray(enumOptions) && enumOptions.map(({ value: value2, label: label2 }, i) => {
+            const disabled2 = enumDisabled && enumDisabled.indexOf(value2) !== -1;
+            return /* @__PURE__ */ jsx19(Option, { value: String(i), disabled: disabled2, children: label2 }, i);
+          })
+        }
+      )
+    }
+  );
+}
+var SelectWidget_default = SelectWidget;
+
+// src/TextareaWidget/TextareaWidget.tsx
+import { Label as Label5, Textarea, makeStyles as makeStyles9 } from "@fluentui/react-components";
+import {
+  ariaDescribedByIds as ariaDescribedByIds7,
+  labelValue as labelValue6
+} from "@rjsf/utils";
+import { Fragment as Fragment8, jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
+var useStyles9 = makeStyles9({
+  label: {
+    paddingTop: "2px",
+    paddingBottom: "2px",
+    marginBottom: "2px"
+  }
+});
+function TextareaWidget(props) {
+  const {
+    id,
+    placeholder,
+    required,
+    readonly,
+    disabled,
+    value,
+    label,
+    hideLabel,
+    onChange,
+    onChangeOverride,
+    onBlur,
+    onFocus,
+    autofocus,
+    options,
+    schema
+  } = props;
+  const classes = useStyles9();
+  const _onChange = ({ target: { value: value2 } }) => onChange(value2 === "" ? options.emptyValue : value2);
+  const _onBlur = ({ target: { value: value2 } }) => onBlur(id, value2);
+  const _onFocus = ({ target: { value: value2 } }) => onFocus(id, value2);
+  let rows = 5;
+  if (typeof options.rows === "string" || typeof options.rows === "number") {
+    rows = options.rows;
+  }
+  return /* @__PURE__ */ jsxs13(Fragment8, { children: [
+    labelValue6(
+      /* @__PURE__ */ jsx20(Label5, { htmlFor: id, required, disabled, className: classes.label, children: label }),
+      hideLabel
+    ),
+    /* @__PURE__ */ jsx20(
+      Textarea,
+      {
+        id,
+        name: id,
+        placeholder,
+        autoFocus: autofocus,
+        required,
+        disabled: disabled || readonly,
+        value: value || value === 0 ? value : "",
+        onChange: onChangeOverride || _onChange,
+        onFocus: _onFocus,
+        onBlur: _onBlur,
+        "aria-describedby": ariaDescribedByIds7(id, !!schema.examples),
+        rows
+      }
+    )
+  ] });
+}
+
+// src/Widgets/Widgets.ts
+function generateWidgets() {
+  return {
+    CheckboxWidget,
+    CheckboxesWidget,
+    RadioWidget,
+    RangeWidget,
+    SelectWidget: SelectWidget_default,
+    TextareaWidget
+  };
+}
+var Widgets_default = generateWidgets();
+
+// src/Theme/Theme.ts
+function generateTheme() {
+  return {
+    templates: generateTemplates(),
+    widgets: generateWidgets()
+  };
+}
+var Theme_default = generateTheme();
+
+// src/FluentForm/FluentForm.ts
+function generateForm() {
+  return withTheme(generateTheme());
+}
+var FluentForm_default = generateForm();
+
+// src/FluentUIRCFrameProvider.tsx
+import { FluentProvider, RendererProvider, createDOMRenderer, teamsLightTheme } from "@fluentui/react-components";
+import { useMemo } from "react";
+import { jsx as jsx21 } from "react/jsx-runtime";
+var FluentWrapper = (props) => {
+  const { children, targetDocument } = props;
+  const renderer = useMemo(() => createDOMRenderer(targetDocument), [targetDocument]);
+  return /* @__PURE__ */ jsx21(RendererProvider, { renderer, targetDocument, children: /* @__PURE__ */ jsx21(FluentProvider, { targetDocument, theme: teamsLightTheme, children }) });
+};
+var __createFluentUIRCFrameProvider = (props) => ({ document }) => {
+  return /* @__PURE__ */ jsx21(FluentWrapper, { targetDocument: document, children: props.children });
+};
+
+// src/index.ts
+var src_default = FluentForm_default;
+export {
+  FluentForm_default as Form,
+  Templates_default as Templates,
+  Theme_default as Theme,
+  Widgets_default as Widgets,
+  __createFluentUIRCFrameProvider,
+  src_default as default,
+  generateForm,
+  generateTemplates,
+  generateTheme,
+  generateWidgets
+};
+//# sourceMappingURL=index.esm.js.map