@linzjs/windows 8.8.1 → 8.9.0

package/dist/components/CopyableText.scss

@@ -0,0 +1,34 @@
+@use "@linzjs/lui/dist/scss/Core" as lui;
+
+.CopyToClipboard {
+  cursor: pointer;
+}
+
+.windows_tooltip {
+  position: relative;
+  cursor: pointer;
+
+  .windows_tooltiptext {
+    opacity: 0;
+    transition: opacity 0.3s ease, width 0.3s ease;
+    pointer-events: none;
+    background-color: white;
+    color: rgb(46 52 56);
+    text-align: left;
+    padding: 4px 8px;
+    position: absolute;
+    z-index: 1;
+    line-height: 18px;
+    font-size: 13px;
+    overflow: hidden;
+
+    left: calc(100% + 8px);
+    transform: translateY(42%);
+    box-shadow: 0 2px 3px #00000040, 0 0 3px #00000026;
+  }
+
+  &:hover .windows_tooltiptext {
+    visibility: visible;
+    opacity: 1;
+  }
+}

package/dist/components/CopyableText.tsx

@@ -0,0 +1,57 @@
+import './CopyableText.scss';
+
+import clsx from 'clsx';
+import { CSSProperties, ReactElement, useEffect, useRef, useState } from 'react';
+
+export interface CopyableTextProps {
+  dataTestId?: string;
+  style?: CSSProperties;
+  className?: string;
+  text: string | number;
+}
+
+export const CopyableText = (props: CopyableTextProps): ReactElement => {
+  const [copied, setCopied] = useState(false);
+
+  const { dataTestId, style, className, text } = props;
+  const timeoutRefDisplay = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const copy = () => {
+    window.navigator.clipboard.writeText(String(text)).then(
+      () => {
+        setCopied(true);
+        timeoutRefDisplay.current = setTimeout(() => void setCopied(false), 3000);
+      },
+      (err: Error) => {
+        alert(`Data copy failed: ${err.message}`);
+      },
+    );
+  };
+
+  useEffect(
+    () => () => {
+      if (timeoutRefDisplay.current) {
+        clearTimeout(timeoutRefDisplay.current);
+        timeoutRefDisplay.current = null;
+      }
+    },
+    [],
+  );
+
+  return (
+    <span
+      data-testid={dataTestId}
+      style={style}
+      className={clsx('windows_tooltip', className)}
+      onClick={(event) => {
+        event.stopPropagation();
+        copy();
+      }}
+    >
+      <span className="windows_tooltiptext" style={{ width: copied ? '62px' : '47px' }}>
+        {copied ? 'Copied!' : 'Copy'}
+      </span>
+      {text}
+    </span>
+  );
+};

package/dist/components/index.ts

@@ -0,0 +1 @@
+export * from './CopyableText';

package/dist/panel/PanelsContextProvider.tsx

@@ -51,24 +51,28 @@ export const PanelsContextProvider = ({
 
   const bringPanelToFront = useCallback(
     (panelUniqueId: string) => {
-      const panelInstance = panelInstances.find((panelInstance) => panelInstance.uniqueId === panelUniqueId);
-      if (!panelInstance) {
-        console.warn(`bringPanelToFront cannot find panel with uniqueId: ${panelUniqueId}`);
-        return;
-      }
-      if (panelInstance.window) {
-        panelInstance.window.focus();
-      } else {
+      setPanelInstances((panelInstances): PanelInstance[] => {
+        const panelInstance = panelInstances.find((panelInstance) => panelInstance.uniqueId === panelUniqueId);
+        if (!panelInstance) {
+          console.warn(`bringPanelToFront cannot find panel with uniqueId: ${panelUniqueId}`);
+          return panelInstances;
+        }
+        if (panelInstance.window) {
+          panelInstance.window.focus();
+          return panelInstances;
+        }
         const maxZIndexPanelInstance = maxBy(panelInstances, 'zIndex');
         // Prevent unnecessary state updates
-        if (maxZIndexPanelInstance === panelInstance) return;
+        if (maxZIndexPanelInstance === panelInstance) {
+          return panelInstances;
+        }
         sortBy(panelInstances, (pi) => (panelInstance === pi ? 32768 : pi.zIndex)).forEach(
           (pi, i) => (pi.zIndex = baseZIndex + i),
         );
-        setPanelInstances([...panelInstances]);
-      }
+        return [...panelInstances];
+      });
     },
-    [baseZIndex, panelInstances],
+    [baseZIndex],
   );
 
   const showHidePanel = useCallback((hidePanelIds: string | string[], hidden: boolean) => {
@@ -104,39 +108,40 @@ export const PanelsContextProvider = ({
   const openPanel = useCallback(
     ({ componentFn, poppedOut = false, uniqueId = v4(), onClose }: OpenPanelOptions): string | null => {
       try {
-        const existingPanelInstance = panelInstances.find((pi) => pi.uniqueId === uniqueId);
-        if (existingPanelInstance) {
-          if (existingPanelInstance.window) {
-            existingPanelInstance.window?.focus();
-          } else {
-            if (existingPanelInstance.hidden) {
-              unhidePanel(uniqueId);
+        setPanelInstances((panelInstances) => {
+          const existingPanelInstance = panelInstances.find((pi) => pi.uniqueId === uniqueId);
+          if (existingPanelInstance) {
+            if (existingPanelInstance.window) {
+              existingPanelInstance.window?.focus();
+            } else {
+              if (existingPanelInstance.hidden) {
+                setTimeout(() => unhidePanel(uniqueId), 0);
+              }
+              setTimeout(() => bringPanelToFront(uniqueId), 0);
             }
-            bringPanelToFront(uniqueId);
+            return panelInstances;
           }
-          return existingPanelInstance.uniqueId;
-        }
 
-        // If there are any exceptions the modal won't show
-        setPanelInstances([
-          ...panelInstances,
-          {
-            uniqueId,
-            componentInstance: componentFn(),
-            zIndex: baseZIndex + panelInstances.length,
-            poppedOut,
-            window: null,
-            onClose,
-            hidden: false,
-          },
-        ]);
+          return [
+            ...panelInstances,
+            {
+              uniqueId,
+              componentInstance: componentFn(),
+              zIndex: baseZIndex + panelInstances.length,
+              poppedOut,
+              window: null,
+              onClose,
+              hidden: false,
+            },
+          ];
+        });
         return uniqueId;
       } catch (e) {
         console.error(e);
         return null;
       }
     },
-    [baseZIndex, bringPanelToFront, panelInstances, unhidePanel],
+    [baseZIndex, bringPanelToFront, unhidePanel],
   );
 
   const closePanel = useCallback((closePanelUniqueIds: string | string[]) => {

package/package.json

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