@linzjs/windows 10.3.1 → 11.0.1

package/dist/panel/Panel.tsx

@@ -1,211 +0,0 @@
-import '../index.scss';
-
-import clsx from 'clsx';
-import { isEqual, pick } from 'lodash-es';
-import {
-  forwardRef,
-  PropsWithChildren,
-  ReactElement,
-  useCallback,
-  useContext,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
-import { createPortal } from 'react-dom';
-
-import { PanelInstanceContext } from './PanelInstanceContext';
-import { PanelsContext } from './PanelsContext';
-import { PopinWindow } from './PopinWIndow';
-import { PopoutWindow } from './PopoutWindow';
-import { PanelPosition } from './types/PanelPosition';
-import { PanelProps } from './types/PanelProps';
-import { PanelSize } from './types/PanelSize';
-import { useRestoreStateFrom } from './usePanelStateHandler';
-import { useInterval } from '../common/useInterval';
-
-const defaultInitialSize = { width: 320, height: 200 };
-
-export const Panel = (props: PanelProps): ReactElement => {
-  const panelRef = useRef<HTMLDivElement>(null);
-  const { title, size = defaultInitialSize, className, dynamicBounds, children } = props;
-
-  const { dockElements, nextStackPosition } = useContext(PanelsContext);
-  const { panelPoppedOut, uniqueId, setTitle, dockId, docked, hidden } = useContext(PanelInstanceContext);
-
-  const savedState = useRestoreStateFrom({ uniqueId, panelPoppedOut: false });
-
-  const lastPanelHeightRef = useRef(panelRef.current?.clientHeight);
-  lastPanelHeightRef.current = panelRef.current?.clientHeight ?? lastPanelHeightRef.current ?? 400;
-
-  useEffect(() => {
-    setTitle(title);
-  }, [setTitle, title]);
-
-  // We only want to update the title when it changes
-  useEffect(() => {
-    if (panelRef.current) {
-      const doc = panelRef.current.ownerDocument;
-      if (doc) {
-        doc.title = title;
-      }
-    }
-  }, [title]);
-
-  const [panelPosition, setPanelPosition] = useState((): PanelPosition => {
-    if (dynamicBounds) {
-      const result = dynamicBounds();
-      if (result) {
-        return pick(result, ['x', 'y']);
-      }
-    }
-
-    const pos = props.position;
-    if (props.resizeable !== false && savedState?.panelPosition) {
-      return savedState.panelPosition;
-    }
-
-    if (pos === 'center') {
-      const height = size.height === 'auto' ? 400 : size.height;
-      return {
-        x: Math.max((window.innerWidth - size.width) / 2, 0),
-        y: Math.max((window.innerHeight - height) / 2, 0),
-      };
-    }
-
-    if (pos != null && pos !== 'tile') {
-      return pos;
-    }
-
-    return nextStackPosition();
-  });
-
-  const cropSizeToWindow = useCallback((size: PanelSize): PanelSize => {
-    return typeof window !== 'undefined' && window.innerWidth && window.innerHeight
-      ? {
-          width: Math.min(window.document.body?.clientWidth ?? window.innerWidth, size.width),
-          height:
-            size.height === 'auto'
-              ? 'auto'
-              : Math.min(window.document.body?.clientHeight ?? window.innerHeight, size.height),
-        }
-      : size;
-  }, []);
-
-  const [panelSize, _setPanelSize] = useState<PanelSize>(() => {
-    const result = dynamicBounds?.();
-    if (result) {
-      return pick(result, ['width', 'height']);
-    }
-
-    if (props.resizeable !== false && savedState?.panelSize) {
-      return cropSizeToWindow(savedState.panelSize);
-    }
-
-    return size ?? { width: 320, height: 200 };
-  });
-
-  const setPanelSize = useCallback(
-    (size: PanelSize) => {
-      _setPanelSize(cropSizeToWindow(size));
-    },
-    [cropSizeToWindow],
-  );
-
-  const setInitialPanelSize = useCallback(
-    (size: PanelSize) => {
-      // If panel was already sized from state, then don't resize
-      if (props.resizeable !== false && savedState?.panelSize) {
-        return;
-      }
-
-      setPanelSize(size);
-    },
-    [props.resizeable, savedState?.panelSize, setPanelSize],
-  );
-
-  const dynamicResize = useCallback(() => {
-    const bounds = dynamicBounds?.();
-    if (!bounds) {
-      return;
-    }
-    const newPosition = pick(bounds, ['x', 'y']);
-    if (!isEqual(newPosition, panelPosition)) {
-      setPanelPosition(newPosition);
-    }
-    const newSize = pick(bounds, ['width', 'height']);
-    if (!isEqual(newSize, panelSize)) {
-      setPanelSize(newSize);
-    }
-  }, [dynamicBounds, panelPosition, panelSize, setPanelSize]);
-
-  useEffect(() => {
-    window.addEventListener('resize', dynamicResize);
-
-    return () => {
-      window.removeEventListener('resize', dynamicResize);
-    };
-  }, [dynamicResize]);
-
-  useInterval(dynamicResize, dynamicBounds ? 250 : null);
-
-  const dockElement = docked && dockId && dockElements[dockId];
-  return (
-    <>
-      {dockElement && dockElement.isConnected ? (
-        createPortal(children, dockElement)
-      ) : panelPoppedOut ? (
-        <PopoutWindow
-          name={uniqueId}
-          title={title}
-          size={{ width: size.width, height: lastPanelHeightRef.current }}
-          popInPanelPosition={panelPosition}
-          popInPanelSize={{
-            width: panelSize.width,
-            height: panelSize.height === 'auto' ? lastPanelHeightRef.current : panelSize.height,
-          }}
-        >
-          <div
-            ref={panelRef}
-            style={{
-              display: 'flex',
-              flexDirection: 'column',
-              width: '100%',
-              height: '100%',
-            }}
-            className={className}
-          >
-            {children}
-          </div>
-        </PopoutWindow>
-      ) : (
-        <PopinWindow
-          {...props}
-          panelPosition={panelPosition}
-          setPanelPosition={setPanelPosition}
-          panelSize={panelSize}
-          setPanelSize={setPanelSize}
-          setInitialPanelSize={setInitialPanelSize}
-          hidden={hidden}
-        >
-          {children}
-        </PopinWindow>
-      )}
-    </>
-  );
-};
-
-export interface PanelContentProps {
-  className?: string | undefined;
-}
-
-export const PanelContent = forwardRef<HTMLDivElement, PropsWithChildren<PanelContentProps>>(function PanelContentFr(
-  { children, className },
-  ref,
-) {
-  return (
-    <div className={clsx(`WindowPanel-content`, className)} ref={ref}>
-      {children}
-    </div>
-  );
-});

package/dist/panel/PanelContext.ts

@@ -1,22 +0,0 @@
-import { createContext } from 'react';
-
-import { PanelSize } from './types';
-
-export interface PanelContextType {
-  resizePanel: (size: Partial<PanelSize>) => void;
-  initialResizePanel: (size: Partial<PanelSize>) => void;
-  resizeable: boolean;
-}
-
-const NoContextError = () => {
-  console.error('Missing PanelContext Provider');
-};
-
-/**
- * Provides access to closing/popping panels
- */
-export const PanelContext = createContext<PanelContextType>({
-  resizePanel: NoContextError,
-  initialResizePanel: NoContextError,
-  resizeable: true,
-});

package/dist/panel/PanelDock.tsx

@@ -1,20 +0,0 @@
-import { PropsWithChildren, ReactElement, useContext } from 'react';
-
-import { PanelsContext } from './PanelsContext';
-
-export interface PanelDockProps {
-  id: string;
-}
-
-export const PanelDock = ({ id, children }: PropsWithChildren<PanelDockProps>): ReactElement => {
-  const { setDockElement } = useContext(PanelsContext);
-
-  const setElement = (element: HTMLDivElement) => setDockElement(id, element);
-
-  return (
-    <div className={'panelDock'}>
-      <div ref={setElement} className={'panelDock-content'} />
-      <div className={'panelDock-empty'}>{children}</div>
-    </div>
-  );
-};

package/dist/panel/PanelHeader.tsx

@@ -1,105 +0,0 @@
-import { LuiIcon } from '@linzjs/lui';
-import { LuiIconName } from '@linzjs/lui/dist/assets/svg-content';
-import clsx from 'clsx';
-import { ReactElement, useContext, useState } from 'react';
-
-import { PanelContext } from './PanelContext';
-import { PanelHeaderButton } from './PanelHeaderButton';
-import { PanelInstanceContext } from './PanelInstanceContext';
-
-export interface PanelHeaderProps {
-  icon?: LuiIconName;
-  extraLeft?: ReactElement;
-  extraRight?: ReactElement;
-  helpUrl?: string;
-  onHelpClick?: () => void;
-  onDockClick?: () => void;
-  // Popped out windows are native so will not fire this, if you use this make the panel non popout!
-  // Return true to close the panel, otherwise false to keep it open.
-  onCloseClickPoppedInPanelOnly?: () => Promise<boolean> | boolean;
-  dockTo?: string;
-  disableClose?: boolean;
-  disablePopout?: boolean;
-}
-
-export const PanelHeader = ({
-  icon,
-  extraLeft,
-  extraRight,
-  helpUrl,
-  onHelpClick,
-  onDockClick,
-  onCloseClickPoppedInPanelOnly,
-  dockTo,
-  disableClose,
-  disablePopout,
-}: PanelHeaderProps) => {
-  const { resizeable } = useContext(PanelContext);
-  const { panelClose, panelTogglePopout, panelPoppedOut, title, dock, undock, docked } =
-    useContext(PanelInstanceContext);
-  const [cursor, setCursor] = useState<'grab' | 'grabbing'>('grab');
-
-  const headerMouseDown = () => {
-    if (!panelPoppedOut) {
-      setCursor('grabbing');
-    }
-  };
-
-  return (
-    <div
-      className={clsx('WindowPanel-header', resizeable && 'draggable-handle')}
-      onMouseDown={headerMouseDown}
-      onMouseUp={() => !panelPoppedOut && setCursor('grab')}
-      style={resizeable ? { cursor } : {}}
-    >
-      <div className={'WindowPanel-header-title'}>
-        {icon && <LuiIcon name={icon} alt={'icon'} size={'md'} className={'WindowPanel-header-title-icon'} />}
-        {title}
-      </div>
-      {extraLeft && <div className={'WindowPanel-divider-left'} />}
-      <div className={'WindowPanel-children'}>{extraLeft}</div>
-      <div className={'WindowPanel-buttons'}>
-        {extraRight}
-        {(helpUrl || onHelpClick) && (
-          <PanelHeaderButton aria-label={'Get help'} href={helpUrl} onClick={onHelpClick} icon={'ic_help_outline'} />
-        )}
-      </div>
-      {(dockTo || !disablePopout || !disableClose) && <div className={'WindowPanel-divider-right'} />}
-      <div className={'WindowPanel-buttons'}>
-        {onDockClick && <PanelHeaderButton aria-label={'Dock'} onClick={() => onDockClick()} icon={'ic_left_col'} />}
-        {!onDockClick &&
-          dockTo &&
-          (docked ? (
-            <PanelHeaderButton aria-label={'Undock'} onClick={undock} icon={'ic_close_list'} />
-          ) : (
-            <PanelHeaderButton aria-label={'Dock'} onClick={() => dock(dockTo)} icon={'ic_left_col'} />
-          ))}
-        {!disablePopout && (
-          <PanelHeaderButton
-            aria-label={panelPoppedOut ? 'Pop-in' : 'Pop-out'}
-            onClick={panelTogglePopout}
-            icon={panelPoppedOut ? 'ic_pop_back' : 'ic_launch_new window_open'}
-          />
-        )}
-        {!disableClose && (
-          <PanelHeaderButton
-            aria-label={'Close'}
-            onClick={() => {
-              if (onCloseClickPoppedInPanelOnly) {
-                void (async () => {
-                  const result = await onCloseClickPoppedInPanelOnly();
-                  if (result) {
-                    panelClose();
-                  }
-                })();
-              } else {
-                panelClose();
-              }
-            }}
-            icon={'ic_clear'}
-          />
-        )}
-      </div>
-    </div>
-  );
-};

package/dist/panel/PanelHeaderButton.tsx

@@ -1,26 +0,0 @@
-import { LuiButton, LuiIcon } from '@linzjs/lui';
-import { LuiIconName } from '@linzjs/lui/dist/assets/svg-content';
-
-export interface PanelHeaderButtonProps {
-  'aria-label': string;
-  href?: string;
-  icon: LuiIconName;
-  onClick?: () => void;
-}
-
-export const PanelHeaderButton = ({ 'aria-label': ariaLabel, href, icon, onClick }: PanelHeaderButtonProps) => (
-  <LuiButton
-    level={'plain-text'}
-    className={'lui-button-icon-only'}
-    size={'sm'}
-    href={href}
-    onClick={onClick}
-    openInNewTab={!!href}
-    title={ariaLabel}
-    buttonProps={{
-      onTouchStart: onClick,
-    }}
-  >
-    <LuiIcon name={icon} alt={ariaLabel} size={'md'} />
-  </LuiButton>
-);

package/dist/panel/PanelInline.tsx

@@ -1,46 +0,0 @@
-import { CSSProperties, forwardRef, PropsWithChildren } from 'react';
-
-import { PanelContext } from './PanelContext';
-import { PanelInstanceContext } from './PanelInstanceContext';
-import { v4 } from '../common/uuid';
-import clsx from 'clsx';
-
-export interface PanelInlineProps {
-  title: string;
-  className?: string;
-  width?: CSSProperties['width'];
-  height?: CSSProperties['height'];
-}
-
-export const PanelInline = forwardRef<HTMLDivElement, PropsWithChildren<PanelInlineProps>>(function PanelInline(
-  { title, className, width, height, children },
-  ref,
-) {
-  return (
-    <PanelContext.Provider value={{ resizeable: false, resizePanel: () => {}, initialResizePanel: () => {} }}>
-      <PanelInstanceContext.Provider
-        value={{
-          setTitle: () => {},
-          title,
-          zIndex: 1500,
-          uniqueId: v4(),
-          dock: () => {},
-          panelClose: () => {},
-          dockId: undefined,
-          docked: false,
-          bringPanelToFront: () => {},
-          hidden: false,
-          setPanelWindow: () => {},
-          panelTogglePopout: () => {},
-          undock: () => {},
-          panelPoppedOut: false,
-          bounds: undefined,
-        }}
-      >
-        <div ref={ref} className={clsx('WindowPanel', className)} title={title} style={{ width, height }}>
-          {children}
-        </div>
-      </PanelInstanceContext.Provider>
-    </PanelContext.Provider>
-  );
-});

package/dist/panel/PanelInstanceContext.ts

@@ -1,44 +0,0 @@
-import { createContext } from 'react';
-
-export interface PanelInstanceContextType {
-  title: string;
-  setTitle: (title: string) => void;
-  uniqueId: string;
-  bounds: string | Element | undefined;
-  panelTogglePopout: () => void;
-  panelClose: () => void;
-  setPanelWindow: (w: Window) => void;
-  bringPanelToFront: () => void;
-  panelPoppedOut: boolean;
-  zIndex: number;
-  dockId: string | undefined;
-  docked: boolean;
-  dock: (id: string) => void;
-  undock: () => void;
-  hidden?: boolean;
-}
-
-const NoContextError = () => {
-  console.error('Missing PanelInstanceContext Provider');
-};
-
-/**
- * Provides access to closing/popping panels
- */
-export const PanelInstanceContext = createContext<PanelInstanceContextType>({
-  title: 'Missing PanelInstanceContext Provider: title',
-  uniqueId: 'Missing PanelInstanceContext Provider: uniqueId',
-  bounds: document.body,
-  setTitle: NoContextError,
-  panelTogglePopout: NoContextError,
-  panelClose: NoContextError,
-  setPanelWindow: NoContextError,
-  bringPanelToFront: NoContextError,
-  dock: NoContextError,
-  undock: NoContextError,
-  docked: false,
-  dockId: undefined,
-  panelPoppedOut: false,
-  zIndex: 0,
-  hidden: false,
-});

package/dist/panel/PanelInstanceContextProvider.tsx

@@ -1,75 +0,0 @@
-import { PropsWithChildren, ReactElement, useCallback, useContext, useState } from 'react';
-
-import { PanelInstanceContext } from './PanelInstanceContext';
-import { PanelInstance, PanelsContext } from './PanelsContext';
-import { useRestoreStateFrom } from './usePanelStateHandler';
-
-export interface PanelInstanceContextProviderProps {
-  hidden?: boolean;
-  bounds?: string | Element;
-  panelInstance: PanelInstance;
-}
-
-/**
- * Provides access to closing/popping panels
- */
-export const PanelInstanceContextProvider = ({
-  panelInstance,
-  bounds,
-  hidden,
-  children,
-}: PropsWithChildren<PanelInstanceContextProviderProps>): ReactElement => {
-  const { closePanel, bringPanelToFront, dockElements } = useContext(PanelsContext);
-  const [title, setTitle] = useState('');
-  const [dockId, setDockId] = useState<string>();
-
-  const savedState = useRestoreStateFrom({ uniqueId: panelInstance.uniqueId });
-  const [poppedOut, setPoppedOut] = useState(savedState?.panelPoppedOut ?? panelInstance.poppedOut);
-
-  const togglePopOut = useCallback(() => {
-    panelInstance.window = null;
-    setPoppedOut(!poppedOut);
-  }, [panelInstance, poppedOut]);
-
-  const dock = useCallback(
-    (id: string) => {
-      if (poppedOut) togglePopOut();
-      setDockId(id);
-    },
-    [poppedOut, togglePopOut],
-  );
-
-  const undock = useCallback(() => setDockId(undefined), []);
-
-  const uniqueId = panelInstance.uniqueId;
-
-  return (
-    <PanelInstanceContext.Provider
-      value={{
-        title,
-        setTitle,
-        uniqueId,
-        bounds,
-        panelClose: () => {
-          panelInstance.window?.close();
-          panelInstance.window = null;
-          closePanel(uniqueId);
-        },
-        panelTogglePopout: togglePopOut,
-        panelPoppedOut: poppedOut,
-        setPanelWindow: (w: Window) => {
-          panelInstance.window = w;
-        },
-        bringPanelToFront: () => bringPanelToFront(uniqueId),
-        zIndex: panelInstance.zIndex,
-        docked: !poppedOut && !!dockId && !!dockElements[dockId],
-        dockId,
-        dock,
-        undock,
-        hidden,
-      }}
-    >
-      {children}
-    </PanelInstanceContext.Provider>
-  );
-};

package/dist/panel/PanelsContext.tsx

@@ -1,56 +0,0 @@
-import { createContext, ReactElement } from 'react';
-
-import { PanelPosition } from './types';
-import { PanelStateOptions } from './types/PanelStateOptions';
-
-export interface PanelInstance {
-  uniqueId: string;
-  componentInstance: ReactElement;
-  zIndex: number;
-  poppedOut: boolean;
-  window: Window | null;
-  onClose?: () => void;
-  hidden: boolean;
-}
-
-export interface OpenPanelOptions {
-  uniqueId?: string;
-  componentFn: () => ReactElement;
-  poppedOut?: boolean;
-  onClose?: () => void;
-}
-
-export interface PanelsContextType {
-  openPanels: Set<string>;
-  hasOpenPanel: (panelId: string) => boolean;
-  // returns unique id of panel that was created/or already found, otherwise null on error.
-  openPanel: (args: OpenPanelOptions) => string | null;
-  closePanel: (uniqueId: string | string[]) => void;
-  hidePanel: (uniqueId: string | string[]) => void;
-  unhidePanel: (uniqueId: string | string[]) => void;
-  hasHiddenPanel: (uniqueId: string) => boolean;
-  bringPanelToFront: (panelUniqueId: string) => void;
-  nextStackPosition: () => PanelPosition;
-  dockElements: Record<string, HTMLDivElement>;
-  setDockElement: (id: string, element: HTMLDivElement) => void;
-  panelStateOptions?: PanelStateOptions | null;
-}
-
-const NoContext = <T,>(): T => {
-  console.error('Missing PanelContext Provider');
-  return undefined as T;
-};
-
-export const PanelsContext = createContext<PanelsContextType>({
-  openPanels: new Set(),
-  hasOpenPanel: () => false,
-  openPanel: NoContext,
-  closePanel: NoContext,
-  hidePanel: NoContext,
-  unhidePanel: NoContext,
-  hasHiddenPanel: NoContext,
-  bringPanelToFront: NoContext,
-  dockElements: {},
-  setDockElement: NoContext,
-  nextStackPosition: () => ({ x: 0, y: 0 }),
-});