@rpg-engine/long-bow 0.5.77 → 0.5.78

package/dist/components/Abstractions/SlotsContainer.d.ts

@@ -11,6 +11,8 @@ interface IProps {
     initialPosition?: IPosition;
     scale?: number;
     width?: string;
+    isFullScreen?: boolean;
+    opacity?: number;
 }
 export declare const SlotsContainer: React.FC<IProps>;
 export {};

package/dist/components/DraggableContainer.d.ts

@@ -19,5 +19,7 @@ export interface IDraggableContainerProps {
     initialPosition?: IPosition;
     scale?: number;
     dragDisabled?: boolean;
+    isFullScreen?: boolean;
+    opacity?: number;
 }
 export declare const DraggableContainer: React.FC<IDraggableContainerProps>;

package/dist/components/Item/Inventory/ItemContainer.d.ts

@@ -29,5 +29,7 @@ export interface IItemContainerProps {
     isDepotSystem?: boolean;
     onPositionChangeEnd?: (position: IPosition) => void;
     onPositionChangeStart?: (position: IPosition) => void;
+    isFullScreen?: boolean;
+    opacity?: number;
 }
 export declare const ItemContainer: React.FC<IItemContainerProps>;

package/dist/long-bow.cjs.development.js

@@ -13473,8 +13473,14 @@ var DraggableContainer = function DraggableContainer(_ref) {
     } : _ref$initialPosition,
     scale = _ref.scale,
     _ref$dragDisabled = _ref.dragDisabled,
-    dragDisabled = _ref$dragDisabled === void 0 ? false : _ref$dragDisabled;
+    dragDisabled = _ref$dragDisabled === void 0 ? false : _ref$dragDisabled,
+    isFullScreen = _ref.isFullScreen,
+    opacity = _ref.opacity;
   var draggableRef = React.useRef(null);
