opentiny 6.9.0

package/src/themes/silver/main/ts/ui/dialog/BodyPanel.ts

@@ -0,0 +1,74 @@
+import { AddEventsBehaviour, AlloyEvents, Behaviour, Form as AlloyForm, Keying, Memento, NativeEvents, SimpleSpec } from '@ephox/alloy';
+import { Dialog } from '@ephox/bridge';
+import { Arr, Fun, Optional } from '@ephox/katamari';
+
+import { UiFactoryBackstage } from '../../backstage/Backstage';
+import { ComposingConfigs } from '../alien/ComposingConfigs';
+import * as RepresentingConfigs from '../alien/RepresentingConfigs';
+import * as FormValues from '../general/FormValues';
+import * as NavigableObject from '../general/NavigableObject';
+import { interpretInForm } from '../general/UiFactory';
+import { dialogFocusShiftedChannel } from '../window/DialogChannels';
+
+export type BodyPanelSpec = Omit<Dialog.Panel, 'type'>;
+
+const renderBodyPanel = (spec: BodyPanelSpec, dialogData: Dialog.DialogData, backstage: UiFactoryBackstage): SimpleSpec => {
+  const memForm = Memento.record(
+    AlloyForm.sketch((parts) => ({
+      dom: {
+        tag: 'div',
+        classes: [ 'tox-form' ].concat(spec.classes)
+      },
+      // All of the items passed through the form need to be put through the interpreter
+      // with their form part preserved.
+      components: Arr.map(spec.items, (item) => interpretInForm(parts, item, dialogData, backstage))
+    }))
+  );
+
+  return {
+    dom: {
+      tag: 'div',
+      classes: [ 'tox-dialog__body' ]
+    },
+    components: [
+      {
+        dom: {
+          tag: 'div',
+          classes: [ 'tox-dialog__body-content' ]
+        },
+        components: [
+          memForm.asSpec()
+        ]
+      }
+    ],
+    behaviours: Behaviour.derive([
+      Keying.config({
+        mode: 'acyclic',
+        useTabstopAt: Fun.not(NavigableObject.isPseudoStop)
+      }),
+      ComposingConfigs.memento(memForm),
+      RepresentingConfigs.memento(memForm, {
+        postprocess: (formValue: Record<string, Optional<unknown>>) => FormValues.toValidValues(formValue).fold(
+          (err) => {
+            // eslint-disable-next-line no-console
+            console.error(err);
+            return { };
+          },
+          Fun.identity
+        )
+      }),
+      AddEventsBehaviour.config('dialog-body-panel', [
+        // TINY-10101: This is to cater for the case where clicks are made into the dialog instead using keyboard navigation, as FocusShifted would not be triggered in that case.
+        AlloyEvents.run(NativeEvents.focusin(), (comp, se) => {
+          comp.getSystem().broadcastOn([ dialogFocusShiftedChannel ], {
+            newFocus: Optional.some(se.event.target)
+          });
+        }),
+      ])
+    ])
+  };
+};
+
+export {
+  renderBodyPanel
+};

package/src/themes/silver/main/ts/ui/dialog/Collection.ts

