@kemu-io/hs-react 0.3.1 → 0.3.3

package/cjs/components/KemuPrimaryButton.js

@@ -39,5 +39,6 @@
   &:disabled {
     opacity: 0.65;
     pointer-events: none;
+    color: #ffffffb0;
   }
 `;exports.default=KemuPrimaryButton;

package/cjs/components/SettingsDialog.d.ts

@@ -63,6 +63,8 @@ export interface SettingsDialogProps {
 	minWidth?: number;
 	maxWidth?: number;
 	maxHeight?: number;
+	initialHeight?: number;
+	initialWidth?: number;
 	cancelButtonText?: string;
 	saveButtonText?: string;
 	disableResizing?: boolean;
@@ -72,7 +74,7 @@ export interface SettingsDialogProps {
 	dialogContentClassName?: string;
 	dialogActionsClassName?: string;
 }
-declare const SettingsDialog: ({ title, open, noHeader, onClose, onSave, children, serviceOnline, saveDisabled, minHeight, minWidth, maxWidth, maxHeight, 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, }: SettingsDialogProps) => import("react/jsx-runtime.js").JSX.Element;
 
 export {
 	SettingsDialog as default,

package/cjs/components/SettingsDialog.js

@@ -53,7 +53,7 @@
   position: absolute;
   margin-top: 20px;
   width: 100%;
-  padding: 0 25px 20px;
+  padding: 10px 25px 20px;
   bottom: 0;
   right: 0;
   background-color: white;
@@ -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=400,minWidth:d=500,maxWidth:u,maxHeight:_,cancelButtonText:m="Cancel",saveButtonText:p="Save",disableResizing:c=!1,disableExpansion:x=!1,dialogClassName:h,resizableClassName:g,dialogContentClassName:b,dialogActionsClassName:f})=>{const[j,D]=(0,react_1.useState)({width:d,height:s}),[y,C]=(0,react_1.useState)(!1),[w,S]=(0,react_1.useState)({width:d,height:s}),k=(0,react_1.useCallback)(((e,t,i,o)=>{if(c)return;const a={width:i.offsetWidth,height:i.offsetHeight};D(a)}),[c]),v=(0,react_1.useCallback)(((e,t)=>{"backdropClick"!==t&&"escapeKeyDown"!==t&&o()}),[o]),z=(0,react_1.useCallback)((()=>{if(y)D(w),C(!1);else{S(j);const e=window.innerWidth-180,t=window.innerHeight-120-60;D({width:Math.max(d,e),height:Math.max(s,t)}),C(!0)}}),[y,j,w,d,s]),q={pointerEvents:"none"},B=!x,K=!c&&!y,N=(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})}),B&&(0,jsx_runtime_1.jsx)(ExpandButton,{onClick:z,size:"small",children:y?(0,jsx_runtime_1.jsx)(FullscreenExit_1.default,{}):(0,jsx_runtime_1.jsx)(Fullscreen_1.default,{})}),(0,jsx_runtime_1.jsx)(StyledDialogContent,{className:b,children:(0,jsx_runtime_1.jsx)(ScrollableContainer,{children:r})}),(0,jsx_runtime_1.jsxs)(StyledDialogActions,{className:f,children:[(0,jsx_runtime_1.jsx)(KemuLightButton_js_1.default,{onClick:o,children:m}),(0,jsx_runtime_1.jsx)(KemuPrimaryButton_js_1.default,{disabled:!l||n,onClick:a,children:p})]})]});return(0,jsx_runtime_1.jsx)(ResizableDialog,{onClose:v,open:t,className:h,children:(0,jsx_runtime_1.jsx)(KemuThemeWrapper_js_1.default,{children:c?(0,jsx_runtime_1.jsx)("div",{className:g,style:{width:j.width,height:j.height},children:N}):(0,jsx_runtime_1.jsx)(re_resizable_1.Resizable,{enable:{top:K,right:K,bottom:K,left:K,topRight:K,bottomRight:K,bottomLeft:K,topLeft:K},handleStyles:{bottomLeft:q,bottomRight:{zIndex:2},bottom:q,top:q,topLeft:q,topRight:q},minHeight:s,minWidth:d,maxWidth:u,maxHeight:_,size:j,onResizeStop:k,className:g,children:N})})})};exports.default=SettingsDialog;
+`,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;

package/cjs/components/index.d.ts

