@contember/react-select 1.3.0-alpha.14

package/dist/development/components/MultiSelect.cjs

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+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 entities = reactBinding.useEntityList({ field });
+  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") => {
+    const isSelected2 = selectedEntities.includes(entity.id);
+    if (action === "toggle") {
+      action = isSelected2 ? "unselect" : "select";
+    }
+    if (action === "unselect" && isSelected2) {
+      entities.disconnectEntity(entity);
+      onUnselect?.(entity);
+    } else if (action === "select" && !isSelected2) {
+      entities.connectEntity(entity);
+      onSelect?.(entity);
+    }
+  });
+  const isSelected = react.useCallback((entity) => {
+    return selectedEntities.includes(entity.id);
+  }, [selectedEntities]);
+  return /* @__PURE__ */ jsxRuntime.jsx(contexts.SelectCurrentEntitiesContext.Provider, { value: entitiesArr, children: /* @__PURE__ */ jsxRuntime.jsx(contexts.SelectIsSelectedContext.Provider, { value: isSelected, children: /* @__PURE__ */ jsxRuntime.jsx(contexts.SelectHandleSelectContext.Provider, { value: handler, children: /* @__PURE__ */ jsxRuntime.jsx(contexts.SelectOptionsContext.Provider, { value: options, children }) }) }) });
+}, ({ field, children }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(reactBinding.HasMany, { field, children });
+});
+exports.MultiSelect = MultiSelect;
+//# sourceMappingURL=MultiSelect.cjs.map

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

@@ -0,0 +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","jsx","SelectCurrentEntitiesContext","SelectIsSelectedContext","SelectHandleSelectContext","SelectOptionsContext","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,2BAAAA,IAACC,SAAAA,6BAA6B,UAA7B,EAAsC,OAAO,aAC7C,UAAAD,2BAAA,IAACE,SAAwB,wBAAA,UAAxB,EAAiC,OAAO,YACxC,UAAAF,2BAAAA,IAACG,SAAAA,0BAA0B,UAA1B,EAAmC,OAAO,SAC1C,UAAAH,2BAAA,IAACI,SAAqB,qBAAA,UAArB,EAA8B,OAAO,SACpC,SACF,CAAA,EACD,CAAA,EACD,CAAA,EACD,CAAA;AAEF,GAAG,CAAC,EAAE,OAAO,eAAe;AAE1B,SAAAJ,2BAAA,IAACK,aAAQ,SAAA,EAAA,OACP,SACF,CAAA;AAEF,CAAC;;"}

package/dist/development/components/MultiSelect.js

@@ -0,0 +1,33 @@
+import { jsx } from "react/jsx-runtime";
+import { useMemo, useCallback } from "react";
+import { SelectCurrentEntitiesContext, SelectIsSelectedContext, SelectHandleSelectContext, SelectOptionsContext } 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 }) => {
+  const entities = useEntityList({ field });
+  const entitiesArr = useMemo(() => Array.from(entities), [entities]);
+  const selectedEntities = useMemo(() => Array.from(entities).map((it) => it.id), [entities]);
+  const handler = useReferentiallyStableCallback((entity, action = "toggle") => {
+    const isSelected2 = selectedEntities.includes(entity.id);
+    if (action === "toggle") {
+      action = isSelected2 ? "unselect" : "select";
+    }
+    if (action === "unselect" && isSelected2) {
+      entities.disconnectEntity(entity);
+      onUnselect?.(entity);
+    } else if (action === "select" && !isSelected2) {
+      entities.connectEntity(entity);
+      onSelect?.(entity);
+    }
+  });
+  const isSelected = useCallback((entity) => {
+    return selectedEntities.includes(entity.id);
+  }, [selectedEntities]);
+  return /* @__PURE__ */ jsx(SelectCurrentEntitiesContext.Provider, { value: entitiesArr, children: /* @__PURE__ */ jsx(SelectIsSelectedContext.Provider, { value: isSelected, children: /* @__PURE__ */ jsx(SelectHandleSelectContext.Provider, { value: handler, children: /* @__PURE__ */ jsx(SelectOptionsContext.Provider, { value: options, children }) }) }) });
+}, ({ field, children }) => {
+  return /* @__PURE__ */ jsx(HasMany, { field, children });
+});
+export {
+  MultiSelect
+};
+//# sourceMappingURL=MultiSelect.js.map

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

@@ -0,0 +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"],"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,oBAAC,6BAA6B,UAA7B,EAAsC,OAAO,aAC7C,UAAA,oBAAC,wBAAwB,UAAxB,EAAiC,OAAO,YACxC,UAAA,oBAAC,0BAA0B,UAA1B,EAAmC,OAAO,SAC1C,UAAA,oBAAC,qBAAqB,UAArB,EAA8B,OAAO,SACpC,SACF,CAAA,EACD,CAAA,EACD,CAAA,EACD,CAAA;AAEF,GAAG,CAAC,EAAE,OAAO,eAAe;AAE1B,SAAA,oBAAC,SAAQ,EAAA,OACP,SACF,CAAA;AAEF,CAAC;"}

