@rjsf/primereact 6.1.2 → 6.2.3

package/dist/primereact.esm.js

@@ -69,6 +69,9 @@ function ArrayFieldTemplate(props) {
     title,
     registry,
     required,
+    // Destructure the following props out so that they aren't put into the DOM
+    formData,
+    rawErrors,
     ...rest
   } = props;
   const uiOptions = getUiOptions2(uiSchema);
@@ -147,13 +150,14 @@ function ArrayFieldTemplate(props) {
 }
 
 // src/BaseInputTemplate/BaseInputTemplate.tsx
+import { useCallback } from "react";
 import {
   ariaDescribedByIds,
   examplesId,
   getInputProps
 } from "@rjsf/utils";
 import { InputText } from "primereact/inputtext";
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 function BaseInputTemplate(props) {
   const {
     id,
@@ -174,35 +178,47 @@ function BaseInputTemplate(props) {
     registry,
     rawErrors = []
   } = props;
+  const { ClearButton: ClearButton2 } = registry.templates.ButtonTemplates;
   const { AutoCompleteWidget: AutoCompleteWidget2 } = registry.widgets;
-  if (Array.isArray(schema.examples)) {
-    return /* @__PURE__ */ jsx4(AutoCompleteWidget2, { ...props });
-  }
   const inputProps = getInputProps(schema, type, options);
   const primeProps = options.prime || {};
   const _onChange = ({ target: { value: value2 } }) => onChange(value2 === "" ? options.emptyValue : value2);
   const _onBlur = () => onBlur && onBlur(id, value);
   const _onFocus = () => onFocus && onFocus(id, value);
-  return /* @__PURE__ */ jsx4(
-    InputText,
-    {
-      id,
-      name: htmlName || id,
-      placeholder,
-      ...primeProps,
-      ...inputProps,
-      required,
-      autoFocus: autofocus,
-      disabled: disabled || readonly,
-      list: schema.examples ? examplesId(id) : void 0,
-      value: value || value === 0 ? value : "",
-      invalid: rawErrors.length > 0,
-      onChange: onChangeOverride || _onChange,
-      onBlur: _onBlur,
-      onFocus: _onFocus,
-      "aria-describedby": ariaDescribedByIds(id, !!schema.examples)
-    }
+  const _onClear = useCallback(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      onChange(options.emptyValue ?? "");
+    },
+    [onChange, options.emptyValue]
   );
+  if (Array.isArray(schema.examples)) {
+    return /* @__PURE__ */ jsx4(AutoCompleteWidget2, { ...props });
+  }
+  return /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    /* @__PURE__ */ jsx4(
+      InputText,
+      {
+        id,
+        name: htmlName || id,
+        placeholder,
+        ...primeProps,
+        ...inputProps,
+        required,
+        autoFocus: autofocus,
+        disabled: disabled || readonly,
+        list: schema.examples ? examplesId(id) : void 0,
+        value: value || value === 0 ? value : "",
+        invalid: rawErrors.length > 0,
+        onChange: onChangeOverride || _onChange,
+        onBlur: _onBlur,
+        onFocus: _onFocus,
+        "aria-describedby": ariaDescribedByIds(id, !!schema.examples)
+      }
+    ),
+    options.allowClearTextInputs && !readonly && !disabled && value && /* @__PURE__ */ jsx4(ClearButton2, { registry, onClick: _onClear })
+  ] });
 }
 
 // src/DescriptionField/DescriptionField.tsx
