@contember/react-select 2.1.0-alpha.9 → 2.1.0-beta.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@contember/react-select",
   "license": "Apache-2.0",
-  "version": "2.1.0-alpha.9",
+  "version": "2.1.0-beta.1",
   "type": "module",
   "sideEffects": false,
   "main": "./dist/production/index.js",
@@ -30,23 +30,23 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/contember/interface.git",
+    "url": "git+https://github.com/contember/contember.git",
     "directory": "packages/react-select"
   },
   "dependencies": {
-    "@contember/react-binding": "2.1.0-alpha.9",
-    "@contember/react-dataview": "2.1.0-alpha.9",
-    "@contember/react-repeater": "2.1.0-alpha.9",
-    "@contember/react-utils": "2.1.0-alpha.9",
-    "@contember/utilities": "2.1.0-alpha.9",
-    "@radix-ui/react-slot": "^1.1.0"
+    "@contember/react-binding": "2.1.0-beta.1",
+    "@contember/react-dataview": "2.1.0-beta.1",
+    "@contember/react-repeater": "2.1.0-beta.1",
+    "@contember/react-utils": "2.1.0-beta.1",
+    "@contember/utilities": "2.1.0-beta.1",
+    "@radix-ui/react-slot": "^1.2.4"
   },
   "peerDependencies": {
-    "react": "^18 || ^19",
-    "react-dom": "^18 || ^19"
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4"
   },
   "devDependencies": {
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4"
   }
 }

package/src/components/MultiSelect.tsx

