neo.mjs 6.14.0 → 6.15.0

package/apps/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='6.12.1'
+         * @member {String} version='6.15.0'
          */
-        version: '6.12.1'
+        version: '6.15.0'
     }
 
     /**

package/apps/covid/view/HeaderContainer.mjs

@@ -1,6 +1,6 @@
+import ComboBox     from '../../../src/form/field/ComboBox.mjs';
 import Container    from '../../../src/container/Base.mjs';
 import CountryStore from '../store/Countries.mjs';
-import SelectField  from '../../../src/form/field/Select.mjs';
 
 /**
  * @class Covid.view.HeaderContainer
@@ -116,7 +116,7 @@ class HeaderContainer extends Container {
                 },
 
                 items : [{
-                    module       : SelectField,
+                    module       : ComboBox,
                     displayField : 'country',
                     flex         : 'none',
                     height       : 25,

package/apps/form/view/pages/Page10.mjs

@@ -1,5 +1,5 @@
+import ComboBox          from '../../../../src/form/field/ComboBox.mjs';
 import FormPageContainer from '../FormPageContainer.mjs';
-import SelectField       from '../../../../src/form/field/Select.mjs';
 
 /**
  * @class Form.view.pages.Page10
@@ -16,7 +16,7 @@ class Page10 extends FormPageContainer {
          * @member {Object[]} items
          */
         items: [{
-            module   : SelectField,
+            module   : ComboBox,
             editable : false,
             labelText: 'Page 10 Field 1',
             name     : 'page10field1',

package/apps/sharedcovid/view/HeaderContainer.mjs

@@ -1,6 +1,6 @@
+import ComboBox     from '../../../src/form/field/ComboBox.mjs';
 import Container    from '../../../src/container/Base.mjs';
 import CountryStore from '../store/Countries.mjs';
-import SelectField  from '../../../src/form/field/Select.mjs';
 
 /**
  * @class SharedCovid.view.HeaderContainer
@@ -124,7 +124,7 @@ class HeaderContainer extends Container {
                 },
 
                 items : [{
-                    module       : SelectField,
+                    module       : ComboBox,
                     displayField : 'country',
                     flex         : 'none',
                     height       : 25,

package/examples/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='6.12.1'
+         * @member {String} version='6.15.0'
          */
-        version: '6.12.1'
+        version: '6.15.0'
     }
 
     /**

package/examples/button/base/MainContainer.mjs

@@ -1,9 +1,9 @@
 import Button                from '../../../src/button/Base.mjs';
 import CheckBox              from '../../../src/form/field/CheckBox.mjs';
+import ComboBox              from '../../../src/form/field/ComboBox.mjs';
 import ConfigurationViewport from '../../ConfigurationViewport.mjs';
 import NumberField           from '../../../src/form/field/Number.mjs';
 import Radio                 from '../../../src/form/field/Radio.mjs';
-import SelectField           from '../../../src/form/field/Select.mjs';
 import TextField             from '../../../src/form/field/Text.mjs';
 
 /**
@@ -137,7 +137,7 @@ class MainContainer extends ConfigurationViewport {
             style     : {marginTop: '10px'},
             value     : me.exampleComponent.text
         }, {
-            module        : SelectField,
+            module        : ComboBox,
             forceSelection: true,
             labelText     : 'ui',
             listeners     : {change: me.onConfigChange.bind(me, 'ui')},

package/examples/button/split/MainContainer.mjs

@@ -1,8 +1,8 @@
 import CheckBox              from '../../../src/form/field/CheckBox.mjs';
+import ComboBox              from '../../../src/form/field/ComboBox.mjs';
 import ConfigurationViewport from '../../ConfigurationViewport.mjs';
 import Radio                 from '../../../src/form/field/Radio.mjs';
 import NumberField           from '../../../src/form/field/Number.mjs';
-import SelectField           from '../../../src/form/field/Select.mjs';
 import SplitButton           from '../../../src/button/Split.mjs';
 import TextField             from '../../../src/form/field/Text.mjs';
 
@@ -89,7 +89,7 @@ class MainContainer extends ConfigurationViewport {
             style     : {marginTop: '10px'},
             value     : me.exampleComponent.text
         }, {
-            module        : SelectField,
+            module        : ComboBox,
             forceSelection: true,
             labelText     : 'ui',
             listeners     : {change: me.onConfigChange.bind(me, 'ui')},

package/examples/component/process/MainContainer.mjs

@@ -1,8 +1,8 @@
+import CheckBox              from '../../../src/form/field/CheckBox.mjs';
+import ColorField            from '../../../src/form/field/Color.mjs';
 import ConfigurationViewport from '../../ConfigurationViewport.mjs';
-import Process               from '../../../src/component/Process.mjs';
 import Container             from '../../../src/container/Base.mjs';
-import CheckBox              from "../../../src/form/field/CheckBox.mjs";
-import ColorField             from "../../../src/form/field/Color.mjs"
+import Process               from '../../../src/component/Process.mjs';
 
 /**
  * @class Neo.examples.component.process.MainContainer

package/examples/component/process/realWorldExample/MainContainer.mjs

@@ -1,15 +1,15 @@
-import Button                from "../../../../src/button/Base.mjs";
-import CheckBox              from "../../../../src/form/field/CheckBox.mjs";
+import Button                from '../../../../src/button/Base.mjs';
+import CheckBox              from '../../../../src/form/field/CheckBox.mjs';
 import ConfigurationViewport from '../../../ConfigurationViewport.mjs';
+import ComboBox              from '../../../../src/form/field/ComboBox.mjs';
 import Component             from '../../../../src/component/Base.mjs';
 import Container             from '../../../../src/container/Base.mjs';
-import DisplayField          from "../../../../src/form/field/Display.mjs"
-import Form                  from "../../../../src/form/Container.mjs"
-import NumberField           from "../../../../src/form/field/Number.mjs"
+import DisplayField          from '../../../../src/form/field/Display.mjs';
+import Form                  from '../../../../src/form/Container.mjs';
+import NumberField           from '../../../../src/form/field/Number.mjs';
 import Process               from '../../../../src/component/Process.mjs';
-import RangeField            from "../../../../src/form/field/Range.mjs"
-import SelectField           from "../../../../src/form/field/Select.mjs";
-import TextField             from "../../../../src/form/field/Text.mjs"
+import RangeField            from '../../../../src/form/field/Range.mjs';
+import TextField             from '../../../../src/form/field/Text.mjs';
 import Toast                 from '../../../../src/component/Toast.mjs';
 
 /**
@@ -188,22 +188,22 @@ class MainContainer extends ConfigurationViewport {
                     value            : 20
                 },
                 items       : [{
-                    module      : SelectField,
+                    module      : ComboBox,
                     displayField: 'name',
                     labelText   : 'Fahrstil',
                     value       : 'normal',
 
                     store: {
                         data : [
-                            {style: 'sportStyle', name: 'sport', code: 'sportCode'},
-                            {style: 'nomalStyle', name: 'normal', code: 'normalCode'},
-                            {style: 'ecoStyle', name: 'eco', code: 'ecoCode'},
+                            {style: 'sportStyle',  name: 'sport',  code: 'sportCode'},
+                            {style: 'normalStyle', name: 'normal', code: 'normalCode'},
+                            {style: 'ecoStyle',    name: 'eco',    code: 'ecoCode'},
                         ],
                         model: {
                             fields: [
-                                {name: 'style', type: 'string'},
-                                {name: 'name', type: 'string'},
-                                {name: 'code', type: 'string'}
+                                {name: 'style', type: 'String'},
+                                {name: 'name',  type: 'String'},
+                                {name: 'code',  type: 'String'}
                             ]
                         }
                     }

package/examples/component/toast/MainContainer.mjs

@@ -1,10 +1,10 @@
 import Button                  from '../../../src/button/Base.mjs';
 import CheckBox                from '../../../src/form/field/CheckBox.mjs';
+import ComboBox                from '../../../src/form/field/ComboBox.mjs';
 import Component               from '../../../src/component/Base.mjs';
 import FormContainer           from '../../../src/form/Container.mjs';
 import MainContainerController from './MainContainerController.mjs';
 import NumberField             from '../../../src/form/field/Number.mjs';
-import SelectField             from '../../../src/form/field/Select.mjs';
 import TextField               from '../../../src/form/field/Text.mjs';
 import Viewport                from '../../../src/container/Viewport.mjs';
 
@@ -51,19 +51,19 @@ class MainContainer extends Viewport {
                 labelText: 'iconCls',
                 name     : 'iconCls'
             }, {
-                module    : SelectField,
+                module    : ComboBox,
                 labelText : 'position = tr',
                 name      : 'position',
                 store     : {data: [{name: 'tl'}, {name: 'tc'}, {name: 'tr'}, {name: 'bl'}, {name: 'bc'}, {name: 'br'}]},
                 valueField: 'name'
             }, {
-                module   : SelectField,
+                module   : ComboBox,
                 labelText: 'slideDirection = right',
                 name     : 'slideDirection',
                 store    : {data: [{name: 'down'}, {name: 'up'}, {name: 'left'}, {name: 'right'}]},
                 valueField: 'name'
             }, {
-                module   : SelectField,
+                module   : ComboBox,
                 labelText: 'ui = info',
                 name     : 'ui',
                 store    : {data: [{name: 'info'}, {name: 'danger'}, {name: 'success'}]},

package/examples/dialog/DemoDialog.mjs

@@ -1,6 +1,6 @@
-import Button      from '../../src/button/Base.mjs';
-import Dialog      from '../../src/dialog/Base.mjs';
-import SelectField from '../../src/form/field/Select.mjs';
+import Button   from '../../src/button/Base.mjs';
+import ComboBox from '../../src/form/field/ComboBox.mjs';
+import Dialog   from '../../src/dialog/Base.mjs';
 
 /**
  * @class Neo.examples.dialog.DemoDialog
@@ -57,7 +57,7 @@ class DemoDialog extends Dialog {
         const me = this;
 
         me.items = [{
-            module    : SelectField,
+            module    : ComboBox,
             labelText : 'Select',
             labelWidth: 80,
 

package/examples/fieldWithPrefix/MainContainer.mjs

@@ -1,8 +1,7 @@
+import ComboBox              from '../../src/form/field/ComboBox.mjs';
 import ConfigurationViewport from '../ConfigurationViewport.mjs';
-
-import PrefixPlugin from '../../src/plugin/PrefixField.mjs';
-import SelectField  from '../../src/form/field/Select.mjs';
-import TextField    from '../../src/form/field/Text.mjs';
+import PrefixPlugin          from '../../src/plugin/PrefixField.mjs';
+import TextField             from '../../src/form/field/Text.mjs';
 
 /**
  * @class Neo.examples.fieldWithPrefix.MainContainer
@@ -50,7 +49,7 @@ class MainContainer extends ConfigurationViewport {
             value    : '_',
             style    : {marginTop: '10px'}
         }, {
-            module: SelectField,
+            module: ComboBox,
             store : {
                 model: {fields: [{name: 'id'}, {name: 'name'}, {name: 'value'}]},
                 data : [

package/examples/form/field/{select → combobox}/MainContainer.mjs

@@ -1,19 +1,18 @@
 import CheckBox              from '../../../../src/form/field/CheckBox.mjs';
+import ComboBox              from '../../../../src/form/field/ComboBox.mjs';
 import ConfigurationViewport from '../../../ConfigurationViewport.mjs';
 import MainStore             from './MainStore.mjs';
 import NumberField           from '../../../../src/form/field/Number.mjs';
-import SelectField           from '../../../../src/form/field/Select.mjs';
 import Radio                 from '../../../../src/form/field/Radio.mjs';
 import TextField             from '../../../../src/form/field/Text.mjs';
 
 /**
- * @class Neo.examples.form.field.select.MainContainer
+ * @class Neo.examples.form.field.combobox.MainContainer
  * @extends Neo.examples.ConfigurationViewport
  */
 class MainContainer extends ConfigurationViewport {
     static config = {
-        className             : 'Neo.examples.form.field.select.MainContainer',
-        autoMount             : true,
+        className             : 'Neo.examples.form.field.combobox.MainContainer',
         configItemLabelWidth  : 160,
         exampleContainerConfig: {style: {position: 'relative'}}
     }
@@ -160,17 +159,15 @@ class MainContainer extends ConfigurationViewport {
 
     createExampleComponent() {
         return Neo.create({
-            module       : SelectField,
+            module       : ComboBox,
             labelPosition: 'inline',
             labelText    : 'US States',
             labelWidth   : 80,
+            pickerConfig : {minHeight : '6em'},
             store        : MainStore,
             value        : 'AZ',
             valueField   : 'abbreviation',
-            width        : '50%',
-            pickerConfig : {
-                minHeight : '6em'
-            }
+            width        : '50%'
         })
     }
 }

package/examples/form/field/{select → combobox}/MainModel.mjs

@@ -1,20 +1,20 @@
 import Model  from '../../../../src/data/Model.mjs';
 
 /**
- * @class Neo.examples.form.field.select.MainModel
+ * @class Neo.examples.form.field.combobox.MainModel
  * @extends Neo.data.Model
  */
 class MainModel extends Model {
     static config = {
-        className  : 'Neo.examples.form.field.select.MainModel',
+        className  : 'Neo.examples.form.field.combobox.MainModel',
         keyProperty: 'abbreviation',
 
         fields: [{
             name: 'abbreviation',
-            type: 'string'
+            type: 'String'
         }, {
             name: 'name',
-            type: 'string'
+            type: 'String'
         }]
     }
 }

package/examples/form/field/{select → combobox}/MainStore.mjs

@@ -2,12 +2,12 @@ import Store from '../../../../src/data/Store.mjs';
 import Model from './MainModel.mjs';
 
 /**
- * @class Neo.examples.form.field.select.MainStore
+ * @class Neo.examples.form.field.combobox.MainStore
  * @extends Neo.data.Store
  */
 class MainStore extends Store {
     static config = {
-        className  : 'Neo.examples.form.field.select.MainStore',
+        className  : 'Neo.examples.form.field.combobox.MainStore',
         autoLoad   : true,
         keyProperty: 'abbreviation',
         model      : Model,

package/examples/form/field/{select → combobox}/app.mjs

@@ -2,5 +2,5 @@ import MainContainer from './MainContainer.mjs';
 
 export const onStart = () => Neo.app({
     mainView: MainContainer,
-    name    : 'Neo.examples.form.field.select'
+    name    : 'Neo.examples.form.field.combobox'
 });

package/examples/form/field/{select → combobox}/index.html

@@ -3,7 +3,7 @@
 <head>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta charset="UTF-8">
-    <title>Neo SelectField</title>
+    <title>Neo ComboBox</title>
 </head>
 <body>
     <script src="../../../../src/MicroLoader.mjs" type="module"></script>

package/examples/form/field/{select → combobox}/neo-config.json

@@ -1,5 +1,5 @@
 {
-    "appPath"    : "examples/form/field/select/app.mjs",
+    "appPath"    : "examples/form/field/combobox/app.mjs",
     "basePath"   : "../../../../",
     "environment": "development",
     "mainPath"   : "./Main.mjs"

package/examples/tableFiltering/MainContainer.mjs

@@ -1,11 +1,11 @@
 import BooleanContainer from '../../src/filter/BooleanContainer.mjs';
 import CellModel        from '../../src/selection/table/CellModel.mjs';
 import CheckBox         from '../../src/form/field/CheckBox.mjs';
+import ComboBox         from '../../src/form/field/ComboBox.mjs';
 import DateContainer    from '../../src/filter/DateContainer.mjs';
 import DateUtil         from '../../src/util/Date.mjs';
 import MainStore        from './MainStore.mjs';
 import NumberContainer  from '../../src/filter/NumberContainer.mjs';
-import SelectField      from '../../src/form/field/Select.mjs';
 import TableContainer   from '../../src/table/Container.mjs';
 import Viewport         from '../../src/container/Viewport.mjs';
 
@@ -64,7 +64,7 @@ class MainContainer extends Viewport {
                 text     : 'Country',
 
                 editorConfig: {
-                    module: SelectField,
+                    module: ComboBox,
 
                     store: {
                         autoLoad   : true,

package/package.json

@@ -1,7 +1,7 @@
 
 {
     "name": "neo.mjs",
-    "version": "6.14.0",
+    "version": "6.15.0",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -58,7 +58,7 @@
         "monaco-editor": "^0.47.0",
         "neo-jsdoc": "1.0.1",
         "neo-jsdoc-x": "1.0.5",
-        "postcss": "^8.4.35",
+        "postcss": "^8.4.37",
         "sass": "^1.72.0",
         "siesta-lite": "5.5.2",
         "url": "^0.11.3",

package/resources/scss/src/form/field/{Select.scss → ComboBox.scss}

@@ -1,4 +1,4 @@
-.neo-selectfield {
+.neo-combobox {
     .neo-input-field-wrapper {
         flex    : 1 1 30px;
         position: relative;
@@ -14,9 +14,9 @@
 
         .neo-typeahead-input {
             border-color: transparent;
-            color       : var(--selectfield-input-hint-color);
+            color       : var(--combobox-input-hint-color);
             font        : var(--textfield-input-font);
-            opacity     : var(--selectfield-input-hint-opacity);
+            opacity     : var(--combobox-input-hint-opacity);
         }
     }
 
@@ -26,20 +26,20 @@
         text-align: left;
 
         .neo-highlight-search {
-            background-color: var(--selectfield-list-search-background-color);
-            color           : var(--selectfield-list-search-color) !important;
+            background-color: var(--combobox-list-search-background-color);
+            color           : var(--combobox-list-search-color) !important;
         }
 
         .neo-selected {
             .neo-highlight-search {
-                color: var(--selectfield-list-search-color-selected) !important;
+                color: var(--combobox-list-search-color-selected) !important;
             }
         }
     }
 
     .neo-picker-container {
-        border       : var(--selectfield-picker-container-border);
-        border-radius: var(--selectfield-picker-container-border-radius);
+        border       : var(--combobox-picker-container-border);
+        border-radius: var(--combobox-picker-container-border-radius);
         font-weight  : 400;
     }
 }

package/resources/scss/theme-dark/form/field/ComboBox.scss

@@ -0,0 +1,9 @@
+:root .neo-theme-dark { // .neo-combobox
+    --combobox-input-hint-color              : #bbb;
+    --combobox-input-hint-opacity            : 0.6;
+    --combobox-list-search-background-color  : inherit;
+    --combobox-list-search-color             : #fff;
+    --combobox-list-search-color-selected    : #000;
+    --combobox-picker-container-border       : 1px solid #bbb;
+    --combobox-picker-container-border-radius: 0;
+}

package/resources/scss/theme-light/form/field/ComboBox.scss

@@ -0,0 +1,9 @@
+:root .neo-theme-light { // .neo-combobox
+    --combobox-input-hint-color              : #333;
+    --combobox-input-hint-opacity            : 0.6;
+    --combobox-list-search-background-color  : inherit;
+    --combobox-list-search-color             : red;
+    --combobox-list-search-color-selected    : red;
+    --combobox-picker-container-border       : 1px solid #1c60a0;
+    --combobox-picker-container-border-radius: 3px;
+}

package/resources/scss/theme-neo-light/form/field/ComboBox.scss

@@ -0,0 +1,9 @@
+:root .neo-theme-neo-light { // .neo-combobox
+    --combobox-input-hint-color              : #333;
+    --combobox-input-hint-opacity            : 0.6;
+    --combobox-list-search-background-color  : inherit;
+    --combobox-list-search-color             : red;
+    --combobox-list-search-color-selected    : red;
+    --combobox-picker-container-border       : 1px solid #1c60a0;
+    --combobox-picker-container-border-radius: 3px;
+}

package/src/DefaultConfig.mjs

@@ -260,12 +260,12 @@ const DefaultConfig = {
     useVdomWorker: true,
     /**
      * buildScripts/injectPackageVersion.mjs will update this value
-     * @default '6.12.1'
+     * @default '6.15.0'
      * @memberOf! module:Neo
      * @name config.version
      * @type String
      */
-    version: '6.12.1'
+    version: '6.15.0'
 };
 
 Object.assign(DefaultConfig, {

package/src/container/Viewport.mjs

@@ -39,9 +39,12 @@ class Viewport extends Container {
     onConstructed() {
         super.onConstructed();
 
+        let {appName, windowId} = this;
+
         this.applyBodyCls && Neo.main.DomAccess.applyBodyCls({
-            appName: this.appName,
-            cls    : ['neo-body-viewport']
+            appName,
+            cls: ['neo-body-viewport'],
+            windowId
         })
     }
 }

package/src/form/field/Chip.mjs

@@ -1,10 +1,10 @@
-import Select from './Select.mjs';
+import ComboBox from './ComboBox.mjs';
 
 /**
  * @class Neo.form.field.Chip
- * @extends Neo.form.field.Select
+ * @extends Neo.form.field.ComboBox
  */
-class Chip extends Select {
+class Chip extends ComboBox {
     static config = {
         /**
          * @member {String} className='Neo.form.field.Chip'

package/src/form/field/Color.mjs

@@ -1,12 +1,12 @@
 import ColorList from '../../list/Color.mjs'
-import Select    from './Select.mjs';
+import ComboBox  from './ComboBox.mjs';
 import VDomUtil  from '../../util/VDom.mjs';
 
 /**
  * @class Neo.form.field.Color
- * @extends Neo.form.field.Select
+ * @extends Neo.form.field.ComboBox
  */
-class Color extends Select {
+class Color extends ComboBox {
     static config = {
         /**
          * @member {String} className='Neo.form.field.Color'

package/src/form/field/{Select.mjs → ComboBox.mjs}

@@ -10,10 +10,10 @@ import VDomUtil         from '../../util/VDom.mjs';
  * Provides a dropdown list to select one or multiple items.
  *
  * Conforms to ARIA accessibility standards outlines in https://www.w3.org/WAI/ARIA/apg/patterns/combobox/
- * @class Neo.form.field.Select
+ * @class Neo.form.field.ComboBox
  * @extends Neo.form.field.Picker
  */
-class Select extends Picker {
+class ComboBox extends Picker {
     /**
      * Valid values for triggerAction
      * @member {String[]} triggerActions=['all','filtered']
@@ -24,23 +24,23 @@ class Select extends Picker {
 
     static config = {
         /**
-         * @member {String} className='Neo.form.field.Select'
+         * @member {String} className='Neo.form.field.ComboBox'
          * @protected
          */
-        className: 'Neo.form.field.Select',
+        className: 'Neo.form.field.ComboBox',
         /**
-         * @member {String} ntype='selectfield'
+         * @member {String} ntype='combobox'
          * @protected
          */
-        ntype: 'selectfield',
+        ntype: 'combobox',
         /**
          * @member {String|Number|null} activeRecordId=null
          */
         activeRecordId: null,
         /**
-         * @member {String[]} baseCls=['neo-selectfield','neo-pickerfield','neo-textfield']
+         * @member {String[]} baseCls=['neo-combobox','neo-pickerfield','neo-textfield']
          */
-        baseCls: ['neo-selectfield', 'neo-pickerfield', 'neo-textfield'],
+        baseCls: ['neo-combobox', 'neo-pickerfield', 'neo-textfield'],
         /**
          * @member {String} displayField='name'
          */
@@ -257,8 +257,8 @@ class Select extends Picker {
                     // Simplest case is just picking string values.
                     if (typeof v === 'string') {
                         v = {
-                            [valueField]   : v,
-                            [displayField] : v
+                            [valueField]  : v,
+                            [displayField]: v
                         }
                     }
 
@@ -327,7 +327,7 @@ class Select extends Picker {
         } else {
             // store not loaded yet
             me.preStoreLoadValue = value;
-            return null;
+            return null
         }
     }
 
@@ -366,7 +366,7 @@ class Select extends Picker {
             scope          : me
         });
 
-        return me.list;
+        return me.list
     }
 
     /**
@@ -565,7 +565,7 @@ class Select extends Picker {
 
             // Short delay to let selection DOM updates get applied.
             // Alternatively, we could hide the picker before the selection happen and limit updates to the vdom.
-            //await me.timeout(20);
+            await me.timeout(20);
 
             await me.hidePicker()
         }
@@ -775,6 +775,6 @@ class Select extends Picker {
  * @returns {Object}
  */
 
-Neo.setupClass(Select);
+Neo.setupClass(ComboBox);
 
-export default Select;
+export default ComboBox;

package/src/form/field/Country.mjs

@@ -1,10 +1,10 @@
-import Select from '../../form/field/Select.mjs';
+import ComboBox from './ComboBox.mjs';
 
 /**
  * @class Neo.form.field.Country
- * @extends Neo.form.field.Select
+ * @extends Neo.form.field.ComboBox
  */
-class Country extends Select {
+class Country extends ComboBox {
     static config = {
         /**
          * @member {String} className='Neo.form.field.Country'

package/src/form/field/_export.mjs

@@ -1,6 +1,7 @@
 import Base     from './Base.mjs';
 import CheckBox from './CheckBox.mjs';
 import Chip     from './Chip.mjs';
+import ComboBox from './ComboBox.mjs';
 import Date     from './Date.mjs';
 import Display  from './Display.mjs';
 import Email    from './Email.mjs';
@@ -10,10 +11,9 @@ import Picker   from './Picker.mjs';
 import Radio    from './Radio.mjs';
 import Range    from './Range.mjs';
 import Search   from './Search.mjs';
-import Select   from './Select.mjs';
 import Text     from './Text.mjs';
 import TextArea from './TextArea.mjs';
 import Time     from './Time.mjs';
 import Url      from './Url.mjs';
 
-export {Base, CheckBox, Chip, Date, Display, Email, Number, Password, Picker, Radio, Range, Search, Select, Text, TextArea, Time, Url};
+export {Base, CheckBox, Chip, ComboBox, Date, Display, Email, Number, Password, Picker, Radio, Range, Search, Text, TextArea, Time, Url};

package/src/toolbar/Paging.mjs

@@ -1,5 +1,5 @@
 import ClassSystemUtil from '../util/ClassSystem.mjs';
-import SelectField     from '../form/field/Select.mjs';
+import ComboBox        from '../form/field/ComboBox.mjs';
 import Toolbar         from './Base.mjs';
 
 /**
@@ -75,7 +75,7 @@ class Paging extends Toolbar {
                 text : 'Rows per page:'
             },
             rowsPerPage: {
-                module       : SelectField,
+                module       : ComboBox,
                 clearable    : false,
                 hideLabel    : true,
                 listConfig   : {highlightFilterValue: false},

package/test/components/app.mjs

@@ -3,7 +3,7 @@
 
 import '../../src/button/Base.mjs';
 import '../../src/component/DateSelector.mjs';
+import '../../src/form/field/ComboBox.mjs';
 import '../../src/list/Chip.mjs';
-import '../../src/form/field/Select.mjs';
 
 export const onStart = () => Neo.app({name: 'AppEmpty'})

package/test/components/files/form/field/{Select.mjs → ComboBox.mjs}

@@ -3,7 +3,7 @@ StartTest(t => {
 
     async function setup(config = {}) {
         testId = await Neo.worker.App.createNeoInstance(Neo.merge({
-            ntype        : 'selectfield',
+            ntype        : 'combobox',
             labelPosition: 'inline',
             labelText    : 'US States',
             labelWidth   : 80,
@@ -17,10 +17,10 @@ StartTest(t => {
                 model: {
                     fields: [{
                         name: 'abbreviation',
-                        type: 'string'
+                        type: 'String'
                     }, {
                         name: 'name',
-                        type: 'string'
+                        type: 'String'
                     }]
                 }
             }

package/test/components/siesta.js

@@ -82,7 +82,7 @@ project.plan({
     items: [{
         group: 'field',
         items: [
-            'files/form/field/Select.mjs',
+            'files/form/field/ComboBox.mjs',
             'files/form/field/Text.mjs'
         ]
     }]

package/resources/scss/theme-dark/form/field/Select.scss

@@ -1,9 +0,0 @@
-:root .neo-theme-dark { // .neo-selectfield
-    --selectfield-input-hint-color              : #bbb;
-    --selectfield-input-hint-opacity            : 0.6;
-    --selectfield-list-search-background-color  : inherit;
-    --selectfield-list-search-color             : #fff;
-    --selectfield-list-search-color-selected    : #000;
-    --selectfield-picker-container-border       : 1px solid #bbb;
-    --selectfield-picker-container-border-radius: 0;
-}

package/resources/scss/theme-light/form/field/Select.scss

@@ -1,9 +0,0 @@
-:root .neo-theme-light { // .neo-selectfield
-    --selectfield-input-hint-color              : #333;
-    --selectfield-input-hint-opacity            : 0.6;
-    --selectfield-list-search-background-color  : inherit;
-    --selectfield-list-search-color             : red;
-    --selectfield-list-search-color-selected    : red;
-    --selectfield-picker-container-border       : 1px solid #1c60a0;
-    --selectfield-picker-container-border-radius: 3px;
-}

package/resources/scss/theme-neo-light/form/field/Select.scss

@@ -1,9 +0,0 @@
-:root .neo-theme-neo-light { // .neo-selectfield
-    --selectfield-input-hint-color              : #333;
-    --selectfield-input-hint-opacity            : 0.6;
-    --selectfield-list-search-background-color  : inherit;
-    --selectfield-list-search-color             : red;
-    --selectfield-list-search-color-selected    : red;
-    --selectfield-picker-container-border       : 1px solid #1c60a0;
-    --selectfield-picker-container-border-radius: 3px;
-}