@linzjs/windows 7.0.0 → 7.1.0

package/dist/LuiModalAsync/LuiModalAsync.tsx

@@ -3,7 +3,7 @@ import '@linzjs/lui/dist/scss/base.scss';
 import '@linzjs/lui/dist/fonts';
 
 import clsx from 'clsx';
-import { delay } from 'lodash';
+import { delay } from 'lodash-es';
 import React, { CSSProperties, PropsWithChildren, ReactElement, useContext, useEffect, useRef } from 'react';
 
 import { LuiModalAsyncInstanceContext } from './LuiModalAsyncInstanceContext';

package/dist/LuiModalAsync/useLuiModalPrefab.tsx

@@ -2,8 +2,7 @@ import { LuiButton, LuiCheckboxInput, LuiMiniSpinner } from '@linzjs/lui';
 import { LuiButtonProps } from '@linzjs/lui/dist/components/LuiButton/LuiButton';
 import { IconName } from '@linzjs/lui/dist/components/LuiIcon/LuiIcon';
 import clsx from 'clsx';
-import { flatMap } from 'lodash';
-import { omit, pick } from 'lodash-es';
+import { flatMap, omit, pick } from 'lodash-es';
 import React, { PropsWithChildren, ReactElement, useCallback, useMemo, useState } from 'react';
 
 import { debugLog } from '../common/debug';

package/dist/panel/Panel.tsx

@@ -15,11 +15,13 @@ import {
   useState,
 } from 'react';
 import { createPortal } from 'react-dom';
+import { useInterval } from 'usehooks-ts';
 
 import { PanelInstanceContext } from './PanelInstanceContext';
 import { PanelsContext } from './PanelsContext';
 import { PopinWindow } from './PopinWIndow';
 import { PopoutWindow } from './PopoutWindow';
+import { PanelPosition } from './types';
 import { PanelProps } from './types/PanelProps';
 import { useRestoreStateFrom } from './usePanelStateHandler';
 
@@ -27,7 +29,7 @@ const defaultInitialSize = { width: 320, height: 200 };
 
 export const Panel = (props: PanelProps): ReactElement => {
   const panelRef = useRef<HTMLDivElement>(null);
-  const { title, size = defaultInitialSize, className, children } = props;
+  const { title, size = defaultInitialSize, className, ignoreSavedState, children } = props;
 
   const { dockElements, nextStackPosition } = useContext(PanelsContext);
   const { panelPoppedOut, uniqueId, setTitle, dockId, docked } = useContext(PanelInstanceContext);
@@ -48,33 +50,77 @@ export const Panel = (props: PanelProps): ReactElement => {
     }
   }, [title]);
 
