@linzjs/windows 10.3.0 → 11.0.0

package/dist/panel/PanelsContextProvider.tsx

@@ -1,220 +0,0 @@
-import { castArray, isEmpty, maxBy, partition, sortBy } from 'lodash-es';
-import React, { Fragment, PropsWithChildren, ReactElement, useCallback, useMemo, useRef, useState } from 'react';
-
-import { PanelInstanceContextProvider } from './PanelInstanceContextProvider';
-import { OpenPanelOptions, PanelInstance, PanelsContext } from './PanelsContext';
-import { PanelPosition } from './types';
-import { PanelStateOptions } from './types/PanelStateOptions';
-import { v4 } from '../common/uuid';
-import { useInterval } from '../common/useInterval';
-
-export interface PanelsContextProviderProps {
-  baseZIndex?: number;
-  bounds?: string | Element;
-  panelStateOptions?: PanelStateOptions | null;
-  tilingStart?: PanelPosition;
-  tilingOffset?: PanelPosition;
-  tilingMax?: PanelPosition;
-}
-
-const defaultPanelStateOptions: PanelStateOptions = {
-  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 },
-}: PropsWithChildren<PanelsContextProviderProps>): ReactElement => {
-  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<PanelInstance[]>([]);
-
-  const [dockElements, setDockElements] = useState<Record<string, HTMLDivElement>>({});
-
-  const setDockElement = useCallback(
-    (id: string, element: HTMLDivElement) => {
-      if (dockElements[id] !== element) {
-        setDockElements({ ...dockElements, [id]: element });
-      }
-    },
-    [dockElements],
-  );
-
-  const bringPanelToFront = useCallback(
-    (panelUniqueId: string) => {
-      setPanelInstances((panelInstances): PanelInstance[] => {
-        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: string | string[], hidden: boolean) => {
-    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: string | string[]) => {
-      showHidePanel(hidePanelIds, true);
-    },
-    [showHidePanel],
-  );
-
-  const unhidePanel = useCallback(
-    (hidePanelIds: string | string[]) => {
-      showHidePanel(hidePanelIds, false);
-    },
-    [showHidePanel],
-  );
-
-  const hasHiddenPanel = useCallback(
-    (panelId: string) => {
-      return panelInstances.find((pi) => pi.uniqueId === panelId)?.hidden === true;
-    },
-    [panelInstances],
-  );
-
-  const openPanel = useCallback(
-    ({ componentFn, poppedOut = false, uniqueId = v4(), onClose }: OpenPanelOptions): string | null => {
-      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: string | string[]) => {
-    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: string): boolean => openPanels.has(panelId), [openPanels]);
-
-  return (
-    <PanelsContext.Provider
-      value={{
-        openPanels,
-        hasOpenPanel,
-        openPanel,
-        closePanel,
-        hasHiddenPanel,
-        bringPanelToFront,
-        nextStackPosition,
-        dockElements,
-        setDockElement,
-        panelStateOptions,
-        hidePanel,
-        unhidePanel,
-      }}
-    >
-      <Fragment key={'panels'}>
-        {panelInstances.map((panelInstance) => (
-          <PanelInstanceContextProvider
-            key={panelInstance.uniqueId}
-            panelInstance={panelInstance}
-            bounds={bounds}
-            hidden={panelInstance.hidden}
-          >
-            {panelInstance.componentInstance}
-          </PanelInstanceContextProvider>
-        ))}
-      </Fragment>
-      <Fragment key={'children'}>{children}</Fragment>
-    </PanelsContext.Provider>
-  );
-};

package/dist/panel/PopinWIndow.tsx

@@ -1,147 +0,0 @@
-import clsx from 'clsx';
-import { pick } from 'lodash-es';
-import { Dispatch, ReactElement, useCallback, useContext, useEffect, useRef } from 'react';
-import { Rnd } from 'react-rnd';
-
-import { PanelContext } from './PanelContext';
-import { PanelInstanceContext } from './PanelInstanceContext';
-import { PanelPosition, PanelSize } from './types';
-import { PanelProps } from './types/PanelProps';
-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,
-}: PanelProps & {
-  panelPosition: PanelPosition;
-  setPanelPosition: Dispatch<PanelPosition>;
-  panelSize: PanelSize;
-  setPanelSize: Dispatch<PanelSize>;
-  setInitialPanelSize: Dispatch<PanelSize>;
-  hidden?: boolean;
-}): ReactElement {
-  const panelRef = useRef<Rnd>(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: Partial<PanelSize>) => {
-      const newSize = { ...panelSize, ...newPanelSize };
-      if (newSize.width !== panelSize.width || newSize.height !== panelSize.height) {
-        setPanelSize(newSize);
-      }
-    },
-    [panelSize, setPanelSize],
-  );
-
-  const initialResizePanel = useCallback(
-    (newPanelSize: Partial<PanelSize>) => {
-      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 (
-    <PanelContext.Provider value={{ resizePanel, initialResizePanel, resizeable }}>
-      {modal && (
-        <div
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            bottom: 0,
-            right: 0,
-            backgroundColor: 'rgb(0,0,0,0.1)',
-            zIndex,
-          }}
-        />
-      )}
-      <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') as PanelSize) : 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}
-      >
-        <div
-          style={{
-            display: 'flex',
-            flexDirection: 'column',
-            width: '100%',
-            height: '100%',
-          }}
-        >
-          {children}
-        </div>
-      </Rnd>
-    </PanelContext.Provider>
-  );
-}

