@rpg-engine/long-bow 0.6.77 → 0.6.78

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.6.77",
+  "version": "0.6.78",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/DraggableContainer.tsx

@@ -10,6 +10,8 @@ export interface IDraggableContainerProps {
   children: React.ReactNode;
   width?: string;
   height?: string;
+  minWidth?: string;
+  minHeight?: string;
   className?: string;
   type?: RPGUIContainerTypes;
   title?: string;
@@ -32,6 +34,8 @@ export const DraggableContainer: React.FC<IDraggableContainerProps> = ({
   children,
   width = '50%',
   height,
+  minHeight,
+  minWidth,
   className,
   type = RPGUIContainerTypes.FramedGold,
   onCloseButton,
@@ -109,6 +113,8 @@ export const DraggableContainer: React.FC<IDraggableContainerProps> = ({
         ref={draggableRef}
         width={width}
         height={height || 'auto'}
+        minWidth={minWidth}
+        minHeight={minHeight}
         className={`rpgui-container ${type} ${className}`}
         isFullScreen={isFullScreen}
         opacity={opacity}
@@ -139,6 +145,8 @@ export const DraggableContainer: React.FC<IDraggableContainerProps> = ({
 interface IContainerProps {
   width: string;
   height: string;
+  minWidth?: string;
+  minHeight?: string;
   isFullScreen?: boolean;
   opacity?: number;
 }
@@ -146,6 +154,8 @@ interface IContainerProps {
 const Container = styled.div<IContainerProps>`
   height: ${props => props.height};
   width: ${({ width }) => width};
+  min-width: ${({ minWidth }) => minWidth || 'auto'};
+  min-height: ${({ minHeight }) => minHeight || 'auto'};
   display: flex;
   flex-wrap: wrap;
   image-rendering: pixelated;
@@ -204,10 +214,10 @@ interface ICustomIconProps {
   width: string;
 }
 
-const Icon = styled.img`
+const Icon = styled.img<ICustomIconProps>`
   color: white;
   z-index: 22;
   font-size: ${uiFonts.size.xsmall};
-  width: ${(props: ICustomIconProps) => props.width};
+  width: ${({ width }) => width};
   margin-right: 0.5rem;
 `;

package/src/components/Multitab/TabsContainer.tsx

@@ -21,6 +21,8 @@ export interface ITabsContainer {
   type: MultitabType;
   styles?: {
     width?: string;
+    minWidth?: string;
+    minHeight?: string;
     height?: string;
     className?: string;
     title?: string;
@@ -67,6 +69,8 @@ export const TabsContainer: React.FC<ITabsContainer> = ({
       cancelDrag=".tabs-container *" // Disable drag on all elements inside .tabs-container
       width={styles?.width} // use optional chaining
       height={styles?.height}
+      minWidth={styles?.minWidth}
+      minHeight={styles?.minHeight}
       className={styles?.className}
       title={styles?.title}
       imgSrc={styles?.imgSrc}