kbin-ui

Table of contents

Variables

• colors
• scrollbarJSS
• sizes
• springConfig
• zIndex

Functions

• AnimatedFlexCol
• AnimatedFlexRow
• AnimatedText
• AutoPlacingGrid
• Button
• CenterMenu
• CheckBox
• Conditional
• ContextMenu
• ContextMenuExtension
• DualButtons
• FlexCol
• FlexRow
• HorizontalButtonScroller
• HorizontalScroller
• IfElse
• LabelledItems
• LabelledMultiText
• LabelledText
• Map
• Notification
• SVGIcon
• Switch
• Text
• TextArea
• TextAreaOnly
• TextInput
• TextInputOnly
• UncontrolledCheckBox
• UncontrolledDualButtons
• createMenuManager
• setCustomColors
• setCustomScrollbarJSS
• setCustomSizes
• setCustomSpringConfig
• setCustomZIndices
• useContextMenu
• useScrollbarJSS

Variables

colors

• Const colors: object

Type declaration:

Name | Type | ------ | ------ | buttonBorder | string | centerMenu | string | centerMenuBackground | string | centerMenuBorder | string | checkBoxBorder | string | checkBoxHighlightCenter | string | checkBoxHighlightEdge | string | contextMenuBackground | string | contextMenuItemBorder | string | defaultButton | string | focussedInput | string | focussedInputBorder | string | inputBG | string | inputText | string | notificationFailure | string | notificationSuccess | string | redButton | string | text | string | unfocussedInput | string | unfocussedInputLabel | string | scrollbarBackground | string | scrollbarThumb | string |

Defined in: theme.ts:3

scrollbarJSS

• Const scrollbarJSS: object

an object with JSS to set a custom scrollbar in a component

Usage:

const useJSS = createUseStyles({
  /* style */,
  ...scrollbarJSS.thin
})

Type declaration:

Name | Type | ------ | ------ | none | { &::-webkit-scrollbar: { width: string = '0px' } ; &::-webkit-scrollbar-thumb: { background: string = '#0a2154'; borderRadius: string = '1.5em' } ; &::-webkit-scrollbar-track: { background: string = '#2323246f' } ; scrollbarColor: string = '#0a2154'; scrollbarWidth: string = 'none' } | regular | { &::-webkit-scrollbar: { width: string = '.8em' } ; &::-webkit-scrollbar-thumb: { background: string = '#0a2154'; borderRadius: string = '1.5em' } ; &::-webkit-scrollbar-track: { background: string = '#2323246f' } ; scrollbarColor: string = '#0a2154'; scrollbarWidth: string = 'auto' } | thin | { &::-webkit-scrollbar: { width: string = '.5em' } ; &::-webkit-scrollbar-thumb: { background: string = '#0a2154'; borderRadius: string = '1.5em' } ; &::-webkit-scrollbar-track: { background: string = '#2323246f' } ; scrollbarColor: string = '#0a2154'; scrollbarWidth: string = 'thin' } |

Defined in: theme.ts:142

sizes

• Const sizes: object

a collection of size constants compatible with CSS used across the UI

Usage:

<Button fontSize={sizes.text.small}></Button>

Type declaration:

Name | Type | ------ | ------ | button | { margin: string = '.2em'; padding: string = '.3em' } | checkBox | { checkDif: number = 0; highlightDif: number = 1.5; size: number = 1.2 } | contextMenu | { maxHeight: string = '90vh'; maxWidth: string = '90vw' } | file | { height: number = 12; width: number = 10 } | switch | { diameter: number = 3 } | text | { large: string = 'calc(25px + 2.8vmin)'; medium: string = 'calc(18px + 1.8vmin)'; small: string = 'calc(12px + 1.2vmin)'; xsmall: string = 'calc(8px + 1vmin)'; xxsmall: string = 'calc(7px + .8vmin)' } |

Defined in: theme.ts:36

springConfig

• Const springConfig: object

a collection of default spring configs

Usage:

const springStyle = useSpring({
  /* animated style */,
  config: springConfig.fast
})

Type declaration:

Name | Type | ------ | ------ | fast | { friction: number = 30; tension: number = 370 } | medium | { friction: number = 40; tension: number = 330; velocity: number = 5 } | xslow | { clamp: boolean = true; friction: number = 20; mass: number = 50; tension: number = 100 } |

Defined in: theme.ts:106

zIndex

• Const zIndex: object

sets the z-index of necessary components

Type declaration:

