uiconfig-blueprint 0.1.0-dev.14 → 0.1.0-dev.16

package/package.json

@@ -1,19 +1,24 @@
 {
   "name": "uiconfig-blueprint",
   "name:umd": "bpui",
-  "version": "0.1.0-dev.14",
+  "version": "0.1.0-dev.16",
+  "publishConfig": {
+    "tag": "latest"
+  },
   "description": "Blueprint.js wrapper and custom components for web controls UI. To be used with uiconfig.",
-  "main": "dist/index.js",
+  "main": "dist/index.cjs",
   "module": "dist/index.mjs",
   "browser": "dist/index.js",
   "types": "dist/index.d.ts",
   "source": "src/index.ts",
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.css"
+  ],
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs",
-      "require": "./dist/index.js",
+      "require": "./dist/index.cjs",
       "browser": "./dist/index.js"
     },
     "./dist/": {
@@ -52,31 +57,38 @@
   ],
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/repalash/uiconfig-blueprint.git"
+    "url": "git+https://github.com/repalash/uiconfig.js.git",
+    "directory": "packages/uiconfig-blueprint"
   },
   "keywords": [
-    "javascript",
-    "typescript",
-    "json",
     "ui",
-    "three.js",
-    "html",
+    "gui",
+    "panel",
+    "inspector",
+    "editor",
+    "controls",
     "blueprint",
-    "library"
+    "blueprintjs",
+    "react",
+    "config",
+    "uiconfig",
+    "three.js",
+    "typescript"
   ],
   "author": "repalash <palash@shaders.app>",
-  "license": "Apache-2.0",
+  "license": "MIT",
   "bugs": {
-    "url": "https://github.com/repalash/uiconfig-blueprint/issues"
+    "url": "https://github.com/repalash/uiconfig.js/issues"
   },
