npm - @payloadcms/ui - Versions diffs - 4.0.0-canary.3 → 4.0.0-internal.011fd46 - Mend

@payloadcms/ui 4.0.0-canary.3 → 4.0.0-internal.011fd46

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (111) hide show

package/dist/elements/RelationshipTable/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","names":["getTranslation","hoistQueryParamsToAnd","transformColumnsToPreferences","React","Fragment","useCallback","useEffect","useRef","useState","useEffectEvent","useAuth","useConfig","ListQueryProvider","useServerFunctions","TableColumnsProvider","useTranslation","ColumnsButton","useDocumentDrawer","NoListResults","RelationshipProvider","AddNewButton","DrawerLink","RelationshipTablePagination","baseClass","RelationshipTable","props","AfterInput","allowCreate","BeforeInput","disableTable","field","fieldPath","filterOptions","initialData","initialDataFromProps","initialDrawerData","Label","parent","relationTo","Table","setTable","config","getEntityConfig","i18n","t","query","setQuery","collectionConfig","collectionSlug","isPolymorphic","Array","isArray","selectedCollection","setSelectedCollection","undefined","permissions","openDrawerWhenRelationChanges","currentDrawerID","setCurrentDrawerID","DocumentDrawer","closeDrawer","isDrawerOpen","openDrawer","id","isLoadingTable","setIsLoadingTable","data","setData","docs","reduce","acc","doc","columnState","setColumnState","getTableState","renderTable","newQuery","limit","defaultLimit","admin","pagination","sort","defaultSort","where","defaultColumns","map","accessor","active","renderRowTypes","disableRowTypes","newData","state","newColumnState","NewTable","columns","enableRowSelections","orderableFieldName","orderable","collection","name","tableAppearance","handleTableRender","onDrawerSave","operation","foundDocIndex","findIndex","d","withNewOrUpdatedData","newDocs","onDrawerDelete","args","filter","onDrawerOpen","current","canCreate","collections","create","memoizedListQuery","useMemo","addNewButton","_jsx","buttonStyle","className","label","onClick","columnsButton","slug","_jsxs","length","Actions","labels","singular","description","plural","title","modifySearchParams","onQueryChange","replaceAll","LinkedCellOverride","onDelete","onSave"],"sources":["../../../src/elements/RelationshipTable/index.tsx"],"sourcesContent":["'use client'\nimport { getTranslation } from '@payloadcms/translations'\nimport {\n type CollectionSlug,\n type Column,\n type JoinFieldClient,\n type ListQuery,\n type PaginatedDocs,\n type Where,\n} from 'payload'\nimport { hoistQueryParamsToAnd, transformColumnsToPreferences } from 'payload/shared'\nimport React, { Fragment, useCallback, useEffect, useRef, useState } from 'react'\n\nimport type { DocumentDrawerProps } from '../DocumentDrawer/types.js'\n\nimport { useEffectEvent } from '../../hooks/useEffectEvent.js'\nimport { useAuth } from '../../providers/Auth/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { ListQueryProvider } from '../../providers/ListQuery/index.js'\nimport { useServerFunctions } from '../../providers/ServerFunctions/index.js'\nimport { TableColumnsProvider } from '../../providers/TableColumns/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { ColumnsButton } from '../ColumnsButton/index.js'\nimport { useDocumentDrawer } from '../DocumentDrawer/index.js'\nimport { NoListResults } from '../NoListResults/index.js'\nimport { RelationshipProvider } from '../Table/RelationshipProvider/index.js'\nimport { AddNewButton } from './AddNewButton.js'\nimport { DrawerLink } from './cells/DrawerLink/index.js'\nimport { RelationshipTablePagination } from './Pagination.js'\nimport './index.css'\n\nconst baseClass = 'relationship-table'\n\ntype RelationshipTableComponentProps = {\n readonly AfterInput?: React.ReactNode\n readonly allowCreate?: boolean\n readonly BeforeInput?: React.ReactNode\n readonly disableTable?: boolean\n readonly field: JoinFieldClient\n readonly fieldPath?: string\n readonly filterOptions?: Where\n readonly initialData?: PaginatedDocs\n readonly initialDrawerData?: DocumentDrawerProps['initialData']\n readonly Label?: React.ReactNode\n readonly parent?: {\n collectionSlug: CollectionSlug\n id: number \| string\n joinPath: string\n }\n readonly relationTo: string \| string[]\n}\n\nexport type OnDrawerOpen = (id?: string, collectionSlug?: string) => void\n\nexport const RelationshipTable: React.FC<RelationshipTableComponentProps> = (props) => {\n const {\n AfterInput,\n allowCreate = true,\n BeforeInput,\n disableTable = false,\n field,\n fieldPath,\n filterOptions,\n initialData: initialDataFromProps,\n initialDrawerData,\n Label,\n parent,\n relationTo,\n } = props\n const [Table, setTable] = useState<React.ReactNode>(null)\n const { config, getEntityConfig } = useConfig()\n const { i18n, t } = useTranslation()\n\n const [query, setQuery] = useState<ListQuery>()\n\n const [collectionConfig] = useState(() => getEntityConfig({ collectionSlug: relationTo }))\n\n const isPolymorphic = Array.isArray(relationTo)\n\n const [selectedCollection, setSelectedCollection] = useState(\n isPolymorphic ? undefined : relationTo,\n )\n\n const { permissions } = useAuth()\n\n const openDrawerWhenRelationChanges = useRef(false)\n\n const [currentDrawerID, setCurrentDrawerID] = useState<string \| undefined>(undefined)\n\n const [DocumentDrawer, , { closeDrawer, isDrawerOpen, openDrawer }] = useDocumentDrawer({\n id: currentDrawerID,\n collectionSlug: selectedCollection,\n })\n\n const [isLoadingTable, setIsLoadingTable] = useState(!disableTable)\n\n const [data, setData] = useState<PaginatedDocs>(() =>\n initialDataFromProps\n ? {\n ...initialDataFromProps,\n docs: Array.isArray(initialDataFromProps.docs)\n ? initialDataFromProps.docs.reduce((acc, doc) => {\n if (typeof doc === 'string' \|\| typeof doc === 'number') {\n return [\n ...acc,\n {\n id: doc,\n },\n ]\n }\n\n return [...acc, doc]\n }, [])\n : [],\n }\n : undefined,\n )\n\n const [columnState, setColumnState] = useState<Column[]>()\n\n const { getTableState } = useServerFunctions()\n\n const renderTable = useCallback(\n async (data?: PaginatedDocs) => {\n const newQuery: ListQuery = {\n limit: field?.defaultLimit \|\| collectionConfig?.admin?.pagination?.defaultLimit,\n sort: field.defaultSort \|\| collectionConfig?.defaultSort,\n ...(query \|\| {}),\n where: { ...(query?.where \|\| {}) },\n }\n\n if (filterOptions) {\n newQuery.where = hoistQueryParamsToAnd(newQuery.where, filterOptions)\n }\n\n // map columns from string[] to CollectionPreferences['columns']\n const defaultColumns = field.admin?.defaultColumns\n ? field.admin.defaultColumns.map((accessor) => ({\n accessor,\n active: true,\n }))\n : undefined\n\n const renderRowTypes =\n typeof field.admin?.disableRowTypes === 'boolean'\n ? !field.admin.disableRowTypes\n : Array.isArray(relationTo)\n\n const {\n data: newData,\n state: newColumnState,\n Table: NewTable,\n } = await getTableState({\n collectionSlug: relationTo,\n columns: transformColumnsToPreferences(query?.columns) \|\| defaultColumns,\n data,\n enableRowSelections: false,\n orderableFieldName:\n !field.orderable \|\| Array.isArray(field.collection)\n ? undefined\n : `_${field.collection}_${field.name}_order`,\n parent,\n query: newQuery,\n renderRowTypes,\n tableAppearance: 'condensed',\n })\n\n setData(newData)\n setTable(NewTable)\n setColumnState(newColumnState)\n setIsLoadingTable(false)\n },\n [\n field.defaultLimit,\n field.defaultSort,\n field.admin?.defaultColumns,\n field.admin?.disableRowTypes,\n field.collection,\n field.name,\n field.orderable,\n collectionConfig?.admin?.pagination?.defaultLimit,\n collectionConfig?.defaultSort,\n query,\n filterOptions,\n getTableState,\n relationTo,\n parent,\n ],\n )\n\n const handleTableRender = useEffectEvent((query: ListQuery, disableTable: boolean) => {\n if (!disableTable && (!Table \|\| query)) {\n void renderTable()\n }\n })\n\n useEffect(() => {\n handleTableRender(query, disableTable)\n }, [query, disableTable])\n\n const onDrawerSave = useCallback<DocumentDrawerProps['onSave']>(\n ({ doc, operation }) => {\n if (operation === 'create') {\n closeDrawer()\n }\n\n const foundDocIndex = data?.docs?.findIndex((d) => d.id === doc.id)\n const withNewOrUpdatedData: PaginatedDocs = { docs: [] } as PaginatedDocs\n\n if (foundDocIndex !== -1) {\n const newDocs = [...data.docs]\n newDocs[foundDocIndex] = doc\n withNewOrUpdatedData.docs = newDocs\n } else {\n withNewOrUpdatedData.docs = [doc, ...data.docs]\n }\n\n void renderTable(withNewOrUpdatedData)\n },\n [data?.docs, renderTable, closeDrawer],\n )\n\n const onDrawerDelete = useCallback<DocumentDrawerProps['onDelete']>(\n (args) => {\n const newDocs = data.docs.filter((doc) => doc.id !== args.id)\n\n void renderTable({\n ...data,\n docs: newDocs,\n })\n\n setCurrentDrawerID(undefined)\n },\n [data, renderTable],\n )\n\n const onDrawerOpen = useCallback<OnDrawerOpen>((id, collectionSlug) => {\n openDrawerWhenRelationChanges.current = true\n\n if (id) {\n setCurrentDrawerID(id)\n } else {\n setCurrentDrawerID(undefined)\n }\n\n if (collectionSlug) {\n setSelectedCollection(collectionSlug)\n } else {\n setSelectedCollection(undefined)\n }\n }, [])\n\n useEffect(() => {\n if (openDrawerWhenRelationChanges.current) {\n openDrawerWhenRelationChanges.current = false\n openDrawer()\n }\n }, [openDrawer])\n\n useEffect(() => {\n if (!isDrawerOpen) {\n setCurrentDrawerID(undefined)\n }\n }, [isDrawerOpen])\n\n const canCreate =\n allowCreate !== false &&\n permissions?.collections?.[isPolymorphic ? relationTo[0] : relationTo]?.create\n\n useEffect(() => {\n if (isPolymorphic && selectedCollection) {\n openDrawer()\n }\n }, [selectedCollection, openDrawer, isPolymorphic])\n\n useEffect(() => {\n if (isPolymorphic && !isDrawerOpen && selectedCollection) {\n setSelectedCollection(undefined)\n }\n // eslint-disable-next-line react-compiler/react-compiler -- TODO: fix\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isDrawerOpen])\n\n const memoizedListQuery = React.useMemo(\n () => ({\n columns: transformColumnsToPreferences(columnState)?.map(({ accessor }) => accessor),\n limit: field.defaultLimit ?? collectionConfig?.admin?.pagination?.defaultLimit,\n sort: field.defaultSort ?? collectionConfig?.defaultSort,\n }),\n [columnState, field, collectionConfig],\n )\n\n const addNewButton = (\n <AddNewButton\n allowCreate={allowCreate !== false}\n baseClass={baseClass}\n buttonStyle=\"ghost\"\n className={`${baseClass}__add-new${isPolymorphic ? '-polymorphic' : ''}`}\n collections={config.collections}\n i18n={i18n}\n label={i18n.t('fields:addNew')}\n onClick={isPolymorphic ? setSelectedCollection : openDrawer}\n permissions={permissions}\n relationTo={relationTo}\n />\n )\n\n const columnsButton = <ColumnsButton collectionSlug={collectionConfig?.slug} />\n\n return (\n <div className={baseClass}>\n {isLoadingTable ? (\n <Fragment>\n <div className={`${baseClass}__header`}>\n {Label}\n <div className={`${baseClass}__actions`}>{addNewButton}</div>\n </div>\n {BeforeInput}\n <p>{t('general:loading')}</p>\n </Fragment>\n ) : (\n <Fragment>\n {data?.docs && data.docs.length === 0 && (\n <Fragment>\n <div className={`${baseClass}__header`}>\n {Label}\n <div className={`${baseClass}__actions`}>{addNewButton}</div>\n </div>\n {BeforeInput}\n <NoListResults\n Actions={\n canCreate\n ? [\n <AddNewButton\n allowCreate={canCreate}\n baseClass={baseClass}\n collections={config.collections}\n i18n={i18n}\n key=\"create\"\n label={i18n.t('general:createNewLabel', {\n label: isPolymorphic\n ? i18n.t('general:document')\n : getTranslation(collectionConfig?.labels?.singular, i18n),\n })}\n onClick={isPolymorphic ? setSelectedCollection : openDrawer}\n permissions={permissions}\n relationTo={relationTo}\n />,\n ]\n : []\n }\n description={i18n.t('general:noResults', {\n label: isPolymorphic\n ? i18n.t('general:documents')\n : getTranslation(collectionConfig?.labels?.plural, i18n),\n })}\n title={i18n.t('general:noResultsFound')}\n />\n </Fragment>\n )}\n {data?.docs && data.docs.length > 0 && (\n <RelationshipProvider>\n <ListQueryProvider\n data={data}\n modifySearchParams={false}\n onQueryChange={setQuery}\n orderableFieldName={\n !field.orderable \|\| Array.isArray(field.collection)\n ? undefined\n : `_${field.collection}_${fieldPath.replaceAll('.', '_')}_order`\n }\n query={memoizedListQuery}\n >\n <TableColumnsProvider\n collectionSlug={isPolymorphic ? relationTo[0] : relationTo}\n columnState={columnState}\n LinkedCellOverride={\n <DrawerLink currentDrawerID={currentDrawerID} onDrawerOpen={onDrawerOpen} />\n }\n >\n <div className={`${baseClass}__header`}>\n {Label}\n <div className={`${baseClass}__actions`}>\n {addNewButton}\n {columnsButton}\n </div>\n </div>\n {BeforeInput}\n {Table}\n <RelationshipTablePagination />\n </TableColumnsProvider>\n </ListQueryProvider>\n </RelationshipProvider>\n )}\n </Fragment>\n )}\n {AfterInput}\n <DocumentDrawer\n initialData={initialDrawerData}\n onDelete={onDrawerDelete}\n onSave={onDrawerSave}\n />\n </div>\n )\n}\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"index.js","names":["getTranslation","hoistQueryParamsToAnd","transformColumnsToPreferences","React","Fragment","useCallback","useEffect","useRef","useState","useEffectEvent","useAuth","useConfig","ListQueryProvider","useServerFunctions","TableColumnsProvider","useTranslation","useDocumentDrawer","ListColumnSelectionButton","NoListResults","RelationshipProvider","AddNewButton","DrawerLink","RelationshipTablePagination","baseClass","RelationshipTable","props","AfterInput","allowCreate","BeforeInput","disableTable","field","fieldPath","filterOptions","initialData","initialDataFromProps","initialDrawerData","Label","parent","relationTo","Table","setTable","config","getEntityConfig","i18n","t","query","setQuery","collectionConfig","collectionSlug","isPolymorphic","Array","isArray","selectedCollection","setSelectedCollection","undefined","permissions","openDrawerWhenRelationChanges","currentDrawerID","setCurrentDrawerID","DocumentDrawer","closeDrawer","isDrawerOpen","openDrawer","id","isLoadingTable","setIsLoadingTable","data","setData","docs","reduce","acc","doc","columnState","setColumnState","getTableState","renderTable","newQuery","limit","defaultLimit","admin","pagination","sort","defaultSort","where","defaultColumns","map","accessor","active","renderRowTypes","disableRowTypes","newData","state","newColumnState","NewTable","columns","enableRowSelections","orderableFieldName","orderable","collection","name","tableAppearance","handleTableRender","onDrawerSave","operation","foundDocIndex","findIndex","d","withNewOrUpdatedData","newDocs","onDrawerDelete","args","filter","onDrawerOpen","current","canCreate","collections","create","memoizedListQuery","useMemo","addNewButton","_jsx","buttonStyle","className","label","onClick","columnsButton","slug","_jsxs","length","Actions","labels","singular","description","plural","title","modifySearchParams","onQueryChange","replaceAll","LinkedCellOverride","onDelete","onSave"],"sources":["../../../src/elements/RelationshipTable/index.tsx"],"sourcesContent":["'use client'\nimport { getTranslation } from '@payloadcms/translations'\nimport {\n type CollectionSlug,\n type Column,\n type JoinFieldClient,\n type ListQuery,\n type PaginatedDocs,\n type Where,\n} from 'payload'\nimport { hoistQueryParamsToAnd, transformColumnsToPreferences } from 'payload/shared'\nimport React, { Fragment, useCallback, useEffect, useRef, useState } from 'react'\n\nimport type { DocumentDrawerProps } from '../DocumentDrawer/types.js'\n\nimport { useEffectEvent } from '../../hooks/useEffectEvent.js'\nimport { useAuth } from '../../providers/Auth/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { ListQueryProvider } from '../../providers/ListQuery/index.js'\nimport { useServerFunctions } from '../../providers/ServerFunctions/index.js'\nimport { TableColumnsProvider } from '../../providers/TableColumns/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { useDocumentDrawer } from '../DocumentDrawer/index.js'\nimport { ListColumnSelectionButton } from '../ListColumnSelectionButton/index.js'\nimport { NoListResults } from '../NoListResults/index.js'\nimport { RelationshipProvider } from '../Table/RelationshipProvider/index.js'\nimport { AddNewButton } from './AddNewButton.js'\nimport { DrawerLink } from './cells/DrawerLink/index.js'\nimport { RelationshipTablePagination } from './Pagination.js'\nimport './index.css'\n\nconst baseClass = 'relationship-table'\n\ntype RelationshipTableComponentProps = {\n readonly AfterInput?: React.ReactNode\n readonly allowCreate?: boolean\n readonly BeforeInput?: React.ReactNode\n readonly disableTable?: boolean\n readonly field: JoinFieldClient\n readonly fieldPath?: string\n readonly filterOptions?: Where\n readonly initialData?: PaginatedDocs\n readonly initialDrawerData?: DocumentDrawerProps['initialData']\n readonly Label?: React.ReactNode\n readonly parent?: {\n collectionSlug: CollectionSlug\n id: number \| string\n joinPath: string\n }\n readonly relationTo: string \| string[]\n}\n\nexport type OnDrawerOpen = (id?: string, collectionSlug?: string) => void\n\nexport const RelationshipTable: React.FC<RelationshipTableComponentProps> = (props) => {\n const {\n AfterInput,\n allowCreate = true,\n BeforeInput,\n disableTable = false,\n field,\n fieldPath,\n filterOptions,\n initialData: initialDataFromProps,\n initialDrawerData,\n Label,\n parent,\n relationTo,\n } = props\n const [Table, setTable] = useState<React.ReactNode>(null)\n const { config, getEntityConfig } = useConfig()\n const { i18n, t } = useTranslation()\n\n const [query, setQuery] = useState<ListQuery>()\n\n const [collectionConfig] = useState(() => getEntityConfig({ collectionSlug: relationTo }))\n\n const isPolymorphic = Array.isArray(relationTo)\n\n const [selectedCollection, setSelectedCollection] = useState(\n isPolymorphic ? undefined : relationTo,\n )\n\n const { permissions } = useAuth()\n\n const openDrawerWhenRelationChanges = useRef(false)\n\n const [currentDrawerID, setCurrentDrawerID] = useState<string \| undefined>(undefined)\n\n const [DocumentDrawer, , { closeDrawer, isDrawerOpen, openDrawer }] = useDocumentDrawer({\n id: currentDrawerID,\n collectionSlug: selectedCollection,\n })\n\n const [isLoadingTable, setIsLoadingTable] = useState(!disableTable)\n\n const [data, setData] = useState<PaginatedDocs>(() =>\n initialDataFromProps\n ? {\n ...initialDataFromProps,\n docs: Array.isArray(initialDataFromProps.docs)\n ? initialDataFromProps.docs.reduce((acc, doc) => {\n if (typeof doc === 'string' \|\| typeof doc === 'number') {\n return [\n ...acc,\n {\n id: doc,\n },\n ]\n }\n\n return [...acc, doc]\n }, [])\n : [],\n }\n : undefined,\n )\n\n const [columnState, setColumnState] = useState<Column[]>()\n\n const { getTableState } = useServerFunctions()\n\n const renderTable = useCallback(\n async (data?: PaginatedDocs) => {\n const newQuery: ListQuery = {\n limit: field?.defaultLimit \|\| collectionConfig?.admin?.pagination?.defaultLimit,\n sort: field.defaultSort \|\| collectionConfig?.defaultSort,\n ...(query \|\| {}),\n where: { ...(query?.where \|\| {}) },\n }\n\n if (filterOptions) {\n newQuery.where = hoistQueryParamsToAnd(newQuery.where, filterOptions)\n }\n\n // map columns from string[] to CollectionPreferences['columns']\n const defaultColumns = field.admin?.defaultColumns\n ? field.admin.defaultColumns.map((accessor) => ({\n accessor,\n active: true,\n }))\n : undefined\n\n const renderRowTypes =\n typeof field.admin?.disableRowTypes === 'boolean'\n ? !field.admin.disableRowTypes\n : Array.isArray(relationTo)\n\n const {\n data: newData,\n state: newColumnState,\n Table: NewTable,\n } = await getTableState({\n collectionSlug: relationTo,\n columns: transformColumnsToPreferences(query?.columns) \|\| defaultColumns,\n data,\n enableRowSelections: false,\n orderableFieldName:\n !field.orderable \|\| Array.isArray(field.collection)\n ? undefined\n : `_${field.collection}_${field.name}_order`,\n parent,\n query: newQuery,\n renderRowTypes,\n tableAppearance: 'condensed',\n })\n\n setData(newData)\n setTable(NewTable)\n setColumnState(newColumnState)\n setIsLoadingTable(false)\n },\n [\n field.defaultLimit,\n field.defaultSort,\n field.admin?.defaultColumns,\n field.admin?.disableRowTypes,\n field.collection,\n field.name,\n field.orderable,\n collectionConfig?.admin?.pagination?.defaultLimit,\n collectionConfig?.defaultSort,\n query,\n filterOptions,\n getTableState,\n relationTo,\n parent,\n ],\n )\n\n const handleTableRender = useEffectEvent((query: ListQuery, disableTable: boolean) => {\n if (!disableTable && (!Table \|\| query)) {\n void renderTable()\n }\n })\n\n useEffect(() => {\n handleTableRender(query, disableTable)\n }, [query, disableTable])\n\n const onDrawerSave = useCallback<DocumentDrawerProps['onSave']>(\n ({ doc, operation }) => {\n if (operation === 'create') {\n closeDrawer()\n }\n\n const foundDocIndex = data?.docs?.findIndex((d) => d.id === doc.id)\n const withNewOrUpdatedData: PaginatedDocs = { docs: [] } as PaginatedDocs\n\n if (foundDocIndex !== -1) {\n const newDocs = [...data.docs]\n newDocs[foundDocIndex] = doc\n withNewOrUpdatedData.docs = newDocs\n } else {\n withNewOrUpdatedData.docs = [doc, ...data.docs]\n }\n\n void renderTable(withNewOrUpdatedData)\n },\n [data?.docs, renderTable, closeDrawer],\n )\n\n const onDrawerDelete = useCallback<DocumentDrawerProps['onDelete']>(\n (args) => {\n const newDocs = data.docs.filter((doc) => doc.id !== args.id)\n\n void renderTable({\n ...data,\n docs: newDocs,\n })\n\n setCurrentDrawerID(undefined)\n },\n [data, renderTable],\n )\n\n const onDrawerOpen = useCallback<OnDrawerOpen>((id, collectionSlug) => {\n openDrawerWhenRelationChanges.current = true\n\n if (id) {\n setCurrentDrawerID(id)\n } else {\n setCurrentDrawerID(undefined)\n }\n\n if (collectionSlug) {\n setSelectedCollection(collectionSlug)\n } else {\n setSelectedCollection(undefined)\n }\n }, [])\n\n useEffect(() => {\n if (openDrawerWhenRelationChanges.current) {\n openDrawerWhenRelationChanges.current = false\n openDrawer()\n }\n }, [openDrawer])\n\n useEffect(() => {\n if (!isDrawerOpen) {\n setCurrentDrawerID(undefined)\n }\n }, [isDrawerOpen])\n\n const canCreate =\n allowCreate !== false &&\n permissions?.collections?.[isPolymorphic ? relationTo[0] : relationTo]?.create\n\n useEffect(() => {\n if (isPolymorphic && selectedCollection) {\n openDrawer()\n }\n }, [selectedCollection, openDrawer, isPolymorphic])\n\n useEffect(() => {\n if (isPolymorphic && !isDrawerOpen && selectedCollection) {\n setSelectedCollection(undefined)\n }\n // eslint-disable-next-line react-compiler/react-compiler -- TODO: fix\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isDrawerOpen])\n\n const memoizedListQuery = React.useMemo(\n () => ({\n columns: transformColumnsToPreferences(columnState)?.map(({ accessor }) => accessor),\n limit: field.defaultLimit ?? collectionConfig?.admin?.pagination?.defaultLimit,\n sort: field.defaultSort ?? collectionConfig?.defaultSort,\n }),\n [columnState, field, collectionConfig],\n )\n\n const addNewButton = (\n <AddNewButton\n allowCreate={allowCreate !== false}\n baseClass={baseClass}\n buttonStyle=\"ghost\"\n className={`${baseClass}__add-new${isPolymorphic ? '-polymorphic' : ''}`}\n collections={config.collections}\n i18n={i18n}\n label={i18n.t('fields:addNew')}\n onClick={isPolymorphic ? setSelectedCollection : openDrawer}\n permissions={permissions}\n relationTo={relationTo}\n />\n )\n\n const columnsButton = <ListColumnSelectionButton collectionSlug={collectionConfig?.slug} />\n\n return (\n <div className={baseClass}>\n {isLoadingTable ? (\n <Fragment>\n <div className={`${baseClass}__header`}>\n {Label}\n <div className={`${baseClass}__actions`}>{addNewButton}</div>\n </div>\n {BeforeInput}\n <p>{t('general:loading')}</p>\n </Fragment>\n ) : (\n <Fragment>\n {data?.docs && data.docs.length === 0 && (\n <Fragment>\n <div className={`${baseClass}__header`}>\n {Label}\n <div className={`${baseClass}__actions`}>{addNewButton}</div>\n </div>\n {BeforeInput}\n <NoListResults\n Actions={\n canCreate\n ? [\n <AddNewButton\n allowCreate={canCreate}\n baseClass={baseClass}\n collections={config.collections}\n i18n={i18n}\n key=\"create\"\n label={i18n.t('general:createNewLabel', {\n label: isPolymorphic\n ? i18n.t('general:document')\n : getTranslation(collectionConfig?.labels?.singular, i18n),\n })}\n onClick={isPolymorphic ? setSelectedCollection : openDrawer}\n permissions={permissions}\n relationTo={relationTo}\n />,\n ]\n : []\n }\n description={i18n.t('general:noResults', {\n label: isPolymorphic\n ? i18n.t('general:documents')\n : getTranslation(collectionConfig?.labels?.plural, i18n),\n })}\n title={i18n.t('general:noResultsFound')}\n />\n </Fragment>\n )}\n {data?.docs && data.docs.length > 0 && (\n <RelationshipProvider>\n <ListQueryProvider\n data={data}\n modifySearchParams={false}\n onQueryChange={setQuery}\n orderableFieldName={\n !field.orderable \|\| Array.isArray(field.collection)\n ? undefined\n : `_${field.collection}_${fieldPath.replaceAll('.', '_')}_order`\n }\n query={memoizedListQuery}\n >\n <TableColumnsProvider\n collectionSlug={isPolymorphic ? relationTo[0] : relationTo}\n columnState={columnState}\n LinkedCellOverride={\n <DrawerLink currentDrawerID={currentDrawerID} onDrawerOpen={onDrawerOpen} />\n }\n >\n <div className={`${baseClass}__header`}>\n {Label}\n <div className={`${baseClass}__actions`}>\n {addNewButton}\n {columnsButton}\n </div>\n </div>\n {BeforeInput}\n {Table}\n <RelationshipTablePagination />\n </TableColumnsProvider>\n </ListQueryProvider>\n </RelationshipProvider>\n )}\n </Fragment>\n )}\n {AfterInput}\n <DocumentDrawer\n initialData={initialDrawerData}\n onDelete={onDrawerDelete}\n onSave={onDrawerSave}\n />\n </div>\n )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/SortColumn/index.css CHANGED Viewed

@@ -1,6 +1,6 @@
 @layer payload-default {
   .sort-column {
-    display: flex;
+    display: inline-flex;
     gap: var(--spacer-1);
     align-items: center;
   }

package/dist/elements/Table/index.css CHANGED Viewed

@@ -49,16 +49,30 @@
     }
     /* Linked cells: move padding to the anchor/button for full-cell clickability */
-    .cell--linked {
+    td.cell--linked {
       padding: 0;
+      &:first-child,
+      &:last-child {
+        padding: 0;
+      }
       > :is(a, button) {
         display: flex;
         align-items: center;
+        width: 100%;
         padding: var(--spacer-2) var(--spacer-2-5);
         min-height: calc(var(--spacer-4) * 2);
         cursor: pointer;
       }
+      &:first-child > :is(a, button) {
+        padding-inline-start: var(--gutter-h);
+      }
+    }
+    .drawer & td.cell--linked:first-child > :is(a, button) {
+      padding-inline-start: var(--spacer-3);
     }
     #heading-_select,
@@ -178,10 +192,18 @@
     }
     /* Linked cells: move padding to the anchor/button for full-cell clickability */
-    .cell--linked {
+    td.cell--linked {
       padding: 0;
+      &:first-child,
+      &:last-child {
+        padding: 0;
+      }
       > :is(a, button) {
+        display: flex;
+        align-items: center;
+        width: 100%;
         padding: 0 var(--spacer-2-5);
         min-height: var(--spacer-5);
         cursor: pointer;

package/dist/elements/WhereBuilder/Condition/index.d.ts CHANGED Viewed

@@ -3,6 +3,7 @@ import type { AddCondition, ReducedField, RemoveCondition, UpdateCondition, Upda
 export type Props = {
     readonly addCondition: AddCondition;
     readonly andIndex: number;
+    readonly disableRemoveButton: boolean;
     readonly fieldPath: string;
     readonly filterOptions?: ResolvedFilterOptions;
     readonly isFirstCondition: boolean;

package/dist/elements/WhereBuilder/Condition/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/WhereBuilder/Condition/index.tsx"],"names":[],"mappings":"AACA,OAAO,~~KAA2C~~,MAAM,OAAO,CAAA;~~AAE/D~~,OAAO,KAAK,EACV,YAAY,EACZ,YAAY,EACZ,eAAe,EACf,eAAe,EACf,UAAU,EACV,KAAK,EACN,MAAM,aAAa,CAAA;AAEpB,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,CAAC,YAAY,EAAE,YAAY,CAAA;IACnC,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAA;IACzB,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAA;IAC1B,QAAQ,CAAC,aAAa,CAAC,EAAE,qBAAqB,CAAA;IAC9C,QAAQ,CAAC,gBAAgB,EAAE,OAAO,CAAA;IAClC,QAAQ,CAAC,IAAI,EAAE,KAAK,GAAG,IAAI,CAAA;IAC3B,QAAQ,CAAC,QAAQ,EAAE,QAAQ,CAAA;IAC3B,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAA;IACxB,QAAQ,CAAC,aAAa,EAAE,YAAY,EAAE,CAAA;IACtC,QAAQ,CAAC,eAAe,EAAE,eAAe,CAAA;IACzC,QAAQ,CAAC,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzC,QAAQ,CAAC,eAAe,EAAE,eAAe,CAAA;IACzC,QAAQ,CAAC,UAAU,EAAE,UAAU,CAAA;IAC/B,QAAQ,CAAC,KAAK,EAAE,KAAK,CAAA;CACtB,CAAA;AAED,OAAO,KAAK,EAAE,QAAQ,EAA2B,qBAAqB,EAAE,MAAM,SAAS,CAAA;AAcvF,OAAO,aAAa,CAAA;AAIpB,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,~~CAqLrC~~,CAAA"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/WhereBuilder/Condition/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmD,MAAM,OAAO,CAAA;AAEvE,OAAO,KAAK,EACV,YAAY,EACZ,YAAY,EACZ,eAAe,EACf,eAAe,EACf,UAAU,EACV,KAAK,EACN,MAAM,aAAa,CAAA;AAEpB,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,CAAC,YAAY,EAAE,YAAY,CAAA;IACnC,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAA;IACzB,QAAQ,CAAC,mBAAmB,EAAE,OAAO,CAAA;IACrC,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAA;IAC1B,QAAQ,CAAC,aAAa,CAAC,EAAE,qBAAqB,CAAA;IAC9C,QAAQ,CAAC,gBAAgB,EAAE,OAAO,CAAA;IAClC,QAAQ,CAAC,IAAI,EAAE,KAAK,GAAG,IAAI,CAAA;IAC3B,QAAQ,CAAC,QAAQ,EAAE,QAAQ,CAAA;IAC3B,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAA;IACxB,QAAQ,CAAC,aAAa,EAAE,YAAY,EAAE,CAAA;IACtC,QAAQ,CAAC,eAAe,EAAE,eAAe,CAAA;IACzC,QAAQ,CAAC,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzC,QAAQ,CAAC,eAAe,EAAE,eAAe,CAAA;IACzC,QAAQ,CAAC,UAAU,EAAE,UAAU,CAAA;IAC/B,QAAQ,CAAC,KAAK,EAAE,KAAK,CAAA;CACtB,CAAA;AAED,OAAO,KAAK,EAAE,QAAQ,EAA2B,qBAAqB,EAAE,MAAM,SAAS,CAAA;AAcvF,OAAO,aAAa,CAAA;AAIpB,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAuMrC,CAAA"}

package/dist/elements/WhereBuilder/Condition/index.js CHANGED Viewed

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { isFieldDisabled } from 'payload/shared';
 import { useDebounce } from '../../../hooks/useDebounce.js';
 import { useEffectEvent } from '../../../hooks/useEffectEvent.js';
@@ -16,6 +16,7 @@ const baseClass = 'condition';
 export const Condition = props => {
   const {
     andIndex,
+    disableRemoveButton,
     fieldPath,
     filterOptions,
     isFirstCondition,
@@ -35,6 +36,9 @@ export const Condition = props => {
   const reducedField = reducedFields.find(field => field.fieldPath === fieldPath);
   const [internalValue, setInternalValue] = useState(value);
   const debouncedValue = useDebounce(internalValue, 300);
+  // Tracks the last value this row reported upward, so the downward sync below can tell our own
+  // committed echo apart from a genuine external change (e.g. the row being cleared/reset).
+  const lastReportedValue = useRef(value);
   const booleanSelect = ['exists'].includes(operator) || reducedField?.field?.type === 'checkbox';
   let valueOptions = [];
   if (booleanSelect) {
@@ -50,19 +54,29 @@ export const Condition = props => {
   }
   const updateValue = useEffectEvent(async debouncedValue_0 => {
     if (operator) {
+      const normalizedValue = debouncedValue_0 === null || debouncedValue_0 === '' ? undefined : debouncedValue_0;
+      lastReportedValue.current = normalizedValue;
       await updateCondition({
         type: 'value',
         andIndex,
         field: reducedField,
         operator,
         orIndex,
-        value: debouncedValue_0 === null || debouncedValue_0 === '' ? undefined : debouncedValue_0
+        value: normalizedValue
       });
     }
   });
   useEffect(() => {
     void updateValue(debouncedValue);
   }, [debouncedValue]);
+  // Sync external value changes (e.g. the row being cleared or reset to a placeholder) down into
+  // local state, but skip our own committed echo so this never clobbers in-progress typing.
+  useEffect(() => {
+    if (value !== lastReportedValue.current) {
+      lastReportedValue.current = value;
+      setInternalValue(value);
+    }
+  }, [value]);
   const disabled = !reducedField?.fieldPath || isFieldDisabled(reducedField?.field, 'filter');
   const handleFieldChange = useCallback(async field_0 => {
     setInternalValue(undefined);
@@ -169,6 +183,7 @@ export const Condition = props => {
         children: /*#__PURE__*/_jsx(Button, {
           buttonStyle: "ghost",
           className: `${baseClass}__actions-remove`,
+          disabled: disableRemoveButton,
           icon: /*#__PURE__*/_jsx(LineIcon, {
             size: 24
           }),

package/dist/elements/WhereBuilder/Condition/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","names":["React","useCallback","useEffect","useState","isFieldDisabled","useDebounce","useEffectEvent","LineIcon","useTranslation","Button","ReactSelect","DefaultFilter","getOperatorValueTypes","baseClass","Condition","props","andIndex","fieldPath","filterOptions","isFirstCondition","join","operator","orIndex","reducedFields","removeCondition","RenderedFilter","updateCondition","updateJoin","value","t","reducedField","find","field","internalValue","setInternalValue","debouncedValue","booleanSelect","includes","type","valueOptions","label","options","updateValue","undefined","disabled","handleFieldChange","option","handleOperatorChange","operatorValueTypes","validOperatorValue","isValidValue","_jsx","className","_jsxs","classNames","menu","isClearable","onChange","filterOption","inputValue","data","plainTextLabel","toLowerCase","filter","map","f","operators","o","internalField","buttonStyle","icon","size","onClick"],"sources":["../../../../src/elements/WhereBuilder/Condition/index.tsx"],"sourcesContent":["'use client'\nimport React, { useCallback, useEffect, useState } from 'react'\n\nimport type {\n AddCondition,\n ReducedField,\n RemoveCondition,\n UpdateCondition,\n UpdateJoin,\n Value,\n} from '../types.js'\n\nexport type Props = {\n readonly addCondition: AddCondition\n readonly andIndex: number\n readonly fieldPath: string\n readonly filterOptions?: ResolvedFilterOptions\n readonly isFirstCondition: boolean\n readonly join: 'and' \| 'or'\n readonly operator: Operator\n readonly orIndex: number\n readonly reducedFields: ReducedField[]\n readonly removeCondition: RemoveCondition\n readonly RenderedFilter?: React.ReactNode\n readonly updateCondition: UpdateCondition\n readonly updateJoin: UpdateJoin\n readonly value: Value\n}\n\nimport type { Operator, Option as PayloadOption, ResolvedFilterOptions } from 'payload'\n\nimport { isFieldDisabled } from 'payload/shared'\n\nimport type { Option } from '../../ReactSelect/index.js'\n\nimport { useDebounce } from '../../../hooks/useDebounce.js'\nimport { useEffectEvent } from '../../../hooks/useEffectEvent.js'\nimport { LineIcon } from '../../../icons/Line/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { Button } from '../../Button/index.js'\nimport { ReactSelect } from '../../ReactSelect/index.js'\nimport { DefaultFilter } from './DefaultFilter/index.js'\nimport { getOperatorValueTypes } from './validOperators.js'\nimport './index.css'\n\nconst baseClass = 'condition'\n\nexport const Condition: React.FC<Props> = (props) => {\n const {\n andIndex,\n fieldPath,\n filterOptions,\n isFirstCondition,\n join,\n operator,\n orIndex,\n reducedFields,\n removeCondition,\n RenderedFilter,\n updateCondition,\n updateJoin,\n value,\n } = props\n\n const { t } = useTranslation()\n\n const reducedField = reducedFields.find((field) => field.fieldPath === fieldPath)\n\n const [internalValue, setInternalValue] = useState<Value>(value)\n\n const debouncedValue = useDebounce(internalValue, 300)\n\n const booleanSelect = ['exists'].includes(operator) \|\| reducedField?.field?.type === 'checkbox'\n\n let valueOptions: PayloadOption[] = []\n\n if (booleanSelect) {\n valueOptions = [\n { label: t('general:true'), value: 'true' },\n { label: t('general:false'), value: 'false' },\n ]\n } else if (reducedField?.field && 'options' in reducedField.field) {\n valueOptions = reducedField.field.options\n }\n\n const updateValue = useEffectEvent(async (debouncedValue: Value) => {\n if (operator) {\n await updateCondition({\n type: 'value',\n andIndex,\n field: reducedField,\n operator,\n orIndex,\n value: debouncedValue === null \|\| debouncedValue === '' ? undefined : debouncedValue,\n })\n }\n })\n\n useEffect(() => {\n void updateValue(debouncedValue)\n }, [debouncedValue])\n\n const disabled = !reducedField?.fieldPath \|\| isFieldDisabled(reducedField?.field, 'filter')\n\n const handleFieldChange = useCallback(\n async (field: Option<string>) => {\n setInternalValue(undefined)\n await updateCondition({\n type: 'field',\n andIndex,\n field: reducedFields.find((option) => option.fieldPath === field.value),\n operator,\n orIndex,\n value: undefined,\n })\n },\n [andIndex, operator, orIndex, reducedFields, updateCondition],\n )\n\n const handleOperatorChange = useCallback(\n async (operator: Option<Operator>) => {\n const operatorValueTypes = getOperatorValueTypes(reducedField.field.type)\n const validOperatorValue = operatorValueTypes[operator.value] \|\| 'any'\n const isValidValue =\n validOperatorValue === 'any' \|\|\n typeof value === validOperatorValue \|\|\n (validOperatorValue === 'boolean' && (value === 'true' \|\| value === 'false'))\n\n if (!isValidValue) {\n // if the current value is not valid for the new operator\n // reset the value before passing it to updateCondition\n setInternalValue(undefined)\n }\n\n await updateCondition({\n type: 'operator',\n andIndex,\n field: reducedField,\n operator: operator.value,\n orIndex,\n value: isValidValue ? value : undefined,\n })\n },\n [andIndex, reducedField, orIndex, updateCondition, value],\n )\n\n return (\n <div className={baseClass}>\n <div className={`${baseClass}__wrap`}>\n <div className={`${baseClass}__join`}>\n {isFirstCondition ? (\n <span className={`${baseClass}__join-label`}>{t('general:where')}</span>\n ) : (\n <ReactSelect\n classNames={{\n menu: () => 'condition__join-menu',\n }}\n isClearable={false}\n onChange={(option: Option<'and' \| 'or'>) =>\n updateJoin({ andIndex, join: option.value, orIndex })\n }\n options={[\n { label: t('general:and'), value: 'and' },\n { label: t('general:or'), value: 'or' },\n ]}\n value={{ label: join === 'and' ? t('general:and') : t('general:or'), value: join }}\n />\n )}\n </div>\n <div className={`${baseClass}__inputs`}>\n <div className={`${baseClass}__field`}>\n <ReactSelect\n disabled={disabled}\n filterOption={(option, inputValue) =>\n ((option?.data?.plainTextLabel as string) \|\| option.label)\n .toLowerCase()\n .includes(inputValue.toLowerCase())\n }\n isClearable={false}\n onChange={handleFieldChange}\n options={reducedFields\n .filter((field) => !isFieldDisabled(field.field, 'filter'))\n .map((f) => ({ ...f, value: f.fieldPath }))}\n value={reducedField ? { ...reducedField, value: reducedField.fieldPath } : undefined}\n />\n </div>\n <div className={`${baseClass}__operator`}>\n <ReactSelect\n disabled={disabled}\n isClearable={false}\n onChange={handleOperatorChange}\n options={reducedField?.operators}\n value={reducedField?.operators.find((o) => operator === o.value) \|\| null}\n />\n </div>\n <div className={`${baseClass}__value`}>\n {RenderedFilter \|\| (\n <DefaultFilter\n booleanSelect={booleanSelect}\n disabled={\n !operator \|\| !reducedField \|\| isFieldDisabled(reducedField?.field, 'filter')\n }\n filterOptions={filterOptions}\n internalField={reducedField}\n onChange={setInternalValue}\n operator={operator}\n options={valueOptions}\n value={internalValue ?? ''}\n />\n )}\n </div>\n </div>\n <div className={`${baseClass}__actions`}>\n <Button\n buttonStyle=\"ghost\"\n className={`${baseClass}__actions-remove`}\n icon={<LineIcon size={24} />}\n onClick={() =>\n removeCondition({\n andIndex,\n orIndex,\n })\n }\n />\n </div>\n </div>\n </div>\n )\n}\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"index.js","names":["React","useCallback","useEffect","useRef","useState","isFieldDisabled","useDebounce","useEffectEvent","LineIcon","useTranslation","Button","ReactSelect","DefaultFilter","getOperatorValueTypes","baseClass","Condition","props","andIndex","disableRemoveButton","fieldPath","filterOptions","isFirstCondition","join","operator","orIndex","reducedFields","removeCondition","RenderedFilter","updateCondition","updateJoin","value","t","reducedField","find","field","internalValue","setInternalValue","debouncedValue","lastReportedValue","booleanSelect","includes","type","valueOptions","label","options","updateValue","normalizedValue","undefined","current","disabled","handleFieldChange","option","handleOperatorChange","operatorValueTypes","validOperatorValue","isValidValue","_jsx","className","_jsxs","classNames","menu","isClearable","onChange","filterOption","inputValue","data","plainTextLabel","toLowerCase","filter","map","f","operators","o","internalField","buttonStyle","icon","size","onClick"],"sources":["../../../../src/elements/WhereBuilder/Condition/index.tsx"],"sourcesContent":["'use client'\nimport React, { useCallback, useEffect, useRef, useState } from 'react'\n\nimport type {\n AddCondition,\n ReducedField,\n RemoveCondition,\n UpdateCondition,\n UpdateJoin,\n Value,\n} from '../types.js'\n\nexport type Props = {\n readonly addCondition: AddCondition\n readonly andIndex: number\n readonly disableRemoveButton: boolean\n readonly fieldPath: string\n readonly filterOptions?: ResolvedFilterOptions\n readonly isFirstCondition: boolean\n readonly join: 'and' \| 'or'\n readonly operator: Operator\n readonly orIndex: number\n readonly reducedFields: ReducedField[]\n readonly removeCondition: RemoveCondition\n readonly RenderedFilter?: React.ReactNode\n readonly updateCondition: UpdateCondition\n readonly updateJoin: UpdateJoin\n readonly value: Value\n}\n\nimport type { Operator, Option as PayloadOption, ResolvedFilterOptions } from 'payload'\n\nimport { isFieldDisabled } from 'payload/shared'\n\nimport type { Option } from '../../ReactSelect/index.js'\n\nimport { useDebounce } from '../../../hooks/useDebounce.js'\nimport { useEffectEvent } from '../../../hooks/useEffectEvent.js'\nimport { LineIcon } from '../../../icons/Line/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { Button } from '../../Button/index.js'\nimport { ReactSelect } from '../../ReactSelect/index.js'\nimport { DefaultFilter } from './DefaultFilter/index.js'\nimport { getOperatorValueTypes } from './validOperators.js'\nimport './index.css'\n\nconst baseClass = 'condition'\n\nexport const Condition: React.FC<Props> = (props) => {\n const {\n andIndex,\n disableRemoveButton,\n fieldPath,\n filterOptions,\n isFirstCondition,\n join,\n operator,\n orIndex,\n reducedFields,\n removeCondition,\n RenderedFilter,\n updateCondition,\n updateJoin,\n value,\n } = props\n\n const { t } = useTranslation()\n\n const reducedField = reducedFields.find((field) => field.fieldPath === fieldPath)\n\n const [internalValue, setInternalValue] = useState<Value>(value)\n\n const debouncedValue = useDebounce(internalValue, 300)\n\n // Tracks the last value this row reported upward, so the downward sync below can tell our own\n // committed echo apart from a genuine external change (e.g. the row being cleared/reset).\n const lastReportedValue = useRef<Value>(value)\n\n const booleanSelect = ['exists'].includes(operator) \|\| reducedField?.field?.type === 'checkbox'\n\n let valueOptions: PayloadOption[] = []\n\n if (booleanSelect) {\n valueOptions = [\n { label: t('general:true'), value: 'true' },\n { label: t('general:false'), value: 'false' },\n ]\n } else if (reducedField?.field && 'options' in reducedField.field) {\n valueOptions = reducedField.field.options\n }\n\n const updateValue = useEffectEvent(async (debouncedValue: Value) => {\n if (operator) {\n const normalizedValue =\n debouncedValue === null \|\| debouncedValue === '' ? undefined : debouncedValue\n lastReportedValue.current = normalizedValue\n await updateCondition({\n type: 'value',\n andIndex,\n field: reducedField,\n operator,\n orIndex,\n value: normalizedValue,\n })\n }\n })\n\n useEffect(() => {\n void updateValue(debouncedValue)\n }, [debouncedValue])\n\n // Sync external value changes (e.g. the row being cleared or reset to a placeholder) down into\n // local state, but skip our own committed echo so this never clobbers in-progress typing.\n useEffect(() => {\n if (value !== lastReportedValue.current) {\n lastReportedValue.current = value\n setInternalValue(value)\n }\n }, [value])\n\n const disabled = !reducedField?.fieldPath \|\| isFieldDisabled(reducedField?.field, 'filter')\n\n const handleFieldChange = useCallback(\n async (field: Option<string>) => {\n setInternalValue(undefined)\n await updateCondition({\n type: 'field',\n andIndex,\n field: reducedFields.find((option) => option.fieldPath === field.value),\n operator,\n orIndex,\n value: undefined,\n })\n },\n [andIndex, operator, orIndex, reducedFields, updateCondition],\n )\n\n const handleOperatorChange = useCallback(\n async (operator: Option<Operator>) => {\n const operatorValueTypes = getOperatorValueTypes(reducedField.field.type)\n const validOperatorValue = operatorValueTypes[operator.value] \|\| 'any'\n const isValidValue =\n validOperatorValue === 'any' \|\|\n typeof value === validOperatorValue \|\|\n (validOperatorValue === 'boolean' && (value === 'true' \|\| value === 'false'))\n\n if (!isValidValue) {\n // if the current value is not valid for the new operator\n // reset the value before passing it to updateCondition\n setInternalValue(undefined)\n }\n\n await updateCondition({\n type: 'operator',\n andIndex,\n field: reducedField,\n operator: operator.value,\n orIndex,\n value: isValidValue ? value : undefined,\n })\n },\n [andIndex, reducedField, orIndex, updateCondition, value],\n )\n\n return (\n <div className={baseClass}>\n <div className={`${baseClass}__wrap`}>\n <div className={`${baseClass}__join`}>\n {isFirstCondition ? (\n <span className={`${baseClass}__join-label`}>{t('general:where')}</span>\n ) : (\n <ReactSelect\n classNames={{\n menu: () => 'condition__join-menu',\n }}\n isClearable={false}\n onChange={(option: Option<'and' \| 'or'>) =>\n updateJoin({ andIndex, join: option.value, orIndex })\n }\n options={[\n { label: t('general:and'), value: 'and' },\n { label: t('general:or'), value: 'or' },\n ]}\n value={{ label: join === 'and' ? t('general:and') : t('general:or'), value: join }}\n />\n )}\n </div>\n <div className={`${baseClass}__inputs`}>\n <div className={`${baseClass}__field`}>\n <ReactSelect\n disabled={disabled}\n filterOption={(option, inputValue) =>\n ((option?.data?.plainTextLabel as string) \|\| option.label)\n .toLowerCase()\n .includes(inputValue.toLowerCase())\n }\n isClearable={false}\n onChange={handleFieldChange}\n options={reducedFields\n .filter((field) => !isFieldDisabled(field.field, 'filter'))\n .map((f) => ({ ...f, value: f.fieldPath }))}\n value={reducedField ? { ...reducedField, value: reducedField.fieldPath } : undefined}\n />\n </div>\n <div className={`${baseClass}__operator`}>\n <ReactSelect\n disabled={disabled}\n isClearable={false}\n onChange={handleOperatorChange}\n options={reducedField?.operators}\n value={reducedField?.operators.find((o) => operator === o.value) \|\| null}\n />\n </div>\n <div className={`${baseClass}__value`}>\n {RenderedFilter \|\| (\n <DefaultFilter\n booleanSelect={booleanSelect}\n disabled={\n !operator \|\| !reducedField \|\| isFieldDisabled(reducedField?.field, 'filter')\n }\n filterOptions={filterOptions}\n internalField={reducedField}\n onChange={setInternalValue}\n operator={operator}\n options={valueOptions}\n value={internalValue ?? ''}\n />\n )}\n </div>\n </div>\n <div className={`${baseClass}__actions`}>\n <Button\n buttonStyle=\"ghost\"\n className={`${baseClass}__actions-remove`}\n disabled={disableRemoveButton}\n icon={<LineIcon size={24} />}\n onClick={() =>\n removeCondition({\n andIndex,\n orIndex,\n })\n }\n />\n </div>\n </div>\n </div>\n )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/WhereBuilder/index.d.ts CHANGED Viewed

@@ -3,9 +3,10 @@ import type { WhereBuilderProps } from './types.js';
 import './index.css';
 export { WhereBuilderProps };
 /**
- * The WhereBuilder component is used to render the filter controls for a collection's list view
- * or in a form (e.g. Query Presets). When `value` and `onChange` are provided, it is controlled
- * by the form; otherwise it uses list query state from {@link useListQuery}.
+ * Presentational filter builder. It renders the conditions described by `value` and
+ * reports edits through `onChange`. It is unaware of where its value is stored — the
+ * list view wires it to list query state via {@link ListWhereBuilder}, and the Query
+ * Presets drawer wires it to form state.
  */
 export declare const WhereBuilder: React.FC<WhereBuilderProps>;
 //# sourceMappingURL=index.d.ts.map

package/dist/elements/WhereBuilder/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/WhereBuilder/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAkB,MAAM,OAAO,CAAA;AAEtC,OAAO,KAAK,EAKV,iBAAiB,EAClB,MAAM,YAAY,CAAA;~~AAUnB~~,OAAO,aAAa,CAAA;AAKpB,OAAO,EAAE,iBAAiB,EAAE,CAAA;AAE5B~~;;;;GAIG~~;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,~~CAwRpD~~,CAAA"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/WhereBuilder/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAkB,MAAM,OAAO,CAAA;AAEtC,OAAO,KAAK,EAKV,iBAAiB,EAClB,MAAM,YAAY,CAAA;AAQnB,OAAO,aAAa,CAAA;AAKpB,OAAO,EAAE,iBAAiB,EAAE,CAAA;AAE5B;;;;;GAKG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAsRpD,CAAA"}

package/dist/elements/WhereBuilder/index.js CHANGED Viewed

@@ -6,8 +6,6 @@ import { isFieldDisabled, transformWhereQuery, validateWhereQuery } from 'payloa
 import React, { useMemo } from 'react';
 import { CirclePlusIcon } from '../../icons/CirclePlus/index.js';
 import { useAuth } from '../../providers/Auth/index.js';
-import { useConfig } from '../../providers/Config/index.js';
-import { useListQuery } from '../../providers/ListQuery/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
 import { reduceFieldsToOptions } from '../../utilities/reduceFieldsToOptions.js';
 import { Button } from '../Button/index.js';
@@ -16,19 +14,20 @@ import './index.css';
 import { fieldTypeConditions, getValidFieldOperators } from './field-types.js';
 const baseClass = 'where-builder';
 /**
- * The WhereBuilder component is used to render the filter controls for a collection's list view
- * or in a form (e.g. Query Presets). When `value` and `onChange` are provided, it is controlled
- * by the form; otherwise it uses list query state from {@link useListQuery}.
+ * Presentational filter builder. It renders the conditions described by `value` and
+ * reports edits through `onChange`. It is unaware of where its value is stored — the
+ * list view wires it to list query state via {@link ListWhereBuilder}, and the Query
+ * Presets drawer wires it to form state.
  */
 export const WhereBuilder = props => {
   const {
     collectionSlug,
-    fields: fieldsProp,
-    onChange,
-    onClose,
+    fields,
+    onChange: handleWhereChange,
+    onEmptyRemove,
     renderedFilters = undefined,
     resolvedFilterOptions = undefined,
-    value: valueProp
+    value
   } = props;
   const {
     i18n,
@@ -37,15 +36,6 @@ export const WhereBuilder = props => {
   const {
     permissions
   } = useAuth();
-  const {
-    getEntityConfig
-  } = useConfig();
-  const listQuery = useListQuery();
-  const isFormMode = typeof onChange === 'function';
-  const collectionConfig = useMemo(() => isFormMode ? getEntityConfig({
-    collectionSlug
-  }) : null, [isFormMode, collectionSlug, getEntityConfig]);
-  const fields = isFormMode ? collectionConfig?.fields : fieldsProp;
   const fieldPermissions = permissions?.collections?.[collectionSlug]?.fields;
   const reducedFields = useMemo(() => reduceFieldsToOptions({
     fieldPermissions,
@@ -54,31 +44,24 @@ export const WhereBuilder = props => {
   }), [fieldPermissions, fields, i18n]);
   const firstField = useMemo(() => reducedFields.find(f => !isFieldDisabled(f.field, 'filter')), [reducedFields]);
   const conditions = useMemo(() => {
-    const whereFromSearch = isFormMode ? valueProp : listQuery.query?.where;
-    if (whereFromSearch) {
-      if (validateWhereQuery(whereFromSearch)) {
-        return whereFromSearch.or ?? [];
+    if (value) {
+      if (validateWhereQuery(value)) {
+        return value.or ?? [];
       }
-      const transformedWhere = transformWhereQuery(whereFromSearch);
+      const transformedWhere = transformWhereQuery(value);
       if (validateWhereQuery(transformedWhere)) {
         return transformedWhere.or ?? [];
       }
-      if (!isFormMode) {
-        console.warn(`Invalid where query in URL: ${JSON.stringify(whereFromSearch)}`); // eslint-disable-line no-console
-      }
     }
     return [];
-  }, [isFormMode, valueProp, listQuery.query?.where]);
-  const handleWhereChange = useMemo(() => isFormMode ? where => {
-    onChange?.(where);
-  } : listQuery.handleWhereChange, [isFormMode, onChange, listQuery.handleWhereChange]);
-  const addCondition = React.useCallback(async ({
+  }, [value]);
+  const addCondition = React.useCallback(({
     andIndex,
     field,
     orIndex,
     relation
   }) => {
-    const newConditions = [...conditions];
+    const newConditions = structuredClone(conditions);
     const defaultOperator = fieldTypeConditions[field.field.type].operators[0].value;
     if (relation === 'and') {
       newConditions[orIndex].and.splice(andIndex, 0, {
@@ -95,30 +78,36 @@ export const WhereBuilder = props => {
         }]
       });
     }
-    await handleWhereChange({
+    void handleWhereChange({
       or: newConditions
     });
   }, [conditions, handleWhereChange]);
-  const updateCondition = React.useCallback(async ({
+  const updateCondition = React.useCallback(({
+    type,
     andIndex: andIndex_0,
     field: field_0,
     operator: incomingOperator,
     orIndex: orIndex_0,
-    value
+    value: value_0
   }) => {
     // Virtual first row: conditions not yet committed, build from scratch
     if (conditions.length === 0) {
+      // Ignore empty value edits so a cleared row doesn't re-commit itself. Field and
+      // operator picks carry empty values too, but must fall through to build the row.
+      if (type === 'value' && (value_0 === undefined || value_0 === null || value_0 === '')) {
+        return;
+      }
       const {
         validOperator
       } = getValidFieldOperators({
         field: field_0.field,
         operator: incomingOperator
       });
-      await handleWhereChange({
+      void handleWhereChange({
         or: [{
           and: [{
             [String(field_0.fieldPath)]: {
-              [validOperator]: value
+              [validOperator]: value_0
             }
           }]
         }]
@@ -135,47 +124,47 @@ export const WhereBuilder = props => {
       });
       // Skip if nothing changed
       const existingValue = existingCondition[String(field_0.fieldPath)]?.[validOperator_0];
-      if (typeof existingValue !== 'undefined' && existingValue === value) {
+      if (typeof existingValue !== 'undefined' && existingValue === value_0) {
         return;
       }
       const newRowCondition = {
         [String(field_0.fieldPath)]: {
-          [validOperator_0]: value
+          [validOperator_0]: value_0
         }
       };
       if (dequal(existingCondition, newRowCondition)) {
         return;
       }
-      const newConditions_0 = [...conditions];
+      const newConditions_0 = structuredClone(conditions);
       newConditions_0[orIndex_0].and[andIndex_0] = newRowCondition;
-      await handleWhereChange({
+      void handleWhereChange({
         or: newConditions_0
       });
     }
   }, [conditions, handleWhereChange]);
-  const removeCondition = React.useCallback(async ({
+  const removeCondition = React.useCallback(({
     andIndex: andIndex_1,
     orIndex: orIndex_1
   }) => {
     // Virtual first row: removing it just closes the panel
     if (conditions.length === 0) {
-      onClose?.();
+      onEmptyRemove?.();
       return;
     }
-    const newConditions_1 = [...conditions];
+    const newConditions_1 = structuredClone(conditions);
     newConditions_1[orIndex_1].and.splice(andIndex_1, 1);
     if (newConditions_1[orIndex_1].and.length === 0) {
       newConditions_1.splice(orIndex_1, 1);
     }
-    await handleWhereChange({
+    void handleWhereChange({
       or: newConditions_1
     });
     // Removing the last remaining condition closes the filters panel.
     if (newConditions_1.length === 0) {
-      onClose?.();
+      onEmptyRemove?.();
     }
-  }, [conditions, handleWhereChange, onClose]);
-  const updateJoin = React.useCallback(async ({
+  }, [conditions, handleWhereChange, onEmptyRemove]);
+  const updateJoin = React.useCallback(({
     andIndex: andIndex_2,
     join,
     orIndex: orIndex_2
@@ -207,29 +196,48 @@ export const WhereBuilder = props => {
         newConditions_2[newConditions_2.length - 1].and.push(cond_0);
       }
     });
-    await handleWhereChange({
+    void handleWhereChange({
       or: newConditions_2
     });
   }, [conditions, handleWhereChange]);
-  const addFirstFilter = React.useCallback(async () => {
-    if (firstField) {
-      await addCondition({
-        andIndex: 0,
-        field: firstField,
-        orIndex: conditions.length,
-        relation: 'or'
+  const addFirstFilter = React.useCallback(() => {
+    if (!firstField) {
+      return;
+    }
+    // With no committed conditions, only the virtual placeholder row is shown. Commit it
+    // and append a new row so a second row appears on the first click.
+    if (conditions.length === 0) {
+      const defaultOperator_0 = firstField.operators[0].value;
+      const makeRow = () => ({
+        and: [{
+          [String(firstField.fieldPath)]: {
+            [defaultOperator_0]: undefined
+          }
+        }]
       });
+      void handleWhereChange({
+        or: [makeRow(), makeRow()]
+      });
+      return;
     }
-  }, [addCondition, conditions.length, firstField]);
-  // When conditions is empty in list mode, show a virtual first row immediately
-  // (derived from the first available field) so the panel never opens blank.
-  const displayConditions = !isFormMode && conditions.length === 0 && firstField ? [{
+    void addCondition({
+      andIndex: 0,
+      field: firstField,
+      orIndex: conditions.length,
+      relation: 'or'
+    });
+  }, [addCondition, conditions.length, firstField, handleWhereChange]);
+  // When conditions is empty, show a virtual first row so the panel never opens blank.
+  const displayConditions = conditions.length === 0 && firstField ? [{
     and: [{
       [firstField.fieldPath]: {
         [firstField.operators[0].value]: undefined
       }
     }]
   }] : conditions;
+  // Disable the remove button only when there are no committed conditions and this host
+  // doesn't provide an empty-state removal handler.
+  const disableRemoveButton = conditions.length === 0 && !onEmptyRemove;
   return /*#__PURE__*/_jsx("div", {
     className: baseClass,
     children: /*#__PURE__*/_jsxs("div", {
@@ -242,12 +250,13 @@ export const WhereBuilder = props => {
             const condition = displayConditions[orIndex_3].and[andIndex_3];
             const fieldPath = Object.keys(condition)[0];
             const operator = Object.keys(condition?.[fieldPath] || {})?.[0] || undefined;
-            const value_0 = condition?.[fieldPath]?.[operator] || undefined;
+            const value_1 = condition?.[fieldPath]?.[operator] || undefined;
             const isFirstCondition = orIndex_3 === 0 && andIndex_3 === 0;
             const join_0 = andIndex_3 === 0 ? 'or' : 'and';
             return /*#__PURE__*/_jsx(Condition, {
               addCondition: addCondition,
               andIndex: andIndex_3,
+              disableRemoveButton: disableRemoveButton,
               fieldPath: fieldPath,
               filterOptions: resolvedFilterOptions?.get(fieldPath),
               isFirstCondition: isFirstCondition,
@@ -259,7 +268,7 @@ export const WhereBuilder = props => {
               RenderedFilter: renderedFilters?.get(fieldPath),
               updateCondition: updateCondition,
               updateJoin: updateJoin,
-              value: value_0
+              value: value_1
             }, andIndex_3);
           })
         }, compoundOrKey);