@officesdk/design 0.1.8 → 0.1.9

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

@@ -1,7 +1,9 @@
 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> {
     /**
@@ -342,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
      */
@@ -364,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
      */
@@ -377,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
@@ -390,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'> {
     /**
-     * SearchInput size (only medium and large)
+     * Line type (outlined or underlined)
      */
-    size?: 'extraLarge' | 'large';
+    lineType?: 'outlined' | 'underlined';
+    /**
+     * SearchInput size
+     */
+    size?: 'mini' | 'small' | 'medium' | 'large';
     /**
      * Whether to show the clear button when input has value
      */
@@ -404,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
@@ -953,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 {
     /**
@@ -1147,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 ToastContainerConfig, type ToastContainerProps, type ToastPosition, type ToastProps, ToolbarButton, type ToolbarButtonProps, Tooltip, type TooltipProps, type UIConfig, UIConfigProvider, type UIConfigProviderProps, type ZIndexConfig, createUIConfig, getGlobalTheme, 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, 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 };