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

package/src/GridLayoutProvider.js

@@ -0,0 +1,263 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, createElement, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { GridLayoutDocumentCodecError, decodeGridLayoutDocument, encodeGridLayoutDocument, immutableGridLayoutDocument } from "./GridLayoutDocument.js";
+import { createLegacyGridLayoutReader } from "./GridLayoutLegacyCompatibility.js";
+import { gridSnapshotToGridLayoutDescriptor } from "./grid-snapshot-adapters.js";
+import { GridLayoutItem } from "./GridLayoutItem.js";
+import { TemplateDragSession, TemplateDragSessionContext, useTemplateDragSession } from "./drag-drop-next/TemplateDragSession.js";
+import { isTypedComponentTemplate } from "./GridLayoutContext.js";
+const GridLayoutProviderContext = /*#__PURE__*/ createContext({});
+class GridLayoutDocumentController {
+    #change;
+    #document;
+    #listeners = new Set();
+    constructor(document){
+        this.#document = document ? immutableGridLayoutDocument(document) : void 0;
+    }
+    getSnapshot = ()=>this.#document;
+    getChange = ()=>this.#change;
+    subscribe = (listener)=>{
+        this.#listeners.add(listener);
+        return ()=>this.#listeners.delete(listener);
+    };
+    replace(document) {
+        const immutableDocument = document ? immutableGridLayoutDocument(document) : void 0;
+        if (this.#document === document) return;
+        this.#document = immutableDocument;
+        this.#change = void 0;
+        this.#notify();
+    }
+    publish(change) {
+        this.#document = change.document;
+        this.#change = change;
+        this.#notify();
+    }
+    #notify() {
+        for (const listener of [
+            ...this.#listeners
+        ])if (this.#listeners.has(listener)) listener();
+    }
+}
+const resolveDocument = (document, settingsCodecs, componentRenderers)=>{
+    if (void 0 === document) return {
+        ok: true,
+        value: void 0
+    };
+    if (!settingsCodecs || !componentRenderers) return {
+        error: {
+            code: "INVALID_DOCUMENT",
+            message: "GridLayoutProvider document requires settingsCodecs and componentRenderers",
+            path: "$"
+        },
+        ok: false
+    };
+    const decoded = decodeGridLayoutDocument(document, settingsCodecs);
+    if (!decoded.ok) return decoded;
+    const componentById = new Map();
+    for(let index = 0; index < decoded.value.components.length; index += 1){
+        const component = decoded.value.components[index];
+        try {
+            componentById.set(component.id, componentRenderers.render(component));
+        } catch (cause) {
+            return {
+                error: {
+                    code: "COMPONENT_RENDERER_ERROR",
+                    message: cause instanceof Error ? cause.message : `Unable to render component "${component.id}"`,
+                    path: `$.components[${index}]`
+                },
+                ok: false
+            };
+        }
+    }
+    return {
+        ok: true,
+        value: {
+            componentById,
+            decodedSettings: decoded.value.components.map(({ id, settings, type })=>({
+                    id,
+                    settings,
+                    type
+                })),
+            layout: gridSnapshotToGridLayoutDescriptor(decoded.value.snapshot),
+            document: decoded.value.document,
+            placeholderIds: [
+                ...decoded.value.document.layout.placeholderIds
+            ],
+            snapshot: decoded.value.snapshot
+        }
+    };
+};
+const GridLayoutProvider = (props)=>{
+    const { children, componentRenderers, componentSettings, document, documentController, onDocumentChange, onDocumentError, serializedLayout, settingsCodecs, options } = props;
+    const inheritedTemplateDragSession = useTemplateDragSession();
+    const localTemplateDragSession = useMemo(()=>new TemplateDragSession(), []);
+    const templateDragSession = inheritedTemplateDragSession ?? localTemplateDragSession;
+    const runtimeComponentSettings = useRef(new Map());
+    const templateComponentIds = useRef(new Set());
+    const documentResolution = useMemo(()=>resolveDocument(document, settingsCodecs, componentRenderers), [
+        componentRenderers,
+        document,
+        settingsCodecs
+    ]);
+    const [decodedDocument, setDecodedDocument] = useState(()=>documentResolution.ok ? documentResolution.value : void 0);
+    const reportedError = useRef(void 0);
+    useEffect(()=>{
+        if (documentResolution.ok) {
+            reportedError.current = void 0;
+            setDecodedDocument(documentResolution.value);
+            const nextSettings = new Map((componentSettings ?? documentResolution.value?.decodedSettings ?? []).map((component)=>[
+                    component.id,
+                    component
+                ]));
+            for (const componentId of templateComponentIds.current){
+                const runtimeSettings = runtimeComponentSettings.current.get(componentId);
+                if (runtimeSettings) nextSettings.set(componentId, runtimeSettings);
+            }
+            runtimeComponentSettings.current = nextSettings;
+            if (documentController && documentResolution.value && void 0 === documentController.getSnapshot()) documentController.replace(documentResolution.value.document);
+        } else if (reportedError.current !== documentResolution && onDocumentError) {
+            reportedError.current = documentResolution;
+            onDocumentError(documentResolution.error);
+        } else if (!onDocumentError) throw new GridLayoutDocumentCodecError(documentResolution.error);
+    }, [
+        componentSettings,
+        documentController,
+        documentResolution,
+        onDocumentError
+    ]);
+    const legacyReader = useMemo(()=>serializedLayout ? createLegacyGridLayoutReader(serializedLayout) : void 0, [
+        serializedLayout
+    ]);
+    const getSavedGrid = useCallback((id)=>{
+        if (decodedDocument?.snapshot.gridId === id) return {
+            components: Object.fromEntries(decodedDocument.snapshot.items.flatMap((item)=>{
+                const { column, componentInstanceId, dropTarget, id: itemId, row, ...metadata } = item;
+                const component = decodedDocument.componentById.get(componentInstanceId ?? itemId);
+                return component ? [
+                    [
+                        itemId,
+                        /*#__PURE__*/ createElement(GridLayoutItem, {
+                            ...metadata,
+                            "data-drop-target": dropTarget,
+                            id: itemId,
+                            key: itemId,
+                            style: {
+                                gridArea: `${row.start}/${column.start}/${row.start + row.span}/${column.start + column.span}`
+                            }
+                        }, component)
+                    ]
+                ] : [];
+            })),
+            id,
+            layout: decodedDocument.layout,
+            placeholderIds: decodedDocument.placeholderIds
+        };
+        return legacyReader?.getSavedGrid(id);
+    }, [
+        decodedDocument,
+        legacyReader
+    ]);
+    const renderTemplateComponent = useCallback((template, id)=>{
+        if (!isTypedComponentTemplate(template)) return;
+        if (!settingsCodecs || !componentRenderers) throw new Error("Typed component templates require settingsCodecs and componentRenderers");
+        const decoded = settingsCodecs.decode({
+            id,
+            ...template.component
+        });
+        if (!decoded.ok) throw new GridLayoutDocumentCodecError({
+            code: "COMPONENT_SETTINGS_ERROR",
+            componentError: decoded.error,
+            message: decoded.error.message,
+            path: "$.component",
+            version: decoded.error.version
+        });
+        runtimeComponentSettings.current.set(id, {
+            id,
+            settings: decoded.value.settings,
+            type: decoded.value.type
+        });
+        templateComponentIds.current.add(id);
+        return componentRenderers.render(decoded.value);
+    }, [
+        componentRenderers,
+        settingsCodecs
+    ]);
+    const releaseTemplateComponent = useCallback((id)=>{
+        runtimeComponentSettings.current.delete(id);
+        templateComponentIds.current.delete(id);
+    }, []);
+    const onCommittedSnapshot = useCallback((transition, placeholderIds)=>{
+        if (!onDocumentChange && !documentController) return;
+        if (!settingsCodecs) {
+            const error = {
+                code: "INVALID_DOCUMENT",
+                message: "onDocumentChange requires a GridComponentSettingsRegistry",
+                path: "$.components"
+            };
+            if (onDocumentError) return void onDocumentError(error);
+            throw new GridLayoutDocumentCodecError(error);
+        }
+        const { previous, snapshot } = transition;
+        const availableSettings = [
+            ...runtimeComponentSettings.current.values()
+        ];
+        const referencedComponentIds = new Set(snapshot.items.map(({ componentInstanceId, id })=>componentInstanceId ?? id));
+        const settings = availableSettings.filter(({ id })=>referencedComponentIds.has(id));
+        const encoded = encodeGridLayoutDocument(snapshot, settingsCodecs, {
+            componentSettings: settings,
+            placeholderIds
+        });
+        if (encoded.ok) {
+            const currentComponentIds = new Set(snapshot.items.map(({ componentInstanceId, id })=>componentInstanceId ?? id));
+            const removedComponentInstanceIds = previous.items.map(({ componentInstanceId, id })=>componentInstanceId ?? id).filter((componentId)=>!currentComponentIds.has(componentId) && runtimeComponentSettings.current.has(componentId));
+            const change = {
+                document: encoded.value,
+                kind: transition.kind,
+                removedComponentInstanceIds,
+                revision: snapshot.revision
+            };
+            documentController?.publish(change);
+            onDocumentChange?.(encoded.value, change);
+            for (const componentId of removedComponentInstanceIds){
+                runtimeComponentSettings.current.delete(componentId);
+                templateComponentIds.current.delete(componentId);
+            }
+        } else if (onDocumentError) onDocumentError(encoded.error);
+        else throw new GridLayoutDocumentCodecError(encoded.error);
+    }, [
+        documentController,
+        onDocumentChange,
+        onDocumentError,
+        settingsCodecs
+    ]);
+    return /*#__PURE__*/ jsx(TemplateDragSessionContext.Provider, {
+        value: templateDragSession,
+        children: /*#__PURE__*/ jsx(GridLayoutProviderContext.Provider, {
+            value: {
+                getSavedGrid,
+                onCommittedSnapshot,
+                options,
+                releaseTemplateComponent,
+                renderTemplateComponent
+            },
+            children: void 0 !== document && void 0 === decodedDocument ? null : children
+        })
+    });
+};
+const useGridChangeHandler = ()=>{
+    const { onCommittedSnapshot, releaseTemplateComponent, renderTemplateComponent } = useContext(GridLayoutProviderContext);
+    return {
+        onCommittedSnapshot,
+        releaseTemplateComponent,
+        renderTemplateComponent
+    };
+};
+const useSavedGrid = ()=>{
+    const { getSavedGrid } = useContext(GridLayoutProviderContext);
+    return getSavedGrid;
+};
+const useGridLayoutOptions = ()=>{
+    const { options } = useContext(GridLayoutProviderContext);
+    return options;
+};
+export { GridLayoutDocumentController, GridLayoutProvider, useGridChangeHandler, useGridLayoutOptions, useSavedGrid };

package/src/GridLayoutStackedItem.css.js

@@ -0,0 +1,26 @@
+const css = `
+.vuuGridLayoutStackedItem {
+  & .saltTabsNext {
+    & .saltTabBar {
+      justify-content: flex-start;
+    }
+
+    & .saltTabListNext {
+      width: auto;
+    }
+
+    margin-top: 3px;
+
+    & .saltTabNext {
+      margin-left: 2px;
+
+      &:first-child {
+        margin-left: 0;
+      }
+    }
+  }
+}
+
+
+`;
+export default css;

package/src/GridLayoutStackedtem.js

@@ -0,0 +1,140 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createElement, useCallback, useEffect } from "react";
+import { Tab, TabBar, TabList, TabTrigger, Tabs } from "@salt-ds/core";
+import { IconButton } from "@vuu-ui/vuu-ui-controls";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import clsx from "clsx";
+import { useDragContext } from "./drag-drop-next/DragDropProviderNext.js";
+import { useGridLayoutDispatch, useGridSnapshot } from "./GridLayoutContext.js";
+import { resolveMinimumGridItemSize } from "./GridModel.js";
+import { TabMenu } from "./TabMenu.js";
+import { useEditTabName } from "./useEditTabName.js";
+import { useGridChildProps } from "./useGridChildProps.js";
+import GridLayoutStackedItem from "./GridLayoutStackedItem.css";
+const classBaseItem = "vuuGridLayoutStackedItem";
+const GridLayoutStackedtem_GridLayoutStackedItem = ({ allowAddTab, children, className: classNameProp, header, id, getNewComponent, minHeight, minWidth, resizeable, showMenu, style: styleProp, title, ...htmlAttributes })=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-grid-layout-stacked-item",
+        css: GridLayoutStackedItem,
+        window: targetWindow
+    });
+    const { dialog, showTabEditDialog } = useEditTabName({
+        getNewComponent,
+        id
+    });
+    const { registerTabsForDragDrop } = useDragContext();
+    const modelMinHeight = resolveMinimumGridItemSize(minHeight, styleProp?.minHeight);
+    const modelMinWidth = resolveMinimumGridItemSize(minWidth, styleProp?.minWidth);
+    const { gridArea, horizontalSplitter, verticalSplitter } = useGridChildProps({
+        id,
+        minHeight: modelMinHeight,
+        minWidth: modelMinWidth,
+        resizeable,
+        style: styleProp,
+        type: "stacked-content"
+    });
+    const dispatch = useGridLayoutDispatch();
+    const snapshot = useGridSnapshot();
+    const stack = snapshot.stacks.find((candidate)=>candidate.id === id);
+    if (!stack) throw Error(`[GridLayoutStackedItem] canonical stack #${id} not found`);
+    const itemById = new Map(snapshot.items.map((item)=>[
+            item.id,
+            item
+        ]));
+    const tabOrderKey = stack.itemIds.join("\u0000");
+    useEffect(()=>tabOrderKey ? registerTabsForDragDrop(id) : void 0, [
+        id,
+        registerTabsForDragDrop,
+        tabOrderKey
+    ]);
+    const handleTabSelectionChange = useCallback((_, value)=>{
+        dispatch({
+            type: "select-tab",
+            itemId: value,
+            stackId: id
+        });
+    }, [
+        dispatch,
+        id
+    ]);
+    const className = clsx(classBaseItem, "vuuGridLayoutItem", {
+        "has-h-splitter": horizontalSplitter,
+        "has-v-splitter": verticalSplitter
+    });
+    const style = {
+        ...styleProp,
+        gridArea,
+        ...void 0 === minHeight ? {} : {
+            minHeight
+        },
+        ...void 0 === minWidth ? {} : {
+            minWidth
+        }
+    };
+    const tabsId = `tabs-${id}`;
+    const handleClickAddTab = useCallback(()=>{
+        showTabEditDialog();
+    }, [
+        showTabEditDialog
+    ]);
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ createElement("div", {
+                ...htmlAttributes,
+                className: clsx(className),
+                id: id,
+                key: id,
+                style: style
+            }, /*#__PURE__*/ jsx(Tabs, {
+                onChange: handleTabSelectionChange,
+                value: stack.selectedItemId,
+                children: /*#__PURE__*/ jsxs(TabBar, {
+                    divider: true,
+                    children: [
+                        /*#__PURE__*/ jsx(TabList, {
+                            appearance: "transparent",
+                            className: "vuuDragContainer",
+                            id: tabsId,
+                            children: stack.itemIds.map((gridLayoutItemId, index)=>{
+                                const label = itemById.get(gridLayoutItemId)?.title ?? gridLayoutItemId;
+                                return /*#__PURE__*/ jsxs(Tab, {
+                                    className: "vuuDraggableItem",
+                                    "data-index": index,
+                                    "data-grid-layout-item-id": gridLayoutItemId,
+                                    "data-label": label,
+                                    draggable: true,
+                                    value: gridLayoutItemId,
+                                    children: [
+                                        /*#__PURE__*/ jsx(TabTrigger, {
+                                            children: label
+                                        }),
+                                        showMenu ? /*#__PURE__*/ jsx(TabMenu, {
+                                            layoutItemId: gridLayoutItemId,
+                                            tabLabel: label
+                                        }) : null
+                                    ]
+                                }, gridLayoutItemId);
+                            })
+                        }, tabOrderKey),
+                        allowAddTab ? /*#__PURE__*/ jsx(IconButton, {
+                            "aria-label": "Create Tab",
+                            className: `${classBaseItem}-addTabButton`,
+                            "data-embedded": true,
+                            icon: "add",
+                            "data-overflow-priority": "1",
+                            onClick: handleClickAddTab,
+                            variant: "secondary",
+                            tabIndex: -1
+                        }, "addButton") : null
+                    ]
+                })
+            })),
+            dialog
+        ]
+    });
+};
+const GridLayoutStackedItemType = (/*#__PURE__*/ createElement(GridLayoutStackedtem_GridLayoutStackedItem)).type;
+const isGridLayoutStackedItem = (element)=>element.type === GridLayoutStackedItemType;
+export { GridLayoutStackedtem_GridLayoutStackedItem as GridLayoutStackedItem, isGridLayoutStackedItem };