@geckou/ui-react 0.8.0 → 0.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/README.md +7 -0
  2. package/dist/components/DropdownUi.js +90 -73
  3. package/dist/components/SlideDownUi.js +22 -20
  4. package/package.json +1 -1
package/README.md CHANGED
@@ -108,6 +108,13 @@ props は Vue 版（`@geckou/ui-vue`）と揃えている。`v-model` にあた
108
108
  yarn workspace @geckou/ui-react test
109
109
  ```
110
110
 
111
+ ## 0.9.0 の変更
112
+
113
+ - `DropdownUi` が Escape で閉じ、トリガーへフォーカスを戻す。処理したときは
114
+ `preventDefault()` するので、`ModalBox` の中に置いてもダイアログまで閉じない
115
+ - `DropdownUi` / `SlideDownUi` のトリガーに `aria-controls` が付き、
116
+ `DropdownUi` には `aria-haspopup="true"` も付く
117
+
111
118
  ## 0.8.0 の変更
112
119
 
113
120
  - `BasicButton` はローディング中に `disabled` にしない（押した瞬間にフォーカスが
package/dist/components/DropdownUi.js CHANGED
@@ -1,88 +1,105 @@
1
1
  "use client";
2
- import { jsxs as f, jsx as a } from "react/jsx-runtime";
3
- import { useState as v, useRef as p, useImperativeHandle as I, useEffect as b } from "react";
4
- import { KeyboardArrowDownIcon as N } from "./icons/KeyboardArrowDownIcon.js";
5
- import { COLOR as h } from "@geckou/ui-core";
6
- function L({
7
- isHiddenArrow: g = !1,
8
- contentAlignment: i = "left",
9
- isDisabled: s = !1,
10
- contentsWidth: x = "auto",
11
- trigger: w,
12
- contents: o,
13
- ref: C
2
+ import { jsxs as b, jsx as l } from "react/jsx-runtime";
3
+ import { useState as g, useRef as i, useId as H, useImperativeHandle as N, useEffect as h } from "react";
4
+ import { KeyboardArrowDownIcon as S } from "./icons/KeyboardArrowDownIcon.js";
5
+ import { COLOR as w } from "@geckou/ui-core";
6
+ function K({
7
+ isHiddenArrow: x = !1,
8
+ contentAlignment: c = "left",
9
+ isDisabled: a = !1,
10
+ contentsWidth: C = "auto",
11
+ trigger: y,
12
+ contents: t,
13
+ ref: k
14
14
  }) {
15
- const [t, c] = v(!1), [z, O] = v(0), u = p(null), d = p(null), k = () => c((e) => !e), l = () => c(!1);
16
- I(C, () => ({
17
- isContentsOpened: () => t,
18
- close: l
19
- })), b(() => {
20
- const e = (r) => {
21
- const n = u.current;
22
- n && !n.contains(r.target) && l();
15
+ const [n, u] = g(!1), [z, I] = g(0), d = i(null), f = i(null), m = i(null), p = `${H()}-panel`, O = () => u((e) => !e), r = () => u(!1), R = () => {
16
+ var e;
17
+ r(), (e = m.current) == null || e.focus();
18
+ };
19
+ N(k, () => ({
20
+ isContentsOpened: () => n,
21
+ close: r
22
+ })), h(() => {
23
+ const e = (s) => {
24
+ const o = d.current;
25
+ o && !o.contains(s.target) && r();
23
26
  };
24
27
  return document.addEventListener("pointerdown", e), () => document.removeEventListener("pointerdown", e);
25
- }, []), b(() => {
26
- const e = d.current;
28
+ }, []), h(() => {
29
+ const e = f.current;
27
30
  if (!e)
28
31
  return;
29
- const r = () => O(e.clientHeight);
30
- r();
31
- const n = new ResizeObserver(r);
32
- return n.observe(e), () => n.disconnect();
33
- }, [!!o]);
34
- const m = s || !o, y = {
35
- "--trigger-color": m ? h.black : h.blue
36
- }, H = {
37
- boxShadow: t ? "0 0 6px #33333333" : "none",
38
- blockSize: t ? `${z}px` : 0,
39
- inlineSize: x,
40
- right: i === "right" ? "calc(var(--bv, 0.375rem) * -0.5)" : "auto",
41
- left: i === "left" ? "calc(var(--bv, 0.375rem) * -0.5)" : "auto",
32
+ const s = () => I(e.clientHeight);
33
+ s();
34
+ const o = new ResizeObserver(s);
35
+ return o.observe(e), () => o.disconnect();
36
+ }, [!!t]);
37
+ const v = a || !t, D = {
38
+ "--trigger-color": v ? w.black : w.blue
39
+ }, E = {
40
+ boxShadow: n ? "0 0 6px #33333333" : "none",
41
+ blockSize: n ? `${z}px` : 0,
42
+ inlineSize: C,
43
+ right: c === "right" ? "calc(var(--bv, 0.375rem) * -0.5)" : "auto",
44
+ left: c === "left" ? "calc(var(--bv, 0.375rem) * -0.5)" : "auto",
42
45
  zIndex: 2
43
46
  };
44
- return /* @__PURE__ */ f("div", { ref: u, className: "relative", children: [
45
- /* @__PURE__ */ f(
46
- "button",
47
- {
48
- type: "button",
49
- disabled: s,
50
- "aria-expanded": t,
51
- style: { ...y, cursor: m ? "auto" : "pointer" },
52
- className: "flex size-full items-center gap-[var(--sp-small,0.375rem)] text-(--trigger-color)",
53
- onClick: (e) => {
54
- e.preventDefault(), k();
55
- },
56
- children: [
57
- w,
58
- !(g || !o || s) && /* @__PURE__ */ a(
59
- N,
60
- {
61
- className: `size-[var(--icon-small,0.9375rem)] flex-none transition-all duration-100 ${t ? "rotate-180" : ""}`
62
- }
63
- )
64
- ]
65
- }
66
- ),
67
- o && /* @__PURE__ */ a(
68
- "div",
69
- {
70
- style: H,
71
- inert: !t,
72
- className: "absolute top-[calc(100%-var(--sp-min,0.1875rem))] cursor-pointer overflow-hidden rounded-[var(--radius-small,0.1875rem)] transition-[block-size] duration-100",
73
- children: /* @__PURE__ */ a(
47
+ return /* @__PURE__ */ b(
48
+ "div",
49
+ {
50
+ ref: d,
51
+ className: "relative",
52
+ onKeyDown: (e) => {
53
+ e.key !== "Escape" || !n || (e.preventDefault(), R());
54
+ },
55
+ children: [
56
+ /* @__PURE__ */ b(
57
+ "button",
58
+ {
59
+ ref: m,
60
+ type: "button",
61
+ disabled: a,
62
+ "aria-expanded": n,
63
+ "aria-haspopup": t ? !0 : void 0,
64
+ "aria-controls": t ? p : void 0,
65
+ style: { ...D, cursor: v ? "auto" : "pointer" },
66
+ className: "flex size-full items-center gap-[var(--sp-small,0.375rem)] text-(--trigger-color)",
67
+ onClick: (e) => {
68
+ e.preventDefault(), O();
69
+ },
70
+ children: [
71
+ y,
72
+ !(x || !t || a) && /* @__PURE__ */ l(
73
+ S,
74
+ {
75
+ className: `size-[var(--icon-small,0.9375rem)] flex-none transition-all duration-100 ${n ? "rotate-180" : ""}`
76
+ }
77
+ )
78
+ ]
79
+ }
80
+ ),
81
+ t && /* @__PURE__ */ l(
74
82
  "div",
75
83
  {
76
- ref: d,
77
- className: "max-h-[calc(var(--bv,0.375rem)*56)] min-w-[calc(var(--bv,0.375rem)*20)] overflow-auto bg-white",
78
- onClick: l,
79
- children: o
84
+ id: p,
85
+ style: E,
86
+ inert: !n,
87
+ className: "absolute top-[calc(100%-var(--sp-min,0.1875rem))] cursor-pointer overflow-hidden rounded-[var(--radius-small,0.1875rem)] transition-[block-size] duration-100",
88
+ children: /* @__PURE__ */ l(
89
+ "div",
90
+ {
91
+ ref: f,
92
+ className: "max-h-[calc(var(--bv,0.375rem)*56)] min-w-[calc(var(--bv,0.375rem)*20)] overflow-auto bg-white",
93
+ onClick: r,
94
+ children: t
95
+ }
96
+ )
80
97
  }
81
98
  )
82
- }
83
- )
84
- ] });
99
+ ]
100
+ }
101
+ );
85
102
  }
86
103
  export {
87
- L as DropdownUi
104
+ K as DropdownUi
88
105
  };
package/dist/components/SlideDownUi.js CHANGED
@@ -1,20 +1,20 @@
1
1
  "use client";
2
2
  import { jsxs as v, jsx as i } from "react/jsx-runtime";
3
- import { useState as a, useRef as p, useImperativeHandle as E, useEffect as l } from "react";
4
- import { KeyboardArrowDownIcon as I } from "./icons/KeyboardArrowDownIcon.js";
5
- import { COLOR as N } from "@geckou/ui-core";
6
- function $({
3
+ import { useState as a, useRef as h, useId as E, useImperativeHandle as N, useEffect as l } from "react";
4
+ import { KeyboardArrowDownIcon as O } from "./icons/KeyboardArrowDownIcon.js";
5
+ import { COLOR as $ } from "@geckou/ui-core";
6
+ function S({
7
7
  isOpened: n = null,
8
- isHiddenArrow: h = !1,
9
- isDisabled: b = !1,
8
+ isHiddenArrow: b = !1,
9
+ isDisabled: g = !1,
10
10
  isDisableClickOutside: f = !1,
11
11
  duration: c = 0.3,
12
- trigger: g,
13
- children: w,
14
- ref: x
12
+ trigger: w,
13
+ children: x,
14
+ ref: C
15
15
  }) {
16
- const [t, r] = a(n || !1), [C, u] = a(n || !1), [y, k] = a(0), d = p(null), m = p(null), H = () => r((e) => !e);
17
- E(x, () => ({
16
+ const [t, r] = a(n || !1), [y, u] = a(n || !1), [I, k] = a(0), d = h(null), m = h(null), p = `${E()}-panel`, H = () => r((e) => !e);
17
+ N(C, () => ({
18
18
  isOpenedContents: () => t,
19
19
  close: () => r(!1)
20
20
  })), l(() => {
@@ -43,22 +43,23 @@ function $({
43
43
  const e = setTimeout(() => u(!0), c * 1e3);
44
44
  return () => clearTimeout(e);
45
45
  }, [t, c]);
46
- const R = { "--link-color": N.blue };
46
+ const R = { "--link-color": $.blue };
47
47
  return /* @__PURE__ */ v("div", { ref: d, style: R, children: [
48
48
  /* @__PURE__ */ v(
49
49
  "button",
50
50
  {
51
51
  type: "button",
52
- disabled: b,
52
+ disabled: g,
53
53
  "aria-expanded": t,
54
+ "aria-controls": p,
54
55
  className: "relative grid w-full cursor-pointer grid-cols-[1fr_auto] items-center justify-items-start text-(--link-color)",
55
56
  onClick: (e) => {
56
57
  e.preventDefault(), H();
57
58
  },
58
59
  children: [
59
- /* @__PURE__ */ i("span", { className: "block w-full text-left", children: g }),
60
- !h && /* @__PURE__ */ i(
61
- I,
60
+ /* @__PURE__ */ i("span", { className: "block w-full text-left", children: w }),
61
+ !b && /* @__PURE__ */ i(
62
+ O,
62
63
  {
63
64
  className: `size-[var(--icon-medium,1.125rem)] flex-none text-(--link-color) transition-all duration-100 ${t ? "rotate-180" : ""}`
64
65
  }
@@ -69,18 +70,19 @@ function $({
69
70
  /* @__PURE__ */ i(
70
71
  "div",
71
72
  {
73
+ id: p,
72
74
  style: {
73
- height: t ? `${y}px` : 0,
75
+ height: t ? `${I}px` : 0,
74
76
  transitionDuration: `${c}s`,
75
- overflow: C ? "visible" : "hidden"
77
+ overflow: y ? "visible" : "hidden"
76
78
  },
77
79
  inert: !t,
78
80
  className: "transition-[height]",
79
- children: /* @__PURE__ */ i("div", { ref: m, children: w })
81
+ children: /* @__PURE__ */ i("div", { ref: m, children: x })
80
82
  }
81
83
  )
82
84
  ] });
83
85
  }
84
86
  export {
85
- $ as SlideDownUi
87
+ S as SlideDownUi
86
88
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@geckou/ui-react",
3
- "version": "0.8.0",
3
+ "version": "0.9.0",
4
4
  "description": "A set of reusable React UI components (forms) by Geckou",
5
5
  "type": "module",
6
6
  "sideEffects": [