@univerjs/ui 0.25.0 → 1.0.0-alpha.0

package/lib/types/views/components/context-menu/ContextMenuPanel.d.ts

@@ -15,16 +15,34 @@
  */
 import type { IValueOption } from '../../../services/menu/menu';
 import type { IMenuSchema } from '../../../services/menu/menu-manager.service';
+type ContextMenuSizeVariant = 'default' | 'paragraph-t';
+type ContextMenuAutoFocusTarget = 'first-item' | 'container';
 interface IContextMenuPanelProps {
     menuType: string;
     menuSessionVersion?: number;
     className?: string;
     activeItemIds?: string[];
     hiddenItemIds?: string[];
+    sizeVariant?: ContextMenuSizeVariant;
+    autoFocus?: boolean;
+    autoFocusTarget?: ContextMenuAutoFocusTarget;
+    suppressHoverUntilPointerMove?: boolean;
+    onCancel?: () => void;
+    onMenuPointerEnter?: () => void;
+    onMenuPointerLeave?: () => void;
     onOptionSelect?: (option: IValueOption) => void;
 }
+interface IContextMenuSchemaRenderGroup {
+    startIndex: number;
+    endIndex: number;
+    menuSchemas: IMenuSchema[];
+}
 export declare const CONTEXT_MENU_SUBMENU_CLOSE_DELAY = 500;
 export declare const CONTEXT_MENU_SUBMENU_PORTAL_ATTR = "data-u-context-menu-submenu";
 export declare function hasRenderableContextMenuSchema(menuSchema: IMenuSchema): boolean;
-export declare function ContextMenuPanel(props: IContextMenuPanelProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function shouldShowContextMenuGroupSeparator(visibleSchemas: IMenuSchema[], index: number): boolean;
+export declare function getContextMenuQuickGroupColumns(menuSchema: IMenuSchema): number | undefined;
+export declare function getNextMenuButtonByDirection(buttons: HTMLButtonElement[], activeIndex: number, key: string): HTMLButtonElement;
+export declare function getContextMenuSchemaRenderGroups(visibleSchemas: IMenuSchema[], sizeVariant: ContextMenuSizeVariant): IContextMenuSchemaRenderGroup[];
+export declare function ContextMenuPanel(props: IContextMenuPanelProps): import("react").JSX.Element | null;
 export {};

package/lib/types/views/components/dialog-part/DialogPart.d.ts

@@ -13,4 +13,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export declare function DialogPart(): import("react/jsx-runtime").JSX.Element[];
+export declare function DialogPart(): import("react").JSX.Element[];

package/lib/types/views/components/dialog-part/interface.d.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import type { IDialogProps } from '@univerjs/design';
-import type { ICustomLabelProps } from '../../../components/custom-label/CustomLabel';
+import type { ICustomLabelProps } from '../../custom-label/CustomLabel';
 export type IDialogPartMethodOptions = {
     id: string;
     children?: ICustomLabelProps;

package/lib/types/views/components/dom/FloatDom.d.ts

@@ -17,7 +17,7 @@ import type { IFloatDom } from '../../../services/dom/canvas-dom-layer.service';
 export declare const FloatDomSingle: import("react").MemoExoticComponent<(props: {
     layer: IFloatDom;
     id: string;
-}) => import("react/jsx-runtime").JSX.Element | null>;
+}) => import("react").JSX.Element | null>;
 export declare const FloatDom: ({ unitId }: {
     unitId?: string;
-}) => import("react/jsx-runtime").JSX.Element[] | undefined;
+}) => import("react").JSX.Element[] | undefined;

package/lib/types/views/components/dom/Print.d.ts

@@ -18,4 +18,4 @@ export declare const PrintFloatDomSingle: import("react").MemoExoticComponent<(p
     layer: IFloatDom;
     id: string;
     position: IFloatDomLayout;
-}) => import("react/jsx-runtime").JSX.Element | null>;
+}) => import("react").JSX.Element | null>;

package/lib/types/views/components/gallery-part/GalleryPart.d.ts

@@ -13,4 +13,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export declare function GalleryPart(): import("react/jsx-runtime").JSX.Element | null;
+export declare function GalleryPart(): import("react").JSX.Element | null;

package/lib/types/views/components/popup/CanvasPopup.d.ts

@@ -19,6 +19,6 @@ interface ISingleCanvasPopupProps {
     popup: IPopup;
     children?: ReactNode;
 }