@@ -220,14 +236,14 @@ function DescriptionField(props) {
 import { Message } from "primereact/message";
 import { TimesCircleIcon } from "primereact/icons/timescircle";
 import { TranslatableString as TranslatableString2 } from "@rjsf/utils";
-import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 function ErrorList({
   errors,
   registry
 }) {
   const { translateString } = registry;
-  const content = /* @__PURE__ */ jsxs3("div", { style: { display: "flex", flexDirection: "column" }, children: [
-    /* @__PURE__ */ jsxs3("div", { style: { display: "flex", flexDirection: "row", alignItems: "center", gap: "0.5rem" }, children: [
+  const content = /* @__PURE__ */ jsxs4("div", { style: { display: "flex", flexDirection: "column" }, children: [
+    /* @__PURE__ */ jsxs4("div", { style: { display: "flex", flexDirection: "row", alignItems: "center", gap: "0.5rem" }, children: [
       /* @__PURE__ */ jsx6(TimesCircleIcon, { style: { width: "1.5rem", height: "1.5rem" } }),
       /* @__PURE__ */ jsx6("div", { className: "p-message-summary", children: translateString(TranslatableString2.ErrorsLabel) })
     ] }),
@@ -283,6 +299,12 @@ function RemoveButton(props) {
   } = props;
   return /* @__PURE__ */ jsx7(IconButton, { title: translateString(TranslatableString3.RemoveButton), ...props, icon: "trash" });
 }
+function ClearButton(props) {
+  const {
+    registry: { translateString }
+  } = props;
+  return /* @__PURE__ */ jsx7(IconButton, { title: translateString(TranslatableString3.ClearButton), ...props, icon: "times" });
+}
 
 // src/FieldErrorTemplate/FieldErrorTemplate.tsx
 import { errorId } from "@rjsf/utils";
@@ -327,12 +349,12 @@ import {
 } from "@rjsf/utils";
 
 // src/util.tsx
-import { jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsxs as jsxs5 } from "react/jsx-runtime";
 function Label({ id, text, required }) {
   if (!text) {
     return null;
   }
-  return /* @__PURE__ */ jsxs4("label", { htmlFor: id, children: [
+  return /* @__PURE__ */ jsxs5("label", { htmlFor: id, children: [
     text,
     " ",
     required ? "*" : ""
@@ -340,7 +362,7 @@ function Label({ id, text, required }) {
 }
 
 // src/FieldTemplate/FieldTemplate.tsx
-import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
 function FieldTemplate(props) {
   const { children, errors, help, displayLabel, description, rawDescription, hidden, uiSchema, registry } = props;
   const uiOptions = getUiOptions3(uiSchema);
@@ -353,7 +375,7 @@ function FieldTemplate(props) {
     return /* @__PURE__ */ jsx10("div", { style: { display: "none" }, children });
   }
   const isCheckbox = uiOptions.widget === "checkbox";
-  return /* @__PURE__ */ jsx10(WrapIfAdditionalTemplate2, { ...props, children: /* @__PURE__ */ jsxs5("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem", marginBottom: "1rem" }, children: [
+  return /* @__PURE__ */ jsx10(WrapIfAdditionalTemplate2, { ...props, children: /* @__PURE__ */ jsxs6("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem", marginBottom: "1rem" }, children: [
     displayLabel && !isCheckbox && /* @__PURE__ */ jsx10(Label, { id: props.id, text: props.label, required: props.required }),
     children,
     displayLabel && rawDescription && !isCheckbox && /* @__PURE__ */ jsx10("small", { children: description }),
@@ -364,10 +386,10 @@ function FieldTemplate(props) {
 
 // src/MultiSchemaFieldTemplate/MultiSchemaFieldTemplate.tsx
 import { Fieldset as Fieldset2 } from "primereact/fieldset";
-import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
 function MultiSchemaFieldTemplate(props) {
   const { selector, optionSchemaField } = props;
-  return /* @__PURE__ */ jsxs6(Fieldset2, { children: [
+  return /* @__PURE__ */ jsxs7(Fieldset2, { children: [
     /* @__PURE__ */ jsx11("div", { style: { marginBottom: "1rem" }, children: selector }),
     optionSchemaField
   ] });
@@ -382,7 +404,7 @@ import {
   titleId,
   buttonId as buttonId2
 } from "@rjsf/utils";
-import { Fragment as Fragment2, jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
 function ObjectFieldTemplate(props) {
   const {
     description,
@@ -410,7 +432,7 @@ function ObjectFieldTemplate(props) {
   const {
     ButtonTemplates: { AddButton: AddButton2 }
   } = registry.templates;
-  return /* @__PURE__ */ jsxs7(Fragment2, { children: [
+  return /* @__PURE__ */ jsxs8(Fragment3, { children: [
     title && /* @__PURE__ */ jsx12(
       TitleFieldTemplate,
       {
@@ -497,7 +519,7 @@ function SubmitButton({ uiSchema }) {
 // src/TitleField/TitleField.tsx
 import { Divider } from "primereact/divider";
 import { getUiOptions as getUiOptions5, titleId as titleId2 } from "@rjsf/utils";
-import { jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
 function TitleField({
   id,
   title,
@@ -506,18 +528,18 @@ function TitleField({
   optionalDataControl
 }) {
   const uiOptions = getUiOptions5(uiSchema);
-  let heading = /* @__PURE__ */ jsxs8("h5", { style: { margin: 0, fontSize: id === titleId2("root") ? "1.5rem" : "1.2rem" }, children: [
+  let heading = /* @__PURE__ */ jsxs9("h5", { style: { margin: 0, fontSize: id === titleId2("root") ? "1.5rem" : "1.2rem" }, children: [
     uiOptions.title || title,
     " ",
     required ? "*" : ""
   ] });
   if (optionalDataControl) {
-    heading = /* @__PURE__ */ jsxs8("div", { style: { display: "flex" }, children: [
+    heading = /* @__PURE__ */ jsxs9("div", { style: { display: "flex" }, children: [
       /* @__PURE__ */ jsx15("div", { style: { flexGrow: 1 }, children: heading }),
       /* @__PURE__ */ jsx15("div", { style: { marginLeft: "-5px" }, children: optionalDataControl })
     ] });
   }
-  return /* @__PURE__ */ jsxs8("div", { id, children: [
+  return /* @__PURE__ */ jsxs9("div", { id, children: [
     heading,
     /* @__PURE__ */ jsx15(Divider, { pt: { root: { style: { marginTop: "0.5rem" } } } })
   ] });
@@ -530,7 +552,7 @@ import {
   TranslatableString as TranslatableString4
 } from "@rjsf/utils";
 import { InputText as InputText2 } from "primereact/inputtext";
-import { jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
 function WrapIfAdditionalTemplate({
   classNames,
   style,
@@ -556,13 +578,13 @@ function WrapIfAdditionalTemplate({
   if (!additional) {
     return /* @__PURE__ */ jsx16("div", { className: classNames, style, children });
   }
-  return /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs10(
     "div",
     {
       className: classNames,
       style: { ...style, display: "flex", alignItems: "flex-start", gap: "1rem" },
       children: [
-        /* @__PURE__ */ jsxs9("div", { style: { flex: 1 }, children: [
+        /* @__PURE__ */ jsxs10("div", { style: { flex: 1 }, children: [
           displayLabel && /* @__PURE__ */ jsx16("label", { htmlFor: `${id}-key`, style: { display: "block", marginBottom: "0.5rem" }, children: keyLabel }),
           /* @__PURE__ */ jsx16(
             InputText2,
@@ -599,16 +621,16 @@ import {
   getUiOptions as getUiOptions6,
   titleId as titleId3
 } from "@rjsf/utils";
-import { jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
 function ArrayFieldTitleTemplate({ title, uiSchema, required, fieldPathId, optionalDataControl }) {
   const uiOptions = getUiOptions6(uiSchema);
-  let heading = /* @__PURE__ */ jsxs10("h5", { id: titleId3(fieldPathId), style: { margin: 0, fontSize: "1.5rem", marginBottom: "0.2rem" }, children: [
+  let heading = /* @__PURE__ */ jsxs11("h5", { id: titleId3(fieldPathId), style: { margin: 0, fontSize: "1.5rem", marginBottom: "0.2rem" }, children: [
     uiOptions.title || title,
     " ",
     required ? "*" : ""
   ] });
   if (optionalDataControl) {
-    heading = /* @__PURE__ */ jsxs10("div", { style: { display: "flex" }, children: [
+    heading = /* @__PURE__ */ jsxs11("div", { style: { display: "flex" }, children: [
       /* @__PURE__ */ jsx17("div", { style: { flexGrow: 1 }, children: heading }),
       /* @__PURE__ */ jsx17("div", { children: optionalDataControl })
     ] });
@@ -698,7 +720,8 @@ function generateTemplates() {
       MoveDownButton,
       MoveUpButton,
       RemoveButton,
-      SubmitButton
+      SubmitButton,
+      ClearButton
     },
     DescriptionFieldTemplate: DescriptionField,
     ErrorListTemplate: ErrorList,
@@ -722,7 +745,7 @@ import {
   getInputProps as getInputProps2
 } from "@rjsf/utils";
 import { AutoComplete } from "primereact/autocomplete";
-import { Fragment as Fragment3, jsx as jsx19 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx19 } from "react/jsx-runtime";
 function AutoCompleteWidget(props) {
   const {
     id,
@@ -761,7 +784,7 @@ function AutoCompleteWidget(props) {
       placeholder,
       ...primeProps,
       ...inputProps,
-      loadingIcon: /* @__PURE__ */ jsx19(Fragment3, {}),
+      loadingIcon: /* @__PURE__ */ jsx19(Fragment4, {}),
       required,
       autoFocus: autofocus,
       disabled: disabled || readonly,
@@ -802,7 +825,7 @@ import {
   schemaRequiresTrueValue
 } from "@rjsf/utils";
 import { Checkbox } from "primereact/checkbox";
-import { Fragment as Fragment4, jsx as jsx20, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx20, jsxs as jsxs12 } from "react/jsx-runtime";
 function CheckboxWidget(props) {
   const {
     id,
@@ -833,7 +856,7 @@ function CheckboxWidget(props) {
   const _onFocus = () => onFocus && onFocus(id, value);
   const description = options.description ?? schema.description;
   const primeProps = options.prime || {};
-  return /* @__PURE__ */ jsxs11(Fragment4, { children: [
+  return /* @__PURE__ */ jsxs12(Fragment5, { children: [
     !hideLabel && !!description && /* @__PURE__ */ jsx20(
       DescriptionFieldTemplate,
       {
@@ -844,7 +867,7 @@ function CheckboxWidget(props) {
         registry
       }
     ),
-    /* @__PURE__ */ jsxs11("div", { style: { display: "flex", flexDirection: "row", gap: "0.5rem", alignItems: "center" }, children: [
+    /* @__PURE__ */ jsxs12("div", { style: { display: "flex", flexDirection: "row", gap: "0.5rem", alignItems: "center" }, children: [
       /* @__PURE__ */ jsx20(
         Checkbox,
         {
@@ -877,7 +900,7 @@ import {
   descriptionId as descriptionId3,
   getTemplate as getTemplate6
 } from "@rjsf/utils";
-import { jsx as jsx21, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
 function CheckboxesWidget(props) {
   const {
     id,
@@ -913,7 +936,7 @@ function CheckboxesWidget(props) {
   const _onBlur = () => onBlur(id, value);
   const _onFocus = () => onFocus(id, value);
   const description = options.description ?? schema.description;
-  return /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsxs13(
     "div",
     {
       id,
@@ -932,7 +955,7 @@ function CheckboxesWidget(props) {
         Array.isArray(enumOptions) && enumOptions.map((option, index) => {
           const checked = enumOptionsIsSelected(option.value, checkboxesValues);
           const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
-          return /* @__PURE__ */ jsxs12("div", { style: { display: "flex", flexDirection: "row", gap: "0.5rem", alignItems: "center" }, children: [
+          return /* @__PURE__ */ jsxs13("div", { style: { display: "flex", flexDirection: "row", gap: "0.5rem", alignItems: "center" }, children: [
             /* @__PURE__ */ jsx21(
               Checkbox2,
               {
@@ -1068,7 +1091,7 @@ import {
   optionId as optionId2
 } from "@rjsf/utils";
 import { RadioButton } from "primereact/radiobutton";
-import { jsx as jsx24, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs14 } from "react/jsx-runtime";
 function RadioWidget(props) {
   const { id, htmlName, value, disabled, readonly, onChange, onBlur, onFocus, options } = props;
   const primeProps = options.prime || {};
@@ -1081,7 +1104,7 @@ function RadioWidget(props) {
   return /* @__PURE__ */ jsx24("div", { style: { display: "flex", flexDirection: "row", gap: "1rem" }, children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
     const checked = enumOptionsIsSelected2(option.value, value);
     const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
-    return /* @__PURE__ */ jsxs13("div", { style: { display: "flex", alignItems: "center" }, children: [
+    return /* @__PURE__ */ jsxs14("div", { style: { display: "flex", alignItems: "center" }, children: [
       /* @__PURE__ */ jsx24(
         RadioButton,
         {
@@ -1105,7 +1128,7 @@ function RadioWidget(props) {
 // src/RangeWidget/RangeWidget.tsx
 import { Slider } from "primereact/slider";
 import { ariaDescribedByIds as ariaDescribedByIds8, rangeSpec } from "@rjsf/utils";
-import { Fragment as Fragment5, jsx as jsx25 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx25 } from "react/jsx-runtime";
 function RangeWidget(props) {
   const { value, readonly, disabled, onBlur, onFocus, options, schema, onChange, id } = props;
   const primeProps = options.prime || {};
@@ -1115,7 +1138,7 @@ function RangeWidget(props) {
   };
   const _onBlur = ({ target }) => onBlur(id, target && target.value);
   const _onFocus = ({ target }) => onFocus(id, target && target.value);
-  return /* @__PURE__ */ jsx25(Fragment5, { children: /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx25(Fragment6, { children: /* @__PURE__ */ jsx25(
     Slider,
     {
       ...primeProps,