How to use the @cycle/dom.ul function in @cycle/dom

return state$.map(({showOptions, selectedOption, options, labelName}) =>
      div({className: styles.input_field}, [
        div({className: styles.select_wrapper}, [
            span({className: styles.caret}, '▼'),
            input({id: 'input' ,className: styles.input /*select_dropdown*/, readOnly: true, type: 'text', value: `${selectedOption}`}),
            span({className: styles.bar}),
            (!showOptions ? null : // nulls are just ignored by hyperscript
            ul({className: styles.dropdownContent, },
               options.map(option => li({className: (option == selectedOption? styles.dropLiActive:styles.dropLi)},
                                        [span({className: styles.dropLiSpan}, option) ] ))
            ))
        ]),
        label({className: styles.labelActive}, labelName)
      ])
      );

function renderFooter(todosData) {
  let amountCompleted = todosData.list
    .filter(todoData => todoData.completed)
    .length;
  let amountActive = todosData.list.length - amountCompleted;
  let footerStyle = {'display': todosData.list.length ? '' : 'none'};

  return footer('.footer', {style: footerStyle}, [
    span('.todo-count', [
      strong(String(amountActive)),
      ' item' + (amountActive !== 1 ? 's' : '') + ' left'
    ]),
    ul('.filters', [
      renderFilterButton(todosData, '', '/', 'All'),
      renderFilterButton(todosData, 'active', '/active', 'Active'),
      renderFilterButton(todosData, 'completed', '/completed', 'Completed'),
    ]),
    (amountCompleted > 0 ?
      button('.clear-completed', 'Clear completed (' + amountCompleted + ')')
      : null
    )
  ])
}

function renderAutocompleteMenu({suggestions, highlighted}) {
  if (suggestions.length === 0) { return ul() }
  const childStyle = index => (Object.assign({}, autocompleteItemStyle, {
    backgroundColor: highlighted === index ? LIGHT_GREEN : null
  }))

  return ul('.autocomplete-menu', {style: autocompleteMenuStyle},
    suggestions.map((suggestion, index) =>
      li('.autocomplete-item',
        {style: childStyle(index), attrs: {'data-index': index}},
        suggestion
      )
    )
  )
}

const home = () => ({
  DOM: O.just(
    div([
      ul('.tile-grid', COMPONENTS.map((component) =>
        li('.tile-item', a('.tile-link', {
          href: component.url,
        }, component.name))
      )),
      a({
        href: GITHUB_URL,
      }, [
        img({
          src: GITHUB_BADGE_URL,
          dataset: {
            canonicalSrc: GITHUB_BADGE_URL_CANON,
          },
          style: {
            position: 'absolute',
            top: 0,
            right: 0,

div('.action-list-item', [
          button('.action-button', {
            attributes: {'data-panel': 'save'},
            title: 'Export Diagram...',
          }, exportIcon(24)),
        ]),
        div('.action-list-item', [
          button('.action-button', {
            attributes: {'data-panel': 'help'},
            title: 'Help...',
          }, helpIcon(24)),
        ]),
      ]),
    ]),

    ul('.fsm-edit-mode-list', [
      li('.fsm-edit-mode-list-item', [
        button('.fsm-edit-mode-button' +
        (state.currentEditMode === 'edit' ? '.state-active' : ''), {
          attributes: {
            disabled: attrBool(state.currentEditMode === 'edit'),
            'data-edit-mode': 'edit',
          },
        }, 'Edit'),
      ]),
      li('.fsm-edit-mode-list-item', [
        button('.fsm-edit-mode-button' +
        (state.currentEditMode === 'simulate' ? '.state-active' : ''), {
          attributes: {
            disabled: attrBool(state.currentEditMode === 'simulate'),
            'data-edit-mode': 'simulate',
          },

return searchResults$.map((results: any[]) =>
    div('.pure-g', [
      div('.pure-u-2-3', [
        h2('Github Search'),

        form('.pure-form.pure-form-stacked', [
          div('.pure-g', [
            labelField('search', 'Description'),
            labelField('language', 'Language'),
            labelField('stars', 'Min Stars'),
          ])
        ]),

        hr({ style: { width: '90%' } }),

        ul('.search-results', results.map(result =>
          li('.search-result', [
            a({ attrs: { href: result.html_url } }, result.name)
          ])
        ))
      ]),
      div('.pure-u-1-3', [
        p(`This screen demonstrates an incremental, debounced search implemented
        with Cycle. It is adapted from another published Github search example.`)
      ])
    ])
  );

function main({ DOM }: Sources): Sinks {
    const vdom$: Stream = xs
        .of(
            ul('.ul', [
                li('.li', '', [
                    'You have to hold for 500ms to start reordering'
                ]),
                li('.li', '', ['Option 2']),
                li('.li', '', ['Option 3']),
                li('.li', '', ['Option 4']),
                li('.li', '', ['Option 5']),
                li('.li', '', ['Option 6'])
            ])
        )
        .compose(
            makeSortable>(DOM, {
                ghostClass: '.ghost',
                selectionDelay: 500
            })
        );

a(
                      '.dib.btn-icon',
                      { attrs: { href: '/', tabindex: 0 } },
                      span('.icon-left-open')
                  ),
                  h2('.pl2.flex-auto.fade-in', slugs[category].name),
              ]
            : [
                  h2('.flex-auto.fade-in', 'Todas las categorias'),
                  div('.dropdown.dropdown-right.fade-in', [
                      a(
                          '.dib.btn-icon.dropdown-toggle',
                          { attrs: { tabindex: 0 } },
                          span('.icon-down-open')
                      ),
                      ul('.menu', menu),
                  ]),
              ]
    );
}

const renderModeButton = (state) => {
  const modeName = state.currentKvMode.name;
  return div('.loop-mode-switch', [
    ul('.loop-mode-options', [
      li('.loop-mode-options-item', [
        button('.loop-mode' +
          (modeName === 'dnf' ? '.state-active' : '')
        , {
          attributes: {'data-kv-mode': 'dnf'},
        }, 'DNF'),
      ]),
      li('.loop-mode-options-item', [
        button('.loop-mode' +
          (modeName === 'knf' ? '.state-active' : '')
        , {
          attributes: {'data-kv-mode': 'knf'},
        }, 'KNF'),
      ]),
    ]),
  ]);

    .map(itemVNodes => ul(itemVNodes));