betterstart-cli 0.0.12 → 0.0.14

package/dist/assets/shared-assets/react-admin/custom/nested-object-list-field.tsx

@@ -0,0 +1,211 @@
+'use client'
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger
+} from '@admin/components/ui/accordion'
+import { Button } from '@admin/components/ui/button'
+import { Card, CardContent, CardHeader } from '@admin/components/ui/card'
+import { FormDescription, FormField, FormItem, FormLabel } from '@admin/components/ui/form'
+import { cloneDefaultValue, createListItemKey } from '@admin/utils/form/list-field'
+import { cn } from '@admin/utils/shared/cn'
+import { Plus, X } from 'lucide-react'
+import * as React from 'react'
+import { useFormContext, useWatch } from 'react-hook-form'
+
+interface NestedObjectListFieldProps {
+  name: string
+  label: string
+  singularLabel: string
+  defaultValue: Record<string, unknown>
+  children: (index: number) => React.ReactNode
+  className?: string
+  description?: string
+  disabled?: boolean
+  hideLabel?: boolean
+  maxItems?: number
+  renderTitle?: (index: number) => React.ReactNode
+  validatePaths?: string[]
+}
+
+export function NestedObjectListField({
+  name,
+  label,
+  singularLabel,
+  defaultValue,
+  children,
+  className,
+  description,
+  disabled,
+  hideLabel,
+  maxItems,
+  renderTitle,
+  validatePaths
+}: NestedObjectListFieldProps) {
+  const { control, setValue, trigger } = useFormContext()
+  const watchedItems = useWatch({
+    control,
+    name
+  })
+  const items = Array.isArray(watchedItems) ? watchedItems : []
+  const [expanded, setExpanded] = React.useState('')
+  const [itemKeys, setItemKeys] = React.useState<string[]>([])
+  const canAddMore = !maxItems || items.length < maxItems
+
+  React.useEffect(() => {
+    setItemKeys((currentKeys) => {
+      if (currentKeys.length === items.length) return currentKeys
+      if (currentKeys.length > items.length) {
+        return currentKeys.slice(0, items.length)
+      }
+
+      const missingKeyCount = items.length - currentKeys.length
+      const nextKeys = Array.from({ length: missingKeyCount }, createListItemKey)
+      return [...currentKeys, ...nextKeys]
+    })
+  }, [items.length])
+
+  async function handleAdd() {
+    if (!canAddMore) return
+    if (expanded) {
+      const isExpandedItemValid = await validateExpandedItem()
+      if (!isExpandedItemValid) return
+    }
+
+    const nextValue = cloneDefaultValue(defaultValue) as Record<string, unknown>
+    const nextItems = [...items, nextValue]
+    setValue(name, nextItems, {
+      shouldDirty: true,
+      shouldValidate: false
+    })
+    setItemKeys((currentKeys) => [...currentKeys, createListItemKey()])
+    setExpanded(`item-${nextItems.length}`)
+  }
+
+  const handleRemove = (index: number) => {
+    if (disabled) return
+
+    const nextItems = items.filter((_, itemIndex) => itemIndex !== index)
+    setValue(name, nextItems, {
+      shouldDirty: true,
+      shouldValidate: false
+    })
+    const keepOtherKeys = (_: string, itemIndex: number) => itemIndex !== index
+    setItemKeys((currentKeys) => currentKeys.filter(keepOtherKeys))
+    setExpanded('')
+  }
+
+  async function validateExpandedItem() {
+    if (!expanded) return true
+
+    const expandedIndex = Number(expanded.replace('item-', '')) - 1
+    if (expandedIndex < 0) return true
+
+    const itemPath = `${name}.${expandedIndex}`
+    const paths =
+      validatePaths && validatePaths.length > 0
+        ? validatePaths.map((path) => `${itemPath}.${path}`)
+        : [itemPath]
+
+    return trigger(paths)
+  }
+
+  async function handleExpandedChange(nextExpanded: string) {
+    if (expanded && nextExpanded && nextExpanded !== expanded) {
+      const isExpandedItemValid = await validateExpandedItem()
+      if (!isExpandedItemValid) return
+    }
+
+    setExpanded(nextExpanded)
+  }
+
+  const getTitle = (index: number) => {
+    if (renderTitle) return renderTitle(index)
+    return `${singularLabel} ${index + 1}`
+  }
+
+  return (
+    <FormItem className={cn('space-y-4', className)}>
+      {items.length === 0 ? (
+        <Card>
+          <CardContent className="flex flex-col items-center justify-center">
+            <p className="text-muted-foreground">No {label} added yet.</p>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={handleAdd}
+              disabled={disabled || !canAddMore}
+            >
+              <Plus className="size-3" />
+              Add {singularLabel}
+            </Button>
+          </CardContent>
+        </Card>
+      ) : (
+        <Card className="space-y-4 border-t border-border pt-4">
+          <CardHeader className="flex items-center justify-between pl-5">
+            <FormField
+              control={control}
+              name={name}
+              render={() => (
+                <FormItem className="flex flex-col gap-1">
+                  <FormLabel className={cn({ 'sr-only': hideLabel })}>{label}</FormLabel>
+                  {description ? <FormDescription>{description}</FormDescription> : null}
+                </FormItem>
+              )}
+            />
+            <Button
+              type="button"
+              variant="outline"
+              onClick={handleAdd}
+              disabled={disabled || !canAddMore}
+            >
+              <Plus className="size-3" />
+              Add {singularLabel}
+            </Button>
+          </CardHeader>
+
+          <CardContent className="p-0!">
+            <Accordion
+              type="single"
+              collapsible
+              value={expanded}
+              onValueChange={handleExpandedChange}
+              className="border-none"
+            >
+              {items.map((_, index) => (
+                <AccordionItem
+                  key={itemKeys[index] ?? `${name}-${index}`}
+                  value={`item-${index + 1}`}
+                  className="bg-transparent!"
+                >
+                  <div className="relative py-1">
+                    <AccordionTrigger className="flex min-h-12 w-full items-center gap-2 py-2">
+                      <span className="w-full pr-16">{getTitle(index)}</span>
+                    </AccordionTrigger>
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="icon-sm"
+                      className="absolute right-10 top-1/2 shrink-0 -translate-y-1/2"
+                      aria-label={`Remove ${singularLabel}`}
+                      onClick={() => handleRemove(index)}
+                      disabled={disabled}
+                    >
+                      <X />
+                    </Button>
+                  </div>
+                  <AccordionContent className="space-y-5 border rounded-lg border-border p-5 bg-background mb-4">
+                    {children(index)}
+                  </AccordionContent>
+                </AccordionItem>
+              ))}
+            </Accordion>
+          </CardContent>
+        </Card>
+      )}
+    </FormItem>
+  )
+}

