@officesdk/design 0.1.6 → 0.1.9

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

@@ -1,11 +1,14 @@
 import React from 'react';
 import { TooltipProps as TooltipProps$1 } from 'rc-tooltip/lib/Tooltip';
-import { Theme } from '@officesdk/design-theme';
+import { DropdownProps as DropdownProps$1 } from 'rc-dropdown';
+import * as styled_components from 'styled-components';
 import { ThemedStyledInterface } from 'styled-components';
+import { Theme } from '@officesdk/design-theme';
 
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     /**
      * Button variant type
+     * - 'icon': Square icon button without padding, size based on iconSize
      */
     variant?: 'solid' | 'outlined' | 'text' | 'icon';
     /**
@@ -30,13 +33,15 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
      */
     fullWidth?: boolean;
     /**
-     * Icon to display before the button text
+     * Icon to display with the button text
+     * - If string: treated as icon src URL, rendered using Icon component
+     * - If ReactNode: rendered directly
      */
-    iconBefore?: React.ReactNode;
+    icon?: string | React.ReactNode;
     /**
-     * Icon to display after the button text
+     * Icon placement relative to text (only for text buttons)
      */
-    iconAfter?: React.ReactNode;
+    iconPlacement?: 'before' | 'after';
     /**
      * Whether the icon button should have a border (only for variant='icon')
      */
@@ -50,12 +55,20 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  * <Button>button</Button>
  *
  * @example
- * // Button with icons
- * <Button iconBefore={<Icon />}>button</Button>
+ * // Button with icon (string URL)
+ * <Button icon="https://example.com/icon.svg" iconPlacement="before">button</Button>
+ *
+ * @example
+ * // Button with icon (ReactNode)
+ * <Button icon={<CustomIcon />} iconPlacement="after">button</Button>
  *
  * @example
- * // Icon-only button
- * <Button variant="icon" iconBordered><Icon /></Button>
+ * // Icon variant button (square, no padding)
+ * <Button variant="icon" icon={<CustomIcon />} iconBordered />
+ *
+ * @example
+ * // Icon variant button without border
+ * <Button variant="icon" icon={<CustomIcon />} />
  */
 declare const Button: React.FC<ButtonProps>;
 
