@rjsf/core 6.0.2 → 6.1.0

package/dist/core.umd.js

@@ -247,7 +247,9 @@
       handleReorderItems
     } = props;
     const {
-      fields: { ArraySchemaField, SchemaField: SchemaField2 }
+      schemaUtils,
+      fields: { ArraySchemaField, SchemaField: SchemaField2 },
+      globalUiOptions
     } = registry;
     const fieldPathId = utils.useDeepCompareMemo(itemFieldPathId);
     const ItemSchemaField = ArraySchemaField || SchemaField2;
@@ -256,6 +258,9 @@
       registry,
       uiOptions
     );
+    const displayLabel = schemaUtils.getDisplayLabel(itemSchema, itemUiSchema, globalUiOptions);
+    const { description } = utils.getUiOptions(itemUiSchema);
+    const hasDescription = !!description || !!itemSchema.description;
     const { orderable = true, removable = true, copyable = false } = uiOptions;
     const has4 = {
       moveUp: orderable && canMoveUp,
@@ -349,7 +354,9 @@
       registry,
       schema: itemSchema,
       uiSchema: itemUiSchema,
-      parentUiSchema
+      parentUiSchema,
+      displayLabel,
+      hasDescription
     };
     return /* @__PURE__ */ jsxRuntime.jsx(ArrayFieldItemTemplate2, { ...templateProps });
   }
@@ -2301,9 +2308,10 @@
       onFocus,
       registry,
       rawErrors,
-      hideError
+      hideError,
+      title
     } = props;
-    const { title, format } = schema;
+    const { title: schemaTitle, format } = schema;
     const { widgets: widgets2, schemaUtils, globalUiOptions } = registry;
     const enumOptions = schemaUtils.isSelect(schema) ? utils.optionsList(schema, uiSchema) : void 0;
     let defaultWidget = enumOptions ? "select" : "text";
@@ -2312,7 +2320,7 @@
     }
     const { widget = defaultWidget, placeholder = "", title: uiTitle, ...options } = utils.getUiOptions(uiSchema);
     const displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema, globalUiOptions);
-    const label = uiTitle ?? title ?? name;
+    const label = uiTitle ?? title ?? schemaTitle ?? name;
     const Widget = utils.getWidget(schema, widget, widgets2);
     const onWidgetChange = react.useCallback(
       (value, errorSchema, id) => {
@@ -2403,7 +2411,7 @@
     );
   }
   function ArrayFieldItemTemplate(props) {
-    const { children, className, buttonsProps, hasToolbar, registry, uiSchema } = props;
+    const { children, className, buttonsProps, displayLabel, hasDescription, hasToolbar, registry, uiSchema } = props;
     const uiOptions = utils.getUiOptions(uiSchema);
     const ArrayFieldItemButtonsTemplate2 = utils.getTemplate(
       "ArrayFieldItemButtonsTemplate",
@@ -2416,19 +2424,12 @@
       paddingRight: 6,
       fontWeight: "bold"
     };
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: hasToolbar ? "col-xs-9" : "col-xs-12", children }),
-      hasToolbar && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-xs-3 array-item-toolbox", children: /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          className: "btn-group",
-          style: {
-            display: "flex",
-            justifyContent: "space-around"
-          },
-          children: /* @__PURE__ */ jsxRuntime.jsx(ArrayFieldItemButtonsTemplate2, { ...buttonsProps, style: btnStyle })
-        }
-      ) })
+    const margin = hasDescription ? 31 : 9;
+    const containerStyle = { display: "flex", alignItems: displayLabel ? "center" : "baseline" };
+    const toolbarStyle = { display: "flex", justifyContent: "flex-end", marginTop: displayLabel ? `${margin}px` : 0 };
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, style: containerStyle, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: hasToolbar ? "col-xs-9 col-md-10 col-xl-11" : "col-xs-12", children }),
+      hasToolbar && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-xs-3 col-md-2 col-xl-1 array-item-toolbox", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "btn-group", style: toolbarStyle, children: /* @__PURE__ */ jsxRuntime.jsx(ArrayFieldItemButtonsTemplate2, { ...buttonsProps, style: btnStyle }) }) })
     ] });
   }
   function ArrayFieldItemButtonsTemplate(props) {
@@ -2708,19 +2709,25 @@
     registry
   }) {
     const { translateString } = registry;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "row", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: `col-xs-3 col-xs-offset-9 text-right ${className}`, children: /* @__PURE__ */ jsxRuntime.jsx(
-      IconButton,
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "row", children: /* @__PURE__ */ jsxRuntime.jsx(
+      "p",
       {
-        id,
-        iconType: "info",
-        icon: "plus",
-        className: "btn-add col-xs-12",
-        title: translateString(utils.TranslatableString.AddButton),
-        onClick,
-        disabled,
-        registry
+        className: `col-xs-4 col-sm-2 col-lg-1 col-xs-offset-8 col-sm-offset-10 col-lg-offset-11 text-right ${className}`,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          IconButton,
+          {
+            id,
+            iconType: "info",
+            icon: "plus",
+            className: "btn-add col-xs-12",
+            title: translateString(utils.TranslatableString.AddButton),
+            onClick,
+            disabled,
+            registry
+          }
+        )
       }
-    ) }) });
+    ) });
   }
 
   // src/components/templates/ButtonTemplates/index.ts
