@rjsf/chakra-ui 6.1.2 → 6.2.4

package/dist/chakra-ui.esm.js

@@ -120,6 +120,7 @@ function ArrayFieldTemplate(props) {
 }
 
 // src/BaseInputTemplate/BaseInputTemplate.tsx
+import { useCallback } from "react";
 import { Input } from "@chakra-ui/react";
 import {
   ariaDescribedByIds,
@@ -181,12 +182,22 @@ function BaseInputTemplate(props) {
     autofocus,
     placeholder,
     disabled,
-    uiSchema
+    uiSchema,
+    registry
   } = props;
   const inputProps = getInputProps(schema, type, options);
+  const { ClearButton: ClearButton2 } = registry.templates.ButtonTemplates;
   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(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      onChange(options.emptyValue ?? "");
+    },
+    [onChange, options.emptyValue]
+  );
   const chakraProps = getChakra({ uiSchema });
   return /* @__PURE__ */ jsxs5(
     Field,
@@ -215,6 +226,7 @@ function BaseInputTemplate(props) {
             "aria-describedby": ariaDescribedByIds(id, !!schema.examples)
           }
         ),
+        options.allowClearTextInputs && !readonly && !disabled && value && /* @__PURE__ */ jsx5(ClearButton2, { registry, onClick: onClear }),
         Array.isArray(schema.examples) ? /* @__PURE__ */ jsx5("datalist", { id: examplesId(id), children: schema.examples.concat(schema.default && !schema.examples.includes(schema.default) ? [schema.default] : []).map((example) => {
           return /* @__PURE__ */ jsx5("option", { value: example }, example);
         }) }) : null
@@ -289,7 +301,7 @@ var ChakraIconButton_default = memo(ChakraIconButton2);
 
 // src/IconButton/IconButton.tsx
 import { TranslatableString as TranslatableString3 } from "@rjsf/utils";
-import { ArrowUpIcon, ArrowDownIcon, CopyIcon, DeleteIcon } from "lucide-react";
+import { ArrowUpIcon, ArrowDownIcon, CopyIcon, DeleteIcon, X } from "lucide-react";
 import { jsx as jsx11 } from "react/jsx-runtime";
 function CopyButton(props) {
   const {
@@ -336,6 +348,12 @@ function RemoveButton(props) {
     }
   );
 }
+function ClearButton(props) {
+  const {
+    registry: { translateString }
+  } = props;
+  return /* @__PURE__ */ jsx11(ChakraIconButton_default, { title: translateString(TranslatableString3.ClearButton), ...props, icon: /* @__PURE__ */ jsx11(X, {}) });
+}
 
 // src/FieldErrorTemplate/FieldErrorTemplate.tsx
 import { errorId } from "@rjsf/utils";
@@ -692,7 +710,8 @@ function generateTemplates() {
       MoveDownButton,
       MoveUpButton,
       RemoveButton,
-      SubmitButton
+      SubmitButton,
+      ClearButton
     },
     DescriptionFieldTemplate: DescriptionField,
     ErrorListTemplate: ErrorList,
@@ -709,6 +728,17 @@ function generateTemplates() {
 }
 var Templates_default = generateTemplates();
 
