uiconfig-blueprint 0.1.0-dev.1 → 0.1.0-dev.12

package/lib/esm/utils.d.ts

@@ -0,0 +1 @@
+export declare function cleanLabel(varName?: string): string | undefined;

package/lib/esm/utils.js

@@ -0,0 +1,19 @@
+export function cleanLabel(varName) {
+    if (!varName || typeof varName !== 'string') {
+        return varName;
+    }
+    let result = varName.trim();
+    if (!result)
+        return '';
+    if (result.includes(' '))
+        return result;
+    result = result.replace(/_/g, ' ');
+    result = result.replace(/([A-Z])([A-Z][a-z])/g, '$1 $2');
+    result = result.replace(/([a-z])([A-Z])/g, '$1 $2');
+    result = result.replace(/([a-zA-Z])(\d)/g, '$1 $2');
+    result = result.replace(/(\d)([a-zA-Z])/g, '$1 $2');
+    const words = result.split(/\s+/).filter(word => word.length > 0);
+    const capitalizedWords = words.map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase());
+    return capitalizedWords.join(' ');
+}
+//# sourceMappingURL=utils.js.map

package/lib/esm/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/utils.ts"],"names":[],"mappings":"AAEA,MAAM,UAAU,UAAU,CAAC,OAAgB;IACvC,IAAI,CAAC,OAAO,IAAI,OAAO,OAAO,KAAK,QAAQ,EAAE,CAAC;QAC1C,OAAO,OAAO,CAAC;IACnB,CAAC;IAED,IAAI,MAAM,GAAG,OAAO,CAAC,IAAI,EAAE,CAAC;IAC5B,IAAI,CAAC,MAAM;QAAE,OAAO,EAAE,CAAC;IACvB,IAAG,MAAM,CAAC,QAAQ,CAAC,GAAG,CAAC;QAAE,OAAO,MAAM,CAAC;IAEvC,MAAM,GAAG,MAAM,CAAC,OAAO,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;IAInC,MAAM,GAAG,MAAM,CAAC,OAAO,CAAC,sBAAsB,EAAE,OAAO,CAAC,CAAC;IAEzD,MAAM,GAAG,MAAM,CAAC,OAAO,CAAC,iBAAiB,EAAE,OAAO,CAAC,CAAC;IAGpD,MAAM,GAAG,MAAM,CAAC,OAAO,CAAC,iBAAiB,EAAE,OAAO,CAAC,CAAC;IAGpD,MAAM,GAAG,MAAM,CAAC,OAAO,CAAC,iBAAiB,EAAE,OAAO,CAAC,CAAC;IAGpD,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;IAClE,MAAM,gBAAgB,GAAG,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CACtC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAC7D,CAAC;IAGF,OAAO,gBAAgB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AACtC,CAAC"}

package/package.json

