@univerjs/design

Shared React design components, styles, and locale resources for Univer UI packages.

import { Button, ConfigProvider, Dialog, message, Select, Tree } from '@univerjs/design'

Exports

Export	Kind	Related types
`Accordion`	Component	`IAccordionProps`
`Avatar`	Component	`IAvatarProps`
`Badge`	Component	`IBadgeProps`
`Button`	Component	`IButtonProps`
`ButtonGroup`	Component	`IButtonGroupProps`
`Calendar`	Component	-
`CascaderList`	Component	`ICascaderListProps`, `ICascaderOption`
`CheckboxGroup`	Component	`ICheckboxGroupProps`
`Checkbox`	Component	`ICheckboxProps`
`ColorPicker`	Component	`IColorPickerProps`
`ConfigContext`	Context	`IConfigProviderProps`
`ConfigProvider`	Component	`IConfigProviderProps`
`Confirm`	Component	`IConfirmProps`
`DatePicker`	Component	-
`DateRangePicker`	Component	-
`Dialog`	Component	`IDialogProps`
`DraggableList`	Component	`IDraggableListProps`
`DropdownMenu`	Component	`IDropdownMenuProps`
`Dropdown`	Component	`IDropdownProps`
`FormDualColumnLayout`	Component	`IFormDualColumnLayoutProps`, `IFormLayoutProps`
`FormLayout`	Component	`IFormDualColumnLayoutProps`, `IFormLayoutProps`
`Gallery`	Component	`IGalleryProps`
`GradientColorPicker`	Component	`GradientType`, `IGradientColorPickerProps`, `IGradientStop`, `IGradientValue`
`HoverCard`	Component	`IHoverCardProps`
`InputNumber`	Component	`IInputNumberProps`
`Input`	Component	`IInputProps`
`KBD`	Component	`IKBDProps`
`message`	Function	`IMessageProps`
`Messager`	Component	`IMessageProps`
`MessageType`	Enum	`IMessageProps`
`removeMessage`	Function	`IMessageProps`
`Pager`	Component	`IPagerProps`
`Popup`	Component	`IPopupProps`
`RadioGroup`	Component	`IRadioGroupProps`
`Radio`	Component	`IRadioProps`
`Segmented`	Component	-
`SelectList`	Component	`ISelectListProps`
`MultipleSelect`	Component	`IMultipleSelectProps`
`Select`	Component	`ISelectProps`
`Separator`	Component	-
`Switch`	Component	-
`Textarea`	Component	-
`TimeInput`	Component	-
`toast`	Function	`IToasterProps`
`Toaster`	Component	`IToasterProps`
`Tooltip`	Component	`ITooltipProps`
`filterLeafNode`	Function	`ITreeNodeProps`, `ITreeProps`
`findNodePathFromTree`	Function	`ITreeNodeProps`, `ITreeProps`
`findSubTreeFromPath`	Function	`ITreeNodeProps`, `ITreeProps`
`mergeTreeSelected`	Function	`ITreeNodeProps`, `ITreeProps`
`Tree`	Component	`ITreeNodeProps`, `ITreeProps`
`TreeSelectionMode`	Enum	`ITreeNodeProps`, `ITreeProps`
`borderBottomClassName`	Helper	-
`borderClassName`	Helper	-
`borderLeftBottomClassName`	Helper	-
`borderLeftClassName`	Helper	-
`borderRightClassName`	Helper	-
`borderTopClassName`	Helper	-
`divideXClassName`	Helper	-
`divideYClassName`	Helper	-
`scrollbarClassName`	Helper	-
`clsx`	Helper	-
`isBrowser`	Helper	-
`render`	Helper	-
`unmount`	Helper	-
`resizeObserverCtor`	Helper	-

Types

IAccordionProps

import type { ReactNode } from 'react'

export interface IAccordionProps {
  className?: string
  items: IAccordionItem[]
}

IAvatarProps

import type { VariantProps } from 'class-variance-authority'
import type { CSSProperties, ReactNode } from 'react'

export interface IAvatarProps extends Omit<VariantProps<typeof avatarVariants>, 'size'> {
  children?: ReactNode

  className?: string

  style?: CSSProperties

  title?: string

  alt?: string

  size?: 'small' | 'middle' | number

  src?: string

  fit?: ImageFit

  onError?: () => void

  onLoad?: () => void
}

IBadgeProps

import type { ReactNode } from 'react'

export interface IBadgeProps {
  className?: string
  children: ReactNode
  closable?: boolean
  onClose?: () => void
}

IButtonProps

import type { VariantProps } from 'class-variance-authority'
import type { ButtonHTMLAttributes } from 'react'

export interface IButtonProps
  extends ButtonHTMLAttributes<HTMLButtonElement>,
  VariantProps<typeof buttonVariants> {
  asChild?: boolean
}

IButtonGroupProps

import type { ReactElement } from 'react'
import type { IButtonProps } from './Button'

export interface IButtonGroupProps {
  className?: string
  orientation?: 'horizontal' | 'vertical'
  children: ReactElement<IButtonProps>[]
}

ICascaderListProps

