@cratis/event-models 0.183.1 → 0.185.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (29) hide show
  1. package/dist/screen-editor/{BindingExpressionPropertyEditor-DbYpy_bX.js → BindingExpressionPropertyEditor-ClMKmJ_3.js} +17 -17
  2. package/dist/screen-editor/{ColumnListEditor-BHLrr4WK.js → ColumnListEditor-MZzEtJuo.js} +1 -1
  3. package/dist/screen-editor/{FieldEditor-4a_4uQit.js → FieldEditor-Biz82jlR.js} +1 -1
  4. package/dist/screen-editor/{FieldListEditor-RGb59BLM.js → FieldListEditor-VWZ3LAwY.js} +1 -1
  5. package/dist/screen-editor/NavigationItemTargetEditor-pApohBNj.js +78 -0
  6. package/dist/screen-editor/{NavigationTargetEditor-BZ0uQnIl.js → NavigationTargetEditor-DiGohBww.js} +1 -1
  7. package/dist/screen-editor/{QueryBindingPropertyEditor-DLlC-slh.js → QueryBindingPropertyEditor-DOxhWp02.js} +7 -7
  8. package/dist/screen-editor/{ReferenceEditor-BGuaEvY7.js → ReferenceEditor-DYLimujk.js} +1 -1
  9. package/dist/screen-editor/{ReferenceTargetEditors-kxd9SIuG.js → ReferenceTargetEditors-D0jEg1QM.js} +1 -1
  10. package/dist/screen-editor/ScreenEditor/DesignMode/DesignModeStrings.d.ts +2 -0
  11. package/dist/screen-editor/ScreenEditor/PropertyEditors/Registry/PropertyEditorProps.d.ts +1 -0
  12. package/dist/screen-editor/ScreenEditor/PropertyEditors/Registry/PropertyEditorStrings.d.ts +1 -0
  13. package/dist/screen-editor/ScreenEditor/PropertyEditors/Specific/NavigationItemTargetEditor.d.ts +1 -0
  14. package/dist/screen-editor/ScreenEditor/Runtime/screenEditorRuntimeForProfile.d.ts +2 -1
  15. package/dist/screen-editor/SearchableSelect-Cj_cgVO0.js +114 -0
  16. package/dist/screen-editor/{SelectEditor-eeAE7a9p.js → SelectEditor-DStMNhWd.js} +1 -1
  17. package/dist/screen-editor/{SliceEditor-DLqvdYge.js → SliceEditor-C9bAGN4f.js} +1 -1
  18. package/dist/screen-editor/{StateChangeEditors-OQ-OUDrv.js → StateChangeEditors-BkAsY31N.js} +1 -1
  19. package/dist/screen-editor/{TemplatePropertyEditor-D_OaRTPe.js → TemplatePropertyEditor-Dx1dw5aY.js} +1 -1
  20. package/dist/screen-editor/UiProfile/SampleDataSelectionSettings.d.ts +13 -0
  21. package/dist/screen-editor/UiProfile/UiProfileSettings.d.ts +6 -0
  22. package/dist/screen-editor/UiProfile/sampleDataOf.d.ts +27 -0
  23. package/dist/screen-editor/UiProfile/toSceneUiProfile.d.ts +3 -1
  24. package/dist/screen-editor/index.js +1731 -1702
  25. package/dist/screen-editor/screen-editor.css +1 -1
  26. package/dist/screen-editor/{toTemplateSources-CN-BMZ39.js → toTemplateSources-DHyjt_ff.js} +55 -55
  27. package/package.json +3 -3
  28. package/dist/screen-editor/NavigationItemTargetEditor-C3epn45p.js +0 -72
  29. package/dist/screen-editor/SearchableSelect-C4yzIyo_.js +0 -110
@@ -1,6 +1,6 @@
1
- import { useCallback as R, useEffect as x, useLayoutEffect as F, useMemo as q, useRef as L, useState as S } from "react";
1
+ import { useCallback as R, useEffect as x, useLayoutEffect as B, useMemo as q, useRef as L, useState as S } from "react";
2
2
  import { TemplateReferenceSource as O, TemplateScope as U } from "@cratis/scene.model";
3
- import { Fragment as j, jsx as s, jsxs as N } from "react/jsx-runtime";
3
+ import { Fragment as j, jsx as c, jsxs as N } from "react/jsx-runtime";
4
4
  import { createPortal as W } from "react-dom";