-  const [panelPosition, setPanelPosition] = useState(() => {
-    if (savedState?.panelPosition) {
+  const [panelPosition, setPanelPosition] = useState((): PanelPosition => {
+    const pos = props.position;
+    if (!ignoreSavedState && savedState?.panelPosition) {
       return savedState.panelPosition;
     }
 
-    if (props.position === 'center') {
+    // PanelPosition
+    if (pos && typeof pos === 'object' && 'selector' in pos) {
+      const b = document.querySelector(pos.selector)?.getBoundingClientRect();
+      if (b) {
+        return { x: b[pos.edgeX ?? 'left'] + (pos.offsetX ?? 0), y: b[pos.edgeY ?? 'bottom'] + (pos.offsetY ?? 0) };
+      }
+    }
+
+    if (pos === 'center') {
       return {
         x: Math.max((window.innerWidth - size.width) / 2, 0),
         y: Math.max((window.innerHeight - size.height) / 2, 0),
       };
     }
 
-    if (props.position != null && props.position !== 'tile') {
-      return props.position;
+    if (pos != null && pos !== 'tile') {
+      return pos as PanelPosition;
     }
 
     return nextStackPosition();
   });
 
-  const [panelSize, setPanelSize] = useState<NumberSize>(() => {
+  useInterval(
+    () => {
+      const pos = props.position;
+      if (pos && typeof pos === 'object' && 'selector' in pos) {
+        const b = document.querySelector(pos.selector)?.getBoundingClientRect();
+        if (b) {
+          const newPos = {
+            x: b[pos.edgeX ?? 'left'] + (pos.offsetX ?? 0),
+            y: b[pos.edgeY ?? 'bottom'] + (pos.offsetY ?? 0),
+          };
+          if (newPos.x !== panelPosition.x || newPos.y !== panelPosition.y) {
+            setPanelPosition(newPos);
+          }
+        }
+      }
+    },
+    props.position && typeof props.position === 'object' && 'selector' in props.position ? 250 : null,
+  );
+
+  const cropSizeToWindow = useCallback((size: NumberSize) => {
+    return typeof window !== 'undefined' && window.innerWidth && window.innerHeight
+      ? {
+          width: Math.min(window.document.body?.clientWidth ?? window.innerWidth, size.width),
+          height: Math.min(window.document.body?.clientHeight ?? window.innerHeight, size.height),
+        }
+      : size;
+  }, []);
+
+  const [panelSize, _setPanelSize] = useState<NumberSize>(() => {
     if (savedState?.panelSize) {
-      return savedState.panelSize;
+      return cropSizeToWindow(savedState.panelSize);
     }
 
     return size ?? { width: 320, height: 200 };
   });
 
+  const setPanelSize = useCallback(
+    (size: NumberSize) => {
+      _setPanelSize(cropSizeToWindow(size));
+    },
+    [cropSizeToWindow],
+  );
+
   const setInitialPanelSize = useCallback(
     (size: NumberSize) => {
       // If panel was already sized from state, then don't resize
@@ -84,7 +130,7 @@ export const Panel = (props: PanelProps): ReactElement => {
 
       setPanelSize(size);
     },
-    [savedState?.panelSize],
+    [savedState?.panelSize, setPanelSize],
   );
 
   const dockElement = docked && dockId && dockElements[dockId];

package/dist/panel/types/PanelProps.ts

@@ -3,6 +3,14 @@ import { PropsWithChildren } from 'react';
 import { PanelPosition } from './PanelPosition';
 import { PanelSize } from './PanelSize';
 
+export interface PanelRelativePositon {
+  selector: string;
+  edgeX?: 'left' | 'right';
+  edgeY?: 'top' | 'bottom';
+  offsetX?: number;
+  offsetY?: number;
+}
+
 interface _PanelProps {
   className?: string;
   maxHeight?: number | string;
@@ -10,10 +18,11 @@ interface _PanelProps {
   minHeight?: number | string;
   minWidth?: number | string;
   modal?: boolean;
-  position?: PanelPosition | 'tile' | 'center';
+  position?: PanelPosition | PanelRelativePositon | 'tile' | 'center';
   resizeable?: boolean;
   size?: PanelSize;
   title: string;
+  ignoreSavedState?: boolean;
 }
 
 export type PanelProps = PropsWithChildren<_PanelProps>;

package/package.json

@@ -13,12 +13,12 @@
     "popout"
   ],
   "main": "./dist/index.ts",
-  "version": "7.0.0",
+  "version": "7.1.0",
   "peerDependencies": {
     "@linzjs/lui": ">=21",
     "lodash-es": ">=4",
-    "react": ">=19",
-    "react-dom": ">=19"
+    "react": ">=18",
+    "react-dom": ">=18"
   },
   "files": [
     "dist"
@@ -59,16 +59,16 @@
     "uuid": "^13.0.0"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^4.1.1",
-    "@linzjs/lui": "^23.14.3",
+    "@chromatic-com/storybook": "^4.1.2",
+    "@linzjs/lui": "^23.14.4",
     "@linzjs/step-ag-grid": "^29.5.1",
     "@linzjs/style": "^5.4.0",
-    "@rollup/plugin-commonjs": "^28.0.8",
+    "@rollup/plugin-commonjs": "^28.0.9",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
-    "@storybook/addon-docs": "^9.1.13",
-    "@storybook/addon-links": "^9.1.13",
-    "@storybook/react-vite": "^9.1.13",
+    "@storybook/addon-docs": "^9.1.16",
+    "@storybook/addon-links": "^9.1.16",
+    "@storybook/react-vite": "^9.1.16",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
@@ -76,24 +76,24 @@
     "@types/node": "^22.18.12",
     "@types/react": "^19.2.2",
     "@types/react-dom": "^19.2.2",
-    "@vitejs/plugin-react-swc": "^4.1.0",
-    "@vitest/ui": "^4.0.1",
-    "ag-grid-community": "^34.3.0",
-    "ag-grid-react": "^34.3.0",
+    "@vitejs/plugin-react-swc": "^4.2.0",
+    "@vitest/ui": "^4.0.5",
+    "ag-grid-community": "^34.3.1",
+    "ag-grid-react": "^34.3.1",
     "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-storybook": "9.1.13",
+    "eslint-plugin-storybook": "^9.1.16",
     "jsdom": "^27.0.1",
     "mkdirp": "^3.0.1",
     "npm-run-all": "^4.1.5",
-    "react": "^19.2.0",
+    "react": "18.3.1",
     "react-app-polyfill": "^3.0.0",
-    "react-dom": "^19.2.0",
+    "react-dom": "18.3.1",
     "rollup": "^4.52.5",
     "rollup-plugin-copy": "^3.5.0",
     "sass": "^1.93.2",
-    "sass-loader": "^16.0.5",
+    "sass-loader": "^16.0.6",
     "semantic-release": "^24.2.9",
-    "storybook": "^9.1.13",
+    "storybook": "^9.1.16",
     "style-loader": "^4.0.0",
     "stylelint": "^16.25.0",
     "stylelint-config-recommended": "^17.0.0",
@@ -102,14 +102,14 @@
     "stylelint-prettier": "5.0.3",
     "stylelint-scss": "6.12.1",
     "typescript": "^5.9.3",
-    "vite": "^7.1.11",
+    "vite": "^7.1.12",
     "vite-plugin-html": "^3.2.2",
     "vite-tsconfig-paths": "^5.1.4",
-    "vitest": "^4.0.1"
+    "vitest": "^4.0.5"
   },
   "optionalDependencies": {
     "@rollup/rollup-linux-x64-gnu": "^4.52.5",
-    "@swc/core-linux-x64-gnu": "^1.13.20"
+    "@swc/core-linux-x64-gnu": "^1.14.0"
   },
   "browserslist": {
     "production": [