@rjsf/mantine 6.0.1 → 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/lib/widgets/CheckboxWidget.js

@@ -2,7 +2,6 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { useCallback } from 'react';
 import { descriptionId, getTemplate, labelValue, ariaDescribedByIds, } from '@rjsf/utils';
 import { Checkbox } from '@mantine/core';
-import { cleanupOptions } from '../utils';
 /** The `CheckBoxWidget` is a widget for rendering boolean properties.
  *  It is typically used to represent a boolean.
  *
@@ -10,7 +9,6 @@ import { cleanupOptions } from '../utils';
  */
 export default function CheckboxWidget(props) {
     const { id, name, htmlName, value = false, required, disabled, readonly, autofocus, label, hideLabel, schema, rawErrors, options, onChange, onBlur, onFocus, registry, uiSchema, } = props;
-    const themeProps = cleanupOptions(options);
     const DescriptionFieldTemplate = getTemplate('DescriptionFieldTemplate', registry, options);
     const handleCheckboxChange = useCallback((e) => {
         if (!disabled && !readonly && onChange) {
@@ -28,6 +26,6 @@ export default function CheckboxWidget(props) {
         }
     }, [onFocus, id]);
     const description = options.description || schema.description;
-    return (_jsxs(_Fragment, { children: [!hideLabel && !!description && (_jsx(DescriptionFieldTemplate, { id: descriptionId(id), description: description, schema: schema, uiSchema: uiSchema, registry: registry })), _jsx(Checkbox, { id: id, name: htmlName || name, label: labelValue(label || undefined, hideLabel, false), disabled: disabled || readonly, required: required, autoFocus: autofocus, checked: typeof value === 'undefined' ? false : value === 'true' || value, onChange: handleCheckboxChange, onBlur: handleBlur, onFocus: handleFocus, error: rawErrors && rawErrors.length > 0 ? rawErrors.join('\n') : undefined, "aria-describedby": ariaDescribedByIds(id), ...themeProps })] }));
+    return (_jsxs(_Fragment, { children: [!hideLabel && !!description && (_jsx(DescriptionFieldTemplate, { id: descriptionId(id), description: description, schema: schema, uiSchema: uiSchema, registry: registry })), _jsx(Checkbox, { id: id, name: htmlName || name, label: labelValue(label || undefined, hideLabel, false), disabled: disabled || readonly, required: required, autoFocus: autofocus, checked: typeof value === 'undefined' ? false : value === 'true' || value, onChange: handleCheckboxChange, onBlur: handleBlur, onFocus: handleFocus, error: rawErrors && rawErrors.length > 0 ? rawErrors.join('\n') : undefined, "aria-describedby": ariaDescribedByIds(id) })] }));
 }
 //# sourceMappingURL=CheckboxWidget.js.map

package/lib/widgets/CheckboxWidget.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxWidget.js","sourceRoot":"","sources":["../../src/widgets/CheckboxWidget.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"CheckboxWidget.js","sourceRoot":"","sources":["../../src/widgets/CheckboxWidget.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAyC,WAAW,EAAE,MAAM,OAAO,CAAC;AAC3E,OAAO,EACL,aAAa,EACb,WAAW,EAKX,UAAU,EACV,kBAAkB,GACnB,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,cAAc,CAIpC,KAA2B;IAC3B,MAAM,EACJ,EAAE,EACF,IAAI,EACJ,QAAQ,EACR,KAAK,GAAG,KAAK,EACb,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,KAAK,EACL,SAAS,EACT,MAAM,EACN,SAAS,EACT,OAAO,EACP,QAAQ,EACR,MAAM,EACN,OAAO,EACP,QAAQ,EACR,QAAQ,GACT,GAAG,KAAK,CAAC;IAEV,MAAM,wBAAwB,GAAG,WAAW,CAC1C,0BAA0B,EAC1B,QAAQ,EACR,OAAO,CACR,CAAC;IAEF,MAAM,oBAAoB,GAAG,WAAW,CACtC,CAAC,CAAgC,EAAE,EAAE;QACnC,IAAI,CAAC,QAAQ,IAAI,CAAC,QAAQ,IAAI,QAAQ,EAAE,CAAC;YACvC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QACpC,CAAC;IACH,CAAC,EACD,CAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAC/B,CAAC;IAEF,MAAM,UAAU,GAAG,WAAW,CAC5B,CAAC,EAAE,MAAM,EAAgC,EAAE,EAAE;QAC3C,IAAI,MAAM,EAAE,CAAC;YACX,MAAM,CAAC,EAAE,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC;QAC7B,CAAC;IACH,CAAC,EACD,CAAC,MAAM,EAAE,EAAE,CAAC,CACb,CAAC;IAEF,MAAM,WAAW,GAAG,WAAW,CAC7B,CAAC,EAAE,MAAM,EAAgC,EAAE,EAAE;QAC3C,IAAI,OAAO,EAAE,CAAC;YACZ,OAAO,CAAC,EAAE,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC;QAC9B,CAAC;IACH,CAAC,EACD,CAAC,OAAO,EAAE,EAAE,CAAC,CACd,CAAC;IAEF,MAAM,WAAW,GAAG,OAAO,CAAC,WAAW,IAAI,MAAM,CAAC,WAAW,CAAC;IAC9D,OAAO,CACL,8BACG,CAAC,SAAS,IAAI,CAAC,CAAC,WAAW,IAAI,CAC9B,KAAC,wBAAwB,IACvB,EAAE,EAAE,aAAa,CAAC,EAAE,CAAC,EACrB,WAAW,EAAE,WAAW,EACxB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,GAClB,CACH,EACD,KAAC,QAAQ,IACP,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,QAAQ,IAAI,IAAI,EACtB,KAAK,EAAE,UAAU,CAAC,KAAK,IAAI,SAAS,EAAE,SAAS,EAAE,KAAK,CAAC,EACvD,QAAQ,EAAE,QAAQ,IAAI,QAAQ,EAC9B,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,KAAK,KAAK,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,KAAK,MAAM,IAAI,KAAK,EACzE,QAAQ,EAAE,oBAAoB,EAC9B,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,GACxC,IACD,CACJ,CAAC;AACJ,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rjsf/mantine",
-  "version": "6.0.1",
+  "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',

package/src/widgets/CheckboxWidget.tsx

@@ -11,8 +11,6 @@ import {
 } from '@rjsf/utils';
 import { Checkbox } from '@mantine/core';
 
-import { cleanupOptions } from '../utils';
-
 /** The `CheckBoxWidget` is a widget for rendering boolean properties.
  *  It is typically used to represent a boolean.
  *
@@ -44,8 +42,6 @@ export default function CheckboxWidget<
     uiSchema,
   } = props;
 
-  const themeProps = cleanupOptions(options);
-
   const DescriptionFieldTemplate = getTemplate<'DescriptionFieldTemplate', T, S, F>(
     'DescriptionFieldTemplate',
     registry,
@@ -104,7 +100,6 @@ export default function CheckboxWidget<
         onFocus={handleFocus}
         error={rawErrors && rawErrors.length > 0 ? rawErrors.join('\n') : undefined}
         aria-describedby={ariaDescribedByIds(id)}
-        {...themeProps}
       />
     </>
   );