@linzjs/windows 3.8.0 → 4.0.1

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/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/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,
@@ -58,7 +60,9 @@ export const PanelHeader = ({
       </div>
       {(dockTo || !disablePopout || !disableClose) && <div className={"WindowPanel-divider-right"} />}
       <div className={"WindowPanel-buttons"}>
-        {dockTo &&
+        {onDockClick && <PanelHeaderButton aria-label={"Dock"} onClick={() => onDockClick()} icon={"ic_left_col"} />}
+        {!onDockClick &&
+          dockTo &&
           (docked ? (
             <PanelHeaderButton aria-label={"Undock"} onClick={undock} icon={"ic_close_list"} />
           ) : (

package/dist/panel/PanelsContext.tsx

@@ -14,10 +14,9 @@ export interface PanelInstance {
 }
 
 export interface OpenPanelOptions {
-  uniqueId: string;
+  uniqueId?: string;
   componentFn: () => ReactElement;
   poppedOut?: boolean;
-  docked?: boolean;
 }
 
 export interface PanelsContextType {

package/dist/panel/PanelsContextProvider.tsx

@@ -54,7 +54,7 @@ export const PanelsContextProvider = ({
   );
 
   const openPanel = useCallback(
-    ({ componentFn, poppedOut = false, uniqueId }: OpenPanelOptions): void => {
+    ({ componentFn, poppedOut = false, uniqueId = crypto.randomUUID() }: OpenPanelOptions): void => {
       try {
         const existingPanelInstance = panelInstances.find((pi) => pi.uniqueId === uniqueId);
         if (existingPanelInstance) {

package/package.json

@@ -13,7 +13,7 @@
     "popout"
   ],
   "main": "./dist/index.ts",
-  "version": "3.8.0",
+  "version": "4.0.1",
   "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",