uiconfig-blueprint 0.1.0-dev.13 → 0.1.0-dev.15

package/lib/esm/utils/pointerLock.d.ts

@@ -0,0 +1,44 @@
+declare class FakeCursor {
+    private element;
+    private x;
+    private y;
+    private visible;
+    private originalCursor;
+    constructor();
+    private createCursorElement;
+    show(useFallback: boolean): void;
+    hide(useFallback: boolean): void;
+    setPosition(x: number, y: number): void;
+    getPosition(): {
+        x: number;
+        y: number;
+    };
+    isVisible(): boolean;
+    destroy(): void;
+}
+export declare function getFakeCursor(): FakeCursor;
+export declare function destroyFakeCursor(): void;
+export interface PointerLockOptions {
+    onMove: (movementX: number, movementY: number, cursorX: number, cursorY: number) => void;
+    onLockChange?: (locked: boolean) => void;
+}
+export declare class PointerLockManager {
+    private element;
+    private fakeCursor;
+    private options;
+    private isLocked;
+    private cursorX;
+    private cursorY;
+    private useFallback;
+    private lastMouseX;
+    private lastMouseY;
+    constructor(element: HTMLElement, options: PointerLockOptions);
+    requestLock(initialX: number, initialY: number): void;
+    releaseLock(): void;
+    private cleanup;
+    private handlePointerLockChange;
+    private handleFallbackMouseMove;
+    private handleMouseMove;
+    isPointerLocked(): boolean;
+}
+export {};

package/lib/esm/utils/pointerLock.js