package/dist/development/components/Select.cjs

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+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 entity = reactBinding.useEntity();
+  const selectedEntity = entity.getEntity({ field });
+  const entityExists = selectedEntity.existsOnServer || selectedEntity.hasUnpersistedChanges;
+  const entitiesArr = react.useMemo(() => entityExists ? [selectedEntity] : [], [entityExists, selectedEntity]);
+  const handleSelect = reactUtils.useReferentiallyStableCallback((selected, action = "toggle") => {
+    if (action === "toggle") {
+      action = selected.id === selectedEntity.id ? "unselect" : "select";
+    }
+    if (action === "unselect") {
+      entity.disconnectEntityAtField({ field });
+      onUnselect?.(selected);
+    } else if (action === "select") {
+      entity.connectEntityAtField({ field }, selected);
+      onSelect?.(selected);
+    }
+  });
+  const isSelected = react.useCallback((entity2) => entity2.id === selectedEntity.id, [selectedEntity.id]);
+  return /* @__PURE__ */ jsxRuntime.jsx(contexts.SelectCurrentEntitiesContext.Provider, { value: entitiesArr, children: /* @__PURE__ */ jsxRuntime.jsx(contexts.SelectIsSelectedContext.Provider, { value: isSelected, children: /* @__PURE__ */ jsxRuntime.jsx(contexts.SelectHandleSelectContext.Provider, { value: handleSelect, children: /* @__PURE__ */ jsxRuntime.jsx(contexts.SelectOptionsContext.Provider, { value: options, children }) }) }) });
+}, ({ field, children }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(reactBinding.HasOne, { field, children });
+});
+exports.Select = Select;
+//# sourceMappingURL=Select.cjs.map

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

@@ -0,0 +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","jsx","SelectCurrentEntitiesContext","SelectIsSelectedContext","SelectHandleSelectContext","SelectOptionsContext","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,2BAAAA,IAACC,SAAAA,6BAA6B,UAA7B,EAAsC,OAAO,aAC7C,UAAAD,2BAAA,IAACE,SAAwB,wBAAA,UAAxB,EAAiC,OAAO,YACxC,UAAAF,2BAAAA,IAACG,SAAAA,0BAA0B,UAA1B,EAAmC,OAAO,cAC1C,UAAAH,2BAAA,IAACI,SAAqB,qBAAA,UAArB,EAA8B,OAAO,SACpC,SACF,CAAA,EACD,CAAA,EACD,CAAA,EACD,CAAA;AAEF,GAAG,CAAC,EAAE,OAAO,eAAe;AAE1B,SAAAJ,2BAAA,IAACK,aAAO,QAAA,EAAA,OACN,SACF,CAAA;AAEF,CAAC;;"}

package/dist/development/components/Select.js

@@ -0,0 +1,31 @@
+import { jsx } from "react/jsx-runtime";
+import { useMemo, useCallback } from "react";
+import { SelectCurrentEntitiesContext, SelectIsSelectedContext, SelectHandleSelectContext, SelectOptionsContext } 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 }) => {
+  const entity = useEntity();
+  const selectedEntity = entity.getEntity({ field });
+  const entityExists = selectedEntity.existsOnServer || selectedEntity.hasUnpersistedChanges;
+  const entitiesArr = useMemo(() => entityExists ? [selectedEntity] : [], [entityExists, selectedEntity]);
+  const handleSelect = useReferentiallyStableCallback((selected, action = "toggle") => {
+    if (action === "toggle") {
+      action = selected.id === selectedEntity.id ? "unselect" : "select";
+    }
+    if (action === "unselect") {
+      entity.disconnectEntityAtField({ field });
+      onUnselect?.(selected);
+    } else if (action === "select") {
+      entity.connectEntityAtField({ field }, selected);
+      onSelect?.(selected);
+    }
+  });
+  const isSelected = useCallback((entity2) => entity2.id === selectedEntity.id, [selectedEntity.id]);
+  return /* @__PURE__ */ jsx(SelectCurrentEntitiesContext.Provider, { value: entitiesArr, children: /* @__PURE__ */ jsx(SelectIsSelectedContext.Provider, { value: isSelected, children: /* @__PURE__ */ jsx(SelectHandleSelectContext.Provider, { value: handleSelect, children: /* @__PURE__ */ jsx(SelectOptionsContext.Provider, { value: options, children }) }) }) });
+}, ({ field, children }) => {
+  return /* @__PURE__ */ jsx(HasOne, { field, children });
+});
+export {
+  Select
+};
+//# sourceMappingURL=Select.js.map

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

@@ -0,0 +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"],"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,oBAAC,6BAA6B,UAA7B,EAAsC,OAAO,aAC7C,UAAA,oBAAC,wBAAwB,UAAxB,EAAiC,OAAO,YACxC,UAAA,oBAAC,0BAA0B,UAA1B,EAAmC,OAAO,cAC1C,UAAA,oBAAC,qBAAqB,UAArB,EAA8B,OAAO,SACpC,SACF,CAAA,EACD,CAAA,EACD,CAAA,EACD,CAAA;AAEF,GAAG,CAAC,EAAE,OAAO,eAAe;AAE1B,SAAA,oBAAC,QAAO,EAAA,OACN,SACF,CAAA;AAEF,CAAC;"}

package/dist/development/components/SelectDataView.cjs

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const contexts = require("../contexts.cjs");
+const reactDataview = require("@contember/react-dataview");
+const SelectDataView = (props) => {
+  const handleSelect = contexts.useSelectHandleSelect();
+  const entities = contexts.useSelectOptions();
+  return /* @__PURE__ */ jsxRuntime.jsx(reactDataview.DataView, { ...props, onSelectHighlighted: handleSelect, entities });
+};
+exports.SelectDataView = SelectDataView;
+//# sourceMappingURL=SelectDataView.cjs.map

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

