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

package/package.json

@@ -1,18 +1,43 @@
 {
   "name": "uiconfig-blueprint",
   "name:umd": "bpui",
-  "version": "0.1.0-dev.1",
+  "version": "0.1.0-dev.11",
   "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"
+    },
+    "./lib/esm": {
+      "types": "./dist/index.d.ts",
+      "import": "./lib/esm/index.js",
+      "require": "./dist/index.js"
+    },
+    "./lib/esm/*": {
+      "types": "./lib/esm/*.d.ts",
+      "import": "./lib/esm/*.js"
+    },
+    "./lib/css/*": {
+      "import": "./lib/css/*.css",
+      "require": "./lib/css/*.css"
+    },
+    "./package.json": "./package.json"
+  },
   "files": [
     "lib",
     "dist",
     "src",
     "docs",
-    "tsconfig.json"
+    "tsconfig.json",
+    "README.md"
   ],
   "repository": {
     "type": "git",
@@ -35,22 +60,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 +114,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}
+                        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,
         });
@@ -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

@@ -59,8 +59,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 +78,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>
         )
     }

package/src/bpComponents/BPFileComponent.tsx

@@ -7,50 +7,57 @@ type StateValue = string | File | null
 type FileImportType = any
 export type BPFileComponentState = BPValueComponentState<StateValue> & {
     mode: 'url'|'file',
+    preview?: string,
 }
 
 type BPFileComponentExtras = {fileLoader?: {load: (v: string|File|{path: string, file: File|Blob})=>Promise<FileImportType>}}
 type BPFileComponentContextType = UiConfigRendererContextType & BPFileComponentExtras
 
