@officesdk/design 0.1.25 → 0.1.27

package/dist/components/cjs/index.js

@@ -11,6 +11,7 @@ var VirtualList = require('rc-virtual-list');
 require('rc-menu/assets/index.css');
 var RcDropdown = require('rc-dropdown');
 require('rc-dropdown/assets/index.css');
+var RcDialog = require('rc-dialog');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -21,6 +22,7 @@ var RcTooltip__default = /*#__PURE__*/_interopDefault(RcTooltip);
 var RcMenu__default = /*#__PURE__*/_interopDefault(RcMenu);
 var VirtualList__default = /*#__PURE__*/_interopDefault(VirtualList);
 var RcDropdown__default = /*#__PURE__*/_interopDefault(RcDropdown);
+var RcDialog__default = /*#__PURE__*/_interopDefault(RcDialog);
 
 var __defProp = Object.defineProperty;
 var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -646,7 +648,7 @@ var init_context = __esm({
     };
   }
 });
-var wrapWithTheme, styledFunction, styledWithBase; exports.styled = void 0;
+var wrapWithTheme, styledFunction, styledWithBase; exports.styled = void 0; var createGlobalStyle;
 var init_styled = __esm({
   "src/utils/styled.ts"() {
     init_context();
@@ -675,6 +677,10 @@ var init_styled = __esm({
       }
     });
     exports.styled = styledWithBase;
+    createGlobalStyle = (...args) => {
+      const GlobalStyleComponent = baseStyled.createGlobalStyle(...args);
+      return wrapWithTheme(GlobalStyleComponent);
+    };
   }
 });
 var IconWrapper2, TextWrapper, IconOnlyWrapper, StyledButton; exports.Button = void 0;
@@ -3207,15 +3213,16 @@ var ToolbarButtonContainer = exports.styled.div`
   border-radius: 2px;
   transition: border-color 0.15s ease;
   box-sizing: border-box;
+  overflow: hidden;
 
-  ${({ $disabled, $active, theme: theme3 }) => {
+  ${({ $disabled, $isActive, theme: theme3 }) => {
   const config = theme3.components.toolbarButton;
   if ($disabled) {
     return `
         border-color: ${config.border.borderColorDisabled};
       `;
   }
-  if ($active) {
+  if ($isActive) {
     return `
         border-color: ${config.border.borderColorActive};
 
@@ -3243,6 +3250,15 @@ var ToolbarButtonContainer = exports.styled.div`
       }
     `;
 }}
+
+  ${({ theme: theme3 }) => {
+  const config = theme3.components.toolbarButton;
+  return `
+      height: ${config.layout.height};
+      padding: ${config.layout.padding};
+      border-radius: ${config.layout.borderRadius};
+    `;
+}}
 `;
 var MainButton = exports.styled.button`
   display: flex;
@@ -3251,17 +3267,17 @@ var MainButton = exports.styled.button`
   border: none;
   cursor: pointer;
   outline: none;
+  height: 100%;
   transition: background-color 0.15s ease;
 
-  ${({ $hasLabel, theme: theme3 }) => {
+  ${({ theme: theme3 }) => {
   const config = theme3.components.toolbarButton;
   return `
-      height: ${config.layout.height};
-      padding: ${$hasLabel ? config.layout.content.padding : config.layout.padding};
+      padding: ${config.layout.content.padding};
     `;
 }}
 
-  ${({ $disabled, $active, theme: theme3 }) => {
+  ${({ $disabled, $isActive, theme: theme3 }) => {
   const config = theme3.components.toolbarButton;
   if ($disabled) {
     return `
@@ -3269,7 +3285,7 @@ var MainButton = exports.styled.button`
         background: ${config.background.backgroundDisabled};
       `;
   }
-  if ($active) {
+  if ($isActive) {
     return `
         background: ${config.background.backgroundActive};
       `;
@@ -3301,13 +3317,8 @@ var IconWrapper4 = exports.styled.span`
     `;
 }}
 
