mimir-ui-kit 1.37.4 → 1.37.5
Sign up to get free protection for your applications and to get access to all the features.
@@ -1,6 +1,10 @@
|
|
1
1
|
import { ReactNode } from 'react';
|
2
2
|
import { EAccordionButtonStyle, EAccordionButtonType, EAccordionIconType, EAccordionSize } from './constants';
|
3
3
|
|
4
|
+
type TChildrenProps = {
|
5
|
+
open?: boolean;
|
6
|
+
close?: () => void;
|
7
|
+
};
|
4
8
|
export type TProps = {
|
5
9
|
/** Заголовок аккордеона */
|
6
10
|
title: string;
|
@@ -28,9 +32,12 @@ export type TProps = {
|
|
28
32
|
onlyOpenSubtitleNode?: ReactNode;
|
29
33
|
/** Дополнительный класс для контейнера subtitle */
|
30
34
|
classNameSubtitleContainer?: string;
|
35
|
+
/** Дополнительный класс для аккордиона с типом link */
|
36
|
+
linkClassName?: string;
|
31
37
|
/** Флаг, указывающий, отключен ли аккордеон. */
|
32
38
|
disabled?: boolean;
|
39
|
+
/** Контент аккордеона. */
|
40
|
+
children?: ReactNode | ((props: TChildrenProps) => ReactNode);
|
33
41
|
};
|
34
|
-
export declare const Accordion: import('react').ForwardRefExoticComponent<TProps &
|
35
|
-
|
36
|
-
} & import('react').RefAttributes<HTMLElement>>;
|
42
|
+
export declare const Accordion: import('react').ForwardRefExoticComponent<TProps & import('react').RefAttributes<HTMLElement>>;
|
43
|
+
export {};
|
@@ -1,28 +1,28 @@
|
|
1
|
-
import { jsxs as
|
2
|
-
import { c as
|
3
|
-
import
|
1
|
+
import { jsxs as A, Fragment as L, jsx as b } from "react/jsx-runtime";
|
2
|
+
import { c as $ } from "../../index-DIxK0V-G.js";
|
3
|
+
import v, { createContext as M, useRef as oe, Fragment as ne, useReducer as de, useMemo as O, useId as re, useEffect as le, useState as se, useContext as K, forwardRef as pe } from "react";
|
4
4
|
import { AccordionItem as me } from "./AccordionItem/AccordionItem.js";
|
5
|
-
import { EAccordionButtonType as
|
5
|
+
import { EAccordionButtonType as T, EAccordionSize as x, EAccordionLinkIconSize as G, EAccordionButtonStyle as fe, EAccordionIconType as J, EAccordionButtonIconSize as Y } from "./constants.js";
|
6
6
|
import { useMediaQuery as _e } from "../../hooks/useMediaQuery/useMediaQuery.js";
|
7
7
|
import { EMediaQuery as Ee } from "../../hooks/useMediaQuery/constants.js";
|
8
|
-
import { Icon as
|
9
|
-
import { Link as
|
10
|
-
import { M as Z, W as
|
11
|
-
import { w as
|
8
|
+
import { Icon as Se } from "../../icons/Icon.js";
|
9
|
+
import { Link as ke } from "../AnchorLink/Link.js";
|
10
|
+
import { M as Z, W as U, y as q, T as Ie, o as P, a as j, H as W, I as ae, $ as be, b as ve, D as ee, u as ye, c as w } from "../../keyboard-B0lm_zyn.js";
|
11
|
+
import { w as he } from "../../use-active-press-86hajhdd.js";
|
12
12
|
import { e as De } from "../../use-resolve-button-type-DhFdPxnv.js";
|
13
|
-
import { c as $e, i as
|
13
|
+
import { c as $e, i as R, u as Pe, R as ge, H as Te, s as we } from "../../open-closed-CdldUPoq.js";
|
14
14
|
import { r as Ne } from "../../bugs-diTMAGNw.js";
|
15
|
-
import '../../assets/Accordion.css';let
|
15
|
+
import '../../assets/Accordion.css';let Be = M(() => {
|
16
16
|
});
|
17
|
-
function
|
18
|
-
return
|
17
|
+
function Ce({ value: e, children: t }) {
|
18
|
+
return v.createElement(Be.Provider, { value: e }, t);
|
19
19
|
}
|
20
20
|
var te;
|
21
|
-
let Ae = (te =
|
21
|
+
let Ae = (te = v.startTransition) != null ? te : function(e) {
|
22
22
|
e();
|
23
23
|
};
|
24
24
|
var xe = ((e) => (e[e.Open = 0] = "Open", e[e.Closed = 1] = "Closed", e))(xe || {}), Oe = ((e) => (e[e.ToggleDisclosure = 0] = "ToggleDisclosure", e[e.CloseDisclosure = 1] = "CloseDisclosure", e[e.SetButtonId = 2] = "SetButtonId", e[e.SetPanelId = 3] = "SetPanelId", e[e.SetButtonElement = 4] = "SetButtonElement", e[e.SetPanelElement = 5] = "SetPanelElement", e))(Oe || {});
|
25
|
-
let Re = { 0: (e) => ({ ...e, disclosureState:
|
25
|
+
let Re = { 0: (e) => ({ ...e, disclosureState: j(e.disclosureState, { 0: 1, 1: 0 }) }), 1: (e) => e.disclosureState === 1 ? e : { ...e, disclosureState: 1 }, 2(e, t) {
|
26
26
|
return e.buttonId === t.buttonId ? e : { ...e, buttonId: t.buttonId };
|
27
27
|
}, 3(e, t) {
|
28
28
|
return e.panelId === t.panelId ? e : { ...e, panelId: t.panelId };
|
@@ -30,98 +30,98 @@ let Re = { 0: (e) => ({ ...e, disclosureState: q(e.disclosureState, { 0: 1, 1: 0
|
|
30
30
|
return e.buttonElement === t.element ? e : { ...e, buttonElement: t.element };
|
31
31
|
}, 5(e, t) {
|
32
32
|
return e.panelElement === t.element ? e : { ...e, panelElement: t.element };
|
33
|
-
} },
|
34
|
-
|
35
|
-
function
|
36
|
-
let t =
|
33
|
+
} }, Q = M(null);
|
34
|
+
Q.displayName = "DisclosureContext";
|
35
|
+
function V(e) {
|
36
|
+
let t = K(Q);
|
37
37
|
if (t === null) {
|
38
|
-
let
|
39
|
-
throw Error.captureStackTrace && Error.captureStackTrace(
|
38
|
+
let i = new Error(`<${e} /> is missing a parent <Disclosure /> component.`);
|
39
|
+
throw Error.captureStackTrace && Error.captureStackTrace(i, V), i;
|
40
40
|
}
|
41
41
|
return t;
|
42
42
|
}
|
43
|
-
let
|
44
|
-
|
43
|
+
let z = M(null);
|
44
|
+
z.displayName = "DisclosureAPIContext";
|
45
45
|
function ce(e) {
|
46
|
-
let t =
|
46
|
+
let t = K(z);
|
47
47
|
if (t === null) {
|
48
|
-
let
|
49
|
-
throw Error.captureStackTrace && Error.captureStackTrace(
|
48
|
+
let i = new Error(`<${e} /> is missing a parent <Disclosure /> component.`);
|
49
|
+
throw Error.captureStackTrace && Error.captureStackTrace(i, ce), i;
|
50
50
|
}
|
51
51
|
return t;
|
52
52
|
}
|
53
|
-
let
|
54
|
-
|
53
|
+
let X = M(null);
|
54
|
+
X.displayName = "DisclosurePanelContext";
|
55
55
|
function Me() {
|
56
|
-
return
|
56
|
+
return K(X);
|
57
57
|
}
|
58
58
|
function Fe(e, t) {
|
59
|
-
return
|
59
|
+
return j(t.type, Re, e, t);
|
60
60
|
}
|
61
61
|
let He = ne;
|
62
62
|
function Le(e, t) {
|
63
|
-
let { defaultOpen:
|
64
|
-
|
65
|
-
}, e.as === void 0 || e.as === ne)),
|
66
|
-
|
67
|
-
let
|
68
|
-
if (!
|
69
|
-
let
|
70
|
-
|
71
|
-
}),
|
72
|
-
return
|
63
|
+
let { defaultOpen: i = !1, ...d } = e, s = oe(null), a = q(t, Ie((c) => {
|
64
|
+
s.current = c;
|
65
|
+
}, e.as === void 0 || e.as === ne)), p = de(Fe, { disclosureState: i ? 0 : 1, buttonElement: null, panelElement: null, buttonId: null, panelId: null }), [{ disclosureState: o, buttonId: r }, S] = p, l = P((c) => {
|
66
|
+
S({ type: 1 });
|
67
|
+
let f = ye(s);
|
68
|
+
if (!f || !r) return;
|
69
|
+
let _ = c ? c instanceof HTMLElement ? c : c.current instanceof HTMLElement ? c.current : f.getElementById(r) : f.getElementById(r);
|
70
|
+
_ == null || _.focus();
|
71
|
+
}), y = O(() => ({ close: l }), [l]), k = O(() => ({ open: o === 0, close: l }), [o, l]), m = { ref: a };
|
72
|
+
return v.createElement(Q.Provider, { value: p }, v.createElement(z.Provider, { value: y }, v.createElement(Ce, { value: l }, v.createElement($e, { value: j(o, { 0: R.Open, 1: R.Closed }) }, W({ ourProps: m, theirProps: d, slot: k, defaultTag: He, name: "Disclosure" })))));
|
73
73
|
}
|
74
74
|
let Ke = "button";
|
75
75
|
function Ue(e, t) {
|
76
|
-
let
|
77
|
-
if (!l) return r({ type: 4, element:
|
78
|
-
})),
|
76
|
+
let i = re(), { id: d = `headlessui-disclosure-button-${i}`, disabled: s = !1, autoFocus: a = !1, ...p } = e, [o, r] = V("Disclosure.Button"), S = Me(), l = S === null ? !1 : S === o.panelId, y = oe(null), k = q(y, t, P((n) => {
|
77
|
+
if (!l) return r({ type: 4, element: n });
|
78
|
+
})), m = ae();
|
79
79
|
le(() => {
|
80
80
|
if (!l) return r({ type: 2, buttonId: d }), () => {
|
81
81
|
r({ type: 2, buttonId: null });
|
82
82
|
};
|
83
83
|
}, [d, r, l]);
|
84
|
-
let c =
|
85
|
-
var
|
84
|
+
let c = P((n) => {
|
85
|
+
var E;
|
86
86
|
if (l) {
|
87
87
|
if (o.disclosureState === 1) return;
|
88
|
-
switch (
|
89
|
-
case
|
90
|
-
case
|
91
|
-
|
88
|
+
switch (n.key) {
|
89
|
+
case w.Space:
|
90
|
+
case w.Enter:
|
91
|
+
n.preventDefault(), n.stopPropagation(), r({ type: 0 }), (E = o.buttonElement) == null || E.focus();
|
92
92
|
break;
|
93
93
|
}
|
94
|
-
} else switch (
|
95
|
-
case
|
96
|
-
case
|
97
|
-
|
94
|
+
} else switch (n.key) {
|
95
|
+
case w.Space:
|
96
|
+
case w.Enter:
|
97
|
+
n.preventDefault(), n.stopPropagation(), r({ type: 0 });
|
98
98
|
break;
|
99
99
|
}
|
100
|
-
}),
|
101
|
-
switch (
|
102
|
-
case
|
103
|
-
|
100
|
+
}), f = P((n) => {
|
101
|
+
switch (n.key) {
|
102
|
+
case w.Space:
|
103
|
+
n.preventDefault();
|
104
104
|
break;
|
105
105
|
}
|
106
|
-
}),
|
107
|
-
var
|
108
|
-
Ne(
|
109
|
-
}), { isFocusVisible: h, focusProps:
|
110
|
-
return
|
106
|
+
}), _ = P((n) => {
|
107
|
+
var E;
|
108
|
+
Ne(n.currentTarget) || s || (l ? (r({ type: 0 }), (E = o.buttonElement) == null || E.focus()) : r({ type: 0 }));
|
109
|
+
}), { isFocusVisible: h, focusProps: D } = be({ autoFocus: a }), { isHovered: N, hoverProps: I } = ve({ isDisabled: s }), { pressed: g, pressProps: B } = he({ disabled: s }), F = O(() => ({ open: o.disclosureState === 0, hover: N, active: g, disabled: s, focus: h, autofocus: a }), [o, N, g, h, s, a]), C = De(e, o.buttonElement), H = l ? ee({ ref: k, type: C, disabled: s || void 0, autoFocus: a, onKeyDown: c, onClick: _ }, D, I, B) : ee({ ref: k, id: d, type: C, "aria-expanded": o.disclosureState === 0, "aria-controls": o.panelElement ? o.panelId : void 0, disabled: s || void 0, autoFocus: a, onKeyDown: c, onKeyUp: f, onClick: _ }, D, I, B);
|
110
|
+
return W({ mergeRefs: m, ourProps: H, theirProps: p, slot: F, defaultTag: Ke, name: "Disclosure.Button" });
|
111
111
|
}
|
112
112
|
let qe = "div", je = Z.RenderStrategy | Z.Static;
|
113
113
|
function We(e, t) {
|
114
|
-
let
|
115
|
-
Ae(() => o({ type: 5, element:
|
116
|
-
}),
|
114
|
+
let i = re(), { id: d = `headlessui-disclosure-panel-${i}`, transition: s = !1, ...a } = e, [p, o] = V("Disclosure.Panel"), { close: r } = ce("Disclosure.Panel"), S = ae(), [l, y] = se(null), k = q(t, P((D) => {
|
115
|
+
Ae(() => o({ type: 5, element: D }));
|
116
|
+
}), y);
|
117
117
|
le(() => (o({ type: 3, panelId: d }), () => {
|
118
118
|
o({ type: 3, panelId: null });
|
119
119
|
}), [d, o]);
|
120
|
-
let
|
121
|
-
return
|
120
|
+
let m = Pe(), [c, f] = ge(s, l, m !== null ? (m & R.Open) === R.Open : p.disclosureState === 0), _ = O(() => ({ open: p.disclosureState === 0, close: r }), [p.disclosureState, r]), h = { ref: k, id: d, ...Te(f) };
|
121
|
+
return v.createElement(we, null, v.createElement(X.Provider, { value: p.panelId }, W({ mergeRefs: S, ourProps: h, theirProps: a, slot: _, defaultTag: qe, features: je, visible: c, name: "Disclosure.Panel" })));
|
122
122
|
}
|
123
|
-
let Qe =
|
124
|
-
const ze = "_accordion_1k9to_2", Xe = "_header_1k9to_13", Ge = "_disabled_1k9to_25", Je = "_title_1k9to_29", Ye = "_icon_1k9to_36", Ze = "_circle_1k9to_46", et = "_square_1k9to_53", tt = "_panel_1k9to_73", ot = "_open_1k9to_80", nt = "_m_1k9to_106", rt = "_s_1k9to_53",
|
123
|
+
let Qe = U(Le), ie = U(Ue), ue = U(We), Ve = Object.assign(Qe, { Button: ie, Panel: ue });
|
124
|
+
const ze = "_accordion_1k9to_2", Xe = "_header_1k9to_13", Ge = "_disabled_1k9to_25", Je = "_title_1k9to_29", Ye = "_icon_1k9to_36", Ze = "_circle_1k9to_46", et = "_square_1k9to_53", tt = "_panel_1k9to_73", ot = "_open_1k9to_80", nt = "_m_1k9to_106", rt = "_s_1k9to_53", u = {
|
125
125
|
accordion: ze,
|
126
126
|
"is-link": "_is-link_1k9to_9",
|
127
127
|
header: Xe,
|
@@ -142,67 +142,68 @@ const ze = "_accordion_1k9to_2", Xe = "_header_1k9to_13", Ge = "_disabled_1k9to_
|
|
142
142
|
({
|
143
143
|
title: e,
|
144
144
|
disabled: t,
|
145
|
-
buttonType:
|
145
|
+
buttonType: i = T.BUTTON,
|
146
146
|
children: d,
|
147
|
-
|
147
|
+
linkClassName: s,
|
148
|
+
size: a = x.M,
|
148
149
|
titleUppercase: p,
|
149
|
-
buttonStyle:
|
150
|
-
iconType:
|
151
|
-
classNameTitle:
|
152
|
-
classNameContent:
|
153
|
-
classNameAccordion:
|
154
|
-
classNameIconButton:
|
155
|
-
subtitleNode:
|
156
|
-
onlyOpenSubtitleNode:
|
157
|
-
classNameSubtitleContainer:
|
158
|
-
},
|
159
|
-
const [
|
160
|
-
[
|
161
|
-
},
|
162
|
-
t ||
|
163
|
-
},
|
150
|
+
buttonStyle: o = fe.CIRCLE,
|
151
|
+
iconType: r = J.ARROW,
|
152
|
+
classNameTitle: S,
|
153
|
+
classNameContent: l,
|
154
|
+
classNameAccordion: y,
|
155
|
+
classNameIconButton: k,
|
156
|
+
subtitleNode: m,
|
157
|
+
onlyOpenSubtitleNode: c,
|
158
|
+
classNameSubtitleContainer: f
|
159
|
+
}, _) => {
|
160
|
+
const [h, D] = se(!1), N = _e(Ee.XS1), I = i === T.LINK, g = {
|
161
|
+
[u["is-link"]]: I
|
162
|
+
}, B = () => {
|
163
|
+
t || D((n) => !n);
|
164
|
+
}, F = a === x.S ? G.S : G.M, C = {
|
164
165
|
variant: "anchor",
|
165
|
-
size:
|
166
|
+
size: N ? "s" : "l",
|
166
167
|
rightIcon: {
|
167
|
-
iconName:
|
168
|
-
className:
|
169
|
-
[
|
168
|
+
iconName: F,
|
169
|
+
className: $({
|
170
|
+
[u["link-open"]]: h
|
170
171
|
})
|
171
172
|
}
|
172
|
-
},
|
173
|
-
const
|
174
|
-
switch (
|
175
|
-
case
|
173
|
+
}, H = (n) => {
|
174
|
+
const E = () => r === J.DROPDOWN ? a === x.S ? "DropdownArrowBottom16px" : "DropdownArrowDown24px" : a === x.S ? Y.S : Y.M;
|
175
|
+
switch (i) {
|
176
|
+
case T.LINK:
|
176
177
|
return e;
|
177
|
-
case
|
178
|
-
return /* @__PURE__ */
|
179
|
-
/* @__PURE__ */
|
178
|
+
case T.BUTTON:
|
179
|
+
return /* @__PURE__ */ A(L, { children: [
|
180
|
+
/* @__PURE__ */ b(
|
180
181
|
"span",
|
181
182
|
{
|
182
|
-
className:
|
183
|
-
|
184
|
-
|
185
|
-
p &&
|
183
|
+
className: $(
|
184
|
+
u.title,
|
185
|
+
S,
|
186
|
+
p && u["title-uppercase"]
|
186
187
|
),
|
187
188
|
children: e
|
188
189
|
}
|
189
190
|
),
|
190
|
-
/* @__PURE__ */
|
191
|
+
/* @__PURE__ */ b(
|
191
192
|
"div",
|
192
193
|
{
|
193
|
-
className:
|
194
|
-
|
195
|
-
|
196
|
-
t &&
|
197
|
-
|
198
|
-
|
194
|
+
className: $(
|
195
|
+
u["icon-container"],
|
196
|
+
n && u.open,
|
197
|
+
t && u.disabled,
|
198
|
+
u[o],
|
199
|
+
k
|
199
200
|
),
|
200
201
|
"data-testid": "accordion-icon-container",
|
201
|
-
children: /* @__PURE__ */
|
202
|
-
|
202
|
+
children: /* @__PURE__ */ b(
|
203
|
+
Se,
|
203
204
|
{
|
204
|
-
iconName:
|
205
|
-
className:
|
205
|
+
iconName: E(),
|
206
|
+
className: u.icon,
|
206
207
|
"data-testid": "accordion-icon"
|
207
208
|
}
|
208
209
|
)
|
@@ -213,49 +214,53 @@ const ze = "_accordion_1k9to_2", Xe = "_header_1k9to_13", Ge = "_disabled_1k9to_
|
|
213
214
|
return null;
|
214
215
|
}
|
215
216
|
};
|
216
|
-
return /* @__PURE__ */
|
217
|
-
/* @__PURE__ */
|
217
|
+
return /* @__PURE__ */ A(L, { children: [
|
218
|
+
/* @__PURE__ */ b(
|
218
219
|
"div",
|
219
220
|
{
|
220
|
-
className:
|
221
|
-
|
222
|
-
|
223
|
-
|
224
|
-
|
221
|
+
className: $(
|
222
|
+
u.accordion,
|
223
|
+
u[a],
|
224
|
+
g,
|
225
|
+
y
|
225
226
|
),
|
226
|
-
children: /* @__PURE__ */
|
227
|
-
/* @__PURE__ */
|
227
|
+
children: /* @__PURE__ */ b(Ve, { ref: _, children: ({ open: n, close: E }) => /* @__PURE__ */ A(L, { children: [
|
228
|
+
/* @__PURE__ */ b(
|
228
229
|
ie,
|
229
230
|
{
|
230
231
|
disabled: t,
|
231
|
-
as:
|
232
|
-
onClick:
|
233
|
-
className:
|
234
|
-
[
|
235
|
-
[
|
232
|
+
as: I ? ke : T.BUTTON,
|
233
|
+
onClick: B,
|
234
|
+
className: $({
|
235
|
+
[u.header]: !I,
|
236
|
+
[u.disabled]: t,
|
237
|
+
[s ?? ""]: I && s
|
236
238
|
}),
|
237
|
-
...
|
238
|
-
children:
|
239
|
+
...I ? C : {},
|
240
|
+
children: H(n)
|
239
241
|
}
|
240
242
|
),
|
241
|
-
|
243
|
+
n && /* @__PURE__ */ b(
|
242
244
|
ue,
|
243
245
|
{
|
244
246
|
"data-testid": "accordion-panel",
|
245
|
-
className:
|
246
|
-
|
247
|
-
|
248
|
-
|
247
|
+
className: $(
|
248
|
+
u.panel,
|
249
|
+
l,
|
250
|
+
g
|
249
251
|
),
|
250
|
-
children: /* @__PURE__ */
|
252
|
+
children: /* @__PURE__ */ b(me, { size: a, children: typeof d == "function" ? d({
|
253
|
+
open: n,
|
254
|
+
close: E
|
255
|
+
}) : d })
|
251
256
|
}
|
252
257
|
)
|
253
|
-
] })
|
258
|
+
] }) })
|
254
259
|
}
|
255
260
|
),
|
256
|
-
(
|
257
|
-
|
258
|
-
|
261
|
+
(m || c) && /* @__PURE__ */ A("div", { className: f, children: [
|
262
|
+
m,
|
263
|
+
h && c
|
259
264
|
] })
|
260
265
|
] });
|
261
266
|
}
|