@@ -331,8 +344,13 @@ interface SliderProps {
  */
 declare const Slider: React.FC<SliderProps>;
 
-type InputSize = 'small' | 'medium' | 'large' | 'extraLarge';
+type InputSize = 'mini' | 'small' | 'medium' | 'large';
+type LineType = 'outlined' | 'underlined';
 interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix'> {
+    /**
+     * Input line type
+     */
+    lineType?: LineType;
     /**
      * Input size
      */
@@ -353,6 +371,18 @@ interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, '
      * Node to display after the input
      */
     suffixNode?: React.ReactNode;
+    /**
+     * Whether to show clear button when input has value
+     */
+    clearable?: boolean;
+    /**
+     * Clear button click handler
+     */
+    onClear?: () => void;
+    /**
+     * Custom clear icon
+     */
+    clearIcon?: React.ReactNode;
     /**
      * Custom className
      */
@@ -366,12 +396,20 @@ interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, '
  * Input Component
  *
  * @example
- * // Basic input
+ * // Basic outlined input (default)
  * <Input placeholder="Enter text" />
  *
  * @example
+ * // Underlined input
+ * <Input lineType="underlined" placeholder="Enter text" />
+ *
+ * @example
  * // Input with prefix and suffix
- * <Input prefixNode={<SearchIcon />} suffixNode={<CloseIcon />} />
+ * <Input prefixNode={<SearchIcon />} suffixNode={<Icon />} />
+ *
+ * @example
+ * // Input with clearable
+ * <Input clearable onClear={() => console.log('cleared')} />
  *
  * @example
  * // Input with error state
@@ -379,11 +417,15 @@ interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, '
  */
 declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
 
-interface SearchInputProps extends Omit<InputProps, 'size' | 'prefixNode'> {
+interface SearchInputProps extends Omit<InputProps, 'prefixNode' | 'suffixNode'> {
+    /**
+     * Line type (outlined or underlined)
+     */
+    lineType?: 'outlined' | 'underlined';
     /**
-     * SearchInput size (only medium and large)
+     * SearchInput size
      */
-    size?: 'extraLarge' | 'large';
+    size?: 'mini' | 'small' | 'medium' | 'large';
     /**
      * Whether to show the clear button when input has value
      */
@@ -393,27 +435,52 @@ interface SearchInputProps extends Omit<InputProps, 'size' | 'prefixNode'> {
      */
     onClear?: () => void;
     /**
-     * Custom search icon
+     * Custom search icon (URL string or React node)
      */
-    searchIcon?: React.ReactNode;
+    searchIcon?: string | React.ReactNode;
 }
 /**
  * SearchInput Component
  *
+ * A wrapper around Input component with search icon and clear functionality
+ *
  * @example
  * // Basic search input
  * <SearchInput placeholder="Search..." />
  *
  * @example
- * // Search input with clearable
- * <SearchInput clearable onClear={() => console.log('cleared')} />
+ * // Underlined search input
+ * <SearchInput lineType="underlined" placeholder="Search..." />
+ *
+ * @example
+ * // Search input without clearable
+ * <SearchInput clearable={false} placeholder="Search..." />
  *
  * @example
- * // Large search input
+ * // Different sizes
+ * <SearchInput size="small" placeholder="Search..." />
+ * <SearchInput size="medium" placeholder="Search..." />
  * <SearchInput size="large" placeholder="Search..." />
  */
 declare const SearchInput: React.ForwardRefExoticComponent<SearchInputProps & React.RefAttributes<HTMLInputElement>>;
 
+/**
+ * UnderlinedInput Component
+ *
+ * @deprecated Use <Input lineType="underlined" /> instead
+ *
+ * This component is a simple alias for Input with lineType="underlined"
+ * and will be removed in a future version.
+ *
+ * @example
+ * // Old way (deprecated)
+ * <UnderlinedInput placeholder="Search..." />
+ *
+ * // New way (recommended)
+ * <Input lineType="underlined" placeholder="Search..." />
+ */
+declare const UnderlinedInput: React.ForwardRefExoticComponent<Omit<InputProps, "lineType"> & React.RefAttributes<HTMLInputElement>>;
+
 interface NumberInputProps {
     /**
      * Current value
@@ -586,17 +653,29 @@ interface ToastProps {
      */
     variant?: 'success' | 'info' | 'error' | 'warn';
     /**
-     * Toast message content
+     * Toast message content (main text)
      */
     message: string;
     /**
-     * Optional action button text
+     * Optional description text (shows below message in multiline mode)
+     */
+    description?: string;
+    /**
+     * Main action button text (blue color)
      */
-    actionText?: string;
+    mainButtonText?: string;
     /**
-     * Action button click handler
+     * Main action button click handler
      */
-    onAction?: () => void;
+    onMainButtonClick?: () => void;
+    /**
+     * Secondary action button text (gray color)
+     */
+    secondaryButtonText?: string;
+    /**
+     * Secondary action button click handler
+     */
+    onSecondaryButtonClick?: () => void;
     /**
      * Whether to show close button
      */
@@ -632,14 +711,28 @@ interface ToastProps {
  * A notification message component with different variants
  *
  * @example
- * <Toast variant="success" message="Operation successful!" />
+ * // Single line toast
+ * <Toast variant="success" message="信息反馈" />
  *
  * @example
+ * // Toast with buttons
  * <Toast
  *   variant="info"
- *   message="New update available"
- *   actionText="Update"
- *   onAction={() => console.log('Update clicked')}
+ *   message="信息反馈"
+ *   mainButtonText="按钮名称"
+ *   onMainButtonClick={() => console.log('Main clicked')}
+ *   secondaryButtonText="按钮名称"
+ *   onSecondaryButtonClick={() => console.log('Secondary clicked')}
+ *   closable
+ * />
+ *
+ * @example
+ * // Multi-line toast with description
+ * <Toast
+ *   variant="success"
+ *   message="信息反馈"
+ *   description="信息具体说明"
+ *   mainButtonText="按钮名称"
  *   closable
  * />
  */
@@ -654,6 +747,7 @@ interface ToastContextValue {
     warn: (message: string, options?: Partial<ToastProps>) => string;
 }
 interface ToastContainerProps {
+    placement?: 'top-right' | 'top-left' | 'top-center' | 'bottom-right' | 'bottom-left' | 'bottom-center';
     /**
      * Maximum number of toasts to show at once
      */
@@ -688,6 +782,48 @@ declare const ToastContainer: React.FC<ToastContainerProps>;
  */
 declare const useToast: () => ToastContextValue;
 
+type ToastPlacement = 'top-right' | 'top-left' | 'top-center' | 'bottom-right' | 'bottom-left' | 'bottom-center';
+interface ToastContainerConfig {
+    placement?: ToastPlacement;
+    maxCount?: number;
+    defaultDuration?: number;
+}
+/**
+ * Global toast object that can be used anywhere
+ * No need to render ToastContainer component manually
+ *
+ * @example
+ * import { toast } from '@officesdk/design';
+ *
+ * // Configure (optional)
+ * toast.configure({
+ *   placement: 'top-right',
+ *   maxCount: 5,
+ *   defaultDuration: 3000,
+ * });
+ *
+ * // Show toasts
+ * toast.success('Operation successful!');
+ * toast.error('Something went wrong');
+ * toast.info('Info message', { duration: 5000 });
+ * toast.warn('Warning message');
+ *
+ * const id = toast.show({ variant: 'info', message: 'Custom toast' });
+ * toast.hide(id);
+ * toast.hideAll();
+ */
+declare const toast: {
+    configure: (config: ToastContainerConfig) => void;
+    show: (props: Omit<ToastProps, "onClose">) => string;
+    hide: (id: string) => void;
+    hideAll: () => void;
+    success: (message: string, options?: Partial<ToastProps>) => string;
+    info: (message: string, options?: Partial<ToastProps>) => string;
+    error: (message: string, options?: Partial<ToastProps>) => string;
+    warn: (message: string, options?: Partial<ToastProps>) => string;
+    destroy: () => void;
+};
+
 interface TabItem {
     /**
      * Unique key for the tab
@@ -873,6 +1009,276 @@ interface ToolbarButtonProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
  */
 declare const ToolbarButton: React.FC<ToolbarButtonProps>;
 
+type DropdownButtonSize = 'large' | 'medium';
+type DropdownButtonVariant = 'framed' | 'frameless';
+interface DropdownButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'type'> {
+    /**
+     * Button variant
+     * - framed: with border (40px large)
+     * - frameless: without border (28px medium)
+     */
+    variant?: DropdownButtonVariant;
+    /**
+     * Button size
+     */
+    size?: DropdownButtonSize;
+    /**
+     * Display value/label
+     */
+    value?: string;
+    /**
+     * Placeholder when no value
+     */
+    placeholder?: string;
+    /**
+     * Optional icon (URL string or ReactNode)
+     */
+    icon?: string | React.ReactNode;
+    /**
+     * Custom indicator/arrow icon
+     */
+    indicatorIcon?: React.ReactNode;
+    /**
+     * Whether the dropdown is open (controls arrow rotation)
+     */
+    open?: boolean;
+    /**
+     * Whether the button is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Error state
+     */
+    error?: boolean;
+    /**
+     * Custom className
+     */
+    className?: string;
+    /**
+     * Custom style
+     */
+    style?: React.CSSProperties;
+    /**
+     * Custom text style
+     */
+    textStyle?: React.CSSProperties;
+}
+/**
+ * DropdownButton Component
+ *
+ * A button component for triggering dropdown menus
+ *
+ * @example
+ * // Framed dropdown button (with border, 40px)
+ * <DropdownButton variant="framed" value="Option 1" />
+ *
+ * @example
+ * // Frameless dropdown button (no border, 28px)
+ * <DropdownButton variant="frameless" value="Option 1" />
+ *
+ * @example
+ * // With icon
+ * <DropdownButton icon={<CustomIcon />} value="Option 1" />
+ *
+ * @example
+ * // Open state (arrow rotated)
+ * <DropdownButton open value="Option 1" />
+ */
+declare const DropdownButton: React.ForwardRefExoticComponent<DropdownButtonProps & React.RefAttributes<HTMLButtonElement>>;
+
+interface MenuItem {
+    type?: 'item';
+    key: string;
+    label: string;
+    description?: string;
+    icon?: string | React.ReactNode;
+    disabled?: boolean;
+    selected?: boolean;
+    selectable?: boolean;
+    children?: MenuItem[];
+    onClick?: (key: string) => void;
+}
+interface MenuGroup {
+    type: 'group';
+    key: string;
+    label: string;
+    children: MenuItem[];
+}
+interface MenuDivider {
+    type: 'divider';
+    key: string;
+}
+type MenuItemType = MenuItem | MenuGroup | MenuDivider;
+interface MenuProps {
+    /**
+     * Menu items
+     */
+    items: MenuItemType[];
+    /**
+     * Currently selected key(s)
+     */
+    selectedKeys?: string[];
+    /**
+     * Open submenu keys (controlled)
+     */
+    openKeys?: string[];
+    /**
+     * Menu size
+     */
+    size?: 'medium' | 'large';
+    /**
+     * Whether to show search box
+     */
+    searchable?: boolean;
+    /**
+     * Search placeholder
+     */
+    searchPlaceholder?: string;
+    /**
+     * Max height for scrolling
+     */
+    maxHeight?: number;
+    /**
+     * Enable virtual scrolling
+     */
+    virtual?: boolean;
+    /**
+     * Whether to always reserve space for active icon (for description alignment)
+     */
+    reserveActiveIconSpace?: boolean;
+    /**
+     * Select handler
+     */
+    onSelect?: (key: string) => void;
+    /**
+     * Search handler
+     */
+    onSearch?: (value: string) => void;
+    /**
+     * Open keys change handler
+     */
+    onOpenChange?: (keys: string[]) => void;
+    /**
+     * Custom className
+     */
+    className?: string;
+    /**
+     * Custom style
+     */
+    style?: React.CSSProperties;
+}
+/**
+ * Menu Component
+ *
+ * A menu component based on rc-menu with virtual scrolling support
+ *
+ * @example
+ * // Basic menu
+ * <Menu
+ *   items={[
+ *     { key: '1', label: 'Option 1' },
+ *     { key: '2', label: 'Option 2' },
+ *   ]}
+ *   onSelect={(key) => console.log(key)}
+ * />
+ *
+ * @example
+ * // Menu with groups and dividers
+ * <Menu
+ *   items={[
+ *     { type: 'group', key: 'g1', label: 'Group A', children: [...] },
+ *     { type: 'divider', key: 'd1' },
+ *     { key: '1', label: 'Option 1' },
+ *   ]}
+ * />
+ *
+ * @example
+ * // Menu with search
+ * <Menu
+ *   searchable
+ *   items={items}
+ *   onSearch={(value) => console.log(value)}
+ * />
+ */
+declare const Menu: React.FC<MenuProps>;
+
+interface DropdownProps extends Omit<Partial<DropdownProps$1>, 'prefixCls' | 'placement'> {
+    /**
+     * Dropdown overlay content (usually a Menu component)
+     */
+    overlay?: React.ReactElement | (() => React.ReactElement);
+    /**
+     * Trigger action (click, hover, contextMenu)
+     */
+    trigger?: ('click' | 'hover' | 'contextMenu')[];
+    /**
+     * Placement of dropdown
+     */
+    placement?: 'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight';
+    /**
+     * Whether dropdown is visible (controlled)
+     */
+    visible?: boolean;
+    /**
+     * Default visibility (uncontrolled)
+     */
+    defaultVisible?: boolean;
+    /**
+     * Callback when visibility changes
+     */
+    onVisibleChange?: (visible: boolean) => void;
+    /**
+     * Children element that triggers the dropdown
+     */
+    children: React.ReactElement;
+    /**
+     * Dropdown container class name
+     */
+    overlayClassName?: string;
+    /**
+     * Function to get the container element for the dropdown
+     */
+    getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
+}
+/**
+ * Dropdown Component
+ *
+ * A dropdown container component based on rc-dropdown
+ *
+ * @example
+ * // Basic dropdown with menu
+ * <Dropdown
+ *   overlay={<Menu items={items} />}
+ *   trigger={['click']}
+ * >
+ *   <DropdownButton value="Select" />
+ * </Dropdown>
+ *
+ * @example
+ * // Controlled dropdown
+ * <Dropdown
+ *   visible={open}
+ *   onVisibleChange={setOpen}
+ *   overlay={<Menu items={items} />}
+ * >
+ *   <Button>Click me</Button>
+ * </Dropdown>
+ *
+ * @example
+ * // Custom trigger
+ * <Dropdown
+ *   overlay={<Menu items={items} />}
+ *   trigger={['hover']}
+ *   placement="bottomLeft"
+ * >
+ *   <span>Hover me</span>
+ * </Dropdown>
+ */
+declare const Dropdown: React.FC<DropdownProps>;
+
+declare const DropdownGlobalStyles: styled_components.GlobalStyleComponent<{}, styled_components.DefaultTheme>;
+declare const MenuGlobalStyles: styled_components.GlobalStyleComponent<{}, styled_components.DefaultTheme>;
+
 type ToastPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center';
 interface ToastConfig {
     /**
@@ -1067,4 +1473,4 @@ declare const styled: ThemedStyledInterface<Theme>;
 
 declare const getGlobalTheme: () => Theme;
 
-export { type A11yConfig, type AnimationConfig, Button, type ButtonProps, Checkbox, type CheckboxProps, type I18nConfig, Icon, type IconComponent, type IconProps, IconProvider, type IconProviderProps, type IconRegistry, Input, type InputProps, 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 ToastContainerProps, type ToastPosition, type ToastProps, ToolbarButton, type ToolbarButtonProps, Tooltip, type TooltipProps, type UIConfig, UIConfigProvider, type UIConfigProviderProps, type ZIndexConfig, createUIConfig, getGlobalTheme, mergeUIConfig, styled, 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, 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, getGlobalTheme, mergeUIConfig, styled, toast, useIconRegistry, useToast, useUIConfig };