@serkonda7/solid-components 0.3.0 → 0.3.2

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 (5) hide show
  1. package/README.md +1 -1
  2. package/dist/combobox.d.ts +5 -2
  3. package/dist/index.js +262 -252
  4. package/dist/styles.css +20 -0
  5. package/package.json +1 -1
package/README.md CHANGED
@@ -36,7 +36,7 @@ export default defineConfig({ plugins: [tablerIcons(), solid()] })
36
36
  These components are available:
37
37
  - `DataTable` - generic table with optional sorting, actions, loading, empty states, and column customizer.
38
38
  - `FilterTable` - `DataTable` with filtering: quick search, a grouped filter form, and removable filter pills.
39
- - `Combobox` - searchable, accessible dropdown with keyboard navigation, option icons, a detail column, and an optional "Add …" entry.
39
+ - `Combobox` - searchable, accessible dropdown with keyboard navigation, option icons and previews, a detail column, and an optional "Add …" entry.
40
40
  - `SearchBar` - search input with clear button and a global Ctrl/Cmd+K focus shortcut.
41
41
 
42
42
  For the full API, examples, and agent notes, see [docs.md](docs.md).
package/dist/combobox.d.ts CHANGED
@@ -11,6 +11,8 @@ export interface ComboboxOption {
11
11
  detail?: string;
12
12
  /** Glyph shown before the label, in the list and in the closed input. */
13
13
  icon?: ComboboxIcon;
14
+ /** Rendered in a panel beside the open list while this option is highlighted. */
15
+ preview?: Component;
14
16
  }