package/dist/panel/PopoutWindow.tsx

@@ -1,117 +0,0 @@
-import createCache from '@emotion/cache';
-import { CacheProvider } from '@emotion/react';
-import { PropsWithChildren, ReactElement, useContext, useEffect, useState } from 'react';
-import ReactDOM from 'react-dom';
-
-import { makePopoutId } from './generateId';
-import { openExternalWindow, OpenExternalWindowResponse } from './openExternalWindow';
-import { PanelInstanceContext } from './PanelInstanceContext';
-import { PanelPosition, PanelSizeExact } from './types';
-import { useRestoreStateFrom, useSaveStateIn } from './usePanelStateHandler';
-
-interface _PopoutWindowProps {
-  name: string;
-  title?: string; // The title of the popout window
-  size: PanelSizeExact;
-  popInPanelPosition: PanelPosition;
-  popInPanelSize: PanelSizeExact;
-
-  //says if we want to watch for any dynamic style changes
-  //only needed when using UI libraries like MUI
-  observeStyleChanges?: boolean;
-
-  /** Testing seam to avoid extensively mocking the window object. */
-  openExternalWindowFn?: () => OpenExternalWindowResponse;
-  className?: string;
-}
-
-export type PopoutWindowProps = PropsWithChildren<_PopoutWindowProps>;
-
-export const PopoutWindow = ({
-  name,
-  title = name,
-  size,
-  popInPanelPosition,
-  popInPanelSize,
-  observeStyleChanges,
-  className,
-  openExternalWindowFn,
-  children,
-}: PopoutWindowProps): ReactElement | null => {
-  const { setPanelWindow } = useContext(PanelInstanceContext);
-
-  const [containerElement, setContainerElement] = useState<HTMLElement>();
-  const [headElement, setHeadElement] = useState<HTMLElement>();
-
-  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 as PanelSizeExact),
-        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 = <CacheProvider value={myCache}>{children}</CacheProvider>;
-
-  return containerElement ? ReactDOM.createPortal(wrappedChildren, containerElement) : null;
-};

package/dist/panel/handleStyleSheetsChanges.ts

@@ -1,71 +0,0 @@
-import { throttle } from 'lodash-es';
-
-// Copy the app's styles into the new window
-export const copyStyleSheets = (newHeadMountElement: HTMLDivElement) => {
-  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: HTMLDivElement) => {
-  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: MutationCallback = 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;
-};

package/dist/panel/openExternalWindow.ts

@@ -1,98 +0,0 @@
-import { Dispatch, SetStateAction } from 'react';
-
-import { makePopoutId, popoutWindowDivId } from './generateId';
-import { copyStyleSheets, observeStyleSheetChanges } from './handleStyleSheetsChanges';
-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 const openExternalWindow = ({
-  title,
-  size,
-  setContainerElement,
-  setHeadElement,
-  observeStyleChanges = false,
-  className,
-  position,
-}: {
-  title: string;
-  size: PanelSizeExact;
-  setContainerElement: Dispatch<SetStateAction<HTMLElement | undefined>>;
-  setHeadElement: Dispatch<SetStateAction<HTMLElement | undefined>>;
-  observeStyleChanges?: boolean;
-  className?: string;
-  position: PanelPosition;
-}): OpenExternalWindowResponse => {
-  const response: OpenExternalWindowResponse = { 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: MutationObserver | null = 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;
-};

package/dist/panel/types/PanelProps.ts

@@ -1,22 +0,0 @@
-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>;

package/dist/panel/types/PanelSize.ts

@@ -1,9 +0,0 @@
-export interface PanelSizeExact {
-  height: number;
-  width: number;
-}
-
-export interface PanelSize {
-  height: number | 'auto';
-  width: number;
-}