@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/aura.bundle.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @ds-bundle: {"format":4,"namespace":"Aura","components":[{"name":"Icon"},{"name":"Button"},{"name":"IconButton"},{"name":"Menu"},{"name":"DropdownMenu"},{"name":"Checkbox"},{"name":"StatusPill"},{"name":"TextField"},{"name":"Textarea"},{"name":"Select"},{"name":"RadioGroup"},{"name":"Switch"},{"name":"Combobox"},{"name":"DatePicker"},{"name":"DateRangePicker"},{"name":"Calendar"},{"name":"Alert"},{"name":"Toaster"},{"name":"Tooltip"},{"name":"Dialog"},{"name":"Drawer"},{"name":"DataTable"},{"name":"Card"},{"name":"Tabs"},{"name":"SideNav"},{"name":"Breadcrumb"},{"name":"Avatar"},{"name":"Stack"},{"name":"Grid"},{"name":"Container"},{"name":"AppShell"},{"name":"Surface"},{"name":"Stat"},{"name":"TimePicker"},{"name":"FileUpload"},{"name":"ColorSchemeScript"},{"name":"ColorSchemeToggle"},{"name":"Badge"},{"name":"Tag"},{"name":"Progress"},{"name":"Skeleton"},{"name":"EmptyState"},{"name":"Pagination"},{"name":"Accordion"},{"name":"Popover"},{"name":"NumberField"},{"name":"Stepper"},{"name":"SegmentedControl"}]} */
|
|
1
|
+
/* @ds-bundle: {"format":4,"namespace":"Aura","components":[{"name":"Icon"},{"name":"Button"},{"name":"IconButton"},{"name":"Menu"},{"name":"DropdownMenu"},{"name":"Checkbox"},{"name":"StatusPill"},{"name":"TextField"},{"name":"Textarea"},{"name":"Select"},{"name":"RadioGroup"},{"name":"Switch"},{"name":"Combobox"},{"name":"DatePicker"},{"name":"DateRangePicker"},{"name":"Calendar"},{"name":"Alert"},{"name":"Toaster"},{"name":"PasswordField"},{"name":"FormErrorSummary"},{"name":"FilterBar"},{"name":"Command"},{"name":"Tooltip"},{"name":"Dialog"},{"name":"Drawer"},{"name":"DataTable"},{"name":"Card"},{"name":"Tabs"},{"name":"SideNav"},{"name":"Breadcrumb"},{"name":"Avatar"},{"name":"Stack"},{"name":"Grid"},{"name":"Container"},{"name":"AppShell"},{"name":"Surface"},{"name":"Stat"},{"name":"TimePicker"},{"name":"FileUpload"},{"name":"ColorSchemeScript"},{"name":"ColorSchemeToggle"},{"name":"Badge"},{"name":"Tag"},{"name":"Progress"},{"name":"Skeleton"},{"name":"EmptyState"},{"name":"Pagination"},{"name":"Accordion"},{"name":"Popover"},{"name":"NumberField"},{"name":"Stepper"},{"name":"SegmentedControl"}]} */
|
|
2
2
|
window.Aura = (() => {
|
|
3
3
|
var __create = Object.create;
|
|
4
4
|
var __defProp = Object.defineProperty;
|
|
@@ -64,6 +64,7 @@ window.Aura = (() => {
|
|
|
64
64
|
ColorSchemeScript: () => ColorSchemeScript,
|
|
65
65
|
ColorSchemeToggle: () => ColorSchemeToggle,
|
|
66
66
|
Combobox: () => Combobox,
|
|
67
|
+
Command: () => Command,
|
|
67
68
|
Container: () => Container,
|
|
68
69
|
DataTable: () => DataTable,
|
|
69
70
|
DatePicker: () => DatePicker,
|
|
@@ -74,6 +75,8 @@ window.Aura = (() => {
|
|
|
74
75
|
EmptyState: () => EmptyState,
|
|
75
76
|
Field: () => Field,
|
|
76
77
|
FileUpload: () => FileUpload,
|
|
78
|
+
FilterBar: () => FilterBar,
|
|
79
|
+
FormErrorSummary: () => FormErrorSummary,
|
|
77
80
|
Grid: () => Grid,
|
|
78
81
|
ICONS: () => ICONS,
|
|
79
82
|
Icon: () => Icon,
|
|
@@ -81,6 +84,7 @@ window.Aura = (() => {
|
|
|
81
84
|
Menu: () => Menu,
|
|
82
85
|
NumberField: () => NumberField,
|
|
83
86
|
Pagination: () => Pagination,
|
|
87
|
+
PasswordField: () => PasswordField,
|
|
84
88
|
Popover: () => Popover,
|
|
85
89
|
Progress: () => Progress,
|
|
86
90
|
RadioGroup: () => RadioGroup,
|
|
@@ -273,6 +277,19 @@ window.Aura = (() => {
|
|
|
273
277
|
close: "Close",
|
|
274
278
|
dismiss: "Dismiss",
|
|
275
279
|
dismissToast: "Dismiss notification",
|
|
280
|
+
showPassword: "Show password",
|
|
281
|
+
filters: "Filters",
|
|
282
|
+
search: "Search",
|
|
283
|
+
clearFilters: "Clear all",
|
|
284
|
+
results: function(n2) {
|
|
285
|
+
return n2 === 1 ? "1 result" : n2.toLocaleString("en") + " results";
|
|
286
|
+
},
|
|
287
|
+
commandMenu: "Command menu",
|
|
288
|
+
commandPlaceholder: "Type a command or search\u2026",
|
|
289
|
+
commandHint: "\u2191\u2193 to move \xB7 Enter to open \xB7 Esc to close",
|
|
290
|
+
errorSummary: function(n2) {
|
|
291
|
+
return n2 === 1 ? "Fix 1 field to continue" : "Fix " + n2 + " fields to continue";
|
|
292
|
+
},
|
|
276
293
|
notifications: "Notifications",
|
|
277
294
|
mainNav: "Main",
|
|
278
295
|
breadcrumb: "Breadcrumb",
|
|
@@ -371,6 +388,19 @@ window.Aura = (() => {
|
|
|
371
388
|
close: "\u0E1B\u0E34\u0E14",
|
|
372
389
|
dismiss: "\u0E1B\u0E34\u0E14",
|
|
373
390
|
dismissToast: "\u0E1B\u0E34\u0E14\u0E01\u0E32\u0E23\u0E41\u0E08\u0E49\u0E07\u0E40\u0E15\u0E37\u0E2D\u0E19",
|
|
391
|
+
showPassword: "\u0E41\u0E2A\u0E14\u0E07\u0E23\u0E2B\u0E31\u0E2A\u0E1C\u0E48\u0E32\u0E19",
|
|
392
|
+
filters: "\u0E15\u0E31\u0E27\u0E01\u0E23\u0E2D\u0E07",
|
|
393
|
+
search: "\u0E04\u0E49\u0E19\u0E2B\u0E32",
|
|
394
|
+
clearFilters: "\u0E25\u0E49\u0E32\u0E07\u0E17\u0E31\u0E49\u0E07\u0E2B\u0E21\u0E14",
|
|
395
|
+
results: function(n2) {
|
|
396
|
+
return n2.toLocaleString("en") + " \u0E23\u0E32\u0E22\u0E01\u0E32\u0E23";
|
|
397
|
+
},
|
|
398
|
+
commandMenu: "\u0E40\u0E21\u0E19\u0E39\u0E04\u0E33\u0E2A\u0E31\u0E48\u0E07",
|
|
399
|
+
commandPlaceholder: "\u0E1E\u0E34\u0E21\u0E1E\u0E4C\u0E04\u0E33\u0E2A\u0E31\u0E48\u0E07\u0E2B\u0E23\u0E37\u0E2D\u0E04\u0E49\u0E19\u0E2B\u0E32\u2026",
|
|
400
|
+
commandHint: "\u2191\u2193 \u0E40\u0E25\u0E37\u0E48\u0E2D\u0E19 \xB7 Enter \u0E40\u0E1B\u0E34\u0E14 \xB7 Esc \u0E1B\u0E34\u0E14",
|
|
401
|
+
errorSummary: function(n2) {
|
|
402
|
+
return "\u0E41\u0E01\u0E49\u0E44\u0E02 " + n2 + " \u0E0A\u0E48\u0E2D\u0E07\u0E01\u0E48\u0E2D\u0E19\u0E44\u0E1B\u0E15\u0E48\u0E2D";
|
|
403
|
+
},
|
|
374
404
|
notifications: "\u0E01\u0E32\u0E23\u0E41\u0E08\u0E49\u0E07\u0E40\u0E15\u0E37\u0E2D\u0E19",
|
|
375
405
|
mainNav: "\u0E40\u0E21\u0E19\u0E39\u0E2B\u0E25\u0E31\u0E01",
|
|
376
406
|
breadcrumb: "\u0E40\u0E2A\u0E49\u0E19\u0E17\u0E32\u0E07",
|
|
@@ -469,6 +499,19 @@ window.Aura = (() => {
|
|
|
469
499
|
close: "St\xE4ng",
|
|
470
500
|
dismiss: "St\xE4ng",
|
|
471
501
|
dismissToast: "St\xE4ng aviseringen",
|
|
502
|
+
showPassword: "Visa l\xF6senord",
|
|
503
|
+
filters: "Filter",
|
|
504
|
+
search: "S\xF6k",
|
|
505
|
+
clearFilters: "Rensa alla",
|
|
506
|
+
results: function(n2) {
|
|
507
|
+
return n2 === 1 ? "1 tr\xE4ff" : n2.toLocaleString("sv-SE") + " tr\xE4ffar";
|
|
508
|
+
},
|
|
509
|
+
commandMenu: "Kommandomeny",
|
|
510
|
+
commandPlaceholder: "Skriv ett kommando eller s\xF6k\u2026",
|
|
511
|
+
commandHint: "\u2191\u2193 flytta \xB7 Enter \xF6ppna \xB7 Esc st\xE4ng",
|
|
512
|
+
errorSummary: function(n2) {
|
|
513
|
+
return n2 === 1 ? "R\xE4tta 1 f\xE4lt f\xF6r att forts\xE4tta" : "R\xE4tta " + n2 + " f\xE4lt f\xF6r att forts\xE4tta";
|
|
514
|
+
},
|
|
472
515
|
notifications: "Aviseringar",
|
|
473
516
|
mainNav: "Huvudmeny",
|
|
474
517
|
breadcrumb: "Br\xF6dsmulor",
|
|
@@ -695,7 +738,7 @@ window.Aura = (() => {
|
|
|
695
738
|
const own = React6.useRef(null), merged = useMergedRef(ref, own);
|
|
696
739
|
const posState = React6.useState(null);
|
|
697
740
|
const pos = posState[0], setPos = posState[1];
|
|
698
|
-
const
|
|
741
|
+
const items2 = props.items || [];
|
|
699
742
|
const mounted = useMounted();
|
|
700
743
|
useIsoLayoutEffect(
|
|
701
744
|
function() {
|
|
@@ -767,7 +810,7 @@ window.Aura = (() => {
|
|
|
767
810
|
onKeyDown,
|
|
768
811
|
style: { top: pos ? pos.top : -9999, left: pos ? pos.left : -9999 }
|
|
769
812
|
},
|
|
770
|
-
|
|
813
|
+
items2.map(function(it, i) {
|
|
771
814
|
if (it.separator) return /* @__PURE__ */ React6.createElement("div", { key: "s" + i, role: "separator", className: "aura-menu__sep" });
|
|
772
815
|
const isCheck = it.checked !== void 0;
|
|
773
816
|
return /* @__PURE__ */ React6.createElement(
|
|
@@ -2087,7 +2130,7 @@ window.Aura = (() => {
|
|
|
2087
2130
|
const boxRef = React17.useRef(null), inputRef = React17.useRef(null), inputMerged = useMergedRef(ref, inputRef);
|
|
2088
2131
|
const pop = useCalendarPopover(boxRef);
|
|
2089
2132
|
const o = { locale, calendar };
|
|
2090
|
-
function
|
|
2133
|
+
function show2(r) {
|
|
2091
2134
|
if (!r.start) return "";
|
|
2092
2135
|
if (!r.end) return formatDate(r.start, o) + " \u2013";
|
|
2093
2136
|
return formatDate(r.start, o) + " \u2013 " + formatDate(r.end, o);
|
|
@@ -2169,7 +2212,7 @@ window.Aura = (() => {
|
|
|
2169
2212
|
boxRef,
|
|
2170
2213
|
inputRef: inputMerged,
|
|
2171
2214
|
open: pop.open,
|
|
2172
|
-
display:
|
|
2215
|
+
display: show2(v),
|
|
2173
2216
|
placeholder: props.placeholder || dt.rangePlaceholder,
|
|
2174
2217
|
hasValue: v.start != null,
|
|
2175
2218
|
clearable: props.clearable,
|
|
@@ -2227,15 +2270,40 @@ window.Aura = (() => {
|
|
|
2227
2270
|
f(toastState.list.slice());
|
|
2228
2271
|
});
|
|
2229
2272
|
}
|
|
2230
|
-
function
|
|
2231
|
-
if (typeof opts === "string") opts = { title: opts };
|
|
2273
|
+
function show(opts) {
|
|
2232
2274
|
const id = opts.id || "t" + ++toastState.n;
|
|
2233
|
-
|
|
2234
|
-
return t.id
|
|
2235
|
-
})
|
|
2275
|
+
const at = toastState.list.findIndex(function(t) {
|
|
2276
|
+
return t.id === id;
|
|
2277
|
+
});
|
|
2278
|
+
const entry = Object.assign({ tone: "info" }, opts, {
|
|
2279
|
+
id,
|
|
2280
|
+
loading: !!opts.loading,
|
|
2281
|
+
rev: at >= 0 ? toastState.list[at].rev + 1 : 0
|
|
2282
|
+
});
|
|
2283
|
+
if (at >= 0) {
|
|
2284
|
+
toastState.list = toastState.list.slice();
|
|
2285
|
+
toastState.list[at] = entry;
|
|
2286
|
+
} else toastState.list = toastState.list.concat([entry]).slice(-3);
|
|
2236
2287
|
emitToasts();
|
|
2237
2288
|
return id;
|
|
2238
2289
|
}
|
|
2290
|
+
function toast(opts) {
|
|
2291
|
+
return show(typeof opts === "string" ? { title: opts } : opts);
|
|
2292
|
+
}
|
|
2293
|
+
function shorthand(tone2) {
|
|
2294
|
+
return function(title, opts) {
|
|
2295
|
+
return show(Object.assign({}, opts, { title, tone: tone2 }));
|
|
2296
|
+
};
|
|
2297
|
+
}
|
|
2298
|
+
toast.success = shorthand("success");
|
|
2299
|
+
toast.error = shorthand("danger");
|
|
2300
|
+
toast.warning = shorthand("warning");
|
|
2301
|
+
toast.info = shorthand("info");
|
|
2302
|
+
toast.loading = function(title, opts) {
|
|
2303
|
+
return show(
|
|
2304
|
+
Object.assign({}, opts, { title, tone: "info", loading: true, duration: Infinity })
|
|
2305
|
+
);
|
|
2306
|
+
};
|
|
2239
2307
|
toast.dismiss = function(id) {
|
|
2240
2308
|
toastState.list = toastState.list.filter(function(t) {
|
|
2241
2309
|
return t.id !== id;
|
|
@@ -2245,35 +2313,56 @@ window.Aura = (() => {
|
|
|
2245
2313
|
function ToastItem(props) {
|
|
2246
2314
|
const str = useStrings();
|
|
2247
2315
|
const t = props.toast, timer = React19.useRef(null), left = React19.useRef(t.duration || 5e3), since = React19.useRef(0);
|
|
2316
|
+
const hover = React19.useRef(false);
|
|
2248
2317
|
function start() {
|
|
2249
|
-
if (left.current === Infinity) return;
|
|
2318
|
+
if (left.current === Infinity || timer.current) return;
|
|
2250
2319
|
since.current = Date.now();
|
|
2251
2320
|
timer.current = setTimeout(function() {
|
|
2252
2321
|
toast.dismiss(t.id);
|
|
2253
2322
|
}, left.current);
|
|
2254
2323
|
}
|
|
2324
|
+
function resume() {
|
|
2325
|
+
hover.current = false;
|
|
2326
|
+
start();
|
|
2327
|
+
}
|
|
2255
2328
|
function pause() {
|
|
2329
|
+
hover.current = true;
|
|
2256
2330
|
if (timer.current) {
|
|
2257
2331
|
clearTimeout(timer.current);
|
|
2258
2332
|
timer.current = null;
|
|
2259
2333
|
left.current -= Date.now() - since.current;
|
|
2260
2334
|
}
|
|
2261
2335
|
}
|
|
2262
|
-
React19.useEffect(
|
|
2263
|
-
|
|
2264
|
-
|
|
2265
|
-
|
|
2336
|
+
React19.useEffect(
|
|
2337
|
+
function() {
|
|
2338
|
+
if (timer.current) clearTimeout(timer.current);
|
|
2339
|
+
timer.current = null;
|
|
2340
|
+
left.current = t.duration || 5e3;
|
|
2341
|
+
if (!hover.current) start();
|
|
2342
|
+
return function() {
|
|
2343
|
+
if (timer.current) clearTimeout(timer.current);
|
|
2344
|
+
};
|
|
2345
|
+
},
|
|
2346
|
+
[t.rev]
|
|
2347
|
+
);
|
|
2266
2348
|
return /* @__PURE__ */ React19.createElement(
|
|
2267
2349
|
"div",
|
|
2268
2350
|
{
|
|
2269
|
-
className: cx("aura-toast", "aura-toast--" + t.tone),
|
|
2351
|
+
className: cx("aura-toast", "aura-toast--" + t.tone, t.loading && "is-loading"),
|
|
2270
2352
|
role: t.tone === "danger" ? "alert" : "status",
|
|
2353
|
+
"aria-busy": t.loading || void 0,
|
|
2271
2354
|
onMouseEnter: pause,
|
|
2272
|
-
onMouseLeave:
|
|
2355
|
+
onMouseLeave: resume,
|
|
2273
2356
|
onFocus: pause,
|
|
2274
|
-
onBlur:
|
|
2357
|
+
onBlur: resume
|
|
2275
2358
|
},
|
|
2276
|
-
/* @__PURE__ */ React19.createElement(
|
|
2359
|
+
/* @__PURE__ */ React19.createElement(
|
|
2360
|
+
Icon,
|
|
2361
|
+
{
|
|
2362
|
+
name: t.loading ? "loader-circle" : ALERT_ICON[t.tone] || "info",
|
|
2363
|
+
className: cx("aura-toast__icon", t.loading && "aura-spin")
|
|
2364
|
+
}
|
|
2365
|
+
),
|
|
2277
2366
|
/* @__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),
|
|
2278
2367
|
t.action ? /* @__PURE__ */ React19.createElement(
|
|
2279
2368
|
"button",
|
|
@@ -2330,14 +2419,515 @@ window.Aura = (() => {
|
|
|
2330
2419
|
);
|
|
2331
2420
|
}
|
|
2332
2421
|
|
|
2333
|
-
// src/
|
|
2422
|
+
// src/PasswordField.tsx
|
|
2334
2423
|
var React20 = __toESM(require_react(), 1);
|
|
2424
|
+
var PasswordField = React20.forwardRef(function PasswordField2(props, ref) {
|
|
2425
|
+
const t = useStrings();
|
|
2426
|
+
const shown = React20.useState(false);
|
|
2427
|
+
const rest = omit(props, ["toggle", "className"]);
|
|
2428
|
+
return /* @__PURE__ */ React20.createElement(
|
|
2429
|
+
TextField,
|
|
2430
|
+
{
|
|
2431
|
+
autoComplete: "current-password",
|
|
2432
|
+
...rest,
|
|
2433
|
+
ref,
|
|
2434
|
+
type: shown[0] ? "text" : "password",
|
|
2435
|
+
spellCheck: false,
|
|
2436
|
+
autoCapitalize: "none",
|
|
2437
|
+
className: cx("aura-password", props.className),
|
|
2438
|
+
suffix: props.toggle === false ? void 0 : /* @__PURE__ */ React20.createElement(
|
|
2439
|
+
IconButton,
|
|
2440
|
+
{
|
|
2441
|
+
icon: shown[0] ? "eye-off" : "eye",
|
|
2442
|
+
label: t.showPassword,
|
|
2443
|
+
"aria-pressed": shown[0],
|
|
2444
|
+
disabled: props.disabled,
|
|
2445
|
+
onClick: function() {
|
|
2446
|
+
shown[1](!shown[0]);
|
|
2447
|
+
}
|
|
2448
|
+
}
|
|
2449
|
+
)
|
|
2450
|
+
}
|
|
2451
|
+
);
|
|
2452
|
+
});
|
|
2453
|
+
|
|
2454
|
+
// src/FormErrorSummary.tsx
|
|
2455
|
+
var React21 = __toESM(require_react(), 1);
|
|
2456
|
+
function items(errors) {
|
|
2457
|
+
if (Array.isArray(errors)) return errors;
|
|
2458
|
+
const out = [];
|
|
2459
|
+
for (const k in errors || {}) {
|
|
2460
|
+
const e = errors[k];
|
|
2461
|
+
if (e && e.message) out.push({ field: k, message: e.message });
|
|
2462
|
+
}
|
|
2463
|
+
return out;
|
|
2464
|
+
}
|
|
2465
|
+
function fieldElement(field) {
|
|
2466
|
+
if (typeof document === "undefined") return null;
|
|
2467
|
+
return document.getElementById(field) || document.querySelector('[name="' + field.replace(/"/g, '\\"') + '"]');
|
|
2468
|
+
}
|
|
2469
|
+
var FormErrorSummary = React21.forwardRef(
|
|
2470
|
+
function FormErrorSummary2(props, ref) {
|
|
2471
|
+
const t = useStrings();
|
|
2472
|
+
const auto = uid(), id = props.id || auto;
|
|
2473
|
+
const list = items(props.errors);
|
|
2474
|
+
const box = React21.useRef(null);
|
|
2475
|
+
React21.useEffect(
|
|
2476
|
+
function() {
|
|
2477
|
+
const has = list.length > 0;
|
|
2478
|
+
if (has && box.current) box.current.focus();
|
|
2479
|
+
},
|
|
2480
|
+
/* focus when errors first appear, and again whenever focusKey changes (each submit) */
|
|
2481
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
2482
|
+
[list.length > 0, props.focusKey]
|
|
2483
|
+
);
|
|
2484
|
+
if (!list.length) return null;
|
|
2485
|
+
return /* @__PURE__ */ React21.createElement(
|
|
2486
|
+
"div",
|
|
2487
|
+
{
|
|
2488
|
+
ref: function(el) {
|
|
2489
|
+
box.current = el;
|
|
2490
|
+
if (typeof ref === "function") ref(el);
|
|
2491
|
+
else if (ref) ref.current = el;
|
|
2492
|
+
},
|
|
2493
|
+
id,
|
|
2494
|
+
tabIndex: -1,
|
|
2495
|
+
role: "alert",
|
|
2496
|
+
"aria-labelledby": id + "-title",
|
|
2497
|
+
className: cx("aura-alert aura-alert--danger aura-error-summary", props.className)
|
|
2498
|
+
},
|
|
2499
|
+
/* @__PURE__ */ React21.createElement(Icon, { name: "circle-alert", className: "aura-alert__icon" }),
|
|
2500
|
+
/* @__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) {
|
|
2501
|
+
return /* @__PURE__ */ React21.createElement("li", { key: e.field }, /* @__PURE__ */ React21.createElement(
|
|
2502
|
+
"a",
|
|
2503
|
+
{
|
|
2504
|
+
href: "#" + e.field,
|
|
2505
|
+
onClick: function(ev) {
|
|
2506
|
+
ev.preventDefault();
|
|
2507
|
+
if (props.onSelect) {
|
|
2508
|
+
props.onSelect(e.field);
|
|
2509
|
+
return;
|
|
2510
|
+
}
|
|
2511
|
+
const el = fieldElement(e.field);
|
|
2512
|
+
if (el) {
|
|
2513
|
+
el.scrollIntoView({ block: "center" });
|
|
2514
|
+
el.focus();
|
|
2515
|
+
}
|
|
2516
|
+
}
|
|
2517
|
+
},
|
|
2518
|
+
e.message
|
|
2519
|
+
));
|
|
2520
|
+
})))
|
|
2521
|
+
);
|
|
2522
|
+
}
|
|
2523
|
+
);
|
|
2524
|
+
|
|
2525
|
+
// src/FilterBar.tsx
|
|
2526
|
+
var React23 = __toESM(require_react(), 1);
|
|
2527
|
+
|
|
2528
|
+
// src/Tag.tsx
|
|
2529
|
+
var React22 = __toESM(require_react(), 1);
|
|
2530
|
+
var Tag = React22.forwardRef(function Tag2(props, ref) {
|
|
2531
|
+
const t = useStrings();
|
|
2532
|
+
const selectable = props.onClick != null || props.selected != null;
|
|
2533
|
+
const rest = omit(props, ["onRemove", "selected", "icon", "className", "children", "disabled", "removeLabel"]);
|
|
2534
|
+
const inner = [
|
|
2535
|
+
props.icon ? /* @__PURE__ */ React22.createElement(Icon, { key: "i", name: props.icon, size: 14 }) : null,
|
|
2536
|
+
/* @__PURE__ */ React22.createElement("span", { key: "t", className: "aura-tag__text" }, props.children)
|
|
2537
|
+
];
|
|
2538
|
+
if (selectable) {
|
|
2539
|
+
return /* @__PURE__ */ React22.createElement(
|
|
2540
|
+
"button",
|
|
2541
|
+
{
|
|
2542
|
+
...rest,
|
|
2543
|
+
ref,
|
|
2544
|
+
type: "button",
|
|
2545
|
+
"aria-pressed": !!props.selected,
|
|
2546
|
+
disabled: props.disabled,
|
|
2547
|
+
className: cx("aura-tag is-selectable", props.selected && "is-selected", props.className)
|
|
2548
|
+
},
|
|
2549
|
+
props.selected ? /* @__PURE__ */ React22.createElement(Icon, { name: "check", size: 14 }) : inner[0],
|
|
2550
|
+
inner[1]
|
|
2551
|
+
);
|
|
2552
|
+
}
|
|
2553
|
+
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(
|
|
2554
|
+
"button",
|
|
2555
|
+
{
|
|
2556
|
+
type: "button",
|
|
2557
|
+
className: "aura-tag__remove",
|
|
2558
|
+
"aria-label": props.removeLabel || t.remove(typeof props.children === "string" ? props.children : ""),
|
|
2559
|
+
onClick: props.onRemove
|
|
2560
|
+
},
|
|
2561
|
+
/* @__PURE__ */ React22.createElement(Icon, { name: "x", size: 12 })
|
|
2562
|
+
) : null);
|
|
2563
|
+
});
|
|
2564
|
+
|
|
2565
|
+
// src/FilterBar.tsx
|
|
2566
|
+
var FilterBar = React23.forwardRef(function FilterBar2(props, ref) {
|
|
2567
|
+
const t = useStrings();
|
|
2568
|
+
const id = uid();
|
|
2569
|
+
const hasSearch = !!props.onSearchChange;
|
|
2570
|
+
const draft = React23.useState(props.search || "");
|
|
2571
|
+
const timer = React23.useRef(null);
|
|
2572
|
+
const sent = React23.useRef(props.search || "");
|
|
2573
|
+
const onChange = React23.useRef(props.onSearchChange);
|
|
2574
|
+
onChange.current = props.onSearchChange;
|
|
2575
|
+
React23.useEffect(
|
|
2576
|
+
function() {
|
|
2577
|
+
if ((props.search || "") !== sent.current) {
|
|
2578
|
+
sent.current = props.search || "";
|
|
2579
|
+
draft[1](props.search || "");
|
|
2580
|
+
}
|
|
2581
|
+
},
|
|
2582
|
+
[props.search]
|
|
2583
|
+
);
|
|
2584
|
+
React23.useEffect(function() {
|
|
2585
|
+
return function() {
|
|
2586
|
+
if (timer.current) clearTimeout(timer.current);
|
|
2587
|
+
};
|
|
2588
|
+
}, []);
|
|
2589
|
+
function send(v) {
|
|
2590
|
+
if (timer.current) clearTimeout(timer.current);
|
|
2591
|
+
timer.current = null;
|
|
2592
|
+
if (v === sent.current) return;
|
|
2593
|
+
sent.current = v;
|
|
2594
|
+
if (onChange.current) onChange.current(v);
|
|
2595
|
+
}
|
|
2596
|
+
function type(v) {
|
|
2597
|
+
draft[1](v);
|
|
2598
|
+
if (timer.current) clearTimeout(timer.current);
|
|
2599
|
+
timer.current = setTimeout(
|
|
2600
|
+
function() {
|
|
2601
|
+
send(v);
|
|
2602
|
+
},
|
|
2603
|
+
props.searchDelay == null ? 300 : props.searchDelay
|
|
2604
|
+
);
|
|
2605
|
+
}
|
|
2606
|
+
const filters = props.filters || [];
|
|
2607
|
+
const anything = filters.length > 0 || !!(props.search || draft[0]);
|
|
2608
|
+
const count = props.resultCount == null ? null : typeof props.resultCount === "number" ? t.results(props.resultCount) : props.resultCount;
|
|
2609
|
+
return /* @__PURE__ */ React23.createElement(
|
|
2610
|
+
"div",
|
|
2611
|
+
{
|
|
2612
|
+
ref,
|
|
2613
|
+
role: "region",
|
|
2614
|
+
"aria-label": props.label || t.filters,
|
|
2615
|
+
className: cx("aura-filterbar", props.className)
|
|
2616
|
+
},
|
|
2617
|
+
/* @__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(
|
|
2618
|
+
"input",
|
|
2619
|
+
{
|
|
2620
|
+
id,
|
|
2621
|
+
type: "search",
|
|
2622
|
+
className: "aura-input__control",
|
|
2623
|
+
"aria-label": props.searchLabel || t.search,
|
|
2624
|
+
placeholder: props.searchPlaceholder || props.searchLabel || t.search,
|
|
2625
|
+
value: draft[0],
|
|
2626
|
+
onChange: function(e) {
|
|
2627
|
+
type(e.target.value);
|
|
2628
|
+
},
|
|
2629
|
+
onKeyDown: function(e) {
|
|
2630
|
+
if (e.key === "Enter") send(draft[0]);
|
|
2631
|
+
if (e.key === "Escape" && draft[0]) {
|
|
2632
|
+
e.preventDefault();
|
|
2633
|
+
draft[1]("");
|
|
2634
|
+
send("");
|
|
2635
|
+
}
|
|
2636
|
+
}
|
|
2637
|
+
}
|
|
2638
|
+
), draft[0] ? /* @__PURE__ */ React23.createElement(
|
|
2639
|
+
IconButton,
|
|
2640
|
+
{
|
|
2641
|
+
icon: "x",
|
|
2642
|
+
label: t.clear((props.searchLabel || t.search).toLowerCase()),
|
|
2643
|
+
className: "aura-filterbar__clear-search",
|
|
2644
|
+
onClick: function() {
|
|
2645
|
+
draft[1]("");
|
|
2646
|
+
send("");
|
|
2647
|
+
}
|
|
2648
|
+
}
|
|
2649
|
+
) : 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),
|
|
2650
|
+
filters.length || props.onClearAll && anything ? /* @__PURE__ */ React23.createElement("div", { className: "aura-filterbar__chips" }, filters.map(function(f) {
|
|
2651
|
+
return /* @__PURE__ */ React23.createElement(Tag, { key: f.id, onRemove: f.onRemove }, f.label);
|
|
2652
|
+
}), props.onClearAll && anything ? /* @__PURE__ */ React23.createElement(
|
|
2653
|
+
"button",
|
|
2654
|
+
{
|
|
2655
|
+
type: "button",
|
|
2656
|
+
className: "aura-filterbar__clear",
|
|
2657
|
+
onClick: function() {
|
|
2658
|
+
draft[1]("");
|
|
2659
|
+
sent.current = "";
|
|
2660
|
+
if (timer.current) clearTimeout(timer.current);
|
|
2661
|
+
props.onClearAll();
|
|
2662
|
+
}
|
|
2663
|
+
},
|
|
2664
|
+
t.clearFilters
|
|
2665
|
+
) : null) : null
|
|
2666
|
+
);
|
|
2667
|
+
});
|
|
2668
|
+
|
|
2669
|
+
// src/Command.tsx
|
|
2670
|
+
var React25 = __toESM(require_react(), 1);
|
|
2335
2671
|
var import_react_dom5 = __toESM(require_react_dom(), 1);
|
|
2336
|
-
|
|
2337
|
-
|
|
2338
|
-
|
|
2339
|
-
|
|
2340
|
-
|
|
2672
|
+
|
|
2673
|
+
// src/useModal.tsx
|
|
2674
|
+
var React24 = __toESM(require_react(), 1);
|
|
2675
|
+
function useModal(open, ref, opts) {
|
|
2676
|
+
const mounted = useMounted();
|
|
2677
|
+
const prev = React24.useRef(null);
|
|
2678
|
+
const o = opts || {};
|
|
2679
|
+
React24.useEffect(
|
|
2680
|
+
function() {
|
|
2681
|
+
if (!open || !mounted) return;
|
|
2682
|
+
prev.current = document.activeElement;
|
|
2683
|
+
const body = document.body, overflow = body.style.overflow;
|
|
2684
|
+
body.style.overflow = "hidden";
|
|
2685
|
+
const el = ref.current;
|
|
2686
|
+
const target = el && (el.querySelector("[data-autofocus]") || el.querySelector(o.bodySelector + " " + FOCUSABLE) || el.querySelector(o.footSelector + " " + FOCUSABLE) || el);
|
|
2687
|
+
if (target && o.autoFocus !== false) target.focus();
|
|
2688
|
+
return function() {
|
|
2689
|
+
body.style.overflow = overflow;
|
|
2690
|
+
if (prev.current && prev.current.focus) prev.current.focus();
|
|
2691
|
+
};
|
|
2692
|
+
},
|
|
2693
|
+
[open, mounted]
|
|
2694
|
+
);
|
|
2695
|
+
function onKeyDown(e) {
|
|
2696
|
+
if (e.key === "Escape") {
|
|
2697
|
+
e.stopPropagation();
|
|
2698
|
+
if (o.onEscape) o.onEscape();
|
|
2699
|
+
return;
|
|
2700
|
+
}
|
|
2701
|
+
if (e.key !== "Tab" || !ref.current) return;
|
|
2702
|
+
const list = Array.prototype.slice.call(ref.current.querySelectorAll(FOCUSABLE));
|
|
2703
|
+
if (!list.length) {
|
|
2704
|
+
e.preventDefault();
|
|
2705
|
+
return;
|
|
2706
|
+
}
|
|
2707
|
+
const first = list[0], last = list[list.length - 1];
|
|
2708
|
+
if (e.shiftKey && (document.activeElement === first || document.activeElement === ref.current)) {
|
|
2709
|
+
e.preventDefault();
|
|
2710
|
+
last.focus();
|
|
2711
|
+
} else if (!e.shiftKey && document.activeElement === last) {
|
|
2712
|
+
e.preventDefault();
|
|
2713
|
+
first.focus();
|
|
2714
|
+
}
|
|
2715
|
+
}
|
|
2716
|
+
return { ready: !!open && mounted, onKeyDown };
|
|
2717
|
+
}
|
|
2718
|
+
|
|
2719
|
+
// src/Command.tsx
|
|
2720
|
+
function isMac() {
|
|
2721
|
+
return typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent);
|
|
2722
|
+
}
|
|
2723
|
+
function Command(props) {
|
|
2724
|
+
const t = useStrings();
|
|
2725
|
+
const id = uid(), listId = id + "-list";
|
|
2726
|
+
const box = React25.useRef(null);
|
|
2727
|
+
const input = React25.useRef(null);
|
|
2728
|
+
const q = React25.useState(""), act = React25.useState(0);
|
|
2729
|
+
const openRef = React25.useRef(props.open);
|
|
2730
|
+
openRef.current = props.open;
|
|
2731
|
+
const close = function() {
|
|
2732
|
+
props.onOpenChange(false);
|
|
2733
|
+
};
|
|
2734
|
+
const modal = useModal(props.open, box, { onEscape: close });
|
|
2735
|
+
React25.useEffect(
|
|
2736
|
+
function() {
|
|
2737
|
+
if (props.hotkey === false) return;
|
|
2738
|
+
function onKey2(e) {
|
|
2739
|
+
if ((e.metaKey || e.ctrlKey) && !e.altKey && !e.shiftKey && (e.key === "k" || e.key === "K")) {
|
|
2740
|
+
e.preventDefault();
|
|
2741
|
+
props.onOpenChange(!openRef.current);
|
|
2742
|
+
}
|
|
2743
|
+
}
|
|
2744
|
+
document.addEventListener("keydown", onKey2, true);
|
|
2745
|
+
return function() {
|
|
2746
|
+
document.removeEventListener("keydown", onKey2, true);
|
|
2747
|
+
};
|
|
2748
|
+
},
|
|
2749
|
+
[props.hotkey, props.onOpenChange]
|
|
2750
|
+
);
|
|
2751
|
+
React25.useEffect(
|
|
2752
|
+
function() {
|
|
2753
|
+
if (!props.open) {
|
|
2754
|
+
q[1]("");
|
|
2755
|
+
act[1](0);
|
|
2756
|
+
}
|
|
2757
|
+
},
|
|
2758
|
+
[props.open]
|
|
2759
|
+
);
|
|
2760
|
+
const filter = props.filter || defaultFilter;
|
|
2761
|
+
const shown = (props.items || []).filter(function(it) {
|
|
2762
|
+
return filter(it, q[0]);
|
|
2763
|
+
});
|
|
2764
|
+
const groups = [];
|
|
2765
|
+
shown.forEach(function(it) {
|
|
2766
|
+
const name = it.group || "";
|
|
2767
|
+
let g = groups.filter(function(x) {
|
|
2768
|
+
return x.name === name;
|
|
2769
|
+
})[0];
|
|
2770
|
+
if (!g) groups.push(g = { name, items: [] });
|
|
2771
|
+
g.items.push(it);
|
|
2772
|
+
});
|
|
2773
|
+
const flat = [];
|
|
2774
|
+
groups.forEach(function(g) {
|
|
2775
|
+
g.items.forEach(function(it) {
|
|
2776
|
+
flat.push(it);
|
|
2777
|
+
});
|
|
2778
|
+
});
|
|
2779
|
+
const enabled = flat.map(function(it, i2) {
|
|
2780
|
+
return it.disabled ? -1 : i2;
|
|
2781
|
+
}).filter(function(i2) {
|
|
2782
|
+
return i2 >= 0;
|
|
2783
|
+
});
|
|
2784
|
+
const active = enabled.indexOf(act[0]) >= 0 ? act[0] : enabled.length ? enabled[0] : -1;
|
|
2785
|
+
const optId = function(i2) {
|
|
2786
|
+
return id + "-o" + i2;
|
|
2787
|
+
};
|
|
2788
|
+
React25.useEffect(
|
|
2789
|
+
function() {
|
|
2790
|
+
if (!box.current || active < 0) return;
|
|
2791
|
+
const el = box.current.querySelector("#" + CSS.escape(optId(active)));
|
|
2792
|
+
if (el && el.scrollIntoView) el.scrollIntoView({ block: "nearest" });
|
|
2793
|
+
},
|
|
2794
|
+
[active]
|
|
2795
|
+
);
|
|
2796
|
+
function run(it) {
|
|
2797
|
+
if (it.disabled) return;
|
|
2798
|
+
close();
|
|
2799
|
+
if (it.onSelect) it.onSelect();
|
|
2800
|
+
if (props.onSelect) props.onSelect(it);
|
|
2801
|
+
}
|
|
2802
|
+
function move(dir) {
|
|
2803
|
+
if (!enabled.length) return;
|
|
2804
|
+
const at = enabled.indexOf(active);
|
|
2805
|
+
let n2;
|
|
2806
|
+
if (dir === "first") n2 = 0;
|
|
2807
|
+
else if (dir === "last") n2 = enabled.length - 1;
|
|
2808
|
+
else n2 = (at + dir + enabled.length) % enabled.length;
|
|
2809
|
+
act[1](enabled[n2]);
|
|
2810
|
+
}
|
|
2811
|
+
function onKey(e) {
|
|
2812
|
+
if (e.key === "ArrowDown") {
|
|
2813
|
+
e.preventDefault();
|
|
2814
|
+
move(1);
|
|
2815
|
+
} else if (e.key === "ArrowUp") {
|
|
2816
|
+
e.preventDefault();
|
|
2817
|
+
move(-1);
|
|
2818
|
+
} else if (e.key === "Home" && e.ctrlKey) {
|
|
2819
|
+
e.preventDefault();
|
|
2820
|
+
move("first");
|
|
2821
|
+
} else if (e.key === "End" && e.ctrlKey) {
|
|
2822
|
+
e.preventDefault();
|
|
2823
|
+
move("last");
|
|
2824
|
+
} else if (e.key === "Enter") {
|
|
2825
|
+
e.preventDefault();
|
|
2826
|
+
if (active >= 0) run(flat[active]);
|
|
2827
|
+
}
|
|
2828
|
+
}
|
|
2829
|
+
if (!modal.ready) return null;
|
|
2830
|
+
let i = -1;
|
|
2831
|
+
return (0, import_react_dom5.createPortal)(
|
|
2832
|
+
/* @__PURE__ */ React25.createElement(
|
|
2833
|
+
"div",
|
|
2834
|
+
{
|
|
2835
|
+
className: "aura-dialog-layer aura-command-layer",
|
|
2836
|
+
onKeyDown: function(e) {
|
|
2837
|
+
modal.onKeyDown(e);
|
|
2838
|
+
e.stopPropagation();
|
|
2839
|
+
}
|
|
2840
|
+
},
|
|
2841
|
+
/* @__PURE__ */ React25.createElement("div", { className: "aura-scrim", onClick: close, "aria-hidden": true }),
|
|
2842
|
+
/* @__PURE__ */ React25.createElement(
|
|
2843
|
+
"div",
|
|
2844
|
+
{
|
|
2845
|
+
ref: box,
|
|
2846
|
+
role: "dialog",
|
|
2847
|
+
"aria-modal": true,
|
|
2848
|
+
"aria-label": props.label || t.commandMenu,
|
|
2849
|
+
tabIndex: -1,
|
|
2850
|
+
className: cx("aura-command", props.className)
|
|
2851
|
+
},
|
|
2852
|
+
/* @__PURE__ */ React25.createElement("div", { className: "aura-command__search" }, /* @__PURE__ */ React25.createElement(Icon, { name: "search", className: "aura-command__search-icon" }), /* @__PURE__ */ React25.createElement(
|
|
2853
|
+
"input",
|
|
2854
|
+
{
|
|
2855
|
+
ref: input,
|
|
2856
|
+
"data-autofocus": "",
|
|
2857
|
+
type: "text",
|
|
2858
|
+
role: "combobox",
|
|
2859
|
+
"aria-expanded": true,
|
|
2860
|
+
"aria-controls": listId,
|
|
2861
|
+
"aria-autocomplete": "list",
|
|
2862
|
+
"aria-activedescendant": active >= 0 ? optId(active) : void 0,
|
|
2863
|
+
"aria-label": props.label || t.commandMenu,
|
|
2864
|
+
placeholder: props.placeholder || t.commandPlaceholder,
|
|
2865
|
+
className: "aura-command__input",
|
|
2866
|
+
value: q[0],
|
|
2867
|
+
autoComplete: "off",
|
|
2868
|
+
spellCheck: false,
|
|
2869
|
+
onChange: function(e) {
|
|
2870
|
+
q[1](e.target.value);
|
|
2871
|
+
act[1](0);
|
|
2872
|
+
},
|
|
2873
|
+
onKeyDown: onKey
|
|
2874
|
+
}
|
|
2875
|
+
), /* @__PURE__ */ React25.createElement("kbd", { className: "aura-command__kbd" }, "Esc")),
|
|
2876
|
+
/* @__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) {
|
|
2877
|
+
const gid = id + "-g" + gi;
|
|
2878
|
+
return /* @__PURE__ */ React25.createElement(
|
|
2879
|
+
"div",
|
|
2880
|
+
{
|
|
2881
|
+
key: g.name || gi,
|
|
2882
|
+
role: "group",
|
|
2883
|
+
"aria-labelledby": g.name ? gid : void 0,
|
|
2884
|
+
className: "aura-command__group"
|
|
2885
|
+
},
|
|
2886
|
+
g.name ? /* @__PURE__ */ React25.createElement("div", { className: "aura-command__heading", id: gid, role: "presentation" }, g.name) : null,
|
|
2887
|
+
g.items.map(function(it) {
|
|
2888
|
+
i++;
|
|
2889
|
+
const n2 = i;
|
|
2890
|
+
return /* @__PURE__ */ React25.createElement(
|
|
2891
|
+
"div",
|
|
2892
|
+
{
|
|
2893
|
+
key: it.id,
|
|
2894
|
+
id: optId(n2),
|
|
2895
|
+
role: "option",
|
|
2896
|
+
"aria-selected": n2 === active,
|
|
2897
|
+
"aria-disabled": it.disabled || void 0,
|
|
2898
|
+
className: cx("aura-command__item", n2 === active && "is-active", it.disabled && "is-disabled"),
|
|
2899
|
+
onPointerDown: function(e) {
|
|
2900
|
+
e.preventDefault();
|
|
2901
|
+
},
|
|
2902
|
+
onPointerMove: function() {
|
|
2903
|
+
if (!it.disabled && act[0] !== n2) act[1](n2);
|
|
2904
|
+
},
|
|
2905
|
+
onClick: function() {
|
|
2906
|
+
run(it);
|
|
2907
|
+
}
|
|
2908
|
+
},
|
|
2909
|
+
it.icon ? /* @__PURE__ */ React25.createElement(Icon, { name: it.icon }) : null,
|
|
2910
|
+
/* @__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),
|
|
2911
|
+
it.shortcut ? /* @__PURE__ */ React25.createElement("kbd", { className: "aura-command__kbd" }, it.shortcut) : null
|
|
2912
|
+
);
|
|
2913
|
+
})
|
|
2914
|
+
);
|
|
2915
|
+
})),
|
|
2916
|
+
/* @__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"))
|
|
2917
|
+
)
|
|
2918
|
+
),
|
|
2919
|
+
document.body
|
|
2920
|
+
);
|
|
2921
|
+
}
|
|
2922
|
+
|
|
2923
|
+
// src/Tooltip.tsx
|
|
2924
|
+
var React26 = __toESM(require_react(), 1);
|
|
2925
|
+
var import_react_dom6 = __toESM(require_react_dom(), 1);
|
|
2926
|
+
var Tooltip = React26.forwardRef(function Tooltip2(props, ref) {
|
|
2927
|
+
const id = uid(), st = React26.useState(false), open = props.open !== void 0 ? props.open : st[0], set = st[1];
|
|
2928
|
+
const anchor = React26.useRef(null), anchorMerged = useMergedRef(ref, anchor), tip = React26.useRef(null), timer = React26.useRef(void 0);
|
|
2929
|
+
const pos = React26.useState(null);
|
|
2930
|
+
function show2(now) {
|
|
2341
2931
|
clearTimeout(timer.current);
|
|
2342
2932
|
timer.current = setTimeout(
|
|
2343
2933
|
function() {
|
|
@@ -2361,7 +2951,7 @@ window.Aura = (() => {
|
|
|
2361
2951
|
},
|
|
2362
2952
|
[open]
|
|
2363
2953
|
);
|
|
2364
|
-
|
|
2954
|
+
React26.useEffect(
|
|
2365
2955
|
function() {
|
|
2366
2956
|
if (!open) return;
|
|
2367
2957
|
function esc(e) {
|
|
@@ -2374,25 +2964,25 @@ window.Aura = (() => {
|
|
|
2374
2964
|
},
|
|
2375
2965
|
[open]
|
|
2376
2966
|
);
|
|
2377
|
-
const child =
|
|
2378
|
-
const trigger = /* @__PURE__ */
|
|
2967
|
+
const child = React26.Children.only(props.children);
|
|
2968
|
+
const trigger = /* @__PURE__ */ React26.createElement(
|
|
2379
2969
|
"span",
|
|
2380
2970
|
{
|
|
2381
2971
|
ref: anchorMerged,
|
|
2382
2972
|
className: "aura-tooltip-anchor",
|
|
2383
2973
|
onMouseEnter: function() {
|
|
2384
|
-
|
|
2974
|
+
show2(false);
|
|
2385
2975
|
},
|
|
2386
2976
|
onMouseLeave: hide,
|
|
2387
2977
|
onFocus: function() {
|
|
2388
|
-
|
|
2978
|
+
show2(true);
|
|
2389
2979
|
},
|
|
2390
2980
|
onBlur: hide
|
|
2391
2981
|
},
|
|
2392
|
-
|
|
2982
|
+
React26.cloneElement(child, { "aria-describedby": open ? id : child.props["aria-describedby"] })
|
|
2393
2983
|
);
|
|
2394
|
-
return /* @__PURE__ */
|
|
2395
|
-
/* @__PURE__ */
|
|
2984
|
+
return /* @__PURE__ */ React26.createElement(React26.Fragment, null, trigger, open ? (0, import_react_dom6.createPortal)(
|
|
2985
|
+
/* @__PURE__ */ React26.createElement(
|
|
2396
2986
|
"div",
|
|
2397
2987
|
{
|
|
2398
2988
|
ref: tip,
|
|
@@ -2408,59 +2998,11 @@ window.Aura = (() => {
|
|
|
2408
2998
|
});
|
|
2409
2999
|
|
|
2410
3000
|
// src/Dialog.tsx
|
|
2411
|
-
var
|
|
2412
|
-
var
|
|
2413
|
-
|
|
2414
|
-
// src/useModal.tsx
|
|
2415
|
-
var React21 = __toESM(require_react(), 1);
|
|
2416
|
-
function useModal(open, ref, opts) {
|
|
2417
|
-
const mounted = useMounted();
|
|
2418
|
-
const prev = React21.useRef(null);
|
|
2419
|
-
const o = opts || {};
|
|
2420
|
-
React21.useEffect(
|
|
2421
|
-
function() {
|
|
2422
|
-
if (!open || !mounted) return;
|
|
2423
|
-
prev.current = document.activeElement;
|
|
2424
|
-
const body = document.body, overflow = body.style.overflow;
|
|
2425
|
-
body.style.overflow = "hidden";
|
|
2426
|
-
const el = ref.current;
|
|
2427
|
-
const target = el && (el.querySelector("[data-autofocus]") || el.querySelector(o.bodySelector + " " + FOCUSABLE) || el.querySelector(o.footSelector + " " + FOCUSABLE) || el);
|
|
2428
|
-
if (target && o.autoFocus !== false) target.focus();
|
|
2429
|
-
return function() {
|
|
2430
|
-
body.style.overflow = overflow;
|
|
2431
|
-
if (prev.current && prev.current.focus) prev.current.focus();
|
|
2432
|
-
};
|
|
2433
|
-
},
|
|
2434
|
-
[open, mounted]
|
|
2435
|
-
);
|
|
2436
|
-
function onKeyDown(e) {
|
|
2437
|
-
if (e.key === "Escape") {
|
|
2438
|
-
e.stopPropagation();
|
|
2439
|
-
if (o.onEscape) o.onEscape();
|
|
2440
|
-
return;
|
|
2441
|
-
}
|
|
2442
|
-
if (e.key !== "Tab" || !ref.current) return;
|
|
2443
|
-
const list = Array.prototype.slice.call(ref.current.querySelectorAll(FOCUSABLE));
|
|
2444
|
-
if (!list.length) {
|
|
2445
|
-
e.preventDefault();
|
|
2446
|
-
return;
|
|
2447
|
-
}
|
|
2448
|
-
const first = list[0], last = list[list.length - 1];
|
|
2449
|
-
if (e.shiftKey && (document.activeElement === first || document.activeElement === ref.current)) {
|
|
2450
|
-
e.preventDefault();
|
|
2451
|
-
last.focus();
|
|
2452
|
-
} else if (!e.shiftKey && document.activeElement === last) {
|
|
2453
|
-
e.preventDefault();
|
|
2454
|
-
first.focus();
|
|
2455
|
-
}
|
|
2456
|
-
}
|
|
2457
|
-
return { ready: !!open && mounted, onKeyDown };
|
|
2458
|
-
}
|
|
2459
|
-
|
|
2460
|
-
// src/Dialog.tsx
|
|
2461
|
-
var Dialog = React22.forwardRef(function Dialog2(props, ref) {
|
|
3001
|
+
var React27 = __toESM(require_react(), 1);
|
|
3002
|
+
var import_react_dom7 = __toESM(require_react_dom(), 1);
|
|
3003
|
+
var Dialog = React27.forwardRef(function Dialog2(props, ref) {
|
|
2462
3004
|
const t = useStrings();
|
|
2463
|
-
const own =
|
|
3005
|
+
const own = React27.useRef(null), merged = useMergedRef(ref, own), titleId = uid(), descId = uid();
|
|
2464
3006
|
function close() {
|
|
2465
3007
|
if (props.dismissible !== false && props.onClose) props.onClose();
|
|
2466
3008
|
}
|
|
@@ -2471,8 +3013,8 @@ window.Aura = (() => {
|
|
|
2471
3013
|
footSelector: ".aura-dialog__foot"
|
|
2472
3014
|
});
|
|
2473
3015
|
if (!modal.ready) return null;
|
|
2474
|
-
return (0,
|
|
2475
|
-
/* @__PURE__ */
|
|
3016
|
+
return (0, import_react_dom7.createPortal)(
|
|
3017
|
+
/* @__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(
|
|
2476
3018
|
"div",
|
|
2477
3019
|
{
|
|
2478
3020
|
ref: merged,
|
|
@@ -2483,17 +3025,17 @@ window.Aura = (() => {
|
|
|
2483
3025
|
tabIndex: -1,
|
|
2484
3026
|
className: cx("aura-dialog", "aura-dialog--" + (props.size || "md"), props.className)
|
|
2485
3027
|
},
|
|
2486
|
-
/* @__PURE__ */
|
|
2487
|
-
props.description ? /* @__PURE__ */
|
|
2488
|
-
props.children ? /* @__PURE__ */
|
|
2489
|
-
props.footer ? /* @__PURE__ */
|
|
3028
|
+
/* @__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),
|
|
3029
|
+
props.description ? /* @__PURE__ */ React27.createElement("p", { className: "aura-dialog__desc", id: descId }, props.description) : null,
|
|
3030
|
+
props.children ? /* @__PURE__ */ React27.createElement("div", { className: "aura-dialog__body" }, props.children) : null,
|
|
3031
|
+
props.footer ? /* @__PURE__ */ React27.createElement("div", { className: "aura-dialog__foot" }, props.footer) : null
|
|
2490
3032
|
)),
|
|
2491
3033
|
document.body
|
|
2492
3034
|
);
|
|
2493
3035
|
});
|
|
2494
|
-
var Drawer =
|
|
3036
|
+
var Drawer = React27.forwardRef(function Drawer2(props, ref) {
|
|
2495
3037
|
const t = useStrings();
|
|
2496
|
-
const own =
|
|
3038
|
+
const own = React27.useRef(null), merged = useMergedRef(ref, own), titleId = uid(), descId = uid();
|
|
2497
3039
|
function close() {
|
|
2498
3040
|
if (props.dismissible !== false && props.onClose) props.onClose();
|
|
2499
3041
|
}
|
|
@@ -2505,8 +3047,8 @@ window.Aura = (() => {
|
|
|
2505
3047
|
});
|
|
2506
3048
|
if (!modal.ready) return null;
|
|
2507
3049
|
const side = props.side === "left" ? "left" : "right";
|
|
2508
|
-
return (0,
|
|
2509
|
-
/* @__PURE__ */
|
|
3050
|
+
return (0, import_react_dom7.createPortal)(
|
|
3051
|
+
/* @__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(
|
|
2510
3052
|
"div",
|
|
2511
3053
|
{
|
|
2512
3054
|
ref: merged,
|
|
@@ -2518,17 +3060,17 @@ window.Aura = (() => {
|
|
|
2518
3060
|
tabIndex: -1,
|
|
2519
3061
|
className: cx("aura-drawer", "aura-drawer--" + side, "aura-drawer--" + (props.size || "md"), props.className)
|
|
2520
3062
|
},
|
|
2521
|
-
props.title || props.dismissible !== false ? /* @__PURE__ */
|
|
2522
|
-
props.description ? /* @__PURE__ */
|
|
2523
|
-
/* @__PURE__ */
|
|
2524
|
-
props.footer ? /* @__PURE__ */
|
|
3063
|
+
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,
|
|
3064
|
+
props.description ? /* @__PURE__ */ React27.createElement("p", { className: "aura-drawer__desc", id: descId }, props.description) : null,
|
|
3065
|
+
/* @__PURE__ */ React27.createElement("div", { className: "aura-drawer__body" }, props.children),
|
|
3066
|
+
props.footer ? /* @__PURE__ */ React27.createElement("div", { className: "aura-drawer__foot" }, props.footer) : null
|
|
2525
3067
|
)),
|
|
2526
3068
|
document.body
|
|
2527
3069
|
);
|
|
2528
3070
|
});
|
|
2529
3071
|
|
|
2530
3072
|
// src/DataTable.tsx
|
|
2531
|
-
var
|
|
3073
|
+
var React28 = __toESM(require_react(), 1);
|
|
2532
3074
|
var BP = { sm: 640, md: 768, lg: 1024, xl: 1280 };
|
|
2533
3075
|
var DEFAULT_COLUMNS = [
|
|
2534
3076
|
{ key: "id", label: "ID", width: 96, mono: true },
|
|
@@ -2540,7 +3082,7 @@ window.Aura = (() => {
|
|
|
2540
3082
|
var ROW_H = 48;
|
|
2541
3083
|
var OVERSCAN = 8;
|
|
2542
3084
|
var FLEX_MIN = 160;
|
|
2543
|
-
var DataTable =
|
|
3085
|
+
var DataTable = React28.forwardRef(function DataTable2(props, ref) {
|
|
2544
3086
|
const t = useStrings();
|
|
2545
3087
|
const columns = props.columns || DEFAULT_COLUMNS;
|
|
2546
3088
|
const byKey = {};
|
|
@@ -2587,23 +3129,23 @@ window.Aura = (() => {
|
|
|
2587
3129
|
}),
|
|
2588
3130
|
props.onPinnedColumnsChange
|
|
2589
3131
|
);
|
|
2590
|
-
const widthState =
|
|
3132
|
+
const widthState = React28.useState({});
|
|
2591
3133
|
const widths = widthState[0], setWidths = widthState[1];
|
|
2592
|
-
const activeState =
|
|
2593
|
-
const scrollState =
|
|
3134
|
+
const activeState = React28.useState({ r: 1, c: 0 });
|
|
3135
|
+
const scrollState = React28.useState(0);
|
|
2594
3136
|
const scrollTop = scrollState[0], setScrollTop = scrollState[1];
|
|
2595
|
-
const scrolledX =
|
|
2596
|
-
const menuState =
|
|
3137
|
+
const scrolledX = React28.useState(false);
|
|
3138
|
+
const menuState = React28.useState(null);
|
|
2597
3139
|
const menu = menuState[0], setMenu = menuState[1];
|
|
2598
|
-
const dragState =
|
|
3140
|
+
const dragState = React28.useState(null);
|
|
2599
3141
|
const drag = dragState[0], setDrag = dragState[1];
|
|
2600
|
-
const gridRef =
|
|
2601
|
-
const wrapRef =
|
|
2602
|
-
const boxWidth =
|
|
3142
|
+
const gridRef = React28.useRef(null);
|
|
3143
|
+
const wrapRef = React28.useRef(null), wrapMerged = useMergedRef(ref, wrapRef);
|
|
3144
|
+
const boxWidth = React28.useState(null);
|
|
2603
3145
|
const measure = !!props.stackBelow || columns.some(function(c) {
|
|
2604
3146
|
return c.hideBelow != null;
|
|
2605
3147
|
});
|
|
2606
|
-
|
|
3148
|
+
React28.useEffect(
|
|
2607
3149
|
function() {
|
|
2608
3150
|
if (!measure || !wrapRef.current || typeof ResizeObserver === "undefined") return;
|
|
2609
3151
|
const ro = new ResizeObserver(function(en) {
|
|
@@ -2622,9 +3164,9 @@ window.Aura = (() => {
|
|
|
2622
3164
|
const px = typeof c.hideBelow === "number" ? c.hideBelow : BP[c.hideBelow];
|
|
2623
3165
|
return px != null && boxWidth[0] < px;
|
|
2624
3166
|
}
|
|
2625
|
-
const scrollRef =
|
|
2626
|
-
const pending =
|
|
2627
|
-
const resizing =
|
|
3167
|
+
const scrollRef = React28.useRef(null);
|
|
3168
|
+
const pending = React28.useRef(null);
|
|
3169
|
+
const resizing = React28.useRef(false);
|
|
2628
3170
|
useIsoLayoutEffect(function() {
|
|
2629
3171
|
if (stacked || !gridRef.current) return;
|
|
2630
3172
|
const els = gridRef.current.querySelectorAll(
|
|
@@ -2683,7 +3225,7 @@ window.Aura = (() => {
|
|
|
2683
3225
|
if (isPinned(c)) s.left = "calc(var(--aura-space-6)" + selW + " + " + pinOffsets[c.key] + "px)";
|
|
2684
3226
|
return s;
|
|
2685
3227
|
}
|
|
2686
|
-
const view =
|
|
3228
|
+
const view = React28.useMemo(
|
|
2687
3229
|
function() {
|
|
2688
3230
|
if (manual || !sort || !sort.key || !byKey[sort.key]) return rows;
|
|
2689
3231
|
const col = byKey[sort.key];
|
|
@@ -2717,7 +3259,7 @@ window.Aura = (() => {
|
|
|
2717
3259
|
const canSortAny = !busy && (manual ? total > 1 : rows.length > 1);
|
|
2718
3260
|
const shownTotal = manual && props.totalRows == null ? first + rows.length : total;
|
|
2719
3261
|
const linkPaging = !!props.getPageHref && !props.onPageChange;
|
|
2720
|
-
const prevLink =
|
|
3262
|
+
const prevLink = React28.useRef(null), nextLink = React28.useRef(null);
|
|
2721
3263
|
function goPage(p, focus) {
|
|
2722
3264
|
const next = Math.min(Math.max(1, p), pageCount);
|
|
2723
3265
|
if (next === page) return false;
|
|
@@ -2752,7 +3294,7 @@ window.Aura = (() => {
|
|
|
2752
3294
|
);
|
|
2753
3295
|
}
|
|
2754
3296
|
function rowLinkWrap(r, content) {
|
|
2755
|
-
return rowHref ? /* @__PURE__ */
|
|
3297
|
+
return rowHref ? /* @__PURE__ */ React28.createElement(Link, { href: rowHref(r), className: "aura-table__row-link" }, content) : content;
|
|
2756
3298
|
}
|
|
2757
3299
|
const height = props.height || 0;
|
|
2758
3300
|
const virtual = !!height && !loading && pageRows.length > 0;
|
|
@@ -2775,7 +3317,7 @@ window.Aura = (() => {
|
|
|
2775
3317
|
if (!activeRendered) return r === 0 && c === ac ? 0 : -1;
|
|
2776
3318
|
return r === ar && c === ac ? 0 : -1;
|
|
2777
3319
|
}
|
|
2778
|
-
|
|
3320
|
+
React28.useEffect(function() {
|
|
2779
3321
|
const p = pending.current;
|
|
2780
3322
|
if (!p || !gridRef.current) return;
|
|
2781
3323
|
let c = p.c;
|
|
@@ -2941,9 +3483,9 @@ window.Aura = (() => {
|
|
|
2941
3483
|
const group = vis.filter(function(x) {
|
|
2942
3484
|
return isPinned(x) === isPinned(c);
|
|
2943
3485
|
}), gi = group.indexOf(c);
|
|
2944
|
-
const
|
|
3486
|
+
const items2 = [];
|
|
2945
3487
|
if (c.sortable)
|
|
2946
|
-
|
|
3488
|
+
items2.push(
|
|
2947
3489
|
{
|
|
2948
3490
|
label: t.sortAsc,
|
|
2949
3491
|
icon: "arrow-up",
|
|
@@ -2963,7 +3505,7 @@ window.Aura = (() => {
|
|
|
2963
3505
|
{ separator: true }
|
|
2964
3506
|
);
|
|
2965
3507
|
if (c.width != null)
|
|
2966
|
-
|
|
3508
|
+
items2.push({
|
|
2967
3509
|
label: isPinned(c) ? t.unpin : t.pin,
|
|
2968
3510
|
icon: isPinned(c) ? "pin-off" : "pin",
|
|
2969
3511
|
onSelect: function() {
|
|
@@ -2971,7 +3513,7 @@ window.Aura = (() => {
|
|
|
2971
3513
|
}
|
|
2972
3514
|
});
|
|
2973
3515
|
if (reorderable)
|
|
2974
|
-
|
|
3516
|
+
items2.push(
|
|
2975
3517
|
{
|
|
2976
3518
|
label: t.moveLeft,
|
|
2977
3519
|
icon: "arrow-left",
|
|
@@ -2989,7 +3531,7 @@ window.Aura = (() => {
|
|
|
2989
3531
|
}
|
|
2990
3532
|
}
|
|
2991
3533
|
);
|
|
2992
|
-
|
|
3534
|
+
items2.push(
|
|
2993
3535
|
{ separator: true },
|
|
2994
3536
|
{
|
|
2995
3537
|
label: t.hideColumn,
|
|
@@ -3000,7 +3542,7 @@ window.Aura = (() => {
|
|
|
3000
3542
|
}
|
|
3001
3543
|
}
|
|
3002
3544
|
);
|
|
3003
|
-
return
|
|
3545
|
+
return items2;
|
|
3004
3546
|
}
|
|
3005
3547
|
function pickerItems() {
|
|
3006
3548
|
return order.map(function(k) {
|
|
@@ -3086,10 +3628,10 @@ window.Aura = (() => {
|
|
|
3086
3628
|
e.stopPropagation();
|
|
3087
3629
|
}
|
|
3088
3630
|
}
|
|
3089
|
-
const head = [/* @__PURE__ */
|
|
3631
|
+
const head = [/* @__PURE__ */ React28.createElement("span", { key: "__gl", className: "aura-table__gutter", "aria-hidden": true })];
|
|
3090
3632
|
if (selectable)
|
|
3091
3633
|
head.push(
|
|
3092
|
-
/* @__PURE__ */
|
|
3634
|
+
/* @__PURE__ */ React28.createElement(
|
|
3093
3635
|
"span",
|
|
3094
3636
|
{
|
|
3095
3637
|
key: "__sel",
|
|
@@ -3103,7 +3645,7 @@ window.Aura = (() => {
|
|
|
3103
3645
|
activeState[1]({ r: 0, c: 0 });
|
|
3104
3646
|
}
|
|
3105
3647
|
},
|
|
3106
|
-
nRows ? /* @__PURE__ */
|
|
3648
|
+
nRows ? /* @__PURE__ */ React28.createElement(
|
|
3107
3649
|
Checkbox,
|
|
3108
3650
|
{
|
|
3109
3651
|
checked: all,
|
|
@@ -3122,7 +3664,7 @@ window.Aura = (() => {
|
|
|
3122
3664
|
const ariaSort = isSorted && canSort ? sort.dir === "desc" ? "descending" : "ascending" : canSort ? "none" : void 0;
|
|
3123
3665
|
const pin = isPinned(c), edge = pin && i === nPinned - 1;
|
|
3124
3666
|
head.push(
|
|
3125
|
-
/* @__PURE__ */
|
|
3667
|
+
/* @__PURE__ */ React28.createElement(
|
|
3126
3668
|
"span",
|
|
3127
3669
|
{
|
|
3128
3670
|
key: c.key,
|
|
@@ -3171,7 +3713,7 @@ window.Aura = (() => {
|
|
|
3171
3713
|
setDrag(null);
|
|
3172
3714
|
}
|
|
3173
3715
|
},
|
|
3174
|
-
/* @__PURE__ */
|
|
3716
|
+
/* @__PURE__ */ React28.createElement("span", { className: "aura-table__th-inner" }, canSort ? /* @__PURE__ */ React28.createElement(
|
|
3175
3717
|
"button",
|
|
3176
3718
|
{
|
|
3177
3719
|
type: "button",
|
|
@@ -3183,8 +3725,8 @@ window.Aura = (() => {
|
|
|
3183
3725
|
}
|
|
3184
3726
|
},
|
|
3185
3727
|
c.label,
|
|
3186
|
-
/* @__PURE__ */
|
|
3187
|
-
) : /* @__PURE__ */
|
|
3728
|
+
/* @__PURE__ */ React28.createElement(Icon, { name: isSorted ? sort.dir === "desc" ? "arrow-down" : "arrow-up" : "arrow-up-down", size: 12 })
|
|
3729
|
+
) : /* @__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(
|
|
3188
3730
|
"button",
|
|
3189
3731
|
{
|
|
3190
3732
|
type: "button",
|
|
@@ -3198,9 +3740,9 @@ window.Aura = (() => {
|
|
|
3198
3740
|
openMenu("col", c.key, e.currentTarget, { r: 0, c: ci });
|
|
3199
3741
|
}
|
|
3200
3742
|
},
|
|
3201
|
-
/* @__PURE__ */
|
|
3743
|
+
/* @__PURE__ */ React28.createElement(Icon, { name: "ellipsis" })
|
|
3202
3744
|
) : null),
|
|
3203
|
-
canResize(c) ? /* @__PURE__ */
|
|
3745
|
+
canResize(c) ? /* @__PURE__ */ React28.createElement(
|
|
3204
3746
|
"span",
|
|
3205
3747
|
{
|
|
3206
3748
|
className: "aura-table__resize",
|
|
@@ -3222,7 +3764,7 @@ window.Aura = (() => {
|
|
|
3222
3764
|
);
|
|
3223
3765
|
});
|
|
3224
3766
|
head.push(
|
|
3225
|
-
/* @__PURE__ */
|
|
3767
|
+
/* @__PURE__ */ React28.createElement(
|
|
3226
3768
|
"span",
|
|
3227
3769
|
{
|
|
3228
3770
|
key: "__gr",
|
|
@@ -3233,14 +3775,14 @@ window.Aura = (() => {
|
|
|
3233
3775
|
);
|
|
3234
3776
|
function cellContent(c, r) {
|
|
3235
3777
|
const v = r[c.key];
|
|
3236
|
-
return c.render ? c.render(r) : c.pill ? /* @__PURE__ */
|
|
3778
|
+
return c.render ? c.render(r) : c.pill ? /* @__PURE__ */ React28.createElement(StatusPill, { ...{ tone: c.tones && c.tones[v] } }, v) : v;
|
|
3237
3779
|
}
|
|
3238
3780
|
function rowCells(r, i, k, isSel) {
|
|
3239
3781
|
const ri = i + 1;
|
|
3240
|
-
const cells = [/* @__PURE__ */
|
|
3782
|
+
const cells = [/* @__PURE__ */ React28.createElement("span", { key: "__gl", className: "aura-table__gutter", "aria-hidden": true })];
|
|
3241
3783
|
if (selectable)
|
|
3242
3784
|
cells.push(
|
|
3243
|
-
/* @__PURE__ */
|
|
3785
|
+
/* @__PURE__ */ React28.createElement(
|
|
3244
3786
|
"span",
|
|
3245
3787
|
{
|
|
3246
3788
|
key: "__sel",
|
|
@@ -3254,7 +3796,7 @@ window.Aura = (() => {
|
|
|
3254
3796
|
if (e.target === e.currentTarget) activeState[1]({ r: ri, c: 0 });
|
|
3255
3797
|
}
|
|
3256
3798
|
},
|
|
3257
|
-
/* @__PURE__ */
|
|
3799
|
+
/* @__PURE__ */ React28.createElement(
|
|
3258
3800
|
Checkbox,
|
|
3259
3801
|
{
|
|
3260
3802
|
checked: isSel,
|
|
@@ -3270,7 +3812,7 @@ window.Aura = (() => {
|
|
|
3270
3812
|
vis.forEach(function(c, j) {
|
|
3271
3813
|
const ci = j + (selectable ? 1 : 0), v = r[c.key], pin = isPinned(c);
|
|
3272
3814
|
cells.push(
|
|
3273
|
-
/* @__PURE__ */
|
|
3815
|
+
/* @__PURE__ */ React28.createElement(
|
|
3274
3816
|
"span",
|
|
3275
3817
|
{
|
|
3276
3818
|
key: c.key,
|
|
@@ -3295,7 +3837,7 @@ window.Aura = (() => {
|
|
|
3295
3837
|
);
|
|
3296
3838
|
});
|
|
3297
3839
|
cells.push(
|
|
3298
|
-
/* @__PURE__ */
|
|
3840
|
+
/* @__PURE__ */ React28.createElement(
|
|
3299
3841
|
"span",
|
|
3300
3842
|
{
|
|
3301
3843
|
key: "__gr",
|
|
@@ -3312,21 +3854,21 @@ window.Aura = (() => {
|
|
|
3312
3854
|
const n2 = pageSize || props.skeletonRows || 5;
|
|
3313
3855
|
const skRows = body = [];
|
|
3314
3856
|
for (let i = 0; i < n2; i++) {
|
|
3315
|
-
const sk = [/* @__PURE__ */
|
|
3857
|
+
const sk = [/* @__PURE__ */ React28.createElement("span", { key: "__gl", className: "aura-table__gutter" })];
|
|
3316
3858
|
if (selectable)
|
|
3317
3859
|
sk.push(
|
|
3318
|
-
/* @__PURE__ */
|
|
3860
|
+
/* @__PURE__ */ React28.createElement("span", { key: "__sel", className: cx("aura-table__sel", nPinned && "is-pinned") }, /* @__PURE__ */ React28.createElement("span", { className: "aura-skel aura-skel--box" }))
|
|
3319
3861
|
);
|
|
3320
3862
|
vis.forEach(function(c, j) {
|
|
3321
3863
|
sk.push(
|
|
3322
|
-
/* @__PURE__ */
|
|
3864
|
+
/* @__PURE__ */ React28.createElement(
|
|
3323
3865
|
"span",
|
|
3324
3866
|
{
|
|
3325
3867
|
key: c.key,
|
|
3326
3868
|
className: cx("aura-table__td", c.align === "end" && "is-end", isPinned(c) && "is-pinned"),
|
|
3327
3869
|
style: cellStyle(c, j)
|
|
3328
3870
|
},
|
|
3329
|
-
/* @__PURE__ */
|
|
3871
|
+
/* @__PURE__ */ React28.createElement(
|
|
3330
3872
|
"span",
|
|
3331
3873
|
{
|
|
3332
3874
|
className: cx("aura-skel", c.pill && "aura-skel--pill"),
|
|
@@ -3337,24 +3879,24 @@ window.Aura = (() => {
|
|
|
3337
3879
|
);
|
|
3338
3880
|
});
|
|
3339
3881
|
sk.push(
|
|
3340
|
-
/* @__PURE__ */
|
|
3882
|
+
/* @__PURE__ */ React28.createElement("span", { key: "__gr", className: cx("aura-table__gutter aura-table__gutter--end", controls && "has-picker") })
|
|
3341
3883
|
);
|
|
3342
3884
|
skRows.push(
|
|
3343
|
-
/* @__PURE__ */
|
|
3885
|
+
/* @__PURE__ */ React28.createElement("div", { key: "sk" + i, className: "aura-table__row aura-table__row--skeleton", "aria-hidden": true, style: rowStyle }, sk)
|
|
3344
3886
|
);
|
|
3345
3887
|
}
|
|
3346
3888
|
} else if (!rows.length) {
|
|
3347
3889
|
const em = props.empty || {};
|
|
3348
|
-
body = /* @__PURE__ */
|
|
3890
|
+
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));
|
|
3349
3891
|
} else {
|
|
3350
3892
|
const bodyRows = body = [];
|
|
3351
3893
|
if (virtual && start > 0)
|
|
3352
|
-
bodyRows.push(/* @__PURE__ */
|
|
3894
|
+
bodyRows.push(/* @__PURE__ */ React28.createElement("div", { key: "__top", style: { height: start * ROW_H + "px" }, "aria-hidden": true }));
|
|
3353
3895
|
for (let ri = start; ri < end; ri++) {
|
|
3354
3896
|
(function(r, i) {
|
|
3355
3897
|
const k = r[rowKey], isSel = !!selSet[k];
|
|
3356
3898
|
bodyRows.push(
|
|
3357
|
-
/* @__PURE__ */
|
|
3899
|
+
/* @__PURE__ */ React28.createElement(
|
|
3358
3900
|
"div",
|
|
3359
3901
|
{
|
|
3360
3902
|
key: k,
|
|
@@ -3380,13 +3922,13 @@ window.Aura = (() => {
|
|
|
3380
3922
|
})(pageRows[ri], ri);
|
|
3381
3923
|
}
|
|
3382
3924
|
if (virtual && end < pageRows.length)
|
|
3383
|
-
bodyRows.push(/* @__PURE__ */
|
|
3925
|
+
bodyRows.push(/* @__PURE__ */ React28.createElement("div", { key: "__bot", style: { height: (pageRows.length - end) * ROW_H + "px" }, "aria-hidden": true }));
|
|
3384
3926
|
}
|
|
3385
3927
|
let foot = null;
|
|
3386
3928
|
function pagerButton(dir) {
|
|
3387
3929
|
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";
|
|
3388
3930
|
if (props.getPageHref && !off)
|
|
3389
|
-
return /* @__PURE__ */
|
|
3931
|
+
return /* @__PURE__ */ React28.createElement(
|
|
3390
3932
|
Link,
|
|
3391
3933
|
{
|
|
3392
3934
|
ref: dir < 0 ? prevLink : nextLink,
|
|
@@ -3400,9 +3942,9 @@ window.Aura = (() => {
|
|
|
3400
3942
|
}
|
|
3401
3943
|
}
|
|
3402
3944
|
},
|
|
3403
|
-
/* @__PURE__ */
|
|
3945
|
+
/* @__PURE__ */ React28.createElement(Icon, { name: icon })
|
|
3404
3946
|
);
|
|
3405
|
-
return /* @__PURE__ */
|
|
3947
|
+
return /* @__PURE__ */ React28.createElement(
|
|
3406
3948
|
IconButton,
|
|
3407
3949
|
{
|
|
3408
3950
|
icon,
|
|
@@ -3416,9 +3958,9 @@ window.Aura = (() => {
|
|
|
3416
3958
|
}
|
|
3417
3959
|
if (pageSize && (rows.length || busy)) {
|
|
3418
3960
|
const from = rows.length ? first + 1 : 0, to = manual ? first + rows.length : Math.min(first + pageSize, view.length);
|
|
3419
|
-
foot = /* @__PURE__ */
|
|
3961
|
+
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)));
|
|
3420
3962
|
} else if (height && rows.length && !loading) {
|
|
3421
|
-
foot = /* @__PURE__ */
|
|
3963
|
+
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));
|
|
3422
3964
|
}
|
|
3423
3965
|
if (stacked) {
|
|
3424
3966
|
const titleCol = vis[0], pillCol = vis.filter(function(c) {
|
|
@@ -3432,17 +3974,17 @@ window.Aura = (() => {
|
|
|
3432
3974
|
});
|
|
3433
3975
|
let cardBody;
|
|
3434
3976
|
if (loading) {
|
|
3435
|
-
cardBody = /* @__PURE__ */
|
|
3436
|
-
return /* @__PURE__ */
|
|
3977
|
+
cardBody = /* @__PURE__ */ React28.createElement("ul", { className: "aura-table__cards", "aria-busy": true }, [0, 1, 2].map(function(i) {
|
|
3978
|
+
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%" } }));
|
|
3437
3979
|
}));
|
|
3438
3980
|
} else if (!rows.length) {
|
|
3439
3981
|
const em2 = props.empty || {};
|
|
3440
|
-
cardBody = /* @__PURE__ */
|
|
3982
|
+
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));
|
|
3441
3983
|
} else {
|
|
3442
3984
|
const cellVal = cellContent;
|
|
3443
|
-
cardBody = /* @__PURE__ */
|
|
3985
|
+
cardBody = /* @__PURE__ */ React28.createElement("ul", { className: "aura-table__cards", "aria-label": props.label }, pageRows.map(function(r) {
|
|
3444
3986
|
const k = r[rowKey], isSel = !!selSet[k];
|
|
3445
|
-
return /* @__PURE__ */
|
|
3987
|
+
return /* @__PURE__ */ React28.createElement(
|
|
3446
3988
|
"li",
|
|
3447
3989
|
{
|
|
3448
3990
|
key: k,
|
|
@@ -3463,7 +4005,7 @@ window.Aura = (() => {
|
|
|
3463
4005
|
props.onRowActivate(r);
|
|
3464
4006
|
}
|
|
3465
4007
|
},
|
|
3466
|
-
/* @__PURE__ */
|
|
4008
|
+
/* @__PURE__ */ React28.createElement("div", { className: "aura-table__card-head" }, selectable ? /* @__PURE__ */ React28.createElement(
|
|
3467
4009
|
Checkbox,
|
|
3468
4010
|
{
|
|
3469
4011
|
checked: isSel,
|
|
@@ -3472,16 +4014,16 @@ window.Aura = (() => {
|
|
|
3472
4014
|
toggle(k, on);
|
|
3473
4015
|
}
|
|
3474
4016
|
}
|
|
3475
|
-
) : null, /* @__PURE__ */
|
|
3476
|
-
return /* @__PURE__ */
|
|
4017
|
+
) : 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) {
|
|
4018
|
+
return /* @__PURE__ */ React28.createElement("span", { key: c.key, className: "aura-table__card-actions" }, cellVal(c, r));
|
|
3477
4019
|
})),
|
|
3478
|
-
rest.length ? /* @__PURE__ */
|
|
3479
|
-
return /* @__PURE__ */
|
|
4020
|
+
rest.length ? /* @__PURE__ */ React28.createElement("dl", { className: "aura-table__card-fields" }, rest.map(function(c) {
|
|
4021
|
+
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)));
|
|
3480
4022
|
})) : null
|
|
3481
4023
|
);
|
|
3482
4024
|
}));
|
|
3483
4025
|
}
|
|
3484
|
-
return /* @__PURE__ */
|
|
4026
|
+
return /* @__PURE__ */ React28.createElement(
|
|
3485
4027
|
"div",
|
|
3486
4028
|
{
|
|
3487
4029
|
ref: wrapMerged,
|
|
@@ -3490,8 +4032,8 @@ window.Aura = (() => {
|
|
|
3490
4032
|
"aria-label": props.label,
|
|
3491
4033
|
"aria-busy": busy || void 0
|
|
3492
4034
|
},
|
|
3493
|
-
refreshing ? /* @__PURE__ */
|
|
3494
|
-
selectable && pageRows.length && !busy ? /* @__PURE__ */
|
|
4035
|
+
refreshing ? /* @__PURE__ */ React28.createElement("span", { className: "aura-table__busy-bar", "aria-hidden": true }) : null,
|
|
4036
|
+
selectable && pageRows.length && !busy ? /* @__PURE__ */ React28.createElement("div", { className: "aura-table__stack-bar" }, /* @__PURE__ */ React28.createElement(
|
|
3495
4037
|
Checkbox,
|
|
3496
4038
|
{
|
|
3497
4039
|
checked: all,
|
|
@@ -3499,7 +4041,7 @@ window.Aura = (() => {
|
|
|
3499
4041
|
label: all ? t.deselectAllRows : t.selectAllRows,
|
|
3500
4042
|
onChange: toggleAll
|
|
3501
4043
|
}
|
|
3502
|
-
), /* @__PURE__ */
|
|
4044
|
+
), /* @__PURE__ */ React28.createElement("span", null, nSel ? t.selectedCount(nSel) : t.selectAll)) : null,
|
|
3503
4045
|
cardBody,
|
|
3504
4046
|
foot
|
|
3505
4047
|
);
|
|
@@ -3509,14 +4051,14 @@ window.Aura = (() => {
|
|
|
3509
4051
|
scrollPaddingTop: ROW_H + "px"
|
|
3510
4052
|
};
|
|
3511
4053
|
if (height) scrollStyle.height = height + "px";
|
|
3512
|
-
return /* @__PURE__ */
|
|
4054
|
+
return /* @__PURE__ */ React28.createElement(
|
|
3513
4055
|
"div",
|
|
3514
4056
|
{
|
|
3515
4057
|
ref: wrapMerged,
|
|
3516
4058
|
className: cx("aura-table", scrolledX[0] && "is-scrolled-x", refreshing && "is-refreshing", props.className)
|
|
3517
4059
|
},
|
|
3518
|
-
refreshing ? /* @__PURE__ */
|
|
3519
|
-
/* @__PURE__ */
|
|
4060
|
+
refreshing ? /* @__PURE__ */ React28.createElement("span", { className: "aura-table__busy-bar", "aria-hidden": true }) : null,
|
|
4061
|
+
/* @__PURE__ */ React28.createElement(
|
|
3520
4062
|
"div",
|
|
3521
4063
|
{
|
|
3522
4064
|
ref: function(el) {
|
|
@@ -3541,11 +4083,11 @@ window.Aura = (() => {
|
|
|
3541
4083
|
if (sx !== scrolledX[0]) scrolledX[1](sx);
|
|
3542
4084
|
}
|
|
3543
4085
|
},
|
|
3544
|
-
/* @__PURE__ */
|
|
4086
|
+
/* @__PURE__ */ React28.createElement("div", { className: "aura-table__head", role: "row", "aria-rowindex": 1, style: rowStyle }, head),
|
|
3545
4087
|
body
|
|
3546
4088
|
),
|
|
3547
|
-
busy ? /* @__PURE__ */
|
|
3548
|
-
controls ? /* @__PURE__ */
|
|
4089
|
+
busy ? /* @__PURE__ */ React28.createElement("span", { className: "aura-sr-only", role: "status" }, t.loadingRows) : null,
|
|
4090
|
+
controls ? /* @__PURE__ */ React28.createElement("div", { className: "aura-table__picker" }, /* @__PURE__ */ React28.createElement(
|
|
3549
4091
|
IconButton,
|
|
3550
4092
|
{
|
|
3551
4093
|
icon: "columns-3",
|
|
@@ -3557,7 +4099,7 @@ window.Aura = (() => {
|
|
|
3557
4099
|
}
|
|
3558
4100
|
)) : null,
|
|
3559
4101
|
foot,
|
|
3560
|
-
menu ? /* @__PURE__ */
|
|
4102
|
+
menu ? /* @__PURE__ */ React28.createElement(
|
|
3561
4103
|
Menu,
|
|
3562
4104
|
{
|
|
3563
4105
|
anchor: menu.anchor,
|
|
@@ -3570,9 +4112,9 @@ window.Aura = (() => {
|
|
|
3570
4112
|
});
|
|
3571
4113
|
|
|
3572
4114
|
// src/Card.tsx
|
|
3573
|
-
var
|
|
3574
|
-
var h4 =
|
|
3575
|
-
var Card =
|
|
4115
|
+
var React29 = __toESM(require_react(), 1);
|
|
4116
|
+
var h4 = React29.createElement;
|
|
4117
|
+
var Card = React29.forwardRef(function Card2(props, ref) {
|
|
3576
4118
|
const creative = props.variant === "creative";
|
|
3577
4119
|
return h4(
|
|
3578
4120
|
props.as || "section",
|
|
@@ -3586,41 +4128,41 @@ window.Aura = (() => {
|
|
|
3586
4128
|
),
|
|
3587
4129
|
"aria-labelledby": props.title && props.titleId ? props.titleId : void 0
|
|
3588
4130
|
},
|
|
3589
|
-
props.title || props.actions ? /* @__PURE__ */
|
|
3590
|
-
props.children ? /* @__PURE__ */
|
|
3591
|
-
props.footer ? /* @__PURE__ */
|
|
4131
|
+
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,
|
|
4132
|
+
props.children ? /* @__PURE__ */ React29.createElement("div", { className: "aura-card__body" }, props.children) : null,
|
|
4133
|
+
props.footer ? /* @__PURE__ */ React29.createElement("div", { className: "aura-card__foot" }, props.footer) : null
|
|
3592
4134
|
);
|
|
3593
4135
|
});
|
|
3594
4136
|
|
|
3595
4137
|
// src/Tabs.tsx
|
|
3596
|
-
var
|
|
3597
|
-
var Tabs =
|
|
3598
|
-
const
|
|
4138
|
+
var React30 = __toESM(require_react(), 1);
|
|
4139
|
+
var Tabs = React30.forwardRef(function Tabs2(props, ref) {
|
|
4140
|
+
const items2 = props.tabs || [], base = uid();
|
|
3599
4141
|
const st = useMaybeControlled(
|
|
3600
4142
|
props.value,
|
|
3601
|
-
props.defaultValue ||
|
|
4143
|
+
props.defaultValue || items2[0] && items2[0].id,
|
|
3602
4144
|
props.onChange
|
|
3603
4145
|
);
|
|
3604
|
-
const refs =
|
|
3605
|
-
const current2 =
|
|
4146
|
+
const refs = React30.useRef({});
|
|
4147
|
+
const current2 = items2.filter(function(t) {
|
|
3606
4148
|
return t.id === st[0];
|
|
3607
|
-
})[0] ||
|
|
4149
|
+
})[0] || items2[0];
|
|
3608
4150
|
function go(i) {
|
|
3609
|
-
const enabled =
|
|
4151
|
+
const enabled = items2.filter(function(t2) {
|
|
3610
4152
|
return !t2.disabled;
|
|
3611
4153
|
});
|
|
3612
4154
|
const t = enabled[(i + enabled.length) % enabled.length];
|
|
3613
4155
|
st[1](t.id);
|
|
3614
4156
|
if (refs.current[t.id]) refs.current[t.id].focus();
|
|
3615
4157
|
}
|
|
3616
|
-
return /* @__PURE__ */
|
|
4158
|
+
return /* @__PURE__ */ React30.createElement("div", { ref, className: cx("aura-tabs", props.className) }, /* @__PURE__ */ React30.createElement(
|
|
3617
4159
|
"div",
|
|
3618
4160
|
{
|
|
3619
4161
|
role: "tablist",
|
|
3620
4162
|
"aria-label": props.label,
|
|
3621
4163
|
className: "aura-tabs__list",
|
|
3622
4164
|
onKeyDown: function(e) {
|
|
3623
|
-
const enabled =
|
|
4165
|
+
const enabled = items2.filter(function(t) {
|
|
3624
4166
|
return !t.disabled;
|
|
3625
4167
|
}), i = enabled.indexOf(current2);
|
|
3626
4168
|
if (e.key === "ArrowRight") {
|
|
@@ -3638,9 +4180,9 @@ window.Aura = (() => {
|
|
|
3638
4180
|
}
|
|
3639
4181
|
}
|
|
3640
4182
|
},
|
|
3641
|
-
|
|
4183
|
+
items2.map(function(t) {
|
|
3642
4184
|
const on = current2 && t.id === current2.id;
|
|
3643
|
-
return /* @__PURE__ */
|
|
4185
|
+
return /* @__PURE__ */ React30.createElement(
|
|
3644
4186
|
"button",
|
|
3645
4187
|
{
|
|
3646
4188
|
key: t.id,
|
|
@@ -3659,12 +4201,12 @@ window.Aura = (() => {
|
|
|
3659
4201
|
st[1](t.id);
|
|
3660
4202
|
}
|
|
3661
4203
|
},
|
|
3662
|
-
t.icon ? /* @__PURE__ */
|
|
4204
|
+
t.icon ? /* @__PURE__ */ React30.createElement(Icon, { name: t.icon }) : null,
|
|
3663
4205
|
t.label,
|
|
3664
|
-
t.count != null ? /* @__PURE__ */
|
|
4206
|
+
t.count != null ? /* @__PURE__ */ React30.createElement("span", { className: "aura-tab__count" }, t.count) : null
|
|
3665
4207
|
);
|
|
3666
4208
|
})
|
|
3667
|
-
), current2 && current2.content !== void 0 ? /* @__PURE__ */
|
|
4209
|
+
), current2 && current2.content !== void 0 ? /* @__PURE__ */ React30.createElement(
|
|
3668
4210
|
"div",
|
|
3669
4211
|
{
|
|
3670
4212
|
role: "tabpanel",
|
|
@@ -3678,13 +4220,13 @@ window.Aura = (() => {
|
|
|
3678
4220
|
});
|
|
3679
4221
|
|
|
3680
4222
|
// src/SideNav.tsx
|
|
3681
|
-
var
|
|
4223
|
+
var React31 = __toESM(require_react(), 1);
|
|
3682
4224
|
function contains(it, id) {
|
|
3683
4225
|
return !!id && !!it.children && it.children.some(function(c) {
|
|
3684
4226
|
return c.id === id || contains(c, id);
|
|
3685
4227
|
});
|
|
3686
4228
|
}
|
|
3687
|
-
var SideNav =
|
|
4229
|
+
var SideNav = React31.forwardRef(function SideNav2(props, ref) {
|
|
3688
4230
|
const t = useStrings();
|
|
3689
4231
|
const Link = useLinkComponent(props.linkComponent);
|
|
3690
4232
|
const base = uid();
|
|
@@ -3695,12 +4237,12 @@ window.Aura = (() => {
|
|
|
3695
4237
|
);
|
|
3696
4238
|
const active = st[0];
|
|
3697
4239
|
const sections = props.sections || [{ items: props.items || [] }];
|
|
3698
|
-
const openState =
|
|
4240
|
+
const openState = React31.useState({}), toggled = openState[0], setToggled = openState[1];
|
|
3699
4241
|
function isOpen(it) {
|
|
3700
4242
|
if (toggled[it.id] != null) return toggled[it.id];
|
|
3701
4243
|
return !!it.defaultOpen || contains(it, active);
|
|
3702
4244
|
}
|
|
3703
|
-
|
|
4245
|
+
React31.useEffect(
|
|
3704
4246
|
function() {
|
|
3705
4247
|
if (!active) return;
|
|
3706
4248
|
const next = {};
|
|
@@ -3722,14 +4264,14 @@ window.Aura = (() => {
|
|
|
3722
4264
|
},
|
|
3723
4265
|
[active]
|
|
3724
4266
|
);
|
|
3725
|
-
const navRef =
|
|
4267
|
+
const navRef = React31.useRef(null);
|
|
3726
4268
|
function onKeyDown(e) {
|
|
3727
4269
|
const k = e.key;
|
|
3728
4270
|
if (k !== "ArrowDown" && k !== "ArrowUp" && k !== "Home" && k !== "End") return;
|
|
3729
4271
|
const root = navRef.current;
|
|
3730
4272
|
if (!root) return;
|
|
3731
|
-
const
|
|
3732
|
-
const visible =
|
|
4273
|
+
const items2 = Array.prototype.slice.call(root.querySelectorAll(".aura-nav__item"));
|
|
4274
|
+
const visible = items2.filter(function(el) {
|
|
3733
4275
|
return el.offsetParent !== null || el === document.activeElement;
|
|
3734
4276
|
});
|
|
3735
4277
|
const i = visible.indexOf(document.activeElement);
|
|
@@ -3740,11 +4282,11 @@ window.Aura = (() => {
|
|
|
3740
4282
|
}
|
|
3741
4283
|
function inner(it, group, open) {
|
|
3742
4284
|
return [
|
|
3743
|
-
it.icon ? /* @__PURE__ */
|
|
3744
|
-
/* @__PURE__ */
|
|
3745
|
-
it.badge != null ? /* @__PURE__ */
|
|
3746
|
-
it.count != null ? /* @__PURE__ */
|
|
3747
|
-
group ? /* @__PURE__ */
|
|
4285
|
+
it.icon ? /* @__PURE__ */ React31.createElement(Icon, { key: "i", name: it.icon }) : null,
|
|
4286
|
+
/* @__PURE__ */ React31.createElement("span", { key: "l", className: "aura-nav__label" }, it.label),
|
|
4287
|
+
it.badge != null ? /* @__PURE__ */ React31.createElement("span", { key: "b", className: "aura-nav__badge" }, it.badge) : null,
|
|
4288
|
+
it.count != null ? /* @__PURE__ */ React31.createElement("span", { key: "c", className: "aura-nav__count" }, it.count) : null,
|
|
4289
|
+
group ? /* @__PURE__ */ React31.createElement(Icon, { key: "g", name: "chevron-down", className: cx("aura-nav__chevron", open && "is-open") }) : null
|
|
3748
4290
|
];
|
|
3749
4291
|
}
|
|
3750
4292
|
function item(it, depth) {
|
|
@@ -3752,7 +4294,7 @@ window.Aura = (() => {
|
|
|
3752
4294
|
const open = isOpen(it);
|
|
3753
4295
|
const listId = base + "-" + it.id;
|
|
3754
4296
|
const holdsActive = contains(it, active);
|
|
3755
|
-
return /* @__PURE__ */
|
|
4297
|
+
return /* @__PURE__ */ React31.createElement("li", { key: it.id, className: "aura-nav__group" }, /* @__PURE__ */ React31.createElement(
|
|
3756
4298
|
"button",
|
|
3757
4299
|
{
|
|
3758
4300
|
type: "button",
|
|
@@ -3776,7 +4318,7 @@ window.Aura = (() => {
|
|
|
3776
4318
|
}
|
|
3777
4319
|
},
|
|
3778
4320
|
inner(it, true, open)
|
|
3779
|
-
), /* @__PURE__ */
|
|
4321
|
+
), /* @__PURE__ */ React31.createElement("ul", { id: listId, className: "aura-nav__list aura-nav__sub", hidden: !open }, it.children.map(function(c) {
|
|
3780
4322
|
return item(c, depth + 1);
|
|
3781
4323
|
})));
|
|
3782
4324
|
}
|
|
@@ -3790,9 +4332,9 @@ window.Aura = (() => {
|
|
|
3790
4332
|
st[1](it.id);
|
|
3791
4333
|
}
|
|
3792
4334
|
};
|
|
3793
|
-
return /* @__PURE__ */
|
|
4335
|
+
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)));
|
|
3794
4336
|
}
|
|
3795
|
-
return /* @__PURE__ */
|
|
4337
|
+
return /* @__PURE__ */ React31.createElement(
|
|
3796
4338
|
"nav",
|
|
3797
4339
|
{
|
|
3798
4340
|
ref: function(el) {
|
|
@@ -3804,43 +4346,43 @@ window.Aura = (() => {
|
|
|
3804
4346
|
"aria-label": props.label || t.mainNav,
|
|
3805
4347
|
onKeyDown
|
|
3806
4348
|
},
|
|
3807
|
-
props.header ? /* @__PURE__ */
|
|
3808
|
-
/* @__PURE__ */
|
|
3809
|
-
return /* @__PURE__ */
|
|
4349
|
+
props.header ? /* @__PURE__ */ React31.createElement("div", { className: "aura-nav__header" }, props.header) : null,
|
|
4350
|
+
/* @__PURE__ */ React31.createElement("div", { className: "aura-nav__scroll" }, sections.map(function(s, i) {
|
|
4351
|
+
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) {
|
|
3810
4352
|
return item(it, 0);
|
|
3811
4353
|
})));
|
|
3812
4354
|
})),
|
|
3813
|
-
props.footer ? /* @__PURE__ */
|
|
4355
|
+
props.footer ? /* @__PURE__ */ React31.createElement("div", { className: "aura-nav__footer" }, props.footer) : null
|
|
3814
4356
|
);
|
|
3815
4357
|
});
|
|
3816
4358
|
|
|
3817
4359
|
// src/Breadcrumb.tsx
|
|
3818
|
-
var
|
|
3819
|
-
var Breadcrumb =
|
|
4360
|
+
var React32 = __toESM(require_react(), 1);
|
|
4361
|
+
var Breadcrumb = React32.forwardRef(function Breadcrumb2(props, ref) {
|
|
3820
4362
|
const t = useStrings();
|
|
3821
4363
|
const Link = useLinkComponent();
|
|
3822
|
-
const
|
|
3823
|
-
return /* @__PURE__ */
|
|
3824
|
-
const last = i ===
|
|
3825
|
-
return /* @__PURE__ */
|
|
4364
|
+
const items2 = props.items || [];
|
|
4365
|
+
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) {
|
|
4366
|
+
const last = i === items2.length - 1;
|
|
4367
|
+
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" }));
|
|
3826
4368
|
})));
|
|
3827
4369
|
});
|
|
3828
4370
|
|
|
3829
4371
|
// src/Avatar.tsx
|
|
3830
|
-
var
|
|
4372
|
+
var React33 = __toESM(require_react(), 1);
|
|
3831
4373
|
var AVATAR_TONES = ["progress", "ready", "neutral", "warning"];
|
|
3832
4374
|
function initials(name) {
|
|
3833
4375
|
const parts = String(name || "?").trim().split(/\s+/);
|
|
3834
4376
|
return ((parts[0] || "?")[0] + (parts.length > 1 ? parts[parts.length - 1][0] : parts[0][1] || "")).toUpperCase();
|
|
3835
4377
|
}
|
|
3836
|
-
var Avatar =
|
|
3837
|
-
const size = props.size || "md", errState =
|
|
4378
|
+
var Avatar = React33.forwardRef(function Avatar2(props, ref) {
|
|
4379
|
+
const size = props.size || "md", errState = React33.useState(false);
|
|
3838
4380
|
let hash = 0;
|
|
3839
4381
|
String(props.name || "").split("").forEach(function(ch) {
|
|
3840
4382
|
hash = hash * 31 + ch.charCodeAt(0) >>> 0;
|
|
3841
4383
|
});
|
|
3842
4384
|
const tone2 = AVATAR_TONES[hash % AVATAR_TONES.length];
|
|
3843
|
-
return /* @__PURE__ */
|
|
4385
|
+
return /* @__PURE__ */ React33.createElement(
|
|
3844
4386
|
"span",
|
|
3845
4387
|
{
|
|
3846
4388
|
ref,
|
|
@@ -3848,7 +4390,7 @@ window.Aura = (() => {
|
|
|
3848
4390
|
role: "img",
|
|
3849
4391
|
"aria-label": props.name + (props.status ? ", " + props.status : "")
|
|
3850
4392
|
},
|
|
3851
|
-
props.src && !errState[0] ? /* @__PURE__ */
|
|
4393
|
+
props.src && !errState[0] ? /* @__PURE__ */ React33.createElement(
|
|
3852
4394
|
"img",
|
|
3853
4395
|
{
|
|
3854
4396
|
src: props.src,
|
|
@@ -3857,20 +4399,20 @@ window.Aura = (() => {
|
|
|
3857
4399
|
errState[1](true);
|
|
3858
4400
|
}
|
|
3859
4401
|
}
|
|
3860
|
-
) : /* @__PURE__ */
|
|
3861
|
-
props.status === "online" ? /* @__PURE__ */
|
|
4402
|
+
) : /* @__PURE__ */ React33.createElement("span", { "aria-hidden": true }, initials(props.name)),
|
|
4403
|
+
props.status === "online" ? /* @__PURE__ */ React33.createElement("span", { className: "aura-avatar__status", "aria-hidden": true }) : null
|
|
3862
4404
|
);
|
|
3863
4405
|
});
|
|
3864
4406
|
|
|
3865
4407
|
// src/Stack.tsx
|
|
3866
|
-
var
|
|
4408
|
+
var React35 = __toESM(require_react(), 1);
|
|
3867
4409
|
|
|
3868
4410
|
// src/responsive.tsx
|
|
3869
|
-
var
|
|
4411
|
+
var React34 = __toESM(require_react(), 1);
|
|
3870
4412
|
var breakpoints = { sm: 640, md: 768, lg: 1024, xl: 1280 };
|
|
3871
4413
|
var ORDER = ["base", "sm", "md", "lg", "xl"];
|
|
3872
4414
|
function useBreakpoint() {
|
|
3873
|
-
return
|
|
4415
|
+
return React34.useSyncExternalStore(subscribe, current, function() {
|
|
3874
4416
|
return "lg";
|
|
3875
4417
|
});
|
|
3876
4418
|
}
|
|
@@ -3910,8 +4452,8 @@ window.Aura = (() => {
|
|
|
3910
4452
|
};
|
|
3911
4453
|
|
|
3912
4454
|
// src/Stack.tsx
|
|
3913
|
-
var h5 =
|
|
3914
|
-
var Stack =
|
|
4455
|
+
var h5 = React35.createElement;
|
|
4456
|
+
var Stack = React35.forwardRef(function Stack2(props, ref) {
|
|
3915
4457
|
const style = Object.assign(
|
|
3916
4458
|
{},
|
|
3917
4459
|
respVars("aura-stack-dir", props.direction || "column"),
|
|
@@ -3925,9 +4467,9 @@ window.Aura = (() => {
|
|
|
3925
4467
|
});
|
|
3926
4468
|
|
|
3927
4469
|
// src/Grid.tsx
|
|
3928
|
-
var
|
|
3929
|
-
var h6 =
|
|
3930
|
-
var Grid =
|
|
4470
|
+
var React36 = __toESM(require_react(), 1);
|
|
4471
|
+
var h6 = React36.createElement;
|
|
4472
|
+
var Grid = React36.forwardRef(function Grid2(props, ref) {
|
|
3931
4473
|
const style = Object.assign(
|
|
3932
4474
|
{},
|
|
3933
4475
|
respVars("aura-grid-gap", props.gap == null ? 6 : props.gap, space),
|
|
@@ -3942,9 +4484,9 @@ window.Aura = (() => {
|
|
|
3942
4484
|
});
|
|
3943
4485
|
|
|
3944
4486
|
// src/Container.tsx
|
|
3945
|
-
var
|
|
3946
|
-
var h7 =
|
|
3947
|
-
var Container =
|
|
4487
|
+
var React37 = __toESM(require_react(), 1);
|
|
4488
|
+
var h7 = React37.createElement;
|
|
4489
|
+
var Container = React37.forwardRef(function Container2(props, ref) {
|
|
3948
4490
|
return h7(
|
|
3949
4491
|
props.as || "div",
|
|
3950
4492
|
{
|
|
@@ -3957,27 +4499,27 @@ window.Aura = (() => {
|
|
|
3957
4499
|
});
|
|
3958
4500
|
|
|
3959
4501
|
// src/AppShell.tsx
|
|
3960
|
-
var
|
|
3961
|
-
var AppShell =
|
|
4502
|
+
var React38 = __toESM(require_react(), 1);
|
|
4503
|
+
var AppShell = React38.forwardRef(function AppShell2(props, ref) {
|
|
3962
4504
|
const t = useStrings();
|
|
3963
4505
|
const bp = useBreakpoint();
|
|
3964
4506
|
const compact = bp === "base" || bp === "sm" || bp === "md";
|
|
3965
|
-
const st =
|
|
3966
|
-
|
|
4507
|
+
const st = React38.useState(false), open = st[0], setOpen = st[1];
|
|
4508
|
+
React38.useEffect(
|
|
3967
4509
|
function() {
|
|
3968
4510
|
if (!compact) setOpen(false);
|
|
3969
4511
|
},
|
|
3970
4512
|
[compact]
|
|
3971
4513
|
);
|
|
3972
4514
|
const navEl = props.nav;
|
|
3973
|
-
const nav = props.nav &&
|
|
4515
|
+
const nav = props.nav && React38.isValidElement(props.nav) && compact ? React38.cloneElement(navEl, {
|
|
3974
4516
|
onChange: function(id) {
|
|
3975
4517
|
if (navEl.props.onChange) navEl.props.onChange(id);
|
|
3976
4518
|
setOpen(false);
|
|
3977
4519
|
},
|
|
3978
4520
|
className: cx(navEl.props.className, "is-in-drawer")
|
|
3979
4521
|
}) : props.nav;
|
|
3980
|
-
return /* @__PURE__ */
|
|
4522
|
+
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(
|
|
3981
4523
|
Drawer,
|
|
3982
4524
|
{
|
|
3983
4525
|
open,
|
|
@@ -3990,7 +4532,7 @@ window.Aura = (() => {
|
|
|
3990
4532
|
dismissible: true
|
|
3991
4533
|
},
|
|
3992
4534
|
nav
|
|
3993
|
-
) : null, /* @__PURE__ */
|
|
4535
|
+
) : null, /* @__PURE__ */ React38.createElement("div", { className: "aura-shell__main" }, props.header || compact ? /* @__PURE__ */ React38.createElement("header", { className: "aura-shell__bar" }, compact ? /* @__PURE__ */ React38.createElement(
|
|
3994
4536
|
IconButton,
|
|
3995
4537
|
{
|
|
3996
4538
|
icon: "menu",
|
|
@@ -4001,13 +4543,13 @@ window.Aura = (() => {
|
|
|
4001
4543
|
},
|
|
4002
4544
|
"aria-expanded": open
|
|
4003
4545
|
}
|
|
4004
|
-
) : null, /* @__PURE__ */
|
|
4546
|
+
) : 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)));
|
|
4005
4547
|
});
|
|
4006
4548
|
|
|
4007
4549
|
// src/Surface.tsx
|
|
4008
|
-
var
|
|
4009
|
-
var h8 =
|
|
4010
|
-
var Surface =
|
|
4550
|
+
var React39 = __toESM(require_react(), 1);
|
|
4551
|
+
var h8 = React39.createElement;
|
|
4552
|
+
var Surface = React39.forwardRef(function Surface2(props, ref) {
|
|
4011
4553
|
const t = props.texture || "mesh";
|
|
4012
4554
|
const rest = omit(props, ["texture", "className", "children", "as"]);
|
|
4013
4555
|
return h8(
|
|
@@ -4028,8 +4570,8 @@ window.Aura = (() => {
|
|
|
4028
4570
|
});
|
|
4029
4571
|
|
|
4030
4572
|
// src/Stat.tsx
|
|
4031
|
-
var
|
|
4032
|
-
var Stat =
|
|
4573
|
+
var React40 = __toESM(require_react(), 1);
|
|
4574
|
+
var Stat = React40.forwardRef(function Stat2(props, ref) {
|
|
4033
4575
|
const ch = props.change;
|
|
4034
4576
|
const dir = ch && (ch.direction || "flat");
|
|
4035
4577
|
const tone2 = ch && (ch.tone || (dir === "up" ? "positive" : dir === "down" ? "negative" : "neutral"));
|
|
@@ -4038,7 +4580,7 @@ window.Aura = (() => {
|
|
|
4038
4580
|
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, ""));
|
|
4039
4581
|
const Tag3 = props.href ? Link : props.onClick ? "button" : "div";
|
|
4040
4582
|
const interactive = !!(props.href || props.onClick);
|
|
4041
|
-
return /* @__PURE__ */
|
|
4583
|
+
return /* @__PURE__ */ React40.createElement(
|
|
4042
4584
|
Tag3,
|
|
4043
4585
|
{
|
|
4044
4586
|
ref,
|
|
@@ -4048,15 +4590,15 @@ window.Aura = (() => {
|
|
|
4048
4590
|
type: Tag3 === "button" ? "button" : void 0,
|
|
4049
4591
|
"aria-busy": props.loading || void 0
|
|
4050
4592
|
},
|
|
4051
|
-
/* @__PURE__ */
|
|
4052
|
-
props.loading ? /* @__PURE__ */
|
|
4053
|
-
ch && !props.loading || props.caption ? /* @__PURE__ */
|
|
4593
|
+
/* @__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),
|
|
4594
|
+
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),
|
|
4595
|
+
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
|
|
4054
4596
|
);
|
|
4055
4597
|
});
|
|
4056
4598
|
|
|
4057
4599
|
// src/TimePicker.tsx
|
|
4058
|
-
var
|
|
4059
|
-
var
|
|
4600
|
+
var React41 = __toESM(require_react(), 1);
|
|
4601
|
+
var import_react_dom8 = __toESM(require_react_dom(), 1);
|
|
4060
4602
|
function pad2(n2) {
|
|
4061
4603
|
return (n2 < 10 ? "0" : "") + n2;
|
|
4062
4604
|
}
|
|
@@ -4079,7 +4621,7 @@ window.Aura = (() => {
|
|
|
4079
4621
|
if (hh > 23 || mm > 59) return null;
|
|
4080
4622
|
return pad2(hh) + ":" + pad2(mm);
|
|
4081
4623
|
}
|
|
4082
|
-
var TimePicker =
|
|
4624
|
+
var TimePicker = React41.forwardRef(function TimePicker2(props, ref) {
|
|
4083
4625
|
const t = useStrings();
|
|
4084
4626
|
const auto = uid(), id = props.id || auto, listId = id + "-list";
|
|
4085
4627
|
const st = useMaybeControlled(
|
|
@@ -4089,7 +4631,7 @@ window.Aura = (() => {
|
|
|
4089
4631
|
);
|
|
4090
4632
|
const value = st[0];
|
|
4091
4633
|
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;
|
|
4092
|
-
const slots =
|
|
4634
|
+
const slots = React41.useMemo(
|
|
4093
4635
|
function() {
|
|
4094
4636
|
const out = [];
|
|
4095
4637
|
for (let m = lo; m <= hi; m += step) out.push(fromMin(m));
|
|
@@ -4101,12 +4643,12 @@ window.Aura = (() => {
|
|
|
4101
4643
|
const n2 = toMin(v);
|
|
4102
4644
|
return n2 == null || n2 < lo || n2 > hi || props.isTimeDisabled && props.isTimeDisabled(v);
|
|
4103
4645
|
}
|
|
4104
|
-
const openState =
|
|
4105
|
-
const editState =
|
|
4106
|
-
const aState =
|
|
4107
|
-
const errState =
|
|
4108
|
-
const pos =
|
|
4109
|
-
const boxRef =
|
|
4646
|
+
const openState = React41.useState(false), open = openState[0], setOpen = openState[1];
|
|
4647
|
+
const editState = React41.useState(null), editing = editState[0], setEditing = editState[1];
|
|
4648
|
+
const aState = React41.useState(0), active = aState[0], setActive = aState[1];
|
|
4649
|
+
const errState = React41.useState(null);
|
|
4650
|
+
const pos = React41.useState(null);
|
|
4651
|
+
const boxRef = React41.useRef(null), inputRef = React41.useRef(null), listRef = React41.useRef(null), inputMerged = useMergedRef(ref, inputRef);
|
|
4110
4652
|
const mounted = useMounted();
|
|
4111
4653
|
function nearest(v) {
|
|
4112
4654
|
const n2 = toMin(v);
|
|
@@ -4134,7 +4676,7 @@ window.Aura = (() => {
|
|
|
4134
4676
|
},
|
|
4135
4677
|
[open]
|
|
4136
4678
|
);
|
|
4137
|
-
|
|
4679
|
+
React41.useEffect(
|
|
4138
4680
|
function() {
|
|
4139
4681
|
if (!open) return;
|
|
4140
4682
|
function outside(e) {
|
|
@@ -4156,7 +4698,7 @@ window.Aura = (() => {
|
|
|
4156
4698
|
},
|
|
4157
4699
|
[open]
|
|
4158
4700
|
);
|
|
4159
|
-
|
|
4701
|
+
React41.useEffect(
|
|
4160
4702
|
function() {
|
|
4161
4703
|
if (!open || !listRef.current) return;
|
|
4162
4704
|
const el = listRef.current.querySelector('[data-idx="' + active + '"]');
|
|
@@ -4164,7 +4706,7 @@ window.Aura = (() => {
|
|
|
4164
4706
|
},
|
|
4165
4707
|
[active, open]
|
|
4166
4708
|
);
|
|
4167
|
-
function
|
|
4709
|
+
function show2() {
|
|
4168
4710
|
if (open || props.disabled || props.readOnly) return;
|
|
4169
4711
|
setActive(nearest(value || props.suggest || fromMin(lo)));
|
|
4170
4712
|
setOpen(true);
|
|
@@ -4214,11 +4756,11 @@ window.Aura = (() => {
|
|
|
4214
4756
|
const k = e.key;
|
|
4215
4757
|
if (k === "ArrowDown") {
|
|
4216
4758
|
e.preventDefault();
|
|
4217
|
-
if (!open)
|
|
4759
|
+
if (!open) show2();
|
|
4218
4760
|
else move(1);
|
|
4219
4761
|
} else if (k === "ArrowUp") {
|
|
4220
4762
|
e.preventDefault();
|
|
4221
|
-
if (!open)
|
|
4763
|
+
if (!open) show2();
|
|
4222
4764
|
else move(-1);
|
|
4223
4765
|
} else if (k === "Home" && open) {
|
|
4224
4766
|
e.preventDefault();
|
|
@@ -4253,10 +4795,10 @@ window.Aura = (() => {
|
|
|
4253
4795
|
}
|
|
4254
4796
|
}
|
|
4255
4797
|
const error = errState[0] || props.error;
|
|
4256
|
-
const list = open && mounted && pos[0] ? (0,
|
|
4257
|
-
/* @__PURE__ */
|
|
4798
|
+
const list = open && mounted && pos[0] ? (0, import_react_dom8.createPortal)(
|
|
4799
|
+
/* @__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) {
|
|
4258
4800
|
const dis = blocked(s), sel = s === value;
|
|
4259
|
-
return /* @__PURE__ */
|
|
4801
|
+
return /* @__PURE__ */ React41.createElement(
|
|
4260
4802
|
"li",
|
|
4261
4803
|
{
|
|
4262
4804
|
key: s,
|
|
@@ -4281,13 +4823,13 @@ window.Aura = (() => {
|
|
|
4281
4823
|
if (active !== i) setActive(i);
|
|
4282
4824
|
}
|
|
4283
4825
|
},
|
|
4284
|
-
/* @__PURE__ */
|
|
4285
|
-
sel ? /* @__PURE__ */
|
|
4826
|
+
/* @__PURE__ */ React41.createElement("span", { className: "aura-combo__label" }, s),
|
|
4827
|
+
sel ? /* @__PURE__ */ React41.createElement(Icon, { name: "check", className: "aura-combo__check" }) : null
|
|
4286
4828
|
);
|
|
4287
4829
|
}))),
|
|
4288
4830
|
document.body
|
|
4289
4831
|
) : null;
|
|
4290
|
-
return /* @__PURE__ */
|
|
4832
|
+
return /* @__PURE__ */ React41.createElement(
|
|
4291
4833
|
Field,
|
|
4292
4834
|
{
|
|
4293
4835
|
id,
|
|
@@ -4299,7 +4841,7 @@ window.Aura = (() => {
|
|
|
4299
4841
|
disabled: props.disabled,
|
|
4300
4842
|
className: props.className
|
|
4301
4843
|
},
|
|
4302
|
-
/* @__PURE__ */
|
|
4844
|
+
/* @__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(
|
|
4303
4845
|
"input",
|
|
4304
4846
|
{
|
|
4305
4847
|
ref: inputMerged,
|
|
@@ -4325,11 +4867,11 @@ window.Aura = (() => {
|
|
|
4325
4867
|
setEditing(e.target.value);
|
|
4326
4868
|
const v = parseTime(e.target.value);
|
|
4327
4869
|
if (v) {
|
|
4328
|
-
if (!open)
|
|
4870
|
+
if (!open) show2();
|
|
4329
4871
|
setActive(nearest(v));
|
|
4330
4872
|
}
|
|
4331
4873
|
},
|
|
4332
|
-
onClick:
|
|
4874
|
+
onClick: show2,
|
|
4333
4875
|
onKeyDown,
|
|
4334
4876
|
onBlur: function() {
|
|
4335
4877
|
setTimeout(function() {
|
|
@@ -4339,7 +4881,7 @@ window.Aura = (() => {
|
|
|
4339
4881
|
}, 0);
|
|
4340
4882
|
}
|
|
4341
4883
|
}
|
|
4342
|
-
), props.clearable !== false && value != null && !props.disabled ? /* @__PURE__ */
|
|
4884
|
+
), props.clearable !== false && value != null && !props.disabled ? /* @__PURE__ */ React41.createElement(
|
|
4343
4885
|
"button",
|
|
4344
4886
|
{
|
|
4345
4887
|
type: "button",
|
|
@@ -4352,8 +4894,8 @@ window.Aura = (() => {
|
|
|
4352
4894
|
if (inputRef.current) inputRef.current.focus();
|
|
4353
4895
|
}
|
|
4354
4896
|
},
|
|
4355
|
-
/* @__PURE__ */
|
|
4356
|
-
) : null, /* @__PURE__ */
|
|
4897
|
+
/* @__PURE__ */ React41.createElement(Icon, { name: "x" })
|
|
4898
|
+
) : null, /* @__PURE__ */ React41.createElement(
|
|
4357
4899
|
"button",
|
|
4358
4900
|
{
|
|
4359
4901
|
type: "button",
|
|
@@ -4366,19 +4908,19 @@ window.Aura = (() => {
|
|
|
4366
4908
|
onClick: function() {
|
|
4367
4909
|
if (open) setOpen(false);
|
|
4368
4910
|
else {
|
|
4369
|
-
|
|
4911
|
+
show2();
|
|
4370
4912
|
inputRef.current && inputRef.current.focus();
|
|
4371
4913
|
}
|
|
4372
4914
|
}
|
|
4373
4915
|
},
|
|
4374
|
-
/* @__PURE__ */
|
|
4916
|
+
/* @__PURE__ */ React41.createElement(Icon, { name: "chevron-down" })
|
|
4375
4917
|
)),
|
|
4376
4918
|
list
|
|
4377
4919
|
);
|
|
4378
4920
|
});
|
|
4379
4921
|
|
|
4380
4922
|
// src/FileUpload.tsx
|
|
4381
|
-
var
|
|
4923
|
+
var React42 = __toESM(require_react(), 1);
|
|
4382
4924
|
function formatBytes(n2) {
|
|
4383
4925
|
if (n2 == null) return "";
|
|
4384
4926
|
if (n2 < 1024) return n2 + " B";
|
|
@@ -4412,17 +4954,17 @@ window.Aura = (() => {
|
|
|
4412
4954
|
}).join(", ");
|
|
4413
4955
|
}
|
|
4414
4956
|
var seq = 0;
|
|
4415
|
-
var FileUpload =
|
|
4957
|
+
var FileUpload = React42.forwardRef(function FileUpload2(props, ref) {
|
|
4416
4958
|
const t = useStrings();
|
|
4417
4959
|
const auto = uid(), id = props.id || auto;
|
|
4418
4960
|
const st = useMaybeControlled(props.value, props.defaultValue || [], props.onChange);
|
|
4419
|
-
const
|
|
4420
|
-
const dragState =
|
|
4421
|
-
const inputRef =
|
|
4422
|
-
const urls =
|
|
4961
|
+
const items2 = st[0] || [];
|
|
4962
|
+
const dragState = React42.useState(false), over = dragState[0];
|
|
4963
|
+
const inputRef = React42.useRef(null), inputMerged = useMergedRef(ref, inputRef);
|
|
4964
|
+
const urls = React42.useRef({});
|
|
4423
4965
|
const maxFiles = props.multiple ? props.maxFiles : 1;
|
|
4424
4966
|
const note = t.accepts(describeAccept(props.accept, t), props.maxSize ? formatBytes(props.maxSize) : "");
|
|
4425
|
-
|
|
4967
|
+
React42.useEffect(function() {
|
|
4426
4968
|
return function() {
|
|
4427
4969
|
Object.keys(urls.current).forEach(function(k) {
|
|
4428
4970
|
URL.revokeObjectURL(urls.current[k]);
|
|
@@ -4437,7 +4979,7 @@ window.Aura = (() => {
|
|
|
4437
4979
|
function add(list) {
|
|
4438
4980
|
const files = Array.prototype.slice.call(list || []);
|
|
4439
4981
|
if (!files.length || props.disabled) return;
|
|
4440
|
-
const keep = props.multiple ?
|
|
4982
|
+
const keep = props.multiple ? items2.slice() : [];
|
|
4441
4983
|
let room = maxFiles ? maxFiles - keep.filter(function(i) {
|
|
4442
4984
|
return !i.error;
|
|
4443
4985
|
}).length : Infinity;
|
|
@@ -4465,7 +5007,7 @@ window.Aura = (() => {
|
|
|
4465
5007
|
delete urls.current[it.id];
|
|
4466
5008
|
}
|
|
4467
5009
|
st[1](
|
|
4468
|
-
|
|
5010
|
+
items2.filter(function(x) {
|
|
4469
5011
|
return x.id !== it.id;
|
|
4470
5012
|
})
|
|
4471
5013
|
);
|
|
@@ -4473,7 +5015,7 @@ window.Aura = (() => {
|
|
|
4473
5015
|
if (inputRef.current) inputRef.current.focus();
|
|
4474
5016
|
}
|
|
4475
5017
|
const error = props.error;
|
|
4476
|
-
return /* @__PURE__ */
|
|
5018
|
+
return /* @__PURE__ */ React42.createElement(
|
|
4477
5019
|
Field,
|
|
4478
5020
|
{
|
|
4479
5021
|
id,
|
|
@@ -4485,7 +5027,7 @@ window.Aura = (() => {
|
|
|
4485
5027
|
disabled: props.disabled,
|
|
4486
5028
|
className: props.className
|
|
4487
5029
|
},
|
|
4488
|
-
/* @__PURE__ */
|
|
5030
|
+
/* @__PURE__ */ React42.createElement(
|
|
4489
5031
|
"div",
|
|
4490
5032
|
{
|
|
4491
5033
|
className: cx("aura-upload", over && "is-over", props.disabled && "is-disabled", error && "is-invalid"),
|
|
@@ -4506,9 +5048,9 @@ window.Aura = (() => {
|
|
|
4506
5048
|
add(e.dataTransfer && e.dataTransfer.files);
|
|
4507
5049
|
}
|
|
4508
5050
|
},
|
|
4509
|
-
/* @__PURE__ */
|
|
4510
|
-
/* @__PURE__ */
|
|
4511
|
-
/* @__PURE__ */
|
|
5051
|
+
/* @__PURE__ */ React42.createElement(Icon, { name: "cloud-upload", size: "lg", className: "aura-upload__icon" }),
|
|
5052
|
+
/* @__PURE__ */ React42.createElement("span", { className: "aura-upload__text" }, t.dropFiles, " "),
|
|
5053
|
+
/* @__PURE__ */ React42.createElement(
|
|
4512
5054
|
"input",
|
|
4513
5055
|
{
|
|
4514
5056
|
ref: inputMerged,
|
|
@@ -4519,7 +5061,7 @@ window.Aura = (() => {
|
|
|
4519
5061
|
multiple: !!props.multiple,
|
|
4520
5062
|
disabled: props.disabled,
|
|
4521
5063
|
name: props.name,
|
|
4522
|
-
required: props.required && !
|
|
5064
|
+
required: props.required && !items2.some(function(i) {
|
|
4523
5065
|
return !i.error;
|
|
4524
5066
|
}),
|
|
4525
5067
|
"aria-invalid": error ? true : void 0,
|
|
@@ -4530,12 +5072,12 @@ window.Aura = (() => {
|
|
|
4530
5072
|
}
|
|
4531
5073
|
}
|
|
4532
5074
|
),
|
|
4533
|
-
/* @__PURE__ */
|
|
4534
|
-
note ? /* @__PURE__ */
|
|
5075
|
+
/* @__PURE__ */ React42.createElement("span", { className: "aura-upload__browse", "aria-hidden": true }, props.multiple ? t.browse : t.browseOne),
|
|
5076
|
+
note ? /* @__PURE__ */ React42.createElement("span", { className: "aura-upload__note", id: id + "-note" }, note) : null
|
|
4535
5077
|
),
|
|
4536
|
-
|
|
5078
|
+
items2.length ? /* @__PURE__ */ React42.createElement("ul", { className: "aura-upload__list", "aria-live": "polite" }, items2.map(function(it) {
|
|
4537
5079
|
const src = thumb(it);
|
|
4538
|
-
return /* @__PURE__ */
|
|
5080
|
+
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(
|
|
4539
5081
|
"span",
|
|
4540
5082
|
{
|
|
4541
5083
|
className: "aura-upload__bar",
|
|
@@ -4545,8 +5087,8 @@ window.Aura = (() => {
|
|
|
4545
5087
|
"aria-valuemax": 100,
|
|
4546
5088
|
"aria-valuenow": it.progress != null ? Math.round(it.progress) : void 0
|
|
4547
5089
|
},
|
|
4548
|
-
/* @__PURE__ */
|
|
4549
|
-
) : null), /* @__PURE__ */
|
|
5090
|
+
/* @__PURE__ */ React42.createElement("span", { style: { width: (it.progress || 0) + "%" } })
|
|
5091
|
+
) : null), /* @__PURE__ */ React42.createElement(
|
|
4550
5092
|
IconButton,
|
|
4551
5093
|
{
|
|
4552
5094
|
icon: "x",
|
|
@@ -4832,9 +5374,9 @@ window.Aura = (() => {
|
|
|
4832
5374
|
}
|
|
4833
5375
|
|
|
4834
5376
|
// src/ThemeStyle.tsx
|
|
4835
|
-
var
|
|
5377
|
+
var React43 = __toESM(require_react(), 1);
|
|
4836
5378
|
function ThemeStyle(props) {
|
|
4837
|
-
const css =
|
|
5379
|
+
const css = React43.useMemo(
|
|
4838
5380
|
function() {
|
|
4839
5381
|
return createTheme({ brand: props.brand, signal: props.signal, primary: props.primary, name: props.name }).css(
|
|
4840
5382
|
props.selector
|
|
@@ -4842,11 +5384,11 @@ window.Aura = (() => {
|
|
|
4842
5384
|
},
|
|
4843
5385
|
[props.brand, props.signal, props.primary, props.name, props.selector]
|
|
4844
5386
|
);
|
|
4845
|
-
return /* @__PURE__ */
|
|
5387
|
+
return /* @__PURE__ */ React43.createElement("style", { "data-aura-theme": props.name || props.brand, dangerouslySetInnerHTML: { __html: css } });
|
|
4846
5388
|
}
|
|
4847
5389
|
|
|
4848
5390
|
// src/colorScheme.tsx
|
|
4849
|
-
var
|
|
5391
|
+
var React44 = __toESM(require_react(), 1);
|
|
4850
5392
|
var DEFAULT_KEY = "aura-color-scheme";
|
|
4851
5393
|
var SCHEMES = ["light", "dark", "system"];
|
|
4852
5394
|
var EVENT = "aura-color-scheme";
|
|
@@ -4859,7 +5401,7 @@ window.Aura = (() => {
|
|
|
4859
5401
|
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){}})();`;
|
|
4860
5402
|
}
|
|
4861
5403
|
function ColorSchemeScript(props) {
|
|
4862
|
-
return /* @__PURE__ */
|
|
5404
|
+
return /* @__PURE__ */ React44.createElement(
|
|
4863
5405
|
"script",
|
|
4864
5406
|
{
|
|
4865
5407
|
"data-aura-color-scheme": "",
|
|
@@ -4884,7 +5426,7 @@ window.Aura = (() => {
|
|
|
4884
5426
|
function useColorScheme(options) {
|
|
4885
5427
|
const key = options && options.storageKey || DEFAULT_KEY;
|
|
4886
5428
|
const fallback = options && options.defaultScheme || "system";
|
|
4887
|
-
const subscribe2 =
|
|
5429
|
+
const subscribe2 = React44.useCallback(
|
|
4888
5430
|
function(cb) {
|
|
4889
5431
|
const mq = window.matchMedia ? window.matchMedia("(prefers-color-scheme: dark)") : null;
|
|
4890
5432
|
function onSystem() {
|
|
@@ -4902,7 +5444,7 @@ window.Aura = (() => {
|
|
|
4902
5444
|
},
|
|
4903
5445
|
[fallback]
|
|
4904
5446
|
);
|
|
4905
|
-
const snapshot =
|
|
5447
|
+
const snapshot = React44.useSyncExternalStore(
|
|
4906
5448
|
subscribe2,
|
|
4907
5449
|
function() {
|
|
4908
5450
|
const s = readScheme(fallback);
|
|
@@ -4913,7 +5455,7 @@ window.Aura = (() => {
|
|
|
4913
5455
|
}
|
|
4914
5456
|
);
|
|
4915
5457
|
const parts = snapshot.split("|");
|
|
4916
|
-
const setScheme =
|
|
5458
|
+
const setScheme = React44.useCallback(
|
|
4917
5459
|
function(next) {
|
|
4918
5460
|
if (!valid(next)) return;
|
|
4919
5461
|
try {
|
|
@@ -4932,11 +5474,11 @@ window.Aura = (() => {
|
|
|
4932
5474
|
const cs = useColorScheme(props);
|
|
4933
5475
|
const names = { light: t.schemeLight, dark: t.schemeDark, system: t.schemeSystem };
|
|
4934
5476
|
const label = props.label || t.colorScheme;
|
|
4935
|
-
return /* @__PURE__ */
|
|
5477
|
+
return /* @__PURE__ */ React44.createElement(
|
|
4936
5478
|
DropdownMenu,
|
|
4937
5479
|
{
|
|
4938
5480
|
label,
|
|
4939
|
-
trigger: /* @__PURE__ */
|
|
5481
|
+
trigger: /* @__PURE__ */ React44.createElement(IconButton, { icon: cs.resolved === "dark" ? "moon" : "sun", label: label + ": " + names[cs.scheme] }),
|
|
4940
5482
|
items: SCHEMES.map(function(s) {
|
|
4941
5483
|
return {
|
|
4942
5484
|
label: names[s],
|
|
@@ -4951,10 +5493,10 @@ window.Aura = (() => {
|
|
|
4951
5493
|
}
|
|
4952
5494
|
|
|
4953
5495
|
// src/Badge.tsx
|
|
4954
|
-
var
|
|
4955
|
-
var Badge =
|
|
5496
|
+
var React45 = __toESM(require_react(), 1);
|
|
5497
|
+
var Badge = React45.forwardRef(function Badge2(props, ref) {
|
|
4956
5498
|
const rest = omit(props, ["tone", "variant", "icon", "className", "children"]);
|
|
4957
|
-
return /* @__PURE__ */
|
|
5499
|
+
return /* @__PURE__ */ React45.createElement(
|
|
4958
5500
|
"span",
|
|
4959
5501
|
{
|
|
4960
5502
|
...rest,
|
|
@@ -4967,56 +5509,19 @@ window.Aura = (() => {
|
|
|
4967
5509
|
props.className
|
|
4968
5510
|
)
|
|
4969
5511
|
},
|
|
4970
|
-
props.icon ? /* @__PURE__ */
|
|
5512
|
+
props.icon ? /* @__PURE__ */ React45.createElement(Icon, { name: props.icon, size: 12 }) : null,
|
|
4971
5513
|
props.children
|
|
4972
5514
|
);
|
|
4973
5515
|
});
|
|
4974
5516
|
|
|
4975
|
-
// src/Tag.tsx
|
|
4976
|
-
var React41 = __toESM(require_react(), 1);
|
|
4977
|
-
var Tag = React41.forwardRef(function Tag2(props, ref) {
|
|
4978
|
-
const t = useStrings();
|
|
4979
|
-
const selectable = props.onClick != null || props.selected != null;
|
|
4980
|
-
const rest = omit(props, ["onRemove", "selected", "icon", "className", "children", "disabled", "removeLabel"]);
|
|
4981
|
-
const inner = [
|
|
4982
|
-
props.icon ? /* @__PURE__ */ React41.createElement(Icon, { key: "i", name: props.icon, size: 14 }) : null,
|
|
4983
|
-
/* @__PURE__ */ React41.createElement("span", { key: "t", className: "aura-tag__text" }, props.children)
|
|
4984
|
-
];
|
|
4985
|
-
if (selectable) {
|
|
4986
|
-
return /* @__PURE__ */ React41.createElement(
|
|
4987
|
-
"button",
|
|
4988
|
-
{
|
|
4989
|
-
...rest,
|
|
4990
|
-
ref,
|
|
4991
|
-
type: "button",
|
|
4992
|
-
"aria-pressed": !!props.selected,
|
|
4993
|
-
disabled: props.disabled,
|
|
4994
|
-
className: cx("aura-tag is-selectable", props.selected && "is-selected", props.className)
|
|
4995
|
-
},
|
|
4996
|
-
props.selected ? /* @__PURE__ */ React41.createElement(Icon, { name: "check", size: 14 }) : inner[0],
|
|
4997
|
-
inner[1]
|
|
4998
|
-
);
|
|
4999
|
-
}
|
|
5000
|
-
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(
|
|
5001
|
-
"button",
|
|
5002
|
-
{
|
|
5003
|
-
type: "button",
|
|
5004
|
-
className: "aura-tag__remove",
|
|
5005
|
-
"aria-label": props.removeLabel || t.remove(typeof props.children === "string" ? props.children : ""),
|
|
5006
|
-
onClick: props.onRemove
|
|
5007
|
-
},
|
|
5008
|
-
/* @__PURE__ */ React41.createElement(Icon, { name: "x", size: 12 })
|
|
5009
|
-
) : null);
|
|
5010
|
-
});
|
|
5011
|
-
|
|
5012
5517
|
// src/Progress.tsx
|
|
5013
|
-
var
|
|
5014
|
-
var Progress =
|
|
5518
|
+
var React46 = __toESM(require_react(), 1);
|
|
5519
|
+
var Progress = React46.forwardRef(function Progress2(props, ref) {
|
|
5015
5520
|
const auto = uid(), id = props.id || auto;
|
|
5016
5521
|
const max = props.max || 100, det = props.value != null;
|
|
5017
5522
|
const pct = det ? Math.max(0, Math.min(100, props.value / max * 100)) : 0;
|
|
5018
5523
|
const shown = props.valueLabel != null ? props.valueLabel : det ? Math.round(pct) + "%" : null;
|
|
5019
|
-
return /* @__PURE__ */
|
|
5524
|
+
return /* @__PURE__ */ React46.createElement(
|
|
5020
5525
|
"div",
|
|
5021
5526
|
{
|
|
5022
5527
|
ref,
|
|
@@ -5027,8 +5532,8 @@ window.Aura = (() => {
|
|
|
5027
5532
|
props.className
|
|
5028
5533
|
)
|
|
5029
5534
|
},
|
|
5030
|
-
props.label || props.showValue && shown ? /* @__PURE__ */
|
|
5031
|
-
/* @__PURE__ */
|
|
5535
|
+
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,
|
|
5536
|
+
/* @__PURE__ */ React46.createElement(
|
|
5032
5537
|
"div",
|
|
5033
5538
|
{
|
|
5034
5539
|
className: cx("aura-progress__track", !det && "is-indeterminate"),
|
|
@@ -5040,21 +5545,21 @@ window.Aura = (() => {
|
|
|
5040
5545
|
"aria-valuenow": det ? props.value : void 0,
|
|
5041
5546
|
"aria-valuetext": det && props.valueLabel != null ? String(props.valueLabel) : void 0
|
|
5042
5547
|
},
|
|
5043
|
-
/* @__PURE__ */
|
|
5548
|
+
/* @__PURE__ */ React46.createElement("span", { className: "aura-progress__bar", style: det ? { width: pct + "%" } : void 0 })
|
|
5044
5549
|
),
|
|
5045
|
-
props.hint ? /* @__PURE__ */
|
|
5550
|
+
props.hint ? /* @__PURE__ */ React46.createElement("p", { className: "aura-progress__hint" }, props.hint) : null
|
|
5046
5551
|
);
|
|
5047
5552
|
});
|
|
5048
5553
|
|
|
5049
5554
|
// src/Skeleton.tsx
|
|
5050
|
-
var
|
|
5051
|
-
var Skeleton =
|
|
5555
|
+
var React47 = __toESM(require_react(), 1);
|
|
5556
|
+
var Skeleton = React47.forwardRef(function Skeleton2(props, ref) {
|
|
5052
5557
|
const v = props.variant || "text";
|
|
5053
5558
|
if (v === "text" && (props.lines || 1) > 1) {
|
|
5054
5559
|
const n2 = props.lines, rows = [];
|
|
5055
5560
|
for (let i = 0; i < n2; i++)
|
|
5056
|
-
rows.push(/* @__PURE__ */
|
|
5057
|
-
return /* @__PURE__ */
|
|
5561
|
+
rows.push(/* @__PURE__ */ React47.createElement("span", { key: i, className: "aura-skel aura-skel--text", style: { width: i === n2 - 1 ? "60%" : "100%" } }));
|
|
5562
|
+
return /* @__PURE__ */ React47.createElement(
|
|
5058
5563
|
"span",
|
|
5059
5564
|
{
|
|
5060
5565
|
ref,
|
|
@@ -5069,28 +5574,28 @@ window.Aura = (() => {
|
|
|
5069
5574
|
if (v === "circle") {
|
|
5070
5575
|
style.width = style.height = props.size || props.width || 40;
|
|
5071
5576
|
}
|
|
5072
|
-
return /* @__PURE__ */
|
|
5577
|
+
return /* @__PURE__ */ React47.createElement("span", { ref, "aria-hidden": true, className: cx("aura-skel", "aura-skel--" + v, props.className), style });
|
|
5073
5578
|
});
|
|
5074
5579
|
|
|
5075
5580
|
// src/EmptyState.tsx
|
|
5076
|
-
var
|
|
5077
|
-
var EmptyState =
|
|
5581
|
+
var React48 = __toESM(require_react(), 1);
|
|
5582
|
+
var EmptyState = React48.forwardRef(function EmptyState2(props, ref) {
|
|
5078
5583
|
const HT = "h" + (props.headingLevel || 3);
|
|
5079
|
-
return /* @__PURE__ */
|
|
5584
|
+
return /* @__PURE__ */ React48.createElement(
|
|
5080
5585
|
"div",
|
|
5081
5586
|
{
|
|
5082
5587
|
ref,
|
|
5083
5588
|
className: cx("aura-empty", props.size === "sm" && "is-sm", props.bordered && "is-bordered", props.className)
|
|
5084
5589
|
},
|
|
5085
|
-
/* @__PURE__ */
|
|
5086
|
-
/* @__PURE__ */
|
|
5087
|
-
props.description ? /* @__PURE__ */
|
|
5088
|
-
props.action ? /* @__PURE__ */
|
|
5590
|
+
/* @__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" })),
|
|
5591
|
+
/* @__PURE__ */ React48.createElement(HT, { className: "aura-empty__title" }, props.title),
|
|
5592
|
+
props.description ? /* @__PURE__ */ React48.createElement("p", { className: "aura-empty__text" }, props.description) : null,
|
|
5593
|
+
props.action ? /* @__PURE__ */ React48.createElement("div", { className: "aura-empty__action" }, props.action) : null
|
|
5089
5594
|
);
|
|
5090
5595
|
});
|
|
5091
5596
|
|
|
5092
5597
|
// src/Pagination.tsx
|
|
5093
|
-
var
|
|
5598
|
+
var React49 = __toESM(require_react(), 1);
|
|
5094
5599
|
function pageList(page, count, sib) {
|
|
5095
5600
|
let out = [], lo = Math.max(2, page - sib), hi = Math.min(count - 1, page + sib);
|
|
5096
5601
|
if (page - sib <= 3) {
|
|
@@ -5110,7 +5615,7 @@ window.Aura = (() => {
|
|
|
5110
5615
|
if (count > 1) out.push(count);
|
|
5111
5616
|
return out;
|
|
5112
5617
|
}
|
|
5113
|
-
var Pagination =
|
|
5618
|
+
var Pagination = React49.forwardRef(function Pagination2(props, ref) {
|
|
5114
5619
|
const t = useStrings();
|
|
5115
5620
|
const count = Math.max(1, props.pageCount || 1);
|
|
5116
5621
|
const st = useMaybeControlled(props.page, props.defaultPage || 1, props.onChange);
|
|
@@ -5129,7 +5634,7 @@ window.Aura = (() => {
|
|
|
5129
5634
|
},
|
|
5130
5635
|
extra
|
|
5131
5636
|
);
|
|
5132
|
-
return link ? /* @__PURE__ */
|
|
5637
|
+
return link ? /* @__PURE__ */ React49.createElement(
|
|
5133
5638
|
Link,
|
|
5134
5639
|
{
|
|
5135
5640
|
href: link(p),
|
|
@@ -5142,7 +5647,7 @@ window.Aura = (() => {
|
|
|
5142
5647
|
...common
|
|
5143
5648
|
},
|
|
5144
5649
|
label
|
|
5145
|
-
) : /* @__PURE__ */
|
|
5650
|
+
) : /* @__PURE__ */ React49.createElement(
|
|
5146
5651
|
"button",
|
|
5147
5652
|
{
|
|
5148
5653
|
type: "button",
|
|
@@ -5154,7 +5659,7 @@ window.Aura = (() => {
|
|
|
5154
5659
|
label
|
|
5155
5660
|
);
|
|
5156
5661
|
}
|
|
5157
|
-
return /* @__PURE__ */
|
|
5662
|
+
return /* @__PURE__ */ React49.createElement("nav", { ref, className: cx("aura-pagination", props.className), "aria-label": props.label || t.pagination }, /* @__PURE__ */ React49.createElement(
|
|
5158
5663
|
IconButton,
|
|
5159
5664
|
{
|
|
5160
5665
|
icon: "chevron-left",
|
|
@@ -5164,9 +5669,9 @@ window.Aura = (() => {
|
|
|
5164
5669
|
go(page - 1);
|
|
5165
5670
|
}
|
|
5166
5671
|
}
|
|
5167
|
-
), /* @__PURE__ */
|
|
5168
|
-
return typeof p === "number" ? /* @__PURE__ */
|
|
5169
|
-
})), /* @__PURE__ */
|
|
5672
|
+
), /* @__PURE__ */ React49.createElement("ol", { className: "aura-pagination__list" }, pageList(page, count, props.siblingCount == null ? 1 : props.siblingCount).map(function(p) {
|
|
5673
|
+
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");
|
|
5674
|
+
})), /* @__PURE__ */ React49.createElement("span", { className: "aura-pagination__compact", "aria-hidden": true }, t.page(page, count)), /* @__PURE__ */ React49.createElement(
|
|
5170
5675
|
IconButton,
|
|
5171
5676
|
{
|
|
5172
5677
|
icon: "chevron-right",
|
|
@@ -5180,8 +5685,8 @@ window.Aura = (() => {
|
|
|
5180
5685
|
});
|
|
5181
5686
|
|
|
5182
5687
|
// src/Accordion.tsx
|
|
5183
|
-
var
|
|
5184
|
-
var Accordion =
|
|
5688
|
+
var React50 = __toESM(require_react(), 1);
|
|
5689
|
+
var Accordion = React50.forwardRef(function Accordion2(props, ref) {
|
|
5185
5690
|
const auto = uid(), base = props.id || auto;
|
|
5186
5691
|
const multiple = props.type === "multiple";
|
|
5187
5692
|
const st = useMaybeControlled(
|
|
@@ -5191,7 +5696,7 @@ window.Aura = (() => {
|
|
|
5191
5696
|
);
|
|
5192
5697
|
const open = multiple ? st[0] || [] : st[0] ? [st[0]] : [];
|
|
5193
5698
|
const HT = "h" + (props.headingLevel || 3);
|
|
5194
|
-
const
|
|
5699
|
+
const items2 = props.items || [];
|
|
5195
5700
|
function toggle(id) {
|
|
5196
5701
|
const isOpen = open.indexOf(id) >= 0;
|
|
5197
5702
|
if (multiple)
|
|
@@ -5219,9 +5724,9 @@ window.Aura = (() => {
|
|
|
5219
5724
|
n2.focus();
|
|
5220
5725
|
}
|
|
5221
5726
|
}
|
|
5222
|
-
return /* @__PURE__ */
|
|
5727
|
+
return /* @__PURE__ */ React50.createElement("div", { ref, className: cx("aura-accordion", props.className), onKeyDown: onKey }, items2.map(function(it) {
|
|
5223
5728
|
const on = open.indexOf(it.id) >= 0, bid = base + "-btn-" + it.id, pid = base + "-panel-" + it.id;
|
|
5224
|
-
return /* @__PURE__ */
|
|
5729
|
+
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(
|
|
5225
5730
|
"button",
|
|
5226
5731
|
{
|
|
5227
5732
|
type: "button",
|
|
@@ -5233,16 +5738,16 @@ window.Aura = (() => {
|
|
|
5233
5738
|
toggle(it.id);
|
|
5234
5739
|
}
|
|
5235
5740
|
},
|
|
5236
|
-
it.icon ? /* @__PURE__ */
|
|
5237
|
-
/* @__PURE__ */
|
|
5238
|
-
/* @__PURE__ */
|
|
5239
|
-
)), /* @__PURE__ */
|
|
5741
|
+
it.icon ? /* @__PURE__ */ React50.createElement(Icon, { name: it.icon, className: "aura-accordion__lead" }) : null,
|
|
5742
|
+
/* @__PURE__ */ React50.createElement("span", { className: "aura-accordion__title" }, it.title, it.description ? /* @__PURE__ */ React50.createElement("span", { className: "aura-accordion__desc" }, it.description) : null),
|
|
5743
|
+
/* @__PURE__ */ React50.createElement(Icon, { name: "chevron-down", className: "aura-accordion__chevron" })
|
|
5744
|
+
)), /* @__PURE__ */ React50.createElement("div", { id: pid, role: "region", "aria-labelledby": bid, className: "aura-accordion__panel", hidden: !on }, it.content));
|
|
5240
5745
|
}));
|
|
5241
5746
|
});
|
|
5242
5747
|
|
|
5243
5748
|
// src/Popover.tsx
|
|
5244
|
-
var
|
|
5245
|
-
var
|
|
5749
|
+
var React51 = __toESM(require_react(), 1);
|
|
5750
|
+
var import_react_dom9 = __toESM(require_react_dom(), 1);
|
|
5246
5751
|
function position(anchor, pop, placement) {
|
|
5247
5752
|
const r = anchor.getBoundingClientRect(), pw = pop.offsetWidth, ph = pop.offsetHeight, vw = window.innerWidth, vh = window.innerHeight, gap = 6;
|
|
5248
5753
|
let side = (placement || "bottom-start").split("-")[0], align = (placement || "bottom-start").split("-")[1] || "start";
|
|
@@ -5252,13 +5757,13 @@ window.Aura = (() => {
|
|
|
5252
5757
|
const left = align === "end" ? r.right - pw : align === "center" ? r.left + r.width / 2 - pw / 2 : r.left;
|
|
5253
5758
|
return { top: Math.max(8, top), left: Math.max(8, Math.min(left, vw - pw - 8)), side };
|
|
5254
5759
|
}
|
|
5255
|
-
var Popover =
|
|
5760
|
+
var Popover = React51.forwardRef(function Popover2(props, ref) {
|
|
5256
5761
|
const t = useStrings();
|
|
5257
5762
|
const auto = uid(), id = props.id || auto;
|
|
5258
5763
|
const st = useMaybeControlled(props.open, !!props.defaultOpen, props.onOpenChange);
|
|
5259
5764
|
const open = !!st[0];
|
|
5260
|
-
const wrap =
|
|
5261
|
-
const pos =
|
|
5765
|
+
const wrap = React51.useRef(null), pop = React51.useRef(null), popMerged = useMergedRef(ref, pop);
|
|
5766
|
+
const pos = React51.useState(null), mounted = useMounted();
|
|
5262
5767
|
function trigger() {
|
|
5263
5768
|
return wrap.current && (wrap.current.querySelector('button, [role="button"], a, input') || wrap.current.firstElementChild);
|
|
5264
5769
|
}
|
|
@@ -5285,7 +5790,7 @@ window.Aura = (() => {
|
|
|
5285
5790
|
},
|
|
5286
5791
|
[open, mounted, props.placement]
|
|
5287
5792
|
);
|
|
5288
|
-
|
|
5793
|
+
React51.useEffect(
|
|
5289
5794
|
function() {
|
|
5290
5795
|
if (!open || !mounted) return;
|
|
5291
5796
|
if (props.autoFocus !== false && pop.current) {
|
|
@@ -5304,9 +5809,9 @@ window.Aura = (() => {
|
|
|
5304
5809
|
},
|
|
5305
5810
|
[open, mounted]
|
|
5306
5811
|
);
|
|
5307
|
-
const child =
|
|
5308
|
-
const panel = open && mounted ? (0,
|
|
5309
|
-
/* @__PURE__ */
|
|
5812
|
+
const child = React51.Children.only(props.trigger);
|
|
5813
|
+
const panel = open && mounted ? (0, import_react_dom9.createPortal)(
|
|
5814
|
+
/* @__PURE__ */ React51.createElement(
|
|
5310
5815
|
"div",
|
|
5311
5816
|
{
|
|
5312
5817
|
ref: popMerged,
|
|
@@ -5328,7 +5833,7 @@ window.Aura = (() => {
|
|
|
5328
5833
|
} else trapTab(e, pop.current);
|
|
5329
5834
|
}
|
|
5330
5835
|
},
|
|
5331
|
-
props.title ? /* @__PURE__ */
|
|
5836
|
+
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(
|
|
5332
5837
|
IconButton,
|
|
5333
5838
|
{
|
|
5334
5839
|
icon: "x",
|
|
@@ -5338,7 +5843,7 @@ window.Aura = (() => {
|
|
|
5338
5843
|
}
|
|
5339
5844
|
}
|
|
5340
5845
|
)) : null,
|
|
5341
|
-
/* @__PURE__ */
|
|
5846
|
+
/* @__PURE__ */ React51.createElement("div", { className: "aura-popover__body" }, typeof props.children === "function" ? props.children({
|
|
5342
5847
|
close: function() {
|
|
5343
5848
|
close(true);
|
|
5344
5849
|
}
|
|
@@ -5346,7 +5851,7 @@ window.Aura = (() => {
|
|
|
5346
5851
|
),
|
|
5347
5852
|
document.body
|
|
5348
5853
|
) : null;
|
|
5349
|
-
return /* @__PURE__ */
|
|
5854
|
+
return /* @__PURE__ */ React51.createElement("span", { ref: wrap, className: "aura-popover-anchor" }, React51.cloneElement(child, {
|
|
5350
5855
|
onClick: function(e) {
|
|
5351
5856
|
if (child.props.onClick) child.props.onClick(e);
|
|
5352
5857
|
st[1](!open);
|
|
@@ -5358,7 +5863,7 @@ window.Aura = (() => {
|
|
|
5358
5863
|
});
|
|
5359
5864
|
|
|
5360
5865
|
// src/NumberField.tsx
|
|
5361
|
-
var
|
|
5866
|
+
var React52 = __toESM(require_react(), 1);
|
|
5362
5867
|
function decimalsOf(n2) {
|
|
5363
5868
|
const s = String(n2);
|
|
5364
5869
|
const i = s.indexOf(".");
|
|
@@ -5369,7 +5874,7 @@ window.Aura = (() => {
|
|
|
5369
5874
|
if (!/^-?(\d+\.?\d*|\.\d+)$/.test(s)) return NaN;
|
|
5370
5875
|
return Number(s);
|
|
5371
5876
|
}
|
|
5372
|
-
var NumberField =
|
|
5877
|
+
var NumberField = React52.forwardRef(function NumberField2(props, ref) {
|
|
5373
5878
|
const t = useStrings();
|
|
5374
5879
|
const auto = uid(), id = props.id || auto;
|
|
5375
5880
|
const step = props.step || 1;
|
|
@@ -5380,7 +5885,7 @@ window.Aura = (() => {
|
|
|
5380
5885
|
props.onChange
|
|
5381
5886
|
);
|
|
5382
5887
|
const value = st[0], setValue = st[1];
|
|
5383
|
-
const draftState =
|
|
5888
|
+
const draftState = React52.useState(null), draft = draftState[0], setDraft = draftState[1];
|
|
5384
5889
|
function fmt2(n2) {
|
|
5385
5890
|
if (n2 == null || isNaN(n2)) return "";
|
|
5386
5891
|
return n2.toLocaleString("en", { minimumFractionDigits: decimals, maximumFractionDigits: decimals });
|
|
@@ -5429,7 +5934,7 @@ window.Aura = (() => {
|
|
|
5429
5934
|
};
|
|
5430
5935
|
const valueText = value == null ? void 0 : [affixText(props.prefix), fmt2(value), affixText(props.suffix)].join(" ").trim();
|
|
5431
5936
|
const stepper = props.stepper !== false && !props.readOnly;
|
|
5432
|
-
return /* @__PURE__ */
|
|
5937
|
+
return /* @__PURE__ */ React52.createElement(
|
|
5433
5938
|
Field,
|
|
5434
5939
|
{
|
|
5435
5940
|
id,
|
|
@@ -5441,7 +5946,7 @@ window.Aura = (() => {
|
|
|
5441
5946
|
disabled: props.disabled,
|
|
5442
5947
|
className: props.className
|
|
5443
5948
|
},
|
|
5444
|
-
/* @__PURE__ */
|
|
5949
|
+
/* @__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(
|
|
5445
5950
|
"input",
|
|
5446
5951
|
{
|
|
5447
5952
|
ref,
|
|
@@ -5488,7 +5993,7 @@ window.Aura = (() => {
|
|
|
5488
5993
|
},
|
|
5489
5994
|
onKeyDown
|
|
5490
5995
|
}
|
|
5491
|
-
), props.suffix != null ? /* @__PURE__ */
|
|
5996
|
+
), 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(
|
|
5492
5997
|
"button",
|
|
5493
5998
|
{
|
|
5494
5999
|
type: "button",
|
|
@@ -5504,8 +6009,8 @@ window.Aura = (() => {
|
|
|
5504
6009
|
nudge(-step);
|
|
5505
6010
|
}
|
|
5506
6011
|
},
|
|
5507
|
-
/* @__PURE__ */
|
|
5508
|
-
), /* @__PURE__ */
|
|
6012
|
+
/* @__PURE__ */ React52.createElement(Icon, { name: "minus" })
|
|
6013
|
+
), /* @__PURE__ */ React52.createElement(
|
|
5509
6014
|
"button",
|
|
5510
6015
|
{
|
|
5511
6016
|
type: "button",
|
|
@@ -5521,14 +6026,14 @@ window.Aura = (() => {
|
|
|
5521
6026
|
nudge(step);
|
|
5522
6027
|
}
|
|
5523
6028
|
},
|
|
5524
|
-
/* @__PURE__ */
|
|
6029
|
+
/* @__PURE__ */ React52.createElement(Icon, { name: "plus" })
|
|
5525
6030
|
)) : null)
|
|
5526
6031
|
);
|
|
5527
6032
|
});
|
|
5528
6033
|
|
|
5529
6034
|
// src/Stepper.tsx
|
|
5530
|
-
var
|
|
5531
|
-
var Stepper =
|
|
6035
|
+
var React53 = __toESM(require_react(), 1);
|
|
6036
|
+
var Stepper = React53.forwardRef(function Stepper2(props, ref) {
|
|
5532
6037
|
const t = useStrings();
|
|
5533
6038
|
const steps = props.steps || [];
|
|
5534
6039
|
let at = -1;
|
|
@@ -5538,26 +6043,26 @@ window.Aura = (() => {
|
|
|
5538
6043
|
if (at < 0) at = 0;
|
|
5539
6044
|
const vertical = props.orientation === "vertical";
|
|
5540
6045
|
const cur = steps[at];
|
|
5541
|
-
return /* @__PURE__ */
|
|
6046
|
+
return /* @__PURE__ */ React53.createElement(
|
|
5542
6047
|
"nav",
|
|
5543
6048
|
{
|
|
5544
6049
|
ref,
|
|
5545
6050
|
"aria-label": props.label,
|
|
5546
6051
|
className: cx("aura-stepper", vertical ? "aura-stepper--vertical" : "aura-stepper--horizontal", props.className)
|
|
5547
6052
|
},
|
|
5548
|
-
/* @__PURE__ */
|
|
6053
|
+
/* @__PURE__ */ React53.createElement("ol", { className: "aura-stepper__list" }, steps.map(function(s, i) {
|
|
5549
6054
|
const state = i < at ? "done" : i === at ? "current" : "upcoming";
|
|
5550
|
-
const marker = /* @__PURE__ */
|
|
5551
|
-
const text = /* @__PURE__ */
|
|
6055
|
+
const marker = /* @__PURE__ */ React53.createElement("span", { className: "aura-stepper__marker", "aria-hidden": true }, state === "done" ? /* @__PURE__ */ React53.createElement(Icon, { name: "check" }) : i + 1);
|
|
6056
|
+
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);
|
|
5552
6057
|
const clickable = state === "done" && !!props.onStepClick;
|
|
5553
|
-
return /* @__PURE__ */
|
|
6058
|
+
return /* @__PURE__ */ React53.createElement(
|
|
5554
6059
|
"li",
|
|
5555
6060
|
{
|
|
5556
6061
|
key: s.id,
|
|
5557
6062
|
className: cx("aura-stepper__item", "is-" + state),
|
|
5558
6063
|
"aria-current": state === "current" ? "step" : void 0
|
|
5559
6064
|
},
|
|
5560
|
-
clickable ? /* @__PURE__ */
|
|
6065
|
+
clickable ? /* @__PURE__ */ React53.createElement(
|
|
5561
6066
|
"button",
|
|
5562
6067
|
{
|
|
5563
6068
|
type: "button",
|
|
@@ -5568,19 +6073,19 @@ window.Aura = (() => {
|
|
|
5568
6073
|
},
|
|
5569
6074
|
marker,
|
|
5570
6075
|
text
|
|
5571
|
-
) : /* @__PURE__ */
|
|
6076
|
+
) : /* @__PURE__ */ React53.createElement("span", { className: "aura-stepper__step" }, marker, text)
|
|
5572
6077
|
);
|
|
5573
6078
|
})),
|
|
5574
|
-
!vertical && cur ? /* @__PURE__ */
|
|
6079
|
+
!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
|
|
5575
6080
|
);
|
|
5576
6081
|
});
|
|
5577
6082
|
|
|
5578
6083
|
// src/SegmentedControl.tsx
|
|
5579
|
-
var
|
|
6084
|
+
var React54 = __toESM(require_react(), 1);
|
|
5580
6085
|
function toOpt2(o) {
|
|
5581
6086
|
return typeof o === "object" ? o : { value: o, label: o };
|
|
5582
6087
|
}
|
|
5583
|
-
var SegmentedControl =
|
|
6088
|
+
var SegmentedControl = React54.forwardRef(
|
|
5584
6089
|
function SegmentedControl2(props, ref) {
|
|
5585
6090
|
const options = (props.options || []).map(toOpt2);
|
|
5586
6091
|
const firstEnabled = options.filter(function(o) {
|
|
@@ -5593,7 +6098,7 @@ window.Aura = (() => {
|
|
|
5593
6098
|
);
|
|
5594
6099
|
const value = st[0], setValue = st[1];
|
|
5595
6100
|
const auto = uid(), id = props.id || auto;
|
|
5596
|
-
const refs =
|
|
6101
|
+
const refs = React54.useRef([]);
|
|
5597
6102
|
const selIdx = options.findIndex(function(o) {
|
|
5598
6103
|
return o.value === value;
|
|
5599
6104
|
});
|
|
@@ -5626,7 +6131,7 @@ window.Aura = (() => {
|
|
|
5626
6131
|
move(options.length, -1);
|
|
5627
6132
|
}
|
|
5628
6133
|
}
|
|
5629
|
-
return /* @__PURE__ */
|
|
6134
|
+
return /* @__PURE__ */ React54.createElement(
|
|
5630
6135
|
"div",
|
|
5631
6136
|
{
|
|
5632
6137
|
ref,
|
|
@@ -5645,7 +6150,7 @@ window.Aura = (() => {
|
|
|
5645
6150
|
options.map(function(o, i) {
|
|
5646
6151
|
const on = o.value === value;
|
|
5647
6152
|
const off = props.disabled || o.disabled;
|
|
5648
|
-
return /* @__PURE__ */
|
|
6153
|
+
return /* @__PURE__ */ React54.createElement(
|
|
5649
6154
|
"button",
|
|
5650
6155
|
{
|
|
5651
6156
|
key: o.value,
|
|
@@ -5667,8 +6172,8 @@ window.Aura = (() => {
|
|
|
5667
6172
|
onKeyDown(e, i);
|
|
5668
6173
|
}
|
|
5669
6174
|
},
|
|
5670
|
-
o.icon ? /* @__PURE__ */
|
|
5671
|
-
o.iconOnly ? null : /* @__PURE__ */
|
|
6175
|
+
o.icon ? /* @__PURE__ */ React54.createElement(Icon, { name: o.icon }) : null,
|
|
6176
|
+
o.iconOnly ? null : /* @__PURE__ */ React54.createElement("span", null, o.label)
|
|
5672
6177
|
);
|
|
5673
6178
|
})
|
|
5674
6179
|
);
|