@officesdk/design 0.1.26 → 0.1.28

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> {
@@ -860,7 +861,7 @@ interface TabItem {
     /**
      * Tab label
      */
-    label: string;
+    label: string | React$1.ReactNode;
     /**
      * Whether the tab is disabled
      */
@@ -903,6 +904,14 @@ interface TabsProps {
      * Custom style
      */
     style?: React$1.CSSProperties;
+    /**
+     * Custom className for tab item
+     */
+    tabItemClassName?: string;
+    /**
+     * Custom style for tab item
+     */
+    tabItemStyle?: React$1.CSSProperties;
 }
 /**
  * Tab Component
@@ -1321,6 +1330,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 +1756,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 };