@@ -0,0 +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"],"mappings":";;;;;AAUa,MAAA,iBAAiB,CAAC,UAA+B;AAC7D,QAAM,eAAeA,SAAAA;AACrB,QAAM,WAAWC,SAAAA;AACjB,wCACEC,cAAU,UAAA,EAAA,GAAG,OAAO,qBAAqB,cAAc,SAAoB,CAAA;AAE9E;;"}

package/dist/development/components/SelectDataView.js

@@ -0,0 +1,12 @@
+import { jsx } from "react/jsx-runtime";
+import { useSelectHandleSelect, useSelectOptions } from "../contexts.js";
+import { DataView } from "@contember/react-dataview";
+const SelectDataView = (props) => {
+  const handleSelect = useSelectHandleSelect();
+  const entities = useSelectOptions();
+  return /* @__PURE__ */ jsx(DataView, { ...props, onSelectHighlighted: handleSelect, entities });
+};
+export {
+  SelectDataView
+};
+//# sourceMappingURL=SelectDataView.js.map

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

@@ -0,0 +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":[],"mappings":";;;AAUa,MAAA,iBAAiB,CAAC,UAA+B;AAC7D,QAAM,eAAe;AACrB,QAAM,WAAW;AACjB,6BACE,UAAU,EAAA,GAAG,OAAO,qBAAqB,cAAc,SAAoB,CAAA;AAE9E;"}

package/dist/development/components/SelectEachItem.cjs

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const contexts = require("../contexts.cjs");
+const reactBinding = require("@contember/react-binding");
+const SelectEachValue = ({ children }) => {
+  const entities = contexts.useSelectCurrentEntities();
+  return entities.map((entity) => /* @__PURE__ */ jsxRuntime.jsx(reactBinding.Entity, { accessor: entity, children }, entity.key));
+};
+exports.SelectEachValue = SelectEachValue;
+//# sourceMappingURL=SelectEachItem.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectEachItem.cjs","sources":["../../../src/components/SelectEachItem.tsx"],"sourcesContent":["import React, { ReactNode } from 'react'\nimport { useSelectCurrentEntities } from '../contexts'\nimport { Entity } from '@contember/react-binding'\n\n\nexport const SelectEachValue = ({ children }: { children: ReactNode }) => {\n\tconst entities = useSelectCurrentEntities()\n\treturn entities.map(entity => (\n\t\t<Entity key={entity.key} accessor={entity}>\n\t\t\t{children}\n\t\t</Entity>\n\t))\n}\n"],"names":["useSelectCurrentEntities","jsx","Entity"],"mappings":";;;;;AAKO,MAAM,kBAAkB,CAAC,EAAE,eAAwC;AACzE,QAAM,WAAWA,SAAAA;AACV,SAAA,SAAS,IAAI,CAAA,WAClBC,2BAAA,IAAAC,aAAA,QAAA,EAAwB,UAAU,QACjC,SAAA,GADW,OAAO,GAEpB,CACA;AACF;;"}

package/dist/development/components/SelectEachItem.js

@@ -0,0 +1,11 @@
+import { jsx } from "react/jsx-runtime";
+import { useSelectCurrentEntities } from "../contexts.js";
+import { Entity } from "@contember/react-binding";
+const SelectEachValue = ({ children }) => {
+  const entities = useSelectCurrentEntities();
+  return entities.map((entity) => /* @__PURE__ */ jsx(Entity, { accessor: entity, children }, entity.key));
+};
+export {
+  SelectEachValue
+};
+//# sourceMappingURL=SelectEachItem.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectEachItem.js","sources":["../../../src/components/SelectEachItem.tsx"],"sourcesContent":["import React, { ReactNode } from 'react'\nimport { useSelectCurrentEntities } from '../contexts'\nimport { Entity } from '@contember/react-binding'\n\n\nexport const SelectEachValue = ({ children }: { children: ReactNode }) => {\n\tconst entities = useSelectCurrentEntities()\n\treturn entities.map(entity => (\n\t\t<Entity key={entity.key} accessor={entity}>\n\t\t\t{children}\n\t\t</Entity>\n\t))\n}\n"],"names":[],"mappings":";;;AAKO,MAAM,kBAAkB,CAAC,EAAE,eAAwC;AACzE,QAAM,WAAW;AACV,SAAA,SAAS,IAAI,CAAA,WAClB,oBAAA,QAAA,EAAwB,UAAU,QACjC,SAAA,GADW,OAAO,GAEpB,CACA;AACF;"}

package/dist/development/components/SelectItemTrigger.cjs

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const contexts = require("../contexts.cjs");
+const reactSlot = require("@radix-ui/react-slot");
+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(() => {
+    handleSelect?.(entity, action);
+  }, [action, entity, handleSelect]);
+  return /* @__PURE__ */ jsxRuntime.jsx(reactSlot.Slot, { onClick, ...props, ref });
+});
+exports.SelectItemTrigger = SelectItemTrigger;
+//# sourceMappingURL=SelectItemTrigger.cjs.map

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

@@ -0,0 +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","jsx","Slot"],"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,2BAAAA,IAAAC,UAAAA,MAAA,EAAK,SAAmB,GAAG,OAAO,IAAU,CAAA;AACrD,CAAC;;"}

package/dist/development/components/SelectItemTrigger.js

