@contember/react-select 1.3.0-alpha.20 → 1.3.0-alpha.21

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@contember/react-select",
   "license": "Apache-2.0",
-  "version": "1.3.0-alpha.20",
+  "version": "1.3.0-alpha.21",
   "type": "module",
   "sideEffects": false,
   "main": "./dist/production/index.js",
@@ -40,11 +40,11 @@
     "directory": "packages/react-select"
   },
   "dependencies": {
-    "@contember/react-binding": "1.3.0-alpha.20",
-    "@contember/react-dataview": "1.3.0-alpha.20",
-    "@contember/react-repeater": "1.3.0-alpha.20",
-    "@contember/react-utils": "1.3.0-alpha.20",
-    "@contember/utilities": "1.3.0-alpha.20",
+    "@contember/react-binding": "1.3.0-alpha.21",
+    "@contember/react-dataview": "1.3.0-alpha.21",
+    "@contember/react-repeater": "1.3.0-alpha.21",
+    "@contember/react-utils": "1.3.0-alpha.21",
+    "@contember/utilities": "1.3.0-alpha.21",
     "@radix-ui/react-slot": "^1.0.2"
   },
   "peerDependencies": {

package/src/components/MultiSelect.tsx

@@ -1,19 +1,23 @@
 import React, { ReactNode, useCallback, useMemo } from 'react'
-import { SelectCurrentEntitiesContext, SelectHandler, SelectHandleSelectContext, SelectIsSelectedContext, SelectOptionsContext } from '../contexts'
+import { SelectCurrentEntitiesContext, SelectHandler, SelectHandleSelectContext, SelectIsSelectedContext, SelectOptionsContext, SelectOptionsFilterContext } from '../contexts'
 import { Component, EntityAccessor, HasMany, SugaredQualifiedEntityList, SugaredRelativeEntityList, useEntityList } from '@contember/react-binding'
 import { useReferentiallyStableCallback } from '@contember/react-utils'
 import { SelectEvents } from '../types'
+import { SelectFilterFieldProps, useSelectFilter } from '../hooks'
 
 export type MultiSelectProps =
 	& {
 		children: ReactNode
 		field: SugaredRelativeEntityList['field']
-		options: SugaredQualifiedEntityList['entities']
+		options?: SugaredQualifiedEntityList['entities']
 	}
+	& SelectFilterFieldProps
 	& SelectEvents
 
-export const MultiSelect = Component(({ field, children, options, onSelect, onUnselect }: MultiSelectProps) => {
+export const MultiSelect = Component(({ field, children, options, onSelect, onUnselect, filterField }: MultiSelectProps) => {
 	const entities = useEntityList({ field })
+	options ??= entities.name
+	const filter = useSelectFilter({ filterField, marker: entities.getMarker() })
 	const entitiesArr = useMemo(() => Array.from(entities), [entities])
 	const selectedEntities = useMemo(() => Array.from(entities).map(it => it.id), [entities])
 
@@ -39,7 +43,9 @@ export const MultiSelect = Component(({ field, children, options, onSelect, onUn
 			<SelectIsSelectedContext.Provider value={isSelected}>
 				<SelectHandleSelectContext.Provider value={handler}>
 					<SelectOptionsContext.Provider value={options}>
-						{children}
+						<SelectOptionsFilterContext.Provider value={filter}>
+							{children}
+						</SelectOptionsFilterContext.Provider>
 					</SelectOptionsContext.Provider>
 				</SelectHandleSelectContext.Provider>
 			</SelectIsSelectedContext.Provider>
@@ -47,7 +53,7 @@ export const MultiSelect = Component(({ field, children, options, onSelect, onUn
 	)
 }, ({ field, children }) => {
 	return (
-		<HasMany field={field}>
+		<HasMany field={field} expectedMutation="connectOrDisconnect">
 			{children}
 		</HasMany>
 	)

package/src/components/Select.tsx

@@ -1,20 +1,25 @@
 import React, { ReactNode, useCallback, useMemo } from 'react'
-import { SelectCurrentEntitiesContext, SelectHandler, SelectHandleSelectContext, SelectIsSelectedContext, SelectOptionsContext } from '../contexts'
+import { SelectCurrentEntitiesContext, SelectHandler, SelectHandleSelectContext, SelectIsSelectedContext, SelectOptionsContext, SelectOptionsFilterContext } from '../contexts'
 import { Component, EntityAccessor, HasOne, SugaredQualifiedEntityList, SugaredRelativeSingleEntity, useEntity } from '@contember/react-binding'
 import { useReferentiallyStableCallback } from '@contember/react-utils'
 import { SelectEvents } from '../types'
+import { SelectFilterFieldProps, useSelectFilter } from '../hooks'
 
 export type SelectProps =
 	& {
 		children: ReactNode
 		field: SugaredRelativeSingleEntity['field']
-		options: SugaredQualifiedEntityList['entities']
+		options?: SugaredQualifiedEntityList['entities']
 	}
+	& SelectFilterFieldProps
 	& SelectEvents
 
-export const Select = Component(({ field, children, onUnselect, onSelect, options }: SelectProps) => {
+export const Select = Component(({ field, children, onUnselect, onSelect, options, filterField }: SelectProps) => {
 	const entity = useEntity()
 	const selectedEntity = entity.getEntity({ field })
+	options ??= selectedEntity.name
+	const filter = useSelectFilter({ filterField, marker: selectedEntity.getMarker() })
+
 	const entityExists = selectedEntity.existsOnServer || selectedEntity.hasUnpersistedChanges
 	const entitiesArr = useMemo(() => entityExists ? [selectedEntity] : [], [entityExists, selectedEntity])
 
@@ -37,7 +42,9 @@ export const Select = Component(({ field, children, onUnselect, onSelect, option
 			<SelectIsSelectedContext.Provider value={isSelected}>
 				<SelectHandleSelectContext.Provider value={handleSelect}>
 					<SelectOptionsContext.Provider value={options}>
-						{children}
+						<SelectOptionsFilterContext.Provider value={filter}>
+							{children}
+						</SelectOptionsFilterContext.Provider>
 					</SelectOptionsContext.Provider>
 				</SelectHandleSelectContext.Provider>
 			</SelectIsSelectedContext.Provider>
@@ -45,7 +52,7 @@ export const Select = Component(({ field, children, onUnselect, onSelect, option
 	)
 }, ({ field, children }) => {
 	return (
-		<HasOne field={field}>
+		<HasOne field={field} expectedMutation="connectOrDisconnect">
 			{children}
 		</HasOne>
 	)

package/src/components/SelectDataView.tsx

@@ -1,6 +1,6 @@
-import React, { ReactNode } from 'react'
-import { useSelectHandleSelect, useSelectOptions } from '../contexts'
-import { DataViewProps, DataView } from '@contember/react-dataview'
+import React, { ReactNode, useMemo } from 'react'
+import { useSelectHandleSelect, useSelectOptions, useSelectOptionsFilter } from '../contexts'
+import { DataViewProps, DataView, DataViewFilterHandlerRegistry } from '@contember/react-dataview'
 
 export type SelectDataViewProps =
 	& Omit<DataViewProps, 'entities'>
@@ -11,7 +11,18 @@ export type SelectDataViewProps =
 export const SelectDataView = (props: SelectDataViewProps) => {
 	const handleSelect = useSelectHandleSelect()
 	const entities = useSelectOptions()
+	const filter = useSelectOptionsFilter()
+	const defaultFilterTypes = useMemo((): DataViewFilterHandlerRegistry => filter ? { query: filter } : {}, [filter])
+
 	return (
-		<DataView {...props} onSelectHighlighted={handleSelect} entities={entities} />
+		<DataView
+			filterTypes={defaultFilterTypes}
+			{...props}
+			onSelectHighlighted={handleSelect}
+			entities={entities}
+			filteringStateStorage="null"
+			sortingStateStorage="null"
+			currentPageStateStorage="null"
+		/>
 	)
 }

package/src/components/SortableMultiSelect.tsx

@@ -1,24 +1,57 @@
 import React, { ReactNode, useCallback, useMemo } from 'react'
-import { SelectCurrentEntitiesContext, SelectHandler, SelectHandleSelectContext, SelectIsSelectedContext, SelectOptionsContext } from '../contexts'
-import { Component, EntityAccessor, HasOne, SugaredQualifiedEntityList, SugaredRelativeEntityList, SugaredRelativeSingleEntity, SugaredRelativeSingleField, useEntityList } from '@contember/react-binding'
+import { SelectCurrentEntitiesContext, SelectHandler, SelectHandleSelectContext, SelectIsSelectedContext, SelectOptionsContext, SelectOptionsFilterContext } from '../contexts'
+import {
+	Component,
+	EntityAccessor,
+	FieldMarker,
+	HasOne,
+	MeaningfulMarker,
+	PlaceholderGenerator,
+	QueryLanguage,
+	SugaredQualifiedEntityList,
+	SugaredRelativeEntityList,
+	SugaredRelativeSingleEntity,
+	SugaredRelativeSingleField,
+	useEntityList,
+} from '@contember/react-binding'
 import { useReferentiallyStableCallback } from '@contember/react-utils'
 import { Repeater } from '@contember/react-repeater'
 import { SelectEvents } from '../types'
+import { SelectFilterFieldProps, useSelectFilter } from '../hooks'
 
 export type SortableMultiSelectProps =
 	& {
 		children: ReactNode
 		field: SugaredRelativeEntityList['field']
-		options: SugaredQualifiedEntityList['entities']
+		options?: SugaredQualifiedEntityList['entities']
 		sortableBy: SugaredRelativeSingleField['field']
 		connectAt: SugaredRelativeSingleEntity['field']
 	}
+	& SelectFilterFieldProps
 	& SelectEvents
 
-export const SortableMultiSelect = Component(({ field, children, sortableBy, connectAt, options, onSelect, onUnselect }: SortableMultiSelectProps) => {
+export const SortableMultiSelect = Component(({ field, children, sortableBy, connectAt, options, onSelect, onUnselect, filterField }: 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')
+			}
+			marker = relationMarker
+		}
+		return marker
+	}, [connectAt, list])
+
+	options ??= optionsMarker.environment.getSubTreeNode().entity.name
+
+	const filter = useSelectFilter({ filterField, marker: optionsMarker })
+
 	const selectedEntities = useMemo(() => Array.from(list).map(it => it.getEntity({ field: connectAt }).id), [connectAt, list])
 
 	const handler = useReferentiallyStableCallback<SelectHandler>((entity, action = 'toggle') => {
@@ -46,7 +79,9 @@ export const SortableMultiSelect = Component(({ field, children, sortableBy, con
 				<SelectIsSelectedContext.Provider value={isSelected}>
 					<SelectHandleSelectContext.Provider value={handler}>
 						<SelectOptionsContext.Provider value={options}>
-							{children}
+							<SelectOptionsFilterContext.Provider value={filter}>
+								{children}
+							</SelectOptionsFilterContext.Provider>
 						</SelectOptionsContext.Provider>
 					</SelectHandleSelectContext.Provider>
 				</SelectIsSelectedContext.Provider>
@@ -56,7 +91,7 @@ export const SortableMultiSelect = Component(({ field, children, sortableBy, con
 }, ({ children, field, sortableBy, connectAt }) => {
 	return (
 		<Repeater field={field} sortableBy={sortableBy} initialEntityCount={0}>
-			<HasOne field={connectAt}>
+			<HasOne field={connectAt} expectedMutation="connectOrDisconnect">
 				{children}
 			</HasOne>
 		</Repeater>

package/src/contexts.ts

@@ -1,5 +1,6 @@
 import { createRequiredContext } from '@contember/react-utils'
 import { EntityAccessor, SugaredQualifiedEntityList } from '@contember/react-binding'
+import { DataViewFilterHandler, TextFilterArtifacts } from '@contember/react-dataview'
 
 const _SelectCurrentEntitiesContext = createRequiredContext<EntityAccessor[]>('SelectCurrentEntitiesContext')
 /** @internal */
@@ -23,3 +24,8 @@ const _SelectOptionsContext = createRequiredContext<SugaredQualifiedEntityList['
 /** @internal */
 export const SelectOptionsContext = _SelectOptionsContext[0]
 export const useSelectOptions = _SelectOptionsContext[1]
+
+const _SelectOptionsFilterContext = createRequiredContext<DataViewFilterHandler<TextFilterArtifacts> | undefined>('SelectOptionsFilterContext')
+/** @internal */
+export const SelectOptionsFilterContext = _SelectOptionsFilterContext[0]
+export const useSelectOptionsFilter = _SelectOptionsFilterContext[1]

package/src/hooks/index.ts

@@ -0,0 +1 @@
+export * from './useSelectFilter'

package/src/hooks/useSelectFilter.ts

@@ -0,0 +1,35 @@
+import { FieldMarker, HasOneRelationMarker, MeaningfulMarker, SugaredRelativeSingleField } from '@contember/react-binding'
+import { createUnionTextFilter } from '@contember/react-dataview'
+import { useMemo } from 'react'
+
+export type SelectFilterFieldProps = {
+	filterField?: SugaredRelativeSingleField['field'] | SugaredRelativeSingleField['field'][]
+}
+
+export const useSelectFilter = ({ filterField, marker }: SelectFilterFieldProps & {
+	marker: Exclude<MeaningfulMarker, FieldMarker>
+}) => {
+	return useMemo(() => {
+		const filter = filterField ?? extractStringFields(marker)
+		if (!filter || (Array.isArray(filter) && filter.length === 0)) {
+			return undefined
+		}
+		return createUnionTextFilter(Array.isArray(filter) ? filter : [filter])
+	}, [filterField, marker])
+}
+
+const extractStringFields = (marker: Exclude<MeaningfulMarker, FieldMarker>): string[] => {
+	const node = marker.environment.getSubTreeNode()
+	const textFields = []
+	for (const field of marker.fields.markers.values()) {
+		if (field instanceof FieldMarker) {
+			const columnInfo = node.entity.fields.get(field.fieldName)
+			if (columnInfo?.type === 'String') {
+				textFields.push(field.fieldName)
+			}
+		} else if (field instanceof HasOneRelationMarker) {
+			textFields.push(...extractStringFields(field).map(it => `${field.parameters.field}.${it}`))
+		}
+	}
+	return textFields
+}

package/src/index.ts

@@ -1,3 +1,4 @@
 export * from './components'
 export * from './contexts'
+export * from './hooks'
 export * from './types'