@rpg-engine/long-bow 0.5.58 → 0.5.59

package/dist/components/Dropdown.d.ts

@@ -8,6 +8,5 @@ export interface IDropdownProps {
     options: IOptionsProps[];
     width?: string;
     onChange: (value: string) => void;
-    triggerOnChangeOnMount?: boolean;
 }
 export declare const Dropdown: React.FC<IDropdownProps>;

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

@@ -17,6 +17,7 @@ var ReactDOM = _interopDefault(require('react-dom'));
 var lodash = require('lodash');
 var mobxReactLite = require('mobx-react-lite');
 var uuid = require('uuid');
+var reactSpinners = require('react-spinners');
 var ai = require('react-icons/ai');
 require('rpgui/rpgui.css');
 require('rpgui/rpgui.min.js');
@@ -14800,9 +14801,7 @@ var Dropdown = function Dropdown(_ref) {
   var _options$, _options$2;
   var options = _ref.options,
     width = _ref.width,
-    onChange = _ref.onChange,
-    _ref$triggerOnChangeO = _ref.triggerOnChangeOnMount,
-    triggerOnChangeOnMount = _ref$triggerOnChangeO === void 0 ? true : _ref$triggerOnChangeO;
+    onChange = _ref.onChange;
   var dropdownId = uuid.v4();
   var _useState = React.useState(options == null ? void 0 : (_options$ = options[0]) == null ? void 0 : _options$.value),
     selectedValue = _useState[0],
@@ -14813,6 +14812,13 @@ var Dropdown = function Dropdown(_ref) {
   var _useState3 = React.useState(false),
     opened = _useState3[0],
     setOpened = _useState3[1];
+  React.useEffect(function () {
+    if ((options == null ? void 0 : options.length) > 0) {
+      setSelectedValue(options[0].value);
+      setSelectedOption(options[0].option);
+      onChange(options[0].value);
+    }
+  }, [options]);
   var handleSelection = function handleSelection(value, option) {
     if (value !== selectedValue) {
       setSelectedValue(value);
@@ -14820,11 +14826,6 @@ var Dropdown = function Dropdown(_ref) {
       onChange(value);
     }
   };
-  React.useEffect(function () {
-    if (triggerOnChangeOnMount) {
-      onChange(selectedValue);
-    }
-  }, []);
   return React__default.createElement(Container$d, {
     onMouseLeave: function onMouseLeave() {
       return setOpened(false);
@@ -14838,10 +14839,13 @@ var Dropdown = function Dropdown(_ref) {
         return !prev;
       });
     }
-  }, React__default.createElement("label", null, "\u25BC"), " ", selectedOption), React__default.createElement(DropdownOptions, {
+  }, React__default.createElement(DropdownDisplay, null, React__default.createElement(DropdownLabel, null, "\u25BC"), " ", selectedOption, !options.length && React__default.createElement(reactSpinners.BeatLoader, {
+    size: 4,
+    color: uiColors.white
+  }))), React__default.createElement(DropdownOptions, {
     className: "rpgui-dropdown-imp",
     opened: opened
-  }, options.map(function (option) {
+  }, options == null ? void 0 : options.map(function (option) {
     return React__default.createElement("li", {
       key: option.id,
       onPointerUp: function onPointerUp() {
@@ -14851,19 +14855,27 @@ var Dropdown = function Dropdown(_ref) {
     }, option.option);
   })));
 };
+var DropdownDisplay = /*#__PURE__*/styled__default.span.withConfig({
+  displayName: "Dropdown__DropdownDisplay",
+  componentId: "sc-8arn65-0"
+})(["display:flex;flex-wrap:wrap;justify-content:start;align-items:center;"]);
+var DropdownLabel = /*#__PURE__*/styled__default.label.withConfig({
+  displayName: "Dropdown__DropdownLabel",
+  componentId: "sc-8arn65-1"
+})(["margin-right:0.5rem;"]);
 var Container$d = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "Dropdown__Container",
-  componentId: "sc-8arn65-0"
+  componentId: "sc-8arn65-2"
 })(["position:relative;width:", ";"], function (props) {
   return props.width || '100%';
 });
 var DropdownSelect = /*#__PURE__*/styled__default.p.withConfig({
   displayName: "Dropdown__DropdownSelect",
-  componentId: "sc-8arn65-1"
+  componentId: "sc-8arn65-3"
 })(["width:100%;box-sizing:border-box;label{display:inline-block;transform:translateY(-2px);}"]);
 var DropdownOptions = /*#__PURE__*/styled__default.ul.withConfig({
   displayName: "Dropdown__DropdownOptions",
-  componentId: "sc-8arn65-2"
+  componentId: "sc-8arn65-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) {
   return props.opened ? 'block' : 'none';
 });