@rpg-engine/long-bow 0.5.76 → 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/AsyncDropdown.d.ts

@@ -9,5 +9,6 @@ export interface IAsyncDropdownProps {
     width?: string;
     onChange: (value: string) => void;
     defaultValue?: string;
+    opensUp?: boolean;
 }
 export declare const AsyncDropdown: React.FC<IAsyncDropdownProps>;

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

@@ -50,7 +50,9 @@ var AsyncDropdown = function AsyncDropdown(_ref) {
   var options = _ref.options,
     width = _ref.width,
     onChange = _ref.onChange,
-    defaultValue = _ref.defaultValue;
+    defaultValue = _ref.defaultValue,
+    _ref$opensUp = _ref.opensUp,
+    opensUp = _ref$opensUp === void 0 ? false : _ref$opensUp;
   var dropdownId = uuid.v4();
   var _useState = React.useState(defaultValue || (options == null ? void 0 : (_options$ = options[0]) == null ? void 0 : _options$.value)),
     selectedValue = _useState[0],
@@ -101,7 +103,8 @@ var AsyncDropdown = function AsyncDropdown(_ref) {
     color: uiColors.white
   }))), React__default.createElement(DropdownOptions, {
     className: "rpgui-dropdown-imp",
-    opened: opened
+    opened: opened,
+    opensUp: opensUp
   }, options == null ? void 0 : options.map(function (option) {
     return React__default.createElement("li", {
       key: option.id,
@@ -133,8 +136,12 @@ var DropdownSelect = /*#__PURE__*/styled__default.p.withConfig({
 var DropdownOptions = /*#__PURE__*/styled__default.ul.withConfig({
   displayName: "AsyncDropdown__DropdownOptions",
   componentId: "sc-lk409c-4"
-})(["position:absolute;width:100%;max-height:300px;overflow-y:auto;display:", ";box-sizing:border-box;@media (max-width:768px){padding:8px 0;}"], function (props) {
+})(["position:absolute;width:100%;max-height:300px;overflow-y:auto;display:", ";box-sizing:border-box;bottom:", ";top:", ";margin:0;padding:0;@media (max-width:768px){padding:8px 0;}"], function (props) {
   return props.opened ? 'block' : 'none';
+}, function (props) {
+  return props.opensUp ? '100%' : 'auto';
+}, function (props) {
+  return props.opensUp ? 'auto' : '100%';
 });
 
 function _extends() {
@@ -13466,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) {
@@ -13515,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, {
@@ -13529,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",
@@ -13542,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"
@@ -16113,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() {
@@ -16208,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,
@@ -16278,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"
@@ -16499,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,
@@ -16619,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,
@@ -16630,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
@@ -16639,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) {