@rjsf/fluentui-rc 5.14.2 → 5.15.0

package/README.md

@@ -7,7 +7,7 @@
 <br />
 <p align="center">
   <a href="https://github.com/rjsf-team/react-jsonschema-form">
-    <img src="./logo.png" alt="Logo" width="120" height="120">
+    <img src="https://github.com/rjsf-team/react-jsonschema-form/blob/main/packages/fluentui-rc/logo.png?raw=true" alt="Logo" width="120" height="120">
   </a>
 
   <h3 align="center">@rjsf/fluentui-rc</h3>
@@ -120,8 +120,8 @@ GitHub repository: [https://github.com/rjsf-team/react-jsonschema-form](https://
 [contributors-url]: https://github.com/rjsf-team/react-jsonschema-form/graphs/contributors
 [license-shield]: https://img.shields.io/badge/license-Apache%202.0-blue.svg?style=flat-square
 [license-url]: https://choosealicense.com/licenses/apache-2.0/
-[npm-shield]: https://img.shields.io/npm/v/@rjsf/fluent-ui/latest.svg?style=flat-square
-[npm-url]: https://www.npmjs.com/package/@rjsf/fluent-ui
-[npm-dl-shield]: https://img.shields.io/npm/dm/@rjsf/fluent-ui.svg?style=flat-square
-[npm-dl-url]: https://www.npmjs.com/package/@rjsf/fluent-ui
-[product-screenshot]: https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/59a8206e148474bea854bbb004f624143fbcbac8/packages/fluent-ui/screenshot.png
+[npm-shield]: https://img.shields.io/npm/v/@rjsf/fluentui-rc/latest.svg?style=flat-square
+[npm-url]: https://www.npmjs.com/package/@rjsf/fluentui-rc
+[npm-dl-shield]: https://img.shields.io/npm/dm/@rjsf/fluentui-rc.svg?style=flat-square
+[npm-dl-url]: https://www.npmjs.com/package/@rjsf/fluentui-rc
+[product-screenshot]: https://github.com/rjsf-team/react-jsonschema-form/blob/main/packages/fluentui-rc/screenshot.png?raw=true

package/dist/core.umd.js

@@ -1,10 +1,17 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@rjsf/core'), require('@fluentui/react-migration-v0-v9'), require('react/jsx-runtime'), require('@rjsf/utils'), require('@fluentui/react-components'), require('@fluentui/react-icons'), require('react')) :
-  typeof define === 'function' && define.amd ? define(['exports', '@rjsf/core', '@fluentui/react-migration-v0-v9', 'react/jsx-runtime', '@rjsf/utils', '@fluentui/react-components', '@fluentui/react-icons', 'react'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.JSONSchemaForm = {}, global.core, global.reactMigrationV0V9, global.jsxRuntime, global.utils, global.reactComponents, global.reactIcons, global.react));
-})(this, (function (exports, core, reactMigrationV0V9, jsxRuntime, utils, reactComponents, reactIcons, react) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@rjsf/core'), require('@fluentui/react-migration-v0-v9'), require('@fluentui/react-components'), require('react/jsx-runtime'), require('@rjsf/utils'), require('@fluentui/react-icons'), require('react')) :
+  typeof define === 'function' && define.amd ? define(['exports', '@rjsf/core', '@fluentui/react-migration-v0-v9', '@fluentui/react-components', 'react/jsx-runtime', '@rjsf/utils', '@fluentui/react-icons', 'react'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.JSONSchemaForm = {}, global.core, global.reactMigrationV0V9, global.reactComponents, global.jsxRuntime, global.utils, global.reactIcons, global.react));
+})(this, (function (exports, core, reactMigrationV0V9, reactComponents, jsxRuntime, utils, reactIcons, react) { 'use strict';
 
   // src/FluentForm/FluentForm.ts
+  var useStyles = reactComponents.makeStyles({
+    arrayFieldItem: {
+      "> .form-group": {
+        width: "100%"
+      }
+    }
+  });
   function ArrayFieldItemTemplate(props) {
     const {
       children,
@@ -22,9 +29,10 @@
       uiSchema,
       registry
     } = props;
+    const classes = useStyles();
     const { CopyButton: CopyButton2, MoveDownButton: MoveDownButton2, MoveUpButton: MoveUpButton2, RemoveButton: RemoveButton2 } = registry.templates.ButtonTemplates;
     return /* @__PURE__ */ jsxRuntime.jsxs(reactMigrationV0V9.Flex, { vAlign: "end", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(reactMigrationV0V9.Flex, { children }),
+      /* @__PURE__ */ jsxRuntime.jsx(reactMigrationV0V9.Flex, { fill: true, className: classes.arrayFieldItem, children }),
       hasToolbar && /* @__PURE__ */ jsxRuntime.jsxs(reactMigrationV0V9.Flex, { style: { marginLeft: "8px" }, children: [
         (hasMoveUp || hasMoveDown) && /* @__PURE__ */ jsxRuntime.jsx(
           MoveUpButton2,
@@ -73,14 +81,14 @@
     const { translateString } = registry;
     return /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Button, { ...props, icon: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.AddRegular, {}), title: translateString(utils.TranslatableString.AddItemButton) });
   }
-  var useStyles = reactComponents.makeStyles({
+  var useStyles2 = reactComponents.makeStyles({
     arrayItemList: {
       ...reactComponents.shorthands.gap("12px")
     }
   });
   function ArrayFieldTemplate(props) {
     const { canAdd, disabled, idSchema, uiSchema, items, onAddClick, readonly, registry, required, schema, title } = props;
-    const classes = useStyles();
+    const classes = useStyles2();
     const uiOptions = utils.getUiOptions(uiSchema);
     const ArrayFieldDescriptionTemplate = utils.getTemplate(
       "ArrayFieldDescriptionTemplate",
@@ -137,7 +145,7 @@
       ] }, `array-item-list-${idSchema.$id}`)
     ] });
   }
-  var useStyles2 = reactComponents.makeStyles({
+  var useStyles3 = reactComponents.makeStyles({
     input: {
       width: "100%"
     },
@@ -166,7 +174,7 @@
       options,
       schema
     } = props;
-    const classes = useStyles2();
+    const classes = useStyles3();
     const inputProps = utils.getInputProps(schema, type, options);
     const _onChange = ({ target: { value: value2 } }) => onChange(value2 === "" ? options.emptyValue : value2);
     const _onBlur = ({ target: { value: value2 } }) => onBlur(id, value2);
@@ -203,7 +211,7 @@
       }) })
     ] });
   }