@@ -0,0 +1,17 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useCallback } from "react";
+import { useSelectHandleSelect } from "../contexts.js";
+import { Slot } from "@radix-ui/react-slot";
+import { useEntity } from "@contember/react-binding";
+const SelectItemTrigger = forwardRef(({ action, ...props }, ref) => {
+  const handleSelect = useSelectHandleSelect();
+  const entity = useEntity();
+  const onClick = useCallback(() => {
+    handleSelect?.(entity, action);
+  }, [action, entity, handleSelect]);
+  return /* @__PURE__ */ jsx(Slot, { onClick, ...props, ref });
+});
+export {
+  SelectItemTrigger
+};
+//# sourceMappingURL=SelectItemTrigger.js.map

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

@@ -0,0 +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":[],"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,oBAAA,MAAA,EAAK,SAAmB,GAAG,OAAO,IAAU,CAAA;AACrD,CAAC;"}

package/dist/development/components/SelectNewItem.cjs

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const reactBinding = require("@contember/react-binding");
+const react = require("react");
+const contexts = require("../contexts.cjs");
+const SelectNewItem = ({ children }) => {
+  const options = contexts.useSelectOptions();
+  const env = reactBinding.useEnvironment();
+  const { entityName } = react.useMemo(() => reactBinding.QueryLanguage.desugarQualifiedEntityList({ entities: options }, env), [env, options]);
+  const [state, setState] = react.useState(null);
+  const extendTree = reactBinding.useExtendTree();
+  const getSubTree = reactBinding.useGetEntitySubTree();
+  react.useEffect(() => {
+    (async () => {
+      const treeRootId = await extendTree(/* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(reactBinding.EntitySubTree, { entity: {
+        entityName
+      }, expectedMutation: "none", isUnpersisted: true, isCreating: true, children }) }));
+      if (!treeRootId) {
+        return;
+      }
+      const entity = getSubTree({
+        entity: {
+          entityName
+        },
+        isCreating: true
+      }, treeRootId);
+      setState({
+        entity,
+        treeRootId
+      });
+    })();
+  }, [children, entityName, extendTree, getSubTree]);
+  if (!state) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(reactBinding.TreeRootIdProvider, { treeRootId: state.treeRootId, children: /* @__PURE__ */ jsxRuntime.jsx(reactBinding.Entity, { accessor: state.entity, children }) }) });
+};
+exports.SelectNewItem = SelectNewItem;
+//# sourceMappingURL=SelectNewItem.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectNewItem.cjs","sources":["../../../src/components/SelectNewItem.tsx"],"sourcesContent":["import { Entity, EntityAccessor, EntitySubTree, QueryLanguage, TreeRootId, TreeRootIdProvider, useEnvironment, useExtendTree, useGetEntitySubTree } from '@contember/react-binding'\nimport * as React from 'react'\nimport { ReactNode, useEffect, useMemo, useState } from 'react'\nimport { useSelectOptions } from '../contexts'\n\nexport const SelectNewItem = ({ children }: { children: ReactNode }) => {\n\tconst options = useSelectOptions()\n\tconst env = useEnvironment()\n\tconst { entityName } = useMemo((() => QueryLanguage.desugarQualifiedEntityList({ entities: options }, env)), [env, options])\n\n\tconst [state, setState] = useState<{ entity: EntityAccessor, treeRootId: TreeRootId } | null>(null)\n\tconst extendTree = useExtendTree()\n\tconst getSubTree = useGetEntitySubTree()\n\n\tuseEffect(() => {\n\t\t(async () => {\n\t\t\tconst treeRootId = await extendTree(<>\n\t\t\t\t<EntitySubTree entity={{\n\t\t\t\t\tentityName,\n\t\t\t\t}} expectedMutation={'none'} isUnpersisted isCreating>\n\t\t\t\t\t{children}\n\t\t\t\t</EntitySubTree>\n\t\t\t</>)\n\t\t\tif (!treeRootId) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tconst entity = getSubTree({\n\t\t\t\tentity: {\n\t\t\t\t\tentityName: entityName,\n\t\t\t\t},\n\t\t\t\tisCreating: true,\n\t\t\t}, treeRootId)\n\t\t\tsetState({\n\t\t\t\tentity,\n\t\t\t\ttreeRootId,\n\t\t\t})\n\t\t})()\n\t}, [children, entityName, extendTree, getSubTree])\n\n\tif (!state) {\n\t\treturn null\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<TreeRootIdProvider treeRootId={state.treeRootId}>\n\t\t\t\t<Entity accessor={state.entity}>\n\t\t\t\t\t{children}\n\t\t\t\t</Entity>\n\t\t\t</TreeRootIdProvider>\n\t\t</>\n\t)\n}\n"],"names":["useSelectOptions","useEnvironment","useMemo","QueryLanguage","useState","useExtendTree","useGetEntitySubTree","useEffect","jsx","Fragment","EntitySubTree","TreeRootIdProvider","Entity"],"mappings":";;;;;;AAKO,MAAM,gBAAgB,CAAC,EAAE,eAAwC;AACvE,QAAM,UAAUA,SAAAA;AAChB,QAAM,MAAMC,aAAAA;AACZ,QAAM,EAAE,WAAW,IAAIC,MAAS,QAAA,MAAMC,aAAAA,cAAc,2BAA2B,EAAE,UAAU,QAAA,GAAW,GAAG,GAAI,CAAC,KAAK,OAAO,CAAC;AAE3H,QAAM,CAAC,OAAO,QAAQ,IAAIC,eAAoE,IAAI;AAClG,QAAM,aAAaC,aAAAA;AACnB,QAAM,aAAaC,aAAAA;AAEnBC,QAAAA,UAAU,MAAM;AACf,KAAC,YAAY;AACZ,YAAM,aAAa,MAAM,WACxBC,+BAAAC,WAAAA,UAAA,EAAA,UAAAD,2BAAA,IAACE,8BAAc,QAAQ;AAAA,QACtB;AAAA,MAAA,GACE,kBAAkB,QAAQ,eAAa,MAAC,YAAU,MACnD,SACF,CAAA,EACD,CAAA,CAAG;AACH,UAAI,CAAC,YAAY;AAChB;AAAA,MACD;AAEA,YAAM,SAAS,WAAW;AAAA,QACzB,QAAQ;AAAA,UACP;AAAA,QACD;AAAA,QACA,YAAY;AAAA,SACV,UAAU;AACJ,eAAA;AAAA,QACR;AAAA,QACA;AAAA,MAAA,CACA;AAAA,IAAA;KAEA,CAAC,UAAU,YAAY,YAAY,UAAU,CAAC;AAEjD,MAAI,CAAC,OAAO;AACJ,WAAA;AAAA,EACR;AAEA,SAEEF,2BAAA,IAAAC,WAAA,UAAA,EAAA,UAAAD,2BAAA,IAACG,iCAAmB,EAAA,YAAY,MAAM,YACrC,UAACH,+BAAAI,aAAAA,QAAA,EAAO,UAAU,MAAM,QACtB,SACF,CAAA,GACD,EACD,CAAA;AAEF;;"}

package/dist/development/components/SelectNewItem.js

@@ -0,0 +1,40 @@
+import { jsx, Fragment } from "react/jsx-runtime";
+import { useEnvironment, QueryLanguage, useExtendTree, useGetEntitySubTree, EntitySubTree, TreeRootIdProvider, Entity } from "@contember/react-binding";
+import { useMemo, useState, useEffect } from "react";
+import { useSelectOptions } from "../contexts.js";
+const SelectNewItem = ({ children }) => {
+  const options = useSelectOptions();
+  const env = useEnvironment();
+  const { entityName } = useMemo(() => QueryLanguage.desugarQualifiedEntityList({ entities: options }, env), [env, options]);
+  const [state, setState] = useState(null);
+  const extendTree = useExtendTree();
+  const getSubTree = useGetEntitySubTree();
+  useEffect(() => {
+    (async () => {
+      const treeRootId = await extendTree(/* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(EntitySubTree, { entity: {
+        entityName
+      }, expectedMutation: "none", isUnpersisted: true, isCreating: true, children }) }));
+      if (!treeRootId) {
+        return;
+      }
+      const entity = getSubTree({
+        entity: {
+          entityName
+        },
+        isCreating: true
+      }, treeRootId);
+      setState({
+        entity,
+        treeRootId
+      });
+    })();
+  }, [children, entityName, extendTree, getSubTree]);
+  if (!state) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(TreeRootIdProvider, { treeRootId: state.treeRootId, children: /* @__PURE__ */ jsx(Entity, { accessor: state.entity, children }) }) });
+};
+export {
+  SelectNewItem
+};
+//# sourceMappingURL=SelectNewItem.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectNewItem.js","sources":["../../../src/components/SelectNewItem.tsx"],"sourcesContent":["import { Entity, EntityAccessor, EntitySubTree, QueryLanguage, TreeRootId, TreeRootIdProvider, useEnvironment, useExtendTree, useGetEntitySubTree } from '@contember/react-binding'\nimport * as React from 'react'\nimport { ReactNode, useEffect, useMemo, useState } from 'react'\nimport { useSelectOptions } from '../contexts'\n\nexport const SelectNewItem = ({ children }: { children: ReactNode }) => {\n\tconst options = useSelectOptions()\n\tconst env = useEnvironment()\n\tconst { entityName } = useMemo((() => QueryLanguage.desugarQualifiedEntityList({ entities: options }, env)), [env, options])\n\n\tconst [state, setState] = useState<{ entity: EntityAccessor, treeRootId: TreeRootId } | null>(null)\n\tconst extendTree = useExtendTree()\n\tconst getSubTree = useGetEntitySubTree()\n\n\tuseEffect(() => {\n\t\t(async () => {\n\t\t\tconst treeRootId = await extendTree(<>\n\t\t\t\t<EntitySubTree entity={{\n\t\t\t\t\tentityName,\n\t\t\t\t}} expectedMutation={'none'} isUnpersisted isCreating>\n\t\t\t\t\t{children}\n\t\t\t\t</EntitySubTree>\n\t\t\t</>)\n\t\t\tif (!treeRootId) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tconst entity = getSubTree({\n\t\t\t\tentity: {\n\t\t\t\t\tentityName: entityName,\n\t\t\t\t},\n\t\t\t\tisCreating: true,\n\t\t\t}, treeRootId)\n\t\t\tsetState({\n\t\t\t\tentity,\n\t\t\t\ttreeRootId,\n\t\t\t})\n\t\t})()\n\t}, [children, entityName, extendTree, getSubTree])\n\n\tif (!state) {\n\t\treturn null\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<TreeRootIdProvider treeRootId={state.treeRootId}>\n\t\t\t\t<Entity accessor={state.entity}>\n\t\t\t\t\t{children}\n\t\t\t\t</Entity>\n\t\t\t</TreeRootIdProvider>\n\t\t</>\n\t)\n}\n"],"names":[],"mappings":";;;;AAKO,MAAM,gBAAgB,CAAC,EAAE,eAAwC;AACvE,QAAM,UAAU;AAChB,QAAM,MAAM;AACZ,QAAM,EAAE,WAAW,IAAI,QAAS,MAAM,cAAc,2BAA2B,EAAE,UAAU,QAAA,GAAW,GAAG,GAAI,CAAC,KAAK,OAAO,CAAC;AAE3H,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAoE,IAAI;AAClG,QAAM,aAAa;AACnB,QAAM,aAAa;AAEnB,YAAU,MAAM;AACf,KAAC,YAAY;AACZ,YAAM,aAAa,MAAM,WACxB,oBAAA,UAAA,EAAA,UAAA,oBAAC,iBAAc,QAAQ;AAAA,QACtB;AAAA,MAAA,GACE,kBAAkB,QAAQ,eAAa,MAAC,YAAU,MACnD,SACF,CAAA,EACD,CAAA,CAAG;AACH,UAAI,CAAC,YAAY;AAChB;AAAA,MACD;AAEA,YAAM,SAAS,WAAW;AAAA,QACzB,QAAQ;AAAA,UACP;AAAA,QACD;AAAA,QACA,YAAY;AAAA,SACV,UAAU;AACJ,eAAA;AAAA,QACR;AAAA,QACA;AAAA,MAAA,CACA;AAAA,IAAA;KAEA,CAAC,UAAU,YAAY,YAAY,UAAU,CAAC;AAEjD,MAAI,CAAC,OAAO;AACJ,WAAA;AAAA,EACR;AAEA,SAEE,oBAAA,UAAA,EAAA,UAAA,oBAAC,oBAAmB,EAAA,YAAY,MAAM,YACrC,UAAC,oBAAA,QAAA,EAAO,UAAU,MAAM,QACtB,SACF,CAAA,GACD,EACD,CAAA;AAEF;"}

package/dist/development/components/SelectOption.cjs

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const contexts = require("../contexts.cjs");
+const reactSlot = require("@radix-ui/react-slot");
+const reactBinding = require("@contember/react-binding");
+const utilities = require("@contember/utilities");
+const SelectOption = react.forwardRef(({ action, ...props }, ref) => {
+  const isSelected = contexts.useSelectIsSelected();
+  const entity = reactBinding.useEntity();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactSlot.Slot,
+    {
+      ref,
+      "data-selected": utilities.dataAttribute(isSelected?.(entity)),
+      ...props
+    }
+  );
+});
+exports.SelectOption = SelectOption;
+//# sourceMappingURL=SelectOption.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectOption.cjs","sources":["../../../src/components/SelectOption.tsx"],"sourcesContent":["import React, { forwardRef, ReactNode } from 'react'\nimport { useSelectIsSelected } from '../contexts'\nimport { Slot } from '@radix-ui/react-slot'\nimport { useEntity } from '@contember/react-binding'\nimport { dataAttribute } from '@contember/utilities'\n\nexport type SelectOptionProps = {\n\tchildren: ReactNode\n\taction?: 'select' | 'unselect' | 'toggle'\n}\n\nexport const SelectOption = forwardRef<HTMLElement, SelectOptionProps>(({ action, ...props }, ref) => {\n\tconst isSelected = useSelectIsSelected()\n\tconst entity = useEntity()\n\treturn (\n\t\t<Slot\n\t\t\tref={ref}\n\t\t\tdata-selected={dataAttribute(isSelected?.(entity))}\n\t\t\t{...props}\n\t\t/>\n\t)\n})\n"],"names":["forwardRef","useSelectIsSelected","useEntity","jsx","Slot","dataAttribute"],"mappings":";;;;;;;;AAWa,MAAA,eAAeA,iBAA2C,CAAC,EAAE,QAAQ,GAAG,SAAS,QAAQ;AACrG,QAAM,aAAaC,SAAAA;AACnB,QAAM,SAASC,aAAAA;AAEd,SAAAC,2BAAA;AAAA,IAACC,UAAA;AAAA,IAAA;AAAA,MACA;AAAA,MACA,iBAAeC,UAAA,cAAc,aAAa,MAAM,CAAC;AAAA,MAChD,GAAG;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;;"}

package/dist/development/components/SelectOption.js

@@ -0,0 +1,22 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useSelectIsSelected } from "../contexts.js";
+import { Slot } from "@radix-ui/react-slot";
+import { useEntity } from "@contember/react-binding";
+import { dataAttribute } from "@contember/utilities";
+const SelectOption = forwardRef(({ action, ...props }, ref) => {
+  const isSelected = useSelectIsSelected();
+  const entity = useEntity();
+  return /* @__PURE__ */ jsx(
+    Slot,
+    {
+      ref,
+      "data-selected": dataAttribute(isSelected?.(entity)),
+      ...props
+    }
+  );
+});
+export {
+  SelectOption
+};
+//# sourceMappingURL=SelectOption.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectOption.js","sources":["../../../src/components/SelectOption.tsx"],"sourcesContent":["import React, { forwardRef, ReactNode } from 'react'\nimport { useSelectIsSelected } from '../contexts'\nimport { Slot } from '@radix-ui/react-slot'\nimport { useEntity } from '@contember/react-binding'\nimport { dataAttribute } from '@contember/utilities'\n\nexport type SelectOptionProps = {\n\tchildren: ReactNode\n\taction?: 'select' | 'unselect' | 'toggle'\n}\n\nexport const SelectOption = forwardRef<HTMLElement, SelectOptionProps>(({ action, ...props }, ref) => {\n\tconst isSelected = useSelectIsSelected()\n\tconst entity = useEntity()\n\treturn (\n\t\t<Slot\n\t\t\tref={ref}\n\t\t\tdata-selected={dataAttribute(isSelected?.(entity))}\n\t\t\t{...props}\n\t\t/>\n\t)\n})\n"],"names":[],"mappings":";;;;;;AAWa,MAAA,eAAe,WAA2C,CAAC,EAAE,QAAQ,GAAG,SAAS,QAAQ;AACrG,QAAM,aAAa;AACnB,QAAM,SAAS;AAEd,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACA;AAAA,MACA,iBAAe,cAAc,aAAa,MAAM,CAAC;AAAA,MAChD,GAAG;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}

