ixia-ui-react 1.8.0 → 2.0.0

package/dist/layer-tree/index.js

@@ -0,0 +1,685 @@
+import { t as cn } from "../cn-BDi0DfT5.js";
+import { n as Icon } from "../icon-D3JWfCa2.js";
+import { t as Button } from "../button-BpUC-R1J.js";
+import { t as Badge } from "../badge-Cl-9WTW-.js";
+import { i as InputGroupAddon, r as InputGroupInput, t as InputGroup } from "../input-group-CgdazGrY.js";
+import { i as MenuSubmenu, l as MenuPopup, n as MenuTrigger, p as MenuCheckboxItem, r as MenuSubmenuTrigger, t as Menu } from "../menu-sf13cnGp.js";
+import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { createElement } from "react";
+import { assignPrototypeAPIs, assignTableAPIs, columnFacetingFeature, columnFilteringFeature, columnSizingFeature, columnVisibilityFeature, createExpandedRowModel, createFacetedRowModel, createFacetedUniqueValues, createFilteredRowModel, createPaginatedRowModel, createSortedRowModel, createTableHook, createTableHookContexts, filterFn_arrHas, filterFn_arrIncludes, filterFn_arrIncludesAll, filterFn_arrIncludesSome, filterFn_between, filterFn_betweenInclusive, filterFn_empty, filterFn_endsWith, filterFn_equals, filterFn_equalsString, filterFn_equalsStringSensitive, filterFn_inDateRange, filterFn_inNumberRange, filterFn_includesString, filterFn_includesStringSensitive, filterFn_notEmpty, filterFn_startsWith, filterFn_weakEquals, functionalUpdate, globalFilteringFeature, makeStateUpdater, metaHelper, rowExpandingFeature, rowPaginationFeature, rowSelectionFeature, rowSortingFeature, sortFn_alphanumeric, sortFn_basic, sortFn_datetime, sortFn_text, tableFeatures } from "@tanstack/react-table";
+import { Feedback } from "@dnd-kit/dom";
+import { DragDropProvider, DragOverlay, useDraggable, useDroppable } from "@dnd-kit/react";
+// src/components/layer-tree/layer-tree-utils.ts
+/**
+* Recursively searches for a node by ID in a nested tree structure.
+*
+* @param nodes - The array of nodes to search through
+* @param nodeId - The ID of the node to find
+* @returns The matching node or `null` if not found
+*
+* @example
+* ```ts
+* const node = findLayerTreeNode(layers, 'layer-001')
+* if (node) console.log(node.name)
+* ```
+*/
+const findLayerTreeNode = (nodes, nodeId) => {
+	for (const node of nodes) {
+		if (node.id === nodeId) return node;
+		if (node.children?.length) {
+			const match = findLayerTreeNode(node.children, nodeId);
+			if (match) return match;
+		}
+	}
+	return null;
+};
+const removeLayerTreeNode = (nodes, nodeId) => {
+	let removedNode = null;
+	return {
+		nextNodes: nodes.flatMap((node) => {
+			if (node.id === nodeId) {
+				removedNode = node;
+				return [];
+			}
+			if (!node.children?.length) return [node];
+			const { nextNodes: nextChildren, removedNode: nestedRemovedNode } = removeLayerTreeNode(node.children, nodeId);
+			if (!nestedRemovedNode) return [node];
+			removedNode = nestedRemovedNode;
+			return [{
+				...node,
+				children: nextChildren
+			}];
+		}),
+		removedNode
+	};
+};
+const insertLayerTreeNode = (nodes, folderId, nodeToInsert) => nodes.map((node) => {
+	if (node.id === folderId) return {
+		...node,
+		children: [...node.children ?? [], nodeToInsert]
+	};
+	if (!node.children?.length) return node;
+	return {
+		...node,
+		children: insertLayerTreeNode(node.children, folderId, nodeToInsert)
+	};
+});
+const containsLayerTreeNode = (nodes, nodeId) => Boolean(findLayerTreeNode(nodes, nodeId));
+const moveNodeIntoFolder = (nodes, sourceId, targetId) => {
+	const { nextNodes, removedNode } = removeLayerTreeNode(nodes, sourceId);
+	if (!removedNode) return nodes;
+	return insertLayerTreeNode(nextNodes, targetId, removedNode);
+};
+const moveLayerTreeNode = (nodes, sourceId, targetId) => {
+	if (sourceId === targetId) return nodes;
+	const sourceNode = findLayerTreeNode(nodes, sourceId), targetNode = findLayerTreeNode(nodes, targetId);
+	if (!sourceNode || !targetNode?.children) return nodes;
+	if (containsLayerTreeNode(sourceNode.children ?? [], targetId)) return nodes;
+	return moveNodeIntoFolder(nodes, sourceId, targetId);
+};
+const moveLayerTreeNodeToRoot = (nodes, sourceId) => {
+	const { nextNodes, removedNode } = removeLayerTreeNode(nodes, sourceId);
+	if (!removedNode) return nodes;
+	return [...nextNodes, removedNode];
+};
+const rowVisibilityFeature = {
+	assignRowPrototype: (prototype, table) => {
+		const layerTable = table;
+		assignPrototypeAPIs("rowVisibilityFeature", prototype, table, {
+			row_getIsVisible: { fn: (row) => layerTable.atoms.rowVisibility?.get()?.[row.id] ?? layerTable.options.getRowVisible?.(row) ?? true },
+			row_toggleVisibility: { fn: (row, value) => {
+				layerTable.options.onRowVisibilityChange?.((old) => ({
+					...old,
+					[row.id]: value ?? !(old[row.id] ?? true)
+				}));
+			} }
+		});
+	},
+	constructTableAPIs: (table) => {
+		const layerTable = table, isRowVisible = (row) => layerTable.atoms.rowVisibility?.get()?.[row.id] ?? layerTable.options.getRowVisible?.(row) ?? true, setRowVisibility = (updater) => {
+			const safeUpdater = (old) => functionalUpdate(updater, old);
+			layerTable.options.onRowVisibilityChange?.(safeUpdater);
+		}, getIsAllRowsVisible = () => layerTable.getRowModel().flatRows.every((row) => isRowVisible(row));
+		assignTableAPIs("rowVisibilityFeature", layerTable, {
+			table_getIsAllRowsVisible: { fn: () => getIsAllRowsVisible() },
+			table_resetRowVisibility: { fn: () => setRowVisibility(layerTable.initialState.rowVisibility ?? {}) },
+			table_setRowVisibility: { fn: (updater) => setRowVisibility(updater) },
+			table_toggleAllRowsVisible: { fn: (value) => {
+				const next = value ?? !getIsAllRowsVisible();
+				setRowVisibility(() => {
+					const state = {};
+					for (const row of layerTable.getRowModel().flatRows) state[row.id] = next;
+					return state;
+				});
+			} }
+		});
+	},
+	getDefaultTableOptions: (table) => ({
+		enableRowVisibility: true,
+		onRowVisibilityChange: makeStateUpdater("rowVisibility", table)
+	}),
+	getInitialState: (initialState) => ({
+		rowVisibility: {},
+		...initialState
+	})
+};
+const rowLockedFeature = {
+	assignRowPrototype: (prototype, table) => {
+		const layerTable = table;
+		assignPrototypeAPIs("rowLockedFeature", prototype, table, {
+			row_getIsLocked: { fn: (row) => layerTable.atoms.rowLocked?.get()?.[row.id] ?? layerTable.options.getRowLocked?.(row) ?? false },
+			row_toggleLocked: { fn: (row, value) => {
+				layerTable.options.onRowLockedChange?.((old) => ({
+					...old,
+					[row.id]: value ?? !(old[row.id] ?? false)
+				}));
+			} }
+		});
+	},
+	constructTableAPIs: (table) => {
+		const layerTable = table, isRowLocked = (row) => layerTable.atoms.rowLocked?.get()?.[row.id] ?? layerTable.options.getRowLocked?.(row) ?? false, setRowLocked = (updater) => {
+			const safeUpdater = (old) => functionalUpdate(updater, old);
+			layerTable.options.onRowLockedChange?.(safeUpdater);
+		}, getIsAllRowsLocked = () => layerTable.getRowModel().flatRows.every((row) => isRowLocked(row));
+		assignTableAPIs("rowLockedFeature", layerTable, {
+			table_getIsAllRowsLocked: { fn: () => getIsAllRowsLocked() },
+			table_resetRowLocked: { fn: () => setRowLocked(layerTable.initialState.rowLocked ?? {}) },
+			table_setRowLocked: { fn: (updater) => setRowLocked(updater) },
+			table_toggleAllRowsLocked: { fn: (value) => {
+				const next = value ?? !getIsAllRowsLocked();
+				setRowLocked(() => {
+					const state = {};
+					for (const row of layerTable.getRowModel().flatRows) state[row.id] = next;
+					return state;
+				});
+			} }
+		});
+	},
+	getDefaultTableOptions: (table) => ({
+		enableRowLocked: true,
+		onRowLockedChange: makeStateUpdater("rowLocked", table)
+	}),
+	getInitialState: (initialState) => ({
+		rowLocked: {},
+		...initialState
+	})
+};
+// src/components/layer-tree/layer-tree-context.tsx
+const features = tableFeatures({
+	columnFacetingFeature,
+	columnFilteringFeature,
+	columnMeta: metaHelper(),
+	columnSizingFeature,
+	columnVisibilityFeature,
+	expandedRowModel: createExpandedRowModel(),
+	facetedRowModel: createFacetedRowModel(),
+	facetedUniqueValues: createFacetedUniqueValues(),
+	filterFns: {
+		arrHas: filterFn_arrHas,
+		arrIncludes: filterFn_arrIncludes,
+		arrIncludesAll: filterFn_arrIncludesAll,
+		arrIncludesSome: filterFn_arrIncludesSome,
+		between: filterFn_between,
+		betweenInclusive: filterFn_betweenInclusive,
+		empty: filterFn_empty,
+		endsWith: filterFn_endsWith,
+		equals: filterFn_equals,
+		equalsString: filterFn_equalsString,
+		equalsStringSensitive: filterFn_equalsStringSensitive,
+		inDateRange: filterFn_inDateRange,
+		inNumberRange: filterFn_inNumberRange,
+		includesString: filterFn_includesString,
+		includesStringSensitive: filterFn_includesStringSensitive,
+		notEmpty: filterFn_notEmpty,
+		startsWith: filterFn_startsWith,
+		weakEquals: filterFn_weakEquals
+	},
+	filteredRowModel: createFilteredRowModel(),
+	globalFilteringFeature,
+	paginatedRowModel: createPaginatedRowModel(),
+	rowExpandingFeature,
+	rowLockedFeature,
+	rowPaginationFeature,
+	rowSelectionFeature,
+	rowSortingFeature,
+	rowVisibilityFeature,
+	sortFns: {
+		alphanumeric: sortFn_alphanumeric,
+		basic: sortFn_basic,
+		datetime: sortFn_datetime,
+		text: sortFn_text
+	},
+	sortedRowModel: createSortedRowModel(),
+	tableMeta: metaHelper()
+}), { tableContext, cellContext, headerContext, useTableContext: useTableContext$1, useCellContext: useCellContext$1, useHeaderContext: useHeaderContext$1 } = createTableHookContexts();
+// src/components/layer-tree/layer-tree.types.ts
+const layerTreeTextCellVariants = cva("min-w-0 grow truncate px-2xs", {
+	defaultVariants: { size: "medium" },
+	variants: { size: {
+		large: "style-text-default-1",
+		medium: "style-text-default-0",
+		small: "style-text-default--1"
+	} }
+});
+const LayerTreeContext = React.createContext(null);
+const useLayerTree = () => {
+	const context = React.useContext(LayerTreeContext);
+	if (!context) throw new Error("useLayerTree must be used within a LayerTreeProvider");
+	return context;
+};
+// src/components/layer-tree/layer-tree.tsx
+const PARENT_ROW_COUNT = 1;
+function LayerTree({ onDNDStart: onDragStart, onDNDEnd: onDragEnd, className, children, ref, ...props }) {
+	const table = useTableContext$1(), [draggingNodeId, setDraggingNodeId] = React.useState(null), handleDragStart = ({ operation: { source } }) => {
+		setDraggingNodeId(source?.data.nodeId ?? null);
+		if (onDragStart) onDragStart({ nodeId: source?.data.nodeId ?? "" });
+	}, handleDragEnd = ({ operation: { source, target } }) => {
+		setDraggingNodeId(null);
+		if (onDragEnd) {
+			const targetNodeId = target?.data.folderId ?? target?.data.nodeId ?? null;
+			onDragEnd({
+				sourceNodeId: source?.data.nodeId ?? "",
+				targetNodeId
+			});
+		}
+	};
+	return /* @__PURE__ */ jsx(DragDropProvider, {
+		onDragStart: handleDragStart,
+		onDragEnd: handleDragEnd,
+		plugins: (defaults) => [...defaults, Feedback.configure({ dropAnimation: null })],
+		children: /* @__PURE__ */ jsx(LayerTreeContext.Provider, {
+			value: {
+				children,
+				className,
+				draggingNodeId,
+				ref,
+				...props
+			},
+			children: /* @__PURE__ */ jsxs("div", {
+				className: cn("flex flex-col justify-between", className),
+				ref,
+				...props,
+				children: [children, /* @__PURE__ */ jsx(DragOverlay, { children: (source) => /* @__PURE__ */ jsxs("div", {
+					className: cn("relative rounded-md border border-neutral-border bg-neutral-container px-xs py-3xs opacity-80 shadow-md transition-opacity"),
+					children: [table.getRow(String(source.id)).renderValue("name") ?? source.id, /* @__PURE__ */ jsx(Badge, {
+						className: "absolute -top-xs -right-xs",
+						tone: "neutral",
+						children: table.getRow(String(source.id))?.subRows.length + PARENT_ROW_COUNT
+					})]
+				}) })]
+			})
+		})
+	});
+}
+// src/components/layer-tree/layer-tree-row.tsx
+const ROOT_DEPTH = 0;
+const FIRST_CELL_INDEX = 0;
+const ROW_INDENT_PER_LEVEL = 24;
+const EMPTY_LEAF_COUNT = 0;
+const VISIBLE_OPACITY = 1;
+const HIDDEN_OPACITY = .5;
+function LayerTreeRow({ rowId, className, children, ref, ...props }) {
+	const table = useTableContext$1();
+	return /* @__PURE__ */ jsx(table.Subscribe, {
+		selector: (state) => ({
+			expanded: state.expanded,
+			rowSelection: state.rowSelection,
+			rowVisibility: state.rowVisibility
+		}),
+		children: () => {
+			const row = table.getRowModel().rows.find((candidate) => candidate.id === rowId), indent = (row?.depth ?? ROOT_DEPTH) * ROW_INDENT_PER_LEVEL, leafRows = row?.getLeafRows() ?? [];
+			let isVisible = row?.getIsVisible() ?? true;
+			if (leafRows.length > EMPTY_LEAF_COUNT) isVisible = leafRows.some((leaf) => leaf.getIsVisible());
+			return /* @__PURE__ */ jsxs("div", {
+				className: cn("flex w-full items-center gap-3xs", className),
+				ref,
+				...props,
+				children: [children, row?.getVisibleCells().map((cell, cellIndex) => {
+					const isFirstCell = cellIndex === FIRST_CELL_INDEX, isFill = cell.column.columnDef.meta?.fill ?? cell.column.id === "name";
+					let marginLeft = void 0, opacity = HIDDEN_OPACITY;
+					if (isFirstCell) marginLeft = indent;
+					if (isVisible) opacity = VISIBLE_OPACITY;
+					return /* @__PURE__ */ jsx(table.AppCell, {
+						cell,
+						children: (renderedCell) => /* @__PURE__ */ jsx("div", {
+							style: {
+								marginLeft,
+								opacity
+							},
+							className: cn("flex items-center", isFill && "min-w-0 grow gap-3xs", !isFill && "w-fit shrink-0"),
+							children: /* @__PURE__ */ jsx(table.FlexRender, { cell: renderedCell })
+						})
+					}, cell.id);
+				})]
+			});
+		}
+	});
+}
+// src/components/layer-tree/layer-tree-body.tsx
+function LayerTreeBody({ className, children, ...props }) {
+	const table = useTableContext$1(), { isDropTarget, ref } = useDroppable({
+		data: {
+			folderId: "root",
+			nodeId: "root"
+		},
+		id: "root-dropzone"
+	});
+	return /* @__PURE__ */ jsx(table.Subscribe, {
+		selector: (state) => state,
+		children: () => /* @__PURE__ */ jsxs("div", {
+			className: cn("flex min-h-0 w-full grow flex-col", className),
+			...props,
+			children: [
+				children,
+				/* @__PURE__ */ jsx("div", {
+					className: "flex min-h-0 w-full flex-col gap-xs overflow-y-auto",
+					children: table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx(LayerTreeRow, { rowId: row.id }, row.id))
+				}),
+				/* @__PURE__ */ jsx("div", {
+					ref,
+					className: cn("grow", isDropTarget && "rounded-lg bg-success-container ring-1 ring-success-default ring-inset")
+				})
+			]
+		})
+	});
+}
+// src/components/layer-tree/layer-tree-expand-all.tsx
+function LayerTreeExpandAll({ className, ref, ...props }) {
+	const table = useTableContext$1(), handleClick = () => {
+		if (table.getIsSomeRowsExpanded()) table.toggleAllRowsExpanded(false);
+		else table.toggleAllRowsExpanded(true);
+	};
+	return /* @__PURE__ */ jsx(table.Subscribe, {
+		selector: (state) => state.expanded,
+		children: () => /* @__PURE__ */ jsxs(Button, {
+			"aria-label": "Expand or collapse all layers",
+			size: "medium",
+			tone: "neutral",
+			variant: "ghost",
+			onClick: handleClick,
+			className: cn("", className),
+			ref,
+			...props,
+			children: [table.getIsSomeRowsExpanded() && /* @__PURE__ */ jsx(Icon, { name: "folderOpen" }), !table.getIsSomeRowsExpanded() && /* @__PURE__ */ jsx(Icon, { name: "folderExpandAll" })]
+		})
+	});
+}
+// src/components/layer-tree/layer-tree-footer.tsx
+function LayerTreeFooter({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex flex-col gap-3xs", className),
+		ref,
+		...props
+	});
+}
+// src/components/layer-tree/layer-tree-icon-cell.tsx
+function LayerTreeIconCell({ className, children, ref, ...props }) {
+	const cell = useCellContext$1(), table = useTableContext$1(), icon = cell.getValue(), { row } = cell, hasChildren = row.getCanExpand() && Boolean(row.getLeafRows().length);
+	return /* @__PURE__ */ jsx(table.Subscribe, {
+		selector: (state) => state.expanded,
+		children: () => {
+			const isExpanded = row.getIsExpanded();
+			let iconNode = createElement(icon);
+			if (hasChildren && isExpanded) iconNode = /* @__PURE__ */ jsx(Icon, { name: "folderOpen" });
+			else if (hasChildren) iconNode = /* @__PURE__ */ jsx(Icon, { name: "folder" });
+			return /* @__PURE__ */ jsxs("div", {
+				className: cn("flex w-fit shrink-0 items-center [&>svg]:size-sm", className),
+				ref,
+				...props,
+				children: [children, iconNode]
+			});
+		}
+	});
+}
+// src/components/layer-tree/layer-tree-locked-all.tsx
+function LayerTreeLockedAll({ className, children, ref, ...props }) {
+	const table = useTableContext$1(), allRows = table.getCoreRowModel().flatRows, handleClick = (isLocked) => {
+		const next = !isLocked;
+		for (const leafRow of allRows) leafRow.toggleLocked(next);
+	};
+	return /* @__PURE__ */ jsx(table.Subscribe, {
+		selector: (state) => state.rowLocked,
+		children: () => {
+			const isLocked = allRows.some((leafRow) => leafRow.getIsLocked());
+			return /* @__PURE__ */ jsxs(Button, {
+				"aria-label": "Toggle all layers lock",
+				size: "small",
+				tone: "neutral",
+				variant: "ghost",
+				onClick: () => handleClick(isLocked),
+				className: cn("", className),
+				ref,
+				...props,
+				children: [
+					children,
+					isLocked && /* @__PURE__ */ jsx(Icon, { name: "locked" }),
+					!isLocked && /* @__PURE__ */ jsx(Icon, { name: "unlocked" })
+				]
+			});
+		}
+	});
+}
+// src/components/layer-tree/layer-tree-locked-cell.tsx
+function LayerTreeLockedCell({ className, children, ref, ...props }) {
+	const cell = useCellContext$1(), table = useTableContext$1(), { row } = cell, rows = row.getLeafRows(), handleClick = (isLocked) => {
+		const next = !isLocked;
+		for (const leafRow of rows) leafRow.toggleLocked(next);
+	};
+	if (!rows.length) rows.push(row);
+	return /* @__PURE__ */ jsx(table.Subscribe, {
+		selector: (state) => state.rowLocked,
+		children: () => {
+			const isLocked = rows.every((leafRow) => leafRow.getIsLocked());
+			return /* @__PURE__ */ jsxs(Button, {
+				"aria-label": "Toggle layer lock",
+				size: "small",
+				tone: "neutral",
+				variant: "ghost",
+				onClick: () => handleClick(isLocked),
+				className: cn("", className),
+				ref,
+				...props,
+				children: [
+					children,
+					isLocked && /* @__PURE__ */ jsx(Icon, { name: "locked" }),
+					!isLocked && /* @__PURE__ */ jsx(Icon, { name: "unlocked" })
+				]
+			});
+		}
+	});
+}
+// src/components/layer-tree/layer-tree-node-icon.tsx
+function LayerTreeNodeIcon({ icon: NodeIcon, className, children, ref, ...props }) {
+	const { row } = useCellContext$1(), hasChildren = row.getCanExpand() && Boolean(row.getLeafRows().length);
+	let nodeIcon = /* @__PURE__ */ jsx(NodeIcon, {});
+	if (hasChildren) {
+		nodeIcon = /* @__PURE__ */ jsx(Icon, { name: "folder" });
+		if (row.getIsExpanded()) nodeIcon = /* @__PURE__ */ jsx(Icon, { name: "folderOpen" });
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("", className),
+		ref,
+		...props,
+		children: [children, nodeIcon]
+	});
+}
+// src/components/layer-tree/layer-tree-search.tsx
+function LayerTreeSearch({ placeholder, className, children, ref, ...props }) {
+	const table = useTableContext$1();
+	return /* @__PURE__ */ jsx(table.Subscribe, {
+		selector: (state) => state.globalFilter,
+		children: (globalFilter) => /* @__PURE__ */ jsxs(InputGroup, {
+			className: cn("", className),
+			ref,
+			...props,
+			children: [
+				/* @__PURE__ */ jsx(InputGroupAddon, { children: /* @__PURE__ */ jsx(Icon, { name: "search" }) }),
+				/* @__PURE__ */ jsx(InputGroupInput, {
+					placeholder,
+					onChange: (event) => table.setGlobalFilter(event.target.value),
+					value: globalFilter ?? ""
+				}),
+				children
+			]
+		})
+	});
+}
+// src/components/layer-tree/layer-tree-sort.tsx
+function getColumnHeaderLabel(header, fallback) {
+	if (typeof header === "string") return header;
+	return fallback;
+}
+function LayerTreeSort({ className, children, ref, ...props }) {
+	const table = useTableContext$1(), buttonLabels = table.options.meta?.translations?.buttonLabels ?? {}, ascendingLabel = buttonLabels.ascending ?? "Ascending", descendingLabel = buttonLabels.descending ?? "Descending", handleSort = (columnId, direction) => {
+		const column = table.getColumn(columnId);
+		if (column?.getIsSorted() === direction) {
+			column?.clearSorting();
+			return;
+		}
+		column?.toggleSorting(direction === "desc", column.getCanMultiSort());
+	};
+	return /* @__PURE__ */ jsxs(Menu, { children: [/* @__PURE__ */ jsx(MenuTrigger, {
+		className: cn("shrink-0", className),
+		ref,
+		...props,
+		children: /* @__PURE__ */ jsx(Button, {
+			"aria-label": "Sort layers",
+			variant: "ghost",
+			size: "medium",
+			tone: "neutral",
+			children: /* @__PURE__ */ jsx(Icon, { name: "sort" })
+		})
+	}), /* @__PURE__ */ jsx(MenuPopup, {
+		align: "end",
+		children: /* @__PURE__ */ jsx(table.Subscribe, {
+			selector: (state) => state.sorting,
+			children: () => table.getAllColumns().filter((column) => column.getCanSort()).map((column) => /* @__PURE__ */ jsxs(MenuSubmenu, { children: [/* @__PURE__ */ jsx(MenuSubmenuTrigger, { children: getColumnHeaderLabel(column.columnDef.header, column.id) }), /* @__PURE__ */ jsxs(MenuPopup, { children: [
+				children,
+				/* @__PURE__ */ jsxs(MenuCheckboxItem, {
+					checked: column.getIsSorted() === "asc",
+					onClick: () => handleSort(column.id, "asc"),
+					children: [/* @__PURE__ */ jsx(Icon, { name: "sortDescending" }), ascendingLabel]
+				}),
+				/* @__PURE__ */ jsxs(MenuCheckboxItem, {
+					checked: column.getIsSorted() === "desc",
+					onClick: () => handleSort(column.id, "desc"),
+					children: [/* @__PURE__ */ jsx(Icon, { name: "sortAscending" }), descendingLabel]
+				})
+			] })] }, column.id))
+		})
+	})] });
+}
+// src/components/layer-tree/layer-tree-text-cell.tsx
+function LayerTreeTextCell({ size, className, children, ref, ...props }) {
+	const cell = useCellContext$1();
+	return /* @__PURE__ */ jsxs("span", {
+		className: cn(layerTreeTextCellVariants({
+			className,
+			size
+		})),
+		ref,
+		...props,
+		children: [children, cell.getValue()]
+	});
+}
+// src/components/layer-tree/layer-tree-trigger-cell.tsx
+function LayerTreeTriggerCell({ className, children, dndDisabled, onClick, ...props }) {
+	const cell = useCellContext$1(), { draggingNodeId } = useLayerTree(), { row } = cell, hasChildren = row.getCanExpand(), isSelected = row.getIsSelected(), { ref: draggableRef, isDragging } = useDraggable({
+		data: {
+			isFolder: hasChildren,
+			nodeId: row.id
+		},
+		disabled: dndDisabled,
+		id: row.id
+	}), { ref: droppableRef, isDropTarget } = useDroppable({
+		data: {
+			folderId: row.id,
+			isFolder: hasChildren,
+			nodeId: row.id
+		},
+		disabled: dndDisabled || !hasChildren,
+		id: `folder:${row.id}`
+	}), setNodeRef = (element) => {
+		draggableRef(element);
+		droppableRef(element);
+	}, selectRow = (event) => {
+		if (!row.getCanSelect()) return;
+		if (!event.shiftKey) cell.table.resetRowSelection();
+		row.getToggleSelectedHandler()({
+			shiftKey: event.shiftKey,
+			target: { checked: true }
+		});
+	}, handleClick = (event) => {
+		onClick?.(event);
+		if (event.defaultPrevented) return;
+		if (hasChildren) {
+			row.toggleExpanded();
+			return;
+		}
+		selectRow(event);
+	}, isAncestorDragging = (() => {
+		if (!draggingNodeId) return false;
+		let parent = row.getParentRow();
+		while (parent) {
+			if (parent.id === draggingNodeId) return true;
+			parent = parent.getParentRow();
+		}
+		return false;
+	})();
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		onClick: handleClick,
+		className: cn("flex h-lg min-w-0 grow items-center justify-start gap-2xs truncate rounded-lg px-2xs style-text-default-0 transition-all hover:cursor-pointer [&>svg]:size-sm [&>svg]:shrink-0", hasChildren && isDropTarget && "bg-success-container text-success-on-container ring ring-success-border", isSelected && "bg-neutral-default text-neutral-on-default", !isSelected && "hover:bg-neutral-container hover:text-neutral-on-container", (isDragging || isAncestorDragging) && "opacity-60", className),
+		ref: setNodeRef,
+		...props,
+		children: [children, cell.getValue()]
+	});
+}
+// src/components/layer-tree/layer-tree-visibility-all.tsx
+function LayerTreeVisibilityAll({ className, children, ref, ...props }) {
+	const table = useTableContext$1(), allRows = table.getCoreRowModel().flatRows, handleClick = (isVisible) => {
+		const next = !isVisible;
+		for (const leafRow of allRows) leafRow.toggleVisibility(next);
+	};
+	return /* @__PURE__ */ jsx(table.Subscribe, {
+		selector: (state) => state.rowVisibility,
+		children: () => {
+			const isVisible = allRows.some((leafRow) => leafRow.getIsVisible());
+			return /* @__PURE__ */ jsxs(Button, {
+				"aria-label": "Toggle all layers visibility",
+				size: "small",
+				tone: "neutral",
+				variant: "ghost",
+				onClick: () => handleClick(isVisible),
+				className: cn("", className),
+				ref,
+				...props,
+				children: [
+					children,
+					isVisible && /* @__PURE__ */ jsx(Icon, { name: "visible" }),
+					!isVisible && /* @__PURE__ */ jsx(Icon, { name: "hidden" })
+				]
+			});
+		}
+	});
+}
+// src/components/layer-tree/layer-tree-visibility-cell.tsx
+function LayerTreeVisibilityCell({ className, children, ref, ...props }) {
+	const cell = useCellContext$1(), table = useTableContext$1(), { row } = cell, rows = row.getLeafRows(), handleClick = (isVisible) => {
+		const next = !isVisible;
+		for (const leafRow of rows) leafRow.toggleVisibility(next);
+	};
+	if (!rows.length) rows.push(row);
+	return /* @__PURE__ */ jsx(table.Subscribe, {
+		selector: (state) => state.rowVisibility,
+		children: () => {
+			const isVisible = rows.some((leafRow) => leafRow.getIsVisible());
+			return /* @__PURE__ */ jsxs(Button, {
+				"aria-label": "Toggle layer visibility",
+				size: "small",
+				tone: "neutral",
+				variant: "ghost",
+				onClick: () => handleClick(isVisible),
+				className: cn("", className),
+				ref,
+				...props,
+				children: [
+					children,
+					isVisible && /* @__PURE__ */ jsx(Icon, { name: "visible" }),
+					!isVisible && /* @__PURE__ */ jsx(Icon, { name: "hidden" })
+				]
+			});
+		}
+	});
+}
+// src/components/layer-tree/layer-tree-table.tsx
+const { createAppColumnHelper, useAppTable, useTableContext, useCellContext, useHeaderContext } = createTableHook({
+	cellComponents: {
+		LayerTreeIconCell,
+		LayerTreeLockedCell,
+		LayerTreeNodeIcon,
+		LayerTreeTextCell,
+		LayerTreeTriggerCell,
+		LayerTreeVisibilityCell
+	},
+	cellContext,
+	features,
+	headerComponents: {},
+	headerContext,
+	tableComponents: {
+		LayerTree,
+		LayerTreeBody,
+		LayerTreeExpandAll,
+		LayerTreeFooter,
+		LayerTreeLockedAll,
+		LayerTreeRow,
+		LayerTreeSearch,
+		LayerTreeSort,
+		LayerTreeVisibilityAll
+	},
+	tableContext
+});
+export { LayerTree, LayerTreeBody, LayerTreeExpandAll, LayerTreeFooter, LayerTreeIconCell, LayerTreeLockedAll, LayerTreeLockedCell, LayerTreeNodeIcon, LayerTreeRow, LayerTreeSearch, LayerTreeSort, LayerTreeTextCell, LayerTreeTriggerCell, LayerTreeVisibilityAll, LayerTreeVisibilityCell, createAppColumnHelper as createLayerTreeColumnHelper, findLayerTreeNode, insertLayerTreeNode, features as layerTreeFeatures, moveLayerTreeNode, moveLayerTreeNodeToRoot, removeLayerTreeNode, rowLockedFeature, rowVisibilityFeature, useLayerTree, useCellContext as useLayerTreeCellContext, useTableContext as useLayerTreeContext, useHeaderContext as useLayerTreeHeaderContext, useAppTable as useLayerTreeTable };
+
+//# sourceMappingURL=index.js.map