@vuu-ui/grid-layout 4.0.0-alpha.1

package/src/GridPlaceholder.css.js

@@ -0,0 +1,9 @@
+const css = `
+.vuuGridPlaceholder {
+  background-color: #ff0c0c1a;
+  position: relative;
+}
+
+
+`;
+export default css;

package/src/GridPlaceholder.js

@@ -0,0 +1,24 @@
+import { jsx } from "react/jsx-runtime";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import { useAsDropTarget } from "./useAsDropTarget.js";
+import GridPlaceholder from "./GridPlaceholder.css";
+import { registerComponent } from "@vuu-ui/vuu-utils";
+const classBase = "vuuGridPlaceholder";
+const GridPlaceholder_GridPlaceholder = ({ ...htmlAttributes })=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-grid-layout-placeholder",
+        css: GridPlaceholder,
+        window: targetWindow
+    });
+    const dragDropHandlers = useAsDropTarget();
+    return /*#__PURE__*/ jsx("div", {
+        ...htmlAttributes,
+        ...dragDropHandlers,
+        className: `${classBase} vuuGridLayoutItem`,
+        "data-drop-target": true
+    });
+};
+registerComponent("GridPlaceholder", GridPlaceholder_GridPlaceholder, "component");
+export { GridPlaceholder_GridPlaceholder as GridPlaceholder };

package/src/GridSnapshot.js

@@ -0,0 +1,11 @@
+class GridSnapshotValidationError extends Error {
+    issues;
+    constructor(issues){
+        super(issues.map(({ message, path })=>`${path}: ${message}`).join("; "));
+        this.name = "GridSnapshotValidationError";
+        this.issues = [
+            ...issues
+        ];
+    }
+}
+export { GridSnapshotValidationError };

package/src/GridSplitter.css.js

@@ -0,0 +1,62 @@
+const css = `
+.vuuGridSplitter {
+  --splitter-background: var(--salt-separable-secondary-borderColor);
+  --splitter-borderColor: white;
+  --splitter-borderStyle: none;
+  --splitter-borderWidth: 3px;
+  --splitter-size: 7px;
+  background-color: var(--splitter-background);
+  border-color: var(--splitter-borderColor);
+  border-style: var(--splitter-borderStyle);
+  border-width: var(--splitter-borderWidth);
+  z-index: 1;
+  position: relative;
+
+  & .vuu-grab-zone {
+    cursor: inherit;
+    background-color: #ffffff03;
+    position: absolute;
+  }
+}
+
+.vuuGridSplitter:hover, .vuuGridSplitter-active {
+  --splitter-background: var(--salt-separable-primary-borderColor);
+}
+
+.vuuGridSplitter[aria-orientation="vertical"] {
+  --splitter-borderStyle: none solid;
+  cursor: ew-resize;
+  width: var(--splitter-size);
+
+  & .vuu-grab-zone {
+    inset: -5px 0;
+  }
+}
+
+.vuuGridSplitter-offset-start[aria-orientation="vertical"] {
+  margin-block-start: var(--splitter-size);
+
+  & .vuu-grab-zone {
+    top: 0;
+  }
+}
+
+.vuuGridSplitter[aria-orientation="horizontal"] {
+  --splitter-borderStyle: solid none;
+  cursor: ns-resize;
+  height: var(--splitter-size);
+
+  & .vuu-grab-zone {
+    inset: 0 -5px;
+  }
+}
+
+.vuuGridSplitter-active[aria-orientation="vertical"] {
+  & .vuu-grab-zone {
+    inset: 0 -150px;
+  }
+}
+
+
+`;
+export default css;

package/src/GridSplitter.js