package/dist/development/components/SelectPlaceholder.cjs

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const contexts = require("../contexts.cjs");
+const SelectPlaceholder = ({ children }) => {
+  const hasEntities = contexts.useSelectCurrentEntities().length > 0;
+  return hasEntities ? null : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+};
+exports.SelectPlaceholder = SelectPlaceholder;
+//# sourceMappingURL=SelectPlaceholder.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectPlaceholder.cjs","sources":["../../../src/components/SelectPlaceholder.tsx"],"sourcesContent":["import React, { ReactNode } from 'react'\nimport { useSelectCurrentEntities } from '../contexts'\n\nexport const SelectPlaceholder = ({ children }: { children: ReactNode }) => {\n\tconst hasEntities = useSelectCurrentEntities().length > 0\n\treturn hasEntities ? null : <>{children}</>\n}\n"],"names":["useSelectCurrentEntities","jsx","Fragment"],"mappings":";;;;AAGO,MAAM,oBAAoB,CAAC,EAAE,eAAwC;AACrE,QAAA,cAAcA,SAAAA,2BAA2B,SAAS;AACjD,SAAA,cAAc,OAAOC,2BAAAA,IAAAC,WAAAA,UAAA,EAAG,SAAS,CAAA;AACzC;;"}

package/dist/development/components/SelectPlaceholder.js

