@contember/react-board 1.3.0-alpha.9 → 2.0.0-alpha.2

package/dist/types/{BoardBindingProps.d.ts → types/BoardMethods.d.ts}

@@ -1,28 +1,12 @@
-import { EntityAccessor } from '@contember/react-binding';
-import { ReactNode } from 'react';
-export type BoardItem = {
-    id: string | number;
-    index: number;
-    value: EntityAccessor;
-};
-export type BoardStaticColumnValue = {
-    value: string;
-    label?: ReactNode;
-};
-export type BoardColumnValue = BoardStaticColumnValue | EntityAccessor;
-export type BoardColumn<ColumnValue extends BoardColumnValue = BoardColumnValue> = {
-    id: string | number;
-    index: number;
-    value: ColumnValue | null;
-    items: BoardItem[];
-};
+import { EntityAccessor } from '@contember/binding';
+import { BoardColumnValue } from './BoardColumnNode';
 export type BoardAddColumnMethod = (index: number | undefined, preprocess?: EntityAccessor.BatchUpdatesHandler) => void;
 export type BoardMoveColumnMethod = (entity: EntityAccessor, index: number) => void;
 export type BoardRemoveColumnMethod = (entity: EntityAccessor) => void;
 export type BoardMoveItemMethod<ColumnValue extends BoardColumnValue> = (entity: EntityAccessor, column: ColumnValue | null, index: number) => void;
 export type BoardAddItemMethod<ColumnValue extends BoardColumnValue> = (column: ColumnValue | null, index: number | undefined, preprocess?: EntityAccessor.BatchUpdatesHandler) => void;
 export type BoardRemoveItemMethod = (entity: EntityAccessor) => void;
