dbm 1.2.6 → 1.2.8

package/react/area/OpenCloseExpandableArea.js

@@ -14,24 +14,31 @@ export default class OpenCloseExpandableArea extends Dbm.react.BaseObject {
 		let switchValue = Dbm.flow.updatefunctions.logic.switchValue(openProperty).addCase(false, 0).addCase(true, 1);
 		let animateValueObject = Dbm.flow.animateValue(switchValue.output.properties.value);
 		let transformToStyle = Dbm.flow.updatefunctions.basic.transformValue(animateValueObject.properties.output, this._transformToStyle.bind(this));
+
+		let visibleCondition = Dbm.flow.updatefunctions.logic.condition(animateValueObject.properties.output, ">", 0);
+		this.item.requireProperty("isVisible", false).connectInput(visibleCondition.output.properties.result);
 		
 		this.item.requireProperty("animationStyle", {}).connectInput(transformToStyle.output.properties.value);
 
 		this.item.setValue("animation", Dbm.react.animation.connectedAnimation(transformToStyle.output.properties.value));
 	}
+
+	_removedUsedProps(aProps) {
+        delete aProps["open"];
+    }
 	
 	_transformToStyle(aEnvelope) {
 		//console.log("_transformToStyle");
 		//console.log(aEnvelope, this, this.item.element);
 		
 		if(aEnvelope === 0) {
-			return {"height": "0px", "overflow": "hidden", "display": "none", "visibility": "hidden"};
+			return {"height": "0px", "overflow-x": "visible", "overflow-y": "clip", "display": "none", "visibility": "hidden"};
 		}
 		else if(aEnvelope === 1 || !this.item.element) {
 			return {};
 		}
 		
-		return {"height": (this.item.element.clientHeight*aEnvelope) + "px", "overflow": "hidden"};
+		return {"height": (this.item.element.clientHeight*aEnvelope) + "px", "overflow-x": "visible","overflow-y": "clip"};
 	}
 	
 	_renderMainElement() {
@@ -41,7 +48,7 @@ export default class OpenCloseExpandableArea extends Dbm.react.BaseObject {
 		let openProperty = this.getDynamicProp("open");
 		
 		return this._createMainElement(Dbm.react.animation.AnimatedElement, {"className": "animation-element", "controller": this.item.animation.item, "aria-hidden": this.item.properties.ariaHidden},
-			React.createElement(Dbm.react.context.AddContextVariables, {"values": {"open": openProperty}},
+			React.createElement(Dbm.react.context.AddContextVariables, {"values": {"open": openProperty, "isVisible": this.item.properties.isVisible}},
 				React.createElement("div", {"ref": this.createRef("element")},
 					this.getPropValue("children")
 				)

package/react/area/PopoverLayer.js

@@ -0,0 +1,64 @@
+import React from "react";
+import Dbm from "../../index.js";
+
+export default class PopoverLayer extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+        
+        let startValue = this.getPropValue("startState") === "open";
+        let openProperty = this.getDynamicPropWithoutState("open", startValue);
+        Dbm.flow.addUpdateCommand(openProperty, Dbm.commands.callFunction(this._updateOpen.bind(this)));
+
+        let holderElementProperty = this.item.requireProperty("holderElement", null);
+        let popoverElementProperty = this.item.requireProperty("popoverElement", null);
+
+        let position = new Dbm.flow.updatefunctions.dom.ElementPosition();
+        this.item.setValue("position", position);
+        position.input.properties.element.connectInput(holderElementProperty);
+        position.start();
+
+        let size = new Dbm.flow.updatefunctions.dom.ElementSize();
+        this.item.setValue("size", size);
+        size.input.properties.element.connectInput(holderElementProperty);
+        size.start();
+
+        let styleObject = new Dbm.flow.updatefunctions.dom.StyleObject();
+        styleObject.addProperty("left", position.output.properties.pageX, "px");
+        styleObject.addProperty("top", position.output.properties.pageY, "px");
+        styleObject.addProperty("width", size.output.properties.width, "px");
+        styleObject.addProperty("height", size.output.properties.height, "px");
+        this.item.propertyInput("style", styleObject.output.properties.style);
+    }
+
+    _updateOpen() {
+        //console.log("_updateOpen");
+        let open = this.getPropValue("open");
+
+        this.item.position._callback_scroll(null);
+        this.item.size._callback_sizeChanged(null);
+
+        let element = Dbm.objectPath(this.item.popoverElement, "item.mainElement");
+        if(element) {
+            if(open) {
+                element.showPopover();
+            }
+            else {
+                element.hidePopover();
+            }
+        }
+    }
+    
+    _renderMainElement() {
+        //console.log("OpenCloseExpandableArea::_renderMainElement");
+        //console.log(this);
+        
+        return this._createMainElement("div", {"ref": this.createRef("holderElement")},
+            React.createElement(Dbm.react.BaseObject, {"className": "position-absolute popover-holder", style: this.item.properties.style, "popover": "manual", "ref": this.createRef("popoverElement")},
+                this.getPropValue("children")
+            )
+        );
+        
+        return null;
+    }
+}
+

package/react/area/index.js

@@ -2,6 +2,7 @@ import Dbm from "../../index.js";
 import React from "react";
 
 export {default as InsertElement} from "./InsertElement.js";
+export {default as InsertElementWithChildren} from "./InsertElementWithChildren.js";
 export {default as HasData} from "./HasData.js";
 export {default as ScrollActivatedArea} from "./ScrollActivatedArea.js";
 export {default as OpenCloseExpandableArea} from "./OpenCloseExpandableArea.js";
@@ -9,6 +10,7 @@ export {default as ResponsiveLayout} from "./ResponsiveLayout.js";
 export {default as List} from "./List.js";
 export {default as FixedWidthInfiniteSlideshow} from "./FixedWidthInfiniteSlideshow.js";
 export {default as SwitchableArea} from "./SwitchableArea.js";
+export {default as PopoverLayer} from "./PopoverLayer.js";
 
 export const responsiveLayout = function(aDefaultLayout) {
     let newResponsiveLayout = new Dbm.react.area.ResponsiveLayout();

package/react/blocks/admin/objects/Edit.js

@@ -25,7 +25,7 @@ export default class Edit extends Dbm.react.BaseObject {
         let url = new URL(document.location.href);
         let id = url.searchParams.get("id");
 
-        return React.createElement("div", {className: "content-narrow"},
+        return React.createElement("div", {className: "content-narrow admin-font-settings"},
             React.createElement(Dbm.react.context.AddContextVariables, {values: {"editorGroup": this.item.editorGroup}},
                 React.createElement(Dbm.react.admin.objects.EditObject, {id: id}),
                 React.createElement("div", {className: "spacing standard"}),

package/react/blocks/index.js

@@ -6,6 +6,9 @@ export * as gallery from "./gallery/index.js";
 export * as content from "./content/index.js";
 export * as admin from "./admin/index.js";
 export * as faq from "./faq/index.js";
+export * as redirect from "./redirect/index.js";
+export * as signin from "./signin/index.js";
+export * as section from "./section/index.js";
 
 export {default as Image} from "./Image.js";
 
@@ -63,6 +66,8 @@ export let registerEditorBlock = function(aModuleName, aName, aEditorModule = nu
     tools[aModuleName] = createToolConfiguration(aModuleName, aName, aInitialData, aSanitizeSettings);
 
     editorConfigItem.setValue("tools", tools);
+
+    return editorItem;
 }
 
 export let registerFrontBlock = function(aModuleName, aElement) {
@@ -70,6 +75,8 @@ export let registerFrontBlock = function(aModuleName, aElement) {
     let elementItem = new Dbm.repository.Item();
     elementItem.setValue("element", aElement);
     elementItem.register("blocks/" + aModuleName);
+
+    return elementItem;
 }
 
 export let registerBlock = function(aModuleName, aName, aElement, aEditorElement = null, aInitialData = {}, aSanitizeSettings = {}) {
@@ -83,8 +90,10 @@ export let registerBlock = function(aModuleName, aName, aElement, aEditorElement
         editorModule.setMainElement(aEditorElement);
     }
 
-    registerEditorBlock(aModuleName, aName, editorModule, aInitialData, aSanitizeSettings);
-    registerFrontBlock(aModuleName, aElement);
+    let editorBlock = registerEditorBlock(aModuleName, aName, editorModule, aInitialData, aSanitizeSettings);
+    let displayBlock = registerFrontBlock(aModuleName, aElement);
+
+    return {"editorBlock": editorBlock, "displayBlock": displayBlock};
 } 
 
 export let getDefaultEditorModule = function() {
@@ -233,6 +242,23 @@ export let registerAllBlocks = function() {
         registerBlock("content/anchorPosition", "Anchor position", createElement(Dbm.react.blocks.content.AnchorPosition, {}), editor, {}, {});
     }
 
+    {
+        let editor = createElement(Dbm.react.admin.editor.EditorBlockName, {},
+            createElement(Dbm.react.form.LabelledArea, {label: "Redirect when signed in (optional)"}),
+            createElement(Dbm.react.admin.editor.fields.TextField, {name: "signedInUrl"}),
+            createElement(Dbm.react.form.LabelledArea, {label: "Redirect when signed out (optional)"}),
+            createElement(Dbm.react.admin.editor.fields.TextField, {name: "signedOutUrl"})
+        );
+        registerBlock("redirect/signedInRedirect", "Redirect / Signed in?", createElement(Dbm.react.blocks.redirect.SignedInRedirect, {}), editor, {}, {});
+    }
+
+    {
+        let editor = createElement(Dbm.react.admin.editor.EditorBlockName, {},
+            
+        );
+        registerBlock("signIn/signIn", "Sign in / Sign in form", createElement(Dbm.react.blocks.signin.SignIn, {}), editor, {}, {});
+    }
+
     {
         let editor = createElement(Dbm.react.admin.editor.EditorBlockName, {},
             createElement(Dbm.react.form.LabelledArea, {label: "Initial sections"}, 
@@ -246,6 +272,52 @@ export let registerAllBlocks = function() {
         registerBlock("faq/askAQuestion", "FAQ / Ask a question", createElement(Dbm.react.blocks.faq.AskAQuestion, {}), editor, {}, {});
     }
 
+    {
+        let editor = createElement(Dbm.react.admin.editor.EditorBlockName, {},
+            createElement(Dbm.react.form.LabelledArea, {label: "Color"}, 
+                createElement(Dbm.react.admin.editor.fields.TextField, {name: "color"})
+            ),
+            createElement(Dbm.react.form.LabelledArea, {label: "Vertical spacing"}, 
+                createElement(Dbm.react.admin.editor.fields.CheckboxField, {"name": "skipSpacing"}),
+                "Skip"
+            ),
+        );
+        let block = registerBlock("section/coloredBackgroundSection", "Section / Colored background", createElement(Dbm.react.blocks.section.ColoredBackgroundSection, {}), editor, {}, {});
+        block.displayBlock.setValue("isSection", true);
+    }
+
+    {
+        let editor = createElement(Dbm.react.admin.editor.EditorBlockName, {},
+            createElement(Dbm.react.form.LabelledArea, {label: "Color"}, 
+                createElement(Dbm.react.admin.editor.fields.TextField, {name: "color"})
+            ),
+            createElement(Dbm.react.form.LabelledArea, {label: "Dark background"}, 
+                createElement(Dbm.react.admin.editor.fields.CheckboxField, {"name": "invertText"}),
+                "Invert text"
+            ),
+        );
+        let block = registerBlock("section/coloredBoxSection", "Section / Colored box", createElement(Dbm.react.blocks.section.ColoredBoxSection, {}), editor, {}, {});
+        block.displayBlock.setValue("isSection", true);
+    }
+
+    {
+        let editor = createElement(Dbm.react.admin.editor.EditorBlockName, {},
+            
+        );
+        let block = registerBlock("section/endSection", "Section / End", createElement("div", {"data-section-end": "1"}), editor, {}, {});
+        block.displayBlock.setValue("isSection", true);
+        block.displayBlock.setValue("endSection", true);
+    }
+
+    {
+        let editor = createElement(Dbm.react.admin.editor.EditorBlockName, {},
+            
+        );
+        let block = registerBlock("content/skipSpacing", "Skip spacing", createElement("div", {"data-skip-spacing": "1"}), editor, {}, {});
+    }
+
+
+
     {
         let itemEditor = Dbm.getInstance().repository.getItem("admin/itemEditors/title");
         itemEditor.setValue("element", createElement(Dbm.react.admin.objects.itemeditors.Title, {}));
@@ -262,10 +334,15 @@ export let registerAllBlocks = function() {
     }
 
     {
-        let itemEditor = Dbm.getInstance().repository.getItem("admin/itemEditors/name");
+        let itemEditor = Dbm.getInstance().repository.getItem("admin/itemEditors/nameWithTranslations");
         itemEditor.setValue("element", createElement(Dbm.react.admin.objects.itemeditors.Name, {}));
     }
 
+    {
+        let itemEditor = Dbm.getInstance().repository.getItem("admin/itemEditors/name");
+        itemEditor.setValue("element", createElement(Dbm.react.admin.objects.itemeditors.Field, {"label": "Name", "fieldName": "name"}));
+    }
+
     {
         let itemEditor = Dbm.getInstance().repository.getItem("admin/itemEditors/link");
         itemEditor.setValue("element", createElement(Dbm.react.admin.objects.itemeditors.Link, {}));
@@ -276,6 +353,11 @@ export let registerAllBlocks = function() {
         itemEditor.setValue("element", createElement(Dbm.react.admin.objects.itemeditors.Visibility, {}));
     }
 
+    {
+        let itemEditor = Dbm.getInstance().repository.getItem("admin/itemEditors/url");
+        itemEditor.setValue("element", createElement(Dbm.react.admin.objects.itemeditors.Url, {}));
+    }
+
     {
         let itemEditor = Dbm.getInstance().repository.getItem("admin/itemEditors/identifier");
         itemEditor.setValue("element", createElement(Dbm.react.admin.objects.itemeditors.Identifier, {}));
@@ -312,6 +394,61 @@ export let registerAllBlocks = function() {
             nameField: "identifier"
         }));
     }
+
+    {
+        let itemEditor = Dbm.getInstance().repository.getItem("admin/itemEditors/language");
+        itemEditor.setValue("element", createElement(Dbm.react.admin.objects.itemeditors.SingleRelation, {
+            "label": "Language",
+            "direction": "in",
+            "relationType": "for",
+            "objectType": "language",
+            encoding: "name",
+            nameField: "name"
+        }));
+    }
+
+    {
+        let itemEditor = Dbm.getInstance().repository.getItem("admin/itemEditors/menuItems");
+        itemEditor.setValue("element", createElement(Dbm.react.admin.objects.itemeditors.HierarchyOrderedRelationsList, {
+            "label": "Menu items",
+            "direction": "in",
+            "relationType": "in",
+            "objectType": "menuItem",
+            "orderFieldName": "order"
+        },
+        createElement("div", {"className": ""}, 
+            createElement(Dbm.react.admin.EditObject, {"item": Dbm.react.source.item()},
+                createElement("div", {"className": "flex-row small-item-spacing halfs"},
+                    createElement("div", {"className": "flex-row-item"},
+                        createElement(Dbm.react.admin.editorsgroup.EditField, {fieldName: "label"},
+                            createElement(Dbm.react.form.FormField, {"placeholder": "Label", "value": Dbm.react.source.contextVariable("valueEditor.editValue.value"), className: "standard-field standard-field-padding full-width"})
+                        )
+                    ),
+                    createElement("div", {"className": "flex-row-item"},
+                        createElement(Dbm.react.admin.editorsgroup.EditField, {fieldName: "link"},
+                            createElement(Dbm.react.admin.editorsgroup.EditPartOfObject, {"value": Dbm.react.source.contextVariable("valueEditor.editValue.value"), path: "url"},
+                                createElement(Dbm.react.form.FormField, {"placeholder": "Url", "value": Dbm.react.source.contextVariable("value"), className: "standard-field standard-field-padding full-width"})
+                            )
+                        )
+                    )
+                )
+                
+            )
+        )
+        ));
+    }
+
+    {
+        let itemEditor = Dbm.getInstance().repository.getItem("admin/itemEditors/menuLocation/menu");
+        itemEditor.setValue("element", createElement(Dbm.react.admin.objects.itemeditors.SingleRelation, {
+            "label": "Menu",
+            "direction": "in",
+            "relationType": "at",
+            "objectType": "menu",
+            encoding: "name",
+            nameField: "name"
+        }));
+    }
     
     {
         let objectTypeEditor = Dbm.getInstance().repository.getItem("admin/objectTypeEditors/page");
@@ -321,6 +458,7 @@ export let registerAllBlocks = function() {
 
         let newArray = [].concat(objectTypeEditor.editors);
         newArray.push(Dbm.getInstance().repository.getItem("admin/itemEditors/title"));
+        newArray.push(Dbm.getInstance().repository.getItem("admin/itemEditors/url"));
         newArray.push(Dbm.getInstance().repository.getItem("admin/itemEditors/content"));
         objectTypeEditor.editors = newArray;
     }
@@ -407,6 +545,34 @@ export let registerAllBlocks = function() {
         objectTypeEditor.editors = newArray;
     }
 
+    {
+        let objectTypeEditor = Dbm.getInstance().repository.getItem("admin/objectTypeEditors/menu");
+        if(!objectTypeEditor.editors) {
+            objectTypeEditor.setValue("editors", []);
+        }
+
+        let newArray = [].concat(objectTypeEditor.editors);
+        newArray.push(Dbm.getInstance().repository.getItem("admin/itemEditors/name"));
+        newArray.push(Dbm.getInstance().repository.getItem("admin/itemEditors/language"));
+        newArray.push(Dbm.getInstance().repository.getItem("admin/itemEditors/menuItems"));
+        
+        objectTypeEditor.editors = newArray;
+    }
+
+    {
+        let objectTypeEditor = Dbm.getInstance().repository.getItem("admin/objectTypeEditors/menuLocation");
+        if(!objectTypeEditor.editors) {
+            objectTypeEditor.setValue("editors", []);
+        }
+
+        let newArray = [].concat(objectTypeEditor.editors);
+        newArray.push(Dbm.getInstance().repository.getItem("admin/itemEditors/name"));
+        newArray.push(Dbm.getInstance().repository.getItem("admin/itemEditors/identifier"));
+        newArray.push(Dbm.getInstance().repository.getItem("admin/itemEditors/menuLocation/menu"));
+        
+        objectTypeEditor.editors = newArray;
+    }
+
 
     let admin = Dbm.getInstance().repository.getItem("admin");
     admin.requireProperty("pageEditors", []);

package/react/blocks/redirect/SignedInRedirect.js

@@ -0,0 +1,38 @@
+import React from "react";
+import Dbm from "../../../index.js";
+
+export default class SignedInRedirect extends Dbm.react.BaseObject {
+
+    _construct() {
+        super._construct();
+
+        Dbm.flow.runWhenMatched(Dbm.getRepositoryItem("site").getProperty("checkedUser"), true, Dbm.commands.callFunction(this._checkSignedIn.bind(this)));
+
+    }
+
+    _checkSignedIn() {
+        console.log("_checkSignedIn");
+
+        if(document.location.href.indexOf("skipRedirect=1") >= 0) {
+            return;
+        }
+
+        if(Dbm.getRepositoryItem("site").currentUser) {
+            let url = Dbm.objectPath(this.context, "blockData.signedInUrl");
+            if(url) {
+                Dbm.getRepositoryItem("siteNavigation").controller.navigate(url);
+            }
+        }
+        else {
+            let url = Dbm.objectPath(this.context, "blockData.signedOutUrl");
+            if(url) {
+                Dbm.getRepositoryItem("siteNavigation").controller.navigate(url);
+            }
+        }
+    }
+
+    _renderMainElement() {
+
+        return React.createElement("div", {"data-redirect-check": "1"});
+    }
+}

package/react/blocks/redirect/index.js

@@ -0,0 +1 @@
+export {default as SignedInRedirect} from "./SignedInRedirect.js";

package/react/blocks/section/ColoredBackgroundSection.js

@@ -0,0 +1,32 @@
+import React from "react";
+import Dbm from "../../../index.js";
+
+export default class ColoredBackgroundSection extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+
+        
+    }
+
+    _renderMainElement() {
+
+      let color = Dbm.objectPath(this.context, "blockData.color");
+      let skipSpacing = Dbm.objectPath(this.context, "blockData.skipSpacing");
+
+      let style = {
+
+      }
+
+      if(color) {
+        style["backgroundColor"] = color;
+      }
+
+      let spacingElement = skipSpacing ? null : React.createElement("div", {"className": "spacing double"});
+
+      return React.createElement("div", {className: "colored-background-section", style: style},
+        spacingElement,
+        this.getPropValue("children"),
+        spacingElement
+      );
+    }
+}

package/react/blocks/section/ColoredBoxSection.js

@@ -0,0 +1,30 @@
+import React from "react";
+import Dbm from "../../../index.js";
+
+export default class ColoredBoxSection extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+
+        
+    }
+
+    _renderMainElement() {
+
+      let color = Dbm.objectPath(this.context, "blockData.color");
+      let invertText = Dbm.objectPath(this.context, "blockData.invertText");
+
+      let style = {
+
+      }
+
+      if(color) {
+        style["backgroundColor"] = color;
+      }
+
+      let textClass = invertText ? "dark-background-text" : "";
+
+      return React.createElement("div", {className: "centered-site colored-box-section colored-box-section-padding " + textClass, style: style},
+        this.getPropValue("children"),
+      );
+    }
+}

package/react/blocks/section/index.js

@@ -0,0 +1,2 @@
+export {default as ColoredBackgroundSection} from "./ColoredBackgroundSection.js";
+export {default as ColoredBoxSection} from "./ColoredBoxSection.js";

package/react/blocks/signin/SignIn.js

@@ -0,0 +1,14 @@
+import React from "react";
+import Dbm from "../../../index.js";
+
+export default class SignIn extends Dbm.react.BaseObject {
+
+    _construct() {
+        super._construct();
+    }
+
+    _renderMainElement() {
+
+        return React.createElement(Dbm.react.login.LoginForm, {});
+    }
+}

package/react/blocks/signin/index.js

@@ -0,0 +1 @@
+export {default as SignIn} from "./SignIn.js";

package/react/context/AddItemByIdToContext.js

@@ -9,8 +9,11 @@ export default class AddItemByIdToContext extends Dbm.react.BaseObject {
     render() {
         
         let id = this.getPropValue("id");
-        let item = Dbm.getInstance().repository.getItem(id);
-
+        let item = null;
+        if(id != 0) {
+            item = Dbm.getInstance().repository.getItem(id);
+        }
+        
         let as = this.getPropValue("as");
         if(!as) {
             as = "item";

package/react/form/Dropdown.js

@@ -0,0 +1,46 @@
+import React from "react";
+import Dbm from "../../index.js";
+
+export default class Dropdown extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+
+        let startValue = this.getPropValue("startState") === "open";
+		let openProperty = this.getDynamicPropWithoutState("open", startValue);
+    }
+
+    _renderMainElement() {
+
+        let children = Dbm.utils.ArrayFunctions.singleOrArray(this.getPropValue("children"));
+        
+        let slots = Dbm.react.ChildFunctions.splitIntoSlots(children);
+
+        let buttonElement = slots["button"];
+        let mainChildren = slots.main;
+
+        let openProperty = this.getDynamicProp("open");
+
+        let position = this.getPropValue("position");
+        let dropClassName = "dropdown-menu-min-width position-absolute";
+        if(position !== "right") {
+            dropClassName += " " + "top-right";
+        }
+
+        return this._createMainElement("div", {className: "absolute-container"},
+            React.createElement(Dbm.react.interaction.CommandButton, {"command": Dbm.commands.setProperty(openProperty, true)},
+                React.createElement("div", {"className": "cursor-pointer"},
+                    React.createElement(Dbm.react.area.InsertElement, {"element": buttonElement})
+                )
+            ),
+            React.createElement(Dbm.react.area.PopoverLayer, {className: "position-absolute bottom-left full-width", "open": openProperty},
+                React.createElement("div", {className: dropClassName},
+                    React.createElement(Dbm.react.area.OpenCloseExpandableArea, {"open": openProperty},
+                        React.createElement(Dbm.react.interaction.ClickOutsideTrigger, {"command": Dbm.commands.setProperty(openProperty, false)},
+                            React.createElement(Dbm.react.area.InsertElement, {"element": mainChildren})
+                        )
+                    )
+                )
+            )
+        );
+    }
+}

package/react/form/Option.js

@@ -12,7 +12,7 @@ export default class Option extends Dbm.react.BaseObject {
 
         let value = this.getDynamicProp("value").value;
 
-        return this._createMainElement("option", {"value": value,}, this.getPropValue("children"));
+        return this._createMainElement("option", {"value": value}, this.getPropValue("children"));
     }
 }
 

package/react/form/index.js

@@ -10,4 +10,5 @@ export {default as EditArray} from "./EditArray.js";
 export {default as TextArea} from "./TextArea.js";
 export {default as EditObjectProperty} from "./EditObjectProperty.js";
 export {default as Form} from "./Form.js";
-export {default as Option} from "./Option.js";
+export {default as Option} from "./Option.js";
+export {default as Dropdown} from "./Dropdown.js";