@ryuzaki13/react-foundation-ui 3.4.3 → 3.5.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.
- package/dist/badge/index.js +65 -2
- package/dist/badge/index.js.map +1 -0
- package/dist/barcode-scanner/index.js +18 -18
- package/dist/base-table/index.js +2 -2
- package/dist/button/index.js +1 -1
- package/dist/check-box/index.js +1 -1
- package/dist/chunks/{CalendarView-Dm55k0bN.js → CalendarView-CwbPJG2Y.js} +86 -86
- package/dist/chunks/{CalendarView-Dm55k0bN.js.map → CalendarView-CwbPJG2Y.js.map} +1 -1
- package/dist/chunks/{ImageViewerRuntime-HGBWp9NM.js → ImageViewerRuntime-DZpgxzF1.js} +25 -25
- package/dist/chunks/{ImageViewerRuntime-HGBWp9NM.js.map → ImageViewerRuntime-DZpgxzF1.js.map} +1 -1
- package/dist/chunks/{TextEditorLexicalClient-C8nSoz85.js → TextEditorLexicalClient-BRp8jHId.js} +354 -354
- package/dist/chunks/{TextEditorLexicalClient-C8nSoz85.js.map → TextEditorLexicalClient-BRp8jHId.js.map} +1 -1
- package/dist/chunks/{base-table-BWvKfI2W.js → base-table-BHmboNzl.js} +138 -138
- package/dist/chunks/{base-table-BWvKfI2W.js.map → base-table-BHmboNzl.js.map} +1 -1
- package/dist/chunks/{button-DF21yxVp.js → button-D7GAU2Wa.js} +20 -20
- package/dist/chunks/{button-DF21yxVp.js.map → button-D7GAU2Wa.js.map} +1 -1
- package/dist/chunks/{check-box-CZyhzmR0.js → check-box-D_Y6iIWv.js} +19 -19
- package/dist/chunks/{check-box-CZyhzmR0.js.map → check-box-D_Y6iIWv.js.map} +1 -1
- package/dist/chunks/{context-menu-DgvXGCuI.js → context-menu-BQePxRpu.js} +159 -159
- package/dist/chunks/{context-menu-DgvXGCuI.js.map → context-menu-BQePxRpu.js.map} +1 -1
- package/dist/chunks/{date-input-D7aBsPJc.js → date-input-Crijdmmq.js} +67 -67
- package/dist/chunks/{date-input-D7aBsPJc.js.map → date-input-Crijdmmq.js.map} +1 -1
- package/dist/chunks/{date-range-preset-select-BLnY47cv.js → date-range-preset-select-CyzGMvVp.js} +6 -6
- package/dist/chunks/{date-range-preset-select-BLnY47cv.js.map → date-range-preset-select-CyzGMvVp.js.map} +1 -1
- package/dist/chunks/{dialog-1Z1zCNCe.js → dialog-BcQGVNbu.js} +13 -13
- package/dist/chunks/{dialog-1Z1zCNCe.js.map → dialog-BcQGVNbu.js.map} +1 -1
- package/dist/chunks/{flex-C7njxZ74.js → flex-DtXK7OM4.js} +29 -29
- package/dist/chunks/{flex-C7njxZ74.js.map → flex-DtXK7OM4.js.map} +1 -1
- package/dist/chunks/{floating-arrow-DPKwJfww.js → floating-arrow-DKUKx2ZQ.js} +7 -7
- package/dist/chunks/{floating-arrow-DPKwJfww.js.map → floating-arrow-DKUKx2ZQ.js.map} +1 -1
- package/dist/chunks/{input-DSPKgiCK.js → input-CuRK9Vbz.js} +78 -78
- package/dist/chunks/{input-DSPKgiCK.js.map → input-CuRK9Vbz.js.map} +1 -1
- package/dist/chunks/{input-files-tIS17-zX.js → input-files-B8j6Pb_M.js} +31 -31
- package/dist/chunks/{input-files-tIS17-zX.js.map → input-files-B8j6Pb_M.js.map} +1 -1
- package/dist/chunks/{misc-DeGboAt-.js → misc-CGQOXXCy.js} +110 -110
- package/dist/chunks/{misc-DeGboAt-.js.map → misc-CGQOXXCy.js.map} +1 -1
- package/dist/chunks/{modal-dplfAaER.js → modal-febBsMyR.js} +58 -58
- package/dist/chunks/{modal-dplfAaER.js.map → modal-febBsMyR.js.map} +1 -1
- package/dist/chunks/{picker-lvm82d0A.js → picker-BA6okKnz.js} +91 -91
- package/dist/chunks/{picker-lvm82d0A.js.map → picker-BA6okKnz.js.map} +1 -1
- package/dist/chunks/popover-yl5DVe06.js +245 -0
- package/dist/chunks/{popover-Bne-Ljbs.js.map → popover-yl5DVe06.js.map} +1 -1
- package/dist/chunks/radio-group-CW-K1n9c.js +125 -0
- package/dist/chunks/{radio-group-sSnlYjAX.js.map → radio-group-CW-K1n9c.js.map} +1 -1
- package/dist/chunks/select-DblNSc5H.js +363 -0
- package/dist/chunks/{select-aTGupQan.js.map → select-DblNSc5H.js.map} +1 -1
- package/dist/chunks/{separator-B72Aq-6a.js → separator-CIqnk2z9.js} +2 -2
- package/dist/chunks/{separator-B72Aq-6a.js.map → separator-CIqnk2z9.js.map} +1 -1
- package/dist/chunks/{sortable-BKIwlqhI.js → sortable-CQmMHAF8.js} +38 -38
- package/dist/chunks/{sortable-BKIwlqhI.js.map → sortable-CQmMHAF8.js.map} +1 -1
- package/dist/chunks/{table-DxoSOvQK.js → table-BnvjPaE1.js} +18 -18
- package/dist/chunks/{table-DxoSOvQK.js.map → table-BnvjPaE1.js.map} +1 -1
- package/dist/chunks/{table-column-interactions-DzEvVuXe.js → table-column-interactions-Do8LFtiv.js} +20 -20
- package/dist/chunks/{table-column-interactions-DzEvVuXe.js.map → table-column-interactions-Do8LFtiv.js.map} +1 -1
- package/dist/chunks/{types-D9Wj9wrg.js → types-CxXyru6U.js} +21 -21
- package/dist/chunks/{types-D9Wj9wrg.js.map → types-CxXyru6U.js.map} +1 -1
- package/dist/chunks/{useODataSelectBase-DR4PrY1j.js → useODataSelectBase-DwR4Lfv-.js} +5 -5
- package/dist/chunks/{useODataSelectBase-DR4PrY1j.js.map → useODataSelectBase-DwR4Lfv-.js.map} +1 -1
- package/dist/chunks/{wheel-picker-FS58cRsQ.js → wheel-picker-DUHGy7wE.js} +23 -23
- package/dist/chunks/{wheel-picker-FS58cRsQ.js.map → wheel-picker-DUHGy7wE.js.map} +1 -1
- package/dist/context-menu/index.js +1 -1
- package/dist/date-input/index.js +2 -2
- package/dist/date-range-preset-select/index.js +1 -1
- package/dist/date-time-input/index.js +122 -122
- package/dist/date-time-input/index.js.map +1 -1
- package/dist/detail/index.js +22 -22
- package/dist/dialog/index.js +1 -1
- package/dist/disclosure/index.js +9 -9
- package/dist/drop-zone/index.js +21 -21
- package/dist/errors/index.js +50 -50
- package/dist/expandable-action-panel/index.js +24 -24
- package/dist/flex/index.js +1 -1
- package/dist/flex/useFlexClasses.d.ts +1 -1
- package/dist/floating-arrow/index.js +1 -1
- package/dist/fullscreen-portal/index.js +8 -8
- package/dist/image/index.js +119 -119
- package/dist/input/index.js +1 -1
- package/dist/input-date-time/index.js +55 -55
- package/dist/input-file/index.js +16 -16
- package/dist/input-files/index.js +1 -1
- package/dist/input-image/index.js +17 -17
- package/dist/input-search/index.js +30 -2
- package/dist/input-search/index.js.map +1 -0
- package/dist/layout-picker/index.js +93 -93
- package/dist/layout-picker/index.js.map +1 -1
- package/dist/list/index.js +39 -39
- package/dist/listbox/index.js +33 -33
- package/dist/misc/index.js +1 -1
- package/dist/modal/index.js +1 -1
- package/dist/multi-select/index.js +466 -2
- package/dist/multi-select/index.js.map +1 -0
- package/dist/notifications/index.js +45 -45
- package/dist/option/index.js +30 -30
- package/dist/period-select/index.js +7 -7
- package/dist/picker/index.js +1 -1
- package/dist/popover/index.js +1 -1
- package/dist/preset-range-date-input/index.js +10 -10
- package/dist/preset-select/index.js +1 -1
- package/dist/radio-button/index.js +9 -9
- package/dist/radio-group/index.js +1 -1
- package/dist/select/index.js +1 -1
- package/dist/separator/index.js +1 -1
- package/dist/simple-table/index.js +5 -5
- package/dist/slider/index.js +82 -82
- package/dist/slider/index.js.map +1 -1
- package/dist/sortable/index.js +1 -1
- package/dist/splitter/index.js +55 -55
- package/dist/state-select/index.js +17 -17
- package/dist/styles.css +1 -1
- package/dist/switch/index.js +18 -18
- package/dist/table/index.js +1 -1
- package/dist/table-column-interactions/index.js +1 -1
- package/dist/table-editor/index.js +99 -99
- package/dist/table-sorting/index.js +13 -13
- package/dist/tabs/index.js +83 -83
- package/dist/tag-input/index.js +58 -58
- package/dist/tag-input/index.js.map +1 -1
- package/dist/text/index.js +18 -18
- package/dist/text-editor/index.js +3 -3
- package/dist/textarea/index.js +1 -1
- package/dist/three-scene/index.js +7 -7
- package/dist/toggle/index.js +20 -20
- package/dist/toolbar/index.js +16 -16
- package/dist/tree/index.js +24 -24
- package/dist/tree-select/index.js +189 -189
- package/dist/tree-select/index.js.map +1 -1
- package/dist/tree-table/index.js +33 -33
- package/dist/tree-table/index.js.map +1 -1
- package/dist/wheel-picker/index.js +1 -1
- package/package.json +1 -5
- package/storybook-static/project.json +1 -1
- package/dist/advanced-search/index.d.ts +0 -3
- package/dist/advanced-search/index.d.ts.map +0 -1
- package/dist/advanced-search/index.js +0 -399
- package/dist/advanced-search/index.js.map +0 -1
- package/dist/advanced-search/lib/index.d.ts +0 -2
- package/dist/advanced-search/lib/index.d.ts.map +0 -1
- package/dist/advanced-search/lib/searchParts.d.ts +0 -3
- package/dist/advanced-search/lib/searchParts.d.ts.map +0 -1
- package/dist/advanced-search/model/index.d.ts +0 -5
- package/dist/advanced-search/model/index.d.ts.map +0 -1
- package/dist/advanced-search/model/types.d.ts +0 -55
- package/dist/advanced-search/model/types.d.ts.map +0 -1
- package/dist/advanced-search/model/useAdvancedSearch.d.ts +0 -11
- package/dist/advanced-search/model/useAdvancedSearch.d.ts.map +0 -1
- package/dist/advanced-search/model/useAdvancedSearchInitialSelected.d.ts +0 -6
- package/dist/advanced-search/model/useAdvancedSearchInitialSelected.d.ts.map +0 -1
- package/dist/advanced-search/model/useAdvancedSearchSelection.d.ts +0 -13
- package/dist/advanced-search/model/useAdvancedSearchSelection.d.ts.map +0 -1
- package/dist/advanced-search/ui/AdvancedSearchModal.d.ts +0 -23
- package/dist/advanced-search/ui/AdvancedSearchModal.d.ts.map +0 -1
- package/dist/advanced-search/ui/AdvancedSearchModalSession.d.ts +0 -16
- package/dist/advanced-search/ui/AdvancedSearchModalSession.d.ts.map +0 -1
- package/dist/advanced-search/ui/AdvancedSearchSelect.d.ts +0 -9
- package/dist/advanced-search/ui/AdvancedSearchSelect.d.ts.map +0 -1
- package/dist/advanced-search/ui/AdvancedSearchSelectUI.d.ts +0 -9
- package/dist/advanced-search/ui/AdvancedSearchSelectUI.d.ts.map +0 -1
- package/dist/advanced-search/ui/index.d.ts +0 -2
- package/dist/advanced-search/ui/index.d.ts.map +0 -1
- package/dist/chunks/badge-6mXO9BWP.js +0 -65
- package/dist/chunks/badge-6mXO9BWP.js.map +0 -1
- package/dist/chunks/input-search-Cat4c7SM.js +0 -30
- package/dist/chunks/input-search-Cat4c7SM.js.map +0 -1
- package/dist/chunks/multi-select-BZ9N6Dal.js +0 -466
- package/dist/chunks/multi-select-BZ9N6Dal.js.map +0 -1
- package/dist/chunks/popover-Bne-Ljbs.js +0 -245
- package/dist/chunks/radio-group-sSnlYjAX.js +0 -125
- package/dist/chunks/select-aTGupQan.js +0 -363
|
@@ -0,0 +1,245 @@
|
|
|
1
|
+
import { t as e } from "./floating-arrow-DKUKx2ZQ.js";
|
|
2
|
+
import { cn as t } from "@ryuzaki13/react-foundation-lib/utils";
|
|
3
|
+
import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
|
|
4
|
+
import { cloneElement as a, createContext as o, useCallback as s, useContext as c, useEffect as l, useLayoutEffect as u, useRef as d, useState as f } from "react";
|
|
5
|
+
import { FloatingPortal as p, arrow as m, autoUpdate as h, flip as g, offset as _, shift as v, size as y, useDismiss as b, useFloating as x, useFocus as S, useHover as C, useInteractions as w, useRole as T } from "@floating-ui/react";
|
|
6
|
+
import { useClickOutside as E, useEscapeDismiss as D, useOverlayFocus as O } from "@ryuzaki13/react-foundation-lib/dom";
|
|
7
|
+
import { createMissingContextError as k } from "@ryuzaki13/react-foundation-lib/error";
|
|
8
|
+
import { createPortal as A } from "react-dom";
|
|
9
|
+
//#region src/popover/lib/applyPopoverAvailableSize.ts
|
|
10
|
+
function j({ availableWidth: e, availableHeight: t, floating: n }) {
|
|
11
|
+
n.style.setProperty("--popover-available-width", `${Math.max(0, e)}px`), n.style.setProperty("--popover-available-height", `${Math.max(0, t)}px`);
|
|
12
|
+
}
|
|
13
|
+
var M = {
|
|
14
|
+
popover: "JK2Y7t",
|
|
15
|
+
primary: "_5QtpCJ",
|
|
16
|
+
secondary: "hZuysP"
|
|
17
|
+
}, N = o(null);
|
|
18
|
+
function P() {
|
|
19
|
+
let e = c(N);
|
|
20
|
+
if (!e) throw k({
|
|
21
|
+
hookName: "usePopoverContext",
|
|
22
|
+
providerName: "Popover"
|
|
23
|
+
});
|
|
24
|
+
return e;
|
|
25
|
+
}
|
|
26
|
+
//#endregion
|
|
27
|
+
//#region src/popover/components/PopoverContent.tsx
|
|
28
|
+
var F = ({ children: n, onClose: a, closeOnOutside: o = !0, closeOnEscape: c = !0, disableOutsideClick: l = !1, background: u = "secondary" }) => {
|
|
29
|
+
let { open: f, setOpen: m, refs: h, floatingStyles: g, middlewareData: _, placement: v, arrowRef: y } = P(), b = d(null), x = s((e) => {
|
|
30
|
+
b.current = e, h.setFloating(e);
|
|
31
|
+
}, [h]), S = O({
|
|
32
|
+
active: f,
|
|
33
|
+
initialFocus: "container",
|
|
34
|
+
restoreFocus: !0,
|
|
35
|
+
containerRef: b
|
|
36
|
+
}), C = s(() => {
|
|
37
|
+
f && (m(!1), a?.());
|
|
38
|
+
}, [
|
|
39
|
+
m,
|
|
40
|
+
a,
|
|
41
|
+
f
|
|
42
|
+
]);
|
|
43
|
+
D({
|
|
44
|
+
active: f,
|
|
45
|
+
enabled: c,
|
|
46
|
+
onDismiss: C,
|
|
47
|
+
containerRef: S
|
|
48
|
+
});
|
|
49
|
+
let w = s(() => {
|
|
50
|
+
!f || l || o && C();
|
|
51
|
+
}, [
|
|
52
|
+
f,
|
|
53
|
+
l,
|
|
54
|
+
o,
|
|
55
|
+
C
|
|
56
|
+
]);
|
|
57
|
+
return E([h.floating, h.reference], w), f ? /* @__PURE__ */ r(p, { children: /* @__PURE__ */ i("div", {
|
|
58
|
+
ref: x,
|
|
59
|
+
style: g,
|
|
60
|
+
className: t(M.popover, M[u]),
|
|
61
|
+
role: "dialog",
|
|
62
|
+
"aria-modal": "true",
|
|
63
|
+
tabIndex: -1,
|
|
64
|
+
children: [typeof n == "function" ? n({ setClose: C }) : n, /* @__PURE__ */ r(e, {
|
|
65
|
+
ref: y,
|
|
66
|
+
placement: v,
|
|
67
|
+
middlewareData: _
|
|
68
|
+
})]
|
|
69
|
+
}) }) : null;
|
|
70
|
+
}, I = ({ passive: e, children: t }) => {
|
|
71
|
+
let { open: n, setOpen: r, refs: i } = P(), o = s((n) => {
|
|
72
|
+
t.props.onClick && t.props.onClick(n), !n.defaultPrevented && (n.preventDefault(), n.stopPropagation(), !e && r((e) => !e));
|
|
73
|
+
}, [
|
|
74
|
+
t,
|
|
75
|
+
r,
|
|
76
|
+
e
|
|
77
|
+
]);
|
|
78
|
+
return a(t, {
|
|
79
|
+
ref: i.setReference,
|
|
80
|
+
"aria-expanded": n,
|
|
81
|
+
onClick: o
|
|
82
|
+
});
|
|
83
|
+
}, L = 16, R = Object.assign(({ children: e, open: t, defaultOpen: n, onOpenChange: i, placement: a = "bottom" }) => {
|
|
84
|
+
let [o, c] = f(n ?? !1), l = t !== void 0, u = l ? t : o, p = s((e) => {
|
|
85
|
+
let t = typeof e == "function" ? e(u) : e;
|
|
86
|
+
l || c(t), i?.(t);
|
|
87
|
+
}, [
|
|
88
|
+
l,
|
|
89
|
+
i,
|
|
90
|
+
u
|
|
91
|
+
]), b = d(null), { refs: S, floatingStyles: C, middlewareData: w, placement: T } = x({
|
|
92
|
+
open: u,
|
|
93
|
+
onOpenChange: p,
|
|
94
|
+
placement: a,
|
|
95
|
+
middleware: [
|
|
96
|
+
_(8),
|
|
97
|
+
g({ padding: L }),
|
|
98
|
+
v({ padding: L }),
|
|
99
|
+
y({
|
|
100
|
+
padding: L,
|
|
101
|
+
apply({ availableWidth: e, availableHeight: t, elements: n }) {
|
|
102
|
+
j({
|
|
103
|
+
availableWidth: e,
|
|
104
|
+
availableHeight: t,
|
|
105
|
+
floating: n.floating
|
|
106
|
+
});
|
|
107
|
+
}
|
|
108
|
+
}),
|
|
109
|
+
m({ element: b.current })
|
|
110
|
+
],
|
|
111
|
+
whileElementsMounted: h
|
|
112
|
+
});
|
|
113
|
+
return /* @__PURE__ */ r(N.Provider, {
|
|
114
|
+
value: {
|
|
115
|
+
open: u,
|
|
116
|
+
setOpen: p,
|
|
117
|
+
refs: S,
|
|
118
|
+
floatingStyles: C,
|
|
119
|
+
placement: T,
|
|
120
|
+
middlewareData: w,
|
|
121
|
+
arrowRef: b
|
|
122
|
+
},
|
|
123
|
+
children: e
|
|
124
|
+
});
|
|
125
|
+
}, {
|
|
126
|
+
Trigger: I,
|
|
127
|
+
Content: F
|
|
128
|
+
}), z = {
|
|
129
|
+
tooltipPanel: "sZ0x6w",
|
|
130
|
+
tooltip: "_538Ejd",
|
|
131
|
+
negative: "fqciCO",
|
|
132
|
+
information: "sHkUiQ",
|
|
133
|
+
error: "bpGNoX",
|
|
134
|
+
warning: "tYnRg-",
|
|
135
|
+
success: "_8lflEh"
|
|
136
|
+
}, B = ({ content: a, children: o, openOnHover: s = !0, placement: c = "bottom", openDelay: l = 200, closeDelay: p = 100, maxWidth: y, state: E, tooltip: D, positionUpdateKey: O }) => {
|
|
137
|
+
let [k, j] = f(!1), M = d(null), { refs: N, floatingStyles: P, middlewareData: F, context: I, placement: L, update: R } = x({
|
|
138
|
+
open: k,
|
|
139
|
+
onOpenChange: j,
|
|
140
|
+
placement: c,
|
|
141
|
+
middleware: [
|
|
142
|
+
_(8),
|
|
143
|
+
g({
|
|
144
|
+
fallbackAxisSideDirection: "end",
|
|
145
|
+
fallbackPlacements: [
|
|
146
|
+
"top",
|
|
147
|
+
"right",
|
|
148
|
+
"bottom"
|
|
149
|
+
]
|
|
150
|
+
}),
|
|
151
|
+
v({ padding: 8 }),
|
|
152
|
+
m({
|
|
153
|
+
element: M,
|
|
154
|
+
padding: 8
|
|
155
|
+
})
|
|
156
|
+
],
|
|
157
|
+
whileElementsMounted: h
|
|
158
|
+
});
|
|
159
|
+
u(() => {
|
|
160
|
+
k && R();
|
|
161
|
+
}, [
|
|
162
|
+
k,
|
|
163
|
+
O,
|
|
164
|
+
R
|
|
165
|
+
]);
|
|
166
|
+
let B = C(I, {
|
|
167
|
+
enabled: s,
|
|
168
|
+
move: !1,
|
|
169
|
+
delay: {
|
|
170
|
+
open: l,
|
|
171
|
+
close: p
|
|
172
|
+
}
|
|
173
|
+
}), V = S(I, { enabled: s }), H = b(I), U = T(I), { getReferenceProps: W, getFloatingProps: G } = w([
|
|
174
|
+
B,
|
|
175
|
+
V,
|
|
176
|
+
H,
|
|
177
|
+
U
|
|
178
|
+
]);
|
|
179
|
+
return /* @__PURE__ */ i(n, { children: [/* @__PURE__ */ r("span", {
|
|
180
|
+
ref: N.setReference,
|
|
181
|
+
...W(),
|
|
182
|
+
style: { lineHeight: 1 },
|
|
183
|
+
children: o
|
|
184
|
+
}), k && A(/* @__PURE__ */ i("div", {
|
|
185
|
+
ref: N.setFloating,
|
|
186
|
+
style: {
|
|
187
|
+
...P,
|
|
188
|
+
zIndex: "var(--z-tooltip)",
|
|
189
|
+
maxWidth: y ? `${y}em` : void 0
|
|
190
|
+
},
|
|
191
|
+
...G(),
|
|
192
|
+
role: "tooltip",
|
|
193
|
+
className: t(z.tooltipPanel, D && z.tooltip, E && z[E]),
|
|
194
|
+
children: [a, /* @__PURE__ */ r(e, {
|
|
195
|
+
ref: M,
|
|
196
|
+
placement: L,
|
|
197
|
+
middlewareData: F
|
|
198
|
+
})]
|
|
199
|
+
}), document.body)] });
|
|
200
|
+
}, V = ({ x: t, y: n, children: a }) => {
|
|
201
|
+
let o = d(null), { refs: s, floatingStyles: c, middlewareData: u, placement: f } = x({
|
|
202
|
+
strategy: "absolute",
|
|
203
|
+
placement: "top",
|
|
204
|
+
middleware: [
|
|
205
|
+
_(6),
|
|
206
|
+
g(),
|
|
207
|
+
v({ padding: 16 }),
|
|
208
|
+
m({ element: o })
|
|
209
|
+
]
|
|
210
|
+
});
|
|
211
|
+
return l(() => {
|
|
212
|
+
s.setReference && s.setReference({ getBoundingClientRect: () => ({
|
|
213
|
+
x: t,
|
|
214
|
+
y: n,
|
|
215
|
+
width: 0,
|
|
216
|
+
height: 0,
|
|
217
|
+
top: n,
|
|
218
|
+
left: t,
|
|
219
|
+
bottom: n,
|
|
220
|
+
right: t,
|
|
221
|
+
toJSON: () => {}
|
|
222
|
+
}) });
|
|
223
|
+
}, [
|
|
224
|
+
t,
|
|
225
|
+
n,
|
|
226
|
+
s
|
|
227
|
+
]), /* @__PURE__ */ i("div", {
|
|
228
|
+
ref: s.setFloating,
|
|
229
|
+
style: {
|
|
230
|
+
...c,
|
|
231
|
+
position: "absolute",
|
|
232
|
+
pointerEvents: "none"
|
|
233
|
+
},
|
|
234
|
+
className: z.tooltip,
|
|
235
|
+
children: [a, /* @__PURE__ */ r(e, {
|
|
236
|
+
ref: o,
|
|
237
|
+
placement: f,
|
|
238
|
+
middlewareData: u
|
|
239
|
+
})]
|
|
240
|
+
});
|
|
241
|
+
};
|
|
242
|
+
//#endregion
|
|
243
|
+
export { F as a, I as i, B as n, P as o, R as r, V as t };
|
|
244
|
+
|
|
245
|
+
//# sourceMappingURL=popover-yl5DVe06.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"popover-Bne-Ljbs.js","names":[],"sources":["../../src/popover/lib/applyPopoverAvailableSize.ts","../../src/popover/components/Popover.module.scss","../../src/popover/components/PopoverContext.tsx","../../src/popover/components/PopoverContent.tsx","../../src/popover/components/PopoverTrigger.tsx","../../src/popover/components/Popover.tsx","../../src/popover/Popover.module.scss","../../src/popover/FloatingPopover.tsx","../../src/popover/FloatingTooltip.tsx"],"sourcesContent":["type ApplyPopoverAvailableSizeOptions = {\n\treadonly availableWidth: number;\n\treadonly availableHeight: number;\n\treadonly floating: HTMLElement;\n};\n\n/**\n * Передаёт вычисленную Floating UI доступную область самому popover через CSS-переменные.\n * Потребитель может совместить эти границы со своим размером и режимом прокрутки,\n * не дублируя `size()` middleware и правила clipping context.\n */\nexport function applyPopoverAvailableSize({ availableWidth, availableHeight, floating }: ApplyPopoverAvailableSizeOptions) {\n\tfloating.style.setProperty(\"--popover-available-width\", `${Math.max(0, availableWidth)}px`);\n\tfloating.style.setProperty(\"--popover-available-height\", `${Math.max(0, availableHeight)}px`);\n}\n",".popover {\n\tpadding: var(--space-sm);\n\t// background-image: radial-gradient(var(--surface-0) 50%, var(--surface-1) 100%);\n\n\tborder: var(--border-width) solid var(--border-1);\n\tborder-radius: var(--radius-sm);\n\tcolor: var(--content-0);\n\n\tfilter: drop-shadow(var(--shadow-md));\n\n\tz-index: var(--z-popover);\n\n\t&.primary {\n\t\tbackground-color: var(--surface-0);\n\t}\n\n\t&.secondary {\n\t\tbackground-color: var(--surface-1);\n\t}\n}\n","import React, { createContext, useContext } from \"react\";\n\nimport { Placement, useFloating } from \"@floating-ui/react\";\nimport { createMissingContextError } from \"@ryuzaki13/react-foundation-lib/error\";\n\ninterface PopoverContextValue {\n\topen: boolean;\n\tsetOpen: React.Dispatch<React.SetStateAction<boolean>>;\n\trefs: ReturnType<typeof useFloating>[\"refs\"];\n\tfloatingStyles: React.CSSProperties;\n\tplacement: Placement;\n\tmiddlewareData: ReturnType<typeof useFloating>[\"middlewareData\"];\n\tarrowRef: React.RefObject<HTMLDivElement | null>;\n}\n\nexport const PopoverContext = createContext<PopoverContextValue | null>(null);\n\nexport function usePopoverContext() {\n\tconst context = useContext(PopoverContext);\n\tif (!context) {\n\t\tthrow createMissingContextError({\n\t\t\thookName: \"usePopoverContext\",\n\t\t\tproviderName: \"Popover\"\n\t\t});\n\t}\n\treturn context;\n}\n","import React, { useCallback, useRef } from \"react\";\n\nimport { FloatingPortal } from \"@floating-ui/react\";\nimport { useClickOutside, useEscapeDismiss, useOverlayFocus } from \"@ryuzaki13/react-foundation-lib/dom\";\nimport { cn } from \"@ryuzaki13/react-foundation-lib/utils\";\n\nimport { TooltipArrow } from \"../../floating-arrow\";\n\nimport styles from \"./Popover.module.scss\";\nimport { usePopoverContext } from \"./PopoverContext\";\n\nexport interface PopoverContentProps {\n\tchildren: React.ReactNode | ((ctx: { setClose: () => void }) => React.ReactNode);\n\tonClose?: () => void;\n\tcloseOnOutside?: boolean;\n\tcloseOnEscape?: boolean;\n\tdisableOutsideClick?: boolean;\n\tbackground?: \"primary\" | \"secondary\";\n}\n\n/**\n * Содержимое Popover, отображаемое в портале.\n */\nexport const PopoverContent: React.FC<PopoverContentProps> = ({\n\tchildren,\n\tonClose,\n\tcloseOnOutside = true,\n\tcloseOnEscape = true,\n\tdisableOutsideClick = false,\n\tbackground = \"secondary\"\n}) => {\n\tconst { open, setOpen, refs, floatingStyles, middlewareData, placement, arrowRef } = usePopoverContext();\n\tconst floatingElementRef = useRef<HTMLDivElement | null>(null);\n\tconst setFloating = useCallback(\n\t\t(node: HTMLDivElement | null) => {\n\t\t\tfloatingElementRef.current = node;\n\t\t\trefs.setFloating(node);\n\t\t},\n\t\t[refs]\n\t);\n\n\tconst floatingRef = useOverlayFocus<HTMLDivElement>({\n\t\tactive: open,\n\t\tinitialFocus: \"container\",\n\t\trestoreFocus: true,\n\t\tcontainerRef: floatingElementRef\n\t});\n\n\tconst setClose = useCallback(() => {\n\t\tif (!open) return;\n\t\tsetOpen(false);\n\t\tonClose?.();\n\t}, [setOpen, onClose, open]);\n\n\tuseEscapeDismiss({\n\t\tactive: open,\n\t\tenabled: closeOnEscape,\n\t\tonDismiss: setClose,\n\t\tcontainerRef: floatingRef as React.RefObject<HTMLElement | null>\n\t});\n\n\tconst outsideClose = useCallback(() => {\n\t\tif (!open || disableOutsideClick) return;\n\t\tif (closeOnOutside) setClose();\n\t}, [open, disableOutsideClick, closeOnOutside, setClose]);\n\n\tuseClickOutside([refs.floating as React.RefObject<HTMLElement>, refs.reference as React.RefObject<HTMLElement>], outsideClose);\n\n\tif (!open) return null;\n\n\treturn (\n\t\t<FloatingPortal>\n\t\t\t<div\n\t\t\t\tref={setFloating}\n\t\t\t\tstyle={floatingStyles}\n\t\t\t\tclassName={cn(styles.popover, styles[background])}\n\t\t\t\trole=\"dialog\"\n\t\t\t\taria-modal=\"true\"\n\t\t\t\ttabIndex={-1}>\n\t\t\t\t{typeof children === \"function\" ? children({ setClose }) : children}\n\t\t\t\t<TooltipArrow ref={arrowRef} placement={placement} middlewareData={middlewareData} />\n\t\t\t</div>\n\t\t</FloatingPortal>\n\t);\n};\n","import React, { cloneElement, useCallback } from \"react\";\n\nimport { usePopoverContext } from \"./PopoverContext\";\n\nexport interface PopoverTriggerProps {\n\tpassive?: true;\n\tchildren: React.ReactElement<React.HTMLAttributes<Element> & { ref?: React.Ref<Element> }>;\n}\n\nexport const PopoverTrigger: React.FC<PopoverTriggerProps> = ({ passive, children }) => {\n\tconst { open, setOpen, refs } = usePopoverContext();\n\n\tconst handleClick = useCallback(\n\t\t(e: React.MouseEvent) => {\n\t\t\tif (children.props.onClick) {\n\t\t\t\tchildren.props.onClick(e);\n\t\t\t}\n\t\t\tif (e.defaultPrevented) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\te.preventDefault();\n\t\t\te.stopPropagation();\n\n\t\t\tif (passive) return;\n\n\t\t\tsetOpen((v) => !v);\n\t\t},\n\t\t[children, setOpen, passive]\n\t);\n\n\treturn cloneElement(children as React.JSX.Element, {\n\t\tref: refs.setReference,\n\t\t\"aria-expanded\": open,\n\t\tonClick: handleClick\n\t});\n};\n","/* eslint-disable react-refresh/only-export-components */\nimport React, { useCallback, useRef, useState } from \"react\";\n\nimport { arrow, autoUpdate, flip, offset, Placement, shift, size as floatingSize, useFloating } from \"@floating-ui/react\";\n\nimport { applyPopoverAvailableSize } from \"../lib/applyPopoverAvailableSize\";\n\nimport { PopoverContent } from \"./PopoverContent\";\nimport { PopoverContext } from \"./PopoverContext\";\nimport { PopoverTrigger } from \"./PopoverTrigger\";\n\nconst POPOVER_VIEWPORT_PADDING = 16;\n\nexport interface PopoverProps {\n\tchildren: React.ReactNode;\n\tplacement?: Placement;\n\topen?: boolean;\n\tdefaultOpen?: boolean;\n\tonOpenChange?: (open: boolean) => void;\n}\n\n/**\n * Контролируемый Popover.\n * Используется в связке с Popover.Trigger и Popover.Content.\n */\nconst PopoverRoot: React.FC<PopoverProps> = ({ children, open: controlledOpen, defaultOpen, onOpenChange, placement = \"bottom\" }) => {\n\tconst [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen ?? false);\n\n\tconst isControlled = controlledOpen !== undefined;\n\tconst open = isControlled ? controlledOpen : uncontrolledOpen;\n\tconst setOpen = useCallback<React.Dispatch<React.SetStateAction<boolean>>>(\n\t\t(value) => {\n\t\t\tconst next = typeof value === \"function\" ? value(open) : value;\n\t\t\tif (!isControlled) setUncontrolledOpen(next);\n\t\t\tonOpenChange?.(next);\n\t\t},\n\t\t[isControlled, onOpenChange, open]\n\t);\n\n\tconst arrowRef = useRef<HTMLDivElement | null>(null);\n\n\tconst {\n\t\trefs,\n\t\tfloatingStyles,\n\t\tmiddlewareData,\n\t\tplacement: actualPlacement\n\t} = useFloating({\n\t\topen,\n\t\tonOpenChange: setOpen,\n\t\tplacement,\n\t\tmiddleware: [\n\t\t\toffset(8),\n\t\t\tflip({ padding: POPOVER_VIEWPORT_PADDING }),\n\t\t\tshift({ padding: POPOVER_VIEWPORT_PADDING }),\n\t\t\tfloatingSize({\n\t\t\t\tpadding: POPOVER_VIEWPORT_PADDING,\n\t\t\t\tapply({ availableWidth, availableHeight, elements }) {\n\t\t\t\t\tapplyPopoverAvailableSize({ availableWidth, availableHeight, floating: elements.floating });\n\t\t\t\t}\n\t\t\t}),\n\t\t\t// eslint-disable-next-line react-hooks/refs\n\t\t\tarrow({ element: arrowRef.current })\n\t\t],\n\t\twhileElementsMounted: autoUpdate\n\t});\n\n\treturn (\n\t\t<PopoverContext.Provider value={{ open, setOpen, refs, floatingStyles, placement: actualPlacement, middlewareData, arrowRef }}>\n\t\t\t{children}\n\t\t</PopoverContext.Provider>\n\t);\n};\n\n/**\n * Композиционное API:\n * <Popover>\n * <Popover.Trigger />\n * <Popover.Content />\n * </Popover>\n */\nexport const Popover = Object.assign(PopoverRoot, {\n\tTrigger: PopoverTrigger,\n\tContent: PopoverContent\n});\n",".tooltipPanel {\n\tpadding: var(--space-sm);\n\t// background-image: radial-gradient(var(--surface-0) 50%, var(--surface-1) 100%);\n\tbackground-color: var(--surface-1);\n\tborder: var(--border-width) solid var(--border-2);\n\tborder-radius: var(--radius-sm);\n\tcolor: var(--content-0);\n\n\tfilter: drop-shadow(var(--shadow-sm));\n\n\t&.negative {\n\t\t--border-1: var(--content-0);\n\n\t\tbackground-color: var(--content-0);\n\t\tborder-color: var(--border-1);\n\t\tcolor: var(--surface-1);\n\t}\n\n\t&.information {\n\t\t--border-1: var(--info-text);\n\n\t\tbackground-color: var(--info-text);\n\t\tborder-color: var(--info-text);\n\t\tcolor: var(--info-on-fill);\n\t}\n\n\t&.error {\n\t\t--border-1: var(--error-text);\n\n\t\tbackground-color: var(--error-text);\n\t\tborder-color: var(--error-text);\n\t\tcolor: var(--error-on-fill);\n\t}\n\n\t&.warning {\n\t\t--border-1: var(--warning-text);\n\n\t\tbackground-color: var(--warning-text);\n\t\tborder-color: var(--warning-text);\n\t\tcolor: var(--warning-on-fill);\n\t}\n\n\t&.success {\n\t\t--border-1: var(--success-text);\n\n\t\tbackground-color: var(--success-text);\n\t\tborder-color: var(--success-text);\n\t\tcolor: var(--success-on-fill);\n\t}\n}\n\n.tooltip {\n\tz-index: var(--z-tooltip);\n\tpointer-events: none;\n\n\ttext-align: initial;\n\tfont-size: var(--font-size-sm);\n\tfont-style: normal;\n\tfont-weight: 500;\n\tfont-variation-settings: \"wght\" 500;\n\tline-height: var(--line-height);\n\n\t@extend .tooltipPanel;\n}\n","/* eslint-disable react-hooks/refs */\nimport React, { useLayoutEffect, useRef, useState } from \"react\";\n\nimport {\n\tarrow,\n\tautoUpdate,\n\tflip,\n\toffset,\n\tPlacement,\n\tshift,\n\tuseDismiss,\n\tuseFocus,\n\tuseFloating,\n\tuseHover,\n\tuseInteractions,\n\tuseRole\n} from \"@floating-ui/react\";\nimport { cn } from \"@ryuzaki13/react-foundation-lib/utils\";\nimport { createPortal } from \"react-dom\";\n\nimport { FloatingArrow } from \"../floating-arrow/FloatingArrow\";\n\nimport styles from \"./Popover.module.scss\";\n\ninterface FloatingPopoverProps {\n\tcontent: React.ReactNode;\n\tchildren: React.ReactNode;\n\topenOnHover?: boolean;\n\tplacement?: Placement;\n\topenDelay?: number;\n\tcloseDelay?: number;\n\tmaxWidth?: number;\n\tstate?: \"information\" | \"error\" | \"warning\" | \"success\" | \"negative\";\n\ttooltip?: true;\n\t/**\n\t * Изменяется вместе с CSS-координатой trigger, когда её изменение не отслеживается `autoUpdate`.\n\t * После commit React выполняется повторный расчёт позиции открытой floating-панели.\n\t */\n\tpositionUpdateKey?: unknown;\n}\n\nexport const FloatingPopover: React.FC<FloatingPopoverProps> = ({\n\tcontent,\n\tchildren,\n\topenOnHover = true,\n\tplacement = \"bottom\",\n\topenDelay = 200,\n\tcloseDelay = 100,\n\tmaxWidth,\n\tstate,\n\ttooltip,\n\tpositionUpdateKey\n}) => {\n\tconst [open, setOpen] = useState(false);\n\tconst arrowRef = useRef<HTMLDivElement>(null);\n\n\tconst {\n\t\trefs,\n\t\tfloatingStyles,\n\t\tmiddlewareData,\n\t\tcontext,\n\t\tplacement: computedPlacement,\n\t\tupdate\n\t} = useFloating({\n\t\topen,\n\t\tonOpenChange: setOpen,\n\t\tplacement,\n\t\tmiddleware: [\n\t\t\toffset(8),\n\t\t\tflip({ fallbackAxisSideDirection: \"end\", fallbackPlacements: [\"top\", \"right\", \"bottom\"] }),\n\t\t\tshift({ padding: 8 }),\n\t\t\tarrow({ element: arrowRef, padding: 8 })\n\t\t],\n\t\twhileElementsMounted: autoUpdate\n\t});\n\n\tuseLayoutEffect(() => {\n\t\tif (open) {\n\t\t\tvoid update();\n\t\t}\n\t}, [open, positionUpdateKey, update]);\n\n\tconst hover = useHover(context, {\n\t\tenabled: openOnHover,\n\t\tmove: false,\n\t\tdelay: {\n\t\t\topen: openDelay,\n\t\t\tclose: closeDelay\n\t\t}\n\t});\n\t// Hover-подсказка обязана иметь ту же пассивную точку входа с клавиатуры.\n\t// Связываем focus с тем же флагом, чтобы `openOnHover={false}` не менял\n\t// управляемые сценарии, которые не запрашивали автоматическое открытие.\n\tconst focus = useFocus(context, { enabled: openOnHover });\n\tconst dismiss = useDismiss(context);\n\tconst role = useRole(context);\n\n\tconst { getReferenceProps, getFloatingProps } = useInteractions([hover, focus, dismiss, role]);\n\n\treturn (\n\t\t<>\n\t\t\t<span ref={refs.setReference} {...getReferenceProps()} style={{ lineHeight: 1 }}>\n\t\t\t\t{children}\n\t\t\t</span>\n\n\t\t\t{open &&\n\t\t\t\tcreatePortal(\n\t\t\t\t\t<div\n\t\t\t\t\t\tref={refs.setFloating}\n\t\t\t\t\t\tstyle={{ ...floatingStyles, zIndex: \"var(--z-tooltip)\", maxWidth: maxWidth ? `${maxWidth}em` : undefined }}\n\t\t\t\t\t\t{...getFloatingProps()}\n\t\t\t\t\t\trole=\"tooltip\"\n\t\t\t\t\t\tclassName={cn(styles.tooltipPanel, tooltip && styles.tooltip, state && styles[state])}>\n\t\t\t\t\t\t{content}\n\n\t\t\t\t\t\t<FloatingArrow ref={arrowRef} placement={computedPlacement} middlewareData={middlewareData} />\n\t\t\t\t\t</div>,\n\t\t\t\t\tdocument.body\n\t\t\t\t)}\n\t\t</>\n\t);\n};\n","import React, { useEffect, useRef } from \"react\";\n\nimport { arrow, flip, offset, shift, useFloating } from \"@floating-ui/react\";\n\nimport { FloatingArrow } from \"../floating-arrow/FloatingArrow\";\n\nimport styles from \"./Popover.module.scss\";\n\nexport const FloatingTooltip: React.FC<{\n\tx: number;\n\ty: number;\n\tchildren: React.ReactNode;\n}> = ({ x, y, children }) => {\n\tconst arrowRef = useRef<HTMLDivElement | null>(null);\n\n\tconst {\n\t\trefs,\n\t\tfloatingStyles,\n\t\tmiddlewareData,\n\t\tplacement: computedPlacement\n\t} = useFloating({\n\t\tstrategy: \"absolute\",\n\t\tplacement: \"top\",\n\t\t// eslint-disable-next-line react-hooks/refs\n\t\tmiddleware: [offset(6), flip(), shift({ padding: 16 }), arrow({ element: arrowRef })]\n\t});\n\n\tuseEffect(() => {\n\t\tif (refs.setReference) {\n\t\t\trefs.setReference({\n\t\t\t\tgetBoundingClientRect: () =>\n\t\t\t\t\t({\n\t\t\t\t\t\tx,\n\t\t\t\t\t\ty,\n\t\t\t\t\t\twidth: 0,\n\t\t\t\t\t\theight: 0,\n\t\t\t\t\t\ttop: y,\n\t\t\t\t\t\tleft: x,\n\t\t\t\t\t\tbottom: y,\n\t\t\t\t\t\tright: x,\n\t\t\t\t\t\ttoJSON: () => {}\n\t\t\t\t\t}) as DOMRect\n\t\t\t});\n\t\t}\n\t}, [x, y, refs]);\n\n\treturn (\n\t\t<div ref={refs.setFloating} style={{ ...floatingStyles, position: \"absolute\", pointerEvents: \"none\" }} className={styles.tooltip}>\n\t\t\t{children}\n\n\t\t\t<FloatingArrow ref={arrowRef} placement={computedPlacement} middlewareData={middlewareData} />\n\t\t</div>\n\t);\n};\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"popover-yl5DVe06.js","names":[],"sources":["../../src/popover/lib/applyPopoverAvailableSize.ts","../../src/popover/components/Popover.module.scss","../../src/popover/components/PopoverContext.tsx","../../src/popover/components/PopoverContent.tsx","../../src/popover/components/PopoverTrigger.tsx","../../src/popover/components/Popover.tsx","../../src/popover/Popover.module.scss","../../src/popover/FloatingPopover.tsx","../../src/popover/FloatingTooltip.tsx"],"sourcesContent":["type ApplyPopoverAvailableSizeOptions = {\n\treadonly availableWidth: number;\n\treadonly availableHeight: number;\n\treadonly floating: HTMLElement;\n};\n\n/**\n * Передаёт вычисленную Floating UI доступную область самому popover через CSS-переменные.\n * Потребитель может совместить эти границы со своим размером и режимом прокрутки,\n * не дублируя `size()` middleware и правила clipping context.\n */\nexport function applyPopoverAvailableSize({ availableWidth, availableHeight, floating }: ApplyPopoverAvailableSizeOptions) {\n\tfloating.style.setProperty(\"--popover-available-width\", `${Math.max(0, availableWidth)}px`);\n\tfloating.style.setProperty(\"--popover-available-height\", `${Math.max(0, availableHeight)}px`);\n}\n",".popover {\n\tpadding: var(--space-sm);\n\t// background-image: radial-gradient(var(--surface-0) 50%, var(--surface-1) 100%);\n\n\tborder: var(--border-width) solid var(--border-1);\n\tborder-radius: var(--radius-sm);\n\tcolor: var(--content-0);\n\n\tfilter: drop-shadow(var(--shadow-md));\n\n\tz-index: var(--z-popover);\n\n\t&.primary {\n\t\tbackground-color: var(--surface-0);\n\t}\n\n\t&.secondary {\n\t\tbackground-color: var(--surface-1);\n\t}\n}\n","import React, { createContext, useContext } from \"react\";\n\nimport { Placement, useFloating } from \"@floating-ui/react\";\nimport { createMissingContextError } from \"@ryuzaki13/react-foundation-lib/error\";\n\ninterface PopoverContextValue {\n\topen: boolean;\n\tsetOpen: React.Dispatch<React.SetStateAction<boolean>>;\n\trefs: ReturnType<typeof useFloating>[\"refs\"];\n\tfloatingStyles: React.CSSProperties;\n\tplacement: Placement;\n\tmiddlewareData: ReturnType<typeof useFloating>[\"middlewareData\"];\n\tarrowRef: React.RefObject<HTMLDivElement | null>;\n}\n\nexport const PopoverContext = createContext<PopoverContextValue | null>(null);\n\nexport function usePopoverContext() {\n\tconst context = useContext(PopoverContext);\n\tif (!context) {\n\t\tthrow createMissingContextError({\n\t\t\thookName: \"usePopoverContext\",\n\t\t\tproviderName: \"Popover\"\n\t\t});\n\t}\n\treturn context;\n}\n","import React, { useCallback, useRef } from \"react\";\n\nimport { FloatingPortal } from \"@floating-ui/react\";\nimport { useClickOutside, useEscapeDismiss, useOverlayFocus } from \"@ryuzaki13/react-foundation-lib/dom\";\nimport { cn } from \"@ryuzaki13/react-foundation-lib/utils\";\n\nimport { TooltipArrow } from \"../../floating-arrow\";\n\nimport styles from \"./Popover.module.scss\";\nimport { usePopoverContext } from \"./PopoverContext\";\n\nexport interface PopoverContentProps {\n\tchildren: React.ReactNode | ((ctx: { setClose: () => void }) => React.ReactNode);\n\tonClose?: () => void;\n\tcloseOnOutside?: boolean;\n\tcloseOnEscape?: boolean;\n\tdisableOutsideClick?: boolean;\n\tbackground?: \"primary\" | \"secondary\";\n}\n\n/**\n * Содержимое Popover, отображаемое в портале.\n */\nexport const PopoverContent: React.FC<PopoverContentProps> = ({\n\tchildren,\n\tonClose,\n\tcloseOnOutside = true,\n\tcloseOnEscape = true,\n\tdisableOutsideClick = false,\n\tbackground = \"secondary\"\n}) => {\n\tconst { open, setOpen, refs, floatingStyles, middlewareData, placement, arrowRef } = usePopoverContext();\n\tconst floatingElementRef = useRef<HTMLDivElement | null>(null);\n\tconst setFloating = useCallback(\n\t\t(node: HTMLDivElement | null) => {\n\t\t\tfloatingElementRef.current = node;\n\t\t\trefs.setFloating(node);\n\t\t},\n\t\t[refs]\n\t);\n\n\tconst floatingRef = useOverlayFocus<HTMLDivElement>({\n\t\tactive: open,\n\t\tinitialFocus: \"container\",\n\t\trestoreFocus: true,\n\t\tcontainerRef: floatingElementRef\n\t});\n\n\tconst setClose = useCallback(() => {\n\t\tif (!open) return;\n\t\tsetOpen(false);\n\t\tonClose?.();\n\t}, [setOpen, onClose, open]);\n\n\tuseEscapeDismiss({\n\t\tactive: open,\n\t\tenabled: closeOnEscape,\n\t\tonDismiss: setClose,\n\t\tcontainerRef: floatingRef as React.RefObject<HTMLElement | null>\n\t});\n\n\tconst outsideClose = useCallback(() => {\n\t\tif (!open || disableOutsideClick) return;\n\t\tif (closeOnOutside) setClose();\n\t}, [open, disableOutsideClick, closeOnOutside, setClose]);\n\n\tuseClickOutside([refs.floating as React.RefObject<HTMLElement>, refs.reference as React.RefObject<HTMLElement>], outsideClose);\n\n\tif (!open) return null;\n\n\treturn (\n\t\t<FloatingPortal>\n\t\t\t<div\n\t\t\t\tref={setFloating}\n\t\t\t\tstyle={floatingStyles}\n\t\t\t\tclassName={cn(styles.popover, styles[background])}\n\t\t\t\trole=\"dialog\"\n\t\t\t\taria-modal=\"true\"\n\t\t\t\ttabIndex={-1}>\n\t\t\t\t{typeof children === \"function\" ? children({ setClose }) : children}\n\t\t\t\t<TooltipArrow ref={arrowRef} placement={placement} middlewareData={middlewareData} />\n\t\t\t</div>\n\t\t</FloatingPortal>\n\t);\n};\n","import React, { cloneElement, useCallback } from \"react\";\n\nimport { usePopoverContext } from \"./PopoverContext\";\n\nexport interface PopoverTriggerProps {\n\tpassive?: true;\n\tchildren: React.ReactElement<React.HTMLAttributes<Element> & { ref?: React.Ref<Element> }>;\n}\n\nexport const PopoverTrigger: React.FC<PopoverTriggerProps> = ({ passive, children }) => {\n\tconst { open, setOpen, refs } = usePopoverContext();\n\n\tconst handleClick = useCallback(\n\t\t(e: React.MouseEvent) => {\n\t\t\tif (children.props.onClick) {\n\t\t\t\tchildren.props.onClick(e);\n\t\t\t}\n\t\t\tif (e.defaultPrevented) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\te.preventDefault();\n\t\t\te.stopPropagation();\n\n\t\t\tif (passive) return;\n\n\t\t\tsetOpen((v) => !v);\n\t\t},\n\t\t[children, setOpen, passive]\n\t);\n\n\treturn cloneElement(children as React.JSX.Element, {\n\t\tref: refs.setReference,\n\t\t\"aria-expanded\": open,\n\t\tonClick: handleClick\n\t});\n};\n","/* eslint-disable react-refresh/only-export-components */\nimport React, { useCallback, useRef, useState } from \"react\";\n\nimport { arrow, autoUpdate, flip, offset, Placement, shift, size as floatingSize, useFloating } from \"@floating-ui/react\";\n\nimport { applyPopoverAvailableSize } from \"../lib/applyPopoverAvailableSize\";\n\nimport { PopoverContent } from \"./PopoverContent\";\nimport { PopoverContext } from \"./PopoverContext\";\nimport { PopoverTrigger } from \"./PopoverTrigger\";\n\nconst POPOVER_VIEWPORT_PADDING = 16;\n\nexport interface PopoverProps {\n\tchildren: React.ReactNode;\n\tplacement?: Placement;\n\topen?: boolean;\n\tdefaultOpen?: boolean;\n\tonOpenChange?: (open: boolean) => void;\n}\n\n/**\n * Контролируемый Popover.\n * Используется в связке с Popover.Trigger и Popover.Content.\n */\nconst PopoverRoot: React.FC<PopoverProps> = ({ children, open: controlledOpen, defaultOpen, onOpenChange, placement = \"bottom\" }) => {\n\tconst [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen ?? false);\n\n\tconst isControlled = controlledOpen !== undefined;\n\tconst open = isControlled ? controlledOpen : uncontrolledOpen;\n\tconst setOpen = useCallback<React.Dispatch<React.SetStateAction<boolean>>>(\n\t\t(value) => {\n\t\t\tconst next = typeof value === \"function\" ? value(open) : value;\n\t\t\tif (!isControlled) setUncontrolledOpen(next);\n\t\t\tonOpenChange?.(next);\n\t\t},\n\t\t[isControlled, onOpenChange, open]\n\t);\n\n\tconst arrowRef = useRef<HTMLDivElement | null>(null);\n\n\tconst {\n\t\trefs,\n\t\tfloatingStyles,\n\t\tmiddlewareData,\n\t\tplacement: actualPlacement\n\t} = useFloating({\n\t\topen,\n\t\tonOpenChange: setOpen,\n\t\tplacement,\n\t\tmiddleware: [\n\t\t\toffset(8),\n\t\t\tflip({ padding: POPOVER_VIEWPORT_PADDING }),\n\t\t\tshift({ padding: POPOVER_VIEWPORT_PADDING }),\n\t\t\tfloatingSize({\n\t\t\t\tpadding: POPOVER_VIEWPORT_PADDING,\n\t\t\t\tapply({ availableWidth, availableHeight, elements }) {\n\t\t\t\t\tapplyPopoverAvailableSize({ availableWidth, availableHeight, floating: elements.floating });\n\t\t\t\t}\n\t\t\t}),\n\t\t\t// eslint-disable-next-line react-hooks/refs\n\t\t\tarrow({ element: arrowRef.current })\n\t\t],\n\t\twhileElementsMounted: autoUpdate\n\t});\n\n\treturn (\n\t\t<PopoverContext.Provider value={{ open, setOpen, refs, floatingStyles, placement: actualPlacement, middlewareData, arrowRef }}>\n\t\t\t{children}\n\t\t</PopoverContext.Provider>\n\t);\n};\n\n/**\n * Композиционное API:\n * <Popover>\n * <Popover.Trigger />\n * <Popover.Content />\n * </Popover>\n */\nexport const Popover = Object.assign(PopoverRoot, {\n\tTrigger: PopoverTrigger,\n\tContent: PopoverContent\n});\n",".tooltipPanel {\n\tpadding: var(--space-sm);\n\t// background-image: radial-gradient(var(--surface-0) 50%, var(--surface-1) 100%);\n\tbackground-color: var(--surface-1);\n\tborder: var(--border-width) solid var(--border-2);\n\tborder-radius: var(--radius-sm);\n\tcolor: var(--content-0);\n\n\tfilter: drop-shadow(var(--shadow-sm));\n\n\t&.negative {\n\t\t--border-1: var(--content-0);\n\n\t\tbackground-color: var(--content-0);\n\t\tborder-color: var(--border-1);\n\t\tcolor: var(--surface-1);\n\t}\n\n\t&.information {\n\t\t--border-1: var(--info-text);\n\n\t\tbackground-color: var(--info-text);\n\t\tborder-color: var(--info-text);\n\t\tcolor: var(--info-on-fill);\n\t}\n\n\t&.error {\n\t\t--border-1: var(--error-text);\n\n\t\tbackground-color: var(--error-text);\n\t\tborder-color: var(--error-text);\n\t\tcolor: var(--error-on-fill);\n\t}\n\n\t&.warning {\n\t\t--border-1: var(--warning-text);\n\n\t\tbackground-color: var(--warning-text);\n\t\tborder-color: var(--warning-text);\n\t\tcolor: var(--warning-on-fill);\n\t}\n\n\t&.success {\n\t\t--border-1: var(--success-text);\n\n\t\tbackground-color: var(--success-text);\n\t\tborder-color: var(--success-text);\n\t\tcolor: var(--success-on-fill);\n\t}\n}\n\n.tooltip {\n\tz-index: var(--z-tooltip);\n\tpointer-events: none;\n\n\ttext-align: initial;\n\tfont-size: var(--font-size-sm);\n\tfont-style: normal;\n\tfont-weight: 500;\n\tfont-variation-settings: \"wght\" 500;\n\tline-height: var(--line-height);\n\n\t@extend .tooltipPanel;\n}\n","/* eslint-disable react-hooks/refs */\nimport React, { useLayoutEffect, useRef, useState } from \"react\";\n\nimport {\n\tarrow,\n\tautoUpdate,\n\tflip,\n\toffset,\n\tPlacement,\n\tshift,\n\tuseDismiss,\n\tuseFocus,\n\tuseFloating,\n\tuseHover,\n\tuseInteractions,\n\tuseRole\n} from \"@floating-ui/react\";\nimport { cn } from \"@ryuzaki13/react-foundation-lib/utils\";\nimport { createPortal } from \"react-dom\";\n\nimport { FloatingArrow } from \"../floating-arrow/FloatingArrow\";\n\nimport styles from \"./Popover.module.scss\";\n\ninterface FloatingPopoverProps {\n\tcontent: React.ReactNode;\n\tchildren: React.ReactNode;\n\topenOnHover?: boolean;\n\tplacement?: Placement;\n\topenDelay?: number;\n\tcloseDelay?: number;\n\tmaxWidth?: number;\n\tstate?: \"information\" | \"error\" | \"warning\" | \"success\" | \"negative\";\n\ttooltip?: true;\n\t/**\n\t * Изменяется вместе с CSS-координатой trigger, когда её изменение не отслеживается `autoUpdate`.\n\t * После commit React выполняется повторный расчёт позиции открытой floating-панели.\n\t */\n\tpositionUpdateKey?: unknown;\n}\n\nexport const FloatingPopover: React.FC<FloatingPopoverProps> = ({\n\tcontent,\n\tchildren,\n\topenOnHover = true,\n\tplacement = \"bottom\",\n\topenDelay = 200,\n\tcloseDelay = 100,\n\tmaxWidth,\n\tstate,\n\ttooltip,\n\tpositionUpdateKey\n}) => {\n\tconst [open, setOpen] = useState(false);\n\tconst arrowRef = useRef<HTMLDivElement>(null);\n\n\tconst {\n\t\trefs,\n\t\tfloatingStyles,\n\t\tmiddlewareData,\n\t\tcontext,\n\t\tplacement: computedPlacement,\n\t\tupdate\n\t} = useFloating({\n\t\topen,\n\t\tonOpenChange: setOpen,\n\t\tplacement,\n\t\tmiddleware: [\n\t\t\toffset(8),\n\t\t\tflip({ fallbackAxisSideDirection: \"end\", fallbackPlacements: [\"top\", \"right\", \"bottom\"] }),\n\t\t\tshift({ padding: 8 }),\n\t\t\tarrow({ element: arrowRef, padding: 8 })\n\t\t],\n\t\twhileElementsMounted: autoUpdate\n\t});\n\n\tuseLayoutEffect(() => {\n\t\tif (open) {\n\t\t\tvoid update();\n\t\t}\n\t}, [open, positionUpdateKey, update]);\n\n\tconst hover = useHover(context, {\n\t\tenabled: openOnHover,\n\t\tmove: false,\n\t\tdelay: {\n\t\t\topen: openDelay,\n\t\t\tclose: closeDelay\n\t\t}\n\t});\n\t// Hover-подсказка обязана иметь ту же пассивную точку входа с клавиатуры.\n\t// Связываем focus с тем же флагом, чтобы `openOnHover={false}` не менял\n\t// управляемые сценарии, которые не запрашивали автоматическое открытие.\n\tconst focus = useFocus(context, { enabled: openOnHover });\n\tconst dismiss = useDismiss(context);\n\tconst role = useRole(context);\n\n\tconst { getReferenceProps, getFloatingProps } = useInteractions([hover, focus, dismiss, role]);\n\n\treturn (\n\t\t<>\n\t\t\t<span ref={refs.setReference} {...getReferenceProps()} style={{ lineHeight: 1 }}>\n\t\t\t\t{children}\n\t\t\t</span>\n\n\t\t\t{open &&\n\t\t\t\tcreatePortal(\n\t\t\t\t\t<div\n\t\t\t\t\t\tref={refs.setFloating}\n\t\t\t\t\t\tstyle={{ ...floatingStyles, zIndex: \"var(--z-tooltip)\", maxWidth: maxWidth ? `${maxWidth}em` : undefined }}\n\t\t\t\t\t\t{...getFloatingProps()}\n\t\t\t\t\t\trole=\"tooltip\"\n\t\t\t\t\t\tclassName={cn(styles.tooltipPanel, tooltip && styles.tooltip, state && styles[state])}>\n\t\t\t\t\t\t{content}\n\n\t\t\t\t\t\t<FloatingArrow ref={arrowRef} placement={computedPlacement} middlewareData={middlewareData} />\n\t\t\t\t\t</div>,\n\t\t\t\t\tdocument.body\n\t\t\t\t)}\n\t\t</>\n\t);\n};\n","import React, { useEffect, useRef } from \"react\";\n\nimport { arrow, flip, offset, shift, useFloating } from \"@floating-ui/react\";\n\nimport { FloatingArrow } from \"../floating-arrow/FloatingArrow\";\n\nimport styles from \"./Popover.module.scss\";\n\nexport const FloatingTooltip: React.FC<{\n\tx: number;\n\ty: number;\n\tchildren: React.ReactNode;\n}> = ({ x, y, children }) => {\n\tconst arrowRef = useRef<HTMLDivElement | null>(null);\n\n\tconst {\n\t\trefs,\n\t\tfloatingStyles,\n\t\tmiddlewareData,\n\t\tplacement: computedPlacement\n\t} = useFloating({\n\t\tstrategy: \"absolute\",\n\t\tplacement: \"top\",\n\t\t// eslint-disable-next-line react-hooks/refs\n\t\tmiddleware: [offset(6), flip(), shift({ padding: 16 }), arrow({ element: arrowRef })]\n\t});\n\n\tuseEffect(() => {\n\t\tif (refs.setReference) {\n\t\t\trefs.setReference({\n\t\t\t\tgetBoundingClientRect: () =>\n\t\t\t\t\t({\n\t\t\t\t\t\tx,\n\t\t\t\t\t\ty,\n\t\t\t\t\t\twidth: 0,\n\t\t\t\t\t\theight: 0,\n\t\t\t\t\t\ttop: y,\n\t\t\t\t\t\tleft: x,\n\t\t\t\t\t\tbottom: y,\n\t\t\t\t\t\tright: x,\n\t\t\t\t\t\ttoJSON: () => {}\n\t\t\t\t\t}) as DOMRect\n\t\t\t});\n\t\t}\n\t}, [x, y, refs]);\n\n\treturn (\n\t\t<div ref={refs.setFloating} style={{ ...floatingStyles, position: \"absolute\", pointerEvents: \"none\" }} className={styles.tooltip}>\n\t\t\t{children}\n\n\t\t\t<FloatingArrow ref={arrowRef} placement={computedPlacement} middlewareData={middlewareData} />\n\t\t</div>\n\t);\n};\n"],"mappings":"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"}
|
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
import { t as e } from "./ui.module-oRwY3Zli.js";
|
|
2
|
+
import { cn as t, getRovingFocusTargetIndex as n, handleKeyboardActivation as r } from "@ryuzaki13/react-foundation-lib/utils";
|
|
3
|
+
import { jsx as i, jsxs as a } from "react/jsx-runtime";
|
|
4
|
+
import { createContext as o, useCallback as s, useContext as c, useId as l, useLayoutEffect as u, useMemo as d, useState as f } from "react";
|
|
5
|
+
var p = {
|
|
6
|
+
radioGroup: "nINbA6",
|
|
7
|
+
noWrap: "GL-UWx",
|
|
8
|
+
horizontal: "_6PeF-i",
|
|
9
|
+
vertical: "_5wP4aR",
|
|
10
|
+
radioItem: "S3MnZI",
|
|
11
|
+
checked: "KHJ0ja",
|
|
12
|
+
radioItemContent: "oGmcQH"
|
|
13
|
+
}, m = o(null);
|
|
14
|
+
function h({ value: n, onChange: r, label: o, description: c, disabled: u, className: h, noWrap: g, orientation: _ = "horizontal", "aria-label": v, children: y }) {
|
|
15
|
+
let b = l(), x = o ? `${b}-label` : void 0, S = c ? `${b}-description` : void 0, [C, w] = f([]), T = s((e) => r?.(e), [r]), E = s((e) => (w((t) => t.includes(e) ? t : [...t, e]), () => {
|
|
16
|
+
w((t) => t.filter((t) => t !== e));
|
|
17
|
+
}), []), D = d(() => ({
|
|
18
|
+
value: n,
|
|
19
|
+
onChange: T,
|
|
20
|
+
disabled: u,
|
|
21
|
+
orientation: _,
|
|
22
|
+
groupId: b,
|
|
23
|
+
labelId: x,
|
|
24
|
+
descriptionId: S,
|
|
25
|
+
firstOptionId: C[0],
|
|
26
|
+
registerOption: E
|
|
27
|
+
}), [
|
|
28
|
+
S,
|
|
29
|
+
u,
|
|
30
|
+
b,
|
|
31
|
+
T,
|
|
32
|
+
x,
|
|
33
|
+
_,
|
|
34
|
+
E,
|
|
35
|
+
C,
|
|
36
|
+
n
|
|
37
|
+
]);
|
|
38
|
+
return /* @__PURE__ */ a("div", {
|
|
39
|
+
className: t(e.uiElement, u && e.disabled, h),
|
|
40
|
+
children: [
|
|
41
|
+
o && /* @__PURE__ */ i("div", {
|
|
42
|
+
id: x,
|
|
43
|
+
className: e.uiLabel,
|
|
44
|
+
children: o
|
|
45
|
+
}),
|
|
46
|
+
c && /* @__PURE__ */ i("div", {
|
|
47
|
+
id: S,
|
|
48
|
+
className: e.uiDescription,
|
|
49
|
+
children: c
|
|
50
|
+
}),
|
|
51
|
+
/* @__PURE__ */ i(m.Provider, {
|
|
52
|
+
value: D,
|
|
53
|
+
children: /* @__PURE__ */ i("div", {
|
|
54
|
+
role: "radiogroup",
|
|
55
|
+
"aria-labelledby": x,
|
|
56
|
+
"aria-label": x ? void 0 : v,
|
|
57
|
+
"aria-describedby": S,
|
|
58
|
+
"aria-disabled": u || void 0,
|
|
59
|
+
"data-disabled": u || void 0,
|
|
60
|
+
className: t(e.uiInputControl, p.radioGroup, g && p.noWrap, p[_]),
|
|
61
|
+
children: y
|
|
62
|
+
})
|
|
63
|
+
})
|
|
64
|
+
]
|
|
65
|
+
});
|
|
66
|
+
}
|
|
67
|
+
function g({ value: e, label: o, description: s, className: d }) {
|
|
68
|
+
let f = c(m), h = l(), g = f?.registerOption;
|
|
69
|
+
if (u(() => {
|
|
70
|
+
if (g) return g(h);
|
|
71
|
+
}, [g, h]), !f) return /* @__PURE__ */ a("div", {
|
|
72
|
+
className: t(p.radioItem, d),
|
|
73
|
+
children: [/* @__PURE__ */ i("p", {
|
|
74
|
+
className: "textNoWrap",
|
|
75
|
+
children: o
|
|
76
|
+
}), s && /* @__PURE__ */ i("div", {
|
|
77
|
+
className: "fontSizeSm content2",
|
|
78
|
+
children: s
|
|
79
|
+
})]
|
|
80
|
+
});
|
|
81
|
+
let _ = Object.is(f.value, e), v = f.disabled === !0, y = f.value === void 0 && f.firstOptionId === h, b = () => {
|
|
82
|
+
v || _ || f.onChange?.(e);
|
|
83
|
+
};
|
|
84
|
+
return /* @__PURE__ */ i("button", {
|
|
85
|
+
id: `${f.groupId}-option-${h}`,
|
|
86
|
+
type: "button",
|
|
87
|
+
role: "radio",
|
|
88
|
+
"aria-checked": _,
|
|
89
|
+
disabled: v,
|
|
90
|
+
tabIndex: _ || y ? 0 : -1,
|
|
91
|
+
className: t(p.radioItem, _ && p.checked, d),
|
|
92
|
+
"data-ui": "radio-option",
|
|
93
|
+
"data-action": "select-radio-option",
|
|
94
|
+
onClick: b,
|
|
95
|
+
onKeyDown: (e) => {
|
|
96
|
+
if (v || r(e, b)) return;
|
|
97
|
+
let t = e.currentTarget, i = t.closest("[role=\"radiogroup\"]"), a = Array.from(i?.querySelectorAll("[role=\"radio\"]:not([disabled])") ?? []);
|
|
98
|
+
if (!a.length) return;
|
|
99
|
+
let o = a.indexOf(t);
|
|
100
|
+
if (o === -1) return;
|
|
101
|
+
let s = n({
|
|
102
|
+
currentIndex: o,
|
|
103
|
+
itemCount: a.length,
|
|
104
|
+
key: e.key,
|
|
105
|
+
orientation: f.orientation
|
|
106
|
+
});
|
|
107
|
+
s !== null && (e.preventDefault(), a[s]?.focus(), a[s]?.click());
|
|
108
|
+
},
|
|
109
|
+
children: /* @__PURE__ */ a("span", {
|
|
110
|
+
className: p.radioItemContent,
|
|
111
|
+
children: [/* @__PURE__ */ i("span", {
|
|
112
|
+
className: "textNoWrap",
|
|
113
|
+
children: o
|
|
114
|
+
}), s && /* @__PURE__ */ i("span", {
|
|
115
|
+
className: "fontSizeSm",
|
|
116
|
+
children: s
|
|
117
|
+
})]
|
|
118
|
+
})
|
|
119
|
+
});
|
|
120
|
+
}
|
|
121
|
+
h.Option = g;
|
|
122
|
+
//#endregion
|
|
123
|
+
export { h as n, g as t };
|
|
124
|
+
|
|
125
|
+
//# sourceMappingURL=radio-group-CW-K1n9c.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radio-group-sSnlYjAX.js","names":[],"sources":["../../src/radio-group/RadioGroup.module.scss","../../src/radio-group/RadioGroup.tsx"],"sourcesContent":[".radioGroup {\n\tdisplay: flex;\n\talign-content: flex-start;\n\tflex-wrap: wrap;\n\t// min-height: var(--control-height);\n\theight: auto;\n\n\t&.noWrap {\n\t\tflex-wrap: nowrap;\n\t}\n\n\t&.horizontal {\n\t\tflex-direction: row;\n\t}\n\n\t&.vertical {\n\t\tflex-direction: column;\n\t\talign-content: stretch;\n\t}\n}\n\n.radioItem {\n\tflex: 1 0 0%;\n\n\tdisplay: flex;\n\talign-items: center;\n\tgap: var(--space-sm);\n\n\tcolor: var(--content-2);\n\t// border: var(--border-width) solid transparent;\n\tborder-radius: var(--radius-xs);\n\tpadding: 0 var(--space-md);\n\tmargin: var(--border-width);\n\t// baseInputControl = --control-height, + borderTop/Bottom + transparentLineTop/Bottom\n\tmin-height: calc(var(--control-height) - calc(var(--border-width) * 4));\n\n\tcursor: pointer;\n\n\t&:hover {\n\t\tcolor: var(--content-1);\n\t\tbackground-color: var(--surface-2);\n\t\t// border-color: var(--border-1);\n\t}\n\n\t&.checked {\n\t\tcolor: var(--brand-on-fill);\n\t\tbackground-color: var(--brand-fill);\n\t\t// border-color: var(--border-0);\n\t}\n\n\t&:disabled {\n\t\topacity: var(--disabled-opacity);\n\t}\n}\n\n.radioItemContent {\n\tflex: 1 0 0%;\n\n\tdisplay: grid;\n\talign-content: center;\n\tgap: var(--space-sm);\n}\n\n// .radioItemIcon {\n// \tflex: 0 0 0%;\n\n// \tsvg {\n// \t\twidth: 1em;\n// \t\theight: 1em;\n// \t}\n// }\n","import React, { createContext, KeyboardEvent, ReactNode, useCallback, useContext, useId, useLayoutEffect, useMemo, useState } from \"react\";\n\nimport { cn, getRovingFocusTargetIndex, handleKeyboardActivation } from \"@ryuzaki13/react-foundation-lib/utils\";\n\nimport uiStyles from \"../ui.module.scss\";\n\nimport styles from \"./RadioGroup.module.scss\";\n\ninterface RadioGroupContextValue {\n\tvalue?: unknown;\n\tonChange?: (value: unknown) => void;\n\tdisabled?: boolean;\n\torientation: \"vertical\" | \"horizontal\";\n\tgroupId: string;\n\tlabelId?: string;\n\tdescriptionId?: string;\n\tfirstOptionId?: string;\n\tregisterOption: (optionId: string) => () => void;\n}\n\nconst RadioGroupContext = createContext<RadioGroupContextValue | null>(null);\n\ninterface RadioGroupProps<T> {\n\tvalue?: T;\n\tonChange?: (value: T) => void;\n\tlabel?: string;\n\tdescription?: string;\n\tdisabled?: boolean;\n\tclassName?: string;\n\tnoWrap?: true;\n\torientation?: \"vertical\" | \"horizontal\";\n\t\"aria-label\"?: string;\n\tchildren: React.ReactNode;\n}\n\n/**\n * Группа радиокнопок с общим состоянием выбранного значения. Обеспечивает единый API выбора и контекст для дочерних опций.\n */\nexport function RadioGroup<T>({\n\tvalue,\n\tonChange,\n\tlabel,\n\tdescription,\n\tdisabled,\n\tclassName,\n\tnoWrap,\n\torientation = \"horizontal\",\n\t\"aria-label\": ariaLabel,\n\tchildren\n}: RadioGroupProps<T>) {\n\tconst groupId = useId();\n\tconst labelId = label ? `${groupId}-label` : undefined;\n\tconst descriptionId = description ? `${groupId}-description` : undefined;\n\tconst [registeredOptionIds, setRegisteredOptionIds] = useState<string[]>([]);\n\tconst handleChange = useCallback((nextValue: unknown) => onChange?.(nextValue as T), [onChange]);\n\n\t/**\n\t * Хранит порядок опций внутри группы, чтобы при отсутствии выбранного значения\n\t * оставлять ровно один tab stop на первой доступной радиокнопке.\n\t */\n\tconst registerOption = useCallback((optionId: string) => {\n\t\tsetRegisteredOptionIds((currentIds) => (currentIds.includes(optionId) ? currentIds : [...currentIds, optionId]));\n\n\t\treturn () => {\n\t\t\tsetRegisteredOptionIds((currentIds) => currentIds.filter((currentId) => currentId !== optionId));\n\t\t};\n\t}, []);\n\n\tconst contextValue = useMemo(\n\t\t() => ({\n\t\t\tvalue,\n\t\t\tonChange: handleChange,\n\t\t\tdisabled,\n\t\t\torientation,\n\t\t\tgroupId,\n\t\t\tlabelId,\n\t\t\tdescriptionId,\n\t\t\tfirstOptionId: registeredOptionIds[0],\n\t\t\tregisterOption\n\t\t}),\n\t\t[descriptionId, disabled, groupId, handleChange, labelId, orientation, registerOption, registeredOptionIds, value]\n\t);\n\n\treturn (\n\t\t<div className={cn(uiStyles.uiElement, disabled && uiStyles.disabled, className)}>\n\t\t\t{label && (\n\t\t\t\t<div id={labelId} className={uiStyles.uiLabel}>\n\t\t\t\t\t{label}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t{description && (\n\t\t\t\t<div id={descriptionId} className={uiStyles.uiDescription}>\n\t\t\t\t\t{description}\n\t\t\t\t</div>\n\t\t\t)}\n\n\t\t\t<RadioGroupContext.Provider value={contextValue}>\n\t\t\t\t<div\n\t\t\t\t\trole=\"radiogroup\"\n\t\t\t\t\taria-labelledby={labelId}\n\t\t\t\t\taria-label={labelId ? undefined : ariaLabel}\n\t\t\t\t\taria-describedby={descriptionId}\n\t\t\t\t\taria-disabled={disabled || undefined}\n\t\t\t\t\tdata-disabled={disabled || undefined}\n\t\t\t\t\tclassName={cn(uiStyles.uiInputControl, styles.radioGroup, noWrap && styles.noWrap, styles[orientation])}>\n\t\t\t\t\t{children}\n\t\t\t\t</div>\n\t\t\t</RadioGroupContext.Provider>\n\t\t</div>\n\t);\n}\n\ninterface OptionProps<T> {\n\tvalue: T;\n\tlabel: ReactNode;\n\tdescription?: ReactNode;\n\tclassName?: string;\n}\n\n/**\n * Опция внутри `RadioGroup`, представляющая одно выбираемое значение. Отрисовывает подпись, описание и состояние выбора.\n */\nexport function Option<T>({ value, label, description, className }: OptionProps<T>) {\n\tconst context = useContext(RadioGroupContext);\n\tconst optionId = useId();\n\tconst registerOption = context?.registerOption;\n\n\tuseLayoutEffect(() => {\n\t\tif (!registerOption) {\n\t\t\treturn;\n\t\t}\n\n\t\treturn registerOption(optionId);\n\t}, [registerOption, optionId]);\n\n\tif (!context) {\n\t\treturn (\n\t\t\t<div className={cn(styles.radioItem, className)}>\n\t\t\t\t<p className=\"textNoWrap\">{label}</p>\n\t\t\t\t{description && <div className=\"fontSizeSm content2\">{description}</div>}\n\t\t\t</div>\n\t\t);\n\t}\n\n\tconst isChecked = Object.is(context.value, value);\n\tconst isDisabled = context.disabled === true;\n\tconst isFallbackTabStop = context.value === undefined && context.firstOptionId === optionId;\n\n\tconst handleChange = () => {\n\t\tif (isDisabled || isChecked) {\n\t\t\treturn;\n\t\t}\n\n\t\tcontext.onChange?.(value);\n\t};\n\n\t// TODO: логика переиспользуемая, надо вынести в хук\n\tconst handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n\t\tif (isDisabled) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (handleKeyboardActivation(event, handleChange)) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst currentTarget = event.currentTarget;\n\t\tconst groupElement = currentTarget.closest<HTMLElement>('[role=\"radiogroup\"]');\n\t\tconst radioItems = Array.from(groupElement?.querySelectorAll<HTMLButtonElement>('[role=\"radio\"]:not([disabled])') ?? []);\n\n\t\tif (!radioItems.length) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst currentIndex = radioItems.indexOf(currentTarget);\n\t\tif (currentIndex === -1) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst nextIndex = getRovingFocusTargetIndex({\n\t\t\tcurrentIndex,\n\t\t\titemCount: radioItems.length,\n\t\t\tkey: event.key,\n\t\t\torientation: context.orientation\n\t\t});\n\n\t\tif (nextIndex === null) {\n\t\t\treturn;\n\t\t}\n\n\t\tevent.preventDefault();\n\t\tradioItems[nextIndex]?.focus();\n\t\tradioItems[nextIndex]?.click();\n\t};\n\n\treturn (\n\t\t<button\n\t\t\tid={`${context.groupId}-option-${optionId}`}\n\t\t\ttype=\"button\"\n\t\t\trole=\"radio\"\n\t\t\taria-checked={isChecked}\n\t\t\tdisabled={isDisabled}\n\t\t\ttabIndex={isChecked || isFallbackTabStop ? 0 : -1}\n\t\t\tclassName={cn(styles.radioItem, isChecked && styles.checked, className)}\n\t\t\tdata-ui=\"radio-option\"\n\t\t\tdata-action=\"select-radio-option\"\n\t\t\tonClick={handleChange}\n\t\t\tonKeyDown={handleKeyDown}>\n\t\t\t<span className={styles.radioItemContent}>\n\t\t\t\t<span className=\"textNoWrap\">{label}</span>\n\t\t\t\t{description && <span className=\"fontSizeSm\">{description}</span>}\n\t\t\t</span>\n\t\t\t{/* <span className={styles.radioItemIcon}>\n\t\t\t\t<CheckCircleIcon style={{ display: \"block\", visibility: isChecked ? \"visible\" : \"hidden\" }} />\n\t\t\t</span> */}\n\t\t</button>\n\t);\n}\n\nRadioGroup.Option = Option;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"radio-group-CW-K1n9c.js","names":[],"sources":["../../src/radio-group/RadioGroup.module.scss","../../src/radio-group/RadioGroup.tsx"],"sourcesContent":[".radioGroup {\n\tdisplay: flex;\n\talign-content: flex-start;\n\tflex-wrap: wrap;\n\t// min-height: var(--control-height);\n\theight: auto;\n\n\t&.noWrap {\n\t\tflex-wrap: nowrap;\n\t}\n\n\t&.horizontal {\n\t\tflex-direction: row;\n\t}\n\n\t&.vertical {\n\t\tflex-direction: column;\n\t\talign-content: stretch;\n\t}\n}\n\n.radioItem {\n\tflex: 1 0 0%;\n\n\tdisplay: flex;\n\talign-items: center;\n\tgap: var(--space-sm);\n\n\tcolor: var(--content-2);\n\t// border: var(--border-width) solid transparent;\n\tborder-radius: var(--radius-xs);\n\tpadding: 0 var(--space-md);\n\tmargin: var(--border-width);\n\t// baseInputControl = --control-height, + borderTop/Bottom + transparentLineTop/Bottom\n\tmin-height: calc(var(--control-height) - calc(var(--border-width) * 4));\n\n\tcursor: pointer;\n\n\t&:hover {\n\t\tcolor: var(--content-1);\n\t\tbackground-color: var(--surface-2);\n\t\t// border-color: var(--border-1);\n\t}\n\n\t&.checked {\n\t\tcolor: var(--brand-on-fill);\n\t\tbackground-color: var(--brand-fill);\n\t\t// border-color: var(--border-0);\n\t}\n\n\t&:disabled {\n\t\topacity: var(--disabled-opacity);\n\t}\n}\n\n.radioItemContent {\n\tflex: 1 0 0%;\n\n\tdisplay: grid;\n\talign-content: center;\n\tgap: var(--space-sm);\n}\n\n// .radioItemIcon {\n// \tflex: 0 0 0%;\n\n// \tsvg {\n// \t\twidth: 1em;\n// \t\theight: 1em;\n// \t}\n// }\n","import React, { createContext, KeyboardEvent, ReactNode, useCallback, useContext, useId, useLayoutEffect, useMemo, useState } from \"react\";\n\nimport { cn, getRovingFocusTargetIndex, handleKeyboardActivation } from \"@ryuzaki13/react-foundation-lib/utils\";\n\nimport uiStyles from \"../ui.module.scss\";\n\nimport styles from \"./RadioGroup.module.scss\";\n\ninterface RadioGroupContextValue {\n\tvalue?: unknown;\n\tonChange?: (value: unknown) => void;\n\tdisabled?: boolean;\n\torientation: \"vertical\" | \"horizontal\";\n\tgroupId: string;\n\tlabelId?: string;\n\tdescriptionId?: string;\n\tfirstOptionId?: string;\n\tregisterOption: (optionId: string) => () => void;\n}\n\nconst RadioGroupContext = createContext<RadioGroupContextValue | null>(null);\n\ninterface RadioGroupProps<T> {\n\tvalue?: T;\n\tonChange?: (value: T) => void;\n\tlabel?: string;\n\tdescription?: string;\n\tdisabled?: boolean;\n\tclassName?: string;\n\tnoWrap?: true;\n\torientation?: \"vertical\" | \"horizontal\";\n\t\"aria-label\"?: string;\n\tchildren: React.ReactNode;\n}\n\n/**\n * Группа радиокнопок с общим состоянием выбранного значения. Обеспечивает единый API выбора и контекст для дочерних опций.\n */\nexport function RadioGroup<T>({\n\tvalue,\n\tonChange,\n\tlabel,\n\tdescription,\n\tdisabled,\n\tclassName,\n\tnoWrap,\n\torientation = \"horizontal\",\n\t\"aria-label\": ariaLabel,\n\tchildren\n}: RadioGroupProps<T>) {\n\tconst groupId = useId();\n\tconst labelId = label ? `${groupId}-label` : undefined;\n\tconst descriptionId = description ? `${groupId}-description` : undefined;\n\tconst [registeredOptionIds, setRegisteredOptionIds] = useState<string[]>([]);\n\tconst handleChange = useCallback((nextValue: unknown) => onChange?.(nextValue as T), [onChange]);\n\n\t/**\n\t * Хранит порядок опций внутри группы, чтобы при отсутствии выбранного значения\n\t * оставлять ровно один tab stop на первой доступной радиокнопке.\n\t */\n\tconst registerOption = useCallback((optionId: string) => {\n\t\tsetRegisteredOptionIds((currentIds) => (currentIds.includes(optionId) ? currentIds : [...currentIds, optionId]));\n\n\t\treturn () => {\n\t\t\tsetRegisteredOptionIds((currentIds) => currentIds.filter((currentId) => currentId !== optionId));\n\t\t};\n\t}, []);\n\n\tconst contextValue = useMemo(\n\t\t() => ({\n\t\t\tvalue,\n\t\t\tonChange: handleChange,\n\t\t\tdisabled,\n\t\t\torientation,\n\t\t\tgroupId,\n\t\t\tlabelId,\n\t\t\tdescriptionId,\n\t\t\tfirstOptionId: registeredOptionIds[0],\n\t\t\tregisterOption\n\t\t}),\n\t\t[descriptionId, disabled, groupId, handleChange, labelId, orientation, registerOption, registeredOptionIds, value]\n\t);\n\n\treturn (\n\t\t<div className={cn(uiStyles.uiElement, disabled && uiStyles.disabled, className)}>\n\t\t\t{label && (\n\t\t\t\t<div id={labelId} className={uiStyles.uiLabel}>\n\t\t\t\t\t{label}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t{description && (\n\t\t\t\t<div id={descriptionId} className={uiStyles.uiDescription}>\n\t\t\t\t\t{description}\n\t\t\t\t</div>\n\t\t\t)}\n\n\t\t\t<RadioGroupContext.Provider value={contextValue}>\n\t\t\t\t<div\n\t\t\t\t\trole=\"radiogroup\"\n\t\t\t\t\taria-labelledby={labelId}\n\t\t\t\t\taria-label={labelId ? undefined : ariaLabel}\n\t\t\t\t\taria-describedby={descriptionId}\n\t\t\t\t\taria-disabled={disabled || undefined}\n\t\t\t\t\tdata-disabled={disabled || undefined}\n\t\t\t\t\tclassName={cn(uiStyles.uiInputControl, styles.radioGroup, noWrap && styles.noWrap, styles[orientation])}>\n\t\t\t\t\t{children}\n\t\t\t\t</div>\n\t\t\t</RadioGroupContext.Provider>\n\t\t</div>\n\t);\n}\n\ninterface OptionProps<T> {\n\tvalue: T;\n\tlabel: ReactNode;\n\tdescription?: ReactNode;\n\tclassName?: string;\n}\n\n/**\n * Опция внутри `RadioGroup`, представляющая одно выбираемое значение. Отрисовывает подпись, описание и состояние выбора.\n */\nexport function Option<T>({ value, label, description, className }: OptionProps<T>) {\n\tconst context = useContext(RadioGroupContext);\n\tconst optionId = useId();\n\tconst registerOption = context?.registerOption;\n\n\tuseLayoutEffect(() => {\n\t\tif (!registerOption) {\n\t\t\treturn;\n\t\t}\n\n\t\treturn registerOption(optionId);\n\t}, [registerOption, optionId]);\n\n\tif (!context) {\n\t\treturn (\n\t\t\t<div className={cn(styles.radioItem, className)}>\n\t\t\t\t<p className=\"textNoWrap\">{label}</p>\n\t\t\t\t{description && <div className=\"fontSizeSm content2\">{description}</div>}\n\t\t\t</div>\n\t\t);\n\t}\n\n\tconst isChecked = Object.is(context.value, value);\n\tconst isDisabled = context.disabled === true;\n\tconst isFallbackTabStop = context.value === undefined && context.firstOptionId === optionId;\n\n\tconst handleChange = () => {\n\t\tif (isDisabled || isChecked) {\n\t\t\treturn;\n\t\t}\n\n\t\tcontext.onChange?.(value);\n\t};\n\n\t// TODO: логика переиспользуемая, надо вынести в хук\n\tconst handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n\t\tif (isDisabled) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (handleKeyboardActivation(event, handleChange)) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst currentTarget = event.currentTarget;\n\t\tconst groupElement = currentTarget.closest<HTMLElement>('[role=\"radiogroup\"]');\n\t\tconst radioItems = Array.from(groupElement?.querySelectorAll<HTMLButtonElement>('[role=\"radio\"]:not([disabled])') ?? []);\n\n\t\tif (!radioItems.length) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst currentIndex = radioItems.indexOf(currentTarget);\n\t\tif (currentIndex === -1) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst nextIndex = getRovingFocusTargetIndex({\n\t\t\tcurrentIndex,\n\t\t\titemCount: radioItems.length,\n\t\t\tkey: event.key,\n\t\t\torientation: context.orientation\n\t\t});\n\n\t\tif (nextIndex === null) {\n\t\t\treturn;\n\t\t}\n\n\t\tevent.preventDefault();\n\t\tradioItems[nextIndex]?.focus();\n\t\tradioItems[nextIndex]?.click();\n\t};\n\n\treturn (\n\t\t<button\n\t\t\tid={`${context.groupId}-option-${optionId}`}\n\t\t\ttype=\"button\"\n\t\t\trole=\"radio\"\n\t\t\taria-checked={isChecked}\n\t\t\tdisabled={isDisabled}\n\t\t\ttabIndex={isChecked || isFallbackTabStop ? 0 : -1}\n\t\t\tclassName={cn(styles.radioItem, isChecked && styles.checked, className)}\n\t\t\tdata-ui=\"radio-option\"\n\t\t\tdata-action=\"select-radio-option\"\n\t\t\tonClick={handleChange}\n\t\t\tonKeyDown={handleKeyDown}>\n\t\t\t<span className={styles.radioItemContent}>\n\t\t\t\t<span className=\"textNoWrap\">{label}</span>\n\t\t\t\t{description && <span className=\"fontSizeSm\">{description}</span>}\n\t\t\t</span>\n\t\t\t{/* <span className={styles.radioItemIcon}>\n\t\t\t\t<CheckCircleIcon style={{ display: \"block\", visibility: isChecked ? \"visible\" : \"hidden\" }} />\n\t\t\t</span> */}\n\t\t</button>\n\t);\n}\n\nRadioGroup.Option = Option;\n"],"mappings":"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"}
|