sanity-plugin-media 4.3.6 → 5.0.0

package/dist/index.d.cts

@@ -1,239 +0,0 @@
-import { SanityAssetDocument, SanityImageAssetDocument } from "@sanity/client";
-import { ComponentType, JSX } from "react";
-import * as z from "zod";
-import { Control, FieldErrors, UseFormRegister } from "react-hook-form";
-import { FieldDefinitionBase, FileDefinition, ImageDefinition, InputProps, WidenInitialValue, WidenValidation } from "sanity";
-type DetailsProps = {
-  formUpdating: boolean;
-  handleCreateTag: (title: string) => void;
-  control: Control<AssetFormData>;
-  errors: FieldErrors<AssetFormData>;
-  register: UseFormRegister<AssetFormData>;
-  allTagOptions: TagSelectOption[];
-  assetTagOptions: TagSelectOption[] | null;
-  currentAsset: Asset;
-  creditLine?: {
-    enabled: boolean;
-    excludeSources?: string | string[] | undefined;
-  };
-  locales?: Locale[];
-};
-declare const tagOptionSchema: z.ZodObject<{
-  label: z.ZodString;
-  value: z.ZodString;
-}, "strip", z.ZodTypeAny, {
-  value: string;
-  label: string;
-}, {
-  value: string;
-  label: string;
-}>;
-declare function getAssetFormSchema(locales?: {
-  id: string;
-}[]): z.ZodObject<{
-  altText: z.ZodOptional<z.ZodString> | z.ZodObject<Record<string, z.ZodTypeAny>, "passthrough", z.ZodTypeAny, z.objectOutputType<Record<string, z.ZodTypeAny>, z.ZodTypeAny, "passthrough">, z.objectInputType<Record<string, z.ZodTypeAny>, z.ZodTypeAny, "passthrough">>;
-  creditLine: z.ZodOptional<z.ZodString> | z.ZodObject<Record<string, z.ZodTypeAny>, "passthrough", z.ZodTypeAny, z.objectOutputType<Record<string, z.ZodTypeAny>, z.ZodTypeAny, "passthrough">, z.objectInputType<Record<string, z.ZodTypeAny>, z.ZodTypeAny, "passthrough">>;
-  description: z.ZodOptional<z.ZodString> | z.ZodObject<Record<string, z.ZodTypeAny>, "passthrough", z.ZodTypeAny, z.objectOutputType<Record<string, z.ZodTypeAny>, z.ZodTypeAny, "passthrough">, z.objectInputType<Record<string, z.ZodTypeAny>, z.ZodTypeAny, "passthrough">>;
-  opt: z.ZodObject<{
-    media: z.ZodObject<{
-      tags: z.ZodNullable<z.ZodArray<z.ZodObject<{
-        label: z.ZodString;
-        value: z.ZodString;
-      }, "strip", z.ZodTypeAny, {
-        value: string;
-        label: string;
-      }, {
-        value: string;
-        label: string;
-      }>, "many">>;
-    }, "strip", z.ZodTypeAny, {
-      tags: {
-        value: string;
-        label: string;
-      }[] | null;
-    }, {
-      tags: {
-        value: string;
-        label: string;
-      }[] | null;
-    }>;
-  }, "strip", z.ZodTypeAny, {
-    media: {
-      tags: {
-        value: string;
-        label: string;
-      }[] | null;
-    };
-  }, {
-    media: {
-      tags: {
-        value: string;
-        label: string;
-      }[] | null;
-    };
-  }>;
-  originalFilename: z.ZodString;
-  title: z.ZodOptional<z.ZodString> | z.ZodObject<Record<string, z.ZodTypeAny>, "passthrough", z.ZodTypeAny, z.objectOutputType<Record<string, z.ZodTypeAny>, z.ZodTypeAny, "passthrough">, z.objectInputType<Record<string, z.ZodTypeAny>, z.ZodTypeAny, "passthrough">>;
-}, "strip", z.ZodTypeAny, {
-  originalFilename: string;
-  opt: {
-    media: {
-      tags: {
-        value: string;
-        label: string;
-      }[] | null;
-    };
-  };
-  altText?: string | z.objectOutputType<Record<string, z.ZodTypeAny>, z.ZodTypeAny, "passthrough"> | undefined;
-  description?: string | z.objectOutputType<Record<string, z.ZodTypeAny>, z.ZodTypeAny, "passthrough"> | undefined;
-  title?: string | z.objectOutputType<Record<string, z.ZodTypeAny>, z.ZodTypeAny, "passthrough"> | undefined;
-  creditLine?: string | z.objectOutputType<Record<string, z.ZodTypeAny>, z.ZodTypeAny, "passthrough"> | undefined;
-}, {
-  originalFilename: string;
-  opt: {
-    media: {
-      tags: {
-        value: string;
-        label: string;
-      }[] | null;
-    };
-  };
-  altText?: string | z.objectInputType<Record<string, z.ZodTypeAny>, z.ZodTypeAny, "passthrough"> | undefined;
-  description?: string | z.objectInputType<Record<string, z.ZodTypeAny>, z.ZodTypeAny, "passthrough"> | undefined;
-  title?: string | z.objectInputType<Record<string, z.ZodTypeAny>, z.ZodTypeAny, "passthrough"> | undefined;
-  creditLine?: string | z.objectInputType<Record<string, z.ZodTypeAny>, z.ZodTypeAny, "passthrough"> | undefined;
-}>;
-type MediaTagsOptions = {
-  mediaTags?: string[];
-};
-type MediaToolOptions = {
-  maximumUploadSize?: number;
-  createTagsOnUpload?: boolean;
-  components?: {
-    details?: ComponentType<DetailsProps & {
-      renderDefaultDetails: (props: DetailsProps) => JSX.Element;
-    }>;
-  };
-  creditLine?: {
-    enabled: boolean;
-    excludeSources?: string | string[];
-  };
-  directUploads?: boolean;
-  /**
-   * Optional locales following Sanity recommended scheme: [{ id, title }]
-   * https://www.sanity.io/docs/studio/localization#k4da239411955
-   */
-  locales?: Locale[];
-};
-type Locale = {
-  title: string;
-  id: string;
-  [key: string]: unknown;
-};
-type LocalizedString = string | Record<string, string>;
-type CustomFields = {
-  altText?: LocalizedString;
-  description?: LocalizedString;
-  opt?: {
-    media?: {
-      tags?: SanityReference[];
-    };
-  };
-  title?: LocalizedString;
-};
-type Asset = FileAsset | ImageAsset;
-type AssetFormData = z.infer<ReturnType<typeof getAssetFormSchema>>;
-type FileAsset = SanityAssetDocument & CustomFields & {
-  _type: 'sanity.fileAsset';
-};
-type ImageAsset = SanityImageAssetDocument & CustomFields & {
-  _type: 'sanity.imageAsset';
-  creditLine?: LocalizedString;
-};
-type SanityReference = {
-  _ref: string;
-  _type: 'reference';
-  _weak?: boolean;
-};
-type TagSelectOption = z.infer<typeof tagOptionSchema>;
-declare const mediaAssetSource: {
-  component: (props: import("sanity").AssetSourceComponentProps) => import("react").JSX.Element;
-  icon: import("react").ForwardRefExoticComponent<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
-  name: string;
-  title: string;
-};
-declare const media: import("sanity").Plugin<void | MediaToolOptions>;
-type AutoTagInputProps = InputProps & {
-  mediaTags?: string[];
-};
-/**
- * Input component that automatically applies media tags when an asset is selected or uploaded.
- *
- * Apply explicitly to image/file fields that should be auto-tagged:
- * ```ts
- * import {AutoTagInput} from 'sanity-plugin-media'
- *
- * defineField({
- *   type: 'image',
- *   options: { mediaTags: ['product'] },   // also pre-filters the media browser
- *   components: { input: AutoTagInput },
- * })
- * ```
- *
- * Pass `mediaTags` as a prop to override or use without `options`:
- * ```ts
- * components: { input: (props) => <AutoTagInput {...props} mediaTags={['product']} /> }
- * ```
- */
-declare function AutoTagInput(props: AutoTagInputProps): import("react").JSX.Element;
-type ImageMediaFieldConfig = Omit<ImageDefinition, 'options'> & FieldDefinitionBase & {
-  name: string;
-  mediaTags: string[];
-  options?: ImageDefinition['options'];
-};
-type FileMediaFieldConfig = Omit<FileDefinition, 'options'> & FieldDefinitionBase & {
-  name: string;
-  mediaTags: string[];
-  options?: FileDefinition['options'];
-};
-type ImageMediaFieldResult = Omit<ImageDefinition, 'options'> & FieldDefinitionBase & {
-  options?: ImageDefinition['options'] & {
-    mediaTags: string[];
-  };
-  components: {
-    input: typeof AutoTagInput;
-  };
-} & WidenValidation & WidenInitialValue;
-type FileMediaFieldResult = Omit<FileDefinition, 'options'> & FieldDefinitionBase & {
-  options?: FileDefinition['options'] & {
-    mediaTags: string[];
-  };
-  components: {
-    input: typeof AutoTagInput;
-  };
-} & WidenValidation & WidenInitialValue;
-/**
- * Defines an image or file field with automatic media tag application when an asset is selected.
- *
- * Pass `mediaTags` at the top level — they are moved into `options.mediaTags` (for media browser
- * pre-filtering) and wire up {@link AutoTagInput} as the field component automatically:
- * ```ts
- * import {mediaField} from 'sanity-plugin-media'
- *
- * mediaField({
- *   name: 'coverImage',
- *   type: 'image',
- *   mediaTags: ['product-cover'],
- *   options: { hotspot: true },
- * })
- * ```
- *
- * For file fields, set `type: 'file'`:
- * ```ts
- * mediaField({ name: 'drawing', type: 'file', mediaTags: ['model-drawing'] })
- * ```
- */
-declare function mediaField(config: ImageMediaFieldConfig): ImageMediaFieldResult;
-declare function mediaField(config: FileMediaFieldConfig): FileMediaFieldResult;
-export { AutoTagInput, type AutoTagInputProps, type MediaTagsOptions, type MediaToolOptions, media, mediaAssetSource, mediaField };
-//# sourceMappingURL=index.d.cts.map

