@officesdk/design 0.1.26 → 0.1.27

package/dist/components/cjs/index.d.ts

@@ -3,6 +3,7 @@ import { TooltipProps as TooltipProps$1 } from 'rc-tooltip/lib/Tooltip';
 import { DropdownProps as DropdownProps$1 } from 'rc-dropdown';
 import * as styled_components from 'styled-components';
 import { ThemedStyledInterface } from 'styled-components';
+import { DialogProps } from 'rc-dialog';
 import { Theme } from '@officesdk/design/theme';
 
 interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -1321,6 +1322,146 @@ declare const Dropdown: React$1.FC<DropdownProps>;
 declare const DropdownGlobalStyles: styled_components.GlobalStyleComponent<{}, styled_components.DefaultTheme>;
 declare const MenuGlobalStyles: styled_components.GlobalStyleComponent<{}, styled_components.DefaultTheme>;
 
+interface ModalProps extends DialogProps {
+    /**
+     * Whether the modal is visible
+     */
+    visible?: boolean;
+    /**
+     * Modal variant type
+     * - 'message': Message dialog (max 400px, min 360px)
+     * - 'functional': Functional dialog (default 640px, max 800px, min 400px)
+     */
+    variant?: 'message' | 'functional';
+    /**
+     * Mask layer type
+     * - 'light': Light mask (rgba(65,70,75,0.5))
+     * - 'dark': Dark mask (rgba(44,48,51,0.8))
+     */
+    maskType?: 'light' | 'dark';
+    /**
+     * Modal title
+     */
+    title?: React$1.ReactNode;
+    /**
+     * Modal width
+     */
+    width?: string | number;
+    /**
+     * Modal height
+     */
+    height?: string | number;
+    /**
+     * Whether to show mask
+     */
+    mask?: boolean;
+    /**
+     * Whether to close modal when clicking mask
+     */
+    maskClosable?: boolean;
+    /**
+     * Whether to show close button
+     */
+    closable?: boolean;
+    /**
+     * OK button text, set to null to hide
+     */
+    okText?: string | null;
+    /**
+     * Cancel button text, set to null to hide
+     */
+    cancelText?: string | null;
+    /**
+     * Whether OK button is disabled
+     */
+    disabledOkButton?: boolean;
+    /**
+     * Custom footer, set to null to hide footer
+     */
+    footer?: React$1.ReactNode;
+    /**
+     * Callback when OK button is clicked
+     */
+    onOk?: (e: React$1.MouseEvent) => void;
+    /**
+     * Callback when Cancel button is clicked or modal is closed
+     */
+    onCancel?: (e: React$1.MouseEvent | React$1.KeyboardEvent) => void;
+    /**
+     * Modal content
+     */
+    children?: React$1.ReactNode;
+    /**
+     * CSS class prefix
+     */
+    prefixCls?: string;
+    /**
+     * Custom className
+     */
+    className?: string;
+    /**
+     * Custom style
+     */
+    style?: React$1.CSSProperties;
+    /**
+     * z-index of the modal
+     */
+    zIndex?: number;
+    /**
+     * Whether to destroy modal on close
+     */
+    destroyOnClose?: boolean;
+    /**
+     * Whether to focus on modal when opened
+     */
+    focusTriggerAfterClose?: boolean;
+    /**
+     * Return the mount node for Modal
+     */
+    getContainer?: () => HTMLElement;
+}
+/**
+ * Modal Component
+ *
+ * A dialog component for displaying content in a layer above the page.
+ *
+ * @example
+ * // Basic usage
+ * <Modal
+ *   visible={visible}
+ *   title="Modal Title"
+ *   onOk={handleOk}
+ *   onCancel={handleCancel}
+ * >
+ *   Modal content
+ * </Modal>
+ *
+ * @example
+ * // Custom footer
+ * <Modal
+ *   visible={visible}
+ *   title="Custom Footer"
+ *   footer={<Button onClick={handleClose}>Close</Button>}
+ *   onCancel={handleCancel}
+ * >
+ *   Modal content
+ * </Modal>
+ *
+ * @example
+ * // No footer
+ * <Modal
+ *   visible={visible}
+ *   title="No Footer"
+ *   footer={null}
+ *   onCancel={handleCancel}
+ * >
+ *   Modal content
+ * </Modal>
+ */
+declare const Modal: React$1.FC<ModalProps>;
+
+declare const ModalGlobalStyles: any;
+
 type DeepPartial<T extends object> = {
     [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
 };
@@ -1607,4 +1748,4 @@ declare const styled: ThemedStyledInterface<Theme>;
 
 declare const getGlobalTheme: () => Theme;
 
-export { type A11yConfig, type AnimationConfig, Button, type ButtonProps, Checkbox, type CheckboxProps, Dropdown, DropdownButton, type DropdownButtonProps, DropdownGlobalStyles, type DropdownProps, type I18nConfig, Icon, type IconComponent, type IconProps, IconProvider, type IconProviderProps, type IconRegistry, Input, type InputProps, Menu, type MenuDivider, MenuGlobalStyles, type MenuGroup, type MenuItem, type MenuItemType, type MenuProps, NumberInput, type NumberInputProps, Radio, type RadioProps, SearchInput, type SearchInputProps, Slider, type SliderProps, SpinButton, type SpinButtonProps, Switch, type SwitchProps, type TabItem, Tabs, type TabsProps, Toast, type ToastConfig, ToastContainer, type ToastContainerConfig, type ToastContainerProps, type ToastPosition, type ToastProps, ToolbarButton, type ToolbarButtonProps, Tooltip, type TooltipProps, type UIConfig, UIConfigProvider, type UIConfigProviderProps, UnderlinedInput, type InputProps as UnderlinedInputProps, type ZIndexConfig, createUIConfig, getGlobalIconRegistry, getGlobalTheme, getGlobalToastConfig, getUIConfig, initUIConfig, mergeUIConfig, styled, toast, useIconRegistry, useToast, useUIConfig };
+export { type A11yConfig, type AnimationConfig, Button, type ButtonProps, Checkbox, type CheckboxProps, Dropdown, DropdownButton, type DropdownButtonProps, DropdownGlobalStyles, type DropdownProps, type I18nConfig, Icon, type IconComponent, type IconProps, IconProvider, type IconProviderProps, type IconRegistry, Input, type InputProps, Menu, type MenuDivider, MenuGlobalStyles, type MenuGroup, type MenuItem, type MenuItemType, type MenuProps, Modal, ModalGlobalStyles, type ModalProps, NumberInput, type NumberInputProps, Radio, type RadioProps, SearchInput, type SearchInputProps, Slider, type SliderProps, SpinButton, type SpinButtonProps, Switch, type SwitchProps, type TabItem, Tabs, type TabsProps, Toast, type ToastConfig, ToastContainer, type ToastContainerConfig, type ToastContainerProps, type ToastPosition, type ToastProps, ToolbarButton, type ToolbarButtonProps, Tooltip, type TooltipProps, type UIConfig, UIConfigProvider, type UIConfigProviderProps, UnderlinedInput, type InputProps as UnderlinedInputProps, type ZIndexConfig, createUIConfig, getGlobalIconRegistry, getGlobalTheme, getGlobalToastConfig, getUIConfig, initUIConfig, mergeUIConfig, styled, toast, useIconRegistry, useToast, useUIConfig };

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;
@@ -4455,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();
@@ -4569,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;