package/dist/assets/shared-assets/react-admin/schema.json

@@ -57,9 +57,6 @@
     "filters": {
       "$ref": "#/$defs/filters"
     },
-    "autoSlugify": {
-      "$ref": "#/$defs/autoSlugify"
-    },
     "navGroup": {
       "type": "object",
       "description": "Sidebar navigation group. Items sharing the same group label appear together.",
@@ -1401,26 +1398,6 @@
         }
       }
     },
-    "autoSlugify": {
-      "type": "object",
-      "description": "Auto-slugification configuration for generating URL-friendly slugs from fields",
-      "additionalProperties": false,
-      "properties": {
-        "enabled": {
-          "type": "boolean",
-          "description": "Enable automatic slug generation",
-          "default": true
-        },
-        "sourceField": {
-          "type": "string",
-          "description": "Field to use as source for slug generation (e.g., 'name', 'title')"
-        },
-        "targetField": {
-          "type": "string",
-          "description": "Field to store the generated slug (typically 'slug')"
-        }
-      }
-    },
     "slotLayout": {
       "type": "object",
       "description": "Main/sidebar layout groups for an entity edit form or tab panel.",
@@ -1464,6 +1441,111 @@
         "$ref": "#/$defs/fieldWithCreatableSelect"
       }
     },