@@ -0,0 +1,10 @@
+import { jsx, Fragment } from "react/jsx-runtime";
+import { useSelectCurrentEntities } from "../contexts.js";
+const SelectPlaceholder = ({ children }) => {
+  const hasEntities = useSelectCurrentEntities().length > 0;
+  return hasEntities ? null : /* @__PURE__ */ jsx(Fragment, { children });
+};
+export {
+  SelectPlaceholder
+};
+//# sourceMappingURL=SelectPlaceholder.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectPlaceholder.js","sources":["../../../src/components/SelectPlaceholder.tsx"],"sourcesContent":["import React, { ReactNode } from 'react'\nimport { useSelectCurrentEntities } from '../contexts'\n\nexport const SelectPlaceholder = ({ children }: { children: ReactNode }) => {\n\tconst hasEntities = useSelectCurrentEntities().length > 0\n\treturn hasEntities ? null : <>{children}</>\n}\n"],"names":[],"mappings":";;AAGO,MAAM,oBAAoB,CAAC,EAAE,eAAwC;AACrE,QAAA,cAAc,2BAA2B,SAAS;AACjD,SAAA,cAAc,OAAO,oBAAA,UAAA,EAAG,SAAS,CAAA;AACzC;"}

package/dist/development/components/SortableMultiSelect.cjs

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+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 list = reactBinding.useEntityList({ field });
+  const entitiesArr = react.useMemo(() => Array.from(list), [list]);
+  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);
+    if (action === "toggle") {
+      action = isSelected2 ? "unselect" : "select";
+    }
+    if (action === "unselect" && isSelected2) {
+      Array.from(list).find((it) => it.getEntity({ field: connectAt }).id === entity.id)?.deleteEntity();
+      onUnselect?.(entity);
+    } else if (action === "select" && !isSelected2) {
+      list.createNewEntity((getEntity) => {
+        getEntity().connectEntityAtField({ field: connectAt }, entity);
+        onSelect?.(entity);
+      });
+    }
+  });
+  const isSelected = react.useCallback((entity) => {
+    return selectedEntities.includes(entity.id);
+  }, [selectedEntities]);
+  return /* @__PURE__ */ jsxRuntime.jsx(reactRepeater.Repeater, { field, sortableBy, initialEntityCount: 0, children: /* @__PURE__ */ jsxRuntime.jsx(contexts.SelectCurrentEntitiesContext.Provider, { value: entitiesArr, children: /* @__PURE__ */ jsxRuntime.jsx(contexts.SelectIsSelectedContext.Provider, { value: isSelected, children: /* @__PURE__ */ jsxRuntime.jsx(contexts.SelectHandleSelectContext.Provider, { value: handler, children: /* @__PURE__ */ jsxRuntime.jsx(contexts.SelectOptionsContext.Provider, { value: options, children }) }) }) }) });
+}, ({ children, field, sortableBy, connectAt }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(reactRepeater.Repeater, { field, sortableBy, initialEntityCount: 0, children: /* @__PURE__ */ jsxRuntime.jsx(reactBinding.HasOne, { field: connectAt, children }) });
+});
+exports.SortableMultiSelect = SortableMultiSelect;
+//# sourceMappingURL=SortableMultiSelect.cjs.map

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

