@rpg-engine/long-bow 0.6.88 → 0.6.89

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

@@ -1,14 +1,14 @@
-import { ICharacter } from '@rpg-engine/shared/dist/types/character.types';
-import React from 'react';
+/// <reference types="react" />
 import { IStyles } from '../Chat/Chat';
+import type { PrivateChatCharacter } from './ChatRevamp';
 interface ISearchCharacterProps {
     onFocus?: () => void;
     onBlur?: () => void;
     onChangeCharacterName: (characterName: string) => void;
     styles?: IStyles;
-    recentCharacters?: ICharacter[];
-    onCharacterClick?: (character: ICharacter) => void;
+    recentCharacters?: PrivateChatCharacter[];
+    onCharacterClick?: (character: PrivateChatCharacter) => void;
     hideSearchCharacterUI: () => void;
 }
-export declare const SearchCharacter: React.FC<ISearchCharacterProps>;
+export declare const SearchCharacter: ({ onChangeCharacterName, onBlur, onFocus, recentCharacters, hideSearchCharacterUI, onCharacterClick, styles, }: ISearchCharacterProps) => JSX.Element;
 export {};

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

@@ -26392,27 +26392,29 @@ var SearchCharacter = function SearchCharacter(_ref) {
     onCharacterClick = _ref.onCharacterClick,
     _ref$styles = _ref.styles,
     styles = _ref$styles === void 0 ? {
-      textColor: uiColors.white,
-      buttonColor: uiColors.orange,
-      buttonBackgroundColor: uiColors.darkGray,
-      width: '100%',
+      textColor: '#c65102',
+      buttonColor: '#005b96',
+      buttonBackgroundColor: 'rgba(0,0,0,.2)',
+      width: '80%',
       height: 'auto'
     } : _ref$styles;
   var _useState = React.useState(''),
     characterName = _useState[0],
     setCharacterName = _useState[1];
-  var _useState2 = React.useState(false),
-    isFocused = _useState2[0],
-    setIsFocused = _useState2[1];
   var searchCharacterRef = React.useRef(null);
   React.useEffect(function () {
-    if (searchCharacterRef.current) {
-      searchCharacterRef.current.focus();
-    }
+    var timer = setTimeout(function () {
+      if (searchCharacterRef.current) {
+        searchCharacterRef.current.focus();
+      }
+    }, 100);
+    return function () {
+      return clearTimeout(timer);
+    };
   }, []);
   var handleSubmit = function handleSubmit(event) {
     event.preventDefault();
-    if (!characterName.trim()) return;
+    if (!characterName || characterName.trim() === '') return;
     onChangeCharacterName(characterName);
   };
   var handleCharacterClick = function handleCharacterClick(character) {
@@ -26421,131 +26423,77 @@ var SearchCharacter = function SearchCharacter(_ref) {
     onCharacterClick(character);
     hideSearchCharacterUI();
   };
-  var handleFocus = function handleFocus() {
-    setIsFocused(true);
-    onFocus == null ? void 0 : onFocus();
-  };
-  var handleBlur = function handleBlur() {
-    setIsFocused(false);
-    onBlur == null ? void 0 : onBlur();
-  };
-  return React__default.createElement(SearchContainer, {
-    width: styles.width || 'auto'
-  }, React__default.createElement(Form$2, {
+  return React__default.createElement(SearchContainer, null, React__default.createElement(Form$2, {
     onSubmit: handleSubmit
-  }, React__default.createElement(InputWrapper, {
-    isFocused: isFocused
-  }, React__default.createElement(SearchIcon, null, React__default.createElement(rx.RxMagnifyingGlass, null)), React__default.createElement(TextField$1, {
+  }, React__default.createElement(Column, {
+    flex: 70
+  }, React__default.createElement(TextField$1, {
     value: characterName,
     ref: searchCharacterRef,
+    id: "characterName",
+    name: 'characterName',
     onChange: function onChange(e) {
       setCharacterName(e.target.value);
       onChangeCharacterName(e.target.value);
     },
-    placeholder: "Search for a character...",
+    placeholder: 'Search for a character...',
+    height: 20,
     type: "text",
     autoComplete: "off",
-    onFocus: handleFocus,
-    onBlur: handleBlur
-  }), characterName && React__default.createElement(ClearButton, {
-    onClick: function onClick() {
-      return setCharacterName('');
-    },
-    type: "button"
-  }, React__default.createElement(rx.RxCross2, null))), React__default.createElement(SearchButton, {
-    type: "submit",
-    buttonColor: styles.buttonColor,
-    buttonBackgroundColor: styles.buttonBackgroundColor
-  }, "Search")), recentCharacters && recentCharacters.length > 0 && React__default.createElement(ResultsContainer, null, React__default.createElement(ResultsTitle, null, "Recent Characters"), React__default.createElement(ResultsList, null, recentCharacters.map(function (character) {
-    return React__default.createElement(ResultItem, {
-      key: character._id,
-      onClick: function onClick() {
+    onFocus: onFocus,
+    onBlur: onBlur,
+    onPointerDown: onFocus
+  })), 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",
+    style: {
+      borderRadius: '20%'
+    }
+  }, React__default.createElement(rx.RxMagnifyingGlass, {
+    size: 15
+  })))), recentCharacters && recentCharacters.length > 0 && React__default.createElement(ListContainer, null, recentCharacters.map(function (character) {
+    return React__default.createElement(ListElement, {
+      onPointerDown: function onPointerDown() {
         return handleCharacterClick(character);
-      }
-    }, React__default.createElement(CharacterAvatar, {
-      src: character.textureKey || '/default-avatar.png',
-      alt: character.name
-    }), React__default.createElement(CharacterInfo, null, React__default.createElement(CharacterName, null, React__default.createElement(Ellipsis, {
-      maxLines: 1,
-      maxWidth: "150px"
-    }, character.name)), React__default.createElement(CharacterDescription, null, React__default.createElement(Ellipsis, {
-      maxLines: 1,
-      maxWidth: "150px"
-    }, "Class: " + character["class"] + ", Level: " + character.skills.level))));
-  }))));
+      },
+      key: character._id
+    }, character.name);
+  })));
 };
 var SearchContainer = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "SearchCharacter__SearchContainer",
   componentId: "sc-172lyfr-0"