@@ -0,0 +1,26 @@
+import { jsx } from "react/jsx-runtime";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import GridSplitter from "./GridSplitter.css";
+const GridSplitter_GridSplitter = ({ "aria-controls": ariaControls, ariaOrientation, offsetStart, orientation, ...htmlAttributes })=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-grid-splitter",
+        css: GridSplitter,
+        window: targetWindow
+    });
+    const id = `${ariaControls}-splitter-${orientation[0]}`;
+    return /*#__PURE__*/ jsx("div", {
+        ...htmlAttributes,
+        "aria-controls": ariaControls,
+        "aria-orientation": ariaOrientation,
+        className: `vuuGridSplitter${offsetStart ? " vuuGridSplitter-offset-start" : ""}`,
+        draggable: true,
+        id: id,
+        role: "separator",
+        children: /*#__PURE__*/ jsx("div", {
+            className: "vuu-grab-zone"
+        })
+    });
+};
+export { GridSplitter_GridSplitter as GridSplitter };

package/src/GridStack.js

@@ -0,0 +1,277 @@
+import { GridSnapshotValidationError } from "./GridSnapshot.js";
+const MIN_GRID_STACK_MEMBERS = 2;
+const ok = (value)=>({
+        ok: true,
+        value
+    });
+const failure = (code, message)=>({
+        error: {
+            code,
+            message
+        },
+        ok: false
+    });
+const cloneSpan = ({ span, start })=>({
+        span,
+        start
+    });
+const cloneArea = ({ column, row })=>({
+        column: cloneSpan(column),
+        row: cloneSpan(row)
+    });
+const cloneMember = ({ id, label, title })=>({
+        id,
+        label,
+        title
+    });
+const cloneMetadata = ({ minHeight, minWidth, resizeable })=>({
+        minHeight,
+        minWidth,
+        resizeable
+    });
+const cloneGridStackState = (state)=>({
+        area: cloneArea(state.area),
+        id: state.id,
+        members: state.members.map(cloneMember),
+        metadata: cloneMetadata(state.metadata),
+        selectedItemId: state.selectedItemId
+    });
+const gridStackItemIds = (state)=>state.members.map(({ id })=>id);
+const findGridStackMember = (state, itemId)=>state.members.find(({ id })=>id === itemId);
+const gridStackMemberIndex = (state, itemId)=>state.members.findIndex(({ id })=>id === itemId);
+const gridStackSelectedIndex = (state)=>gridStackMemberIndex(state, state.selectedItemId);
+const toGridStackSnapshot = (state)=>({
+        id: state.id,
+        itemIds: [
+            ...gridStackItemIds(state)
+        ],
+        selectedItemId: state.selectedItemId
+    });
+const sameMembers = (left, right)=>left.length === right.length && left.every((member, index)=>member.id === right[index].id && member.label === right[index].label && member.title === right[index].title);
+const sameOrder = (left, right)=>left.length === right.length && left.every((member, index)=>member.id === right[index].id);
+const sameSpan = (left, right)=>left.span === right.span && left.start === right.start;
+const sameArea = (left, right)=>sameSpan(left.column, right.column) && sameSpan(left.row, right.row);
+const sameMetadata = (left, right)=>left.minHeight === right.minHeight && left.minWidth === right.minWidth && left.resizeable === right.resizeable;
+const isSameGridStackState = (left, right)=>left.id === right.id && left.selectedItemId === right.selectedItemId && sameArea(left.area, right.area) && sameMetadata(left.metadata, right.metadata) && sameMembers(left.members, right.members);
+const normalizeGridStackState = (state)=>{
+    const members = [];
+    const seen = new Set();
+    for (const member of state.members)if (member.id && !seen.has(member.id)) {
+        seen.add(member.id);
+        members.push(cloneMember(member));
+    }
+    return {
+        area: cloneArea(state.area),
+        id: state.id,
+        members,
+        metadata: cloneMetadata(state.metadata),
+        selectedItemId: seen.has(state.selectedItemId) ? state.selectedItemId : members[0]?.id ?? ""
+    };
+};
+const validateSpan = (span, path, issues)=>{
+    if (!span || !Number.isInteger(span.start) || !Number.isInteger(span.span) || span.start < 1 || span.span < 1) issues.push({
+        code: "INVALID_SPAN",
+        message: "stack area must use positive integer grid lines",
+        path
+    });
+};
+const validateGridStackState = (state, { itemAreas, path = "$" } = {})=>{
+    const issues = [];
+    if (!state.id) issues.push({
+        code: "EMPTY_ID",
+        message: "stack id must not be empty",
+        path: `${path}.id`
+    });
+    validateSpan(state.area?.column, `${path}.area.column`, issues);
+    validateSpan(state.area?.row, `${path}.area.row`, issues);
+    if (state.members.length < MIN_GRID_STACK_MEMBERS) issues.push({
+        code: "INVALID_STACK_MEMBERSHIP",
+        message: `a stack must contain at least ${MIN_GRID_STACK_MEMBERS} items`,
+        path: `${path}.members`
+    });
+    const seen = new Set();
+    state.members.forEach((member, index)=>{
+        const memberPath = `${path}.members[${index}]`;
+        if (!member.id) return void issues.push({
+            code: "EMPTY_ID",
+            message: "stack member id must not be empty",
+            path: `${memberPath}.id`
+        });
+        if (seen.has(member.id)) issues.push({
+            code: "DUPLICATE_ID",
+            message: `item "${member.id}" appears more than once in stack "${state.id}"`,
+            path: `${memberPath}.id`
+        });
+        seen.add(member.id);
+        if ("string" != typeof member.label) issues.push({
+            code: "INVALID_FIELD",
+            message: "stack member label must be a string",
+            path: `${memberPath}.label`
+        });
+        if (itemAreas) {
+            const area = itemAreas.get(member.id);
+            if (area) {
+                if (state.area && !sameArea(area, state.area)) issues.push({
+                    code: "INVALID_STACK_POSITION",
+                    message: `item "${member.id}" does not occupy the stack area`,
+                    path: `${memberPath}.id`
+                });
+            } else issues.push({
+                code: "INVALID_STACK_MEMBERSHIP",
+                message: `item "${member.id}" is not a grid item`,
+                path: `${memberPath}.id`
+            });
+        }
+    });
+    if (!state.selectedItemId || !seen.has(state.selectedItemId)) issues.push({
+        code: "INVALID_STACK_SELECTION",
+        message: `selected item "${state.selectedItemId}" is not a stack member`,
+        path: `${path}.selectedItemId`
+    });
+    return issues;
+};
+const assertValidGridStackState = (state, options)=>{
+    const issues = validateGridStackState(state, options);
+    if (issues.length > 0) throw new GridSnapshotValidationError(issues);
+    return state;
+};
+const buildTransition = ({ added = [], dissolved = false, operation, positioned = false, previous, removed = [], state })=>{
+    const orderChanged = void 0 === previous || !sameOrder(previous.members, state.members);
+    const selectionChanged = void 0 === previous || previous.selectedItemId !== state.selectedItemId;
+    return {
+        added: added.map(cloneMember),
+        changed: void 0 === previous || dissolved || !isSameGridStackState(previous, state),
+        dissolved,
+        operation,
+        orderChanged,
+        positioned,
+        previous,
+        removed: removed.map(cloneMember),
+        selectionChanged,
+        stackId: state.id,
+        state
+    };
+};
+const createGridStack = (request)=>{
+    if (!request.id) return failure("INVALID_ITEM", "A grid stack requires a stack id");
+    const ids = new Set();
+    for (const { id } of request.members){
+        if (!id) return failure("INVALID_ITEM", "A stack member requires an item id");
+        if (ids.has(id)) return failure("DUPLICATE_ITEM_ID", `Grid item #${id} cannot be stacked twice`);
+        ids.add(id);
+    }
+    if (ids.size < MIN_GRID_STACK_MEMBERS) return failure("INVALID_TARGET", `A new stack requires at least ${MIN_GRID_STACK_MEMBERS} items`);
+    if (request.selectedItemId && !ids.has(request.selectedItemId)) return failure("TAB_NOT_FOUND", `Grid tab #${request.selectedItemId} is not a member of stack #${request.id}`);
+    const state = normalizeGridStackState({
+        area: request.area,
+        id: request.id,
+        members: request.members,
+        metadata: request.metadata ?? {},
+        selectedItemId: request.selectedItemId ?? request.members[0].id
+    });
+    return ok(buildTransition({
+        added: state.members,
+        operation: "create",
+        previous: void 0,
+        state
+    }));
+};
+const addGridStackItem = (state, { member, position, select })=>{
+    if (!member.id) return failure("INVALID_ITEM", "A stack member requires an item id");
+    if (findGridStackMember(state, member.id)) return failure("DUPLICATE_ITEM_ID", `Grid item #${member.id} is already a member of stack #${state.id}`);
+    const members = state.members.map(cloneMember);
+    const added = cloneMember(member);
+    let index = members.length;
+    if (position) {
+        const targetIndex = members.findIndex(({ id })=>id === position.targetItemId);
+        if (-1 === targetIndex) return failure("TAB_NOT_FOUND", `Grid tab #${position.targetItemId} not found in stack #${state.id}`);
+        index = "after" === position.placement ? targetIndex + 1 : targetIndex;
+    }
+    members.splice(index, 0, added);
+    const selectAdded = select ?? void 0 !== position;
+    const next = normalizeGridStackState({
+        ...state,
+        members,
+        selectedItemId: selectAdded ? added.id : state.selectedItemId
+    });
+    return ok(buildTransition({
+        added: [
+            added
+        ],
+        operation: "add",
+        positioned: void 0 !== position,
+        previous: state,
+        state: next
+    }));
+};
+const removeGridStackItem = (state, { itemId })=>{
+    const index = gridStackMemberIndex(state, itemId);
+    if (-1 === index) return failure("TAB_NOT_FOUND", `Grid tab #${itemId} not found in stack #${state.id}`);
+    const removed = state.members[index];
+    const members = state.members.filter(({ id })=>id !== itemId).map(cloneMember);
+    const selectedItemId = state.selectedItemId === itemId ? members[Math.min(index, members.length - 1)]?.id ?? "" : state.selectedItemId;
+    const next = normalizeGridStackState({
+        ...state,
+        members,
+        selectedItemId
+    });
+    return ok(buildTransition({
+        dissolved: members.length < MIN_GRID_STACK_MEMBERS,
+        operation: "remove",
+        previous: state,
+        removed: [
+            removed
+        ],
+        state: next
+    }));
+};
+const selectGridStackItem = (state, { itemId })=>{
+    if (!findGridStackMember(state, itemId)) return failure("TAB_NOT_FOUND", `Grid tab #${itemId} not found in stack #${state.id}`);
+    const next = state.selectedItemId === itemId ? state : cloneGridStackState({
+        ...state,
+        selectedItemId: itemId
+    });
+    return ok(buildTransition({
+        operation: "select",
+        previous: state,
+        state: next
+    }));
+};
+const reorderGridStackItem = (state, { activate = false, itemId, placement, targetItemId })=>{
+    const index = gridStackMemberIndex(state, itemId);
+    if (-1 === index) return failure("TAB_NOT_FOUND", `Grid tab #${itemId} not found in stack #${state.id}`);
+    if (-1 === gridStackMemberIndex(state, targetItemId)) return failure("TAB_NOT_FOUND", `Grid tab #${targetItemId} not found in stack #${state.id}`);
+    if (itemId === targetItemId) return failure("INVALID_TARGET", "A tab cannot be reordered relative to itself");
+    const members = state.members.map(cloneMember);
+    const [moved] = members.splice(index, 1);
+    const targetIndex = members.findIndex(({ id })=>id === targetItemId);
+    members.splice("after" === placement ? targetIndex + 1 : targetIndex, 0, moved);
+    const next = normalizeGridStackState({
+        ...state,
+        members,
+        selectedItemId: activate ? itemId : state.selectedItemId
+    });
+    return ok(buildTransition({
+        operation: "reorder",
+        previous: state,
+        state: next
+    }));
+};
+const renameGridStackItem = (state, { itemId, title })=>{
+    const member = findGridStackMember(state, itemId);
+    if (!member) return failure("TAB_NOT_FOUND", `Grid tab #${itemId} not found in stack #${state.id}`);
+    const next = cloneGridStackState({
+        ...state,
+        members: state.members.map((current)=>current.id === itemId ? {
+                ...current,
+                label: title,
+                title
+            } : current)
+    });
+    return ok(buildTransition({
+        operation: "rename",
+        previous: state,
+        state: next
+    }));
+};
+export { MIN_GRID_STACK_MEMBERS, addGridStackItem, assertValidGridStackState, cloneGridStackState, createGridStack, findGridStackMember, gridStackItemIds, gridStackMemberIndex, gridStackSelectedIndex, isSameGridStackState, normalizeGridStackState, removeGridStackItem, renameGridStackItem, reorderGridStackItem, selectGridStackItem, toGridStackSnapshot, validateGridStackState };

