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

package/dist/development/components/MultiSelect.cjs

@@ -5,8 +5,11 @@ const react = require("react");
 const contexts = require("../contexts.cjs");
 const reactBinding = require("@contember/react-binding");
 const reactUtils = require("@contember/react-utils");
-const MultiSelect = reactBinding.Component(({ field, children, options, onSelect, onUnselect }) => {
+const useSelectFilter = require("../hooks/useSelectFilter.cjs");
+const MultiSelect = reactBinding.Component(({ field, children, options, onSelect, onUnselect, filterField }) => {
   const entities = reactBinding.useEntityList({ field });
+  options ?? (options = entities.name);
+  const filter = useSelectFilter.useSelectFilter({ filterField, marker: entities.getMarker() });
   const entitiesArr = react.useMemo(() => Array.from(entities), [entities]);
   const selectedEntities = react.useMemo(() => Array.from(entities).map((it) => it.id), [entities]);
   const handler = reactUtils.useReferentiallyStableCallback((entity, action = "toggle") => {
@@ -25,27 +28,31 @@ const MultiSelect = reactBinding.Component(({ field, children, options, onSelect
   const isSelected = react.useCallback((entity) => {
     return selectedEntities.includes(entity.id);
   }, [selectedEntities]);
-  return /* @__PURE__ */ jsxDevRuntime.jsxDEV(contexts.SelectCurrentEntitiesContext.Provider, { value: entitiesArr, children: /* @__PURE__ */ jsxDevRuntime.jsxDEV(contexts.SelectIsSelectedContext.Provider, { value: isSelected, children: /* @__PURE__ */ jsxDevRuntime.jsxDEV(contexts.SelectHandleSelectContext.Provider, { value: handler, children: /* @__PURE__ */ jsxDevRuntime.jsxDEV(contexts.SelectOptionsContext.Provider, { value: options, children }, void 0, false, {
+  return /* @__PURE__ */ jsxDevRuntime.jsxDEV(contexts.SelectCurrentEntitiesContext.Provider, { value: entitiesArr, children: /* @__PURE__ */ jsxDevRuntime.jsxDEV(contexts.SelectIsSelectedContext.Provider, { value: isSelected, children: /* @__PURE__ */ jsxDevRuntime.jsxDEV(contexts.SelectHandleSelectContext.Provider, { value: handler, children: /* @__PURE__ */ jsxDevRuntime.jsxDEV(contexts.SelectOptionsContext.Provider, { value: options, children: /* @__PURE__ */ jsxDevRuntime.jsxDEV(contexts.SelectOptionsFilterContext.Provider, { value: filter, children }, void 0, false, {
     fileName: "/__w/interface/interface/packages/react-select/src/components/MultiSelect.tsx",
-    lineNumber: 41,
+    lineNumber: 46,
+    columnNumber: 7
+  }, void 0) }, void 0, false, {
+    fileName: "/__w/interface/interface/packages/react-select/src/components/MultiSelect.tsx",
+    lineNumber: 45,
     columnNumber: 6
   }, void 0) }, void 0, false, {
     fileName: "/__w/interface/interface/packages/react-select/src/components/MultiSelect.tsx",
-    lineNumber: 40,
+    lineNumber: 44,
     columnNumber: 5
   }, void 0) }, void 0, false, {
     fileName: "/__w/interface/interface/packages/react-select/src/components/MultiSelect.tsx",
-    lineNumber: 39,
+    lineNumber: 43,
     columnNumber: 4
   }, void 0) }, void 0, false, {
     fileName: "/__w/interface/interface/packages/react-select/src/components/MultiSelect.tsx",
-    lineNumber: 38,
+    lineNumber: 42,
     columnNumber: 3
   }, void 0);
 }, ({ field, children }) => {
-  return /* @__PURE__ */ jsxDevRuntime.jsxDEV(reactBinding.HasMany, { field, children }, void 0, false, {
+  return /* @__PURE__ */ jsxDevRuntime.jsxDEV(reactBinding.HasMany, { field, expectedMutation: "connectOrDisconnect", children }, void 0, false, {
     fileName: "/__w/interface/interface/packages/react-select/src/components/MultiSelect.tsx",
-    lineNumber: 50,
+    lineNumber: 56,
     columnNumber: 3
   }, void 0);
 });

package/dist/development/components/MultiSelect.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelect.cjs","sources":["../../../src/components/MultiSelect.tsx"],"sourcesContent":["import React, { ReactNode, useCallback, useMemo } from 'react'\nimport { SelectCurrentEntitiesContext, SelectHandler, SelectHandleSelectContext, SelectIsSelectedContext, SelectOptionsContext } from '../contexts'\nimport { Component, EntityAccessor, HasMany, SugaredQualifiedEntityList, SugaredRelativeEntityList, useEntityList } from '@contember/react-binding'\nimport { useReferentiallyStableCallback } from '@contember/react-utils'\nimport { SelectEvents } from '../types'\n\nexport type MultiSelectProps =\n\t& {\n\t\tchildren: ReactNode\n\t\tfield: SugaredRelativeEntityList['field']\n\t\toptions: SugaredQualifiedEntityList['entities']\n\t}\n\t& SelectEvents\n\nexport const MultiSelect = Component(({ field, children, options, onSelect, onUnselect }: MultiSelectProps) => {\n\tconst entities = useEntityList({ field })\n\tconst entitiesArr = useMemo(() => Array.from(entities), [entities])\n\tconst selectedEntities = useMemo(() => Array.from(entities).map(it => it.id), [entities])\n\n\tconst handler = useReferentiallyStableCallback<SelectHandler>((entity, action = 'toggle') => {\n\t\tconst isSelected = selectedEntities.includes(entity.id)\n\t\tif (action === 'toggle') {\n\t\t\taction = isSelected ? 'unselect' : 'select'\n\t\t}\n\t\tif (action === 'unselect' && isSelected) {\n\t\t\tentities.disconnectEntity(entity)\n\t\t\tonUnselect?.(entity)\n\t\t} else if (action === 'select' && !isSelected) {\n\t\t\tentities.connectEntity(entity)\n\t\t\tonSelect?.(entity)\n\t\t}\n\t})\n\tconst isSelected = useCallback((entity: EntityAccessor) => {\n\t\treturn selectedEntities.includes(entity.id)\n\t}, [selectedEntities])\n\n\treturn (\n\t\t<SelectCurrentEntitiesContext.Provider value={entitiesArr}>\n\t\t\t<SelectIsSelectedContext.Provider value={isSelected}>\n\t\t\t\t<SelectHandleSelectContext.Provider value={handler}>\n\t\t\t\t\t<SelectOptionsContext.Provider value={options}>\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</SelectOptionsContext.Provider>\n\t\t\t\t</SelectHandleSelectContext.Provider>\n\t\t\t</SelectIsSelectedContext.Provider>\n\t\t</SelectCurrentEntitiesContext.Provider>\n\t)\n}, ({ field, children }) => {\n\treturn (\n\t\t<HasMany field={field}>\n\t\t\t{children}\n\t\t</HasMany>\n\t)\n})\n\n"],"names":["Component","useEntityList","useMemo","useReferentiallyStableCallback","isSelected","useCallback","jsxDEV","SelectCurrentEntitiesContext","SelectIsSelectedContext","SelectHandleSelectContext","SelectOptionsContext","this","HasMany"],"mappings":";;;;;;;AAca,MAAA,cAAcA,aAAAA,UAAU,CAAC,EAAE,OAAO,UAAU,SAAS,UAAU,iBAAmC;AAC9G,QAAM,WAAWC,aAAAA,cAAc,EAAE,MAAO,CAAA;AAClC,QAAA,cAAcC,cAAQ,MAAM,MAAM,KAAK,QAAQ,GAAG,CAAC,QAAQ,CAAC;AAClE,QAAM,mBAAmBA,MAAA,QAAQ,MAAM,MAAM,KAAK,QAAQ,EAAE,IAAI,CAAA,OAAM,GAAG,EAAE,GAAG,CAAC,QAAQ,CAAC;AAExF,QAAM,UAAUC,WAAA,+BAA8C,CAAC,QAAQ,SAAS,aAAa;AAC5F,UAAMC,cAAa,iBAAiB,SAAS,OAAO,EAAE;AACtD,QAAI,WAAW,UAAU;AACxB,eAASA,cAAa,aAAa;AAAA,IACpC;AACI,QAAA,WAAW,cAAcA,aAAY;AACxC,eAAS,iBAAiB,MAAM;AAChC,mBAAa,MAAM;AAAA,IACT,WAAA,WAAW,YAAY,CAACA,aAAY;AAC9C,eAAS,cAAc,MAAM;AAC7B,iBAAW,MAAM;AAAA,IAClB;AAAA,EAAA,CACA;AACK,QAAA,aAAaC,kBAAY,CAAC,WAA2B;AACnD,WAAA,iBAAiB,SAAS,OAAO,EAAE;AAAA,EAAA,GACxC,CAAC,gBAAgB,CAAC;AAGpB,SAAAC,8BAAA,OAACC,SAA6B,6BAAA,UAA7B,EAAsC,OAAO,aAC7C,UAACD,8BAAAA,OAAAE,SAAAA,wBAAwB,UAAxB,EAAiC,OAAO,YACxC,+CAACC,mCAA0B,UAA1B,EAAmC,OAAO,SAC1C,UAAAH,8BAAA,OAACI,8BAAqB,UAArB,EAA8B,OAAO,SACpC,SADF,GAAA,QAAA,OAAA;AAAA,IAAA,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,cAAA;AAAA,EAAA,GAAAC,MAEA,EAHD,GAAA,QAAA,OAAA;AAAA,IAAA,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,cAAA;AAAA,EAAA,GAAAA,MAIA,EALD,GAAA,QAAA,OAAA;AAAA,IAAA,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,cAAA;AAAA,EAAA,GAAAA,MAMA,EAPD,GAAA,QAAA,OAAA;AAAA,IAAA,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,cAAA;AAAA,EAQA,GAAAA,MAAA;AAEF,GAAG,CAAC,EAAE,OAAO,eAAe;AAE1B,SAAAL,8BAAAA,OAACM,aAAAA,SAAQ,EAAA,OACP,YADF,QAAA,OAAA;AAAA,IAAA,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,cAAA;AAAA,EAEA,GAAAD,MAAA;AAEF,CAAC;;"}
+{"version":3,"file":"MultiSelect.cjs","sources":["../../../src/components/MultiSelect.tsx"],"sourcesContent":["import React, { ReactNode, useCallback, useMemo } from 'react'\nimport { SelectCurrentEntitiesContext, SelectHandler, SelectHandleSelectContext, SelectIsSelectedContext, SelectOptionsContext, SelectOptionsFilterContext } from '../contexts'\nimport { Component, EntityAccessor, HasMany, SugaredQualifiedEntityList, SugaredRelativeEntityList, useEntityList } from '@contember/react-binding'\nimport { useReferentiallyStableCallback } from '@contember/react-utils'\nimport { SelectEvents } from '../types'\nimport { SelectFilterFieldProps, useSelectFilter } from '../hooks'\n\nexport type MultiSelectProps =\n\t& {\n\t\tchildren: ReactNode\n\t\tfield: SugaredRelativeEntityList['field']\n\t\toptions?: SugaredQualifiedEntityList['entities']\n\t}\n\t& SelectFilterFieldProps\n\t& SelectEvents\n\nexport const MultiSelect = Component(({ field, children, options, onSelect, onUnselect, filterField }: MultiSelectProps) => {\n\tconst entities = useEntityList({ field })\n\toptions ??= entities.name\n\tconst filter = useSelectFilter({ filterField, marker: entities.getMarker() })\n\tconst entitiesArr = useMemo(() => Array.from(entities), [entities])\n\tconst selectedEntities = useMemo(() => Array.from(entities).map(it => it.id), [entities])\n\n\tconst handler = useReferentiallyStableCallback<SelectHandler>((entity, action = 'toggle') => {\n\t\tconst isSelected = selectedEntities.includes(entity.id)\n\t\tif (action === 'toggle') {\n\t\t\taction = isSelected ? 'unselect' : 'select'\n\t\t}\n\t\tif (action === 'unselect' && isSelected) {\n\t\t\tentities.disconnectEntity(entity)\n\t\t\tonUnselect?.(entity)\n\t\t} else if (action === 'select' && !isSelected) {\n\t\t\tentities.connectEntity(entity)\n\t\t\tonSelect?.(entity)\n\t\t}\n\t})\n\tconst isSelected = useCallback((entity: EntityAccessor) => {\n\t\treturn selectedEntities.includes(entity.id)\n\t}, [selectedEntities])\n\n\treturn (\n\t\t<SelectCurrentEntitiesContext.Provider value={entitiesArr}>\n\t\t\t<SelectIsSelectedContext.Provider value={isSelected}>\n\t\t\t\t<SelectHandleSelectContext.Provider value={handler}>\n\t\t\t\t\t<SelectOptionsContext.Provider value={options}>\n\t\t\t\t\t\t<SelectOptionsFilterContext.Provider value={filter}>\n\t\t\t\t\t\t\t{children}\n\t\t\t\t\t\t</SelectOptionsFilterContext.Provider>\n\t\t\t\t\t</SelectOptionsContext.Provider>\n\t\t\t\t</SelectHandleSelectContext.Provider>\n\t\t\t</SelectIsSelectedContext.Provider>\n\t\t</SelectCurrentEntitiesContext.Provider>\n\t)\n}, ({ field, children }) => {\n\treturn (\n\t\t<HasMany field={field} expectedMutation=\"connectOrDisconnect\">\n\t\t\t{children}\n\t\t</HasMany>\n\t)\n})\n\n"],"names":["Component","useEntityList","useSelectFilter","useMemo","useReferentiallyStableCallback","isSelected","useCallback","jsxDEV","SelectCurrentEntitiesContext","SelectIsSelectedContext","SelectHandleSelectContext","SelectOptionsContext","SelectOptionsFilterContext","this","HasMany"],"mappings":";;;;;;;;AAgBa,MAAA,cAAcA,aAAAA,UAAU,CAAC,EAAE,OAAO,UAAU,SAAS,UAAU,YAAY,kBAAoC;AAC3H,QAAM,WAAWC,aAAAA,cAAc,EAAE,MAAO,CAAA;AACxC,wBAAY,SAAS;AACf,QAAA,SAASC,gCAAgB,EAAE,aAAa,QAAQ,SAAS,aAAa;AACtE,QAAA,cAAcC,cAAQ,MAAM,MAAM,KAAK,QAAQ,GAAG,CAAC,QAAQ,CAAC;AAClE,QAAM,mBAAmBA,MAAA,QAAQ,MAAM,MAAM,KAAK,QAAQ,EAAE,IAAI,CAAA,OAAM,GAAG,EAAE,GAAG,CAAC,QAAQ,CAAC;AAExF,QAAM,UAAUC,WAAA,+BAA8C,CAAC,QAAQ,SAAS,aAAa;AAC5F,UAAMC,cAAa,iBAAiB,SAAS,OAAO,EAAE;AACtD,QAAI,WAAW,UAAU;AACxB,eAASA,cAAa,aAAa;AAAA,IACpC;AACI,QAAA,WAAW,cAAcA,aAAY;AACxC,eAAS,iBAAiB,MAAM;AAChC,mBAAa,MAAM;AAAA,IACT,WAAA,WAAW,YAAY,CAACA,aAAY;AAC9C,eAAS,cAAc,MAAM;AAC7B,iBAAW,MAAM;AAAA,IAClB;AAAA,EAAA,CACA;AACK,QAAA,aAAaC,kBAAY,CAAC,WAA2B;AACnD,WAAA,iBAAiB,SAAS,OAAO,EAAE;AAAA,EAAA,GACxC,CAAC,gBAAgB,CAAC;AAErB,SACEC,8BAAAA,OAAAC,SAAAA,6BAA6B,UAA7B,EAAsC,OAAO,aAC7C,UAACD,8BAAA,OAAAE,SAAA,wBAAwB,UAAxB,EAAiC,OAAO,YACxC,+CAACC,SAAAA,0BAA0B,UAA1B,EAAmC,OAAO,SAC1C,UAAAH,8BAAAA,OAACI,SAAqB,qBAAA,UAArB,EAA8B,OAAO,SACrC,UAAAJ,8BAAAA,OAACK,SAAAA,2BAA2B,UAA3B,EAAoC,OAAO,QAC1C,YADF,QAAA,OAAA;AAAA,IAAA,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,cAAA;AAAA,EAAA,GAAAC,MAEA,EAHD,GAAA,QAAA,OAAA;AAAA,IAAA,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,cAAA;AAAA,EAAA,GAAAA,MAIA,EALD,GAAA,QAAA,OAAA;AAAA,IAAA,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,cAAA;AAAA,EAAA,GAAAA,MAMA,EAPD,GAAA,QAAA,OAAA;AAAA,IAAA,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,cAAA;AAAA,EAAA,GAAAA,MAQA,EATD,GAAA,QAAA,OAAA;AAAA,IAAA,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,cAAA;AAAA,EAUA,GAAAA,MAAA;AAEF,GAAG,CAAC,EAAE,OAAO,eAAe;AAC3B,SACEN,8BAAA,OAAAO,sBAAA,EAAQ,OAAc,kBAAiB,uBACtC,SADF,GAAA,QAAA,OAAA;AAAA,IAAA,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,cAAA;AAAA,EAEA,GAAAD,MAAA;AAEF,CAAC;;"}

package/dist/development/components/MultiSelect.js

@@ -1,10 +1,13 @@
 import { jsxDEV } from "react/jsx-dev-runtime";
 import { useMemo, useCallback } from "react";
-import { SelectCurrentEntitiesContext, SelectIsSelectedContext, SelectHandleSelectContext, SelectOptionsContext } from "../contexts.js";
+import { SelectCurrentEntitiesContext, SelectIsSelectedContext, SelectHandleSelectContext, SelectOptionsContext, SelectOptionsFilterContext } from "../contexts.js";
 import { Component, useEntityList, HasMany } from "@contember/react-binding";
 import { useReferentiallyStableCallback } from "@contember/react-utils";
-const MultiSelect = Component(({ field, children, options, onSelect, onUnselect }) => {
+import { useSelectFilter } from "../hooks/useSelectFilter.js";
+const MultiSelect = Component(({ field, children, options, onSelect, onUnselect, filterField }) => {
   const entities = useEntityList({ field });
+  options ?? (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]);
   const handler = useReferentiallyStableCallback((entity, action = "toggle") => {
@@ -23,27 +26,31 @@ const MultiSelect = Component(({ field, children, options, onSelect, onUnselect
   const isSelected = useCallback((entity) => {
     return selectedEntities.includes(entity.id);
   }, [selectedEntities]);
-  return /* @__PURE__ */ jsxDEV(SelectCurrentEntitiesContext.Provider, { value: entitiesArr, children: /* @__PURE__ */ jsxDEV(SelectIsSelectedContext.Provider, { value: isSelected, children: /* @__PURE__ */ jsxDEV(SelectHandleSelectContext.Provider, { value: handler, children: /* @__PURE__ */ jsxDEV(SelectOptionsContext.Provider, { value: options, children }, void 0, false, {
+  return /* @__PURE__ */ jsxDEV(SelectCurrentEntitiesContext.Provider, { value: entitiesArr, children: /* @__PURE__ */ jsxDEV(SelectIsSelectedContext.Provider, { value: isSelected, children: /* @__PURE__ */ jsxDEV(SelectHandleSelectContext.Provider, { value: handler, children: /* @__PURE__ */ jsxDEV(SelectOptionsContext.Provider, { value: options, children: /* @__PURE__ */ jsxDEV(SelectOptionsFilterContext.Provider, { value: filter, children }, void 0, false, {
     fileName: "/__w/interface/interface/packages/react-select/src/components/MultiSelect.tsx",
-    lineNumber: 41,
+    lineNumber: 46,
+    columnNumber: 7
+  }, void 0) }, void 0, false, {
+    fileName: "/__w/interface/interface/packages/react-select/src/components/MultiSelect.tsx",
+    lineNumber: 45,
     columnNumber: 6
   }, void 0) }, void 0, false, {
     fileName: "/__w/interface/interface/packages/react-select/src/components/MultiSelect.tsx",
-    lineNumber: 40,
+    lineNumber: 44,
     columnNumber: 5
   }, void 0) }, void 0, false, {
     fileName: "/__w/interface/interface/packages/react-select/src/components/MultiSelect.tsx",
-    lineNumber: 39,
+    lineNumber: 43,
     columnNumber: 4
   }, void 0) }, void 0, false, {
     fileName: "/__w/interface/interface/packages/react-select/src/components/MultiSelect.tsx",
-    lineNumber: 38,
+    lineNumber: 42,
     columnNumber: 3
   }, void 0);
 }, ({ field, children }) => {
-  return /* @__PURE__ */ jsxDEV(HasMany, { field, children }, void 0, false, {
+  return /* @__PURE__ */ jsxDEV(HasMany, { field, expectedMutation: "connectOrDisconnect", children }, void 0, false, {
     fileName: "/__w/interface/interface/packages/react-select/src/components/MultiSelect.tsx",
-    lineNumber: 50,
+    lineNumber: 56,
     columnNumber: 3
   }, void 0);
 });

package/dist/development/components/MultiSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelect.js","sources":["../../../src/components/MultiSelect.tsx"],"sourcesContent":["import React, { ReactNode, useCallback, useMemo } from 'react'\nimport { SelectCurrentEntitiesContext, SelectHandler, SelectHandleSelectContext, SelectIsSelectedContext, SelectOptionsContext } from '../contexts'\nimport { Component, EntityAccessor, HasMany, SugaredQualifiedEntityList, SugaredRelativeEntityList, useEntityList } from '@contember/react-binding'\nimport { useReferentiallyStableCallback } from '@contember/react-utils'\nimport { SelectEvents } from '../types'\n\nexport type MultiSelectProps =\n\t& {\n\t\tchildren: ReactNode\n\t\tfield: SugaredRelativeEntityList['field']\n\t\toptions: SugaredQualifiedEntityList['entities']\n\t}\n\t& SelectEvents\n\nexport const MultiSelect = Component(({ field, children, options, onSelect, onUnselect }: MultiSelectProps) => {\n\tconst entities = useEntityList({ field })\n\tconst entitiesArr = useMemo(() => Array.from(entities), [entities])\n\tconst selectedEntities = useMemo(() => Array.from(entities).map(it => it.id), [entities])\n\n\tconst handler = useReferentiallyStableCallback<SelectHandler>((entity, action = 'toggle') => {\n\t\tconst isSelected = selectedEntities.includes(entity.id)\n\t\tif (action === 'toggle') {\n\t\t\taction = isSelected ? 'unselect' : 'select'\n\t\t}\n\t\tif (action === 'unselect' && isSelected) {\n\t\t\tentities.disconnectEntity(entity)\n\t\t\tonUnselect?.(entity)\n\t\t} else if (action === 'select' && !isSelected) {\n\t\t\tentities.connectEntity(entity)\n\t\t\tonSelect?.(entity)\n\t\t}\n\t})\n\tconst isSelected = useCallback((entity: EntityAccessor) => {\n\t\treturn selectedEntities.includes(entity.id)\n\t}, [selectedEntities])\n\n\treturn (\n\t\t<SelectCurrentEntitiesContext.Provider value={entitiesArr}>\n\t\t\t<SelectIsSelectedContext.Provider value={isSelected}>\n\t\t\t\t<SelectHandleSelectContext.Provider value={handler}>\n\t\t\t\t\t<SelectOptionsContext.Provider value={options}>\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</SelectOptionsContext.Provider>\n\t\t\t\t</SelectHandleSelectContext.Provider>\n\t\t\t</SelectIsSelectedContext.Provider>\n\t\t</SelectCurrentEntitiesContext.Provider>\n\t)\n}, ({ field, children }) => {\n\treturn (\n\t\t<HasMany field={field}>\n\t\t\t{children}\n\t\t</HasMany>\n\t)\n})\n\n"],"names":["isSelected","this"],"mappings":";;;;;AAca,MAAA,cAAc,UAAU,CAAC,EAAE,OAAO,UAAU,SAAS,UAAU,iBAAmC;AAC9G,QAAM,WAAW,cAAc,EAAE,MAAO,CAAA;AAClC,QAAA,cAAc,QAAQ,MAAM,MAAM,KAAK,QAAQ,GAAG,CAAC,QAAQ,CAAC;AAClE,QAAM,mBAAmB,QAAQ,MAAM,MAAM,KAAK,QAAQ,EAAE,IAAI,CAAA,OAAM,GAAG,EAAE,GAAG,CAAC,QAAQ,CAAC;AAExF,QAAM,UAAU,+BAA8C,CAAC,QAAQ,SAAS,aAAa;AAC5F,UAAMA,cAAa,iBAAiB,SAAS,OAAO,EAAE;AACtD,QAAI,WAAW,UAAU;AACxB,eAASA,cAAa,aAAa;AAAA,IACpC;AACI,QAAA,WAAW,cAAcA,aAAY;AACxC,eAAS,iBAAiB,MAAM;AAChC,mBAAa,MAAM;AAAA,IACT,WAAA,WAAW,YAAY,CAACA,aAAY;AAC9C,eAAS,cAAc,MAAM;AAC7B,iBAAW,MAAM;AAAA,IAClB;AAAA,EAAA,CACA;AACK,QAAA,aAAa,YAAY,CAAC,WAA2B;AACnD,WAAA,iBAAiB,SAAS,OAAO,EAAE;AAAA,EAAA,GACxC,CAAC,gBAAgB,CAAC;AAGpB,SAAA,uBAAC,6BAA6B,UAA7B,EAAsC,OAAO,aAC7C,UAAC,uBAAA,wBAAwB,UAAxB,EAAiC,OAAO,YACxC,iCAAC,0BAA0B,UAA1B,EAAmC,OAAO,SAC1C,UAAA,uBAAC,qBAAqB,UAArB,EAA8B,OAAO,SACpC,SADF,GAAA,QAAA,OAAA;AAAA,IAAA,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,cAAA;AAAA,EAAA,GAAAC,MAEA,EAHD,GAAA,QAAA,OAAA;AAAA,IAAA,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,cAAA;AAAA,EAAA,GAAAA,MAIA,EALD,GAAA,QAAA,OAAA;AAAA,IAAA,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,cAAA;AAAA,EAAA,GAAAA,MAMA,EAPD,GAAA,QAAA,OAAA;AAAA,IAAA,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,cAAA;AAAA,EAQA,GAAAA,MAAA;AAEF,GAAG,CAAC,EAAE,OAAO,eAAe;AAE1B,SAAA,uBAAC,SAAQ,EAAA,OACP,YADF,QAAA,OAAA;AAAA,IAAA,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,cAAA;AAAA,EAEA,GAAAA,MAAA;AAEF,CAAC;"}
+{"version":3,"file":"MultiSelect.js","sources":["../../../src/components/MultiSelect.tsx"],"sourcesContent":["import React, { ReactNode, useCallback, useMemo } from 'react'\nimport { SelectCurrentEntitiesContext, SelectHandler, SelectHandleSelectContext, SelectIsSelectedContext, SelectOptionsContext, SelectOptionsFilterContext } from '../contexts'\nimport { Component, EntityAccessor, HasMany, SugaredQualifiedEntityList, SugaredRelativeEntityList, useEntityList } from '@contember/react-binding'\nimport { useReferentiallyStableCallback } from '@contember/react-utils'\nimport { SelectEvents } from '../types'\nimport { SelectFilterFieldProps, useSelectFilter } from '../hooks'\n\nexport type MultiSelectProps =\n\t& {\n\t\tchildren: ReactNode\n\t\tfield: SugaredRelativeEntityList['field']\n\t\toptions?: SugaredQualifiedEntityList['entities']\n\t}\n\t& SelectFilterFieldProps\n\t& SelectEvents\n\nexport const MultiSelect = Component(({ field, children, options, onSelect, onUnselect, filterField }: MultiSelectProps) => {\n\tconst entities = useEntityList({ field })\n\toptions ??= entities.name\n\tconst filter = useSelectFilter({ filterField, marker: entities.getMarker() })\n\tconst entitiesArr = useMemo(() => Array.from(entities), [entities])\n\tconst selectedEntities = useMemo(() => Array.from(entities).map(it => it.id), [entities])\n\n\tconst handler = useReferentiallyStableCallback<SelectHandler>((entity, action = 'toggle') => {\n\t\tconst isSelected = selectedEntities.includes(entity.id)\n\t\tif (action === 'toggle') {\n\t\t\taction = isSelected ? 'unselect' : 'select'\n\t\t}\n\t\tif (action === 'unselect' && isSelected) {\n\t\t\tentities.disconnectEntity(entity)\n\t\t\tonUnselect?.(entity)\n\t\t} else if (action === 'select' && !isSelected) {\n\t\t\tentities.connectEntity(entity)\n\t\t\tonSelect?.(entity)\n\t\t}\n\t})\n\tconst isSelected = useCallback((entity: EntityAccessor) => {\n\t\treturn selectedEntities.includes(entity.id)\n\t}, [selectedEntities])\n\n\treturn (\n\t\t<SelectCurrentEntitiesContext.Provider value={entitiesArr}>\n\t\t\t<SelectIsSelectedContext.Provider value={isSelected}>\n\t\t\t\t<SelectHandleSelectContext.Provider value={handler}>\n\t\t\t\t\t<SelectOptionsContext.Provider value={options}>\n\t\t\t\t\t\t<SelectOptionsFilterContext.Provider value={filter}>\n\t\t\t\t\t\t\t{children}\n\t\t\t\t\t\t</SelectOptionsFilterContext.Provider>\n\t\t\t\t\t</SelectOptionsContext.Provider>\n\t\t\t\t</SelectHandleSelectContext.Provider>\n\t\t\t</SelectIsSelectedContext.Provider>\n\t\t</SelectCurrentEntitiesContext.Provider>\n\t)\n}, ({ field, children }) => {\n\treturn (\n\t\t<HasMany field={field} expectedMutation=\"connectOrDisconnect\">\n\t\t\t{children}\n\t\t</HasMany>\n\t)\n})\n\n"],"names":["isSelected","this"],"mappings":";;;;;;AAgBa,MAAA,cAAc,UAAU,CAAC,EAAE,OAAO,UAAU,SAAS,UAAU,YAAY,kBAAoC;AAC3H,QAAM,WAAW,cAAc,EAAE,MAAO,CAAA;AACxC,wBAAY,SAAS;AACf,QAAA,SAAS,gBAAgB,EAAE,aAAa,QAAQ,SAAS,aAAa;AACtE,QAAA,cAAc,QAAQ,MAAM,MAAM,KAAK,QAAQ,GAAG,CAAC,QAAQ,CAAC;AAClE,QAAM,mBAAmB,QAAQ,MAAM,MAAM,KAAK,QAAQ,EAAE,IAAI,CAAA,OAAM,GAAG,EAAE,GAAG,CAAC,QAAQ,CAAC;AAExF,QAAM,UAAU,+BAA8C,CAAC,QAAQ,SAAS,aAAa;AAC5F,UAAMA,cAAa,iBAAiB,SAAS,OAAO,EAAE;AACtD,QAAI,WAAW,UAAU;AACxB,eAASA,cAAa,aAAa;AAAA,IACpC;AACI,QAAA,WAAW,cAAcA,aAAY;AACxC,eAAS,iBAAiB,MAAM;AAChC,mBAAa,MAAM;AAAA,IACT,WAAA,WAAW,YAAY,CAACA,aAAY;AAC9C,eAAS,cAAc,MAAM;AAC7B,iBAAW,MAAM;AAAA,IAClB;AAAA,EAAA,CACA;AACK,QAAA,aAAa,YAAY,CAAC,WAA2B;AACnD,WAAA,iBAAiB,SAAS,OAAO,EAAE;AAAA,EAAA,GACxC,CAAC,gBAAgB,CAAC;AAErB,SACE,uBAAA,6BAA6B,UAA7B,EAAsC,OAAO,aAC7C,UAAC,uBAAA,wBAAwB,UAAxB,EAAiC,OAAO,YACxC,iCAAC,0BAA0B,UAA1B,EAAmC,OAAO,SAC1C,UAAA,uBAAC,qBAAqB,UAArB,EAA8B,OAAO,SACrC,UAAA,uBAAC,2BAA2B,UAA3B,EAAoC,OAAO,QAC1C,YADF,QAAA,OAAA;AAAA,IAAA,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,cAAA;AAAA,EAAA,GAAAC,MAEA,EAHD,GAAA,QAAA,OAAA;AAAA,IAAA,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,cAAA;AAAA,EAAA,GAAAA,MAIA,EALD,GAAA,QAAA,OAAA;AAAA,IAAA,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,cAAA;AAAA,EAAA,GAAAA,MAMA,EAPD,GAAA,QAAA,OAAA;AAAA,IAAA,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,cAAA;AAAA,EAAA,GAAAA,MAQA,EATD,GAAA,QAAA,OAAA;AAAA,IAAA,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,cAAA;AAAA,EAUA,GAAAA,MAAA;AAEF,GAAG,CAAC,EAAE,OAAO,eAAe;AAC3B,SACE,uBAAA,SAAA,EAAQ,OAAc,kBAAiB,uBACtC,SADF,GAAA,QAAA,OAAA;AAAA,IAAA,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,cAAA;AAAA,EAEA,GAAAA,MAAA;AAEF,CAAC;"}

package/dist/development/components/Select.cjs

@@ -5,9 +5,12 @@ const react = require("react");
 const contexts = require("../contexts.cjs");
 const reactBinding = require("@contember/react-binding");
 const reactUtils = require("@contember/react-utils");
-const Select = reactBinding.Component(({ field, children, onUnselect, onSelect, options }) => {
+const useSelectFilter = require("../hooks/useSelectFilter.cjs");
+const Select = reactBinding.Component(({ field, children, onUnselect, onSelect, options, filterField }) => {
   const entity = reactBinding.useEntity();
   const selectedEntity = entity.getEntity({ field });
+  options ?? (options = selectedEntity.name);
+  const filter = useSelectFilter.useSelectFilter({ filterField, marker: selectedEntity.getMarker() });
   const entityExists = selectedEntity.existsOnServer || selectedEntity.hasUnpersistedChanges;
   const entitiesArr = react.useMemo(() => entityExists ? [selectedEntity] : [], [entityExists, selectedEntity]);
   const handleSelect = reactUtils.useReferentiallyStableCallback((selected, action = "toggle") => {
@@ -23,27 +26,31 @@ const Select = reactBinding.Component(({ field, children, onUnselect, onSelect,
     }
   });
   const isSelected = react.useCallback((entity2) => entity2.id === selectedEntity.id, [selectedEntity.id]);
-  return /* @__PURE__ */ jsxDevRuntime.jsxDEV(contexts.SelectCurrentEntitiesContext.Provider, { value: entitiesArr, children: /* @__PURE__ */ jsxDevRuntime.jsxDEV(contexts.SelectIsSelectedContext.Provider, { value: isSelected, children: /* @__PURE__ */ jsxDevRuntime.jsxDEV(contexts.SelectHandleSelectContext.Provider, { value: handleSelect, children: /* @__PURE__ */ jsxDevRuntime.jsxDEV(contexts.SelectOptionsContext.Provider, { value: options, children }, void 0, false, {
+  return /* @__PURE__ */ jsxDevRuntime.jsxDEV(contexts.SelectCurrentEntitiesContext.Provider, { value: entitiesArr, children: /* @__PURE__ */ jsxDevRuntime.jsxDEV(contexts.SelectIsSelectedContext.Provider, { value: isSelected, children: /* @__PURE__ */ jsxDevRuntime.jsxDEV(contexts.SelectHandleSelectContext.Provider, { value: handleSelect, children: /* @__PURE__ */ jsxDevRuntime.jsxDEV(contexts.SelectOptionsContext.Provider, { value: options, children: /* @__PURE__ */ jsxDevRuntime.jsxDEV(contexts.SelectOptionsFilterContext.Provider, { value: filter, children }, void 0, false, {
     fileName: "/__w/interface/interface/packages/react-select/src/components/Select.tsx",
-    lineNumber: 39,
+    lineNumber: 45,
+    columnNumber: 7
+  }, void 0) }, void 0, false, {
+    fileName: "/__w/interface/interface/packages/react-select/src/components/Select.tsx",
+    lineNumber: 44,
     columnNumber: 6
   }, void 0) }, void 0, false, {
     fileName: "/__w/interface/interface/packages/react-select/src/components/Select.tsx",
-    lineNumber: 38,
+    lineNumber: 43,
     columnNumber: 5
   }, void 0) }, void 0, false, {
     fileName: "/__w/interface/interface/packages/react-select/src/components/Select.tsx",
-    lineNumber: 37,
+    lineNumber: 42,
     columnNumber: 4
   }, void 0) }, void 0, false, {
     fileName: "/__w/interface/interface/packages/react-select/src/components/Select.tsx",
-    lineNumber: 36,
+    lineNumber: 41,
     columnNumber: 3
   }, void 0);
 }, ({ field, children }) => {
-  return /* @__PURE__ */ jsxDevRuntime.jsxDEV(reactBinding.HasOne, { field, children }, void 0, false, {
+  return /* @__PURE__ */ jsxDevRuntime.jsxDEV(reactBinding.HasOne, { field, expectedMutation: "connectOrDisconnect", children }, void 0, false, {
     fileName: "/__w/interface/interface/packages/react-select/src/components/Select.tsx",
-    lineNumber: 48,
+    lineNumber: 55,
     columnNumber: 3
   }, void 0);
 });

package/dist/development/components/Select.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Select.cjs","sources":["../../../src/components/Select.tsx"],"sourcesContent":["import React, { ReactNode, useCallback, useMemo } from 'react'\nimport { SelectCurrentEntitiesContext, SelectHandler, SelectHandleSelectContext, SelectIsSelectedContext, SelectOptionsContext } from '../contexts'\nimport { Component, EntityAccessor, HasOne, SugaredQualifiedEntityList, SugaredRelativeSingleEntity, useEntity } from '@contember/react-binding'\nimport { useReferentiallyStableCallback } from '@contember/react-utils'\nimport { SelectEvents } from '../types'\n\nexport type SelectProps =\n\t& {\n\t\tchildren: ReactNode\n\t\tfield: SugaredRelativeSingleEntity['field']\n\t\toptions: SugaredQualifiedEntityList['entities']\n\t}\n\t& SelectEvents\n\nexport const Select = Component(({ field, children, onUnselect, onSelect, options }: SelectProps) => {\n\tconst entity = useEntity()\n\tconst selectedEntity = entity.getEntity({ field })\n\tconst entityExists = selectedEntity.existsOnServer || selectedEntity.hasUnpersistedChanges\n\tconst entitiesArr = useMemo(() => entityExists ? [selectedEntity] : [], [entityExists, selectedEntity])\n\n\tconst handleSelect = useReferentiallyStableCallback<SelectHandler>((selected, action = 'toggle') => {\n\t\tif (action === 'toggle') {\n\t\t\taction = selected.id === selectedEntity.id ? 'unselect' : 'select'\n\t\t}\n\t\tif (action === 'unselect') {\n\t\t\tentity.disconnectEntityAtField({ field })\n\t\t\tonUnselect?.(selected)\n\t\t} else if (action === 'select') {\n\t\t\tentity.connectEntityAtField({ field }, selected)\n\t\t\tonSelect?.(selected)\n\t\t}\n\t})\n\tconst isSelected = useCallback((entity: EntityAccessor) => entity.id === selectedEntity.id, [selectedEntity.id])\n\n\treturn (\n\t\t<SelectCurrentEntitiesContext.Provider value={entitiesArr}>\n\t\t\t<SelectIsSelectedContext.Provider value={isSelected}>\n\t\t\t\t<SelectHandleSelectContext.Provider value={handleSelect}>\n\t\t\t\t\t<SelectOptionsContext.Provider value={options}>\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</SelectOptionsContext.Provider>\n\t\t\t\t</SelectHandleSelectContext.Provider>\n\t\t\t</SelectIsSelectedContext.Provider>\n\t\t</SelectCurrentEntitiesContext.Provider>\n\t)\n}, ({ field, children }) => {\n\treturn (\n\t\t<HasOne field={field}>\n\t\t\t{children}\n\t\t</HasOne>\n\t)\n})\n\n"],"names":["Component","useEntity","useMemo","useReferentiallyStableCallback","useCallback","entity","jsxDEV","SelectCurrentEntitiesContext","SelectIsSelectedContext","SelectHandleSelectContext","SelectOptionsContext","this","HasOne"],"mappings":";;;;;;;AAca,MAAA,SAASA,aAAAA,UAAU,CAAC,EAAE,OAAO,UAAU,YAAY,UAAU,cAA2B;AACpG,QAAM,SAASC,aAAAA;AACf,QAAM,iBAAiB,OAAO,UAAU,EAAE,MAAO,CAAA;AAC3C,QAAA,eAAe,eAAe,kBAAkB,eAAe;AACrE,QAAM,cAAcC,MAAAA,QAAQ,MAAM,eAAe,CAAC,cAAc,IAAI,CAAA,GAAI,CAAC,cAAc,cAAc,CAAC;AAEtG,QAAM,eAAeC,WAAA,+BAA8C,CAAC,UAAU,SAAS,aAAa;AACnG,QAAI,WAAW,UAAU;AACxB,eAAS,SAAS,OAAO,eAAe,KAAK,aAAa;AAAA,IAC3D;AACA,QAAI,WAAW,YAAY;AACnB,aAAA,wBAAwB,EAAE,MAAA,CAAO;AACxC,mBAAa,QAAQ;AAAA,IAAA,WACX,WAAW,UAAU;AAC/B,aAAO,qBAAqB,EAAE,MAAM,GAAG,QAAQ;AAC/C,iBAAW,QAAQ;AAAA,IACpB;AAAA,EAAA,CACA;AACK,QAAA,aAAaC,MAAAA,YAAY,CAACC,YAA2BA,QAAO,OAAO,eAAe,IAAI,CAAC,eAAe,EAAE,CAAC;AAG9G,SAAAC,8BAAA,OAACC,SAA6B,6BAAA,UAA7B,EAAsC,OAAO,aAC7C,UAACD,8BAAAA,OAAAE,SAAAA,wBAAwB,UAAxB,EAAiC,OAAO,YACxC,+CAACC,mCAA0B,UAA1B,EAAmC,OAAO,cAC1C,UAAAH,8BAAA,OAACI,8BAAqB,UAArB,EAA8B,OAAO,SACpC,SADF,GAAA,QAAA,OAAA;AAAA,IAAA,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,cAAA;AAAA,EAAA,GAAAC,MAEA,EAHD,GAAA,QAAA,OAAA;AAAA,IAAA,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,cAAA;AAAA,EAAA,GAAAA,MAIA,EALD,GAAA,QAAA,OAAA;AAAA,IAAA,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,cAAA;AAAA,EAAA,GAAAA,MAMA,EAPD,GAAA,QAAA,OAAA;AAAA,IAAA,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,cAAA;AAAA,EAQA,GAAAA,MAAA;AAEF,GAAG,CAAC,EAAE,OAAO,eAAe;AAE1B,SAAAL,8BAAAA,OAACM,aAAAA,QAAO,EAAA,OACN,YADF,QAAA,OAAA;AAAA,IAAA,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,cAAA;AAAA,EAEA,GAAAD,MAAA;AAEF,CAAC;;"}
+{"version":3,"file":"Select.cjs","sources":["../../../src/components/Select.tsx"],"sourcesContent":["import React, { ReactNode, useCallback, useMemo } from 'react'\nimport { SelectCurrentEntitiesContext, SelectHandler, SelectHandleSelectContext, SelectIsSelectedContext, SelectOptionsContext, SelectOptionsFilterContext } from '../contexts'\nimport { Component, EntityAccessor, HasOne, SugaredQualifiedEntityList, SugaredRelativeSingleEntity, useEntity } from '@contember/react-binding'\nimport { useReferentiallyStableCallback } from '@contember/react-utils'\nimport { SelectEvents } from '../types'\nimport { SelectFilterFieldProps, useSelectFilter } from '../hooks'\n\nexport type SelectProps =\n\t& {\n\t\tchildren: ReactNode\n\t\tfield: SugaredRelativeSingleEntity['field']\n\t\toptions?: SugaredQualifiedEntityList['entities']\n\t}\n\t& SelectFilterFieldProps\n\t& SelectEvents\n\nexport const Select = Component(({ field, children, onUnselect, onSelect, options, filterField }: SelectProps) => {\n\tconst entity = useEntity()\n\tconst selectedEntity = entity.getEntity({ field })\n\toptions ??= selectedEntity.name\n\tconst filter = useSelectFilter({ filterField, marker: selectedEntity.getMarker() })\n\n\tconst entityExists = selectedEntity.existsOnServer || selectedEntity.hasUnpersistedChanges\n\tconst entitiesArr = useMemo(() => entityExists ? [selectedEntity] : [], [entityExists, selectedEntity])\n\n\tconst handleSelect = useReferentiallyStableCallback<SelectHandler>((selected, action = 'toggle') => {\n\t\tif (action === 'toggle') {\n\t\t\taction = selected.id === selectedEntity.id ? 'unselect' : 'select'\n\t\t}\n\t\tif (action === 'unselect') {\n\t\t\tentity.disconnectEntityAtField({ field })\n\t\t\tonUnselect?.(selected)\n\t\t} else if (action === 'select') {\n\t\t\tentity.connectEntityAtField({ field }, selected)\n\t\t\tonSelect?.(selected)\n\t\t}\n\t})\n\tconst isSelected = useCallback((entity: EntityAccessor) => entity.id === selectedEntity.id, [selectedEntity.id])\n\n\treturn (\n\t\t<SelectCurrentEntitiesContext.Provider value={entitiesArr}>\n\t\t\t<SelectIsSelectedContext.Provider value={isSelected}>\n\t\t\t\t<SelectHandleSelectContext.Provider value={handleSelect}>\n\t\t\t\t\t<SelectOptionsContext.Provider value={options}>\n\t\t\t\t\t\t<SelectOptionsFilterContext.Provider value={filter}>\n\t\t\t\t\t\t\t{children}\n\t\t\t\t\t\t</SelectOptionsFilterContext.Provider>\n\t\t\t\t\t</SelectOptionsContext.Provider>\n\t\t\t\t</SelectHandleSelectContext.Provider>\n\t\t\t</SelectIsSelectedContext.Provider>\n\t\t</SelectCurrentEntitiesContext.Provider>\n\t)\n}, ({ field, children }) => {\n\treturn (\n\t\t<HasOne field={field} expectedMutation=\"connectOrDisconnect\">\n\t\t\t{children}\n\t\t</HasOne>\n\t)\n})\n\n"],"names":["Component","useEntity","useSelectFilter","useMemo","useReferentiallyStableCallback","useCallback","entity","jsxDEV","SelectCurrentEntitiesContext","SelectIsSelectedContext","SelectHandleSelectContext","SelectOptionsContext","SelectOptionsFilterContext","this","HasOne"],"mappings":";;;;;;;;AAgBa,MAAA,SAASA,aAAAA,UAAU,CAAC,EAAE,OAAO,UAAU,YAAY,UAAU,SAAS,kBAA+B;AACjH,QAAM,SAASC,aAAAA;AACf,QAAM,iBAAiB,OAAO,UAAU,EAAE,MAAO,CAAA;AACjD,wBAAY,eAAe;AACrB,QAAA,SAASC,gCAAgB,EAAE,aAAa,QAAQ,eAAe,aAAa;AAE5E,QAAA,eAAe,eAAe,kBAAkB,eAAe;AACrE,QAAM,cAAcC,MAAAA,QAAQ,MAAM,eAAe,CAAC,cAAc,IAAI,CAAA,GAAI,CAAC,cAAc,cAAc,CAAC;AAEtG,QAAM,eAAeC,WAAA,+BAA8C,CAAC,UAAU,SAAS,aAAa;AACnG,QAAI,WAAW,UAAU;AACxB,eAAS,SAAS,OAAO,eAAe,KAAK,aAAa;AAAA,IAC3D;AACA,QAAI,WAAW,YAAY;AACnB,aAAA,wBAAwB,EAAE,MAAA,CAAO;AACxC,mBAAa,QAAQ;AAAA,IAAA,WACX,WAAW,UAAU;AAC/B,aAAO,qBAAqB,EAAE,MAAM,GAAG,QAAQ;AAC/C,iBAAW,QAAQ;AAAA,IACpB;AAAA,EAAA,CACA;AACK,QAAA,aAAaC,MAAAA,YAAY,CAACC,YAA2BA,QAAO,OAAO,eAAe,IAAI,CAAC,eAAe,EAAE,CAAC;AAE/G,SACEC,8BAAAA,OAAAC,SAAAA,6BAA6B,UAA7B,EAAsC,OAAO,aAC7C,UAACD,8BAAA,OAAAE,SAAA,wBAAwB,UAAxB,EAAiC,OAAO,YACxC,+CAACC,SAAAA,0BAA0B,UAA1B,EAAmC,OAAO,cAC1C,UAAAH,8BAAAA,OAACI,SAAqB,qBAAA,UAArB,EAA8B,OAAO,SACrC,UAAAJ,8BAAAA,OAACK,SAAAA,2BAA2B,UAA3B,EAAoC,OAAO,QAC1C,YADF,QAAA,OAAA;AAAA,IAAA,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,cAAA;AAAA,EAAA,GAAAC,MAEA,EAHD,GAAA,QAAA,OAAA;AAAA,IAAA,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,cAAA;AAAA,EAAA,GAAAA,MAIA,EALD,GAAA,QAAA,OAAA;AAAA,IAAA,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,cAAA;AAAA,EAAA,GAAAA,MAMA,EAPD,GAAA,QAAA,OAAA;AAAA,IAAA,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,cAAA;AAAA,EAAA,GAAAA,MAQA,EATD,GAAA,QAAA,OAAA;AAAA,IAAA,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,cAAA;AAAA,EAUA,GAAAA,MAAA;AAEF,GAAG,CAAC,EAAE,OAAO,eAAe;AAC3B,SACEN,8BAAA,OAAAO,qBAAA,EAAO,OAAc,kBAAiB,uBACrC,SADF,GAAA,QAAA,OAAA;AAAA,IAAA,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,cAAA;AAAA,EAEA,GAAAD,MAAA;AAEF,CAAC;;"}

package/dist/development/components/Select.js

@@ -1,11 +1,14 @@
 import { jsxDEV } from "react/jsx-dev-runtime";
 import { useMemo, useCallback } from "react";
-import { SelectCurrentEntitiesContext, SelectIsSelectedContext, SelectHandleSelectContext, SelectOptionsContext } from "../contexts.js";
+import { SelectCurrentEntitiesContext, SelectIsSelectedContext, SelectHandleSelectContext, SelectOptionsContext, SelectOptionsFilterContext } from "../contexts.js";
 import { Component, useEntity, HasOne } from "@contember/react-binding";
 import { useReferentiallyStableCallback } from "@contember/react-utils";
-const Select = Component(({ field, children, onUnselect, onSelect, options }) => {
+import { useSelectFilter } from "../hooks/useSelectFilter.js";
+const Select = Component(({ field, children, onUnselect, onSelect, options, filterField }) => {
   const entity = useEntity();
   const selectedEntity = entity.getEntity({ field });
+  options ?? (options = selectedEntity.name);
+  const filter = useSelectFilter({ filterField, marker: selectedEntity.getMarker() });
   const entityExists = selectedEntity.existsOnServer || selectedEntity.hasUnpersistedChanges;
   const entitiesArr = useMemo(() => entityExists ? [selectedEntity] : [], [entityExists, selectedEntity]);
   const handleSelect = useReferentiallyStableCallback((selected, action = "toggle") => {
@@ -21,27 +24,31 @@ const Select = Component(({ field, children, onUnselect, onSelect, options }) =>
     }
   });
   const isSelected = useCallback((entity2) => entity2.id === selectedEntity.id, [selectedEntity.id]);
-  return /* @__PURE__ */ jsxDEV(SelectCurrentEntitiesContext.Provider, { value: entitiesArr, children: /* @__PURE__ */ jsxDEV(SelectIsSelectedContext.Provider, { value: isSelected, children: /* @__PURE__ */ jsxDEV(SelectHandleSelectContext.Provider, { value: handleSelect, children: /* @__PURE__ */ jsxDEV(SelectOptionsContext.Provider, { value: options, children }, void 0, false, {
+  return /* @__PURE__ */ jsxDEV(SelectCurrentEntitiesContext.Provider, { value: entitiesArr, children: /* @__PURE__ */ jsxDEV(SelectIsSelectedContext.Provider, { value: isSelected, children: /* @__PURE__ */ jsxDEV(SelectHandleSelectContext.Provider, { value: handleSelect, children: /* @__PURE__ */ jsxDEV(SelectOptionsContext.Provider, { value: options, children: /* @__PURE__ */ jsxDEV(SelectOptionsFilterContext.Provider, { value: filter, children }, void 0, false, {
     fileName: "/__w/interface/interface/packages/react-select/src/components/Select.tsx",
-    lineNumber: 39,
+    lineNumber: 45,
+    columnNumber: 7
+  }, void 0) }, void 0, false, {
+    fileName: "/__w/interface/interface/packages/react-select/src/components/Select.tsx",
+    lineNumber: 44,
     columnNumber: 6
   }, void 0) }, void 0, false, {
     fileName: "/__w/interface/interface/packages/react-select/src/components/Select.tsx",
-    lineNumber: 38,
+    lineNumber: 43,
     columnNumber: 5
   }, void 0) }, void 0, false, {
     fileName: "/__w/interface/interface/packages/react-select/src/components/Select.tsx",
-    lineNumber: 37,
+    lineNumber: 42,
     columnNumber: 4
   }, void 0) }, void 0, false, {
     fileName: "/__w/interface/interface/packages/react-select/src/components/Select.tsx",
-    lineNumber: 36,
+    lineNumber: 41,
     columnNumber: 3
   }, void 0);
 }, ({ field, children }) => {
-  return /* @__PURE__ */ jsxDEV(HasOne, { field, children }, void 0, false, {
+  return /* @__PURE__ */ jsxDEV(HasOne, { field, expectedMutation: "connectOrDisconnect", children }, void 0, false, {
     fileName: "/__w/interface/interface/packages/react-select/src/components/Select.tsx",
-    lineNumber: 48,
+    lineNumber: 55,
     columnNumber: 3
   }, void 0);
 });

package/dist/development/components/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":["../../../src/components/Select.tsx"],"sourcesContent":["import React, { ReactNode, useCallback, useMemo } from 'react'\nimport { SelectCurrentEntitiesContext, SelectHandler, SelectHandleSelectContext, SelectIsSelectedContext, SelectOptionsContext } from '../contexts'\nimport { Component, EntityAccessor, HasOne, SugaredQualifiedEntityList, SugaredRelativeSingleEntity, useEntity } from '@contember/react-binding'\nimport { useReferentiallyStableCallback } from '@contember/react-utils'\nimport { SelectEvents } from '../types'\n\nexport type SelectProps =\n\t& {\n\t\tchildren: ReactNode\n\t\tfield: SugaredRelativeSingleEntity['field']\n\t\toptions: SugaredQualifiedEntityList['entities']\n\t}\n\t& SelectEvents\n\nexport const Select = Component(({ field, children, onUnselect, onSelect, options }: SelectProps) => {\n\tconst entity = useEntity()\n\tconst selectedEntity = entity.getEntity({ field })\n\tconst entityExists = selectedEntity.existsOnServer || selectedEntity.hasUnpersistedChanges\n\tconst entitiesArr = useMemo(() => entityExists ? [selectedEntity] : [], [entityExists, selectedEntity])\n\n\tconst handleSelect = useReferentiallyStableCallback<SelectHandler>((selected, action = 'toggle') => {\n\t\tif (action === 'toggle') {\n\t\t\taction = selected.id === selectedEntity.id ? 'unselect' : 'select'\n\t\t}\n\t\tif (action === 'unselect') {\n\t\t\tentity.disconnectEntityAtField({ field })\n\t\t\tonUnselect?.(selected)\n\t\t} else if (action === 'select') {\n\t\t\tentity.connectEntityAtField({ field }, selected)\n\t\t\tonSelect?.(selected)\n\t\t}\n\t})\n\tconst isSelected = useCallback((entity: EntityAccessor) => entity.id === selectedEntity.id, [selectedEntity.id])\n\n\treturn (\n\t\t<SelectCurrentEntitiesContext.Provider value={entitiesArr}>\n\t\t\t<SelectIsSelectedContext.Provider value={isSelected}>\n\t\t\t\t<SelectHandleSelectContext.Provider value={handleSelect}>\n\t\t\t\t\t<SelectOptionsContext.Provider value={options}>\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</SelectOptionsContext.Provider>\n\t\t\t\t</SelectHandleSelectContext.Provider>\n\t\t\t</SelectIsSelectedContext.Provider>\n\t\t</SelectCurrentEntitiesContext.Provider>\n\t)\n}, ({ field, children }) => {\n\treturn (\n\t\t<HasOne field={field}>\n\t\t\t{children}\n\t\t</HasOne>\n\t)\n})\n\n"],"names":["entity","this"],"mappings":";;;;;AAca,MAAA,SAAS,UAAU,CAAC,EAAE,OAAO,UAAU,YAAY,UAAU,cAA2B;AACpG,QAAM,SAAS;AACf,QAAM,iBAAiB,OAAO,UAAU,EAAE,MAAO,CAAA;AAC3C,QAAA,eAAe,eAAe,kBAAkB,eAAe;AACrE,QAAM,cAAc,QAAQ,MAAM,eAAe,CAAC,cAAc,IAAI,CAAA,GAAI,CAAC,cAAc,cAAc,CAAC;AAEtG,QAAM,eAAe,+BAA8C,CAAC,UAAU,SAAS,aAAa;AACnG,QAAI,WAAW,UAAU;AACxB,eAAS,SAAS,OAAO,eAAe,KAAK,aAAa;AAAA,IAC3D;AACA,QAAI,WAAW,YAAY;AACnB,aAAA,wBAAwB,EAAE,MAAA,CAAO;AACxC,mBAAa,QAAQ;AAAA,IAAA,WACX,WAAW,UAAU;AAC/B,aAAO,qBAAqB,EAAE,MAAM,GAAG,QAAQ;AAC/C,iBAAW,QAAQ;AAAA,IACpB;AAAA,EAAA,CACA;AACK,QAAA,aAAa,YAAY,CAACA,YAA2BA,QAAO,OAAO,eAAe,IAAI,CAAC,eAAe,EAAE,CAAC;AAG9G,SAAA,uBAAC,6BAA6B,UAA7B,EAAsC,OAAO,aAC7C,UAAC,uBAAA,wBAAwB,UAAxB,EAAiC,OAAO,YACxC,iCAAC,0BAA0B,UAA1B,EAAmC,OAAO,cAC1C,UAAA,uBAAC,qBAAqB,UAArB,EAA8B,OAAO,SACpC,SADF,GAAA,QAAA,OAAA;AAAA,IAAA,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,cAAA;AAAA,EAAA,GAAAC,MAEA,EAHD,GAAA,QAAA,OAAA;AAAA,IAAA,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,cAAA;AAAA,EAAA,GAAAA,MAIA,EALD,GAAA,QAAA,OAAA;AAAA,IAAA,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,cAAA;AAAA,EAAA,GAAAA,MAMA,EAPD,GAAA,QAAA,OAAA;AAAA,IAAA,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,cAAA;AAAA,EAQA,GAAAA,MAAA;AAEF,GAAG,CAAC,EAAE,OAAO,eAAe;AAE1B,SAAA,uBAAC,QAAO,EAAA,OACN,YADF,QAAA,OAAA;AAAA,IAAA,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,cAAA;AAAA,EAEA,GAAAA,MAAA;AAEF,CAAC;"}
+{"version":3,"file":"Select.js","sources":["../../../src/components/Select.tsx"],"sourcesContent":["import React, { ReactNode, useCallback, useMemo } from 'react'\nimport { SelectCurrentEntitiesContext, SelectHandler, SelectHandleSelectContext, SelectIsSelectedContext, SelectOptionsContext, SelectOptionsFilterContext } from '../contexts'\nimport { Component, EntityAccessor, HasOne, SugaredQualifiedEntityList, SugaredRelativeSingleEntity, useEntity } from '@contember/react-binding'\nimport { useReferentiallyStableCallback } from '@contember/react-utils'\nimport { SelectEvents } from '../types'\nimport { SelectFilterFieldProps, useSelectFilter } from '../hooks'\n\nexport type SelectProps =\n\t& {\n\t\tchildren: ReactNode\n\t\tfield: SugaredRelativeSingleEntity['field']\n\t\toptions?: SugaredQualifiedEntityList['entities']\n\t}\n\t& SelectFilterFieldProps\n\t& SelectEvents\n\nexport const Select = Component(({ field, children, onUnselect, onSelect, options, filterField }: SelectProps) => {\n\tconst entity = useEntity()\n\tconst selectedEntity = entity.getEntity({ field })\n\toptions ??= selectedEntity.name\n\tconst filter = useSelectFilter({ filterField, marker: selectedEntity.getMarker() })\n\n\tconst entityExists = selectedEntity.existsOnServer || selectedEntity.hasUnpersistedChanges\n\tconst entitiesArr = useMemo(() => entityExists ? [selectedEntity] : [], [entityExists, selectedEntity])\n\n\tconst handleSelect = useReferentiallyStableCallback<SelectHandler>((selected, action = 'toggle') => {\n\t\tif (action === 'toggle') {\n\t\t\taction = selected.id === selectedEntity.id ? 'unselect' : 'select'\n\t\t}\n\t\tif (action === 'unselect') {\n\t\t\tentity.disconnectEntityAtField({ field })\n\t\t\tonUnselect?.(selected)\n\t\t} else if (action === 'select') {\n\t\t\tentity.connectEntityAtField({ field }, selected)\n\t\t\tonSelect?.(selected)\n\t\t}\n\t})\n\tconst isSelected = useCallback((entity: EntityAccessor) => entity.id === selectedEntity.id, [selectedEntity.id])\n\n\treturn (\n\t\t<SelectCurrentEntitiesContext.Provider value={entitiesArr}>\n\t\t\t<SelectIsSelectedContext.Provider value={isSelected}>\n\t\t\t\t<SelectHandleSelectContext.Provider value={handleSelect}>\n\t\t\t\t\t<SelectOptionsContext.Provider value={options}>\n\t\t\t\t\t\t<SelectOptionsFilterContext.Provider value={filter}>\n\t\t\t\t\t\t\t{children}\n\t\t\t\t\t\t</SelectOptionsFilterContext.Provider>\n\t\t\t\t\t</SelectOptionsContext.Provider>\n\t\t\t\t</SelectHandleSelectContext.Provider>\n\t\t\t</SelectIsSelectedContext.Provider>\n\t\t</SelectCurrentEntitiesContext.Provider>\n\t)\n}, ({ field, children }) => {\n\treturn (\n\t\t<HasOne field={field} expectedMutation=\"connectOrDisconnect\">\n\t\t\t{children}\n\t\t</HasOne>\n\t)\n})\n\n"],"names":["entity","this"],"mappings":";;;;;;AAgBa,MAAA,SAAS,UAAU,CAAC,EAAE,OAAO,UAAU,YAAY,UAAU,SAAS,kBAA+B;AACjH,QAAM,SAAS;AACf,QAAM,iBAAiB,OAAO,UAAU,EAAE,MAAO,CAAA;AACjD,wBAAY,eAAe;AACrB,QAAA,SAAS,gBAAgB,EAAE,aAAa,QAAQ,eAAe,aAAa;AAE5E,QAAA,eAAe,eAAe,kBAAkB,eAAe;AACrE,QAAM,cAAc,QAAQ,MAAM,eAAe,CAAC,cAAc,IAAI,CAAA,GAAI,CAAC,cAAc,cAAc,CAAC;AAEtG,QAAM,eAAe,+BAA8C,CAAC,UAAU,SAAS,aAAa;AACnG,QAAI,WAAW,UAAU;AACxB,eAAS,SAAS,OAAO,eAAe,KAAK,aAAa;AAAA,IAC3D;AACA,QAAI,WAAW,YAAY;AACnB,aAAA,wBAAwB,EAAE,MAAA,CAAO;AACxC,mBAAa,QAAQ;AAAA,IAAA,WACX,WAAW,UAAU;AAC/B,aAAO,qBAAqB,EAAE,MAAM,GAAG,QAAQ;AAC/C,iBAAW,QAAQ;AAAA,IACpB;AAAA,EAAA,CACA;AACK,QAAA,aAAa,YAAY,CAACA,YAA2BA,QAAO,OAAO,eAAe,IAAI,CAAC,eAAe,EAAE,CAAC;AAE/G,SACE,uBAAA,6BAA6B,UAA7B,EAAsC,OAAO,aAC7C,UAAC,uBAAA,wBAAwB,UAAxB,EAAiC,OAAO,YACxC,iCAAC,0BAA0B,UAA1B,EAAmC,OAAO,cAC1C,UAAA,uBAAC,qBAAqB,UAArB,EAA8B,OAAO,SACrC,UAAA,uBAAC,2BAA2B,UAA3B,EAAoC,OAAO,QAC1C,YADF,QAAA,OAAA;AAAA,IAAA,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,cAAA;AAAA,EAAA,GAAAC,MAEA,EAHD,GAAA,QAAA,OAAA;AAAA,IAAA,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,cAAA;AAAA,EAAA,GAAAA,MAIA,EALD,GAAA,QAAA,OAAA;AAAA,IAAA,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,cAAA;AAAA,EAAA,GAAAA,MAMA,EAPD,GAAA,QAAA,OAAA;AAAA,IAAA,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,cAAA;AAAA,EAAA,GAAAA,MAQA,EATD,GAAA,QAAA,OAAA;AAAA,IAAA,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,cAAA;AAAA,EAUA,GAAAA,MAAA;AAEF,GAAG,CAAC,EAAE,OAAO,eAAe;AAC3B,SACE,uBAAA,QAAA,EAAO,OAAc,kBAAiB,uBACrC,SADF,GAAA,QAAA,OAAA;AAAA,IAAA,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,cAAA;AAAA,EAEA,GAAAA,MAAA;AAEF,CAAC;"}

package/dist/development/components/SelectDataView.cjs

@@ -1,16 +1,34 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxDevRuntime = require("react/jsx-dev-runtime");
+const react = require("react");
 const contexts = require("../contexts.cjs");
 const reactDataview = require("@contember/react-dataview");
 const SelectDataView = (props) => {
   const handleSelect = contexts.useSelectHandleSelect();
   const entities = contexts.useSelectOptions();
-  return /* @__PURE__ */ jsxDevRuntime.jsxDEV(reactDataview.DataView, { ...props, onSelectHighlighted: handleSelect, entities }, void 0, false, {
-    fileName: "/__w/interface/interface/packages/react-select/src/components/SelectDataView.tsx",
-    lineNumber: 15,
-    columnNumber: 3
-  }, void 0);
+  const filter = contexts.useSelectOptionsFilter();
+  const defaultFilterTypes = react.useMemo(() => filter ? { query: filter } : {}, [filter]);
+  return /* @__PURE__ */ jsxDevRuntime.jsxDEV(
+    reactDataview.DataView,
+    {
+      filterTypes: defaultFilterTypes,
+      ...props,
+      onSelectHighlighted: handleSelect,
+      entities,
+      filteringStateStorage: "null",
+      sortingStateStorage: "null",
+      currentPageStateStorage: "null"
+    },
+    void 0,
+    false,
+    {
+      fileName: "/__w/interface/interface/packages/react-select/src/components/SelectDataView.tsx",
+      lineNumber: 18,
+      columnNumber: 3
+    },
+    void 0
+  );
 };
 exports.SelectDataView = SelectDataView;
 //# sourceMappingURL=SelectDataView.cjs.map

package/dist/development/components/SelectDataView.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SelectDataView.cjs","sources":["../../../src/components/SelectDataView.tsx"],"sourcesContent":["import React, { ReactNode } from 'react'\nimport { useSelectHandleSelect, useSelectOptions } from '../contexts'\nimport { DataViewProps, DataView } from '@contember/react-dataview'\n\nexport type SelectDataViewProps =\n\t& Omit<DataViewProps, 'entities'>\n\t& {\n\t\tchildren: ReactNode\n\t}\n\nexport const SelectDataView = (props: SelectDataViewProps) => {\n\tconst handleSelect = useSelectHandleSelect()\n\tconst entities = useSelectOptions()\n\treturn (\n\t\t<DataView {...props} onSelectHighlighted={handleSelect} entities={entities} />\n\t)\n}\n"],"names":["useSelectHandleSelect","useSelectOptions","DataView","this"],"mappings":";;;;;AAUa,MAAA,iBAAiB,CAAC,UAA+B;AAC7D,QAAM,eAAeA,SAAAA;AACrB,QAAM,WAAWC,SAAAA;AACjB,8CACEC,cAAAA,UAAU,EAAA,GAAG,OAAO,qBAAqB,cAAc,SAAxD,GAAA,QAAA,OAAA;AAAA,IAAA,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,cAAA;AAAA,EAA4E,GAAAC,MAAA;AAE9E;;"}
+{"version":3,"file":"SelectDataView.cjs","sources":["../../../src/components/SelectDataView.tsx"],"sourcesContent":["import React, { ReactNode, useMemo } from 'react'\nimport { useSelectHandleSelect, useSelectOptions, useSelectOptionsFilter } from '../contexts'\nimport { DataViewProps, DataView, DataViewFilterHandlerRegistry } from '@contember/react-dataview'\n\nexport type SelectDataViewProps =\n\t& Omit<DataViewProps, 'entities'>\n\t& {\n\t\tchildren: ReactNode\n\t}\n\nexport const SelectDataView = (props: SelectDataViewProps) => {\n\tconst handleSelect = useSelectHandleSelect()\n\tconst entities = useSelectOptions()\n\tconst filter = useSelectOptionsFilter()\n\tconst defaultFilterTypes = useMemo((): DataViewFilterHandlerRegistry => filter ? { query: filter } : {}, [filter])\n\n\treturn (\n\t\t<DataView\n\t\t\tfilterTypes={defaultFilterTypes}\n\t\t\t{...props}\n\t\t\tonSelectHighlighted={handleSelect}\n\t\t\tentities={entities}\n\t\t\tfilteringStateStorage=\"null\"\n\t\t\tsortingStateStorage=\"null\"\n\t\t\tcurrentPageStateStorage=\"null\"\n\t\t/>\n\t)\n}\n"],"names":["useSelectHandleSelect","useSelectOptions","useSelectOptionsFilter","useMemo","jsxDEV","DataView","this"],"mappings":";;;;;;AAUa,MAAA,iBAAiB,CAAC,UAA+B;AAC7D,QAAM,eAAeA,SAAAA;AACrB,QAAM,WAAWC,SAAAA;AACjB,QAAM,SAASC,SAAAA;AACf,QAAM,qBAAqBC,MAAAA,QAAQ,MAAqC,SAAS,EAAE,OAAO,OAAO,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC;AAGhH,SAAAC,8BAAA;AAAA,IAACC,cAAA;AAAA,IAAA;AAAA,MACA,aAAa;AAAA,MACZ,GAAG;AAAA,MACJ,qBAAqB;AAAA,MACrB;AAAA,MACA,uBAAsB;AAAA,MACtB,qBAAoB;AAAA,MACpB,yBAAwB;AAAA,IAAA;AAAA,IAPzB;AAAA,IAAA;AAAA,IAAA;AAAA,MAAA,UAAA;AAAA,MAAA,YAAA;AAAA,MAAA,cAAA;AAAA,IAAA;AAAA,IAAAC;AAAAA,EAAA;AAUF;;"}

package/dist/development/components/SelectDataView.js

@@ -1,14 +1,32 @@
 import { jsxDEV } from "react/jsx-dev-runtime";
-import { useSelectHandleSelect, useSelectOptions } from "../contexts.js";
+import { useMemo } from "react";
+import { useSelectHandleSelect, useSelectOptions, useSelectOptionsFilter } from "../contexts.js";
 import { DataView } from "@contember/react-dataview";
 const SelectDataView = (props) => {
   const handleSelect = useSelectHandleSelect();
   const entities = useSelectOptions();
-  return /* @__PURE__ */ jsxDEV(DataView, { ...props, onSelectHighlighted: handleSelect, entities }, void 0, false, {
-    fileName: "/__w/interface/interface/packages/react-select/src/components/SelectDataView.tsx",
-    lineNumber: 15,
-    columnNumber: 3
-  }, void 0);
+  const filter = useSelectOptionsFilter();
+  const defaultFilterTypes = useMemo(() => filter ? { query: filter } : {}, [filter]);
+  return /* @__PURE__ */ jsxDEV(
+    DataView,
+    {
+      filterTypes: defaultFilterTypes,
+      ...props,
+      onSelectHighlighted: handleSelect,
+      entities,
+      filteringStateStorage: "null",
+      sortingStateStorage: "null",
+      currentPageStateStorage: "null"
+    },
+    void 0,
+    false,
+    {
+      fileName: "/__w/interface/interface/packages/react-select/src/components/SelectDataView.tsx",
+      lineNumber: 18,
+      columnNumber: 3
+    },
+    void 0
+  );
 };
 export {
   SelectDataView

package/dist/development/components/SelectDataView.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectDataView.js","sources":["../../../src/components/SelectDataView.tsx"],"sourcesContent":["import React, { ReactNode } from 'react'\nimport { useSelectHandleSelect, useSelectOptions } from '../contexts'\nimport { DataViewProps, DataView } from '@contember/react-dataview'\n\nexport type SelectDataViewProps =\n\t& Omit<DataViewProps, 'entities'>\n\t& {\n\t\tchildren: ReactNode\n\t}\n\nexport const SelectDataView = (props: SelectDataViewProps) => {\n\tconst handleSelect = useSelectHandleSelect()\n\tconst entities = useSelectOptions()\n\treturn (\n\t\t<DataView {...props} onSelectHighlighted={handleSelect} entities={entities} />\n\t)\n}\n"],"names":["this"],"mappings":";;;AAUa,MAAA,iBAAiB,CAAC,UAA+B;AAC7D,QAAM,eAAe;AACrB,QAAM,WAAW;AACjB,gCACE,UAAU,EAAA,GAAG,OAAO,qBAAqB,cAAc,SAAxD,GAAA,QAAA,OAAA;AAAA,IAAA,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,cAAA;AAAA,EAA4E,GAAAA,MAAA;AAE9E;"}
+{"version":3,"file":"SelectDataView.js","sources":["../../../src/components/SelectDataView.tsx"],"sourcesContent":["import React, { ReactNode, useMemo } from 'react'\nimport { useSelectHandleSelect, useSelectOptions, useSelectOptionsFilter } from '../contexts'\nimport { DataViewProps, DataView, DataViewFilterHandlerRegistry } from '@contember/react-dataview'\n\nexport type SelectDataViewProps =\n\t& Omit<DataViewProps, 'entities'>\n\t& {\n\t\tchildren: ReactNode\n\t}\n\nexport const SelectDataView = (props: SelectDataViewProps) => {\n\tconst handleSelect = useSelectHandleSelect()\n\tconst entities = useSelectOptions()\n\tconst filter = useSelectOptionsFilter()\n\tconst defaultFilterTypes = useMemo((): DataViewFilterHandlerRegistry => filter ? { query: filter } : {}, [filter])\n\n\treturn (\n\t\t<DataView\n\t\t\tfilterTypes={defaultFilterTypes}\n\t\t\t{...props}\n\t\t\tonSelectHighlighted={handleSelect}\n\t\t\tentities={entities}\n\t\t\tfilteringStateStorage=\"null\"\n\t\t\tsortingStateStorage=\"null\"\n\t\t\tcurrentPageStateStorage=\"null\"\n\t\t/>\n\t)\n}\n"],"names":["this"],"mappings":";;;;AAUa,MAAA,iBAAiB,CAAC,UAA+B;AAC7D,QAAM,eAAe;AACrB,QAAM,WAAW;AACjB,QAAM,SAAS;AACf,QAAM,qBAAqB,QAAQ,MAAqC,SAAS,EAAE,OAAO,OAAO,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC;AAGhH,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,aAAa;AAAA,MACZ,GAAG;AAAA,MACJ,qBAAqB;AAAA,MACrB;AAAA,MACA,uBAAsB;AAAA,MACtB,qBAAoB;AAAA,MACpB,yBAAwB;AAAA,IAAA;AAAA,IAPzB;AAAA,IAAA;AAAA,IAAA;AAAA,MAAA,UAAA;AAAA,MAAA,YAAA;AAAA,MAAA,cAAA;AAAA,IAAA;AAAA,IAAAA;AAAAA,EAAA;AAUF;"}

package/dist/development/components/SelectItemTrigger.cjs

@@ -8,12 +8,14 @@ const reactBinding = require("@contember/react-binding");
 const SelectItemTrigger = react.forwardRef(({ action, ...props }, ref) => {
   const handleSelect = contexts.useSelectHandleSelect();
   const entity = reactBinding.useEntity();
-  const onClick = react.useCallback(() => {
+  const onClickProp = props.onClick;
+  const onClick = react.useCallback((e) => {
     handleSelect?.(entity, action);
-  }, [action, entity, handleSelect]);
-  return /* @__PURE__ */ jsxDevRuntime.jsxDEV(reactSlot.Slot, { onClick, ...props, ref }, void 0, false, {
+    onClickProp?.(e);
+  }, [action, entity, handleSelect, onClickProp]);
+  return /* @__PURE__ */ jsxDevRuntime.jsxDEV(reactSlot.Slot, { ...props, onClick, ref }, void 0, false, {
     fileName: "/__w/interface/interface/packages/react-select/src/components/SelectItemTrigger.tsx",
-    lineNumber: 18,
+    lineNumber: 20,
     columnNumber: 9
   }, void 0);
 });

package/dist/development/components/SelectItemTrigger.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SelectItemTrigger.cjs","sources":["../../../src/components/SelectItemTrigger.tsx"],"sourcesContent":["import React, { forwardRef, ReactElement, useCallback } from 'react'\nimport { useSelectHandleSelect } from '../contexts'\nimport { Slot } from '@radix-ui/react-slot'\nimport { useEntity } from '@contember/react-binding'\n\nexport type SelectItemTriggerProps = {\n\tchildren: ReactElement\n\taction?: 'select' | 'unselect' | 'toggle'\n}\n\nexport const SelectItemTrigger = forwardRef<HTMLElement, SelectItemTriggerProps>(({ action, ...props }: SelectItemTriggerProps, ref) => {\n\tconst handleSelect = useSelectHandleSelect()\n\tconst entity = useEntity()\n\tconst onClick = useCallback(() => {\n\t\thandleSelect?.(entity, action)\n\t}, [action, entity, handleSelect])\n\n\treturn <Slot onClick={onClick} {...props} ref={ref} />\n})\n"],"names":["forwardRef","useSelectHandleSelect","useEntity","useCallback","jsxDEV","Slot","this"],"mappings":";;;;;;;AAUa,MAAA,oBAAoBA,iBAAgD,CAAC,EAAE,QAAQ,GAAG,SAAiC,QAAQ;AACvI,QAAM,eAAeC,SAAAA;AACrB,QAAM,SAASC,aAAAA;AACT,QAAA,UAAUC,MAAAA,YAAY,MAAM;AACjC,mBAAe,QAAQ,MAAM;AAAA,EAC3B,GAAA,CAAC,QAAQ,QAAQ,YAAY,CAAC;AAEjC,SAAQC,8BAAA,OAAAC,gBAAA,EAAK,SAAmB,GAAG,OAAO,IAAnC,GAAA,QAAA,OAAA;AAAA,IAAA,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,cAAA;AAAA,EAA6C,GAAAC,MAAA;AACrD,CAAC;;"}
+{"version":3,"file":"SelectItemTrigger.cjs","sources":["../../../src/components/SelectItemTrigger.tsx"],"sourcesContent":["import React, { forwardRef, ReactElement, useCallback } from 'react'\nimport { useSelectHandleSelect } from '../contexts'\nimport { Slot } from '@radix-ui/react-slot'\nimport { useEntity } from '@contember/react-binding'\n\nexport type SelectItemTriggerProps = {\n\tchildren: ReactElement\n\taction?: 'select' | 'unselect' | 'toggle'\n\tonClick?: (event: React.MouseEvent<HTMLElement>) => void\n}\n\nexport const SelectItemTrigger = forwardRef<HTMLElement, SelectItemTriggerProps>(({ action, ...props }: SelectItemTriggerProps, ref) => {\n\tconst handleSelect = useSelectHandleSelect()\n\tconst entity = useEntity()\n\tconst onClickProp = props.onClick\n\tconst onClick = useCallback((e: React.MouseEvent<HTMLElement>) => {\n\t\thandleSelect?.(entity, action)\n\t\tonClickProp?.(e)\n\t}, [action, entity, handleSelect, onClickProp])\n\treturn <Slot {...props} onClick={onClick}  ref={ref} />\n})\n"],"names":["forwardRef","useSelectHandleSelect","useEntity","useCallback","jsxDEV","Slot","this"],"mappings":";;;;;;;AAWa,MAAA,oBAAoBA,iBAAgD,CAAC,EAAE,QAAQ,GAAG,SAAiC,QAAQ;AACvI,QAAM,eAAeC,SAAAA;AACrB,QAAM,SAASC,aAAAA;AACf,QAAM,cAAc,MAAM;AACpB,QAAA,UAAUC,kBAAY,CAAC,MAAqC;AACjE,mBAAe,QAAQ,MAAM;AAC7B,kBAAc,CAAC;AAAA,KACb,CAAC,QAAQ,QAAQ,cAAc,WAAW,CAAC;AAC9C,SAAQC,8BAAA,OAAAC,gBAAA,EAAM,GAAG,OAAO,SAAmB,IAApC,GAAA,QAAA,OAAA;AAAA,IAAA,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,cAAA;AAAA,EAA8C,GAAAC,MAAA;AACtD,CAAC;;"}

package/dist/development/components/SelectItemTrigger.js

@@ -6,12 +6,14 @@ import { useEntity } from "@contember/react-binding";
 const SelectItemTrigger = forwardRef(({ action, ...props }, ref) => {
   const handleSelect = useSelectHandleSelect();
   const entity = useEntity();
-  const onClick = useCallback(() => {
+  const onClickProp = props.onClick;
+  const onClick = useCallback((e) => {
     handleSelect?.(entity, action);
-  }, [action, entity, handleSelect]);
-  return /* @__PURE__ */ jsxDEV(Slot, { onClick, ...props, ref }, void 0, false, {
+    onClickProp?.(e);
+  }, [action, entity, handleSelect, onClickProp]);
+  return /* @__PURE__ */ jsxDEV(Slot, { ...props, onClick, ref }, void 0, false, {
     fileName: "/__w/interface/interface/packages/react-select/src/components/SelectItemTrigger.tsx",
-    lineNumber: 18,
+    lineNumber: 20,
     columnNumber: 9
   }, void 0);
 });

package/dist/development/components/SelectItemTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectItemTrigger.js","sources":["../../../src/components/SelectItemTrigger.tsx"],"sourcesContent":["import React, { forwardRef, ReactElement, useCallback } from 'react'\nimport { useSelectHandleSelect } from '../contexts'\nimport { Slot } from '@radix-ui/react-slot'\nimport { useEntity } from '@contember/react-binding'\n\nexport type SelectItemTriggerProps = {\n\tchildren: ReactElement\n\taction?: 'select' | 'unselect' | 'toggle'\n}\n\nexport const SelectItemTrigger = forwardRef<HTMLElement, SelectItemTriggerProps>(({ action, ...props }: SelectItemTriggerProps, ref) => {\n\tconst handleSelect = useSelectHandleSelect()\n\tconst entity = useEntity()\n\tconst onClick = useCallback(() => {\n\t\thandleSelect?.(entity, action)\n\t}, [action, entity, handleSelect])\n\n\treturn <Slot onClick={onClick} {...props} ref={ref} />\n})\n"],"names":["this"],"mappings":";;;;;AAUa,MAAA,oBAAoB,WAAgD,CAAC,EAAE,QAAQ,GAAG,SAAiC,QAAQ;AACvI,QAAM,eAAe;AACrB,QAAM,SAAS;AACT,QAAA,UAAU,YAAY,MAAM;AACjC,mBAAe,QAAQ,MAAM;AAAA,EAC3B,GAAA,CAAC,QAAQ,QAAQ,YAAY,CAAC;AAEjC,SAAQ,uBAAA,MAAA,EAAK,SAAmB,GAAG,OAAO,IAAnC,GAAA,QAAA,OAAA;AAAA,IAAA,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,cAAA;AAAA,EAA6C,GAAAA,MAAA;AACrD,CAAC;"}
+{"version":3,"file":"SelectItemTrigger.js","sources":["../../../src/components/SelectItemTrigger.tsx"],"sourcesContent":["import React, { forwardRef, ReactElement, useCallback } from 'react'\nimport { useSelectHandleSelect } from '../contexts'\nimport { Slot } from '@radix-ui/react-slot'\nimport { useEntity } from '@contember/react-binding'\n\nexport type SelectItemTriggerProps = {\n\tchildren: ReactElement\n\taction?: 'select' | 'unselect' | 'toggle'\n\tonClick?: (event: React.MouseEvent<HTMLElement>) => void\n}\n\nexport const SelectItemTrigger = forwardRef<HTMLElement, SelectItemTriggerProps>(({ action, ...props }: SelectItemTriggerProps, ref) => {\n\tconst handleSelect = useSelectHandleSelect()\n\tconst entity = useEntity()\n\tconst onClickProp = props.onClick\n\tconst onClick = useCallback((e: React.MouseEvent<HTMLElement>) => {\n\t\thandleSelect?.(entity, action)\n\t\tonClickProp?.(e)\n\t}, [action, entity, handleSelect, onClickProp])\n\treturn <Slot {...props} onClick={onClick}  ref={ref} />\n})\n"],"names":["this"],"mappings":";;;;;AAWa,MAAA,oBAAoB,WAAgD,CAAC,EAAE,QAAQ,GAAG,SAAiC,QAAQ;AACvI,QAAM,eAAe;AACrB,QAAM,SAAS;AACf,QAAM,cAAc,MAAM;AACpB,QAAA,UAAU,YAAY,CAAC,MAAqC;AACjE,mBAAe,QAAQ,MAAM;AAC7B,kBAAc,CAAC;AAAA,KACb,CAAC,QAAQ,QAAQ,cAAc,WAAW,CAAC;AAC9C,SAAQ,uBAAA,MAAA,EAAM,GAAG,OAAO,SAAmB,IAApC,GAAA,QAAA,OAAA;AAAA,IAAA,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,cAAA;AAAA,EAA8C,GAAAA,MAAA;AACtD,CAAC;"}

package/dist/development/components/SortableMultiSelect.cjs

@@ -6,9 +6,25 @@ const contexts = require("../contexts.cjs");
 const reactBinding = require("@contember/react-binding");
 const reactUtils = require("@contember/react-utils");
 const reactRepeater = require("@contember/react-repeater");
-const SortableMultiSelect = reactBinding.Component(({ field, children, sortableBy, connectAt, options, onSelect, onUnselect }) => {
+const useSelectFilter = require("../hooks/useSelectFilter.cjs");
+const SortableMultiSelect = reactBinding.Component(({ field, children, sortableBy, connectAt, options, onSelect, onUnselect, filterField }) => {
   const list = reactBinding.useEntityList({ field });
   const entitiesArr = react.useMemo(() => Array.from(list), [list]);
+  const optionsMarker = react.useMemo(() => {
+    const desugared = reactBinding.QueryLanguage.desugarRelativeSingleEntity({ field: connectAt }, list.environment);
+    let marker = list.getMarker();
+    for (let relation of desugared.hasOneRelationPath) {
+      const placeholder = reactBinding.PlaceholderGenerator.getHasOneRelationPlaceholder(relation);
+      const relationMarker = marker.fields.markers.get(placeholder);
+      if (!relationMarker || relationMarker instanceof reactBinding.FieldMarker) {
+        throw new Error("Invalid marker");
+      }
+      marker = relationMarker;
+    }
+    return marker;
+  }, [connectAt, list]);
+  options ?? (options = optionsMarker.environment.getSubTreeNode().entity.name);
+  const filter = useSelectFilter.useSelectFilter({ filterField, marker: optionsMarker });
   const selectedEntities = react.useMemo(() => Array.from(list).map((it) => it.getEntity({ field: connectAt }).id), [connectAt, list]);
   const handler = reactUtils.useReferentiallyStableCallback((entity, action = "toggle") => {
     const isSelected2 = selectedEntities.includes(entity.id);
@@ -28,35 +44,39 @@ const SortableMultiSelect = reactBinding.Component(({ field, children, sortableB
   const isSelected = react.useCallback((entity) => {
     return selectedEntities.includes(entity.id);
   }, [selectedEntities]);
-  return /* @__PURE__ */ jsxDevRuntime.jsxDEV(reactRepeater.Repeater, { field, sortableBy, initialEntityCount: 0, children: /* @__PURE__ */ jsxDevRuntime.jsxDEV(contexts.SelectCurrentEntitiesContext.Provider, { value: entitiesArr, children: /* @__PURE__ */ jsxDevRuntime.jsxDEV(contexts.SelectIsSelectedContext.Provider, { value: isSelected, children: /* @__PURE__ */ jsxDevRuntime.jsxDEV(contexts.SelectHandleSelectContext.Provider, { value: handler, children: /* @__PURE__ */ jsxDevRuntime.jsxDEV(contexts.SelectOptionsContext.Provider, { value: options, children }, void 0, false, {
+  return /* @__PURE__ */ jsxDevRuntime.jsxDEV(reactRepeater.Repeater, { field, sortableBy, initialEntityCount: 0, children: /* @__PURE__ */ jsxDevRuntime.jsxDEV(contexts.SelectCurrentEntitiesContext.Provider, { value: entitiesArr, children: /* @__PURE__ */ jsxDevRuntime.jsxDEV(contexts.SelectIsSelectedContext.Provider, { value: isSelected, children: /* @__PURE__ */ jsxDevRuntime.jsxDEV(contexts.SelectHandleSelectContext.Provider, { value: handler, children: /* @__PURE__ */ jsxDevRuntime.jsxDEV(contexts.SelectOptionsContext.Provider, { value: options, children: /* @__PURE__ */ jsxDevRuntime.jsxDEV(contexts.SelectOptionsFilterContext.Provider, { value: filter, children }, void 0, false, {
+    fileName: "/__w/interface/interface/packages/react-select/src/components/SortableMultiSelect.tsx",
+    lineNumber: 82,
+    columnNumber: 8
+  }, void 0) }, void 0, false, {
     fileName: "/__w/interface/interface/packages/react-select/src/components/SortableMultiSelect.tsx",
-    lineNumber: 48,
+    lineNumber: 81,
     columnNumber: 7
   }, void 0) }, void 0, false, {
     fileName: "/__w/interface/interface/packages/react-select/src/components/SortableMultiSelect.tsx",
-    lineNumber: 47,
+    lineNumber: 80,
     columnNumber: 6
   }, void 0) }, void 0, false, {
     fileName: "/__w/interface/interface/packages/react-select/src/components/SortableMultiSelect.tsx",
-    lineNumber: 46,
+    lineNumber: 79,
     columnNumber: 5
   }, void 0) }, void 0, false, {
     fileName: "/__w/interface/interface/packages/react-select/src/components/SortableMultiSelect.tsx",
-    lineNumber: 45,
+    lineNumber: 78,
     columnNumber: 4
   }, void 0) }, void 0, false, {
     fileName: "/__w/interface/interface/packages/react-select/src/components/SortableMultiSelect.tsx",
-    lineNumber: 44,
+    lineNumber: 77,
     columnNumber: 3
   }, void 0);
 }, ({ children, field, sortableBy, connectAt }) => {
-  return /* @__PURE__ */ jsxDevRuntime.jsxDEV(reactRepeater.Repeater, { field, sortableBy, initialEntityCount: 0, children: /* @__PURE__ */ jsxDevRuntime.jsxDEV(reactBinding.HasOne, { field: connectAt, children }, void 0, false, {
+  return /* @__PURE__ */ jsxDevRuntime.jsxDEV(reactRepeater.Repeater, { field, sortableBy, initialEntityCount: 0, children: /* @__PURE__ */ jsxDevRuntime.jsxDEV(reactBinding.HasOne, { field: connectAt, expectedMutation: "connectOrDisconnect", children }, void 0, false, {
     fileName: "/__w/interface/interface/packages/react-select/src/components/SortableMultiSelect.tsx",
-    lineNumber: 59,
+    lineNumber: 94,
     columnNumber: 4
   }, void 0) }, void 0, false, {
     fileName: "/__w/interface/interface/packages/react-select/src/components/SortableMultiSelect.tsx",
-    lineNumber: 58,
+    lineNumber: 93,
     columnNumber: 3
   }, void 0);
 });

package/dist/development/components/SortableMultiSelect.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SortableMultiSelect.cjs","sources":["../../../src/components/SortableMultiSelect.tsx"],"sourcesContent":["import React, { ReactNode, useCallback, useMemo } from 'react'\nimport { SelectCurrentEntitiesContext, SelectHandler, SelectHandleSelectContext, SelectIsSelectedContext, SelectOptionsContext } from '../contexts'\nimport { Component, EntityAccessor, HasOne, SugaredQualifiedEntityList, SugaredRelativeEntityList, SugaredRelativeSingleEntity, SugaredRelativeSingleField, useEntityList } from '@contember/react-binding'\nimport { useReferentiallyStableCallback } from '@contember/react-utils'\nimport { Repeater } from '@contember/react-repeater'\nimport { SelectEvents } from '../types'\n\nexport type SortableMultiSelectProps =\n\t& {\n\t\tchildren: ReactNode\n\t\tfield: SugaredRelativeEntityList['field']\n\t\toptions: SugaredQualifiedEntityList['entities']\n\t\tsortableBy: SugaredRelativeSingleField['field']\n\t\tconnectAt: SugaredRelativeSingleEntity['field']\n\t}\n\t& SelectEvents\n\nexport const SortableMultiSelect = Component(({ field, children, sortableBy, connectAt, options, onSelect, onUnselect }: SortableMultiSelectProps) => {\n\tconst list = useEntityList({ field })\n\tconst entitiesArr = useMemo(() => Array.from(list), [list])\n\n\tconst selectedEntities = useMemo(() => Array.from(list).map(it => it.getEntity({ field: connectAt }).id), [connectAt, list])\n\n\tconst handler = useReferentiallyStableCallback<SelectHandler>((entity, action = 'toggle') => {\n\t\tconst isSelected = selectedEntities.includes(entity.id)\n\t\tif (action === 'toggle') {\n\t\t\taction = isSelected ? 'unselect' : 'select'\n\t\t}\n\t\tif (action === 'unselect' && isSelected) {\n\t\t\tArray.from(list).find(it => it.getEntity({ field: connectAt }).id === entity.id)?.deleteEntity()\n\t\t\tonUnselect?.(entity)\n\t\t} else if (action === 'select' && !isSelected) {\n\t\t\tlist.createNewEntity(getEntity => {\n\t\t\t\tgetEntity().connectEntityAtField({ field: connectAt }, entity)\n\t\t\t\tonSelect?.(entity)\n\t\t\t})\n\t\t}\n\t})\n\tconst isSelected = useCallback((entity: EntityAccessor) => {\n\t\treturn selectedEntities.includes(entity.id)\n\t}, [selectedEntities])\n\n\treturn (\n\t\t<Repeater field={field} sortableBy={sortableBy} initialEntityCount={0}>\n\t\t\t<SelectCurrentEntitiesContext.Provider value={entitiesArr}>\n\t\t\t\t<SelectIsSelectedContext.Provider value={isSelected}>\n\t\t\t\t\t<SelectHandleSelectContext.Provider value={handler}>\n\t\t\t\t\t\t<SelectOptionsContext.Provider value={options}>\n\t\t\t\t\t\t\t{children}\n\t\t\t\t\t\t</SelectOptionsContext.Provider>\n\t\t\t\t\t</SelectHandleSelectContext.Provider>\n\t\t\t\t</SelectIsSelectedContext.Provider>\n\t\t\t</SelectCurrentEntitiesContext.Provider>\n\t\t</Repeater>\n\t)\n}, ({ children, field, sortableBy, connectAt }) => {\n\treturn (\n\t\t<Repeater field={field} sortableBy={sortableBy} initialEntityCount={0}>\n\t\t\t<HasOne field={connectAt}>\n\t\t\t\t{children}\n\t\t\t</HasOne>\n\t\t</Repeater>\n\t)\n})\n\n"],"names":["Component","useEntityList","useMemo","useReferentiallyStableCallback","isSelected","useCallback","jsxDEV","Repeater","SelectCurrentEntitiesContext","SelectIsSelectedContext","SelectHandleSelectContext","SelectOptionsContext","this","HasOne"],"mappings":";;;;;;;;AAiBa,MAAA,sBAAsBA,aAAU,UAAA,CAAC,EAAE,OAAO,UAAU,YAAY,WAAW,SAAS,UAAU,iBAA2C;AACrJ,QAAM,OAAOC,aAAAA,cAAc,EAAE,MAAO,CAAA;AAC9B,QAAA,cAAcC,cAAQ,MAAM,MAAM,KAAK,IAAI,GAAG,CAAC,IAAI,CAAC;AAEpD,QAAA,mBAAmBA,cAAQ,MAAM,MAAM,KAAK,IAAI,EAAE,IAAI,CAAM,OAAA,GAAG,UAAU,EAAE,OAAO,WAAW,EAAE,EAAE,GAAG,CAAC,WAAW,IAAI,CAAC;AAE3H,QAAM,UAAUC,WAAA,+BAA8C,CAAC,QAAQ,SAAS,aAAa;AAC5F,UAAMC,cAAa,iBAAiB,SAAS,OAAO,EAAE;AACtD,QAAI,WAAW,UAAU;AACxB,eAASA,cAAa,aAAa;AAAA,IACpC;AACI,QAAA,WAAW,cAAcA,aAAY;AACxC,YAAM,KAAK,IAAI,EAAE,KAAK,CAAA,OAAM,GAAG,UAAU,EAAE,OAAO,UAAW,CAAA,EAAE,OAAO,OAAO,EAAE,GAAG;AAClF,mBAAa,MAAM;AAAA,IACT,WAAA,WAAW,YAAY,CAACA,aAAY;AAC9C,WAAK,gBAAgB,CAAa,cAAA;AACjC,kBAAA,EAAY,qBAAqB,EAAE,OAAO,UAAA,GAAa,MAAM;AAC7D,mBAAW,MAAM;AAAA,MAAA,CACjB;AAAA,IACF;AAAA,EAAA,CACA;AACK,QAAA,aAAaC,kBAAY,CAAC,WAA2B;AACnD,WAAA,iBAAiB,SAAS,OAAO,EAAE;AAAA,EAAA,GACxC,CAAC,gBAAgB,CAAC;AAErB,SACEC,8BAAAA,OAAAC,cAAAA,UAAA,EAAS,OAAc,YAAwB,oBAAoB,GACnE,UAACD,8BAAAA,OAAAE,SAAAA,6BAA6B,UAA7B,EAAsC,OAAO,aAC7C,+CAACC,SAAwB,wBAAA,UAAxB,EAAiC,OAAO,YACxC,UAAAH,qCAACI,SAAAA,0BAA0B,UAA1B,EAAmC,OAAO,SAC1C,UAAAJ,8BAAA,OAACK,8BAAqB,UAArB,EAA8B,OAAO,SACpC,YADF,QAAA,OAAA;AAAA,IAAA,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,cAAA;AAAA,EAAA,GAAAC,MAEA,EAHD,GAAA,QAAA,OAAA;AAAA,IAAA,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,cAAA;AAAA,EAAA,GAAAA,MAIA,EALD,GAAA,QAAA,OAAA;AAAA,IAAA,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,cAAA;AAAA,EAAA,GAAAA,MAMA,EAPD,GAAA,QAAA,OAAA;AAAA,IAAA,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,cAAA;AAAA,EAAA,GAAAA,MAQA,EATD,GAAA,QAAA,OAAA;AAAA,IAAA,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,cAAA;AAAA,EAUA,GAAAA,MAAA;AAEF,GAAG,CAAC,EAAE,UAAU,OAAO,YAAY,gBAAgB;AAEjD,SAAAN,8BAAAA,OAACC,cAAAA,UAAS,EAAA,OAAc,YAAwB,oBAAoB,GACnE,UAACD,8BAAA,OAAAO,aAAA,QAAA,EAAO,OAAO,WACb,SADF,GAAA,QAAA,OAAA;AAAA,IAAA,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,cAAA;AAAA,EAAA,GAAAD,MAEA,EAHD,GAAA,QAAA,OAAA;AAAA,IAAA,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,cAAA;AAAA,EAIA,GAAAA,MAAA;AAEF,CAAC;;"}
+{"version":3,"file":"SortableMultiSelect.cjs","sources":["../../../src/components/SortableMultiSelect.tsx"],"sourcesContent":["import React, { ReactNode, useCallback, useMemo } from 'react'\nimport { SelectCurrentEntitiesContext, SelectHandler, SelectHandleSelectContext, SelectIsSelectedContext, SelectOptionsContext, SelectOptionsFilterContext } from '../contexts'\nimport {\n\tComponent,\n\tEntityAccessor,\n\tFieldMarker,\n\tHasOne,\n\tMeaningfulMarker,\n\tPlaceholderGenerator,\n\tQueryLanguage,\n\tSugaredQualifiedEntityList,\n\tSugaredRelativeEntityList,\n\tSugaredRelativeSingleEntity,\n\tSugaredRelativeSingleField,\n\tuseEntityList,\n} from '@contember/react-binding'\nimport { useReferentiallyStableCallback } from '@contember/react-utils'\nimport { Repeater } from '@contember/react-repeater'\nimport { SelectEvents } from '../types'\nimport { SelectFilterFieldProps, useSelectFilter } from '../hooks'\n\nexport type SortableMultiSelectProps =\n\t& {\n\t\tchildren: ReactNode\n\t\tfield: SugaredRelativeEntityList['field']\n\t\toptions?: SugaredQualifiedEntityList['entities']\n\t\tsortableBy: SugaredRelativeSingleField['field']\n\t\tconnectAt: SugaredRelativeSingleEntity['field']\n\t}\n\t& SelectFilterFieldProps\n\t& SelectEvents\n\nexport const SortableMultiSelect = Component(({ field, children, sortableBy, connectAt, options, onSelect, onUnselect, filterField }: SortableMultiSelectProps) => {\n\tconst list = useEntityList({ field })\n\tconst entitiesArr = useMemo(() => Array.from(list), [list])\n\n\tconst optionsMarker = useMemo(() => {\n\t\tconst desugared = QueryLanguage.desugarRelativeSingleEntity({ field: connectAt }, list.environment)\n\t\tlet marker: Exclude<MeaningfulMarker, FieldMarker> = list.getMarker()\n\t\tfor (let relation of desugared.hasOneRelationPath) {\n\t\t\tconst placeholder = PlaceholderGenerator.getHasOneRelationPlaceholder(relation)\n\t\t\tconst relationMarker = marker.fields.markers.get(placeholder)\n\t\t\tif (!relationMarker || relationMarker instanceof FieldMarker) {\n\t\t\t\tthrow new Error('Invalid marker')\n\t\t\t}\n\t\t\tmarker = relationMarker\n\t\t}\n\t\treturn marker\n\t}, [connectAt, list])\n\n\toptions ??= optionsMarker.environment.getSubTreeNode().entity.name\n\n\tconst filter = useSelectFilter({ filterField, marker: optionsMarker })\n\n\tconst selectedEntities = useMemo(() => Array.from(list).map(it => it.getEntity({ field: connectAt }).id), [connectAt, list])\n\n\tconst handler = useReferentiallyStableCallback<SelectHandler>((entity, action = 'toggle') => {\n\t\tconst isSelected = selectedEntities.includes(entity.id)\n\t\tif (action === 'toggle') {\n\t\t\taction = isSelected ? 'unselect' : 'select'\n\t\t}\n\t\tif (action === 'unselect' && isSelected) {\n\t\t\tArray.from(list).find(it => it.getEntity({ field: connectAt }).id === entity.id)?.deleteEntity()\n\t\t\tonUnselect?.(entity)\n\t\t} else if (action === 'select' && !isSelected) {\n\t\t\tlist.createNewEntity(getEntity => {\n\t\t\t\tgetEntity().connectEntityAtField({ field: connectAt }, entity)\n\t\t\t\tonSelect?.(entity)\n\t\t\t})\n\t\t}\n\t})\n\tconst isSelected = useCallback((entity: EntityAccessor) => {\n\t\treturn selectedEntities.includes(entity.id)\n\t}, [selectedEntities])\n\n\treturn (\n\t\t<Repeater field={field} sortableBy={sortableBy} initialEntityCount={0}>\n\t\t\t<SelectCurrentEntitiesContext.Provider value={entitiesArr}>\n\t\t\t\t<SelectIsSelectedContext.Provider value={isSelected}>\n\t\t\t\t\t<SelectHandleSelectContext.Provider value={handler}>\n\t\t\t\t\t\t<SelectOptionsContext.Provider value={options}>\n\t\t\t\t\t\t\t<SelectOptionsFilterContext.Provider value={filter}>\n\t\t\t\t\t\t\t\t{children}\n\t\t\t\t\t\t\t</SelectOptionsFilterContext.Provider>\n\t\t\t\t\t\t</SelectOptionsContext.Provider>\n\t\t\t\t\t</SelectHandleSelectContext.Provider>\n\t\t\t\t</SelectIsSelectedContext.Provider>\n\t\t\t</SelectCurrentEntitiesContext.Provider>\n\t\t</Repeater>\n\t)\n}, ({ children, field, sortableBy, connectAt }) => {\n\treturn (\n\t\t<Repeater field={field} sortableBy={sortableBy} initialEntityCount={0}>\n\t\t\t<HasOne field={connectAt} expectedMutation=\"connectOrDisconnect\">\n\t\t\t\t{children}\n\t\t\t</HasOne>\n\t\t</Repeater>\n\t)\n})\n\n"],"names":["Component","useEntityList","useMemo","QueryLanguage","PlaceholderGenerator","FieldMarker","useSelectFilter","useReferentiallyStableCallback","isSelected","useCallback","Repeater","jsxDEV","SelectCurrentEntitiesContext","SelectIsSelectedContext","SelectHandleSelectContext","SelectOptionsContext","SelectOptionsFilterContext","this","HasOne"],"mappings":";;;;;;;;;AAgCO,MAAM,sBAAsBA,aAAA,UAAU,CAAC,EAAE,OAAO,UAAU,YAAY,WAAW,SAAS,UAAU,YAAY,YAAA,MAA4C;AAClK,QAAM,OAAOC,aAAAA,cAAc,EAAE,MAAO,CAAA;AAC9B,QAAA,cAAcC,cAAQ,MAAM,MAAM,KAAK,IAAI,GAAG,CAAC,IAAI,CAAC;AAEpD,QAAA,gBAAgBA,MAAAA,QAAQ,MAAM;AAC7B,UAAA,YAAYC,2BAAc,4BAA4B,EAAE,OAAO,UAAU,GAAG,KAAK,WAAW;AAC9F,QAAA,SAAiD,KAAK;AACjD,aAAA,YAAY,UAAU,oBAAoB;AAC5C,YAAA,cAAcC,aAAAA,qBAAqB,6BAA6B,QAAQ;AAC9E,YAAM,iBAAiB,OAAO,OAAO,QAAQ,IAAI,WAAW;AACxD,UAAA,CAAC,kBAAkB,0BAA0BC,0BAAa;AACvD,cAAA,IAAI,MAAM,gBAAgB;AAAA,MACjC;AACS,eAAA;AAAA,IACV;AACO,WAAA;AAAA,EAAA,GACL,CAAC,WAAW,IAAI,CAAC;AAEpB,wBAAY,cAAc,YAAY,eAAe,EAAE,OAAO;AAE9D,QAAM,SAASC,gBAAAA,gBAAgB,EAAE,aAAa,QAAQ,eAAe;AAE/D,QAAA,mBAAmBJ,cAAQ,MAAM,MAAM,KAAK,IAAI,EAAE,IAAI,CAAM,OAAA,GAAG,UAAU,EAAE,OAAO,WAAW,EAAE,EAAE,GAAG,CAAC,WAAW,IAAI,CAAC;AAE3H,QAAM,UAAUK,WAAA,+BAA8C,CAAC,QAAQ,SAAS,aAAa;AAC5F,UAAMC,cAAa,iBAAiB,SAAS,OAAO,EAAE;AACtD,QAAI,WAAW,UAAU;AACxB,eAASA,cAAa,aAAa;AAAA,IACpC;AACI,QAAA,WAAW,cAAcA,aAAY;AACxC,YAAM,KAAK,IAAI,EAAE,KAAK,CAAA,OAAM,GAAG,UAAU,EAAE,OAAO,UAAW,CAAA,EAAE,OAAO,OAAO,EAAE,GAAG;AAClF,mBAAa,MAAM;AAAA,IACT,WAAA,WAAW,YAAY,CAACA,aAAY;AAC9C,WAAK,gBAAgB,CAAa,cAAA;AACjC,kBAAA,EAAY,qBAAqB,EAAE,OAAO,UAAA,GAAa,MAAM;AAC7D,mBAAW,MAAM;AAAA,MAAA,CACjB;AAAA,IACF;AAAA,EAAA,CACA;AACK,QAAA,aAAaC,kBAAY,CAAC,WAA2B;AACnD,WAAA,iBAAiB,SAAS,OAAO,EAAE;AAAA,EAAA,GACxC,CAAC,gBAAgB,CAAC;AAErB,8CACEC,wBAAS,EAAA,OAAc,YAAwB,oBAAoB,GACnE,UAACC,8BAAAA,OAAAC,SAAA,6BAA6B,UAA7B,EAAsC,OAAO,aAC7C,UAAAD,8BAAA,OAACE,iCAAwB,UAAxB,EAAiC,OAAO,YACxC,UAACF,8BAAAA,OAAAG,SAAAA,0BAA0B,UAA1B,EAAmC,OAAO,SAC1C,UAAAH,8BAAAA,OAACI,8BAAqB,UAArB,EAA8B,OAAO,SACrC,+CAACC,oCAA2B,UAA3B,EAAoC,OAAO,QAC1C,SADF,GAAA,QAAA,OAAA;AAAA,IAAA,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,cAAA;AAAA,EAAA,GAAAC,MAEA,EAHD,GAAA,QAAA,OAAA;AAAA,IAAA,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,cAAA;AAAA,EAAA,GAAAA,MAIA,EALD,GAAA,QAAA,OAAA;AAAA,IAAA,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,cAAA;AAAA,EAAA,GAAAA,MAMA,EAPD,GAAA,QAAA,OAAA;AAAA,IAAA,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,cAAA;AAAA,EAAA,GAAAA,MAQA,EATD,GAAA,QAAA,OAAA;AAAA,IAAA,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,cAAA;AAAA,EAAA,GAAAA,MAUA,EAXD,GAAA,QAAA,OAAA;AAAA,IAAA,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,cAAA;AAAA,EAYA,GAAAA,MAAA;AAEF,GAAG,CAAC,EAAE,UAAU,OAAO,YAAY,gBAAgB;AAClD,SACEN,8BAAA,OAAAD,cAAA,UAAA,EAAS,OAAc,YAAwB,oBAAoB,GACnE,UAACC,8BAAA,OAAAO,aAAA,QAAA,EAAO,OAAO,WAAW,kBAAiB,uBACzC,YADF,QAAA,OAAA;AAAA,IAAA,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,cAAA;AAAA,EAAA,GAAAD,MAEA,EAHD,GAAA,QAAA,OAAA;AAAA,IAAA,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,cAAA;AAAA,EAIA,GAAAA,MAAA;AAEF,CAAC;;"}