@selectwin/kit 0.1.212 → 0.1.214

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 (12) hide show
  1. package/dist/SelectFilterBar.js +141 -132
  2. package/dist/SelectSection.d.ts +5 -0
  3. package/dist/SelectSection.js +24 -18
  4. package/dist/SelectTable.d.ts +39 -2
  5. package/dist/SelectTable.js +145 -103
  6. package/dist/internal/frame.d.ts +11 -2
  7. package/dist/internal/frame.js +6 -3
  8. package/dist/internal/listChrome.js +54 -49
  9. package/dist/internal/optionList.d.ts +3 -0
  10. package/dist/internal/optionList.js +29 -0
  11. package/dist/style.css +1 -1
  12. package/package.json +1 -1
package/dist/SelectTable.js CHANGED
@@ -1,61 +1,83 @@
1
1
  import { ChevronDownIcon as e, ChevronRightIcon as t } from "./icons.js";
2
2
  import { useSelectReveal as n } from "./internal/useSelectReveal.js";
3
- import { FrameBody as r, useInsideFrame as i } from "./internal/frame.js";
3
+ import { FrameBody as r, useFrameKind as i } from "./internal/frame.js";
4
4
  import { SelectAvatar as a } from "./SelectAvatar.js";
5
5
  import { SelectListChrome as o, listChromeShape as s } from "./internal/listChrome.js";
6
- import { Children as c, forwardRef as l, useCallback as u, useId as d, useLayoutEffect as f, useRef as p, useState as m } from "react";
7
- import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
6
+ import { Children as c, createContext as l, forwardRef as u, useCallback as d, useContext as f, useId as p, useLayoutEffect as ee, useRef as m, useState as h } from "react";
7
+ import { Fragment as g, jsx as _, jsxs as v } from "react/jsx-runtime";
8
8
  //#region src/SelectTable.tsx
