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} + + ) }