@linzjs/windows 4.1.0 → 4.1.2

package/dist/LuiModalAsync/LuiModalAsyncContextProvider.tsx

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

package/dist/panel/OpenPanelButton.tsx

@@ -7,11 +7,11 @@ interface OpenPanelButtonProps extends OpenPanelOptions {
   buttonText: string;
 }
 
-export const OpenPanelButton = ({ buttonText, ...openPanelOptions }: OpenPanelButtonProps) => {
+export const OpenPanelButton = ({ buttonText, uniqueId = buttonText, ...openPanelOptions }: OpenPanelButtonProps) => {
   const { openPanel, openPanels } = useContext(PanelsContext);
 
   return (
-    <button onClick={() => openPanel(openPanelOptions)}>
+    <button onClick={() => openPanel({ uniqueId, ...openPanelOptions })}>
       Show {buttonText} {openPanels.has(buttonText) ? "(Open)" : ""}
     </button>
   );

package/dist/panel/OpenPanelIcon.tsx

@@ -2,7 +2,7 @@ import "./OpenPanelIcon.scss";
 
 import { OpenPanelOptions, PanelsContext } from "./PanelsContext";
 import clsx from "clsx";
-import { ReactNode, useContext, useRef } from "react";
+import { ReactNode, useContext } from "react";
 
 import { LuiIcon } from "@linzjs/lui";
 import { IconName } from "@linzjs/lui/dist/components/LuiIcon/LuiIcon";
@@ -35,10 +35,10 @@ export const OpenPanelIcon = ({
   className,
   disabled,
   testId,
+  uniqueId = iconTitle,
   ...openPanelOptions
 }: OpenPanelIconProps) => {
   const { openPanel, openPanels } = useContext(PanelsContext);
-  const id = useRef(openPanelOptions.uniqueId ?? crypto.randomUUID());
 
   return (
     <button
@@ -46,11 +46,11 @@ export const OpenPanelIcon = ({
       className={clsx(
         className,
         "lui-button lui-button-secondary lui-button-toolbar panel-button",
-        openPanels.has(id.current) && "OpenPanelIcon-selected",
+        openPanels.has(uniqueId) && "OpenPanelIcon-selected",
         disabled && "OpenPanelIcon-disabled",
       )}
       title={iconTitle}
-      onClick={() => openPanel(openPanelOptions)}
+      onClick={() => openPanel({ uniqueId, ...openPanelOptions })}
       disabled={disabled}
       data-testid={testId}
     >

package/dist/panel/PanelsContextProvider.tsx

@@ -5,6 +5,7 @@ import React, { Fragment, PropsWithChildren, ReactElement, useCallback, useMemo,
 import { useInterval } from "usehooks-ts";
 import { PanelStateOptions } from "./types/PanelStateOptions";
 import { PanelPosition } from "./types";
+import { v4 } from "uuid";
 
 export interface PanelsContextProviderProps {
   baseZIndex?: number;
@@ -58,7 +59,7 @@ export const PanelsContextProvider = ({
   );
 
   const openPanel = useCallback(
-    ({ componentFn, poppedOut = false, uniqueId = crypto.randomUUID() }: OpenPanelOptions): void => {
+    ({ componentFn, poppedOut = false, uniqueId = v4() }: 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": "4.1.0",
+  "version": "4.1.2",
   "peerDependencies": {
     "@linzjs/lui": ">=21",
     "lodash-es": ">=4",
@@ -49,9 +49,11 @@
     "@emotion/cache": "^11.13.5",
     "@emotion/react": "^11.13.5",
     "@emotion/styled": "^11.13.5",
+    "@types/uuid": "^10.0.0",
     "lodash-es": ">=4",
     "react-rnd": "^10.4.13",
-    "usehooks-ts": "^3.1.0"
+    "usehooks-ts": "^3.1.0",
+    "uuid": "^11.0.4"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^3.2.2",