@jirawatpyk/aura-react 4.18.0 → 4.19.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 +30 -3
- package/dist/aura.bundle.js +457 -181
- package/dist/cjs/index.cjs +456 -180
- package/dist/esm/ActionBar.js +47 -0
- package/dist/esm/AppShell.js +2 -2
- package/dist/esm/BottomNav.js +45 -0
- package/dist/esm/DataTable.js +84 -5
- package/dist/esm/DatePicker.js +9 -4
- package/dist/esm/DropdownMenu.js +1 -0
- package/dist/esm/Menu.js +64 -22
- package/dist/esm/Tabs.js +35 -0
- package/dist/esm/Toaster.js +23 -6
- package/dist/esm/dates.js +12 -1
- package/dist/esm/index.js +6 -0
- package/dist/esm/locale.js +4 -2
- package/dist/esm/strings.js +3 -0
- package/dist/index.d.ts +106 -5
- package/dist/server/index.cjs +15 -1
- package/dist/server/index.d.ts +3 -0
- package/dist/server/index.js +15 -1
- package/dist/styles.css +83 -1
- package/dist/styles.layer.css +83 -1
- package/package.json +1 -1
package/dist/cjs/index.cjs
CHANGED
|
@@ -32,11 +32,13 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
32
32
|
var index_exports = {};
|
|
33
33
|
__export(index_exports, {
|
|
34
34
|
Accordion: () => Accordion,
|
|
35
|
+
ActionBar: () => ActionBar,
|
|
35
36
|
Alert: () => Alert,
|
|
36
37
|
AppShell: () => AppShell,
|
|
37
38
|
AuraProvider: () => AuraProvider,
|
|
38
39
|
Avatar: () => Avatar,
|
|
39
40
|
Badge: () => Badge,
|
|
41
|
+
BottomNav: () => BottomNav,
|
|
40
42
|
Breadcrumb: () => Breadcrumb,
|
|
41
43
|
Button: () => Button,
|
|
42
44
|
Calendar: () => Calendar,
|
|
@@ -101,6 +103,7 @@ __export(index_exports, {
|
|
|
101
103
|
parseTime: () => parseTime,
|
|
102
104
|
statusTone: () => toneFor,
|
|
103
105
|
toast: () => toast,
|
|
106
|
+
todayIn: () => todayIn,
|
|
104
107
|
useAuraLocale: () => useAuraLocale,
|
|
105
108
|
useBreakpoint: () => useBreakpoint,
|
|
106
109
|
useColorScheme: () => useColorScheme,
|
|
@@ -328,6 +331,7 @@ var STRINGS = {
|
|
|
328
331
|
},
|
|
329
332
|
prevPage: "Previous page",
|
|
330
333
|
nextPage: "Next page",
|
|
334
|
+
totals: "Totals",
|
|
331
335
|
rowCount: function(c) {
|
|
332
336
|
return n(c) + " rows";
|
|
333
337
|
},
|
|
@@ -441,6 +445,7 @@ var STRINGS = {
|
|
|
441
445
|
},
|
|
442
446
|
prevPage: "\u0E2B\u0E19\u0E49\u0E32\u0E01\u0E48\u0E2D\u0E19\u0E2B\u0E19\u0E49\u0E32",
|
|
443
447
|
nextPage: "\u0E2B\u0E19\u0E49\u0E32\u0E16\u0E31\u0E14\u0E44\u0E1B",
|
|
448
|
+
totals: "\u0E23\u0E27\u0E21",
|
|
444
449
|
rowCount: function(c) {
|
|
445
450
|
return n(c) + " \u0E41\u0E16\u0E27";
|
|
446
451
|
},
|
|
@@ -554,6 +559,7 @@ var STRINGS = {
|
|
|
554
559
|
},
|
|
555
560
|
prevPage: "F\xF6reg\xE5ende sida",
|
|
556
561
|
nextPage: "N\xE4sta sida",
|
|
562
|
+
totals: "Summa",
|
|
557
563
|
rowCount: function(c) {
|
|
558
564
|
return nsv(c) + " rader";
|
|
559
565
|
},
|
|
@@ -604,6 +610,7 @@ var LocaleContext = React3.createContext(null);
|
|
|
604
610
|
function AuraProvider(props) {
|
|
605
611
|
const outer = React3.useContext(LocaleContext);
|
|
606
612
|
const density = props.density || outer && outer.density || null;
|
|
613
|
+
const timeZone = props.timeZone || outer && outer.timeZone || null;
|
|
607
614
|
const value = React3.useMemo(
|
|
608
615
|
function() {
|
|
609
616
|
const base = props.locale && STRINGS[props.locale] || STRINGS.en;
|
|
@@ -612,10 +619,11 @@ function AuraProvider(props) {
|
|
|
612
619
|
calendar: props.calendar || null,
|
|
613
620
|
strings: props.strings ? Object.assign({}, base, props.strings) : base,
|
|
614
621
|
linkComponent: props.linkComponent || null,
|
|
615
|
-
density
|
|
622
|
+
density,
|
|
623
|
+
timeZone
|
|
616
624
|
};
|
|
617
625
|
},
|
|
618
|
-
[props.locale, props.calendar, props.strings, props.linkComponent, density]
|
|
626
|
+
[props.locale, props.calendar, props.strings, props.linkComponent, density, timeZone]
|
|
619
627
|
);
|
|
620
628
|
return /* @__PURE__ */ React3.createElement(LocaleContext.Provider, { value }, props.density ? /* @__PURE__ */ React3.createElement("div", { className: "aura-density", "data-density": props.density }, props.children) : props.children);
|
|
621
629
|
}
|
|
@@ -749,6 +757,7 @@ var Menu = React6.forwardRef(function Menu2(props, ref) {
|
|
|
749
757
|
const pos = posState[0], setPos = posState[1];
|
|
750
758
|
const items2 = props.items || [];
|
|
751
759
|
const mounted = useMounted();
|
|
760
|
+
const Link = useLinkComponent(props.linkComponent);
|
|
752
761
|
useIsoLayoutEffect(
|
|
753
762
|
function() {
|
|
754
763
|
const a = props.anchor, m = own.current;
|
|
@@ -809,6 +818,63 @@ var Menu = React6.forwardRef(function Menu2(props, ref) {
|
|
|
809
818
|
}
|
|
810
819
|
e.stopPropagation();
|
|
811
820
|
}
|
|
821
|
+
function groupItems(list) {
|
|
822
|
+
const out = [];
|
|
823
|
+
list.forEach(function(it, i) {
|
|
824
|
+
const g = it.type === "radio" && it.group ? it.group : null;
|
|
825
|
+
const last = out[out.length - 1];
|
|
826
|
+
if (last && last.group === g && g !== null) last.items.push({ it, i });
|
|
827
|
+
else out.push({ group: g, items: [{ it, i }] });
|
|
828
|
+
});
|
|
829
|
+
return out;
|
|
830
|
+
}
|
|
831
|
+
function renderItem(it, i) {
|
|
832
|
+
if (it.separator) return /* @__PURE__ */ React6.createElement("div", { key: "s" + i, role: "separator", className: "aura-menu__sep" });
|
|
833
|
+
const isRadio = it.type === "radio";
|
|
834
|
+
const isCheck = !isRadio && it.checked !== void 0;
|
|
835
|
+
const lead = isRadio ? /* @__PURE__ */ React6.createElement("span", { className: cx("aura-menu__radio", it.checked && "is-on") }) : isCheck ? /* @__PURE__ */ React6.createElement("span", { className: cx("aura-menu__check", it.checked && "is-on") }, it.checked ? /* @__PURE__ */ React6.createElement(Icon, { name: "check", size: 12, strokeWidth: 3 }) : null) : it.icon ? /* @__PURE__ */ React6.createElement(Icon, { name: it.icon }) : /* @__PURE__ */ React6.createElement("span", { className: "aura-menu__blank" });
|
|
836
|
+
const body = [
|
|
837
|
+
/* @__PURE__ */ React6.createElement(React6.Fragment, { key: "l" }, lead),
|
|
838
|
+
/* @__PURE__ */ React6.createElement("span", { key: "t", className: "aura-menu__label" }, it.label),
|
|
839
|
+
it.hint ? /* @__PURE__ */ React6.createElement("span", { key: "h", className: "aura-menu__hint" }, it.hint) : null
|
|
840
|
+
];
|
|
841
|
+
const cls = cx("aura-menu__item", it.tone === "danger" && "aura-menu__item--danger");
|
|
842
|
+
if (it.href && !it.disabled)
|
|
843
|
+
return /* @__PURE__ */ React6.createElement(
|
|
844
|
+
Link,
|
|
845
|
+
{
|
|
846
|
+
key: i,
|
|
847
|
+
href: it.href,
|
|
848
|
+
target: it.target,
|
|
849
|
+
rel: it.target === "_blank" ? "noreferrer" : void 0,
|
|
850
|
+
tabIndex: -1,
|
|
851
|
+
role: "menuitem",
|
|
852
|
+
className: cls,
|
|
853
|
+
onClick: function() {
|
|
854
|
+
if (it.onSelect) it.onSelect();
|
|
855
|
+
props.onClose(false);
|
|
856
|
+
}
|
|
857
|
+
},
|
|
858
|
+
body
|
|
859
|
+
);
|
|
860
|
+
return /* @__PURE__ */ React6.createElement(
|
|
861
|
+
"button",
|
|
862
|
+
{
|
|
863
|
+
key: i,
|
|
864
|
+
type: "button",
|
|
865
|
+
tabIndex: -1,
|
|
866
|
+
disabled: it.disabled,
|
|
867
|
+
role: isRadio ? "menuitemradio" : isCheck ? "menuitemcheckbox" : "menuitem",
|
|
868
|
+
"aria-checked": isRadio || isCheck ? !!it.checked : void 0,
|
|
869
|
+
className: cls,
|
|
870
|
+
onClick: function() {
|
|
871
|
+
if (it.onSelect) it.onSelect();
|
|
872
|
+
if (!it.keepOpen) props.onClose(true);
|
|
873
|
+
}
|
|
874
|
+
},
|
|
875
|
+
body
|
|
876
|
+
);
|
|
877
|
+
}
|
|
812
878
|
const el = /* @__PURE__ */ React6.createElement(
|
|
813
879
|
"div",
|
|
814
880
|
{
|
|
@@ -819,28 +885,11 @@ var Menu = React6.forwardRef(function Menu2(props, ref) {
|
|
|
819
885
|
onKeyDown,
|
|
820
886
|
style: { top: pos ? pos.top : -9999, left: pos ? pos.left : -9999 }
|
|
821
887
|
},
|
|
822
|
-
items2.map(function(
|
|
823
|
-
|
|
824
|
-
|
|
825
|
-
|
|
826
|
-
|
|
827
|
-
{
|
|
828
|
-
key: i,
|
|
829
|
-
type: "button",
|
|
830
|
-
tabIndex: -1,
|
|
831
|
-
disabled: it.disabled,
|
|
832
|
-
role: isCheck ? "menuitemcheckbox" : "menuitem",
|
|
833
|
-
"aria-checked": isCheck ? !!it.checked : void 0,
|
|
834
|
-
className: "aura-menu__item",
|
|
835
|
-
onClick: function() {
|
|
836
|
-
it.onSelect();
|
|
837
|
-
if (!it.keepOpen) props.onClose(true);
|
|
838
|
-
}
|
|
839
|
-
},
|
|
840
|
-
isCheck ? /* @__PURE__ */ React6.createElement("span", { className: cx("aura-menu__check", it.checked && "is-on") }, it.checked ? /* @__PURE__ */ React6.createElement(Icon, { name: "check", size: 12, strokeWidth: 3 }) : null) : it.icon ? /* @__PURE__ */ React6.createElement(Icon, { name: it.icon }) : /* @__PURE__ */ React6.createElement("span", { className: "aura-menu__blank" }),
|
|
841
|
-
/* @__PURE__ */ React6.createElement("span", { className: "aura-menu__label" }, it.label),
|
|
842
|
-
it.hint ? /* @__PURE__ */ React6.createElement("span", { className: "aura-menu__hint" }, it.hint) : null
|
|
843
|
-
);
|
|
888
|
+
groupItems(items2).map(function(block, bi) {
|
|
889
|
+
const rendered = block.items.map(function(x) {
|
|
890
|
+
return renderItem(x.it, x.i);
|
|
891
|
+
});
|
|
892
|
+
return block.group ? /* @__PURE__ */ React6.createElement("div", { key: "g" + bi, role: "group", "aria-label": block.group, className: "aura-menu__group" }, rendered) : /* @__PURE__ */ React6.createElement(React6.Fragment, { key: "f" + bi }, rendered);
|
|
844
893
|
})
|
|
845
894
|
);
|
|
846
895
|
return mounted ? (0, import_react_dom.createPortal)(el, document.body) : null;
|
|
@@ -869,6 +918,7 @@ var DropdownMenu = React7.forwardRef(function DropdownMenu2(props, ref) {
|
|
|
869
918
|
anchor,
|
|
870
919
|
label: props.label,
|
|
871
920
|
items: props.items,
|
|
921
|
+
linkComponent: props.linkComponent,
|
|
872
922
|
onClose: function(restore) {
|
|
873
923
|
setAnchor(null);
|
|
874
924
|
if (restore && typeof anchor.focus === "function") anchor.focus();
|
|
@@ -1678,6 +1728,16 @@ function parseDate(text) {
|
|
|
1678
1728
|
const dt = new Date(y, mo - 1, d);
|
|
1679
1729
|
return dt.getMonth() === mo - 1 && dt.getDate() === d ? toISO(dt) : null;
|
|
1680
1730
|
}
|
|
1731
|
+
function todayIn(timeZone) {
|
|
1732
|
+
const now = /* @__PURE__ */ new Date();
|
|
1733
|
+
if (!timeZone) return toISO(now);
|
|
1734
|
+
return new Intl.DateTimeFormat("en-CA", {
|
|
1735
|
+
timeZone,
|
|
1736
|
+
year: "numeric",
|
|
1737
|
+
month: "2-digit",
|
|
1738
|
+
day: "2-digit"
|
|
1739
|
+
}).format(now);
|
|
1740
|
+
}
|
|
1681
1741
|
|
|
1682
1742
|
// src/DatePicker.tsx
|
|
1683
1743
|
function useFormatDate() {
|
|
@@ -1699,9 +1759,9 @@ function useFormatDate() {
|
|
|
1699
1759
|
var Calendar = React17.forwardRef(function Calendar2(props, ref) {
|
|
1700
1760
|
const ctx = useAuraLocale(), locale = props.locale || ctx.locale || "en", calendar = props.calendar || ctx.calendar || defaultCalendar(locale), tag = localeTag(locale, calendar);
|
|
1701
1761
|
const weekStart = props.weekStartsOn == null ? locale === "sv" ? 1 : 0 : props.weekStartsOn;
|
|
1702
|
-
|
|
1703
|
-
today =
|
|
1704
|
-
const min = fromISO(props.min), max = fromISO(props.max);
|
|
1762
|
+
const todayISO = props.today || todayIn(props.timeZone || ctx.timeZone);
|
|
1763
|
+
const today = fromISO(todayISO);
|
|
1764
|
+
const min = fromISO(props.min === "today" ? todayISO : props.min), max = fromISO(props.max === "today" ? todayISO : props.max);
|
|
1705
1765
|
const start = fromISO(props.start), end = fromISO(props.end);
|
|
1706
1766
|
const focusState = React17.useState(fromISO(props.focus) || start || today);
|
|
1707
1767
|
const focusDate = focusState[0], setFocus = focusState[1];
|
|
@@ -2087,6 +2147,8 @@ var DatePicker = React17.forwardRef(function DatePicker2(props, ref) {
|
|
|
2087
2147
|
weekStartsOn: props.weekStartsOn,
|
|
2088
2148
|
min: props.min,
|
|
2089
2149
|
max: props.max,
|
|
2150
|
+
timeZone: props.timeZone,
|
|
2151
|
+
today: props.today,
|
|
2090
2152
|
isDateDisabled: props.isDateDisabled,
|
|
2091
2153
|
start: st[0],
|
|
2092
2154
|
focus: st[0],
|
|
@@ -2203,6 +2265,8 @@ var DateRangePicker = React17.forwardRef(
|
|
|
2203
2265
|
weekStartsOn: props.weekStartsOn,
|
|
2204
2266
|
min: props.min,
|
|
2205
2267
|
max: props.max,
|
|
2268
|
+
timeZone: props.timeZone,
|
|
2269
|
+
today: props.today,
|
|
2206
2270
|
isDateDisabled: props.isDateDisabled,
|
|
2207
2271
|
start: draft[0] || v.start,
|
|
2208
2272
|
end: draft[0] ? null : v.end,
|
|
@@ -2277,11 +2341,19 @@ var Alert = React18.forwardRef(function Alert2(props, ref) {
|
|
|
2277
2341
|
// src/Toaster.tsx
|
|
2278
2342
|
var React19 = __toESM(require("react"), 1);
|
|
2279
2343
|
var import_react_dom4 = require("react-dom");
|
|
2344
|
+
var MAX_VISIBLE = 3;
|
|
2280
2345
|
var toastState = {
|
|
2281
2346
|
list: [],
|
|
2347
|
+
queue: [],
|
|
2282
2348
|
subs: [],
|
|
2283
2349
|
n: 0
|
|
2284
2350
|
};
|
|
2351
|
+
function promote() {
|
|
2352
|
+
while (toastState.list.length < MAX_VISIBLE && toastState.queue.length) {
|
|
2353
|
+
toastState.list = toastState.list.concat([toastState.queue[0]]);
|
|
2354
|
+
toastState.queue = toastState.queue.slice(1);
|
|
2355
|
+
}
|
|
2356
|
+
}
|
|
2285
2357
|
function emitToasts() {
|
|
2286
2358
|
toastState.subs.forEach(function(f) {
|
|
2287
2359
|
f(toastState.list.slice());
|
|
@@ -2289,18 +2361,24 @@ function emitToasts() {
|
|
|
2289
2361
|
}
|
|
2290
2362
|
function show(opts) {
|
|
2291
2363
|
const id = opts.id || "t" + ++toastState.n;
|
|
2292
|
-
const
|
|
2364
|
+
const byId = function(t) {
|
|
2293
2365
|
return t.id === id;
|
|
2294
|
-
}
|
|
2366
|
+
};
|
|
2367
|
+
const at = toastState.list.findIndex(byId), queued = toastState.queue.findIndex(byId);
|
|
2368
|
+
const prev = at >= 0 ? toastState.list[at] : queued >= 0 ? toastState.queue[queued] : null;
|
|
2295
2369
|
const entry = Object.assign({ tone: "info" }, opts, {
|
|
2296
2370
|
id,
|
|
2297
2371
|
loading: !!opts.loading,
|
|
2298
|
-
rev:
|
|
2372
|
+
rev: prev ? prev.rev + 1 : 0
|
|
2299
2373
|
});
|
|
2300
2374
|
if (at >= 0) {
|
|
2301
2375
|
toastState.list = toastState.list.slice();
|
|
2302
2376
|
toastState.list[at] = entry;
|
|
2303
|
-
} else
|
|
2377
|
+
} else if (queued >= 0) {
|
|
2378
|
+
toastState.queue = toastState.queue.slice();
|
|
2379
|
+
toastState.queue[queued] = entry;
|
|
2380
|
+
} else if (toastState.list.length < MAX_VISIBLE) toastState.list = toastState.list.concat([entry]);
|
|
2381
|
+
else toastState.queue = toastState.queue.concat([entry]);
|
|
2304
2382
|
emitToasts();
|
|
2305
2383
|
return id;
|
|
2306
2384
|
}
|
|
@@ -2322,9 +2400,12 @@ toast.loading = function(title, opts) {
|
|
|
2322
2400
|
);
|
|
2323
2401
|
};
|
|
2324
2402
|
toast.dismiss = function(id) {
|
|
2325
|
-
|
|
2403
|
+
const keep = function(t) {
|
|
2326
2404
|
return t.id !== id;
|
|
2327
|
-
}
|
|
2405
|
+
};
|
|
2406
|
+
toastState.list = toastState.list.filter(keep);
|
|
2407
|
+
toastState.queue = toastState.queue.filter(keep);
|
|
2408
|
+
promote();
|
|
2328
2409
|
emitToasts();
|
|
2329
2410
|
};
|
|
2330
2411
|
function ToastItem(props) {
|
|
@@ -3114,6 +3195,7 @@ var Drawer = React27.forwardRef(function Drawer2(props, ref) {
|
|
|
3114
3195
|
|
|
3115
3196
|
// src/DataTable.tsx
|
|
3116
3197
|
var React28 = __toESM(require("react"), 1);
|
|
3198
|
+
var import_react_dom8 = require("react-dom");
|
|
3117
3199
|
var BP = { sm: 640, md: 768, lg: 1024, xl: 1280 };
|
|
3118
3200
|
var DEFAULT_COLUMNS = [
|
|
3119
3201
|
{ key: "id", label: "ID", width: 96, mono: true },
|
|
@@ -3225,6 +3307,29 @@ var DataTable = React28.forwardRef(function DataTable2(props, ref) {
|
|
|
3225
3307
|
return px != null && boxWidth[0] < px;
|
|
3226
3308
|
}
|
|
3227
3309
|
const scrollRef = React28.useRef(null);
|
|
3310
|
+
const tipState = React28.useState(null), tip = tipState[0], setTip = tipState[1];
|
|
3311
|
+
function showFull(e) {
|
|
3312
|
+
const el = e.target.closest ? e.target.closest(".aura-table__td, .aura-table__card-fields dd") : null;
|
|
3313
|
+
if (!el || el.scrollWidth <= el.clientWidth + 1 || el.querySelector("button, input, .aura-pill"))
|
|
3314
|
+
return setTip(null);
|
|
3315
|
+
const r = el.getBoundingClientRect();
|
|
3316
|
+
setTip({ text: (el.textContent || "").trim(), left: r.left, top: r.top });
|
|
3317
|
+
}
|
|
3318
|
+
function hideFull() {
|
|
3319
|
+
setTip(null);
|
|
3320
|
+
}
|
|
3321
|
+
const tipEl = tip && typeof document !== "undefined" ? (0, import_react_dom8.createPortal)(
|
|
3322
|
+
/* @__PURE__ */ React28.createElement(
|
|
3323
|
+
"div",
|
|
3324
|
+
{
|
|
3325
|
+
className: "aura-tooltip aura-tooltip--above",
|
|
3326
|
+
"aria-hidden": "true",
|
|
3327
|
+
style: { left: tip.left, top: tip.top - 6 }
|
|
3328
|
+
},
|
|
3329
|
+
tip.text
|
|
3330
|
+
),
|
|
3331
|
+
document.body
|
|
3332
|
+
) : null;
|
|
3228
3333
|
const rowH = React28.useState(ROW_H_DEFAULT);
|
|
3229
3334
|
const ROW_H = rowH[0];
|
|
3230
3335
|
useIsoLayoutEffect(function() {
|
|
@@ -4093,7 +4198,7 @@ var DataTable = React28.forwardRef(function DataTable2(props, ref) {
|
|
|
4093
4198
|
return /* @__PURE__ */ React28.createElement("span", { key: c.key, className: "aura-table__card-actions" }, cellVal(c, r));
|
|
4094
4199
|
})),
|
|
4095
4200
|
rest.length ? /* @__PURE__ */ React28.createElement("dl", { className: "aura-table__card-fields" }, rest.map(function(c) {
|
|
4096
|
-
return /* @__PURE__ */ React28.createElement("div", { key: c.key }, /* @__PURE__ */ React28.createElement("dt", null, c.label), /* @__PURE__ */ React28.createElement("dd", { className: c.mono
|
|
4201
|
+
return /* @__PURE__ */ React28.createElement("div", { key: c.key }, /* @__PURE__ */ React28.createElement("dt", null, c.label), /* @__PURE__ */ React28.createElement("dd", { className: cx(c.mono && "aura-table__mono", c.align === "end" && "is-end") }, cellVal(c, r)));
|
|
4097
4202
|
})) : null
|
|
4098
4203
|
);
|
|
4099
4204
|
}));
|
|
@@ -4104,6 +4209,10 @@ var DataTable = React28.forwardRef(function DataTable2(props, ref) {
|
|
|
4104
4209
|
ref: wrapRefArg,
|
|
4105
4210
|
"data-density": props.density,
|
|
4106
4211
|
className: cx("aura-table aura-table--stacked", refreshing && "is-refreshing", props.className),
|
|
4212
|
+
onMouseOver: showFull,
|
|
4213
|
+
onMouseLeave: hideFull,
|
|
4214
|
+
onFocus: showFull,
|
|
4215
|
+
onBlur: hideFull,
|
|
4107
4216
|
role: "region",
|
|
4108
4217
|
"aria-label": props.label,
|
|
4109
4218
|
"aria-busy": busy || void 0
|
|
@@ -4119,10 +4228,55 @@ var DataTable = React28.forwardRef(function DataTable2(props, ref) {
|
|
|
4119
4228
|
}
|
|
4120
4229
|
), /* @__PURE__ */ React28.createElement("span", null, nSel ? t.selectedCount(nSel) : t.selectAll)) : null,
|
|
4121
4230
|
cardBody,
|
|
4122
|
-
|
|
4231
|
+
props.footer && rows.length && !loading ? /* @__PURE__ */ React28.createElement("div", { className: "aura-table__card aura-table__card--total", role: "group", "aria-label": t.totals }, /* @__PURE__ */ React28.createElement("dl", { className: "aura-table__card-fields" }, vis.filter(function(c) {
|
|
4232
|
+
return props.footer[c.key] != null;
|
|
4233
|
+
}).map(function(c) {
|
|
4234
|
+
return /* @__PURE__ */ React28.createElement("div", { key: c.key }, /* @__PURE__ */ React28.createElement("dt", null, c.label || t.totals), /* @__PURE__ */ React28.createElement("dd", { className: cx(c.mono && "aura-table__mono", c.align === "end" && "is-end") }, props.footer[c.key]));
|
|
4235
|
+
}))) : null,
|
|
4236
|
+
foot,
|
|
4237
|
+
tipEl
|
|
4123
4238
|
);
|
|
4124
4239
|
}
|
|
4125
4240
|
if (stacked) return renderStacked(wrapMerged);
|
|
4241
|
+
const totalRow = props.footer && rows.length && !loading ? /* @__PURE__ */ React28.createElement(
|
|
4242
|
+
"div",
|
|
4243
|
+
{
|
|
4244
|
+
role: "row",
|
|
4245
|
+
"aria-rowindex": shownTotal + 2,
|
|
4246
|
+
"aria-label": t.totals,
|
|
4247
|
+
className: cx("aura-table__row aura-table__total", props.stickyFooter && "is-sticky"),
|
|
4248
|
+
style: rowStyle
|
|
4249
|
+
},
|
|
4250
|
+
/* @__PURE__ */ React28.createElement("span", { className: "aura-table__gutter", "aria-hidden": true }),
|
|
4251
|
+
selectable ? /* @__PURE__ */ React28.createElement("span", { className: cx("aura-table__sel", nPinned && "is-pinned"), "aria-hidden": true }) : null,
|
|
4252
|
+
vis.map(function(c, j) {
|
|
4253
|
+
const pin = isPinned(c);
|
|
4254
|
+
return /* @__PURE__ */ React28.createElement(
|
|
4255
|
+
"span",
|
|
4256
|
+
{
|
|
4257
|
+
key: c.key,
|
|
4258
|
+
role: "gridcell",
|
|
4259
|
+
"aria-colindex": j + (selectable ? 2 : 1),
|
|
4260
|
+
className: cx(
|
|
4261
|
+
"aura-table__td",
|
|
4262
|
+
c.mono && "aura-table__mono",
|
|
4263
|
+
c.align === "end" && "is-end",
|
|
4264
|
+
pin && "is-pinned",
|
|
4265
|
+
pin && j === nPinned - 1 && "is-pin-edge"
|
|
4266
|
+
),
|
|
4267
|
+
style: cellStyle(c, j)
|
|
4268
|
+
},
|
|
4269
|
+
props.footer[c.key]
|
|
4270
|
+
);
|
|
4271
|
+
}),
|
|
4272
|
+
/* @__PURE__ */ React28.createElement(
|
|
4273
|
+
"span",
|
|
4274
|
+
{
|
|
4275
|
+
className: cx("aura-table__gutter aura-table__gutter--end", controls && "has-picker"),
|
|
4276
|
+
"aria-hidden": true
|
|
4277
|
+
}
|
|
4278
|
+
)
|
|
4279
|
+
) : null;
|
|
4126
4280
|
const scrollStyle = {
|
|
4127
4281
|
scrollPaddingLeft: "calc(var(--aura-space-6)" + selW + " + " + acc + "px)",
|
|
4128
4282
|
scrollPaddingTop: ROW_H + "px"
|
|
@@ -4144,11 +4298,15 @@ var DataTable = React28.forwardRef(function DataTable2(props, ref) {
|
|
|
4144
4298
|
gridRef.current = el;
|
|
4145
4299
|
},
|
|
4146
4300
|
className: "aura-table__scroll",
|
|
4301
|
+
onMouseOver: showFull,
|
|
4302
|
+
onMouseLeave: hideFull,
|
|
4303
|
+
onFocus: showFull,
|
|
4304
|
+
onBlur: hideFull,
|
|
4147
4305
|
style: scrollStyle,
|
|
4148
4306
|
role: "grid",
|
|
4149
4307
|
"aria-label": props.label,
|
|
4150
4308
|
"aria-busy": busy || void 0,
|
|
4151
|
-
"aria-rowcount": loading ? -1 : shownTotal + 1,
|
|
4309
|
+
"aria-rowcount": loading ? -1 : shownTotal + 1 + (totalRow ? 1 : 0),
|
|
4152
4310
|
"aria-colcount": nCols,
|
|
4153
4311
|
"aria-multiselectable": selectable || void 0,
|
|
4154
4312
|
onKeyDown: onGridKey,
|
|
@@ -4162,7 +4320,8 @@ var DataTable = React28.forwardRef(function DataTable2(props, ref) {
|
|
|
4162
4320
|
}
|
|
4163
4321
|
},
|
|
4164
4322
|
/* @__PURE__ */ React28.createElement("div", { className: "aura-table__head", role: "row", "aria-rowindex": 1, style: rowStyle }, head),
|
|
4165
|
-
body
|
|
4323
|
+
body,
|
|
4324
|
+
totalRow
|
|
4166
4325
|
),
|
|
4167
4326
|
busy ? /* @__PURE__ */ React28.createElement("span", { className: "aura-sr-only", role: "status" }, t.loadingRows) : null,
|
|
4168
4327
|
controls ? /* @__PURE__ */ React28.createElement("div", { className: "aura-table__picker" }, /* @__PURE__ */ React28.createElement(
|
|
@@ -4185,7 +4344,8 @@ var DataTable = React28.forwardRef(function DataTable2(props, ref) {
|
|
|
4185
4344
|
label: menu.kind === "picker" ? t.columns : t.column(byKey[menu.key] && byKey[menu.key].label),
|
|
4186
4345
|
items: menu.kind === "picker" ? pickerItems() : byKey[menu.key] ? columnMenuItems(byKey[menu.key]) : []
|
|
4187
4346
|
}
|
|
4188
|
-
) : null
|
|
4347
|
+
) : null,
|
|
4348
|
+
tipEl
|
|
4189
4349
|
);
|
|
4190
4350
|
if (!dual) return gridEl;
|
|
4191
4351
|
return /* @__PURE__ */ React28.createElement("div", { ref: wrapMerged, className: "aura-table-dual", "data-stack-below": props.stackBelow }, renderStacked(void 0), gridEl);
|
|
@@ -4227,6 +4387,40 @@ var Tabs = React30.forwardRef(function Tabs2(props, ref) {
|
|
|
4227
4387
|
const current2 = items2.filter(function(t) {
|
|
4228
4388
|
return t.id === st[0];
|
|
4229
4389
|
})[0] || items2[0];
|
|
4390
|
+
const Link = useLinkComponent(props.linkComponent);
|
|
4391
|
+
const asLinks = items2.length > 0 && items2.every(function(t) {
|
|
4392
|
+
return !!t.href;
|
|
4393
|
+
});
|
|
4394
|
+
if (asLinks)
|
|
4395
|
+
return /* @__PURE__ */ React30.createElement(
|
|
4396
|
+
"nav",
|
|
4397
|
+
{
|
|
4398
|
+
ref,
|
|
4399
|
+
"aria-label": props.label,
|
|
4400
|
+
className: cx("aura-tabs aura-tabs--links", props.className)
|
|
4401
|
+
},
|
|
4402
|
+
/* @__PURE__ */ React30.createElement("div", { className: "aura-tabs__list" }, items2.map(function(t) {
|
|
4403
|
+
const on = current2 && t.id === current2.id;
|
|
4404
|
+
const inner = [
|
|
4405
|
+
t.icon ? /* @__PURE__ */ React30.createElement(Icon, { key: "i", name: t.icon }) : null,
|
|
4406
|
+
t.label,
|
|
4407
|
+
t.count != null ? /* @__PURE__ */ React30.createElement("span", { key: "c", className: "aura-tab__count" }, t.count) : null
|
|
4408
|
+
];
|
|
4409
|
+
return t.disabled ? /* @__PURE__ */ React30.createElement("span", { key: t.id, className: "aura-tab is-disabled", "aria-disabled": true }, inner) : /* @__PURE__ */ React30.createElement(
|
|
4410
|
+
Link,
|
|
4411
|
+
{
|
|
4412
|
+
key: t.id,
|
|
4413
|
+
href: t.href,
|
|
4414
|
+
className: cx("aura-tab", on && "is-active"),
|
|
4415
|
+
"aria-current": on ? "page" : void 0,
|
|
4416
|
+
onClick: function() {
|
|
4417
|
+
st[1](t.id);
|
|
4418
|
+
}
|
|
4419
|
+
},
|
|
4420
|
+
inner
|
|
4421
|
+
);
|
|
4422
|
+
}))
|
|
4423
|
+
);
|
|
4230
4424
|
function go(i) {
|
|
4231
4425
|
const enabled = items2.filter(function(t2) {
|
|
4232
4426
|
return !t2.disabled;
|
|
@@ -4301,7 +4495,7 @@ var Tabs = React30.forwardRef(function Tabs2(props, ref) {
|
|
|
4301
4495
|
|
|
4302
4496
|
// src/SideNav.tsx
|
|
4303
4497
|
var React31 = __toESM(require("react"), 1);
|
|
4304
|
-
var
|
|
4498
|
+
var import_react_dom9 = require("react-dom");
|
|
4305
4499
|
function contains(it, id) {
|
|
4306
4500
|
return !!id && !!it.children && it.children.some(function(c) {
|
|
4307
4501
|
return c.id === id || contains(c, id);
|
|
@@ -4488,7 +4682,7 @@ var SideNav = React31.forwardRef(function SideNav2(props, ref) {
|
|
|
4488
4682
|
}
|
|
4489
4683
|
}
|
|
4490
4684
|
)) : null,
|
|
4491
|
-
tip && typeof document !== "undefined" ? (0,
|
|
4685
|
+
tip && typeof document !== "undefined" ? (0, import_react_dom9.createPortal)(
|
|
4492
4686
|
/* @__PURE__ */ React31.createElement(
|
|
4493
4687
|
"div",
|
|
4494
4688
|
{
|
|
@@ -4672,7 +4866,7 @@ var AppShell = React38.forwardRef(function AppShell2(props, ref) {
|
|
|
4672
4866
|
collapsed: false,
|
|
4673
4867
|
collapsible: false
|
|
4674
4868
|
}) : props.nav;
|
|
4675
|
-
return /* @__PURE__ */ React38.createElement("div", { ref, className: cx("aura-shell", props.className) }, props.nav ? /* @__PURE__ */ React38.createElement("div", { className: "aura-shell__nav" }, props.nav) : null, props.nav ? /* @__PURE__ */ React38.createElement(
|
|
4869
|
+
return /* @__PURE__ */ React38.createElement("div", { ref, className: cx("aura-shell", props.bottomNav && "aura-shell--bottomnav", props.className) }, props.nav ? /* @__PURE__ */ React38.createElement("div", { className: "aura-shell__nav" }, props.nav) : null, props.nav ? /* @__PURE__ */ React38.createElement(
|
|
4676
4870
|
Drawer,
|
|
4677
4871
|
{
|
|
4678
4872
|
open,
|
|
@@ -4697,13 +4891,95 @@ var AppShell = React38.forwardRef(function AppShell2(props, ref) {
|
|
|
4697
4891
|
},
|
|
4698
4892
|
"aria-expanded": open
|
|
4699
4893
|
}
|
|
4700
|
-
) : 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)));
|
|
4894
|
+
) : 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), props.bottomNav || null));
|
|
4701
4895
|
});
|
|
4702
4896
|
|
|
4703
|
-
// src/
|
|
4897
|
+
// src/ActionBar.tsx
|
|
4704
4898
|
var React39 = __toESM(require("react"), 1);
|
|
4705
|
-
var
|
|
4706
|
-
|
|
4899
|
+
var ActionBar = React39.forwardRef(function ActionBar2(props, ref) {
|
|
4900
|
+
const t = useStrings();
|
|
4901
|
+
const bulk = props.selected != null;
|
|
4902
|
+
const idle = bulk && !props.selected;
|
|
4903
|
+
const count = bulk && props.selected ? t.selectedCount(props.selected) : null;
|
|
4904
|
+
const cameFrom = React39.useRef(null);
|
|
4905
|
+
const own = React39.useRef(null);
|
|
4906
|
+
function clear() {
|
|
4907
|
+
props.onClearSelection();
|
|
4908
|
+
setTimeout(function() {
|
|
4909
|
+
const back = cameFrom.current;
|
|
4910
|
+
const a = document.activeElement;
|
|
4911
|
+
if ((!a || a === document.body || !a.isConnected) && back && back.isConnected) back.focus();
|
|
4912
|
+
}, 0);
|
|
4913
|
+
}
|
|
4914
|
+
return /* @__PURE__ */ React39.createElement(
|
|
4915
|
+
"div",
|
|
4916
|
+
{
|
|
4917
|
+
ref: function(el) {
|
|
4918
|
+
own.current = el;
|
|
4919
|
+
if (typeof ref === "function") ref(el);
|
|
4920
|
+
else if (ref) ref.current = el;
|
|
4921
|
+
},
|
|
4922
|
+
onFocus: function(e) {
|
|
4923
|
+
const from = e.relatedTarget;
|
|
4924
|
+
if (from && own.current && !own.current.contains(from)) cameFrom.current = from;
|
|
4925
|
+
},
|
|
4926
|
+
role: "region",
|
|
4927
|
+
"aria-label": props.label || t.actions,
|
|
4928
|
+
className: cx(
|
|
4929
|
+
"aura-actionbar",
|
|
4930
|
+
"aura-actionbar--" + (props.position || "viewport"),
|
|
4931
|
+
idle && "is-idle",
|
|
4932
|
+
props.className
|
|
4933
|
+
)
|
|
4934
|
+
},
|
|
4935
|
+
/* @__PURE__ */ React39.createElement("div", { className: "aura-actionbar__inner" }, /* @__PURE__ */ React39.createElement("div", { className: "aura-actionbar__status", role: "status" }, count, count && props.status ? " \xB7 " : null, props.status), !idle ? /* @__PURE__ */ React39.createElement("div", { className: "aura-actionbar__actions" }, count && props.onClearSelection ? /* @__PURE__ */ React39.createElement(Button, { variant: "ghost", size: "sm", onClick: clear }, t.clear()) : null, props.children) : null)
|
|
4936
|
+
);
|
|
4937
|
+
});
|
|
4938
|
+
|
|
4939
|
+
// src/BottomNav.tsx
|
|
4940
|
+
var React40 = __toESM(require("react"), 1);
|
|
4941
|
+
var BottomNav = React40.forwardRef(function BottomNav2(props, ref) {
|
|
4942
|
+
const t = useStrings();
|
|
4943
|
+
const Link = useLinkComponent(props.linkComponent);
|
|
4944
|
+
const st = useMaybeControlled(
|
|
4945
|
+
props.value,
|
|
4946
|
+
props.defaultValue,
|
|
4947
|
+
props.onChange
|
|
4948
|
+
);
|
|
4949
|
+
const active = st[0];
|
|
4950
|
+
const hide = props.hideFrom === false ? "always" : "below-" + (props.hideFrom || "lg");
|
|
4951
|
+
return /* @__PURE__ */ React40.createElement(React40.Fragment, null, /* @__PURE__ */ React40.createElement("div", { className: cx("aura-bottomnav-spacer", "aura-bottomnav--" + hide), "aria-hidden": "true" }), /* @__PURE__ */ React40.createElement(
|
|
4952
|
+
"nav",
|
|
4953
|
+
{
|
|
4954
|
+
ref,
|
|
4955
|
+
className: cx("aura-bottomnav", "aura-bottomnav--" + hide, props.className),
|
|
4956
|
+
"aria-label": props.label || t.mainNav
|
|
4957
|
+
},
|
|
4958
|
+
/* @__PURE__ */ React40.createElement("ul", { className: "aura-bottomnav__list" }, props.items.map(function(it) {
|
|
4959
|
+
const on = active === it.id;
|
|
4960
|
+
const count = it.count != null && it.count > 0 ? it.count > 99 ? "99+" : String(it.count) : null;
|
|
4961
|
+
const common = {
|
|
4962
|
+
className: cx("aura-bottomnav__item", on && "is-active"),
|
|
4963
|
+
"aria-current": on ? "page" : void 0,
|
|
4964
|
+
onClick: function(e) {
|
|
4965
|
+
if (!it.href) e.preventDefault();
|
|
4966
|
+
st[1](it.id);
|
|
4967
|
+
}
|
|
4968
|
+
};
|
|
4969
|
+
const inner = [
|
|
4970
|
+
/* @__PURE__ */ React40.createElement("span", { key: "i", className: "aura-bottomnav__icon" }, /* @__PURE__ */ React40.createElement(Icon, { name: it.icon, size: "md" }), count ? /* @__PURE__ */ React40.createElement("span", { className: "aura-bottomnav__count", "aria-hidden": "true" }, count) : it.badge ? /* @__PURE__ */ React40.createElement("span", { className: "aura-bottomnav__dot", "aria-hidden": "true" }) : null),
|
|
4971
|
+
/* @__PURE__ */ React40.createElement("span", { key: "l", className: "aura-bottomnav__label" }, it.label),
|
|
4972
|
+
count || it.badge && it.badgeLabel ? /* @__PURE__ */ React40.createElement("span", { key: "s", className: "aura-sr-only" }, " (" + (count || it.badgeLabel) + ")") : null
|
|
4973
|
+
];
|
|
4974
|
+
return /* @__PURE__ */ React40.createElement("li", { key: it.id, className: "aura-bottomnav__cell" }, it.href ? /* @__PURE__ */ React40.createElement(Link, { href: it.href, ...common }, inner) : /* @__PURE__ */ React40.createElement("button", { type: "button", ...common }, inner));
|
|
4975
|
+
}))
|
|
4976
|
+
));
|
|
4977
|
+
});
|
|
4978
|
+
|
|
4979
|
+
// src/Surface.tsx
|
|
4980
|
+
var React41 = __toESM(require("react"), 1);
|
|
4981
|
+
var h8 = React41.createElement;
|
|
4982
|
+
var Surface = React41.forwardRef(function Surface2(props, ref) {
|
|
4707
4983
|
const t = props.texture || "mesh";
|
|
4708
4984
|
const rest = omit(props, ["texture", "className", "children", "as"]);
|
|
4709
4985
|
return h8(
|
|
@@ -4724,8 +5000,8 @@ var Surface = React39.forwardRef(function Surface2(props, ref) {
|
|
|
4724
5000
|
});
|
|
4725
5001
|
|
|
4726
5002
|
// src/Stat.tsx
|
|
4727
|
-
var
|
|
4728
|
-
var Stat =
|
|
5003
|
+
var React42 = __toESM(require("react"), 1);
|
|
5004
|
+
var Stat = React42.forwardRef(function Stat2(props, ref) {
|
|
4729
5005
|
const ch = props.change;
|
|
4730
5006
|
const dir = ch && (ch.direction || "flat");
|
|
4731
5007
|
const tone2 = ch && (ch.tone || (dir === "up" ? "positive" : dir === "down" ? "negative" : "neutral"));
|
|
@@ -4734,7 +5010,7 @@ var Stat = React40.forwardRef(function Stat2(props, ref) {
|
|
|
4734
5010
|
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, ""));
|
|
4735
5011
|
const Tag3 = props.href ? Link : props.onClick ? "button" : "div";
|
|
4736
5012
|
const interactive = !!(props.href || props.onClick);
|
|
4737
|
-
return /* @__PURE__ */
|
|
5013
|
+
return /* @__PURE__ */ React42.createElement(
|
|
4738
5014
|
Tag3,
|
|
4739
5015
|
{
|
|
4740
5016
|
ref,
|
|
@@ -4744,15 +5020,15 @@ var Stat = React40.forwardRef(function Stat2(props, ref) {
|
|
|
4744
5020
|
type: Tag3 === "button" ? "button" : void 0,
|
|
4745
5021
|
"aria-busy": props.loading || void 0
|
|
4746
5022
|
},
|
|
4747
|
-
/* @__PURE__ */
|
|
4748
|
-
props.loading ? /* @__PURE__ */
|
|
4749
|
-
ch && !props.loading || props.caption ? /* @__PURE__ */
|
|
5023
|
+
/* @__PURE__ */ React42.createElement("span", { className: "aura-stat__head" }, /* @__PURE__ */ React42.createElement("span", { className: "aura-stat__label" }, props.label), props.icon ? /* @__PURE__ */ React42.createElement("span", { className: "aura-stat__icon" }, /* @__PURE__ */ React42.createElement(Icon, { name: props.icon })) : null),
|
|
5024
|
+
props.loading ? /* @__PURE__ */ React42.createElement("span", { className: "aura-stat__value" }, /* @__PURE__ */ React42.createElement("span", { className: "aura-skel aura-stat__skel" })) : /* @__PURE__ */ React42.createElement("span", { className: cx("aura-stat__value", numeric && "is-numeric") }, props.value, props.unit ? /* @__PURE__ */ React42.createElement("span", { className: "aura-stat__unit" }, props.unit) : null),
|
|
5025
|
+
ch && !props.loading || props.caption ? /* @__PURE__ */ React42.createElement("span", { className: "aura-stat__foot" }, ch && !props.loading ? /* @__PURE__ */ React42.createElement("span", { className: cx("aura-stat__change", "is-" + tone2) }, /* @__PURE__ */ React42.createElement(Icon, { name: dir === "up" ? "trending-up" : dir === "down" ? "trending-down" : "minus", size: 14 }), /* @__PURE__ */ React42.createElement("span", null, ch.value)) : null, ch && ch.label && !props.loading ? /* @__PURE__ */ React42.createElement("span", { className: "aura-stat__caption" }, ch.label) : null, props.caption ? /* @__PURE__ */ React42.createElement("span", { className: "aura-stat__caption" }, props.caption) : null) : null
|
|
4750
5026
|
);
|
|
4751
5027
|
});
|
|
4752
5028
|
|
|
4753
5029
|
// src/TimePicker.tsx
|
|
4754
|
-
var
|
|
4755
|
-
var
|
|
5030
|
+
var React43 = __toESM(require("react"), 1);
|
|
5031
|
+
var import_react_dom10 = require("react-dom");
|
|
4756
5032
|
|
|
4757
5033
|
// src/text.ts
|
|
4758
5034
|
function formatBytes(n2) {
|
|
@@ -4792,7 +5068,7 @@ function toMin(t) {
|
|
|
4792
5068
|
function fromMin(n2) {
|
|
4793
5069
|
return pad3(Math.floor(n2 / 60)) + ":" + pad3(n2 % 60);
|
|
4794
5070
|
}
|
|
4795
|
-
var TimePicker =
|
|
5071
|
+
var TimePicker = React43.forwardRef(function TimePicker2(props, ref) {
|
|
4796
5072
|
const t = useStrings();
|
|
4797
5073
|
const auto = uid(), id = props.id || auto, listId = id + "-list";
|
|
4798
5074
|
const st = useMaybeControlled(
|
|
@@ -4802,7 +5078,7 @@ var TimePicker = React41.forwardRef(function TimePicker2(props, ref) {
|
|
|
4802
5078
|
);
|
|
4803
5079
|
const value = st[0];
|
|
4804
5080
|
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;
|
|
4805
|
-
const slots =
|
|
5081
|
+
const slots = React43.useMemo(
|
|
4806
5082
|
function() {
|
|
4807
5083
|
const out = [];
|
|
4808
5084
|
for (let m = lo; m <= hi; m += step) out.push(fromMin(m));
|
|
@@ -4814,12 +5090,12 @@ var TimePicker = React41.forwardRef(function TimePicker2(props, ref) {
|
|
|
4814
5090
|
const n2 = toMin(v);
|
|
4815
5091
|
return n2 == null || n2 < lo || n2 > hi || props.isTimeDisabled && props.isTimeDisabled(v);
|
|
4816
5092
|
}
|
|
4817
|
-
const openState =
|
|
4818
|
-
const editState =
|
|
4819
|
-
const aState =
|
|
4820
|
-
const errState =
|
|
4821
|
-
const pos =
|
|
4822
|
-
const boxRef =
|
|
5093
|
+
const openState = React43.useState(false), open = openState[0], setOpen = openState[1];
|
|
5094
|
+
const editState = React43.useState(null), editing = editState[0], setEditing = editState[1];
|
|
5095
|
+
const aState = React43.useState(0), active = aState[0], setActive = aState[1];
|
|
5096
|
+
const errState = React43.useState(null);
|
|
5097
|
+
const pos = React43.useState(null);
|
|
5098
|
+
const boxRef = React43.useRef(null), inputRef = React43.useRef(null), listRef = React43.useRef(null), inputMerged = useMergedRef(ref, inputRef);
|
|
4823
5099
|
const mounted = useMounted();
|
|
4824
5100
|
function nearest(v) {
|
|
4825
5101
|
const n2 = toMin(v);
|
|
@@ -4847,7 +5123,7 @@ var TimePicker = React41.forwardRef(function TimePicker2(props, ref) {
|
|
|
4847
5123
|
},
|
|
4848
5124
|
[open]
|
|
4849
5125
|
);
|
|
4850
|
-
|
|
5126
|
+
React43.useEffect(
|
|
4851
5127
|
function() {
|
|
4852
5128
|
if (!open) return;
|
|
4853
5129
|
function outside(e) {
|
|
@@ -4869,7 +5145,7 @@ var TimePicker = React41.forwardRef(function TimePicker2(props, ref) {
|
|
|
4869
5145
|
},
|
|
4870
5146
|
[open]
|
|
4871
5147
|
);
|
|
4872
|
-
|
|
5148
|
+
React43.useEffect(
|
|
4873
5149
|
function() {
|
|
4874
5150
|
if (!open || !listRef.current) return;
|
|
4875
5151
|
const el = listRef.current.querySelector('[data-idx="' + active + '"]');
|
|
@@ -4966,10 +5242,10 @@ var TimePicker = React41.forwardRef(function TimePicker2(props, ref) {
|
|
|
4966
5242
|
}
|
|
4967
5243
|
}
|
|
4968
5244
|
const error = errState[0] || props.error;
|
|
4969
|
-
const list = open && mounted && pos[0] ? (0,
|
|
4970
|
-
/* @__PURE__ */
|
|
5245
|
+
const list = open && mounted && pos[0] ? (0, import_react_dom10.createPortal)(
|
|
5246
|
+
/* @__PURE__ */ React43.createElement("div", { ref: listRef, className: "aura-combo__popover aura-time__popover", style: pos[0] }, /* @__PURE__ */ React43.createElement("ul", { id: listId, role: "listbox", "aria-label": props.label, className: "aura-combo__list" }, slots.map(function(s, i) {
|
|
4971
5247
|
const dis = blocked(s), sel = s === value;
|
|
4972
|
-
return /* @__PURE__ */
|
|
5248
|
+
return /* @__PURE__ */ React43.createElement(
|
|
4973
5249
|
"li",
|
|
4974
5250
|
{
|
|
4975
5251
|
key: s,
|
|
@@ -4994,13 +5270,13 @@ var TimePicker = React41.forwardRef(function TimePicker2(props, ref) {
|
|
|
4994
5270
|
if (active !== i) setActive(i);
|
|
4995
5271
|
}
|
|
4996
5272
|
},
|
|
4997
|
-
/* @__PURE__ */
|
|
4998
|
-
sel ? /* @__PURE__ */
|
|
5273
|
+
/* @__PURE__ */ React43.createElement("span", { className: "aura-combo__label" }, s),
|
|
5274
|
+
sel ? /* @__PURE__ */ React43.createElement(Icon, { name: "check", className: "aura-combo__check" }) : null
|
|
4999
5275
|
);
|
|
5000
5276
|
}))),
|
|
5001
5277
|
document.body
|
|
5002
5278
|
) : null;
|
|
5003
|
-
return /* @__PURE__ */
|
|
5279
|
+
return /* @__PURE__ */ React43.createElement(
|
|
5004
5280
|
Field,
|
|
5005
5281
|
{
|
|
5006
5282
|
id,
|
|
@@ -5012,7 +5288,7 @@ var TimePicker = React41.forwardRef(function TimePicker2(props, ref) {
|
|
|
5012
5288
|
disabled: props.disabled,
|
|
5013
5289
|
className: props.className
|
|
5014
5290
|
},
|
|
5015
|
-
/* @__PURE__ */
|
|
5291
|
+
/* @__PURE__ */ React43.createElement("div", { ref: boxRef, className: cx("aura-input aura-combo aura-time has-icon", open && "is-open") }, /* @__PURE__ */ React43.createElement(Icon, { name: "clock", className: "aura-input__icon" }), /* @__PURE__ */ React43.createElement(
|
|
5016
5292
|
"input",
|
|
5017
5293
|
{
|
|
5018
5294
|
ref: inputMerged,
|
|
@@ -5052,7 +5328,7 @@ var TimePicker = React41.forwardRef(function TimePicker2(props, ref) {
|
|
|
5052
5328
|
}, 0);
|
|
5053
5329
|
}
|
|
5054
5330
|
}
|
|
5055
|
-
), props.clearable !== false && value != null && !props.disabled ? /* @__PURE__ */
|
|
5331
|
+
), props.clearable !== false && value != null && !props.disabled ? /* @__PURE__ */ React43.createElement(
|
|
5056
5332
|
"button",
|
|
5057
5333
|
{
|
|
5058
5334
|
type: "button",
|
|
@@ -5065,8 +5341,8 @@ var TimePicker = React41.forwardRef(function TimePicker2(props, ref) {
|
|
|
5065
5341
|
if (inputRef.current) inputRef.current.focus();
|
|
5066
5342
|
}
|
|
5067
5343
|
},
|
|
5068
|
-
/* @__PURE__ */
|
|
5069
|
-
) : null, /* @__PURE__ */
|
|
5344
|
+
/* @__PURE__ */ React43.createElement(Icon, { name: "x" })
|
|
5345
|
+
) : null, /* @__PURE__ */ React43.createElement(
|
|
5070
5346
|
"button",
|
|
5071
5347
|
{
|
|
5072
5348
|
type: "button",
|
|
@@ -5084,14 +5360,14 @@ var TimePicker = React41.forwardRef(function TimePicker2(props, ref) {
|
|
|
5084
5360
|
}
|
|
5085
5361
|
}
|
|
5086
5362
|
},
|
|
5087
|
-
/* @__PURE__ */
|
|
5363
|
+
/* @__PURE__ */ React43.createElement(Icon, { name: "chevron-down" })
|
|
5088
5364
|
)),
|
|
5089
5365
|
list
|
|
5090
5366
|
);
|
|
5091
5367
|
});
|
|
5092
5368
|
|
|
5093
5369
|
// src/FileUpload.tsx
|
|
5094
|
-
var
|
|
5370
|
+
var React44 = __toESM(require("react"), 1);
|
|
5095
5371
|
function matches(file, accept) {
|
|
5096
5372
|
if (!accept) return true;
|
|
5097
5373
|
const name = (file.name || "").toLowerCase(), type = (file.type || "").toLowerCase();
|
|
@@ -5115,17 +5391,17 @@ function describeAccept(accept, t) {
|
|
|
5115
5391
|
}).join(", ");
|
|
5116
5392
|
}
|
|
5117
5393
|
var seq = 0;
|
|
5118
|
-
var FileUpload =
|
|
5394
|
+
var FileUpload = React44.forwardRef(function FileUpload2(props, ref) {
|
|
5119
5395
|
const t = useStrings();
|
|
5120
5396
|
const auto = uid(), id = props.id || auto;
|
|
5121
5397
|
const st = useMaybeControlled(props.value, props.defaultValue || [], props.onChange);
|
|
5122
5398
|
const items2 = st[0] || [];
|
|
5123
|
-
const dragState =
|
|
5124
|
-
const inputRef =
|
|
5125
|
-
const urls =
|
|
5399
|
+
const dragState = React44.useState(false), over = dragState[0];
|
|
5400
|
+
const inputRef = React44.useRef(null), inputMerged = useMergedRef(ref, inputRef);
|
|
5401
|
+
const urls = React44.useRef({});
|
|
5126
5402
|
const maxFiles = props.multiple ? props.maxFiles : 1;
|
|
5127
5403
|
const note = t.accepts(describeAccept(props.accept, t), props.maxSize ? formatBytes(props.maxSize) : "");
|
|
5128
|
-
|
|
5404
|
+
React44.useEffect(function() {
|
|
5129
5405
|
return function() {
|
|
5130
5406
|
Object.keys(urls.current).forEach(function(k) {
|
|
5131
5407
|
URL.revokeObjectURL(urls.current[k]);
|
|
@@ -5176,7 +5452,7 @@ var FileUpload = React42.forwardRef(function FileUpload2(props, ref) {
|
|
|
5176
5452
|
if (inputRef.current) inputRef.current.focus();
|
|
5177
5453
|
}
|
|
5178
5454
|
const error = props.error;
|
|
5179
|
-
return /* @__PURE__ */
|
|
5455
|
+
return /* @__PURE__ */ React44.createElement(
|
|
5180
5456
|
Field,
|
|
5181
5457
|
{
|
|
5182
5458
|
id,
|
|
@@ -5188,7 +5464,7 @@ var FileUpload = React42.forwardRef(function FileUpload2(props, ref) {
|
|
|
5188
5464
|
disabled: props.disabled,
|
|
5189
5465
|
className: props.className
|
|
5190
5466
|
},
|
|
5191
|
-
/* @__PURE__ */
|
|
5467
|
+
/* @__PURE__ */ React44.createElement(
|
|
5192
5468
|
"div",
|
|
5193
5469
|
{
|
|
5194
5470
|
className: cx("aura-upload", over && "is-over", props.disabled && "is-disabled", error && "is-invalid"),
|
|
@@ -5209,9 +5485,9 @@ var FileUpload = React42.forwardRef(function FileUpload2(props, ref) {
|
|
|
5209
5485
|
add(e.dataTransfer && e.dataTransfer.files);
|
|
5210
5486
|
}
|
|
5211
5487
|
},
|
|
5212
|
-
/* @__PURE__ */
|
|
5213
|
-
/* @__PURE__ */
|
|
5214
|
-
/* @__PURE__ */
|
|
5488
|
+
/* @__PURE__ */ React44.createElement(Icon, { name: "cloud-upload", size: "lg", className: "aura-upload__icon" }),
|
|
5489
|
+
/* @__PURE__ */ React44.createElement("span", { className: "aura-upload__text" }, t.dropFiles, " "),
|
|
5490
|
+
/* @__PURE__ */ React44.createElement(
|
|
5215
5491
|
"input",
|
|
5216
5492
|
{
|
|
5217
5493
|
ref: inputMerged,
|
|
@@ -5233,12 +5509,12 @@ var FileUpload = React42.forwardRef(function FileUpload2(props, ref) {
|
|
|
5233
5509
|
}
|
|
5234
5510
|
}
|
|
5235
5511
|
),
|
|
5236
|
-
/* @__PURE__ */
|
|
5237
|
-
note ? /* @__PURE__ */
|
|
5512
|
+
/* @__PURE__ */ React44.createElement("span", { className: "aura-upload__browse", "aria-hidden": true }, props.multiple ? t.browse : t.browseOne),
|
|
5513
|
+
note ? /* @__PURE__ */ React44.createElement("span", { className: "aura-upload__note", id: id + "-note" }, note) : null
|
|
5238
5514
|
),
|
|
5239
|
-
items2.length ? /* @__PURE__ */
|
|
5515
|
+
items2.length ? /* @__PURE__ */ React44.createElement("ul", { className: "aura-upload__list", "aria-live": "polite" }, items2.map(function(it) {
|
|
5240
5516
|
const src = thumb(it);
|
|
5241
|
-
return /* @__PURE__ */
|
|
5517
|
+
return /* @__PURE__ */ React44.createElement("li", { key: it.id, className: cx("aura-upload__item", it.error && "is-error") }, src ? /* @__PURE__ */ React44.createElement("img", { className: "aura-upload__thumb", src, alt: "" }) : /* @__PURE__ */ React44.createElement("span", { className: "aura-upload__thumb is-icon", "aria-hidden": true }, /* @__PURE__ */ React44.createElement(Icon, { name: /^image\//.test(it.type || "") ? "image" : "file", size: "md" })), /* @__PURE__ */ React44.createElement("span", { className: "aura-upload__meta" }, /* @__PURE__ */ React44.createElement("span", { className: "aura-upload__name" }, it.name), /* @__PURE__ */ React44.createElement("span", { className: "aura-upload__sub" }, it.error ? /* @__PURE__ */ React44.createElement(React44.Fragment, null, /* @__PURE__ */ React44.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__ */ React44.createElement(React44.Fragment, null, /* @__PURE__ */ React44.createElement(Icon, { name: "circle-check", size: 12 }), formatBytes(it.size)) : formatBytes(it.size)), it.status === "uploading" ? /* @__PURE__ */ React44.createElement(
|
|
5242
5518
|
"span",
|
|
5243
5519
|
{
|
|
5244
5520
|
className: "aura-upload__bar",
|
|
@@ -5248,8 +5524,8 @@ var FileUpload = React42.forwardRef(function FileUpload2(props, ref) {
|
|
|
5248
5524
|
"aria-valuemax": 100,
|
|
5249
5525
|
"aria-valuenow": it.progress != null ? Math.round(it.progress) : void 0
|
|
5250
5526
|
},
|
|
5251
|
-
/* @__PURE__ */
|
|
5252
|
-
) : null), /* @__PURE__ */
|
|
5527
|
+
/* @__PURE__ */ React44.createElement("span", { style: { width: (it.progress || 0) + "%" } })
|
|
5528
|
+
) : null), /* @__PURE__ */ React44.createElement(
|
|
5253
5529
|
IconButton,
|
|
5254
5530
|
{
|
|
5255
5531
|
icon: "x",
|
|
@@ -5535,9 +5811,9 @@ function createTheme(opts) {
|
|
|
5535
5811
|
}
|
|
5536
5812
|
|
|
5537
5813
|
// src/ThemeStyle.tsx
|
|
5538
|
-
var
|
|
5814
|
+
var React45 = __toESM(require("react"), 1);
|
|
5539
5815
|
function ThemeStyle(props) {
|
|
5540
|
-
const css =
|
|
5816
|
+
const css = React45.useMemo(
|
|
5541
5817
|
function() {
|
|
5542
5818
|
return createTheme({ brand: props.brand, signal: props.signal, primary: props.primary, name: props.name }).css(
|
|
5543
5819
|
props.selector
|
|
@@ -5545,11 +5821,11 @@ function ThemeStyle(props) {
|
|
|
5545
5821
|
},
|
|
5546
5822
|
[props.brand, props.signal, props.primary, props.name, props.selector]
|
|
5547
5823
|
);
|
|
5548
|
-
return /* @__PURE__ */
|
|
5824
|
+
return /* @__PURE__ */ React45.createElement("style", { "data-aura-theme": props.name || props.brand, dangerouslySetInnerHTML: { __html: css } });
|
|
5549
5825
|
}
|
|
5550
5826
|
|
|
5551
5827
|
// src/colorScheme.tsx
|
|
5552
|
-
var
|
|
5828
|
+
var React46 = __toESM(require("react"), 1);
|
|
5553
5829
|
|
|
5554
5830
|
// src/colorSchemeScript.ts
|
|
5555
5831
|
var DEFAULT_KEY = "aura-color-scheme";
|
|
@@ -5566,7 +5842,7 @@ function colorSchemeScript(options) {
|
|
|
5566
5842
|
|
|
5567
5843
|
// src/colorScheme.tsx
|
|
5568
5844
|
function ColorSchemeScript(props) {
|
|
5569
|
-
return /* @__PURE__ */
|
|
5845
|
+
return /* @__PURE__ */ React46.createElement(
|
|
5570
5846
|
"script",
|
|
5571
5847
|
{
|
|
5572
5848
|
"data-aura-color-scheme": "",
|
|
@@ -5591,7 +5867,7 @@ function apply(scheme) {
|
|
|
5591
5867
|
function useColorScheme(options) {
|
|
5592
5868
|
const key = options && options.storageKey || DEFAULT_KEY;
|
|
5593
5869
|
const fallback = options && options.defaultScheme || "system";
|
|
5594
|
-
const subscribe2 =
|
|
5870
|
+
const subscribe2 = React46.useCallback(
|
|
5595
5871
|
function(cb) {
|
|
5596
5872
|
const mq = window.matchMedia ? window.matchMedia("(prefers-color-scheme: dark)") : null;
|
|
5597
5873
|
function onSystem() {
|
|
@@ -5609,7 +5885,7 @@ function useColorScheme(options) {
|
|
|
5609
5885
|
},
|
|
5610
5886
|
[fallback]
|
|
5611
5887
|
);
|
|
5612
|
-
const snapshot =
|
|
5888
|
+
const snapshot = React46.useSyncExternalStore(
|
|
5613
5889
|
subscribe2,
|
|
5614
5890
|
function() {
|
|
5615
5891
|
const s = readScheme(fallback);
|
|
@@ -5620,7 +5896,7 @@ function useColorScheme(options) {
|
|
|
5620
5896
|
}
|
|
5621
5897
|
);
|
|
5622
5898
|
const parts = snapshot.split("|");
|
|
5623
|
-
const setScheme =
|
|
5899
|
+
const setScheme = React46.useCallback(
|
|
5624
5900
|
function(next) {
|
|
5625
5901
|
if (!valid(next)) return;
|
|
5626
5902
|
try {
|
|
@@ -5639,11 +5915,11 @@ function ColorSchemeToggle(props) {
|
|
|
5639
5915
|
const cs = useColorScheme(props);
|
|
5640
5916
|
const names = { light: t.schemeLight, dark: t.schemeDark, system: t.schemeSystem };
|
|
5641
5917
|
const label = props.label || t.colorScheme;
|
|
5642
|
-
return /* @__PURE__ */
|
|
5918
|
+
return /* @__PURE__ */ React46.createElement(
|
|
5643
5919
|
DropdownMenu,
|
|
5644
5920
|
{
|
|
5645
5921
|
label,
|
|
5646
|
-
trigger: /* @__PURE__ */
|
|
5922
|
+
trigger: /* @__PURE__ */ React46.createElement(IconButton, { icon: cs.resolved === "dark" ? "moon" : "sun", label: label + ": " + names[cs.scheme] }),
|
|
5647
5923
|
items: SCHEMES.map(function(s) {
|
|
5648
5924
|
return {
|
|
5649
5925
|
label: names[s],
|
|
@@ -5658,10 +5934,10 @@ function ColorSchemeToggle(props) {
|
|
|
5658
5934
|
}
|
|
5659
5935
|
|
|
5660
5936
|
// src/Badge.tsx
|
|
5661
|
-
var
|
|
5662
|
-
var Badge =
|
|
5937
|
+
var React47 = __toESM(require("react"), 1);
|
|
5938
|
+
var Badge = React47.forwardRef(function Badge2(props, ref) {
|
|
5663
5939
|
const rest = omit(props, ["tone", "variant", "icon", "className", "children"]);
|
|
5664
|
-
return /* @__PURE__ */
|
|
5940
|
+
return /* @__PURE__ */ React47.createElement(
|
|
5665
5941
|
"span",
|
|
5666
5942
|
{
|
|
5667
5943
|
...rest,
|
|
@@ -5674,19 +5950,19 @@ var Badge = React45.forwardRef(function Badge2(props, ref) {
|
|
|
5674
5950
|
props.className
|
|
5675
5951
|
)
|
|
5676
5952
|
},
|
|
5677
|
-
props.icon ? /* @__PURE__ */
|
|
5953
|
+
props.icon ? /* @__PURE__ */ React47.createElement(Icon, { name: props.icon, size: 12 }) : null,
|
|
5678
5954
|
props.children
|
|
5679
5955
|
);
|
|
5680
5956
|
});
|
|
5681
5957
|
|
|
5682
5958
|
// src/Progress.tsx
|
|
5683
|
-
var
|
|
5684
|
-
var Progress =
|
|
5959
|
+
var React48 = __toESM(require("react"), 1);
|
|
5960
|
+
var Progress = React48.forwardRef(function Progress2(props, ref) {
|
|
5685
5961
|
const auto = uid(), id = props.id || auto;
|
|
5686
5962
|
const max = props.max || 100, det = props.value != null;
|
|
5687
5963
|
const pct = det ? Math.max(0, Math.min(100, props.value / max * 100)) : 0;
|
|
5688
5964
|
const shown = props.valueLabel != null ? props.valueLabel : det ? Math.round(pct) + "%" : null;
|
|
5689
|
-
return /* @__PURE__ */
|
|
5965
|
+
return /* @__PURE__ */ React48.createElement(
|
|
5690
5966
|
"div",
|
|
5691
5967
|
{
|
|
5692
5968
|
ref,
|
|
@@ -5697,8 +5973,8 @@ var Progress = React46.forwardRef(function Progress2(props, ref) {
|
|
|
5697
5973
|
props.className
|
|
5698
5974
|
)
|
|
5699
5975
|
},
|
|
5700
|
-
props.label || props.showValue && shown ? /* @__PURE__ */
|
|
5701
|
-
/* @__PURE__ */
|
|
5976
|
+
props.label || props.showValue && shown ? /* @__PURE__ */ React48.createElement("div", { className: "aura-progress__head" }, props.label ? /* @__PURE__ */ React48.createElement("span", { className: "aura-progress__label", id: id + "-label" }, props.label) : /* @__PURE__ */ React48.createElement("span", null), props.showValue && shown ? /* @__PURE__ */ React48.createElement("span", { className: "aura-progress__value" }, shown) : null) : null,
|
|
5977
|
+
/* @__PURE__ */ React48.createElement(
|
|
5702
5978
|
"div",
|
|
5703
5979
|
{
|
|
5704
5980
|
className: cx("aura-progress__track", !det && "is-indeterminate"),
|
|
@@ -5710,21 +5986,21 @@ var Progress = React46.forwardRef(function Progress2(props, ref) {
|
|
|
5710
5986
|
"aria-valuenow": det ? props.value : void 0,
|
|
5711
5987
|
"aria-valuetext": det && props.valueLabel != null ? String(props.valueLabel) : void 0
|
|
5712
5988
|
},
|
|
5713
|
-
/* @__PURE__ */
|
|
5989
|
+
/* @__PURE__ */ React48.createElement("span", { className: "aura-progress__bar", style: det ? { width: pct + "%" } : void 0 })
|
|
5714
5990
|
),
|
|
5715
|
-
props.hint ? /* @__PURE__ */
|
|
5991
|
+
props.hint ? /* @__PURE__ */ React48.createElement("p", { className: "aura-progress__hint" }, props.hint) : null
|
|
5716
5992
|
);
|
|
5717
5993
|
});
|
|
5718
5994
|
|
|
5719
5995
|
// src/Skeleton.tsx
|
|
5720
|
-
var
|
|
5721
|
-
var Skeleton =
|
|
5996
|
+
var React49 = __toESM(require("react"), 1);
|
|
5997
|
+
var Skeleton = React49.forwardRef(function Skeleton2(props, ref) {
|
|
5722
5998
|
const v = props.variant || "text";
|
|
5723
5999
|
if (v === "text" && (props.lines || 1) > 1) {
|
|
5724
6000
|
const n2 = props.lines, rows = [];
|
|
5725
6001
|
for (let i = 0; i < n2; i++)
|
|
5726
|
-
rows.push(/* @__PURE__ */
|
|
5727
|
-
return /* @__PURE__ */
|
|
6002
|
+
rows.push(/* @__PURE__ */ React49.createElement("span", { key: i, className: "aura-skel aura-skel--text", style: { width: i === n2 - 1 ? "60%" : "100%" } }));
|
|
6003
|
+
return /* @__PURE__ */ React49.createElement(
|
|
5728
6004
|
"span",
|
|
5729
6005
|
{
|
|
5730
6006
|
ref,
|
|
@@ -5742,28 +6018,28 @@ var Skeleton = React47.forwardRef(function Skeleton2(props, ref) {
|
|
|
5742
6018
|
if (v === "circle") {
|
|
5743
6019
|
style.width = style.height = props.size || props.width || 40;
|
|
5744
6020
|
}
|
|
5745
|
-
return /* @__PURE__ */
|
|
6021
|
+
return /* @__PURE__ */ React49.createElement("span", { ref, "aria-hidden": true, className: cx("aura-skel", "aura-skel--" + v, props.className), style });
|
|
5746
6022
|
});
|
|
5747
6023
|
|
|
5748
6024
|
// src/EmptyState.tsx
|
|
5749
|
-
var
|
|
5750
|
-
var EmptyState =
|
|
6025
|
+
var React50 = __toESM(require("react"), 1);
|
|
6026
|
+
var EmptyState = React50.forwardRef(function EmptyState2(props, ref) {
|
|
5751
6027
|
const HT = "h" + (props.headingLevel || 3);
|
|
5752
|
-
return /* @__PURE__ */
|
|
6028
|
+
return /* @__PURE__ */ React50.createElement(
|
|
5753
6029
|
"div",
|
|
5754
6030
|
{
|
|
5755
6031
|
ref,
|
|
5756
6032
|
className: cx("aura-empty", props.size === "sm" && "is-sm", props.bordered && "is-bordered", props.className)
|
|
5757
6033
|
},
|
|
5758
|
-
/* @__PURE__ */
|
|
5759
|
-
/* @__PURE__ */
|
|
5760
|
-
props.description ? /* @__PURE__ */
|
|
5761
|
-
props.action ? /* @__PURE__ */
|
|
6034
|
+
/* @__PURE__ */ React50.createElement("span", { className: "aura-empty__icon", "aria-hidden": true }, /* @__PURE__ */ React50.createElement(Icon, { name: props.icon || "inbox", size: props.size === "sm" ? "md" : "lg" })),
|
|
6035
|
+
/* @__PURE__ */ React50.createElement(HT, { className: "aura-empty__title" }, props.title),
|
|
6036
|
+
props.description ? /* @__PURE__ */ React50.createElement("p", { className: "aura-empty__text" }, props.description) : null,
|
|
6037
|
+
props.action ? /* @__PURE__ */ React50.createElement("div", { className: "aura-empty__action" }, props.action) : null
|
|
5762
6038
|
);
|
|
5763
6039
|
});
|
|
5764
6040
|
|
|
5765
6041
|
// src/Pagination.tsx
|
|
5766
|
-
var
|
|
6042
|
+
var React51 = __toESM(require("react"), 1);
|
|
5767
6043
|
function pageList(page, count, sib) {
|
|
5768
6044
|
let out = [], lo = Math.max(2, page - sib), hi = Math.min(count - 1, page + sib);
|
|
5769
6045
|
if (page - sib <= 3) {
|
|
@@ -5783,7 +6059,7 @@ function pageList(page, count, sib) {
|
|
|
5783
6059
|
if (count > 1) out.push(count);
|
|
5784
6060
|
return out;
|
|
5785
6061
|
}
|
|
5786
|
-
var Pagination =
|
|
6062
|
+
var Pagination = React51.forwardRef(function Pagination2(props, ref) {
|
|
5787
6063
|
const t = useStrings();
|
|
5788
6064
|
const count = Math.max(1, props.pageCount || 1);
|
|
5789
6065
|
const st = useMaybeControlled(props.page, props.defaultPage || 1, props.onChange);
|
|
@@ -5802,7 +6078,7 @@ var Pagination = React49.forwardRef(function Pagination2(props, ref) {
|
|
|
5802
6078
|
},
|
|
5803
6079
|
extra
|
|
5804
6080
|
);
|
|
5805
|
-
return link ? /* @__PURE__ */
|
|
6081
|
+
return link ? /* @__PURE__ */ React51.createElement(
|
|
5806
6082
|
Link,
|
|
5807
6083
|
{
|
|
5808
6084
|
href: link(p),
|
|
@@ -5815,7 +6091,7 @@ var Pagination = React49.forwardRef(function Pagination2(props, ref) {
|
|
|
5815
6091
|
...common
|
|
5816
6092
|
},
|
|
5817
6093
|
label
|
|
5818
|
-
) : /* @__PURE__ */
|
|
6094
|
+
) : /* @__PURE__ */ React51.createElement(
|
|
5819
6095
|
"button",
|
|
5820
6096
|
{
|
|
5821
6097
|
type: "button",
|
|
@@ -5829,7 +6105,7 @@ var Pagination = React49.forwardRef(function Pagination2(props, ref) {
|
|
|
5829
6105
|
}
|
|
5830
6106
|
function arrow(p, icon, label, rel, disabled) {
|
|
5831
6107
|
if (!link || disabled)
|
|
5832
|
-
return /* @__PURE__ */
|
|
6108
|
+
return /* @__PURE__ */ React51.createElement(
|
|
5833
6109
|
IconButton,
|
|
5834
6110
|
{
|
|
5835
6111
|
icon,
|
|
@@ -5840,7 +6116,7 @@ var Pagination = React49.forwardRef(function Pagination2(props, ref) {
|
|
|
5840
6116
|
}
|
|
5841
6117
|
}
|
|
5842
6118
|
);
|
|
5843
|
-
return /* @__PURE__ */
|
|
6119
|
+
return /* @__PURE__ */ React51.createElement(
|
|
5844
6120
|
Link,
|
|
5845
6121
|
{
|
|
5846
6122
|
href: link(p),
|
|
@@ -5855,17 +6131,17 @@ var Pagination = React49.forwardRef(function Pagination2(props, ref) {
|
|
|
5855
6131
|
}
|
|
5856
6132
|
}
|
|
5857
6133
|
},
|
|
5858
|
-
/* @__PURE__ */
|
|
6134
|
+
/* @__PURE__ */ React51.createElement(Icon, { name: icon, size: "sm" })
|
|
5859
6135
|
);
|
|
5860
6136
|
}
|
|
5861
|
-
return /* @__PURE__ */
|
|
5862
|
-
return typeof p === "number" ? /* @__PURE__ */
|
|
5863
|
-
})), /* @__PURE__ */
|
|
6137
|
+
return /* @__PURE__ */ React51.createElement("nav", { ref, className: cx("aura-pagination", props.className), "aria-label": props.label || t.pagination }, arrow(page - 1, "chevron-left", t.prevPage, "prev", page <= 1), /* @__PURE__ */ React51.createElement("ol", { className: "aura-pagination__list" }, pageList(page, count, props.siblingCount == null ? 1 : props.siblingCount).map(function(p) {
|
|
6138
|
+
return typeof p === "number" ? /* @__PURE__ */ React51.createElement("li", { key: p }, item(p, p)) : /* @__PURE__ */ React51.createElement("li", { key: p, className: "aura-pagination__gap", "aria-hidden": true }, "\u2026");
|
|
6139
|
+
})), /* @__PURE__ */ React51.createElement("span", { className: "aura-pagination__compact", "aria-hidden": true }, t.page(page, count)), arrow(page + 1, "chevron-right", t.nextPage, "next", page >= count));
|
|
5864
6140
|
});
|
|
5865
6141
|
|
|
5866
6142
|
// src/Accordion.tsx
|
|
5867
|
-
var
|
|
5868
|
-
var Accordion =
|
|
6143
|
+
var React52 = __toESM(require("react"), 1);
|
|
6144
|
+
var Accordion = React52.forwardRef(function Accordion2(props, ref) {
|
|
5869
6145
|
const auto = uid(), base = props.id || auto;
|
|
5870
6146
|
const multiple = props.type === "multiple";
|
|
5871
6147
|
const st = useMaybeControlled(
|
|
@@ -5903,9 +6179,9 @@ var Accordion = React50.forwardRef(function Accordion2(props, ref) {
|
|
|
5903
6179
|
n2.focus();
|
|
5904
6180
|
}
|
|
5905
6181
|
}
|
|
5906
|
-
return /* @__PURE__ */
|
|
6182
|
+
return /* @__PURE__ */ React52.createElement("div", { ref, className: cx("aura-accordion", props.className), onKeyDown: onKey }, items2.map(function(it) {
|
|
5907
6183
|
const on = open.indexOf(it.id) >= 0, bid = base + "-btn-" + it.id, pid = base + "-panel-" + it.id;
|
|
5908
|
-
return /* @__PURE__ */
|
|
6184
|
+
return /* @__PURE__ */ React52.createElement("div", { key: it.id, className: cx("aura-accordion__item", on && "is-open") }, /* @__PURE__ */ React52.createElement(HT, { className: "aura-accordion__heading" }, /* @__PURE__ */ React52.createElement(
|
|
5909
6185
|
"button",
|
|
5910
6186
|
{
|
|
5911
6187
|
type: "button",
|
|
@@ -5917,16 +6193,16 @@ var Accordion = React50.forwardRef(function Accordion2(props, ref) {
|
|
|
5917
6193
|
toggle(it.id);
|
|
5918
6194
|
}
|
|
5919
6195
|
},
|
|
5920
|
-
it.icon ? /* @__PURE__ */
|
|
5921
|
-
/* @__PURE__ */
|
|
5922
|
-
/* @__PURE__ */
|
|
5923
|
-
)), /* @__PURE__ */
|
|
6196
|
+
it.icon ? /* @__PURE__ */ React52.createElement(Icon, { name: it.icon, className: "aura-accordion__lead" }) : null,
|
|
6197
|
+
/* @__PURE__ */ React52.createElement("span", { className: "aura-accordion__title" }, it.title, it.description ? /* @__PURE__ */ React52.createElement("span", { className: "aura-accordion__desc" }, it.description) : null),
|
|
6198
|
+
/* @__PURE__ */ React52.createElement(Icon, { name: "chevron-down", className: "aura-accordion__chevron" })
|
|
6199
|
+
)), /* @__PURE__ */ React52.createElement("div", { id: pid, role: "region", "aria-labelledby": bid, className: "aura-accordion__panel", hidden: !on }, it.content));
|
|
5924
6200
|
}));
|
|
5925
6201
|
});
|
|
5926
6202
|
|
|
5927
6203
|
// src/Popover.tsx
|
|
5928
|
-
var
|
|
5929
|
-
var
|
|
6204
|
+
var React53 = __toESM(require("react"), 1);
|
|
6205
|
+
var import_react_dom11 = require("react-dom");
|
|
5930
6206
|
function position(anchor, pop, placement) {
|
|
5931
6207
|
const r = anchor.getBoundingClientRect(), pw = pop.offsetWidth, ph = pop.offsetHeight, vw = window.innerWidth, vh = window.innerHeight, gap = 6;
|
|
5932
6208
|
let side = (placement || "bottom-start").split("-")[0], align = (placement || "bottom-start").split("-")[1] || "start";
|
|
@@ -5936,14 +6212,14 @@ function position(anchor, pop, placement) {
|
|
|
5936
6212
|
const left = align === "end" ? r.right - pw : align === "center" ? r.left + r.width / 2 - pw / 2 : r.left;
|
|
5937
6213
|
return { top: Math.max(8, top), left: Math.max(8, Math.min(left, vw - pw - 8)), side };
|
|
5938
6214
|
}
|
|
5939
|
-
var Popover =
|
|
6215
|
+
var Popover = React53.forwardRef(function Popover2(props, ref) {
|
|
5940
6216
|
const t = useStrings();
|
|
5941
6217
|
const density = useDensity();
|
|
5942
6218
|
const auto = uid(), id = props.id || auto;
|
|
5943
6219
|
const st = useMaybeControlled(props.open, !!props.defaultOpen, props.onOpenChange);
|
|
5944
6220
|
const open = !!st[0];
|
|
5945
|
-
const wrap =
|
|
5946
|
-
const pos =
|
|
6221
|
+
const wrap = React53.useRef(null), pop = React53.useRef(null), popMerged = useMergedRef(ref, pop);
|
|
6222
|
+
const pos = React53.useState(null), mounted = useMounted();
|
|
5947
6223
|
function trigger() {
|
|
5948
6224
|
return wrap.current && (wrap.current.querySelector('button, [role="button"], a, input') || wrap.current.firstElementChild);
|
|
5949
6225
|
}
|
|
@@ -5970,7 +6246,7 @@ var Popover = React51.forwardRef(function Popover2(props, ref) {
|
|
|
5970
6246
|
},
|
|
5971
6247
|
[open, mounted, props.placement]
|
|
5972
6248
|
);
|
|
5973
|
-
|
|
6249
|
+
React53.useEffect(
|
|
5974
6250
|
function() {
|
|
5975
6251
|
if (!open || !mounted) return;
|
|
5976
6252
|
if (props.autoFocus !== false && pop.current) {
|
|
@@ -5989,9 +6265,9 @@ var Popover = React51.forwardRef(function Popover2(props, ref) {
|
|
|
5989
6265
|
},
|
|
5990
6266
|
[open, mounted]
|
|
5991
6267
|
);
|
|
5992
|
-
const child =
|
|
5993
|
-
const panel = open && mounted ? (0,
|
|
5994
|
-
/* @__PURE__ */
|
|
6268
|
+
const child = React53.Children.only(props.trigger);
|
|
6269
|
+
const panel = open && mounted ? (0, import_react_dom11.createPortal)(
|
|
6270
|
+
/* @__PURE__ */ React53.createElement(
|
|
5995
6271
|
"div",
|
|
5996
6272
|
{
|
|
5997
6273
|
ref: popMerged,
|
|
@@ -6014,7 +6290,7 @@ var Popover = React51.forwardRef(function Popover2(props, ref) {
|
|
|
6014
6290
|
} else trapTab(e, pop.current);
|
|
6015
6291
|
}
|
|
6016
6292
|
},
|
|
6017
|
-
props.title ? /* @__PURE__ */
|
|
6293
|
+
props.title ? /* @__PURE__ */ React53.createElement("div", { className: "aura-popover__head" }, /* @__PURE__ */ React53.createElement("p", { className: "aura-popover__title", id: id + "-title" }, props.title), /* @__PURE__ */ React53.createElement(
|
|
6018
6294
|
IconButton,
|
|
6019
6295
|
{
|
|
6020
6296
|
icon: "x",
|
|
@@ -6024,7 +6300,7 @@ var Popover = React51.forwardRef(function Popover2(props, ref) {
|
|
|
6024
6300
|
}
|
|
6025
6301
|
}
|
|
6026
6302
|
)) : null,
|
|
6027
|
-
/* @__PURE__ */
|
|
6303
|
+
/* @__PURE__ */ React53.createElement("div", { className: "aura-popover__body" }, typeof props.children === "function" ? props.children({
|
|
6028
6304
|
close: function() {
|
|
6029
6305
|
close(true);
|
|
6030
6306
|
}
|
|
@@ -6032,7 +6308,7 @@ var Popover = React51.forwardRef(function Popover2(props, ref) {
|
|
|
6032
6308
|
),
|
|
6033
6309
|
document.body
|
|
6034
6310
|
) : null;
|
|
6035
|
-
return /* @__PURE__ */
|
|
6311
|
+
return /* @__PURE__ */ React53.createElement("span", { ref: wrap, className: "aura-popover-anchor" }, React53.cloneElement(child, {
|
|
6036
6312
|
onClick: function(e) {
|
|
6037
6313
|
if (child.props.onClick) child.props.onClick(e);
|
|
6038
6314
|
st[1](!open);
|
|
@@ -6044,7 +6320,7 @@ var Popover = React51.forwardRef(function Popover2(props, ref) {
|
|
|
6044
6320
|
});
|
|
6045
6321
|
|
|
6046
6322
|
// src/NumberField.tsx
|
|
6047
|
-
var
|
|
6323
|
+
var React54 = __toESM(require("react"), 1);
|
|
6048
6324
|
function decimalsOf(n2) {
|
|
6049
6325
|
const s = String(n2);
|
|
6050
6326
|
const i = s.indexOf(".");
|
|
@@ -6055,7 +6331,7 @@ function parse(text) {
|
|
|
6055
6331
|
if (!/^-?(\d+\.?\d*|\.\d+)$/.test(s)) return NaN;
|
|
6056
6332
|
return Number(s);
|
|
6057
6333
|
}
|
|
6058
|
-
var NumberField =
|
|
6334
|
+
var NumberField = React54.forwardRef(function NumberField2(props, ref) {
|
|
6059
6335
|
const t = useStrings();
|
|
6060
6336
|
const auto = uid(), id = props.id || auto;
|
|
6061
6337
|
const step = props.step || 1;
|
|
@@ -6066,7 +6342,7 @@ var NumberField = React52.forwardRef(function NumberField2(props, ref) {
|
|
|
6066
6342
|
props.onChange
|
|
6067
6343
|
);
|
|
6068
6344
|
const value = st[0], setValue = st[1];
|
|
6069
|
-
const draftState =
|
|
6345
|
+
const draftState = React54.useState(null), draft = draftState[0], setDraft = draftState[1];
|
|
6070
6346
|
function fmt2(n2) {
|
|
6071
6347
|
if (n2 == null || isNaN(n2)) return "";
|
|
6072
6348
|
return n2.toLocaleString("en", { minimumFractionDigits: decimals, maximumFractionDigits: decimals });
|
|
@@ -6115,7 +6391,7 @@ var NumberField = React52.forwardRef(function NumberField2(props, ref) {
|
|
|
6115
6391
|
};
|
|
6116
6392
|
const valueText = value == null ? void 0 : [affixText(props.prefix), fmt2(value), affixText(props.suffix)].join(" ").trim();
|
|
6117
6393
|
const stepper = props.stepper !== false && !props.readOnly;
|
|
6118
|
-
return /* @__PURE__ */
|
|
6394
|
+
return /* @__PURE__ */ React54.createElement(
|
|
6119
6395
|
Field,
|
|
6120
6396
|
{
|
|
6121
6397
|
id,
|
|
@@ -6127,7 +6403,7 @@ var NumberField = React52.forwardRef(function NumberField2(props, ref) {
|
|
|
6127
6403
|
disabled: props.disabled,
|
|
6128
6404
|
className: props.className
|
|
6129
6405
|
},
|
|
6130
|
-
/* @__PURE__ */
|
|
6406
|
+
/* @__PURE__ */ React54.createElement("div", { className: cx("aura-input aura-number", stepper && "has-stepper") }, props.prefix != null ? /* @__PURE__ */ React54.createElement("span", { className: "aura-number__affix", "aria-hidden": true }, props.prefix) : null, /* @__PURE__ */ React54.createElement(
|
|
6131
6407
|
"input",
|
|
6132
6408
|
{
|
|
6133
6409
|
ref,
|
|
@@ -6174,7 +6450,7 @@ var NumberField = React52.forwardRef(function NumberField2(props, ref) {
|
|
|
6174
6450
|
},
|
|
6175
6451
|
onKeyDown
|
|
6176
6452
|
}
|
|
6177
|
-
), props.suffix != null ? /* @__PURE__ */
|
|
6453
|
+
), props.suffix != null ? /* @__PURE__ */ React54.createElement("span", { className: "aura-number__affix", "aria-hidden": true }, props.suffix) : null, stepper ? /* @__PURE__ */ React54.createElement("span", { className: "aura-number__steps" }, /* @__PURE__ */ React54.createElement(
|
|
6178
6454
|
"button",
|
|
6179
6455
|
{
|
|
6180
6456
|
type: "button",
|
|
@@ -6190,8 +6466,8 @@ var NumberField = React52.forwardRef(function NumberField2(props, ref) {
|
|
|
6190
6466
|
nudge(-step);
|
|
6191
6467
|
}
|
|
6192
6468
|
},
|
|
6193
|
-
/* @__PURE__ */
|
|
6194
|
-
), /* @__PURE__ */
|
|
6469
|
+
/* @__PURE__ */ React54.createElement(Icon, { name: "minus" })
|
|
6470
|
+
), /* @__PURE__ */ React54.createElement(
|
|
6195
6471
|
"button",
|
|
6196
6472
|
{
|
|
6197
6473
|
type: "button",
|
|
@@ -6207,14 +6483,14 @@ var NumberField = React52.forwardRef(function NumberField2(props, ref) {
|
|
|
6207
6483
|
nudge(step);
|
|
6208
6484
|
}
|
|
6209
6485
|
},
|
|
6210
|
-
/* @__PURE__ */
|
|
6486
|
+
/* @__PURE__ */ React54.createElement(Icon, { name: "plus" })
|
|
6211
6487
|
)) : null)
|
|
6212
6488
|
);
|
|
6213
6489
|
});
|
|
6214
6490
|
|
|
6215
6491
|
// src/Stepper.tsx
|
|
6216
|
-
var
|
|
6217
|
-
var Stepper =
|
|
6492
|
+
var React55 = __toESM(require("react"), 1);
|
|
6493
|
+
var Stepper = React55.forwardRef(function Stepper2(props, ref) {
|
|
6218
6494
|
const t = useStrings();
|
|
6219
6495
|
const steps = props.steps || [];
|
|
6220
6496
|
let at = -1;
|
|
@@ -6224,26 +6500,26 @@ var Stepper = React53.forwardRef(function Stepper2(props, ref) {
|
|
|
6224
6500
|
if (at < 0) at = 0;
|
|
6225
6501
|
const vertical = props.orientation === "vertical";
|
|
6226
6502
|
const cur = steps[at];
|
|
6227
|
-
return /* @__PURE__ */
|
|
6503
|
+
return /* @__PURE__ */ React55.createElement(
|
|
6228
6504
|
"nav",
|
|
6229
6505
|
{
|
|
6230
6506
|
ref,
|
|
6231
6507
|
"aria-label": props.label,
|
|
6232
6508
|
className: cx("aura-stepper", vertical ? "aura-stepper--vertical" : "aura-stepper--horizontal", props.className)
|
|
6233
6509
|
},
|
|
6234
|
-
/* @__PURE__ */
|
|
6510
|
+
/* @__PURE__ */ React55.createElement("ol", { className: "aura-stepper__list" }, steps.map(function(s, i) {
|
|
6235
6511
|
const state = i < at ? "done" : i === at ? "current" : "upcoming";
|
|
6236
|
-
const marker = /* @__PURE__ */
|
|
6237
|
-
const text = /* @__PURE__ */
|
|
6512
|
+
const marker = /* @__PURE__ */ React55.createElement("span", { className: "aura-stepper__marker", "aria-hidden": true }, state === "done" ? /* @__PURE__ */ React55.createElement(Icon, { name: "check" }) : i + 1);
|
|
6513
|
+
const text = /* @__PURE__ */ React55.createElement("span", { className: "aura-stepper__text" }, /* @__PURE__ */ React55.createElement("span", { className: "aura-stepper__label" }, s.label, state === "done" ? /* @__PURE__ */ React55.createElement("span", { className: "aura-sr-only" }, ", " + t.stepDone) : null), s.description ? /* @__PURE__ */ React55.createElement("span", { className: "aura-stepper__desc" }, s.description) : null);
|
|
6238
6514
|
const clickable = state === "done" && !!props.onStepClick;
|
|
6239
|
-
return /* @__PURE__ */
|
|
6515
|
+
return /* @__PURE__ */ React55.createElement(
|
|
6240
6516
|
"li",
|
|
6241
6517
|
{
|
|
6242
6518
|
key: s.id,
|
|
6243
6519
|
className: cx("aura-stepper__item", "is-" + state),
|
|
6244
6520
|
"aria-current": state === "current" ? "step" : void 0
|
|
6245
6521
|
},
|
|
6246
|
-
clickable ? /* @__PURE__ */
|
|
6522
|
+
clickable ? /* @__PURE__ */ React55.createElement(
|
|
6247
6523
|
"button",
|
|
6248
6524
|
{
|
|
6249
6525
|
type: "button",
|
|
@@ -6254,19 +6530,19 @@ var Stepper = React53.forwardRef(function Stepper2(props, ref) {
|
|
|
6254
6530
|
},
|
|
6255
6531
|
marker,
|
|
6256
6532
|
text
|
|
6257
|
-
) : /* @__PURE__ */
|
|
6533
|
+
) : /* @__PURE__ */ React55.createElement("span", { className: "aura-stepper__step" }, marker, text)
|
|
6258
6534
|
);
|
|
6259
6535
|
})),
|
|
6260
|
-
!vertical && cur ? /* @__PURE__ */
|
|
6536
|
+
!vertical && cur ? /* @__PURE__ */ React55.createElement("p", { className: "aura-stepper__compact", "aria-hidden": true }, /* @__PURE__ */ React55.createElement("span", { className: "aura-stepper__count" }, t.stepOf(at + 1, steps.length)), /* @__PURE__ */ React55.createElement("span", { className: "aura-stepper__compact-label" }, cur.label)) : null
|
|
6261
6537
|
);
|
|
6262
6538
|
});
|
|
6263
6539
|
|
|
6264
6540
|
// src/SegmentedControl.tsx
|
|
6265
|
-
var
|
|
6541
|
+
var React56 = __toESM(require("react"), 1);
|
|
6266
6542
|
function toOpt2(o) {
|
|
6267
6543
|
return typeof o === "object" ? o : { value: o, label: o };
|
|
6268
6544
|
}
|
|
6269
|
-
var SegmentedControl =
|
|
6545
|
+
var SegmentedControl = React56.forwardRef(
|
|
6270
6546
|
function SegmentedControl2(props, ref) {
|
|
6271
6547
|
const options = (props.options || []).map(toOpt2);
|
|
6272
6548
|
const firstEnabled = options.filter(function(o) {
|
|
@@ -6279,7 +6555,7 @@ var SegmentedControl = React54.forwardRef(
|
|
|
6279
6555
|
);
|
|
6280
6556
|
const value = st[0], setValue = st[1];
|
|
6281
6557
|
const auto = uid(), id = props.id || auto;
|
|
6282
|
-
const refs =
|
|
6558
|
+
const refs = React56.useRef([]);
|
|
6283
6559
|
const selIdx = options.findIndex(function(o) {
|
|
6284
6560
|
return o.value === value;
|
|
6285
6561
|
});
|
|
@@ -6312,7 +6588,7 @@ var SegmentedControl = React54.forwardRef(
|
|
|
6312
6588
|
move(options.length, -1);
|
|
6313
6589
|
}
|
|
6314
6590
|
}
|
|
6315
|
-
return /* @__PURE__ */
|
|
6591
|
+
return /* @__PURE__ */ React56.createElement(
|
|
6316
6592
|
"div",
|
|
6317
6593
|
{
|
|
6318
6594
|
ref,
|
|
@@ -6331,7 +6607,7 @@ var SegmentedControl = React54.forwardRef(
|
|
|
6331
6607
|
options.map(function(o, i) {
|
|
6332
6608
|
const on = o.value === value;
|
|
6333
6609
|
const off = props.disabled || o.disabled;
|
|
6334
|
-
return /* @__PURE__ */
|
|
6610
|
+
return /* @__PURE__ */ React56.createElement(
|
|
6335
6611
|
"button",
|
|
6336
6612
|
{
|
|
6337
6613
|
key: o.value,
|
|
@@ -6353,8 +6629,8 @@ var SegmentedControl = React54.forwardRef(
|
|
|
6353
6629
|
onKeyDown(e, i);
|
|
6354
6630
|
}
|
|
6355
6631
|
},
|
|
6356
|
-
o.icon ? /* @__PURE__ */
|
|
6357
|
-
o.iconOnly ? null : /* @__PURE__ */
|
|
6632
|
+
o.icon ? /* @__PURE__ */ React56.createElement(Icon, { name: o.icon }) : null,
|
|
6633
|
+
o.iconOnly ? null : /* @__PURE__ */ React56.createElement("span", null, o.label)
|
|
6358
6634
|
);
|
|
6359
6635
|
})
|
|
6360
6636
|
);
|