@rpg-engine/long-bow 0.5.41 → 0.5.43

package/dist/components/ChatRevamp/ChatRevamp.d.ts

@@ -1,10 +1,6 @@
 /// <reference types="react" />
 import { ICharacter, IChatMessage, IPrivateChatMessage } from '@rpg-engine/shared';
 import { IStyles } from '../Chat/Chat';
-export interface ITabStyles {
-    width?: string;
-    height?: string;
-}
 export declare type PrivateChatCharacter = Pick<ICharacter, '_id' | 'name'>;
 export interface IChatRevampProps {
     chatMessages: IChatMessage[] | IPrivateChatMessage[];
@@ -12,7 +8,6 @@ export interface IChatRevampProps {
     onCloseButton: () => void;
     onFocus?: () => void;
     onBlur?: () => void;
-    opacity?: number;
     styles?: IStyles;
     tabs: {
         label: string;
@@ -24,5 +19,10 @@ export interface IChatRevampProps {
     onChangeCharacterName: (characterName: string) => void;
     onCharacterClick?: (character: PrivateChatCharacter) => void;
     onSendPrivateChatMessage: (message: string) => void;
+    recentChatCharacters?: PrivateChatCharacter[];
+    recentSelectedChatCharacterId?: string;
+    onPreviousChatCharacterClick?: (character: PrivateChatCharacter) => void;
+    onRemoveRecentChatCharacter?: (character: PrivateChatCharacter) => void;
+    unseenMessageCharacterIds?: string[];
 }
-export declare const ChatRevamp: ({ chatMessages, onSendGlobalChatMessage, onChangeCharacterName, onFocus, onBlur, onCloseButton, styles, tabs, onChangeTab, activeTab, privateChatCharacters, onCharacterClick, onSendPrivateChatMessage, }: IChatRevampProps) => JSX.Element;
+export declare const ChatRevamp: ({ chatMessages, onSendGlobalChatMessage, onChangeCharacterName, onFocus, onBlur, onCloseButton, styles, tabs, onChangeTab, activeTab, privateChatCharacters, onCharacterClick, onSendPrivateChatMessage, recentChatCharacters, recentSelectedChatCharacterId, onPreviousChatCharacterClick, onRemoveRecentChatCharacter, unseenMessageCharacterIds, }: IChatRevampProps) => JSX.Element;

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

@@ -12608,11 +12608,8 @@ var Chat = function Chat(_ref) {
 var ChatContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "Chat__ChatContainer",
   componentId: "sc-1bk05n6-0"
-})(["height:", ";width:", ";padding:10px;background-color:rgba(0,0,0,0.2);height:auto;"], function (props) {
+})(["height:", " !important;width:100%;padding:10px;background-color:rgba(0,0,0,0.2);height:auto;"], function (props) {
   return props.height;
-}, function (_ref2) {
-  var width = _ref2.width;
-  return width;
 });
 var TextField = /*#__PURE__*/styled.input.withConfig({
   displayName: "Chat__TextField",
@@ -12621,12 +12618,12 @@ var TextField = /*#__PURE__*/styled.input.withConfig({
 var MessagesContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "Chat__MessagesContainer",
   componentId: "sc-1bk05n6-2"
-})(["height:70%;margin-bottom:10px;.chat-body{max-height:auto;overflow-y:auto;}"]);
+})(["height:70%;margin-bottom:10px;overflow-y:auto;"]);
 var Message = /*#__PURE__*/styled.div.withConfig({
   displayName: "Chat__Message",
   componentId: "sc-1bk05n6-3"
-})(["margin-bottom:8px;color:", ";"], function (_ref3) {
-  var color = _ref3.color;
+})(["margin-bottom:8px;color:", ";"], function (_ref2) {
+  var color = _ref2.color;
   return color;
 });
 var Form = /*#__PURE__*/styled.form.withConfig({
@@ -12636,11 +12633,11 @@ var Form = /*#__PURE__*/styled.form.withConfig({
 var Button$1 = /*#__PURE__*/styled.button.withConfig({
   displayName: "Chat__Button",
   componentId: "sc-1bk05n6-5"
-})(["color:", ";background-color:", ";width:28px;height:28px;border:none !important;"], function (_ref4) {
-  var buttonColor = _ref4.buttonColor;
+})(["color:", ";background-color:", ";width:28px;height:28px;border:none !important;"], function (_ref3) {
+  var buttonColor = _ref3.buttonColor;
   return buttonColor;
-}, function (_ref5) {
-  var buttonBackgroundColor = _ref5.buttonBackgroundColor;
+}, function (_ref4) {
+  var buttonBackgroundColor = _ref4.buttonBackgroundColor;
   return buttonBackgroundColor;
 });
 
@@ -12695,31 +12692,30 @@ var SearchCharacter = function SearchCharacter(_ref) {
     onCharacterClick(character);
     setShowSearchCharacter(false);
   };
-  return React__default.createElement(SearchCharacterContainer, {
-    width: (styles == null ? void 0 : styles.width) || '80%',
-    height: (styles == null ? void 0 : styles.height) || 'auto'
-  }, React__default.createElement(Form$1, {
+  return React__default.createElement(SearchContainer, null, React__default.createElement(Form$1, {
     onSubmit: handleSubmit
   }, React__default.createElement(Column, {
     flex: 70
   }, React__default.createElement(TextField$1, {
     value: characterName,
-    id: "inputCharacterName",
+    id: "characterName",
+    name: 'characterName',
     onChange: function onChange(e) {
       setCharacterName(e.target.value);
       onChangeCharacterName(e.target.value);
     },
+    placeholder: 'Search for a character...',
     height: 20,
     type: "text",
     autoComplete: "off",
     onFocus: onFocus,
     onBlur: onBlur,
     onPointerDown: onFocus,
-    autoFocus: true,
-    placeholder: "Type a character name..."
+    autoFocus: true
   })), React__default.createElement(Column, {
     justifyContent: "flex-end"
   }, React__default.createElement(SearchButton, {
+    type: 'submit',
     buttonColor: (styles == null ? void 0 : styles.buttonColor) || '#005b96',
     buttonBackgroundColor: (styles == null ? void 0 : styles.buttonBackgroundColor) || 'rgba(0,0,0,.5)',
     id: "chat-send-button",
@@ -12737,15 +12733,10 @@ var SearchCharacter = function SearchCharacter(_ref) {
     }, character.name);
   })));
 };
-var SearchCharacterContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "SearchCharacter__SearchCharacterContainer",
+var SearchContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "SearchCharacter__SearchContainer",
   componentId: "sc-172lyfr-0"
-})(["height:", ";width:", ";padding:10px;background-color:rgba(0,0,0,0.2);height:auto;"], function (props) {
-  return props.height;
-}, function (_ref2) {
-  var width = _ref2.width;
-  return width;
-});
+})(["width:100%;"]);
 var Form$1 = /*#__PURE__*/styled.form.withConfig({
   displayName: "SearchCharacter__Form",
   componentId: "sc-172lyfr-1"
@@ -12757,11 +12748,11 @@ var TextField$1 = /*#__PURE__*/styled.input.withConfig({
 var SearchButton = /*#__PURE__*/styled.button.withConfig({
   displayName: "SearchCharacter__SearchButton",
   componentId: "sc-172lyfr-3"
-})(["color:", ";background-color:", ";width:28px;height:28px;border:none !important;"], function (_ref3) {
-  var buttonColor = _ref3.buttonColor;
+})(["color:", ";background-color:", ";width:28px;height:28px;border:none !important;"], function (_ref2) {
+  var buttonColor = _ref2.buttonColor;
   return buttonColor;
-}, function (_ref4) {
-  var buttonBackgroundColor = _ref4.buttonBackgroundColor;
+}, function (_ref3) {
+  var buttonBackgroundColor = _ref3.buttonBackgroundColor;
   return buttonBackgroundColor;
 });
 var ListContainer = /*#__PURE__*/styled.ul.withConfig({
@@ -12771,7 +12762,7 @@ var ListContainer = /*#__PURE__*/styled.ul.withConfig({
 var ListElement = /*#__PURE__*/styled.li.withConfig({
   displayName: "SearchCharacter__ListElement",
   componentId: "sc-172lyfr-5"
-})(["margin:0.5rem 0 !important;font-size:", ";&:hover{color:#ff0;background-color:", ";}button{all:unset;}"], uiFonts.size.small, uiColors.darkGray);
+})(["margin:0.5rem 0 !important;font-size:", ";padding:0.5rem 2px;&:hover{color:#ff0;background-color:", ";}button{all:unset;}"], uiFonts.size.small, uiColors.darkGray);
 
 var ChatRevamp = function ChatRevamp(_ref) {
   var chatMessages = _ref.chatMessages,
@@ -12786,14 +12777,29 @@ var ChatRevamp = function ChatRevamp(_ref) {
     activeTab = _ref.activeTab,
     privateChatCharacters = _ref.privateChatCharacters,
     onCharacterClick = _ref.onCharacterClick,
-    onSendPrivateChatMessage = _ref.onSendPrivateChatMessage;
+    onSendPrivateChatMessage = _ref.onSendPrivateChatMessage,
+    recentChatCharacters = _ref.recentChatCharacters,
+    _ref$recentSelectedCh = _ref.recentSelectedChatCharacterId,
+    recentSelectedChatCharacterId = _ref$recentSelectedCh === void 0 ? '' : _ref$recentSelectedCh,
+    onPreviousChatCharacterClick = _ref.onPreviousChatCharacterClick,
+    onRemoveRecentChatCharacter = _ref.onRemoveRecentChatCharacter,
+    _ref$unseenMessageCha = _ref.unseenMessageCharacterIds,
+    unseenMessageCharacterIds = _ref$unseenMessageCha === void 0 ? [] : _ref$unseenMessageCha;
   var _useState = React.useState(true),
-    showSearchCharacter = _useState[0],
-    setShowSearchCharacter = _useState[1];
+    showSearchCharacterUI = _useState[0],
+    setShowSearchCharacterUI = _useState[1];
+  var _useState2 = React.useState(false),
+    showRecentChats = _useState2[0],
+    setShowRecentChats = _useState2[1];
   React.useEffect(function () {
-    setShowSearchCharacter(true);
+    setShowSearchCharacterUI(true);
   }, [activeTab]);
   var isPrivate = activeTab === 'private';
+  var handlePreviousChatCharacterClick = function handlePreviousChatCharacterClick(character) {
+    if (!onPreviousChatCharacterClick) return;
+    onPreviousChatCharacterClick(character);
+    setShowSearchCharacterUI(false);
+  };
   return React__default.createElement(React__default.Fragment, null, React__default.createElement(TabContainer, null, tabs.map(function (tab, index) {
     return React__default.createElement(Tab, {
       key: tab.label + "_" + index,
@@ -12802,13 +12808,54 @@ var ChatRevamp = function ChatRevamp(_ref) {
         return onChangeTab(tab.id);
       }
     }, tab.label);
-  })), isPrivate && showSearchCharacter ? React__default.createElement(SearchCharacter, {
+  })), React__default.createElement(PrivateChatContainer, {
+    width: (styles == null ? void 0 : styles.width) || '80%',
+    height: (styles == null ? void 0 : styles.height) || 'auto'
+  }, React__default.createElement(RecentChatTabContainer, {
+    isPrivate: isPrivate,
+    isOpen: showRecentChats
+  }, React__default.createElement(RecentChatTopBar, {
+    isOpen: showRecentChats
+  }, React__default.createElement(BurgerIconContainer, {
+    onPointerDown: function onPointerDown() {
+      return setShowRecentChats(function (t) {
+        return !t;
+      });
+    },
+    hasUnseenMessages: (unseenMessageCharacterIds == null ? void 0 : unseenMessageCharacterIds.length) > 0 ? true : false
+  }, React__default.createElement(BurgerLineIcon, null), React__default.createElement(BurgerLineIcon, null), React__default.createElement(BurgerLineIcon, null)), showRecentChats && React__default.createElement(SearchButton$1, {
+    onPointerDown: function onPointerDown() {
+      return setShowSearchCharacterUI(true);
+    }
+  }, React__default.createElement(rx.RxMagnifyingGlass, {
+    size: 16,
+    color: uiColors.white
+  }))), React__default.createElement(RecentChatLogContainer, {
+    isOpen: showRecentChats
+  }, recentChatCharacters == null ? void 0 : recentChatCharacters.map(function (character) {
+    return React__default.createElement(ListElementContainer, {
+      key: character._id
+    }, React__default.createElement(ListElement$1, {
+      active: character._id === recentSelectedChatCharacterId,
+      onPointerDown: function onPointerDown() {
+        return handlePreviousChatCharacterClick(character);
+      }
+    }, React__default.createElement(StatusDot, {
+      isUnseen: (unseenMessageCharacterIds == null ? void 0 : unseenMessageCharacterIds.includes(character._id)) || false
+    }), character.name), React__default.createElement(CloseButton, {
+      onPointerDown: function onPointerDown() {
+        return onRemoveRecentChatCharacter == null ? void 0 : onRemoveRecentChatCharacter(character);
+      }
+    }, React__default.createElement(rx.RxCross2, {
+      size: 16
+    })));
+  }))), isPrivate && showSearchCharacterUI ? React__default.createElement(SearchCharacter, {
     onFocus: onFocus,
     onBlur: onBlur,
     onChangeCharacterName: onChangeCharacterName,
     styles: styles,
     recentCharacters: privateChatCharacters,
-    setShowSearchCharacter: setShowSearchCharacter,
+    setShowSearchCharacter: setShowSearchCharacterUI,
     onCharacterClick: onCharacterClick
   }) : React__default.createElement(Chat, {
     chatMessages: chatMessages,
@@ -12818,7 +12865,7 @@ var ChatRevamp = function ChatRevamp(_ref) {
     styles: styles,
     onFocus: onFocus,
     onBlur: onBlur
-  }));
+  })));
 };
 var TabContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "ChatRevamp__TabContainer",
@@ -12834,6 +12881,70 @@ var Tab = /*#__PURE__*/styled.button.withConfig({
 }, function (props) {
   return props.active ? 'white' : uiColors.raisinBlack;
 });
+var PrivateChatContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ChatRevamp__PrivateChatContainer",
+  componentId: "sc-1sdiknw-2"
+})(["width:", ";min-height:", " !important;padding:10px;background-color:rgba(0,0,0,0.2);height:auto;display:flex;gap:10px;"], function (_ref2) {
+  var width = _ref2.width;
+  return width;
+}, function (_ref3) {
+  var height = _ref3.height;
+  return height;
+});
+var RecentChatTabContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ChatRevamp__RecentChatTabContainer",
+  componentId: "sc-1sdiknw-3"
+})(["display:", ";flex-direction:column;border-right:1px solid ", ";outline:none;width:", " !important;transition:width 0.3s ease-in-out;overflow:hidden;@media (max-width:768px){width:", " !important;}"], function (props) {
+  return props.isPrivate ? 'flex' : 'none';
+}, uiColors.gray, function (props) {
+  return props.isOpen ? '20%' : '30px';
+}, function (props) {
+  return props.isOpen ? '40%' : '30px';
+});
+var RecentChatTopBar = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ChatRevamp__RecentChatTopBar",
+  componentId: "sc-1sdiknw-4"
+})(["display:flex;align-items:center;justify-content:space-between;height:30px;"]);
+var SearchButton$1 = /*#__PURE__*/styled.button.withConfig({
+  displayName: "ChatRevamp__SearchButton",
+  componentId: "sc-1sdiknw-5"
+})(["border:none;background-color:transparent;display:flex;flex-direction:column;align-items:flex-end;gap:2px;padding:4px;position:relative;"]);
+var BurgerIconContainer = /*#__PURE__*/styled.button.withConfig({
+  displayName: "ChatRevamp__BurgerIconContainer",
+  componentId: "sc-1sdiknw-6"
+})(["border:none;background-color:transparent;display:flex;flex-direction:column;align-items:flex-end;padding:4px;gap:2px;position:relative;&:after{content:'';width:6px;height:6px;position:absolute;top:0;right:2px;border-radius:50%;background-color:", ";display:", ";}"], uiColors.lightGreen, function (props) {
+  return props.hasUnseenMessages ? 'block' : 'none';
+});
+var BurgerLineIcon = /*#__PURE__*/styled.span.withConfig({
+  displayName: "ChatRevamp__BurgerLineIcon",
+  componentId: "sc-1sdiknw-7"
+})(["width:1rem;height:2px;background-color:#ffffff;"]);
+var RecentChatLogContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ChatRevamp__RecentChatLogContainer",
+  componentId: "sc-1sdiknw-8"
+})(["border:none;list-style:none;display:flex;opacity:", ";flex-direction:column;gap:0.5rem;transition:opacity 0.3s ease-in-out;padding:0;margin:0;flex:1;"], function (props) {
+  return props.isOpen ? 1 : 0;
+});
+var ListElementContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ChatRevamp__ListElementContainer",
+  componentId: "sc-1sdiknw-9"
+})(["display:flex;justify-content:space-between;align-items:center;"]);
+var ListElement$1 = /*#__PURE__*/styled.button.withConfig({
+  displayName: "ChatRevamp__ListElement",
+  componentId: "sc-1sdiknw-10"
+})(["margin:0.5rem 0 !important;font-size:", " !important;padding:2px;all:unset;color:", ";width:100%;position:relative;display:flex;align-items:center;gap:4px;&:hover{color:#ff0;}"], uiFonts.size.small, function (props) {
+  return props.active ? uiColors.yellow : uiColors.white;
+});
+var StatusDot = /*#__PURE__*/styled.span.withConfig({
+  displayName: "ChatRevamp__StatusDot",
+  componentId: "sc-1sdiknw-11"
+})(["width:6px;height:6px;border-radius:50%;background-color:", ";display:inline-block;margin-right:6px;"], function (props) {
+  return props.isUnseen ? uiColors.lightGreen : uiColors.gray;
+});
+var CloseButton = /*#__PURE__*/styled.button.withConfig({
+  displayName: "ChatRevamp__CloseButton",
+  componentId: "sc-1sdiknw-12"
+})(["all:unset;font-size:", ";margin:0 0.5rem;transition:all 0.2s ease-in-out;background-color:", ";color:", ";&:hover{background-color:", ";color:", ";}"], uiFonts.size.xxsmall, uiColors.red, uiColors.white, uiColors.white, uiColors.red);
 
 var _excluded$2 = ["innerRef"];
 var Input = function Input(_ref) {
@@ -12930,7 +13041,7 @@ var ChatDeprecated = function ChatDeprecated(_ref) {
     opacity: opacity
   }, React__default.createElement(reactErrorBoundary.ErrorBoundary, {
     fallback: React__default.createElement("p", null, "Oops! Your chat has crashed.")
-  }, onCloseButton && React__default.createElement(CloseButton, {
+  }, onCloseButton && React__default.createElement(CloseButton$1, {
     onPointerDown: onCloseButton
   }, "X"), React__default.createElement(RPGUIContainer, {
     type: exports.RPGUIContainerTypes.FramedGrey,
@@ -12964,7 +13075,7 @@ var Container$5 = /*#__PURE__*/styled.div.withConfig({
   displayName: "ChatDeprecated__Container",
   componentId: "sc-fuuod3-0"
 })(["position:relative;"]);
-var CloseButton = /*#__PURE__*/styled.div.withConfig({
+var CloseButton$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "ChatDeprecated__CloseButton",
   componentId: "sc-fuuod3-1"
 })(["position:absolute;top:2px;right:0px;color:white;z-index:22;font-size:0.7rem;"]);
@@ -13306,7 +13417,7 @@ var DraggableContainer = function DraggableContainer(_ref) {
   }, React__default.createElement(Title, null, imgSrc && React__default.createElement(Icon, {
     src: imgSrc,
     width: imgWidth
-  }), title)), onCloseButton && React__default.createElement(CloseButton$1, {
+  }), title)), onCloseButton && React__default.createElement(CloseButton$2, {
     className: "container-close",
     onPointerDown: onCloseButton
   }, "X"), children));