+    "fieldArrayWithTitle": {
+      "type": "array",
+      "contains": {
+        "$ref": "#/$defs/fieldWithTitle"
+      }
+    },
+    "fieldWithTitle": {
+      "type": "object",
+      "anyOf": [
+        {
+          "properties": {
+            "name": {
+              "const": "title"
+            },
+            "type": {
+              "enum": ["string", "varchar", "text"]
+            }
+          },
+          "required": ["name", "type"]
+        },
+        {
+          "properties": {
+            "type": {
+              "enum": ["group", "section"]
+            },
+            "fields": {
+              "$ref": "#/$defs/fieldArrayWithTitle"
+            }
+          },
+          "required": ["type", "fields"]
+        },
+        {
+          "properties": {
+            "tabs": {
+              "type": "array",
+              "contains": {
+                "$ref": "#/$defs/tabWithTitle"
+              }
+            }
+          },
+          "required": ["tabs"]
+        }
+      ]
+    },
+    "tabWithTitle": {
+      "type": "object",
+      "anyOf": [
+        {
+          "properties": {
+            "fields": {
+              "$ref": "#/$defs/fieldArrayWithTitle"
+            }
+          },
+          "required": ["fields"]
+        },
+        {
+          "properties": {
+            "slot": {
+              "$ref": "#/$defs/slotLayoutWithTitle"
+            }
+          },
+          "required": ["slot"]
+        }
+      ]
+    },
+    "slotLayoutWithTitle": {
+      "type": "object",
+      "anyOf": [
+        {
+          "properties": {
+            "main": {
+              "properties": {
+                "fields": {
+                  "$ref": "#/$defs/fieldArrayWithTitle"
+                }
+              },
+              "required": ["fields"]
+            }
+          },
+          "required": ["main"]
+        },
+        {
+          "properties": {
+            "sidebar": {
+              "properties": {
+                "fields": {
+                  "$ref": "#/$defs/fieldArrayWithTitle"
+                }
+              },
+              "required": ["fields"]
+            }
+          },
+          "required": ["sidebar"]
+        }
+      ]
+    },
+    "stepWithTitle": {
+      "type": "object",
+      "properties": {
+        "fields": {
+          "$ref": "#/$defs/fieldArrayWithTitle"
+        }
+      },
+      "required": ["fields"]
+    },
     "fieldWithCreatableSelect": {
       "type": "object",
       "anyOf": [
@@ -1634,6 +1716,37 @@
     }
   ],
   "allOf": [
+    {
+      "anyOf": [
+        {
+          "properties": {
+            "fields": {
+              "$ref": "#/$defs/fieldArrayWithTitle"
+            }
+          },
+          "required": ["fields"]
+        },
+        {
+          "properties": {
+            "slot": {
+              "$ref": "#/$defs/slotLayoutWithTitle"
+            }
+          },
+          "required": ["slot"]
+        },
+        {
+          "properties": {
+            "steps": {
+              "type": "array",
+              "contains": {
+                "$ref": "#/$defs/stepWithTitle"
+              }
+            }
+          },
+          "required": ["steps"]
+        }
+      ]
+    },
     {
       "if": {
         "properties": {

package/dist/assets/shared-assets/react-admin/ui/button.tsx

@@ -1,10 +1,10 @@
 import { cn } from '@admin/utils/shared/cn'
 import { cva, type VariantProps } from 'class-variance-authority'
 import { Slot } from 'radix-ui'
-import type * as React from 'react'
+import * as React from 'react'
 
 const buttonVariants = cva(
-  "group/button inline-flex shrink-0 items-center justify-center rounded-4xl border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 active:not-aria-[haspopup]:scale-97 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:text-current [&_svg:not([class*='size-'])]:size-3.5 cursor-pointer [&_svg]:[stroke-width:1.5]",
+  "group/button inline-flex shrink-0 items-center justify-center rounded-4xl border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 active:not-aria-[haspopup]:scale-97 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:text-current [&_svg:not([class*='size-'])]:size-3.5 cursor-pointer [&_svg]:[stroke-width:1.5] min-w-0",
   {
     variants: {
       variant: {
@@ -22,11 +22,10 @@ const buttonVariants = cva(
         link: 'text-primary underline-offset-4 hover:underline'
       },
       size: {
-        default:
-          'h-9 gap-1.5 px-3 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5',
-        xs: "h-6 gap-1 px-2.5 text-xs has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3",
-        sm: 'h-8 gap-1 px-3 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
-        lg: 'h-10 gap-1.5 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3',
+        default: 'h-9 gap-1.5 px-3',
+        xs: "h-6 gap-1 px-2.5 text-xs [&_svg:not([class*='size-'])]:size-3",
+        sm: 'h-8 gap-1 px-3',
+        lg: 'h-10 gap-1.5 px-4',
         icon: 'size-9',
         'icon-xs': "size-6 [&_svg:not([class*='size-'])]:size-3",
         'icon-sm': 'size-8',
@@ -40,16 +39,16 @@ const buttonVariants = cva(
   }
 )
 
-function Button({
-  className,
-  variant = 'default',
-  size = 'default',
-  asChild = false,
-  ...props
-}: React.ComponentProps<'button'> &
-  VariantProps<typeof buttonVariants> & {
-    asChild?: boolean
-  }) {
+const Button = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<'button'> &
+    VariantProps<typeof buttonVariants> & {
+      asChild?: boolean
+    }
+>(function Button(
+  { className, variant = 'default', size = 'default', asChild = false, ...props },
+  ref
+) {
   const Comp = asChild ? Slot.Root : 'button'
 
   return (
@@ -58,9 +57,10 @@ function Button({
       data-variant={variant}
       data-size={size}
       className={cn(buttonVariants({ variant, size, className }))}
+      ref={ref}
       {...props}
     />
   )
-}
+})
 
 export { Button, buttonVariants }

package/dist/assets/shared-assets/react-admin/ui/card.tsx

@@ -83,7 +83,7 @@ function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
     <div
       data-slot="card-footer"
       className={cn(
-        'flex items-center border border-border bg-muted -mt-2 pt-3.5 pb-2 rounded-b-lg px-4',
+        'flex items-center border border-border bg-muted -mt-2 pt-3.5 pb-2 rounded-b-xl px-4',
         className
       )}
       {...props}

package/dist/assets/shared-assets/react-admin/ui/checkbox.tsx

@@ -10,7 +10,7 @@ function Checkbox({ className, ...props }: React.ComponentProps<typeof CheckboxP
     <CheckboxPrimitive.Root
       data-slot="checkbox"
       className={cn(
-        'peer relative flex size-4.5 shrink-0 items-center justify-center rounded-[6px] border border-border transition-shadow outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary',
+        'peer relative flex size-4.5 shrink-0 items-center justify-center rounded-[6px] border border-border transition-shadow outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary bg-input',
         className
       )}
       {...props}

package/dist/assets/shared-assets/react-admin/ui/combobox.tsx

@@ -48,16 +48,22 @@ function ComboboxInput({
   className,
   children,
   disabled = false,
+  ref,
   showTrigger = true,
   showClear = false,
   ...props
 }: ComboboxPrimitive.Input.Props & {
+  ref?: React.Ref<HTMLInputElement>
   showTrigger?: boolean
   showClear?: boolean
 }) {
   return (
     <InputGroup className={cn('w-auto', className)}>
-      <ComboboxPrimitive.Input render={<InputGroupInput disabled={disabled} />} {...props} />
+      <ComboboxPrimitive.Input
+        ref={ref}
+        render={<InputGroupInput disabled={disabled} />}
+        {...props}
+      />
       <InputGroupAddon align="inline-end">
         {showTrigger && (
           <InputGroupButton
@@ -85,11 +91,19 @@ function ComboboxContent({
   align = 'start',
   alignOffset = 0,
   anchor,
+  collisionPadding,
+  positionMethod,
   ...props
 }: ComboboxPrimitive.Popup.Props &
   Pick<
     ComboboxPrimitive.Positioner.Props,
-    'side' | 'align' | 'sideOffset' | 'alignOffset' | 'anchor'
+    | 'side'
+    | 'align'
+    | 'sideOffset'
+    | 'alignOffset'
+    | 'anchor'
+    | 'collisionPadding'
+    | 'positionMethod'
   >) {
   return (
     <ComboboxPrimitive.Portal>
@@ -99,6 +113,8 @@ function ComboboxContent({
         align={align}
         alignOffset={alignOffset}
         anchor={anchor}
+        collisionPadding={collisionPadding}
+        positionMethod={positionMethod}
         className="isolate z-50"
       >
         <ComboboxPrimitive.Popup
@@ -128,9 +144,17 @@ function ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {
   )
 }
 
-function ComboboxItem({ className, children, ...props }: ComboboxPrimitive.Item.Props) {
+function ComboboxItem({
+  className,
+  children,
+  ref,
+  ...props
+}: ComboboxPrimitive.Item.Props & {
+  ref?: React.Ref<HTMLDivElement>
+}) {
   return (
     <ComboboxPrimitive.Item
+      ref={ref}
       data-slot="combobox-item"
       className={cn(
         "relative flex w-full cursor-default items-center gap-2.5 rounded-lg py-2 pr-8 pl-3 text-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",

package/dist/assets/shared-assets/react-admin/ui/drawer.tsx

@@ -4,8 +4,11 @@ import { cn } from '@admin/utils/shared/cn'
 import type * as React from 'react'
 import { Drawer as DrawerPrimitive } from 'vaul'
 
-function Drawer({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Root>) {
-  return <DrawerPrimitive.Root data-slot="drawer" {...props} />
+function Drawer({
+  handleOnly = true,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Root>) {
+  return <DrawerPrimitive.Root data-slot="drawer" handleOnly={handleOnly} {...props} />
 }
 
 function DrawerTrigger({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
@@ -39,6 +42,7 @@ function DrawerOverlay({
 function DrawerContent({
   className,
   children,
+  style,
   ...props
 }: React.ComponentProps<typeof DrawerPrimitive.Content>) {
   return (
@@ -47,12 +51,12 @@ function DrawerContent({
       <DrawerPrimitive.Content
         data-slot="drawer-content"
         className={cn(
-          'group/drawer-content fixed z-50 flex h-auto flex-col bg-transparent p-4 text-sm text-popover-foreground before:absolute before:inset-2 before:-z-10 before:rounded-4xl before:border before:border-border before:bg-popover data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-md',
+          'group/drawer-content fixed z-50 flex h-auto flex-col bg-transparent p-2 text-sm text-popover-foreground before:absolute before:inset-2 before:-z-10 before:rounded-4xl before:border before:border-border before:bg-popover data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-md space-y-4',
           className
         )}
+        style={{ touchAction: 'auto', userSelect: 'text', ...style }}
         {...props}
       >
-        <div className="mx-auto mt-4 hidden h-1.5 w-25 shrink-0 rounded-full bg-muted group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
         {children}
       </DrawerPrimitive.Content>
     </DrawerPortal>
@@ -64,7 +68,7 @@ function DrawerHeader({ className, ...props }: React.ComponentProps<'div'>) {
     <div
       data-slot="drawer-header"
       className={cn(
-        'flex flex-col p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:text-left',
+        'flex flex-col px-6 pt-6 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:text-left',
         className
       )}
       {...props}

package/dist/assets/shared-assets/react-admin/ui/dropdown-menu.tsx

@@ -28,24 +28,39 @@ function DropdownMenuTrigger({
   )
 }
 
+type DropdownMenuContentProps = React.ComponentProps<typeof DropdownMenuPrimitive.Content> & {
+  portalContainer?: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>['container']
+  portalled?: boolean
+}
+
 function DropdownMenuContent({
   className,
   align = 'start',
+  portalContainer,
+  portalled = true,
   sideOffset = 4,
   ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+}: DropdownMenuContentProps) {
+  const content = (
+    <DropdownMenuPrimitive.Content
+      data-slot="dropdown-menu-content"
+      sideOffset={sideOffset}
+      align={align}
+      className={cn(
+        'z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) min-w-35 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg p-1 text-popover-foreground shadow-2xl/10 ring-1 ring-foreground/5 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:overflow-hidden dark:ring-foreground/10 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 relative bg-popover/70 before:pointer-events-none before:absolute before:inset-0 before:-z-1 before:rounded-[inherit] before:backdrop-blur-2xl before:backdrop-saturate-150 **:data-[slot$=-item]:focus:bg-foreground/10 **:data-[slot$=-item]:data-highlighted:bg-foreground/10 **:data-[slot$=-separator]:bg-foreground/5 **:data-[slot$=-trigger]:focus:bg-foreground/10 **:data-[slot$=-trigger]:aria-expanded:bg-foreground/10!',
+        className
+      )}
+      {...props}
+    />
+  )
+
+  if (!portalled) {
+    return content
+  }
+
   return (
-    <DropdownMenuPrimitive.Portal>
-      <DropdownMenuPrimitive.Content
-        data-slot="dropdown-menu-content"
-        sideOffset={sideOffset}
-        align={align}
-        className={cn(
-          'z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) min-w-35 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg p-1 text-popover-foreground shadow-2xl/10 ring-1 ring-foreground/5 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:overflow-hidden dark:ring-foreground/10 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 relative bg-popover/70 before:pointer-events-none before:absolute before:inset-0 before:-z-1 before:rounded-[inherit] before:backdrop-blur-2xl before:backdrop-saturate-150 **:data-[slot$=-item]:focus:bg-foreground/10 **:data-[slot$=-item]:data-highlighted:bg-foreground/10 **:data-[slot$=-separator]:bg-foreground/5 **:data-[slot$=-trigger]:focus:bg-foreground/10 **:data-[slot$=-trigger]:aria-expanded:bg-foreground/10!',
-          className
-        )}
-        {...props}
-      />
+    <DropdownMenuPrimitive.Portal container={portalContainer}>
+      {content}
     </DropdownMenuPrimitive.Portal>
   )
 }

package/dist/assets/shared-assets/react-admin/ui/form.tsx

@@ -129,7 +129,7 @@ const FormDescription = React.forwardRef<
     <p
       ref={ref}
       id={formDescriptionId}
-      className={cn('text-[0.8rem] text-muted-foreground/70', className)}
+      className={cn('text-[0.8rem] text-muted-foreground', className)}
       {...props}
     />
   )