9
- var v = 40, y = 1200, b = 8;
10
- function x(e) {
9
+ var y = 40, b = 1200, x = 8;
10
+ function S(e) {
11
11
  let t = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
12
12
  return `${Math.round(e / t * 1e3) / 1e3}rem`;
13
13
  }
14
- var S = l(function({ columns: t, children: a, empty: l, footer: h, title: S, help: w, description: T, action: E, filters: D, tools: O, onColumnResize: k, onColumnResizeReset: A, collapsible: j = !1, defaultOpen: M = !0, flush: N = !1, className: P, ...F }, I) {
15
- let [L, R] = m(M), z = d(), B = j && S != null ? {
16
- open: L,
17
- onToggle: () => R((e) => !e),
18
- controls: z
19
- } : void 0, V = c.count(a) === 0, H = V && !!l, { hasFilters: U, hasTitleRow: W } = s({
20
- title: S,
21
- description: T,
14
+ var C = l(0), w = u(function({ columns: t, children: a, empty: l, footer: u, title: f, help: g, description: w, action: E, filters: D, tools: O, onColumnResize: k, onColumnResizeReset: A, collapsible: j = !1, defaultOpen: M = !0, flush: N = !1, label: P, minWidth: F, sizing: I = "even", className: L, ...te }, R) {
15
+ let ne = P ?? (typeof f == "string" ? f : void 0), [z, B] = h(M), V = p(), H = j && f != null ? {
16
+ open: z,
17
+ onToggle: () => B((e) => !e),
18
+ controls: V
19
+ } : void 0, U = c.count(a) === 0, W = U && !!l, { hasFilters: G, hasTitleRow: K } = s({
20
+ title: f,
21
+ description: w,
22
22
  action: E,
23
23
  filters: D,
24
24
  tools: O
25
- }), G = H && !W && !U, K = i(), q = n({
25
+ }), q = W && !K && !G, J = i(), Y = J === "body", X = J === "list", re = n({
26
26
  selector: ".select-table__row",
27
27
  y: 8,
28
28
  duration: .45,
29
29
  stagger: .05,
30
30
  scroll: !0
31
- }), J = t.length ? t.map((e) => e.width ?? `minmax(${e.minWidth ?? "var(--select-table-col-min, 6.5rem)"}, ${e.grow ?? 1}fr)`).join(" ") : "1fr", Y = p(null), X = u((e) => {
32
- Y.current = e, typeof I == "function" ? I(e) : I && (I.current = e);
33
- }, [I]);
34
- f(() => {
35
- var e;
36
- (e = Y.current) == null || e.style.setProperty("--select-table-cols", J);
37
- }, [J]);
38
- let Z = (e, n) => {
39
- let r = Y.current;
31
+ }), Z = t.length ? t.map((e) => e.width ?? `minmax(${e.minWidth ?? "var(--select-table-col-min, 6.5rem)"}, ${e.grow ?? 1}fr)`).join(" ") : "1fr", Q = m(null), ie = d((e) => {
32
+ Q.current = e, typeof R == "function" ? R(e) : R && (R.current = e);
33
+ }, [R]);
34
+ ee(() => {
35
+ let e = Q.current;
36
+ if (!e) return;
37
+ if (I !== "content" || !t.some((e) => e.width == null)) {
38
+ e.style.setProperty("--select-table-cols", Z);
39
+ return;
40
+ }
41
+ e.style.setProperty("--select-table-cols", t.map((e) => e.width ?? "max-content").join(" "));
42
+ let n = t.map(() => 0);
43
+ for (let r of e.querySelectorAll(".select-table__head, .select-table__row")) {
44
+ if (r.closest(".select-table") !== e) continue;
45
+ let i = [...r.children];
46
+ i.length !== t.length || i.some((e) => e.style.gridColumn) || i.forEach((e, t) => {
47
+ n[t] = Math.max(n[t], e.getBoundingClientRect().width);
48
+ });
49
+ }
50
+ if (n.every((e) => e === 0)) {
51
+ e.style.setProperty("--select-table-cols", Z);
52
+ return;
53
+ }
54
+ e.style.setProperty("--select-table-cols", t.map((e, t) => {
55
+ if (e.width) return e.width;
56
+ let r = Math.max(1, Math.ceil(n[t]));
57
+ return `minmax(${e.minWidth ?? `min(${r}px, var(--select-table-col-cap, 20rem))`}, ${Math.max(1, Math.round(r * (e.grow ?? 1)))}fr)`;
58
+ }).join(" "));
59
+ });
60
+ let $ = (e, n) => {
61
+ let r = Q.current;
40
62
  if (!r) return;
41
63
  let i = t.map((t, r) => r === e ? `${n}px` : t.width ?? `minmax(${t.minWidth ?? "var(--select-table-col-min, 6.5rem)"}, ${t.grow ?? 1}fr)`);
42
64
  r.style.setProperty("--select-table-cols", i.join(" "));
43
- }, Q = (e) => (t) => {
65
+ }, ae = (e) => (t) => {
44
66
  var n;
45
67
  if (!k || t.button !== 0) return;
46
68
  let r = (n = t.currentTarget.parentElement) == null ? void 0 : n.getBoundingClientRect();
47
69
  if (!r) return;
48
70
  let i = t.clientX, a = r.width;
49
71
  t.preventDefault(), t.stopPropagation(), t.currentTarget.setPointerCapture(t.pointerId);
50
- let o = Y.current;
72
+ let o = Q.current;
51
73
  o == null || o.classList.add("select-table--resizing");
52
74
  let s = a, c = (t) => {
53
- s = Math.min(y, Math.max(v, a + (t.clientX - i))), Z(e, s);
75
+ s = Math.min(b, Math.max(y, a + (t.clientX - i))), $(e, s);
54
76
  }, l = () => {
55
- window.removeEventListener("pointermove", c), window.removeEventListener("pointerup", l), window.removeEventListener("pointercancel", l), o == null || o.classList.remove("select-table--resizing"), k(e, x(s));
77
+ window.removeEventListener("pointermove", c), window.removeEventListener("pointerup", l), window.removeEventListener("pointercancel", l), o == null || o.classList.remove("select-table--resizing"), k(e, S(s));
56
78
  };
57
79
  window.addEventListener("pointermove", c), window.addEventListener("pointerup", l), window.addEventListener("pointercancel", l);
58
- }, $ = (e) => (t) => {
80
+ }, oe = (e) => (t) => {
59
81
  var n;
60
82
  if (!k) return;
61
83
  let r = t.key === "ArrowRight" ? 1 : t.key === "ArrowLeft" ? -1 : 0;
@@ -63,157 +85,177 @@ var S = l(function({ columns: t, children: a, empty: l, footer: h, title: S, hel
63
85
  let i = (n = t.currentTarget.parentElement) == null ? void 0 : n.getBoundingClientRect();
64
86
  if (!i) return;
65
87
  t.preventDefault();
66
- let a = b * (t.shiftKey ? 10 : 1), o = Math.min(y, Math.max(v, i.width + r * a));
67
- Z(e, o), k(e, x(o));
88
+ let a = x * (t.shiftKey ? 10 : 1), o = Math.min(b, Math.max(y, i.width + r * a));
89
+ $(e, o), k(e, S(o));
68
90
  };
69
- return /* @__PURE__ */ _("div", {
70
- ref: X,
71
- ...F,
72
- className: `select-table${G ? " select-table--empty" : ""}${K && !N ? " select-table--nested" : ""}${N ? " select-table--flush" : ""}${B ? ` select-table--collapsible${L ? " is-open" : ""}` : ""}${P ? " " + P : ""}`,
73
- style: { "--select-table-cols": J },
74
- children: [/* @__PURE__ */ g(o, {
75
- title: S,
76
- help: B ? void 0 : w,
77
- description: T,
91
+ return /* @__PURE__ */ v("div", {
92
+ ref: ie,
93
+ ...te,
94
+ className: `select-table${q ? " select-table--empty" : ""}${Y && !N ? " select-table--nested" : ""}${X && !N ? " select-table--inlist" : ""}${N ? " select-table--flush" : ""}${H ? ` select-table--collapsible${z ? " is-open" : ""}` : ""}${L ? " " + L : ""}`,
95
+ style: {
96
+ "--select-table-cols": Z,
97
+ ...F ? { "--select-table-min": F } : {}
98
+ },
99
+ children: [/* @__PURE__ */ _(o, {
100
+ title: f,
101
+ help: H ? void 0 : g,
102
+ description: w,
78
103
  action: E,
79
- filters: B ? void 0 : D,
80
- tools: B ? void 0 : O,
81
- toggle: B
82
- }), /* @__PURE__ */ _(C, {
83
- enabled: !!B,
84
- open: L,
85
- id: z,
104
+ filters: H ? void 0 : D,
105
+ tools: H ? void 0 : O,
106
+ toggle: H
107
+ }), /* @__PURE__ */ v(T, {
108
+ enabled: !!H,
109
+ open: z,
110
+ id: V,
86
111
  children: [
87
- B && (D != null || O != null) ? /* @__PURE__ */ g(o, {
112
+ H && (D != null || O != null) ? /* @__PURE__ */ _(o, {
88
113
  filters: D,
89
114
  tools: O
90
115
  }) : null,
91
- /* @__PURE__ */ g("div", {
92
- className: `select-table__scroll${H ? " select-table__scroll--empty" : ""}`,
93
- children: /* @__PURE__ */ _("div", {
116
+ /* @__PURE__ */ _("div", {
117
+ className: `select-table__scroll${W ? " select-table__scroll--empty" : ""}`,
118
+ children: /* @__PURE__ */ v("div", {
94
119
  className: "select-table__scrollinner",
95
- children: [!H && /* @__PURE__ */ g("div", {
120
+ ...W ? {} : {
121
+ role: "table",
122
+ "aria-label": ne
123
+ },
124
+ children: [!W && /* @__PURE__ */ _("div", {
96
125
  className: "select-table__head",
97
126
  role: "row",
98
- children: t.map((n, r) => /* @__PURE__ */ _("div", {
127
+ children: t.map((n, r) => /* @__PURE__ */ v("div", {
99
128
  role: "columnheader",
100
129
  "aria-sort": n.sortable ? n.sortDir === "asc" ? "ascending" : n.sortDir === "desc" ? "descending" : "none" : void 0,
101
130
  className: `select-table__th select-table__cell--${n.align ?? "start"}${n.tone ? ` select-table__th--${n.tone}` : ""}`,
102
- children: [n.sortable ? /* @__PURE__ */ _("button", {
131
+ children: [n.sortable ? /* @__PURE__ */ v("button", {
103
132
  type: "button",
104
133
  className: `select-table__sortbtn${n.sortDir === "asc" ? " select-table__sortbtn--asc" : ""}${n.sortDir == null ? "" : " select-table__sortbtn--active"}`,
105
134
  onClick: n.onSort,
106
- children: [n.label, /* @__PURE__ */ g(e, {})]
107
- }) : n.label, k && n.resizable !== !1 && r < t.length - 1 && /* @__PURE__ */ g("span", {
135
+ children: [n.label, /* @__PURE__ */ _(e, {})]
136
+ }) : n.label, k && n.resizable !== !1 && r < t.length - 1 && /* @__PURE__ */ _("span", {
108
137
  role: "separator",
109
138
  "aria-orientation": "vertical",
110
139
  "aria-label": "Ajustar a largura da coluna",
111
140
  tabIndex: 0,
112
141
  className: "select-table__resizer",
113
- onPointerDown: Q(r),
114
- onKeyDown: $(r),
142
+ onPointerDown: ae(r),
143
+ onKeyDown: oe(r),
115
144
  onDoubleClick: A ? () => A(r) : void 0
116
145
  })]
117
146
  }, r))
118
- }), /* @__PURE__ */ g("div", {
147
+ }), /* @__PURE__ */ _("div", {
119
148
  className: "select-table__body",
120
- children: /* @__PURE__ */ g("div", {
149
+ children: /* @__PURE__ */ _("div", {
121
150
  className: "select-table__rows",
122
- ref: q,
123
- children: /* @__PURE__ */ g(r, { children: V && l ? /* @__PURE__ */ g("div", {
124
- className: "select-table__empty",
125
- children: l
126
- }) : a })
151
+ ref: re,
152
+ children: /* @__PURE__ */ _(C.Provider, {
153
+ value: t.length,
154
+ children: /* @__PURE__ */ _(r, { children: U && l ? /* @__PURE__ */ _("div", {
155
+ className: "select-table__empty",
156
+ children: l
157
+ }) : a })
158
+ })
127
159
  })
128
160
  })]
129
161
  })
130
162
  }),
131
- h && /* @__PURE__ */ g("div", {
163
+ u && /* @__PURE__ */ _("div", {
132
164
  className: "select-table__footer",
133
- children: h
165
+ children: u
134
166
  })
135
167
  ]
136
168
  })]
137
169
  });
138
170
  });
139
- function C({ enabled: e, open: t, id: n, children: r }) {
140
- return e ? /* @__PURE__ */ g("div", {
171
+ function T({ enabled: e, open: t, id: n, children: r }) {
172
+ return e ? /* @__PURE__ */ _("div", {
141
173
  className: "select-table__collapse",
142
174
  id: n,
143
175
  "data-open": t,
144
176
  "aria-hidden": !t,
145
- children: /* @__PURE__ */ g("div", {
177
+ children: /* @__PURE__ */ _("div", {
146
178
  className: "select-table__collapsewrap",
147
179
  children: r
148
180
  })
149
- }) : /* @__PURE__ */ g(h, { children: r });
181
+ }) : /* @__PURE__ */ _(g, { children: r });
150
182
  }
151
- var w = l(function({ name: e, secondary: t, src: n, badge: r, className: i, ...o }, s) {
152
- return /* @__PURE__ */ _("span", {
183
+ var E = u(function({ name: e, secondary: t, src: n, badge: r, className: i, ...o }, s) {
184
+ return /* @__PURE__ */ v("span", {
153
185
  ref: s,
154
186
  ...o,
155
187
  className: `select-usercell${i ? " " + i : ""}`,
156
- children: [/* @__PURE__ */ g(a, {
188
+ children: [/* @__PURE__ */ _(a, {
157
189
  name: typeof e == "string" ? e : void 0,
158
190
  src: n
159
- }), /* @__PURE__ */ _("span", {
191
+ }), /* @__PURE__ */ v("span", {
160
192
  className: "select-usercell__text",
161
- children: [r ? /* @__PURE__ */ _("span", {
193
+ children: [r ? /* @__PURE__ */ v("span", {
162
194
  className: "select-usercell__line",
163
- children: [/* @__PURE__ */ g("span", {
195
+ children: [/* @__PURE__ */ _("span", {
164
196
  className: "select-usercell__name",
165
197
  children: e
166
198
  }), r]
167
- }) : /* @__PURE__ */ g("span", {
199
+ }) : /* @__PURE__ */ _("span", {
168
200
  className: "select-usercell__name",
169
201
  children: e
170
- }), t && /* @__PURE__ */ g("span", {
202
+ }), t && /* @__PURE__ */ _("span", {
171
203
  className: "select-usercell__secondary",
172
204
  children: t
173
205
  })]
174
206
  })]
175
207
  });
176
208
  });
177
- function T({ children: e, onClick: t, expanded: n, nested: r = !1 }) {
178
- let i = `select-table__row${t ? " select-table__row--clickable" : ""}${r ? " select-table__row--nested" : ""}${n ? " is-expanded" : ""}`;
179
- return t ? /* @__PURE__ */ g("div", {
180
- className: i,
209
+ function D({ children: e, onClick: t, expanded: n, nested: r = !1, current: i = !1, section: a = !1, className: o, ...s }) {
210
+ let c = `select-table__row${t ? " select-table__row--clickable" : ""}${r ? " select-table__row--nested" : ""}${a ? " select-table__row--section" : ""}${n ? " is-expanded" : ""}${i ? " is-current" : ""}${o ? " " + o : ""}`;
211
+ return t ? /* @__PURE__ */ _("div", {
212
+ ...s,
213
+ className: c,
181
214
  role: "row",
182
215
  tabIndex: 0,
183
216
  "aria-expanded": n,
217
+ "aria-current": i || void 0,
184
218
  onClick: (e) => {
185
- D(e.target, e.currentTarget) || t();
219
+ k(e.target, e.currentTarget) || t();
186
220
  },
187
221
  onKeyDown: (e) => {
188
222
  e.target !== e.currentTarget || e.key !== "Enter" && e.key !== " " || (e.preventDefault(), t());
189
223
  },
190
224
  children: e
191
- }) : /* @__PURE__ */ g("div", {
192
- className: i,
225
+ }) : /* @__PURE__ */ _("div", {
226
+ ...s,
227
+ className: c,
193
228
  role: "row",
229
+ "aria-current": i || void 0,
194
230
  children: e
195
231
  });
196
232
  }
197
- var E = "button, a[href], input, select, textarea, label, summary, [role=\"button\"], [role=\"menuitem\"], [role=\"checkbox\"], [role=\"switch\"], [data-row-click=\"ignore\"]";
198
- function D(e, t) {
233
+ var O = "button, a[href], input, select, textarea, label, summary, [role=\"button\"], [role=\"menuitem\"], [role=\"checkbox\"], [role=\"switch\"], [data-row-click=\"ignore\"]";
234
+ function k(e, t) {
199
235
  if (!(e instanceof Element) || !t.contains(e)) return !0;
200
- let n = e.closest(E);
236
+ let n = e.closest(O);
201
237
  return n !== null && n !== t && t.contains(n);
202
238
  }
203
- var O = l(function({ children: e, align: n = "start", disclosure: r, className: i, ...a }, o) {
204
- return /* @__PURE__ */ _("div", {
205
- ref: o,
206
- ...a,
207
- role: "cell",
208
- className: `select-table__td select-table__cell--${n}${i ? " " + i : ""}`,
209
- children: [r ? /* @__PURE__ */ g("span", {
239
+ var A = u(function({ children: e, align: n = "start", disclosure: r, header: i = !1, span: a, wrap: o = !1, className: s, style: c, ...l }, u) {
240
+ let d = f(C), p = a === "all" ? d || void 0 : a;
241
+ return /* @__PURE__ */ v("div", {
242
+ ref: u,
243
+ ...l,
244
+ role: i ? "rowheader" : "cell",
245
+ "aria-colspan": p && p > 1 ? p : void 0,
246
+ style: a ? {
247
+ gridColumn: a === "all" ? "1 / -1" : `span ${a}`,
248
+ ...c
249
+ } : c,
250
+ className: `select-table__td select-table__cell--${n}${o ? " select-table__td--wrap" : ""}${s ? " " + s : ""}`,
251
+ children: [r ? /* @__PURE__ */ _("span", {
210
252
  className: `select-table__disclosure${r === "open" ? " is-open" : ""}`,
211
253
  "aria-hidden": "true",
212
- children: r !== "none" && /* @__PURE__ */ g(t, {})
254
+ children: r !== "none" && /* @__PURE__ */ _(t, {})
213
255
  }) : null, e]
214
256
  });
215
- }), k = l(function({ icon: e, title: t, subtitle: n, action: r, tone: i, minHeight: a, className: o, style: s, ...c }, l) {
216
- return /* @__PURE__ */ _("div", {
257
+ }), j = u(function({ icon: e, title: t, subtitle: n, action: r, tone: i, minHeight: a, className: o, style: s, ...c }, l) {
258
+ return /* @__PURE__ */ v("div", {
217
259
  ref: l,
218
260
  ...c,
219
261
  style: a ? {
@@ -222,19 +264,19 @@ var O = l(function({ children: e, align: n = "start", disclosure: r, className:
222
264
  } : s,
223
265
  className: `select-table-empty${i === "critical" ? " select-table-empty--critical" : ""}${a ? " select-table-empty--fill" : ""}${o ? " " + o : ""}`,
224
266
  children: [
225
- e && /* @__PURE__ */ g("span", {
267
+ e && /* @__PURE__ */ _("span", {
226
268
  className: "select-table-empty__icon",
227
269
  children: e
228
270
  }),
229
- /* @__PURE__ */ g("p", {
271
+ /* @__PURE__ */ _("p", {
230
272
  className: "select-table-empty__title",
231
273
  children: t
232
274
  }),
233
- n && /* @__PURE__ */ g("p", {
275
+ n && /* @__PURE__ */ _("p", {
234
276
  className: "select-table-empty__subtitle",
235
277
  children: n
236
278
  }),
237
- r && /* @__PURE__ */ g("div", {
279
+ r && /* @__PURE__ */ _("div", {
238
280
  className: "select-table-empty__action",
239
281
  children: r
240
282
  })
@@ -242,6 +284,6 @@ var O = l(function({ children: e, align: n = "start", disclosure: r, className:
242
284
  });
243
285
  });
244
286
  //#endregion
245
- export { S as SelectTable, O as SelectTableCell, k as SelectTableEmpty, T as SelectTableRow, w as SelectUserCell };
287
+ export { w as SelectTable, A as SelectTableCell, j as SelectTableEmpty, D as SelectTableRow, E as SelectUserCell };
246
288
 
247
289
  //# sourceMappingURL=SelectTable.js.map
package/dist/internal/frame.d.ts CHANGED
@@ -1,7 +1,16 @@
1
1
  import { ReactNode } from 'react';
2
+ /**
3
+ * Onde a moldura está: fora de outra (`false`), no corpo branco de outra (`'body'`), ou no corpo de uma seção que é a
4
+ * moldura de uma lista (`'list'`, 0.1.213: `SelectSection list`) — ali o corpo não tem a caixa branca, e a tabela
5
+ * desenha o cabeçalho na moldura e as linhas na caixa branca dela, como a tabela sozinha.
6
+ */
7
+ export type FrameKind = false | 'body' | 'list';
2
8
  /** Esta moldura está dentro do corpo de outra? Então desenha sem a casca. */
3
9
  export declare function useInsideFrame(): boolean;
4
- /** O corpo branco de uma moldura: o que está dentro dele sabe que está dentro. */
5
- export declare function FrameBody({ children }: {
10
+ /** Que corpo é esse (0.1.213): o branco de uma moldura, ou o de uma seção que é a moldura de uma lista. */
11
+ export declare function useFrameKind(): FrameKind;
12
+ /** O corpo de uma moldura: o que está dentro dele sabe que está dentro (e, desde a 0.1.213, de que corpo). */
13
+ export declare function FrameBody({ children, kind }: {
6
14
  children: ReactNode;
15
+ kind?: 'body' | 'list';
7
16
  }): import("react").JSX.Element;
package/dist/internal/frame.js CHANGED
@@ -3,15 +3,18 @@ import { jsx as n } from "react/jsx-runtime";
3
3
  //#region src/internal/frame.tsx
4
4
  var r = e(!1);
5
5
  function i() {
6
+ return t(r) !== !1;
7
+ }
8
+ function a() {
6
9
  return t(r);
7
10
  }
8
- function a({ children: e }) {
11
+ function o({ children: e, kind: t = "body" }) {
9
12
  return /* @__PURE__ */ n(r.Provider, {
10
- value: !0,
13
+ value: t,
11
14
  children: e
12
15
  });
13
16
  }
14
17
  //#endregion
15
- export { a as FrameBody, i as useInsideFrame };
18
+ export { o as FrameBody, a as useFrameKind, i as useInsideFrame };
16
19
 
17
20
  //# sourceMappingURL=frame.js.map
package/dist/internal/listChrome.js CHANGED
@@ -2,11 +2,12 @@ import { CheckIcon as e, ChevronDownIcon as t } from "../icons.js";
2
2
  import { formatSelectNumber as n, useSelectLocale as r, useSelectMessages as i } from "../SelectLocale.js";
3
3
  import { SelectInfoTip as a } from "../SelectInfoTip.js";
4
4
  import { SelectPopover as o } from "../SelectPopover.js";
5
- import { SelectPagination as s } from "../SelectPagination.js";
6
- import { useState as c } from "react";
7
- import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
5
+ import { moveInOptions as s, useOptionListFocus as c } from "./optionList.js";
6
+ import { SelectPagination as l } from "../SelectPagination.js";
7
+ import { useRef as u, useState as d } from "react";
8
+ import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
8
9
  //#region src/internal/listChrome.tsx
9
- function f({ title: e, description: t, action: n, filters: r, tools: i }) {
10
+ function h({ title: e, description: t, action: n, filters: r, tools: i }) {
10
11
  let a = r != null, o = a ? null : i, s = e != null || t != null;
11
12
  return {
12
13
  hasFilters: a,
@@ -15,61 +16,61 @@ function f({ title: e, description: t, action: n, filters: r, tools: i }) {
15
16
  hasTitleRow: s || n != null || o != null
16
17
  };
17
18
  }
18
- function p({ title: e, help: n, description: r, action: i, filters: o, tools: s, toggle: c }) {
19
- let { hasFilters: p, inlineTools: m, hasIdentity: h, hasTitleRow: g } = f({
19
+ function g({ title: e, help: n, description: r, action: i, filters: o, tools: s, toggle: c }) {
20
+ let { hasFilters: l, inlineTools: u, hasIdentity: d, hasTitleRow: g } = h({
20
21
  title: e,
21
22
  description: r,
22
23
  action: i,
23
24
  filters: o,
24
25
  tools: s
25
26
  });
26
- return /* @__PURE__ */ d(l, { children: [g && /* @__PURE__ */ d("div", {
27
+ return /* @__PURE__ */ m(f, { children: [g && /* @__PURE__ */ m("div", {
27
28
  className: "select-table__title",
28
- children: [c ? /* @__PURE__ */ d("button", {
29
+ children: [c ? /* @__PURE__ */ m("button", {
29
30
  type: "button",
30
31
  className: "select-table__toggle",
31
32
  "aria-expanded": c.open,
32
33
  "aria-controls": c.controls,
33
34
  onClick: c.onToggle,
34
- children: [/* @__PURE__ */ d("span", {
35
+ children: [/* @__PURE__ */ m("span", {
35
36
  className: "select-table__heading",
36
- children: [e != null && /* @__PURE__ */ u("span", {
37
+ children: [e != null && /* @__PURE__ */ p("span", {
37
38
  className: "select-table__titletext",
38
39
  children: e
39
- }), r != null && /* @__PURE__ */ u("span", {
40
+ }), r != null && /* @__PURE__ */ p("span", {
40
41
  className: "select-table__desc",
41
42
  children: r
42
43
  })]
43
- }), /* @__PURE__ */ u("span", {
44
+ }), /* @__PURE__ */ p("span", {
44
45
  className: "select-table__chevron",
45
46
  "aria-hidden": "true",
46
- children: /* @__PURE__ */ u(t, {})
47
+ children: /* @__PURE__ */ p(t, {})
47
48
  })]
48
- }) : h && /* @__PURE__ */ d("div", {
49
+ }) : d && /* @__PURE__ */ m("div", {
49
50
  className: "select-table__heading",
50
- children: [e != null && /* @__PURE__ */ d("h3", {
51
+ children: [e != null && /* @__PURE__ */ m("h3", {
51
52
  className: `select-table__titletext${n == null ? "" : " select-table__titletext--help"}`,
52
- children: [e, n != null && /* @__PURE__ */ u(a, { content: n })]
53
- }), r != null && /* @__PURE__ */ u("p", {
53
+ children: [e, n != null && /* @__PURE__ */ p(a, { content: n })]
54
+ }), r != null && /* @__PURE__ */ p("p", {
54
55
  className: "select-table__desc",
55
56
  children: r
56
57
  })]
57
- }), (i != null || m != null) && /* @__PURE__ */ d("div", {
58
+ }), (i != null || u != null) && /* @__PURE__ */ m("div", {
58
59
  className: "select-table__actions",
59
- children: [i, m]
60
+ children: [i, u]
60
61
  })]
61
- }), p && /* @__PURE__ */ d("div", {
62
+ }), l && /* @__PURE__ */ m("div", {
62
63
  className: "select-table__toolbar",
63
- children: [/* @__PURE__ */ u("div", {
64
+ children: [/* @__PURE__ */ p("div", {
64
65
  className: "select-table__filters",
65
66
  children: o
66
- }), s != null && /* @__PURE__ */ u("div", {
67
+ }), s != null && /* @__PURE__ */ p("div", {
67
68
  className: "select-table__tools",
68
69
  children: s
69
70
  })]
70
71
  })] });
71
72
  }
72
- function m(e, t, n) {
73
+ function _(e, t, n) {
73
74
  if (!e || e.length === 0) return [];
74
75
  let r = [...e].sort((e, t) => e - t);
75
76
  if (t == null) return r;
@@ -78,59 +79,63 @@ function m(e, t, n) {
78
79
  for (let e of r) if (i.push(e), e >= t) break;
79
80
  return n != null && r.includes(n) && !i.includes(n) && (i.push(n), i.sort((e, t) => e - t)), i;
80
81
  }
81
- function h({ pagination: a, className: l }) {
82
- let f = i().pagination, p = r(), [h, g] = c(!1), _ = m(a.pageSizeOptions, a.total, a.pageSize), v = _.length > 1 && a.onPageSizeChange != null;
83
- return !v && !a.hasPrevious && !a.hasNext ? null : /* @__PURE__ */ d("div", {
84
- className: `select-datatable__pagination${l ? " " + l : ""}`,
85
- children: [v && a.onPageSizeChange && /* @__PURE__ */ u("div", {
82
+ function v({ pagination: a, className: f }) {
83
+ let h = i().pagination, g = r(), [v, y] = d(!1), b = u(null);
84
+ c(v, b);
85
+ let x = _(a.pageSizeOptions, a.total, a.pageSize), S = x.length > 1 && a.onPageSizeChange != null;
86
+ return !S && !a.hasPrevious && !a.hasNext ? null : /* @__PURE__ */ m("div", {
87
+ className: `select-datatable__pagination${f ? " " + f : ""}`,
88
+ children: [S && a.onPageSizeChange && /* @__PURE__ */ p("div", {
86
89
  className: "select-datatable__pagesize",
87
- children: /* @__PURE__ */ u(o, {
88
- active: h,
89
- onClose: () => g(!1),
90
+ children: /* @__PURE__ */ p(o, {
91
+ active: v,
92
+ onClose: () => y(!1),
90
93
  placement: "top-start",
91
94
  role: "listbox",
92
- activator: /* @__PURE__ */ d("button", {
95
+ activator: /* @__PURE__ */ m("button", {
93
96
  type: "button",
94
- className: `select-facet${h ? " is-active" : ""}`,
95
- onClick: () => g((e) => !e),
96
- "aria-expanded": h,
97
+ className: `select-facet${v ? " is-active" : ""}`,
98
+ onClick: () => y((e) => !e),
99
+ "aria-expanded": v,
97
100
  "aria-haspopup": "listbox",
98
- children: [/* @__PURE__ */ u("span", {
101
+ children: [/* @__PURE__ */ p("span", {
99
102
  className: "select-facet__label",
100
- children: f.perPage(a.pageSize == null ? "—" : n(a.pageSize, p))
101
- }), /* @__PURE__ */ u("span", {
102
- className: `select-facet__caret${h ? " is-open" : ""}`,
103
+ children: h.perPage(a.pageSize == null ? "—" : n(a.pageSize, g))
104
+ }), /* @__PURE__ */ p("span", {
105
+ className: `select-facet__caret${v ? " is-open" : ""}`,
103
106
  "aria-hidden": "true",
104
- children: /* @__PURE__ */ u(t, {})
107
+ children: /* @__PURE__ */ p(t, {})
105
108
  })]
106
109
  }),
107
- children: /* @__PURE__ */ u("div", {
110
+ children: /* @__PURE__ */ p("div", {
108
111
  className: "select-facet__panel",
109
- children: /* @__PURE__ */ u("div", {
112
+ ref: b,
113
+ onKeyDown: s,
114
+ children: /* @__PURE__ */ p("div", {
110
115
  className: "select-facet__options",
111
116
  role: "listbox",
112
- children: _.map((t) => {
117
+ children: x.map((t) => {
113
118
  let r = t === a.pageSize;
114
- return /* @__PURE__ */ d("button", {
119
+ return /* @__PURE__ */ m("button", {
115
120
  type: "button",
116
121
  role: "option",
117
122
  "aria-selected": r,
118
123
  className: `select-facet__opt${r ? " is-selected" : ""}`,
119
124
  onClick: () => {
120
125
  var e;
121
- (e = a.onPageSizeChange) == null || e.call(a, t), g(!1);
126
+ (e = a.onPageSizeChange) == null || e.call(a, t), y(!1);
122
127
  },
123
- children: [/* @__PURE__ */ u("span", { children: f.perPage(n(t, p)) }), r && /* @__PURE__ */ u("span", {
128
+ children: [/* @__PURE__ */ p("span", { children: h.perPage(n(t, g)) }), r && /* @__PURE__ */ p("span", {
124
129
  className: "select-facet__check",
125
130
  "aria-hidden": "true",
126
- children: /* @__PURE__ */ u(e, {})
131
+ children: /* @__PURE__ */ p(e, {})
127
132
  })]
128
133
  }, t);
129
134
  })
130
135
  })
131
136
  })
132
137
  })
133
- }), /* @__PURE__ */ u(s, {
138
+ }), /* @__PURE__ */ p(l, {
134
139
  page: a.page ?? 1,
135
140
  pageCount: a.pageCount,
136
141
  total: a.total,
@@ -146,6 +151,6 @@ function h({ pagination: a, className: l }) {
146
151
  });
147
152
  }
148
153
  //#endregion
149
- export { p as SelectListChrome, h as SelectListFooter, f as listChromeShape, m as usablePageSizes };
154
+ export { g as SelectListChrome, v as SelectListFooter, h as listChromeShape, _ as usablePageSizes };
150
155
 
151
156
  //# sourceMappingURL=listChrome.js.map
package/dist/internal/optionList.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ import { KeyboardEvent, RefObject } from 'react';
2
+ export declare function useOptionListFocus(open: boolean, ref: RefObject<HTMLElement | null>): void;
3
+ export declare function moveInOptions(event: KeyboardEvent<HTMLElement>): void;