@officesdk/design 0.1.25 → 0.1.27

package/dist/components/esm/index.js

@@ -1,7 +1,7 @@
 import ReactDOM from 'react-dom';
 import React3, { forwardRef, useState, createContext, useEffect, useRef, useCallback, useContext, useMemo } from 'react';
 import { lightTheme } from '@officesdk/design/theme';
-import baseStyled, { createGlobalStyle } from 'styled-components';
+import baseStyled, { createGlobalStyle as createGlobalStyle$1 } from 'styled-components';
 import RcTooltip from 'rc-tooltip';
 import 'rc-tooltip/assets/bootstrap.css';
 import RcMenu, { Divider as Divider$1, ItemGroup, SubMenu, MenuItem } from 'rc-menu';
@@ -9,6 +9,7 @@ import VirtualList from 'rc-virtual-list';
 import 'rc-menu/assets/index.css';
 import RcDropdown from 'rc-dropdown';
 import 'rc-dropdown/assets/index.css';
+import RcDialog from 'rc-dialog';
 
 var __defProp = Object.defineProperty;
 var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -634,7 +635,7 @@ var init_context = __esm({
     };
   }
 });
-var wrapWithTheme, styledFunction, styledWithBase, styled;
+var wrapWithTheme, styledFunction, styledWithBase, styled, createGlobalStyle;
 var init_styled = __esm({
   "src/utils/styled.ts"() {
     init_context();
@@ -663,6 +664,10 @@ var init_styled = __esm({
       }
     });
     styled = styledWithBase;
+    createGlobalStyle = (...args) => {
+      const GlobalStyleComponent = createGlobalStyle$1(...args);
+      return wrapWithTheme(GlobalStyleComponent);
+    };
   }
 });
 var IconWrapper2, TextWrapper, IconOnlyWrapper, StyledButton, Button;
@@ -2780,7 +2785,7 @@ var theme = getGlobalTheme();
 var arrowSize = 5;
 var paddingDistance = `${arrowSize}px`;
 var arrowDistance = `${arrowSize}px`;
-var TooltipGlobalStyles = createGlobalStyle`
+var TooltipGlobalStyles = createGlobalStyle$1`
   /* Base tooltip container */
   .od-tooltip {
     position: absolute;
@@ -3195,15 +3200,16 @@ var ToolbarButtonContainer = 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};
 
@@ -3231,6 +3237,15 @@ var ToolbarButtonContainer = 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 = styled.button`
   display: flex;
@@ -3239,17 +3254,17 @@ var MainButton = 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 `
@@ -3257,7 +3272,7 @@ var MainButton = styled.button`
         background: ${config.background.backgroundDisabled};
       `;
   }
