@rjsf/mantine 6.0.2 → 6.1.0

package/lib/utils.js

@@ -2,6 +2,7 @@ const uiOptionsKeys = [
     'emptyValue',
     'classNames',
     'title',
+    'label',
     'help',
     'autocomplete',
     'disabled',

package/lib/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAEA,MAAM,aAAa,GAA+B;IAChD,YAAY;IACZ,YAAY;IACZ,OAAO;IACP,MAAM;IACN,cAAc;IACd,UAAU;IACV,cAAc;IACd,WAAW;IACX,UAAU;IACV,OAAO;IACP,aAAa;IACb,QAAQ;IACR,WAAW;IACX,qBAAqB;IACrB,QAAQ;IACR,WAAW;IACX,SAAS;IACT,UAAU;IACV,WAAW;IACX,WAAW;IACX,6BAA6B;IAC7B,aAAa;IACb,6BAA6B;CAC9B,CAAC;AAEF,MAAM,UAAU,cAAc,CAAmB,OAAU;IACzD,MAAM,MAAM,GAAG,EAAO,CAAC;IACvB,KAAK,MAAM,GAAG,IAAI,OAAO,EAAE,CAAC;QAC1B,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,GAA0B,CAAC,EAAE,CAAC;YACxD,MAAM,CAAC,GAAG,CAAC,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC;QAC7B,CAAC;IACH,CAAC;IACD,OAAO,MAAsC,CAAC;AAChD,CAAC"}
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAEA,MAAM,aAAa,GAA+B;IAChD,YAAY;IACZ,YAAY;IACZ,OAAO;IACP,OAAO;IACP,MAAM;IACN,cAAc;IACd,UAAU;IACV,cAAc;IACd,WAAW;IACX,UAAU;IACV,OAAO;IACP,aAAa;IACb,QAAQ;IACR,WAAW;IACX,qBAAqB;IACrB,QAAQ;IACR,WAAW;IACX,SAAS;IACT,UAAU;IACV,WAAW;IACX,WAAW;IACX,6BAA6B;IAC7B,aAAa;IACb,6BAA6B;CAC9B,CAAC;AAEF,MAAM,UAAU,cAAc,CAAmB,OAAU;IACzD,MAAM,MAAM,GAAG,EAAO,CAAC;IACvB,KAAK,MAAM,GAAG,IAAI,OAAO,EAAE,CAAC;QAC1B,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,GAA0B,CAAC,EAAE,CAAC;YACxD,MAAM,CAAC,GAAG,CAAC,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC;QAC7B,CAAC;IACH,CAAC;IACD,OAAO,MAAsC,CAAC;AAChD,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rjsf/mantine",
-  "version": "6.0.2",
+  "version": "6.1.0",
   "main": "dist/index.js",
   "module": "lib/index.js",
   "typings": "lib/index.d.ts",

package/src/templates/ArrayFieldTitleTemplate.tsx

@@ -6,7 +6,7 @@ import {
   RJSFSchema,
   StrictRJSFSchema,
 } from '@rjsf/utils';
-import { Title } from '@mantine/core';
+import { Grid, Title } from '@mantine/core';
 
 /** The `ArrayFieldTitleTemplate` component renders a `TitleFieldTemplate` with an `id` derived from
  * the `fieldPathId`.
@@ -18,16 +18,25 @@ export default function ArrayFieldTitleTemplate<
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any,
 >(props: ArrayFieldTitleProps<T, S, F>) {
-  const { fieldPathId, title, uiSchema, registry } = props;
+  const { fieldPathId, title, uiSchema, registry, optionalDataControl } = props;
 
   const options = getUiOptions<T, S, F>(uiSchema, registry.globalUiOptions);
   const { label: displayLabel = true } = options;
   if (!title || !displayLabel) {
     return null;
   }
-  return (
+  let heading = title ? (
     <Title id={titleId(fieldPathId)} order={4} fw='normal'>
       {title}
     </Title>
-  );
+  ) : null;
+  if (optionalDataControl) {
+    heading = (
+      <Grid>
+        <Grid.Col span='auto'>{heading}</Grid.Col>
+        <Grid.Col span='content'>{optionalDataControl}</Grid.Col>
+      </Grid>
+    );
+  }
+  return heading;
 }

package/src/templates/BaseInputTemplate.tsx

@@ -47,6 +47,7 @@ export default function BaseInputTemplate<
   } = props;
 
   const inputProps = getInputProps<T, S, F>(schema, type, options, false);
+  const description = hideLabel ? undefined : options.description || schema.description;
   const themeProps = cleanupOptions(options);
 
   const handleNumberChange = useCallback((value: number | string) => onChange(value), [onChange]);
@@ -74,44 +75,40 @@ export default function BaseInputTemplate<
     [onFocus, id],
   );
 
+  const componentProps = {
+    id,
+    name: htmlName || id,
+    label: labelValue(label || undefined, hideLabel, false),
+    required,
+    autoFocus: autofocus,
+    disabled: disabled || readonly,
+    onBlur: !readonly ? handleBlur : undefined,
+    onFocus: !readonly ? handleFocus : undefined,
+    placeholder,
+    error: rawErrors && rawErrors.length > 0 ? rawErrors.join('\n') : undefined,
+    list: schema.examples ? examplesId(id) : undefined,
+  };
+
   const input =
     inputProps.type === 'number' || inputProps.type === 'integer' ? (
       <NumberInput
-        id={id}
-        name={htmlName || id}
-        label={labelValue(label || undefined, hideLabel, false)}
-        required={required}
-        autoFocus={autofocus}
-        disabled={disabled || readonly}
-        onBlur={!readonly ? handleBlur : undefined}
         onChange={!readonly ? handleNumberChange : undefined}
-        onFocus={!readonly ? handleFocus : undefined}
-        placeholder={placeholder}
-        error={rawErrors && rawErrors.length > 0 ? rawErrors.join('\n') : undefined}
-        list={schema.examples ? examplesId(id) : undefined}
+        {...componentProps}
         {...inputProps}
         {...themeProps}
         step={typeof inputProps.step === 'number' ? inputProps.step : 1}
         type='text'
+        description={description}
         value={value}
         aria-describedby={ariaDescribedByIds(id, !!schema.examples)}
       />
     ) : (
       <TextInput
-        id={id}
-        name={htmlName || id}
-        label={labelValue(label || undefined, hideLabel, false)}
-        required={required}
-        autoFocus={autofocus}
-        disabled={disabled || readonly}
-        onBlur={!readonly ? handleBlur : undefined}
         onChange={!readonly ? handleChange : undefined}
-        onFocus={!readonly ? handleFocus : undefined}
-        placeholder={placeholder}
-        error={rawErrors && rawErrors.length > 0 ? rawErrors.join('\n') : undefined}
-        list={schema.examples ? examplesId(id) : undefined}
+        {...componentProps}
         {...inputProps}
         {...themeProps}
+        description={description}
         value={value}
         aria-describedby={ariaDescribedByIds(id, !!schema.examples)}
       />

package/src/templates/FieldHelpTemplate.tsx

@@ -1,5 +1,6 @@
 import { helpId, FieldHelpProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
 import { Text } from '@mantine/core';
+import { RichHelp } from '@rjsf/core';
 
 /** The `FieldHelpTemplate` component renders any help desired for a field
  *
@@ -10,17 +11,15 @@ export default function FieldHelpTemplate<
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any,
 >(props: FieldHelpProps<T, S, F>) {
-  const { fieldPathId, help } = props;
+  const { fieldPathId, help, uiSchema, registry } = props;
 
   if (!help) {
     return null;
   }
 
-  const id = helpId(fieldPathId);
-
   return (
-    <Text id={id} size='sm' my='xs' c='dimmed'>
-      {help}
+    <Text id={helpId(fieldPathId)} size='sm' my='xs' c='dimmed'>
+      <RichHelp help={help} registry={registry} uiSchema={uiSchema} />
     </Text>
   );
 }

package/src/templates/FieldTemplate.tsx

@@ -53,6 +53,8 @@ export default function FieldTemplate<
       classNames={classNames}
       style={style}
       label={label}
+      displayLabel={displayLabel}
+      rawDescription={rawDescription}
       schema={schema}
       uiSchema={uiSchema}
       registry={registry}

package/src/templates/WrapIfAdditionalTemplate.tsx

@@ -25,6 +25,8 @@ export default function WrapIfAdditionalTemplate<
     classNames,
     style,
     label,
+    displayLabel,
+    rawDescription,
     required,
     readonly,
     disabled,
@@ -61,32 +63,33 @@ export default function WrapIfAdditionalTemplate<
       <Flex gap='xs' align='end' justify='center'>
         <Grid w='100%' align='center'>
           <Grid.Col span={6} className='form-additional'>
-            <div className='form-group'>
-              <TextInput
-                className='form-group'
-                label={keyLabel}
-                defaultValue={label}
-                required={required}
-                disabled={disabled || readonly}
-                id={`${id}-key`}
-                name={`${id}-key`}
-                onBlur={!readonly ? onKeyRenameBlur : undefined}
-              />
-            </div>
+            <TextInput
+              className='form-group'
+              label={displayLabel ? keyLabel : undefined}
+              defaultValue={label}
+              required={required}
+              description={rawDescription ? '\u00A0' : undefined}
+              disabled={disabled || readonly}
+              id={`${id}-key`}
+              name={`${id}-key`}
+              onBlur={!readonly ? onKeyRenameBlur : undefined}
+            />
           </Grid.Col>
           <Grid.Col span={6} className='form-additional'>
             {children}
           </Grid.Col>
         </Grid>
-        <RemoveButton
-          id={buttonId(id, 'remove')}
-          iconType='sm'
-          className='rjsf-array-item-remove'
-          disabled={disabled || readonly}
-          onClick={onRemoveProperty}
-          uiSchema={buttonUiOptions}
-          registry={registry}
-        />
+        <div>
+          <RemoveButton
+            id={buttonId(id, 'remove')}
+            iconType='sm'
+            className='rjsf-array-item-remove'
+            disabled={disabled || readonly}
+            onClick={onRemoveProperty}
+            uiSchema={buttonUiOptions}
+            registry={registry}
+          />
+        </div>
       </Flex>
     </div>
   );

package/src/utils.ts

@@ -4,6 +4,7 @@ const uiOptionsKeys: Array<keyof UIOptionsType> = [
   'emptyValue',
   'classNames',
   'title',
+  'label',
   'help',
   'autocomplete',
   'disabled',