tldraw 3.16.0-internal.51e99e128bd4 → 3.16.0-internal.a478398270c6

package/src/lib/ui/components/Toolbar/OverflowingToolbar.tsx

@@ -1,7 +1,5 @@
 import {
 	activeElementShouldCaptureKeys,
-	assert,
-	modulate,
 	preventDefault,
 	tlmenus,
 	useEditor,
@@ -9,7 +7,7 @@ import {
 	useUniqueSafeId,
 } from '@tldraw/editor'
 import classNames from 'classnames'
-import { createContext, useEffect, useLayoutEffect, useRef, useState } from 'react'
+import { createContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
 import { PORTRAIT_BREAKPOINT } from '../../constants'
 import { useBreakpoint } from '../../context/breakpoints'
 import { areShortcutsDisabled } from '../../hooks/useKeyboardShortcuts'
@@ -22,7 +20,6 @@ import {
 	TldrawUiPopoverTrigger,
 } from '../primitives/TldrawUiPopover'
 import { TldrawUiToolbar, TldrawUiToolbarButton } from '../primitives/TldrawUiToolbar'
-import { TldrawUiColumn, TldrawUiRow } from '../primitives/layout'
 import { TldrawUiMenuContextProvider } from '../primitives/menus/TldrawUiMenuContext'
 
 export const IsInOverflowContext = createContext(false)
@@ -43,24 +40,10 @@ const NUMBERED_SHORTCUT_KEYS: Record<string, number> = {
 /** @public */
 export interface OverflowingToolbarProps {
 	children: React.ReactNode
-	orientation: 'horizontal' | 'vertical'
-	sizingParentClassName: string
-	minItems: number
-	minSizePx: number
-	maxItems: number
-	maxSizePx: number
 }
 
 /** @public @react */
-export function OverflowingToolbar({
-	children,
-	orientation,
-	sizingParentClassName,
-	minItems,
-	minSizePx,
-	maxItems,
-	maxSizePx,
-}: OverflowingToolbarProps) {
+export function OverflowingToolbar({ children }: OverflowingToolbarProps) {
 	const editor = useEditor()
 	const id = useUniqueSafeId()
 	const breakpoint = useBreakpoint()
@@ -68,165 +51,66 @@ export function OverflowingToolbar({
 	const rButtons = useRef<HTMLElement[]>([])
 	const [isOpen, setIsOpen] = useState(false)
 
-	const mainToolsRef = useRef<HTMLDivElement>(null)
+	const overflowIndex = Math.min(8, 5 + breakpoint)
 
-	// we have to use state instead of a ref here so that we get
-	// an update when the overflow popover mounts / unmounts
-	const [overflowTools, setOverflowTools] = useState<HTMLDivElement | null>(null)
+	const [totalItems, setTotalItems] = useState(0)
+	const mainToolsRef = useRef<HTMLDivElement>(null)
 	const [lastActiveOverflowItem, setLastActiveOverflowItem] = useState<string | null>(null)
-	const [shouldShowOverflow, setShouldShowOverflow] = useState(false)
+
+	const css = useMemo(() => {
+		const activeCss = lastActiveOverflowItem ? `:not([data-value="${lastActiveOverflowItem}"])` : ''
+
+		return `
+			#${id}_main > *:nth-child(n + ${overflowIndex + (lastActiveOverflowItem ? 1 : 2)})${activeCss} {
+				display: none;
+			}
+			#${id}_more > *:nth-child(-n + ${overflowIndex}) {
+				display: none;
+			}
+			#${id}_more > *:nth-child(-n + ${overflowIndex + 4}) {
+				margin-top: 0;
+			}
+        `
+	}, [lastActiveOverflowItem, id, overflowIndex])
 
 	const onDomUpdate = useEvent(() => {
 		if (!mainToolsRef.current) return
 
-		// whenever we get an update, we need to re-calculate the number of items to show and update
-		// the component accordingly.
-		const sizeProp = orientation === 'horizontal' ? 'offsetWidth' : 'offsetHeight'
+		const children = Array.from(mainToolsRef.current.children)
+		setTotalItems(children.length)
 
-		// toolbars can contain both single items and groups. we need to keep track of both.
-		type Items = (
-			| { type: 'item'; element: HTMLElement }
-			| { type: 'group'; items: Items; element: HTMLElement }
-		)[]
-
-		// walk through the dom and collect items so we can calculate what to show/hide
-		const mainItems = collectItems(mainToolsRef.current.children)
-		const overflowItems = overflowTools ? collectItems(overflowTools.children) : null
-		function collectItems(collection: HTMLCollection) {
-			const items: Items = []
-			for (const child of collection) {
-				if (child.classList.contains('tlui-main-toolbar__group')) {
-					items.push({
-						type: 'group',
-						items: collectItems(child.children),
-						element: child as HTMLElement,
-					})
-				} else {
-					items.push({ type: 'item', element: child as HTMLElement })
-				}
-			}
-
-			return items
+		// If the last active overflow item is no longer in the overflow, clear it
+		const lastActiveElementIdx = children.findIndex(
+			(el) => el.getAttribute('data-value') === lastActiveOverflowItem
+		)
+		if (lastActiveElementIdx <= overflowIndex) {
+			setLastActiveOverflowItem(null)
 		}
 
-		// the number of items to show is based on the space available to the toolbar.
-		const sizingParent = findParentWithClassName(mainToolsRef.current, sizingParentClassName)
-		const size = sizingParent[sizeProp]
-		const itemsToShow = Math.floor(
-			modulate(size, [minSizePx, maxSizePx], [minItems, maxItems], true)
+		// But if there's a new active item...
+		const activeElementIdx = Array.from(mainToolsRef.current.children).findIndex(
+			(el) => el.getAttribute('aria-pressed') === 'true'
 		)
+		if (activeElementIdx === -1) return
 
-		// now we know how many items to show, we need to walk through the items we found and show /
-		// hide them accordingly. We need to keep track of:
-		// the number of item's we've shown in the main content so far
-		let mainItemCount = 0
-		// the item that is currently active in the overflow content (if any)
-		let newActiveOverflowItem: string | null = null
-		// whether the last active overflow item is actually still in the overflow content
-		let shouldInvalidateLastActiveOverflowItem = false
-		// the buttons visible in the main content
-		const numberedButtons: HTMLButtonElement[] = []
-		function visitItems(
-			mainItems: Items,
-			overflowItems: Items | null
-		): {
-			// for each group of items we visit, we need to know whether we showed anything in
-			// either section
-			didShowAnyInMain: boolean
-			didShowAnyInOverflow: boolean
-		} {
-			if (overflowItems) assert(mainItems.length === overflowItems.length)
-
-			let didShowAnyInMain = false
-			let didShowAnyInOverflow = false
-
-			for (let i = 0; i < mainItems.length; i++) {
-				const mainItem = mainItems[i]
-				const overflowItem = overflowItems?.[i]
-
-				if (mainItem.type === 'item') {
-					const isLastActiveOverflowItem =
-						mainItem.element.getAttribute('data-value') === lastActiveOverflowItem
-
-					// for single items, we show them in main if we have space, or if they're the
-					// last-used item from the overflow.
-					let shouldShowInMain
-					if (lastActiveOverflowItem) {
-						shouldShowInMain = mainItemCount < itemsToShow || isLastActiveOverflowItem
-					} else {
-						// we use <= here because if there is no last active overflow item, we want
-						// to show at least one item in the main toolbar.
-						shouldShowInMain = mainItemCount <= itemsToShow
-					}
-					const shouldShowInOverflow = mainItemCount >= itemsToShow
-
-					didShowAnyInMain ||= shouldShowInMain
-					didShowAnyInOverflow ||= shouldShowInOverflow
+		// ...and it's in the overflow, set it as the last active overflow item
+		if (activeElementIdx >= overflowIndex) {
+			setLastActiveOverflowItem(children[activeElementIdx].getAttribute('data-value'))
+		}
 
-					setAttribute(
-						mainItem.element,
-						'data-toolbar-visible',
-						shouldShowInMain ? 'true' : 'false'
-					)
-					if (overflowItem) {
-						assert(overflowItem.type === 'item')
-						setAttribute(
-							overflowItem.element,
-							'data-toolbar-visible',
-							shouldShowInOverflow ? 'true' : 'false'
-						)
-					}
-					if (shouldShowInOverflow && mainItem.element.getAttribute('aria-pressed') === 'true') {
-						newActiveOverflowItem = mainItem.element.getAttribute('data-value')
-					}
-					if (shouldShowInMain && mainItem.element.tagName === 'BUTTON') {
-						numberedButtons.push(mainItem.element as HTMLButtonElement)
-					}
-					if (!shouldShowInOverflow && isLastActiveOverflowItem) {
-						shouldInvalidateLastActiveOverflowItem = true
-					}
-					mainItemCount++
-				} else {
-					// for groups, we show them in main if we have space, or if they're the
-					// last-used item from the overflow.
-					let result, overflowGroup
-					if (overflowItem) {
-						assert(overflowItem.type === 'group')
-						overflowGroup = overflowItem
-						result = visitItems(mainItem.items, overflowGroup.items)
-					} else {
-						result = visitItems(mainItem.items, null)
-					}
+		// Save the buttons that are actually visible
+		rButtons.current = Array.from(mainToolsRef.current?.children ?? []).filter(
+			(el): el is HTMLElement => {
+				// only count html elements...
+				if (!(el instanceof HTMLElement)) return false
 
-					didShowAnyInMain ||= result.didShowAnyInMain
-					didShowAnyInOverflow ||= result.didShowAnyInOverflow
+				// ...that are buttons...
+				if (el.tagName.toLowerCase() !== 'button') return false
 
-					setAttribute(
-						mainItem.element,
-						'data-toolbar-visible',
-						result.didShowAnyInMain ? 'true' : 'false'
-					)
-					if (overflowGroup) {
-						setAttribute(
-							overflowGroup.element,
-							'data-toolbar-visible',
-							result.didShowAnyInOverflow ? 'true' : 'false'
-						)
-					}
-				}
+				// ...that are actually visible
+				return !!(el.offsetWidth || el.offsetHeight)
 			}
-			return { didShowAnyInMain, didShowAnyInOverflow }
-		}
-
-		const { didShowAnyInOverflow } = visitItems(mainItems, overflowItems)
-		setShouldShowOverflow(didShowAnyInOverflow)
-		if (newActiveOverflowItem) {
-			setLastActiveOverflowItem(newActiveOverflowItem)
-		} else if (shouldInvalidateLastActiveOverflowItem) {
-			setLastActiveOverflowItem(null)
-		}
-
-		rButtons.current = numberedButtons
+		)
 	})
 
 	useLayoutEffect(() => {
@@ -240,31 +124,20 @@ export function OverflowingToolbar({
 		mutationObserver.observe(mainToolsRef.current, {
 			childList: true,
 			subtree: true,
-			attributes: true,
-			characterData: true,
+			attributeFilter: ['data-value', 'aria-pressed'],
 		})
 
-		const sizingParent = findParentWithClassName(mainToolsRef.current, sizingParentClassName)
-		const resizeObserver = new ResizeObserver(onDomUpdate)
-		resizeObserver.observe(sizingParent)
-
 		return () => {
 			mutationObserver.disconnect()
-			resizeObserver.disconnect()
 		}
-	}, [onDomUpdate, sizingParentClassName])
+	}, [onDomUpdate])
 
 	useEffect(() => {
 		if (!editor.options.enableToolbarKeyboardShortcuts) return
 
 		function handleKeyDown(event: KeyboardEvent) {
-			if (
-				areShortcutsDisabled(editor) ||
-				activeElementShouldCaptureKeys(true /* allow buttons */)
-			) {
+			if (areShortcutsDisabled(editor) || activeElementShouldCaptureKeys(true /* allow buttons */))
 				return
-			}
-
 			// no accelerator keys
 			if (event.ctrlKey || event.metaKey || event.altKey || event.shiftKey) return
 			const index = NUMBERED_SHORTCUT_KEYS[event.key]
@@ -281,45 +154,37 @@ export function OverflowingToolbar({
 	}, [editor])
 
 	const popoverId = 'toolbar overflow'
-
-	const Layout = orientation === 'horizontal' ? TldrawUiRow : TldrawUiColumn
 	return (
 		<>
+			<style nonce={editor.options.nonce}>{css}</style>
 			<TldrawUiToolbar
-				orientation={orientation}
-				className={classNames('tlui-main-toolbar__tools', {
-					'tlui-main-toolbar__tools__mobile': breakpoint < PORTRAIT_BREAKPOINT.TABLET_SM,
+				className={classNames('tlui-toolbar__tools', {
+					'tlui-toolbar__tools__mobile': breakpoint < PORTRAIT_BREAKPOINT.TABLET_SM,
 				})}
 				label={msg('tool-panel.title')}
 			>
-				<Layout id={`${id}_main`} ref={mainToolsRef}>
+				<div id={`${id}_main`} ref={mainToolsRef} className="tlui-toolbar__tools__list">
 					<TldrawUiMenuContextProvider type="toolbar" sourceId="toolbar">
 						{children}
 					</TldrawUiMenuContextProvider>
-				</Layout>
-				{shouldShowOverflow && (
+				</div>
+				{/* There is a +1 because if the menu is just one item, it's not necessary. */}
+				{totalItems > overflowIndex + 1 && (
 					<IsInOverflowContext.Provider value={true}>
 						<TldrawUiPopover id={popoverId} open={isOpen} onOpenChange={setIsOpen}>
 							<TldrawUiPopoverTrigger>
 								<TldrawUiToolbarButton
 									title={msg('tool-panel.more')}
 									type="tool"
-									className="tlui-main-toolbar__overflow"
+									className="tlui-toolbar__overflow"
 									data-testid="tools.more-button"
 								>
-									<TldrawUiButtonIcon
-										icon={orientation === 'horizontal' ? 'chevron-up' : 'chevron-right'}
-									/>
+									<TldrawUiButtonIcon icon="chevron-up" />
 								</TldrawUiToolbarButton>
 							</TldrawUiPopoverTrigger>
-							<TldrawUiPopoverContent
-								side={orientation === 'horizontal' ? 'top' : 'right'}
-								align={orientation === 'horizontal' ? 'center' : 'end'}
-							>
+							<TldrawUiPopoverContent side="top" align="center">
 								<TldrawUiToolbar
-									orientation="grid"
-									className="tlui-main-toolbar__overflow-content"
-									ref={setOverflowTools}
+									className="tlui-buttons__grid"
 									data-testid="tools.more-content"
 									label={msg('tool-panel.more')}
 									id={`${id}_more`}
@@ -350,19 +215,3 @@ export const isActiveTLUiToolItem = (
 		? activeToolId === 'geo' && geoState === item.meta?.geo
 		: activeToolId === item.id
 }
-
-function findParentWithClassName(startingElement: HTMLElement, className: string): HTMLElement {
-	let element: HTMLElement | null = startingElement
-	while (element) {
-		if (element.classList.contains(className)) {
-			return element
-		}
-		element = element.parentElement
-	}
-	throw new Error('Could not find parent with class name ' + className)
-}
-
-function setAttribute(element: HTMLElement, name: string, value: string) {
-	if (element.getAttribute(name) === value) return
-	element.setAttribute(name, value)
-}

package/src/lib/ui/components/Toolbar/ToggleToolLockedButton.tsx

@@ -5,14 +5,11 @@ import { useBreakpoint } from '../../context/breakpoints'
 import { useTranslation } from '../../hooks/useTranslation/useTranslation'
 import { TldrawUiButton } from '../primitives/Button/TldrawUiButton'
 import { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'
-import { TldrawUiTooltip } from '../primitives/TldrawUiTooltip'
 
-/** @public */
-export interface ToggleToolLockedButtonProps {
+interface ToggleToolLockedButtonProps {
 	activeToolId?: string
 }
 
-/** @public @react */
 export function ToggleToolLockedButton({ activeToolId }: ToggleToolLockedButtonProps) {
 	const editor = useEditor()
 	const breakpoint = useBreakpoint()
@@ -26,18 +23,16 @@ export function ToggleToolLockedButton({ activeToolId }: ToggleToolLockedButtonP
 	if (!activeToolId || !tool.isLockable) return null
 
 	return (
-		<TldrawUiTooltip content={msg('action.toggle-tool-lock')}>
-			<TldrawUiButton
-				type="normal"
-				title={msg('action.toggle-tool-lock')}
-				data-testid="tool-lock"
-				className={classNames('tlui-main-toolbar__lock-button', {
-					'tlui-main-toolbar__lock-button__mobile': breakpoint < PORTRAIT_BREAKPOINT.TABLET_SM,
-				})}
-				onClick={() => editor.updateInstanceState({ isToolLocked: !isToolLocked })}
-			>
-				<TldrawUiButtonIcon icon={isToolLocked ? 'lock' : 'unlock'} small />
-			</TldrawUiButton>
-		</TldrawUiTooltip>
+		<TldrawUiButton
+			type="normal"
+			title={msg('action.toggle-tool-lock')}
+			data-testid="tool-lock"
+			className={classNames('tlui-toolbar__lock-button', {
+				'tlui-toolbar__lock-button__mobile': breakpoint < PORTRAIT_BREAKPOINT.TABLET_SM,
+			})}
+			onClick={() => editor.updateInstanceState({ isToolLocked: !isToolLocked })}
+		>
+			<TldrawUiButtonIcon icon={isToolLocked ? 'lock' : 'unlock'} small />
+		</TldrawUiButton>
 	)
 }

package/src/lib/ui/components/menu-items.tsx

@@ -634,31 +634,6 @@ export function ToggleReduceMotionItem() {
 	)
 }
 
-/** @public @react */
-export function ToggleKeyboardShortcutsItem() {
-	const editor = useEditor()
-	const keyboardShortcuts = useValue(
-		'keyboardShortcuts',
-		() => editor.user.getAreKeyboardShortcutsEnabled(),
-		[editor]
-	)
-
-	return (
-		<TldrawUiMenuActionCheckboxItem
-			actionId="toggle-keyboard-shortcuts"
-			checked={keyboardShortcuts}
-		/>
-	)
-}
-
-/** @public @react */
-export function ToggleUiLabelsItem() {
-	const editor = useEditor()
-	const showUiLabels = useValue('showUiLabels', () => editor.user.getShowUiLabels(), [editor])
-
-	return <TldrawUiMenuActionCheckboxItem actionId="toggle-ui-labels" checked={showUiLabels} />
-}
-
 /** @public @react */
 export function ToggleDebugModeItem() {
 	const editor = useEditor()

package/src/lib/ui/components/primitives/Button/TldrawUiButtonIcon.tsx

@@ -1,8 +1,8 @@
-import { TldrawUiIcon, TLUiIconJsx } from '../TldrawUiIcon'
+import { TldrawUiIcon } from '../TldrawUiIcon'
 
 /** @public */
 export interface TLUiButtonIconProps {
-	icon: string | TLUiIconJsx
+	icon: string
 	small?: boolean
 	invertIcon?: boolean
 }

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

@@ -1,13 +1,13 @@
 import {
 	DefaultColorStyle,
-	getColorValue,
 	SharedStyle,
 	StyleProp,
 	TLDefaultColorStyle,
 	TLDefaultColorTheme,
 	useEditor,
 } from '@tldraw/editor'
-import { memo, ReactElement, useMemo, useRef } from 'react'
+import classNames from 'classnames'
+import { ReactElement, memo, useMemo, useRef } from 'react'
 import { StyleValuesForUi } from '../../../styles'
 import { PORTRAIT_BREAKPOINT } from '../../constants'
 import { useBreakpoint } from '../../context/breakpoints'
@@ -15,7 +15,6 @@ import { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKe
 import { useTranslation } from '../../hooks/useTranslation/useTranslation'
 import { TldrawUiButtonIcon } from './Button/TldrawUiButtonIcon'
 import { TldrawUiToolbarToggleGroup, TldrawUiToolbarToggleItem } from './TldrawUiToolbar'
-import { TldrawUiGrid, TldrawUiRow } from './layout'
 
 /** @public */
 export interface TLUiButtonPickerProps<T extends string> {
@@ -117,43 +116,39 @@ export const TldrawUiButtonPicker = memo(function TldrawUiButtonPicker<T extends
 		}
 	}, [editor, breakpoint, value, onHistoryMark, onValueChange, style])
 
-	const Wrapper = items.length > 4 ? TldrawUiGrid : TldrawUiRow
-
 	return (
-		<Wrapper asChild>
-			<TldrawUiToolbarToggleGroup
-				data-testid={`style.${uiType}`}
-				type="single"
-				value={value.type === 'shared' ? value.value : undefined}
-			>
-				{items.map((item) => {
-					const label = title + ' — ' + msg(`${uiType}-style.${item.value}` as TLUiTranslationKey)
-					return (
-						<TldrawUiToolbarToggleItem
-							type="icon"
-							key={item.value}
-							data-id={item.value}
-							data-testid={`style.${uiType}.${item.value}`}
-							aria-label={label}
-							value={item.value}
-							data-state={value.type === 'shared' && value.value === item.value ? 'on' : 'off'}
-							data-isactive={value.type === 'shared' && value.value === item.value}
-							title={label}
-							style={
-								style === (DefaultColorStyle as StyleProp<unknown>)
-									? { color: getColorValue(theme, item.value as TLDefaultColorStyle, 'solid') }
-									: undefined
-							}
-							onPointerEnter={handleButtonPointerEnter}
-							onPointerDown={handleButtonPointerDown}
-							onPointerUp={handleButtonPointerUp}
-							onClick={handleButtonClick}
-						>
-							<TldrawUiButtonIcon icon={item.icon} />
-						</TldrawUiToolbarToggleItem>
-					)
-				})}
-			</TldrawUiToolbarToggleGroup>
-		</Wrapper>
+		<TldrawUiToolbarToggleGroup
+			data-testid={`style.${uiType}`}
+			type="single"
+			className={classNames('tlui-buttons__grid')}
+		>
+			{items.map((item) => {
+				const label = title + ' — ' + msg(`${uiType}-style.${item.value}` as TLUiTranslationKey)
+				return (
+					<TldrawUiToolbarToggleItem
+						type="icon"
+						key={item.value}
+						data-id={item.value}
+						data-testid={`style.${uiType}.${item.value}`}
+						aria-label={label}
+						value={item.value}
+						data-isactive={value.type === 'shared' && value.value === item.value}
+						title={label}
+						className={classNames('tlui-button-grid__button')}
+						style={
+							style === (DefaultColorStyle as StyleProp<unknown>)
+								? { color: theme[item.value as TLDefaultColorStyle].solid }
+								: undefined
+						}
+						onPointerEnter={handleButtonPointerEnter}
+						onPointerDown={handleButtonPointerDown}
+						onPointerUp={handleButtonPointerUp}
+						onClick={handleButtonClick}
+					>
+						<TldrawUiButtonIcon icon={item.icon} />
+					</TldrawUiToolbarToggleItem>
+				)
+			})}
+		</TldrawUiToolbarToggleGroup>
 	)
 }) as <T extends string>(props: TLUiButtonPickerProps<T>) => ReactElement

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

@@ -172,7 +172,7 @@ export const TldrawUiContextualToolbar = ({
 			className={classNames('tlui-contextual-toolbar', className)}
 			onPointerDown={stopEventPropagation}
 		>
-			<TldrawUiToolbar orientation="horizontal" className="tlui-menu" label={label}>
+			<TldrawUiToolbar className="tlui-menu tlui-buttons__horizontal" label={label}>
 				{children}
 			</TldrawUiToolbar>
 		</div>

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

@@ -65,7 +65,7 @@ export interface TLUiDialogBodyProps {
 /** @public @react */
 export function TldrawUiDialogBody({ className, children, style }: TLUiDialogBodyProps) {
 	return (
-		<div className={classNames('tlui-dialog__body', className)} style={style} tabIndex={0}>
+		<div className={classNames('tlui-dialog__body', className)} style={style}>
 			{children}
 		</div>
 	)

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

@@ -1,14 +1,11 @@
 import classNames from 'classnames'
-import { cloneElement, memo, ReactElement, useLayoutEffect, useRef } from 'react'
+import { memo, useLayoutEffect, useRef } from 'react'
 import { useAssetUrls } from '../../context/asset-urls'
 import { TLUiIconType } from '../../icon-types'
 
-/** @public */
-export type TLUiIconJsx = ReactElement<React.HTMLAttributes<HTMLDivElement>>
-
 /** @public */
 export interface TLUiIconProps extends React.HTMLAttributes<HTMLDivElement> {
-	icon: TLUiIconType | Exclude<string, TLUiIconType> | TLUiIconJsx
+	icon: TLUiIconType | Exclude<string, TLUiIconType>
 	label: string
 	small?: boolean
 	color?: string
@@ -27,41 +24,6 @@ export const TldrawUiIcon = memo(function TldrawUiIcon({
 	className,
 	...props
 }: TLUiIconProps) {
-	if (typeof icon === 'string') {
-		return (
-			<TldrawUIIconInner
-				label={label}
-				small={small}
-				invertIcon={invertIcon}
-				icon={icon}
-				color={color}
-				className={className}
-				{...props}
-			/>
-		)
-	}
-
-	return cloneElement(icon, {
-		...props,
-		className: classNames({ 'tlui-icon__small': small }, className, icon.props.className),
-		'aria-label': label,
-		style: {
-			color,
-			transform: invertIcon ? 'scale(-1, 1)' : undefined,
-			...icon.props.style,
-		},
-	})
-})
-
-function TldrawUIIconInner({
-	label,
-	small,
-	invertIcon,
-	icon,
-	color,
-	className,
-	...props
-}: TLUiIconProps & { icon: TLUiIconType | Exclude<string, TLUiIconType> }) {
 	const assetUrls = useAssetUrls()
 	const asset = assetUrls.icons[icon as TLUiIconType] ?? assetUrls.icons['question-mark-circle']
 	const ref = useRef<HTMLDivElement>(null)
@@ -107,4 +69,4 @@ function TldrawUIIconInner({
 			}}
 		/>
 	)
-}
+})

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

@@ -1,5 +1,4 @@
 import { useContainer } from '@tldraw/editor'
-import classNames from 'classnames'
 import { Popover as _Popover } from 'radix-ui'
 import React from 'react'
 import { useMenuIsOpen } from '../../hooks/useMenuIsOpen'
@@ -10,16 +9,15 @@ export interface TLUiPopoverProps {
 	open?: boolean
 	children: React.ReactNode
 	onOpenChange?(isOpen: boolean): void
-	className?: string
 }
 
 /** @public @react */
-export function TldrawUiPopover({ id, children, onOpenChange, open, className }: TLUiPopoverProps) {
+export function TldrawUiPopover({ id, children, onOpenChange, open }: TLUiPopoverProps) {
 	const [isOpen, handleOpenChange] = useMenuIsOpen(id, onOpenChange)
 
 	return (
 		<_Popover.Root onOpenChange={handleOpenChange} open={open || isOpen /* allow debugging */}>
-			<div className={classNames('tlui-popover', className)}>{children}</div>
+			<div className="tlui-popover">{children}</div>
 		</_Popover.Root>
 	)
 }