@linzjs/windows 10.3.1 → 11.0.1

package/dist/panel/PanelsContextProvider.js

@@ -0,0 +1,145 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { castArray, isEmpty, maxBy, partition, sortBy } from 'lodash-es';
+import { Fragment, useCallback, useMemo, useRef, useState } from 'react';
+import { PanelInstanceContextProvider } from './PanelInstanceContextProvider';
+import { PanelsContext } from './PanelsContext';
+import { v4 } from '../common/uuid';
+import { useInterval } from '../common/useInterval';
+const defaultPanelStateOptions = {
+    saveStateIn: 'localStorage',
+    saveStateKey: 'userId',
+};
+export const PanelsContextProvider = ({ bounds, baseZIndex = 500, children, panelStateOptions: _panelStateOptions, tilingStart = { x: 30, y: 30 }, tilingOffset = { x: 30, y: 50 }, tilingMax = { x: 200, y: 300 }, }) => {
+    const panelStateOptions = _panelStateOptions === undefined ? defaultPanelStateOptions : _panelStateOptions;
+    const stackPositionRef = useRef(tilingStart);
+    // Can't use a map here as we need to retain render order for performance
+    const [panelInstances, setPanelInstances] = useState([]);
+    const [dockElements, setDockElements] = useState({});
+    const setDockElement = useCallback((id, element) => {
+        if (dockElements[id] !== element) {
+            setDockElements({ ...dockElements, [id]: element });
+        }
+    }, [dockElements]);
+    const bringPanelToFront = useCallback((panelUniqueId) => {
+        setPanelInstances((panelInstances) => {
+            const panelInstance = panelInstances.find((panelInstance) => panelInstance.uniqueId === panelUniqueId);
+            if (!panelInstance) {
+                console.warn(`bringPanelToFront cannot find panel with uniqueId: ${panelUniqueId}`);
+                return panelInstances;
+            }
+            if (panelInstance.window) {
+                panelInstance.window.focus();
+                return panelInstances;
+            }
+            const maxZIndexPanelInstance = maxBy(panelInstances, 'zIndex');
+            // Prevent unnecessary state updates
+            if (maxZIndexPanelInstance === panelInstance) {
+                return panelInstances;
+            }
+            sortBy(panelInstances, (pi) => (panelInstance === pi ? 32768 : pi.zIndex)).forEach((pi, i) => (pi.zIndex = baseZIndex + i));
+            return [...panelInstances];
+        });
+    }, [baseZIndex]);
+    const showHidePanel = useCallback((hidePanelIds, hidden) => {
+        setPanelInstances((panelInstances) => {
+            const panelIds = castArray(hidePanelIds);
+            return panelInstances.map((pi) => {
+                return panelIds.includes(pi.uniqueId) && pi.hidden !== hidden ? { ...pi, hidden } : pi;
+            });
+        });
+    }, []);
+    const hidePanel = useCallback((hidePanelIds) => {
+        showHidePanel(hidePanelIds, true);
+    }, [showHidePanel]);
+    const unhidePanel = useCallback((hidePanelIds) => {
+        showHidePanel(hidePanelIds, false);
+    }, [showHidePanel]);
+    const hasHiddenPanel = useCallback((panelId) => {
+        return panelInstances.find((pi) => pi.uniqueId === panelId)?.hidden === true;
+    }, [panelInstances]);
+    const openPanel = useCallback(({ componentFn, poppedOut = false, uniqueId = v4(), onClose }) => {
+        try {
+            setPanelInstances((panelInstances) => {
+                const existingPanelInstance = panelInstances.find((pi) => pi.uniqueId === uniqueId);
+                if (existingPanelInstance) {
+                    if (existingPanelInstance.window) {
+                        existingPanelInstance.window?.focus();
+                    }
+                    else {
+                        if (existingPanelInstance.hidden) {
+                            setTimeout(() => unhidePanel(uniqueId), 0);
+                        }
+                        setTimeout(() => bringPanelToFront(uniqueId), 0);
+                    }
+                    return panelInstances;
+                }
+                return [
+                    ...panelInstances,
+                    {
+                        uniqueId,
+                        componentInstance: componentFn(),
+                        zIndex: baseZIndex + panelInstances.length,
+                        poppedOut,
+                        window: null,
+                        onClose,
+                        hidden: false,
+                    },
+                ];
+            });
+            return uniqueId;
+        }
+        catch (e) {
+            console.error(e);
+            return null;
+        }
+    }, [baseZIndex, bringPanelToFront, unhidePanel]);
+    const closePanel = useCallback((closePanelUniqueIds) => {
+        const panelIds = castArray(closePanelUniqueIds);
+        setPanelInstances((panelInstances) => {
+            const [closedPanelInstances, stillOpenPanelInstances] = partition(panelInstances, (pi) => panelIds.includes(pi.uniqueId));
+            if (!isEmpty(closedPanelInstances)) {
+                closedPanelInstances.forEach(({ onClose }) => {
+                    onClose?.();
+                });
+                return stillOpenPanelInstances;
+            }
+            return panelInstances;
+        });
+    }, []);
+    /**
+     * It's not easy to tell the difference between a window closing and a window popping in via events,
+     * so we're periodically checking instead.
+     */
+    useInterval(() => {
+        // close any panels that have a window that is closed
+        closePanel(panelInstances.filter((pi) => pi.window?.closed).map((panel) => panel.uniqueId));
+    }, 500);
+    /**
+     * Tile the panel position relative to previous panel
+     */
+    const nextStackPosition = useCallback(() => {
+        const p = { ...stackPositionRef.current };
+        const result = { ...p };
+        p.x += tilingOffset.x;
+        p.y += tilingOffset.y;
+        stackPositionRef.current = p.x > tilingMax.x || p.y > tilingMax.y ? tilingStart : p;
+        return result;
+    }, [tilingMax.x, tilingMax.y, tilingOffset.x, tilingOffset.y, tilingStart]);
+    const openPanels = useMemo(() => new Set(panelInstances.map((pi) => pi.uniqueId)), [panelInstances]);
+    const hasOpenPanel = useCallback((panelId) => openPanels.has(panelId), [openPanels]);
+    return (_jsxs(PanelsContext.Provider, { value: {
+            openPanels,
+            hasOpenPanel,
+            openPanel,
+            closePanel,
+            hasHiddenPanel,
+            bringPanelToFront,
+            nextStackPosition,
+            dockElements,
+            setDockElement,
+            panelStateOptions,
+            hidePanel,
+            unhidePanel,
+        }, children: [_jsx(Fragment, { children: panelInstances.map((panelInstance) => (_jsx(PanelInstanceContextProvider, { panelInstance: panelInstance, bounds: bounds, hidden: panelInstance.hidden, children: panelInstance.componentInstance }, panelInstance.uniqueId))) }, 'panels'), _jsx(Fragment, { children: children }, 'children')] }));
+};
+//# sourceMappingURL=PanelsContextProvider.js.map

