@proyecto-viviana/solidaria 0.0.1
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/button/createButton.d.ts +29 -0
- package/dist/button/createButton.d.ts.map +1 -0
- package/dist/button/createToggleButton.d.ts +41 -0
- package/dist/button/createToggleButton.d.ts.map +1 -0
- package/dist/button/index.d.ts +5 -0
- package/dist/button/index.d.ts.map +1 -0
- package/dist/button/types.d.ts +66 -0
- package/dist/button/types.d.ts.map +1 -0
- package/dist/checkbox/createCheckbox.d.ts +56 -0
- package/dist/checkbox/createCheckbox.d.ts.map +1 -0
- package/dist/checkbox/createCheckboxGroup.d.ts +53 -0
- package/dist/checkbox/createCheckboxGroup.d.ts.map +1 -0
- package/dist/checkbox/createCheckboxGroupItem.d.ts +25 -0
- package/dist/checkbox/createCheckboxGroupItem.d.ts.map +1 -0
- package/dist/checkbox/createCheckboxGroupState.d.ts +71 -0
- package/dist/checkbox/createCheckboxGroupState.d.ts.map +1 -0
- package/dist/checkbox/index.d.ts +9 -0
- package/dist/checkbox/index.d.ts.map +1 -0
- package/dist/index.d.ts +15 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +2834 -0
- package/dist/index.js.map +1 -0
- package/dist/interactions/FocusableProvider.d.ts +26 -0
- package/dist/interactions/FocusableProvider.d.ts.map +1 -0
- package/dist/interactions/PressEvent.d.ts +63 -0
- package/dist/interactions/PressEvent.d.ts.map +1 -0
- package/dist/interactions/createFocus.d.ts +31 -0
- package/dist/interactions/createFocus.d.ts.map +1 -0
- package/dist/interactions/createFocusRing.d.ts +37 -0
- package/dist/interactions/createFocusRing.d.ts.map +1 -0
- package/dist/interactions/createFocusWithin.d.ts +27 -0
- package/dist/interactions/createFocusWithin.d.ts.map +1 -0
- package/dist/interactions/createFocusable.d.ts +65 -0
- package/dist/interactions/createFocusable.d.ts.map +1 -0
- package/dist/interactions/createHover.d.ts +41 -0
- package/dist/interactions/createHover.d.ts.map +1 -0
- package/dist/interactions/createKeyboard.d.ts +35 -0
- package/dist/interactions/createKeyboard.d.ts.map +1 -0
- package/dist/interactions/createPress.d.ts +49 -0
- package/dist/interactions/createPress.d.ts.map +1 -0
- package/dist/interactions/index.d.ts +10 -0
- package/dist/interactions/index.d.ts.map +1 -0
- package/dist/label/createField.d.ts +51 -0
- package/dist/label/createField.d.ts.map +1 -0
- package/dist/label/createLabel.d.ts +49 -0
- package/dist/label/createLabel.d.ts.map +1 -0
- package/dist/label/createLabels.d.ts +16 -0
- package/dist/label/createLabels.d.ts.map +1 -0
- package/dist/label/index.d.ts +6 -0
- package/dist/label/index.d.ts.map +1 -0
- package/dist/link/createLink.d.ts +65 -0
- package/dist/link/createLink.d.ts.map +1 -0
- package/dist/link/index.d.ts +2 -0
- package/dist/link/index.d.ts.map +1 -0
- package/dist/progress/createProgressBar.d.ts +47 -0
- package/dist/progress/createProgressBar.d.ts.map +1 -0
- package/dist/progress/index.d.ts +2 -0
- package/dist/progress/index.d.ts.map +1 -0
- package/dist/radio/createRadio.d.ts +68 -0
- package/dist/radio/createRadio.d.ts.map +1 -0
- package/dist/radio/createRadioGroup.d.ts +85 -0
- package/dist/radio/createRadioGroup.d.ts.map +1 -0
- package/dist/radio/createRadioGroupState.d.ts +77 -0
- package/dist/radio/createRadioGroupState.d.ts.map +1 -0
- package/dist/radio/index.d.ts +4 -0
- package/dist/radio/index.d.ts.map +1 -0
- package/dist/separator/createSeparator.d.ts +38 -0
- package/dist/separator/createSeparator.d.ts.map +1 -0
- package/dist/separator/index.d.ts +2 -0
- package/dist/separator/index.d.ts.map +1 -0
- package/dist/ssr/index.d.ts +24 -0
- package/dist/ssr/index.d.ts.map +1 -0
- package/dist/switch/createSwitch.d.ts +34 -0
- package/dist/switch/createSwitch.d.ts.map +1 -0
- package/dist/switch/index.d.ts +2 -0
- package/dist/switch/index.d.ts.map +1 -0
- package/dist/textfield/createTextField.d.ts +73 -0
- package/dist/textfield/createTextField.d.ts.map +1 -0
- package/dist/textfield/index.d.ts +2 -0
- package/dist/textfield/index.d.ts.map +1 -0
- package/dist/toggle/createToggle.d.ts +94 -0
- package/dist/toggle/createToggle.d.ts.map +1 -0
- package/dist/toggle/createToggleState.d.ts +34 -0
- package/dist/toggle/createToggleState.d.ts.map +1 -0
- package/dist/toggle/index.d.ts +5 -0
- package/dist/toggle/index.d.ts.map +1 -0
- package/dist/utils/dom.d.ts +51 -0
- package/dist/utils/dom.d.ts.map +1 -0
- package/dist/utils/events.d.ts +29 -0
- package/dist/utils/events.d.ts.map +1 -0
- package/dist/utils/filterDOMProps.d.ts +29 -0
- package/dist/utils/filterDOMProps.d.ts.map +1 -0
- package/dist/utils/focus.d.ts +20 -0
- package/dist/utils/focus.d.ts.map +1 -0
- package/dist/utils/geometry.d.ts +40 -0
- package/dist/utils/geometry.d.ts.map +1 -0
- package/dist/utils/globalListeners.d.ts +36 -0
- package/dist/utils/globalListeners.d.ts.map +1 -0
- package/dist/utils/index.d.ts +11 -0
- package/dist/utils/index.d.ts.map +1 -0
- package/dist/utils/mergeProps.d.ts +8 -0
- package/dist/utils/mergeProps.d.ts.map +1 -0
- package/dist/utils/platform.d.ts +14 -0
- package/dist/utils/platform.d.ts.map +1 -0
- package/dist/utils/reactivity.d.ts +28 -0
- package/dist/utils/reactivity.d.ts.map +1 -0
- package/dist/utils/textSelection.d.ts +19 -0
- package/dist/utils/textSelection.d.ts.map +1 -0
- package/package.json +50 -0
package/dist/index.js
ADDED
|
@@ -0,0 +1,2834 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __typeError = (msg) => {
|
|
3
|
+
throw TypeError(msg);
|
|
4
|
+
};
|
|
5
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
6
|
+
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
7
|
+
var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
|
|
8
|
+
var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
|
|
9
|
+
var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
|
|
10
|
+
var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
|
|
11
|
+
var _shouldStopPropagation;
|
|
12
|
+
import { onCleanup, createSignal, onMount, useContext, createContext, createEffect, createMemo, untrack, createUniqueId } from "solid-js";
|
|
13
|
+
import { isServer } from "solid-js/web";
|
|
14
|
+
class PressEvent {
|
|
15
|
+
constructor(type, pointerType, originalEvent, target) {
|
|
16
|
+
__publicField(this, "type");
|
|
17
|
+
__publicField(this, "pointerType");
|
|
18
|
+
__publicField(this, "target");
|
|
19
|
+
__publicField(this, "shiftKey");
|
|
20
|
+
__publicField(this, "ctrlKey");
|
|
21
|
+
__publicField(this, "metaKey");
|
|
22
|
+
__publicField(this, "altKey");
|
|
23
|
+
__publicField(this, "x");
|
|
24
|
+
__publicField(this, "y");
|
|
25
|
+
__privateAdd(this, _shouldStopPropagation, true);
|
|
26
|
+
this.type = type;
|
|
27
|
+
this.pointerType = pointerType;
|
|
28
|
+
this.target = target;
|
|
29
|
+
const e = originalEvent;
|
|
30
|
+
this.shiftKey = (e == null ? void 0 : e.shiftKey) ?? false;
|
|
31
|
+
this.ctrlKey = (e == null ? void 0 : e.ctrlKey) ?? false;
|
|
32
|
+
this.metaKey = (e == null ? void 0 : e.metaKey) ?? false;
|
|
33
|
+
this.altKey = (e == null ? void 0 : e.altKey) ?? false;
|
|
34
|
+
this.x = 0;
|
|
35
|
+
this.y = 0;
|
|
36
|
+
if (originalEvent && "clientX" in originalEvent && target) {
|
|
37
|
+
const rect = target.getBoundingClientRect();
|
|
38
|
+
this.x = originalEvent.clientX - rect.left;
|
|
39
|
+
this.y = originalEvent.clientY - rect.top;
|
|
40
|
+
} else if (target) {
|
|
41
|
+
const rect = target.getBoundingClientRect();
|
|
42
|
+
this.x = rect.width / 2;
|
|
43
|
+
this.y = rect.height / 2;
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
/**
|
|
47
|
+
* Call this to allow the press event to propagate to parent elements.
|
|
48
|
+
* By default, press events stop propagation.
|
|
49
|
+
*/
|
|
50
|
+
continuePropagation() {
|
|
51
|
+
__privateSet(this, _shouldStopPropagation, false);
|
|
52
|
+
}
|
|
53
|
+
/**
|
|
54
|
+
* Whether the event should stop propagation.
|
|
55
|
+
* Used internally by the press handler.
|
|
56
|
+
*/
|
|
57
|
+
get shouldStopPropagation() {
|
|
58
|
+
return __privateGet(this, _shouldStopPropagation);
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
_shouldStopPropagation = new WeakMap();
|
|
62
|
+
function createPressEvent(type, pointerType, originalEvent, target) {
|
|
63
|
+
return new PressEvent(type, pointerType, originalEvent, target);
|
|
64
|
+
}
|
|
65
|
+
function mergeProps(...args) {
|
|
66
|
+
var _a;
|
|
67
|
+
const result = {};
|
|
68
|
+
for (const props of args) {
|
|
69
|
+
for (const key in props) {
|
|
70
|
+
const value = props[key];
|
|
71
|
+
const existingValue = result[key];
|
|
72
|
+
if (typeof existingValue === "function" && typeof value === "function" && key.startsWith("on") && key[2] === ((_a = key[2]) == null ? void 0 : _a.toUpperCase())) {
|
|
73
|
+
result[key] = chainHandlers(existingValue, value);
|
|
74
|
+
} else if (key === "class" || key === "className") {
|
|
75
|
+
result[key] = mergeClassNames(existingValue, value);
|
|
76
|
+
} else if (key === "style" && typeof existingValue === "object" && typeof value === "object") {
|
|
77
|
+
result[key] = { ...existingValue, ...value };
|
|
78
|
+
} else if (value !== void 0) {
|
|
79
|
+
result[key] = value;
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
return result;
|
|
84
|
+
}
|
|
85
|
+
function chainHandlers(existingHandler, newHandler) {
|
|
86
|
+
return (...args) => {
|
|
87
|
+
existingHandler(...args);
|
|
88
|
+
newHandler(...args);
|
|
89
|
+
};
|
|
90
|
+
}
|
|
91
|
+
function mergeClassNames(...classes) {
|
|
92
|
+
return classes.filter(Boolean).join(" ");
|
|
93
|
+
}
|
|
94
|
+
const DOMPropNames = /* @__PURE__ */ new Set(["id"]);
|
|
95
|
+
const labelablePropNames = /* @__PURE__ */ new Set([
|
|
96
|
+
"aria-label",
|
|
97
|
+
"aria-labelledby",
|
|
98
|
+
"aria-describedby",
|
|
99
|
+
"aria-details"
|
|
100
|
+
]);
|
|
101
|
+
const linkPropNames = /* @__PURE__ */ new Set([
|
|
102
|
+
"href",
|
|
103
|
+
"hrefLang",
|
|
104
|
+
"target",
|
|
105
|
+
"rel",
|
|
106
|
+
"download",
|
|
107
|
+
"ping",
|
|
108
|
+
"referrerPolicy"
|
|
109
|
+
]);
|
|
110
|
+
const globalAttrs = /* @__PURE__ */ new Set(["dir", "lang", "hidden", "inert", "translate"]);
|
|
111
|
+
const globalEvents = /* @__PURE__ */ new Set([
|
|
112
|
+
"onClick",
|
|
113
|
+
"onAuxClick",
|
|
114
|
+
"onContextMenu",
|
|
115
|
+
"onDoubleClick",
|
|
116
|
+
"onMouseDown",
|
|
117
|
+
"onMouseEnter",
|
|
118
|
+
"onMouseLeave",
|
|
119
|
+
"onMouseMove",
|
|
120
|
+
"onMouseOut",
|
|
121
|
+
"onMouseOver",
|
|
122
|
+
"onMouseUp",
|
|
123
|
+
"onTouchCancel",
|
|
124
|
+
"onTouchEnd",
|
|
125
|
+
"onTouchMove",
|
|
126
|
+
"onTouchStart",
|
|
127
|
+
"onPointerDown",
|
|
128
|
+
"onPointerMove",
|
|
129
|
+
"onPointerUp",
|
|
130
|
+
"onPointerCancel",
|
|
131
|
+
"onPointerEnter",
|
|
132
|
+
"onPointerLeave",
|
|
133
|
+
"onPointerOver",
|
|
134
|
+
"onPointerOut",
|
|
135
|
+
"onGotPointerCapture",
|
|
136
|
+
"onLostPointerCapture",
|
|
137
|
+
"onScroll",
|
|
138
|
+
"onWheel",
|
|
139
|
+
"onAnimationStart",
|
|
140
|
+
"onAnimationEnd",
|
|
141
|
+
"onAnimationIteration",
|
|
142
|
+
"onTransitionCancel",
|
|
143
|
+
"onTransitionEnd",
|
|
144
|
+
"onTransitionRun",
|
|
145
|
+
"onTransitionStart"
|
|
146
|
+
]);
|
|
147
|
+
const propRe = /^(data-.*)$/;
|
|
148
|
+
function filterDOMProps(props, opts = {}) {
|
|
149
|
+
const { labelable, isLink, global, events = global, propNames } = opts;
|
|
150
|
+
const filteredProps = {};
|
|
151
|
+
for (const prop in props) {
|
|
152
|
+
if (Object.prototype.hasOwnProperty.call(props, prop) && (DOMPropNames.has(prop) || labelable && labelablePropNames.has(prop) || isLink && linkPropNames.has(prop) || global && globalAttrs.has(prop) || events && (globalEvents.has(prop) || prop.endsWith("Capture") && globalEvents.has(prop.slice(0, -7))) || (propNames == null ? void 0 : propNames.has(prop)) || propRe.test(prop))) {
|
|
153
|
+
filteredProps[prop] = props[prop];
|
|
154
|
+
}
|
|
155
|
+
}
|
|
156
|
+
return filteredProps;
|
|
157
|
+
}
|
|
158
|
+
function access$1(value) {
|
|
159
|
+
return typeof value === "function" ? value() : value;
|
|
160
|
+
}
|
|
161
|
+
function isAccessor(value) {
|
|
162
|
+
return typeof value === "function";
|
|
163
|
+
}
|
|
164
|
+
function testPlatform(re) {
|
|
165
|
+
var _a;
|
|
166
|
+
return typeof window !== "undefined" && window.navigator != null ? re.test(window.navigator.platform || ((_a = window.navigator.userAgentData) == null ? void 0 : _a.platform) || "") : false;
|
|
167
|
+
}
|
|
168
|
+
function isMac() {
|
|
169
|
+
return testPlatform(/^Mac/i);
|
|
170
|
+
}
|
|
171
|
+
function isIPhone() {
|
|
172
|
+
return testPlatform(/^iPhone/i);
|
|
173
|
+
}
|
|
174
|
+
function isIPad() {
|
|
175
|
+
return testPlatform(/^iPad/i) || isMac() && navigator.maxTouchPoints > 1;
|
|
176
|
+
}
|
|
177
|
+
function isIOS() {
|
|
178
|
+
return isIPhone() || isIPad();
|
|
179
|
+
}
|
|
180
|
+
function getOwnerDocument(el) {
|
|
181
|
+
return (el == null ? void 0 : el.ownerDocument) ?? document;
|
|
182
|
+
}
|
|
183
|
+
function nodeContains(parent, child) {
|
|
184
|
+
if (!parent || !child) {
|
|
185
|
+
return false;
|
|
186
|
+
}
|
|
187
|
+
if (parent.contains(child)) {
|
|
188
|
+
return true;
|
|
189
|
+
}
|
|
190
|
+
let node = child;
|
|
191
|
+
while (node) {
|
|
192
|
+
if (node === parent) {
|
|
193
|
+
return true;
|
|
194
|
+
}
|
|
195
|
+
if (node.host) {
|
|
196
|
+
node = node.host;
|
|
197
|
+
} else {
|
|
198
|
+
node = node.parentNode;
|
|
199
|
+
}
|
|
200
|
+
}
|
|
201
|
+
return false;
|
|
202
|
+
}
|
|
203
|
+
function getEventTarget(event) {
|
|
204
|
+
if (typeof event.composedPath === "function") {
|
|
205
|
+
const path = event.composedPath();
|
|
206
|
+
if (path.length > 0) {
|
|
207
|
+
return path[0];
|
|
208
|
+
}
|
|
209
|
+
}
|
|
210
|
+
return event.target;
|
|
211
|
+
}
|
|
212
|
+
function isValidKeyboardEvent(event, currentTarget) {
|
|
213
|
+
const { key, code } = event;
|
|
214
|
+
const element = currentTarget;
|
|
215
|
+
const tagName = element.tagName.toLowerCase();
|
|
216
|
+
const role = element.getAttribute("role");
|
|
217
|
+
const isActivationKey = key === "Enter" || key === " " || key === "Spacebar" || code === "Space";
|
|
218
|
+
if (!isActivationKey) {
|
|
219
|
+
return false;
|
|
220
|
+
}
|
|
221
|
+
if (tagName === "textarea") {
|
|
222
|
+
return false;
|
|
223
|
+
}
|
|
224
|
+
if (element.isContentEditable) {
|
|
225
|
+
return false;
|
|
226
|
+
}
|
|
227
|
+
const isLink = tagName === "a" || role === "link";
|
|
228
|
+
if (isLink && key !== "Enter") {
|
|
229
|
+
return false;
|
|
230
|
+
}
|
|
231
|
+
if (tagName === "input") {
|
|
232
|
+
return isValidInputKey(element, key);
|
|
233
|
+
}
|
|
234
|
+
return true;
|
|
235
|
+
}
|
|
236
|
+
function isValidInputKey(target, key) {
|
|
237
|
+
const type = target.type.toLowerCase();
|
|
238
|
+
if (type === "checkbox" || type === "radio") {
|
|
239
|
+
return key === " " || key === "Spacebar";
|
|
240
|
+
}
|
|
241
|
+
const textInputTypes = [
|
|
242
|
+
"text",
|
|
243
|
+
"search",
|
|
244
|
+
"url",
|
|
245
|
+
"tel",
|
|
246
|
+
"email",
|
|
247
|
+
"password",
|
|
248
|
+
"date",
|
|
249
|
+
"month",
|
|
250
|
+
"week",
|
|
251
|
+
"time",
|
|
252
|
+
"datetime-local",
|
|
253
|
+
"number"
|
|
254
|
+
];
|
|
255
|
+
if (textInputTypes.includes(type)) {
|
|
256
|
+
return false;
|
|
257
|
+
}
|
|
258
|
+
return true;
|
|
259
|
+
}
|
|
260
|
+
function isHTMLAnchorLink(target) {
|
|
261
|
+
return target.tagName === "A" && target.hasAttribute("href");
|
|
262
|
+
}
|
|
263
|
+
function shouldPreventDefaultKeyboard(target, key) {
|
|
264
|
+
const tagName = target.tagName.toLowerCase();
|
|
265
|
+
if (tagName === "input" || tagName === "textarea" || tagName === "select") {
|
|
266
|
+
return false;
|
|
267
|
+
}
|
|
268
|
+
if ((tagName === "a" || target.getAttribute("role") === "link") && key === "Enter") {
|
|
269
|
+
return false;
|
|
270
|
+
}
|
|
271
|
+
if (tagName === "button") {
|
|
272
|
+
const type = target.type;
|
|
273
|
+
if (type === "submit" || type === "reset") {
|
|
274
|
+
return false;
|
|
275
|
+
}
|
|
276
|
+
}
|
|
277
|
+
return true;
|
|
278
|
+
}
|
|
279
|
+
function openLink(target, event, allowOpener = false) {
|
|
280
|
+
const { href, target: linkTarget, rel } = target;
|
|
281
|
+
const keyEvent = event;
|
|
282
|
+
const shouldOpenInNewTab = linkTarget === "_blank" || (keyEvent == null ? void 0 : keyEvent.metaKey) || (keyEvent == null ? void 0 : keyEvent.ctrlKey) || (keyEvent == null ? void 0 : keyEvent.shiftKey) || (keyEvent == null ? void 0 : keyEvent.altKey);
|
|
283
|
+
if (shouldOpenInNewTab) {
|
|
284
|
+
const features = !allowOpener && (rel == null ? void 0 : rel.includes("noopener")) ? "noopener" : void 0;
|
|
285
|
+
window.open(href, linkTarget || "_blank", features);
|
|
286
|
+
} else {
|
|
287
|
+
window.location.href = href;
|
|
288
|
+
}
|
|
289
|
+
}
|
|
290
|
+
function areRectanglesOverlapping(a, b) {
|
|
291
|
+
if (a.left > b.right || b.left > a.right) {
|
|
292
|
+
return false;
|
|
293
|
+
}
|
|
294
|
+
if (a.top > b.bottom || b.top > a.bottom) {
|
|
295
|
+
return false;
|
|
296
|
+
}
|
|
297
|
+
return true;
|
|
298
|
+
}
|
|
299
|
+
function getPointClientRect(point) {
|
|
300
|
+
let offsetX = 0;
|
|
301
|
+
let offsetY = 0;
|
|
302
|
+
if (point.width !== void 0 && point.width > 0) {
|
|
303
|
+
offsetX = point.width / 2;
|
|
304
|
+
} else if (point.radiusX !== void 0 && point.radiusX > 0) {
|
|
305
|
+
offsetX = point.radiusX;
|
|
306
|
+
}
|
|
307
|
+
if (point.height !== void 0 && point.height > 0) {
|
|
308
|
+
offsetY = point.height / 2;
|
|
309
|
+
} else if (point.radiusY !== void 0 && point.radiusY > 0) {
|
|
310
|
+
offsetY = point.radiusY;
|
|
311
|
+
}
|
|
312
|
+
return {
|
|
313
|
+
top: point.clientY - offsetY,
|
|
314
|
+
right: point.clientX + offsetX,
|
|
315
|
+
bottom: point.clientY + offsetY,
|
|
316
|
+
left: point.clientX - offsetX
|
|
317
|
+
};
|
|
318
|
+
}
|
|
319
|
+
function isPointOverTarget(point, target) {
|
|
320
|
+
const rect = target.getBoundingClientRect();
|
|
321
|
+
const pointRect = getPointClientRect(point);
|
|
322
|
+
return areRectanglesOverlapping(
|
|
323
|
+
{
|
|
324
|
+
top: rect.top,
|
|
325
|
+
right: rect.right,
|
|
326
|
+
bottom: rect.bottom,
|
|
327
|
+
left: rect.left
|
|
328
|
+
},
|
|
329
|
+
pointRect
|
|
330
|
+
);
|
|
331
|
+
}
|
|
332
|
+
function getTouchFromEvent(event) {
|
|
333
|
+
const { targetTouches } = event;
|
|
334
|
+
if (targetTouches.length > 0) {
|
|
335
|
+
return targetTouches[0];
|
|
336
|
+
}
|
|
337
|
+
return null;
|
|
338
|
+
}
|
|
339
|
+
function getTouchById(event, pointerId) {
|
|
340
|
+
if (pointerId == null) {
|
|
341
|
+
return null;
|
|
342
|
+
}
|
|
343
|
+
const { changedTouches } = event;
|
|
344
|
+
for (let i = 0; i < changedTouches.length; i++) {
|
|
345
|
+
const touch = changedTouches[i];
|
|
346
|
+
if (touch.identifier === pointerId) {
|
|
347
|
+
return touch;
|
|
348
|
+
}
|
|
349
|
+
}
|
|
350
|
+
return null;
|
|
351
|
+
}
|
|
352
|
+
function isVirtualClick(event) {
|
|
353
|
+
if (event.mozInputSource === 0 && event.isTrusted) {
|
|
354
|
+
return true;
|
|
355
|
+
}
|
|
356
|
+
if (isAndroidTalkBackClick(event)) {
|
|
357
|
+
return true;
|
|
358
|
+
}
|
|
359
|
+
return event.detail === 0 && !event.pointerType;
|
|
360
|
+
}
|
|
361
|
+
function isAndroidTalkBackClick(event) {
|
|
362
|
+
return event.detail === 1 && event.offsetX === 0 && event.offsetY === 0;
|
|
363
|
+
}
|
|
364
|
+
function isVirtualPointerEvent(event) {
|
|
365
|
+
return event.width === 0 && event.height === 0 || // Some screen readers send events with pointerType but no actual pointer
|
|
366
|
+
event.pointerType === "mouse" && event.width === 1 && event.height === 1 && event.pressure === 0 && event.detail === 0 && event.buttons === 0;
|
|
367
|
+
}
|
|
368
|
+
function setEventTarget(event, target) {
|
|
369
|
+
Object.defineProperty(event, "target", {
|
|
370
|
+
value: target,
|
|
371
|
+
writable: false,
|
|
372
|
+
configurable: true
|
|
373
|
+
});
|
|
374
|
+
Object.defineProperty(event, "currentTarget", {
|
|
375
|
+
value: target,
|
|
376
|
+
writable: false,
|
|
377
|
+
configurable: true
|
|
378
|
+
});
|
|
379
|
+
}
|
|
380
|
+
let state = "default";
|
|
381
|
+
let savedUserSelect = "";
|
|
382
|
+
let modifiedElementMap = /* @__PURE__ */ new WeakMap();
|
|
383
|
+
function disableTextSelection(target) {
|
|
384
|
+
if (isIOS()) {
|
|
385
|
+
if (state === "default") {
|
|
386
|
+
const documentElement = getOwnerDocument(target).documentElement;
|
|
387
|
+
savedUserSelect = documentElement.style.webkitUserSelect;
|
|
388
|
+
documentElement.style.webkitUserSelect = "none";
|
|
389
|
+
}
|
|
390
|
+
state = "disabled";
|
|
391
|
+
} else if (target) {
|
|
392
|
+
const element = target;
|
|
393
|
+
if (!modifiedElementMap.has(element)) {
|
|
394
|
+
modifiedElementMap.set(element, element.style.userSelect);
|
|
395
|
+
element.style.userSelect = "none";
|
|
396
|
+
}
|
|
397
|
+
}
|
|
398
|
+
}
|
|
399
|
+
function restoreTextSelection(target) {
|
|
400
|
+
if (isIOS()) {
|
|
401
|
+
if (state !== "disabled") {
|
|
402
|
+
return;
|
|
403
|
+
}
|
|
404
|
+
state = "restoring";
|
|
405
|
+
setTimeout(() => {
|
|
406
|
+
runAfterTransition(() => {
|
|
407
|
+
if (state === "restoring") {
|
|
408
|
+
const documentElement = getOwnerDocument(target).documentElement;
|
|
409
|
+
if (savedUserSelect) {
|
|
410
|
+
documentElement.style.webkitUserSelect = savedUserSelect;
|
|
411
|
+
} else {
|
|
412
|
+
documentElement.style.removeProperty("-webkit-user-select");
|
|
413
|
+
}
|
|
414
|
+
savedUserSelect = "";
|
|
415
|
+
state = "default";
|
|
416
|
+
}
|
|
417
|
+
});
|
|
418
|
+
}, 300);
|
|
419
|
+
} else if (target) {
|
|
420
|
+
const element = target;
|
|
421
|
+
const savedValue = modifiedElementMap.get(element);
|
|
422
|
+
if (savedValue !== void 0) {
|
|
423
|
+
if (savedValue) {
|
|
424
|
+
element.style.userSelect = savedValue;
|
|
425
|
+
} else {
|
|
426
|
+
element.style.removeProperty("user-select");
|
|
427
|
+
}
|
|
428
|
+
modifiedElementMap.delete(element);
|
|
429
|
+
}
|
|
430
|
+
}
|
|
431
|
+
}
|
|
432
|
+
const pendingTransitions = /* @__PURE__ */ new Set();
|
|
433
|
+
let transitionTimeout = null;
|
|
434
|
+
function runAfterTransition(callback) {
|
|
435
|
+
pendingTransitions.add(callback);
|
|
436
|
+
if (transitionTimeout != null) {
|
|
437
|
+
clearTimeout(transitionTimeout);
|
|
438
|
+
}
|
|
439
|
+
transitionTimeout = setTimeout(() => {
|
|
440
|
+
for (const cb of pendingTransitions) {
|
|
441
|
+
cb();
|
|
442
|
+
}
|
|
443
|
+
pendingTransitions.clear();
|
|
444
|
+
transitionTimeout = null;
|
|
445
|
+
}, 0);
|
|
446
|
+
}
|
|
447
|
+
function focusWithoutScrolling(element) {
|
|
448
|
+
if (!element) return;
|
|
449
|
+
try {
|
|
450
|
+
element.focus({ preventScroll: true });
|
|
451
|
+
} catch {
|
|
452
|
+
const scrollableElements = getScrollableAncestors(element);
|
|
453
|
+
const scrollPositions = scrollableElements.map((el) => ({
|
|
454
|
+
element: el,
|
|
455
|
+
scrollTop: el.scrollTop,
|
|
456
|
+
scrollLeft: el.scrollLeft
|
|
457
|
+
}));
|
|
458
|
+
element.focus();
|
|
459
|
+
for (const { element: el, scrollTop, scrollLeft } of scrollPositions) {
|
|
460
|
+
el.scrollTop = scrollTop;
|
|
461
|
+
el.scrollLeft = scrollLeft;
|
|
462
|
+
}
|
|
463
|
+
}
|
|
464
|
+
}
|
|
465
|
+
function getScrollableAncestors(element) {
|
|
466
|
+
const ancestors = [];
|
|
467
|
+
let parent = element.parentElement;
|
|
468
|
+
while (parent) {
|
|
469
|
+
const style = getComputedStyle(parent);
|
|
470
|
+
const overflowY = style.overflowY;
|
|
471
|
+
const overflowX = style.overflowX;
|
|
472
|
+
if (overflowY === "auto" || overflowY === "scroll" || overflowX === "auto" || overflowX === "scroll") {
|
|
473
|
+
ancestors.push(parent);
|
|
474
|
+
}
|
|
475
|
+
parent = parent.parentElement;
|
|
476
|
+
}
|
|
477
|
+
const doc = getOwnerDocument(element);
|
|
478
|
+
ancestors.push(doc.documentElement);
|
|
479
|
+
return ancestors;
|
|
480
|
+
}
|
|
481
|
+
let ignoreFocus = false;
|
|
482
|
+
let preventFocusTimeout = null;
|
|
483
|
+
function preventFocus(target) {
|
|
484
|
+
const focusableAncestor = findFocusableAncestor(target);
|
|
485
|
+
if (!focusableAncestor) return;
|
|
486
|
+
const document2 = getOwnerDocument(target);
|
|
487
|
+
const activeElement = document2.activeElement;
|
|
488
|
+
ignoreFocus = true;
|
|
489
|
+
const onFocus = (e) => {
|
|
490
|
+
if (ignoreFocus) {
|
|
491
|
+
e.stopImmediatePropagation();
|
|
492
|
+
if (activeElement && activeElement !== document2.body) {
|
|
493
|
+
activeElement.focus();
|
|
494
|
+
}
|
|
495
|
+
}
|
|
496
|
+
};
|
|
497
|
+
const onBlur = (e) => {
|
|
498
|
+
if (ignoreFocus) {
|
|
499
|
+
e.stopImmediatePropagation();
|
|
500
|
+
}
|
|
501
|
+
};
|
|
502
|
+
const el = focusableAncestor;
|
|
503
|
+
el.addEventListener("focus", onFocus, true);
|
|
504
|
+
el.addEventListener("blur", onBlur, true);
|
|
505
|
+
el.addEventListener("focusin", onFocus, true);
|
|
506
|
+
el.addEventListener("focusout", onBlur, true);
|
|
507
|
+
if (preventFocusTimeout != null) {
|
|
508
|
+
clearTimeout(preventFocusTimeout);
|
|
509
|
+
}
|
|
510
|
+
preventFocusTimeout = setTimeout(() => {
|
|
511
|
+
ignoreFocus = false;
|
|
512
|
+
el.removeEventListener("focus", onFocus, true);
|
|
513
|
+
el.removeEventListener("blur", onBlur, true);
|
|
514
|
+
el.removeEventListener("focusin", onFocus, true);
|
|
515
|
+
el.removeEventListener("focusout", onBlur, true);
|
|
516
|
+
preventFocusTimeout = null;
|
|
517
|
+
}, 0);
|
|
518
|
+
}
|
|
519
|
+
function findFocusableAncestor(element) {
|
|
520
|
+
let current = element;
|
|
521
|
+
while (current) {
|
|
522
|
+
if (current.hasAttribute("tabindex") || ["INPUT", "BUTTON", "SELECT", "TEXTAREA", "A"].includes(current.tagName)) {
|
|
523
|
+
return current;
|
|
524
|
+
}
|
|
525
|
+
current = current.parentElement;
|
|
526
|
+
}
|
|
527
|
+
return element;
|
|
528
|
+
}
|
|
529
|
+
const focusSafely = focusWithoutScrolling;
|
|
530
|
+
function createGlobalListeners() {
|
|
531
|
+
const listeners = [];
|
|
532
|
+
function addGlobalListener(type, handler, options) {
|
|
533
|
+
const target = (options == null ? void 0 : options.isWindow) ? window : document;
|
|
534
|
+
const listenerOptions = options ? {
|
|
535
|
+
capture: options.capture,
|
|
536
|
+
passive: options.passive,
|
|
537
|
+
once: options.once
|
|
538
|
+
} : void 0;
|
|
539
|
+
target.addEventListener(type, handler, listenerOptions);
|
|
540
|
+
listeners.push({ target, type, handler, options: listenerOptions });
|
|
541
|
+
}
|
|
542
|
+
function removeGlobalListener(type, handler, options) {
|
|
543
|
+
const target = (options == null ? void 0 : options.isWindow) ? window : document;
|
|
544
|
+
const listenerOptions = options ? {
|
|
545
|
+
capture: options.capture
|
|
546
|
+
} : void 0;
|
|
547
|
+
target.removeEventListener(type, handler, listenerOptions);
|
|
548
|
+
const index = listeners.findIndex(
|
|
549
|
+
(l) => {
|
|
550
|
+
var _a;
|
|
551
|
+
return l.target === target && l.type === type && l.handler === handler && ((_a = l.options) == null ? void 0 : _a.capture) === (listenerOptions == null ? void 0 : listenerOptions.capture);
|
|
552
|
+
}
|
|
553
|
+
);
|
|
554
|
+
if (index !== -1) {
|
|
555
|
+
listeners.splice(index, 1);
|
|
556
|
+
}
|
|
557
|
+
}
|
|
558
|
+
function removeAllGlobalListeners() {
|
|
559
|
+
for (const { target, type, handler, options } of listeners) {
|
|
560
|
+
target.removeEventListener(type, handler, options);
|
|
561
|
+
}
|
|
562
|
+
listeners.length = 0;
|
|
563
|
+
}
|
|
564
|
+
onCleanup(removeAllGlobalListeners);
|
|
565
|
+
return {
|
|
566
|
+
addGlobalListener,
|
|
567
|
+
removeGlobalListener,
|
|
568
|
+
removeAllGlobalListeners
|
|
569
|
+
};
|
|
570
|
+
}
|
|
571
|
+
function isDisabledValue$2(isDisabled) {
|
|
572
|
+
if (typeof isDisabled === "function") {
|
|
573
|
+
return isDisabled();
|
|
574
|
+
}
|
|
575
|
+
return isDisabled ?? false;
|
|
576
|
+
}
|
|
577
|
+
function isPressedValue(isPressed) {
|
|
578
|
+
if (typeof isPressed === "function") {
|
|
579
|
+
return isPressed();
|
|
580
|
+
}
|
|
581
|
+
return isPressed ?? false;
|
|
582
|
+
}
|
|
583
|
+
const LINK_CLICKED = Symbol("linkClicked");
|
|
584
|
+
let pressableCSSInjected = false;
|
|
585
|
+
function injectPressableCSS() {
|
|
586
|
+
if (pressableCSSInjected || typeof document === "undefined") return;
|
|
587
|
+
const style = document.createElement("style");
|
|
588
|
+
style.id = "solidaria-pressable-style";
|
|
589
|
+
style.textContent = `
|
|
590
|
+
[data-solidaria-pressable] {
|
|
591
|
+
touch-action: pan-x pan-y pinch-zoom;
|
|
592
|
+
}
|
|
593
|
+
`;
|
|
594
|
+
document.head.appendChild(style);
|
|
595
|
+
pressableCSSInjected = true;
|
|
596
|
+
}
|
|
597
|
+
function createPress(props = {}) {
|
|
598
|
+
const [internalIsPressed, setInternalIsPressed] = createSignal(false);
|
|
599
|
+
const isPressed = () => {
|
|
600
|
+
const controlledPressed = isPressedValue(props.isPressed);
|
|
601
|
+
if (controlledPressed) {
|
|
602
|
+
return controlledPressed;
|
|
603
|
+
}
|
|
604
|
+
return internalIsPressed();
|
|
605
|
+
};
|
|
606
|
+
let pressState = {
|
|
607
|
+
isPressed: false,
|
|
608
|
+
ignoreEmulatedMouseEvents: false,
|
|
609
|
+
ignoreClickAfterPress: false,
|
|
610
|
+
didFirePressStart: false,
|
|
611
|
+
isTriggeringEvent: false,
|
|
612
|
+
activePointerId: null,
|
|
613
|
+
target: null,
|
|
614
|
+
isOverTarget: false,
|
|
615
|
+
pointerType: null,
|
|
616
|
+
userSelect: void 0,
|
|
617
|
+
metaKeyEvents: null,
|
|
618
|
+
clickCleanup: null
|
|
619
|
+
};
|
|
620
|
+
const { addGlobalListener, removeAllGlobalListeners } = createGlobalListeners();
|
|
621
|
+
injectPressableCSS();
|
|
622
|
+
const triggerPressStart = (originalEvent, pointerType) => {
|
|
623
|
+
if (isDisabledValue$2(props.isDisabled) || pressState.didFirePressStart) {
|
|
624
|
+
return false;
|
|
625
|
+
}
|
|
626
|
+
let shouldStopPropagation = true;
|
|
627
|
+
pressState.isTriggeringEvent = true;
|
|
628
|
+
if (props.onPressStart) {
|
|
629
|
+
const event = createPressEvent("pressstart", pointerType, originalEvent, pressState.target);
|
|
630
|
+
props.onPressStart(event);
|
|
631
|
+
shouldStopPropagation = event.shouldStopPropagation;
|
|
632
|
+
}
|
|
633
|
+
if (props.onPressChange) {
|
|
634
|
+
props.onPressChange(true);
|
|
635
|
+
}
|
|
636
|
+
pressState.isTriggeringEvent = false;
|
|
637
|
+
pressState.didFirePressStart = true;
|
|
638
|
+
setInternalIsPressed(true);
|
|
639
|
+
return shouldStopPropagation;
|
|
640
|
+
};
|
|
641
|
+
const triggerPressEnd = (originalEvent, pointerType, wasPressed = true) => {
|
|
642
|
+
if (!pressState.didFirePressStart) {
|
|
643
|
+
return;
|
|
644
|
+
}
|
|
645
|
+
pressState.ignoreClickAfterPress = true;
|
|
646
|
+
pressState.didFirePressStart = false;
|
|
647
|
+
pressState.isTriggeringEvent = true;
|
|
648
|
+
if (props.onPressEnd) {
|
|
649
|
+
const event = createPressEvent("pressend", pointerType, originalEvent, pressState.target);
|
|
650
|
+
props.onPressEnd(event);
|
|
651
|
+
}
|
|
652
|
+
if (props.onPressChange) {
|
|
653
|
+
props.onPressChange(false);
|
|
654
|
+
}
|
|
655
|
+
setInternalIsPressed(false);
|
|
656
|
+
if (wasPressed && !isDisabledValue$2(props.isDisabled)) {
|
|
657
|
+
if (props.onPress) {
|
|
658
|
+
const event = createPressEvent("press", pointerType, originalEvent, pressState.target);
|
|
659
|
+
props.onPress(event);
|
|
660
|
+
}
|
|
661
|
+
}
|
|
662
|
+
pressState.isTriggeringEvent = false;
|
|
663
|
+
};
|
|
664
|
+
const triggerPressUp = (originalEvent, pointerType) => {
|
|
665
|
+
if (isDisabledValue$2(props.isDisabled)) {
|
|
666
|
+
return;
|
|
667
|
+
}
|
|
668
|
+
if (props.onPressUp) {
|
|
669
|
+
pressState.isTriggeringEvent = true;
|
|
670
|
+
const event = createPressEvent("pressup", pointerType, originalEvent, pressState.target);
|
|
671
|
+
props.onPressUp(event);
|
|
672
|
+
pressState.isTriggeringEvent = false;
|
|
673
|
+
}
|
|
674
|
+
};
|
|
675
|
+
const cancel = (originalEvent) => {
|
|
676
|
+
if (!pressState.isPressed) {
|
|
677
|
+
return;
|
|
678
|
+
}
|
|
679
|
+
if (pressState.isOverTarget && pressState.target) {
|
|
680
|
+
triggerPressEnd(originalEvent, pressState.pointerType ?? "mouse", false);
|
|
681
|
+
}
|
|
682
|
+
pressState.isPressed = false;
|
|
683
|
+
pressState.isOverTarget = false;
|
|
684
|
+
pressState.activePointerId = null;
|
|
685
|
+
pressState.pointerType = null;
|
|
686
|
+
removeAllGlobalListeners();
|
|
687
|
+
if (pressState.clickCleanup) {
|
|
688
|
+
pressState.clickCleanup();
|
|
689
|
+
pressState.clickCleanup = null;
|
|
690
|
+
}
|
|
691
|
+
if (!props.allowTextSelectionOnPress) {
|
|
692
|
+
restoreTextSelection(pressState.target);
|
|
693
|
+
}
|
|
694
|
+
};
|
|
695
|
+
const onPointerDown = (e) => {
|
|
696
|
+
if (e.button !== 0 || !nodeContains(e.currentTarget, getEventTarget(e))) {
|
|
697
|
+
return;
|
|
698
|
+
}
|
|
699
|
+
if (isVirtualPointerEvent(e)) {
|
|
700
|
+
pressState.pointerType = "virtual";
|
|
701
|
+
return;
|
|
702
|
+
}
|
|
703
|
+
pressState.pointerType = e.pointerType;
|
|
704
|
+
if (!pressState.isPressed) {
|
|
705
|
+
pressState.isPressed = true;
|
|
706
|
+
pressState.isOverTarget = true;
|
|
707
|
+
pressState.activePointerId = e.pointerId;
|
|
708
|
+
pressState.target = e.currentTarget;
|
|
709
|
+
if (!props.allowTextSelectionOnPress) {
|
|
710
|
+
disableTextSelection(pressState.target);
|
|
711
|
+
}
|
|
712
|
+
const shouldStopPropagation = triggerPressStart(e, pressState.pointerType);
|
|
713
|
+
if (shouldStopPropagation) {
|
|
714
|
+
e.stopPropagation();
|
|
715
|
+
}
|
|
716
|
+
addGlobalListener("pointerup", onPointerUp);
|
|
717
|
+
addGlobalListener("pointercancel", onPointerCancel);
|
|
718
|
+
}
|
|
719
|
+
};
|
|
720
|
+
const onMouseDownPointer = (e) => {
|
|
721
|
+
if (!nodeContains(e.currentTarget, getEventTarget(e))) {
|
|
722
|
+
return;
|
|
723
|
+
}
|
|
724
|
+
if (e.button === 0) {
|
|
725
|
+
if (props.preventFocusOnPress) {
|
|
726
|
+
preventFocus(e.currentTarget);
|
|
727
|
+
}
|
|
728
|
+
e.stopPropagation();
|
|
729
|
+
}
|
|
730
|
+
};
|
|
731
|
+
const onPointerUp = (e) => {
|
|
732
|
+
if (e.pointerId !== pressState.activePointerId || !pressState.isPressed || e.button !== 0 || !pressState.target) {
|
|
733
|
+
return;
|
|
734
|
+
}
|
|
735
|
+
const isOverTarget = nodeContains(pressState.target, getEventTarget(e));
|
|
736
|
+
if (isOverTarget && pressState.pointerType != null && pressState.pointerType !== "virtual") {
|
|
737
|
+
let clickFired = false;
|
|
738
|
+
const timeout = setTimeout(() => {
|
|
739
|
+
if (typeof HTMLElement === "undefined") {
|
|
740
|
+
return;
|
|
741
|
+
}
|
|
742
|
+
if (pressState.isPressed && pressState.target instanceof HTMLElement) {
|
|
743
|
+
if (clickFired) {
|
|
744
|
+
cancel(e);
|
|
745
|
+
} else {
|
|
746
|
+
pressState.target.focus();
|
|
747
|
+
pressState.target.click();
|
|
748
|
+
}
|
|
749
|
+
}
|
|
750
|
+
}, 80);
|
|
751
|
+
const doc = pressState.target.ownerDocument ?? document;
|
|
752
|
+
const clickListener = () => {
|
|
753
|
+
clickFired = true;
|
|
754
|
+
};
|
|
755
|
+
doc.addEventListener("click", clickListener, true);
|
|
756
|
+
pressState.clickCleanup = () => {
|
|
757
|
+
clearTimeout(timeout);
|
|
758
|
+
doc.removeEventListener("click", clickListener, true);
|
|
759
|
+
};
|
|
760
|
+
pressState.isOverTarget = false;
|
|
761
|
+
} else {
|
|
762
|
+
cancel(e);
|
|
763
|
+
}
|
|
764
|
+
};
|
|
765
|
+
const onPointerCancel = (e) => {
|
|
766
|
+
if (e.pointerId === pressState.activePointerId) {
|
|
767
|
+
cancel(e);
|
|
768
|
+
}
|
|
769
|
+
};
|
|
770
|
+
const onPointerEnter = (e) => {
|
|
771
|
+
if (e.pointerId === pressState.activePointerId && pressState.target && !pressState.isOverTarget && pressState.pointerType != null) {
|
|
772
|
+
pressState.isOverTarget = true;
|
|
773
|
+
triggerPressStart(e, pressState.pointerType);
|
|
774
|
+
}
|
|
775
|
+
};
|
|
776
|
+
const onPointerLeave = (e) => {
|
|
777
|
+
if (e.pointerId === pressState.activePointerId && pressState.target && pressState.isOverTarget && pressState.pointerType != null) {
|
|
778
|
+
pressState.isOverTarget = false;
|
|
779
|
+
triggerPressEnd(e, pressState.pointerType, false);
|
|
780
|
+
if (props.shouldCancelOnPointerExit) {
|
|
781
|
+
cancel(e);
|
|
782
|
+
}
|
|
783
|
+
}
|
|
784
|
+
};
|
|
785
|
+
const onTouchStart = (e) => {
|
|
786
|
+
if (isDisabledValue$2(props.isDisabled)) {
|
|
787
|
+
return;
|
|
788
|
+
}
|
|
789
|
+
if (pressState.isPressed) {
|
|
790
|
+
return;
|
|
791
|
+
}
|
|
792
|
+
const touch = getTouchFromEvent(e);
|
|
793
|
+
if (!touch) {
|
|
794
|
+
return;
|
|
795
|
+
}
|
|
796
|
+
pressState.activePointerId = touch.identifier;
|
|
797
|
+
pressState.ignoreEmulatedMouseEvents = true;
|
|
798
|
+
pressState.isOverTarget = true;
|
|
799
|
+
pressState.isPressed = true;
|
|
800
|
+
pressState.target = e.currentTarget;
|
|
801
|
+
pressState.pointerType = "touch";
|
|
802
|
+
if (!props.allowTextSelectionOnPress) {
|
|
803
|
+
disableTextSelection(pressState.target);
|
|
804
|
+
}
|
|
805
|
+
const shouldStopPropagation = triggerPressStart(e, "touch");
|
|
806
|
+
if (shouldStopPropagation) {
|
|
807
|
+
e.stopPropagation();
|
|
808
|
+
}
|
|
809
|
+
addGlobalListener("scroll", onScroll, { capture: true, isWindow: true });
|
|
810
|
+
};
|
|
811
|
+
const onTouchMove = (e) => {
|
|
812
|
+
if (!pressState.isPressed) {
|
|
813
|
+
return;
|
|
814
|
+
}
|
|
815
|
+
const touch = getTouchById(e, pressState.activePointerId);
|
|
816
|
+
if (!touch) {
|
|
817
|
+
return;
|
|
818
|
+
}
|
|
819
|
+
const target = pressState.target;
|
|
820
|
+
const isOverTarget = isPointOverTarget(touch, target);
|
|
821
|
+
if (isOverTarget !== pressState.isOverTarget) {
|
|
822
|
+
pressState.isOverTarget = isOverTarget;
|
|
823
|
+
if (isOverTarget) {
|
|
824
|
+
triggerPressStart(e, "touch");
|
|
825
|
+
} else {
|
|
826
|
+
triggerPressEnd(e, "touch", false);
|
|
827
|
+
if (props.shouldCancelOnPointerExit) {
|
|
828
|
+
cancel(e);
|
|
829
|
+
}
|
|
830
|
+
}
|
|
831
|
+
}
|
|
832
|
+
};
|
|
833
|
+
const onTouchEnd = (e) => {
|
|
834
|
+
if (!pressState.isPressed) {
|
|
835
|
+
return;
|
|
836
|
+
}
|
|
837
|
+
const touch = getTouchById(e, pressState.activePointerId);
|
|
838
|
+
if (!touch) {
|
|
839
|
+
return;
|
|
840
|
+
}
|
|
841
|
+
const target = pressState.target;
|
|
842
|
+
const isOverTarget = isPointOverTarget(touch, target);
|
|
843
|
+
if (isOverTarget) {
|
|
844
|
+
triggerPressUp(e, "touch");
|
|
845
|
+
}
|
|
846
|
+
triggerPressEnd(e, "touch", isOverTarget && pressState.isOverTarget);
|
|
847
|
+
pressState.isPressed = false;
|
|
848
|
+
pressState.isOverTarget = false;
|
|
849
|
+
pressState.activePointerId = null;
|
|
850
|
+
pressState.pointerType = null;
|
|
851
|
+
removeAllGlobalListeners();
|
|
852
|
+
if (!props.allowTextSelectionOnPress) {
|
|
853
|
+
restoreTextSelection(target);
|
|
854
|
+
}
|
|
855
|
+
};
|
|
856
|
+
const onTouchCancel = (e) => {
|
|
857
|
+
cancel(e);
|
|
858
|
+
};
|
|
859
|
+
const onScroll = (e) => {
|
|
860
|
+
if (pressState.isPressed && nodeContains(e.target, pressState.target)) {
|
|
861
|
+
cancel(e);
|
|
862
|
+
}
|
|
863
|
+
};
|
|
864
|
+
const onMouseDownFallback = (e) => {
|
|
865
|
+
if (e.button !== 0) {
|
|
866
|
+
return;
|
|
867
|
+
}
|
|
868
|
+
if (pressState.ignoreEmulatedMouseEvents) {
|
|
869
|
+
e.stopPropagation();
|
|
870
|
+
return;
|
|
871
|
+
}
|
|
872
|
+
pressState.isPressed = true;
|
|
873
|
+
pressState.isOverTarget = true;
|
|
874
|
+
pressState.target = e.currentTarget;
|
|
875
|
+
pressState.pointerType = isVirtualClick(e) ? "virtual" : "mouse";
|
|
876
|
+
const shouldStopPropagation = triggerPressStart(e, pressState.pointerType);
|
|
877
|
+
if (shouldStopPropagation) {
|
|
878
|
+
e.stopPropagation();
|
|
879
|
+
}
|
|
880
|
+
addGlobalListener("mouseup", onMouseUpFallback);
|
|
881
|
+
};
|
|
882
|
+
const onMouseUpFallback = (e) => {
|
|
883
|
+
if (e.button !== 0) {
|
|
884
|
+
return;
|
|
885
|
+
}
|
|
886
|
+
if (!pressState.ignoreEmulatedMouseEvents && e.button === 0 && !pressState.isPressed) {
|
|
887
|
+
triggerPressUp(e, pressState.pointerType || "mouse");
|
|
888
|
+
}
|
|
889
|
+
};
|
|
890
|
+
const onMouseEnterFallback = (e) => {
|
|
891
|
+
if (!pressState.isPressed || pressState.ignoreEmulatedMouseEvents) {
|
|
892
|
+
return;
|
|
893
|
+
}
|
|
894
|
+
if (pressState.isPressed && !pressState.ignoreEmulatedMouseEvents && pressState.pointerType != null) {
|
|
895
|
+
pressState.isOverTarget = true;
|
|
896
|
+
triggerPressStart(e, pressState.pointerType);
|
|
897
|
+
}
|
|
898
|
+
};
|
|
899
|
+
const onMouseLeaveFallback = (e) => {
|
|
900
|
+
if (!pressState.isPressed || pressState.ignoreEmulatedMouseEvents) {
|
|
901
|
+
return;
|
|
902
|
+
}
|
|
903
|
+
if (pressState.isPressed && !pressState.ignoreEmulatedMouseEvents && pressState.pointerType != null) {
|
|
904
|
+
pressState.isOverTarget = false;
|
|
905
|
+
triggerPressEnd(e, pressState.pointerType, false);
|
|
906
|
+
if (props.shouldCancelOnPointerExit) {
|
|
907
|
+
cancel(e);
|
|
908
|
+
}
|
|
909
|
+
}
|
|
910
|
+
};
|
|
911
|
+
const onKeyDown = (e) => {
|
|
912
|
+
if (isDisabledValue$2(props.isDisabled)) {
|
|
913
|
+
return;
|
|
914
|
+
}
|
|
915
|
+
if (!isValidKeyboardEvent(e, e.currentTarget)) {
|
|
916
|
+
if (e.key === "Enter") {
|
|
917
|
+
e.stopPropagation();
|
|
918
|
+
}
|
|
919
|
+
return;
|
|
920
|
+
}
|
|
921
|
+
if (e.repeat) {
|
|
922
|
+
e.preventDefault();
|
|
923
|
+
return;
|
|
924
|
+
}
|
|
925
|
+
pressState.target = e.currentTarget;
|
|
926
|
+
pressState.isPressed = true;
|
|
927
|
+
pressState.isOverTarget = true;
|
|
928
|
+
pressState.pointerType = "keyboard";
|
|
929
|
+
const shouldStopPropagation = triggerPressStart(e, "keyboard");
|
|
930
|
+
if (shouldStopPropagation) {
|
|
931
|
+
e.stopPropagation();
|
|
932
|
+
}
|
|
933
|
+
if (shouldPreventDefaultKeyboard(e.currentTarget, e.key)) {
|
|
934
|
+
e.preventDefault();
|
|
935
|
+
}
|
|
936
|
+
if (isMac() && e.metaKey && !e.ctrlKey && !e.altKey) {
|
|
937
|
+
pressState.metaKeyEvents = pressState.metaKeyEvents || /* @__PURE__ */ new Map();
|
|
938
|
+
pressState.metaKeyEvents.set(e.key, e);
|
|
939
|
+
}
|
|
940
|
+
if (e.key === "Enter") {
|
|
941
|
+
pressState.ignoreClickAfterPress = true;
|
|
942
|
+
}
|
|
943
|
+
addGlobalListener("keyup", onKeyUp, { capture: true });
|
|
944
|
+
};
|
|
945
|
+
const onKeyUp = (e) => {
|
|
946
|
+
var _a, _b;
|
|
947
|
+
if (!pressState.isPressed || pressState.pointerType !== "keyboard") {
|
|
948
|
+
return;
|
|
949
|
+
}
|
|
950
|
+
if (!isValidKeyboardEvent(e, pressState.target)) {
|
|
951
|
+
return;
|
|
952
|
+
}
|
|
953
|
+
if (isMac() && e.key === "Meta" && ((_a = pressState.metaKeyEvents) == null ? void 0 : _a.size)) {
|
|
954
|
+
for (const [key, event] of pressState.metaKeyEvents) {
|
|
955
|
+
(_b = pressState.target) == null ? void 0 : _b.dispatchEvent(
|
|
956
|
+
new KeyboardEvent("keyup", {
|
|
957
|
+
key,
|
|
958
|
+
code: event.code,
|
|
959
|
+
bubbles: true,
|
|
960
|
+
cancelable: true
|
|
961
|
+
})
|
|
962
|
+
);
|
|
963
|
+
}
|
|
964
|
+
pressState.metaKeyEvents.clear();
|
|
965
|
+
return;
|
|
966
|
+
}
|
|
967
|
+
const target = pressState.target;
|
|
968
|
+
triggerPressUp(e, "keyboard");
|
|
969
|
+
triggerPressEnd(e, "keyboard", pressState.isOverTarget);
|
|
970
|
+
pressState.isPressed = false;
|
|
971
|
+
pressState.pointerType = null;
|
|
972
|
+
removeAllGlobalListeners();
|
|
973
|
+
e.preventDefault();
|
|
974
|
+
if (e.key === " " && isHTMLAnchorLink(target) && !target[LINK_CLICKED]) {
|
|
975
|
+
target[LINK_CLICKED] = true;
|
|
976
|
+
openLink(target, e);
|
|
977
|
+
setTimeout(() => {
|
|
978
|
+
delete target[LINK_CLICKED];
|
|
979
|
+
}, 0);
|
|
980
|
+
}
|
|
981
|
+
if (e.key === " ") {
|
|
982
|
+
pressState.ignoreClickAfterPress = true;
|
|
983
|
+
}
|
|
984
|
+
};
|
|
985
|
+
const onClick = (e) => {
|
|
986
|
+
if (!nodeContains(e.currentTarget, e.target)) {
|
|
987
|
+
return;
|
|
988
|
+
}
|
|
989
|
+
if (e.button === 0 && !pressState.isTriggeringEvent) {
|
|
990
|
+
if (isDisabledValue$2(props.isDisabled)) {
|
|
991
|
+
e.preventDefault();
|
|
992
|
+
return;
|
|
993
|
+
}
|
|
994
|
+
if (!pressState.ignoreEmulatedMouseEvents && !pressState.isPressed && (pressState.pointerType === "virtual" || isVirtualClick(e))) {
|
|
995
|
+
pressState.target = e.currentTarget;
|
|
996
|
+
triggerPressStart(e, "virtual");
|
|
997
|
+
triggerPressUp(e, "virtual");
|
|
998
|
+
triggerPressEnd(e, "virtual", true);
|
|
999
|
+
} else if (pressState.isPressed && pressState.pointerType !== "keyboard") {
|
|
1000
|
+
const pointerType = pressState.pointerType || e.pointerType || "virtual";
|
|
1001
|
+
triggerPressUp(e, pointerType);
|
|
1002
|
+
triggerPressEnd(e, pointerType, true);
|
|
1003
|
+
pressState.isOverTarget = false;
|
|
1004
|
+
cancel(e);
|
|
1005
|
+
}
|
|
1006
|
+
pressState.ignoreEmulatedMouseEvents = false;
|
|
1007
|
+
}
|
|
1008
|
+
};
|
|
1009
|
+
const onDragStart = (e) => {
|
|
1010
|
+
if (pressState.isPressed) {
|
|
1011
|
+
cancel(e);
|
|
1012
|
+
}
|
|
1013
|
+
};
|
|
1014
|
+
const pressProps = typeof PointerEvent !== "undefined" ? {
|
|
1015
|
+
// Keyboard events
|
|
1016
|
+
onKeyDown,
|
|
1017
|
+
onKeyUp,
|
|
1018
|
+
onClick,
|
|
1019
|
+
onDragStart,
|
|
1020
|
+
// Pointer events (preferred when available)
|
|
1021
|
+
onPointerDown,
|
|
1022
|
+
onPointerEnter,
|
|
1023
|
+
onPointerLeave,
|
|
1024
|
+
// Mouse down only for focus prevention when using pointer events
|
|
1025
|
+
onMouseDown: onMouseDownPointer,
|
|
1026
|
+
// Touch events (always included for ignoreEmulatedMouseEvents handling)
|
|
1027
|
+
onTouchStart,
|
|
1028
|
+
onTouchMove,
|
|
1029
|
+
onTouchEnd,
|
|
1030
|
+
onTouchCancel,
|
|
1031
|
+
// Attribute for CSS touch-action
|
|
1032
|
+
"data-solidaria-pressable": ""
|
|
1033
|
+
} : {
|
|
1034
|
+
// Keyboard events
|
|
1035
|
+
onKeyDown,
|
|
1036
|
+
onKeyUp,
|
|
1037
|
+
onClick,
|
|
1038
|
+
onDragStart,
|
|
1039
|
+
// Mouse events (fallback when PointerEvent not available)
|
|
1040
|
+
onMouseDown: onMouseDownFallback,
|
|
1041
|
+
onMouseEnter: onMouseEnterFallback,
|
|
1042
|
+
onMouseLeave: onMouseLeaveFallback,
|
|
1043
|
+
// Touch events (always included)
|
|
1044
|
+
onTouchStart,
|
|
1045
|
+
onTouchMove,
|
|
1046
|
+
onTouchEnd,
|
|
1047
|
+
onTouchCancel,
|
|
1048
|
+
// Attribute for CSS touch-action
|
|
1049
|
+
"data-solidaria-pressable": ""
|
|
1050
|
+
};
|
|
1051
|
+
onCleanup(() => {
|
|
1052
|
+
removeAllGlobalListeners();
|
|
1053
|
+
if (pressState.clickCleanup) {
|
|
1054
|
+
pressState.clickCleanup();
|
|
1055
|
+
pressState.clickCleanup = null;
|
|
1056
|
+
}
|
|
1057
|
+
});
|
|
1058
|
+
return {
|
|
1059
|
+
isPressed,
|
|
1060
|
+
pressProps
|
|
1061
|
+
};
|
|
1062
|
+
}
|
|
1063
|
+
function createSyntheticBlurHandler(onBlur) {
|
|
1064
|
+
let isFocused = false;
|
|
1065
|
+
let observer = null;
|
|
1066
|
+
return (_e, target) => {
|
|
1067
|
+
if (target instanceof HTMLButtonElement || target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement || target instanceof HTMLSelectElement) {
|
|
1068
|
+
isFocused = true;
|
|
1069
|
+
const onBlurHandler = (blurEvent) => {
|
|
1070
|
+
isFocused = false;
|
|
1071
|
+
if (target.disabled && onBlur) {
|
|
1072
|
+
onBlur(blurEvent);
|
|
1073
|
+
}
|
|
1074
|
+
if (observer) {
|
|
1075
|
+
observer.disconnect();
|
|
1076
|
+
observer = null;
|
|
1077
|
+
}
|
|
1078
|
+
};
|
|
1079
|
+
target.addEventListener("focusout", onBlurHandler, { once: true });
|
|
1080
|
+
observer = new MutationObserver(() => {
|
|
1081
|
+
if (isFocused && target.disabled) {
|
|
1082
|
+
observer == null ? void 0 : observer.disconnect();
|
|
1083
|
+
const relatedTarget = target === document.activeElement ? null : document.activeElement;
|
|
1084
|
+
target.dispatchEvent(new FocusEvent("blur", { relatedTarget }));
|
|
1085
|
+
target.dispatchEvent(new FocusEvent("focusout", { bubbles: true, relatedTarget }));
|
|
1086
|
+
}
|
|
1087
|
+
});
|
|
1088
|
+
observer.observe(target, { attributes: true, attributeFilter: ["disabled"] });
|
|
1089
|
+
return () => {
|
|
1090
|
+
if (observer) {
|
|
1091
|
+
observer.disconnect();
|
|
1092
|
+
observer = null;
|
|
1093
|
+
}
|
|
1094
|
+
};
|
|
1095
|
+
}
|
|
1096
|
+
return void 0;
|
|
1097
|
+
};
|
|
1098
|
+
}
|
|
1099
|
+
function createFocus(props = {}) {
|
|
1100
|
+
const { isDisabled, onFocus: onFocusProp, onBlur: onBlurProp, onFocusChange } = props;
|
|
1101
|
+
let cleanupRef;
|
|
1102
|
+
const syntheticBlurHandler = createSyntheticBlurHandler(onBlurProp);
|
|
1103
|
+
onCleanup(() => {
|
|
1104
|
+
if (cleanupRef) {
|
|
1105
|
+
cleanupRef();
|
|
1106
|
+
}
|
|
1107
|
+
});
|
|
1108
|
+
const onBlur = (e) => {
|
|
1109
|
+
if (e.target === e.currentTarget) {
|
|
1110
|
+
if (onBlurProp) {
|
|
1111
|
+
onBlurProp(e);
|
|
1112
|
+
}
|
|
1113
|
+
if (onFocusChange) {
|
|
1114
|
+
onFocusChange(false);
|
|
1115
|
+
}
|
|
1116
|
+
}
|
|
1117
|
+
};
|
|
1118
|
+
const onFocus = (e) => {
|
|
1119
|
+
const ownerDocument = getOwnerDocument(e.target);
|
|
1120
|
+
const activeElement = ownerDocument == null ? void 0 : ownerDocument.activeElement;
|
|
1121
|
+
if (e.target === e.currentTarget && activeElement === getEventTarget(e)) {
|
|
1122
|
+
if (onFocusProp) {
|
|
1123
|
+
onFocusProp(e);
|
|
1124
|
+
}
|
|
1125
|
+
if (onFocusChange) {
|
|
1126
|
+
onFocusChange(true);
|
|
1127
|
+
}
|
|
1128
|
+
cleanupRef = syntheticBlurHandler(e, e.target);
|
|
1129
|
+
}
|
|
1130
|
+
};
|
|
1131
|
+
if (isDisabled) {
|
|
1132
|
+
return {
|
|
1133
|
+
focusProps: {}
|
|
1134
|
+
};
|
|
1135
|
+
}
|
|
1136
|
+
const hasHandlers = onFocusProp || onFocusChange || onBlurProp;
|
|
1137
|
+
return {
|
|
1138
|
+
focusProps: {
|
|
1139
|
+
onFocus: hasHandlers ? onFocus : void 0,
|
|
1140
|
+
onBlur: onBlurProp || onFocusChange ? onBlur : void 0
|
|
1141
|
+
}
|
|
1142
|
+
};
|
|
1143
|
+
}
|
|
1144
|
+
function createFocusWithin(props = {}) {
|
|
1145
|
+
const { isDisabled, onBlurWithin, onFocusWithin, onFocusWithinChange } = props;
|
|
1146
|
+
let isFocusWithin = false;
|
|
1147
|
+
const { addGlobalListener, removeAllGlobalListeners } = createGlobalListeners();
|
|
1148
|
+
onCleanup(() => {
|
|
1149
|
+
removeAllGlobalListeners();
|
|
1150
|
+
});
|
|
1151
|
+
const onBlur = (e) => {
|
|
1152
|
+
if (!e.currentTarget.contains(e.target)) {
|
|
1153
|
+
return;
|
|
1154
|
+
}
|
|
1155
|
+
if (isFocusWithin && !e.currentTarget.contains(e.relatedTarget)) {
|
|
1156
|
+
isFocusWithin = false;
|
|
1157
|
+
removeAllGlobalListeners();
|
|
1158
|
+
if (onBlurWithin) {
|
|
1159
|
+
onBlurWithin(e);
|
|
1160
|
+
}
|
|
1161
|
+
if (onFocusWithinChange) {
|
|
1162
|
+
onFocusWithinChange(false);
|
|
1163
|
+
}
|
|
1164
|
+
}
|
|
1165
|
+
};
|
|
1166
|
+
const onFocus = (e) => {
|
|
1167
|
+
if (!e.currentTarget.contains(e.target)) {
|
|
1168
|
+
return;
|
|
1169
|
+
}
|
|
1170
|
+
const ownerDocument = getOwnerDocument(e.target);
|
|
1171
|
+
const activeElement = ownerDocument == null ? void 0 : ownerDocument.activeElement;
|
|
1172
|
+
if (!isFocusWithin && activeElement === getEventTarget(e)) {
|
|
1173
|
+
if (onFocusWithin) {
|
|
1174
|
+
onFocusWithin(e);
|
|
1175
|
+
}
|
|
1176
|
+
if (onFocusWithinChange) {
|
|
1177
|
+
onFocusWithinChange(true);
|
|
1178
|
+
}
|
|
1179
|
+
isFocusWithin = true;
|
|
1180
|
+
const currentTarget = e.currentTarget;
|
|
1181
|
+
addGlobalListener(
|
|
1182
|
+
"focus",
|
|
1183
|
+
(focusEvent) => {
|
|
1184
|
+
if (isFocusWithin && !nodeContains(currentTarget, focusEvent.target)) {
|
|
1185
|
+
const window2 = ownerDocument == null ? void 0 : ownerDocument.defaultView;
|
|
1186
|
+
if (window2) {
|
|
1187
|
+
const nativeEvent = new window2.FocusEvent("blur", {
|
|
1188
|
+
relatedTarget: focusEvent.target
|
|
1189
|
+
});
|
|
1190
|
+
setEventTarget(nativeEvent, currentTarget);
|
|
1191
|
+
isFocusWithin = false;
|
|
1192
|
+
removeAllGlobalListeners();
|
|
1193
|
+
if (onBlurWithin) {
|
|
1194
|
+
onBlurWithin(nativeEvent);
|
|
1195
|
+
}
|
|
1196
|
+
if (onFocusWithinChange) {
|
|
1197
|
+
onFocusWithinChange(false);
|
|
1198
|
+
}
|
|
1199
|
+
}
|
|
1200
|
+
}
|
|
1201
|
+
},
|
|
1202
|
+
{ capture: true }
|
|
1203
|
+
);
|
|
1204
|
+
}
|
|
1205
|
+
};
|
|
1206
|
+
if (isDisabled) {
|
|
1207
|
+
return {
|
|
1208
|
+
focusWithinProps: {
|
|
1209
|
+
onFocus: void 0,
|
|
1210
|
+
onBlur: void 0
|
|
1211
|
+
}
|
|
1212
|
+
};
|
|
1213
|
+
}
|
|
1214
|
+
return {
|
|
1215
|
+
focusWithinProps: {
|
|
1216
|
+
onFocus,
|
|
1217
|
+
onBlur
|
|
1218
|
+
}
|
|
1219
|
+
};
|
|
1220
|
+
}
|
|
1221
|
+
function createEventHandler(handler) {
|
|
1222
|
+
if (!handler) {
|
|
1223
|
+
return void 0;
|
|
1224
|
+
}
|
|
1225
|
+
return (e) => {
|
|
1226
|
+
let shouldStopPropagation = true;
|
|
1227
|
+
const event = Object.assign(e, {
|
|
1228
|
+
continuePropagation() {
|
|
1229
|
+
shouldStopPropagation = false;
|
|
1230
|
+
}
|
|
1231
|
+
});
|
|
1232
|
+
handler(event);
|
|
1233
|
+
if (shouldStopPropagation) {
|
|
1234
|
+
e.stopPropagation();
|
|
1235
|
+
}
|
|
1236
|
+
};
|
|
1237
|
+
}
|
|
1238
|
+
function createKeyboard(props = {}) {
|
|
1239
|
+
if (props.isDisabled) {
|
|
1240
|
+
return {
|
|
1241
|
+
keyboardProps: {}
|
|
1242
|
+
};
|
|
1243
|
+
}
|
|
1244
|
+
return {
|
|
1245
|
+
keyboardProps: {
|
|
1246
|
+
onKeyDown: createEventHandler(props.onKeyDown),
|
|
1247
|
+
onKeyUp: createEventHandler(props.onKeyUp)
|
|
1248
|
+
}
|
|
1249
|
+
};
|
|
1250
|
+
}
|
|
1251
|
+
const FocusableContext = createContext(null);
|
|
1252
|
+
function useFocusableContext(setRef) {
|
|
1253
|
+
const context = useContext(FocusableContext) || {};
|
|
1254
|
+
if (context.ref) {
|
|
1255
|
+
context.ref;
|
|
1256
|
+
}
|
|
1257
|
+
const { ref: _, ...otherProps } = context;
|
|
1258
|
+
return otherProps;
|
|
1259
|
+
}
|
|
1260
|
+
function isDisabledValue$1(isDisabled) {
|
|
1261
|
+
if (typeof isDisabled === "function") {
|
|
1262
|
+
return isDisabled();
|
|
1263
|
+
}
|
|
1264
|
+
return isDisabled ?? false;
|
|
1265
|
+
}
|
|
1266
|
+
function createFocusable(props = {}, ref) {
|
|
1267
|
+
let elementRef = null;
|
|
1268
|
+
let autoFocusDone = false;
|
|
1269
|
+
const setRef = (el) => {
|
|
1270
|
+
elementRef = el;
|
|
1271
|
+
ref == null ? void 0 : ref(el);
|
|
1272
|
+
};
|
|
1273
|
+
const { focusProps } = createFocus({
|
|
1274
|
+
isDisabled: isDisabledValue$1(props.isDisabled),
|
|
1275
|
+
onFocus: props.onFocus,
|
|
1276
|
+
onBlur: props.onBlur,
|
|
1277
|
+
onFocusChange: props.onFocusChange
|
|
1278
|
+
});
|
|
1279
|
+
const { keyboardProps } = createKeyboard({
|
|
1280
|
+
isDisabled: isDisabledValue$1(props.isDisabled),
|
|
1281
|
+
onKeyDown: props.onKeyDown,
|
|
1282
|
+
onKeyUp: props.onKeyUp
|
|
1283
|
+
});
|
|
1284
|
+
const interactions = mergeProps(focusProps, keyboardProps);
|
|
1285
|
+
const contextProps = useFocusableContext();
|
|
1286
|
+
const interactionProps = isDisabledValue$1(props.isDisabled) ? {} : contextProps;
|
|
1287
|
+
onMount(() => {
|
|
1288
|
+
if (props.autoFocus && elementRef && !autoFocusDone) {
|
|
1289
|
+
focusSafely(elementRef);
|
|
1290
|
+
autoFocusDone = true;
|
|
1291
|
+
}
|
|
1292
|
+
});
|
|
1293
|
+
let tabIndex = props.excludeFromTabOrder ? -1 : 0;
|
|
1294
|
+
if (isDisabledValue$1(props.isDisabled)) {
|
|
1295
|
+
tabIndex = void 0;
|
|
1296
|
+
}
|
|
1297
|
+
const focusableProps = mergeProps(
|
|
1298
|
+
{
|
|
1299
|
+
...interactions,
|
|
1300
|
+
tabIndex,
|
|
1301
|
+
ref: setRef
|
|
1302
|
+
},
|
|
1303
|
+
interactionProps
|
|
1304
|
+
);
|
|
1305
|
+
return {
|
|
1306
|
+
focusableProps
|
|
1307
|
+
};
|
|
1308
|
+
}
|
|
1309
|
+
let currentModality = null;
|
|
1310
|
+
let hasSetupGlobalListeners = false;
|
|
1311
|
+
let changeHandlers = /* @__PURE__ */ new Set();
|
|
1312
|
+
function triggerChangeHandlers(modality) {
|
|
1313
|
+
currentModality = modality;
|
|
1314
|
+
for (const handler of changeHandlers) {
|
|
1315
|
+
handler(modality);
|
|
1316
|
+
}
|
|
1317
|
+
}
|
|
1318
|
+
function handleKeyboardEvent(e) {
|
|
1319
|
+
if (e.metaKey || e.altKey || e.ctrlKey || e.key === "Control" || e.key === "Shift" || e.key === "Meta") {
|
|
1320
|
+
return;
|
|
1321
|
+
}
|
|
1322
|
+
currentModality = "keyboard";
|
|
1323
|
+
triggerChangeHandlers("keyboard");
|
|
1324
|
+
}
|
|
1325
|
+
function handlePointerEvent(e) {
|
|
1326
|
+
currentModality = "pointer";
|
|
1327
|
+
if (e.type === "mousedown" || e.type === "pointerdown") {
|
|
1328
|
+
triggerChangeHandlers("pointer");
|
|
1329
|
+
}
|
|
1330
|
+
}
|
|
1331
|
+
function setupGlobalFocusListeners() {
|
|
1332
|
+
if (typeof document === "undefined" || hasSetupGlobalListeners) {
|
|
1333
|
+
return;
|
|
1334
|
+
}
|
|
1335
|
+
hasSetupGlobalListeners = true;
|
|
1336
|
+
document.addEventListener("keydown", handleKeyboardEvent, true);
|
|
1337
|
+
document.addEventListener("keyup", handleKeyboardEvent, true);
|
|
1338
|
+
document.addEventListener("mousedown", handlePointerEvent, true);
|
|
1339
|
+
document.addEventListener("pointerdown", handlePointerEvent, true);
|
|
1340
|
+
}
|
|
1341
|
+
function createFocusRing(props = {}) {
|
|
1342
|
+
const { isTextInput = false, autoFocus = false } = props;
|
|
1343
|
+
const [isFocused, setIsFocused] = createSignal(false);
|
|
1344
|
+
const [isFocusVisible, setIsFocusVisible] = createSignal(autoFocus);
|
|
1345
|
+
const [modality, setModality] = createSignal(currentModality);
|
|
1346
|
+
createEffect(() => {
|
|
1347
|
+
setupGlobalFocusListeners();
|
|
1348
|
+
const handler = (newModality) => {
|
|
1349
|
+
setModality(newModality);
|
|
1350
|
+
};
|
|
1351
|
+
changeHandlers.add(handler);
|
|
1352
|
+
onCleanup(() => {
|
|
1353
|
+
changeHandlers.delete(handler);
|
|
1354
|
+
});
|
|
1355
|
+
});
|
|
1356
|
+
createEffect(() => {
|
|
1357
|
+
const focused = isFocused();
|
|
1358
|
+
const mod = modality();
|
|
1359
|
+
if (focused) {
|
|
1360
|
+
setIsFocusVisible(isTextInput || mod === "keyboard");
|
|
1361
|
+
} else {
|
|
1362
|
+
setIsFocusVisible(false);
|
|
1363
|
+
}
|
|
1364
|
+
});
|
|
1365
|
+
const focusResult = createFocus({
|
|
1366
|
+
onFocus: () => setIsFocused(true),
|
|
1367
|
+
onBlur: () => setIsFocused(false)
|
|
1368
|
+
});
|
|
1369
|
+
return {
|
|
1370
|
+
isFocused,
|
|
1371
|
+
isFocusVisible,
|
|
1372
|
+
focusProps: focusResult.focusProps
|
|
1373
|
+
};
|
|
1374
|
+
}
|
|
1375
|
+
let globalIgnoreEmulatedMouseEvents = false;
|
|
1376
|
+
let hoverCount = 0;
|
|
1377
|
+
function setGlobalIgnoreEmulatedMouseEvents() {
|
|
1378
|
+
globalIgnoreEmulatedMouseEvents = true;
|
|
1379
|
+
setTimeout(() => {
|
|
1380
|
+
globalIgnoreEmulatedMouseEvents = false;
|
|
1381
|
+
}, 50);
|
|
1382
|
+
}
|
|
1383
|
+
function handleGlobalPointerEvent(e) {
|
|
1384
|
+
if (e.pointerType === "touch") {
|
|
1385
|
+
setGlobalIgnoreEmulatedMouseEvents();
|
|
1386
|
+
}
|
|
1387
|
+
}
|
|
1388
|
+
function setupGlobalTouchEvents() {
|
|
1389
|
+
if (typeof document === "undefined") {
|
|
1390
|
+
return () => {
|
|
1391
|
+
};
|
|
1392
|
+
}
|
|
1393
|
+
if (hoverCount === 0) {
|
|
1394
|
+
if (typeof PointerEvent !== "undefined") {
|
|
1395
|
+
document.addEventListener("pointerup", handleGlobalPointerEvent);
|
|
1396
|
+
} else if (process.env.NODE_ENV === "test") {
|
|
1397
|
+
document.addEventListener("touchend", setGlobalIgnoreEmulatedMouseEvents);
|
|
1398
|
+
}
|
|
1399
|
+
}
|
|
1400
|
+
hoverCount++;
|
|
1401
|
+
return () => {
|
|
1402
|
+
hoverCount--;
|
|
1403
|
+
if (hoverCount > 0) {
|
|
1404
|
+
return;
|
|
1405
|
+
}
|
|
1406
|
+
if (typeof PointerEvent !== "undefined") {
|
|
1407
|
+
document.removeEventListener("pointerup", handleGlobalPointerEvent);
|
|
1408
|
+
} else if (process.env.NODE_ENV === "test") {
|
|
1409
|
+
document.removeEventListener("touchend", setGlobalIgnoreEmulatedMouseEvents);
|
|
1410
|
+
}
|
|
1411
|
+
};
|
|
1412
|
+
}
|
|
1413
|
+
function createHover(props = {}) {
|
|
1414
|
+
const getProps = () => access$1(props);
|
|
1415
|
+
const [isHovered, setIsHovered] = createSignal(false);
|
|
1416
|
+
let state2 = {
|
|
1417
|
+
isHovered: false,
|
|
1418
|
+
ignoreEmulatedMouseEvents: false,
|
|
1419
|
+
pointerType: "",
|
|
1420
|
+
target: null
|
|
1421
|
+
};
|
|
1422
|
+
createEffect(() => {
|
|
1423
|
+
const cleanup = setupGlobalTouchEvents();
|
|
1424
|
+
onCleanup(cleanup);
|
|
1425
|
+
});
|
|
1426
|
+
createEffect(() => {
|
|
1427
|
+
const p = getProps();
|
|
1428
|
+
if (p.isDisabled && state2.isHovered) {
|
|
1429
|
+
triggerHoverEnd(state2.target, state2.pointerType);
|
|
1430
|
+
}
|
|
1431
|
+
});
|
|
1432
|
+
function triggerHoverStart(target, pointerType) {
|
|
1433
|
+
var _a, _b;
|
|
1434
|
+
const p = getProps();
|
|
1435
|
+
state2.pointerType = pointerType;
|
|
1436
|
+
if (p.isDisabled || state2.isHovered) {
|
|
1437
|
+
return;
|
|
1438
|
+
}
|
|
1439
|
+
state2.isHovered = true;
|
|
1440
|
+
state2.target = target;
|
|
1441
|
+
(_a = p.onHoverStart) == null ? void 0 : _a.call(p, {
|
|
1442
|
+
type: "hoverstart",
|
|
1443
|
+
target,
|
|
1444
|
+
pointerType
|
|
1445
|
+
});
|
|
1446
|
+
(_b = p.onHoverChange) == null ? void 0 : _b.call(p, true);
|
|
1447
|
+
setIsHovered(true);
|
|
1448
|
+
}
|
|
1449
|
+
function triggerHoverEnd(target, pointerType) {
|
|
1450
|
+
var _a, _b;
|
|
1451
|
+
const p = getProps();
|
|
1452
|
+
state2.pointerType = "";
|
|
1453
|
+
state2.target = null;
|
|
1454
|
+
if (!state2.isHovered || !target) {
|
|
1455
|
+
return;
|
|
1456
|
+
}
|
|
1457
|
+
state2.isHovered = false;
|
|
1458
|
+
(_a = p.onHoverEnd) == null ? void 0 : _a.call(p, {
|
|
1459
|
+
type: "hoverend",
|
|
1460
|
+
target,
|
|
1461
|
+
pointerType
|
|
1462
|
+
});
|
|
1463
|
+
(_b = p.onHoverChange) == null ? void 0 : _b.call(p, false);
|
|
1464
|
+
setIsHovered(false);
|
|
1465
|
+
}
|
|
1466
|
+
const hoverProps = createMemo(() => {
|
|
1467
|
+
if (typeof PointerEvent !== "undefined") {
|
|
1468
|
+
return {
|
|
1469
|
+
onPointerEnter: (e) => {
|
|
1470
|
+
if (globalIgnoreEmulatedMouseEvents && e.pointerType === "mouse") {
|
|
1471
|
+
return;
|
|
1472
|
+
}
|
|
1473
|
+
if (e.pointerType === "touch") {
|
|
1474
|
+
return;
|
|
1475
|
+
}
|
|
1476
|
+
triggerHoverStart(e.currentTarget, e.pointerType);
|
|
1477
|
+
},
|
|
1478
|
+
onPointerLeave: (e) => {
|
|
1479
|
+
const p = getProps();
|
|
1480
|
+
if (!p.isDisabled && e.currentTarget.contains(e.target)) {
|
|
1481
|
+
triggerHoverEnd(e.currentTarget, e.pointerType);
|
|
1482
|
+
}
|
|
1483
|
+
}
|
|
1484
|
+
};
|
|
1485
|
+
}
|
|
1486
|
+
return {
|
|
1487
|
+
onMouseEnter: (e) => {
|
|
1488
|
+
if (!state2.ignoreEmulatedMouseEvents && !globalIgnoreEmulatedMouseEvents) {
|
|
1489
|
+
triggerHoverStart(e.currentTarget, "mouse");
|
|
1490
|
+
}
|
|
1491
|
+
state2.ignoreEmulatedMouseEvents = false;
|
|
1492
|
+
},
|
|
1493
|
+
onMouseLeave: (e) => {
|
|
1494
|
+
const p = getProps();
|
|
1495
|
+
if (!p.isDisabled && e.currentTarget.contains(e.target)) {
|
|
1496
|
+
triggerHoverEnd(e.currentTarget, "mouse");
|
|
1497
|
+
}
|
|
1498
|
+
}
|
|
1499
|
+
};
|
|
1500
|
+
});
|
|
1501
|
+
return {
|
|
1502
|
+
hoverProps: hoverProps(),
|
|
1503
|
+
isHovered
|
|
1504
|
+
};
|
|
1505
|
+
}
|
|
1506
|
+
function isDisabledValue(isDisabled) {
|
|
1507
|
+
if (typeof isDisabled === "function") {
|
|
1508
|
+
return isDisabled();
|
|
1509
|
+
}
|
|
1510
|
+
return isDisabled ?? false;
|
|
1511
|
+
}
|
|
1512
|
+
function createButton(props = {}) {
|
|
1513
|
+
const elementType = props.elementType ?? "button";
|
|
1514
|
+
const { pressProps, isPressed } = createPress({
|
|
1515
|
+
isDisabled: props.isDisabled,
|
|
1516
|
+
onPress: props.onPress,
|
|
1517
|
+
onPressStart: props.onPressStart,
|
|
1518
|
+
onPressEnd: props.onPressEnd,
|
|
1519
|
+
onPressUp: props.onPressUp,
|
|
1520
|
+
onPressChange: props.onPressChange,
|
|
1521
|
+
preventFocusOnPress: props.preventFocusOnPress
|
|
1522
|
+
});
|
|
1523
|
+
const { focusableProps } = createFocusable({
|
|
1524
|
+
isDisabled: props.isDisabled,
|
|
1525
|
+
autoFocus: props.autoFocus,
|
|
1526
|
+
excludeFromTabOrder: props.excludeFromTabOrder
|
|
1527
|
+
});
|
|
1528
|
+
const isNativeButton = elementType === "button" || elementType === "input";
|
|
1529
|
+
const isLink = elementType === "a";
|
|
1530
|
+
const disabled = isDisabledValue(props.isDisabled);
|
|
1531
|
+
let additionalProps = {};
|
|
1532
|
+
if (isNativeButton) {
|
|
1533
|
+
additionalProps = {
|
|
1534
|
+
type: props.type ?? "button",
|
|
1535
|
+
disabled,
|
|
1536
|
+
// Form-related attributes
|
|
1537
|
+
...props.form && { form: props.form },
|
|
1538
|
+
...props.formAction && { formAction: props.formAction },
|
|
1539
|
+
...props.formEncType && { formEncType: props.formEncType },
|
|
1540
|
+
...props.formMethod && { formMethod: props.formMethod },
|
|
1541
|
+
...props.formNoValidate && { formNoValidate: props.formNoValidate },
|
|
1542
|
+
...props.formTarget && { formTarget: props.formTarget },
|
|
1543
|
+
...props.name && { name: props.name },
|
|
1544
|
+
...props.value && { value: props.value }
|
|
1545
|
+
};
|
|
1546
|
+
} else {
|
|
1547
|
+
additionalProps = {
|
|
1548
|
+
role: "button",
|
|
1549
|
+
tabIndex: disabled ? void 0 : 0,
|
|
1550
|
+
"aria-disabled": disabled ? true : void 0
|
|
1551
|
+
};
|
|
1552
|
+
if (isLink) {
|
|
1553
|
+
additionalProps.href = props.href;
|
|
1554
|
+
additionalProps.target = props.target;
|
|
1555
|
+
additionalProps.rel = props.rel;
|
|
1556
|
+
}
|
|
1557
|
+
}
|
|
1558
|
+
const ariaProps = {};
|
|
1559
|
+
if (props["aria-pressed"] !== void 0) {
|
|
1560
|
+
ariaProps["aria-pressed"] = props["aria-pressed"];
|
|
1561
|
+
}
|
|
1562
|
+
if (props["aria-haspopup"] !== void 0) {
|
|
1563
|
+
ariaProps["aria-haspopup"] = props["aria-haspopup"];
|
|
1564
|
+
}
|
|
1565
|
+
if (props["aria-expanded"] !== void 0) {
|
|
1566
|
+
ariaProps["aria-expanded"] = props["aria-expanded"];
|
|
1567
|
+
}
|
|
1568
|
+
if (props["aria-label"]) {
|
|
1569
|
+
ariaProps["aria-label"] = props["aria-label"];
|
|
1570
|
+
}
|
|
1571
|
+
if (props["aria-labelledby"]) {
|
|
1572
|
+
ariaProps["aria-labelledby"] = props["aria-labelledby"];
|
|
1573
|
+
}
|
|
1574
|
+
if (props["aria-describedby"]) {
|
|
1575
|
+
ariaProps["aria-describedby"] = props["aria-describedby"];
|
|
1576
|
+
}
|
|
1577
|
+
if (props["aria-controls"]) {
|
|
1578
|
+
ariaProps["aria-controls"] = props["aria-controls"];
|
|
1579
|
+
}
|
|
1580
|
+
if (props["aria-current"] !== void 0) {
|
|
1581
|
+
ariaProps["aria-current"] = props["aria-current"];
|
|
1582
|
+
}
|
|
1583
|
+
const buttonProps = mergeProps(
|
|
1584
|
+
filterDOMProps(props, { labelable: true }),
|
|
1585
|
+
additionalProps,
|
|
1586
|
+
ariaProps,
|
|
1587
|
+
focusableProps,
|
|
1588
|
+
pressProps
|
|
1589
|
+
);
|
|
1590
|
+
return {
|
|
1591
|
+
buttonProps,
|
|
1592
|
+
isPressed
|
|
1593
|
+
};
|
|
1594
|
+
}
|
|
1595
|
+
function getSelectedValue(isSelected) {
|
|
1596
|
+
if (typeof isSelected === "function") {
|
|
1597
|
+
return isSelected();
|
|
1598
|
+
}
|
|
1599
|
+
return isSelected ?? false;
|
|
1600
|
+
}
|
|
1601
|
+
function createToggleButton(props = {}) {
|
|
1602
|
+
const isControlled = props.isSelected !== void 0;
|
|
1603
|
+
const [uncontrolledSelected, setUncontrolledSelected] = createSignal(
|
|
1604
|
+
props.defaultSelected ?? false
|
|
1605
|
+
);
|
|
1606
|
+
const isSelected = () => {
|
|
1607
|
+
if (isControlled) {
|
|
1608
|
+
return getSelectedValue(props.isSelected);
|
|
1609
|
+
}
|
|
1610
|
+
return uncontrolledSelected();
|
|
1611
|
+
};
|
|
1612
|
+
const toggleSelection = () => {
|
|
1613
|
+
var _a;
|
|
1614
|
+
const newValue = !isSelected();
|
|
1615
|
+
if (!isControlled) {
|
|
1616
|
+
setUncontrolledSelected(newValue);
|
|
1617
|
+
}
|
|
1618
|
+
(_a = props.onChange) == null ? void 0 : _a.call(props, newValue);
|
|
1619
|
+
};
|
|
1620
|
+
const onPress = (e) => {
|
|
1621
|
+
var _a;
|
|
1622
|
+
toggleSelection();
|
|
1623
|
+
(_a = props.onPress) == null ? void 0 : _a.call(props, e);
|
|
1624
|
+
};
|
|
1625
|
+
const { buttonProps: baseButtonProps, isPressed } = createButton(
|
|
1626
|
+
mergeProps(props, {
|
|
1627
|
+
onPress
|
|
1628
|
+
})
|
|
1629
|
+
);
|
|
1630
|
+
const buttonProps = {
|
|
1631
|
+
...baseButtonProps,
|
|
1632
|
+
get "aria-pressed"() {
|
|
1633
|
+
return isSelected();
|
|
1634
|
+
}
|
|
1635
|
+
};
|
|
1636
|
+
return {
|
|
1637
|
+
buttonProps,
|
|
1638
|
+
isPressed,
|
|
1639
|
+
isSelected
|
|
1640
|
+
};
|
|
1641
|
+
}
|
|
1642
|
+
function access(value) {
|
|
1643
|
+
return typeof value === "function" ? value() : value;
|
|
1644
|
+
}
|
|
1645
|
+
function createToggleState(props = {}) {
|
|
1646
|
+
const getProps = () => access(props);
|
|
1647
|
+
const initialProps = getProps();
|
|
1648
|
+
const initialSelected = initialProps.isSelected ?? initialProps.defaultSelected ?? false;
|
|
1649
|
+
const [internalSelected, setInternalSelected] = createSignal(initialSelected);
|
|
1650
|
+
const isControlled = () => getProps().isSelected !== void 0;
|
|
1651
|
+
const isSelected = () => {
|
|
1652
|
+
const p = getProps();
|
|
1653
|
+
return isControlled() ? p.isSelected ?? false : internalSelected();
|
|
1654
|
+
};
|
|
1655
|
+
function setSelected(value) {
|
|
1656
|
+
var _a;
|
|
1657
|
+
const p = getProps();
|
|
1658
|
+
if (p.isReadOnly) {
|
|
1659
|
+
return;
|
|
1660
|
+
}
|
|
1661
|
+
if (!isControlled()) {
|
|
1662
|
+
setInternalSelected(value);
|
|
1663
|
+
}
|
|
1664
|
+
(_a = p.onChange) == null ? void 0 : _a.call(p, value);
|
|
1665
|
+
}
|
|
1666
|
+
function toggle() {
|
|
1667
|
+
const p = getProps();
|
|
1668
|
+
if (p.isReadOnly) {
|
|
1669
|
+
return;
|
|
1670
|
+
}
|
|
1671
|
+
setSelected(!isSelected());
|
|
1672
|
+
}
|
|
1673
|
+
return {
|
|
1674
|
+
isSelected,
|
|
1675
|
+
defaultSelected: initialProps.defaultSelected ?? initialSelected,
|
|
1676
|
+
setSelected,
|
|
1677
|
+
toggle
|
|
1678
|
+
};
|
|
1679
|
+
}
|
|
1680
|
+
function createCheckboxGroupState(props = {}) {
|
|
1681
|
+
const getProps = () => access(props);
|
|
1682
|
+
const initialProps = getProps();
|
|
1683
|
+
const initialValue = initialProps.value ?? initialProps.defaultValue ?? [];
|
|
1684
|
+
const [internalValue, setInternalValue] = createSignal(initialValue);
|
|
1685
|
+
const isControlled = () => getProps().value !== void 0;
|
|
1686
|
+
const value = () => {
|
|
1687
|
+
const p = getProps();
|
|
1688
|
+
return isControlled() ? p.value ?? [] : internalValue();
|
|
1689
|
+
};
|
|
1690
|
+
const isRequired = () => {
|
|
1691
|
+
const p = getProps();
|
|
1692
|
+
return !!p.isRequired && value().length === 0;
|
|
1693
|
+
};
|
|
1694
|
+
const isInvalid = () => {
|
|
1695
|
+
return getProps().isInvalid ?? false;
|
|
1696
|
+
};
|
|
1697
|
+
function setValue(newValue) {
|
|
1698
|
+
var _a;
|
|
1699
|
+
const p = getProps();
|
|
1700
|
+
if (p.isReadOnly || p.isDisabled) {
|
|
1701
|
+
return;
|
|
1702
|
+
}
|
|
1703
|
+
if (!isControlled()) {
|
|
1704
|
+
setInternalValue(newValue);
|
|
1705
|
+
}
|
|
1706
|
+
(_a = p.onChange) == null ? void 0 : _a.call(p, newValue);
|
|
1707
|
+
}
|
|
1708
|
+
function isSelected(checkValue) {
|
|
1709
|
+
return value().includes(checkValue);
|
|
1710
|
+
}
|
|
1711
|
+
function addValue(addVal) {
|
|
1712
|
+
const p = getProps();
|
|
1713
|
+
if (p.isReadOnly || p.isDisabled) {
|
|
1714
|
+
return;
|
|
1715
|
+
}
|
|
1716
|
+
const current = value();
|
|
1717
|
+
if (!current.includes(addVal)) {
|
|
1718
|
+
setValue([...current, addVal]);
|
|
1719
|
+
}
|
|
1720
|
+
}
|
|
1721
|
+
function removeValue(removeVal) {
|
|
1722
|
+
const p = getProps();
|
|
1723
|
+
if (p.isReadOnly || p.isDisabled) {
|
|
1724
|
+
return;
|
|
1725
|
+
}
|
|
1726
|
+
const current = value();
|
|
1727
|
+
if (current.includes(removeVal)) {
|
|
1728
|
+
setValue(current.filter((v) => v !== removeVal));
|
|
1729
|
+
}
|
|
1730
|
+
}
|
|
1731
|
+
function toggleValue(toggleVal) {
|
|
1732
|
+
const p = getProps();
|
|
1733
|
+
if (p.isReadOnly || p.isDisabled) {
|
|
1734
|
+
return;
|
|
1735
|
+
}
|
|
1736
|
+
const current = value();
|
|
1737
|
+
if (current.includes(toggleVal)) {
|
|
1738
|
+
setValue(current.filter((v) => v !== toggleVal));
|
|
1739
|
+
} else {
|
|
1740
|
+
setValue([...current, toggleVal]);
|
|
1741
|
+
}
|
|
1742
|
+
}
|
|
1743
|
+
return {
|
|
1744
|
+
value,
|
|
1745
|
+
defaultValue: initialProps.defaultValue ?? initialValue,
|
|
1746
|
+
get isDisabled() {
|
|
1747
|
+
return getProps().isDisabled ?? false;
|
|
1748
|
+
},
|
|
1749
|
+
get isReadOnly() {
|
|
1750
|
+
return getProps().isReadOnly ?? false;
|
|
1751
|
+
},
|
|
1752
|
+
get isInvalid() {
|
|
1753
|
+
return isInvalid();
|
|
1754
|
+
},
|
|
1755
|
+
isRequired,
|
|
1756
|
+
isSelected,
|
|
1757
|
+
setValue,
|
|
1758
|
+
addValue,
|
|
1759
|
+
removeValue,
|
|
1760
|
+
toggleValue
|
|
1761
|
+
};
|
|
1762
|
+
}
|
|
1763
|
+
function createId$1(defaultId) {
|
|
1764
|
+
return `solid-stately-${createUniqueId()}`;
|
|
1765
|
+
}
|
|
1766
|
+
const radioGroupSyncVersion = /* @__PURE__ */ new WeakMap();
|
|
1767
|
+
function createRadioGroupState(props = {}) {
|
|
1768
|
+
const getProps = () => access(props);
|
|
1769
|
+
const initialProps = untrack(() => getProps());
|
|
1770
|
+
const name = initialProps.name || `radio-group-${createId$1()}`;
|
|
1771
|
+
const [internalValue, setInternalValue] = createSignal(
|
|
1772
|
+
initialProps.defaultValue ?? null
|
|
1773
|
+
);
|
|
1774
|
+
const [lastFocusedValue, setLastFocusedValueInternal] = createSignal(null);
|
|
1775
|
+
const [syncVersion, setSyncVersion] = createSignal(0);
|
|
1776
|
+
const isControlled = () => getProps().value !== void 0;
|
|
1777
|
+
const selectedValue = () => {
|
|
1778
|
+
const p = getProps();
|
|
1779
|
+
if (p.value !== void 0) {
|
|
1780
|
+
return p.value ?? null;
|
|
1781
|
+
}
|
|
1782
|
+
return internalValue();
|
|
1783
|
+
};
|
|
1784
|
+
const isInvalid = () => {
|
|
1785
|
+
return getProps().isInvalid ?? false;
|
|
1786
|
+
};
|
|
1787
|
+
function setSelectedValue(value) {
|
|
1788
|
+
var _a;
|
|
1789
|
+
const p = getProps();
|
|
1790
|
+
if (p.isReadOnly || p.isDisabled) {
|
|
1791
|
+
return;
|
|
1792
|
+
}
|
|
1793
|
+
setSyncVersion((v) => v + 1);
|
|
1794
|
+
if (!isControlled()) {
|
|
1795
|
+
setInternalValue(value);
|
|
1796
|
+
}
|
|
1797
|
+
if (value != null) {
|
|
1798
|
+
(_a = p.onChange) == null ? void 0 : _a.call(p, value);
|
|
1799
|
+
}
|
|
1800
|
+
}
|
|
1801
|
+
function setLastFocusedValue(value) {
|
|
1802
|
+
setLastFocusedValueInternal(value);
|
|
1803
|
+
}
|
|
1804
|
+
const state2 = {
|
|
1805
|
+
name,
|
|
1806
|
+
selectedValue,
|
|
1807
|
+
defaultSelectedValue: initialProps.defaultValue ?? null,
|
|
1808
|
+
setSelectedValue,
|
|
1809
|
+
lastFocusedValue,
|
|
1810
|
+
setLastFocusedValue,
|
|
1811
|
+
get isDisabled() {
|
|
1812
|
+
return getProps().isDisabled ?? false;
|
|
1813
|
+
},
|
|
1814
|
+
get isReadOnly() {
|
|
1815
|
+
return getProps().isReadOnly ?? false;
|
|
1816
|
+
},
|
|
1817
|
+
get isRequired() {
|
|
1818
|
+
return getProps().isRequired ?? false;
|
|
1819
|
+
},
|
|
1820
|
+
get isInvalid() {
|
|
1821
|
+
return isInvalid();
|
|
1822
|
+
}
|
|
1823
|
+
};
|
|
1824
|
+
radioGroupSyncVersion.set(state2, syncVersion);
|
|
1825
|
+
return state2;
|
|
1826
|
+
}
|
|
1827
|
+
function createToggle(props, state2, ref) {
|
|
1828
|
+
const getProps = () => access$1(props);
|
|
1829
|
+
const isDisabled = () => getProps().isDisabled ?? false;
|
|
1830
|
+
const isReadOnly = () => getProps().isReadOnly ?? false;
|
|
1831
|
+
const isInvalid = () => {
|
|
1832
|
+
return getProps().isInvalid ?? false;
|
|
1833
|
+
};
|
|
1834
|
+
const { pressProps, isPressed } = createPress({
|
|
1835
|
+
get onPressStart() {
|
|
1836
|
+
return getProps().onPressStart;
|
|
1837
|
+
},
|
|
1838
|
+
get onPressEnd() {
|
|
1839
|
+
return getProps().onPressEnd;
|
|
1840
|
+
},
|
|
1841
|
+
get onPressChange() {
|
|
1842
|
+
return getProps().onPressChange;
|
|
1843
|
+
},
|
|
1844
|
+
get onPress() {
|
|
1845
|
+
return getProps().onPress;
|
|
1846
|
+
},
|
|
1847
|
+
get onPressUp() {
|
|
1848
|
+
return getProps().onPressUp;
|
|
1849
|
+
},
|
|
1850
|
+
get isDisabled() {
|
|
1851
|
+
return isDisabled();
|
|
1852
|
+
}
|
|
1853
|
+
});
|
|
1854
|
+
const { pressProps: labelPressProps, isPressed: isLabelPressed } = createPress({
|
|
1855
|
+
get onPressStart() {
|
|
1856
|
+
return getProps().onPressStart;
|
|
1857
|
+
},
|
|
1858
|
+
get onPressEnd() {
|
|
1859
|
+
return getProps().onPressEnd;
|
|
1860
|
+
},
|
|
1861
|
+
get onPressChange() {
|
|
1862
|
+
return getProps().onPressChange;
|
|
1863
|
+
},
|
|
1864
|
+
get onPressUp() {
|
|
1865
|
+
return getProps().onPressUp;
|
|
1866
|
+
},
|
|
1867
|
+
onPress(e) {
|
|
1868
|
+
var _a, _b, _c;
|
|
1869
|
+
(_b = (_a = getProps()).onPress) == null ? void 0 : _b.call(_a, e);
|
|
1870
|
+
state2.toggle();
|
|
1871
|
+
(_c = ref()) == null ? void 0 : _c.focus();
|
|
1872
|
+
},
|
|
1873
|
+
get isDisabled() {
|
|
1874
|
+
return isDisabled() || isReadOnly();
|
|
1875
|
+
}
|
|
1876
|
+
});
|
|
1877
|
+
const { focusableProps } = createFocusable({
|
|
1878
|
+
get isDisabled() {
|
|
1879
|
+
return isDisabled();
|
|
1880
|
+
},
|
|
1881
|
+
get autoFocus() {
|
|
1882
|
+
return getProps().autoFocus;
|
|
1883
|
+
},
|
|
1884
|
+
get onFocus() {
|
|
1885
|
+
return getProps().onFocus;
|
|
1886
|
+
},
|
|
1887
|
+
get onBlur() {
|
|
1888
|
+
return getProps().onBlur;
|
|
1889
|
+
},
|
|
1890
|
+
get onFocusChange() {
|
|
1891
|
+
return getProps().onFocusChange;
|
|
1892
|
+
},
|
|
1893
|
+
get onKeyDown() {
|
|
1894
|
+
return getProps().onKeyDown;
|
|
1895
|
+
},
|
|
1896
|
+
get onKeyUp() {
|
|
1897
|
+
return getProps().onKeyUp;
|
|
1898
|
+
},
|
|
1899
|
+
get excludeFromTabOrder() {
|
|
1900
|
+
return getProps().excludeFromTabOrder;
|
|
1901
|
+
}
|
|
1902
|
+
}, ref);
|
|
1903
|
+
const interactions = mergeProps(pressProps, focusableProps);
|
|
1904
|
+
const domProps = () => filterDOMProps(getProps(), { labelable: true });
|
|
1905
|
+
const onChange = (e) => {
|
|
1906
|
+
e.stopPropagation();
|
|
1907
|
+
if (isReadOnly()) {
|
|
1908
|
+
e.currentTarget.checked = state2.isSelected();
|
|
1909
|
+
return;
|
|
1910
|
+
}
|
|
1911
|
+
state2.setSelected(e.currentTarget.checked);
|
|
1912
|
+
};
|
|
1913
|
+
createEffect(() => {
|
|
1914
|
+
const p = getProps();
|
|
1915
|
+
const hasChildren = p.children != null;
|
|
1916
|
+
const hasAriaLabel = p["aria-label"] != null || p["aria-labelledby"] != null;
|
|
1917
|
+
if (!hasChildren && !hasAriaLabel && process.env.NODE_ENV !== "production") {
|
|
1918
|
+
console.warn("If you do not provide children, you must specify an aria-label for accessibility");
|
|
1919
|
+
}
|
|
1920
|
+
});
|
|
1921
|
+
const combinedIsPressed = () => isPressed() || isLabelPressed();
|
|
1922
|
+
return {
|
|
1923
|
+
labelProps: mergeProps(labelPressProps, {
|
|
1924
|
+
onClick: (e) => e.preventDefault()
|
|
1925
|
+
}),
|
|
1926
|
+
get inputProps() {
|
|
1927
|
+
const p = getProps();
|
|
1928
|
+
return mergeProps(domProps(), {
|
|
1929
|
+
"aria-invalid": isInvalid() || void 0,
|
|
1930
|
+
"aria-errormessage": p["aria-errormessage"],
|
|
1931
|
+
"aria-controls": p["aria-controls"],
|
|
1932
|
+
"aria-readonly": isReadOnly() || void 0,
|
|
1933
|
+
onChange,
|
|
1934
|
+
disabled: isDisabled(),
|
|
1935
|
+
...p.value == null ? {} : { value: p.value },
|
|
1936
|
+
name: p.name,
|
|
1937
|
+
form: p.form,
|
|
1938
|
+
type: "checkbox",
|
|
1939
|
+
...interactions,
|
|
1940
|
+
// Stop click propagation to prevent labelProps.onClick from calling preventDefault
|
|
1941
|
+
// which would prevent the checkbox from toggling in JSDOM/testing-library environments
|
|
1942
|
+
onClick: (e) => e.stopPropagation()
|
|
1943
|
+
});
|
|
1944
|
+
},
|
|
1945
|
+
isSelected: state2.isSelected,
|
|
1946
|
+
isPressed: combinedIsPressed,
|
|
1947
|
+
isDisabled: isDisabled(),
|
|
1948
|
+
isReadOnly: isReadOnly(),
|
|
1949
|
+
isInvalid: isInvalid()
|
|
1950
|
+
};
|
|
1951
|
+
}
|
|
1952
|
+
function createCheckbox(props, state2, inputRef) {
|
|
1953
|
+
const getProps = () => access$1(props);
|
|
1954
|
+
const toggleResult = createToggle(props, state2, inputRef);
|
|
1955
|
+
const {
|
|
1956
|
+
labelProps: baseLabelProps,
|
|
1957
|
+
isSelected,
|
|
1958
|
+
isPressed,
|
|
1959
|
+
isDisabled,
|
|
1960
|
+
isReadOnly,
|
|
1961
|
+
isInvalid
|
|
1962
|
+
} = toggleResult;
|
|
1963
|
+
createEffect(() => {
|
|
1964
|
+
const input = inputRef();
|
|
1965
|
+
const isIndeterminate = getProps().isIndeterminate;
|
|
1966
|
+
if (input) {
|
|
1967
|
+
input.indeterminate = !!isIndeterminate;
|
|
1968
|
+
}
|
|
1969
|
+
});
|
|
1970
|
+
const { pressProps } = createPress({
|
|
1971
|
+
get isDisabled() {
|
|
1972
|
+
return isDisabled || isReadOnly;
|
|
1973
|
+
},
|
|
1974
|
+
onPress() {
|
|
1975
|
+
}
|
|
1976
|
+
});
|
|
1977
|
+
return {
|
|
1978
|
+
labelProps: mergeProps(
|
|
1979
|
+
baseLabelProps,
|
|
1980
|
+
pressProps,
|
|
1981
|
+
{
|
|
1982
|
+
// Prevent label from being focused when mouse down on it.
|
|
1983
|
+
// Note, this does not prevent the input from being focused in the `click` event.
|
|
1984
|
+
onMouseDown: (e) => e.preventDefault()
|
|
1985
|
+
}
|
|
1986
|
+
),
|
|
1987
|
+
get inputProps() {
|
|
1988
|
+
const p = getProps();
|
|
1989
|
+
const { isRequired, validationBehavior = "aria" } = p;
|
|
1990
|
+
return mergeProps(toggleResult.inputProps, {
|
|
1991
|
+
checked: isSelected(),
|
|
1992
|
+
"aria-required": isRequired && validationBehavior === "aria" || void 0,
|
|
1993
|
+
required: isRequired && validationBehavior === "native"
|
|
1994
|
+
});
|
|
1995
|
+
},
|
|
1996
|
+
isSelected,
|
|
1997
|
+
isPressed,
|
|
1998
|
+
isDisabled,
|
|
1999
|
+
isReadOnly,
|
|
2000
|
+
isInvalid
|
|
2001
|
+
};
|
|
2002
|
+
}
|
|
2003
|
+
function createIsSSR() {
|
|
2004
|
+
return isServer;
|
|
2005
|
+
}
|
|
2006
|
+
function createId(defaultId) {
|
|
2007
|
+
if (defaultId) {
|
|
2008
|
+
return defaultId;
|
|
2009
|
+
}
|
|
2010
|
+
return `solidaria-${createUniqueId()}`;
|
|
2011
|
+
}
|
|
2012
|
+
const canUseDOM = !isServer;
|
|
2013
|
+
function createLabels(props, defaultLabel) {
|
|
2014
|
+
let {
|
|
2015
|
+
id,
|
|
2016
|
+
"aria-label": label,
|
|
2017
|
+
"aria-labelledby": labelledBy
|
|
2018
|
+
} = props;
|
|
2019
|
+
id = createId(id);
|
|
2020
|
+
if (labelledBy && label) {
|
|
2021
|
+
const ids = /* @__PURE__ */ new Set([id, ...labelledBy.trim().split(/\s+/)]);
|
|
2022
|
+
labelledBy = [...ids].join(" ");
|
|
2023
|
+
} else if (labelledBy) {
|
|
2024
|
+
labelledBy = labelledBy.trim().split(/\s+/).join(" ");
|
|
2025
|
+
}
|
|
2026
|
+
if (!label && !labelledBy && defaultLabel) {
|
|
2027
|
+
label = defaultLabel;
|
|
2028
|
+
}
|
|
2029
|
+
return {
|
|
2030
|
+
id,
|
|
2031
|
+
"aria-label": label,
|
|
2032
|
+
"aria-labelledby": labelledBy
|
|
2033
|
+
};
|
|
2034
|
+
}
|
|
2035
|
+
function createLabel(props) {
|
|
2036
|
+
const getProps = () => access$1(props);
|
|
2037
|
+
const id = createId(getProps().id);
|
|
2038
|
+
const labelId = createId();
|
|
2039
|
+
const getLabelProps = () => {
|
|
2040
|
+
const { label, labelElementType = "label" } = getProps();
|
|
2041
|
+
if (!label) {
|
|
2042
|
+
return {};
|
|
2043
|
+
}
|
|
2044
|
+
return {
|
|
2045
|
+
id: labelId,
|
|
2046
|
+
...labelElementType === "label" ? { for: id } : {}
|
|
2047
|
+
};
|
|
2048
|
+
};
|
|
2049
|
+
const getFieldProps = () => {
|
|
2050
|
+
const {
|
|
2051
|
+
label,
|
|
2052
|
+
"aria-labelledby": ariaLabelledby,
|
|
2053
|
+
"aria-label": ariaLabel
|
|
2054
|
+
} = getProps();
|
|
2055
|
+
let labelledBy = ariaLabelledby;
|
|
2056
|
+
if (label) {
|
|
2057
|
+
labelledBy = ariaLabelledby ? `${labelId} ${ariaLabelledby}` : labelId;
|
|
2058
|
+
} else if (!ariaLabelledby && !ariaLabel && process.env.NODE_ENV !== "production") {
|
|
2059
|
+
console.warn(
|
|
2060
|
+
"If you do not provide a visible label, you must specify an aria-label or aria-labelledby attribute for accessibility"
|
|
2061
|
+
);
|
|
2062
|
+
}
|
|
2063
|
+
return createLabels({
|
|
2064
|
+
id,
|
|
2065
|
+
"aria-label": ariaLabel,
|
|
2066
|
+
"aria-labelledby": labelledBy
|
|
2067
|
+
});
|
|
2068
|
+
};
|
|
2069
|
+
return {
|
|
2070
|
+
get labelProps() {
|
|
2071
|
+
return getLabelProps();
|
|
2072
|
+
},
|
|
2073
|
+
get fieldProps() {
|
|
2074
|
+
return getFieldProps();
|
|
2075
|
+
}
|
|
2076
|
+
};
|
|
2077
|
+
}
|
|
2078
|
+
function createField(props) {
|
|
2079
|
+
const getProps = () => access$1(props);
|
|
2080
|
+
const { labelProps, fieldProps: baseLabelFieldProps } = createLabel(props);
|
|
2081
|
+
const descriptionId = createId();
|
|
2082
|
+
const errorMessageId = createId();
|
|
2083
|
+
const getDescriptionProps = () => {
|
|
2084
|
+
const { description, errorMessage, isInvalid } = getProps();
|
|
2085
|
+
if (!description && !errorMessage && !isInvalid) {
|
|
2086
|
+
return {};
|
|
2087
|
+
}
|
|
2088
|
+
return {
|
|
2089
|
+
id: descriptionId
|
|
2090
|
+
};
|
|
2091
|
+
};
|
|
2092
|
+
const getErrorMessageProps = () => {
|
|
2093
|
+
const { errorMessage, isInvalid } = getProps();
|
|
2094
|
+
if (!errorMessage && !isInvalid) {
|
|
2095
|
+
return {};
|
|
2096
|
+
}
|
|
2097
|
+
return {
|
|
2098
|
+
id: errorMessageId
|
|
2099
|
+
};
|
|
2100
|
+
};
|
|
2101
|
+
const getFieldProps = () => {
|
|
2102
|
+
const { description, errorMessage, isInvalid } = getProps();
|
|
2103
|
+
const describedByIds = [];
|
|
2104
|
+
if (description) {
|
|
2105
|
+
describedByIds.push(descriptionId);
|
|
2106
|
+
}
|
|
2107
|
+
if (isInvalid && errorMessage) {
|
|
2108
|
+
describedByIds.push(errorMessageId);
|
|
2109
|
+
}
|
|
2110
|
+
const existingDescribedBy = getProps()["aria-describedby"];
|
|
2111
|
+
if (existingDescribedBy) {
|
|
2112
|
+
describedByIds.push(existingDescribedBy);
|
|
2113
|
+
}
|
|
2114
|
+
const ariaDescribedBy = describedByIds.length > 0 ? describedByIds.join(" ") : void 0;
|
|
2115
|
+
return mergeProps(baseLabelFieldProps, {
|
|
2116
|
+
"aria-describedby": ariaDescribedBy
|
|
2117
|
+
});
|
|
2118
|
+
};
|
|
2119
|
+
return {
|
|
2120
|
+
get labelProps() {
|
|
2121
|
+
return labelProps;
|
|
2122
|
+
},
|
|
2123
|
+
get fieldProps() {
|
|
2124
|
+
return getFieldProps();
|
|
2125
|
+
},
|
|
2126
|
+
get descriptionProps() {
|
|
2127
|
+
return getDescriptionProps();
|
|
2128
|
+
},
|
|
2129
|
+
get errorMessageProps() {
|
|
2130
|
+
return getErrorMessageProps();
|
|
2131
|
+
}
|
|
2132
|
+
};
|
|
2133
|
+
}
|
|
2134
|
+
const checkboxGroupData = /* @__PURE__ */ new WeakMap();
|
|
2135
|
+
function createCheckboxGroup(props, state2) {
|
|
2136
|
+
const getProps = () => access$1(props);
|
|
2137
|
+
const isInvalid = () => state2.isInvalid;
|
|
2138
|
+
const { labelProps, fieldProps, descriptionProps, errorMessageProps } = createField({
|
|
2139
|
+
get label() {
|
|
2140
|
+
return getProps().label;
|
|
2141
|
+
},
|
|
2142
|
+
get "aria-label"() {
|
|
2143
|
+
return getProps()["aria-label"];
|
|
2144
|
+
},
|
|
2145
|
+
get "aria-labelledby"() {
|
|
2146
|
+
return getProps()["aria-labelledby"];
|
|
2147
|
+
},
|
|
2148
|
+
get "aria-describedby"() {
|
|
2149
|
+
return getProps()["aria-describedby"];
|
|
2150
|
+
},
|
|
2151
|
+
get "aria-details"() {
|
|
2152
|
+
return getProps()["aria-details"];
|
|
2153
|
+
},
|
|
2154
|
+
get description() {
|
|
2155
|
+
return getProps().description;
|
|
2156
|
+
},
|
|
2157
|
+
get errorMessage() {
|
|
2158
|
+
return getProps().errorMessage ?? (isInvalid() ? "Invalid selection" : void 0);
|
|
2159
|
+
},
|
|
2160
|
+
get isInvalid() {
|
|
2161
|
+
return isInvalid();
|
|
2162
|
+
},
|
|
2163
|
+
// Checkbox group is not an HTML input element so it
|
|
2164
|
+
// shouldn't be labeled by a <label> element.
|
|
2165
|
+
labelElementType: "span"
|
|
2166
|
+
});
|
|
2167
|
+
checkboxGroupData.set(state2, {
|
|
2168
|
+
name: getProps().name,
|
|
2169
|
+
form: getProps().form,
|
|
2170
|
+
descriptionId: descriptionProps.id,
|
|
2171
|
+
errorMessageId: errorMessageProps.id,
|
|
2172
|
+
validationBehavior: "aria"
|
|
2173
|
+
});
|
|
2174
|
+
const domProps = () => filterDOMProps(getProps(), { labelable: true });
|
|
2175
|
+
const { focusWithinProps } = createFocusWithin({
|
|
2176
|
+
get onBlurWithin() {
|
|
2177
|
+
return getProps().onBlur;
|
|
2178
|
+
},
|
|
2179
|
+
get onFocusWithin() {
|
|
2180
|
+
return getProps().onFocus;
|
|
2181
|
+
},
|
|
2182
|
+
get onFocusWithinChange() {
|
|
2183
|
+
return getProps().onFocusChange;
|
|
2184
|
+
}
|
|
2185
|
+
});
|
|
2186
|
+
return {
|
|
2187
|
+
get groupProps() {
|
|
2188
|
+
return mergeProps(domProps(), {
|
|
2189
|
+
role: "group",
|
|
2190
|
+
"aria-disabled": state2.isDisabled || void 0,
|
|
2191
|
+
...fieldProps,
|
|
2192
|
+
...focusWithinProps
|
|
2193
|
+
});
|
|
2194
|
+
},
|
|
2195
|
+
get labelProps() {
|
|
2196
|
+
return labelProps;
|
|
2197
|
+
},
|
|
2198
|
+
get descriptionProps() {
|
|
2199
|
+
return descriptionProps;
|
|
2200
|
+
},
|
|
2201
|
+
get errorMessageProps() {
|
|
2202
|
+
return errorMessageProps;
|
|
2203
|
+
},
|
|
2204
|
+
get isInvalid() {
|
|
2205
|
+
return isInvalid();
|
|
2206
|
+
}
|
|
2207
|
+
};
|
|
2208
|
+
}
|
|
2209
|
+
function createCheckboxGroupItem(props, state2, inputRef) {
|
|
2210
|
+
const getProps = () => access$1(props);
|
|
2211
|
+
const toggleState = {
|
|
2212
|
+
isSelected: () => state2.isSelected(getProps().value),
|
|
2213
|
+
defaultSelected: state2.defaultValue.includes(getProps().value),
|
|
2214
|
+
setSelected(isSelected) {
|
|
2215
|
+
var _a, _b;
|
|
2216
|
+
const value = getProps().value;
|
|
2217
|
+
if (isSelected) {
|
|
2218
|
+
state2.addValue(value);
|
|
2219
|
+
} else {
|
|
2220
|
+
state2.removeValue(value);
|
|
2221
|
+
}
|
|
2222
|
+
(_b = (_a = getProps()).onChange) == null ? void 0 : _b.call(_a, isSelected);
|
|
2223
|
+
},
|
|
2224
|
+
toggle() {
|
|
2225
|
+
state2.toggleValue(getProps().value);
|
|
2226
|
+
}
|
|
2227
|
+
};
|
|
2228
|
+
const getGroupData = () => checkboxGroupData.get(state2);
|
|
2229
|
+
const checkboxProps = () => {
|
|
2230
|
+
const p = getProps();
|
|
2231
|
+
const groupData = getGroupData();
|
|
2232
|
+
return {
|
|
2233
|
+
...p,
|
|
2234
|
+
isReadOnly: p.isReadOnly ?? state2.isReadOnly,
|
|
2235
|
+
isDisabled: p.isDisabled ?? state2.isDisabled,
|
|
2236
|
+
name: p.name ?? (groupData == null ? void 0 : groupData.name),
|
|
2237
|
+
form: p.form ?? (groupData == null ? void 0 : groupData.form),
|
|
2238
|
+
isRequired: p.isRequired ?? state2.isRequired(),
|
|
2239
|
+
validationBehavior: p.validationBehavior ?? (groupData == null ? void 0 : groupData.validationBehavior) ?? "aria"
|
|
2240
|
+
};
|
|
2241
|
+
};
|
|
2242
|
+
const result = createCheckbox(checkboxProps, toggleState, inputRef);
|
|
2243
|
+
return {
|
|
2244
|
+
...result,
|
|
2245
|
+
get inputProps() {
|
|
2246
|
+
const baseInputProps = result.inputProps;
|
|
2247
|
+
const groupData = getGroupData();
|
|
2248
|
+
const describedByIds = [];
|
|
2249
|
+
const propsDescribedBy = getProps()["aria-describedby"];
|
|
2250
|
+
if (propsDescribedBy) {
|
|
2251
|
+
describedByIds.push(propsDescribedBy);
|
|
2252
|
+
}
|
|
2253
|
+
if (state2.isInvalid && (groupData == null ? void 0 : groupData.errorMessageId)) {
|
|
2254
|
+
describedByIds.push(groupData.errorMessageId);
|
|
2255
|
+
}
|
|
2256
|
+
if (groupData == null ? void 0 : groupData.descriptionId) {
|
|
2257
|
+
describedByIds.push(groupData.descriptionId);
|
|
2258
|
+
}
|
|
2259
|
+
const ariaDescribedBy = describedByIds.length > 0 ? describedByIds.join(" ") : void 0;
|
|
2260
|
+
return {
|
|
2261
|
+
...baseInputProps,
|
|
2262
|
+
"aria-describedby": ariaDescribedBy
|
|
2263
|
+
};
|
|
2264
|
+
}
|
|
2265
|
+
};
|
|
2266
|
+
}
|
|
2267
|
+
const radioGroupData = /* @__PURE__ */ new WeakMap();
|
|
2268
|
+
function createRadioGroup(props, state2) {
|
|
2269
|
+
const getProps = () => access$1(props);
|
|
2270
|
+
const orientation = () => getProps().orientation ?? "vertical";
|
|
2271
|
+
const isReadOnly = () => getProps().isReadOnly ?? false;
|
|
2272
|
+
const isRequired = () => getProps().isRequired ?? false;
|
|
2273
|
+
const isDisabled = () => getProps().isDisabled ?? false;
|
|
2274
|
+
const validationBehavior = () => getProps().validationBehavior ?? "aria";
|
|
2275
|
+
const { labelProps, fieldProps, descriptionProps, errorMessageProps } = createField({
|
|
2276
|
+
get label() {
|
|
2277
|
+
return getProps().label;
|
|
2278
|
+
},
|
|
2279
|
+
get description() {
|
|
2280
|
+
return getProps().description;
|
|
2281
|
+
},
|
|
2282
|
+
get errorMessage() {
|
|
2283
|
+
return getProps().errorMessage;
|
|
2284
|
+
},
|
|
2285
|
+
get isInvalid() {
|
|
2286
|
+
return state2.isInvalid;
|
|
2287
|
+
},
|
|
2288
|
+
// Radio group is not an HTML input element so it
|
|
2289
|
+
// shouldn't be labeled by a <label> element.
|
|
2290
|
+
labelElementType: "span"
|
|
2291
|
+
});
|
|
2292
|
+
const { focusWithinProps } = createFocusWithin({
|
|
2293
|
+
onBlurWithin(e) {
|
|
2294
|
+
var _a, _b;
|
|
2295
|
+
(_b = (_a = getProps()).onBlur) == null ? void 0 : _b.call(_a, e);
|
|
2296
|
+
if (!state2.selectedValue()) {
|
|
2297
|
+
state2.setLastFocusedValue(null);
|
|
2298
|
+
}
|
|
2299
|
+
},
|
|
2300
|
+
onFocusWithin: (e) => {
|
|
2301
|
+
var _a, _b;
|
|
2302
|
+
return (_b = (_a = getProps()).onFocus) == null ? void 0 : _b.call(_a, e);
|
|
2303
|
+
},
|
|
2304
|
+
onFocusWithinChange: (isFocused) => {
|
|
2305
|
+
var _a, _b;
|
|
2306
|
+
return (_b = (_a = getProps()).onFocusChange) == null ? void 0 : _b.call(_a, isFocused);
|
|
2307
|
+
}
|
|
2308
|
+
});
|
|
2309
|
+
const domProps = () => filterDOMProps(getProps(), { labelable: true });
|
|
2310
|
+
const groupName = getProps().name ?? createId();
|
|
2311
|
+
radioGroupData.set(state2, {
|
|
2312
|
+
name: groupName,
|
|
2313
|
+
form: getProps().form,
|
|
2314
|
+
descriptionId: descriptionProps.id,
|
|
2315
|
+
errorMessageId: errorMessageProps.id,
|
|
2316
|
+
validationBehavior: validationBehavior()
|
|
2317
|
+
});
|
|
2318
|
+
const onKeyDown = (_e) => {
|
|
2319
|
+
};
|
|
2320
|
+
return {
|
|
2321
|
+
get radioGroupProps() {
|
|
2322
|
+
return mergeProps(
|
|
2323
|
+
domProps(),
|
|
2324
|
+
focusWithinProps,
|
|
2325
|
+
{
|
|
2326
|
+
role: "radiogroup",
|
|
2327
|
+
onKeyDown,
|
|
2328
|
+
"aria-invalid": state2.isInvalid || void 0,
|
|
2329
|
+
"aria-errormessage": getProps()["aria-errormessage"],
|
|
2330
|
+
"aria-readonly": isReadOnly() || void 0,
|
|
2331
|
+
"aria-required": isRequired() || void 0,
|
|
2332
|
+
"aria-disabled": isDisabled() || void 0,
|
|
2333
|
+
"aria-orientation": orientation(),
|
|
2334
|
+
...fieldProps
|
|
2335
|
+
}
|
|
2336
|
+
);
|
|
2337
|
+
},
|
|
2338
|
+
labelProps,
|
|
2339
|
+
descriptionProps,
|
|
2340
|
+
errorMessageProps,
|
|
2341
|
+
get isInvalid() {
|
|
2342
|
+
return state2.isInvalid;
|
|
2343
|
+
},
|
|
2344
|
+
get validationErrors() {
|
|
2345
|
+
return [];
|
|
2346
|
+
},
|
|
2347
|
+
get validationDetails() {
|
|
2348
|
+
return {};
|
|
2349
|
+
}
|
|
2350
|
+
};
|
|
2351
|
+
}
|
|
2352
|
+
function createRadio(props, state2, ref) {
|
|
2353
|
+
const getProps = () => access$1(props);
|
|
2354
|
+
const isDisabled = () => getProps().isDisabled || state2.isDisabled;
|
|
2355
|
+
const value = () => getProps().value;
|
|
2356
|
+
const isSelected = () => {
|
|
2357
|
+
const selected = state2.selectedValue();
|
|
2358
|
+
const v = value();
|
|
2359
|
+
return selected === v;
|
|
2360
|
+
};
|
|
2361
|
+
createEffect(() => {
|
|
2362
|
+
const p = getProps();
|
|
2363
|
+
const hasChildren = p.children != null;
|
|
2364
|
+
const hasAriaLabel = p["aria-label"] != null || p["aria-labelledby"] != null;
|
|
2365
|
+
if (!hasChildren && !hasAriaLabel && process.env.NODE_ENV !== "production") {
|
|
2366
|
+
console.warn("If you do not provide children, you must specify an aria-label for accessibility");
|
|
2367
|
+
}
|
|
2368
|
+
});
|
|
2369
|
+
createEffect(() => {
|
|
2370
|
+
const inputEl = ref();
|
|
2371
|
+
if (!inputEl) return;
|
|
2372
|
+
const syncVersion = radioGroupSyncVersion.get(state2);
|
|
2373
|
+
syncVersion == null ? void 0 : syncVersion();
|
|
2374
|
+
const shouldBeChecked = isSelected();
|
|
2375
|
+
if (inputEl.checked !== shouldBeChecked) {
|
|
2376
|
+
inputEl.checked = shouldBeChecked;
|
|
2377
|
+
}
|
|
2378
|
+
});
|
|
2379
|
+
const onChange = (e) => {
|
|
2380
|
+
e.stopPropagation();
|
|
2381
|
+
const target = e.target;
|
|
2382
|
+
if (isDisabled()) {
|
|
2383
|
+
target.checked = isSelected();
|
|
2384
|
+
return;
|
|
2385
|
+
}
|
|
2386
|
+
state2.setSelectedValue(value());
|
|
2387
|
+
target.focus();
|
|
2388
|
+
target.checked = isSelected();
|
|
2389
|
+
};
|
|
2390
|
+
const { pressProps, isPressed } = createPress({
|
|
2391
|
+
get onPressStart() {
|
|
2392
|
+
return getProps().onPressStart;
|
|
2393
|
+
},
|
|
2394
|
+
get onPressEnd() {
|
|
2395
|
+
return getProps().onPressEnd;
|
|
2396
|
+
},
|
|
2397
|
+
get onPressChange() {
|
|
2398
|
+
return getProps().onPressChange;
|
|
2399
|
+
},
|
|
2400
|
+
get onPress() {
|
|
2401
|
+
return getProps().onPress;
|
|
2402
|
+
},
|
|
2403
|
+
get onPressUp() {
|
|
2404
|
+
return getProps().onPressUp;
|
|
2405
|
+
},
|
|
2406
|
+
get isDisabled() {
|
|
2407
|
+
return isDisabled();
|
|
2408
|
+
}
|
|
2409
|
+
});
|
|
2410
|
+
const { pressProps: labelPressProps, isPressed: isLabelPressed } = createPress({
|
|
2411
|
+
get onPressStart() {
|
|
2412
|
+
return getProps().onPressStart;
|
|
2413
|
+
},
|
|
2414
|
+
get onPressEnd() {
|
|
2415
|
+
return getProps().onPressEnd;
|
|
2416
|
+
},
|
|
2417
|
+
get onPressChange() {
|
|
2418
|
+
return getProps().onPressChange;
|
|
2419
|
+
},
|
|
2420
|
+
get onPressUp() {
|
|
2421
|
+
return getProps().onPressUp;
|
|
2422
|
+
},
|
|
2423
|
+
onPress(e) {
|
|
2424
|
+
var _a, _b, _c;
|
|
2425
|
+
(_b = (_a = getProps()).onPress) == null ? void 0 : _b.call(_a, e);
|
|
2426
|
+
state2.setSelectedValue(value());
|
|
2427
|
+
(_c = ref()) == null ? void 0 : _c.focus();
|
|
2428
|
+
},
|
|
2429
|
+
get isDisabled() {
|
|
2430
|
+
return isDisabled();
|
|
2431
|
+
}
|
|
2432
|
+
});
|
|
2433
|
+
const { focusableProps } = createFocusable({
|
|
2434
|
+
get isDisabled() {
|
|
2435
|
+
return isDisabled();
|
|
2436
|
+
},
|
|
2437
|
+
get autoFocus() {
|
|
2438
|
+
return getProps().autoFocus;
|
|
2439
|
+
},
|
|
2440
|
+
onFocus(e) {
|
|
2441
|
+
var _a, _b;
|
|
2442
|
+
(_b = (_a = getProps()).onFocus) == null ? void 0 : _b.call(_a, e);
|
|
2443
|
+
state2.setLastFocusedValue(value());
|
|
2444
|
+
},
|
|
2445
|
+
get onBlur() {
|
|
2446
|
+
return getProps().onBlur;
|
|
2447
|
+
},
|
|
2448
|
+
get onFocusChange() {
|
|
2449
|
+
return getProps().onFocusChange;
|
|
2450
|
+
},
|
|
2451
|
+
get onKeyDown() {
|
|
2452
|
+
return getProps().onKeyDown;
|
|
2453
|
+
},
|
|
2454
|
+
get onKeyUp() {
|
|
2455
|
+
return getProps().onKeyUp;
|
|
2456
|
+
}
|
|
2457
|
+
}, ref);
|
|
2458
|
+
const interactions = mergeProps(pressProps, focusableProps);
|
|
2459
|
+
const domProps = () => filterDOMProps(getProps(), { labelable: true });
|
|
2460
|
+
const getTabIndex = () => {
|
|
2461
|
+
if (isDisabled()) {
|
|
2462
|
+
return void 0;
|
|
2463
|
+
}
|
|
2464
|
+
const selected = state2.selectedValue();
|
|
2465
|
+
const lastFocused = state2.lastFocusedValue();
|
|
2466
|
+
const currentValue = value();
|
|
2467
|
+
if (selected != null) {
|
|
2468
|
+
if (selected === currentValue) {
|
|
2469
|
+
return 0;
|
|
2470
|
+
}
|
|
2471
|
+
return -1;
|
|
2472
|
+
} else {
|
|
2473
|
+
if (lastFocused === currentValue || lastFocused == null) {
|
|
2474
|
+
return 0;
|
|
2475
|
+
}
|
|
2476
|
+
return -1;
|
|
2477
|
+
}
|
|
2478
|
+
};
|
|
2479
|
+
const getGroupData = () => radioGroupData.get(state2);
|
|
2480
|
+
const combinedIsPressed = () => isPressed() || isLabelPressed();
|
|
2481
|
+
return {
|
|
2482
|
+
labelProps: mergeProps(labelPressProps, {
|
|
2483
|
+
onClick: (e) => e.preventDefault(),
|
|
2484
|
+
onMouseDown: (e) => e.preventDefault()
|
|
2485
|
+
}),
|
|
2486
|
+
get inputProps() {
|
|
2487
|
+
const p = getProps();
|
|
2488
|
+
const groupData = getGroupData();
|
|
2489
|
+
const describedByIds = [];
|
|
2490
|
+
if (p["aria-describedby"]) {
|
|
2491
|
+
describedByIds.push(p["aria-describedby"]);
|
|
2492
|
+
}
|
|
2493
|
+
if (state2.isInvalid && (groupData == null ? void 0 : groupData.errorMessageId)) {
|
|
2494
|
+
describedByIds.push(groupData.errorMessageId);
|
|
2495
|
+
}
|
|
2496
|
+
if (groupData == null ? void 0 : groupData.descriptionId) {
|
|
2497
|
+
describedByIds.push(groupData.descriptionId);
|
|
2498
|
+
}
|
|
2499
|
+
const ariaDescribedBy = describedByIds.length > 0 ? describedByIds.join(" ") : void 0;
|
|
2500
|
+
return mergeProps(domProps(), interactions, {
|
|
2501
|
+
type: "radio",
|
|
2502
|
+
name: groupData == null ? void 0 : groupData.name,
|
|
2503
|
+
form: groupData == null ? void 0 : groupData.form,
|
|
2504
|
+
tabIndex: getTabIndex(),
|
|
2505
|
+
disabled: isDisabled(),
|
|
2506
|
+
required: state2.isRequired && (groupData == null ? void 0 : groupData.validationBehavior) === "native",
|
|
2507
|
+
checked: isSelected(),
|
|
2508
|
+
value: value(),
|
|
2509
|
+
onChange,
|
|
2510
|
+
"aria-describedby": ariaDescribedBy
|
|
2511
|
+
});
|
|
2512
|
+
},
|
|
2513
|
+
isDisabled: isDisabled(),
|
|
2514
|
+
isSelected,
|
|
2515
|
+
isPressed: combinedIsPressed
|
|
2516
|
+
};
|
|
2517
|
+
}
|
|
2518
|
+
function createSwitch(props, state2, ref) {
|
|
2519
|
+
const toggle = createToggle(props, state2, ref);
|
|
2520
|
+
return {
|
|
2521
|
+
labelProps: toggle.labelProps,
|
|
2522
|
+
get inputProps() {
|
|
2523
|
+
const baseProps = toggle.inputProps;
|
|
2524
|
+
return {
|
|
2525
|
+
...baseProps,
|
|
2526
|
+
role: "switch",
|
|
2527
|
+
checked: toggle.isSelected()
|
|
2528
|
+
};
|
|
2529
|
+
},
|
|
2530
|
+
isSelected: toggle.isSelected,
|
|
2531
|
+
isPressed: toggle.isPressed,
|
|
2532
|
+
isDisabled: toggle.isDisabled,
|
|
2533
|
+
isReadOnly: toggle.isReadOnly
|
|
2534
|
+
};
|
|
2535
|
+
}
|
|
2536
|
+
function createLink(props = {}) {
|
|
2537
|
+
const getProps = () => access$1(props);
|
|
2538
|
+
const isDisabled = () => getProps().isDisabled ?? false;
|
|
2539
|
+
const elementType = () => getProps().elementType ?? "a";
|
|
2540
|
+
const { pressProps, isPressed } = createPress({
|
|
2541
|
+
get isDisabled() {
|
|
2542
|
+
return isDisabled();
|
|
2543
|
+
},
|
|
2544
|
+
get onPress() {
|
|
2545
|
+
return getProps().onPress;
|
|
2546
|
+
},
|
|
2547
|
+
get onPressStart() {
|
|
2548
|
+
return getProps().onPressStart;
|
|
2549
|
+
},
|
|
2550
|
+
get onPressEnd() {
|
|
2551
|
+
return getProps().onPressEnd;
|
|
2552
|
+
}
|
|
2553
|
+
});
|
|
2554
|
+
const { focusableProps } = createFocusable({
|
|
2555
|
+
get isDisabled() {
|
|
2556
|
+
return isDisabled();
|
|
2557
|
+
},
|
|
2558
|
+
get autoFocus() {
|
|
2559
|
+
return getProps().autoFocus;
|
|
2560
|
+
},
|
|
2561
|
+
get onFocus() {
|
|
2562
|
+
return getProps().onFocus;
|
|
2563
|
+
},
|
|
2564
|
+
get onBlur() {
|
|
2565
|
+
return getProps().onBlur;
|
|
2566
|
+
},
|
|
2567
|
+
get onFocusChange() {
|
|
2568
|
+
return getProps().onFocusChange;
|
|
2569
|
+
},
|
|
2570
|
+
get onKeyDown() {
|
|
2571
|
+
return getProps().onKeyDown;
|
|
2572
|
+
},
|
|
2573
|
+
get onKeyUp() {
|
|
2574
|
+
return getProps().onKeyUp;
|
|
2575
|
+
}
|
|
2576
|
+
});
|
|
2577
|
+
const getLinkProps = () => {
|
|
2578
|
+
const p = getProps();
|
|
2579
|
+
const elType = elementType();
|
|
2580
|
+
const disabled = isDisabled();
|
|
2581
|
+
let baseProps = {};
|
|
2582
|
+
if (elType !== "a") {
|
|
2583
|
+
baseProps = {
|
|
2584
|
+
role: "link",
|
|
2585
|
+
tabIndex: disabled ? void 0 : 0
|
|
2586
|
+
};
|
|
2587
|
+
}
|
|
2588
|
+
if (elType === "a") {
|
|
2589
|
+
if (p.href) baseProps.href = p.href;
|
|
2590
|
+
if (p.target) baseProps.target = p.target;
|
|
2591
|
+
if (p.rel) baseProps.rel = p.rel;
|
|
2592
|
+
}
|
|
2593
|
+
const ariaProps = {
|
|
2594
|
+
"aria-disabled": disabled || void 0
|
|
2595
|
+
};
|
|
2596
|
+
if (p["aria-current"] !== void 0) {
|
|
2597
|
+
ariaProps["aria-current"] = p["aria-current"];
|
|
2598
|
+
}
|
|
2599
|
+
if (p["aria-label"]) {
|
|
2600
|
+
ariaProps["aria-label"] = p["aria-label"];
|
|
2601
|
+
}
|
|
2602
|
+
if (p["aria-labelledby"]) {
|
|
2603
|
+
ariaProps["aria-labelledby"] = p["aria-labelledby"];
|
|
2604
|
+
}
|
|
2605
|
+
if (p["aria-describedby"]) {
|
|
2606
|
+
ariaProps["aria-describedby"] = p["aria-describedby"];
|
|
2607
|
+
}
|
|
2608
|
+
const onClick = (e) => {
|
|
2609
|
+
var _a;
|
|
2610
|
+
if (disabled) {
|
|
2611
|
+
e.preventDefault();
|
|
2612
|
+
return;
|
|
2613
|
+
}
|
|
2614
|
+
(_a = p.onClick) == null ? void 0 : _a.call(p, e);
|
|
2615
|
+
};
|
|
2616
|
+
return mergeProps(
|
|
2617
|
+
filterDOMProps(p, { labelable: true }),
|
|
2618
|
+
baseProps,
|
|
2619
|
+
ariaProps,
|
|
2620
|
+
focusableProps,
|
|
2621
|
+
pressProps,
|
|
2622
|
+
{ onClick }
|
|
2623
|
+
);
|
|
2624
|
+
};
|
|
2625
|
+
return {
|
|
2626
|
+
get linkProps() {
|
|
2627
|
+
return getLinkProps();
|
|
2628
|
+
},
|
|
2629
|
+
isPressed
|
|
2630
|
+
};
|
|
2631
|
+
}
|
|
2632
|
+
function createTextField(props, ref) {
|
|
2633
|
+
const getProps = () => access$1(props);
|
|
2634
|
+
const { labelProps, fieldProps, descriptionProps, errorMessageProps } = createField(props);
|
|
2635
|
+
const { focusableProps } = createFocusable(
|
|
2636
|
+
{
|
|
2637
|
+
get isDisabled() {
|
|
2638
|
+
return getProps().isDisabled;
|
|
2639
|
+
},
|
|
2640
|
+
get autoFocus() {
|
|
2641
|
+
return getProps().autoFocus;
|
|
2642
|
+
},
|
|
2643
|
+
onFocus: getProps().onFocus,
|
|
2644
|
+
onBlur: getProps().onBlur,
|
|
2645
|
+
onFocusChange: getProps().onFocusChange,
|
|
2646
|
+
onKeyDown: getProps().onKeyDown,
|
|
2647
|
+
onKeyUp: getProps().onKeyUp
|
|
2648
|
+
},
|
|
2649
|
+
ref
|
|
2650
|
+
);
|
|
2651
|
+
const getDomProps = () => filterDOMProps(getProps(), { labelable: true });
|
|
2652
|
+
const getInputProps = () => {
|
|
2653
|
+
const p = getProps();
|
|
2654
|
+
const isInvalid = p.isInvalid ?? false;
|
|
2655
|
+
const isTextarea = p.inputElementType === "textarea";
|
|
2656
|
+
return mergeProps(
|
|
2657
|
+
getDomProps(),
|
|
2658
|
+
{
|
|
2659
|
+
disabled: p.isDisabled,
|
|
2660
|
+
readOnly: p.isReadOnly,
|
|
2661
|
+
required: p.isRequired,
|
|
2662
|
+
"aria-required": p.isRequired || void 0,
|
|
2663
|
+
"aria-invalid": isInvalid || void 0,
|
|
2664
|
+
value: p.value ?? p.defaultValue ?? "",
|
|
2665
|
+
onChange: (e) => {
|
|
2666
|
+
var _a;
|
|
2667
|
+
const target = e.target;
|
|
2668
|
+
(_a = p.onChange) == null ? void 0 : _a.call(p, target.value);
|
|
2669
|
+
},
|
|
2670
|
+
// Don't include type and pattern for textarea elements
|
|
2671
|
+
type: isTextarea ? void 0 : p.type ?? "text",
|
|
2672
|
+
inputMode: p.inputMode,
|
|
2673
|
+
name: p.name,
|
|
2674
|
+
pattern: isTextarea ? void 0 : p.pattern,
|
|
2675
|
+
maxLength: p.maxLength,
|
|
2676
|
+
minLength: p.minLength,
|
|
2677
|
+
placeholder: p.placeholder,
|
|
2678
|
+
autoComplete: p.autoComplete,
|
|
2679
|
+
autoCorrect: p.autoCorrect,
|
|
2680
|
+
autoCapitalize: p.autoCapitalize,
|
|
2681
|
+
spellCheck: p.spellCheck,
|
|
2682
|
+
// Clipboard events
|
|
2683
|
+
onCopy: p.onCopy,
|
|
2684
|
+
onCut: p.onCut,
|
|
2685
|
+
onPaste: p.onPaste,
|
|
2686
|
+
// Composition events
|
|
2687
|
+
onCompositionStart: p.onCompositionStart,
|
|
2688
|
+
onCompositionEnd: p.onCompositionEnd,
|
|
2689
|
+
onCompositionUpdate: p.onCompositionUpdate,
|
|
2690
|
+
// Selection events
|
|
2691
|
+
onSelect: p.onSelect,
|
|
2692
|
+
// Input events
|
|
2693
|
+
onBeforeInput: p.onBeforeInput,
|
|
2694
|
+
onInput: p.onInput
|
|
2695
|
+
},
|
|
2696
|
+
focusableProps,
|
|
2697
|
+
fieldProps
|
|
2698
|
+
);
|
|
2699
|
+
};
|
|
2700
|
+
const getIsInvalid = () => {
|
|
2701
|
+
return getProps().isInvalid ?? false;
|
|
2702
|
+
};
|
|
2703
|
+
return {
|
|
2704
|
+
get labelProps() {
|
|
2705
|
+
return labelProps;
|
|
2706
|
+
},
|
|
2707
|
+
get inputProps() {
|
|
2708
|
+
return getInputProps();
|
|
2709
|
+
},
|
|
2710
|
+
get descriptionProps() {
|
|
2711
|
+
return descriptionProps;
|
|
2712
|
+
},
|
|
2713
|
+
get errorMessageProps() {
|
|
2714
|
+
return errorMessageProps;
|
|
2715
|
+
},
|
|
2716
|
+
get isInvalid() {
|
|
2717
|
+
return getIsInvalid();
|
|
2718
|
+
}
|
|
2719
|
+
};
|
|
2720
|
+
}
|
|
2721
|
+
function clamp(value, min, max) {
|
|
2722
|
+
return Math.min(Math.max(value, min), max);
|
|
2723
|
+
}
|
|
2724
|
+
function createProgressBar(props = {}) {
|
|
2725
|
+
const getProps = () => access$1(props);
|
|
2726
|
+
const { labelProps, fieldProps } = createLabel({
|
|
2727
|
+
get label() {
|
|
2728
|
+
return getProps().label;
|
|
2729
|
+
},
|
|
2730
|
+
get "aria-label"() {
|
|
2731
|
+
return getProps()["aria-label"];
|
|
2732
|
+
},
|
|
2733
|
+
get "aria-labelledby"() {
|
|
2734
|
+
return getProps()["aria-labelledby"];
|
|
2735
|
+
},
|
|
2736
|
+
// Progress bar is not an HTML input element so it
|
|
2737
|
+
// shouldn't be labeled by a <label> element.
|
|
2738
|
+
labelElementType: "span"
|
|
2739
|
+
});
|
|
2740
|
+
const getProgressBarProps = () => {
|
|
2741
|
+
const p = getProps();
|
|
2742
|
+
const value = p.value ?? 0;
|
|
2743
|
+
const minValue = p.minValue ?? 0;
|
|
2744
|
+
const maxValue = p.maxValue ?? 100;
|
|
2745
|
+
const isIndeterminate = p.isIndeterminate ?? false;
|
|
2746
|
+
const formatOptions = p.formatOptions ?? { style: "percent" };
|
|
2747
|
+
const clampedValue = clamp(value, minValue, maxValue);
|
|
2748
|
+
const percentage = (clampedValue - minValue) / (maxValue - minValue);
|
|
2749
|
+
let valueLabel = p.valueLabel;
|
|
2750
|
+
if (!isIndeterminate && !valueLabel) {
|
|
2751
|
+
const valueToFormat = formatOptions.style === "percent" ? percentage : clampedValue;
|
|
2752
|
+
try {
|
|
2753
|
+
const formatter = new Intl.NumberFormat(void 0, formatOptions);
|
|
2754
|
+
valueLabel = formatter.format(valueToFormat);
|
|
2755
|
+
} catch {
|
|
2756
|
+
valueLabel = `${Math.round(percentage * 100)}%`;
|
|
2757
|
+
}
|
|
2758
|
+
}
|
|
2759
|
+
const domProps = filterDOMProps(p, { labelable: true });
|
|
2760
|
+
return mergeProps(domProps, fieldProps, {
|
|
2761
|
+
"aria-valuenow": isIndeterminate ? void 0 : clampedValue,
|
|
2762
|
+
"aria-valuemin": minValue,
|
|
2763
|
+
"aria-valuemax": maxValue,
|
|
2764
|
+
"aria-valuetext": isIndeterminate ? void 0 : valueLabel,
|
|
2765
|
+
role: "progressbar"
|
|
2766
|
+
});
|
|
2767
|
+
};
|
|
2768
|
+
return {
|
|
2769
|
+
get progressBarProps() {
|
|
2770
|
+
return getProgressBarProps();
|
|
2771
|
+
},
|
|
2772
|
+
get labelProps() {
|
|
2773
|
+
return labelProps;
|
|
2774
|
+
}
|
|
2775
|
+
};
|
|
2776
|
+
}
|
|
2777
|
+
function createSeparator(props = {}) {
|
|
2778
|
+
const getSeparatorProps = () => {
|
|
2779
|
+
const p = access$1(props);
|
|
2780
|
+
const domProps = filterDOMProps(p, { labelable: true });
|
|
2781
|
+
let ariaOrientation;
|
|
2782
|
+
if (p.orientation === "vertical") {
|
|
2783
|
+
ariaOrientation = "vertical";
|
|
2784
|
+
}
|
|
2785
|
+
if (p.elementType !== "hr") {
|
|
2786
|
+
return {
|
|
2787
|
+
...domProps,
|
|
2788
|
+
role: "separator",
|
|
2789
|
+
"aria-orientation": ariaOrientation
|
|
2790
|
+
};
|
|
2791
|
+
}
|
|
2792
|
+
return domProps;
|
|
2793
|
+
};
|
|
2794
|
+
return {
|
|
2795
|
+
get separatorProps() {
|
|
2796
|
+
return getSeparatorProps();
|
|
2797
|
+
}
|
|
2798
|
+
};
|
|
2799
|
+
}
|
|
2800
|
+
export {
|
|
2801
|
+
access$1 as access,
|
|
2802
|
+
canUseDOM,
|
|
2803
|
+
checkboxGroupData,
|
|
2804
|
+
createButton,
|
|
2805
|
+
createCheckbox,
|
|
2806
|
+
createCheckboxGroup,
|
|
2807
|
+
createCheckboxGroupItem,
|
|
2808
|
+
createCheckboxGroupState,
|
|
2809
|
+
createField,
|
|
2810
|
+
createFocusRing,
|
|
2811
|
+
createFocusable,
|
|
2812
|
+
createHover,
|
|
2813
|
+
createId,
|
|
2814
|
+
createIsSSR,
|
|
2815
|
+
createLabel,
|
|
2816
|
+
createLabels,
|
|
2817
|
+
createLink,
|
|
2818
|
+
createPress,
|
|
2819
|
+
createProgressBar,
|
|
2820
|
+
createRadio,
|
|
2821
|
+
createRadioGroup,
|
|
2822
|
+
createRadioGroupState,
|
|
2823
|
+
createSeparator,
|
|
2824
|
+
createSwitch,
|
|
2825
|
+
createTextField,
|
|
2826
|
+
createToggle,
|
|
2827
|
+
createToggleButton,
|
|
2828
|
+
createToggleState,
|
|
2829
|
+
filterDOMProps,
|
|
2830
|
+
isAccessor,
|
|
2831
|
+
mergeProps,
|
|
2832
|
+
radioGroupData
|
|
2833
|
+
};
|
|
2834
|
+
//# sourceMappingURL=index.js.map
|