@linzjs/windows 3.7.0 → 4.0.0

package/dist/LuiModalAsync/LuiModalAsyncContextProvider.tsx

@@ -17,7 +17,6 @@ import React, {
 } from "react";
 import { createPortal } from "react-dom";
 import { useInterval } from "usehooks-ts";
-import { v4 as makeUuid } from "uuid";
 
 export interface LuiModalAsyncInstance {
   uuid: string;
@@ -107,7 +106,7 @@ export const LuiModalAsyncContextProvider = ({ children }: PropsWithChildren<unk
       args: any,
       showModalProps?: ShowModalProps,
     ): PromiseWithResolve<any> => {
-      const uuid = makeUuid();
+      const uuid = crypto.randomUUID();
       let extResolve: PromiseWithResolve<any>["resolve"];
       const promise = new Promise((resolve) => {
         extResolve = resolve;

package/dist/index.ts

@@ -1,2 +1,3 @@
+export * from "./common";
 export * from "./LuiModalAsync";
 export * from "./panel";

package/dist/panel/OpenPanelButton.tsx

@@ -1,17 +1,17 @@
 // Simple button to open panel and show panel state
-import { PanelsContext } from "./PanelsContext";
-import { ReactElement, useContext } from "react";
+import { OpenPanelOptions, PanelsContext } from "./PanelsContext";
+import { useContext } from "react";
 
-interface OpenPanelButtonProps {
+interface OpenPanelButtonProps extends OpenPanelOptions {
+  uniqueId?: string;
   buttonText: string;
-  component: () => ReactElement;
 }
 
-export const OpenPanelButton = ({ buttonText, component }: OpenPanelButtonProps) => {
+export const OpenPanelButton = ({ buttonText, ...openPanelOptions }: OpenPanelButtonProps) => {
   const { openPanel, openPanels } = useContext(PanelsContext);
 
   return (
-    <button onClick={() => openPanel({ uniqueId: buttonText, componentFn: component })}>
+    <button onClick={() => openPanel(openPanelOptions)}>
       Show {buttonText} {openPanels.has(buttonText) ? "(Open)" : ""}
     </button>
   );

package/dist/panel/OpenPanelIcon.tsx

@@ -1,9 +1,8 @@
 import "./OpenPanelIcon.scss";
 
-import { PanelsContext } from "./PanelsContext";
+import { OpenPanelOptions, PanelsContext } from "./PanelsContext";
 import clsx from "clsx";
-import { ReactElement, ReactNode, useContext, useRef } from "react";
-import { v4 as uuid } from "uuid";
+import { ReactNode, useContext, useRef } from "react";
 
 import { LuiIcon } from "@linzjs/lui";
 import { IconName } from "@linzjs/lui/dist/components/LuiIcon/LuiIcon";
@@ -22,29 +21,24 @@ export const ButtonIconVerticalGroup = ({ children }: { children: ReactNode }) =
 
 export const ButtonIconSeparator = () => <div className="OpenPanelIcon-separator">&#160;</div>;
 
-interface OpenPanelIconProps {
-  uniqueId?: string;
+interface OpenPanelIconProps extends OpenPanelOptions {
   iconTitle: string;
   icon: IconName;
-  component: () => ReactElement;
   disabled?: boolean;
   className?: string;
   testId?: string;
-  isPoppedOut?: boolean;
 }
 
 export const OpenPanelIcon = ({
   iconTitle,
-  uniqueId,
   icon,
-  component,
   className,
   disabled,
   testId,
-  isPoppedOut = false,
+  ...openPanelOptions
 }: OpenPanelIconProps) => {
   const { openPanel, openPanels } = useContext(PanelsContext);
-  const id = useRef(uniqueId ?? uuid());
+  const id = useRef(openPanelOptions.uniqueId ?? crypto.randomUUID());
 
   return (
     <button
@@ -56,13 +50,7 @@ export const OpenPanelIcon = ({
         disabled && "OpenPanelIcon-disabled",
       )}
       title={iconTitle}
-      onClick={() =>
-        openPanel({
-          componentFn: component,
-          uniqueId: id.current,
-          isPoppedOut,
-        })
-      }
+      onClick={() => openPanel(openPanelOptions)}
       disabled={disabled}
       data-testid={testId}
     >

package/dist/panel/Panel.tsx

@@ -19,6 +19,7 @@ import React, {
 } from "react";
 import { createPortal } from "react-dom";
 import { Rnd } from "react-rnd";
+import { useConstFunction } from "../common/useConstFunction";
 
 export interface PanelProps {
   title: string;
@@ -32,10 +33,12 @@ export interface PanelProps {
   minWidth?: number | string;
   modal?: boolean;
   resizeable?: boolean;
+  onClose?: () => void;
 }
 
 export const Panel = ({
   title,
+  onClose,
   size = { width: 320, height: 200 },
   maxHeight,
   maxWidth,
@@ -53,6 +56,14 @@ export const Panel = ({
   const { panelPoppedOut, bounds, zIndex, bringPanelToFront, uniqueId, setTitle, dockId, docked } =
     useContext(PanelInstanceContext);
 
+  const onCloseConstFn = useConstFunction(onClose ?? (() => {}));
+
+  useEffect(() => {
+    return () => {
+      onCloseConstFn?.();
+    };
+  }, [onCloseConstFn]);
+
   const [panelPosition, setPanelPosition] = useState(() => {
     switch (position) {
       case "center":

package/dist/panel/PanelHeader.tsx

@@ -13,6 +13,7 @@ export interface PanelHeaderProps {
   extraRight?: ReactNode;
   helpUrl?: string;
   onHelpClick?: () => void;
+  onDockClick?: () => void;
   dockTo?: string;
   disableClose?: boolean;
   disablePopout?: boolean;
@@ -24,6 +25,7 @@ export const PanelHeader = ({
   extraRight,
   helpUrl,
   onHelpClick,
+  onDockClick,
   dockTo,
   disableClose,
   disablePopout,
@@ -62,7 +64,11 @@ export const PanelHeader = ({
           (docked ? (
             <PanelHeaderButton aria-label={"Undock"} onClick={undock} icon={"ic_close_list"} />
           ) : (
-            <PanelHeaderButton aria-label={"Undock"} onClick={() => dock(dockTo)} icon={"ic_left_col"} />
+            <PanelHeaderButton
+              aria-label={"Dock"}
+              onClick={() => (onDockClick ? onDockClick() : dock(dockTo))}
+              icon={"ic_left_col"}
+            />
           ))}
         {!disablePopout && (
           <PanelHeaderButton

package/dist/panel/PanelInstanceContextProvider.tsx

@@ -14,7 +14,7 @@ export const PanelInstanceContextProvider = ({
   panelInstance: PanelInstance;
   children: ReactNode;
 }): ReactElement => {
-  const { closePanel, bringPanelToFront } = useContext(PanelsContext);
+  const { closePanel, bringPanelToFront, dockElements } = useContext(PanelsContext);
   const [title, setTitle] = useState("");
   const [dockId, setDockId] = useState<string>();
 
@@ -55,7 +55,7 @@ export const PanelInstanceContextProvider = ({
         },
         bringPanelToFront: () => bringPanelToFront(panelInstance),
         zIndex: panelInstance.zIndex,
-        docked: !poppedOut && !!dockId,
+        docked: !poppedOut && !!dockId && !!dockElements[dockId],
         dockId,
         dock,
         undock,

package/dist/panel/PanelsContext.tsx

@@ -13,15 +13,15 @@ export interface PanelInstance {
   window: Window | null;
 }
 
-export interface OpenPanel {
+export interface OpenPanelOptions {
+  uniqueId?: string;
   componentFn: () => ReactElement;
-  isPoppedOut?: boolean;
-  uniqueId: string;
+  poppedOut?: boolean;
 }
 
 export interface PanelsContextType {
   openPanels: Set<string>;
-  openPanel: (args: OpenPanel) => void;
+  openPanel: (args: OpenPanelOptions) => void;
   closePanel: (panelInstance: PanelInstance) => void;
   bringPanelToFront: (panelInstance: PanelInstance) => void;
   nextStackPosition: () => PanelPosition;

package/dist/panel/PanelsContextProvider.tsx

@@ -1,5 +1,5 @@
 import { PanelInstanceContextProvider } from "./PanelInstanceContextProvider";
-import { OpenPanel, PanelInstance, PanelPosition, PanelsContext } from "./PanelsContext";
+import { OpenPanelOptions, PanelInstance, PanelPosition, PanelsContext } from "./PanelsContext";
 import { castArray, maxBy, sortBy } from "lodash-es";
 import React, { Fragment, PropsWithChildren, ReactElement, useCallback, useMemo, useRef, useState } from "react";
 import { useInterval } from "usehooks-ts";
@@ -54,7 +54,7 @@ export const PanelsContextProvider = ({
   );
 
   const openPanel = useCallback(
-    ({ componentFn, isPoppedOut = false, uniqueId }: OpenPanel): void => {
+    ({ componentFn, poppedOut = false, uniqueId = crypto.randomUUID() }: OpenPanelOptions): void => {
       try {
         const existingPanelInstance = panelInstances.find((pi) => pi.uniqueId === uniqueId);
         if (existingPanelInstance) {
@@ -73,7 +73,7 @@ export const PanelsContextProvider = ({
             uniqueId,
             componentInstance: componentFn(),
             zIndex: baseZIndex + panelInstances.length,
-            poppedOut: isPoppedOut,
+            poppedOut,
             window: null,
           },
         ]);

package/package.json

@@ -13,7 +13,7 @@
     "popout"
   ],
   "main": "./dist/index.ts",
-  "version": "3.7.0",
+  "version": "4.0.0",
   "peerDependencies": {
     "@linzjs/lui": ">=21",
     "lodash-es": ">=4",
@@ -34,7 +34,7 @@
     "build": "run-s clean stylelint lint lint-circular-deps bundle",
     "yalc": "run-s clean bundle && yalc publish",
     "clean": "rimraf dist && mkdirp ./dist",
-    "bundle": "rollup -c",
+    "bundle": "tsc --noEmit && rollup -c",
     "test": "jest",
     "stylelint": "stylelint src/**/*.scss src/**/*.css --fix",
     "lint": "eslint ./src --ext .js,.ts,.tsx --fix --cache --ignore-path .gitignore",
@@ -51,8 +51,7 @@
     "@emotion/styled": "^11.13.5",
     "lodash-es": ">=4",
     "react-rnd": "^10.4.13",
-    "usehooks-ts": "^3.1.0",
-    "uuid": "^11.0.3"
+    "usehooks-ts": "^3.1.0"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^3.2.2",
@@ -63,16 +62,15 @@
     "@rollup/plugin-commonjs": "^28.0.1",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.3.0",
-    "@storybook/addon-docs": "^8.4.6",
-    "@storybook/addon-essentials": "^8.4.6",
-    "@storybook/addon-interactions": "^8.4.6",
-    "@storybook/addon-links": "^8.4.6",
-    "@storybook/addon-mdx-gfm": "^8.4.6",
-    "@storybook/blocks": "^8.4.6",
-    "@storybook/react": "^8.4.6",
-    "@storybook/react-vite": "^8.4.6",
-    "@storybook/test": "^8.4.6",
-    "@storybook/test-runner": "^0.20.0",
+    "@storybook/addon-docs": "^8.4.7",
+    "@storybook/addon-essentials": "^8.4.7",
+    "@storybook/addon-interactions": "^8.4.7",
+    "@storybook/addon-links": "^8.4.7",
+    "@storybook/addon-mdx-gfm": "^8.4.7",
+    "@storybook/blocks": "^8.4.7",
+    "@storybook/react": "^8.4.7",
+    "@storybook/react-vite": "^8.4.7",
+    "@storybook/test": "^8.4.7",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
@@ -82,7 +80,6 @@
     "@types/node": "^22.10.1",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
-    "@types/uuid": "^10.0.0",
     "@typescript-eslint/eslint-plugin": "^7.17.0",
     "@typescript-eslint/parser": "^7.17.0",
     "ag-grid-community": "^32.3.3",
@@ -112,10 +109,10 @@
     "react-dom": "^18.3.1",
     "rollup": "^4.28.0",
     "rollup-plugin-copy": "^3.5.0",
-    "sass": "^1.81.0",
-    "sass-loader": "^14.2.1",
+    "sass": "^1.83.0",
+    "sass-loader": "^16.0.4",
     "semantic-release": "^22.0.12",
-    "storybook": "^8.4.6",
+    "storybook": "^8.4.7",
     "style-loader": "^4.0.0",
     "stylelint": "^16.11.0",
     "stylelint-config-recommended": "^14.0.1",
@@ -126,6 +123,9 @@
     "typescript": "^5.7.2",
     "vite": "^5.4.11"
   },
+  "optionalDependencies": {
+    "@rollup/rollup-linux-x64-gnu": "^4.28.1"
+  },
   "eslintConfig": {
     "extends": [
       "react-app",