Name | Type | ------ | ------ | centerMenu | number | contextMenu | number | notification | number |

Defined in: theme.ts:96

Functions

AnimatedFlexCol

▸ ConstAnimatedFlexCol(__namedParameters: { alignItems?: string ; backgroundColor?: string ; children?: React.ReactNode ; className?: string ; height?: string ; justifyContent?: string ; margin?: string ; onClick?: (e: MouseEvent<HTMLDivElement>) => void ; onContextMenu?: (e: MouseEvent<HTMLDivElement>) => void ; onDragOver?: (e: DragEvent<HTMLDivElement>) => void ; onDrop?: (e: DragEvent<HTMLDivElement>) => void ; onPointerEnter?: (e: PointerEvent<HTMLDivElement>) => void ; onPointerLeave?: (e: PointerEvent<HTMLDivElement>) => void ; onWheel?: (e: WheelEvent<HTMLDivElement>) => void ; padding?: string ; pointer?: boolean ; ref?: RefObject<HTMLDivElement> ; style?: CSS.Properties ; width?: string }, ref: ForwardedRef<HTMLDivElement>): Element

animated(FlexCol) compatible with springs. see FlexCol.

Parameters:

• __namedParameters: object

Name | Type | ------ | ------ | alignItems? | string | backgroundColor? | string | children? | React.ReactNode | className? | string | height? | string | justifyContent? | string | margin? | string | onClick? | (e: MouseEvent<HTMLDivElement>) => void | onContextMenu? | (e: MouseEvent<HTMLDivElement>) => void | onDragOver? | (e: DragEvent<HTMLDivElement>) => void | onDrop? | (e: DragEvent<HTMLDivElement>) => void | onPointerEnter? | (e: PointerEvent<HTMLDivElement>) => void | onPointerLeave? | (e: PointerEvent<HTMLDivElement>) => void | onWheel? | (e: WheelEvent<HTMLDivElement>) => void | padding? | string | pointer? | boolean | ref? | RefObject<HTMLDivElement> | style? | CSS.Properties | width? | string |

• ref: ForwardedRef<HTMLDivElement>

Returns: Element

Defined in: Flex/FlexCol.tsx:58

AnimatedFlexRow

▸ ConstAnimatedFlexRow(__namedParameters: { alignItems?: string ; backgroundColor?: string ; children?: React.ReactNode ; className?: string ; flexWrap?: wrap | nowrap | wrap-reverse ; height?: string ; justifyContent?: string ; margin?: string ; onClick?: (e: MouseEvent<HTMLDivElement>) => void ; onContextMenu?: (e: MouseEvent<HTMLDivElement>) => void ; onPointerEnter?: (e: PointerEvent<HTMLDivElement>) => void ; onPointerLeave?: (e: PointerEvent<HTMLDivElement>) => void ; onWheel?: (e: WheelEvent<HTMLDivElement>) => void ; padding?: string ; pointer?: boolean ; ref?: RefObject<HTMLDivElement> ; style?: CSS.Properties ; width?: string }, ref: ForwardedRef<HTMLDivElement>): Element

animated(FlexRow) compatible with springs. see FlexRow.

Parameters:

• __namedParameters: object

Name | Type | ------ | ------ | alignItems? | string | backgroundColor? | string | children? | React.ReactNode | className? | string | flexWrap? | wrap | nowrap | wrap-reverse | height? | string | justifyContent? | string | margin? | string | onClick? | (e: MouseEvent<HTMLDivElement>) => void | onContextMenu? | (e: MouseEvent<HTMLDivElement>) => void | onPointerEnter? | (e: PointerEvent<HTMLDivElement>) => void | onPointerLeave? | (e: PointerEvent<HTMLDivElement>) => void | onWheel? | (e: WheelEvent<HTMLDivElement>) => void | padding? | string | pointer? | boolean | ref? | RefObject<HTMLDivElement> | style? | CSS.Properties | width? | string |

• ref: ForwardedRef<HTMLDivElement>

Returns: Element

Defined in: Flex/FlexRow.tsx:54

AnimatedText

▸ ConstAnimatedText(__namedParameters: { className?: string ; color?: string ; fontSize?: string ; margin?: string ; onClick?: (e: MouseEvent<HTMLDivElement>) => void ; padding?: string ; pointer?: boolean ; ref?: RefObject<HTMLDivElement> ; style?: CSS.Properties ; text: string ; textAlign?: string ; textCursor?: boolean ; underline?: boolean ; wrap?: boolean }, ref: ForwardedRef<HTMLDivElement>): Element