-  "homepage": "https://github.com/repalash/uiconfig-blueprint#readme",
+  "homepage": "https://repalash.com/uiconfig.js/",
   "dependencies": {
-    "ts-browser-helpers": "^0.19.4",
-    "uiconfig.js": "^0.3.1",
+    "ts-browser-helpers": ">=0.19.4",
+    "uiconfig.js": "^0.4.1",
     "@blueprintjs/icons": "^5.23.0",
     "@blueprintjs/select": "^5.3.21",
     "blueprint-styler": "^5.0.2",
-    "react-colorful": "^5.6.1"
+    "react-colorful": "^5.6.1",
+    "classnames": "^2.5.1"
   },
   "peerDependencies": {
     "@blueprintjs/core": "^5.19.1",
@@ -88,9 +100,6 @@
     "react-dom": "^18.2.0"
   },
   "peerDependenciesMeta": {
-    "@blueprintjs/core": {
-      "optional": true
-    },
     "@types/three": {
       "optional": true
     },
@@ -102,12 +111,6 @@
     },
     "@types/react-dom": {
       "optional": true
-    },
-    "react": {
-      "optional": true
-    },
-    "react-dom": {
-      "optional": true
     }
   },
   "//": {

package/src/UiConfigRendererBlueprint.tsx

@@ -21,33 +21,36 @@ export class UiConfigRendererBlueprint extends UiConfigRenderer {
         FocusStyleManager.onlyShowFocusOnTabs();
 
         const container = createDiv({id: 'blueprintUiContainer', addToBody: false})
-        createStyles(css`
-            :root {
-                --blueprint-ui-container-width: 300px;
-            }
-
-            @media only screen and (min-width: 1500px) {
+        // the styles (about 3 MB) are added to the document once, not for each renderer
+        if (!document.querySelector('style[data-uiconfig-blueprint]')) {
+            createStyles(css`
                 :root {
-                    --blueprint-ui-container-width: 400px;
+                    --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: 600px) {
-                #blueprintUiContainer {
-                    min-width: var(--blueprint-ui-container-width);
-                    min-height: 200px;
-                    max-height: 100%;
-                    max-width: 100%;
-                    resize: both;
+                @media only screen and (min-width: 2500px) {
+                    :root {
+                        --blueprint-ui-container-width: 500px;
+                    }
                 }
-            }
-        `)
-        createStyles(rendererCss)
+    
+                @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;
+                    }
+                }
+            `).dataset.uiconfigBlueprint = 'container'
+            createStyles(rendererCss).dataset.uiconfigBlueprint = 'renderer'
+        }
 
         this._root = createRoot(container, {
             identifierPrefix: 'bpUi',

package/src/bpComponents/BPComponent.tsx

@@ -68,6 +68,8 @@ export abstract class BPComponent<TValue, TState extends BPComponentState, TProp
 
     private _refreshing = false;
 
+    private _refreshAgain = false
+
     /**
      * Refreshes the state from the config
      *
@@ -76,14 +78,25 @@ export abstract class BPComponent<TValue, TState extends BPComponentState, TProp
      */
     async refreshConfigState(state?: TState) {
         if (!this.props.config) return;
-        if (this._refreshing) return;
+        if (this._refreshing) {
+            // a refresh asked for while one runs: run once more after it, so that the latest value shows
+            this._refreshAgain = true
+            return;
+        }
         this._refreshing = true
-        const s = this.getUpdatedState(state || this.state)
-        // console.log('set state', s)
-        await this.setStatePromise(s)
-        // todo debug refresh frequency etc
-        // console.log('refreshing', this.props.config.label, this.props.config.type, this.state)
-        this._refreshing = false
+        try {
+            const s = this.getUpdatedState(state || this.state)
+            // console.log('set state', s)
+            await this.setStatePromise(s)
+        } finally {
+            // todo debug refresh frequency etc
+            // console.log('refreshing', this.props.config.label, this.props.config.type, this.state)
+            this._refreshing = false
+        }
+        if (this._refreshAgain) {
+            this._refreshAgain = false
+            await this.refreshConfigState()
+        }
     }
 
     /**

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}
         />
@@ -44,7 +45,7 @@ export class BPDropdownInputComponent extends BPInputComponent<string|number, BP
         const options: DropdownItem[] = children.map((value, i) => {
             let label1 = this.context.methods.getLabel(value)
             const label = cleanLabel(label1) || `Option ${i}`
-            return {label, value: value!.value ?? label1}
+            return {label, value: value!.value ?? label1, uuid: value!.uuid}
         })
 
         // const selected = options.find(o=>o.value===val)||options[0]

package/src/bpComponents/BPFolderComponent.tsx

@@ -8,14 +8,14 @@ import {
     Icon,
     IconName,
     Intent,
-    MaybeElement, Menu, MenuItem, Popover
+    MaybeElement, Menu, MenuItem, Popover,
+    Classes,
 } from "@blueprintjs/core";
 import {ConfigObject} from "../ConfigObject";
 import {PanelActions} from "@blueprintjs/core/lib/esm/components/panel-stack2/panelTypes";
 import {getOrCall, safeSetProperty} from 'ts-browser-helpers'
 import {BPContainerComponent, BPContainerComponentState, BPContainerComponentProps} from './BPContainerComponent'
 import classNames from "classnames";
-import {Classes} from "@blueprintjs/core/src/common";
 import {AnimationStates} from "@blueprintjs/core/lib/esm/components/collapse/collapse";
 
 export type BPFolderComponentState = BPContainerComponentState & {

package/src/bpComponents/BPTextInputComponent.tsx

@@ -21,11 +21,22 @@ export class BPTextInputComponent extends BPInputComponent<string> {
         }
     }
 
+    private _edited = false
     private _onChange: ChangeEventHandler<HTMLInputElement> = (e) => {
         this._iv+=1
+        this._edited = true
         this.setValue(e.target.value, false); // todo: set loading while this promise is happening.
     }
 
+    // after an edit, blur sets the value once more with `last: true`: the change event marks the end of the edit and
+    // the undo manager closes the step that merged the keystrokes
+    private _onBlur = (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+        if (!this._edited) return
+        this._edited = false
+        this._iv+=1
+        this.setValue(e.target.value, true);
+    }
+
     renderInput() {
         const config = this.props.config as any;
         const isMultiline = config.multiline === true;
@@ -42,7 +53,8 @@ export class BPTextInputComponent extends BPInputComponent<string> {
                     rows={config.rows}
                     cols={config.cols}
                     autoResize={config.autoResize}
-                    onChange={this._onChange as any}/>
+                    onChange={this._onChange as any}
+                    onBlur={this._onBlur}/>
             )
         }
 
@@ -54,7 +66,8 @@ export class BPTextInputComponent extends BPInputComponent<string> {
                 readOnly={this.state.readOnly}
                 key={this.props.config.uuid}
                 fill={true}
-                onChange={this._onChange}/>
+                onChange={this._onChange}
+                onBlur={this._onBlur}/>
         )
     }
 }

package/src/components/ConfigurationPanelComponent.tsx

@@ -1,9 +1,8 @@
 import React from "react";
-import {Button, Card, Panel, PanelStack2, Popover} from "@blueprintjs/core";
+import {Button, Card, Classes, Panel, PanelStack2, Popover} from "@blueprintjs/core";
 import {ConfigObject, ConfigProps} from "../ConfigObject";
 import {UiObjectConfig} from 'uiconfig.js'
 import {UiConfigRendererContext} from '../bpComponents/BPComponent'
-import {Classes} from '@blueprintjs/core/src/common'
 import {
     defaultVisualStyle,
     setupVisualStyle,

package/src/components/DialogContext.tsx

@@ -1,7 +1,6 @@
 import {createContext, Dispatch, ReactNode, SetStateAction, useCallback, useContext, useState} from 'react'
-import {Button, Dialog, DialogBody, DialogFooter, FormGroup, InputGroup} from '@blueprintjs/core'
+import {Button, Dialog, DialogBody, DialogFooter, FormGroup, InputGroup, Intent} from '@blueprintjs/core'
 import {useLoadingState} from './loadingState'
-import {Intent} from '@blueprintjs/core/src/common/intent'
 
 export type DialogStateType = {
     isOpen: boolean,

package/src/components/VisualStyleContext.tsx

@@ -1,6 +1,5 @@
 import React from 'react'
-import {Menu, MenuItem} from '@blueprintjs/core'
-import {Classes} from '@blueprintjs/core/src/common'
+import {Classes, Menu, MenuItem} from '@blueprintjs/core'
 
 export const defaultVisualStyle = {
     darkMode: true,

package/dist/allPaths-DANRR6MZ.js

@@ -1,23 +0,0 @@
-import { I as n } from "./index-6kveHKKU.js";
-import { I as e } from "./index-D9WNL8Mc.js";
-import { p as r, I as s } from "./index-t3WzvX5M.js";
-/**
- * @license
- * uiconfig-blueprint v0.1.0-dev.14
- * Copyright 2022-2025 repalash <palash@shaders.app>
- * Apache-2.0 License
- */
-function I(o, t) {
-  var a = r(o);
-  return t === s.STANDARD ? n[a] : e[a];
-}
-function p(o) {
-  return r(o);
-}
-export {
-  n as IconSvgPaths16,
-  e as IconSvgPaths20,
-  I as getIconPaths,
-  p as iconNameToPathsRecordKey
-};
-//# sourceMappingURL=allPaths-DANRR6MZ.js.map

package/dist/allPaths-DANRR6MZ.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"allPaths-DANRR6MZ.js","sources":["../node_modules/@blueprintjs/icons/lib/esm/allPaths.js"],"sourcesContent":["/*\n * Copyright 2021 Palantir Technologies, Inc. All rights reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport { pascalCase } from \"change-case\";\nimport * as IconSvgPaths16 from \"./generated/16px/paths\";\nimport * as IconSvgPaths20 from \"./generated/20px/paths\";\nimport { IconSize } from \"./iconTypes\";\nexport { IconSvgPaths16, IconSvgPaths20 };\n/**\n * Get the list of vector paths that define a given icon. These path strings are used to render `<path>`\n * elements inside an `<svg>` icon element. For full implementation details and nuances, see the icon component\n * handlebars template and `generate-icon-components` script in the __@blueprintjs/icons__ package.\n *\n * Note: this function loads all icon definitions __statically__, which means every icon is included in your\n * JS bundle. Only use this API if your app is likely to use all Blueprint icons at runtime. If you are looking for a\n * dynamic icon loader which loads icon definitions on-demand, use `{ Icons } from \"@blueprintjs/icons\"` instead.\n */\nexport function getIconPaths(name, size) {\n    var key = pascalCase(name);\n    return size === IconSize.STANDARD ? IconSvgPaths16[key] : IconSvgPaths20[key];\n}\n/**\n * Type safe string literal conversion of snake-case icon names to PascalCase icon names.\n * This is useful for indexing into the SVG paths record to extract a single icon's SVG path definition.\n *\n * @deprecated use `getIconPaths` instead\n */\nexport function iconNameToPathsRecordKey(name) {\n    return pascalCase(name);\n}\n//# sourceMappingURL=allPaths.js.map"],"names":["getIconPaths","name","size","key","pascalCase","IconSize","IconSvgPaths16","IconSvgPaths20","iconNameToPathsRecordKey"],"mappings":";;;;;;;;;AA6BO,SAASA,EAAaC,GAAMC,GAAM;AACrC,MAAIC,IAAMC,EAAWH,CAAI;AACzB,SAAOC,MAASG,EAAS,WAAWC,EAAeH,CAAG,IAAII,EAAeJ,CAAG;AAChF;AAOO,SAASK,EAAyBP,GAAM;AAC3C,SAAOG,EAAWH,CAAI;AAC1B;","x_google_ignoreList":[0]}

package/dist/allPathsLoader-BdHGVD6B.js

@@ -1,27 +0,0 @@
-import { _ as n, a as o } from "./index-t3WzvX5M.js";
-/**
- * @license
- * uiconfig-blueprint v0.1.0-dev.14
- * Copyright 2022-2025 repalash <palash@shaders.app>
- * Apache-2.0 License
- */
-var s = function(a, e) {
-  return n(void 0, void 0, void 0, function() {
-    var t;
-    return o(this, function(r) {
-      switch (r.label) {
-        case 0:
-          return [4, import(
-            /* webpackChunkName: "blueprint-icons-all-paths" */
-            "./allPaths-DANRR6MZ.js"
-          )];
-        case 1:
-          return t = r.sent().getIconPaths, [2, t(a, e)];
-      }
-    });
-  });
-};
-export {
-  s as allPathsLoader
-};
-//# sourceMappingURL=allPathsLoader-BdHGVD6B.js.map

package/dist/allPathsLoader-BdHGVD6B.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"allPathsLoader-BdHGVD6B.js","sources":["../node_modules/@blueprintjs/icons/lib/esm/paths-loaders/allPathsLoader.js"],"sourcesContent":["/*\n * Copyright 2023 Palantir Technologies, Inc. All rights reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport { __awaiter, __generator } from \"tslib\";\n/**\n * A simple module loader which concatenates all icon paths into a single chunk.\n */\nexport var allPathsLoader = function (name, size) { return __awaiter(void 0, void 0, void 0, function () {\n    var getIconPaths;\n    return __generator(this, function (_a) {\n        switch (_a.label) {\n            case 0: return [4 /*yield*/, import(\n                /* webpackChunkName: \"blueprint-icons-all-paths\" */\n                \"../allPaths\")];\n            case 1:\n                getIconPaths = (_a.sent()).getIconPaths;\n                return [2 /*return*/, getIconPaths(name, size)];\n        }\n    });\n}); };\n//# sourceMappingURL=allPathsLoader.js.map"],"names":["allPathsLoader","name","size","__awaiter","getIconPaths","__generator","_a"],"mappings":";;;;;;;AAmBU,IAACA,IAAiB,SAAUC,GAAMC,GAAM;AAAE,SAAOC,EAAU,QAAQ,QAAQ,QAAQ,WAAY;AACrG,QAAIC;AACJ,WAAOC,EAAY,MAAM,SAAUC,GAAI;AACnC,cAAQA,EAAG,OAAK;AAAA,QACZ,KAAK;AAAG,iBAAO,CAAC,GAAa;AAAA;AAAA,YAEzB;AAAA,UAAa,CAAC;AAAA,QAClB,KAAK;AACD,iBAAAF,IAAgBE,EAAG,KAAI,EAAI,cACpB,CAAC,GAAcF,EAAaH,GAAMC,CAAI,CAAC;AAAA,MAC9D;AAAA,IACA,CAAK;AAAA,EACL,CAAC;AAAE;","x_google_ignoreList":[0]}