@@ -0,0 +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","jsx","Repeater","SelectCurrentEntitiesContext","SelectIsSelectedContext","SelectHandleSelectContext","SelectOptionsContext","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,2BAAA,IAAAC,cAAA,UAAA,EAAS,OAAc,YAAwB,oBAAoB,GACnE,UAAAD,2BAAA,IAACE,SAA6B,6BAAA,UAA7B,EAAsC,OAAO,aAC7C,UAACF,2BAAAA,IAAAG,SAAA,wBAAwB,UAAxB,EAAiC,OAAO,YACxC,UAAAH,2BAAAA,IAACI,SAAAA,0BAA0B,UAA1B,EAAmC,OAAO,SAC1C,UAACJ,+BAAAK,SAAAA,qBAAqB,UAArB,EAA8B,OAAO,SACpC,SAAA,CACF,EACD,CAAA,EACD,CAAA,GACD,EACD,CAAA;AAEF,GAAG,CAAC,EAAE,UAAU,OAAO,YAAY,gBAAgB;AAEjD,SAAAL,2BAAAA,IAACC,cAAAA,UAAS,EAAA,OAAc,YAAwB,oBAAoB,GACnE,UAAAD,2BAAAA,IAACM,aAAAA,QAAO,EAAA,OAAO,WACb,SAAA,CACF,EACD,CAAA;AAEF,CAAC;;"}