animated(Text) compatible with springs. see Text.

Parameters:

• __namedParameters: object

Name | Type | ------ | ------ | className? | string | color? | string | fontSize? | string | margin? | string | onClick? | (e: MouseEvent<HTMLDivElement>) => void | padding? | string | pointer? | boolean | ref? | RefObject<HTMLDivElement> | style? | CSS.Properties | text | string | textAlign? | string | textCursor? | boolean | underline? | boolean | wrap? | boolean |

• ref: ForwardedRef<HTMLDivElement>

Returns: Element

Defined in: Text/Text.tsx:40

AutoPlacingGrid

▸ AutoPlacingGrid(__namedParameters: { alignItems?: start | end | center | stretch ; children?: ReactNode ; className?: string ; direction: row | column | row dense | column dense ; gap?: string ; justifyContent?: start | end | center | stretch ; minHeight: string ; minWidth: string ; numCols?: number | string ; numRows?: number | string ; placeItems?: start | end | center | stretch ; style?: CSS.Properties }): Element

a div with css grid and basic auto placing capabilities

Parameters:

• __namedParameters: object

Name | Type | ------ | ------ | alignItems? | start | end | center | stretch | children? | ReactNode | className? | string | direction | row | column | row dense | column dense | gap? | string | justifyContent? | start | end | center | stretch | minHeight | string | minWidth | string | numCols? | number | string | numRows? | number | string | placeItems? | start | end | center | stretch | style? | CSS.Properties |

Returns: Element

Defined in: AutoPlacingGrid/AutoPlacingGrid.tsx:5

Button

▸ Button(__namedParameters: { buttonRef?: RefObject<HTMLDivElement> ; children?: React.ReactNode ; className?: string ; fontSize?: string ; isRed?: boolean ; margin?: string ; notClickable?: boolean ; onClick?: (e: MouseEvent<HTMLDivElement>) => void ; onContextMenu?: (e: MouseEvent<HTMLDivElement>) => void ; onDoubleClick?: (e: MouseEvent<HTMLDivElement>) => void ; onKeyDown?: (e: KeyboardEvent<HTMLDivElement>) => void ; onPointerDown?: (e: React.PointerEvent<HTMLDivElement>) => void ; onPointerEnter?: (e: MouseEvent<HTMLDivElement>) => void ; onPointerLeave?: (e: MouseEvent<HTMLDivElement>) => void ; padding?: string ; style?: CSS.Properties }): Element

a standard button element with onClick + more

Parameters:

• __namedParameters: object

Name | Type | ------ | ------ | buttonRef? | RefObject<HTMLDivElement> | children? | React.ReactNode | className? | string | fontSize? | string | isRed? | boolean | margin? | string | notClickable? | boolean | onClick? | (e: MouseEvent<HTMLDivElement>) => void | onContextMenu? | (e: MouseEvent<HTMLDivElement>) => void | onDoubleClick? | (e: MouseEvent<HTMLDivElement>) => void | onKeyDown? | (e: KeyboardEvent<HTMLDivElement>) => void | onPointerDown? | (e: React.PointerEvent<HTMLDivElement>) => void | onPointerEnter? | (e: MouseEvent<HTMLDivElement>) => void | onPointerLeave? | (e: MouseEvent<HTMLDivElement>) => void | padding? | string | style? | CSS.Properties |

Returns: Element

Defined in: Button/Button.tsx:6

CenterMenu

▸ CenterMenu(__namedParameters: { bounderStyle?: CSS.Properties ; children: React.ReactNode ; className?: string ; cmControlData: CenterMenuControlData ; header?: string ; headerClassName?: string ; headerStyle?: CSS.Properties ; onClose: () => void ; style?: CSS.Properties }): Element

a component to create central menu popups. used along with the menuManager and useCenterMenu hook.

Usage:

First the menu manager must be instantiated. See createMenuManager.

once the useCenterMenu hook is available (probably through export / import), create center menus following the two component pattern below

function ExampleCenterMenu() {
  const { cmControlData, closeMenu, softClose } = useCenterMenu('exampleMenu')
  return (
    <CenterMenu
      cmControlData={cmControlData}
      onClose={closeMenu}
    > 
      <ExampleMenuItems closeMenu={closeMenu} softClose={softClose}>
    </CenterMenu>
  )
}

function ExampleMenuItems({ closeMenu, softClose }) {
  useEscapeToClose(closeMenu)
  return (
    <Fragment>
      /* menu content */
    </Fragment>
  )
}

