@bigbluebutton/tldraw 2.0.0-alpha.19

package/src/lib/ui/components/primitives/DropdownMenu.tsx

@@ -0,0 +1,229 @@
+import { preventDefault, useContainer } from '@bigbluebutton/editor'
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
+import { useMenuIsOpen } from '../../hooks/useMenuIsOpen'
+import { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'
+import { Button, TLUiButtonProps } from './Button'
+import { Icon } from './Icon'
+
+/** @public */
+export function Root({
+	id,
+	children,
+	modal = false,
+	debugOpen = false,
+}: {
+	id: string
+	children: any
+	modal?: boolean
+	debugOpen?: boolean
+}) {
+	const [open, onOpenChange] = useMenuIsOpen(id)
+
+	return (
+		<DropdownMenu.Root open={debugOpen || open} dir="ltr" modal={modal} onOpenChange={onOpenChange}>
+			{children}
+		</DropdownMenu.Root>
+	)
+}
+
+/** @public */
+export function Trigger({
+	children,
+	'data-testid': testId,
+}: {
+	children: any
+	'data-testid'?: string
+}) {
+	return (
+		<DropdownMenu.Trigger
+			dir="ltr"
+			data-testid={testId}
+			asChild
+			// Firefox fix: Stop the dropdown immediately closing after touch
+			onTouchEnd={(e) => preventDefault(e)}
+		>
+			{children}
+		</DropdownMenu.Trigger>
+	)
+}
+
+/** @public */
+export function Content({
+	side = 'bottom',
+	align = 'start',
+	sideOffset = 8,
+	alignOffset = 8,
+	children,
+}: {
+	children: any
+	alignOffset?: number
+	sideOffset?: number
+	align?: 'start' | 'center' | 'end'
+	side?: 'bottom' | 'top' | 'right' | 'left'
+}) {
+	const container = useContainer()
+
+	return (
+		<DropdownMenu.Portal container={container}>
+			<DropdownMenu.Content
+				className="tlui-menu"
+				align={align}
+				sideOffset={sideOffset}
+				side={side}
+				alignOffset={alignOffset}
+				collisionPadding={4}
+			>
+				{children}
+			</DropdownMenu.Content>
+		</DropdownMenu.Portal>
+	)
+}
+
+/** @public */
+export function Sub({ id, children }: { id: string; children: any }) {
+	const [open, onOpenChange] = useMenuIsOpen(id)
+
+	return (
+		<DropdownMenu.Sub open={open} onOpenChange={onOpenChange}>
+			{children}
+		</DropdownMenu.Sub>
+	)
+}
+
+/** @public */
+export function SubTrigger({
+	label,
+	'data-testid': testId,
+	'data-direction': dataDirection,
+}: {
+	label: TLUiTranslationKey | Exclude<string, TLUiTranslationKey>
+	'data-testid'?: string
+	'data-direction'?: 'left' | 'right'
+}) {
+	return (
+		<DropdownMenu.SubTrigger dir="ltr" data-direction={dataDirection} data-testid={testId} asChild>
+			<Button
+				type="menu"
+				className="tlui-menu__submenu__trigger"
+				label={label}
+				icon="chevron-right"
+			/>
+		</DropdownMenu.SubTrigger>
+	)
+}
+
+/** @public */
+export function SubContent({
+	alignOffset = 0,
+	sideOffset = 5,
+	children,
+}: {
+	alignOffset?: number
+	sideOffset?: number
+	children: any
+}) {
+	const container = useContainer()
+	return (
+		<DropdownMenu.Portal container={container}>
+			<DropdownMenu.SubContent
+				className="tlui-menu tlui-menu__submenu__content"
+				alignOffset={alignOffset}
+				sideOffset={sideOffset}
+				collisionPadding={4}
+			>
+				{children}
+			</DropdownMenu.SubContent>
+		</DropdownMenu.Portal>
+	)
+}
+
+/** @public */
+export function Group({
+	children,
+	size = 'medium',
+}: {
+	children: any
+	size?: 'tiny' | 'small' | 'medium' | 'wide'
+}) {
+	return (
+		<DropdownMenu.Group dir="ltr" className="tlui-menu__group" data-size={size}>
+			{children}
+		</DropdownMenu.Group>
+	)
+}
+
+/** @public */
+export function Indicator() {
+	return (
+		<DropdownMenu.ItemIndicator dir="ltr" asChild>
+			<Icon icon="check" />
+		</DropdownMenu.ItemIndicator>
+	)
+}
+
+/** @public */
+export interface DropdownMenuItemProps extends TLUiButtonProps {
+	noClose?: boolean
+}
+
+/** @public */
+export function Item({ noClose, ...props }: DropdownMenuItemProps) {
+	return (
+		<DropdownMenu.Item
+			dir="ltr"
+			asChild
+			onClick={noClose || props.isChecked !== undefined ? preventDefault : undefined}
+		>
+			<Button {...props} />
+		</DropdownMenu.Item>
+	)
+}
+
+/** @public */
+export interface DropdownMenuCheckboxItemProps {
+	checked?: boolean
+	onSelect?: (e: Event) => void
+	disabled?: boolean
+	title: string
+	children: any
+}
+
+/** @public */
+export function CheckboxItem({ children, onSelect, ...rest }: DropdownMenuCheckboxItemProps) {
+	return (
+		<DropdownMenu.CheckboxItem
+			dir="ltr"
+			className="tlui-button tlui-button__menu tlui-button__checkbox"
+			onSelect={(e) => {
+				onSelect?.(e)
+				preventDefault(e)
+			}}
+			{...rest}
+		>
+			<Icon small icon={rest.checked ? 'check' : 'checkbox-empty'} />
+			{children}
+		</DropdownMenu.CheckboxItem>
+	)
+}
+
+/** @public */
+export function RadioItem({ children, onSelect, ...rest }: DropdownMenuCheckboxItemProps) {
+	return (
+		<DropdownMenu.CheckboxItem
+			dir="ltr"
+			className="tlui-button tlui-button__menu tlui-button__checkbox"
+			onSelect={(e) => {
+				onSelect?.(e)
+				preventDefault(e)
+			}}
+			{...rest}
+		>
+			<div className="tlui-button__checkbox__indicator">
+				<DropdownMenu.ItemIndicator dir="ltr">
+					<Icon icon="check" small />
+				</DropdownMenu.ItemIndicator>
+			</div>
+			{children}
+		</DropdownMenu.CheckboxItem>
+	)
+}

package/src/lib/ui/components/primitives/Icon.tsx

@@ -0,0 +1,55 @@
+import classNames from 'classnames'
+import { memo, useLayoutEffect, useRef } from 'react'
+import { useAssetUrls } from '../../hooks/useAssetUrls'
+import { TLUiIconType } from '../../icon-types'
+
+/** @public */
+export interface TLUiIconProps extends React.HTMLProps<HTMLDivElement> {
+	icon: TLUiIconType | Exclude<string, TLUiIconType>
+	small?: boolean
+	color?: string
+	children?: undefined
+	invertIcon?: boolean
+	crossOrigin?: 'anonymous' | 'use-credentials'
+}
+
+/** @public */
+export const Icon = memo(function Icon({
+	small,
+	invertIcon,
+	icon,
+	color,
+	className,
+	...props
+}: TLUiIconProps) {
+	const assetUrls = useAssetUrls()
+	const asset = assetUrls.icons[icon as TLUiIconType] ?? assetUrls.icons['question-mark-circle']
+	const ref = useRef<HTMLDivElement>(null)
+
+	useLayoutEffect(() => {
+		if (!asset) {
+			console.error(`Icon not found: ${icon}. Add it to the assetUrls.icons object.`)
+		}
+
+		if (ref?.current) {
+			// HACK: Fix for <https://linear.app/tldraw/issue/TLD-1700/dragging-around-with-the-handtool-makes-lots-of-requests-for-icons>
+			// It seems that passing `WebkitMask` to react will cause a render on each call, no idea why... but this appears to be the fix.
+			// @ts-ignore
+			// eslint-disable-next-line deprecation/deprecation
+			ref.current.style.webkitMask = `url(${asset}) center 100% / 100% no-repeat`
+		}
+	}, [ref, asset, icon])
+
+	return (
+		<div
+			{...props}
+			ref={ref}
+			className={classNames('tlui-icon', { 'tlui-icon__small': small }, className)}
+			style={{
+				color,
+				mask: `url(${asset}) center 100% / 100% no-repeat`,
+				transform: invertIcon ? 'scale(-1, 1)' : undefined,
+			}}
+		/>
+	)
+})

package/src/lib/ui/components/primitives/Input.tsx

@@ -0,0 +1,165 @@
+import { stopEventPropagation, useEditor } from '@bigbluebutton/editor'
+import classNames from 'classnames'
+import * as React from 'react'
+import { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'
+import { useTranslation } from '../../hooks/useTranslation/useTranslation'
+import { TLUiIconType } from '../../icon-types'
+import { Icon } from './Icon'
+
+/** @public */
+export interface TLUiInputProps {
+	disabled?: boolean
+	label?: TLUiTranslationKey | Exclude<string, TLUiTranslationKey>
+	icon?: TLUiIconType | Exclude<string, TLUiIconType>
+	iconLeft?: TLUiIconType | Exclude<string, TLUiIconType>
+	autofocus?: boolean
+	autoselect?: boolean
+	children?: any
+	defaultValue?: string
+	placeholder?: string
+	onComplete?: (value: string) => void
+	onValueChange?: (value: string) => void
+	onCancel?: (value: string) => void
+	onBlur?: (value: string) => void
+	className?: string
+	/**
+	 * Usually on iOS when you focus an input, the browser will adjust the viewport to bring the input
+	 * into view. Sometimes this doesn't work properly though - for example, if the input is newly
+	 * created, iOS seems to have a hard time adjusting the viewport for it. This prop allows you to
+	 * opt-in to some extra code to manually bring the input into view when the visual viewport of the
+	 * browser changes, but we don't want to use it everywhere because generally the native behavior
+	 * looks nicer in scenarios where it's sufficient.
+	 */
+	shouldManuallyMaintainScrollPositionWhenFocused?: boolean
+	value?: string
+}
+
+/** @public */
+export const Input = React.forwardRef<HTMLInputElement, TLUiInputProps>(function Input(
+	{
+		className,
+		label,
+		icon,
+		iconLeft,
+		autoselect = false,
+		autofocus = false,
+		defaultValue,
+		placeholder,
+		onComplete,
+		onValueChange,
+		onCancel,
+		onBlur,
+		shouldManuallyMaintainScrollPositionWhenFocused = false,
+		children,
+		value,
+	},
+	ref
+) {
+	const editor = useEditor()
+	const rInputRef = React.useRef<HTMLInputElement>(null)
+
+	// combine rInputRef and ref
+	React.useImperativeHandle(ref, () => rInputRef.current as HTMLInputElement)
+
+	const msg = useTranslation()
+	const rInitialValue = React.useRef<string>(defaultValue ?? '')
+	const rCurrentValue = React.useRef<string>(defaultValue ?? '')
+
+	const [isFocused, setIsFocused] = React.useState(false)
+	const handleFocus = React.useCallback(
+		(e: React.FocusEvent<HTMLInputElement>) => {
+			setIsFocused(true)
+			const elm = e.currentTarget as HTMLInputElement
+			rCurrentValue.current = elm.value
+			requestAnimationFrame(() => {
+				if (autoselect) {
+					elm.select()
+				}
+			})
+		},
+		[autoselect]
+	)
+
+	const handleChange = React.useCallback(
+		(e: React.ChangeEvent<HTMLInputElement>) => {
+			const value = e.currentTarget.value
+			rCurrentValue.current = value
+			onValueChange?.(value)
+		},
+		[onValueChange]
+	)
+
+	const handleKeyUp = React.useCallback(
+		(e: React.KeyboardEvent<HTMLInputElement>) => {
+			switch (e.key) {
+				case 'Enter': {
+					e.currentTarget.blur()
+					stopEventPropagation(e)
+					onComplete?.(e.currentTarget.value)
+					break
+				}
+				case 'Escape': {
+					e.currentTarget.value = rInitialValue.current
+					e.currentTarget.blur()
+					stopEventPropagation(e)
+					onCancel?.(e.currentTarget.value)
+					break
+				}
+			}
+		},
+		[onComplete, onCancel]
+	)
+
+	const handleBlur = React.useCallback(
+		(e: React.FocusEvent<HTMLInputElement>) => {
+			setIsFocused(false)
+			const value = e.currentTarget.value
+			onBlur?.(value)
+		},
+		[onBlur]
+	)
+
+	React.useEffect(() => {
+		if (!editor.environment.isIos) return
+
+		const visualViewport = window.visualViewport
+		if (isFocused && shouldManuallyMaintainScrollPositionWhenFocused && visualViewport) {
+			const onViewportChange = () => {
+				rInputRef.current?.scrollIntoView({ block: 'center' })
+			}
+			visualViewport.addEventListener('resize', onViewportChange)
+			visualViewport.addEventListener('scroll', onViewportChange)
+
+			requestAnimationFrame(() => {
+				rInputRef.current?.scrollIntoView({ block: 'center' })
+			})
+
+			return () => {
+				visualViewport.removeEventListener('resize', onViewportChange)
+				visualViewport.removeEventListener('scroll', onViewportChange)
+			}
+		}
+	}, [editor, isFocused, shouldManuallyMaintainScrollPositionWhenFocused])
+
+	return (
+		<div draggable={false} className="tlui-input__wrapper">
+			{children}
+			{label && <label>{msg(label)}</label>}
+			{iconLeft && <Icon icon={iconLeft} className="tlui-icon-left" small />}
+			<input
+				ref={rInputRef}
+				className={classNames('tlui-input', className)}
+				type="text"
+				defaultValue={defaultValue}
+				onKeyUp={handleKeyUp}
+				onChange={handleChange}
+				onFocus={handleFocus}
+				onBlur={handleBlur}
+				autoFocus={autofocus}
+				placeholder={placeholder}
+				value={value}
+			/>
+			{icon && <Icon icon={icon} small={!!label} />}
+		</div>
+	)
+})

package/src/lib/ui/components/primitives/Kbd.tsx

@@ -0,0 +1,17 @@
+import { kbd } from './shared'
+
+/** @internal */
+export interface KbdProps {
+	children: string
+}
+
+/** @internal */
+export function Kbd({ children }: KbdProps) {
+	return (
+		<kbd className="tlui-kbd">
+			{kbd(children).map((k, i) => (
+				<span key={i}>{k}</span>
+			))}
+		</kbd>
+	)
+}

package/src/lib/ui/components/primitives/Popover.tsx

@@ -0,0 +1,61 @@
+import { useContainer } from '@bigbluebutton/editor'
+import * as PopoverPrimitive from '@radix-ui/react-popover'
+import React, { FC } from 'react'
+import { useMenuIsOpen } from '../../hooks/useMenuIsOpen'
+
+type PopoverProps = {
+	id: string
+	open?: boolean
+	children: React.ReactNode
+	onOpenChange?: (isOpen: boolean) => void
+}
+
+export const Popover: FC<PopoverProps> = ({ id, children, onOpenChange, open }) => {
+	const [isOpen, handleOpenChange] = useMenuIsOpen(id, onOpenChange)
+
+	return (
+		<PopoverPrimitive.Root
+			onOpenChange={handleOpenChange}
+			open={open || isOpen /* allow debugging */}
+		>
+			<div className="tlui-popover">{children}</div>
+		</PopoverPrimitive.Root>
+	)
+}
+
+export const PopoverTrigger: FC<{
+	children: React.ReactNode
+	disabled?: boolean
+	className?: string
+	'data-testid'?: string
+}> = ({ children, disabled, 'data-testid': testId }) => {
+	return (
+		<PopoverPrimitive.Trigger data-testid={testId} disabled={disabled} asChild dir="ltr">
+			{children}
+		</PopoverPrimitive.Trigger>
+	)
+}
+export const PopoverContent: FC<{
+	children: React.ReactNode
+	side: 'top' | 'bottom' | 'left' | 'right'
+	align?: 'start' | 'center' | 'end'
+	alignOffset?: number
+	sideOffset?: number
+}> = ({ side, children, align = 'center', sideOffset = 8, alignOffset = 0 }) => {
+	const container = useContainer()
+	return (
+		<PopoverPrimitive.Portal container={container}>
+			<PopoverPrimitive.Content
+				className="tlui-popover__content"
+				side={side}
+				sideOffset={sideOffset}
+				align={align}
+				alignOffset={alignOffset}
+				dir="ltr"
+			>
+				{children}
+				{/* <StyledArrow /> */}
+			</PopoverPrimitive.Content>
+		</PopoverPrimitive.Portal>
+	)
+}

package/src/lib/ui/components/primitives/Slider.tsx

@@ -0,0 +1,62 @@
+import { useEditor } from '@bigbluebutton/editor'
+import { Range, Root, Thumb, Track } from '@radix-ui/react-slider'
+import { memo, useCallback } from 'react'
+import { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'
+import { useTranslation } from '../../hooks/useTranslation/useTranslation'
+
+/** @internal */
+export interface SliderProps {
+	steps: number
+	value: number | null
+	label: string
+	title: string
+	onValueChange: (value: number, emphemeral: boolean) => void
+	'data-testid'?: string
+}
+
+/** @internal */
+export const Slider = memo(function Slider(props: SliderProps) {
+	const { title, steps, value, label, onValueChange } = props
+	const editor = useEditor()
+	const msg = useTranslation()
+
+	const handleValueChange = useCallback(
+		(value: number[]) => {
+			onValueChange(value[0], true)
+		},
+		[onValueChange]
+	)
+
+	const handlePointerDown = useCallback(() => {
+		editor.mark('click slider')
+	}, [editor])
+
+	const handlePointerUp = useCallback(() => {
+		if (!value) return
+		onValueChange(value, false)
+	}, [value, onValueChange])
+
+	return (
+		<div className="tlui-slider__container">
+			<Root
+				data-testid={props['data-testid']}
+				className="tlui-slider"
+				area-label="Opacity"
+				dir="ltr"
+				min={0}
+				max={steps}
+				step={1}
+				value={value ? [value] : undefined}
+				onPointerDown={handlePointerDown}
+				onValueChange={handleValueChange}
+				onPointerUp={handlePointerUp}
+				title={title + ' — ' + msg(label as TLUiTranslationKey)}
+			>
+				<Track className="tlui-slider__track" dir="ltr">
+					{value !== null && <Range className="tlui-slider__range" dir="ltr" />}
+				</Track>
+				{value !== null && <Thumb className="tlui-slider__thumb" dir="ltr" />}
+			</Root>
+		</div>
+	)
+})

package/src/lib/ui/components/primitives/shared.ts

@@ -0,0 +1,40 @@
+/** @internal */
+export function toStartCase(str: string) {
+	return str
+		.split(' ')
+		.map((s) => s.charAt(0).toUpperCase() + s.slice(1))
+		.join(' ')
+}
+
+const isDarwin =
+	typeof window === 'undefined'
+		? false
+		: window.navigator.userAgent.toLowerCase().indexOf('mac') > -1
+const cmdKey = isDarwin ? '⌘' : 'Ctrl'
+const altKey = isDarwin ? '⌥' : 'Alt'
+
+/** @internal */
+export function kbd(str: string) {
+	return str
+		.split(',')[0]
+		.split('')
+		.map((sub) => {
+			const subStr = sub.replace(/\$/g, cmdKey).replace(/\?/g, altKey).replace(/!/g, '⇧')
+			return subStr[0].toUpperCase() + subStr.slice(1)
+		})
+}
+
+/** @internal */
+export function kbdStr(str: string) {
+	return (
+		'— ' +
+		str
+			.split(',')[0]
+			.split('')
+			.map((sub) => {
+				const subStr = sub.replace(/\$/g, cmdKey).replace(/\?/g, altKey).replace(/!/g, '⇧')
+				return subStr[0].toUpperCase() + subStr.slice(1)
+			})
+			.join(' ')
+	)
+}

package/src/lib/ui/constants.ts

@@ -0,0 +1,2 @@
+// Breakpoints for portrait
+export const PORTRAIT_BREAKPOINTS = [0, 390, 428, 468, 580, 640, 840, 1023]