@rjsf/mantine 6.6.1 → 6.7.0

package/lib/widgets/TextareaWidget.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback } from 'react';
 import { Textarea } from '@mantine/core';
-import { labelValue, ariaDescribedByIds, } from '@rjsf/utils';
+import { labelValue, ariaDescribedByIds } from '@rjsf/utils';
 import { cleanupOptions } from '../utils.js';
 /** The `TextareaWidget` is a widget for rendering input fields as textarea.
  *
@@ -16,12 +16,12 @@ export default function TextareaWidget(props) {
     }, [onChange, emptyValue]);
     const handleBlur = useCallback(({ target }) => {
         if (onBlur) {
-            onBlur(id, target && target.value);
+            onBlur(id, target === null || target === void 0 ? void 0 : target.value);
         }
     }, [onBlur, id]);
     const handleFocus = useCallback(({ target }) => {
         if (onFocus) {
-            onFocus(id, target && target.value);
+            onFocus(id, target === null || target === void 0 ? void 0 : target.value);
         }
     }, [onFocus, id]);
     return (_jsx(Textarea, { id: id, name: htmlName || name, value: value || '', placeholder: placeholder || undefined, required: required, disabled: disabled || readonly, autoFocus: autofocus, label: labelValue(label || undefined, hideLabel, false), onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, error: rawErrors && rawErrors.length > 0 ? rawErrors.join('\n') : undefined, "aria-describedby": ariaDescribedByIds(id), ...themeProps }));

package/lib/widgets/TextareaWidget.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextareaWidget.js","sourceRoot":"","sources":["../../src/widgets/TextareaWidget.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAyC,WAAW,EAAE,MAAM,OAAO,CAAC;AAC3E,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAKL,UAAU,EACV,kBAAkB,GACnB,MAAM,aAAa,CAAC;AAErB,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE1C;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,cAAc,CAIpC,KAA2B;IAC3B,MAAM,EACJ,EAAE,EACF,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,KAAK,EACL,SAAS,EACT,SAAS,EACT,OAAO,EACP,QAAQ,EACR,MAAM,EACN,OAAO,GACR,GAAG,KAAK,CAAC;IAEV,MAAM,UAAU,GAAG,cAAc,CAAC,OAAO,CAAC,CAAC;IAC3C,MAAM,UAAU,GAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,UAAU,CAAC;IAEvC,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,CAAmC,EAAE,EAAE;QACtC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,KAAK,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAChE,CAAC,EACD,CAAC,QAAQ,EAAE,UAAU,CAAC,CACvB,CAAC;IAEF,MAAM,UAAU,GAAG,WAAW,CAC5B,CAAC,EAAE,MAAM,EAAmC,EAAE,EAAE;QAC9C,IAAI,MAAM,EAAE,CAAC;YACX,MAAM,CAAC,EAAE,EAAE,MAAM,IAAI,MAAM,CAAC,KAAK,CAAC,CAAC;QACrC,CAAC;IACH,CAAC,EACD,CAAC,MAAM,EAAE,EAAE,CAAC,CACb,CAAC;IAEF,MAAM,WAAW,GAAG,WAAW,CAC7B,CAAC,EAAE,MAAM,EAAmC,EAAE,EAAE;QAC9C,IAAI,OAAO,EAAE,CAAC;YACZ,OAAO,CAAC,EAAE,EAAE,MAAM,IAAI,MAAM,CAAC,KAAK,CAAC,CAAC;QACtC,CAAC;IACH,CAAC,EACD,CAAC,OAAO,EAAE,EAAE,CAAC,CACd,CAAC;IAEF,OAAO,CACL,KAAC,QAAQ,IACP,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,QAAQ,IAAI,IAAI,EACtB,KAAK,EAAE,KAAK,IAAI,EAAE,EAClB,WAAW,EAAE,WAAW,IAAI,SAAS,EACrC,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,IAAI,QAAQ,EAC9B,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,UAAU,CAAC,KAAK,IAAI,SAAS,EAAE,SAAS,EAAE,KAAK,CAAC,EACvD,QAAQ,EAAE,YAAY,EACtB,MAAM,EAAE,UAAU,EAClB,OAAO,EAAE,WAAW,EACpB,KAAK,EAAE,SAAS,IAAI,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,sBACzD,kBAAkB,CAAC,EAAE,CAAC,KACpC,UAAU,GACd,CACH,CAAC;AACJ,CAAC"}
+{"version":3,"file":"TextareaWidget.js","sourceRoot":"","sources":["../../src/widgets/TextareaWidget.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,OAAO,EAAE,UAAU,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAE7D,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE1C;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,cAAc,CAIpC,KAA2B;IAC3B,MAAM,EACJ,EAAE,EACF,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,KAAK,EACL,SAAS,EACT,SAAS,EACT,OAAO,EACP,QAAQ,EACR,MAAM,EACN,OAAO,GACR,GAAG,KAAK,CAAC;IAEV,MAAM,UAAU,GAAG,cAAc,CAAC,OAAO,CAAC,CAAC;IAC3C,MAAM,UAAU,GAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,UAAU,CAAC;IAEvC,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,CAAmC,EAAE,EAAE;QACtC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,KAAK,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAChE,CAAC,EACD,CAAC,QAAQ,EAAE,UAAU,CAAC,CACvB,CAAC;IAEF,MAAM,UAAU,GAAG,WAAW,CAC5B,CAAC,EAAE,MAAM,EAAmC,EAAE,EAAE;QAC9C,IAAI,MAAM,EAAE,CAAC;YACX,MAAM,CAAC,EAAE,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,CAAC,CAAC;QAC5B,CAAC;IACH,CAAC,EACD,CAAC,MAAM,EAAE,EAAE,CAAC,CACb,CAAC;IAEF,MAAM,WAAW,GAAG,WAAW,CAC7B,CAAC,EAAE,MAAM,EAAmC,EAAE,EAAE;QAC9C,IAAI,OAAO,EAAE,CAAC;YACZ,OAAO,CAAC,EAAE,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,CAAC,CAAC;QAC7B,CAAC;IACH,CAAC,EACD,CAAC,OAAO,EAAE,EAAE,CAAC,CACd,CAAC;IAEF,OAAO,CACL,KAAC,QAAQ,IACP,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,QAAQ,IAAI,IAAI,EACtB,KAAK,EAAE,KAAK,IAAI,EAAE,EAClB,WAAW,EAAE,WAAW,IAAI,SAAS,EACrC,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,IAAI,QAAQ,EAC9B,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,UAAU,CAAC,KAAK,IAAI,SAAS,EAAE,SAAS,EAAE,KAAK,CAAC,EACvD,QAAQ,EAAE,YAAY,EACtB,MAAM,EAAE,UAAU,EAClB,OAAO,EAAE,WAAW,EACpB,KAAK,EAAE,SAAS,IAAI,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,sBACzD,kBAAkB,CAAC,EAAE,CAAC,KACpC,UAAU,GACd,CACH,CAAC;AACJ,CAAC"}

package/lib/widgets/index.d.ts

@@ -1,4 +1,4 @@
-import { FormContextType, RegistryWidgetsType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import type { FormContextType, RegistryWidgetsType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
 export declare function generateWidgets<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(): RegistryWidgetsType<T, S, F>;
 declare const _default: RegistryWidgetsType<any, RJSFSchema, any>;
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rjsf/mantine",
-  "version": "6.6.1",
+  "version": "6.7.0",
   "main": "dist/index.js",
   "module": "lib/index.js",
   "typings": "lib/index.d.ts",
@@ -42,19 +42,6 @@
   "engines": {
     "node": ">=20"
   },
-  "scripts": {
-    "build:ts": "tsc -b tsconfig.build.json && tsc-alias -p tsconfig.build.json",
-    "build:cjs": "esbuild ./src/index.ts --bundle --outfile=dist/index.cjs --sourcemap --packages=external --format=cjs",
-    "build:esm": "esbuild ./src/index.ts --bundle --outfile=dist/mantine.esm.js --sourcemap --packages=external --format=esm",
-    "build:umd": "rollup dist/mantine.esm.js --format=umd --file=dist/mantine.umd.js --name=@rjsf/mantine",
-    "build": "npm run build:ts && npm run build:cjs && npm run build:esm && npm run build:umd",
-    "cs-check": "oxfmt --check \"{src,test}/**/*.{ts,tsx}\"",
-    "cs-format": "oxfmt \"{src,test}/**/*.{ts,tsx}\"",
-    "lint": "oxlint src test",
-    "precommit": "lint-staged",
-    "test": "vitest run",
-    "test:update": "vitest run --update-snapshots"
-  },
   "lint-staged": {
     "{src,test}/**/*.{ts,tsx}": [
       "oxlint --fix",
@@ -65,9 +52,9 @@
     "@mantine/core": ">=8",
     "@mantine/dates": ">=8",
     "@mantine/hooks": ">=8",
-    "@rjsf/core": "^6.6.x",
-    "@rjsf/utils": "^6.6.x",
-    "react": ">=18"
+    "react": ">=18",
+    "@rjsf/core": "^6.7.0",
+    "@rjsf/utils": "^6.7.0"
   },
   "devDependencies": {
     "@mantine/core": "^8.3.18",
@@ -75,11 +62,14 @@
     "@mantine/hooks": "^8.3.18",
     "@restart/hooks": "^0.6.2",
     "@restart/ui": "^1.9.4",
-    "@rjsf/core": "6.6.1",
-    "@rjsf/snapshot-tests": "6.6.1",
-    "@rjsf/utils": "6.6.1",
-    "@rjsf/validator-ajv8": "6.6.1",
-    "uncontrollable": "^9.0.0"
+    "uncontrollable": "^9.0.0",
+    "@rjsf/utils": "^6.7.0",
+    "@rjsf/validator-ajv8": "^6.7.0",
+    "@rjsf/core": "^6.7.0",
+    "@rjsf/snapshot-tests": "^6.7.0"
+  },
+  "dependencies": {
+    "dayjs": "^1.11.21"
   },
   "publishConfig": {
     "access": "public"
@@ -106,5 +96,18 @@
     "type": "git",
     "url": "git+https://github.com/rjsf-team/react-jsonschema-form.git"
   },
-  "license": "Apache-2.0"
-}
+  "license": "Apache-2.0",
+  "scripts": {
+    "build:ts": "tsc -b tsconfig.build.json && tsc-alias -p tsconfig.build.json",
+    "build:cjs": "esbuild ./src/index.ts --bundle --outfile=dist/index.cjs --sourcemap --packages=external --format=cjs",
+    "build:esm": "esbuild ./src/index.ts --bundle --outfile=dist/mantine.esm.js --sourcemap --packages=external --format=esm",
+    "build:umd": "rollup dist/mantine.esm.js --format=umd --file=dist/mantine.umd.js --name=@rjsf/mantine",
+    "build": "pnpm run build:ts && pnpm run build:cjs && pnpm run build:esm && pnpm run build:umd",
+    "cs-check": "oxfmt --check \"{src,test}/**/*.{ts,tsx}\"",
+    "cs-format": "oxfmt \"{src,test}/**/*.{ts,tsx}\"",
+    "lint": "oxlint src test",
+    "precommit": "lint-staged",
+    "test": "vitest run",
+    "test:update": "vitest run --update"
+  }
+}