Parameters:

• __namedParameters: object

Name | Type | ------ | ------ | bounderStyle? | CSS.Properties | children | React.ReactNode | className? | string | cmControlData | CenterMenuControlData | header? | string | headerClassName? | string | headerStyle? | CSS.Properties | onClose | () => void | style? | CSS.Properties |

Returns: Element

Defined in: CenterMenu/CenterMenu.tsx:11

CheckBox

▸ CheckBox(__namedParameters: { onChecked?: () => void ; onUnChecked?: () => void ; style?: CSS.Properties }): Element

Parameters:

• __namedParameters: object

Name | Type | ------ | ------ | onChecked? | () => void | onUnChecked? | () => void | style? | CSS.Properties |

Returns: Element

Defined in: CheckBox/CheckBox.tsx:5

Conditional

▸ Conditional(__namedParameters: { children: ReactNode ; showIf: boolean }): Element

Parameters:

• __namedParameters: object

Name | Type | ------ | ------ | children | ReactNode | showIf | boolean |

Returns: Element

Defined in: Conditional.tsx:3

ContextMenu

▸ ContextMenu(__namedParameters: { bounderStyle?: CSS.Properties ; children: ReactNode ; event: React.MouseEvent<HTMLDivElement> | MouseEvent ; isOpen: boolean ; onClose: () => void ; style?: CSS.Properties }): Element

Parameters:

• __namedParameters: object

Name | Type | ------ | ------ | bounderStyle? | CSS.Properties | children | ReactNode | event | React.MouseEvent<HTMLDivElement> | MouseEvent | isOpen | boolean | onClose | () => void | style? | CSS.Properties |

Returns: Element

Defined in: ContextMenu/ContextMenu.tsx:7

ContextMenuExtension

▸ ContextMenuExtension(__namedParameters: { buttonStyle?: CSS.Properties ; children: ReactNode ; fontSize?: string ; text: string }): Element

Parameters:

• __namedParameters: object

Name | Type | ------ | ------ | buttonStyle? | CSS.Properties | children | ReactNode | fontSize? | string | text | string |

Returns: Element

Defined in: ContextMenuExtension/ExtensionMenu.tsx:10

DualButtons

▸ DualButtons(__namedParameters: { leftText: string ; onLeft?: () => void ; onRight?: () => void ; rightText: string ; startRight?: boolean }): Element

Parameters:

• __namedParameters: object

Name | Type | ------ | ------ | leftText | string | onLeft? | () => void | onRight? | () => void | rightText | string | startRight? | boolean |

Returns: Element

Defined in: DualButtons/DualButtons.tsx:4

FlexCol

▸ ConstFlexCol(__namedParameters: { alignItems?: string ; backgroundColor?: string ; children?: React.ReactNode ; className?: string ; height?: string ; justifyContent?: string ; margin?: string ; onClick?: (e: MouseEvent<HTMLDivElement>) => void ; onContextMenu?: (e: MouseEvent<HTMLDivElement>) => void ; onDragOver?: (e: DragEvent<HTMLDivElement>) => void ; onDrop?: (e: DragEvent<HTMLDivElement>) => void ; onPointerEnter?: (e: PointerEvent<HTMLDivElement>) => void ; onPointerLeave?: (e: PointerEvent<HTMLDivElement>) => void ; onWheel?: (e: WheelEvent<HTMLDivElement>) => void ; padding?: string ; pointer?: boolean ; ref?: RefObject<HTMLDivElement> ; style?: CSS.Properties ; width?: string }, ref: ForwardedRef<HTMLDivElement>): Element

Parameters:

• __namedParameters: object

Name | Type | ------ | ------ | alignItems? | string | backgroundColor? | string | children? | React.ReactNode | className? | string | height? | string | justifyContent? | string | margin? | string | onClick? | (e: MouseEvent<HTMLDivElement>) => void | onContextMenu? | (e: MouseEvent<HTMLDivElement>) => void | onDragOver? | (e: DragEvent<HTMLDivElement>) => void | onDrop? | (e: DragEvent<HTMLDivElement>) => void | onPointerEnter? | (e: PointerEvent<HTMLDivElement>) => void | onPointerLeave? | (e: PointerEvent<HTMLDivElement>) => void | onWheel? | (e: WheelEvent<HTMLDivElement>) => void | padding? | string | pointer? | boolean | ref? | RefObject<HTMLDivElement> | style? | CSS.Properties | width? | string |

• ref: ForwardedRef<HTMLDivElement>