@@ -0,0 +1,195 @@
+import {
+  AddEventsBehaviour, AlloyComponent, AlloyEvents, AlloyTriggers, Behaviour, Bubble, Disabling, EventFormat, FormField as AlloyFormField, Keying,
+  Layout,
+  NativeEvents, Replacing, Representing, SimulatedEvent, SketchSpec, SystemEvents, Tabstopping, Tooltipping
+} from '@ephox/alloy';
+import { Dialog } from '@ephox/bridge';
+import { Arr, Fun, Optional } from '@ephox/katamari';
+import { Attribute, Class, EventArgs, Focus, Html, SelectorFilter, SelectorFind, SugarElement } from '@ephox/sugar';
+
+import Entities from 'tinymce/core/api/html/Entities';
+import I18n from 'tinymce/core/api/util/I18n';
+import { renderFormFieldWith, renderLabel } from 'tinymce/themes/silver/ui/alien/FieldLabeller';
+
+import { UiFactoryBackstageProviders } from '../../backstage/Backstage';
+import * as ReadOnly from '../../ReadOnly';
+import { detectSize } from '../alien/FlatgridAutodetect';
+import { formActionEvent, formResizeEvent } from '../general/FormEvents';
+import * as ItemClasses from '../menus/item/ItemClasses';
+import { deriveCollectionMovement } from '../menus/menu/MenuMovement';
+
+type CollectionSpec = Omit<Dialog.Collection, 'type'>;
+
+type ItemCallback<T extends EventFormat> = (c: AlloyComponent, se: SimulatedEvent<T>, tgt: SugarElement<HTMLElement>, itemValue: string | undefined) => void;
+
+export const renderCollection = (
+  spec: CollectionSpec,
+  providersBackstage: UiFactoryBackstageProviders,
+  initialData: Optional<Dialog.CollectionItem[]>
+): SketchSpec => {
+  // DUPE with TextField.
+  const pLabel = spec.label.map((label) => renderLabel(label, providersBackstage));
+
+  const icons = providersBackstage.icons();
+
+  // TINY-10174: Icon string is either in icon pack or displayed directly
+  const getIcon = (icon: string) => icons[icon] ?? icon;
+
+  const runOnItem = <T extends EventFormat>(f: ItemCallback<T>) => (comp: AlloyComponent, se: SimulatedEvent<T>) => {
+    SelectorFind.closest<HTMLElement>(se.event.target, '[data-collection-item-value]').each((target) => {
+      f(comp, se, target, Attribute.get(target, 'data-collection-item-value'));
+    });
+  };
+
+  const setContents = (comp: AlloyComponent, items: Dialog.CollectionItem[]) => {
+    const htmlLines = Arr.map(items, (item) => {
+      const itemText = I18n.translate(item.text);
+      const textContent = spec.columns === 1 ? `<div class="tox-collection__item-label">${itemText}</div>` : '';
+
+      const iconContent = `<div class="tox-collection__item-icon">${getIcon(item.icon)}</div>`;
+
+      // Replacing the hyphens and underscores in collection items with spaces
+      // to ensure the screen readers pronounce the words correctly.
+      // This is only for aria purposes. Emoticon and Special Character names will still use _ and - for autocompletion.
+      const mapItemName: Record<string, string> = {
+        '_': ' ',
+        ' - ': ' ',
+        '-': ' '
+      };
+
+      // Using aria-label here overrides the Apple description of emojis and special characters in Mac/ MS description in Windows.
+      // But if only the title attribute is used instead, the names are read out twice. i.e., the description followed by the item.text.
+      const ariaLabel = itemText.replace(/\_| \- |\-/g, (match) => mapItemName[match]);
+
+      const disabledClass = providersBackstage.isDisabled() ? ' tox-collection__item--state-disabled' : '';
+      return `<div data-mce-tooltip="${ariaLabel}" class="tox-collection__item${disabledClass}" tabindex="-1" data-collection-item-value="${Entities.encodeAllRaw(item.value)}" aria-label="${ariaLabel}">${iconContent}${textContent}</div>`;
+    });
+
+    const chunks = spec.columns !== 'auto' && spec.columns > 1 ? Arr.chunk(htmlLines, spec.columns) : [ htmlLines ];
+    const html = Arr.map(chunks, (ch) => `<div class="tox-collection__group">${ch.join('')}</div>`);
+
+    Html.set(comp.element, html.join(''));
+  };
+
+  const onClick = runOnItem((comp, se, tgt, itemValue) => {
+    se.stop();
+    if (!providersBackstage.isDisabled()) {
+      AlloyTriggers.emitWith(comp, formActionEvent, {
+        name: spec.name,
+        value: itemValue
+      });
+    }
+  });
+
+  const collectionEvents = [
+    AlloyEvents.run<EventArgs>(NativeEvents.mouseover(), runOnItem((comp, se, tgt) => {
+      Focus.focus(tgt);
+    })),
+    AlloyEvents.run<EventArgs>(NativeEvents.click(), onClick),
+    AlloyEvents.run<EventArgs>(SystemEvents.tap(), onClick),
+    AlloyEvents.run(NativeEvents.focusin(), runOnItem((comp, se, tgt) => {
+      SelectorFind.descendant(comp.element, '.' + ItemClasses.activeClass).each((currentActive) => {
+        Class.remove(currentActive, ItemClasses.activeClass);
+      });
+      Class.add(tgt, ItemClasses.activeClass);
+    })),
+    AlloyEvents.run(NativeEvents.focusout(), runOnItem((comp) => {
+      SelectorFind.descendant<HTMLElement>(comp.element, '.' + ItemClasses.activeClass).each((currentActive) => {
+        Class.remove(currentActive, ItemClasses.activeClass);
+        Focus.blur(currentActive);
+      });
+    })),
+    AlloyEvents.runOnExecute(runOnItem((comp, se, tgt, itemValue) => {
+      AlloyTriggers.emitWith(comp, formActionEvent, {
+        name: spec.name,
+        value: itemValue
+      });
+    })),
+  ];
+
+  const iterCollectionItems = (comp: AlloyComponent, applyAttributes: (element: SugarElement<Element>) => void) =>
+    Arr.map(SelectorFilter.descendants(comp.element, '.tox-collection__item'), applyAttributes);
+
+  const pField = AlloyFormField.parts.field({
+    dom: {
+      tag: 'div',
+      // FIX: Read from columns
+      classes: [ 'tox-collection' ].concat(spec.columns !== 1 ? [ 'tox-collection--grid' ] : [ 'tox-collection--list' ])
+    },
+    components: [ ],
+    factory: { sketch: Fun.identity },
+    behaviours: Behaviour.derive([
+      Disabling.config({
+        disabled: providersBackstage.isDisabled,
+        onDisabled: (comp) => {
+          iterCollectionItems(comp, (childElm) => {
+            Class.add(childElm, 'tox-collection__item--state-disabled');
+            Attribute.set(childElm, 'aria-disabled', true);
+          });
+        },
+        onEnabled: (comp) => {
+          iterCollectionItems(comp, (childElm) => {
+            Class.remove(childElm, 'tox-collection__item--state-disabled');
+            Attribute.remove(childElm, 'aria-disabled');
+          });
+        }
+      }),
+      ReadOnly.receivingConfig(),
+      Replacing.config({ }),
+      Tooltipping.config(
+        {
+          ...providersBackstage.tooltips.getConfig({
+            tooltipText: '',
+            onShow: (comp) => {
+              SelectorFind.descendant(comp.element, '.' + ItemClasses.activeClass + '[data-mce-tooltip]').each((current) => {
+                Attribute.getOpt(current, 'data-mce-tooltip').each((text) => {
+                  Tooltipping.setComponents(comp, providersBackstage.tooltips.getComponents( { tooltipText: text }));
+                });
+              });
+            },
+          }),
+          mode: 'children-keyboard-focus',
+          anchor: (comp: AlloyComponent) => ({
+            type: 'node',
+            node: SelectorFind.descendant(comp.element, '.' + ItemClasses.activeClass).orThunk(() => SelectorFind.first('.tox-collection__item')),
+            root: comp.element,
+            layouts: {
+              onLtr: Fun.constant([ Layout.south, Layout.north, Layout.southeast, Layout.northeast, Layout.southwest, Layout.northwest ]),
+              onRtl: Fun.constant([ Layout.south, Layout.north, Layout.southeast, Layout.northeast, Layout.southwest, Layout.northwest ])
+            },
+            bubble: Bubble.nu(0, -2, {}),
+          })
+        }
+      ),
+      Representing.config({
+        store: {
+          mode: 'memory',
+          initialValue: initialData.getOr([])
+        },
+        onSetValue: (comp, items) => {
+          setContents(comp, items);
+          if (spec.columns === 'auto') {
+            detectSize(comp, 5, 'tox-collection__item').each(({ numRows, numColumns }) => {
+              Keying.setGridSize(comp, numRows, numColumns);
+            });
+          }
+
+          AlloyTriggers.emit(comp, formResizeEvent);
+        }
+      }),
+      Tabstopping.config({ }),
+      Keying.config(
+        deriveCollectionMovement(spec.columns, 'normal')
+      ),
+      AddEventsBehaviour.config('collection-events', collectionEvents)
+    ]),
+    eventOrder: {
+      [SystemEvents.execute()]: [ 'disabling', 'alloy.base.behaviour', 'collection-events' ],
+      [NativeEvents.focusin()]: [ 'collection-events', 'tooltipping' ],
+    }
+  });
+
+  const extraClasses = [ 'tox-form__group--collection' ];
+
+  return renderFormFieldWith(pLabel, pField, extraClasses, [ ]);
+};

