tldraw 4.1.0-next.58b63dd1ac80 → 4.1.0-next.74327a60f18a

package/src/lib/ui/components/StylePanel/StylePanelButtonPicker.tsx

@@ -6,7 +6,7 @@ import {
 	TLDefaultColorStyle,
 	useEditor,
 } from '@tldraw/editor'
-import { memo, useMemo, useRef } from 'react'
+import { memo, ReactElement, useMemo, useRef } from 'react'
 import { useDefaultColorTheme } from '../../../shapes/shared/useDefaultColorTheme'
 import { StyleValuesForUi } from '../../../styles'
 import { PORTRAIT_BREAKPOINT } from '../../constants'
@@ -34,19 +34,8 @@ export interface StylePanelButtonPickerProps<T extends string> {
 	onHistoryMark?(id: string): void
 }
 
-function StylePanelButtonPickerInner<T extends string>(props: StylePanelButtonPickerProps<T>) {
-	const { enhancedA11yMode } = useStylePanelContext()
-	return (
-		<>
-			{enhancedA11yMode && <StylePanelSubheading>{props.title}</StylePanelSubheading>}
-			<TldrawUiToolbar label={props.title}>
-				<StylePanelButtonPickerInline {...props} />
-			</TldrawUiToolbar>
-		</>
-	)
-}
-
-function StylePanelButtonPickerInlineInner<T extends string>(
+/** @public */
+export const StylePanelButtonPicker = memo(function StylePanelButtonPicker<T extends string>(
 	props: StylePanelButtonPickerProps<T>
 ) {
 	const ctx = useStylePanelContext()
@@ -137,60 +126,54 @@ function StylePanelButtonPickerInlineInner<T extends string>(
 	const Layout = items.length > 4 ? TldrawUiGrid : TldrawUiRow
 
 	return (
-		<TldrawUiToolbarToggleGroup
-			data-testid={`style.${uiType}`}
-			type="single"
-			value={value.type === 'shared' ? value.value : null}
-			asChild
-		>
-			<Layout>
-				{items.map((item) => {
-					const isActive = value.type === 'shared' && value.value === item.value
-					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 + (isActive ? ` (${msg('style-panel.selected')})` : '')}
-							tooltip={
-								<>
-									<div>{label}</div>
-									{isActive ? <div>({msg('style-panel.selected')})</div> : null}
-								</>
-							}
-							value={item.value}
-							data-state={value.type === 'shared' && value.value === item.value ? 'on' : 'off'}
-							data-isactive={isActive}
-							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>
-					)
-				})}
-			</Layout>
-		</TldrawUiToolbarToggleGroup>
+		<>
+			{ctx.enhancedA11yMode && <StylePanelSubheading>{title}</StylePanelSubheading>}
+			<TldrawUiToolbar label={title}>
+				<TldrawUiToolbarToggleGroup
+					data-testid={`style.${uiType}`}
+					type="single"
+					value={value.type === 'shared' ? value.value : undefined}
+					asChild
+				>
+					<Layout>
+						{items.map((item) => {
+							const isActive = value.type === 'shared' && value.value === item.value
+							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 + (isActive ? ` (${msg('style-panel.selected')})` : '')}
+									tooltip={
+										<>
+											<div>{label}</div>
+											{isActive ? <div>({msg('style-panel.selected')})</div> : null}
+										</>
+									}
+									value={item.value}
+									data-state={value.type === 'shared' && value.value === item.value ? 'on' : 'off'}
+									data-isactive={isActive}
+									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>
+							)
+						})}
+					</Layout>
+				</TldrawUiToolbarToggleGroup>
+			</TldrawUiToolbar>
+		</>
 	)
-}
-
-/** @public @react */
-export const StylePanelButtonPicker = memo(StylePanelButtonPickerInner) as <T extends string>(
-	props: StylePanelButtonPickerProps<T>
-) => React.JSX.Element
-
-/** @public @react*/
-export const StylePanelButtonPickerInline = memo(StylePanelButtonPickerInlineInner) as <
-	T extends string,
->(
-	props: StylePanelButtonPickerProps<T>
-) => React.JSX.Element
+}) as <T extends string>(props: StylePanelButtonPickerProps<T>) => ReactElement