-  if ($active) {
+  if ($isActive) {
     return `
         background: ${config.background.backgroundActive};
       `;
@@ -3289,13 +3304,8 @@ var IconWrapper4 = 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 {
@@ -3402,14 +3412,14 @@ var Divider = 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};
       `;
@@ -3429,12 +3439,13 @@ var ArrowIcon = () => /* @__PURE__ */ React3.createElement("svg", { xmlns: "http
 ));
 var ToolbarButton = ({
   disabled = false,
-  active = false,
+  isActive = false,
   icon,
   label,
   hasDropdown = false,
   splitDropdown = false,
   onClick,
+  onDoubleClick,
   onDropdownClick,
   className,
   style
@@ -3443,11 +3454,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.createElement(IconWrapper4, { $disabled: disabled }, /* @__PURE__ */ React3.createElement("img", { src: icon, alt: "icon" }));
+    }
+    return /* @__PURE__ */ React3.createElement(IconWrapper4, { $disabled: disabled }, icon);
+  };
+  const renderLabel = () => {
+    if (!label) return null;
+    if (typeof label === "string") {
+      return /* @__PURE__ */ React3.createElement(LabelText, { $disabled: disabled }, label);
+    }
+    return label;
+  };
   if (!splitDropdown && hasDropdown) {
     return /* @__PURE__ */ React3.createElement(
       ToolbarButtonContainer,
@@ -3455,19 +3484,20 @@ var ToolbarButton = ({
         className,
         style,
         $disabled: disabled,
-        $active: active
+        $isActive: isActive
       },
       /* @__PURE__ */ React3.createElement(
         MainButton,
         {
           $disabled: disabled,
-          $active: active,
+          $isActive: isActive,
           $hasLabel: !!label,
           onClick: handleMainClick,
+          onDoubleClick: handleMainDoubleClick,
           disabled
         },
-        icon && /* @__PURE__ */ React3.createElement(IconWrapper4, { $disabled: disabled }, icon),
-        label && /* @__PURE__ */ React3.createElement(LabelText, { $disabled: disabled }, label),
+        renderIcon(),
+        renderLabel(),
         /* @__PURE__ */ React3.createElement(DropdownArrow, { $disabled: disabled }, /* @__PURE__ */ React3.createElement(ArrowIcon, null))
       )
     );
@@ -3479,26 +3509,27 @@ var ToolbarButton = ({
         className,
         style,
         $disabled: disabled,
-        $active: active
+        $isActive: isActive
       },
       /* @__PURE__ */ React3.createElement(
         MainButton,
         {
           $disabled: disabled,
-          $active: active,
+          $isActive: isActive,
           $hasLabel: !!label,
           onClick: handleMainClick,
+          onDoubleClick: handleMainDoubleClick,
           disabled
         },
-        icon && /* @__PURE__ */ React3.createElement(IconWrapper4, { $disabled: disabled }, icon),
-        label && /* @__PURE__ */ React3.createElement(LabelText, { $disabled: disabled }, label)
+        renderIcon(),
+        renderLabel()
       ),
-      /* @__PURE__ */ React3.createElement(Divider, { $disabled: disabled, $active: active }),
+      /* @__PURE__ */ React3.createElement(Divider, { $disabled: disabled, $isActive: isActive }),
       /* @__PURE__ */ React3.createElement(
         DropdownButton,
         {
           $disabled: disabled,
-          $active: active,
+          $isActive: isActive,
           $split: true,
           onClick: handleDropdownClick,
           disabled
@@ -3513,19 +3544,20 @@ var ToolbarButton = ({
       className,
       style,
       $disabled: disabled,
-      $active: active
+      $isActive: isActive
     },
     /* @__PURE__ */ React3.createElement(
       MainButton,
       {
         $disabled: disabled,
-        $active: active,
+        $isActive: isActive,
         $hasLabel: !!label,
         onClick: handleMainClick,
+        onDoubleClick: handleMainDoubleClick,
         disabled
       },
-      icon && /* @__PURE__ */ React3.createElement(IconWrapper4, { $disabled: disabled }, icon),
-      label && /* @__PURE__ */ React3.createElement(LabelText, { $disabled: disabled }, label)
+      renderIcon(),
+      renderLabel()
     )
   );
 };
@@ -3740,7 +3772,7 @@ init_Icon2();
 // src/dropdown/globalStyle.ts
 init_context();
 var theme2 = getGlobalTheme();
-var DropdownGlobalStyles = createGlobalStyle`
+var DropdownGlobalStyles = createGlobalStyle$1`
   /* Dropdown container */
   .od-dropdown {
     position: absolute;
@@ -3798,7 +3830,7 @@ var DropdownGlobalStyles = createGlobalStyle`
     }
   }
 `;
-var MenuGlobalStyles = createGlobalStyle`
+var MenuGlobalStyles = createGlobalStyle$1`
   /* Base menu container */
   .od-menu {
     margin: 0;
@@ -4416,6 +4448,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 = useCallback(
+    (e) => {
+      onClose?.(e);
+      onCancel?.(e);
+    },
+    [onClose, onCancel]
+  );
+  useEffect(() => {
+    styleManager.inject("osd-modal-styles", ModalGlobalStyles);
+  }, []);
+  const theme3 = 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.createElement(
+      Button,
+      {
+        key: "confirm",
+        variant: "solid",
+        colorType: "guidance",
+        onClick: onOk,
+        disabled: disabledOkButton
+      },
+      okText ?? "OK"
+    );
+    const cancelButton = cancelText === null ? null : /* @__PURE__ */ React3.createElement(Button, { key: "cancel", variant: "outlined", colorType: "default", onClick: (e) => handleClose(e) }, cancelText ?? "Cancel");
+    defaultFooter = /* @__PURE__ */ React3.createElement(React3.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.createElement(
+    RcDialog,
+    {
+      ...restProps,
+      visible,
+      title,
+      width: width === void 0 ? getDefaultWidth() : void 0,
+      prefixCls,
+      closable,
+      closeIcon: closeIcon ?? /* @__PURE__ */ React3.createElement(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();
@@ -4523,6 +4813,6 @@ init_configManager();
 init_styled();
 init_context();
 
-export { Button, Checkbox, Dropdown, DropdownButton2 as DropdownButton, DropdownGlobalStyles, Icon, IconProvider, Input, Menu, MenuGlobalStyles, NumberInput, Radio, SearchInput, Slider, SpinButton, Switch, Tabs, Toast, ToastContainer2 as ToastContainer, ToolbarButton, Tooltip, UIConfigProvider, UnderlinedInput, createUIConfig, getGlobalIconRegistry, getGlobalTheme, getGlobalToastConfig, getUIConfig, initUIConfig, mergeUIConfig, styled, toast, useIconRegistry, useToast, useUIConfig };
+export { Button, Checkbox, Dropdown, DropdownButton2 as DropdownButton, DropdownGlobalStyles, Icon, IconProvider, Input, Menu, MenuGlobalStyles, Modal, ModalGlobalStyles, NumberInput, Radio, SearchInput, Slider, SpinButton, Switch, Tabs, Toast, ToastContainer2 as ToastContainer, ToolbarButton, Tooltip, UIConfigProvider, UnderlinedInput, createUIConfig, getGlobalIconRegistry, getGlobalTheme, getGlobalToastConfig, getUIConfig, initUIConfig, mergeUIConfig, styled, toast, useIconRegistry, useToast, useUIConfig };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map