@@ -0,0 +1,215 @@
+class FakeCursor {
+    constructor() {
+        this.element = null;
+        this.x = 0;
+        this.y = 0;
+        this.visible = false;
+        this.originalCursor = '';
+        if (typeof document !== 'undefined') {
+            this.createCursorElement();
+        }
+        else {
+            console.warn('FakeCursor: document is undefined, cannot create cursor element.');
+        }
+    }
+    createCursorElement() {
+        this.element = document.createElement('div');
+        this.element.style.position = 'fixed';
+        this.element.style.width = '16px';
+        this.element.style.height = '16px';
+        this.element.style.transform = 'translate(calc(-50% + 1px), calc(-50% + 1px))';
+        this.element.style.pointerEvents = 'none';
+        this.element.style.zIndex = '999999';
+        this.element.style.display = 'none';
+        this.element.innerHTML = `
+<svg width="16" height="12" viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1_176)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 5.9907V5.9957L5.997 11.9917L5.998 7.9927H7.997H10.017V11.9927L15.997 5.9917L10.017 -0.00730079L10.018 4.0117L7.997 4.0137H5.997L5.998 -0.00830078L0 5.9907ZM1.411 5.9937L4.998 2.4057L4.997 4.9927H8.497H11.018V2.4077L14.583 5.9937L11.019 9.5787L11.018 6.9937H8.497L4.998 6.9927L4.997 9.5787L1.411 5.9937Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.4971 6.9932H11.0181V9.5792L14.5831 5.9932L11.0181 2.4082V5.0132H8.4971H4.9971V2.4062L1.4111 5.9932L4.9971 9.5792V6.9922L8.4971 6.9932Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_1_176">
+<rect width="16" height="12" fill="white"/>
+</clipPath>
+</defs>
+</svg>
+        `;
+        document.body.appendChild(this.element);
+    }
+    show(useFallback) {
+        if (this.element) {
+            this.element.style.display = 'block';
+            this.visible = true;
+            if (useFallback) {
+                this.originalCursor = document.documentElement.style.cursor;
+                document.documentElement.style.cursor = 'ew-resize';
+                this.element.style.opacity = '0';
+                this.element.style.pointerEvents = 'auto';
+            }
+        }
+    }
+    hide(useFallback) {
+        if (this.element) {
+            this.element.style.display = 'none';
+            this.visible = false;
+            if (useFallback && this.originalCursor !== undefined) {
+                document.documentElement.style.cursor = this.originalCursor;
+            }
+            this.element.style.opacity = '1';
+            this.element.style.pointerEvents = 'none';
+        }
+    }
+    setPosition(x, y) {
+        this.x = x;
+        this.y = y;
+        if (this.element) {
+            this.element.style.left = `${x}px`;
+            this.element.style.top = `${y}px`;
+        }
+    }
+    getPosition() {
+        return { x: this.x, y: this.y };
+    }
+    isVisible() {
+        return this.visible;
+    }
+    destroy() {
+        if (this.element && this.element.parentNode) {
+            this.element.parentNode.removeChild(this.element);
+            this.element = null;
+        }
+    }
+}
+let fakeCursorInstance = null;
+export function getFakeCursor() {
+    if (!fakeCursorInstance) {
+        fakeCursorInstance = new FakeCursor();
+    }
+    return fakeCursorInstance;
+}
+export function destroyFakeCursor() {
+    if (fakeCursorInstance) {
+        fakeCursorInstance.destroy();
+        fakeCursorInstance = null;
+    }
+}
+export class PointerLockManager {
+    constructor(element, options) {
+        this.isLocked = false;
+        this.cursorX = 0;
+        this.cursorY = 0;
+        this.useFallback = false;
+        this.lastMouseX = 0;
+        this.lastMouseY = 0;
+        this.element = element;
+        this.options = options;
+        this.fakeCursor = getFakeCursor();
+        this.handleMouseMove = this.handleMouseMove.bind(this);
+        this.handlePointerLockChange = this.handlePointerLockChange.bind(this);
+        this.handleFallbackMouseMove = this.handleFallbackMouseMove.bind(this);
+    }
+    requestLock(initialX, initialY) {
+        this.cursorX = initialX;
+        this.cursorY = initialY;
+        this.lastMouseX = initialX;
+        this.lastMouseY = initialY;
+        this.fakeCursor.setPosition(initialX, initialY);
+        if (isSafari() || !this.element.requestPointerLock) {
+            this.useFallback = true;
+            this.isLocked = true;
+            this.fakeCursor.show(true);
+            document.addEventListener('mousemove', this.handleFallbackMouseMove);
+            if (this.options.onLockChange) {
+                this.options.onLockChange(true);
+            }
+        }
+        else {
+            this.useFallback = false;
+            this.fakeCursor.show(false);
+            this.element.requestPointerLock();
+            document.addEventListener('pointerlockchange', this.handlePointerLockChange);
+            document.addEventListener('mousemove', this.handleMouseMove);
+            setTimeout(() => {
+                if (!this.isLocked && !this.useFallback) {
+                    this.useFallback = true;
+                    this.isLocked = true;
+                    this.fakeCursor.show(true);
+                    document.removeEventListener('mousemove', this.handleMouseMove);
+                    document.removeEventListener('pointerlockchange', this.handlePointerLockChange);
+                    document.addEventListener('mousemove', this.handleFallbackMouseMove);
+                    if (this.options.onLockChange) {
+                        this.options.onLockChange(true);
+                    }
+                }
+            }, 100);
+        }
+    }
+    releaseLock() {
+        if (this.isLocked && !this.useFallback) {
+            document.exitPointerLock();
+        }
+        this.cleanup();
+    }
+    cleanup() {
+        document.removeEventListener('mousemove', this.handleMouseMove);
+        document.removeEventListener('mousemove', this.handleFallbackMouseMove);
+        document.removeEventListener('pointerlockchange', this.handlePointerLockChange);
+        this.fakeCursor.hide(this.useFallback);
+        this.isLocked = false;
+        this.useFallback = false;
+    }
+    handlePointerLockChange() {
+        this.isLocked = document.pointerLockElement === this.element;
+        if (!this.isLocked) {
+            this.cleanup();
+        }
+        if (this.options.onLockChange) {
+            this.options.onLockChange(this.isLocked);
+        }
+    }
+    handleFallbackMouseMove(ev) {
+        if (!this.isLocked || !this.useFallback)
+            return;
+        const movementX = ev.clientX - this.lastMouseX;
+        const movementY = ev.clientY - this.lastMouseY;
+        this.lastMouseX = ev.clientX;
+        this.lastMouseY = ev.clientY;
+        this.cursorX = ev.clientX;
+        this.cursorY = ev.clientY;
+        this.fakeCursor.setPosition(this.cursorX, this.cursorY);
+        this.options.onMove(movementX, movementY, this.cursorX, this.cursorY);
+    }
+    handleMouseMove(ev) {
+        if (!this.isLocked || this.useFallback)
+            return;
+        const movementX = ev.movementX || 0;
+        const movementY = ev.movementY || 0;
+        this.cursorX += movementX;
+        this.cursorY += movementY;
+        const screenWidth = window.innerWidth;
+        const screenHeight = window.innerHeight;
+        if (this.cursorX < 0) {
+            this.cursorX = screenWidth - 1;
+        }
+        else if (this.cursorX >= screenWidth) {
+            this.cursorX = 0;
+        }
+        if (this.cursorY < 0) {
+            this.cursorY = screenHeight - 1;
+        }
+        else if (this.cursorY >= screenHeight) {
+            this.cursorY = 0;
+        }
+        this.fakeCursor.setPosition(this.cursorX, this.cursorY);
+        this.options.onMove(movementX, movementY, this.cursorX, this.cursorY);
+    }
+    isPointerLocked() {
+        return this.isLocked;
+    }
+}
+function isSafari() {
+    if (typeof navigator === 'undefined')
+        return false;
+    return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+}
+//# sourceMappingURL=pointerLock.js.map