@@ -346,6 +346,8 @@ export interface SettingsDialogProps {
 	minWidth?: number;
 	maxWidth?: number;
 	maxHeight?: number;
+	initialHeight?: number;
+	initialWidth?: number;
 	cancelButtonText?: string;
 	saveButtonText?: string;
 	disableResizing?: boolean;
@@ -355,7 +357,7 @@ export interface SettingsDialogProps {
 	dialogContentClassName?: string;
 	dialogActionsClassName?: string;
 }
-export declare const SettingsDialog: ({ title, open, noHeader, onClose, onSave, children, serviceOnline, saveDisabled, minHeight, minWidth, maxWidth, maxHeight, 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, }: SettingsDialogProps) => import("react/jsx-runtime.js").JSX.Element;
 /**
  * Container for SVG icons with customizable fill color.
  *

package/mjs/components/KemuPrimaryButton.js

@@ -39,5 +39,6 @@ import styled from"@emotion/styled";import{ButtonWithoutRipple}from"./CommonElem
   &:disabled {
     opacity: 0.65;
     pointer-events: none;
+    color: #ffffffb0;
   }
 `;export default KemuPrimaryButton;

package/mjs/components/SettingsDialog.d.ts

@@ -63,6 +63,8 @@ export interface SettingsDialogProps {
 	minWidth?: number;
 	maxWidth?: number;
 	maxHeight?: number;
+	initialHeight?: number;
+	initialWidth?: number;
 	cancelButtonText?: string;
 	saveButtonText?: string;
 	disableResizing?: boolean;
@@ -72,7 +74,7 @@ export interface SettingsDialogProps {
 	dialogContentClassName?: string;
 	dialogActionsClassName?: string;
 }
-declare const SettingsDialog: ({ title, open, noHeader, onClose, onSave, children, serviceOnline, saveDisabled, minHeight, minWidth, maxWidth, maxHeight, 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, }: SettingsDialogProps) => import("react/jsx-runtime.js").JSX.Element;
 
 export {
 	SettingsDialog as default,

package/mjs/components/SettingsDialog.js

@@ -53,7 +53,7 @@ import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";i
   position: absolute;
   margin-top: 20px;
   width: 100%;
-  padding: 0 25px 20px;
+  padding: 10px 25px 20px;
   bottom: 0;
   right: 0;
   background-color: white;
@@ -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=400,minWidth:d=500,maxWidth:m,maxHeight:p,cancelButtonText:g="Cancel",saveButtonText:h="Save",disableResizing:c=!1,disableExpansion:x=!1,dialogClassName:u,resizableClassName:b,dialogContentClassName:f,dialogActionsClassName:y})=>{const[C,j]=useState({width:d,height:s}),[w,D]=useState(!1),[S,_]=useState({width:d,height:s}),k=useCallback(((e,t,i,o)=>{if(c)return;const a={width:i.offsetWidth,height:i.offsetHeight};j(a)}),[c]),z=useCallback(((e,t)=>{"backdropClick"!==t&&"escapeKeyDown"!==t&&o()}),[o]),v=useCallback((()=>{if(w)j(S),D(!1);else{_(C);const e=window.innerWidth-180,t=window.innerHeight-120-60;j({width:Math.max(d,e),height:Math.max(s,t)}),D(!0)}}),[w,C,S,d,s]),B={pointerEvents:"none"},K=!x,N=!c&&!w,R=_jsxs(_Fragment,{children:[!i&&_jsx(Header,{children:_jsx(Title,{children:e})}),K&&_jsx(ExpandButton,{onClick:v,size:"small",children:_jsx(w?FullscreenExit:Fullscreen,{})}),_jsx(StyledDialogContent,{className:f,children:_jsx(ScrollableContainer,{children:l})}),_jsxs(StyledDialogActions,{className:y,children:[_jsx(KemuLightButton,{onClick:o,children:g}),_jsx(KemuPrimaryButton,{disabled:!n||r,onClick:a,children:h})]})]});return _jsx(ResizableDialog,{onClose:z,open:t,className:u,children:_jsx(KemuThemeWrapper,{children:c?_jsx("div",{className:b,style:{width:C.width,height:C.height},children:R}):_jsx(Resizable,{enable:{top:N,right:N,bottom:N,left:N,topRight:N,bottomRight:N,bottomLeft:N,topLeft:N},handleStyles:{bottomLeft:B,bottomRight:{zIndex:2},bottom:B,top:B,topLeft:B,topRight:B},minHeight:s,minWidth:d,maxWidth:m,maxHeight:p,size:C,onResizeStop:k,className:b,children:R})})})};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: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;

package/mjs/components/index.d.ts

@@ -346,6 +346,8 @@ export interface SettingsDialogProps {
 	minWidth?: number;
 	maxWidth?: number;
 	maxHeight?: number;
+	initialHeight?: number;
+	initialWidth?: number;
 	cancelButtonText?: string;
 	saveButtonText?: string;
 	disableResizing?: boolean;
@@ -355,7 +357,7 @@ export interface SettingsDialogProps {
 	dialogContentClassName?: string;
 	dialogActionsClassName?: string;
 }
-export declare const SettingsDialog: ({ title, open, noHeader, onClose, onSave, children, serviceOnline, saveDisabled, minHeight, minWidth, maxWidth, maxHeight, 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, }: 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.1",
+  "version": "0.3.3",
   "description": "Kemu Hub Service library for React",
   "author": "Kemu Pty Ltd",
   "main": "cjs/WidgetWrapper.js",
@@ -40,7 +40,7 @@
     "@emotion/styled": "^11.13.0",
     "@mui/icons-material": "^7.3.4",
     "@mui/material": "^7.3.4",
-    "re-resizable": "^6.9.17",
+    "re-resizable": "^6.11.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   }