@rjsf/chakra-ui 6.0.2 → 6.1.1

package/dist/chakra-ui.esm.js

@@ -355,14 +355,14 @@ function FieldErrorTemplate(props) {
 // src/FieldHelpTemplate/FieldHelpTemplate.tsx
 import { Text as Text2 } from "@chakra-ui/react";
 import { helpId } from "@rjsf/utils";
+import { RichHelp } from "@rjsf/core";
 import { jsx as jsx13 } from "react/jsx-runtime";
 function FieldHelpTemplate(props) {
-  const { fieldPathId, help } = props;
+  const { fieldPathId, help, uiSchema, registry } = props;
   if (!help) {
     return null;
   }
-  const id = helpId(fieldPathId);
-  return /* @__PURE__ */ jsx13(Text2, { id, children: help });
+  return /* @__PURE__ */ jsx13(Text2, { as: "sup", fontSize: "md", id: helpId(fieldPathId), children: /* @__PURE__ */ jsx13(RichHelp, { help, registry, uiSchema }) });
 }
 
 // src/FieldTemplate/FieldTemplate.tsx
@@ -413,6 +413,8 @@ function FieldTemplate(props) {
       disabled,
       id,
       label,
+      displayLabel,
+      rawDescription,
       onKeyRename,
       onKeyRenameBlur,
       onRemoveProperty,
@@ -618,10 +620,12 @@ function WrapIfAdditionalTemplate(props) {
     classNames,
     style,
     disabled,
+    displayLabel,
     id,
     label,
     onRemoveProperty,
     onKeyRenameBlur,
+    rawDescription,
     readonly,
     registry,
     required,
@@ -630,37 +634,50 @@ function WrapIfAdditionalTemplate(props) {
   } = props;
   const { templates, translateString } = registry;
   const { RemoveButton: RemoveButton2 } = templates.ButtonTemplates;
-  const keyLabel = translateString(TranslatableString4.KeyLabel, [label]);
+  const keyLabel = displayLabel ? translateString(TranslatableString4.KeyLabel, [label]) : void 0;
   const additional = ADDITIONAL_PROPERTY_FLAG in schema;
+  const hasDescription = !!rawDescription;
+  const margin = hasDescription ? 58 : 22;
   if (!additional) {
     return /* @__PURE__ */ jsx21("div", { className: classNames, style, children });
   }
-  return /* @__PURE__ */ jsxs11(Grid4, { className: classNames, style, alignItems: "center", gap: 2, children: [
-    /* @__PURE__ */ jsx21(GridItem4, { children: /* @__PURE__ */ jsx21(Field, { required, label: keyLabel, children: /* @__PURE__ */ jsx21(
-      Input2,
-      {
-        defaultValue: label,
-        disabled: disabled || readonly,
-        id: `${id}-key`,
-        name: `${id}-key`,
-        onBlur: !readonly ? onKeyRenameBlur : void 0,
-        type: "text",
-        mb: 1
-      }
-    ) }) }),
-    /* @__PURE__ */ jsx21(GridItem4, { children }),
-    /* @__PURE__ */ jsx21(GridItem4, { children: /* @__PURE__ */ jsx21(
-      RemoveButton2,
-      {
-        id: buttonId3(id, "remove"),
-        className: "rjsf-object-property-remove",
-        disabled: disabled || readonly,
-        onClick: onRemoveProperty,
-        uiSchema,
-        registry
-      }
-    ) })
-  ] }, `${id}-key`);
+  return /* @__PURE__ */ jsxs11(
+    Grid4,
+    {
+      templateColumns: "repeat(11, 1fr)",
+      className: classNames,
+      style,
+      alignItems: "center",
+      gap: 2,
+      children: [
+        /* @__PURE__ */ jsx21(GridItem4, { colSpan: 5, style: { marginTop: hasDescription ? "36px" : void 0 }, children: /* @__PURE__ */ jsx21(Field, { required, label: keyLabel, children: /* @__PURE__ */ jsx21(
+          Input2,
+          {
+            defaultValue: label,
+            disabled: disabled || readonly,
+            id: `${id}-key`,
+            name: `${id}-key`,
+            onBlur: !readonly ? onKeyRenameBlur : void 0,
+            type: "text",
+            mb: 1
+          }
+        ) }) }),
+        /* @__PURE__ */ jsx21(GridItem4, { colSpan: 5, children }),
+        /* @__PURE__ */ jsx21(GridItem4, { justifySelf: "flex-end", style: { marginTop: displayLabel ? `${margin}px` : void 0 }, children: /* @__PURE__ */ jsx21(
+          RemoveButton2,
+          {
+            id: buttonId3(id, "remove"),
+            className: "rjsf-object-property-remove",
+            disabled: disabled || readonly,
+            onClick: onRemoveProperty,
+            uiSchema,
+            registry
+          }
+        ) })
+      ]
+    },
+    `${id}-key`
+  );
 }
 
 // src/Templates/Templates.ts