@rjsf/fluentui-rc 6.0.0-alpha.0 → 6.0.0-beta.2

package/README.md

@@ -63,7 +63,7 @@ Fluent UI React Components (v9) theme, fields and widgets for `react-jsonschema-
 - `@rjsf/core >= 2.0.0`
 
 ```bash
-yarn add @fluentui/react-components @rjsf/core @rjsf/utils @rjsf/validator-ajv6
+yarn add @fluentui/react-components @rjsf/core @rjsf/utils @rjsf/validator-ajv8
 ```
 
 ### Installation

package/dist/core.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  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';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@rjsf/core'), require('@rjsf/utils'), require('@fluentui/react-migration-v0-v9'), require('@fluentui/react-components'), require('react/jsx-runtime'), require('@fluentui/react-icons'), require('react')) :
+  typeof define === 'function' && define.amd ? define(['exports', '@rjsf/core', '@rjsf/utils', '@fluentui/react-migration-v0-v9', '@fluentui/react-components', 'react/jsx-runtime', '@fluentui/react-icons', 'react'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.JSONSchemaForm = {}, global.core, global.utils, global.reactMigrationV0V9, global.reactComponents, global.jsxRuntime, global.reactIcons, global.react));
+})(this, (function (exports, core, utils, reactMigrationV0V9, reactComponents, jsxRuntime, reactIcons, react) { 'use strict';
 
   // src/FluentForm/FluentForm.ts
   var useStyles = reactComponents.makeStyles({
@@ -13,64 +13,17 @@
     }
   });
   function ArrayFieldItemTemplate(props) {
-    const {
-      children,
-      disabled,
-      hasToolbar,
-      hasCopy,
-      hasMoveDown,
-      hasMoveUp,
-      hasRemove,
-      index,
-      onCopyIndexClick,
-      onDropIndexClick,
-      onReorderClick,
-      readonly,
-      uiSchema,
-      registry
-    } = props;
     const classes = useStyles();
-    const { CopyButton: CopyButton2, MoveDownButton: MoveDownButton2, MoveUpButton: MoveUpButton2, RemoveButton: RemoveButton2 } = registry.templates.ButtonTemplates;
+    const { children, buttonsProps, hasToolbar, uiSchema, registry } = props;
+    const uiOptions = utils.getUiOptions(uiSchema);
+    const ArrayFieldItemButtonsTemplate = utils.getTemplate(
+      "ArrayFieldItemButtonsTemplate",
+      registry,
+      uiOptions
+    );
     return /* @__PURE__ */ jsxRuntime.jsxs(reactMigrationV0V9.Flex, { vAlign: "end", 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,
-          {
-            disabled: disabled || readonly || !hasMoveUp,
-            onClick: onReorderClick(index, index - 1),
-            uiSchema,
-            registry
-          }
-        ),
-        (hasMoveUp || hasMoveDown) && /* @__PURE__ */ jsxRuntime.jsx(
-          MoveDownButton2,
-          {
-            disabled: disabled || readonly || !hasMoveDown,
-            onClick: onReorderClick(index, index + 1),
-            uiSchema,
-            registry
-          }
-        ),
-        hasCopy && /* @__PURE__ */ jsxRuntime.jsx(
-          CopyButton2,
-          {
-            disabled: disabled || readonly,
-            onClick: onCopyIndexClick(index),
-            uiSchema,
-            registry
-          }
-        ),
-        hasRemove && /* @__PURE__ */ jsxRuntime.jsx(
-          RemoveButton2,
-          {
-            disabled: disabled || readonly,
-            onClick: onDropIndexClick(index),
-            uiSchema,
-            registry
-          }
-        )
-      ] })
+      hasToolbar && /* @__PURE__ */ jsxRuntime.jsx(reactMigrationV0V9.Flex, { style: { marginLeft: "8px" }, children: /* @__PURE__ */ jsxRuntime.jsx(ArrayFieldItemButtonsTemplate, { ...buttonsProps }) })
     ] });
   }
   function AddButton({
@@ -135,7 +88,8 @@
         canAdd && /* @__PURE__ */ jsxRuntime.jsx(reactMigrationV0V9.Flex, { hAlign: "end", children: /* @__PURE__ */ jsxRuntime.jsx(
           AddButton2,
           {
-            className: "array-item-add",
+            id: utils.buttonId(idSchema, "add"),
+            className: "rjsf-array-item-add",
             onClick: onAddClick,
             disabled: disabled || readonly,
             uiSchema,
@@ -218,12 +172,12 @@
     }
   });
   function DescriptionField(props) {
-    const { id, description } = props;
+    const { id, description, registry, uiSchema } = props;
     const classes = useStyles4();
-    if (description) {
-      return /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Text, { block: true, id, className: classes.label, children: description });
+    if (!description) {
+      return null;
     }
-    return null;
+    return /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Text, { block: true, id, className: classes.label, children: /* @__PURE__ */ jsxRuntime.jsx(core.RichDescription, { description, registry, uiSchema }) });
   }
   var useStyles5 = reactComponents.makeStyles({
     errorCard: {
@@ -391,6 +345,18 @@
       }
     );
   }
+  function GridTemplate(props) {
+    const { children, column, columns, rows, style, ...rest } = props;
+    if (columns || rows) {
+      const styles = {
+        ...style,
+        ...rows ? reactMigrationV0V9.grid.rows(rows) : void 0,
+        ...columns ? reactMigrationV0V9.grid.columns(columns) : void 0
+      };
+      return /* @__PURE__ */ jsxRuntime.jsx(reactMigrationV0V9.GridShim, { style: styles, ...rest, children });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { style, ...rest, children });
+  }
   function ObjectFieldTemplate(props) {
     const {
       description,
@@ -449,7 +415,8 @@
         utils.canExpand(schema, uiSchema, formData) && /* @__PURE__ */ jsxRuntime.jsx(reactMigrationV0V9.Flex, { hAlign: "end", children: /* @__PURE__ */ jsxRuntime.jsx(
           AddButton2,
           {
-            className: "object-property-expand",
+            id: utils.buttonId(idSchema, "add"),
+            className: "rjsf-object-property-expand",
             onClick: onAddClick(schema),
             disabled: disabled || readonly,
             uiSchema,
@@ -547,7 +514,9 @@
       /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
         RemoveButton2,
         {
+          id: utils.buttonId(id, "remove"),
           iconType: "default",
+          className: "rjsf-object-property-remove",
           style: btnStyle,
           disabled: disabled || readonly,
           onClick: onDropPropertyClick(label),
@@ -577,6 +546,7 @@
       FieldErrorTemplate,
       FieldHelpTemplate,
       FieldTemplate,
+      GridTemplate,
       ObjectFieldTemplate,
       TitleFieldTemplate: TitleField,
       WrapIfAdditionalTemplate
@@ -611,7 +581,7 @@
     const _onFocus = ({ target }) => onFocus(id, target && target.value);
     const description = options.description ?? schema.description;
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      !hideLabel && !!description && /* @__PURE__ */ jsxRuntime.jsx(
+      !hideLabel && description && /* @__PURE__ */ jsxRuntime.jsx(
         DescriptionFieldTemplate,
         {
           id: utils.descriptionId(id),
@@ -704,7 +674,7 @@
     onBlur,
     onFocus
   }) {
-    const { enumOptions, enumDisabled, emptyValue } = options;
+    const { enumOptions, enumDisabled, emptyValue, inline } = options;
     const _onChange = (_, data) => onChange(utils.enumOptionsValueForIndex(data.value, enumOptions, emptyValue));
     const _onBlur = ({ target }) => onBlur(id, utils.enumOptionsValueForIndex(target && target.value, enumOptions, emptyValue));
     const _onFocus = ({ target }) => onFocus(id, utils.enumOptionsValueForIndex(target && target.value, enumOptions, emptyValue));
@@ -719,6 +689,7 @@
         {
           id,
           name: id,
+          layout: inline ? "horizontal" : "vertical",
           value: selectedIndex,
           onChange: _onChange,
           onBlur: _onBlur,
@@ -936,14 +907,14 @@
   };
 
   // src/index.ts
-  var src_default = FluentForm_default;
+  var index_default = FluentForm_default;
 
   exports.Form = FluentForm_default;
   exports.Templates = Templates_default;
   exports.Theme = Theme_default;
   exports.Widgets = Widgets_default;
   exports.__createFluentUIRCFrameProvider = __createFluentUIRCFrameProvider;
-  exports.default = src_default;
+  exports.default = index_default;
   exports.generateForm = generateForm;
   exports.generateTemplates = generateTemplates;
   exports.generateTheme = generateTheme;