package/lib/esm/utils/pointerLock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pointerLock.js","sourceRoot":"","sources":["../../../src/utils/pointerLock.ts"],"names":[],"mappings":"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"}

package/lib/esm/utils.js

@@ -13,7 +13,12 @@ export function cleanLabel(varName) {
     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());
+    const capitalizedWords = words.map(word => {
+        if (word.length >= 2 && word === word.toUpperCase()) {
+            return word;
+        }
+        return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
+    });
     return capitalizedWords.join(' ');
 }
 //# sourceMappingURL=utils.js.map

package/lib/esm/utils.js.map

@@ -1 +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"}
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/utils.ts"],"names":[],"mappings":"AACA,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;QAEtC,IAAI,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,IAAI,KAAK,IAAI,CAAC,WAAW,EAAE,EAAE,CAAC;YAClD,OAAO,IAAI,CAAC;QAChB,CAAC;QAED,OAAO,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;IACtE,CAAC,CAAC,CAAC;IAGH,OAAO,gBAAgB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AACtC,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "uiconfig-blueprint",
   "name:umd": "bpui",
-  "version": "0.1.0-dev.13",
+  "version": "0.1.0-dev.15",
   "description": "Blueprint.js wrapper and custom components for web controls UI. To be used with uiconfig.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -20,6 +20,10 @@
       "import": "./dist/",
       "require": "./dist/"
     },