Returns: Element

Defined in: Flex/FlexCol.tsx:56

FlexRow

▸ ConstFlexRow(__namedParameters: { alignItems?: string ; backgroundColor?: string ; children?: React.ReactNode ; className?: string ; flexWrap?: wrap | nowrap | wrap-reverse ; height?: string ; justifyContent?: string ; margin?: string ; onClick?: (e: MouseEvent<HTMLDivElement>) => void ; onContextMenu?: (e: MouseEvent<HTMLDivElement>) => void ; onPointerEnter?: (e: PointerEvent<HTMLDivElement>) => void ; onPointerLeave?: (e: PointerEvent<HTMLDivElement>) => void ; onWheel?: (e: WheelEvent<HTMLDivElement>) => void ; padding?: string ; pointer?: boolean ; ref?: RefObject<HTMLDivElement> ; style?: CSS.Properties ; width?: string }, ref: ForwardedRef<HTMLDivElement>): Element

Parameters:

• __namedParameters: object

Name | Type | ------ | ------ | alignItems? | string | backgroundColor? | string | children? | React.ReactNode | className? | string | flexWrap? | wrap | nowrap | wrap-reverse | height? | string | justifyContent? | string | margin? | string | onClick? | (e: MouseEvent<HTMLDivElement>) => void | onContextMenu? | (e: MouseEvent<HTMLDivElement>) => void | onPointerEnter? | (e: PointerEvent<HTMLDivElement>) => void | onPointerLeave? | (e: PointerEvent<HTMLDivElement>) => void | onWheel? | (e: WheelEvent<HTMLDivElement>) => void | padding? | string | pointer? | boolean | ref? | RefObject<HTMLDivElement> | style? | CSS.Properties | width? | string |

• ref: ForwardedRef<HTMLDivElement>

Returns: Element

Defined in: Flex/FlexRow.tsx:52

HorizontalButtonScroller

▸ HorizontalButtonScroller(__namedParameters: { buttonClassName?: string ; buttonStyle?: CSS.Properties ; children: ReactNode ; className?: string ; onLeft: () => void ; onRight: () => void ; onWheel?: (e: WheelEvent<HTMLDivElement>) => void ; style?: CSS.Properties ; useOnWheel?: boolean }): Element

Parameters:

• __namedParameters: object

Name | Type | ------ | ------ | buttonClassName? | string | buttonStyle? | CSS.Properties | children | ReactNode | className? | string | onLeft | () => void | onRight | () => void | onWheel? | (e: WheelEvent<HTMLDivElement>) => void | style? | CSS.Properties | useOnWheel? | boolean |

Returns: Element

Defined in: HorizontalButtonScroller.tsx:10

HorizontalScroller

▸ HorizontalScroller(__namedParameters: { alignItems?: string ; children: ReactNode ; className?: string ; height?: string ; style?: CSS.Properties ; width?: string }): Element

Parameters:

• __namedParameters: object

Name | Type | ------ | ------ | alignItems? | string | children | ReactNode | className? | string | height? | string | style? | CSS.Properties | width? | string |

Returns: Element

Defined in: HorizontalScroller/HorizontalScroller.tsx:13

IfElse

▸ IfElse(__namedParameters: { show: ReactNode ; showElse: ReactNode ; showIf: boolean }): Element

Parameters:

• __namedParameters: object

Name | Type | ------ | ------ | show | ReactNode | showElse | ReactNode | showIf | boolean |

Returns: Element

Defined in: IfElse.tsx:3

LabelledItems

▸ LabelledItems(__namedParameters: { children: ReactNode ; itemsStyle?: CSS.Properties ; label: ReactNode ; labelSize?: string ; labelStyle?: CSS.Properties ; style?: CSS.Properties }): Element

Parameters:

• __namedParameters: object

Name | Type | ------ | ------ | children | ReactNode | itemsStyle? | CSS.Properties | label | ReactNode | labelSize? | string | labelStyle? | CSS.Properties | style? | CSS.Properties |

Returns: Element

Defined in: LabelledItems/LabelledItems.tsx:9

LabelledMultiText

▸ LabelledMultiText(__namedParameters: { label: string ; labelSize?: string ; labelStyle?: CSS.Properties ; style?: CSS.Properties ; text: string[] ; textSize?: string ; textStyle?: CSS.Properties }): Element

Parameters:

• __namedParameters: object

Name | Type | ------ | ------ | label | string | labelSize? | string | labelStyle? | CSS.Properties | style? | CSS.Properties | text | string[] | textSize? | string | textStyle? | CSS.Properties |

