fix: Allow reset optional items (#4759)

## Description

Allow resetting optional items in the following cases:
1. The item has a value and undefined defaultValue
2. The item has a value, defaultValue is not undefined and is not equal
to value

- [x] - Fix placeholder is not shown

## Todo Next PR 
Remove empty prop check
https://github.com/webstudio-is/webstudio/blob/42af9210934f0c5c8fb1f1943bd66cd086c85032/packages/sdk-components-react/src/head-meta.tsx#L27
Switch on undefined.

## Steps for reproduction

Case 1. 

- [x] - HeadSlot/HeadLink

Select value, reset value

<img width="252" alt="image"
src="https://github.com/user-attachments/assets/1944c6f0-32c5-4dc5-aa3e-f2b8cf1593a7"
/>

Case 2. 

- [x] - Youtube Component
Unselect 
<img width="244" alt="image"
src="https://github.com/user-attachments/assets/a55e9105-1c4b-4439-8f2b-f1af05a15964"
/>

Reset to default.


## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file

Author: istarkov

apps/builder/app/builder/features/settings-panel/props-section/props-section.tsx

@@ -68,7 +68,11 @@ const renderProperty = (
     prop,
     computedValue: propValues.get(propName) ?? meta.defaultValue,
     propName,
-    deletable: deletable ?? false,
+    deletable:
+      deletable ??
+      ((meta.defaultValue === undefined || meta.defaultValue !== prop?.value) &&
+        meta.required === false &&
+        prop !== undefined),
     onDelete: () => {
       if (prop) {
         logic.handleDelete(prop);

packages/design-system/src/components/select.tsx

@@ -7,6 +7,8 @@ import {
   useMemo,
   forwardRef,
   useState,
+  useEffect,
+  useRef,
 } from "react";
 import { styled, theme } from "../stitches.config";
 import {
@@ -221,9 +223,23 @@ const SelectBase = <Option,>(
 
   const descriptions = options.map((option) => getDescription?.(option));
 
+  // Allow reset select fix https://github.com/radix-ui/primitives/issues/2706
+  const [selectResetKeyFix, setSelectResetKeyFix] = useState(0);
+  const prevValue = useRef(value);
+
+  useEffect(() => {
+    if (prevValue.current !== undefined && value === undefined) {
+      setSelectResetKeyFix((prev) => prev + 1);
+    }
+
+    prevValue.current = value;
+  }, [value]);
+
   return (
     <Primitive.Root
+      key={selectResetKeyFix}
       name={name}
+      // null because of https://github.com/radix-ui/primitives/issues/2706
       value={value === undefined ? undefined : getValue(value)}
       defaultValue={
         defaultValue === undefined ? undefined : getValue(defaultValue)