package/dist/index.d.cts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.cts","names":[],"sources":["../src/components/DialogAssetEdit/Details.tsx","../src/formSchema/index.ts","../src/types/index.ts","../src/plugin.tsx","../src/components/AutoTagInputWrapper/index.tsx","../src/utils/mediaField.ts"],"mappings":"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"}

package/sanity.json

@@ -1,8 +0,0 @@
-{
-  "parts": [
-    {
-      "implements": "part:@sanity/base/sanity-root",
-      "path": "./v2-incompatible.js"
-    }
-  ]
-}

package/src/__tests__/fixtures/createEpicTestStore.ts

@@ -1,28 +0,0 @@
-import {configureStore, type AnyAction, type EnhancedStore} from '@reduxjs/toolkit'
-import type {SanityClient} from '@sanity/client'
-import type {Epic} from 'redux-observable'
-import {createEpicMiddleware} from 'redux-observable'
-
-import {rootReducer} from '../../modules'
-import type {RootReducerState} from '../../modules/types'
-import {createTestRootState} from './rootState'
-
-export function createEpicTestStore(
-  epic: Epic<AnyAction, AnyAction, RootReducerState, {client: SanityClient}>,
-  mockClient: SanityClient,
-  preloaded?: Partial<RootReducerState>,
-): EnhancedStore<RootReducerState, AnyAction> {
-  const epicMiddleware = createEpicMiddleware<AnyAction, AnyAction, RootReducerState>({
-    dependencies: {client: mockClient},
-  })
-
-  const store = configureStore({
-    reducer: rootReducer,
-    middleware: (getDefaultMiddleware) =>
-      getDefaultMiddleware({serializableCheck: false, thunk: false}).concat(epicMiddleware),
-    preloadedState: createTestRootState(preloaded),
-  })
-
-  epicMiddleware.run(epic)
-  return store
-}

