@jirawatpyk/aura-react 4.12.0 → 4.13.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +15 -1
- package/dist/aura.bundle.js +938 -433
- package/dist/cjs/index.cjs +937 -432
- package/dist/esm/Command.js +213 -0
- package/dist/esm/FilterBar.js +112 -0
- package/dist/esm/FormErrorSummary.js +76 -0
- package/dist/esm/PasswordField.js +38 -0
- package/dist/esm/Toaster.js +60 -14
- package/dist/esm/index.js +8 -0
- package/dist/esm/locale.js +39 -0
- package/dist/index.d.ts +111 -1
- package/dist/styles.css +100 -0
- package/package.json +1 -1
package/dist/cjs/index.cjs
CHANGED
|
@@ -45,6 +45,7 @@ __export(index_exports, {
|
|
|
45
45
|
ColorSchemeScript: () => ColorSchemeScript,
|
|
46
46
|
ColorSchemeToggle: () => ColorSchemeToggle,
|
|
47
47
|
Combobox: () => Combobox,
|
|
48
|
+
Command: () => Command,
|
|
48
49
|
Container: () => Container,
|
|
49
50
|
DataTable: () => DataTable,
|
|
50
51
|
DatePicker: () => DatePicker,
|
|
@@ -55,6 +56,8 @@ __export(index_exports, {
|
|
|
55
56
|
EmptyState: () => EmptyState,
|
|
56
57
|
Field: () => Field,
|
|
57
58
|
FileUpload: () => FileUpload,
|
|
59
|
+
FilterBar: () => FilterBar,
|
|
60
|
+
FormErrorSummary: () => FormErrorSummary,
|
|
58
61
|
Grid: () => Grid,
|
|
59
62
|
ICONS: () => ICONS,
|
|
60
63
|
Icon: () => Icon,
|
|
@@ -62,6 +65,7 @@ __export(index_exports, {
|
|
|
62
65
|
Menu: () => Menu,
|
|
63
66
|
NumberField: () => NumberField,
|
|
64
67
|
Pagination: () => Pagination,
|
|
68
|
+
PasswordField: () => PasswordField,
|
|
65
69
|
Popover: () => Popover,
|
|
66
70
|
Progress: () => Progress,
|
|
67
71
|
RadioGroup: () => RadioGroup,
|
|
@@ -255,6 +259,19 @@ var STRINGS = {
|
|
|
255
259
|
close: "Close",
|
|
256
260
|
dismiss: "Dismiss",
|
|
257
261
|
dismissToast: "Dismiss notification",
|
|
262
|
+
showPassword: "Show password",
|
|
263
|
+
filters: "Filters",
|
|
264
|
+
search: "Search",
|
|
265
|
+
clearFilters: "Clear all",
|
|
266
|
+
results: function(n2) {
|
|
267
|
+
return n2 === 1 ? "1 result" : n2.toLocaleString("en") + " results";
|
|
268
|
+
},
|
|
269
|
+
commandMenu: "Command menu",
|
|
270
|
+
commandPlaceholder: "Type a command or search\u2026",
|
|
271
|
+
commandHint: "\u2191\u2193 to move \xB7 Enter to open \xB7 Esc to close",
|
|
272
|
+
errorSummary: function(n2) {
|
|
273
|
+
return n2 === 1 ? "Fix 1 field to continue" : "Fix " + n2 + " fields to continue";
|
|
274
|
+
},
|
|
258
275
|
notifications: "Notifications",
|
|
259
276
|
mainNav: "Main",
|
|
260
277
|
breadcrumb: "Breadcrumb",
|
|
@@ -353,6 +370,19 @@ var STRINGS = {
|
|
|
353
370
|
close: "\u0E1B\u0E34\u0E14",
|
|
354
371
|
dismiss: "\u0E1B\u0E34\u0E14",
|
|
355
372
|
dismissToast: "\u0E1B\u0E34\u0E14\u0E01\u0E32\u0E23\u0E41\u0E08\u0E49\u0E07\u0E40\u0E15\u0E37\u0E2D\u0E19",
|
|
373
|
+
showPassword: "\u0E41\u0E2A\u0E14\u0E07\u0E23\u0E2B\u0E31\u0E2A\u0E1C\u0E48\u0E32\u0E19",
|
|
374
|
+
filters: "\u0E15\u0E31\u0E27\u0E01\u0E23\u0E2D\u0E07",
|
|
375
|
+
search: "\u0E04\u0E49\u0E19\u0E2B\u0E32",
|
|
376
|
+
clearFilters: "\u0E25\u0E49\u0E32\u0E07\u0E17\u0E31\u0E49\u0E07\u0E2B\u0E21\u0E14",
|
|
377
|
+
results: function(n2) {
|
|
378
|
+
return n2.toLocaleString("en") + " \u0E23\u0E32\u0E22\u0E01\u0E32\u0E23";
|
|
379
|
+
},
|
|
380
|
+
commandMenu: "\u0E40\u0E21\u0E19\u0E39\u0E04\u0E33\u0E2A\u0E31\u0E48\u0E07",
|
|
381
|
+
commandPlaceholder: "\u0E1E\u0E34\u0E21\u0E1E\u0E4C\u0E04\u0E33\u0E2A\u0E31\u0E48\u0E07\u0E2B\u0E23\u0E37\u0E2D\u0E04\u0E49\u0E19\u0E2B\u0E32\u2026",
|
|
382
|
+
commandHint: "\u2191\u2193 \u0E40\u0E25\u0E37\u0E48\u0E2D\u0E19 \xB7 Enter \u0E40\u0E1B\u0E34\u0E14 \xB7 Esc \u0E1B\u0E34\u0E14",
|
|
383
|
+
errorSummary: function(n2) {
|
|
384
|
+
return "\u0E41\u0E01\u0E49\u0E44\u0E02 " + n2 + " \u0E0A\u0E48\u0E2D\u0E07\u0E01\u0E48\u0E2D\u0E19\u0E44\u0E1B\u0E15\u0E48\u0E2D";
|
|
385
|
+
},
|
|
356
386
|
notifications: "\u0E01\u0E32\u0E23\u0E41\u0E08\u0E49\u0E07\u0E40\u0E15\u0E37\u0E2D\u0E19",
|
|
357
387
|
mainNav: "\u0E40\u0E21\u0E19\u0E39\u0E2B\u0E25\u0E31\u0E01",
|
|
358
388
|
breadcrumb: "\u0E40\u0E2A\u0E49\u0E19\u0E17\u0E32\u0E07",
|
|
@@ -451,6 +481,19 @@ var STRINGS = {
|
|
|
451
481
|
close: "St\xE4ng",
|
|
452
482
|
dismiss: "St\xE4ng",
|
|
453
483
|
dismissToast: "St\xE4ng aviseringen",
|
|
484
|
+
showPassword: "Visa l\xF6senord",
|
|
485
|
+
filters: "Filter",
|
|
486
|
+
search: "S\xF6k",
|
|
487
|
+
clearFilters: "Rensa alla",
|
|
488
|
+
results: function(n2) {
|
|
489
|
+
return n2 === 1 ? "1 tr\xE4ff" : n2.toLocaleString("sv-SE") + " tr\xE4ffar";
|
|
490
|
+
},
|
|
491
|
+
commandMenu: "Kommandomeny",
|
|
492
|
+
commandPlaceholder: "Skriv ett kommando eller s\xF6k\u2026",
|
|
493
|
+
commandHint: "\u2191\u2193 flytta \xB7 Enter \xF6ppna \xB7 Esc st\xE4ng",
|
|
494
|
+
errorSummary: function(n2) {
|
|
495
|
+
return n2 === 1 ? "R\xE4tta 1 f\xE4lt f\xF6r att forts\xE4tta" : "R\xE4tta " + n2 + " f\xE4lt f\xF6r att forts\xE4tta";
|
|
496
|
+
},
|
|
454
497
|
notifications: "Aviseringar",
|
|
455
498
|
mainNav: "Huvudmeny",
|
|
456
499
|
breadcrumb: "Br\xF6dsmulor",
|
|
@@ -677,7 +720,7 @@ var Menu = React6.forwardRef(function Menu2(props, ref) {
|
|
|
677
720
|
const own = React6.useRef(null), merged = useMergedRef(ref, own);
|
|
678
721
|
const posState = React6.useState(null);
|
|
679
722
|
const pos = posState[0], setPos = posState[1];
|
|
680
|
-
const
|
|
723
|
+
const items2 = props.items || [];
|
|
681
724
|
const mounted = useMounted();
|
|
682
725
|
useIsoLayoutEffect(
|
|
683
726
|
function() {
|
|
@@ -749,7 +792,7 @@ var Menu = React6.forwardRef(function Menu2(props, ref) {
|
|
|
749
792
|
onKeyDown,
|
|
750
793
|
style: { top: pos ? pos.top : -9999, left: pos ? pos.left : -9999 }
|
|
751
794
|
},
|
|
752
|
-
|
|
795
|
+
items2.map(function(it, i) {
|
|
753
796
|
if (it.separator) return /* @__PURE__ */ React6.createElement("div", { key: "s" + i, role: "separator", className: "aura-menu__sep" });
|
|
754
797
|
const isCheck = it.checked !== void 0;
|
|
755
798
|
return /* @__PURE__ */ React6.createElement(
|
|
@@ -2069,7 +2112,7 @@ var DateRangePicker = React17.forwardRef(
|
|
|
2069
2112
|
const boxRef = React17.useRef(null), inputRef = React17.useRef(null), inputMerged = useMergedRef(ref, inputRef);
|
|
2070
2113
|
const pop = useCalendarPopover(boxRef);
|
|
2071
2114
|
const o = { locale, calendar };
|
|
2072
|
-
function
|
|
2115
|
+
function show2(r) {
|
|
2073
2116
|
if (!r.start) return "";
|
|
2074
2117
|
if (!r.end) return formatDate(r.start, o) + " \u2013";
|
|
2075
2118
|
return formatDate(r.start, o) + " \u2013 " + formatDate(r.end, o);
|
|
@@ -2151,7 +2194,7 @@ var DateRangePicker = React17.forwardRef(
|
|
|
2151
2194
|
boxRef,
|
|
2152
2195
|
inputRef: inputMerged,
|
|
2153
2196
|
open: pop.open,
|
|
2154
|
-
display:
|
|
2197
|
+
display: show2(v),
|
|
2155
2198
|
placeholder: props.placeholder || dt.rangePlaceholder,
|
|
2156
2199
|
hasValue: v.start != null,
|
|
2157
2200
|
clearable: props.clearable,
|
|
@@ -2209,15 +2252,40 @@ function emitToasts() {
|
|
|
2209
2252
|
f(toastState.list.slice());
|
|
2210
2253
|
});
|
|
2211
2254
|
}
|
|
2212
|
-
function
|
|
2213
|
-
if (typeof opts === "string") opts = { title: opts };
|
|
2255
|
+
function show(opts) {
|
|
2214
2256
|
const id = opts.id || "t" + ++toastState.n;
|
|
2215
|
-
|
|
2216
|
-
return t.id
|
|
2217
|
-
})
|
|
2257
|
+
const at = toastState.list.findIndex(function(t) {
|
|
2258
|
+
return t.id === id;
|
|
2259
|
+
});
|
|
2260
|
+
const entry = Object.assign({ tone: "info" }, opts, {
|
|
2261
|
+
id,
|
|
2262
|
+
loading: !!opts.loading,
|
|
2263
|
+
rev: at >= 0 ? toastState.list[at].rev + 1 : 0
|
|
2264
|
+
});
|
|
2265
|
+
if (at >= 0) {
|
|
2266
|
+
toastState.list = toastState.list.slice();
|
|
2267
|
+
toastState.list[at] = entry;
|
|
2268
|
+
} else toastState.list = toastState.list.concat([entry]).slice(-3);
|
|
2218
2269
|
emitToasts();
|
|
2219
2270
|
return id;
|
|
2220
2271
|
}
|
|
2272
|
+
function toast(opts) {
|
|
2273
|
+
return show(typeof opts === "string" ? { title: opts } : opts);
|
|
2274
|
+
}
|
|
2275
|
+
function shorthand(tone2) {
|
|
2276
|
+
return function(title, opts) {
|
|
2277
|
+
return show(Object.assign({}, opts, { title, tone: tone2 }));
|
|
2278
|
+
};
|
|
2279
|
+
}
|
|
2280
|
+
toast.success = shorthand("success");
|
|
2281
|
+
toast.error = shorthand("danger");
|
|
2282
|
+
toast.warning = shorthand("warning");
|
|
2283
|
+
toast.info = shorthand("info");
|
|
2284
|
+
toast.loading = function(title, opts) {
|
|
2285
|
+
return show(
|
|
2286
|
+
Object.assign({}, opts, { title, tone: "info", loading: true, duration: Infinity })
|
|
2287
|
+
);
|
|
2288
|
+
};
|
|
2221
2289
|
toast.dismiss = function(id) {
|
|
2222
2290
|
toastState.list = toastState.list.filter(function(t) {
|
|
2223
2291
|
return t.id !== id;
|
|
@@ -2227,35 +2295,56 @@ toast.dismiss = function(id) {
|
|
|
2227
2295
|
function ToastItem(props) {
|
|
2228
2296
|
const str = useStrings();
|
|
2229
2297
|
const t = props.toast, timer = React19.useRef(null), left = React19.useRef(t.duration || 5e3), since = React19.useRef(0);
|
|
2298
|
+
const hover = React19.useRef(false);
|
|
2230
2299
|
function start() {
|
|
2231
|
-
if (left.current === Infinity) return;
|
|
2300
|
+
if (left.current === Infinity || timer.current) return;
|
|
2232
2301
|
since.current = Date.now();
|
|
2233
2302
|
timer.current = setTimeout(function() {
|
|
2234
2303
|
toast.dismiss(t.id);
|
|
2235
2304
|
}, left.current);
|
|
2236
2305
|
}
|
|
2306
|
+
function resume() {
|
|
2307
|
+
hover.current = false;
|
|
2308
|
+
start();
|
|
2309
|
+
}
|
|
2237
2310
|
function pause() {
|
|
2311
|
+
hover.current = true;
|
|
2238
2312
|
if (timer.current) {
|
|
2239
2313
|
clearTimeout(timer.current);
|
|
2240
2314
|
timer.current = null;
|
|
2241
2315
|
left.current -= Date.now() - since.current;
|
|
2242
2316
|
}
|
|
2243
2317
|
}
|
|
2244
|
-
React19.useEffect(
|
|
2245
|
-
|
|
2246
|
-
|
|
2247
|
-
|
|
2318
|
+
React19.useEffect(
|
|
2319
|
+
function() {
|
|
2320
|
+
if (timer.current) clearTimeout(timer.current);
|
|
2321
|
+
timer.current = null;
|
|
2322
|
+
left.current = t.duration || 5e3;
|
|
2323
|
+
if (!hover.current) start();
|
|
2324
|
+
return function() {
|
|
2325
|
+
if (timer.current) clearTimeout(timer.current);
|
|
2326
|
+
};
|
|
2327
|
+
},
|
|
2328
|
+
[t.rev]
|
|
2329
|
+
);
|
|
2248
2330
|
return /* @__PURE__ */ React19.createElement(
|
|
2249
2331
|
"div",
|
|
2250
2332
|
{
|
|
2251
|
-
className: cx("aura-toast", "aura-toast--" + t.tone),
|
|
2333
|
+
className: cx("aura-toast", "aura-toast--" + t.tone, t.loading && "is-loading"),
|
|
2252
2334
|
role: t.tone === "danger" ? "alert" : "status",
|
|
2335
|
+
"aria-busy": t.loading || void 0,
|
|
2253
2336
|
onMouseEnter: pause,
|
|
2254
|
-
onMouseLeave:
|
|
2337
|
+
onMouseLeave: resume,
|
|
2255
2338
|
onFocus: pause,
|
|
2256
|
-
onBlur:
|
|
2339
|
+
onBlur: resume
|
|
2257
2340
|
},
|
|
2258
|
-
/* @__PURE__ */ React19.createElement(
|
|
2341
|
+
/* @__PURE__ */ React19.createElement(
|
|
2342
|
+
Icon,
|
|
2343
|
+
{
|
|
2344
|
+
name: t.loading ? "loader-circle" : ALERT_ICON[t.tone] || "info",
|
|
2345
|
+
className: cx("aura-toast__icon", t.loading && "aura-spin")
|
|
2346
|
+
}
|
|
2347
|
+
),
|
|
2259
2348
|
/* @__PURE__ */ React19.createElement("div", { className: "aura-toast__body" }, /* @__PURE__ */ React19.createElement("p", { className: "aura-toast__title" }, t.title), t.description ? /* @__PURE__ */ React19.createElement("p", { className: "aura-toast__text" }, t.description) : null),
|
|
2260
2349
|
t.action ? /* @__PURE__ */ React19.createElement(
|
|
2261
2350
|
"button",
|
|
@@ -2312,14 +2401,515 @@ function Toaster(props) {
|
|
|
2312
2401
|
);
|
|
2313
2402
|
}
|
|
2314
2403
|
|
|
2315
|
-
// src/
|
|
2404
|
+
// src/PasswordField.tsx
|
|
2316
2405
|
var React20 = __toESM(require("react"), 1);
|
|
2406
|
+
var PasswordField = React20.forwardRef(function PasswordField2(props, ref) {
|
|
2407
|
+
const t = useStrings();
|
|
2408
|
+
const shown = React20.useState(false);
|
|
2409
|
+
const rest = omit(props, ["toggle", "className"]);
|
|
2410
|
+
return /* @__PURE__ */ React20.createElement(
|
|
2411
|
+
TextField,
|
|
2412
|
+
{
|
|
2413
|
+
autoComplete: "current-password",
|
|
2414
|
+
...rest,
|
|
2415
|
+
ref,
|
|
2416
|
+
type: shown[0] ? "text" : "password",
|
|
2417
|
+
spellCheck: false,
|
|
2418
|
+
autoCapitalize: "none",
|
|
2419
|
+
className: cx("aura-password", props.className),
|
|
2420
|
+
suffix: props.toggle === false ? void 0 : /* @__PURE__ */ React20.createElement(
|
|
2421
|
+
IconButton,
|
|
2422
|
+
{
|
|
2423
|
+
icon: shown[0] ? "eye-off" : "eye",
|
|
2424
|
+
label: t.showPassword,
|
|
2425
|
+
"aria-pressed": shown[0],
|
|
2426
|
+
disabled: props.disabled,
|
|
2427
|
+
onClick: function() {
|
|
2428
|
+
shown[1](!shown[0]);
|
|
2429
|
+
}
|
|
2430
|
+
}
|
|
2431
|
+
)
|
|
2432
|
+
}
|
|
2433
|
+
);
|
|
2434
|
+
});
|
|
2435
|
+
|
|
2436
|
+
// src/FormErrorSummary.tsx
|
|
2437
|
+
var React21 = __toESM(require("react"), 1);
|
|
2438
|
+
function items(errors) {
|
|
2439
|
+
if (Array.isArray(errors)) return errors;
|
|
2440
|
+
const out = [];
|
|
2441
|
+
for (const k in errors || {}) {
|
|
2442
|
+
const e = errors[k];
|
|
2443
|
+
if (e && e.message) out.push({ field: k, message: e.message });
|
|
2444
|
+
}
|
|
2445
|
+
return out;
|
|
2446
|
+
}
|
|
2447
|
+
function fieldElement(field) {
|
|
2448
|
+
if (typeof document === "undefined") return null;
|
|
2449
|
+
return document.getElementById(field) || document.querySelector('[name="' + field.replace(/"/g, '\\"') + '"]');
|
|
2450
|
+
}
|
|
2451
|
+
var FormErrorSummary = React21.forwardRef(
|
|
2452
|
+
function FormErrorSummary2(props, ref) {
|
|
2453
|
+
const t = useStrings();
|
|
2454
|
+
const auto = uid(), id = props.id || auto;
|
|
2455
|
+
const list = items(props.errors);
|
|
2456
|
+
const box = React21.useRef(null);
|
|
2457
|
+
React21.useEffect(
|
|
2458
|
+
function() {
|
|
2459
|
+
const has = list.length > 0;
|
|
2460
|
+
if (has && box.current) box.current.focus();
|
|
2461
|
+
},
|
|
2462
|
+
/* focus when errors first appear, and again whenever focusKey changes (each submit) */
|
|
2463
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
2464
|
+
[list.length > 0, props.focusKey]
|
|
2465
|
+
);
|
|
2466
|
+
if (!list.length) return null;
|
|
2467
|
+
return /* @__PURE__ */ React21.createElement(
|
|
2468
|
+
"div",
|
|
2469
|
+
{
|
|
2470
|
+
ref: function(el) {
|
|
2471
|
+
box.current = el;
|
|
2472
|
+
if (typeof ref === "function") ref(el);
|
|
2473
|
+
else if (ref) ref.current = el;
|
|
2474
|
+
},
|
|
2475
|
+
id,
|
|
2476
|
+
tabIndex: -1,
|
|
2477
|
+
role: "alert",
|
|
2478
|
+
"aria-labelledby": id + "-title",
|
|
2479
|
+
className: cx("aura-alert aura-alert--danger aura-error-summary", props.className)
|
|
2480
|
+
},
|
|
2481
|
+
/* @__PURE__ */ React21.createElement(Icon, { name: "circle-alert", className: "aura-alert__icon" }),
|
|
2482
|
+
/* @__PURE__ */ React21.createElement("div", { className: "aura-alert__body" }, /* @__PURE__ */ React21.createElement("h2", { className: "aura-alert__title", id: id + "-title" }, props.title || t.errorSummary(list.length)), /* @__PURE__ */ React21.createElement("ul", { className: "aura-error-summary__list" }, list.map(function(e) {
|
|
2483
|
+
return /* @__PURE__ */ React21.createElement("li", { key: e.field }, /* @__PURE__ */ React21.createElement(
|
|
2484
|
+
"a",
|
|
2485
|
+
{
|
|
2486
|
+
href: "#" + e.field,
|
|
2487
|
+
onClick: function(ev) {
|
|
2488
|
+
ev.preventDefault();
|
|
2489
|
+
if (props.onSelect) {
|
|
2490
|
+
props.onSelect(e.field);
|
|
2491
|
+
return;
|
|
2492
|
+
}
|
|
2493
|
+
const el = fieldElement(e.field);
|
|
2494
|
+
if (el) {
|
|
2495
|
+
el.scrollIntoView({ block: "center" });
|
|
2496
|
+
el.focus();
|
|
2497
|
+
}
|
|
2498
|
+
}
|
|
2499
|
+
},
|
|
2500
|
+
e.message
|
|
2501
|
+
));
|
|
2502
|
+
})))
|
|
2503
|
+
);
|
|
2504
|
+
}
|
|
2505
|
+
);
|
|
2506
|
+
|
|
2507
|
+
// src/FilterBar.tsx
|
|
2508
|
+
var React23 = __toESM(require("react"), 1);
|
|
2509
|
+
|
|
2510
|
+
// src/Tag.tsx
|
|
2511
|
+
var React22 = __toESM(require("react"), 1);
|
|
2512
|
+
var Tag = React22.forwardRef(function Tag2(props, ref) {
|
|
2513
|
+
const t = useStrings();
|
|
2514
|
+
const selectable = props.onClick != null || props.selected != null;
|
|
2515
|
+
const rest = omit(props, ["onRemove", "selected", "icon", "className", "children", "disabled", "removeLabel"]);
|
|
2516
|
+
const inner = [
|
|
2517
|
+
props.icon ? /* @__PURE__ */ React22.createElement(Icon, { key: "i", name: props.icon, size: 14 }) : null,
|
|
2518
|
+
/* @__PURE__ */ React22.createElement("span", { key: "t", className: "aura-tag__text" }, props.children)
|
|
2519
|
+
];
|
|
2520
|
+
if (selectable) {
|
|
2521
|
+
return /* @__PURE__ */ React22.createElement(
|
|
2522
|
+
"button",
|
|
2523
|
+
{
|
|
2524
|
+
...rest,
|
|
2525
|
+
ref,
|
|
2526
|
+
type: "button",
|
|
2527
|
+
"aria-pressed": !!props.selected,
|
|
2528
|
+
disabled: props.disabled,
|
|
2529
|
+
className: cx("aura-tag is-selectable", props.selected && "is-selected", props.className)
|
|
2530
|
+
},
|
|
2531
|
+
props.selected ? /* @__PURE__ */ React22.createElement(Icon, { name: "check", size: 14 }) : inner[0],
|
|
2532
|
+
inner[1]
|
|
2533
|
+
);
|
|
2534
|
+
}
|
|
2535
|
+
return /* @__PURE__ */ React22.createElement("span", { ...rest, ref, className: cx("aura-tag", props.disabled && "is-disabled", props.className) }, inner, props.onRemove && !props.disabled ? /* @__PURE__ */ React22.createElement(
|
|
2536
|
+
"button",
|
|
2537
|
+
{
|
|
2538
|
+
type: "button",
|
|
2539
|
+
className: "aura-tag__remove",
|
|
2540
|
+
"aria-label": props.removeLabel || t.remove(typeof props.children === "string" ? props.children : ""),
|
|
2541
|
+
onClick: props.onRemove
|
|
2542
|
+
},
|
|
2543
|
+
/* @__PURE__ */ React22.createElement(Icon, { name: "x", size: 12 })
|
|
2544
|
+
) : null);
|
|
2545
|
+
});
|
|
2546
|
+
|
|
2547
|
+
// src/FilterBar.tsx
|
|
2548
|
+
var FilterBar = React23.forwardRef(function FilterBar2(props, ref) {
|
|
2549
|
+
const t = useStrings();
|
|
2550
|
+
const id = uid();
|
|
2551
|
+
const hasSearch = !!props.onSearchChange;
|
|
2552
|
+
const draft = React23.useState(props.search || "");
|
|
2553
|
+
const timer = React23.useRef(null);
|
|
2554
|
+
const sent = React23.useRef(props.search || "");
|
|
2555
|
+
const onChange = React23.useRef(props.onSearchChange);
|
|
2556
|
+
onChange.current = props.onSearchChange;
|
|
2557
|
+
React23.useEffect(
|
|
2558
|
+
function() {
|
|
2559
|
+
if ((props.search || "") !== sent.current) {
|
|
2560
|
+
sent.current = props.search || "";
|
|
2561
|
+
draft[1](props.search || "");
|
|
2562
|
+
}
|
|
2563
|
+
},
|
|
2564
|
+
[props.search]
|
|
2565
|
+
);
|
|
2566
|
+
React23.useEffect(function() {
|
|
2567
|
+
return function() {
|
|
2568
|
+
if (timer.current) clearTimeout(timer.current);
|
|
2569
|
+
};
|
|
2570
|
+
}, []);
|
|
2571
|
+
function send(v) {
|
|
2572
|
+
if (timer.current) clearTimeout(timer.current);
|
|
2573
|
+
timer.current = null;
|
|
2574
|
+
if (v === sent.current) return;
|
|
2575
|
+
sent.current = v;
|
|
2576
|
+
if (onChange.current) onChange.current(v);
|
|
2577
|
+
}
|
|
2578
|
+
function type(v) {
|
|
2579
|
+
draft[1](v);
|
|
2580
|
+
if (timer.current) clearTimeout(timer.current);
|
|
2581
|
+
timer.current = setTimeout(
|
|
2582
|
+
function() {
|
|
2583
|
+
send(v);
|
|
2584
|
+
},
|
|
2585
|
+
props.searchDelay == null ? 300 : props.searchDelay
|
|
2586
|
+
);
|
|
2587
|
+
}
|
|
2588
|
+
const filters = props.filters || [];
|
|
2589
|
+
const anything = filters.length > 0 || !!(props.search || draft[0]);
|
|
2590
|
+
const count = props.resultCount == null ? null : typeof props.resultCount === "number" ? t.results(props.resultCount) : props.resultCount;
|
|
2591
|
+
return /* @__PURE__ */ React23.createElement(
|
|
2592
|
+
"div",
|
|
2593
|
+
{
|
|
2594
|
+
ref,
|
|
2595
|
+
role: "region",
|
|
2596
|
+
"aria-label": props.label || t.filters,
|
|
2597
|
+
className: cx("aura-filterbar", props.className)
|
|
2598
|
+
},
|
|
2599
|
+
/* @__PURE__ */ React23.createElement("div", { className: "aura-filterbar__row" }, hasSearch ? /* @__PURE__ */ React23.createElement("div", { className: "aura-input has-icon aura-filterbar__search" }, /* @__PURE__ */ React23.createElement(Icon, { name: "search", className: "aura-input__icon" }), /* @__PURE__ */ React23.createElement(
|
|
2600
|
+
"input",
|
|
2601
|
+
{
|
|
2602
|
+
id,
|
|
2603
|
+
type: "search",
|
|
2604
|
+
className: "aura-input__control",
|
|
2605
|
+
"aria-label": props.searchLabel || t.search,
|
|
2606
|
+
placeholder: props.searchPlaceholder || props.searchLabel || t.search,
|
|
2607
|
+
value: draft[0],
|
|
2608
|
+
onChange: function(e) {
|
|
2609
|
+
type(e.target.value);
|
|
2610
|
+
},
|
|
2611
|
+
onKeyDown: function(e) {
|
|
2612
|
+
if (e.key === "Enter") send(draft[0]);
|
|
2613
|
+
if (e.key === "Escape" && draft[0]) {
|
|
2614
|
+
e.preventDefault();
|
|
2615
|
+
draft[1]("");
|
|
2616
|
+
send("");
|
|
2617
|
+
}
|
|
2618
|
+
}
|
|
2619
|
+
}
|
|
2620
|
+
), draft[0] ? /* @__PURE__ */ React23.createElement(
|
|
2621
|
+
IconButton,
|
|
2622
|
+
{
|
|
2623
|
+
icon: "x",
|
|
2624
|
+
label: t.clear((props.searchLabel || t.search).toLowerCase()),
|
|
2625
|
+
className: "aura-filterbar__clear-search",
|
|
2626
|
+
onClick: function() {
|
|
2627
|
+
draft[1]("");
|
|
2628
|
+
send("");
|
|
2629
|
+
}
|
|
2630
|
+
}
|
|
2631
|
+
) : null) : null, props.children ? /* @__PURE__ */ React23.createElement("div", { className: "aura-filterbar__controls" }, props.children) : null, /* @__PURE__ */ React23.createElement("span", { className: "aura-filterbar__spacer" }), count != null ? /* @__PURE__ */ React23.createElement("span", { className: "aura-filterbar__count", "aria-live": "polite" }, count) : null, props.actions ? /* @__PURE__ */ React23.createElement("div", { className: "aura-filterbar__actions" }, props.actions) : null),
|
|
2632
|
+
filters.length || props.onClearAll && anything ? /* @__PURE__ */ React23.createElement("div", { className: "aura-filterbar__chips" }, filters.map(function(f) {
|
|
2633
|
+
return /* @__PURE__ */ React23.createElement(Tag, { key: f.id, onRemove: f.onRemove }, f.label);
|
|
2634
|
+
}), props.onClearAll && anything ? /* @__PURE__ */ React23.createElement(
|
|
2635
|
+
"button",
|
|
2636
|
+
{
|
|
2637
|
+
type: "button",
|
|
2638
|
+
className: "aura-filterbar__clear",
|
|
2639
|
+
onClick: function() {
|
|
2640
|
+
draft[1]("");
|
|
2641
|
+
sent.current = "";
|
|
2642
|
+
if (timer.current) clearTimeout(timer.current);
|
|
2643
|
+
props.onClearAll();
|
|
2644
|
+
}
|
|
2645
|
+
},
|
|
2646
|
+
t.clearFilters
|
|
2647
|
+
) : null) : null
|
|
2648
|
+
);
|
|
2649
|
+
});
|
|
2650
|
+
|
|
2651
|
+
// src/Command.tsx
|
|
2652
|
+
var React25 = __toESM(require("react"), 1);
|
|
2317
2653
|
var import_react_dom5 = require("react-dom");
|
|
2318
|
-
|
|
2319
|
-
|
|
2320
|
-
|
|
2321
|
-
|
|
2322
|
-
|
|
2654
|
+
|
|
2655
|
+
// src/useModal.tsx
|
|
2656
|
+
var React24 = __toESM(require("react"), 1);
|
|
2657
|
+
function useModal(open, ref, opts) {
|
|
2658
|
+
const mounted = useMounted();
|
|
2659
|
+
const prev = React24.useRef(null);
|
|
2660
|
+
const o = opts || {};
|
|
2661
|
+
React24.useEffect(
|
|
2662
|
+
function() {
|
|
2663
|
+
if (!open || !mounted) return;
|
|
2664
|
+
prev.current = document.activeElement;
|
|
2665
|
+
const body = document.body, overflow = body.style.overflow;
|
|
2666
|
+
body.style.overflow = "hidden";
|
|
2667
|
+
const el = ref.current;
|
|
2668
|
+
const target = el && (el.querySelector("[data-autofocus]") || el.querySelector(o.bodySelector + " " + FOCUSABLE) || el.querySelector(o.footSelector + " " + FOCUSABLE) || el);
|
|
2669
|
+
if (target && o.autoFocus !== false) target.focus();
|
|
2670
|
+
return function() {
|
|
2671
|
+
body.style.overflow = overflow;
|
|
2672
|
+
if (prev.current && prev.current.focus) prev.current.focus();
|
|
2673
|
+
};
|
|
2674
|
+
},
|
|
2675
|
+
[open, mounted]
|
|
2676
|
+
);
|
|
2677
|
+
function onKeyDown(e) {
|
|
2678
|
+
if (e.key === "Escape") {
|
|
2679
|
+
e.stopPropagation();
|
|
2680
|
+
if (o.onEscape) o.onEscape();
|
|
2681
|
+
return;
|
|
2682
|
+
}
|
|
2683
|
+
if (e.key !== "Tab" || !ref.current) return;
|
|
2684
|
+
const list = Array.prototype.slice.call(ref.current.querySelectorAll(FOCUSABLE));
|
|
2685
|
+
if (!list.length) {
|
|
2686
|
+
e.preventDefault();
|
|
2687
|
+
return;
|
|
2688
|
+
}
|
|
2689
|
+
const first = list[0], last = list[list.length - 1];
|
|
2690
|
+
if (e.shiftKey && (document.activeElement === first || document.activeElement === ref.current)) {
|
|
2691
|
+
e.preventDefault();
|
|
2692
|
+
last.focus();
|
|
2693
|
+
} else if (!e.shiftKey && document.activeElement === last) {
|
|
2694
|
+
e.preventDefault();
|
|
2695
|
+
first.focus();
|
|
2696
|
+
}
|
|
2697
|
+
}
|
|
2698
|
+
return { ready: !!open && mounted, onKeyDown };
|
|
2699
|
+
}
|
|
2700
|
+
|
|
2701
|
+
// src/Command.tsx
|
|
2702
|
+
function isMac() {
|
|
2703
|
+
return typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent);
|
|
2704
|
+
}
|
|
2705
|
+
function Command(props) {
|
|
2706
|
+
const t = useStrings();
|
|
2707
|
+
const id = uid(), listId = id + "-list";
|
|
2708
|
+
const box = React25.useRef(null);
|
|
2709
|
+
const input = React25.useRef(null);
|
|
2710
|
+
const q = React25.useState(""), act = React25.useState(0);
|
|
2711
|
+
const openRef = React25.useRef(props.open);
|
|
2712
|
+
openRef.current = props.open;
|
|
2713
|
+
const close = function() {
|
|
2714
|
+
props.onOpenChange(false);
|
|
2715
|
+
};
|
|
2716
|
+
const modal = useModal(props.open, box, { onEscape: close });
|
|
2717
|
+
React25.useEffect(
|
|
2718
|
+
function() {
|
|
2719
|
+
if (props.hotkey === false) return;
|
|
2720
|
+
function onKey2(e) {
|
|
2721
|
+
if ((e.metaKey || e.ctrlKey) && !e.altKey && !e.shiftKey && (e.key === "k" || e.key === "K")) {
|
|
2722
|
+
e.preventDefault();
|
|
2723
|
+
props.onOpenChange(!openRef.current);
|
|
2724
|
+
}
|
|
2725
|
+
}
|
|
2726
|
+
document.addEventListener("keydown", onKey2, true);
|
|
2727
|
+
return function() {
|
|
2728
|
+
document.removeEventListener("keydown", onKey2, true);
|
|
2729
|
+
};
|
|
2730
|
+
},
|
|
2731
|
+
[props.hotkey, props.onOpenChange]
|
|
2732
|
+
);
|
|
2733
|
+
React25.useEffect(
|
|
2734
|
+
function() {
|
|
2735
|
+
if (!props.open) {
|
|
2736
|
+
q[1]("");
|
|
2737
|
+
act[1](0);
|
|
2738
|
+
}
|
|
2739
|
+
},
|
|
2740
|
+
[props.open]
|
|
2741
|
+
);
|
|
2742
|
+
const filter = props.filter || defaultFilter;
|
|
2743
|
+
const shown = (props.items || []).filter(function(it) {
|
|
2744
|
+
return filter(it, q[0]);
|
|
2745
|
+
});
|
|
2746
|
+
const groups = [];
|
|
2747
|
+
shown.forEach(function(it) {
|
|
2748
|
+
const name = it.group || "";
|
|
2749
|
+
let g = groups.filter(function(x) {
|
|
2750
|
+
return x.name === name;
|
|
2751
|
+
})[0];
|
|
2752
|
+
if (!g) groups.push(g = { name, items: [] });
|
|
2753
|
+
g.items.push(it);
|
|
2754
|
+
});
|
|
2755
|
+
const flat = [];
|
|
2756
|
+
groups.forEach(function(g) {
|
|
2757
|
+
g.items.forEach(function(it) {
|
|
2758
|
+
flat.push(it);
|
|
2759
|
+
});
|
|
2760
|
+
});
|
|
2761
|
+
const enabled = flat.map(function(it, i2) {
|
|
2762
|
+
return it.disabled ? -1 : i2;
|
|
2763
|
+
}).filter(function(i2) {
|
|
2764
|
+
return i2 >= 0;
|
|
2765
|
+
});
|
|
2766
|
+
const active = enabled.indexOf(act[0]) >= 0 ? act[0] : enabled.length ? enabled[0] : -1;
|
|
2767
|
+
const optId = function(i2) {
|
|
2768
|
+
return id + "-o" + i2;
|
|
2769
|
+
};
|
|
2770
|
+
React25.useEffect(
|
|
2771
|
+
function() {
|
|
2772
|
+
if (!box.current || active < 0) return;
|
|
2773
|
+
const el = box.current.querySelector("#" + CSS.escape(optId(active)));
|
|
2774
|
+
if (el && el.scrollIntoView) el.scrollIntoView({ block: "nearest" });
|
|
2775
|
+
},
|
|
2776
|
+
[active]
|
|
2777
|
+
);
|
|
2778
|
+
function run(it) {
|
|
2779
|
+
if (it.disabled) return;
|
|
2780
|
+
close();
|
|
2781
|
+
if (it.onSelect) it.onSelect();
|
|
2782
|
+
if (props.onSelect) props.onSelect(it);
|
|
2783
|
+
}
|
|
2784
|
+
function move(dir) {
|
|
2785
|
+
if (!enabled.length) return;
|
|
2786
|
+
const at = enabled.indexOf(active);
|
|
2787
|
+
let n2;
|
|
2788
|
+
if (dir === "first") n2 = 0;
|
|
2789
|
+
else if (dir === "last") n2 = enabled.length - 1;
|
|
2790
|
+
else n2 = (at + dir + enabled.length) % enabled.length;
|
|
2791
|
+
act[1](enabled[n2]);
|
|
2792
|
+
}
|
|
2793
|
+
function onKey(e) {
|
|
2794
|
+
if (e.key === "ArrowDown") {
|
|
2795
|
+
e.preventDefault();
|
|
2796
|
+
move(1);
|
|
2797
|
+
} else if (e.key === "ArrowUp") {
|
|
2798
|
+
e.preventDefault();
|
|
2799
|
+
move(-1);
|
|
2800
|
+
} else if (e.key === "Home" && e.ctrlKey) {
|
|
2801
|
+
e.preventDefault();
|
|
2802
|
+
move("first");
|
|
2803
|
+
} else if (e.key === "End" && e.ctrlKey) {
|
|
2804
|
+
e.preventDefault();
|
|
2805
|
+
move("last");
|
|
2806
|
+
} else if (e.key === "Enter") {
|
|
2807
|
+
e.preventDefault();
|
|
2808
|
+
if (active >= 0) run(flat[active]);
|
|
2809
|
+
}
|
|
2810
|
+
}
|
|
2811
|
+
if (!modal.ready) return null;
|
|
2812
|
+
let i = -1;
|
|
2813
|
+
return (0, import_react_dom5.createPortal)(
|
|
2814
|
+
/* @__PURE__ */ React25.createElement(
|
|
2815
|
+
"div",
|
|
2816
|
+
{
|
|
2817
|
+
className: "aura-dialog-layer aura-command-layer",
|
|
2818
|
+
onKeyDown: function(e) {
|
|
2819
|
+
modal.onKeyDown(e);
|
|
2820
|
+
e.stopPropagation();
|
|
2821
|
+
}
|
|
2822
|
+
},
|
|
2823
|
+
/* @__PURE__ */ React25.createElement("div", { className: "aura-scrim", onClick: close, "aria-hidden": true }),
|
|
2824
|
+
/* @__PURE__ */ React25.createElement(
|
|
2825
|
+
"div",
|
|
2826
|
+
{
|
|
2827
|
+
ref: box,
|
|
2828
|
+
role: "dialog",
|
|
2829
|
+
"aria-modal": true,
|
|
2830
|
+
"aria-label": props.label || t.commandMenu,
|
|
2831
|
+
tabIndex: -1,
|
|
2832
|
+
className: cx("aura-command", props.className)
|
|
2833
|
+
},
|
|
2834
|
+
/* @__PURE__ */ React25.createElement("div", { className: "aura-command__search" }, /* @__PURE__ */ React25.createElement(Icon, { name: "search", className: "aura-command__search-icon" }), /* @__PURE__ */ React25.createElement(
|
|
2835
|
+
"input",
|
|
2836
|
+
{
|
|
2837
|
+
ref: input,
|
|
2838
|
+
"data-autofocus": "",
|
|
2839
|
+
type: "text",
|
|
2840
|
+
role: "combobox",
|
|
2841
|
+
"aria-expanded": true,
|
|
2842
|
+
"aria-controls": listId,
|
|
2843
|
+
"aria-autocomplete": "list",
|
|
2844
|
+
"aria-activedescendant": active >= 0 ? optId(active) : void 0,
|
|
2845
|
+
"aria-label": props.label || t.commandMenu,
|
|
2846
|
+
placeholder: props.placeholder || t.commandPlaceholder,
|
|
2847
|
+
className: "aura-command__input",
|
|
2848
|
+
value: q[0],
|
|
2849
|
+
autoComplete: "off",
|
|
2850
|
+
spellCheck: false,
|
|
2851
|
+
onChange: function(e) {
|
|
2852
|
+
q[1](e.target.value);
|
|
2853
|
+
act[1](0);
|
|
2854
|
+
},
|
|
2855
|
+
onKeyDown: onKey
|
|
2856
|
+
}
|
|
2857
|
+
), /* @__PURE__ */ React25.createElement("kbd", { className: "aura-command__kbd" }, "Esc")),
|
|
2858
|
+
/* @__PURE__ */ React25.createElement("div", { className: "aura-command__list", id: listId, role: "listbox", "aria-label": props.label || t.commandMenu }, !flat.length ? /* @__PURE__ */ React25.createElement("p", { className: "aura-command__empty", role: "presentation" }, props.emptyText || t.noMatches) : groups.map(function(g, gi) {
|
|
2859
|
+
const gid = id + "-g" + gi;
|
|
2860
|
+
return /* @__PURE__ */ React25.createElement(
|
|
2861
|
+
"div",
|
|
2862
|
+
{
|
|
2863
|
+
key: g.name || gi,
|
|
2864
|
+
role: "group",
|
|
2865
|
+
"aria-labelledby": g.name ? gid : void 0,
|
|
2866
|
+
className: "aura-command__group"
|
|
2867
|
+
},
|
|
2868
|
+
g.name ? /* @__PURE__ */ React25.createElement("div", { className: "aura-command__heading", id: gid, role: "presentation" }, g.name) : null,
|
|
2869
|
+
g.items.map(function(it) {
|
|
2870
|
+
i++;
|
|
2871
|
+
const n2 = i;
|
|
2872
|
+
return /* @__PURE__ */ React25.createElement(
|
|
2873
|
+
"div",
|
|
2874
|
+
{
|
|
2875
|
+
key: it.id,
|
|
2876
|
+
id: optId(n2),
|
|
2877
|
+
role: "option",
|
|
2878
|
+
"aria-selected": n2 === active,
|
|
2879
|
+
"aria-disabled": it.disabled || void 0,
|
|
2880
|
+
className: cx("aura-command__item", n2 === active && "is-active", it.disabled && "is-disabled"),
|
|
2881
|
+
onPointerDown: function(e) {
|
|
2882
|
+
e.preventDefault();
|
|
2883
|
+
},
|
|
2884
|
+
onPointerMove: function() {
|
|
2885
|
+
if (!it.disabled && act[0] !== n2) act[1](n2);
|
|
2886
|
+
},
|
|
2887
|
+
onClick: function() {
|
|
2888
|
+
run(it);
|
|
2889
|
+
}
|
|
2890
|
+
},
|
|
2891
|
+
it.icon ? /* @__PURE__ */ React25.createElement(Icon, { name: it.icon }) : null,
|
|
2892
|
+
/* @__PURE__ */ React25.createElement("span", { className: "aura-command__text" }, /* @__PURE__ */ React25.createElement("span", { className: "aura-command__label" }, it.label), it.description ? /* @__PURE__ */ React25.createElement("span", { className: "aura-command__desc" }, it.description) : null),
|
|
2893
|
+
it.shortcut ? /* @__PURE__ */ React25.createElement("kbd", { className: "aura-command__kbd" }, it.shortcut) : null
|
|
2894
|
+
);
|
|
2895
|
+
})
|
|
2896
|
+
);
|
|
2897
|
+
})),
|
|
2898
|
+
/* @__PURE__ */ React25.createElement("div", { className: "aura-command__foot", "aria-hidden": true }, t.commandHint, /* @__PURE__ */ React25.createElement("span", { className: "aura-command__mod" }, isMac() ? "\u2318K" : "Ctrl K"))
|
|
2899
|
+
)
|
|
2900
|
+
),
|
|
2901
|
+
document.body
|
|
2902
|
+
);
|
|
2903
|
+
}
|
|
2904
|
+
|
|
2905
|
+
// src/Tooltip.tsx
|
|
2906
|
+
var React26 = __toESM(require("react"), 1);
|
|
2907
|
+
var import_react_dom6 = require("react-dom");
|
|
2908
|
+
var Tooltip = React26.forwardRef(function Tooltip2(props, ref) {
|
|
2909
|
+
const id = uid(), st = React26.useState(false), open = props.open !== void 0 ? props.open : st[0], set = st[1];
|
|
2910
|
+
const anchor = React26.useRef(null), anchorMerged = useMergedRef(ref, anchor), tip = React26.useRef(null), timer = React26.useRef(void 0);
|
|
2911
|
+
const pos = React26.useState(null);
|
|
2912
|
+
function show2(now) {
|
|
2323
2913
|
clearTimeout(timer.current);
|
|
2324
2914
|
timer.current = setTimeout(
|
|
2325
2915
|
function() {
|
|
@@ -2343,7 +2933,7 @@ var Tooltip = React20.forwardRef(function Tooltip2(props, ref) {
|
|
|
2343
2933
|
},
|
|
2344
2934
|
[open]
|
|
2345
2935
|
);
|
|
2346
|
-
|
|
2936
|
+
React26.useEffect(
|
|
2347
2937
|
function() {
|
|
2348
2938
|
if (!open) return;
|
|
2349
2939
|
function esc(e) {
|
|
@@ -2356,25 +2946,25 @@ var Tooltip = React20.forwardRef(function Tooltip2(props, ref) {
|
|
|
2356
2946
|
},
|
|
2357
2947
|
[open]
|
|
2358
2948
|
);
|
|
2359
|
-
const child =
|
|
2360
|
-
const trigger = /* @__PURE__ */
|
|
2949
|
+
const child = React26.Children.only(props.children);
|
|
2950
|
+
const trigger = /* @__PURE__ */ React26.createElement(
|
|
2361
2951
|
"span",
|
|
2362
2952
|
{
|
|
2363
2953
|
ref: anchorMerged,
|
|
2364
2954
|
className: "aura-tooltip-anchor",
|
|
2365
2955
|
onMouseEnter: function() {
|
|
2366
|
-
|
|
2956
|
+
show2(false);
|
|
2367
2957
|
},
|
|
2368
2958
|
onMouseLeave: hide,
|
|
2369
2959
|
onFocus: function() {
|
|
2370
|
-
|
|
2960
|
+
show2(true);
|
|
2371
2961
|
},
|
|
2372
2962
|
onBlur: hide
|
|
2373
2963
|
},
|
|
2374
|
-
|
|
2964
|
+
React26.cloneElement(child, { "aria-describedby": open ? id : child.props["aria-describedby"] })
|
|
2375
2965
|
);
|
|
2376
|
-
return /* @__PURE__ */
|
|
2377
|
-
/* @__PURE__ */
|
|
2966
|
+
return /* @__PURE__ */ React26.createElement(React26.Fragment, null, trigger, open ? (0, import_react_dom6.createPortal)(
|
|
2967
|
+
/* @__PURE__ */ React26.createElement(
|
|
2378
2968
|
"div",
|
|
2379
2969
|
{
|
|
2380
2970
|
ref: tip,
|
|
@@ -2390,59 +2980,11 @@ var Tooltip = React20.forwardRef(function Tooltip2(props, ref) {
|
|
|
2390
2980
|
});
|
|
2391
2981
|
|
|
2392
2982
|
// src/Dialog.tsx
|
|
2393
|
-
var
|
|
2394
|
-
var
|
|
2395
|
-
|
|
2396
|
-
// src/useModal.tsx
|
|
2397
|
-
var React21 = __toESM(require("react"), 1);
|
|
2398
|
-
function useModal(open, ref, opts) {
|
|
2399
|
-
const mounted = useMounted();
|
|
2400
|
-
const prev = React21.useRef(null);
|
|
2401
|
-
const o = opts || {};
|
|
2402
|
-
React21.useEffect(
|
|
2403
|
-
function() {
|
|
2404
|
-
if (!open || !mounted) return;
|
|
2405
|
-
prev.current = document.activeElement;
|
|
2406
|
-
const body = document.body, overflow = body.style.overflow;
|
|
2407
|
-
body.style.overflow = "hidden";
|
|
2408
|
-
const el = ref.current;
|
|
2409
|
-
const target = el && (el.querySelector("[data-autofocus]") || el.querySelector(o.bodySelector + " " + FOCUSABLE) || el.querySelector(o.footSelector + " " + FOCUSABLE) || el);
|
|
2410
|
-
if (target && o.autoFocus !== false) target.focus();
|
|
2411
|
-
return function() {
|
|
2412
|
-
body.style.overflow = overflow;
|
|
2413
|
-
if (prev.current && prev.current.focus) prev.current.focus();
|
|
2414
|
-
};
|
|
2415
|
-
},
|
|
2416
|
-
[open, mounted]
|
|
2417
|
-
);
|
|
2418
|
-
function onKeyDown(e) {
|
|
2419
|
-
if (e.key === "Escape") {
|
|
2420
|
-
e.stopPropagation();
|
|
2421
|
-
if (o.onEscape) o.onEscape();
|
|
2422
|
-
return;
|
|
2423
|
-
}
|
|
2424
|
-
if (e.key !== "Tab" || !ref.current) return;
|
|
2425
|
-
const list = Array.prototype.slice.call(ref.current.querySelectorAll(FOCUSABLE));
|
|
2426
|
-
if (!list.length) {
|
|
2427
|
-
e.preventDefault();
|
|
2428
|
-
return;
|
|
2429
|
-
}
|
|
2430
|
-
const first = list[0], last = list[list.length - 1];
|
|
2431
|
-
if (e.shiftKey && (document.activeElement === first || document.activeElement === ref.current)) {
|
|
2432
|
-
e.preventDefault();
|
|
2433
|
-
last.focus();
|
|
2434
|
-
} else if (!e.shiftKey && document.activeElement === last) {
|
|
2435
|
-
e.preventDefault();
|
|
2436
|
-
first.focus();
|
|
2437
|
-
}
|
|
2438
|
-
}
|
|
2439
|
-
return { ready: !!open && mounted, onKeyDown };
|
|
2440
|
-
}
|
|
2441
|
-
|
|
2442
|
-
// src/Dialog.tsx
|
|
2443
|
-
var Dialog = React22.forwardRef(function Dialog2(props, ref) {
|
|
2983
|
+
var React27 = __toESM(require("react"), 1);
|
|
2984
|
+
var import_react_dom7 = require("react-dom");
|
|
2985
|
+
var Dialog = React27.forwardRef(function Dialog2(props, ref) {
|
|
2444
2986
|
const t = useStrings();
|
|
2445
|
-
const own =
|
|
2987
|
+
const own = React27.useRef(null), merged = useMergedRef(ref, own), titleId = uid(), descId = uid();
|
|
2446
2988
|
function close() {
|
|
2447
2989
|
if (props.dismissible !== false && props.onClose) props.onClose();
|
|
2448
2990
|
}
|
|
@@ -2453,8 +2995,8 @@ var Dialog = React22.forwardRef(function Dialog2(props, ref) {
|
|
|
2453
2995
|
footSelector: ".aura-dialog__foot"
|
|
2454
2996
|
});
|
|
2455
2997
|
if (!modal.ready) return null;
|
|
2456
|
-
return (0,
|
|
2457
|
-
/* @__PURE__ */
|
|
2998
|
+
return (0, import_react_dom7.createPortal)(
|
|
2999
|
+
/* @__PURE__ */ React27.createElement("div", { className: "aura-dialog-layer", onKeyDown: modal.onKeyDown }, /* @__PURE__ */ React27.createElement("div", { className: "aura-scrim", onClick: close, "aria-hidden": true }), /* @__PURE__ */ React27.createElement(
|
|
2458
3000
|
"div",
|
|
2459
3001
|
{
|
|
2460
3002
|
ref: merged,
|
|
@@ -2465,17 +3007,17 @@ var Dialog = React22.forwardRef(function Dialog2(props, ref) {
|
|
|
2465
3007
|
tabIndex: -1,
|
|
2466
3008
|
className: cx("aura-dialog", "aura-dialog--" + (props.size || "md"), props.className)
|
|
2467
3009
|
},
|
|
2468
|
-
/* @__PURE__ */
|
|
2469
|
-
props.description ? /* @__PURE__ */
|
|
2470
|
-
props.children ? /* @__PURE__ */
|
|
2471
|
-
props.footer ? /* @__PURE__ */
|
|
3010
|
+
/* @__PURE__ */ React27.createElement("div", { className: "aura-dialog__head" }, /* @__PURE__ */ React27.createElement("h2", { className: "aura-dialog__title", id: titleId }, props.title), props.dismissible !== false ? /* @__PURE__ */ React27.createElement(IconButton, { icon: "x", label: t.close, className: "aura-dialog__close", onClick: close }) : null),
|
|
3011
|
+
props.description ? /* @__PURE__ */ React27.createElement("p", { className: "aura-dialog__desc", id: descId }, props.description) : null,
|
|
3012
|
+
props.children ? /* @__PURE__ */ React27.createElement("div", { className: "aura-dialog__body" }, props.children) : null,
|
|
3013
|
+
props.footer ? /* @__PURE__ */ React27.createElement("div", { className: "aura-dialog__foot" }, props.footer) : null
|
|
2472
3014
|
)),
|
|
2473
3015
|
document.body
|
|
2474
3016
|
);
|
|
2475
3017
|
});
|
|
2476
|
-
var Drawer =
|
|
3018
|
+
var Drawer = React27.forwardRef(function Drawer2(props, ref) {
|
|
2477
3019
|
const t = useStrings();
|
|
2478
|
-
const own =
|
|
3020
|
+
const own = React27.useRef(null), merged = useMergedRef(ref, own), titleId = uid(), descId = uid();
|
|
2479
3021
|
function close() {
|
|
2480
3022
|
if (props.dismissible !== false && props.onClose) props.onClose();
|
|
2481
3023
|
}
|
|
@@ -2487,8 +3029,8 @@ var Drawer = React22.forwardRef(function Drawer2(props, ref) {
|
|
|
2487
3029
|
});
|
|
2488
3030
|
if (!modal.ready) return null;
|
|
2489
3031
|
const side = props.side === "left" ? "left" : "right";
|
|
2490
|
-
return (0,
|
|
2491
|
-
/* @__PURE__ */
|
|
3032
|
+
return (0, import_react_dom7.createPortal)(
|
|
3033
|
+
/* @__PURE__ */ React27.createElement("div", { className: "aura-dialog-layer aura-drawer-layer", onKeyDown: modal.onKeyDown }, /* @__PURE__ */ React27.createElement("div", { className: "aura-scrim", onClick: close, "aria-hidden": true }), /* @__PURE__ */ React27.createElement(
|
|
2492
3034
|
"div",
|
|
2493
3035
|
{
|
|
2494
3036
|
ref: merged,
|
|
@@ -2500,17 +3042,17 @@ var Drawer = React22.forwardRef(function Drawer2(props, ref) {
|
|
|
2500
3042
|
tabIndex: -1,
|
|
2501
3043
|
className: cx("aura-drawer", "aura-drawer--" + side, "aura-drawer--" + (props.size || "md"), props.className)
|
|
2502
3044
|
},
|
|
2503
|
-
props.title || props.dismissible !== false ? /* @__PURE__ */
|
|
2504
|
-
props.description ? /* @__PURE__ */
|
|
2505
|
-
/* @__PURE__ */
|
|
2506
|
-
props.footer ? /* @__PURE__ */
|
|
3045
|
+
props.title || props.dismissible !== false ? /* @__PURE__ */ React27.createElement("div", { className: "aura-drawer__head" }, props.title ? /* @__PURE__ */ React27.createElement("h2", { className: "aura-drawer__title", id: titleId }, props.title) : /* @__PURE__ */ React27.createElement("span", { style: { flex: 1 } }), props.dismissible !== false ? /* @__PURE__ */ React27.createElement(IconButton, { icon: "x", label: t.close, onClick: close }) : null) : null,
|
|
3046
|
+
props.description ? /* @__PURE__ */ React27.createElement("p", { className: "aura-drawer__desc", id: descId }, props.description) : null,
|
|
3047
|
+
/* @__PURE__ */ React27.createElement("div", { className: "aura-drawer__body" }, props.children),
|
|
3048
|
+
props.footer ? /* @__PURE__ */ React27.createElement("div", { className: "aura-drawer__foot" }, props.footer) : null
|
|
2507
3049
|
)),
|
|
2508
3050
|
document.body
|
|
2509
3051
|
);
|
|
2510
3052
|
});
|
|
2511
3053
|
|
|
2512
3054
|
// src/DataTable.tsx
|
|
2513
|
-
var
|
|
3055
|
+
var React28 = __toESM(require("react"), 1);
|
|
2514
3056
|
var BP = { sm: 640, md: 768, lg: 1024, xl: 1280 };
|
|
2515
3057
|
var DEFAULT_COLUMNS = [
|
|
2516
3058
|
{ key: "id", label: "ID", width: 96, mono: true },
|
|
@@ -2522,7 +3064,7 @@ var SKELETON_WIDTHS = ["72%", "56%", "84%", "44%", "64%"];
|
|
|
2522
3064
|
var ROW_H = 48;
|
|
2523
3065
|
var OVERSCAN = 8;
|
|
2524
3066
|
var FLEX_MIN = 160;
|
|
2525
|
-
var DataTable =
|
|
3067
|
+
var DataTable = React28.forwardRef(function DataTable2(props, ref) {
|
|
2526
3068
|
const t = useStrings();
|
|
2527
3069
|
const columns = props.columns || DEFAULT_COLUMNS;
|
|
2528
3070
|
const byKey = {};
|
|
@@ -2569,23 +3111,23 @@ var DataTable = React23.forwardRef(function DataTable2(props, ref) {
|
|
|
2569
3111
|
}),
|
|
2570
3112
|
props.onPinnedColumnsChange
|
|
2571
3113
|
);
|
|
2572
|
-
const widthState =
|
|
3114
|
+
const widthState = React28.useState({});
|
|
2573
3115
|
const widths = widthState[0], setWidths = widthState[1];
|
|
2574
|
-
const activeState =
|
|
2575
|
-
const scrollState =
|
|
3116
|
+
const activeState = React28.useState({ r: 1, c: 0 });
|
|
3117
|
+
const scrollState = React28.useState(0);
|
|
2576
3118
|
const scrollTop = scrollState[0], setScrollTop = scrollState[1];
|
|
2577
|
-
const scrolledX =
|
|
2578
|
-
const menuState =
|
|
3119
|
+
const scrolledX = React28.useState(false);
|
|
3120
|
+
const menuState = React28.useState(null);
|
|
2579
3121
|
const menu = menuState[0], setMenu = menuState[1];
|
|
2580
|
-
const dragState =
|
|
3122
|
+
const dragState = React28.useState(null);
|
|
2581
3123
|
const drag = dragState[0], setDrag = dragState[1];
|
|
2582
|
-
const gridRef =
|
|
2583
|
-
const wrapRef =
|
|
2584
|
-
const boxWidth =
|
|
3124
|
+
const gridRef = React28.useRef(null);
|
|
3125
|
+
const wrapRef = React28.useRef(null), wrapMerged = useMergedRef(ref, wrapRef);
|
|
3126
|
+
const boxWidth = React28.useState(null);
|
|
2585
3127
|
const measure = !!props.stackBelow || columns.some(function(c) {
|
|
2586
3128
|
return c.hideBelow != null;
|
|
2587
3129
|
});
|
|
2588
|
-
|
|
3130
|
+
React28.useEffect(
|
|
2589
3131
|
function() {
|
|
2590
3132
|
if (!measure || !wrapRef.current || typeof ResizeObserver === "undefined") return;
|
|
2591
3133
|
const ro = new ResizeObserver(function(en) {
|
|
@@ -2604,9 +3146,9 @@ var DataTable = React23.forwardRef(function DataTable2(props, ref) {
|
|
|
2604
3146
|
const px = typeof c.hideBelow === "number" ? c.hideBelow : BP[c.hideBelow];
|
|
2605
3147
|
return px != null && boxWidth[0] < px;
|
|
2606
3148
|
}
|
|
2607
|
-
const scrollRef =
|
|
2608
|
-
const pending =
|
|
2609
|
-
const resizing =
|
|
3149
|
+
const scrollRef = React28.useRef(null);
|
|
3150
|
+
const pending = React28.useRef(null);
|
|
3151
|
+
const resizing = React28.useRef(false);
|
|
2610
3152
|
useIsoLayoutEffect(function() {
|
|
2611
3153
|
if (stacked || !gridRef.current) return;
|
|
2612
3154
|
const els = gridRef.current.querySelectorAll(
|
|
@@ -2665,7 +3207,7 @@ var DataTable = React23.forwardRef(function DataTable2(props, ref) {
|
|
|
2665
3207
|
if (isPinned(c)) s.left = "calc(var(--aura-space-6)" + selW + " + " + pinOffsets[c.key] + "px)";
|
|
2666
3208
|
return s;
|
|
2667
3209
|
}
|
|
2668
|
-
const view =
|
|
3210
|
+
const view = React28.useMemo(
|
|
2669
3211
|
function() {
|
|
2670
3212
|
if (manual || !sort || !sort.key || !byKey[sort.key]) return rows;
|
|
2671
3213
|
const col = byKey[sort.key];
|
|
@@ -2699,7 +3241,7 @@ var DataTable = React23.forwardRef(function DataTable2(props, ref) {
|
|
|
2699
3241
|
const canSortAny = !busy && (manual ? total > 1 : rows.length > 1);
|
|
2700
3242
|
const shownTotal = manual && props.totalRows == null ? first + rows.length : total;
|
|
2701
3243
|
const linkPaging = !!props.getPageHref && !props.onPageChange;
|
|
2702
|
-
const prevLink =
|
|
3244
|
+
const prevLink = React28.useRef(null), nextLink = React28.useRef(null);
|
|
2703
3245
|
function goPage(p, focus) {
|
|
2704
3246
|
const next = Math.min(Math.max(1, p), pageCount);
|
|
2705
3247
|
if (next === page) return false;
|
|
@@ -2734,7 +3276,7 @@ var DataTable = React23.forwardRef(function DataTable2(props, ref) {
|
|
|
2734
3276
|
);
|
|
2735
3277
|
}
|
|
2736
3278
|
function rowLinkWrap(r, content) {
|
|
2737
|
-
return rowHref ? /* @__PURE__ */
|
|
3279
|
+
return rowHref ? /* @__PURE__ */ React28.createElement(Link, { href: rowHref(r), className: "aura-table__row-link" }, content) : content;
|
|
2738
3280
|
}
|
|
2739
3281
|
const height = props.height || 0;
|
|
2740
3282
|
const virtual = !!height && !loading && pageRows.length > 0;
|
|
@@ -2757,7 +3299,7 @@ var DataTable = React23.forwardRef(function DataTable2(props, ref) {
|
|
|
2757
3299
|
if (!activeRendered) return r === 0 && c === ac ? 0 : -1;
|
|
2758
3300
|
return r === ar && c === ac ? 0 : -1;
|
|
2759
3301
|
}
|
|
2760
|
-
|
|
3302
|
+
React28.useEffect(function() {
|
|
2761
3303
|
const p = pending.current;
|
|
2762
3304
|
if (!p || !gridRef.current) return;
|
|
2763
3305
|
let c = p.c;
|
|
@@ -2923,9 +3465,9 @@ var DataTable = React23.forwardRef(function DataTable2(props, ref) {
|
|
|
2923
3465
|
const group = vis.filter(function(x) {
|
|
2924
3466
|
return isPinned(x) === isPinned(c);
|
|
2925
3467
|
}), gi = group.indexOf(c);
|
|
2926
|
-
const
|
|
3468
|
+
const items2 = [];
|
|
2927
3469
|
if (c.sortable)
|
|
2928
|
-
|
|
3470
|
+
items2.push(
|
|
2929
3471
|
{
|
|
2930
3472
|
label: t.sortAsc,
|
|
2931
3473
|
icon: "arrow-up",
|
|
@@ -2945,7 +3487,7 @@ var DataTable = React23.forwardRef(function DataTable2(props, ref) {
|
|
|
2945
3487
|
{ separator: true }
|
|
2946
3488
|
);
|
|
2947
3489
|
if (c.width != null)
|
|
2948
|
-
|
|
3490
|
+
items2.push({
|
|
2949
3491
|
label: isPinned(c) ? t.unpin : t.pin,
|
|
2950
3492
|
icon: isPinned(c) ? "pin-off" : "pin",
|
|
2951
3493
|
onSelect: function() {
|
|
@@ -2953,7 +3495,7 @@ var DataTable = React23.forwardRef(function DataTable2(props, ref) {
|
|
|
2953
3495
|
}
|
|
2954
3496
|
});
|
|
2955
3497
|
if (reorderable)
|
|
2956
|
-
|
|
3498
|
+
items2.push(
|
|
2957
3499
|
{
|
|
2958
3500
|
label: t.moveLeft,
|
|
2959
3501
|
icon: "arrow-left",
|
|
@@ -2971,7 +3513,7 @@ var DataTable = React23.forwardRef(function DataTable2(props, ref) {
|
|
|
2971
3513
|
}
|
|
2972
3514
|
}
|
|
2973
3515
|
);
|
|
2974
|
-
|
|
3516
|
+
items2.push(
|
|
2975
3517
|
{ separator: true },
|
|
2976
3518
|
{
|
|
2977
3519
|
label: t.hideColumn,
|
|
@@ -2982,7 +3524,7 @@ var DataTable = React23.forwardRef(function DataTable2(props, ref) {
|
|
|
2982
3524
|
}
|
|
2983
3525
|
}
|
|
2984
3526
|
);
|
|
2985
|
-
return
|
|
3527
|
+
return items2;
|
|
2986
3528
|
}
|
|
2987
3529
|
function pickerItems() {
|
|
2988
3530
|
return order.map(function(k) {
|
|
@@ -3068,10 +3610,10 @@ var DataTable = React23.forwardRef(function DataTable2(props, ref) {
|
|
|
3068
3610
|
e.stopPropagation();
|
|
3069
3611
|
}
|
|
3070
3612
|
}
|
|
3071
|
-
const head = [/* @__PURE__ */
|
|
3613
|
+
const head = [/* @__PURE__ */ React28.createElement("span", { key: "__gl", className: "aura-table__gutter", "aria-hidden": true })];
|
|
3072
3614
|
if (selectable)
|
|
3073
3615
|
head.push(
|
|
3074
|
-
/* @__PURE__ */
|
|
3616
|
+
/* @__PURE__ */ React28.createElement(
|
|
3075
3617
|
"span",
|
|
3076
3618
|
{
|
|
3077
3619
|
key: "__sel",
|
|
@@ -3085,7 +3627,7 @@ var DataTable = React23.forwardRef(function DataTable2(props, ref) {
|
|
|
3085
3627
|
activeState[1]({ r: 0, c: 0 });
|
|
3086
3628
|
}
|
|
3087
3629
|
},
|
|
3088
|
-
nRows ? /* @__PURE__ */
|
|
3630
|
+
nRows ? /* @__PURE__ */ React28.createElement(
|
|
3089
3631
|
Checkbox,
|
|
3090
3632
|
{
|
|
3091
3633
|
checked: all,
|
|
@@ -3104,7 +3646,7 @@ var DataTable = React23.forwardRef(function DataTable2(props, ref) {
|
|
|
3104
3646
|
const ariaSort = isSorted && canSort ? sort.dir === "desc" ? "descending" : "ascending" : canSort ? "none" : void 0;
|
|
3105
3647
|
const pin = isPinned(c), edge = pin && i === nPinned - 1;
|
|
3106
3648
|
head.push(
|
|
3107
|
-
/* @__PURE__ */
|
|
3649
|
+
/* @__PURE__ */ React28.createElement(
|
|
3108
3650
|
"span",
|
|
3109
3651
|
{
|
|
3110
3652
|
key: c.key,
|
|
@@ -3153,7 +3695,7 @@ var DataTable = React23.forwardRef(function DataTable2(props, ref) {
|
|
|
3153
3695
|
setDrag(null);
|
|
3154
3696
|
}
|
|
3155
3697
|
},
|
|
3156
|
-
/* @__PURE__ */
|
|
3698
|
+
/* @__PURE__ */ React28.createElement("span", { className: "aura-table__th-inner" }, canSort ? /* @__PURE__ */ React28.createElement(
|
|
3157
3699
|
"button",
|
|
3158
3700
|
{
|
|
3159
3701
|
type: "button",
|
|
@@ -3165,8 +3707,8 @@ var DataTable = React23.forwardRef(function DataTable2(props, ref) {
|
|
|
3165
3707
|
}
|
|
3166
3708
|
},
|
|
3167
3709
|
c.label,
|
|
3168
|
-
/* @__PURE__ */
|
|
3169
|
-
) : /* @__PURE__ */
|
|
3710
|
+
/* @__PURE__ */ React28.createElement(Icon, { name: isSorted ? sort.dir === "desc" ? "arrow-down" : "arrow-up" : "arrow-up-down", size: 12 })
|
|
3711
|
+
) : /* @__PURE__ */ React28.createElement("span", { className: cx("aura-table__th-label", !c.label && "aura-sr-only") }, c.label || (c.actions ? t.actions : c.key)), pin ? /* @__PURE__ */ React28.createElement(Icon, { name: "pin", size: 12, className: "aura-table__pin-icon", label: t.pinned }) : null, controls ? /* @__PURE__ */ React28.createElement(
|
|
3170
3712
|
"button",
|
|
3171
3713
|
{
|
|
3172
3714
|
type: "button",
|
|
@@ -3180,9 +3722,9 @@ var DataTable = React23.forwardRef(function DataTable2(props, ref) {
|
|
|
3180
3722
|
openMenu("col", c.key, e.currentTarget, { r: 0, c: ci });
|
|
3181
3723
|
}
|
|
3182
3724
|
},
|
|
3183
|
-
/* @__PURE__ */
|
|
3725
|
+
/* @__PURE__ */ React28.createElement(Icon, { name: "ellipsis" })
|
|
3184
3726
|
) : null),
|
|
3185
|
-
canResize(c) ? /* @__PURE__ */
|
|
3727
|
+
canResize(c) ? /* @__PURE__ */ React28.createElement(
|
|
3186
3728
|
"span",
|
|
3187
3729
|
{
|
|
3188
3730
|
className: "aura-table__resize",
|
|
@@ -3204,7 +3746,7 @@ var DataTable = React23.forwardRef(function DataTable2(props, ref) {
|
|
|
3204
3746
|
);
|
|
3205
3747
|
});
|
|
3206
3748
|
head.push(
|
|
3207
|
-
/* @__PURE__ */
|
|
3749
|
+
/* @__PURE__ */ React28.createElement(
|
|
3208
3750
|
"span",
|
|
3209
3751
|
{
|
|
3210
3752
|
key: "__gr",
|
|
@@ -3215,14 +3757,14 @@ var DataTable = React23.forwardRef(function DataTable2(props, ref) {
|
|
|
3215
3757
|
);
|
|
3216
3758
|
function cellContent(c, r) {
|
|
3217
3759
|
const v = r[c.key];
|
|
3218
|
-
return c.render ? c.render(r) : c.pill ? /* @__PURE__ */
|
|
3760
|
+
return c.render ? c.render(r) : c.pill ? /* @__PURE__ */ React28.createElement(StatusPill, { ...{ tone: c.tones && c.tones[v] } }, v) : v;
|
|
3219
3761
|
}
|
|
3220
3762
|
function rowCells(r, i, k, isSel) {
|
|
3221
3763
|
const ri = i + 1;
|
|
3222
|
-
const cells = [/* @__PURE__ */
|
|
3764
|
+
const cells = [/* @__PURE__ */ React28.createElement("span", { key: "__gl", className: "aura-table__gutter", "aria-hidden": true })];
|
|
3223
3765
|
if (selectable)
|
|
3224
3766
|
cells.push(
|
|
3225
|
-
/* @__PURE__ */
|
|
3767
|
+
/* @__PURE__ */ React28.createElement(
|
|
3226
3768
|
"span",
|
|
3227
3769
|
{
|
|
3228
3770
|
key: "__sel",
|
|
@@ -3236,7 +3778,7 @@ var DataTable = React23.forwardRef(function DataTable2(props, ref) {
|
|
|
3236
3778
|
if (e.target === e.currentTarget) activeState[1]({ r: ri, c: 0 });
|
|
3237
3779
|
}
|
|
3238
3780
|
},
|
|
3239
|
-
/* @__PURE__ */
|
|
3781
|
+
/* @__PURE__ */ React28.createElement(
|
|
3240
3782
|
Checkbox,
|
|
3241
3783
|
{
|
|
3242
3784
|
checked: isSel,
|
|
@@ -3252,7 +3794,7 @@ var DataTable = React23.forwardRef(function DataTable2(props, ref) {
|
|
|
3252
3794
|
vis.forEach(function(c, j) {
|
|
3253
3795
|
const ci = j + (selectable ? 1 : 0), v = r[c.key], pin = isPinned(c);
|
|
3254
3796
|
cells.push(
|
|
3255
|
-
/* @__PURE__ */
|
|
3797
|
+
/* @__PURE__ */ React28.createElement(
|
|
3256
3798
|
"span",
|
|
3257
3799
|
{
|
|
3258
3800
|
key: c.key,
|
|
@@ -3277,7 +3819,7 @@ var DataTable = React23.forwardRef(function DataTable2(props, ref) {
|
|
|
3277
3819
|
);
|
|
3278
3820
|
});
|
|
3279
3821
|
cells.push(
|
|
3280
|
-
/* @__PURE__ */
|
|
3822
|
+
/* @__PURE__ */ React28.createElement(
|
|
3281
3823
|
"span",
|
|
3282
3824
|
{
|
|
3283
3825
|
key: "__gr",
|
|
@@ -3294,21 +3836,21 @@ var DataTable = React23.forwardRef(function DataTable2(props, ref) {
|
|
|
3294
3836
|
const n2 = pageSize || props.skeletonRows || 5;
|
|
3295
3837
|
const skRows = body = [];
|
|
3296
3838
|
for (let i = 0; i < n2; i++) {
|
|
3297
|
-
const sk = [/* @__PURE__ */
|
|
3839
|
+
const sk = [/* @__PURE__ */ React28.createElement("span", { key: "__gl", className: "aura-table__gutter" })];
|
|
3298
3840
|
if (selectable)
|
|
3299
3841
|
sk.push(
|
|
3300
|
-
/* @__PURE__ */
|
|
3842
|
+
/* @__PURE__ */ React28.createElement("span", { key: "__sel", className: cx("aura-table__sel", nPinned && "is-pinned") }, /* @__PURE__ */ React28.createElement("span", { className: "aura-skel aura-skel--box" }))
|
|
3301
3843
|
);
|
|
3302
3844
|
vis.forEach(function(c, j) {
|
|
3303
3845
|
sk.push(
|
|
3304
|
-
/* @__PURE__ */
|
|
3846
|
+
/* @__PURE__ */ React28.createElement(
|
|
3305
3847
|
"span",
|
|
3306
3848
|
{
|
|
3307
3849
|
key: c.key,
|
|
3308
3850
|
className: cx("aura-table__td", c.align === "end" && "is-end", isPinned(c) && "is-pinned"),
|
|
3309
3851
|
style: cellStyle(c, j)
|
|
3310
3852
|
},
|
|
3311
|
-
/* @__PURE__ */
|
|
3853
|
+
/* @__PURE__ */ React28.createElement(
|
|
3312
3854
|
"span",
|
|
3313
3855
|
{
|
|
3314
3856
|
className: cx("aura-skel", c.pill && "aura-skel--pill"),
|
|
@@ -3319,24 +3861,24 @@ var DataTable = React23.forwardRef(function DataTable2(props, ref) {
|
|
|
3319
3861
|
);
|
|
3320
3862
|
});
|
|
3321
3863
|
sk.push(
|
|
3322
|
-
/* @__PURE__ */
|
|
3864
|
+
/* @__PURE__ */ React28.createElement("span", { key: "__gr", className: cx("aura-table__gutter aura-table__gutter--end", controls && "has-picker") })
|
|
3323
3865
|
);
|
|
3324
3866
|
skRows.push(
|
|
3325
|
-
/* @__PURE__ */
|
|
3867
|
+
/* @__PURE__ */ React28.createElement("div", { key: "sk" + i, className: "aura-table__row aura-table__row--skeleton", "aria-hidden": true, style: rowStyle }, sk)
|
|
3326
3868
|
);
|
|
3327
3869
|
}
|
|
3328
3870
|
} else if (!rows.length) {
|
|
3329
3871
|
const em = props.empty || {};
|
|
3330
|
-
body = /* @__PURE__ */
|
|
3872
|
+
body = /* @__PURE__ */ React28.createElement("div", { className: "aura-table__empty", role: "row" }, /* @__PURE__ */ React28.createElement("div", { role: "gridcell" }, /* @__PURE__ */ React28.createElement("span", { className: "aura-table__empty-icon" }, /* @__PURE__ */ React28.createElement(Icon, { name: em.icon || "inbox", size: "lg" })), /* @__PURE__ */ React28.createElement("p", { className: "aura-table__empty-title" }, em.title || t.empty), em.description ? /* @__PURE__ */ React28.createElement("p", { className: "aura-table__empty-text" }, em.description) : null, em.action ? /* @__PURE__ */ React28.createElement("div", { className: "aura-table__empty-action" }, em.action) : null));
|
|
3331
3873
|
} else {
|
|
3332
3874
|
const bodyRows = body = [];
|
|
3333
3875
|
if (virtual && start > 0)
|
|
3334
|
-
bodyRows.push(/* @__PURE__ */
|
|
3876
|
+
bodyRows.push(/* @__PURE__ */ React28.createElement("div", { key: "__top", style: { height: start * ROW_H + "px" }, "aria-hidden": true }));
|
|
3335
3877
|
for (let ri = start; ri < end; ri++) {
|
|
3336
3878
|
(function(r, i) {
|
|
3337
3879
|
const k = r[rowKey], isSel = !!selSet[k];
|
|
3338
3880
|
bodyRows.push(
|
|
3339
|
-
/* @__PURE__ */
|
|
3881
|
+
/* @__PURE__ */ React28.createElement(
|
|
3340
3882
|
"div",
|
|
3341
3883
|
{
|
|
3342
3884
|
key: k,
|
|
@@ -3362,13 +3904,13 @@ var DataTable = React23.forwardRef(function DataTable2(props, ref) {
|
|
|
3362
3904
|
})(pageRows[ri], ri);
|
|
3363
3905
|
}
|
|
3364
3906
|
if (virtual && end < pageRows.length)
|
|
3365
|
-
bodyRows.push(/* @__PURE__ */
|
|
3907
|
+
bodyRows.push(/* @__PURE__ */ React28.createElement("div", { key: "__bot", style: { height: (pageRows.length - end) * ROW_H + "px" }, "aria-hidden": true }));
|
|
3366
3908
|
}
|
|
3367
3909
|
let foot = null;
|
|
3368
3910
|
function pagerButton(dir) {
|
|
3369
3911
|
const p = page + dir, off = busy || (dir < 0 ? page <= 1 : page >= pageCount), label = dir < 0 ? t.prevPage : t.nextPage, icon = dir < 0 ? "chevron-left" : "chevron-right";
|
|
3370
3912
|
if (props.getPageHref && !off)
|
|
3371
|
-
return /* @__PURE__ */
|
|
3913
|
+
return /* @__PURE__ */ React28.createElement(
|
|
3372
3914
|
Link,
|
|
3373
3915
|
{
|
|
3374
3916
|
ref: dir < 0 ? prevLink : nextLink,
|
|
@@ -3382,9 +3924,9 @@ var DataTable = React23.forwardRef(function DataTable2(props, ref) {
|
|
|
3382
3924
|
}
|
|
3383
3925
|
}
|
|
3384
3926
|
},
|
|
3385
|
-
/* @__PURE__ */
|
|
3927
|
+
/* @__PURE__ */ React28.createElement(Icon, { name: icon })
|
|
3386
3928
|
);
|
|
3387
|
-
return /* @__PURE__ */
|
|
3929
|
+
return /* @__PURE__ */ React28.createElement(
|
|
3388
3930
|
IconButton,
|
|
3389
3931
|
{
|
|
3390
3932
|
icon,
|
|
@@ -3398,9 +3940,9 @@ var DataTable = React23.forwardRef(function DataTable2(props, ref) {
|
|
|
3398
3940
|
}
|
|
3399
3941
|
if (pageSize && (rows.length || busy)) {
|
|
3400
3942
|
const from = rows.length ? first + 1 : 0, to = manual ? first + rows.length : Math.min(first + pageSize, view.length);
|
|
3401
|
-
foot = /* @__PURE__ */
|
|
3943
|
+
foot = /* @__PURE__ */ React28.createElement("div", { className: "aura-table__foot" }, /* @__PURE__ */ React28.createElement("span", { "aria-live": "polite" }, busy ? t.loading : t.range(from, to, shownTotal)), /* @__PURE__ */ React28.createElement("span", { className: "aura-table__pager" }, /* @__PURE__ */ React28.createElement("span", null, t.page(page, pageCount)), pagerButton(-1), pagerButton(1)));
|
|
3402
3944
|
} else if (height && rows.length && !loading) {
|
|
3403
|
-
foot = /* @__PURE__ */
|
|
3945
|
+
foot = /* @__PURE__ */ React28.createElement("div", { className: "aura-table__foot" }, /* @__PURE__ */ React28.createElement("span", null, t.rowCount(shownTotal)), selectable && selected.length ? /* @__PURE__ */ React28.createElement("span", null, t.selectedCount(selected.length)) : /* @__PURE__ */ React28.createElement("span", null));
|
|
3404
3946
|
}
|
|
3405
3947
|
if (stacked) {
|
|
3406
3948
|
const titleCol = vis[0], pillCol = vis.filter(function(c) {
|
|
@@ -3414,17 +3956,17 @@ var DataTable = React23.forwardRef(function DataTable2(props, ref) {
|
|
|
3414
3956
|
});
|
|
3415
3957
|
let cardBody;
|
|
3416
3958
|
if (loading) {
|
|
3417
|
-
cardBody = /* @__PURE__ */
|
|
3418
|
-
return /* @__PURE__ */
|
|
3959
|
+
cardBody = /* @__PURE__ */ React28.createElement("ul", { className: "aura-table__cards", "aria-busy": true }, [0, 1, 2].map(function(i) {
|
|
3960
|
+
return /* @__PURE__ */ React28.createElement("li", { key: i, className: "aura-table__card", "aria-hidden": true }, /* @__PURE__ */ React28.createElement("span", { className: "aura-skel", style: { width: "50%", height: "14px" } }), /* @__PURE__ */ React28.createElement("span", { className: "aura-skel", style: { width: "80%" } }), /* @__PURE__ */ React28.createElement("span", { className: "aura-skel", style: { width: "64%" } }));
|
|
3419
3961
|
}));
|
|
3420
3962
|
} else if (!rows.length) {
|
|
3421
3963
|
const em2 = props.empty || {};
|
|
3422
|
-
cardBody = /* @__PURE__ */
|
|
3964
|
+
cardBody = /* @__PURE__ */ React28.createElement("div", { className: "aura-table__empty" }, /* @__PURE__ */ React28.createElement("div", null, /* @__PURE__ */ React28.createElement("span", { className: "aura-table__empty-icon" }, /* @__PURE__ */ React28.createElement(Icon, { name: em2.icon || "inbox", size: "lg" })), /* @__PURE__ */ React28.createElement("p", { className: "aura-table__empty-title" }, em2.title || t.empty), em2.description ? /* @__PURE__ */ React28.createElement("p", { className: "aura-table__empty-text" }, em2.description) : null, em2.action ? /* @__PURE__ */ React28.createElement("div", { className: "aura-table__empty-action" }, em2.action) : null));
|
|
3423
3965
|
} else {
|
|
3424
3966
|
const cellVal = cellContent;
|
|
3425
|
-
cardBody = /* @__PURE__ */
|
|
3967
|
+
cardBody = /* @__PURE__ */ React28.createElement("ul", { className: "aura-table__cards", "aria-label": props.label }, pageRows.map(function(r) {
|
|
3426
3968
|
const k = r[rowKey], isSel = !!selSet[k];
|
|
3427
|
-
return /* @__PURE__ */
|
|
3969
|
+
return /* @__PURE__ */ React28.createElement(
|
|
3428
3970
|
"li",
|
|
3429
3971
|
{
|
|
3430
3972
|
key: k,
|
|
@@ -3445,7 +3987,7 @@ var DataTable = React23.forwardRef(function DataTable2(props, ref) {
|
|
|
3445
3987
|
props.onRowActivate(r);
|
|
3446
3988
|
}
|
|
3447
3989
|
},
|
|
3448
|
-
/* @__PURE__ */
|
|
3990
|
+
/* @__PURE__ */ React28.createElement("div", { className: "aura-table__card-head" }, selectable ? /* @__PURE__ */ React28.createElement(
|
|
3449
3991
|
Checkbox,
|
|
3450
3992
|
{
|
|
3451
3993
|
checked: isSel,
|
|
@@ -3454,16 +3996,16 @@ var DataTable = React23.forwardRef(function DataTable2(props, ref) {
|
|
|
3454
3996
|
toggle(k, on);
|
|
3455
3997
|
}
|
|
3456
3998
|
}
|
|
3457
|
-
) : null, /* @__PURE__ */
|
|
3458
|
-
return /* @__PURE__ */
|
|
3999
|
+
) : null, /* @__PURE__ */ React28.createElement("span", { className: cx("aura-table__card-title", titleCol.mono && "aura-table__mono") }, rowLinkWrap(r, cellVal(titleCol, r))), pillCol ? cellVal(pillCol, r) : null, actionCols.map(function(c) {
|
|
4000
|
+
return /* @__PURE__ */ React28.createElement("span", { key: c.key, className: "aura-table__card-actions" }, cellVal(c, r));
|
|
3459
4001
|
})),
|
|
3460
|
-
rest.length ? /* @__PURE__ */
|
|
3461
|
-
return /* @__PURE__ */
|
|
4002
|
+
rest.length ? /* @__PURE__ */ React28.createElement("dl", { className: "aura-table__card-fields" }, rest.map(function(c) {
|
|
4003
|
+
return /* @__PURE__ */ React28.createElement("div", { key: c.key }, /* @__PURE__ */ React28.createElement("dt", null, c.label), /* @__PURE__ */ React28.createElement("dd", { className: c.mono ? "aura-table__mono" : void 0 }, cellVal(c, r)));
|
|
3462
4004
|
})) : null
|
|
3463
4005
|
);
|
|
3464
4006
|
}));
|
|
3465
4007
|
}
|
|
3466
|
-
return /* @__PURE__ */
|
|
4008
|
+
return /* @__PURE__ */ React28.createElement(
|
|
3467
4009
|
"div",
|
|
3468
4010
|
{
|
|
3469
4011
|
ref: wrapMerged,
|
|
@@ -3472,8 +4014,8 @@ var DataTable = React23.forwardRef(function DataTable2(props, ref) {
|
|
|
3472
4014
|
"aria-label": props.label,
|
|
3473
4015
|
"aria-busy": busy || void 0
|
|
3474
4016
|
},
|
|
3475
|
-
refreshing ? /* @__PURE__ */
|
|
3476
|
-
selectable && pageRows.length && !busy ? /* @__PURE__ */
|
|
4017
|
+
refreshing ? /* @__PURE__ */ React28.createElement("span", { className: "aura-table__busy-bar", "aria-hidden": true }) : null,
|
|
4018
|
+
selectable && pageRows.length && !busy ? /* @__PURE__ */ React28.createElement("div", { className: "aura-table__stack-bar" }, /* @__PURE__ */ React28.createElement(
|
|
3477
4019
|
Checkbox,
|
|
3478
4020
|
{
|
|
3479
4021
|
checked: all,
|
|
@@ -3481,7 +4023,7 @@ var DataTable = React23.forwardRef(function DataTable2(props, ref) {
|
|
|
3481
4023
|
label: all ? t.deselectAllRows : t.selectAllRows,
|
|
3482
4024
|
onChange: toggleAll
|
|
3483
4025
|
}
|
|
3484
|
-
), /* @__PURE__ */
|
|
4026
|
+
), /* @__PURE__ */ React28.createElement("span", null, nSel ? t.selectedCount(nSel) : t.selectAll)) : null,
|
|
3485
4027
|
cardBody,
|
|
3486
4028
|
foot
|
|
3487
4029
|
);
|
|
@@ -3491,14 +4033,14 @@ var DataTable = React23.forwardRef(function DataTable2(props, ref) {
|
|
|
3491
4033
|
scrollPaddingTop: ROW_H + "px"
|
|
3492
4034
|
};
|
|
3493
4035
|
if (height) scrollStyle.height = height + "px";
|
|
3494
|
-
return /* @__PURE__ */
|
|
4036
|
+
return /* @__PURE__ */ React28.createElement(
|
|
3495
4037
|
"div",
|
|
3496
4038
|
{
|
|
3497
4039
|
ref: wrapMerged,
|
|
3498
4040
|
className: cx("aura-table", scrolledX[0] && "is-scrolled-x", refreshing && "is-refreshing", props.className)
|
|
3499
4041
|
},
|
|
3500
|
-
refreshing ? /* @__PURE__ */
|
|
3501
|
-
/* @__PURE__ */
|
|
4042
|
+
refreshing ? /* @__PURE__ */ React28.createElement("span", { className: "aura-table__busy-bar", "aria-hidden": true }) : null,
|
|
4043
|
+
/* @__PURE__ */ React28.createElement(
|
|
3502
4044
|
"div",
|
|
3503
4045
|
{
|
|
3504
4046
|
ref: function(el) {
|
|
@@ -3523,11 +4065,11 @@ var DataTable = React23.forwardRef(function DataTable2(props, ref) {
|
|
|
3523
4065
|
if (sx !== scrolledX[0]) scrolledX[1](sx);
|
|
3524
4066
|
}
|
|
3525
4067
|
},
|
|
3526
|
-
/* @__PURE__ */
|
|
4068
|
+
/* @__PURE__ */ React28.createElement("div", { className: "aura-table__head", role: "row", "aria-rowindex": 1, style: rowStyle }, head),
|
|
3527
4069
|
body
|
|
3528
4070
|
),
|
|
3529
|
-
busy ? /* @__PURE__ */
|
|
3530
|
-
controls ? /* @__PURE__ */
|
|
4071
|
+
busy ? /* @__PURE__ */ React28.createElement("span", { className: "aura-sr-only", role: "status" }, t.loadingRows) : null,
|
|
4072
|
+
controls ? /* @__PURE__ */ React28.createElement("div", { className: "aura-table__picker" }, /* @__PURE__ */ React28.createElement(
|
|
3531
4073
|
IconButton,
|
|
3532
4074
|
{
|
|
3533
4075
|
icon: "columns-3",
|
|
@@ -3539,7 +4081,7 @@ var DataTable = React23.forwardRef(function DataTable2(props, ref) {
|
|
|
3539
4081
|
}
|
|
3540
4082
|
)) : null,
|
|
3541
4083
|
foot,
|
|
3542
|
-
menu ? /* @__PURE__ */
|
|
4084
|
+
menu ? /* @__PURE__ */ React28.createElement(
|
|
3543
4085
|
Menu,
|
|
3544
4086
|
{
|
|
3545
4087
|
anchor: menu.anchor,
|
|
@@ -3552,9 +4094,9 @@ var DataTable = React23.forwardRef(function DataTable2(props, ref) {
|
|
|
3552
4094
|
});
|
|
3553
4095
|
|
|
3554
4096
|
// src/Card.tsx
|
|
3555
|
-
var
|
|
3556
|
-
var h4 =
|
|
3557
|
-
var Card =
|
|
4097
|
+
var React29 = __toESM(require("react"), 1);
|
|
4098
|
+
var h4 = React29.createElement;
|
|
4099
|
+
var Card = React29.forwardRef(function Card2(props, ref) {
|
|
3558
4100
|
const creative = props.variant === "creative";
|
|
3559
4101
|
return h4(
|
|
3560
4102
|
props.as || "section",
|
|
@@ -3568,41 +4110,41 @@ var Card = React24.forwardRef(function Card2(props, ref) {
|
|
|
3568
4110
|
),
|
|
3569
4111
|
"aria-labelledby": props.title && props.titleId ? props.titleId : void 0
|
|
3570
4112
|
},
|
|
3571
|
-
props.title || props.actions ? /* @__PURE__ */
|
|
3572
|
-
props.children ? /* @__PURE__ */
|
|
3573
|
-
props.footer ? /* @__PURE__ */
|
|
4113
|
+
props.title || props.actions ? /* @__PURE__ */ React29.createElement("div", { className: "aura-card__head" }, /* @__PURE__ */ React29.createElement("div", { className: "aura-card__heading" }, props.title ? h4("h" + (props.headingLevel || 3), { className: "aura-card__title", id: props.titleId }, props.title) : null, props.description ? /* @__PURE__ */ React29.createElement("p", { className: "aura-card__desc" }, props.description) : null), props.actions ? /* @__PURE__ */ React29.createElement("div", { className: "aura-card__actions" }, props.actions) : null) : null,
|
|
4114
|
+
props.children ? /* @__PURE__ */ React29.createElement("div", { className: "aura-card__body" }, props.children) : null,
|
|
4115
|
+
props.footer ? /* @__PURE__ */ React29.createElement("div", { className: "aura-card__foot" }, props.footer) : null
|
|
3574
4116
|
);
|
|
3575
4117
|
});
|
|
3576
4118
|
|
|
3577
4119
|
// src/Tabs.tsx
|
|
3578
|
-
var
|
|
3579
|
-
var Tabs =
|
|
3580
|
-
const
|
|
4120
|
+
var React30 = __toESM(require("react"), 1);
|
|
4121
|
+
var Tabs = React30.forwardRef(function Tabs2(props, ref) {
|
|
4122
|
+
const items2 = props.tabs || [], base = uid();
|
|
3581
4123
|
const st = useMaybeControlled(
|
|
3582
4124
|
props.value,
|
|
3583
|
-
props.defaultValue ||
|
|
4125
|
+
props.defaultValue || items2[0] && items2[0].id,
|
|
3584
4126
|
props.onChange
|
|
3585
4127
|
);
|
|
3586
|
-
const refs =
|
|
3587
|
-
const current2 =
|
|
4128
|
+
const refs = React30.useRef({});
|
|
4129
|
+
const current2 = items2.filter(function(t) {
|
|
3588
4130
|
return t.id === st[0];
|
|
3589
|
-
})[0] ||
|
|
4131
|
+
})[0] || items2[0];
|
|
3590
4132
|
function go(i) {
|
|
3591
|
-
const enabled =
|
|
4133
|
+
const enabled = items2.filter(function(t2) {
|
|
3592
4134
|
return !t2.disabled;
|
|
3593
4135
|
});
|
|
3594
4136
|
const t = enabled[(i + enabled.length) % enabled.length];
|
|
3595
4137
|
st[1](t.id);
|
|
3596
4138
|
if (refs.current[t.id]) refs.current[t.id].focus();
|
|
3597
4139
|
}
|
|
3598
|
-
return /* @__PURE__ */
|
|
4140
|
+
return /* @__PURE__ */ React30.createElement("div", { ref, className: cx("aura-tabs", props.className) }, /* @__PURE__ */ React30.createElement(
|
|
3599
4141
|
"div",
|
|
3600
4142
|
{
|
|
3601
4143
|
role: "tablist",
|
|
3602
4144
|
"aria-label": props.label,
|
|
3603
4145
|
className: "aura-tabs__list",
|
|
3604
4146
|
onKeyDown: function(e) {
|
|
3605
|
-
const enabled =
|
|
4147
|
+
const enabled = items2.filter(function(t) {
|
|
3606
4148
|
return !t.disabled;
|
|
3607
4149
|
}), i = enabled.indexOf(current2);
|
|
3608
4150
|
if (e.key === "ArrowRight") {
|
|
@@ -3620,9 +4162,9 @@ var Tabs = React25.forwardRef(function Tabs2(props, ref) {
|
|
|
3620
4162
|
}
|
|
3621
4163
|
}
|
|
3622
4164
|
},
|
|
3623
|
-
|
|
4165
|
+
items2.map(function(t) {
|
|
3624
4166
|
const on = current2 && t.id === current2.id;
|
|
3625
|
-
return /* @__PURE__ */
|
|
4167
|
+
return /* @__PURE__ */ React30.createElement(
|
|
3626
4168
|
"button",
|
|
3627
4169
|
{
|
|
3628
4170
|
key: t.id,
|
|
@@ -3641,12 +4183,12 @@ var Tabs = React25.forwardRef(function Tabs2(props, ref) {
|
|
|
3641
4183
|
st[1](t.id);
|
|
3642
4184
|
}
|
|
3643
4185
|
},
|
|
3644
|
-
t.icon ? /* @__PURE__ */
|
|
4186
|
+
t.icon ? /* @__PURE__ */ React30.createElement(Icon, { name: t.icon }) : null,
|
|
3645
4187
|
t.label,
|
|
3646
|
-
t.count != null ? /* @__PURE__ */
|
|
4188
|
+
t.count != null ? /* @__PURE__ */ React30.createElement("span", { className: "aura-tab__count" }, t.count) : null
|
|
3647
4189
|
);
|
|
3648
4190
|
})
|
|
3649
|
-
), current2 && current2.content !== void 0 ? /* @__PURE__ */
|
|
4191
|
+
), current2 && current2.content !== void 0 ? /* @__PURE__ */ React30.createElement(
|
|
3650
4192
|
"div",
|
|
3651
4193
|
{
|
|
3652
4194
|
role: "tabpanel",
|
|
@@ -3660,13 +4202,13 @@ var Tabs = React25.forwardRef(function Tabs2(props, ref) {
|
|
|
3660
4202
|
});
|
|
3661
4203
|
|
|
3662
4204
|
// src/SideNav.tsx
|
|
3663
|
-
var
|
|
4205
|
+
var React31 = __toESM(require("react"), 1);
|
|
3664
4206
|
function contains(it, id) {
|
|
3665
4207
|
return !!id && !!it.children && it.children.some(function(c) {
|
|
3666
4208
|
return c.id === id || contains(c, id);
|
|
3667
4209
|
});
|
|
3668
4210
|
}
|
|
3669
|
-
var SideNav =
|
|
4211
|
+
var SideNav = React31.forwardRef(function SideNav2(props, ref) {
|
|
3670
4212
|
const t = useStrings();
|
|
3671
4213
|
const Link = useLinkComponent(props.linkComponent);
|
|
3672
4214
|
const base = uid();
|
|
@@ -3677,12 +4219,12 @@ var SideNav = React26.forwardRef(function SideNav2(props, ref) {
|
|
|
3677
4219
|
);
|
|
3678
4220
|
const active = st[0];
|
|
3679
4221
|
const sections = props.sections || [{ items: props.items || [] }];
|
|
3680
|
-
const openState =
|
|
4222
|
+
const openState = React31.useState({}), toggled = openState[0], setToggled = openState[1];
|
|
3681
4223
|
function isOpen(it) {
|
|
3682
4224
|
if (toggled[it.id] != null) return toggled[it.id];
|
|
3683
4225
|
return !!it.defaultOpen || contains(it, active);
|
|
3684
4226
|
}
|
|
3685
|
-
|
|
4227
|
+
React31.useEffect(
|
|
3686
4228
|
function() {
|
|
3687
4229
|
if (!active) return;
|
|
3688
4230
|
const next = {};
|
|
@@ -3704,14 +4246,14 @@ var SideNav = React26.forwardRef(function SideNav2(props, ref) {
|
|
|
3704
4246
|
},
|
|
3705
4247
|
[active]
|
|
3706
4248
|
);
|
|
3707
|
-
const navRef =
|
|
4249
|
+
const navRef = React31.useRef(null);
|
|
3708
4250
|
function onKeyDown(e) {
|
|
3709
4251
|
const k = e.key;
|
|
3710
4252
|
if (k !== "ArrowDown" && k !== "ArrowUp" && k !== "Home" && k !== "End") return;
|
|
3711
4253
|
const root = navRef.current;
|
|
3712
4254
|
if (!root) return;
|
|
3713
|
-
const
|
|
3714
|
-
const visible =
|
|
4255
|
+
const items2 = Array.prototype.slice.call(root.querySelectorAll(".aura-nav__item"));
|
|
4256
|
+
const visible = items2.filter(function(el) {
|
|
3715
4257
|
return el.offsetParent !== null || el === document.activeElement;
|
|
3716
4258
|
});
|
|
3717
4259
|
const i = visible.indexOf(document.activeElement);
|
|
@@ -3722,11 +4264,11 @@ var SideNav = React26.forwardRef(function SideNav2(props, ref) {
|
|
|
3722
4264
|
}
|
|
3723
4265
|
function inner(it, group, open) {
|
|
3724
4266
|
return [
|
|
3725
|
-
it.icon ? /* @__PURE__ */
|
|
3726
|
-
/* @__PURE__ */
|
|
3727
|
-
it.badge != null ? /* @__PURE__ */
|
|
3728
|
-
it.count != null ? /* @__PURE__ */
|
|
3729
|
-
group ? /* @__PURE__ */
|
|
4267
|
+
it.icon ? /* @__PURE__ */ React31.createElement(Icon, { key: "i", name: it.icon }) : null,
|
|
4268
|
+
/* @__PURE__ */ React31.createElement("span", { key: "l", className: "aura-nav__label" }, it.label),
|
|
4269
|
+
it.badge != null ? /* @__PURE__ */ React31.createElement("span", { key: "b", className: "aura-nav__badge" }, it.badge) : null,
|
|
4270
|
+
it.count != null ? /* @__PURE__ */ React31.createElement("span", { key: "c", className: "aura-nav__count" }, it.count) : null,
|
|
4271
|
+
group ? /* @__PURE__ */ React31.createElement(Icon, { key: "g", name: "chevron-down", className: cx("aura-nav__chevron", open && "is-open") }) : null
|
|
3730
4272
|
];
|
|
3731
4273
|
}
|
|
3732
4274
|
function item(it, depth) {
|
|
@@ -3734,7 +4276,7 @@ var SideNav = React26.forwardRef(function SideNav2(props, ref) {
|
|
|
3734
4276
|
const open = isOpen(it);
|
|
3735
4277
|
const listId = base + "-" + it.id;
|
|
3736
4278
|
const holdsActive = contains(it, active);
|
|
3737
|
-
return /* @__PURE__ */
|
|
4279
|
+
return /* @__PURE__ */ React31.createElement("li", { key: it.id, className: "aura-nav__group" }, /* @__PURE__ */ React31.createElement(
|
|
3738
4280
|
"button",
|
|
3739
4281
|
{
|
|
3740
4282
|
type: "button",
|
|
@@ -3758,7 +4300,7 @@ var SideNav = React26.forwardRef(function SideNav2(props, ref) {
|
|
|
3758
4300
|
}
|
|
3759
4301
|
},
|
|
3760
4302
|
inner(it, true, open)
|
|
3761
|
-
), /* @__PURE__ */
|
|
4303
|
+
), /* @__PURE__ */ React31.createElement("ul", { id: listId, className: "aura-nav__list aura-nav__sub", hidden: !open }, it.children.map(function(c) {
|
|
3762
4304
|
return item(c, depth + 1);
|
|
3763
4305
|
})));
|
|
3764
4306
|
}
|
|
@@ -3772,9 +4314,9 @@ var SideNav = React26.forwardRef(function SideNav2(props, ref) {
|
|
|
3772
4314
|
st[1](it.id);
|
|
3773
4315
|
}
|
|
3774
4316
|
};
|
|
3775
|
-
return /* @__PURE__ */
|
|
4317
|
+
return /* @__PURE__ */ React31.createElement("li", { key: it.id }, it.href ? /* @__PURE__ */ React31.createElement(Link, { href: it.href, ...common }, inner(it, false, false)) : /* @__PURE__ */ React31.createElement("button", { type: "button", ...common }, inner(it, false, false)));
|
|
3776
4318
|
}
|
|
3777
|
-
return /* @__PURE__ */
|
|
4319
|
+
return /* @__PURE__ */ React31.createElement(
|
|
3778
4320
|
"nav",
|
|
3779
4321
|
{
|
|
3780
4322
|
ref: function(el) {
|
|
@@ -3786,43 +4328,43 @@ var SideNav = React26.forwardRef(function SideNav2(props, ref) {
|
|
|
3786
4328
|
"aria-label": props.label || t.mainNav,
|
|
3787
4329
|
onKeyDown
|
|
3788
4330
|
},
|
|
3789
|
-
props.header ? /* @__PURE__ */
|
|
3790
|
-
/* @__PURE__ */
|
|
3791
|
-
return /* @__PURE__ */
|
|
4331
|
+
props.header ? /* @__PURE__ */ React31.createElement("div", { className: "aura-nav__header" }, props.header) : null,
|
|
4332
|
+
/* @__PURE__ */ React31.createElement("div", { className: "aura-nav__scroll" }, sections.map(function(s, i) {
|
|
4333
|
+
return /* @__PURE__ */ React31.createElement("div", { key: i, className: "aura-nav__section" }, s.title ? /* @__PURE__ */ React31.createElement("p", { className: "aura-nav__title" }, s.title) : null, /* @__PURE__ */ React31.createElement("ul", { className: "aura-nav__list" }, s.items.map(function(it) {
|
|
3792
4334
|
return item(it, 0);
|
|
3793
4335
|
})));
|
|
3794
4336
|
})),
|
|
3795
|
-
props.footer ? /* @__PURE__ */
|
|
4337
|
+
props.footer ? /* @__PURE__ */ React31.createElement("div", { className: "aura-nav__footer" }, props.footer) : null
|
|
3796
4338
|
);
|
|
3797
4339
|
});
|
|
3798
4340
|
|
|
3799
4341
|
// src/Breadcrumb.tsx
|
|
3800
|
-
var
|
|
3801
|
-
var Breadcrumb =
|
|
4342
|
+
var React32 = __toESM(require("react"), 1);
|
|
4343
|
+
var Breadcrumb = React32.forwardRef(function Breadcrumb2(props, ref) {
|
|
3802
4344
|
const t = useStrings();
|
|
3803
4345
|
const Link = useLinkComponent();
|
|
3804
|
-
const
|
|
3805
|
-
return /* @__PURE__ */
|
|
3806
|
-
const last = i ===
|
|
3807
|
-
return /* @__PURE__ */
|
|
4346
|
+
const items2 = props.items || [];
|
|
4347
|
+
return /* @__PURE__ */ React32.createElement("nav", { ref, "aria-label": props.label || t.breadcrumb, className: cx("aura-crumbs", props.className) }, /* @__PURE__ */ React32.createElement("ol", null, items2.map(function(it, i) {
|
|
4348
|
+
const last = i === items2.length - 1;
|
|
4349
|
+
return /* @__PURE__ */ React32.createElement("li", { key: i }, last ? /* @__PURE__ */ React32.createElement("span", { "aria-current": "page", className: "aura-crumbs__current" }, it.label) : it.href ? /* @__PURE__ */ React32.createElement(Link, { href: it.href, onClick: it.onClick }, it.label) : /* @__PURE__ */ React32.createElement("button", { type: "button", onClick: it.onClick }, it.label), last ? null : /* @__PURE__ */ React32.createElement(Icon, { name: "chevron-right", size: 12, className: "aura-crumbs__sep" }));
|
|
3808
4350
|
})));
|
|
3809
4351
|
});
|
|
3810
4352
|
|
|
3811
4353
|
// src/Avatar.tsx
|
|
3812
|
-
var
|
|
4354
|
+
var React33 = __toESM(require("react"), 1);
|
|
3813
4355
|
var AVATAR_TONES = ["progress", "ready", "neutral", "warning"];
|
|
3814
4356
|
function initials(name) {
|
|
3815
4357
|
const parts = String(name || "?").trim().split(/\s+/);
|
|
3816
4358
|
return ((parts[0] || "?")[0] + (parts.length > 1 ? parts[parts.length - 1][0] : parts[0][1] || "")).toUpperCase();
|
|
3817
4359
|
}
|
|
3818
|
-
var Avatar =
|
|
3819
|
-
const size = props.size || "md", errState =
|
|
4360
|
+
var Avatar = React33.forwardRef(function Avatar2(props, ref) {
|
|
4361
|
+
const size = props.size || "md", errState = React33.useState(false);
|
|
3820
4362
|
let hash = 0;
|
|
3821
4363
|
String(props.name || "").split("").forEach(function(ch) {
|
|
3822
4364
|
hash = hash * 31 + ch.charCodeAt(0) >>> 0;
|
|
3823
4365
|
});
|
|
3824
4366
|
const tone2 = AVATAR_TONES[hash % AVATAR_TONES.length];
|
|
3825
|
-
return /* @__PURE__ */
|
|
4367
|
+
return /* @__PURE__ */ React33.createElement(
|
|
3826
4368
|
"span",
|
|
3827
4369
|
{
|
|
3828
4370
|
ref,
|
|
@@ -3830,7 +4372,7 @@ var Avatar = React28.forwardRef(function Avatar2(props, ref) {
|
|
|
3830
4372
|
role: "img",
|
|
3831
4373
|
"aria-label": props.name + (props.status ? ", " + props.status : "")
|
|
3832
4374
|
},
|
|
3833
|
-
props.src && !errState[0] ? /* @__PURE__ */
|
|
4375
|
+
props.src && !errState[0] ? /* @__PURE__ */ React33.createElement(
|
|
3834
4376
|
"img",
|
|
3835
4377
|
{
|
|
3836
4378
|
src: props.src,
|
|
@@ -3839,20 +4381,20 @@ var Avatar = React28.forwardRef(function Avatar2(props, ref) {
|
|
|
3839
4381
|
errState[1](true);
|
|
3840
4382
|
}
|
|
3841
4383
|
}
|
|
3842
|
-
) : /* @__PURE__ */
|
|
3843
|
-
props.status === "online" ? /* @__PURE__ */
|
|
4384
|
+
) : /* @__PURE__ */ React33.createElement("span", { "aria-hidden": true }, initials(props.name)),
|
|
4385
|
+
props.status === "online" ? /* @__PURE__ */ React33.createElement("span", { className: "aura-avatar__status", "aria-hidden": true }) : null
|
|
3844
4386
|
);
|
|
3845
4387
|
});
|
|
3846
4388
|
|
|
3847
4389
|
// src/Stack.tsx
|
|
3848
|
-
var
|
|
4390
|
+
var React35 = __toESM(require("react"), 1);
|
|
3849
4391
|
|
|
3850
4392
|
// src/responsive.tsx
|
|
3851
|
-
var
|
|
4393
|
+
var React34 = __toESM(require("react"), 1);
|
|
3852
4394
|
var breakpoints = { sm: 640, md: 768, lg: 1024, xl: 1280 };
|
|
3853
4395
|
var ORDER = ["base", "sm", "md", "lg", "xl"];
|
|
3854
4396
|
function useBreakpoint() {
|
|
3855
|
-
return
|
|
4397
|
+
return React34.useSyncExternalStore(subscribe, current, function() {
|
|
3856
4398
|
return "lg";
|
|
3857
4399
|
});
|
|
3858
4400
|
}
|
|
@@ -3892,8 +4434,8 @@ var space = function(v) {
|
|
|
3892
4434
|
};
|
|
3893
4435
|
|
|
3894
4436
|
// src/Stack.tsx
|
|
3895
|
-
var h5 =
|
|
3896
|
-
var Stack =
|
|
4437
|
+
var h5 = React35.createElement;
|
|
4438
|
+
var Stack = React35.forwardRef(function Stack2(props, ref) {
|
|
3897
4439
|
const style = Object.assign(
|
|
3898
4440
|
{},
|
|
3899
4441
|
respVars("aura-stack-dir", props.direction || "column"),
|
|
@@ -3907,9 +4449,9 @@ var Stack = React30.forwardRef(function Stack2(props, ref) {
|
|
|
3907
4449
|
});
|
|
3908
4450
|
|
|
3909
4451
|
// src/Grid.tsx
|
|
3910
|
-
var
|
|
3911
|
-
var h6 =
|
|
3912
|
-
var Grid =
|
|
4452
|
+
var React36 = __toESM(require("react"), 1);
|
|
4453
|
+
var h6 = React36.createElement;
|
|
4454
|
+
var Grid = React36.forwardRef(function Grid2(props, ref) {
|
|
3913
4455
|
const style = Object.assign(
|
|
3914
4456
|
{},
|
|
3915
4457
|
respVars("aura-grid-gap", props.gap == null ? 6 : props.gap, space),
|
|
@@ -3924,9 +4466,9 @@ var Grid = React31.forwardRef(function Grid2(props, ref) {
|
|
|
3924
4466
|
});
|
|
3925
4467
|
|
|
3926
4468
|
// src/Container.tsx
|
|
3927
|
-
var
|
|
3928
|
-
var h7 =
|
|
3929
|
-
var Container =
|
|
4469
|
+
var React37 = __toESM(require("react"), 1);
|
|
4470
|
+
var h7 = React37.createElement;
|
|
4471
|
+
var Container = React37.forwardRef(function Container2(props, ref) {
|
|
3930
4472
|
return h7(
|
|
3931
4473
|
props.as || "div",
|
|
3932
4474
|
{
|
|
@@ -3939,27 +4481,27 @@ var Container = React32.forwardRef(function Container2(props, ref) {
|
|
|
3939
4481
|
});
|
|
3940
4482
|
|
|
3941
4483
|
// src/AppShell.tsx
|
|
3942
|
-
var
|
|
3943
|
-
var AppShell =
|
|
4484
|
+
var React38 = __toESM(require("react"), 1);
|
|
4485
|
+
var AppShell = React38.forwardRef(function AppShell2(props, ref) {
|
|
3944
4486
|
const t = useStrings();
|
|
3945
4487
|
const bp = useBreakpoint();
|
|
3946
4488
|
const compact = bp === "base" || bp === "sm" || bp === "md";
|
|
3947
|
-
const st =
|
|
3948
|
-
|
|
4489
|
+
const st = React38.useState(false), open = st[0], setOpen = st[1];
|
|
4490
|
+
React38.useEffect(
|
|
3949
4491
|
function() {
|
|
3950
4492
|
if (!compact) setOpen(false);
|
|
3951
4493
|
},
|
|
3952
4494
|
[compact]
|
|
3953
4495
|
);
|
|
3954
4496
|
const navEl = props.nav;
|
|
3955
|
-
const nav = props.nav &&
|
|
4497
|
+
const nav = props.nav && React38.isValidElement(props.nav) && compact ? React38.cloneElement(navEl, {
|
|
3956
4498
|
onChange: function(id) {
|
|
3957
4499
|
if (navEl.props.onChange) navEl.props.onChange(id);
|
|
3958
4500
|
setOpen(false);
|
|
3959
4501
|
},
|
|
3960
4502
|
className: cx(navEl.props.className, "is-in-drawer")
|
|
3961
4503
|
}) : props.nav;
|
|
3962
|
-
return /* @__PURE__ */
|
|
4504
|
+
return /* @__PURE__ */ React38.createElement("div", { ref, className: cx("aura-shell", compact && "is-compact", props.className) }, !compact ? /* @__PURE__ */ React38.createElement("div", { className: "aura-shell__nav" }, nav) : null, compact ? /* @__PURE__ */ React38.createElement(
|
|
3963
4505
|
Drawer,
|
|
3964
4506
|
{
|
|
3965
4507
|
open,
|
|
@@ -3972,7 +4514,7 @@ var AppShell = React33.forwardRef(function AppShell2(props, ref) {
|
|
|
3972
4514
|
dismissible: true
|
|
3973
4515
|
},
|
|
3974
4516
|
nav
|
|
3975
|
-
) : null, /* @__PURE__ */
|
|
4517
|
+
) : null, /* @__PURE__ */ React38.createElement("div", { className: "aura-shell__main" }, props.header || compact ? /* @__PURE__ */ React38.createElement("header", { className: "aura-shell__bar" }, compact ? /* @__PURE__ */ React38.createElement(
|
|
3976
4518
|
IconButton,
|
|
3977
4519
|
{
|
|
3978
4520
|
icon: "menu",
|
|
@@ -3983,13 +4525,13 @@ var AppShell = React33.forwardRef(function AppShell2(props, ref) {
|
|
|
3983
4525
|
},
|
|
3984
4526
|
"aria-expanded": open
|
|
3985
4527
|
}
|
|
3986
|
-
) : null, /* @__PURE__ */
|
|
4528
|
+
) : null, /* @__PURE__ */ React38.createElement("div", { className: "aura-shell__bar-content" }, props.header)) : null, /* @__PURE__ */ React38.createElement("main", { className: "aura-shell__content", id: props.mainId || "main" }, props.children)));
|
|
3987
4529
|
});
|
|
3988
4530
|
|
|
3989
4531
|
// src/Surface.tsx
|
|
3990
|
-
var
|
|
3991
|
-
var h8 =
|
|
3992
|
-
var Surface =
|
|
4532
|
+
var React39 = __toESM(require("react"), 1);
|
|
4533
|
+
var h8 = React39.createElement;
|
|
4534
|
+
var Surface = React39.forwardRef(function Surface2(props, ref) {
|
|
3993
4535
|
const t = props.texture || "mesh";
|
|
3994
4536
|
const rest = omit(props, ["texture", "className", "children", "as"]);
|
|
3995
4537
|
return h8(
|
|
@@ -4010,8 +4552,8 @@ var Surface = React34.forwardRef(function Surface2(props, ref) {
|
|
|
4010
4552
|
});
|
|
4011
4553
|
|
|
4012
4554
|
// src/Stat.tsx
|
|
4013
|
-
var
|
|
4014
|
-
var Stat =
|
|
4555
|
+
var React40 = __toESM(require("react"), 1);
|
|
4556
|
+
var Stat = React40.forwardRef(function Stat2(props, ref) {
|
|
4015
4557
|
const ch = props.change;
|
|
4016
4558
|
const dir = ch && (ch.direction || "flat");
|
|
4017
4559
|
const tone2 = ch && (ch.tone || (dir === "up" ? "positive" : dir === "down" ? "negative" : "neutral"));
|
|
@@ -4020,7 +4562,7 @@ var Stat = React35.forwardRef(function Stat2(props, ref) {
|
|
|
4020
4562
|
const numeric = typeof v === "number" || typeof v === "string" && /\d/.test(v) && /^[\s\d.,:+\-\u2212%()\u0E3F$\u20AC\u00A3\u00A5kKmMbB]+$/.test(v.replace(/\b[A-Z]{3}\b/g, ""));
|
|
4021
4563
|
const Tag3 = props.href ? Link : props.onClick ? "button" : "div";
|
|
4022
4564
|
const interactive = !!(props.href || props.onClick);
|
|
4023
|
-
return /* @__PURE__ */
|
|
4565
|
+
return /* @__PURE__ */ React40.createElement(
|
|
4024
4566
|
Tag3,
|
|
4025
4567
|
{
|
|
4026
4568
|
ref,
|
|
@@ -4030,15 +4572,15 @@ var Stat = React35.forwardRef(function Stat2(props, ref) {
|
|
|
4030
4572
|
type: Tag3 === "button" ? "button" : void 0,
|
|
4031
4573
|
"aria-busy": props.loading || void 0
|
|
4032
4574
|
},
|
|
4033
|
-
/* @__PURE__ */
|
|
4034
|
-
props.loading ? /* @__PURE__ */
|
|
4035
|
-
ch && !props.loading || props.caption ? /* @__PURE__ */
|
|
4575
|
+
/* @__PURE__ */ React40.createElement("span", { className: "aura-stat__head" }, /* @__PURE__ */ React40.createElement("span", { className: "aura-stat__label" }, props.label), props.icon ? /* @__PURE__ */ React40.createElement("span", { className: "aura-stat__icon" }, /* @__PURE__ */ React40.createElement(Icon, { name: props.icon })) : null),
|
|
4576
|
+
props.loading ? /* @__PURE__ */ React40.createElement("span", { className: "aura-stat__value" }, /* @__PURE__ */ React40.createElement("span", { className: "aura-skel aura-stat__skel" })) : /* @__PURE__ */ React40.createElement("span", { className: cx("aura-stat__value", numeric && "is-numeric") }, props.value, props.unit ? /* @__PURE__ */ React40.createElement("span", { className: "aura-stat__unit" }, props.unit) : null),
|
|
4577
|
+
ch && !props.loading || props.caption ? /* @__PURE__ */ React40.createElement("span", { className: "aura-stat__foot" }, ch && !props.loading ? /* @__PURE__ */ React40.createElement("span", { className: cx("aura-stat__change", "is-" + tone2) }, /* @__PURE__ */ React40.createElement(Icon, { name: dir === "up" ? "trending-up" : dir === "down" ? "trending-down" : "minus", size: 14 }), /* @__PURE__ */ React40.createElement("span", null, ch.value)) : null, ch && ch.label && !props.loading ? /* @__PURE__ */ React40.createElement("span", { className: "aura-stat__caption" }, ch.label) : null, props.caption ? /* @__PURE__ */ React40.createElement("span", { className: "aura-stat__caption" }, props.caption) : null) : null
|
|
4036
4578
|
);
|
|
4037
4579
|
});
|
|
4038
4580
|
|
|
4039
4581
|
// src/TimePicker.tsx
|
|
4040
|
-
var
|
|
4041
|
-
var
|
|
4582
|
+
var React41 = __toESM(require("react"), 1);
|
|
4583
|
+
var import_react_dom8 = require("react-dom");
|
|
4042
4584
|
function pad2(n2) {
|
|
4043
4585
|
return (n2 < 10 ? "0" : "") + n2;
|
|
4044
4586
|
}
|
|
@@ -4061,7 +4603,7 @@ function parseTime(text) {
|
|
|
4061
4603
|
if (hh > 23 || mm > 59) return null;
|
|
4062
4604
|
return pad2(hh) + ":" + pad2(mm);
|
|
4063
4605
|
}
|
|
4064
|
-
var TimePicker =
|
|
4606
|
+
var TimePicker = React41.forwardRef(function TimePicker2(props, ref) {
|
|
4065
4607
|
const t = useStrings();
|
|
4066
4608
|
const auto = uid(), id = props.id || auto, listId = id + "-list";
|
|
4067
4609
|
const st = useMaybeControlled(
|
|
@@ -4071,7 +4613,7 @@ var TimePicker = React36.forwardRef(function TimePicker2(props, ref) {
|
|
|
4071
4613
|
);
|
|
4072
4614
|
const value = st[0];
|
|
4073
4615
|
const step = props.step || 30, lo = toMin(props.min) != null ? toMin(props.min) : 0, hi = toMin(props.max) != null ? toMin(props.max) : 24 * 60 - 1;
|
|
4074
|
-
const slots =
|
|
4616
|
+
const slots = React41.useMemo(
|
|
4075
4617
|
function() {
|
|
4076
4618
|
const out = [];
|
|
4077
4619
|
for (let m = lo; m <= hi; m += step) out.push(fromMin(m));
|
|
@@ -4083,12 +4625,12 @@ var TimePicker = React36.forwardRef(function TimePicker2(props, ref) {
|
|
|
4083
4625
|
const n2 = toMin(v);
|
|
4084
4626
|
return n2 == null || n2 < lo || n2 > hi || props.isTimeDisabled && props.isTimeDisabled(v);
|
|
4085
4627
|
}
|
|
4086
|
-
const openState =
|
|
4087
|
-
const editState =
|
|
4088
|
-
const aState =
|
|
4089
|
-
const errState =
|
|
4090
|
-
const pos =
|
|
4091
|
-
const boxRef =
|
|
4628
|
+
const openState = React41.useState(false), open = openState[0], setOpen = openState[1];
|
|
4629
|
+
const editState = React41.useState(null), editing = editState[0], setEditing = editState[1];
|
|
4630
|
+
const aState = React41.useState(0), active = aState[0], setActive = aState[1];
|
|
4631
|
+
const errState = React41.useState(null);
|
|
4632
|
+
const pos = React41.useState(null);
|
|
4633
|
+
const boxRef = React41.useRef(null), inputRef = React41.useRef(null), listRef = React41.useRef(null), inputMerged = useMergedRef(ref, inputRef);
|
|
4092
4634
|
const mounted = useMounted();
|
|
4093
4635
|
function nearest(v) {
|
|
4094
4636
|
const n2 = toMin(v);
|
|
@@ -4116,7 +4658,7 @@ var TimePicker = React36.forwardRef(function TimePicker2(props, ref) {
|
|
|
4116
4658
|
},
|
|
4117
4659
|
[open]
|
|
4118
4660
|
);
|
|
4119
|
-
|
|
4661
|
+
React41.useEffect(
|
|
4120
4662
|
function() {
|
|
4121
4663
|
if (!open) return;
|
|
4122
4664
|
function outside(e) {
|
|
@@ -4138,7 +4680,7 @@ var TimePicker = React36.forwardRef(function TimePicker2(props, ref) {
|
|
|
4138
4680
|
},
|
|
4139
4681
|
[open]
|
|
4140
4682
|
);
|
|
4141
|
-
|
|
4683
|
+
React41.useEffect(
|
|
4142
4684
|
function() {
|
|
4143
4685
|
if (!open || !listRef.current) return;
|
|
4144
4686
|
const el = listRef.current.querySelector('[data-idx="' + active + '"]');
|
|
@@ -4146,7 +4688,7 @@ var TimePicker = React36.forwardRef(function TimePicker2(props, ref) {
|
|
|
4146
4688
|
},
|
|
4147
4689
|
[active, open]
|
|
4148
4690
|
);
|
|
4149
|
-
function
|
|
4691
|
+
function show2() {
|
|
4150
4692
|
if (open || props.disabled || props.readOnly) return;
|
|
4151
4693
|
setActive(nearest(value || props.suggest || fromMin(lo)));
|
|
4152
4694
|
setOpen(true);
|
|
@@ -4196,11 +4738,11 @@ var TimePicker = React36.forwardRef(function TimePicker2(props, ref) {
|
|
|
4196
4738
|
const k = e.key;
|
|
4197
4739
|
if (k === "ArrowDown") {
|
|
4198
4740
|
e.preventDefault();
|
|
4199
|
-
if (!open)
|
|
4741
|
+
if (!open) show2();
|
|
4200
4742
|
else move(1);
|
|
4201
4743
|
} else if (k === "ArrowUp") {
|
|
4202
4744
|
e.preventDefault();
|
|
4203
|
-
if (!open)
|
|
4745
|
+
if (!open) show2();
|
|
4204
4746
|
else move(-1);
|
|
4205
4747
|
} else if (k === "Home" && open) {
|
|
4206
4748
|
e.preventDefault();
|
|
@@ -4235,10 +4777,10 @@ var TimePicker = React36.forwardRef(function TimePicker2(props, ref) {
|
|
|
4235
4777
|
}
|
|
4236
4778
|
}
|
|
4237
4779
|
const error = errState[0] || props.error;
|
|
4238
|
-
const list = open && mounted && pos[0] ? (0,
|
|
4239
|
-
/* @__PURE__ */
|
|
4780
|
+
const list = open && mounted && pos[0] ? (0, import_react_dom8.createPortal)(
|
|
4781
|
+
/* @__PURE__ */ React41.createElement("div", { ref: listRef, className: "aura-combo__popover aura-time__popover", style: pos[0] }, /* @__PURE__ */ React41.createElement("ul", { id: listId, role: "listbox", "aria-label": props.label, className: "aura-combo__list" }, slots.map(function(s, i) {
|
|
4240
4782
|
const dis = blocked(s), sel = s === value;
|
|
4241
|
-
return /* @__PURE__ */
|
|
4783
|
+
return /* @__PURE__ */ React41.createElement(
|
|
4242
4784
|
"li",
|
|
4243
4785
|
{
|
|
4244
4786
|
key: s,
|
|
@@ -4263,13 +4805,13 @@ var TimePicker = React36.forwardRef(function TimePicker2(props, ref) {
|
|
|
4263
4805
|
if (active !== i) setActive(i);
|
|
4264
4806
|
}
|
|
4265
4807
|
},
|
|
4266
|
-
/* @__PURE__ */
|
|
4267
|
-
sel ? /* @__PURE__ */
|
|
4808
|
+
/* @__PURE__ */ React41.createElement("span", { className: "aura-combo__label" }, s),
|
|
4809
|
+
sel ? /* @__PURE__ */ React41.createElement(Icon, { name: "check", className: "aura-combo__check" }) : null
|
|
4268
4810
|
);
|
|
4269
4811
|
}))),
|
|
4270
4812
|
document.body
|
|
4271
4813
|
) : null;
|
|
4272
|
-
return /* @__PURE__ */
|
|
4814
|
+
return /* @__PURE__ */ React41.createElement(
|
|
4273
4815
|
Field,
|
|
4274
4816
|
{
|
|
4275
4817
|
id,
|
|
@@ -4281,7 +4823,7 @@ var TimePicker = React36.forwardRef(function TimePicker2(props, ref) {
|
|
|
4281
4823
|
disabled: props.disabled,
|
|
4282
4824
|
className: props.className
|
|
4283
4825
|
},
|
|
4284
|
-
/* @__PURE__ */
|
|
4826
|
+
/* @__PURE__ */ React41.createElement("div", { ref: boxRef, className: cx("aura-input aura-combo aura-time has-icon", open && "is-open") }, /* @__PURE__ */ React41.createElement(Icon, { name: "clock", className: "aura-input__icon" }), /* @__PURE__ */ React41.createElement(
|
|
4285
4827
|
"input",
|
|
4286
4828
|
{
|
|
4287
4829
|
ref: inputMerged,
|
|
@@ -4307,11 +4849,11 @@ var TimePicker = React36.forwardRef(function TimePicker2(props, ref) {
|
|
|
4307
4849
|
setEditing(e.target.value);
|
|
4308
4850
|
const v = parseTime(e.target.value);
|
|
4309
4851
|
if (v) {
|
|
4310
|
-
if (!open)
|
|
4852
|
+
if (!open) show2();
|
|
4311
4853
|
setActive(nearest(v));
|
|
4312
4854
|
}
|
|
4313
4855
|
},
|
|
4314
|
-
onClick:
|
|
4856
|
+
onClick: show2,
|
|
4315
4857
|
onKeyDown,
|
|
4316
4858
|
onBlur: function() {
|
|
4317
4859
|
setTimeout(function() {
|
|
@@ -4321,7 +4863,7 @@ var TimePicker = React36.forwardRef(function TimePicker2(props, ref) {
|
|
|
4321
4863
|
}, 0);
|
|
4322
4864
|
}
|
|
4323
4865
|
}
|
|
4324
|
-
), props.clearable !== false && value != null && !props.disabled ? /* @__PURE__ */
|
|
4866
|
+
), props.clearable !== false && value != null && !props.disabled ? /* @__PURE__ */ React41.createElement(
|
|
4325
4867
|
"button",
|
|
4326
4868
|
{
|
|
4327
4869
|
type: "button",
|
|
@@ -4334,8 +4876,8 @@ var TimePicker = React36.forwardRef(function TimePicker2(props, ref) {
|
|
|
4334
4876
|
if (inputRef.current) inputRef.current.focus();
|
|
4335
4877
|
}
|
|
4336
4878
|
},
|
|
4337
|
-
/* @__PURE__ */
|
|
4338
|
-
) : null, /* @__PURE__ */
|
|
4879
|
+
/* @__PURE__ */ React41.createElement(Icon, { name: "x" })
|
|
4880
|
+
) : null, /* @__PURE__ */ React41.createElement(
|
|
4339
4881
|
"button",
|
|
4340
4882
|
{
|
|
4341
4883
|
type: "button",
|
|
@@ -4348,19 +4890,19 @@ var TimePicker = React36.forwardRef(function TimePicker2(props, ref) {
|
|
|
4348
4890
|
onClick: function() {
|
|
4349
4891
|
if (open) setOpen(false);
|
|
4350
4892
|
else {
|
|
4351
|
-
|
|
4893
|
+
show2();
|
|
4352
4894
|
inputRef.current && inputRef.current.focus();
|
|
4353
4895
|
}
|
|
4354
4896
|
}
|
|
4355
4897
|
},
|
|
4356
|
-
/* @__PURE__ */
|
|
4898
|
+
/* @__PURE__ */ React41.createElement(Icon, { name: "chevron-down" })
|
|
4357
4899
|
)),
|
|
4358
4900
|
list
|
|
4359
4901
|
);
|
|
4360
4902
|
});
|
|
4361
4903
|
|
|
4362
4904
|
// src/FileUpload.tsx
|
|
4363
|
-
var
|
|
4905
|
+
var React42 = __toESM(require("react"), 1);
|
|
4364
4906
|
function formatBytes(n2) {
|
|
4365
4907
|
if (n2 == null) return "";
|
|
4366
4908
|
if (n2 < 1024) return n2 + " B";
|
|
@@ -4394,17 +4936,17 @@ function describeAccept(accept, t) {
|
|
|
4394
4936
|
}).join(", ");
|
|
4395
4937
|
}
|
|
4396
4938
|
var seq = 0;
|
|
4397
|
-
var FileUpload =
|
|
4939
|
+
var FileUpload = React42.forwardRef(function FileUpload2(props, ref) {
|
|
4398
4940
|
const t = useStrings();
|
|
4399
4941
|
const auto = uid(), id = props.id || auto;
|
|
4400
4942
|
const st = useMaybeControlled(props.value, props.defaultValue || [], props.onChange);
|
|
4401
|
-
const
|
|
4402
|
-
const dragState =
|
|
4403
|
-
const inputRef =
|
|
4404
|
-
const urls =
|
|
4943
|
+
const items2 = st[0] || [];
|
|
4944
|
+
const dragState = React42.useState(false), over = dragState[0];
|
|
4945
|
+
const inputRef = React42.useRef(null), inputMerged = useMergedRef(ref, inputRef);
|
|
4946
|
+
const urls = React42.useRef({});
|
|
4405
4947
|
const maxFiles = props.multiple ? props.maxFiles : 1;
|
|
4406
4948
|
const note = t.accepts(describeAccept(props.accept, t), props.maxSize ? formatBytes(props.maxSize) : "");
|
|
4407
|
-
|
|
4949
|
+
React42.useEffect(function() {
|
|
4408
4950
|
return function() {
|
|
4409
4951
|
Object.keys(urls.current).forEach(function(k) {
|
|
4410
4952
|
URL.revokeObjectURL(urls.current[k]);
|
|
@@ -4419,7 +4961,7 @@ var FileUpload = React37.forwardRef(function FileUpload2(props, ref) {
|
|
|
4419
4961
|
function add(list) {
|
|
4420
4962
|
const files = Array.prototype.slice.call(list || []);
|
|
4421
4963
|
if (!files.length || props.disabled) return;
|
|
4422
|
-
const keep = props.multiple ?
|
|
4964
|
+
const keep = props.multiple ? items2.slice() : [];
|
|
4423
4965
|
let room = maxFiles ? maxFiles - keep.filter(function(i) {
|
|
4424
4966
|
return !i.error;
|
|
4425
4967
|
}).length : Infinity;
|
|
@@ -4447,7 +4989,7 @@ var FileUpload = React37.forwardRef(function FileUpload2(props, ref) {
|
|
|
4447
4989
|
delete urls.current[it.id];
|
|
4448
4990
|
}
|
|
4449
4991
|
st[1](
|
|
4450
|
-
|
|
4992
|
+
items2.filter(function(x) {
|
|
4451
4993
|
return x.id !== it.id;
|
|
4452
4994
|
})
|
|
4453
4995
|
);
|
|
@@ -4455,7 +4997,7 @@ var FileUpload = React37.forwardRef(function FileUpload2(props, ref) {
|
|
|
4455
4997
|
if (inputRef.current) inputRef.current.focus();
|
|
4456
4998
|
}
|
|
4457
4999
|
const error = props.error;
|
|
4458
|
-
return /* @__PURE__ */
|
|
5000
|
+
return /* @__PURE__ */ React42.createElement(
|
|
4459
5001
|
Field,
|
|
4460
5002
|
{
|
|
4461
5003
|
id,
|
|
@@ -4467,7 +5009,7 @@ var FileUpload = React37.forwardRef(function FileUpload2(props, ref) {
|
|
|
4467
5009
|
disabled: props.disabled,
|
|
4468
5010
|
className: props.className
|
|
4469
5011
|
},
|
|
4470
|
-
/* @__PURE__ */
|
|
5012
|
+
/* @__PURE__ */ React42.createElement(
|
|
4471
5013
|
"div",
|
|
4472
5014
|
{
|
|
4473
5015
|
className: cx("aura-upload", over && "is-over", props.disabled && "is-disabled", error && "is-invalid"),
|
|
@@ -4488,9 +5030,9 @@ var FileUpload = React37.forwardRef(function FileUpload2(props, ref) {
|
|
|
4488
5030
|
add(e.dataTransfer && e.dataTransfer.files);
|
|
4489
5031
|
}
|
|
4490
5032
|
},
|
|
4491
|
-
/* @__PURE__ */
|
|
4492
|
-
/* @__PURE__ */
|
|
4493
|
-
/* @__PURE__ */
|
|
5033
|
+
/* @__PURE__ */ React42.createElement(Icon, { name: "cloud-upload", size: "lg", className: "aura-upload__icon" }),
|
|
5034
|
+
/* @__PURE__ */ React42.createElement("span", { className: "aura-upload__text" }, t.dropFiles, " "),
|
|
5035
|
+
/* @__PURE__ */ React42.createElement(
|
|
4494
5036
|
"input",
|
|
4495
5037
|
{
|
|
4496
5038
|
ref: inputMerged,
|
|
@@ -4501,7 +5043,7 @@ var FileUpload = React37.forwardRef(function FileUpload2(props, ref) {
|
|
|
4501
5043
|
multiple: !!props.multiple,
|
|
4502
5044
|
disabled: props.disabled,
|
|
4503
5045
|
name: props.name,
|
|
4504
|
-
required: props.required && !
|
|
5046
|
+
required: props.required && !items2.some(function(i) {
|
|
4505
5047
|
return !i.error;
|
|
4506
5048
|
}),
|
|
4507
5049
|
"aria-invalid": error ? true : void 0,
|
|
@@ -4512,12 +5054,12 @@ var FileUpload = React37.forwardRef(function FileUpload2(props, ref) {
|
|
|
4512
5054
|
}
|
|
4513
5055
|
}
|
|
4514
5056
|
),
|
|
4515
|
-
/* @__PURE__ */
|
|
4516
|
-
note ? /* @__PURE__ */
|
|
5057
|
+
/* @__PURE__ */ React42.createElement("span", { className: "aura-upload__browse", "aria-hidden": true }, props.multiple ? t.browse : t.browseOne),
|
|
5058
|
+
note ? /* @__PURE__ */ React42.createElement("span", { className: "aura-upload__note", id: id + "-note" }, note) : null
|
|
4517
5059
|
),
|
|
4518
|
-
|
|
5060
|
+
items2.length ? /* @__PURE__ */ React42.createElement("ul", { className: "aura-upload__list", "aria-live": "polite" }, items2.map(function(it) {
|
|
4519
5061
|
const src = thumb(it);
|
|
4520
|
-
return /* @__PURE__ */
|
|
5062
|
+
return /* @__PURE__ */ React42.createElement("li", { key: it.id, className: cx("aura-upload__item", it.error && "is-error") }, src ? /* @__PURE__ */ React42.createElement("img", { className: "aura-upload__thumb", src, alt: "" }) : /* @__PURE__ */ React42.createElement("span", { className: "aura-upload__thumb is-icon", "aria-hidden": true }, /* @__PURE__ */ React42.createElement(Icon, { name: /^image\//.test(it.type || "") ? "image" : "file", size: "md" })), /* @__PURE__ */ React42.createElement("span", { className: "aura-upload__meta" }, /* @__PURE__ */ React42.createElement("span", { className: "aura-upload__name" }, it.name), /* @__PURE__ */ React42.createElement("span", { className: "aura-upload__sub" }, it.error ? /* @__PURE__ */ React42.createElement(React42.Fragment, null, /* @__PURE__ */ React42.createElement(Icon, { name: "circle-alert", size: 12 }), it.error) : it.status === "uploading" ? t.uploading + (it.progress != null ? " " + Math.round(it.progress) + "%" : "") : it.status === "done" ? /* @__PURE__ */ React42.createElement(React42.Fragment, null, /* @__PURE__ */ React42.createElement(Icon, { name: "circle-check", size: 12 }), formatBytes(it.size)) : formatBytes(it.size)), it.status === "uploading" ? /* @__PURE__ */ React42.createElement(
|
|
4521
5063
|
"span",
|
|
4522
5064
|
{
|
|
4523
5065
|
className: "aura-upload__bar",
|
|
@@ -4527,8 +5069,8 @@ var FileUpload = React37.forwardRef(function FileUpload2(props, ref) {
|
|
|
4527
5069
|
"aria-valuemax": 100,
|
|
4528
5070
|
"aria-valuenow": it.progress != null ? Math.round(it.progress) : void 0
|
|
4529
5071
|
},
|
|
4530
|
-
/* @__PURE__ */
|
|
4531
|
-
) : null), /* @__PURE__ */
|
|
5072
|
+
/* @__PURE__ */ React42.createElement("span", { style: { width: (it.progress || 0) + "%" } })
|
|
5073
|
+
) : null), /* @__PURE__ */ React42.createElement(
|
|
4532
5074
|
IconButton,
|
|
4533
5075
|
{
|
|
4534
5076
|
icon: "x",
|
|
@@ -4814,9 +5356,9 @@ function createTheme(opts) {
|
|
|
4814
5356
|
}
|
|
4815
5357
|
|
|
4816
5358
|
// src/ThemeStyle.tsx
|
|
4817
|
-
var
|
|
5359
|
+
var React43 = __toESM(require("react"), 1);
|
|
4818
5360
|
function ThemeStyle(props) {
|
|
4819
|
-
const css =
|
|
5361
|
+
const css = React43.useMemo(
|
|
4820
5362
|
function() {
|
|
4821
5363
|
return createTheme({ brand: props.brand, signal: props.signal, primary: props.primary, name: props.name }).css(
|
|
4822
5364
|
props.selector
|
|
@@ -4824,11 +5366,11 @@ function ThemeStyle(props) {
|
|
|
4824
5366
|
},
|
|
4825
5367
|
[props.brand, props.signal, props.primary, props.name, props.selector]
|
|
4826
5368
|
);
|
|
4827
|
-
return /* @__PURE__ */
|
|
5369
|
+
return /* @__PURE__ */ React43.createElement("style", { "data-aura-theme": props.name || props.brand, dangerouslySetInnerHTML: { __html: css } });
|
|
4828
5370
|
}
|
|
4829
5371
|
|
|
4830
5372
|
// src/colorScheme.tsx
|
|
4831
|
-
var
|
|
5373
|
+
var React44 = __toESM(require("react"), 1);
|
|
4832
5374
|
var DEFAULT_KEY = "aura-color-scheme";
|
|
4833
5375
|
var SCHEMES = ["light", "dark", "system"];
|
|
4834
5376
|
var EVENT = "aura-color-scheme";
|
|
@@ -4841,7 +5383,7 @@ function colorSchemeScript(options) {
|
|
|
4841
5383
|
return "(function(){try{var s=localStorage.getItem(" + key + ");if(s!=='light'&&s!=='dark'&&s!=='system')s=" + fallback + `;var d=document.documentElement;d.setAttribute("data-theme",s);var dark=s==='dark'||(s==='system'&&window.matchMedia('(prefers-color-scheme: dark)').matches);d.classList.toggle("dark",dark);}catch(e){}})();`;
|
|
4842
5384
|
}
|
|
4843
5385
|
function ColorSchemeScript(props) {
|
|
4844
|
-
return /* @__PURE__ */
|
|
5386
|
+
return /* @__PURE__ */ React44.createElement(
|
|
4845
5387
|
"script",
|
|
4846
5388
|
{
|
|
4847
5389
|
"data-aura-color-scheme": "",
|
|
@@ -4866,7 +5408,7 @@ function apply(scheme) {
|
|
|
4866
5408
|
function useColorScheme(options) {
|
|
4867
5409
|
const key = options && options.storageKey || DEFAULT_KEY;
|
|
4868
5410
|
const fallback = options && options.defaultScheme || "system";
|
|
4869
|
-
const subscribe2 =
|
|
5411
|
+
const subscribe2 = React44.useCallback(
|
|
4870
5412
|
function(cb) {
|
|
4871
5413
|
const mq = window.matchMedia ? window.matchMedia("(prefers-color-scheme: dark)") : null;
|
|
4872
5414
|
function onSystem() {
|
|
@@ -4884,7 +5426,7 @@ function useColorScheme(options) {
|
|
|
4884
5426
|
},
|
|
4885
5427
|
[fallback]
|
|
4886
5428
|
);
|
|
4887
|
-
const snapshot =
|
|
5429
|
+
const snapshot = React44.useSyncExternalStore(
|
|
4888
5430
|
subscribe2,
|
|
4889
5431
|
function() {
|
|
4890
5432
|
const s = readScheme(fallback);
|
|
@@ -4895,7 +5437,7 @@ function useColorScheme(options) {
|
|
|
4895
5437
|
}
|
|
4896
5438
|
);
|
|
4897
5439
|
const parts = snapshot.split("|");
|
|
4898
|
-
const setScheme =
|
|
5440
|
+
const setScheme = React44.useCallback(
|
|
4899
5441
|
function(next) {
|
|
4900
5442
|
if (!valid(next)) return;
|
|
4901
5443
|
try {
|
|
@@ -4914,11 +5456,11 @@ function ColorSchemeToggle(props) {
|
|
|
4914
5456
|
const cs = useColorScheme(props);
|
|
4915
5457
|
const names = { light: t.schemeLight, dark: t.schemeDark, system: t.schemeSystem };
|
|
4916
5458
|
const label = props.label || t.colorScheme;
|
|
4917
|
-
return /* @__PURE__ */
|
|
5459
|
+
return /* @__PURE__ */ React44.createElement(
|
|
4918
5460
|
DropdownMenu,
|
|
4919
5461
|
{
|
|
4920
5462
|
label,
|
|
4921
|
-
trigger: /* @__PURE__ */
|
|
5463
|
+
trigger: /* @__PURE__ */ React44.createElement(IconButton, { icon: cs.resolved === "dark" ? "moon" : "sun", label: label + ": " + names[cs.scheme] }),
|
|
4922
5464
|
items: SCHEMES.map(function(s) {
|
|
4923
5465
|
return {
|
|
4924
5466
|
label: names[s],
|
|
@@ -4933,10 +5475,10 @@ function ColorSchemeToggle(props) {
|
|
|
4933
5475
|
}
|
|
4934
5476
|
|
|
4935
5477
|
// src/Badge.tsx
|
|
4936
|
-
var
|
|
4937
|
-
var Badge =
|
|
5478
|
+
var React45 = __toESM(require("react"), 1);
|
|
5479
|
+
var Badge = React45.forwardRef(function Badge2(props, ref) {
|
|
4938
5480
|
const rest = omit(props, ["tone", "variant", "icon", "className", "children"]);
|
|
4939
|
-
return /* @__PURE__ */
|
|
5481
|
+
return /* @__PURE__ */ React45.createElement(
|
|
4940
5482
|
"span",
|
|
4941
5483
|
{
|
|
4942
5484
|
...rest,
|
|
@@ -4949,56 +5491,19 @@ var Badge = React40.forwardRef(function Badge2(props, ref) {
|
|
|
4949
5491
|
props.className
|
|
4950
5492
|
)
|
|
4951
5493
|
},
|
|
4952
|
-
props.icon ? /* @__PURE__ */
|
|
5494
|
+
props.icon ? /* @__PURE__ */ React45.createElement(Icon, { name: props.icon, size: 12 }) : null,
|
|
4953
5495
|
props.children
|
|
4954
5496
|
);
|
|
4955
5497
|
});
|
|
4956
5498
|
|
|
4957
|
-
// src/Tag.tsx
|
|
4958
|
-
var React41 = __toESM(require("react"), 1);
|
|
4959
|
-
var Tag = React41.forwardRef(function Tag2(props, ref) {
|
|
4960
|
-
const t = useStrings();
|
|
4961
|
-
const selectable = props.onClick != null || props.selected != null;
|
|
4962
|
-
const rest = omit(props, ["onRemove", "selected", "icon", "className", "children", "disabled", "removeLabel"]);
|
|
4963
|
-
const inner = [
|
|
4964
|
-
props.icon ? /* @__PURE__ */ React41.createElement(Icon, { key: "i", name: props.icon, size: 14 }) : null,
|
|
4965
|
-
/* @__PURE__ */ React41.createElement("span", { key: "t", className: "aura-tag__text" }, props.children)
|
|
4966
|
-
];
|
|
4967
|
-
if (selectable) {
|
|
4968
|
-
return /* @__PURE__ */ React41.createElement(
|
|
4969
|
-
"button",
|
|
4970
|
-
{
|
|
4971
|
-
...rest,
|
|
4972
|
-
ref,
|
|
4973
|
-
type: "button",
|
|
4974
|
-
"aria-pressed": !!props.selected,
|
|
4975
|
-
disabled: props.disabled,
|
|
4976
|
-
className: cx("aura-tag is-selectable", props.selected && "is-selected", props.className)
|
|
4977
|
-
},
|
|
4978
|
-
props.selected ? /* @__PURE__ */ React41.createElement(Icon, { name: "check", size: 14 }) : inner[0],
|
|
4979
|
-
inner[1]
|
|
4980
|
-
);
|
|
4981
|
-
}
|
|
4982
|
-
return /* @__PURE__ */ React41.createElement("span", { ...rest, ref, className: cx("aura-tag", props.disabled && "is-disabled", props.className) }, inner, props.onRemove && !props.disabled ? /* @__PURE__ */ React41.createElement(
|
|
4983
|
-
"button",
|
|
4984
|
-
{
|
|
4985
|
-
type: "button",
|
|
4986
|
-
className: "aura-tag__remove",
|
|
4987
|
-
"aria-label": props.removeLabel || t.remove(typeof props.children === "string" ? props.children : ""),
|
|
4988
|
-
onClick: props.onRemove
|
|
4989
|
-
},
|
|
4990
|
-
/* @__PURE__ */ React41.createElement(Icon, { name: "x", size: 12 })
|
|
4991
|
-
) : null);
|
|
4992
|
-
});
|
|
4993
|
-
|
|
4994
5499
|
// src/Progress.tsx
|
|
4995
|
-
var
|
|
4996
|
-
var Progress =
|
|
5500
|
+
var React46 = __toESM(require("react"), 1);
|
|
5501
|
+
var Progress = React46.forwardRef(function Progress2(props, ref) {
|
|
4997
5502
|
const auto = uid(), id = props.id || auto;
|
|
4998
5503
|
const max = props.max || 100, det = props.value != null;
|
|
4999
5504
|
const pct = det ? Math.max(0, Math.min(100, props.value / max * 100)) : 0;
|
|
5000
5505
|
const shown = props.valueLabel != null ? props.valueLabel : det ? Math.round(pct) + "%" : null;
|
|
5001
|
-
return /* @__PURE__ */
|
|
5506
|
+
return /* @__PURE__ */ React46.createElement(
|
|
5002
5507
|
"div",
|
|
5003
5508
|
{
|
|
5004
5509
|
ref,
|
|
@@ -5009,8 +5514,8 @@ var Progress = React42.forwardRef(function Progress2(props, ref) {
|
|
|
5009
5514
|
props.className
|
|
5010
5515
|
)
|
|
5011
5516
|
},
|
|
5012
|
-
props.label || props.showValue && shown ? /* @__PURE__ */
|
|
5013
|
-
/* @__PURE__ */
|
|
5517
|
+
props.label || props.showValue && shown ? /* @__PURE__ */ React46.createElement("div", { className: "aura-progress__head" }, props.label ? /* @__PURE__ */ React46.createElement("span", { className: "aura-progress__label", id: id + "-label" }, props.label) : /* @__PURE__ */ React46.createElement("span", null), props.showValue && shown ? /* @__PURE__ */ React46.createElement("span", { className: "aura-progress__value" }, shown) : null) : null,
|
|
5518
|
+
/* @__PURE__ */ React46.createElement(
|
|
5014
5519
|
"div",
|
|
5015
5520
|
{
|
|
5016
5521
|
className: cx("aura-progress__track", !det && "is-indeterminate"),
|
|
@@ -5022,21 +5527,21 @@ var Progress = React42.forwardRef(function Progress2(props, ref) {
|
|
|
5022
5527
|
"aria-valuenow": det ? props.value : void 0,
|
|
5023
5528
|
"aria-valuetext": det && props.valueLabel != null ? String(props.valueLabel) : void 0
|
|
5024
5529
|
},
|
|
5025
|
-
/* @__PURE__ */
|
|
5530
|
+
/* @__PURE__ */ React46.createElement("span", { className: "aura-progress__bar", style: det ? { width: pct + "%" } : void 0 })
|
|
5026
5531
|
),
|
|
5027
|
-
props.hint ? /* @__PURE__ */
|
|
5532
|
+
props.hint ? /* @__PURE__ */ React46.createElement("p", { className: "aura-progress__hint" }, props.hint) : null
|
|
5028
5533
|
);
|
|
5029
5534
|
});
|
|
5030
5535
|
|
|
5031
5536
|
// src/Skeleton.tsx
|
|
5032
|
-
var
|
|
5033
|
-
var Skeleton =
|
|
5537
|
+
var React47 = __toESM(require("react"), 1);
|
|
5538
|
+
var Skeleton = React47.forwardRef(function Skeleton2(props, ref) {
|
|
5034
5539
|
const v = props.variant || "text";
|
|
5035
5540
|
if (v === "text" && (props.lines || 1) > 1) {
|
|
5036
5541
|
const n2 = props.lines, rows = [];
|
|
5037
5542
|
for (let i = 0; i < n2; i++)
|
|
5038
|
-
rows.push(/* @__PURE__ */
|
|
5039
|
-
return /* @__PURE__ */
|
|
5543
|
+
rows.push(/* @__PURE__ */ React47.createElement("span", { key: i, className: "aura-skel aura-skel--text", style: { width: i === n2 - 1 ? "60%" : "100%" } }));
|
|
5544
|
+
return /* @__PURE__ */ React47.createElement(
|
|
5040
5545
|
"span",
|
|
5041
5546
|
{
|
|
5042
5547
|
ref,
|
|
@@ -5051,28 +5556,28 @@ var Skeleton = React43.forwardRef(function Skeleton2(props, ref) {
|
|
|
5051
5556
|
if (v === "circle") {
|
|
5052
5557
|
style.width = style.height = props.size || props.width || 40;
|
|
5053
5558
|
}
|
|
5054
|
-
return /* @__PURE__ */
|
|
5559
|
+
return /* @__PURE__ */ React47.createElement("span", { ref, "aria-hidden": true, className: cx("aura-skel", "aura-skel--" + v, props.className), style });
|
|
5055
5560
|
});
|
|
5056
5561
|
|
|
5057
5562
|
// src/EmptyState.tsx
|
|
5058
|
-
var
|
|
5059
|
-
var EmptyState =
|
|
5563
|
+
var React48 = __toESM(require("react"), 1);
|
|
5564
|
+
var EmptyState = React48.forwardRef(function EmptyState2(props, ref) {
|
|
5060
5565
|
const HT = "h" + (props.headingLevel || 3);
|
|
5061
|
-
return /* @__PURE__ */
|
|
5566
|
+
return /* @__PURE__ */ React48.createElement(
|
|
5062
5567
|
"div",
|
|
5063
5568
|
{
|
|
5064
5569
|
ref,
|
|
5065
5570
|
className: cx("aura-empty", props.size === "sm" && "is-sm", props.bordered && "is-bordered", props.className)
|
|
5066
5571
|
},
|
|
5067
|
-
/* @__PURE__ */
|
|
5068
|
-
/* @__PURE__ */
|
|
5069
|
-
props.description ? /* @__PURE__ */
|
|
5070
|
-
props.action ? /* @__PURE__ */
|
|
5572
|
+
/* @__PURE__ */ React48.createElement("span", { className: "aura-empty__icon", "aria-hidden": true }, /* @__PURE__ */ React48.createElement(Icon, { name: props.icon || "inbox", size: props.size === "sm" ? "md" : "lg" })),
|
|
5573
|
+
/* @__PURE__ */ React48.createElement(HT, { className: "aura-empty__title" }, props.title),
|
|
5574
|
+
props.description ? /* @__PURE__ */ React48.createElement("p", { className: "aura-empty__text" }, props.description) : null,
|
|
5575
|
+
props.action ? /* @__PURE__ */ React48.createElement("div", { className: "aura-empty__action" }, props.action) : null
|
|
5071
5576
|
);
|
|
5072
5577
|
});
|
|
5073
5578
|
|
|
5074
5579
|
// src/Pagination.tsx
|
|
5075
|
-
var
|
|
5580
|
+
var React49 = __toESM(require("react"), 1);
|
|
5076
5581
|
function pageList(page, count, sib) {
|
|
5077
5582
|
let out = [], lo = Math.max(2, page - sib), hi = Math.min(count - 1, page + sib);
|
|
5078
5583
|
if (page - sib <= 3) {
|
|
@@ -5092,7 +5597,7 @@ function pageList(page, count, sib) {
|
|
|
5092
5597
|
if (count > 1) out.push(count);
|
|
5093
5598
|
return out;
|
|
5094
5599
|
}
|
|
5095
|
-
var Pagination =
|
|
5600
|
+
var Pagination = React49.forwardRef(function Pagination2(props, ref) {
|
|
5096
5601
|
const t = useStrings();
|
|
5097
5602
|
const count = Math.max(1, props.pageCount || 1);
|
|
5098
5603
|
const st = useMaybeControlled(props.page, props.defaultPage || 1, props.onChange);
|
|
@@ -5111,7 +5616,7 @@ var Pagination = React45.forwardRef(function Pagination2(props, ref) {
|
|
|
5111
5616
|
},
|
|
5112
5617
|
extra
|
|
5113
5618
|
);
|
|
5114
|
-
return link ? /* @__PURE__ */
|
|
5619
|
+
return link ? /* @__PURE__ */ React49.createElement(
|
|
5115
5620
|
Link,
|
|
5116
5621
|
{
|
|
5117
5622
|
href: link(p),
|
|
@@ -5124,7 +5629,7 @@ var Pagination = React45.forwardRef(function Pagination2(props, ref) {
|
|
|
5124
5629
|
...common
|
|
5125
5630
|
},
|
|
5126
5631
|
label
|
|
5127
|
-
) : /* @__PURE__ */
|
|
5632
|
+
) : /* @__PURE__ */ React49.createElement(
|
|
5128
5633
|
"button",
|
|
5129
5634
|
{
|
|
5130
5635
|
type: "button",
|
|
@@ -5136,7 +5641,7 @@ var Pagination = React45.forwardRef(function Pagination2(props, ref) {
|
|
|
5136
5641
|
label
|
|
5137
5642
|
);
|
|
5138
5643
|
}
|
|
5139
|
-
return /* @__PURE__ */
|
|
5644
|
+
return /* @__PURE__ */ React49.createElement("nav", { ref, className: cx("aura-pagination", props.className), "aria-label": props.label || t.pagination }, /* @__PURE__ */ React49.createElement(
|
|
5140
5645
|
IconButton,
|
|
5141
5646
|
{
|
|
5142
5647
|
icon: "chevron-left",
|
|
@@ -5146,9 +5651,9 @@ var Pagination = React45.forwardRef(function Pagination2(props, ref) {
|
|
|
5146
5651
|
go(page - 1);
|
|
5147
5652
|
}
|
|
5148
5653
|
}
|
|
5149
|
-
), /* @__PURE__ */
|
|
5150
|
-
return typeof p === "number" ? /* @__PURE__ */
|
|
5151
|
-
})), /* @__PURE__ */
|
|
5654
|
+
), /* @__PURE__ */ React49.createElement("ol", { className: "aura-pagination__list" }, pageList(page, count, props.siblingCount == null ? 1 : props.siblingCount).map(function(p) {
|
|
5655
|
+
return typeof p === "number" ? /* @__PURE__ */ React49.createElement("li", { key: p }, item(p, p)) : /* @__PURE__ */ React49.createElement("li", { key: p, className: "aura-pagination__gap", "aria-hidden": true }, "\u2026");
|
|
5656
|
+
})), /* @__PURE__ */ React49.createElement("span", { className: "aura-pagination__compact", "aria-hidden": true }, t.page(page, count)), /* @__PURE__ */ React49.createElement(
|
|
5152
5657
|
IconButton,
|
|
5153
5658
|
{
|
|
5154
5659
|
icon: "chevron-right",
|
|
@@ -5162,8 +5667,8 @@ var Pagination = React45.forwardRef(function Pagination2(props, ref) {
|
|
|
5162
5667
|
});
|
|
5163
5668
|
|
|
5164
5669
|
// src/Accordion.tsx
|
|
5165
|
-
var
|
|
5166
|
-
var Accordion =
|
|
5670
|
+
var React50 = __toESM(require("react"), 1);
|
|
5671
|
+
var Accordion = React50.forwardRef(function Accordion2(props, ref) {
|
|
5167
5672
|
const auto = uid(), base = props.id || auto;
|
|
5168
5673
|
const multiple = props.type === "multiple";
|
|
5169
5674
|
const st = useMaybeControlled(
|
|
@@ -5173,7 +5678,7 @@ var Accordion = React46.forwardRef(function Accordion2(props, ref) {
|
|
|
5173
5678
|
);
|
|
5174
5679
|
const open = multiple ? st[0] || [] : st[0] ? [st[0]] : [];
|
|
5175
5680
|
const HT = "h" + (props.headingLevel || 3);
|
|
5176
|
-
const
|
|
5681
|
+
const items2 = props.items || [];
|
|
5177
5682
|
function toggle(id) {
|
|
5178
5683
|
const isOpen = open.indexOf(id) >= 0;
|
|
5179
5684
|
if (multiple)
|
|
@@ -5201,9 +5706,9 @@ var Accordion = React46.forwardRef(function Accordion2(props, ref) {
|
|
|
5201
5706
|
n2.focus();
|
|
5202
5707
|
}
|
|
5203
5708
|
}
|
|
5204
|
-
return /* @__PURE__ */
|
|
5709
|
+
return /* @__PURE__ */ React50.createElement("div", { ref, className: cx("aura-accordion", props.className), onKeyDown: onKey }, items2.map(function(it) {
|
|
5205
5710
|
const on = open.indexOf(it.id) >= 0, bid = base + "-btn-" + it.id, pid = base + "-panel-" + it.id;
|
|
5206
|
-
return /* @__PURE__ */
|
|
5711
|
+
return /* @__PURE__ */ React50.createElement("div", { key: it.id, className: cx("aura-accordion__item", on && "is-open") }, /* @__PURE__ */ React50.createElement(HT, { className: "aura-accordion__heading" }, /* @__PURE__ */ React50.createElement(
|
|
5207
5712
|
"button",
|
|
5208
5713
|
{
|
|
5209
5714
|
type: "button",
|
|
@@ -5215,16 +5720,16 @@ var Accordion = React46.forwardRef(function Accordion2(props, ref) {
|
|
|
5215
5720
|
toggle(it.id);
|
|
5216
5721
|
}
|
|
5217
5722
|
},
|
|
5218
|
-
it.icon ? /* @__PURE__ */
|
|
5219
|
-
/* @__PURE__ */
|
|
5220
|
-
/* @__PURE__ */
|
|
5221
|
-
)), /* @__PURE__ */
|
|
5723
|
+
it.icon ? /* @__PURE__ */ React50.createElement(Icon, { name: it.icon, className: "aura-accordion__lead" }) : null,
|
|
5724
|
+
/* @__PURE__ */ React50.createElement("span", { className: "aura-accordion__title" }, it.title, it.description ? /* @__PURE__ */ React50.createElement("span", { className: "aura-accordion__desc" }, it.description) : null),
|
|
5725
|
+
/* @__PURE__ */ React50.createElement(Icon, { name: "chevron-down", className: "aura-accordion__chevron" })
|
|
5726
|
+
)), /* @__PURE__ */ React50.createElement("div", { id: pid, role: "region", "aria-labelledby": bid, className: "aura-accordion__panel", hidden: !on }, it.content));
|
|
5222
5727
|
}));
|
|
5223
5728
|
});
|
|
5224
5729
|
|
|
5225
5730
|
// src/Popover.tsx
|
|
5226
|
-
var
|
|
5227
|
-
var
|
|
5731
|
+
var React51 = __toESM(require("react"), 1);
|
|
5732
|
+
var import_react_dom9 = require("react-dom");
|
|
5228
5733
|
function position(anchor, pop, placement) {
|
|
5229
5734
|
const r = anchor.getBoundingClientRect(), pw = pop.offsetWidth, ph = pop.offsetHeight, vw = window.innerWidth, vh = window.innerHeight, gap = 6;
|
|
5230
5735
|
let side = (placement || "bottom-start").split("-")[0], align = (placement || "bottom-start").split("-")[1] || "start";
|
|
@@ -5234,13 +5739,13 @@ function position(anchor, pop, placement) {
|
|
|
5234
5739
|
const left = align === "end" ? r.right - pw : align === "center" ? r.left + r.width / 2 - pw / 2 : r.left;
|
|
5235
5740
|
return { top: Math.max(8, top), left: Math.max(8, Math.min(left, vw - pw - 8)), side };
|
|
5236
5741
|
}
|
|
5237
|
-
var Popover =
|
|
5742
|
+
var Popover = React51.forwardRef(function Popover2(props, ref) {
|
|
5238
5743
|
const t = useStrings();
|
|
5239
5744
|
const auto = uid(), id = props.id || auto;
|
|
5240
5745
|
const st = useMaybeControlled(props.open, !!props.defaultOpen, props.onOpenChange);
|
|
5241
5746
|
const open = !!st[0];
|
|
5242
|
-
const wrap =
|
|
5243
|
-
const pos =
|
|
5747
|
+
const wrap = React51.useRef(null), pop = React51.useRef(null), popMerged = useMergedRef(ref, pop);
|
|
5748
|
+
const pos = React51.useState(null), mounted = useMounted();
|
|
5244
5749
|
function trigger() {
|
|
5245
5750
|
return wrap.current && (wrap.current.querySelector('button, [role="button"], a, input') || wrap.current.firstElementChild);
|
|
5246
5751
|
}
|
|
@@ -5267,7 +5772,7 @@ var Popover = React47.forwardRef(function Popover2(props, ref) {
|
|
|
5267
5772
|
},
|
|
5268
5773
|
[open, mounted, props.placement]
|
|
5269
5774
|
);
|
|
5270
|
-
|
|
5775
|
+
React51.useEffect(
|
|
5271
5776
|
function() {
|
|
5272
5777
|
if (!open || !mounted) return;
|
|
5273
5778
|
if (props.autoFocus !== false && pop.current) {
|
|
@@ -5286,9 +5791,9 @@ var Popover = React47.forwardRef(function Popover2(props, ref) {
|
|
|
5286
5791
|
},
|
|
5287
5792
|
[open, mounted]
|
|
5288
5793
|
);
|
|
5289
|
-
const child =
|
|
5290
|
-
const panel = open && mounted ? (0,
|
|
5291
|
-
/* @__PURE__ */
|
|
5794
|
+
const child = React51.Children.only(props.trigger);
|
|
5795
|
+
const panel = open && mounted ? (0, import_react_dom9.createPortal)(
|
|
5796
|
+
/* @__PURE__ */ React51.createElement(
|
|
5292
5797
|
"div",
|
|
5293
5798
|
{
|
|
5294
5799
|
ref: popMerged,
|
|
@@ -5310,7 +5815,7 @@ var Popover = React47.forwardRef(function Popover2(props, ref) {
|
|
|
5310
5815
|
} else trapTab(e, pop.current);
|
|
5311
5816
|
}
|
|
5312
5817
|
},
|
|
5313
|
-
props.title ? /* @__PURE__ */
|
|
5818
|
+
props.title ? /* @__PURE__ */ React51.createElement("div", { className: "aura-popover__head" }, /* @__PURE__ */ React51.createElement("p", { className: "aura-popover__title", id: id + "-title" }, props.title), /* @__PURE__ */ React51.createElement(
|
|
5314
5819
|
IconButton,
|
|
5315
5820
|
{
|
|
5316
5821
|
icon: "x",
|
|
@@ -5320,7 +5825,7 @@ var Popover = React47.forwardRef(function Popover2(props, ref) {
|
|
|
5320
5825
|
}
|
|
5321
5826
|
}
|
|
5322
5827
|
)) : null,
|
|
5323
|
-
/* @__PURE__ */
|
|
5828
|
+
/* @__PURE__ */ React51.createElement("div", { className: "aura-popover__body" }, typeof props.children === "function" ? props.children({
|
|
5324
5829
|
close: function() {
|
|
5325
5830
|
close(true);
|
|
5326
5831
|
}
|
|
@@ -5328,7 +5833,7 @@ var Popover = React47.forwardRef(function Popover2(props, ref) {
|
|
|
5328
5833
|
),
|
|
5329
5834
|
document.body
|
|
5330
5835
|
) : null;
|
|
5331
|
-
return /* @__PURE__ */
|
|
5836
|
+
return /* @__PURE__ */ React51.createElement("span", { ref: wrap, className: "aura-popover-anchor" }, React51.cloneElement(child, {
|
|
5332
5837
|
onClick: function(e) {
|
|
5333
5838
|
if (child.props.onClick) child.props.onClick(e);
|
|
5334
5839
|
st[1](!open);
|
|
@@ -5340,7 +5845,7 @@ var Popover = React47.forwardRef(function Popover2(props, ref) {
|
|
|
5340
5845
|
});
|
|
5341
5846
|
|
|
5342
5847
|
// src/NumberField.tsx
|
|
5343
|
-
var
|
|
5848
|
+
var React52 = __toESM(require("react"), 1);
|
|
5344
5849
|
function decimalsOf(n2) {
|
|
5345
5850
|
const s = String(n2);
|
|
5346
5851
|
const i = s.indexOf(".");
|
|
@@ -5351,7 +5856,7 @@ function parse(text) {
|
|
|
5351
5856
|
if (!/^-?(\d+\.?\d*|\.\d+)$/.test(s)) return NaN;
|
|
5352
5857
|
return Number(s);
|
|
5353
5858
|
}
|
|
5354
|
-
var NumberField =
|
|
5859
|
+
var NumberField = React52.forwardRef(function NumberField2(props, ref) {
|
|
5355
5860
|
const t = useStrings();
|
|
5356
5861
|
const auto = uid(), id = props.id || auto;
|
|
5357
5862
|
const step = props.step || 1;
|
|
@@ -5362,7 +5867,7 @@ var NumberField = React48.forwardRef(function NumberField2(props, ref) {
|
|
|
5362
5867
|
props.onChange
|
|
5363
5868
|
);
|
|
5364
5869
|
const value = st[0], setValue = st[1];
|
|
5365
|
-
const draftState =
|
|
5870
|
+
const draftState = React52.useState(null), draft = draftState[0], setDraft = draftState[1];
|
|
5366
5871
|
function fmt2(n2) {
|
|
5367
5872
|
if (n2 == null || isNaN(n2)) return "";
|
|
5368
5873
|
return n2.toLocaleString("en", { minimumFractionDigits: decimals, maximumFractionDigits: decimals });
|
|
@@ -5411,7 +5916,7 @@ var NumberField = React48.forwardRef(function NumberField2(props, ref) {
|
|
|
5411
5916
|
};
|
|
5412
5917
|
const valueText = value == null ? void 0 : [affixText(props.prefix), fmt2(value), affixText(props.suffix)].join(" ").trim();
|
|
5413
5918
|
const stepper = props.stepper !== false && !props.readOnly;
|
|
5414
|
-
return /* @__PURE__ */
|
|
5919
|
+
return /* @__PURE__ */ React52.createElement(
|
|
5415
5920
|
Field,
|
|
5416
5921
|
{
|
|
5417
5922
|
id,
|
|
@@ -5423,7 +5928,7 @@ var NumberField = React48.forwardRef(function NumberField2(props, ref) {
|
|
|
5423
5928
|
disabled: props.disabled,
|
|
5424
5929
|
className: props.className
|
|
5425
5930
|
},
|
|
5426
|
-
/* @__PURE__ */
|
|
5931
|
+
/* @__PURE__ */ React52.createElement("div", { className: cx("aura-input aura-number", stepper && "has-stepper") }, props.prefix != null ? /* @__PURE__ */ React52.createElement("span", { className: "aura-number__affix", "aria-hidden": true }, props.prefix) : null, /* @__PURE__ */ React52.createElement(
|
|
5427
5932
|
"input",
|
|
5428
5933
|
{
|
|
5429
5934
|
ref,
|
|
@@ -5470,7 +5975,7 @@ var NumberField = React48.forwardRef(function NumberField2(props, ref) {
|
|
|
5470
5975
|
},
|
|
5471
5976
|
onKeyDown
|
|
5472
5977
|
}
|
|
5473
|
-
), props.suffix != null ? /* @__PURE__ */
|
|
5978
|
+
), props.suffix != null ? /* @__PURE__ */ React52.createElement("span", { className: "aura-number__affix", "aria-hidden": true }, props.suffix) : null, stepper ? /* @__PURE__ */ React52.createElement("span", { className: "aura-number__steps" }, /* @__PURE__ */ React52.createElement(
|
|
5474
5979
|
"button",
|
|
5475
5980
|
{
|
|
5476
5981
|
type: "button",
|
|
@@ -5486,8 +5991,8 @@ var NumberField = React48.forwardRef(function NumberField2(props, ref) {
|
|
|
5486
5991
|
nudge(-step);
|
|
5487
5992
|
}
|
|
5488
5993
|
},
|
|
5489
|
-
/* @__PURE__ */
|
|
5490
|
-
), /* @__PURE__ */
|
|
5994
|
+
/* @__PURE__ */ React52.createElement(Icon, { name: "minus" })
|
|
5995
|
+
), /* @__PURE__ */ React52.createElement(
|
|
5491
5996
|
"button",
|
|
5492
5997
|
{
|
|
5493
5998
|
type: "button",
|
|
@@ -5503,14 +6008,14 @@ var NumberField = React48.forwardRef(function NumberField2(props, ref) {
|
|
|
5503
6008
|
nudge(step);
|
|
5504
6009
|
}
|
|
5505
6010
|
},
|
|
5506
|
-
/* @__PURE__ */
|
|
6011
|
+
/* @__PURE__ */ React52.createElement(Icon, { name: "plus" })
|
|
5507
6012
|
)) : null)
|
|
5508
6013
|
);
|
|
5509
6014
|
});
|
|
5510
6015
|
|
|
5511
6016
|
// src/Stepper.tsx
|
|
5512
|
-
var
|
|
5513
|
-
var Stepper =
|
|
6017
|
+
var React53 = __toESM(require("react"), 1);
|
|
6018
|
+
var Stepper = React53.forwardRef(function Stepper2(props, ref) {
|
|
5514
6019
|
const t = useStrings();
|
|
5515
6020
|
const steps = props.steps || [];
|
|
5516
6021
|
let at = -1;
|
|
@@ -5520,26 +6025,26 @@ var Stepper = React49.forwardRef(function Stepper2(props, ref) {
|
|
|
5520
6025
|
if (at < 0) at = 0;
|
|
5521
6026
|
const vertical = props.orientation === "vertical";
|
|
5522
6027
|
const cur = steps[at];
|
|
5523
|
-
return /* @__PURE__ */
|
|
6028
|
+
return /* @__PURE__ */ React53.createElement(
|
|
5524
6029
|
"nav",
|
|
5525
6030
|
{
|
|
5526
6031
|
ref,
|
|
5527
6032
|
"aria-label": props.label,
|
|
5528
6033
|
className: cx("aura-stepper", vertical ? "aura-stepper--vertical" : "aura-stepper--horizontal", props.className)
|
|
5529
6034
|
},
|
|
5530
|
-
/* @__PURE__ */
|
|
6035
|
+
/* @__PURE__ */ React53.createElement("ol", { className: "aura-stepper__list" }, steps.map(function(s, i) {
|
|
5531
6036
|
const state = i < at ? "done" : i === at ? "current" : "upcoming";
|
|
5532
|
-
const marker = /* @__PURE__ */
|
|
5533
|
-
const text = /* @__PURE__ */
|
|
6037
|
+
const marker = /* @__PURE__ */ React53.createElement("span", { className: "aura-stepper__marker", "aria-hidden": true }, state === "done" ? /* @__PURE__ */ React53.createElement(Icon, { name: "check" }) : i + 1);
|
|
6038
|
+
const text = /* @__PURE__ */ React53.createElement("span", { className: "aura-stepper__text" }, /* @__PURE__ */ React53.createElement("span", { className: "aura-stepper__label" }, s.label, state === "done" ? /* @__PURE__ */ React53.createElement("span", { className: "aura-sr-only" }, ", " + t.stepDone) : null), s.description ? /* @__PURE__ */ React53.createElement("span", { className: "aura-stepper__desc" }, s.description) : null);
|
|
5534
6039
|
const clickable = state === "done" && !!props.onStepClick;
|
|
5535
|
-
return /* @__PURE__ */
|
|
6040
|
+
return /* @__PURE__ */ React53.createElement(
|
|
5536
6041
|
"li",
|
|
5537
6042
|
{
|
|
5538
6043
|
key: s.id,
|
|
5539
6044
|
className: cx("aura-stepper__item", "is-" + state),
|
|
5540
6045
|
"aria-current": state === "current" ? "step" : void 0
|
|
5541
6046
|
},
|
|
5542
|
-
clickable ? /* @__PURE__ */
|
|
6047
|
+
clickable ? /* @__PURE__ */ React53.createElement(
|
|
5543
6048
|
"button",
|
|
5544
6049
|
{
|
|
5545
6050
|
type: "button",
|
|
@@ -5550,19 +6055,19 @@ var Stepper = React49.forwardRef(function Stepper2(props, ref) {
|
|
|
5550
6055
|
},
|
|
5551
6056
|
marker,
|
|
5552
6057
|
text
|
|
5553
|
-
) : /* @__PURE__ */
|
|
6058
|
+
) : /* @__PURE__ */ React53.createElement("span", { className: "aura-stepper__step" }, marker, text)
|
|
5554
6059
|
);
|
|
5555
6060
|
})),
|
|
5556
|
-
!vertical && cur ? /* @__PURE__ */
|
|
6061
|
+
!vertical && cur ? /* @__PURE__ */ React53.createElement("p", { className: "aura-stepper__compact", "aria-hidden": true }, /* @__PURE__ */ React53.createElement("span", { className: "aura-stepper__count" }, t.stepOf(at + 1, steps.length)), /* @__PURE__ */ React53.createElement("span", { className: "aura-stepper__compact-label" }, cur.label)) : null
|
|
5557
6062
|
);
|
|
5558
6063
|
});
|
|
5559
6064
|
|
|
5560
6065
|
// src/SegmentedControl.tsx
|
|
5561
|
-
var
|
|
6066
|
+
var React54 = __toESM(require("react"), 1);
|
|
5562
6067
|
function toOpt2(o) {
|
|
5563
6068
|
return typeof o === "object" ? o : { value: o, label: o };
|
|
5564
6069
|
}
|
|
5565
|
-
var SegmentedControl =
|
|
6070
|
+
var SegmentedControl = React54.forwardRef(
|
|
5566
6071
|
function SegmentedControl2(props, ref) {
|
|
5567
6072
|
const options = (props.options || []).map(toOpt2);
|
|
5568
6073
|
const firstEnabled = options.filter(function(o) {
|
|
@@ -5575,7 +6080,7 @@ var SegmentedControl = React50.forwardRef(
|
|
|
5575
6080
|
);
|
|
5576
6081
|
const value = st[0], setValue = st[1];
|
|
5577
6082
|
const auto = uid(), id = props.id || auto;
|
|
5578
|
-
const refs =
|
|
6083
|
+
const refs = React54.useRef([]);
|
|
5579
6084
|
const selIdx = options.findIndex(function(o) {
|
|
5580
6085
|
return o.value === value;
|
|
5581
6086
|
});
|
|
@@ -5608,7 +6113,7 @@ var SegmentedControl = React50.forwardRef(
|
|
|
5608
6113
|
move(options.length, -1);
|
|
5609
6114
|
}
|
|
5610
6115
|
}
|
|
5611
|
-
return /* @__PURE__ */
|
|
6116
|
+
return /* @__PURE__ */ React54.createElement(
|
|
5612
6117
|
"div",
|
|
5613
6118
|
{
|
|
5614
6119
|
ref,
|
|
@@ -5627,7 +6132,7 @@ var SegmentedControl = React50.forwardRef(
|
|
|
5627
6132
|
options.map(function(o, i) {
|
|
5628
6133
|
const on = o.value === value;
|
|
5629
6134
|
const off = props.disabled || o.disabled;
|
|
5630
|
-
return /* @__PURE__ */
|
|
6135
|
+
return /* @__PURE__ */ React54.createElement(
|
|
5631
6136
|
"button",
|
|
5632
6137
|
{
|
|
5633
6138
|
key: o.value,
|
|
@@ -5649,8 +6154,8 @@ var SegmentedControl = React50.forwardRef(
|
|
|
5649
6154
|
onKeyDown(e, i);
|
|
5650
6155
|
}
|
|
5651
6156
|
},
|
|
5652
|
-
o.icon ? /* @__PURE__ */
|
|
5653
|
-
o.iconOnly ? null : /* @__PURE__ */
|
|
6157
|
+
o.icon ? /* @__PURE__ */ React54.createElement(Icon, { name: o.icon }) : null,
|
|
6158
|
+
o.iconOnly ? null : /* @__PURE__ */ React54.createElement("span", null, o.label)
|
|
5654
6159
|
);
|
|
5655
6160
|
})
|
|
5656
6161
|
);
|