<commit_before>define(
  'ephox.alloy.api.ui.HtmlSelect',

  [
    'ephox.alloy.api.ui.UiBuilder',
    'ephox.alloy.data.Fields',
    'ephox.boulder.api.FieldSchema',
    'ephox.compass.Arr',
    'ephox.highway.Merger',
    'ephox.peanut.Fun',
    'ephox.perhaps.Result',
    'ephox.sugar.api.TextContent',
    'ephox.sugar.api.Value'
  ],

  function (UiBuilder, Fields, FieldSchema, Arr, Merger, Fun, Result, TextContent, Value) {
    var schema = [
      FieldSchema.strict('options'),
      Fields.members([ 'option' ]),
      FieldSchema.option('data')
    ];

    // Dupe with Tiered Menu
    var build = function (spec) {
      return UiBuilder.single('html-select', schema, make, spec);
    };

    var make = function (detail, spec) {
      var options = Arr.map(detail.options(), function (option) {
        return Merger.deepMerge(
          detail.members().option().munge(option),
          {
            uiType: 'custom',
            dom: {
              tag: 'option',
              value: option.value,
              innerHtml: option.text
            }
          }
        );
      });


      return Merger.deepMerge(
        spec,
        {
          dom: {
            tag: 'select'
          },
          components: options,
          behaviours: {
            focusing: true,
            representing: {
              extractValue: function (comp, data) {
                // See if there is something that matches value
                var matching = Arr.find(detail.options(), function (opt) {
                  return opt.value === data.value;
                });

                console.log('matching', matching);

                // FIX: Update with katamari
                return matching !== undefined && matching !== null ? Result.value(matching) : Result.error('Not found');
              },

              interactive: {
                event: 'input',
                process: function (comp) {
                  return {
                    value: Value.get(comp.element()),
                    text: TextContent.get(comp.element())
                  };
                }
              },

              onSet: function (comp, data) {
                console.log('data', data.value);
                Value.set(comp.element(), data.value);
              },

              store: {
                mode: 'memory',
                // TODO: Check this
                initialValue: detail.data().getOr(detail.options()[0]),
                
              }
            }
          }
        }
      );
    };

    return {
      build: build,
      name: Fun.constant('html-select')
    };
  }<commit_msg>VAN-44-wheel-hackery-apis-2: tabstopping for selects<commit_after>define(
  'ephox.alloy.api.ui.HtmlSelect',

  [
    'ephox.alloy.api.ui.UiBuilder',
    'ephox.alloy.data.Fields',
    'ephox.boulder.api.FieldSchema',
    'ephox.compass.Arr',
    'ephox.highway.Merger',
    'ephox.peanut.Fun',
    'ephox.perhaps.Result',
    'ephox.sugar.api.TextContent',
    'ephox.sugar.api.Value'
  ],

  function (UiBuilder, Fields, FieldSchema, Arr, Merger, Fun, Result, TextContent, Value) {
    var schema = [
      FieldSchema.strict('options'),
      Fields.members([ 'option' ]),
      FieldSchema.option('data'),
      FieldSchema.defaulted('hasTabstop', true)
    ];

    // Dupe with Tiered Menu
    var build = function (spec) {
      return UiBuilder.single('html-select', schema, make, spec);
    };

    var make = function (detail, spec) {
      var options = Arr.map(detail.options(), function (option) {
        return Merger.deepMerge(
          detail.members().option().munge(option),
          {
            uiType: 'custom',
            dom: {
              tag: 'option',
              value: option.value,
              innerHtml: option.text
            }
          }
        );
      });


      return Merger.deepMerge(
        spec,
        {
          dom: {
            tag: 'select'
          },
          components: options,
          behaviours: {
            focusing: true,
            representing: {
              extractValue: function (comp, data) {
                // See if there is something that matches value
                var matching = Arr.find(detail.options(), function (opt) {
                  return opt.value === data.value;
                });

                console.log('matching', matching);

                // FIX: Update with katamari
                return matching !== undefined && matching !== null ? Result.value(matching) : Result.error('Not found');
              },

              interactive: {
                event: 'input',
                process: function (comp) {
                  return {
                    value: Value.get(comp.element()),
                    text: TextContent.get(comp.element())
                  };
                }
              },

              onSet: function (comp, data) {
                console.log('data', data.value);
                Value.set(comp.element(), data.value);
              },

              store: {
                mode: 'memory',
                // TODO: Check this
                initialValue: detail.data().getOr(detail.options()[0]),
                
              }
            },

            // FIX: Undefined
            tabstopping: detail.hasTabstop() ? true : undefined
          }
        }
      );
    };

    return {
      build: build,
      name: Fun.constant('html-select')
    };
  }
{'fraction_non_alphanumeric': 0.12880175888603884, 'fraction_numerical': 0.0009160864785635764, 'mean_word_length': 1.389059080962801, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3303985', 'n_tokens_mistral': 1530, 'n_tokens_neox': 1485, 'n_words': 291}