package/src/__tests__/fixtures/listenMock.ts

@@ -1,9 +0,0 @@
-import {vi} from 'vitest'
-
-/** Flat mock for client.listen() without deep callback nesting (ESLint max-nested-callbacks). */
-export function createListenMock(): ReturnType<typeof vi.fn> {
-  const unsubscribe = vi.fn()
-  const subscribe = vi.fn()
-  subscribe.mockReturnValue({unsubscribe})
-  return vi.fn().mockReturnValue({subscribe})
-}

package/src/__tests__/fixtures/mockSanityClient.ts

@@ -1,84 +0,0 @@
-import type {SanityClient} from '@sanity/client'
-import {Subject, of} from 'rxjs'
-import {vi} from 'vitest'
-
-export type MockSanityClient = {
-  observable: {
-    fetch: ReturnType<typeof vi.fn>
-    delete: ReturnType<typeof vi.fn>
-    create: ReturnType<typeof vi.fn>
-    assets: {upload: ReturnType<typeof vi.fn>}
-  }
-  fetch: ReturnType<typeof vi.fn>
-  listen: ReturnType<typeof vi.fn>
-  patch: ReturnType<typeof vi.fn>
-  transaction: ReturnType<typeof vi.fn>
-}
-
-export function createMockSanityClient(
-  overrides: Partial<Omit<MockSanityClient, 'observable'>> & {
-    observable?: Partial<MockSanityClient['observable']> & {
-      assets?: Partial<MockSanityClient['observable']['assets']>
-    }
-  } = {},
-): SanityClient {
-  const {observable: observableOverrides, ...restOverrides} = overrides
-
-  const observableBase: MockSanityClient['observable'] = {
-    fetch: vi.fn(() => of({items: []})),
-    delete: vi.fn(() => of({})),
-    create: vi.fn(() => of({_id: 'new'})),
-    assets: {
-      upload: vi.fn(() => of({type: 'complete', body: {document: {_id: 'up'}}})),
-    },
-  }
-
-  const observable: MockSanityClient['observable'] = {
-    ...observableBase,
-    ...observableOverrides,
-    assets: {
-      ...observableBase.assets,
-      ...observableOverrides?.assets,
-    },
-  }
-
-  const client: MockSanityClient = {
-    observable,
-    fetch: vi.fn(() => Promise.resolve(0)),
-    listen: vi.fn(() => new Subject()),
-    patch: vi.fn(),
-    transaction: vi.fn(),
-    ...restOverrides,
-  }
-
-  return client as unknown as SanityClient
-}
-
-export function mockPatchChain(result: unknown): {
-  set: ReturnType<typeof vi.fn>
-  setIfMissing: ReturnType<typeof vi.fn>
-  commit: ReturnType<typeof vi.fn>
-} {
-  const commit = vi.fn().mockResolvedValue(result)
-  const chain = {
-    set: vi.fn(),
-    setIfMissing: vi.fn(),
-    commit,
-  }
-  chain.set.mockImplementation(() => chain)
-  chain.setIfMissing.mockImplementation(() => chain)
-  return chain
-}
-
-export function mockTransactionCommit(resolved?: unknown): {
-  patch: ReturnType<typeof vi.fn>
-  delete: ReturnType<typeof vi.fn>
-  commit: ReturnType<typeof vi.fn>
-} {
-  const tx = {
-    patch: vi.fn().mockReturnThis(),
-    delete: vi.fn().mockReturnThis(),
-    commit: vi.fn().mockResolvedValue(resolved),
-  }
-  return tx
-}

