@nixxie-cms/core 2.0.0 → 2.2.0

package/src/internal-unstable/admin-ui/pages/ItemPage/index.tsx

@@ -38,6 +38,7 @@ import {
   useInvalidFields,
 } from '../../../../admin-ui/utils'
 import { pick } from '../../../../admin-ui/utils/pick'
+import { usePreventNavigation } from '../../../../admin-ui/utils/usePreventNavigation'
 import type {
   ActionMeta,
   BaseCollectionTypeInfo,
@@ -62,6 +63,22 @@ function useEventCallback<Func extends (...args: any[]) => unknown>(callback: Fu
   return cb as any
 }
 
+// after forcing validation, move focus to the first invalid field so the user
+// can see and fix it. runs on the next frame so the DOM reflects the new
+// aria-invalid state, and is fully defensive so it can never throw.
+function focusFirstInvalidField() {
+  requestAnimationFrame(() => {
+    try {
+      const el = document.querySelector<HTMLElement>('[aria-invalid="true"]')
+      if (!el) return
+      el.focus({ preventScroll: false })
+      el.scrollIntoView({ block: 'center', behavior: 'smooth' })
+    } catch {
+      // ignore — focusing is a best-effort enhancement
+    }
+  })
+}
+
 function DeleteButton({
   list,
   itemId,
@@ -155,7 +172,6 @@ function ResetButton(props: { onReset: () => void; hasChanges?: boolean }) {
         title="Reset changes"
         cancelLabel="Cancel"
         primaryActionLabel="Yes, reset"
-        autoFocusButton="primary"
         onPrimaryAction={props.onReset}
       >
         Are you sure? Any unsaved changes will be lost and cannot be recovered.
@@ -211,7 +227,11 @@ function ItemForm({
     e.preventDefault()
     const newForceValidation = invalidFields.size !== 0
     setForceValidation(newForceValidation)
-    if (newForceValidation) return
+    if (newForceValidation) {
+      toastQueue.critical('Please fix the highlighted field(s) before saving.')
+      focusFirstInvalidField()
+      return
+    }
 
     const { error: _error } = await update({
       variables: {
@@ -236,10 +256,18 @@ function ItemForm({
       timeout: 5000,
     })
 
+    // reset the navigation guard before refetch so saving and then navigating
+    // away doesn't prompt for unsaved changes
+    shouldPreventNavigationRef.current = false
     onSaveSuccess()
   })
 
   const hasChangedFields = useHasChanges('update', list.fields, value, initialValue)
+  const shouldPreventNavigationRef = useRef(hasChangedFields)
+  useEffect(() => {
+    shouldPreventNavigationRef.current = hasChangedFields
+  }, [hasChangedFields])
+  usePreventNavigation(shouldPreventNavigationRef)
 
   return (
     <Fragment>
@@ -324,7 +352,12 @@ function ItemPage({ listKey }: ItemPageProps) {
   const itemLabel_ = item?.[list.labelField] ?? item?.id
   const itemLabel = typeof itemLabel_ === 'string' ? itemLabel_ : (itemId ?? '')
 
-  const pageLoading = loading || itemId === undefined
+  // Only show the full-page spinner on the INITIAL load (no data yet). On a
+  // post-save refetch Apollo keeps `data` populated while `loading` flips back
+  // to true; gating on `!data` keeps the form mounted (no scroll reset / flash)
+  // during background refetches while still showing the spinner before the
+  // first result arrives.
+  const pageLoading = (loading && !data) || itemId === undefined
   const pageLabel = itemLabel || itemId
   const pageTitle = list.isSingleton || typeof pageLabel !== 'string' ? list.label : pageLabel
   const initialValue = useMemo(() => {

package/src/internal-unstable/admin-ui/pages/ListPage/PaginationControls.tsx

@@ -4,17 +4,11 @@ import { chevronLeftIcon } from '@keystar/ui/icon/icons/chevronLeftIcon'
 import { chevronRightIcon } from '@keystar/ui/icon/icons/chevronRightIcon'
 import { undo2Icon } from '@keystar/ui/icon/icons/undo2Icon'
 import { HStack } from '@keystar/ui/layout'
-import { Picker } from '@keystar/ui/picker'
-import { Item } from '@keystar/ui/tag'
+import { NumberField } from '@keystar/ui/number-field'
+import { Item, Picker } from '@keystar/ui/picker'
 import { Tooltip, TooltipTrigger } from '@keystar/ui/tooltip'
 import { Text } from '@keystar/ui/typography'
 import type { ReactNode } from 'react'
-import { useMemo } from 'react'
-
-type PageItem = {
-  label: string
-  id: number
-}
 
 export function PaginationControls(props: {
   singular: string
@@ -34,16 +28,11 @@ export function PaginationControls(props: {
   const prevPage = currentPage - 1
   const lastPage = Math.max(Math.ceil(total / pageSize), 1)
 
-  const pageItems = useMemo(() => {
-    const result: PageItem[] = []
-    for (let page = 1; page <= lastPage; page++) {
-      result.push({
-        id: page,
-        label: String(page),
-      })
-    }
-    return result
-  }, [lastPage])
+  const goToPage = (value: number) => {
+    if (!Number.isFinite(value)) return
+    const page = Math.min(Math.max(Math.round(value), 1), lastPage)
+    if (page !== currentPage) props.onChangePage(page)
+  }
 
   return (
     <HStack
@@ -90,24 +79,22 @@ export function PaginationControls(props: {
 
       {/*
         right-side
-        mobile: next/prev
-        desktop^: current page (picker), next/prev
+        mobile: page jump, next/prev
+        desktop^: page jump, next/prev
       */}
       <HStack gap="large" alignItems="center">
-        <HStack isHidden={{ below: 'desktop' }} gap="regular" alignItems="center">
-          <Picker
-            // prominence="low"
-            aria-label={`Page number, of ${lastPage} pages`}
-            items={pageItems}
-            onSelectionChange={page => {
-              props.onChangePage(Number(page))
-            }}
-            selectedKey={currentPage}
+        <HStack gap="regular" alignItems="center">
+          <NumberField
+            aria-label="Go to page"
+            hideStepper
+            minValue={1}
+            maxValue={lastPage}
+            step={1}
+            value={currentPage}
+            onChange={goToPage}
             width="scale.1000"
-          >
-            {item => <Item>{item.label}</Item>}
-          </Picker>
-          <Text>of {lastPage} pages</Text>
+          />
+          <Text>of {lastPage}</Text>
         </HStack>
         <HStack gap="regular">
           <ActionButton

package/src/internal-unstable/admin-ui/pages/ListPage/index.tsx

@@ -897,21 +897,29 @@ function ActionItemsDialog({
         id
       }
     }`
+  // The ids actually included in the mutation payload, in the exact order
+  // they are sent to the server. Server error paths reference indices into
+  // this array, so error/affected-record attribution must be done against it
+  // rather than the original (possibly larger) itemIds list.
+  const sentIds: string[] = []
+  const mutationData =
+    action.key === 'delete'
+      ? itemIds.map(id => {
+          sentIds.push(id)
+          return { id }
+        })
+      : itemIds.flatMap(id => {
+          const row = items.find(item => String(item.id) === id)
+          if (!row) {
+            return []
+          }
+          const deserialized = deserializeItemToValue(list.fields, row)
+          const args = getActionArguments(list, action, deserialized)
+          sentIds.push(id)
+          return { where: { id }, ...args }
+        })
   const [actionOnItems] = useMutation<{ results?: ({ id: string } | null)[] }>(actionMutation, {
-    variables:
-      action.key === 'delete'
-        ? { where: itemIds.map(id => ({ id })) }
-        : {
-            data: itemIds.flatMap(id => {
-              const row = items.find(item => String(item.id) === id)
-              if (!row) {
-                return []
-              }
-              const deserialized = deserializeItemToValue(list.fields, row)
-              const args = getActionArguments(list, action, deserialized)
-              return { where: { id }, ...args }
-            }),
-          },
+    variables: action.key === 'delete' ? { where: mutationData } : { data: mutationData },
     errorPolicy: 'all',
   })
   const { messages: m } = action
@@ -927,14 +935,14 @@ function ActionItemsDialog({
         for (const err of error.errors ?? []) {
           const i = err.path?.[1]
           if (typeof i !== 'number') continue
-          const itemId = itemIds[i]
+          const itemId = sentIds[i]
 
           failed.add(itemId)
           actionErrors[itemId] ??= []
           actionErrors[itemId].push(err)
         }
       }
-      const countSuccess = itemIds.length - countFail
+      const countSuccess = sentIds.length - countFail
 
       if (countSuccess) {
         toastQueue.neutral(