@telefonica/mistica 14.24.1 → 14.26.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/css/mistica.css +1 -1
- package/dist/accordion.css-mistica.js +41 -0
- package/dist/accordion.css.d.ts +12 -0
- package/dist/accordion.css.ts.vanilla.css-mistica.js +11 -0
- package/dist/accordion.d.ts +47 -0
- package/dist/accordion.js +350 -0
- package/dist/boxed.d.ts +1 -0
- package/dist/boxed.js +17 -16
- package/dist/card.js +345 -345
- package/dist/carousel.js +58 -52
- package/dist/checkbox.css.d.ts +1 -1
- package/dist/checkbox.d.ts +3 -1
- package/dist/checkbox.js +23 -22
- package/dist/community/blocks.js +3 -2
- package/dist/form-context.d.ts +9 -9
- package/dist/generated/mistica-icons/icons-keywords.d.ts +4 -0
- package/dist/icons/icon-chevron.d.ts +1 -0
- package/dist/icons/icon-chevron.js +21 -18
- package/dist/index.d.ts +5 -2
- package/dist/index.js +34 -4
- package/dist/integer-field.d.ts +5 -1
- package/dist/integer-field.js +12 -11
- package/dist/list.d.ts +8 -0
- package/dist/list.js +3 -0
- package/dist/menu.css-mistica.js +30 -6
- package/dist/menu.css.d.ts +14 -2
- package/dist/menu.d.ts +25 -3
- package/dist/menu.js +264 -84
- package/dist/overlay.js +11 -52
- package/dist/overscroll-color-context.js +23 -11
- package/dist/package-version.js +1 -1
- package/dist/pin-field.css-mistica.js +37 -0
- package/dist/pin-field.css.d.ts +7 -0
- package/dist/pin-field.css.ts.vanilla.css-mistica.js +11 -0
- package/dist/pin-field.d.ts +25 -0
- package/dist/pin-field.js +269 -0
- package/dist/progress-bar.css-mistica.js +7 -4
- package/dist/progress-bar.css.d.ts +1 -0
- package/dist/progress-bar.d.ts +12 -3
- package/dist/progress-bar.js +109 -13
- package/dist/skins/telefonica.js +2 -2
- package/dist/skins/vivo-new.js +1 -1
- package/dist/slider.css-mistica.js +42 -0
- package/dist/slider.css.d.ts +9 -0
- package/dist/slider.css.ts.vanilla.css-mistica.js +11 -0
- package/dist/slider.d.ts +14 -0
- package/dist/slider.js +170 -0
- package/dist/stepper.js +34 -27
- package/dist/text-field-base.css.d.ts +2 -0
- package/dist/text-field-base.d.ts +1 -0
- package/dist/text-field-components.js +28 -26
- package/dist/text-field.d.ts +1 -0
- package/dist/theme.d.ts +3 -0
- package/dist/theme.js +24 -12
- package/dist/tooltip.css-mistica.js +10 -7
- package/dist/tooltip.css.d.ts +1 -0
- package/dist/tooltip.d.ts +2 -1
- package/dist/tooltip.js +37 -36
- package/dist/touchable.js +5 -4
- package/dist/utils/locale.d.ts +1 -1
- package/dist/video.js +8 -9
- package/dist-es/accordion.css-mistica.js +9 -0
- package/dist-es/accordion.css.ts.vanilla.css-mistica.js +2 -0
- package/dist-es/accordion.js +280 -0
- package/dist-es/boxed.js +25 -24
- package/dist-es/card.js +475 -475
- package/dist-es/carousel.js +95 -89
- package/dist-es/checkbox.js +42 -41
- package/dist-es/community/blocks.js +2 -1
- package/dist-es/icons/icon-chevron.js +25 -22
- package/dist-es/index.js +1768 -1765
- package/dist-es/integer-field.js +14 -13
- package/dist-es/list.js +9 -9
- package/dist-es/menu.css-mistica.js +10 -4
- package/dist-es/menu.js +262 -93
- package/dist-es/overlay.js +18 -20
- package/dist-es/overscroll-color-context.js +30 -18
- package/dist-es/package-version.js +1 -1
- package/dist-es/pin-field.css-mistica.js +5 -0
- package/dist-es/pin-field.css.ts.vanilla.css-mistica.js +2 -0
- package/dist-es/pin-field.js +217 -0
- package/dist-es/progress-bar.css-mistica.js +2 -2
- package/dist-es/progress-bar.js +67 -18
- package/dist-es/skins/telefonica.js +2 -2
- package/dist-es/skins/vivo-new.js +1 -1
- package/dist-es/slider.css-mistica.js +10 -0
- package/dist-es/slider.css.ts.vanilla.css-mistica.js +2 -0
- package/dist-es/slider.js +117 -0
- package/dist-es/stepper.js +61 -54
- package/dist-es/style.css +1 -1
- package/dist-es/text-field-components.js +38 -36
- package/dist-es/theme.js +24 -12
- package/dist-es/tooltip.css-mistica.js +3 -3
- package/dist-es/tooltip.js +65 -64
- package/dist-es/touchable.js +9 -8
- package/dist-es/video.js +16 -17
- package/package.json +1 -1
package/dist-es/integer-field.js
CHANGED
|
@@ -77,30 +77,31 @@ function _object_without_properties_loose(source, excluded) {
|
|
|
77
77
|
}
|
|
78
78
|
return target;
|
|
79
79
|
}
|
|
80
|
-
import { jsx as
|
|
80
|
+
import { jsx as d } from "react/jsx-runtime";
|
|
81
81
|
import { useFieldProps as x } from "./form-context.js";
|
|
82
82
|
import { useTheme as F } from "./hooks.js";
|
|
83
83
|
import { TextFieldBaseAutosuggest as v } from "./text-field-base.js";
|
|
84
84
|
const T = (_param)=>{
|
|
85
|
-
var { inputRef: u , value: r , defaultValue: n } = _param,
|
|
85
|
+
var { inputRef: u , value: r , defaultValue: n , type: i = "text" } = _param, o = _object_without_properties(_param, [
|
|
86
86
|
"inputRef",
|
|
87
87
|
"value",
|
|
88
|
-
"defaultValue"
|
|
88
|
+
"defaultValue",
|
|
89
|
+
"type"
|
|
89
90
|
]);
|
|
90
91
|
const t = (e)=>String(e !== null && e !== void 0 ? e : "").replace(/[^\d]/g, "");
|
|
91
|
-
return /* @__PURE__ */
|
|
92
|
+
return /* @__PURE__ */ d("input", _object_spread_props(_object_spread({}, o), {
|
|
92
93
|
inputMode: "numeric",
|
|
93
94
|
pattern: "[0-9]*",
|
|
94
95
|
onInput: (e)=>{
|
|
95
96
|
e.currentTarget.value = t(e.currentTarget.value);
|
|
96
97
|
},
|
|
97
98
|
ref: u,
|
|
98
|
-
type:
|
|
99
|
+
type: i,
|
|
99
100
|
value: r === void 0 ? void 0 : t(r),
|
|
100
101
|
defaultValue: n === void 0 ? void 0 : t(n)
|
|
101
102
|
}));
|
|
102
103
|
}, h = (_param)=>{
|
|
103
|
-
var { disabled: u , error: r , helperText: n , name: i , optional:
|
|
104
|
+
var { disabled: u , error: r , helperText: n , name: i , optional: o , validate: t , onChange: c , onChangeValue: e , onBlur: m , value: p , defaultValue: a } = _param, l = _object_without_properties(_param, [
|
|
104
105
|
"disabled",
|
|
105
106
|
"error",
|
|
106
107
|
"helperText",
|
|
@@ -115,19 +116,19 @@ const T = (_param)=>{
|
|
|
115
116
|
]);
|
|
116
117
|
const { texts: f } = F(), g = x({
|
|
117
118
|
name: i,
|
|
118
|
-
value:
|
|
119
|
+
value: p,
|
|
119
120
|
defaultValue: a,
|
|
120
121
|
processValue: (s)=>s.trim(),
|
|
121
122
|
helperText: n,
|
|
122
|
-
optional:
|
|
123
|
+
optional: o,
|
|
123
124
|
error: r,
|
|
124
125
|
disabled: u,
|
|
125
|
-
onBlur:
|
|
126
|
-
validate: (s, I)=>s ?
|
|
127
|
-
onChange:
|
|
128
|
-
onChangeValue:
|
|
126
|
+
onBlur: m,
|
|
127
|
+
validate: (s, I)=>s ? t == null ? void 0 : t(s, I) : o ? "" : f.formFieldErrorIsMandatory,
|
|
128
|
+
onChange: c,
|
|
129
|
+
onChangeValue: e
|
|
129
130
|
});
|
|
130
|
-
return /* @__PURE__ */
|
|
131
|
+
return /* @__PURE__ */ d(v, _object_spread_props(_object_spread({}, l, g), {
|
|
131
132
|
inputComponent: T
|
|
132
133
|
}));
|
|
133
134
|
}, C = h;
|
package/dist-es/list.js
CHANGED
|
@@ -94,7 +94,7 @@ import se from "./checkbox.js";
|
|
|
94
94
|
import { Boxed as de } from "./boxed.js";
|
|
95
95
|
import le from "./divider.js";
|
|
96
96
|
import { getPrefixedDataAttributes as he } from "./utils/dom.js";
|
|
97
|
-
import { rowContent as B, touchableBackground as R, touchableBackgroundInverse as C, pointer as V, dualActionContainer as Q, dualActionLeft as U, dualActionDivider as Z,
|
|
97
|
+
import { rowContent as B, touchableBackground as R, touchableBackgroundInverse as C, pointer as V, dualActionContainer as Q, dualActionLeft as U, dualActionDivider as Z, content as ue, center as W, disabled as I, asset as me, rowBody as fe, right as ge, rightRestrictedWidth as ve, detail as be, detailRight as _, dualActionRight as xe, badge as we } from "./list.css-mistica.js";
|
|
98
98
|
import { vars as N } from "./skins/skin-contract.css-mistica.js";
|
|
99
99
|
const $ = (e, n)=>typeof e == "function" ? e == null ? void 0 : e({
|
|
100
100
|
centerY: n
|
|
@@ -126,7 +126,7 @@ const $ = (e, n)=>typeof e == "function" ? e == null ? void 0 : e({
|
|
|
126
126
|
}) : null;
|
|
127
127
|
return /* @__PURE__ */ k(m, {
|
|
128
128
|
paddingY: 16,
|
|
129
|
-
className:
|
|
129
|
+
className: ue,
|
|
130
130
|
children: [
|
|
131
131
|
E && /* @__PURE__ */ t(m, {
|
|
132
132
|
paddingRight: 16,
|
|
@@ -135,12 +135,12 @@ const $ = (e, n)=>typeof e == "function" ? e == null ? void 0 : e({
|
|
|
135
135
|
[I]: v
|
|
136
136
|
}),
|
|
137
137
|
children: /* @__PURE__ */ t("div", {
|
|
138
|
-
className:
|
|
138
|
+
className: me,
|
|
139
139
|
children: E
|
|
140
140
|
})
|
|
141
141
|
}),
|
|
142
142
|
/* @__PURE__ */ t("div", {
|
|
143
|
-
className: a(
|
|
143
|
+
className: a(fe, {
|
|
144
144
|
[I]: v
|
|
145
145
|
}),
|
|
146
146
|
style: {
|
|
@@ -189,12 +189,12 @@ const $ = (e, n)=>typeof e == "function" ? e == null ? void 0 : e({
|
|
|
189
189
|
f(),
|
|
190
190
|
/* @__PURE__ */ k("div", {
|
|
191
191
|
className: a({
|
|
192
|
-
[
|
|
193
|
-
[
|
|
192
|
+
[ge]: !!c || g !== "basic",
|
|
193
|
+
[ve]: !!c
|
|
194
194
|
}),
|
|
195
195
|
children: [
|
|
196
196
|
c && /* @__PURE__ */ t("div", {
|
|
197
|
-
className: a(W,
|
|
197
|
+
className: a(W, be, {
|
|
198
198
|
[I]: v
|
|
199
199
|
}),
|
|
200
200
|
children: /* @__PURE__ */ t(O, {
|
|
@@ -350,7 +350,7 @@ const $ = (e, n)=>typeof e == "function" ? e == null ? void 0 : e({
|
|
|
350
350
|
render: (param)=>/* @__PURE__ */ {
|
|
351
351
|
let { controlElement: H } = param;
|
|
352
352
|
return t("div", {
|
|
353
|
-
className:
|
|
353
|
+
className: xe,
|
|
354
354
|
children: H
|
|
355
355
|
});
|
|
356
356
|
}
|
|
@@ -511,4 +511,4 @@ const $ = (e, n)=>typeof e == "function" ? e == null ? void 0 : e({
|
|
|
511
511
|
children: e
|
|
512
512
|
});
|
|
513
513
|
};
|
|
514
|
-
export { Ge as BoxedRow, Je as BoxedRowList, qe as Row, ze as RowList };
|
|
514
|
+
export { Ge as BoxedRow, Je as BoxedRowList, ye as Content, qe as Row, ze as RowList };
|
|
@@ -1,11 +1,17 @@
|
|
|
1
1
|
import "./sprinkles.css.ts.vanilla.css-mistica.js";
|
|
2
2
|
import "./menu.css.ts.vanilla.css-mistica.js";
|
|
3
|
-
var r = "
|
|
3
|
+
var r = "_2k0k3uj", n = "_2k0k3ui", v = "_2k0k3u8 _1y2v1nf68 _1y2v1nf7h _1y2v1nf8q _1y2v1nf9z _1y2v1nf31 _1y2v1nfdz _1y2v1nfb6 _1y2v1nfbc _1y2v1nfb1", t = "_2k0k3ud", _ = "_2k0k3ug", a = "_2k0k3uf", u = "_2k0k3ue", i = "_2k0k3uh", m = {
|
|
4
|
+
enter: "_2k0k3u9",
|
|
5
|
+
enterActive: "_2k0k3ua",
|
|
6
|
+
exit: "_2k0k3ub",
|
|
7
|
+
exitActive: "_2k0k3uc"
|
|
8
|
+
}, o = {
|
|
4
9
|
top: "var(--_2k0k3u0)",
|
|
5
10
|
bottom: "var(--_2k0k3u1)",
|
|
6
11
|
left: "var(--_2k0k3u2)",
|
|
12
|
+
right: "var(--_2k0k3u4)",
|
|
7
13
|
width: "var(--_2k0k3u3)",
|
|
8
|
-
maxHeight: "var(--
|
|
9
|
-
transformOrigin: "var(--
|
|
14
|
+
maxHeight: "var(--_2k0k3u5)",
|
|
15
|
+
transformOrigin: "var(--_2k0k3u6)"
|
|
10
16
|
};
|
|
11
|
-
export { r as
|
|
17
|
+
export { r as iconContainer, n as itemContent, v as menuContainer, t as menuItem, _ as menuItemDisabled, a as menuItemEnabled, u as menuItemHovered, i as menuSectionDivider, m as menuTransitionClasses, o as vars };
|
package/dist-es/menu.js
CHANGED
|
@@ -50,116 +50,285 @@ function _object_spread_props(target, source) {
|
|
|
50
50
|
}
|
|
51
51
|
return target;
|
|
52
52
|
}
|
|
53
|
-
import { jsxs as
|
|
54
|
-
import * as
|
|
55
|
-
import
|
|
56
|
-
import { TAB as
|
|
57
|
-
import { getPrefixedDataAttributes as
|
|
58
|
-
import
|
|
59
|
-
import {
|
|
60
|
-
import { useWindowSize as
|
|
61
|
-
import { Portal as
|
|
62
|
-
import { assignInlineVars as
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
53
|
+
import { jsx as e, jsxs as C, Fragment as U } from "react/jsx-runtime";
|
|
54
|
+
import * as n from "react";
|
|
55
|
+
import ne from "classnames";
|
|
56
|
+
import { TAB as oe, ENTER as W, SPACE as G, ESC as se, UP as re, LEFT as ie, DOWN as K, RIGHT as ce } from "./utils/key-codes.js";
|
|
57
|
+
import { getPrefixedDataAttributes as le, cancelEvent as S } from "./utils/dom.js";
|
|
58
|
+
import ae from "./overlay.js";
|
|
59
|
+
import { menuItem as me, menuItemEnabled as ue, menuItemDisabled as de, menuItemHovered as fe, menuSectionDivider as pe, menuTransitionClasses as he, vars as I, itemContent as Y, iconContainer as j, menuContainer as ge } from "./menu.css-mistica.js";
|
|
60
|
+
import { useWindowSize as xe } from "./hooks.js";
|
|
61
|
+
import { Portal as Ie } from "./portal.js";
|
|
62
|
+
import { assignInlineVars as be } from "@vanilla-extract/dynamic";
|
|
63
|
+
import y from "./box.js";
|
|
64
|
+
import ve from "./inline.js";
|
|
65
|
+
import Me from "./touchable.js";
|
|
66
|
+
import { Text3 as X } from "./text.js";
|
|
67
|
+
import { vars as q } from "./skins/skin-contract.css-mistica.js";
|
|
68
|
+
import Oe from "./divider.js";
|
|
69
|
+
import Te from "./checkbox.js";
|
|
70
|
+
import { CSSTransition as Se } from "react-transition-group";
|
|
71
|
+
import { combineRefs as Ce } from "./utils/common.js";
|
|
72
|
+
const Ee = 120, Q = /*#__PURE__*/ n.createContext({
|
|
73
|
+
focusedItem: null,
|
|
74
|
+
isMenuOpen: !1,
|
|
75
|
+
setFocusedItem: ()=>{},
|
|
76
|
+
closeMenu: ()=>{}
|
|
77
|
+
}), ke = ()=>n.useContext(Q), D = (r)=>r ? Array.from(r.querySelectorAll("[role=menuitem],[role=menuitemcheckbox]")) : [], Ne = (r, d)=>{
|
|
78
|
+
if (!d) return null;
|
|
79
|
+
const f = D(r).indexOf(d);
|
|
80
|
+
return f < 0 ? null : f;
|
|
81
|
+
}, je = (param)=>{
|
|
82
|
+
let { label: r , Icon: d , destructive: f , disabled: m , onPress: E , controlType: o , checked: p } = param;
|
|
83
|
+
const { focusedItem: s , setFocusedItem: v , closeMenu: i , isMenuOpen: k } = ke(), c = n.useRef(null), h = f ? q.colors.textLinkDanger : q.colors.neutralHigh, x = c == null ? void 0 : c.current, M = (x == null ? void 0 : x.closest("[role=menu]")) || null, u = Ne(M, x), l = ()=>o === "checkbox" ? /* @__PURE__ */ e(Te, {
|
|
84
|
+
ref: c,
|
|
85
|
+
name: r,
|
|
86
|
+
checked: p,
|
|
87
|
+
onChange: ()=>{
|
|
88
|
+
k && u !== null && (E(u), i());
|
|
89
|
+
},
|
|
90
|
+
disabled: m,
|
|
91
|
+
role: "menuitemcheckbox",
|
|
92
|
+
render: (param)=>/* @__PURE__ */ {
|
|
93
|
+
let { controlElement: N } = param;
|
|
94
|
+
return e(y, {
|
|
95
|
+
paddingX: 8,
|
|
96
|
+
paddingY: 12,
|
|
97
|
+
children: /* @__PURE__ */ C(ve, {
|
|
98
|
+
space: "between",
|
|
99
|
+
alignItems: "center",
|
|
100
|
+
children: [
|
|
101
|
+
/* @__PURE__ */ C("div", {
|
|
102
|
+
className: Y,
|
|
103
|
+
children: [
|
|
104
|
+
d && /* @__PURE__ */ e("div", {
|
|
105
|
+
className: j,
|
|
106
|
+
children: /* @__PURE__ */ e(d, {
|
|
107
|
+
size: 24,
|
|
108
|
+
color: h
|
|
109
|
+
})
|
|
110
|
+
}),
|
|
111
|
+
/* @__PURE__ */ e(X, {
|
|
112
|
+
regular: !0,
|
|
113
|
+
color: h,
|
|
114
|
+
children: r
|
|
115
|
+
})
|
|
116
|
+
]
|
|
117
|
+
}),
|
|
118
|
+
/* @__PURE__ */ e(y, {
|
|
119
|
+
paddingLeft: 16,
|
|
120
|
+
children: N
|
|
121
|
+
})
|
|
122
|
+
]
|
|
123
|
+
})
|
|
124
|
+
});
|
|
125
|
+
}
|
|
126
|
+
}) : /* @__PURE__ */ e(Me, {
|
|
127
|
+
ref: c,
|
|
128
|
+
onPress: ()=>{
|
|
129
|
+
k && u !== null && (E(u), i());
|
|
130
|
+
},
|
|
131
|
+
disabled: m,
|
|
132
|
+
role: "menuitem",
|
|
133
|
+
children: /* @__PURE__ */ e(y, {
|
|
134
|
+
paddingX: 8,
|
|
135
|
+
paddingY: 12,
|
|
136
|
+
children: /* @__PURE__ */ C("div", {
|
|
137
|
+
className: Y,
|
|
138
|
+
children: [
|
|
139
|
+
d && /* @__PURE__ */ e("div", {
|
|
140
|
+
className: j,
|
|
141
|
+
children: /* @__PURE__ */ e(d, {
|
|
142
|
+
size: 24,
|
|
143
|
+
color: h
|
|
144
|
+
})
|
|
145
|
+
}),
|
|
146
|
+
/* @__PURE__ */ e(X, {
|
|
147
|
+
regular: !0,
|
|
148
|
+
color: h,
|
|
149
|
+
children: r
|
|
150
|
+
})
|
|
151
|
+
]
|
|
152
|
+
})
|
|
153
|
+
})
|
|
154
|
+
});
|
|
155
|
+
return /* @__PURE__ */ e("div", {
|
|
156
|
+
className: ne(me, {
|
|
157
|
+
[ue]: !m,
|
|
158
|
+
[de]: m,
|
|
159
|
+
[fe]: !m && u !== null && s === u
|
|
160
|
+
}),
|
|
161
|
+
onMouseMove: ()=>v(m ? null : u),
|
|
162
|
+
onMouseLeave: ()=>v(null),
|
|
163
|
+
children: l()
|
|
164
|
+
});
|
|
165
|
+
}, Xe = (param)=>{
|
|
166
|
+
let { children: r } = param;
|
|
167
|
+
return r ? /* @__PURE__ */ C(U, {
|
|
168
|
+
children: [
|
|
169
|
+
r,
|
|
170
|
+
/* @__PURE__ */ e(y, {
|
|
171
|
+
paddingY: 8,
|
|
172
|
+
className: pe,
|
|
173
|
+
children: /* @__PURE__ */ e(Oe, {})
|
|
174
|
+
})
|
|
175
|
+
]
|
|
176
|
+
}) : /* @__PURE__ */ e(U, {});
|
|
177
|
+
}, V = 12, J = 8, qe = (param)=>{
|
|
178
|
+
let { renderTarget: r , renderMenu: d , width: f , position: m = "left" , dataAttributes: E } = param;
|
|
179
|
+
const [o, p] = n.useState(!1), [s, v] = n.useState(null), [i, k] = n.useState(null), [c, h] = n.useState(null), [x, M] = n.useState(!1), u = n.useRef(null), [l, N] = n.useState(null), R = xe();
|
|
180
|
+
n.useEffect(()=>{
|
|
181
|
+
const a = s == null ? void 0 : s.getBoundingClientRect();
|
|
182
|
+
if (!i || !a || !o) return;
|
|
183
|
+
const { top: t , right: O , left: g , bottom: F } = a, T = i.scrollHeight, b = m === "left" ? g : void 0, A = m === "right" ? R.width - O : void 0, L = t - J, $ = F + J, H = R.height - $ - V, P = L - V, B = H > T, z = P > T, te = B || !z && H > P;
|
|
184
|
+
N(te ? {
|
|
185
|
+
left: b,
|
|
186
|
+
right: A,
|
|
187
|
+
top: `${$}px`,
|
|
89
188
|
bottom: "auto",
|
|
90
|
-
maxHeight:
|
|
189
|
+
maxHeight: B ? void 0 : H,
|
|
91
190
|
transformOrigin: "center top"
|
|
92
|
-
}
|
|
93
|
-
left:
|
|
191
|
+
} : {
|
|
192
|
+
left: b,
|
|
193
|
+
right: A,
|
|
94
194
|
top: "auto",
|
|
95
|
-
bottom: `${
|
|
96
|
-
maxHeight:
|
|
195
|
+
bottom: `${R.height - L}px`,
|
|
196
|
+
maxHeight: z ? void 0 : P,
|
|
97
197
|
transformOrigin: "center bottom"
|
|
98
198
|
});
|
|
99
|
-
let S;
|
|
100
|
-
return e && (S = requestAnimationFrame(()=>{
|
|
101
|
-
w(!0);
|
|
102
|
-
})), ()=>{
|
|
103
|
-
S && cancelAnimationFrame(S);
|
|
104
|
-
};
|
|
105
199
|
}, [
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
200
|
+
m,
|
|
201
|
+
o,
|
|
202
|
+
i,
|
|
203
|
+
s,
|
|
204
|
+
f,
|
|
205
|
+
R
|
|
112
206
|
]);
|
|
113
|
-
const
|
|
114
|
-
ref:
|
|
207
|
+
const Z = n.useMemo(()=>({
|
|
208
|
+
ref: v,
|
|
115
209
|
onPress: ()=>{
|
|
116
|
-
|
|
210
|
+
p(!o);
|
|
117
211
|
}
|
|
118
212
|
}), [
|
|
119
|
-
|
|
120
|
-
|
|
213
|
+
v,
|
|
214
|
+
o
|
|
215
|
+
]), ee = {
|
|
216
|
+
ref: Ce(k, u),
|
|
217
|
+
className: ge,
|
|
218
|
+
close: ()=>p(!1)
|
|
219
|
+
}, w = n.useCallback(()=>{
|
|
220
|
+
const t = D(i).findIndex((O)=>!O.getAttribute("aria-disabled"));
|
|
221
|
+
h(t < 0 ? null : t);
|
|
222
|
+
}, [
|
|
223
|
+
i
|
|
224
|
+
]), _ = n.useCallback((a)=>{
|
|
225
|
+
var T;
|
|
226
|
+
const t = D(i);
|
|
227
|
+
a && t.reverse();
|
|
228
|
+
const O = c === null ? -1 : a ? t.length - 1 - c : c;
|
|
229
|
+
let g = t.findIndex((b, A)=>!b.getAttribute("aria-disabled") && A > O);
|
|
230
|
+
g === -1 && (g = t.findIndex((b)=>!b.getAttribute("aria-disabled")));
|
|
231
|
+
const F = a && g !== -1 ? t.length - 1 - g : g;
|
|
232
|
+
h(F < 0 ? null : F), (T = t[g]) == null || T.focus();
|
|
233
|
+
}, [
|
|
234
|
+
c,
|
|
121
235
|
i
|
|
122
|
-
]), $ = t.useMemo(()=>({
|
|
123
|
-
ref: P,
|
|
124
|
-
className: _(j, T ? q : z),
|
|
125
|
-
close: ()=>{
|
|
126
|
-
i(!1);
|
|
127
|
-
}
|
|
128
|
-
}), [
|
|
129
|
-
T
|
|
130
236
|
]);
|
|
131
|
-
return
|
|
132
|
-
|
|
133
|
-
|
|
237
|
+
return n.useEffect(()=>{
|
|
238
|
+
o ? x && i && (w(), M(!1)) : h(null);
|
|
239
|
+
}, [
|
|
240
|
+
o,
|
|
241
|
+
w,
|
|
242
|
+
x,
|
|
243
|
+
i
|
|
244
|
+
]), n.useEffect(()=>{
|
|
245
|
+
const a = (t)=>{
|
|
246
|
+
if (o) switch(t.keyCode){
|
|
247
|
+
case ce:
|
|
248
|
+
case K:
|
|
249
|
+
S(t), _();
|
|
250
|
+
break;
|
|
251
|
+
case ie:
|
|
252
|
+
case re:
|
|
253
|
+
S(t), _(!0);
|
|
254
|
+
break;
|
|
255
|
+
case se:
|
|
256
|
+
p(!1);
|
|
257
|
+
break;
|
|
258
|
+
case G:
|
|
259
|
+
case W:
|
|
260
|
+
S(t), c !== null && D(i)[c].click();
|
|
261
|
+
break;
|
|
262
|
+
case oe:
|
|
263
|
+
S(t);
|
|
264
|
+
break;
|
|
265
|
+
}
|
|
266
|
+
else switch(t.keyCode){
|
|
267
|
+
case W:
|
|
268
|
+
case G:
|
|
269
|
+
M(!0);
|
|
270
|
+
break;
|
|
271
|
+
case K:
|
|
272
|
+
s === document.activeElement && (M(!0), p(!0));
|
|
273
|
+
break;
|
|
274
|
+
}
|
|
134
275
|
};
|
|
135
|
-
return document.addEventListener("keydown",
|
|
136
|
-
document.removeEventListener("keydown",
|
|
276
|
+
return document.addEventListener("keydown", a, !1), ()=>{
|
|
277
|
+
document.removeEventListener("keydown", a, !1);
|
|
137
278
|
};
|
|
138
|
-
}),
|
|
279
|
+
}), n.useEffect(()=>{
|
|
280
|
+
s == null || s.setAttribute("aria-expanded", String(o));
|
|
281
|
+
}, [
|
|
282
|
+
s,
|
|
283
|
+
o
|
|
284
|
+
]), /* @__PURE__ */ C("div", _object_spread_props(_object_spread({}, le(E, "Menu")), {
|
|
139
285
|
children: [
|
|
140
|
-
|
|
141
|
-
isMenuOpen:
|
|
286
|
+
r(_object_spread_props(_object_spread({}, Z), {
|
|
287
|
+
isMenuOpen: o
|
|
142
288
|
})),
|
|
143
|
-
|
|
144
|
-
children: /* @__PURE__ */
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
289
|
+
/* @__PURE__ */ e(Ie, {
|
|
290
|
+
children: /* @__PURE__ */ e(Se, {
|
|
291
|
+
in: o,
|
|
292
|
+
nodeRef: u,
|
|
293
|
+
timeout: Ee,
|
|
294
|
+
classNames: he,
|
|
295
|
+
mountOnEnter: !0,
|
|
296
|
+
unmountOnExit: !0,
|
|
297
|
+
onExit: ()=>s == null ? void 0 : s.focus(),
|
|
298
|
+
children: /* @__PURE__ */ e(ae, {
|
|
299
|
+
onPress: (a)=>{
|
|
300
|
+
S(a), p(!1);
|
|
301
|
+
},
|
|
302
|
+
disableScroll: !0,
|
|
303
|
+
children: /* @__PURE__ */ e("div", {
|
|
304
|
+
style: _object_spread({}, be(_object_spread({}, l ? _object_spread({
|
|
305
|
+
[I.top]: l.top,
|
|
306
|
+
[I.bottom]: l.bottom,
|
|
307
|
+
[I.transformOrigin]: l.transformOrigin
|
|
308
|
+
}, l.left !== void 0 && {
|
|
309
|
+
[I.left]: `${l.left}px`
|
|
310
|
+
}, l.right !== void 0 && {
|
|
311
|
+
[I.right]: `${l.right}px`
|
|
312
|
+
}, l.maxHeight !== void 0 && {
|
|
313
|
+
[I.maxHeight]: `${l.maxHeight}px`
|
|
314
|
+
}, f !== void 0 && {
|
|
315
|
+
[I.width]: f ? `${f}px` : ""
|
|
316
|
+
}) : {}))),
|
|
317
|
+
role: "menu",
|
|
318
|
+
children: /* @__PURE__ */ e(Q.Provider, {
|
|
319
|
+
value: {
|
|
320
|
+
isMenuOpen: o,
|
|
321
|
+
focusedItem: c,
|
|
322
|
+
setFocusedItem: h,
|
|
323
|
+
closeMenu: ()=>p(!1)
|
|
324
|
+
},
|
|
325
|
+
children: d(ee)
|
|
326
|
+
})
|
|
327
|
+
})
|
|
159
328
|
})
|
|
160
329
|
})
|
|
161
|
-
})
|
|
330
|
+
})
|
|
162
331
|
]
|
|
163
332
|
}));
|
|
164
|
-
}
|
|
165
|
-
export {
|
|
333
|
+
};
|
|
334
|
+
export { qe as Menu, je as MenuItem, Xe as MenuSection };
|
package/dist-es/overlay.js
CHANGED
|
@@ -50,11 +50,10 @@ function _object_spread_props(target, source) {
|
|
|
50
50
|
}
|
|
51
51
|
return target;
|
|
52
52
|
}
|
|
53
|
-
import { jsx as
|
|
54
|
-
import
|
|
55
|
-
import {
|
|
56
|
-
import {
|
|
57
|
-
import { getPrefixedDataAttributes as b } from "./utils/dom.js";
|
|
53
|
+
import { jsx as m } from "react/jsx-runtime";
|
|
54
|
+
import { isAndroid as r, isChrome as i } from "./utils/platform.js";
|
|
55
|
+
import { useDisableBodyScroll as p, useTheme as s } from "./hooks.js";
|
|
56
|
+
import { getPrefixedDataAttributes as y } from "./utils/dom.js";
|
|
58
57
|
const x = {
|
|
59
58
|
position: "fixed",
|
|
60
59
|
top: 0,
|
|
@@ -64,29 +63,28 @@ const x = {
|
|
|
64
63
|
zIndex: 12,
|
|
65
64
|
outline: "none",
|
|
66
65
|
WebkitTapHighlightColor: "transparent"
|
|
67
|
-
},
|
|
68
|
-
let { onPress: o , children: a , className:
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
const { platformOverrides: e } = h(), m = (t)=>{
|
|
66
|
+
}, b = (param)=>{
|
|
67
|
+
let { onPress: o , children: a , className: l , style: n , disableScroll: f = !1 , dataAttributes: u } = param;
|
|
68
|
+
p(f);
|
|
69
|
+
const { platformOverrides: e } = s(), d = (t)=>{
|
|
72
70
|
t.button === 2 && o && o(t);
|
|
73
71
|
};
|
|
74
|
-
return /* @__PURE__ */
|
|
72
|
+
return /* @__PURE__ */ m("div", _object_spread_props(_object_spread({
|
|
75
73
|
"data-overlay": "true"
|
|
76
|
-
},
|
|
77
|
-
style: _object_spread({}, x,
|
|
78
|
-
className:
|
|
74
|
+
}, y(u, "Overlay")), {
|
|
75
|
+
style: _object_spread({}, x, n),
|
|
76
|
+
className: l,
|
|
79
77
|
onPointerDown: (t)=>{
|
|
80
|
-
t.target.dataset.overlay && o && (a &&
|
|
78
|
+
t.target.dataset.overlay && o && (a && r(e) && i(e) ? t.stopPropagation() : o(t));
|
|
81
79
|
},
|
|
82
80
|
onClick: (t)=>{
|
|
83
|
-
t.target.dataset.overlay && o && a &&
|
|
81
|
+
t.target.dataset.overlay && o && a && r(e) && i(e) && o(t);
|
|
84
82
|
},
|
|
85
83
|
"touch-action": "auto",
|
|
86
|
-
onContextMenu:
|
|
84
|
+
onContextMenu: d,
|
|
87
85
|
role: "button",
|
|
88
86
|
tabIndex: 0,
|
|
89
|
-
children:
|
|
87
|
+
children: a
|
|
90
88
|
}));
|
|
91
|
-
},
|
|
92
|
-
export {
|
|
89
|
+
}, C = b;
|
|
90
|
+
export { C as default };
|