@linzjs/windows 8.0.0 → 8.2.0

package/dist/panel/OpenPanelButton.tsx

@@ -5,15 +5,48 @@ import { OpenPanelOptions, PanelsContext } from './PanelsContext';
 
 interface OpenPanelButtonProps extends OpenPanelOptions {
   uniqueId?: string;
+  testId?: string;
   buttonText: string;
 }
 
-export const OpenPanelButton = ({ buttonText, uniqueId = buttonText, ...openPanelOptions }: OpenPanelButtonProps) => {
-  const { openPanel, openPanels } = useContext(PanelsContext);
+export const OpenPanelButton = ({
+  buttonText,
+  testId,
+  uniqueId = buttonText,
+  ...openPanelOptions
+}: OpenPanelButtonProps) => {
+  const { openPanel, closePanel, hidePanel, unhidePanel, hasOpenPanel, hasHiddenPanel } = useContext(PanelsContext);
 
+  const open = hasOpenPanel(uniqueId);
+  const hidden = hasHiddenPanel(uniqueId);
   return (
-    <button onClick={() => openPanel({ uniqueId, ...openPanelOptions })}>
-      Show {buttonText} {openPanels.has(buttonText) ? '(Open)' : ''}
-    </button>
+    <div>
+      <b>
+        {buttonText} {open ? '(Open)' : ''}
+      </b>
+      <br />
+
+      {!open && (
+        <button data-testid={testId + 'Open'} onClick={() => openPanel({ uniqueId, ...openPanelOptions })}>
+          Open
+        </button>
+      )}
+      {open && (
+        <>
+          <button data-testid={testId + 'Close'} onClick={() => closePanel(uniqueId)}>
+            Close
+          </button>
+          {hidden ? (
+            <button data-testid={testId + 'Unhide'} onClick={() => unhidePanel(uniqueId)}>
+              Unhide
+            </button>
+          ) : (
+            <button data-testid={testId + 'Hide'} onClick={() => hidePanel(uniqueId)}>
+              Hide
+            </button>
+          )}
+        </>
+      )}
+    </div>
   );
 };

package/dist/panel/Panel.tsx

@@ -33,7 +33,7 @@ export const Panel = (props: PanelProps): ReactElement => {
   const { title, size = defaultInitialSize, className, dynamicBounds, children } = props;
 
   const { dockElements, nextStackPosition } = useContext(PanelsContext);
-  const { panelPoppedOut, uniqueId, setTitle, dockId, docked } = useContext(PanelInstanceContext);
+  const { panelPoppedOut, uniqueId, setTitle, dockId, docked, hidden } = useContext(PanelInstanceContext);
 
   const savedState = useRestoreStateFrom({ uniqueId, panelPoppedOut: false });
 
@@ -188,6 +188,7 @@ export const Panel = (props: PanelProps): ReactElement => {
           panelSize={panelSize}
           setPanelSize={setPanelSize}
           setInitialPanelSize={setInitialPanelSize}
+          hidden={hidden}
         >
           {children}
         </PopinWindow>

package/dist/panel/PanelInstanceContext.ts

@@ -16,6 +16,7 @@ export interface PanelInstanceContextType {
   docked: boolean;
   dock: (id: string) => void;
   undock: () => void;
+  hidden: boolean;
 }
 
 const NoContextError = () => {
@@ -41,4 +42,5 @@ export const PanelInstanceContext = createContext<PanelInstanceContextType>({
   dockId: undefined,
   panelPoppedOut: false,
   zIndex: 0,
+  hidden: false,
 });

package/dist/panel/PanelInstanceContextProvider.tsx

@@ -10,8 +10,10 @@ import { useRestoreStateFrom } from './usePanelStateHandler';
 export const PanelInstanceContextProvider = ({
   panelInstance,
   bounds,
+  hidden,
   children,
 }: PropsWithChildren<{
+  hidden: boolean;
   bounds: string | Element | undefined;
   panelInstance: PanelInstance;
 }>): ReactElement => {
@@ -63,6 +65,7 @@ export const PanelInstanceContextProvider = ({
         dockId,
         dock,
         undock,
+        hidden,
       }}
     >
       {children}

package/dist/panel/PanelsContext.tsx

@@ -10,6 +10,7 @@ export interface PanelInstance {
   poppedOut: boolean;
   window: Window | null;
   onClose?: () => void;
+  hidden: boolean;
 }
 
 export interface OpenPanelOptions {
@@ -21,9 +22,13 @@ export interface OpenPanelOptions {
 
 export interface PanelsContextType {
   openPanels: Set<string>;
+  hasOpenPanel: (panelId: string) => boolean;
   // returns unique id of panel that was created/or arleady found, otherwise null on error.
   openPanel: (args: OpenPanelOptions) => string | null;
-  closePanel: (uniqueId: string) => void;
+  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>;
@@ -38,8 +43,12 @@ const NoContext = <T,>(): 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,

package/dist/panel/PanelsContextProvider.tsx

@@ -71,6 +71,36 @@ export const PanelsContextProvider = ({
     [baseZIndex, panelInstances],
   );
 
+  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 {
@@ -79,6 +109,9 @@ export const PanelsContextProvider = ({
           if (existingPanelInstance.window) {
             existingPanelInstance.window?.focus();
           } else {
+            if (existingPanelInstance.hidden) {
+              unhidePanel(uniqueId);
+            }
             bringPanelToFront(uniqueId);
           }
           return existingPanelInstance.uniqueId;
@@ -94,6 +127,7 @@ export const PanelsContextProvider = ({
             poppedOut,
             window: null,
             onClose,
+            hidden: false,
           },
         ]);
         return uniqueId;
@@ -102,24 +136,24 @@ export const PanelsContextProvider = ({
         return null;
       }
     },
-    [baseZIndex, bringPanelToFront, panelInstances],
+    [baseZIndex, bringPanelToFront, panelInstances, unhidePanel],
   );
 
-  const closePanel = useCallback(
-    (closePanelUniqueIds: string | string[]) => {
-      const panelNames = castArray(closePanelUniqueIds);
+  const closePanel = useCallback((closePanelUniqueIds: string | string[]) => {
+    const panelIds = castArray(closePanelUniqueIds);
+    setPanelInstances((panelInstances) => {
       const [closedPanelInstances, stillOpenPanelInstances] = partition(panelInstances, (pi) =>
-        panelNames.includes(pi.uniqueId),
+        panelIds.includes(pi.uniqueId),
       );
       if (!isEmpty(closedPanelInstances)) {
         closedPanelInstances.forEach(({ onClose }) => {
           onClose?.();
         });
-        setPanelInstances(stillOpenPanelInstances);
+        return stillOpenPanelInstances;
       }
-    },
-    [panelInstances],
-  );
+      return panelInstances;
+    });
+  }, []);
 
   /**
    * It's not easy to tell the difference between a window closing and a window popping in via events,
@@ -144,22 +178,33 @@ export const PanelsContextProvider = ({
 
   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}>
+          <PanelInstanceContextProvider
+            key={panelInstance.uniqueId}
+            panelInstance={panelInstance}
+            bounds={bounds}
+            hidden={panelInstance.hidden}
+          >
             {panelInstance.componentInstance}
           </PanelInstanceContextProvider>
         ))}

package/dist/panel/PopinWIndow.tsx

@@ -25,12 +25,14 @@ export function PopinWindow({
   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);
 
@@ -113,7 +115,7 @@ export function PopinWindow({
         minHeight={minHeight}
         position={panelPosition}
         size={panelSize.height === 'auto' ? (pick(panelSize, 'width') as PanelSize) : panelSize}
-        style={{ zIndex }}
+        style={{ zIndex, visibility: hidden ? 'hidden' : undefined }}
         disableDragging={!resizeable}
         enableResizing={resizeable}
         bounds={bounds ?? document.body}

package/package.json

@@ -13,7 +13,7 @@
     "popout"
   ],
   "main": "./dist/index.ts",
-  "version": "8.0.0",
+  "version": "8.2.0",
   "peerDependencies": {
     "@linzjs/lui": ">=21",
     "lodash-es": ">=4",