15
17
  export interface ComboboxProps {
16
18
  /** Input id, for pairing with an external `<label for>`. Generated when omitted. */
@@ -44,7 +46,8 @@ export interface ComboboxProps {
44
46
  /**
45
47
  * Searchable dropdown of `options`, with an optional leading empty choice.
46
48
  * A text combobox: typing filters the options by label and detail, arrow keys
47
- * move the highlight (wrapping around), Enter picks it, Escape closes. The
48
- * input shows the selected label while closed; the value sits in `data-value`.
49
+ * move the highlight (wrapping around), Enter picks it, Tab picks it and moves
50
+ * focus on, Escape closes. The input shows the selected label while closed;
51
+ * the value sits in `data-value`.
49
52
  */
50
53
  export declare function Combobox(props: ComboboxProps): JSX.Element;
package/dist/index.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { Dynamic as e, className as t, createComponent as n, delegateEvents as r, effect as i, insert as a, memo as o, mergeProps as s, setAttribute as c, spread as l, style as u, template as d, use as f } from "solid-js/web";
2
- import { For as p, Show as m, children as ee, createEffect as h, createMemo as g, createSignal as _, createUniqueId as v, on as y, onCleanup as b, onMount as x, splitProps as S, untrack as C } from "solid-js";
2
+ import { For as p, Show as m, children as h, createEffect as g, createMemo as _, createSignal as v, createUniqueId as y, on as b, onCleanup as x, onMount as S, splitProps as C, untrack as w } from "solid-js";
3
3
  //#region node_modules/@tabler/icons-solidjs/dist/source/defaultAttributes.js
4
- var w = {
4
+ var T = {
5
5
  outline: {
6
6
  xmlns: "http://www.w3.org/2000/svg",
7
7
  width: 24,
@@ -21,9 +21,9 @@ var w = {
21
21
  fill: "currentColor",
22
22
  stroke: "none"
23
23
  }
24
- }, T = /*#__PURE__*/ d("<svg>"), E = /*#__PURE__*/ d("<title>"), D = (t, r, i, c) => {
24
+ }, E = /*#__PURE__*/ d("<svg>"), D = /*#__PURE__*/ d("<title>"), O = (t, r, i, c) => {
25
25
  let u = (i) => {
26
- let [u, d] = S(i, [
26
+ let [u, d] = C(i, [
27
27
  "color",
28
28
  "size",
29
29
  "stroke",
@@ -31,9 +31,9 @@ var w = {
31
31
  "title",
32
32
  "children",
33
33
  "class"
34
- ]), f = w[t], p = u.stroke ?? u.strokeWidth;
34
+ ]), f = T[t], p = u.stroke ?? u.strokeWidth;
35
35
  return (() => {
36
- var i = T();
36
+ var i = E();
37
37
  return l(i, s(f, d, {
38
38
  get width() {
39
39
  return o(() => u.size != null)() ? u.size : f.width;
@@ -50,58 +50,58 @@ var w = {
50
50
  }), !0, !0), a(i, (() => {
51
51
  var e = o(() => u.title != null);
52
52
  return () => e() && (() => {
53
- var e = E();
53
+ var e = D();
54
54
  return a(e, () => u.title), e;
55
55
  })();
56
56
  })(), null), a(i, () => c.map(([t, r]) => n(e, s({ component: t }, r))), null), a(i, () => u.children, null), i;
57
57
  })();
58
58
  };
59
59
  return u.displayName = `${i}`, u;
60
- }, te = D("outline", "chevron-down", "ChevronDown", [["path", { d: "M6 9l6 6l6 -6" }]]), O = D("outline", "plus", "Plus", [["path", { d: "M12 5l0 14" }], ["path", { d: "M5 12l14 0" }]]), ne = /*#__PURE__*/ d("<span class=combobox-detail>"), re = /*#__PURE__*/ d("<div role=option class=combobox-option><span class=combobox-option-label>"), k = /*#__PURE__*/ d("<span class=combobox-option-icon aria-hidden=true>"), A = /*#__PURE__*/ d("<div role=option class=\"combobox-option combobox-option-add\">"), j = /*#__PURE__*/ d("<div class=combobox-list role=listbox>"), M = /*#__PURE__*/ d("<div class=combobox-empty>"), N = /*#__PURE__*/ d("<span class=combobox-value aria-hidden=true><span class=combobox-option-label></span><span class=combobox-detail>"), P = /*#__PURE__*/ d("<div><input class=combobox-input role=combobox aria-autocomplete=list autocomplete=off>"), F = /*#__PURE__*/ d("<span class=combobox-icon aria-hidden=true>");
61
- function I(r) {
62
- let s, l, u = v(), d = () => r.id ?? u, ee = () => `${d()}-listbox`, y = (e) => `${d()}-option-${e}`, [b, S] = _(!1), [C, w] = _(""), [T, E] = _(0), D = g(() => r.emptyLabel === void 0 ? r.options : [{
60
+ }, ee = O("outline", "chevron-down", "ChevronDown", [["path", { d: "M6 9l6 6l6 -6" }]]), k = O("outline", "plus", "Plus", [["path", { d: "M12 5l0 14" }], ["path", { d: "M5 12l14 0" }]]), te = /*#__PURE__*/ d("<span class=combobox-detail>"), A = /*#__PURE__*/ d("<div role=option class=combobox-option><span class=combobox-option-label>"), j = /*#__PURE__*/ d("<span class=combobox-option-icon aria-hidden=true>"), ne = /*#__PURE__*/ d("<div role=option class=\"combobox-option combobox-option-add\">"), M = /*#__PURE__*/ d("<div class=combobox-list role=listbox>"), N = /*#__PURE__*/ d("<div class=combobox-empty>"), P = /*#__PURE__*/ d("<span class=combobox-value aria-hidden=true><span class=combobox-option-label></span><span class=combobox-detail>"), F = /*#__PURE__*/ d("<div><input class=combobox-input role=combobox aria-autocomplete=list autocomplete=off>"), I = /*#__PURE__*/ d("<span class=combobox-icon aria-hidden=true>"), re = /*#__PURE__*/ d("<div class=combobox-preview aria-hidden=true>");
61
+ function L(r) {
62
+ let s, l, u = y(), d = () => r.id ?? u, h = () => `${d()}-listbox`, b = (e) => `${d()}-option-${e}`, [x, C] = v(!1), [w, T] = v(""), [E, D] = v(0), O = _(() => r.emptyLabel === void 0 ? r.options : [{
63
63
  value: "",
64
64
  label: r.emptyLabel
65
- }, ...r.options]), I = g(() => r.value === "" ? void 0 : D().find((e) => String(e.value) === r.value)), L = g(() => {
66
- let e = C().trim().toLowerCase();
67
- return e === "" ? D() : D().filter((t) => t.label.toLowerCase().includes(e) || (t.detail?.toLowerCase().includes(e) ?? !1));
68
- }), ie = () => r.options.some((e) => e.detail !== void 0), R = () => L().length, ae = () => L().length + +!!r.onAdd, oe = () => !r.disabled && r.onChange !== void 0;
69
- x(() => {
65
+ }, ...r.options]), L = _(() => r.value === "" ? void 0 : O().find((e) => String(e.value) === r.value)), R = _(() => {
66
+ let e = w().trim().toLowerCase();
67
+ return e === "" ? O() : O().filter((t) => t.label.toLowerCase().includes(e) || (t.detail?.toLowerCase().includes(e) ?? !1));
68
+ }), ie = () => r.options.some((e) => e.detail !== void 0), z = () => R().length, ae = () => R().length + +!!r.onAdd, oe = () => !r.disabled && r.onChange !== void 0, B = () => R()[E()]?.preview;
69
+ S(() => {
70
70
  r.autofocus === !0 && s?.focus();
71
- }), h(() => {
72
- b() && l?.querySelector(`[data-index="${T()}"]`)?.scrollIntoView({ block: "nearest" });
71
+ }), g(() => {
72
+ x() && l?.querySelector(`[data-index="${E()}"]`)?.scrollIntoView({ block: "nearest" });
73
73
  });
74
- function z() {
75
- if (b() || !oe()) return;
76
- w("");
77
- let e = D().findIndex((e) => String(e.value) === r.value);
78
- E(Math.max(e, 0)), S(!0), r.onOpen?.();
74
+ function V() {
75
+ if (x() || !oe()) return;
76
+ T("");
77
+ let e = O().findIndex((e) => String(e.value) === r.value);
78
+ D(Math.max(e, 0)), C(!0), r.onOpen?.();
79
79
  }
80
- function B(e) {
81
- if (S(!1), r.onAdd && e === R()) {
82
- r.onAdd(C().trim());
80
+ function H(e) {
81
+ if (C(!1), r.onAdd && e === z()) {
82
+ r.onAdd(w().trim());
83
83
  return;
84
84
  }
85
- let t = L()[e];
85
+ let t = R()[e];
86
86
  t && String(t.value) !== r.value && r.onChange?.(String(t.value));
87
87
  }
88
- function V(e) {
88
+ function se(e) {
89
89
  let t = ae();
90
- b() ? t > 0 && E((T() + e + t) % t) : z();
90
+ x() ? t > 0 && D((E() + e + t) % t) : V();
91
91
  }
92
- function H(e) {
93
- e.key === "ArrowDown" || e.key === "ArrowUp" ? (e.preventDefault(), V(e.key === "ArrowDown" ? 1 : -1)) : b() && (e.key === "Enter" ? (e.preventDefault(), B(T())) : e.key === "Escape" && (e.preventDefault(), e.stopPropagation(), S(!1)));
92
+ function U(e) {
93
+ e.key === "ArrowDown" || e.key === "ArrowUp" ? (e.preventDefault(), se(e.key === "ArrowDown" ? 1 : -1)) : x() && (e.key === "Enter" ? (e.preventDefault(), H(E())) : e.key === "Tab" ? r.onAdd && E() === z() ? C(!1) : H(E()) : e.key === "Escape" && (e.preventDefault(), e.stopPropagation(), C(!1)));
94
94
  }
95
- let se = () => b() ? I()?.label ?? r.emptyLabel ?? r.searchLabel ?? "Search" : r.emptyLabel ?? r.placeholder;
96
- function U(t, o) {
95
+ let W = () => x() ? L()?.label ?? r.emptyLabel ?? r.searchLabel ?? "Search" : r.emptyLabel ?? r.placeholder;
96
+ function G(t, o) {
97
97
  return (() => {
98
- var s = re(), l = s.firstChild;
99
- return s.$$click = () => B(o()), s.$$mousemove = () => E(o()), s.$$mousedown = (e) => e.preventDefault(), a(l, n(m, {
98
+ var s = A(), l = s.firstChild;
99
+ return s.$$click = () => H(o()), s.$$mousemove = () => D(o()), s.$$mousedown = (e) => e.preventDefault(), a(l, n(m, {
100
100
  get when() {
101
101
  return t.icon;
102
102
  },
103
103
  children: (t) => (() => {
104
- var r = k();
104
+ var r = j();
105
105
  return a(r, n(e, {
106
106
  get component() {
107
107
  return t();
@@ -114,11 +114,11 @@ function I(r) {
114
114
  return t.detail;
115
115
  },
116
116
  get children() {
117
- var e = ne();
117
+ var e = te();
118
118
  return a(e, () => t.detail), e;
119
119
  }
120
120
  }), null), i((e) => {
121
- var n = y(o()), i = o(), a = String(t.value) === r.value, l = o() === T(), u = t.value === "";
121
+ var n = b(o()), i = o(), a = String(t.value) === r.value, l = o() === E(), u = t.value === "";
122
122
  return n !== e.e && c(s, "id", e.e = n), i !== e.t && c(s, "data-index", e.t = i), a !== e.a && c(s, "aria-selected", e.a = a), l !== e.o && s.classList.toggle("combobox-option-active", e.o = l), u !== e.i && s.classList.toggle("combobox-option-empty", e.i = u), e;
123
123
  }, {
124
124
  e: void 0,
@@ -129,14 +129,14 @@ function I(r) {
129
129
  }), s;
130
130
  })();
131
131
  }
132
- function W() {
132
+ function K() {
133
133
  return (() => {
134
- var e = A();
135
- return e.$$click = () => B(R()), e.$$mousemove = () => E(R()), e.$$mousedown = (e) => e.preventDefault(), c(e, "aria-selected", !1), a(e, n(O, {
134
+ var e = ne();
135
+ return e.$$click = () => H(z()), e.$$mousemove = () => D(z()), e.$$mousedown = (e) => e.preventDefault(), c(e, "aria-selected", !1), a(e, n(k, {
136
136
  size: 14,
137
137
  "aria-hidden": "true"
138
138
  }), null), a(e, () => r.addLabel ?? "Add", null), i((t) => {
139
- var n = y(R()), r = R(), i = R() === T();
139
+ var n = b(z()), r = z(), i = z() === E();
140
140
  return n !== t.e && c(e, "id", t.e = n), r !== t.t && c(e, "data-index", t.t = r), i !== t.a && e.classList.toggle("combobox-option-active", t.a = i), t;
141
141
  }, {
142
142
  e: void 0,
@@ -145,29 +145,29 @@ function I(r) {
145
145
  }), e;
146
146
  })();
147
147
  }
148
- function G() {
148
+ function q() {
149
149
  return (() => {
150
- var e = j(), t = l;
150
+ var e = M(), t = l;
151
151
  return typeof t == "function" ? f(t, e) : l = e, a(e, n(p, {
152
152
  get each() {
153
- return L();
153
+ return R();
154
154
  },
155
155
  get fallback() {
156
156
  return (() => {
157
- var e = M();
157
+ var e = N();
158
158
  return a(e, () => r.noMatchesLabel ?? "No matching objects"), e;
159
159
  })();
160
160
  },
161
- children: U
161
+ children: G
162
162
  }), null), a(e, n(m, {
163
163
  get when() {
164
164
  return r.onAdd;
165
165
  },
166
166
  get children() {
167
- return W();
167
+ return K();
168
168
  }
169
169
  }), null), i((t) => {
170
- var n = !!ie(), r = ee();
170
+ var n = !!ie(), r = h();
171
171
  return n !== t.e && e.classList.toggle("combobox-list-detail", t.e = n), r !== t.t && c(e, "id", t.t = r), t;
172
172
  }, {
173
173
  e: void 0,
@@ -176,18 +176,18 @@ function I(r) {
176
176
  })();
177
177
  }
178
178
  return (() => {
179
- var l = P(), u = l.firstChild;
180
- u.addEventListener("blur", () => S(!1)), u.$$keydown = H, u.$$input = (e) => {
179
+ var l = F(), u = l.firstChild;
180
+ u.addEventListener("blur", () => C(!1)), u.$$keydown = U, u.$$input = (e) => {
181
181
  let t = e.currentTarget.value;
182
- z(), w(t), E(0);
183
- }, u.$$click = z;
182
+ V(), T(t), D(0);
183
+ }, u.$$click = V;
184
184
  var p = s;
185
185
  return typeof p == "function" ? f(p, u) : s = u, a(l, n(m, {
186
186
  get when() {
187
- return o(() => !b())() && I()?.icon;
187
+ return o(() => !x())() && L()?.icon;
188
188
  },
189
189
  children: (t) => (() => {
190
- var r = F();
190
+ var r = I();
191
191
  return a(r, n(e, {
192
192
  get component() {
193
193
  return t();
@@ -197,26 +197,36 @@ function I(r) {
197
197
  })()
198
198
  }), null), a(l, n(m, {
199
199
  get when() {
200
- return o(() => !b())() && I()?.detail;
200
+ return o(() => !x())() && L()?.detail;
201
201
  },
202
202
  get children() {
203
- var e = N(), t = e.firstChild, n = t.nextSibling;
204
- return a(t, () => I()?.label), a(n, () => I()?.detail), e;
203
+ var e = P(), t = e.firstChild, n = t.nextSibling;
204
+ return a(t, () => L()?.label), a(n, () => L()?.detail), e;
205
205
  }
206
- }), null), a(l, n(te, {
206
+ }), null), a(l, n(ee, {
207
207
  class: "combobox-chevron",
208
208
  size: 16,
209
209
  "aria-hidden": "true"
210
210
  }), null), a(l, n(m, {
211
211
  get when() {
212
- return b();
212
+ return x();
213
213
  },
214
214
  get children() {
215
- return G();
215
+ return q();
216
216
  }
217
+ }), null), a(l, n(m, {
218
+ get when() {
219
+ return o(() => !!x())() && B();
220
+ },
221
+ children: (t) => (() => {
222
+ var r = re();
223
+ return a(r, n(e, { get component() {
224
+ return t();
225
+ } })), r;
226
+ })()
217
227
  }), null), i((e) => {
218
- var n = r.class ? `combobox ${r.class}` : "combobox", i = !!b(), a = !(b() || !I()?.detail), o = !(b() || I()?.icon === void 0), s = d(), f = b(), p = ee(), m = b() && ae() > 0 ? y(T()) : void 0, h = r.ariaLabel, g = r.describedBy, _ = r.required, v = r.disabled, x = r.onChange === void 0, S = r.value, C = se();
219
- return n !== e.e && t(l, e.e = n), i !== e.t && l.classList.toggle("combobox-open", e.t = i), a !== e.a && l.classList.toggle("combobox-with-detail", e.a = a), o !== e.o && l.classList.toggle("combobox-with-icon", e.o = o), s !== e.i && c(u, "id", e.i = s), f !== e.n && c(u, "aria-expanded", e.n = f), p !== e.s && c(u, "aria-controls", e.s = p), m !== e.h && c(u, "aria-activedescendant", e.h = m), h !== e.r && c(u, "aria-label", e.r = h), g !== e.d && c(u, "aria-describedby", e.d = g), _ !== e.l && (u.required = e.l = _), v !== e.u && (u.disabled = e.u = v), x !== e.c && (u.readOnly = e.c = x), S !== e.w && c(u, "data-value", e.w = S), C !== e.m && c(u, "placeholder", e.m = C), e;
228
+ var n = r.class ? `combobox ${r.class}` : "combobox", i = !!x(), a = !(x() || !L()?.detail), o = !(x() || L()?.icon === void 0), s = d(), f = x(), p = h(), m = x() && ae() > 0 ? b(E()) : void 0, g = r.ariaLabel, _ = r.describedBy, v = r.required, y = r.disabled, S = r.onChange === void 0, C = r.value, w = W();
229
+ return n !== e.e && t(l, e.e = n), i !== e.t && l.classList.toggle("combobox-open", e.t = i), a !== e.a && l.classList.toggle("combobox-with-detail", e.a = a), o !== e.o && l.classList.toggle("combobox-with-icon", e.o = o), s !== e.i && c(u, "id", e.i = s), f !== e.n && c(u, "aria-expanded", e.n = f), p !== e.s && c(u, "aria-controls", e.s = p), m !== e.h && c(u, "aria-activedescendant", e.h = m), g !== e.r && c(u, "aria-label", e.r = g), _ !== e.d && c(u, "aria-describedby", e.d = _), v !== e.l && (u.required = e.l = v), y !== e.u && (u.disabled = e.u = y), S !== e.c && (u.readOnly = e.c = S), C !== e.w && c(u, "data-value", e.w = C), w !== e.m && c(u, "placeholder", e.m = w), e;
220
230
  }, {
221
231
  e: void 0,
222
232
  t: void 0,
@@ -233,7 +243,7 @@ function I(r) {
233
243
  c: void 0,
234
244
  w: void 0,
235
245
  m: void 0
236
- }), i(() => u.value = b() ? C() : I()?.label ?? ""), l;
246
+ }), i(() => u.value = x() ? w() : L()?.label ?? ""), l;
237
247
  })();
238
248
  }
239
249
  r([
@@ -245,11 +255,11 @@ r([
245
255
  ]);
246
256
  //#endregion
247
257
  //#region node_modules/@tabler/icons-solidjs/dist/source/icons/IconMenu.js
248
- var L = D("outline", "menu", "Menu", [["path", { d: "M4 8l16 0" }], ["path", { d: "M4 16l16 0" }]]), ie = /*#__PURE__*/ d("<li class=data-table-customizer-item draggable=true><label class=data-table-customizer-option><input type=checkbox>"), R = /*#__PURE__*/ d("<div role=dialog class=data-table-customizer-panel><p class=data-table-customizer-title></p><ul class=data-table-customizer-list></ul><div class=data-table-customizer-actions><button type=button></button><button type=button>"), ae = /*#__PURE__*/ d("<div class=data-table-customizer><button type=button class=data-table-customizer-button aria-haspopup=dialog><span aria-hidden=true>⚙</span> "), oe = /*#__PURE__*/ d("<button type=button class=data-table-sort><span class=data-table-sort-indicator aria-hidden=true>"), z = /*#__PURE__*/ d("<span class=data-table-resize-handle role=separator aria-orientation=vertical tabindex=0>"), B = /*#__PURE__*/ d("<th>"), V = /*#__PURE__*/ d("<td>"), H = /*#__PURE__*/ d("<tr>"), se = /*#__PURE__*/ d("<div class=data-table-toolbar-start>"), U = /*#__PURE__*/ d("<div class=data-table-toolbar>"), W = /*#__PURE__*/ d("<th>Actions"), G = /*#__PURE__*/ d("<div><div class=data-table-scroll><table class=data-table><thead><tr></tr></thead><tbody>"), ce = /*#__PURE__*/ d("<p class=data-table-status>Loading…"), K = /*#__PURE__*/ d("<p class=data-table-status>No results.");
249
- function q(e) {
258
+ var R = O("outline", "menu", "Menu", [["path", { d: "M4 8l16 0" }], ["path", { d: "M4 16l16 0" }]]), ie = /*#__PURE__*/ d("<li class=data-table-customizer-item draggable=true><label class=data-table-customizer-option><input type=checkbox>"), z = /*#__PURE__*/ d("<div role=dialog class=data-table-customizer-panel><p class=data-table-customizer-title></p><ul class=data-table-customizer-list></ul><div class=data-table-customizer-actions><button type=button></button><button type=button>"), ae = /*#__PURE__*/ d("<div class=data-table-customizer><button type=button class=data-table-customizer-button aria-haspopup=dialog><span aria-hidden=true>⚙</span> "), oe = /*#__PURE__*/ d("<button type=button class=data-table-sort><span class=data-table-sort-indicator aria-hidden=true>"), B = /*#__PURE__*/ d("<span class=data-table-resize-handle role=separator aria-orientation=vertical tabindex=0>"), V = /*#__PURE__*/ d("<th>"), H = /*#__PURE__*/ d("<td>"), se = /*#__PURE__*/ d("<tr>"), U = /*#__PURE__*/ d("<div class=data-table-toolbar-start>"), W = /*#__PURE__*/ d("<div class=data-table-toolbar>"), G = /*#__PURE__*/ d("<th>Actions"), K = /*#__PURE__*/ d("<div><div class=data-table-scroll><table class=data-table><thead><tr></tr></thead><tbody>"), q = /*#__PURE__*/ d("<p class=data-table-status>Loading…"), ce = /*#__PURE__*/ d("<p class=data-table-status>No results.");
259
+ function J(e) {
250
260
  return typeof e == "function" ? e() : e;
251
261
  }
252
- function J(e, t) {
262
+ function le(e, t) {
253
263
  if (t !== void 0) return {
254
264
  width: `${t}px`,
255
265
  "min-width": `${t}px`,
@@ -258,29 +268,29 @@ function J(e, t) {
258
268
  let n = (e) => typeof e == "number" ? `${e}px` : e, r = {};
259
269
  return e.width !== void 0 && (r.width = n(e.width)), e.minWidth !== void 0 && (r["min-width"] = n(e.minWidth)), e.maxWidth !== void 0 && (r["max-width"] = n(e.maxWidth)), Object.keys(r).length > 0 ? r : void 0;
260
270
  }
261
- function le(e) {
262
- let r = g(() => q(e.rows)), o = () => q(e.loading ?? !1), s = e.sortKey !== void 0 || e.sortDirection !== void 0, [l, d] = _(e.defaultSort), y = () => s ? q(e.sortKey ?? void 0) : l()?.key, x = () => s ? q(e.sortDirection ?? "asc") : l()?.direction ?? "asc", S = () => q(e.showColumnCustomizer ?? !1), w = ee(() => e.toolbar), T = g(() => e.defaultVisibleColumns ?? e.columns.filter((e) => e.defaultVisible !== !1).map((e) => e.key)), [E, D] = _(void 0), te = () => e.visibleColumns === void 0 ? E() ?? T() : q(e.visibleColumns), O = g(() => new Set(te())), [ne, re] = _(void 0);
263
- function k(t) {
271
+ function ue(e) {
272
+ let r = _(() => J(e.rows)), o = () => J(e.loading ?? !1), s = e.sortKey !== void 0 || e.sortDirection !== void 0, [l, d] = v(e.defaultSort), b = () => s ? J(e.sortKey ?? void 0) : l()?.key, S = () => s ? J(e.sortDirection ?? "asc") : l()?.direction ?? "asc", C = () => J(e.showColumnCustomizer ?? !1), T = h(() => e.toolbar), E = _(() => e.defaultVisibleColumns ?? e.columns.filter((e) => e.defaultVisible !== !1).map((e) => e.key)), [D, O] = v(void 0), ee = () => e.visibleColumns === void 0 ? D() ?? E() : J(e.visibleColumns), k = _(() => new Set(ee())), [te, A] = v(void 0);
273
+ function j(t) {
264
274
  let n = new Map(e.columns.map((e) => [e.key, e])), r = [...new Set(t)].flatMap((e) => n.get(e) ?? []), i = new Set(r);
265
275
  return [...r, ...e.columns.filter((e) => !i.has(e))];
266
276
  }
267
- let A = g(() => k(e.columnOrder === void 0 ? ne() ?? e.defaultColumnOrder ?? [] : q(e.columnOrder))), j = g(() => A().filter((e) => e.toggleable === !1 || O().has(e.key))), M = g(() => e.columns.filter((e) => e.toggleable !== !1)), N = g(() => M().map((e) => e.key));
268
- function P(e, t) {
277
+ let ne = _(() => j(e.columnOrder === void 0 ? te() ?? e.defaultColumnOrder ?? [] : J(e.columnOrder))), M = _(() => ne().filter((e) => e.toggleable === !1 || k().has(e.key))), N = _(() => e.columns.filter((e) => e.toggleable !== !1)), P = _(() => N().map((e) => e.key));
278
+ function F(e, t) {
269
279
  return t.sortValue ? t.sortValue(e) : e[t.key];
270
280
  }
271
- function F(e, t) {
281
+ function I(e, t) {
272
282
  return e === t ? 0 : e == null ? -1 : t == null ? 1 : typeof e == "number" && typeof t == "number" ? e - t : String(e).localeCompare(String(t), void 0, { numeric: !0 });
273
283
  }
274
- let I = g(() => {
275
- let t = r(), n = y();
284
+ let re = _(() => {
285
+ let t = r(), n = b();
276
286
  if (s || !n) return t;
277
287
  let i = e.columns.find((e) => e.key === n);
278
288
  if (!i) return t;
279
- let a = x() === "asc" ? 1 : -1;
280
- return [...t].sort((e, t) => a * F(P(e, i), P(t, i)));
289
+ let a = S() === "asc" ? 1 : -1;
290
+ return [...t].sort((e, t) => a * I(F(e, i), F(t, i)));
281
291
  });
282
- function le(t) {
283
- let n = y() === t, r = n && x() === "desc" ? void 0 : {
292
+ function L(t) {
293
+ let n = b() === t, r = n && S() === "desc" ? void 0 : {
284
294
  key: t,
285
295
  direction: n ? "desc" : "asc"
286
296
  };
@@ -292,30 +302,30 @@ function le(e) {
292
302
  }
293
303
  function Y(t) {
294
304
  let n = ue(t);
295
- e.visibleColumns === void 0 && D(n), e.onVisibleColumnsChange?.(n);
305
+ e.visibleColumns === void 0 && O(n), e.onVisibleColumnsChange?.(n);
296
306
  }
297
- function X(e, t) {
298
- let n = new Set(te());
299
- t ? n.add(e) : n.delete(e), Y(N().filter((e) => n.has(e)));
307
+ function de(e, t) {
308
+ let n = new Set(ee());
309
+ t ? n.add(e) : n.delete(e), Y(P().filter((e) => n.has(e)));
300
310
  }
301
- function de() {
302
- Y(N());
311
+ function X() {
312
+ Y(P());
303
313
  }
304
314
  function fe(t) {
305
- e.columnOrder === void 0 && re(t), e.onColumnOrderChange?.(t);
315
+ e.columnOrder === void 0 && A(t), e.onColumnOrderChange?.(t);
306
316
  }
307
317
  function pe(e, t) {
308
- let n = A().map((e) => e.key), r = n.indexOf(e);
318
+ let n = ne().map((e) => e.key), r = n.indexOf(e);
309
319
  r === -1 || t < 0 || t >= n.length || t === r || (n.splice(r, 1), n.splice(t, 0, e), fe(n));
310
320
  }
311
321
  function me() {
312
- Y(T()), fe(k(e.defaultColumnOrder ?? []).map((e) => e.key));
322
+ Y(E()), fe(j(e.defaultColumnOrder ?? []).map((e) => e.key));
313
323
  }
314
- let [Z, he] = _({}), [ge, _e] = _(), Q;
315
- h(() => {
316
- let e = j().map((e) => e.key);
317
- if (!Q || C(ge) === void 0) return;
318
- let t = C(Z);
324
+ let [Z, he] = v({}), [ge, _e] = v(), Q;
325
+ g(() => {
326
+ let e = M().map((e) => e.key);
327
+ if (!Q || w(ge) === void 0) return;
328
+ let t = w(Z);
319
329
  if (e.every((e) => t[e] !== void 0)) return;
320
330
  let n = { ...t };
321
331
  for (let t of e) {
@@ -365,30 +375,30 @@ function le(e) {
365
375
  [n]: o
366
376
  }), e.onColumnWidthsChange?.(Z());
367
377
  }
368
- let [be, xe] = _(), Se = `${v()}-panel`, [Ce, we] = _(!1), Te;
369
- h(() => {
370
- if (!Ce() || !S()) return;
378
+ let [be, xe] = v(), Se = `${y()}-panel`, [Ce, we] = v(!1), Te;
379
+ g(() => {
380
+ if (!Ce() || !C()) return;
371
381
  function e(e) {
372
382
  Te && !Te.contains(e.target) && we(!1);
373
383
  }
374
384
  function t(e) {
375
385
  e.key === "Escape" && we(!1);
376
386
  }
377
- document.addEventListener("pointerdown", e), document.addEventListener("keydown", t), b(() => {
387
+ document.addEventListener("pointerdown", e), document.addEventListener("keydown", t), x(() => {
378
388
  document.removeEventListener("pointerdown", e), document.removeEventListener("keydown", t);
379
389
  });
380
390
  });
381
391
  function Ee(e) {
382
- return e.toggleable === !1 || O().has(e.key);
392
+ return e.toggleable === !1 || k().has(e.key);
383
393
  }
384
394
  function De(t, n) {
385
395
  return e.getCell?.(t, n) ?? n.getValue?.(t) ?? null;
386
396
  }
387
397
  function Oe(e) {
388
- if (e.sortable) return y() === e.key ? x() === "asc" ? "ascending" : "descending" : "none";
398
+ if (e.sortable) return b() === e.key ? S() === "asc" ? "ascending" : "descending" : "none";
389
399
  }
390
400
  function ke(e) {
391
- return y() === e.key ? x() === "asc" ? "▲" : "▼" : "";
401
+ return b() === e.key ? S() === "asc" ? "▲" : "▼" : "";
392
402
  }
393
403
  let Ae = (t) => !!t.sortable && (!s || !!(e.onSort || e.onSortChange));
394
404
  function je(e, t) {
@@ -398,14 +408,14 @@ function le(e) {
398
408
  let n = be();
399
409
  n !== void 0 && (e.preventDefault(), pe(n, t));
400
410
  }
401
- function $(e, t) {
411
+ function Ne(e, t) {
402
412
  return (() => {
403
413
  var r = ie(), o = r.firstChild, s = o.firstChild;
404
- return r.addEventListener("dragend", () => xe(void 0)), r.addEventListener("drop", (e) => e.preventDefault()), r.addEventListener("dragover", (e) => Me(e, t())), r.addEventListener("dragstart", (t) => je(t, e)), a(r, n(L, {
414
+ return r.addEventListener("dragend", () => xe(void 0)), r.addEventListener("drop", (e) => e.preventDefault()), r.addEventListener("dragover", (e) => Me(e, t())), r.addEventListener("dragstart", (t) => je(t, e)), a(r, n(R, {
405
415
  class: "data-table-customizer-grip",
406
416
  size: 14,
407
417
  "aria-hidden": "true"
408
- }), o), s.addEventListener("change", (t) => X(e.key, t.currentTarget.checked)), a(o, () => e.ariaLabel ?? e.label, null), i((t) => {
418
+ }), o), s.addEventListener("change", (t) => de(e.key, t.currentTarget.checked)), a(o, () => e.ariaLabel ?? e.label, null), i((t) => {
409
419
  var n = be() === e.key, i = e.toggleable === !1;
410
420
  return n !== t.e && r.classList.toggle("data-table-customizer-item-dragging", t.e = n), i !== t.t && (s.disabled = t.t = i), t;
411
421
  }, {
@@ -414,15 +424,15 @@ function le(e) {
414
424
  }), i(() => s.checked = Ee(e)), r;
415
425
  })();
416
426
  }
417
- function Ne() {
427
+ function $() {
418
428
  return (() => {
419
- var t = R(), r = t.firstChild, o = r.nextSibling, s = o.nextSibling.firstChild, l = s.nextSibling;
429
+ var t = z(), r = t.firstChild, o = r.nextSibling, s = o.nextSibling.firstChild, l = s.nextSibling;
420
430
  return c(t, "id", Se), a(r, () => e.columnCustomizerTitle ?? "Shown columns"), a(o, n(p, {
421
431
  get each() {
422
- return A();
432
+ return ne();
423
433
  },
424
- children: (e, t) => $(e, t)
425
- })), s.$$click = de, a(s, () => e.columnCustomizerShowAllLabel ?? "Show all"), l.$$click = me, a(l, () => e.columnCustomizerResetLabel ?? "Reset"), i(() => c(t, "aria-label", e.columnCustomizerTitle ?? "Customize columns")), t;
434
+ children: (e, t) => Ne(e, t)
435
+ })), s.$$click = X, a(s, () => e.columnCustomizerShowAllLabel ?? "Show all"), l.$$click = me, a(l, () => e.columnCustomizerResetLabel ?? "Reset"), i(() => c(t, "aria-label", e.columnCustomizerTitle ?? "Customize columns")), t;
426
436
  })();
427
437
  }
428
438
  function Pe() {
@@ -435,14 +445,14 @@ function le(e) {
435
445
  return Ce();
436
446
  },
437
447
  get children() {
438
- return Ne();
448
+ return $();
439
449
  }
440
450
  }), null), i(() => c(r, "aria-expanded", Ce())), t;
441
451
  })();
442
452
  }
443
453
  function Fe(r) {
444
454
  return (() => {
445
- var o = B();
455
+ var o = V();
446
456
  return a(o, n(m, {
447
457
  get when() {
448
458
  return Ae(r);
@@ -452,18 +462,18 @@ function le(e) {
452
462
  },
453
463
  get children() {
454
464
  var e = oe(), t = e.firstChild;
455
- return e.$$click = () => le(r.key), a(e, () => r.label, t), a(t, () => ke(r)), e;
465
+ return e.$$click = () => L(r.key), a(e, () => r.label, t), a(t, () => ke(r)), e;
456
466
  }
457
467
  }), null), a(o, n(m, {
458
468
  get when() {
459
469
  return e.resizableColumns;
460
470
  },
461
471
  get children() {
462
- var e = z();
472
+ var e = B();
463
473
  return e.$$keydown = (e) => ye(e, r.key), e.$$pointerdown = (e) => ve(e, r.key), i(() => c(e, "aria-label", `Resize ${r.ariaLabel ?? r.label}`)), e;
464
474
  }
465
475
  }), null), i((e) => {
466
- var n = r.class, i = r.key, a = J(r, Z()[r.key]), s = Oe(r);
476
+ var n = r.class, i = r.key, a = le(r, Z()[r.key]), s = Oe(r);
467
477
  return n !== e.e && t(o, e.e = n), i !== e.t && c(o, "data-column-key", e.t = i), e.a = u(o, a, e.a), s !== e.o && c(o, "aria-sort", e.o = s), e;
468
478
  }, {
469
479
  e: void 0,
@@ -475,15 +485,15 @@ function le(e) {
475
485
  }
476
486
  function Ie(r) {
477
487
  return (() => {
478
- var o = H();
488
+ var o = se();
479
489
  return a(o, n(p, {
480
490
  get each() {
481
- return j();
491
+ return M();
482
492
  },
483
493
  children: (e) => (() => {
484
- var n = V();
494
+ var n = H();
485
495
  return a(n, () => De(r, e)), i((r) => {
486
- var i = e.class, a = J(e, Z()[e.key]);
496
+ var i = e.class, a = le(e, Z()[e.key]);
487
497
  return i !== r.e && t(n, r.e = i), r.t = u(n, a, r.t), r;
488
498
  }, {
489
499
  e: void 0,
@@ -495,32 +505,32 @@ function le(e) {
495
505
  return e.rowActions;
496
506
  },
497
507
  get children() {
498
- var t = V();
508
+ var t = H();
499
509
  return a(t, () => e.rowActions?.(r)), t;
500
510
  }
501
511
  }), null), o;
502
512
  })();
503
513
  }
504
- let Le = () => !o() && (e.empty === void 0 ? r().length === 0 : q(e.empty));
514
+ let Le = () => !o() && (e.empty === void 0 ? r().length === 0 : J(e.empty));
505
515
  return (() => {
506
- var r = G(), s = r.firstChild, c = s.firstChild, l = c.firstChild, d = l.firstChild, ee = l.nextSibling;
516
+ var r = K(), s = r.firstChild, c = s.firstChild, l = c.firstChild, d = l.firstChild, h = l.nextSibling;
507
517
  a(r, n(m, {
508
518
  get when() {
509
- return S() || w.toArray().length > 0;
519
+ return C() || T.toArray().length > 0;
510
520
  },
511
521
  get children() {
512
- var e = U();
522
+ var e = W();
513
523
  return a(e, n(m, {
514
524
  get when() {
515
- return w.toArray().length > 0;
525
+ return T.toArray().length > 0;
516
526
  },
517
527
  get children() {
518
- var e = se();
519
- return a(e, w), e;
528
+ var e = U();
529
+ return a(e, T), e;
520
530
  }
521
531
  }), null), a(e, n(m, {
522
532
  get when() {
523
- return S();
533
+ return C();
524
534
  },
525
535
  get children() {
526
536
  return Pe();
@@ -528,10 +538,10 @@ function le(e) {
528
538
  }), null), e;
529
539
  }
530
540
  }), s);
531
- var h = Q;
532
- return typeof h == "function" ? f(h, c) : Q = c, a(d, n(p, {
541
+ var g = Q;
542
+ return typeof g == "function" ? f(g, c) : Q = c, a(d, n(p, {
533
543
  get each() {
534
- return j();
544
+ return M();
535
545
  },
536
546
  children: Fe
537
547
  }), null), a(d, n(m, {
@@ -539,11 +549,11 @@ function le(e) {
539
549
  return e.rowActions;
540
550
  },
541
551
  get children() {
542
- return W();
552
+ return G();
543
553
  }
544
- }), null), a(ee, n(p, {
554
+ }), null), a(h, n(p, {
545
555
  get each() {
546
- return I();
556
+ return re();
547
557
  },
548
558
  children: Ie
549
559
  })), a(r, n(m, {
@@ -551,14 +561,14 @@ function le(e) {
551
561
  return o();
552
562
  },
553
563
  get children() {
554
- return e.loadingContent ?? ce();
564
+ return e.loadingContent ?? q();
555
565
  }
556
566
  }), null), a(r, n(m, {
557
567
  get when() {
558
568
  return Le();
559
569
  },
560
570
  get children() {
561
- return e.emptyContent ?? K();
571
+ return e.emptyContent ?? ce();
562
572
  }
563
573
  }), null), i((n) => {
564
574
  var i = `data-table-wrap${e.class ? ` ${e.class}` : ""}`, a = ge() !== void 0, o = ge() === void 0 ? void 0 : { width: `${ge()}px` };
@@ -577,23 +587,23 @@ r([
577
587
  ]);
578
588
  //#endregion
579
589
  //#region node_modules/@tabler/icons-solidjs/dist/source/icons/IconDeviceFloppy.js
580
- var ue = D("outline", "device-floppy", "DeviceFloppy", [
590
+ var Y = O("outline", "device-floppy", "DeviceFloppy", [
581
591
  ["path", { d: "M6 4h10l4 4v10a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2" }],
582
592
  ["path", { d: "M10 14a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" }],
583
593
  ["path", { d: "M14 4l0 4l-6 0l0 -4" }]
584
- ]), Y = D("outline", "search", "Search", [["path", { d: "M3 10a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" }], ["path", { d: "M21 21l-6 -6" }]]), X = D("outline", "x", "X", [["path", { d: "M18 6l-12 12" }], ["path", { d: "M6 6l12 12" }]]), de = /*#__PURE__*/ d("<li class=filter-table-chip><button type=button class=filter-table-chip-remove>"), fe = /*#__PURE__*/ d("<ul class=filter-table-chips>"), pe = /*#__PURE__*/ d("<div class=filter-table-multi>"), me = /*#__PURE__*/ d("<input class=filter-table-input type=text>"), Z = /*#__PURE__*/ d("<div class=filter-table-search><input type=search class=filter-table-input>"), he = /*#__PURE__*/ d("<div class=filter-table-saved>"), ge = /*#__PURE__*/ d("<button type=button class=filter-table-chip-remove>"), _e = /*#__PURE__*/ d("<li><button type=button class=filter-table-pill>"), Q = /*#__PURE__*/ d("<li><button type=button class=\"filter-table-pill filter-table-pill-save\">"), ve = /*#__PURE__*/ d("<ul class=filter-table-pills aria-label=\"Applied filters\"><li><button type=button class=\"filter-table-pill filter-table-pill-clear\">"), ye = /*#__PURE__*/ d("<form class=filter-table-save><input type=text class=filter-table-input><button type=submit class=\"filter-table-button filter-table-button-primary\"></button><button type=button class=filter-table-button>"), be = /*#__PURE__*/ d("<div class=filter-table-toolbar>"), xe = /*#__PURE__*/ d("<span class=filter-table-badge>"), Se = /*#__PURE__*/ d("<button type=button role=tab class=filter-table-tab>"), Ce = /*#__PURE__*/ d("<div class=filter-table-field><label class=filter-table-label>"), we = /*#__PURE__*/ d("<legend class=filter-table-legend>"), Te = /*#__PURE__*/ d("<fieldset class=filter-table-fieldset>"), Ee = /*#__PURE__*/ d("<form class=filter-table-form><div class=filter-table-form-actions><button type=button class=filter-table-button></button><button type=submit class=\"filter-table-button filter-table-button-primary\">"), De = /*#__PURE__*/ d("<div><div class=filter-table-tabs role=tablist></div><div role=tabpanel></div><div role=tabpanel>"), Oe = "q";
585
- function ke(e) {
594
+ ]), de = O("outline", "search", "Search", [["path", { d: "M3 10a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" }], ["path", { d: "M21 21l-6 -6" }]]), X = O("outline", "x", "X", [["path", { d: "M18 6l-12 12" }], ["path", { d: "M6 6l12 12" }]]), fe = /*#__PURE__*/ d("<li class=filter-table-chip><button type=button class=filter-table-chip-remove>"), pe = /*#__PURE__*/ d("<ul class=filter-table-chips>"), me = /*#__PURE__*/ d("<div class=filter-table-multi>"), Z = /*#__PURE__*/ d("<input class=filter-table-input type=text>"), he = /*#__PURE__*/ d("<div class=filter-table-search><input type=search class=filter-table-input>"), ge = /*#__PURE__*/ d("<div class=filter-table-saved>"), _e = /*#__PURE__*/ d("<button type=button class=filter-table-chip-remove>"), Q = /*#__PURE__*/ d("<li><button type=button class=filter-table-pill>"), ve = /*#__PURE__*/ d("<li><button type=button class=\"filter-table-pill filter-table-pill-save\">"), ye = /*#__PURE__*/ d("<ul class=filter-table-pills aria-label=\"Applied filters\"><li><button type=button class=\"filter-table-pill filter-table-pill-clear\">"), be = /*#__PURE__*/ d("<form class=filter-table-save><input type=text class=filter-table-input><button type=submit class=\"filter-table-button filter-table-button-primary\"></button><button type=button class=filter-table-button>"), xe = /*#__PURE__*/ d("<div class=filter-table-toolbar>"), Se = /*#__PURE__*/ d("<span class=filter-table-badge>"), Ce = /*#__PURE__*/ d("<button type=button role=tab class=filter-table-tab>"), we = /*#__PURE__*/ d("<div class=filter-table-field><label class=filter-table-label>"), Te = /*#__PURE__*/ d("<legend class=filter-table-legend>"), Ee = /*#__PURE__*/ d("<fieldset class=filter-table-fieldset>"), De = /*#__PURE__*/ d("<form class=filter-table-form><div class=filter-table-form-actions><button type=button class=filter-table-button></button><button type=submit class=\"filter-table-button filter-table-button-primary\">"), Oe = /*#__PURE__*/ d("<div><div class=filter-table-tabs role=tablist></div><div role=tabpanel></div><div role=tabpanel>"), ke = "q";
595
+ function Ae(e) {
586
596
  return typeof e == "function" ? e() : e;
587
597
  }
588
- function Ae(e) {
598
+ function je(e) {
589
599
  return Array.isArray(e) ? e.length > 0 : (e ?? "").trim() !== "";
590
600
  }
591
- function je(e) {
601
+ function Me(e) {
592
602
  let t = {};
593
- for (let [n, r] of Object.entries(e)) Ae(r) && (t[n] = Array.isArray(r) ? r : r.trim());
603
+ for (let [n, r] of Object.entries(e)) je(r) && (t[n] = Array.isArray(r) ? r : r.trim());
594
604
  return t;
595
605
  }
596
- function Me(e, t) {
606
+ function Ne(e, t) {
597
607
  let n = Object.keys(e);
598
608
  return n.length === Object.keys(t).length && n.every((n) => {
599
609
  let r = e[n], i = t[n];
@@ -603,8 +613,8 @@ function Me(e, t) {
603
613
  function $(e) {
604
614
  return typeof e == "string" || typeof e == "number" || typeof e == "boolean" ? String(e) : "";
605
615
  }
606
- function Ne(e) {
607
- let [r, l] = S(e, [
616
+ function Pe(e) {
617
+ let [r, l] = C(e, [
608
618
  "rows",
609
619
  "filters",
610
620
  "filterValues",
@@ -630,43 +640,43 @@ function Ne(e) {
630
640
  "cancelLabel",
631
641
  "clearSavedFilterLabel",
632
642
  "class"
633
- ]), u = g(() => ke(r.rows)), [d, ee] = _(je(r.defaultFilterValues ?? {})), b = g(() => r.filterValues === void 0 ? d() : je(ke(r.filterValues)));
634
- function x(e) {
635
- let t = je(e);
636
- r.filterValues === void 0 && ee(t), r.onFilterValuesChange?.(t);
643
+ ]), u = _(() => Ae(r.rows)), [d, h] = v(Me(r.defaultFilterValues ?? {})), x = _(() => r.filterValues === void 0 ? d() : Me(Ae(r.filterValues)));
644
+ function S(e) {
645
+ let t = Me(e);
646
+ r.filterValues === void 0 && h(t), r.onFilterValuesChange?.(t);
637
647
  }
638
- function C(e, t) {
639
- x({
640
- ...b(),
648
+ function w(e, t) {
649
+ S({
650
+ ...x(),
641
651
  [e]: t
642
652
  });
643
653
  }
644
- let w = () => $(b()[Oe]), T = g(() => r.filters.filter((e) => Ae(b()[e.key])));
645
- function E(e, t) {
654
+ let T = () => $(x()[ke]), E = _(() => r.filters.filter((e) => je(x()[e.key])));
655
+ function D(e, t) {
646
656
  return t.getValue ? t.getValue(e) : e[t.key];
647
657
  }
648
- function D(e, t, n) {
658
+ function O(e, t, n) {
649
659
  if (t.match) return t.match(e, n);
650
- let r = E(e, t);
660
+ let r = D(e, t);
651
661
  if (t.type === "select") {
652
662
  let e = Array.isArray(n) ? n : [n];
653
663
  return (Array.isArray(r) ? r : [r]).some((t) => e.includes($(t)));
654
664
  }
655
665
  return t.type === "boolean" ? !!r == (n === "true") : $(r).toLowerCase().includes($(n).toLowerCase());
656
666
  }
657
- function te(e) {
667
+ function ee(e) {
658
668
  return r.getSearchText ? r.getSearchText(e) : l.columns.map((t) => $(t.sortValue?.(e) ?? e[t.key])).join(" ");
659
669
  }
660
- let O = g(() => {
670
+ let k = _(() => {
661
671
  if (r.manualFiltering) return u();
662
- let e = w().toLowerCase(), t = T();
663
- return u().filter((n) => (e === "" || te(n).toLowerCase().includes(e)) && t.every((e) => D(n, e, b()[e.key])));
672
+ let e = T().toLowerCase(), t = E();
673
+ return u().filter((n) => (e === "" || ee(n).toLowerCase().includes(e)) && t.every((e) => O(n, e, x()[e.key])));
664
674
  });
665
- function ne(e) {
675
+ function te(e) {
666
676
  if (e.options) return e.options;
667
677
  let t = /* @__PURE__ */ new Set();
668
678
  for (let n of u()) {
669
- let r = E(n, e);
679
+ let r = D(n, e);
670
680
  for (let e of Array.isArray(r) ? r : [r]) {
671
681
  let n = $(e);
672
682
  n !== "" && t.add(n);
@@ -677,46 +687,46 @@ function Ne(e) {
677
687
  label: e
678
688
  }));
679
689
  }
680
- function re(e, t) {
681
- return e.type === "boolean" ? t === "true" ? r.yesLabel ?? "Yes" : r.noLabel ?? "No" : e.type === "select" ? ne(e).find((e) => String(e.value) === t)?.label ?? t : t;
690
+ function A(e, t) {
691
+ return e.type === "boolean" ? t === "true" ? r.yesLabel ?? "Yes" : r.noLabel ?? "No" : e.type === "select" ? te(e).find((e) => String(e.value) === t)?.label ?? t : t;
682
692
  }
683
- let k = g(() => T().flatMap((e) => {
684
- let t = b()[e.key];
693
+ let j = _(() => E().flatMap((e) => {
694
+ let t = x()[e.key];
685
695
  return (Array.isArray(t) ? t : [t]).map((t) => ({
686
696
  filter: e,
687
697
  item: t,
688
- text: `${e.label}: ${re(e, t)}`
698
+ text: `${e.label}: ${A(e, t)}`
689
699
  }));
690
700
  }));
691
- function A(e, t) {
692
- let n = b()[e.key];
693
- C(e.key, Array.isArray(n) ? n.filter((e) => e !== t) : "");
701
+ function ne(e, t) {
702
+ let n = x()[e.key];
703
+ w(e.key, Array.isArray(n) ? n.filter((e) => e !== t) : "");
694
704
  }
695
- function j() {
696
- x({ [Oe]: w() });
705
+ function M() {
706
+ S({ [ke]: T() });
697
707
  }
698
- let M = g(() => r.savedFilters === void 0 ? void 0 : ke(r.savedFilters)), N = g(() => M()?.find((e) => Me(je(e.values), b()))), [P, F] = _(!1), [L, ie] = _("");
699
- function R(e) {
700
- let t = M()?.find((t) => t.name === e);
701
- t && x(t.values);
708
+ let N = _(() => r.savedFilters === void 0 ? void 0 : Ae(r.savedFilters)), P = _(() => N()?.find((e) => Ne(Me(e.values), x()))), [F, I] = v(!1), [re, R] = v("");
709
+ function ie(e) {
710
+ let t = N()?.find((t) => t.name === e);
711
+ t && S(t.values);
702
712
  }
703
- function ae() {
704
- ie(N()?.name ?? ""), F(!0);
713
+ function z() {
714
+ R(P()?.name ?? ""), I(!0);
705
715
  }
706
- function oe(e) {
716
+ function ae(e) {
707
717
  e.preventDefault();
708
- let t = L().trim();
718
+ let t = re().trim();
709
719
  if (t === "") return;
710
- let n = (M() ?? []).filter((e) => e.name !== t);
720
+ let n = (N() ?? []).filter((e) => e.name !== t);
711
721
  r.onSavedFiltersChange?.([...n, {
712
722
  name: t,
713
- values: b()
714
- }]), F(!1);
723
+ values: x()
724
+ }]), I(!1);
715
725
  }
716
- let [z, B] = _(b());
717
- h(y(b, (e) => B(e)));
726
+ let [oe, B] = v(x());
727
+ g(b(x, (e) => B(e)));
718
728
  function V(e) {
719
- return z()[e];
729
+ return oe()[e];
720
730
  }
721
731
  function H(e, t) {
722
732
  B((n) => ({
@@ -724,51 +734,51 @@ function Ne(e) {
724
734
  [e]: t
725
735
  }));
726
736
  }
727
- let se = g(() => {
737
+ let se = _(() => {
728
738
  let e = /* @__PURE__ */ new Map([[void 0, []]]);
729
739
  for (let t of r.filters) e.set(t.group, [...e.get(t.group) ?? [], t]);
730
740
  return [...e.entries()].filter(([, e]) => e.length > 0).map(([e, t]) => ({
731
741
  name: e,
732
742
  filters: t
733
743
  }));
734
- }), U = v(), W = ["results", "filters"], [G, ce] = _("results"), K = (e) => `${U}-tab-${e}`, q = (e) => `${U}-panel-${e}`, J = (e) => `${U}-filter-${e}`;
735
- function Ne(e) {
736
- e === "filters" && B(b()), ce(e);
744
+ }), U = y(), W = ["results", "filters"], [G, K] = v("results"), q = (e) => `${U}-tab-${e}`, ce = (e) => `${U}-panel-${e}`, J = (e) => `${U}-filter-${e}`;
745
+ function le(e) {
746
+ e === "filters" && B(x()), K(e);
737
747
  }
738
748
  function Pe(e) {
739
749
  let t = e.key === "ArrowRight" ? 1 : e.key === "ArrowLeft" ? -1 : 0;
740
750
  if (t === 0) return;
741
751
  e.preventDefault();
742
752
  let n = W[(W.indexOf(G()) + t + W.length) % W.length];
743
- Ne(n), document.getElementById(K(n))?.focus();
753
+ le(n), document.getElementById(q(n))?.focus();
744
754
  }
745
755
  function Fe(e) {
746
- e.preventDefault(), x(z()), ce("results");
756
+ e.preventDefault(), S(oe()), K("results");
747
757
  }
748
758
  function Ie() {
749
- j(), ce("results");
759
+ M(), K("results");
750
760
  }
751
761
  function Le(e) {
752
762
  let t = () => {
753
763
  let t = V(e.key);
754
764
  return Array.isArray(t) ? t : [];
755
765
  }, o = (r) => (() => {
756
- var o = de(), s = o.firstChild;
757
- return a(o, () => re(e, r), s), s.$$click = () => H(e.key, t().filter((e) => e !== r)), a(s, n(X, {
766
+ var o = fe(), s = o.firstChild;
767
+ return a(o, () => A(e, r), s), s.$$click = () => H(e.key, t().filter((e) => e !== r)), a(s, n(X, {
758
768
  size: 12,
759
769
  "aria-hidden": "true"
760
- })), i(() => c(s, "aria-label", `Remove ${re(e, r)}`)), o;
770
+ })), i(() => c(s, "aria-label", `Remove ${A(e, r)}`)), o;
761
771
  })();
762
772
  return (() => {
763
- var i = pe();
764
- return a(i, n(I, {
773
+ var i = me();
774
+ return a(i, n(L, {
765
775
  get id() {
766
776
  return J(e.key);
767
777
  },
768
778
  value: "",
769
779
  onChange: (n) => H(e.key, [...t(), n]),
770
780
  get options() {
771
- return ne(e).filter((e) => !t().includes(String(e.value)));
781
+ return te(e).filter((e) => !t().includes(String(e.value)));
772
782
  },
773
783
  get placeholder() {
774
784
  return e.placeholder ?? r.anyLabel ?? "Any";
@@ -778,7 +788,7 @@ function Ne(e) {
778
788
  return t().length > 0;
779
789
  },
780
790
  get children() {
781
- var e = fe();
791
+ var e = pe();
782
792
  return a(e, n(p, {
783
793
  get each() {
784
794
  return t();
@@ -791,7 +801,7 @@ function Ne(e) {
791
801
  }
792
802
  function Re(e) {
793
803
  return e.type === "text" ? (() => {
794
- var t = me();
804
+ var t = Z();
795
805
  return t.$$input = (t) => H(e.key, t.currentTarget.value), i((n) => {
796
806
  var r = J(e.key), i = e.placeholder;
797
807
  return r !== n.e && c(t, "id", n.e = r), i !== n.t && c(t, "placeholder", n.t = i), n;
@@ -799,7 +809,7 @@ function Ne(e) {
799
809
  e: void 0,
800
810
  t: void 0
801
811
  }), i(() => t.value = $(V(e.key))), t;
802
- })() : e.type === "boolean" ? n(I, {
812
+ })() : e.type === "boolean" ? n(L, {
803
813
  get id() {
804
814
  return J(e.key);
805
815
  },
@@ -823,30 +833,30 @@ function Ne(e) {
823
833
  }
824
834
  function ze() {
825
835
  return (() => {
826
- var e = Z(), t = e.firstChild;
827
- return a(e, n(Y, {
836
+ var e = he(), t = e.firstChild;
837
+ return a(e, n(de, {
828
838
  class: "filter-table-search-icon",
829
839
  size: 16,
830
840
  "aria-hidden": "true"
831
- }), t), t.$$input = (e) => C(Oe, e.currentTarget.value), i((e) => {
841
+ }), t), t.$$input = (e) => w(ke, e.currentTarget.value), i((e) => {
832
842
  var n = r.quickSearchLabel ?? "Quick search", i = r.quickSearchLabel ?? "Quick search";
833
843
  return n !== e.e && c(t, "aria-label", e.e = n), i !== e.t && c(t, "placeholder", e.t = i), e;
834
844
  }, {
835
845
  e: void 0,
836
846
  t: void 0
837
- }), i(() => t.value = w()), e;
847
+ }), i(() => t.value = T()), e;
838
848
  })();
839
849
  }
840
850
  function Be() {
841
851
  return (() => {
842
- var e = he();
843
- return a(e, n(I, {
852
+ var e = ge();
853
+ return a(e, n(L, {
844
854
  get value() {
845
- return N()?.name ?? "";
855
+ return P()?.name ?? "";
846
856
  },
847
- onChange: R,
857
+ onChange: ie,
848
858
  get options() {
849
- return (M() ?? []).map((e) => ({
859
+ return (N() ?? []).map((e) => ({
850
860
  value: e.name,
851
861
  label: e.name
852
862
  }));
@@ -859,11 +869,11 @@ function Ne(e) {
859
869
  }
860
870
  }), null), a(e, n(m, {
861
871
  get when() {
862
- return N();
872
+ return P();
863
873
  },
864
874
  children: (e) => (() => {
865
- var t = ge();
866
- return t.$$click = j, a(t, n(X, {
875
+ var t = _e();
876
+ return t.$$click = M, a(t, n(X, {
867
877
  size: 14,
868
878
  "aria-hidden": "true"
869
879
  })), i(() => c(t, "aria-label", `${r.clearSavedFilterLabel ?? "Clear saved filter"} ${e().name}`)), t;
@@ -873,8 +883,8 @@ function Ne(e) {
873
883
  }
874
884
  function Ve(e) {
875
885
  return (() => {
876
- var t = _e(), r = t.firstChild;
877
- return r.$$click = () => A(e.filter, e.item), a(r, () => e.text, null), a(r, n(X, {
886
+ var t = Q(), r = t.firstChild;
887
+ return r.$$click = () => ne(e.filter, e.item), a(r, () => e.text, null), a(r, n(X, {
878
888
  size: 12,
879
889
  "aria-hidden": "true"
880
890
  }), null), i(() => c(r, "aria-label", `Remove filter ${e.text}`)), t;
@@ -882,19 +892,19 @@ function Ne(e) {
882
892
  }
883
893
  function He() {
884
894
  return (() => {
885
- var e = ve(), t = e.firstChild, i = t.firstChild;
895
+ var e = ye(), t = e.firstChild, i = t.firstChild;
886
896
  return a(e, n(p, {
887
897
  get each() {
888
- return k();
898
+ return j();
889
899
  },
890
900
  children: Ve
891
- }), t), i.$$click = j, a(i, () => r.clearAllLabel ?? "Clear all"), a(e, n(m, {
901
+ }), t), i.$$click = M, a(i, () => r.clearAllLabel ?? "Clear all"), a(e, n(m, {
892
902
  get when() {
893
- return o(() => M() !== void 0)() && !P();
903
+ return o(() => N() !== void 0)() && !F();
894
904
  },
895
905
  get children() {
896
- var e = Q(), t = e.firstChild;
897
- return t.$$click = ae, a(t, n(ue, {
906
+ var e = ve(), t = e.firstChild;
907
+ return t.$$click = z, a(t, n(Y, {
898
908
  size: 12,
899
909
  "aria-hidden": "true"
900
910
  }), null), a(t, () => r.saveLabel ?? "Save", null), e;
@@ -904,23 +914,23 @@ function Ne(e) {
904
914
  }
905
915
  function Ue() {
906
916
  return (() => {
907
- var e = ye(), t = e.firstChild, o = t.nextSibling, s = o.nextSibling;
917
+ var e = be(), t = e.firstChild, o = t.nextSibling, s = o.nextSibling;
908
918
  return e.$$keydown = (e) => {
909
- e.key === "Escape" && F(!1);
910
- }, e.addEventListener("submit", oe), t.$$input = (e) => ie(e.currentTarget.value), f((e) => queueMicrotask(() => e.focus()), t), a(o, n(ue, {
919
+ e.key === "Escape" && I(!1);
920
+ }, e.addEventListener("submit", ae), t.$$input = (e) => R(e.currentTarget.value), f((e) => queueMicrotask(() => e.focus()), t), a(o, n(Y, {
911
921
  size: 16,
912
922
  "aria-hidden": "true"
913
- }), null), a(o, () => r.saveLabel ?? "Save", null), s.$$click = () => F(!1), a(s, () => r.cancelLabel ?? "Cancel"), i((e) => {
923
+ }), null), a(o, () => r.saveLabel ?? "Save", null), s.$$click = () => I(!1), a(s, () => r.cancelLabel ?? "Cancel"), i((e) => {
914
924
  var n = r.saveNameLabel ?? "Filter name", i = r.saveNameLabel ?? "Filter name";
915
925
  return n !== e.e && c(t, "aria-label", e.e = n), i !== e.t && c(t, "placeholder", e.t = i), e;
916
926
  }, {
917
927
  e: void 0,
918
928
  t: void 0
919
- }), i(() => t.value = L()), e;
929
+ }), i(() => t.value = re()), e;
920
930
  })();
921
931
  }
922
932
  let We = (() => {
923
- var e = be();
933
+ var e = xe();
924
934
  return a(e, n(m, {
925
935
  get when() {
926
936
  return r.quickSearch !== !1;
@@ -930,21 +940,21 @@ function Ne(e) {
930
940
  }
931
941
  }), null), a(e, n(m, {
932
942
  get when() {
933
- return (M()?.length ?? 0) > 0;
943
+ return (N()?.length ?? 0) > 0;
934
944
  },
935
945
  get children() {
936
946
  return Be();
937
947
  }
938
948
  }), null), a(e, n(m, {
939
949
  get when() {
940
- return k().length > 0;
950
+ return j().length > 0;
941
951
  },
942
952
  get children() {
943
953
  return He();
944
954
  }
945
955
  }), null), a(e, n(m, {
946
956
  get when() {
947
- return o(() => !!P())() && k().length > 0;
957
+ return o(() => !!F())() && j().length > 0;
948
958
  },
949
959
  get children() {
950
960
  return Ue();
@@ -955,21 +965,21 @@ function Ne(e) {
955
965
  return e === "results" ? r.resultsLabel ?? "Results" : r.filtersLabel ?? "Filters";
956
966
  }
957
967
  function Ke(e) {
958
- return e === "results" ? O().length : T().length;
968
+ return e === "results" ? k().length : E().length;
959
969
  }
960
970
  function qe(e) {
961
971
  return (() => {
962
- var t = Se();
963
- return t.$$keydown = Pe, t.$$click = () => Ne(e), a(t, () => Ge(e), null), a(t, n(m, {
972
+ var t = Ce();
973
+ return t.$$keydown = Pe, t.$$click = () => le(e), a(t, () => Ge(e), null), a(t, n(m, {
964
974
  get when() {
965
- return e === "results" || T().length > 0;
975
+ return e === "results" || E().length > 0;
966
976
  },
967
977
  get children() {
968
- var t = xe();
978
+ var t = Se();
969
979
  return a(t, () => Ke(e)), t;
970
980
  }
971
981
  }), null), i((n) => {
972
- var r = K(e), i = G() === e, a = q(e), o = G() === e ? 0 : -1;
982
+ var r = q(e), i = G() === e, a = ce(e), o = G() === e ? 0 : -1;
973
983
  return r !== n.e && c(t, "id", n.e = r), i !== n.t && c(t, "aria-selected", n.t = i), a !== n.a && c(t, "aria-controls", n.a = a), o !== n.o && c(t, "tabindex", n.o = o), n;
974
984
  }, {
975
985
  e: void 0,
@@ -981,19 +991,19 @@ function Ne(e) {
981
991
  }
982
992
  function Je(e) {
983
993
  return (() => {
984
- var t = Ce(), n = t.firstChild;
994
+ var t = we(), n = t.firstChild;
985
995
  return a(n, () => e.label), a(t, () => Re(e), null), i(() => c(n, "for", J(e.key))), t;
986
996
  })();
987
997
  }
988
998
  function Ye(e) {
989
999
  return (() => {
990
- var t = Te();
1000
+ var t = Ee();
991
1001
  return a(t, n(m, {
992
1002
  get when() {
993
1003
  return e.name;
994
1004
  },
995
1005
  get children() {
996
- var t = we();
1006
+ var t = Te();
997
1007
  return a(t, () => e.name), t;
998
1008
  }
999
1009
  }), null), a(t, n(p, {
@@ -1006,7 +1016,7 @@ function Ne(e) {
1006
1016
  }
1007
1017
  function Xe() {
1008
1018
  return (() => {
1009
- var e = Ee(), t = e.firstChild, i = t.firstChild, o = i.nextSibling;
1019
+ var e = De(), t = e.firstChild, i = t.firstChild, o = i.nextSibling;
1010
1020
  return e.addEventListener("submit", Fe), a(e, n(p, {
1011
1021
  get each() {
1012
1022
  return se();
@@ -1015,22 +1025,22 @@ function Ne(e) {
1015
1025
  }), t), i.$$click = Ie, a(i, n(X, {
1016
1026
  size: 16,
1017
1027
  "aria-hidden": "true"
1018
- }), null), a(i, () => r.resetLabel ?? "Reset", null), a(o, n(Y, {
1028
+ }), null), a(i, () => r.resetLabel ?? "Reset", null), a(o, n(de, {
1019
1029
  size: 16,
1020
1030
  "aria-hidden": "true"
1021
1031
  }), null), a(o, () => r.applyLabel ?? "Search", null), e;
1022
1032
  })();
1023
1033
  }
1024
1034
  return (() => {
1025
- var e = De(), o = e.firstChild, u = o.nextSibling, d = u.nextSibling;
1035
+ var e = Oe(), o = e.firstChild, u = o.nextSibling, d = u.nextSibling;
1026
1036
  return a(o, n(p, {
1027
1037
  each: W,
1028
1038
  children: qe
1029
- })), a(u, n(le, s(l, {
1030
- rows: O,
1039
+ })), a(u, n(ue, s(l, {
1040
+ rows: k,
1031
1041
  toolbar: We
1032
1042
  }))), a(d, Xe), i((n) => {
1033
- var i = `filter-table${r.class ? ` ${r.class}` : ""}`, a = q("results"), o = K("results"), s = G() !== "results", l = q("filters"), f = K("filters"), p = G() !== "filters";
1043
+ var i = `filter-table${r.class ? ` ${r.class}` : ""}`, a = ce("results"), o = q("results"), s = G() !== "results", l = ce("filters"), f = q("filters"), p = G() !== "filters";
1034
1044
  return i !== n.e && t(e, n.e = i), a !== n.t && c(u, "id", n.t = a), o !== n.a && c(u, "aria-labelledby", n.a = o), s !== n.o && (u.hidden = n.o = s), l !== n.i && c(d, "id", n.i = l), f !== n.n && c(d, "aria-labelledby", n.n = f), p !== n.s && (d.hidden = n.s = p), n;
1035
1045
  }, {
1036
1046
  e: void 0,
@@ -1050,18 +1060,18 @@ r([
1050
1060
  ]);
1051
1061
  //#endregion
1052
1062
  //#region src/search-bar.tsx
1053
- var Pe = /*#__PURE__*/ d("<kbd class=search-bar-shortcut>"), Fe = /*#__PURE__*/ d("<button type=button class=search-bar-clear>"), Ie = /*#__PURE__*/ d("<div><input class=search-bar-input>");
1054
- function Le(e) {
1063
+ var Fe = /*#__PURE__*/ d("<kbd class=search-bar-shortcut>"), Ie = /*#__PURE__*/ d("<button type=button class=search-bar-clear>"), Le = /*#__PURE__*/ d("<div><input class=search-bar-input>");
1064
+ function Re(e) {
1055
1065
  let r, s = () => e.shortcutKey ?? "k", l = () => e.shortcutLabel ?? `Ctrl ${String(s()).toUpperCase()}`;
1056
- return x(() => {
1066
+ return S(() => {
1057
1067
  let e = (e) => {
1058
1068
  let t = s();
1059
1069
  t !== !1 && r && (!(e.ctrlKey || e.metaKey) || e.altKey || e.shiftKey || e.key.toLowerCase() === t.toLowerCase() && (e.preventDefault(), r.focus(), r.select()));
1060
1070
  };
1061
- document.addEventListener("keydown", e), b(() => document.removeEventListener("keydown", e));
1071
+ document.addEventListener("keydown", e), x(() => document.removeEventListener("keydown", e));
1062
1072
  }), (() => {
1063
- var u = Ie(), d = u.firstChild;
1064
- a(u, n(Y, {
1073
+ var u = Le(), d = u.firstChild;
1074
+ a(u, n(de, {
1065
1075
  size: 17,
1066
1076
  class: "search-bar-icon",
1067
1077
  "aria-hidden": "true"
@@ -1072,7 +1082,7 @@ function Le(e) {
1072
1082
  return o(() => !e.value)() && s() !== !1;
1073
1083
  },
1074
1084
  get children() {
1075
- var e = Pe();
1085
+ var e = Fe();
1076
1086
  return a(e, l), e;
1077
1087
  }
1078
1088
  }), null), a(u, n(m, {
@@ -1080,7 +1090,7 @@ function Le(e) {
1080
1090
  return e.value;
1081
1091
  },
1082
1092
  get children() {
1083
- var t = Fe();
1093
+ var t = Ie();
1084
1094
  return t.$$click = () => e.onInput(""), a(t, n(X, {
1085
1095
  size: 15,
1086
1096
  "aria-hidden": "true"
@@ -1099,4 +1109,4 @@ function Le(e) {
1099
1109
  }
1100
1110
  r(["input", "click"]);
1101
1111
  //#endregion
1102
- export { I as Combobox, le as DataTable, Ne as FilterTable, Le as SearchBar };
1112
+ export { L as Combobox, ue as DataTable, Pe as FilterTable, Re as SearchBar };
package/dist/styles.css CHANGED
@@ -300,6 +300,26 @@
300
300
  box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
301
301
  }
302
302
 
303
+ /* Preview of the highlighted option, beside the list (outside its scroll box). */
304
+ .combobox-preview {
305
+ position: absolute;
306
+ top: calc(100% + 0.2rem);
307
+ left: calc(100% + 0.4rem);
308
+ z-index: 20;
309
+ /* Positioned past the combobox's right edge, so it would shrink to min-content. */
310
+ width: max-content;
311
+ padding: 0.5rem;
312
+ border: 1px solid
313
+ var(--combobox-border, var(--border, light-dark(#d0d0d0, #3a3e45)));
314
+ border-radius: 0.375rem;
315
+ background: var(
316
+ --combobox-panel-bg,
317
+ var(--surface, light-dark(#ffffff, #1d2024))
318
+ );
319
+ box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
320
+ pointer-events: none;
321
+ }
322
+
303
323
  .combobox-option,
304
324
  .combobox-empty {
305
325
  padding: 0.3rem 0.5rem;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@serkonda7/solid-components",
3
- "version": "0.3.0",
3
+ "version": "0.3.2",
4
4
  "description": "Reusable components for SolidJS",
5
5
  "license": "MIT",
6
6
  "author": "serkonda7",