export interface ICascaderListProps {

  value: string[]

  options?: ICascaderOption[]

  onChange: (value: string[]) => void

  contentClassName?: string

  wrapperClassName?: string
}

ICascaderOption

export interface ICascaderOption {
  label: string
  value: string
  color?: string
  children?: ICascaderOption[]
}

ICheckboxGroupProps

import type { CSSProperties, ReactNode } from 'react'
import type { ICheckboxProps } from '../checkbox/Checkbox'

export interface ICheckboxGroupProps {
  children: ReactNode[]

  className?: string

  style?: CSSProperties

  value: Array<string | number | boolean>

  disabled?: boolean

  direction?: 'horizontal' | 'vertical'

  onChange: (value: Array<string | number | boolean>) => void
}

ICheckboxProps

import type { ChangeEvent, CSSProperties, ReactNode } from 'react'

export interface ICheckboxProps {
  children?: ReactNode

  className?: string

  style?: CSSProperties

  checked?: boolean

  indeterminate?: boolean

  value?: string | number | boolean

  disabled?: boolean

  onChange?: (value: string | number | boolean) => void

  contentClassName?: string
}

IColorPickerProps

export interface IColorPickerProps {
  format?: 'hex' | 'rgba'
  value?: string
  onChange?: (value: string) => void
}

IConfigProviderProps

import type { ReactNode } from 'react'

export interface IConfigProviderProps {
  children: ReactNode
  locale?: any
  mountContainer: HTMLElement | null
}

IConfirmProps

import type { ReactNode } from 'react'
import type enUS from '../../locale/en-US'

export interface IConfirmProps {
  children: ReactNode

  visible?: boolean

  title?: React.ReactNode

  cancelText?: string

  confirmText?: string

  onClose?: () => void

  onConfirm?: () => void

  width?: number | string

  closable?: boolean

}

IDialogProps

import type { CSSProperties, MouseEvent as ReactMouseEvent, ReactNode } from 'react'

export interface IDialogProps {
  children: ReactNode

  style?: CSSProperties

  open?: boolean

  width?: number | string

  title?: ReactNode

  draggable?: boolean

  defaultPosition?: { x: number, y: number }

  destroyOnClose?: boolean

  preservePositionOnDestroy?: boolean

  footer?: ReactNode

  mask?: boolean

  className?: string

  closable?: boolean

  maskClosable?: boolean

  keyboard?: boolean

  onOpenChange?: (open: boolean) => void

  onClose?: () => void

  showOk?: boolean
  showCancel?: boolean

  onOk?: () => void
  onCancel?: () => void
}

IDraggableListProps

import type { CSSProperties, HTMLAttributes, PointerEvent, ReactNode } from 'react'

export interface IDraggableListProps<T> extends Omit<HTMLAttributes<HTMLDivElement>, 'onDragStart'>, IDraggableListDragCallbacks {
  list: T[]
  onListChange: (list: T[]) => void
  idKey: keyof T
  itemRender: (item: T, index: number) => ReactNode
  draggableHandle?: string
  rowHeight?: number
  margin?: [number, number]
}

IDropdownMenuProps

import type { ComponentProps, ReactNode } from 'react'

export interface IDropdownMenuProps extends ComponentProps<typeof DropdownMenuContent> {
  children: ReactNode
  items: DropdownMenuType[]
  disabled?: boolean
  open?: boolean
  onOpenChange?: (open: boolean) => void
}

IDropdownProps

import type { ComponentProps, ReactNode } from 'react'

export interface IDropdownProps extends ComponentProps<typeof PopoverContent> {
  children: ReactNode
  overlay: ReactNode
  disabled?: boolean
  open?: boolean
  onOpenChange?: (open: boolean) => void
}

IFormDualColumnLayoutProps

import type { CSSProperties, PropsWithChildren, ReactNode } from 'react'

export type IFormDualColumnLayoutProps = PropsWithChildren

IFormLayoutProps

import type { CSSProperties, PropsWithChildren, ReactNode } from 'react'

export interface IFormLayoutProps {
  label?: ReactNode
  desc?: ReactNode
  children?: ReactNode

  style?: CSSProperties
  className?: string
  contentStyle?: CSSProperties
  error?: string
  collapsable?: boolean
  defaultCollapsed?: boolean
}

IGalleryProps

export interface IGalleryProps {
  className?: string
  images: string[]
  open?: boolean
  onOpenChange?: (open: boolean) => void
}

GradientType

export type GradientType = 'linear' | 'radial' | 'angular' | 'diamond'

IGradientColorPickerProps

export interface IGradientColorPickerProps {
  className?: string
  value?: IGradientValue
  onChange?: (value: IGradientValue) => void
}

IGradientStop

export interface IGradientStop {
  color: string
  offset: number
}

IGradientValue

export interface IGradientValue {
  type: GradientType
  stops: IGradientStop[]
  angle?: number
}

IHoverCardProps

import type { ComponentProps, ReactNode } from 'react'

export interface IHoverCardProps extends ComponentProps<typeof HoverCardContent> {
  children: ReactNode
  overlay: ReactNode
  disabled?: boolean