+    "./lib": {
+      "types": "./lib/esm/lib.d.ts",
+      "import": "./lib/esm/lib.js"
+    },
     "./lib/esm": {
       "types": "./lib/esm/index.d.ts",
       "import": "./lib/esm/index.js"
@@ -67,15 +71,15 @@
   },
   "homepage": "https://github.com/repalash/uiconfig-blueprint#readme",
   "dependencies": {
-    "ts-browser-helpers": "^0.18.0",
-    "uiconfig.js": "^0.1.6",
-    "@blueprintjs/icons": "^5.11.0",
-    "@blueprintjs/select": "^5.2.2",
+    "ts-browser-helpers": "^0.19.4",
+    "uiconfig.js": "^0.3.1",
+    "@blueprintjs/icons": "^5.23.0",
+    "@blueprintjs/select": "^5.3.21",
     "blueprint-styler": "^5.0.2",
     "react-colorful": "^5.6.1"
   },
   "peerDependencies": {
-    "@blueprintjs/core": "^5.11.0",
+    "@blueprintjs/core": "^5.19.1",
     "@types/three": "^0.152.1",
     "@types/webxr": "^0.5.10",
     "@types/react": "^18.0.28",
@@ -107,12 +111,6 @@
     }
   },
   "//": {
-    "devDependencies": {
-      "uiconfig.js": "^0.0.12"
-    },
-    "local_dependencies": {
-      "uiconfig.js": "file:./../uiconfig/"
-    },
     "scripts": {
       "compile:cjs": "tsc -p ./src -m commonjs --verbatimModuleSyntax false --outDir lib/cjs",
       "compile:esnext": "tsc -p ./src -t esnext --outDir lib/esnext"

package/src/ConfigObject.tsx

@@ -10,10 +10,10 @@ import {BPSliderInputComponent} from "./bpComponents/BPSliderInputComponent";
 import {BPDropdownInputComponent} from "./bpComponents/BPDropdownInputComponent";
 import {PanelActions} from "@blueprintjs/core/lib/esm/components/panel-stack2/panelTypes";
 import {BPPanelComponent} from "./bpComponents/BPPanelComponent";
-import {BPTreeFolderComponent} from "./bpComponents/BPTreeFolderComponent";
 import {UiObjectConfig} from 'uiconfig.js'
 import {BPColorInputComponent} from './bpComponents/BPColorInputComponent'
 import {BPVectorInputComponent} from './bpComponents/BPVectorInputComponent'
+import {IconName, MaybeElement} from "@blueprintjs/core";
 // import {BPVectorInputComponent} from "./bpComponents/BPVectorInputComponent";
 // import {BPFileComponent} from "./bpComponents/BPFileComponent";
 // import {BPColorInputComponent} from "./bpComponents/BPColorInputComponent";
@@ -21,13 +21,14 @@ import {BPVectorInputComponent} from './bpComponents/BPVectorInputComponent'
 
 export type UiConfigTypes = 'input' | 'button' | 'folder' | 'checkbox' | 'toggle' |
     'dropdown' | 'slider' | 'color' | 'image' | 'number' | 'panel' | 'tree' | 'hierarchy' | 'materials' | 'textures' |
-    'vec' | 'vec2' | 'vec3' | 'vec4' | 'monitor' | 'vector'
+    'vec' | 'vec2' | 'vec3' | 'vec4' | 'monitor' | 'vector' | 'select' | 'textarea' | 'tabs'
 
 export interface ConfigProps extends PanelActions {
     config: UiObjectConfig;
     isPanel?: boolean,
     level?: number,
     className?: string
+    icon?: IconName|MaybeElement // only for top level folders right now.
 }
 
 export const ConfigObjectGenerators: PartialRecord<UiConfigTypes, Class<React.Component<BPComponentProps<any>, BPComponentState>>> = {
@@ -41,8 +42,8 @@ export const ConfigObjectGenerators: PartialRecord<UiConfigTypes, Class<React.Co
     checkbox: BPToggleInputComponent,
     toggle: BPToggleInputComponent,
     dropdown: BPDropdownInputComponent,
+    select: BPDropdownInputComponent,
     slider: BPSliderInputComponent,
-    tree: BPTreeFolderComponent,
     color: BPColorInputComponent,
     // image: BPFileComponent,
     vec: BPVectorInputComponent,
@@ -51,6 +52,8 @@ export const ConfigObjectGenerators: PartialRecord<UiConfigTypes, Class<React.Co
     vec4: BPVectorInputComponent,
     vector: BPVectorInputComponent,
     // hierarchy: BPHierarchyComponent,
+
+    // todo textarea, textArea, multiline, tabs, tab, other aliases
 }
 
 export class ConfigObject extends React.Component<ConfigProps, {}> {
@@ -61,6 +64,7 @@ export class ConfigObject extends React.Component<ConfigProps, {}> {
     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.dispatchMode) this.props.config.dispatchMode = 'immediate'
 
         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}
@@ -88,7 +92,9 @@ export class ConfigObject extends React.Component<ConfigProps, {}> {
                     <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={() => {
+                        level={0} label={label} minimal={false} open={false}
+                        icon={this.props.icon}
+                        onClick={() => {
                         this.props.openPanel<{ config: UiObjectConfig<any> }>({
                             props: {config: this.props.config},
                             title: label,
@@ -103,7 +109,7 @@ export class ConfigObject extends React.Component<ConfigProps, {}> {
             )
         }
         if (BPComp) {
-            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} style={orderStyle} className={this.props.className}><BPComp {...{...this.props, isPanel: undefined, icon: this.props.icon}} /></div>)
         }
         return (<div key={this.props.config.uuid} style={orderStyle} className={this.props.className}>
             {/*Unknown type: {this.props.config.type}*/}

package/src/UiConfigRendererBlueprint.tsx

@@ -66,7 +66,7 @@ export class UiConfigRendererBlueprint extends UiConfigRenderer {
     }
 
     protected _refreshUiConfigObject(config: UiObjectConfig): void {
-        (config.uiRef as BPComponent<any, any>).refreshConfigState()
+        (config.uiRef as BPComponent<any, any>)?.refreshConfigState()
     }
 
     renderUiConfig(_: UiObjectConfig): void {

package/src/bpComponents/BPButtonComponent.tsx

@@ -24,7 +24,7 @@ export class BPButtonComponent extends BPLabelledComponent<()=>void, BPLabelledC
                 <Button className="bpButton"
                         disabled={this.state.disabled || this.state.readOnly}
                         intent={Intent.PRIMARY}
-                        // small={true}
+                        size={"small"}
                         fill={true}
                         text={this.state.label} style={{}} onClick={this.onClick}/>
             </div>

package/src/bpComponents/BPColorInputComponent.tsx

@@ -1,11 +1,12 @@
 import {createRef} from "react";
 import {BPComponentProps, UiConfigRendererContextType} from "./BPComponent";
-import {Button, Icon, InputGroup, Popover} from "@blueprintjs/core";
+import {Button, Icon, Popover} from "@blueprintjs/core";
 import {BPValueComponent, BPValueComponentState} from "./BPValueComponent";
 import {HexColorPicker} from "react-colorful";
 import {FormGroupComponent} from "../components/FormGroupComponent";
 import {getOrCall} from 'ts-browser-helpers'
 import type {Color, ColorRepresentation} from "three"
+import {InputGroup2} from "../lib";
 
 export type BPColorComponentState = BPValueComponentState<string> & {
     mode: 'number' | 'string' | 'Color', lastValue?: ColorRepresentation,
@@ -89,11 +90,18 @@ export class BPColorInputComponent extends BPValueComponent<ColorRepresentation,
         document.removeEventListener('mouseup', this._mouseMove)
         if (!this._hasMouseUp) return
         this._hasMouseUp = false
-        this.setValue(this._inputRef.current!.value, true)
+        if(this._inputRef.current) {
+            this.setValue(this._inputRef.current.value, true)
+        }
 
         if (this._hasMouseUp) return
         document.addEventListener('mouseup', this._mouseUp)
     }
+    async refreshConfigState(state?: BPColorComponentState): Promise<void> {
+        await super.refreshConfigState(state);
+        if(this._inputRef.current)
+            this._inputRef.current.value = this.state.value
+    }
 
     protected flexBasis = "100%"
 
@@ -103,9 +111,10 @@ export class BPColorInputComponent extends BPValueComponent<ColorRepresentation,
                 label={this.state.label}
                 flexBasis={this.state.baseWidth ?? this.flexBasis}
             >
-                <InputGroup inputRef={this._inputRef}
+                <InputGroup2 inputRef={this._inputRef}
                             disabled={this.state.disabled} readOnly={this.state.readOnly}
                             fill={true}
+                            // leftElementWidth={"calc(3 * var(--pt-grid-size))"}
                             leftElement={(
                     <Popover
                         popoverClassName={'color-picker-popover'}
@@ -130,7 +139,7 @@ export class BPColorInputComponent extends BPValueComponent<ColorRepresentation,
                     <Button
                         disabled={this.state.disabled || this.state.readOnly}
                         icon={<Icon icon="full-circle" color={this.state.value}/>}
-                        text="" minimal
+                        text="" variant={"minimal"}
                     />
                 </Popover>
             )} key={this.props.config.uuid} defaultValue={this.state.value} onChange={(e) => {

package/src/bpComponents/BPComponent.tsx

@@ -1,12 +1,13 @@
 import React, {createContext} from "react";
 import type {UiConfigRendererBase} from 'uiconfig.js'
 import {UiObjectConfig} from 'uiconfig.js'
-import {getOrCall} from 'ts-browser-helpers'
+import {getOrCall, ValOrFunc} from 'ts-browser-helpers'
 import {THREE} from "../threejs";
 
 export type BPComponentProps<T> = {
     config: UiObjectConfig<T>,
     level?: number
+    disabled?: ValOrFunc<boolean> // todo add to uiconfig-react as well
 }
 export type BPComponentState = {
     hidden?: boolean
@@ -47,8 +48,9 @@ export abstract class BPComponent<TValue, TState extends BPComponentState, TProp
      * @param state - the current state
      */
     getUpdatedState(state: TState): TState{
+        // todo use UiConfigMethods.GetBaseProps
         const hidden = getOrCall(this.props.config.hidden) ?? false
-        const disabled = getOrCall(this.props.config.disabled) ?? false
+        const disabled = getOrCall(this.props.disabled ?? 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
@@ -93,7 +95,6 @@ export abstract class BPComponent<TValue, TState extends BPComponentState, TProp
         super.componentDidMount?.();
         this.props.config.uiRef = this
         this.props.config.uiRefresh = (deep = false, mode = 'postFrame', delay = 0) => {
-            // console.log('refresh', this.props.config.label, this.props.config.type)
             this.context.addToRefreshQueue(mode, this.props.config, deep, delay)
         }
         // console.log('mount', this.props.config.label, this.props.config.type, this.props.config)

package/src/bpComponents/BPContainerComponent.tsx

@@ -4,11 +4,22 @@ import {PanelActions} from '@blueprintjs/core/lib/esm/components/panel-stack2/pa
 import {UiObjectConfig} from 'uiconfig.js'
 import {getOrCall} from 'ts-browser-helpers'
 
+declare module '../ConfigObject' {
+    interface ConfigProps {
+        filter?: (child: UiObjectConfig) => boolean
+    }
+}
+
 export type BPContainerComponentState = BPLabelledComponentState & {
     children: UiObjectConfig[]
     expanded: boolean
 }
-export class BPContainerComponent<TState extends BPContainerComponentState=BPContainerComponentState> extends BPLabelledComponent<void, TState, BPComponentProps<void> & PanelActions> {
+
+export type BPContainerComponentProps = {
+    filter?: (child: UiObjectConfig) => boolean
+}
+
+export class BPContainerComponent<TState extends BPContainerComponentState=BPContainerComponentState, TProps extends BPContainerComponentProps=BPContainerComponentProps> extends BPLabelledComponent<void, TState, BPComponentProps<void> & PanelActions & TProps> {
 
     protected _childParentOnChange: UiObjectConfig['parentOnChange'] = (ev, ...args) => {
         // console.warn('child change', ev, this.props.config)
@@ -38,13 +49,13 @@ export class BPContainerComponent<TState extends BPContainerComponentState=BPCon
         ) delete child.property
     }
 
-    constructor(props: BPComponentProps<void> & PanelActions, context: UiConfigRendererContextType, state: TState) {
+    constructor(props: BPComponentProps<void> & PanelActions & TProps, context: UiConfigRendererContextType, state: TState) {
         super(props, context, state);
     }
 
     getUpdatedState(state: TState) {
         const oldChildren = state.children
-        const newChildren = this.context.methods.getChildren(this.props.config)
+        let newChildren = this.context.methods.getChildren(this.props.config)
             .flatMap(c=>{
                 if(c.type === 'folder' &&
                     c.unwrapContents === true
@@ -56,6 +67,12 @@ export class BPContainerComponent<TState extends BPContainerComponentState=BPCon
                 }
                 return c
             })
+
+        // Apply filter if provided
+        if (this.props.filter) {
+            newChildren = newChildren.filter(this.props.filter)
+        }
+
         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

@@ -8,6 +8,7 @@ import {cleanLabel} from "../utils";
 export interface DropdownItem{
     label: string,
     value: string|number,
+    uuid?: string
 }
 
 export type BPDropdownComponentState = BPValueComponentState<string|number> & {
@@ -23,7 +24,7 @@ const renderDropdownItem: ItemRenderer<DropdownItem> = (item, { handleClick, han
             label={''}
             roleStructure="listoption"
             active={modifiers.active}
-            key={item.value}
+            key={item.uuid || (typeof item.value === 'string' ? item.value : item.label)}
             onClick={handleClick}
             onFocus={handleFocus}
         />
@@ -42,8 +43,9 @@ 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, i) => {
-            const label = cleanLabel(this.context.methods.getLabel(value)) || `Option ${i}`
-            return {label, value: value!.value ?? label}
+            let label1 = this.context.methods.getLabel(value)
+            const label = cleanLabel(label1) || `Option ${i}`
+            return {label, value: value!.value ?? label1, uuid: value!.uuid}
         })
 
         // const selected = options.find(o=>o.value===val)||options[0]
@@ -78,7 +80,7 @@ export class BPDropdownInputComponent extends BPInputComponent<string|number, BP
                 itemRenderer={renderDropdownItem}
             >
                 {/* children become the popover target; render value here */}
-                <Button rightIcon="double-caret-vertical" small={true}
+                <Button endIcon="double-caret-vertical" size={"small"}
                         style={{whiteSpace: 'nowrap', textOverflow: "ellipsis", height: "100%"}}>{item.label}</Button>
             </Select>
         )