solid-ui 2.4.22-34c116c1 → 2.4.22-39d66c72

package/README.md

@@ -7,13 +7,26 @@ User Interface widgets and utilities for Solid (solid-ui)
 These are HTML5 widgets which connect to a solid store. Building blocks for solid-based apps.
 Vanilla JS.  Includes large widgets like chat, table, matrix, form fields, and small widgets.
 
+See [Solid-Ui Storybook](http://solidos.github.io/solid-ui/examples/storybook/) for SolidUI widgets.
+See [Solid-UI API](https://solidos.github.io/solid-ui/Documentation/api/) for SolidUI functions.
+See [Forms introduction](./Documentation/FormsReadme.md) for UI vocabulary implementation.
+
+Table of content:
+- Getting started(#getting-started)
+- Further documentation(#further-ocumentation)
+
+
 ## Getting started
+
+Contributions of bug fixes and new functionality, documentation, and tests are
+always appreciated.
+
 ### In npm-based projects
 When including solid-ui in an npm-based project, you can use it with:
 
 ```js
-  import { ns, rdf,  acl, aclControl, authn, create, dom, icons, log, matrix, media,
-  messageArea, infiniteMessageArea, pad, preferences, store, style, table, tabs, utils, widgets, versionInfo
+  import { ns, rdf,  acl, aclControl, create, dom, icons, log, matrix, media,
+  messageArea, infiniteMessageArea, pad, preferences, style, table, tabs, utils, widgets, versionInfo
 } from 'solid-ui'
 
 ```
@@ -23,10 +36,8 @@ Clone this repo, and in the repo root run:
 * `npm install`
 * `npm run build`
 
-This will generate a `lib/` folder containing, among other artifacts, `lib/webpack-bundle.js`.
-Now run `npx serve` and go to http://localhost:5000/examples/ with your browser to see some examples.
-See the ['examples' folder](https://github.com/solidos/solid-ui/tree/examples/examples) for the
-source code of those examples.
+This will generate a `dist/` folder containing, among other artifacts, `dist/main.js`.
+Now run `npx serve` and go to http://localhost:3000/Documentation/ with your browser to see some examples.
 
 While viewing one of those examples, you can open the web console in your browser and for instance
 try how you can create a button:
@@ -44,56 +55,7 @@ const chat = UI.infiniteMessageArea(document, store, UI.rdf.namedNode(chatChanne
 document.body.appendChild(chat)
 ```
 
-Or a full ACL Control Box:
-```js
-const exampleFolder = 'https://example-user.inrupt.net/public/public-control/'
-const aclControlBox = UI.aclControl.ACLControlBox5(UI.rdf.namedNode(exampleFolder), { dom: document }, '', store)
-document.body.appendChild(aclControlBox)
-```
-
-
-## Documentation
-- [talk presentation](https://solidos.github.io/solid-ui/Documentation/talks/FormsTalk.html)
-- API https://solidos.github.io/solid-ui/Documentation/api/ for the API documentation.
-- The UI components are presented in a [storybook](http://solidos.github.io/solid-ui/examples/storybook/).
-
-## Overview
-This has been a place to put any functionality from solid views which has been generalized to be usable in other views.
-
-- Authentication UI: manage the user's logged in/out state.
-- Discovery: finding the user's stuff, and leaving records of new things
-- Preferences: UI for managing a user's preferences with two axes of defaults
-- An Access Control List widget for Solid ACL system
-- Acess Control Logic
-- Create a new object from modules/extensions which have registered their ability to create things
-
-- A [form system](https://solidos.github.io/solid-ui/Documentation/forms-intro.html): Forms are defined in RDF, and create/edit RDF data, including form definitions
-- A collection of shortcut namespace objects for a selection of relevant RDF vocabularies.
-- Small atomic widgets (buttons etc) of which the others are constructed.
-- An error message panel
-
-Some of the larger controls include:
-
-- A chat widget: add discussion to any object. Infinite scroll, embedded images, social reactions, etc etc
-- A people picker widget for choosing a set of people or an existing group
-- A general purpose table display with built-in faceted browsing
-- A two-dimentional matrix of editable live data that extends in both dimensions.
-- A notepad of shared notes for real-time collaboration
-- Drag and drop code for linking things and uploading files
-- A set of tabs for holding other widgets and arbitrary UI elements
-
-The typical style of the widgets is to know what data it has been derived from,
-allow users to edit it, and to automatically sync with data as it changes in the future.
-To see how these are used, see the panes which use them within the data browser.
-
-The level of support for this varies.
-
-See also: [A short introduction to the Form system](https://solidos.github.io/solid-ui/Documentation/forms-intro.html)
-
-Contributions of bug fixes and new functionality, documentation, and tests are
-always appreciated.
-
-## Development
+### Development new components
 
 When developing a component in solid-ui you can test it in isolation using storybook
 
@@ -104,5 +66,8 @@ npm run storybook
 
 If there is no story for the component yet, add a new one to `./src/stories`.
 
-When you want to test the component within a solid-pane, you can use the [development mode of solid-panes](https://github.com/solidos/solid-panes#development) or
- [mashlib-dev](https://github.com/solidos/mashlib-dev).
+When you want to test the component within a solid-pane, you can use the [development mode of solid-panes](https://github.com/solidos/solid-panes#development).
+ 
+## Further documentation
+
+- [Some code know-how](https://github.com/SolidOS/solidos/wiki/2.-Solid-UI-know-how)

package/dist/main.js

@@ -15172,7 +15172,7 @@ function slice(s, suffix) {
 
 function getWellKnownLabel(thing) {
   return _solidLogic.store.any(thing, UI.ns.ui('label')) || // Prioritize ui:label
-  _solidLogic.store.any(thing, UI.ns.link('message')) || _solidLogic.store.any(thing, UI.ns.vcard('fn')) || _solidLogic.store.any(thing, UI.ns.foaf('name')) || _solidLogic.store.any(thing, UI.ns.dct('title')) || _solidLogic.store.any(thing, UI.ns.dc('title')) || _solidLogic.store.any(thing, UI.ns.rss('title')) || _solidLogic.store.any(thing, UI.ns.contact('fullName')) || _solidLogic.store.any(thing, _solidLogic.store.sym('http://www.w3.org/2001/04/roadmap/org#name')) || _solidLogic.store.any(thing, UI.ns.cal('summary')) || _solidLogic.store.any(thing, UI.ns.foaf('nick')) || _solidLogic.store.any(thing, UI.ns.as('name')) || _solidLogic.store.any(thing, UI.ns.schema('name')) || _solidLogic.store.any(thing, UI.ns.rdfs('label'));
+  _solidLogic.store.any(thing, UI.ns.link('message')) || _solidLogic.store.any(thing, UI.ns.vcard('fn')) || _solidLogic.store.any(thing, UI.ns.foaf('name')) || _solidLogic.store.any(thing, UI.ns.dct('title')) || _solidLogic.store.any(thing, UI.ns.dc('title')) || _solidLogic.store.any(thing, UI.ns.rss('title')) || _solidLogic.store.any(thing, UI.ns.contact('fullName')) || _solidLogic.store.any(thing, _solidLogic.store.sym('http://www.w3.org/2001/04/roadmap/org#name')) || _solidLogic.store.any(thing, UI.ns.cal('summary')) || _solidLogic.store.any(thing, UI.ns.foaf('nick')) || _solidLogic.store.any(thing, UI.ns.as('name')) || _solidLogic.store.any(thing, UI.ns.schema('name')) || _solidLogic.store.any(thing, UI.ns.rdfs('label')) || _solidLogic.store.any(thing, _solidLogic.store.sym('http://www.w3.org/2004/02/skos/core#prefLabel'));
 }
 //# sourceMappingURL=label.js.map
 
@@ -15192,11 +15192,11 @@ Object.defineProperty(exports, "__esModule", ({
 }));
 exports.versionInfo = void 0;
 var versionInfo = {
-  buildTime: '2022-05-12T08:42:06Z',
-  commit: '34c116c1c296d02641c2225bc113a041a920e806',
+  buildTime: '2022-05-20T06:55:49Z',
+  commit: '39d66c72c1c4f433317f3a8f6e3df4d0db35fd6e',
   npmInfo: {
     'solid-ui': '2.4.22',
-    npm: '6.14.16',
+    npm: '6.14.17',
     ares: '1.18.1',
     brotli: '1.0.9',
     cldr: '40.0',
@@ -15205,12 +15205,12 @@ var versionInfo = {
     modules: '83',
     napi: '8',
     nghttp2: '1.42.0',
-    node: '14.19.1',
+    node: '14.19.2',
     openssl: '1.1.1n',
     tz: '2021a3',
     unicode: '14.0',
     uv: '1.42.0',
-    v8: '8.4.371.23-node.85',
+    v8: '8.4.371.23-node.87',
     zlib: '1.2.11'
   }
 };
@@ -17149,6 +17149,7 @@ exports.findClosest = findClosest;
 exports.formsFor = formsFor;
 exports.makeDescription = makeDescription;
 exports.makeSelectForCategory = makeSelectForCategory;
+exports.makeSelectForChoice = makeSelectForChoice;
 exports.makeSelectForNestedCategory = makeSelectForNestedCategory;
 exports.makeSelectForOptions = makeSelectForOptions;
 exports.newButton = newButton;
@@ -17260,6 +17261,7 @@ _fieldFunction.field[ns.ui('Form').uri] = _fieldFunction.field[ns.ui('Group').ur
   var ui = ns.ui;
   if (container) container.appendChild(box); // Prevent loops
 
+  if (!form) return;
   var key = subject.toNT() + '|' + form.toNT();
 
   if (already[key]) {
@@ -18147,8 +18149,6 @@ _fieldFunction.field[ns.ui('Choice').uri] = function (dom, container, already, s
   var kb = _solidLogic.store;
   var formDoc = form.doc ? form.doc() : null; // @@ if blank no way to know
 
-  var uiMultipleInUse = false; // this signals to ui:choice that it is part of a ui:multiple
-
   var multiSelect = false;
   var p;
   var box = dom.createElement('div');
@@ -18178,91 +18178,77 @@ _fieldFunction.field[ns.ui('Choice').uri] = function (dom, container, already, s
 
   var follow = kb.anyJS(form, ui('follow'), null, formDoc); // data doc moves to new subject?
 
-  var possible = [];
-  var possibleProperties;
-  var firstSelectOptionText = '* Select for ' + utils.label(subject, true) + ' *'; // if we do NOT have a container it means it is a ui:Multiple
-  // only important for the first option text in select
-
-  if (!container) {
-    uiMultipleInUse = true;
-    firstSelectOptionText = utils.label(subject, true);
-  }
-
-  if (subject.termType === 'BlankNode') {
-    firstSelectOptionText = '* Select for ' + utils.label(property) + ' *';
-  }
-
   var opts = {
     form: form,
     subForm: subForm,
     multiSelect: multiSelect,
-    firstSelectOptionText: firstSelectOptionText,
-    uiMultipleInUse: uiMultipleInUse,
     disambiguate: false
   };
-  possible = kb.each(undefined, ns.rdf('type'), uiFrom, formDoc);
 
-  for (var x in kb.findMembersNT(uiFrom)) {
-    possible.push(kb.fromNT(x));
-  } // Use rdfs
+  function getSelectorOptions() {
+    var possible = [];
+    var possibleProperties;
+    possible = kb.each(undefined, ns.rdf('type'), uiFrom, formDoc);
 
+    for (var x in kb.findMembersNT(uiFrom)) {
+      possible.push(kb.fromNT(x));
+    } // Use rdfs
 
-  if (uiFrom.sameTerm(ns.rdfs('Class'))) {
-    for (p in buttons.allClassURIs()) {
-      possible.push(kb.sym(p));
-    } // log.debug("%%% Choice field: possible.length 2 = "+possible.length)
 
-  } else if (uiFrom.sameTerm(ns.rdf('Property'))) {
-    possibleProperties = buttons.propertyTriage(kb);
+    if (uiFrom.sameTerm(ns.rdfs('Class'))) {
+      for (p in buttons.allClassURIs()) {
+        possible.push(kb.sym(p));
+      } // log.debug("%%% Choice field: possible.length 2 = "+possible.length)
 
-    for (p in possibleProperties.op) {
-      possible.push(kb.fromNT(p));
-    }
+    } else if (uiFrom.sameTerm(ns.rdf('Property'))) {
+      possibleProperties = buttons.propertyTriage(kb);
 
-    for (p in possibleProperties.dp) {
-      possible.push(kb.fromNT(p));
-    }
+      for (p in possibleProperties.op) {
+        possible.push(kb.fromNT(p));
+      }
+
+      for (p in possibleProperties.dp) {
+        possible.push(kb.fromNT(p));
+      }
 
-    opts.disambiguate = true; // This is a big class, and the labels won't be enough.
-  } else if (uiFrom.sameTerm(ns.owl('ObjectProperty'))) {
-    possibleProperties = buttons.propertyTriage(kb);
+      opts.disambiguate = true; // This is a big class, and the labels won't be enough.
+    } else if (uiFrom.sameTerm(ns.owl('ObjectProperty'))) {
+      possibleProperties = buttons.propertyTriage(kb);
 
-    for (p in possibleProperties.op) {
-      possible.push(kb.fromNT(p));
-    }
+      for (p in possibleProperties.op) {
+        possible.push(kb.fromNT(p));
+      }
 
-    opts.disambiguate = true;
-  } else if (uiFrom.sameTerm(ns.owl('DatatypeProperty'))) {
-    possibleProperties = buttons.propertyTriage(kb);
+      opts.disambiguate = true;
+    } else if (uiFrom.sameTerm(ns.owl('DatatypeProperty'))) {
+      possibleProperties = buttons.propertyTriage(kb);
 
-    for (p in possibleProperties.dp) {
-      possible.push(kb.fromNT(p));
+      for (p in possibleProperties.dp) {
+        possible.push(kb.fromNT(p));
+      }
+
+      opts.disambiguate = true;
     }
 
-    opts.disambiguate = true;
-  }
+    return sortByLabel(possible);
+  } // TODO: this checks for any occurrence, regardless of true or false setting
 
-  var sortedPossible = sortByLabel(possible); // TODO: this checks for any occurrence, regardless of true or false setting
 
   if (kb.any(form, ui('canMintNew'))) {
     opts.mint = '* Create new *'; // @@ could be better
   }
 
-  var selector = makeSelectForOptions(dom, kb, subject, property, sortedPossible, uiFrom, opts, dataDoc, callbackFunction);
-  rhs.appendChild(selector);
-  var object;
+  var selector;
 
-  if (selector.currentURI) {
-    object = $rdf.sym(selector.currentURI);
-  } else {
-    object = kb.any(subject, property);
-  }
-
-  if (object && subForm) {
-    removeNextSiblingsAfterElement(selector);
-    addSubFormChoice(dom, rhs, already, object, subForm, follow ? object.doc() : dataDoc, callbackFunction);
-  }
+  rhs.refresh = function () {
+    var selectorOptions = getSelectorOptions();
+    selector = makeSelectForChoice(dom, rhs, kb, subject, property, selectorOptions, uiFrom, opts, dataDoc, callbackFunction);
+    rhs.innerHTML = '';
+    rhs.appendChild(selector);
+  };
 
+  rhs.refresh();
+  if (selector && selector.refresh) selector.refresh();
   return box;
 };
 /**
@@ -18619,10 +18605,9 @@ function makeDescription(dom, kb, subject, predicate, dataDoc, callbackFunction)
 // @param subject - a term, the subject of the statement(s) being edited.
 // @param predicate - a term, the predicate of the statement(s) being edited
 // @param possible - a list of terms, the possible value the object can take
-// @param options.multiSelect - Boolean - Whether more than one at a time is allowed
-// @param options.firstSelectOptionText - a string to be displayed as the
-//                        option for none selected (for non multiSelect)
-// @param options.uiMultipleInUse - signals that the ui:choise is used with a ui:multiple
+// @param options.multiple - Boolean - Whether more than one at a time is allowed
+// @param options.nullLabel - a string to be displayed as the
+//                        option for none selected (for non multiple)
 // @param options.mint - User may create thing if this sent to the prompt string eg "New foo"
 // @param options.subForm - If mint, then the form to be used for minting the new thing
 // @param dataDoc - The web document being edited
@@ -18630,7 +18615,7 @@ function makeDescription(dom, kb, subject, predicate, dataDoc, callbackFunction)
 */
 
 
-function makeSelectForOptions(dom, kb, subject, predicate, possible, uiFrom, options, dataDoc, callbackFunction) {
+function makeSelectForOptions(dom, kb, subject, predicate, possible, options, dataDoc, callbackFunction) {
   log.debug('Select list length now ' + possible.length);
   var n = 0;
   var uris = {}; // Count them
@@ -18673,6 +18658,8 @@ function makeSelectForOptions(dom, kb, subject, predicate, possible, uiFrom, opt
   actual = getActual();
 
   var onChange = function onChange(_e) {
+    select.disabled = true; // until data written back - gives user feedback too
+
     var ds = [];
     var is = [];
 
@@ -18703,14 +18690,11 @@ function makeSelectForOptions(dom, kb, subject, predicate, possible, uiFrom, opt
           newObject = newThing(dataDoc);
         }
 
-        is.push($rdf.st(subject, predicate, kb.sym(newObject), dataDoc));
-        if (uiFrom) is.push($rdf.st(newObject, ns.rdf('type'), kb.sym(uiFrom), dataDoc)); // not sure if this 'if' is used because I cannot find mintStatementsFun
+        is.push($rdf.st(subject, predicate, newObject, dataDoc)); // not sure if this 'if' is used because I cannot find mintStatementsFun
 
         if (options.mintStatementsFun) {
           is = is.concat(options.mintStatementsFun(newObject));
         }
-
-        select.currentURI = newObject;
       }
 
       if (!opt.AJAR_uri) continue; // a prompt or mint
@@ -18718,7 +18702,11 @@ function makeSelectForOptions(dom, kb, subject, predicate, possible, uiFrom, opt
       if (opt.selected && !(opt.AJAR_uri in actual)) {
         // new class
         is.push($rdf.st(subject, predicate, kb.sym(opt.AJAR_uri), dataDoc));
-        select.currentURI = opt.AJAR_uri;
+      }
+
+      if (!opt.selected && opt.AJAR_uri in actual) {
+        // old class
+        removeValue(kb.sym(opt.AJAR_uri));
       }
 
       if (opt.selected) select.currentURI = opt.AJAR_uri;
@@ -18738,29 +18726,38 @@ function makeSelectForOptions(dom, kb, subject, predicate, possible, uiFrom, opt
       sel = sel.superSelect;
     }
 
-    log.info('selectForOptions: data doc = ' + dataDoc); // refresh subForm
+    function doneNew(ok, _body) {
+      callbackFunction(ok, {
+        widget: 'select',
+        event: 'new'
+      });
+    }
+
+    log.info('selectForOptions: data doc = ' + dataDoc);
+    kb.updater.update(ds, is, function (uri, ok, body) {
+      actual = getActual(); // refresh
 
-    removeNextSiblingsAfterElement(select);
-    addSubFormChoice(dom, select.parentNode, {}, $rdf.sym(select.currentURI), options.subForm, dataDoc, function (ok, body) {
       if (ok) {
-        kb.updater.update(ds, is, function (uri, success, errorBody) {
-          actual = getActual(); // refresh
+        select.disabled = false; // data written back
 
-          if (!success) select.parentNode.appendChild((0, _error.errorMessageBlock)(dom, 'Error updating select: ' + errorBody));
-        });
-        if (callbackFunction) callbackFunction(ok, {
-          widget: 'select',
-          event: 'new'
-        });
+        if (newObject) {
+          var fn = (0, _fieldFunction.fieldFunction)(dom, options.subForm);
+          fn(dom, select.parentNode, {}, newObject, options.subForm, dataDoc, doneNew);
+        }
       } else {
-        select.parentNode.appendChild((0, _error.errorMessageBlock)(dom, 'Error updating data in field of select: ' + body));
+        return select.parentNode.appendChild((0, _error.errorMessageBlock)(dom, 'Error updating data in select: ' + body));
       }
+
+      if (callbackFunction) callbackFunction(ok, {
+        widget: 'select',
+        event: 'change'
+      });
     });
   };
 
   var select = dom.createElement('select');
   select.setAttribute('style', style.formSelectSTyle);
-  if (options.multiSelect) select.setAttribute('multiSelect', 'true');
+  if (options.multiple) select.setAttribute('multiple', 'true');
   select.currentURI = null;
 
   select.refresh = function () {
@@ -18811,14 +18808,11 @@ function makeSelectForOptions(dom, kb, subject, predicate, possible, uiFrom, opt
     select.insertBefore(mint, select.firstChild);
   }
 
-  if (!select.currentURI && options.uiMultipleInUse) {
+  if (select.currentURI == null && !options.multiple) {
     var prompt = dom.createElement('option');
-    prompt.appendChild(dom.createTextNode(options.firstSelectOptionText));
-    prompt.disabled = true;
-    prompt.value = true;
-    prompt.hidden = true;
-    prompt.selected = true;
+    prompt.appendChild(dom.createTextNode(options.nullLabel));
     select.insertBefore(prompt, select.firstChild);
+    prompt.selected = true;
   }
 
   if (editable) {
@@ -18837,11 +18831,11 @@ function makeSelectForOptions(dom, kb, subject, predicate, possible, uiFrom, opt
 function makeSelectForCategory(dom, kb, subject, category, dataDoc, callbackFunction) {
   var du = kb.any(category, ns.owl('disjointUnionOf'));
   var subs;
-  var multiSelect = false;
+  var multiple = false;
 
   if (!du) {
     subs = kb.each(undefined, ns.rdfs('subClassOf'), category);
-    multiSelect = true;
+    multiple = true;
   } else {
     subs = du.elements;
   }
@@ -18849,15 +18843,16 @@ function makeSelectForCategory(dom, kb, subject, category, dataDoc, callbackFunc
   log.debug('Select list length ' + subs.length);
 
   if (subs.length === 0) {
-    return (0, _error.errorMessageBlock)(dom, "Can't do " + (multiSelect ? 'multiple ' : '') + 'selector with no subclasses of category: ' + category);
+    return (0, _error.errorMessageBlock)(dom, "Can't do " + (multiple ? 'multiple ' : '') + 'selector with no subclasses of category: ' + category);
   }
 
   if (subs.length === 1) {
-    return (0, _error.errorMessageBlock)(dom, "Can't do " + (multiSelect ? 'multiple ' : '') + 'selector with only 1 subclass of category: ' + category + ':' + subs[1]);
+    return (0, _error.errorMessageBlock)(dom, "Can't do " + (multiple ? 'multiple ' : '') + 'selector with only 1 subclass of category: ' + category + ':' + subs[1]);
   }
 
-  return makeSelectForOptions(dom, kb, subject, ns.rdf('type'), subs, null, {
-    multiSelect: multiSelect
+  return makeSelectForOptions(dom, kb, subject, ns.rdf('type'), subs, {
+    multiple: multiple,
+    nullPrompt: '--classify--'
   }, dataDoc, callbackFunction);
 }
 /** Make SELECT element to select subclasses recurively
@@ -19047,6 +19042,199 @@ function newThing(doc) {
   var now = new Date();
   return $rdf.sym(doc.uri + '#' + 'id' + ('' + now.getTime()));
 }
+/** Make SELECT element to select options
+//
+// @param subject - a term, the subject of the statement(s) being edited.
+// @param predicate - a term, the predicate of the statement(s) being edited
+// @param possible - a list of terms, the possible value the object can take
+// @param options.multiSelect - Boolean - Whether more than one at a time is allowed
+// @param options.uiMultipleInUse - signals that the ui:choise is used with a ui:multiple
+// @param options.mint - User may create thing if this sent to the prompt string eg "New foo"
+// @param options.subForm - If mint, then the form to be used for minting the new thing
+// @param dataDoc - The web document being edited
+// @param callbackFunction - takes (boolean ok, string errorBody)
+*/
+
+
+function makeSelectForChoice(dom, container, kb, subject, predicate, possible, uiFrom, options, dataDoc, callbackFunction) {
+  var n = 0;
+  var uris = {}; // Count them
+
+  var editable = kb.updater.editable(dataDoc.uri);
+
+  for (var i = 0; i < possible.length; i++) {
+    var sub = possible[i]; // @@ Maybe; make this so it works with blank nodes too
+
+    if (!sub.uri) debug.warn("makeSelectForOptions: option does not have an uri: ".concat(sub, ", with predicate: ").concat(predicate));
+    if (!sub.uri || sub.uri in uris) continue;
+    uris[sub.uri] = true;
+    n++;
+  } // uris is now the set of possible options
+
+
+  if (n === 0 && !options.mint) {
+    return (0, _error.errorMessageBlock)(dom, "Can't do selector with no options, subject= " + subject + ' property = ' + predicate + '.');
+  }
+
+  log.debug('makeSelectForOptions: dataDoc=' + dataDoc);
+
+  function determinFirstSelectOption() {
+    var firstSelectOptionText = '--- classify ---';
+    var option = dom.createElement('option');
+
+    if (predicate && !(predicate.termType === 'BlankNode')) {
+      firstSelectOptionText = '* Select for property: ' + utils.label(predicate) + ' *';
+    }
+
+    if (subject && !(subject.termType === 'BlankNode')) {
+      firstSelectOptionText = '* Select for ' + utils.label(subject, true) + ' *';
+    }
+
+    option.appendChild(dom.createTextNode(firstSelectOptionText));
+    option.disabled = true;
+    option.value = true;
+    option.hidden = true;
+    option.selected = true;
+    return option;
+  }
+
+  var onChange = function onChange(_e) {
+    select.refresh();
+  };
+
+  var select = dom.createElement('select');
+  select.setAttribute('style', style.formSelectSTyle);
+  if (options.multiSelect) select.setAttribute('multiSelect', 'true');
+  select.currentURI = null;
+  var object = kb.any(subject, predicate);
+  if (object) select.currentURI = object;
+
+  for (var uri in uris) {
+    select.appendChild(createOption(uri));
+  }
+
+  if (editable && options.mint) {
+    var mint = dom.createElement('option');
+    mint.appendChild(dom.createTextNode(options.mint));
+    mint.AJAR_mint = true; // Flag it
+
+    select.insertBefore(mint, select.firstChild);
+  }
+
+  if (select.children.length === 0) select.insertBefore(determinFirstSelectOption(), select.firstChild);
+
+  select.refresh = function () {
+    select.disabled = true; // unlocked any conflict we had got into
+
+    var ds = [];
+    var is = [];
+
+    var removeValue = function removeValue(t) {
+      if (kb.holds(subject, predicate, t, dataDoc)) {
+        ds.push($rdf.st(subject, predicate, t, dataDoc));
+      }
+    };
+
+    var newObject;
+
+    for (var _i3 = 0; _i3 < select.options.length; _i3++) {
+      var opt = select.options[_i3];
+
+      if (opt.selected && opt.AJAR_mint) {
+        // not sure if this 'if' is used because I cannot find mintClass
+        if (options.mintClass) {
+          var thisForm = promptForNew(dom, kb, subject, predicate, options.mintClass, null, dataDoc, function (ok, body) {
+            if (!ok) {
+              callbackFunction(ok, body, {
+                change: 'new'
+              }); // @@ if ok, need some form of refresh of the select for the new thing
+            }
+          });
+          select.parentNode.appendChild(thisForm);
+          newObject = thisForm.AJAR_subject;
+        } else {
+          newObject = newThing(dataDoc);
+        }
+
+        is.push($rdf.st(subject, predicate, kb.sym(newObject), dataDoc));
+        if (uiFrom) is.push($rdf.st(newObject, ns.rdf('type'), kb.sym(uiFrom), dataDoc)); // not sure if this 'if' is used because I cannot find mintStatementsFun
+
+        if (options.mintStatementsFun) {
+          is = is.concat(options.mintStatementsFun(newObject));
+        }
+
+        select.currentURI = newObject;
+      }
+
+      if (!opt.AJAR_uri) continue; // a prompt or mint
+
+      if (opt.selected) select.currentURI = opt.AJAR_uri;
+    }
+
+    var sel = select.subSelect; // All subclasses must also go
+
+    while (sel && sel.currentURI) {
+      removeValue(kb.sym(sel.currentURI));
+      sel = sel.subSelect;
+    }
+
+    sel = select.superSelect; // All superclasses are redundant
+
+    while (sel && sel.currentURI) {
+      removeValue(kb.sym(sel.currentURI));
+      sel = sel.superSelect;
+    }
+
+    log.info('selectForOptions: data doc = ' + dataDoc);
+
+    if (select.currentURI) {
+      removeNextSiblingsAfterElement(select);
+      addSubFormChoice(dom, container, {}, $rdf.sym(select.currentURI), options.subForm, dataDoc, function (ok, body) {
+        if (ok) {
+          kb.updater.update(ds, is, function (uri, success, errorBody) {
+            if (!success) container.appendChild((0, _error.errorMessageBlock)(dom, 'Error updating select: ' + errorBody));
+          });
+          if (callbackFunction) callbackFunction(ok, {
+            widget: 'select',
+            event: 'new'
+          }); // widgets.refreshTree(container)
+        } else {
+          container.appendChild((0, _error.errorMessageBlock)(dom, 'Error updating data in field of select: ' + body));
+        }
+      });
+    }
+
+    select.disabled = false;
+  };
+
+  function createOption(uri) {
+    var option = dom.createElement('option');
+    var c = kb.sym(uri);
+
+    if (options.disambiguate) {
+      option.appendChild(dom.createTextNode(utils.labelWithOntology(c, true))); // Init. cap
+    } else {
+      option.appendChild(dom.createTextNode(utils.label(c, true))); // Init.
+    }
+
+    var backgroundColor = kb.any(c, kb.sym('http://www.w3.org/ns/ui#backgroundColor'));
+
+    if (backgroundColor) {
+      option.setAttribute('style', 'background-color: ' + backgroundColor.value + '; ');
+    }
+
+    option.AJAR_uri = uri;
+    if (c.toString() === '' + select.currentURI) option.selected = true;
+    return option;
+  }
+
+  if (editable) {
+    select.addEventListener('change', onChange, false);
+  }
+
+  select.refresh();
+  return select;
+} // makeSelectForChoice
 //# sourceMappingURL=forms.js.map
 
 /***/ }),