  openDelay?: number
  open?: boolean
  onOpenChange?: (open: boolean) => void
}

IInputNumberProps

import type { FocusEvent, InputHTMLAttributes, KeyboardEvent } from 'react'

export interface IInputNumberProps
  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'defaultValue' | 'size'> {
  value?: number | null
  defaultValue?: number
  size?: 'mini' | 'small'
  min?: number
  max?: number
  step?: number
  precision?: number
  formatter?: (value: string | number | undefined) => string
  parser?: (displayValue: string | undefined) => string
  controls?: boolean
  className?: string
  inputClassName?: string
  controlsClassName?: string
  onChange?: (value: number | null) => void
  onKeyDown?: (e: KeyboardEvent<HTMLInputElement>) => void
  onPressEnter?: (e: KeyboardEvent<HTMLInputElement>) => void
  allowEmpty?: boolean
}

IInputProps

import type { VariantProps } from 'class-variance-authority'
import type { InputHTMLAttributes } from 'react'

export interface IInputProps extends Pick<InputProps, 'onFocus' | 'onBlur'>,
  VariantProps<typeof inputVariants> {
  autoFocus?: boolean
  className?: string
  style?: React.CSSProperties
  type?: HTMLInputElement['type']
  placeholder?: string
  value?: string
  allowClear?: boolean
  disabled?: boolean
  onClick?: (e: React.MouseEvent<HTMLInputElement>) => void
  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void
  onChange?: (value: string) => void
  inputClass?: string
  inputStyle?: React.CSSProperties
  slot?: React.ReactNode
}

IKBDProps

export interface IKBDProps {
  keyboard: string
  className?: string
}

IMessageProps

import type { ComponentProps, ReactNode } from 'react'

export interface IMessageProps {
  id?: string
  content: string
  duration?: number
  type?: MessageType
  onClose?: () => void
}

IPagerProps

export interface IPagerProps {
  className?: string
  text?: string
  value: number
  total: number
  loop?: boolean
  onChange?: (value: number) => void
}

IPopupProps

import type { ReactElement } from 'react'

export interface IPopupProps {
  children: ReactElement

  visible?: boolean

  offset?: [number, number]

  overflowVisible?: boolean

  placementY?: 'below' | 'above'
}

IRadioGroupProps

import type { CSSProperties, ReactNode } from 'react'
import type { IRadioProps } from '../radio/Radio'

export interface IRadioGroupProps {
  children: ReactNode[]

  className?: string

  style?: CSSProperties

  value: string

  disabled?: boolean

  direction?: 'horizontal' | 'vertical'

  onChange: (value: string | number | boolean) => void
}

IRadioProps

import type { ReactNode } from 'react'

export interface IRadioProps {
  children?: ReactNode

  checked?: boolean

  value?: string | number | boolean

  disabled?: boolean

  onChange?: (value: string | number | boolean) => void
}

ISelectListProps

export interface ISelectListProps {

  value: string | string[]

  options?: Array<{
    label: string
    value: string
    color?: string
  }>

  hideCheckMark?: boolean

  onChange: (value: string | string[] | undefined) => void

  multiple?: boolean

  optionClassName?: string

  className?: string
}

IMultipleSelectProps

import type { ReactNode } from 'react'
import type { IDropdownMenuProps } from '../dropdown-menu/DropdownMenu'

export interface IMultipleSelectProps {
  className?: string

  value: string[]

  disabled?: boolean

  options?: IOption[]

  borderless?: boolean

  onChange: (values: string[]) => void
}

ISelectProps

import type { ReactNode } from 'react'
import type { IDropdownMenuProps } from '../dropdown-menu/DropdownMenu'

export interface ISelectProps {
  className?: string

  value: string

  disabled?: boolean

  options?: IOption[]

  borderless?: boolean

  onChange: (value: string) => void
}

IToasterProps

import type { ComponentProps } from 'react'

export type IToasterProps = ComponentProps<typeof Sonner>

ITooltipProps

import type { ReactElement, ReactNode } from 'react'

export interface ITooltipProps {

  children: ReactNode

  className?: string

  asChild?: boolean

  title?: ReactNode

  placement?: 'top' | 'right' | 'bottom' | 'left'

  showIfEllipsis?: boolean

  visible?: boolean

  onVisibleChange?: (visible: boolean) => void
}

ITreeNodeProps

import type { CSSProperties, ReactNode } from 'react'

export interface ITreeNodeProps {
  title: string
  key: string
  children?: ITreeNodeProps[]
}

ITreeProps

import type { CSSProperties, ReactNode } from 'react'

export interface ITreeProps {
  data?: ITreeItemProps[]

  defaultExpandAll?: boolean

  selectionMode?: TreeSelectionMode

  valueGroup?: string[]

  onChange?: (node: ITreeNodeProps) => void

  onExpend?: (value: string) => void

  height?: number

  itemHeight?: number

  attachRender?: (node: ITreeItemProps) => ReactNode

  treeNodeClassName?: string

  style?: CSSProperties

  defaultCache?: Map<string, string[]>
}

Table of Contents