tldraw 3.16.0-internal.a478398270c6 → 3.16.0-internal.f8b97f0c414f

package/src/lib/ui/components/Spinner.tsx

@@ -1,3 +1,4 @@
+import { DefaultSpinner } from '@tldraw/editor'
 import React from 'react'
 import { useTranslation } from '../hooks/useTranslation/useTranslation'
 
@@ -5,28 +6,5 @@ import { useTranslation } from '../hooks/useTranslation/useTranslation'
 export function Spinner(props: React.SVGProps<SVGSVGElement>) {
 	const msg = useTranslation()
 
-	return (
-		<svg
-			width={16}
-			height={16}
-			viewBox="0 0 16 16"
-			{...props}
-			aria-label={msg('app.loading')}
-			aria-hidden="false"
-		>
-			<g strokeWidth={2} fill="none" fillRule="evenodd">
-				<circle strokeOpacity={0.25} cx={8} cy={8} r={7} stroke="currentColor" />
-				<path strokeLinecap="round" d="M15 8c0-4.5-4.5-7-7-7" stroke="currentColor">
-					<animateTransform
-						attributeName="transform"
-						type="rotate"
-						from="0 8 8"
-						to="360 8 8"
-						dur="1s"
-						repeatCount="indefinite"
-					/>
-				</path>
-			</g>
-		</svg>
-	)
+	return <DefaultSpinner aria-label={msg('app.loading')} {...props} />
 }

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

@@ -1,34 +1,44 @@
-import { useEditor, usePassThroughWheelEvents } from '@tldraw/editor'
+import {
+	ReadonlySharedStyleMap,
+	useEditor,
+	usePassThroughWheelEvents,
+	useValue,
+} from '@tldraw/editor'
 import classNames from 'classnames'
 import { ReactNode, memo, useCallback, useEffect, useRef } from 'react'
 import { useRelevantStyles } from '../../hooks/useRelevantStyles'
 import { DefaultStylePanelContent } from './DefaultStylePanelContent'
+import { StylePanelContextProvider } from './StylePanelContext'
 
 /** @public */
 export interface TLUiStylePanelProps {
 	isMobile?: boolean
+	styles?: ReadonlySharedStyleMap | null
 	children?: ReactNode
 }
 
 /** @public @react */
 export const DefaultStylePanel = memo(function DefaultStylePanel({
 	isMobile,
+	styles,
 	children,
 }: TLUiStylePanelProps) {
 	const editor = useEditor()
+	const showUiLabels = useValue('showUiLabels', () => editor.user.getShowUiLabels(), [editor])
 
 	const ref = useRef<HTMLDivElement>(null)
 	usePassThroughWheelEvents(ref)
 
-	const styles = useRelevantStyles()
-
 	const handlePointerOut = useCallback(() => {
 		if (!isMobile) {
 			editor.updateInstanceState({ isChangingStyle: false })
 		}
 	}, [editor, isMobile])
 
-	const content = children ?? <DefaultStylePanelContent styles={styles} />
+	const defaultStyles = useRelevantStyles()
+	if (styles === undefined) {
+		styles = defaultStyles
+	}
 
 	useEffect(() => {
 		function handleKeyDown(event: KeyboardEvent) {
@@ -46,13 +56,19 @@ export const DefaultStylePanel = memo(function DefaultStylePanel({
 	}, [editor])
 
 	return (
-		<div
-			ref={ref}
-			className={classNames('tlui-style-panel', { 'tlui-style-panel__wrapper': !isMobile })}
-			data-ismobile={isMobile}
-			onPointerLeave={handlePointerOut}
-		>
-			{content}
-		</div>
+		styles && (
+			<div
+				ref={ref}
+				data-testid="style.panel"
+				className={classNames('tlui-style-panel', { 'tlui-style-panel__wrapper': !isMobile })}
+				data-ismobile={isMobile}
+				data-show-ui-labels={showUiLabels}
+				onPointerLeave={handlePointerOut}
+			>
+				<StylePanelContextProvider styles={styles}>
+					{children ?? <DefaultStylePanelContent />}
+				</StylePanelContextProvider>
+			</div>
+		)
 	)
 })