@asteby/metacore-runtime-react 49.3.1 → 49.5.0

package/src/entity-select.tsx

@@ -15,11 +15,10 @@
 // code is needed. This lives in the SDK so POS, purchases and any future addon
 // share ONE implementation instead of each re-porting a bespoke picker.
 import { useCallback, useEffect, useState } from 'react'
-import { Search, X, Plus, Pencil, type LucideIcon } from 'lucide-react'
+import { Search, X, type LucideIcon } from 'lucide-react'
 import {
     Button,
     Command,
-    CommandEmpty,
     CommandGroup,
     CommandInput,
     CommandItem,
@@ -29,6 +28,7 @@ import {
     PopoverTrigger,
 } from '@asteby/metacore-ui'
 import { CreateRecordDialog } from './dialogs/create-record-dialog'
+import { JOINED_TRIGGER_CLASS, PickerCreateItem, RecordPickerAction, hasRecordPickerAction } from './record-picker-actions'
 import { useCan } from './permissions-context'
 import { useApi } from './api-context'
 
@@ -172,14 +172,14 @@ export function EntitySelect({
         onSelect(null, null)
     }
 
-    const openCreate = (e: React.MouseEvent) => {
-        e.stopPropagation()
+    const openCreate = () => {
+        setOpen(false)
         setDialogRecordId(undefined)
         setDialogOpen(true)
     }
-    const openEdit = (e: React.MouseEvent) => {
-        e.stopPropagation()
+    const openEdit = () => {
         if (!value) return
+        setOpen(false)
         setDialogRecordId(value)
         setDialogOpen(true)
     }
@@ -198,14 +198,18 @@ export function EntitySelect({
         onSelect(id, lbl)
     }
 
+    const onCreate = mayCreate ? openCreate : undefined
+    const onEdit = mayEdit ? openEdit : undefined
+    const joined = hasRecordPickerAction(!!value, onCreate, onEdit)
+
     return (
-        <div className="flex items-center gap-1.5">
+        <div className="flex items-center" data-slot="entity-select">
             <Popover open={open} onOpenChange={disabled ? undefined : setOpen}>
                 <PopoverTrigger asChild>
                     <Button
                         variant="outline"
                         disabled={disabled}
-                        className="w-full flex-1 justify-start gap-2 font-normal"
+                        className={'w-full min-w-0 flex-1 justify-start gap-2 font-normal' + (joined ? ` ${JOINED_TRIGGER_CLASS}` : '')}
                     >
                         {Icon && <Icon className="text-muted-foreground size-4 shrink-0" />}
                         <span className="flex-1 truncate text-left">{label ?? placeholder}</span>
@@ -228,7 +232,8 @@ export function EntitySelect({
                 <PopoverContent
                     className="p-0"
                     align="start"
-                    style={{ width: 'var(--radix-popover-trigger-width)' }}
+                    collisionPadding={8}
+                    style={{ width: 'max(var(--radix-popover-trigger-width), 14rem)', maxWidth: 'calc(100vw - 1rem)' }}
                 >
                     <Command shouldFilter={false}>
                         <CommandInput
@@ -244,7 +249,7 @@ export function EntitySelect({
                             )}
                             {!isLoading &&
                                 searchTerm.length >= minChars &&
-                                results.length === 0 && <CommandEmpty>{emptyText}</CommandEmpty>}
+                                results.length === 0 && <div className="text-muted-foreground py-6 text-center text-sm">{emptyText}</div>}
                             {!isLoading && results.length > 0 && (
                                 <CommandGroup className="max-h-64 overflow-auto">
                                     {results.map((row) => (
@@ -270,41 +275,14 @@ export function EntitySelect({
                                     <span className="text-xs">Escribe al menos 2 caracteres</span>
                                 </div>
                             )}
+                            {onCreate && !isLoading && <PickerCreateItem label={model} onSelect={openCreate} />}
                         </CommandList>
                     </Command>
                 </PopoverContent>
             </Popover>
 
             {/* Selected → edit (pencil); empty → create (+). Each gated by perms. */}
-            {value
-                ? mayEdit && (
-                      <Button
-                          type="button"
-                          variant="outline"
-                          size="icon"
-                          disabled={disabled}
-                          onClick={openEdit}
-                          aria-label="Editar"
-                          title="Editar"
-                          className="shrink-0"
-                      >
-                          <Pencil className="size-4" />
-                      </Button>
-                  )
-                : mayCreate && (
-                      <Button
-                          type="button"
-                          variant="outline"
-                          size="icon"
-                          disabled={disabled}
-                          onClick={openCreate}
-                          aria-label="Crear"
-                          title="Crear"
-                          className="shrink-0"
-                      >
-                          <Plus className="size-4" />
-                      </Button>
-                  )}
+            <RecordPickerAction hasValue={!!value} label={model} onCreate={onCreate} onEdit={onEdit} disabled={disabled} />
 
             {dialogOpen && (
                 <CreateRecordDialog

package/src/field-grid.tsx

@@ -42,14 +42,28 @@ export function FieldCell({
 export function FieldLabel({
     htmlFor,
     required,
+    tone = 'caps',
     children,
 }: {
     htmlFor?: string
     required?: boolean
+    /**
+     * `caps` (default): small uppercase eyebrow of the CRUD modals. `sentence`:
+     * sentence-case label for dense editors (DocumentEditor) where a column of
+     * uppercase labels reads as shouting.
+     */
+    tone?: 'caps' | 'sentence'
     children: ReactNode
 }) {
     return (
-        <Label htmlFor={htmlFor} className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
+        <Label
+            htmlFor={htmlFor}
+            className={
+                tone === 'sentence'
+                    ? 'text-sm font-medium text-foreground/80'
+                    : 'text-xs font-medium uppercase tracking-wide text-muted-foreground'
+            }
+        >
             {children}
             {required && <span className="ml-0.5 text-destructive">*</span>}
         </Label>

package/src/index.ts

@@ -475,6 +475,8 @@ export type { DynamicRecordDialogProps, FieldDef, FieldOption, GetImageUrl } fro
 export { CreateRecordDialog } from './dialogs/create-record-dialog'
 export { EntitySelect } from './entity-select'
 export type { EntitySelectProps, EntitySelectOption } from './entity-select'
+export { RecordPickerAction, PickerCreateItem, JOINED_TRIGGER_CLASS, hasRecordPickerAction } from './record-picker-actions'
+export type { RecordPickerActionProps } from './record-picker-actions'
 export { ViewRecordDialog } from './dialogs/view-record-dialog'
 export type {
     ModelKey,

package/src/query-batch.ts

@@ -170,7 +170,19 @@ export function rememberInRows(
     }
 }
 
+/**
+ * Clients whose backend has no `/q` (it answered 404/405). They get plain GETs
+ * for the rest of the session instead of one failed POST per read.
+ */
+let unsupportedClients = new WeakSet<object>()
+
+function errorStatus(err: unknown): number | undefined {
+    const e = err as { status?: number; response?: { status?: number } } | null
+    return e?.status ?? e?.response?.status
+}
+
 export function resetQueryBatchCache(): void {
+    unsupportedClients = new WeakSet<object>()
     partCache.clear()
     entityCache.clear()
     waiters = []
@@ -320,6 +332,11 @@ async function flushQueryBatch() {
             waiter.resolve(merged)
         }
     } catch (err) {
+        // The host has no /q route: remember it so later reads skip the POST.
+        // Every waiter of this window still rejects and batchGet answers it
+        // with the plain GET, so no read is lost.
+        const status = errorStatus(err)
+        if (status === 404 || status === 405) unsupportedClients.add(api)
         const error = err instanceof Error ? err : new Error(String(err))
         for (const waiter of batch) waiter.reject(error)
     }
@@ -381,7 +398,7 @@ export async function batchGet(api: ApiClient, url: string, config?: { params?:
     // trailing `undefined` config reaching the host client.
     const plainGet = () => (config === undefined ? api.get(url) : api.get(url, config))
     const token = tokenForGet(url, config?.params)
-    if (!token) return plainGet()
+    if (!token || unsupportedClients.has(api)) return plainGet()
     try {
         const part = await loadQueryPart(api, token)
         if (!part.success) {

package/src/record-picker-actions.tsx

@@ -0,0 +1,81 @@
+// RecordPickerActions — create/edit affordances shared by every "pick a related
+// record" control (DynamicSelectField for declarative forms, EntitySelect for
+// hand-written screens). ONE implementation of the same contract:
+//
+//   - nothing selected → "+" joined to the trigger: opens the model's CREATE
+//     modal and the new record ends up selected;
+//   - a record selected → pencil joined to the trigger: opens THAT record's
+//     EDIT modal and the label refreshes on save;
+//   - "Crear …" at the foot of the result list, so creating is one step away
+//     from a search with no hits.
+//
+// The action renders as a segment of the trigger (shared border, no gap) so the
+// control reads as a single field instead of a select plus a loose button.
+import type { ReactNode } from 'react'
+import { Pencil, Plus } from 'lucide-react'
+import { Button, CommandGroup, CommandItem, CommandSeparator } from '@asteby/metacore-ui/primitives'
+
+/** Classes for a trigger that has a joined action segment on its right. */
+export const JOINED_TRIGGER_CLASS = 'rounded-r-none focus-visible:z-10'
+
+export interface RecordPickerActionProps {
+    /** Current value: drives create (+) vs edit (pencil). */
+    hasValue: boolean
+    /** Human label of the referenced model / field, for the accessible name. */
+    label: string
+    onCreate?: () => void
+    onEdit?: () => void
+    disabled?: boolean
+}
+
+/**
+ * Joined trailing segment: pencil when there is a value (and `onEdit`), "+"
+ * otherwise (and `onCreate`). Renders nothing when neither applies — callers
+ * should then drop {@link JOINED_TRIGGER_CLASS} from the trigger.
+ */
+export function RecordPickerAction({ hasValue, label, onCreate, onEdit, disabled }: RecordPickerActionProps) {
+    const edit = hasValue && !!onEdit
+    const create = !hasValue && !!onCreate
+    if (!edit && !create) return null
+    const name = edit ? `Editar ${label}` : `Crear ${label}`
+    return (
+        <Button
+            type="button"
+            variant="outline"
+            size="icon"
+            disabled={disabled}
+            onClick={(e) => {
+                e.stopPropagation()
+                if (edit) onEdit?.()
+                else onCreate?.()
+            }}
+            aria-label={name}
+            title={name}
+            data-slot="record-picker-action"
+            data-action={edit ? 'edit' : 'create'}
+            className="-ml-px size-9 shrink-0 rounded-l-none text-muted-foreground hover:text-foreground focus-visible:z-10"
+        >
+            {edit ? <Pencil className="size-4" /> : <Plus className="size-4" />}
+        </Button>
+    )
+}
+
+/** True when a picker will render a joined action for the given state. */
+export function hasRecordPickerAction(hasValue: boolean, onCreate?: unknown, onEdit?: unknown): boolean {
+    return hasValue ? !!onEdit : !!onCreate
+}
+
+/** "Crear …" row at the foot of a Command list. */
+export function PickerCreateItem({ label, onSelect, children }: { label: string; onSelect: () => void; children?: ReactNode }) {
+    return (
+        <>
+            <CommandSeparator />
+            <CommandGroup>
+                <CommandItem value="__create__" onSelect={onSelect} data-slot="picker-create" className="text-primary">
+                    <Plus className="mr-2 size-4 shrink-0" />
+                    <span className="truncate">{children ?? `Crear ${label}`}</span>
+                </CommandItem>
+            </CommandGroup>
+        </>
+    )
+}