@officesdk/design 0.1.14 → 0.1.16

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

@@ -550,12 +550,16 @@ interface NumberInputProps {
      * Unit text to display after the input
      */
     unit?: string;
+    /**
+     * Placeholder text
+     */
+    placeholder?: string;
     /**
      * Callback when value changes
-     * @param fixedValue - The clamped value within min/max range
-     * @param rawValue - The original input value before clamping
+     * @param fixedValue - The clamped value within min/max range (can be undefined if empty)
+     * @param rawValue - The original input value before clamping (can be undefined if empty)
      */
-    onChange?: (fixedValue: number, rawValue: number) => void;
+    onChange?: (fixedValue: number | undefined, rawValue: number | undefined) => void;
     /**
      * Custom className
      */
@@ -1437,10 +1441,16 @@ interface UIConfigProviderProps {
     children: React.ReactNode;
 }
 /**
- * UIConfigProvider Component
+ * UIConfigProvider Component (Optional, for React convenience)
+ *
+ * Unified provider for all UI components and global configurations.
+ * Includes IconProvider, ToastContainer, and other settings.
+ *
+ * Note: Global styles (Tooltip, Menu, Dropdown) are now injected on-demand
+ * when components are first used, so they are no longer included here.
  *
- * Unified provider for all UI components and global configurations
- * Includes ThemeProvider, IconProvider, ToastContainer, and other settings
+ * For non-React environments or when you want to avoid Provider nesting,
+ * use initUIConfig() instead.
  *
  * @example
  * import { UIConfigProvider } from '@officesdk/design';
@@ -1462,12 +1472,15 @@ declare const UIConfigProvider: React.FC<UIConfigProviderProps>;
 /**
  * Hook to access UI configuration
  *
+ * Falls back to global config if context is not available.
+ * This allows components to work even without UIConfigProvider when initUIConfig() is used.
+ *
  * @example
  * const config = useUIConfig();
- * console.log(config.theme);
- * console.log(config.locale);
+ * console.log(config?.theme);
+ * console.log(config?.locale);
  */
-declare const useUIConfig: () => UIConfig;
+declare const useUIConfig: () => UIConfig | null;
 
 /**
  * Create UI configuration with default values
@@ -1491,8 +1504,83 @@ declare const createUIConfig: (config: UIConfig) => UIConfig;
  */
 declare const mergeUIConfig: (baseConfig: UIConfig, ...configs: Partial<UIConfig>[]) => UIConfig;
 
+/**
+ * Initialize UI configuration globally (non-React)
+ *
+ * This function allows you to configure the UI library without using React Provider components.
+ * It's useful for:
+ * - Non-React environments
+ * - Avoiding Provider nesting (e.g., in Modal components)
+ * - Setting up configuration before React app starts
+ *
+ * After calling this function, all components will automatically use the global configuration.
+ * Global styles (Tooltip, Menu, Dropdown) will be injected on-demand when components are first used.
+ *
+ * @param config - UI configuration object
+ * @param config.theme - Theme configuration (required)
+ * @param config.icons - Icon registry mapping icon names to React components
+ * @param config.toast - Toast configuration (maxCount, defaultDuration, etc.)
+ * @param config.locale - Locale code (e.g., 'zh-CN', 'en-US')
+ * @param config.i18n - Internationalization configuration
+ * @param config.zIndex - Z-index layer management
+ * @param config.animation - Animation configuration
+ * @param config.a11y - Accessibility configuration
+ *
+ * @example
+ * import { initUIConfig } from '@officesdk/design';
+ * import { lightTheme } from '@officesdk/design/theme';
+ * import { iconRegistry } from '@officesdk/design/icons';
+ *
+ * // Initialize before React app starts
+ * initUIConfig({
+ *   theme: lightTheme,
+ *   icons: iconRegistry,
+ *   toast: {
+ *     maxCount: 5,
+ *     defaultDuration: 3000,
+ *   },
+ * });
+ *
+ * // Now you can use components without UIConfigProvider
+ * function App() {
+ *   return <Button>Click me</Button>;
+ * }
+ *
+ * @example
+ * // Useful for Modal scenarios - no need to nest Provider
+ * function Modal({ children }) {
+ *   return (
+ *     <Portal>
+ *       {children}
+ *     </Portal>
+ *   );
+ * }
+ *
+ * @example
+ * // Can be called multiple times to update config
+ * initUIConfig({ theme: lightTheme });
+ * // Later update icons
+ * initUIConfig({ theme: lightTheme, icons: newIconRegistry });
+ */
+declare const initUIConfig: (config: UIConfig) => void;
+/**
+ * Get global UI configuration
+ */
+declare const getUIConfig: () => UIConfig | null;
+/**
+ * Get global icon registry
+ */
+declare const getGlobalIconRegistry: () => Record<string, React.ComponentType<React.SVGProps<SVGSVGElement>>> | null;
+/**
+ * Get global toast config
+ */
+declare const getGlobalToastConfig: () => {
+    maxCount?: number;
+    defaultDuration?: number;
+} | null;
+
 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, 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, getGlobalIconRegistry, getGlobalTheme, getGlobalToastConfig, getUIConfig, initUIConfig, mergeUIConfig, styled, toast, useIconRegistry, useToast, useUIConfig };