@kemu-io/hs-react 0.3.5 → 0.3.6

package/cjs/components/SettingsDialog.d.ts

@@ -1,3 +1,4 @@
+import React$1 from 'react';
 import { ReactNode } from 'react';
 
 /**
@@ -56,7 +57,7 @@ export interface SettingsDialogProps {
 	noHeader?: boolean;
 	onClose: () => void;
 	onSave: () => void;
-	children: ReactNode;
+	children: React$1.ReactNode;
 	serviceOnline?: boolean;
 	saveDisabled?: boolean;
 	minHeight?: number;
@@ -73,8 +74,18 @@ export interface SettingsDialogProps {
 	resizableClassName?: string;
 	dialogContentClassName?: string;
 	dialogActionsClassName?: string;
+	dialogStyle?: React$1.CSSProperties;
+	contentWrapperStyle?: React$1.CSSProperties;
+	/**
+	 * When provided, enables persistence of dialog dimensions in localStorage.
+	 * The dimensions (width and height) are saved using this key and restored
+	 * when the dialog is opened, allowing the dialog to remember its size across
+	 * sessions. If a stored value exists, it overrides the initialWidth and
+	 * initialHeight props.
+	 */
+	persistenceSizeKey?: string;
 }
-declare const SettingsDialog: ({ title, open, noHeader, onClose, onSave, children, serviceOnline, saveDisabled, minHeight, minWidth, maxWidth, maxHeight, initialHeight, initialWidth, cancelButtonText, saveButtonText, disableResizing, disableExpansion, dialogClassName, resizableClassName, dialogContentClassName, dialogActionsClassName, }: SettingsDialogProps) => import("react/jsx-runtime.js").JSX.Element;
+declare const SettingsDialog: ({ title, open, noHeader, onClose, onSave, children, serviceOnline, saveDisabled, minHeight, minWidth, maxWidth, maxHeight, initialHeight, initialWidth, cancelButtonText, saveButtonText, disableResizing, disableExpansion, dialogClassName, resizableClassName, dialogContentClassName, dialogActionsClassName, persistenceSizeKey, dialogStyle, contentWrapperStyle, }: SettingsDialogProps) => import("react/jsx-runtime.js").JSX.Element;
 
 export {
 	SettingsDialog as default,

package/cjs/components/SettingsDialog.js

@@ -71,4 +71,4 @@
   &:hover {
     background-color: rgba(255, 255, 255, 1);
   }
-`,SettingsDialog=({title:e="Settings",open:t,noHeader:i=!1,onClose:o,onSave:a,children:r,serviceOnline:l=!0,saveDisabled:n=!1,minHeight:s=250,minWidth:d=450,maxWidth:u,maxHeight:_=(window.visualViewport?.height??window.innerHeight)-100,initialHeight:m=Math.min(800,(window.visualViewport?.height??window.innerHeight)-100),initialWidth:h=450,cancelButtonText:p="Cancel",saveButtonText:c="Save",disableResizing:g=!1,disableExpansion:x=!1,dialogClassName:b,resizableClassName:f,dialogContentClassName:j,dialogActionsClassName:D})=>{const[w,y]=(0,react_1.useState)({width:h,height:m}),[C,v]=(0,react_1.useState)(!1),[S,k]=(0,react_1.useState)({width:h,height:m}),z=(0,react_1.useCallback)(((e,t,i,o)=>{if(g)return;const a={width:i.offsetWidth,height:i.offsetHeight};y(a)}),[g]),q=(0,react_1.useCallback)(((e,t)=>{"backdropClick"!==t&&"escapeKeyDown"!==t&&o()}),[o]),B=(0,react_1.useCallback)((()=>{if(C)y(S),v(!1);else{k(w);const e=window.innerWidth-180,t=window.innerHeight-120-60;y({width:Math.max(d,e),height:Math.max(s,t)}),v(!0)}}),[C,w,S,d,s]),H={pointerEvents:"none"},K=!x,N=!g&&!C,W=(0,jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment,{children:[!i&&(0,jsx_runtime_1.jsx)(Header,{children:(0,jsx_runtime_1.jsx)(Title,{children:e})}),K&&(0,jsx_runtime_1.jsx)(ExpandButton,{onClick:B,size:"small",children:C?(0,jsx_runtime_1.jsx)(FullscreenExit_1.default,{}):(0,jsx_runtime_1.jsx)(Fullscreen_1.default,{})}),(0,jsx_runtime_1.jsx)(StyledDialogContent,{className:j,children:(0,jsx_runtime_1.jsx)(ScrollableContainer,{children:r})}),(0,jsx_runtime_1.jsxs)(StyledDialogActions,{className:D,children:[(0,jsx_runtime_1.jsx)(KemuLightButton_js_1.default,{onClick:o,children:p}),(0,jsx_runtime_1.jsx)(KemuPrimaryButton_js_1.default,{disabled:!l||n,onClick:a,children:c})]})]});return(0,jsx_runtime_1.jsx)(ResizableDialog,{onClose:q,open:t,className:b,children:(0,jsx_runtime_1.jsx)(KemuThemeWrapper_js_1.default,{children:g?(0,jsx_runtime_1.jsx)("div",{className:f,style:{width:w.width,height:w.height},children:W}):(0,jsx_runtime_1.jsx)(re_resizable_1.Resizable,{enable:{top:N,right:N,bottom:N,left:N,topRight:N,bottomRight:N,bottomLeft:N,topLeft:N},handleStyles:{bottomLeft:H,bottomRight:{zIndex:2},bottom:H,top:H,topLeft:H,topRight:H},minHeight:s,minWidth:d,maxWidth:u,maxHeight:_,size:w,onResizeStop:z,className:f,children:W})})})};exports.default=SettingsDialog;
+`,SettingsDialog=({title:e="Settings",open:t,noHeader:i=!1,onClose:o,onSave:r,children:a,serviceOnline:l=!0,saveDisabled:n=!1,minHeight:s=250,minWidth:d=450,maxWidth:u,maxHeight:m=(window.visualViewport?.height??window.innerHeight)-100,initialHeight:_=Math.min(800,(window.visualViewport?.height??window.innerHeight)-100),initialWidth:c=450,cancelButtonText:h="Cancel",saveButtonText:p="Save",disableResizing:g=!1,disableExpansion:x=!1,dialogClassName:f,resizableClassName:b,dialogContentClassName:j,dialogActionsClassName:y,persistenceSizeKey:w,dialogStyle:D,contentWrapperStyle:C})=>{const S=(0,react_1.useCallback)((e=>{if(w)try{localStorage.setItem(w,JSON.stringify(e))}catch(e){console.warn(`Failed to save persisted dimensions for key "${w}":`,e)}}),[w]),k=(0,react_1.useCallback)((()=>{if(!w)return null;try{const e=localStorage.getItem(w);if(e){const t=JSON.parse(e);if(t&&"number"==typeof t.width&&"number"==typeof t.height)return{width:t.width,height:t.height}}}catch(e){console.warn(`Failed to load persisted dimensions for key "${w}":`,e)}return null}),[w]),[v,z]=(0,react_1.useState)({width:c,height:_}),[q,B]=(0,react_1.useState)(!1),[H,K]=(0,react_1.useState)({width:c,height:_});(0,react_1.useEffect)((()=>{if(t&&w){const e=k();e&&(z(e),K(e))}}),[t,w,k]);const N=(0,react_1.useCallback)(((e,t,i,o)=>{if(g)return;const r={width:i.offsetWidth,height:i.offsetHeight};z(r),S(r)}),[g,S]),W=(0,react_1.useCallback)(((e,t)=>{"backdropClick"!==t&&"escapeKeyDown"!==t&&o()}),[o]),F=(0,react_1.useCallback)((()=>{if(q)z(H),S(H),B(!1);else{K(v);const e=window.innerWidth-180,t=window.innerHeight-120-60,i={width:Math.max(d,e),height:Math.max(s,t)};z(i),S(i),B(!0)}}),[q,v,H,d,s,S]),R={pointerEvents:"none"},E=!x,M=!g&&!q,A=(0,jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment,{children:[!i&&(0,jsx_runtime_1.jsx)(Header,{children:(0,jsx_runtime_1.jsx)(Title,{children:e})}),E&&(0,jsx_runtime_1.jsx)(ExpandButton,{onClick:F,size:"small",children:q?(0,jsx_runtime_1.jsx)(FullscreenExit_1.default,{}):(0,jsx_runtime_1.jsx)(Fullscreen_1.default,{})}),(0,jsx_runtime_1.jsx)(StyledDialogContent,{className:j,children:(0,jsx_runtime_1.jsx)(ScrollableContainer,{style:C,children:a})}),(0,jsx_runtime_1.jsxs)(StyledDialogActions,{className:y,children:[(0,jsx_runtime_1.jsx)(KemuLightButton_js_1.default,{onClick:o,children:h}),(0,jsx_runtime_1.jsx)(KemuPrimaryButton_js_1.default,{disabled:!l||n,onClick:r,children:p})]})]});return(0,jsx_runtime_1.jsx)(ResizableDialog,{onClose:W,open:t,className:f,style:D,children:(0,jsx_runtime_1.jsx)(KemuThemeWrapper_js_1.default,{children:g?(0,jsx_runtime_1.jsx)("div",{className:b,style:{width:v.width,height:v.height},children:A}):(0,jsx_runtime_1.jsx)(re_resizable_1.Resizable,{enable:{top:M,right:M,bottom:M,left:M,topRight:M,bottomRight:M,bottomLeft:M,topLeft:M},handleStyles:{bottomLeft:R,bottomRight:{zIndex:2},bottom:R,top:R,topLeft:R,topRight:R},minHeight:s,minWidth:d,maxWidth:u,maxHeight:m,size:v,onResizeStop:N,className:b,style:C,children:A})})})};exports.default=SettingsDialog;

package/cjs/components/index.d.ts

@@ -356,8 +356,18 @@ export interface SettingsDialogProps {
 	resizableClassName?: string;
 	dialogContentClassName?: string;
 	dialogActionsClassName?: string;
+	dialogStyle?: React$1.CSSProperties;
+	contentWrapperStyle?: React$1.CSSProperties;
+	/**
+	 * When provided, enables persistence of dialog dimensions in localStorage.
+	 * The dimensions (width and height) are saved using this key and restored
+	 * when the dialog is opened, allowing the dialog to remember its size across
+	 * sessions. If a stored value exists, it overrides the initialWidth and
+	 * initialHeight props.
+	 */
+	persistenceSizeKey?: string;
 }
-export declare const SettingsDialog: ({ title, open, noHeader, onClose, onSave, children, serviceOnline, saveDisabled, minHeight, minWidth, maxWidth, maxHeight, initialHeight, initialWidth, cancelButtonText, saveButtonText, disableResizing, disableExpansion, dialogClassName, resizableClassName, dialogContentClassName, dialogActionsClassName, }: SettingsDialogProps) => import("react/jsx-runtime.js").JSX.Element;
+export declare const SettingsDialog: ({ title, open, noHeader, onClose, onSave, children, serviceOnline, saveDisabled, minHeight, minWidth, maxWidth, maxHeight, initialHeight, initialWidth, cancelButtonText, saveButtonText, disableResizing, disableExpansion, dialogClassName, resizableClassName, dialogContentClassName, dialogActionsClassName, persistenceSizeKey, dialogStyle, contentWrapperStyle, }: SettingsDialogProps) => import("react/jsx-runtime.js").JSX.Element;
 /**
  * Container for SVG icons with customizable fill color.
  *

package/mjs/components/SettingsDialog.d.ts

@@ -1,3 +1,4 @@
+import React$1 from 'react';
 import { ReactNode } from 'react';
 
 /**
@@ -56,7 +57,7 @@ export interface SettingsDialogProps {
 	noHeader?: boolean;
 	onClose: () => void;
 	onSave: () => void;
-	children: ReactNode;
+	children: React$1.ReactNode;
 	serviceOnline?: boolean;
 	saveDisabled?: boolean;
 	minHeight?: number;
@@ -73,8 +74,18 @@ export interface SettingsDialogProps {
 	resizableClassName?: string;
 	dialogContentClassName?: string;
 	dialogActionsClassName?: string;
+	dialogStyle?: React$1.CSSProperties;
+	contentWrapperStyle?: React$1.CSSProperties;
+	/**
+	 * When provided, enables persistence of dialog dimensions in localStorage.
+	 * The dimensions (width and height) are saved using this key and restored
+	 * when the dialog is opened, allowing the dialog to remember its size across
+	 * sessions. If a stored value exists, it overrides the initialWidth and
+	 * initialHeight props.
+	 */
+	persistenceSizeKey?: string;
 }