package/src/Icon.css.js

@@ -0,0 +1,8 @@
+const css = `
+.vuuIcon {
+  --vuu-icon-left: 0;
+}
+
+
+`;
+export default css;

package/src/Icon.js

@@ -0,0 +1,26 @@
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import Icon from "./Icon.css";
+const classBase = "vuuIcon";
+const Icon_Icon = ({ className, name, size, style: styleProp, ...htmlAttributes })=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-icon",
+        css: Icon,
+        window: targetWindow
+    });
+    const style = "number" == typeof size ? {
+        ...styleProp,
+        "--vuu-icon-size": `${size}px`
+    } : styleProp;
+    return /*#__PURE__*/ jsx("span", {
+        ...htmlAttributes,
+        className: clsx(classBase, className),
+        "data-icon": name,
+        role: "img",
+        style: style
+    });
+};
+export { Icon_Icon as Icon };

package/src/IconButton.css.js

@@ -0,0 +1,9 @@
+const css = `
+.vuuIconButton {
+  --saltButton-padding: 0;
+  --saltButton-minWidth: var(--salt-size-base);
+}
+
+
+`;
+export default css;

package/src/IconButton.js

@@ -0,0 +1,28 @@
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { Button } from "@salt-ds/core";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import { Icon } from "./Icon.js";
+import { forwardRef } from "react";
+import IconButton_0 from "./IconButton.css";
+const classBase = "vuuIconButton";
+const IconButton_IconButton = /*#__PURE__*/ forwardRef(function({ "aria-label": ariaLabel, className, icon, size, ...buttonProps }, ref) {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-icon-button",
+        css: IconButton_0,
+        window: targetWindow
+    });
+    return /*#__PURE__*/ jsx(Button, {
+        ...buttonProps,
+        className: clsx(classBase, className),
+        ref: ref,
+        children: /*#__PURE__*/ jsx(Icon, {
+            "aria-label": ariaLabel,
+            name: icon,
+            size: size
+        })
+    });
+});
+export { IconButton_IconButton as IconButton };