Returns: Element

Defined in: LabelledText/LabelledMultiText.tsx:8

LabelledText

▸ LabelledText(__namedParameters: { label: string ; labelSize?: string ; labelStyle?: CSS.Properties ; style?: CSS.Properties ; text: string ; textSize?: string ; textStyle?: CSS.Properties }): Element

Parameters:

• __namedParameters: object

Name | Type | ------ | ------ | label | string | labelSize? | string | labelStyle? | CSS.Properties | style? | CSS.Properties | text | string | textSize? | string | textStyle? | CSS.Properties |

Returns: Element

Defined in: LabelledText/LabelledText.tsx:8

Map

▸ Map<T>(__namedParameters: { array: T[] ; map: (val: T, index: number) => ReactNode }): Element

Type parameters:

Name | ------ | T |

Parameters:

• __namedParameters: object

Name | Type | ------ | ------ | array | T[] | map | (val: T, index: number) => ReactNode |

Returns: Element

Defined in: Map.tsx:3

Notification

▸ Notification(__namedParameters: { xLocation?: left | center | right ; yLocation?: top | center | bottom }): Element

Parameters:

• __namedParameters: object

Name | Type | ------ | ------ | xLocation? | left | center | right | yLocation? | top | center | bottom |

Returns: Element

Defined in: Notification/Notification.tsx:16

SVGIcon

▸ SVGIcon(__namedParameters: { alt: string ; className?: string ; height?: string ; imageRef?: RefObject<HTMLImageElement> ; margin?: string ; onClick?: (e: MouseEvent<HTMLImageElement>) => void ; onPointerDown?: (e: PointerEvent<HTMLImageElement>) => void ; padding?: string ; pointer?: boolean ; scale?: number ; size?: string ; src: string ; style?: CSS.Properties ; width?: string }): Element

Parameters:

• __namedParameters: object

Name | Type | ------ | ------ | alt | string | className? | string | height? | string | imageRef? | RefObject<HTMLImageElement> | margin? | string | onClick? | (e: MouseEvent<HTMLImageElement>) => void | onPointerDown? | (e: PointerEvent<HTMLImageElement>) => void | padding? | string | pointer? | boolean | scale? | number | size? | string | src | string | style? | CSS.Properties | width? | string |

Returns: Element

Defined in: SVGIcon/SVGIcon.tsx:5

Switch

▸ Switch(__namedParameters: { fontSize?: string ; initState: boolean ; onSwitch: (newState: boolean) => void ; style?: object ; text: string }): Element

Parameters:

• __namedParameters: object

Name | Type | ------ | ------ | fontSize? | string | initState | boolean | onSwitch | (newState: boolean) => void | style? | object | text | string |

Returns: Element

Defined in: Switch/Switch.tsx:19

Text

▸ ConstText(__namedParameters: { className?: string ; color?: string ; fontSize?: string ; margin?: string ; onClick?: (e: MouseEvent<HTMLDivElement>) => void ; padding?: string ; pointer?: boolean ; ref?: RefObject<HTMLDivElement> ; style?: CSS.Properties ; text: string ; textAlign?: string ; textCursor?: boolean ; underline?: boolean ; wrap?: boolean }, ref: ForwardedRef<HTMLDivElement>): Element

Parameters:

• __namedParameters: object

Name | Type | ------ | ------ | className? | string | color? | string | fontSize? | string | margin? | string | onClick? | (e: MouseEvent<HTMLDivElement>) => void | padding? | string | pointer? | boolean | ref? | RefObject<HTMLDivElement> | style? | CSS.Properties | text | string | textAlign? | string | textCursor? | boolean | underline? | boolean | wrap? | boolean |

• ref: ForwardedRef<HTMLDivElement>

Returns: Element

Defined in: Text/Text.tsx:38

TextArea

▸ TextArea(__namedParameters: { autoFocus?: boolean ; bounderClassName?: string ; defaultValue?: string ; fontSize?: string ; inputClassName?: string ; label?: string ; labelFontSize?: string ; labelStyle?: CSS.Properties ; layout?: row | column ; onBlur?: (e: FocusEvent<HTMLTextAreaElement>) => void ; onChange?: (e: ChangeEvent<HTMLTextAreaElement>) => void ; onEnter?: () => void ; onEscape?: () => void ; onFocus?: (e: FocusEvent<HTMLTextAreaElement>) => void ; onKeyDown?: (e: KeyboardEvent<HTMLTextAreaElement>) => void ; placeholder?: string ; style?: CSS.Properties ; textAreaRef?: RefObject<HTMLTextAreaElement> ; value?: string }): Element

