@rjsf/shadcn 6.0.2 → 6.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rjsf/shadcn",
-  "version": "6.0.2",
+  "version": "6.1.1",
   "main": "dist/index.js",
   "module": "lib/index.js",
   "typings": "lib/index.d.ts",
@@ -45,11 +45,12 @@
   "scripts": {
     "build:css": "tsx build-css.ts",
     "compileReplacer": "tsc -p tsconfig.replacer.json && move-file lodashReplacer.js lodashReplacer.cjs",
+    "copy-resources": "cp dist/*.css resources",
     "build:ts": "npm run compileReplacer && rimraf ./lib && 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/rjsf-shadcn.esm.js --sourcemap --packages=external --format=esm",
     "build:umd": "rollup dist/rjsf-shadcn.esm.js --format=umd --file=dist/rjsf-shadcn.umd.js --name=@rjsf/rjsf-shadcn",
-    "build": "npm run build:ts && npm run build:cjs && npm run build:esm && npm run build:umd && npm run build:css",
+    "build": "npm run build:ts && npm run build:cjs && npm run build:esm && npm run build:umd && npm run build:css && npm run copy-resources",
     "cs-check": "prettier -l \"{src,test}/**/*.ts?(x)\"",
     "cs-format": "prettier \"{src,test}/**/*.ts?(x)\" --write",
     "lint": "eslint src test",

package/src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx

@@ -16,20 +16,24 @@ export default function ArrayFieldItemTemplate<
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any,
 >(props: ArrayFieldItemTemplateProps<T, S, F>) {
-  const { children, buttonsProps, hasToolbar, uiSchema, registry } = props;
+  const { children, buttonsProps, displayLabel, hasDescription, hasToolbar, uiSchema, registry } = props;
   const uiOptions = getUiOptions<T, S, F>(uiSchema);
   const ArrayFieldItemButtonsTemplate = getTemplate<'ArrayFieldItemButtonsTemplate', T, S, F>(
     'ArrayFieldItemButtonsTemplate',
     registry,
     uiOptions,
   );
+  const margin = hasDescription ? -6 : 22;
   return (
     <div>
       <div className='mb-2 flex flex-row flex-wrap items-center'>
         <div className='grow shrink'>{children}</div>
         <div className='flex items-end justify-end p-0.5'>
           {hasToolbar && (
-            <div className='flex gap-2'>
+            <div
+              className='flex gap-2'
+              style={{ marginLeft: '5px', marginTop: displayLabel ? `${margin}px` : undefined }}
+            >
               <ArrayFieldItemButtonsTemplate {...buttonsProps} />
             </div>
           )}

package/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx

@@ -71,7 +71,7 @@ export default function ArrayFieldTemplate<
             {!showOptionalDataControlInTitle ? optionalDataControl : undefined}
             {items}
             {canAdd && (
-              <div className='mt-2 flex'>
+              <div className='mt-2 flex justify-end'>
                 <AddButton
                   id={buttonId(fieldPathId, 'add')}
                   className='rjsf-array-item-add'

package/src/FieldHelpTemplate/FieldHelpTemplate.tsx

@@ -1,5 +1,5 @@
 import { FieldHelpProps, FormContextType, RJSFSchema, StrictRJSFSchema, helpId } from '@rjsf/utils';
-
+import { RichHelp } from '@rjsf/core';
 import { cn } from '../lib/utils';
 
 /** The `FieldHelpTemplate` component renders any help desired for a field
@@ -11,14 +11,17 @@ export default function FieldHelpTemplate<
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any,
 >(props: FieldHelpProps<T, S, F>) {
-  const { fieldPathId, help, hasErrors } = props;
+  const { fieldPathId, help, uiSchema, registry, hasErrors } = props;
   if (!help) {
     return null;
   }
-  const id = helpId(fieldPathId);
+
   return (
-    <span className={cn('text-xs font-medium text-muted-foreground', { ' text-destructive': hasErrors })} id={id}>
-      {help}
+    <span
+      className={cn('text-xs font-medium text-muted-foreground', { 'text-destructive': hasErrors })}
+      id={helpId(fieldPathId)}
+    >
+      <RichHelp help={help} registry={registry} uiSchema={uiSchema} />
     </span>
   );
 }

package/src/FieldTemplate/FieldTemplate.tsx

@@ -58,9 +58,11 @@ export default function FieldTemplate<
       disabled={disabled}
       id={id}
       label={label}
+      displayLabel={displayLabel}
       onKeyRename={onKeyRename}
       onKeyRenameBlur={onKeyRenameBlur}
       onRemoveProperty={onRemoveProperty}
+      rawDescription={rawDescription}
       readonly={readonly}
       required={required}
       schema={schema}

package/src/ObjectFieldTemplate/ObjectFieldTemplate.tsx

@@ -78,14 +78,16 @@ export default function ObjectFieldTemplate<
           </div>
         ))}
         {canExpand(schema, uiSchema, formData) ? (
-          <AddButton
-            id={buttonId(fieldPathId, 'add')}
-            onClick={onAddProperty}
-            disabled={disabled || readonly}
-            className='rjsf-object-property-expand'
-            uiSchema={uiSchema}
-            registry={registry}
-          />
+          <div className='mt-2 flex justify-end'>
+            <AddButton
+              id={buttonId(fieldPathId, 'add')}
+              onClick={onAddProperty}
+              disabled={disabled || readonly}
+              className='rjsf-object-property-expand'
+              uiSchema={uiSchema}
+              registry={registry}
+            />
+          </div>
         ) : null}
       </div>
     </>

package/src/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.tsx

@@ -27,8 +27,10 @@ export default function WrapIfAdditionalTemplate<
   disabled,
   id,
   label,
+  displayLabel,
   onRemoveProperty,
   onKeyRenameBlur,
+  rawDescription,
   readonly,
   required,
   schema,
@@ -49,16 +51,20 @@ export default function WrapIfAdditionalTemplate<
     );
   }
 
+  const marginDesc = rawDescription ? -28 : 0;
+  const margin = displayLabel ? 22 + marginDesc : 0;
   const keyId = `${id}-key`;
 
   return (
     <>
-      <div className={`flex flex-row items-center gap-2 relative w-full ${classNames}`} style={style}>
-        <div className='flex flex-col w-full gap-2 line-clamp-1'>
-          <div className='flex-grow'>
-            <label htmlFor={keyId} className='pt-2 text-sm font-medium text-muted-foreground mb-4 line-clamp-1'>
-              {keyLabel}
-            </label>
+      <div className={`grid grid-cols-12 col-span-12 items-center gap-2 ${classNames}`} style={style}>
+        <div className='grid gap-2 col-span-5'>
+          <div className='flex flex-col gap-2'>
+            {displayLabel && (
+              <label htmlFor={keyId} className='text-sm font-medium text-muted-foreground leading-none'>
+                {keyLabel}
+              </label>
+            )}
             <div className='pl-0.5'>
               <Input
                 required={required}
@@ -68,22 +74,28 @@ export default function WrapIfAdditionalTemplate<
                 name={keyId}
                 onBlur={!readonly ? onKeyRenameBlur : undefined}
                 type='text'
-                className='mt-1 w-full border shadow-sm'
+                className='w-full border shadow-sm'
               />
             </div>
+            {!!rawDescription && (
+              <span className='text-xs font-medium text-muted-foreground'>
+                <div className='text-sm text-muted-foreground'>&nbsp;</div>
+              </span>
+            )}
           </div>
-          <div className='flex-grow pr-0.5'>{children}</div>
         </div>
-
-        <RemoveButton
-          id={buttonId(id, 'remove')}
-          iconType='block'
-          className='rjsf-object-property-remove w-full'
-          disabled={disabled || readonly}
-          onClick={onRemoveProperty}
-          uiSchema={uiSchema}
-          registry={registry}
-        />
+        <div className='grid gap-2 col-span-6 pr-0.5'>{children}</div>
+        <div className='grid gap-2 col-span-1' style={{ marginTop: `${margin}px` }}>
+          <RemoveButton
+            id={buttonId(id, 'remove')}
+            iconType='block'
+            className='rjsf-object-property-remove w-full'
+            disabled={disabled || readonly}
+            onClick={onRemoveProperty}
+            uiSchema={uiSchema}
+            registry={registry}
+          />
+        </div>
       </div>
       <Separator dir='horizontal' className='mt-2' />
     </>