package/src/lib/ui/components/StylePanel/StylePanelDoubleDropdownPicker.tsx

@@ -29,27 +29,12 @@ export interface StylePanelDoubleDropdownPickerProps<T extends string> {
 	onValueChange?(style: StyleProp<T>, value: T): void
 }
 
-function StylePanelDoubleDropdownPickerInner<T extends string>(
-	props: StylePanelDoubleDropdownPickerProps<T>
-) {
-	const msg = useTranslation()
-	return (
-		<div className="tlui-style-panel__double-select-picker">
-			<div title={msg(props.label)} className="tlui-style-panel__double-select-picker-label">
-				{msg(props.label)}
-			</div>
-			<TldrawUiToolbar orientation="horizontal" label={msg(props.label)}>
-				<StylePanelDoubleDropdownPickerInline {...props} />
-			</TldrawUiToolbar>
-		</div>
-	)
-}
-
-function StylePanelDoubleDropdownPickerInlineInner<T extends string>(
+function DoubleDropdownPickerInner<T extends string>(
 	props: StylePanelDoubleDropdownPickerProps<T>
 ) {
 	const ctx = useStylePanelContext()
 	const {
+		label,
 		uiTypeA,
 		uiTypeB,
 		labelA,
@@ -85,100 +70,100 @@ function StylePanelDoubleDropdownPickerInlineInner<T extends string>(
 	const idA = `style panel ${uiTypeA} A`
 	const idB = `style panel ${uiTypeB} B`
 	return (
-		<>
-			<TldrawUiPopover id={idA} open={isOpenA} onOpenChange={setIsOpenA}>
-				<TldrawUiPopoverTrigger>
-					<TldrawUiToolbarButton
-						type="icon"
-						data-testid={`style.${uiTypeA}`}
-						title={
-							msg(labelA) +
-							' — ' +
-							(valueA === null || valueA.type === 'mixed'
-								? msg('style-panel.mixed')
-								: msg(`${uiTypeA}-style.${valueA.value}` as TLUiTranslationKey))
-						}
-					>
-						<TldrawUiButtonIcon icon={iconA} small invertIcon />
-					</TldrawUiToolbarButton>
-				</TldrawUiPopoverTrigger>
-				<TldrawUiPopoverContent side="left" align="center" sideOffset={80} alignOffset={0}>
-					<TldrawUiToolbar orientation="grid" label={msg(labelA)}>
-						<TldrawUiMenuContextProvider type="icons" sourceId="style-panel">
-							{itemsA.map((item) => {
-								return (
-									<TldrawUiToolbarButton
-										data-testid={`style.${uiTypeA}.${item.value}`}
-										type="icon"
-										key={item.value}
-										onClick={() => {
-											onValueChange(styleA, item.value)
-											tlmenus.deleteOpenMenu(idA, editor.contextId)
-											setIsOpenA(false)
-										}}
-										title={`${msg(labelA)} — ${msg(`${uiTypeA}-style.${item.value}`)}`}
-									>
-										<TldrawUiButtonIcon icon={item.icon} invertIcon />
-									</TldrawUiToolbarButton>
-								)
-							})}
-						</TldrawUiMenuContextProvider>
-					</TldrawUiToolbar>
-				</TldrawUiPopoverContent>
-			</TldrawUiPopover>
-			<TldrawUiPopover id={idB} open={isOpenB} onOpenChange={setIsOpenB}>
-				<TldrawUiPopoverTrigger>
-					<TldrawUiToolbarButton
-						type="icon"
-						data-testid={`style.${uiTypeB}`}
-						title={
-							msg(labelB) +
-							' — ' +
-							(valueB === null || valueB.type === 'mixed'
-								? msg('style-panel.mixed')
-								: msg(`${uiTypeB}-style.${valueB.value}` as TLUiTranslationKey))
-						}
-					>
-						<TldrawUiButtonIcon icon={iconB} small />
-					</TldrawUiToolbarButton>
-				</TldrawUiPopoverTrigger>
-				<TldrawUiPopoverContent side="left" align="center" sideOffset={116} alignOffset={0}>
-					<TldrawUiToolbar orientation="grid" label={msg(labelB)}>
-						<TldrawUiMenuContextProvider type="icons" sourceId="style-panel">
-							{itemsB.map((item) => {
-								return (
-									<TldrawUiToolbarButton
-										key={item.value}
-										type="icon"
-										title={`${msg(labelB)} — ${msg(`${uiTypeB}-style.${item.value}` as TLUiTranslationKey)}`}
-										data-testid={`style.${uiTypeB}.${item.value}`}
-										onClick={() => {
-											onValueChange(styleB, item.value)
-											tlmenus.deleteOpenMenu(idB, editor.contextId)
-											setIsOpenB(false)
-										}}
-									>
-										<TldrawUiButtonIcon icon={item.icon} />
-									</TldrawUiToolbarButton>
-								)
-							})}
-						</TldrawUiMenuContextProvider>
-					</TldrawUiToolbar>
-				</TldrawUiPopoverContent>
-			</TldrawUiPopover>
-		</>
+		<div className="tlui-style-panel__double-select-picker">
+			<div title={msg(label)} className="tlui-style-panel__double-select-picker-label">
+				{msg(label)}
+			</div>
+			<TldrawUiToolbar orientation="horizontal" label={msg(label)}>
+				<TldrawUiPopover id={idA} open={isOpenA} onOpenChange={setIsOpenA}>
+					<TldrawUiPopoverTrigger>
+						<TldrawUiToolbarButton
+							type="icon"
+							data-testid={`style.${uiTypeA}`}
+							title={
+								msg(labelA) +
+								' — ' +
+								(valueA === null || valueA.type === 'mixed'
+									? msg('style-panel.mixed')
+									: msg(`${uiTypeA}-style.${valueA.value}` as TLUiTranslationKey))
+							}
+						>
+							<TldrawUiButtonIcon icon={iconA} small invertIcon />
+						</TldrawUiToolbarButton>
+					</TldrawUiPopoverTrigger>
+					<TldrawUiPopoverContent side="left" align="center" sideOffset={80} alignOffset={0}>
+						<TldrawUiToolbar orientation="grid" label={msg(labelA)}>
+							<TldrawUiMenuContextProvider type="icons" sourceId="style-panel">
+								{itemsA.map((item) => {
+									return (
+										<TldrawUiToolbarButton
+											data-testid={`style.${uiTypeA}.${item.value}`}
+											type="icon"
+											key={item.value}
+											onClick={() => {
+												onValueChange(styleA, item.value)
+												tlmenus.deleteOpenMenu(idA, editor.contextId)
+												setIsOpenA(false)
+											}}
+											title={`${msg(labelA)} — ${msg(`${uiTypeA}-style.${item.value}`)}`}
+										>
+											<TldrawUiButtonIcon icon={item.icon} invertIcon />
+										</TldrawUiToolbarButton>
+									)
+								})}
+							</TldrawUiMenuContextProvider>
+						</TldrawUiToolbar>
+					</TldrawUiPopoverContent>
+				</TldrawUiPopover>
+				<TldrawUiPopover id={idB} open={isOpenB} onOpenChange={setIsOpenB}>
+					<TldrawUiPopoverTrigger>
+						<TldrawUiToolbarButton
+							type="icon"
+							data-testid={`style.${uiTypeB}`}
+							title={
+								msg(labelB) +
+								' — ' +
+								(valueB === null || valueB.type === 'mixed'
+									? msg('style-panel.mixed')
+									: msg(`${uiTypeB}-style.${valueB.value}` as TLUiTranslationKey))
+							}
+						>
+							<TldrawUiButtonIcon icon={iconB} small />
+						</TldrawUiToolbarButton>
+					</TldrawUiPopoverTrigger>
+					<TldrawUiPopoverContent side="left" align="center" sideOffset={116} alignOffset={0}>
+						<TldrawUiToolbar orientation="grid" label={msg(labelB)}>
+							<TldrawUiMenuContextProvider type="icons" sourceId="style-panel">
+								{itemsB.map((item) => {
+									return (
+										<TldrawUiToolbarButton
+											key={item.value}
+											type="icon"
+											title={`${msg(labelB)} — ${msg(`${uiTypeB}-style.${item.value}` as TLUiTranslationKey)}`}
+											data-testid={`style.${uiTypeB}.${item.value}`}
+											onClick={() => {
+												onValueChange(styleB, item.value)
+												tlmenus.deleteOpenMenu(idB, editor.contextId)
+												setIsOpenB(false)
+											}}
+										>
+											<TldrawUiButtonIcon icon={item.icon} />
+										</TldrawUiToolbarButton>
+									)
+								})}
+							</TldrawUiMenuContextProvider>
+						</TldrawUiToolbar>
+					</TldrawUiPopoverContent>
+				</TldrawUiPopover>
+			</TldrawUiToolbar>
+		</div>
 	)
 }
 
 // need to memo like this to get generics
 /** @public @react */
-export const StylePanelDoubleDropdownPicker = React.memo(StylePanelDoubleDropdownPickerInner) as <
+export const StylePanelDoubleDropdownPicker = React.memo(DoubleDropdownPickerInner) as <
 	T extends string,
 >(
 	props: StylePanelDoubleDropdownPickerProps<T>
 ) => React.JSX.Element
-
-/** @public @react */
-export const StylePanelDoubleDropdownPickerInline = React.memo(
-	StylePanelDoubleDropdownPickerInlineInner
-) as <T extends string>(props: StylePanelDoubleDropdownPickerProps<T>) => React.JSX.Element

package/src/lib/ui/components/StylePanel/StylePanelDropdownPicker.tsx

@@ -28,21 +28,7 @@ export interface StylePanelDropdownPickerProps<T extends string> {
 	onValueChange?(style: StyleProp<T>, value: T): void
 }
 
-function StylePanelDropdownPickerInner<T extends string>(props: StylePanelDropdownPickerProps<T>) {
-	const msg = useTranslation()
-	const toolbarLabel = props.label
-		? msg(props.label)
-		: msg(`style-panel.${props.stylePanelType}` as TLUiTranslationKey)
-	return (
-		<TldrawUiToolbar label={toolbarLabel}>
-			<StylePanelDropdownPickerInline {...props} />
-		</TldrawUiToolbar>
-	)
-}
-
-function StylePanelDropdownPickerInlineInner<T extends string>(
-	props: StylePanelDropdownPickerProps<T>
-) {
+function DropdownPickerInner<T extends string>(props: StylePanelDropdownPickerProps<T>) {
 	const ctx = useStylePanelContext()
 	const {
 		id,
@@ -74,67 +60,60 @@ function StylePanelDropdownPickerInlineInner<T extends string>(
 
 	const popoverId = `style panel ${id}`
 	return (
-		<TldrawUiPopover
-			id={popoverId}
-			open={isOpen}
-			onOpenChange={setIsOpen}
-			className="tlui-style-panel__dropdown-picker"
-		>
-			<TldrawUiPopoverTrigger>
-				<TldrawUiToolbarButton
-					type={type}
-					data-testid={`style.${uiType}`}
-					data-direction="left"
-					title={titleStr}
-				>
-					{labelStr && <TldrawUiButtonLabel>{labelStr}</TldrawUiButtonLabel>}
-					<TldrawUiButtonIcon icon={(icon as TLUiIconType) ?? 'mixed'} />
-				</TldrawUiToolbarButton>
-			</TldrawUiPopoverTrigger>
-			<TldrawUiPopoverContent side="left" align="center">
-				<TldrawUiToolbar orientation={items.length > 4 ? 'grid' : 'horizontal'} label={labelStr}>
-					<TldrawUiMenuContextProvider type="icons" sourceId="style-panel">
-						{items.map((item) => {
-							return (
-								<TldrawUiToolbarButton
-									key={item.value}
-									type="icon"
-									data-testid={`style.${uiType}.${item.value}`}
-									title={
-										stylePanelName +
-										' — ' +
-										msg(`${uiType}-style.${item.value}` as TLUiTranslationKey)
-									}
-									isActive={icon === item.icon}
-									onClick={() => {
-										ctx.onHistoryMark('select style dropdown item')
-										onValueChange(style, item.value)
-										tlmenus.deleteOpenMenu(popoverId, editor.contextId)
-										setIsOpen(false)
-									}}
-								>
-									<TldrawUiButtonIcon icon={item.icon} />
-								</TldrawUiToolbarButton>
-							)
-						})}
-					</TldrawUiMenuContextProvider>
-				</TldrawUiToolbar>
-			</TldrawUiPopoverContent>
-		</TldrawUiPopover>
+		<TldrawUiToolbar label={stylePanelName}>
+			<TldrawUiPopover
+				id={popoverId}
+				open={isOpen}
+				onOpenChange={setIsOpen}
+				className="tlui-style-panel__dropdown-picker"
+			>
+				<TldrawUiPopoverTrigger>
+					<TldrawUiToolbarButton
+						type={type}
+						data-testid={`style.${uiType}`}
+						data-direction="left"
+						title={titleStr}
+					>
+						{labelStr && <TldrawUiButtonLabel>{labelStr}</TldrawUiButtonLabel>}
+						<TldrawUiButtonIcon icon={(icon as TLUiIconType) ?? 'mixed'} />
+					</TldrawUiToolbarButton>
+				</TldrawUiPopoverTrigger>
+				<TldrawUiPopoverContent side="left" align="center">
+					<TldrawUiToolbar orientation={items.length > 4 ? 'grid' : 'horizontal'} label={labelStr}>
+						<TldrawUiMenuContextProvider type="icons" sourceId="style-panel">
+							{items.map((item) => {
+								return (
+									<TldrawUiToolbarButton
+										key={item.value}
+										type="icon"
+										data-testid={`style.${uiType}.${item.value}`}
+										title={
+											stylePanelName +
+											' — ' +
+											msg(`${uiType}-style.${item.value}` as TLUiTranslationKey)
+										}
+										isActive={icon === item.icon}
+										onClick={() => {
+											ctx.onHistoryMark('select style dropdown item')
+											onValueChange(style, item.value)
+											tlmenus.deleteOpenMenu(popoverId, editor.contextId)
+											setIsOpen(false)
+										}}
+									>
+										<TldrawUiButtonIcon icon={item.icon} />
+									</TldrawUiToolbarButton>
+								)
+							})}
+						</TldrawUiMenuContextProvider>
+					</TldrawUiToolbar>
+				</TldrawUiPopoverContent>
+			</TldrawUiPopover>
+		</TldrawUiToolbar>
 	)
 }
 
 // need to export like this to get generics
 /** @public @react */
-export const StylePanelDropdownPicker = React.memo(StylePanelDropdownPickerInner) as <
-	T extends string,
->(
-	props: StylePanelDropdownPickerProps<T>
-) => React.JSX.Element
-
-/** @public @react */
-export const StylePanelDropdownPickerInline = React.memo(StylePanelDropdownPickerInlineInner) as <
-	T extends string,
->(
+export const StylePanelDropdownPicker = React.memo(DropdownPickerInner) as <T extends string>(
 	props: StylePanelDropdownPickerProps<T>
 ) => React.JSX.Element

package/src/lib/ui/version.ts

@@ -1,9 +1,9 @@
 // This file is automatically generated by internal/scripts/refresh-assets.ts.
 // Do not edit manually. Or do, I'm a comment, not a cop.
 
-export const version = '4.1.0-next.58b63dd1ac80'
+export const version = '4.1.0-next.74327a60f18a'
 export const publishDates = {
 	major: '2025-09-18T14:39:22.803Z',
-	minor: '2025-10-15T11:02:19.723Z',
-	patch: '2025-10-15T11:02:19.723Z',
+	minor: '2025-10-15T10:52:21.047Z',
+	patch: '2025-10-15T10:52:21.047Z',
 }