@@ -1,18 +1,50 @@
 {
   "name": "uiconfig-blueprint",
   "name:umd": "bpui",
-  "version": "0.1.0-dev.1",
+  "version": "0.1.0-dev.12",
   "description": "Blueprint.js wrapper and custom components for web controls UI. To be used with uiconfig.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
+  "browser": "dist/index.js",
+  "types": "dist/index.d.ts",
   "source": "src/index.ts",
   "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js",
+      "browser": "./dist/index.js"
+    },
+    "./dist/": {
+      "import": "./dist/",
+      "require": "./dist/"
+    },
+    "./lib/esm": {
+      "types": "./lib/esm/index.d.ts",
+      "import": "./lib/esm/index.js"
+    },
+    "./lib/esm/*": {
+      "types": "./lib/esm/*.d.ts",
+      "import": "./lib/esm/*.js"
+    },
+    "./lib/css/*": {
+      "import": "./lib/css/*.css",
+      "require": "./lib/css/*.css"
+    },
+    "./src/": {
+      "import": "./src/",
+      "require": "./src/"
+    },
+    "./package.json": "./package.json"
+  },
   "files": [
     "lib",
     "dist",
     "src",
     "docs",
-    "tsconfig.json"
+    "tsconfig.json",
+    "README.md"
   ],
   "repository": {
     "type": "git",
@@ -35,22 +67,48 @@
   },
   "homepage": "https://github.com/repalash/uiconfig-blueprint#readme",
   "dependencies": {
-    "@blueprintjs/core": "^5.7.2",
+    "ts-browser-helpers": "^0.18.0",
+    "uiconfig.js": "^0.1.6",
+    "@blueprintjs/icons": "^5.11.0",
+    "@blueprintjs/select": "^5.2.2",
+    "blueprint-styler": "^5.0.2",
+    "react-colorful": "^5.6.1"
+  },
+  "peerDependencies": {
+    "@blueprintjs/core": "^5.11.0",
     "@types/three": "^0.152.1",
-    "ts-browser-helpers": "^0.8.0",
     "@types/webxr": "^0.5.10",
-    "uiconfig.js": "^0.0.9",
-    "@blueprintjs/icons": "^5.5.0",
-    "@blueprintjs/select": "^5.0.20",
-    "blueprint-styler": "^5.0.2",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
+  "peerDependenciesMeta": {
+    "@blueprintjs/core": {
+      "optional": true
+    },
+    "@types/three": {
+      "optional": true
+    },
+    "@types/webxr": {
+      "optional": true
+    },
+    "@types/react": {
+      "optional": true
+    },
+    "@types/react-dom": {
+      "optional": true
+    },
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    }
+  },
   "//": {
-    "dependencies": {
-      "uiconfig.js": "^0.0.9"
+    "devDependencies": {
+      "uiconfig.js": "^0.0.12"
     },
     "local_dependencies": {
       "uiconfig.js": "file:./../uiconfig/"
@@ -63,7 +121,5 @@
   "browserslist": [
     "defaults"
   ],
-  "type": "module",
-  "browser": "dist/index.js",
-  "types": "dist/index.d.ts"
+  "type": "module"
 }

package/src/ConfigObject.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import {Class, PartialRecord} from "ts-browser-helpers";
+import {Class, getOrCall, PartialRecord} from "ts-browser-helpers";
 import {BPComponentProps, BPComponentState, UiConfigRendererContext} from "./bpComponents/BPComponent";
 import {BPFolderComponent, FolderHeadCard} from "./bpComponents/BPFolderComponent";
 import {BPTextInputComponent} from "./bpComponents/BPTextInputComponent";
@@ -13,7 +13,6 @@ import {BPPanelComponent} from "./bpComponents/BPPanelComponent";
 import {BPTreeFolderComponent} from "./bpComponents/BPTreeFolderComponent";
 import {UiObjectConfig} from 'uiconfig.js'
 import {BPColorInputComponent} from './bpComponents/BPColorInputComponent'
-import {BPFileComponent} from "./bpComponents/BPFileComponent";
 import {BPVectorInputComponent} from './bpComponents/BPVectorInputComponent'
 // import {BPVectorInputComponent} from "./bpComponents/BPVectorInputComponent";
 // import {BPFileComponent} from "./bpComponents/BPFileComponent";
@@ -21,13 +20,14 @@ import {BPVectorInputComponent} from './bpComponents/BPVectorInputComponent'
 // import {BPHierarchyComponent} from "./bpComponents/BPHierarchyComponent";
 
 export type UiConfigTypes = 'input' | 'button' | 'folder' | 'checkbox' | 'toggle' |
-    'dropdown' | 'slider' | 'color' | 'image' | 'number' | 'panel' | 'tree' | 'hierarchy' |
-    'vec' | 'vec2' | 'vec3' | 'vec4' | 'monitor'
+    'dropdown' | 'slider' | 'color' | 'image' | 'number' | 'panel' | 'tree' | 'hierarchy' | 'materials' | 'textures' |
+    'vec' | 'vec2' | 'vec3' | 'vec4' | 'monitor' | 'vector'
 
 export interface ConfigProps extends PanelActions {
     config: UiObjectConfig;
     isPanel?: boolean,
     level?: number,
+    className?: string
 }
 
 export const ConfigObjectGenerators: PartialRecord<UiConfigTypes, Class<React.Component<BPComponentProps<any>, BPComponentState>>> = {
@@ -44,11 +44,12 @@ export const ConfigObjectGenerators: PartialRecord<UiConfigTypes, Class<React.Co
     slider: BPSliderInputComponent,
     tree: BPTreeFolderComponent,
     color: BPColorInputComponent,
-    image: BPFileComponent,
+    // image: BPFileComponent,
     vec: BPVectorInputComponent,
     vec2: BPVectorInputComponent,
     vec3: BPVectorInputComponent,
     vec4: BPVectorInputComponent,
+    vector: BPVectorInputComponent,
     // hierarchy: BPHierarchyComponent,
 }
 
@@ -58,10 +59,14 @@ export class ConfigObject extends React.Component<ConfigProps, {}> {
     state = {}
 
     render() {
+        if (!this.props.config || !this.props.config.type) return (<div key={this.props.config.uuid} className={this.props.className}></div>)
         this.context.methods.initUiConfig(this.props.config)
-        if (!this.props.config.type) return (<div key={this.props.config.uuid}></div>)
+
+        const order = this.props.config.order ? getOrCall(this.props.config.order, this.props.config) ?? undefined : undefined
+        const orderStyle = {order: order && typeof order === 'string' ? parseInt(order): order}
+
         let type = this.props.config.type as any as UiConfigTypes
-        const val = this.context.methods.getValue(this.props.config)
+        const val = this.context.methods.getRawValue(this.props.config)
 
         // hacks
         if (type === 'input' && typeof val === 'number') this.props.config.type = type = 'number'
@@ -75,9 +80,15 @@ export class ConfigObject extends React.Component<ConfigProps, {}> {
         let BPComp = ConfigObjectGenerators[type]
         if (type === 'panel' && !this.props.isPanel) {
             const label = this.context.methods.getLabel(this.props.config)
+            const children = this.context.methods.getChildren(this.props.config)
+            const enabledToggle = children[0] && this.context.methods.getLabel(children[0]).toLowerCase() === 'enabled' ? children[0] : undefined
+            enabledToggle && (enabledToggle.hidden = true)
             return (
-                <div key={this.props.config.uuid}>
-                    <FolderHeadCard label={label} minimal={false} open={false} onClick={() => {
+                <div key={this.props.config.uuid} style={orderStyle} className={this.props.className}>
+                    <FolderHeadCard
+                        enabled={enabledToggle ? this.context.methods.getRawValue(enabledToggle) : undefined}
+                        onEnabledChange={(e) => enabledToggle && this.context.methods.setValue(enabledToggle, e.target.checked, {}).then(() => this.setState(this.state))}
+                        level={0} label={label} minimal={false} open={false} onClick={() => {
                         this.props.openPanel<{ config: UiObjectConfig<any> }>({
                             props: {config: this.props.config},
                             title: label,
@@ -92,9 +103,12 @@ export class ConfigObject extends React.Component<ConfigProps, {}> {
             )
         }
         if (BPComp) {
-            return (<div key={this.props.config.uuid}><BPComp {...{...this.props, isPanel: undefined}} /></div>)
+            return (<div key={this.props.config.uuid} style={orderStyle} className={this.props.className}><BPComp {...{...this.props, isPanel: undefined}} /></div>)
         }
-        return (<div key={this.props.config.uuid}>Unknown type: {this.props.config.type}</div>)
+        return (<div key={this.props.config.uuid} style={orderStyle} className={this.props.className}>
+            {/*Unknown type: {this.props.config.type}*/}
+        </div>)
+        // return null
 
         // let uiRef: React.FC | BPUiRef<any> | null = this.props.uiConfig.uiRef
         // if (uiRef) {

package/src/UiConfigRendererBlueprint.tsx

@@ -1,5 +1,5 @@
-import {createDiv, createStyles, css} from "ts-browser-helpers";
-import {UiConfigRendererBase, UiObjectConfig} from "uiconfig.js";
+import {createDiv, createStyles, css, JSUndoManager} from "ts-browser-helpers";
+import {UiConfigRenderer, UiObjectConfig} from "uiconfig.js";
 import React from 'react'
 import {createRoot, Root} from 'react-dom/client'
 import {ConfigurationPanelComponent} from './components/ConfigurationPanelComponent'
@@ -9,32 +9,43 @@ import rendererCss from './renderer.scss?inline' // for rollup build remove ?inl
 import {FocusStyleManager} from '@blueprintjs/core'
 import {THREE} from "./threejs";
 
-export class UiConfigRendererBlueprint extends UiConfigRendererBase<Root> {
-
-    constructor(container: HTMLElement = document.body, {autoPostFrame = true} = {}) {
-        super(container, autoPostFrame);
+export class UiConfigRendererBlueprint extends UiConfigRenderer {
+    constructor(container: HTMLElement = document.body, {autoPostFrame = true} = {}, undoManager?: JSUndoManager|false) {
+        super(container, autoPostFrame, undefined, undoManager);
         // this._root.expanded = expanded
-
     }
 
+    protected _root: Root
+
     protected _createUiContainer(): HTMLDivElement {
         FocusStyleManager.onlyShowFocusOnTabs();
 
         const container = createDiv({id: 'blueprintUiContainer', addToBody: false})
         createStyles(css`
-          :root{
-            --blueprint-ui-container-width: 300px;
-          }
-          @media only screen and (min-width: 1500px) {
-            :root{
-              --blueprint-ui-container-width: 400px;
+            :root {
+                --blueprint-ui-container-width: 300px;
             }
-          }
-          @media only screen and (min-width: 2500px) {
-            :root{
-              --blueprint-ui-container-width: 500px;
+
+            @media only screen and (min-width: 1500px) {
+                :root {
+                    --blueprint-ui-container-width: 400px;
+                }
+            }
+            @media only screen and (min-width: 2500px) {
+                :root {
+                    --blueprint-ui-container-width: 500px;
+                }
+            }
+
+            @media only screen and (min-width: 600px) {
+                #blueprintUiContainer {
+                    min-width: var(--blueprint-ui-container-width);
+                    min-height: 200px;
+                    max-height: 100%;
+                    max-width: 100%;
+                    resize: both;
+                }
             }
-          }
         `)
         createStyles(rendererCss)
 
@@ -65,8 +76,8 @@ export class UiConfigRendererBlueprint extends UiConfigRendererBase<Root> {
     // eslint-disable-next-line @typescript-eslint/naming-convention
     THREE: THREE|undefined = (window as any).THREE
 
-    dispose() {
-        // todo
+    unmount() {
+        this._root?.unmount()
     }
 
 }

package/src/bpComponents/BPButtonComponent.scss

@@ -2,8 +2,12 @@
 .bpButtonComponent {
   //width: 100%;
   display: flex;
+  flex: 1 1;
   justify-content: center;
-  flex-basis: 50%;
+  //min-width: 50%;
   margin: 2px 0;
   width: max-content;
+
+  height: auto;
+  align-self: stretch;
 }

package/src/bpComponents/BPButtonComponent.tsx

@@ -1,8 +1,9 @@
 import {BPComponentProps, UiConfigRendererContextType} from "./BPComponent";
 import React from "react";
 import {BPLabelledComponent, BPLabelledComponentState} from "./BPLabelledComponent";
-import {Button} from "@blueprintjs/core";
+import {Button, Intent} from "@blueprintjs/core";
 
+// @ts-ignore
 export class BPButtonComponent extends BPLabelledComponent<()=>void, BPLabelledComponentState> {
     constructor(props: BPComponentProps<()=>void>, context: UiConfigRendererContextType) {
         super(props, context, {label: 'Button'});
@@ -13,12 +14,18 @@ export class BPButtonComponent extends BPLabelledComponent<()=>void, BPLabelledC
         this.context.methods.clickButton(this.props.config, {args: [event]})
     }
 
+    protected flexBasis = "50%"
+
     render() {
         return !this.state.hidden ? (
-            <div className="bpButtonComponent xPaddedContent">
+            <div className="bpButtonComponent xPaddedContent"
+                 style={{flexBasis: this.state.baseWidth ?? this.flexBasis}}
+            >
                 <Button className="bpButton"
-                        disabled={this.state.disabled}
+                        disabled={this.state.disabled || this.state.readOnly}
+                        intent={Intent.PRIMARY}
                         // small={true}
+                        fill={true}
                         text={this.state.label} style={{}} onClick={this.onClick}/>
             </div>
         ) : null

package/src/bpComponents/BPColorInputComponent.tsx

@@ -20,7 +20,7 @@ export class BPColorInputComponent extends BPValueComponent<ColorRepresentation,
     constructor(props: BPComponentProps<ColorRepresentation>, context: UiConfigRendererContextType) {
         super(props, context, {
             label: 'Color',
-            value: "#000000",
+            value: '#000000',
             mode: 'number',
             srgbConvert: false,
         });
@@ -39,7 +39,7 @@ export class BPColorInputComponent extends BPValueComponent<ColorRepresentation,
         else console.error('not supported color', val)
         this._tempColor.set(val)
         if (srgbConvert) this._tempColor.convertLinearToSRGB()
-        const value = '#' + this._tempColor.getHexString()
+        const value = '#' + this._tempColor.getHexString().toUpperCase()
         // console.log('color', mode, value, val)
         return {...state, mode, value, lastValue: val, srgbConvert} // default config.srgb = false
     }
@@ -95,11 +95,17 @@ export class BPColorInputComponent extends BPValueComponent<ColorRepresentation,
         document.addEventListener('mouseup', this._mouseUp)
     }
 
+    protected flexBasis = "100%"
+
     render() {
         return !this.state.hidden ? (
-            <FormGroupComponent label={this.state.label}>
+            <FormGroupComponent
+                label={this.state.label}
+                flexBasis={this.state.baseWidth ?? this.flexBasis}
+            >
                 <InputGroup inputRef={this._inputRef}
                             disabled={this.state.disabled} readOnly={this.state.readOnly}
+                            fill={true}
                             leftElement={(
                     <Popover
                         popoverClassName={'color-picker-popover'}

package/src/bpComponents/BPComponent.tsx

@@ -12,6 +12,7 @@ export type BPComponentState = {
     hidden?: boolean
     disabled?: boolean
     readOnly?: boolean // same as disabled(for most inputs)
+    baseWidth?: string // for flexBasis, can be a number or a string like '50%' or '100px'
 }
 export interface UiConfigRendererBaseBp extends UiConfigRendererBase{
     // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -20,7 +21,7 @@ export interface UiConfigRendererBaseBp extends UiConfigRendererBase{
 
 export const UiConfigRendererContext = createContext<UiConfigRendererBaseBp>(null as any)
 export type UiConfigRendererContextType = React.ContextType<typeof UiConfigRendererContext>
-export abstract class BPComponent<TValue, TState, TProps extends BPComponentProps<TValue> = BPComponentProps<TValue>> extends React.Component<TProps, TState> {
+export abstract class BPComponent<TValue, TState extends BPComponentState, TProps extends BPComponentProps<TValue> = BPComponentProps<TValue>> extends React.Component<TProps, TState> {
     static contextType = UiConfigRendererContext
     declare context: UiConfigRendererContextType
 
@@ -28,6 +29,7 @@ export abstract class BPComponent<TValue, TState, TProps extends BPComponentProp
         super(props, context);
         this.state = this.getUpdatedState(state)
         // this.state = state
+        this.setState = this.setState.bind(this)
     }
 
     /**
@@ -38,16 +40,27 @@ export abstract class BPComponent<TValue, TState, TProps extends BPComponentProp
         return new Promise<void>(resolve => this.setState(state, resolve))
     }
 
+    keyVersion = 0
+
     /**
      * This is called to get the updated state from the config, copy any values/properties from the config to the state here
      * @param state - the current state
      */
     getUpdatedState(state: TState): TState{
+        const hidden = getOrCall(this.props.config.hidden) ?? false
+        const disabled = getOrCall(this.props.config.disabled) ?? false
+        const readOnly = getOrCall(this.props.config.readOnly) ?? false
+        const baseWidth = getOrCall(this.props.config.baseWidth) ?? undefined
+        if(hidden !== state.hidden
+            || disabled !== state.disabled
+            || readOnly !== state.readOnly
+        ) this.keyVersion++
         return {
             ...state,
-            hidden: getOrCall(this.props.config.hidden) ?? false,
-            disabled: getOrCall(this.props.config.disabled) ?? false,
-            readOnly: getOrCall(this.props.config.readOnly) ?? false,
+            hidden,
+            disabled,
+            readOnly,
+            baseWidth
         }
     }
 

package/src/bpComponents/BPContainerComponent.tsx

@@ -16,6 +16,7 @@ export class BPContainerComponent<TState extends BPContainerComponentState=BPCon
     }
 
     protected _registerChild(child: UiObjectConfig) {
+        // if(Object.keys(child).length)
         child.parentOnChange = this._childParentOnChange
         if(child.property === undefined &&
             child.value === undefined &&
@@ -28,7 +29,7 @@ export class BPContainerComponent<TState extends BPContainerComponentState=BPCon
 
     protected _unregisterChild(child: UiObjectConfig) {
         if (child.parentOnChange !== this._childParentOnChange)
-            child.parentOnChange = undefined
+            delete child.parentOnChange
         if(Array.isArray(child.property) &&
             (child.property === this.props.config.property ||
                 (child.property[0] === this.props.config &&
@@ -44,6 +45,17 @@ export class BPContainerComponent<TState extends BPContainerComponentState=BPCon
     getUpdatedState(state: TState) {
         const oldChildren = state.children
         const newChildren = this.context.methods.getChildren(this.props.config)
+            .flatMap(c=>{
+                if(c.type === 'folder' &&
+                    c.unwrapContents === true
+                ){
+                    const children2 = this.context.methods.getChildren(c)
+                    const enabledToggle = children2[0] && this.context.methods.getBinding(children2[0])[1] === 'enabled' ? children2[0] : undefined
+                    enabledToggle && (enabledToggle.hidden = true)
+                    return children2
+                }
+                return c
+            })
         const removed = oldChildren.filter(c => !newChildren.includes(c))
         const added = newChildren.filter(c => !oldChildren.includes(c))
         // console.warn(this, this._registerChild, this._childParentOnChange, added, removed)

package/src/bpComponents/BPDropdownInputComponent.tsx

@@ -3,6 +3,7 @@ import {Button, MenuItem} from "@blueprintjs/core";
 import {BPInputComponent} from "./BPInputComponent";
 import {BPValueComponentState} from "./BPValueComponent";
 import {ItemRenderer, Select} from "@blueprintjs/select";
+import {cleanLabel} from "../utils";
 
 export interface DropdownItem{
     label: string,
@@ -40,8 +41,8 @@ export class BPDropdownInputComponent extends BPInputComponent<string|number, BP
 
     getUpdatedState(state: BPDropdownComponentState): BPDropdownComponentState {
         const children = this.context.methods.getChildren(this.props.config)
-        const options: DropdownItem[] = children.map(value => {
-            const label = this.context.methods.getLabel(value)
+        const options: DropdownItem[] = children.map((value, i) => {
+            const label = cleanLabel(this.context.methods.getLabel(value)) || `Option ${i}`
             return {label, value: value!.value ?? label}
         })
 
@@ -59,8 +60,14 @@ export class BPDropdownInputComponent extends BPInputComponent<string|number, BP
                 activeItem={item}
                 key={this.props.config.uuid}
                 disabled={this.state.disabled}
+                fill={true}
                 popoverProps={{
-                    minimal: true
+                    minimal: true,
+                }}
+                popoverTargetProps={{
+                    style: {
+                        height: "var(--pt-input-height)",
+                    }
                 }}
                 noResults={<MenuItem disabled={true} text="No results."  roleStructure="listoption" />}
                 items={this.state.options}
@@ -72,7 +79,7 @@ export class BPDropdownInputComponent extends BPInputComponent<string|number, BP
             >
                 {/* children become the popover target; render value here */}
                 <Button rightIcon="double-caret-vertical" small={true}
-                        style={{whiteSpace: 'nowrap', textOverflow: "ellipsis"}}>{item.label}</Button>
+                        style={{whiteSpace: 'nowrap', textOverflow: "ellipsis", height: "100%"}}>{item.label}</Button>
             </Select>
         )
     }