package/src/themes/silver/main/ts/ui/dialog/ColorInput.ts

@@ -0,0 +1,183 @@
+import {
+  AddEventsBehaviour, AlloyComponent, AlloyEvents, AlloySpec, AlloyTriggers, Behaviour, Composing, CustomEvent, Disabling, Focusing, FormField, Input,
+  Invalidating, Layout, Memento, Representing, SimpleSpec, Tabstopping
+} from '@ephox/alloy';
+import { Dialog } from '@ephox/bridge';
+import { Fun, Future, Id, Optional, Result } from '@ephox/katamari';
+import { Css, SugarElement, Traverse } from '@ephox/sugar';
+
+import { UiFactoryBackstageShared } from '../../backstage/Backstage';
+import { UiFactoryBackstageForColorInput } from '../../backstage/ColorInputBackstage';
+import * as ReadOnly from '../../ReadOnly';
+import { renderLabel } from '../alien/FieldLabeller';
+import * as ColorCache from '../core/color/ColorCache';
+import * as ColorSwatch from '../core/color/ColorSwatch';
+import { formChangeEvent } from '../general/FormEvents';
+import { renderPanelButton } from '../general/PanelButton';
+
+const colorInputChangeEvent = Id.generate('color-input-change');
+const colorSwatchChangeEvent = Id.generate('color-swatch-change');
+const colorPickerCancelEvent = Id.generate('color-picker-cancel');
+
+interface ColorInputChangeEvent extends CustomEvent {
+  readonly color: string;
+}
+
+interface ColorSwatchChangeEvent extends CustomEvent {
+  readonly value: string;
+}
+
+interface ColorPickerCancelEvent extends CustomEvent {
+  readonly value: string;
+}
+
+type ColorInputSpec = Omit<Dialog.ColorInput, 'type'>;
+
+export const renderColorInput = (
+  spec: ColorInputSpec,
+  sharedBackstage: UiFactoryBackstageShared,
+  colorInputBackstage: UiFactoryBackstageForColorInput,
+  initialData: Optional<string>
+): SimpleSpec => {
+  const pField = FormField.parts.field({
+    factory: Input,
+    inputClasses: [ 'tox-textfield' ],
+    data: initialData,
+
+    onSetValue: (c: AlloyComponent) => Invalidating.run(c).get(Fun.noop),
+
+    inputBehaviours: Behaviour.derive([
+      Disabling.config({
+        disabled: sharedBackstage.providers.isDisabled
+      }),
+      ReadOnly.receivingConfig(),
+      Tabstopping.config({ }),
+      Invalidating.config({
+        invalidClass: 'tox-textbox-field-invalid',
+        getRoot: (comp) => Traverse.parentElement(comp.element),
+        notify: {
+          onValid: (comp) => {
+            // onValid should pass through the value here
+            // We need a snapshot of the value validated.
+            const val = Representing.getValue(comp);
+            AlloyTriggers.emitWith(comp, colorInputChangeEvent, {
+              color: val
+            });
+          }
+        },
+        validator: {
+          validateOnLoad: false,
+          validate: (input) => {
+            const inputValue = Representing.getValue(input);
+            // Consider empty strings valid colours
+            if (inputValue.length === 0) {
+              return Future.pure(Result.value(true));
+            } else {
+              const span = SugarElement.fromTag('span');
+              Css.set(span, 'background-color', inputValue);
+
+              const res = Css.getRaw(span, 'background-color').fold(
+                // TODO: Work out what we want to do here.
+                () => Result.error('blah'),
+                (_) => Result.value(inputValue)
+              );
+
+              return Future.pure(res);
+            }
+          }
+        }
+      })
+    ]),
+    selectOnFocus: false
+  });
+
+  const pLabel: Optional<AlloySpec> = spec.label.map((label) => renderLabel(label, sharedBackstage.providers));
+
+  const emitSwatchChange = (colorBit: AlloyComponent, value: string) => {
+    AlloyTriggers.emitWith(colorBit, colorSwatchChangeEvent, {
+      value
+    });
+  };
+
+  const onItemAction = (comp: AlloyComponent, value: string) => {
+    memColorButton.getOpt(comp).each((colorBit) => {
+      if (value === 'custom') {
+        colorInputBackstage.colorPicker((valueOpt) => {
+          valueOpt.fold(
+            () => AlloyTriggers.emit(colorBit, colorPickerCancelEvent),
+            (value) => {
+              emitSwatchChange(colorBit, value);
+              ColorCache.addColor(spec.storageKey, value);
+            }
+          );
+        }, '#ffffff');
+      } else if (value === 'remove') {
+        emitSwatchChange(colorBit, '');
+      } else {
+        emitSwatchChange(colorBit, value);
+      }
+    });
+  };
+
+  const memColorButton = Memento.record(
+    renderPanelButton({
+      dom: {
+        tag: 'span',
+        attributes: {
+          'aria-label': sharedBackstage.providers.translate('Color swatch')
+        }
+      },
+      layouts: {
+        onRtl: () => [ Layout.southwest, Layout.southeast, Layout.south ],
+        onLtr: () => [ Layout.southeast, Layout.southwest, Layout.south ]
+      },
+      components: [],
+      fetch: ColorSwatch.getFetch(colorInputBackstage.getColors(spec.storageKey), spec.storageKey, colorInputBackstage.hasCustomColors()),
+      columns: colorInputBackstage.getColorCols(spec.storageKey),
+      presets: 'color',
+      onItemAction
+    }, sharedBackstage)
+  );
+
+  return FormField.sketch({
+    dom: {
+      tag: 'div',
+      classes: [ 'tox-form__group' ]
+    },
+    components: pLabel.toArray().concat([
+      {
+        dom: {
+          tag: 'div',
+          classes: [ 'tox-color-input' ]
+        },
+        components: [
+          pField,
+          memColorButton.asSpec()
+        ]
+      }
+    ]),
+
+    fieldBehaviours: Behaviour.derive([
+      AddEventsBehaviour.config('form-field-events', [
+        AlloyEvents.run<ColorInputChangeEvent>(colorInputChangeEvent, (comp, se) => {
+          memColorButton.getOpt(comp).each((colorButton) => {
+            Css.set(colorButton.element, 'background-color', se.event.color);
+          });
+          AlloyTriggers.emitWith(comp, formChangeEvent, { name: spec.name } );
+        }),
+        AlloyEvents.run<ColorSwatchChangeEvent>(colorSwatchChangeEvent, (comp, se) => {
+          FormField.getField(comp).each((field) => {
+            Representing.setValue(field, se.event.value);
+            // Focus the field now that we've set its value
+            Composing.getCurrent(comp).each(Focusing.focus);
+          });
+        }),
+        AlloyEvents.run<ColorPickerCancelEvent>(colorPickerCancelEvent, (comp, _se) => {
+          FormField.getField(comp).each((_field) => {
+            Composing.getCurrent(comp).each(Focusing.focus);
+          });
+        })
+      ])
+    ])
+  });
+};