@@ -2824,16 +2831,26 @@
       return /* @__PURE__ */ jsxRuntime.jsx("li", { className: "text-danger", children: error }, index);
     }) }) });
   }
+  var TEST_IDS2 = utils.getTestIds();
+  function RichHelp({
+    help,
+    registry,
+    uiSchema = {}
+  }) {
+    const { globalUiOptions } = registry;
+    const uiOptions = utils.getUiOptions(uiSchema, globalUiOptions);
+    if (uiOptions.enableMarkdownInHelp && typeof help === "string") {
+      return /* @__PURE__ */ jsxRuntime.jsx(Markdown, { options: { disableParsingRawHTML: true }, "data-testid": TEST_IDS2.markdown, children: help });
+    }
+    return help;
+  }
+  RichHelp.TEST_IDS = TEST_IDS2;
   function FieldHelpTemplate(props) {
-    const { fieldPathId, help } = props;
+    const { fieldPathId, help, uiSchema, registry } = props;
     if (!help) {
       return null;
     }
-    const id = utils.helpId(fieldPathId);
-    if (typeof help === "string") {
-      return /* @__PURE__ */ jsxRuntime.jsx("p", { id, className: "help-block", children: help });
-    }
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { id, className: "help-block", children: help });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { id: utils.helpId(fieldPathId), className: "help-block", children: /* @__PURE__ */ jsxRuntime.jsx(RichHelp, { help, registry, uiSchema }) });
   }
   function GridTemplate(props) {
     const { children, column, className, ...rest } = props;
@@ -2975,9 +2992,11 @@
       classNames,
       style,
       disabled,
+      displayLabel,
       label,
       onKeyRenameBlur,
       onRemoveProperty,
+      rawDescription,
       readonly,
       required,
       schema,
@@ -2991,6 +3010,7 @@
     const { RemoveButton: RemoveButton2 } = templates2.ButtonTemplates;
     const keyLabel = translateString(utils.TranslatableString.KeyLabel, [label]);
     const additional = utils.ADDITIONAL_PROPERTY_FLAG in schema;
+    const hasDescription = !!rawDescription;
     const classNamesList = ["form-group", classNames];
     if (!hideError && rawErrors && rawErrors.length > 0) {
       classNamesList.push("has-error has-danger");
@@ -2999,9 +3019,11 @@
     if (!additional) {
       return /* @__PURE__ */ jsxRuntime.jsx("div", { className: uiClassNames, style, children });
     }
+    const margin = hasDescription ? 46 : 26;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: uiClassNames, style, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "row", children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-xs-5 form-additional", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "form-group", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Label, { label: keyLabel, required, id: `${id}-key` }),
+        displayLabel && /* @__PURE__ */ jsxRuntime.jsx(Label, { label: keyLabel, required, id: `${id}-key` }),
+        displayLabel && rawDescription && /* @__PURE__ */ jsxRuntime.jsx("div", { children: "\xA0" }),
         /* @__PURE__ */ jsxRuntime.jsx(
           "input",
           {
@@ -3014,7 +3036,7 @@
         )
       ] }) }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "form-additional form-group col-xs-5", children }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-xs-2", children: /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-xs-2", style: { marginTop: displayLabel ? `${margin}px` : void 0 }, children: /* @__PURE__ */ jsxRuntime.jsx(
         RemoveButton2,
         {
           id: utils.buttonId(id, "remove"),
@@ -4596,6 +4618,7 @@
   var index_default = Form;
 
   exports.RichDescription = RichDescription;
+  exports.RichHelp = RichHelp;
   exports.default = index_default;
   exports.getDefaultRegistry = getDefaultRegistry;
   exports.getTestRegistry = getTestRegistry;