@@ -13320,7 +13431,7 @@ var Container$6 = /*#__PURE__*/styled.div.withConfig({
   var width = _ref2.width;
   return width;
 });
-var CloseButton$1 = /*#__PURE__*/styled.div.withConfig({
+var CloseButton$2 = /*#__PURE__*/styled.div.withConfig({
   displayName: "DraggableContainer__CloseButton",
   componentId: "sc-184mpyl-1"
 })(["position:absolute;top:3px;right:0px;color:white;z-index:22;font-size:1.5rem;@media (max-width:950px){font-size:1.7rem;padding:12px;}"]);
@@ -13530,7 +13641,7 @@ var RelativeListMenu = function RelativeListMenu(_ref) {
       overflow: 'hidden'
     }
   }, options.map(function (params, index) {
-    return React__default.createElement(ListElement$1, {
+    return React__default.createElement(ListElement$2, {
       key: (params == null ? void 0 : params.id) || index,
       onPointerDown: function onPointerDown() {
         onSelected(params == null ? void 0 : params.id);
@@ -13548,7 +13659,7 @@ var Container$8 = /*#__PURE__*/styled.div.withConfig({
 }, function (props) {
   return props.fontSize;
 });
-var ListElement$1 = /*#__PURE__*/styled.li.withConfig({
+var ListElement$2 = /*#__PURE__*/styled.li.withConfig({
   displayName: "RelativeListMenu__ListElement",
   componentId: "sc-7hohf-1"
 })(["margin-right:0.5rem;"]);
@@ -15577,7 +15688,7 @@ var ImageCarousel = function ImageCarousel(_ref) {
     onPointerDown: function onPointerDown() {
       return goToNextImage();
     }
-  }))), onCloseButton && React__default.createElement(CloseButton$2, {
+  }))), onCloseButton && React__default.createElement(CloseButton$3, {
     className: "container-close",
     onPointerDown: onCloseButton
   }, "X"));
@@ -15608,7 +15719,7 @@ var Description$1 = /*#__PURE__*/styled.div.withConfig({
 }, function (props) {
   return props.isTextFixed ? 'none' : 'rgba(0, 0, 0, 0.6)';
 });
-var CloseButton$2 = /*#__PURE__*/styled.div.withConfig({
+var CloseButton$3 = /*#__PURE__*/styled.div.withConfig({
   displayName: "ImageCarousel__CloseButton",
   componentId: "sc-jl6f8-4"
 })(["position:absolute;top:3px;right:0px;color:white;z-index:22;font-size:1.5rem;@media (max-width:950px){font-size:1.7rem;padding:12px;}"]);
@@ -15892,7 +16003,7 @@ var ItemQuantitySelector = function ItemQuantitySelector(_ref) {
   return React__default.createElement(StyledContainer, {
     type: exports.RPGUIContainerTypes.Framed,
     width: "25rem"
-  }, React__default.createElement(CloseButton$3, {
+  }, React__default.createElement(CloseButton$4, {
     className: "container-close",
     onPointerDown: onClose
   }, "X"), React__default.createElement("h2", null, "Select quantity to move"), React__default.createElement(StyledForm, {
@@ -15950,7 +16061,7 @@ var StyledInput = /*#__PURE__*/styled(Input).withConfig({
   displayName: "ItemQuantitySelector__StyledInput",
   componentId: "sc-yfdtpn-2"
 })(["text-align:center;&::-webkit-outer-spin-button,&::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}&[type='number']{-moz-appearance:textfield;}"]);
-var CloseButton$3 = /*#__PURE__*/styled.div.withConfig({
+var CloseButton$4 = /*#__PURE__*/styled.div.withConfig({
   displayName: "ItemQuantitySelector__CloseButton",
   componentId: "sc-yfdtpn-3"
 })(["position:absolute;top:3px;right:0px;color:white;z-index:22;font-size:0.8rem;"]);
@@ -15983,6 +16094,7 @@ var QuantitySelectorContainer = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-1b8cosc-0"
 })(["position:absolute;top:0;left:0;width:100vw;height:100vh;z-index:100;display:flex;justify-content:center;align-items:center;background-color:rgba(0,0,0,0.5);"]);
 
+var MIN_SLOTS_FOR_SCROLL = 20;
 var ItemContainer$1 = function ItemContainer(_ref) {
   var itemContainer = _ref.itemContainer,
     onClose = _ref.onClose,
@@ -16138,7 +16250,8 @@ var ItemContainer$1 = function ItemContainer(_ref) {
     atlasJSON: atlasJSON
   }), React__default.createElement(ItemsContainer, {
     className: "item-container-body",
-    ref: containerRef
+    ref: containerRef,
+    isScrollable: itemContainer.slotQty > MIN_SLOTS_FOR_SCROLL
   }, onRenderSlots())), quantitySelect.isOpen && React__default.createElement(ItemQuantitySelectorModal, {
     quantitySelect: quantitySelect,
     setQuantitySelect: setQuantitySelect
@@ -16147,7 +16260,10 @@ 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:auto;overflow-x:hidden;width:415px;"]);
+})(["display:flex;justify-content:center;flex-wrap:wrap;max-height:270px;overflow-y:", ";overflow-x:hidden;width:415px;"], function (_ref2) {
+  var isScrollable = _ref2.isScrollable;
+  return isScrollable ? 'scroll' : 'hidden';
+});
 
 var LeaderboardTable = function LeaderboardTable(props) {
   var items = props.items,
@@ -16281,7 +16397,7 @@ var ListMenu = function ListMenu(_ref) {
       overflow: 'hidden'
     }
   }, options.map(function (params, index) {
-    return React__default.createElement(ListElement$2, {
+    return React__default.createElement(ListElement$3, {
       key: (params == null ? void 0 : params.id) || index,
       onPointerDown: function onPointerDown() {
         onSelected(params == null ? void 0 : params.id);
@@ -16297,7 +16413,7 @@ var Container$k = /*#__PURE__*/styled.div.withConfig({
 }, function (props) {
   return props.x || 0;
 }, uiFonts.size.xsmall);
-var ListElement$2 = /*#__PURE__*/styled.li.withConfig({
+var ListElement$3 = /*#__PURE__*/styled.li.withConfig({
   displayName: "ListMenu__ListElement",
   componentId: "sc-i9097t-1"
 })(["margin-right:0.5rem;"]);
@@ -17955,7 +18071,7 @@ var SkillsContainer = function SkillsContainer(_ref) {
     cancelDrag: "#skillsDiv",
     scale: scale,
     width: "100%"
-  }, onCloseButton && React__default.createElement(CloseButton$4, {
+  }, onCloseButton && React__default.createElement(CloseButton$5, {
     onPointerDown: onCloseButton
   }, "X"), React__default.createElement(SkillsContainerDiv, {
     id: "skillsDiv"
@@ -17991,7 +18107,7 @@ var SkillSplitDiv = /*#__PURE__*/styled.div.withConfig({
   displayName: "SkillsContainer__SkillSplitDiv",
   componentId: "sc-1g0c67q-2"
 })(["width:100%;font-size:11px;hr{margin:0;margin-bottom:1rem;padding:0px;}p{margin-bottom:0px;}"]);
-var CloseButton$4 = /*#__PURE__*/styled.div.withConfig({
+var CloseButton$5 = /*#__PURE__*/styled.div.withConfig({
   displayName: "SkillsContainer__CloseButton",
   componentId: "sc-1g0c67q-3"
 })(["position:absolute;top:2px;right:2px;color:white;z-index:22;font-size:1.1rem;"]);
@@ -18401,7 +18517,7 @@ var TimeWidget = function TimeWidget(_ref) {
     scale = _ref.scale;
   return React__default.createElement(Draggable, {
     scale: scale
-  }, React__default.createElement(WidgetContainer, null, React__default.createElement(CloseButton$5, {
+  }, React__default.createElement(WidgetContainer, null, React__default.createElement(CloseButton$6, {
     onPointerDown: onClose
   }, "X"), React__default.createElement(DayNightContainer, null, React__default.createElement(DayNightPeriod, {
     periodOfDay: periodOfDay
@@ -18415,7 +18531,7 @@ var Time = /*#__PURE__*/styled.div.withConfig({
   displayName: "TimeWidget__Time",
   componentId: "sc-1ja236h-1"
 })(["top:0.75rem;right:0.5rem;position:absolute;font-size:", ";color:white;"], uiFonts.size.small);
-var CloseButton$5 = /*#__PURE__*/styled.p.withConfig({
+var CloseButton$6 = /*#__PURE__*/styled.p.withConfig({
   displayName: "TimeWidget__CloseButton",
   componentId: "sc-1ja236h-2"
 })(["position:absolute;top:-0.5rem;margin:0;right:-0.2rem;font-size:", " !important;z-index:1;"], uiFonts.size.small);