## Description
rename of #3609
## New
- Native Select
## Changes
- Improved detection algorithm to include invisible elements (like
`option` or `display:none`).
- Added interceptor to handle pointer down events, preventing select
from opening.
- Enhanced element selection on canvas to support `display:none` and
option selection.
- Fixed prop types generation (previously, the value property was
broken).
- Memory props has effect on canvas only
- Recreate component on Canvas in case of defaultValue has changed
## Steps for reproduction
Add `Select` see it works
## 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:
5de6)
- [ ] 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
Closes https://github.com/webstudio-is/webstudio/issues/2973
## Description
When a new instance is added to the canvas, it should be scrolled into
the view when its outside of viewport
## Steps for reproduction
1. click add new component when body has lots of instances and is
scrollable
2. see canvas is being scrolled to the inserted instance
3. same thing for marketplace items
4. no changes for drag&drop
## Code Review
- [ ] hi @TrySound , 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:
5de6)
- [ ] 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.example`
and the `builder/env-check.js` if mandatory
## Description
Pure renaming, nothing else.
## Code Review
- [ ] hi @TrySound , 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:
5de6)
- [ ] 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.example`
and the `builder/env-check.js` if mandatory
Succeeds https://github.com/webstudio-is/webstudio/pull/2136 in more
simple way. Active states are preresolved for everything except local
styles. And local styles shown as overwritten when defined state is
active.
Fixes
https://discord.com/channels/955905230107738152/1177028091227418654
## Steps for reproduction
1. create form component
2. choose error state
3. set background red
4. go to error state in style source menu
5. should be "remote" label
6. set background green
7. go to stateless style source
8. reset background color
9. should be "overwritten" label
Ref https://github.com/webstudio-is/webstudio/issues/2532
Here refactored props values computing to reuse in both canvas and
settings panel and support future collections which need to provide
different values for same variables.
Grouped whole logic and covered with tests.
## Testing
- check image src is working
- check link switch page in preview
## Description
https://discord.com/channels/955905230107738152/1140198766364860416
## Steps for reproduction
1. click button
2. expect xyz
## 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:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio-builder/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `builder/env-check.js` if mandatory
## Description
Removes `div style="display:contents"` arount Radix etc Components.
Below in Implementation is written why SelectedInstanceConnector was
moved into standalone root level hook.
In short
- [x] - No issues with visually hidden components.
- [x] - Allows us to not use refs for the builder support. (Now our
components can be without refs)
- [ ] - cc @TrySound ContentEditable could also use
getAllElementsBoundingBox from domUtils to get element ref this will
allow to remove useRef from WebstudioDevComponent
Changes from previous behavior:
- Now on preview elements are not selected (now is like in webflow).
- On changing marign etc we do not hide outline as before
## Implementation:
having `instanceSelector` we can
- Find all elements with attribute `data-ws-selector` which ends with
`instanceSelector`
- Then find "root/parent" elements of found elements. _(We can find few
subtrees)_
- Then use that elements instead of wrapper element.
This works fine with tree hovering and selections.
This allows us to not use `refs` inside our WebstudioDevComponent at
all.
### Below is why SelectedInstanceConnector was rewritten
The issue arises when such element is duplicated by radix into
VisuallyHidden element.
There is no way to detect now inside `WebstudioComponentDev` does
current Component is inside VisuallyHidden
(We have no reference element to detect that.)
So current approach makes any additional changes useless.
I'm going to close this. And leave just for example
## Steps for reproduction
1. click button
2. expect xyz
## 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:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio-builder/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `builder/env-check.js` if mandatory
Ivan Starkov
