@rpg-engine/long-bow 0.5.76 → 0.5.78

package/dist/long-bow.esm.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, Component, useRef, useContext, createContext, useMemo, useCallback, Fragment } from 'react';
 import { BeatLoader } from 'react-spinners';
-import styled, { keyframes } from 'styled-components';
+import styled, { css, keyframes } from 'styled-components';
 import { v4 } from 'uuid';
 import { GRID_WIDTH, GRID_HEIGHT, ShortcutType, getItemTextureKeyPath, ItemRarities, ItemContainerType, ItemType, DepotSocketEvents, ItemSocketEvents, ItemSocketEventsDisplayLabels, ActionsForInventory, ActionsForEquipmentSet, ActionsForLoot, ActionsForMapContainer, ItemSubType, ItemSlotType, isMobileOrTablet, CharacterClass, getSPForLevel, getXPForLevel, PeriodOfDay, UserAccountTypes } from '@rpg-engine/shared';
 import dayjs from 'dayjs';
@@ -42,7 +42,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 = v4();
   var _useState = useState(defaultValue || (options == null ? void 0 : (_options$ = options[0]) == null ? void 0 : _options$.value)),
     selectedValue = _useState[0],
@@ -93,7 +95,8 @@ var AsyncDropdown = function AsyncDropdown(_ref) {
     color: uiColors.white
   }))), React.createElement(DropdownOptions, {
     className: "rpgui-dropdown-imp",
-    opened: opened
+    opened: opened,
+    opensUp: opensUp
   }, options == null ? void 0 : options.map(function (option) {
     return React.createElement("li", {
       key: option.id,
@@ -125,8 +128,12 @@ var DropdownSelect = /*#__PURE__*/styled.p.withConfig({
 var DropdownOptions = /*#__PURE__*/styled.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() {
@@ -13460,8 +13467,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 = useRef(null);
+  if (isFullScreen) {
+    width = '100%';
+    height = '100%';
+  }
   useOutsideClick(draggableRef, 'item-container');
   useEffect(function () {
     document.addEventListener('clickOutside', function (event) {
@@ -13509,7 +13522,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.createElement(TitleContainer, {
     className: "drag-handler"
   }, React.createElement(Title, null, imgSrc && React.createElement(Icon, {
@@ -13523,11 +13538,17 @@ var DraggableContainer = function DraggableContainer(_ref) {
 var Container$7 = /*#__PURE__*/styled.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 && css(["opacity:", ";"], opacity);
+}, function (_ref4) {
+  var isFullScreen = _ref4.isFullScreen;
+  return isFullScreen && css(["justify-content:center;align-items:flex-start;align-content:flex-start;"]);
 });
 var CloseButton$2 = /*#__PURE__*/styled.div.withConfig({
   displayName: "DraggableContainer__CloseButton",
@@ -13536,7 +13557,7 @@ var CloseButton$2 = /*#__PURE__*/styled.div.withConfig({
 var TitleContainer = /*#__PURE__*/styled.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.h1.withConfig({
   displayName: "DraggableContainer__Title",
   componentId: "sc-184mpyl-3"
@@ -16109,8 +16130,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.createElement(DraggableContainer, {
+    isFullScreen: isFullScreen,
+    opacity: opacity,
     title: title,
     type: RPGUIContainerTypes.Framed,
     onCloseButton: function onCloseButton() {
@@ -16204,6 +16229,8 @@ var useScrollOnDrag = function useScrollOnDrag(_ref) {
   };
 };
 
+var UI_BREAKPOINT_MOBILE = '950px';
+
 var ShortcutsSetter = function ShortcutsSetter(_ref) {
   var setSettingShortcutIndex = _ref.setSettingShortcutIndex,
     settingShortcutIndex = _ref.settingShortcutIndex,
@@ -16274,7 +16301,7 @@ var ShortcutsSetter = function ShortcutsSetter(_ref) {
 var Container$k = /*#__PURE__*/styled.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.button.withConfig({
   displayName: "ShortcutsSetter__Shortcut",
   componentId: "sc-xuouuf-1"
@@ -16496,7 +16523,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 = useState({
       isOpen: false,
       maxQuantity: 1,
@@ -16616,7 +16645,9 @@ var ItemContainer$1 = function ItemContainer(_ref) {
     initialPosition: initialPosition,
     scale: scale,
     onPositionChangeEnd: onPositionChangeEnd,
-    onPositionChangeStart: onPositionChangeStart
+    onPositionChangeStart: onPositionChangeStart,
+    isFullScreen: isFullScreen,
+    opacity: opacity
   }, type === ItemContainerType.Inventory && shortcuts && removeShortcut && React.createElement(ShortcutsSetter, {
     setSettingShortcutIndex: setSettingShortcutIndex,
     settingShortcutIndex: settingShortcutIndex,
@@ -16627,7 +16658,8 @@ var ItemContainer$1 = function ItemContainer(_ref) {
   }), React.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.createElement(ItemQuantitySelectorModal, {
     quantitySelect: quantitySelect,
     setQuantitySelect: setQuantitySelect
@@ -16636,9 +16668,21 @@ var ItemContainer$1 = function ItemContainer(_ref) {
 var ItemsContainer = /*#__PURE__*/styled.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) {