-export type BoardMethods<ColumnValue extends BoardColumnValue> = {
+export type BoardMethods<ColumnValue extends BoardColumnValue = BoardColumnValue> = {
     moveColumn?: BoardMoveColumnMethod;
     addColumn?: BoardAddColumnMethod;
     removeColumn?: BoardRemoveColumnMethod;
@@ -30,7 +14,4 @@ export type BoardMethods<ColumnValue extends BoardColumnValue> = {
     addItem?: BoardAddItemMethod<ColumnValue>;
     removeItem?: BoardRemoveItemMethod;
 };
-export type BoardBindingProps<ColumnValue extends BoardColumnValue> = {
-    columns: BoardColumn<ColumnValue>[];
-} & BoardMethods<ColumnValue>;
-//# sourceMappingURL=BoardBindingProps.d.ts.map
+//# sourceMappingURL=BoardMethods.d.ts.map

package/dist/types/types/BoardMethods.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BoardMethods.d.ts","sourceRoot":"","sources":["../../../src/types/BoardMethods.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAA;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAA;AAEpD,MAAM,MAAM,oBAAoB,GAAG,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAAE,UAAU,CAAC,EAAE,cAAc,CAAC,mBAAmB,KAAK,IAAI,CAAC;AACxH,MAAM,MAAM,qBAAqB,GAAG,CAAC,MAAM,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;AACpF,MAAM,MAAM,uBAAuB,GAAG,CAAC,MAAM,EAAE,cAAc,KAAK,IAAI,CAAC;AACvE,MAAM,MAAM,mBAAmB,CAAC,WAAW,SAAS,gBAAgB,IAAI,CAAC,MAAM,EAAE,cAAc,EAAE,MAAM,EAAE,WAAW,GAAG,IAAI,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;AACpJ,MAAM,MAAM,kBAAkB,CAAC,WAAW,SAAS,gBAAgB,IAAI,CAAC,MAAM,EAAE,WAAW,GAAG,IAAI,EAAE,KAAK,EAAE,MAAM,GAAG,SAAS,EAAE,UAAU,CAAC,EAAE,cAAc,CAAC,mBAAmB,KAAK,IAAI,CAAC;AACxL,MAAM,MAAM,qBAAqB,GAAG,CAAC,MAAM,EAAE,cAAc,KAAK,IAAI,CAAC;AAErE,MAAM,MAAM,YAAY,CAAC,WAAW,SAAS,gBAAgB,GAAG,gBAAgB,IAAI;IACnF,UAAU,CAAC,EAAE,qBAAqB,CAAA;IAClC,SAAS,CAAC,EAAE,oBAAoB,CAAA;IAChC,YAAY,CAAC,EAAE,uBAAuB,CAAA;IAEtC,QAAQ,CAAC,EAAE,mBAAmB,CAAC,WAAW,CAAC,CAAA;IAC3C,OAAO,CAAC,EAAE,kBAAkB,CAAC,WAAW,CAAC,CAAA;IACzC,UAAU,CAAC,EAAE,qBAAqB,CAAA;CAClC,CAAA"}

package/dist/types/types/index.d.ts

@@ -0,0 +1,4 @@
+export * from './BoardMethods';
+export * from './BoardColumnNode';
+export * from './BoardItemNode';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/types/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAA;AAC9B,cAAc,mBAAmB,CAAA;AACjC,cAAc,iBAAiB,CAAA"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@contember/react-board",
   "license": "Apache-2.0",
-  "version": "1.3.0-alpha.9",
+  "version": "2.0.0-alpha.2",
   "type": "module",
   "sideEffects": false,
   "main": "./dist/production/index.js",
@@ -22,7 +22,7 @@
   "typings": "./dist/types/index.d.ts",
   "scripts": {
     "build": "yarn build:js:dev && yarn build:js:prod",
-    "build:js:dev": "vite build --mode development",
+    "build:js:dev": "NODE_ENV=development vite build --mode development",
     "build:js:prod": "vite build --mode production",
     "ae:build": "api-extractor run --local",
     "ae:test": "api-extractor run",
@@ -34,15 +34,18 @@
     "directory": "packages/react-board"
   },
   "dependencies": {
-    "@contember/react-binding": "1.3.0-alpha.9"
+    "@contember/binding": "2.0.0-alpha.2",
+    "@contember/react-binding": "2.0.0-alpha.2",
+    "@contember/react-multipass-rendering": "2.0.0-alpha.2",
+    "@contember/react-utils": "2.0.0-alpha.2"
   },
   "peerDependencies": {
-    "react": "^17 || ^18",
-    "react-dom": "^17 || ^18"
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19"
   },
   "devDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   },
   "stableVersion": "0.0.0"
 }

package/src/components/Board.tsx

@@ -0,0 +1,219 @@
+import {
+	Component,
+	EntityListSubTree,
+	Field,
+	HasMany,
+	HasOne,
+	SugaredQualifiedEntityList,
+	SugaredRelativeEntityList,
+	SugaredRelativeSingleEntity,
+	SugaredRelativeSingleField,
+	useEntityList,
+	useEntityListSubTree,
+} from '@contember/react-binding'
+import { boardColumnsAnalyzer, boardItemsAnalyzer } from '../internal/boardAnalyzer'
+import { Fragment, ReactNode } from 'react'
+import { useDynamicBoard } from '../internal/useDynamicBoard'
+import { useStaticBoard } from '../internal/useStaticBoard'
+import { BoardColumnsContext, BoardMethodsContext } from '../contexts'
+
+export type BoardProps =
+	| BoardQualifiedDynamicProps
+	| BoardRelativeDynamicProps
+	| BoardQualifiedStaticProps
+	| BoardRelativeStaticProps
+
+
+export const Board = Component<BoardProps>(props => {
+	if ('entities' in props) {
+		if (Array.isArray(props.columns)) {
+			return <BoardQualifiedStatic {...(props as BoardQualifiedStaticProps)} />
+		} else {
+			return <BoardQualifiedDynamic {...(props as BoardQualifiedDynamicProps)} />
+		}
+	} else {
+		if (Array.isArray(props.columns)) {
+			return <RelativeStaticBoard {...(props as BoardRelativeStaticProps)} />
+		} else {
+			return <RelativeDynamicBoard {...(props as BoardRelativeDynamicProps)} />
+		}
+	}
+})
+
+export type BoardDynamicColumnsBindingProps = {
+	columns: SugaredQualifiedEntityList['entities']
+	columnsSortableBy?: string | SugaredRelativeSingleField
+	discriminationField: string | SugaredRelativeSingleEntity
+}
+
+export type BoardStaticColumnsBindingProps = {
+	columns: {
+		value: string,
+		label: ReactNode
+	}[]
+	discriminationField: string | SugaredRelativeSingleField
+}
+
+export type BoardCommonProps =
+	& {
+	children: ReactNode
+	sortableBy?: string | SugaredRelativeSingleField
+	sortScope?: 'column' | 'board'
+}
+
+export type BoardQualifiedItemsProps =
+	& Pick<SugaredQualifiedEntityList, 'entities' | 'orderBy' | 'limit' | 'offset'>
+
+
+export type BoardRelativeItemsProps =
+	& Pick<SugaredRelativeEntityList, 'field' | 'orderBy' | 'limit' | 'offset'>
+
+
+export type BoardQualifiedDynamicProps =
+	& BoardCommonProps
+	& BoardDynamicColumnsBindingProps
+	& BoardQualifiedItemsProps
+
+const BoardQualifiedDynamic = Component<BoardQualifiedDynamicProps>(({ entities, orderBy, limit, offset, columns, columnsSortableBy, discriminationField, sortableBy, sortScope, children }) => {
+	const itemsAccessor = useEntityListSubTree({ entities, orderBy, limit, offset })
+	const columnsAccessor = useEntityListSubTree({ entities: columns })
+	const [data, methods] = useDynamicBoard({
+		columnEntities: columnsAccessor,
+		itemEntities: itemsAccessor,
+		columns,
+		sortableBy,
+		sortScope,
+		columnsSortableBy,
+		discriminationField,
+	})
+	return (
+		<BoardMethodsContext.Provider value={methods}>
+			<BoardColumnsContext.Provider value={data.columns}>
+				{children}
+			</BoardColumnsContext.Provider>
+		</BoardMethodsContext.Provider>
+	)
+}, ({ entities, orderBy, limit, offset, columns, discriminationField, sortableBy, columnsSortableBy, children }, env) => {
+
+	const columnChildren = boardColumnsAnalyzer.processChildren(children, env)
+	const itemChildren = boardItemsAnalyzer.processChildren(children, env)
+
+	return (<>
+		<EntityListSubTree entities={entities} orderBy={orderBy} limit={limit} offset={offset}>
+			<HasOne {...typeof discriminationField === 'string' ? { field: discriminationField } : discriminationField} />
+			{sortableBy && <Field {...typeof sortableBy === 'string' ? { field: sortableBy } : sortableBy} />}
+			{itemChildren.map((it, index) => <Fragment key={index}>{it}</Fragment>)}
+		</EntityListSubTree>
+		<EntityListSubTree entities={columns}>
+			{columnsSortableBy && <Field {...typeof columnsSortableBy === 'string' ? { field: columnsSortableBy } : columnsSortableBy} />}
+			{columnChildren.map((it, index) => <Fragment key={index}>{it}</Fragment>)}
+		</EntityListSubTree>
+	</>)
+})
+
+
+export type BoardRelativeDynamicProps =
+	& BoardCommonProps
+	& BoardDynamicColumnsBindingProps
+	& BoardRelativeItemsProps
+
+
+const RelativeDynamicBoard = Component<BoardRelativeDynamicProps>(({ field, orderBy, limit, offset, columns, columnsSortableBy, discriminationField, sortableBy, sortScope, children }) => {
+	const itemsAccessor = useEntityList({ field, orderBy, limit, offset })
+	const columnsAccessor = useEntityListSubTree({ entities: columns })
+	const [data, methods] = useDynamicBoard({
+		columnEntities: columnsAccessor,
+		itemEntities: itemsAccessor,
+		columns,
+		sortableBy,
+		sortScope,
+		columnsSortableBy,
+		discriminationField,
+	})
+	return (
+		<BoardMethodsContext.Provider value={methods}>
+			<BoardColumnsContext.Provider value={data.columns}>
+				{children}
+			</BoardColumnsContext.Provider>
+		</BoardMethodsContext.Provider>
+	)
+}, ({ field, orderBy, limit, offset, columns, discriminationField, sortableBy, columnsSortableBy, children }, env) => {
+	const columnChildren = boardColumnsAnalyzer.processChildren(children, env)
+	const itemChildren = boardItemsAnalyzer.processChildren(children, env)
+	return (<>
+		<HasMany field={field} orderBy={orderBy} limit={limit} offset={offset}>
+			<HasOne {...typeof discriminationField === 'string' ? { field: discriminationField } : discriminationField} />
+			{sortableBy && <Field {...typeof sortableBy === 'string' ? { field: sortableBy } : sortableBy} />}
+			{itemChildren.map((it, index) => <Fragment key={index}>{it}</Fragment>)}
+		</HasMany>
+		<EntityListSubTree entities={columns}>
+			{columnsSortableBy && <Field {...typeof columnsSortableBy === 'string' ? { field: columnsSortableBy } : columnsSortableBy} />}
+			{columnChildren.map((it, index) => <Fragment key={index}>{it}</Fragment>)}
+		</EntityListSubTree>
+	</>)
+})
+export type BoardQualifiedStaticProps =
+	& BoardCommonProps
+	& BoardStaticColumnsBindingProps
+	& BoardQualifiedItemsProps
+
+
+const BoardQualifiedStatic = Component<BoardQualifiedStaticProps>(({ entities, orderBy, limit, offset, columns, discriminationField, sortableBy, sortScope, children }) => {
+	const itemsAccessor = useEntityListSubTree({ entities, orderBy, limit, offset })
+	const [data, methods] = useStaticBoard({
+		itemEntities: itemsAccessor,
+		columns,
+		sortableBy,
+		sortScope,
+		discriminationField,
+	})
+	return (
+		<BoardMethodsContext.Provider value={methods}>
+			<BoardColumnsContext.Provider value={data.columns}>
+				{children}
+			</BoardColumnsContext.Provider>
+		</BoardMethodsContext.Provider>
+	)
+}, ({ entities, orderBy, limit, offset, columns, discriminationField, sortableBy, children }, env) => {
+	const itemChildren = boardItemsAnalyzer.processChildren(children, env)
+	return (<>
+		<EntityListSubTree entities={entities} orderBy={orderBy} limit={limit} offset={offset}>
+			<Field {...typeof discriminationField === 'string' ? { field: discriminationField } : discriminationField} />
+			{sortableBy && <Field {...typeof sortableBy === 'string' ? { field: sortableBy } : sortableBy} />}
+			{itemChildren.map((it, index) => <Fragment key={index}>{it}</Fragment>)}
+		</EntityListSubTree>
+	</>)
+})
+
+
+export type BoardRelativeStaticProps =
+	& BoardCommonProps
+	& BoardStaticColumnsBindingProps
+	& BoardRelativeItemsProps
+
+const RelativeStaticBoard = Component<BoardRelativeStaticProps>(({ field, orderBy, limit, offset, columns, discriminationField, sortableBy, sortScope, children }) => {
+	const itemsAccessor = useEntityList({ field, orderBy, limit, offset })
+	const [data, methods] = useStaticBoard({
+		itemEntities: itemsAccessor,
+		columns,
+		sortableBy,
+		sortScope,
+		discriminationField,
+	})
+	return (
+		<BoardMethodsContext.Provider value={methods}>
+			<BoardColumnsContext.Provider value={data.columns}>
+				{children}
+			</BoardColumnsContext.Provider>
+		</BoardMethodsContext.Provider>
+	)
+}, ({ field, orderBy, limit, offset, columns, discriminationField, sortableBy, children }, env) => {
+	const itemChildren = boardItemsAnalyzer.processChildren(children, env)
+	return (<>
+		<HasMany field={field} orderBy={orderBy} limit={limit} offset={offset}>
+			<Field {...typeof discriminationField === 'string' ? { field: discriminationField } : discriminationField} />
+			{sortableBy && <Field {...typeof sortableBy === 'string' ? { field: sortableBy } : sortableBy} />}
+			{itemChildren.map((it, index) => <Fragment key={index}>{it}</Fragment>)}
+		</HasMany>
+	</>)
+})

package/src/components/BoardColumn.tsx

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react'
+
+export const BoardColumn = ({}: {
+	children: ReactNode
+}) => {
+	return null
+}

package/src/components/BoardColumnLabel.tsx

@@ -0,0 +1,6 @@
+import { useBoardCurrentColumn } from '../contexts'
+
+export const BoardColumnLabel = () => {
+	const value = useBoardCurrentColumn().value
+	return value && 'label' in value ? <>{value.label}</> : null
+}

package/src/components/BoardEachColumn.tsx

@@ -0,0 +1,32 @@
+import { EntityAccessor } from '@contember/binding'
+import { Entity } from '@contember/react-binding'
+import { BoardCurrentColumnContext, useBoardColumns } from '../contexts'
+import { ReactNode } from 'react'
+import { BoardColumn } from './BoardColumn'
+import { BoardNullColumnPlaceholder } from '../const'
+
+export const BoardEachColumn = ({ children }: {
+	children: ReactNode
+}) => {
+	const columns = useBoardColumns()
+
+	return <>
+		{columns.map(column => {
+			if (column.id === BoardNullColumnPlaceholder) {
+				return null
+			}
+			return (
+				<BoardCurrentColumnContext.Provider value={column} key={column.id}>
+					{column.value instanceof EntityAccessor ? (
+						<Entity accessor={column.value}>
+							{children}
+						</Entity>
+					) : children}
+				</BoardCurrentColumnContext.Provider>
+			)
+		})}
+	</>
+}
+BoardEachColumn.staticRender = ({ children }: { children: ReactNode }) => {
+	return <BoardColumn>{children}</BoardColumn>
+}

package/src/components/BoardEachItem.tsx

@@ -0,0 +1,48 @@
+import { ReactNode, useMemo } from 'react'
+import { BoardCurrentItemContext, useBoardCurrentColumn } from '../contexts'
+import { Entity } from '@contember/react-binding'
+import { BoardItem } from './BoardItem'
+import { BoardColumnNode, BoardItemNode } from '../types'
+
+export const BoardEachItem = ({ children }: {
+	children: ReactNode
+}) => {
+	const currentColumn = useBoardCurrentColumn()
+
+	return <>
+		{currentColumn.items.map((item, index) => {
+			return (
+				<BoardEachItemInner
+					key={item.id}
+					item={item}
+					column={currentColumn}
+				>
+					{children}
+				</BoardEachItemInner>
+			)
+		})}
+	</>
+}
+BoardEachItem.staticRender = ({ children }: { children: ReactNode }) => {
+	return <BoardItem>{children}</BoardItem>
+}
+
+const BoardEachItemInner = ({ children, item, column }: {
+	children: ReactNode
+	column: BoardColumnNode
+	item: BoardItemNode
+
+}) => {
+	const itemWithColumn = useMemo(() => ({
+		...item,
+		column,
+	}), [item, column])
+
+	return (
+		<BoardCurrentItemContext.Provider value={itemWithColumn} key={item.id}>
+			<Entity accessor={item.value}>
+				{children}
+			</Entity>
+		</BoardCurrentItemContext.Provider>
+	)
+}

package/src/components/BoardItem.tsx

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react'
+
+export const BoardItem = ({}: {
+	children: ReactNode
+}) => {
+	return null
+}
+BoardItem.staticRender = () => null

package/src/components/BoardNullColumn.tsx

@@ -0,0 +1,20 @@
+import { BoardCurrentColumnContext, useBoardColumns } from '../contexts'
+import { ReactNode } from 'react'
+import { BoardNullColumnPlaceholder } from '../const'
+
+export type BoardNullColumnProps = {
+	children: ReactNode
+	hideEmpty?: boolean
+};
+export const BoardNullColumn = ({ children, hideEmpty }: BoardNullColumnProps) => {
+	const column = useBoardColumns().find(it => it.id === BoardNullColumnPlaceholder)
+	if (!column || (hideEmpty && column.items.length === 0)) {
+		return null
+	}
+
+	return (
+		<BoardCurrentColumnContext.Provider value={column}>
+			{children}
+		</BoardCurrentColumnContext.Provider>
+	)
+}

package/src/components/index.ts

@@ -0,0 +1,7 @@
+export * from './Board'
+export * from './BoardColumn'
+export * from './BoardItem'
+export * from './BoardEachColumn'
+export * from './BoardEachItem'
+export * from './BoardNullColumn'
+export * from './BoardColumnLabel'

package/src/contexts.ts

@@ -0,0 +1,23 @@
+import { createRequiredContext } from '@contember/react-utils'
+import { BoardColumnNode, BoardColumnValue, BoardItemNode, BoardMethods } from './types'
+
+const _BoardMethodsContext = createRequiredContext<BoardMethods<any>>('BoardMethodsContext')
+/** @internal */
+export const BoardMethodsContext = _BoardMethodsContext[0]
+export const useBoardMethods = _BoardMethodsContext[1] as <T extends BoardColumnValue = BoardColumnValue>() => BoardMethods<T>
+
+
+const BoardColumnsContext_ = createRequiredContext<BoardColumnNode[]>('BoardColumnsContext')
+/** @internal */
+export const BoardColumnsContext = BoardColumnsContext_[0]
+export const useBoardColumns = BoardColumnsContext_[1] as <T extends BoardColumnValue = BoardColumnValue>() => BoardColumnNode<T>[]
+
+const _BoardColumnContext = createRequiredContext<BoardColumnNode>('BoardCurrentColumnContext')
+/** @internal*/
+export const BoardCurrentColumnContext = _BoardColumnContext[0]
+export const useBoardCurrentColumn = _BoardColumnContext[1]
+
+const BoardCurrentItemContext_ = createRequiredContext<BoardItemNode & { column: BoardColumnNode }>('BoardCurrentItemContext')
+/** @internal*/
+export const BoardCurrentItemContext = BoardCurrentItemContext_[0]
+export const useBoardCurrentItem = BoardCurrentItemContext_[1]

package/src/index.ts

@@ -1,6 +1,4 @@
-export * from './Board'
-export * from './BoardBindingProps'
 export * from './const'
 export * from './types'
-export * from './useDynamicBoard'
-export * from './useStaticBoard'
+export * from './components'
+export * from './contexts'

package/src/internal/boardAnalyzer.ts

@@ -0,0 +1,25 @@
+import { Environment } from '@contember/binding'
+import { ChildrenAnalyzer, Leaf } from '@contember/react-multipass-rendering'
+import { BoardItem } from '../components/BoardItem'
+import { ReactNode } from 'react'
+import { BoardColumn } from '../components/BoardColumn'
+
+const itemLeaf = new Leaf(node => node.props.children, BoardItem)
+const columnLeaf = new Leaf(node => node.props.children, BoardColumn)
+
+
+export const boardColumnsAnalyzer = new ChildrenAnalyzer<
+	ReactNode,
+	never,
+	Environment
+>([columnLeaf], {
+	staticRenderFactoryName: 'staticRender',
+})
+
+export const boardItemsAnalyzer = new ChildrenAnalyzer<
+	ReactNode,
+	never,
+	Environment
+>([itemLeaf], {
+	staticRenderFactoryName: 'staticRender',
+})

package/src/internal/useBoardItemsMethods.ts

@@ -1,4 +1,3 @@
-import { BoardAddItemMethod, BoardColumnValue, BoardMethods, BoardMoveItemMethod, BoardRemoveItemMethod } from '../BoardBindingProps'
 import { useCallback, useMemo } from 'react'
 import {
 	BatchUpdatesOptions,
@@ -10,6 +9,7 @@ import {
 } from '@contember/react-binding'
 import { BoardColumnKey, UseGroupItemsByColumn } from './useGroupItemsByColumn'
 import { arrayMove } from '../utils/arrayMove'
+import { BoardAddItemMethod, BoardColumnValue, BoardMethods, BoardMoveItemMethod, BoardRemoveItemMethod } from '../types'
 
 
 export type UseBoardItemsMethodsProps<ColumnValue extends BoardColumnValue> = {

package/src/internal/{useBoardColumns.ts → useCreateBoardColumns.ts}

@@ -1,44 +1,30 @@
-import { BoardColumn, BoardColumnValue } from '../BoardBindingProps'
 import { useMemo } from 'react'
 import { UseGroupItemsByColumn } from './useGroupItemsByColumn'
 import { EntityListAccessor } from '@contember/react-binding'
 import { BoardNullColumnPlaceholder } from '../const'
-import { BoardNullBehaviourProps } from '../types'
+import { BoardColumnNode, BoardColumnValue } from '../types'
 
-export const useBoardColumns = <ColumnValue extends BoardColumnValue>({ groupItemsByColumn, items, columns, nullColumn, nullColumnPlacement, columnIdGetter }: {
+export const useCreateBoardColumns = <ColumnValue extends BoardColumnValue>({ groupItemsByColumn, items, columns, columnIdGetter }: {
 	items: EntityListAccessor
 	columns: Iterable<ColumnValue>
 	columnIdGetter: (column: ColumnValue) => string | number
 	groupItemsByColumn: UseGroupItemsByColumn,
-} & BoardNullBehaviourProps): BoardColumn<ColumnValue>[] => {
+}): BoardColumnNode<ColumnValue>[] => {
 
 	return useMemo(() => {
 		const itemsByColumn = groupItemsByColumn(items)
 
-		const result: BoardColumn<ColumnValue>[] = []
-		let index = 0
 		const nullItems = itemsByColumn.get(null) ?? []
-
-		const pushNullColumn = () => {
-			if (nullColumn === 'never') {
-				return
-			}
-			if (nullColumn === 'auto' && nullItems.length === 0) {
-				return
-			}
-
-			result.push({
+		const result: BoardColumnNode<ColumnValue>[] = [
+			{
 				id: BoardNullColumnPlaceholder,
-				index: index++,
+				index: Number.MAX_SAFE_INTEGER,
 				value: null,
 				items: nullItems.map((it, index) => ({ value: it, id: it.id, index })),
-			})
-		}
+			},
+		]
+		let index = 0
 
-		if (nullColumnPlacement === 'start') {
-			index--
-			pushNullColumn()
-		}
 
 		for (const column of columns) {
 			result.push({
@@ -48,10 +34,7 @@ export const useBoardColumns = <ColumnValue extends BoardColumnValue>({ groupIte
 				items: itemsByColumn.get(columnIdGetter(column))?.map((it, index) => ({ value: it, id: it.id, index })) ?? [],
 			})
 		}
-
-		if (nullColumnPlacement !== 'start') {
-			pushNullColumn()
-		}
 		return result
-	}, [columnIdGetter, columns, groupItemsByColumn, items, nullColumn, nullColumnPlacement])
+
+	}, [columnIdGetter, columns, groupItemsByColumn, items])
 }

package/src/{useDynamicBoard.ts → internal/useDynamicBoard.ts}

@@ -10,12 +10,18 @@ import {
 	useDesugaredRelativeSingleEntity,
 	useDesugaredRelativeSingleField,
 } from '@contember/react-binding'
-import { BoardAddColumnMethod, BoardBindingProps, BoardMoveColumnMethod, BoardRemoveColumnMethod } from './BoardBindingProps'
-import { useGroupItemsByColumn } from './internal/useGroupItemsByColumn'
-import { useBoardColumns } from './internal/useBoardColumns'
-import { BoardCommonProps, BoardDynamicColumnsBindingProps } from './types'
-import { useBoardItemsMethods } from './internal/useBoardItemsMethods'
-import { arrayMove } from './utils/arrayMove'
+import {
+	BoardAddColumnMethod,
+	BoardMethods,
+	BoardMoveColumnMethod,
+	BoardRemoveColumnMethod,
+} from '../types'
+import { useGroupItemsByColumn } from './useGroupItemsByColumn'
+import { useCreateBoardColumns } from './useCreateBoardColumns'
+import { arrayMove } from '../utils/arrayMove'
+import { useBoardItemsMethods } from './useBoardItemsMethods'
+import { BoardData } from '../types/BoardData'
+import { BoardCommonProps, BoardDynamicColumnsBindingProps } from '../components'
 
 
 export type UseDynamicBoardBindingProps =
@@ -39,9 +45,7 @@ export const useDynamicBoard = ({
 	discriminationField,
 	columnEntities,
 	itemEntities,
-	nullColumnPlacement = 'end',
-	nullColumn = 'auto',
-}: UseDynamicBoardBindingProps): BoardBindingProps<EntityAccessor> => {
+}: UseDynamicBoardBindingProps): [BoardData<EntityAccessor>, BoardMethods<EntityAccessor>] => {
 
 	const desugaredSortableByField = useDesugaredRelativeSingleField(sortableBy)
 	const desugaredColumnSortableByField = useDesugaredRelativeSingleField(columnsSortableBy)
@@ -61,13 +65,11 @@ export const useDynamicBoard = ({
 
 	const getSortedColumns = useGetSortedColumns(desugaredColumnSortableByField)
 
-	const columnsResult = useBoardColumns<EntityAccessor>({
+	const columnsResult = useCreateBoardColumns<EntityAccessor>({
 		columns: getSortedColumns(columnEntities),
 		columnIdGetter: it => it.id,
 		groupItemsByColumn,
 		items: itemEntities,
-		nullColumn,
-		nullColumnPlacement,
 	})
 
 	const addColumn = useCallback<BoardAddColumnMethod>((index, preprocess) => {
@@ -123,13 +125,14 @@ export const useDynamicBoard = ({
 		itemEntities,
 	})
 
-	return {
-		columns: columnsResult,
-		addColumn,
+	const methods = useMemo(() => ({
 		addItem,
-		moveColumn,
 		moveItem,
-		removeColumn,
 		removeItem,
-	}
+		moveColumn,
+		addColumn,
+		removeColumn,
+	}), [addItem, moveItem, removeItem, moveColumn, addColumn, removeColumn])
+
+	return [{ columns: columnsResult }, methods]
 }