-declare const SettingsDialog: ({ title, open, noHeader, onClose, onSave, children, serviceOnline, saveDisabled, minHeight, minWidth, maxWidth, maxHeight, initialHeight, initialWidth, cancelButtonText, saveButtonText, disableResizing, disableExpansion, dialogClassName, resizableClassName, dialogContentClassName, dialogActionsClassName, }: SettingsDialogProps) => import("react/jsx-runtime.js").JSX.Element;
+declare const SettingsDialog: ({ title, open, noHeader, onClose, onSave, children, serviceOnline, saveDisabled, minHeight, minWidth, maxWidth, maxHeight, initialHeight, initialWidth, cancelButtonText, saveButtonText, disableResizing, disableExpansion, dialogClassName, resizableClassName, dialogContentClassName, dialogActionsClassName, persistenceSizeKey, dialogStyle, contentWrapperStyle, }: SettingsDialogProps) => import("react/jsx-runtime.js").JSX.Element;
 
 export {
 	SettingsDialog as default,

package/mjs/components/SettingsDialog.js

@@ -1,4 +1,4 @@
-import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";import{useCallback,useState}from"react";import styled from"@emotion/styled";import Dialog from"@mui/material/Dialog";import DialogContent from"@mui/material/DialogContent";import DialogActions from"@mui/material/DialogActions";import IconButton from"@mui/material/IconButton";import{Resizable}from"re-resizable";import Fullscreen from"@mui/icons-material/Fullscreen";import FullscreenExit from"@mui/icons-material/FullscreenExit";import KemuThemeWrapper from"./KemuThemeWrapper.js";import KemuPrimaryButton from"./KemuPrimaryButton.js";import KemuLightButton from"./KemuLightButton.js";const ScrollableContainer=styled.div`
+import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";import{useCallback,useEffect,useState}from"react";import styled from"@emotion/styled";import Dialog from"@mui/material/Dialog";import DialogContent from"@mui/material/DialogContent";import DialogActions from"@mui/material/DialogActions";import IconButton from"@mui/material/IconButton";import{Resizable}from"re-resizable";import Fullscreen from"@mui/icons-material/Fullscreen";import FullscreenExit from"@mui/icons-material/FullscreenExit";import KemuThemeWrapper from"./KemuThemeWrapper.js";import KemuPrimaryButton from"./KemuPrimaryButton.js";import KemuLightButton from"./KemuLightButton.js";const ScrollableContainer=styled.div`
   height: 100%;
   overflow-y: auto;
   padding: 0px 25px;
@@ -71,4 +71,4 @@ import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";i
   &:hover {
     background-color: rgba(255, 255, 255, 1);
   }
-`,SettingsDialog=({title:e="Settings",open:t,noHeader:i=!1,onClose:o,onSave:a,children:l,serviceOnline:n=!0,saveDisabled:r=!1,minHeight:s=250,minWidth:d=450,maxWidth:m,maxHeight:h=(window.visualViewport?.height??window.innerHeight)-100,initialHeight:p=Math.min(800,(window.visualViewport?.height??window.innerHeight)-100),initialWidth:g=450,cancelButtonText:c="Cancel",saveButtonText:x="Save",disableResizing:u=!1,disableExpansion:b=!1,dialogClassName:f,resizableClassName:w,dialogContentClassName:y,dialogActionsClassName:C})=>{const[j,D]=useState({width:g,height:p}),[S,_]=useState(!1),[k,v]=useState({width:g,height:p}),z=useCallback(((e,t,i,o)=>{if(u)return;const a={width:i.offsetWidth,height:i.offsetHeight};D(a)}),[u]),B=useCallback(((e,t)=>{"backdropClick"!==t&&"escapeKeyDown"!==t&&o()}),[o]),H=useCallback((()=>{if(S)D(k),_(!1);else{v(j);const e=window.innerWidth-180,t=window.innerHeight-120-60;D({width:Math.max(d,e),height:Math.max(s,t)}),_(!0)}}),[S,j,k,d,s]),K={pointerEvents:"none"},N=!b,R=!u&&!S,W=_jsxs(_Fragment,{children:[!i&&_jsx(Header,{children:_jsx(Title,{children:e})}),N&&_jsx(ExpandButton,{onClick:H,size:"small",children:_jsx(S?FullscreenExit:Fullscreen,{})}),_jsx(StyledDialogContent,{className:y,children:_jsx(ScrollableContainer,{children:l})}),_jsxs(StyledDialogActions,{className:C,children:[_jsx(KemuLightButton,{onClick:o,children:c}),_jsx(KemuPrimaryButton,{disabled:!n||r,onClick:a,children:x})]})]});return _jsx(ResizableDialog,{onClose:B,open:t,className:f,children:_jsx(KemuThemeWrapper,{children:u?_jsx("div",{className:w,style:{width:j.width,height:j.height},children:W}):_jsx(Resizable,{enable:{top:R,right:R,bottom:R,left:R,topRight:R,bottomRight:R,bottomLeft:R,topLeft:R},handleStyles:{bottomLeft:K,bottomRight:{zIndex:2},bottom:K,top:K,topLeft:K,topRight:K},minHeight:s,minWidth:d,maxWidth:m,maxHeight:h,size:j,onResizeStop:z,className:w,children:W})})})};export default SettingsDialog;
+`,SettingsDialog=({title:e="Settings",open:t,noHeader:i=!1,onClose:o,onSave:a,children:l,serviceOnline:n=!0,saveDisabled:r=!1,minHeight:s=250,minWidth:d=450,maxWidth:m,maxHeight:h=(window.visualViewport?.height??window.innerHeight)-100,initialHeight:p=Math.min(800,(window.visualViewport?.height??window.innerHeight)-100),initialWidth:g=450,cancelButtonText:c="Cancel",saveButtonText:u="Save",disableResizing:x=!1,disableExpansion:b=!1,dialogClassName:f,resizableClassName:y,dialogContentClassName:w,dialogActionsClassName:C,persistenceSizeKey:S,dialogStyle:j,contentWrapperStyle:k})=>{const D=useCallback((e=>{if(S)try{localStorage.setItem(S,JSON.stringify(e))}catch(e){console.warn(`Failed to save persisted dimensions for key "${S}":`,e)}}),[S]),_=useCallback((()=>{if(!S)return null;try{const e=localStorage.getItem(S);if(e){const t=JSON.parse(e);if(t&&"number"==typeof t.width&&"number"==typeof t.height)return{width:t.width,height:t.height}}}catch(e){console.warn(`Failed to load persisted dimensions for key "${S}":`,e)}return null}),[S]),[v,z]=useState({width:g,height:p}),[B,H]=useState(!1),[K,N]=useState({width:g,height:p});useEffect((()=>{if(t&&S){const e=_();e&&(z(e),N(e))}}),[t,S,_]);const F=useCallback(((e,t,i,o)=>{if(x)return;const a={width:i.offsetWidth,height:i.offsetHeight};z(a),D(a)}),[x,D]),W=useCallback(((e,t)=>{"backdropClick"!==t&&"escapeKeyDown"!==t&&o()}),[o]),R=useCallback((()=>{if(B)z(K),D(K),H(!1);else{N(v);const e=window.innerWidth-180,t=window.innerHeight-120-60,i={width:Math.max(d,e),height:Math.max(s,t)};z(i),D(i),H(!0)}}),[B,v,K,d,s,D]),E={pointerEvents:"none"},A=!b,I=!x&&!B,L=_jsxs(_Fragment,{children:[!i&&_jsx(Header,{children:_jsx(Title,{children:e})}),A&&_jsx(ExpandButton,{onClick:R,size:"small",children:_jsx(B?FullscreenExit:Fullscreen,{})}),_jsx(StyledDialogContent,{className:w,children:_jsx(ScrollableContainer,{style:k,children:l})}),_jsxs(StyledDialogActions,{className:C,children:[_jsx(KemuLightButton,{onClick:o,children:c}),_jsx(KemuPrimaryButton,{disabled:!n||r,onClick:a,children:u})]})]});return _jsx(ResizableDialog,{onClose:W,open:t,className:f,style:j,children:_jsx(KemuThemeWrapper,{children:x?_jsx("div",{className:y,style:{width:v.width,height:v.height},children:L}):_jsx(Resizable,{enable:{top:I,right:I,bottom:I,left:I,topRight:I,bottomRight:I,bottomLeft:I,topLeft:I},handleStyles:{bottomLeft:E,bottomRight:{zIndex:2},bottom:E,top:E,topLeft:E,topRight:E},minHeight:s,minWidth:d,maxWidth:m,maxHeight:h,size:v,onResizeStop:F,className:y,style:k,children:L})})})};export default SettingsDialog;

package/mjs/components/index.d.ts

@@ -356,8 +356,18 @@ export interface SettingsDialogProps {
 	resizableClassName?: string;
 	dialogContentClassName?: string;
 	dialogActionsClassName?: string;
+	dialogStyle?: React$1.CSSProperties;
+	contentWrapperStyle?: React$1.CSSProperties;
+	/**
+	 * When provided, enables persistence of dialog dimensions in localStorage.
+	 * The dimensions (width and height) are saved using this key and restored
+	 * when the dialog is opened, allowing the dialog to remember its size across
+	 * sessions. If a stored value exists, it overrides the initialWidth and
+	 * initialHeight props.
+	 */
+	persistenceSizeKey?: string;
 }
-export declare const SettingsDialog: ({ title, open, noHeader, onClose, onSave, children, serviceOnline, saveDisabled, minHeight, minWidth, maxWidth, maxHeight, initialHeight, initialWidth, cancelButtonText, saveButtonText, disableResizing, disableExpansion, dialogClassName, resizableClassName, dialogContentClassName, dialogActionsClassName, }: SettingsDialogProps) => import("react/jsx-runtime.js").JSX.Element;
+export declare const SettingsDialog: ({ title, open, noHeader, onClose, onSave, children, serviceOnline, saveDisabled, minHeight, minWidth, maxWidth, maxHeight, initialHeight, initialWidth, cancelButtonText, saveButtonText, disableResizing, disableExpansion, dialogClassName, resizableClassName, dialogContentClassName, dialogActionsClassName, persistenceSizeKey, dialogStyle, contentWrapperStyle, }: SettingsDialogProps) => import("react/jsx-runtime.js").JSX.Element;
 /**
  * Container for SVG icons with customizable fill color.
  *

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@kemu-io/hs-react",
   "type": "module",
-  "version": "0.3.5",
+  "version": "0.3.6",
   "description": "Kemu Hub Service library for React",
   "author": "Kemu Pty Ltd",
   "main": "cjs/WidgetWrapper.js",