Parameters:

• __namedParameters: object

Name | Type | ------ | ------ | autoFocus? | boolean | bounderClassName? | string | defaultValue? | string | fontSize? | string | inputClassName? | string | label? | string | labelFontSize? | string | labelStyle? | CSS.Properties | layout? | row | column | onBlur? | (e: FocusEvent<HTMLTextAreaElement>) => void | onChange? | (e: ChangeEvent<HTMLTextAreaElement>) => void | onEnter? | () => void | onEscape? | () => void | onFocus? | (e: FocusEvent<HTMLTextAreaElement>) => void | onKeyDown? | (e: KeyboardEvent<HTMLTextAreaElement>) => void | placeholder? | string | style? | CSS.Properties | textAreaRef? | RefObject<HTMLTextAreaElement> | value? | string |

Returns: Element

Defined in: TextArea/TextArea.tsx:11

TextAreaOnly

▸ TextAreaOnly(__namedParameters: { autoFocus?: boolean ; className?: string ; defaultValue?: string ; fontSize?: string ; onBlur?: (e: FocusEvent<HTMLTextAreaElement>) => void ; onChange?: (e: ChangeEvent<HTMLTextAreaElement>) => void ; onEnter?: () => void ; onEscape?: () => void ; onFocus?: (e: FocusEvent<HTMLTextAreaElement>) => void ; onKeyDown?: (e: KeyboardEvent<HTMLTextAreaElement>) => void ; placeholder?: string ; style?: CSS.Properties ; textAreaRef?: RefObject<HTMLTextAreaElement> ; value?: string }): Element

Parameters:

• __namedParameters: object

Name | Type | ------ | ------ | autoFocus? | boolean | className? | string | defaultValue? | string | fontSize? | string | onBlur? | (e: FocusEvent<HTMLTextAreaElement>) => void | onChange? | (e: ChangeEvent<HTMLTextAreaElement>) => void | onEnter? | () => void | onEscape? | () => void | onFocus? | (e: FocusEvent<HTMLTextAreaElement>) => void | onKeyDown? | (e: KeyboardEvent<HTMLTextAreaElement>) => void | placeholder? | string | style? | CSS.Properties | textAreaRef? | RefObject<HTMLTextAreaElement> | value? | string |

Returns: Element

Defined in: TextArea/TextAreaOnly.tsx:5

TextInput

▸ TextInput(__namedParameters: { autoFocus?: boolean ; bounderClassName?: string ; defaultValue?: string ; fontSize?: string ; inputClassName?: string ; inputRef?: RefObject<HTMLInputElement> ; label?: string ; labelFontSize?: string ; labelStyle?: CSS.Properties ; layout?: row | column ; onBlur?: (e: FocusEvent<HTMLInputElement>) => void ; onChange?: (e: ChangeEvent<HTMLInputElement>) => void ; onEnter?: () => void ; onEscape?: () => void ; onFocus?: (e: FocusEvent<HTMLInputElement>) => void ; onKeyDown?: (e: KeyboardEvent<HTMLInputElement>) => void ; password?: boolean ; placeholder?: string ; style?: CSS.Properties ; value?: string }): Element

Parameters:

• __namedParameters: object

Name | Type | ------ | ------ | autoFocus? | boolean | bounderClassName? | string | defaultValue? | string | fontSize? | string | inputClassName? | string | inputRef? | RefObject<HTMLInputElement> | label? | string | labelFontSize? | string | labelStyle? | CSS.Properties | layout? | row | column | onBlur? | (e: FocusEvent<HTMLInputElement>) => void | onChange? | (e: ChangeEvent<HTMLInputElement>) => void | onEnter? | () => void | onEscape? | () => void | onFocus? | (e: FocusEvent<HTMLInputElement>) => void | onKeyDown? | (e: KeyboardEvent<HTMLInputElement>) => void | password? | boolean | placeholder? | string | style? | CSS.Properties | value? | string |

Returns: Element

Defined in: TextInput/TextInput.tsx:11

TextInputOnly