-export declare const SingleCanvasPopup: ({ popup, children }: ISingleCanvasPopupProps) => import("react/jsx-runtime").JSX.Element | null;
-export declare function CanvasPopup(): import("react/jsx-runtime").JSX.Element[];
+export declare const SingleCanvasPopup: ({ popup, children }: ISingleCanvasPopupProps) => import("react").JSX.Element | null;
+export declare function CanvasPopup(): import("react").JSX.Element[];
 export {};

package/lib/types/views/components/popup/RectPopup.d.ts

@@ -54,7 +54,7 @@ export interface IPopupLayoutInfo extends Pick<IRectPopupProps, 'direction'> {
     containerHeight: number;
     noPushMinimumGap?: boolean;
 }
-declare function RectPopup(props: IRectPopupProps): import("react/jsx-runtime").JSX.Element | null;
+declare function RectPopup(props: IRectPopupProps): import("react").JSX.Element | null;
 declare namespace RectPopup {
     var calcPopupPosition: (layout: IPopupLayoutInfo) => {
         top: number;

package/lib/types/views/components/ribbon/MobileRibbon.d.ts

@@ -18,5 +18,5 @@ interface IMobileRibbonProps {
     headerMenuComponents?: Set<ComponentType>;
     headerMenu?: boolean;
 }
-export declare function MobileRibbon(props: IMobileRibbonProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function MobileRibbon(props: IMobileRibbonProps): import("react").JSX.Element | null;
 export {};

package/lib/types/views/components/ribbon/Ribbon.d.ts

@@ -20,5 +20,5 @@ interface IRibbonProps {
     headerMenuComponents?: Set<ComponentType>;
     headerMenu?: boolean;
 }
-export declare function Ribbon(props: IRibbonProps): import("react/jsx-runtime").JSX.Element;
+export declare function Ribbon(props: IRibbonProps): import("react").JSX.Element;
 export {};

package/lib/types/views/components/ribbon/ToolbarButton.d.ts

@@ -40,7 +40,11 @@ export interface IBaseToolbarButtonProps {
     onMouseLeave?: React.MouseEventHandler;
 }
 export declare const toolbarButtonClassName = "\nuniver-box-border univer-flex univer-h-6 univer-min-w-6 univer-cursor-pointer univer-items-center\nuniver-justify-center univer-rounded univer-border-none univer-bg-transparent univer-p-0\nuniver-text-gray-900 univer-outline-none univer-transition-colors univer-animate-in univer-fade-in\ndark:!univer-text-white dark:hover:!univer-bg-gray-700 dark:disabled:!univer-text-gray-600\ndisabled:univer-cursor-not-allowed disabled:univer-text-gray-300 disabled:hover:univer-bg-transparent\nhover:univer-bg-gray-100 whitespace-nowrap univer-w-max\n";
+export declare const toolbarButtonVariants: (props?: ({
+    noIcon?: boolean | null | undefined;
+    active?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /**
  * Button Component
  */
-export declare function ToolbarButton(props: IBaseToolbarButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function ToolbarButton(props: IBaseToolbarButtonProps): import("react").JSX.Element;

package/lib/types/views/components/ribbon/TooltipButtonWrapper.d.ts

@@ -15,7 +15,7 @@
  */
 import type { IDropdownProps, ITooltipProps } from '@univerjs/design';
 import type { ReactNode } from 'react';
-import type { IValueOption } from '../../../services/menu/menu';
+import type { IMenuItem, IValueOption } from '../../../services/menu/menu';
 export interface ITooltipWrapperRef {
     el: HTMLSpanElement | null;
 }
@@ -23,7 +23,13 @@ export declare const TooltipWrapper: import("react").ForwardRefExoticComponent<I
 export declare function DropdownWrapper(props: Omit<Partial<IDropdownProps>, 'overlay'> & {
     overlay: ReactNode;
     align?: 'start' | 'end' | 'center';
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;
+export declare function DropdownMenuLabel({ icon, value, option, onOptionSelect }: {
+    icon?: IMenuItem['icon'];
+    value?: string | number;
+    option: IValueOption;
+    onOptionSelect?: (option: IValueOption) => void;
+}): import("react").JSX.Element;
 export declare function DropdownMenuWrapper({ menuId, slot, value, options, children, disabled, onOptionSelect, }: {
     menuId: string;
     slot?: boolean;
@@ -32,4 +38,4 @@ export declare function DropdownMenuWrapper({ menuId, slot, value, options, chil
     children: ReactNode;
     disabled?: boolean;
     onOptionSelect: (option: IValueOption) => void;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;

package/lib/types/views/components/ribbon/hook.d.ts

@@ -27,3 +27,4 @@ export interface IToolbarItemStatus {
  * @returns The menu item's status
  */
 export declare function useToolbarItemStatus(menuItem: IDisplayMenuItem<IMenuItem>): IToolbarItemStatus;
+export declare function useToolbarShortcutDisplay({ id, commandId, shortcut, }: Pick<IDisplayMenuItem<IMenuItem>, 'id' | 'commandId' | 'shortcut'>): string | null;

package/lib/types/views/components/ribbon/ribbon-menu/ClassicMenu.d.ts

@@ -18,4 +18,4 @@ export declare function ClassicMenu({ ribbon, activatedTab, onSelectTab, }: {
     ribbon: IMenuSchema[];
     activatedTab: string;
     onSelectTab: (tab: IMenuSchema) => void;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;

package/lib/types/views/components/ribbon/ribbon-menu/DefaultMenu.d.ts

@@ -18,4 +18,4 @@ export declare function DefaultMenu({ ribbon, activatedTab, onSelectTab, }: {
     ribbon: IMenuSchema[];
     activatedTab: string;
     onSelectTab: (tab: IMenuSchema) => void;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;

package/lib/types/views/components/shortcut-panel/ShortcutPanel.d.ts

@@ -16,4 +16,4 @@
 /**
  * This component is responsible for rendering the shortcut panel on the desktop version of the app.
  */
-export declare function ShortcutPanel(): import("react/jsx-runtime").JSX.Element;
+export declare function ShortcutPanel(): import("react").JSX.Element;

package/lib/types/views/components/sidebar/Sidebar.d.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import type { CSSProperties } from 'react';
-import type { ICustomLabelProps } from '../../../components/custom-label/CustomLabel';
+import type { ICustomLabelProps } from '../../custom-label/CustomLabel';
 export interface ISidebarMethodOptions {
     id?: string;
     header?: ICustomLabelProps;
@@ -26,4 +26,4 @@ export interface ISidebarMethodOptions {
     onClose?: (id?: string) => void;
     onOpen?: () => void;
 }
-export declare function Sidebar(): import("react/jsx-runtime").JSX.Element;
+export declare function Sidebar(): import("react").JSX.Element;

package/lib/types/{components → views}/custom-label/CustomLabel.d.ts

@@ -22,9 +22,9 @@ export type ICustomLabelProps<T = undefined> = {
     value$?: Observable<T>;
     onChange?(v: string | number): void;
     title?: ReactNode;
-} & Pick<IMenuSelectorItem<unknown>, 'label' | 'icon'>;
+} & Pick<IMenuSelectorItem<string, unknown>, 'label' | 'icon'>;
 /**
  * The component to render toolbar item label and menu item label.
  * @param props
  */
-export declare function CustomLabel(props: ICustomLabelProps): import("react/jsx-runtime").JSX.Element;
+export declare function CustomLabel(props: ICustomLabelProps): import("react").JSX.Element;

package/lib/types/{components → views}/font-family/FontFamily.d.ts

@@ -14,4 +14,4 @@
  * limitations under the License.
  */
 import type { IFontFamilyProps } from './interface';
-export declare const FontFamily: ({ id, value, disabled$ }: IFontFamilyProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FontFamily: ({ id, value, disabled$ }: IFontFamilyProps) => import("react").JSX.Element;

package/lib/types/{components → views}/font-family/FontFamilyItem.d.ts

@@ -16,4 +16,4 @@
 export declare const FontFamilyItem: ({ id, value }: {
     id: string;
     value: string;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;

package/lib/types/{components → views}/font-size/FontSize.d.ts

@@ -14,4 +14,4 @@
  * limitations under the License.
  */
 import type { IFontSizeProps } from './interface';
-export declare const FontSize: (props: IFontSizeProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FontSize: (props: IFontSizeProps) => import("react").JSX.Element;

package/lib/types/{components → views}/hooks/layout.d.ts

@@ -26,4 +26,4 @@ import type { Nullable } from '@univerjs/core';
  * @param container
  */
 export declare function useScrollYOverContainer(element: Nullable<HTMLElement>, container: Nullable<HTMLElement>): void;
-export declare function useConfigValue<T>(configKey: string): void | T | null;
+export declare function useConfigValue<T>(configKey: string): T;

package/lib/types/{components → views}/index.d.ts

@@ -13,8 +13,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export * from './common-label';
-export * from './custom-label';
-export * from './heading-item';
+export * from './CommonLabel';
+export * from './custom-label/index';
+export * from './HeadingItem';
 export { useScrollYOverContainer } from './hooks/layout';
-export { type ISliderProps, Slider } from './slider';
+export { type ISliderProps, Slider } from './slider/index';

package/lib/types/{components → views}/menu/desktop/DesignTinyMenuGroup.d.ts

@@ -13,19 +13,23 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import type { ComponentType } from 'react';
-export interface ITinyMenuItem {
+export type TinyMenuSizeVariant = 'default' | 'paragraph-t';
+export type TinyMenuLayoutVariant = 'default' | 'compact';
+interface ITinyMenuItem {
     onClick: () => void;
     className: string;
-    Icon: ComponentType<{
-        className?: string;
-    }>;
+    Icon: any;
     iconClassName?: string;
     key: string;
     active?: boolean;
     tooltip?: string;
 }
-export interface ITinyMenuGroupProps {
+interface ITinyMenuGroupProps {
     items: ITinyMenuItem[];
+    columns?: number;
+    sizeVariant?: TinyMenuSizeVariant;
+    layoutVariant?: TinyMenuLayoutVariant;
+    hoverSuppressed?: boolean;
 }
-export declare function DesignTinyMenuGroup({ items }: ITinyMenuGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare function DesignTinyMenuGroup({ items, columns, sizeVariant, layoutVariant, hoverSuppressed, }: ITinyMenuGroupProps): import("react").JSX.Element;
+export {};

package/lib/types/{components → views}/menu/desktop/TinyMenuGroup.d.ts

@@ -15,14 +15,19 @@
  */
 import type { IValueOption } from '../../../services/menu/menu';
 import type { IMenuSchema } from '../../../services/menu/menu-manager.service';
+import type { TinyMenuLayoutVariant, TinyMenuSizeVariant } from './DesignTinyMenuGroup';
 interface IUIQuickMenuGroupProps {
     item: IMenuSchema;
     activeItemIds?: string[];
     hiddenItemIds?: string[];
+    hoverSuppressed?: boolean;
+    columns?: number;
+    sizeVariant?: TinyMenuSizeVariant;
+    layoutVariant?: TinyMenuLayoutVariant;
     onOptionSelect?: (option: IValueOption) => void;
 }
 export declare function resolveMenuItemActiveState(itemId: string | undefined, observableActive: boolean, activeItemIds?: string[]): boolean;
 export declare function getVisibleTinyMenuChildren(children: IMenuSchema[], hiddenItemKeys: string[]): IMenuSchema[];
-export declare function UITinyMenuGroup(props: IUIQuickMenuGroupProps): import("react/jsx-runtime").JSX.Element | null;
-export declare function UIQuickTileMenuGroup(props: IUIQuickMenuGroupProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function UITinyMenuGroup(props: IUIQuickMenuGroupProps): import("react").JSX.Element | null;
+export declare function UIQuickTileMenuGroup(props: IUIQuickMenuGroupProps): import("react").JSX.Element | null;
 export {};

package/lib/types/{components → views}/menu/mobile/MobileMenu.d.ts

@@ -18,5 +18,5 @@ import type { IBaseMenuProps } from '../types';
 interface IMobileMenuProps extends IBaseMenuProps {
     schemas?: IMenuSchema[];
 }
-export declare function MobileMenu(props: IMobileMenuProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function MobileMenu(props: IMobileMenuProps): import("react").JSX.Element | null;
 export {};

package/lib/types/{components → views}/menu/mobile/MobileMenu.stories.d.ts

@@ -17,5 +17,5 @@ import type { Meta } from '@storybook/react';
 declare const meta: Meta;
 export default meta;
 export declare const Playground: {
-    render(): import("react/jsx-runtime").JSX.Element;
+    render(): import("react").JSX.Element;
 };

package/lib/types/views/{components/zen-zone/ZenZone.d.ts → message/MessageContainer.d.ts}

@@ -13,4 +13,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export declare function ZenZone(): import("react/jsx-runtime").JSX.Element;
+export declare function MessageContainer(): import("react").JSX.Element;

package/lib/types/views/mobile-workbench/MobileWorkbench.d.ts

@@ -13,9 +13,11 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import type { Injector } from '@univerjs/core';
 import type { IWorkbenchOptions } from '../../controllers/ui/ui.controller';
 export interface IUniverAppProps extends IWorkbenchOptions {
     mountContainer: HTMLElement;
     onRendered?: (container: HTMLElement) => void;
 }
-export declare function MobileWorkbench(props: IUniverAppProps): import("react/jsx-runtime").JSX.Element;
+export declare function mountMobileWorkbench(injector: Injector, options: IWorkbenchOptions, mountContainer: HTMLElement, onRendered: (contentElement: HTMLElement) => void): void;
+export declare function MobileWorkbench(props: IUniverAppProps): import("react").JSX.Element;

package/lib/types/{components → views}/notification/Notification.d.ts

@@ -15,7 +15,7 @@
  */
 import type { IToasterProps } from '@univerjs/design';
 import { toast } from '@univerjs/design';
-export declare function Notification(): import("react/jsx-runtime").JSX.Element;
+export declare function Notification(): import("react").JSX.Element;
 export interface INotificationOptions {
     /** The title of the notification */
     title: Parameters<typeof toast>[0];

package/lib/types/{components → views}/notification/Notification.stories.d.ts

@@ -18,17 +18,17 @@ import { Notification } from './Notification';
 declare const meta: Meta<typeof Notification>;
 export default meta;
 export declare const InteractivePlayground: {
-    render: () => import("react/jsx-runtime").JSX.Element;
+    render: () => import("react").JSX.Element;
 };
 export declare const VisualRegressionLight: {
-    render: () => import("react/jsx-runtime").JSX.Element;
+    render: () => import("react").JSX.Element;
 };
 export declare const VisualRegressionDark: {
-    render: () => import("react/jsx-runtime").JSX.Element;
+    render: () => import("react").JSX.Element;
 };
 export declare const PlacementMatrix: {
-    render: () => import("react/jsx-runtime").JSX.Element;
+    render: () => import("react").JSX.Element;
 };
 export declare const LongContentAndLoading: {
-    render: () => import("react/jsx-runtime").JSX.Element;
+    render: () => import("react").JSX.Element;
 };

package/lib/types/{components → views}/progress-bar/ProgressBar.d.ts

@@ -23,4 +23,4 @@ export interface IProgressBarProps {
     onTerminate?: () => void;
     onClearProgress?: () => void;
 }
-export declare function ProgressBar(props: IProgressBarProps): import("react/jsx-runtime").JSX.Element;
+export declare function ProgressBar(props: IProgressBarProps): import("react").JSX.Element;

package/lib/types/{components → views}/slider/Slider.d.ts

@@ -44,4 +44,4 @@ export interface ISliderProps {
 /**
  * Slider Component
  */
-export declare function Slider(props: ISliderProps): import("react/jsx-runtime").JSX.Element;
+export declare function Slider(props: ISliderProps): import("react").JSX.Element;

package/lib/types/{components → views}/slider/Slider.stories.d.ts

@@ -18,5 +18,5 @@ import { Slider } from './Slider';
 declare const meta: Meta<typeof Slider>;
 export default meta;
 export declare const Playground: {
-    render(): import("react/jsx-runtime").JSX.Element;
+    render(): import("react").JSX.Element;
 };

package/lib/types/views/workbench/Workbench.d.ts

@@ -13,10 +13,12 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import type { Injector } from '@univerjs/core';
 import type { IWorkbenchOptions } from '../../controllers/ui/ui.controller';
 export interface IUniverWorkbenchProps extends IWorkbenchOptions {
     mountContainer: HTMLElement;
     onRendered?: (containerElement: HTMLElement) => void;
 }
-export declare function DesktopWorkbench(props: IUniverWorkbenchProps): import("react/jsx-runtime").JSX.Element;
-export declare function DesktopWorkbenchContent(props: IUniverWorkbenchProps): import("react/jsx-runtime").JSX.Element;
+export declare function DesktopWorkbench(props: IUniverWorkbenchProps): import("react").JSX.Element;
+export declare function mountDesktopWorkbench(injector: Injector, options: IWorkbenchOptions, mountContainer: HTMLElement, onRendered: (contentElement: HTMLElement) => void): void;
+export declare function DesktopWorkbenchContent(props: IUniverWorkbenchProps): import("react").JSX.Element;