@@ -16,7 +16,7 @@ export const MultiSelect = Component(({ field, children, options, onSelect, onUn
 	const entities = useEntityList({ field })
 	options ??= entities.name
 	const entitiesArr = useMemo(() => Array.from(entities), [entities])
-	const selectedEntities = useMemo(() => Array.from(entities).map(it => it.id), [entities])
+	const selectedEntities = useMemo(() => Array.from(entities).map((it: EntityAccessor) => it.id), [entities])
 
 	const handler = useReferentiallyStableCallback<SelectHandler>((entity, action = 'toggle') => {
 		const isSelected = selectedEntities.includes(entity.id)
@@ -53,4 +53,3 @@ export const MultiSelect = Component(({ field, children, options, onSelect, onUn
 		</HasMany>
 	)
 })
-

package/src/components/Select.tsx

@@ -53,4 +53,3 @@ export const Select = Component(({ field, children, onUnselect, onSelect, option
 		</HasOne>
 	)
 })
-

package/src/components/SelectDataView.tsx

@@ -1,6 +1,6 @@
 import React, { ReactNode, useMemo } from 'react'
 import { useSelectHandleSelect, useSelectOptions } from '../contexts'
-import { DataViewProps, DataView, DataViewFilterHandlerRegistry } from '@contember/react-dataview'
+import { DataView, DataViewFilterHandlerRegistry, DataViewProps } from '@contember/react-dataview'
 
 export type SelectDataViewProps =
 	& Omit<DataViewProps, 'entities'>

package/src/components/SelectEachItem.tsx

@@ -2,7 +2,6 @@ import React, { ReactNode } from 'react'
 import { useSelectCurrentEntities } from '../contexts'
 import { Entity } from '@contember/react-binding'
 
-
 export const SelectEachValue = ({ children }: { children: ReactNode }) => {
 	const entities = useSelectCurrentEntities()
 	return entities.map(entity => (

package/src/components/SelectItemTrigger.tsx

@@ -17,5 +17,5 @@ export const SelectItemTrigger = forwardRef<HTMLElement, SelectItemTriggerProps>
 		handleSelect?.(entity, action)
 		onClickProp?.(e)
 	}, [action, entity, handleSelect, onClickProp])
-	return <Slot {...props} onClick={onClick}  ref={ref} />
+	return <Slot {...props} onClick={onClick} ref={ref} />
 })

package/src/components/SelectNewItem.tsx

@@ -1,4 +1,14 @@
-import { Entity, EntityAccessor, EntitySubTree, QueryLanguage, TreeRootId, TreeRootIdProvider, useEnvironment, useExtendTree, useGetEntitySubTree } from '@contember/react-binding'
+import {
+	Entity,
+	EntityAccessor,
+	EntitySubTree,
+	QueryLanguage,
+	TreeRootId,
+	TreeRootIdProvider,
+	useEnvironment,
+	useExtendTree,
+	useGetEntitySubTree,
+} from '@contember/react-binding'
 import * as React from 'react'
 import { ReactNode, useEffect, useMemo, useState } from 'react'
 import { useSelectOptions } from '../contexts'
@@ -6,21 +16,28 @@ import { useSelectOptions } from '../contexts'
 export const SelectNewItem = ({ children }: { children: ReactNode }) => {
 	const options = useSelectOptions()
 	const env = useEnvironment()
-	const { entityName } = useMemo((() => QueryLanguage.desugarQualifiedEntityList({ entities: options }, env)), [env, options])
+	const { entityName } = useMemo(() => QueryLanguage.desugarQualifiedEntityList({ entities: options }, env), [env, options])
 
 	const [state, setState] = useState<{ entity: EntityAccessor; treeRootId: TreeRootId } | null>(null)
 	const extendTree = useExtendTree()
 	const getSubTree = useGetEntitySubTree()
 
 	useEffect(() => {
-		(async () => {
-			const treeRootId = await extendTree(<>
-				<EntitySubTree entity={{
-					entityName,
-				}} expectedMutation={'none'} isUnpersisted isCreating>
-					{children}
-				</EntitySubTree>
-			</>)
+		;(async () => {
+			const treeRootId = await extendTree(
+				<>
+					<EntitySubTree
+						entity={{
+							entityName,
+						}}
+						expectedMutation={'none'}
+						isUnpersisted
+						isCreating
+					>
+						{children}
+					</EntitySubTree>
+				</>,
+			)
 			if (!treeRootId) {
 				return
 			}

package/src/components/SortableMultiSelect.tsx

@@ -3,9 +3,12 @@ import { SelectCurrentEntitiesContext, SelectHandler, SelectHandleSelectContext,
 import {
 	Component,
 	EntityAccessor,
+	EntityListSubTreeMarker,
+	EntitySubTreeMarker,
 	FieldMarker,
+	HasManyRelationMarker,
 	HasOne,
-	MeaningfulMarker,
+	HasOneRelationMarker,
 	PlaceholderGenerator,
 	QueryLanguage,
 	SugaredQualifiedEntityList,
@@ -28,68 +31,69 @@ export type SortableMultiSelectProps =
 	}
 	& SelectEvents
 
-export const SortableMultiSelect = Component(({ field, children, sortableBy, connectAt, options, onSelect, onUnselect }: SortableMultiSelectProps) => {
-	const list = useEntityList({ field })
-	const entitiesArr = useMemo(() => Array.from(list), [list])
+export const SortableMultiSelect = Component(
+	({ field, children, sortableBy, connectAt, options, onSelect, onUnselect }: SortableMultiSelectProps) => {
+		const list = useEntityList({ field })
+		const entitiesArr = useMemo(() => Array.from(list), [list])
 
-	const optionsMarker = useMemo(() => {
-		const desugared = QueryLanguage.desugarRelativeSingleEntity({ field: connectAt }, list.environment)
-		let marker: Exclude<MeaningfulMarker, FieldMarker> = list.getMarker()
-		for (let relation of desugared.hasOneRelationPath) {
-			const placeholder = PlaceholderGenerator.getHasOneRelationPlaceholder(relation)
-			const relationMarker = marker.fields.markers.get(placeholder)
-			if (!relationMarker || relationMarker instanceof FieldMarker) {
-				throw new Error('Invalid marker')
+		const optionsMarker = useMemo(() => {
+			const desugared = QueryLanguage.desugarRelativeSingleEntity({ field: connectAt }, list.environment)
+			let marker: HasOneRelationMarker | HasManyRelationMarker | EntitySubTreeMarker | EntityListSubTreeMarker = list.getMarker()
+			for (let relation of desugared.hasOneRelationPath) {
+				const placeholder = PlaceholderGenerator.getHasOneRelationPlaceholder(relation)
+				const relationMarker = marker.fields.markers.get(placeholder)
+				if (!relationMarker || relationMarker instanceof FieldMarker) {
+					throw new Error('Invalid marker')
+				}
+				marker = relationMarker
 			}
-			marker = relationMarker
-		}
-		return marker
-	}, [connectAt, list])
+			return marker
+		}, [connectAt, list])
 
-	options ??= optionsMarker.environment.getSubTreeNode().entity.name
+		options ??= optionsMarker.environment.getSubTreeNode().entity.name
 
+		const selectedEntities = useMemo(() => Array.from(list).map((it: EntityAccessor) => it.getEntity({ field: connectAt }).id), [connectAt, list])
 
-	const selectedEntities = useMemo(() => Array.from(list).map(it => it.getEntity({ field: connectAt }).id), [connectAt, list])
-
-	const handler = useReferentiallyStableCallback<SelectHandler>((entity, action = 'toggle') => {
-		const isSelected = selectedEntities.includes(entity.id)
-		if (action === 'toggle') {
-			action = isSelected ? 'unselect' : 'select'
-		}
-		if (action === 'unselect' && isSelected) {
-			Array.from(list).find(it => it.getEntity({ field: connectAt }).id === entity.id)?.deleteEntity()
-			onUnselect?.(entity)
-		} else if (action === 'select' && !isSelected) {
-			list.createNewEntity(getEntity => {
-				getEntity().connectEntityAtField({ field: connectAt }, entity)
-				onSelect?.(entity)
-			})
-		}
-	})
-	const isSelected = useCallback((entity: EntityAccessor) => {
-		return selectedEntities.includes(entity.id)
-	}, [selectedEntities])
-
-	return (
-		<Repeater field={field} sortableBy={sortableBy} initialEntityCount={0} orderBy={false}>
-			<SelectCurrentEntitiesContext.Provider value={entitiesArr}>
-				<SelectIsSelectedContext.Provider value={isSelected}>
-					<SelectHandleSelectContext.Provider value={handler}>
-						<SelectOptionsContext.Provider value={options}>
-							{children}
-						</SelectOptionsContext.Provider>
-					</SelectHandleSelectContext.Provider>
-				</SelectIsSelectedContext.Provider>
-			</SelectCurrentEntitiesContext.Provider>
-		</Repeater>
-	)
-}, ({ children, field, sortableBy, connectAt }) => {
-	return (
-		<Repeater field={field} sortableBy={sortableBy} initialEntityCount={0} orderBy={false}>
-			<HasOne field={connectAt} expectedMutation="connectOrDisconnect">
-				{children}
-			</HasOne>
-		</Repeater>
-	)
-})
+		const handler = useReferentiallyStableCallback<SelectHandler>((entity, action = 'toggle') => {
+			const isSelected = selectedEntities.includes(entity.id)
+			if (action === 'toggle') {
+				action = isSelected ? 'unselect' : 'select'
+			}
+			if (action === 'unselect' && isSelected) {
+				Array.from(list).find((it: EntityAccessor) => it.getEntity({ field: connectAt }).id === entity.id)?.deleteEntity()
+				onUnselect?.(entity)
+			} else if (action === 'select' && !isSelected) {
+				list.createNewEntity(getEntity => {
+					getEntity().connectEntityAtField({ field: connectAt }, entity)
+					onSelect?.(entity)
+				})
+			}
+		})
+		const isSelected = useCallback((entity: EntityAccessor) => {
+			return selectedEntities.includes(entity.id)
+		}, [selectedEntities])
 
+		return (
+			<Repeater field={field} sortableBy={sortableBy} initialEntityCount={0}>
+				<SelectCurrentEntitiesContext.Provider value={entitiesArr}>
+					<SelectIsSelectedContext.Provider value={isSelected}>
+						<SelectHandleSelectContext.Provider value={handler}>
+							<SelectOptionsContext.Provider value={options}>
+								{children}
+							</SelectOptionsContext.Provider>
+						</SelectHandleSelectContext.Provider>
+					</SelectIsSelectedContext.Provider>
+				</SelectCurrentEntitiesContext.Provider>
+			</Repeater>
+		)
+	},
+	({ children, field, sortableBy, connectAt }) => {
+		return (
+			<Repeater field={field} sortableBy={sortableBy} initialEntityCount={0}>
+				<HasOne field={connectAt} expectedMutation="connectOrDisconnect">
+					{children}
+				</HasOne>
+			</Repeater>
+		)
+	},
+)

package/src/contexts.ts

@@ -7,8 +7,6 @@ const _SelectCurrentEntitiesContext = createRequiredContext<EntityAccessor[]>('S
 export const SelectCurrentEntitiesContext = _SelectCurrentEntitiesContext[0]
 export const useSelectCurrentEntities = _SelectCurrentEntitiesContext[1]
 
-
-
 const _SelectIsSelectedContext = createRequiredContext<(entity: EntityAccessor) => boolean>('SelectIsSelectedContext')
 /** @internal */
 export const SelectIsSelectedContext = _SelectIsSelectedContext[0]