package/dist/panel/PanelsContextProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PanelsContextProvider.js","sourceRoot":"","sources":["../../src/panel/PanelsContextProvider.tsx"],"names":[],"mappings":"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"}

package/dist/panel/PopinWIndow.d.ts

@@ -0,0 +1,11 @@
+import { Dispatch, ReactElement } from 'react';
+import { PanelPosition, PanelSize } from './types';
+import { PanelProps } from './types/PanelProps';
+export declare function PopinWindow({ children, className, maxHeight, maxWidth, minHeight, minWidth, modal, position, resizeable, size, panelPosition, setPanelPosition, panelSize, setPanelSize, setInitialPanelSize, hidden, }: PanelProps & {
+    panelPosition: PanelPosition;
+    setPanelPosition: Dispatch<PanelPosition>;
+    panelSize: PanelSize;
+    setPanelSize: Dispatch<PanelSize>;
+    setInitialPanelSize: Dispatch<PanelSize>;
+    hidden?: boolean;
+}): ReactElement;

package/dist/panel/PopinWIndow.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { pick } from 'lodash-es';
+import { useCallback, useContext, useEffect, useRef } from 'react';
+import { Rnd } from 'react-rnd';
+import { PanelContext } from './PanelContext';
+import { PanelInstanceContext } from './PanelInstanceContext';
+import { useSaveStateIn } from './usePanelStateHandler';
+export function PopinWindow({ children, className, maxHeight, maxWidth, minHeight, minWidth, modal, position = modal ? 'center' : 'tile', resizeable = modal !== true, size = { height: 200, width: 320 }, panelPosition, setPanelPosition, panelSize, setPanelSize, setInitialPanelSize, hidden, }) {
+    const panelRef = useRef(null);
+    const { bounds, zIndex, bringPanelToFront, uniqueId } = useContext(PanelInstanceContext);
+    const centerWindow = useCallback(() => {
+        const b = panelRef.current?.getSelfElement()?.getBoundingClientRect();
+        let height = b?.height ?? size.height;
+        // You can't auto height a centered panel
+        if (height === 'auto') {
+            height = 400;
+        }
+        setPanelPosition({
+            x: Math.max((window.innerWidth - (b?.width ?? size.width)) / 2, 0),
+            y: Math.max((window.innerHeight - height) / 2, 0),
+        });
+    }, [setPanelPosition, size.height, size.width]);
+    useEffect(() => {
+        if (position === 'center' && !resizeable) {
+            centerWindow();
+            window.addEventListener('resize', centerWindow);
+            return () => window.removeEventListener('resize', centerWindow);
+        }
+        return;
+    }, [centerWindow, position, resizeable]);
+    const resizePanel = useCallback((newPanelSize) => {
+        const newSize = { ...panelSize, ...newPanelSize };
+        if (newSize.width !== panelSize.width || newSize.height !== panelSize.height) {
+            setPanelSize(newSize);
+        }
+    }, [panelSize, setPanelSize]);
+    const initialResizePanel = useCallback((newPanelSize) => {
+        const newSize = { ...panelSize, ...newPanelSize };
+        if (newSize.width !== panelSize.width || newSize.height !== panelSize.height) {
+            setInitialPanelSize(newSize);
+        }
+    }, [panelSize, setInitialPanelSize]);
+    const saveStateIn = useSaveStateIn({ uniqueId });
+    useEffect(() => {
+        saveStateIn({
+            panelPosition,
+            panelSize,
+        });
+    }, [panelPosition, panelSize, saveStateIn]);
+    return (_jsxs(PanelContext.Provider, { value: { resizePanel, initialResizePanel, resizeable }, children: [modal && (_jsx("div", { style: {
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    bottom: 0,
+                    right: 0,
+                    backgroundColor: 'rgb(0,0,0,0.1)',
+                    zIndex,
+                } })), _jsx(Rnd, { ref: panelRef, className: clsx('WindowPanel', className), dragHandleClassName: 'draggable-handle', maxHeight: maxHeight, maxWidth: maxWidth, minWidth: minWidth, minHeight: minHeight, position: panelPosition, size: panelSize.height === 'auto' ? pick(panelSize, 'width') : panelSize, style: { zIndex, visibility: hidden ? 'hidden' : undefined }, disableDragging: !resizeable, enableResizing: resizeable, bounds: bounds ?? document.body, onDragStop: (_evt, data) => {
+                    setPanelPosition({ x: data.x, y: data.y });
+                }, onResizeStop: (_evt, _dir, ref, _delta, position) => {
+                    setPanelPosition(position);
+                    setPanelSize({
+                        width: parseInt(ref.style.width),
+                        height: parseInt(ref.style.height),
+                    });
+                }, onMouseDown: bringPanelToFront, children: _jsx("div", { style: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        width: '100%',
+                        height: '100%',
+                    }, children: children }) })] }));
+}
+//# sourceMappingURL=PopinWIndow.js.map

