@rpg-engine/long-bow 0.5.61 → 0.5.62

package/dist/long-bow.esm.js

@@ -9,7 +9,6 @@ import ReactDOM from 'react-dom';
 import { camelCase } from 'lodash-es';
 import { observer } from 'mobx-react-lite';
 import { v4 } from 'uuid';
-import { BeatLoader } from 'react-spinners';
 import { AiFillCaretRight } from 'react-icons/ai';
 import 'rpgui/rpgui.css';
 import 'rpgui/rpgui.min.js';
@@ -14792,43 +14791,55 @@ var ItemTypes = /*#__PURE__*/styled.div.withConfig({
 })(["display:flex;overflow-y:scroll;overflow-x:hidden;width:max-content;flex-direction:column;padding-right:5px;@media (max-width:", "){overflow-x:scroll;overflow-y:hidden;padding-right:0;width:100%;}"], mobilePortrait.width);
 
 var Dropdown = function Dropdown(_ref) {
-  var _options$, _options$find, _options$2;
   var options = _ref.options,
     width = _ref.width,
     onChange = _ref.onChange,
     defaultValue = _ref.defaultValue;
   var dropdownId = v4();
-  var _useState = useState(defaultValue || (options == null ? void 0 : (_options$ = options[0]) == null ? void 0 : _options$.value)),
+  var _useState = useState(defaultValue || ''),
     selectedValue = _useState[0],
     setSelectedValue = _useState[1];
-  var _useState2 = useState((options == null ? void 0 : (_options$find = options.find(function (option) {
-      return option.value === defaultValue;
-    })) == null ? void 0 : _options$find.option) || (options == null ? void 0 : (_options$2 = options[0]) == null ? void 0 : _options$2.option)),
+  var _useState2 = useState(''),
     selectedOption = _useState2[0],
     setSelectedOption = _useState2[1];
   var _useState3 = useState(false),
     opened = _useState3[0],
     setOpened = _useState3[1];
+  useEffect(function () {
+    var firstOption = options[0];
+    if (firstOption) {
+      var change = !selectedValue;
+      if (!change) {
+        change = options.filter(function (o) {
+          return o.value === selectedValue;
+        }).length < 1;
+      }
+      /**
+       * make a selection if there is no selected value already present
+       * or if there is a selected value but its not in new options
+       */
+      if (change) {
+        setSelectedValue(firstOption.value);
+        setSelectedOption(firstOption.option);
+      }
+    }
+  }, [options]);
   useEffect(function () {
     if (defaultValue) {
-      var _options$find2;
-      setSelectedValue(defaultValue);
-      setSelectedOption( //@ts-ignore
-      options == null ? void 0 : (_options$find2 = options.find(function (option) {
-        return option.value === defaultValue;
-      })) == null ? void 0 : _options$find2.option);
-    } else if ((options == null ? void 0 : options.length) > 0) {
-      setSelectedValue(options[0].value);
-      setSelectedOption(options[0].option);
+      var option = options.find(function (o) {
+        return o.value === defaultValue;
+      });
+      if (option) {
+        setSelectedValue(option.value);
+        setSelectedOption(option.option);
+      }
     }
-  }, [options, defaultValue]);
-  var handleSelection = function handleSelection(value, option) {
-    if (value !== selectedValue) {
-      setSelectedValue(value);
-      setSelectedOption(option);
-      onChange(value);
+  }, [defaultValue]);
+  useEffect(function () {
+    if (selectedValue) {
+      onChange(selectedValue);
     }
-  };
+  }, [selectedValue]);
   return React.createElement(Container$d, {
     onMouseLeave: function onMouseLeave() {
       return setOpened(false);
@@ -14842,43 +14853,33 @@ var Dropdown = function Dropdown(_ref) {
         return !prev;
       });
     }
-  }, React.createElement(DropdownDisplay, null, React.createElement(DropdownLabel, null, "\u25BC"), " ", selectedOption, !options.length && React.createElement(BeatLoader, {
-    size: 4,
-    color: uiColors.white
-  }))), React.createElement(DropdownOptions, {
+  }, React.createElement("label", null, "\u25BC"), " ", selectedOption), React.createElement(DropdownOptions, {
     className: "rpgui-dropdown-imp",
     opened: opened
-  }, options == null ? void 0 : options.map(function (option) {
+  }, options.map(function (option) {
     return React.createElement("li", {
       key: option.id,
       onPointerUp: function onPointerUp() {
-        handleSelection(option.value, option.option);
+        setSelectedValue(option.value);
+        setSelectedOption(option.option);
         setOpened(false);
       }
     }, option.option);
   })));
 };
-var DropdownDisplay = /*#__PURE__*/styled.span.withConfig({
-  displayName: "Dropdown__DropdownDisplay",
-  componentId: "sc-8arn65-0"
-})(["display:flex;flex-wrap:wrap;justify-content:start;align-items:center;"]);
-var DropdownLabel = /*#__PURE__*/styled.label.withConfig({
-  displayName: "Dropdown__DropdownLabel",
-  componentId: "sc-8arn65-1"
-})(["margin-right:0.5rem;"]);
 var Container$d = /*#__PURE__*/styled.div.withConfig({
   displayName: "Dropdown__Container",
-  componentId: "sc-8arn65-2"
+  componentId: "sc-8arn65-0"
 })(["position:relative;width:", ";"], function (props) {
   return props.width || '100%';
 });
 var DropdownSelect = /*#__PURE__*/styled.p.withConfig({
   displayName: "Dropdown__DropdownSelect",
-  componentId: "sc-8arn65-3"
+  componentId: "sc-8arn65-1"
 })(["width:100%;box-sizing:border-box;label{display:inline-block;transform:translateY(-2px);}"]);
 var DropdownOptions = /*#__PURE__*/styled.ul.withConfig({
   displayName: "Dropdown__DropdownOptions",
-  componentId: "sc-8arn65-4"
+  componentId: "sc-8arn65-2"
 })(["position:absolute;width:100%;max-height:300px;overflow-y:auto;display:", ";box-sizing:border-box;@media (max-width:768px){padding:8px 0;}"], function (props) {
   return props.opened ? 'block' : 'none';
 });