feat: add dropdwonWidth prop to select

treely · Jan 16, 2025 · e716e69 · e716e69
1 parent 2502587
commit e716e69
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 0 deletions.
diff --git a/src/components/BoemlyFormControl/BoemlyFormControl.tsx b/src/components/BoemlyFormControl/BoemlyFormControl.tsx
@@ -64,6 +64,8 @@ export interface BoemlyFormControlProps extends StyleProps {
   isInvalid?: boolean;
   isReadOnly?: boolean;
   isDisabled?: boolean;
+
+  dropdownWidth?: 'xs' | 'sm' | 'md' | 'lg';
 }
 
 export const BoemlyFormControl: React.FC<BoemlyFormControlProps> = ({
@@ -91,6 +93,8 @@ export const BoemlyFormControl: React.FC<BoemlyFormControlProps> = ({
   isReadOnly = false,
   isDisabled = false,
 
+  dropdownWidth,
+
   ...styleProps
 }: BoemlyFormControlProps) => {
   const [isMobile] = useMediaQuery(BREAKPOINT_MD_QUERY);
@@ -118,6 +122,7 @@ export const BoemlyFormControl: React.FC<BoemlyFormControlProps> = ({
             bgColor="white"
             {...{ isDisabled, isInvalid, ...selectProps }}
             options={selectOptions}
+            dropdownWidth={dropdownWidth}
           />
         );
       case 'Checkbox':

diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
@@ -44,6 +44,7 @@ export interface BoemlySelectProps extends Omit<SelectProps, 'onChange' | 'value
   selectAllText?: string;
   value?: string[];
   size?: 'xs' | 'sm' | 'md' | 'lg';
+  dropdownWidth?: 'xs' | 'sm' | 'md' | 'lg';
   variant?: 'filled' | 'unstyled' | 'flushed' | 'outline';
   onChange?: (value: string[]) => void;
   onClose?: () => void;
@@ -64,6 +65,7 @@ export const BoemlySelect: React.FC<BoemlySelectProps> = ({
   preventDeselection = false,
   selectAllText = 'Select All',
   size = 'md',
+  dropdownWidth,
   variant = 'outline',
   borderColor = CustomizedSelect.variants[variant].borderColor,
   backgroundColor = CustomizedSelect.variants[variant].backgroundColor,
@@ -259,6 +261,7 @@ export const BoemlySelect: React.FC<BoemlySelectProps> = ({
               maxHeight={dynamicMaxHeight}
               overflowY="auto"
               zIndex="popover"
+              width={dropdownWidth}
             >
               {isSearchable && (
                 <InputGroup mb="4">