package/dist/panel/PopinWIndow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopinWIndow.js","sourceRoot":"","sources":["../../src/panel/PopinWIndow.tsx"],"names":[],"mappings":"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"}

package/dist/panel/PopoutWindow.d.ts

@@ -0,0 +1,17 @@
+import { PropsWithChildren, ReactElement } from 'react';
+import { OpenExternalWindowResponse } from './openExternalWindow';
+import { PanelPosition, PanelSizeExact } from './types';
+interface _PopoutWindowProps {
+    name: string;
+    title?: string;
+    size: PanelSizeExact;
+    popInPanelPosition: PanelPosition;
+    popInPanelSize: PanelSizeExact;
+    observeStyleChanges?: boolean;
+    /** Testing seam to avoid extensively mocking the window object. */
+    openExternalWindowFn?: () => OpenExternalWindowResponse;
+    className?: string;
+}
+export type PopoutWindowProps = PropsWithChildren<_PopoutWindowProps>;
+export declare const PopoutWindow: ({ name, title, size, popInPanelPosition, popInPanelSize, observeStyleChanges, className, openExternalWindowFn, children, }: PopoutWindowProps) => ReactElement | null;
+export {};

package/dist/panel/PopoutWindow.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import createCache from '@emotion/cache';
+import { CacheProvider } from '@emotion/react';
+import { useContext, useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { makePopoutId } from './generateId';
+import { openExternalWindow } from './openExternalWindow';
+import { PanelInstanceContext } from './PanelInstanceContext';
+import { useRestoreStateFrom, useSaveStateIn } from './usePanelStateHandler';
+export const PopoutWindow = ({ name, title = name, size, popInPanelPosition, popInPanelSize, observeStyleChanges, className, openExternalWindowFn, children, }) => {
+    const { setPanelWindow } = useContext(PanelInstanceContext);
+    const [containerElement, setContainerElement] = useState();
+    const [headElement, setHeadElement] = useState();
+    const savedState = useRestoreStateFrom({ uniqueId: name, panelPoppedOut: true });
+    // If we use a popped in position as a popped out position we must adjust for which screen the window is on.
+    const poppedInPosition = popInPanelPosition;
+    const poppedInPositionAdjusted = {
+        x: window.screenX + poppedInPosition.x,
+        y: window.screenY + poppedInPosition.y,
+    };
+    const position = savedState?.panelPosition ?? poppedInPositionAdjusted;
+    const panelSize = savedState?.panelSize ?? popInPanelSize ?? size;
+    const saveStateIn = useSaveStateIn({ panelPoppedOut: true, uniqueId: name });
+    // When we create this component, open a new window
+    useEffect(() => {
+        const oew = openExternalWindowFn ?? openExternalWindow;
+        const { externalWindow, onCloseExternalWindow } = oew({
+            title,
+            size: panelSize.height === 'auto' ? { ...panelSize, height: 400 } : panelSize,
+            setContainerElement,
+            setHeadElement,
+            observeStyleChanges,
+            className,
+            position,
+        });
+        if (!externalWindow)
+            return;
+        setPanelWindow(externalWindow);
+        const closeExternalWindow = () => {
+            externalWindow.close();
+        };
+        const savePanelState = () => {
+            saveStateIn({
+                panelPosition: {
+                    x: externalWindow.screenX,
+                    y: externalWindow.screenY,
+                },
+                panelSize: {
+                    height: externalWindow.innerHeight,
+                    width: externalWindow.innerWidth,
+                },
+            });
+        };
+        externalWindow.addEventListener('beforeunload', savePanelState);
+        // When the main window closes or reloads, close the popout
+        window.addEventListener('beforeunload', closeExternalWindow, { once: true });
+        return () => {
+            onCloseExternalWindow?.();
+        };
+    }, 
+    // These deps MUST be empty
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []);
+    // Render this component's children into the root element of the popout window
+    // The `@emotion/react/CacheProvider`provides a cache derived from createCache for inline styles
+    // these will be generated into the `container` and prefixed with the `key` below, ensuring
+    // the styles are in the popout rather than the root window.
+    const myCache = createCache({ key: makePopoutId(name), container: headElement });
+    const wrappedChildren = _jsx(CacheProvider, { value: myCache, children: children });
+    return containerElement ? createPortal(wrappedChildren, containerElement) : null;
+};
+//# sourceMappingURL=PopoutWindow.js.map

package/dist/panel/PopoutWindow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopoutWindow.js","sourceRoot":"","sources":["../../src/panel/PopoutWindow.tsx"],"names":[],"mappings":"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"}

package/dist/panel/generateId.d.ts

@@ -0,0 +1,6 @@
+/**
+ * The only valid characters for an @emotion key are lower case chars or '-'.
+ * We need to replace any char that is not valid with a substitute.
+ */
+export declare const makePopoutId: (str: string) => string;
+export declare const popoutWindowDivId: (windowTitle: string) => string;

package/dist/panel/{generateId.ts → generateId.js}

@@ -2,8 +2,7 @@
  * The only valid characters for an @emotion key are lower case chars or '-'.
  * We need to replace any char that is not valid with a substitute.
  */
-export const makePopoutId = (str: string): string =>
-  str
+export const makePopoutId = (str) => str
     .toLowerCase()
     .replaceAll(/[^a-z0-9-]/g, '-')
     .replaceAll('0', '-zero-')
@@ -18,5 +17,5 @@ export const makePopoutId = (str: string): string =>
     .replaceAll('9', '-nine-')
     .replaceAll(/-+/g, '-')
     .toLowerCase();
-
-export const popoutWindowDivId = (windowTitle: string): string => `popoutWindow-${makePopoutId(windowTitle)}`;
+export const popoutWindowDivId = (windowTitle) => `popoutWindow-${makePopoutId(windowTitle)}`;
+//# sourceMappingURL=generateId.js.map

package/dist/panel/generateId.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"generateId.js","sourceRoot":"","sources":["../../src/panel/generateId.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,GAAW,EAAU,EAAE,CAClD,GAAG;KACA,WAAW,EAAE;KACb,UAAU,CAAC,aAAa,EAAE,GAAG,CAAC;KAC9B,UAAU,CAAC,GAAG,EAAE,QAAQ,CAAC;KACzB,UAAU,CAAC,GAAG,EAAE,OAAO,CAAC;KACxB,UAAU,CAAC,GAAG,EAAE,OAAO,CAAC;KACxB,UAAU,CAAC,GAAG,EAAE,SAAS,CAAC;KAC1B,UAAU,CAAC,GAAG,EAAE,QAAQ,CAAC;KACzB,UAAU,CAAC,GAAG,EAAE,QAAQ,CAAC;KACzB,UAAU,CAAC,GAAG,EAAE,OAAO,CAAC;KACxB,UAAU,CAAC,GAAG,EAAE,SAAS,CAAC;KAC1B,UAAU,CAAC,GAAG,EAAE,SAAS,CAAC;KAC1B,UAAU,CAAC,GAAG,EAAE,QAAQ,CAAC;KACzB,UAAU,CAAC,KAAK,EAAE,GAAG,CAAC;KACtB,WAAW,EAAE,CAAC;AAEnB,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,WAAmB,EAAU,EAAE,CAAC,gBAAgB,YAAY,CAAC,WAAW,CAAC,EAAE,CAAC"}

package/dist/panel/handleStyleSheetsChanges.d.ts

@@ -0,0 +1,9 @@
+export declare const copyStyleSheets: (newHeadMountElement: HTMLDivElement) => void;
+/**
+ * Add listener for dynamic style changes
+ * This works by listening to any changes to the head element
+ * If there are any changes it replaces all the styles in the floating window
+ * at most every 100ms
+ * @param newHeadMountElement
+ */
+export declare const observeStyleSheetChanges: (newHeadMountElement: HTMLDivElement) => MutationObserver | null;

package/dist/panel/handleStyleSheetsChanges.js

@@ -0,0 +1,65 @@
+import { throttle } from 'lodash-es';
+// Copy the app's styles into the new window
+export const copyStyleSheets = (newHeadMountElement) => {
+    const stylesheets = Array.from(document.styleSheets);
+    stylesheets.forEach((stylesheet) => {
+        if (stylesheet.href) {
+            const newStyleElement = document.createElement('link');
+            newStyleElement.rel = 'stylesheet';
+            newStyleElement.href = stylesheet.href;
+            newHeadMountElement.appendChild(newStyleElement);
+        }
+        else {
+            const css = stylesheet;
+            if (css && css.cssRules && css.cssRules.length > 0) {
+                const newStyleElement = document.createElement('style');
+                Array.from(css.cssRules).forEach((rule) => {
+                    newStyleElement.appendChild(document.createTextNode(rule.cssText));
+                });
+                newHeadMountElement.appendChild(newStyleElement);
+            }
+        }
+    });
+};
+/**
+ * Add listener for dynamic style changes
+ * This works by listening to any changes to the head element
+ * If there are any changes it replaces all the styles in the floating window
+ * at most every 100ms
+ * @param newHeadMountElement
+ */
+export const observeStyleSheetChanges = (newHeadMountElement) => {
+    const targetNode = document.querySelector('head');
+    if (!targetNode) {
+        return null;
+    }
+    // Options for the observer (which mutations to observe)
+    const config = { /*attributes: true,*/ childList: true /*, subtree: true */ };
+    //throttle the copying of the all the styles at most 100ms
+    const throttleCopyStyleSheets = throttle(() => {
+        copyStyleSheets(newHeadMountElement);
+    }, 100);
+    // Callback function to execute when mutations are observed
+    const callback = function (mutationList) {
+        for (const mutation of mutationList) {
+            if (mutation.type === 'childList') {
+                // console.log("A child node has been added or removed.", mutation);
+                //naive way up updating style sheets
+                //the observer tells us what has been added and removed, but syncing the changes with the
+                //floating window is complicated, so the easiest way is to just wait for modifications for finish
+                //updating, then replace them all
+                //we could probably just copy all style on every modification, by that might have a performance hit
+                throttleCopyStyleSheets();
+            } /*else if (mutation.type === "attributes") {
+                    //Do we need to handle attribute modifications?
+                    // console.log("The " + mutation.attributeName + " attribute was modified.");
+                  }*/
+        }
+    };
+    // Create an observer instance linked to the callback function
+    const observer = new MutationObserver(callback);
+    // Start observing the target node for configured mutations
+    observer.observe(targetNode, config);
+    return observer;
+};
+//# sourceMappingURL=handleStyleSheetsChanges.js.map

package/dist/panel/handleStyleSheetsChanges.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"handleStyleSheetsChanges.js","sourceRoot":"","sources":["../../src/panel/handleStyleSheetsChanges.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAErC,4CAA4C;AAC5C,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,mBAAmC,EAAE,EAAE;IACrE,MAAM,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;IAErD,WAAW,CAAC,OAAO,CAAC,CAAC,UAAU,EAAE,EAAE;QACjC,IAAI,UAAU,CAAC,IAAI,EAAE,CAAC;YACpB,MAAM,eAAe,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;YACvD,eAAe,CAAC,GAAG,GAAG,YAAY,CAAC;YACnC,eAAe,CAAC,IAAI,GAAG,UAAU,CAAC,IAAI,CAAC;YACvC,mBAAmB,CAAC,WAAW,CAAC,eAAe,CAAC,CAAC;QACnD,CAAC;aAAM,CAAC;YACN,MAAM,GAAG,GAAG,UAAU,CAAC;YACvB,IAAI,GAAG,IAAI,GAAG,CAAC,QAAQ,IAAI,GAAG,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gBACnD,MAAM,eAAe,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;gBACxD,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;oBACxC,eAAe,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;gBACrE,CAAC,CAAC,CAAC;gBACH,mBAAmB,CAAC,WAAW,CAAC,eAAe,CAAC,CAAC;YACnD,CAAC;QACH,CAAC;IACH,CAAC,CAAC,CAAC;AACL,CAAC,CAAC;AACF;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAG,CAAC,mBAAmC,EAAE,EAAE;IAC9E,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAElD,IAAI,CAAC,UAAU,EAAE,CAAC;QAChB,OAAO,IAAI,CAAC;IACd,CAAC;IACD,wDAAwD;IACxD,MAAM,MAAM,GAAG,EAAE,qBAAqB,CAAC,SAAS,EAAE,IAAI,CAAC,oBAAoB,EAAE,CAAC;IAE9E,0DAA0D;IAC1D,MAAM,uBAAuB,GAAG,QAAQ,CAAC,GAAG,EAAE;QAC5C,eAAe,CAAC,mBAAmB,CAAC,CAAC;IACvC,CAAC,EAAE,GAAG,CAAC,CAAC;IAER,2DAA2D;IAC3D,MAAM,QAAQ,GAAqB,UAAU,YAAY;QACvD,KAAK,MAAM,QAAQ,IAAI,YAAY,EAAE,CAAC;YACpC,IAAI,QAAQ,CAAC,IAAI,KAAK,WAAW,EAAE,CAAC;gBAClC,oEAAoE;gBACpE,oCAAoC;gBACpC,yFAAyF;gBACzF,iGAAiG;gBACjG,iCAAiC;gBACjC,mGAAmG;gBACnG,uBAAuB,EAAE,CAAC;YAC5B,CAAC,CAAC;;;qBAGO;QACX,CAAC;IACH,CAAC,CAAC;IAEF,8DAA8D;IAC9D,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IAEhD,2DAA2D;IAC3D,QAAQ,CAAC,OAAO,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC;IAErC,OAAO,QAAQ,CAAC;AAClB,CAAC,CAAC"}

package/dist/panel/index.js

@@ -0,0 +1,13 @@
+export * from './OpenPanelButton';
+export * from './Panel';
+export * from './PanelContext';
+export * from './PanelDock';
+export * from './PanelHeader';
+export * from './PanelHeaderButton';
+export * from './PanelInline';
+export * from './PanelInstanceContext';
+export * from './PanelInstanceContextProvider';
+export * from './PanelsContext';
+export * from './PanelsContextProvider';
+export * from './types';
+//# sourceMappingURL=index.js.map

package/dist/panel/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/panel/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,eAAe,CAAC;AAC9B,cAAc,wBAAwB,CAAC;AACvC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,iBAAiB,CAAC;AAChC,cAAc,yBAAyB,CAAC;AACxC,cAAc,SAAS,CAAC"}

package/dist/panel/openExternalWindow.d.ts

@@ -0,0 +1,23 @@
+import { Dispatch, SetStateAction } from 'react';
+import { PanelPosition, PanelSizeExact } from './types';
+export type OpenExternalWindowResponse = {
+    externalWindow: Window | null;
+    onCloseExternalWindow: (() => void) | null;
+};
+/**
+ * Open and scaffold the new external window.
+ *
+ * The main motivation for extracting these procedures into a function is for testing ease. JSDOM does not mock out the
+ * entire window object, making the PopoutWindow component difficult to unit test without extensive mocking. Instead, we
+ * can avoid mocking most of the window methods entirely by conditionally calling an alternative to `openExternalWindow`
+ * during unit testing by providing a truthy `openExternalWindowFn` prop.
+ */
+export declare const openExternalWindow: ({ title, size, setContainerElement, setHeadElement, observeStyleChanges, className, position, }: {
+    title: string;
+    size: PanelSizeExact;
+    setContainerElement: Dispatch<SetStateAction<HTMLElement | undefined>>;
+    setHeadElement: Dispatch<SetStateAction<HTMLElement | undefined>>;
+    observeStyleChanges?: boolean;
+    className?: string;
+    position: PanelPosition;
+}) => OpenExternalWindowResponse;

package/dist/panel/openExternalWindow.js

@@ -0,0 +1,62 @@
+import { makePopoutId, popoutWindowDivId } from './generateId';
+import { copyStyleSheets, observeStyleSheetChanges } from './handleStyleSheetsChanges';
+/**
+ * Open and scaffold the new external window.
+ *
+ * The main motivation for extracting these procedures into a function is for testing ease. JSDOM does not mock out the
+ * entire window object, making the PopoutWindow component difficult to unit test without extensive mocking. Instead, we
+ * can avoid mocking most of the window methods entirely by conditionally calling an alternative to `openExternalWindow`
+ * during unit testing by providing a truthy `openExternalWindowFn` prop.
+ */
+export const openExternalWindow = ({ title, size, setContainerElement, setHeadElement, observeStyleChanges = false, className, position, }) => {
+    const response = { externalWindow: null, onCloseExternalWindow: null };
+    // NOTE:
+    // 1/ Edge ignores the left and top settings
+    // 2/ Chrome has a bug that screws up the window size by a factor dependent on your windows scaling settings
+    // if you open the browser in a window with a scaling and drag it to a window with a different scaling
+    const features = `scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,` +
+        `width=${size.width},height=${size.height},left=${position.x},top=${position.y}`;
+    response.externalWindow = window.open('', makePopoutId(title), features);
+    if (response.externalWindow) {
+        const { externalWindow } = response;
+        // Reset the default body style applied by the browser
+        externalWindow.document.body.style.margin = '0';
+        externalWindow.document.body.style.padding = '0';
+        // Remove any existing body HTML from this window
+        const existingBodyMountElement = externalWindow.document.body?.firstChild;
+        if (existingBodyMountElement) {
+            externalWindow.document.body.removeChild(existingBodyMountElement);
+        }
+        // Create a new HTML element to hang our rendering off
+        const newMountElement = externalWindow.document.createElement('div');
+        newMountElement.className = `PopoutWindowContainer ${className || ''}`;
+        setContainerElement(newMountElement);
+        externalWindow.document.body.appendChild(newMountElement);
+        // Do the same for the head node (where all the styles are added)
+        const existingHeadMountElement = externalWindow.document.head?.firstChild;
+        if (existingHeadMountElement) {
+            externalWindow.document.head.removeChild(existingHeadMountElement);
+        }
+        // and an HTML element to hang our copied styles off
+        const newHeadMountElement = externalWindow.document.createElement('div');
+        externalWindow.document.head.appendChild(newHeadMountElement);
+        setHeadElement(newHeadMountElement);
+        // Set External window title
+        externalWindow.document.title = title;
+        // Set an id to the external window div to be queried and used by react-modal as parentSelector
+        // so the modal shows up in the popped out window instead the main window
+        newMountElement.id = popoutWindowDivId(title);
+        copyStyleSheets(newHeadMountElement);
+        let observer = null;
+        if (observeStyleChanges) {
+            observer = observeStyleSheetChanges(newHeadMountElement);
+        }
+        externalWindow.onbeforeunload = () => observer?.disconnect();
+        response.onCloseExternalWindow = () => {
+            // Make sure the window closes when the component unmounts
+            externalWindow.close();
+        };
+    }
+    return response;
+};
+//# sourceMappingURL=openExternalWindow.js.map

package/dist/panel/openExternalWindow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"openExternalWindow.js","sourceRoot":"","sources":["../../src/panel/openExternalWindow.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAC/D,OAAO,EAAE,eAAe,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AAOvF;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,EACjC,KAAK,EACL,IAAI,EACJ,mBAAmB,EACnB,cAAc,EACd,mBAAmB,GAAG,KAAK,EAC3B,SAAS,EACT,QAAQ,GAST,EAA8B,EAAE;IAC/B,MAAM,QAAQ,GAA+B,EAAE,cAAc,EAAE,IAAI,EAAE,qBAAqB,EAAE,IAAI,EAAE,CAAC;IAEnG,QAAQ;IACR,4CAA4C;IAC5C,4GAA4G;IAC5G,sGAAsG;IACtG,MAAM,QAAQ,GACZ,yEAAyE;QACzE,SAAS,IAAI,CAAC,KAAK,WAAW,IAAI,CAAC,MAAM,SAAS,QAAQ,CAAC,CAAC,QAAQ,QAAQ,CAAC,CAAC,EAAE,CAAC;IACnF,QAAQ,CAAC,cAAc,GAAG,MAAM,CAAC,IAAI,CAAC,EAAE,EAAE,YAAY,CAAC,KAAK,CAAC,EAAE,QAAQ,CAAC,CAAC;IAEzE,IAAI,QAAQ,CAAC,cAAc,EAAE,CAAC;QAC5B,MAAM,EAAE,cAAc,EAAE,GAAG,QAAQ,CAAC;QAEpC,sDAAsD;QACtD,cAAc,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,CAAC;QAChD,cAAc,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,GAAG,CAAC;QAEjD,iDAAiD;QACjD,MAAM,wBAAwB,GAAG,cAAc,CAAC,QAAQ,CAAC,IAAI,EAAE,UAAU,CAAC;QAC1E,IAAI,wBAAwB,EAAE,CAAC;YAC7B,cAAc,CAAC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,wBAAwB,CAAC,CAAC;QACrE,CAAC;QACD,sDAAsD;QACtD,MAAM,eAAe,GAAG,cAAc,CAAC,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QACrE,eAAe,CAAC,SAAS,GAAG,yBAAyB,SAAS,IAAI,EAAE,EAAE,CAAC;QACvE,mBAAmB,CAAC,eAAe,CAAC,CAAC;QACrC,cAAc,CAAC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,eAAe,CAAC,CAAC;QAE1D,iEAAiE;QACjE,MAAM,wBAAwB,GAAG,cAAc,CAAC,QAAQ,CAAC,IAAI,EAAE,UAAU,CAAC;QAC1E,IAAI,wBAAwB,EAAE,CAAC;YAC7B,cAAc,CAAC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,wBAAwB,CAAC,CAAC;QACrE,CAAC;QACD,oDAAoD;QACpD,MAAM,mBAAmB,GAAG,cAAc,CAAC,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QACzE,cAAc,CAAC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,mBAAmB,CAAC,CAAC;QAC9D,cAAc,CAAC,mBAAmB,CAAC,CAAC;QAEpC,4BAA4B;QAC5B,cAAc,CAAC,QAAQ,CAAC,KAAK,GAAG,KAAK,CAAC;QAEtC,+FAA+F;QAC/F,yEAAyE;QACzE,eAAe,CAAC,EAAE,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAC;QAE9C,eAAe,CAAC,mBAAmB,CAAC,CAAC;QAErC,IAAI,QAAQ,GAA4B,IAAI,CAAC;QAC7C,IAAI,mBAAmB,EAAE,CAAC;YACxB,QAAQ,GAAG,wBAAwB,CAAC,mBAAmB,CAAC,CAAC;QAC3D,CAAC;QAED,cAAc,CAAC,cAAc,GAAG,GAAG,EAAE,CAAC,QAAQ,EAAE,UAAU,EAAE,CAAC;QAE7D,QAAQ,CAAC,qBAAqB,GAAG,GAAG,EAAE;YACpC,0DAA0D;YAC1D,cAAc,CAAC,KAAK,EAAE,CAAC;QACzB,CAAC,CAAC;IACJ,CAAC;IAED,OAAO,QAAQ,CAAC;AAClB,CAAC,CAAC"}

package/dist/panel/types/{PanelPosition.ts → PanelPosition.d.ts}

@@ -1,4 +1,4 @@
 export interface PanelPosition {
-  x: number;
-  y: number;
+    x: number;
+    y: number;
 }

package/dist/panel/types/PanelPosition.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=PanelPosition.js.map

package/dist/panel/types/PanelPosition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PanelPosition.js","sourceRoot":"","sources":["../../../src/panel/types/PanelPosition.ts"],"names":[],"mappings":""}

package/dist/panel/types/PanelProps.d.ts

@@ -0,0 +1,19 @@
+import { PropsWithChildren } from 'react';
+import { PanelPosition } from './PanelPosition';
+import { PanelSize } from './PanelSize';
+export type PanelBounds = PanelPosition & PanelSize;
+interface _PanelProps {
+    className?: string;
+    maxHeight?: number | string;
+    maxWidth?: number | string;
+    minHeight?: number | string;
+    minWidth?: number | string;
+    modal?: boolean;
+    dynamicBounds?: () => PanelBounds | null;
+    position?: PanelPosition | 'tile' | 'center';
+    resizeable?: boolean;
+    size?: PanelSize;
+    title: string;
+}
+export type PanelProps = PropsWithChildren<_PanelProps>;
+export {};

package/dist/panel/types/PanelProps.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=PanelProps.js.map

package/dist/panel/types/PanelProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PanelProps.js","sourceRoot":"","sources":["../../../src/panel/types/PanelProps.ts"],"names":[],"mappings":""}