How to use the @ephox/katamari.Option.none function in @ephox/katamari

export const renderFooterButton = (spec: FooterButtonSpec, buttonType: string, backstage: UiFactoryBackstage): SketchSpec => {
  if (isMenuFooterButtonSpec(spec, buttonType)) {
    return renderMenuButton(spec, ToolbarButtonClasses.Button, backstage, Option.none());
  } else if (isNormalFooterButtonSpec(spec, buttonType)) {
    const action = getAction(spec.name, buttonType);
    const buttonSpec = {
      ...spec,
      borderless: false
    };
    return renderButton(buttonSpec, action, backstage.shared.providers, [ ]);
  } else {
    // tslint:disable-next-line:no-console
    console.error('Unknown footer button type: ', buttonType);
  }
};

const fixedContainerElement = (editor): Option<element> =&gt; {
  const selector = fixedContainerSelector(editor);
  // If we have a valid selector and are in inline mode, try to get the fixed_toolbar_container
  return selector.length &gt; 0 &amp;&amp; editor.inline ? SelectorFind.descendant(Body.body(), selector) : Option.none();
};
</element>

}, () => {
            console.log('clicked on the button in the grid wrapped by a label');
          }, sharedBackstage.providers) as any,
          renderCheckbox({
            label: 'check box item 1',
            name: 'one',
            disabled: false
          }, sharedBackstage.providers) as any,
          renderCheckbox({
            label: 'check box item 2',
            name: 'two',
            disabled: false
          }, sharedBackstage.providers) as any,
          renderInput({
            label: Option.some('Sample input'),
            inputMode: Option.none(),
            placeholder: Option.none(),
            name: 'exampleinputfieldname',
            maximized: false,
            disabled: false
          }, sharedBackstage.providers) as any
        ]
      }, sharedBackstage) as any
    ]
  }, sharedBackstage);

  const listboxSpec = renderListbox({
    name: 'listbox1',
    label: 'Listbox',
    values: [
      { value: 'alpha', text: 'Alpha' },
      { value: 'beta', text: 'Beta' },

{
      name: 'text',
      type: 'input',
      label: 'Text to display'
    }
  )).toArray();

  const titleText: Types.Dialog.BodyComponentApi[] = settings.flags.titleEnabled ? [
    {
      name: 'title',
      type: 'input',
      label: 'Title'
    }
  ] : [];

  const defaultTarget: Option = Settings.hasDefaultLinkTarget(editorSettings) ? Option.some(Settings.getDefaultLinkTarget(editorSettings)) : Option.none();

  const initialData = getInitialData(settings, defaultTarget);
  const dialogDelta = DialogChanges.init(initialData, settings);
  const catalogs = settings.catalogs;

  const body: Types.Dialog.PanelApi = {
    type: 'panel',
    items: Arr.flatten([
      urlInput,
      displayText,
      titleText,
      Options.cat([
        catalogs.anchor.map(ListOptions.createUi('anchor', 'Anchors')),
        catalogs.rels.map(ListOptions.createUi('rel', 'Rel')),
        catalogs.targets.map(ListOptions.createUi('target', 'Open link in...')),
        catalogs.link.map(ListOptions.createUi('link', 'Link list')),

onAction: (formApi) => {
          const anchor = Utils.getAnchorElement(editor);
          const value = formApi.getValue();
          if (!anchor) {
            const attachState = { href: value, attach: () => { } };
            const onlyText = Utils.isOnlyTextSelected(editor.selection.getContent());
            const text: Option = onlyText ? Option.some(Utils.getAnchorText(editor.selection, anchor)).filter((t) => t.length > 0).or(Option.from(value)) : Option.none();
            Utils.link(editor, attachState, {
              href: value,
              text,
              title: Option.none(),
              rel: Option.none(),
              target: Option.none(),
              class: Option.none()
            });
            formApi.hide();
          } else {
            editor.dom.setAttrib(anchor, 'href', value);
            collapseSelectionToEnd(editor);
            formApi.hide();
          }
        }
      },

const getOpt =  (obj: T, key: K): Option =>
  hasOwnProperty.call(obj, key) ? Option.some(obj[key]) : Option.none();

return Options.findMap(toolbars, (toolbarApi) =>
    toolbarApi.predicate(elem.dom()) ? Option.some({ toolbarApi, elem }) : Option.none());
};

focusedElm.get().each((elem) => {
            restoreFocus(comp.element(), elem);
            focusedElm.set(Option.none());
          });
        },

const getPreviewFor = (format: string) => () => {
    return Option.none();
  };

startData.get().each((data) => {
        if (isFarEnough(touch, data)) {
          startData.set(Option.none());
          longpressFired.set(false);
          editor.fire('longpresscancel');
        }
      });
    });