@atlaskit/editor-plugin-floating-toolbar 0.5.1 → 0.6.0

package/dist/esm/ui/ExtensionsPlaceholder.js

@@ -0,0 +1,168 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import React, { useEffect, useState } from 'react';
+import Loadable from 'react-loadable';
+import ButtonGroup from '@atlaskit/button/button-group';
+import { getContextualToolbarItemsFromModule } from '@atlaskit/editor-common/extensions';
+import { FloatingToolbarButton as Button } from '@atlaskit/editor-common/ui';
+import { nodeToJSON } from '@atlaskit/editor-common/utils';
+import Separator from './Separator';
+var noop = function noop() {
+  return null;
+};
+var isDefaultExport = function isDefaultExport(mod) {
+  return mod.hasOwnProperty('default');
+};
+var resolveExtensionIcon = /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(getIcon) {
+    var maybeIcon;
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          if (getIcon) {
+            _context.next = 2;
+            break;
+          }
+          return _context.abrupt("return", noop);
+        case 2:
+          _context.next = 4;
+          return getIcon();
+        case 4:
+          maybeIcon = _context.sent;
+          return _context.abrupt("return", isDefaultExport(maybeIcon) ? maybeIcon.default : maybeIcon);
+        case 6:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  }));
+  return function resolveExtensionIcon(_x) {
+    return _ref.apply(this, arguments);
+  };
+}();
+var ExtensionButton = function ExtensionButton(props) {
+  var item = props.item,
+    node = props.node,
+    extensionApi = props.extensionApi;
+  var ButtonIcon = React.useMemo(function () {
+    return item.icon ? Loadable({
+      loader: function () {
+        var _loader = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+          return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+            while (1) switch (_context2.prev = _context2.next) {
+              case 0:
+                return _context2.abrupt("return", resolveExtensionIcon(item.icon));
+              case 1:
+              case "end":
+                return _context2.stop();
+            }
+          }, _callee2);
+        }));
+        function loader() {
+          return _loader.apply(this, arguments);
+        }
+        return loader;
+      }(),
+      loading: noop
+    }) : undefined;
+  }, [item.icon]);
+  var onClick = function onClick() {
+    if (typeof item.action !== 'function') {
+      throw new Error("'action' of context toolbar item '".concat(item.key, "' is not a function"));
+    }
+    var targetNodeAdf = nodeToJSON(node);
+    item.action(targetNodeAdf, extensionApi);
+  };
+  return /*#__PURE__*/React.createElement(Button, {
+    title: item.label,
+    ariaLabel: item.tooltip,
+    icon: ButtonIcon ? /*#__PURE__*/React.createElement(ButtonIcon, {
+      label: item.label || ''
+    }) : undefined,
+    onClick: onClick,
+    tooltipContent: item.tooltip,
+    disabled: item.disabled
+  }, item.label);
+};
+export var ExtensionsPlaceholder = function ExtensionsPlaceholder(props) {
+  var node = props.node,
+    editorView = props.editorView,
+    extensionProvider = props.extensionProvider,
+    separator = props.separator,
+    applyChangeToContextPanel = props.applyChangeToContextPanel,
+    extensionApi = props.extensionApi;
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    extensions = _useState2[0],
+    setExtensions = _useState2[1];
+  useEffect(function () {
+    getExtensions();
+    function getExtensions() {
+      return _getExtensions.apply(this, arguments);
+    } // leaving dependencies array empty so that this effect runs just once on component mount
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    function _getExtensions() {
+      _getExtensions = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+        var provider;
+        return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+          while (1) switch (_context3.prev = _context3.next) {
+            case 0:
+              _context3.next = 2;
+              return extensionProvider;
+            case 2:
+              provider = _context3.sent;
+              if (!provider) {
+                _context3.next = 9;
+                break;
+              }
+              _context3.t0 = setExtensions;
+              _context3.next = 7;
+              return provider.getExtensions();
+            case 7:
+              _context3.t1 = _context3.sent;
+              (0, _context3.t0)(_context3.t1);
+            case 9:
+            case "end":
+              return _context3.stop();
+          }
+        }, _callee3);
+      }));
+      return _getExtensions.apply(this, arguments);
+    }
+  }, []);
+  var nodeAdf = React.useMemo(function () {
+    return nodeToJSON(node);
+  }, [node]);
+  var extensionItems = React.useMemo(function () {
+    return getContextualToolbarItemsFromModule(extensions, nodeAdf, extensionApi);
+  }, [extensions, nodeAdf, extensionApi]);
+  if (!extensionItems.length) {
+    return null;
+  }
+
+  // ButtonGroup wraps each child with another layer
+  // but count fragment as 1 child, so here we create the children manually.
+  var children = [];
+  if (separator && ['start', 'both'].includes(separator)) {
+    children.push( /*#__PURE__*/React.createElement(Separator, null));
+  }
+  extensionItems.forEach(function (item, index) {
+    children.push( /*#__PURE__*/React.createElement(ExtensionButton, {
+      node: node,
+      item: item,
+      editorView: editorView,
+      applyChangeToContextPanel: applyChangeToContextPanel,
+      extensionApi: extensionApi
+    }));
+    if (index < extensionItems.length - 1) {
+      children.push( /*#__PURE__*/React.createElement(Separator, null));
+    }
+  });
+  if (separator && ['end', 'both'].includes(separator)) {
+    children.push( /*#__PURE__*/React.createElement(Separator, null));
+  }
+  return /*#__PURE__*/React.createElement(ButtonGroup, {
+    children: children
+  });
+};

