@jirawatpyk/aura-react 4.11.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 +17 -3
- package/dist/aura.bundle.js +955 -433
- package/dist/cjs/index.cjs +954 -432
- package/dist/esm/Command.js +213 -0
- package/dist/esm/DatePicker.js +18 -1
- 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 +10 -1
- package/dist/esm/locale.js +39 -0
- package/dist/index.d.ts +114 -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,
|
|
@@ -119,6 +123,7 @@ window.Aura = (() => {
|
|
|
119
123
|
useAuraLocale: () => useAuraLocale,
|
|
120
124
|
useBreakpoint: () => useBreakpoint,
|
|
121
125
|
useColorScheme: () => useColorScheme,
|
|
126
|
+
useFormatDate: () => useFormatDate,
|
|
122
127
|
useResponsive: () => useResponsive
|
|
123
128
|
});
|
|
124
129
|
|
|
@@ -272,6 +277,19 @@ window.Aura = (() => {
|
|
|
272
277
|
close: "Close",
|
|
273
278
|
dismiss: "Dismiss",
|
|
274
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
|
+
},
|
|
275
293
|
notifications: "Notifications",
|
|
276
294
|
mainNav: "Main",
|
|
277
295
|
breadcrumb: "Breadcrumb",
|
|
@@ -370,6 +388,19 @@ window.Aura = (() => {
|
|
|
370
388
|
close: "\u0E1B\u0E34\u0E14",
|
|
371
389
|
dismiss: "\u0E1B\u0E34\u0E14",
|
|
372
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
|
+
},
|
|
373
404
|
notifications: "\u0E01\u0E32\u0E23\u0E41\u0E08\u0E49\u0E07\u0E40\u0E15\u0E37\u0E2D\u0E19",
|
|
374
405
|
mainNav: "\u0E40\u0E21\u0E19\u0E39\u0E2B\u0E25\u0E31\u0E01",
|
|
375
406
|
breadcrumb: "\u0E40\u0E2A\u0E49\u0E19\u0E17\u0E32\u0E07",
|
|
@@ -468,6 +499,19 @@ window.Aura = (() => {
|
|
|
468
499
|
close: "St\xE4ng",
|
|
469
500
|
dismiss: "St\xE4ng",
|
|
470
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
|
+
},
|
|
471
515
|
notifications: "Aviseringar",
|
|
472
516
|
mainNav: "Huvudmeny",
|
|
473
517
|
breadcrumb: "Br\xF6dsmulor",
|
|
@@ -694,7 +738,7 @@ window.Aura = (() => {
|
|
|
694
738
|
const own = React6.useRef(null), merged = useMergedRef(ref, own);
|
|
695
739
|
const posState = React6.useState(null);
|
|
696
740
|
const pos = posState[0], setPos = posState[1];
|
|
697
|
-
const
|
|
741
|
+
const items2 = props.items || [];
|
|
698
742
|
const mounted = useMounted();
|
|
699
743
|
useIsoLayoutEffect(
|
|
700
744
|
function() {
|
|
@@ -766,7 +810,7 @@ window.Aura = (() => {
|
|
|
766
810
|
onKeyDown,
|
|
767
811
|
style: { top: pos ? pos.top : -9999, left: pos ? pos.left : -9999 }
|
|
768
812
|
},
|
|
769
|
-
|
|
813
|
+
items2.map(function(it, i) {
|
|
770
814
|
if (it.separator) return /* @__PURE__ */ React6.createElement("div", { key: "s" + i, role: "separator", className: "aura-menu__sep" });
|
|
771
815
|
const isCheck = it.checked !== void 0;
|
|
772
816
|
return /* @__PURE__ */ React6.createElement(
|
|
@@ -1582,6 +1626,22 @@ window.Aura = (() => {
|
|
|
1582
1626
|
const loc = o.locale || "th";
|
|
1583
1627
|
return fmt(localeTag(loc, o.calendar || defaultCalendar(loc)), f, d).replace(ERA, "");
|
|
1584
1628
|
}
|
|
1629
|
+
function useFormatDate() {
|
|
1630
|
+
const ctx = useAuraLocale(), locale = ctx.locale || "en", calendar = ctx.calendar;
|
|
1631
|
+
return React17.useCallback(
|
|
1632
|
+
function(iso, opts) {
|
|
1633
|
+
const o = opts || {}, loc = o.locale || locale;
|
|
1634
|
+
return formatDate(
|
|
1635
|
+
iso,
|
|
1636
|
+
Object.assign({}, o, {
|
|
1637
|
+
locale: loc,
|
|
1638
|
+
calendar: o.calendar || (o.locale ? void 0 : calendar) || defaultCalendar(loc)
|
|
1639
|
+
})
|
|
1640
|
+
);
|
|
1641
|
+
},
|
|
1642
|
+
[locale, calendar]
|
|
1643
|
+
);
|
|
1644
|
+
}
|
|
1585
1645
|
var MONTHS = null;
|
|
1586
1646
|
function monthIndex(word) {
|
|
1587
1647
|
if (!MONTHS) {
|
|
@@ -2070,7 +2130,7 @@ window.Aura = (() => {
|
|
|
2070
2130
|
const boxRef = React17.useRef(null), inputRef = React17.useRef(null), inputMerged = useMergedRef(ref, inputRef);
|
|
2071
2131
|
const pop = useCalendarPopover(boxRef);
|
|
2072
2132
|
const o = { locale, calendar };
|
|
2073
|
-
function
|
|
2133
|
+
function show2(r) {
|
|
2074
2134
|
if (!r.start) return "";
|
|
2075
2135
|
if (!r.end) return formatDate(r.start, o) + " \u2013";
|
|
2076
2136
|
return formatDate(r.start, o) + " \u2013 " + formatDate(r.end, o);
|
|
@@ -2152,7 +2212,7 @@ window.Aura = (() => {
|
|
|
2152
2212
|
boxRef,
|
|
2153
2213
|
inputRef: inputMerged,
|
|
2154
2214
|
open: pop.open,
|
|
2155
|
-
display:
|
|
2215
|
+
display: show2(v),
|
|
2156
2216
|
placeholder: props.placeholder || dt.rangePlaceholder,
|
|
2157
2217
|
hasValue: v.start != null,
|
|
2158
2218
|
clearable: props.clearable,
|
|
@@ -2210,15 +2270,40 @@ window.Aura = (() => {
|
|
|
2210
2270
|
f(toastState.list.slice());
|
|
2211
2271
|
});
|
|
2212
2272
|
}
|
|
2213
|
-
function
|
|
2214
|
-
if (typeof opts === "string") opts = { title: opts };
|
|
2273
|
+
function show(opts) {
|
|
2215
2274
|
const id = opts.id || "t" + ++toastState.n;
|
|
2216
|
-
|
|
2217
|
-
return t.id
|
|
2218
|
-
})
|
|
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);
|
|
2219
2287
|
emitToasts();
|
|
2220
2288
|
return id;
|
|
2221
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
|
+
};
|
|
2222
2307
|
toast.dismiss = function(id) {
|
|
2223
2308
|
toastState.list = toastState.list.filter(function(t) {
|
|
2224
2309
|
return t.id !== id;
|
|
@@ -2228,35 +2313,56 @@ window.Aura = (() => {
|
|
|
2228
2313
|
function ToastItem(props) {
|
|
2229
2314
|
const str = useStrings();
|
|
2230
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);
|
|
2231
2317
|
function start() {
|
|
2232
|
-
if (left.current === Infinity) return;
|
|
2318
|
+
if (left.current === Infinity || timer.current) return;
|
|
2233
2319
|
since.current = Date.now();
|
|
2234
2320
|
timer.current = setTimeout(function() {
|
|
2235
2321
|
toast.dismiss(t.id);
|
|
2236
2322
|
}, left.current);
|
|
2237
2323
|
}
|
|
2324
|
+
function resume() {
|
|
2325
|
+
hover.current = false;
|
|
2326
|
+
start();
|
|
2327
|
+
}
|
|
2238
2328
|
function pause() {
|
|
2329
|
+
hover.current = true;
|
|
2239
2330
|
if (timer.current) {
|
|
2240
2331
|
clearTimeout(timer.current);
|
|
2241
2332
|
timer.current = null;
|
|
2242
2333
|
left.current -= Date.now() - since.current;
|
|
2243
2334
|
}
|
|
2244
2335
|
}
|
|
2245
|
-
React19.useEffect(
|
|
2246
|
-
|
|
2247
|
-
|
|
2248
|
-
|
|
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
|
+
);
|
|
2249
2348
|
return /* @__PURE__ */ React19.createElement(
|
|
2250
2349
|
"div",
|
|
2251
2350
|
{
|
|
2252
|
-
className: cx("aura-toast", "aura-toast--" + t.tone),
|
|
2351
|
+
className: cx("aura-toast", "aura-toast--" + t.tone, t.loading && "is-loading"),
|
|
2253
2352
|
role: t.tone === "danger" ? "alert" : "status",
|
|
2353
|
+
"aria-busy": t.loading || void 0,
|
|
2254
2354
|
onMouseEnter: pause,
|
|
2255
|
-
onMouseLeave:
|
|
2355
|
+
onMouseLeave: resume,
|
|
2256
2356
|
onFocus: pause,
|
|
2257
|
-
onBlur:
|
|
2357
|
+
onBlur: resume
|
|
2258
2358
|
},
|
|
2259
|
-
/* @__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
|
+
),
|
|
2260
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),
|
|
2261
2367
|
t.action ? /* @__PURE__ */ React19.createElement(
|
|
2262
2368
|
"button",
|
|
@@ -2313,14 +2419,515 @@ window.Aura = (() => {
|
|
|
2313
2419
|
);
|
|
2314
2420
|
}
|
|
2315
2421
|
|
|
2316
|
-
// src/
|
|
2422
|
+
// src/PasswordField.tsx
|
|
2317
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);
|
|
2318
2671
|
var import_react_dom5 = __toESM(require_react_dom(), 1);
|
|
2319
|
-
|
|
2320
|
-
|
|
2321
|
-
|
|
2322
|
-
|
|
2323
|
-
|
|
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) {
|
|
2324
2931
|
clearTimeout(timer.current);
|
|
2325
2932
|
timer.current = setTimeout(
|
|
2326
2933
|
function() {
|
|
@@ -2344,7 +2951,7 @@ window.Aura = (() => {
|
|
|
2344
2951
|
},
|
|
2345
2952
|
[open]
|
|
2346
2953
|
);
|
|
2347
|
-
|
|
2954
|
+
React26.useEffect(
|
|
2348
2955
|
function() {
|
|
2349
2956
|
if (!open) return;
|
|
2350
2957
|
function esc(e) {
|
|
@@ -2357,25 +2964,25 @@ window.Aura = (() => {
|
|
|
2357
2964
|
},
|
|
2358
2965
|
[open]
|
|
2359
2966
|
);
|
|
2360
|
-
const child =
|
|
2361
|
-
const trigger = /* @__PURE__ */
|
|
2967
|
+
const child = React26.Children.only(props.children);
|
|
2968
|
+
const trigger = /* @__PURE__ */ React26.createElement(
|
|
2362
2969
|
"span",
|
|
2363
2970
|
{
|
|
2364
2971
|
ref: anchorMerged,
|
|
2365
2972
|
className: "aura-tooltip-anchor",
|
|
2366
2973
|
onMouseEnter: function() {
|
|
2367
|
-
|
|
2974
|
+
show2(false);
|
|
2368
2975
|
},
|
|
2369
2976
|
onMouseLeave: hide,
|
|
2370
2977
|
onFocus: function() {
|
|
2371
|
-
|
|
2978
|
+
show2(true);
|
|
2372
2979
|
},
|
|
2373
2980
|
onBlur: hide
|
|
2374
2981
|
},
|
|
2375
|
-
|
|
2982
|
+
React26.cloneElement(child, { "aria-describedby": open ? id : child.props["aria-describedby"] })
|
|
2376
2983
|
);
|
|
2377
|
-
return /* @__PURE__ */
|
|
2378
|
-
/* @__PURE__ */
|
|
2984
|
+
return /* @__PURE__ */ React26.createElement(React26.Fragment, null, trigger, open ? (0, import_react_dom6.createPortal)(
|
|
2985
|
+
/* @__PURE__ */ React26.createElement(
|
|
2379
2986
|
"div",
|
|
2380
2987
|
{
|
|
2381
2988
|
ref: tip,
|
|
@@ -2391,59 +2998,11 @@ window.Aura = (() => {
|
|
|
2391
2998
|
});
|
|
2392
2999
|
|
|
2393
3000
|
// src/Dialog.tsx
|
|
2394
|
-
var
|
|
2395
|
-
var
|
|
2396
|
-
|
|
2397
|
-
// src/useModal.tsx
|
|
2398
|
-
var React21 = __toESM(require_react(), 1);
|
|
2399
|
-
function useModal(open, ref, opts) {
|
|
2400
|
-
const mounted = useMounted();
|
|
2401
|
-
const prev = React21.useRef(null);
|
|
2402
|
-
const o = opts || {};
|
|
2403
|
-
React21.useEffect(
|
|
2404
|
-
function() {
|
|
2405
|
-
if (!open || !mounted) return;
|
|
2406
|
-
prev.current = document.activeElement;
|
|
2407
|
-
const body = document.body, overflow = body.style.overflow;
|
|
2408
|
-
body.style.overflow = "hidden";
|
|
2409
|
-
const el = ref.current;
|
|
2410
|
-
const target = el && (el.querySelector("[data-autofocus]") || el.querySelector(o.bodySelector + " " + FOCUSABLE) || el.querySelector(o.footSelector + " " + FOCUSABLE) || el);
|
|
2411
|
-
if (target && o.autoFocus !== false) target.focus();
|
|
2412
|
-
return function() {
|
|
2413
|
-
body.style.overflow = overflow;
|
|
2414
|
-
if (prev.current && prev.current.focus) prev.current.focus();
|
|
2415
|
-
};
|
|
2416
|
-
},
|
|
2417
|
-
[open, mounted]
|
|
2418
|
-
);
|
|
2419
|
-
function onKeyDown(e) {
|
|
2420
|
-
if (e.key === "Escape") {
|
|
2421
|
-
e.stopPropagation();
|
|
2422
|
-
if (o.onEscape) o.onEscape();
|
|
2423
|
-
return;
|
|
2424
|
-
}
|
|
2425
|
-
if (e.key !== "Tab" || !ref.current) return;
|
|
2426
|
-
const list = Array.prototype.slice.call(ref.current.querySelectorAll(FOCUSABLE));
|
|
2427
|
-
if (!list.length) {
|
|
2428
|
-
e.preventDefault();
|
|
2429
|
-
return;
|
|
2430
|
-
}
|
|
2431
|
-
const first = list[0], last = list[list.length - 1];
|
|
2432
|
-
if (e.shiftKey && (document.activeElement === first || document.activeElement === ref.current)) {
|
|
2433
|
-
e.preventDefault();
|
|
2434
|
-
last.focus();
|
|
2435
|
-
} else if (!e.shiftKey && document.activeElement === last) {
|
|
2436
|
-
e.preventDefault();
|
|
2437
|
-
first.focus();
|
|
2438
|
-
}
|
|
2439
|
-
}
|
|
2440
|
-
return { ready: !!open && mounted, onKeyDown };
|
|
2441
|
-
}
|
|
2442
|
-
|
|
2443
|
-
// src/Dialog.tsx
|
|
2444
|
-
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) {
|
|
2445
3004
|
const t = useStrings();
|
|
2446
|
-
const own =
|
|
3005
|
+
const own = React27.useRef(null), merged = useMergedRef(ref, own), titleId = uid(), descId = uid();
|
|
2447
3006
|
function close() {
|
|
2448
3007
|
if (props.dismissible !== false && props.onClose) props.onClose();
|
|
2449
3008
|
}
|
|
@@ -2454,8 +3013,8 @@ window.Aura = (() => {
|
|
|
2454
3013
|
footSelector: ".aura-dialog__foot"
|
|
2455
3014
|
});
|
|
2456
3015
|
if (!modal.ready) return null;
|
|
2457
|
-
return (0,
|
|
2458
|
-
/* @__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(
|
|
2459
3018
|
"div",
|
|
2460
3019
|
{
|
|
2461
3020
|
ref: merged,
|
|
@@ -2466,17 +3025,17 @@ window.Aura = (() => {
|
|
|
2466
3025
|
tabIndex: -1,
|
|
2467
3026
|
className: cx("aura-dialog", "aura-dialog--" + (props.size || "md"), props.className)
|
|
2468
3027
|
},
|
|
2469
|
-
/* @__PURE__ */
|
|
2470
|
-
props.description ? /* @__PURE__ */
|
|
2471
|
-
props.children ? /* @__PURE__ */
|
|
2472
|
-
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
|
|
2473
3032
|
)),
|
|
2474
3033
|
document.body
|
|
2475
3034
|
);
|
|
2476
3035
|
});
|
|
2477
|
-
var Drawer =
|
|
3036
|
+
var Drawer = React27.forwardRef(function Drawer2(props, ref) {
|
|
2478
3037
|
const t = useStrings();
|
|
2479
|
-
const own =
|
|
3038
|
+
const own = React27.useRef(null), merged = useMergedRef(ref, own), titleId = uid(), descId = uid();
|
|
2480
3039
|
function close() {
|
|
2481
3040
|
if (props.dismissible !== false && props.onClose) props.onClose();
|
|
2482
3041
|
}
|
|
@@ -2488,8 +3047,8 @@ window.Aura = (() => {
|
|
|
2488
3047
|
});
|
|
2489
3048
|
if (!modal.ready) return null;
|
|
2490
3049
|
const side = props.side === "left" ? "left" : "right";
|
|
2491
|
-
return (0,
|
|
2492
|
-
/* @__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(
|
|
2493
3052
|
"div",
|
|
2494
3053
|
{
|
|
2495
3054
|
ref: merged,
|
|
@@ -2501,17 +3060,17 @@ window.Aura = (() => {
|
|
|
2501
3060
|
tabIndex: -1,
|
|
2502
3061
|
className: cx("aura-drawer", "aura-drawer--" + side, "aura-drawer--" + (props.size || "md"), props.className)
|
|
2503
3062
|
},
|
|
2504
|
-
props.title || props.dismissible !== false ? /* @__PURE__ */
|
|
2505
|
-
props.description ? /* @__PURE__ */
|
|
2506
|
-
/* @__PURE__ */
|
|
2507
|
-
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
|
|
2508
3067
|
)),
|
|
2509
3068
|
document.body
|
|
2510
3069
|
);
|
|
2511
3070
|
});
|
|
2512
3071
|
|
|
2513
3072
|
// src/DataTable.tsx
|
|
2514
|
-
var
|
|
3073
|
+
var React28 = __toESM(require_react(), 1);
|
|
2515
3074
|
var BP = { sm: 640, md: 768, lg: 1024, xl: 1280 };
|
|
2516
3075
|
var DEFAULT_COLUMNS = [
|
|
2517
3076
|
{ key: "id", label: "ID", width: 96, mono: true },
|
|
@@ -2523,7 +3082,7 @@ window.Aura = (() => {
|
|
|
2523
3082
|
var ROW_H = 48;
|
|
2524
3083
|
var OVERSCAN = 8;
|
|
2525
3084
|
var FLEX_MIN = 160;
|
|
2526
|
-
var DataTable =
|
|
3085
|
+
var DataTable = React28.forwardRef(function DataTable2(props, ref) {
|
|
2527
3086
|
const t = useStrings();
|
|
2528
3087
|
const columns = props.columns || DEFAULT_COLUMNS;
|
|
2529
3088
|
const byKey = {};
|
|
@@ -2570,23 +3129,23 @@ window.Aura = (() => {
|
|
|
2570
3129
|
}),
|
|
2571
3130
|
props.onPinnedColumnsChange
|
|
2572
3131
|
);
|
|
2573
|
-
const widthState =
|
|
3132
|
+
const widthState = React28.useState({});
|
|
2574
3133
|
const widths = widthState[0], setWidths = widthState[1];
|
|
2575
|
-
const activeState =
|
|
2576
|
-
const scrollState =
|
|
3134
|
+
const activeState = React28.useState({ r: 1, c: 0 });
|
|
3135
|
+
const scrollState = React28.useState(0);
|
|
2577
3136
|
const scrollTop = scrollState[0], setScrollTop = scrollState[1];
|
|
2578
|
-
const scrolledX =
|
|
2579
|
-
const menuState =
|
|
3137
|
+
const scrolledX = React28.useState(false);
|
|
3138
|
+
const menuState = React28.useState(null);
|
|
2580
3139
|
const menu = menuState[0], setMenu = menuState[1];
|
|
2581
|
-
const dragState =
|
|
3140
|
+
const dragState = React28.useState(null);
|
|
2582
3141
|
const drag = dragState[0], setDrag = dragState[1];
|
|
2583
|
-
const gridRef =
|
|
2584
|
-
const wrapRef =
|
|
2585
|
-
const boxWidth =
|
|
3142
|
+
const gridRef = React28.useRef(null);
|
|
3143
|
+
const wrapRef = React28.useRef(null), wrapMerged = useMergedRef(ref, wrapRef);
|
|
3144
|
+
const boxWidth = React28.useState(null);
|
|
2586
3145
|
const measure = !!props.stackBelow || columns.some(function(c) {
|
|
2587
3146
|
return c.hideBelow != null;
|
|
2588
3147
|
});
|
|
2589
|
-
|
|
3148
|
+
React28.useEffect(
|
|
2590
3149
|
function() {
|
|
2591
3150
|
if (!measure || !wrapRef.current || typeof ResizeObserver === "undefined") return;
|
|
2592
3151
|
const ro = new ResizeObserver(function(en) {
|
|
@@ -2605,9 +3164,9 @@ window.Aura = (() => {
|
|
|
2605
3164
|
const px = typeof c.hideBelow === "number" ? c.hideBelow : BP[c.hideBelow];
|
|
2606
3165
|
return px != null && boxWidth[0] < px;
|
|
2607
3166
|
}
|
|
2608
|
-
const scrollRef =
|
|
2609
|
-
const pending =
|
|
2610
|
-
const resizing =
|
|
3167
|
+
const scrollRef = React28.useRef(null);
|
|
3168
|
+
const pending = React28.useRef(null);
|
|
3169
|
+
const resizing = React28.useRef(false);
|
|
2611
3170
|
useIsoLayoutEffect(function() {
|
|
2612
3171
|
if (stacked || !gridRef.current) return;
|
|
2613
3172
|
const els = gridRef.current.querySelectorAll(
|
|
@@ -2666,7 +3225,7 @@ window.Aura = (() => {
|
|
|
2666
3225
|
if (isPinned(c)) s.left = "calc(var(--aura-space-6)" + selW + " + " + pinOffsets[c.key] + "px)";
|
|
2667
3226
|
return s;
|
|
2668
3227
|
}
|
|
2669
|
-
const view =
|
|
3228
|
+
const view = React28.useMemo(
|
|
2670
3229
|
function() {
|
|
2671
3230
|
if (manual || !sort || !sort.key || !byKey[sort.key]) return rows;
|
|
2672
3231
|
const col = byKey[sort.key];
|
|
@@ -2700,7 +3259,7 @@ window.Aura = (() => {
|
|
|
2700
3259
|
const canSortAny = !busy && (manual ? total > 1 : rows.length > 1);
|
|
2701
3260
|
const shownTotal = manual && props.totalRows == null ? first + rows.length : total;
|
|
2702
3261
|
const linkPaging = !!props.getPageHref && !props.onPageChange;
|
|
2703
|
-
const prevLink =
|
|
3262
|
+
const prevLink = React28.useRef(null), nextLink = React28.useRef(null);
|
|
2704
3263
|
function goPage(p, focus) {
|
|
2705
3264
|
const next = Math.min(Math.max(1, p), pageCount);
|
|
2706
3265
|
if (next === page) return false;
|
|
@@ -2735,7 +3294,7 @@ window.Aura = (() => {
|
|
|
2735
3294
|
);
|
|
2736
3295
|
}
|
|
2737
3296
|
function rowLinkWrap(r, content) {
|
|
2738
|
-
return rowHref ? /* @__PURE__ */
|
|
3297
|
+
return rowHref ? /* @__PURE__ */ React28.createElement(Link, { href: rowHref(r), className: "aura-table__row-link" }, content) : content;
|
|
2739
3298
|
}
|
|
2740
3299
|
const height = props.height || 0;
|
|
2741
3300
|
const virtual = !!height && !loading && pageRows.length > 0;
|
|
@@ -2758,7 +3317,7 @@ window.Aura = (() => {
|
|
|
2758
3317
|
if (!activeRendered) return r === 0 && c === ac ? 0 : -1;
|
|
2759
3318
|
return r === ar && c === ac ? 0 : -1;
|
|
2760
3319
|
}
|
|
2761
|
-
|
|
3320
|
+
React28.useEffect(function() {
|
|
2762
3321
|
const p = pending.current;
|
|
2763
3322
|
if (!p || !gridRef.current) return;
|
|
2764
3323
|
let c = p.c;
|
|
@@ -2924,9 +3483,9 @@ window.Aura = (() => {
|
|
|
2924
3483
|
const group = vis.filter(function(x) {
|
|
2925
3484
|
return isPinned(x) === isPinned(c);
|
|
2926
3485
|
}), gi = group.indexOf(c);
|
|
2927
|
-
const
|
|
3486
|
+
const items2 = [];
|
|
2928
3487
|
if (c.sortable)
|
|
2929
|
-
|
|
3488
|
+
items2.push(
|
|
2930
3489
|
{
|
|
2931
3490
|
label: t.sortAsc,
|
|
2932
3491
|
icon: "arrow-up",
|
|
@@ -2946,7 +3505,7 @@ window.Aura = (() => {
|
|
|
2946
3505
|
{ separator: true }
|
|
2947
3506
|
);
|
|
2948
3507
|
if (c.width != null)
|
|
2949
|
-
|
|
3508
|
+
items2.push({
|
|
2950
3509
|
label: isPinned(c) ? t.unpin : t.pin,
|
|
2951
3510
|
icon: isPinned(c) ? "pin-off" : "pin",
|
|
2952
3511
|
onSelect: function() {
|
|
@@ -2954,7 +3513,7 @@ window.Aura = (() => {
|
|
|
2954
3513
|
}
|
|
2955
3514
|
});
|
|
2956
3515
|
if (reorderable)
|
|
2957
|
-
|
|
3516
|
+
items2.push(
|
|
2958
3517
|
{
|
|
2959
3518
|
label: t.moveLeft,
|
|
2960
3519
|
icon: "arrow-left",
|
|
@@ -2972,7 +3531,7 @@ window.Aura = (() => {
|
|
|
2972
3531
|
}
|
|
2973
3532
|
}
|
|
2974
3533
|
);
|
|
2975
|
-
|
|
3534
|
+
items2.push(
|
|
2976
3535
|
{ separator: true },
|
|
2977
3536
|
{
|
|
2978
3537
|
label: t.hideColumn,
|
|
@@ -2983,7 +3542,7 @@ window.Aura = (() => {
|
|
|
2983
3542
|
}
|
|
2984
3543
|
}
|
|
2985
3544
|
);
|
|
2986
|
-
return
|
|
3545
|
+
return items2;
|
|
2987
3546
|
}
|
|
2988
3547
|
function pickerItems() {
|
|
2989
3548
|
return order.map(function(k) {
|
|
@@ -3069,10 +3628,10 @@ window.Aura = (() => {
|
|
|
3069
3628
|
e.stopPropagation();
|
|
3070
3629
|
}
|
|
3071
3630
|
}
|
|
3072
|
-
const head = [/* @__PURE__ */
|
|
3631
|
+
const head = [/* @__PURE__ */ React28.createElement("span", { key: "__gl", className: "aura-table__gutter", "aria-hidden": true })];
|
|
3073
3632
|
if (selectable)
|
|
3074
3633
|
head.push(
|
|
3075
|
-
/* @__PURE__ */
|
|
3634
|
+
/* @__PURE__ */ React28.createElement(
|
|
3076
3635
|
"span",
|
|
3077
3636
|
{
|
|
3078
3637
|
key: "__sel",
|
|
@@ -3086,7 +3645,7 @@ window.Aura = (() => {
|
|
|
3086
3645
|
activeState[1]({ r: 0, c: 0 });
|
|
3087
3646
|
}
|
|
3088
3647
|
},
|
|
3089
|
-
nRows ? /* @__PURE__ */
|
|
3648
|
+
nRows ? /* @__PURE__ */ React28.createElement(
|
|
3090
3649
|
Checkbox,
|
|
3091
3650
|
{
|
|
3092
3651
|
checked: all,
|
|
@@ -3105,7 +3664,7 @@ window.Aura = (() => {
|
|
|
3105
3664
|
const ariaSort = isSorted && canSort ? sort.dir === "desc" ? "descending" : "ascending" : canSort ? "none" : void 0;
|
|
3106
3665
|
const pin = isPinned(c), edge = pin && i === nPinned - 1;
|
|
3107
3666
|
head.push(
|
|
3108
|
-
/* @__PURE__ */
|
|
3667
|
+
/* @__PURE__ */ React28.createElement(
|
|
3109
3668
|
"span",
|
|
3110
3669
|
{
|
|
3111
3670
|
key: c.key,
|
|
@@ -3154,7 +3713,7 @@ window.Aura = (() => {
|
|
|
3154
3713
|
setDrag(null);
|
|
3155
3714
|
}
|
|
3156
3715
|
},
|
|
3157
|
-
/* @__PURE__ */
|
|
3716
|
+
/* @__PURE__ */ React28.createElement("span", { className: "aura-table__th-inner" }, canSort ? /* @__PURE__ */ React28.createElement(
|
|
3158
3717
|
"button",
|
|
3159
3718
|
{
|
|
3160
3719
|
type: "button",
|
|
@@ -3166,8 +3725,8 @@ window.Aura = (() => {
|
|
|
3166
3725
|
}
|
|
3167
3726
|
},
|
|
3168
3727
|
c.label,
|
|
3169
|
-
/* @__PURE__ */
|
|
3170
|
-
) : /* @__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(
|
|
3171
3730
|
"button",
|
|
3172
3731
|
{
|
|
3173
3732
|
type: "button",
|
|
@@ -3181,9 +3740,9 @@ window.Aura = (() => {
|
|
|
3181
3740
|
openMenu("col", c.key, e.currentTarget, { r: 0, c: ci });
|
|
3182
3741
|
}
|
|
3183
3742
|
},
|
|
3184
|
-
/* @__PURE__ */
|
|
3743
|
+
/* @__PURE__ */ React28.createElement(Icon, { name: "ellipsis" })
|
|
3185
3744
|
) : null),
|
|
3186
|
-
canResize(c) ? /* @__PURE__ */
|
|
3745
|
+
canResize(c) ? /* @__PURE__ */ React28.createElement(
|
|
3187
3746
|
"span",
|
|
3188
3747
|
{
|
|
3189
3748
|
className: "aura-table__resize",
|
|
@@ -3205,7 +3764,7 @@ window.Aura = (() => {
|
|
|
3205
3764
|
);
|
|
3206
3765
|
});
|
|
3207
3766
|
head.push(
|
|
3208
|
-
/* @__PURE__ */
|
|
3767
|
+
/* @__PURE__ */ React28.createElement(
|
|
3209
3768
|
"span",
|
|
3210
3769
|
{
|
|
3211
3770
|
key: "__gr",
|
|
@@ -3216,14 +3775,14 @@ window.Aura = (() => {
|
|
|
3216
3775
|
);
|
|
3217
3776
|
function cellContent(c, r) {
|
|
3218
3777
|
const v = r[c.key];
|
|
3219
|
-
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;
|
|
3220
3779
|
}
|
|
3221
3780
|
function rowCells(r, i, k, isSel) {
|
|
3222
3781
|
const ri = i + 1;
|
|
3223
|
-
const cells = [/* @__PURE__ */
|
|
3782
|
+
const cells = [/* @__PURE__ */ React28.createElement("span", { key: "__gl", className: "aura-table__gutter", "aria-hidden": true })];
|
|
3224
3783
|
if (selectable)
|
|
3225
3784
|
cells.push(
|
|
3226
|
-
/* @__PURE__ */
|
|
3785
|
+
/* @__PURE__ */ React28.createElement(
|
|
3227
3786
|
"span",
|
|
3228
3787
|
{
|
|
3229
3788
|
key: "__sel",
|
|
@@ -3237,7 +3796,7 @@ window.Aura = (() => {
|
|
|
3237
3796
|
if (e.target === e.currentTarget) activeState[1]({ r: ri, c: 0 });
|
|
3238
3797
|
}
|
|
3239
3798
|
},
|
|
3240
|
-
/* @__PURE__ */
|
|
3799
|
+
/* @__PURE__ */ React28.createElement(
|
|
3241
3800
|
Checkbox,
|
|
3242
3801
|
{
|
|
3243
3802
|
checked: isSel,
|
|
@@ -3253,7 +3812,7 @@ window.Aura = (() => {
|
|
|
3253
3812
|
vis.forEach(function(c, j) {
|
|
3254
3813
|
const ci = j + (selectable ? 1 : 0), v = r[c.key], pin = isPinned(c);
|
|
3255
3814
|
cells.push(
|
|
3256
|
-
/* @__PURE__ */
|
|
3815
|
+
/* @__PURE__ */ React28.createElement(
|
|
3257
3816
|
"span",
|
|
3258
3817
|
{
|
|
3259
3818
|
key: c.key,
|
|
@@ -3278,7 +3837,7 @@ window.Aura = (() => {
|
|
|
3278
3837
|
);
|
|
3279
3838
|
});
|
|
3280
3839
|
cells.push(
|
|
3281
|
-
/* @__PURE__ */
|
|
3840
|
+
/* @__PURE__ */ React28.createElement(
|
|
3282
3841
|
"span",
|
|
3283
3842
|
{
|
|
3284
3843
|
key: "__gr",
|
|
@@ -3295,21 +3854,21 @@ window.Aura = (() => {
|
|
|
3295
3854
|
const n2 = pageSize || props.skeletonRows || 5;
|
|
3296
3855
|
const skRows = body = [];
|
|
3297
3856
|
for (let i = 0; i < n2; i++) {
|
|
3298
|
-
const sk = [/* @__PURE__ */
|
|
3857
|
+
const sk = [/* @__PURE__ */ React28.createElement("span", { key: "__gl", className: "aura-table__gutter" })];
|
|
3299
3858
|
if (selectable)
|
|
3300
3859
|
sk.push(
|
|
3301
|
-
/* @__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" }))
|
|
3302
3861
|
);
|
|
3303
3862
|
vis.forEach(function(c, j) {
|
|
3304
3863
|
sk.push(
|
|
3305
|
-
/* @__PURE__ */
|
|
3864
|
+
/* @__PURE__ */ React28.createElement(
|
|
3306
3865
|
"span",
|
|
3307
3866
|
{
|
|
3308
3867
|
key: c.key,
|
|
3309
3868
|
className: cx("aura-table__td", c.align === "end" && "is-end", isPinned(c) && "is-pinned"),
|
|
3310
3869
|
style: cellStyle(c, j)
|
|
3311
3870
|
},
|
|
3312
|
-
/* @__PURE__ */
|
|
3871
|
+
/* @__PURE__ */ React28.createElement(
|
|
3313
3872
|
"span",
|
|
3314
3873
|
{
|
|
3315
3874
|
className: cx("aura-skel", c.pill && "aura-skel--pill"),
|
|
@@ -3320,24 +3879,24 @@ window.Aura = (() => {
|
|
|
3320
3879
|
);
|
|
3321
3880
|
});
|
|
3322
3881
|
sk.push(
|
|
3323
|
-
/* @__PURE__ */
|
|
3882
|
+
/* @__PURE__ */ React28.createElement("span", { key: "__gr", className: cx("aura-table__gutter aura-table__gutter--end", controls && "has-picker") })
|
|
3324
3883
|
);
|
|
3325
3884
|
skRows.push(
|
|
3326
|
-
/* @__PURE__ */
|
|
3885
|
+
/* @__PURE__ */ React28.createElement("div", { key: "sk" + i, className: "aura-table__row aura-table__row--skeleton", "aria-hidden": true, style: rowStyle }, sk)
|
|
3327
3886
|
);
|
|
3328
3887
|
}
|
|
3329
3888
|
} else if (!rows.length) {
|
|
3330
3889
|
const em = props.empty || {};
|
|
3331
|
-
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));
|
|
3332
3891
|
} else {
|
|
3333
3892
|
const bodyRows = body = [];
|
|
3334
3893
|
if (virtual && start > 0)
|
|
3335
|
-
bodyRows.push(/* @__PURE__ */
|
|
3894
|
+
bodyRows.push(/* @__PURE__ */ React28.createElement("div", { key: "__top", style: { height: start * ROW_H + "px" }, "aria-hidden": true }));
|
|
3336
3895
|
for (let ri = start; ri < end; ri++) {
|
|
3337
3896
|
(function(r, i) {
|
|
3338
3897
|
const k = r[rowKey], isSel = !!selSet[k];
|
|
3339
3898
|
bodyRows.push(
|
|
3340
|
-
/* @__PURE__ */
|
|
3899
|
+
/* @__PURE__ */ React28.createElement(
|
|
3341
3900
|
"div",
|
|
3342
3901
|
{
|
|
3343
3902
|
key: k,
|
|
@@ -3363,13 +3922,13 @@ window.Aura = (() => {
|
|
|
3363
3922
|
})(pageRows[ri], ri);
|
|
3364
3923
|
}
|
|
3365
3924
|
if (virtual && end < pageRows.length)
|
|
3366
|
-
bodyRows.push(/* @__PURE__ */
|
|
3925
|
+
bodyRows.push(/* @__PURE__ */ React28.createElement("div", { key: "__bot", style: { height: (pageRows.length - end) * ROW_H + "px" }, "aria-hidden": true }));
|
|
3367
3926
|
}
|
|
3368
3927
|
let foot = null;
|
|
3369
3928
|
function pagerButton(dir) {
|
|
3370
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";
|
|
3371
3930
|
if (props.getPageHref && !off)
|
|
3372
|
-
return /* @__PURE__ */
|
|
3931
|
+
return /* @__PURE__ */ React28.createElement(
|
|
3373
3932
|
Link,
|
|
3374
3933
|
{
|
|
3375
3934
|
ref: dir < 0 ? prevLink : nextLink,
|
|
@@ -3383,9 +3942,9 @@ window.Aura = (() => {
|
|
|
3383
3942
|
}
|
|
3384
3943
|
}
|
|
3385
3944
|
},
|
|
3386
|
-
/* @__PURE__ */
|
|
3945
|
+
/* @__PURE__ */ React28.createElement(Icon, { name: icon })
|
|
3387
3946
|
);
|
|
3388
|
-
return /* @__PURE__ */
|
|
3947
|
+
return /* @__PURE__ */ React28.createElement(
|
|
3389
3948
|
IconButton,
|
|
3390
3949
|
{
|
|
3391
3950
|
icon,
|
|
@@ -3399,9 +3958,9 @@ window.Aura = (() => {
|
|
|
3399
3958
|
}
|
|
3400
3959
|
if (pageSize && (rows.length || busy)) {
|
|
3401
3960
|
const from = rows.length ? first + 1 : 0, to = manual ? first + rows.length : Math.min(first + pageSize, view.length);
|
|
3402
|
-
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)));
|
|
3403
3962
|
} else if (height && rows.length && !loading) {
|
|
3404
|
-
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));
|
|
3405
3964
|
}
|
|
3406
3965
|
if (stacked) {
|
|
3407
3966
|
const titleCol = vis[0], pillCol = vis.filter(function(c) {
|
|
@@ -3415,17 +3974,17 @@ window.Aura = (() => {
|
|
|
3415
3974
|
});
|
|
3416
3975
|
let cardBody;
|
|
3417
3976
|
if (loading) {
|
|
3418
|
-
cardBody = /* @__PURE__ */
|
|
3419
|
-
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%" } }));
|
|
3420
3979
|
}));
|
|
3421
3980
|
} else if (!rows.length) {
|
|
3422
3981
|
const em2 = props.empty || {};
|
|
3423
|
-
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));
|
|
3424
3983
|
} else {
|
|
3425
3984
|
const cellVal = cellContent;
|
|
3426
|
-
cardBody = /* @__PURE__ */
|
|
3985
|
+
cardBody = /* @__PURE__ */ React28.createElement("ul", { className: "aura-table__cards", "aria-label": props.label }, pageRows.map(function(r) {
|
|
3427
3986
|
const k = r[rowKey], isSel = !!selSet[k];
|
|
3428
|
-
return /* @__PURE__ */
|
|
3987
|
+
return /* @__PURE__ */ React28.createElement(
|
|
3429
3988
|
"li",
|
|
3430
3989
|
{
|
|
3431
3990
|
key: k,
|
|
@@ -3446,7 +4005,7 @@ window.Aura = (() => {
|
|
|
3446
4005
|
props.onRowActivate(r);
|
|
3447
4006
|
}
|
|
3448
4007
|
},
|
|
3449
|
-
/* @__PURE__ */
|
|
4008
|
+
/* @__PURE__ */ React28.createElement("div", { className: "aura-table__card-head" }, selectable ? /* @__PURE__ */ React28.createElement(
|
|
3450
4009
|
Checkbox,
|
|
3451
4010
|
{
|
|
3452
4011
|
checked: isSel,
|
|
@@ -3455,16 +4014,16 @@ window.Aura = (() => {
|
|
|
3455
4014
|
toggle(k, on);
|
|
3456
4015
|
}
|
|
3457
4016
|
}
|
|
3458
|
-
) : null, /* @__PURE__ */
|
|
3459
|
-
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));
|
|
3460
4019
|
})),
|
|
3461
|
-
rest.length ? /* @__PURE__ */
|
|
3462
|
-
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)));
|
|
3463
4022
|
})) : null
|
|
3464
4023
|
);
|
|
3465
4024
|
}));
|
|
3466
4025
|
}
|
|
3467
|
-
return /* @__PURE__ */
|
|
4026
|
+
return /* @__PURE__ */ React28.createElement(
|
|
3468
4027
|
"div",
|
|
3469
4028
|
{
|
|
3470
4029
|
ref: wrapMerged,
|
|
@@ -3473,8 +4032,8 @@ window.Aura = (() => {
|
|
|
3473
4032
|
"aria-label": props.label,
|
|
3474
4033
|
"aria-busy": busy || void 0
|
|
3475
4034
|
},
|
|
3476
|
-
refreshing ? /* @__PURE__ */
|
|
3477
|
-
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(
|
|
3478
4037
|
Checkbox,
|
|
3479
4038
|
{
|
|
3480
4039
|
checked: all,
|
|
@@ -3482,7 +4041,7 @@ window.Aura = (() => {
|
|
|
3482
4041
|
label: all ? t.deselectAllRows : t.selectAllRows,
|
|
3483
4042
|
onChange: toggleAll
|
|
3484
4043
|
}
|
|
3485
|
-
), /* @__PURE__ */
|
|
4044
|
+
), /* @__PURE__ */ React28.createElement("span", null, nSel ? t.selectedCount(nSel) : t.selectAll)) : null,
|
|
3486
4045
|
cardBody,
|
|
3487
4046
|
foot
|
|
3488
4047
|
);
|
|
@@ -3492,14 +4051,14 @@ window.Aura = (() => {
|
|
|
3492
4051
|
scrollPaddingTop: ROW_H + "px"
|
|
3493
4052
|
};
|
|
3494
4053
|
if (height) scrollStyle.height = height + "px";
|
|
3495
|
-
return /* @__PURE__ */
|
|
4054
|
+
return /* @__PURE__ */ React28.createElement(
|
|
3496
4055
|
"div",
|
|
3497
4056
|
{
|
|
3498
4057
|
ref: wrapMerged,
|
|
3499
4058
|
className: cx("aura-table", scrolledX[0] && "is-scrolled-x", refreshing && "is-refreshing", props.className)
|
|
3500
4059
|
},
|
|
3501
|
-
refreshing ? /* @__PURE__ */
|
|
3502
|
-
/* @__PURE__ */
|
|
4060
|
+
refreshing ? /* @__PURE__ */ React28.createElement("span", { className: "aura-table__busy-bar", "aria-hidden": true }) : null,
|
|
4061
|
+
/* @__PURE__ */ React28.createElement(
|
|
3503
4062
|
"div",
|
|
3504
4063
|
{
|
|
3505
4064
|
ref: function(el) {
|
|
@@ -3524,11 +4083,11 @@ window.Aura = (() => {
|
|
|
3524
4083
|
if (sx !== scrolledX[0]) scrolledX[1](sx);
|
|
3525
4084
|
}
|
|
3526
4085
|
},
|
|
3527
|
-
/* @__PURE__ */
|
|
4086
|
+
/* @__PURE__ */ React28.createElement("div", { className: "aura-table__head", role: "row", "aria-rowindex": 1, style: rowStyle }, head),
|
|
3528
4087
|
body
|
|
3529
4088
|
),
|
|
3530
|
-
busy ? /* @__PURE__ */
|
|
3531
|
-
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(
|
|
3532
4091
|
IconButton,
|
|
3533
4092
|
{
|
|
3534
4093
|
icon: "columns-3",
|
|
@@ -3540,7 +4099,7 @@ window.Aura = (() => {
|
|
|
3540
4099
|
}
|
|
3541
4100
|
)) : null,
|
|
3542
4101
|
foot,
|
|
3543
|
-
menu ? /* @__PURE__ */
|
|
4102
|
+
menu ? /* @__PURE__ */ React28.createElement(
|
|
3544
4103
|
Menu,
|
|
3545
4104
|
{
|
|
3546
4105
|
anchor: menu.anchor,
|
|
@@ -3553,9 +4112,9 @@ window.Aura = (() => {
|
|
|
3553
4112
|
});
|
|
3554
4113
|
|
|
3555
4114
|
// src/Card.tsx
|
|
3556
|
-
var
|
|
3557
|
-
var h4 =
|
|
3558
|
-
var Card =
|
|
4115
|
+
var React29 = __toESM(require_react(), 1);
|
|
4116
|
+
var h4 = React29.createElement;
|
|
4117
|
+
var Card = React29.forwardRef(function Card2(props, ref) {
|
|
3559
4118
|
const creative = props.variant === "creative";
|
|
3560
4119
|
return h4(
|
|
3561
4120
|
props.as || "section",
|
|
@@ -3569,41 +4128,41 @@ window.Aura = (() => {
|
|
|
3569
4128
|
),
|
|
3570
4129
|
"aria-labelledby": props.title && props.titleId ? props.titleId : void 0
|
|
3571
4130
|
},
|
|
3572
|
-
props.title || props.actions ? /* @__PURE__ */
|
|
3573
|
-
props.children ? /* @__PURE__ */
|
|
3574
|
-
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
|
|
3575
4134
|
);
|
|
3576
4135
|
});
|
|
3577
4136
|
|
|
3578
4137
|
// src/Tabs.tsx
|
|
3579
|
-
var
|
|
3580
|
-
var Tabs =
|
|
3581
|
-
const
|
|
4138
|
+
var React30 = __toESM(require_react(), 1);
|
|
4139
|
+
var Tabs = React30.forwardRef(function Tabs2(props, ref) {
|
|
4140
|
+
const items2 = props.tabs || [], base = uid();
|
|
3582
4141
|
const st = useMaybeControlled(
|
|
3583
4142
|
props.value,
|
|
3584
|
-
props.defaultValue ||
|
|
4143
|
+
props.defaultValue || items2[0] && items2[0].id,
|
|
3585
4144
|
props.onChange
|
|
3586
4145
|
);
|
|
3587
|
-
const refs =
|
|
3588
|
-
const current2 =
|
|
4146
|
+
const refs = React30.useRef({});
|
|
4147
|
+
const current2 = items2.filter(function(t) {
|
|
3589
4148
|
return t.id === st[0];
|
|
3590
|
-
})[0] ||
|
|
4149
|
+
})[0] || items2[0];
|
|
3591
4150
|
function go(i) {
|
|
3592
|
-
const enabled =
|
|
4151
|
+
const enabled = items2.filter(function(t2) {
|
|
3593
4152
|
return !t2.disabled;
|
|
3594
4153
|
});
|
|
3595
4154
|
const t = enabled[(i + enabled.length) % enabled.length];
|
|
3596
4155
|
st[1](t.id);
|
|
3597
4156
|
if (refs.current[t.id]) refs.current[t.id].focus();
|
|
3598
4157
|
}
|
|
3599
|
-
return /* @__PURE__ */
|
|
4158
|
+
return /* @__PURE__ */ React30.createElement("div", { ref, className: cx("aura-tabs", props.className) }, /* @__PURE__ */ React30.createElement(
|
|
3600
4159
|
"div",
|
|
3601
4160
|
{
|
|
3602
4161
|
role: "tablist",
|
|
3603
4162
|
"aria-label": props.label,
|
|
3604
4163
|
className: "aura-tabs__list",
|
|
3605
4164
|
onKeyDown: function(e) {
|
|
3606
|
-
const enabled =
|
|
4165
|
+
const enabled = items2.filter(function(t) {
|
|
3607
4166
|
return !t.disabled;
|
|
3608
4167
|
}), i = enabled.indexOf(current2);
|
|
3609
4168
|
if (e.key === "ArrowRight") {
|
|
@@ -3621,9 +4180,9 @@ window.Aura = (() => {
|
|
|
3621
4180
|
}
|
|
3622
4181
|
}
|
|
3623
4182
|
},
|
|
3624
|
-
|
|
4183
|
+
items2.map(function(t) {
|
|
3625
4184
|
const on = current2 && t.id === current2.id;
|
|
3626
|
-
return /* @__PURE__ */
|
|
4185
|
+
return /* @__PURE__ */ React30.createElement(
|
|
3627
4186
|
"button",
|
|
3628
4187
|
{
|
|
3629
4188
|
key: t.id,
|
|
@@ -3642,12 +4201,12 @@ window.Aura = (() => {
|
|
|
3642
4201
|
st[1](t.id);
|
|
3643
4202
|
}
|
|
3644
4203
|
},
|
|
3645
|
-
t.icon ? /* @__PURE__ */
|
|
4204
|
+
t.icon ? /* @__PURE__ */ React30.createElement(Icon, { name: t.icon }) : null,
|
|
3646
4205
|
t.label,
|
|
3647
|
-
t.count != null ? /* @__PURE__ */
|
|
4206
|
+
t.count != null ? /* @__PURE__ */ React30.createElement("span", { className: "aura-tab__count" }, t.count) : null
|
|
3648
4207
|
);
|
|
3649
4208
|
})
|
|
3650
|
-
), current2 && current2.content !== void 0 ? /* @__PURE__ */
|
|
4209
|
+
), current2 && current2.content !== void 0 ? /* @__PURE__ */ React30.createElement(
|
|
3651
4210
|
"div",
|
|
3652
4211
|
{
|
|
3653
4212
|
role: "tabpanel",
|
|
@@ -3661,13 +4220,13 @@ window.Aura = (() => {
|
|
|
3661
4220
|
});
|
|
3662
4221
|
|
|
3663
4222
|
// src/SideNav.tsx
|
|
3664
|
-
var
|
|
4223
|
+
var React31 = __toESM(require_react(), 1);
|
|
3665
4224
|
function contains(it, id) {
|
|
3666
4225
|
return !!id && !!it.children && it.children.some(function(c) {
|
|
3667
4226
|
return c.id === id || contains(c, id);
|
|
3668
4227
|
});
|
|
3669
4228
|
}
|
|
3670
|
-
var SideNav =
|
|
4229
|
+
var SideNav = React31.forwardRef(function SideNav2(props, ref) {
|
|
3671
4230
|
const t = useStrings();
|
|
3672
4231
|
const Link = useLinkComponent(props.linkComponent);
|
|
3673
4232
|
const base = uid();
|
|
@@ -3678,12 +4237,12 @@ window.Aura = (() => {
|
|
|
3678
4237
|
);
|
|
3679
4238
|
const active = st[0];
|
|
3680
4239
|
const sections = props.sections || [{ items: props.items || [] }];
|
|
3681
|
-
const openState =
|
|
4240
|
+
const openState = React31.useState({}), toggled = openState[0], setToggled = openState[1];
|
|
3682
4241
|
function isOpen(it) {
|
|
3683
4242
|
if (toggled[it.id] != null) return toggled[it.id];
|
|
3684
4243
|
return !!it.defaultOpen || contains(it, active);
|
|
3685
4244
|
}
|
|
3686
|
-
|
|
4245
|
+
React31.useEffect(
|
|
3687
4246
|
function() {
|
|
3688
4247
|
if (!active) return;
|
|
3689
4248
|
const next = {};
|
|
@@ -3705,14 +4264,14 @@ window.Aura = (() => {
|
|
|
3705
4264
|
},
|
|
3706
4265
|
[active]
|
|
3707
4266
|
);
|
|
3708
|
-
const navRef =
|
|
4267
|
+
const navRef = React31.useRef(null);
|
|
3709
4268
|
function onKeyDown(e) {
|
|
3710
4269
|
const k = e.key;
|
|
3711
4270
|
if (k !== "ArrowDown" && k !== "ArrowUp" && k !== "Home" && k !== "End") return;
|
|
3712
4271
|
const root = navRef.current;
|
|
3713
4272
|
if (!root) return;
|
|
3714
|
-
const
|
|
3715
|
-
const visible =
|
|
4273
|
+
const items2 = Array.prototype.slice.call(root.querySelectorAll(".aura-nav__item"));
|
|
4274
|
+
const visible = items2.filter(function(el) {
|
|
3716
4275
|
return el.offsetParent !== null || el === document.activeElement;
|
|
3717
4276
|
});
|
|
3718
4277
|
const i = visible.indexOf(document.activeElement);
|
|
@@ -3723,11 +4282,11 @@ window.Aura = (() => {
|
|
|
3723
4282
|
}
|
|
3724
4283
|
function inner(it, group, open) {
|
|
3725
4284
|
return [
|
|
3726
|
-
it.icon ? /* @__PURE__ */
|
|
3727
|
-
/* @__PURE__ */
|
|
3728
|
-
it.badge != null ? /* @__PURE__ */
|
|
3729
|
-
it.count != null ? /* @__PURE__ */
|
|
3730
|
-
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
|
|
3731
4290
|
];
|
|
3732
4291
|
}
|
|
3733
4292
|
function item(it, depth) {
|
|
@@ -3735,7 +4294,7 @@ window.Aura = (() => {
|
|
|
3735
4294
|
const open = isOpen(it);
|
|
3736
4295
|
const listId = base + "-" + it.id;
|
|
3737
4296
|
const holdsActive = contains(it, active);
|
|
3738
|
-
return /* @__PURE__ */
|
|
4297
|
+
return /* @__PURE__ */ React31.createElement("li", { key: it.id, className: "aura-nav__group" }, /* @__PURE__ */ React31.createElement(
|
|
3739
4298
|
"button",
|
|
3740
4299
|
{
|
|
3741
4300
|
type: "button",
|
|
@@ -3759,7 +4318,7 @@ window.Aura = (() => {
|
|
|
3759
4318
|
}
|
|
3760
4319
|
},
|
|
3761
4320
|
inner(it, true, open)
|
|
3762
|
-
), /* @__PURE__ */
|
|
4321
|
+
), /* @__PURE__ */ React31.createElement("ul", { id: listId, className: "aura-nav__list aura-nav__sub", hidden: !open }, it.children.map(function(c) {
|
|
3763
4322
|
return item(c, depth + 1);
|
|
3764
4323
|
})));
|
|
3765
4324
|
}
|
|
@@ -3773,9 +4332,9 @@ window.Aura = (() => {
|
|
|
3773
4332
|
st[1](it.id);
|
|
3774
4333
|
}
|
|
3775
4334
|
};
|
|
3776
|
-
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)));
|
|
3777
4336
|
}
|
|
3778
|
-
return /* @__PURE__ */
|
|
4337
|
+
return /* @__PURE__ */ React31.createElement(
|
|
3779
4338
|
"nav",
|
|
3780
4339
|
{
|
|
3781
4340
|
ref: function(el) {
|
|
@@ -3787,43 +4346,43 @@ window.Aura = (() => {
|
|
|
3787
4346
|
"aria-label": props.label || t.mainNav,
|
|
3788
4347
|
onKeyDown
|
|
3789
4348
|
},
|
|
3790
|
-
props.header ? /* @__PURE__ */
|
|
3791
|
-
/* @__PURE__ */
|
|
3792
|
-
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) {
|
|
3793
4352
|
return item(it, 0);
|
|
3794
4353
|
})));
|
|
3795
4354
|
})),
|
|
3796
|
-
props.footer ? /* @__PURE__ */
|
|
4355
|
+
props.footer ? /* @__PURE__ */ React31.createElement("div", { className: "aura-nav__footer" }, props.footer) : null
|
|
3797
4356
|
);
|
|
3798
4357
|
});
|
|
3799
4358
|
|
|
3800
4359
|
// src/Breadcrumb.tsx
|
|
3801
|
-
var
|
|
3802
|
-
var Breadcrumb =
|
|
4360
|
+
var React32 = __toESM(require_react(), 1);
|
|
4361
|
+
var Breadcrumb = React32.forwardRef(function Breadcrumb2(props, ref) {
|
|
3803
4362
|
const t = useStrings();
|
|
3804
4363
|
const Link = useLinkComponent();
|
|
3805
|
-
const
|
|
3806
|
-
return /* @__PURE__ */
|
|
3807
|
-
const last = i ===
|
|
3808
|
-
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" }));
|
|
3809
4368
|
})));
|
|
3810
4369
|
});
|
|
3811
4370
|
|
|
3812
4371
|
// src/Avatar.tsx
|
|
3813
|
-
var
|
|
4372
|
+
var React33 = __toESM(require_react(), 1);
|
|
3814
4373
|
var AVATAR_TONES = ["progress", "ready", "neutral", "warning"];
|
|
3815
4374
|
function initials(name) {
|
|
3816
4375
|
const parts = String(name || "?").trim().split(/\s+/);
|
|
3817
4376
|
return ((parts[0] || "?")[0] + (parts.length > 1 ? parts[parts.length - 1][0] : parts[0][1] || "")).toUpperCase();
|
|
3818
4377
|
}
|
|
3819
|
-
var Avatar =
|
|
3820
|
-
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);
|
|
3821
4380
|
let hash = 0;
|
|
3822
4381
|
String(props.name || "").split("").forEach(function(ch) {
|
|
3823
4382
|
hash = hash * 31 + ch.charCodeAt(0) >>> 0;
|
|
3824
4383
|
});
|
|
3825
4384
|
const tone2 = AVATAR_TONES[hash % AVATAR_TONES.length];
|
|
3826
|
-
return /* @__PURE__ */
|
|
4385
|
+
return /* @__PURE__ */ React33.createElement(
|
|
3827
4386
|
"span",
|
|
3828
4387
|
{
|
|
3829
4388
|
ref,
|
|
@@ -3831,7 +4390,7 @@ window.Aura = (() => {
|
|
|
3831
4390
|
role: "img",
|
|
3832
4391
|
"aria-label": props.name + (props.status ? ", " + props.status : "")
|
|
3833
4392
|
},
|
|
3834
|
-
props.src && !errState[0] ? /* @__PURE__ */
|
|
4393
|
+
props.src && !errState[0] ? /* @__PURE__ */ React33.createElement(
|
|
3835
4394
|
"img",
|
|
3836
4395
|
{
|
|
3837
4396
|
src: props.src,
|
|
@@ -3840,20 +4399,20 @@ window.Aura = (() => {
|
|
|
3840
4399
|
errState[1](true);
|
|
3841
4400
|
}
|
|
3842
4401
|
}
|
|
3843
|
-
) : /* @__PURE__ */
|
|
3844
|
-
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
|
|
3845
4404
|
);
|
|
3846
4405
|
});
|
|
3847
4406
|
|
|
3848
4407
|
// src/Stack.tsx
|
|
3849
|
-
var
|
|
4408
|
+
var React35 = __toESM(require_react(), 1);
|
|
3850
4409
|
|
|
3851
4410
|
// src/responsive.tsx
|
|
3852
|
-
var
|
|
4411
|
+
var React34 = __toESM(require_react(), 1);
|
|
3853
4412
|
var breakpoints = { sm: 640, md: 768, lg: 1024, xl: 1280 };
|
|
3854
4413
|
var ORDER = ["base", "sm", "md", "lg", "xl"];
|
|
3855
4414
|
function useBreakpoint() {
|
|
3856
|
-
return
|
|
4415
|
+
return React34.useSyncExternalStore(subscribe, current, function() {
|
|
3857
4416
|
return "lg";
|
|
3858
4417
|
});
|
|
3859
4418
|
}
|
|
@@ -3893,8 +4452,8 @@ window.Aura = (() => {
|
|
|
3893
4452
|
};
|
|
3894
4453
|
|
|
3895
4454
|
// src/Stack.tsx
|
|
3896
|
-
var h5 =
|
|
3897
|
-
var Stack =
|
|
4455
|
+
var h5 = React35.createElement;
|
|
4456
|
+
var Stack = React35.forwardRef(function Stack2(props, ref) {
|
|
3898
4457
|
const style = Object.assign(
|
|
3899
4458
|
{},
|
|
3900
4459
|
respVars("aura-stack-dir", props.direction || "column"),
|
|
@@ -3908,9 +4467,9 @@ window.Aura = (() => {
|
|
|
3908
4467
|
});
|
|
3909
4468
|
|
|
3910
4469
|
// src/Grid.tsx
|
|
3911
|
-
var
|
|
3912
|
-
var h6 =
|
|
3913
|
-
var Grid =
|
|
4470
|
+
var React36 = __toESM(require_react(), 1);
|
|
4471
|
+
var h6 = React36.createElement;
|
|
4472
|
+
var Grid = React36.forwardRef(function Grid2(props, ref) {
|
|
3914
4473
|
const style = Object.assign(
|
|
3915
4474
|
{},
|
|
3916
4475
|
respVars("aura-grid-gap", props.gap == null ? 6 : props.gap, space),
|
|
@@ -3925,9 +4484,9 @@ window.Aura = (() => {
|
|
|
3925
4484
|
});
|
|
3926
4485
|
|
|
3927
4486
|
// src/Container.tsx
|
|
3928
|
-
var
|
|
3929
|
-
var h7 =
|
|
3930
|
-
var Container =
|
|
4487
|
+
var React37 = __toESM(require_react(), 1);
|
|
4488
|
+
var h7 = React37.createElement;
|
|
4489
|
+
var Container = React37.forwardRef(function Container2(props, ref) {
|
|
3931
4490
|
return h7(
|
|
3932
4491
|
props.as || "div",
|
|
3933
4492
|
{
|
|
@@ -3940,27 +4499,27 @@ window.Aura = (() => {
|
|
|
3940
4499
|
});
|
|
3941
4500
|
|
|
3942
4501
|
// src/AppShell.tsx
|
|
3943
|
-
var
|
|
3944
|
-
var AppShell =
|
|
4502
|
+
var React38 = __toESM(require_react(), 1);
|
|
4503
|
+
var AppShell = React38.forwardRef(function AppShell2(props, ref) {
|
|
3945
4504
|
const t = useStrings();
|
|
3946
4505
|
const bp = useBreakpoint();
|
|
3947
4506
|
const compact = bp === "base" || bp === "sm" || bp === "md";
|
|
3948
|
-
const st =
|
|
3949
|
-
|
|
4507
|
+
const st = React38.useState(false), open = st[0], setOpen = st[1];
|
|
4508
|
+
React38.useEffect(
|
|
3950
4509
|
function() {
|
|
3951
4510
|
if (!compact) setOpen(false);
|
|
3952
4511
|
},
|
|
3953
4512
|
[compact]
|
|
3954
4513
|
);
|
|
3955
4514
|
const navEl = props.nav;
|
|
3956
|
-
const nav = props.nav &&
|
|
4515
|
+
const nav = props.nav && React38.isValidElement(props.nav) && compact ? React38.cloneElement(navEl, {
|
|
3957
4516
|
onChange: function(id) {
|
|
3958
4517
|
if (navEl.props.onChange) navEl.props.onChange(id);
|
|
3959
4518
|
setOpen(false);
|
|
3960
4519
|
},
|
|
3961
4520
|
className: cx(navEl.props.className, "is-in-drawer")
|
|
3962
4521
|
}) : props.nav;
|
|
3963
|
-
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(
|
|
3964
4523
|
Drawer,
|
|
3965
4524
|
{
|
|
3966
4525
|
open,
|
|
@@ -3973,7 +4532,7 @@ window.Aura = (() => {
|
|
|
3973
4532
|
dismissible: true
|
|
3974
4533
|
},
|
|
3975
4534
|
nav
|
|
3976
|
-
) : 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(
|
|
3977
4536
|
IconButton,
|
|
3978
4537
|
{
|
|
3979
4538
|
icon: "menu",
|
|
@@ -3984,13 +4543,13 @@ window.Aura = (() => {
|
|
|
3984
4543
|
},
|
|
3985
4544
|
"aria-expanded": open
|
|
3986
4545
|
}
|
|
3987
|
-
) : 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)));
|
|
3988
4547
|
});
|
|
3989
4548
|
|
|
3990
4549
|
// src/Surface.tsx
|
|
3991
|
-
var
|
|
3992
|
-
var h8 =
|
|
3993
|
-
var Surface =
|
|
4550
|
+
var React39 = __toESM(require_react(), 1);
|
|
4551
|
+
var h8 = React39.createElement;
|
|
4552
|
+
var Surface = React39.forwardRef(function Surface2(props, ref) {
|
|
3994
4553
|
const t = props.texture || "mesh";
|
|
3995
4554
|
const rest = omit(props, ["texture", "className", "children", "as"]);
|
|
3996
4555
|
return h8(
|
|
@@ -4011,8 +4570,8 @@ window.Aura = (() => {
|
|
|
4011
4570
|
});
|
|
4012
4571
|
|
|
4013
4572
|
// src/Stat.tsx
|
|
4014
|
-
var
|
|
4015
|
-
var Stat =
|
|
4573
|
+
var React40 = __toESM(require_react(), 1);
|
|
4574
|
+
var Stat = React40.forwardRef(function Stat2(props, ref) {
|
|
4016
4575
|
const ch = props.change;
|
|
4017
4576
|
const dir = ch && (ch.direction || "flat");
|
|
4018
4577
|
const tone2 = ch && (ch.tone || (dir === "up" ? "positive" : dir === "down" ? "negative" : "neutral"));
|
|
@@ -4021,7 +4580,7 @@ window.Aura = (() => {
|
|
|
4021
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, ""));
|
|
4022
4581
|
const Tag3 = props.href ? Link : props.onClick ? "button" : "div";
|
|
4023
4582
|
const interactive = !!(props.href || props.onClick);
|
|
4024
|
-
return /* @__PURE__ */
|
|
4583
|
+
return /* @__PURE__ */ React40.createElement(
|
|
4025
4584
|
Tag3,
|
|
4026
4585
|
{
|
|
4027
4586
|
ref,
|
|
@@ -4031,15 +4590,15 @@ window.Aura = (() => {
|
|
|
4031
4590
|
type: Tag3 === "button" ? "button" : void 0,
|
|
4032
4591
|
"aria-busy": props.loading || void 0
|
|
4033
4592
|
},
|
|
4034
|
-
/* @__PURE__ */
|
|
4035
|
-
props.loading ? /* @__PURE__ */
|
|
4036
|
-
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
|
|
4037
4596
|
);
|
|
4038
4597
|
});
|
|
4039
4598
|
|
|
4040
4599
|
// src/TimePicker.tsx
|
|
4041
|
-
var
|
|
4042
|
-
var
|
|
4600
|
+
var React41 = __toESM(require_react(), 1);
|
|
4601
|
+
var import_react_dom8 = __toESM(require_react_dom(), 1);
|
|
4043
4602
|
function pad2(n2) {
|
|
4044
4603
|
return (n2 < 10 ? "0" : "") + n2;
|
|
4045
4604
|
}
|
|
@@ -4062,7 +4621,7 @@ window.Aura = (() => {
|
|
|
4062
4621
|
if (hh > 23 || mm > 59) return null;
|
|
4063
4622
|
return pad2(hh) + ":" + pad2(mm);
|
|
4064
4623
|
}
|
|
4065
|
-
var TimePicker =
|
|
4624
|
+
var TimePicker = React41.forwardRef(function TimePicker2(props, ref) {
|
|
4066
4625
|
const t = useStrings();
|
|
4067
4626
|
const auto = uid(), id = props.id || auto, listId = id + "-list";
|
|
4068
4627
|
const st = useMaybeControlled(
|
|
@@ -4072,7 +4631,7 @@ window.Aura = (() => {
|
|
|
4072
4631
|
);
|
|
4073
4632
|
const value = st[0];
|
|
4074
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;
|
|
4075
|
-
const slots =
|
|
4634
|
+
const slots = React41.useMemo(
|
|
4076
4635
|
function() {
|
|
4077
4636
|
const out = [];
|
|
4078
4637
|
for (let m = lo; m <= hi; m += step) out.push(fromMin(m));
|
|
@@ -4084,12 +4643,12 @@ window.Aura = (() => {
|
|
|
4084
4643
|
const n2 = toMin(v);
|
|
4085
4644
|
return n2 == null || n2 < lo || n2 > hi || props.isTimeDisabled && props.isTimeDisabled(v);
|
|
4086
4645
|
}
|
|
4087
|
-
const openState =
|
|
4088
|
-
const editState =
|
|
4089
|
-
const aState =
|
|
4090
|
-
const errState =
|
|
4091
|
-
const pos =
|
|
4092
|
-
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);
|
|
4093
4652
|
const mounted = useMounted();
|
|
4094
4653
|
function nearest(v) {
|
|
4095
4654
|
const n2 = toMin(v);
|
|
@@ -4117,7 +4676,7 @@ window.Aura = (() => {
|
|
|
4117
4676
|
},
|
|
4118
4677
|
[open]
|
|
4119
4678
|
);
|
|
4120
|
-
|
|
4679
|
+
React41.useEffect(
|
|
4121
4680
|
function() {
|
|
4122
4681
|
if (!open) return;
|
|
4123
4682
|
function outside(e) {
|
|
@@ -4139,7 +4698,7 @@ window.Aura = (() => {
|
|
|
4139
4698
|
},
|
|
4140
4699
|
[open]
|
|
4141
4700
|
);
|
|
4142
|
-
|
|
4701
|
+
React41.useEffect(
|
|
4143
4702
|
function() {
|
|
4144
4703
|
if (!open || !listRef.current) return;
|
|
4145
4704
|
const el = listRef.current.querySelector('[data-idx="' + active + '"]');
|
|
@@ -4147,7 +4706,7 @@ window.Aura = (() => {
|
|
|
4147
4706
|
},
|
|
4148
4707
|
[active, open]
|
|
4149
4708
|
);
|
|
4150
|
-
function
|
|
4709
|
+
function show2() {
|
|
4151
4710
|
if (open || props.disabled || props.readOnly) return;
|
|
4152
4711
|
setActive(nearest(value || props.suggest || fromMin(lo)));
|
|
4153
4712
|
setOpen(true);
|
|
@@ -4197,11 +4756,11 @@ window.Aura = (() => {
|
|
|
4197
4756
|
const k = e.key;
|
|
4198
4757
|
if (k === "ArrowDown") {
|
|
4199
4758
|
e.preventDefault();
|
|
4200
|
-
if (!open)
|
|
4759
|
+
if (!open) show2();
|
|
4201
4760
|
else move(1);
|
|
4202
4761
|
} else if (k === "ArrowUp") {
|
|
4203
4762
|
e.preventDefault();
|
|
4204
|
-
if (!open)
|
|
4763
|
+
if (!open) show2();
|
|
4205
4764
|
else move(-1);
|
|
4206
4765
|
} else if (k === "Home" && open) {
|
|
4207
4766
|
e.preventDefault();
|
|
@@ -4236,10 +4795,10 @@ window.Aura = (() => {
|
|
|
4236
4795
|
}
|
|
4237
4796
|
}
|
|
4238
4797
|
const error = errState[0] || props.error;
|
|
4239
|
-
const list = open && mounted && pos[0] ? (0,
|
|
4240
|
-
/* @__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) {
|
|
4241
4800
|
const dis = blocked(s), sel = s === value;
|
|
4242
|
-
return /* @__PURE__ */
|
|
4801
|
+
return /* @__PURE__ */ React41.createElement(
|
|
4243
4802
|
"li",
|
|
4244
4803
|
{
|
|
4245
4804
|
key: s,
|
|
@@ -4264,13 +4823,13 @@ window.Aura = (() => {
|
|
|
4264
4823
|
if (active !== i) setActive(i);
|
|
4265
4824
|
}
|
|
4266
4825
|
},
|
|
4267
|
-
/* @__PURE__ */
|
|
4268
|
-
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
|
|
4269
4828
|
);
|
|
4270
4829
|
}))),
|
|
4271
4830
|
document.body
|
|
4272
4831
|
) : null;
|
|
4273
|
-
return /* @__PURE__ */
|
|
4832
|
+
return /* @__PURE__ */ React41.createElement(
|
|
4274
4833
|
Field,
|
|
4275
4834
|
{
|
|
4276
4835
|
id,
|
|
@@ -4282,7 +4841,7 @@ window.Aura = (() => {
|
|
|
4282
4841
|
disabled: props.disabled,
|
|
4283
4842
|
className: props.className
|
|
4284
4843
|
},
|
|
4285
|
-
/* @__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(
|
|
4286
4845
|
"input",
|
|
4287
4846
|
{
|
|
4288
4847
|
ref: inputMerged,
|
|
@@ -4308,11 +4867,11 @@ window.Aura = (() => {
|
|
|
4308
4867
|
setEditing(e.target.value);
|
|
4309
4868
|
const v = parseTime(e.target.value);
|
|
4310
4869
|
if (v) {
|
|
4311
|
-
if (!open)
|
|
4870
|
+
if (!open) show2();
|
|
4312
4871
|
setActive(nearest(v));
|
|
4313
4872
|
}
|
|
4314
4873
|
},
|
|
4315
|
-
onClick:
|
|
4874
|
+
onClick: show2,
|
|
4316
4875
|
onKeyDown,
|
|
4317
4876
|
onBlur: function() {
|
|
4318
4877
|
setTimeout(function() {
|
|
@@ -4322,7 +4881,7 @@ window.Aura = (() => {
|
|
|
4322
4881
|
}, 0);
|
|
4323
4882
|
}
|
|
4324
4883
|
}
|
|
4325
|
-
), props.clearable !== false && value != null && !props.disabled ? /* @__PURE__ */
|
|
4884
|
+
), props.clearable !== false && value != null && !props.disabled ? /* @__PURE__ */ React41.createElement(
|
|
4326
4885
|
"button",
|
|
4327
4886
|
{
|
|
4328
4887
|
type: "button",
|
|
@@ -4335,8 +4894,8 @@ window.Aura = (() => {
|
|
|
4335
4894
|
if (inputRef.current) inputRef.current.focus();
|
|
4336
4895
|
}
|
|
4337
4896
|
},
|
|
4338
|
-
/* @__PURE__ */
|
|
4339
|
-
) : null, /* @__PURE__ */
|
|
4897
|
+
/* @__PURE__ */ React41.createElement(Icon, { name: "x" })
|
|
4898
|
+
) : null, /* @__PURE__ */ React41.createElement(
|
|
4340
4899
|
"button",
|
|
4341
4900
|
{
|
|
4342
4901
|
type: "button",
|
|
@@ -4349,19 +4908,19 @@ window.Aura = (() => {
|
|
|
4349
4908
|
onClick: function() {
|
|
4350
4909
|
if (open) setOpen(false);
|
|
4351
4910
|
else {
|
|
4352
|
-
|
|
4911
|
+
show2();
|
|
4353
4912
|
inputRef.current && inputRef.current.focus();
|
|
4354
4913
|
}
|
|
4355
4914
|
}
|
|
4356
4915
|
},
|
|
4357
|
-
/* @__PURE__ */
|
|
4916
|
+
/* @__PURE__ */ React41.createElement(Icon, { name: "chevron-down" })
|
|
4358
4917
|
)),
|
|
4359
4918
|
list
|
|
4360
4919
|
);
|
|
4361
4920
|
});
|
|
4362
4921
|
|
|
4363
4922
|
// src/FileUpload.tsx
|
|
4364
|
-
var
|
|
4923
|
+
var React42 = __toESM(require_react(), 1);
|
|
4365
4924
|
function formatBytes(n2) {
|
|
4366
4925
|
if (n2 == null) return "";
|
|
4367
4926
|
if (n2 < 1024) return n2 + " B";
|
|
@@ -4395,17 +4954,17 @@ window.Aura = (() => {
|
|
|
4395
4954
|
}).join(", ");
|
|
4396
4955
|
}
|
|
4397
4956
|
var seq = 0;
|
|
4398
|
-
var FileUpload =
|
|
4957
|
+
var FileUpload = React42.forwardRef(function FileUpload2(props, ref) {
|
|
4399
4958
|
const t = useStrings();
|
|
4400
4959
|
const auto = uid(), id = props.id || auto;
|
|
4401
4960
|
const st = useMaybeControlled(props.value, props.defaultValue || [], props.onChange);
|
|
4402
|
-
const
|
|
4403
|
-
const dragState =
|
|
4404
|
-
const inputRef =
|
|
4405
|
-
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({});
|
|
4406
4965
|
const maxFiles = props.multiple ? props.maxFiles : 1;
|
|
4407
4966
|
const note = t.accepts(describeAccept(props.accept, t), props.maxSize ? formatBytes(props.maxSize) : "");
|
|
4408
|
-
|
|
4967
|
+
React42.useEffect(function() {
|
|
4409
4968
|
return function() {
|
|
4410
4969
|
Object.keys(urls.current).forEach(function(k) {
|
|
4411
4970
|
URL.revokeObjectURL(urls.current[k]);
|
|
@@ -4420,7 +4979,7 @@ window.Aura = (() => {
|
|
|
4420
4979
|
function add(list) {
|
|
4421
4980
|
const files = Array.prototype.slice.call(list || []);
|
|
4422
4981
|
if (!files.length || props.disabled) return;
|
|
4423
|
-
const keep = props.multiple ?
|
|
4982
|
+
const keep = props.multiple ? items2.slice() : [];
|
|
4424
4983
|
let room = maxFiles ? maxFiles - keep.filter(function(i) {
|
|
4425
4984
|
return !i.error;
|
|
4426
4985
|
}).length : Infinity;
|
|
@@ -4448,7 +5007,7 @@ window.Aura = (() => {
|
|
|
4448
5007
|
delete urls.current[it.id];
|
|
4449
5008
|
}
|
|
4450
5009
|
st[1](
|
|
4451
|
-
|
|
5010
|
+
items2.filter(function(x) {
|
|
4452
5011
|
return x.id !== it.id;
|
|
4453
5012
|
})
|
|
4454
5013
|
);
|
|
@@ -4456,7 +5015,7 @@ window.Aura = (() => {
|
|
|
4456
5015
|
if (inputRef.current) inputRef.current.focus();
|
|
4457
5016
|
}
|
|
4458
5017
|
const error = props.error;
|
|
4459
|
-
return /* @__PURE__ */
|
|
5018
|
+
return /* @__PURE__ */ React42.createElement(
|
|
4460
5019
|
Field,
|
|
4461
5020
|
{
|
|
4462
5021
|
id,
|
|
@@ -4468,7 +5027,7 @@ window.Aura = (() => {
|
|
|
4468
5027
|
disabled: props.disabled,
|
|
4469
5028
|
className: props.className
|
|
4470
5029
|
},
|
|
4471
|
-
/* @__PURE__ */
|
|
5030
|
+
/* @__PURE__ */ React42.createElement(
|
|
4472
5031
|
"div",
|
|
4473
5032
|
{
|
|
4474
5033
|
className: cx("aura-upload", over && "is-over", props.disabled && "is-disabled", error && "is-invalid"),
|
|
@@ -4489,9 +5048,9 @@ window.Aura = (() => {
|
|
|
4489
5048
|
add(e.dataTransfer && e.dataTransfer.files);
|
|
4490
5049
|
}
|
|
4491
5050
|
},
|
|
4492
|
-
/* @__PURE__ */
|
|
4493
|
-
/* @__PURE__ */
|
|
4494
|
-
/* @__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(
|
|
4495
5054
|
"input",
|
|
4496
5055
|
{
|
|
4497
5056
|
ref: inputMerged,
|
|
@@ -4502,7 +5061,7 @@ window.Aura = (() => {
|
|
|
4502
5061
|
multiple: !!props.multiple,
|
|
4503
5062
|
disabled: props.disabled,
|
|
4504
5063
|
name: props.name,
|
|
4505
|
-
required: props.required && !
|
|
5064
|
+
required: props.required && !items2.some(function(i) {
|
|
4506
5065
|
return !i.error;
|
|
4507
5066
|
}),
|
|
4508
5067
|
"aria-invalid": error ? true : void 0,
|
|
@@ -4513,12 +5072,12 @@ window.Aura = (() => {
|
|
|
4513
5072
|
}
|
|
4514
5073
|
}
|
|
4515
5074
|
),
|
|
4516
|
-
/* @__PURE__ */
|
|
4517
|
-
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
|
|
4518
5077
|
),
|
|
4519
|
-
|
|
5078
|
+
items2.length ? /* @__PURE__ */ React42.createElement("ul", { className: "aura-upload__list", "aria-live": "polite" }, items2.map(function(it) {
|
|
4520
5079
|
const src = thumb(it);
|
|
4521
|
-
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(
|
|
4522
5081
|
"span",
|
|
4523
5082
|
{
|
|
4524
5083
|
className: "aura-upload__bar",
|
|
@@ -4528,8 +5087,8 @@ window.Aura = (() => {
|
|
|
4528
5087
|
"aria-valuemax": 100,
|
|
4529
5088
|
"aria-valuenow": it.progress != null ? Math.round(it.progress) : void 0
|
|
4530
5089
|
},
|
|
4531
|
-
/* @__PURE__ */
|
|
4532
|
-
) : null), /* @__PURE__ */
|
|
5090
|
+
/* @__PURE__ */ React42.createElement("span", { style: { width: (it.progress || 0) + "%" } })
|
|
5091
|
+
) : null), /* @__PURE__ */ React42.createElement(
|
|
4533
5092
|
IconButton,
|
|
4534
5093
|
{
|
|
4535
5094
|
icon: "x",
|
|
@@ -4815,9 +5374,9 @@ window.Aura = (() => {
|
|
|
4815
5374
|
}
|
|
4816
5375
|
|
|
4817
5376
|
// src/ThemeStyle.tsx
|
|
4818
|
-
var
|
|
5377
|
+
var React43 = __toESM(require_react(), 1);
|
|
4819
5378
|
function ThemeStyle(props) {
|
|
4820
|
-
const css =
|
|
5379
|
+
const css = React43.useMemo(
|
|
4821
5380
|
function() {
|
|
4822
5381
|
return createTheme({ brand: props.brand, signal: props.signal, primary: props.primary, name: props.name }).css(
|
|
4823
5382
|
props.selector
|
|
@@ -4825,11 +5384,11 @@ window.Aura = (() => {
|
|
|
4825
5384
|
},
|
|
4826
5385
|
[props.brand, props.signal, props.primary, props.name, props.selector]
|
|
4827
5386
|
);
|
|
4828
|
-
return /* @__PURE__ */
|
|
5387
|
+
return /* @__PURE__ */ React43.createElement("style", { "data-aura-theme": props.name || props.brand, dangerouslySetInnerHTML: { __html: css } });
|
|
4829
5388
|
}
|
|
4830
5389
|
|
|
4831
5390
|
// src/colorScheme.tsx
|
|
4832
|
-
var
|
|
5391
|
+
var React44 = __toESM(require_react(), 1);
|
|
4833
5392
|
var DEFAULT_KEY = "aura-color-scheme";
|
|
4834
5393
|
var SCHEMES = ["light", "dark", "system"];
|
|
4835
5394
|
var EVENT = "aura-color-scheme";
|
|
@@ -4842,7 +5401,7 @@ window.Aura = (() => {
|
|
|
4842
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){}})();`;
|
|
4843
5402
|
}
|
|
4844
5403
|
function ColorSchemeScript(props) {
|
|
4845
|
-
return /* @__PURE__ */
|
|
5404
|
+
return /* @__PURE__ */ React44.createElement(
|
|
4846
5405
|
"script",
|
|
4847
5406
|
{
|
|
4848
5407
|
"data-aura-color-scheme": "",
|
|
@@ -4867,7 +5426,7 @@ window.Aura = (() => {
|
|
|
4867
5426
|
function useColorScheme(options) {
|
|
4868
5427
|
const key = options && options.storageKey || DEFAULT_KEY;
|
|
4869
5428
|
const fallback = options && options.defaultScheme || "system";
|
|
4870
|
-
const subscribe2 =
|
|
5429
|
+
const subscribe2 = React44.useCallback(
|
|
4871
5430
|
function(cb) {
|
|
4872
5431
|
const mq = window.matchMedia ? window.matchMedia("(prefers-color-scheme: dark)") : null;
|
|
4873
5432
|
function onSystem() {
|
|
@@ -4885,7 +5444,7 @@ window.Aura = (() => {
|
|
|
4885
5444
|
},
|
|
4886
5445
|
[fallback]
|
|
4887
5446
|
);
|
|
4888
|
-
const snapshot =
|
|
5447
|
+
const snapshot = React44.useSyncExternalStore(
|
|
4889
5448
|
subscribe2,
|
|
4890
5449
|
function() {
|
|
4891
5450
|
const s = readScheme(fallback);
|
|
@@ -4896,7 +5455,7 @@ window.Aura = (() => {
|
|
|
4896
5455
|
}
|
|
4897
5456
|
);
|
|
4898
5457
|
const parts = snapshot.split("|");
|
|
4899
|
-
const setScheme =
|
|
5458
|
+
const setScheme = React44.useCallback(
|
|
4900
5459
|
function(next) {
|
|
4901
5460
|
if (!valid(next)) return;
|
|
4902
5461
|
try {
|
|
@@ -4915,11 +5474,11 @@ window.Aura = (() => {
|
|
|
4915
5474
|
const cs = useColorScheme(props);
|
|
4916
5475
|
const names = { light: t.schemeLight, dark: t.schemeDark, system: t.schemeSystem };
|
|
4917
5476
|
const label = props.label || t.colorScheme;
|
|
4918
|
-
return /* @__PURE__ */
|
|
5477
|
+
return /* @__PURE__ */ React44.createElement(
|
|
4919
5478
|
DropdownMenu,
|
|
4920
5479
|
{
|
|
4921
5480
|
label,
|
|
4922
|
-
trigger: /* @__PURE__ */
|
|
5481
|
+
trigger: /* @__PURE__ */ React44.createElement(IconButton, { icon: cs.resolved === "dark" ? "moon" : "sun", label: label + ": " + names[cs.scheme] }),
|
|
4923
5482
|
items: SCHEMES.map(function(s) {
|
|
4924
5483
|
return {
|
|
4925
5484
|
label: names[s],
|
|
@@ -4934,10 +5493,10 @@ window.Aura = (() => {
|
|
|
4934
5493
|
}
|
|
4935
5494
|
|
|
4936
5495
|
// src/Badge.tsx
|
|
4937
|
-
var
|
|
4938
|
-
var Badge =
|
|
5496
|
+
var React45 = __toESM(require_react(), 1);
|
|
5497
|
+
var Badge = React45.forwardRef(function Badge2(props, ref) {
|
|
4939
5498
|
const rest = omit(props, ["tone", "variant", "icon", "className", "children"]);
|
|
4940
|
-
return /* @__PURE__ */
|
|
5499
|
+
return /* @__PURE__ */ React45.createElement(
|
|
4941
5500
|
"span",
|
|
4942
5501
|
{
|
|
4943
5502
|
...rest,
|
|
@@ -4950,56 +5509,19 @@ window.Aura = (() => {
|
|
|
4950
5509
|
props.className
|
|
4951
5510
|
)
|
|
4952
5511
|
},
|
|
4953
|
-
props.icon ? /* @__PURE__ */
|
|
5512
|
+
props.icon ? /* @__PURE__ */ React45.createElement(Icon, { name: props.icon, size: 12 }) : null,
|
|
4954
5513
|
props.children
|
|
4955
5514
|
);
|
|
4956
5515
|
});
|
|
4957
5516
|
|
|
4958
|
-
// src/Tag.tsx
|
|
4959
|
-
var React41 = __toESM(require_react(), 1);
|
|
4960
|
-
var Tag = React41.forwardRef(function Tag2(props, ref) {
|
|
4961
|
-
const t = useStrings();
|
|
4962
|
-
const selectable = props.onClick != null || props.selected != null;
|
|
4963
|
-
const rest = omit(props, ["onRemove", "selected", "icon", "className", "children", "disabled", "removeLabel"]);
|
|
4964
|
-
const inner = [
|
|
4965
|
-
props.icon ? /* @__PURE__ */ React41.createElement(Icon, { key: "i", name: props.icon, size: 14 }) : null,
|
|
4966
|
-
/* @__PURE__ */ React41.createElement("span", { key: "t", className: "aura-tag__text" }, props.children)
|
|
4967
|
-
];
|
|
4968
|
-
if (selectable) {
|
|
4969
|
-
return /* @__PURE__ */ React41.createElement(
|
|
4970
|
-
"button",
|
|
4971
|
-
{
|
|
4972
|
-
...rest,
|
|
4973
|
-
ref,
|
|
4974
|
-
type: "button",
|
|
4975
|
-
"aria-pressed": !!props.selected,
|
|
4976
|
-
disabled: props.disabled,
|
|
4977
|
-
className: cx("aura-tag is-selectable", props.selected && "is-selected", props.className)
|
|
4978
|
-
},
|
|
4979
|
-
props.selected ? /* @__PURE__ */ React41.createElement(Icon, { name: "check", size: 14 }) : inner[0],
|
|
4980
|
-
inner[1]
|
|
4981
|
-
);
|
|
4982
|
-
}
|
|
4983
|
-
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(
|
|
4984
|
-
"button",
|
|
4985
|
-
{
|
|
4986
|
-
type: "button",
|
|
4987
|
-
className: "aura-tag__remove",
|
|
4988
|
-
"aria-label": props.removeLabel || t.remove(typeof props.children === "string" ? props.children : ""),
|
|
4989
|
-
onClick: props.onRemove
|
|
4990
|
-
},
|
|
4991
|
-
/* @__PURE__ */ React41.createElement(Icon, { name: "x", size: 12 })
|
|
4992
|
-
) : null);
|
|
4993
|
-
});
|
|
4994
|
-
|
|
4995
5517
|
// src/Progress.tsx
|
|
4996
|
-
var
|
|
4997
|
-
var Progress =
|
|
5518
|
+
var React46 = __toESM(require_react(), 1);
|
|
5519
|
+
var Progress = React46.forwardRef(function Progress2(props, ref) {
|
|
4998
5520
|
const auto = uid(), id = props.id || auto;
|
|
4999
5521
|
const max = props.max || 100, det = props.value != null;
|
|
5000
5522
|
const pct = det ? Math.max(0, Math.min(100, props.value / max * 100)) : 0;
|
|
5001
5523
|
const shown = props.valueLabel != null ? props.valueLabel : det ? Math.round(pct) + "%" : null;
|
|
5002
|
-
return /* @__PURE__ */
|
|
5524
|
+
return /* @__PURE__ */ React46.createElement(
|
|
5003
5525
|
"div",
|
|
5004
5526
|
{
|
|
5005
5527
|
ref,
|
|
@@ -5010,8 +5532,8 @@ window.Aura = (() => {
|
|
|
5010
5532
|
props.className
|
|
5011
5533
|
)
|
|
5012
5534
|
},
|
|
5013
|
-
props.label || props.showValue && shown ? /* @__PURE__ */
|
|
5014
|
-
/* @__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(
|
|
5015
5537
|
"div",
|
|
5016
5538
|
{
|
|
5017
5539
|
className: cx("aura-progress__track", !det && "is-indeterminate"),
|
|
@@ -5023,21 +5545,21 @@ window.Aura = (() => {
|
|
|
5023
5545
|
"aria-valuenow": det ? props.value : void 0,
|
|
5024
5546
|
"aria-valuetext": det && props.valueLabel != null ? String(props.valueLabel) : void 0
|
|
5025
5547
|
},
|
|
5026
|
-
/* @__PURE__ */
|
|
5548
|
+
/* @__PURE__ */ React46.createElement("span", { className: "aura-progress__bar", style: det ? { width: pct + "%" } : void 0 })
|
|
5027
5549
|
),
|
|
5028
|
-
props.hint ? /* @__PURE__ */
|
|
5550
|
+
props.hint ? /* @__PURE__ */ React46.createElement("p", { className: "aura-progress__hint" }, props.hint) : null
|
|
5029
5551
|
);
|
|
5030
5552
|
});
|
|
5031
5553
|
|
|
5032
5554
|
// src/Skeleton.tsx
|
|
5033
|
-
var
|
|
5034
|
-
var Skeleton =
|
|
5555
|
+
var React47 = __toESM(require_react(), 1);
|
|
5556
|
+
var Skeleton = React47.forwardRef(function Skeleton2(props, ref) {
|
|
5035
5557
|
const v = props.variant || "text";
|
|
5036
5558
|
if (v === "text" && (props.lines || 1) > 1) {
|
|
5037
5559
|
const n2 = props.lines, rows = [];
|
|
5038
5560
|
for (let i = 0; i < n2; i++)
|
|
5039
|
-
rows.push(/* @__PURE__ */
|
|
5040
|
-
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(
|
|
5041
5563
|
"span",
|
|
5042
5564
|
{
|
|
5043
5565
|
ref,
|
|
@@ -5052,28 +5574,28 @@ window.Aura = (() => {
|
|
|
5052
5574
|
if (v === "circle") {
|
|
5053
5575
|
style.width = style.height = props.size || props.width || 40;
|
|
5054
5576
|
}
|
|
5055
|
-
return /* @__PURE__ */
|
|
5577
|
+
return /* @__PURE__ */ React47.createElement("span", { ref, "aria-hidden": true, className: cx("aura-skel", "aura-skel--" + v, props.className), style });
|
|
5056
5578
|
});
|
|
5057
5579
|
|
|
5058
5580
|
// src/EmptyState.tsx
|
|
5059
|
-
var
|
|
5060
|
-
var EmptyState =
|
|
5581
|
+
var React48 = __toESM(require_react(), 1);
|
|
5582
|
+
var EmptyState = React48.forwardRef(function EmptyState2(props, ref) {
|
|
5061
5583
|
const HT = "h" + (props.headingLevel || 3);
|
|
5062
|
-
return /* @__PURE__ */
|
|
5584
|
+
return /* @__PURE__ */ React48.createElement(
|
|
5063
5585
|
"div",
|
|
5064
5586
|
{
|
|
5065
5587
|
ref,
|
|
5066
5588
|
className: cx("aura-empty", props.size === "sm" && "is-sm", props.bordered && "is-bordered", props.className)
|
|
5067
5589
|
},
|
|
5068
|
-
/* @__PURE__ */
|
|
5069
|
-
/* @__PURE__ */
|
|
5070
|
-
props.description ? /* @__PURE__ */
|
|
5071
|
-
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
|
|
5072
5594
|
);
|
|
5073
5595
|
});
|
|
5074
5596
|
|
|
5075
5597
|
// src/Pagination.tsx
|
|
5076
|
-
var
|
|
5598
|
+
var React49 = __toESM(require_react(), 1);
|
|
5077
5599
|
function pageList(page, count, sib) {
|
|
5078
5600
|
let out = [], lo = Math.max(2, page - sib), hi = Math.min(count - 1, page + sib);
|
|
5079
5601
|
if (page - sib <= 3) {
|
|
@@ -5093,7 +5615,7 @@ window.Aura = (() => {
|
|
|
5093
5615
|
if (count > 1) out.push(count);
|
|
5094
5616
|
return out;
|
|
5095
5617
|
}
|
|
5096
|
-
var Pagination =
|
|
5618
|
+
var Pagination = React49.forwardRef(function Pagination2(props, ref) {
|
|
5097
5619
|
const t = useStrings();
|
|
5098
5620
|
const count = Math.max(1, props.pageCount || 1);
|
|
5099
5621
|
const st = useMaybeControlled(props.page, props.defaultPage || 1, props.onChange);
|
|
@@ -5112,7 +5634,7 @@ window.Aura = (() => {
|
|
|
5112
5634
|
},
|
|
5113
5635
|
extra
|
|
5114
5636
|
);
|
|
5115
|
-
return link ? /* @__PURE__ */
|
|
5637
|
+
return link ? /* @__PURE__ */ React49.createElement(
|
|
5116
5638
|
Link,
|
|
5117
5639
|
{
|
|
5118
5640
|
href: link(p),
|
|
@@ -5125,7 +5647,7 @@ window.Aura = (() => {
|
|
|
5125
5647
|
...common
|
|
5126
5648
|
},
|
|
5127
5649
|
label
|
|
5128
|
-
) : /* @__PURE__ */
|
|
5650
|
+
) : /* @__PURE__ */ React49.createElement(
|
|
5129
5651
|
"button",
|
|
5130
5652
|
{
|
|
5131
5653
|
type: "button",
|
|
@@ -5137,7 +5659,7 @@ window.Aura = (() => {
|
|
|
5137
5659
|
label
|
|
5138
5660
|
);
|
|
5139
5661
|
}
|
|
5140
|
-
return /* @__PURE__ */
|
|
5662
|
+
return /* @__PURE__ */ React49.createElement("nav", { ref, className: cx("aura-pagination", props.className), "aria-label": props.label || t.pagination }, /* @__PURE__ */ React49.createElement(
|
|
5141
5663
|
IconButton,
|
|
5142
5664
|
{
|
|
5143
5665
|
icon: "chevron-left",
|
|
@@ -5147,9 +5669,9 @@ window.Aura = (() => {
|
|
|
5147
5669
|
go(page - 1);
|
|
5148
5670
|
}
|
|
5149
5671
|
}
|
|
5150
|
-
), /* @__PURE__ */
|
|
5151
|
-
return typeof p === "number" ? /* @__PURE__ */
|
|
5152
|
-
})), /* @__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(
|
|
5153
5675
|
IconButton,
|
|
5154
5676
|
{
|
|
5155
5677
|
icon: "chevron-right",
|
|
@@ -5163,8 +5685,8 @@ window.Aura = (() => {
|
|
|
5163
5685
|
});
|
|
5164
5686
|
|
|
5165
5687
|
// src/Accordion.tsx
|
|
5166
|
-
var
|
|
5167
|
-
var Accordion =
|
|
5688
|
+
var React50 = __toESM(require_react(), 1);
|
|
5689
|
+
var Accordion = React50.forwardRef(function Accordion2(props, ref) {
|
|
5168
5690
|
const auto = uid(), base = props.id || auto;
|
|
5169
5691
|
const multiple = props.type === "multiple";
|
|
5170
5692
|
const st = useMaybeControlled(
|
|
@@ -5174,7 +5696,7 @@ window.Aura = (() => {
|
|
|
5174
5696
|
);
|
|
5175
5697
|
const open = multiple ? st[0] || [] : st[0] ? [st[0]] : [];
|
|
5176
5698
|
const HT = "h" + (props.headingLevel || 3);
|
|
5177
|
-
const
|
|
5699
|
+
const items2 = props.items || [];
|
|
5178
5700
|
function toggle(id) {
|
|
5179
5701
|
const isOpen = open.indexOf(id) >= 0;
|
|
5180
5702
|
if (multiple)
|
|
@@ -5202,9 +5724,9 @@ window.Aura = (() => {
|
|
|
5202
5724
|
n2.focus();
|
|
5203
5725
|
}
|
|
5204
5726
|
}
|
|
5205
|
-
return /* @__PURE__ */
|
|
5727
|
+
return /* @__PURE__ */ React50.createElement("div", { ref, className: cx("aura-accordion", props.className), onKeyDown: onKey }, items2.map(function(it) {
|
|
5206
5728
|
const on = open.indexOf(it.id) >= 0, bid = base + "-btn-" + it.id, pid = base + "-panel-" + it.id;
|
|
5207
|
-
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(
|
|
5208
5730
|
"button",
|
|
5209
5731
|
{
|
|
5210
5732
|
type: "button",
|
|
@@ -5216,16 +5738,16 @@ window.Aura = (() => {
|
|
|
5216
5738
|
toggle(it.id);
|
|
5217
5739
|
}
|
|
5218
5740
|
},
|
|
5219
|
-
it.icon ? /* @__PURE__ */
|
|
5220
|
-
/* @__PURE__ */
|
|
5221
|
-
/* @__PURE__ */
|
|
5222
|
-
)), /* @__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));
|
|
5223
5745
|
}));
|
|
5224
5746
|
});
|
|
5225
5747
|
|
|
5226
5748
|
// src/Popover.tsx
|
|
5227
|
-
var
|
|
5228
|
-
var
|
|
5749
|
+
var React51 = __toESM(require_react(), 1);
|
|
5750
|
+
var import_react_dom9 = __toESM(require_react_dom(), 1);
|
|
5229
5751
|
function position(anchor, pop, placement) {
|
|
5230
5752
|
const r = anchor.getBoundingClientRect(), pw = pop.offsetWidth, ph = pop.offsetHeight, vw = window.innerWidth, vh = window.innerHeight, gap = 6;
|
|
5231
5753
|
let side = (placement || "bottom-start").split("-")[0], align = (placement || "bottom-start").split("-")[1] || "start";
|
|
@@ -5235,13 +5757,13 @@ window.Aura = (() => {
|
|
|
5235
5757
|
const left = align === "end" ? r.right - pw : align === "center" ? r.left + r.width / 2 - pw / 2 : r.left;
|
|
5236
5758
|
return { top: Math.max(8, top), left: Math.max(8, Math.min(left, vw - pw - 8)), side };
|
|
5237
5759
|
}
|
|
5238
|
-
var Popover =
|
|
5760
|
+
var Popover = React51.forwardRef(function Popover2(props, ref) {
|
|
5239
5761
|
const t = useStrings();
|
|
5240
5762
|
const auto = uid(), id = props.id || auto;
|
|
5241
5763
|
const st = useMaybeControlled(props.open, !!props.defaultOpen, props.onOpenChange);
|
|
5242
5764
|
const open = !!st[0];
|
|
5243
|
-
const wrap =
|
|
5244
|
-
const pos =
|
|
5765
|
+
const wrap = React51.useRef(null), pop = React51.useRef(null), popMerged = useMergedRef(ref, pop);
|
|
5766
|
+
const pos = React51.useState(null), mounted = useMounted();
|
|
5245
5767
|
function trigger() {
|
|
5246
5768
|
return wrap.current && (wrap.current.querySelector('button, [role="button"], a, input') || wrap.current.firstElementChild);
|
|
5247
5769
|
}
|
|
@@ -5268,7 +5790,7 @@ window.Aura = (() => {
|
|
|
5268
5790
|
},
|
|
5269
5791
|
[open, mounted, props.placement]
|
|
5270
5792
|
);
|
|
5271
|
-
|
|
5793
|
+
React51.useEffect(
|
|
5272
5794
|
function() {
|
|
5273
5795
|
if (!open || !mounted) return;
|
|
5274
5796
|
if (props.autoFocus !== false && pop.current) {
|
|
@@ -5287,9 +5809,9 @@ window.Aura = (() => {
|
|
|
5287
5809
|
},
|
|
5288
5810
|
[open, mounted]
|
|
5289
5811
|
);
|
|
5290
|
-
const child =
|
|
5291
|
-
const panel = open && mounted ? (0,
|
|
5292
|
-
/* @__PURE__ */
|
|
5812
|
+
const child = React51.Children.only(props.trigger);
|
|
5813
|
+
const panel = open && mounted ? (0, import_react_dom9.createPortal)(
|
|
5814
|
+
/* @__PURE__ */ React51.createElement(
|
|
5293
5815
|
"div",
|
|
5294
5816
|
{
|
|
5295
5817
|
ref: popMerged,
|
|
@@ -5311,7 +5833,7 @@ window.Aura = (() => {
|
|
|
5311
5833
|
} else trapTab(e, pop.current);
|
|
5312
5834
|
}
|
|
5313
5835
|
},
|
|
5314
|
-
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(
|
|
5315
5837
|
IconButton,
|
|
5316
5838
|
{
|
|
5317
5839
|
icon: "x",
|
|
@@ -5321,7 +5843,7 @@ window.Aura = (() => {
|
|
|
5321
5843
|
}
|
|
5322
5844
|
}
|
|
5323
5845
|
)) : null,
|
|
5324
|
-
/* @__PURE__ */
|
|
5846
|
+
/* @__PURE__ */ React51.createElement("div", { className: "aura-popover__body" }, typeof props.children === "function" ? props.children({
|
|
5325
5847
|
close: function() {
|
|
5326
5848
|
close(true);
|
|
5327
5849
|
}
|
|
@@ -5329,7 +5851,7 @@ window.Aura = (() => {
|
|
|
5329
5851
|
),
|
|
5330
5852
|
document.body
|
|
5331
5853
|
) : null;
|
|
5332
|
-
return /* @__PURE__ */
|
|
5854
|
+
return /* @__PURE__ */ React51.createElement("span", { ref: wrap, className: "aura-popover-anchor" }, React51.cloneElement(child, {
|
|
5333
5855
|
onClick: function(e) {
|
|
5334
5856
|
if (child.props.onClick) child.props.onClick(e);
|
|
5335
5857
|
st[1](!open);
|
|
@@ -5341,7 +5863,7 @@ window.Aura = (() => {
|
|
|
5341
5863
|
});
|
|
5342
5864
|
|
|
5343
5865
|
// src/NumberField.tsx
|
|
5344
|
-
var
|
|
5866
|
+
var React52 = __toESM(require_react(), 1);
|
|
5345
5867
|
function decimalsOf(n2) {
|
|
5346
5868
|
const s = String(n2);
|
|
5347
5869
|
const i = s.indexOf(".");
|
|
@@ -5352,7 +5874,7 @@ window.Aura = (() => {
|
|
|
5352
5874
|
if (!/^-?(\d+\.?\d*|\.\d+)$/.test(s)) return NaN;
|
|
5353
5875
|
return Number(s);
|
|
5354
5876
|
}
|
|
5355
|
-
var NumberField =
|
|
5877
|
+
var NumberField = React52.forwardRef(function NumberField2(props, ref) {
|
|
5356
5878
|
const t = useStrings();
|
|
5357
5879
|
const auto = uid(), id = props.id || auto;
|
|
5358
5880
|
const step = props.step || 1;
|
|
@@ -5363,7 +5885,7 @@ window.Aura = (() => {
|
|
|
5363
5885
|
props.onChange
|
|
5364
5886
|
);
|
|
5365
5887
|
const value = st[0], setValue = st[1];
|
|
5366
|
-
const draftState =
|
|
5888
|
+
const draftState = React52.useState(null), draft = draftState[0], setDraft = draftState[1];
|
|
5367
5889
|
function fmt2(n2) {
|
|
5368
5890
|
if (n2 == null || isNaN(n2)) return "";
|
|
5369
5891
|
return n2.toLocaleString("en", { minimumFractionDigits: decimals, maximumFractionDigits: decimals });
|
|
@@ -5412,7 +5934,7 @@ window.Aura = (() => {
|
|
|
5412
5934
|
};
|
|
5413
5935
|
const valueText = value == null ? void 0 : [affixText(props.prefix), fmt2(value), affixText(props.suffix)].join(" ").trim();
|
|
5414
5936
|
const stepper = props.stepper !== false && !props.readOnly;
|
|
5415
|
-
return /* @__PURE__ */
|
|
5937
|
+
return /* @__PURE__ */ React52.createElement(
|
|
5416
5938
|
Field,
|
|
5417
5939
|
{
|
|
5418
5940
|
id,
|
|
@@ -5424,7 +5946,7 @@ window.Aura = (() => {
|
|
|
5424
5946
|
disabled: props.disabled,
|
|
5425
5947
|
className: props.className
|
|
5426
5948
|
},
|
|
5427
|
-
/* @__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(
|
|
5428
5950
|
"input",
|
|
5429
5951
|
{
|
|
5430
5952
|
ref,
|
|
@@ -5471,7 +5993,7 @@ window.Aura = (() => {
|
|
|
5471
5993
|
},
|
|
5472
5994
|
onKeyDown
|
|
5473
5995
|
}
|
|
5474
|
-
), 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(
|
|
5475
5997
|
"button",
|
|
5476
5998
|
{
|
|
5477
5999
|
type: "button",
|
|
@@ -5487,8 +6009,8 @@ window.Aura = (() => {
|
|
|
5487
6009
|
nudge(-step);
|
|
5488
6010
|
}
|
|
5489
6011
|
},
|
|
5490
|
-
/* @__PURE__ */
|
|
5491
|
-
), /* @__PURE__ */
|
|
6012
|
+
/* @__PURE__ */ React52.createElement(Icon, { name: "minus" })
|
|
6013
|
+
), /* @__PURE__ */ React52.createElement(
|
|
5492
6014
|
"button",
|
|
5493
6015
|
{
|
|
5494
6016
|
type: "button",
|
|
@@ -5504,14 +6026,14 @@ window.Aura = (() => {
|
|
|
5504
6026
|
nudge(step);
|
|
5505
6027
|
}
|
|
5506
6028
|
},
|
|
5507
|
-
/* @__PURE__ */
|
|
6029
|
+
/* @__PURE__ */ React52.createElement(Icon, { name: "plus" })
|
|
5508
6030
|
)) : null)
|
|
5509
6031
|
);
|
|
5510
6032
|
});
|
|
5511
6033
|
|
|
5512
6034
|
// src/Stepper.tsx
|
|
5513
|
-
var
|
|
5514
|
-
var Stepper =
|
|
6035
|
+
var React53 = __toESM(require_react(), 1);
|
|
6036
|
+
var Stepper = React53.forwardRef(function Stepper2(props, ref) {
|
|
5515
6037
|
const t = useStrings();
|
|
5516
6038
|
const steps = props.steps || [];
|
|
5517
6039
|
let at = -1;
|
|
@@ -5521,26 +6043,26 @@ window.Aura = (() => {
|
|
|
5521
6043
|
if (at < 0) at = 0;
|
|
5522
6044
|
const vertical = props.orientation === "vertical";
|
|
5523
6045
|
const cur = steps[at];
|
|
5524
|
-
return /* @__PURE__ */
|
|
6046
|
+
return /* @__PURE__ */ React53.createElement(
|
|
5525
6047
|
"nav",
|
|
5526
6048
|
{
|
|
5527
6049
|
ref,
|
|
5528
6050
|
"aria-label": props.label,
|
|
5529
6051
|
className: cx("aura-stepper", vertical ? "aura-stepper--vertical" : "aura-stepper--horizontal", props.className)
|
|
5530
6052
|
},
|
|
5531
|
-
/* @__PURE__ */
|
|
6053
|
+
/* @__PURE__ */ React53.createElement("ol", { className: "aura-stepper__list" }, steps.map(function(s, i) {
|
|
5532
6054
|
const state = i < at ? "done" : i === at ? "current" : "upcoming";
|
|
5533
|
-
const marker = /* @__PURE__ */
|
|
5534
|
-
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);
|
|
5535
6057
|
const clickable = state === "done" && !!props.onStepClick;
|
|
5536
|
-
return /* @__PURE__ */
|
|
6058
|
+
return /* @__PURE__ */ React53.createElement(
|
|
5537
6059
|
"li",
|
|
5538
6060
|
{
|
|
5539
6061
|
key: s.id,
|
|
5540
6062
|
className: cx("aura-stepper__item", "is-" + state),
|
|
5541
6063
|
"aria-current": state === "current" ? "step" : void 0
|
|
5542
6064
|
},
|
|
5543
|
-
clickable ? /* @__PURE__ */
|
|
6065
|
+
clickable ? /* @__PURE__ */ React53.createElement(
|
|
5544
6066
|
"button",
|
|
5545
6067
|
{
|
|
5546
6068
|
type: "button",
|
|
@@ -5551,19 +6073,19 @@ window.Aura = (() => {
|
|
|
5551
6073
|
},
|
|
5552
6074
|
marker,
|
|
5553
6075
|
text
|
|
5554
|
-
) : /* @__PURE__ */
|
|
6076
|
+
) : /* @__PURE__ */ React53.createElement("span", { className: "aura-stepper__step" }, marker, text)
|
|
5555
6077
|
);
|
|
5556
6078
|
})),
|
|
5557
|
-
!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
|
|
5558
6080
|
);
|
|
5559
6081
|
});
|
|
5560
6082
|
|
|
5561
6083
|
// src/SegmentedControl.tsx
|
|
5562
|
-
var
|
|
6084
|
+
var React54 = __toESM(require_react(), 1);
|
|
5563
6085
|
function toOpt2(o) {
|
|
5564
6086
|
return typeof o === "object" ? o : { value: o, label: o };
|
|
5565
6087
|
}
|
|
5566
|
-
var SegmentedControl =
|
|
6088
|
+
var SegmentedControl = React54.forwardRef(
|
|
5567
6089
|
function SegmentedControl2(props, ref) {
|
|
5568
6090
|
const options = (props.options || []).map(toOpt2);
|
|
5569
6091
|
const firstEnabled = options.filter(function(o) {
|
|
@@ -5576,7 +6098,7 @@ window.Aura = (() => {
|
|
|
5576
6098
|
);
|
|
5577
6099
|
const value = st[0], setValue = st[1];
|
|
5578
6100
|
const auto = uid(), id = props.id || auto;
|
|
5579
|
-
const refs =
|
|
6101
|
+
const refs = React54.useRef([]);
|
|
5580
6102
|
const selIdx = options.findIndex(function(o) {
|
|
5581
6103
|
return o.value === value;
|
|
5582
6104
|
});
|
|
@@ -5609,7 +6131,7 @@ window.Aura = (() => {
|
|
|
5609
6131
|
move(options.length, -1);
|
|
5610
6132
|
}
|
|
5611
6133
|
}
|
|
5612
|
-
return /* @__PURE__ */
|
|
6134
|
+
return /* @__PURE__ */ React54.createElement(
|
|
5613
6135
|
"div",
|
|
5614
6136
|
{
|
|
5615
6137
|
ref,
|
|
@@ -5628,7 +6150,7 @@ window.Aura = (() => {
|
|
|
5628
6150
|
options.map(function(o, i) {
|
|
5629
6151
|
const on = o.value === value;
|
|
5630
6152
|
const off = props.disabled || o.disabled;
|
|
5631
|
-
return /* @__PURE__ */
|
|
6153
|
+
return /* @__PURE__ */ React54.createElement(
|
|
5632
6154
|
"button",
|
|
5633
6155
|
{
|
|
5634
6156
|
key: o.value,
|
|
@@ -5650,8 +6172,8 @@ window.Aura = (() => {
|
|
|
5650
6172
|
onKeyDown(e, i);
|
|
5651
6173
|
}
|
|
5652
6174
|
},
|
|
5653
|
-
o.icon ? /* @__PURE__ */
|
|
5654
|
-
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)
|
|
5655
6177
|
);
|
|
5656
6178
|
})
|
|
5657
6179
|
);
|