package/src/Form/index.ts

@@ -1,6 +1,7 @@
-import { ComponentType } from 'react';
-import { FormProps, withTheme } from '@rjsf/core';
-import { FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import type { ComponentType } from 'react';
+import type { FormProps } from '@rjsf/core';
+import { withTheme } from '@rjsf/core';
+import type { FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
 
 import { generateTheme } from '../Theme';
 

package/src/Theme/index.ts

@@ -1,5 +1,5 @@
-import { ThemeProps } from '@rjsf/core';
-import { FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import type { ThemeProps } from '@rjsf/core';
+import type { FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
 
 import { generateTemplates } from '../templates';
 import { generateWidgets } from '../widgets';

package/src/templates/ArrayFieldItemTemplate.tsx

@@ -1,12 +1,6 @@
 import { Box, Flex, Group } from '@mantine/core';
-import {
-  ArrayFieldItemTemplateProps,
-  FormContextType,
-  getTemplate,
-  getUiOptions,
-  RJSFSchema,
-  StrictRJSFSchema,
-} from '@rjsf/utils';
+import type { ArrayFieldItemTemplateProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import { getTemplate, getUiOptions } from '@rjsf/utils';
 
 /** The `ArrayFieldItemTemplate` component is the template used to render an items of an array.
  *

package/src/templates/ArrayFieldTemplate.tsx

@@ -1,13 +1,6 @@
 import { Fieldset, Box, Group } from '@mantine/core';
-import {
-  getTemplate,
-  getUiOptions,
-  ArrayFieldTemplateProps,
-  buttonId,
-  FormContextType,
-  RJSFSchema,
-  StrictRJSFSchema,
-} from '@rjsf/utils';
+import type { ArrayFieldTemplateProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import { getTemplate, getUiOptions, buttonId } from '@rjsf/utils';
 
 /** The `ArrayFieldTemplate` component is the template used to render all items in an array.
  *

package/src/templates/ArrayFieldTitleTemplate.tsx

@@ -1,12 +1,6 @@
 import { Grid, Title } from '@mantine/core';
-import {
-  getUiOptions,
-  titleId,
-  ArrayFieldTitleProps,
-  FormContextType,
-  RJSFSchema,
-  StrictRJSFSchema,
-} from '@rjsf/utils';
+import type { ArrayFieldTitleProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import { getUiOptions, titleId } from '@rjsf/utils';
 
 /** The `ArrayFieldTitleTemplate` component renders a `TitleFieldTemplate` with an `id` derived from
  * the `fieldPathId`.

package/src/templates/BaseInputTemplate.tsx

@@ -1,16 +1,9 @@
-import { ChangeEvent, FocusEvent, MouseEvent, useCallback } from 'react';
+import type { ChangeEvent, FocusEvent, MouseEvent } from 'react';
+import { useCallback } from 'react';
 import { TextInput, NumberInput } from '@mantine/core';
 import { SchemaExamples } from '@rjsf/core';
-import {
-  ariaDescribedByIds,
-  BaseInputTemplateProps,
-  examplesId,
-  getInputProps,
-  labelValue,
-  FormContextType,
-  RJSFSchema,
-  StrictRJSFSchema,
-} from '@rjsf/utils';
+import type { BaseInputTemplateProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import { ariaDescribedByIds, examplesId, getInputProps, labelValue } from '@rjsf/utils';
 
 import { cleanupOptions } from '../utils';
 
@@ -53,27 +46,27 @@ export default function BaseInputTemplate<
   const description = hideLabel ? undefined : options.description || schema.description;
   const themeProps = cleanupOptions(options);
 
-  const handleNumberChange = useCallback((value: number | string) => onChange(value), [onChange]);
+  const handleNumberChange = useCallback((newValue: number | string) => onChange(newValue), [onChange]);
 
   const handleChange = useCallback(
     (e: ChangeEvent<HTMLInputElement>) => {
-      const handler = onChangeOverride ? onChangeOverride : onChange;
-      const value = e.target.value === '' ? options.emptyValue : e.target.value;
-      handler(value);
+      const handler = onChangeOverride || onChange;
+      const newValue = e.target.value === '' ? options.emptyValue : e.target.value;
+      handler(newValue);
     },
     [onChange, onChangeOverride, options],
   );
 
   const handleBlur = useCallback(
     (e: FocusEvent<HTMLInputElement>) => {
-      onBlur(id, e.target && e.target.value);
+      onBlur(id, e.target?.value);
     },
     [onBlur, id],
   );
 
   const handleFocus = useCallback(
     (e: FocusEvent<HTMLInputElement>) => {
-      onFocus(id, e.target && e.target.value);
+      onFocus(id, e.target?.value);
     },
     [onFocus, id],
   );

package/src/templates/ButtonTemplates/AddButton.tsx

@@ -1,4 +1,5 @@
-import { FormContextType, IconButtonProps, RJSFSchema, StrictRJSFSchema, TranslatableString } from '@rjsf/utils';
+import type { FormContextType, IconButtonProps, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import { TranslatableString } from '@rjsf/utils';
 
 import { Plus } from '../icons';
 import IconButton from './IconButton';

package/src/templates/ButtonTemplates/IconButton.tsx

@@ -1,6 +1,9 @@
-import { MouseEventHandler } from 'react';
-import { ActionIcon, ActionIconProps } from '@mantine/core';
-import { FormContextType, IconButtonProps, RJSFSchema, StrictRJSFSchema, TranslatableString } from '@rjsf/utils';
+import type { MouseEventHandler } from 'react';
+import { memo } from 'react';
+import type { ActionIconProps } from '@mantine/core';
+import { ActionIcon } from '@mantine/core';
+import type { FormContextType, IconButtonProps, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import { TranslatableString } from '@rjsf/utils';
 
 import { Copy, ChevronDown, ChevronUp, X } from '../icons';
 
@@ -10,7 +13,7 @@ export type MantineIconButtonProps<
   F extends FormContextType = any,
 > = IconButtonProps<T, S, F> & Omit<ActionIconProps, 'onClick'>;
 
-export default function IconButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+function IconButtonFn<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
   props: MantineIconButtonProps<T, S, F>,
 ) {
   const { icon, iconType = 'sm', color, onClick, uiSchema, registry, ...otherProps } = props;
@@ -25,8 +28,10 @@ export default function IconButton<T = any, S extends StrictRJSFSchema = RJSFSch
     </ActionIcon>
   );
 }
+const IconButton = memo(IconButtonFn) as typeof IconButtonFn;
+export default IconButton;
 
-export function CopyButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+function CopyButtonFn<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
   props: MantineIconButtonProps<T, S, F>,
 ) {
   const {
@@ -36,8 +41,9 @@ export function CopyButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
     <IconButton title={translateString(TranslatableString.CopyButton)} variant='subtle' {...props} icon={<Copy />} />
   );
 }
+export const CopyButton = memo(CopyButtonFn) as typeof CopyButtonFn;
 
-export function MoveDownButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+function MoveDownButtonFn<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
   props: MantineIconButtonProps<T, S, F>,
 ) {
   const {
@@ -52,8 +58,9 @@ export function MoveDownButton<T = any, S extends StrictRJSFSchema = RJSFSchema,
     />
   );
 }
+export const MoveDownButton = memo(MoveDownButtonFn) as typeof MoveDownButtonFn;
 
-export function MoveUpButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+function MoveUpButtonFn<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
   props: MantineIconButtonProps<T, S, F>,
 ) {
   const {
@@ -68,8 +75,9 @@ export function MoveUpButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F
     />
   );
 }
+export const MoveUpButton = memo(MoveUpButtonFn) as typeof MoveUpButtonFn;
 
-export function RemoveButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+function RemoveButtonFn<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
   props: MantineIconButtonProps<T, S, F>,
 ) {
   const {
@@ -85,15 +93,16 @@ export function RemoveButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F
     />
   );
 }
+export const RemoveButton = memo(RemoveButtonFn) as typeof RemoveButtonFn;
 
-export function ClearButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+function ClearButtonFn<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
   props: MantineIconButtonProps<T, S, F>,
 ) {
   const {
     registry: { translateString },
   } = props;
-
   return (
     <IconButton title={translateString(TranslatableString.ClearButton)} variant='subtle' {...props} icon={<X />} />
   );
 }
+export const ClearButton = memo(ClearButtonFn) as typeof ClearButtonFn;

package/src/templates/ButtonTemplates/SubmitButton.tsx

@@ -1,5 +1,6 @@
 import { Button } from '@mantine/core';
-import { getSubmitButtonOptions, FormContextType, RJSFSchema, StrictRJSFSchema, SubmitButtonProps } from '@rjsf/utils';
+import type { FormContextType, RJSFSchema, StrictRJSFSchema, SubmitButtonProps } from '@rjsf/utils';
+import { getSubmitButtonOptions } from '@rjsf/utils';
 
 /** The `SubmitButton` renders a button that represent the `Submit` action on a form
  */

package/src/templates/ButtonTemplates/index.ts

@@ -1,4 +1,4 @@
-import { FormContextType, RJSFSchema, StrictRJSFSchema, TemplatesType } from '@rjsf/utils';
+import type { FormContextType, RJSFSchema, StrictRJSFSchema, TemplatesType } from '@rjsf/utils';
 
 import AddButton from './AddButton';
 import { CopyButton, MoveDownButton, MoveUpButton, RemoveButton, ClearButton } from './IconButton';

package/src/templates/CyclicSchemaExpandTemplate.tsx

@@ -0,0 +1,34 @@
+import { Alert, Button, Group } from '@mantine/core';
+import type { CyclicSchemaExpandProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import { ID_KEY, TranslatableString } from '@rjsf/utils';
+
+import { ExclamationCircle } from './icons';
+
+/** The `CyclicSchemaExpandTemplate` is the template to use to render the cyclic schema expand message and controls
+ *
+ * @param props - The `CyclicSchemaExpandProps` for this component
+ */
+export default function CyclicSchemaExpandTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+>(props: CyclicSchemaExpandProps<T, S, F>) {
+  const { name, fieldPathId, registry, onExpand } = props;
+  const { translateString } = registry;
+  const buttonId = `${fieldPathId[ID_KEY]}-button`;
+  return (
+    <Alert
+      color='yellow'
+      variant='transparent'
+      title={translateString(TranslatableString.CycleDetected, [name])}
+      icon={<ExclamationCircle />}
+      mt='md'
+    >
+      <Group>
+        <Button id={buttonId} size='xs' variant='outline' color='yellow' onClick={() => onExpand(fieldPathId[ID_KEY])}>
+          {translateString(TranslatableString.ExpandButton)}
+        </Button>
+      </Group>
+    </Alert>
+  );
+}

package/src/templates/DescriptionField.tsx

@@ -1,6 +1,6 @@
 import { Text } from '@mantine/core';
 import { RichDescription } from '@rjsf/core';
-import { DescriptionFieldProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import type { DescriptionFieldProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
 
 /** The `DescriptionField` is the template to use to render the description of a field
  *

package/src/templates/ErrorList.tsx

@@ -1,5 +1,6 @@
 import { Alert, Title, List } from '@mantine/core';
-import { ErrorListProps, FormContextType, RJSFSchema, StrictRJSFSchema, TranslatableString } from '@rjsf/utils';
+import type { ErrorListProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import { TranslatableString } from '@rjsf/utils';
 
 import { ExclamationCircle } from './icons';
 
@@ -26,6 +27,7 @@ export default function ErrorList<T = any, S extends StrictRJSFSchema = RJSFSche
     >
       <List>
         {errors.map((error, index) => (
+          // oxlint-disable-next-line react/no-array-index-key
           <List.Item key={`error-${index}`} c='red'>
             {error.stack}
           </List.Item>

package/src/templates/FieldErrorTemplate.tsx

@@ -1,5 +1,6 @@
 import { Box, List } from '@mantine/core';
-import { errorId, FieldErrorProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import type { FieldErrorProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import { errorId } from '@rjsf/utils';
 
 /** The `FieldErrorTemplate` component renders the errors local to the particular field
  *
@@ -10,7 +11,7 @@ export default function FieldErrorTemplate<
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any,
 >({ errors, fieldPathId }: FieldErrorProps<T, S, F>) {
-  if (!errors || !errors.length) {
+  if (!errors?.length) {
     return null;
   }
   // In mantine, errors are handled directly in each component, so there is no need to render a separate error template.
@@ -19,6 +20,7 @@ export default function FieldErrorTemplate<
     <Box id={id} c='red' display='none'>
       <List>
         {errors.map((error, index) => (
+          // oxlint-disable-next-line react/no-array-index-key
           <List.Item key={`field-error-${index}`}>{error}</List.Item>
         ))}
       </List>

package/src/templates/FieldHelpTemplate.tsx

@@ -1,6 +1,7 @@
 import { Text } from '@mantine/core';
 import { RichHelp } from '@rjsf/core';
-import { helpId, FieldHelpProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import type { FieldHelpProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import { helpId } from '@rjsf/utils';
 
 /** The `FieldHelpTemplate` component renders any help desired for a field
  *

package/src/templates/FieldTemplate.tsx

@@ -1,12 +1,6 @@
 import { Box } from '@mantine/core';
-import {
-  FieldTemplateProps,
-  FormContextType,
-  RJSFSchema,
-  StrictRJSFSchema,
-  getTemplate,
-  getUiOptions,
-} from '@rjsf/utils';
+import type { FieldTemplateProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import { getTemplate, getUiOptions } from '@rjsf/utils';
 
 /** The `FieldTemplate` component is the template used by `SchemaField` to render any field. It renders the field
  * content, (label, description, children, errors and help) inside a `WrapIfAdditional` component.

package/src/templates/GridTemplate.tsx

@@ -1,5 +1,5 @@
 import { Container, Grid } from '@mantine/core';
-import { GridTemplateProps } from '@rjsf/utils';
+import type { GridTemplateProps } from '@rjsf/utils';
 
 /** Renders a `GridTemplate` for mantine, which is expecting the column sizing information coming in via the
  * extra props provided by the caller, which are spread directly on the `Grid`/`Grid.Col`.

package/src/templates/MultiSchemaFieldTemplate.tsx

@@ -1,5 +1,5 @@
 import { Stack } from '@mantine/core';
-import { FormContextType, MultiSchemaFieldTemplateProps, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import type { FormContextType, MultiSchemaFieldTemplateProps, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
 
 export default function MultiSchemaFieldTemplate<
   T = any,

package/src/templates/ObjectFieldTemplate.tsx

@@ -1,17 +1,13 @@
-import { Box, Container, Group, MantineSpacing, SimpleGrid } from '@mantine/core';
-import {
-  buttonId,
-  canExpand,
-  descriptionId,
+import type { MantineSpacing } from '@mantine/core';
+import { Box, Container, Group, SimpleGrid } from '@mantine/core';
+import type {
   FormContextType,
-  getTemplate,
-  getUiOptions,
   ObjectFieldTemplatePropertyType,
   ObjectFieldTemplateProps,
   RJSFSchema,
   StrictRJSFSchema,
-  titleId,
 } from '@rjsf/utils';
+import { buttonId, canExpand, descriptionId, getTemplate, getUiOptions, titleId } from '@rjsf/utils';
 
 /** The `ObjectFieldTemplate` is the template to use to render all the inner properties of an object along with the
  * title and description if available. If the object is expandable, then an `AddButton` is also rendered after all

package/src/templates/OptionalDataControlsTemplate.tsx

@@ -1,4 +1,4 @@
-import { FormContextType, OptionalDataControlsTemplateProps, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import type { FormContextType, OptionalDataControlsTemplateProps, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
 
 import AddButton from './ButtonTemplates/AddButton';
 import { RemoveButton } from './ButtonTemplates/IconButton';
@@ -28,7 +28,8 @@ export default function OptionalDataControlsTemplate<
         title={label}
       />
     );
-  } else if (onRemoveClick) {
+  }
+  if (onRemoveClick) {
     return (
       <RemoveButton
         id={id}

package/src/templates/TitleField.tsx

@@ -1,5 +1,5 @@
 import { Grid, Title } from '@mantine/core';
-import { FormContextType, TitleFieldProps, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import type { FormContextType, TitleFieldProps, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
 
 /** The `TitleField` is the template to use to render the title of a field
  *

package/src/templates/WrapIfAdditionalTemplate.tsx

@@ -1,14 +1,6 @@
 import { Flex, Grid, TextInput } from '@mantine/core';
-import {
-  ADDITIONAL_PROPERTY_FLAG,
-  UI_OPTIONS_KEY,
-  buttonId,
-  FormContextType,
-  RJSFSchema,
-  StrictRJSFSchema,
-  TranslatableString,
-  WrapIfAdditionalTemplateProps,
-} from '@rjsf/utils';
+import type { FormContextType, RJSFSchema, StrictRJSFSchema, WrapIfAdditionalTemplateProps } from '@rjsf/utils';
+import { ADDITIONAL_PROPERTY_FLAG, UI_OPTIONS_KEY, buttonId, TranslatableString } from '@rjsf/utils';
 
 /** The `WrapIfAdditional` component is used by the `FieldTemplate` to rename, or remove properties that are
  * part of an `additionalProperties` part of a schema.

package/src/templates/icons.tsx

@@ -1,4 +1,4 @@
-import { ComponentPropsWithoutRef } from 'react';
+import type { ComponentPropsWithoutRef } from 'react';
 
 interface IconProps extends ComponentPropsWithoutRef<'svg'> {
   size?: number | string;

package/src/templates/index.ts

@@ -1,10 +1,11 @@
-import { FormContextType, RJSFSchema, StrictRJSFSchema, TemplatesType } from '@rjsf/utils';
+import type { FormContextType, RJSFSchema, StrictRJSFSchema, TemplatesType } from '@rjsf/utils';
 
 import ArrayFieldItemTemplate from './ArrayFieldItemTemplate';
 import ArrayFieldTemplate from './ArrayFieldTemplate';
 import ArrayFieldTitleTemplate from './ArrayFieldTitleTemplate';
 import BaseInputTemplate from './BaseInputTemplate';
 import ButtonTemplates from './ButtonTemplates';
+import CyclicSchemaExpandTemplate from './CyclicSchemaExpandTemplate';
 import DescriptionField from './DescriptionField';
 import ErrorList from './ErrorList';
 import FieldErrorTemplate from './FieldErrorTemplate';
@@ -27,6 +28,7 @@ export function generateTemplates<
     ArrayFieldTemplate,
     ArrayFieldTitleTemplate,
     BaseInputTemplate,
+    CyclicSchemaExpandTemplate,
     ButtonTemplates: ButtonTemplates<T, S, F>(),
     DescriptionFieldTemplate: DescriptionField,
     ErrorListTemplate: ErrorList,

package/src/utils.ts

@@ -1,6 +1,6 @@
-import { UIOptionsType } from '@rjsf/utils';
+import type { UIOptionsType } from '@rjsf/utils';
 
-const uiOptionsKeys: Array<keyof UIOptionsType> = [
+const uiOptionsKeys: (keyof UIOptionsType)[] = [
   'emptyValue',
   'classNames',
   'title',

package/src/widgets/CheckboxWidget.tsx

@@ -1,15 +1,8 @@
-import { ReactElement, ChangeEvent, FocusEvent, useCallback } from 'react';
+import type { ReactElement, ChangeEvent, FocusEvent } from 'react';
+import { useCallback } from 'react';
 import { Checkbox } from '@mantine/core';
-import {
-  descriptionId,
-  getTemplate,
-  StrictRJSFSchema,
-  RJSFSchema,
-  FormContextType,
-  WidgetProps,
-  labelValue,
-  ariaDescribedByIds,
-} from '@rjsf/utils';
+import type { StrictRJSFSchema, RJSFSchema, FormContextType, WidgetProps } from '@rjsf/utils';
+import { descriptionId, getTemplate, labelValue, ariaDescribedByIds } from '@rjsf/utils';
 
 /** The `CheckBoxWidget` is a widget for rendering boolean properties.
  *  It is typically used to represent a boolean.