@apliteni/apliteni-ui 0.133.0 → 0.136.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/package.json +1 -1
- package/react/README.md +46 -1
- package/react/dist/index.d.ts +80 -3
- package/react/dist/index.js +917 -596
- package/src/components/feedback.js +6 -3
- package/src/components/footer.js +5 -3
- package/src/styles/button.css +1 -1
- package/src/styles/card.css +22 -5
- package/src/styles/feedback.css +4 -3
- package/src/styles/footer.css +4 -3
- package/src/styles/layout.css +4 -4
package/react/dist/index.js
CHANGED
|
@@ -282,24 +282,30 @@ var StatusDot = forwardRef5(function StatusDot2({
|
|
|
282
282
|
});
|
|
283
283
|
|
|
284
284
|
// src/primitives/Card.tsx
|
|
285
|
-
import {
|
|
286
|
-
|
|
285
|
+
import { icon as kitIcon, safeUrl } from "@apliteni/apliteni-ui";
|
|
286
|
+
import { Fragment, jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
287
|
+
function Card({ title, sub, level = 2, variant, pad: pad2, icon: icon8, href, className, children }) {
|
|
287
288
|
const n = Number(level);
|
|
288
|
-
const Heading = `h${[2, 3, 4, 5, 6].includes(n) ? n : 2}`;
|
|
289
|
+
const Heading = href != null ? "div" : `h${[2, 3, 4, 5, 6].includes(n) ? n : 2}`;
|
|
289
290
|
const titled = title != null && title !== false && title !== "";
|
|
290
|
-
|
|
291
|
-
|
|
291
|
+
const classes = ["ui-card", variant && `ui-card--${variant}`, pad2 && `ui-card--pad-${pad2}`, href != null && "ui-card--interactive", className].filter(Boolean).join(" ");
|
|
292
|
+
const inner = /* @__PURE__ */ jsxs5(Fragment, { children: [
|
|
293
|
+
titled && /* @__PURE__ */ jsxs5(Heading, { className: "ui-card__title", children: [
|
|
294
|
+
icon8 && /* @__PURE__ */ jsx9("span", { className: "ui-card__icon", "aria-hidden": "true", dangerouslySetInnerHTML: { __html: kitIcon(icon8) } }),
|
|
295
|
+
title
|
|
296
|
+
] }),
|
|
292
297
|
sub != null && /* @__PURE__ */ jsx9("div", { className: "ui-card__sub", children: sub }),
|
|
293
298
|
children
|
|
294
299
|
] });
|
|
300
|
+
return href != null ? /* @__PURE__ */ jsx9("a", { className: classes, href: safeUrl(href), children: inner }) : /* @__PURE__ */ jsx9("div", { className: classes, children: inner });
|
|
295
301
|
}
|
|
296
302
|
|
|
297
303
|
// src/primitives/Callout.tsx
|
|
298
|
-
import { calloutIcons, icon as
|
|
304
|
+
import { calloutIcons, icon as kitIcon2 } from "@apliteni/apliteni-ui";
|
|
299
305
|
import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
300
306
|
function Callout({ variant, icon: icon8 = calloutIcons[variant ?? "neutral"], children, actions }) {
|
|
301
307
|
return /* @__PURE__ */ jsxs6("div", { className: `ui-callout${variant && variant !== "neutral" ? ` ui-callout--${variant}` : ""}`, role: variant === "danger" ? "alert" : void 0, children: [
|
|
302
|
-
/* @__PURE__ */ jsx10("span", { className: "ui-callout__icon", dangerouslySetInnerHTML: { __html:
|
|
308
|
+
/* @__PURE__ */ jsx10("span", { className: "ui-callout__icon", dangerouslySetInnerHTML: { __html: kitIcon2(icon8) } }),
|
|
303
309
|
/* @__PURE__ */ jsxs6("div", { className: "ui-callout__body", children: [
|
|
304
310
|
children,
|
|
305
311
|
actions != null && /* @__PURE__ */ jsx10("div", { className: "ui-toolbar ui-callout__actions", children: actions })
|
|
@@ -351,7 +357,7 @@ function placeTip(host, mark, tip, bound, placement = "top") {
|
|
|
351
357
|
|
|
352
358
|
// src/Tooltip.tsx
|
|
353
359
|
import { useEffect, useId as useId2, useLayoutEffect as useLayoutEffect2, useRef as useRef2, useState as useState2 } from "react";
|
|
354
|
-
import { Fragment, jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
360
|
+
import { Fragment as Fragment2, jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
355
361
|
var DOC_EVENTS = ["pointerdown", "pointercancel", "click", "keydown", "touchend"];
|
|
356
362
|
var CAPTURED = /* @__PURE__ */ new Set(["pointerdown", "pointercancel"]);
|
|
357
363
|
var wirings = /* @__PURE__ */ new WeakMap();
|
|
@@ -378,7 +384,7 @@ function wireDocument(doc, handlers) {
|
|
|
378
384
|
wirings.delete(doc);
|
|
379
385
|
};
|
|
380
386
|
}
|
|
381
|
-
var
|
|
387
|
+
var Text2 = ({ label = "", value = "", detail: detail2 = "" }) => /* @__PURE__ */ jsxs7(Fragment2, { children: [
|
|
382
388
|
/* @__PURE__ */ jsx11("span", { className: "ui-tip__label", hidden: !label, children: label }),
|
|
383
389
|
/* @__PURE__ */ jsx11("span", { className: "ui-tip__value", hidden: !value, children: value }),
|
|
384
390
|
/* @__PURE__ */ jsx11("span", { className: "ui-tip__detail", hidden: !detail2, children: detail2 })
|
|
@@ -532,14 +538,14 @@ function Tooltip({ text: text2, label = text2, value, detail: detail2, placement
|
|
|
532
538
|
},
|
|
533
539
|
children: [
|
|
534
540
|
/* @__PURE__ */ jsx11("span", { ref: trigger, className: "ui-focusable", tabIndex: 0, "aria-describedby": id, children }),
|
|
535
|
-
/* @__PURE__ */ jsx11("span", { ref: tip, id, "data-tip": "", role: "tooltip", className: `ui-tip${open ? " is-open" : ""}`, children: /* @__PURE__ */ jsx11(
|
|
541
|
+
/* @__PURE__ */ jsx11("span", { ref: tip, id, "data-tip": "", role: "tooltip", className: `ui-tip${open ? " is-open" : ""}`, children: /* @__PURE__ */ jsx11(Text2, { label, value, detail: detail2 }) })
|
|
536
542
|
]
|
|
537
543
|
}
|
|
538
544
|
);
|
|
539
545
|
}
|
|
540
546
|
|
|
541
547
|
// src/primitives/StatBand.tsx
|
|
542
|
-
import { Fragment as
|
|
548
|
+
import { Fragment as Fragment3, jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
543
549
|
var GLYPH = { up: "arrowUp", down: "arrowDown", flat: "minus" };
|
|
544
550
|
var directionOf = (text2) => {
|
|
545
551
|
const t = text2.trim();
|
|
@@ -548,7 +554,7 @@ var directionOf = (text2) => {
|
|
|
548
554
|
var hasChange = (d) => !!d && d.value != null && d.value !== "";
|
|
549
555
|
function ContextRow({ caption, delta, basisId }) {
|
|
550
556
|
if (!hasChange(delta)) return caption ? /* @__PURE__ */ jsx12("dd", { className: "ui-stat__caption", children: caption }) : null;
|
|
551
|
-
const lead = caption ? /* @__PURE__ */ jsxs8(
|
|
557
|
+
const lead = caption ? /* @__PURE__ */ jsxs8(Fragment3, { children: [
|
|
552
558
|
/* @__PURE__ */ jsx12("span", { className: "ui-stat__caption", children: caption }),
|
|
553
559
|
" "
|
|
554
560
|
] }) : null;
|
|
@@ -558,7 +564,7 @@ function ContextRow({ caption, delta, basisId }) {
|
|
|
558
564
|
lead,
|
|
559
565
|
/* @__PURE__ */ jsx12(Icon, { name: GLYPH[dir] }),
|
|
560
566
|
delta.tooltip ? /* @__PURE__ */ jsx12(Tooltip, { text: delta.tooltip, children: /* @__PURE__ */ jsx12("span", { className: "ui-stat__change", children: delta.value }) }) : /* @__PURE__ */ jsx12("span", { className: "ui-stat__change", children: delta.value }),
|
|
561
|
-
own ? /* @__PURE__ */ jsxs8(
|
|
567
|
+
own ? /* @__PURE__ */ jsxs8(Fragment3, { children: [
|
|
562
568
|
" ",
|
|
563
569
|
/* @__PURE__ */ jsx12("span", { className: "ui-stat__basis", children: own })
|
|
564
570
|
] }) : null
|
|
@@ -677,10 +683,12 @@ function sync() {
|
|
|
677
683
|
else document.removeEventListener("keydown", onKey);
|
|
678
684
|
}
|
|
679
685
|
}
|
|
680
|
-
function returnFocus(opener) {
|
|
686
|
+
function returnFocus(opener, fallback) {
|
|
681
687
|
const live = opener && !opener.isConnected && opener.id ? document.getElementById(opener.id) : opener;
|
|
682
|
-
|
|
683
|
-
|
|
688
|
+
const visible = live?.isConnected && (!fallback || live instanceof HTMLElement && !live.closest('[hidden], [aria-hidden="true"], [inert]') && !live.matches(':disabled, [aria-disabled="true"]') && (typeof live.checkVisibility !== "function" || live.checkVisibility({ visibilityProperty: true })));
|
|
689
|
+
const target = visible ? live : fallback?.isConnected ? fallback : null;
|
|
690
|
+
if (target) target.focus?.();
|
|
691
|
+
if (document.activeElement !== target) document.activeElement?.blur?.();
|
|
684
692
|
}
|
|
685
693
|
function enter(entry) {
|
|
686
694
|
const at = stack.findIndex((e) => {
|
|
@@ -710,7 +718,7 @@ function exit(entry) {
|
|
|
710
718
|
if (above) return;
|
|
711
719
|
const next = stack[stack.length - 1];
|
|
712
720
|
if (!next) {
|
|
713
|
-
returnFocus(entry.opener);
|
|
721
|
+
returnFocus(entry.opener, entry.fallback);
|
|
714
722
|
return;
|
|
715
723
|
}
|
|
716
724
|
const back = [entry.opener, next.resume].find((el) => el?.isConnected && next.panel.contains(el));
|
|
@@ -766,7 +774,7 @@ function usePresence(open, root, panel) {
|
|
|
766
774
|
}, [open, present]);
|
|
767
775
|
return { mounted: present, shown };
|
|
768
776
|
}
|
|
769
|
-
function useDialog(active, { root, panel, body, initialFocus }, onClose) {
|
|
777
|
+
function useDialog(active, { root, panel, body, initialFocus, fallbackFocus }, onClose) {
|
|
770
778
|
const parent = useContext(DialogScope);
|
|
771
779
|
const [scope] = useState3(() => ({ parent }));
|
|
772
780
|
const close = useRef3(onClose);
|
|
@@ -783,6 +791,7 @@ function useDialog(active, { root, panel, body, initialFocus }, onClose) {
|
|
|
783
791
|
initialFocus: initialFocus?.current ?? null,
|
|
784
792
|
close: () => close.current(),
|
|
785
793
|
opener: document.activeElement,
|
|
794
|
+
fallback: fallbackFocus?.current ?? null,
|
|
786
795
|
resume: null
|
|
787
796
|
};
|
|
788
797
|
enter(entry);
|
|
@@ -829,7 +838,7 @@ function Modal({ open, title, onClose, footer, children, initialFocusRef, role =
|
|
|
829
838
|
}
|
|
830
839
|
|
|
831
840
|
// src/Confirm.tsx
|
|
832
|
-
import { Fragment as
|
|
841
|
+
import { Fragment as Fragment4, jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
|
|
833
842
|
function Confirm({
|
|
834
843
|
open,
|
|
835
844
|
title,
|
|
@@ -850,7 +859,7 @@ function Confirm({
|
|
|
850
859
|
onClose: onCancel,
|
|
851
860
|
role: "alertdialog",
|
|
852
861
|
initialFocusRef: safeAction,
|
|
853
|
-
footer: /* @__PURE__ */ jsxs10(
|
|
862
|
+
footer: /* @__PURE__ */ jsxs10(Fragment4, { children: [
|
|
854
863
|
/* @__PURE__ */ jsx14(Button, { ref: safeAction, variant: "ghost", onClick: onCancel, children: cancelLabel }),
|
|
855
864
|
/* @__PURE__ */ jsx14(Button, { variant: danger ? "danger" : "primary", busy, onClick: onConfirm, children: confirmLabel })
|
|
856
865
|
] }),
|
|
@@ -859,10 +868,250 @@ function Confirm({
|
|
|
859
868
|
);
|
|
860
869
|
}
|
|
861
870
|
|
|
862
|
-
// src/
|
|
863
|
-
import {
|
|
871
|
+
// src/Feedback.tsx
|
|
872
|
+
import { useEffect as useEffect3, useRef as useRef6, useState as useState4 } from "react";
|
|
864
873
|
import { createPortal as createPortal2 } from "react-dom";
|
|
865
|
-
import {
|
|
874
|
+
import { nearestSection } from "@apliteni/apliteni-ui";
|
|
875
|
+
import { Fragment as Fragment5, jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
|
|
876
|
+
var defaultSection = (h) => {
|
|
877
|
+
if (!h) return { label: "this page", title: "", anchor: "" };
|
|
878
|
+
const t = (h.textContent || "").replace(/\s+/g, " ").trim();
|
|
879
|
+
return { label: t, title: t, anchor: h.id || "" };
|
|
880
|
+
};
|
|
881
|
+
var RETURN_CONTROL = 'a[href], button:not(:disabled), input:not(:disabled), select:not(:disabled), textarea:not(:disabled), summary, [role="button"], [role="link"], [role="checkbox"], [role="switch"], [role="tab"], [contenteditable="true"]';
|
|
882
|
+
function Feedback({
|
|
883
|
+
container,
|
|
884
|
+
onSend,
|
|
885
|
+
minChars = 3,
|
|
886
|
+
section = defaultSection,
|
|
887
|
+
label = "Give feedback",
|
|
888
|
+
placeholder = "What's off, missing, or worth adding here?",
|
|
889
|
+
sentMessage = "Thanks, your note is sent."
|
|
890
|
+
}) {
|
|
891
|
+
const [pill, setPill] = useState4(null);
|
|
892
|
+
const [open, setOpen] = useState4(false);
|
|
893
|
+
const openRef = useRef6(false);
|
|
894
|
+
const [note, setNote] = useState4("");
|
|
895
|
+
const [state, setState] = useState4("ready");
|
|
896
|
+
const [error, setError] = useState4("");
|
|
897
|
+
const pending = useRef6(null);
|
|
898
|
+
const [view, setView] = useState4({ chip: "this page", quote: "" });
|
|
899
|
+
const mark = useRef6(null);
|
|
900
|
+
const opening = useRef6(0);
|
|
901
|
+
const pillRef = useRef6(null);
|
|
902
|
+
const root = useRef6(null);
|
|
903
|
+
const panel = useRef6(null);
|
|
904
|
+
const body = useRef6(null);
|
|
905
|
+
const noteRef = useRef6(null);
|
|
906
|
+
const doneClose = useRef6(null);
|
|
907
|
+
const opts = useRef6({ minChars, section });
|
|
908
|
+
opts.current = { minChars, section };
|
|
909
|
+
useEffect3(() => {
|
|
910
|
+
function onSelect() {
|
|
911
|
+
if (openRef.current) return;
|
|
912
|
+
const el = container.current;
|
|
913
|
+
const sel = window.getSelection();
|
|
914
|
+
if (!el || !sel || sel.isCollapsed || !sel.rangeCount) {
|
|
915
|
+
setPill(null);
|
|
916
|
+
return;
|
|
917
|
+
}
|
|
918
|
+
const range = sel.getRangeAt(0);
|
|
919
|
+
if (!el.contains(range.commonAncestorContainer)) {
|
|
920
|
+
setPill(null);
|
|
921
|
+
return;
|
|
922
|
+
}
|
|
923
|
+
const text2 = sel.toString().trim();
|
|
924
|
+
if (text2.length < opts.current.minChars) {
|
|
925
|
+
setPill(null);
|
|
926
|
+
return;
|
|
927
|
+
}
|
|
928
|
+
const rect = range.getBoundingClientRect();
|
|
929
|
+
if (!rect.width && !rect.height) return;
|
|
930
|
+
const s = opts.current.section(nearestSection(range.startContainer, el)) || {};
|
|
931
|
+
pending.current = { text: text2, anchor: s.anchor || "", label: s.label || "", title: s.title || "", range: range.cloneRange() };
|
|
932
|
+
setPill({ left: window.scrollX + rect.left + rect.width / 2, top: window.scrollY + rect.top });
|
|
933
|
+
}
|
|
934
|
+
const later = () => {
|
|
935
|
+
setTimeout(onSelect, 0);
|
|
936
|
+
};
|
|
937
|
+
const onKeyUp = (e) => {
|
|
938
|
+
if (e.shiftKey || e.key === "Shift") later();
|
|
939
|
+
};
|
|
940
|
+
const hide = () => {
|
|
941
|
+
if (!openRef.current) setPill(null);
|
|
942
|
+
};
|
|
943
|
+
const onMouseUp = (e) => {
|
|
944
|
+
const target = e.target;
|
|
945
|
+
if (target instanceof Node && (root.current?.contains(target) || pillRef.current?.contains(target))) return;
|
|
946
|
+
later();
|
|
947
|
+
};
|
|
948
|
+
document.addEventListener("mouseup", onMouseUp);
|
|
949
|
+
document.addEventListener("keyup", onKeyUp);
|
|
950
|
+
window.addEventListener("scroll", hide, { passive: true });
|
|
951
|
+
return () => {
|
|
952
|
+
document.removeEventListener("mouseup", onMouseUp);
|
|
953
|
+
document.removeEventListener("keyup", onKeyUp);
|
|
954
|
+
window.removeEventListener("scroll", hide);
|
|
955
|
+
};
|
|
956
|
+
}, [container]);
|
|
957
|
+
function clearMark() {
|
|
958
|
+
const m = mark.current;
|
|
959
|
+
mark.current = null;
|
|
960
|
+
const span = m?.span;
|
|
961
|
+
if (!m || !span?.parentNode) return;
|
|
962
|
+
const restoreRange = () => {
|
|
963
|
+
if (!m.start?.isConnected || !m.end?.isConnected) return;
|
|
964
|
+
const range = document.createRange();
|
|
965
|
+
range.setStart(m.start, m.startOffset);
|
|
966
|
+
range.setEnd(m.end, m.endOffset);
|
|
967
|
+
m.selection.range = range;
|
|
968
|
+
};
|
|
969
|
+
const kids = Array.from(span.childNodes);
|
|
970
|
+
const first = kids[0];
|
|
971
|
+
const last = kids[kids.length - 1];
|
|
972
|
+
if (m.start && m.start === m.end) {
|
|
973
|
+
const tail = span.nextSibling;
|
|
974
|
+
if (kids.length === 1 && first instanceof Text && span.previousSibling === m.start && tail instanceof Text) {
|
|
975
|
+
m.start.data += first.data + tail.data;
|
|
976
|
+
tail.remove();
|
|
977
|
+
span.remove();
|
|
978
|
+
restoreRange();
|
|
979
|
+
return;
|
|
980
|
+
}
|
|
981
|
+
} else {
|
|
982
|
+
if (m.start && first instanceof Text && span.previousSibling === m.start) {
|
|
983
|
+
m.start.data += first.data;
|
|
984
|
+
first.remove();
|
|
985
|
+
}
|
|
986
|
+
if (m.end && last instanceof Text && last !== first && span.nextSibling === m.end) {
|
|
987
|
+
m.end.data = last.data + m.end.data;
|
|
988
|
+
last.remove();
|
|
989
|
+
}
|
|
990
|
+
}
|
|
991
|
+
span.replaceWith(...Array.from(span.childNodes));
|
|
992
|
+
restoreRange();
|
|
993
|
+
}
|
|
994
|
+
useEffect3(() => () => {
|
|
995
|
+
opening.current++;
|
|
996
|
+
clearMark();
|
|
997
|
+
}, []);
|
|
998
|
+
const { mounted, shown } = usePresence(open, root, panel);
|
|
999
|
+
function close() {
|
|
1000
|
+
opening.current++;
|
|
1001
|
+
openRef.current = false;
|
|
1002
|
+
setOpen(false);
|
|
1003
|
+
clearMark();
|
|
1004
|
+
}
|
|
1005
|
+
useDialog(shown, { root, panel, body, initialFocus: noteRef, fallbackFocus: pillRef }, close);
|
|
1006
|
+
function start() {
|
|
1007
|
+
const p = pending.current;
|
|
1008
|
+
if (!p) return;
|
|
1009
|
+
opening.current++;
|
|
1010
|
+
openRef.current = true;
|
|
1011
|
+
const before = document.activeElement;
|
|
1012
|
+
if (!(before instanceof HTMLElement) || before.tabIndex < 0 || !before.matches(RETURN_CONTROL) || before.getAttribute("aria-disabled") === "true" || typeof before.checkVisibility === "function" && !before.checkVisibility({ visibilityProperty: true })) {
|
|
1013
|
+
pillRef.current?.focus({ preventScroll: true });
|
|
1014
|
+
}
|
|
1015
|
+
setView({ chip: p.label || "this page", quote: p.text.length > 200 ? `${p.text.slice(0, 200)}\u2026` : p.text });
|
|
1016
|
+
setNote("");
|
|
1017
|
+
setError("");
|
|
1018
|
+
setState("ready");
|
|
1019
|
+
try {
|
|
1020
|
+
const span = document.createElement("span");
|
|
1021
|
+
span.className = "ui-fbmark";
|
|
1022
|
+
const start2 = p.range.startContainer instanceof Text ? p.range.startContainer : null;
|
|
1023
|
+
const end = p.range.endContainer instanceof Text ? p.range.endContainer : null;
|
|
1024
|
+
const startOffset = p.range.startOffset;
|
|
1025
|
+
const endOffset = p.range.endOffset;
|
|
1026
|
+
p.range.surroundContents(span);
|
|
1027
|
+
mark.current = { span, start: start2, end, startOffset, endOffset, selection: p };
|
|
1028
|
+
} catch {
|
|
1029
|
+
mark.current = null;
|
|
1030
|
+
}
|
|
1031
|
+
window.getSelection()?.removeAllRanges();
|
|
1032
|
+
setOpen(true);
|
|
1033
|
+
}
|
|
1034
|
+
async function send() {
|
|
1035
|
+
const p = pending.current;
|
|
1036
|
+
if (state !== "ready" || !p || !note.trim()) return;
|
|
1037
|
+
const sentOpening = opening.current;
|
|
1038
|
+
setError("");
|
|
1039
|
+
setState("sending");
|
|
1040
|
+
try {
|
|
1041
|
+
const res = await onSend({ note: note.trim(), excerpt: p.text, anchor: p.anchor, sectionLabel: p.label, sectionTitle: p.title });
|
|
1042
|
+
if (opening.current !== sentOpening) return;
|
|
1043
|
+
if (!res || !res.ok) throw new Error(res?.error);
|
|
1044
|
+
clearMark();
|
|
1045
|
+
setState("sent");
|
|
1046
|
+
setTimeout(() => {
|
|
1047
|
+
if (opening.current === sentOpening) doneClose.current?.focus();
|
|
1048
|
+
}, 0);
|
|
1049
|
+
} catch (e) {
|
|
1050
|
+
if (opening.current !== sentOpening) return;
|
|
1051
|
+
setError(e instanceof Error && e.message || "Could not send just now \u2014 try again in a moment.");
|
|
1052
|
+
setState("ready");
|
|
1053
|
+
}
|
|
1054
|
+
}
|
|
1055
|
+
return createPortal2(/* @__PURE__ */ jsxs11(Fragment5, { children: [
|
|
1056
|
+
/* @__PURE__ */ jsxs11(
|
|
1057
|
+
"button",
|
|
1058
|
+
{
|
|
1059
|
+
ref: pillRef,
|
|
1060
|
+
type: "button",
|
|
1061
|
+
className: pill ? "ui-fbpill show" : "ui-fbpill",
|
|
1062
|
+
tabIndex: pill ? 0 : -1,
|
|
1063
|
+
"aria-hidden": pill ? void 0 : true,
|
|
1064
|
+
style: pill ?? void 0,
|
|
1065
|
+
onMouseDown: (e) => e.preventDefault(),
|
|
1066
|
+
onClick: start,
|
|
1067
|
+
children: [
|
|
1068
|
+
/* @__PURE__ */ jsx15("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ jsx15("path", { d: "M21 15a2 2 0 0 1-2 2H8l-4 4V5a2 2 0 0 1 2-2h13a2 2 0 0 1 2 2z" }) }),
|
|
1069
|
+
label
|
|
1070
|
+
]
|
|
1071
|
+
}
|
|
1072
|
+
),
|
|
1073
|
+
mounted && /* @__PURE__ */ jsxs11("div", { ref: root, children: [
|
|
1074
|
+
/* @__PURE__ */ jsx15("div", { className: shown ? "ui-fbscrim show" : "ui-fbscrim", onClick: close }),
|
|
1075
|
+
/* @__PURE__ */ jsx15("div", { ref: panel, className: shown ? "ui-fbcomposer show" : "ui-fbcomposer", role: "dialog", "aria-modal": "true", "aria-label": "Leave feedback", tabIndex: -1, children: state === "sent" ? /* @__PURE__ */ jsxs11("div", { className: "ui-fbc__done", ref: body, children: [
|
|
1076
|
+
/* @__PURE__ */ jsx15("p", { role: "status", children: sentMessage }),
|
|
1077
|
+
/* @__PURE__ */ jsx15("div", { className: "row", children: /* @__PURE__ */ jsx15(Button, { ref: doneClose, variant: "ghost", onClick: close, children: "Close" }) })
|
|
1078
|
+
] }) : /* @__PURE__ */ jsxs11("div", { ref: body, children: [
|
|
1079
|
+
/* @__PURE__ */ jsxs11("div", { className: "ui-fbc__head", children: [
|
|
1080
|
+
/* @__PURE__ */ jsxs11("span", { className: "ui-fbc__chip", children: [
|
|
1081
|
+
/* @__PURE__ */ jsx15("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ jsx15("path", { d: "M4 5h16M4 12h10M4 19h7" }) }),
|
|
1082
|
+
/* @__PURE__ */ jsx15("span", { children: view.chip })
|
|
1083
|
+
] }),
|
|
1084
|
+
/* @__PURE__ */ jsx15(Button, { variant: "ghost", size: "sm", iconOnly: true, icon: "x", "aria-label": "Close", style: { marginLeft: "auto" }, onClick: close })
|
|
1085
|
+
] }),
|
|
1086
|
+
/* @__PURE__ */ jsxs11("div", { className: "ui-fbc__quote", children: [
|
|
1087
|
+
/* @__PURE__ */ jsx15("span", { className: "ui-fbc__qm", children: "\u201C" }),
|
|
1088
|
+
/* @__PURE__ */ jsx15("q", { children: view.quote })
|
|
1089
|
+
] }),
|
|
1090
|
+
/* @__PURE__ */ jsx15("div", { className: "ui-fbc__body", children: /* @__PURE__ */ jsx15(
|
|
1091
|
+
"textarea",
|
|
1092
|
+
{
|
|
1093
|
+
ref: noteRef,
|
|
1094
|
+
maxLength: 6e3,
|
|
1095
|
+
value: note,
|
|
1096
|
+
placeholder,
|
|
1097
|
+
"aria-label": "Your note",
|
|
1098
|
+
onChange: (e) => setNote(e.target.value)
|
|
1099
|
+
}
|
|
1100
|
+
) }),
|
|
1101
|
+
error && /* @__PURE__ */ jsx15("div", { className: "ui-fbc__err show is-entering", role: "alert", children: error }),
|
|
1102
|
+
/* @__PURE__ */ jsxs11("div", { className: "ui-fbc__foot", children: [
|
|
1103
|
+
/* @__PURE__ */ jsx15(Button, { variant: "ghost", onClick: close, children: "Cancel" }),
|
|
1104
|
+
/* @__PURE__ */ jsx15(Button, { variant: "primary", busy: state === "sending", disabled: !note.trim(), onClick: send, children: "Send feedback" })
|
|
1105
|
+
] })
|
|
1106
|
+
] }) })
|
|
1107
|
+
] })
|
|
1108
|
+
] }), document.body);
|
|
1109
|
+
}
|
|
1110
|
+
|
|
1111
|
+
// src/Drawer.tsx
|
|
1112
|
+
import { useId as useId5, useRef as useRef7 } from "react";
|
|
1113
|
+
import { createPortal as createPortal3 } from "react-dom";
|
|
1114
|
+
import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
|
|
866
1115
|
function Drawer({
|
|
867
1116
|
open,
|
|
868
1117
|
title,
|
|
@@ -873,18 +1122,18 @@ function Drawer({
|
|
|
873
1122
|
children,
|
|
874
1123
|
closeLabel = "Close"
|
|
875
1124
|
}) {
|
|
876
|
-
const root =
|
|
877
|
-
const panel =
|
|
878
|
-
const body =
|
|
1125
|
+
const root = useRef7(null);
|
|
1126
|
+
const panel = useRef7(null);
|
|
1127
|
+
const body = useRef7(null);
|
|
879
1128
|
const titleId = useId5();
|
|
880
1129
|
const { mounted, shown } = usePresence(open, root, panel);
|
|
881
1130
|
const scope = useDialog(shown, { root, panel, body }, onClose);
|
|
882
1131
|
if (!mounted) return null;
|
|
883
1132
|
const cls = ["ui-drawer", `ui-drawer--${side}`, `ui-drawer--${size}`, shown && "is-open"].filter(Boolean).join(" ");
|
|
884
|
-
return
|
|
885
|
-
/* @__PURE__ */
|
|
886
|
-
/* @__PURE__ */
|
|
887
|
-
/* @__PURE__ */
|
|
1133
|
+
return createPortal3(
|
|
1134
|
+
/* @__PURE__ */ jsx16(DialogScope.Provider, { value: scope, children: /* @__PURE__ */ jsxs12("div", { className: cls, ref: root, children: [
|
|
1135
|
+
/* @__PURE__ */ jsx16("div", { className: "ui-drawer__scrim", onMouseDown: dismissOnScrim(onClose) }),
|
|
1136
|
+
/* @__PURE__ */ jsxs12(
|
|
888
1137
|
"aside",
|
|
889
1138
|
{
|
|
890
1139
|
className: "ui-drawer__panel",
|
|
@@ -894,12 +1143,12 @@ function Drawer({
|
|
|
894
1143
|
tabIndex: -1,
|
|
895
1144
|
ref: panel,
|
|
896
1145
|
children: [
|
|
897
|
-
/* @__PURE__ */
|
|
898
|
-
/* @__PURE__ */
|
|
899
|
-
/* @__PURE__ */
|
|
1146
|
+
/* @__PURE__ */ jsxs12("header", { className: "ui-drawer__header", children: [
|
|
1147
|
+
/* @__PURE__ */ jsx16("h2", { className: "ui-drawer__title", id: titleId, children: title }),
|
|
1148
|
+
/* @__PURE__ */ jsx16("button", { type: "button", className: "ui-drawer__close", "aria-label": closeLabel, onClick: onClose, children: /* @__PURE__ */ jsx16(Icon, { name: "x" }) })
|
|
900
1149
|
] }),
|
|
901
|
-
/* @__PURE__ */
|
|
902
|
-
footer && /* @__PURE__ */
|
|
1150
|
+
/* @__PURE__ */ jsx16("div", { className: "ui-drawer__body", ref: body, children }),
|
|
1151
|
+
footer && /* @__PURE__ */ jsx16("footer", { className: "ui-drawer__footer", children: footer })
|
|
903
1152
|
]
|
|
904
1153
|
}
|
|
905
1154
|
)
|
|
@@ -909,12 +1158,12 @@ function Drawer({
|
|
|
909
1158
|
}
|
|
910
1159
|
|
|
911
1160
|
// src/CommandPalette.tsx
|
|
912
|
-
import { useCallback as useCallback2, useEffect as
|
|
913
|
-
import { createPortal as
|
|
1161
|
+
import { useCallback as useCallback2, useEffect as useEffect4, useId as useId6, useMemo, useRef as useRef8, useState as useState5 } from "react";
|
|
1162
|
+
import { createPortal as createPortal4 } from "react-dom";
|
|
914
1163
|
import { rankGroups, icon as icon3 } from "@apliteni/apliteni-ui";
|
|
915
|
-
import { jsx as
|
|
1164
|
+
import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
916
1165
|
var cx2 = (...a) => a.filter(Boolean).join(" ");
|
|
917
|
-
var Glyph = ({ name, className }) => /* @__PURE__ */
|
|
1166
|
+
var Glyph = ({ name, className }) => /* @__PURE__ */ jsx17("span", { className, "aria-hidden": "true", dangerouslySetInnerHTML: { __html: icon3(name) } });
|
|
918
1167
|
var keysOf = (shortcut) => shortcut == null ? [] : Array.isArray(shortcut) ? shortcut : [shortcut];
|
|
919
1168
|
function CommandPalette({
|
|
920
1169
|
open,
|
|
@@ -930,12 +1179,12 @@ function CommandPalette({
|
|
|
930
1179
|
onQueryChange
|
|
931
1180
|
}) {
|
|
932
1181
|
const uid = useId6().replace(/:/g, "");
|
|
933
|
-
const root =
|
|
934
|
-
const panel =
|
|
935
|
-
const search =
|
|
936
|
-
const [query, setQuery] =
|
|
937
|
-
const [at, setAt] =
|
|
938
|
-
|
|
1182
|
+
const root = useRef8(null);
|
|
1183
|
+
const panel = useRef8(null);
|
|
1184
|
+
const search = useRef8(null);
|
|
1185
|
+
const [query, setQuery] = useState5("");
|
|
1186
|
+
const [at, setAt] = useState5(0);
|
|
1187
|
+
useEffect4(() => {
|
|
939
1188
|
if (open) {
|
|
940
1189
|
setQuery("");
|
|
941
1190
|
setAt(0);
|
|
@@ -947,7 +1196,7 @@ function CommandPalette({
|
|
|
947
1196
|
);
|
|
948
1197
|
const rows = useMemo(() => shown.flatMap((g) => g.items).filter((it) => !isDisabled(it)), [shown]);
|
|
949
1198
|
const active = rows[Math.min(at, rows.length - 1)];
|
|
950
|
-
|
|
1199
|
+
useEffect4(() => {
|
|
951
1200
|
setAt(0);
|
|
952
1201
|
}, [query]);
|
|
953
1202
|
const scope = useDialog(open, { root, panel, body: search }, onClose);
|
|
@@ -978,10 +1227,10 @@ function CommandPalette({
|
|
|
978
1227
|
if (!open) return null;
|
|
979
1228
|
const listId = `${uid}-list`;
|
|
980
1229
|
let n = 0;
|
|
981
|
-
return
|
|
982
|
-
/* @__PURE__ */
|
|
983
|
-
/* @__PURE__ */
|
|
984
|
-
/* @__PURE__ */
|
|
1230
|
+
return createPortal4(
|
|
1231
|
+
/* @__PURE__ */ jsx17(DialogScope.Provider, { value: scope, children: /* @__PURE__ */ jsxs13("div", { className: cx2("ui-cmdk", density === "roomy" && "ui-cmdk--roomy", "is-open"), ref: root, children: [
|
|
1232
|
+
/* @__PURE__ */ jsx17("div", { className: "ui-cmdk__scrim", onMouseDown: dismissOnScrim(onClose) }),
|
|
1233
|
+
/* @__PURE__ */ jsxs13(
|
|
985
1234
|
"div",
|
|
986
1235
|
{
|
|
987
1236
|
className: "ui-cmdk__panel",
|
|
@@ -992,9 +1241,9 @@ function CommandPalette({
|
|
|
992
1241
|
ref: panel,
|
|
993
1242
|
onKeyDown,
|
|
994
1243
|
children: [
|
|
995
|
-
/* @__PURE__ */
|
|
996
|
-
/* @__PURE__ */
|
|
997
|
-
/* @__PURE__ */
|
|
1244
|
+
/* @__PURE__ */ jsxs13("div", { className: "ui-cmdk__search", ref: search, children: [
|
|
1245
|
+
/* @__PURE__ */ jsx17(Glyph, { name: "search", className: "ui-cmdk__search-ic" }),
|
|
1246
|
+
/* @__PURE__ */ jsx17(
|
|
998
1247
|
"input",
|
|
999
1248
|
{
|
|
1000
1249
|
className: "ui-cmdk__input",
|
|
@@ -1016,19 +1265,19 @@ function CommandPalette({
|
|
|
1016
1265
|
}
|
|
1017
1266
|
)
|
|
1018
1267
|
] }),
|
|
1019
|
-
/* @__PURE__ */
|
|
1268
|
+
/* @__PURE__ */ jsx17("div", { className: "ui-cmdk__list", id: listId, role: "listbox", "aria-label": `${label} results`, children: shown.map((group, gi) => /* @__PURE__ */ jsxs13(
|
|
1020
1269
|
"div",
|
|
1021
1270
|
{
|
|
1022
1271
|
className: "ui-cmdk__group",
|
|
1023
1272
|
role: "group",
|
|
1024
1273
|
"aria-labelledby": group.label ? `${uid}-g${gi}` : void 0,
|
|
1025
1274
|
children: [
|
|
1026
|
-
group.label && /* @__PURE__ */
|
|
1275
|
+
group.label && /* @__PURE__ */ jsx17("div", { className: "ui-cmdk__group-head", id: `${uid}-g${gi}`, children: group.label }),
|
|
1027
1276
|
group.items.map((item) => {
|
|
1028
1277
|
const disabled = isDisabled(item);
|
|
1029
1278
|
const id = `${uid}-o${n++}`;
|
|
1030
1279
|
const on = item === active;
|
|
1031
|
-
return /* @__PURE__ */
|
|
1280
|
+
return /* @__PURE__ */ jsxs13(
|
|
1032
1281
|
"div",
|
|
1033
1282
|
{
|
|
1034
1283
|
id,
|
|
@@ -1048,13 +1297,13 @@ function CommandPalette({
|
|
|
1048
1297
|
},
|
|
1049
1298
|
onClick: (e) => run(item, e.metaKey || e.ctrlKey),
|
|
1050
1299
|
children: [
|
|
1051
|
-
item.icon && /* @__PURE__ */
|
|
1052
|
-
/* @__PURE__ */
|
|
1053
|
-
/* @__PURE__ */
|
|
1054
|
-
item.description && /* @__PURE__ */
|
|
1300
|
+
item.icon && /* @__PURE__ */ jsx17(Glyph, { name: item.icon, className: "ui-cmdk__ic" }),
|
|
1301
|
+
/* @__PURE__ */ jsxs13("span", { className: "ui-cmdk__main", children: [
|
|
1302
|
+
/* @__PURE__ */ jsx17("span", { className: "ui-cmdk__label", children: item.label }),
|
|
1303
|
+
item.description && /* @__PURE__ */ jsx17("span", { className: "ui-cmdk__desc", children: item.description })
|
|
1055
1304
|
] }),
|
|
1056
|
-
item.badge && /* @__PURE__ */
|
|
1057
|
-
keysOf(item.shortcut).length > 0 && /* @__PURE__ */
|
|
1305
|
+
item.badge && /* @__PURE__ */ jsx17("span", { className: "ui-cmdk__badge", children: item.badge }),
|
|
1306
|
+
keysOf(item.shortcut).length > 0 && /* @__PURE__ */ jsx17("span", { className: "ui-cmdk__keys", "aria-hidden": "true", children: keysOf(item.shortcut).map((k) => /* @__PURE__ */ jsx17("kbd", { className: "ui-cmdk__key", children: k }, k)) })
|
|
1058
1307
|
]
|
|
1059
1308
|
},
|
|
1060
1309
|
item.id
|
|
@@ -1064,20 +1313,20 @@ function CommandPalette({
|
|
|
1064
1313
|
},
|
|
1065
1314
|
group.label ?? `g${gi}`
|
|
1066
1315
|
)) }),
|
|
1067
|
-
/* @__PURE__ */
|
|
1068
|
-
/* @__PURE__ */
|
|
1069
|
-
hint && /* @__PURE__ */
|
|
1070
|
-
/* @__PURE__ */
|
|
1071
|
-
/* @__PURE__ */
|
|
1072
|
-
/* @__PURE__ */
|
|
1316
|
+
/* @__PURE__ */ jsx17("p", { className: "ui-cmdk__empty", hidden: countOf(shown) > 0, children: empty }),
|
|
1317
|
+
/* @__PURE__ */ jsx17("p", { className: "ui-sr", role: "status", "aria-live": "polite", children: countOf(shown) === 0 ? "No results" : `${countOf(shown)} result${countOf(shown) === 1 ? "" : "s"}` }),
|
|
1318
|
+
hint && /* @__PURE__ */ jsxs13("div", { className: "ui-cmdk__foot", "aria-hidden": "true", children: [
|
|
1319
|
+
/* @__PURE__ */ jsxs13("span", { children: [
|
|
1320
|
+
/* @__PURE__ */ jsx17("kbd", { className: "ui-cmdk__key", children: "\u2191" }),
|
|
1321
|
+
/* @__PURE__ */ jsx17("kbd", { className: "ui-cmdk__key", children: "\u2193" }),
|
|
1073
1322
|
" move"
|
|
1074
1323
|
] }),
|
|
1075
|
-
/* @__PURE__ */
|
|
1076
|
-
/* @__PURE__ */
|
|
1324
|
+
/* @__PURE__ */ jsxs13("span", { children: [
|
|
1325
|
+
/* @__PURE__ */ jsx17("kbd", { className: "ui-cmdk__key", children: "\u21B5" }),
|
|
1077
1326
|
" run"
|
|
1078
1327
|
] }),
|
|
1079
|
-
/* @__PURE__ */
|
|
1080
|
-
/* @__PURE__ */
|
|
1328
|
+
/* @__PURE__ */ jsxs13("span", { children: [
|
|
1329
|
+
/* @__PURE__ */ jsx17("kbd", { className: "ui-cmdk__key", children: "esc" }),
|
|
1081
1330
|
" close"
|
|
1082
1331
|
] })
|
|
1083
1332
|
] })
|
|
@@ -1102,13 +1351,13 @@ function rowId(uid, groups, item) {
|
|
|
1102
1351
|
}
|
|
1103
1352
|
|
|
1104
1353
|
// src/DataTable.tsx
|
|
1105
|
-
import { useCallback as useCallback3, useEffect as
|
|
1354
|
+
import { useCallback as useCallback3, useEffect as useEffect6, useMemo as useMemo2, useRef as useRef10, useState as useState7 } from "react";
|
|
1106
1355
|
import { DEFAULT_PAGE_SIZE as DEFAULT_PAGE_SIZE2 } from "@apliteni/apliteni-ui";
|
|
1107
1356
|
|
|
1108
1357
|
// src/Pagination.tsx
|
|
1109
|
-
import { useEffect as
|
|
1358
|
+
import { useEffect as useEffect5, useId as useId7, useRef as useRef9, useState as useState6 } from "react";
|
|
1110
1359
|
import { DEFAULT_PAGE_SIZE } from "@apliteni/apliteni-ui";
|
|
1111
|
-
import { jsx as
|
|
1360
|
+
import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
|
|
1112
1361
|
var GHOST_SM = "ui-btn ui-btn--ghost ui-btn--sm";
|
|
1113
1362
|
var VARIANTS = ["steps", "numbered", "jump"];
|
|
1114
1363
|
var cx3 = (...a) => a.filter(Boolean).join(" ");
|
|
@@ -1151,10 +1400,10 @@ function Pagination({
|
|
|
1151
1400
|
onPageSizeChange
|
|
1152
1401
|
}) {
|
|
1153
1402
|
const auto = useId7();
|
|
1154
|
-
const [draft, setDraft] =
|
|
1155
|
-
const [drafting, setDrafting] =
|
|
1156
|
-
const nav =
|
|
1157
|
-
const pressed =
|
|
1403
|
+
const [draft, setDraft] = useState6("");
|
|
1404
|
+
const [drafting, setDrafting] = useState6(false);
|
|
1405
|
+
const nav = useRef9(null);
|
|
1406
|
+
const pressed = useRef9(null);
|
|
1158
1407
|
const uid = id ?? auto;
|
|
1159
1408
|
const kind = VARIANTS.includes(variant) ? variant : "steps";
|
|
1160
1409
|
const size = sizeOf(pageSize, DEFAULT_PAGE_SIZE);
|
|
@@ -1163,7 +1412,7 @@ function Pagination({
|
|
|
1163
1412
|
const rows = counted ? Math.max(0, asRows) : null;
|
|
1164
1413
|
const last = counted ? Math.max(1, Math.ceil(rows / size)) : null;
|
|
1165
1414
|
const at = counted ? Math.min(Math.max(1, int(page, 1)), last) : Math.min(Math.max(1, int(page, 1)), CAP - 1);
|
|
1166
|
-
const [draftFor, setDraftFor] =
|
|
1415
|
+
const [draftFor, setDraftFor] = useState6(at);
|
|
1167
1416
|
if (draftFor !== at) {
|
|
1168
1417
|
setDraftFor(at);
|
|
1169
1418
|
setDraft("");
|
|
@@ -1171,7 +1420,7 @@ function Pagination({
|
|
|
1171
1420
|
}
|
|
1172
1421
|
const offered = (Array.isArray(pageSizes) ? pageSizes : []).slice(0, 12).map((s) => int(s, 0)).filter((s) => s > 0);
|
|
1173
1422
|
const sizes = offered.length ? [.../* @__PURE__ */ new Set([...offered, size])].sort((a, b) => a - b) : [];
|
|
1174
|
-
|
|
1423
|
+
useEffect5(() => {
|
|
1175
1424
|
const was = pressed.current;
|
|
1176
1425
|
if (!was || loading) return;
|
|
1177
1426
|
pressed.current = null;
|
|
@@ -1200,7 +1449,7 @@ function Pagination({
|
|
|
1200
1449
|
const step = (label_, target, disabled) => (
|
|
1201
1450
|
// A control at an end is disabled and stays where it is: removing it slides
|
|
1202
1451
|
// the next control under a pointer already travelling toward it.
|
|
1203
|
-
/* @__PURE__ */
|
|
1452
|
+
/* @__PURE__ */ jsx18(
|
|
1204
1453
|
"button",
|
|
1205
1454
|
{
|
|
1206
1455
|
type: "button",
|
|
@@ -1239,14 +1488,14 @@ function Pagination({
|
|
|
1239
1488
|
if (single) {
|
|
1240
1489
|
steps = null;
|
|
1241
1490
|
} else if (!counted) {
|
|
1242
|
-
steps = /* @__PURE__ */
|
|
1491
|
+
steps = /* @__PURE__ */ jsxs14("div", { className: "ui-pager__steps", children: [
|
|
1243
1492
|
step("Prev", Math.max(1, at - 1), atStart),
|
|
1244
1493
|
step("Next", at + 1, !hasMore)
|
|
1245
1494
|
] });
|
|
1246
1495
|
} else {
|
|
1247
1496
|
let middle = null;
|
|
1248
1497
|
if (kind === "numbered") {
|
|
1249
|
-
middle = slotsFor(at, last).map((n, i) => n == null ? /* @__PURE__ */
|
|
1498
|
+
middle = slotsFor(at, last).map((n, i) => n == null ? /* @__PURE__ */ jsx18("span", { className: "ui-pager__gap", "aria-hidden": "true", children: "\u2026" }, `gap${i}`) : /* @__PURE__ */ jsx18(
|
|
1250
1499
|
"button",
|
|
1251
1500
|
{
|
|
1252
1501
|
type: "button",
|
|
@@ -1261,9 +1510,9 @@ function Pagination({
|
|
|
1261
1510
|
n
|
|
1262
1511
|
));
|
|
1263
1512
|
} else if (kind === "jump") {
|
|
1264
|
-
middle = /* @__PURE__ */
|
|
1265
|
-
/* @__PURE__ */
|
|
1266
|
-
/* @__PURE__ */
|
|
1513
|
+
middle = /* @__PURE__ */ jsxs14("span", { className: "ui-pager__jump", children: [
|
|
1514
|
+
/* @__PURE__ */ jsx18("label", { htmlFor: `${uid}-jump`, children: "Page" }),
|
|
1515
|
+
/* @__PURE__ */ jsx18(
|
|
1267
1516
|
"input",
|
|
1268
1517
|
{
|
|
1269
1518
|
className: "ui-input ui-pager__jump-input",
|
|
@@ -1286,13 +1535,13 @@ function Pagination({
|
|
|
1286
1535
|
}
|
|
1287
1536
|
}
|
|
1288
1537
|
),
|
|
1289
|
-
/* @__PURE__ */
|
|
1538
|
+
/* @__PURE__ */ jsxs14("span", { className: "ui-pager__jump-of", children: [
|
|
1290
1539
|
"of ",
|
|
1291
1540
|
fmt(last)
|
|
1292
1541
|
] })
|
|
1293
1542
|
] });
|
|
1294
1543
|
}
|
|
1295
|
-
steps = /* @__PURE__ */
|
|
1544
|
+
steps = /* @__PURE__ */ jsxs14("div", { className: "ui-pager__steps", children: [
|
|
1296
1545
|
ends ? step("First", 1, atStart) : null,
|
|
1297
1546
|
step("Prev", Math.max(1, at - 1), atStart),
|
|
1298
1547
|
middle,
|
|
@@ -1300,7 +1549,7 @@ function Pagination({
|
|
|
1300
1549
|
ends ? step("Last", last, atEnd) : null
|
|
1301
1550
|
] });
|
|
1302
1551
|
}
|
|
1303
|
-
return /* @__PURE__ */
|
|
1552
|
+
return /* @__PURE__ */ jsxs14(
|
|
1304
1553
|
"nav",
|
|
1305
1554
|
{
|
|
1306
1555
|
ref: nav,
|
|
@@ -1308,10 +1557,10 @@ function Pagination({
|
|
|
1308
1557
|
"aria-label": label,
|
|
1309
1558
|
"aria-busy": loading ? true : void 0,
|
|
1310
1559
|
children: [
|
|
1311
|
-
/* @__PURE__ */
|
|
1312
|
-
sizes.length ? /* @__PURE__ */
|
|
1313
|
-
/* @__PURE__ */
|
|
1314
|
-
/* @__PURE__ */
|
|
1560
|
+
/* @__PURE__ */ jsx18("p", { className: "ui-pager__status", "aria-live": "polite", "aria-atomic": "true", children: status }),
|
|
1561
|
+
sizes.length ? /* @__PURE__ */ jsxs14("div", { className: "ui-pager__size", children: [
|
|
1562
|
+
/* @__PURE__ */ jsx18("label", { className: "ui-pager__size-label", htmlFor: `${uid}-size`, children: "Rows" }),
|
|
1563
|
+
/* @__PURE__ */ jsx18(
|
|
1315
1564
|
"select",
|
|
1316
1565
|
{
|
|
1317
1566
|
className: "ui-select ui-pager__size-select",
|
|
@@ -1319,7 +1568,7 @@ function Pagination({
|
|
|
1319
1568
|
disabled: loading,
|
|
1320
1569
|
value: size,
|
|
1321
1570
|
onChange: (e) => onPageSizeChange?.(Number(e.target.value)),
|
|
1322
|
-
children: sizes.map((s) => /* @__PURE__ */
|
|
1571
|
+
children: sizes.map((s) => /* @__PURE__ */ jsx18("option", { value: s, children: fmt(s) }, s))
|
|
1323
1572
|
}
|
|
1324
1573
|
)
|
|
1325
1574
|
] }) : null,
|
|
@@ -1330,7 +1579,7 @@ function Pagination({
|
|
|
1330
1579
|
}
|
|
1331
1580
|
|
|
1332
1581
|
// src/DataTable.tsx
|
|
1333
|
-
import { Fragment as
|
|
1582
|
+
import { Fragment as Fragment6, jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
1334
1583
|
var NO_SORT = { key: void 0, dir: -1 };
|
|
1335
1584
|
function sortTableRows(rows, sort) {
|
|
1336
1585
|
if (sort.key === void 0) return [...rows];
|
|
@@ -1366,14 +1615,14 @@ function DataTable({
|
|
|
1366
1615
|
hasMore = false
|
|
1367
1616
|
}) {
|
|
1368
1617
|
const scrollable = stickyHeader || pinnedIdentity;
|
|
1369
|
-
const table =
|
|
1370
|
-
const [pagerHost, setPagerHost] =
|
|
1618
|
+
const table = useRef10(null);
|
|
1619
|
+
const [pagerHost, setPagerHost] = useState7(null);
|
|
1371
1620
|
const holdPagerBox = useCallback3(
|
|
1372
1621
|
(box) => setPagerHost(box?.parentElement ?? null),
|
|
1373
1622
|
[]
|
|
1374
1623
|
);
|
|
1375
|
-
const [strip2, setStrip] =
|
|
1376
|
-
|
|
1624
|
+
const [strip2, setStrip] = useState7();
|
|
1625
|
+
useEffect6(() => {
|
|
1377
1626
|
const el = table.current;
|
|
1378
1627
|
const host = pagerHost;
|
|
1379
1628
|
if (!el || !host || typeof ResizeObserver === "undefined") {
|
|
@@ -1393,16 +1642,16 @@ function DataTable({
|
|
|
1393
1642
|
measure();
|
|
1394
1643
|
return () => observer.disconnect();
|
|
1395
1644
|
}, [pagerHost, columns, rows]);
|
|
1396
|
-
const [localSort, setLocalSort] =
|
|
1645
|
+
const [localSort, setLocalSort] = useState7(
|
|
1397
1646
|
{ key: columns.find((c) => c.sortable)?.key, dir: -1 }
|
|
1398
1647
|
);
|
|
1399
1648
|
const owned = controlledPage === void 0;
|
|
1400
1649
|
const sort = controlledSort ?? (owned ? localSort : NO_SORT);
|
|
1401
1650
|
const sortIsKnown = owned || controlledSort !== void 0;
|
|
1402
|
-
const [localPage, setLocalPage] =
|
|
1403
|
-
const [localSize, setLocalSize] =
|
|
1651
|
+
const [localPage, setLocalPage] = useState7(1);
|
|
1652
|
+
const [localSize, setLocalSize] = useState7(DEFAULT_PAGE_SIZE2);
|
|
1404
1653
|
const size = sizeOf(pageSize, owned ? localSize : rows.length || DEFAULT_PAGE_SIZE2);
|
|
1405
|
-
const [pagedSort, setPagedSort] =
|
|
1654
|
+
const [pagedSort, setPagedSort] = useState7(sort);
|
|
1406
1655
|
if (pagedSort.key !== sort.key || pagedSort.dir !== sort.dir) {
|
|
1407
1656
|
setPagedSort(sort);
|
|
1408
1657
|
setLocalPage(1);
|
|
@@ -1425,7 +1674,7 @@ function DataTable({
|
|
|
1425
1674
|
onSortChange?.(next);
|
|
1426
1675
|
toFirstPage();
|
|
1427
1676
|
};
|
|
1428
|
-
const caret = (k) => /* @__PURE__ */
|
|
1677
|
+
const caret = (k) => /* @__PURE__ */ jsx19(
|
|
1429
1678
|
"svg",
|
|
1430
1679
|
{
|
|
1431
1680
|
className: "rx-caret",
|
|
@@ -1437,31 +1686,31 @@ function DataTable({
|
|
|
1437
1686
|
strokeLinejoin: "round",
|
|
1438
1687
|
"aria-hidden": "true",
|
|
1439
1688
|
focusable: "false",
|
|
1440
|
-
children: sort.key === k ? /* @__PURE__ */
|
|
1441
|
-
/* @__PURE__ */
|
|
1442
|
-
/* @__PURE__ */
|
|
1689
|
+
children: sort.key === k ? /* @__PURE__ */ jsx19("path", { d: "m8 10 4 4 4-4" }) : /* @__PURE__ */ jsxs15(Fragment6, { children: [
|
|
1690
|
+
/* @__PURE__ */ jsx19("path", { d: "m8 9 4-4 4 4" }),
|
|
1691
|
+
/* @__PURE__ */ jsx19("path", { d: "m8 15 4 4 4-4" })
|
|
1443
1692
|
] })
|
|
1444
1693
|
}
|
|
1445
1694
|
);
|
|
1446
1695
|
const pageAllOn = selectable && slice.length > 0 && slice.every((r) => selected.has(r.name));
|
|
1447
1696
|
const pageSomeOn = selectable && !pageAllOn && slice.some((r) => selected.has(r.name));
|
|
1448
|
-
return /* @__PURE__ */
|
|
1449
|
-
/* @__PURE__ */
|
|
1697
|
+
return /* @__PURE__ */ jsxs15(Fragment6, { children: [
|
|
1698
|
+
/* @__PURE__ */ jsx19(
|
|
1450
1699
|
"div",
|
|
1451
1700
|
{
|
|
1452
1701
|
className: scrollable ? "ui-table-scroll" : void 0,
|
|
1453
1702
|
role: scrollable ? "region" : void 0,
|
|
1454
1703
|
"aria-label": scrollable ? scrollLabel : void 0,
|
|
1455
1704
|
tabIndex: scrollable ? 0 : void 0,
|
|
1456
|
-
children: /* @__PURE__ */
|
|
1705
|
+
children: /* @__PURE__ */ jsxs15(
|
|
1457
1706
|
"table",
|
|
1458
1707
|
{
|
|
1459
1708
|
ref: table,
|
|
1460
1709
|
className: ["ui-table ui-table--hover", (density === "dense" || !density && dense) && "ui-table--dense", density === "compact" && "ui-table--compact", stickyHeader && "ui-table--sticky", pinnedIdentity && "ui-table--pinned"].filter(Boolean).join(" "),
|
|
1461
1710
|
"aria-busy": loading || void 0,
|
|
1462
1711
|
children: [
|
|
1463
|
-
/* @__PURE__ */
|
|
1464
|
-
selectable ? /* @__PURE__ */
|
|
1712
|
+
/* @__PURE__ */ jsx19("thead", { children: /* @__PURE__ */ jsxs15("tr", { children: [
|
|
1713
|
+
selectable ? /* @__PURE__ */ jsx19("th", { scope: "col", className: "ui-table__selection", children: /* @__PURE__ */ jsx19(
|
|
1465
1714
|
"input",
|
|
1466
1715
|
{
|
|
1467
1716
|
type: "checkbox",
|
|
@@ -1477,7 +1726,7 @@ function DataTable({
|
|
|
1477
1726
|
// The sort control is a real <button> inside the header cell. It used to be
|
|
1478
1727
|
// role="button" ON the <th>, which threw away the columnheader role and put
|
|
1479
1728
|
// aria-sort on a role that forbids it.
|
|
1480
|
-
/* @__PURE__ */
|
|
1729
|
+
/* @__PURE__ */ jsx19(
|
|
1481
1730
|
"th",
|
|
1482
1731
|
{
|
|
1483
1732
|
scope: "col",
|
|
@@ -1487,8 +1736,8 @@ function DataTable({
|
|
|
1487
1736
|
// The label is its own box so it can truncate: in a pinned
|
|
1488
1737
|
// identity column on a phone the header is capped, and a bare
|
|
1489
1738
|
// text node would push the caret out of the cell instead.
|
|
1490
|
-
/* @__PURE__ */
|
|
1491
|
-
/* @__PURE__ */
|
|
1739
|
+
/* @__PURE__ */ jsxs15("button", { type: "button", className: "rx-sort", onClick: () => onSort(c.key), children: [
|
|
1740
|
+
/* @__PURE__ */ jsx19("span", { className: "rx-sort__label", children: c.label }),
|
|
1492
1741
|
caret(c.key)
|
|
1493
1742
|
] })
|
|
1494
1743
|
) : c.label
|
|
@@ -1497,10 +1746,10 @@ function DataTable({
|
|
|
1497
1746
|
)
|
|
1498
1747
|
))
|
|
1499
1748
|
] }) }),
|
|
1500
|
-
/* @__PURE__ */
|
|
1501
|
-
!slice.length && /* @__PURE__ */
|
|
1502
|
-
slice.map((r) => /* @__PURE__ */
|
|
1503
|
-
selectable ? /* @__PURE__ */
|
|
1749
|
+
/* @__PURE__ */ jsxs15("tbody", { children: [
|
|
1750
|
+
!slice.length && /* @__PURE__ */ jsx19("tr", { children: /* @__PURE__ */ jsx19("td", { colSpan: columns.length + (selectable ? 1 : 0), children: loading ? "Loading rows\u2026" : empty }) }),
|
|
1751
|
+
slice.map((r) => /* @__PURE__ */ jsxs15("tr", { children: [
|
|
1752
|
+
selectable ? /* @__PURE__ */ jsx19("td", { className: "ui-table__selection", children: /* @__PURE__ */ jsx19(
|
|
1504
1753
|
"input",
|
|
1505
1754
|
{
|
|
1506
1755
|
type: "checkbox",
|
|
@@ -1509,7 +1758,7 @@ function DataTable({
|
|
|
1509
1758
|
onChange: () => onToggle(r.name)
|
|
1510
1759
|
}
|
|
1511
1760
|
) }) : null,
|
|
1512
|
-
columns.map((c, columnIndex) => /* @__PURE__ */
|
|
1761
|
+
columns.map((c, columnIndex) => /* @__PURE__ */ jsx19("td", { className: [c.num && "ui-table__num", pinnedIdentity && columnIndex === 0 && "ui-table__identity", c.linked && "ui-table__linked"].filter(Boolean).join(" "), children: c.render ? c.render(r) : String(r[c.key]) }, c.key))
|
|
1513
1762
|
] }, r.name))
|
|
1514
1763
|
] })
|
|
1515
1764
|
]
|
|
@@ -1522,13 +1771,13 @@ function DataTable({
|
|
|
1522
1771
|
// The two are siblings, and no selector sizes one to the other, so the width is
|
|
1523
1772
|
// measured: a cap rather than a width, so a pager wider than the table wraps
|
|
1524
1773
|
// inside it and a table wider than the room still leaves the strip in the room.
|
|
1525
|
-
/* @__PURE__ */
|
|
1774
|
+
/* @__PURE__ */ jsx19(
|
|
1526
1775
|
"div",
|
|
1527
1776
|
{
|
|
1528
1777
|
className: "rx-table-pager",
|
|
1529
1778
|
ref: holdPagerBox,
|
|
1530
1779
|
style: strip2 ? { maxWidth: strip2.width, marginInlineStart: strip2.inset || void 0 } : void 0,
|
|
1531
|
-
children: /* @__PURE__ */
|
|
1780
|
+
children: /* @__PURE__ */ jsx19(
|
|
1532
1781
|
Pagination,
|
|
1533
1782
|
{
|
|
1534
1783
|
page,
|
|
@@ -1556,7 +1805,7 @@ function DataTable({
|
|
|
1556
1805
|
import { PAGE_SIZES as KIT_PAGE_SIZES, DEFAULT_PAGE_SIZE as KIT_DEFAULT_PAGE_SIZE } from "@apliteni/apliteni-ui";
|
|
1557
1806
|
|
|
1558
1807
|
// src/Loading.tsx
|
|
1559
|
-
import { jsx as
|
|
1808
|
+
import { jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
|
|
1560
1809
|
var cx4 = (...a) => a.filter(Boolean).join(" ");
|
|
1561
1810
|
function Skeleton({ lines = 3, width, height, radius, className }) {
|
|
1562
1811
|
const widths = Array.isArray(lines) ? lines : null;
|
|
@@ -1566,19 +1815,19 @@ function Skeleton({ lines = 3, width, height, radius, className }) {
|
|
|
1566
1815
|
if (!w && !height && !radius) return void 0;
|
|
1567
1816
|
return { ...w && { width: w }, ...height && { height }, ...radius && { borderRadius: radius } };
|
|
1568
1817
|
};
|
|
1569
|
-
return /* @__PURE__ */
|
|
1818
|
+
return /* @__PURE__ */ jsx20("div", { className: cx4("ui-skel", className), "aria-hidden": "true", children: Array.from({ length: n }, (_, i) => /* @__PURE__ */ jsx20("span", { className: "ui-skel__bar m-skeleton", style: styleFor(i) }, i)) });
|
|
1570
1819
|
}
|
|
1571
1820
|
function SkeletonTable({ rows = 5, cols = 4, head = true }) {
|
|
1572
|
-
const cells = Array.from({ length: Math.max(1, cols) }, (_, i) => /* @__PURE__ */
|
|
1573
|
-
return /* @__PURE__ */
|
|
1821
|
+
const cells = Array.from({ length: Math.max(1, cols) }, (_, i) => /* @__PURE__ */ jsx20("span", { className: "ui-skel__bar m-skeleton" }, i));
|
|
1822
|
+
return /* @__PURE__ */ jsxs16(
|
|
1574
1823
|
"div",
|
|
1575
1824
|
{
|
|
1576
1825
|
className: "ui-skel ui-skel--table",
|
|
1577
1826
|
style: { "--skel-cols": Math.max(1, cols) },
|
|
1578
1827
|
"aria-hidden": "true",
|
|
1579
1828
|
children: [
|
|
1580
|
-
head && /* @__PURE__ */
|
|
1581
|
-
Array.from({ length: Math.max(1, rows) }, (_, i) => /* @__PURE__ */
|
|
1829
|
+
head && /* @__PURE__ */ jsx20("div", { className: "ui-skel__row ui-skel__row--head", children: cells }),
|
|
1830
|
+
Array.from({ length: Math.max(1, rows) }, (_, i) => /* @__PURE__ */ jsx20("div", { className: "ui-skel__row", children: cells }, i))
|
|
1582
1831
|
]
|
|
1583
1832
|
}
|
|
1584
1833
|
);
|
|
@@ -1591,7 +1840,7 @@ function BusyRegion({
|
|
|
1591
1840
|
className,
|
|
1592
1841
|
children
|
|
1593
1842
|
}) {
|
|
1594
|
-
return /* @__PURE__ */
|
|
1843
|
+
return /* @__PURE__ */ jsxs16(
|
|
1595
1844
|
"div",
|
|
1596
1845
|
{
|
|
1597
1846
|
className: cx4("ui-busy", className),
|
|
@@ -1599,8 +1848,8 @@ function BusyRegion({
|
|
|
1599
1848
|
"aria-live": "polite",
|
|
1600
1849
|
"aria-busy": busy,
|
|
1601
1850
|
children: [
|
|
1602
|
-
/* @__PURE__ */
|
|
1603
|
-
/* @__PURE__ */
|
|
1851
|
+
/* @__PURE__ */ jsx20("span", { className: "ui-sr", children: busy ? label : message }),
|
|
1852
|
+
/* @__PURE__ */ jsx20("div", { className: "ui-busy__body", children: busy ? placeholder ?? /* @__PURE__ */ jsx20(Skeleton, { lines: 3 }) : children })
|
|
1604
1853
|
]
|
|
1605
1854
|
}
|
|
1606
1855
|
);
|
|
@@ -1613,27 +1862,27 @@ function Denied({
|
|
|
1613
1862
|
className,
|
|
1614
1863
|
children
|
|
1615
1864
|
}) {
|
|
1616
|
-
return /* @__PURE__ */
|
|
1617
|
-
/* @__PURE__ */
|
|
1618
|
-
/* @__PURE__ */
|
|
1619
|
-
sub && /* @__PURE__ */
|
|
1620
|
-
need && /* @__PURE__ */
|
|
1865
|
+
return /* @__PURE__ */ jsxs16("div", { className: cx4("ui-denied", className), children: [
|
|
1866
|
+
/* @__PURE__ */ jsx20("div", { className: "ui-denied__seal", children: /* @__PURE__ */ jsx20(Icon, { name: icon8 }) }),
|
|
1867
|
+
/* @__PURE__ */ jsx20("div", { className: "ui-denied__title", children: title }),
|
|
1868
|
+
sub && /* @__PURE__ */ jsx20("div", { className: "ui-denied__sub", children: sub }),
|
|
1869
|
+
need && /* @__PURE__ */ jsxs16("div", { className: "ui-denied__need", children: [
|
|
1621
1870
|
"Needs ",
|
|
1622
|
-
/* @__PURE__ */
|
|
1871
|
+
/* @__PURE__ */ jsx20("code", { className: "ui-code", children: need })
|
|
1623
1872
|
] }),
|
|
1624
|
-
children && /* @__PURE__ */
|
|
1873
|
+
children && /* @__PURE__ */ jsx20("div", { className: "ui-denied__actions", children })
|
|
1625
1874
|
] });
|
|
1626
1875
|
}
|
|
1627
1876
|
|
|
1628
1877
|
// src/DatePicker.tsx
|
|
1629
1878
|
import {
|
|
1630
1879
|
useCallback as useCallback4,
|
|
1631
|
-
useEffect as
|
|
1880
|
+
useEffect as useEffect7,
|
|
1632
1881
|
useMemo as useMemo3,
|
|
1633
|
-
useRef as
|
|
1634
|
-
useState as
|
|
1882
|
+
useRef as useRef11,
|
|
1883
|
+
useState as useState8
|
|
1635
1884
|
} from "react";
|
|
1636
|
-
import { jsx as
|
|
1885
|
+
import { jsx as jsx21, jsxs as jsxs17 } from "react/jsx-runtime";
|
|
1637
1886
|
var cx5 = (...a) => a.filter(Boolean).join(" ");
|
|
1638
1887
|
var pad = (n) => String(n).padStart(2, "0");
|
|
1639
1888
|
var DAY_MS = 864e5;
|
|
@@ -1642,8 +1891,8 @@ var MONTH_RE = /^(\d{4})-(\d{2})$/;
|
|
|
1642
1891
|
var DAY_RE = /^(\d{4})-(\d{2})-(\d{2})$/;
|
|
1643
1892
|
var PHONE_MAX = 560;
|
|
1644
1893
|
function usePhone() {
|
|
1645
|
-
const [phone, setPhone] =
|
|
1646
|
-
|
|
1894
|
+
const [phone, setPhone] = useState8(false);
|
|
1895
|
+
useEffect7(() => {
|
|
1647
1896
|
const query = typeof window === "undefined" ? null : window.matchMedia?.(`(max-width: ${PHONE_MAX}px)`);
|
|
1648
1897
|
if (!query) return;
|
|
1649
1898
|
const read = () => setPhone(query.matches);
|
|
@@ -1738,14 +1987,14 @@ function DatePicker({
|
|
|
1738
1987
|
const picksRange = mode === "range" || mode === "day-range";
|
|
1739
1988
|
const phone = usePhone();
|
|
1740
1989
|
const asSheet = sheet ?? phone;
|
|
1741
|
-
const root =
|
|
1742
|
-
const trigger =
|
|
1743
|
-
const grid =
|
|
1744
|
-
const [selfOpen, setSelfOpen] =
|
|
1990
|
+
const root = useRef11(null);
|
|
1991
|
+
const trigger = useRef11(null);
|
|
1992
|
+
const grid = useRef11(null);
|
|
1993
|
+
const [selfOpen, setSelfOpen] = useState8(defaultOpen);
|
|
1745
1994
|
const open = openProp ?? selfOpen;
|
|
1746
|
-
const [selfValue, setSelfValue] =
|
|
1995
|
+
const [selfValue, setSelfValue] = useState8(defaultValue);
|
|
1747
1996
|
const picked = value !== void 0 ? value : selfValue;
|
|
1748
|
-
const [selfRange, setSelfRange] =
|
|
1997
|
+
const [selfRange, setSelfRange] = useState8(defaultRange ?? { start: null, end: null });
|
|
1749
1998
|
const span = range !== void 0 ? range : selfRange;
|
|
1750
1999
|
const names = useMemo3(() => ({
|
|
1751
2000
|
month: new Intl.DateTimeFormat(locale, { month: "long", timeZone: "UTC" }),
|
|
@@ -1776,20 +2025,20 @@ function DatePicker({
|
|
|
1776
2025
|
return grain === "month" ? monthOf(now) : now;
|
|
1777
2026
|
}, [today, grain]);
|
|
1778
2027
|
const anchor = toIndex(picked, grain) ?? toIndex(picksRange ? span.start ?? span.end : null, grain) ?? todayIndex;
|
|
1779
|
-
const [cursor, setCursor] =
|
|
1780
|
-
const land =
|
|
2028
|
+
const [cursor, setCursor] = useState8(() => clamp(anchor, lo, hi));
|
|
2029
|
+
const land = useRef11(false);
|
|
1781
2030
|
const setOpen = useCallback4((next) => {
|
|
1782
2031
|
if (openProp === void 0) setSelfOpen(next);
|
|
1783
2032
|
onOpenChange?.(next);
|
|
1784
2033
|
}, [openProp, onOpenChange]);
|
|
1785
|
-
const close =
|
|
2034
|
+
const close = useRef11(setOpen);
|
|
1786
2035
|
useIsoLayoutEffect(() => {
|
|
1787
2036
|
close.current = setOpen;
|
|
1788
2037
|
});
|
|
1789
|
-
|
|
2038
|
+
useEffect7(() => {
|
|
1790
2039
|
if (open) setCursor(clamp(anchor, lo, hi));
|
|
1791
2040
|
}, [open]);
|
|
1792
|
-
|
|
2041
|
+
useEffect7(() => {
|
|
1793
2042
|
if (!open || asSheet) return;
|
|
1794
2043
|
const doc = root.current?.ownerDocument ?? document;
|
|
1795
2044
|
const onClick = (e) => {
|
|
@@ -1951,10 +2200,10 @@ function DatePicker({
|
|
|
1951
2200
|
}
|
|
1952
2201
|
const noneBefore = lo != null && first <= lo;
|
|
1953
2202
|
const noneAfter = hi != null && last >= hi;
|
|
1954
|
-
const calendar = /* @__PURE__ */
|
|
1955
|
-
picksRange && presets?.length ? /* @__PURE__ */
|
|
2203
|
+
const calendar = /* @__PURE__ */ jsxs17("div", { className: cx5("ui-datepicker__body", asSheet && "is-sheet"), children: [
|
|
2204
|
+
picksRange && presets?.length ? /* @__PURE__ */ jsx21("div", { className: "ui-datepicker__presets", role: "group", "aria-label": "Period shortcuts", children: presets.map((preset) => {
|
|
1956
2205
|
const within = allowed(preset);
|
|
1957
|
-
return /* @__PURE__ */
|
|
2206
|
+
return /* @__PURE__ */ jsx21(
|
|
1958
2207
|
"button",
|
|
1959
2208
|
{
|
|
1960
2209
|
type: "button",
|
|
@@ -1966,9 +2215,9 @@ function DatePicker({
|
|
|
1966
2215
|
preset.label
|
|
1967
2216
|
);
|
|
1968
2217
|
}) }) : null,
|
|
1969
|
-
/* @__PURE__ */
|
|
1970
|
-
/* @__PURE__ */
|
|
1971
|
-
/* @__PURE__ */
|
|
2218
|
+
/* @__PURE__ */ jsxs17("div", { className: "ui-datepicker__calendar", children: [
|
|
2219
|
+
/* @__PURE__ */ jsxs17("div", { className: "ui-datepicker__head", children: [
|
|
2220
|
+
/* @__PURE__ */ jsx21(
|
|
1972
2221
|
"button",
|
|
1973
2222
|
{
|
|
1974
2223
|
type: "button",
|
|
@@ -1976,11 +2225,11 @@ function DatePicker({
|
|
|
1976
2225
|
"aria-label": stepBack,
|
|
1977
2226
|
disabled: noneBefore,
|
|
1978
2227
|
onClick: () => stepPage(-1),
|
|
1979
|
-
children: /* @__PURE__ */
|
|
2228
|
+
children: /* @__PURE__ */ jsx21(Icon, { name: "chevronLeft" })
|
|
1980
2229
|
}
|
|
1981
2230
|
),
|
|
1982
|
-
/* @__PURE__ */
|
|
1983
|
-
/* @__PURE__ */
|
|
2231
|
+
/* @__PURE__ */ jsx21("span", { className: "ui-datepicker__caption", "aria-live": "polite", children: caption }),
|
|
2232
|
+
/* @__PURE__ */ jsx21(
|
|
1984
2233
|
"button",
|
|
1985
2234
|
{
|
|
1986
2235
|
type: "button",
|
|
@@ -1988,11 +2237,11 @@ function DatePicker({
|
|
|
1988
2237
|
"aria-label": stepOn,
|
|
1989
2238
|
disabled: noneAfter,
|
|
1990
2239
|
onClick: () => stepPage(1),
|
|
1991
|
-
children: /* @__PURE__ */
|
|
2240
|
+
children: /* @__PURE__ */ jsx21(Icon, { name: "chevronRight" })
|
|
1992
2241
|
}
|
|
1993
2242
|
)
|
|
1994
2243
|
] }),
|
|
1995
|
-
/* @__PURE__ */
|
|
2244
|
+
/* @__PURE__ */ jsxs17(
|
|
1996
2245
|
"div",
|
|
1997
2246
|
{
|
|
1998
2247
|
className: cx5("ui-datepicker__grid", grain === "day" && "is-days"),
|
|
@@ -2001,7 +2250,7 @@ function DatePicker({
|
|
|
2001
2250
|
ref: grid,
|
|
2002
2251
|
onKeyDown: onGridKeyDown,
|
|
2003
2252
|
children: [
|
|
2004
|
-
weekdays.length > 0 && /* @__PURE__ */
|
|
2253
|
+
weekdays.length > 0 && /* @__PURE__ */ jsx21("div", { className: "ui-datepicker__row", role: "row", children: weekdays.map((weekday) => /* @__PURE__ */ jsx21(
|
|
2005
2254
|
"span",
|
|
2006
2255
|
{
|
|
2007
2256
|
className: "ui-datepicker__weekday",
|
|
@@ -2011,13 +2260,13 @@ function DatePicker({
|
|
|
2011
2260
|
},
|
|
2012
2261
|
weekday.long
|
|
2013
2262
|
)) }),
|
|
2014
|
-
rows.map((cellsInRow, r) => /* @__PURE__ */
|
|
2263
|
+
rows.map((cellsInRow, r) => /* @__PURE__ */ jsx21("div", { className: "ui-datepicker__row", role: "row", children: cellsInRow.map((cell, c) => cell ? /* @__PURE__ */ jsx21(
|
|
2015
2264
|
"span",
|
|
2016
2265
|
{
|
|
2017
2266
|
className: "ui-datepicker__cell",
|
|
2018
2267
|
role: "gridcell",
|
|
2019
2268
|
"aria-selected": isPicked(cell.index),
|
|
2020
|
-
children: /* @__PURE__ */
|
|
2269
|
+
children: /* @__PURE__ */ jsx21(
|
|
2021
2270
|
"button",
|
|
2022
2271
|
{
|
|
2023
2272
|
type: "button",
|
|
@@ -2036,12 +2285,12 @@ function DatePicker({
|
|
|
2036
2285
|
"aria-label": state(cell),
|
|
2037
2286
|
onClick: () => pick(cell),
|
|
2038
2287
|
onFocus: () => setCursor(cell.index),
|
|
2039
|
-
children: /* @__PURE__ */
|
|
2288
|
+
children: /* @__PURE__ */ jsx21("span", { className: "ui-datepicker__num", children: cell.label })
|
|
2040
2289
|
}
|
|
2041
2290
|
)
|
|
2042
2291
|
},
|
|
2043
2292
|
cell.period
|
|
2044
|
-
) : /* @__PURE__ */
|
|
2293
|
+
) : /* @__PURE__ */ jsx21("span", { className: "ui-datepicker__cell is-empty", role: "gridcell" }, `e${r}-${c}`)) }, `r${r}`))
|
|
2045
2294
|
]
|
|
2046
2295
|
}
|
|
2047
2296
|
)
|
|
@@ -2051,8 +2300,8 @@ function DatePicker({
|
|
|
2051
2300
|
// `open` on the root whichever form the panel takes, so the trigger's
|
|
2052
2301
|
// chevron flips for the sheet as it does for the popover. The panel rules
|
|
2053
2302
|
// it also switches on have no panel to find while the sheet is up.
|
|
2054
|
-
/* @__PURE__ */
|
|
2055
|
-
/* @__PURE__ */
|
|
2303
|
+
/* @__PURE__ */ jsxs17("div", { className: cx5("ui-dropdown", "ui-datepicker", open && "open"), ref: root, children: [
|
|
2304
|
+
/* @__PURE__ */ jsxs17(
|
|
2056
2305
|
"button",
|
|
2057
2306
|
{
|
|
2058
2307
|
type: "button",
|
|
@@ -2068,8 +2317,8 @@ function DatePicker({
|
|
|
2068
2317
|
setOpen(!open);
|
|
2069
2318
|
},
|
|
2070
2319
|
children: [
|
|
2071
|
-
/* @__PURE__ */
|
|
2072
|
-
/* @__PURE__ */
|
|
2320
|
+
/* @__PURE__ */ jsx21("span", { className: "ui-dropdown__value", children: shown ?? empty }),
|
|
2321
|
+
/* @__PURE__ */ jsx21("span", { className: "ui-dropdown__chevron", "aria-hidden": "true" })
|
|
2073
2322
|
]
|
|
2074
2323
|
}
|
|
2075
2324
|
),
|
|
@@ -2080,8 +2329,8 @@ function DatePicker({
|
|
|
2080
2329
|
// without taking the sheet's affordances left a phone reader with no
|
|
2081
2330
|
// visible way out and a Tab that walked into the live page behind it.
|
|
2082
2331
|
// why: guidelines/drawer.md
|
|
2083
|
-
/* @__PURE__ */
|
|
2084
|
-
) : /* @__PURE__ */
|
|
2332
|
+
/* @__PURE__ */ jsx21(Drawer, { open, side: "bottom", size: "md", title: name, onClose: () => setOpen(false), children: calendar })
|
|
2333
|
+
) : /* @__PURE__ */ jsx21(
|
|
2085
2334
|
"div",
|
|
2086
2335
|
{
|
|
2087
2336
|
className: cx5("ui-dropdown__panel", "ui-datepicker__panel", align === "end" && "is-end"),
|
|
@@ -2098,13 +2347,13 @@ function DatePicker({
|
|
|
2098
2347
|
|
|
2099
2348
|
// src/Dropdown.tsx
|
|
2100
2349
|
import {
|
|
2101
|
-
Fragment as
|
|
2350
|
+
Fragment as Fragment7,
|
|
2102
2351
|
useCallback as useCallback5,
|
|
2103
2352
|
useContext as useContext2,
|
|
2104
|
-
useEffect as
|
|
2353
|
+
useEffect as useEffect8,
|
|
2105
2354
|
useId as useId8,
|
|
2106
|
-
useRef as
|
|
2107
|
-
useState as
|
|
2355
|
+
useRef as useRef12,
|
|
2356
|
+
useState as useState9
|
|
2108
2357
|
} from "react";
|
|
2109
2358
|
import {
|
|
2110
2359
|
icon as icon4,
|
|
@@ -2126,7 +2375,7 @@ import { createContext as createContext2 } from "react";
|
|
|
2126
2375
|
var FieldContext = createContext2(null);
|
|
2127
2376
|
|
|
2128
2377
|
// src/Dropdown.tsx
|
|
2129
|
-
import { Fragment as
|
|
2378
|
+
import { Fragment as Fragment8, jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
|
|
2130
2379
|
var EXIT_SLACK_MS2 = 50;
|
|
2131
2380
|
var SETTLE_MS = 450;
|
|
2132
2381
|
var inPanel = (node) => {
|
|
@@ -2135,7 +2384,7 @@ var inPanel = (node) => {
|
|
|
2135
2384
|
};
|
|
2136
2385
|
var cx6 = (...a) => a.filter(Boolean).join(" ");
|
|
2137
2386
|
var isRow = (it) => Boolean(it) && it !== "---" && !it.separator;
|
|
2138
|
-
var Glyph2 = ({ name, className, hidden }) => /* @__PURE__ */
|
|
2387
|
+
var Glyph2 = ({ name, className, hidden }) => /* @__PURE__ */ jsx22(
|
|
2139
2388
|
"span",
|
|
2140
2389
|
{
|
|
2141
2390
|
className,
|
|
@@ -2148,7 +2397,7 @@ function RowBadge({ badge }) {
|
|
|
2148
2397
|
const given = typeof badge === "string" ? "" : badge.tone || "";
|
|
2149
2398
|
let tone = given || (/^live$/i.test(String(text2)) ? "live" : "neutral");
|
|
2150
2399
|
if (!given && tone === "neutral" && /^(?:off|unset|disabled|archive|archived)$/i.test(text2)) tone = "state";
|
|
2151
|
-
return /* @__PURE__ */
|
|
2400
|
+
return /* @__PURE__ */ jsx22("span", { className: `ui-dropdown__badge is-${tone}`, children: text2 });
|
|
2152
2401
|
}
|
|
2153
2402
|
var keyOf = (it) => it.value != null ? `v:${it.value}` : `l:${it.label}`;
|
|
2154
2403
|
var itemsIn = (panel) => Array.from(panel?.querySelectorAll("[data-dd-item]") ?? []).filter((el) => el.getAttribute("aria-disabled") !== "true" && !el.hidden);
|
|
@@ -2192,18 +2441,18 @@ function Dropdown({
|
|
|
2192
2441
|
onSelect,
|
|
2193
2442
|
row
|
|
2194
2443
|
}) {
|
|
2195
|
-
const [selfOpen, setSelfOpen] =
|
|
2444
|
+
const [selfOpen, setSelfOpen] = useState9(defaultOpen);
|
|
2196
2445
|
const open = openProp ?? selfOpen;
|
|
2197
|
-
const [pick, setPick] =
|
|
2198
|
-
const [query, setQuery] =
|
|
2199
|
-
const [activeKey, setActiveKey] =
|
|
2200
|
-
const root =
|
|
2201
|
-
const panel =
|
|
2202
|
-
const trigger =
|
|
2203
|
-
const field =
|
|
2204
|
-
const landOn =
|
|
2205
|
-
const revealed =
|
|
2206
|
-
const at =
|
|
2446
|
+
const [pick, setPick] = useState9(null);
|
|
2447
|
+
const [query, setQuery] = useState9(() => search && search !== true ? search.query || "" : "");
|
|
2448
|
+
const [activeKey, setActiveKey] = useState9(null);
|
|
2449
|
+
const root = useRef12(null);
|
|
2450
|
+
const panel = useRef12(null);
|
|
2451
|
+
const trigger = useRef12(null);
|
|
2452
|
+
const field = useRef12(null);
|
|
2453
|
+
const landOn = useRef12(null);
|
|
2454
|
+
const revealed = useRef12(false);
|
|
2455
|
+
const at = useRef12("");
|
|
2207
2456
|
const auto = useId8().replace(/:/g, "");
|
|
2208
2457
|
const uid = id ?? auto;
|
|
2209
2458
|
const inField = useContext2(FieldContext);
|
|
@@ -2212,7 +2461,7 @@ function Dropdown({
|
|
|
2212
2461
|
if (openProp === void 0) setSelfOpen(next);
|
|
2213
2462
|
onOpenChange?.(next);
|
|
2214
2463
|
}, [openProp, onOpenChange]);
|
|
2215
|
-
const close =
|
|
2464
|
+
const close = useRef12(setOpen);
|
|
2216
2465
|
useIsoLayoutEffect(() => {
|
|
2217
2466
|
close.current = setOpen;
|
|
2218
2467
|
});
|
|
@@ -2265,7 +2514,7 @@ function Dropdown({
|
|
|
2265
2514
|
stop.forEach((off) => off());
|
|
2266
2515
|
};
|
|
2267
2516
|
}, [open]);
|
|
2268
|
-
const opened =
|
|
2517
|
+
const opened = useRef12(false);
|
|
2269
2518
|
useIsoLayoutEffect(() => {
|
|
2270
2519
|
const el = panel.current;
|
|
2271
2520
|
if (open) {
|
|
@@ -2312,7 +2561,7 @@ function Dropdown({
|
|
|
2312
2561
|
const given = rows.find((it) => it.selected);
|
|
2313
2562
|
const givenKey = given ? keyOf(given) : null;
|
|
2314
2563
|
const pickedKey = pick && pick.against === givenKey ? pick.key : null;
|
|
2315
|
-
|
|
2564
|
+
useEffect8(() => {
|
|
2316
2565
|
if (pick && pick.against !== givenKey) setPick(null);
|
|
2317
2566
|
}, [givenKey, pick]);
|
|
2318
2567
|
const picked = pickedKey != null ? rows.find((it) => keyOf(it) === pickedKey) : void 0;
|
|
@@ -2328,7 +2577,7 @@ function Dropdown({
|
|
|
2328
2577
|
const rowIds = /* @__PURE__ */ new Map();
|
|
2329
2578
|
rows.forEach((it, i) => rowIds.set(it, `${uid}-opt-${i}`));
|
|
2330
2579
|
const listId = `${uid}-list`;
|
|
2331
|
-
|
|
2580
|
+
useEffect8(() => {
|
|
2332
2581
|
if (!open) return;
|
|
2333
2582
|
const mine = () => close.current(false);
|
|
2334
2583
|
for (const other of [...openNow]) other();
|
|
@@ -2337,7 +2586,7 @@ function Dropdown({
|
|
|
2337
2586
|
openNow.delete(mine);
|
|
2338
2587
|
};
|
|
2339
2588
|
}, [open]);
|
|
2340
|
-
|
|
2589
|
+
useEffect8(() => {
|
|
2341
2590
|
if (!open) return;
|
|
2342
2591
|
const doc = root.current?.ownerDocument ?? document;
|
|
2343
2592
|
const onClick = (e) => {
|
|
@@ -2567,7 +2816,7 @@ function Dropdown({
|
|
|
2567
2816
|
};
|
|
2568
2817
|
function renderRow(entry, key) {
|
|
2569
2818
|
if (!isRow(entry)) {
|
|
2570
|
-
return /* @__PURE__ */
|
|
2819
|
+
return /* @__PURE__ */ jsx22("div", { className: "ui-dropdown__sep", role: "separator", hidden: filtering || void 0 }, key);
|
|
2571
2820
|
}
|
|
2572
2821
|
const disabled2 = !!entry.disabled;
|
|
2573
2822
|
const selected = selectedOf(entry);
|
|
@@ -2589,23 +2838,23 @@ function Dropdown({
|
|
|
2589
2838
|
...asLink ? { href: entry.href, ...entry.target ? { target: entry.target } : null } : null,
|
|
2590
2839
|
...sx ? { id: rowIds.get(entry), hidden: hiddenBy(entry) || void 0 } : null,
|
|
2591
2840
|
onClick: (e) => choose(entry, e),
|
|
2592
|
-
children: /* @__PURE__ */
|
|
2593
|
-
entry.avatar ? /* @__PURE__ */
|
|
2594
|
-
/* @__PURE__ */
|
|
2595
|
-
/* @__PURE__ */
|
|
2596
|
-
entry.description && /* @__PURE__ */
|
|
2841
|
+
children: /* @__PURE__ */ jsxs18(Fragment8, { children: [
|
|
2842
|
+
entry.avatar ? /* @__PURE__ */ jsx22(Avatar, { personKey: entry.avatar.key, name: entry.avatar.name, src: entry.avatar.src, empty: entry.avatar.empty }) : entry.icon && /* @__PURE__ */ jsx22(Glyph2, { name: entry.icon, className: "ui-dropdown__ic" }),
|
|
2843
|
+
/* @__PURE__ */ jsxs18("span", { className: "ui-dropdown__main", children: [
|
|
2844
|
+
/* @__PURE__ */ jsx22("span", { className: "ui-dropdown__label", children: entry.label }),
|
|
2845
|
+
entry.description && /* @__PURE__ */ jsx22("span", { className: "ui-dropdown__desc", children: entry.description })
|
|
2597
2846
|
] }),
|
|
2598
|
-
entry.badge ? /* @__PURE__ */
|
|
2599
|
-
asOption && /* @__PURE__ */
|
|
2847
|
+
entry.badge ? /* @__PURE__ */ jsx22(RowBadge, { badge: entry.badge }) : null,
|
|
2848
|
+
asOption && /* @__PURE__ */ jsx22(Glyph2, { name: "check", className: "ui-dropdown__tick", hidden: true })
|
|
2600
2849
|
] })
|
|
2601
2850
|
};
|
|
2602
|
-
if (row) return /* @__PURE__ */
|
|
2851
|
+
if (row) return /* @__PURE__ */ jsx22(Fragment7, { children: row(entry, props) }, key);
|
|
2603
2852
|
const Tag = asLink ? "a" : "div";
|
|
2604
|
-
return /* @__PURE__ */
|
|
2853
|
+
return /* @__PURE__ */ jsx22(Tag, { ...props }, key);
|
|
2605
2854
|
}
|
|
2606
2855
|
const body = sections?.length ? sections.map((section, si) => {
|
|
2607
2856
|
const gone = filtering && !(section.items || []).some((it) => isRow(it) && !hiddenBy(it));
|
|
2608
|
-
return /* @__PURE__ */
|
|
2857
|
+
return /* @__PURE__ */ jsxs18(
|
|
2609
2858
|
"div",
|
|
2610
2859
|
{
|
|
2611
2860
|
className: "ui-dropdown__section",
|
|
@@ -2613,7 +2862,7 @@ function Dropdown({
|
|
|
2613
2862
|
"aria-label": section.label || void 0,
|
|
2614
2863
|
hidden: gone || void 0,
|
|
2615
2864
|
children: [
|
|
2616
|
-
section.label && /* @__PURE__ */
|
|
2865
|
+
section.label && /* @__PURE__ */ jsx22("div", { className: "ui-dropdown__group", role: "presentation", children: section.label }),
|
|
2617
2866
|
(section.items || []).map((entry, i) => renderRow(entry, `s${si}-${i}`))
|
|
2618
2867
|
]
|
|
2619
2868
|
},
|
|
@@ -2621,12 +2870,12 @@ function Dropdown({
|
|
|
2621
2870
|
);
|
|
2622
2871
|
}) : (items || []).map((entry, i) => renderRow(entry, `i${i}`));
|
|
2623
2872
|
const cap = scroll && scroll !== true ? { "--ui-dropdown-cap": typeof scroll === "number" ? `${scroll}px` : scroll } : void 0;
|
|
2624
|
-
const none = sx && filtering && !visible.length ? /* @__PURE__ */
|
|
2625
|
-
/* @__PURE__ */
|
|
2626
|
-
/* @__PURE__ */
|
|
2873
|
+
const none = sx && filtering && !visible.length ? /* @__PURE__ */ jsxs18(Fragment8, { children: [
|
|
2874
|
+
/* @__PURE__ */ jsx22("span", { className: "ui-dropdown__none-title", children: sx.empty.replace("{q}", () => query.trim()) }),
|
|
2875
|
+
/* @__PURE__ */ jsx22("span", { className: "ui-dropdown__none-hint", children: sx.hint })
|
|
2627
2876
|
] }) : null;
|
|
2628
|
-
return /* @__PURE__ */
|
|
2629
|
-
/* @__PURE__ */
|
|
2877
|
+
return /* @__PURE__ */ jsxs18("div", { className: cx6("ui-dropdown", open && "open"), id, ref: root, onKeyDown, children: [
|
|
2878
|
+
/* @__PURE__ */ jsxs18(
|
|
2630
2879
|
"button",
|
|
2631
2880
|
{
|
|
2632
2881
|
type: "button",
|
|
@@ -2646,16 +2895,16 @@ function Dropdown({
|
|
|
2646
2895
|
setOpen(!open);
|
|
2647
2896
|
},
|
|
2648
2897
|
children: [
|
|
2649
|
-
triggerContent != null ? triggerContent : /* @__PURE__ */
|
|
2650
|
-
marked2 && (chosen?.avatar ? /* @__PURE__ */
|
|
2651
|
-
label && /* @__PURE__ */
|
|
2652
|
-
/* @__PURE__ */
|
|
2898
|
+
triggerContent != null ? triggerContent : /* @__PURE__ */ jsxs18(Fragment8, { children: [
|
|
2899
|
+
marked2 && (chosen?.avatar ? /* @__PURE__ */ jsx22(Avatar, { personKey: chosen.avatar.key, name: chosen.avatar.name, src: chosen.avatar.src, empty: chosen.avatar.empty }) : /* @__PURE__ */ jsx22(Avatar, { empty: true })),
|
|
2900
|
+
label && /* @__PURE__ */ jsx22("span", { className: "ui-dropdown__pre", children: label }),
|
|
2901
|
+
/* @__PURE__ */ jsx22("span", { className: cx6("ui-dropdown__value", marked2 && !chosen && "is-placeholder"), children: shown != null ? shown : placeholder })
|
|
2653
2902
|
] }),
|
|
2654
|
-
chevron && /* @__PURE__ */
|
|
2903
|
+
chevron && /* @__PURE__ */ jsx22("span", { className: "ui-dropdown__chevron", "aria-hidden": "true" })
|
|
2655
2904
|
]
|
|
2656
2905
|
}
|
|
2657
2906
|
),
|
|
2658
|
-
/* @__PURE__ */
|
|
2907
|
+
/* @__PURE__ */ jsxs18(
|
|
2659
2908
|
"div",
|
|
2660
2909
|
{
|
|
2661
2910
|
className: cx6(
|
|
@@ -2676,10 +2925,10 @@ function Dropdown({
|
|
|
2676
2925
|
onMouseMove,
|
|
2677
2926
|
children: [
|
|
2678
2927
|
header,
|
|
2679
|
-
sx ? /* @__PURE__ */
|
|
2680
|
-
/* @__PURE__ */
|
|
2681
|
-
/* @__PURE__ */
|
|
2682
|
-
/* @__PURE__ */
|
|
2928
|
+
sx ? /* @__PURE__ */ jsxs18(Fragment8, { children: [
|
|
2929
|
+
/* @__PURE__ */ jsxs18("div", { className: "ui-dropdown__search", children: [
|
|
2930
|
+
/* @__PURE__ */ jsx22(Glyph2, { name: "search", className: "ui-dropdown__search-ic", hidden: true }),
|
|
2931
|
+
/* @__PURE__ */ jsx22(
|
|
2683
2932
|
"input",
|
|
2684
2933
|
{
|
|
2685
2934
|
className: "ui-dropdown__search-input",
|
|
@@ -2703,8 +2952,8 @@ function Dropdown({
|
|
|
2703
2952
|
}
|
|
2704
2953
|
)
|
|
2705
2954
|
] }),
|
|
2706
|
-
/* @__PURE__ */
|
|
2707
|
-
/* @__PURE__ */
|
|
2955
|
+
/* @__PURE__ */ jsx22("div", { className: "ui-dropdown__list", role: "listbox", id: listId, "aria-label": name, style: cap, children: body }),
|
|
2956
|
+
/* @__PURE__ */ jsx22(
|
|
2708
2957
|
"div",
|
|
2709
2958
|
{
|
|
2710
2959
|
className: "ui-dropdown__none",
|
|
@@ -2729,7 +2978,7 @@ function strip(o) {
|
|
|
2729
2978
|
}
|
|
2730
2979
|
|
|
2731
2980
|
// src/BackLink.tsx
|
|
2732
|
-
import { jsx as
|
|
2981
|
+
import { jsx as jsx23, jsxs as jsxs19 } from "react/jsx-runtime";
|
|
2733
2982
|
var BARE = "Back";
|
|
2734
2983
|
var SCRIPTED = /^javascript:/i;
|
|
2735
2984
|
var LEADING = /^[\u0000-\u0020]+/;
|
|
@@ -2748,7 +2997,7 @@ function BackLink({
|
|
|
2748
2997
|
const name = text(label).replace(SAID, "");
|
|
2749
2998
|
const bare = !name || name.toLowerCase() === BARE.toLowerCase();
|
|
2750
2999
|
const Tag = as ?? "a";
|
|
2751
|
-
return /* @__PURE__ */
|
|
3000
|
+
return /* @__PURE__ */ jsxs19(
|
|
2752
3001
|
Tag,
|
|
2753
3002
|
{
|
|
2754
3003
|
className: ["ui-back", className].filter(Boolean).join(" "),
|
|
@@ -2756,8 +3005,8 @@ function BackLink({
|
|
|
2756
3005
|
"aria-label": bare ? void 0 : `${BARE} to ${name}`,
|
|
2757
3006
|
...rest,
|
|
2758
3007
|
children: [
|
|
2759
|
-
/* @__PURE__ */
|
|
2760
|
-
/* @__PURE__ */
|
|
3008
|
+
/* @__PURE__ */ jsx23(Icon, { name: "chevronLeft" }),
|
|
3009
|
+
/* @__PURE__ */ jsx23("span", { className: "ui-back__label", children: bare ? BARE : name })
|
|
2761
3010
|
]
|
|
2762
3011
|
}
|
|
2763
3012
|
);
|
|
@@ -2765,41 +3014,41 @@ function BackLink({
|
|
|
2765
3014
|
|
|
2766
3015
|
// src/TableValues.tsx
|
|
2767
3016
|
import { formatNumericValue, formatDeltaValue } from "@apliteni/apliteni-ui";
|
|
2768
|
-
import { jsx as
|
|
3017
|
+
import { jsx as jsx24, jsxs as jsxs20 } from "react/jsx-runtime";
|
|
2769
3018
|
function NumericValue(props) {
|
|
2770
3019
|
const value = formatNumericValue(props);
|
|
2771
|
-
return /* @__PURE__ */
|
|
3020
|
+
return /* @__PURE__ */ jsx24("span", { children: /* @__PURE__ */ jsxs20("span", { className: "ui-value", "aria-label": value.missing, children: [
|
|
2772
3021
|
value.text,
|
|
2773
|
-
value.unit && /* @__PURE__ */
|
|
3022
|
+
value.unit && /* @__PURE__ */ jsx24("span", { className: "ui-value__unit", children: value.unit })
|
|
2774
3023
|
] }) });
|
|
2775
3024
|
}
|
|
2776
3025
|
function DeltaValue(props) {
|
|
2777
3026
|
const value = formatDeltaValue(props);
|
|
2778
|
-
return /* @__PURE__ */
|
|
3027
|
+
return /* @__PURE__ */ jsx24("span", { children: /* @__PURE__ */ jsx24("span", { className: value.className, "aria-describedby": value.basisId || void 0, children: value.text }) });
|
|
2779
3028
|
}
|
|
2780
3029
|
function RowIdentity({ symbol, name, logo, href }) {
|
|
2781
3030
|
const Tag = href ? "a" : "span";
|
|
2782
|
-
return /* @__PURE__ */
|
|
2783
|
-
/* @__PURE__ */
|
|
2784
|
-
/* @__PURE__ */
|
|
2785
|
-
logo && /* @__PURE__ */
|
|
3031
|
+
return /* @__PURE__ */ jsxs20(Tag, { className: "ui-identity", href, children: [
|
|
3032
|
+
/* @__PURE__ */ jsxs20("span", { className: "ui-identity__logo", "aria-hidden": "true", children: [
|
|
3033
|
+
/* @__PURE__ */ jsx24("span", { children: symbol.slice(0, 1) }),
|
|
3034
|
+
logo && /* @__PURE__ */ jsx24("img", { src: logo, alt: "", onLoad: (e) => {
|
|
2786
3035
|
e.currentTarget.hidden = false;
|
|
2787
3036
|
}, onError: (e) => {
|
|
2788
3037
|
e.currentTarget.hidden = true;
|
|
2789
3038
|
} })
|
|
2790
3039
|
] }),
|
|
2791
|
-
/* @__PURE__ */
|
|
2792
|
-
/* @__PURE__ */
|
|
3040
|
+
/* @__PURE__ */ jsx24("span", { className: "ui-identity__symbol", children: symbol }),
|
|
3041
|
+
/* @__PURE__ */ jsx24("span", { className: "ui-identity__name", children: name })
|
|
2793
3042
|
] });
|
|
2794
3043
|
}
|
|
2795
3044
|
|
|
2796
3045
|
// src/Segmented.tsx
|
|
2797
3046
|
import { segmentedNextIndex } from "@apliteni/apliteni-ui";
|
|
2798
|
-
import { jsx as
|
|
3047
|
+
import { jsx as jsx25 } from "react/jsx-runtime";
|
|
2799
3048
|
function Segmented({ options, value, onChange, label, appearance = "pill", size, block = false, disabled = false }) {
|
|
2800
3049
|
const enabled = options.filter((o) => !o.disabled);
|
|
2801
3050
|
const tabValue = enabled.some((o) => o.value === value) ? value : enabled[0]?.value;
|
|
2802
|
-
return /* @__PURE__ */
|
|
3051
|
+
return /* @__PURE__ */ jsx25("div", { className: `ui-seg${size === "sm" ? " ui-seg--sm" : ""}${block ? " ui-seg--block" : ""}${appearance === "underline" ? " ui-seg--underline" : ""}`, role: "toolbar", "aria-label": label, children: options.map((option) => /* @__PURE__ */ jsx25(
|
|
2803
3052
|
"button",
|
|
2804
3053
|
{
|
|
2805
3054
|
type: "button",
|
|
@@ -2825,17 +3074,17 @@ function Segmented({ options, value, onChange, label, appearance = "pill", size,
|
|
|
2825
3074
|
}
|
|
2826
3075
|
|
|
2827
3076
|
// src/FilterBar.tsx
|
|
2828
|
-
import { useRef as
|
|
3077
|
+
import { useRef as useRef13, useState as useState10 } from "react";
|
|
2829
3078
|
import { filterChipText, filterChipName, filterChipUnset, filterChipItems, focusNextStop } from "@apliteni/apliteni-ui";
|
|
2830
|
-
import { Fragment as
|
|
3079
|
+
import { Fragment as Fragment9, jsx as jsx26, jsxs as jsxs21 } from "react/jsx-runtime";
|
|
2831
3080
|
var SEARCH_AT = 10;
|
|
2832
3081
|
var isRow2 = (entry) => entry !== "---" && !entry.separator;
|
|
2833
3082
|
function FilterBar({ filters, label = "Filters", clearLabel = "Clear all", clearVariant = "ghost", add, addLabel = "Filter", disabled = false, busy = false, onRemove, onClear, onChange, onAdd }) {
|
|
2834
|
-
const bar =
|
|
2835
|
-
const focused =
|
|
2836
|
-
const landing =
|
|
2837
|
-
const [opened, setOpened] =
|
|
2838
|
-
const [adding, setAdding] =
|
|
3083
|
+
const bar = useRef13(null);
|
|
3084
|
+
const focused = useRef13(null);
|
|
3085
|
+
const landing = useRef13(null);
|
|
3086
|
+
const [opened, setOpened] = useState10({});
|
|
3087
|
+
const [adding, setAdding] = useState10(false);
|
|
2839
3088
|
const blocked = disabled || busy;
|
|
2840
3089
|
const offer = (add || []).filter((entry) => !filters.some((filter) => filter.id === entry.id));
|
|
2841
3090
|
const source = /* @__PURE__ */ new Map();
|
|
@@ -2870,7 +3119,7 @@ function FilterBar({ filters, label = "Filters", clearLabel = "Clear all", clear
|
|
|
2870
3119
|
if (target) target.focus();
|
|
2871
3120
|
else focusNextStop(bar.current);
|
|
2872
3121
|
});
|
|
2873
|
-
return /* @__PURE__ */
|
|
3122
|
+
return /* @__PURE__ */ jsx26("div", { children: /* @__PURE__ */ jsxs21(
|
|
2874
3123
|
"fieldset",
|
|
2875
3124
|
{
|
|
2876
3125
|
ref: bar,
|
|
@@ -2883,8 +3132,8 @@ function FilterBar({ filters, label = "Filters", clearLabel = "Clear all", clear
|
|
|
2883
3132
|
if (event.relatedTarget && !event.currentTarget.contains(event.relatedTarget)) focused.current = null;
|
|
2884
3133
|
},
|
|
2885
3134
|
children: [
|
|
2886
|
-
/* @__PURE__ */
|
|
2887
|
-
filters.map((filter, index) => /* @__PURE__ */
|
|
3135
|
+
/* @__PURE__ */ jsx26("legend", { className: "ui-filter-bar__legend", children: label }),
|
|
3136
|
+
filters.map((filter, index) => /* @__PURE__ */ jsxs21(
|
|
2888
3137
|
"fieldset",
|
|
2889
3138
|
{
|
|
2890
3139
|
className: "ui-filter-bar__chip",
|
|
@@ -2894,14 +3143,14 @@ function FilterBar({ filters, label = "Filters", clearLabel = "Clear all", clear
|
|
|
2894
3143
|
focused.current = { id: filter.id, index };
|
|
2895
3144
|
},
|
|
2896
3145
|
children: [
|
|
2897
|
-
/* @__PURE__ */
|
|
2898
|
-
/* @__PURE__ */
|
|
3146
|
+
/* @__PURE__ */ jsx26("legend", { className: "ui-filter-bar__legend", children: filter.label }),
|
|
3147
|
+
/* @__PURE__ */ jsx26(
|
|
2899
3148
|
Dropdown,
|
|
2900
3149
|
{
|
|
2901
3150
|
items: filterChipItems(filter),
|
|
2902
3151
|
variant: "select",
|
|
2903
3152
|
ariaLabel: filterChipName(filter),
|
|
2904
|
-
triggerContent: /* @__PURE__ */
|
|
3153
|
+
triggerContent: /* @__PURE__ */ jsx26("span", { className: filterChipUnset(filter) ? "ui-dropdown__value is-placeholder" : "ui-dropdown__value", children: filterChipText(filter) }),
|
|
2905
3154
|
open: !blocked && !filter.disabled && (opened[filter.id] && opened[filter.id].against === filter.open ? opened[filter.id].open : !!filter.open),
|
|
2906
3155
|
onOpenChange: (open) => setOpened((previous) => ({ ...previous, [filter.id]: { open, against: filter.open } })),
|
|
2907
3156
|
onSelect: (value) => {
|
|
@@ -2909,7 +3158,7 @@ function FilterBar({ filters, label = "Filters", clearLabel = "Clear all", clear
|
|
|
2909
3158
|
}
|
|
2910
3159
|
}
|
|
2911
3160
|
),
|
|
2912
|
-
/* @__PURE__ */
|
|
3161
|
+
/* @__PURE__ */ jsx26(
|
|
2913
3162
|
"button",
|
|
2914
3163
|
{
|
|
2915
3164
|
type: "button",
|
|
@@ -2926,16 +3175,16 @@ function FilterBar({ filters, label = "Filters", clearLabel = "Clear all", clear
|
|
|
2926
3175
|
},
|
|
2927
3176
|
filter.id
|
|
2928
3177
|
)),
|
|
2929
|
-
offering && /* @__PURE__ */
|
|
3178
|
+
offering && /* @__PURE__ */ jsx26("div", { "data-filter-add": "", onFocus: () => {
|
|
2930
3179
|
focused.current = null;
|
|
2931
|
-
}, children: /* @__PURE__ */
|
|
3180
|
+
}, children: /* @__PURE__ */ jsx26(
|
|
2932
3181
|
Dropdown,
|
|
2933
3182
|
{
|
|
2934
3183
|
variant: "menu",
|
|
2935
3184
|
sections,
|
|
2936
3185
|
ariaLabel: addLabel,
|
|
2937
|
-
triggerContent: /* @__PURE__ */
|
|
2938
|
-
/* @__PURE__ */
|
|
3186
|
+
triggerContent: /* @__PURE__ */ jsxs21(Fragment9, { children: [
|
|
3187
|
+
/* @__PURE__ */ jsx26(Icon, { name: "plus" }),
|
|
2939
3188
|
addLabel
|
|
2940
3189
|
] }),
|
|
2941
3190
|
search: options >= SEARCH_AT && { label: `Search ${label.toLowerCase()}` },
|
|
@@ -2949,9 +3198,9 @@ function FilterBar({ filters, label = "Filters", clearLabel = "Clear all", clear
|
|
|
2949
3198
|
}
|
|
2950
3199
|
}
|
|
2951
3200
|
) }),
|
|
2952
|
-
filters.length > 0 && /* @__PURE__ */
|
|
3201
|
+
filters.length > 0 && /* @__PURE__ */ jsx26("span", { "data-filter-clear": "", onFocus: () => {
|
|
2953
3202
|
focused.current = { id: null, index: 0 };
|
|
2954
|
-
}, children: /* @__PURE__ */
|
|
3203
|
+
}, children: /* @__PURE__ */ jsx26(Button, { size: "sm", variant: clearVariant, onClick: () => {
|
|
2955
3204
|
if (!blocked) onClear();
|
|
2956
3205
|
}, children: clearLabel }) })
|
|
2957
3206
|
]
|
|
@@ -2960,37 +3209,37 @@ function FilterBar({ filters, label = "Filters", clearLabel = "Clear all", clear
|
|
|
2960
3209
|
}
|
|
2961
3210
|
|
|
2962
3211
|
// src/KeyValueList.tsx
|
|
2963
|
-
import { jsx as
|
|
3212
|
+
import { jsx as jsx27, jsxs as jsxs22 } from "react/jsx-runtime";
|
|
2964
3213
|
function detail({ value, redacted }) {
|
|
2965
|
-
if (redacted) return /* @__PURE__ */
|
|
2966
|
-
/* @__PURE__ */
|
|
3214
|
+
if (redacted) return /* @__PURE__ */ jsxs22("span", { className: "ui-kv__hidden", children: [
|
|
3215
|
+
/* @__PURE__ */ jsx27(Icon, { name: "eyeOff" }),
|
|
2967
3216
|
"Hidden"
|
|
2968
3217
|
] });
|
|
2969
3218
|
if (value == null) return "\u2014";
|
|
2970
3219
|
return typeof value === "boolean" ? String(value) : value;
|
|
2971
3220
|
}
|
|
2972
3221
|
function KeyValueList({ rows, columns = 1, className, ...rest }) {
|
|
2973
|
-
return /* @__PURE__ */
|
|
2974
|
-
/* @__PURE__ */
|
|
2975
|
-
/* @__PURE__ */
|
|
3222
|
+
return /* @__PURE__ */ jsx27("dl", { ...rest, className: ["ui-kv", columns === 2 && "ui-kv--two-columns", className].filter(Boolean).join(" "), children: rows.map((row, index) => /* @__PURE__ */ jsxs22("div", { className: "ui-drawer__row", children: [
|
|
3223
|
+
/* @__PURE__ */ jsx27("dt", { children: row.label }),
|
|
3224
|
+
/* @__PURE__ */ jsx27("dd", { children: detail(row) })
|
|
2976
3225
|
] }, index)) });
|
|
2977
3226
|
}
|
|
2978
3227
|
function DrawerSection({ title, headingLevel = 3, className, children, ...rest }) {
|
|
2979
3228
|
const Heading = `h${headingLevel}`;
|
|
2980
|
-
return /* @__PURE__ */
|
|
2981
|
-
title != null && /* @__PURE__ */
|
|
3229
|
+
return /* @__PURE__ */ jsxs22("section", { ...rest, className: ["ui-drawer__section", className].filter(Boolean).join(" "), children: [
|
|
3230
|
+
title != null && /* @__PURE__ */ jsx27(Heading, { className: "ui-drawer__section-title", children: title }),
|
|
2982
3231
|
children
|
|
2983
3232
|
] });
|
|
2984
3233
|
}
|
|
2985
3234
|
|
|
2986
3235
|
// src/Snippet.tsx
|
|
2987
|
-
import { useEffect as
|
|
2988
|
-
import { Fragment as
|
|
3236
|
+
import { useEffect as useEffect9, useRef as useRef14, useState as useState11 } from "react";
|
|
3237
|
+
import { Fragment as Fragment10, jsx as jsx28, jsxs as jsxs23 } from "react/jsx-runtime";
|
|
2989
3238
|
function Snippet({ label = "shell", code = "", children, copy = true, reveal = false, copyLabel = "Copy code" }) {
|
|
2990
|
-
const [status, setStatus] =
|
|
2991
|
-
const request =
|
|
2992
|
-
const timer =
|
|
2993
|
-
|
|
3239
|
+
const [status, setStatus] = useState11("idle");
|
|
3240
|
+
const request = useRef14(0);
|
|
3241
|
+
const timer = useRef14(void 0);
|
|
3242
|
+
useEffect9(() => {
|
|
2994
3243
|
setStatus("idle");
|
|
2995
3244
|
return () => {
|
|
2996
3245
|
request.current++;
|
|
@@ -3010,11 +3259,11 @@ function Snippet({ label = "shell", code = "", children, copy = true, reveal = f
|
|
|
3010
3259
|
if (current === request.current) setStatus("failed");
|
|
3011
3260
|
}
|
|
3012
3261
|
}
|
|
3013
|
-
return /* @__PURE__ */
|
|
3014
|
-
/* @__PURE__ */
|
|
3015
|
-
/* @__PURE__ */
|
|
3016
|
-
copy && /* @__PURE__ */
|
|
3017
|
-
/* @__PURE__ */
|
|
3262
|
+
return /* @__PURE__ */ jsxs23("div", { className: reveal ? "ui-snippet ui-snippet--reveal" : "ui-snippet", children: [
|
|
3263
|
+
/* @__PURE__ */ jsxs23("div", { className: "ui-snippet__bar", children: [
|
|
3264
|
+
/* @__PURE__ */ jsx28("span", { children: label }),
|
|
3265
|
+
copy && /* @__PURE__ */ jsxs23(Fragment10, { children: [
|
|
3266
|
+
/* @__PURE__ */ jsx28(
|
|
3018
3267
|
"button",
|
|
3019
3268
|
{
|
|
3020
3269
|
type: "button",
|
|
@@ -3022,31 +3271,31 @@ function Snippet({ label = "shell", code = "", children, copy = true, reveal = f
|
|
|
3022
3271
|
"aria-label": copyLabel,
|
|
3023
3272
|
title: copyLabel,
|
|
3024
3273
|
onClick: handleCopy,
|
|
3025
|
-
children: /* @__PURE__ */
|
|
3274
|
+
children: /* @__PURE__ */ jsx28(Icon, { name: status === "idle" ? "copy" : "check" })
|
|
3026
3275
|
}
|
|
3027
3276
|
),
|
|
3028
|
-
/* @__PURE__ */
|
|
3277
|
+
/* @__PURE__ */ jsx28("span", { className: "ui-sr ui-snippet__status", role: "status", "aria-live": "polite", children: status === "copied" ? "Copied" : status === "failed" ? "Copy failed" : "" })
|
|
3029
3278
|
] })
|
|
3030
3279
|
] }),
|
|
3031
|
-
/* @__PURE__ */
|
|
3280
|
+
/* @__PURE__ */ jsx28("pre", { children: children ?? code })
|
|
3032
3281
|
] });
|
|
3033
3282
|
}
|
|
3034
3283
|
|
|
3035
3284
|
// src/Tabs.tsx
|
|
3036
|
-
import { useEffect as
|
|
3285
|
+
import { useEffect as useEffect10, useId as useId9, useRef as useRef15 } from "react";
|
|
3037
3286
|
import { playEntrance } from "@apliteni/apliteni-ui/motion";
|
|
3038
|
-
import { Fragment as
|
|
3287
|
+
import { Fragment as Fragment11, jsx as jsx29, jsxs as jsxs24 } from "react/jsx-runtime";
|
|
3039
3288
|
function Tabs({ items, value, onChange, label }) {
|
|
3040
3289
|
const id = useId9();
|
|
3041
|
-
const previous =
|
|
3042
|
-
const activePanel =
|
|
3043
|
-
const buttons =
|
|
3044
|
-
|
|
3290
|
+
const previous = useRef15(value);
|
|
3291
|
+
const activePanel = useRef15(null);
|
|
3292
|
+
const buttons = useRef15([]);
|
|
3293
|
+
useEffect10(() => {
|
|
3045
3294
|
if (previous.current !== value) playEntrance(activePanel.current);
|
|
3046
3295
|
previous.current = value;
|
|
3047
3296
|
}, [value]);
|
|
3048
|
-
return /* @__PURE__ */
|
|
3049
|
-
/* @__PURE__ */
|
|
3297
|
+
return /* @__PURE__ */ jsxs24("div", { className: "ui-tabs", children: [
|
|
3298
|
+
/* @__PURE__ */ jsx29("div", { className: "ui-tabs__list", role: "tablist", "aria-label": label, children: items.map((item, i) => /* @__PURE__ */ jsxs24(
|
|
3050
3299
|
"button",
|
|
3051
3300
|
{
|
|
3052
3301
|
type: "button",
|
|
@@ -3084,7 +3333,7 @@ function Tabs({ items, value, onChange, label }) {
|
|
|
3084
3333
|
},
|
|
3085
3334
|
children: [
|
|
3086
3335
|
item.label,
|
|
3087
|
-
item.count != null && /* @__PURE__ */
|
|
3336
|
+
item.count != null && /* @__PURE__ */ jsxs24(Fragment11, { children: [
|
|
3088
3337
|
" ",
|
|
3089
3338
|
item.count
|
|
3090
3339
|
] })
|
|
@@ -3092,7 +3341,7 @@ function Tabs({ items, value, onChange, label }) {
|
|
|
3092
3341
|
},
|
|
3093
3342
|
item.value
|
|
3094
3343
|
)) }),
|
|
3095
|
-
/* @__PURE__ */
|
|
3344
|
+
/* @__PURE__ */ jsx29("div", { className: "ui-tabs__panels", children: items.map((item, i) => /* @__PURE__ */ jsx29(
|
|
3096
3345
|
"div",
|
|
3097
3346
|
{
|
|
3098
3347
|
className: "ui-tabs__panel",
|
|
@@ -3110,14 +3359,14 @@ function Tabs({ items, value, onChange, label }) {
|
|
|
3110
3359
|
}
|
|
3111
3360
|
|
|
3112
3361
|
// src/Timeline.tsx
|
|
3113
|
-
import { useEffect as
|
|
3362
|
+
import { useEffect as useEffect11, useRef as useRef16 } from "react";
|
|
3114
3363
|
import { playEntrance as playEntrance2, prefersReducedMotion } from "@apliteni/apliteni-ui/motion";
|
|
3115
|
-
import { jsx as
|
|
3364
|
+
import { jsx as jsx30, jsxs as jsxs25 } from "react/jsx-runtime";
|
|
3116
3365
|
var kindIcons = { person: "user", rule: "bolt", reversal: "refresh" };
|
|
3117
3366
|
function Timeline({ events, className, ...rest }) {
|
|
3118
|
-
const previousIds =
|
|
3119
|
-
const rows =
|
|
3120
|
-
|
|
3367
|
+
const previousIds = useRef16(new Set(events.map((event) => event.id)));
|
|
3368
|
+
const rows = useRef16(/* @__PURE__ */ new Map());
|
|
3369
|
+
useEffect11(() => {
|
|
3121
3370
|
if (previousIds.current.size > 0 && !prefersReducedMotion()) {
|
|
3122
3371
|
for (const event of events) {
|
|
3123
3372
|
if (previousIds.current.has(event.id)) continue;
|
|
@@ -3129,7 +3378,7 @@ function Timeline({ events, className, ...rest }) {
|
|
|
3129
3378
|
}
|
|
3130
3379
|
previousIds.current = new Set(events.map((event) => event.id));
|
|
3131
3380
|
}, [events]);
|
|
3132
|
-
return /* @__PURE__ */
|
|
3381
|
+
return /* @__PURE__ */ jsx30("ol", { ...rest, role: "list", className: ["ui-timeline", events.some((event) => event.kind) && "ui-timeline--kinds", className].filter(Boolean).join(" "), children: events.map((event, index) => /* @__PURE__ */ jsxs25(
|
|
3133
3382
|
"li",
|
|
3134
3383
|
{
|
|
3135
3384
|
className: "ui-timeline__event",
|
|
@@ -3138,20 +3387,20 @@ function Timeline({ events, className, ...rest }) {
|
|
|
3138
3387
|
else rows.current.delete(event.id);
|
|
3139
3388
|
},
|
|
3140
3389
|
children: [
|
|
3141
|
-
/* @__PURE__ */
|
|
3390
|
+
/* @__PURE__ */ jsx30("span", { "aria-hidden": "true", className: [
|
|
3142
3391
|
"ui-timeline__marker",
|
|
3143
3392
|
event.kind && "ui-timeline__marker--kind",
|
|
3144
3393
|
event.kind === "reversal" && "ui-timeline__marker--reversal"
|
|
3145
|
-
].filter(Boolean).join(" "), children: event.kind && /* @__PURE__ */
|
|
3146
|
-
/* @__PURE__ */
|
|
3147
|
-
/* @__PURE__ */
|
|
3148
|
-
/* @__PURE__ */
|
|
3149
|
-
index === events.length - 1 && event.relativeTimestamp && /* @__PURE__ */
|
|
3394
|
+
].filter(Boolean).join(" "), children: event.kind && /* @__PURE__ */ jsx30(Icon, { name: kindIcons[event.kind] }) }),
|
|
3395
|
+
/* @__PURE__ */ jsxs25("div", { className: "ui-timeline__head", children: [
|
|
3396
|
+
/* @__PURE__ */ jsx30("span", { className: "ui-timeline__actor", children: event.actor }),
|
|
3397
|
+
/* @__PURE__ */ jsx30("time", { dateTime: event.dateTime, children: event.timestamp }),
|
|
3398
|
+
index === events.length - 1 && event.relativeTimestamp && /* @__PURE__ */ jsx30("span", { className: "ui-timeline__relative", children: event.relativeTimestamp })
|
|
3150
3399
|
] }),
|
|
3151
|
-
/* @__PURE__ */
|
|
3152
|
-
(event.meta != null || event.undo) && /* @__PURE__ */
|
|
3153
|
-
event.meta != null && /* @__PURE__ */
|
|
3154
|
-
event.undo && /* @__PURE__ */
|
|
3400
|
+
/* @__PURE__ */ jsx30("p", { className: "ui-timeline__description", children: event.description }),
|
|
3401
|
+
(event.meta != null || event.undo) && /* @__PURE__ */ jsxs25("div", { className: "ui-timeline__meta", children: [
|
|
3402
|
+
event.meta != null && /* @__PURE__ */ jsx30("span", { children: event.meta }),
|
|
3403
|
+
event.undo && /* @__PURE__ */ jsx30(Button, { variant: "ghost", size: "xs", className: "ui-btn ui-btn--ghost ui-btn--xs ui-timeline__undo", "aria-label": event.undo.label, onClick: event.undo.onUndo, children: "Undo" })
|
|
3155
3404
|
] })
|
|
3156
3405
|
]
|
|
3157
3406
|
},
|
|
@@ -3160,20 +3409,20 @@ function Timeline({ events, className, ...rest }) {
|
|
|
3160
3409
|
}
|
|
3161
3410
|
|
|
3162
3411
|
// src/Field.tsx
|
|
3163
|
-
import { forwardRef as forwardRef6, useEffect as
|
|
3412
|
+
import { forwardRef as forwardRef6, useEffect as useEffect12, useId as useId10, useRef as useRef17, useState as useState12 } from "react";
|
|
3164
3413
|
import { esc, icon as icon5 } from "@apliteni/apliteni-ui";
|
|
3165
|
-
import { jsx as
|
|
3414
|
+
import { jsx as jsx31, jsxs as jsxs26 } from "react/jsx-runtime";
|
|
3166
3415
|
function messages(id, hint, error) {
|
|
3167
3416
|
return [error && `${id}-error`, hint && `${id}-hint`].filter(Boolean).join(" ") || void 0;
|
|
3168
3417
|
}
|
|
3169
3418
|
function Frame({ id, labelId, label, hint, error, required, children }) {
|
|
3170
|
-
return /* @__PURE__ */
|
|
3171
|
-
/* @__PURE__ */
|
|
3419
|
+
return /* @__PURE__ */ jsxs26("div", { className: "ui-field", children: [
|
|
3420
|
+
/* @__PURE__ */ jsxs26("label", { className: "ui-field__label", id: labelId, htmlFor: id, children: [
|
|
3172
3421
|
label,
|
|
3173
|
-
required && /* @__PURE__ */
|
|
3422
|
+
required && /* @__PURE__ */ jsx31("span", { className: "ui-field__req", "aria-hidden": "true", children: "*" })
|
|
3174
3423
|
] }),
|
|
3175
3424
|
children,
|
|
3176
|
-
error && /* @__PURE__ */
|
|
3425
|
+
error && /* @__PURE__ */ jsx31(
|
|
3177
3426
|
"div",
|
|
3178
3427
|
{
|
|
3179
3428
|
id: `${id}-error`,
|
|
@@ -3182,7 +3431,7 @@ function Frame({ id, labelId, label, hint, error, required, children }) {
|
|
|
3182
3431
|
dangerouslySetInnerHTML: { __html: icon5("alert") + esc(error) }
|
|
3183
3432
|
}
|
|
3184
3433
|
),
|
|
3185
|
-
hint && /* @__PURE__ */
|
|
3434
|
+
hint && /* @__PURE__ */ jsx31("div", { id: `${id}-hint`, className: "ui-field__hint", children: hint })
|
|
3186
3435
|
] });
|
|
3187
3436
|
}
|
|
3188
3437
|
function wiring(id, hint, error) {
|
|
@@ -3192,13 +3441,13 @@ function Field({ id: suppliedId, label, hint, error, required, children }) {
|
|
|
3192
3441
|
const generatedId = useId10();
|
|
3193
3442
|
const id = suppliedId ?? generatedId;
|
|
3194
3443
|
const labelId = `${id}-label`;
|
|
3195
|
-
return /* @__PURE__ */
|
|
3444
|
+
return /* @__PURE__ */ jsx31(Frame, { ...{ id, labelId, label, hint, error, required }, children: /* @__PURE__ */ jsx31(FieldContext.Provider, { value: { id, labelId }, children: children({ ...wiring(id, hint, error), required }) }) });
|
|
3196
3445
|
}
|
|
3197
3446
|
var TextField = forwardRef6(function TextField2({ label, hint, error, required, type = "text", unit, icon: glyph, className = "", ...props }, ref) {
|
|
3198
3447
|
const id = useId10();
|
|
3199
3448
|
const hasUnit = type === "number" && !!unit;
|
|
3200
3449
|
const describedBy = [messages(id, hint, error), hasUnit ? `${id}-unit` : ""].filter(Boolean).join(" ") || void 0;
|
|
3201
|
-
const control = /* @__PURE__ */
|
|
3450
|
+
const control = /* @__PURE__ */ jsx31(
|
|
3202
3451
|
"input",
|
|
3203
3452
|
{
|
|
3204
3453
|
ref,
|
|
@@ -3211,19 +3460,19 @@ var TextField = forwardRef6(function TextField2({ label, hint, error, required,
|
|
|
3211
3460
|
className: `ui-input${error ? " is-invalid" : ""} ${className}`
|
|
3212
3461
|
}
|
|
3213
3462
|
);
|
|
3214
|
-
const unitSpan = hasUnit ? /* @__PURE__ */
|
|
3215
|
-
return /* @__PURE__ */
|
|
3216
|
-
/* @__PURE__ */
|
|
3463
|
+
const unitSpan = hasUnit ? /* @__PURE__ */ jsx31("span", { id: `${id}-unit`, className: "ui-field-number__unit", children: unit }) : null;
|
|
3464
|
+
return /* @__PURE__ */ jsx31(Frame, { ...{ id, label, hint, error, required }, children: glyph ? /* @__PURE__ */ jsxs26("div", { className: `ui-input-group${hasUnit ? " ui-field-number" : ""}`, children: [
|
|
3465
|
+
/* @__PURE__ */ jsx31("span", { className: "ui-input-group__icon", dangerouslySetInnerHTML: { __html: icon5(glyph) } }),
|
|
3217
3466
|
control,
|
|
3218
3467
|
unitSpan
|
|
3219
|
-
] }) : hasUnit ? /* @__PURE__ */
|
|
3468
|
+
] }) : hasUnit ? /* @__PURE__ */ jsxs26("div", { className: "ui-field-number", children: [
|
|
3220
3469
|
control,
|
|
3221
3470
|
unitSpan
|
|
3222
3471
|
] }) : control });
|
|
3223
3472
|
});
|
|
3224
3473
|
function TextArea({ label, hint, error, required, className = "", ...props }) {
|
|
3225
3474
|
const id = useId10();
|
|
3226
|
-
return /* @__PURE__ */
|
|
3475
|
+
return /* @__PURE__ */ jsx31(Frame, { ...{ id, label, hint, error, required }, children: /* @__PURE__ */ jsx31(
|
|
3227
3476
|
"textarea",
|
|
3228
3477
|
{
|
|
3229
3478
|
rows: 4,
|
|
@@ -3236,7 +3485,7 @@ function TextArea({ label, hint, error, required, className = "", ...props }) {
|
|
|
3236
3485
|
}
|
|
3237
3486
|
function SelectField({ label, hint, error, required, className = "", children, ...props }) {
|
|
3238
3487
|
const id = useId10();
|
|
3239
|
-
return /* @__PURE__ */
|
|
3488
|
+
return /* @__PURE__ */ jsx31(Frame, { ...{ id, label, hint, error, required }, children: /* @__PURE__ */ jsx31(
|
|
3240
3489
|
"select",
|
|
3241
3490
|
{
|
|
3242
3491
|
...props,
|
|
@@ -3249,10 +3498,10 @@ function SelectField({ label, hint, error, required, className = "", children, .
|
|
|
3249
3498
|
}
|
|
3250
3499
|
function FileField({ label, hint, error, required, disabled, onFileChange, className = "", ...props }) {
|
|
3251
3500
|
const id = useId10();
|
|
3252
|
-
const input =
|
|
3253
|
-
const [file, setFile] =
|
|
3254
|
-
const [dragging, setDragging] =
|
|
3255
|
-
|
|
3501
|
+
const input = useRef17(null);
|
|
3502
|
+
const [file, setFile] = useState12(null);
|
|
3503
|
+
const [dragging, setDragging] = useState12(false);
|
|
3504
|
+
useEffect12(() => {
|
|
3256
3505
|
const form = input.current?.form;
|
|
3257
3506
|
const reset = () => {
|
|
3258
3507
|
setFile(null);
|
|
@@ -3265,7 +3514,7 @@ function FileField({ label, hint, error, required, disabled, onFileChange, class
|
|
|
3265
3514
|
setFile(next);
|
|
3266
3515
|
onFileChange?.(next);
|
|
3267
3516
|
};
|
|
3268
|
-
return /* @__PURE__ */
|
|
3517
|
+
return /* @__PURE__ */ jsx31(Frame, { ...{ id, label, hint, error, required }, children: /* @__PURE__ */ jsxs26(
|
|
3269
3518
|
"div",
|
|
3270
3519
|
{
|
|
3271
3520
|
className: `ui-file${dragging && !disabled ? " is-dragging" : ""}${file ? " has-file" : ""}${error ? " is-invalid" : ""}${disabled ? " is-disabled" : ""}`,
|
|
@@ -3286,12 +3535,12 @@ function FileField({ label, hint, error, required, disabled, onFileChange, class
|
|
|
3286
3535
|
update(transfer.files[0]);
|
|
3287
3536
|
},
|
|
3288
3537
|
children: [
|
|
3289
|
-
/* @__PURE__ */
|
|
3290
|
-
/* @__PURE__ */
|
|
3291
|
-
/* @__PURE__ */
|
|
3292
|
-
/* @__PURE__ */
|
|
3293
|
-
/* @__PURE__ */
|
|
3294
|
-
/* @__PURE__ */
|
|
3538
|
+
/* @__PURE__ */ jsx31("span", { className: "ui-file__glyph", children: /* @__PURE__ */ jsx31(Icon, { name: "upload" }) }),
|
|
3539
|
+
/* @__PURE__ */ jsx31("div", { "aria-live": "polite", children: file ? file.name : "Drop a file here" }),
|
|
3540
|
+
/* @__PURE__ */ jsx31("div", { children: "or choose one from your device" }),
|
|
3541
|
+
/* @__PURE__ */ jsxs26("span", { className: "ui-file__choose", children: [
|
|
3542
|
+
/* @__PURE__ */ jsx31("span", { className: "ui-btn ui-btn--secondary ui-btn--sm", "aria-hidden": "true", "aria-disabled": disabled || void 0, children: file ? "Replace file" : "Choose file" }),
|
|
3543
|
+
/* @__PURE__ */ jsx31(
|
|
3295
3544
|
"input",
|
|
3296
3545
|
{
|
|
3297
3546
|
...props,
|
|
@@ -3311,11 +3560,11 @@ function FileField({ label, hint, error, required, disabled, onFileChange, class
|
|
|
3311
3560
|
}
|
|
3312
3561
|
|
|
3313
3562
|
// src/FileDrop.tsx
|
|
3314
|
-
import { useRef as
|
|
3563
|
+
import { useRef as useRef18, useState as useState13 } from "react";
|
|
3315
3564
|
|
|
3316
3565
|
// src/EmptyState.tsx
|
|
3317
|
-
import { icon as
|
|
3318
|
-
import { jsx as
|
|
3566
|
+
import { icon as kitIcon3, illo } from "@apliteni/apliteni-ui";
|
|
3567
|
+
import { jsx as jsx32, jsxs as jsxs27 } from "react/jsx-runtime";
|
|
3319
3568
|
var cases = {
|
|
3320
3569
|
"first-run": { title: "Nothing needs you yet", sub: "New items will appear here when they need your attention.", icon: "check" },
|
|
3321
3570
|
"no-matches": { title: "No results in this view", sub: "Try another search or clear your filters.", icon: "search" },
|
|
@@ -3327,16 +3576,16 @@ function EmptyState({ variant = "first-run", title, sub, icon: icon8, art, actio
|
|
|
3327
3576
|
const heading = title ?? preset.title;
|
|
3328
3577
|
const guidance = sub ?? preset.sub;
|
|
3329
3578
|
const glyph = icon8 ?? preset.icon;
|
|
3330
|
-
return /* @__PURE__ */
|
|
3331
|
-
art ? typeof art === "string" ? /* @__PURE__ */
|
|
3332
|
-
heading && /* @__PURE__ */
|
|
3333
|
-
guidance && /* @__PURE__ */
|
|
3334
|
-
actions && /* @__PURE__ */
|
|
3579
|
+
return /* @__PURE__ */ jsxs27("div", { className: "ui-empty", children: [
|
|
3580
|
+
art ? typeof art === "string" ? /* @__PURE__ */ jsx32("div", { className: "ui-empty__art", dangerouslySetInnerHTML: { __html: /<svg/.test(art) ? art : illo(art) } }) : /* @__PURE__ */ jsx32("div", { className: "ui-empty__art", "aria-hidden": "true", children: art }) : glyph ? /* @__PURE__ */ jsx32("div", { className: "ui-empty__icon", dangerouslySetInnerHTML: { __html: kitIcon3(glyph) } }) : null,
|
|
3581
|
+
heading && /* @__PURE__ */ jsx32("div", { className: "ui-empty__title", children: heading }),
|
|
3582
|
+
guidance && /* @__PURE__ */ jsx32("div", { className: "ui-empty__sub", children: guidance }),
|
|
3583
|
+
actions && /* @__PURE__ */ jsx32("div", { className: "ui-empty__actions", children: actions })
|
|
3335
3584
|
] });
|
|
3336
3585
|
}
|
|
3337
3586
|
|
|
3338
3587
|
// src/FileDrop.tsx
|
|
3339
|
-
import { Fragment as
|
|
3588
|
+
import { Fragment as Fragment12, jsx as jsx33, jsxs as jsxs28 } from "react/jsx-runtime";
|
|
3340
3589
|
var MARKS = {
|
|
3341
3590
|
uploading: "clock",
|
|
3342
3591
|
done: "circleCheck",
|
|
@@ -3372,8 +3621,8 @@ function FileDrop({
|
|
|
3372
3621
|
children,
|
|
3373
3622
|
className
|
|
3374
3623
|
}) {
|
|
3375
|
-
const input =
|
|
3376
|
-
const [over, setOver] =
|
|
3624
|
+
const input = useRef18(null);
|
|
3625
|
+
const [over, setOver] = useState13(false);
|
|
3377
3626
|
const status = file?.status ?? "uploading";
|
|
3378
3627
|
const word = status === "error" ? file?.error ?? WORDS.error : file?.state ?? WORDS[status];
|
|
3379
3628
|
const [stem, ext] = splitName(file?.name ?? "");
|
|
@@ -3389,7 +3638,7 @@ function FileDrop({
|
|
|
3389
3638
|
const pick = () => {
|
|
3390
3639
|
if (!disabled) input.current?.click();
|
|
3391
3640
|
};
|
|
3392
|
-
const picker = /* @__PURE__ */
|
|
3641
|
+
const picker = /* @__PURE__ */ jsx33(
|
|
3393
3642
|
"input",
|
|
3394
3643
|
{
|
|
3395
3644
|
ref: input,
|
|
@@ -3422,20 +3671,20 @@ function FileDrop({
|
|
|
3422
3671
|
take(Array.from(event.dataTransfer.files));
|
|
3423
3672
|
}
|
|
3424
3673
|
};
|
|
3425
|
-
if (title !== void 0) return /* @__PURE__ */
|
|
3674
|
+
if (title !== void 0) return /* @__PURE__ */ jsxs28(
|
|
3426
3675
|
"div",
|
|
3427
3676
|
{
|
|
3428
3677
|
className: cx7("ui-drop", "ui-drop--area", showTarget && "is-dragging", disabled && "is-disabled", className),
|
|
3429
3678
|
onClick: pick,
|
|
3430
3679
|
...drag,
|
|
3431
3680
|
children: [
|
|
3432
|
-
/* @__PURE__ */
|
|
3681
|
+
/* @__PURE__ */ jsx33(
|
|
3433
3682
|
EmptyState,
|
|
3434
3683
|
{
|
|
3435
3684
|
icon: "upload",
|
|
3436
3685
|
title,
|
|
3437
3686
|
sub: note ?? "",
|
|
3438
|
-
actions: /* @__PURE__ */
|
|
3687
|
+
actions: /* @__PURE__ */ jsx33(
|
|
3439
3688
|
Button,
|
|
3440
3689
|
{
|
|
3441
3690
|
variant: "primary",
|
|
@@ -3455,18 +3704,18 @@ function FileDrop({
|
|
|
3455
3704
|
]
|
|
3456
3705
|
}
|
|
3457
3706
|
);
|
|
3458
|
-
return /* @__PURE__ */
|
|
3707
|
+
return /* @__PURE__ */ jsxs28("div", { className: cx7("ui-drop", disabled && "is-disabled", className), ...drag, children: [
|
|
3459
3708
|
children,
|
|
3460
|
-
/* @__PURE__ */
|
|
3461
|
-
file ? /* @__PURE__ */
|
|
3462
|
-
/* @__PURE__ */
|
|
3463
|
-
/* @__PURE__ */
|
|
3464
|
-
/* @__PURE__ */
|
|
3465
|
-
/* @__PURE__ */
|
|
3709
|
+
/* @__PURE__ */ jsxs28("div", { className: "ui-drop__row", children: [
|
|
3710
|
+
file ? /* @__PURE__ */ jsxs28("div", { className: cx7("ui-drop__file", status === "error" && "ui-drop__file--failed"), children: [
|
|
3711
|
+
/* @__PURE__ */ jsxs28("div", { className: "ui-drop__line", children: [
|
|
3712
|
+
/* @__PURE__ */ jsxs28("span", { className: "ui-drop__name", title: file.name, children: [
|
|
3713
|
+
/* @__PURE__ */ jsx33("span", { className: "ui-drop__stem", children: stem }),
|
|
3714
|
+
/* @__PURE__ */ jsx33("span", { className: "ui-drop__ext", children: ext })
|
|
3466
3715
|
] }),
|
|
3467
|
-
(onRemove || status === "error" && onRetry) && /* @__PURE__ */
|
|
3468
|
-
status === "error" && onRetry && /* @__PURE__ */
|
|
3469
|
-
onRemove && /* @__PURE__ */
|
|
3716
|
+
(onRemove || status === "error" && onRetry) && /* @__PURE__ */ jsxs28("span", { className: "ui-drop__actions", children: [
|
|
3717
|
+
status === "error" && onRetry && /* @__PURE__ */ jsx33(Button, { size: "sm", icon: "refresh", onClick: onRetry, disabled, children: retryLabel }),
|
|
3718
|
+
onRemove && /* @__PURE__ */ jsx33(
|
|
3470
3719
|
Button,
|
|
3471
3720
|
{
|
|
3472
3721
|
variant: "ghost",
|
|
@@ -3478,21 +3727,21 @@ function FileDrop({
|
|
|
3478
3727
|
)
|
|
3479
3728
|
] })
|
|
3480
3729
|
] }),
|
|
3481
|
-
(showSize || showWord) && /* @__PURE__ */
|
|
3730
|
+
(showSize || showWord) && /* @__PURE__ */ jsxs28(
|
|
3482
3731
|
"div",
|
|
3483
3732
|
{
|
|
3484
3733
|
className: cx7("ui-drop__facts", status === "error" && "ui-drop__error"),
|
|
3485
3734
|
role: status === "error" ? "alert" : void 0,
|
|
3486
3735
|
children: [
|
|
3487
|
-
showSize && /* @__PURE__ */
|
|
3488
|
-
showWord && /* @__PURE__ */
|
|
3489
|
-
/* @__PURE__ */
|
|
3490
|
-
/* @__PURE__ */
|
|
3736
|
+
showSize && /* @__PURE__ */ jsx33("span", { className: "ui-drop__size", children: file.size }),
|
|
3737
|
+
showWord && /* @__PURE__ */ jsxs28("span", { className: "ui-drop__state", children: [
|
|
3738
|
+
/* @__PURE__ */ jsx33(Icon, { name: MARKS[status] }),
|
|
3739
|
+
/* @__PURE__ */ jsx33("span", { className: "ui-drop__word", title: word, children: word })
|
|
3491
3740
|
] })
|
|
3492
3741
|
]
|
|
3493
3742
|
}
|
|
3494
3743
|
),
|
|
3495
|
-
hasBar && /* @__PURE__ */
|
|
3744
|
+
hasBar && /* @__PURE__ */ jsx33(
|
|
3496
3745
|
"span",
|
|
3497
3746
|
{
|
|
3498
3747
|
className: "ui-drop__bar",
|
|
@@ -3501,11 +3750,11 @@ function FileDrop({
|
|
|
3501
3750
|
"aria-valuenow": file.progress,
|
|
3502
3751
|
"aria-valuemin": 0,
|
|
3503
3752
|
"aria-valuemax": 100,
|
|
3504
|
-
children: /* @__PURE__ */
|
|
3753
|
+
children: /* @__PURE__ */ jsx33("span", { style: { width: `${file.progress}%` } })
|
|
3505
3754
|
}
|
|
3506
3755
|
)
|
|
3507
|
-
] }) : /* @__PURE__ */
|
|
3508
|
-
/* @__PURE__ */
|
|
3756
|
+
] }) : /* @__PURE__ */ jsxs28(Fragment12, { children: [
|
|
3757
|
+
/* @__PURE__ */ jsx33(
|
|
3509
3758
|
Button,
|
|
3510
3759
|
{
|
|
3511
3760
|
size: "sm",
|
|
@@ -3515,22 +3764,22 @@ function FileDrop({
|
|
|
3515
3764
|
children: label
|
|
3516
3765
|
}
|
|
3517
3766
|
),
|
|
3518
|
-
note && /* @__PURE__ */
|
|
3767
|
+
note && /* @__PURE__ */ jsx33("p", { className: "ui-drop__note", children: note })
|
|
3519
3768
|
] }),
|
|
3520
3769
|
picker
|
|
3521
3770
|
] }),
|
|
3522
|
-
showTarget && /* @__PURE__ */
|
|
3771
|
+
showTarget && /* @__PURE__ */ jsx33("div", { className: "ui-drop__target", "aria-hidden": "true", children: dropLabel })
|
|
3523
3772
|
] });
|
|
3524
3773
|
}
|
|
3525
3774
|
|
|
3526
3775
|
// src/SearchField.tsx
|
|
3527
3776
|
import { forwardRef as forwardRef7 } from "react";
|
|
3528
3777
|
import { icon as icon6 } from "@apliteni/apliteni-ui";
|
|
3529
|
-
import { jsx as
|
|
3778
|
+
import { jsx as jsx34, jsxs as jsxs29 } from "react/jsx-runtime";
|
|
3530
3779
|
var SearchField = forwardRef7(function SearchField2({ ariaLabel, className, ...props }, ref) {
|
|
3531
|
-
return /* @__PURE__ */
|
|
3532
|
-
/* @__PURE__ */
|
|
3533
|
-
/* @__PURE__ */
|
|
3780
|
+
return /* @__PURE__ */ jsxs29("div", { className: "ui-input-group", children: [
|
|
3781
|
+
/* @__PURE__ */ jsx34("span", { className: "ui-input-group__icon", dangerouslySetInnerHTML: { __html: icon6("search") } }),
|
|
3782
|
+
/* @__PURE__ */ jsx34(
|
|
3534
3783
|
"input",
|
|
3535
3784
|
{
|
|
3536
3785
|
ref,
|
|
@@ -3544,9 +3793,9 @@ var SearchField = forwardRef7(function SearchField2({ ariaLabel, className, ...p
|
|
|
3544
3793
|
});
|
|
3545
3794
|
|
|
3546
3795
|
// src/Toast.tsx
|
|
3547
|
-
import { createContext as createContext3, useCallback as useCallback6, useContext as useContext3, useEffect as
|
|
3548
|
-
import { createPortal as
|
|
3549
|
-
import { jsx as
|
|
3796
|
+
import { createContext as createContext3, useCallback as useCallback6, useContext as useContext3, useEffect as useEffect13, useLayoutEffect as useLayoutEffect4, useRef as useRef19, useState as useState14 } from "react";
|
|
3797
|
+
import { createPortal as createPortal5 } from "react-dom";
|
|
3798
|
+
import { jsx as jsx35, jsxs as jsxs30 } from "react/jsx-runtime";
|
|
3550
3799
|
var Context = createContext3(null);
|
|
3551
3800
|
var glyphs = { success: "circleCheck", danger: "circleX", warn: "circleAlert", info: "info", neutral: "bolt" };
|
|
3552
3801
|
function useToast() {
|
|
@@ -3555,23 +3804,23 @@ function useToast() {
|
|
|
3555
3804
|
return push;
|
|
3556
3805
|
}
|
|
3557
3806
|
function Notice({ notice, remove }) {
|
|
3558
|
-
const root =
|
|
3559
|
-
const [leaving2, setLeaving] =
|
|
3560
|
-
const dismissed =
|
|
3561
|
-
const [hovered, setHovered] =
|
|
3562
|
-
const [focused, setFocused] =
|
|
3807
|
+
const root = useRef19(null);
|
|
3808
|
+
const [leaving2, setLeaving] = useState14(false);
|
|
3809
|
+
const dismissed = useRef19(false);
|
|
3810
|
+
const [hovered, setHovered] = useState14(false);
|
|
3811
|
+
const [focused, setFocused] = useState14(false);
|
|
3563
3812
|
const paused = hovered || focused;
|
|
3564
3813
|
const tone = notice.tone ?? "success";
|
|
3565
3814
|
const timed = !notice.action && notice.timer !== false && notice.timer !== 0;
|
|
3566
3815
|
const duration = typeof notice.timer === "number" ? notice.timer * 1e3 : 5e3;
|
|
3567
|
-
const remaining =
|
|
3816
|
+
const remaining = useRef19(duration);
|
|
3568
3817
|
const dismiss = useCallback6(() => {
|
|
3569
3818
|
if (dismissed.current) return;
|
|
3570
3819
|
dismissed.current = true;
|
|
3571
3820
|
if (typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches) remove();
|
|
3572
3821
|
else setLeaving(true);
|
|
3573
3822
|
}, [remove]);
|
|
3574
|
-
|
|
3823
|
+
useEffect13(() => {
|
|
3575
3824
|
if (leaving2) {
|
|
3576
3825
|
const element = root.current;
|
|
3577
3826
|
const finish = (event) => {
|
|
@@ -3585,7 +3834,7 @@ function Notice({ notice, remove }) {
|
|
|
3585
3834
|
};
|
|
3586
3835
|
}
|
|
3587
3836
|
}, [leaving2, remove]);
|
|
3588
|
-
|
|
3837
|
+
useEffect13(() => {
|
|
3589
3838
|
if (leaving2 || !timed || paused) return;
|
|
3590
3839
|
const started = Date.now();
|
|
3591
3840
|
const timer = setTimeout(dismiss, remaining.current);
|
|
@@ -3594,7 +3843,7 @@ function Notice({ notice, remove }) {
|
|
|
3594
3843
|
remaining.current = Math.max(0, remaining.current - (Date.now() - started));
|
|
3595
3844
|
};
|
|
3596
3845
|
}, [dismiss, leaving2, paused, timed]);
|
|
3597
|
-
return /* @__PURE__ */
|
|
3846
|
+
return /* @__PURE__ */ jsxs30(
|
|
3598
3847
|
"div",
|
|
3599
3848
|
{
|
|
3600
3849
|
ref: root,
|
|
@@ -3608,12 +3857,12 @@ function Notice({ notice, remove }) {
|
|
|
3608
3857
|
if (!event.currentTarget.contains(event.relatedTarget)) setFocused(false);
|
|
3609
3858
|
},
|
|
3610
3859
|
children: [
|
|
3611
|
-
/* @__PURE__ */
|
|
3612
|
-
/* @__PURE__ */
|
|
3613
|
-
/* @__PURE__ */
|
|
3614
|
-
!notice.compact && notice.text && /* @__PURE__ */
|
|
3860
|
+
/* @__PURE__ */ jsx35("span", { className: "ui-toast__icon", children: /* @__PURE__ */ jsx35(Icon, { name: glyphs[tone] }) }),
|
|
3861
|
+
/* @__PURE__ */ jsxs30("div", { className: "ui-toast__body", children: [
|
|
3862
|
+
/* @__PURE__ */ jsx35("div", { className: "ui-toast__title", children: notice.title }),
|
|
3863
|
+
!notice.compact && notice.text && /* @__PURE__ */ jsx35("div", { className: "ui-toast__text", children: notice.text })
|
|
3615
3864
|
] }),
|
|
3616
|
-
notice.action && /* @__PURE__ */
|
|
3865
|
+
notice.action && /* @__PURE__ */ jsx35(
|
|
3617
3866
|
"button",
|
|
3618
3867
|
{
|
|
3619
3868
|
type: "button",
|
|
@@ -3628,8 +3877,8 @@ function Notice({ notice, remove }) {
|
|
|
3628
3877
|
children: notice.action.label
|
|
3629
3878
|
}
|
|
3630
3879
|
),
|
|
3631
|
-
notice.dismissible !== false && /* @__PURE__ */
|
|
3632
|
-
timed && /* @__PURE__ */
|
|
3880
|
+
notice.dismissible !== false && /* @__PURE__ */ jsx35("button", { type: "button", className: "ui-toast__close", "aria-label": "Dismiss", disabled: leaving2, onClick: dismiss, children: /* @__PURE__ */ jsx35(Icon, { name: "x" }) }),
|
|
3881
|
+
timed && /* @__PURE__ */ jsx35(
|
|
3633
3882
|
"span",
|
|
3634
3883
|
{
|
|
3635
3884
|
className: "ui-toast__timer is-running",
|
|
@@ -3662,41 +3911,41 @@ function usePublishedReach(stack2, count) {
|
|
|
3662
3911
|
}, [stack2, count]);
|
|
3663
3912
|
}
|
|
3664
3913
|
function Toast({ children }) {
|
|
3665
|
-
const [entries, setEntries] =
|
|
3666
|
-
const nextId =
|
|
3667
|
-
const stack2 =
|
|
3914
|
+
const [entries, setEntries] = useState14([]);
|
|
3915
|
+
const nextId = useRef19(0);
|
|
3916
|
+
const stack2 = useRef19(null);
|
|
3668
3917
|
const push = useCallback6((notice) => {
|
|
3669
3918
|
const id = nextId.current++;
|
|
3670
3919
|
const remove = () => setEntries((current) => current.filter((entry) => entry.id !== id));
|
|
3671
3920
|
setEntries((current) => [...current, { id, notice, remove }]);
|
|
3672
3921
|
}, []);
|
|
3673
3922
|
usePublishedReach(stack2, entries.length);
|
|
3674
|
-
return /* @__PURE__ */
|
|
3923
|
+
return /* @__PURE__ */ jsxs30(Context.Provider, { value: push, children: [
|
|
3675
3924
|
children,
|
|
3676
|
-
typeof document !== "undefined" &&
|
|
3677
|
-
/* @__PURE__ */
|
|
3925
|
+
typeof document !== "undefined" && createPortal5(
|
|
3926
|
+
/* @__PURE__ */ jsx35("div", { className: "ui-toast-stack rx-toast-stack", ref: stack2, children: entries.map((entry) => /* @__PURE__ */ jsx35(Notice, { notice: entry.notice, remove: entry.remove }, entry.id)) }),
|
|
3678
3927
|
document.body
|
|
3679
3928
|
)
|
|
3680
3929
|
] });
|
|
3681
3930
|
}
|
|
3682
3931
|
|
|
3683
3932
|
// src/AppShell.tsx
|
|
3684
|
-
import { useEffect as
|
|
3933
|
+
import { useEffect as useEffect15, useId as useId12, useRef as useRef20, useState as useState16 } from "react";
|
|
3685
3934
|
import { paletteHotkey, prism, railCollapsed } from "@apliteni/apliteni-ui";
|
|
3686
3935
|
|
|
3687
3936
|
// src/SidebarNav.tsx
|
|
3688
|
-
import { forwardRef as forwardRef8, useEffect as
|
|
3937
|
+
import { forwardRef as forwardRef8, useEffect as useEffect14, useId as useId11, useState as useState15 } from "react";
|
|
3689
3938
|
import { ENTRANCE_FALLBACK_MS } from "@apliteni/apliteni-ui/motion";
|
|
3690
|
-
import { Fragment as
|
|
3939
|
+
import { Fragment as Fragment13, jsx as jsx36, jsxs as jsxs31 } from "react/jsx-runtime";
|
|
3691
3940
|
var badgeText = (badge) => typeof badge === "object" ? badge.text : badge;
|
|
3692
3941
|
function Row({ item, active, activeIs, collapsed, renderLink, sub }) {
|
|
3693
3942
|
const uid = useId11();
|
|
3694
3943
|
const group = !sub && !!item.items?.length;
|
|
3695
3944
|
const childActive = group && item.items.some((child) => child.id === active);
|
|
3696
|
-
const [expanded, setExpanded] =
|
|
3945
|
+
const [expanded, setExpanded] = useState15();
|
|
3697
3946
|
const open = expanded ?? item.defaultOpen ?? childActive;
|
|
3698
|
-
const [entering, setEntering] =
|
|
3699
|
-
|
|
3947
|
+
const [entering, setEntering] = useState15(false);
|
|
3948
|
+
useEffect14(() => {
|
|
3700
3949
|
if (!entering) return;
|
|
3701
3950
|
const timer = setTimeout(() => setEntering(false), ENTRANCE_FALLBACK_MS);
|
|
3702
3951
|
return () => clearTimeout(timer);
|
|
@@ -3713,15 +3962,15 @@ function Row({ item, active, activeIs, collapsed, renderLink, sub }) {
|
|
|
3713
3962
|
item.disabled && "is-disabled",
|
|
3714
3963
|
item.danger && "is-danger"
|
|
3715
3964
|
].filter(Boolean).join(" ");
|
|
3716
|
-
const children = /* @__PURE__ */
|
|
3717
|
-
(item.leading ?? item.icon) && /* @__PURE__ */
|
|
3718
|
-
/* @__PURE__ */
|
|
3719
|
-
count != null && count !== "" && /* @__PURE__ */
|
|
3720
|
-
group && /* @__PURE__ */
|
|
3965
|
+
const children = /* @__PURE__ */ jsxs31(Fragment13, { children: [
|
|
3966
|
+
(item.leading ?? item.icon) && /* @__PURE__ */ jsx36("span", { className: "ui-nav__ic", children: item.leading ?? /* @__PURE__ */ jsx36(Icon, { name: item.icon }) }),
|
|
3967
|
+
/* @__PURE__ */ jsx36("span", { className: "ui-nav__label", children: item.label }),
|
|
3968
|
+
count != null && count !== "" && /* @__PURE__ */ jsx36("span", { className: `ui-nav__badge is-${typeof item.badge === "object" ? item.badge.tone ?? "neutral" : "neutral"}`, children: count }),
|
|
3969
|
+
group && /* @__PURE__ */ jsx36("span", { className: "ui-nav__caret", "aria-hidden": "true" })
|
|
3721
3970
|
] });
|
|
3722
3971
|
const common = { className, "aria-label": name, title: collapsed ? name : void 0, children };
|
|
3723
|
-
if (group) return /* @__PURE__ */
|
|
3724
|
-
/* @__PURE__ */
|
|
3972
|
+
if (group) return /* @__PURE__ */ jsxs31("li", { className: `ui-nav__group${open ? " is-open" : ""}`, children: [
|
|
3973
|
+
/* @__PURE__ */ jsx36(
|
|
3725
3974
|
"button",
|
|
3726
3975
|
{
|
|
3727
3976
|
...common,
|
|
@@ -3735,22 +3984,22 @@ function Row({ item, active, activeIs, collapsed, renderLink, sub }) {
|
|
|
3735
3984
|
}
|
|
3736
3985
|
}
|
|
3737
3986
|
),
|
|
3738
|
-
/* @__PURE__ */
|
|
3987
|
+
/* @__PURE__ */ jsx36("ul", { id: uid, className: `ui-nav__sub${entering ? " is-entering" : ""}`, hidden: !open, onAnimationEnd: () => setEntering(false), children: item.items.map((child) => /* @__PURE__ */ jsx36(Row, { item: child, active, activeIs, collapsed, renderLink, sub: true }, child.id)) })
|
|
3739
3988
|
] });
|
|
3740
|
-
if (item.disabled) return /* @__PURE__ */
|
|
3989
|
+
if (item.disabled) return /* @__PURE__ */ jsx36("li", { children: /* @__PURE__ */ jsx36("span", { ...common, role: "link", "aria-disabled": "true" }) });
|
|
3741
3990
|
const props = {
|
|
3742
3991
|
...common,
|
|
3743
3992
|
href: item.href ?? `#${item.id}`,
|
|
3744
3993
|
target: item.target,
|
|
3745
3994
|
"aria-current": isActive ? activeIs === "section" ? "true" : "page" : void 0
|
|
3746
3995
|
};
|
|
3747
|
-
return /* @__PURE__ */
|
|
3996
|
+
return /* @__PURE__ */ jsx36("li", { children: renderLink ? renderLink(item, props) : /* @__PURE__ */ jsx36("a", { ...props }) });
|
|
3748
3997
|
}
|
|
3749
3998
|
function Section({ section, ...props }) {
|
|
3750
3999
|
const uid = useId11();
|
|
3751
|
-
return /* @__PURE__ */
|
|
3752
|
-
section.label && /* @__PURE__ */
|
|
3753
|
-
/* @__PURE__ */
|
|
4000
|
+
return /* @__PURE__ */ jsxs31("div", { className: "ui-nav__section", children: [
|
|
4001
|
+
section.label && /* @__PURE__ */ jsx36("div", { className: "ui-nav__cap", id: uid, "aria-hidden": props.collapsed || void 0, children: section.label }),
|
|
4002
|
+
/* @__PURE__ */ jsx36("ul", { className: "ui-nav__list", "aria-labelledby": section.label ? uid : void 0, children: section.items.map((item) => /* @__PURE__ */ jsx36(Row, { item, ...props }, item.id)) })
|
|
3754
4003
|
] });
|
|
3755
4004
|
}
|
|
3756
4005
|
var SidebarNav = forwardRef8(function SidebarNav2({
|
|
@@ -3765,8 +4014,8 @@ var SidebarNav = forwardRef8(function SidebarNav2({
|
|
|
3765
4014
|
"aria-label": label = "Sidebar",
|
|
3766
4015
|
...rest
|
|
3767
4016
|
}, ref) {
|
|
3768
|
-
return /* @__PURE__ */
|
|
3769
|
-
(sections?.length ? sections : [{ items }]).map((section, index) => /* @__PURE__ */
|
|
4017
|
+
return /* @__PURE__ */ jsxs31("nav", { ...rest, ref, "aria-label": label, className: ["ui-nav", "ui-nav--side", collapsed && "is-collapsed", className].filter(Boolean).join(" "), children: [
|
|
4018
|
+
(sections?.length ? sections : [{ items }]).map((section, index) => /* @__PURE__ */ jsx36(
|
|
3770
4019
|
Section,
|
|
3771
4020
|
{
|
|
3772
4021
|
section,
|
|
@@ -3777,14 +4026,14 @@ var SidebarNav = forwardRef8(function SidebarNav2({
|
|
|
3777
4026
|
},
|
|
3778
4027
|
index
|
|
3779
4028
|
)),
|
|
3780
|
-
footer && /* @__PURE__ */
|
|
4029
|
+
footer && /* @__PURE__ */ jsx36("div", { className: "ui-nav__foot", children: footer })
|
|
3781
4030
|
] });
|
|
3782
4031
|
});
|
|
3783
4032
|
|
|
3784
4033
|
// src/ThemeToggle.tsx
|
|
3785
4034
|
import { useSyncExternalStore } from "react";
|
|
3786
4035
|
import { themeIcon } from "@apliteni/apliteni-ui";
|
|
3787
|
-
import { jsx as
|
|
4036
|
+
import { jsx as jsx37, jsxs as jsxs32 } from "react/jsx-runtime";
|
|
3788
4037
|
var STORAGE_KEY = "apliteni-strategy-theme";
|
|
3789
4038
|
var CHOICE_EVENT = "apliteni-theme-choice";
|
|
3790
4039
|
var THEME_INIT_SCRIPT = `(()=>{let t;try{t=localStorage.getItem('apliteni-strategy-theme')}catch{}document.documentElement.setAttribute('data-theme',t==='dark'||t==='light'?t:window.matchMedia?.('(prefers-color-scheme: light)').matches?'light':'dark')})()`;
|
|
@@ -3842,10 +4091,10 @@ function ThemeToggle({ labelled = false }) {
|
|
|
3842
4091
|
}
|
|
3843
4092
|
window.dispatchEvent(new Event(CHOICE_EVENT));
|
|
3844
4093
|
};
|
|
3845
|
-
const button = /* @__PURE__ */
|
|
3846
|
-
return labelled ? /* @__PURE__ */
|
|
4094
|
+
const button = /* @__PURE__ */ jsx37("button", { type: "button", className: "toggle", "aria-label": name, title: name, onClick: toggle, children: /* @__PURE__ */ jsx37("span", { className: "ic", "aria-hidden": "true", dangerouslySetInnerHTML: { __html: themeIcon(theme) } }) });
|
|
4095
|
+
return labelled ? /* @__PURE__ */ jsxs32("span", { className: "ui-theme-toggle", children: [
|
|
3847
4096
|
button,
|
|
3848
|
-
/* @__PURE__ */
|
|
4097
|
+
/* @__PURE__ */ jsxs32("span", { children: [
|
|
3849
4098
|
label,
|
|
3850
4099
|
" theme"
|
|
3851
4100
|
] })
|
|
@@ -3853,7 +4102,7 @@ function ThemeToggle({ labelled = false }) {
|
|
|
3853
4102
|
}
|
|
3854
4103
|
|
|
3855
4104
|
// src/AppShell.tsx
|
|
3856
|
-
import { Fragment as
|
|
4105
|
+
import { Fragment as Fragment14, jsx as jsx38, jsxs as jsxs33 } from "react/jsx-runtime";
|
|
3857
4106
|
var path = (value) => value.split(/[?#]/)[0].replace(/\/+$/, "") || "/";
|
|
3858
4107
|
function AppShell({
|
|
3859
4108
|
sections,
|
|
@@ -3877,20 +4126,20 @@ function AppShell({
|
|
|
3877
4126
|
renderLink
|
|
3878
4127
|
}) {
|
|
3879
4128
|
const uid = useId12();
|
|
3880
|
-
const [collapsed, setCollapsed] =
|
|
3881
|
-
const [search, setSearch] =
|
|
3882
|
-
const [menu, setMenu] =
|
|
3883
|
-
const menuButton =
|
|
4129
|
+
const [collapsed, setCollapsed] = useState16(defaultCollapsed);
|
|
4130
|
+
const [search, setSearch] = useState16(false);
|
|
4131
|
+
const [menu, setMenu] = useState16(false);
|
|
4132
|
+
const menuButton = useRef20(null);
|
|
3884
4133
|
const current = path(pathname);
|
|
3885
4134
|
const active = sections.filter((section) => current === path(section.href) || path(section.href) !== "/" && current.startsWith(`${path(section.href)}/`)).sort((a, b) => path(b.href).length - path(a.href).length)[0];
|
|
3886
|
-
|
|
4135
|
+
useEffect15(() => {
|
|
3887
4136
|
setCollapsed(railCollapsed() ?? defaultCollapsed);
|
|
3888
4137
|
}, [defaultCollapsed]);
|
|
3889
|
-
|
|
4138
|
+
useEffect15(() => {
|
|
3890
4139
|
setMenu(false);
|
|
3891
4140
|
setSearch(false);
|
|
3892
4141
|
}, [pathname]);
|
|
3893
|
-
|
|
4142
|
+
useEffect15(() => {
|
|
3894
4143
|
if (!menu) return;
|
|
3895
4144
|
const grown = () => {
|
|
3896
4145
|
const button = menuButton.current;
|
|
@@ -3899,7 +4148,7 @@ function AppShell({
|
|
|
3899
4148
|
window.addEventListener("resize", grown);
|
|
3900
4149
|
return () => window.removeEventListener("resize", grown);
|
|
3901
4150
|
}, [menu]);
|
|
3902
|
-
|
|
4151
|
+
useEffect15(() => {
|
|
3903
4152
|
const hotkey = (event) => {
|
|
3904
4153
|
if (!(event.metaKey || event.ctrlKey) || event.altKey || event.shiftKey || event.key.toLowerCase() !== "k") return;
|
|
3905
4154
|
const target = event.target;
|
|
@@ -3918,7 +4167,7 @@ function AppShell({
|
|
|
3918
4167
|
} catch {
|
|
3919
4168
|
}
|
|
3920
4169
|
};
|
|
3921
|
-
const sidebar = (label) => /* @__PURE__ */
|
|
4170
|
+
const sidebar = (label) => /* @__PURE__ */ jsx38(
|
|
3922
4171
|
SidebarNav,
|
|
3923
4172
|
{
|
|
3924
4173
|
"aria-label": label,
|
|
@@ -3930,33 +4179,33 @@ function AppShell({
|
|
|
3930
4179
|
const linkProps = { ...props, onClick: (event) => {
|
|
3931
4180
|
if (!event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey) setMenu(false);
|
|
3932
4181
|
} };
|
|
3933
|
-
return renderLink ? renderLink(section, linkProps) : /* @__PURE__ */
|
|
4182
|
+
return renderLink ? renderLink(section, linkProps) : /* @__PURE__ */ jsx38("a", { ...linkProps });
|
|
3934
4183
|
}
|
|
3935
4184
|
}
|
|
3936
4185
|
);
|
|
3937
4186
|
const foldLabel = collapsed ? "Expand sidebar" : "Collapse sidebar";
|
|
3938
4187
|
const navigable = sections.length > 1 || Boolean(back);
|
|
3939
|
-
const lockup = /* @__PURE__ */
|
|
3940
|
-
brand ?? /* @__PURE__ */
|
|
3941
|
-
/* @__PURE__ */
|
|
4188
|
+
const lockup = /* @__PURE__ */ jsxs33("a", { className: "ui-app__brand", href: brandHref, "aria-label": word, children: [
|
|
4189
|
+
brand ?? /* @__PURE__ */ jsx38("i", { "aria-hidden": "true", className: "ui-react-app__mark", dangerouslySetInnerHTML: { __html: prism(uid, 24) } }),
|
|
4190
|
+
/* @__PURE__ */ jsx38("span", { children: word })
|
|
3942
4191
|
] });
|
|
3943
|
-
return /* @__PURE__ */
|
|
3944
|
-
navigable && /* @__PURE__ */
|
|
3945
|
-
/* @__PURE__ */
|
|
4192
|
+
return /* @__PURE__ */ jsxs33("div", { className: `ui-app ui-app--topbar ui-react-app${collapsed ? " is-collapsed" : ""}`, children: [
|
|
4193
|
+
navigable && /* @__PURE__ */ jsxs33("div", { className: "ui-app__rail", role: "region", "aria-label": "Sidebar", children: [
|
|
4194
|
+
/* @__PURE__ */ jsx38("div", { className: "ui-app__head", children: lockup }),
|
|
3946
4195
|
sidebar("Sections"),
|
|
3947
|
-
/* @__PURE__ */
|
|
3948
|
-
/* @__PURE__ */
|
|
3949
|
-
/* @__PURE__ */
|
|
3950
|
-
/* @__PURE__ */
|
|
3951
|
-
/* @__PURE__ */
|
|
4196
|
+
/* @__PURE__ */ jsx38("div", { className: "ui-app__foot", children: /* @__PURE__ */ jsx38("div", { className: "ui-app__fold-row", children: /* @__PURE__ */ jsxs33("button", { type: "button", className: "ui-nav__item ui-app__fold", "aria-expanded": !collapsed, "aria-label": foldLabel, onClick: fold, children: [
|
|
4197
|
+
/* @__PURE__ */ jsx38("span", { className: "ui-nav__ic", children: /* @__PURE__ */ jsxs33("svg", { className: "ui-icon", viewBox: "0 0 24 24", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
|
|
4198
|
+
/* @__PURE__ */ jsx38("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
|
|
4199
|
+
/* @__PURE__ */ jsx38("path", { className: "ui-app__fold-seam", d: "M9 3v18" }),
|
|
4200
|
+
/* @__PURE__ */ jsx38("path", { className: "ui-app__fold-arrow", d: "m16 15-3-3 3-3" })
|
|
3952
4201
|
] }) }),
|
|
3953
|
-
/* @__PURE__ */
|
|
4202
|
+
/* @__PURE__ */ jsx38("span", { className: "ui-nav__label", children: foldLabel })
|
|
3954
4203
|
] }) }) })
|
|
3955
4204
|
] }),
|
|
3956
|
-
/* @__PURE__ */
|
|
3957
|
-
/* @__PURE__ */
|
|
3958
|
-
navigable && /* @__PURE__ */
|
|
3959
|
-
/* @__PURE__ */
|
|
4205
|
+
/* @__PURE__ */ jsxs33("div", { className: "ui-app__well", children: [
|
|
4206
|
+
/* @__PURE__ */ jsxs33("header", { className: "ui-app__bar", children: [
|
|
4207
|
+
navigable && /* @__PURE__ */ jsxs33(Fragment14, { children: [
|
|
4208
|
+
/* @__PURE__ */ jsx38(
|
|
3960
4209
|
Button,
|
|
3961
4210
|
{
|
|
3962
4211
|
ref: menuButton,
|
|
@@ -3970,19 +4219,19 @@ function AppShell({
|
|
|
3970
4219
|
onClick: () => setMenu(true)
|
|
3971
4220
|
}
|
|
3972
4221
|
),
|
|
3973
|
-
/* @__PURE__ */
|
|
4222
|
+
/* @__PURE__ */ jsx38("a", { className: "ui-app__brand ui-app__brand--band", href: brandHref, "aria-label": word, children: brand ?? /* @__PURE__ */ jsx38("i", { "aria-hidden": "true", className: "ui-react-app__mark", dangerouslySetInnerHTML: { __html: prism(`${uid}-band`, 24) } }) })
|
|
3974
4223
|
] }),
|
|
3975
4224
|
!navigable && lockup,
|
|
3976
|
-
/* @__PURE__ */
|
|
3977
|
-
/* @__PURE__ */
|
|
3978
|
-
/* @__PURE__ */
|
|
3979
|
-
/* @__PURE__ */
|
|
3980
|
-
/* @__PURE__ */
|
|
4225
|
+
/* @__PURE__ */ jsxs33("button", { type: "button", className: "ui-app__search", "aria-haspopup": "dialog", onClick: () => setSearch(true), children: [
|
|
4226
|
+
/* @__PURE__ */ jsx38("span", { className: "ui-app__search-ic", children: /* @__PURE__ */ jsx38(Icon, { name: "search" }) }),
|
|
4227
|
+
/* @__PURE__ */ jsx38("span", { className: "ui-app__search-txt", children: searchLabel }),
|
|
4228
|
+
/* @__PURE__ */ jsx38("span", { className: "ui-app__search-short", "aria-hidden": "true", children: searchShortLabel }),
|
|
4229
|
+
/* @__PURE__ */ jsx38("kbd", { className: "ui-cmdk__key", children: paletteHotkey() })
|
|
3981
4230
|
] }),
|
|
3982
|
-
/* @__PURE__ */
|
|
3983
|
-
bandControl && /* @__PURE__ */
|
|
3984
|
-
/* @__PURE__ */
|
|
3985
|
-
/* @__PURE__ */
|
|
4231
|
+
/* @__PURE__ */ jsx38("span", { className: "ui-app__bar-gap" }),
|
|
4232
|
+
bandControl && /* @__PURE__ */ jsx38("span", { className: "ui-react-app__band-control", children: bandControl }),
|
|
4233
|
+
/* @__PURE__ */ jsx38(ThemeToggle, {}),
|
|
4234
|
+
/* @__PURE__ */ jsx38("div", { className: "ui-app__user ui-app__user--bar", children: /* @__PURE__ */ jsx38(
|
|
3986
4235
|
Dropdown,
|
|
3987
4236
|
{
|
|
3988
4237
|
variant: "menu",
|
|
@@ -3991,35 +4240,105 @@ function AppShell({
|
|
|
3991
4240
|
ariaLabel: `Signed in as ${account.name}, ${account.email}`,
|
|
3992
4241
|
triggerClass: "ui-app__user-trigger",
|
|
3993
4242
|
panelClass: "ui-app__user-panel",
|
|
3994
|
-
triggerContent: /* @__PURE__ */
|
|
3995
|
-
header: /* @__PURE__ */
|
|
3996
|
-
/* @__PURE__ */
|
|
3997
|
-
/* @__PURE__ */
|
|
4243
|
+
triggerContent: /* @__PURE__ */ jsx38("span", { className: "ui-app__av", "aria-hidden": "true", children: /* @__PURE__ */ jsx38(Avatar, { personKey: account.email || account.name, name: account.name, size: 32 }) }),
|
|
4244
|
+
header: /* @__PURE__ */ jsxs33("div", { className: "ui-dropdown__head", children: [
|
|
4245
|
+
/* @__PURE__ */ jsx38("b", { children: account.name }),
|
|
4246
|
+
/* @__PURE__ */ jsx38("span", { children: account.email })
|
|
3998
4247
|
] }),
|
|
3999
4248
|
items: [{ label: "Sign out", icon: "logout", danger: true }],
|
|
4000
4249
|
onSelect: onSignOut
|
|
4001
4250
|
}
|
|
4002
4251
|
) })
|
|
4003
4252
|
] }),
|
|
4004
|
-
/* @__PURE__ */
|
|
4005
|
-
back && /* @__PURE__ */
|
|
4006
|
-
/* @__PURE__ */
|
|
4007
|
-
lede && /* @__PURE__ */
|
|
4008
|
-
actions && /* @__PURE__ */
|
|
4009
|
-
/* @__PURE__ */
|
|
4253
|
+
/* @__PURE__ */ jsxs33("main", { className: `ui-app__main${width === "wide" ? " ui-app__main--wide" : ""}`, children: [
|
|
4254
|
+
back && /* @__PURE__ */ jsx38(BackLink, { ...back }),
|
|
4255
|
+
/* @__PURE__ */ jsx38("h1", { children: title }),
|
|
4256
|
+
lede && /* @__PURE__ */ jsx38("p", { className: "ui-app__sub", children: lede }),
|
|
4257
|
+
actions && /* @__PURE__ */ jsx38("div", { className: "ui-react-app__actions", children: actions }),
|
|
4258
|
+
/* @__PURE__ */ jsx38("div", { className: "ui-app__body", children })
|
|
4010
4259
|
] })
|
|
4011
4260
|
] }),
|
|
4012
|
-
navigable && /* @__PURE__ */
|
|
4013
|
-
/* @__PURE__ */
|
|
4261
|
+
navigable && /* @__PURE__ */ jsx38(Drawer, { open: menu, onClose: () => setMenu(false), title: word, side: "left", size: "sm", children: /* @__PURE__ */ jsx38("div", { className: "ui-react-app__menu", children: sidebar("Menu sections") }) }),
|
|
4262
|
+
/* @__PURE__ */ jsx38(CommandPalette, { ...palette ?? { groups: [{ items: sections.map((section) => ({ id: section.href, ...section })) }] }, open: search, onClose: () => setSearch(false) })
|
|
4014
4263
|
] });
|
|
4015
4264
|
}
|
|
4016
4265
|
|
|
4266
|
+
// src/Footer.tsx
|
|
4267
|
+
import { useId as useId13 } from "react";
|
|
4268
|
+
import { prism as prism2, safeUrl as safeUrl2 } from "@apliteni/apliteni-ui";
|
|
4269
|
+
import { jsx as jsx39, jsxs as jsxs34 } from "react/jsx-runtime";
|
|
4270
|
+
var SOCIAL_GLYPHS = {
|
|
4271
|
+
github: '<path d="M12 2a10 10 0 0 0-3.16 19.49c.5.09.68-.22.68-.48v-1.7c-2.78.6-3.37-1.34-3.37-1.34-.45-1.16-1.11-1.47-1.11-1.47-.9-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.9 1.53 2.34 1.09 2.91.83.09-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.94 0-1.09.39-1.98 1.03-2.68-.1-.25-.45-1.27.1-2.64 0 0 .84-.27 2.75 1.02a9.5 9.5 0 0 1 5 0c1.91-1.29 2.75-1.02 2.75-1.02.55 1.37.2 2.39.1 2.64.64.7 1.03 1.59 1.03 2.68 0 3.84-2.34 4.68-4.57 4.93.36.31.68.92.68 1.85v2.74c0 .27.18.58.69.48A10 10 0 0 0 12 2z"/>',
|
|
4272
|
+
x: '<path d="M4 3h4.5l4 5.5L17.5 3H21l-6.5 8.5L21 21h-4.5l-4.3-5.9L7 21H3.5l6.8-8.9z"/>',
|
|
4273
|
+
linkedin: '<path d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"/>',
|
|
4274
|
+
mail: '<rect x="3" y="5" width="18" height="14" rx="2" fill="none" stroke="currentColor" stroke-width="1.7"/><path d="m3 7 9 6 9-6" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/>'
|
|
4275
|
+
};
|
|
4276
|
+
var escapeText = (t) => t.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">");
|
|
4277
|
+
function Legal({ legal, legalLinks, switcher }) {
|
|
4278
|
+
return /* @__PURE__ */ jsxs34("div", { className: "ui-footer__bar", children: [
|
|
4279
|
+
/* @__PURE__ */ jsx39("span", { className: "ui-footer__legal", children: legal }),
|
|
4280
|
+
legalLinks && legalLinks.length > 0 && /* @__PURE__ */ jsx39("nav", { className: "ui-footer__legal-links", "aria-label": "Legal", children: legalLinks.map(({ label, href: to }) => /* @__PURE__ */ jsx39("a", { href: safeUrl2(to ?? "#"), children: label }, label)) }),
|
|
4281
|
+
switcher ? /* @__PURE__ */ jsx39("div", { className: "ui-footer__switcher", children: switcher }) : null
|
|
4282
|
+
] });
|
|
4283
|
+
}
|
|
4284
|
+
function Footer({
|
|
4285
|
+
variant = "full",
|
|
4286
|
+
word = "Strategy",
|
|
4287
|
+
brandHref = "/",
|
|
4288
|
+
brand,
|
|
4289
|
+
tagline,
|
|
4290
|
+
columns = [],
|
|
4291
|
+
links,
|
|
4292
|
+
social = [],
|
|
4293
|
+
legal = `\xA9 ${(/* @__PURE__ */ new Date()).getFullYear()} Apliteni`,
|
|
4294
|
+
legalLinks = [],
|
|
4295
|
+
switcher,
|
|
4296
|
+
className,
|
|
4297
|
+
...rest
|
|
4298
|
+
}) {
|
|
4299
|
+
const uid = useId13();
|
|
4300
|
+
const cls = ["ui-footer", `ui-footer--${variant}`, className].filter(Boolean).join(" ");
|
|
4301
|
+
const bar = /* @__PURE__ */ jsx39(Legal, { legal, legalLinks, switcher });
|
|
4302
|
+
if (variant !== "full") {
|
|
4303
|
+
return /* @__PURE__ */ jsx39("footer", { ...rest, className: cls, role: "contentinfo", children: /* @__PURE__ */ jsx39("div", { className: "ui-footer__in", children: bar }) });
|
|
4304
|
+
}
|
|
4305
|
+
const mark = prism2(uid.replace(/:/g, ""), 22);
|
|
4306
|
+
const lockup = brand ?? /* @__PURE__ */ jsx39(
|
|
4307
|
+
"a",
|
|
4308
|
+
{
|
|
4309
|
+
className: "brand",
|
|
4310
|
+
href: safeUrl2(brandHref),
|
|
4311
|
+
"aria-label": `Apliteni ${word}`,
|
|
4312
|
+
dangerouslySetInnerHTML: { __html: `${mark}<span>${escapeText(word)}</span>` }
|
|
4313
|
+
}
|
|
4314
|
+
);
|
|
4315
|
+
return /* @__PURE__ */ jsx39("footer", { ...rest, className: cls, role: "contentinfo", children: /* @__PURE__ */ jsxs34("div", { className: "ui-footer__in", children: [
|
|
4316
|
+
/* @__PURE__ */ jsxs34("div", { className: "ui-footer__top", children: [
|
|
4317
|
+
brand !== false && /* @__PURE__ */ jsxs34("div", { className: "ui-footer__brand", children: [
|
|
4318
|
+
lockup,
|
|
4319
|
+
tagline && /* @__PURE__ */ jsx39("p", { className: "ui-footer__tagline", children: tagline }),
|
|
4320
|
+
social.length > 0 && /* @__PURE__ */ jsx39("div", { className: "ui-footer__socials", children: social.map(({ label, href: to, icon: icon8 = "github" }) => {
|
|
4321
|
+
const markup = SOCIAL_GLYPHS[icon8];
|
|
4322
|
+
const fill = icon8 === "mail" ? "none" : "currentColor";
|
|
4323
|
+
const viewBox = icon8 === "linkedin" ? "0 0 448 512" : "0 0 24 24";
|
|
4324
|
+
return /* @__PURE__ */ jsx39("a", { className: "ui-footer__social", href: safeUrl2(to ?? "#"), "aria-label": label, children: /* @__PURE__ */ jsx39("svg", { viewBox, fill, "aria-hidden": "true", dangerouslySetInnerHTML: { __html: markup } }) }, label);
|
|
4325
|
+
}) })
|
|
4326
|
+
] }),
|
|
4327
|
+
(links || columns.length > 0) && /* @__PURE__ */ jsx39("nav", { className: "ui-footer__nav", "aria-label": "Footer", children: links ?? columns.map(({ title, links: columnLinks }, i) => /* @__PURE__ */ jsxs34("div", { className: "ui-footer__col", children: [
|
|
4328
|
+
title && /* @__PURE__ */ jsx39("h2", { className: "ui-footer__col-title", children: title }),
|
|
4329
|
+
/* @__PURE__ */ jsx39("ul", { className: "ui-footer__links", children: columnLinks.map(({ label, href: to, target }) => /* @__PURE__ */ jsx39("li", { children: /* @__PURE__ */ jsx39("a", { href: safeUrl2(to ?? "#"), target, rel: target ? "noreferrer" : void 0, children: label }) }, label)) })
|
|
4330
|
+
] }, title ?? i)) })
|
|
4331
|
+
] }),
|
|
4332
|
+
bar
|
|
4333
|
+
] }) });
|
|
4334
|
+
}
|
|
4335
|
+
|
|
4017
4336
|
// src/Success.tsx
|
|
4018
|
-
import { forwardRef as forwardRef9, useEffect as
|
|
4019
|
-
import { jsx as
|
|
4337
|
+
import { forwardRef as forwardRef9, useEffect as useEffect16, useRef as useRef21, useState as useState17 } from "react";
|
|
4338
|
+
import { jsx as jsx40, jsxs as jsxs35 } from "react/jsx-runtime";
|
|
4020
4339
|
var SuccessCheck = forwardRef9(function SuccessCheck2({ variant = "line", className, ...rest }, ref) {
|
|
4021
4340
|
const circled = variant === "circled";
|
|
4022
|
-
return /* @__PURE__ */
|
|
4341
|
+
return /* @__PURE__ */ jsxs35(
|
|
4023
4342
|
"svg",
|
|
4024
4343
|
{
|
|
4025
4344
|
...rest,
|
|
@@ -4031,18 +4350,18 @@ var SuccessCheck = forwardRef9(function SuccessCheck2({ variant = "line", classN
|
|
|
4031
4350
|
"aria-hidden": "true",
|
|
4032
4351
|
focusable: "false",
|
|
4033
4352
|
children: [
|
|
4034
|
-
circled && /* @__PURE__ */
|
|
4035
|
-
/* @__PURE__ */
|
|
4353
|
+
circled && /* @__PURE__ */ jsx40("path", { className: "ui-sx__circle", d: "M22 11.08V12a10 10 0 1 1-5.93-9.14" }),
|
|
4354
|
+
/* @__PURE__ */ jsx40("path", { className: "ui-sx__tick", d: circled ? "M22 4L12 14.01l-3-3" : "M20 6L9 17l-5-5" })
|
|
4036
4355
|
]
|
|
4037
4356
|
}
|
|
4038
4357
|
);
|
|
4039
4358
|
});
|
|
4040
4359
|
var SuccessPanel = forwardRef9(function SuccessPanel2({ title = "Done", sub, check = "line", className, ...rest }, ref) {
|
|
4041
4360
|
const circled = check === "circled";
|
|
4042
|
-
return /* @__PURE__ */
|
|
4043
|
-
/* @__PURE__ */
|
|
4044
|
-
/* @__PURE__ */
|
|
4045
|
-
sub && /* @__PURE__ */
|
|
4361
|
+
return /* @__PURE__ */ jsxs35("div", { ...rest, ref, className: ["ui-success", className].filter(Boolean).join(" "), children: [
|
|
4362
|
+
/* @__PURE__ */ jsx40("div", { className: ["ui-success__check", circled && "ui-success__check--circled"].filter(Boolean).join(" "), children: /* @__PURE__ */ jsx40(SuccessCheck, { variant: circled ? "circled" : "line" }) }),
|
|
4363
|
+
/* @__PURE__ */ jsx40("div", { className: "ui-success__title", children: title }),
|
|
4364
|
+
sub && /* @__PURE__ */ jsx40("div", { className: "ui-success__sub", children: sub })
|
|
4046
4365
|
] });
|
|
4047
4366
|
});
|
|
4048
4367
|
var pieces = [
|
|
@@ -4062,12 +4381,12 @@ var pieces = [
|
|
|
4062
4381
|
[80, 0.36, -20, "c", 1.05]
|
|
4063
4382
|
];
|
|
4064
4383
|
function Countdown({ seconds, label = "Redirecting", onDone }) {
|
|
4065
|
-
const [remaining, setRemaining] =
|
|
4066
|
-
const callback =
|
|
4067
|
-
|
|
4384
|
+
const [remaining, setRemaining] = useState17(seconds);
|
|
4385
|
+
const callback = useRef21(onDone);
|
|
4386
|
+
useEffect16(() => {
|
|
4068
4387
|
callback.current = onDone;
|
|
4069
4388
|
}, [onDone]);
|
|
4070
|
-
|
|
4389
|
+
useEffect16(() => {
|
|
4071
4390
|
let count = seconds;
|
|
4072
4391
|
const timer = setInterval(() => {
|
|
4073
4392
|
count -= 1;
|
|
@@ -4079,12 +4398,12 @@ function Countdown({ seconds, label = "Redirecting", onDone }) {
|
|
|
4079
4398
|
}, 1e3);
|
|
4080
4399
|
return () => clearInterval(timer);
|
|
4081
4400
|
}, [seconds]);
|
|
4082
|
-
return /* @__PURE__ */
|
|
4083
|
-
/* @__PURE__ */
|
|
4084
|
-
/* @__PURE__ */
|
|
4401
|
+
return /* @__PURE__ */ jsxs35("div", { className: "ui-sx__count", "data-sx-count": "", style: { "--sx-secs": `${seconds}s` }, children: [
|
|
4402
|
+
/* @__PURE__ */ jsx40("span", { className: "ui-sx__count-ring", "aria-hidden": "true" }),
|
|
4403
|
+
/* @__PURE__ */ jsxs35("span", { className: "ui-sx__count-text", children: [
|
|
4085
4404
|
label,
|
|
4086
4405
|
" in ",
|
|
4087
|
-
/* @__PURE__ */
|
|
4406
|
+
/* @__PURE__ */ jsx40("b", { "data-sx-num": "", children: remaining }),
|
|
4088
4407
|
"s"
|
|
4089
4408
|
] })
|
|
4090
4409
|
] });
|
|
@@ -4111,7 +4430,7 @@ var Success = forwardRef9(function Success2({
|
|
|
4111
4430
|
const seconds = countdown?.seconds;
|
|
4112
4431
|
const duration = seconds != null && Number.isFinite(seconds) && seconds >= 1 ? Math.floor(seconds) : 5;
|
|
4113
4432
|
const mark = check === "circled" ? "circled" : "line";
|
|
4114
|
-
return /* @__PURE__ */
|
|
4433
|
+
return /* @__PURE__ */ jsxs35(
|
|
4115
4434
|
"div",
|
|
4116
4435
|
{
|
|
4117
4436
|
role: "status",
|
|
@@ -4120,16 +4439,16 @@ var Success = forwardRef9(function Success2({
|
|
|
4120
4439
|
ref,
|
|
4121
4440
|
className: ["ui-sx", `ui-sx--${layout}`, `ui-sx--check-${mark}`, confetti && "ui-sx--confetti", className].filter(Boolean).join(" "),
|
|
4122
4441
|
children: [
|
|
4123
|
-
confetti && /* @__PURE__ */
|
|
4124
|
-
([x, d, r, t, s], index) => /* @__PURE__ */
|
|
4442
|
+
confetti && /* @__PURE__ */ jsx40("div", { className: "ui-sx__confetti", "aria-hidden": "true", children: pieces.map(
|
|
4443
|
+
([x, d, r, t, s], index) => /* @__PURE__ */ jsx40("i", { className: `ui-sx__piece ui-sx__piece--${t}`, style: { left: `${x}%`, "--sx-d": `${d}s`, "--sx-r": `${r}deg`, "--sx-s": s } }, index)
|
|
4125
4444
|
) }),
|
|
4126
|
-
/* @__PURE__ */
|
|
4127
|
-
/* @__PURE__ */
|
|
4128
|
-
/* @__PURE__ */
|
|
4129
|
-
/* @__PURE__ */
|
|
4130
|
-
body && /* @__PURE__ */
|
|
4131
|
-
hasActions && /* @__PURE__ */
|
|
4132
|
-
countdown && /* @__PURE__ */
|
|
4445
|
+
/* @__PURE__ */ jsxs35("div", { className: "ui-sx__inner", children: [
|
|
4446
|
+
/* @__PURE__ */ jsx40("div", { className: "ui-sx__visual", children: /* @__PURE__ */ jsx40(SuccessCheck, { variant: mark }) }),
|
|
4447
|
+
/* @__PURE__ */ jsxs35("div", { className: "ui-sx__content", children: [
|
|
4448
|
+
/* @__PURE__ */ jsx40(Heading, { className: "ui-sx__title", children: title }),
|
|
4449
|
+
body && /* @__PURE__ */ jsx40("p", { className: "ui-sx__body", children: body }),
|
|
4450
|
+
hasActions && /* @__PURE__ */ jsx40("div", { className: "ui-sx__actions", children: actions }),
|
|
4451
|
+
countdown && /* @__PURE__ */ jsx40(Countdown, { seconds: duration, label: countdown.label, onDone: onCountdownEnd }, duration)
|
|
4133
4452
|
] })
|
|
4134
4453
|
] })
|
|
4135
4454
|
]
|
|
@@ -4140,15 +4459,15 @@ var Success = forwardRef9(function Success2({
|
|
|
4140
4459
|
// src/Chart.tsx
|
|
4141
4460
|
import {
|
|
4142
4461
|
useCallback as useCallback7,
|
|
4143
|
-
useEffect as
|
|
4144
|
-
useId as
|
|
4462
|
+
useEffect as useEffect17,
|
|
4463
|
+
useId as useId14,
|
|
4145
4464
|
useLayoutEffect as useLayoutEffect5,
|
|
4146
4465
|
useMemo as useMemo4,
|
|
4147
|
-
useRef as
|
|
4148
|
-
useState as
|
|
4466
|
+
useRef as useRef22,
|
|
4467
|
+
useState as useState18
|
|
4149
4468
|
} from "react";
|
|
4150
4469
|
import { CHART_FLOOR, bridgeWalk, chartScale, pointTarget } from "@apliteni/apliteni-ui";
|
|
4151
|
-
import { Fragment as
|
|
4470
|
+
import { Fragment as Fragment15, jsx as jsx41, jsxs as jsxs36 } from "react/jsx-runtime";
|
|
4152
4471
|
var HEIGHT = { months: 216, bridge: 216, spark: 32 };
|
|
4153
4472
|
var PAD = 2;
|
|
4154
4473
|
var ZERO_INSET = 1.5;
|
|
@@ -4186,8 +4505,8 @@ function barPath(m) {
|
|
|
4186
4505
|
return `M${px(x)} ${px(roundBottom ? bottom - r : bottom)}V${px(roundTop ? top + r : top)}` + (roundTop ? `${arc(r, -r, 1)}h${px(w - r * 2)}${arc(r, r, 1)}` : `h${px(w)}`) + `V${px(roundBottom ? bottom - r : bottom)}` + (roundBottom ? `${arc(-r, r, 1)}h${px(-(w - r * 2))}${arc(-r, -r, 1)}` : `h${px(-w)}`) + "z";
|
|
4187
4506
|
}
|
|
4188
4507
|
function useTapFloor() {
|
|
4189
|
-
const [floor, setFloor] =
|
|
4190
|
-
|
|
4508
|
+
const [floor, setFloor] = useState18(TARGET);
|
|
4509
|
+
useEffect17(() => {
|
|
4191
4510
|
const query = typeof window === "undefined" ? null : window.matchMedia?.(`(max-width: ${PHONE_MAX2}px) and (pointer: coarse)`);
|
|
4192
4511
|
if (!query) return;
|
|
4193
4512
|
const read = () => setFloor(query.matches ? TAP_FLOOR : TARGET);
|
|
@@ -4309,23 +4628,23 @@ function Chart(props) {
|
|
|
4309
4628
|
const spark = variant === "spark";
|
|
4310
4629
|
const plotHeight = height ?? HEIGHT[variant];
|
|
4311
4630
|
const showTable = table ?? !spark;
|
|
4312
|
-
const uid =
|
|
4313
|
-
const frameEl =
|
|
4314
|
-
const scroller =
|
|
4315
|
-
const plot =
|
|
4316
|
-
const tipEl =
|
|
4317
|
-
const svgEl =
|
|
4318
|
-
const ignoreMouseUntil =
|
|
4319
|
-
const touchMoved =
|
|
4320
|
-
const dismissed =
|
|
4321
|
-
const opening =
|
|
4322
|
-
const pointerFocus =
|
|
4631
|
+
const uid = useId14().replace(/[^\w-]/g, "");
|
|
4632
|
+
const frameEl = useRef22(null);
|
|
4633
|
+
const scroller = useRef22(null);
|
|
4634
|
+
const plot = useRef22(null);
|
|
4635
|
+
const tipEl = useRef22(null);
|
|
4636
|
+
const svgEl = useRef22(null);
|
|
4637
|
+
const ignoreMouseUntil = useRef22(0);
|
|
4638
|
+
const touchMoved = useRef22(false);
|
|
4639
|
+
const dismissed = useRef22(null);
|
|
4640
|
+
const opening = useRef22(false);
|
|
4641
|
+
const pointerFocus = useRef22(false);
|
|
4323
4642
|
const floor = useTapFloor();
|
|
4324
|
-
const [width, setWidth] =
|
|
4325
|
-
const [openId, setOpenId] =
|
|
4326
|
-
const [rawCursor, setCursor] =
|
|
4327
|
-
const [said, setSaid] =
|
|
4328
|
-
const [ownPick, setOwnPick] =
|
|
4643
|
+
const [width, setWidth] = useState18(0);
|
|
4644
|
+
const [openId, setOpenId] = useState18(null);
|
|
4645
|
+
const [rawCursor, setCursor] = useState18(0);
|
|
4646
|
+
const [said, setSaid] = useState18("");
|
|
4647
|
+
const [ownPick, setOwnPick] = useState18(null);
|
|
4329
4648
|
const pick = selected === void 0 ? ownPick : selected;
|
|
4330
4649
|
const steps = props.variant === "bridge" ? props.steps : void 0;
|
|
4331
4650
|
const bridgeTones = props.variant === "bridge" ? props.tones : void 0;
|
|
@@ -4429,7 +4748,7 @@ function Chart(props) {
|
|
|
4429
4748
|
const byId = useMemo4(() => new Map(marks.map((m) => [m.id, m])), [marks]);
|
|
4430
4749
|
const lead = useCallback7((column) => marks.find((m) => m.column === column), [marks]);
|
|
4431
4750
|
const open = openId ? byId.get(openId) : void 0;
|
|
4432
|
-
|
|
4751
|
+
useEffect17(() => {
|
|
4433
4752
|
const el = plot.current;
|
|
4434
4753
|
if (!el) return;
|
|
4435
4754
|
const read = () => setWidth(el.clientWidth);
|
|
@@ -4446,13 +4765,13 @@ function Chart(props) {
|
|
|
4446
4765
|
el.classList.toggle("is-more-before", el.scrollLeft > 1);
|
|
4447
4766
|
el.classList.toggle("is-more-after", el.scrollLeft < last - 1);
|
|
4448
4767
|
}, []);
|
|
4449
|
-
|
|
4768
|
+
useEffect17(syncEdges, [syncEdges, plotWidth, count]);
|
|
4450
4769
|
useLayoutEffect5(() => {
|
|
4451
4770
|
if (!openId || !frameEl.current || !tipEl.current || !svgEl.current) return;
|
|
4452
4771
|
const anchor = [...svgEl.current.querySelectorAll("[data-anchor]")].find((el) => el.getAttribute("data-anchor") === openId);
|
|
4453
4772
|
if (anchor) placeTip(frameEl.current, anchor, tipEl.current, frameEl.current);
|
|
4454
4773
|
}, [openId, plotWidth, plotHeight]);
|
|
4455
|
-
|
|
4774
|
+
useEffect17(() => {
|
|
4456
4775
|
if (!openId) return;
|
|
4457
4776
|
const doc = frameEl.current?.ownerDocument;
|
|
4458
4777
|
const view = doc?.defaultView;
|
|
@@ -4524,7 +4843,7 @@ function Chart(props) {
|
|
|
4524
4843
|
const estimated = columns.filter((c) => c.estimated);
|
|
4525
4844
|
const estimatedTone = marks.find((m) => m.estimated && m.kind === "bar")?.tone ?? keys[0]?.tone ?? "neutral";
|
|
4526
4845
|
const hitBand = (band) => band === "up" ? { y: PAD, h: Math.max(zero - PAD, TARGET) } : band === "down" ? { y: zero, h: Math.max(plotHeight - PAD - zero, TARGET) } : { y: PAD, h: Math.max(plotHeight - PAD * 2, TARGET) };
|
|
4527
|
-
return /* @__PURE__ */
|
|
4846
|
+
return /* @__PURE__ */ jsxs36(
|
|
4528
4847
|
"div",
|
|
4529
4848
|
{
|
|
4530
4849
|
className: cx8("ui-chart", `ui-chart--${variant}`, selectable && "ui-chart--pick", className),
|
|
@@ -4535,9 +4854,9 @@ function Chart(props) {
|
|
|
4535
4854
|
"--ui-chart-pad": `${PAD}px`
|
|
4536
4855
|
},
|
|
4537
4856
|
children: [
|
|
4538
|
-
!spark && keys.length > 0 && /* @__PURE__ */
|
|
4539
|
-
keys.map((key) => /* @__PURE__ */
|
|
4540
|
-
key.shape === "line" ? /* @__PURE__ */
|
|
4857
|
+
!spark && keys.length > 0 && /* @__PURE__ */ jsxs36("ul", { className: "ui-chart__legend", children: [
|
|
4858
|
+
keys.map((key) => /* @__PURE__ */ jsxs36("li", { className: cx8("ui-chart__key", `ui-chart__tone--${key.tone}`), children: [
|
|
4859
|
+
key.shape === "line" ? /* @__PURE__ */ jsx41("svg", { className: "ui-chart__key-mark", width: "18", height: "12", viewBox: "0 0 18 12", "aria-hidden": "true", children: /* @__PURE__ */ jsx41("path", { className: "ui-chart__key-line", d: "M1 9 L6 5 L12 7 L17 3" }) }) : /* @__PURE__ */ jsx41("svg", { className: "ui-chart__key-mark", width: "12", height: "12", viewBox: "0 0 12 12", "aria-hidden": "true", children: /* @__PURE__ */ jsx41(
|
|
4541
4860
|
"rect",
|
|
4542
4861
|
{
|
|
4543
4862
|
className: "ui-chart__key-swatch",
|
|
@@ -4550,12 +4869,12 @@ function Chart(props) {
|
|
|
4550
4869
|
) }),
|
|
4551
4870
|
key.name
|
|
4552
4871
|
] }, key.id)),
|
|
4553
|
-
estimated.length > 0 && /* @__PURE__ */
|
|
4554
|
-
/* @__PURE__ */
|
|
4872
|
+
estimated.length > 0 && /* @__PURE__ */ jsxs36("li", { className: cx8("ui-chart__key", `ui-chart__tone--${estimatedTone}`), children: [
|
|
4873
|
+
/* @__PURE__ */ jsx41("svg", { className: "ui-chart__key-mark", width: "12", height: "12", viewBox: "0 0 12 12", "aria-hidden": "true", children: /* @__PURE__ */ jsx41("rect", { className: "ui-chart__key-estimated", x: "1.5", y: "1.5", width: "9", height: "9", rx: "1" }) }),
|
|
4555
4874
|
"Estimated"
|
|
4556
4875
|
] })
|
|
4557
4876
|
] }),
|
|
4558
|
-
/* @__PURE__ */
|
|
4877
|
+
/* @__PURE__ */ jsxs36(
|
|
4559
4878
|
"div",
|
|
4560
4879
|
{
|
|
4561
4880
|
ref: frameEl,
|
|
@@ -4579,8 +4898,8 @@ function Chart(props) {
|
|
|
4579
4898
|
setSaid("");
|
|
4580
4899
|
},
|
|
4581
4900
|
children: [
|
|
4582
|
-
!spark && scale.ticks.length > 0 && /* @__PURE__ */
|
|
4583
|
-
/* @__PURE__ */
|
|
4901
|
+
!spark && scale.ticks.length > 0 && /* @__PURE__ */ jsx41("div", { className: "ui-chart__axis", "aria-hidden": "true", children: [...scale.ticks].reverse().map((tick) => /* @__PURE__ */ jsx41("span", { className: "ui-chart__tick", children: formatAxis(tick) }, tick)) }),
|
|
4902
|
+
/* @__PURE__ */ jsx41("div", { ref: scroller, className: "ui-chart__scroll", tabIndex: -1, onScroll: () => {
|
|
4584
4903
|
syncEdges();
|
|
4585
4904
|
const anchor = [...svgEl.current?.querySelectorAll("[data-anchor]") ?? []].find((el) => el.getAttribute("data-anchor") === openId);
|
|
4586
4905
|
if (!anchor || !scroller.current || !frameEl.current || !tipEl.current) return;
|
|
@@ -4588,8 +4907,8 @@ function Chart(props) {
|
|
|
4588
4907
|
const view = scroller.current.getBoundingClientRect();
|
|
4589
4908
|
if (mark.right <= view.left || mark.left >= view.right) setOpenId(null);
|
|
4590
4909
|
else placeTip(frameEl.current, anchor, tipEl.current, frameEl.current);
|
|
4591
|
-
}, children: /* @__PURE__ */
|
|
4592
|
-
/* @__PURE__ */
|
|
4910
|
+
}, children: /* @__PURE__ */ jsxs36("div", { ref: plot, className: "ui-chart__plot", children: [
|
|
4911
|
+
/* @__PURE__ */ jsxs36(
|
|
4593
4912
|
"svg",
|
|
4594
4913
|
{
|
|
4595
4914
|
ref: svgEl,
|
|
@@ -4649,7 +4968,7 @@ function Chart(props) {
|
|
|
4649
4968
|
announce(mark.column, selectable ? mark.column : pick);
|
|
4650
4969
|
},
|
|
4651
4970
|
children: [
|
|
4652
|
-
!spark && pick !== null && pick >= 0 && pick < count && /* @__PURE__ */
|
|
4971
|
+
!spark && pick !== null && pick >= 0 && pick < count && /* @__PURE__ */ jsx41(
|
|
4653
4972
|
"rect",
|
|
4654
4973
|
{
|
|
4655
4974
|
className: "ui-chart__band",
|
|
@@ -4662,7 +4981,7 @@ function Chart(props) {
|
|
|
4662
4981
|
frame.links && frame.bars.slice(0, -1).map((bar, i) => {
|
|
4663
4982
|
const from = byId.get(bar.id);
|
|
4664
4983
|
const to = byId.get(frame.bars[i + 1].id);
|
|
4665
|
-
return from && to ? /* @__PURE__ */
|
|
4984
|
+
return from && to ? /* @__PURE__ */ jsx41(
|
|
4666
4985
|
"line",
|
|
4667
4986
|
{
|
|
4668
4987
|
className: "ui-chart__carry",
|
|
@@ -4674,7 +4993,7 @@ function Chart(props) {
|
|
|
4674
4993
|
`carry-${bar.id}`
|
|
4675
4994
|
) : null;
|
|
4676
4995
|
}),
|
|
4677
|
-
!spark && scale.ticks.filter((tick) => tick !== 0).map((tick) => /* @__PURE__ */
|
|
4996
|
+
!spark && scale.ticks.filter((tick) => tick !== 0).map((tick) => /* @__PURE__ */ jsx41(
|
|
4678
4997
|
"line",
|
|
4679
4998
|
{
|
|
4680
4999
|
className: "ui-chart__grid",
|
|
@@ -4685,7 +5004,7 @@ function Chart(props) {
|
|
|
4685
5004
|
},
|
|
4686
5005
|
`grid-${tick}`
|
|
4687
5006
|
)),
|
|
4688
|
-
!spark && scale.ticks.includes(0) && /* @__PURE__ */
|
|
5007
|
+
!spark && scale.ticks.includes(0) && /* @__PURE__ */ jsx41(
|
|
4689
5008
|
"line",
|
|
4690
5009
|
{
|
|
4691
5010
|
className: "ui-chart__zero",
|
|
@@ -4695,7 +5014,7 @@ function Chart(props) {
|
|
|
4695
5014
|
y2: px(y(0))
|
|
4696
5015
|
}
|
|
4697
5016
|
),
|
|
4698
|
-
marks.filter((m) => m.kind === "bar").map((mark) => /* @__PURE__ */
|
|
5017
|
+
marks.filter((m) => m.kind === "bar").map((mark) => /* @__PURE__ */ jsx41(
|
|
4699
5018
|
"path",
|
|
4700
5019
|
{
|
|
4701
5020
|
className: cx8(
|
|
@@ -4708,7 +5027,7 @@ function Chart(props) {
|
|
|
4708
5027
|
`bar-${mark.id}`
|
|
4709
5028
|
)),
|
|
4710
5029
|
["casing", "stroke"].map((layer) => lines.flatMap(
|
|
4711
|
-
(line) => line.values.slice(1).map((value, i) => Number.isFinite(value) && Number.isFinite(line.values[i]) ? /* @__PURE__ */
|
|
5030
|
+
(line) => line.values.slice(1).map((value, i) => Number.isFinite(value) && Number.isFinite(line.values[i]) ? /* @__PURE__ */ jsx41(
|
|
4712
5031
|
"line",
|
|
4713
5032
|
{
|
|
4714
5033
|
className: layer === "casing" ? "ui-chart__line-casing" : cx8(
|
|
@@ -4724,7 +5043,7 @@ function Chart(props) {
|
|
|
4724
5043
|
`${line.id}-${layer}-${i}`
|
|
4725
5044
|
) : null)
|
|
4726
5045
|
)),
|
|
4727
|
-
lines.flatMap((line) => line.values.map((value, i) => Number.isFinite(value) && !Number.isFinite(line.values[i - 1]) && !Number.isFinite(line.values[i + 1]) ? /* @__PURE__ */
|
|
5046
|
+
lines.flatMap((line) => line.values.map((value, i) => Number.isFinite(value) && !Number.isFinite(line.values[i - 1]) && !Number.isFinite(line.values[i + 1]) ? /* @__PURE__ */ jsx41(
|
|
4728
5047
|
"circle",
|
|
4729
5048
|
{
|
|
4730
5049
|
className: cx8("ui-chart__isolated", `ui-chart__tone--${line.tone}`),
|
|
@@ -4734,8 +5053,8 @@ function Chart(props) {
|
|
|
4734
5053
|
},
|
|
4735
5054
|
`isolated-${line.id}-${i}`
|
|
4736
5055
|
) : null)),
|
|
4737
|
-
marks.map((mark) => /* @__PURE__ */
|
|
4738
|
-
mark.kind === "bar" ? /* @__PURE__ */
|
|
5056
|
+
marks.map((mark) => /* @__PURE__ */ jsxs36("g", { "data-mark": mark.id, children: [
|
|
5057
|
+
mark.kind === "bar" ? /* @__PURE__ */ jsx41(
|
|
4739
5058
|
"rect",
|
|
4740
5059
|
{
|
|
4741
5060
|
className: "ui-chart__hit",
|
|
@@ -4744,7 +5063,7 @@ function Chart(props) {
|
|
|
4744
5063
|
y: px(hitBand(mark.band).y),
|
|
4745
5064
|
height: px(hitBand(mark.band).h)
|
|
4746
5065
|
}
|
|
4747
|
-
) : /* @__PURE__ */
|
|
5066
|
+
) : /* @__PURE__ */ jsx41(
|
|
4748
5067
|
"rect",
|
|
4749
5068
|
{
|
|
4750
5069
|
className: "ui-chart__hit",
|
|
@@ -4754,7 +5073,7 @@ function Chart(props) {
|
|
|
4754
5073
|
height: px(mark.hit?.h ?? TARGET)
|
|
4755
5074
|
}
|
|
4756
5075
|
),
|
|
4757
|
-
/* @__PURE__ */
|
|
5076
|
+
/* @__PURE__ */ jsx41(
|
|
4758
5077
|
"rect",
|
|
4759
5078
|
{
|
|
4760
5079
|
"data-anchor": mark.id,
|
|
@@ -4769,7 +5088,7 @@ function Chart(props) {
|
|
|
4769
5088
|
]
|
|
4770
5089
|
}
|
|
4771
5090
|
),
|
|
4772
|
-
!spark && /* @__PURE__ */
|
|
5091
|
+
!spark && /* @__PURE__ */ jsx41("div", { className: "ui-chart__periods", "aria-hidden": "true", children: columns.map((column, i) => /* @__PURE__ */ jsx41(
|
|
4773
5092
|
"span",
|
|
4774
5093
|
{
|
|
4775
5094
|
className: cx8("ui-chart__period", pick === i && "is-selected"),
|
|
@@ -4778,35 +5097,35 @@ function Chart(props) {
|
|
|
4778
5097
|
`${column.label}-${i}`
|
|
4779
5098
|
)) })
|
|
4780
5099
|
] }) }),
|
|
4781
|
-
/* @__PURE__ */
|
|
4782
|
-
/* @__PURE__ */
|
|
4783
|
-
/* @__PURE__ */
|
|
4784
|
-
(stateOf(columns[open.column]) || open.detail) && /* @__PURE__ */
|
|
5100
|
+
/* @__PURE__ */ jsx41("span", { ref: tipEl, className: cx8("ui-tip", openId && "is-open"), role: open ? "tooltip" : void 0, children: open && /* @__PURE__ */ jsxs36(Fragment15, { children: [
|
|
5101
|
+
/* @__PURE__ */ jsx41("span", { className: "ui-tip__label", children: spark ? columns[open.column]?.label : `${open.name}, ${columns[open.column]?.label}` }),
|
|
5102
|
+
/* @__PURE__ */ jsx41("span", { className: "ui-tip__value", children: format(open.value) }),
|
|
5103
|
+
(stateOf(columns[open.column]) || open.detail) && /* @__PURE__ */ jsx41("span", { className: "ui-tip__detail", children: stateOf(columns[open.column]) || open.detail })
|
|
4785
5104
|
] }) })
|
|
4786
5105
|
]
|
|
4787
5106
|
}
|
|
4788
5107
|
),
|
|
4789
|
-
/* @__PURE__ */
|
|
4790
|
-
showTable && /* @__PURE__ */
|
|
4791
|
-
/* @__PURE__ */
|
|
4792
|
-
/* @__PURE__ */
|
|
5108
|
+
/* @__PURE__ */ jsx41("div", { className: "ui-sr", role: "status", children: said }),
|
|
5109
|
+
showTable && /* @__PURE__ */ jsxs36("details", { className: "ui-chart__data", children: [
|
|
5110
|
+
/* @__PURE__ */ jsx41("summary", { className: "ui-focusable", children: "Values as a table" }),
|
|
5111
|
+
/* @__PURE__ */ jsx41(
|
|
4793
5112
|
"div",
|
|
4794
5113
|
{
|
|
4795
5114
|
className: "ui-table-scroll",
|
|
4796
5115
|
role: "region",
|
|
4797
5116
|
tabIndex: 0,
|
|
4798
5117
|
"aria-label": `${title}, as a table. Scroll for more columns.`,
|
|
4799
|
-
children: /* @__PURE__ */
|
|
4800
|
-
/* @__PURE__ */
|
|
4801
|
-
/* @__PURE__ */
|
|
4802
|
-
/* @__PURE__ */
|
|
5118
|
+
children: /* @__PURE__ */ jsxs36("table", { className: "ui-table", "aria-label": title, children: [
|
|
5119
|
+
/* @__PURE__ */ jsx41("thead", { children: /* @__PURE__ */ jsx41("tr", { children: tableHead.map((head, i) => /* @__PURE__ */ jsx41("th", { scope: "col", className: cx8(i > 0 && "ui-table__num"), children: head }, head)) }) }),
|
|
5120
|
+
/* @__PURE__ */ jsx41("tbody", { children: tableRows.map((row, i) => /* @__PURE__ */ jsxs36("tr", { "aria-current": pick === i ? true : void 0, children: [
|
|
5121
|
+
/* @__PURE__ */ jsxs36("th", { scope: "row", children: [
|
|
4803
5122
|
row.column.label,
|
|
4804
|
-
row.column.estimated && /* @__PURE__ */
|
|
5123
|
+
row.column.estimated && /* @__PURE__ */ jsxs36(Fragment15, { children: [
|
|
4805
5124
|
" ",
|
|
4806
|
-
/* @__PURE__ */
|
|
5125
|
+
/* @__PURE__ */ jsx41("span", { className: "ui-chart__state", children: stateOf(row.column) })
|
|
4807
5126
|
] })
|
|
4808
5127
|
] }),
|
|
4809
|
-
row.cells.map((cell, j) => /* @__PURE__ */
|
|
5128
|
+
row.cells.map((cell, j) => /* @__PURE__ */ jsx41("td", { className: "ui-table__num", children: cell }, tableHead[j + 1]))
|
|
4810
5129
|
] }, `${row.column.label}-${i}`)) })
|
|
4811
5130
|
] })
|
|
4812
5131
|
}
|
|
@@ -4820,7 +5139,7 @@ function Chart(props) {
|
|
|
4820
5139
|
// src/AccentPicker.tsx
|
|
4821
5140
|
import { forwardRef as forwardRef10 } from "react";
|
|
4822
5141
|
import { ACCENTS, accentSwatchStyle } from "@apliteni/apliteni-ui";
|
|
4823
|
-
import { jsx as
|
|
5142
|
+
import { jsx as jsx42 } from "react/jsx-runtime";
|
|
4824
5143
|
var AccentPicker = forwardRef10(function AccentPicker2({
|
|
4825
5144
|
value,
|
|
4826
5145
|
onChange,
|
|
@@ -4829,7 +5148,7 @@ var AccentPicker = forwardRef10(function AccentPicker2({
|
|
|
4829
5148
|
"aria-label": label = "Accent",
|
|
4830
5149
|
...rest
|
|
4831
5150
|
}, ref) {
|
|
4832
|
-
return /* @__PURE__ */
|
|
5151
|
+
return /* @__PURE__ */ jsx42(
|
|
4833
5152
|
"div",
|
|
4834
5153
|
{
|
|
4835
5154
|
...rest,
|
|
@@ -4840,7 +5159,7 @@ var AccentPicker = forwardRef10(function AccentPicker2({
|
|
|
4840
5159
|
"aria-label": label,
|
|
4841
5160
|
children: options.map((accent) => {
|
|
4842
5161
|
const title = accent.charAt(0).toUpperCase() + accent.slice(1);
|
|
4843
|
-
return /* @__PURE__ */
|
|
5162
|
+
return /* @__PURE__ */ jsx42(
|
|
4844
5163
|
"button",
|
|
4845
5164
|
{
|
|
4846
5165
|
type: "button",
|
|
@@ -4859,9 +5178,9 @@ var AccentPicker = forwardRef10(function AccentPicker2({
|
|
|
4859
5178
|
});
|
|
4860
5179
|
|
|
4861
5180
|
// src/NavTabs.tsx
|
|
4862
|
-
import { Fragment as
|
|
4863
|
-
import { safeUrl, observeNavFit, revealCurrentNav, revealFocusedNav } from "@apliteni/apliteni-ui";
|
|
4864
|
-
import { Fragment as
|
|
5181
|
+
import { Fragment as Fragment16, forwardRef as forwardRef11, useEffect as useEffect18, useRef as useRef23, useImperativeHandle as useImperativeHandle2 } from "react";
|
|
5182
|
+
import { safeUrl as safeUrl3, observeNavFit, revealCurrentNav, revealFocusedNav } from "@apliteni/apliteni-ui";
|
|
5183
|
+
import { Fragment as Fragment17, jsx as jsx43, jsxs as jsxs37 } from "react/jsx-runtime";
|
|
4865
5184
|
var NavTabs = forwardRef11(function NavTabs2({
|
|
4866
5185
|
items,
|
|
4867
5186
|
active,
|
|
@@ -4872,14 +5191,14 @@ var NavTabs = forwardRef11(function NavTabs2({
|
|
|
4872
5191
|
"aria-label": ariaLabel = "Tabs",
|
|
4873
5192
|
...rest
|
|
4874
5193
|
}, ref) {
|
|
4875
|
-
const navRef =
|
|
5194
|
+
const navRef = useRef23(null);
|
|
4876
5195
|
useImperativeHandle2(ref, () => navRef.current, []);
|
|
4877
5196
|
const signature = items.map((item) => item.id).join("\0");
|
|
4878
|
-
|
|
4879
|
-
|
|
5197
|
+
useEffect18(() => observeNavFit(navRef.current), []);
|
|
5198
|
+
useEffect18(() => {
|
|
4880
5199
|
if (navRef.current) revealCurrentNav(navRef.current);
|
|
4881
5200
|
}, [active, signature]);
|
|
4882
|
-
return /* @__PURE__ */
|
|
5201
|
+
return /* @__PURE__ */ jsx43(
|
|
4883
5202
|
"nav",
|
|
4884
5203
|
{
|
|
4885
5204
|
...rest,
|
|
@@ -4892,20 +5211,20 @@ var NavTabs = forwardRef11(function NavTabs2({
|
|
|
4892
5211
|
},
|
|
4893
5212
|
children: items.map((item) => {
|
|
4894
5213
|
const badge = item.badge != null && typeof item.badge === "object" ? item.badge : { text: item.badge, tone: void 0 };
|
|
4895
|
-
const inner = /* @__PURE__ */
|
|
4896
|
-
/* @__PURE__ */
|
|
4897
|
-
badge.text != null && badge.text !== "" && /* @__PURE__ */
|
|
5214
|
+
const inner = /* @__PURE__ */ jsxs37(Fragment17, { children: [
|
|
5215
|
+
/* @__PURE__ */ jsx43("span", { className: "ui-nav__tab-label", children: item.label }),
|
|
5216
|
+
badge.text != null && badge.text !== "" && /* @__PURE__ */ jsx43("span", { className: `ui-nav__badge is-${badge.tone || "neutral"}`, children: badge.text })
|
|
4898
5217
|
] });
|
|
4899
|
-
if (item.disabled) return /* @__PURE__ */
|
|
5218
|
+
if (item.disabled) return /* @__PURE__ */ jsx43("span", { className: "ui-nav__tab is-disabled", "aria-disabled": "true", children: inner }, item.id);
|
|
4900
5219
|
const current = item.id === active;
|
|
4901
5220
|
const linkProps = {
|
|
4902
5221
|
className: ["ui-nav__tab", current && "is-active"].filter(Boolean).join(" "),
|
|
4903
|
-
href:
|
|
5222
|
+
href: safeUrl3(item.href || `#${item.id}`),
|
|
4904
5223
|
target: item.target,
|
|
4905
5224
|
"aria-current": current ? "page" : void 0,
|
|
4906
5225
|
children: inner
|
|
4907
5226
|
};
|
|
4908
|
-
return /* @__PURE__ */
|
|
5227
|
+
return /* @__PURE__ */ jsx43(Fragment16, { children: renderLink ? renderLink(item, linkProps) : /* @__PURE__ */ jsx43("a", { ...linkProps }) }, item.id);
|
|
4909
5228
|
})
|
|
4910
5229
|
}
|
|
4911
5230
|
);
|
|
@@ -4913,8 +5232,8 @@ var NavTabs = forwardRef11(function NavTabs2({
|
|
|
4913
5232
|
|
|
4914
5233
|
// src/Breadcrumbs.tsx
|
|
4915
5234
|
import { forwardRef as forwardRef12 } from "react";
|
|
4916
|
-
import { icon as icon7, safeUrl as
|
|
4917
|
-
import { Fragment as
|
|
5235
|
+
import { icon as icon7, safeUrl as safeUrl4 } from "@apliteni/apliteni-ui";
|
|
5236
|
+
import { Fragment as Fragment18, jsx as jsx44, jsxs as jsxs38 } from "react/jsx-runtime";
|
|
4918
5237
|
var Breadcrumbs = forwardRef12(function Breadcrumbs2({
|
|
4919
5238
|
items,
|
|
4920
5239
|
renderLink,
|
|
@@ -4922,21 +5241,21 @@ var Breadcrumbs = forwardRef12(function Breadcrumbs2({
|
|
|
4922
5241
|
"aria-label": ariaLabel = "Breadcrumb",
|
|
4923
5242
|
...rest
|
|
4924
5243
|
}, ref) {
|
|
4925
|
-
return /* @__PURE__ */
|
|
5244
|
+
return /* @__PURE__ */ jsx44(
|
|
4926
5245
|
"nav",
|
|
4927
5246
|
{
|
|
4928
5247
|
...rest,
|
|
4929
5248
|
ref,
|
|
4930
5249
|
className: ["ui-nav", "ui-nav--crumbs", className].filter(Boolean).join(" "),
|
|
4931
5250
|
"aria-label": ariaLabel,
|
|
4932
|
-
children: /* @__PURE__ */
|
|
5251
|
+
children: /* @__PURE__ */ jsx44("ol", { className: "ui-nav__crumbs", children: items.map((item, index) => {
|
|
4933
5252
|
const current = index === items.length - 1;
|
|
4934
|
-
const inner = /* @__PURE__ */
|
|
4935
|
-
item.icon && /* @__PURE__ */
|
|
4936
|
-
/* @__PURE__ */
|
|
5253
|
+
const inner = /* @__PURE__ */ jsxs38(Fragment18, { children: [
|
|
5254
|
+
item.icon && /* @__PURE__ */ jsx44("span", { className: "ui-nav__ic", dangerouslySetInnerHTML: { __html: icon7(item.icon) } }),
|
|
5255
|
+
/* @__PURE__ */ jsx44("span", { className: "ui-nav__crumb-label", children: item.label })
|
|
4937
5256
|
] });
|
|
4938
|
-
const linkProps = !current && item.href ? { className: "ui-nav__crumb", href:
|
|
4939
|
-
return /* @__PURE__ */
|
|
5257
|
+
const linkProps = !current && item.href ? { className: "ui-nav__crumb", href: safeUrl4(item.href), target: item.target, children: inner } : null;
|
|
5258
|
+
return /* @__PURE__ */ jsx44("li", { className: "ui-nav__crumb-item", children: linkProps ? renderLink ? renderLink(item, linkProps) : /* @__PURE__ */ jsx44("a", { ...linkProps }) : /* @__PURE__ */ jsx44(
|
|
4940
5259
|
"span",
|
|
4941
5260
|
{
|
|
4942
5261
|
className: ["ui-nav__crumb", current && "is-current"].filter(Boolean).join(" "),
|
|
@@ -4977,10 +5296,12 @@ export {
|
|
|
4977
5296
|
DrawerSection,
|
|
4978
5297
|
Dropdown,
|
|
4979
5298
|
EmptyState,
|
|
5299
|
+
Feedback,
|
|
4980
5300
|
Field,
|
|
4981
5301
|
FileDrop,
|
|
4982
5302
|
FileField,
|
|
4983
5303
|
FilterBar,
|
|
5304
|
+
Footer,
|
|
4984
5305
|
Icon,
|
|
4985
5306
|
KeyValueList,
|
|
4986
5307
|
Modal,
|