@rpg-engine/long-bow 0.5.75 → 0.5.77

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.5.75",
+  "version": "0.5.77",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/AsyncDropdown.tsx

@@ -15,6 +15,7 @@ export interface IAsyncDropdownProps {
   width?: string;
   onChange: (value: string) => void;
   defaultValue?: string;
+  opensUp?: boolean;
 }
 
 export const AsyncDropdown: React.FC<IAsyncDropdownProps> = ({
@@ -22,6 +23,7 @@ export const AsyncDropdown: React.FC<IAsyncDropdownProps> = ({
   width,
   onChange,
   defaultValue,
+  opensUp = false,
 }) => {
   const dropdownId = uuidv4();
 
@@ -68,7 +70,11 @@ export const AsyncDropdown: React.FC<IAsyncDropdownProps> = ({
         </DropdownDisplay>
       </DropdownSelect>
 
-      <DropdownOptions className="rpgui-dropdown-imp" opened={opened}>
+      <DropdownOptions
+        className="rpgui-dropdown-imp"
+        opened={opened}
+        opensUp={opensUp}
+      >
         {options?.map(option => (
           <li
             key={option.id}
@@ -113,6 +119,7 @@ const DropdownSelect = styled.p`
 
 const DropdownOptions = styled.ul<{
   opened: boolean;
+  opensUp: boolean; // Add a new prop to the styled component
 }>`
   position: absolute;
   width: 100%;
@@ -120,6 +127,12 @@ const DropdownOptions = styled.ul<{
   overflow-y: auto;
   display: ${props => (props.opened ? 'block' : 'none')};
   box-sizing: border-box;
+  bottom: ${props =>
+    props.opensUp ? '100%' : 'auto'}; // Adjust the position based on the prop
+  top: ${props =>
+    props.opensUp ? 'auto' : '100%'}; // Adjust the position based on the prop
+  margin: 0; // Remove default margin
+  padding: 0; // Remove default padding
 
   @media (max-width: 768px) {
     padding: 8px 0;

package/src/components/Dropdown.tsx

@@ -12,12 +12,14 @@ export interface IDropdownProps {
   options: IOptionsProps[];
   width?: string;
   onChange: (value: string) => void;
+  opensUp?: boolean; // Add a new prop to control the dropdown direction
 }
 
 export const Dropdown: React.FC<IDropdownProps> = ({
   options,
   width,
   onChange,
+  opensUp = false, // Default value is false
 }) => {
   const dropdownId = uuidv4();
 
@@ -36,10 +38,6 @@ export const Dropdown: React.FC<IDropdownProps> = ({
         change = options.filter(o => 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);
@@ -63,7 +61,11 @@ export const Dropdown: React.FC<IDropdownProps> = ({
         <label>▼</label> {selectedOption}
       </DropdownSelect>
 
-      <DropdownOptions className="rpgui-dropdown-imp" opened={opened}>
+      <DropdownOptions
+        className="rpgui-dropdown-imp"
+        opened={opened}
+        opensUp={opensUp}
+      >
         {options.map(option => {
           return (
             <li
@@ -100,6 +102,7 @@ const DropdownSelect = styled.p`
 
 const DropdownOptions = styled.ul<{
   opened: boolean;
+  opensUp: boolean; // Add a new prop to the styled component
 }>`
   position: absolute;
   width: 100%;
@@ -107,7 +110,12 @@ const DropdownOptions = styled.ul<{
   overflow-y: auto;
   display: ${props => (props.opened ? 'block' : 'none')};
   box-sizing: border-box;
-
+  bottom: ${props =>
+    props.opensUp ? '100%' : 'auto'}; // Adjust the position based on the prop
+  top: ${props =>
+    props.opensUp ? 'auto' : '100%'}; // Adjust the position based on the prop
+  margin: 0;
+  padding: 0;
   @media (max-width: 768px) {
     padding: 8px 0;
   }

package/src/stories/Dropdown.stories.tsx

@@ -1,5 +1,6 @@
 import { Meta, Story } from '@storybook/react';
 import React from 'react';
+import styled from 'styled-components';
 import { RPGUIRoot } from '../../src';
 import {
   Dropdown,
@@ -14,12 +15,18 @@ const meta: Meta = {
 
 export default meta;
 
-const Template: Story<IDropdownProps> = (args) => (
+const Template: Story<IDropdownProps> = args => (
   <RPGUIRoot>
-    <Dropdown {...args} />
+    <PushUp>
+      <Dropdown {...args} />
+    </PushUp>
   </RPGUIRoot>
 );
 
+const PushUp = styled.div`
+  margin-top: 200px;
+`;
+
 export const Default = Template.bind({});
 
 const options: IOptionsProps[] = [
@@ -43,4 +50,5 @@ const options: IOptionsProps[] = [
 Default.args = {
   options,
   width: '100%',
+  opensUp: false,
 };