package/src/themes/silver/main/ts/ui/dialog/ColorPicker.ts

@@ -0,0 +1,107 @@
+import { ColourPicker } from '@ephox/acid';
+import { AlloyComponent, AlloyTriggers, Behaviour, Composing, Form, Memento, NativeEvents, Representing, SimpleSpec } from '@ephox/alloy';
+import { Dialog } from '@ephox/bridge';
+import { Arr, Optional, Strings, Type } from '@ephox/katamari';
+
+import { Untranslated } from 'tinymce/core/api/util/I18n';
+
+import { UiFactoryBackstageProviders } from '../../backstage/Backstage';
+import { ComposingConfigs } from '../alien/ComposingConfigs';
+import * as RepresentingConfigs from '../alien/RepresentingConfigs';
+import { formActionEvent } from '../general/FormEvents';
+
+const english: Record<string, string> = {
+  'colorcustom.rgb.red.label': 'R',
+  'colorcustom.rgb.red.description': 'Red component',
+  'colorcustom.rgb.green.label': 'G',
+  'colorcustom.rgb.green.description': 'Green component',
+  'colorcustom.rgb.blue.label': 'B',
+  'colorcustom.rgb.blue.description': 'Blue component',
+  'colorcustom.rgb.hex.label': '#',
+  'colorcustom.rgb.hex.description': 'Hex color code',
+  'colorcustom.rgb.range': 'Range 0 to 255',
+  'aria.color.picker': 'Color Picker',
+  'aria.input.invalid': 'Invalid input'
+};
+
+const translate = (providerBackstage: UiFactoryBackstageProviders) => (key: Untranslated) => {
+  if (Type.isString(key)) {
+    return providerBackstage.translate(english[key]);
+  } else {
+    return providerBackstage.translate(key);
+  }
+};
+
+type ColorPickerSpec = Omit<Dialog.ColorPicker, 'type'>;
+
+export const renderColorPicker = (_spec: ColorPickerSpec, providerBackstage: UiFactoryBackstageProviders, initialData: Optional<string>): SimpleSpec => {
+  const getClass = (key: string) => 'tox-' + key;
+
+  const colourPickerFactory = ColourPicker.makeFactory(translate(providerBackstage), getClass);
+
+  const onValidHex = (form: AlloyComponent) => {
+    AlloyTriggers.emitWith(form, formActionEvent, { name: 'hex-valid', value: true });
+  };
+
+  const onInvalidHex = (form: AlloyComponent) => {
+    AlloyTriggers.emitWith(form, formActionEvent, { name: 'hex-valid', value: false });
+  };
+
+  const memPicker = Memento.record(
+    colourPickerFactory.sketch({
+      dom: {
+        tag: 'div',
+        classes: [ getClass('color-picker-container') ],
+        attributes: {
+          role: 'presentation'
+        }
+      },
+      onValidHex,
+      onInvalidHex
+    })
+  );
+
+  return {
+    dom: {
+      tag: 'div'
+    },
+    components: [
+      memPicker.asSpec()
+    ],
+    behaviours: Behaviour.derive([
+      // We'll allow invalid values
+      RepresentingConfigs.withComp(
+        initialData,
+        (comp) => {
+          const picker = memPicker.get(comp);
+          const optRgbForm = Composing.getCurrent(picker);
+          const optHex = optRgbForm.bind((rgbForm) => {
+            const formValues = Representing.getValue(rgbForm);
+            return formValues.hex as Optional<string>;
+          });
+          return optHex.map((hex) => '#' + Strings.removeLeading(hex, '#')).getOr('');
+        },
+        (comp, newValue) => {
+          const pattern = /^#([a-fA-F0-9]{3}(?:[a-fA-F0-9]{3})?)/;
+          const valOpt = Optional.from(pattern.exec(newValue)).bind((matches) => Arr.get(matches, 1));
+          const picker = memPicker.get(comp);
+          const optRgbForm = Composing.getCurrent(picker);
+          optRgbForm.fold(() => {
+            // eslint-disable-next-line no-console
+            console.log('Can not find form');
+          }, (rgbForm) => {
+            Representing.setValue(rgbForm, {
+              hex: valOpt.getOr('')
+            });
+
+            // So not the way to do this.
+            Form.getField(rgbForm, 'hex').each((hexField) => {
+              AlloyTriggers.emit(hexField, NativeEvents.input());
+            });
+          });
+        }
+      ),
+      ComposingConfigs.self()
+    ])
+  };
+};

