@bookinglab/booking-ui-react 1.12.1 → 1.13.0

package/dist/index.mjs

@@ -18,7 +18,8 @@ function DateInputGroup({
   itemCls,
   sublabelCls,
   dateInputCls,
-  renderHelpText,
+  helpTextAbove,
+  helpTextBelow,
   renderError
 }) {
   const parseValue = (raw) => {
@@ -58,6 +59,7 @@ function DateInputGroup({
       question.name,
       question.required && /* @__PURE__ */ jsx("span", { className: "text-red-500 ml-1", "aria-hidden": "true", children: "*" })
     ] }),
+    helpTextAbove,
     /* @__PURE__ */ jsxs("div", { className: groupCls, role: "group", children: [
       /* @__PURE__ */ jsxs("div", { className: itemCls, children: [
         /* @__PURE__ */ jsx("label", { htmlFor: dayId, className: sublabelCls, children: "Day" }),
@@ -114,7 +116,7 @@ function DateInputGroup({
         )
       ] })
     ] }),
-    renderHelpText(),
+    helpTextBelow,
     renderError()
   ] });
 }
@@ -123,7 +125,8 @@ function FormField({
   value,
   error,
   onChange,
-  classNames
+  classNames,
+  displayHelpTextBelowLabel = false
 }) {
   const inputId = `question-${question.id}`;
   const errorId = `${inputId}-error`;
@@ -156,6 +159,8 @@ function FormField({
       }
     );
   };
+  const helpTextAbove = displayHelpTextBelowLabel ? renderHelpText() : null;
+  const helpTextBelow = displayHelpTextBelowLabel ? null : renderHelpText();
   const renderError = () => {
     if (!error) return null;
     return /* @__PURE__ */ jsx("p", { id: errorId, className: classNames?.errorText ?? defaultErrorText, role: "alert", children: error });
@@ -174,6 +179,7 @@ function FormField({
     case "text_field":
       return /* @__PURE__ */ jsxs("div", { className: classNames?.fieldWrapper ?? defaultFieldWrapper, children: [
         renderLabel(),
+        helpTextAbove,
         /* @__PURE__ */ jsx(
           "input",
           {
@@ -186,12 +192,13 @@ function FormField({
             ...ariaProps
           }
         ),
-        renderHelpText(),
+        helpTextBelow,
         renderError()
       ] });
     case "text_area":
       return /* @__PURE__ */ jsxs("div", { className: classNames?.fieldWrapper ?? defaultFieldWrapper, children: [
         renderLabel(),
+        helpTextAbove,
         /* @__PURE__ */ jsx(
           "textarea",
           {
@@ -204,12 +211,13 @@ function FormField({
             ...ariaProps
           }
         ),
-        renderHelpText(),
+        helpTextBelow,
         renderError()
       ] });
     case "select":
       return /* @__PURE__ */ jsxs("div", { className: classNames?.fieldWrapper ?? defaultFieldWrapper, children: [
         renderLabel(),
+        helpTextAbove,
         /* @__PURE__ */ jsxs(
           "select",
           {
@@ -224,12 +232,13 @@ function FormField({
             ]
           }
         ),
-        renderHelpText(),
+        helpTextBelow,
         renderError()
       ] });
     case "radio":
       return /* @__PURE__ */ jsxs("div", { className: classNames?.fieldWrapper ?? defaultFieldWrapper, children: [
         renderLabel(),
+        helpTextAbove,
         /* @__PURE__ */ jsx(
           "div",
           {
@@ -257,7 +266,7 @@ function FormField({
             })
           }
         ),
-        renderHelpText(),
+        helpTextBelow,
         renderError()
       ] });
     case "date": {
@@ -283,7 +292,8 @@ function FormField({
           itemCls,
           sublabelCls,
           dateInputCls,
-          renderHelpText,
+          helpTextAbove,
+          helpTextBelow,
           renderError
         }
       );
@@ -291,6 +301,7 @@ function FormField({
     case "number":
       return /* @__PURE__ */ jsxs("div", { className: classNames?.fieldWrapper ?? defaultFieldWrapper, children: [
         renderLabel(),
+        helpTextAbove,
         /* @__PURE__ */ jsx(
           "input",
           {
@@ -305,11 +316,12 @@ function FormField({
             ...ariaProps
           }
         ),
-        renderHelpText(),
+        helpTextBelow,
         renderError()
       ] });
     case "check":
       return /* @__PURE__ */ jsxs("div", { className: classNames?.fieldWrapper ?? defaultFieldWrapper, children: [
+        helpTextAbove,
         /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
           /* @__PURE__ */ jsx(
             "input",
@@ -327,7 +339,7 @@ function FormField({
             question.required && /* @__PURE__ */ jsx("span", { className: "text-red-500 ml-1", "aria-hidden": "true", children: "*" })
           ] })
         ] }),
-        renderHelpText(),
+        helpTextBelow,
         renderError()
       ] });
     default:
@@ -339,6 +351,7 @@ function BookingForm({
   onSubmit,
   submitLabel = "Submit",
   isAdmin = false,
+  displayHelpTextBelowLabel = false,
   className = "",
   labelClassName,
   classNames: classNamesProp
@@ -535,7 +548,8 @@ function BookingForm({
         value: values[question.id],
         error: touched[question.id] ? errors[question.id] : void 0,
         onChange: (value) => handleChange(question.id, value),
-        classNames
+        classNames,
+        displayHelpTextBelowLabel
       },
       question.id
     )),