+// src/AltDateTimeWidget/AltDateTimeWidget.tsx
+import { jsx as jsx22 } from "react/jsx-runtime";
+function AltDateTimeWidget({
+  time = true,
+  ...props
+}) {
+  const { AltDateWidget: AltDateWidget2 } = props.registry.widgets;
+  return /* @__PURE__ */ jsx22(AltDateWidget2, { ...props, time });
+}
+var AltDateTimeWidget_default = AltDateTimeWidget;
+
 // src/AltDateWidget/AltDateWidget.tsx
 import { Box as Box6, Button as Button3, FieldsetRoot } from "@chakra-ui/react";
 import {
@@ -716,16 +746,27 @@ import {
   TranslatableString as TranslatableString5,
   useAltDateWidgetProps
 } from "@rjsf/utils";
-import { jsx as jsx22, jsxs as jsxs12 } from "react/jsx-runtime";
-function AltDateWidget(props) {
-  const { autofocus, disabled, id, onBlur, onFocus, options, readonly, registry } = props;
+import { jsx as jsx23, jsxs as jsxs12 } from "react/jsx-runtime";
+function AltDateWidget({
+  autofocus = false,
+  disabled = false,
+  readonly = false,
+  time = false,
+  options,
+  ...props
+}) {
+  const { id, onBlur, onFocus, registry } = props;
   const { translateString } = registry;
-  const { elements, handleChange, handleClear, handleSetNow } = useAltDateWidgetProps(props);
+  const realOptions = { yearsRange: [1900, (/* @__PURE__ */ new Date()).getFullYear() + 2], ...options };
+  const { elements, handleChange, handleClear, handleSetNow } = useAltDateWidgetProps({
+    ...props,
+    options: realOptions
+  });
   const chakraProps = getChakra({ uiSchema: props.uiSchema });
   return /* @__PURE__ */ jsxs12(FieldsetRoot, { ...chakraProps, children: [
-    /* @__PURE__ */ jsx22(Box6, { display: "flex", flexWrap: "wrap", alignItems: "center", children: elements.map((elemProps, i) => {
+    /* @__PURE__ */ jsx23(Box6, { display: "flex", flexWrap: "wrap", alignItems: "center", children: elements.map((elemProps, i) => {
       const elemId = `${id}_${elemProps.type}`;
-      return /* @__PURE__ */ jsx22(Box6, { mr: "2", mb: "2", width: "20", children: /* @__PURE__ */ jsx22(
+      return /* @__PURE__ */ jsx23(Box6, { mr: "2", mb: "2", width: "20", children: /* @__PURE__ */ jsx23(
         DateElement,
         {
           ...props,
@@ -744,34 +785,13 @@ function AltDateWidget(props) {
       ) }, elemId);
     }) }),
     /* @__PURE__ */ jsxs12(Box6, { display: "flex", children: [
-      !options.hideNowButton && /* @__PURE__ */ jsx22(Button3, { onClick: handleSetNow, mr: "2", children: translateString(TranslatableString5.NowLabel) }),
-      !options.hideClearButton && /* @__PURE__ */ jsx22(Button3, { onClick: handleClear, children: translateString(TranslatableString5.ClearLabel) })
+      !options.hideNowButton && /* @__PURE__ */ jsx23(Button3, { onClick: handleSetNow, mr: "2", children: translateString(TranslatableString5.NowLabel) }),
+      !options.hideClearButton && /* @__PURE__ */ jsx23(Button3, { onClick: handleClear, children: translateString(TranslatableString5.ClearLabel) })
     ] })
   ] });
 }
-AltDateWidget.defaultProps = {
-  autofocus: false,
-  disabled: false,
-  readonly: false,
-  time: false,
-  options: {
-    yearsRange: [1900, (/* @__PURE__ */ new Date()).getFullYear() + 2]
-  }
-};
 var AltDateWidget_default = AltDateWidget;
 
-// src/AltDateTimeWidget/AltDateTimeWidget.tsx
-import { jsx as jsx23 } from "react/jsx-runtime";
-function AltDateTimeWidget(props) {
-  const { AltDateWidget: AltDateWidget2 } = props.registry.widgets;
-  return /* @__PURE__ */ jsx23(AltDateWidget2, { ...props, time: true });
-}
-AltDateTimeWidget.defaultProps = {
-  ...AltDateWidget_default.defaultProps,
-  time: true
-};
-var AltDateTimeWidget_default = AltDateTimeWidget;
-
 // src/CheckboxWidget/CheckboxWidget.tsx
 import { Text as Text3 } from "@chakra-ui/react";
 import {