diff --git a/editor/src/components/editor/canvas-toolbar.tsx b/editor/src/components/editor/canvas-toolbar.tsx
index d7c42dcc9670..9ebb819f7aa5 100644
--- a/editor/src/components/editor/canvas-toolbar.tsx
+++ b/editor/src/components/editor/canvas-toolbar.tsx
@@ -72,6 +72,7 @@ import {
keyToString,
shortcutDetailsWithDefaults,
} from './shortcut-definitions'
+import { LowPriorityStoreProvider } from './store/store-context-providers'
export const InsertMenuButtonTestId = 'insert-menu-button'
export const InsertOrEditTextButtonTestId = 'insert-or-edit-text-button'
@@ -579,7 +580,9 @@ export const CanvasToolbar = React.memo(() => {
)
: null}
{/* Live Mode */}
- {showRemixNavBar ? wrapInSubmenu() : null}
+
+ {showRemixNavBar ? wrapInSubmenu() : null}
+
)
})
diff --git a/editor/src/components/inspector/sections/component-section/property-control-controls.tsx b/editor/src/components/inspector/sections/component-section/property-control-controls.tsx
index 2925f9ba8ee3..3012824768e8 100644
--- a/editor/src/components/inspector/sections/component-section/property-control-controls.tsx
+++ b/editor/src/components/inspector/sections/component-section/property-control-controls.tsx
@@ -1,5 +1,6 @@
import fastDeepEquals from 'fast-deep-equal'
import React from 'react'
+import ReactDOM from 'react-dom'
import { MetadataUtils } from '../../../../core/model/element-metadata-utils'
import { isRight } from '../../../../core/shared/either'
import { isJSXElement } from '../../../../core/shared/element-template'
@@ -69,6 +70,7 @@ import type { DEPRECATEDSliderControlOptions } from '../../controls/slider-contr
import { StringControl } from '../../controls/string-control'
import { UIGridRow } from '../../widgets/ui-grid-row'
import { HtmlPreview, ImagePreview } from './property-content-preview'
+import { usePropControlledStateV2 } from '../../common/inspector-utils'
export interface ControlForPropProps {
propPath: PropertyPath
@@ -492,9 +494,26 @@ const NumberWithSliderControl = React.memo(
},
) => {
const { propName, propMetadata, controlDescription } = props
+ const { onTransientSubmitValue, onSubmitValue } = propMetadata
const controlId = `${propName}-slider-property-control`
- const value = getValueOrUndefinedFromPropMetadata(propMetadata) ?? 0
+ const valueComingFromProps = getValueOrUndefinedFromPropMetadata(propMetadata) ?? 0
+
+ const [valueToShow, setValueToShow] = usePropControlledStateV2(valueComingFromProps)
+
+ const onChangeValue = React.useCallback(
+ (value: any, transient: boolean = false) => {
+ ReactDOM.flushSync(() => {
+ setValueToShow(value)
+ })
+ if (transient) {
+ onTransientSubmitValue(value)
+ } else {
+ onSubmitValue(value, transient)
+ }
+ },
+ [setValueToShow, onTransientSubmitValue, onSubmitValue],
+ )
return (
|--45px--|'}>
@@ -502,10 +521,10 @@ const NumberWithSliderControl = React.memo(
key={`${controlId}-slider`}
id={`${controlId}-slider`}
testId={`${controlId}-slider`}
- value={value}
- onTransientSubmitValue={propMetadata.onTransientSubmitValue}
- onForcedSubmitValue={propMetadata.onSubmitValue}
- onSubmitValue={propMetadata.onSubmitValue}
+ value={valueToShow}
+ onTransientSubmitValue={onChangeValue}
+ onForcedSubmitValue={onChangeValue}
+ onSubmitValue={onChangeValue}
controlStatus={propMetadata.controlStatus}
controlStyles={propMetadata.controlStyles}
DEPRECATED_controlOptions={props.controlOptions}
@@ -514,7 +533,7 @@ const NumberWithSliderControl = React.memo(
id={`${controlId}-number`}
testId={`${controlId}-number`}
key={`${controlId}-number`}
- value={value}
+ value={valueToShow}
onTransientSubmitValue={propMetadata.onTransientSubmitValue}
onForcedSubmitValue={propMetadata.onSubmitValue}
onSubmitValue={propMetadata.onSubmitValue}
diff --git a/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap b/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap
index 0bd2ca37513e..911b3ef6a132 100644
--- a/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap
+++ b/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap
@@ -183,10 +183,10 @@ Array [
"/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/Symbol(react.memo)(Icon)",
"/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/div:data-testid='plus-button-onMouseDown'",
"/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/div",
- "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedClass(Tooltip)",
- "/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
- "/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
- "/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
+ "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedFunctionComponent(Tooltip)",
+ "/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
+ "/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
+ "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
"/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
"/div/div/Icon/img",
"/div/div/ControlForProp/Symbol(react.memo)()",
@@ -206,11 +206,11 @@ Array [
"/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/div",
"/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/span",
"/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/Symbol(react.forward_ref)(EmotionCssPropInternal)",
- "/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/UtopiaSpiedClass(Tooltip)",
+ "/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/UtopiaSpiedFunctionComponent(Tooltip)",
"/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/div",
- "/Symbol(react.forward_ref)()/div/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
- "/div/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
- "/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
+ "/Symbol(react.forward_ref)()/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
+ "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
+ "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
"/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
"/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(Styled(div))",
"/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(Styled(div))/div",
@@ -232,7 +232,7 @@ Array [
"/Symbol(react.forward_ref)(Styled(div))/div/Symbol(react.forward_ref)(Styled(div))/div",
"/Symbol(react.forward_ref)(Styled(div))/div/EditorContractDropdown/Symbol(react.memo)(Symbol(react.forward_ref)())",
"/Symbol(react.forward_ref)(Styled(div))/div/EditorContractDropdown/Symbol(react.forward_ref)(Styled(div)):data-testid='editor-fix-problems-button'",
- "/Symbol(react.forward_ref)(Styled(div))/div/EditorContractDropdown/UtopiaSpiedClass(Tooltip)",
+ "/Symbol(react.forward_ref)(Styled(div))/div/EditorContractDropdown/UtopiaSpiedFunctionComponent(Tooltip)",
"/Symbol(react.forward_ref)(Styled(div))/div/EditorContractDropdown/Symbol(react.forward_ref)(Styled(div)):data-testid='editor-contract-dropdown'",
"/div/EditorContractDropdown/Symbol(react.forward_ref)(Styled(div))/div:data-testid='editor-contract-dropdown'",
"/div/Symbol(react.memo)(Symbol(react.forward_ref)())/Symbol(react.forward_ref)()/Symbol(react.forward_ref)(EmotionCssPropInternal)",
@@ -379,7 +379,7 @@ Array [
"/div/div//Symbol(react.memo)()",
"/div/div//Symbol(react.memo)()",
"/div///Symbol(react.forward_ref)(Styled(div)):data-testid='radius-cycle-mode'",
- "/div///UtopiaSpiedClass(Tooltip)",
+ "/div///UtopiaSpiedFunctionComponent(Tooltip)",
"/div///Symbol(react.memo)()",
"/div///div",
"//div//Symbol(react.memo)(NumberInput)",
@@ -395,9 +395,9 @@ Array [
"/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.memo)(Symbol(react.forward_ref)())",
"/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.memo)(Symbol(react.forward_ref)())/Symbol(react.forward_ref)()/Symbol(react.forward_ref)(Styled(input)):data-testid='radius-one'",
"/Symbol(react.memo)(Symbol(react.forward_ref)())/Symbol(react.forward_ref)()/Symbol(react.forward_ref)(Styled(input))/input:data-testid='radius-one'",
- "//div/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
- "/div/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
- "/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
+ "//div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
+ "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
+ "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
"/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
"/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(Styled(div))/div:data-testid='radius-cycle-mode'",
"/div/div//Symbol(react.memo)()",
@@ -462,10 +462,10 @@ Array [
"/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/Symbol(react.memo)(Icon)",
"/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/div:data-testid='plus-button-onMouseDown'",
"/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/div",
- "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedClass(Tooltip)",
- "/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
- "/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
- "/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
+ "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedFunctionComponent(Tooltip)",
+ "/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
+ "/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
+ "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
"/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
"/div/div/ControlForProp/Symbol(react.memo)()",
"/div/div/ControlForProp/Symbol(react.memo)()",
@@ -484,11 +484,11 @@ Array [
"/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/div",
"/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/span",
"/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/Symbol(react.forward_ref)(EmotionCssPropInternal)",
- "/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/UtopiaSpiedClass(Tooltip)",
+ "/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/UtopiaSpiedFunctionComponent(Tooltip)",
"/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/div",
- "/Symbol(react.forward_ref)()/div/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
- "/div/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
- "/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
+ "/Symbol(react.forward_ref)()/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
+ "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
+ "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
"/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
"/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(Styled(div))",
"/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(Styled(div))/div",
@@ -596,7 +596,7 @@ Array [
"/TextSubsection/div//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)",
"/TextSubsection/div//Symbol(react.forward_ref)(Styled(div))",
"/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)(Symbol(react.forward_ref)())",
- "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedClass(Tooltip)",
+ "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedFunctionComponent(Tooltip)",
"/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)",
"/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(TextAlignControl)/Symbol(react.memo)()",
"/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(TextAlignControl)/UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)",
@@ -831,7 +831,7 @@ Array [
"/Symbol(react.forward_ref)(Styled(div))/div/Symbol(react.forward_ref)(Styled(div))/div",
"/Symbol(react.forward_ref)(Styled(div))/div/EditorContractDropdown/Symbol(react.memo)(Symbol(react.forward_ref)())",
"/Symbol(react.forward_ref)(Styled(div))/div/EditorContractDropdown/Symbol(react.forward_ref)(Styled(div)):data-testid='editor-fix-problems-button'",
- "/Symbol(react.forward_ref)(Styled(div))/div/EditorContractDropdown/UtopiaSpiedClass(Tooltip)",
+ "/Symbol(react.forward_ref)(Styled(div))/div/EditorContractDropdown/UtopiaSpiedFunctionComponent(Tooltip)",
"/Symbol(react.forward_ref)(Styled(div))/div/EditorContractDropdown/Symbol(react.forward_ref)(Styled(div)):data-testid='editor-contract-dropdown'",
"/div/EditorContractDropdown/Symbol(react.forward_ref)(Styled(div))/div:data-testid='editor-contract-dropdown'",
"/div/Symbol(react.memo)(Symbol(react.forward_ref)())/Symbol(react.forward_ref)()/Symbol(react.forward_ref)(EmotionCssPropInternal)",
@@ -978,7 +978,7 @@ Array [
"/div/div//Symbol(react.memo)()",
"/div/div//Symbol(react.memo)()",
"/div///Symbol(react.forward_ref)(Styled(div)):data-testid='radius-cycle-mode'",
- "/div///UtopiaSpiedClass(Tooltip)",
+ "/div///UtopiaSpiedFunctionComponent(Tooltip)",
"/div///Symbol(react.memo)()",
"/div///div",
"//div//Symbol(react.memo)(NumberInput)",
@@ -994,9 +994,9 @@ Array [
"/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.memo)(Symbol(react.forward_ref)())",
"/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.memo)(Symbol(react.forward_ref)())/Symbol(react.forward_ref)()/Symbol(react.forward_ref)(Styled(input)):data-testid='radius-one'",
"/Symbol(react.memo)(Symbol(react.forward_ref)())/Symbol(react.forward_ref)()/Symbol(react.forward_ref)(Styled(input))/input:data-testid='radius-one'",
- "//div/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
- "/div/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
- "/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
+ "//div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
+ "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
+ "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
"/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
"/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(Styled(div))/div:data-testid='radius-cycle-mode'",
"/div/div//Symbol(react.memo)()",
@@ -1137,7 +1137,7 @@ Array [
"/TextSubsection/div//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)",
"/TextSubsection/div//Symbol(react.forward_ref)(Styled(div))",
"/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)(Symbol(react.forward_ref)())",
- "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedClass(Tooltip)",
+ "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedFunctionComponent(Tooltip)",
"/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)",
"/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(TextAlignControl)/Symbol(react.memo)()",
"/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(TextAlignControl)/UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)",
@@ -1268,16 +1268,16 @@ Array [
"////UtopiaSpiedExoticType(Symbol(react.provider))",
"/UtopiaSpiedExoticType(Symbol(react.provider))/Symbol(react.provider)/UtopiaSpiedFunctionComponent()/UtopiaSpiedExoticType(Symbol(react.provider))",
"/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)(Symbol(react.forward_ref)())",
- "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedClass(Tooltip)",
+ "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedFunctionComponent(Tooltip)",
"/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)",
"/div//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)/UtopiaSpiedFunctionComponent(MenuProvider)",
"/div//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)/UtopiaSpiedFunctionComponent(ContextMenu)",
"/div//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
"//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)/Symbol(react.forward_ref)(EmotionCssPropInternal)/div",
"/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(MenuProvider)/div",
- "/UtopiaSpiedFunctionComponent(MenuProvider)/div/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
- "/div/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
- "/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
+ "/UtopiaSpiedFunctionComponent(MenuProvider)/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
+ "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
+ "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
"/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
"/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.memo)(Symbol(react.forward_ref)())/Symbol(react.forward_ref)()/Symbol(react.forward_ref)(EmotionCssPropInternal)",
"/Symbol(react.memo)(Symbol(react.forward_ref)())/Symbol(react.forward_ref)()/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedClass(StateManager)",
@@ -1412,7 +1412,7 @@ Array [
"/TextSubsection/div//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)",
"/TextSubsection/div//Symbol(react.forward_ref)(Styled(div))",
"/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)(Symbol(react.forward_ref)())",
- "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedClass(Tooltip)",
+ "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedFunctionComponent(Tooltip)",
"/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)",
"/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(TextAlignControl)/Symbol(react.memo)()",
"/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(TextAlignControl)/UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)",
@@ -1602,10 +1602,10 @@ Array [
"/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/Symbol(react.memo)(Icon)",
"/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/div:data-testid='plus-button-onMouseDown'",
"/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/div",
- "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedClass(Tooltip)",
- "/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
- "/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
- "/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
+ "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedFunctionComponent(Tooltip)",
+ "/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
+ "/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
+ "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
"/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
"/div/div/ControlForProp/Symbol(react.memo)()",
"/div/div/ControlForProp/Symbol(react.memo)()",
@@ -1624,11 +1624,11 @@ Array [
"/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/div",
"/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/span",
"/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/Symbol(react.forward_ref)(EmotionCssPropInternal)",
- "/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/UtopiaSpiedClass(Tooltip)",
+ "/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/UtopiaSpiedFunctionComponent(Tooltip)",
"/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/div",
- "/Symbol(react.forward_ref)()/div/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
- "/div/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
- "/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
+ "/Symbol(react.forward_ref)()/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
+ "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
+ "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
"/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
"/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(Styled(div))",
"/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(Styled(div))/div",
@@ -1735,16 +1735,16 @@ Array [
"/UtopiaSpiedFunctionComponent(DropdownIndicator)/UtopiaSpiedFunctionComponent(DropdownIndicator)/Symbol(react.forward_ref)(render)/UtopiaSpiedExoticType(Symbol(react.context))",
"/Symbol(react.forward_ref)(render)/UtopiaSpiedExoticType(Symbol(react.context))/Symbol(react.context)/div",
"/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)(Symbol(react.forward_ref)())",
- "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedClass(Tooltip)",
+ "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedFunctionComponent(Tooltip)",
"/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)",
"/div//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)/UtopiaSpiedFunctionComponent(MenuProvider)",
"/div//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)/UtopiaSpiedFunctionComponent(ContextMenu)",
"/div//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
"//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)/Symbol(react.forward_ref)(EmotionCssPropInternal)/div",
"/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(MenuProvider)/div",
- "/UtopiaSpiedFunctionComponent(MenuProvider)/div/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
- "/div/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
- "/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
+ "/UtopiaSpiedFunctionComponent(MenuProvider)/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
+ "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
+ "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
"/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
"/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.memo)(Symbol(react.forward_ref)())/Symbol(react.forward_ref)()/Symbol(react.forward_ref)(EmotionCssPropInternal)",
"/Symbol(react.memo)(Symbol(react.forward_ref)())/Symbol(react.forward_ref)()/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedClass(StateManager)",
@@ -1812,10 +1812,10 @@ Array [
"/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/Symbol(react.memo)(Icon)",
"/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/div:data-testid='plus-button-onMouseDown'",
"/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/div",
- "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedClass(Tooltip)",
- "/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
- "/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
- "/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
+ "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedFunctionComponent(Tooltip)",
+ "/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
+ "/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
+ "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
"/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
"/div/div/ControlForProp/Symbol(react.memo)()",
"/div/div/ControlForProp/Symbol(react.memo)()",
@@ -1834,11 +1834,11 @@ Array [
"/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/div",
"/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/span",
"/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/Symbol(react.forward_ref)(EmotionCssPropInternal)",
- "/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/UtopiaSpiedClass(Tooltip)",
+ "/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/UtopiaSpiedFunctionComponent(Tooltip)",
"/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/div",
- "/Symbol(react.forward_ref)()/div/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
- "/div/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
- "/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
+ "/Symbol(react.forward_ref)()/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
+ "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
+ "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
"/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
"/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(Styled(div))",
"/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(Styled(div))/div",
@@ -1929,7 +1929,7 @@ Array [
"/TextSubsection/div//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)",
"/TextSubsection/div//Symbol(react.forward_ref)(Styled(div))",
"/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)(Symbol(react.forward_ref)())",
- "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedClass(Tooltip)",
+ "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedFunctionComponent(Tooltip)",
"/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)",
"/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(TextAlignControl)/Symbol(react.memo)()",
"/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(TextAlignControl)/UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)",
@@ -2041,10 +2041,10 @@ Array [
"/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/Symbol(react.memo)(Icon)",
"/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/div:data-testid='plus-button-onMouseDown'",
"/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/div",
- "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedClass(Tooltip)",
- "/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
- "/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
- "/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
+ "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedFunctionComponent(Tooltip)",
+ "/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
+ "/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
+ "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
"/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
"/div/div/ControlForProp/Symbol(react.memo)()",
"/div/div/ControlForProp/Symbol(react.memo)()",
@@ -2063,11 +2063,11 @@ Array [
"/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/div",
"/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/span",
"/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/Symbol(react.forward_ref)(EmotionCssPropInternal)",
- "/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/UtopiaSpiedClass(Tooltip)",
+ "/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/UtopiaSpiedFunctionComponent(Tooltip)",
"/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/div",
- "/Symbol(react.forward_ref)()/div/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
- "/div/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
- "/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
+ "/Symbol(react.forward_ref)()/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
+ "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
+ "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
"/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
"/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(Styled(div))",
"/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(Styled(div))/div",
@@ -2132,10 +2132,10 @@ Array [
"/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/Symbol(react.memo)(Icon)",
"/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/div:data-testid='plus-button-onMouseDown'",
"/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/div",
- "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedClass(Tooltip)",
- "/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
- "/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
- "/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
+ "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedFunctionComponent(Tooltip)",
+ "/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
+ "/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
+ "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
"/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
"/div/div/ControlForProp/Symbol(react.memo)()",
"/div/div/ControlForProp/Symbol(react.memo)()",
@@ -2154,11 +2154,11 @@ Array [
"/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/div",
"/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/span",
"/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/Symbol(react.forward_ref)(EmotionCssPropInternal)",
- "/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/UtopiaSpiedClass(Tooltip)",
+ "/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/UtopiaSpiedFunctionComponent(Tooltip)",
"/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/div",
- "/Symbol(react.forward_ref)()/div/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
- "/div/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
- "/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
+ "/Symbol(react.forward_ref)()/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
+ "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
+ "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
"/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
"/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(Styled(div))",
"/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(Styled(div))/div",
@@ -2262,16 +2262,16 @@ Array [
"////UtopiaSpiedExoticType(Symbol(react.provider))",
"/UtopiaSpiedExoticType(Symbol(react.provider))/Symbol(react.provider)/UtopiaSpiedFunctionComponent()/UtopiaSpiedExoticType(Symbol(react.provider))",
"/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)(Symbol(react.forward_ref)())",
- "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedClass(Tooltip)",
+ "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedFunctionComponent(Tooltip)",
"/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)",
"/div//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)/UtopiaSpiedFunctionComponent(MenuProvider)",
"/div//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)/UtopiaSpiedFunctionComponent(ContextMenu)",
"/div//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
"//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)/Symbol(react.forward_ref)(EmotionCssPropInternal)/div",
"/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(MenuProvider)/div",
- "/UtopiaSpiedFunctionComponent(MenuProvider)/div/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
- "/div/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
- "/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
+ "/UtopiaSpiedFunctionComponent(MenuProvider)/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
+ "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
+ "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
"/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
"/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.memo)(Symbol(react.forward_ref)())/Symbol(react.forward_ref)()/Symbol(react.forward_ref)(EmotionCssPropInternal)",
"/Symbol(react.memo)(Symbol(react.forward_ref)())/Symbol(react.forward_ref)()/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedClass(StateManager)",
@@ -2398,7 +2398,7 @@ Array [
"/TextSubsection/div//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)",
"/TextSubsection/div//Symbol(react.forward_ref)(Styled(div))",
"/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)(Symbol(react.forward_ref)())",
- "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedClass(Tooltip)",
+ "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedFunctionComponent(Tooltip)",
"/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)",
"/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(TextAlignControl)/Symbol(react.memo)()",
"/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(TextAlignControl)/UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)",
@@ -2657,16 +2657,16 @@ Array [
"/UtopiaSpiedFunctionComponent(DropdownIndicator)/UtopiaSpiedFunctionComponent(DropdownIndicator)/Symbol(react.forward_ref)(render)/UtopiaSpiedExoticType(Symbol(react.context))",
"/Symbol(react.forward_ref)(render)/UtopiaSpiedExoticType(Symbol(react.context))/Symbol(react.context)/div",
"/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)(Symbol(react.forward_ref)())",
- "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedClass(Tooltip)",
+ "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedFunctionComponent(Tooltip)",
"/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)",
"/div//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)/UtopiaSpiedFunctionComponent(MenuProvider)",
"/div//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)/UtopiaSpiedFunctionComponent(ContextMenu)",
"/div//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
"//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)/Symbol(react.forward_ref)(EmotionCssPropInternal)/div",
"/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(MenuProvider)/div",
- "/UtopiaSpiedFunctionComponent(MenuProvider)/div/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
- "/div/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
- "/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
+ "/UtopiaSpiedFunctionComponent(MenuProvider)/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
+ "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
+ "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
"/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
"/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.memo)(Symbol(react.forward_ref)())/Symbol(react.forward_ref)()/Symbol(react.forward_ref)(EmotionCssPropInternal)",
"/Symbol(react.memo)(Symbol(react.forward_ref)())/Symbol(react.forward_ref)()/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedClass(StateManager)",
@@ -2793,7 +2793,7 @@ Array [
"/TextSubsection/div//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)",
"/TextSubsection/div//Symbol(react.forward_ref)(Styled(div))",
"/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)(Symbol(react.forward_ref)())",
- "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedClass(Tooltip)",
+ "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedFunctionComponent(Tooltip)",
"/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)",
"/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(TextAlignControl)/Symbol(react.memo)()",
"/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(TextAlignControl)/UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)",
diff --git a/editor/src/uuiui/tooltip.tsx b/editor/src/uuiui/tooltip.tsx
index cd3e281da7f9..477c9f383391 100644
--- a/editor/src/uuiui/tooltip.tsx
+++ b/editor/src/uuiui/tooltip.tsx
@@ -17,63 +17,51 @@ export interface TooltipProps {
textColor?: string
}
-function tooltipPropsEqual(
- a: React.PropsWithChildren,
- b: React.PropsWithChildren,
-): boolean {
- return (
- a == b ||
- (a.title === b.title &&
- a.placement === b.placement &&
- a.disabled === b.disabled &&
- a.children === b.children)
- )
-}
+export const Tooltip: React.FunctionComponent> = (props) => {
+ const backgroundColor = props.backgroundColor ?? colorTheme.neutralInvertedBackground.value
+ const textColor = props.textColor ?? colorTheme.neutralInvertedForeground.value
-export class Tooltip extends React.Component> {
- shouldComponentUpdate(nextProps: React.PropsWithChildren): boolean {
- return !tooltipPropsEqual(this.props, nextProps)
- }
+ const css = React.useMemo(
+ () =>
+ ({
+ fontWeight: 400,
+ fontSize: 11,
+ textAlign: 'center',
+ fontFamily:
+ "utopian-inter, -apple-system, BlinkMacSystemFont, Helvetica, 'Segoe UI', Roboto, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
+ backgroundColor: `${backgroundColor} !important`,
+ color: `${textColor} !important`,
+ '& .tippy-content': {
+ padding: '4px 8px !important',
+ },
+ '&[data-placement^=top] .tippy-arrow::before': {
+ borderTopColor: `${backgroundColor} !important`,
+ },
+ '&[data-placement^=right] .tippy-arrow::before': {
+ borderRightColor: `${backgroundColor} !important`,
+ },
+ '&[data-placement^=bottom] .tippy-arrow::before': {
+ borderBottomColor: `${backgroundColor} !important`,
+ },
+ '&[data-placement^=left] .tippy-arrow::before': {
+ borderLeftColor: `${backgroundColor} !important`,
+ },
+ } as const),
+ [backgroundColor, textColor],
+ )
- render() {
- const backgroundColor = this.props.backgroundColor ?? colorTheme.neutralInvertedBackground.value
- const textColor = this.props.textColor ?? colorTheme.neutralInvertedForeground.value
- return (
-
- {this.props.children}
-
- )
- }
+ return (
+
+ {props.children}
+
+ )
}