@selectwin/kit 0.1.213 → 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 (5) hide show
  1. package/dist/SelectFilterBar.js +141 -132
  2. package/dist/internal/listChrome.js +54 -49
  3. package/dist/internal/optionList.d.ts +3 -0
  4. package/dist/internal/optionList.js +29 -0
  5. package/package.json +1 -1
package/dist/SelectFilterBar.js CHANGED
@@ -3,137 +3,142 @@ import { useSelectMessages as a } from "./SelectLocale.js";
3
3
  import { SelectField as o } from "./SelectField.js";
4
4
  import { SelectPopover as s } from "./SelectPopover.js";
5
5
  import { SelectSearchInput as c } from "./SelectSearchInput.js";
6
- import { SelectDateField as l } from "./SelectDateField.js";
7
- import { formatDateValue as u } from "./internal/dateValue.js";
8
- import { forwardRef as d, useEffect as f, useState as p } from "react";
9
- import { jsx as m, jsxs as h } from "react/jsx-runtime";
6
+ import { moveInOptions as l, useOptionListFocus as u } from "./internal/optionList.js";
7
+ import { SelectDateField as d } from "./SelectDateField.js";
8
+ import { formatDateValue as f } from "./internal/dateValue.js";
9
+ import { forwardRef as p, useEffect as m, useRef as h, useState as g } from "react";
10
+ import { jsx as _, jsxs as v } from "react/jsx-runtime";
10
11
  //#region src/SelectFilterBar.tsx
