@selectwin/kit 0.1.213 → 0.1.215

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 (8) hide show
  1. package/dist/SelectFilterBar.js +141 -132
  2. package/dist/SelectTooltip.d.ts +3 -1
  3. package/dist/SelectTooltip.js +38 -37
  4. package/dist/internal/listChrome.js +54 -49
  5. package/dist/internal/optionList.d.ts +3 -0
  6. package/dist/internal/optionList.js +29 -0
  7. package/dist/style.css +1 -1
  8. package/package.json +1 -1
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