@sanity/assist 1.1.1 → 1.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/assist",
-  "version": "1.1.1",
+  "version": "1.1.3",
   "description": "",
   "keywords": [
     "sanity",
@@ -81,7 +81,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rimraf": "^4.4.0",
-    "sanity": "^3.14.5",
+    "sanity": "^3.16.1",
     "semantic-release": "^21.0.5",
     "styled-components": "^5.3.9",
     "typescript": "^5.1.3",
@@ -89,7 +89,7 @@
   },
   "peerDependencies": {
     "react": "^18",
-    "sanity": "^3.14.5",
+    "sanity": "^3.16",
     "styled-components": "^5.2"
   },
   "engines": {

package/src/assistFormComponents/AssistField.tsx

@@ -1,12 +1,14 @@
-import {FieldProps, isArraySchemaType} from 'sanity'
+import {FieldProps, isArraySchemaType, pathToString} from 'sanity'
 import {useAssistPresence} from '../presence/useAssistPresence'
-import {useMemo} from 'react'
+import {useContext, useMemo} from 'react'
 import {Box, Flex} from '@sanity/ui'
 import {contextDocumentTypeName} from '../types'
 import {isAssistSupported} from '../helpers/assistSupported'
 import {isPortableTextArray, isType} from '../helpers/typeUtils'
 import {AiFieldPresence} from '../presence/AiFieldPresence'
-import {FieldActionsOnboarding} from '../onboarding/FieldActionsOnboarding'
+import {AssistOnboardingPopover} from '../onboarding/FieldActionsOnboarding'
+import {FirstAssistedPathContext} from '../onboarding/FirstAssistedPathProvider'
+import {fieldOnboardingKey, useOnboardingFeature} from '../onboarding/onboardingStore'
 
 export function AssistFieldWrapper(props: FieldProps) {
   const {schemaType} = props
@@ -28,6 +30,8 @@ export function AssistFieldWrapper(props: FieldProps) {
 }
 
 export function AssistField(props: FieldProps) {
+  const {path} = props
+
   const isPortableText = useMemo(
     () => !!(isArraySchemaType(props.schemaType) && isPortableTextArray(props.schemaType)),
     [props.schemaType]
@@ -35,6 +39,14 @@ export function AssistField(props: FieldProps) {
 
   const presence = useAssistPresence(props.path, isPortableText)
 
+  const firstAssistedPath = useContext(FirstAssistedPathContext)
+  const isFirstAssisted = useMemo(
+    () => pathToString(path) === firstAssistedPath,
+    [path, firstAssistedPath]
+  )
+
+  const {showOnboarding, dismissOnboarding} = useOnboardingFeature(fieldOnboardingKey)
+
   const actions = (
     <Flex gap={2} align="center" justify="space-between">
       {presence.map((pre) => (
@@ -43,9 +55,18 @@ export function AssistField(props: FieldProps) {
         </Box>
       ))}
 
-      <FieldActionsOnboarding {...props}>{props.actions}</FieldActionsOnboarding>
+      {isFirstAssisted && showOnboarding && <AssistOnboardingPopover dismiss={dismissOnboarding} />}
     </Flex>
   )
 
-  return props.renderDefault({...props, actions})
+  return props.renderDefault({
+    ...props,
+
+    // When showing the onboarding, prevent default field actions from being rendered
+    actions: isFirstAssisted && showOnboarding ? [] : props.actions,
+
+    // Render presence (and possibly onboarding) in the internal slot (between presence and the field actions)
+    // eslint-disable-next-line camelcase
+    __internal_slot: actions,
+  })
 }

package/src/onboarding/FieldActionsOnboarding.tsx

@@ -1,56 +1,33 @@
-import {Path, pathToString} from 'sanity'
-import {Button, Flex, Popover, Stack, Text} from '@sanity/ui'
-import {PropsWithChildren, useContext, useMemo, useRef} from 'react'
-import {FirstAssistedPathContext} from './FirstAssistedPathProvider'
+import {Button, Card, Flex, Popover, Stack, Text} from '@sanity/ui'
+import {useRef} from 'react'
 import {AssistFeatureBadge} from '../components/AssistFeatureBadge'
 import {ArrowRightIcon, CheckmarkIcon, SparklesIcon} from '@sanity/icons'
 import {pluginTitle, releaseAnnouncementUrl} from '../constants'
-import {fieldOnboardingKey, useOnboardingFeature} from './onboardingStore'
 
 export interface FieldActionsOnboardingProps {
-  path: Path
+  dismiss: () => void
 }
 
-export function FieldActionsOnboarding(props: PropsWithChildren<FieldActionsOnboardingProps>) {
-  const {path, children} = props
-
-  const firstAssistedPath = useContext(FirstAssistedPathContext)
-  const isFirstAssisted = useMemo(
-    () => pathToString(path) === firstAssistedPath,
-    [path, firstAssistedPath]
-  )
-
-  if (!isFirstAssisted) {
-    return <>{children}</>
-  }
-
-  return <AssistOnboardingPopover {...props} />
-}
-
-function AssistOnboardingPopover(props: PropsWithChildren<FieldActionsOnboardingProps>) {
-  const {showOnboarding, dismissOnboarding} = useOnboardingFeature(fieldOnboardingKey)
-
-  if (!showOnboarding) {
-    return <>{props.children}</>
-  }
+export function AssistOnboardingPopover(props: FieldActionsOnboardingProps) {
+  const {dismiss} = props
 
   return (
     <Popover
-      content={<AssistIntroCard path={props.path} dismiss={dismissOnboarding} />}
+      content={<AssistIntroCard dismiss={dismiss} />}
       open
       portal
       placeholder="bottom"
       tone="default"
       width={0}
     >
-      <div>
-        <Button disabled fontSize={1} icon={SparklesIcon} mode="ghost" padding={2} />
-      </div>
+      <Card radius={2} shadow={2} style={{padding: 2, lineHeight: 0}}>
+        <Button disabled fontSize={1} icon={SparklesIcon} mode="bleed" padding={2} />
+      </Card>
     </Popover>
   )
 }
 
-function AssistIntroCard(props: FieldActionsOnboardingProps & {dismiss: () => void}) {
+function AssistIntroCard(props: {dismiss: () => void}) {
   const buttonRef = useRef<HTMLButtonElement>(null)
 
   return (