package/src/TabDialog.css.js

@@ -0,0 +1,10 @@
+const css = `
+.TabDialog.saltDialog {
+  & .TabDialog-content {
+    padding: 3px;
+  }
+}
+
+
+`;
+export default css;

package/src/TabDialog.js

@@ -0,0 +1,77 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button, Dialog, DialogActions, DialogContent, DialogHeader, FormField, FormFieldLabel, Input } from "@salt-ds/core";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import { useCallback, useState } from "react";
+import TabDialog from "./TabDialog.css";
+const TabDialog_TabDialog = ({ open, onConfirm, onCancel, style, tabLabel = "", title = "Add new tab" })=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-tab-dialog",
+        css: TabDialog,
+        window: targetWindow
+    });
+    const [value, setValue] = useState(tabLabel);
+    const inputCallbackRef = useCallback((el)=>{
+        if (el) el.select();
+    }, []);
+    const handleKeyDown = useCallback((evt)=>{
+        if ("Enter" === evt.key && value !== tabLabel) onConfirm(value);
+    }, [
+        onConfirm,
+        tabLabel,
+        value
+    ]);
+    return /*#__PURE__*/ jsxs(Dialog, {
+        open: open,
+        className: "TabDialog",
+        style: style,
+        children: [
+            /*#__PURE__*/ jsx(DialogHeader, {
+                header: title
+            }),
+            /*#__PURE__*/ jsx(DialogContent, {
+                children: /*#__PURE__*/ jsx("div", {
+                    className: "TabDialog-content",
+                    children: /*#__PURE__*/ jsxs(FormField, {
+                        children: [
+                            /*#__PURE__*/ jsx(FormFieldLabel, {
+                                children: "New tab name"
+                            }),
+                            /*#__PURE__*/ jsx(Input, {
+                                inputRef: inputCallbackRef,
+                                value: value,
+                                onChange: (event)=>{
+                                    setValue(event.target.value);
+                                },
+                                inputProps: {
+                                    onKeyDown: handleKeyDown
+                                }
+                            })
+                        ]
+                    })
+                })
+            }),
+            /*#__PURE__*/ jsxs(DialogActions, {
+                children: [
+                    /*#__PURE__*/ jsx(Button, {
+                        appearance: "solid",
+                        sentiment: "negative",
+                        onClick: onCancel,
+                        children: "Cancel"
+                    }),
+                    /*#__PURE__*/ jsx(Button, {
+                        disabled: "" === value.trim(),
+                        appearance: "solid",
+                        sentiment: "accented",
+                        onClick: ()=>{
+                            onConfirm(value);
+                        },
+                        children: "Confirm"
+                    })
+                ]
+            })
+        ]
+    });
+};
+export { TabDialog_TabDialog as TabDialog };