-export class BPFileComponent extends BPValueComponent<FileImportType | null, BPFileComponentState, StateValue> {
+// todo make this abstract?
+// @ts-ignore
+export class BPFileComponent<T extends FileImportType=FileImportType, TP = {}> extends BPValueComponent<T | null, BPFileComponentState, StateValue> {
     declare context: BPFileComponentContextType
-    declare props: BPComponentProps<FileImportType | null> & BPFileComponentExtras
-    constructor(props: BPComponentProps<FileImportType | null> & BPFileComponentExtras, context: BPFileComponentContextType) {
+    declare props: BPComponentProps<T | null> & BPFileComponentExtras & TP
+    constructor(props: BPComponentProps<T | null> & BPFileComponentExtras & TP, context: BPFileComponentContextType) {
         super(props, context, {
-            mode: 'file',
+            mode: 'url',
             value: null,
             label: 'File'
         });
         if(!context.fileLoader && !props.fileLoader) throw new Error('BPFileComponent requires fileLoader to be available in context')
     }
 
-    convertValueToState(val: FileImportType | null, state: BPFileComponentState): BPFileComponentState {
-        let mode: BPFileComponentState['mode'] = state.mode
-        let value = state.value
-        if (val) { // todo: move to subclass in threepipe
-            if (val.userData) {
-                if (val.userData.__sourceBlob) {
-                    value = val.userData.__sourceBlob
-                    mode = 'file'
-                } else if (val.userData.rootPath?.length) {
-                    value = val.userData.rootPath
-                    mode = 'url'
-                }
-            }
-        }
-        return {...state, mode, value}
+    // reimplemented in subclass
+    convertValueToState(_val: T | null, _state: BPFileComponentState): BPFileComponentState {
+        throw new Error('Not Implemented')
+        // let mode: BPFileComponentState['mode'] = state.mode
+        // let value = state.value
+        // if (val) {
+        //     if (val.userData) {
+        //         if (val.userData.__sourceBlob) {
+        //             value = val.userData.__sourceBlob
+        //             mode = 'file'
+        //         } else if (val.userData.rootPath?.length) {
+        //             value = val.userData.rootPath
+        //             mode = 'url'
+        //         }
+        //     }
+        // }
+        // return {...state, mode, value}
     }
 
-    async convertStateToValue(state: BPFileComponentState): Promise<FileImportType|null> {
+    async convertStateToValue(state: BPFileComponentState): Promise<T|null> {
         const value = state.value
         let val: any
+        const last = this.context.methods.getRawValue(this.props.config as any) ?? null
+        const lastState = this.convertValueToState(last as any, {...this.state, value: null})
         if (value === null) {
             val = null
         } else if (typeof value === 'string') {
-            val = await (this.context.fileLoader ?? this.props.fileLoader)!.load(value);
+            val = value === lastState.value ? last : await (this.context.fileLoader ?? this.props.fileLoader)!.load(value);
         } else {
             // todo handle blob with no name
-            val = await (this.context.fileLoader ?? this.props.fileLoader)!.load({path: value.name || 'file', file: value});
+            val = value === lastState.value ? last : await (this.context.fileLoader ?? this.props.fileLoader)!.load({path: value.name || 'file', file: value});
         }
         // console.log(val)
         return val;
@@ -60,12 +67,33 @@ export class BPFileComponent extends BPValueComponent<FileImportType | null, BPF
     //     return super.doesNeedRefresh(state);
     // }
 
+    renderPreviewSlot() {
+        return <img src={"https://threepipe.org/logo.svg"}
+                    style={{width: "100%", maxHeight: "80px", objectFit: "contain"}}/>
+    }
+
+    // async updateStateValue(state: BPFileComponentState, last?: boolean): Promise<void> {
+    //     if(state.value !== this.state.value && state.preview) delete state.preview
+    //     return super.updateStateValue(state, last);
+    // }
+
+    protected flexBasis = "100%"
+
     render() {
-        return !this.state.hidden ? (
-            <FormGroupComponent label={this.state.label} flexBasis={"100%"} disabled={this.state.disabled}>
-                <FileComponent state={this.state} onChange={(s) => {
-                    this.updateStateValue({...this.state, ...s}); // todo: set loading while this promise is happening.
-                }} key={this.props.config.uuid}/>
+        let show = !this.state.hidden
+        // todo - document hideOnEmpty. it hides the whole component if there is no value and no preview. (used in SSReflectionPlugin)
+        if (show && this.props.config.hideOnEmpty && !this.state.preview && !this.state.value) {
+            show = false
+        }
+        return show ? (
+            <FormGroupComponent
+                label={this.state.label}
+                disabled={this.state.disabled}
+                flexBasis={this.state.baseWidth ?? this.flexBasis}
+            >
+                <FileComponent previewSlot={this.renderPreviewSlot()} state={this.state} onChange={(s) =>
+                    this.updateStateValue({...this.state, preview: undefined, ...s}) // todo: set loading while this promise is happening.
+                } key={this.props.config.uuid}/>
             </FormGroupComponent>
         ) : null
     }

package/src/bpComponents/BPFolderComponent.scss

@@ -29,7 +29,7 @@
   background-color: $light-gray4 !important;
 }
 .bp5-dark .folder-card {
-  background-color: $dark-gray3 !important;
+  background-color: $dark-gray1 !important;
 }
 
 
@@ -58,16 +58,25 @@
   &:active {
     background-color: $gray4 !important;
   }
+
+  .bp5-button-text {
+    text-align: left;
+    flex: 1 1 auto;
+  }
 }
 .bp5-dark .folder-trigger-button {
   background-color: $dark-gray1 !important;
 
   &:hover {
-      background-color: $dark-gray3 !important;
+      background-color: $dark-gray2 !important;
   }
 
   &:active {
-      background-color: $dark-gray5 !important;
+      background-color: $dark-gray2 !important;
+  }
+
+  &.folder-trigger-button-expanded{
+    background-color: $dark-gray2 !important;
   }
 }
 
@@ -83,7 +92,12 @@
   flex-direction: row;
 
   > .folder-trigger-button {
-    margin-right: $pt-grid-size;
+    //margin-right: $pt-grid-size;
+    margin-right: 6px;
+    //margin-left: $pt-grid-size;
+    padding-top: 6px;
+    padding-bottom: 6px;
+    min-height: 36px;
   }
 }
 
@@ -92,7 +106,7 @@
   align-items: center;
   justify-content: space-between;
   flex-direction: row;
-  box-shadow: 0 1px $pt-divider-black;
+  //box-shadow: 0 1px $pt-divider-black;
   //z-index: 1;
 
   > button {
@@ -100,7 +114,7 @@
   }
 
   .bp5-dark & {
-    box-shadow: 0 1px $pt-dark-divider-white;
+    //box-shadow: 0 1px $pt-dark-divider-white;
     //background-color: $dark-gray1;
   }
 }