@octaviaflow/core 3.0.18-beta.32 → 3.0.18-beta.34
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/dist/chunk-KOE4VS4I.js +2945 -0
- package/dist/chunk-KOE4VS4I.js.map +1 -0
- package/dist/chunk-M2QXKYL2.js +2945 -0
- package/dist/chunk-M2QXKYL2.js.map +1 -0
- package/dist/components/ExecutionConsole/ExecutionConsole.d.ts.map +1 -1
- package/dist/components/FlowMinimap/FlowMinimap.d.ts.map +1 -1
- package/dist/components/MultiSelect/MultiSelect.d.ts.map +1 -1
- package/dist/components/Select/Select.d.ts.map +1 -1
- package/dist/index.cjs +717 -667
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +66 -12
- package/dist/index.js.map +1 -1
- package/dist/workflow.js +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -5024,6 +5024,20 @@ var Select = (0, import_react33.forwardRef)(function Select2({
|
|
|
5024
5024
|
};
|
|
5025
5025
|
}, [state.isOpen, state.close, closeOnOutsideClick]);
|
|
5026
5026
|
const selectedOption = options.find((o) => o.value === String(state.selectedKey ?? ""));
|
|
5027
|
+
const wasOpenBeforePressRef = (0, import_react33.useRef)(false);
|
|
5028
|
+
const handleTriggerPointerDown = (e) => {
|
|
5029
|
+
wasOpenBeforePressRef.current = state.isOpen;
|
|
5030
|
+
const baseHandler = buttonProps.onPointerDown;
|
|
5031
|
+
baseHandler?.(e);
|
|
5032
|
+
};
|
|
5033
|
+
const handleTriggerClick = (e) => {
|
|
5034
|
+
const baseHandler = buttonProps.onClick;
|
|
5035
|
+
baseHandler?.(e);
|
|
5036
|
+
if (wasOpenBeforePressRef.current && state.isOpen) {
|
|
5037
|
+
state.close();
|
|
5038
|
+
}
|
|
5039
|
+
wasOpenBeforePressRef.current = false;
|
|
5040
|
+
};
|
|
5027
5041
|
return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
|
|
5028
5042
|
"div",
|
|
5029
5043
|
{
|
|
@@ -5041,6 +5055,8 @@ var Select = (0, import_react33.forwardRef)(function Select2({
|
|
|
5041
5055
|
"button",
|
|
5042
5056
|
{
|
|
5043
5057
|
...buttonProps,
|
|
5058
|
+
onPointerDown: handleTriggerPointerDown,
|
|
5059
|
+
onClick: handleTriggerClick,
|
|
5044
5060
|
ref: setTriggerRef,
|
|
5045
5061
|
id: baseId,
|
|
5046
5062
|
form,
|
|
@@ -12650,6 +12666,7 @@ function ExecutionConsole({
|
|
|
12650
12666
|
}) {
|
|
12651
12667
|
const logEndRef = (0, import_react63.useRef)(null);
|
|
12652
12668
|
const logsRef = (0, import_react63.useRef)(null);
|
|
12669
|
+
const lastScrollTopRef = (0, import_react63.useRef)(0);
|
|
12653
12670
|
const [query, setQuery] = (0, import_react63.useState)("");
|
|
12654
12671
|
const [activeLevels, setActiveLevels] = (0, import_react63.useState)(() => new Set(ALL_LEVELS));
|
|
12655
12672
|
const [activeNode, setActiveNode] = (0, import_react63.useState)("all");
|
|
@@ -12687,9 +12704,13 @@ function ExecutionConsole({
|
|
|
12687
12704
|
const handleLogsScroll = () => {
|
|
12688
12705
|
const el = logsRef.current;
|
|
12689
12706
|
if (!el) return;
|
|
12690
|
-
const
|
|
12691
|
-
|
|
12707
|
+
const prev = lastScrollTopRef.current;
|
|
12708
|
+
const curr = el.scrollTop;
|
|
12709
|
+
const distance2 = el.scrollHeight - curr - el.clientHeight;
|
|
12710
|
+
const userScrolledUp = curr < prev - 1;
|
|
12711
|
+
if (userScrolledUp && distance2 > 60 && autoScroll) setAutoScroll(false);
|
|
12692
12712
|
if (distance2 <= 8 && !autoScroll) setAutoScroll(true);
|
|
12713
|
+
lastScrollTopRef.current = curr;
|
|
12693
12714
|
};
|
|
12694
12715
|
const toggleLevel = (level) => {
|
|
12695
12716
|
setActiveLevels((prev) => {
|
|
@@ -14434,13 +14455,57 @@ function FlowCanvas({
|
|
|
14434
14455
|
}
|
|
14435
14456
|
|
|
14436
14457
|
// src/components/FlowMinimap/FlowMinimap.tsx
|
|
14437
|
-
var
|
|
14458
|
+
var import_react72 = require("react");
|
|
14438
14459
|
|
|
14439
|
-
// src/workflow/
|
|
14460
|
+
// src/workflow/components/Handle/handleRegistry.ts
|
|
14440
14461
|
var import_react69 = require("react");
|
|
14441
|
-
var
|
|
14462
|
+
var HandleRegistryContext = (0, import_react69.createContext)(null);
|
|
14463
|
+
function useHandleRegistry() {
|
|
14464
|
+
const r = (0, import_react69.useContext)(HandleRegistryContext);
|
|
14465
|
+
if (!r) {
|
|
14466
|
+
throw new Error("[@octaviaflow/core/workflow] Handle must be used inside <FlowCanvas>.");
|
|
14467
|
+
}
|
|
14468
|
+
return r;
|
|
14469
|
+
}
|
|
14470
|
+
function createHandleRegistry() {
|
|
14471
|
+
const map = /* @__PURE__ */ new Map();
|
|
14472
|
+
const key = (n, t, h) => `${n}::${t}::${h}`;
|
|
14473
|
+
const listeners = /* @__PURE__ */ new Set();
|
|
14474
|
+
const notify = () => {
|
|
14475
|
+
for (const l of listeners) l();
|
|
14476
|
+
};
|
|
14477
|
+
return {
|
|
14478
|
+
register(d) {
|
|
14479
|
+
map.set(key(d.nodeId, d.type, d.handleId), d);
|
|
14480
|
+
notify();
|
|
14481
|
+
return () => {
|
|
14482
|
+
const k = key(d.nodeId, d.type, d.handleId);
|
|
14483
|
+
if (map.get(k) === d) {
|
|
14484
|
+
map.delete(k);
|
|
14485
|
+
notify();
|
|
14486
|
+
}
|
|
14487
|
+
};
|
|
14488
|
+
},
|
|
14489
|
+
resolve(nodeId, type, handleId) {
|
|
14490
|
+
return map.get(key(nodeId, type, handleId));
|
|
14491
|
+
},
|
|
14492
|
+
all() {
|
|
14493
|
+
return Array.from(map.values());
|
|
14494
|
+
},
|
|
14495
|
+
subscribe(listener) {
|
|
14496
|
+
listeners.add(listener);
|
|
14497
|
+
return () => {
|
|
14498
|
+
listeners.delete(listener);
|
|
14499
|
+
};
|
|
14500
|
+
}
|
|
14501
|
+
};
|
|
14502
|
+
}
|
|
14503
|
+
|
|
14504
|
+
// src/workflow/hooks/useFlow.ts
|
|
14505
|
+
var import_react70 = require("react");
|
|
14506
|
+
var FlowInstanceContext = (0, import_react70.createContext)(null);
|
|
14442
14507
|
function useFlow() {
|
|
14443
|
-
const instance = (0,
|
|
14508
|
+
const instance = (0, import_react70.useContext)(FlowInstanceContext);
|
|
14444
14509
|
if (!instance) {
|
|
14445
14510
|
throw new Error("[@octaviaflow/core/workflow] useFlow() must be called inside <FlowCanvas>.");
|
|
14446
14511
|
}
|
|
@@ -14448,10 +14513,10 @@ function useFlow() {
|
|
|
14448
14513
|
}
|
|
14449
14514
|
|
|
14450
14515
|
// src/workflow/store/context.ts
|
|
14451
|
-
var
|
|
14452
|
-
var FlowStoreContext = (0,
|
|
14516
|
+
var import_react71 = require("react");
|
|
14517
|
+
var FlowStoreContext = (0, import_react71.createContext)(null);
|
|
14453
14518
|
function useFlowStore() {
|
|
14454
|
-
const store = (0,
|
|
14519
|
+
const store = (0, import_react71.useContext)(FlowStoreContext);
|
|
14455
14520
|
if (!store) {
|
|
14456
14521
|
throw new Error(
|
|
14457
14522
|
"[@octaviaflow/core/workflow] useFlowStore must be called inside a <FlowCanvas>."
|
|
@@ -14460,12 +14525,56 @@ function useFlowStore() {
|
|
|
14460
14525
|
return store;
|
|
14461
14526
|
}
|
|
14462
14527
|
|
|
14528
|
+
// src/workflow/utils/geometry.ts
|
|
14529
|
+
var DEFAULT_NODE_WIDTH2 = 368;
|
|
14530
|
+
var DEFAULT_NODE_HEIGHT2 = 96;
|
|
14531
|
+
var COLLAPSED_GROUP_HEIGHT = 36;
|
|
14532
|
+
var COLLAPSED_FOREACH_HEIGHT = 40;
|
|
14533
|
+
function effectiveHeight(node) {
|
|
14534
|
+
const data = node.data;
|
|
14535
|
+
if (data?.collapsed) {
|
|
14536
|
+
if (node.type === "group") return COLLAPSED_GROUP_HEIGHT;
|
|
14537
|
+
if (node.type === "forEach") return COLLAPSED_FOREACH_HEIGHT;
|
|
14538
|
+
}
|
|
14539
|
+
return node.height ?? DEFAULT_NODE_HEIGHT2;
|
|
14540
|
+
}
|
|
14541
|
+
function handleCentre(node, side, index, total) {
|
|
14542
|
+
const w = node.width ?? DEFAULT_NODE_WIDTH2;
|
|
14543
|
+
const h = effectiveHeight(node);
|
|
14544
|
+
const x0 = node.position.x;
|
|
14545
|
+
const y0 = node.position.y;
|
|
14546
|
+
const denom = total + 1;
|
|
14547
|
+
const ratio = (index + 1) / denom;
|
|
14548
|
+
switch (side) {
|
|
14549
|
+
case "top":
|
|
14550
|
+
return { x: x0 + w * ratio, y: y0 };
|
|
14551
|
+
case "bottom":
|
|
14552
|
+
return { x: x0 + w * ratio, y: y0 + h };
|
|
14553
|
+
case "left":
|
|
14554
|
+
return { x: x0, y: y0 + h * ratio };
|
|
14555
|
+
case "right":
|
|
14556
|
+
return { x: x0 + w, y: y0 + h * ratio };
|
|
14557
|
+
}
|
|
14558
|
+
}
|
|
14559
|
+
function screenToFlow(p, vp) {
|
|
14560
|
+
return {
|
|
14561
|
+
x: (p.x - vp.x) / vp.zoom,
|
|
14562
|
+
y: (p.y - vp.y) / vp.zoom
|
|
14563
|
+
};
|
|
14564
|
+
}
|
|
14565
|
+
function flowToScreen(p, vp) {
|
|
14566
|
+
return {
|
|
14567
|
+
x: p.x * vp.zoom + vp.x,
|
|
14568
|
+
y: p.y * vp.zoom + vp.y
|
|
14569
|
+
};
|
|
14570
|
+
}
|
|
14571
|
+
|
|
14463
14572
|
// src/components/FlowMinimap/FlowMinimap.tsx
|
|
14464
14573
|
var import_jsx_runtime52 = require("react/jsx-runtime");
|
|
14465
14574
|
var MINIMAP_WIDTH = 140;
|
|
14466
14575
|
var MINIMAP_HEIGHT = 100;
|
|
14467
|
-
var
|
|
14468
|
-
var
|
|
14576
|
+
var DEFAULT_NODE_WIDTH3 = 240;
|
|
14577
|
+
var DEFAULT_NODE_HEIGHT3 = 96;
|
|
14469
14578
|
var DRAG_THRESHOLD_PX2 = 3;
|
|
14470
14579
|
var NO_STORE_SUBSCRIBE = (_cb) => () => {
|
|
14471
14580
|
};
|
|
@@ -14483,43 +14592,71 @@ function FlowMinimap(props) {
|
|
|
14483
14592
|
bounds_padding = 80,
|
|
14484
14593
|
className
|
|
14485
14594
|
} = props;
|
|
14486
|
-
const store = (0,
|
|
14487
|
-
const instance = (0,
|
|
14488
|
-
const
|
|
14595
|
+
const store = (0, import_react72.useContext)(FlowStoreContext);
|
|
14596
|
+
const instance = (0, import_react72.useContext)(FlowInstanceContext);
|
|
14597
|
+
const handleRegistry = (0, import_react72.useContext)(HandleRegistryContext);
|
|
14598
|
+
const { sub, snap } = (0, import_react72.useMemo)(
|
|
14489
14599
|
() => store ? { sub: store.subscribe, snap: () => store.getSnapshot() } : { sub: NO_STORE_SUBSCRIBE, snap: NO_STORE_SNAPSHOT },
|
|
14490
14600
|
[store]
|
|
14491
14601
|
);
|
|
14492
|
-
const liveSnapshot = (0,
|
|
14493
|
-
const
|
|
14602
|
+
const liveSnapshot = (0, import_react72.useSyncExternalStore)(sub, snap, snap);
|
|
14603
|
+
const [registryVersion, setRegistryVersion] = (0, import_react72.useState)(0);
|
|
14604
|
+
(0, import_react72.useEffect)(() => {
|
|
14605
|
+
if (!handleRegistry) return;
|
|
14606
|
+
return handleRegistry.subscribe(() => setRegistryVersion((v) => v + 1));
|
|
14607
|
+
}, [handleRegistry]);
|
|
14608
|
+
const resolvedNodes = (0, import_react72.useMemo)(() => {
|
|
14494
14609
|
if (nodesProp) return nodesProp;
|
|
14495
14610
|
if (!liveSnapshot) return [];
|
|
14496
14611
|
return liveSnapshot.nodes.filter((n) => !n.hidden).map((n) => ({
|
|
14497
14612
|
id: n.id,
|
|
14498
14613
|
x: n.position.x,
|
|
14499
14614
|
y: n.position.y,
|
|
14500
|
-
width: n.width ??
|
|
14501
|
-
height: n.height ??
|
|
14615
|
+
width: n.width ?? DEFAULT_NODE_WIDTH3,
|
|
14616
|
+
height: n.height ?? DEFAULT_NODE_HEIGHT3
|
|
14502
14617
|
}));
|
|
14503
14618
|
}, [nodesProp, liveSnapshot]);
|
|
14504
|
-
const resolvedEdges = (0,
|
|
14619
|
+
const resolvedEdges = (0, import_react72.useMemo)(() => {
|
|
14505
14620
|
if (edgesProp) return edgesProp;
|
|
14506
14621
|
if (!liveSnapshot) return [];
|
|
14507
|
-
const nodeIndex = new Map(
|
|
14622
|
+
const nodeIndex = new Map(
|
|
14623
|
+
liveSnapshot.nodes.filter((n) => !n.hidden).map((n) => [n.id, n])
|
|
14624
|
+
);
|
|
14625
|
+
const centreOf = (n) => {
|
|
14626
|
+
const w = n.width ?? DEFAULT_NODE_WIDTH3;
|
|
14627
|
+
const h = n.height ?? DEFAULT_NODE_HEIGHT3;
|
|
14628
|
+
return { x: n.position.x + w / 2, y: n.position.y + h / 2 };
|
|
14629
|
+
};
|
|
14508
14630
|
return liveSnapshot.edges.flatMap((e) => {
|
|
14631
|
+
if (e.hidden) return [];
|
|
14509
14632
|
const s = nodeIndex.get(e.source);
|
|
14510
14633
|
const t = nodeIndex.get(e.target);
|
|
14511
14634
|
if (!s || !t) return [];
|
|
14512
|
-
|
|
14513
|
-
|
|
14514
|
-
|
|
14515
|
-
|
|
14516
|
-
|
|
14517
|
-
|
|
14635
|
+
const srcDesc = handleRegistry?.resolve(
|
|
14636
|
+
s.id,
|
|
14637
|
+
"source",
|
|
14638
|
+
e.sourceHandle ?? "default"
|
|
14639
|
+
);
|
|
14640
|
+
const tgtDesc = handleRegistry?.resolve(
|
|
14641
|
+
t.id,
|
|
14642
|
+
"target",
|
|
14643
|
+
e.targetHandle ?? "default"
|
|
14644
|
+
);
|
|
14645
|
+
const from = srcDesc ? handleCentre(s, srcDesc.side, srcDesc.index, srcDesc.total) : (
|
|
14646
|
+
// Fallback: source defaults to bottom centre (matches the
|
|
14647
|
+
// canvas's source default before any Handle registers).
|
|
14648
|
+
s.sourcePosition ? handleCentre(s, s.sourcePosition, 0, 1) : centreOf(s)
|
|
14649
|
+
);
|
|
14650
|
+
const to = tgtDesc ? handleCentre(t, tgtDesc.side, tgtDesc.index, tgtDesc.total) : (
|
|
14651
|
+
// Fallback: target defaults to top centre.
|
|
14652
|
+
t.targetPosition ? handleCentre(t, t.targetPosition, 0, 1) : centreOf(t)
|
|
14653
|
+
);
|
|
14654
|
+
return [{ from, to }];
|
|
14518
14655
|
});
|
|
14519
|
-
}, [edgesProp, liveSnapshot,
|
|
14520
|
-
const minimapRef = (0,
|
|
14521
|
-
const [canvasSize, setCanvasSize] = (0,
|
|
14522
|
-
(0,
|
|
14656
|
+
}, [edgesProp, liveSnapshot, handleRegistry, registryVersion]);
|
|
14657
|
+
const minimapRef = (0, import_react72.useRef)(null);
|
|
14658
|
+
const [canvasSize, setCanvasSize] = (0, import_react72.useState)(null);
|
|
14659
|
+
(0, import_react72.useEffect)(() => {
|
|
14523
14660
|
if (!liveSnapshot) return;
|
|
14524
14661
|
const el = minimapRef.current?.closest(".ods-flow-canvas-v2");
|
|
14525
14662
|
if (!el) return;
|
|
@@ -14532,7 +14669,7 @@ function FlowMinimap(props) {
|
|
|
14532
14669
|
ro.observe(el);
|
|
14533
14670
|
return () => ro.disconnect();
|
|
14534
14671
|
}, [liveSnapshot !== null]);
|
|
14535
|
-
const effectiveViewportRect = (0,
|
|
14672
|
+
const effectiveViewportRect = (0, import_react72.useMemo)(() => {
|
|
14536
14673
|
if (viewportRectProp) return viewportRectProp;
|
|
14537
14674
|
if (!liveSnapshot || !canvasSize) return null;
|
|
14538
14675
|
const vp = liveSnapshot.viewport;
|
|
@@ -14544,7 +14681,7 @@ function FlowMinimap(props) {
|
|
|
14544
14681
|
height: canvasSize.height / z
|
|
14545
14682
|
};
|
|
14546
14683
|
}, [viewportRectProp, liveSnapshot, canvasSize]);
|
|
14547
|
-
const contentBounds = (0,
|
|
14684
|
+
const contentBounds = (0, import_react72.useMemo)(() => {
|
|
14548
14685
|
if (resolvedNodes.length === 0) return null;
|
|
14549
14686
|
let minX = Number.POSITIVE_INFINITY;
|
|
14550
14687
|
let minY = Number.POSITIVE_INFINITY;
|
|
@@ -14558,7 +14695,7 @@ function FlowMinimap(props) {
|
|
|
14558
14695
|
}
|
|
14559
14696
|
return { minX, minY, maxX, maxY };
|
|
14560
14697
|
}, [resolvedNodes]);
|
|
14561
|
-
const viewBox = (0,
|
|
14698
|
+
const viewBox = (0, import_react72.useMemo)(() => {
|
|
14562
14699
|
if (totalWidthProp !== void 0 && totalHeightProp !== void 0) {
|
|
14563
14700
|
return { x: 0, y: 0, w: totalWidthProp, h: totalHeightProp };
|
|
14564
14701
|
}
|
|
@@ -14573,7 +14710,7 @@ function FlowMinimap(props) {
|
|
|
14573
14710
|
h: maxY - minY + bounds_padding * 2
|
|
14574
14711
|
};
|
|
14575
14712
|
}, [totalWidthProp, totalHeightProp, contentBounds, bounds_padding]);
|
|
14576
|
-
const clampWorldTopLeft = (0,
|
|
14713
|
+
const clampWorldTopLeft = (0, import_react72.useCallback)(
|
|
14577
14714
|
(worldX, worldY, vw, vh) => {
|
|
14578
14715
|
if (!contentBounds) return { x: worldX, y: worldY };
|
|
14579
14716
|
const minTLX = viewBox.x;
|
|
@@ -14586,7 +14723,7 @@ function FlowMinimap(props) {
|
|
|
14586
14723
|
},
|
|
14587
14724
|
[contentBounds, viewBox.x, viewBox.y, viewBox.w, viewBox.h]
|
|
14588
14725
|
);
|
|
14589
|
-
const reportViewportChange = (0,
|
|
14726
|
+
const reportViewportChange = (0, import_react72.useCallback)(
|
|
14590
14727
|
(worldX, worldY) => {
|
|
14591
14728
|
if (effectiveViewportRect) {
|
|
14592
14729
|
const clamped = clampWorldTopLeft(
|
|
@@ -14621,8 +14758,8 @@ function FlowMinimap(props) {
|
|
|
14621
14758
|
},
|
|
14622
14759
|
[onViewportChange, viewportProp?.zoom, instance, liveSnapshot, effectiveViewportRect, clampWorldTopLeft]
|
|
14623
14760
|
);
|
|
14624
|
-
const svgRef = (0,
|
|
14625
|
-
const pointToWorld = (0,
|
|
14761
|
+
const svgRef = (0, import_react72.useRef)(null);
|
|
14762
|
+
const pointToWorld = (0, import_react72.useCallback)(
|
|
14626
14763
|
(clientX, clientY) => {
|
|
14627
14764
|
const svg = svgRef.current;
|
|
14628
14765
|
if (!svg) return null;
|
|
@@ -14637,7 +14774,7 @@ function FlowMinimap(props) {
|
|
|
14637
14774
|
},
|
|
14638
14775
|
[viewBox.x, viewBox.y, viewBox.w, viewBox.h]
|
|
14639
14776
|
);
|
|
14640
|
-
const dragRef = (0,
|
|
14777
|
+
const dragRef = (0, import_react72.useRef)({
|
|
14641
14778
|
dragging: false,
|
|
14642
14779
|
pointerId: -1,
|
|
14643
14780
|
startWorldX: 0,
|
|
@@ -14647,9 +14784,9 @@ function FlowMinimap(props) {
|
|
|
14647
14784
|
startClientX: 0,
|
|
14648
14785
|
startClientY: 0
|
|
14649
14786
|
});
|
|
14650
|
-
const suppressNextClickRef = (0,
|
|
14651
|
-
const [isDragging, setIsDragging] = (0,
|
|
14652
|
-
const onViewportPointerDown = (0,
|
|
14787
|
+
const suppressNextClickRef = (0, import_react72.useRef)(false);
|
|
14788
|
+
const [isDragging, setIsDragging] = (0, import_react72.useState)(false);
|
|
14789
|
+
const onViewportPointerDown = (0, import_react72.useCallback)(
|
|
14653
14790
|
(e) => {
|
|
14654
14791
|
if (!effectiveViewportRect) return;
|
|
14655
14792
|
e.stopPropagation();
|
|
@@ -14671,7 +14808,7 @@ function FlowMinimap(props) {
|
|
|
14671
14808
|
},
|
|
14672
14809
|
[effectiveViewportRect, pointToWorld]
|
|
14673
14810
|
);
|
|
14674
|
-
const onSvgPointerMove = (0,
|
|
14811
|
+
const onSvgPointerMove = (0, import_react72.useCallback)(
|
|
14675
14812
|
(e) => {
|
|
14676
14813
|
const d = dragRef.current;
|
|
14677
14814
|
if (!d.dragging || d.pointerId !== e.pointerId) return;
|
|
@@ -14687,7 +14824,7 @@ function FlowMinimap(props) {
|
|
|
14687
14824
|
},
|
|
14688
14825
|
[pointToWorld, reportViewportChange]
|
|
14689
14826
|
);
|
|
14690
|
-
const onSvgPointerUp = (0,
|
|
14827
|
+
const onSvgPointerUp = (0, import_react72.useCallback)((e) => {
|
|
14691
14828
|
const d = dragRef.current;
|
|
14692
14829
|
if (d.dragging && d.pointerId === e.pointerId) {
|
|
14693
14830
|
d.dragging = false;
|
|
@@ -14696,7 +14833,7 @@ function FlowMinimap(props) {
|
|
|
14696
14833
|
e.currentTarget.releasePointerCapture?.(e.pointerId);
|
|
14697
14834
|
}
|
|
14698
14835
|
}, []);
|
|
14699
|
-
const handleSvgClick = (0,
|
|
14836
|
+
const handleSvgClick = (0, import_react72.useCallback)(
|
|
14700
14837
|
(e) => {
|
|
14701
14838
|
if (suppressNextClickRef.current) {
|
|
14702
14839
|
suppressNextClickRef.current = false;
|
|
@@ -14714,7 +14851,7 @@ function FlowMinimap(props) {
|
|
|
14714
14851
|
},
|
|
14715
14852
|
[pointToWorld, effectiveViewportRect, reportViewportChange]
|
|
14716
14853
|
);
|
|
14717
|
-
const handleWheel = (0,
|
|
14854
|
+
const handleWheel = (0, import_react72.useCallback)(
|
|
14718
14855
|
(e) => {
|
|
14719
14856
|
if (!zoomOnScroll) return;
|
|
14720
14857
|
if (!instance || !liveSnapshot) return;
|
|
@@ -14740,7 +14877,7 @@ function FlowMinimap(props) {
|
|
|
14740
14877
|
},
|
|
14741
14878
|
[zoomOnScroll, instance, liveSnapshot, canvasSize, pointToWorld, clampWorldTopLeft]
|
|
14742
14879
|
);
|
|
14743
|
-
(0,
|
|
14880
|
+
(0, import_react72.useEffect)(
|
|
14744
14881
|
() => () => {
|
|
14745
14882
|
dragRef.current.dragging = false;
|
|
14746
14883
|
},
|
|
@@ -14818,14 +14955,14 @@ function FlowMinimap(props) {
|
|
|
14818
14955
|
|
|
14819
14956
|
// src/components/FlowToolbar/FlowToolbar.tsx
|
|
14820
14957
|
var import_icons19 = require("@octaviaflow/icons");
|
|
14821
|
-
var
|
|
14958
|
+
var import_react75 = require("react");
|
|
14822
14959
|
|
|
14823
14960
|
// src/workflow/store/selectors.ts
|
|
14824
|
-
var
|
|
14961
|
+
var import_react73 = require("react");
|
|
14825
14962
|
function useFlowSelector(selector, isEqual = Object.is) {
|
|
14826
14963
|
void isEqual;
|
|
14827
14964
|
const store = useFlowStore();
|
|
14828
|
-
return (0,
|
|
14965
|
+
return (0, import_react73.useSyncExternalStore)(
|
|
14829
14966
|
store.subscribe,
|
|
14830
14967
|
() => selector(store.getSnapshot()),
|
|
14831
14968
|
() => selector(store.getSnapshot())
|
|
@@ -14838,8 +14975,8 @@ var VIEWPORT_OR_NULL_NO_STORE_SUBSCRIBE = (_cb) => () => {
|
|
|
14838
14975
|
};
|
|
14839
14976
|
var VIEWPORT_OR_NULL_NO_STORE_SNAPSHOT = () => null;
|
|
14840
14977
|
function useViewportOrNull() {
|
|
14841
|
-
const store = (0,
|
|
14842
|
-
const { sub, snap } = (0,
|
|
14978
|
+
const store = (0, import_react73.useContext)(FlowStoreContext);
|
|
14979
|
+
const { sub, snap } = (0, import_react73.useMemo)(
|
|
14843
14980
|
() => store ? {
|
|
14844
14981
|
sub: store.subscribe,
|
|
14845
14982
|
snap: () => store.getSnapshot().viewport
|
|
@@ -14849,11 +14986,11 @@ function useViewportOrNull() {
|
|
|
14849
14986
|
},
|
|
14850
14987
|
[store]
|
|
14851
14988
|
);
|
|
14852
|
-
return (0,
|
|
14989
|
+
return (0, import_react73.useSyncExternalStore)(sub, snap, snap);
|
|
14853
14990
|
}
|
|
14854
14991
|
|
|
14855
14992
|
// src/components/Spinner/Spinner.tsx
|
|
14856
|
-
var
|
|
14993
|
+
var import_react74 = require("react");
|
|
14857
14994
|
var import_jsx_runtime53 = require("react/jsx-runtime");
|
|
14858
14995
|
var SIZE_PX = {
|
|
14859
14996
|
sm: 16,
|
|
@@ -14861,7 +14998,7 @@ var SIZE_PX = {
|
|
|
14861
14998
|
lg: 32,
|
|
14862
14999
|
xl: 48
|
|
14863
15000
|
};
|
|
14864
|
-
var Spinner = (0,
|
|
15001
|
+
var Spinner = (0, import_react74.forwardRef)(function Spinner2({
|
|
14865
15002
|
size = "md",
|
|
14866
15003
|
tone = "accent",
|
|
14867
15004
|
label = "Loading",
|
|
@@ -15003,10 +15140,10 @@ function FlowToolbarSave({
|
|
|
15003
15140
|
showLabel = false,
|
|
15004
15141
|
className
|
|
15005
15142
|
}) {
|
|
15006
|
-
const [inferred, setInferred] = (0,
|
|
15007
|
-
const prevSavedAt = (0,
|
|
15008
|
-
const prevLoading = (0,
|
|
15009
|
-
(0,
|
|
15143
|
+
const [inferred, setInferred] = (0, import_react75.useState)("idle");
|
|
15144
|
+
const prevSavedAt = (0, import_react75.useRef)(lastSavedAt);
|
|
15145
|
+
const prevLoading = (0, import_react75.useRef)(loading);
|
|
15146
|
+
(0, import_react75.useEffect)(() => {
|
|
15010
15147
|
if (state !== void 0) return;
|
|
15011
15148
|
if (error) {
|
|
15012
15149
|
setInferred("error");
|
|
@@ -15260,7 +15397,7 @@ function FormSection({
|
|
|
15260
15397
|
|
|
15261
15398
|
// src/components/Gauge/Gauge.tsx
|
|
15262
15399
|
var import_framer_motion23 = require("framer-motion");
|
|
15263
|
-
var
|
|
15400
|
+
var import_react76 = require("react");
|
|
15264
15401
|
var import_jsx_runtime56 = require("react/jsx-runtime");
|
|
15265
15402
|
var defaultFormat3 = (n) => {
|
|
15266
15403
|
if (Math.abs(n) >= 1e6) return `${(n / 1e6).toFixed(1)}M`;
|
|
@@ -15274,7 +15411,7 @@ function resolveBandColor(v, bands, fallback) {
|
|
|
15274
15411
|
}
|
|
15275
15412
|
return bands[bands.length - 1].color;
|
|
15276
15413
|
}
|
|
15277
|
-
var Gauge = (0,
|
|
15414
|
+
var Gauge = (0, import_react76.forwardRef)(function Gauge2({
|
|
15278
15415
|
value,
|
|
15279
15416
|
min = 0,
|
|
15280
15417
|
max = 100,
|
|
@@ -15294,11 +15431,11 @@ var Gauge = (0, import_react75.forwardRef)(function Gauge2({
|
|
|
15294
15431
|
"aria-label": ariaLabel,
|
|
15295
15432
|
...rest
|
|
15296
15433
|
}, ref) {
|
|
15297
|
-
const reactId = (0,
|
|
15434
|
+
const reactId = (0, import_react76.useId)();
|
|
15298
15435
|
const clamped = Math.max(min, Math.min(max, value));
|
|
15299
15436
|
const pct = (clamped - min) / Math.max(1e-6, max - min);
|
|
15300
15437
|
const fillColor = resolveBandColor(clamped, bands, color);
|
|
15301
|
-
const resolvedAriaLabel = (0,
|
|
15438
|
+
const resolvedAriaLabel = (0, import_react76.useMemo)(() => {
|
|
15302
15439
|
if (ariaLabel) return ariaLabel;
|
|
15303
15440
|
const t = typeof title === "string" ? title : "Gauge";
|
|
15304
15441
|
return `${t} \u2014 ${formatValue(clamped)} of ${formatValue(max)}`;
|
|
@@ -15556,7 +15693,7 @@ function LinearVariant({
|
|
|
15556
15693
|
}
|
|
15557
15694
|
|
|
15558
15695
|
// src/components/Grid/Grid.tsx
|
|
15559
|
-
var
|
|
15696
|
+
var import_react77 = require("react");
|
|
15560
15697
|
var import_jsx_runtime57 = require("react/jsx-runtime");
|
|
15561
15698
|
function resolveGap(gap) {
|
|
15562
15699
|
if (gap === void 0) return void 0;
|
|
@@ -15578,7 +15715,7 @@ var ALIGN_MAP = {
|
|
|
15578
15715
|
end: "end",
|
|
15579
15716
|
stretch: "stretch"
|
|
15580
15717
|
};
|
|
15581
|
-
var GridBase = (0,
|
|
15718
|
+
var GridBase = (0, import_react77.forwardRef)(function Grid({
|
|
15582
15719
|
columns = 12,
|
|
15583
15720
|
minColumnWidth = "240px",
|
|
15584
15721
|
gap = 4,
|
|
@@ -15613,7 +15750,7 @@ var GridBase = (0, import_react76.forwardRef)(function Grid({
|
|
|
15613
15750
|
);
|
|
15614
15751
|
});
|
|
15615
15752
|
GridBase.displayName = "Grid";
|
|
15616
|
-
var GridItem = (0,
|
|
15753
|
+
var GridItem = (0, import_react77.forwardRef)(
|
|
15617
15754
|
function GridItem2({ colSpan, rowSpan, colStart, rowStart, as, className, style, children, ...rest }, ref) {
|
|
15618
15755
|
const Component = as ?? "div";
|
|
15619
15756
|
return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
|
|
@@ -15639,7 +15776,7 @@ var Grid2 = Object.assign(GridBase, { Item: GridItem });
|
|
|
15639
15776
|
|
|
15640
15777
|
// src/components/Heatmap/Heatmap.tsx
|
|
15641
15778
|
var import_framer_motion24 = require("framer-motion");
|
|
15642
|
-
var
|
|
15779
|
+
var import_react78 = require("react");
|
|
15643
15780
|
var import_jsx_runtime58 = require("react/jsx-runtime");
|
|
15644
15781
|
var DEFAULT_SCALE2 = [
|
|
15645
15782
|
"var(--ods-accent-soft)",
|
|
@@ -15663,7 +15800,7 @@ function bucketColor2(value, lo, hi, scale) {
|
|
|
15663
15800
|
const i = bucketIndex(value, lo, hi, scale.length);
|
|
15664
15801
|
return i < 0 ? "transparent" : scale[i];
|
|
15665
15802
|
}
|
|
15666
|
-
var Heatmap = (0,
|
|
15803
|
+
var Heatmap = (0, import_react78.forwardRef)(
|
|
15667
15804
|
function Heatmap2({
|
|
15668
15805
|
data,
|
|
15669
15806
|
xLabels,
|
|
@@ -15689,37 +15826,37 @@ var Heatmap = (0, import_react77.forwardRef)(
|
|
|
15689
15826
|
onCellClick,
|
|
15690
15827
|
...rest
|
|
15691
15828
|
}, ref) {
|
|
15692
|
-
const reactId = (0,
|
|
15693
|
-
const xs = (0,
|
|
15829
|
+
const reactId = (0, import_react78.useId)();
|
|
15830
|
+
const xs = (0, import_react78.useMemo)(() => {
|
|
15694
15831
|
if (xLabels) return xLabels;
|
|
15695
15832
|
return Array.from(new Set(data.map((d) => d.x)));
|
|
15696
15833
|
}, [xLabels, data]);
|
|
15697
|
-
const ys = (0,
|
|
15834
|
+
const ys = (0, import_react78.useMemo)(() => {
|
|
15698
15835
|
if (yLabels) return yLabels;
|
|
15699
15836
|
return Array.from(new Set(data.map((d) => d.y)));
|
|
15700
15837
|
}, [yLabels, data]);
|
|
15701
|
-
const cellMap = (0,
|
|
15838
|
+
const cellMap = (0, import_react78.useMemo)(() => {
|
|
15702
15839
|
const m = /* @__PURE__ */ new Map();
|
|
15703
15840
|
for (const c of data) m.set(`${c.x}|${c.y}`, c);
|
|
15704
15841
|
return m;
|
|
15705
15842
|
}, [data]);
|
|
15706
|
-
const vMin = (0,
|
|
15843
|
+
const vMin = (0, import_react78.useMemo)(
|
|
15707
15844
|
() => domainMin ?? (data.length ? Math.min(...data.map((d) => d.value)) : 0),
|
|
15708
15845
|
[domainMin, data]
|
|
15709
15846
|
);
|
|
15710
|
-
const vMax = (0,
|
|
15847
|
+
const vMax = (0, import_react78.useMemo)(
|
|
15711
15848
|
() => domainMax ?? (data.length ? Math.max(...data.map((d) => d.value)) : 1),
|
|
15712
15849
|
[domainMax, data]
|
|
15713
15850
|
);
|
|
15714
|
-
const [hovered, setHovered] = (0,
|
|
15715
|
-
const fire = (0,
|
|
15851
|
+
const [hovered, setHovered] = (0, import_react78.useState)(null);
|
|
15852
|
+
const fire = (0, import_react78.useCallback)(
|
|
15716
15853
|
(cell) => {
|
|
15717
15854
|
setHovered(cell);
|
|
15718
15855
|
onCellHover?.(cell);
|
|
15719
15856
|
},
|
|
15720
15857
|
[onCellHover]
|
|
15721
15858
|
);
|
|
15722
|
-
const handleKey = (0,
|
|
15859
|
+
const handleKey = (0, import_react78.useCallback)(
|
|
15723
15860
|
(e, cell) => {
|
|
15724
15861
|
if (!onCellClick) return;
|
|
15725
15862
|
if (e.key === "Enter" || e.key === " ") {
|
|
@@ -15729,7 +15866,7 @@ var Heatmap = (0, import_react77.forwardRef)(
|
|
|
15729
15866
|
},
|
|
15730
15867
|
[onCellClick]
|
|
15731
15868
|
);
|
|
15732
|
-
const resolvedAriaLabel = (0,
|
|
15869
|
+
const resolvedAriaLabel = (0, import_react78.useMemo)(() => {
|
|
15733
15870
|
if (ariaLabel) return ariaLabel;
|
|
15734
15871
|
const t = typeof title === "string" ? title : "Heatmap";
|
|
15735
15872
|
return `${t} \u2014 ${xs.length}\xD7${ys.length} grid, ${data.length} cells, range ${formatValue(vMin)} to ${formatValue(vMax)}`;
|
|
@@ -15892,7 +16029,7 @@ var Heatmap = (0, import_react77.forwardRef)(
|
|
|
15892
16029
|
Heatmap.displayName = "Heatmap";
|
|
15893
16030
|
|
|
15894
16031
|
// src/components/HoverCard/HoverCard.tsx
|
|
15895
|
-
var
|
|
16032
|
+
var import_react79 = require("react");
|
|
15896
16033
|
var import_react_dom9 = require("react-dom");
|
|
15897
16034
|
var import_jsx_runtime59 = require("react/jsx-runtime");
|
|
15898
16035
|
function computePosition3(rect, panelRect, placement, offset) {
|
|
@@ -15918,12 +16055,12 @@ function HoverCard({
|
|
|
15918
16055
|
children,
|
|
15919
16056
|
className
|
|
15920
16057
|
}) {
|
|
15921
|
-
const [open, setOpen] = (0,
|
|
15922
|
-
const triggerRef = (0,
|
|
15923
|
-
const panelRef = (0,
|
|
15924
|
-
const openTimer = (0,
|
|
15925
|
-
const closeTimer = (0,
|
|
15926
|
-
const [coords, setCoords] = (0,
|
|
16058
|
+
const [open, setOpen] = (0, import_react79.useState)(false);
|
|
16059
|
+
const triggerRef = (0, import_react79.useRef)(null);
|
|
16060
|
+
const panelRef = (0, import_react79.useRef)(null);
|
|
16061
|
+
const openTimer = (0, import_react79.useRef)(null);
|
|
16062
|
+
const closeTimer = (0, import_react79.useRef)(null);
|
|
16063
|
+
const [coords, setCoords] = (0, import_react79.useState)(null);
|
|
15927
16064
|
const clearTimers = () => {
|
|
15928
16065
|
if (openTimer.current) {
|
|
15929
16066
|
clearTimeout(openTimer.current);
|
|
@@ -15934,7 +16071,7 @@ function HoverCard({
|
|
|
15934
16071
|
closeTimer.current = null;
|
|
15935
16072
|
}
|
|
15936
16073
|
};
|
|
15937
|
-
(0,
|
|
16074
|
+
(0, import_react79.useEffect)(() => () => clearTimers(), []);
|
|
15938
16075
|
const show = () => {
|
|
15939
16076
|
clearTimers();
|
|
15940
16077
|
openTimer.current = setTimeout(() => setOpen(true), openDelay);
|
|
@@ -15943,19 +16080,19 @@ function HoverCard({
|
|
|
15943
16080
|
clearTimers();
|
|
15944
16081
|
closeTimer.current = setTimeout(() => setOpen(false), closeDelay);
|
|
15945
16082
|
};
|
|
15946
|
-
const reposition = (0,
|
|
16083
|
+
const reposition = (0, import_react79.useCallback)(() => {
|
|
15947
16084
|
if (!triggerRef.current || !panelRef.current) return;
|
|
15948
16085
|
const trigRect = triggerRef.current.getBoundingClientRect();
|
|
15949
16086
|
const panelRect = panelRef.current.getBoundingClientRect();
|
|
15950
16087
|
setCoords(computePosition3(trigRect, panelRect, placement, offset));
|
|
15951
16088
|
}, [placement, offset]);
|
|
15952
|
-
(0,
|
|
16089
|
+
(0, import_react79.useLayoutEffect)(() => {
|
|
15953
16090
|
if (!open) return;
|
|
15954
16091
|
reposition();
|
|
15955
16092
|
const id = requestAnimationFrame(reposition);
|
|
15956
16093
|
return () => cancelAnimationFrame(id);
|
|
15957
16094
|
}, [open, reposition]);
|
|
15958
|
-
(0,
|
|
16095
|
+
(0, import_react79.useEffect)(() => {
|
|
15959
16096
|
if (!open) return;
|
|
15960
16097
|
const h = () => reposition();
|
|
15961
16098
|
window.addEventListener("scroll", h, true);
|
|
@@ -16006,9 +16143,9 @@ function HoverCard({
|
|
|
16006
16143
|
}
|
|
16007
16144
|
|
|
16008
16145
|
// src/components/IconCard/IconCard.tsx
|
|
16009
|
-
var
|
|
16146
|
+
var import_react80 = require("react");
|
|
16010
16147
|
var import_jsx_runtime60 = require("react/jsx-runtime");
|
|
16011
|
-
var IconCard = (0,
|
|
16148
|
+
var IconCard = (0, import_react80.forwardRef)(
|
|
16012
16149
|
function IconCard2({
|
|
16013
16150
|
variant = "default",
|
|
16014
16151
|
size = "md",
|
|
@@ -16026,7 +16163,7 @@ var IconCard = (0, import_react79.forwardRef)(
|
|
|
16026
16163
|
className,
|
|
16027
16164
|
...rest
|
|
16028
16165
|
}, ref) {
|
|
16029
|
-
const reactId = (0,
|
|
16166
|
+
const reactId = (0, import_react80.useId)();
|
|
16030
16167
|
const baseId = providedId ?? `ods-icon-card-${reactId}`;
|
|
16031
16168
|
const titleId = `${baseId}-title`;
|
|
16032
16169
|
const descId = description ? `${baseId}-desc` : void 0;
|
|
@@ -16109,10 +16246,10 @@ IconCard.displayName = "IconCard";
|
|
|
16109
16246
|
|
|
16110
16247
|
// src/components/Input/Input.tsx
|
|
16111
16248
|
var import_icons20 = require("@octaviaflow/icons");
|
|
16112
|
-
var
|
|
16249
|
+
var import_react81 = require("react");
|
|
16113
16250
|
var import_jsx_runtime61 = require("react/jsx-runtime");
|
|
16114
16251
|
var CLEAR_GLYPH = /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_icons20.CloseIcon, { width: 12, height: 12, "aria-hidden": "true" });
|
|
16115
|
-
var Input = (0,
|
|
16252
|
+
var Input = (0, import_react81.forwardRef)(
|
|
16116
16253
|
({
|
|
16117
16254
|
type = "text",
|
|
16118
16255
|
size = "md",
|
|
@@ -16135,9 +16272,9 @@ var Input = (0, import_react80.forwardRef)(
|
|
|
16135
16272
|
onKeyDown,
|
|
16136
16273
|
...props
|
|
16137
16274
|
}, forwardedRef) => {
|
|
16138
|
-
const innerRef = (0,
|
|
16139
|
-
(0,
|
|
16140
|
-
const reactId = (0,
|
|
16275
|
+
const innerRef = (0, import_react81.useRef)(null);
|
|
16276
|
+
(0, import_react81.useImperativeHandle)(forwardedRef, () => innerRef.current);
|
|
16277
|
+
const reactId = (0, import_react81.useId)();
|
|
16141
16278
|
const inputId = id ?? `${reactId}-input`;
|
|
16142
16279
|
const errorId = `${reactId}-err`;
|
|
16143
16280
|
const helperId = `${reactId}-help`;
|
|
@@ -16238,7 +16375,7 @@ var Input = (0, import_react80.forwardRef)(
|
|
|
16238
16375
|
Input.displayName = "Input";
|
|
16239
16376
|
|
|
16240
16377
|
// src/components/IntegrationCard/IntegrationCard.tsx
|
|
16241
|
-
var
|
|
16378
|
+
var import_react82 = require("react");
|
|
16242
16379
|
var import_jsx_runtime62 = require("react/jsx-runtime");
|
|
16243
16380
|
var CATEGORY_LABEL = {
|
|
16244
16381
|
communication: "Communication",
|
|
@@ -16258,7 +16395,7 @@ var STATUS_LABEL4 = {
|
|
|
16258
16395
|
"coming-soon": "Coming soon",
|
|
16259
16396
|
deprecated: "Deprecated"
|
|
16260
16397
|
};
|
|
16261
|
-
var IntegrationCard = (0,
|
|
16398
|
+
var IntegrationCard = (0, import_react82.forwardRef)(function IntegrationCard2({
|
|
16262
16399
|
name,
|
|
16263
16400
|
nameAs = "h3",
|
|
16264
16401
|
logo,
|
|
@@ -16282,7 +16419,7 @@ var IntegrationCard = (0, import_react81.forwardRef)(function IntegrationCard2({
|
|
|
16282
16419
|
className,
|
|
16283
16420
|
...rest
|
|
16284
16421
|
}, ref) {
|
|
16285
|
-
const reactId = (0,
|
|
16422
|
+
const reactId = (0, import_react82.useId)();
|
|
16286
16423
|
const baseId = providedId ?? `ods-integration-card-${reactId}`;
|
|
16287
16424
|
const nameId = `${baseId}-name`;
|
|
16288
16425
|
const descId = description ? `${baseId}-desc` : void 0;
|
|
@@ -16454,9 +16591,9 @@ IntegrationCard.displayName = "IntegrationCard";
|
|
|
16454
16591
|
|
|
16455
16592
|
// src/components/JsonViewer/JsonViewer.tsx
|
|
16456
16593
|
var import_icons21 = require("@octaviaflow/icons");
|
|
16457
|
-
var
|
|
16594
|
+
var import_react83 = require("react");
|
|
16458
16595
|
var import_jsx_runtime63 = require("react/jsx-runtime");
|
|
16459
|
-
var JsonViewer = (0,
|
|
16596
|
+
var JsonViewer = (0, import_react83.forwardRef)(
|
|
16460
16597
|
function JsonViewer2({
|
|
16461
16598
|
data,
|
|
16462
16599
|
mode = "view",
|
|
@@ -16504,11 +16641,11 @@ function JsonNode({
|
|
|
16504
16641
|
truncateAt,
|
|
16505
16642
|
isLast = true
|
|
16506
16643
|
}) {
|
|
16507
|
-
const [open, setOpen] = (0,
|
|
16644
|
+
const [open, setOpen] = (0, import_react83.useState)(depth < defaultExpandDepth);
|
|
16508
16645
|
const isObject = value !== null && typeof value === "object" && !Array.isArray(value);
|
|
16509
16646
|
const isArray = Array.isArray(value);
|
|
16510
16647
|
const isContainer = isObject || isArray;
|
|
16511
|
-
const renderKey = (0,
|
|
16648
|
+
const renderKey = (0, import_react83.useMemo)(() => {
|
|
16512
16649
|
if (name === void 0) return null;
|
|
16513
16650
|
if (typeof name === "number") {
|
|
16514
16651
|
return showIndexes ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "ods-json-viewer__key ods-json-viewer__key--index", children: name }) : null;
|
|
@@ -16595,7 +16732,7 @@ function Leaf({
|
|
|
16595
16732
|
truncateAt,
|
|
16596
16733
|
copyable
|
|
16597
16734
|
}) {
|
|
16598
|
-
const [copied, setCopied] = (0,
|
|
16735
|
+
const [copied, setCopied] = (0, import_react83.useState)(false);
|
|
16599
16736
|
let display;
|
|
16600
16737
|
let variant;
|
|
16601
16738
|
if (value === null) {
|
|
@@ -16674,15 +16811,15 @@ function extractJsonErrorPosition(err, text) {
|
|
|
16674
16811
|
return { line: 1, col: 1, message };
|
|
16675
16812
|
}
|
|
16676
16813
|
function JsonEditBody({ data, onChange, onValidate }) {
|
|
16677
|
-
const initial = (0,
|
|
16814
|
+
const initial = (0, import_react83.useMemo)(() => {
|
|
16678
16815
|
try {
|
|
16679
16816
|
return JSON.stringify(data, null, 2);
|
|
16680
16817
|
} catch {
|
|
16681
16818
|
return "{}";
|
|
16682
16819
|
}
|
|
16683
16820
|
}, []);
|
|
16684
|
-
const [text, setText] = (0,
|
|
16685
|
-
const [parseError, setParseError] = (0,
|
|
16821
|
+
const [text, setText] = (0, import_react83.useState)(initial);
|
|
16822
|
+
const [parseError, setParseError] = (0, import_react83.useState)(null);
|
|
16686
16823
|
const validate = (next) => {
|
|
16687
16824
|
try {
|
|
16688
16825
|
JSON.parse(next);
|
|
@@ -16699,7 +16836,7 @@ function JsonEditBody({ data, onChange, onValidate }) {
|
|
|
16699
16836
|
onChange?.(next);
|
|
16700
16837
|
validate(next);
|
|
16701
16838
|
};
|
|
16702
|
-
(0,
|
|
16839
|
+
(0, import_react83.useEffect)(() => {
|
|
16703
16840
|
validate(initial);
|
|
16704
16841
|
}, []);
|
|
16705
16842
|
return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "ods-json-viewer__edit", children: [
|
|
@@ -16736,12 +16873,12 @@ function JsonEditBody({ data, onChange, onValidate }) {
|
|
|
16736
16873
|
|
|
16737
16874
|
// src/components/KanbanCard/KanbanCard.tsx
|
|
16738
16875
|
var import_icons22 = require("@octaviaflow/icons");
|
|
16739
|
-
var
|
|
16876
|
+
var import_react84 = require("react");
|
|
16740
16877
|
var import_jsx_runtime64 = require("react/jsx-runtime");
|
|
16741
16878
|
function isAssigneeObject(v) {
|
|
16742
16879
|
return typeof v === "object" && v !== null && "name" in v;
|
|
16743
16880
|
}
|
|
16744
|
-
var KanbanCard = (0,
|
|
16881
|
+
var KanbanCard = (0, import_react84.forwardRef)(
|
|
16745
16882
|
function KanbanCard2({
|
|
16746
16883
|
title,
|
|
16747
16884
|
titleAs = "h3",
|
|
@@ -16762,7 +16899,7 @@ var KanbanCard = (0, import_react83.forwardRef)(
|
|
|
16762
16899
|
className,
|
|
16763
16900
|
...rest
|
|
16764
16901
|
}, ref) {
|
|
16765
|
-
const reactId = (0,
|
|
16902
|
+
const reactId = (0, import_react84.useId)();
|
|
16766
16903
|
const baseId = providedId ?? `ods-kanban-card-${reactId}`;
|
|
16767
16904
|
const titleId = `${baseId}-title`;
|
|
16768
16905
|
const tagList = tags ?? (tag ? [tag] : []);
|
|
@@ -16882,9 +17019,9 @@ var KanbanCard = (0, import_react83.forwardRef)(
|
|
|
16882
17019
|
KanbanCard.displayName = "KanbanCard";
|
|
16883
17020
|
|
|
16884
17021
|
// src/components/Kbd/Kbd.tsx
|
|
16885
|
-
var
|
|
17022
|
+
var import_react85 = require("react");
|
|
16886
17023
|
var import_jsx_runtime65 = require("react/jsx-runtime");
|
|
16887
|
-
var Kbd = (0,
|
|
17024
|
+
var Kbd = (0, import_react85.forwardRef)(function Kbd2({ size = "md", children, className, ...rest }, ref) {
|
|
16888
17025
|
return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
|
|
16889
17026
|
"kbd",
|
|
16890
17027
|
{
|
|
@@ -16896,7 +17033,7 @@ var Kbd = (0, import_react84.forwardRef)(function Kbd2({ size = "md", children,
|
|
|
16896
17033
|
);
|
|
16897
17034
|
});
|
|
16898
17035
|
Kbd.displayName = "Kbd";
|
|
16899
|
-
var KbdGroup = (0,
|
|
17036
|
+
var KbdGroup = (0, import_react85.forwardRef)(
|
|
16900
17037
|
function KbdGroup2({ size = "md", separator = "+", keys, className, ...rest }, ref) {
|
|
16901
17038
|
return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
|
|
16902
17039
|
"span",
|
|
@@ -16920,7 +17057,7 @@ KbdGroup.displayName = "KbdGroup";
|
|
|
16920
17057
|
|
|
16921
17058
|
// src/components/LineChart/LineChart.tsx
|
|
16922
17059
|
var import_framer_motion25 = require("framer-motion");
|
|
16923
|
-
var
|
|
17060
|
+
var import_react86 = require("react");
|
|
16924
17061
|
var import_jsx_runtime66 = require("react/jsx-runtime");
|
|
16925
17062
|
var defaultFormat5 = (n) => {
|
|
16926
17063
|
if (Math.abs(n) >= 1e6) return `${(n / 1e6).toFixed(1)}M`;
|
|
@@ -16955,7 +17092,7 @@ function buildTicks2(min, max, count) {
|
|
|
16955
17092
|
var W = 360;
|
|
16956
17093
|
var H = 100;
|
|
16957
17094
|
var PAD = 6;
|
|
16958
|
-
var LineChart = (0,
|
|
17095
|
+
var LineChart = (0, import_react86.forwardRef)(
|
|
16959
17096
|
function LineChart2({
|
|
16960
17097
|
data,
|
|
16961
17098
|
series,
|
|
@@ -16984,8 +17121,8 @@ var LineChart = (0, import_react85.forwardRef)(
|
|
|
16984
17121
|
onZoomChange,
|
|
16985
17122
|
...rest
|
|
16986
17123
|
}, ref) {
|
|
16987
|
-
const reactId = (0,
|
|
16988
|
-
const allLines = (0,
|
|
17124
|
+
const reactId = (0, import_react86.useId)();
|
|
17125
|
+
const allLines = (0, import_react86.useMemo)(() => {
|
|
16989
17126
|
if (series && series.length > 0) return series;
|
|
16990
17127
|
return [
|
|
16991
17128
|
{
|
|
@@ -16997,25 +17134,25 @@ var LineChart = (0, import_react85.forwardRef)(
|
|
|
16997
17134
|
}
|
|
16998
17135
|
];
|
|
16999
17136
|
}, [series, data, stroke, fill]);
|
|
17000
|
-
const [zoom, setZoom] = (0,
|
|
17137
|
+
const [zoom, setZoom] = (0, import_react86.useState)(
|
|
17001
17138
|
null
|
|
17002
17139
|
);
|
|
17003
17140
|
const totalX = allLines[0]?.data.length ?? 0;
|
|
17004
17141
|
const visibleRange = zoom ?? { start: 0, end: Math.max(0, totalX - 1) };
|
|
17005
|
-
const lines = (0,
|
|
17142
|
+
const lines = (0, import_react86.useMemo)(
|
|
17006
17143
|
() => allLines.map((s) => ({
|
|
17007
17144
|
...s,
|
|
17008
17145
|
data: s.data.slice(visibleRange.start, visibleRange.end + 1)
|
|
17009
17146
|
})),
|
|
17010
17147
|
[allLines, visibleRange.start, visibleRange.end]
|
|
17011
17148
|
);
|
|
17012
|
-
const xLabels = (0,
|
|
17149
|
+
const xLabels = (0, import_react86.useMemo)(
|
|
17013
17150
|
() => lines[0]?.data.map((p) => p.x) ?? [],
|
|
17014
17151
|
[lines]
|
|
17015
17152
|
);
|
|
17016
17153
|
const xCount = xLabels.length;
|
|
17017
17154
|
const stepX = (W - PAD * 2) / Math.max(1, xCount - 1);
|
|
17018
|
-
const allYs = (0,
|
|
17155
|
+
const allYs = (0, import_react86.useMemo)(
|
|
17019
17156
|
() => lines.flatMap((s) => s.data.map((p) => p.y)),
|
|
17020
17157
|
[lines]
|
|
17021
17158
|
);
|
|
@@ -17023,7 +17160,7 @@ var LineChart = (0, import_react85.forwardRef)(
|
|
|
17023
17160
|
const dataMax = allYs.length ? Math.max(...allYs) : 1;
|
|
17024
17161
|
const lo = yMin ?? Math.min(0, dataMin);
|
|
17025
17162
|
const hi = Math.max(lo + 1, yMax ?? dataMax);
|
|
17026
|
-
const projected = (0,
|
|
17163
|
+
const projected = (0, import_react86.useMemo)(
|
|
17027
17164
|
() => lines.map(
|
|
17028
17165
|
(s) => s.data.map(
|
|
17029
17166
|
(p, i) => [
|
|
@@ -17034,15 +17171,15 @@ var LineChart = (0, import_react85.forwardRef)(
|
|
|
17034
17171
|
),
|
|
17035
17172
|
[lines, stepX, lo, hi]
|
|
17036
17173
|
);
|
|
17037
|
-
const ticks = (0,
|
|
17174
|
+
const ticks = (0, import_react86.useMemo)(
|
|
17038
17175
|
() => buildTicks2(lo, hi, Math.max(2, yTicks)),
|
|
17039
17176
|
[lo, hi, yTicks]
|
|
17040
17177
|
);
|
|
17041
|
-
const [hoveredIdx, setHoveredIdx] = (0,
|
|
17042
|
-
const [pointerPct, setPointerPct] = (0,
|
|
17043
|
-
const plotRef = (0,
|
|
17044
|
-
const [brush, setBrush] = (0,
|
|
17045
|
-
const indexFromPct = (0,
|
|
17178
|
+
const [hoveredIdx, setHoveredIdx] = (0, import_react86.useState)(null);
|
|
17179
|
+
const [pointerPct, setPointerPct] = (0, import_react86.useState)(null);
|
|
17180
|
+
const plotRef = (0, import_react86.useRef)(null);
|
|
17181
|
+
const [brush, setBrush] = (0, import_react86.useState)(null);
|
|
17182
|
+
const indexFromPct = (0, import_react86.useCallback)(
|
|
17046
17183
|
(pct) => {
|
|
17047
17184
|
if (xCount === 0) return 0;
|
|
17048
17185
|
return Math.max(
|
|
@@ -17052,7 +17189,7 @@ var LineChart = (0, import_react85.forwardRef)(
|
|
|
17052
17189
|
},
|
|
17053
17190
|
[xCount]
|
|
17054
17191
|
);
|
|
17055
|
-
const handlePlotMove = (0,
|
|
17192
|
+
const handlePlotMove = (0, import_react86.useCallback)(
|
|
17056
17193
|
(e) => {
|
|
17057
17194
|
if (xCount === 0) return;
|
|
17058
17195
|
const rect = plotRef.current?.getBoundingClientRect();
|
|
@@ -17081,12 +17218,12 @@ var LineChart = (0, import_react85.forwardRef)(
|
|
|
17081
17218
|
visibleRange.start
|
|
17082
17219
|
]
|
|
17083
17220
|
);
|
|
17084
|
-
const handlePlotLeave = (0,
|
|
17221
|
+
const handlePlotLeave = (0, import_react86.useCallback)(() => {
|
|
17085
17222
|
setHoveredIdx(null);
|
|
17086
17223
|
setPointerPct(null);
|
|
17087
17224
|
onPointHover?.(null, null, null);
|
|
17088
17225
|
}, [onPointHover]);
|
|
17089
|
-
const handlePlotDown = (0,
|
|
17226
|
+
const handlePlotDown = (0, import_react86.useCallback)(
|
|
17090
17227
|
(e) => {
|
|
17091
17228
|
if (!zoomable) return;
|
|
17092
17229
|
const rect = plotRef.current?.getBoundingClientRect();
|
|
@@ -17099,7 +17236,7 @@ var LineChart = (0, import_react85.forwardRef)(
|
|
|
17099
17236
|
},
|
|
17100
17237
|
[zoomable]
|
|
17101
17238
|
);
|
|
17102
|
-
(0,
|
|
17239
|
+
(0, import_react86.useEffect)(() => {
|
|
17103
17240
|
if (!brush) return;
|
|
17104
17241
|
const onUp = () => {
|
|
17105
17242
|
const a = Math.min(brush.startPct, brush.currentPct);
|
|
@@ -17120,18 +17257,18 @@ var LineChart = (0, import_react85.forwardRef)(
|
|
|
17120
17257
|
window.addEventListener("mouseup", onUp);
|
|
17121
17258
|
return () => window.removeEventListener("mouseup", onUp);
|
|
17122
17259
|
}, [brush, indexFromPct, visibleRange.start, onZoomChange]);
|
|
17123
|
-
const handleDoubleClick = (0,
|
|
17260
|
+
const handleDoubleClick = (0, import_react86.useCallback)(() => {
|
|
17124
17261
|
if (!zoomable || !zoom) return;
|
|
17125
17262
|
setZoom(null);
|
|
17126
17263
|
onZoomChange?.(null);
|
|
17127
17264
|
}, [zoomable, zoom, onZoomChange]);
|
|
17128
|
-
const handlePlotClick = (0,
|
|
17265
|
+
const handlePlotClick = (0, import_react86.useCallback)(() => {
|
|
17129
17266
|
if (hoveredIdx === null || !onPointClick) return;
|
|
17130
17267
|
const s = lines[0];
|
|
17131
17268
|
const p = s?.data[hoveredIdx];
|
|
17132
17269
|
if (p) onPointClick(p, s.id, visibleRange.start + hoveredIdx);
|
|
17133
17270
|
}, [hoveredIdx, lines, onPointClick, visibleRange.start]);
|
|
17134
|
-
const resolvedAriaLabel = (0,
|
|
17271
|
+
const resolvedAriaLabel = (0, import_react86.useMemo)(() => {
|
|
17135
17272
|
if (ariaLabel) return ariaLabel;
|
|
17136
17273
|
const titleText = typeof title === "string" ? title : "";
|
|
17137
17274
|
const summary = lines.map((s) => {
|
|
@@ -17145,11 +17282,11 @@ var LineChart = (0, import_react85.forwardRef)(
|
|
|
17145
17282
|
const showX = showAxis === "x" || showAxis === "both";
|
|
17146
17283
|
const isMulti = (series?.length ?? 0) > 0;
|
|
17147
17284
|
const tooltipPoint = hoveredIdx !== null ? lines[0]?.data[hoveredIdx] : void 0;
|
|
17148
|
-
const dataXPct = (0,
|
|
17285
|
+
const dataXPct = (0, import_react86.useCallback)(
|
|
17149
17286
|
(i) => (PAD + i * stepX) / W * 100,
|
|
17150
17287
|
[stepX]
|
|
17151
17288
|
);
|
|
17152
|
-
const dataYPct = (0,
|
|
17289
|
+
const dataYPct = (0, import_react86.useCallback)(
|
|
17153
17290
|
(v) => (PAD + (1 - (v - lo) / (hi - lo)) * (H - PAD * 2)) / H * 100,
|
|
17154
17291
|
[lo, hi]
|
|
17155
17292
|
);
|
|
@@ -17457,9 +17594,9 @@ var LineChart = (0, import_react85.forwardRef)(
|
|
|
17457
17594
|
LineChart.displayName = "LineChart";
|
|
17458
17595
|
|
|
17459
17596
|
// src/components/LinkButton/LinkButton.tsx
|
|
17460
|
-
var
|
|
17597
|
+
var import_react87 = require("react");
|
|
17461
17598
|
var import_jsx_runtime67 = require("react/jsx-runtime");
|
|
17462
|
-
var LinkButton = (0,
|
|
17599
|
+
var LinkButton = (0, import_react87.forwardRef)(
|
|
17463
17600
|
function LinkButton2({
|
|
17464
17601
|
variant = "primary",
|
|
17465
17602
|
size = "md",
|
|
@@ -17531,16 +17668,16 @@ LinkButton.displayName = "LinkButton";
|
|
|
17531
17668
|
|
|
17532
17669
|
// src/components/MetricCard/MetricCard.tsx
|
|
17533
17670
|
var import_icons23 = require("@octaviaflow/icons");
|
|
17534
|
-
var
|
|
17671
|
+
var import_react90 = require("react");
|
|
17535
17672
|
|
|
17536
17673
|
// src/components/CountUp/CountUp.tsx
|
|
17537
|
-
var
|
|
17674
|
+
var import_react88 = require("react");
|
|
17538
17675
|
var import_jsx_runtime68 = require("react/jsx-runtime");
|
|
17539
17676
|
var easeLinear = (t) => t;
|
|
17540
17677
|
var easeOutCubic = (t) => 1 - Math.pow(1 - t, 3);
|
|
17541
17678
|
var easeOutQuart = (t) => 1 - Math.pow(1 - t, 4);
|
|
17542
17679
|
var easeOutExpo = (t) => t === 1 ? 1 : 1 - Math.pow(2, -10 * t);
|
|
17543
|
-
var CountUp = (0,
|
|
17680
|
+
var CountUp = (0, import_react88.forwardRef)(
|
|
17544
17681
|
function CountUp2({
|
|
17545
17682
|
value,
|
|
17546
17683
|
from = 0,
|
|
@@ -17556,9 +17693,9 @@ var CountUp = (0, import_react87.forwardRef)(
|
|
|
17556
17693
|
className,
|
|
17557
17694
|
...rest
|
|
17558
17695
|
}, ref) {
|
|
17559
|
-
const [n, setN] = (0,
|
|
17560
|
-
const lastRendered = (0,
|
|
17561
|
-
(0,
|
|
17696
|
+
const [n, setN] = (0, import_react88.useState)(disableAnimation ? value : from);
|
|
17697
|
+
const lastRendered = (0, import_react88.useRef)(disableAnimation ? value : from);
|
|
17698
|
+
(0, import_react88.useEffect)(() => {
|
|
17562
17699
|
const reduced = typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
|
|
17563
17700
|
if (disableAnimation || reduced) {
|
|
17564
17701
|
setN(value);
|
|
@@ -17625,7 +17762,7 @@ CountUp.displayName = "CountUp";
|
|
|
17625
17762
|
|
|
17626
17763
|
// src/components/Sparkline/Sparkline.tsx
|
|
17627
17764
|
var import_framer_motion26 = require("framer-motion");
|
|
17628
|
-
var
|
|
17765
|
+
var import_react89 = require("react");
|
|
17629
17766
|
var import_jsx_runtime69 = require("react/jsx-runtime");
|
|
17630
17767
|
var defaultFormat6 = (n) => {
|
|
17631
17768
|
if (Math.abs(n) >= 1e6) return `${(n / 1e6).toFixed(1)}M`;
|
|
@@ -17650,7 +17787,7 @@ function buildSmoothPath(pts) {
|
|
|
17650
17787
|
function buildLinePath(pts) {
|
|
17651
17788
|
return `M${pts[0][0]},${pts[0][1]}` + pts.slice(1).map(([x, y]) => ` L${x},${y}`).join("");
|
|
17652
17789
|
}
|
|
17653
|
-
var Sparkline = (0,
|
|
17790
|
+
var Sparkline = (0, import_react89.forwardRef)(
|
|
17654
17791
|
function Sparkline2({
|
|
17655
17792
|
data,
|
|
17656
17793
|
variant = "line",
|
|
@@ -17673,11 +17810,11 @@ var Sparkline = (0, import_react88.forwardRef)(
|
|
|
17673
17810
|
emptyState,
|
|
17674
17811
|
...rest
|
|
17675
17812
|
}, ref) {
|
|
17676
|
-
const reactId = (0,
|
|
17813
|
+
const reactId = (0, import_react89.useId)();
|
|
17677
17814
|
const PAD2 = 1;
|
|
17678
17815
|
const hasData = data.length > 0;
|
|
17679
17816
|
const canDrawLine = variant === "line" ? data.length >= 2 : hasData;
|
|
17680
|
-
const resolvedAriaLabel = (0,
|
|
17817
|
+
const resolvedAriaLabel = (0, import_react89.useMemo)(() => {
|
|
17681
17818
|
if (ariaLabel) return ariaLabel;
|
|
17682
17819
|
if (!hasData) return "Sparkline \u2014 no data";
|
|
17683
17820
|
const first = formatValue(data[0]);
|
|
@@ -17974,7 +18111,7 @@ function resolveDeltaTone(trend, direction) {
|
|
|
17974
18111
|
}
|
|
17975
18112
|
return trend === "up" ? "failed" : "success";
|
|
17976
18113
|
}
|
|
17977
|
-
var MetricCard = (0,
|
|
18114
|
+
var MetricCard = (0, import_react90.forwardRef)(
|
|
17978
18115
|
function MetricCard2({
|
|
17979
18116
|
label,
|
|
17980
18117
|
labelAs = "h3",
|
|
@@ -17997,7 +18134,7 @@ var MetricCard = (0, import_react89.forwardRef)(
|
|
|
17997
18134
|
className,
|
|
17998
18135
|
...rest
|
|
17999
18136
|
}, ref) {
|
|
18000
|
-
const reactId = (0,
|
|
18137
|
+
const reactId = (0, import_react90.useId)();
|
|
18001
18138
|
const baseId = providedId ?? `ods-metric-card-${reactId}`;
|
|
18002
18139
|
const labelId = `${baseId}-label`;
|
|
18003
18140
|
const valueId = `${baseId}-value`;
|
|
@@ -18158,7 +18295,7 @@ MetricCard.displayName = "MetricCard";
|
|
|
18158
18295
|
|
|
18159
18296
|
// src/components/MultiSelect/MultiSelect.tsx
|
|
18160
18297
|
var import_framer_motion27 = require("framer-motion");
|
|
18161
|
-
var
|
|
18298
|
+
var import_react91 = require("react");
|
|
18162
18299
|
var import_react_dom10 = require("react-dom");
|
|
18163
18300
|
var import_icons24 = require("@octaviaflow/icons");
|
|
18164
18301
|
var import_jsx_runtime71 = require("react/jsx-runtime");
|
|
@@ -18172,7 +18309,7 @@ function OverflowTooltip2({
|
|
|
18172
18309
|
if (!enabled || content == null || content === "") return children;
|
|
18173
18310
|
return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(Tooltip, { content, children });
|
|
18174
18311
|
}
|
|
18175
|
-
var MultiSelect = (0,
|
|
18312
|
+
var MultiSelect = (0, import_react91.forwardRef)(
|
|
18176
18313
|
function MultiSelect2({
|
|
18177
18314
|
options,
|
|
18178
18315
|
value: controlledValue,
|
|
@@ -18195,37 +18332,37 @@ var MultiSelect = (0, import_react90.forwardRef)(
|
|
|
18195
18332
|
className,
|
|
18196
18333
|
...rest
|
|
18197
18334
|
}, ref) {
|
|
18198
|
-
const reactId = (0,
|
|
18335
|
+
const reactId = (0, import_react91.useId)();
|
|
18199
18336
|
const baseId = providedId ?? `ods-multiselect-${reactId}`;
|
|
18200
|
-
const [internalValue, setInternalValue] = (0,
|
|
18337
|
+
const [internalValue, setInternalValue] = (0, import_react91.useState)(
|
|
18201
18338
|
defaultValue ?? []
|
|
18202
18339
|
);
|
|
18203
18340
|
const selectedValues = controlledValue ?? internalValue;
|
|
18204
|
-
const [open, setOpen] = (0,
|
|
18205
|
-
const [query, setQuery] = (0,
|
|
18206
|
-
const [activeIdx, setActiveIdx] = (0,
|
|
18207
|
-
const [dropdownPos, setDropdownPos] = (0,
|
|
18341
|
+
const [open, setOpen] = (0, import_react91.useState)(false);
|
|
18342
|
+
const [query, setQuery] = (0, import_react91.useState)("");
|
|
18343
|
+
const [activeIdx, setActiveIdx] = (0, import_react91.useState)(0);
|
|
18344
|
+
const [dropdownPos, setDropdownPos] = (0, import_react91.useState)({
|
|
18208
18345
|
top: 0,
|
|
18209
18346
|
left: 0,
|
|
18210
18347
|
width: 0
|
|
18211
18348
|
});
|
|
18212
|
-
const wrapRef = (0,
|
|
18213
|
-
const tagsRowRef = (0,
|
|
18214
|
-
const searchRef = (0,
|
|
18215
|
-
const dropdownRef = (0,
|
|
18216
|
-
const chipRefs = (0,
|
|
18217
|
-
const commit = (0,
|
|
18349
|
+
const wrapRef = (0, import_react91.useRef)(null);
|
|
18350
|
+
const tagsRowRef = (0, import_react91.useRef)(null);
|
|
18351
|
+
const searchRef = (0, import_react91.useRef)(null);
|
|
18352
|
+
const dropdownRef = (0, import_react91.useRef)(null);
|
|
18353
|
+
const chipRefs = (0, import_react91.useRef)([]);
|
|
18354
|
+
const commit = (0, import_react91.useCallback)(
|
|
18218
18355
|
(next) => {
|
|
18219
18356
|
if (controlledValue === void 0) setInternalValue(next);
|
|
18220
18357
|
onChange?.(next);
|
|
18221
18358
|
},
|
|
18222
18359
|
[controlledValue, onChange]
|
|
18223
18360
|
);
|
|
18224
|
-
const selectedSet = (0,
|
|
18361
|
+
const selectedSet = (0, import_react91.useMemo)(
|
|
18225
18362
|
() => new Set(selectedValues),
|
|
18226
18363
|
[selectedValues]
|
|
18227
18364
|
);
|
|
18228
|
-
const filteredOptions = (0,
|
|
18365
|
+
const filteredOptions = (0, import_react91.useMemo)(() => {
|
|
18229
18366
|
const base = hideSelected ? options.filter((o) => !selectedSet.has(o.value)) : options;
|
|
18230
18367
|
if (!query.trim()) return base;
|
|
18231
18368
|
const q2 = query.trim().toLowerCase();
|
|
@@ -18236,7 +18373,7 @@ var MultiSelect = (0, import_react90.forwardRef)(
|
|
|
18236
18373
|
const showSearch = searchable ?? options.length > 6;
|
|
18237
18374
|
const getLabel = (v) => options.find((o) => o.value === v)?.label ?? v;
|
|
18238
18375
|
const getIcon = (v) => options.find((o) => o.value === v)?.icon;
|
|
18239
|
-
const updatePosition = (0,
|
|
18376
|
+
const updatePosition = (0, import_react91.useCallback)(() => {
|
|
18240
18377
|
if (!wrapRef.current) return;
|
|
18241
18378
|
const rect = wrapRef.current.getBoundingClientRect();
|
|
18242
18379
|
setDropdownPos({
|
|
@@ -18245,7 +18382,7 @@ var MultiSelect = (0, import_react90.forwardRef)(
|
|
|
18245
18382
|
width: rect.width
|
|
18246
18383
|
});
|
|
18247
18384
|
}, []);
|
|
18248
|
-
(0,
|
|
18385
|
+
(0, import_react91.useEffect)(() => {
|
|
18249
18386
|
if (!open) return;
|
|
18250
18387
|
updatePosition();
|
|
18251
18388
|
window.addEventListener("scroll", updatePosition, true);
|
|
@@ -18255,7 +18392,7 @@ var MultiSelect = (0, import_react90.forwardRef)(
|
|
|
18255
18392
|
window.removeEventListener("resize", updatePosition);
|
|
18256
18393
|
};
|
|
18257
18394
|
}, [open, updatePosition]);
|
|
18258
|
-
(0,
|
|
18395
|
+
(0, import_react91.useEffect)(() => {
|
|
18259
18396
|
if (!open) return;
|
|
18260
18397
|
const onDoc = (e) => {
|
|
18261
18398
|
const t = e.target;
|
|
@@ -18267,15 +18404,15 @@ var MultiSelect = (0, import_react90.forwardRef)(
|
|
|
18267
18404
|
document.addEventListener("mousedown", onDoc);
|
|
18268
18405
|
return () => document.removeEventListener("mousedown", onDoc);
|
|
18269
18406
|
}, [open]);
|
|
18270
|
-
(0,
|
|
18407
|
+
(0, import_react91.useEffect)(() => {
|
|
18271
18408
|
if (open && showSearch) {
|
|
18272
18409
|
requestAnimationFrame(() => searchRef.current?.focus());
|
|
18273
18410
|
}
|
|
18274
18411
|
}, [open, showSearch]);
|
|
18275
|
-
(0,
|
|
18276
|
-
const [fitCount, setFitCount] = (0,
|
|
18277
|
-
const [tick, setTick] = (0,
|
|
18278
|
-
(0,
|
|
18412
|
+
(0, import_react91.useEffect)(() => setActiveIdx(0), [query, open]);
|
|
18413
|
+
const [fitCount, setFitCount] = (0, import_react91.useState)(selectedValues.length);
|
|
18414
|
+
const [tick, setTick] = (0, import_react91.useState)(0);
|
|
18415
|
+
(0, import_react91.useLayoutEffect)(() => {
|
|
18279
18416
|
if (maxVisibleTags !== void 0) {
|
|
18280
18417
|
setFitCount(Math.min(selectedValues.length, maxVisibleTags));
|
|
18281
18418
|
return;
|
|
@@ -18302,7 +18439,7 @@ var MultiSelect = (0, import_react90.forwardRef)(
|
|
|
18302
18439
|
count = Math.max(1, count - 1);
|
|
18303
18440
|
setFitCount(count);
|
|
18304
18441
|
}, [tick, selectedValues, maxVisibleTags]);
|
|
18305
|
-
(0,
|
|
18442
|
+
(0, import_react91.useEffect)(() => {
|
|
18306
18443
|
if (typeof ResizeObserver === "undefined") return;
|
|
18307
18444
|
const row = tagsRowRef.current;
|
|
18308
18445
|
if (!row) return;
|
|
@@ -18310,7 +18447,7 @@ var MultiSelect = (0, import_react90.forwardRef)(
|
|
|
18310
18447
|
ro.observe(row);
|
|
18311
18448
|
return () => ro.disconnect();
|
|
18312
18449
|
}, []);
|
|
18313
|
-
const addValue = (0,
|
|
18450
|
+
const addValue = (0, import_react91.useCallback)(
|
|
18314
18451
|
(val) => {
|
|
18315
18452
|
if (maxTags && selectedValues.length >= maxTags) return;
|
|
18316
18453
|
commit([...selectedValues, val]);
|
|
@@ -18320,13 +18457,13 @@ var MultiSelect = (0, import_react90.forwardRef)(
|
|
|
18320
18457
|
},
|
|
18321
18458
|
[selectedValues, maxTags, commit]
|
|
18322
18459
|
);
|
|
18323
|
-
const removeValue = (0,
|
|
18460
|
+
const removeValue = (0, import_react91.useCallback)(
|
|
18324
18461
|
(val) => {
|
|
18325
18462
|
commit(selectedValues.filter((v) => v !== val));
|
|
18326
18463
|
},
|
|
18327
18464
|
[selectedValues, commit]
|
|
18328
18465
|
);
|
|
18329
|
-
const toggleValue = (0,
|
|
18466
|
+
const toggleValue = (0, import_react91.useCallback)(
|
|
18330
18467
|
(val) => {
|
|
18331
18468
|
if (selectedSet.has(val)) {
|
|
18332
18469
|
removeValue(val);
|
|
@@ -18336,11 +18473,11 @@ var MultiSelect = (0, import_react90.forwardRef)(
|
|
|
18336
18473
|
},
|
|
18337
18474
|
[selectedSet, addValue, removeValue]
|
|
18338
18475
|
);
|
|
18339
|
-
const clearAll = (0,
|
|
18476
|
+
const clearAll = (0, import_react91.useCallback)(() => {
|
|
18340
18477
|
commit([]);
|
|
18341
18478
|
setQuery("");
|
|
18342
18479
|
}, [commit]);
|
|
18343
|
-
const handleSearchKey = (0,
|
|
18480
|
+
const handleSearchKey = (0, import_react91.useCallback)(
|
|
18344
18481
|
(e) => {
|
|
18345
18482
|
if (e.key === "Escape") {
|
|
18346
18483
|
setOpen(false);
|
|
@@ -18423,7 +18560,10 @@ var MultiSelect = (0, import_react90.forwardRef)(
|
|
|
18423
18560
|
"aria-label": labelId ? void 0 : ariaLabel ?? placeholder,
|
|
18424
18561
|
"aria-disabled": disabled,
|
|
18425
18562
|
tabIndex: disabled ? -1 : 0,
|
|
18426
|
-
onClick: () =>
|
|
18563
|
+
onClick: () => {
|
|
18564
|
+
if (disabled) return;
|
|
18565
|
+
setOpen((prev) => !prev);
|
|
18566
|
+
},
|
|
18427
18567
|
onKeyDown: (e) => {
|
|
18428
18568
|
if (disabled) return;
|
|
18429
18569
|
if (!open && (e.key === "Enter" || e.key === " " || e.key === "ArrowDown")) {
|
|
@@ -18623,10 +18763,10 @@ var MultiSelect = (0, import_react90.forwardRef)(
|
|
|
18623
18763
|
MultiSelect.displayName = "MultiSelect";
|
|
18624
18764
|
|
|
18625
18765
|
// src/components/NumberInput/NumberInput.tsx
|
|
18626
|
-
var
|
|
18766
|
+
var import_react92 = require("react");
|
|
18627
18767
|
var import_icons25 = require("@octaviaflow/icons");
|
|
18628
18768
|
var import_jsx_runtime72 = require("react/jsx-runtime");
|
|
18629
|
-
var NumberInput = (0,
|
|
18769
|
+
var NumberInput = (0, import_react92.forwardRef)(
|
|
18630
18770
|
function NumberInput2({
|
|
18631
18771
|
label,
|
|
18632
18772
|
value,
|
|
@@ -18648,11 +18788,11 @@ var NumberInput = (0, import_react91.forwardRef)(
|
|
|
18648
18788
|
"aria-describedby": consumerDescribedBy,
|
|
18649
18789
|
...rest
|
|
18650
18790
|
}, ref) {
|
|
18651
|
-
const reactId = (0,
|
|
18791
|
+
const reactId = (0, import_react92.useId)();
|
|
18652
18792
|
const inputId = providedId ?? `ods-num-${reactId}`;
|
|
18653
18793
|
const labelId = label ? `${inputId}-label` : void 0;
|
|
18654
18794
|
const hintId = error || helperText ? `${inputId}-hint` : void 0;
|
|
18655
|
-
const clamp = (0,
|
|
18795
|
+
const clamp = (0, import_react92.useCallback)(
|
|
18656
18796
|
(v) => {
|
|
18657
18797
|
if (typeof min === "number") v = Math.max(min, v);
|
|
18658
18798
|
if (typeof max === "number") v = Math.min(max, v);
|
|
@@ -18754,9 +18894,9 @@ var NumberInput = (0, import_react91.forwardRef)(
|
|
|
18754
18894
|
NumberInput.displayName = "NumberInput";
|
|
18755
18895
|
|
|
18756
18896
|
// src/components/OTPInput/OTPInput.tsx
|
|
18757
|
-
var
|
|
18897
|
+
var import_react93 = require("react");
|
|
18758
18898
|
var import_jsx_runtime73 = require("react/jsx-runtime");
|
|
18759
|
-
var OTPInput = (0,
|
|
18899
|
+
var OTPInput = (0, import_react93.forwardRef)(
|
|
18760
18900
|
function OTPInput2({
|
|
18761
18901
|
label,
|
|
18762
18902
|
length = 6,
|
|
@@ -18774,16 +18914,16 @@ var OTPInput = (0, import_react92.forwardRef)(
|
|
|
18774
18914
|
"aria-label": ariaLabel,
|
|
18775
18915
|
...rest
|
|
18776
18916
|
}, ref) {
|
|
18777
|
-
const reactId = (0,
|
|
18917
|
+
const reactId = (0, import_react93.useId)();
|
|
18778
18918
|
const baseId = providedId ?? `ods-otp-${reactId}`;
|
|
18779
18919
|
const labelId = label ? `${baseId}-label` : void 0;
|
|
18780
18920
|
const hintId = error ? `${baseId}-hint` : void 0;
|
|
18781
|
-
const refs = (0,
|
|
18921
|
+
const refs = (0, import_react93.useRef)([]);
|
|
18782
18922
|
const resolvedMode = mode ?? (type === "alphanumeric" ? "alphanumeric" : mask ? "pin" : "otp");
|
|
18783
18923
|
const isNumeric = resolvedMode !== "alphanumeric";
|
|
18784
18924
|
const isMasked = mask ?? resolvedMode === "pin";
|
|
18785
18925
|
const pattern = isNumeric ? /[^0-9]/g : /[^a-zA-Z0-9]/g;
|
|
18786
|
-
(0,
|
|
18926
|
+
(0, import_react93.useImperativeHandle)(
|
|
18787
18927
|
ref,
|
|
18788
18928
|
() => ({
|
|
18789
18929
|
focus: () => {
|
|
@@ -18797,7 +18937,7 @@ var OTPInput = (0, import_react92.forwardRef)(
|
|
|
18797
18937
|
}),
|
|
18798
18938
|
[value, length, onChange]
|
|
18799
18939
|
);
|
|
18800
|
-
const setCharAt = (0,
|
|
18940
|
+
const setCharAt = (0, import_react93.useCallback)(
|
|
18801
18941
|
(idx, ch) => {
|
|
18802
18942
|
const cleaned = ch.replace(pattern, "").slice(0, 1);
|
|
18803
18943
|
const chars = value.split("");
|
|
@@ -18920,7 +19060,7 @@ function PageHeader({
|
|
|
18920
19060
|
|
|
18921
19061
|
// src/components/Pagination/Pagination.tsx
|
|
18922
19062
|
var import_icons26 = require("@octaviaflow/icons");
|
|
18923
|
-
var
|
|
19063
|
+
var import_react94 = require("react");
|
|
18924
19064
|
var import_jsx_runtime75 = require("react/jsx-runtime");
|
|
18925
19065
|
function buildPageRange(totalPages, current, siblingCount, boundaryCount) {
|
|
18926
19066
|
const totalShown = boundaryCount * 2 + siblingCount * 2 + 3;
|
|
@@ -18966,7 +19106,7 @@ function buildPageRange(totalPages, current, siblingCount, boundaryCount) {
|
|
|
18966
19106
|
) === i
|
|
18967
19107
|
);
|
|
18968
19108
|
}
|
|
18969
|
-
var Pagination = (0,
|
|
19109
|
+
var Pagination = (0, import_react94.forwardRef)(
|
|
18970
19110
|
function Pagination2({
|
|
18971
19111
|
totalItems,
|
|
18972
19112
|
pageSize,
|
|
@@ -18989,13 +19129,13 @@ var Pagination = (0, import_react93.forwardRef)(
|
|
|
18989
19129
|
className,
|
|
18990
19130
|
...rest
|
|
18991
19131
|
}, ref) {
|
|
18992
|
-
const reactId = (0,
|
|
19132
|
+
const reactId = (0, import_react94.useId)();
|
|
18993
19133
|
const baseId = providedId ?? `ods-pagination-${reactId}`;
|
|
18994
19134
|
const totalPages = Math.max(
|
|
18995
19135
|
1,
|
|
18996
19136
|
Math.ceil(Math.max(0, totalItems) / Math.max(1, pageSize))
|
|
18997
19137
|
);
|
|
18998
|
-
const [internalPage, setInternalPage] = (0,
|
|
19138
|
+
const [internalPage, setInternalPage] = (0, import_react94.useState)(
|
|
18999
19139
|
Math.min(Math.max(1, defaultPage), totalPages)
|
|
19000
19140
|
);
|
|
19001
19141
|
const isControlled = controlledPage !== void 0;
|
|
@@ -19003,7 +19143,7 @@ var Pagination = (0, import_react93.forwardRef)(
|
|
|
19003
19143
|
totalPages,
|
|
19004
19144
|
Math.max(1, isControlled ? controlledPage : internalPage)
|
|
19005
19145
|
);
|
|
19006
|
-
const goTo = (0,
|
|
19146
|
+
const goTo = (0, import_react94.useCallback)(
|
|
19007
19147
|
(next) => {
|
|
19008
19148
|
const clamped = Math.min(totalPages, Math.max(1, next));
|
|
19009
19149
|
if (clamped === currentPage) return;
|
|
@@ -19012,14 +19152,14 @@ var Pagination = (0, import_react93.forwardRef)(
|
|
|
19012
19152
|
},
|
|
19013
19153
|
[currentPage, isControlled, onPageChange, totalPages]
|
|
19014
19154
|
);
|
|
19015
|
-
const pages = (0,
|
|
19155
|
+
const pages = (0, import_react94.useMemo)(
|
|
19016
19156
|
() => buildPageRange(totalPages, currentPage, siblingCount, boundaryCount),
|
|
19017
19157
|
[totalPages, currentPage, siblingCount, boundaryCount]
|
|
19018
19158
|
);
|
|
19019
19159
|
const from = totalItems === 0 ? 0 : (currentPage - 1) * pageSize + 1;
|
|
19020
19160
|
const to = Math.min(totalItems, currentPage * pageSize);
|
|
19021
19161
|
const totalContent = formatTotal ? formatTotal({ from, to, total: totalItems }) : `Showing ${from.toLocaleString()}\u2013${to.toLocaleString()} of ${totalItems.toLocaleString()}`;
|
|
19022
|
-
const [jumpValue, setJumpValue] = (0,
|
|
19162
|
+
const [jumpValue, setJumpValue] = (0, import_react94.useState)("");
|
|
19023
19163
|
const commitJump = (raw) => {
|
|
19024
19164
|
const parsed = Number.parseInt(raw, 10);
|
|
19025
19165
|
if (Number.isFinite(parsed)) goTo(parsed);
|
|
@@ -19200,11 +19340,11 @@ var Pagination = (0, import_react93.forwardRef)(
|
|
|
19200
19340
|
Pagination.displayName = "Pagination";
|
|
19201
19341
|
|
|
19202
19342
|
// src/components/PasswordInput/PasswordInput.tsx
|
|
19203
|
-
var
|
|
19343
|
+
var import_react96 = require("react");
|
|
19204
19344
|
var import_icons27 = require("@octaviaflow/icons");
|
|
19205
19345
|
|
|
19206
19346
|
// src/hooks/usePasswordStrength.ts
|
|
19207
|
-
var
|
|
19347
|
+
var import_react95 = require("react");
|
|
19208
19348
|
var DEFAULT_PASSWORD_RULES = [
|
|
19209
19349
|
{ id: "length-8", label: "At least 8 characters", test: /.{8,}/ },
|
|
19210
19350
|
{ id: "lowercase", label: "A lower-case letter", test: /[a-z]/ },
|
|
@@ -19212,7 +19352,7 @@ var DEFAULT_PASSWORD_RULES = [
|
|
|
19212
19352
|
{ id: "digit", label: "A digit", test: /\d/ }
|
|
19213
19353
|
];
|
|
19214
19354
|
function usePasswordStrength(value, rules = DEFAULT_PASSWORD_RULES) {
|
|
19215
|
-
return (0,
|
|
19355
|
+
return (0, import_react95.useMemo)(() => {
|
|
19216
19356
|
const evaluated = rules.map((r) => ({
|
|
19217
19357
|
id: r.id,
|
|
19218
19358
|
label: r.label,
|
|
@@ -19250,7 +19390,7 @@ var strengthLabels = [
|
|
|
19250
19390
|
"Strong",
|
|
19251
19391
|
"Very strong"
|
|
19252
19392
|
];
|
|
19253
|
-
var PasswordInput = (0,
|
|
19393
|
+
var PasswordInput = (0, import_react96.forwardRef)(
|
|
19254
19394
|
function PasswordInput2({
|
|
19255
19395
|
label,
|
|
19256
19396
|
value,
|
|
@@ -19272,11 +19412,11 @@ var PasswordInput = (0, import_react95.forwardRef)(
|
|
|
19272
19412
|
"aria-describedby": consumerDescribedBy,
|
|
19273
19413
|
...rest
|
|
19274
19414
|
}, ref) {
|
|
19275
|
-
const reactId = (0,
|
|
19415
|
+
const reactId = (0, import_react96.useId)();
|
|
19276
19416
|
const inputId = providedId ?? `ods-pwd-${reactId}`;
|
|
19277
19417
|
const labelId = label ? `${inputId}-label` : void 0;
|
|
19278
19418
|
const hintId = error || helperText ? `${inputId}-hint` : void 0;
|
|
19279
|
-
const [shown, setShown] = (0,
|
|
19419
|
+
const [shown, setShown] = (0, import_react96.useState)(false);
|
|
19280
19420
|
const handle = (e) => onChange?.(e.target.value);
|
|
19281
19421
|
const derived = usePasswordStrength(value, strengthRules ?? []);
|
|
19282
19422
|
const ruleDriven = (strengthRules?.length ?? 0) > 0;
|
|
@@ -19416,7 +19556,7 @@ var PasswordInput = (0, import_react95.forwardRef)(
|
|
|
19416
19556
|
PasswordInput.displayName = "PasswordInput";
|
|
19417
19557
|
|
|
19418
19558
|
// src/components/PhoneInput/PhoneInput.tsx
|
|
19419
|
-
var
|
|
19559
|
+
var import_react97 = require("react");
|
|
19420
19560
|
var import_icons28 = require("@octaviaflow/icons");
|
|
19421
19561
|
var import_jsx_runtime77 = require("react/jsx-runtime");
|
|
19422
19562
|
var DEFAULT_COUNTRIES = [
|
|
@@ -19429,7 +19569,7 @@ var DEFAULT_COUNTRIES = [
|
|
|
19429
19569
|
{ code: "AU", name: "Australia", dialCode: "+61", flag: "\u{1F1E6}\u{1F1FA}" },
|
|
19430
19570
|
{ code: "BR", name: "Brazil", dialCode: "+55", flag: "\u{1F1E7}\u{1F1F7}" }
|
|
19431
19571
|
];
|
|
19432
|
-
var PhoneInput = (0,
|
|
19572
|
+
var PhoneInput = (0, import_react97.forwardRef)(
|
|
19433
19573
|
function PhoneInput2({
|
|
19434
19574
|
label,
|
|
19435
19575
|
value,
|
|
@@ -19452,20 +19592,20 @@ var PhoneInput = (0, import_react96.forwardRef)(
|
|
|
19452
19592
|
"aria-describedby": consumerDescribedBy,
|
|
19453
19593
|
...rest
|
|
19454
19594
|
}, ref) {
|
|
19455
|
-
const reactId = (0,
|
|
19595
|
+
const reactId = (0, import_react97.useId)();
|
|
19456
19596
|
const baseId = providedId ?? `ods-phone-${reactId}`;
|
|
19457
19597
|
const inputId = `${baseId}-input`;
|
|
19458
19598
|
const labelId = label ? `${baseId}-label` : void 0;
|
|
19459
19599
|
const hintId = error || helperText ? `${baseId}-hint` : void 0;
|
|
19460
19600
|
const listboxId = `${baseId}-listbox`;
|
|
19461
19601
|
const countryBtnId = `${baseId}-country`;
|
|
19462
|
-
const [open, setOpen] = (0,
|
|
19463
|
-
const [activeIdx, setActiveIdx] = (0,
|
|
19464
|
-
const [query, setQuery] = (0,
|
|
19465
|
-
const fieldRef = (0,
|
|
19466
|
-
const menuRef = (0,
|
|
19467
|
-
const listRef = (0,
|
|
19468
|
-
const searchRef = (0,
|
|
19602
|
+
const [open, setOpen] = (0, import_react97.useState)(false);
|
|
19603
|
+
const [activeIdx, setActiveIdx] = (0, import_react97.useState)(0);
|
|
19604
|
+
const [query, setQuery] = (0, import_react97.useState)("");
|
|
19605
|
+
const fieldRef = (0, import_react97.useRef)(null);
|
|
19606
|
+
const menuRef = (0, import_react97.useRef)(null);
|
|
19607
|
+
const listRef = (0, import_react97.useRef)(null);
|
|
19608
|
+
const searchRef = (0, import_react97.useRef)(null);
|
|
19469
19609
|
const country = countries.find((c) => c.code === countryCode) ?? countries[0];
|
|
19470
19610
|
const showSearch = searchable ?? countries.length > 8;
|
|
19471
19611
|
const filteredCountries = (() => {
|
|
@@ -19475,7 +19615,7 @@ var PhoneInput = (0, import_react96.forwardRef)(
|
|
|
19475
19615
|
(c) => c.name.toLowerCase().includes(q2) || c.dialCode.includes(q2) || c.code.toLowerCase().includes(q2)
|
|
19476
19616
|
);
|
|
19477
19617
|
})();
|
|
19478
|
-
(0,
|
|
19618
|
+
(0, import_react97.useEffect)(() => {
|
|
19479
19619
|
if (!open) return;
|
|
19480
19620
|
const onDocMouseDown = (e) => {
|
|
19481
19621
|
const t = e.target;
|
|
@@ -19493,7 +19633,7 @@ var PhoneInput = (0, import_react96.forwardRef)(
|
|
|
19493
19633
|
document.removeEventListener("keydown", onDocKey);
|
|
19494
19634
|
};
|
|
19495
19635
|
}, [open]);
|
|
19496
|
-
(0,
|
|
19636
|
+
(0, import_react97.useEffect)(() => {
|
|
19497
19637
|
if (!open) {
|
|
19498
19638
|
setQuery("");
|
|
19499
19639
|
return;
|
|
@@ -19501,10 +19641,10 @@ var PhoneInput = (0, import_react96.forwardRef)(
|
|
|
19501
19641
|
const idx = countries.findIndex((c) => c.code === country.code);
|
|
19502
19642
|
setActiveIdx(idx === -1 ? 0 : idx);
|
|
19503
19643
|
}, [open, countries, country.code]);
|
|
19504
|
-
(0,
|
|
19644
|
+
(0, import_react97.useEffect)(() => {
|
|
19505
19645
|
setActiveIdx(0);
|
|
19506
19646
|
}, [query]);
|
|
19507
|
-
const handleTriggerKey = (0,
|
|
19647
|
+
const handleTriggerKey = (0, import_react97.useCallback)(
|
|
19508
19648
|
(e) => {
|
|
19509
19649
|
if (disabled) return;
|
|
19510
19650
|
if (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") {
|
|
@@ -19514,7 +19654,7 @@ var PhoneInput = (0, import_react96.forwardRef)(
|
|
|
19514
19654
|
},
|
|
19515
19655
|
[disabled]
|
|
19516
19656
|
);
|
|
19517
|
-
const handleNavKey = (0,
|
|
19657
|
+
const handleNavKey = (0, import_react97.useCallback)(
|
|
19518
19658
|
(e) => {
|
|
19519
19659
|
if (e.key === "ArrowDown") {
|
|
19520
19660
|
e.preventDefault();
|
|
@@ -19541,7 +19681,7 @@ var PhoneInput = (0, import_react96.forwardRef)(
|
|
|
19541
19681
|
},
|
|
19542
19682
|
[filteredCountries, activeIdx, onCountryChange]
|
|
19543
19683
|
);
|
|
19544
|
-
(0,
|
|
19684
|
+
(0, import_react97.useEffect)(() => {
|
|
19545
19685
|
if (!open) return;
|
|
19546
19686
|
if (showSearch) searchRef.current?.focus();
|
|
19547
19687
|
else listRef.current?.focus();
|
|
@@ -20009,7 +20149,7 @@ function getAllCountries(locale = "en") {
|
|
|
20009
20149
|
// src/components/PipelineCard/PipelineCard.tsx
|
|
20010
20150
|
var import_icons29 = require("@octaviaflow/icons");
|
|
20011
20151
|
var import_framer_motion28 = require("framer-motion");
|
|
20012
|
-
var
|
|
20152
|
+
var import_react98 = require("react");
|
|
20013
20153
|
var import_jsx_runtime78 = require("react/jsx-runtime");
|
|
20014
20154
|
var STATUS_LABEL5 = {
|
|
20015
20155
|
queued: "Queued",
|
|
@@ -20156,7 +20296,7 @@ function StatusRing({
|
|
|
20156
20296
|
}
|
|
20157
20297
|
);
|
|
20158
20298
|
}
|
|
20159
|
-
var PipelineCard = (0,
|
|
20299
|
+
var PipelineCard = (0, import_react98.forwardRef)(
|
|
20160
20300
|
function PipelineCard2({
|
|
20161
20301
|
name,
|
|
20162
20302
|
nameAs = "h3",
|
|
@@ -20186,7 +20326,7 @@ var PipelineCard = (0, import_react97.forwardRef)(
|
|
|
20186
20326
|
...rest
|
|
20187
20327
|
}, ref) {
|
|
20188
20328
|
const reducedMotion = (0, import_framer_motion28.useReducedMotion)() ?? false;
|
|
20189
|
-
const reactId = (0,
|
|
20329
|
+
const reactId = (0, import_react98.useId)();
|
|
20190
20330
|
const baseId = providedId ?? `ods-pipeline-card-${reactId}`;
|
|
20191
20331
|
const nameId = `${baseId}-name`;
|
|
20192
20332
|
const isInteractive = Boolean(href || onClick) && !disabled && !loading;
|
|
@@ -20398,7 +20538,7 @@ var PipelineCard = (0, import_react97.forwardRef)(
|
|
|
20398
20538
|
PipelineCard.displayName = "PipelineCard";
|
|
20399
20539
|
|
|
20400
20540
|
// src/components/Popover/Popover.tsx
|
|
20401
|
-
var
|
|
20541
|
+
var import_react99 = require("react");
|
|
20402
20542
|
var import_react_dom11 = require("react-dom");
|
|
20403
20543
|
var import_jsx_runtime79 = require("react/jsx-runtime");
|
|
20404
20544
|
function computePosition4(rect, popRect, placement, offset) {
|
|
@@ -20430,31 +20570,31 @@ function Popover({
|
|
|
20430
20570
|
children,
|
|
20431
20571
|
className
|
|
20432
20572
|
}) {
|
|
20433
|
-
const [openState, setOpenState] = (0,
|
|
20573
|
+
const [openState, setOpenState] = (0, import_react99.useState)(defaultOpen);
|
|
20434
20574
|
const open = openProp ?? openState;
|
|
20435
|
-
const setOpen = (0,
|
|
20575
|
+
const setOpen = (0, import_react99.useCallback)(
|
|
20436
20576
|
(v) => {
|
|
20437
20577
|
if (openProp === void 0) setOpenState(v);
|
|
20438
20578
|
onOpenChange?.(v);
|
|
20439
20579
|
},
|
|
20440
20580
|
[openProp, onOpenChange]
|
|
20441
20581
|
);
|
|
20442
|
-
const triggerRef = (0,
|
|
20443
|
-
const popRef = (0,
|
|
20444
|
-
const [coords, setCoords] = (0,
|
|
20445
|
-
const reposition = (0,
|
|
20582
|
+
const triggerRef = (0, import_react99.useRef)(null);
|
|
20583
|
+
const popRef = (0, import_react99.useRef)(null);
|
|
20584
|
+
const [coords, setCoords] = (0, import_react99.useState)(null);
|
|
20585
|
+
const reposition = (0, import_react99.useCallback)(() => {
|
|
20446
20586
|
if (!triggerRef.current || !popRef.current) return;
|
|
20447
20587
|
const trigRect = triggerRef.current.getBoundingClientRect();
|
|
20448
20588
|
const popRect = popRef.current.getBoundingClientRect();
|
|
20449
20589
|
setCoords(computePosition4(trigRect, popRect, placement, offset));
|
|
20450
20590
|
}, [placement, offset]);
|
|
20451
|
-
(0,
|
|
20591
|
+
(0, import_react99.useLayoutEffect)(() => {
|
|
20452
20592
|
if (!open) return;
|
|
20453
20593
|
reposition();
|
|
20454
20594
|
const id = requestAnimationFrame(reposition);
|
|
20455
20595
|
return () => cancelAnimationFrame(id);
|
|
20456
20596
|
}, [open, reposition, content]);
|
|
20457
|
-
(0,
|
|
20597
|
+
(0, import_react99.useEffect)(() => {
|
|
20458
20598
|
if (!open) return;
|
|
20459
20599
|
const onScroll = () => reposition();
|
|
20460
20600
|
window.addEventListener("scroll", onScroll, true);
|
|
@@ -20464,7 +20604,7 @@ function Popover({
|
|
|
20464
20604
|
window.removeEventListener("resize", onScroll);
|
|
20465
20605
|
};
|
|
20466
20606
|
}, [open, reposition]);
|
|
20467
|
-
(0,
|
|
20607
|
+
(0, import_react99.useEffect)(() => {
|
|
20468
20608
|
if (!open || !closeOnClickOutside) return;
|
|
20469
20609
|
const onDoc = (e) => {
|
|
20470
20610
|
const t = e.target;
|
|
@@ -20475,7 +20615,7 @@ function Popover({
|
|
|
20475
20615
|
document.addEventListener("mousedown", onDoc);
|
|
20476
20616
|
return () => document.removeEventListener("mousedown", onDoc);
|
|
20477
20617
|
}, [open, closeOnClickOutside, setOpen]);
|
|
20478
|
-
(0,
|
|
20618
|
+
(0, import_react99.useEffect)(() => {
|
|
20479
20619
|
if (!open || !closeOnEsc) return;
|
|
20480
20620
|
const onKey = (e) => {
|
|
20481
20621
|
if (e.key === "Escape") setOpen(false);
|
|
@@ -20528,12 +20668,12 @@ function Popover({
|
|
|
20528
20668
|
|
|
20529
20669
|
// src/components/PricingCard/PricingCard.tsx
|
|
20530
20670
|
var import_icons30 = require("@octaviaflow/icons");
|
|
20531
|
-
var
|
|
20671
|
+
var import_react100 = require("react");
|
|
20532
20672
|
var import_jsx_runtime80 = require("react/jsx-runtime");
|
|
20533
20673
|
function isStructuredFeature(f) {
|
|
20534
20674
|
return typeof f === "object" && f !== null && "text" in f;
|
|
20535
20675
|
}
|
|
20536
|
-
var PricingCard = (0,
|
|
20676
|
+
var PricingCard = (0, import_react100.forwardRef)(
|
|
20537
20677
|
function PricingCard2({
|
|
20538
20678
|
name,
|
|
20539
20679
|
nameAs = "h3",
|
|
@@ -20549,7 +20689,7 @@ var PricingCard = (0, import_react99.forwardRef)(
|
|
|
20549
20689
|
className,
|
|
20550
20690
|
...rest
|
|
20551
20691
|
}, ref) {
|
|
20552
|
-
const reactId = (0,
|
|
20692
|
+
const reactId = (0, import_react100.useId)();
|
|
20553
20693
|
const baseId = providedId ?? `ods-pricing-card-${reactId}`;
|
|
20554
20694
|
const nameId = `${baseId}-name`;
|
|
20555
20695
|
const descId = description ? `${baseId}-desc` : void 0;
|
|
@@ -20635,7 +20775,7 @@ PricingCard.displayName = "PricingCard";
|
|
|
20635
20775
|
|
|
20636
20776
|
// src/components/ProductCard/ProductCard.tsx
|
|
20637
20777
|
var import_icons31 = require("@octaviaflow/icons");
|
|
20638
|
-
var
|
|
20778
|
+
var import_react101 = require("react");
|
|
20639
20779
|
var import_jsx_runtime81 = require("react/jsx-runtime");
|
|
20640
20780
|
function Stars({ value, max = 5, count }) {
|
|
20641
20781
|
return /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(
|
|
@@ -20658,7 +20798,7 @@ function Stars({ value, max = 5, count }) {
|
|
|
20658
20798
|
}
|
|
20659
20799
|
);
|
|
20660
20800
|
}
|
|
20661
|
-
var ProductCard = (0,
|
|
20801
|
+
var ProductCard = (0, import_react101.forwardRef)(
|
|
20662
20802
|
function ProductCard2({
|
|
20663
20803
|
image,
|
|
20664
20804
|
imageAspect = "4/3",
|
|
@@ -20679,7 +20819,7 @@ var ProductCard = (0, import_react100.forwardRef)(
|
|
|
20679
20819
|
className,
|
|
20680
20820
|
...rest
|
|
20681
20821
|
}, ref) {
|
|
20682
|
-
const reactId = (0,
|
|
20822
|
+
const reactId = (0, import_react101.useId)();
|
|
20683
20823
|
const baseId = providedId ?? `ods-product-card-${reactId}`;
|
|
20684
20824
|
const nameId = `${baseId}-name`;
|
|
20685
20825
|
const descId = description ? `${baseId}-desc` : void 0;
|
|
@@ -20777,9 +20917,9 @@ var ProductCard = (0, import_react100.forwardRef)(
|
|
|
20777
20917
|
ProductCard.displayName = "ProductCard";
|
|
20778
20918
|
|
|
20779
20919
|
// src/components/ProgressBar/ProgressBar.tsx
|
|
20780
|
-
var
|
|
20920
|
+
var import_react102 = require("react");
|
|
20781
20921
|
var import_jsx_runtime82 = require("react/jsx-runtime");
|
|
20782
|
-
var ProgressBar = (0,
|
|
20922
|
+
var ProgressBar = (0, import_react102.forwardRef)(
|
|
20783
20923
|
function ProgressBar2({
|
|
20784
20924
|
value,
|
|
20785
20925
|
min = 0,
|
|
@@ -20795,7 +20935,7 @@ var ProgressBar = (0, import_react101.forwardRef)(
|
|
|
20795
20935
|
"aria-label": ariaLabel,
|
|
20796
20936
|
...rest
|
|
20797
20937
|
}, ref) {
|
|
20798
|
-
const reactId = (0,
|
|
20938
|
+
const reactId = (0, import_react102.useId)();
|
|
20799
20939
|
const baseId = providedId ?? `ods-progress-${reactId}`;
|
|
20800
20940
|
const labelId = label ? `${baseId}-label` : void 0;
|
|
20801
20941
|
const clamped = value === void 0 ? 0 : Math.min(max, Math.max(min, value));
|
|
@@ -20861,9 +21001,9 @@ var ProgressBar = (0, import_react101.forwardRef)(
|
|
|
20861
21001
|
ProgressBar.displayName = "ProgressBar";
|
|
20862
21002
|
|
|
20863
21003
|
// src/components/ProgressRing/ProgressRing.tsx
|
|
20864
|
-
var
|
|
21004
|
+
var import_react103 = require("react");
|
|
20865
21005
|
var import_jsx_runtime83 = require("react/jsx-runtime");
|
|
20866
|
-
var ProgressRing = (0,
|
|
21006
|
+
var ProgressRing = (0, import_react103.forwardRef)(
|
|
20867
21007
|
function ProgressRing2({
|
|
20868
21008
|
value,
|
|
20869
21009
|
max = 100,
|
|
@@ -20948,10 +21088,10 @@ var ProgressRing = (0, import_react102.forwardRef)(
|
|
|
20948
21088
|
ProgressRing.displayName = "ProgressRing";
|
|
20949
21089
|
|
|
20950
21090
|
// src/components/PromptInput/PromptInput.tsx
|
|
20951
|
-
var
|
|
21091
|
+
var import_react104 = require("react");
|
|
20952
21092
|
var import_icons32 = require("@octaviaflow/icons");
|
|
20953
21093
|
var import_jsx_runtime84 = require("react/jsx-runtime");
|
|
20954
|
-
var PromptInput = (0,
|
|
21094
|
+
var PromptInput = (0, import_react104.forwardRef)(
|
|
20955
21095
|
function PromptInput2({
|
|
20956
21096
|
value,
|
|
20957
21097
|
defaultValue = "",
|
|
@@ -20986,28 +21126,28 @@ var PromptInput = (0, import_react103.forwardRef)(
|
|
|
20986
21126
|
"aria-labelledby": ariaLabelledBy,
|
|
20987
21127
|
...rest
|
|
20988
21128
|
}, ref) {
|
|
20989
|
-
const reactId = (0,
|
|
21129
|
+
const reactId = (0, import_react104.useId)();
|
|
20990
21130
|
const baseId = providedId ?? `ods-prompt-${reactId}`;
|
|
20991
21131
|
const textareaId = `${baseId}-textarea`;
|
|
20992
21132
|
const labelId = label ? `${baseId}-label` : void 0;
|
|
20993
21133
|
const suggestionsId = `${baseId}-suggestions`;
|
|
20994
21134
|
const counterId = `${baseId}-counter`;
|
|
20995
|
-
const taRef = (0,
|
|
20996
|
-
const [internal, setInternal] = (0,
|
|
21135
|
+
const taRef = (0, import_react104.useRef)(null);
|
|
21136
|
+
const [internal, setInternal] = (0, import_react104.useState)(defaultValue);
|
|
20997
21137
|
const v = value ?? internal;
|
|
20998
21138
|
const isControlled = value !== void 0;
|
|
20999
|
-
const [suggestionsOpen, setSuggestionsOpen] = (0,
|
|
21000
|
-
const [suggestionIndex, setSuggestionIndex] = (0,
|
|
21001
|
-
const [isDragOver, setIsDragOver] = (0,
|
|
21002
|
-
const [historyIdx, setHistoryIdx] = (0,
|
|
21003
|
-
const setValue = (0,
|
|
21139
|
+
const [suggestionsOpen, setSuggestionsOpen] = (0, import_react104.useState)(false);
|
|
21140
|
+
const [suggestionIndex, setSuggestionIndex] = (0, import_react104.useState)(0);
|
|
21141
|
+
const [isDragOver, setIsDragOver] = (0, import_react104.useState)(false);
|
|
21142
|
+
const [historyIdx, setHistoryIdx] = (0, import_react104.useState)(null);
|
|
21143
|
+
const setValue = (0, import_react104.useCallback)(
|
|
21004
21144
|
(next) => {
|
|
21005
21145
|
if (!isControlled) setInternal(next);
|
|
21006
21146
|
onChange?.(next);
|
|
21007
21147
|
},
|
|
21008
21148
|
[isControlled, onChange]
|
|
21009
21149
|
);
|
|
21010
|
-
(0,
|
|
21150
|
+
(0, import_react104.useImperativeHandle)(
|
|
21011
21151
|
ref,
|
|
21012
21152
|
() => ({
|
|
21013
21153
|
focus: () => taRef.current?.focus(),
|
|
@@ -21041,7 +21181,7 @@ var PromptInput = (0, import_react103.forwardRef)(
|
|
|
21041
21181
|
// biome-ignore lint/correctness/useExhaustiveDependencies: handleSubmit closes over up-to-date locals each render.
|
|
21042
21182
|
[v, setValue]
|
|
21043
21183
|
);
|
|
21044
|
-
(0,
|
|
21184
|
+
(0, import_react104.useEffect)(() => {
|
|
21045
21185
|
const el = taRef.current;
|
|
21046
21186
|
if (!el) return;
|
|
21047
21187
|
const computed = window.getComputedStyle(el);
|
|
@@ -21424,14 +21564,14 @@ var PromptInput = (0, import_react103.forwardRef)(
|
|
|
21424
21564
|
PromptInput.displayName = "PromptInput";
|
|
21425
21565
|
|
|
21426
21566
|
// src/components/Quote/Quote.tsx
|
|
21427
|
-
var
|
|
21567
|
+
var import_react105 = require("react");
|
|
21428
21568
|
var import_jsx_runtime85 = (
|
|
21429
21569
|
// Left-double-quotation-mark (U+201C) — the typographic open
|
|
21430
21570
|
// mark. `aria-hidden` because screen readers should hear the
|
|
21431
21571
|
// quote content itself, not "left double quote".
|
|
21432
21572
|
require("react/jsx-runtime")
|
|
21433
21573
|
);
|
|
21434
|
-
var Quote = (0,
|
|
21574
|
+
var Quote = (0, import_react105.forwardRef)(function Quote2({
|
|
21435
21575
|
variant = "default",
|
|
21436
21576
|
size = "md",
|
|
21437
21577
|
author,
|
|
@@ -21468,22 +21608,22 @@ var Quote = (0, import_react104.forwardRef)(function Quote2({
|
|
|
21468
21608
|
Quote.displayName = "Quote";
|
|
21469
21609
|
|
|
21470
21610
|
// src/components/Radio/Radio.tsx
|
|
21471
|
-
var
|
|
21611
|
+
var import_react107 = require("react");
|
|
21472
21612
|
var import_react_aria10 = require("react-aria");
|
|
21473
21613
|
|
|
21474
21614
|
// src/components/Radio/RadioGroup.tsx
|
|
21475
|
-
var
|
|
21615
|
+
var import_react106 = require("react");
|
|
21476
21616
|
var import_react_aria9 = require("react-aria");
|
|
21477
21617
|
var import_jsx_runtime86 = require("react/jsx-runtime");
|
|
21478
|
-
var RadioGroupContext = (0,
|
|
21618
|
+
var RadioGroupContext = (0, import_react106.createContext)(null);
|
|
21479
21619
|
function useRadioGroupContext() {
|
|
21480
|
-
const context = (0,
|
|
21620
|
+
const context = (0, import_react106.useContext)(RadioGroupContext);
|
|
21481
21621
|
if (!context) {
|
|
21482
21622
|
throw new Error("Radio must be used within a RadioGroup");
|
|
21483
21623
|
}
|
|
21484
21624
|
return context;
|
|
21485
21625
|
}
|
|
21486
|
-
var RadioGroup = (0,
|
|
21626
|
+
var RadioGroup = (0, import_react106.forwardRef)(
|
|
21487
21627
|
function RadioGroup2({
|
|
21488
21628
|
value,
|
|
21489
21629
|
defaultValue,
|
|
@@ -21503,10 +21643,10 @@ var RadioGroup = (0, import_react105.forwardRef)(
|
|
|
21503
21643
|
"aria-describedby": consumerDescribedBy,
|
|
21504
21644
|
...rest
|
|
21505
21645
|
}, ref) {
|
|
21506
|
-
const reactId = (0,
|
|
21646
|
+
const reactId = (0, import_react106.useId)();
|
|
21507
21647
|
const baseId = providedId ?? `ods-radio-group-${reactId}`;
|
|
21508
21648
|
const hintId = error || helperText ? `${baseId}-hint` : void 0;
|
|
21509
|
-
const innerRef = (0,
|
|
21649
|
+
const innerRef = (0, import_react106.useRef)(null);
|
|
21510
21650
|
const describedBy = [consumerDescribedBy, hintId].filter(Boolean).join(" ") || void 0;
|
|
21511
21651
|
const ariaProps = {
|
|
21512
21652
|
// react-aria wants a string label for its `<label>` association,
|
|
@@ -21567,7 +21707,7 @@ RadioGroup.displayName = "RadioGroup";
|
|
|
21567
21707
|
|
|
21568
21708
|
// src/components/Radio/Radio.tsx
|
|
21569
21709
|
var import_jsx_runtime87 = require("react/jsx-runtime");
|
|
21570
|
-
var Radio = (0,
|
|
21710
|
+
var Radio = (0, import_react107.forwardRef)(function Radio2({
|
|
21571
21711
|
value,
|
|
21572
21712
|
label,
|
|
21573
21713
|
description,
|
|
@@ -21577,7 +21717,7 @@ var Radio = (0, import_react106.forwardRef)(function Radio2({
|
|
|
21577
21717
|
...props
|
|
21578
21718
|
}, forwardedRef) {
|
|
21579
21719
|
const state = useRadioGroupContext();
|
|
21580
|
-
const innerRef = (0,
|
|
21720
|
+
const innerRef = (0, import_react107.useRef)(null);
|
|
21581
21721
|
const setRef = (node) => {
|
|
21582
21722
|
innerRef.current = node;
|
|
21583
21723
|
if (typeof forwardedRef === "function") forwardedRef(node);
|
|
@@ -21650,9 +21790,9 @@ var Radio = (0, import_react106.forwardRef)(function Radio2({
|
|
|
21650
21790
|
Radio.displayName = "Radio";
|
|
21651
21791
|
|
|
21652
21792
|
// src/components/RangeSlider/RangeSlider.tsx
|
|
21653
|
-
var
|
|
21793
|
+
var import_react108 = require("react");
|
|
21654
21794
|
var import_jsx_runtime88 = require("react/jsx-runtime");
|
|
21655
|
-
var RangeSlider = (0,
|
|
21795
|
+
var RangeSlider = (0, import_react108.forwardRef)(
|
|
21656
21796
|
function RangeSlider2({
|
|
21657
21797
|
label,
|
|
21658
21798
|
value,
|
|
@@ -21672,7 +21812,7 @@ var RangeSlider = (0, import_react107.forwardRef)(
|
|
|
21672
21812
|
className,
|
|
21673
21813
|
...rest
|
|
21674
21814
|
}, ref) {
|
|
21675
|
-
const reactId = (0,
|
|
21815
|
+
const reactId = (0, import_react108.useId)();
|
|
21676
21816
|
const baseId = providedId ?? `ods-range-${reactId}`;
|
|
21677
21817
|
const labelId = label ? `${baseId}-label` : void 0;
|
|
21678
21818
|
const hintId = error || helperText ? `${baseId}-hint` : void 0;
|
|
@@ -21784,10 +21924,10 @@ var RangeSlider = (0, import_react107.forwardRef)(
|
|
|
21784
21924
|
RangeSlider.displayName = "RangeSlider";
|
|
21785
21925
|
|
|
21786
21926
|
// src/components/Rating/Rating.tsx
|
|
21787
|
-
var
|
|
21927
|
+
var import_react109 = require("react");
|
|
21788
21928
|
var import_icons33 = require("@octaviaflow/icons");
|
|
21789
21929
|
var import_jsx_runtime89 = require("react/jsx-runtime");
|
|
21790
|
-
var Rating = (0,
|
|
21930
|
+
var Rating = (0, import_react109.forwardRef)(function Rating2({
|
|
21791
21931
|
value,
|
|
21792
21932
|
onChange,
|
|
21793
21933
|
max = 5,
|
|
@@ -21803,7 +21943,7 @@ var Rating = (0, import_react108.forwardRef)(function Rating2({
|
|
|
21803
21943
|
"aria-label": ariaLabel,
|
|
21804
21944
|
...rest
|
|
21805
21945
|
}, ref) {
|
|
21806
|
-
const [hover, setHover] = (0,
|
|
21946
|
+
const [hover, setHover] = (0, import_react109.useState)(null);
|
|
21807
21947
|
const display = hover ?? value;
|
|
21808
21948
|
const interactive = !readOnly && !disabled;
|
|
21809
21949
|
const Empty = icon === "heart" ? import_icons33.FavoriteIcon : import_icons33.StarIcon;
|
|
@@ -21911,10 +22051,10 @@ var Rating = (0, import_react108.forwardRef)(function Rating2({
|
|
|
21911
22051
|
Rating.displayName = "Rating";
|
|
21912
22052
|
|
|
21913
22053
|
// src/components/Rating/BinaryRating.tsx
|
|
21914
|
-
var
|
|
22054
|
+
var import_react110 = require("react");
|
|
21915
22055
|
var import_icons34 = require("@octaviaflow/icons");
|
|
21916
22056
|
var import_jsx_runtime90 = require("react/jsx-runtime");
|
|
21917
|
-
var BinaryRating = (0,
|
|
22057
|
+
var BinaryRating = (0, import_react110.forwardRef)(
|
|
21918
22058
|
function BinaryRating2({
|
|
21919
22059
|
value,
|
|
21920
22060
|
onChange,
|
|
@@ -22022,7 +22162,7 @@ function BinaryButton({
|
|
|
22022
22162
|
}
|
|
22023
22163
|
|
|
22024
22164
|
// src/components/Resizable/Resizable.tsx
|
|
22025
|
-
var
|
|
22165
|
+
var import_react111 = require("react");
|
|
22026
22166
|
var import_jsx_runtime91 = require("react/jsx-runtime");
|
|
22027
22167
|
function setDragOverlay(direction) {
|
|
22028
22168
|
const ID = "ods-resizable-drag-overlay";
|
|
@@ -22039,7 +22179,7 @@ function setDragOverlay(direction) {
|
|
|
22039
22179
|
}
|
|
22040
22180
|
el.style.cursor = direction === "horizontal" ? "col-resize" : "row-resize";
|
|
22041
22181
|
}
|
|
22042
|
-
var Resizable = (0,
|
|
22182
|
+
var Resizable = (0, import_react111.forwardRef)(
|
|
22043
22183
|
function Resizable2({
|
|
22044
22184
|
direction = "horizontal",
|
|
22045
22185
|
children,
|
|
@@ -22053,17 +22193,17 @@ var Resizable = (0, import_react110.forwardRef)(
|
|
|
22053
22193
|
ariaLabel = "Resize panels",
|
|
22054
22194
|
...rest
|
|
22055
22195
|
}, ref) {
|
|
22056
|
-
const wrapRef = (0,
|
|
22057
|
-
const draggingRef = (0,
|
|
22058
|
-
const [isDragging, setIsDragging] = (0,
|
|
22059
|
-
const [split, setSplit] = (0,
|
|
22060
|
-
const [total, setTotal] = (0,
|
|
22196
|
+
const wrapRef = (0, import_react111.useRef)(null);
|
|
22197
|
+
const draggingRef = (0, import_react111.useRef)(false);
|
|
22198
|
+
const [isDragging, setIsDragging] = (0, import_react111.useState)(false);
|
|
22199
|
+
const [split, setSplit] = (0, import_react111.useState)(0);
|
|
22200
|
+
const [total, setTotal] = (0, import_react111.useState)(0);
|
|
22061
22201
|
const setRef = (node) => {
|
|
22062
22202
|
wrapRef.current = node;
|
|
22063
22203
|
if (typeof ref === "function") ref(node);
|
|
22064
22204
|
else if (ref) ref.current = node;
|
|
22065
22205
|
};
|
|
22066
|
-
(0,
|
|
22206
|
+
(0, import_react111.useLayoutEffect)(() => {
|
|
22067
22207
|
const el = wrapRef.current;
|
|
22068
22208
|
if (!el) return;
|
|
22069
22209
|
const t = direction === "horizontal" ? el.offsetWidth : el.offsetHeight;
|
|
@@ -22087,7 +22227,7 @@ var Resizable = (0, import_react110.forwardRef)(
|
|
|
22087
22227
|
}
|
|
22088
22228
|
setSplit(defaultSplit >= 1 ? defaultSplit : t * defaultSplit);
|
|
22089
22229
|
}, []);
|
|
22090
|
-
(0,
|
|
22230
|
+
(0, import_react111.useEffect)(() => {
|
|
22091
22231
|
const el = wrapRef.current;
|
|
22092
22232
|
if (!el || typeof ResizeObserver === "undefined") return;
|
|
22093
22233
|
const ro = new ResizeObserver(() => {
|
|
@@ -22101,7 +22241,7 @@ var Resizable = (0, import_react110.forwardRef)(
|
|
|
22101
22241
|
ro.observe(el);
|
|
22102
22242
|
return () => ro.disconnect();
|
|
22103
22243
|
}, [direction, minSecond]);
|
|
22104
|
-
const persist = (0,
|
|
22244
|
+
const persist = (0, import_react111.useCallback)(
|
|
22105
22245
|
(next) => {
|
|
22106
22246
|
onSplitChange?.(next);
|
|
22107
22247
|
if (storageKey && typeof window !== "undefined" && total > 0) {
|
|
@@ -22120,7 +22260,7 @@ var Resizable = (0, import_react110.forwardRef)(
|
|
|
22120
22260
|
setIsDragging(true);
|
|
22121
22261
|
setDragOverlay(direction);
|
|
22122
22262
|
};
|
|
22123
|
-
(0,
|
|
22263
|
+
(0, import_react111.useEffect)(() => {
|
|
22124
22264
|
const onMove = (e) => {
|
|
22125
22265
|
if (!draggingRef.current) return;
|
|
22126
22266
|
const el = wrapRef.current;
|
|
@@ -22236,7 +22376,7 @@ var Resizable = (0, import_react110.forwardRef)(
|
|
|
22236
22376
|
}
|
|
22237
22377
|
);
|
|
22238
22378
|
Resizable.displayName = "Resizable";
|
|
22239
|
-
var ResizablePanel = (0,
|
|
22379
|
+
var ResizablePanel = (0, import_react111.forwardRef)(
|
|
22240
22380
|
function ResizablePanel2({
|
|
22241
22381
|
defaultSize = 240,
|
|
22242
22382
|
minSize = 120,
|
|
@@ -22249,11 +22389,11 @@ var ResizablePanel = (0, import_react110.forwardRef)(
|
|
|
22249
22389
|
...rest
|
|
22250
22390
|
}, ref) {
|
|
22251
22391
|
const isVertical = side === "bottom";
|
|
22252
|
-
const [internal, setInternal] = (0,
|
|
22392
|
+
const [internal, setInternal] = (0, import_react111.useState)(sizeProp ?? defaultSize);
|
|
22253
22393
|
const size = sizeProp ?? internal;
|
|
22254
|
-
const draggingRef = (0,
|
|
22255
|
-
const [isDragging, setIsDragging] = (0,
|
|
22256
|
-
const startRef = (0,
|
|
22394
|
+
const draggingRef = (0, import_react111.useRef)(false);
|
|
22395
|
+
const [isDragging, setIsDragging] = (0, import_react111.useState)(false);
|
|
22396
|
+
const startRef = (0, import_react111.useRef)({ at: 0, size });
|
|
22257
22397
|
const onPointerDown = (e) => {
|
|
22258
22398
|
e.preventDefault();
|
|
22259
22399
|
e.currentTarget.setPointerCapture(e.pointerId);
|
|
@@ -22265,7 +22405,7 @@ var ResizablePanel = (0, import_react110.forwardRef)(
|
|
|
22265
22405
|
};
|
|
22266
22406
|
setDragOverlay(isVertical ? "vertical" : "horizontal");
|
|
22267
22407
|
};
|
|
22268
|
-
(0,
|
|
22408
|
+
(0, import_react111.useEffect)(() => {
|
|
22269
22409
|
const onMove = (e) => {
|
|
22270
22410
|
if (!draggingRef.current) return;
|
|
22271
22411
|
const delta = (isVertical ? e.clientY : e.clientX) - startRef.current.at;
|
|
@@ -22328,9 +22468,9 @@ var ResizablePanel = (0, import_react110.forwardRef)(
|
|
|
22328
22468
|
ResizablePanel.displayName = "ResizablePanel";
|
|
22329
22469
|
|
|
22330
22470
|
// src/components/Ribbon/Ribbon.tsx
|
|
22331
|
-
var
|
|
22471
|
+
var import_react112 = require("react");
|
|
22332
22472
|
var import_jsx_runtime92 = require("react/jsx-runtime");
|
|
22333
|
-
var Ribbon = (0,
|
|
22473
|
+
var Ribbon = (0, import_react112.forwardRef)(function Ribbon2({
|
|
22334
22474
|
variant = "primary",
|
|
22335
22475
|
size = "md",
|
|
22336
22476
|
icon,
|
|
@@ -22361,13 +22501,13 @@ var Ribbon = (0, import_react111.forwardRef)(function Ribbon2({
|
|
|
22361
22501
|
Ribbon.displayName = "Ribbon";
|
|
22362
22502
|
|
|
22363
22503
|
// src/components/ScrollArea/ScrollArea.tsx
|
|
22364
|
-
var
|
|
22504
|
+
var import_react113 = require("react");
|
|
22365
22505
|
var import_jsx_runtime93 = require("react/jsx-runtime");
|
|
22366
22506
|
function resolveDimension(value) {
|
|
22367
22507
|
if (value === void 0) return void 0;
|
|
22368
22508
|
return typeof value === "number" ? `${value}px` : value;
|
|
22369
22509
|
}
|
|
22370
|
-
var ScrollArea = (0,
|
|
22510
|
+
var ScrollArea = (0, import_react113.forwardRef)(
|
|
22371
22511
|
function ScrollArea2({
|
|
22372
22512
|
axis = "vertical",
|
|
22373
22513
|
behavior = "hover",
|
|
@@ -22433,7 +22573,7 @@ function SettingsRow({
|
|
|
22433
22573
|
|
|
22434
22574
|
// src/components/Sheet/Sheet.tsx
|
|
22435
22575
|
var import_framer_motion29 = require("framer-motion");
|
|
22436
|
-
var
|
|
22576
|
+
var import_react114 = require("react");
|
|
22437
22577
|
var import_react_dom12 = require("react-dom");
|
|
22438
22578
|
var import_jsx_runtime95 = require("react/jsx-runtime");
|
|
22439
22579
|
var slideVariants = {
|
|
@@ -22468,7 +22608,7 @@ function Sheet({
|
|
|
22468
22608
|
dragHandle = true,
|
|
22469
22609
|
className
|
|
22470
22610
|
}) {
|
|
22471
|
-
(0,
|
|
22611
|
+
(0, import_react114.useEffect)(() => {
|
|
22472
22612
|
if (!open || !closeOnEsc) return;
|
|
22473
22613
|
const onKey = (e) => {
|
|
22474
22614
|
if (e.key === "Escape") onClose();
|
|
@@ -22537,7 +22677,7 @@ function Show({ above, below, children, ...rest }) {
|
|
|
22537
22677
|
Show.displayName = "Show";
|
|
22538
22678
|
|
|
22539
22679
|
// src/components/Sidebar/Sidebar.tsx
|
|
22540
|
-
var
|
|
22680
|
+
var import_react115 = require("react");
|
|
22541
22681
|
var import_jsx_runtime97 = require("react/jsx-runtime");
|
|
22542
22682
|
function Sidebar({
|
|
22543
22683
|
variant = "expanded",
|
|
@@ -22557,8 +22697,8 @@ function Sidebar({
|
|
|
22557
22697
|
className
|
|
22558
22698
|
}) {
|
|
22559
22699
|
const allSections = sections ?? (items ? [{ items }] : []);
|
|
22560
|
-
const [internalPinned, setInternalPinned] = (0,
|
|
22561
|
-
(0,
|
|
22700
|
+
const [internalPinned, setInternalPinned] = (0, import_react115.useState)(defaultPinned);
|
|
22701
|
+
(0, import_react115.useEffect)(() => {
|
|
22562
22702
|
if (pinnedProp !== void 0) return;
|
|
22563
22703
|
try {
|
|
22564
22704
|
const stored = window.localStorage.getItem(pinStorageKey);
|
|
@@ -22569,7 +22709,7 @@ function Sidebar({
|
|
|
22569
22709
|
}
|
|
22570
22710
|
}, []);
|
|
22571
22711
|
const pinned = pinnedProp ?? internalPinned;
|
|
22572
|
-
const setPinned = (0,
|
|
22712
|
+
const setPinned = (0, import_react115.useCallback)(
|
|
22573
22713
|
(p) => {
|
|
22574
22714
|
if (pinnedProp === void 0) setInternalPinned(p);
|
|
22575
22715
|
try {
|
|
@@ -22580,9 +22720,9 @@ function Sidebar({
|
|
|
22580
22720
|
},
|
|
22581
22721
|
[pinnedProp, pinStorageKey, onPinnedChange]
|
|
22582
22722
|
);
|
|
22583
|
-
const [hoverOpen, setHoverOpen] = (0,
|
|
22584
|
-
const openTimer = (0,
|
|
22585
|
-
const closeTimer = (0,
|
|
22723
|
+
const [hoverOpen, setHoverOpen] = (0, import_react115.useState)(false);
|
|
22724
|
+
const openTimer = (0, import_react115.useRef)(null);
|
|
22725
|
+
const closeTimer = (0, import_react115.useRef)(null);
|
|
22586
22726
|
const clearTimers = () => {
|
|
22587
22727
|
if (openTimer.current) {
|
|
22588
22728
|
clearTimeout(openTimer.current);
|
|
@@ -22593,7 +22733,7 @@ function Sidebar({
|
|
|
22593
22733
|
closeTimer.current = null;
|
|
22594
22734
|
}
|
|
22595
22735
|
};
|
|
22596
|
-
(0,
|
|
22736
|
+
(0, import_react115.useEffect)(() => () => clearTimers(), []);
|
|
22597
22737
|
const handleEnter = () => {
|
|
22598
22738
|
clearTimers();
|
|
22599
22739
|
openTimer.current = setTimeout(() => setHoverOpen(true), hoverOpenDelay);
|
|
@@ -22605,7 +22745,7 @@ function Sidebar({
|
|
|
22605
22745
|
const autoMode = variant === "auto";
|
|
22606
22746
|
const showAsRail = autoMode ? !pinned : variant === "rail";
|
|
22607
22747
|
const overlayOpen = autoMode && !pinned && hoverOpen;
|
|
22608
|
-
(0,
|
|
22748
|
+
(0, import_react115.useEffect)(() => {
|
|
22609
22749
|
if (!overlayOpen) return;
|
|
22610
22750
|
const handler = (e) => {
|
|
22611
22751
|
if (e.key === "Escape") {
|
|
@@ -22739,8 +22879,8 @@ function RailItem({
|
|
|
22739
22879
|
tooltipDelay,
|
|
22740
22880
|
suppressTooltip
|
|
22741
22881
|
}) {
|
|
22742
|
-
const [open, setOpen] = (0,
|
|
22743
|
-
const timerRef = (0,
|
|
22882
|
+
const [open, setOpen] = (0, import_react115.useState)(false);
|
|
22883
|
+
const timerRef = (0, import_react115.useRef)(null);
|
|
22744
22884
|
const hasChildren = !!(item.children && item.children.length > 0);
|
|
22745
22885
|
const clear = () => {
|
|
22746
22886
|
if (timerRef.current) {
|
|
@@ -22748,7 +22888,7 @@ function RailItem({
|
|
|
22748
22888
|
timerRef.current = null;
|
|
22749
22889
|
}
|
|
22750
22890
|
};
|
|
22751
|
-
(0,
|
|
22891
|
+
(0, import_react115.useEffect)(() => () => clear(), []);
|
|
22752
22892
|
const show = () => {
|
|
22753
22893
|
if (suppressTooltip) return;
|
|
22754
22894
|
clear();
|
|
@@ -22892,7 +23032,7 @@ function SidebarToggleIcon({ collapsed }) {
|
|
|
22892
23032
|
}
|
|
22893
23033
|
function ExpandedItem({ item, level }) {
|
|
22894
23034
|
const hasChildren = !!(item.children && item.children.length > 0);
|
|
22895
|
-
const [open, setOpen] = (0,
|
|
23035
|
+
const [open, setOpen] = (0, import_react115.useState)(
|
|
22896
23036
|
item.defaultExpanded ?? (hasChildren && hasActiveDescendant(item))
|
|
22897
23037
|
);
|
|
22898
23038
|
if (hasChildren) {
|
|
@@ -23015,7 +23155,7 @@ function hasActiveDescendant(item) {
|
|
|
23015
23155
|
}
|
|
23016
23156
|
|
|
23017
23157
|
// src/components/Skeleton/Skeleton.tsx
|
|
23018
|
-
var
|
|
23158
|
+
var import_react116 = require("react");
|
|
23019
23159
|
var import_jsx_runtime98 = require("react/jsx-runtime");
|
|
23020
23160
|
function toCss(value) {
|
|
23021
23161
|
if (value == null) return void 0;
|
|
@@ -23026,7 +23166,7 @@ var VARIANT_TO_SHAPE = {
|
|
|
23026
23166
|
circular: "circle",
|
|
23027
23167
|
rectangular: "rect"
|
|
23028
23168
|
};
|
|
23029
|
-
var Skeleton = (0,
|
|
23169
|
+
var Skeleton = (0, import_react116.forwardRef)(
|
|
23030
23170
|
function Skeleton2({
|
|
23031
23171
|
shape,
|
|
23032
23172
|
variant,
|
|
@@ -23076,7 +23216,7 @@ var Skeleton = (0, import_react115.forwardRef)(
|
|
|
23076
23216
|
}
|
|
23077
23217
|
);
|
|
23078
23218
|
Skeleton.displayName = "Skeleton";
|
|
23079
|
-
var SkeletonText = (0,
|
|
23219
|
+
var SkeletonText = (0, import_react116.forwardRef)(
|
|
23080
23220
|
function SkeletonText2({
|
|
23081
23221
|
lines = 3,
|
|
23082
23222
|
width,
|
|
@@ -23112,7 +23252,7 @@ var SkeletonText = (0, import_react115.forwardRef)(
|
|
|
23112
23252
|
}
|
|
23113
23253
|
);
|
|
23114
23254
|
SkeletonText.displayName = "SkeletonText";
|
|
23115
|
-
var SkeletonGroup = (0,
|
|
23255
|
+
var SkeletonGroup = (0, import_react116.forwardRef)(
|
|
23116
23256
|
function SkeletonGroup2({
|
|
23117
23257
|
direction = "vertical",
|
|
23118
23258
|
gap = 8,
|
|
@@ -23148,7 +23288,7 @@ SkeletonGroup.displayName = "SkeletonGroup";
|
|
|
23148
23288
|
|
|
23149
23289
|
// src/components/SlideoutPanel/SlideoutPanel.tsx
|
|
23150
23290
|
var import_framer_motion30 = require("framer-motion");
|
|
23151
|
-
var
|
|
23291
|
+
var import_react117 = require("react");
|
|
23152
23292
|
var import_react_aria11 = require("react-aria");
|
|
23153
23293
|
var import_react_dom13 = require("react-dom");
|
|
23154
23294
|
var import_jsx_runtime99 = require("react/jsx-runtime");
|
|
@@ -23174,8 +23314,8 @@ function SlideoutContent({
|
|
|
23174
23314
|
footer,
|
|
23175
23315
|
className
|
|
23176
23316
|
}) {
|
|
23177
|
-
const overlayRef = (0,
|
|
23178
|
-
const panelRef = (0,
|
|
23317
|
+
const overlayRef = (0, import_react117.useRef)(null);
|
|
23318
|
+
const panelRef = (0, import_react117.useRef)(null);
|
|
23179
23319
|
const { overlayProps } = (0, import_react_aria11.useOverlay)(
|
|
23180
23320
|
{
|
|
23181
23321
|
isOpen: open,
|
|
@@ -23249,9 +23389,9 @@ function SlideoutPanel(props) {
|
|
|
23249
23389
|
}
|
|
23250
23390
|
|
|
23251
23391
|
// src/components/Slider/Slider.tsx
|
|
23252
|
-
var
|
|
23392
|
+
var import_react118 = require("react");
|
|
23253
23393
|
var import_jsx_runtime100 = require("react/jsx-runtime");
|
|
23254
|
-
var Slider = (0,
|
|
23394
|
+
var Slider = (0, import_react118.forwardRef)(function Slider2({
|
|
23255
23395
|
label,
|
|
23256
23396
|
value,
|
|
23257
23397
|
onChange,
|
|
@@ -23273,7 +23413,7 @@ var Slider = (0, import_react117.forwardRef)(function Slider2({
|
|
|
23273
23413
|
"aria-describedby": consumerDescribedBy,
|
|
23274
23414
|
...rest
|
|
23275
23415
|
}, ref) {
|
|
23276
|
-
const reactId = (0,
|
|
23416
|
+
const reactId = (0, import_react118.useId)();
|
|
23277
23417
|
const baseId = providedId ?? `ods-slider-${reactId}`;
|
|
23278
23418
|
const labelId = label ? `${baseId}-label` : void 0;
|
|
23279
23419
|
const hintId = error || helperText ? `${baseId}-hint` : void 0;
|
|
@@ -23372,7 +23512,7 @@ Slider.displayName = "Slider";
|
|
|
23372
23512
|
|
|
23373
23513
|
// src/components/SocialButton/SocialButton.tsx
|
|
23374
23514
|
var import_icons35 = require("@octaviaflow/icons");
|
|
23375
|
-
var
|
|
23515
|
+
var import_react119 = require("react");
|
|
23376
23516
|
var import_jsx_runtime101 = require("react/jsx-runtime");
|
|
23377
23517
|
var DEFAULT_LABELS = {
|
|
23378
23518
|
google: "Continue with Google",
|
|
@@ -23445,7 +23585,7 @@ function resolveIcon2(provider) {
|
|
|
23445
23585
|
return null;
|
|
23446
23586
|
}
|
|
23447
23587
|
}
|
|
23448
|
-
var SocialButton = (0,
|
|
23588
|
+
var SocialButton = (0, import_react119.forwardRef)(
|
|
23449
23589
|
function SocialButton2({
|
|
23450
23590
|
provider,
|
|
23451
23591
|
label,
|
|
@@ -23488,7 +23628,7 @@ var SocialButton = (0, import_react118.forwardRef)(
|
|
|
23488
23628
|
SocialButton.displayName = "SocialButton";
|
|
23489
23629
|
|
|
23490
23630
|
// src/components/Sortable/Sortable.tsx
|
|
23491
|
-
var
|
|
23631
|
+
var import_react120 = require("react");
|
|
23492
23632
|
var import_icons36 = require("@octaviaflow/icons");
|
|
23493
23633
|
var import_jsx_runtime102 = require("react/jsx-runtime");
|
|
23494
23634
|
var DT_TYPE = "application/x-ods-sortable";
|
|
@@ -23503,15 +23643,15 @@ function Sortable({
|
|
|
23503
23643
|
className,
|
|
23504
23644
|
...rest
|
|
23505
23645
|
}) {
|
|
23506
|
-
const containerRef = (0,
|
|
23507
|
-
const itemRefs = (0,
|
|
23508
|
-
const originalOrderRef = (0,
|
|
23509
|
-
const scrollTimerRef = (0,
|
|
23510
|
-
const [draggingId, setDraggingId] = (0,
|
|
23511
|
-
const [dropPos, setDropPos] = (0,
|
|
23512
|
-
const [kbActiveId, setKbActiveId] = (0,
|
|
23646
|
+
const containerRef = (0, import_react120.useRef)(null);
|
|
23647
|
+
const itemRefs = (0, import_react120.useRef)(/* @__PURE__ */ new Map());
|
|
23648
|
+
const originalOrderRef = (0, import_react120.useRef)(null);
|
|
23649
|
+
const scrollTimerRef = (0, import_react120.useRef)(null);
|
|
23650
|
+
const [draggingId, setDraggingId] = (0, import_react120.useState)(null);
|
|
23651
|
+
const [dropPos, setDropPos] = (0, import_react120.useState)(null);
|
|
23652
|
+
const [kbActiveId, setKbActiveId] = (0, import_react120.useState)(null);
|
|
23513
23653
|
const isVertical = direction === "vertical";
|
|
23514
|
-
const onDragStart = (0,
|
|
23654
|
+
const onDragStart = (0, import_react120.useCallback)(
|
|
23515
23655
|
(id) => (e) => {
|
|
23516
23656
|
if (disabled) return;
|
|
23517
23657
|
e.dataTransfer.effectAllowed = "move";
|
|
@@ -23522,7 +23662,7 @@ function Sortable({
|
|
|
23522
23662
|
},
|
|
23523
23663
|
[disabled, items]
|
|
23524
23664
|
);
|
|
23525
|
-
const cancelDrag = (0,
|
|
23665
|
+
const cancelDrag = (0, import_react120.useCallback)(() => {
|
|
23526
23666
|
setDraggingId(null);
|
|
23527
23667
|
setDropPos(null);
|
|
23528
23668
|
originalOrderRef.current = null;
|
|
@@ -23531,7 +23671,7 @@ function Sortable({
|
|
|
23531
23671
|
scrollTimerRef.current = null;
|
|
23532
23672
|
}
|
|
23533
23673
|
}, []);
|
|
23534
|
-
const onDragEnd = (0,
|
|
23674
|
+
const onDragEnd = (0, import_react120.useCallback)(() => {
|
|
23535
23675
|
cancelDrag();
|
|
23536
23676
|
}, [cancelDrag]);
|
|
23537
23677
|
const onItemDragOver = (id) => (e) => {
|
|
@@ -23556,7 +23696,7 @@ function Sortable({
|
|
|
23556
23696
|
if (sourceId === target.id) return;
|
|
23557
23697
|
commitMove(sourceId, target.id, target.edge);
|
|
23558
23698
|
};
|
|
23559
|
-
const commitMove = (0,
|
|
23699
|
+
const commitMove = (0, import_react120.useCallback)(
|
|
23560
23700
|
(sourceId, targetId, edge) => {
|
|
23561
23701
|
const from = items.findIndex((i) => i.id === sourceId);
|
|
23562
23702
|
let to = items.findIndex((i) => i.id === targetId);
|
|
@@ -23570,7 +23710,7 @@ function Sortable({
|
|
|
23570
23710
|
},
|
|
23571
23711
|
[items, onChange]
|
|
23572
23712
|
);
|
|
23573
|
-
(0,
|
|
23713
|
+
(0, import_react120.useEffect)(() => {
|
|
23574
23714
|
if (!autoScroll || !draggingId) return;
|
|
23575
23715
|
const container = containerRef.current;
|
|
23576
23716
|
if (!container) return;
|
|
@@ -23620,7 +23760,7 @@ function Sortable({
|
|
|
23620
23760
|
}
|
|
23621
23761
|
};
|
|
23622
23762
|
}, [autoScroll, autoScrollEdge, draggingId, isVertical]);
|
|
23623
|
-
(0,
|
|
23763
|
+
(0, import_react120.useEffect)(() => {
|
|
23624
23764
|
if (!draggingId) return;
|
|
23625
23765
|
const onKey = (e) => {
|
|
23626
23766
|
if (e.key === "Escape") cancelDrag();
|
|
@@ -23748,7 +23888,7 @@ function Sortable({
|
|
|
23748
23888
|
}
|
|
23749
23889
|
);
|
|
23750
23890
|
}
|
|
23751
|
-
var DragHandle = (0,
|
|
23891
|
+
var DragHandle = (0, import_react120.forwardRef)(
|
|
23752
23892
|
function DragHandle2({
|
|
23753
23893
|
className,
|
|
23754
23894
|
style,
|
|
@@ -23773,7 +23913,7 @@ var DragHandle = (0, import_react119.forwardRef)(
|
|
|
23773
23913
|
DragHandle.displayName = "DragHandle";
|
|
23774
23914
|
|
|
23775
23915
|
// src/components/Stack/Stack.tsx
|
|
23776
|
-
var
|
|
23916
|
+
var import_react121 = require("react");
|
|
23777
23917
|
var import_jsx_runtime103 = require("react/jsx-runtime");
|
|
23778
23918
|
function resolveGap2(gap) {
|
|
23779
23919
|
if (typeof gap === "string") return gap;
|
|
@@ -23795,7 +23935,7 @@ var JUSTIFY_MAP = {
|
|
|
23795
23935
|
around: "space-around",
|
|
23796
23936
|
evenly: "space-evenly"
|
|
23797
23937
|
};
|
|
23798
|
-
var Stack = (0,
|
|
23938
|
+
var Stack = (0, import_react121.forwardRef)(function Stack2({
|
|
23799
23939
|
direction = "column",
|
|
23800
23940
|
gap = 2,
|
|
23801
23941
|
align = "stretch",
|
|
@@ -23811,11 +23951,11 @@ var Stack = (0, import_react120.forwardRef)(function Stack2({
|
|
|
23811
23951
|
...rest
|
|
23812
23952
|
}, ref) {
|
|
23813
23953
|
const Component = as ?? "div";
|
|
23814
|
-
const items = divider ?
|
|
23954
|
+
const items = divider ? import_react121.Children.toArray(children).flatMap(
|
|
23815
23955
|
(child, i, arr) => i < arr.length - 1 ? [
|
|
23816
|
-
/* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
|
|
23817
|
-
/* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
|
|
23818
|
-
] : [/* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
|
|
23956
|
+
/* @__PURE__ */ (0, import_jsx_runtime103.jsx)(import_react121.Fragment, { children: child }, `item-${i}`),
|
|
23957
|
+
/* @__PURE__ */ (0, import_jsx_runtime103.jsx)(import_react121.Fragment, { children: divider }, `divider-${i}`)
|
|
23958
|
+
] : [/* @__PURE__ */ (0, import_jsx_runtime103.jsx)(import_react121.Fragment, { children: child }, `item-${i}`)]
|
|
23819
23959
|
) : children;
|
|
23820
23960
|
return /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
|
|
23821
23961
|
Component,
|
|
@@ -23843,13 +23983,13 @@ var Stack = (0, import_react120.forwardRef)(function Stack2({
|
|
|
23843
23983
|
);
|
|
23844
23984
|
});
|
|
23845
23985
|
Stack.displayName = "Stack";
|
|
23846
|
-
var HStack = (0,
|
|
23986
|
+
var HStack = (0, import_react121.forwardRef)(
|
|
23847
23987
|
function HStack2(props, ref) {
|
|
23848
23988
|
return /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(Stack, { ref, direction: "row", ...props });
|
|
23849
23989
|
}
|
|
23850
23990
|
);
|
|
23851
23991
|
HStack.displayName = "HStack";
|
|
23852
|
-
var VStack = (0,
|
|
23992
|
+
var VStack = (0, import_react121.forwardRef)(
|
|
23853
23993
|
function VStack2(props, ref) {
|
|
23854
23994
|
return /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(Stack, { ref, direction: "column", ...props });
|
|
23855
23995
|
}
|
|
@@ -23858,10 +23998,10 @@ VStack.displayName = "VStack";
|
|
|
23858
23998
|
|
|
23859
23999
|
// src/components/Spotlight/Spotlight.tsx
|
|
23860
24000
|
var import_framer_motion31 = require("framer-motion");
|
|
23861
|
-
var
|
|
24001
|
+
var import_react122 = require("react");
|
|
23862
24002
|
var import_react_dom14 = require("react-dom");
|
|
23863
24003
|
var import_jsx_runtime104 = require("react/jsx-runtime");
|
|
23864
|
-
var Spotlight = (0,
|
|
24004
|
+
var Spotlight = (0, import_react122.forwardRef)(
|
|
23865
24005
|
function Spotlight2({
|
|
23866
24006
|
open,
|
|
23867
24007
|
target,
|
|
@@ -23878,16 +24018,16 @@ var Spotlight = (0, import_react121.forwardRef)(
|
|
|
23878
24018
|
...rest
|
|
23879
24019
|
}, ref) {
|
|
23880
24020
|
const reducedMotion = (0, import_framer_motion31.useReducedMotion)();
|
|
23881
|
-
const [rect, setRect] = (0,
|
|
23882
|
-
const [viewport, setViewport] = (0,
|
|
24021
|
+
const [rect, setRect] = (0, import_react122.useState)(null);
|
|
24022
|
+
const [viewport, setViewport] = (0, import_react122.useState)(() => ({
|
|
23883
24023
|
width: typeof window !== "undefined" ? window.innerWidth : 0,
|
|
23884
24024
|
height: typeof window !== "undefined" ? window.innerHeight : 0
|
|
23885
24025
|
}));
|
|
23886
|
-
const maskId = (0,
|
|
24026
|
+
const maskId = (0, import_react122.useMemo)(
|
|
23887
24027
|
() => `ods-spotlight-${Math.random().toString(36).slice(2, 9)}`,
|
|
23888
24028
|
[]
|
|
23889
24029
|
);
|
|
23890
|
-
const measure = (0,
|
|
24030
|
+
const measure = (0, import_react122.useCallback)(() => {
|
|
23891
24031
|
if (!open) return;
|
|
23892
24032
|
const el = target.current;
|
|
23893
24033
|
if (!el) return;
|
|
@@ -23897,10 +24037,10 @@ var Spotlight = (0, import_react121.forwardRef)(
|
|
|
23897
24037
|
height: window.innerHeight
|
|
23898
24038
|
});
|
|
23899
24039
|
}, [open, target]);
|
|
23900
|
-
(0,
|
|
24040
|
+
(0, import_react122.useLayoutEffect)(() => {
|
|
23901
24041
|
measure();
|
|
23902
24042
|
}, [measure]);
|
|
23903
|
-
(0,
|
|
24043
|
+
(0, import_react122.useEffect)(() => {
|
|
23904
24044
|
if (!open) return;
|
|
23905
24045
|
const handler = () => measure();
|
|
23906
24046
|
window.addEventListener("resize", handler);
|
|
@@ -23910,7 +24050,7 @@ var Spotlight = (0, import_react121.forwardRef)(
|
|
|
23910
24050
|
window.removeEventListener("scroll", handler, true);
|
|
23911
24051
|
};
|
|
23912
24052
|
}, [open, measure]);
|
|
23913
|
-
(0,
|
|
24053
|
+
(0, import_react122.useEffect)(() => {
|
|
23914
24054
|
if (!open || !onDismiss) return;
|
|
23915
24055
|
const onKey = (e) => {
|
|
23916
24056
|
if (e.key === "Escape") onDismiss();
|
|
@@ -24012,10 +24152,10 @@ var Spotlight = (0, import_react121.forwardRef)(
|
|
|
24012
24152
|
Spotlight.displayName = "Spotlight";
|
|
24013
24153
|
|
|
24014
24154
|
// src/components/Stat/Stat.tsx
|
|
24015
|
-
var
|
|
24155
|
+
var import_react123 = require("react");
|
|
24016
24156
|
var import_icons37 = require("@octaviaflow/icons");
|
|
24017
24157
|
var import_jsx_runtime105 = require("react/jsx-runtime");
|
|
24018
|
-
var Stat = (0,
|
|
24158
|
+
var Stat = (0, import_react123.forwardRef)(function Stat2({
|
|
24019
24159
|
label,
|
|
24020
24160
|
value,
|
|
24021
24161
|
delta,
|
|
@@ -24054,7 +24194,7 @@ Stat.displayName = "Stat";
|
|
|
24054
24194
|
|
|
24055
24195
|
// src/components/StatusTiles/StatusTiles.tsx
|
|
24056
24196
|
var import_framer_motion32 = require("framer-motion");
|
|
24057
|
-
var
|
|
24197
|
+
var import_react124 = require("react");
|
|
24058
24198
|
var import_jsx_runtime106 = require("react/jsx-runtime");
|
|
24059
24199
|
var STATUS_COLORS = {
|
|
24060
24200
|
success: "var(--ods-status-success)",
|
|
@@ -24072,7 +24212,7 @@ var STATUS_TEXT = {
|
|
|
24072
24212
|
skipped: "Skipped",
|
|
24073
24213
|
idle: "Idle"
|
|
24074
24214
|
};
|
|
24075
|
-
var StatusTiles = (0,
|
|
24215
|
+
var StatusTiles = (0, import_react124.forwardRef)(
|
|
24076
24216
|
function StatusTiles2({
|
|
24077
24217
|
data,
|
|
24078
24218
|
tileWidth = 10,
|
|
@@ -24089,13 +24229,13 @@ var StatusTiles = (0, import_react123.forwardRef)(
|
|
|
24089
24229
|
onTileClick,
|
|
24090
24230
|
...rest
|
|
24091
24231
|
}, ref) {
|
|
24092
|
-
const reactId = (0,
|
|
24093
|
-
const visible = (0,
|
|
24232
|
+
const reactId = (0, import_react124.useId)();
|
|
24233
|
+
const visible = (0, import_react124.useMemo)(
|
|
24094
24234
|
() => max < data.length ? data.slice(data.length - max) : data,
|
|
24095
24235
|
[data, max]
|
|
24096
24236
|
);
|
|
24097
|
-
const [hoveredIdx, setHoveredIdx] = (0,
|
|
24098
|
-
const fire = (0,
|
|
24237
|
+
const [hoveredIdx, setHoveredIdx] = (0, import_react124.useState)(null);
|
|
24238
|
+
const fire = (0, import_react124.useCallback)(
|
|
24099
24239
|
(idx) => {
|
|
24100
24240
|
setHoveredIdx(idx);
|
|
24101
24241
|
if (idx === null) {
|
|
@@ -24107,7 +24247,7 @@ var StatusTiles = (0, import_react123.forwardRef)(
|
|
|
24107
24247
|
},
|
|
24108
24248
|
[onTileHover, visible]
|
|
24109
24249
|
);
|
|
24110
|
-
const handleKey = (0,
|
|
24250
|
+
const handleKey = (0, import_react124.useCallback)(
|
|
24111
24251
|
(e, idx) => {
|
|
24112
24252
|
if (!onTileClick) return;
|
|
24113
24253
|
if (e.key === "Enter" || e.key === " ") {
|
|
@@ -24117,7 +24257,7 @@ var StatusTiles = (0, import_react123.forwardRef)(
|
|
|
24117
24257
|
},
|
|
24118
24258
|
[visible, onTileClick]
|
|
24119
24259
|
);
|
|
24120
|
-
const resolvedAriaLabel = (0,
|
|
24260
|
+
const resolvedAriaLabel = (0, import_react124.useMemo)(() => {
|
|
24121
24261
|
if (ariaLabel) return ariaLabel;
|
|
24122
24262
|
const t = typeof title === "string" ? title : "Status";
|
|
24123
24263
|
const tally = {};
|
|
@@ -24191,7 +24331,7 @@ StatusTiles.displayName = "StatusTiles";
|
|
|
24191
24331
|
|
|
24192
24332
|
// src/components/Stepper/Stepper.tsx
|
|
24193
24333
|
var import_icons38 = require("@octaviaflow/icons");
|
|
24194
|
-
var
|
|
24334
|
+
var import_react125 = require("react");
|
|
24195
24335
|
var import_jsx_runtime107 = require("react/jsx-runtime");
|
|
24196
24336
|
function deriveStatus(step, index, active) {
|
|
24197
24337
|
if (step.status) return step.status;
|
|
@@ -24199,7 +24339,7 @@ function deriveStatus(step, index, active) {
|
|
|
24199
24339
|
if (index === active) return "active";
|
|
24200
24340
|
return "pending";
|
|
24201
24341
|
}
|
|
24202
|
-
var Stepper = (0,
|
|
24342
|
+
var Stepper = (0, import_react125.forwardRef)(
|
|
24203
24343
|
function Stepper2({
|
|
24204
24344
|
steps,
|
|
24205
24345
|
active = 0,
|
|
@@ -24213,7 +24353,7 @@ var Stepper = (0, import_react124.forwardRef)(
|
|
|
24213
24353
|
className,
|
|
24214
24354
|
...rest
|
|
24215
24355
|
}, ref) {
|
|
24216
|
-
const reactId = (0,
|
|
24356
|
+
const reactId = (0, import_react125.useId)();
|
|
24217
24357
|
const baseId = providedId ?? `ods-stepper-${reactId}`;
|
|
24218
24358
|
const activeIndex = active ?? defaultActive ?? 0;
|
|
24219
24359
|
const isInteractive = Boolean(onStepChange) && !disabled;
|
|
@@ -24365,7 +24505,7 @@ Stepper.displayName = "Stepper";
|
|
|
24365
24505
|
|
|
24366
24506
|
// src/components/Sankey/Sankey.tsx
|
|
24367
24507
|
var import_framer_motion33 = require("framer-motion");
|
|
24368
|
-
var
|
|
24508
|
+
var import_react126 = require("react");
|
|
24369
24509
|
var import_jsx_runtime108 = require("react/jsx-runtime");
|
|
24370
24510
|
var defaultFormat7 = (n) => {
|
|
24371
24511
|
if (Math.abs(n) >= 1e6) return `${(n / 1e6).toFixed(1)}M`;
|
|
@@ -24405,7 +24545,7 @@ function assignColumns(nodes, links) {
|
|
|
24405
24545
|
}
|
|
24406
24546
|
return cols;
|
|
24407
24547
|
}
|
|
24408
|
-
var Sankey = (0,
|
|
24548
|
+
var Sankey = (0, import_react126.forwardRef)(function Sankey2({
|
|
24409
24549
|
nodes,
|
|
24410
24550
|
links,
|
|
24411
24551
|
width = 720,
|
|
@@ -24427,13 +24567,13 @@ var Sankey = (0, import_react125.forwardRef)(function Sankey2({
|
|
|
24427
24567
|
onLinkClick,
|
|
24428
24568
|
...rest
|
|
24429
24569
|
}, ref) {
|
|
24430
|
-
const reactId = (0,
|
|
24431
|
-
const columnMap = (0,
|
|
24570
|
+
const reactId = (0, import_react126.useId)();
|
|
24571
|
+
const columnMap = (0, import_react126.useMemo)(
|
|
24432
24572
|
() => assignColumns(nodes, links),
|
|
24433
24573
|
[nodes, links]
|
|
24434
24574
|
);
|
|
24435
24575
|
const columnCount = Math.max(0, ...Array.from(columnMap.values())) + 1;
|
|
24436
|
-
const flows = (0,
|
|
24576
|
+
const flows = (0, import_react126.useMemo)(() => {
|
|
24437
24577
|
const inFlow = /* @__PURE__ */ new Map();
|
|
24438
24578
|
const outFlow = /* @__PURE__ */ new Map();
|
|
24439
24579
|
for (const n of nodes) {
|
|
@@ -24446,7 +24586,7 @@ var Sankey = (0, import_react125.forwardRef)(function Sankey2({
|
|
|
24446
24586
|
}
|
|
24447
24587
|
return { inFlow, outFlow };
|
|
24448
24588
|
}, [nodes, links]);
|
|
24449
|
-
const columns = (0,
|
|
24589
|
+
const columns = (0, import_react126.useMemo)(() => {
|
|
24450
24590
|
const grouped = Array.from(
|
|
24451
24591
|
{ length: columnCount },
|
|
24452
24592
|
() => []
|
|
@@ -24457,7 +24597,7 @@ var Sankey = (0, import_react125.forwardRef)(function Sankey2({
|
|
|
24457
24597
|
}
|
|
24458
24598
|
return grouped;
|
|
24459
24599
|
}, [nodes, columnMap, columnCount]);
|
|
24460
|
-
const columnFlows = (0,
|
|
24600
|
+
const columnFlows = (0, import_react126.useMemo)(
|
|
24461
24601
|
() => columns.map(
|
|
24462
24602
|
(col) => col.reduce((s, n) => {
|
|
24463
24603
|
const f = Math.max(
|
|
@@ -24471,11 +24611,11 @@ var Sankey = (0, import_react125.forwardRef)(function Sankey2({
|
|
|
24471
24611
|
);
|
|
24472
24612
|
const maxColumnFlow = Math.max(1, ...columnFlows);
|
|
24473
24613
|
const colAvail = (col) => height - Math.max(0, col.length - 1) * nodeGap;
|
|
24474
|
-
const scale = (0,
|
|
24614
|
+
const scale = (0, import_react126.useMemo)(() => {
|
|
24475
24615
|
const avail = Math.min(...columns.map(colAvail));
|
|
24476
24616
|
return avail / maxColumnFlow;
|
|
24477
24617
|
}, [columns, height, nodeGap, maxColumnFlow]);
|
|
24478
|
-
const layoutNodes = (0,
|
|
24618
|
+
const layoutNodes = (0, import_react126.useMemo)(() => {
|
|
24479
24619
|
const m = /* @__PURE__ */ new Map();
|
|
24480
24620
|
const colX = (c) => {
|
|
24481
24621
|
if (columnCount <= 1) return 0;
|
|
@@ -24516,7 +24656,7 @@ var Sankey = (0, import_react125.forwardRef)(function Sankey2({
|
|
|
24516
24656
|
}
|
|
24517
24657
|
return m;
|
|
24518
24658
|
}, [columns, columnCount, width, nodeWidth, flows, scale, height, nodeGap]);
|
|
24519
|
-
const layoutLinks = (0,
|
|
24659
|
+
const layoutLinks = (0, import_react126.useMemo)(() => {
|
|
24520
24660
|
const sourceOffset = /* @__PURE__ */ new Map();
|
|
24521
24661
|
const targetOffset = /* @__PURE__ */ new Map();
|
|
24522
24662
|
for (const n of nodes) {
|
|
@@ -24559,23 +24699,23 @@ var Sankey = (0, import_react125.forwardRef)(function Sankey2({
|
|
|
24559
24699
|
}
|
|
24560
24700
|
return out;
|
|
24561
24701
|
}, [links, layoutNodes, nodeWidth, scale]);
|
|
24562
|
-
const [hoveredNode, setHoveredNode] = (0,
|
|
24563
|
-
const [hoveredLink, setHoveredLink] = (0,
|
|
24564
|
-
const fireNode = (0,
|
|
24702
|
+
const [hoveredNode, setHoveredNode] = (0, import_react126.useState)(null);
|
|
24703
|
+
const [hoveredLink, setHoveredLink] = (0, import_react126.useState)(null);
|
|
24704
|
+
const fireNode = (0, import_react126.useCallback)(
|
|
24565
24705
|
(n) => {
|
|
24566
24706
|
setHoveredNode(n);
|
|
24567
24707
|
onNodeHover?.(n);
|
|
24568
24708
|
},
|
|
24569
24709
|
[onNodeHover]
|
|
24570
24710
|
);
|
|
24571
|
-
const fireLink = (0,
|
|
24711
|
+
const fireLink = (0, import_react126.useCallback)(
|
|
24572
24712
|
(l) => {
|
|
24573
24713
|
setHoveredLink(l);
|
|
24574
24714
|
onLinkHover?.(l);
|
|
24575
24715
|
},
|
|
24576
24716
|
[onLinkHover]
|
|
24577
24717
|
);
|
|
24578
|
-
const handleNodeKey = (0,
|
|
24718
|
+
const handleNodeKey = (0, import_react126.useCallback)(
|
|
24579
24719
|
(e, n) => {
|
|
24580
24720
|
if (!onNodeClick) return;
|
|
24581
24721
|
if (e.key === "Enter" || e.key === " ") {
|
|
@@ -24585,7 +24725,7 @@ var Sankey = (0, import_react125.forwardRef)(function Sankey2({
|
|
|
24585
24725
|
},
|
|
24586
24726
|
[onNodeClick]
|
|
24587
24727
|
);
|
|
24588
|
-
const resolvedAriaLabel = (0,
|
|
24728
|
+
const resolvedAriaLabel = (0, import_react126.useMemo)(() => {
|
|
24589
24729
|
if (ariaLabel) return ariaLabel;
|
|
24590
24730
|
const t = typeof title === "string" ? title : "Sankey";
|
|
24591
24731
|
return `${t} \u2014 ${nodes.length} nodes, ${links.length} flows`;
|
|
@@ -24718,10 +24858,10 @@ var Sankey = (0, import_react125.forwardRef)(function Sankey2({
|
|
|
24718
24858
|
Sankey.displayName = "Sankey";
|
|
24719
24859
|
|
|
24720
24860
|
// src/components/Switch/Switch.tsx
|
|
24721
|
-
var
|
|
24861
|
+
var import_react127 = require("react");
|
|
24722
24862
|
var import_react_aria12 = require("react-aria");
|
|
24723
24863
|
var import_jsx_runtime109 = require("react/jsx-runtime");
|
|
24724
|
-
var Switch = (0,
|
|
24864
|
+
var Switch = (0, import_react127.forwardRef)(function Switch2({
|
|
24725
24865
|
checked,
|
|
24726
24866
|
defaultChecked,
|
|
24727
24867
|
onChange,
|
|
@@ -24732,7 +24872,7 @@ var Switch = (0, import_react126.forwardRef)(function Switch2({
|
|
|
24732
24872
|
className,
|
|
24733
24873
|
...props
|
|
24734
24874
|
}, forwardedRef) {
|
|
24735
|
-
const innerRef = (0,
|
|
24875
|
+
const innerRef = (0, import_react127.useRef)(null);
|
|
24736
24876
|
const setRef = (node) => {
|
|
24737
24877
|
innerRef.current = node;
|
|
24738
24878
|
if (typeof forwardedRef === "function") forwardedRef(node);
|
|
@@ -24808,7 +24948,7 @@ var Switch = (0, import_react126.forwardRef)(function Switch2({
|
|
|
24808
24948
|
Switch.displayName = "Switch";
|
|
24809
24949
|
|
|
24810
24950
|
// src/components/Table/Table.tsx
|
|
24811
|
-
var
|
|
24951
|
+
var import_react128 = require("react");
|
|
24812
24952
|
var import_icons39 = require("@octaviaflow/icons");
|
|
24813
24953
|
var import_jsx_runtime110 = require("react/jsx-runtime");
|
|
24814
24954
|
function TableInner({
|
|
@@ -24828,7 +24968,7 @@ function TableInner({
|
|
|
24828
24968
|
"aria-label": ariaLabel = "Data table",
|
|
24829
24969
|
...rest
|
|
24830
24970
|
}, ref) {
|
|
24831
|
-
const handleSort = (0,
|
|
24971
|
+
const handleSort = (0, import_react128.useCallback)(
|
|
24832
24972
|
(key) => {
|
|
24833
24973
|
if (!onSort) return;
|
|
24834
24974
|
const col = columns.find((c) => c.key === key);
|
|
@@ -24838,7 +24978,7 @@ function TableInner({
|
|
|
24838
24978
|
},
|
|
24839
24979
|
[columns, onSort, sortKey, sortDirection]
|
|
24840
24980
|
);
|
|
24841
|
-
const handleSelectAll = (0,
|
|
24981
|
+
const handleSelectAll = (0, import_react128.useCallback)(() => {
|
|
24842
24982
|
if (!onSelectionChange) return;
|
|
24843
24983
|
const allSelected = selectedRows?.size === data.length;
|
|
24844
24984
|
if (allSelected) {
|
|
@@ -24847,7 +24987,7 @@ function TableInner({
|
|
|
24847
24987
|
onSelectionChange(new Set(data.map((_, i) => i)));
|
|
24848
24988
|
}
|
|
24849
24989
|
}, [data, onSelectionChange, selectedRows]);
|
|
24850
|
-
const handleSelectRow = (0,
|
|
24990
|
+
const handleSelectRow = (0, import_react128.useCallback)(
|
|
24851
24991
|
(index) => {
|
|
24852
24992
|
if (!onSelectionChange || !selectedRows) return;
|
|
24853
24993
|
const next = new Set(selectedRows);
|
|
@@ -24930,7 +25070,7 @@ function TableInner({
|
|
|
24930
25070
|
}
|
|
24931
25071
|
);
|
|
24932
25072
|
}
|
|
24933
|
-
var Table = (0,
|
|
25073
|
+
var Table = (0, import_react128.forwardRef)(TableInner);
|
|
24934
25074
|
function TableRow({
|
|
24935
25075
|
row,
|
|
24936
25076
|
rowIndex,
|
|
@@ -24943,7 +25083,7 @@ function TableRow({
|
|
|
24943
25083
|
totalCols
|
|
24944
25084
|
}) {
|
|
24945
25085
|
const isSelected = selectedRows?.has(rowIndex) ?? false;
|
|
24946
|
-
const [expanded, setExpanded] = (0,
|
|
25086
|
+
const [expanded, setExpanded] = (0, import_react128.useState)(false);
|
|
24947
25087
|
return /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)(import_jsx_runtime110.Fragment, { children: [
|
|
24948
25088
|
/* @__PURE__ */ (0, import_jsx_runtime110.jsxs)(
|
|
24949
25089
|
"tr",
|
|
@@ -24981,7 +25121,7 @@ function TableRow({
|
|
|
24981
25121
|
|
|
24982
25122
|
// src/components/Tabs/Tabs.tsx
|
|
24983
25123
|
var import_framer_motion34 = require("framer-motion");
|
|
24984
|
-
var
|
|
25124
|
+
var import_react129 = require("react");
|
|
24985
25125
|
var import_react_aria13 = require("react-aria");
|
|
24986
25126
|
var import_jsx_runtime111 = require("react/jsx-runtime");
|
|
24987
25127
|
function TabButton({
|
|
@@ -24989,7 +25129,7 @@ function TabButton({
|
|
|
24989
25129
|
state,
|
|
24990
25130
|
indicatorLayoutId
|
|
24991
25131
|
}) {
|
|
24992
|
-
const ref = (0,
|
|
25132
|
+
const ref = (0, import_react129.useRef)(null);
|
|
24993
25133
|
const { tabProps } = (0, import_react_aria13.useTab)({ key: item.key }, state, ref);
|
|
24994
25134
|
const isSelected = state.selectedKey === item.key;
|
|
24995
25135
|
const isDisabled = state.disabledKeys.has(item.key);
|
|
@@ -25019,7 +25159,7 @@ function TabButton({
|
|
|
25019
25159
|
);
|
|
25020
25160
|
}
|
|
25021
25161
|
function TabPanelContent({ state, panelContent, ...props }) {
|
|
25022
|
-
const ref = (0,
|
|
25162
|
+
const ref = (0, import_react129.useRef)(null);
|
|
25023
25163
|
const { tabPanelProps } = (0, import_react_aria13.useTabPanel)(props, state, ref);
|
|
25024
25164
|
return /* @__PURE__ */ (0, import_jsx_runtime111.jsx)("div", { ...tabPanelProps, ref, className: "ods-tabs__panel", children: panelContent });
|
|
25025
25165
|
}
|
|
@@ -25033,16 +25173,16 @@ function Tabs({
|
|
|
25033
25173
|
orientation = "horizontal",
|
|
25034
25174
|
className
|
|
25035
25175
|
}) {
|
|
25036
|
-
const reactId = (0,
|
|
25176
|
+
const reactId = (0, import_react129.useId)();
|
|
25037
25177
|
const indicatorLayoutId = `ods-tabs-indicator-${reactId}`;
|
|
25038
|
-
const [internalValue, setInternalValue] = (0,
|
|
25178
|
+
const [internalValue, setInternalValue] = (0, import_react129.useState)(defaultValue || items[0]?.value);
|
|
25039
25179
|
const selectedKey = value ?? internalValue;
|
|
25040
25180
|
const handleSelectionChange = (key) => {
|
|
25041
25181
|
const keyStr = String(key);
|
|
25042
25182
|
if (!value) setInternalValue(keyStr);
|
|
25043
25183
|
onChange?.(keyStr);
|
|
25044
25184
|
};
|
|
25045
|
-
const panelContentMap = (0,
|
|
25185
|
+
const panelContentMap = (0, import_react129.useMemo)(() => {
|
|
25046
25186
|
const map = /* @__PURE__ */ new Map();
|
|
25047
25187
|
items.forEach((item) => {
|
|
25048
25188
|
map.set(item.value, item.children);
|
|
@@ -25059,12 +25199,12 @@ function Tabs({
|
|
|
25059
25199
|
disabledKeys: items.filter((i) => i.disabled).map((i) => i.value)
|
|
25060
25200
|
};
|
|
25061
25201
|
const state = $caeb030f09a278a1$export$4ba071daf4e486(stateProps);
|
|
25062
|
-
const ref = (0,
|
|
25202
|
+
const ref = (0, import_react129.useRef)(null);
|
|
25063
25203
|
const { tabListProps } = (0, import_react_aria13.useTabList)({ ...stateProps, orientation }, state, ref);
|
|
25064
|
-
const scrollContainerRef = (0,
|
|
25065
|
-
const [canScrollLeft, setCanScrollLeft] = (0,
|
|
25066
|
-
const [canScrollRight, setCanScrollRight] = (0,
|
|
25067
|
-
const measureOverflow = (0,
|
|
25204
|
+
const scrollContainerRef = (0, import_react129.useRef)(null);
|
|
25205
|
+
const [canScrollLeft, setCanScrollLeft] = (0, import_react129.useState)(false);
|
|
25206
|
+
const [canScrollRight, setCanScrollRight] = (0, import_react129.useState)(false);
|
|
25207
|
+
const measureOverflow = (0, import_react129.useCallback)(() => {
|
|
25068
25208
|
const el = scrollContainerRef.current;
|
|
25069
25209
|
if (!el || orientation !== "horizontal") {
|
|
25070
25210
|
setCanScrollLeft(false);
|
|
@@ -25075,7 +25215,7 @@ function Tabs({
|
|
|
25075
25215
|
setCanScrollLeft(el.scrollLeft > SCROLL_EDGE_EPSILON);
|
|
25076
25216
|
setCanScrollRight(el.scrollLeft < max - SCROLL_EDGE_EPSILON);
|
|
25077
25217
|
}, [orientation]);
|
|
25078
|
-
(0,
|
|
25218
|
+
(0, import_react129.useEffect)(() => {
|
|
25079
25219
|
measureOverflow();
|
|
25080
25220
|
const el = scrollContainerRef.current;
|
|
25081
25221
|
if (!el || typeof ResizeObserver === "undefined") return;
|
|
@@ -25155,10 +25295,10 @@ function ChevronSvg({ dir }) {
|
|
|
25155
25295
|
}
|
|
25156
25296
|
|
|
25157
25297
|
// src/components/TagsInput/TagsInput.tsx
|
|
25158
|
-
var
|
|
25298
|
+
var import_react130 = require("react");
|
|
25159
25299
|
var import_icons40 = require("@octaviaflow/icons");
|
|
25160
25300
|
var import_jsx_runtime112 = require("react/jsx-runtime");
|
|
25161
|
-
var TagsInput = (0,
|
|
25301
|
+
var TagsInput = (0, import_react130.forwardRef)(
|
|
25162
25302
|
function TagsInput2({
|
|
25163
25303
|
label,
|
|
25164
25304
|
value,
|
|
@@ -25179,8 +25319,8 @@ var TagsInput = (0, import_react129.forwardRef)(
|
|
|
25179
25319
|
"aria-describedby": consumerDescribedBy,
|
|
25180
25320
|
...rest
|
|
25181
25321
|
}, ref) {
|
|
25182
|
-
const [draft, setDraft] = (0,
|
|
25183
|
-
const reactId = (0,
|
|
25322
|
+
const [draft, setDraft] = (0, import_react130.useState)("");
|
|
25323
|
+
const reactId = (0, import_react130.useId)();
|
|
25184
25324
|
const inputId = providedId ?? `ods-tags-${reactId}`;
|
|
25185
25325
|
const labelId = label ? `${inputId}-label` : void 0;
|
|
25186
25326
|
const hintId = error || helperText ? `${inputId}-hint` : void 0;
|
|
@@ -25280,9 +25420,9 @@ var TagsInput = (0, import_react129.forwardRef)(
|
|
|
25280
25420
|
TagsInput.displayName = "TagsInput";
|
|
25281
25421
|
|
|
25282
25422
|
// src/components/TemplateCard/TemplateCard.tsx
|
|
25283
|
-
var
|
|
25423
|
+
var import_react131 = require("react");
|
|
25284
25424
|
var import_jsx_runtime113 = require("react/jsx-runtime");
|
|
25285
|
-
var TemplateCard = (0,
|
|
25425
|
+
var TemplateCard = (0, import_react131.forwardRef)(
|
|
25286
25426
|
function TemplateCard2({
|
|
25287
25427
|
name,
|
|
25288
25428
|
nameAs = "h3",
|
|
@@ -25310,7 +25450,7 @@ var TemplateCard = (0, import_react130.forwardRef)(
|
|
|
25310
25450
|
className,
|
|
25311
25451
|
...rest
|
|
25312
25452
|
}, ref) {
|
|
25313
|
-
const reactId = (0,
|
|
25453
|
+
const reactId = (0, import_react131.useId)();
|
|
25314
25454
|
const baseId = providedId ?? `ods-template-card-${reactId}`;
|
|
25315
25455
|
const nameId = `${baseId}-name`;
|
|
25316
25456
|
const descId = description ? `${baseId}-desc` : void 0;
|
|
@@ -25501,13 +25641,13 @@ TemplateCard.displayName = "TemplateCard";
|
|
|
25501
25641
|
|
|
25502
25642
|
// src/components/TestimonialCard/TestimonialCard.tsx
|
|
25503
25643
|
var import_icons41 = require("@octaviaflow/icons");
|
|
25504
|
-
var
|
|
25644
|
+
var import_react132 = require("react");
|
|
25505
25645
|
var import_jsx_runtime114 = require("react/jsx-runtime");
|
|
25506
25646
|
function isAuthorObject(v) {
|
|
25507
25647
|
return typeof v === "object" && v !== null && !("type" in v) && // exclude React elements
|
|
25508
25648
|
"name" in v;
|
|
25509
25649
|
}
|
|
25510
|
-
var TestimonialCard = (0,
|
|
25650
|
+
var TestimonialCard = (0, import_react132.forwardRef)(function TestimonialCard2({
|
|
25511
25651
|
quote,
|
|
25512
25652
|
author,
|
|
25513
25653
|
role: legacyRole,
|
|
@@ -25521,7 +25661,7 @@ var TestimonialCard = (0, import_react131.forwardRef)(function TestimonialCard2(
|
|
|
25521
25661
|
className,
|
|
25522
25662
|
...rest
|
|
25523
25663
|
}, ref) {
|
|
25524
|
-
const reactId = (0,
|
|
25664
|
+
const reactId = (0, import_react132.useId)();
|
|
25525
25665
|
const baseId = providedId ?? `ods-testimonial-${reactId}`;
|
|
25526
25666
|
const quoteId = `${baseId}-quote`;
|
|
25527
25667
|
const authorId = `${baseId}-author`;
|
|
@@ -25615,13 +25755,13 @@ var TestimonialCard = (0, import_react131.forwardRef)(function TestimonialCard2(
|
|
|
25615
25755
|
TestimonialCard.displayName = "TestimonialCard";
|
|
25616
25756
|
|
|
25617
25757
|
// src/components/Textarea/Textarea.tsx
|
|
25618
|
-
var
|
|
25758
|
+
var import_react136 = require("react");
|
|
25619
25759
|
var import_react_aria14 = require("react-aria");
|
|
25620
25760
|
var import_react_dom15 = require("react-dom");
|
|
25621
25761
|
var import_icons43 = require("@octaviaflow/icons");
|
|
25622
25762
|
|
|
25623
25763
|
// src/hooks/useTextareaCommands.ts
|
|
25624
|
-
var
|
|
25764
|
+
var import_react133 = require("react");
|
|
25625
25765
|
function findOpenTrigger(value, caret, trigger) {
|
|
25626
25766
|
let i = caret - 1;
|
|
25627
25767
|
while (i >= 0) {
|
|
@@ -25699,15 +25839,15 @@ function useTextareaCommands({
|
|
|
25699
25839
|
openOnEmptyTrigger = true,
|
|
25700
25840
|
maxItems = 8
|
|
25701
25841
|
}) {
|
|
25702
|
-
const [isOpen, setIsOpen] = (0,
|
|
25703
|
-
const [query, setQuery] = (0,
|
|
25704
|
-
const [activeIndex, setActiveIndex] = (0,
|
|
25705
|
-
const [triggerIndex, setTriggerIndex] = (0,
|
|
25706
|
-
const [caretRect, setCaretRect] = (0,
|
|
25707
|
-
const dismissedAtRef = (0,
|
|
25842
|
+
const [isOpen, setIsOpen] = (0, import_react133.useState)(false);
|
|
25843
|
+
const [query, setQuery] = (0, import_react133.useState)("");
|
|
25844
|
+
const [activeIndex, setActiveIndex] = (0, import_react133.useState)(0);
|
|
25845
|
+
const [triggerIndex, setTriggerIndex] = (0, import_react133.useState)(null);
|
|
25846
|
+
const [caretRect, setCaretRect] = (0, import_react133.useState)(null);
|
|
25847
|
+
const dismissedAtRef = (0, import_react133.useRef)(
|
|
25708
25848
|
null
|
|
25709
25849
|
);
|
|
25710
|
-
const items = (0,
|
|
25850
|
+
const items = (0, import_react133.useMemo)(() => {
|
|
25711
25851
|
const q2 = query.trim().toLowerCase();
|
|
25712
25852
|
if (!q2) return commands.slice(0, maxItems);
|
|
25713
25853
|
return commands.filter((c) => {
|
|
@@ -25720,7 +25860,7 @@ function useTextareaCommands({
|
|
|
25720
25860
|
return hay.includes(q2);
|
|
25721
25861
|
}).slice(0, maxItems);
|
|
25722
25862
|
}, [commands, query, maxItems]);
|
|
25723
|
-
(0,
|
|
25863
|
+
(0, import_react133.useEffect)(() => {
|
|
25724
25864
|
const ta = textareaRef.current;
|
|
25725
25865
|
if (!ta) return;
|
|
25726
25866
|
const caret = ta.selectionStart ?? 0;
|
|
@@ -25743,7 +25883,7 @@ function useTextareaCommands({
|
|
|
25743
25883
|
setCaretRect(getCaretRect(ta, caret));
|
|
25744
25884
|
}
|
|
25745
25885
|
}, [value, trigger, openOnEmptyTrigger, isOpen, textareaRef]);
|
|
25746
|
-
const commit = (0,
|
|
25886
|
+
const commit = (0, import_react133.useCallback)(
|
|
25747
25887
|
(cmd) => {
|
|
25748
25888
|
const ta = textareaRef.current;
|
|
25749
25889
|
if (!ta || triggerIndex == null) return;
|
|
@@ -25767,7 +25907,7 @@ function useTextareaCommands({
|
|
|
25767
25907
|
},
|
|
25768
25908
|
[textareaRef, triggerIndex, query, value, onChange]
|
|
25769
25909
|
);
|
|
25770
|
-
const dismiss = (0,
|
|
25910
|
+
const dismiss = (0, import_react133.useCallback)(() => {
|
|
25771
25911
|
const ta = textareaRef.current;
|
|
25772
25912
|
dismissedAtRef.current = {
|
|
25773
25913
|
value,
|
|
@@ -25776,7 +25916,7 @@ function useTextareaCommands({
|
|
|
25776
25916
|
setIsOpen(false);
|
|
25777
25917
|
setTriggerIndex(null);
|
|
25778
25918
|
}, [textareaRef, value]);
|
|
25779
|
-
const onKeyDown = (0,
|
|
25919
|
+
const onKeyDown = (0, import_react133.useCallback)(
|
|
25780
25920
|
(e) => {
|
|
25781
25921
|
if (!isOpen) return false;
|
|
25782
25922
|
if (e.key === "ArrowDown") {
|
|
@@ -25819,7 +25959,7 @@ function useTextareaCommands({
|
|
|
25819
25959
|
}
|
|
25820
25960
|
|
|
25821
25961
|
// src/hooks/useTextareaSelection.ts
|
|
25822
|
-
var
|
|
25962
|
+
var import_react134 = require("react");
|
|
25823
25963
|
function getSelectionRect(textarea, start, end) {
|
|
25824
25964
|
if (typeof document === "undefined") return null;
|
|
25825
25965
|
if (start === end) return null;
|
|
@@ -25881,10 +26021,10 @@ function useTextareaSelection({
|
|
|
25881
26021
|
value,
|
|
25882
26022
|
onChange
|
|
25883
26023
|
}) {
|
|
25884
|
-
const [start, setStart] = (0,
|
|
25885
|
-
const [end, setEnd] = (0,
|
|
25886
|
-
const [rect, setRect] = (0,
|
|
25887
|
-
(0,
|
|
26024
|
+
const [start, setStart] = (0, import_react134.useState)(0);
|
|
26025
|
+
const [end, setEnd] = (0, import_react134.useState)(0);
|
|
26026
|
+
const [rect, setRect] = (0, import_react134.useState)(null);
|
|
26027
|
+
(0, import_react134.useEffect)(() => {
|
|
25888
26028
|
if (typeof document === "undefined") return;
|
|
25889
26029
|
const handler = () => {
|
|
25890
26030
|
const ta = textareaRef.current;
|
|
@@ -25905,7 +26045,7 @@ function useTextareaSelection({
|
|
|
25905
26045
|
}, [textareaRef]);
|
|
25906
26046
|
const active = start !== end;
|
|
25907
26047
|
const text = active ? value.slice(start, end) : "";
|
|
25908
|
-
const writeToClipboard = (0,
|
|
26048
|
+
const writeToClipboard = (0, import_react134.useCallback)(
|
|
25909
26049
|
async (str) => {
|
|
25910
26050
|
try {
|
|
25911
26051
|
if (typeof navigator !== "undefined" && navigator.clipboard?.writeText) {
|
|
@@ -25930,11 +26070,11 @@ function useTextareaSelection({
|
|
|
25930
26070
|
},
|
|
25931
26071
|
[]
|
|
25932
26072
|
);
|
|
25933
|
-
const copy = (0,
|
|
26073
|
+
const copy = (0, import_react134.useCallback)(async () => {
|
|
25934
26074
|
if (!active) return false;
|
|
25935
26075
|
return writeToClipboard(text);
|
|
25936
26076
|
}, [active, text, writeToClipboard]);
|
|
25937
|
-
const replace = (0,
|
|
26077
|
+
const replace = (0, import_react134.useCallback)(
|
|
25938
26078
|
(str) => {
|
|
25939
26079
|
const ta = textareaRef.current;
|
|
25940
26080
|
if (!ta) return;
|
|
@@ -25948,13 +26088,13 @@ function useTextareaSelection({
|
|
|
25948
26088
|
},
|
|
25949
26089
|
[textareaRef, value, start, end, onChange]
|
|
25950
26090
|
);
|
|
25951
|
-
const cut = (0,
|
|
26091
|
+
const cut = (0, import_react134.useCallback)(async () => {
|
|
25952
26092
|
if (!active) return false;
|
|
25953
26093
|
const ok = await writeToClipboard(text);
|
|
25954
26094
|
if (ok) replace("");
|
|
25955
26095
|
return ok;
|
|
25956
26096
|
}, [active, text, writeToClipboard, replace]);
|
|
25957
|
-
const wrap = (0,
|
|
26097
|
+
const wrap = (0, import_react134.useCallback)(
|
|
25958
26098
|
(open, close) => {
|
|
25959
26099
|
const ta = textareaRef.current;
|
|
25960
26100
|
if (!ta) return;
|
|
@@ -25988,7 +26128,7 @@ function useTextareaSelection({
|
|
|
25988
26128
|
|
|
25989
26129
|
// src/hooks/useTextareaTools.tsx
|
|
25990
26130
|
var import_icons42 = require("@octaviaflow/icons");
|
|
25991
|
-
var
|
|
26131
|
+
var import_react135 = require("react");
|
|
25992
26132
|
var import_jsx_runtime115 = require("react/jsx-runtime");
|
|
25993
26133
|
function useTextareaTools({
|
|
25994
26134
|
textareaRef,
|
|
@@ -25996,9 +26136,9 @@ function useTextareaTools({
|
|
|
25996
26136
|
onChange,
|
|
25997
26137
|
tools
|
|
25998
26138
|
}) {
|
|
25999
|
-
const valueRef = (0,
|
|
26139
|
+
const valueRef = (0, import_react135.useRef)(value);
|
|
26000
26140
|
valueRef.current = value;
|
|
26001
|
-
const helpers = (0,
|
|
26141
|
+
const helpers = (0, import_react135.useMemo)(() => {
|
|
26002
26142
|
const getTa = () => textareaRef.current;
|
|
26003
26143
|
const getSelection = () => {
|
|
26004
26144
|
const ta = getTa();
|
|
@@ -26096,11 +26236,11 @@ function useTextareaTools({
|
|
|
26096
26236
|
getTextarea: getTa
|
|
26097
26237
|
};
|
|
26098
26238
|
}, [textareaRef, onChange]);
|
|
26099
|
-
const visibleTools = (0,
|
|
26239
|
+
const visibleTools = (0, import_react135.useMemo)(
|
|
26100
26240
|
() => tools.filter((t) => t.isVisible ? t.isVisible(helpers) : true),
|
|
26101
26241
|
[tools, helpers]
|
|
26102
26242
|
);
|
|
26103
|
-
const runTool = (0,
|
|
26243
|
+
const runTool = (0, import_react135.useCallback)(
|
|
26104
26244
|
async (id) => {
|
|
26105
26245
|
const tool = tools.find((t) => t.id === id);
|
|
26106
26246
|
if (!tool || tool.kind === "divider") return;
|
|
@@ -26206,7 +26346,7 @@ var textareaTools = {
|
|
|
26206
26346
|
|
|
26207
26347
|
// src/components/Textarea/Textarea.tsx
|
|
26208
26348
|
var import_jsx_runtime116 = require("react/jsx-runtime");
|
|
26209
|
-
var Textarea = (0,
|
|
26349
|
+
var Textarea = (0, import_react136.forwardRef)(
|
|
26210
26350
|
function Textarea2({
|
|
26211
26351
|
label,
|
|
26212
26352
|
error = false,
|
|
@@ -26238,17 +26378,17 @@ var Textarea = (0, import_react135.forwardRef)(
|
|
|
26238
26378
|
toolbarPosition = "top",
|
|
26239
26379
|
...props
|
|
26240
26380
|
}, forwardedRef) {
|
|
26241
|
-
const innerRef = (0,
|
|
26381
|
+
const innerRef = (0, import_react136.useRef)(null);
|
|
26242
26382
|
const setRef = (node) => {
|
|
26243
26383
|
innerRef.current = node;
|
|
26244
26384
|
if (typeof forwardedRef === "function") forwardedRef(node);
|
|
26245
26385
|
else if (forwardedRef)
|
|
26246
26386
|
forwardedRef.current = node;
|
|
26247
26387
|
};
|
|
26248
|
-
const reactId = (0,
|
|
26388
|
+
const reactId = (0, import_react136.useId)();
|
|
26249
26389
|
const baseId = providedId ?? `ods-textarea-${reactId}`;
|
|
26250
26390
|
const hintId = error && errorMessage || helperText ? `${baseId}-hint` : void 0;
|
|
26251
|
-
const [charCount, setCharCount] = (0,
|
|
26391
|
+
const [charCount, setCharCount] = (0, import_react136.useState)(
|
|
26252
26392
|
() => String(value ?? defaultValue ?? "").length
|
|
26253
26393
|
);
|
|
26254
26394
|
const ariaNameProps = resolveAccessibleName({
|
|
@@ -26278,10 +26418,10 @@ var Textarea = (0, import_react135.forwardRef)(
|
|
|
26278
26418
|
setCharCount(e.target.value.length);
|
|
26279
26419
|
onChange?.(e);
|
|
26280
26420
|
};
|
|
26281
|
-
const [liveValue, setLiveValue] = (0,
|
|
26421
|
+
const [liveValue, setLiveValue] = (0, import_react136.useState)(
|
|
26282
26422
|
String(value ?? defaultValue ?? "")
|
|
26283
26423
|
);
|
|
26284
|
-
(0,
|
|
26424
|
+
(0, import_react136.useEffect)(() => {
|
|
26285
26425
|
if (value != null) setLiveValue(String(value));
|
|
26286
26426
|
}, [value]);
|
|
26287
26427
|
const handleChangeWithMirror = (e) => {
|
|
@@ -26324,7 +26464,7 @@ var Textarea = (0, import_react135.forwardRef)(
|
|
|
26324
26464
|
}
|
|
26325
26465
|
props.onKeyDown?.(e);
|
|
26326
26466
|
};
|
|
26327
|
-
(0,
|
|
26467
|
+
(0, import_react136.useEffect)(() => {
|
|
26328
26468
|
if (!autoResize) return;
|
|
26329
26469
|
const el = innerRef.current;
|
|
26330
26470
|
if (!el) return;
|
|
@@ -26592,9 +26732,9 @@ function TextareaToolbar({
|
|
|
26592
26732
|
|
|
26593
26733
|
// src/components/Timeline/Timeline.tsx
|
|
26594
26734
|
var import_framer_motion35 = require("framer-motion");
|
|
26595
|
-
var
|
|
26735
|
+
var import_react137 = require("react");
|
|
26596
26736
|
var import_jsx_runtime117 = require("react/jsx-runtime");
|
|
26597
|
-
var Timeline = (0,
|
|
26737
|
+
var Timeline = (0, import_react137.forwardRef)(
|
|
26598
26738
|
function Timeline2({
|
|
26599
26739
|
items,
|
|
26600
26740
|
size = "md",
|
|
@@ -26660,7 +26800,7 @@ var Timeline = (0, import_react136.forwardRef)(
|
|
|
26660
26800
|
Timeline.displayName = "Timeline";
|
|
26661
26801
|
|
|
26662
26802
|
// src/components/TimePicker/TimePicker.tsx
|
|
26663
|
-
var
|
|
26803
|
+
var import_react138 = require("react");
|
|
26664
26804
|
var import_icons44 = require("@octaviaflow/icons");
|
|
26665
26805
|
var import_jsx_runtime118 = require("react/jsx-runtime");
|
|
26666
26806
|
var pad = (n) => n.toString().padStart(2, "0");
|
|
@@ -26675,7 +26815,7 @@ function clampSeg(seg, n, use24h) {
|
|
|
26675
26815
|
}
|
|
26676
26816
|
return Math.max(0, Math.min(59, n));
|
|
26677
26817
|
}
|
|
26678
|
-
var TimePicker = (0,
|
|
26818
|
+
var TimePicker = (0, import_react138.forwardRef)(
|
|
26679
26819
|
function TimePicker2({
|
|
26680
26820
|
label,
|
|
26681
26821
|
value,
|
|
@@ -26695,28 +26835,28 @@ var TimePicker = (0, import_react137.forwardRef)(
|
|
|
26695
26835
|
"aria-describedby": consumerDescribedBy,
|
|
26696
26836
|
...rest
|
|
26697
26837
|
}, forwardedRef) {
|
|
26698
|
-
const reactId = (0,
|
|
26838
|
+
const reactId = (0, import_react138.useId)();
|
|
26699
26839
|
const baseId = providedId ?? `ods-timepicker-${reactId}`;
|
|
26700
26840
|
const labelId = label ? `${baseId}-label` : void 0;
|
|
26701
26841
|
const hintId = error || helperText ? `${baseId}-hint` : void 0;
|
|
26702
26842
|
const describedBy = [consumerDescribedBy, hintId].filter(Boolean).join(" ") || void 0;
|
|
26703
|
-
const [open, setOpen] = (0,
|
|
26704
|
-
const [activeSeg, setActiveSeg] = (0,
|
|
26843
|
+
const [open, setOpen] = (0, import_react138.useState)(false);
|
|
26844
|
+
const [activeSeg, setActiveSeg] = (0, import_react138.useState)(null);
|
|
26705
26845
|
const COMMIT_TIMEOUT_MS = 1500;
|
|
26706
|
-
const [draft, setDraft] = (0,
|
|
26846
|
+
const [draft, setDraft] = (0, import_react138.useState)(
|
|
26707
26847
|
null
|
|
26708
26848
|
);
|
|
26709
|
-
const draftRef = (0,
|
|
26710
|
-
const setDraftBoth = (0,
|
|
26849
|
+
const draftRef = (0, import_react138.useRef)(null);
|
|
26850
|
+
const setDraftBoth = (0, import_react138.useCallback)(
|
|
26711
26851
|
(next) => {
|
|
26712
26852
|
draftRef.current = next;
|
|
26713
26853
|
setDraft(next);
|
|
26714
26854
|
},
|
|
26715
26855
|
[]
|
|
26716
26856
|
);
|
|
26717
|
-
const commitTimerRef = (0,
|
|
26718
|
-
const wrapRef = (0,
|
|
26719
|
-
const valueRef = (0,
|
|
26857
|
+
const commitTimerRef = (0, import_react138.useRef)(null);
|
|
26858
|
+
const wrapRef = (0, import_react138.useRef)(null);
|
|
26859
|
+
const valueRef = (0, import_react138.useRef)(value);
|
|
26720
26860
|
valueRef.current = value;
|
|
26721
26861
|
const setWrapRef = (node) => {
|
|
26722
26862
|
wrapRef.current = node;
|
|
@@ -26724,11 +26864,11 @@ var TimePicker = (0, import_react137.forwardRef)(
|
|
|
26724
26864
|
else if (forwardedRef)
|
|
26725
26865
|
forwardedRef.current = node;
|
|
26726
26866
|
};
|
|
26727
|
-
const hoursRef = (0,
|
|
26728
|
-
const minutesRef = (0,
|
|
26729
|
-
const secondsRef = (0,
|
|
26867
|
+
const hoursRef = (0, import_react138.useRef)(null);
|
|
26868
|
+
const minutesRef = (0, import_react138.useRef)(null);
|
|
26869
|
+
const secondsRef = (0, import_react138.useRef)(null);
|
|
26730
26870
|
const refOf = (s) => s === "hours" ? hoursRef : s === "minutes" ? minutesRef : secondsRef;
|
|
26731
|
-
const commit = (0,
|
|
26871
|
+
const commit = (0, import_react138.useCallback)(
|
|
26732
26872
|
(seg, n) => {
|
|
26733
26873
|
const base = valueRef.current;
|
|
26734
26874
|
const next = { ...base, [seg]: clampSeg(seg, n, use24h) };
|
|
@@ -26760,13 +26900,13 @@ var TimePicker = (0, import_react137.forwardRef)(
|
|
|
26760
26900
|
valueRef.current = next;
|
|
26761
26901
|
onChange?.(next);
|
|
26762
26902
|
};
|
|
26763
|
-
const clearCommitTimer = (0,
|
|
26903
|
+
const clearCommitTimer = (0, import_react138.useCallback)(() => {
|
|
26764
26904
|
if (commitTimerRef.current != null) {
|
|
26765
26905
|
clearTimeout(commitTimerRef.current);
|
|
26766
26906
|
commitTimerRef.current = null;
|
|
26767
26907
|
}
|
|
26768
26908
|
}, []);
|
|
26769
|
-
const commitDraft = (0,
|
|
26909
|
+
const commitDraft = (0, import_react138.useCallback)(
|
|
26770
26910
|
(seg, digits) => {
|
|
26771
26911
|
clearCommitTimer();
|
|
26772
26912
|
const n = parseInt(digits || "0", 10);
|
|
@@ -26778,11 +26918,11 @@ var TimePicker = (0, import_react137.forwardRef)(
|
|
|
26778
26918
|
},
|
|
26779
26919
|
[clearCommitTimer, commit, use24h, setDraftBoth]
|
|
26780
26920
|
);
|
|
26781
|
-
const flushDraft = (0,
|
|
26921
|
+
const flushDraft = (0, import_react138.useCallback)(() => {
|
|
26782
26922
|
const d = draftRef.current;
|
|
26783
26923
|
if (d) commitDraft(d.seg, d.digits);
|
|
26784
26924
|
}, [commitDraft]);
|
|
26785
|
-
const focusSegment = (0,
|
|
26925
|
+
const focusSegment = (0, import_react138.useCallback)(
|
|
26786
26926
|
(seg) => {
|
|
26787
26927
|
const d = draftRef.current;
|
|
26788
26928
|
if (d && d.seg !== seg) commitDraft(d.seg, d.digits);
|
|
@@ -26791,14 +26931,14 @@ var TimePicker = (0, import_react137.forwardRef)(
|
|
|
26791
26931
|
},
|
|
26792
26932
|
[commitDraft]
|
|
26793
26933
|
);
|
|
26794
|
-
(0,
|
|
26934
|
+
(0, import_react138.useEffect)(() => {
|
|
26795
26935
|
if (!open) {
|
|
26796
26936
|
clearCommitTimer();
|
|
26797
26937
|
setDraftBoth(null);
|
|
26798
26938
|
}
|
|
26799
26939
|
return clearCommitTimer;
|
|
26800
26940
|
}, [open, clearCommitTimer, setDraftBoth]);
|
|
26801
|
-
(0,
|
|
26941
|
+
(0, import_react138.useEffect)(() => {
|
|
26802
26942
|
if (!open) return;
|
|
26803
26943
|
const onDoc = (e) => {
|
|
26804
26944
|
if (!wrapRef.current?.contains(e.target)) {
|
|
@@ -26995,7 +27135,7 @@ var TimePicker = (0, import_react137.forwardRef)(
|
|
|
26995
27135
|
)
|
|
26996
27136
|
] })
|
|
26997
27137
|
] }),
|
|
26998
|
-
/* @__PURE__ */ (0, import_jsx_runtime118.jsx)("div", { className: "ods-timepicker__body", children: segOrder().map((seg, i, arr) => /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)(
|
|
27138
|
+
/* @__PURE__ */ (0, import_jsx_runtime118.jsx)("div", { className: "ods-timepicker__body", children: segOrder().map((seg, i, arr) => /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)(import_react138.Fragment, { children: [
|
|
26999
27139
|
/* @__PURE__ */ (0, import_jsx_runtime118.jsxs)("div", { className: "ods-timepicker__col", children: [
|
|
27000
27140
|
/* @__PURE__ */ (0, import_jsx_runtime118.jsx)("span", { className: "ods-timepicker__col-lbl", children: seg === "hours" ? "HOUR" : seg === "minutes" ? "MIN" : "SEC" }),
|
|
27001
27141
|
/* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
|
|
@@ -27044,7 +27184,7 @@ var TimePicker = (0, import_react137.forwardRef)(
|
|
|
27044
27184
|
TimePicker.displayName = "TimePicker";
|
|
27045
27185
|
|
|
27046
27186
|
// src/components/TimezonePicker/TimezonePicker.tsx
|
|
27047
|
-
var
|
|
27187
|
+
var import_react139 = require("react");
|
|
27048
27188
|
var import_icons45 = require("@octaviaflow/icons");
|
|
27049
27189
|
var import_jsx_runtime119 = require("react/jsx-runtime");
|
|
27050
27190
|
var DEFAULT_TZS = [
|
|
@@ -27061,7 +27201,7 @@ var DEFAULT_TZS = [
|
|
|
27061
27201
|
{ iana: "Asia/Tokyo", label: "Tokyo", offset: "UTC+9" },
|
|
27062
27202
|
{ iana: "Australia/Sydney", label: "Sydney", offset: "UTC+10" }
|
|
27063
27203
|
];
|
|
27064
|
-
var TimezonePicker = (0,
|
|
27204
|
+
var TimezonePicker = (0, import_react139.forwardRef)(
|
|
27065
27205
|
function TimezonePicker2({
|
|
27066
27206
|
label,
|
|
27067
27207
|
value,
|
|
@@ -27079,46 +27219,46 @@ var TimezonePicker = (0, import_react138.forwardRef)(
|
|
|
27079
27219
|
"aria-describedby": consumerDescribedBy,
|
|
27080
27220
|
...rest
|
|
27081
27221
|
}, forwardedRef) {
|
|
27082
|
-
const reactId = (0,
|
|
27222
|
+
const reactId = (0, import_react139.useId)();
|
|
27083
27223
|
const baseId = providedId ?? `ods-tzpicker-${reactId}`;
|
|
27084
27224
|
const labelId = label ? `${baseId}-label` : void 0;
|
|
27085
27225
|
const listboxId = `${baseId}-listbox`;
|
|
27086
27226
|
const hintId = error || helperText ? `${baseId}-hint` : void 0;
|
|
27087
27227
|
const describedBy = [consumerDescribedBy, hintId].filter(Boolean).join(" ") || void 0;
|
|
27088
|
-
const [open, setOpen] = (0,
|
|
27089
|
-
const [query, setQuery] = (0,
|
|
27090
|
-
const [activeIndex, setActiveIndex] = (0,
|
|
27091
|
-
const wrapRef = (0,
|
|
27092
|
-
const triggerRef = (0,
|
|
27093
|
-
const inputRef = (0,
|
|
27094
|
-
const listRef = (0,
|
|
27228
|
+
const [open, setOpen] = (0, import_react139.useState)(false);
|
|
27229
|
+
const [query, setQuery] = (0, import_react139.useState)("");
|
|
27230
|
+
const [activeIndex, setActiveIndex] = (0, import_react139.useState)(0);
|
|
27231
|
+
const wrapRef = (0, import_react139.useRef)(null);
|
|
27232
|
+
const triggerRef = (0, import_react139.useRef)(null);
|
|
27233
|
+
const inputRef = (0, import_react139.useRef)(null);
|
|
27234
|
+
const listRef = (0, import_react139.useRef)(null);
|
|
27095
27235
|
const setWrapRef = (node) => {
|
|
27096
27236
|
wrapRef.current = node;
|
|
27097
27237
|
if (typeof forwardedRef === "function") forwardedRef(node);
|
|
27098
27238
|
else if (forwardedRef)
|
|
27099
27239
|
forwardedRef.current = node;
|
|
27100
27240
|
};
|
|
27101
|
-
const selected = (0,
|
|
27241
|
+
const selected = (0, import_react139.useMemo)(
|
|
27102
27242
|
() => options.find((o) => o.iana === value),
|
|
27103
27243
|
[options, value]
|
|
27104
27244
|
);
|
|
27105
|
-
const filtered = (0,
|
|
27245
|
+
const filtered = (0, import_react139.useMemo)(() => {
|
|
27106
27246
|
if (!query.trim()) return options;
|
|
27107
27247
|
const q2 = query.trim().toLowerCase();
|
|
27108
27248
|
return options.filter(
|
|
27109
27249
|
(o) => o.iana.toLowerCase().includes(q2) || o.label.toLowerCase().includes(q2) || o.offset.toLowerCase().includes(q2) || o.region?.toLowerCase().includes(q2)
|
|
27110
27250
|
);
|
|
27111
27251
|
}, [options, query]);
|
|
27112
|
-
(0,
|
|
27252
|
+
(0, import_react139.useEffect)(() => {
|
|
27113
27253
|
if (activeIndex >= filtered.length) setActiveIndex(0);
|
|
27114
27254
|
}, [filtered.length, activeIndex]);
|
|
27115
|
-
(0,
|
|
27255
|
+
(0, import_react139.useEffect)(() => {
|
|
27116
27256
|
if (!open) return;
|
|
27117
27257
|
const idx = filtered.findIndex((o) => o.iana === value);
|
|
27118
27258
|
setActiveIndex(idx >= 0 ? idx : 0);
|
|
27119
27259
|
inputRef.current?.focus();
|
|
27120
27260
|
}, [open]);
|
|
27121
|
-
(0,
|
|
27261
|
+
(0, import_react139.useEffect)(() => {
|
|
27122
27262
|
if (!open) return;
|
|
27123
27263
|
const onDoc = (e) => {
|
|
27124
27264
|
if (!wrapRef.current?.contains(e.target)) {
|
|
@@ -27129,7 +27269,7 @@ var TimezonePicker = (0, import_react138.forwardRef)(
|
|
|
27129
27269
|
document.addEventListener("mousedown", onDoc);
|
|
27130
27270
|
return () => document.removeEventListener("mousedown", onDoc);
|
|
27131
27271
|
}, [open]);
|
|
27132
|
-
(0,
|
|
27272
|
+
(0, import_react139.useEffect)(() => {
|
|
27133
27273
|
if (!open) return;
|
|
27134
27274
|
const list = listRef.current;
|
|
27135
27275
|
if (!list) return;
|
|
@@ -27138,7 +27278,7 @@ var TimezonePicker = (0, import_react138.forwardRef)(
|
|
|
27138
27278
|
);
|
|
27139
27279
|
active?.scrollIntoView?.({ block: "nearest" });
|
|
27140
27280
|
}, [activeIndex, open]);
|
|
27141
|
-
const select = (0,
|
|
27281
|
+
const select = (0, import_react139.useCallback)(
|
|
27142
27282
|
(iana) => {
|
|
27143
27283
|
onChange?.(iana);
|
|
27144
27284
|
setOpen(false);
|
|
@@ -27147,7 +27287,7 @@ var TimezonePicker = (0, import_react138.forwardRef)(
|
|
|
27147
27287
|
},
|
|
27148
27288
|
[onChange]
|
|
27149
27289
|
);
|
|
27150
|
-
const handlePopoverKey = (0,
|
|
27290
|
+
const handlePopoverKey = (0, import_react139.useCallback)(
|
|
27151
27291
|
(e) => {
|
|
27152
27292
|
if (e.key === "ArrowDown") {
|
|
27153
27293
|
e.preventDefault();
|
|
@@ -27341,7 +27481,7 @@ TimezonePicker.displayName = "TimezonePicker";
|
|
|
27341
27481
|
|
|
27342
27482
|
// src/components/Toast/Toast.tsx
|
|
27343
27483
|
var import_framer_motion36 = require("framer-motion");
|
|
27344
|
-
var
|
|
27484
|
+
var import_react140 = require("react");
|
|
27345
27485
|
var import_react_dom16 = require("react-dom");
|
|
27346
27486
|
var import_jsx_runtime120 = require("react/jsx-runtime");
|
|
27347
27487
|
var defaultIcons = {
|
|
@@ -27431,7 +27571,7 @@ var defaultIcons = {
|
|
|
27431
27571
|
)
|
|
27432
27572
|
] })
|
|
27433
27573
|
};
|
|
27434
|
-
var ToastContext = (0,
|
|
27574
|
+
var ToastContext = (0, import_react140.createContext)(null);
|
|
27435
27575
|
function ToastBody({ item, onDismiss }) {
|
|
27436
27576
|
const dismiss = () => onDismiss(item.id);
|
|
27437
27577
|
if (item.render) return /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(import_jsx_runtime120.Fragment, { children: item.render({ id: item.id, dismiss }) });
|
|
@@ -27489,10 +27629,10 @@ function ToastBody({ item, onDismiss }) {
|
|
|
27489
27629
|
] });
|
|
27490
27630
|
}
|
|
27491
27631
|
function PositionStack({ items, position, onDismiss, maxStack }) {
|
|
27492
|
-
const [hovered, setHovered] = (0,
|
|
27493
|
-
const [pinned, setPinned] = (0,
|
|
27632
|
+
const [hovered, setHovered] = (0, import_react140.useState)(false);
|
|
27633
|
+
const [pinned, setPinned] = (0, import_react140.useState)(false);
|
|
27494
27634
|
const expanded = hovered || pinned;
|
|
27495
|
-
const ordered = (0,
|
|
27635
|
+
const ordered = (0, import_react140.useMemo)(() => [...items].reverse(), [items]);
|
|
27496
27636
|
const isBottom = position.startsWith("bottom");
|
|
27497
27637
|
const dir = isBottom ? -1 : 1;
|
|
27498
27638
|
if (pinned && items.length === 0) setPinned(false);
|
|
@@ -27590,10 +27730,10 @@ function ToastProvider({
|
|
|
27590
27730
|
defaultPosition = "bottom-right",
|
|
27591
27731
|
maxStack = 3
|
|
27592
27732
|
}) {
|
|
27593
|
-
const [toasts, setToasts] = (0,
|
|
27594
|
-
const timers = (0,
|
|
27595
|
-
const idCounter2 = (0,
|
|
27596
|
-
const dismiss = (0,
|
|
27733
|
+
const [toasts, setToasts] = (0, import_react140.useState)([]);
|
|
27734
|
+
const timers = (0, import_react140.useRef)(/* @__PURE__ */ new Map());
|
|
27735
|
+
const idCounter2 = (0, import_react140.useRef)(0);
|
|
27736
|
+
const dismiss = (0, import_react140.useCallback)((id) => {
|
|
27597
27737
|
setToasts((prev) => prev.filter((t) => t.id !== id));
|
|
27598
27738
|
const timer = timers.current.get(id);
|
|
27599
27739
|
if (timer) {
|
|
@@ -27601,7 +27741,7 @@ function ToastProvider({
|
|
|
27601
27741
|
timers.current.delete(id);
|
|
27602
27742
|
}
|
|
27603
27743
|
}, []);
|
|
27604
|
-
const dismissAll = (0,
|
|
27744
|
+
const dismissAll = (0, import_react140.useCallback)((position) => {
|
|
27605
27745
|
setToasts((prev) => {
|
|
27606
27746
|
const remaining = position ? prev.filter((t) => t.position !== position) : [];
|
|
27607
27747
|
for (const t of prev) {
|
|
@@ -27616,7 +27756,7 @@ function ToastProvider({
|
|
|
27616
27756
|
return remaining;
|
|
27617
27757
|
});
|
|
27618
27758
|
}, []);
|
|
27619
|
-
const toast = (0,
|
|
27759
|
+
const toast = (0, import_react140.useCallback)(
|
|
27620
27760
|
(options) => {
|
|
27621
27761
|
const id = `toast-${++idCounter2.current}`;
|
|
27622
27762
|
const item = {
|
|
@@ -27643,7 +27783,7 @@ function ToastProvider({
|
|
|
27643
27783
|
},
|
|
27644
27784
|
[dismiss, defaultPosition]
|
|
27645
27785
|
);
|
|
27646
|
-
const groups = (0,
|
|
27786
|
+
const groups = (0, import_react140.useMemo)(() => {
|
|
27647
27787
|
const out = {
|
|
27648
27788
|
"top-left": [],
|
|
27649
27789
|
"top-center": [],
|
|
@@ -27676,7 +27816,7 @@ function ToastProvider({
|
|
|
27676
27816
|
] });
|
|
27677
27817
|
}
|
|
27678
27818
|
function useToast() {
|
|
27679
|
-
const ctx = (0,
|
|
27819
|
+
const ctx = (0, import_react140.useContext)(ToastContext);
|
|
27680
27820
|
if (!ctx) throw new Error("useToast must be used within a ToastProvider");
|
|
27681
27821
|
const { toast: raw, dismiss, dismissAll } = ctx;
|
|
27682
27822
|
const toast = Object.assign((options) => raw(options), {
|
|
@@ -27690,7 +27830,7 @@ function useToast() {
|
|
|
27690
27830
|
}
|
|
27691
27831
|
|
|
27692
27832
|
// src/components/Toggle/Toggle.tsx
|
|
27693
|
-
var
|
|
27833
|
+
var import_react141 = require("react");
|
|
27694
27834
|
var import_jsx_runtime121 = require("react/jsx-runtime");
|
|
27695
27835
|
function Toggle({
|
|
27696
27836
|
label,
|
|
@@ -27710,15 +27850,15 @@ function Toggle({
|
|
|
27710
27850
|
ref,
|
|
27711
27851
|
...rest
|
|
27712
27852
|
}) {
|
|
27713
|
-
const reactId = (0,
|
|
27853
|
+
const reactId = (0, import_react141.useId)();
|
|
27714
27854
|
const baseId = providedId ?? `ods-toggle-${reactId}`;
|
|
27715
27855
|
const labelId = label ? `${baseId}-label` : void 0;
|
|
27716
27856
|
const hintId = error || helperText ? `${baseId}-hint` : void 0;
|
|
27717
27857
|
const describedBy = [consumerDescribedBy, hintId].filter(Boolean).join(" ") || void 0;
|
|
27718
27858
|
const groupLabelledBy = ariaLabelledBy ?? labelId;
|
|
27719
27859
|
const groupAriaLabel = !groupLabelledBy ? ariaLabel ?? "Toggle group" : void 0;
|
|
27720
|
-
const buttonRefs = (0,
|
|
27721
|
-
const findNextEnabled = (0,
|
|
27860
|
+
const buttonRefs = (0, import_react141.useRef)([]);
|
|
27861
|
+
const findNextEnabled = (0, import_react141.useCallback)(
|
|
27722
27862
|
(from, dir) => {
|
|
27723
27863
|
if (options.length === 0) return -1;
|
|
27724
27864
|
let i = from;
|
|
@@ -27731,11 +27871,11 @@ function Toggle({
|
|
|
27731
27871
|
},
|
|
27732
27872
|
[options, disabled]
|
|
27733
27873
|
);
|
|
27734
|
-
const focusIndex = (0,
|
|
27874
|
+
const focusIndex = (0, import_react141.useCallback)((i) => {
|
|
27735
27875
|
if (i < 0) return;
|
|
27736
27876
|
buttonRefs.current[i]?.focus();
|
|
27737
27877
|
}, []);
|
|
27738
|
-
const handleKey = (0,
|
|
27878
|
+
const handleKey = (0, import_react141.useCallback)(
|
|
27739
27879
|
(e, idx) => {
|
|
27740
27880
|
if (e.key === "ArrowRight" || e.key === "ArrowDown") {
|
|
27741
27881
|
e.preventDefault();
|
|
@@ -27884,7 +28024,7 @@ function ToolbarSpacer() {
|
|
|
27884
28024
|
}
|
|
27885
28025
|
|
|
27886
28026
|
// src/components/ToolCard/ToolCard.tsx
|
|
27887
|
-
var
|
|
28027
|
+
var import_react142 = require("react");
|
|
27888
28028
|
var import_icons46 = require("@octaviaflow/icons");
|
|
27889
28029
|
var import_jsx_runtime123 = require("react/jsx-runtime");
|
|
27890
28030
|
var CATEGORY_GLYPH = {
|
|
@@ -27897,7 +28037,7 @@ var CATEGORY_GLYPH = {
|
|
|
27897
28037
|
ai: /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(import_icons46.MagicWandIcon, { size: "xs" }),
|
|
27898
28038
|
custom: /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(import_icons46.ExtensionsIcon, { size: "xs" })
|
|
27899
28039
|
};
|
|
27900
|
-
var ToolCard = (0,
|
|
28040
|
+
var ToolCard = (0, import_react142.forwardRef)(
|
|
27901
28041
|
function ToolCard2({
|
|
27902
28042
|
name,
|
|
27903
28043
|
description,
|
|
@@ -27918,7 +28058,7 @@ var ToolCard = (0, import_react141.forwardRef)(
|
|
|
27918
28058
|
onKeyDown: consumerOnKeyDown,
|
|
27919
28059
|
...rest
|
|
27920
28060
|
}, ref) {
|
|
27921
|
-
const reactId = (0,
|
|
28061
|
+
const reactId = (0, import_react142.useId)();
|
|
27922
28062
|
const baseId = providedId ?? `ods-tool-card-${reactId}`;
|
|
27923
28063
|
const nameId = `${baseId}-name`;
|
|
27924
28064
|
const descId = description ? `${baseId}-desc` : void 0;
|
|
@@ -28089,7 +28229,7 @@ function TopBar({
|
|
|
28089
28229
|
|
|
28090
28230
|
// src/components/TraceStep/TraceStep.tsx
|
|
28091
28231
|
var import_framer_motion37 = require("framer-motion");
|
|
28092
|
-
var
|
|
28232
|
+
var import_react143 = require("react");
|
|
28093
28233
|
var import_icons47 = require("@octaviaflow/icons");
|
|
28094
28234
|
var import_jsx_runtime125 = require("react/jsx-runtime");
|
|
28095
28235
|
var DEFAULT_KIND_GLYPH = {
|
|
@@ -28100,7 +28240,7 @@ var DEFAULT_KIND_GLYPH = {
|
|
|
28100
28240
|
error: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_icons47.WarningAltIcon, { size: "xs" })
|
|
28101
28241
|
};
|
|
28102
28242
|
var FALLBACK_GLYPH = DEFAULT_KIND_GLYPH.thought;
|
|
28103
|
-
var TraceStep = (0,
|
|
28243
|
+
var TraceStep = (0, import_react143.forwardRef)(
|
|
28104
28244
|
function TraceStep2({
|
|
28105
28245
|
index,
|
|
28106
28246
|
kind = "thought",
|
|
@@ -28122,15 +28262,15 @@ var TraceStep = (0, import_react142.forwardRef)(
|
|
|
28122
28262
|
className,
|
|
28123
28263
|
...rest
|
|
28124
28264
|
}, ref) {
|
|
28125
|
-
const reactId = (0,
|
|
28265
|
+
const reactId = (0, import_react143.useId)();
|
|
28126
28266
|
const baseId = providedId ?? `ods-trace-step-${reactId}`;
|
|
28127
28267
|
const headId = `${baseId}-head`;
|
|
28128
28268
|
const contentId = `${baseId}-content`;
|
|
28129
|
-
const [uncontrolledOpen, setUncontrolledOpen] = (0,
|
|
28269
|
+
const [uncontrolledOpen, setUncontrolledOpen] = (0, import_react143.useState)(defaultOpen);
|
|
28130
28270
|
const isControlled = controlledOpen !== void 0;
|
|
28131
28271
|
const open = isControlled ? controlledOpen : uncontrolledOpen;
|
|
28132
28272
|
const canExpand = !!children;
|
|
28133
|
-
const toggle = (0,
|
|
28273
|
+
const toggle = (0, import_react143.useCallback)(() => {
|
|
28134
28274
|
if (!canExpand) return;
|
|
28135
28275
|
const next = !open;
|
|
28136
28276
|
if (!isControlled) setUncontrolledOpen(next);
|
|
@@ -28270,7 +28410,7 @@ TraceStep.displayName = "TraceStep";
|
|
|
28270
28410
|
// src/components/TreeView/TreeView.tsx
|
|
28271
28411
|
var import_icons48 = require("@octaviaflow/icons");
|
|
28272
28412
|
var import_framer_motion38 = require("framer-motion");
|
|
28273
|
-
var
|
|
28413
|
+
var import_react144 = require("react");
|
|
28274
28414
|
var import_jsx_runtime126 = require("react/jsx-runtime");
|
|
28275
28415
|
function buildVisibleList(nodes, expanded, out = [], level = 0, parentId = null) {
|
|
28276
28416
|
for (const n of nodes) {
|
|
@@ -28281,7 +28421,7 @@ function buildVisibleList(nodes, expanded, out = [], level = 0, parentId = null)
|
|
|
28281
28421
|
}
|
|
28282
28422
|
return out;
|
|
28283
28423
|
}
|
|
28284
|
-
var TreeView = (0,
|
|
28424
|
+
var TreeView = (0, import_react144.forwardRef)(
|
|
28285
28425
|
function TreeView2({
|
|
28286
28426
|
nodes,
|
|
28287
28427
|
selectedId: controlledSelected,
|
|
@@ -28298,24 +28438,24 @@ var TreeView = (0, import_react143.forwardRef)(
|
|
|
28298
28438
|
className,
|
|
28299
28439
|
...rest
|
|
28300
28440
|
}, ref) {
|
|
28301
|
-
const reactId = (0,
|
|
28441
|
+
const reactId = (0, import_react144.useId)();
|
|
28302
28442
|
const baseId = providedId ?? `ods-tree-${reactId}`;
|
|
28303
28443
|
const reducedMotion = (0, import_framer_motion38.useReducedMotion)();
|
|
28304
|
-
const [internalSelected, setInternalSelected] = (0,
|
|
28444
|
+
const [internalSelected, setInternalSelected] = (0, import_react144.useState)(defaultSelectedId);
|
|
28305
28445
|
const isSelectedControlled = controlledSelected !== void 0;
|
|
28306
28446
|
const selectedId = isSelectedControlled ? controlledSelected : internalSelected;
|
|
28307
|
-
const [internalExpanded, setInternalExpanded] = (0,
|
|
28447
|
+
const [internalExpanded, setInternalExpanded] = (0, import_react144.useState)(
|
|
28308
28448
|
() => new Set(defaultExpandedIds ?? [])
|
|
28309
28449
|
);
|
|
28310
28450
|
const isExpandedControlled = controlledExpanded !== void 0;
|
|
28311
28451
|
const expandedSet = isExpandedControlled ? controlledExpanded : internalExpanded;
|
|
28312
|
-
const [loaded, setLoaded] = (0,
|
|
28313
|
-
const [loading, setLoading] = (0,
|
|
28314
|
-
const resolveChildren = (0,
|
|
28452
|
+
const [loaded, setLoaded] = (0, import_react144.useState)({});
|
|
28453
|
+
const [loading, setLoading] = (0, import_react144.useState)(/* @__PURE__ */ new Set());
|
|
28454
|
+
const resolveChildren = (0, import_react144.useCallback)(
|
|
28315
28455
|
(node) => node.children ?? loaded[node.id],
|
|
28316
28456
|
[loaded]
|
|
28317
28457
|
);
|
|
28318
|
-
const resolvedNodes = (0,
|
|
28458
|
+
const resolvedNodes = (0, import_react144.useMemo)(() => {
|
|
28319
28459
|
const walk = (ns) => ns.map((n) => {
|
|
28320
28460
|
const kids = resolveChildren(n);
|
|
28321
28461
|
if (kids) return { ...n, children: walk(kids) };
|
|
@@ -28323,18 +28463,18 @@ var TreeView = (0, import_react143.forwardRef)(
|
|
|
28323
28463
|
});
|
|
28324
28464
|
return walk(nodes);
|
|
28325
28465
|
}, [nodes, resolveChildren]);
|
|
28326
|
-
const visibleList = (0,
|
|
28466
|
+
const visibleList = (0, import_react144.useMemo)(
|
|
28327
28467
|
() => buildVisibleList(resolvedNodes, expandedSet),
|
|
28328
28468
|
[resolvedNodes, expandedSet]
|
|
28329
28469
|
);
|
|
28330
|
-
const setExpanded = (0,
|
|
28470
|
+
const setExpanded = (0, import_react144.useCallback)(
|
|
28331
28471
|
(next) => {
|
|
28332
28472
|
if (!isExpandedControlled) setInternalExpanded(new Set(next));
|
|
28333
28473
|
onExpandedChange?.(new Set(next));
|
|
28334
28474
|
},
|
|
28335
28475
|
[isExpandedControlled, onExpandedChange]
|
|
28336
28476
|
);
|
|
28337
|
-
const toggleExpand = (0,
|
|
28477
|
+
const toggleExpand = (0, import_react144.useCallback)(
|
|
28338
28478
|
async (node) => {
|
|
28339
28479
|
const next = new Set(expandedSet);
|
|
28340
28480
|
const isOpen = next.has(node.id);
|
|
@@ -28363,7 +28503,7 @@ var TreeView = (0, import_react143.forwardRef)(
|
|
|
28363
28503
|
},
|
|
28364
28504
|
[expandedSet, setExpanded, onLoadChildren, loaded, loading]
|
|
28365
28505
|
);
|
|
28366
|
-
const handleSelect = (0,
|
|
28506
|
+
const handleSelect = (0, import_react144.useCallback)(
|
|
28367
28507
|
(node) => {
|
|
28368
28508
|
if (node.disabled || disabled) return;
|
|
28369
28509
|
if (!isSelectedControlled) setInternalSelected(node.id);
|
|
@@ -28538,7 +28678,7 @@ var TreeView = (0, import_react143.forwardRef)(
|
|
|
28538
28678
|
);
|
|
28539
28679
|
};
|
|
28540
28680
|
const visibleIdxCursor = { value: 0 };
|
|
28541
|
-
(0,
|
|
28681
|
+
(0, import_react144.useEffect)(() => {
|
|
28542
28682
|
}, [tabStopId]);
|
|
28543
28683
|
return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
|
|
28544
28684
|
"ul",
|
|
@@ -28563,9 +28703,9 @@ var TreeView = (0, import_react143.forwardRef)(
|
|
|
28563
28703
|
TreeView.displayName = "TreeView";
|
|
28564
28704
|
|
|
28565
28705
|
// src/components/UserCard/UserCard.tsx
|
|
28566
|
-
var
|
|
28706
|
+
var import_react145 = require("react");
|
|
28567
28707
|
var import_jsx_runtime127 = require("react/jsx-runtime");
|
|
28568
|
-
var UserCard = (0,
|
|
28708
|
+
var UserCard = (0, import_react145.forwardRef)(
|
|
28569
28709
|
function UserCard2({
|
|
28570
28710
|
name,
|
|
28571
28711
|
nameAs = "h3",
|
|
@@ -28586,7 +28726,7 @@ var UserCard = (0, import_react144.forwardRef)(
|
|
|
28586
28726
|
className,
|
|
28587
28727
|
...rest
|
|
28588
28728
|
}, ref) {
|
|
28589
|
-
const reactId = (0,
|
|
28729
|
+
const reactId = (0, import_react145.useId)();
|
|
28590
28730
|
const baseId = providedId ?? `ods-user-card-${reactId}`;
|
|
28591
28731
|
const nameId = `${baseId}-name`;
|
|
28592
28732
|
const isInteractive = Boolean(href || onClick) && !disabled;
|
|
@@ -28688,7 +28828,7 @@ UserCard.displayName = "UserCard";
|
|
|
28688
28828
|
var import_react155 = require("react");
|
|
28689
28829
|
|
|
28690
28830
|
// src/hooks/useWorkflow.ts
|
|
28691
|
-
var
|
|
28831
|
+
var import_react146 = require("react");
|
|
28692
28832
|
|
|
28693
28833
|
// src/workflow/types.ts
|
|
28694
28834
|
var types_exports = {};
|
|
@@ -29168,7 +29308,7 @@ function genId(prefix) {
|
|
|
29168
29308
|
return `${prefix}_${Date.now().toString(36)}_${idCounter}`;
|
|
29169
29309
|
}
|
|
29170
29310
|
function useWorkflow(options = {}) {
|
|
29171
|
-
const initial = (0,
|
|
29311
|
+
const initial = (0, import_react146.useMemo)(
|
|
29172
29312
|
() => buildInitialWorkflow({
|
|
29173
29313
|
metadata: options.metadata ? { ...options.metadata } : void 0,
|
|
29174
29314
|
canvas: {
|
|
@@ -29201,12 +29341,12 @@ function useWorkflow(options = {}) {
|
|
|
29201
29341
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
29202
29342
|
[]
|
|
29203
29343
|
);
|
|
29204
|
-
const [workflow, dispatch] = (0,
|
|
29205
|
-
const addNode = (0,
|
|
29344
|
+
const [workflow, dispatch] = (0, import_react146.useReducer)(reducer, initial);
|
|
29345
|
+
const addNode = (0, import_react146.useCallback)(
|
|
29206
29346
|
(node) => dispatch({ type: "ADD_NODE", payload: node }),
|
|
29207
29347
|
[]
|
|
29208
29348
|
);
|
|
29209
|
-
const createNode = (0,
|
|
29349
|
+
const createNode = (0, import_react146.useCallback)(
|
|
29210
29350
|
(partial) => {
|
|
29211
29351
|
const id = partial.id ?? genId("node");
|
|
29212
29352
|
const ports = partial.ports ?? {
|
|
@@ -29255,27 +29395,27 @@ function useWorkflow(options = {}) {
|
|
|
29255
29395
|
},
|
|
29256
29396
|
[]
|
|
29257
29397
|
);
|
|
29258
|
-
const updateNode = (0,
|
|
29398
|
+
const updateNode = (0, import_react146.useCallback)(
|
|
29259
29399
|
(id, updates) => dispatch({ type: "UPDATE_NODE", payload: { id, updates } }),
|
|
29260
29400
|
[]
|
|
29261
29401
|
);
|
|
29262
|
-
const deleteNode = (0,
|
|
29402
|
+
const deleteNode = (0, import_react146.useCallback)(
|
|
29263
29403
|
(id) => dispatch({ type: "DELETE_NODE", payload: id }),
|
|
29264
29404
|
[]
|
|
29265
29405
|
);
|
|
29266
|
-
const deleteNodes = (0,
|
|
29406
|
+
const deleteNodes = (0, import_react146.useCallback)(
|
|
29267
29407
|
(ids) => dispatch({ type: "DELETE_NODES", payload: ids }),
|
|
29268
29408
|
[]
|
|
29269
29409
|
);
|
|
29270
|
-
const replaceNodes = (0,
|
|
29410
|
+
const replaceNodes = (0, import_react146.useCallback)(
|
|
29271
29411
|
(nodes) => dispatch({ type: "REPLACE_NODES", payload: nodes }),
|
|
29272
29412
|
[]
|
|
29273
29413
|
);
|
|
29274
|
-
const addEdge = (0,
|
|
29414
|
+
const addEdge = (0, import_react146.useCallback)(
|
|
29275
29415
|
(edge) => dispatch({ type: "ADD_EDGE", payload: edge }),
|
|
29276
29416
|
[]
|
|
29277
29417
|
);
|
|
29278
|
-
const createEdge = (0,
|
|
29418
|
+
const createEdge = (0, import_react146.useCallback)(
|
|
29279
29419
|
(source, sourcePort, target, targetPort) => {
|
|
29280
29420
|
const edge = {
|
|
29281
29421
|
id: genId("edge"),
|
|
@@ -29293,20 +29433,20 @@ function useWorkflow(options = {}) {
|
|
|
29293
29433
|
},
|
|
29294
29434
|
[]
|
|
29295
29435
|
);
|
|
29296
|
-
const deleteEdge = (0,
|
|
29436
|
+
const deleteEdge = (0, import_react146.useCallback)(
|
|
29297
29437
|
(id) => dispatch({ type: "DELETE_EDGE", payload: id }),
|
|
29298
29438
|
[]
|
|
29299
29439
|
);
|
|
29300
|
-
const replaceEdges = (0,
|
|
29440
|
+
const replaceEdges = (0, import_react146.useCallback)(
|
|
29301
29441
|
(edges) => dispatch({ type: "REPLACE_EDGES", payload: edges }),
|
|
29302
29442
|
[]
|
|
29303
29443
|
);
|
|
29304
|
-
const startConnecting = (0,
|
|
29444
|
+
const startConnecting = (0, import_react146.useCallback)(
|
|
29305
29445
|
(nodeId, portId, portType) => dispatch({ type: "START_CONNECTING", payload: { nodeId, portId, portType } }),
|
|
29306
29446
|
[]
|
|
29307
29447
|
);
|
|
29308
|
-
const endConnecting = (0,
|
|
29309
|
-
const selectNode = (0,
|
|
29448
|
+
const endConnecting = (0, import_react146.useCallback)(() => dispatch({ type: "END_CONNECTING" }), []);
|
|
29449
|
+
const selectNode = (0, import_react146.useCallback)(
|
|
29310
29450
|
(id, multi = false) => {
|
|
29311
29451
|
if (multi) {
|
|
29312
29452
|
const current = workflow.canvas.selectedNodes;
|
|
@@ -29318,36 +29458,36 @@ function useWorkflow(options = {}) {
|
|
|
29318
29458
|
},
|
|
29319
29459
|
[workflow.canvas.selectedNodes]
|
|
29320
29460
|
);
|
|
29321
|
-
const selectNodes = (0,
|
|
29461
|
+
const selectNodes = (0, import_react146.useCallback)(
|
|
29322
29462
|
(ids) => dispatch({ type: "SELECT_NODES", payload: ids }),
|
|
29323
29463
|
[]
|
|
29324
29464
|
);
|
|
29325
|
-
const selectEdge = (0,
|
|
29465
|
+
const selectEdge = (0, import_react146.useCallback)(
|
|
29326
29466
|
(id) => dispatch({ type: "SELECT_EDGE", payload: id }),
|
|
29327
29467
|
[]
|
|
29328
29468
|
);
|
|
29329
|
-
const deselectAll = (0,
|
|
29330
|
-
const zoomIn = (0,
|
|
29469
|
+
const deselectAll = (0, import_react146.useCallback)(() => dispatch({ type: "DESELECT_ALL" }), []);
|
|
29470
|
+
const zoomIn = (0, import_react146.useCallback)(() => {
|
|
29331
29471
|
const z = Math.min(workflow.canvas.viewport.zoom * 1.2, 2);
|
|
29332
29472
|
dispatch({ type: "UPDATE_VIEWPORT", payload: { zoom: z } });
|
|
29333
29473
|
}, [workflow.canvas.viewport.zoom]);
|
|
29334
|
-
const zoomOut = (0,
|
|
29474
|
+
const zoomOut = (0, import_react146.useCallback)(() => {
|
|
29335
29475
|
const z = Math.max(workflow.canvas.viewport.zoom / 1.2, 0.25);
|
|
29336
29476
|
dispatch({ type: "UPDATE_VIEWPORT", payload: { zoom: z } });
|
|
29337
29477
|
}, [workflow.canvas.viewport.zoom]);
|
|
29338
|
-
const resetViewport = (0,
|
|
29478
|
+
const resetViewport = (0, import_react146.useCallback)(
|
|
29339
29479
|
() => dispatch({ type: "UPDATE_VIEWPORT", payload: { x: 0, y: 0, zoom: 1 } }),
|
|
29340
29480
|
[]
|
|
29341
29481
|
);
|
|
29342
|
-
const setViewport = (0,
|
|
29482
|
+
const setViewport = (0, import_react146.useCallback)(
|
|
29343
29483
|
(viewport) => dispatch({ type: "UPDATE_VIEWPORT", payload: viewport }),
|
|
29344
29484
|
[]
|
|
29345
29485
|
);
|
|
29346
|
-
const undo = (0,
|
|
29347
|
-
const redo = (0,
|
|
29486
|
+
const undo = (0, import_react146.useCallback)(() => dispatch({ type: "UNDO" }), []);
|
|
29487
|
+
const redo = (0, import_react146.useCallback)(() => dispatch({ type: "REDO" }), []);
|
|
29348
29488
|
const canUndo = workflow.canvas.history.past.length > 0;
|
|
29349
29489
|
const canRedo = workflow.canvas.history.future.length > 0;
|
|
29350
|
-
const validate = (0,
|
|
29490
|
+
const validate = (0, import_react146.useCallback)(() => workflow.validation, [workflow.validation]);
|
|
29351
29491
|
return {
|
|
29352
29492
|
workflow,
|
|
29353
29493
|
dispatch,
|
|
@@ -29594,55 +29734,11 @@ function createFlowStore({
|
|
|
29594
29734
|
}
|
|
29595
29735
|
var EMPTY_SET = /* @__PURE__ */ new Set();
|
|
29596
29736
|
|
|
29597
|
-
// src/workflow/utils/geometry.ts
|
|
29598
|
-
var DEFAULT_NODE_WIDTH3 = 368;
|
|
29599
|
-
var DEFAULT_NODE_HEIGHT3 = 96;
|
|
29600
|
-
var COLLAPSED_GROUP_HEIGHT = 36;
|
|
29601
|
-
var COLLAPSED_FOREACH_HEIGHT = 40;
|
|
29602
|
-
function effectiveHeight(node) {
|
|
29603
|
-
const data = node.data;
|
|
29604
|
-
if (data?.collapsed) {
|
|
29605
|
-
if (node.type === "group") return COLLAPSED_GROUP_HEIGHT;
|
|
29606
|
-
if (node.type === "forEach") return COLLAPSED_FOREACH_HEIGHT;
|
|
29607
|
-
}
|
|
29608
|
-
return node.height ?? DEFAULT_NODE_HEIGHT3;
|
|
29609
|
-
}
|
|
29610
|
-
function handleCentre(node, side, index, total) {
|
|
29611
|
-
const w = node.width ?? DEFAULT_NODE_WIDTH3;
|
|
29612
|
-
const h = effectiveHeight(node);
|
|
29613
|
-
const x0 = node.position.x;
|
|
29614
|
-
const y0 = node.position.y;
|
|
29615
|
-
const denom = total + 1;
|
|
29616
|
-
const ratio = (index + 1) / denom;
|
|
29617
|
-
switch (side) {
|
|
29618
|
-
case "top":
|
|
29619
|
-
return { x: x0 + w * ratio, y: y0 };
|
|
29620
|
-
case "bottom":
|
|
29621
|
-
return { x: x0 + w * ratio, y: y0 + h };
|
|
29622
|
-
case "left":
|
|
29623
|
-
return { x: x0, y: y0 + h * ratio };
|
|
29624
|
-
case "right":
|
|
29625
|
-
return { x: x0 + w, y: y0 + h * ratio };
|
|
29626
|
-
}
|
|
29627
|
-
}
|
|
29628
|
-
function screenToFlow(p, vp) {
|
|
29629
|
-
return {
|
|
29630
|
-
x: (p.x - vp.x) / vp.zoom,
|
|
29631
|
-
y: (p.y - vp.y) / vp.zoom
|
|
29632
|
-
};
|
|
29633
|
-
}
|
|
29634
|
-
function flowToScreen(p, vp) {
|
|
29635
|
-
return {
|
|
29636
|
-
x: p.x * vp.zoom + vp.x,
|
|
29637
|
-
y: p.y * vp.zoom + vp.y
|
|
29638
|
-
};
|
|
29639
|
-
}
|
|
29640
|
-
|
|
29641
29737
|
// src/workflow/utils/collision.ts
|
|
29642
29738
|
function resolveNodeCollisions(node, proposed, others, opts) {
|
|
29643
29739
|
const { gap, maxIterations = 8, exclude, scopeToSiblings = true } = opts;
|
|
29644
29740
|
if (gap < 0 || others.length === 0) return proposed;
|
|
29645
|
-
const w = node.width ??
|
|
29741
|
+
const w = node.width ?? DEFAULT_NODE_WIDTH2;
|
|
29646
29742
|
const h = effectiveHeight(node);
|
|
29647
29743
|
const parentId = node.parentId;
|
|
29648
29744
|
const candidates = others.filter((o) => {
|
|
@@ -29666,7 +29762,7 @@ function resolveNodeCollisions(node, proposed, others, opts) {
|
|
|
29666
29762
|
const aTop = cur.y - gap;
|
|
29667
29763
|
const aBottom = cur.y + h + gap;
|
|
29668
29764
|
for (const o of candidates) {
|
|
29669
|
-
const ow = o.width ??
|
|
29765
|
+
const ow = o.width ?? DEFAULT_NODE_WIDTH2;
|
|
29670
29766
|
const oh = effectiveHeight(o);
|
|
29671
29767
|
const bLeft = o.position.x;
|
|
29672
29768
|
const bRight = o.position.x + ow;
|
|
@@ -29732,9 +29828,9 @@ function clampToParentExtent(node, proposed, nodes) {
|
|
|
29732
29828
|
if (node.extent !== "parent" || !node.parentId) return proposed;
|
|
29733
29829
|
const parent = nodes.find((n) => n.id === node.parentId);
|
|
29734
29830
|
if (!parent) return proposed;
|
|
29735
|
-
const pw = parent.width ??
|
|
29831
|
+
const pw = parent.width ?? DEFAULT_NODE_WIDTH2;
|
|
29736
29832
|
const ph = effectiveHeight(parent);
|
|
29737
|
-
const w = node.width ??
|
|
29833
|
+
const w = node.width ?? DEFAULT_NODE_WIDTH2;
|
|
29738
29834
|
const h = effectiveHeight(node);
|
|
29739
29835
|
const minX = parent.position.x;
|
|
29740
29836
|
const minY = parent.position.y;
|
|
@@ -29753,7 +29849,7 @@ function findContainingGroup(point, nodes, exclude = []) {
|
|
|
29753
29849
|
if (n.data && typeof n.data === "object" && n.data.collapsed) {
|
|
29754
29850
|
continue;
|
|
29755
29851
|
}
|
|
29756
|
-
const w = n.width ??
|
|
29852
|
+
const w = n.width ?? DEFAULT_NODE_WIDTH2;
|
|
29757
29853
|
const h = effectiveHeight(n);
|
|
29758
29854
|
if (point.x >= n.position.x && point.y >= n.position.y && point.x <= n.position.x + w && point.y <= n.position.y + h) {
|
|
29759
29855
|
return n;
|
|
@@ -29764,52 +29860,6 @@ function findContainingGroup(point, nodes, exclude = []) {
|
|
|
29764
29860
|
|
|
29765
29861
|
// src/workflow/components/FlowEdge/FlowEdge.tsx
|
|
29766
29862
|
var import_react147 = require("react");
|
|
29767
|
-
|
|
29768
|
-
// src/workflow/components/Handle/handleRegistry.ts
|
|
29769
|
-
var import_react146 = require("react");
|
|
29770
|
-
var HandleRegistryContext = (0, import_react146.createContext)(null);
|
|
29771
|
-
function useHandleRegistry() {
|
|
29772
|
-
const r = (0, import_react146.useContext)(HandleRegistryContext);
|
|
29773
|
-
if (!r) {
|
|
29774
|
-
throw new Error("[@octaviaflow/core/workflow] Handle must be used inside <FlowCanvas>.");
|
|
29775
|
-
}
|
|
29776
|
-
return r;
|
|
29777
|
-
}
|
|
29778
|
-
function createHandleRegistry() {
|
|
29779
|
-
const map = /* @__PURE__ */ new Map();
|
|
29780
|
-
const key = (n, t, h) => `${n}::${t}::${h}`;
|
|
29781
|
-
const listeners = /* @__PURE__ */ new Set();
|
|
29782
|
-
const notify = () => {
|
|
29783
|
-
for (const l of listeners) l();
|
|
29784
|
-
};
|
|
29785
|
-
return {
|
|
29786
|
-
register(d) {
|
|
29787
|
-
map.set(key(d.nodeId, d.type, d.handleId), d);
|
|
29788
|
-
notify();
|
|
29789
|
-
return () => {
|
|
29790
|
-
const k = key(d.nodeId, d.type, d.handleId);
|
|
29791
|
-
if (map.get(k) === d) {
|
|
29792
|
-
map.delete(k);
|
|
29793
|
-
notify();
|
|
29794
|
-
}
|
|
29795
|
-
};
|
|
29796
|
-
},
|
|
29797
|
-
resolve(nodeId, type, handleId) {
|
|
29798
|
-
return map.get(key(nodeId, type, handleId));
|
|
29799
|
-
},
|
|
29800
|
-
all() {
|
|
29801
|
-
return Array.from(map.values());
|
|
29802
|
-
},
|
|
29803
|
-
subscribe(listener) {
|
|
29804
|
-
listeners.add(listener);
|
|
29805
|
-
return () => {
|
|
29806
|
-
listeners.delete(listener);
|
|
29807
|
-
};
|
|
29808
|
-
}
|
|
29809
|
-
};
|
|
29810
|
-
}
|
|
29811
|
-
|
|
29812
|
-
// src/workflow/components/FlowEdge/FlowEdge.tsx
|
|
29813
29863
|
var import_jsx_runtime128 = require("react/jsx-runtime");
|
|
29814
29864
|
function FlowEdgeImpl({
|
|
29815
29865
|
edge,
|
|
@@ -30291,8 +30341,8 @@ function NodeResizer({
|
|
|
30291
30341
|
e.preventDefault();
|
|
30292
30342
|
e.stopPropagation();
|
|
30293
30343
|
e.target.setPointerCapture(e.pointerId);
|
|
30294
|
-
const w = node.width ??
|
|
30295
|
-
const h = node.height ??
|
|
30344
|
+
const w = node.width ?? DEFAULT_NODE_WIDTH2;
|
|
30345
|
+
const h = node.height ?? DEFAULT_NODE_HEIGHT2;
|
|
30296
30346
|
dragRef.current = {
|
|
30297
30347
|
pointerId: e.pointerId,
|
|
30298
30348
|
corner,
|
|
@@ -30356,8 +30406,8 @@ function NodeResizer({
|
|
|
30356
30406
|
const cur = flow.getNode(node.id);
|
|
30357
30407
|
if (cur) {
|
|
30358
30408
|
onResizeEnd?.({
|
|
30359
|
-
width: cur.width ??
|
|
30360
|
-
height: cur.height ??
|
|
30409
|
+
width: cur.width ?? DEFAULT_NODE_WIDTH2,
|
|
30410
|
+
height: cur.height ?? DEFAULT_NODE_HEIGHT2
|
|
30361
30411
|
});
|
|
30362
30412
|
}
|
|
30363
30413
|
dragRef.current = null;
|
|
@@ -31535,7 +31585,7 @@ function FlowCanvas2(props) {
|
|
|
31535
31585
|
let maxX = Number.NEGATIVE_INFINITY;
|
|
31536
31586
|
let maxY = Number.NEGATIVE_INFINITY;
|
|
31537
31587
|
for (const n of targetNodes) {
|
|
31538
|
-
const w = n.width ??
|
|
31588
|
+
const w = n.width ?? DEFAULT_NODE_WIDTH2;
|
|
31539
31589
|
const h = effectiveHeight(n);
|
|
31540
31590
|
if (n.position.x < minX) minX = n.position.x;
|
|
31541
31591
|
if (n.position.y < minY) minY = n.position.y;
|
|
@@ -31589,7 +31639,7 @@ function FlowCanvas2(props) {
|
|
|
31589
31639
|
let maxX = Number.NEGATIVE_INFINITY;
|
|
31590
31640
|
let maxY = Number.NEGATIVE_INFINITY;
|
|
31591
31641
|
for (const n of pool) {
|
|
31592
|
-
const w = n.width ??
|
|
31642
|
+
const w = n.width ?? DEFAULT_NODE_WIDTH2;
|
|
31593
31643
|
const h = effectiveHeight(n);
|
|
31594
31644
|
minX = Math.min(minX, n.position.x);
|
|
31595
31645
|
minY = Math.min(minY, n.position.y);
|
|
@@ -31601,7 +31651,7 @@ function FlowCanvas2(props) {
|
|
|
31601
31651
|
getIntersectingNodes: (area, partially = true) => {
|
|
31602
31652
|
return nodesRef.current.filter((n) => {
|
|
31603
31653
|
if (n.hidden) return false;
|
|
31604
|
-
const w = n.width ??
|
|
31654
|
+
const w = n.width ?? DEFAULT_NODE_WIDTH2;
|
|
31605
31655
|
const h = effectiveHeight(n);
|
|
31606
31656
|
if (partially) {
|
|
31607
31657
|
return n.position.x < area.x + area.width && n.position.x + w > area.x && n.position.y < area.y + area.height && n.position.y + h > area.y;
|