package/src/__tests__/fixtures/renderWithProviders.tsx

@@ -1,55 +0,0 @@
-import {configureStore} from '@reduxjs/toolkit'
-import {studioTheme, ThemeProvider, ToastProvider} from '@sanity/ui'
-import {render} from '@testing-library/react'
-import type {ReactElement, ReactNode} from 'react'
-import {Provider} from 'react-redux'
-import {ColorSchemeProvider} from 'sanity'
-import type {AssetSourceComponentProps} from 'sanity'
-
-import {AssetBrowserDispatchProvider} from '../../contexts/AssetSourceDispatchContext'
-import {ToolOptionsProvider} from '../../contexts/ToolOptionsContext'
-import {rootReducer} from '../../modules'
-import type {RootReducerState} from '../../modules/types'
-import type {MediaToolOptions} from '../../types'
-import {createTestRootState} from './rootState'
-
-type Opts = {
-  onSelect?: AssetSourceComponentProps['onSelect']
-  preloaded?: Partial<RootReducerState>
-  toolOptions?: Partial<MediaToolOptions>
-}
-
-export function renderWithProviders(ui: ReactElement, opts: Opts = {}) {
-  const {onSelect, preloaded, toolOptions} = opts
-
-  const store = configureStore({
-    reducer: rootReducer,
-    middleware: (getDefaultMiddleware) =>
-      getDefaultMiddleware({thunk: false, serializableCheck: false}),
-    preloadedState: createTestRootState(preloaded),
-  })
-
-  const options: MediaToolOptions = {
-    creditLine: {enabled: false},
-    directUploads: true,
-    ...toolOptions,
-  }
-
-  const wrap = (node: ReactNode) => (
-    <Provider store={store}>
-      <ColorSchemeProvider scheme="light">
-        <ToolOptionsProvider options={options}>
-          <ThemeProvider theme={studioTheme}>
-            <ToastProvider>
-              <AssetBrowserDispatchProvider onSelect={onSelect}>
-                {node}
-              </AssetBrowserDispatchProvider>
-            </ToastProvider>
-          </ThemeProvider>
-        </ToolOptionsProvider>
-      </ColorSchemeProvider>
-    </Provider>
-  )
-
-  return {store, ...render(wrap(ui))}
-}