package/src/TabMenu.css.js

@@ -0,0 +1,8 @@
+const css = `
+.TabMenuButton {
+  --saltButton-padding: var(--salt-spacing-200);
+}
+
+
+`;
+export default css;

package/src/TabMenu.js

@@ -0,0 +1,78 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Icon } from "@vuu-ui/vuu-ui-controls";
+import { Button, Menu, MenuItem, MenuPanel, MenuTrigger } from "@salt-ds/core";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import TabMenu from "./TabMenu.css";
+import { useGridLayoutDispatch } from "./GridLayoutContext.js";
+import { useCallback, useMemo } from "react";
+import { useEditTabName } from "./useEditTabName.js";
+const TabMenu_TabMenu = ({ allowClose = true, allowRename = true, layoutItemId, tabLabel })=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-tab-menu",
+        css: TabMenu,
+        window: targetWindow
+    });
+    const { dialog, showTabEditDialog } = useEditTabName({
+        id: layoutItemId,
+        mode: "edit",
+        tabLabel
+    });
+    const dispatch = useGridLayoutDispatch();
+    const closeTab = useCallback(()=>{
+        dispatch({
+            type: "close",
+            id: layoutItemId
+        });
+    }, [
+        dispatch,
+        layoutItemId
+    ]);
+    const renameTab = useCallback(()=>{
+        showTabEditDialog();
+    }, [
+        showTabEditDialog
+    ]);
+    const menuItems = useMemo(()=>{
+        const items = [];
+        if (allowClose) items.push(/*#__PURE__*/ jsx(MenuItem, {
+            onClick: closeTab,
+            children: "Close"
+        }, "close"));
+        if (allowRename) items.push(/*#__PURE__*/ jsx(MenuItem, {
+            onClick: renameTab,
+            children: "Rename"
+        }, "rename"));
+        return items;
+    }, [
+        allowClose,
+        allowRename,
+        closeTab,
+        renameTab
+    ]);
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsxs(Menu, {
+                children: [
+                    /*#__PURE__*/ jsx(MenuTrigger, {
+                        children: /*#__PURE__*/ jsx(Button, {
+                            "aria-label": `${tabLabel} Settings`,
+                            className: "TabMenuButton",
+                            "data-embedded": true,
+                            children: /*#__PURE__*/ jsx(Icon, {
+                                "aria-hidden": true,
+                                name: "more-vert"
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(MenuPanel, {
+                        children: menuItems
+                    })
+                ]
+            }),
+            dialog
+        ]
+    });
+};
+export { TabMenu_TabMenu as TabMenu };