-})(["width:", ";max-width:600px;margin:0 auto;"], function (_ref2) {
-  var width = _ref2.width;
-  return width;
-});
+})(["width:100%;"]);
 var Form$2 = /*#__PURE__*/styled__default.form.withConfig({
   displayName: "SearchCharacter__Form",
   componentId: "sc-172lyfr-1"
-})(["display:flex;gap:10px;margin-bottom:20px;"]);
-var InputWrapper = /*#__PURE__*/styled__default.div.withConfig({
-  displayName: "SearchCharacter__InputWrapper",
-  componentId: "sc-172lyfr-2"
-})(["position:relative;flex-grow:1;display:flex;align-items:center;background-color:", ";border-radius:24px;padding:8px 16px;transition:all 0.3s ease;box-shadow:", ";"], uiColors.raisinBlack, function (_ref3) {
-  var isFocused = _ref3.isFocused;
-  return isFocused ? "0 0 0 2px " + uiColors.orange : 'none';
-});
-var SearchIcon = /*#__PURE__*/styled__default.span.withConfig({
-  displayName: "SearchCharacter__SearchIcon",
-  componentId: "sc-172lyfr-3"
-})(["color:", ";margin-right:8px;"], uiColors.gray);
+})(["display:flex;width:100%;justify-content:center;align-items:center;"]);
 var TextField$1 = /*#__PURE__*/styled__default.input.withConfig({
   displayName: "SearchCharacter__TextField",
-  componentId: "sc-172lyfr-4"
-})(["width:100%;background-color:transparent;border:none;color:", ";font-size:", ";outline:none;&::placeholder{color:", ";}"], uiColors.white, uiFonts.size.medium, uiColors.gray);
-var ClearButton = /*#__PURE__*/styled__default.button.withConfig({
-  displayName: "SearchCharacter__ClearButton",
-  componentId: "sc-172lyfr-5"
-})(["background:none;border:none;color:", ";cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;"], uiColors.gray);
+  componentId: "sc-172lyfr-2"
+})(["width:100%;background-color:rgba(0,0,0,0.25) !important;border:none !important;max-height:28px !important;"]);
 var SearchButton = /*#__PURE__*/styled__default.button.withConfig({
   displayName: "SearchCharacter__SearchButton",
-  componentId: "sc-172lyfr-6"
-})(["background-color:", ";color:", ";border:none;border-radius:24px;padding:8px 16px;font-size:", ";font-weight:bold;cursor:pointer;transition:all 0.3s ease;&:hover{background-color:", ";color:", ";}"], function (_ref4) {
-  var buttonBackgroundColor = _ref4.buttonBackgroundColor;
-  return buttonBackgroundColor;
-}, function (_ref5) {
-  var buttonColor = _ref5.buttonColor;
+  componentId: "sc-172lyfr-3"
+})(["color:", ";background-color:", ";width:28px;height:28px;border:none !important;"], function (_ref2) {
+  var buttonColor = _ref2.buttonColor;
   return buttonColor;
-}, uiFonts.size.medium, uiColors.orange, uiColors.white);
-var ResultsContainer = /*#__PURE__*/styled__default.div.withConfig({
-  displayName: "SearchCharacter__ResultsContainer",
-  componentId: "sc-172lyfr-7"
-})(["background-color:", ";border-radius:8px;padding:16px;"], uiColors.raisinBlack);
-var ResultsTitle = /*#__PURE__*/styled__default.h3.withConfig({
-  displayName: "SearchCharacter__ResultsTitle",
-  componentId: "sc-172lyfr-8"
-})(["color:", ";font-size:", ";margin-bottom:12px;"], uiColors.white, uiFonts.size.medium);
-var ResultsList = /*#__PURE__*/styled__default.ul.withConfig({
-  displayName: "SearchCharacter__ResultsList",
-  componentId: "sc-172lyfr-9"
-})(["list-style-type:none;padding:0;margin:0;"]);
-var ResultItem = /*#__PURE__*/styled__default.li.withConfig({
-  displayName: "SearchCharacter__ResultItem",
-  componentId: "sc-172lyfr-10"
-})(["display:flex;align-items:center;padding:8px;cursor:pointer;border-radius:4px;transition:all 0.2s ease;&:hover{background-color:", ";}"], uiColors.darkGray);
-var CharacterAvatar = /*#__PURE__*/styled__default.img.withConfig({
-  displayName: "SearchCharacter__CharacterAvatar",
-  componentId: "sc-172lyfr-11"
-})(["width:40px;height:40px;border-radius:50%;margin-right:12px;object-fit:cover;"]);
-var CharacterInfo = /*#__PURE__*/styled__default.div.withConfig({
-  displayName: "SearchCharacter__CharacterInfo",
-  componentId: "sc-172lyfr-12"
-})(["flex-grow:1;"]);
-var CharacterName = /*#__PURE__*/styled__default.div.withConfig({
-  displayName: "SearchCharacter__CharacterName",
-  componentId: "sc-172lyfr-13"
-})(["color:", ";font-size:", ";font-weight:bold;margin-bottom:4px;"], uiColors.white, uiFonts.size.medium);
-var CharacterDescription = /*#__PURE__*/styled__default.div.withConfig({
-  displayName: "SearchCharacter__CharacterDescription",
-  componentId: "sc-172lyfr-14"
-})(["color:", ";font-size:", ";"], uiColors.gray, uiFonts.size.small);
+}, function (_ref3) {
+  var buttonBackgroundColor = _ref3.buttonBackgroundColor;
+  return buttonBackgroundColor;
+});
+var ListContainer = /*#__PURE__*/styled__default.ul.withConfig({
+  displayName: "SearchCharacter__ListContainer",
+  componentId: "sc-172lyfr-4"
+})(["border:none;overflow-y:scroll;list-style:none;padding:0;"]);
+var ListElement = /*#__PURE__*/styled__default.li.withConfig({
+  displayName: "SearchCharacter__ListElement",
+  componentId: "sc-172lyfr-5"
+})(["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,
@@ -26617,7 +26565,7 @@ var ChatRevamp = function ChatRevamp(_ref) {
   }, recentChatCharacters == null ? void 0 : recentChatCharacters.map(function (character) {
     return React__default.createElement(ListElementContainer, {
       key: character._id
-    }, React__default.createElement(ListElement, {
+    }, React__default.createElement(ListElement$1, {
       active: character._id === recentSelectedChatCharacterId,
       onClick: function onClick() {
         return handlePreviousChatCharacterClick(character);
@@ -26720,7 +26668,7 @@ var ListElementContainer = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "ChatRevamp__ListElementContainer",
   componentId: "sc-1sdiknw-10"
 })(["display:flex;justify-content:space-between;align-items:center;"]);
-var ListElement = /*#__PURE__*/styled__default.button.withConfig({
+var ListElement$1 = /*#__PURE__*/styled__default.button.withConfig({
   displayName: "ChatRevamp__ListElement",
   componentId: "sc-1sdiknw-11"
 })(["margin:0.5rem 0 !important;font-size:", " !important;padding:8px;border-radius:4px;all:unset;color:", ";width:100%;position:relative;display:flex;align-items:center;gap:4px;transition:all 0.2s ease;&:hover{background-color:rgba(255,255,255,0.1);}"], uiFonts.size.small, function (props) {
@@ -27389,7 +27337,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);
@@ -27407,7 +27355,7 @@ var Container$9 = /*#__PURE__*/styled__default.div.withConfig({
 }, function (props) {
   return props.fontSize;
 });
-var ListElement$1 = /*#__PURE__*/styled__default.li.withConfig({
+var ListElement$2 = /*#__PURE__*/styled__default.li.withConfig({
   displayName: "RelativeListMenu__ListElement",
   componentId: "sc-7hohf-1"
 })(["margin-right:0.5rem;"]);
@@ -28914,7 +28862,7 @@ var SearchFriend = function SearchFriend(_ref) {
       onSearch(characterName);
     }
   };
-  var searchTabContent = React__default.createElement(ListContainer, null, React__default.createElement(SearchForm, {
+  var searchTabContent = React__default.createElement(ListContainer$1, null, React__default.createElement(SearchForm, {
     onSubmit: handleSubmit
   }, React__default.createElement(SearchInput, {
     value: characterName,
@@ -28933,7 +28881,7 @@ var SearchFriend = function SearchFriend(_ref) {
     onAction: onSendFriendRequest,
     actionLabel: "Add Friend"
   }));
-  var requestsTabContent = React__default.createElement(ListContainer, null, React__default.createElement(FriendRequestSection, {
+  var requestsTabContent = React__default.createElement(ListContainer$1, null, React__default.createElement(FriendRequestSection, {
     friendRequests: friendRequests,
     onAccept: onAcceptRequest,
     onReject: onRejectRequest
@@ -28958,10 +28906,10 @@ var CharacterList = function CharacterList(_ref2) {
   var characters = _ref2.characters,
     onAction = _ref2.onAction,
     actionLabel = _ref2.actionLabel;
-  return React__default.createElement(ListContainer, null, characters.map(function (character) {
+  return React__default.createElement(ListContainer$1, null, characters.map(function (character) {
     return React__default.createElement(ListItem, {
       key: character._id
-    }, React__default.createElement(CharacterName$1, null, character.name), React__default.createElement(UserActionLink, {
+    }, React__default.createElement(CharacterName, null, character.name), React__default.createElement(UserActionLink, {
       color: uiColors.lightGreen,
       onClick: function onClick() {
         return onAction(character);
@@ -28973,10 +28921,10 @@ var FriendRequestSection = function FriendRequestSection(_ref3) {
   var friendRequests = _ref3.friendRequests,
     onAccept = _ref3.onAccept,
     onReject = _ref3.onReject;
-  return React__default.createElement(React__default.Fragment, null, friendRequests.length > 0 && React__default.createElement(ListContainer, null, friendRequests.map(function (character) {
+  return React__default.createElement(React__default.Fragment, null, friendRequests.length > 0 && React__default.createElement(ListContainer$1, null, friendRequests.map(function (character) {
     return React__default.createElement(ListItem, {
       key: character._id
-    }, React__default.createElement(CharacterName$1, null, character.name), React__default.createElement(AcceptRejectActions, null, React__default.createElement(UserActionLink, {
+    }, React__default.createElement(CharacterName, null, character.name), React__default.createElement(AcceptRejectActions, null, React__default.createElement(UserActionLink, {
       color: uiColors.lightGreen,
       onClick: function onClick() {
         return onAccept(character);
@@ -29001,7 +28949,7 @@ var SearchInput = /*#__PURE__*/styled__default.input.withConfig({
   displayName: "SearchFriend__SearchInput",
   componentId: "sc-1lt1ols-2"
 })(["width:100%;background-color:rgba(0,0,0,0.25);border:none;padding:0.5rem;font-size:", ";"], uiFonts.size.small);
-var ListContainer = /*#__PURE__*/styled__default.ul.withConfig({
+var ListContainer$1 = /*#__PURE__*/styled__default.ul.withConfig({
   displayName: "SearchFriend__ListContainer",
   componentId: "sc-1lt1ols-3"
 })(["list-style:none;padding:0;margin:0;width:100%;max-height:50vh;overflow-y:auto;@media (max-width:768px){max-height:90vh;}"]);
@@ -29009,7 +28957,7 @@ var ListItem = /*#__PURE__*/styled__default.li.withConfig({
   displayName: "SearchFriend__ListItem",
   componentId: "sc-1lt1ols-4"
 })(["display:flex;align-items:center;justify-content:space-between;padding:0.5rem;border-bottom:1px solid rgba(255,255,255,0.1);"]);
-var CharacterName$1 = /*#__PURE__*/styled__default.p.withConfig({
+var CharacterName = /*#__PURE__*/styled__default.p.withConfig({
   displayName: "SearchFriend__CharacterName",
   componentId: "sc-1lt1ols-5"
 })(["font-size:", ";margin:0;"], uiFonts.size.small);
@@ -30608,7 +30556,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);
@@ -30624,7 +30572,7 @@ var Container$m = /*#__PURE__*/styled__default.div.withConfig({
 }, function (props) {
   return props.x || 0;
 }, uiFonts.size.xsmall);
-var ListElement$2 = /*#__PURE__*/styled__default.li.withConfig({
+var ListElement$3 = /*#__PURE__*/styled__default.li.withConfig({
   displayName: "ListMenu__ListElement",
   componentId: "sc-i9097t-1"
 })(["margin-right:0.5rem;"]);
@@ -30883,7 +30831,7 @@ var BuyPanel = function BuyPanel(_ref) {
       enableHotkeys == null ? void 0 : enableHotkeys();
     },
     message: "Are you sure to buy this item?"
-  }), React__default.createElement(InputWrapper$1, null, React__default.createElement("p", null, "Search By Name"), React__default.createElement(Input, {
+  }), React__default.createElement(InputWrapper, null, React__default.createElement("p", null, "Search By Name"), React__default.createElement(Input, {
     onChange: function onChange(e) {
       setName(e.target.value);
       onChangeNameInput(e.target.value);
@@ -30986,7 +30934,7 @@ var BuyPanel = function BuyPanel(_ref) {
     });
   })));
 };
-var InputWrapper$1 = /*#__PURE__*/styled__default.div.withConfig({
+var InputWrapper = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "BuyPanel__InputWrapper",
   componentId: "sc-1si8t7i-0"
 })(["width:95%;display:flex !important;justify-content:flex-start;align-items:center;margin:auto;p{width:auto;margin-right:20px;}input{width:68%;height:10px;}"]);
@@ -31063,7 +31011,7 @@ var ManagmentPanel = function ManagmentPanel(_ref) {
       enableHotkeys == null ? void 0 : enableHotkeys();
     },
     message: "Are you sure to remove this item?"
-  }), React__default.createElement(InputWrapper$2, null, React__default.createElement("p", null, "Search By Name"), React__default.createElement(Input, {
+  }), React__default.createElement(InputWrapper$1, null, React__default.createElement("p", null, "Search By Name"), React__default.createElement(Input, {
     onChange: function onChange(e) {
       setName(e.target.value);
       onChangeNameInput(e.target.value);
@@ -31130,7 +31078,7 @@ var Flex$2 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "ManagmentPanel__Flex",
   componentId: "sc-1yyi6jn-0"
 })(["display:flex;gap:5px;align-items:center;"]);
-var InputWrapper$2 = /*#__PURE__*/styled__default.div.withConfig({
+var InputWrapper$1 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "ManagmentPanel__InputWrapper",
   componentId: "sc-1yyi6jn-1"
 })(["width:95%;display:flex !important;justify-content:flex-start;align-items:center;margin:auto;p{width:auto;margin-right:20px;}input{width:68%;height:10px;}"]);