@rpg-engine/long-bow 0.8.213 → 0.8.215

package/dist/components/Store/Store.d.ts

@@ -26,6 +26,10 @@ export interface IStoreProps {
     customHistoryContent?: React.ReactNode;
     /** When true the store renders full-screen (useful on mobile). */
     fullScreen?: boolean;
+    /** Override the DraggableContainer width (e.g. "90vw"). Defaults to "1000px". */
+    containerWidth?: string;
+    /** Override the DraggableContainer height (e.g. "80vh"). Defaults to "auto". */
+    containerHeight?: string;
     packsBadge?: string;
     featuredItems?: IFeaturedItem[];
     onQuickBuy?: (item: IProductBlueprint, quantity?: number) => void;

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

@@ -39202,7 +39202,19 @@ var StoreItemsSection = function StoreItemsSection(_ref) {
       currencySymbol: currencySymbol
     }, meta));
   };
-  return React__default.createElement(StoreContainer, null, React__default.createElement(SearchHeader$2, null, React__default.createElement(SearchBarContainer$1, null, React__default.createElement(SearchBar, {
+  var _useState = React.useState(false),
+    showFilters = _useState[0],
+    setShowFilters = _useState[1];
+  return React__default.createElement(StoreContainer, null, React__default.createElement(FilterBar, null, React__default.createElement(FilterToggle, {
+    "$active": showFilters,
+    onClick: function onClick() {
+      return setShowFilters(function (prev) {
+        return !prev;
+      });
+    }
+  }, React__default.createElement(fa.FaFilter, {
+    size: 12
+  }), React__default.createElement("span", null, "Filter"))), showFilters && React__default.createElement(SearchHeader$2, null, React__default.createElement(SearchBarContainer$1, null, React__default.createElement(SearchBar, {
     value: searchQuery,
     onChange: setSearchQuery,
     placeholder: "Search items..."
@@ -39222,7 +39234,7 @@ var StoreItemsSection = function StoreItemsSection(_ref) {
     renderItem: renderStoreItem,
     emptyMessage: "No items match your filters.",
     layout: "list",
-    maxHeight: "50vh"
+    maxHeight: "none"
   }));
 };
 var StoreContainer = /*#__PURE__*/styled__default.div.withConfig({
@@ -39237,6 +39249,17 @@ var SearchBarContainer$1 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "StoreItemsSection__SearchBarContainer",
   componentId: "sc-l6f466-2"
 })(["flex:0.75;"]);
+var FilterBar = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "StoreItemsSection__FilterBar",
+  componentId: "sc-l6f466-3"
+})(["display:flex;padding-top:0.25rem;"]);
+var FilterToggle = /*#__PURE__*/styled__default.button.withConfig({
+  displayName: "StoreItemsSection__FilterToggle",
+  componentId: "sc-l6f466-4"
+})(["display:flex;align-items:center;gap:0.4rem;background:", ";border:1px solid rgba(255,255,255,0.3);color:#fff;padding:0.3rem 0.6rem;border-radius:4px;cursor:pointer;font-family:'Press Start 2P',cursive;font-size:0.55rem;&:hover{background:rgba(255,255,255,0.1);}"], function (_ref2) {
+  var $active = _ref2.$active;
+  return $active ? 'rgba(255,255,255,0.15)' : 'transparent';
+});
 
 var usePackFiltering = function usePackFiltering(packs) {
   var _useState = React.useState(''),
@@ -39710,6 +39733,8 @@ var Store = function Store(_ref) {
     customHistoryContent = _ref.customHistoryContent,
     _ref$fullScreen = _ref.fullScreen,
     fullScreen = _ref$fullScreen === void 0 ? false : _ref$fullScreen,
+    containerWidth = _ref.containerWidth,
+    containerHeight = _ref.containerHeight,
     _ref$packsTabLabel = _ref.packsTabLabel,
     packsTabLabel = _ref$packsTabLabel === void 0 ? 'Packs' : _ref$packsTabLabel,
     packsBadge = _ref.packsBadge,
@@ -40047,9 +40072,9 @@ var Store = function Store(_ref) {
   return React__default.createElement(DraggableContainer, {
     title: "Store",
     onCloseButton: onClose,
-    width: "1000px",
+    width: containerWidth != null ? containerWidth : "1000px",
     minWidth: "700px",
-    height: "auto",
+    height: containerHeight != null ? containerHeight : "auto",
     type: exports.RPGUIContainerTypes.Framed,
     cancelDrag: "[class*='Store__Container'], [class*='CartView'], [class*='StoreItemDetails'], .close-button",
     isFullScreen: fullScreen