package/src/__tests__/fixtures/rootState.ts

@@ -1,27 +0,0 @@
-import {initialState as assetsInitialState} from '../../modules/assets'
-import type {RootReducerState} from '../../modules/types'
-
-export function createTestRootState(overrides: Partial<RootReducerState> = {}): RootReducerState {
-  const base: RootReducerState = {
-    assets: {
-      ...assetsInitialState,
-      assetTypes: ['file', 'image'],
-    },
-    debug: {badConnection: false, enabled: false},
-    dialog: {items: []},
-    notifications: {items: []},
-    search: {facets: [], query: ''},
-    selected: {assets: [], document: undefined, documentAssetIds: []},
-    tags: {
-      allIds: [],
-      byIds: {},
-      creating: false,
-      fetchCount: -1,
-      fetching: false,
-      panelVisible: true,
-    },
-    uploads: {allIds: [], byIds: {}},
-  }
-
-  return {...base, ...overrides} as RootReducerState
-}

package/src/__tests__/fixtures/withinDialog.ts

@@ -1,28 +0,0 @@
-import {within, type Screen} from '@testing-library/react'
-
-/** Topmost Sanity dialog matching `name` (handles animated duplicate layers). */
-export function getDialogRoot(name: RegExp, base: Screen): HTMLElement {
-  const dialogs = base.getAllByRole('dialog', {name})
-  const el = dialogs.at(-1)
-  if (!el) {
-    throw new Error(`No dialog found matching ${name}`)
-  }
-  return el
-}
-
-/** Scoped queries for that dialog. */
-export function withinDialog(name: RegExp, base: Screen) {
-  return within(getDialogRoot(name, base))
-}
-
-/**
- * Sanity `TextInput` is not always exposed as a labellable control; use the native input by `name`.
- */
-export function inputByName(dialogName: RegExp, base: Screen, name: string): HTMLInputElement {
-  const root = getDialogRoot(dialogName, base)
-  const input = root.querySelector(`input[name="${name}"]`)
-  if (!input || !(input instanceof HTMLInputElement)) {
-    throw new Error(`No input name="${name}" in dialog matching ${dialogName}`)
-  }
-  return input
-}

