From ab61d499387bead27a415d9258f074d70b3a76f8 Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Wed, 9 Oct 2024 13:40:12 +0200
Subject: [PATCH] Use `auto` as value for Auto Flow dropdown (#6504)

**Problem:**

The `Auto Flow` dropdown should show `Auto` as its label instead of
`Unset` when the dropdown is closed, but still show `Unset` if the
dropdown is open _and_ the current value is not `auto` (or not set).

**Fix:**


https://github.com/user-attachments/assets/99bbfe1e-78f2-4512-afbb-a598985b0a0f

Fixes #6503
---
 .../src/components/inspector/flex-section.tsx |  6 ++--
 editor/src/uuiui/radix-components.tsx         | 35 ++++++++++++++++---
 2 files changed, 34 insertions(+), 7 deletions(-)

diff --git a/editor/src/components/inspector/flex-section.tsx b/editor/src/components/inspector/flex-section.tsx
index 6eed0980a59a..8afca94bc45f 100644
--- a/editor/src/components/inspector/flex-section.tsx
+++ b/editor/src/components/inspector/flex-section.tsx
@@ -967,8 +967,8 @@ function selectOption(value: GridAutoFlow) {
 }
 
 const unsetSelectOption = regularRadixSelectOption({
-  label: 'unset',
-  value: 'unset',
+  label: (isOpen, currentValue) => (isOpen && currentValue !== 'auto' ? 'unset' : 'auto'),
+  value: 'auto',
   placeholder: true,
 })
 
@@ -1026,7 +1026,7 @@ const AutoFlowControl = React.memo(() => {
         selectededViewsRef.current.map((path) =>
           applyCommandsAction([
             updateBulkProperties('always', path, [
-              value === 'unset'
+              value === 'auto'
                 ? propertyToDelete(PP.create('style', 'gridAutoFlow'))
                 : propertyToSet(PP.create('style', 'gridAutoFlow'), value),
             ]),
diff --git a/editor/src/uuiui/radix-components.tsx b/editor/src/uuiui/radix-components.tsx
index ad8787c65c6d..86ed787124af 100644
--- a/editor/src/uuiui/radix-components.tsx
+++ b/editor/src/uuiui/radix-components.tsx
@@ -228,7 +228,7 @@ Separator.displayName = 'Separator'
 type RegularRadixSelectOption = {
   type: 'REGULAR'
   value: string
-  label: string
+  label: string | ((isOpen: boolean, currentValue: string | null) => string)
   icon?: IcnProps
   placeholder?: boolean
 }
@@ -254,6 +254,20 @@ export function separatorRadixSelectOption(): Separator {
 
 export type RadixSelectOption = RegularRadixSelectOption | Separator
 
+function optionLabelToString(
+  option: RegularRadixSelectOption | null,
+  isOpen: boolean,
+  currentValue: string | null,
+): string | null {
+  if (option == null) {
+    return null
+  }
+
+  const label = typeof option.label === 'string' ? option.label : option.label(isOpen, currentValue)
+
+  return `${label.charAt(0).toUpperCase()}${label.slice(1)}`
+}
+
 export const RadixSelect = React.memo(
   (props: {
     id: string
@@ -269,11 +283,24 @@ export const RadixSelect = React.memo(
       e.stopPropagation()
     }, [])
 
+    const { onOpenChange: propsOnOpenChange } = props
+
+    const [isOpen, setIsOpen] = React.useState(false)
+    const onOpenChange = React.useCallback(
+      (open: boolean) => {
+        setIsOpen(open)
+        propsOnOpenChange?.(open)
+      },
+      [propsOnOpenChange],
+    )
+
+    const valueLabel = optionLabelToString(props.value ?? null, isOpen, props.value?.value ?? null)
+
     return (
       <Select.Root
         value={props.value?.value}
         onValueChange={props.onValueChange}
-        onOpenChange={props.onOpenChange}
+        onOpenChange={onOpenChange}
       >
         <Select.Trigger
           style={{
@@ -297,7 +324,7 @@ export const RadixSelect = React.memo(
             },
           }}
         >
-          <Select.Value placeholder={props.value?.label} />
+          <Select.Value placeholder={valueLabel} />
           <Select.Icon style={{ width: 12, height: 12 }}>
             <SmallerIcons.ExpansionArrowDown />
           </Select.Icon>
@@ -339,7 +366,7 @@ export const RadixSelect = React.memo(
                   )
                 }
 
-                const label = `${option.label.charAt(0).toUpperCase()}${option.label.slice(1)}`
+                const label = optionLabelToString(option, isOpen, props.value?.value ?? null)
                 return (
                   <Select.Item
                     key={`select-option-${props.id}-${index}`}