fix(insert-menu): adjust API and auto-capitalise group.name/schemaTyp…

…e.name if used as title fallback (#1679)

* fix(insert-menu): change InsertMenuOptions.filter type

* fix(insert-menu): allow previewImageUrl to be undefined

* fix(insert-menu): capitalise group.name if used as title fallback

* fix(insert-menu): capitalise schemaType.name if used as title fallback

packages/insert-menu/package.json

@@ -40,12 +40,14 @@
   "browserslist": "extends @sanity/browserslist-config",
   "dependencies": {
     "@sanity/icons": "^3.2.0",
-    "@sanity/ui": "^2.3.3"
+    "@sanity/ui": "^2.3.3",
+    "lodash.startcase": "^4.4.0"
   },
   "devDependencies": {
     "@sanity/pkg-utils": "^6.9.3",
     "@sanity/types": "^3.45.0",
     "@sanity/ui-workshop": "^2.0.15",
+    "@types/lodash.startcase": "^4.4.9",
     "@typescript-eslint/eslint-plugin": "^7.13.0",
     "@typescript-eslint/parser": "^7.13.0",
     "eslint": "^8.57.0",

packages/insert-menu/src/InsertMenu.tsx

@@ -15,6 +15,7 @@ import {
   TextInput,
   Tooltip,
 } from '@sanity/ui'
+import startCase from 'lodash.startcase'
 import {type ChangeEvent, createElement, type CSSProperties, useReducer, useState} from 'react'
 import {isValidElementType} from 'react-is'
 
@@ -73,7 +74,9 @@ export type InsertMenuProps = InsertMenuOptions & {
 export function InsertMenu(props: InsertMenuProps): React.JSX.Element {
   const showIcons = props.showIcons === undefined ? true : props.showIcons
   const showFilter =
-    props.filter === 'on' ? true : props.filter === 'off' ? false : props.schemaTypes.length > 5
+    props.filter === undefined || props.filter === 'auto'
+      ? props.schemaTypes.length > 5
+      : props.filter
   const [state, send] = useReducer(fullInsertMenuReducer, {
     query: '',
     groups: props.groups
@@ -149,7 +152,7 @@ export function InsertMenu(props: InsertMenuProps): React.JSX.Element {
                     id={`${group.name}-tab`}
                     aria-controls={`${group.name}-panel`}
                     key={group.name}
-                    label={group.title ?? group.name}
+                    label={group.title ?? startCase(group.name)}
                     selected={group.selected}
                     onClick={() => {
                       send({type: 'select group', name: group.name})
@@ -178,7 +181,7 @@ export function InsertMenu(props: InsertMenuProps): React.JSX.Element {
                   onClick={() => {
                     props.onSelect(schemaType)
                   }}
-                  previewImageUrl={selectedView.previewImageUrl(schemaType.name)}
+                  previewImageUrl={selectedView.previewImageUrl?.(schemaType.name)}
                   schemaType={schemaType}
                 />
               ))}
@@ -192,7 +195,7 @@ export function InsertMenu(props: InsertMenuProps): React.JSX.Element {
                   onClick={() => {
                     props.onSelect(schemaType)
                   }}
-                  text={schemaType.title ?? schemaType.name}
+                  text={schemaType.title ?? startCase(schemaType.name)}
                 />
               ))}
             </Stack>
@@ -248,7 +251,9 @@ type GridMenuItemProps = {
   schemaType: SchemaType
   icon: MenuItemProps['icon']
   previewImageUrl: ReturnType<
-    Extract<NonNullable<InsertMenuOptions['views']>[number], {name: 'grid'}>['previewImageUrl']
+    NonNullable<
+      Extract<NonNullable<InsertMenuOptions['views']>[number], {name: 'grid'}>['previewImageUrl']
+    >
   >
 }
 

packages/insert-menu/src/InsertMenuOptions.ts

@@ -5,12 +5,13 @@ export interface InsertMenuOptions {
    * `filter: 'auto'` automatically turns on filtering if there are more than 5
    * schema types added to the menu.
    */
-  filter?: 'auto' | 'on' | 'off'
+  filter?: 'auto' | boolean
   groups?: Array<{name: string; title?: string; of?: Array<string>}>
   /** defaultValue `true` */
   showIcons?: boolean
   /** @defaultValue `[{name: 'list'}]` */
   views?: Array<
-    {name: 'list'} | {name: 'grid'; previewImageUrl: (schemaTypeName: string) => string | undefined}
+    | {name: 'list'}
+    | {name: 'grid'; previewImageUrl?: (schemaTypeName: string) => string | undefined}
   >
 }

packages/insert-menu/src/__workshop__/full.tsx

@@ -64,7 +64,6 @@ const schemaTypes: ObjectSchemaType[] = [
   {
     jsonType: 'object',
     name: 'videos',
-    title: 'Videos',
     icon: DocumentVideoIcon,
     fields: [],
     __experimental_search: [],
@@ -86,7 +85,12 @@ const views: InsertMenuProps['views'] = [
 
 export default function FullStory() {
   const iconsEnabled = useSelect('showIcons', {true: true, false: false}, true)
-  const filter = useSelect('filter', {undefined: 'undefined', auto: 'auto', on: 'on', off: 'off'})
+  const filter = useSelect('filter', {
+    undefined: 'undefined',
+    auto: 'auto',
+    true: true,
+    false: false,
+  })
   const groupsEnabled = useSelect('groups', {true: true, false: false}, true)
   const viewsEnabled = useSelect('views', {true: true, false: false}, true)