-  var useStyles3 = reactComponents.makeStyles({
+  var useStyles4 = reactComponents.makeStyles({
     label: {
       marginTop: reactComponents.tokens.spacingVerticalS,
       marginBottom: reactComponents.tokens.spacingVerticalM
@@ -211,13 +219,13 @@
   });
   function DescriptionField(props) {
     const { id, description } = props;
-    const classes = useStyles3();
+    const classes = useStyles4();
     if (description) {
       return /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Text, { block: true, id, className: classes.label, children: description });
     }
     return null;
   }
-  var useStyles4 = reactComponents.makeStyles({
+  var useStyles5 = reactComponents.makeStyles({
     errorCard: {
       backgroundColor: reactComponents.tokens.colorStatusDangerBackground1,
       marginBottom: reactComponents.tokens.spacingVerticalL,
@@ -235,7 +243,7 @@
     registry
   }) {
     const { translateString } = registry;
-    const classes = useStyles4();
+    const classes = useStyles5();
     return /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Card, { appearance: "outline", className: classes.errorCard, children: [
       /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Text, { as: "h6", size: 400, className: classes.errorTitle, children: translateString(utils.TranslatableString.ErrorsLabel) }),
       /* @__PURE__ */ jsxRuntime.jsx("ul", { children: errors.map((error, i) => {
@@ -299,7 +307,7 @@
       }
     );
   }
-  var useStyles5 = reactComponents.makeStyles({
+  var useStyles6 = reactComponents.makeStyles({
     list: { marginTop: 0, marginBottom: 0, paddingLeft: 0, listStyleType: "none" },
     listItem: {
       paddingLeft: reactComponents.tokens.spacingHorizontalL,
@@ -310,7 +318,7 @@
   });
   function FieldErrorTemplate(props) {
     const { errors = [], idSchema } = props;
-    const classes = useStyles5();
+    const classes = useStyles6();
     if (errors.length === 0) {
       return null;
     }
@@ -451,20 +459,20 @@
       ] })
     ] });
   }
-  var useStyles6 = reactComponents.makeStyles({
+  var useStyles7 = reactComponents.makeStyles({
     buttonRow: {
       marginTop: reactComponents.tokens.spacingVerticalL
     }
   });
   function SubmitButton({ uiSchema }) {
-    const classes = useStyles6();
+    const classes = useStyles7();
     const { submitText, norender, props: submitButtonProps } = utils.getSubmitButtonOptions(uiSchema);
     if (norender) {
       return null;
     }
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.buttonRow, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Button, { appearance: "primary", type: "submit", ...submitButtonProps, children: submitText }) });
   }
-  var useStyles7 = reactComponents.makeStyles({
+  var useStyles8 = reactComponents.makeStyles({
     root: {
       marginTop: "8px",
       marginBottom: "8px"
@@ -474,13 +482,13 @@
     id,
     title
   }) {
-    const classes = useStyles7();
+    const classes = useStyles8();
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { id, className: classes.root, children: [
       /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Text, { as: "h5", size: 600, children: title }),
       /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, {})
     ] });
   }
-  var useStyles8 = reactComponents.makeStyles({
+  var useStyles9 = reactComponents.makeStyles({
     input: {
       width: "100%"
     },
@@ -505,7 +513,7 @@
       registry
     } = props;
     const { templates, translateString } = registry;
-    const classes = useStyles8();
+    const classes = useStyles9();
     const { RemoveButton: RemoveButton2 } = templates.ButtonTemplates;
     const keyLabel = translateString(utils.TranslatableString.KeyLabel, [label]);
     const additional = utils.ADDITIONAL_PROPERTY_FLAG in schema;
@@ -827,7 +835,7 @@
     );
   }
   var SelectWidget_default = SelectWidget;
-  var useStyles9 = reactComponents.makeStyles({
+  var useStyles10 = reactComponents.makeStyles({
     label: {
       paddingTop: "2px",
       paddingBottom: "2px",
@@ -852,7 +860,7 @@
       options,
       schema
     } = props;
-    const classes = useStyles9();
+    const classes = useStyles10();
     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);

package/dist/index.esm.js

@@ -3,7 +3,15 @@ import { withTheme } from "@rjsf/core";
 
 // src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx
 import { Flex } from "@fluentui/react-migration-v0-v9";
+import { makeStyles } from "@fluentui/react-components";
 import { jsx, jsxs } from "react/jsx-runtime";
+var useStyles = makeStyles({
+  arrayFieldItem: {
+    "> .form-group": {
+      width: "100%"
+    }
+  }
+});
 function ArrayFieldItemTemplate(props) {
   const {
     children,
@@ -21,9 +29,10 @@ function ArrayFieldItemTemplate(props) {
     uiSchema,
     registry
   } = props;
+  const classes = useStyles();
   const { CopyButton: CopyButton2, MoveDownButton: MoveDownButton2, MoveUpButton: MoveUpButton2, RemoveButton: RemoveButton2 } = registry.templates.ButtonTemplates;
   return /* @__PURE__ */ jsxs(Flex, { vAlign: "end", children: [
-    /* @__PURE__ */ jsx(Flex, { children }),
+    /* @__PURE__ */ jsx(Flex, { fill: true, className: classes.arrayFieldItem, children }),
     hasToolbar && /* @__PURE__ */ jsxs(Flex, { style: { marginLeft: "8px" }, children: [
       (hasMoveUp || hasMoveDown) && /* @__PURE__ */ jsx(
         MoveUpButton2,
@@ -80,21 +89,21 @@ function AddButton({
 }
 
 // src/ArrayFieldTemplate/ArrayFieldTemplate.tsx
-import { makeStyles, shorthands } from "@fluentui/react-components";
+import { makeStyles as makeStyles2, 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({
+var useStyles2 = makeStyles2({
   arrayItemList: {
     ...shorthands.gap("12px")
   }
 });
 function ArrayFieldTemplate(props) {
   const { canAdd, disabled, idSchema, uiSchema, items, onAddClick, readonly, registry, required, schema, title } = props;
-  const classes = useStyles();
+  const classes = useStyles2();
   const uiOptions = getUiOptions(uiSchema);
   const ArrayFieldDescriptionTemplate = getTemplate(
     "ArrayFieldDescriptionTemplate",
@@ -153,7 +162,7 @@ function ArrayFieldTemplate(props) {
 }
 
 // src/BaseInputTemplate/BaseInputTemplate.tsx
-import { Input, Label, makeStyles as makeStyles2 } from "@fluentui/react-components";
+import { Input, Label, makeStyles as makeStyles3 } from "@fluentui/react-components";
 import {
   ariaDescribedByIds,
   examplesId,
@@ -161,7 +170,7 @@ import {
   labelValue
 } from "@rjsf/utils";
 import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-var useStyles2 = makeStyles2({
+var useStyles3 = makeStyles3({
   input: {
     width: "100%"
   },
@@ -190,7 +199,7 @@ function BaseInputTemplate(props) {
     options,
     schema
   } = props;
-  const classes = useStyles2();
+  const classes = useStyles3();
   const inputProps = getInputProps(schema, type, options);
   const _onChange = ({ target: { value: value2 } }) => onChange(value2 === "" ? options.emptyValue : value2);
   const _onBlur = ({ target: { value: value2 } }) => onBlur(id, value2);
@@ -229,9 +238,9 @@ function BaseInputTemplate(props) {
 }
 
 // src/DescriptionField/DescriptionField.tsx
-import { Text, makeStyles as makeStyles3, tokens } from "@fluentui/react-components";
+import { Text, makeStyles as makeStyles4, tokens } from "@fluentui/react-components";
 import { jsx as jsx5 } from "react/jsx-runtime";
-var useStyles3 = makeStyles3({
+var useStyles4 = makeStyles4({
   label: {
     marginTop: tokens.spacingVerticalS,
     marginBottom: tokens.spacingVerticalM
@@ -239,7 +248,7 @@ var useStyles3 = makeStyles3({
 });
 function DescriptionField(props) {
   const { id, description } = props;
-  const classes = useStyles3();
+  const classes = useStyles4();
   if (description) {
     return /* @__PURE__ */ jsx5(Text, { block: true, id, className: classes.label, children: description });
   }
@@ -247,10 +256,10 @@ function DescriptionField(props) {
 }
 
 // src/ErrorList/ErrorList.tsx
-import { Card, Text as Text2, makeStyles as makeStyles4, shorthands as shorthands2, tokens as tokens2 } from "@fluentui/react-components";
+import { Card, Text as Text2, makeStyles as makeStyles5, 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({
+var useStyles5 = makeStyles5({
   errorCard: {
     backgroundColor: tokens2.colorStatusDangerBackground1,
     marginBottom: tokens2.spacingVerticalL,
@@ -268,7 +277,7 @@ function ErrorList({
   registry
 }) {
   const { translateString } = registry;
-  const classes = useStyles4();
+  const classes = useStyles5();
   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) => {
@@ -340,10 +349,10 @@ function RemoveButton(props) {
 }
 
 // src/FieldErrorTemplate/FieldErrorTemplate.tsx
-import { makeStyles as makeStyles5, tokens as tokens3 } from "@fluentui/react-components";
+import { makeStyles as makeStyles6, tokens as tokens3 } from "@fluentui/react-components";
 import { errorId } from "@rjsf/utils";
 import { jsx as jsx8 } from "react/jsx-runtime";
-var useStyles5 = makeStyles5({
+var useStyles6 = makeStyles6({
   list: { marginTop: 0, marginBottom: 0, paddingLeft: 0, listStyleType: "none" },
   listItem: {
     paddingLeft: tokens3.spacingHorizontalL,
@@ -354,7 +363,7 @@ var useStyles5 = makeStyles5({
 });
 function FieldErrorTemplate(props) {
   const { errors = [], idSchema } = props;
-  const classes = useStyles5();
+  const classes = useStyles6();
   if (errors.length === 0) {
     return null;
   }
@@ -522,15 +531,15 @@ function ObjectFieldTemplate(props) {
 
 // src/SubmitButton/SubmitButton.tsx
 import { getSubmitButtonOptions } from "@rjsf/utils";
-import { Button as Button3, makeStyles as makeStyles6, tokens as tokens4 } from "@fluentui/react-components";
+import { Button as Button3, makeStyles as makeStyles7, tokens as tokens4 } from "@fluentui/react-components";
 import { jsx as jsx12 } from "react/jsx-runtime";
-var useStyles6 = makeStyles6({
+var useStyles7 = makeStyles7({
   buttonRow: {
     marginTop: tokens4.spacingVerticalL
   }
 });
 function SubmitButton({ uiSchema }) {
-  const classes = useStyles6();
+  const classes = useStyles7();
   const { submitText, norender, props: submitButtonProps } = getSubmitButtonOptions(uiSchema);
   if (norender) {
     return null;
@@ -539,9 +548,9 @@ function SubmitButton({ uiSchema }) {
 }
 
 // src/TitleField/TitleField.tsx
-import { Text as Text4, Divider, makeStyles as makeStyles7 } from "@fluentui/react-components";
+import { Text as Text4, Divider, makeStyles as makeStyles8 } from "@fluentui/react-components";
 import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
-var useStyles7 = makeStyles7({
+var useStyles8 = makeStyles8({
   root: {
     marginTop: "8px",
     marginBottom: "8px"
@@ -551,7 +560,7 @@ function TitleField({
   id,
   title
 }) {
-  const classes = useStyles7();
+  const classes = useStyles8();
   return /* @__PURE__ */ jsxs7("div", { id, className: classes.root, children: [
     /* @__PURE__ */ jsx13(Text4, { as: "h5", size: 600, children: title }),
     /* @__PURE__ */ jsx13(Divider, {})
@@ -563,10 +572,10 @@ 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 { Field as Field2, Input as Input2, makeStyles as makeStyles9 } 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({
+var useStyles9 = makeStyles9({
   input: {
     width: "100%"
   },
@@ -591,7 +600,7 @@ function WrapIfAdditionalTemplate(props) {
     registry
   } = props;
   const { templates, translateString } = registry;
-  const classes = useStyles8();
+  const classes = useStyles9();
   const { RemoveButton: RemoveButton2 } = templates.ButtonTemplates;
   const keyLabel = translateString(TranslatableString4.KeyLabel, [label]);
   const additional = ADDITIONAL_PROPERTY_FLAG in schema;
@@ -969,13 +978,13 @@ function SelectWidget({
 var SelectWidget_default = SelectWidget;
 
 // src/TextareaWidget/TextareaWidget.tsx
-import { Label as Label5, Textarea, makeStyles as makeStyles9 } from "@fluentui/react-components";
+import { Label as Label5, Textarea, makeStyles as makeStyles10 } 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({
+var useStyles10 = makeStyles10({
   label: {
     paddingTop: "2px",
     paddingBottom: "2px",
@@ -1000,7 +1009,7 @@ function TextareaWidget(props) {
     options,
     schema
   } = props;
-  const classes = useStyles9();
+  const classes = useStyles10();
   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);