@particle-academy/react-fancy 1.8.2 → 1.9.1
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/index.cjs +11 -3
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +4 -1
- package/dist/index.d.ts +4 -1
- package/dist/index.js +11 -3
- package/dist/index.js.map +1 -1
- package/docs/TreeNav.md +43 -0
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -10565,7 +10565,7 @@ function ChevronIcon({ open }) {
|
|
|
10565
10565
|
);
|
|
10566
10566
|
}
|
|
10567
10567
|
function TreeNode({ node, depth }) {
|
|
10568
|
-
const { selectedId, onSelect, expandedIds, toggle, indentSize, showIcons } = useTreeNav();
|
|
10568
|
+
const { selectedId, onSelect, onNodeContextMenu, expandedIds, toggle, indentSize, showIcons } = useTreeNav();
|
|
10569
10569
|
const isFolder = node.type === "folder" || node.children && node.children.length > 0;
|
|
10570
10570
|
const isExpanded = expandedIds.includes(node.id);
|
|
10571
10571
|
const isSelected = selectedId === node.id;
|
|
@@ -10577,12 +10577,19 @@ function TreeNode({ node, depth }) {
|
|
|
10577
10577
|
}
|
|
10578
10578
|
onSelect?.(node.id, node);
|
|
10579
10579
|
};
|
|
10580
|
+
const handleContextMenu = (e) => {
|
|
10581
|
+
if (onNodeContextMenu) {
|
|
10582
|
+
e.preventDefault();
|
|
10583
|
+
onNodeContextMenu(e, node);
|
|
10584
|
+
}
|
|
10585
|
+
};
|
|
10580
10586
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-react-fancy-tree-node": "", children: [
|
|
10581
10587
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
10582
10588
|
"button",
|
|
10583
10589
|
{
|
|
10584
10590
|
type: "button",
|
|
10585
10591
|
onClick: handleClick,
|
|
10592
|
+
onContextMenu: handleContextMenu,
|
|
10586
10593
|
disabled: node.disabled,
|
|
10587
10594
|
className: cn(
|
|
10588
10595
|
"flex w-full items-center gap-1 rounded-md py-0.5 text-left text-[13px] transition-colors",
|
|
@@ -10616,6 +10623,7 @@ function TreeNavRoot({
|
|
|
10616
10623
|
nodes,
|
|
10617
10624
|
selectedId,
|
|
10618
10625
|
onSelect,
|
|
10626
|
+
onNodeContextMenu,
|
|
10619
10627
|
expandedIds: controlledExpanded,
|
|
10620
10628
|
defaultExpandedIds,
|
|
10621
10629
|
onExpandedChange,
|
|
@@ -10642,8 +10650,8 @@ function TreeNavRoot({
|
|
|
10642
10650
|
[expandedIds, isControlled, onExpandedChange]
|
|
10643
10651
|
);
|
|
10644
10652
|
const ctx = react.useMemo(
|
|
10645
|
-
() => ({ selectedId, onSelect, expandedIds, toggle, indentSize, showIcons }),
|
|
10646
|
-
[selectedId, onSelect, expandedIds, toggle, indentSize, showIcons]
|
|
10653
|
+
() => ({ selectedId, onSelect, onNodeContextMenu, expandedIds, toggle, indentSize, showIcons }),
|
|
10654
|
+
[selectedId, onSelect, onNodeContextMenu, expandedIds, toggle, indentSize, showIcons]
|
|
10647
10655
|
);
|
|
10648
10656
|
return /* @__PURE__ */ jsxRuntime.jsx(TreeNavContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
10649
10657
|
"nav",
|