@rpg-engine/long-bow 0.5.75 → 0.5.76

package/dist/components/Dropdown.d.ts

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

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

@@ -14892,7 +14892,9 @@ var ItemTypes = /*#__PURE__*/styled__default.div.withConfig({
 var Dropdown = function Dropdown(_ref) {
   var options = _ref.options,
     width = _ref.width,
-    onChange = _ref.onChange;
+    onChange = _ref.onChange,
+    _ref$opensUp = _ref.opensUp,
+    opensUp = _ref$opensUp === void 0 ? false : _ref$opensUp;
   var dropdownId = uuid.v4();
   var _useState = React.useState(''),
     selectedValue = _useState[0],
@@ -14912,10 +14914,6 @@ var Dropdown = function Dropdown(_ref) {
           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);
@@ -14942,7 +14940,8 @@ var Dropdown = function Dropdown(_ref) {
     }
   }, React__default.createElement("label", null, "\u25BC"), " ", selectedOption), React__default.createElement(DropdownOptions$1, {
     className: "rpgui-dropdown-imp",
-    opened: opened
+    opened: opened,
+    opensUp: opensUp
   }, options.map(function (option) {
     return React__default.createElement("li", {
       key: option.id,
@@ -14967,8 +14966,12 @@ var DropdownSelect$1 = /*#__PURE__*/styled__default.p.withConfig({
 var DropdownOptions$1 = /*#__PURE__*/styled__default.ul.withConfig({
   displayName: "Dropdown__DropdownOptions",
   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) {
+})(["position:absolute;width:100%;max-height:300px;overflow-y:auto;display:", ";box-sizing:border-box;bottom:", ";top:", ";margin:0;padding:0;@media (max-width:768px){padding:8px 0;}"], function (props) {
   return props.opened ? 'block' : 'none';
+}, function (props) {
+  return props.opensUp ? '100%' : 'auto';
+}, function (props) {
+  return props.opensUp ? 'auto' : '100%';
 });
 
 var DropdownSelectorContainer = function DropdownSelectorContainer(_ref) {