diff --git a/editor/src/components/inspector/sections/component-section/cartouche-control.tsx b/editor/src/components/inspector/sections/component-section/cartouche-control.tsx
index ec4851248411..b8dc71b89fba 100644
--- a/editor/src/components/inspector/sections/component-section/cartouche-control.tsx
+++ b/editor/src/components/inspector/sections/component-section/cartouche-control.tsx
@@ -1,4 +1,7 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
import React from 'react'
+import { jsx } from '@emotion/react'
import { DataCartoucheInner } from './data-reference-cartouche'
import { NO_OP } from '../../../../core/shared/utils'
import type { ElementPath, PropertyPath } from '../../../../core/shared/project-file-types'
@@ -6,6 +9,7 @@ import * as EPP from '../../../template-property-path'
import { dataPathSuccess, traceDataFromProp } from '../../../../core/data-tracing/data-tracing'
import { Substores, useEditorState } from '../../../editor/store/store-hook'
import type { CartoucheDataType } from './cartouche-ui'
+import { useColorTheme } from '../../../../uuiui'
interface IdentifierExpressionCartoucheControlProps {
contents: string
@@ -36,17 +40,47 @@ export const IdentifierExpressionCartoucheControl = React.memo(
)
return (
-
+
+
+
)
},
)
+
+export const CartoucheInspectorWrapper = React.memo((props: { children: React.ReactNode }) => {
+ const colorTheme = useColorTheme()
+
+ return (
+
+ {props.children}
+
+ )
+})
+CartoucheInspectorWrapper.displayName = 'CartoucheInspectorWrapper'
diff --git a/editor/src/components/inspector/sections/component-section/cartouche-ui.tsx b/editor/src/components/inspector/sections/component-section/cartouche-ui.tsx
index c2cd4528c4ff..343635ab711d 100644
--- a/editor/src/components/inspector/sections/component-section/cartouche-ui.tsx
+++ b/editor/src/components/inspector/sections/component-section/cartouche-ui.tsx
@@ -53,6 +53,8 @@ export const CartoucheUI = React.forwardRef(
const wrappedOnClick = useStopPropagation(onClick)
const wrappedOnDoubleClick = useStopPropagation(onDoubleClick)
+
+ // NOTE: this is currently unused, we should decide if we want to keep allowing deletion of the cartouches from here or not
const wrappedOnDelete = useStopPropagation(onDelete)
return (
@@ -79,6 +81,7 @@ export const CartoucheUI = React.forwardRef(
flex: 1,
gap: 4,
opacity: preview ? 0.5 : 1,
+ width: 'max-content',
}}
css={{
color: selected || highlight === 'strong' ? colors.fg.selected : colors.fg.default,
@@ -124,20 +127,6 @@ export const CartoucheUI = React.forwardRef(
// a trailing ellipsis is added to indicate that the object can be traversed
…,
)}
- {when(
- onDelete != null,
- ,
- )}
diff --git a/editor/src/components/inspector/sections/data-reference-section.tsx b/editor/src/components/inspector/sections/data-reference-section.tsx
index 7c97b3127084..996c7f907c14 100644
--- a/editor/src/components/inspector/sections/data-reference-section.tsx
+++ b/editor/src/components/inspector/sections/data-reference-section.tsx
@@ -25,6 +25,7 @@ import {
useVariablesInScopeForSelectedElement,
} from './component-section/variables-in-scope-utils'
import { jsxElementChildToValuePath } from './component-section/data-picker-utils'
+import { CartoucheInspectorWrapper } from './component-section/cartouche-control'
export const DataReferenceSectionId = 'code-element-section-test-id'
@@ -165,18 +166,19 @@ export const DataReferenceSection = React.memo(({ paths }: { paths: ElementPath[
key={`inspector-data-reference-row-${EP.toString(element.path)}`}
>
Value
-
-
+
+
+
)
})}
diff --git a/editor/src/components/inspector/sections/layout-section/list-section.tsx b/editor/src/components/inspector/sections/layout-section/list-section.tsx
index 324b30e7b3a5..cd9e1832df15 100644
--- a/editor/src/components/inspector/sections/layout-section/list-section.tsx
+++ b/editor/src/components/inspector/sections/layout-section/list-section.tsx
@@ -20,7 +20,8 @@ import type { MetadataSubstate } from '../../../editor/store/store-hook-substore
import { UIGridRow } from '../../widgets/ui-grid-row'
import { getTextContentOfElement } from '../component-section/data-reference-cartouche'
import { JSXPropertyControlForListSection } from '../component-section/property-control-controls'
-import { MapListSourceCartouche } from './list-source-cartouche'
+import { MapListSourceCartoucheInspector } from './list-source-cartouche'
+import { CartoucheInspectorWrapper } from '../component-section/cartouche-control'
type MapExpression = JSXMapExpression | 'multiselect' | 'not-a-mapexpression'
@@ -141,18 +142,11 @@ export const ListSection = React.memo(({ paths }: { paths: ElementPath[] }) => {
List Source
-
+
Contents
-
+
{
} as JSXParsedValue
}
/>
-
+
)
diff --git a/editor/src/components/inspector/sections/layout-section/list-source-cartouche.tsx b/editor/src/components/inspector/sections/layout-section/list-source-cartouche.tsx
index 505b7863df89..b97383c719da 100644
--- a/editor/src/components/inspector/sections/layout-section/list-source-cartouche.tsx
+++ b/editor/src/components/inspector/sections/layout-section/list-source-cartouche.tsx
@@ -27,6 +27,7 @@ import {
import { mapDropNulls } from '../../../../core/shared/array-utils'
import { traceDataFromElement, dataPathSuccess } from '../../../../core/data-tracing/data-tracing'
import type { CartoucheDataType } from '../component-section/cartouche-ui'
+import { CartoucheInspectorWrapper } from '../component-section/cartouche-control'
function filterVariableOption(option: DataPickerOption): DataPickerOption | null {
switch (option.type) {
@@ -65,7 +66,32 @@ interface MapListSourceCartoucheProps {
openOn: 'single-click' | 'double-click'
}
-export const MapListSourceCartouche = React.memo((props: MapListSourceCartoucheProps) => {
+export const MapListSourceCartoucheNavigator = React.memo((props: MapListSourceCartoucheProps) => {
+ return (
+
+
+
+ )
+})
+MapListSourceCartoucheNavigator.displayName = 'MapListSourceCartoucheNavigator'
+
+export const MapListSourceCartoucheInspector = React.memo((props: MapListSourceCartoucheProps) => {
+ return (
+
+
+
+ )
+})
+MapListSourceCartoucheInspector.displayName = 'MapListSourceCartoucheInspector'
+
+const MapListSourceCartoucheInner = React.memo((props: MapListSourceCartoucheProps) => {
const { target, openOn } = props
const originalMapExpression = useEditorState(
@@ -184,14 +210,7 @@ export const MapListSourceCartouche = React.memo((props: MapListSourceCartoucheP
)
return (
-
+
{popupIsOpen ? DataPickerComponent : null}
-
+
)
})
diff --git a/editor/src/components/navigator/navigator-item/navigator-item.tsx b/editor/src/components/navigator/navigator-item/navigator-item.tsx
index ef99437be247..73df1ee99cc7 100644
--- a/editor/src/components/navigator/navigator-item/navigator-item.tsx
+++ b/editor/src/components/navigator/navigator-item/navigator-item.tsx
@@ -79,7 +79,7 @@ import { toVSCodeExtensionMessage } from 'utopia-vscode-common'
import type { Emphasis, Icon } from 'utopia-api'
import { contextMenu } from 'react-contexify'
import { DataReferenceCartoucheControl } from '../../inspector/sections/component-section/data-reference-cartouche'
-import { MapListSourceCartouche } from '../../inspector/sections/layout-section/list-source-cartouche'
+import { MapListSourceCartoucheNavigator } from '../../inspector/sections/layout-section/list-source-cartouche'
export function getItemHeight(navigatorEntry: NavigatorEntry): number {
if (isConditionalClauseNavigatorEntry(navigatorEntry)) {
@@ -1260,7 +1260,7 @@ export const NavigatorRowLabel = React.memo((props: NavigatorRowLabelProps) => {
dispatch={props.dispatch}
selected={props.selected}
/>
- {
const renderCountAfter = renderResult.getNumberOfRenders()
// if this breaks, GREAT NEWS but update the test please :)
- expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`905`)
+ expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`910`)
expect(renderResult.getRenderInfo()).toMatchSnapshot()
})
@@ -249,7 +249,7 @@ describe('React Render Count Tests -', () => {
const renderCountAfter = renderResult.getNumberOfRenders()
// if this breaks, GREAT NEWS but update the test please :)
- expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`646`)
+ expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`649`)
expect(renderResult.getRenderInfo()).toMatchSnapshot()
})
})