@rjsf/chakra-ui 6.1.2 → 6.2.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rjsf/chakra-ui",
-  "version": "6.1.2",
+  "version": "6.2.5",
   "description": "Chakra UI theme, fields, and widgets for react-jsonschema-form",
   "main": "dist/index.js",
   "module": "lib/index.js",
@@ -64,8 +64,8 @@
   },
   "peerDependencies": {
     "@chakra-ui/react": ">=3.16.1",
-    "@rjsf/core": "^6.x",
-    "@rjsf/utils": "^6.x",
+    "@rjsf/core": "^6.2.x",
+    "@rjsf/utils": "^6.2.x",
     "chakra-react-select": ">=6",
     "react": ">=18"
   },
@@ -79,6 +79,10 @@
     "U.M Andrew <me@andrewmiracle.com>",
     "Heath Chiavettone <heath.chiavettone@freenome.com"
   ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/rjsf-team/react-jsonschema-form.git"
+  },
   "license": "Apache-2.0",
   "devDependencies": {
     "@chakra-ui/cli": "^3.28.0",
@@ -86,10 +90,10 @@
     "@emotion/eslint-plugin": "^11.12.0",
     "@emotion/jest": "^11.13.0",
     "@emotion/react": "^11.14.0",
-    "@rjsf/core": "^6.x",
-    "@rjsf/snapshot-tests": "^6.x",
-    "@rjsf/utils": "^6.x",
-    "@rjsf/validator-ajv8": "^6.x",
+    "@rjsf/core": "^6.2.0",
+    "@rjsf/snapshot-tests": "^6.2.0",
+    "@rjsf/utils": "^6.2.0",
+    "@rjsf/validator-ajv8": "^6.2.0",
     "chakra-react-select": "^6.1.0",
     "eslint": "^8.57.1"
   },

package/src/AltDateTimeWidget/AltDateTimeWidget.tsx

@@ -1,16 +1,11 @@
-import _AltDateWidget from '../AltDateWidget';
 import { FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
 
-function AltDateTimeWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
-  props: WidgetProps<T, S, F>,
-) {
+function AltDateTimeWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({
+  time = true,
+  ...props
+}: WidgetProps<T, S, F>) {
   const { AltDateWidget } = props.registry.widgets;
-  return <AltDateWidget {...props} time />;
+  return <AltDateWidget {...props} time={time} />;
 }
 
-AltDateTimeWidget.defaultProps = {
-  ..._AltDateWidget.defaultProps,
-  time: true,
-};
-
 export default AltDateTimeWidget;

package/src/AltDateWidget/AltDateWidget.tsx

@@ -11,12 +11,21 @@ import {
 } from '@rjsf/utils';
 import { getChakra } from '../utils';
 
-function AltDateWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
-  props: WidgetProps<T, S, F>,
-) {
-  const { autofocus, disabled, id, onBlur, onFocus, options, readonly, registry } = props;
+function AltDateWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({
+  autofocus = false,
+  disabled = false,
+  readonly = false,
+  time = false,
+  options,
+  ...props
+}: WidgetProps<T, S, F>) {
+  const { id, onBlur, onFocus, registry } = props;
   const { translateString } = registry;
-  const { elements, handleChange, handleClear, handleSetNow } = useAltDateWidgetProps(props);
+  const realOptions = { yearsRange: [1900, new Date().getFullYear() + 2], ...options };
+  const { elements, handleChange, handleClear, handleSetNow } = useAltDateWidgetProps({
+    ...props,
+    options: realOptions,
+  });
 
   const chakraProps = getChakra({ uiSchema: props.uiSchema });
 
@@ -59,14 +68,4 @@ function AltDateWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F exten
   );
 }
 
-AltDateWidget.defaultProps = {
-  autofocus: false,
-  disabled: false,
-  readonly: false,
-  time: false,
-  options: {
-    yearsRange: [1900, new Date().getFullYear() + 2],
-  },
-};
-
 export default AltDateWidget;

package/src/BaseInputTemplate/BaseInputTemplate.tsx

@@ -1,4 +1,4 @@
-import { ChangeEvent, FocusEvent } from 'react';
+import { ChangeEvent, FocusEvent, MouseEvent, useCallback } from 'react';
 import { Input } from '@chakra-ui/react';
 import {
   ariaDescribedByIds,
@@ -39,13 +39,23 @@ export default function BaseInputTemplate<
     placeholder,
     disabled,
     uiSchema,
+    registry,
   } = props;
   const inputProps = getInputProps<T, S, F>(schema, type, options);
+  const { ClearButton } = registry.templates.ButtonTemplates;
 
   const _onChange = ({ target: { value } }: ChangeEvent<HTMLInputElement>) =>
     onChange(value === '' ? options.emptyValue : value);
   const _onBlur = ({ target }: FocusEvent<HTMLInputElement>) => onBlur(id, target && target.value);
   const _onFocus = ({ target }: FocusEvent<HTMLInputElement>) => onFocus(id, target && target.value);
+  const onClear = useCallback(
+    (e: MouseEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      onChange(options.emptyValue ?? '');
+    },
+    [onChange, options.emptyValue],
+  );
 
   const chakraProps = getChakra({ uiSchema });
 
@@ -72,6 +82,9 @@ export default function BaseInputTemplate<
         list={schema.examples ? examplesId(id) : undefined}
         aria-describedby={ariaDescribedByIds(id, !!schema.examples)}
       />
+      {options.allowClearTextInputs && !readonly && !disabled && value && (
+        <ClearButton registry={registry} onClick={onClear} />
+      )}
       {Array.isArray(schema.examples) ? (
         <datalist id={examplesId(id)}>
           {(schema.examples as string[])

package/src/IconButton/IconButton.tsx

@@ -1,5 +1,5 @@
 import { FormContextType, RJSFSchema, StrictRJSFSchema, TranslatableString } from '@rjsf/utils';
-import { ArrowUpIcon, ArrowDownIcon, CopyIcon, DeleteIcon } from 'lucide-react';
+import { ArrowUpIcon, ArrowDownIcon, CopyIcon, DeleteIcon, X } from 'lucide-react';
 
 import ChakraIconButton, { ChakraIconButtonProps } from './ChakraIconButton';
 
@@ -58,3 +58,12 @@ export function RemoveButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F
     />
   );
 }
+
+export function ClearButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  props: ChakraIconButtonProps<T, S, F>,
+) {
+  const {
+    registry: { translateString },
+  } = props;
+  return <ChakraIconButton<T, S, F> title={translateString(TranslatableString.ClearButton)} {...props} icon={<X />} />;
+}

package/src/Templates/Templates.ts

@@ -4,7 +4,7 @@ import ArrayFieldTemplate from '../ArrayFieldTemplate';
 import BaseInputTemplate from '../BaseInputTemplate/BaseInputTemplate';
 import DescriptionField from '../DescriptionField';
 import ErrorList from '../ErrorList';
-import { CopyButton, MoveDownButton, MoveUpButton, RemoveButton } from '../IconButton';
+import { CopyButton, MoveDownButton, MoveUpButton, RemoveButton, ClearButton } from '../IconButton';
 import FieldErrorTemplate from '../FieldErrorTemplate';
 import FieldHelpTemplate from '../FieldHelpTemplate';
 import FieldTemplate from '../FieldTemplate';
@@ -33,6 +33,7 @@ export function generateTemplates<
       MoveUpButton,
       RemoveButton,
       SubmitButton,
+      ClearButton,
     },
     DescriptionFieldTemplate: DescriptionField,
     ErrorListTemplate: ErrorList,