▸ TextInputOnly(__namedParameters: { autoFocus?: boolean ; className?: string ; defaultValue?: string ; fontSize?: string ; inputRef?: RefObject<HTMLInputElement> ; onBlur?: (e: FocusEvent<HTMLInputElement>) => void ; onChange?: (e: ChangeEvent<HTMLInputElement>) => void ; onEnter?: () => void ; onEscape?: () => void ; onFocus?: (e: FocusEvent<HTMLInputElement>) => void ; onKeyDown?: (e: KeyboardEvent<HTMLInputElement>) => void ; password?: boolean ; placeholder?: string ; style?: CSS.Properties ; value?: string }): Element

Parameters:

• __namedParameters: object

Name | Type | ------ | ------ | autoFocus? | boolean | className? | string | defaultValue? | string | fontSize? | string | inputRef? | RefObject<HTMLInputElement> | onBlur? | (e: FocusEvent<HTMLInputElement>) => void | onChange? | (e: ChangeEvent<HTMLInputElement>) => void | onEnter? | () => void | onEscape? | () => void | onFocus? | (e: FocusEvent<HTMLInputElement>) => void | onKeyDown? | (e: KeyboardEvent<HTMLInputElement>) => void | password? | boolean | placeholder? | string | style? | CSS.Properties | value? | string |

Returns: Element

Defined in: TextInput/TextInputOnly.tsx:5

UncontrolledCheckBox

▸ UncontrolledCheckBox(__namedParameters: { checked: boolean ; className?: string ; onClick?: (e: MouseEvent<HTMLDivElement>) => void ; style?: CSS.Properties }): Element

Parameters:

• __namedParameters: object

Name | Type | ------ | ------ | checked | boolean | className? | string | onClick? | (e: MouseEvent<HTMLDivElement>) => void | style? | CSS.Properties |

Returns: Element

Defined in: CheckBox/UncontrolledCheckBox.tsx:7

UncontrolledDualButtons

▸ UncontrolledDualButtons(__namedParameters: { isRight: boolean ; leftText: string ; onLeft: () => void ; onRight: () => void ; rightText: string ; style?: CSS.Properties }): Element

Parameters:

• __namedParameters: object

Name | Type | ------ | ------ | isRight | boolean | leftText | string | onLeft | () => void | onRight | () => void | rightText | string | style? | CSS.Properties |

Returns: Element

Defined in: DualButtons/UncontrolledDualButtons.tsx:9

createMenuManager

▸ createMenuManager(): object

Returns: object

Name | Type | ------ | ------ | mmAddMenu | (name: string, openMenu: OpenMenu) => void | mmCloseMenu | () => void | mmOpenMenu | (name: string, save: boolean, ...args: any) => void | mmQueueMenu | (name: string, ...args: any) => void | useCenterMenu | (name: string, onOpen?: OpenMenu, save: boolean, onClose?: () => void) => { closeMenu: () => void ; cmControlData: boolean ; softClose: () => void } |

Defined in: menuManager/menuManager.ts:4

setCustomColors

▸ setCustomColors(customColors: Partial<typeof colors>): void

Parameters:

Name | Type | ------ | ------ | customColors | Partial<typeof colors> |

Returns: void

Defined in: theme.ts:32

setCustomScrollbarJSS

▸ setCustomScrollbarJSS(customJSS: CustomScrollbarJSS): void

Parameters:

Name | Type | ------ | ------ | customJSS | CustomScrollbarJSS |

Returns: void

Defined in: theme.ts:193

setCustomSizes

▸ setCustomSizes(customSizes: CustomSizes): void

Parameters:

Name | Type | ------ | ------ | customSizes | CustomSizes |

Returns: void

Defined in: theme.ts:75

setCustomSpringConfig

▸ setCustomSpringConfig(customSpringConfig: CustomSpringConfig): void

Parameters:

Name | Type | ------ | ------ | customSpringConfig | CustomSpringConfig |

Returns: void

Defined in: theme.ts:130

setCustomZIndices

▸ setCustomZIndices(customZIndices: Partial<typeof zIndex>): void

Parameters:

Name | Type | ------ | ------ | customZIndices | Partial<typeof zIndex> |

Returns: void

Defined in: theme.ts:102

useContextMenu

▸ useContextMenu<Data>(idata: Data): Return<Data>

Type parameters:

Name | ------ | Data |

Parameters:

Name | Type | ------ | ------ | idata | Data |

Returns: Return<Data>

Defined in: ContextMenu/hooks.ts:14

useScrollbarJSS

▸ ConstuseScrollbarJSS(data?: unknown): Record<Scroller, string>

Parameters:

Name | Type | ------ | ------ | data? | unknown |

Returns: Record<Scroller, string>

Defined in: theme.ts:205