@rjsf/shadcn 6.6.1 → 6.6.2

package/dist/rjsf-shadcn.esm.js

@@ -72,10 +72,7 @@ function AddButton({
 }
 
 // src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx
-import {
-  getTemplate,
-  getUiOptions
-} from "@rjsf/utils";
+import { getTemplate, getUiOptions } from "@rjsf/utils";
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 function ArrayFieldItemTemplate(props) {
   const { children, buttonsProps, displayLabel, hasDescription, hasToolbar, uiSchema, registry } = props;
@@ -100,11 +97,7 @@ function ArrayFieldItemTemplate(props) {
 }
 
 // src/ArrayFieldTemplate/ArrayFieldTemplate.tsx
-import {
-  buttonId,
-  getTemplate as getTemplate2,
-  getUiOptions as getUiOptions2
-} from "@rjsf/utils";
+import { buttonId, getTemplate as getTemplate2, getUiOptions as getUiOptions2 } from "@rjsf/utils";
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 function ArrayFieldTemplate(props) {
   const {
@@ -180,11 +173,7 @@ function ArrayFieldTemplate(props) {
 // src/BaseInputTemplate/BaseInputTemplate.tsx
 import { useCallback } from "react";
 import { SchemaExamples } from "@rjsf/core";
-import {
-  ariaDescribedByIds,
-  examplesId,
-  getInputProps
-} from "@rjsf/utils";
+import { ariaDescribedByIds, examplesId, getInputProps } from "@rjsf/utils";
 
 // src/components/ui/input.tsx
 import { jsx as jsx5 } from "react/jsx-runtime";
@@ -234,10 +223,10 @@ function BaseInputTemplate({
     ...extraProps,
     ...getInputProps(schema, type, options)
   };
-  const _onChange = ({ target: { value: value2 } }) => onChange(value2 === "" ? options.emptyValue : value2);
-  const _onBlur = ({ target }) => onBlur(id, target && target.value);
-  const _onFocus = ({ target }) => onFocus(id, target && target.value);
-  const _onClear = useCallback(
+  const handleChange = ({ target: { value: newValue } }) => onChange(newValue === "" ? options.emptyValue : newValue);
+  const handleBlur = ({ target }) => onBlur(id, target && target.value);
+  const handleFocus = ({ target }) => onFocus(id, target && target.value);
+  const handleClear = useCallback(
     (e) => {
       e.preventDefault();
       e.stopPropagation();
@@ -261,13 +250,13 @@ function BaseInputTemplate({
         list: schema.examples ? examplesId(id) : void 0,
         ...inputProps,
         value: value || value === 0 ? value : "",
-        onChange: onChangeOverride || _onChange,
-        onBlur: _onBlur,
-        onFocus: _onFocus,
+        onChange: onChangeOverride || handleChange,
+        onBlur: handleBlur,
+        onFocus: handleFocus,
         "aria-describedby": ariaDescribedByIds(id, !!schema.examples)
       }
     ),
-    options.allowClearTextInputs && !readonly && !disabled && value && /* @__PURE__ */ jsx6(ClearButton2, { onClick: _onClear, registry }),
+    options.allowClearTextInputs && !readonly && !disabled && value && /* @__PURE__ */ jsx6(ClearButton2, { onClick: handleClear, registry }),
     children,
     /* @__PURE__ */ jsx6(SchemaExamples, { id, schema })
   ] });
@@ -341,12 +330,13 @@ function ErrorList({
   return /* @__PURE__ */ jsxs5(Alert, { variant: "destructive", className: "mb-2", children: [
     /* @__PURE__ */ jsx9(AlertCircle, { className: "h-4 w-4" }),
     /* @__PURE__ */ jsx9(AlertTitle, { children: translateString(TranslatableString2.ErrorsLabel) }),
-    /* @__PURE__ */ jsx9(AlertDescription, { className: "flex flex-col gap-1", children: errors.map((error, i) => {
-      return /* @__PURE__ */ jsxs5("span", { children: [
+    /* @__PURE__ */ jsx9(AlertDescription, { className: "flex flex-col gap-1", children: errors.map((error, i) => (
+      // oxlint-disable-next-line react/no-array-index-key
+      /* @__PURE__ */ jsxs5("span", { children: [
         "\u2022 ",
         error.stack
-      ] }, i);
-    }) })
+      ] }, i)
+    )) })
   ] });
 }
 
@@ -359,9 +349,10 @@ function FieldErrorTemplate(props) {
     return null;
   }
   const id = errorId(fieldPathId);
-  return /* @__PURE__ */ jsx10("div", { className: "flex flex-col gap-1", id, children: errors.map((error, i) => {
-    return /* @__PURE__ */ jsx10("span", { className: "text-xs font-medium text-destructive mb-1", children: error }, i);
-  }) });
+  return /* @__PURE__ */ jsx10("div", { className: "flex flex-col gap-1", id, children: errors.map((error, i) => (
+    // oxlint-disable-next-line react/no-array-index-key
+    /* @__PURE__ */ jsx10("span", { className: "text-xs font-medium text-destructive mb-1", children: error }, i)
+  )) });
 }
 
 // src/FieldHelpTemplate/FieldHelpTemplate.tsx
@@ -384,10 +375,7 @@ function FieldHelpTemplate(props) {
 }
 
 // src/FieldTemplate/FieldTemplate.tsx
-import {
-  getTemplate as getTemplate3,
-  getUiOptions as getUiOptions3
-} from "@rjsf/utils";
+import { getTemplate as getTemplate3, getUiOptions as getUiOptions3 } from "@rjsf/utils";
 import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
 function FieldTemplate({
   id,
@@ -478,20 +466,24 @@ function GridTemplate(props) {
 }
 
 // src/IconButton/IconButton.tsx
+import { memo } from "react";
 import { TranslatableString as TranslatableString3 } from "@rjsf/utils";
 import { ChevronDown, ChevronUp, Copy, Trash2, X } from "lucide-react";
 import { jsx as jsx14 } from "react/jsx-runtime";
-function IconButton(props) {
+function IconButtonFn(props) {
   const { icon, iconType, className, uiSchema, registry, ...otherProps } = props;
   return /* @__PURE__ */ jsx14(Button, { size: "icon", variant: "outline", className, ...otherProps, type: "button", children: icon });
 }
-function CopyButton(props) {
+var IconButton = memo(IconButtonFn);
+var IconButton_default = IconButton;
+function CopyButtonFn(props) {
   const {
     registry: { translateString }
   } = props;
   return /* @__PURE__ */ jsx14(IconButton, { title: translateString(TranslatableString3.CopyButton), ...props, icon: /* @__PURE__ */ jsx14(Copy, { className: "h-4 w-4" }) });
 }
-function MoveDownButton(props) {
+var CopyButton = memo(CopyButtonFn);
+function MoveDownButtonFn(props) {
   const {
     registry: { translateString }
   } = props;
@@ -504,7 +496,8 @@ function MoveDownButton(props) {
     }
   );
 }
-function MoveUpButton(props) {
+var MoveDownButton = memo(MoveDownButtonFn);
+function MoveUpButtonFn(props) {
   const {
     registry: { translateString }
   } = props;
@@ -517,7 +510,8 @@ function MoveUpButton(props) {
     }
   );
 }
-function RemoveButton(props) {
+var MoveUpButton = memo(MoveUpButtonFn);
+function RemoveButtonFn(props) {
   const {
     registry: { translateString }
   } = props;
@@ -531,12 +525,14 @@ function RemoveButton(props) {
     }
   );
 }
-function ClearButton(props) {
+var RemoveButton = memo(RemoveButtonFn);
+function ClearButtonFn(props) {
   const {
     registry: { translateString }
   } = props;
   return /* @__PURE__ */ jsx14(IconButton, { title: translateString(TranslatableString3.ClearButton), ...props, icon: /* @__PURE__ */ jsx14(X, {}) });
 }
+var ClearButton = memo(ClearButtonFn);
 
 // src/MultiSchemaFieldTemplate/MultiSchemaFieldTemplate.tsx
 import { jsx as jsx15, jsxs as jsxs7 } from "react/jsx-runtime";
@@ -548,14 +544,7 @@ function MultiSchemaFieldTemplate({ selector, optionSchemaField }) {
 }
 
 // src/ObjectFieldTemplate/ObjectFieldTemplate.tsx
-import {
-  buttonId as buttonId2,
-  canExpand,
-  descriptionId,
-  getTemplate as getTemplate4,
-  getUiOptions as getUiOptions4,
-  titleId
-} from "@rjsf/utils";
+import { buttonId as buttonId2, canExpand, descriptionId, getTemplate as getTemplate4, getUiOptions as getUiOptions4, titleId } from "@rjsf/utils";
 import { Fragment, jsx as jsx16, jsxs as jsxs8 } from "react/jsx-runtime";
 function ObjectFieldTemplate({
   description,
@@ -608,7 +597,7 @@ function ObjectFieldTemplate({
     ),
     /* @__PURE__ */ jsxs8("div", { className: "flex flex-col gap-2", children: [
       !showOptionalDataControlInTitle ? optionalDataControl : void 0,
-      properties.map((element, index) => /* @__PURE__ */ jsx16("div", { className: `${element.hidden ? "hidden" : ""} flex`, children: /* @__PURE__ */ jsx16("div", { className: "w-full", children: element.content }) }, index)),
+      properties.map((element) => /* @__PURE__ */ jsx16("div", { className: `${element.hidden ? "hidden" : ""} flex`, children: /* @__PURE__ */ jsx16("div", { className: "w-full", children: element.content }) }, element.name)),
       canExpand(schema, uiSchema, formData) ? /* @__PURE__ */ jsx16("div", { className: "mt-2 flex justify-end", children: /* @__PURE__ */ jsx16(
         AddButton2,
         {
@@ -631,7 +620,7 @@ function OptionalDataControlsTemplate(props) {
   const { id, registry, label, onAddClick, onRemoveClick } = props;
   if (onAddClick) {
     return /* @__PURE__ */ jsx17(
-      IconButton,
+      IconButton_default,
       {
         id,
         registry,
@@ -642,7 +631,8 @@ function OptionalDataControlsTemplate(props) {
         size: "xs"
       }
     );
-  } else if (onRemoveClick) {
+  }
+  if (onRemoveClick) {
     return /* @__PURE__ */ jsx17(
       RemoveButton,
       {
@@ -719,11 +709,7 @@ function TitleField({
 }
 
 // src/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.tsx
-import {
-  ADDITIONAL_PROPERTY_FLAG,
-  buttonId as buttonId3,
-  TranslatableString as TranslatableString4
-} from "@rjsf/utils";
+import { ADDITIONAL_PROPERTY_FLAG, buttonId as buttonId3, TranslatableString as TranslatableString4 } from "@rjsf/utils";
 import { Fragment as Fragment2, jsx as jsx21, jsxs as jsxs10 } from "react/jsx-runtime";
 function WrapIfAdditionalTemplate({
   classNames,
@@ -893,11 +879,11 @@ function CheckboxesWidget({
   const { enumOptions, enumDisabled, inline, emptyValue } = options;
   const optionValueFormat = getOptionValueFormat(options);
   const checkboxesValues = Array.isArray(value) ? value : [value];
-  const _onBlur = ({ target }) => onBlur(id, enumOptionValueDecoder(target && target.value, enumOptions, optionValueFormat, emptyValue));
-  const _onFocus = ({ target }) => onFocus(id, enumOptionValueDecoder(target && target.value, enumOptions, optionValueFormat, emptyValue));
+  const handleBlur = ({ target }) => onBlur(id, enumOptionValueDecoder(target && target.value, enumOptions, optionValueFormat, emptyValue));
+  const handleFocus = ({ target }) => onFocus(id, enumOptionValueDecoder(target && target.value, enumOptions, optionValueFormat, emptyValue));
   return /* @__PURE__ */ jsx24("div", { className: cn({ "flex flex-col gap-2": !inline, "flex flex-row gap-4 flex-wrap": inline }), children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
     const checked = enumOptionsIsSelected(option.value, checkboxesValues);
-    const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
+    const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.includes(option.value);
     const indexOptionId = optionId(id, index);
     return /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-2", children: [
       /* @__PURE__ */ jsx24(
@@ -917,8 +903,8 @@ function CheckboxesWidget({
           className,
           checked,
           autoFocus: autofocus && index === 0,
-          onBlur: _onBlur,
-          onFocus: _onFocus,
+          onBlur: handleBlur,
+          onFocus: handleFocus,
           "aria-describedby": ariaDescribedByIds2(id)
         }
       ),
@@ -928,13 +914,7 @@ function CheckboxesWidget({
 }
 
 // src/CheckboxWidget/CheckboxWidget.tsx
-import {
-  ariaDescribedByIds as ariaDescribedByIds3,
-  descriptionId as descriptionId2,
-  getTemplate as getTemplate5,
-  labelValue,
-  schemaRequiresTrueValue
-} from "@rjsf/utils";
+import { ariaDescribedByIds as ariaDescribedByIds3, descriptionId as descriptionId2, getTemplate as getTemplate5, labelValue, schemaRequiresTrueValue } from "@rjsf/utils";
 import { jsx as jsx25, jsxs as jsxs12 } from "react/jsx-runtime";
 function CheckboxWidget(props) {
   const {
@@ -961,9 +941,9 @@ function CheckboxWidget(props) {
     registry,
     options
   );
-  const _onChange = (checked) => onChange(checked);
-  const _onBlur = () => onBlur(id, value);
-  const _onFocus = () => onFocus(id, value);
+  const handleChange = (checked) => onChange(checked);
+  const handleBlur = () => onBlur(id, value);
+  const handleFocus = () => onFocus(id, value);
   const description = options.description || schema.description;
   return /* @__PURE__ */ jsxs12(
     "div",
@@ -991,9 +971,9 @@ function CheckboxWidget(props) {
               required,
               disabled: disabled || readonly,
               autoFocus: autofocus,
-              onCheckedChange: _onChange,
-              onBlur: _onBlur,
-              onFocus: _onFocus,
+              onCheckedChange: handleChange,
+              onBlur: handleBlur,
+              onFocus: handleFocus,
               className
             }
           ),
@@ -1052,9 +1032,9 @@ function RadioWidget({
 }) {
   const { enumOptions, enumDisabled, emptyValue } = options;
   const optionValueFormat = getOptionValueFormat2(options);
-  const _onChange = (value2) => onChange(enumOptionValueDecoder2(value2, enumOptions, optionValueFormat, emptyValue));
-  const _onBlur = ({ target }) => onBlur(id, enumOptionValueDecoder2(target && target.value, enumOptions, optionValueFormat, emptyValue));
-  const _onFocus = ({ target }) => onFocus(id, enumOptionValueDecoder2(target && target.value, enumOptions, optionValueFormat, emptyValue));
+  const handleChange = (enumValue) => onChange(enumOptionValueDecoder2(enumValue, enumOptions, optionValueFormat, emptyValue));
+  const handleBlur = ({ target }) => onBlur(id, enumOptionValueDecoder2(target && target.value, enumOptions, optionValueFormat, emptyValue));
+  const handleFocus = ({ target }) => onFocus(id, enumOptionValueDecoder2(target && target.value, enumOptions, optionValueFormat, emptyValue));
   const inline = Boolean(options && options.inline);
   return /* @__PURE__ */ jsx27("div", { className: "mb-0", children: /* @__PURE__ */ jsx27(
     RadioGroup,
@@ -1063,15 +1043,15 @@ function RadioWidget({
       required,
       disabled: disabled || readonly,
       onValueChange: (e) => {
-        _onChange(e);
+        handleChange(e);
       },
-      onBlur: _onBlur,
-      onFocus: _onFocus,
+      onBlur: handleBlur,
+      onFocus: handleFocus,
       "aria-describedby": ariaDescribedByIds4(id),
       orientation: inline ? "horizontal" : "vertical",
       className: cn("flex flex-wrap", { "flex-col": !inline }, className),
       children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
-        const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
+        const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.includes(option.value);
         const checked = enumOptionsIsSelected2(option.value, value);
         return /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-2", children: [
           /* @__PURE__ */ jsx27(
@@ -1099,10 +1079,15 @@ import { useMemo } from "react";
 import { Range, Root as Root5, Thumb, Track } from "@radix-ui/react-slider";
 import { jsx as jsx28, jsxs as jsxs14 } from "react/jsx-runtime";
 function Slider({ className, defaultValue, value, min = 0, max = 100, ...props }) {
-  const _values = useMemo(
-    () => Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max],
-    [value, defaultValue, min, max]
-  );
+  const enumValues = useMemo(() => {
+    if (Array.isArray(value)) {
+      return value;
+    }
+    if (Array.isArray(defaultValue)) {
+      return defaultValue;
+    }
+    return [min, max];
+  }, [value, defaultValue, min, max]);
   return /* @__PURE__ */ jsxs14(
     Root5,
     {
@@ -1133,7 +1118,7 @@ function Slider({ className, defaultValue, value, min = 0, max = 100, ...props }
             )
           }
         ),
-        Array.from({ length: _values.length }, (_, index) => /* @__PURE__ */ jsx28(
+        Array.from({ length: enumValues.length }, (_, index) => /* @__PURE__ */ jsx28(
           Thumb,
           {
             "data-slot": "slider-thumb",
@@ -1173,7 +1158,7 @@ function RangeWidget({
   label,
   id
 }) {
-  const _onChange = (value2) => onChange(value2[0]);
+  const handleChange = (newValue) => onChange(newValue[0]);
   const sliderProps = { value, label, id, ...rangeSpec(schema) };
   const uiProps = { id, ..._pick(options.props || {}, allowedProps) };
   return /* @__PURE__ */ jsxs15(Fragment3, { children: [
@@ -1185,7 +1170,7 @@ function RangeWidget({
         max: sliderProps.max,
         step: sliderProps.step,
         value: [value],
-        onValueChange: _onChange,
+        onValueChange: handleChange,
         ...uiProps,
         "aria-describedby": ariaDescribedByIds5(id)
       }
@@ -1204,12 +1189,7 @@ import {
 } from "@rjsf/utils";
 
 // src/components/ui/fancy-multi-select.tsx
-import {
-  useCallback as useCallback2,
-  useMemo as useMemo2,
-  useRef,
-  useState
-} from "react";
+import { useCallback as useCallback2, useMemo as useMemo2, useRef, useState } from "react";
 import { Command as CommandPrimitive2 } from "cmdk";
 import isEqual from "lodash/isEqual";
 import { X as X2 } from "lucide-react";
@@ -1257,20 +1237,18 @@ import { jsx as jsx31, jsxs as jsxs16 } from "react/jsx-runtime";
 // src/components/ui/command.tsx
 import { jsx as jsx32, jsxs as jsxs17 } from "react/jsx-runtime";
 var Command = forwardRef(
-  ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx32(
-      CommandPrimitive,
-      {
-        ref,
-        "data-slot": "command",
-        className: cn(
-          "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
-          className
-        ),
-        ...props
-      }
-    );
-  }
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx32(
+    CommandPrimitive,
+    {
+      ref,
+      "data-slot": "command",
+      className: cn(
+        "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
+        className
+      ),
+      ...props
+    }
+  )
 );
 var CommandInput = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs17("div", { className: "flex items-center border-b px-3", ...{ "cmdk-input-wrapper": "" }, children: [
   /* @__PURE__ */ jsx32(Search, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
@@ -1382,7 +1360,7 @@ function FancyMultiSelect({
       }
       setInputValue("");
       const newSelected = multiple ? [...selectedItems, item] : [item];
-      onValueChange?.(newSelected.map((item2) => item2.index));
+      onValueChange?.(newSelected.map((selectedItem) => selectedItem.index));
     },
     [multiple, selectedItems, onValueChange, disabled]
   );
@@ -1532,7 +1510,10 @@ function FancySelect({
         /* @__PURE__ */ jsxs19(
           "div",
           {
+            role: "button",
+            tabIndex: disabled ? -1 : 0,
             onClick: () => !disabled && setOpen(!open),
+            onKeyDown: (e) => (e.key === "Enter" || e.key === " ") && !disabled && setOpen(!open),
             className: cn(
               "flex h-9 w-full items-center justify-between gap-2 whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
               !selectedItem && required && "border-red-500",
@@ -1603,17 +1584,17 @@ function SelectWidget({
 }) {
   const { enumOptions, enumDisabled, emptyValue: optEmptyValue } = options;
   const optionValueFormat = getOptionValueFormat3(options);
-  const _onFancyFocus = () => {
+  const handleFancyFocus = () => {
     onFocus(id, enumOptionValueDecoder3(value, enumOptions, optionValueFormat, optEmptyValue));
   };
-  const _onFancyBlur = () => {
+  const handleFancyBlur = () => {
     onBlur(id, enumOptionValueDecoder3(value, enumOptions, optionValueFormat, optEmptyValue));
   };
-  const items = enumOptions?.map(({ value: value2, label }, index) => ({
-    value: multiple ? value2 : enumOptionValueEncoder2(value2, index, optionValueFormat),
-    label,
+  const items = enumOptions?.map(({ value: enumValue, label: enumLabel }, index) => ({
+    value: multiple ? enumValue : enumOptionValueEncoder2(enumValue, index, optionValueFormat),
+    label: enumLabel,
     index,
-    disabled: Array.isArray(enumDisabled) && enumDisabled.includes(value2)
+    disabled: Array.isArray(enumDisabled) && enumDisabled.includes(enumValue)
   }));
   const cnClassName = cn({ "border-destructive": rawErrors.length > 0 }, className);
   return /* @__PURE__ */ jsx35("div", { className: "p-0.5", children: !multiple ? /* @__PURE__ */ jsx35(
@@ -1629,8 +1610,8 @@ function SelectWidget({
       required,
       placeholder,
       className: cnClassName,
-      onFocus: _onFancyFocus,
-      onBlur: _onFancyBlur,
+      onFocus: handleFancyFocus,
+      onBlur: handleFancyBlur,
       ariaDescribedby: ariaDescribedByIds6(id)
     }
   ) : /* @__PURE__ */ jsx35(
@@ -1646,8 +1627,8 @@ function SelectWidget({
       onValueChange: (values) => {
         onChange(enumOptionValueDecoder3(values.map(String), enumOptions, optionValueFormat, optEmptyValue));
       },
-      onFocus: _onFancyFocus,
-      onBlur: _onFancyBlur
+      onFocus: handleFancyFocus,
+      onBlur: handleFancyBlur
     }
   ) });
 }
@@ -1688,9 +1669,9 @@ function TextareaWidget({
   options,
   className
 }) {
-  const _onChange = ({ target: { value: value2 } }) => onChange(value2 === "" ? options.emptyValue : value2);
-  const _onBlur = ({ target }) => onBlur(id, target && target.value);
-  const _onFocus = ({ target }) => onFocus(id, target && target.value);
+  const handleChange = ({ target: { value: newValue } }) => onChange(newValue === "" ? options.emptyValue : newValue);
+  const handleBlur = ({ target }) => onBlur(id, target && target.value);
+  const handleFocus = ({ target }) => onFocus(id, target && target.value);
   return /* @__PURE__ */ jsx37("div", { className: "flex p-0.5", children: /* @__PURE__ */ jsx37(
     Textarea,
     {
@@ -1703,9 +1684,9 @@ function TextareaWidget({
       required,
       autoFocus: autofocus,
       rows: options.rows || 5,
-      onChange: _onChange,
-      onBlur: _onBlur,
-      onFocus: _onFocus,
+      onChange: handleChange,
+      onBlur: handleBlur,
+      onFocus: handleFocus,
       "aria-describedby": ariaDescribedByIds7(id),
       className
     }