package/dist/esm/ui/Input.js

@@ -0,0 +1,72 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+/** @jsx jsx */
+import React from 'react';
+import { Component } from 'react';
+import { jsx } from '@emotion/react';
+import { panelTextInput } from '@atlaskit/editor-common/ui';
+// eslint-disable-next-line @repo/internal/react/no-class-components
+var TextField = /*#__PURE__*/function (_Component) {
+  _inherits(TextField, _Component);
+  var _super = _createSuper(TextField);
+  function TextField(props) {
+    var _this;
+    _classCallCheck(this, TextField);
+    _this = _super.call(this, props);
+    _defineProperty(_assertThisInitialized(_this), "handleChange", function (e) {
+      _this.setState({
+        text: e.target.value
+      });
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleSubmit", function (e) {
+      e.preventDefault();
+      if (_this.props.onSubmit) {
+        _this.props.onSubmit(_this.state.text);
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleBlur", function (e) {
+      e.preventDefault();
+      if (_this.props.onBlur) {
+        _this.props.onBlur(_this.state.text);
+      }
+    });
+    _this.state = {
+      text: props.defaultValue || ''
+    };
+    return _this;
+  }
+  _createClass(TextField, [{
+    key: "UNSAFE_componentWillReceiveProps",
+    value: function UNSAFE_componentWillReceiveProps(nextProps) {
+      if (this.state.text !== nextProps.defaultValue) {
+        this.setState({
+          text: nextProps.defaultValue || ''
+        });
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var placeholder = this.props.placeholder;
+      return jsx("form", {
+        onSubmit: this.handleSubmit
+      }, jsx("input", {
+        // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+        css: panelTextInput,
+        value: this.state.text,
+        onChange: this.handleChange,
+        placeholder: placeholder,
+        onBlur: this.handleBlur
+      }));
+    }
+  }]);
+  return TextField;
+}(Component);
+export { TextField as default };

package/dist/esm/ui/ScrollButtons.js

@@ -0,0 +1,145 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject;
+/** @jsx jsx */
+import React, { useEffect, useRef, useState } from 'react';
+import { css, jsx } from '@emotion/react';
+import rafSchedule from 'raf-schd';
+import { FloatingToolbarButton as Button } from '@atlaskit/editor-common/ui';
+import ChevronLeftLargeIcon from '@atlaskit/icon/glyph/chevron-left-large';
+import ChevronRightLargeIcon from '@atlaskit/icon/glyph/chevron-right-large';
+import { N30 } from '@atlaskit/theme/colors';
+import messages from './messages';
+
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+var toolbarScrollButtons = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  grid-gap: ", ";\n  padding: ", " ", ";\n  border-left: solid ", " 1px;\n  flex-shrink: 0;\n  align-items: center;\n"])), "var(--ds-space-050, 4px)", "var(--ds-space-050, 4px)", "var(--ds-space-100, 8px)", "var(--ds-border, ".concat(N30, ")"));
+var LeftIcon = ChevronLeftLargeIcon;
+var RightIcon = ChevronRightLargeIcon;
+export var ScrollButtons = function ScrollButtons(_ref) {
+  var intl = _ref.intl,
+    scrollContainerRef = _ref.scrollContainerRef,
+    node = _ref.node,
+    disabled = _ref.disabled;
+  var buttonsContainerRef = useRef(null);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    needScroll = _useState2[0],
+    setNeedScroll = _useState2[1];
+  var _useState3 = useState(true),
+    _useState4 = _slicedToArray(_useState3, 2),
+    canScrollLeft = _useState4[0],
+    setCanScrollLeft = _useState4[1];
+  var _useState5 = useState(true),
+    _useState6 = _slicedToArray(_useState5, 2),
+    canScrollRight = _useState6[0],
+    setCanScrollRight = _useState6[1];
+  var setCanScrollDebounced = rafSchedule(function () {
+    // Refs are null before mounting and after unmount
+    if (!scrollContainerRef.current) {
+      return;
+    }
+    var _scrollContainerRef$c = scrollContainerRef.current,
+      scrollLeft = _scrollContainerRef$c.scrollLeft,
+      scrollWidth = _scrollContainerRef$c.scrollWidth,
+      offsetWidth = _scrollContainerRef$c.offsetWidth;
+    setCanScrollLeft(scrollLeft > 0);
+    setCanScrollRight(scrollLeft + offsetWidth < scrollWidth - 1); // -1 to account for half pixel
+  });
+
+  var onScroll = function onScroll() {
+    return setCanScrollDebounced();
+  };
+  var scrollLeft = function scrollLeft() {
+    var _scrollContainerRef$c2, _scrollContainerRef$c3, _scrollContainerRef$c4;
+    var _ref2 = ((_scrollContainerRef$c2 = scrollContainerRef.current) === null || _scrollContainerRef$c2 === void 0 ? void 0 : _scrollContainerRef$c2.getBoundingClientRect()) || {},
+      _ref2$width = _ref2.width,
+      scrollContainerWidth = _ref2$width === void 0 ? 0 : _ref2$width;
+    var scrollLeft = ((_scrollContainerRef$c3 = scrollContainerRef.current) === null || _scrollContainerRef$c3 === void 0 ? void 0 : _scrollContainerRef$c3.scrollLeft) || 0;
+
+    // scroll to current position - scroll container width
+    var scrollTo = scrollLeft - scrollContainerWidth;
+    (_scrollContainerRef$c4 = scrollContainerRef.current) === null || _scrollContainerRef$c4 === void 0 ? void 0 : _scrollContainerRef$c4.scrollTo({
+      top: 0,
+      left: scrollTo,
+      behavior: 'smooth'
+    });
+  };
+  var scrollRight = function scrollRight() {
+    var _scrollContainerRef$c5, _scrollContainerRef$c6, _scrollContainerRef$c7;
+    var _ref3 = ((_scrollContainerRef$c5 = scrollContainerRef.current) === null || _scrollContainerRef$c5 === void 0 ? void 0 : _scrollContainerRef$c5.getBoundingClientRect()) || {},
+      _ref3$width = _ref3.width,
+      scrollContainerWidth = _ref3$width === void 0 ? 0 : _ref3$width;
+    var scrollLeft = ((_scrollContainerRef$c6 = scrollContainerRef.current) === null || _scrollContainerRef$c6 === void 0 ? void 0 : _scrollContainerRef$c6.scrollLeft) || 0;
+
+    // scroll to current position + scroll container width
+    var scrollTo = scrollLeft + scrollContainerWidth;
+    (_scrollContainerRef$c7 = scrollContainerRef.current) === null || _scrollContainerRef$c7 === void 0 ? void 0 : _scrollContainerRef$c7.scrollTo({
+      top: 0,
+      left: scrollTo,
+      behavior: 'smooth'
+    });
+  };
+  var resizeObserver = new ResizeObserver(function (t) {
+    var _scrollContainerRef$c8, _scrollContainerRef$c9, _scrollContainerRef$c10;
+    var widthNeededToShowAllItems = ((_scrollContainerRef$c8 = scrollContainerRef.current) === null || _scrollContainerRef$c8 === void 0 ? void 0 : _scrollContainerRef$c8.scrollWidth) || 0;
+    var availableSpace = (_scrollContainerRef$c9 = scrollContainerRef.current) === null || _scrollContainerRef$c9 === void 0 ? void 0 : (_scrollContainerRef$c10 = _scrollContainerRef$c9.parentNode) === null || _scrollContainerRef$c10 === void 0 ? void 0 : _scrollContainerRef$c10.offsetWidth;
+    if (availableSpace >= widthNeededToShowAllItems) {
+      setNeedScroll(false);
+    } else {
+      setNeedScroll(true);
+      onScroll();
+    }
+  });
+  useEffect(function () {
+    onScroll();
+    var scrollContainerRefCurrent = scrollContainerRef.current;
+    if (scrollContainerRefCurrent) {
+      // enable/disable scroll buttons depending on scroll position
+      // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+      scrollContainerRefCurrent.addEventListener('scroll', onScroll);
+
+      // watch for toolbar resize and show/hide scroll buttons if needed
+      resizeObserver.observe(scrollContainerRefCurrent);
+    }
+    return function () {
+      if (scrollContainerRefCurrent) {
+        // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+        scrollContainerRefCurrent.removeEventListener('scroll', onScroll);
+        resizeObserver.unobserve(scrollContainerRefCurrent);
+      }
+      setCanScrollDebounced.cancel();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  useEffect(function () {
+    var scrollContainerRefCurrent = scrollContainerRef.current;
+    if (scrollContainerRefCurrent) {
+      var _scrollContainerRefCu;
+      // reset scroll position when switching from one node with toolbar to another
+      // scroll to made optional as it may not be rendered in testing env
+      (_scrollContainerRefCu = scrollContainerRefCurrent.scrollTo) === null || _scrollContainerRefCu === void 0 ? void 0 : _scrollContainerRefCu.call(scrollContainerRefCurrent, {
+        left: 0
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [node.type]);
+  return needScroll ? jsx("div", {
+    ref: buttonsContainerRef,
+    css: toolbarScrollButtons,
+    className: "scroll-buttons"
+  }, jsx(Button, {
+    title: intl.formatMessage(messages.floatingToolbarScrollLeft),
+    icon: jsx(LeftIcon, {
+      label: intl.formatMessage(messages.floatingToolbarScrollLeft)
+    }),
+    onClick: scrollLeft,
+    disabled: !canScrollLeft || disabled
+  }), jsx(Button, {
+    title: intl.formatMessage(messages.floatingToolbarScrollRight),
+    icon: jsx(RightIcon, {
+      label: intl.formatMessage(messages.floatingToolbarScrollRight)
+    }),
+    onClick: scrollRight,
+    disabled: !canScrollRight || disabled
+  })) : null;
+};

package/dist/esm/ui/Select.js

@@ -0,0 +1,64 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import React, { useRef } from 'react';
+import Select from '@atlaskit/select';
+export default function Search(props) {
+  var selectRef = useRef(null);
+  var _props$width = props.width,
+    width = _props$width === void 0 ? 200 : _props$width;
+  var style = React.useMemo(function () {
+    return {
+      container: function container(base) {
+        return _objectSpread(_objectSpread({}, base), {}, {
+          width: width
+        });
+      },
+      menuPortal: function menuPortal(base) {
+        var _selectRef$current, _selectRef$current$se, _selectRef$current$se2, _selectRef$current2, _selectRef$current2$s, _selectRef$current2$s2, _selectRef$current2$s3;
+        // ED:16095: We add two possible getter paths for safely reaching into the underlying
+        // react-select element. We first try a getter that conforms with react-select v5 APIs,
+        // Failing that, we try a getter consistent with react-select v4 APIs. (We
+        // handle both as consumers may control the time of the actual dependency version
+        // cutover).
+        var controlWrapper = (selectRef === null || selectRef === void 0 ? void 0 : (_selectRef$current = selectRef.current) === null || _selectRef$current === void 0 ? void 0 : (_selectRef$current$se = _selectRef$current.select) === null || _selectRef$current$se === void 0 ? void 0 : (_selectRef$current$se2 = _selectRef$current$se.controlRef) === null || _selectRef$current$se2 === void 0 ? void 0 : _selectRef$current$se2.parentNode) || (selectRef === null || selectRef === void 0 ? void 0 : (_selectRef$current2 = selectRef.current) === null || _selectRef$current2 === void 0 ? void 0 : (_selectRef$current2$s = _selectRef$current2.select) === null || _selectRef$current2$s === void 0 ? void 0 : (_selectRef$current2$s2 = _selectRef$current2$s.select) === null || _selectRef$current2$s2 === void 0 ? void 0 : (_selectRef$current2$s3 = _selectRef$current2$s2.controlRef) === null || _selectRef$current2$s3 === void 0 ? void 0 : _selectRef$current2$s3.parentNode);
+        var menuPortalStyles = controlWrapper && props.setDisableParentScroll ? {
+          // since the portal is now outside, we need to position it as before
+          top: controlWrapper.offsetTop,
+          left: controlWrapper.offsetLeft,
+          height: controlWrapper.offsetHeight,
+          width: width
+        } : {};
+        return _objectSpread(_objectSpread({}, base), menuPortalStyles);
+      }
+    };
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [width]);
+  var onMenuOpen = function onMenuOpen() {
+    if (props.setDisableParentScroll) {
+      props.setDisableParentScroll(true);
+    }
+  };
+  var onMenuClose = function onMenuClose() {
+    if (props.setDisableParentScroll) {
+      props.setDisableParentScroll(false);
+    }
+  };
+  return /*#__PURE__*/React.createElement(Select, {
+    ref: selectRef,
+    options: props.options,
+    value: props.defaultValue,
+    onChange: props.onChange,
+    placeholder: props.placeholder,
+    spacing: "compact",
+    menuPlacement: "auto",
+    filterOption: props.filterOption,
+    styles: style,
+    menuPortalTarget: props.mountPoint,
+    onMenuOpen: onMenuOpen,
+    onMenuClose: onMenuClose,
+    "aria-label": props.ariaLabel,
+    classNamePrefix: props.classNamePrefix
+  });
+}

package/dist/esm/ui/Separator.js

@@ -0,0 +1,2 @@
+import { FloatingToolbarSeparator } from '@atlaskit/editor-common/ui';
+export default FloatingToolbarSeparator;

package/dist/esm/ui/SimpleModal.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import Button from '@atlaskit/button/standard-button';
+import Modal, { ModalBody, ModalFooter, ModalHeader, ModalTitle } from '@atlaskit/modal-dialog';
+import messages from './messages';
+export var SimpleModal = function SimpleModal(props) {
+  var onConfirm = props.onConfirm,
+    onClose = props.onClose,
+    options = props.options,
+    formatMessage = props.intl.formatMessage,
+    testId = props.testId;
+  var heading = (options === null || options === void 0 ? void 0 : options.title) || formatMessage(messages.confirmModalDefaultHeading);
+  var okButtonLabel = (options === null || options === void 0 ? void 0 : options.okButtonLabel) || formatMessage(messages.confirmModalOK);
+  var cancelButtonLabel = (options === null || options === void 0 ? void 0 : options.cancelButtonLabel) || formatMessage(messages.confirmModalCancel);
+  return /*#__PURE__*/React.createElement(Modal, {
+    onClose: onClose,
+    testId: testId
+  }, /*#__PURE__*/React.createElement(ModalHeader, null, /*#__PURE__*/React.createElement(ModalTitle, {
+    appearance: "warning"
+  }, heading)), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement("p", null, options === null || options === void 0 ? void 0 : options.message)), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(Button, {
+    appearance: "default",
+    onClick: onClose,
+    testId: testId ? "".concat(testId, "-cancel-button") : undefined
+  }, cancelButtonLabel), /*#__PURE__*/React.createElement(Button, {
+    appearance: "warning",
+    onClick: function onClick() {
+      onConfirm();
+      onClose();
+    },
+    testId: testId ? "".concat(testId, "-confirm-button") : undefined
+  }, okButtonLabel)));
+};