package/src/themes/silver/main/ts/ui/dialog/ConfirmDialog.ts

@@ -0,0 +1,77 @@
+import { AlloyEvents, Focusing, GuiFactory, Memento, ModalDialog } from '@ephox/alloy';
+import { Optional } from '@ephox/katamari';
+
+import { UiFactoryBackstage } from '../../backstage/Backstage';
+import { renderFooterButton } from '../general/Button';
+import { formCancelEvent, FormCancelEvent, formSubmitEvent, FormSubmitEvent } from '../general/FormEvents';
+import * as Dialogs from './Dialogs';
+
+interface ConfirmDialogApi {
+  readonly open: (message: string, callback: (state: boolean) => void) => void;
+}
+
+export const setup = (backstage: UiFactoryBackstage): ConfirmDialogApi => {
+  const sharedBackstage = backstage.shared;
+  // FIX: Extreme dupe with Alert dialog
+  const open = (message: string, callback: (state: boolean) => void) => {
+
+    const closeDialog = (state: boolean) => {
+      ModalDialog.hide(confirmDialog);
+      callback(state);
+    };
+
+    const memFooterYes = Memento.record(
+      renderFooterButton({
+        name: 'yes',
+        text: 'Yes',
+        primary: true,
+        buttonType: Optional.some('primary'),
+        align: 'end',
+        enabled: true,
+        icon: Optional.none()
+      }, 'submit', backstage)
+    );
+
+    const footerNo = renderFooterButton({
+      name: 'no',
+      text: 'No',
+      primary: false,
+      buttonType: Optional.some('secondary'),
+      align: 'end',
+      enabled: true,
+      icon: Optional.none()
+    }, 'cancel', backstage);
+
+    const titleSpec = Dialogs.pUntitled();
+    const closeSpec = Dialogs.pClose(() => closeDialog(false), sharedBackstage.providers);
+
+    const confirmDialog = GuiFactory.build(
+      Dialogs.renderDialog({
+        lazySink: () => sharedBackstage.getSink(),
+        header: Dialogs.hiddenHeader(titleSpec, closeSpec),
+        body: Dialogs.pBodyMessage(message, sharedBackstage.providers),
+        footer: Optional.some(Dialogs.pFooter(Dialogs.pFooterGroup([], [
+          footerNo,
+          memFooterYes.asSpec()
+        ]))),
+        onEscape: () => closeDialog(false),
+        extraClasses: [ 'tox-confirm-dialog' ],
+        extraBehaviours: [ ],
+        extraStyles: { },
+        dialogEvents: [
+          AlloyEvents.run<FormCancelEvent>(formCancelEvent, () => closeDialog(false)),
+          AlloyEvents.run<FormSubmitEvent>(formSubmitEvent, () => closeDialog(true))
+        ],
+        eventOrder: { }
+      })
+    );
+
+    ModalDialog.show(confirmDialog);
+    const footerYesButton = memFooterYes.get(confirmDialog);
+    Focusing.focus(footerYesButton);
+  };
+
+  return {
+    open
+  };
+};