package/src/components/AssetGridVirtualized/index.tsx

@@ -1,94 +0,0 @@
-import {memo, forwardRef} from 'react'
-import {VirtuosoGrid} from 'react-virtuoso'
-import {styled} from 'styled-components'
-
-import useTypedSelector from '../../hooks/useTypedSelector'
-import type {CardAssetData, CardUploadData} from '../../types'
-import CardAsset from '../CardAsset'
-import CardUpload from '../CardUpload'
-
-type Props = {
-  items: (CardAssetData | CardUploadData)[]
-  onLoadMore?: () => void
-}
-
-const CARD_HEIGHT = 220
-const CARD_WIDTH = 240
-
-const VirtualCell = memo(
-  ({item, selected}: {item: CardAssetData | CardUploadData; selected: boolean}) => {
-    if (item?.type === 'asset') {
-      return <CardAsset id={item.id} selected={selected} />
-    }
-
-    if (item?.type === 'upload') {
-      return <CardUpload id={item.id} />
-    }
-
-    return null
-  },
-)
-
-const StyledItemContainer = styled.div`
-  height: ${CARD_HEIGHT}px;
-  width: ${CARD_WIDTH}px;
-`
-
-const ItemContainer = forwardRef<HTMLDivElement, any>((props, ref) => {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- we're doing this to avoid sc warnings about `context` passed as an attribute
-  const {context, ...rest} = props
-  return <StyledItemContainer ref={ref} {...rest} />
-})
-
-const StyledListContainer = styled.div`
-  display: grid;
-  grid-template-columns: repeat(auto-fill, ${CARD_WIDTH}px);
-  grid-template-rows: repeat(auto-fill, ${CARD_HEIGHT}px);
-  justify-content: center;
-  margin: 0 auto;
-`
-
-const ListContainer = forwardRef<HTMLDivElement, any>((props, ref) => {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- we're doing this to avoid sc warnings about `context` passed as an attribute
-  const {context, ...rest} = props
-  return <StyledListContainer ref={ref} {...rest} />
-})
-
-const AssetGridVirtualized = (props: Props) => {
-  const {items, onLoadMore} = props
-
-  // Redux
-  const selectedAssets = useTypedSelector((state) => state.selected.assets)
-
-  const selectedIds = (selectedAssets && selectedAssets.map((asset) => asset._id)) || []
-  const totalCount = items?.length
-
-  if (totalCount === 0) {
-    return null
-  }
-
-  return (
-    <VirtuosoGrid
-      className="media__custom-scrollbar"
-      computeItemKey={(index) => {
-        const item = items[index]
-        return item?.id ?? index
-      }}
-      components={{
-        Item: ItemContainer,
-        List: ListContainer,
-      }}
-      endReached={onLoadMore}
-      itemContent={(index) => {
-        const item = items[index]!
-        const selected = selectedIds.includes(item.id)
-        return <VirtualCell item={item} selected={selected} />
-      }}
-      overscan={48}
-      style={{overflowX: 'hidden', overflowY: 'scroll'}}
-      totalCount={totalCount}
-    />
-  )
-}
-
-export default AssetGridVirtualized