+  if (isFullScreen) {
+    width = '100%';
+    height = '100%';
+  }
   useOutsideClick(draggableRef, 'item-container');
   React.useEffect(function () {
     document.addEventListener('clickOutside', function (event) {
@@ -13522,7 +13528,9 @@ var DraggableContainer = function DraggableContainer(_ref) {
     ref: draggableRef,
     width: width,
     height: height || 'auto',
-    className: "rpgui-container " + type + " " + className
+    className: "rpgui-container " + type + " " + className,
+    isFullScreen: isFullScreen,
+    opacity: opacity
   }, title && React__default.createElement(TitleContainer, {
     className: "drag-handler"
   }, React__default.createElement(Title, null, imgSrc && React__default.createElement(Icon, {
@@ -13536,11 +13544,17 @@ var DraggableContainer = function DraggableContainer(_ref) {
 var Container$7 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "DraggableContainer__Container",
   componentId: "sc-184mpyl-0"
-})(["height:", ";width:", ";display:flex;flex-wrap:wrap;image-rendering:pixelated;&.rpgui-container{padding-top:1.5rem;}"], function (props) {
+})(["height:", ";width:", ";display:flex;flex-wrap:wrap;image-rendering:pixelated;", " ", " &.rpgui-container{padding-top:1.5rem;}"], function (props) {
   return props.height;
 }, function (_ref2) {
   var width = _ref2.width;
   return width;
+}, function (_ref3) {
+  var opacity = _ref3.opacity;
+  return opacity && styled.css(["opacity:", ";"], opacity);
+}, function (_ref4) {
+  var isFullScreen = _ref4.isFullScreen;
+  return isFullScreen && styled.css(["justify-content:center;align-items:flex-start;align-content:flex-start;"]);
 });
 var CloseButton$2 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "DraggableContainer__CloseButton",
@@ -13549,7 +13563,7 @@ var CloseButton$2 = /*#__PURE__*/styled__default.div.withConfig({
 var TitleContainer = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "DraggableContainer__TitleContainer",
   componentId: "sc-184mpyl-2"
-})(["width:100%;height:100%;display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:center;"]);
+})(["width:100%;height:100%;display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:center;max-height:42px;"]);
 var Title = /*#__PURE__*/styled__default.h1.withConfig({
   displayName: "DraggableContainer__Title",
   componentId: "sc-184mpyl-3"
@@ -16120,8 +16134,12 @@ var SlotsContainer = function SlotsContainer(_ref) {
     onOutsideClick = _ref.onOutsideClick,
     initialPosition = _ref.initialPosition,
     scale = _ref.scale,
-    width = _ref.width;
+    width = _ref.width,
+    isFullScreen = _ref.isFullScreen,
+    opacity = _ref.opacity;
   return React__default.createElement(DraggableContainer, {
+    isFullScreen: isFullScreen,
+    opacity: opacity,
     title: title,
     type: exports.RPGUIContainerTypes.Framed,
     onCloseButton: function onCloseButton() {
@@ -16215,6 +16233,8 @@ var useScrollOnDrag = function useScrollOnDrag(_ref) {
   };
 };
 
+var UI_BREAKPOINT_MOBILE = '950px';
+
 var ShortcutsSetter = function ShortcutsSetter(_ref) {
   var setSettingShortcutIndex = _ref.setSettingShortcutIndex,
     settingShortcutIndex = _ref.settingShortcutIndex,
@@ -16285,7 +16305,7 @@ var ShortcutsSetter = function ShortcutsSetter(_ref) {
 var Container$k = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "ShortcutsSetter__Container",
   componentId: "sc-xuouuf-0"
-})(["p{margin:0;margin-left:0.5rem;font-size:10px;}width:100%;"]);
+})(["p{margin:0;margin-left:0.5rem;font-size:10px;}width:100%;@media screen and (max-width:", "){max-height:80px;}"], UI_BREAKPOINT_MOBILE);
 var Shortcut = /*#__PURE__*/styled__default.button.withConfig({
   displayName: "ShortcutsSetter__Shortcut",
   componentId: "sc-xuouuf-1"
@@ -16506,7 +16526,9 @@ var ItemContainer$1 = function ItemContainer(_ref) {
     equipmentSet = _ref.equipmentSet,
     isDepotSystem = _ref.isDepotSystem,
     onPositionChangeEnd = _ref.onPositionChangeEnd,
-    onPositionChangeStart = _ref.onPositionChangeStart;
+    onPositionChangeStart = _ref.onPositionChangeStart,
+    isFullScreen = _ref.isFullScreen,
+    opacity = _ref.opacity;
   var _useState = React.useState({
       isOpen: false,
       maxQuantity: 1,
@@ -16626,7 +16648,9 @@ var ItemContainer$1 = function ItemContainer(_ref) {
     initialPosition: initialPosition,
     scale: scale,
     onPositionChangeEnd: onPositionChangeEnd,
-    onPositionChangeStart: onPositionChangeStart
+    onPositionChangeStart: onPositionChangeStart,
+    isFullScreen: isFullScreen,
+    opacity: opacity
   }, type === shared.ItemContainerType.Inventory && shortcuts && removeShortcut && React__default.createElement(ShortcutsSetter, {
     setSettingShortcutIndex: setSettingShortcutIndex,
     settingShortcutIndex: settingShortcutIndex,
@@ -16637,7 +16661,8 @@ var ItemContainer$1 = function ItemContainer(_ref) {
   }), React__default.createElement(ItemsContainer, {
     className: "item-container-body",
     ref: containerRef,
-    isScrollable: itemContainer.slotQty > MIN_SLOTS_FOR_SCROLL
+    isScrollable: itemContainer.slotQty > MIN_SLOTS_FOR_SCROLL,
+    isFullScreen: isFullScreen
   }, onRenderSlots())), quantitySelect.isOpen && React__default.createElement(ItemQuantitySelectorModal, {
     quantitySelect: quantitySelect,
     setQuantitySelect: setQuantitySelect
@@ -16646,9 +16671,21 @@ var ItemContainer$1 = function ItemContainer(_ref) {
 var ItemsContainer = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "ItemContainer__ItemsContainer",
   componentId: "sc-15y5p9l-0"
-})(["display:flex;justify-content:center;flex-wrap:wrap;max-height:270px;overflow-y:", ";overflow-x:hidden;width:415px;"], function (_ref2) {
-  var isScrollable = _ref2.isScrollable;
+})(["display:flex;justify-content:", ";flex-wrap:wrap;max-height:", ";overflow-y:", ";overflow-x:hidden;width:", ";margin-top:", ";"], function (_ref2) {
+  var isFullScreen = _ref2.isFullScreen;
+  return isFullScreen ? 'flex-start' : 'center';
+}, function (_ref3) {
+  var isFullScreen = _ref3.isFullScreen;
+  return isFullScreen ? '100vh' : '270px';
+}, function (_ref4) {
+  var isScrollable = _ref4.isScrollable;
   return isScrollable ? 'scroll' : 'hidden';
+}, function (_ref5) {
+  var isFullScreen = _ref5.isFullScreen;
+  return isFullScreen ? '100vw' : '415px';
+}, function (_ref6) {
+  var isFullScreen = _ref6.isFullScreen;
+  return isFullScreen ? '1rem' : '0';
 });
 
 var LeaderboardTable = function LeaderboardTable(props) {