11
- function g(e) {
12
+ function y(e) {
12
13
  return (e ?? "").split(",").map((e) => e.trim()).filter(Boolean);
13
14
  }
14
- function _(e, t) {
15
+ function b(e, t) {
15
16
  let n = new Set(e);
16
17
  return (t ? t.map((e) => e.value).filter((e) => n.has(e)) : [...n]).join(",");
17
18
  }
18
- function v(e, t) {
19
+ function x(e, t) {
19
20
  var n;
20
21
  if (e.type === "select") return ((n = e.options) == null || (n = n.find((e) => e.value === t)) == null ? void 0 : n.label) ?? t;
21
22
  if (e.type === "multiselect") {
22
- let n = g(t).map((t) => {
23
+ let n = y(t).map((t) => {
23
24
  var n;
24
25
  return ((n = e.options) == null || (n = n.find((e) => e.value === t)) == null ? void 0 : n.label) ?? t;
25
26
  });
26
27
  return n.length > 2 ? `${n[0]} +${n.length - 1}` : n.join(", ");
27
28
  }
28
- return e.type === "date" ? u(t) ?? t : t;
29
+ return e.type === "date" ? f(t) ?? t : t;
29
30
  }
30
- function y({ filter: n, value: r, onChange: i, open: u, onToggle: d, onClose: y, disabled: b }) {
31
- let x = a(), [S, C] = p("");
32
- f(() => {
33
- u || C("");
34
- }, [u]);
35
- let w = r.trim() !== "", T = w ? v(n, r) : null, E = w && !!n.error, D = n.options ?? [], O = D.length > 7, k = O ? D.filter((e) => e.label.toLowerCase().includes(S.trim().toLowerCase())) : D;
36
- return /* @__PURE__ */ h(s, {
37
- active: u,
38
- onClose: y,
31
+ function S({ filter: n, value: r, onChange: i, open: f, onToggle: p, onClose: S, disabled: C }) {
32
+ let w = a(), [T, E] = g(""), D = h(null);
33
+ u(f && (n.type === "select" || n.type === "multiselect"), D), m(() => {
34
+ f || E("");
35
+ }, [f]);
36
+ let O = r.trim() !== "", k = O ? x(n, r) : null, A = O && !!n.error, j = n.options ?? [], M = j.length > 7, N = M ? j.filter((e) => e.label.toLowerCase().includes(T.trim().toLowerCase())) : j;
37
+ return /* @__PURE__ */ v(s, {
38
+ active: f,
39
+ onClose: S,
39
40
  placement: "bottom-start",
40
- activator: /* @__PURE__ */ h("button", {
41
+ activator: /* @__PURE__ */ v("button", {
41
42
  type: "button",
42
- className: `select-facet${w ? " is-active" : ""}${E ? " is-error" : ""}`,
43
- onClick: d,
44
- disabled: b,
45
- "aria-expanded": u,
46
- "aria-invalid": E || void 0,
47
- title: E ? n.error : void 0,
48
- children: [/* @__PURE__ */ m("span", {
43
+ className: `select-facet${O ? " is-active" : ""}${A ? " is-error" : ""}`,
44
+ onClick: p,
45
+ disabled: C,
46
+ "aria-expanded": f,
47
+ "aria-invalid": A || void 0,
48
+ title: A ? n.error : void 0,
49
+ children: [/* @__PURE__ */ _("span", {
49
50
  className: "select-facet__label",
50
- children: T == null ? n.label : `${n.label}: ${T}`
51
- }), /* @__PURE__ */ m("span", {
52
- className: `select-facet__caret${u ? " is-open" : ""}`,
51
+ children: k == null ? n.label : `${n.label}: ${k}`
52
+ }), /* @__PURE__ */ _("span", {
53
+ className: `select-facet__caret${f ? " is-open" : ""}`,
53
54
  "aria-hidden": "true",
54
- children: /* @__PURE__ */ m(t, {})
55
+ children: /* @__PURE__ */ _(t, {})
55
56
  })]
56
57
  }),
57
58
  children: [
58
- n.type === "multiselect" ? /* @__PURE__ */ h("div", {
59
+ n.type === "multiselect" ? /* @__PURE__ */ v("div", {
59
60
  className: "select-facet__panel",
60
- children: [O && /* @__PURE__ */ m("div", {
61
+ ref: D,
62
+ onKeyDown: l,
63
+ children: [M && /* @__PURE__ */ _("div", {
61
64
  className: "select-facet__search",
62
- children: /* @__PURE__ */ m(c, {
63
- value: S,
64
- onChange: C,
65
- placeholder: x.filterBar.searchOption
65
+ children: /* @__PURE__ */ _(c, {
66
+ value: T,
67
+ onChange: E,
68
+ placeholder: w.filterBar.searchOption
66
69
  })
67
- }), /* @__PURE__ */ m("div", {
70
+ }), /* @__PURE__ */ _("div", {
68
71
  className: "select-facet__options",
69
72
  role: "listbox",
70
73
  "aria-multiselectable": "true",
71
- children: k.length === 0 ? /* @__PURE__ */ m("div", {
74
+ children: N.length === 0 ? /* @__PURE__ */ _("div", {
72
75
  className: "select-facet__empty",
73
- children: x.common.nothingFound
74
- }) : k.map((t) => {
75
- let n = g(r), a = n.includes(t.value);
76
- return /* @__PURE__ */ h("button", {
76
+ children: w.common.nothingFound
77
+ }) : N.map((t) => {
78
+ let n = y(r), a = n.includes(t.value);
79
+ return /* @__PURE__ */ v("button", {
77
80
  type: "button",
78
81
  role: "option",
79
82
  "aria-selected": a,
80
83
  className: "select-facet__opt",
81
- onClick: () => i(_(a ? n.filter((e) => e !== t.value) : [...n, t.value], D)),
82
- children: [/* @__PURE__ */ m("span", { children: t.label }), a && /* @__PURE__ */ m("span", {
84
+ onClick: () => i(b(a ? n.filter((e) => e !== t.value) : [...n, t.value], j)),
85
+ children: [/* @__PURE__ */ _("span", { children: t.label }), a && /* @__PURE__ */ _("span", {
83
86
  className: "select-facet__check",
84
87
  "aria-hidden": "true",
85
- children: /* @__PURE__ */ m(e, {})
88
+ children: /* @__PURE__ */ _(e, {})
86
89
  })]
87
90
  }, t.value);
88
91
  })
89
92
  })]
90
- }) : n.type === "select" ? /* @__PURE__ */ h("div", {
93
+ }) : n.type === "select" ? /* @__PURE__ */ v("div", {
91
94
  className: "select-facet__panel",
92
- children: [O && /* @__PURE__ */ m("div", {
95
+ ref: D,
96
+ onKeyDown: l,
97
+ children: [M && /* @__PURE__ */ _("div", {
93
98
  className: "select-facet__search",
94
- children: /* @__PURE__ */ m(c, {
95
- value: S,
96
- onChange: C,
97
- placeholder: x.filterBar.searchOption
99
+ children: /* @__PURE__ */ _(c, {
100
+ value: T,
101
+ onChange: E,
102
+ placeholder: w.filterBar.searchOption
98
103
  })
99
- }), /* @__PURE__ */ m("div", {
104
+ }), /* @__PURE__ */ _("div", {
100
105
  className: "select-facet__options",
101
106
  role: "listbox",
102
- children: k.length === 0 ? /* @__PURE__ */ m("div", {
107
+ children: N.length === 0 ? /* @__PURE__ */ _("div", {
103
108
  className: "select-facet__empty",
104
- children: x.common.nothingFound
105
- }) : k.map((t) => {
109
+ children: w.common.nothingFound
110
+ }) : N.map((t) => {
106
111
  let n = r === t.value;
107
- return /* @__PURE__ */ h("button", {
112
+ return /* @__PURE__ */ v("button", {
108
113
  type: "button",
109
114
  role: "option",
110
115
  "aria-selected": n,
111
116
  className: `select-facet__opt${n ? " is-selected" : ""}`,
112
117
  onClick: () => {
113
- i(n ? "" : t.value), y();
118
+ i(n ? "" : t.value), S();
114
119
  },
115
- children: [/* @__PURE__ */ m("span", { children: t.label }), n && /* @__PURE__ */ m("span", {
120
+ children: [/* @__PURE__ */ _("span", { children: t.label }), n && /* @__PURE__ */ _("span", {
116
121
  className: "select-facet__check",
117
122
  "aria-hidden": "true",
118
- children: /* @__PURE__ */ m(e, {})
123
+ children: /* @__PURE__ */ _(e, {})
119
124
  })]
120
125
  }, t.value);
121
126
  })
122
127
  })]
123
- }) : n.type === "date" ? /* @__PURE__ */ m("div", {
128
+ }) : n.type === "date" ? /* @__PURE__ */ _("div", {
124
129
  className: "select-facet__field",
125
- children: /* @__PURE__ */ m(l, {
130
+ children: /* @__PURE__ */ _(d, {
126
131
  value: r,
127
132
  onChange: i,
128
133
  placeholder: n.placeholder,
129
134
  clearable: !1
130
135
  })
131
- }) : /* @__PURE__ */ m("div", {
136
+ }) : /* @__PURE__ */ _("div", {
132
137
  className: "select-facet__field",
133
138
  onKeyDown: (e) => {
134
- e.key === "Enter" && (e.preventDefault(), y());
139
+ e.key === "Enter" && (e.preventDefault(), S());
135
140
  },
136
- children: /* @__PURE__ */ m(o, {
141
+ children: /* @__PURE__ */ _(o, {
137
142
  type: "text",
138
143
  value: r,
139
144
  onChange: i,
@@ -141,152 +146,156 @@ function y({ filter: n, value: r, onChange: i, open: u, onToggle: d, onClose: y,
141
146
  autoFocus: !0
142
147
  })
143
148
  }),
144
- E && /* @__PURE__ */ m("div", {
149
+ A && /* @__PURE__ */ _("div", {
145
150
  className: "select-facet__error",
146
151
  role: "alert",
147
152
  children: n.error
148
153
  }),
149
- w && /* @__PURE__ */ m("div", {
154
+ O && /* @__PURE__ */ _("div", {
150
155
  className: "select-facet__foot",
151
- children: /* @__PURE__ */ m("button", {
156
+ children: /* @__PURE__ */ _("button", {
152
157
  type: "button",
153
158
  className: "select-facet__clear",
154
159
  onClick: () => {
155
- i(""), y();
160
+ i(""), S();
156
161
  },
157
- children: x.filterBar.clear
162
+ children: w.filterBar.clear
158
163
  })
159
164
  })
160
165
  ]
161
166
  });
162
167
  }
163
- var b = d(function({ filters: e, values: t, onChange: o, onClearAll: c, search: l, leading: u, disabled: d, className: f, ...g }, _) {
164
- let b = a(), [x, S] = p([]), [C, w] = p(null), [T, E] = p(!1), D = (e) => (t[e.key] ?? "").trim() !== "", O = (e) => !!e.pinned || D(e) || x.includes(e.key), k = e.filter(O), A = e.filter((e) => !O(e)), j = e.filter(D), M = () => {
165
- S([]), w(null), c();
166
- }, N = (e) => {
167
- S((t) => t.includes(e) ? t : [...t, e]), E(!1), w(e);
168
+ var C = p(function({ filters: e, values: t, onChange: o, onClearAll: c, search: d, leading: f, disabled: p, className: m, ...y }, b) {
169
+ let C = a(), [w, T] = g([]), [E, D] = g(null), [O, k] = g(!1), A = h(null);
170
+ u(O, A);
171
+ let j = (e) => (t[e.key] ?? "").trim() !== "", M = (e) => !!e.pinned || j(e) || w.includes(e.key), N = e.filter(M), P = e.filter((e) => !M(e)), F = e.filter(j), I = () => {
172
+ T([]), D(null), c();
173
+ }, L = (e) => {
174
+ T((t) => t.includes(e) ? t : [...t, e]), k(!1), D(e);
168
175
  };
169
- return /* @__PURE__ */ h("div", {
170
- ref: _,
171
- ...g,
172
- className: `select-filterbar${f ? " " + f : ""}`,
176
+ return /* @__PURE__ */ v("div", {
177
+ ref: b,
178
+ ...y,
179
+ className: `select-filterbar${m ? " " + m : ""}`,
173
180
  children: [
174
- /* @__PURE__ */ h("div", {
181
+ /* @__PURE__ */ v("div", {
175
182
  className: "select-filterbar__row",
176
183
  children: [
177
- u,
178
- l && /* @__PURE__ */ h("div", {
179
- className: `select-filterbar__query${l.error ? " select-filterbar__query--error" : ""}`,
184
+ f,
185
+ d && /* @__PURE__ */ v("div", {
186
+ className: `select-filterbar__query${d.error ? " select-filterbar__query--error" : ""}`,
180
187
  children: [
181
- /* @__PURE__ */ m("span", {
188
+ /* @__PURE__ */ _("span", {
182
189
  className: "select-filterbar__query-icon",
183
190
  "aria-hidden": "true",
184
- children: /* @__PURE__ */ m(i, {})
191
+ children: /* @__PURE__ */ _(i, {})
185
192
  }),
186
- /* @__PURE__ */ m("input", {
193
+ /* @__PURE__ */ _("input", {
187
194
  className: "select-filterbar__query-input",
188
195
  type: "search",
189
- value: l.value,
190
- placeholder: l.placeholder ?? b.common.searchPlaceholder,
191
- onChange: (e) => l.onChange(e.target.value),
192
- onKeyDown: l.onSubmit ? (e) => {
196
+ value: d.value,
197
+ placeholder: d.placeholder ?? C.common.searchPlaceholder,
198
+ onChange: (e) => d.onChange(e.target.value),
199
+ onKeyDown: d.onSubmit ? (e) => {
193
200
  if (e.key === "Enter") {
194
201
  var t;
195
- e.preventDefault(), (t = l.onSubmit) == null || t.call(l);
202
+ e.preventDefault(), (t = d.onSubmit) == null || t.call(d);
196
203
  }
197
204
  } : void 0,
198
- "aria-label": l.ariaLabel ?? l.placeholder ?? b.common.search,
199
- "aria-invalid": l.error ? !0 : void 0,
200
- disabled: d
205
+ "aria-label": d.ariaLabel ?? d.placeholder ?? C.common.search,
206
+ "aria-invalid": d.error ? !0 : void 0,
207
+ disabled: p
201
208
  }),
202
- l.value && /* @__PURE__ */ m("button", {
209
+ d.value && /* @__PURE__ */ _("button", {
203
210
  type: "button",
204
211
  className: "select-filterbar__query-clear",
205
- "aria-label": b.filterBar.clearSearch,
206
- onClick: () => l.onChange(""),
207
- children: /* @__PURE__ */ m(n, {})
212
+ "aria-label": C.filterBar.clearSearch,
213
+ onClick: () => d.onChange(""),
214
+ children: /* @__PURE__ */ _(n, {})
208
215
  }),
209
- l.onSubmit && /* @__PURE__ */ m("button", {
216
+ d.onSubmit && /* @__PURE__ */ _("button", {
210
217
  type: "button",
211
218
  className: "select-filterbar__query-submit",
212
- onClick: l.onSubmit,
213
- disabled: d,
214
- children: l.submitLabel ?? b.common.search
219
+ onClick: d.onSubmit,
220
+ disabled: p,
221
+ children: d.submitLabel ?? C.common.search
215
222
  })
216
223
  ]
217
224
  }),
218
- k.map((e) => /* @__PURE__ */ m(y, {
225
+ N.map((e) => /* @__PURE__ */ _(S, {
219
226
  filter: e,
220
227
  value: t[e.key] ?? "",
221
228
  onChange: (t) => o(e.key, t),
222
- open: C === e.key,
223
- onToggle: () => w((t) => t === e.key ? null : e.key),
224
- onClose: () => w((t) => t === e.key ? null : t),
225
- disabled: d
229
+ open: E === e.key,
230
+ onToggle: () => D((t) => t === e.key ? null : e.key),
231
+ onClose: () => D((t) => t === e.key ? null : t),
232
+ disabled: p
226
233
  }, e.key)),
227
- A.length > 0 && /* @__PURE__ */ m(s, {
228
- active: T,
229
- onClose: () => E(!1),
234
+ P.length > 0 && /* @__PURE__ */ _(s, {
235
+ active: O,
236
+ onClose: () => k(!1),
230
237
  placement: "bottom-start",
231
- activator: /* @__PURE__ */ h("button", {
238
+ activator: /* @__PURE__ */ v("button", {
232
239
  type: "button",
233
240
  className: "select-facet select-facet--more",
234
- onClick: () => E((e) => !e),
235
- disabled: d,
236
- "aria-expanded": T,
237
- children: [/* @__PURE__ */ m("span", {
241
+ onClick: () => k((e) => !e),
242
+ disabled: p,
243
+ "aria-expanded": O,
244
+ children: [/* @__PURE__ */ _("span", {
238
245
  className: "select-facet__addicon",
239
246
  "aria-hidden": "true",
240
- children: /* @__PURE__ */ m(r, {})
241
- }), b.filterBar.moreFilters]
247
+ children: /* @__PURE__ */ _(r, {})
248
+ }), C.filterBar.moreFilters]
242
249
  }),
243
- children: /* @__PURE__ */ m("div", {
250
+ children: /* @__PURE__ */ _("div", {
244
251
  className: "select-facet__options",
245
252
  role: "menu",
246
- children: A.map((e) => /* @__PURE__ */ m("button", {
253
+ ref: A,
254
+ onKeyDown: l,
255
+ children: P.map((e) => /* @__PURE__ */ _("button", {
247
256
  type: "button",
248
257
  role: "menuitem",
249
258
  className: "select-facet__opt",
250
- onClick: () => N(e.key),
251
- children: /* @__PURE__ */ m("span", { children: e.label })
259
+ onClick: () => L(e.key),
260
+ children: /* @__PURE__ */ _("span", { children: e.label })
252
261
  }, e.key))
253
262
  })
254
263
  })
255
264
  ]
256
265
  }),
257
- l != null && l.error ? /* @__PURE__ */ m("p", {
266
+ d != null && d.error ? /* @__PURE__ */ _("p", {
258
267
  className: "select-filterbar__query-error",
259
268
  role: "alert",
260
- children: l.error
269
+ children: d.error
261
270
  }) : null,
262
- j.length > 0 && /* @__PURE__ */ h("div", {
271
+ F.length > 0 && /* @__PURE__ */ v("div", {
263
272
  className: "select-filterbar__applied",
264
- children: [j.map((e) => /* @__PURE__ */ h("span", {
273
+ children: [F.map((e) => /* @__PURE__ */ v("span", {
265
274
  className: `select-filterbar__tag${e.error ? " is-error" : ""}`,
266
275
  title: e.error || void 0,
267
276
  children: [
268
277
  e.label,
269
278
  ": ",
270
- v(e, t[e.key] ?? ""),
271
- /* @__PURE__ */ m("button", {
279
+ x(e, t[e.key] ?? ""),
280
+ /* @__PURE__ */ _("button", {
272
281
  type: "button",
273
282
  className: "select-filterbar__tagx",
274
- "aria-label": b.filterBar.removeFilter(e.label),
283
+ "aria-label": C.filterBar.removeFilter(e.label),
275
284
  onClick: () => o(e.key, ""),
276
- children: /* @__PURE__ */ m(n, {})
285
+ children: /* @__PURE__ */ _(n, {})
277
286
  })
278
287
  ]
279
- }, e.key)), /* @__PURE__ */ m("button", {
288
+ }, e.key)), /* @__PURE__ */ _("button", {
280
289
  type: "button",
281
290
  className: "select-filterbar__clear",
282
- onClick: M,
283
- children: b.filterBar.clearAll
291
+ onClick: I,
292
+ children: C.filterBar.clearAll
284
293
  })]
285
294
  })
286
295
  ]
287
296
  });
288
297
  });
289
298
  //#endregion
290
- export { b as SelectFilterBar, _ as joinFilterValues, g as splitFilterValues };
299
+ export { C as SelectFilterBar, b as joinFilterValues, y as splitFilterValues };
291
300
 
292
301
  //# sourceMappingURL=SelectFilterBar.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;
package/dist/internal/optionList.js ADDED
@@ -0,0 +1,29 @@
1
+ import { useEffect as e } from "react";
2
+ //#region src/internal/optionList.ts
3
+ var t = "[role=\"option\"]:not(:disabled), [role=\"menuitem\"]:not(:disabled)";
4
+ function n(n, r) {
5
+ e(() => {
6
+ if (!n) return;
7
+ let e = r.current;
8
+ if (!e) return;
9
+ let i = e.querySelector("input:not(:disabled)") ?? e.querySelector("[aria-selected=\"true\"]:not(:disabled)") ?? e.querySelector(t);
10
+ i == null || i.focus({ preventScroll: !0 });
11
+ }, [n, r]);
12
+ }
13
+ function r(e) {
14
+ if (![
15
+ "ArrowDown",
16
+ "ArrowUp",
17
+ "Home",
18
+ "End"
19
+ ].includes(e.key) || (e.key === "Home" || e.key === "End") && e.target instanceof HTMLInputElement) return;
20
+ let n = [...e.currentTarget.querySelectorAll(t)];
21
+ if (!n.length) return;
22
+ e.preventDefault();
23
+ let r = n.indexOf(document.activeElement);
24
+ n[e.key === "Home" ? 0 : e.key === "End" ? n.length - 1 : e.key === "ArrowDown" ? (r + 1) % n.length : r <= 0 ? n.length - 1 : r - 1].focus();
25
+ }
26
+ //#endregion
27
+ export { r as moveInOptions, n as useOptionListFocus };
28
+
29
+ //# sourceMappingURL=optionList.js.map
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@selectwin/kit",
3
- "version": "0.1.213",
3
+ "version": "0.1.214",
4
4
  "description": "Selectwin design-system kit — primitivos React, charts SVG e tokens (theme-aware, sem dependência de biblioteca de chart).",
5
5
  "type": "module",
6
6
  "repository": {