Sebastian Markbåge 2e4db3344f Use valid CSS selectors in useId format (#32001) ...

For the `useId` algorithm we used colon `:` before and after.
https://github.com/facebook/react/pull/23360

This avoids collisions in general by using an unusual characters. It
also avoids collisions when concatenated with some other ID.
Unfortunately, `:` is not a valid character in `view-transition-name`.

This PR swaps the format from:

```
:r123:
```

To the unicode:

```
«r123»
```

Which is valid CSS selectors. This also allows them being used for
`querySelector()` which we didn't really find a legit use for but seems
ok-ish.

That way you can get a view-transition-name that you can manually
reference. E.g. to generate styles:

```js
const id = useId();
return <>
  <style>{`
    ::view-transition-group(${id}) { ... }
    ::view-transition-old(${id}) { ... }
    ::view-transition-new(${id}) { ... }
  `}</style>
  <ViewTransition name={id}>...</ViewTransition>
</>;
```

2025-02-25 12:45:18 -05:00

..

__tests__

Use valid CSS selectors in useId format (#32001)

2025-02-25 12:45:18 -05:00

ReactDebugHooks.js

Add useSwipeTransition Hook Behind Experimental Flag (#32373)

2025-02-13 16:06:01 -05:00

ReactDebugTools.js

[Codemod] Update copyright header to Meta (#25315)

2022-10-18 11:19:24 -04:00