@oceanbase/ui 0.2.0

package/lib/Dialog/index.js

@@ -0,0 +1,558 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/Dialog/index.tsx
+var Dialog_exports = {};
+__export(Dialog_exports, {
+  default: () => Dialog_default
+});
+module.exports = __toCommonJS(Dialog_exports);
+var import_icons = require("@ant-design/icons");
+var import_react = __toESM(require("react"));
+var import_react_dom = require("react-dom");
+var import_LocaleWrapper = __toESM(require("../locale/LocaleWrapper"));
+var import_util = require("../_util");
+var import_Anchor = require("./Anchor");
+var import_Dock = require("./Dock");
+var import_EventProxy = require("./EventProxy");
+var import_zh_CN = __toESM(require("./locale/zh-CN"));
+var import_index = require("./index.less");
+var prefix = (0, import_util.getPrefix)("dialog");
+var DEFAULT_LEFT = 0.1;
+var DEFAULT_TOP = 0.1;
+var MINIMIZE_HEIGHT = 36;
+var MINIMIZE_WIDTH = 320;
+var DEFAULT_MIN = [320, 256];
+var DEFAULT_WIDTH_MEMBER = 520;
+var DEFAULT_HEIGHT_MEMBER = 600;
+var DEFAULT_BORDER_WIDTH = 24;
+var SCROLL_BAR_WIDTH = 1;
+var _DialogComp = class extends import_react.default.PureComponent {
+  constructor() {
+    super(...arguments);
+    this.state = {
+      mask: true,
+      width: this.props.width ?? DEFAULT_WIDTH_MEMBER,
+      height: this.props.height ?? DEFAULT_HEIGHT_MEMBER,
+      left: this.props.left ?? this.props.clientWidth - (this.props.width ?? DEFAULT_WIDTH_MEMBER) - DEFAULT_BORDER_WIDTH,
+      top: this.props.top ?? this.props.clientHeight - (this.props.height ?? DEFAULT_HEIGHT_MEMBER) - DEFAULT_BORDER_WIDTH,
+      moveX: 0,
+      moveY: 0,
+      maximization: this.props.isEmbed,
+      minimize: false,
+      headerStyle: {}
+    };
+    this.clientX = 0;
+    this.clientY = 0;
+    this.getDefaultEmbedState = () => {
+      const { clientHeight, clientWidth, width, height, left, top } = this.props;
+      return {
+        width: width ?? DEFAULT_WIDTH_MEMBER,
+        height: height ?? DEFAULT_HEIGHT_MEMBER,
+        left: left ?? clientWidth - (width ?? DEFAULT_WIDTH_MEMBER) - DEFAULT_BORDER_WIDTH,
+        top: top ?? clientHeight - (height ?? DEFAULT_HEIGHT_MEMBER) - DEFAULT_BORDER_WIDTH
+      };
+    };
+    this.host = document.createElement("div");
+    this.isPointDown = false;
+    this.onDragStart = (event) => {
+      if (!this.props.draggable)
+        return;
+      const { maximization } = this.state;
+      if (maximization)
+        return;
+      this.setState({
+        mask: true,
+        ...this.state.left === void 0 ? { left: DEFAULT_LEFT } : {},
+        ...this.state.top === void 0 ? { top: DEFAULT_TOP } : {}
+      });
+      this.clientX = event.clientX;
+      this.clientY = event.clientY;
+      this.isPointDown = true;
+    };
+    this.onDragMove = (event) => {
+      if (!this.props.draggable || !this.isPointDown)
+        return;
+      event.preventDefault();
+      this.setState({
+        moveX: event.clientX - this.clientX,
+        moveY: event.clientY - this.clientY
+      });
+    };
+    this.onDragEnd = () => {
+      const { draggable } = this.props;
+      if (!draggable)
+        return;
+      this.isPointDown = false;
+      if (this.state.moveX === 0 && this.state.moveY === 0)
+        return;
+      this.setState({
+        mask: false,
+        left: this.state.left + this.state.moveX,
+        top: this.state.top + this.state.moveY,
+        moveX: 0,
+        moveY: 0
+      });
+    };
+    this.toggleMinimize = () => {
+      this.setState({
+        maximization: false,
+        minimize: !this.state.minimize
+      });
+    };
+    this.toggleMaximization = () => {
+      const enable = this.props.resizable && this.props.enableMaximization && !this.props.isEmbed;
+      if (!enable)
+        return;
+      this.setState({
+        maximization: !this.state.maximization,
+        minimize: false
+      });
+    };
+    this.onClose = (event) => {
+      var _a, _b;
+      event.stopPropagation();
+      (_b = (_a = this.props).onClose) == null ? void 0 : _b.call(_a);
+    };
+    this.getBaseStyle = () => {
+      const { visible } = this.props;
+      const baseStyle = {
+        visibility: visible ? "visible" : "hidden",
+        opacity: visible ? 1 : 0
+      };
+      return baseStyle;
+    };
+    this.getStyle = () => {
+      const { maximization, minimize, headerStyle } = this.state;
+      const transform = `translate(${this.state.moveX}px, ${this.state.moveY}px)`;
+      const baseStyle = this.getBaseStyle();
+      if (maximization && !this.props.isEmbed) {
+        return {
+          ...baseStyle,
+          top: 0,
+          bottom: 0,
+          right: 0,
+          width: this.props.width || DEFAULT_WIDTH_MEMBER,
+          height: "auto",
+          borderRadius: 0
+        };
+      } else if (minimize) {
+        const { height } = headerStyle;
+        return {
+          ...baseStyle,
+          ...this.getCompatAbsPostion(this.state),
+          width: MINIMIZE_WIDTH,
+          height: height || MINIMIZE_HEIGHT,
+          transform
+        };
+      } else {
+        return {
+          ...baseStyle,
+          ...this.getCompatAbsPostion(this.state),
+          transform
+        };
+      }
+    };
+    this.compatClonedModel = (model) => {
+      return {
+        left: DEFAULT_LEFT,
+        top: DEFAULT_TOP,
+        width: DEFAULT_WIDTH_MEMBER / this.props.clientWidth,
+        height: DEFAULT_HEIGHT_MEMBER / this.props.clientHeight,
+        minimize: false,
+        maximization: false,
+        ...model
+      };
+    };
+    this.detectPointUp = () => {
+      this.setState({ mask: false });
+    };
+    this.setRootWidthInEmbedMode = (newWidth) => {
+      const { setRootWidth } = this.props;
+      const restWidth = !!newWidth ? newWidth + SCROLL_BAR_WIDTH : 0;
+      const rootWidth = (this.props.clientWidth - restWidth) / this.props.clientWidth;
+      setRootWidth == null ? void 0 : setRootWidth(`${rootWidth * 100}%`);
+    };
+    this.onResizeStart = () => {
+      if (this.state.minimize || !this.props.resizable)
+        return;
+      this.originInfo = this.compatClonedModel(this.state);
+      this.setState({ mask: true });
+    };
+    this.onResizeMove = (event) => {
+      const { resizable } = this.props;
+      event.preventDefault();
+      if (this.state.minimize || !resizable)
+        return;
+      const newWidth = this.originInfo.width + event.moveRight;
+      const newHeight = this.originInfo.height + event.moveBottom;
+      const checkResult = this.checkSize(newWidth, newHeight);
+      if (checkResult.widthShouldChange) {
+        this.setRootWidthInEmbedMode(newWidth);
+      }
+      this.setState({
+        ...checkResult.widthShouldChange ? {
+          // @ts-ignore
+          left: this.originInfo.left + event.moveLeft,
+          width: newWidth
+        } : {},
+        ...checkResult.heightShouldChange ? {
+          // @ts-ignore
+          top: this.originInfo.top + event.moveTop,
+          height: newHeight
+        } : {}
+      });
+    };
+    this.onResizeEnd = () => {
+      const { mask } = this.state;
+      if (!mask || !this.props.resizable)
+        return;
+      this.setState({ mask: false });
+    };
+  }
+  static get container() {
+    if (!this._container) {
+      this._container = document.createElement("div");
+      document.body.appendChild(this._container);
+    }
+    return this._container;
+  }
+  componentDidMount() {
+    _DialogComp.container.appendChild(this.host);
+  }
+  componentDidUpdate(prevProps, _) {
+    const {
+      visible: preVisible,
+      clientWidth: preClientWidth,
+      clientHeight: preClientHeight,
+      isEmbed: preIsEmbed
+    } = prevProps;
+    const { visible, isEmbed, clientWidth, clientHeight, height, width, top, left } = this.props;
+    if (preIsEmbed && !isEmbed) {
+      this.setRootWidthInEmbedMode(0);
+      this.setState({
+        minimize: false,
+        maximization: false,
+        ...height ? { height } : {},
+        ...width ? { width } : {},
+        ...top ? { top } : {},
+        ...left ? { left } : {}
+      });
+      return;
+    }
+    if (!preIsEmbed && isEmbed) {
+      this.setState({
+        minimize: false,
+        maximization: true
+      });
+    }
+    if (visible) {
+      if (!preVisible || clientWidth !== preClientWidth || clientHeight !== preClientHeight) {
+        const tempState = this.getDefaultEmbedState();
+        this.setState(tempState);
+        this.setRootWidthInEmbedMode(tempState == null ? void 0 : tempState.width);
+      }
+    } else if (preVisible && !visible) {
+      this.setRootWidthInEmbedMode(0);
+    }
+  }
+  componentWillUnmount() {
+    _DialogComp.container.removeChild(this.host);
+  }
+  get max() {
+    let { max } = this.props;
+    if (!max) {
+      const { clientWidth, clientHeight } = this.props;
+      max = [clientWidth, clientHeight];
+    }
+    return max;
+  }
+  get min() {
+    return this.props.min;
+  }
+  get hasMask() {
+    return this.state.mask;
+  }
+  renderHeader() {
+    const { locale, title, isEmbed } = this.props;
+    const { headerStyle, minimize } = this.state;
+    const style = {
+      ...headerStyle,
+      ...minimize ? { boxShadow: "0 2px 20px 0 rgba(4, 1, 30, 0.07)" } : {},
+      ...isEmbed ? { cursor: "initial" } : {}
+    };
+    return /* @__PURE__ */ import_react.default.createElement(
+      "header",
+      {
+        className: `${prefix}-header`,
+        style,
+        onPointerDown: this.onDragStart,
+        onDoubleClick: this.toggleMaximization
+      },
+      /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefix}-title` }, title || locale.helpDocument),
+      this.renderControls()
+    );
+  }
+  renderControlLink() {
+    const { extLink } = this.props;
+    return /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefix}-item` }, /* @__PURE__ */ import_react.default.createElement(
+      "a",
+      {
+        className: `${prefix}-item-link`,
+        href: extLink == null ? void 0 : extLink.link,
+        target: "_blank",
+        rel: "noopener noreferrer"
+      },
+      /* @__PURE__ */ import_react.default.createElement(
+        "svg",
+        {
+          className: "icon",
+          viewBox: "0 0 1024 1024",
+          version: "1.1",
+          xmlns: "http://www.w3.org/2000/svg",
+          width: "16",
+          height: "16"
+        },
+        /* @__PURE__ */ import_react.default.createElement(
+          "path",
+          {
+            d: "M880.0256 912.0256H144.0256a31.9488 31.9488 0 0 1-32.0512-32V144.0256c0-17.7152 14.336-32.0512 32.0512-32.0512h359.936c4.4544 0 8.0384 3.584 8.0384 8.0384v56.0128c0 4.352-3.584 7.9872-7.9872 7.9872h-320v655.9744h655.9744v-320c0-4.4032 3.584-7.9872 8.0384-7.9872h55.9616c4.4032 0 8.0384 3.584 8.0384 7.9872v359.9872c0 17.7152-14.336 32-32 32zM770.8672 199.1168l-52.224-52.224a8.0384 8.0384 0 0 1 4.7104-13.568l179.4048-20.992c5.12-0.6144 9.5232 3.6864 8.9088 8.9088l-20.992 179.4048a8.0384 8.0384 0 0 1-13.6192 4.6592L824.6784 252.928l-256.2048 256.2048c-3.072 3.072-8.192 3.072-11.264 0l-42.4448-42.3936a8.0384 8.0384 0 0 1 0-11.264l256.1024-256.3584z"
+          }
+        )
+      )
+    ));
+  }
+  renderControls() {
+    const { maximization, minimize } = this.state;
+    const { enableMaximization, isEmbed } = this.props;
+    if (isEmbed) {
+      return /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefix}-controls` }, this.renderControlLink(), /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefix}-item`, onClick: this.onClose }, /* @__PURE__ */ import_react.default.createElement(import_icons.CloseOutlined, null)));
+    }
+    return /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefix}-controls` }, this.renderControlLink(), /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefix}-item`, onClick: this.toggleMinimize }, minimize ? /* @__PURE__ */ import_react.default.createElement(import_icons.ExpandAltOutlined, null) : /* @__PURE__ */ import_react.default.createElement(import_icons.MinusOutlined, null)), enableMaximization && /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefix}-item`, onClick: this.toggleMaximization }, maximization ? /* @__PURE__ */ import_react.default.createElement(import_icons.FullscreenExitOutlined, null) : /* @__PURE__ */ import_react.default.createElement(import_icons.FullscreenOutlined, null)), /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefix}-item`, onClick: this.onClose }, /* @__PURE__ */ import_react.default.createElement(import_icons.CloseOutlined, null)));
+  }
+  renderContent() {
+    const { children } = this.props;
+    return /* @__PURE__ */ import_react.default.createElement(
+      "main",
+      {
+        className: `${prefix}-main`,
+        style: this.state.minimize ? { visibility: "hidden" } : {}
+      },
+      this.renderMask(),
+      children
+    );
+  }
+  renderMask() {
+    if (!this.hasMask)
+      return;
+    return /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-mask` });
+  }
+  // 将比例转换为绝对数值，各个端的渲染依据视口大小会有不同
+  getCompatAbsPostion(info) {
+    const compatInfo = this.compatClonedModel(info);
+    const { minimize } = compatInfo;
+    const { clientWidth, clientHeight } = this.props;
+    const ret = {};
+    ["left", "width", "top", "height"].forEach((key) => {
+      ret[key] = compatInfo[key];
+    });
+    const { max } = this;
+    const { min } = this;
+    if (max && ret.width > max[0]) {
+      ret.width = max[0];
+    }
+    if (max && ret.height > max[1]) {
+      ret.height = max[1];
+    }
+    if (min && ret.width < min[0]) {
+      ret.width = min[0];
+    }
+    if (min && ret.height < min[1]) {
+      ret.height = min[1];
+    }
+    ret.width = minimize ? MINIMIZE_WIDTH : ret.width;
+    ret.height = minimize ? MINIMIZE_HEIGHT : ret.height;
+    if (ret.left + ret.width > clientWidth) {
+      ret.left = clientWidth - ret.width;
+      this.setState({ left: ret.left });
+    }
+    if (ret.left < 0) {
+      this.setState({ left: 0 });
+    }
+    if (ret.top < 0) {
+      this.setState({ top: 0 });
+    }
+    if (ret.top + ret.height > clientHeight) {
+      ret.top = clientHeight - ret.height;
+      this.setState({ top: ret.top });
+    }
+    return ret;
+  }
+  renderDialog() {
+    const style = this.getStyle();
+    const { className, isEmbed } = this.props;
+    return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        className: `${prefix}-container ${className} ${isEmbed ? `${prefix}-container-embed` : ""}`,
+        style,
+        ...this.state.minimize ? {} : { tabIndex: 0 }
+      },
+      this.renderHeader(),
+      this.renderContent(),
+      isEmbed ? this.renderEmbedBorders() : this.renderBorders(),
+      /* @__PURE__ */ import_react.default.createElement(import_EventProxy.EventProxy, { onPointerMove: this.onDragMove, onPointerUp: this.onDragEnd }),
+      /* @__PURE__ */ import_react.default.createElement(import_EventProxy.EventProxy, { onPointerUp: this.detectPointUp })
+    ));
+  }
+  /**
+   * width，height 是否在最大最小值的范围内
+   */
+  checkSize(width, height) {
+    const { max } = this;
+    const { min } = this;
+    const newModel = {};
+    const result = {
+      widthShouldChange: true,
+      heightShouldChange: true
+    };
+    if (min && width < min[0]) {
+      newModel.width = min[0];
+      result.widthShouldChange = false;
+    }
+    if (min && height < min[1]) {
+      newModel.height = min[1];
+      result.heightShouldChange = false;
+    }
+    if (max && width > max[0]) {
+      newModel.width = max[0];
+      result.widthShouldChange = false;
+    }
+    if (max && height > max[1]) {
+      newModel.height = max[1];
+      result.heightShouldChange = false;
+    }
+    return result;
+  }
+  renderEmbedBorders() {
+    return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
+      import_Anchor.Anchor,
+      {
+        dock: import_Dock.Dock.left,
+        onStart: this.onResizeStart,
+        onMove: this.onResizeMove,
+        onEnd: this.onResizeEnd
+      }
+    ));
+  }
+  renderBorders() {
+    return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
+      import_Anchor.Anchor,
+      {
+        dock: import_Dock.Dock.top,
+        onStart: this.onResizeStart,
+        onMove: this.onResizeMove,
+        onEnd: this.onResizeEnd
+      }
+    ), /* @__PURE__ */ import_react.default.createElement(
+      import_Anchor.Anchor,
+      {
+        dock: import_Dock.Dock.right,
+        onStart: this.onResizeStart,
+        onMove: this.onResizeMove,
+        onEnd: this.onResizeEnd
+      }
+    ), /* @__PURE__ */ import_react.default.createElement(
+      import_Anchor.Anchor,
+      {
+        dock: import_Dock.Dock.bottom,
+        onStart: this.onResizeStart,
+        onMove: this.onResizeMove,
+        onEnd: this.onResizeEnd
+      }
+    ), /* @__PURE__ */ import_react.default.createElement(
+      import_Anchor.Anchor,
+      {
+        dock: import_Dock.Dock.left,
+        onStart: this.onResizeStart,
+        onMove: this.onResizeMove,
+        onEnd: this.onResizeEnd
+      }
+    ), /* @__PURE__ */ import_react.default.createElement(
+      import_Anchor.Anchor,
+      {
+        dock: import_Dock.Dock.topLeft,
+        onStart: this.onResizeStart,
+        onMove: this.onResizeMove,
+        onEnd: this.onResizeEnd
+      }
+    ), /* @__PURE__ */ import_react.default.createElement(
+      import_Anchor.Anchor,
+      {
+        dock: import_Dock.Dock.topRight,
+        onStart: this.onResizeStart,
+        onMove: this.onResizeMove,
+        onEnd: this.onResizeEnd
+      }
+    ), /* @__PURE__ */ import_react.default.createElement(
+      import_Anchor.Anchor,
+      {
+        dock: import_Dock.Dock.bottomLeft,
+        onStart: this.onResizeStart,
+        onMove: this.onResizeMove,
+        onEnd: this.onResizeEnd
+      }
+    ), /* @__PURE__ */ import_react.default.createElement(
+      import_Anchor.Anchor,
+      {
+        dock: import_Dock.Dock.bottomRight,
+        onStart: this.onResizeStart,
+        onMove: this.onResizeMove,
+        onEnd: this.onResizeEnd
+      }
+    ));
+  }
+  render() {
+    const { visible, isEmbed } = this.props;
+    if (!visible && !isEmbed)
+      return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null);
+    return (0, import_react_dom.createPortal)(this.renderDialog(), _DialogComp.container);
+  }
+};
+var DialogComp = _DialogComp;
+DialogComp.defaultProps = {
+  min: DEFAULT_MIN,
+  resizable: true,
+  draggable: true,
+  enableMaximization: true,
+  isEmbed: false
+};
+var Dialog_default = (0, import_LocaleWrapper.default)({
+  componentName: "Dialog",
+  defaultLocale: import_zh_CN.default
+})(DialogComp);

package/lib/Dialog/index.less

@@ -0,0 +1,114 @@
+@import '../variable.less';
+
+@prefix: ob-dialog;
+
+.@{prefix}-container-embed {
+  @radius: 1px;
+  // 这里用 !important 是为了增加权重覆写弹窗模式的属性
+  border: 1px solid @border-color !important;
+  border-radius: @radius !important;
+  box-shadow: none !important;
+  @border-color: #dde4ed;
+}
+
+.@{prefix}-container {
+  position: fixed;
+  z-index: 999;
+  box-sizing: content-box;
+  color: #eee;
+  background-color: rgba(65, 74, 77, 1);
+  border-radius: 8px;
+  box-shadow: @boxShadowSecondary;
+  transition: visibility 0.2s ease-in-out, opacity 0.2s linear;
+  @header: 52px;
+  @footer: 40px;
+  @radius: 1px;
+  @border-color: #dde4ed;
+  @font-color: #38465c;
+
+  .@{prefix}-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: @header;
+    padding: 0 25px;
+    line-height: @header;
+    background-color: #fff;
+    border-radius: @radius;
+    cursor: grab;
+    user-select: none;
+
+    .@{prefix}-title {
+      display: inline-block;
+      width: 60%;
+      overflow: hidden;
+      color: @font-color;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      word-break: keep-all;
+    }
+
+    &:active {
+      cursor: grabbing;
+    }
+
+    .@{prefix}-controls {
+      display: flex;
+      align-items: center;
+      height: 100%;
+      text-align: center;
+
+      .@{prefix}-item {
+        @size: 15px;
+
+        display: inline-block;
+        width: @size;
+        margin-left: 16px;
+        color: @font-color;
+        font-size: @size;
+        line-height: @size;
+        text-align: center;
+        cursor: pointer;
+        transition-duration: 0.3s;
+
+        .@{prefix}-item-link {
+          padding-top: 2px;
+          color: @font-color;
+        }
+      }
+    }
+  }
+
+  .@{prefix}-main {
+    position: relative;
+    height: calc(~'100% - @{header}');
+    padding: 0 8px 8px 8px;
+    overflow: hidden;
+    background-color: #fff;
+    border-top: 1px solid #dde4ed;
+    .@{prefix}-mask {
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 9;
+      width: 100%;
+      height: 100%;
+    }
+
+    iframe {
+      width: 100%;
+      height: 100%;
+      border: none;
+    }
+  }
+
+  .@{prefix}-anchor {
+    position: absolute;
+    z-index: 9;
+    user-select: none;
+  }
+}
+
+.@{prefix}-container:focus {
+  outline: transparent;
+}

package/lib/Dialog/locale/en-US.js

@@ -0,0 +1,28 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/Dialog/locale/en-US.ts
+var en_US_exports = {};
+__export(en_US_exports, {
+  default: () => en_US_default
+});
+module.exports = __toCommonJS(en_US_exports);
+var en_US_default = {
+  helpDocument: "Documentation",
+  openHelpCenter: "Document Center"
+};