-  ${({ $disabled, theme: theme3 }) => {
-  const config = theme3.components.toolbarButton;
-  return $disabled ? `
-    color: ${config.color.colorDisabled};
-  ` : `
-    color: ${config.color.color};
-  `;
+  ${({ $disabled }) => {
+  return $disabled ? `opacity: 0.3;` : ``;
 }}
 
   svg, img {
@@ -3414,14 +3425,14 @@ var Divider = exports.styled.div`
     `;
 }}
 
-  ${({ $disabled, $active, theme: theme3 }) => {
+  ${({ $disabled, $isActive, theme: theme3 }) => {
   const config = theme3.components.toolbarButton;
   if ($disabled) {
     return `
         background-color: ${config.border.borderColorDisabled};
       `;
   }
-  if ($active) {
+  if ($isActive) {
     return `
         background-color: ${config.border.borderColorActive};
       `;
@@ -3441,12 +3452,13 @@ var ArrowIcon = () => /* @__PURE__ */ React3__default.default.createElement("svg
 ));
 var ToolbarButton = ({
   disabled = false,
-  active = false,
+  isActive = false,
   icon,
   label,
   hasDropdown = false,
   splitDropdown = false,
   onClick,
+  onDoubleClick,
   onDropdownClick,
   className,
   style
@@ -3455,11 +3467,29 @@ var ToolbarButton = ({
     if (disabled) return;
     onClick?.(e);
   };
+  const handleMainDoubleClick = (e) => {
+    if (disabled) return;
+    onDoubleClick?.(e);
+  };
   const handleDropdownClick = (e) => {
     if (disabled) return;
     e.stopPropagation();
     onDropdownClick?.(e);
   };
+  const renderIcon = () => {
+    if (!icon) return null;
+    if (typeof icon === "string") {
+      return /* @__PURE__ */ React3__default.default.createElement(IconWrapper4, { $disabled: disabled }, /* @__PURE__ */ React3__default.default.createElement("img", { src: icon, alt: "icon" }));
+    }
+    return /* @__PURE__ */ React3__default.default.createElement(IconWrapper4, { $disabled: disabled }, icon);
+  };
+  const renderLabel = () => {
+    if (!label) return null;
+    if (typeof label === "string") {
+      return /* @__PURE__ */ React3__default.default.createElement(LabelText, { $disabled: disabled }, label);
+    }
+    return label;
+  };
   if (!splitDropdown && hasDropdown) {
     return /* @__PURE__ */ React3__default.default.createElement(
       ToolbarButtonContainer,
@@ -3467,19 +3497,20 @@ var ToolbarButton = ({
         className,
         style,
         $disabled: disabled,
-        $active: active
+        $isActive: isActive
       },
       /* @__PURE__ */ React3__default.default.createElement(
         MainButton,
         {
           $disabled: disabled,
-          $active: active,
+          $isActive: isActive,
           $hasLabel: !!label,
           onClick: handleMainClick,
+          onDoubleClick: handleMainDoubleClick,
           disabled
         },
-        icon && /* @__PURE__ */ React3__default.default.createElement(IconWrapper4, { $disabled: disabled }, icon),
-        label && /* @__PURE__ */ React3__default.default.createElement(LabelText, { $disabled: disabled }, label),
+        renderIcon(),
+        renderLabel(),
         /* @__PURE__ */ React3__default.default.createElement(DropdownArrow, { $disabled: disabled }, /* @__PURE__ */ React3__default.default.createElement(ArrowIcon, null))
       )
     );
@@ -3491,26 +3522,27 @@ var ToolbarButton = ({
         className,
         style,
         $disabled: disabled,
-        $active: active
+        $isActive: isActive
       },
       /* @__PURE__ */ React3__default.default.createElement(
         MainButton,
         {
           $disabled: disabled,
-          $active: active,
+          $isActive: isActive,
           $hasLabel: !!label,
           onClick: handleMainClick,
+          onDoubleClick: handleMainDoubleClick,
           disabled
         },
-        icon && /* @__PURE__ */ React3__default.default.createElement(IconWrapper4, { $disabled: disabled }, icon),
-        label && /* @__PURE__ */ React3__default.default.createElement(LabelText, { $disabled: disabled }, label)
+        renderIcon(),
+        renderLabel()
       ),
-      /* @__PURE__ */ React3__default.default.createElement(Divider, { $disabled: disabled, $active: active }),
+      /* @__PURE__ */ React3__default.default.createElement(Divider, { $disabled: disabled, $isActive: isActive }),
       /* @__PURE__ */ React3__default.default.createElement(
         DropdownButton,
         {
           $disabled: disabled,
-          $active: active,
+          $isActive: isActive,
           $split: true,
           onClick: handleDropdownClick,
           disabled
@@ -3525,19 +3557,20 @@ var ToolbarButton = ({
       className,
       style,
       $disabled: disabled,
-      $active: active
+      $isActive: isActive
     },
     /* @__PURE__ */ React3__default.default.createElement(
       MainButton,
       {
         $disabled: disabled,
-        $active: active,
+        $isActive: isActive,
         $hasLabel: !!label,
         onClick: handleMainClick,
+        onDoubleClick: handleMainDoubleClick,
         disabled
       },
-      icon && /* @__PURE__ */ React3__default.default.createElement(IconWrapper4, { $disabled: disabled }, icon),
-      label && /* @__PURE__ */ React3__default.default.createElement(LabelText, { $disabled: disabled }, label)
+      renderIcon(),
+      renderLabel()
     )
   );
 };
@@ -4428,6 +4461,264 @@ var Dropdown = ({
 };
 Dropdown.displayName = "Dropdown";
 
+// src/Modal/Modal.tsx
+init_Button2();
+init_Icon2();
+
+// src/Modal/globalStyle.ts
+init_styled();
+var ModalGlobalStyles = createGlobalStyle`
+  .osd-modal {
+    position: relative;
+    width: auto;
+    max-height: 100%;
+  }
+
+  .osd-modal-mask {
+    position: fixed;
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    background-color: ${(props) => props.theme.components.modal.message.maskLight};
+    height: 100%;
+    z-index: ${(props) => props.theme.components.modal.message.maskZIndex};
+  }
+
+  .osd-modal-mask-dark {
+    background-color: ${(props) => props.theme.components.modal.message.maskDark};
+  }
+
+  .osd-modal-mask-hidden {
+    display: none;
+  }
+
+  .osd-modal-wrap {
+    position: fixed;
+    overflow: auto;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: ${(props) => props.theme.components.modal.message.maskZIndex};
+    -webkit-overflow-scrolling: touch;
+    outline: 0;
+  }
+
+  .osd-modal-section {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    padding: ${(props) => props.theme.components.modal.message.padding};
+    background: ${(props) => props.theme.components.modal.message.background};
+    border: ${(props) => props.theme.components.modal.message.border};
+    box-shadow: ${(props) => props.theme.components.modal.message.shadow};
+    border-radius: ${(props) => props.theme.components.modal.message.borderRadius};
+    box-sizing: border-box;
+  }
+
+  .osd-modal-section-message {
+    max-width: ${(props) => props.theme.components.modal.message.maxWidth};
+    min-width: ${(props) => props.theme.components.modal.message.minWidth};
+    max-height: ${(props) => props.theme.components.modal.message.maxHeight};
+    min-height: ${(props) => props.theme.components.modal.message.minHeight};
+  }
+
+  .osd-modal-section-functional {
+    max-width: ${(props) => props.theme.components.modal.functional.maxWidth};
+    min-width: ${(props) => props.theme.components.modal.functional.minWidth};
+    max-height: ${(props) => props.theme.components.modal.functional.maxHeight};
+    min-height: ${(props) => props.theme.components.modal.functional.minHeight};
+  }
+
+  .osd-modal-content-message {
+    max-width: ${(props) => props.theme.components.modal.message.maxWidth};
+    min-width: ${(props) => props.theme.components.modal.message.minWidth};
+    max-height: ${(props) => props.theme.components.modal.message.maxHeight};
+    min-height: ${(props) => props.theme.components.modal.message.minHeight};
+  }
+
+  .osd-modal-content-functional {
+    max-width: ${(props) => props.theme.components.modal.functional.maxWidth};
+    min-width: ${(props) => props.theme.components.modal.functional.minWidth};
+    max-height: ${(props) => props.theme.components.modal.functional.maxHeight};
+    min-height: ${(props) => props.theme.components.modal.functional.minHeight};
+  }
+
+  .osd-modal-close {
+    position: absolute;
+    right: 16px;
+    top: 16px;
+    z-index: 10;
+    padding: 4px;
+    line-height: 1;
+    border: 0;
+    outline: 0;
+    background: transparent;
+    cursor: pointer;
+    border-radius: 4px;
+    transition: background-color 0.2s;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .osd-modal-close:hover {
+    background: ${(props) => props.theme.components.modal.message.closeButtonHoverBackground};
+  }
+
+  .osd-modal-close:active {
+    background: ${(props) => props.theme.components.modal.message.closeButtonActiveBackground};
+  }
+
+  .osd-modal-header {
+    margin-bottom: 16px;
+    padding-right: 24px;
+  }
+
+  .osd-modal-title {
+    font-size: ${(props) => props.theme.components.modal.message.titleFontSize};
+    font-weight: ${(props) => props.theme.components.modal.message.titleFontWeight};
+    line-height: ${(props) => props.theme.components.modal.message.titleLineHeight};
+    color: ${(props) => props.theme.components.modal.message.titleColor};
+  }
+
+  .osd-modal-body {
+    flex: 1;
+    font-size: ${(props) => props.theme.components.modal.message.bodyFontSize};
+    line-height: ${(props) => props.theme.components.modal.message.bodyLineHeight};
+    color: ${(props) => props.theme.components.modal.message.bodyColor};
+  }
+
+  .osd-modal-footer {
+    margin-top: 16px;
+    display: flex;
+    justify-content: flex-end;
+    gap: 8px;
+  }
+
+  .osd-modal.zoom-enter,
+  .osd-modal.zoom-appear {
+    animation-duration: 0.3s;
+    transform: none;
+    opacity: 0;
+  }
+
+  .osd-modal-open {
+    overflow: hidden;
+  }
+`;
+
+// src/Modal/Modal.tsx
+init_context();
+var Modal = ({
+  visible = false,
+  variant = "message",
+  maskType = "light",
+  title,
+  width,
+  okText,
+  cancelText,
+  footer,
+  onOk,
+  onCancel,
+  onClose,
+  disabledOkButton = false,
+  prefixCls = "osd-modal",
+  closable = true,
+  closeIcon,
+  mask = true,
+  maskClosable = true,
+  className,
+  children,
+  ...restProps
+}) => {
+  const handleClose = React3.useCallback(
+    (e) => {
+      onClose?.(e);
+      onCancel?.(e);
+    },
+    [onClose, onCancel]
+  );
+  React3.useEffect(() => {
+    styleManager.inject("osd-modal-styles", ModalGlobalStyles);
+  }, []);
+  const theme3 = exports.getGlobalTheme();
+  const getDefaultWidth = () => {
+    if (width !== void 0) return width;
+    switch (variant) {
+      case "functional":
+        return theme3.components.modal.functional.defaultWidth;
+      case "message":
+      default:
+        return theme3.components.modal.message.defaultWidth;
+    }
+  };
+  const getContentClassName = () => {
+    switch (variant) {
+      case "message":
+        return `${prefixCls}-content-message`;
+      case "functional":
+        return `${prefixCls}-content-functional`;
+      default:
+        return `${prefixCls}-content-message`;
+    }
+  };
+  const contentClassName = getContentClassName();
+  const maskClassName = maskType === "dark" ? `${prefixCls}-mask-dark` : void 0;
+  let defaultFooter = null;
+  if (footer === void 0) {
+    const okButton = okText === null ? null : /* @__PURE__ */ React3__default.default.createElement(
+      exports.Button,
+      {
+        key: "confirm",
+        variant: "solid",
+        colorType: "guidance",
+        onClick: onOk,
+        disabled: disabledOkButton
+      },
+      okText ?? "OK"
+    );
+    const cancelButton = cancelText === null ? null : /* @__PURE__ */ React3__default.default.createElement(exports.Button, { key: "cancel", variant: "outlined", colorType: "default", onClick: (e) => handleClose(e) }, cancelText ?? "Cancel");
+    defaultFooter = /* @__PURE__ */ React3__default.default.createElement(React3__default.default.Fragment, null, cancelButton, okButton);
+  }
+  const semanticClassNames = {};
+  if (maskClassName) {
+    semanticClassNames.mask = maskClassName;
+  }
+  if (contentClassName) {
+    semanticClassNames.content = contentClassName;
+  }
+  const semanticStyles = {};
+  if (width !== void 0) {
+    semanticStyles.content = { width };
+  }
+  return /* @__PURE__ */ React3__default.default.createElement(
+    RcDialog__default.default,
+    {
+      ...restProps,
+      visible,
+      title,
+      width: width === void 0 ? getDefaultWidth() : void 0,
+      prefixCls,
+      closable,
+      closeIcon: closeIcon ?? /* @__PURE__ */ React3__default.default.createElement(exports.Icon, { name: "close", size: 16 }),
+      mask,
+      maskClosable,
+      classNames: Object.keys(semanticClassNames).length > 0 ? semanticClassNames : void 0,
+      styles: Object.keys(semanticStyles).length > 0 ? semanticStyles : void 0,
+      className,
+      onClose: handleClose,
+      footer: footer === void 0 ? defaultFooter : footer
+    },
+    children
+  );
+};
+Modal.displayName = "Modal";
+
 // src/UIConfigProvider/UIConfigProvider.tsx
 init_IconProvider();
 init_configManager();
@@ -4542,6 +4833,8 @@ exports.DropdownGlobalStyles = DropdownGlobalStyles;
 exports.Input = Input;
 exports.Menu = Menu;
 exports.MenuGlobalStyles = MenuGlobalStyles;
+exports.Modal = Modal;
+exports.ModalGlobalStyles = ModalGlobalStyles;
 exports.Radio = Radio;
 exports.SearchInput = SearchInput;
 exports.Switch = Switch;