@apliteni/apliteni-ui 0.132.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/guidelines/file-drop.md +9 -7
- package/package.json +1 -1
- package/react/README.md +46 -1
- package/react/dist/index.css +40 -0
- package/react/dist/index.d.ts +90 -4
- package/react/dist/index.js +1034 -672
- package/src/components/feedback.js +6 -3
- package/src/components/footer.js +5 -3
- package/src/components/index.js +4 -2
- package/src/styles/button.css +1 -1
- package/src/styles/card.css +26 -5
- package/src/styles/feedback.css +4 -3
- package/src/styles/file-drop.css +39 -0
- package/src/styles/footer.css +4 -3
- package/src/styles/layout.css +10 -8
package/react/dist/index.js
CHANGED
|
@@ -219,8 +219,7 @@ var Button = forwardRef3(function Button2({
|
|
|
219
219
|
// src/primitives/Badge.tsx
|
|
220
220
|
import { jsx as jsx5 } from "react/jsx-runtime";
|
|
221
221
|
function Badge({ variant = "neutral", children }) {
|
|
222
|
-
|
|
223
|
-
return /* @__PURE__ */ jsx5("span", { className: cls, children });
|
|
222
|
+
return /* @__PURE__ */ jsx5("span", { className: `ui-badge ui-badge--${variant}`, children });
|
|
224
223
|
}
|
|
225
224
|
|
|
226
225
|
// src/primitives/Avatar.tsx
|
|
@@ -283,24 +282,30 @@ var StatusDot = forwardRef5(function StatusDot2({
|
|
|
283
282
|
});
|
|
284
283
|
|
|
285
284
|
// src/primitives/Card.tsx
|
|
286
|
-
import {
|
|
287
|
-
|
|
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 }) {
|
|
288
288
|
const n = Number(level);
|
|
289
|
-
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}`;
|
|
290
290
|
const titled = title != null && title !== false && title !== "";
|
|
291
|
-
|
|
292
|
-
|
|
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
|
+
] }),
|
|
293
297
|
sub != null && /* @__PURE__ */ jsx9("div", { className: "ui-card__sub", children: sub }),
|
|
294
298
|
children
|
|
295
299
|
] });
|
|
300
|
+
return href != null ? /* @__PURE__ */ jsx9("a", { className: classes, href: safeUrl(href), children: inner }) : /* @__PURE__ */ jsx9("div", { className: classes, children: inner });
|
|
296
301
|
}
|
|
297
302
|
|
|
298
303
|
// src/primitives/Callout.tsx
|
|
299
|
-
import { calloutIcons, icon as
|
|
304
|
+
import { calloutIcons, icon as kitIcon2 } from "@apliteni/apliteni-ui";
|
|
300
305
|
import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
301
306
|
function Callout({ variant, icon: icon8 = calloutIcons[variant ?? "neutral"], children, actions }) {
|
|
302
307
|
return /* @__PURE__ */ jsxs6("div", { className: `ui-callout${variant && variant !== "neutral" ? ` ui-callout--${variant}` : ""}`, role: variant === "danger" ? "alert" : void 0, children: [
|
|
303
|
-
/* @__PURE__ */ jsx10("span", { className: "ui-callout__icon", dangerouslySetInnerHTML: { __html:
|
|
308
|
+
/* @__PURE__ */ jsx10("span", { className: "ui-callout__icon", dangerouslySetInnerHTML: { __html: kitIcon2(icon8) } }),
|
|
304
309
|
/* @__PURE__ */ jsxs6("div", { className: "ui-callout__body", children: [
|
|
305
310
|
children,
|
|
306
311
|
actions != null && /* @__PURE__ */ jsx10("div", { className: "ui-toolbar ui-callout__actions", children: actions })
|
|
@@ -352,7 +357,7 @@ function placeTip(host, mark, tip, bound, placement = "top") {
|
|
|
352
357
|
|
|
353
358
|
// src/Tooltip.tsx
|
|
354
359
|
import { useEffect, useId as useId2, useLayoutEffect as useLayoutEffect2, useRef as useRef2, useState as useState2 } from "react";
|
|
355
|
-
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";
|
|
356
361
|
var DOC_EVENTS = ["pointerdown", "pointercancel", "click", "keydown", "touchend"];
|
|
357
362
|
var CAPTURED = /* @__PURE__ */ new Set(["pointerdown", "pointercancel"]);
|
|
358
363
|
var wirings = /* @__PURE__ */ new WeakMap();
|
|
@@ -379,7 +384,7 @@ function wireDocument(doc, handlers) {
|
|
|
379
384
|
wirings.delete(doc);
|
|
380
385
|
};
|
|
381
386
|
}
|
|
382
|
-
var
|
|
387
|
+
var Text2 = ({ label = "", value = "", detail: detail2 = "" }) => /* @__PURE__ */ jsxs7(Fragment2, { children: [
|
|
383
388
|
/* @__PURE__ */ jsx11("span", { className: "ui-tip__label", hidden: !label, children: label }),
|
|
384
389
|
/* @__PURE__ */ jsx11("span", { className: "ui-tip__value", hidden: !value, children: value }),
|
|
385
390
|
/* @__PURE__ */ jsx11("span", { className: "ui-tip__detail", hidden: !detail2, children: detail2 })
|
|
@@ -533,14 +538,14 @@ function Tooltip({ text: text2, label = text2, value, detail: detail2, placement
|
|
|
533
538
|
},
|
|
534
539
|
children: [
|
|
535
540
|
/* @__PURE__ */ jsx11("span", { ref: trigger, className: "ui-focusable", tabIndex: 0, "aria-describedby": id, children }),
|
|
536
|
-
/* @__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 }) })
|
|
537
542
|
]
|
|
538
543
|
}
|
|
539
544
|
);
|
|
540
545
|
}
|
|
541
546
|
|
|
542
547
|
// src/primitives/StatBand.tsx
|
|
543
|
-
import { Fragment as
|
|
548
|
+
import { Fragment as Fragment3, jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
544
549
|
var GLYPH = { up: "arrowUp", down: "arrowDown", flat: "minus" };
|
|
545
550
|
var directionOf = (text2) => {
|
|
546
551
|
const t = text2.trim();
|
|
@@ -549,7 +554,7 @@ var directionOf = (text2) => {
|
|
|
549
554
|
var hasChange = (d) => !!d && d.value != null && d.value !== "";
|
|
550
555
|
function ContextRow({ caption, delta, basisId }) {
|
|
551
556
|
if (!hasChange(delta)) return caption ? /* @__PURE__ */ jsx12("dd", { className: "ui-stat__caption", children: caption }) : null;
|
|
552
|
-
const lead = caption ? /* @__PURE__ */ jsxs8(
|
|
557
|
+
const lead = caption ? /* @__PURE__ */ jsxs8(Fragment3, { children: [
|
|
553
558
|
/* @__PURE__ */ jsx12("span", { className: "ui-stat__caption", children: caption }),
|
|
554
559
|
" "
|
|
555
560
|
] }) : null;
|
|
@@ -559,7 +564,7 @@ function ContextRow({ caption, delta, basisId }) {
|
|
|
559
564
|
lead,
|
|
560
565
|
/* @__PURE__ */ jsx12(Icon, { name: GLYPH[dir] }),
|
|
561
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 }),
|
|
562
|
-
own ? /* @__PURE__ */ jsxs8(
|
|
567
|
+
own ? /* @__PURE__ */ jsxs8(Fragment3, { children: [
|
|
563
568
|
" ",
|
|
564
569
|
/* @__PURE__ */ jsx12("span", { className: "ui-stat__basis", children: own })
|
|
565
570
|
] }) : null
|
|
@@ -678,10 +683,12 @@ function sync() {
|
|
|
678
683
|
else document.removeEventListener("keydown", onKey);
|
|
679
684
|
}
|
|
680
685
|
}
|
|
681
|
-
function returnFocus(opener) {
|
|
686
|
+
function returnFocus(opener, fallback) {
|
|
682
687
|
const live = opener && !opener.isConnected && opener.id ? document.getElementById(opener.id) : opener;
|
|
683
|
-
|
|
684
|
-
|
|
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?.();
|
|
685
692
|
}
|
|
686
693
|
function enter(entry) {
|
|
687
694
|
const at = stack.findIndex((e) => {
|
|
@@ -711,7 +718,7 @@ function exit(entry) {
|
|
|
711
718
|
if (above) return;
|
|
712
719
|
const next = stack[stack.length - 1];
|
|
713
720
|
if (!next) {
|
|
714
|
-
returnFocus(entry.opener);
|
|
721
|
+
returnFocus(entry.opener, entry.fallback);
|
|
715
722
|
return;
|
|
716
723
|
}
|
|
717
724
|
const back = [entry.opener, next.resume].find((el) => el?.isConnected && next.panel.contains(el));
|
|
@@ -767,7 +774,7 @@ function usePresence(open, root, panel) {
|
|
|
767
774
|
}, [open, present]);
|
|
768
775
|
return { mounted: present, shown };
|
|
769
776
|
}
|
|
770
|
-
function useDialog(active, { root, panel, body, initialFocus }, onClose) {
|
|
777
|
+
function useDialog(active, { root, panel, body, initialFocus, fallbackFocus }, onClose) {
|
|
771
778
|
const parent = useContext(DialogScope);
|
|
772
779
|
const [scope] = useState3(() => ({ parent }));
|
|
773
780
|
const close = useRef3(onClose);
|
|
@@ -784,6 +791,7 @@ function useDialog(active, { root, panel, body, initialFocus }, onClose) {
|
|
|
784
791
|
initialFocus: initialFocus?.current ?? null,
|
|
785
792
|
close: () => close.current(),
|
|
786
793
|
opener: document.activeElement,
|
|
794
|
+
fallback: fallbackFocus?.current ?? null,
|
|
787
795
|
resume: null
|
|
788
796
|
};
|
|
789
797
|
enter(entry);
|
|
@@ -830,7 +838,7 @@ function Modal({ open, title, onClose, footer, children, initialFocusRef, role =
|
|
|
830
838
|
}
|
|
831
839
|
|
|
832
840
|
// src/Confirm.tsx
|
|
833
|
-
import { Fragment as
|
|
841
|
+
import { Fragment as Fragment4, jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
|
|
834
842
|
function Confirm({
|
|
835
843
|
open,
|
|
836
844
|
title,
|
|
@@ -851,7 +859,7 @@ function Confirm({
|
|
|
851
859
|
onClose: onCancel,
|
|
852
860
|
role: "alertdialog",
|
|
853
861
|
initialFocusRef: safeAction,
|
|
854
|
-
footer: /* @__PURE__ */ jsxs10(
|
|
862
|
+
footer: /* @__PURE__ */ jsxs10(Fragment4, { children: [
|
|
855
863
|
/* @__PURE__ */ jsx14(Button, { ref: safeAction, variant: "ghost", onClick: onCancel, children: cancelLabel }),
|
|
856
864
|
/* @__PURE__ */ jsx14(Button, { variant: danger ? "danger" : "primary", busy, onClick: onConfirm, children: confirmLabel })
|
|
857
865
|
] }),
|
|
@@ -860,10 +868,250 @@ function Confirm({
|
|
|
860
868
|
);
|
|
861
869
|
}
|
|
862
870
|
|
|
863
|
-
// src/
|
|
864
|
-
import {
|
|
871
|
+
// src/Feedback.tsx
|
|
872
|
+
import { useEffect as useEffect3, useRef as useRef6, useState as useState4 } from "react";
|
|
865
873
|
import { createPortal as createPortal2 } from "react-dom";
|
|
866
|
-
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";
|
|
867
1115
|
function Drawer({
|
|
868
1116
|
open,
|
|
869
1117
|
title,
|
|
@@ -874,18 +1122,18 @@ function Drawer({
|
|
|
874
1122
|
children,
|
|
875
1123
|
closeLabel = "Close"
|
|
876
1124
|
}) {
|
|
877
|
-
const root =
|
|
878
|
-
const panel =
|
|
879
|
-
const body =
|
|
1125
|
+
const root = useRef7(null);
|
|
1126
|
+
const panel = useRef7(null);
|
|
1127
|
+
const body = useRef7(null);
|
|
880
1128
|
const titleId = useId5();
|
|
881
1129
|
const { mounted, shown } = usePresence(open, root, panel);
|
|
882
1130
|
const scope = useDialog(shown, { root, panel, body }, onClose);
|
|
883
1131
|
if (!mounted) return null;
|
|
884
1132
|
const cls = ["ui-drawer", `ui-drawer--${side}`, `ui-drawer--${size}`, shown && "is-open"].filter(Boolean).join(" ");
|
|
885
|
-
return
|
|
886
|
-
/* @__PURE__ */
|
|
887
|
-
/* @__PURE__ */
|
|
888
|
-
/* @__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(
|
|
889
1137
|
"aside",
|
|
890
1138
|
{
|
|
891
1139
|
className: "ui-drawer__panel",
|
|
@@ -895,12 +1143,12 @@ function Drawer({
|
|
|
895
1143
|
tabIndex: -1,
|
|
896
1144
|
ref: panel,
|
|
897
1145
|
children: [
|
|
898
|
-
/* @__PURE__ */
|
|
899
|
-
/* @__PURE__ */
|
|
900
|
-
/* @__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" }) })
|
|
901
1149
|
] }),
|
|
902
|
-
/* @__PURE__ */
|
|
903
|
-
footer && /* @__PURE__ */
|
|
1150
|
+
/* @__PURE__ */ jsx16("div", { className: "ui-drawer__body", ref: body, children }),
|
|
1151
|
+
footer && /* @__PURE__ */ jsx16("footer", { className: "ui-drawer__footer", children: footer })
|
|
904
1152
|
]
|
|
905
1153
|
}
|
|
906
1154
|
)
|
|
@@ -910,12 +1158,12 @@ function Drawer({
|
|
|
910
1158
|
}
|
|
911
1159
|
|
|
912
1160
|
// src/CommandPalette.tsx
|
|
913
|
-
import { useCallback as useCallback2, useEffect as
|
|
914
|
-
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";
|
|
915
1163
|
import { rankGroups, icon as icon3 } from "@apliteni/apliteni-ui";
|
|
916
|
-
import { jsx as
|
|
1164
|
+
import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
917
1165
|
var cx2 = (...a) => a.filter(Boolean).join(" ");
|
|
918
|
-
var Glyph = ({ name, className }) => /* @__PURE__ */
|
|
1166
|
+
var Glyph = ({ name, className }) => /* @__PURE__ */ jsx17("span", { className, "aria-hidden": "true", dangerouslySetInnerHTML: { __html: icon3(name) } });
|
|
919
1167
|
var keysOf = (shortcut) => shortcut == null ? [] : Array.isArray(shortcut) ? shortcut : [shortcut];
|
|
920
1168
|
function CommandPalette({
|
|
921
1169
|
open,
|
|
@@ -931,12 +1179,12 @@ function CommandPalette({
|
|
|
931
1179
|
onQueryChange
|
|
932
1180
|
}) {
|
|
933
1181
|
const uid = useId6().replace(/:/g, "");
|
|
934
|
-
const root =
|
|
935
|
-
const panel =
|
|
936
|
-
const search =
|
|
937
|
-
const [query, setQuery] =
|
|
938
|
-
const [at, setAt] =
|
|
939
|
-
|
|
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(() => {
|
|
940
1188
|
if (open) {
|
|
941
1189
|
setQuery("");
|
|
942
1190
|
setAt(0);
|
|
@@ -948,7 +1196,7 @@ function CommandPalette({
|
|
|
948
1196
|
);
|
|
949
1197
|
const rows = useMemo(() => shown.flatMap((g) => g.items).filter((it) => !isDisabled(it)), [shown]);
|
|
950
1198
|
const active = rows[Math.min(at, rows.length - 1)];
|
|
951
|
-
|
|
1199
|
+
useEffect4(() => {
|
|
952
1200
|
setAt(0);
|
|
953
1201
|
}, [query]);
|
|
954
1202
|
const scope = useDialog(open, { root, panel, body: search }, onClose);
|
|
@@ -979,10 +1227,10 @@ function CommandPalette({
|
|
|
979
1227
|
if (!open) return null;
|
|
980
1228
|
const listId = `${uid}-list`;
|
|
981
1229
|
let n = 0;
|
|
982
|
-
return
|
|
983
|
-
/* @__PURE__ */
|
|
984
|
-
/* @__PURE__ */
|
|
985
|
-
/* @__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(
|
|
986
1234
|
"div",
|
|
987
1235
|
{
|
|
988
1236
|
className: "ui-cmdk__panel",
|
|
@@ -993,9 +1241,9 @@ function CommandPalette({
|
|
|
993
1241
|
ref: panel,
|
|
994
1242
|
onKeyDown,
|
|
995
1243
|
children: [
|
|
996
|
-
/* @__PURE__ */
|
|
997
|
-
/* @__PURE__ */
|
|
998
|
-
/* @__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(
|
|
999
1247
|
"input",
|
|
1000
1248
|
{
|
|
1001
1249
|
className: "ui-cmdk__input",
|
|
@@ -1017,19 +1265,19 @@ function CommandPalette({
|
|
|
1017
1265
|
}
|
|
1018
1266
|
)
|
|
1019
1267
|
] }),
|
|
1020
|
-
/* @__PURE__ */
|
|
1268
|
+
/* @__PURE__ */ jsx17("div", { className: "ui-cmdk__list", id: listId, role: "listbox", "aria-label": `${label} results`, children: shown.map((group, gi) => /* @__PURE__ */ jsxs13(
|
|
1021
1269
|
"div",
|
|
1022
1270
|
{
|
|
1023
1271
|
className: "ui-cmdk__group",
|
|
1024
1272
|
role: "group",
|
|
1025
1273
|
"aria-labelledby": group.label ? `${uid}-g${gi}` : void 0,
|
|
1026
1274
|
children: [
|
|
1027
|
-
group.label && /* @__PURE__ */
|
|
1275
|
+
group.label && /* @__PURE__ */ jsx17("div", { className: "ui-cmdk__group-head", id: `${uid}-g${gi}`, children: group.label }),
|
|
1028
1276
|
group.items.map((item) => {
|
|
1029
1277
|
const disabled = isDisabled(item);
|
|
1030
1278
|
const id = `${uid}-o${n++}`;
|
|
1031
1279
|
const on = item === active;
|
|
1032
|
-
return /* @__PURE__ */
|
|
1280
|
+
return /* @__PURE__ */ jsxs13(
|
|
1033
1281
|
"div",
|
|
1034
1282
|
{
|
|
1035
1283
|
id,
|
|
@@ -1049,13 +1297,13 @@ function CommandPalette({
|
|
|
1049
1297
|
},
|
|
1050
1298
|
onClick: (e) => run(item, e.metaKey || e.ctrlKey),
|
|
1051
1299
|
children: [
|
|
1052
|
-
item.icon && /* @__PURE__ */
|
|
1053
|
-
/* @__PURE__ */
|
|
1054
|
-
/* @__PURE__ */
|
|
1055
|
-
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 })
|
|
1056
1304
|
] }),
|
|
1057
|
-
item.badge && /* @__PURE__ */
|
|
1058
|
-
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)) })
|
|
1059
1307
|
]
|
|
1060
1308
|
},
|
|
1061
1309
|
item.id
|
|
@@ -1065,20 +1313,20 @@ function CommandPalette({
|
|
|
1065
1313
|
},
|
|
1066
1314
|
group.label ?? `g${gi}`
|
|
1067
1315
|
)) }),
|
|
1068
|
-
/* @__PURE__ */
|
|
1069
|
-
/* @__PURE__ */
|
|
1070
|
-
hint && /* @__PURE__ */
|
|
1071
|
-
/* @__PURE__ */
|
|
1072
|
-
/* @__PURE__ */
|
|
1073
|
-
/* @__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" }),
|
|
1074
1322
|
" move"
|
|
1075
1323
|
] }),
|
|
1076
|
-
/* @__PURE__ */
|
|
1077
|
-
/* @__PURE__ */
|
|
1324
|
+
/* @__PURE__ */ jsxs13("span", { children: [
|
|
1325
|
+
/* @__PURE__ */ jsx17("kbd", { className: "ui-cmdk__key", children: "\u21B5" }),
|
|
1078
1326
|
" run"
|
|
1079
1327
|
] }),
|
|
1080
|
-
/* @__PURE__ */
|
|
1081
|
-
/* @__PURE__ */
|
|
1328
|
+
/* @__PURE__ */ jsxs13("span", { children: [
|
|
1329
|
+
/* @__PURE__ */ jsx17("kbd", { className: "ui-cmdk__key", children: "esc" }),
|
|
1082
1330
|
" close"
|
|
1083
1331
|
] })
|
|
1084
1332
|
] })
|
|
@@ -1103,13 +1351,13 @@ function rowId(uid, groups, item) {
|
|
|
1103
1351
|
}
|
|
1104
1352
|
|
|
1105
1353
|
// src/DataTable.tsx
|
|
1106
|
-
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";
|
|
1107
1355
|
import { DEFAULT_PAGE_SIZE as DEFAULT_PAGE_SIZE2 } from "@apliteni/apliteni-ui";
|
|
1108
1356
|
|
|
1109
1357
|
// src/Pagination.tsx
|
|
1110
|
-
import { useEffect as
|
|
1358
|
+
import { useEffect as useEffect5, useId as useId7, useRef as useRef9, useState as useState6 } from "react";
|
|
1111
1359
|
import { DEFAULT_PAGE_SIZE } from "@apliteni/apliteni-ui";
|
|
1112
|
-
import { jsx as
|
|
1360
|
+
import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
|
|
1113
1361
|
var GHOST_SM = "ui-btn ui-btn--ghost ui-btn--sm";
|
|
1114
1362
|
var VARIANTS = ["steps", "numbered", "jump"];
|
|
1115
1363
|
var cx3 = (...a) => a.filter(Boolean).join(" ");
|
|
@@ -1152,10 +1400,10 @@ function Pagination({
|
|
|
1152
1400
|
onPageSizeChange
|
|
1153
1401
|
}) {
|
|
1154
1402
|
const auto = useId7();
|
|
1155
|
-
const [draft, setDraft] =
|
|
1156
|
-
const [drafting, setDrafting] =
|
|
1157
|
-
const nav =
|
|
1158
|
-
const pressed =
|
|
1403
|
+
const [draft, setDraft] = useState6("");
|
|
1404
|
+
const [drafting, setDrafting] = useState6(false);
|
|
1405
|
+
const nav = useRef9(null);
|
|
1406
|
+
const pressed = useRef9(null);
|
|
1159
1407
|
const uid = id ?? auto;
|
|
1160
1408
|
const kind = VARIANTS.includes(variant) ? variant : "steps";
|
|
1161
1409
|
const size = sizeOf(pageSize, DEFAULT_PAGE_SIZE);
|
|
@@ -1164,7 +1412,7 @@ function Pagination({
|
|
|
1164
1412
|
const rows = counted ? Math.max(0, asRows) : null;
|
|
1165
1413
|
const last = counted ? Math.max(1, Math.ceil(rows / size)) : null;
|
|
1166
1414
|
const at = counted ? Math.min(Math.max(1, int(page, 1)), last) : Math.min(Math.max(1, int(page, 1)), CAP - 1);
|
|
1167
|
-
const [draftFor, setDraftFor] =
|
|
1415
|
+
const [draftFor, setDraftFor] = useState6(at);
|
|
1168
1416
|
if (draftFor !== at) {
|
|
1169
1417
|
setDraftFor(at);
|
|
1170
1418
|
setDraft("");
|
|
@@ -1172,7 +1420,7 @@ function Pagination({
|
|
|
1172
1420
|
}
|
|
1173
1421
|
const offered = (Array.isArray(pageSizes) ? pageSizes : []).slice(0, 12).map((s) => int(s, 0)).filter((s) => s > 0);
|
|
1174
1422
|
const sizes = offered.length ? [.../* @__PURE__ */ new Set([...offered, size])].sort((a, b) => a - b) : [];
|
|
1175
|
-
|
|
1423
|
+
useEffect5(() => {
|
|
1176
1424
|
const was = pressed.current;
|
|
1177
1425
|
if (!was || loading) return;
|
|
1178
1426
|
pressed.current = null;
|
|
@@ -1201,7 +1449,7 @@ function Pagination({
|
|
|
1201
1449
|
const step = (label_, target, disabled) => (
|
|
1202
1450
|
// A control at an end is disabled and stays where it is: removing it slides
|
|
1203
1451
|
// the next control under a pointer already travelling toward it.
|
|
1204
|
-
/* @__PURE__ */
|
|
1452
|
+
/* @__PURE__ */ jsx18(
|
|
1205
1453
|
"button",
|
|
1206
1454
|
{
|
|
1207
1455
|
type: "button",
|
|
@@ -1240,14 +1488,14 @@ function Pagination({
|
|
|
1240
1488
|
if (single) {
|
|
1241
1489
|
steps = null;
|
|
1242
1490
|
} else if (!counted) {
|
|
1243
|
-
steps = /* @__PURE__ */
|
|
1491
|
+
steps = /* @__PURE__ */ jsxs14("div", { className: "ui-pager__steps", children: [
|
|
1244
1492
|
step("Prev", Math.max(1, at - 1), atStart),
|
|
1245
1493
|
step("Next", at + 1, !hasMore)
|
|
1246
1494
|
] });
|
|
1247
1495
|
} else {
|
|
1248
1496
|
let middle = null;
|
|
1249
1497
|
if (kind === "numbered") {
|
|
1250
|
-
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(
|
|
1251
1499
|
"button",
|
|
1252
1500
|
{
|
|
1253
1501
|
type: "button",
|
|
@@ -1262,9 +1510,9 @@ function Pagination({
|
|
|
1262
1510
|
n
|
|
1263
1511
|
));
|
|
1264
1512
|
} else if (kind === "jump") {
|
|
1265
|
-
middle = /* @__PURE__ */
|
|
1266
|
-
/* @__PURE__ */
|
|
1267
|
-
/* @__PURE__ */
|
|
1513
|
+
middle = /* @__PURE__ */ jsxs14("span", { className: "ui-pager__jump", children: [
|
|
1514
|
+
/* @__PURE__ */ jsx18("label", { htmlFor: `${uid}-jump`, children: "Page" }),
|
|
1515
|
+
/* @__PURE__ */ jsx18(
|
|
1268
1516
|
"input",
|
|
1269
1517
|
{
|
|
1270
1518
|
className: "ui-input ui-pager__jump-input",
|
|
@@ -1287,13 +1535,13 @@ function Pagination({
|
|
|
1287
1535
|
}
|
|
1288
1536
|
}
|
|
1289
1537
|
),
|
|
1290
|
-
/* @__PURE__ */
|
|
1538
|
+
/* @__PURE__ */ jsxs14("span", { className: "ui-pager__jump-of", children: [
|
|
1291
1539
|
"of ",
|
|
1292
1540
|
fmt(last)
|
|
1293
1541
|
] })
|
|
1294
1542
|
] });
|
|
1295
1543
|
}
|
|
1296
|
-
steps = /* @__PURE__ */
|
|
1544
|
+
steps = /* @__PURE__ */ jsxs14("div", { className: "ui-pager__steps", children: [
|
|
1297
1545
|
ends ? step("First", 1, atStart) : null,
|
|
1298
1546
|
step("Prev", Math.max(1, at - 1), atStart),
|
|
1299
1547
|
middle,
|
|
@@ -1301,7 +1549,7 @@ function Pagination({
|
|
|
1301
1549
|
ends ? step("Last", last, atEnd) : null
|
|
1302
1550
|
] });
|
|
1303
1551
|
}
|
|
1304
|
-
return /* @__PURE__ */
|
|
1552
|
+
return /* @__PURE__ */ jsxs14(
|
|
1305
1553
|
"nav",
|
|
1306
1554
|
{
|
|
1307
1555
|
ref: nav,
|
|
@@ -1309,10 +1557,10 @@ function Pagination({
|
|
|
1309
1557
|
"aria-label": label,
|
|
1310
1558
|
"aria-busy": loading ? true : void 0,
|
|
1311
1559
|
children: [
|
|
1312
|
-
/* @__PURE__ */
|
|
1313
|
-
sizes.length ? /* @__PURE__ */
|
|
1314
|
-
/* @__PURE__ */
|
|
1315
|
-
/* @__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(
|
|
1316
1564
|
"select",
|
|
1317
1565
|
{
|
|
1318
1566
|
className: "ui-select ui-pager__size-select",
|
|
@@ -1320,7 +1568,7 @@ function Pagination({
|
|
|
1320
1568
|
disabled: loading,
|
|
1321
1569
|
value: size,
|
|
1322
1570
|
onChange: (e) => onPageSizeChange?.(Number(e.target.value)),
|
|
1323
|
-
children: sizes.map((s) => /* @__PURE__ */
|
|
1571
|
+
children: sizes.map((s) => /* @__PURE__ */ jsx18("option", { value: s, children: fmt(s) }, s))
|
|
1324
1572
|
}
|
|
1325
1573
|
)
|
|
1326
1574
|
] }) : null,
|
|
@@ -1331,7 +1579,7 @@ function Pagination({
|
|
|
1331
1579
|
}
|
|
1332
1580
|
|
|
1333
1581
|
// src/DataTable.tsx
|
|
1334
|
-
import { Fragment as
|
|
1582
|
+
import { Fragment as Fragment6, jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
1335
1583
|
var NO_SORT = { key: void 0, dir: -1 };
|
|
1336
1584
|
function sortTableRows(rows, sort) {
|
|
1337
1585
|
if (sort.key === void 0) return [...rows];
|
|
@@ -1367,14 +1615,14 @@ function DataTable({
|
|
|
1367
1615
|
hasMore = false
|
|
1368
1616
|
}) {
|
|
1369
1617
|
const scrollable = stickyHeader || pinnedIdentity;
|
|
1370
|
-
const table =
|
|
1371
|
-
const [pagerHost, setPagerHost] =
|
|
1618
|
+
const table = useRef10(null);
|
|
1619
|
+
const [pagerHost, setPagerHost] = useState7(null);
|
|
1372
1620
|
const holdPagerBox = useCallback3(
|
|
1373
1621
|
(box) => setPagerHost(box?.parentElement ?? null),
|
|
1374
1622
|
[]
|
|
1375
1623
|
);
|
|
1376
|
-
const [strip2, setStrip] =
|
|
1377
|
-
|
|
1624
|
+
const [strip2, setStrip] = useState7();
|
|
1625
|
+
useEffect6(() => {
|
|
1378
1626
|
const el = table.current;
|
|
1379
1627
|
const host = pagerHost;
|
|
1380
1628
|
if (!el || !host || typeof ResizeObserver === "undefined") {
|
|
@@ -1394,16 +1642,16 @@ function DataTable({
|
|
|
1394
1642
|
measure();
|
|
1395
1643
|
return () => observer.disconnect();
|
|
1396
1644
|
}, [pagerHost, columns, rows]);
|
|
1397
|
-
const [localSort, setLocalSort] =
|
|
1645
|
+
const [localSort, setLocalSort] = useState7(
|
|
1398
1646
|
{ key: columns.find((c) => c.sortable)?.key, dir: -1 }
|
|
1399
1647
|
);
|
|
1400
1648
|
const owned = controlledPage === void 0;
|
|
1401
1649
|
const sort = controlledSort ?? (owned ? localSort : NO_SORT);
|
|
1402
1650
|
const sortIsKnown = owned || controlledSort !== void 0;
|
|
1403
|
-
const [localPage, setLocalPage] =
|
|
1404
|
-
const [localSize, setLocalSize] =
|
|
1651
|
+
const [localPage, setLocalPage] = useState7(1);
|
|
1652
|
+
const [localSize, setLocalSize] = useState7(DEFAULT_PAGE_SIZE2);
|
|
1405
1653
|
const size = sizeOf(pageSize, owned ? localSize : rows.length || DEFAULT_PAGE_SIZE2);
|
|
1406
|
-
const [pagedSort, setPagedSort] =
|
|
1654
|
+
const [pagedSort, setPagedSort] = useState7(sort);
|
|
1407
1655
|
if (pagedSort.key !== sort.key || pagedSort.dir !== sort.dir) {
|
|
1408
1656
|
setPagedSort(sort);
|
|
1409
1657
|
setLocalPage(1);
|
|
@@ -1426,7 +1674,7 @@ function DataTable({
|
|
|
1426
1674
|
onSortChange?.(next);
|
|
1427
1675
|
toFirstPage();
|
|
1428
1676
|
};
|
|
1429
|
-
const caret = (k) => /* @__PURE__ */
|
|
1677
|
+
const caret = (k) => /* @__PURE__ */ jsx19(
|
|
1430
1678
|
"svg",
|
|
1431
1679
|
{
|
|
1432
1680
|
className: "rx-caret",
|
|
@@ -1438,31 +1686,31 @@ function DataTable({
|
|
|
1438
1686
|
strokeLinejoin: "round",
|
|
1439
1687
|
"aria-hidden": "true",
|
|
1440
1688
|
focusable: "false",
|
|
1441
|
-
children: sort.key === k ? /* @__PURE__ */
|
|
1442
|
-
/* @__PURE__ */
|
|
1443
|
-
/* @__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" })
|
|
1444
1692
|
] })
|
|
1445
1693
|
}
|
|
1446
1694
|
);
|
|
1447
1695
|
const pageAllOn = selectable && slice.length > 0 && slice.every((r) => selected.has(r.name));
|
|
1448
1696
|
const pageSomeOn = selectable && !pageAllOn && slice.some((r) => selected.has(r.name));
|
|
1449
|
-
return /* @__PURE__ */
|
|
1450
|
-
/* @__PURE__ */
|
|
1697
|
+
return /* @__PURE__ */ jsxs15(Fragment6, { children: [
|
|
1698
|
+
/* @__PURE__ */ jsx19(
|
|
1451
1699
|
"div",
|
|
1452
1700
|
{
|
|
1453
1701
|
className: scrollable ? "ui-table-scroll" : void 0,
|
|
1454
1702
|
role: scrollable ? "region" : void 0,
|
|
1455
1703
|
"aria-label": scrollable ? scrollLabel : void 0,
|
|
1456
1704
|
tabIndex: scrollable ? 0 : void 0,
|
|
1457
|
-
children: /* @__PURE__ */
|
|
1705
|
+
children: /* @__PURE__ */ jsxs15(
|
|
1458
1706
|
"table",
|
|
1459
1707
|
{
|
|
1460
1708
|
ref: table,
|
|
1461
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(" "),
|
|
1462
1710
|
"aria-busy": loading || void 0,
|
|
1463
1711
|
children: [
|
|
1464
|
-
/* @__PURE__ */
|
|
1465
|
-
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(
|
|
1466
1714
|
"input",
|
|
1467
1715
|
{
|
|
1468
1716
|
type: "checkbox",
|
|
@@ -1478,7 +1726,7 @@ function DataTable({
|
|
|
1478
1726
|
// The sort control is a real <button> inside the header cell. It used to be
|
|
1479
1727
|
// role="button" ON the <th>, which threw away the columnheader role and put
|
|
1480
1728
|
// aria-sort on a role that forbids it.
|
|
1481
|
-
/* @__PURE__ */
|
|
1729
|
+
/* @__PURE__ */ jsx19(
|
|
1482
1730
|
"th",
|
|
1483
1731
|
{
|
|
1484
1732
|
scope: "col",
|
|
@@ -1488,8 +1736,8 @@ function DataTable({
|
|
|
1488
1736
|
// The label is its own box so it can truncate: in a pinned
|
|
1489
1737
|
// identity column on a phone the header is capped, and a bare
|
|
1490
1738
|
// text node would push the caret out of the cell instead.
|
|
1491
|
-
/* @__PURE__ */
|
|
1492
|
-
/* @__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 }),
|
|
1493
1741
|
caret(c.key)
|
|
1494
1742
|
] })
|
|
1495
1743
|
) : c.label
|
|
@@ -1498,10 +1746,10 @@ function DataTable({
|
|
|
1498
1746
|
)
|
|
1499
1747
|
))
|
|
1500
1748
|
] }) }),
|
|
1501
|
-
/* @__PURE__ */
|
|
1502
|
-
!slice.length && /* @__PURE__ */
|
|
1503
|
-
slice.map((r) => /* @__PURE__ */
|
|
1504
|
-
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(
|
|
1505
1753
|
"input",
|
|
1506
1754
|
{
|
|
1507
1755
|
type: "checkbox",
|
|
@@ -1510,7 +1758,7 @@ function DataTable({
|
|
|
1510
1758
|
onChange: () => onToggle(r.name)
|
|
1511
1759
|
}
|
|
1512
1760
|
) }) : null,
|
|
1513
|
-
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))
|
|
1514
1762
|
] }, r.name))
|
|
1515
1763
|
] })
|
|
1516
1764
|
]
|
|
@@ -1523,13 +1771,13 @@ function DataTable({
|
|
|
1523
1771
|
// The two are siblings, and no selector sizes one to the other, so the width is
|
|
1524
1772
|
// measured: a cap rather than a width, so a pager wider than the table wraps
|
|
1525
1773
|
// inside it and a table wider than the room still leaves the strip in the room.
|
|
1526
|
-
/* @__PURE__ */
|
|
1774
|
+
/* @__PURE__ */ jsx19(
|
|
1527
1775
|
"div",
|
|
1528
1776
|
{
|
|
1529
1777
|
className: "rx-table-pager",
|
|
1530
1778
|
ref: holdPagerBox,
|
|
1531
1779
|
style: strip2 ? { maxWidth: strip2.width, marginInlineStart: strip2.inset || void 0 } : void 0,
|
|
1532
|
-
children: /* @__PURE__ */
|
|
1780
|
+
children: /* @__PURE__ */ jsx19(
|
|
1533
1781
|
Pagination,
|
|
1534
1782
|
{
|
|
1535
1783
|
page,
|
|
@@ -1557,7 +1805,7 @@ function DataTable({
|
|
|
1557
1805
|
import { PAGE_SIZES as KIT_PAGE_SIZES, DEFAULT_PAGE_SIZE as KIT_DEFAULT_PAGE_SIZE } from "@apliteni/apliteni-ui";
|
|
1558
1806
|
|
|
1559
1807
|
// src/Loading.tsx
|
|
1560
|
-
import { jsx as
|
|
1808
|
+
import { jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
|
|
1561
1809
|
var cx4 = (...a) => a.filter(Boolean).join(" ");
|
|
1562
1810
|
function Skeleton({ lines = 3, width, height, radius, className }) {
|
|
1563
1811
|
const widths = Array.isArray(lines) ? lines : null;
|
|
@@ -1567,19 +1815,19 @@ function Skeleton({ lines = 3, width, height, radius, className }) {
|
|
|
1567
1815
|
if (!w && !height && !radius) return void 0;
|
|
1568
1816
|
return { ...w && { width: w }, ...height && { height }, ...radius && { borderRadius: radius } };
|
|
1569
1817
|
};
|
|
1570
|
-
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)) });
|
|
1571
1819
|
}
|
|
1572
1820
|
function SkeletonTable({ rows = 5, cols = 4, head = true }) {
|
|
1573
|
-
const cells = Array.from({ length: Math.max(1, cols) }, (_, i) => /* @__PURE__ */
|
|
1574
|
-
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(
|
|
1575
1823
|
"div",
|
|
1576
1824
|
{
|
|
1577
1825
|
className: "ui-skel ui-skel--table",
|
|
1578
1826
|
style: { "--skel-cols": Math.max(1, cols) },
|
|
1579
1827
|
"aria-hidden": "true",
|
|
1580
1828
|
children: [
|
|
1581
|
-
head && /* @__PURE__ */
|
|
1582
|
-
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))
|
|
1583
1831
|
]
|
|
1584
1832
|
}
|
|
1585
1833
|
);
|
|
@@ -1592,7 +1840,7 @@ function BusyRegion({
|
|
|
1592
1840
|
className,
|
|
1593
1841
|
children
|
|
1594
1842
|
}) {
|
|
1595
|
-
return /* @__PURE__ */
|
|
1843
|
+
return /* @__PURE__ */ jsxs16(
|
|
1596
1844
|
"div",
|
|
1597
1845
|
{
|
|
1598
1846
|
className: cx4("ui-busy", className),
|
|
@@ -1600,8 +1848,8 @@ function BusyRegion({
|
|
|
1600
1848
|
"aria-live": "polite",
|
|
1601
1849
|
"aria-busy": busy,
|
|
1602
1850
|
children: [
|
|
1603
|
-
/* @__PURE__ */
|
|
1604
|
-
/* @__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 })
|
|
1605
1853
|
]
|
|
1606
1854
|
}
|
|
1607
1855
|
);
|
|
@@ -1614,27 +1862,27 @@ function Denied({
|
|
|
1614
1862
|
className,
|
|
1615
1863
|
children
|
|
1616
1864
|
}) {
|
|
1617
|
-
return /* @__PURE__ */
|
|
1618
|
-
/* @__PURE__ */
|
|
1619
|
-
/* @__PURE__ */
|
|
1620
|
-
sub && /* @__PURE__ */
|
|
1621
|
-
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: [
|
|
1622
1870
|
"Needs ",
|
|
1623
|
-
/* @__PURE__ */
|
|
1871
|
+
/* @__PURE__ */ jsx20("code", { className: "ui-code", children: need })
|
|
1624
1872
|
] }),
|
|
1625
|
-
children && /* @__PURE__ */
|
|
1873
|
+
children && /* @__PURE__ */ jsx20("div", { className: "ui-denied__actions", children })
|
|
1626
1874
|
] });
|
|
1627
1875
|
}
|
|
1628
1876
|
|
|
1629
1877
|
// src/DatePicker.tsx
|
|
1630
1878
|
import {
|
|
1631
1879
|
useCallback as useCallback4,
|
|
1632
|
-
useEffect as
|
|
1880
|
+
useEffect as useEffect7,
|
|
1633
1881
|
useMemo as useMemo3,
|
|
1634
|
-
useRef as
|
|
1635
|
-
useState as
|
|
1882
|
+
useRef as useRef11,
|
|
1883
|
+
useState as useState8
|
|
1636
1884
|
} from "react";
|
|
1637
|
-
import { jsx as
|
|
1885
|
+
import { jsx as jsx21, jsxs as jsxs17 } from "react/jsx-runtime";
|
|
1638
1886
|
var cx5 = (...a) => a.filter(Boolean).join(" ");
|
|
1639
1887
|
var pad = (n) => String(n).padStart(2, "0");
|
|
1640
1888
|
var DAY_MS = 864e5;
|
|
@@ -1643,8 +1891,8 @@ var MONTH_RE = /^(\d{4})-(\d{2})$/;
|
|
|
1643
1891
|
var DAY_RE = /^(\d{4})-(\d{2})-(\d{2})$/;
|
|
1644
1892
|
var PHONE_MAX = 560;
|
|
1645
1893
|
function usePhone() {
|
|
1646
|
-
const [phone, setPhone] =
|
|
1647
|
-
|
|
1894
|
+
const [phone, setPhone] = useState8(false);
|
|
1895
|
+
useEffect7(() => {
|
|
1648
1896
|
const query = typeof window === "undefined" ? null : window.matchMedia?.(`(max-width: ${PHONE_MAX}px)`);
|
|
1649
1897
|
if (!query) return;
|
|
1650
1898
|
const read = () => setPhone(query.matches);
|
|
@@ -1739,14 +1987,14 @@ function DatePicker({
|
|
|
1739
1987
|
const picksRange = mode === "range" || mode === "day-range";
|
|
1740
1988
|
const phone = usePhone();
|
|
1741
1989
|
const asSheet = sheet ?? phone;
|
|
1742
|
-
const root =
|
|
1743
|
-
const trigger =
|
|
1744
|
-
const grid =
|
|
1745
|
-
const [selfOpen, setSelfOpen] =
|
|
1990
|
+
const root = useRef11(null);
|
|
1991
|
+
const trigger = useRef11(null);
|
|
1992
|
+
const grid = useRef11(null);
|
|
1993
|
+
const [selfOpen, setSelfOpen] = useState8(defaultOpen);
|
|
1746
1994
|
const open = openProp ?? selfOpen;
|
|
1747
|
-
const [selfValue, setSelfValue] =
|
|
1995
|
+
const [selfValue, setSelfValue] = useState8(defaultValue);
|
|
1748
1996
|
const picked = value !== void 0 ? value : selfValue;
|
|
1749
|
-
const [selfRange, setSelfRange] =
|
|
1997
|
+
const [selfRange, setSelfRange] = useState8(defaultRange ?? { start: null, end: null });
|
|
1750
1998
|
const span = range !== void 0 ? range : selfRange;
|
|
1751
1999
|
const names = useMemo3(() => ({
|
|
1752
2000
|
month: new Intl.DateTimeFormat(locale, { month: "long", timeZone: "UTC" }),
|
|
@@ -1777,20 +2025,20 @@ function DatePicker({
|
|
|
1777
2025
|
return grain === "month" ? monthOf(now) : now;
|
|
1778
2026
|
}, [today, grain]);
|
|
1779
2027
|
const anchor = toIndex(picked, grain) ?? toIndex(picksRange ? span.start ?? span.end : null, grain) ?? todayIndex;
|
|
1780
|
-
const [cursor, setCursor] =
|
|
1781
|
-
const land =
|
|
2028
|
+
const [cursor, setCursor] = useState8(() => clamp(anchor, lo, hi));
|
|
2029
|
+
const land = useRef11(false);
|
|
1782
2030
|
const setOpen = useCallback4((next) => {
|
|
1783
2031
|
if (openProp === void 0) setSelfOpen(next);
|
|
1784
2032
|
onOpenChange?.(next);
|
|
1785
2033
|
}, [openProp, onOpenChange]);
|
|
1786
|
-
const close =
|
|
2034
|
+
const close = useRef11(setOpen);
|
|
1787
2035
|
useIsoLayoutEffect(() => {
|
|
1788
2036
|
close.current = setOpen;
|
|
1789
2037
|
});
|
|
1790
|
-
|
|
2038
|
+
useEffect7(() => {
|
|
1791
2039
|
if (open) setCursor(clamp(anchor, lo, hi));
|
|
1792
2040
|
}, [open]);
|
|
1793
|
-
|
|
2041
|
+
useEffect7(() => {
|
|
1794
2042
|
if (!open || asSheet) return;
|
|
1795
2043
|
const doc = root.current?.ownerDocument ?? document;
|
|
1796
2044
|
const onClick = (e) => {
|
|
@@ -1952,10 +2200,10 @@ function DatePicker({
|
|
|
1952
2200
|
}
|
|
1953
2201
|
const noneBefore = lo != null && first <= lo;
|
|
1954
2202
|
const noneAfter = hi != null && last >= hi;
|
|
1955
|
-
const calendar = /* @__PURE__ */
|
|
1956
|
-
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) => {
|
|
1957
2205
|
const within = allowed(preset);
|
|
1958
|
-
return /* @__PURE__ */
|
|
2206
|
+
return /* @__PURE__ */ jsx21(
|
|
1959
2207
|
"button",
|
|
1960
2208
|
{
|
|
1961
2209
|
type: "button",
|
|
@@ -1967,9 +2215,9 @@ function DatePicker({
|
|
|
1967
2215
|
preset.label
|
|
1968
2216
|
);
|
|
1969
2217
|
}) }) : null,
|
|
1970
|
-
/* @__PURE__ */
|
|
1971
|
-
/* @__PURE__ */
|
|
1972
|
-
/* @__PURE__ */
|
|
2218
|
+
/* @__PURE__ */ jsxs17("div", { className: "ui-datepicker__calendar", children: [
|
|
2219
|
+
/* @__PURE__ */ jsxs17("div", { className: "ui-datepicker__head", children: [
|
|
2220
|
+
/* @__PURE__ */ jsx21(
|
|
1973
2221
|
"button",
|
|
1974
2222
|
{
|
|
1975
2223
|
type: "button",
|
|
@@ -1977,11 +2225,11 @@ function DatePicker({
|
|
|
1977
2225
|
"aria-label": stepBack,
|
|
1978
2226
|
disabled: noneBefore,
|
|
1979
2227
|
onClick: () => stepPage(-1),
|
|
1980
|
-
children: /* @__PURE__ */
|
|
2228
|
+
children: /* @__PURE__ */ jsx21(Icon, { name: "chevronLeft" })
|
|
1981
2229
|
}
|
|
1982
2230
|
),
|
|
1983
|
-
/* @__PURE__ */
|
|
1984
|
-
/* @__PURE__ */
|
|
2231
|
+
/* @__PURE__ */ jsx21("span", { className: "ui-datepicker__caption", "aria-live": "polite", children: caption }),
|
|
2232
|
+
/* @__PURE__ */ jsx21(
|
|
1985
2233
|
"button",
|
|
1986
2234
|
{
|
|
1987
2235
|
type: "button",
|
|
@@ -1989,11 +2237,11 @@ function DatePicker({
|
|
|
1989
2237
|
"aria-label": stepOn,
|
|
1990
2238
|
disabled: noneAfter,
|
|
1991
2239
|
onClick: () => stepPage(1),
|
|
1992
|
-
children: /* @__PURE__ */
|
|
2240
|
+
children: /* @__PURE__ */ jsx21(Icon, { name: "chevronRight" })
|
|
1993
2241
|
}
|
|
1994
2242
|
)
|
|
1995
2243
|
] }),
|
|
1996
|
-
/* @__PURE__ */
|
|
2244
|
+
/* @__PURE__ */ jsxs17(
|
|
1997
2245
|
"div",
|
|
1998
2246
|
{
|
|
1999
2247
|
className: cx5("ui-datepicker__grid", grain === "day" && "is-days"),
|
|
@@ -2002,7 +2250,7 @@ function DatePicker({
|
|
|
2002
2250
|
ref: grid,
|
|
2003
2251
|
onKeyDown: onGridKeyDown,
|
|
2004
2252
|
children: [
|
|
2005
|
-
weekdays.length > 0 && /* @__PURE__ */
|
|
2253
|
+
weekdays.length > 0 && /* @__PURE__ */ jsx21("div", { className: "ui-datepicker__row", role: "row", children: weekdays.map((weekday) => /* @__PURE__ */ jsx21(
|
|
2006
2254
|
"span",
|
|
2007
2255
|
{
|
|
2008
2256
|
className: "ui-datepicker__weekday",
|
|
@@ -2012,13 +2260,13 @@ function DatePicker({
|
|
|
2012
2260
|
},
|
|
2013
2261
|
weekday.long
|
|
2014
2262
|
)) }),
|
|
2015
|
-
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(
|
|
2016
2264
|
"span",
|
|
2017
2265
|
{
|
|
2018
2266
|
className: "ui-datepicker__cell",
|
|
2019
2267
|
role: "gridcell",
|
|
2020
2268
|
"aria-selected": isPicked(cell.index),
|
|
2021
|
-
children: /* @__PURE__ */
|
|
2269
|
+
children: /* @__PURE__ */ jsx21(
|
|
2022
2270
|
"button",
|
|
2023
2271
|
{
|
|
2024
2272
|
type: "button",
|
|
@@ -2037,12 +2285,12 @@ function DatePicker({
|
|
|
2037
2285
|
"aria-label": state(cell),
|
|
2038
2286
|
onClick: () => pick(cell),
|
|
2039
2287
|
onFocus: () => setCursor(cell.index),
|
|
2040
|
-
children: /* @__PURE__ */
|
|
2288
|
+
children: /* @__PURE__ */ jsx21("span", { className: "ui-datepicker__num", children: cell.label })
|
|
2041
2289
|
}
|
|
2042
2290
|
)
|
|
2043
2291
|
},
|
|
2044
2292
|
cell.period
|
|
2045
|
-
) : /* @__PURE__ */
|
|
2293
|
+
) : /* @__PURE__ */ jsx21("span", { className: "ui-datepicker__cell is-empty", role: "gridcell" }, `e${r}-${c}`)) }, `r${r}`))
|
|
2046
2294
|
]
|
|
2047
2295
|
}
|
|
2048
2296
|
)
|
|
@@ -2052,8 +2300,8 @@ function DatePicker({
|
|
|
2052
2300
|
// `open` on the root whichever form the panel takes, so the trigger's
|
|
2053
2301
|
// chevron flips for the sheet as it does for the popover. The panel rules
|
|
2054
2302
|
// it also switches on have no panel to find while the sheet is up.
|
|
2055
|
-
/* @__PURE__ */
|
|
2056
|
-
/* @__PURE__ */
|
|
2303
|
+
/* @__PURE__ */ jsxs17("div", { className: cx5("ui-dropdown", "ui-datepicker", open && "open"), ref: root, children: [
|
|
2304
|
+
/* @__PURE__ */ jsxs17(
|
|
2057
2305
|
"button",
|
|
2058
2306
|
{
|
|
2059
2307
|
type: "button",
|
|
@@ -2069,8 +2317,8 @@ function DatePicker({
|
|
|
2069
2317
|
setOpen(!open);
|
|
2070
2318
|
},
|
|
2071
2319
|
children: [
|
|
2072
|
-
/* @__PURE__ */
|
|
2073
|
-
/* @__PURE__ */
|
|
2320
|
+
/* @__PURE__ */ jsx21("span", { className: "ui-dropdown__value", children: shown ?? empty }),
|
|
2321
|
+
/* @__PURE__ */ jsx21("span", { className: "ui-dropdown__chevron", "aria-hidden": "true" })
|
|
2074
2322
|
]
|
|
2075
2323
|
}
|
|
2076
2324
|
),
|
|
@@ -2081,8 +2329,8 @@ function DatePicker({
|
|
|
2081
2329
|
// without taking the sheet's affordances left a phone reader with no
|
|
2082
2330
|
// visible way out and a Tab that walked into the live page behind it.
|
|
2083
2331
|
// why: guidelines/drawer.md
|
|
2084
|
-
/* @__PURE__ */
|
|
2085
|
-
) : /* @__PURE__ */
|
|
2332
|
+
/* @__PURE__ */ jsx21(Drawer, { open, side: "bottom", size: "md", title: name, onClose: () => setOpen(false), children: calendar })
|
|
2333
|
+
) : /* @__PURE__ */ jsx21(
|
|
2086
2334
|
"div",
|
|
2087
2335
|
{
|
|
2088
2336
|
className: cx5("ui-dropdown__panel", "ui-datepicker__panel", align === "end" && "is-end"),
|
|
@@ -2099,13 +2347,13 @@ function DatePicker({
|
|
|
2099
2347
|
|
|
2100
2348
|
// src/Dropdown.tsx
|
|
2101
2349
|
import {
|
|
2102
|
-
Fragment as
|
|
2350
|
+
Fragment as Fragment7,
|
|
2103
2351
|
useCallback as useCallback5,
|
|
2104
2352
|
useContext as useContext2,
|
|
2105
|
-
useEffect as
|
|
2353
|
+
useEffect as useEffect8,
|
|
2106
2354
|
useId as useId8,
|
|
2107
|
-
useRef as
|
|
2108
|
-
useState as
|
|
2355
|
+
useRef as useRef12,
|
|
2356
|
+
useState as useState9
|
|
2109
2357
|
} from "react";
|
|
2110
2358
|
import {
|
|
2111
2359
|
icon as icon4,
|
|
@@ -2127,7 +2375,7 @@ import { createContext as createContext2 } from "react";
|
|
|
2127
2375
|
var FieldContext = createContext2(null);
|
|
2128
2376
|
|
|
2129
2377
|
// src/Dropdown.tsx
|
|
2130
|
-
import { Fragment as
|
|
2378
|
+
import { Fragment as Fragment8, jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
|
|
2131
2379
|
var EXIT_SLACK_MS2 = 50;
|
|
2132
2380
|
var SETTLE_MS = 450;
|
|
2133
2381
|
var inPanel = (node) => {
|
|
@@ -2136,7 +2384,7 @@ var inPanel = (node) => {
|
|
|
2136
2384
|
};
|
|
2137
2385
|
var cx6 = (...a) => a.filter(Boolean).join(" ");
|
|
2138
2386
|
var isRow = (it) => Boolean(it) && it !== "---" && !it.separator;
|
|
2139
|
-
var Glyph2 = ({ name, className, hidden }) => /* @__PURE__ */
|
|
2387
|
+
var Glyph2 = ({ name, className, hidden }) => /* @__PURE__ */ jsx22(
|
|
2140
2388
|
"span",
|
|
2141
2389
|
{
|
|
2142
2390
|
className,
|
|
@@ -2149,7 +2397,7 @@ function RowBadge({ badge }) {
|
|
|
2149
2397
|
const given = typeof badge === "string" ? "" : badge.tone || "";
|
|
2150
2398
|
let tone = given || (/^live$/i.test(String(text2)) ? "live" : "neutral");
|
|
2151
2399
|
if (!given && tone === "neutral" && /^(?:off|unset|disabled|archive|archived)$/i.test(text2)) tone = "state";
|
|
2152
|
-
return /* @__PURE__ */
|
|
2400
|
+
return /* @__PURE__ */ jsx22("span", { className: `ui-dropdown__badge is-${tone}`, children: text2 });
|
|
2153
2401
|
}
|
|
2154
2402
|
var keyOf = (it) => it.value != null ? `v:${it.value}` : `l:${it.label}`;
|
|
2155
2403
|
var itemsIn = (panel) => Array.from(panel?.querySelectorAll("[data-dd-item]") ?? []).filter((el) => el.getAttribute("aria-disabled") !== "true" && !el.hidden);
|
|
@@ -2193,18 +2441,18 @@ function Dropdown({
|
|
|
2193
2441
|
onSelect,
|
|
2194
2442
|
row
|
|
2195
2443
|
}) {
|
|
2196
|
-
const [selfOpen, setSelfOpen] =
|
|
2444
|
+
const [selfOpen, setSelfOpen] = useState9(defaultOpen);
|
|
2197
2445
|
const open = openProp ?? selfOpen;
|
|
2198
|
-
const [pick, setPick] =
|
|
2199
|
-
const [query, setQuery] =
|
|
2200
|
-
const [activeKey, setActiveKey] =
|
|
2201
|
-
const root =
|
|
2202
|
-
const panel =
|
|
2203
|
-
const trigger =
|
|
2204
|
-
const field =
|
|
2205
|
-
const landOn =
|
|
2206
|
-
const revealed =
|
|
2207
|
-
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("");
|
|
2208
2456
|
const auto = useId8().replace(/:/g, "");
|
|
2209
2457
|
const uid = id ?? auto;
|
|
2210
2458
|
const inField = useContext2(FieldContext);
|
|
@@ -2213,7 +2461,7 @@ function Dropdown({
|
|
|
2213
2461
|
if (openProp === void 0) setSelfOpen(next);
|
|
2214
2462
|
onOpenChange?.(next);
|
|
2215
2463
|
}, [openProp, onOpenChange]);
|
|
2216
|
-
const close =
|
|
2464
|
+
const close = useRef12(setOpen);
|
|
2217
2465
|
useIsoLayoutEffect(() => {
|
|
2218
2466
|
close.current = setOpen;
|
|
2219
2467
|
});
|
|
@@ -2266,7 +2514,7 @@ function Dropdown({
|
|
|
2266
2514
|
stop.forEach((off) => off());
|
|
2267
2515
|
};
|
|
2268
2516
|
}, [open]);
|
|
2269
|
-
const opened =
|
|
2517
|
+
const opened = useRef12(false);
|
|
2270
2518
|
useIsoLayoutEffect(() => {
|
|
2271
2519
|
const el = panel.current;
|
|
2272
2520
|
if (open) {
|
|
@@ -2313,7 +2561,7 @@ function Dropdown({
|
|
|
2313
2561
|
const given = rows.find((it) => it.selected);
|
|
2314
2562
|
const givenKey = given ? keyOf(given) : null;
|
|
2315
2563
|
const pickedKey = pick && pick.against === givenKey ? pick.key : null;
|
|
2316
|
-
|
|
2564
|
+
useEffect8(() => {
|
|
2317
2565
|
if (pick && pick.against !== givenKey) setPick(null);
|
|
2318
2566
|
}, [givenKey, pick]);
|
|
2319
2567
|
const picked = pickedKey != null ? rows.find((it) => keyOf(it) === pickedKey) : void 0;
|
|
@@ -2329,7 +2577,7 @@ function Dropdown({
|
|
|
2329
2577
|
const rowIds = /* @__PURE__ */ new Map();
|
|
2330
2578
|
rows.forEach((it, i) => rowIds.set(it, `${uid}-opt-${i}`));
|
|
2331
2579
|
const listId = `${uid}-list`;
|
|
2332
|
-
|
|
2580
|
+
useEffect8(() => {
|
|
2333
2581
|
if (!open) return;
|
|
2334
2582
|
const mine = () => close.current(false);
|
|
2335
2583
|
for (const other of [...openNow]) other();
|
|
@@ -2338,7 +2586,7 @@ function Dropdown({
|
|
|
2338
2586
|
openNow.delete(mine);
|
|
2339
2587
|
};
|
|
2340
2588
|
}, [open]);
|
|
2341
|
-
|
|
2589
|
+
useEffect8(() => {
|
|
2342
2590
|
if (!open) return;
|
|
2343
2591
|
const doc = root.current?.ownerDocument ?? document;
|
|
2344
2592
|
const onClick = (e) => {
|
|
@@ -2568,7 +2816,7 @@ function Dropdown({
|
|
|
2568
2816
|
};
|
|
2569
2817
|
function renderRow(entry, key) {
|
|
2570
2818
|
if (!isRow(entry)) {
|
|
2571
|
-
return /* @__PURE__ */
|
|
2819
|
+
return /* @__PURE__ */ jsx22("div", { className: "ui-dropdown__sep", role: "separator", hidden: filtering || void 0 }, key);
|
|
2572
2820
|
}
|
|
2573
2821
|
const disabled2 = !!entry.disabled;
|
|
2574
2822
|
const selected = selectedOf(entry);
|
|
@@ -2590,23 +2838,23 @@ function Dropdown({
|
|
|
2590
2838
|
...asLink ? { href: entry.href, ...entry.target ? { target: entry.target } : null } : null,
|
|
2591
2839
|
...sx ? { id: rowIds.get(entry), hidden: hiddenBy(entry) || void 0 } : null,
|
|
2592
2840
|
onClick: (e) => choose(entry, e),
|
|
2593
|
-
children: /* @__PURE__ */
|
|
2594
|
-
entry.avatar ? /* @__PURE__ */
|
|
2595
|
-
/* @__PURE__ */
|
|
2596
|
-
/* @__PURE__ */
|
|
2597
|
-
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 })
|
|
2598
2846
|
] }),
|
|
2599
|
-
entry.badge ? /* @__PURE__ */
|
|
2600
|
-
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 })
|
|
2601
2849
|
] })
|
|
2602
2850
|
};
|
|
2603
|
-
if (row) return /* @__PURE__ */
|
|
2851
|
+
if (row) return /* @__PURE__ */ jsx22(Fragment7, { children: row(entry, props) }, key);
|
|
2604
2852
|
const Tag = asLink ? "a" : "div";
|
|
2605
|
-
return /* @__PURE__ */
|
|
2853
|
+
return /* @__PURE__ */ jsx22(Tag, { ...props }, key);
|
|
2606
2854
|
}
|
|
2607
2855
|
const body = sections?.length ? sections.map((section, si) => {
|
|
2608
2856
|
const gone = filtering && !(section.items || []).some((it) => isRow(it) && !hiddenBy(it));
|
|
2609
|
-
return /* @__PURE__ */
|
|
2857
|
+
return /* @__PURE__ */ jsxs18(
|
|
2610
2858
|
"div",
|
|
2611
2859
|
{
|
|
2612
2860
|
className: "ui-dropdown__section",
|
|
@@ -2614,7 +2862,7 @@ function Dropdown({
|
|
|
2614
2862
|
"aria-label": section.label || void 0,
|
|
2615
2863
|
hidden: gone || void 0,
|
|
2616
2864
|
children: [
|
|
2617
|
-
section.label && /* @__PURE__ */
|
|
2865
|
+
section.label && /* @__PURE__ */ jsx22("div", { className: "ui-dropdown__group", role: "presentation", children: section.label }),
|
|
2618
2866
|
(section.items || []).map((entry, i) => renderRow(entry, `s${si}-${i}`))
|
|
2619
2867
|
]
|
|
2620
2868
|
},
|
|
@@ -2622,12 +2870,12 @@ function Dropdown({
|
|
|
2622
2870
|
);
|
|
2623
2871
|
}) : (items || []).map((entry, i) => renderRow(entry, `i${i}`));
|
|
2624
2872
|
const cap = scroll && scroll !== true ? { "--ui-dropdown-cap": typeof scroll === "number" ? `${scroll}px` : scroll } : void 0;
|
|
2625
|
-
const none = sx && filtering && !visible.length ? /* @__PURE__ */
|
|
2626
|
-
/* @__PURE__ */
|
|
2627
|
-
/* @__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 })
|
|
2628
2876
|
] }) : null;
|
|
2629
|
-
return /* @__PURE__ */
|
|
2630
|
-
/* @__PURE__ */
|
|
2877
|
+
return /* @__PURE__ */ jsxs18("div", { className: cx6("ui-dropdown", open && "open"), id, ref: root, onKeyDown, children: [
|
|
2878
|
+
/* @__PURE__ */ jsxs18(
|
|
2631
2879
|
"button",
|
|
2632
2880
|
{
|
|
2633
2881
|
type: "button",
|
|
@@ -2647,16 +2895,16 @@ function Dropdown({
|
|
|
2647
2895
|
setOpen(!open);
|
|
2648
2896
|
},
|
|
2649
2897
|
children: [
|
|
2650
|
-
triggerContent != null ? triggerContent : /* @__PURE__ */
|
|
2651
|
-
marked2 && (chosen?.avatar ? /* @__PURE__ */
|
|
2652
|
-
label && /* @__PURE__ */
|
|
2653
|
-
/* @__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 })
|
|
2654
2902
|
] }),
|
|
2655
|
-
chevron && /* @__PURE__ */
|
|
2903
|
+
chevron && /* @__PURE__ */ jsx22("span", { className: "ui-dropdown__chevron", "aria-hidden": "true" })
|
|
2656
2904
|
]
|
|
2657
2905
|
}
|
|
2658
2906
|
),
|
|
2659
|
-
/* @__PURE__ */
|
|
2907
|
+
/* @__PURE__ */ jsxs18(
|
|
2660
2908
|
"div",
|
|
2661
2909
|
{
|
|
2662
2910
|
className: cx6(
|
|
@@ -2677,10 +2925,10 @@ function Dropdown({
|
|
|
2677
2925
|
onMouseMove,
|
|
2678
2926
|
children: [
|
|
2679
2927
|
header,
|
|
2680
|
-
sx ? /* @__PURE__ */
|
|
2681
|
-
/* @__PURE__ */
|
|
2682
|
-
/* @__PURE__ */
|
|
2683
|
-
/* @__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(
|
|
2684
2932
|
"input",
|
|
2685
2933
|
{
|
|
2686
2934
|
className: "ui-dropdown__search-input",
|
|
@@ -2704,8 +2952,8 @@ function Dropdown({
|
|
|
2704
2952
|
}
|
|
2705
2953
|
)
|
|
2706
2954
|
] }),
|
|
2707
|
-
/* @__PURE__ */
|
|
2708
|
-
/* @__PURE__ */
|
|
2955
|
+
/* @__PURE__ */ jsx22("div", { className: "ui-dropdown__list", role: "listbox", id: listId, "aria-label": name, style: cap, children: body }),
|
|
2956
|
+
/* @__PURE__ */ jsx22(
|
|
2709
2957
|
"div",
|
|
2710
2958
|
{
|
|
2711
2959
|
className: "ui-dropdown__none",
|
|
@@ -2730,7 +2978,7 @@ function strip(o) {
|
|
|
2730
2978
|
}
|
|
2731
2979
|
|
|
2732
2980
|
// src/BackLink.tsx
|
|
2733
|
-
import { jsx as
|
|
2981
|
+
import { jsx as jsx23, jsxs as jsxs19 } from "react/jsx-runtime";
|
|
2734
2982
|
var BARE = "Back";
|
|
2735
2983
|
var SCRIPTED = /^javascript:/i;
|
|
2736
2984
|
var LEADING = /^[\u0000-\u0020]+/;
|
|
@@ -2749,7 +2997,7 @@ function BackLink({
|
|
|
2749
2997
|
const name = text(label).replace(SAID, "");
|
|
2750
2998
|
const bare = !name || name.toLowerCase() === BARE.toLowerCase();
|
|
2751
2999
|
const Tag = as ?? "a";
|
|
2752
|
-
return /* @__PURE__ */
|
|
3000
|
+
return /* @__PURE__ */ jsxs19(
|
|
2753
3001
|
Tag,
|
|
2754
3002
|
{
|
|
2755
3003
|
className: ["ui-back", className].filter(Boolean).join(" "),
|
|
@@ -2757,8 +3005,8 @@ function BackLink({
|
|
|
2757
3005
|
"aria-label": bare ? void 0 : `${BARE} to ${name}`,
|
|
2758
3006
|
...rest,
|
|
2759
3007
|
children: [
|
|
2760
|
-
/* @__PURE__ */
|
|
2761
|
-
/* @__PURE__ */
|
|
3008
|
+
/* @__PURE__ */ jsx23(Icon, { name: "chevronLeft" }),
|
|
3009
|
+
/* @__PURE__ */ jsx23("span", { className: "ui-back__label", children: bare ? BARE : name })
|
|
2762
3010
|
]
|
|
2763
3011
|
}
|
|
2764
3012
|
);
|
|
@@ -2766,41 +3014,41 @@ function BackLink({
|
|
|
2766
3014
|
|
|
2767
3015
|
// src/TableValues.tsx
|
|
2768
3016
|
import { formatNumericValue, formatDeltaValue } from "@apliteni/apliteni-ui";
|
|
2769
|
-
import { jsx as
|
|
3017
|
+
import { jsx as jsx24, jsxs as jsxs20 } from "react/jsx-runtime";
|
|
2770
3018
|
function NumericValue(props) {
|
|
2771
3019
|
const value = formatNumericValue(props);
|
|
2772
|
-
return /* @__PURE__ */
|
|
3020
|
+
return /* @__PURE__ */ jsx24("span", { children: /* @__PURE__ */ jsxs20("span", { className: "ui-value", "aria-label": value.missing, children: [
|
|
2773
3021
|
value.text,
|
|
2774
|
-
value.unit && /* @__PURE__ */
|
|
3022
|
+
value.unit && /* @__PURE__ */ jsx24("span", { className: "ui-value__unit", children: value.unit })
|
|
2775
3023
|
] }) });
|
|
2776
3024
|
}
|
|
2777
3025
|
function DeltaValue(props) {
|
|
2778
3026
|
const value = formatDeltaValue(props);
|
|
2779
|
-
return /* @__PURE__ */
|
|
3027
|
+
return /* @__PURE__ */ jsx24("span", { children: /* @__PURE__ */ jsx24("span", { className: value.className, "aria-describedby": value.basisId || void 0, children: value.text }) });
|
|
2780
3028
|
}
|
|
2781
3029
|
function RowIdentity({ symbol, name, logo, href }) {
|
|
2782
3030
|
const Tag = href ? "a" : "span";
|
|
2783
|
-
return /* @__PURE__ */
|
|
2784
|
-
/* @__PURE__ */
|
|
2785
|
-
/* @__PURE__ */
|
|
2786
|
-
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) => {
|
|
2787
3035
|
e.currentTarget.hidden = false;
|
|
2788
3036
|
}, onError: (e) => {
|
|
2789
3037
|
e.currentTarget.hidden = true;
|
|
2790
3038
|
} })
|
|
2791
3039
|
] }),
|
|
2792
|
-
/* @__PURE__ */
|
|
2793
|
-
/* @__PURE__ */
|
|
3040
|
+
/* @__PURE__ */ jsx24("span", { className: "ui-identity__symbol", children: symbol }),
|
|
3041
|
+
/* @__PURE__ */ jsx24("span", { className: "ui-identity__name", children: name })
|
|
2794
3042
|
] });
|
|
2795
3043
|
}
|
|
2796
3044
|
|
|
2797
3045
|
// src/Segmented.tsx
|
|
2798
3046
|
import { segmentedNextIndex } from "@apliteni/apliteni-ui";
|
|
2799
|
-
import { jsx as
|
|
3047
|
+
import { jsx as jsx25 } from "react/jsx-runtime";
|
|
2800
3048
|
function Segmented({ options, value, onChange, label, appearance = "pill", size, block = false, disabled = false }) {
|
|
2801
3049
|
const enabled = options.filter((o) => !o.disabled);
|
|
2802
3050
|
const tabValue = enabled.some((o) => o.value === value) ? value : enabled[0]?.value;
|
|
2803
|
-
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(
|
|
2804
3052
|
"button",
|
|
2805
3053
|
{
|
|
2806
3054
|
type: "button",
|
|
@@ -2826,17 +3074,17 @@ function Segmented({ options, value, onChange, label, appearance = "pill", size,
|
|
|
2826
3074
|
}
|
|
2827
3075
|
|
|
2828
3076
|
// src/FilterBar.tsx
|
|
2829
|
-
import { useRef as
|
|
3077
|
+
import { useRef as useRef13, useState as useState10 } from "react";
|
|
2830
3078
|
import { filterChipText, filterChipName, filterChipUnset, filterChipItems, focusNextStop } from "@apliteni/apliteni-ui";
|
|
2831
|
-
import { Fragment as
|
|
3079
|
+
import { Fragment as Fragment9, jsx as jsx26, jsxs as jsxs21 } from "react/jsx-runtime";
|
|
2832
3080
|
var SEARCH_AT = 10;
|
|
2833
3081
|
var isRow2 = (entry) => entry !== "---" && !entry.separator;
|
|
2834
3082
|
function FilterBar({ filters, label = "Filters", clearLabel = "Clear all", clearVariant = "ghost", add, addLabel = "Filter", disabled = false, busy = false, onRemove, onClear, onChange, onAdd }) {
|
|
2835
|
-
const bar =
|
|
2836
|
-
const focused =
|
|
2837
|
-
const landing =
|
|
2838
|
-
const [opened, setOpened] =
|
|
2839
|
-
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);
|
|
2840
3088
|
const blocked = disabled || busy;
|
|
2841
3089
|
const offer = (add || []).filter((entry) => !filters.some((filter) => filter.id === entry.id));
|
|
2842
3090
|
const source = /* @__PURE__ */ new Map();
|
|
@@ -2871,7 +3119,7 @@ function FilterBar({ filters, label = "Filters", clearLabel = "Clear all", clear
|
|
|
2871
3119
|
if (target) target.focus();
|
|
2872
3120
|
else focusNextStop(bar.current);
|
|
2873
3121
|
});
|
|
2874
|
-
return /* @__PURE__ */
|
|
3122
|
+
return /* @__PURE__ */ jsx26("div", { children: /* @__PURE__ */ jsxs21(
|
|
2875
3123
|
"fieldset",
|
|
2876
3124
|
{
|
|
2877
3125
|
ref: bar,
|
|
@@ -2884,8 +3132,8 @@ function FilterBar({ filters, label = "Filters", clearLabel = "Clear all", clear
|
|
|
2884
3132
|
if (event.relatedTarget && !event.currentTarget.contains(event.relatedTarget)) focused.current = null;
|
|
2885
3133
|
},
|
|
2886
3134
|
children: [
|
|
2887
|
-
/* @__PURE__ */
|
|
2888
|
-
filters.map((filter, index) => /* @__PURE__ */
|
|
3135
|
+
/* @__PURE__ */ jsx26("legend", { className: "ui-filter-bar__legend", children: label }),
|
|
3136
|
+
filters.map((filter, index) => /* @__PURE__ */ jsxs21(
|
|
2889
3137
|
"fieldset",
|
|
2890
3138
|
{
|
|
2891
3139
|
className: "ui-filter-bar__chip",
|
|
@@ -2895,14 +3143,14 @@ function FilterBar({ filters, label = "Filters", clearLabel = "Clear all", clear
|
|
|
2895
3143
|
focused.current = { id: filter.id, index };
|
|
2896
3144
|
},
|
|
2897
3145
|
children: [
|
|
2898
|
-
/* @__PURE__ */
|
|
2899
|
-
/* @__PURE__ */
|
|
3146
|
+
/* @__PURE__ */ jsx26("legend", { className: "ui-filter-bar__legend", children: filter.label }),
|
|
3147
|
+
/* @__PURE__ */ jsx26(
|
|
2900
3148
|
Dropdown,
|
|
2901
3149
|
{
|
|
2902
3150
|
items: filterChipItems(filter),
|
|
2903
3151
|
variant: "select",
|
|
2904
3152
|
ariaLabel: filterChipName(filter),
|
|
2905
|
-
triggerContent: /* @__PURE__ */
|
|
3153
|
+
triggerContent: /* @__PURE__ */ jsx26("span", { className: filterChipUnset(filter) ? "ui-dropdown__value is-placeholder" : "ui-dropdown__value", children: filterChipText(filter) }),
|
|
2906
3154
|
open: !blocked && !filter.disabled && (opened[filter.id] && opened[filter.id].against === filter.open ? opened[filter.id].open : !!filter.open),
|
|
2907
3155
|
onOpenChange: (open) => setOpened((previous) => ({ ...previous, [filter.id]: { open, against: filter.open } })),
|
|
2908
3156
|
onSelect: (value) => {
|
|
@@ -2910,7 +3158,7 @@ function FilterBar({ filters, label = "Filters", clearLabel = "Clear all", clear
|
|
|
2910
3158
|
}
|
|
2911
3159
|
}
|
|
2912
3160
|
),
|
|
2913
|
-
/* @__PURE__ */
|
|
3161
|
+
/* @__PURE__ */ jsx26(
|
|
2914
3162
|
"button",
|
|
2915
3163
|
{
|
|
2916
3164
|
type: "button",
|
|
@@ -2927,16 +3175,16 @@ function FilterBar({ filters, label = "Filters", clearLabel = "Clear all", clear
|
|
|
2927
3175
|
},
|
|
2928
3176
|
filter.id
|
|
2929
3177
|
)),
|
|
2930
|
-
offering && /* @__PURE__ */
|
|
3178
|
+
offering && /* @__PURE__ */ jsx26("div", { "data-filter-add": "", onFocus: () => {
|
|
2931
3179
|
focused.current = null;
|
|
2932
|
-
}, children: /* @__PURE__ */
|
|
3180
|
+
}, children: /* @__PURE__ */ jsx26(
|
|
2933
3181
|
Dropdown,
|
|
2934
3182
|
{
|
|
2935
3183
|
variant: "menu",
|
|
2936
3184
|
sections,
|
|
2937
3185
|
ariaLabel: addLabel,
|
|
2938
|
-
triggerContent: /* @__PURE__ */
|
|
2939
|
-
/* @__PURE__ */
|
|
3186
|
+
triggerContent: /* @__PURE__ */ jsxs21(Fragment9, { children: [
|
|
3187
|
+
/* @__PURE__ */ jsx26(Icon, { name: "plus" }),
|
|
2940
3188
|
addLabel
|
|
2941
3189
|
] }),
|
|
2942
3190
|
search: options >= SEARCH_AT && { label: `Search ${label.toLowerCase()}` },
|
|
@@ -2950,9 +3198,9 @@ function FilterBar({ filters, label = "Filters", clearLabel = "Clear all", clear
|
|
|
2950
3198
|
}
|
|
2951
3199
|
}
|
|
2952
3200
|
) }),
|
|
2953
|
-
filters.length > 0 && /* @__PURE__ */
|
|
3201
|
+
filters.length > 0 && /* @__PURE__ */ jsx26("span", { "data-filter-clear": "", onFocus: () => {
|
|
2954
3202
|
focused.current = { id: null, index: 0 };
|
|
2955
|
-
}, children: /* @__PURE__ */
|
|
3203
|
+
}, children: /* @__PURE__ */ jsx26(Button, { size: "sm", variant: clearVariant, onClick: () => {
|
|
2956
3204
|
if (!blocked) onClear();
|
|
2957
3205
|
}, children: clearLabel }) })
|
|
2958
3206
|
]
|
|
@@ -2961,37 +3209,37 @@ function FilterBar({ filters, label = "Filters", clearLabel = "Clear all", clear
|
|
|
2961
3209
|
}
|
|
2962
3210
|
|
|
2963
3211
|
// src/KeyValueList.tsx
|
|
2964
|
-
import { jsx as
|
|
3212
|
+
import { jsx as jsx27, jsxs as jsxs22 } from "react/jsx-runtime";
|
|
2965
3213
|
function detail({ value, redacted }) {
|
|
2966
|
-
if (redacted) return /* @__PURE__ */
|
|
2967
|
-
/* @__PURE__ */
|
|
3214
|
+
if (redacted) return /* @__PURE__ */ jsxs22("span", { className: "ui-kv__hidden", children: [
|
|
3215
|
+
/* @__PURE__ */ jsx27(Icon, { name: "eyeOff" }),
|
|
2968
3216
|
"Hidden"
|
|
2969
3217
|
] });
|
|
2970
3218
|
if (value == null) return "\u2014";
|
|
2971
3219
|
return typeof value === "boolean" ? String(value) : value;
|
|
2972
3220
|
}
|
|
2973
3221
|
function KeyValueList({ rows, columns = 1, className, ...rest }) {
|
|
2974
|
-
return /* @__PURE__ */
|
|
2975
|
-
/* @__PURE__ */
|
|
2976
|
-
/* @__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) })
|
|
2977
3225
|
] }, index)) });
|
|
2978
3226
|
}
|
|
2979
3227
|
function DrawerSection({ title, headingLevel = 3, className, children, ...rest }) {
|
|
2980
3228
|
const Heading = `h${headingLevel}`;
|
|
2981
|
-
return /* @__PURE__ */
|
|
2982
|
-
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 }),
|
|
2983
3231
|
children
|
|
2984
3232
|
] });
|
|
2985
3233
|
}
|
|
2986
3234
|
|
|
2987
3235
|
// src/Snippet.tsx
|
|
2988
|
-
import { useEffect as
|
|
2989
|
-
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";
|
|
2990
3238
|
function Snippet({ label = "shell", code = "", children, copy = true, reveal = false, copyLabel = "Copy code" }) {
|
|
2991
|
-
const [status, setStatus] =
|
|
2992
|
-
const request =
|
|
2993
|
-
const timer =
|
|
2994
|
-
|
|
3239
|
+
const [status, setStatus] = useState11("idle");
|
|
3240
|
+
const request = useRef14(0);
|
|
3241
|
+
const timer = useRef14(void 0);
|
|
3242
|
+
useEffect9(() => {
|
|
2995
3243
|
setStatus("idle");
|
|
2996
3244
|
return () => {
|
|
2997
3245
|
request.current++;
|
|
@@ -3011,11 +3259,11 @@ function Snippet({ label = "shell", code = "", children, copy = true, reveal = f
|
|
|
3011
3259
|
if (current === request.current) setStatus("failed");
|
|
3012
3260
|
}
|
|
3013
3261
|
}
|
|
3014
|
-
return /* @__PURE__ */
|
|
3015
|
-
/* @__PURE__ */
|
|
3016
|
-
/* @__PURE__ */
|
|
3017
|
-
copy && /* @__PURE__ */
|
|
3018
|
-
/* @__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(
|
|
3019
3267
|
"button",
|
|
3020
3268
|
{
|
|
3021
3269
|
type: "button",
|
|
@@ -3023,31 +3271,31 @@ function Snippet({ label = "shell", code = "", children, copy = true, reveal = f
|
|
|
3023
3271
|
"aria-label": copyLabel,
|
|
3024
3272
|
title: copyLabel,
|
|
3025
3273
|
onClick: handleCopy,
|
|
3026
|
-
children: /* @__PURE__ */
|
|
3274
|
+
children: /* @__PURE__ */ jsx28(Icon, { name: status === "idle" ? "copy" : "check" })
|
|
3027
3275
|
}
|
|
3028
3276
|
),
|
|
3029
|
-
/* @__PURE__ */
|
|
3277
|
+
/* @__PURE__ */ jsx28("span", { className: "ui-sr ui-snippet__status", role: "status", "aria-live": "polite", children: status === "copied" ? "Copied" : status === "failed" ? "Copy failed" : "" })
|
|
3030
3278
|
] })
|
|
3031
3279
|
] }),
|
|
3032
|
-
/* @__PURE__ */
|
|
3280
|
+
/* @__PURE__ */ jsx28("pre", { children: children ?? code })
|
|
3033
3281
|
] });
|
|
3034
3282
|
}
|
|
3035
3283
|
|
|
3036
3284
|
// src/Tabs.tsx
|
|
3037
|
-
import { useEffect as
|
|
3285
|
+
import { useEffect as useEffect10, useId as useId9, useRef as useRef15 } from "react";
|
|
3038
3286
|
import { playEntrance } from "@apliteni/apliteni-ui/motion";
|
|
3039
|
-
import { Fragment as
|
|
3287
|
+
import { Fragment as Fragment11, jsx as jsx29, jsxs as jsxs24 } from "react/jsx-runtime";
|
|
3040
3288
|
function Tabs({ items, value, onChange, label }) {
|
|
3041
3289
|
const id = useId9();
|
|
3042
|
-
const previous =
|
|
3043
|
-
const activePanel =
|
|
3044
|
-
const buttons =
|
|
3045
|
-
|
|
3290
|
+
const previous = useRef15(value);
|
|
3291
|
+
const activePanel = useRef15(null);
|
|
3292
|
+
const buttons = useRef15([]);
|
|
3293
|
+
useEffect10(() => {
|
|
3046
3294
|
if (previous.current !== value) playEntrance(activePanel.current);
|
|
3047
3295
|
previous.current = value;
|
|
3048
3296
|
}, [value]);
|
|
3049
|
-
return /* @__PURE__ */
|
|
3050
|
-
/* @__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(
|
|
3051
3299
|
"button",
|
|
3052
3300
|
{
|
|
3053
3301
|
type: "button",
|
|
@@ -3085,7 +3333,7 @@ function Tabs({ items, value, onChange, label }) {
|
|
|
3085
3333
|
},
|
|
3086
3334
|
children: [
|
|
3087
3335
|
item.label,
|
|
3088
|
-
item.count != null && /* @__PURE__ */
|
|
3336
|
+
item.count != null && /* @__PURE__ */ jsxs24(Fragment11, { children: [
|
|
3089
3337
|
" ",
|
|
3090
3338
|
item.count
|
|
3091
3339
|
] })
|
|
@@ -3093,7 +3341,7 @@ function Tabs({ items, value, onChange, label }) {
|
|
|
3093
3341
|
},
|
|
3094
3342
|
item.value
|
|
3095
3343
|
)) }),
|
|
3096
|
-
/* @__PURE__ */
|
|
3344
|
+
/* @__PURE__ */ jsx29("div", { className: "ui-tabs__panels", children: items.map((item, i) => /* @__PURE__ */ jsx29(
|
|
3097
3345
|
"div",
|
|
3098
3346
|
{
|
|
3099
3347
|
className: "ui-tabs__panel",
|
|
@@ -3111,14 +3359,14 @@ function Tabs({ items, value, onChange, label }) {
|
|
|
3111
3359
|
}
|
|
3112
3360
|
|
|
3113
3361
|
// src/Timeline.tsx
|
|
3114
|
-
import { useEffect as
|
|
3362
|
+
import { useEffect as useEffect11, useRef as useRef16 } from "react";
|
|
3115
3363
|
import { playEntrance as playEntrance2, prefersReducedMotion } from "@apliteni/apliteni-ui/motion";
|
|
3116
|
-
import { jsx as
|
|
3364
|
+
import { jsx as jsx30, jsxs as jsxs25 } from "react/jsx-runtime";
|
|
3117
3365
|
var kindIcons = { person: "user", rule: "bolt", reversal: "refresh" };
|
|
3118
3366
|
function Timeline({ events, className, ...rest }) {
|
|
3119
|
-
const previousIds =
|
|
3120
|
-
const rows =
|
|
3121
|
-
|
|
3367
|
+
const previousIds = useRef16(new Set(events.map((event) => event.id)));
|
|
3368
|
+
const rows = useRef16(/* @__PURE__ */ new Map());
|
|
3369
|
+
useEffect11(() => {
|
|
3122
3370
|
if (previousIds.current.size > 0 && !prefersReducedMotion()) {
|
|
3123
3371
|
for (const event of events) {
|
|
3124
3372
|
if (previousIds.current.has(event.id)) continue;
|
|
@@ -3130,7 +3378,7 @@ function Timeline({ events, className, ...rest }) {
|
|
|
3130
3378
|
}
|
|
3131
3379
|
previousIds.current = new Set(events.map((event) => event.id));
|
|
3132
3380
|
}, [events]);
|
|
3133
|
-
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(
|
|
3134
3382
|
"li",
|
|
3135
3383
|
{
|
|
3136
3384
|
className: "ui-timeline__event",
|
|
@@ -3139,20 +3387,20 @@ function Timeline({ events, className, ...rest }) {
|
|
|
3139
3387
|
else rows.current.delete(event.id);
|
|
3140
3388
|
},
|
|
3141
3389
|
children: [
|
|
3142
|
-
/* @__PURE__ */
|
|
3390
|
+
/* @__PURE__ */ jsx30("span", { "aria-hidden": "true", className: [
|
|
3143
3391
|
"ui-timeline__marker",
|
|
3144
3392
|
event.kind && "ui-timeline__marker--kind",
|
|
3145
3393
|
event.kind === "reversal" && "ui-timeline__marker--reversal"
|
|
3146
|
-
].filter(Boolean).join(" "), children: event.kind && /* @__PURE__ */
|
|
3147
|
-
/* @__PURE__ */
|
|
3148
|
-
/* @__PURE__ */
|
|
3149
|
-
/* @__PURE__ */
|
|
3150
|
-
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 })
|
|
3151
3399
|
] }),
|
|
3152
|
-
/* @__PURE__ */
|
|
3153
|
-
(event.meta != null || event.undo) && /* @__PURE__ */
|
|
3154
|
-
event.meta != null && /* @__PURE__ */
|
|
3155
|
-
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" })
|
|
3156
3404
|
] })
|
|
3157
3405
|
]
|
|
3158
3406
|
},
|
|
@@ -3161,20 +3409,20 @@ function Timeline({ events, className, ...rest }) {
|
|
|
3161
3409
|
}
|
|
3162
3410
|
|
|
3163
3411
|
// src/Field.tsx
|
|
3164
|
-
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";
|
|
3165
3413
|
import { esc, icon as icon5 } from "@apliteni/apliteni-ui";
|
|
3166
|
-
import { jsx as
|
|
3414
|
+
import { jsx as jsx31, jsxs as jsxs26 } from "react/jsx-runtime";
|
|
3167
3415
|
function messages(id, hint, error) {
|
|
3168
3416
|
return [error && `${id}-error`, hint && `${id}-hint`].filter(Boolean).join(" ") || void 0;
|
|
3169
3417
|
}
|
|
3170
3418
|
function Frame({ id, labelId, label, hint, error, required, children }) {
|
|
3171
|
-
return /* @__PURE__ */
|
|
3172
|
-
/* @__PURE__ */
|
|
3419
|
+
return /* @__PURE__ */ jsxs26("div", { className: "ui-field", children: [
|
|
3420
|
+
/* @__PURE__ */ jsxs26("label", { className: "ui-field__label", id: labelId, htmlFor: id, children: [
|
|
3173
3421
|
label,
|
|
3174
|
-
required && /* @__PURE__ */
|
|
3422
|
+
required && /* @__PURE__ */ jsx31("span", { className: "ui-field__req", "aria-hidden": "true", children: "*" })
|
|
3175
3423
|
] }),
|
|
3176
3424
|
children,
|
|
3177
|
-
error && /* @__PURE__ */
|
|
3425
|
+
error && /* @__PURE__ */ jsx31(
|
|
3178
3426
|
"div",
|
|
3179
3427
|
{
|
|
3180
3428
|
id: `${id}-error`,
|
|
@@ -3183,7 +3431,7 @@ function Frame({ id, labelId, label, hint, error, required, children }) {
|
|
|
3183
3431
|
dangerouslySetInnerHTML: { __html: icon5("alert") + esc(error) }
|
|
3184
3432
|
}
|
|
3185
3433
|
),
|
|
3186
|
-
hint && /* @__PURE__ */
|
|
3434
|
+
hint && /* @__PURE__ */ jsx31("div", { id: `${id}-hint`, className: "ui-field__hint", children: hint })
|
|
3187
3435
|
] });
|
|
3188
3436
|
}
|
|
3189
3437
|
function wiring(id, hint, error) {
|
|
@@ -3193,13 +3441,13 @@ function Field({ id: suppliedId, label, hint, error, required, children }) {
|
|
|
3193
3441
|
const generatedId = useId10();
|
|
3194
3442
|
const id = suppliedId ?? generatedId;
|
|
3195
3443
|
const labelId = `${id}-label`;
|
|
3196
|
-
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 }) }) });
|
|
3197
3445
|
}
|
|
3198
3446
|
var TextField = forwardRef6(function TextField2({ label, hint, error, required, type = "text", unit, icon: glyph, className = "", ...props }, ref) {
|
|
3199
3447
|
const id = useId10();
|
|
3200
3448
|
const hasUnit = type === "number" && !!unit;
|
|
3201
3449
|
const describedBy = [messages(id, hint, error), hasUnit ? `${id}-unit` : ""].filter(Boolean).join(" ") || void 0;
|
|
3202
|
-
const control = /* @__PURE__ */
|
|
3450
|
+
const control = /* @__PURE__ */ jsx31(
|
|
3203
3451
|
"input",
|
|
3204
3452
|
{
|
|
3205
3453
|
ref,
|
|
@@ -3212,19 +3460,19 @@ var TextField = forwardRef6(function TextField2({ label, hint, error, required,
|
|
|
3212
3460
|
className: `ui-input${error ? " is-invalid" : ""} ${className}`
|
|
3213
3461
|
}
|
|
3214
3462
|
);
|
|
3215
|
-
const unitSpan = hasUnit ? /* @__PURE__ */
|
|
3216
|
-
return /* @__PURE__ */
|
|
3217
|
-
/* @__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) } }),
|
|
3218
3466
|
control,
|
|
3219
3467
|
unitSpan
|
|
3220
|
-
] }) : hasUnit ? /* @__PURE__ */
|
|
3468
|
+
] }) : hasUnit ? /* @__PURE__ */ jsxs26("div", { className: "ui-field-number", children: [
|
|
3221
3469
|
control,
|
|
3222
3470
|
unitSpan
|
|
3223
3471
|
] }) : control });
|
|
3224
3472
|
});
|
|
3225
3473
|
function TextArea({ label, hint, error, required, className = "", ...props }) {
|
|
3226
3474
|
const id = useId10();
|
|
3227
|
-
return /* @__PURE__ */
|
|
3475
|
+
return /* @__PURE__ */ jsx31(Frame, { ...{ id, label, hint, error, required }, children: /* @__PURE__ */ jsx31(
|
|
3228
3476
|
"textarea",
|
|
3229
3477
|
{
|
|
3230
3478
|
rows: 4,
|
|
@@ -3237,7 +3485,7 @@ function TextArea({ label, hint, error, required, className = "", ...props }) {
|
|
|
3237
3485
|
}
|
|
3238
3486
|
function SelectField({ label, hint, error, required, className = "", children, ...props }) {
|
|
3239
3487
|
const id = useId10();
|
|
3240
|
-
return /* @__PURE__ */
|
|
3488
|
+
return /* @__PURE__ */ jsx31(Frame, { ...{ id, label, hint, error, required }, children: /* @__PURE__ */ jsx31(
|
|
3241
3489
|
"select",
|
|
3242
3490
|
{
|
|
3243
3491
|
...props,
|
|
@@ -3250,10 +3498,10 @@ function SelectField({ label, hint, error, required, className = "", children, .
|
|
|
3250
3498
|
}
|
|
3251
3499
|
function FileField({ label, hint, error, required, disabled, onFileChange, className = "", ...props }) {
|
|
3252
3500
|
const id = useId10();
|
|
3253
|
-
const input =
|
|
3254
|
-
const [file, setFile] =
|
|
3255
|
-
const [dragging, setDragging] =
|
|
3256
|
-
|
|
3501
|
+
const input = useRef17(null);
|
|
3502
|
+
const [file, setFile] = useState12(null);
|
|
3503
|
+
const [dragging, setDragging] = useState12(false);
|
|
3504
|
+
useEffect12(() => {
|
|
3257
3505
|
const form = input.current?.form;
|
|
3258
3506
|
const reset = () => {
|
|
3259
3507
|
setFile(null);
|
|
@@ -3266,7 +3514,7 @@ function FileField({ label, hint, error, required, disabled, onFileChange, class
|
|
|
3266
3514
|
setFile(next);
|
|
3267
3515
|
onFileChange?.(next);
|
|
3268
3516
|
};
|
|
3269
|
-
return /* @__PURE__ */
|
|
3517
|
+
return /* @__PURE__ */ jsx31(Frame, { ...{ id, label, hint, error, required }, children: /* @__PURE__ */ jsxs26(
|
|
3270
3518
|
"div",
|
|
3271
3519
|
{
|
|
3272
3520
|
className: `ui-file${dragging && !disabled ? " is-dragging" : ""}${file ? " has-file" : ""}${error ? " is-invalid" : ""}${disabled ? " is-disabled" : ""}`,
|
|
@@ -3287,12 +3535,12 @@ function FileField({ label, hint, error, required, disabled, onFileChange, class
|
|
|
3287
3535
|
update(transfer.files[0]);
|
|
3288
3536
|
},
|
|
3289
3537
|
children: [
|
|
3290
|
-
/* @__PURE__ */
|
|
3291
|
-
/* @__PURE__ */
|
|
3292
|
-
/* @__PURE__ */
|
|
3293
|
-
/* @__PURE__ */
|
|
3294
|
-
/* @__PURE__ */
|
|
3295
|
-
/* @__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(
|
|
3296
3544
|
"input",
|
|
3297
3545
|
{
|
|
3298
3546
|
...props,
|
|
@@ -3312,8 +3560,32 @@ function FileField({ label, hint, error, required, disabled, onFileChange, class
|
|
|
3312
3560
|
}
|
|
3313
3561
|
|
|
3314
3562
|
// src/FileDrop.tsx
|
|
3315
|
-
import { useRef as
|
|
3316
|
-
|
|
3563
|
+
import { useRef as useRef18, useState as useState13 } from "react";
|
|
3564
|
+
|
|
3565
|
+
// src/EmptyState.tsx
|
|
3566
|
+
import { icon as kitIcon3, illo } from "@apliteni/apliteni-ui";
|
|
3567
|
+
import { jsx as jsx32, jsxs as jsxs27 } from "react/jsx-runtime";
|
|
3568
|
+
var cases = {
|
|
3569
|
+
"first-run": { title: "Nothing needs you yet", sub: "New items will appear here when they need your attention.", icon: "check" },
|
|
3570
|
+
"no-matches": { title: "No results in this view", sub: "Try another search or clear your filters.", icon: "search" },
|
|
3571
|
+
"not-found": { title: "We can't find that page", sub: "Check the address or return to the home page.", icon: "folder" },
|
|
3572
|
+
"not-yet-built": { title: "This ships later", sub: "This screen is not available yet. Check back later.", icon: "clock" }
|
|
3573
|
+
};
|
|
3574
|
+
function EmptyState({ variant = "first-run", title, sub, icon: icon8, art, actions }) {
|
|
3575
|
+
const preset = cases[variant];
|
|
3576
|
+
const heading = title ?? preset.title;
|
|
3577
|
+
const guidance = sub ?? preset.sub;
|
|
3578
|
+
const glyph = icon8 ?? preset.icon;
|
|
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 })
|
|
3584
|
+
] });
|
|
3585
|
+
}
|
|
3586
|
+
|
|
3587
|
+
// src/FileDrop.tsx
|
|
3588
|
+
import { Fragment as Fragment12, jsx as jsx33, jsxs as jsxs28 } from "react/jsx-runtime";
|
|
3317
3589
|
var MARKS = {
|
|
3318
3590
|
uploading: "clock",
|
|
3319
3591
|
done: "circleCheck",
|
|
@@ -3333,6 +3605,8 @@ var cx7 = (...a) => a.filter(Boolean).join(" ");
|
|
|
3333
3605
|
function FileDrop({
|
|
3334
3606
|
label = "Upload",
|
|
3335
3607
|
note,
|
|
3608
|
+
title,
|
|
3609
|
+
multiple,
|
|
3336
3610
|
accept,
|
|
3337
3611
|
dropLabel = "Drop to upload",
|
|
3338
3612
|
removeLabel = "Remove",
|
|
@@ -3341,13 +3615,14 @@ function FileDrop({
|
|
|
3341
3615
|
dragging,
|
|
3342
3616
|
disabled,
|
|
3343
3617
|
onFile,
|
|
3618
|
+
onFiles,
|
|
3344
3619
|
onRemove,
|
|
3345
3620
|
onRetry,
|
|
3346
3621
|
children,
|
|
3347
3622
|
className
|
|
3348
3623
|
}) {
|
|
3349
|
-
const input =
|
|
3350
|
-
const [over, setOver] =
|
|
3624
|
+
const input = useRef18(null);
|
|
3625
|
+
const [over, setOver] = useState13(false);
|
|
3351
3626
|
const status = file?.status ?? "uploading";
|
|
3352
3627
|
const word = status === "error" ? file?.error ?? WORDS.error : file?.state ?? WORDS[status];
|
|
3353
3628
|
const [stem, ext] = splitName(file?.name ?? "");
|
|
@@ -3356,118 +3631,155 @@ function FileDrop({
|
|
|
3356
3631
|
const showSize = Boolean(file?.size) && status !== "error";
|
|
3357
3632
|
const showTarget = (dragging ?? over) && !disabled;
|
|
3358
3633
|
const take = (chosen) => {
|
|
3359
|
-
if (chosen
|
|
3634
|
+
if (!chosen.length || disabled) return;
|
|
3635
|
+
onFile?.(chosen[0]);
|
|
3636
|
+
onFiles?.(chosen);
|
|
3637
|
+
};
|
|
3638
|
+
const pick = () => {
|
|
3639
|
+
if (!disabled) input.current?.click();
|
|
3640
|
+
};
|
|
3641
|
+
const picker = /* @__PURE__ */ jsx33(
|
|
3642
|
+
"input",
|
|
3643
|
+
{
|
|
3644
|
+
ref: input,
|
|
3645
|
+
type: "file",
|
|
3646
|
+
accept,
|
|
3647
|
+
multiple,
|
|
3648
|
+
disabled,
|
|
3649
|
+
hidden: true,
|
|
3650
|
+
tabIndex: -1,
|
|
3651
|
+
onClick: (event) => event.stopPropagation(),
|
|
3652
|
+
onChange: (event) => {
|
|
3653
|
+
take(Array.from(event.currentTarget.files ?? []));
|
|
3654
|
+
event.currentTarget.value = "";
|
|
3655
|
+
}
|
|
3656
|
+
}
|
|
3657
|
+
);
|
|
3658
|
+
const drag = {
|
|
3659
|
+
onDragOver: (event) => {
|
|
3660
|
+
if (disabled || !carriesFiles(event)) return;
|
|
3661
|
+
event.preventDefault();
|
|
3662
|
+
setOver(true);
|
|
3663
|
+
},
|
|
3664
|
+
onDragLeave: (event) => {
|
|
3665
|
+
if (!event.currentTarget.contains(event.relatedTarget)) setOver(false);
|
|
3666
|
+
},
|
|
3667
|
+
onDrop: (event) => {
|
|
3668
|
+
if (disabled || !carriesFiles(event)) return;
|
|
3669
|
+
event.preventDefault();
|
|
3670
|
+
setOver(false);
|
|
3671
|
+
take(Array.from(event.dataTransfer.files));
|
|
3672
|
+
}
|
|
3360
3673
|
};
|
|
3361
|
-
return /* @__PURE__ */
|
|
3674
|
+
if (title !== void 0) return /* @__PURE__ */ jsxs28(
|
|
3362
3675
|
"div",
|
|
3363
3676
|
{
|
|
3364
|
-
className: cx7("ui-drop", disabled && "is-disabled", className),
|
|
3365
|
-
|
|
3366
|
-
|
|
3367
|
-
event.preventDefault();
|
|
3368
|
-
setOver(true);
|
|
3369
|
-
},
|
|
3370
|
-
onDragLeave: (event) => {
|
|
3371
|
-
if (!event.currentTarget.contains(event.relatedTarget)) setOver(false);
|
|
3372
|
-
},
|
|
3373
|
-
onDrop: (event) => {
|
|
3374
|
-
if (disabled || !carriesFiles(event)) return;
|
|
3375
|
-
event.preventDefault();
|
|
3376
|
-
setOver(false);
|
|
3377
|
-
take(event.dataTransfer.files[0]);
|
|
3378
|
-
},
|
|
3677
|
+
className: cx7("ui-drop", "ui-drop--area", showTarget && "is-dragging", disabled && "is-disabled", className),
|
|
3678
|
+
onClick: pick,
|
|
3679
|
+
...drag,
|
|
3379
3680
|
children: [
|
|
3380
|
-
|
|
3381
|
-
|
|
3382
|
-
|
|
3383
|
-
|
|
3384
|
-
|
|
3385
|
-
|
|
3386
|
-
|
|
3387
|
-
] }),
|
|
3388
|
-
(onRemove || status === "error" && onRetry) && /* @__PURE__ */ jsxs26("span", { className: "ui-drop__actions", children: [
|
|
3389
|
-
status === "error" && onRetry && /* @__PURE__ */ jsx31(Button, { size: "sm", icon: "refresh", onClick: onRetry, disabled, children: retryLabel }),
|
|
3390
|
-
onRemove && /* @__PURE__ */ jsx31(
|
|
3391
|
-
Button,
|
|
3392
|
-
{
|
|
3393
|
-
variant: "ghost",
|
|
3394
|
-
size: "sm",
|
|
3395
|
-
onClick: onRemove,
|
|
3396
|
-
disabled,
|
|
3397
|
-
children: removeLabel
|
|
3398
|
-
}
|
|
3399
|
-
)
|
|
3400
|
-
] })
|
|
3401
|
-
] }),
|
|
3402
|
-
(showSize || showWord) && /* @__PURE__ */ jsxs26(
|
|
3403
|
-
"div",
|
|
3404
|
-
{
|
|
3405
|
-
className: cx7("ui-drop__facts", status === "error" && "ui-drop__error"),
|
|
3406
|
-
role: status === "error" ? "alert" : void 0,
|
|
3407
|
-
children: [
|
|
3408
|
-
showSize && /* @__PURE__ */ jsx31("span", { className: "ui-drop__size", children: file.size }),
|
|
3409
|
-
showWord && /* @__PURE__ */ jsxs26("span", { className: "ui-drop__state", children: [
|
|
3410
|
-
/* @__PURE__ */ jsx31(Icon, { name: MARKS[status] }),
|
|
3411
|
-
/* @__PURE__ */ jsx31("span", { className: "ui-drop__word", title: word, children: word })
|
|
3412
|
-
] })
|
|
3413
|
-
]
|
|
3414
|
-
}
|
|
3415
|
-
),
|
|
3416
|
-
hasBar && /* @__PURE__ */ jsx31(
|
|
3417
|
-
"span",
|
|
3418
|
-
{
|
|
3419
|
-
className: "ui-drop__bar",
|
|
3420
|
-
role: "progressbar",
|
|
3421
|
-
"aria-label": `${word} ${file.name}`,
|
|
3422
|
-
"aria-valuenow": file.progress,
|
|
3423
|
-
"aria-valuemin": 0,
|
|
3424
|
-
"aria-valuemax": 100,
|
|
3425
|
-
children: /* @__PURE__ */ jsx31("span", { style: { width: `${file.progress}%` } })
|
|
3426
|
-
}
|
|
3427
|
-
)
|
|
3428
|
-
] }) : /* @__PURE__ */ jsxs26(Fragment10, { children: [
|
|
3429
|
-
/* @__PURE__ */ jsx31(
|
|
3681
|
+
/* @__PURE__ */ jsx33(
|
|
3682
|
+
EmptyState,
|
|
3683
|
+
{
|
|
3684
|
+
icon: "upload",
|
|
3685
|
+
title,
|
|
3686
|
+
sub: note ?? "",
|
|
3687
|
+
actions: /* @__PURE__ */ jsx33(
|
|
3430
3688
|
Button,
|
|
3431
3689
|
{
|
|
3690
|
+
variant: "primary",
|
|
3432
3691
|
size: "sm",
|
|
3433
3692
|
icon: "upload",
|
|
3434
3693
|
disabled,
|
|
3435
|
-
onClick: () =>
|
|
3694
|
+
onClick: (event) => {
|
|
3695
|
+
event.stopPropagation();
|
|
3696
|
+
pick();
|
|
3697
|
+
},
|
|
3436
3698
|
children: label
|
|
3437
3699
|
}
|
|
3438
|
-
)
|
|
3439
|
-
|
|
3440
|
-
|
|
3441
|
-
|
|
3442
|
-
"input",
|
|
3443
|
-
{
|
|
3444
|
-
ref: input,
|
|
3445
|
-
type: "file",
|
|
3446
|
-
accept,
|
|
3447
|
-
disabled,
|
|
3448
|
-
hidden: true,
|
|
3449
|
-
tabIndex: -1,
|
|
3450
|
-
onChange: (event) => {
|
|
3451
|
-
take(event.currentTarget.files?.[0]);
|
|
3452
|
-
event.currentTarget.value = "";
|
|
3453
|
-
}
|
|
3454
|
-
}
|
|
3455
|
-
)
|
|
3456
|
-
] }),
|
|
3457
|
-
showTarget && /* @__PURE__ */ jsx31("div", { className: "ui-drop__target", "aria-hidden": "true", children: dropLabel })
|
|
3700
|
+
)
|
|
3701
|
+
}
|
|
3702
|
+
),
|
|
3703
|
+
picker
|
|
3458
3704
|
]
|
|
3459
3705
|
}
|
|
3460
3706
|
);
|
|
3707
|
+
return /* @__PURE__ */ jsxs28("div", { className: cx7("ui-drop", disabled && "is-disabled", className), ...drag, children: [
|
|
3708
|
+
children,
|
|
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 })
|
|
3715
|
+
] }),
|
|
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(
|
|
3719
|
+
Button,
|
|
3720
|
+
{
|
|
3721
|
+
variant: "ghost",
|
|
3722
|
+
size: "sm",
|
|
3723
|
+
onClick: onRemove,
|
|
3724
|
+
disabled,
|
|
3725
|
+
children: removeLabel
|
|
3726
|
+
}
|
|
3727
|
+
)
|
|
3728
|
+
] })
|
|
3729
|
+
] }),
|
|
3730
|
+
(showSize || showWord) && /* @__PURE__ */ jsxs28(
|
|
3731
|
+
"div",
|
|
3732
|
+
{
|
|
3733
|
+
className: cx7("ui-drop__facts", status === "error" && "ui-drop__error"),
|
|
3734
|
+
role: status === "error" ? "alert" : void 0,
|
|
3735
|
+
children: [
|
|
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 })
|
|
3740
|
+
] })
|
|
3741
|
+
]
|
|
3742
|
+
}
|
|
3743
|
+
),
|
|
3744
|
+
hasBar && /* @__PURE__ */ jsx33(
|
|
3745
|
+
"span",
|
|
3746
|
+
{
|
|
3747
|
+
className: "ui-drop__bar",
|
|
3748
|
+
role: "progressbar",
|
|
3749
|
+
"aria-label": `${word} ${file.name}`,
|
|
3750
|
+
"aria-valuenow": file.progress,
|
|
3751
|
+
"aria-valuemin": 0,
|
|
3752
|
+
"aria-valuemax": 100,
|
|
3753
|
+
children: /* @__PURE__ */ jsx33("span", { style: { width: `${file.progress}%` } })
|
|
3754
|
+
}
|
|
3755
|
+
)
|
|
3756
|
+
] }) : /* @__PURE__ */ jsxs28(Fragment12, { children: [
|
|
3757
|
+
/* @__PURE__ */ jsx33(
|
|
3758
|
+
Button,
|
|
3759
|
+
{
|
|
3760
|
+
size: "sm",
|
|
3761
|
+
icon: "upload",
|
|
3762
|
+
disabled,
|
|
3763
|
+
onClick: pick,
|
|
3764
|
+
children: label
|
|
3765
|
+
}
|
|
3766
|
+
),
|
|
3767
|
+
note && /* @__PURE__ */ jsx33("p", { className: "ui-drop__note", children: note })
|
|
3768
|
+
] }),
|
|
3769
|
+
picker
|
|
3770
|
+
] }),
|
|
3771
|
+
showTarget && /* @__PURE__ */ jsx33("div", { className: "ui-drop__target", "aria-hidden": "true", children: dropLabel })
|
|
3772
|
+
] });
|
|
3461
3773
|
}
|
|
3462
3774
|
|
|
3463
3775
|
// src/SearchField.tsx
|
|
3464
3776
|
import { forwardRef as forwardRef7 } from "react";
|
|
3465
3777
|
import { icon as icon6 } from "@apliteni/apliteni-ui";
|
|
3466
|
-
import { jsx as
|
|
3778
|
+
import { jsx as jsx34, jsxs as jsxs29 } from "react/jsx-runtime";
|
|
3467
3779
|
var SearchField = forwardRef7(function SearchField2({ ariaLabel, className, ...props }, ref) {
|
|
3468
|
-
return /* @__PURE__ */
|
|
3469
|
-
/* @__PURE__ */
|
|
3470
|
-
/* @__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(
|
|
3471
3783
|
"input",
|
|
3472
3784
|
{
|
|
3473
3785
|
ref,
|
|
@@ -3481,9 +3793,9 @@ var SearchField = forwardRef7(function SearchField2({ ariaLabel, className, ...p
|
|
|
3481
3793
|
});
|
|
3482
3794
|
|
|
3483
3795
|
// src/Toast.tsx
|
|
3484
|
-
import { createContext as createContext3, useCallback as useCallback6, useContext as useContext3, useEffect as
|
|
3485
|
-
import { createPortal as
|
|
3486
|
-
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";
|
|
3487
3799
|
var Context = createContext3(null);
|
|
3488
3800
|
var glyphs = { success: "circleCheck", danger: "circleX", warn: "circleAlert", info: "info", neutral: "bolt" };
|
|
3489
3801
|
function useToast() {
|
|
@@ -3492,23 +3804,23 @@ function useToast() {
|
|
|
3492
3804
|
return push;
|
|
3493
3805
|
}
|
|
3494
3806
|
function Notice({ notice, remove }) {
|
|
3495
|
-
const root =
|
|
3496
|
-
const [leaving2, setLeaving] =
|
|
3497
|
-
const dismissed =
|
|
3498
|
-
const [hovered, setHovered] =
|
|
3499
|
-
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);
|
|
3500
3812
|
const paused = hovered || focused;
|
|
3501
3813
|
const tone = notice.tone ?? "success";
|
|
3502
3814
|
const timed = !notice.action && notice.timer !== false && notice.timer !== 0;
|
|
3503
3815
|
const duration = typeof notice.timer === "number" ? notice.timer * 1e3 : 5e3;
|
|
3504
|
-
const remaining =
|
|
3816
|
+
const remaining = useRef19(duration);
|
|
3505
3817
|
const dismiss = useCallback6(() => {
|
|
3506
3818
|
if (dismissed.current) return;
|
|
3507
3819
|
dismissed.current = true;
|
|
3508
3820
|
if (typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches) remove();
|
|
3509
3821
|
else setLeaving(true);
|
|
3510
3822
|
}, [remove]);
|
|
3511
|
-
|
|
3823
|
+
useEffect13(() => {
|
|
3512
3824
|
if (leaving2) {
|
|
3513
3825
|
const element = root.current;
|
|
3514
3826
|
const finish = (event) => {
|
|
@@ -3522,7 +3834,7 @@ function Notice({ notice, remove }) {
|
|
|
3522
3834
|
};
|
|
3523
3835
|
}
|
|
3524
3836
|
}, [leaving2, remove]);
|
|
3525
|
-
|
|
3837
|
+
useEffect13(() => {
|
|
3526
3838
|
if (leaving2 || !timed || paused) return;
|
|
3527
3839
|
const started = Date.now();
|
|
3528
3840
|
const timer = setTimeout(dismiss, remaining.current);
|
|
@@ -3531,7 +3843,7 @@ function Notice({ notice, remove }) {
|
|
|
3531
3843
|
remaining.current = Math.max(0, remaining.current - (Date.now() - started));
|
|
3532
3844
|
};
|
|
3533
3845
|
}, [dismiss, leaving2, paused, timed]);
|
|
3534
|
-
return /* @__PURE__ */
|
|
3846
|
+
return /* @__PURE__ */ jsxs30(
|
|
3535
3847
|
"div",
|
|
3536
3848
|
{
|
|
3537
3849
|
ref: root,
|
|
@@ -3545,12 +3857,12 @@ function Notice({ notice, remove }) {
|
|
|
3545
3857
|
if (!event.currentTarget.contains(event.relatedTarget)) setFocused(false);
|
|
3546
3858
|
},
|
|
3547
3859
|
children: [
|
|
3548
|
-
/* @__PURE__ */
|
|
3549
|
-
/* @__PURE__ */
|
|
3550
|
-
/* @__PURE__ */
|
|
3551
|
-
!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 })
|
|
3552
3864
|
] }),
|
|
3553
|
-
notice.action && /* @__PURE__ */
|
|
3865
|
+
notice.action && /* @__PURE__ */ jsx35(
|
|
3554
3866
|
"button",
|
|
3555
3867
|
{
|
|
3556
3868
|
type: "button",
|
|
@@ -3565,8 +3877,8 @@ function Notice({ notice, remove }) {
|
|
|
3565
3877
|
children: notice.action.label
|
|
3566
3878
|
}
|
|
3567
3879
|
),
|
|
3568
|
-
notice.dismissible !== false && /* @__PURE__ */
|
|
3569
|
-
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(
|
|
3570
3882
|
"span",
|
|
3571
3883
|
{
|
|
3572
3884
|
className: "ui-toast__timer is-running",
|
|
@@ -3599,41 +3911,41 @@ function usePublishedReach(stack2, count) {
|
|
|
3599
3911
|
}, [stack2, count]);
|
|
3600
3912
|
}
|
|
3601
3913
|
function Toast({ children }) {
|
|
3602
|
-
const [entries, setEntries] =
|
|
3603
|
-
const nextId =
|
|
3604
|
-
const stack2 =
|
|
3914
|
+
const [entries, setEntries] = useState14([]);
|
|
3915
|
+
const nextId = useRef19(0);
|
|
3916
|
+
const stack2 = useRef19(null);
|
|
3605
3917
|
const push = useCallback6((notice) => {
|
|
3606
3918
|
const id = nextId.current++;
|
|
3607
3919
|
const remove = () => setEntries((current) => current.filter((entry) => entry.id !== id));
|
|
3608
3920
|
setEntries((current) => [...current, { id, notice, remove }]);
|
|
3609
3921
|
}, []);
|
|
3610
3922
|
usePublishedReach(stack2, entries.length);
|
|
3611
|
-
return /* @__PURE__ */
|
|
3923
|
+
return /* @__PURE__ */ jsxs30(Context.Provider, { value: push, children: [
|
|
3612
3924
|
children,
|
|
3613
|
-
typeof document !== "undefined" &&
|
|
3614
|
-
/* @__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)) }),
|
|
3615
3927
|
document.body
|
|
3616
3928
|
)
|
|
3617
3929
|
] });
|
|
3618
3930
|
}
|
|
3619
3931
|
|
|
3620
3932
|
// src/AppShell.tsx
|
|
3621
|
-
import { useEffect as
|
|
3933
|
+
import { useEffect as useEffect15, useId as useId12, useRef as useRef20, useState as useState16 } from "react";
|
|
3622
3934
|
import { paletteHotkey, prism, railCollapsed } from "@apliteni/apliteni-ui";
|
|
3623
3935
|
|
|
3624
3936
|
// src/SidebarNav.tsx
|
|
3625
|
-
import { forwardRef as forwardRef8, useEffect as
|
|
3937
|
+
import { forwardRef as forwardRef8, useEffect as useEffect14, useId as useId11, useState as useState15 } from "react";
|
|
3626
3938
|
import { ENTRANCE_FALLBACK_MS } from "@apliteni/apliteni-ui/motion";
|
|
3627
|
-
import { Fragment as
|
|
3939
|
+
import { Fragment as Fragment13, jsx as jsx36, jsxs as jsxs31 } from "react/jsx-runtime";
|
|
3628
3940
|
var badgeText = (badge) => typeof badge === "object" ? badge.text : badge;
|
|
3629
3941
|
function Row({ item, active, activeIs, collapsed, renderLink, sub }) {
|
|
3630
3942
|
const uid = useId11();
|
|
3631
3943
|
const group = !sub && !!item.items?.length;
|
|
3632
3944
|
const childActive = group && item.items.some((child) => child.id === active);
|
|
3633
|
-
const [expanded, setExpanded] =
|
|
3945
|
+
const [expanded, setExpanded] = useState15();
|
|
3634
3946
|
const open = expanded ?? item.defaultOpen ?? childActive;
|
|
3635
|
-
const [entering, setEntering] =
|
|
3636
|
-
|
|
3947
|
+
const [entering, setEntering] = useState15(false);
|
|
3948
|
+
useEffect14(() => {
|
|
3637
3949
|
if (!entering) return;
|
|
3638
3950
|
const timer = setTimeout(() => setEntering(false), ENTRANCE_FALLBACK_MS);
|
|
3639
3951
|
return () => clearTimeout(timer);
|
|
@@ -3650,15 +3962,15 @@ function Row({ item, active, activeIs, collapsed, renderLink, sub }) {
|
|
|
3650
3962
|
item.disabled && "is-disabled",
|
|
3651
3963
|
item.danger && "is-danger"
|
|
3652
3964
|
].filter(Boolean).join(" ");
|
|
3653
|
-
const children = /* @__PURE__ */
|
|
3654
|
-
(item.leading ?? item.icon) && /* @__PURE__ */
|
|
3655
|
-
/* @__PURE__ */
|
|
3656
|
-
count != null && count !== "" && /* @__PURE__ */
|
|
3657
|
-
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" })
|
|
3658
3970
|
] });
|
|
3659
3971
|
const common = { className, "aria-label": name, title: collapsed ? name : void 0, children };
|
|
3660
|
-
if (group) return /* @__PURE__ */
|
|
3661
|
-
/* @__PURE__ */
|
|
3972
|
+
if (group) return /* @__PURE__ */ jsxs31("li", { className: `ui-nav__group${open ? " is-open" : ""}`, children: [
|
|
3973
|
+
/* @__PURE__ */ jsx36(
|
|
3662
3974
|
"button",
|
|
3663
3975
|
{
|
|
3664
3976
|
...common,
|
|
@@ -3672,22 +3984,22 @@ function Row({ item, active, activeIs, collapsed, renderLink, sub }) {
|
|
|
3672
3984
|
}
|
|
3673
3985
|
}
|
|
3674
3986
|
),
|
|
3675
|
-
/* @__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)) })
|
|
3676
3988
|
] });
|
|
3677
|
-
if (item.disabled) return /* @__PURE__ */
|
|
3989
|
+
if (item.disabled) return /* @__PURE__ */ jsx36("li", { children: /* @__PURE__ */ jsx36("span", { ...common, role: "link", "aria-disabled": "true" }) });
|
|
3678
3990
|
const props = {
|
|
3679
3991
|
...common,
|
|
3680
3992
|
href: item.href ?? `#${item.id}`,
|
|
3681
3993
|
target: item.target,
|
|
3682
3994
|
"aria-current": isActive ? activeIs === "section" ? "true" : "page" : void 0
|
|
3683
3995
|
};
|
|
3684
|
-
return /* @__PURE__ */
|
|
3996
|
+
return /* @__PURE__ */ jsx36("li", { children: renderLink ? renderLink(item, props) : /* @__PURE__ */ jsx36("a", { ...props }) });
|
|
3685
3997
|
}
|
|
3686
3998
|
function Section({ section, ...props }) {
|
|
3687
3999
|
const uid = useId11();
|
|
3688
|
-
return /* @__PURE__ */
|
|
3689
|
-
section.label && /* @__PURE__ */
|
|
3690
|
-
/* @__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)) })
|
|
3691
4003
|
] });
|
|
3692
4004
|
}
|
|
3693
4005
|
var SidebarNav = forwardRef8(function SidebarNav2({
|
|
@@ -3702,8 +4014,8 @@ var SidebarNav = forwardRef8(function SidebarNav2({
|
|
|
3702
4014
|
"aria-label": label = "Sidebar",
|
|
3703
4015
|
...rest
|
|
3704
4016
|
}, ref) {
|
|
3705
|
-
return /* @__PURE__ */
|
|
3706
|
-
(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(
|
|
3707
4019
|
Section,
|
|
3708
4020
|
{
|
|
3709
4021
|
section,
|
|
@@ -3714,14 +4026,14 @@ var SidebarNav = forwardRef8(function SidebarNav2({
|
|
|
3714
4026
|
},
|
|
3715
4027
|
index
|
|
3716
4028
|
)),
|
|
3717
|
-
footer && /* @__PURE__ */
|
|
4029
|
+
footer && /* @__PURE__ */ jsx36("div", { className: "ui-nav__foot", children: footer })
|
|
3718
4030
|
] });
|
|
3719
4031
|
});
|
|
3720
4032
|
|
|
3721
4033
|
// src/ThemeToggle.tsx
|
|
3722
4034
|
import { useSyncExternalStore } from "react";
|
|
3723
4035
|
import { themeIcon } from "@apliteni/apliteni-ui";
|
|
3724
|
-
import { jsx as
|
|
4036
|
+
import { jsx as jsx37, jsxs as jsxs32 } from "react/jsx-runtime";
|
|
3725
4037
|
var STORAGE_KEY = "apliteni-strategy-theme";
|
|
3726
4038
|
var CHOICE_EVENT = "apliteni-theme-choice";
|
|
3727
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')})()`;
|
|
@@ -3779,10 +4091,10 @@ function ThemeToggle({ labelled = false }) {
|
|
|
3779
4091
|
}
|
|
3780
4092
|
window.dispatchEvent(new Event(CHOICE_EVENT));
|
|
3781
4093
|
};
|
|
3782
|
-
const button = /* @__PURE__ */
|
|
3783
|
-
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: [
|
|
3784
4096
|
button,
|
|
3785
|
-
/* @__PURE__ */
|
|
4097
|
+
/* @__PURE__ */ jsxs32("span", { children: [
|
|
3786
4098
|
label,
|
|
3787
4099
|
" theme"
|
|
3788
4100
|
] })
|
|
@@ -3790,7 +4102,7 @@ function ThemeToggle({ labelled = false }) {
|
|
|
3790
4102
|
}
|
|
3791
4103
|
|
|
3792
4104
|
// src/AppShell.tsx
|
|
3793
|
-
import { Fragment as
|
|
4105
|
+
import { Fragment as Fragment14, jsx as jsx38, jsxs as jsxs33 } from "react/jsx-runtime";
|
|
3794
4106
|
var path = (value) => value.split(/[?#]/)[0].replace(/\/+$/, "") || "/";
|
|
3795
4107
|
function AppShell({
|
|
3796
4108
|
sections,
|
|
@@ -3814,20 +4126,20 @@ function AppShell({
|
|
|
3814
4126
|
renderLink
|
|
3815
4127
|
}) {
|
|
3816
4128
|
const uid = useId12();
|
|
3817
|
-
const [collapsed, setCollapsed] =
|
|
3818
|
-
const [search, setSearch] =
|
|
3819
|
-
const [menu, setMenu] =
|
|
3820
|
-
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);
|
|
3821
4133
|
const current = path(pathname);
|
|
3822
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];
|
|
3823
|
-
|
|
4135
|
+
useEffect15(() => {
|
|
3824
4136
|
setCollapsed(railCollapsed() ?? defaultCollapsed);
|
|
3825
4137
|
}, [defaultCollapsed]);
|
|
3826
|
-
|
|
4138
|
+
useEffect15(() => {
|
|
3827
4139
|
setMenu(false);
|
|
3828
4140
|
setSearch(false);
|
|
3829
4141
|
}, [pathname]);
|
|
3830
|
-
|
|
4142
|
+
useEffect15(() => {
|
|
3831
4143
|
if (!menu) return;
|
|
3832
4144
|
const grown = () => {
|
|
3833
4145
|
const button = menuButton.current;
|
|
@@ -3836,7 +4148,7 @@ function AppShell({
|
|
|
3836
4148
|
window.addEventListener("resize", grown);
|
|
3837
4149
|
return () => window.removeEventListener("resize", grown);
|
|
3838
4150
|
}, [menu]);
|
|
3839
|
-
|
|
4151
|
+
useEffect15(() => {
|
|
3840
4152
|
const hotkey = (event) => {
|
|
3841
4153
|
if (!(event.metaKey || event.ctrlKey) || event.altKey || event.shiftKey || event.key.toLowerCase() !== "k") return;
|
|
3842
4154
|
const target = event.target;
|
|
@@ -3855,7 +4167,7 @@ function AppShell({
|
|
|
3855
4167
|
} catch {
|
|
3856
4168
|
}
|
|
3857
4169
|
};
|
|
3858
|
-
const sidebar = (label) => /* @__PURE__ */
|
|
4170
|
+
const sidebar = (label) => /* @__PURE__ */ jsx38(
|
|
3859
4171
|
SidebarNav,
|
|
3860
4172
|
{
|
|
3861
4173
|
"aria-label": label,
|
|
@@ -3867,33 +4179,33 @@ function AppShell({
|
|
|
3867
4179
|
const linkProps = { ...props, onClick: (event) => {
|
|
3868
4180
|
if (!event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey) setMenu(false);
|
|
3869
4181
|
} };
|
|
3870
|
-
return renderLink ? renderLink(section, linkProps) : /* @__PURE__ */
|
|
4182
|
+
return renderLink ? renderLink(section, linkProps) : /* @__PURE__ */ jsx38("a", { ...linkProps });
|
|
3871
4183
|
}
|
|
3872
4184
|
}
|
|
3873
4185
|
);
|
|
3874
4186
|
const foldLabel = collapsed ? "Expand sidebar" : "Collapse sidebar";
|
|
3875
4187
|
const navigable = sections.length > 1 || Boolean(back);
|
|
3876
|
-
const lockup = /* @__PURE__ */
|
|
3877
|
-
brand ?? /* @__PURE__ */
|
|
3878
|
-
/* @__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 })
|
|
3879
4191
|
] });
|
|
3880
|
-
return /* @__PURE__ */
|
|
3881
|
-
navigable && /* @__PURE__ */
|
|
3882
|
-
/* @__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 }),
|
|
3883
4195
|
sidebar("Sections"),
|
|
3884
|
-
/* @__PURE__ */
|
|
3885
|
-
/* @__PURE__ */
|
|
3886
|
-
/* @__PURE__ */
|
|
3887
|
-
/* @__PURE__ */
|
|
3888
|
-
/* @__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" })
|
|
3889
4201
|
] }) }),
|
|
3890
|
-
/* @__PURE__ */
|
|
4202
|
+
/* @__PURE__ */ jsx38("span", { className: "ui-nav__label", children: foldLabel })
|
|
3891
4203
|
] }) }) })
|
|
3892
4204
|
] }),
|
|
3893
|
-
/* @__PURE__ */
|
|
3894
|
-
/* @__PURE__ */
|
|
3895
|
-
navigable && /* @__PURE__ */
|
|
3896
|
-
/* @__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(
|
|
3897
4209
|
Button,
|
|
3898
4210
|
{
|
|
3899
4211
|
ref: menuButton,
|
|
@@ -3907,19 +4219,19 @@ function AppShell({
|
|
|
3907
4219
|
onClick: () => setMenu(true)
|
|
3908
4220
|
}
|
|
3909
4221
|
),
|
|
3910
|
-
/* @__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) } }) })
|
|
3911
4223
|
] }),
|
|
3912
4224
|
!navigable && lockup,
|
|
3913
|
-
/* @__PURE__ */
|
|
3914
|
-
/* @__PURE__ */
|
|
3915
|
-
/* @__PURE__ */
|
|
3916
|
-
/* @__PURE__ */
|
|
3917
|
-
/* @__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() })
|
|
3918
4230
|
] }),
|
|
3919
|
-
/* @__PURE__ */
|
|
3920
|
-
bandControl && /* @__PURE__ */
|
|
3921
|
-
/* @__PURE__ */
|
|
3922
|
-
/* @__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(
|
|
3923
4235
|
Dropdown,
|
|
3924
4236
|
{
|
|
3925
4237
|
variant: "menu",
|
|
@@ -3928,57 +4240,105 @@ function AppShell({
|
|
|
3928
4240
|
ariaLabel: `Signed in as ${account.name}, ${account.email}`,
|
|
3929
4241
|
triggerClass: "ui-app__user-trigger",
|
|
3930
4242
|
panelClass: "ui-app__user-panel",
|
|
3931
|
-
triggerContent: /* @__PURE__ */
|
|
3932
|
-
header: /* @__PURE__ */
|
|
3933
|
-
/* @__PURE__ */
|
|
3934
|
-
/* @__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 })
|
|
3935
4247
|
] }),
|
|
3936
4248
|
items: [{ label: "Sign out", icon: "logout", danger: true }],
|
|
3937
4249
|
onSelect: onSignOut
|
|
3938
4250
|
}
|
|
3939
4251
|
) })
|
|
3940
4252
|
] }),
|
|
3941
|
-
/* @__PURE__ */
|
|
3942
|
-
back && /* @__PURE__ */
|
|
3943
|
-
/* @__PURE__ */
|
|
3944
|
-
lede && /* @__PURE__ */
|
|
3945
|
-
actions && /* @__PURE__ */
|
|
3946
|
-
/* @__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 })
|
|
3947
4259
|
] })
|
|
3948
4260
|
] }),
|
|
3949
|
-
navigable && /* @__PURE__ */
|
|
3950
|
-
/* @__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) })
|
|
3951
4263
|
] });
|
|
3952
4264
|
}
|
|
3953
4265
|
|
|
3954
|
-
// src/
|
|
3955
|
-
import {
|
|
3956
|
-
import {
|
|
3957
|
-
|
|
3958
|
-
|
|
3959
|
-
"
|
|
3960
|
-
|
|
3961
|
-
"
|
|
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"/>'
|
|
3962
4275
|
};
|
|
3963
|
-
|
|
3964
|
-
|
|
3965
|
-
|
|
3966
|
-
|
|
3967
|
-
|
|
3968
|
-
|
|
3969
|
-
art ? typeof art === "string" ? /* @__PURE__ */ jsx37("div", { className: "ui-empty__art", dangerouslySetInnerHTML: { __html: /<svg/.test(art) ? art : illo(art) } }) : /* @__PURE__ */ jsx37("div", { className: "ui-empty__art", "aria-hidden": "true", children: art }) : glyph ? /* @__PURE__ */ jsx37("div", { className: "ui-empty__icon", dangerouslySetInnerHTML: { __html: kitIcon2(glyph) } }) : null,
|
|
3970
|
-
heading && /* @__PURE__ */ jsx37("div", { className: "ui-empty__title", children: heading }),
|
|
3971
|
-
guidance && /* @__PURE__ */ jsx37("div", { className: "ui-empty__sub", children: guidance }),
|
|
3972
|
-
actions && /* @__PURE__ */ jsx37("div", { className: "ui-empty__actions", children: actions })
|
|
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
|
|
3973
4282
|
] });
|
|
3974
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
|
+
}
|
|
3975
4335
|
|
|
3976
4336
|
// src/Success.tsx
|
|
3977
|
-
import { forwardRef as forwardRef9, useEffect as
|
|
3978
|
-
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";
|
|
3979
4339
|
var SuccessCheck = forwardRef9(function SuccessCheck2({ variant = "line", className, ...rest }, ref) {
|
|
3980
4340
|
const circled = variant === "circled";
|
|
3981
|
-
return /* @__PURE__ */
|
|
4341
|
+
return /* @__PURE__ */ jsxs35(
|
|
3982
4342
|
"svg",
|
|
3983
4343
|
{
|
|
3984
4344
|
...rest,
|
|
@@ -3990,18 +4350,18 @@ var SuccessCheck = forwardRef9(function SuccessCheck2({ variant = "line", classN
|
|
|
3990
4350
|
"aria-hidden": "true",
|
|
3991
4351
|
focusable: "false",
|
|
3992
4352
|
children: [
|
|
3993
|
-
circled && /* @__PURE__ */
|
|
3994
|
-
/* @__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" })
|
|
3995
4355
|
]
|
|
3996
4356
|
}
|
|
3997
4357
|
);
|
|
3998
4358
|
});
|
|
3999
4359
|
var SuccessPanel = forwardRef9(function SuccessPanel2({ title = "Done", sub, check = "line", className, ...rest }, ref) {
|
|
4000
4360
|
const circled = check === "circled";
|
|
4001
|
-
return /* @__PURE__ */
|
|
4002
|
-
/* @__PURE__ */
|
|
4003
|
-
/* @__PURE__ */
|
|
4004
|
-
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 })
|
|
4005
4365
|
] });
|
|
4006
4366
|
});
|
|
4007
4367
|
var pieces = [
|
|
@@ -4021,12 +4381,12 @@ var pieces = [
|
|
|
4021
4381
|
[80, 0.36, -20, "c", 1.05]
|
|
4022
4382
|
];
|
|
4023
4383
|
function Countdown({ seconds, label = "Redirecting", onDone }) {
|
|
4024
|
-
const [remaining, setRemaining] =
|
|
4025
|
-
const callback =
|
|
4026
|
-
|
|
4384
|
+
const [remaining, setRemaining] = useState17(seconds);
|
|
4385
|
+
const callback = useRef21(onDone);
|
|
4386
|
+
useEffect16(() => {
|
|
4027
4387
|
callback.current = onDone;
|
|
4028
4388
|
}, [onDone]);
|
|
4029
|
-
|
|
4389
|
+
useEffect16(() => {
|
|
4030
4390
|
let count = seconds;
|
|
4031
4391
|
const timer = setInterval(() => {
|
|
4032
4392
|
count -= 1;
|
|
@@ -4038,12 +4398,12 @@ function Countdown({ seconds, label = "Redirecting", onDone }) {
|
|
|
4038
4398
|
}, 1e3);
|
|
4039
4399
|
return () => clearInterval(timer);
|
|
4040
4400
|
}, [seconds]);
|
|
4041
|
-
return /* @__PURE__ */
|
|
4042
|
-
/* @__PURE__ */
|
|
4043
|
-
/* @__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: [
|
|
4044
4404
|
label,
|
|
4045
4405
|
" in ",
|
|
4046
|
-
/* @__PURE__ */
|
|
4406
|
+
/* @__PURE__ */ jsx40("b", { "data-sx-num": "", children: remaining }),
|
|
4047
4407
|
"s"
|
|
4048
4408
|
] })
|
|
4049
4409
|
] });
|
|
@@ -4070,7 +4430,7 @@ var Success = forwardRef9(function Success2({
|
|
|
4070
4430
|
const seconds = countdown?.seconds;
|
|
4071
4431
|
const duration = seconds != null && Number.isFinite(seconds) && seconds >= 1 ? Math.floor(seconds) : 5;
|
|
4072
4432
|
const mark = check === "circled" ? "circled" : "line";
|
|
4073
|
-
return /* @__PURE__ */
|
|
4433
|
+
return /* @__PURE__ */ jsxs35(
|
|
4074
4434
|
"div",
|
|
4075
4435
|
{
|
|
4076
4436
|
role: "status",
|
|
@@ -4079,16 +4439,16 @@ var Success = forwardRef9(function Success2({
|
|
|
4079
4439
|
ref,
|
|
4080
4440
|
className: ["ui-sx", `ui-sx--${layout}`, `ui-sx--check-${mark}`, confetti && "ui-sx--confetti", className].filter(Boolean).join(" "),
|
|
4081
4441
|
children: [
|
|
4082
|
-
confetti && /* @__PURE__ */
|
|
4083
|
-
([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)
|
|
4084
4444
|
) }),
|
|
4085
|
-
/* @__PURE__ */
|
|
4086
|
-
/* @__PURE__ */
|
|
4087
|
-
/* @__PURE__ */
|
|
4088
|
-
/* @__PURE__ */
|
|
4089
|
-
body && /* @__PURE__ */
|
|
4090
|
-
hasActions && /* @__PURE__ */
|
|
4091
|
-
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)
|
|
4092
4452
|
] })
|
|
4093
4453
|
] })
|
|
4094
4454
|
]
|
|
@@ -4099,15 +4459,15 @@ var Success = forwardRef9(function Success2({
|
|
|
4099
4459
|
// src/Chart.tsx
|
|
4100
4460
|
import {
|
|
4101
4461
|
useCallback as useCallback7,
|
|
4102
|
-
useEffect as
|
|
4103
|
-
useId as
|
|
4462
|
+
useEffect as useEffect17,
|
|
4463
|
+
useId as useId14,
|
|
4104
4464
|
useLayoutEffect as useLayoutEffect5,
|
|
4105
4465
|
useMemo as useMemo4,
|
|
4106
|
-
useRef as
|
|
4107
|
-
useState as
|
|
4466
|
+
useRef as useRef22,
|
|
4467
|
+
useState as useState18
|
|
4108
4468
|
} from "react";
|
|
4109
4469
|
import { CHART_FLOOR, bridgeWalk, chartScale, pointTarget } from "@apliteni/apliteni-ui";
|
|
4110
|
-
import { Fragment as
|
|
4470
|
+
import { Fragment as Fragment15, jsx as jsx41, jsxs as jsxs36 } from "react/jsx-runtime";
|
|
4111
4471
|
var HEIGHT = { months: 216, bridge: 216, spark: 32 };
|
|
4112
4472
|
var PAD = 2;
|
|
4113
4473
|
var ZERO_INSET = 1.5;
|
|
@@ -4145,8 +4505,8 @@ function barPath(m) {
|
|
|
4145
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";
|
|
4146
4506
|
}
|
|
4147
4507
|
function useTapFloor() {
|
|
4148
|
-
const [floor, setFloor] =
|
|
4149
|
-
|
|
4508
|
+
const [floor, setFloor] = useState18(TARGET);
|
|
4509
|
+
useEffect17(() => {
|
|
4150
4510
|
const query = typeof window === "undefined" ? null : window.matchMedia?.(`(max-width: ${PHONE_MAX2}px) and (pointer: coarse)`);
|
|
4151
4511
|
if (!query) return;
|
|
4152
4512
|
const read = () => setFloor(query.matches ? TAP_FLOOR : TARGET);
|
|
@@ -4268,23 +4628,23 @@ function Chart(props) {
|
|
|
4268
4628
|
const spark = variant === "spark";
|
|
4269
4629
|
const plotHeight = height ?? HEIGHT[variant];
|
|
4270
4630
|
const showTable = table ?? !spark;
|
|
4271
|
-
const uid =
|
|
4272
|
-
const frameEl =
|
|
4273
|
-
const scroller =
|
|
4274
|
-
const plot =
|
|
4275
|
-
const tipEl =
|
|
4276
|
-
const svgEl =
|
|
4277
|
-
const ignoreMouseUntil =
|
|
4278
|
-
const touchMoved =
|
|
4279
|
-
const dismissed =
|
|
4280
|
-
const opening =
|
|
4281
|
-
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);
|
|
4282
4642
|
const floor = useTapFloor();
|
|
4283
|
-
const [width, setWidth] =
|
|
4284
|
-
const [openId, setOpenId] =
|
|
4285
|
-
const [rawCursor, setCursor] =
|
|
4286
|
-
const [said, setSaid] =
|
|
4287
|
-
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);
|
|
4288
4648
|
const pick = selected === void 0 ? ownPick : selected;
|
|
4289
4649
|
const steps = props.variant === "bridge" ? props.steps : void 0;
|
|
4290
4650
|
const bridgeTones = props.variant === "bridge" ? props.tones : void 0;
|
|
@@ -4388,7 +4748,7 @@ function Chart(props) {
|
|
|
4388
4748
|
const byId = useMemo4(() => new Map(marks.map((m) => [m.id, m])), [marks]);
|
|
4389
4749
|
const lead = useCallback7((column) => marks.find((m) => m.column === column), [marks]);
|
|
4390
4750
|
const open = openId ? byId.get(openId) : void 0;
|
|
4391
|
-
|
|
4751
|
+
useEffect17(() => {
|
|
4392
4752
|
const el = plot.current;
|
|
4393
4753
|
if (!el) return;
|
|
4394
4754
|
const read = () => setWidth(el.clientWidth);
|
|
@@ -4405,13 +4765,13 @@ function Chart(props) {
|
|
|
4405
4765
|
el.classList.toggle("is-more-before", el.scrollLeft > 1);
|
|
4406
4766
|
el.classList.toggle("is-more-after", el.scrollLeft < last - 1);
|
|
4407
4767
|
}, []);
|
|
4408
|
-
|
|
4768
|
+
useEffect17(syncEdges, [syncEdges, plotWidth, count]);
|
|
4409
4769
|
useLayoutEffect5(() => {
|
|
4410
4770
|
if (!openId || !frameEl.current || !tipEl.current || !svgEl.current) return;
|
|
4411
4771
|
const anchor = [...svgEl.current.querySelectorAll("[data-anchor]")].find((el) => el.getAttribute("data-anchor") === openId);
|
|
4412
4772
|
if (anchor) placeTip(frameEl.current, anchor, tipEl.current, frameEl.current);
|
|
4413
4773
|
}, [openId, plotWidth, plotHeight]);
|
|
4414
|
-
|
|
4774
|
+
useEffect17(() => {
|
|
4415
4775
|
if (!openId) return;
|
|
4416
4776
|
const doc = frameEl.current?.ownerDocument;
|
|
4417
4777
|
const view = doc?.defaultView;
|
|
@@ -4483,7 +4843,7 @@ function Chart(props) {
|
|
|
4483
4843
|
const estimated = columns.filter((c) => c.estimated);
|
|
4484
4844
|
const estimatedTone = marks.find((m) => m.estimated && m.kind === "bar")?.tone ?? keys[0]?.tone ?? "neutral";
|
|
4485
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) };
|
|
4486
|
-
return /* @__PURE__ */
|
|
4846
|
+
return /* @__PURE__ */ jsxs36(
|
|
4487
4847
|
"div",
|
|
4488
4848
|
{
|
|
4489
4849
|
className: cx8("ui-chart", `ui-chart--${variant}`, selectable && "ui-chart--pick", className),
|
|
@@ -4494,9 +4854,9 @@ function Chart(props) {
|
|
|
4494
4854
|
"--ui-chart-pad": `${PAD}px`
|
|
4495
4855
|
},
|
|
4496
4856
|
children: [
|
|
4497
|
-
!spark && keys.length > 0 && /* @__PURE__ */
|
|
4498
|
-
keys.map((key) => /* @__PURE__ */
|
|
4499
|
-
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(
|
|
4500
4860
|
"rect",
|
|
4501
4861
|
{
|
|
4502
4862
|
className: "ui-chart__key-swatch",
|
|
@@ -4509,12 +4869,12 @@ function Chart(props) {
|
|
|
4509
4869
|
) }),
|
|
4510
4870
|
key.name
|
|
4511
4871
|
] }, key.id)),
|
|
4512
|
-
estimated.length > 0 && /* @__PURE__ */
|
|
4513
|
-
/* @__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" }) }),
|
|
4514
4874
|
"Estimated"
|
|
4515
4875
|
] })
|
|
4516
4876
|
] }),
|
|
4517
|
-
/* @__PURE__ */
|
|
4877
|
+
/* @__PURE__ */ jsxs36(
|
|
4518
4878
|
"div",
|
|
4519
4879
|
{
|
|
4520
4880
|
ref: frameEl,
|
|
@@ -4538,8 +4898,8 @@ function Chart(props) {
|
|
|
4538
4898
|
setSaid("");
|
|
4539
4899
|
},
|
|
4540
4900
|
children: [
|
|
4541
|
-
!spark && scale.ticks.length > 0 && /* @__PURE__ */
|
|
4542
|
-
/* @__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: () => {
|
|
4543
4903
|
syncEdges();
|
|
4544
4904
|
const anchor = [...svgEl.current?.querySelectorAll("[data-anchor]") ?? []].find((el) => el.getAttribute("data-anchor") === openId);
|
|
4545
4905
|
if (!anchor || !scroller.current || !frameEl.current || !tipEl.current) return;
|
|
@@ -4547,8 +4907,8 @@ function Chart(props) {
|
|
|
4547
4907
|
const view = scroller.current.getBoundingClientRect();
|
|
4548
4908
|
if (mark.right <= view.left || mark.left >= view.right) setOpenId(null);
|
|
4549
4909
|
else placeTip(frameEl.current, anchor, tipEl.current, frameEl.current);
|
|
4550
|
-
}, children: /* @__PURE__ */
|
|
4551
|
-
/* @__PURE__ */
|
|
4910
|
+
}, children: /* @__PURE__ */ jsxs36("div", { ref: plot, className: "ui-chart__plot", children: [
|
|
4911
|
+
/* @__PURE__ */ jsxs36(
|
|
4552
4912
|
"svg",
|
|
4553
4913
|
{
|
|
4554
4914
|
ref: svgEl,
|
|
@@ -4608,7 +4968,7 @@ function Chart(props) {
|
|
|
4608
4968
|
announce(mark.column, selectable ? mark.column : pick);
|
|
4609
4969
|
},
|
|
4610
4970
|
children: [
|
|
4611
|
-
!spark && pick !== null && pick >= 0 && pick < count && /* @__PURE__ */
|
|
4971
|
+
!spark && pick !== null && pick >= 0 && pick < count && /* @__PURE__ */ jsx41(
|
|
4612
4972
|
"rect",
|
|
4613
4973
|
{
|
|
4614
4974
|
className: "ui-chart__band",
|
|
@@ -4621,7 +4981,7 @@ function Chart(props) {
|
|
|
4621
4981
|
frame.links && frame.bars.slice(0, -1).map((bar, i) => {
|
|
4622
4982
|
const from = byId.get(bar.id);
|
|
4623
4983
|
const to = byId.get(frame.bars[i + 1].id);
|
|
4624
|
-
return from && to ? /* @__PURE__ */
|
|
4984
|
+
return from && to ? /* @__PURE__ */ jsx41(
|
|
4625
4985
|
"line",
|
|
4626
4986
|
{
|
|
4627
4987
|
className: "ui-chart__carry",
|
|
@@ -4633,7 +4993,7 @@ function Chart(props) {
|
|
|
4633
4993
|
`carry-${bar.id}`
|
|
4634
4994
|
) : null;
|
|
4635
4995
|
}),
|
|
4636
|
-
!spark && scale.ticks.filter((tick) => tick !== 0).map((tick) => /* @__PURE__ */
|
|
4996
|
+
!spark && scale.ticks.filter((tick) => tick !== 0).map((tick) => /* @__PURE__ */ jsx41(
|
|
4637
4997
|
"line",
|
|
4638
4998
|
{
|
|
4639
4999
|
className: "ui-chart__grid",
|
|
@@ -4644,7 +5004,7 @@ function Chart(props) {
|
|
|
4644
5004
|
},
|
|
4645
5005
|
`grid-${tick}`
|
|
4646
5006
|
)),
|
|
4647
|
-
!spark && scale.ticks.includes(0) && /* @__PURE__ */
|
|
5007
|
+
!spark && scale.ticks.includes(0) && /* @__PURE__ */ jsx41(
|
|
4648
5008
|
"line",
|
|
4649
5009
|
{
|
|
4650
5010
|
className: "ui-chart__zero",
|
|
@@ -4654,7 +5014,7 @@ function Chart(props) {
|
|
|
4654
5014
|
y2: px(y(0))
|
|
4655
5015
|
}
|
|
4656
5016
|
),
|
|
4657
|
-
marks.filter((m) => m.kind === "bar").map((mark) => /* @__PURE__ */
|
|
5017
|
+
marks.filter((m) => m.kind === "bar").map((mark) => /* @__PURE__ */ jsx41(
|
|
4658
5018
|
"path",
|
|
4659
5019
|
{
|
|
4660
5020
|
className: cx8(
|
|
@@ -4667,7 +5027,7 @@ function Chart(props) {
|
|
|
4667
5027
|
`bar-${mark.id}`
|
|
4668
5028
|
)),
|
|
4669
5029
|
["casing", "stroke"].map((layer) => lines.flatMap(
|
|
4670
|
-
(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(
|
|
4671
5031
|
"line",
|
|
4672
5032
|
{
|
|
4673
5033
|
className: layer === "casing" ? "ui-chart__line-casing" : cx8(
|
|
@@ -4683,7 +5043,7 @@ function Chart(props) {
|
|
|
4683
5043
|
`${line.id}-${layer}-${i}`
|
|
4684
5044
|
) : null)
|
|
4685
5045
|
)),
|
|
4686
|
-
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(
|
|
4687
5047
|
"circle",
|
|
4688
5048
|
{
|
|
4689
5049
|
className: cx8("ui-chart__isolated", `ui-chart__tone--${line.tone}`),
|
|
@@ -4693,8 +5053,8 @@ function Chart(props) {
|
|
|
4693
5053
|
},
|
|
4694
5054
|
`isolated-${line.id}-${i}`
|
|
4695
5055
|
) : null)),
|
|
4696
|
-
marks.map((mark) => /* @__PURE__ */
|
|
4697
|
-
mark.kind === "bar" ? /* @__PURE__ */
|
|
5056
|
+
marks.map((mark) => /* @__PURE__ */ jsxs36("g", { "data-mark": mark.id, children: [
|
|
5057
|
+
mark.kind === "bar" ? /* @__PURE__ */ jsx41(
|
|
4698
5058
|
"rect",
|
|
4699
5059
|
{
|
|
4700
5060
|
className: "ui-chart__hit",
|
|
@@ -4703,7 +5063,7 @@ function Chart(props) {
|
|
|
4703
5063
|
y: px(hitBand(mark.band).y),
|
|
4704
5064
|
height: px(hitBand(mark.band).h)
|
|
4705
5065
|
}
|
|
4706
|
-
) : /* @__PURE__ */
|
|
5066
|
+
) : /* @__PURE__ */ jsx41(
|
|
4707
5067
|
"rect",
|
|
4708
5068
|
{
|
|
4709
5069
|
className: "ui-chart__hit",
|
|
@@ -4713,7 +5073,7 @@ function Chart(props) {
|
|
|
4713
5073
|
height: px(mark.hit?.h ?? TARGET)
|
|
4714
5074
|
}
|
|
4715
5075
|
),
|
|
4716
|
-
/* @__PURE__ */
|
|
5076
|
+
/* @__PURE__ */ jsx41(
|
|
4717
5077
|
"rect",
|
|
4718
5078
|
{
|
|
4719
5079
|
"data-anchor": mark.id,
|
|
@@ -4728,7 +5088,7 @@ function Chart(props) {
|
|
|
4728
5088
|
]
|
|
4729
5089
|
}
|
|
4730
5090
|
),
|
|
4731
|
-
!spark && /* @__PURE__ */
|
|
5091
|
+
!spark && /* @__PURE__ */ jsx41("div", { className: "ui-chart__periods", "aria-hidden": "true", children: columns.map((column, i) => /* @__PURE__ */ jsx41(
|
|
4732
5092
|
"span",
|
|
4733
5093
|
{
|
|
4734
5094
|
className: cx8("ui-chart__period", pick === i && "is-selected"),
|
|
@@ -4737,35 +5097,35 @@ function Chart(props) {
|
|
|
4737
5097
|
`${column.label}-${i}`
|
|
4738
5098
|
)) })
|
|
4739
5099
|
] }) }),
|
|
4740
|
-
/* @__PURE__ */
|
|
4741
|
-
/* @__PURE__ */
|
|
4742
|
-
/* @__PURE__ */
|
|
4743
|
-
(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 })
|
|
4744
5104
|
] }) })
|
|
4745
5105
|
]
|
|
4746
5106
|
}
|
|
4747
5107
|
),
|
|
4748
|
-
/* @__PURE__ */
|
|
4749
|
-
showTable && /* @__PURE__ */
|
|
4750
|
-
/* @__PURE__ */
|
|
4751
|
-
/* @__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(
|
|
4752
5112
|
"div",
|
|
4753
5113
|
{
|
|
4754
5114
|
className: "ui-table-scroll",
|
|
4755
5115
|
role: "region",
|
|
4756
5116
|
tabIndex: 0,
|
|
4757
5117
|
"aria-label": `${title}, as a table. Scroll for more columns.`,
|
|
4758
|
-
children: /* @__PURE__ */
|
|
4759
|
-
/* @__PURE__ */
|
|
4760
|
-
/* @__PURE__ */
|
|
4761
|
-
/* @__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: [
|
|
4762
5122
|
row.column.label,
|
|
4763
|
-
row.column.estimated && /* @__PURE__ */
|
|
5123
|
+
row.column.estimated && /* @__PURE__ */ jsxs36(Fragment15, { children: [
|
|
4764
5124
|
" ",
|
|
4765
|
-
/* @__PURE__ */
|
|
5125
|
+
/* @__PURE__ */ jsx41("span", { className: "ui-chart__state", children: stateOf(row.column) })
|
|
4766
5126
|
] })
|
|
4767
5127
|
] }),
|
|
4768
|
-
row.cells.map((cell, j) => /* @__PURE__ */
|
|
5128
|
+
row.cells.map((cell, j) => /* @__PURE__ */ jsx41("td", { className: "ui-table__num", children: cell }, tableHead[j + 1]))
|
|
4769
5129
|
] }, `${row.column.label}-${i}`)) })
|
|
4770
5130
|
] })
|
|
4771
5131
|
}
|
|
@@ -4779,7 +5139,7 @@ function Chart(props) {
|
|
|
4779
5139
|
// src/AccentPicker.tsx
|
|
4780
5140
|
import { forwardRef as forwardRef10 } from "react";
|
|
4781
5141
|
import { ACCENTS, accentSwatchStyle } from "@apliteni/apliteni-ui";
|
|
4782
|
-
import { jsx as
|
|
5142
|
+
import { jsx as jsx42 } from "react/jsx-runtime";
|
|
4783
5143
|
var AccentPicker = forwardRef10(function AccentPicker2({
|
|
4784
5144
|
value,
|
|
4785
5145
|
onChange,
|
|
@@ -4788,7 +5148,7 @@ var AccentPicker = forwardRef10(function AccentPicker2({
|
|
|
4788
5148
|
"aria-label": label = "Accent",
|
|
4789
5149
|
...rest
|
|
4790
5150
|
}, ref) {
|
|
4791
|
-
return /* @__PURE__ */
|
|
5151
|
+
return /* @__PURE__ */ jsx42(
|
|
4792
5152
|
"div",
|
|
4793
5153
|
{
|
|
4794
5154
|
...rest,
|
|
@@ -4799,7 +5159,7 @@ var AccentPicker = forwardRef10(function AccentPicker2({
|
|
|
4799
5159
|
"aria-label": label,
|
|
4800
5160
|
children: options.map((accent) => {
|
|
4801
5161
|
const title = accent.charAt(0).toUpperCase() + accent.slice(1);
|
|
4802
|
-
return /* @__PURE__ */
|
|
5162
|
+
return /* @__PURE__ */ jsx42(
|
|
4803
5163
|
"button",
|
|
4804
5164
|
{
|
|
4805
5165
|
type: "button",
|
|
@@ -4818,9 +5178,9 @@ var AccentPicker = forwardRef10(function AccentPicker2({
|
|
|
4818
5178
|
});
|
|
4819
5179
|
|
|
4820
5180
|
// src/NavTabs.tsx
|
|
4821
|
-
import { Fragment as
|
|
4822
|
-
import { safeUrl, observeNavFit, revealCurrentNav, revealFocusedNav } from "@apliteni/apliteni-ui";
|
|
4823
|
-
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";
|
|
4824
5184
|
var NavTabs = forwardRef11(function NavTabs2({
|
|
4825
5185
|
items,
|
|
4826
5186
|
active,
|
|
@@ -4831,14 +5191,14 @@ var NavTabs = forwardRef11(function NavTabs2({
|
|
|
4831
5191
|
"aria-label": ariaLabel = "Tabs",
|
|
4832
5192
|
...rest
|
|
4833
5193
|
}, ref) {
|
|
4834
|
-
const navRef =
|
|
5194
|
+
const navRef = useRef23(null);
|
|
4835
5195
|
useImperativeHandle2(ref, () => navRef.current, []);
|
|
4836
5196
|
const signature = items.map((item) => item.id).join("\0");
|
|
4837
|
-
|
|
4838
|
-
|
|
5197
|
+
useEffect18(() => observeNavFit(navRef.current), []);
|
|
5198
|
+
useEffect18(() => {
|
|
4839
5199
|
if (navRef.current) revealCurrentNav(navRef.current);
|
|
4840
5200
|
}, [active, signature]);
|
|
4841
|
-
return /* @__PURE__ */
|
|
5201
|
+
return /* @__PURE__ */ jsx43(
|
|
4842
5202
|
"nav",
|
|
4843
5203
|
{
|
|
4844
5204
|
...rest,
|
|
@@ -4851,20 +5211,20 @@ var NavTabs = forwardRef11(function NavTabs2({
|
|
|
4851
5211
|
},
|
|
4852
5212
|
children: items.map((item) => {
|
|
4853
5213
|
const badge = item.badge != null && typeof item.badge === "object" ? item.badge : { text: item.badge, tone: void 0 };
|
|
4854
|
-
const inner = /* @__PURE__ */
|
|
4855
|
-
/* @__PURE__ */
|
|
4856
|
-
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 })
|
|
4857
5217
|
] });
|
|
4858
|
-
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);
|
|
4859
5219
|
const current = item.id === active;
|
|
4860
5220
|
const linkProps = {
|
|
4861
5221
|
className: ["ui-nav__tab", current && "is-active"].filter(Boolean).join(" "),
|
|
4862
|
-
href:
|
|
5222
|
+
href: safeUrl3(item.href || `#${item.id}`),
|
|
4863
5223
|
target: item.target,
|
|
4864
5224
|
"aria-current": current ? "page" : void 0,
|
|
4865
5225
|
children: inner
|
|
4866
5226
|
};
|
|
4867
|
-
return /* @__PURE__ */
|
|
5227
|
+
return /* @__PURE__ */ jsx43(Fragment16, { children: renderLink ? renderLink(item, linkProps) : /* @__PURE__ */ jsx43("a", { ...linkProps }) }, item.id);
|
|
4868
5228
|
})
|
|
4869
5229
|
}
|
|
4870
5230
|
);
|
|
@@ -4872,8 +5232,8 @@ var NavTabs = forwardRef11(function NavTabs2({
|
|
|
4872
5232
|
|
|
4873
5233
|
// src/Breadcrumbs.tsx
|
|
4874
5234
|
import { forwardRef as forwardRef12 } from "react";
|
|
4875
|
-
import { icon as icon7, safeUrl as
|
|
4876
|
-
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";
|
|
4877
5237
|
var Breadcrumbs = forwardRef12(function Breadcrumbs2({
|
|
4878
5238
|
items,
|
|
4879
5239
|
renderLink,
|
|
@@ -4881,21 +5241,21 @@ var Breadcrumbs = forwardRef12(function Breadcrumbs2({
|
|
|
4881
5241
|
"aria-label": ariaLabel = "Breadcrumb",
|
|
4882
5242
|
...rest
|
|
4883
5243
|
}, ref) {
|
|
4884
|
-
return /* @__PURE__ */
|
|
5244
|
+
return /* @__PURE__ */ jsx44(
|
|
4885
5245
|
"nav",
|
|
4886
5246
|
{
|
|
4887
5247
|
...rest,
|
|
4888
5248
|
ref,
|
|
4889
5249
|
className: ["ui-nav", "ui-nav--crumbs", className].filter(Boolean).join(" "),
|
|
4890
5250
|
"aria-label": ariaLabel,
|
|
4891
|
-
children: /* @__PURE__ */
|
|
5251
|
+
children: /* @__PURE__ */ jsx44("ol", { className: "ui-nav__crumbs", children: items.map((item, index) => {
|
|
4892
5252
|
const current = index === items.length - 1;
|
|
4893
|
-
const inner = /* @__PURE__ */
|
|
4894
|
-
item.icon && /* @__PURE__ */
|
|
4895
|
-
/* @__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 })
|
|
4896
5256
|
] });
|
|
4897
|
-
const linkProps = !current && item.href ? { className: "ui-nav__crumb", href:
|
|
4898
|
-
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(
|
|
4899
5259
|
"span",
|
|
4900
5260
|
{
|
|
4901
5261
|
className: ["ui-nav__crumb", current && "is-current"].filter(Boolean).join(" "),
|
|
@@ -4936,10 +5296,12 @@ export {
|
|
|
4936
5296
|
DrawerSection,
|
|
4937
5297
|
Dropdown,
|
|
4938
5298
|
EmptyState,
|
|
5299
|
+
Feedback,
|
|
4939
5300
|
Field,
|
|
4940
5301
|
FileDrop,
|
|
4941
5302
|
FileField,
|
|
4942
5303
|
FilterBar,
|
|
5304
|
+
Footer,
|
|
4943
5305
|
Icon,
|
|
4944
5306
|
KeyValueList,
|
|
4945
5307
|
Modal,
|