5
5
  function G(e, a, o) {
6
6
  const i = o.trim().toLocaleLowerCase();
@@ -30,16 +30,16 @@ function K(e, a, o) {
30
30
  top: Math.max(M, Math.min(e.top - 4, o.height - a.height - M))
31
31
  };
32
32
  }
33
- var B = ({ entries: e, depth: a, anchor: o, openPath: i, label: r, filter: u, onOpen: d, onCollapse: h, onChosen: m }) => {
33
+ var F = ({ entries: e, depth: a, anchor: o, openPath: i, label: r, filter: u, onOpen: d, onCollapse: h, onChosen: m }) => {
34
34
  const p = L(null), [f, _] = S();
35
- F(() => {
35
+ B(() => {
36
36
  const t = p.current?.getBoundingClientRect();
37
37
  if (!t) return;
38
- const c = {
38
+ const s = {
39
39
  width: window.innerWidth,
40
40
  height: window.innerHeight
41
41
  };
42
- _(a === 0 ? J(o, t, c) : K(o, t, c));
42
+ _(a === 0 ? J(o, t, s) : K(o, t, s));
43
43
  }, [
44
44
  o,
45
45
  a,
@@ -59,7 +59,7 @@ var B = ({ entries: e, depth: a, anchor: o, openPath: i, label: r, filter: u, on
59
59
  left: f?.left ?? 0,
60
60
  visibility: f ? "visible" : "hidden"
61
61
  },
62
- children: [u && /* @__PURE__ */ s("input", {
62
+ children: [u && /* @__PURE__ */ c("input", {
63
63
  type: "search",
64
64
  className: "studio-cascade-menu__filter",
65
65
  role: "searchbox",
@@ -71,26 +71,26 @@ var B = ({ entries: e, depth: a, anchor: o, openPath: i, label: r, filter: u, on
71
71
  }), e.map((t) => {
72
72
  switch (t.kind) {
73
73
  case l.Heading:
74
- return /* @__PURE__ */ s("div", {
74
+ return /* @__PURE__ */ c("div", {
75
75
  className: "studio-cascade-menu__heading",
76
76
  role: "presentation",
77
77
  "data-cascade-entry": t.id,
78
78
  children: t.label
79
79
  }, t.id);
80
80
  case l.Subheading:
81
- return /* @__PURE__ */ s("div", {
81
+ return /* @__PURE__ */ c("div", {
82
82
  className: "studio-cascade-menu__subheading",
83
83
  role: "presentation",
84
84
  "data-cascade-entry": t.id,
85
85
  children: t.label
86
86
  }, t.id);
87
87
  case l.Separator:
88
- return /* @__PURE__ */ s("div", {
88
+ return /* @__PURE__ */ c("div", {
89
89
  className: "studio-cascade-menu__separator",
90
90
  role: "separator"
91
91
  }, t.id);
92
92
  case l.Note:
93
- return /* @__PURE__ */ s("div", {
93
+ return /* @__PURE__ */ c("div", {
94
94
  className: "studio-cascade-menu__note",
95
95
  role: "presentation",
96
96
  "data-cascade-entry": t.id,
@@ -105,18 +105,18 @@ var B = ({ entries: e, depth: a, anchor: o, openPath: i, label: r, filter: u, on
105
105
  className: `studio-cascade-menu__row studio-cascade-menu__row--submenu${k?.id === t.id ? " studio-cascade-menu__row--open" : ""}`,
106
106
  "data-cascade-focusable": "",
107
107
  "data-cascade-entry": t.id,
108
- onMouseEnter: (c) => d(a, {
108
+ onMouseEnter: (s) => d(a, {
109
109
  id: t.id,
110
- rect: D(c.currentTarget)
110
+ rect: D(s.currentTarget)
111
111
  }),
112
- onClick: (c) => d(a, {
112
+ onClick: (s) => d(a, {
113
113
  id: t.id,
114
- rect: D(c.currentTarget)
114
+ rect: D(s.currentTarget)
115
115
  }),
116
- children: [/* @__PURE__ */ s("span", {
116
+ children: [/* @__PURE__ */ c("span", {
117
117
  className: "studio-cascade-menu__label",
118
118
  children: t.label
119
- }), /* @__PURE__ */ s("span", {
119
+ }), /* @__PURE__ */ c("span", {
120
120
  className: "studio-cascade-menu__chevron",
121
121
  "aria-hidden": "true",
122
122
  children: "▸"
@@ -140,42 +140,42 @@ var B = ({ entries: e, depth: a, anchor: o, openPath: i, label: r, filter: u, on
140
140
  t.disabledReason || (t.onActivate(), m());
141
141
  },
142
142
  children: [
143
- /* @__PURE__ */ s("span", {
143
+ /* @__PURE__ */ c("span", {
144
144
  className: "studio-cascade-menu__check",
145
145
  "aria-hidden": "true",
146
146
  children: t.checked ? "✓" : ""
147
147
  }),
148
148
  /* @__PURE__ */ N("span", {
149
149
  className: "studio-cascade-menu__text",
150
- children: [/* @__PURE__ */ s("span", {
150
+ children: [/* @__PURE__ */ c("span", {
151
151
  className: "studio-cascade-menu__label",
152
152
  children: t.label
153
- }), t.description && /* @__PURE__ */ s("span", {
153
+ }), t.description && /* @__PURE__ */ c("span", {
154
154
  className: "studio-cascade-menu__description",
155
155
  children: t.description
156
156
  })]
157
157
  }),
158
- t.trailing && /* @__PURE__ */ s("span", {
158
+ t.trailing && /* @__PURE__ */ c("span", {
159
159
  className: "studio-cascade-menu__trailing",
160
160
  children: t.trailing
161
161
  })
162
162
  ]
163
- }), t.actions?.map((c, g) => /* @__PURE__ */ s("button", {
163
+ }), t.actions?.map((s, g) => /* @__PURE__ */ c("button", {
164
164
  type: "button",
165
165
  className: "studio-cascade-menu__secondary",
166
166
  "data-cascade-focusable": "",
167
167
  "data-cascade-entry": `${t.id}:action-${g}`,
168
- title: c.label,
169
- "aria-label": `${c.label}: ${t.label}`,
168
+ title: s.label,
169
+ "aria-label": `${s.label}: ${t.label}`,
170
170
  onClick: () => {
171
- c.onActivate(), c.closes && m();
171
+ s.onActivate(), s.closes && m();
172
172
  },
173
- children: c.label
173
+ children: s.label
174
174
  }, g))]
175
175
  }, t.id);
176
176
  }
177
177
  })]
178
- }), n && n.kind === l.Submenu && /* @__PURE__ */ s(B, {
178
+ }), n && n.kind === l.Submenu && /* @__PURE__ */ c(F, {
179
179
  entries: n.entries,
180
180
  depth: a + 1,
181
181
  anchor: k.rect,
@@ -254,19 +254,19 @@ var v = (e) => {
254
254
  return () => n?.focus?.();
255
255
  }, [a]), x(() => {
256
256
  const n = (t) => {
257
- const c = t.target;
258
- !d.current?.contains(c) && !a?.contains(c) && u();
257
+ const s = t.target;
258
+ !d.current?.contains(s) && !a?.contains(s) && u();
259
259
  };
260
260
  return document.addEventListener("pointerdown", n, !0), () => document.removeEventListener("pointerdown", n, !0);
261
261
  }, [u, a]);
262
- const f = R((n, t) => m((c) => [...c.slice(0, n), t]), []), _ = R((n) => m((t) => t.length > n ? t.slice(0, n) : t), []);
263
- return W(/* @__PURE__ */ s("div", {
262
+ const f = R((n, t) => m((s) => [...s.slice(0, n), t]), []), _ = R((n) => m((t) => t.length > n ? t.slice(0, n) : t), []);
263
+ return W(/* @__PURE__ */ c("div", {
264
264
  ...X,
265
265
  ref: d,
266
266
  className: "studio-cascade-menu",
267
267
  onKeyDown: (n) => {
268
268
  Y(n);
269
- const t = document.activeElement, c = t?.closest(".studio-cascade-menu__panel"), g = Number(c?.dataset.cascadeDepth ?? 0);
269
+ const t = document.activeElement, s = t?.closest(".studio-cascade-menu__panel"), g = Number(s?.dataset.cascadeDepth ?? 0);
270
270
  if (n.key === "Escape") {
271
271
  if (n.preventDefault(), n.stopPropagation(), g > 0) {
272
272
  const b = d.current?.querySelector(`[data-cascade-depth="${g - 1}"] [aria-expanded="true"]`);
@@ -274,16 +274,16 @@ var v = (e) => {
274
274
  } else u();
275
275
  return;
276
276
  }
277
- if (n.key === "Tab" && c) {
278
- const b = C(c);
277
+ if (n.key === "Tab" && s) {
278
+ const b = C(s);
279
279
  if (b.length === 0) return;
280
280
  n.preventDefault();
281
- const $ = b.indexOf(t);
282
- b[n.shiftKey ? $ <= 0 ? b.length - 1 : $ - 1 : ($ + 1) % b.length]?.focus();
281
+ const A = b.indexOf(t);
282
+ b[n.shiftKey ? A <= 0 ? b.length - 1 : A - 1 : (A + 1) % b.length]?.focus();
283
283
  return;
284
284
  }
285
285
  const T = Q(n.key, t instanceof HTMLInputElement);
286
- if (!T || !c) return;
286
+ if (!T || !s) return;
287
287
  if (n.preventDefault(), T === w.Into) {
288
288
  if (t?.getAttribute("aria-haspopup") !== "menu") return;
289
289
  t.click(), requestAnimationFrame(() => {
@@ -298,10 +298,10 @@ var v = (e) => {
298
298
  _(g - 1), b?.focus();
299
299
  return;
300
300
  }
301
- const A = C(c);
302
- A[V(T, A.indexOf(t), A.length)]?.focus();
301
+ const $ = C(s);
302
+ $[V(T, $.indexOf(t), $.length)]?.focus();
303
303
  },
304
- children: /* @__PURE__ */ s(B, {
304
+ children: /* @__PURE__ */ c(F, {
305
305
  entries: o,
306
306
  depth: 0,
307
307
  anchor: p,
@@ -324,7 +324,7 @@ function ee(e, a) {
324
324
  return a ? (e.reference.source === O.Own ? y.Application : y.Blueprint) === a.kind && e.reference.id.toLowerCase() === a.id.toLowerCase() : !1;
325
325
  }
326
326
  function te(e, a, o, i, r) {
327
- const u = (n, t, c) => ({
327
+ const u = (n, t, s) => ({
328
328
  kind: l.Item,
329
329
  id: t,
330
330
  label: n.displayName ?? n.name,
@@ -333,7 +333,7 @@ function te(e, a, o, i, r) {
333
333
  label: i.preview,
334
334
  closes: !0,
335
335
  onActivate: () => r.onPreview(n)
336
- }] : [], ...c !== void 0 && r.onCopyToMine ? [{
336
+ }] : [], ...s !== void 0 && r.onCopyToMine ? [{
337
337
  label: i.copyToMine,
338
338
  closes: !0,
339
339
  onActivate: () => r.onCopyToMine(n)
@@ -343,7 +343,7 @@ function te(e, a, o, i, r) {
343
343
  kind: l.Subheading,
344
344
  id: `own-category-${t}`,
345
345
  label: n.category ?? i.uncategorized
346
- }] : [], ...n.templates.map((c) => u(c, `own:${c.reference.id}`))]), p = e.blueprints.map((n) => ({
346
+ }] : [], ...n.templates.map((s) => u(s, `own:${s.reference.id}`))]), p = e.blueprints.map((n) => ({
347
347
  blueprint: n,
348
348
  categories: H(n.categories, n.blueprint, o)
349
349
  })).filter((n) => n.categories.length > 0), f = p.length === 0 ? [] : [{
@@ -358,11 +358,11 @@ function te(e, a, o, i, r) {
358
358
  kind: l.Submenu,
359
359
  id: `blueprint:${n.blueprint}`,
360
360
  label: E(n),
361
- entries: t.flatMap((c, g) => [{
361
+ entries: t.flatMap((s, g) => [{
362
362
  kind: l.Heading,
363
363
  id: `blueprint:${n.blueprint}:category-${g}`,
364
- label: [E(n), c.category ?? i.uncategorized].join(z)
365
- }, ...c.templates.map((T) => u(T, `blueprint:${n.blueprint}:${T.reference.id}`, n.blueprint))])
364
+ label: [E(n), s.category ?? i.uncategorized].join(z)
365
+ }, ...s.templates.map((T) => u(T, `blueprint:${n.blueprint}:${T.reference.id}`, n.blueprint))])
366
366
  }))]
367
367
  }], _ = [...r.onNewFromCurrent ? [{
368
368
  kind: l.Item,
@@ -407,7 +407,7 @@ var ae = ({ anchor: e, trigger: a, applicable: o, current: i, labels: r, handler
407
407
  r,
408
408
  u
409
409
  ]);
410
- return /* @__PURE__ */ s(Z, {
410
+ return /* @__PURE__ */ c(Z, {
411
411
  anchor: e,
412
412
  trigger: a,
413
413
  entries: p,
@@ -419,7 +419,7 @@ var ae = ({ anchor: e, trigger: a, applicable: o, current: i, labels: r, handler
419
419
  onChange: m
420
420
  }
421
421
  });
422
- }, ce = ({ applicable: e, current: a, currentLabel: o, status: i, labels: r, handlers: u, ariaLabel: d, disabled: h = !1 }) => {
422
+ }, se = ({ applicable: e, current: a, currentLabel: o, status: i, labels: r, handlers: u, ariaLabel: d, disabled: h = !1 }) => {
423
423
  const m = L(null), [p, f] = S();
424
424
  return /* @__PURE__ */ N("div", {
425
425
  className: "studio-template-picker",
@@ -433,20 +433,20 @@ var ae = ({ anchor: e, trigger: a, applicable: o, current: i, labels: r, handler
433
433
  "aria-label": d,
434
434
  disabled: h,
435
435
  onClick: () => f((_) => _ ? void 0 : m.current?.getBoundingClientRect()),
436
- children: [/* @__PURE__ */ s("span", {
436
+ children: [/* @__PURE__ */ c("span", {
437
437
  className: "studio-template-picker__value",
438
438
  children: o ?? r.noTemplate
439
- }), /* @__PURE__ */ s("span", {
439
+ }), /* @__PURE__ */ c("span", {
440
440
  className: "studio-template-picker__caret",
441
441
  "aria-hidden": "true",
442
442
  children: "▾"
443
443
  })]
444
444
  }),
445
- i && /* @__PURE__ */ s("span", {
445
+ i && /* @__PURE__ */ c("span", {
446
446
  className: "studio-template-picker__status",
447
447
  children: i
448
448
  }),
449
- p && /* @__PURE__ */ s(ae, {
449
+ p && /* @__PURE__ */ c(ae, {
450
450
  anchor: p,
451
451
  trigger: m.current,
452
452
  applicable: e,
@@ -458,7 +458,7 @@ var ae = ({ anchor: e, trigger: a, applicable: o, current: i, labels: r, handler
458
458
  ]
459
459
  });
460
460
  };
461
- function se({ bundles: e, profile: a, scope: o }) {
461
+ function ce({ bundles: e, profile: a, scope: o }) {
462
462
  const i = a.layout ? [...e].reverse().flatMap((r) => [...r.layouts ?? []]).find((r) => r.name === a.layout) : void 0;
463
463
  return {
464
464
  scope: o ?? U.Slice,
@@ -486,7 +486,7 @@ function ue(e) {
486
486
  }
487
487
  export {
488
488
  y as i,
489
- se as n,
490
- ce as r,
489
+ ce as n,
490
+ se as r,
491
491
  ue as t
492
492
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cratis/event-models",
3
- "version": "0.183.1",
3
+ "version": "0.185.0",
4
4
  "description": "The Cratis event model board as a configurable React component.",
5
5
  "license": "MIT",
6
6
  "author": "Cratis",
@@ -68,7 +68,7 @@
68
68
  "peerDependencies": {
69
69
  "@cratis/components": "^4.26.2",
70
70
  "@cratis/fundamentals": "^7.22.0",
71
- "@cratis/scene": "^0.183.1",
71
+ "@cratis/scene": "^0.185.0",
72
72
  "@cratis/scene.blueprint.components": "^4.12.0",
73
73
  "@cratis/scene.blueprint.default": "^4.12.0",
74
74
  "@cratis/scene.components": "^4.12.0",
@@ -93,7 +93,7 @@
93
93
  "devDependencies": {
94
94
  "@cratis/components": "^4.26.2",
95
95
  "@cratis/fundamentals": "^7.22.0",
96
- "@cratis/scene": "0.183.1",
96
+ "@cratis/scene": "0.185.0",
97
97
  "@cratis/scene.blueprint.components": "4.30.0",
98
98
  "@cratis/scene.blueprint.default": "4.30.0",
99
99
  "@cratis/scene.components": "4.30.0",
@@ -1,72 +0,0 @@
1
- import { o as f } from "./structuredValue-vqCZttsk.js";
2
- import { jsx as n, jsxs as c } from "react/jsx-runtime";
3
- var h = (t) => f(t) && typeof t.module == "string" && t.module !== "" ? {
4
- module: t.module,
5
- ...typeof t.feature == "string" && t.feature !== "" ? { feature: t.feature } : {}
6
- } : void 0, l = (t, e) => t?.module === e?.module && (t?.feature ?? "") === (e?.feature ?? "");
7
- function m(t, e, d, s) {
8
- return e.flatMap((a) => {
9
- const i = d ? `${d}.${a.id}` : a.id;
10
- return [{
11
- key: `${t}.${i}`,
12
- label: a.name,
13
- depth: s,
14
- target: {
15
- module: t,
16
- feature: i
17
- },
18
- module: !1
19
- }, ...m(t, a.features, i, s + 1)];
20
- });
21
- }
22
- var v = (t) => t.modules.flatMap((e) => [{
23
- key: e.id,
24
- label: e.name,
25
- depth: 0,
26
- target: { module: e.id },
27
- module: !0
28
- }, ...m(e.id, e.features, "", 1)]), k = ({ value: t, onChange: e, context: d, disabled: s, id: a }) => {
29
- const i = d.strings.editors.navigationItemTarget, p = d.lookups.structure ?? { modules: [] }, u = v(p), r = h(t), g = r !== void 0 && !u.some((o) => l(o.target, r));
30
- return /* @__PURE__ */ c("div", {
31
- id: a,
32
- className: "studio-editor-target",
33
- role: "listbox",
34
- "aria-labelledby": `${a}-label`,
35
- "aria-disabled": s,
36
- children: [
37
- /* @__PURE__ */ n("button", {
38
- type: "button",
39
- role: "option",
40
- "aria-selected": r === void 0,
41
- disabled: s,
42
- className: "studio-editor-target__row",
43
- "data-chosen": r === void 0 || void 0,
44
- onClick: () => e(void 0),
45
- children: i.notLinked
46
- }),
47
- u.map((o) => /* @__PURE__ */ c("button", {
48
- type: "button",
49
- role: "option",
50
- "aria-selected": l(o.target, r),
51
- disabled: s,
52
- "data-module": o.module || void 0,
53
- "data-chosen": l(o.target, r) || void 0,
54
- className: "studio-editor-target__row",
55
- style: { paddingInlineStart: `${12 + o.depth * 16}px` },
56
- onClick: () => e(o.target),
57
- children: [/* @__PURE__ */ n("span", { children: o.label }), o.module && /* @__PURE__ */ n("span", {
58
- className: "studio-editor-target__kind",
59
- children: i.module
60
- })]
61
- }, o.key)),
62
- g && /* @__PURE__ */ n("span", {
63
- className: "studio-editor-chip studio-editor-chip--error",
64
- role: "alert",
65
- children: i.unresolved([r.module, r.feature].filter(Boolean).join(" › "))
66
- })
67
- ]
68
- });
69
- };
70
- export {
71
- k as NavigationItemTargetEditor
72
- };
@@ -1,110 +0,0 @@
1
- import { useId as P, useMemo as Q, useRef as R, useState as p } from "react";
2
- import { jsx as l, jsxs as d } from "react/jsx-runtime";
3
- function T(u, a) {
4
- const s = a.trim().toLowerCase();
5
- return u.filter((o) => s === "" || o.label.toLowerCase().includes(s) || (o.group ?? "").toLowerCase().includes(s));
6
- }
7
- var $ = ({ id: u, options: a, value: s, onChange: o, disabled: b, invalid: A, placeholder: j, searchLabel: v, emptyLabel: O, clearLabel: E, clearable: I, renderClosed: g, inline: i, ...y }) => {
8
- const [K, w] = p(!1), c = i === !0 || K, [h, N] = p(""), [k, m] = p(0), x = P(), D = R(null), f = a.find((e) => e.value === s), n = Q(() => T(a, h), [a, h]), r = n.filter((e) => e.disabled !== !0), _ = () => {
9
- i !== !0 && w(!1), N("");
10
- }, C = (e) => {
11
- e.disabled || (o(e.value), _());
12
- }, L = (e) => {
13
- if (e.key === "Escape") {
14
- e.stopPropagation(), _();
15
- return;
16
- }
17
- if (e.key === "ArrowDown" || e.key === "ArrowUp") {
18
- if (e.preventDefault(), r.length === 0) return;
19
- m((t) => (t + (e.key === "ArrowDown" ? 1 : -1) + r.length) % r.length);
20
- } else if (e.key === "Enter") {
21
- e.preventDefault();
22
- const t = r[Math.min(k, r.length - 1)];
23
- t && C(t);
24
- }
25
- }, M = n.some((e) => e.section !== void 0), S = (e) => M ? e.section ?? "" : e.group ?? "", q = [...new Set(n.map(S))].sort((e, t) => M ? 0 : e === "" ? -1 : t === "" ? 1 : 0), B = r[Math.min(k, Math.max(r.length - 1, 0))]?.value;
26
- return /* @__PURE__ */ d("div", {
27
- ref: D,
28
- className: "studio-editor-select",
29
- onKeyDown: c ? L : void 0,
30
- onBlur: (e) => {
31
- D.current?.contains(e.relatedTarget) || _();
32
- },
33
- children: [
34
- i !== !0 && /* @__PURE__ */ l("button", {
35
- type: "button",
36
- id: u,
37
- role: "combobox",
38
- "aria-haspopup": "listbox",
39
- "aria-expanded": c,
40
- "aria-controls": c ? x : void 0,
41
- "aria-invalid": A || void 0,
42
- className: "studio-editor-select__trigger",
43
- disabled: b,
44
- ...y,
45
- onClick: () => {
46
- w(!c), m(0);
47
- },
48
- children: g ? g(f) : /* @__PURE__ */ l("span", {
49
- className: f ? void 0 : "studio-editor-select__placeholder",
50
- children: f?.label ?? j
51
- })
52
- }),
53
- I === !0 && s !== void 0 && !b && /* @__PURE__ */ l("button", {
54
- type: "button",
55
- className: "studio-editor-select__clear",
56
- "aria-label": E,
57
- onClick: () => o(void 0),
58
- children: "×"
59
- }),
60
- c && /* @__PURE__ */ d("div", {
61
- className: `studio-editor-select__panel${i === !0 ? " studio-editor-select__panel--inline" : ""}`,
62
- children: [(i !== !0 || a.length > 10) && /* @__PURE__ */ l("input", {
63
- type: "search",
64
- autoFocus: !0,
65
- className: "studio-editor-select__search",
66
- "aria-label": v,
67
- placeholder: v,
68
- value: h,
69
- onChange: (e) => {
70
- N(e.target.value), m(0);
71
- }
72
- }), /* @__PURE__ */ d("ul", {
73
- id: x,
74
- role: "listbox",
75
- "aria-labelledby": y["aria-labelledby"],
76
- className: "studio-editor-select__options",
77
- children: [n.length === 0 && /* @__PURE__ */ l("li", {
78
- className: "studio-editor-select__empty",
79
- children: O
80
- }), q.map((e) => /* @__PURE__ */ d("li", {
81
- role: "presentation",
82
- children: [e !== "" && /* @__PURE__ */ l("div", {
83
- className: "studio-editor-select__group",
84
- children: e
85
- }), /* @__PURE__ */ l("ul", {
86
- role: "presentation",
87
- children: n.filter((t) => S(t) === e).map((t) => /* @__PURE__ */ d("li", {
88
- role: "option",
89
- "aria-selected": t.value === s,
90
- "aria-disabled": t.disabled || void 0,
91
- className: [
92
- "studio-editor-select__option",
93
- t.value === B ? "studio-editor-select__option--active" : "",
94
- t.value === s ? "studio-editor-select__option--chosen" : ""
95
- ].join(" ").trim(),
96
- title: t.reason ?? (t.group ? t.group : void 0),
97
- onMouseDown: (F) => F.preventDefault(),
98
- onClick: () => C(t),
99
- children: [/* @__PURE__ */ l("span", { children: t.label }), t.trailing !== void 0 ? /* @__PURE__ */ l("small", { children: t.trailing }) : t.disabled && t.reason && /* @__PURE__ */ l("small", { children: t.reason })]
100
- }, t.value))
101
- })]
102
- }, e))]
103
- })]
104
- })
105
- ]
106
- });
107
- };
108
- export {
109
- $ as t
110
- };