package/dist/development/components/SortableMultiSelect.js

@@ -0,0 +1,36 @@
+import { jsx } from "react/jsx-runtime";
+import { useMemo, useCallback } from "react";
+import { SelectCurrentEntitiesContext, SelectIsSelectedContext, SelectHandleSelectContext, SelectOptionsContext } from "../contexts.js";
+import { Component, useEntityList, HasOne } from "@contember/react-binding";
+import { useReferentiallyStableCallback } from "@contember/react-utils";
+import { Repeater } from "@contember/react-repeater";
+const SortableMultiSelect = Component(({ field, children, sortableBy, connectAt, options, onSelect, onUnselect }) => {
+  const list = useEntityList({ field });
+  const entitiesArr = useMemo(() => Array.from(list), [list]);
+  const selectedEntities = useMemo(() => Array.from(list).map((it) => it.getEntity({ field: connectAt }).id), [connectAt, list]);
+  const handler = useReferentiallyStableCallback((entity, action = "toggle") => {
+    const isSelected2 = selectedEntities.includes(entity.id);
+    if (action === "toggle") {
+      action = isSelected2 ? "unselect" : "select";
+    }
+    if (action === "unselect" && isSelected2) {
+      Array.from(list).find((it) => it.getEntity({ field: connectAt }).id === entity.id)?.deleteEntity();
+      onUnselect?.(entity);
+    } else if (action === "select" && !isSelected2) {
+      list.createNewEntity((getEntity) => {
+        getEntity().connectEntityAtField({ field: connectAt }, entity);
+        onSelect?.(entity);
+      });
+    }
+  });
+  const isSelected = useCallback((entity) => {
+    return selectedEntities.includes(entity.id);
+  }, [selectedEntities]);
+  return /* @__PURE__ */ jsx(Repeater, { field, sortableBy, initialEntityCount: 0, children: /* @__PURE__ */ jsx(SelectCurrentEntitiesContext.Provider, { value: entitiesArr, children: /* @__PURE__ */ jsx(SelectIsSelectedContext.Provider, { value: isSelected, children: /* @__PURE__ */ jsx(SelectHandleSelectContext.Provider, { value: handler, children: /* @__PURE__ */ jsx(SelectOptionsContext.Provider, { value: options, children }) }) }) }) });
+}, ({ children, field, sortableBy, connectAt }) => {
+  return /* @__PURE__ */ jsx(Repeater, { field, sortableBy, initialEntityCount: 0, children: /* @__PURE__ */ jsx(HasOne, { field: connectAt, children }) });
+});
+export {
+  SortableMultiSelect
+};
+//# sourceMappingURL=SortableMultiSelect.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SortableMultiSelect.js","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":["isSelected"],"mappings":";;;;;;AAiBa,MAAA,sBAAsB,UAAU,CAAC,EAAE,OAAO,UAAU,YAAY,WAAW,SAAS,UAAU,iBAA2C;AACrJ,QAAM,OAAO,cAAc,EAAE,MAAO,CAAA;AAC9B,QAAA,cAAc,QAAQ,MAAM,MAAM,KAAK,IAAI,GAAG,CAAC,IAAI,CAAC;AAEpD,QAAA,mBAAmB,QAAQ,MAAM,MAAM,KAAK,IAAI,EAAE,IAAI,CAAM,OAAA,GAAG,UAAU,EAAE,OAAO,WAAW,EAAE,EAAE,GAAG,CAAC,WAAW,IAAI,CAAC;AAE3H,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,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,aAAa,YAAY,CAAC,WAA2B;AACnD,WAAA,iBAAiB,SAAS,OAAO,EAAE;AAAA,EAAA,GACxC,CAAC,gBAAgB,CAAC;AAErB,SACE,oBAAA,UAAA,EAAS,OAAc,YAAwB,oBAAoB,GACnE,UAAA,oBAAC,6BAA6B,UAA7B,EAAsC,OAAO,aAC7C,UAAC,oBAAA,wBAAwB,UAAxB,EAAiC,OAAO,YACxC,UAAA,oBAAC,0BAA0B,UAA1B,EAAmC,OAAO,SAC1C,UAAC,oBAAA,qBAAqB,UAArB,EAA8B,OAAO,SACpC,SAAA,CACF,EACD,CAAA,EACD,CAAA,GACD,EACD,CAAA;AAEF,GAAG,CAAC,EAAE,UAAU,OAAO,YAAY,gBAAgB;AAEjD,SAAA,oBAAC,UAAS,EAAA,OAAc,YAAwB,oBAAoB,GACnE,UAAA,oBAAC,QAAO,EAAA,OAAO,WACb,SAAA,CACF,EACD,CAAA;AAEF,CAAC;"}