Switch from JSX.Element to React.JSX.Element

The global JSX namespace has been deprecated for around two and a half
years now in favor of using React.JSX, and as of the type declarations
for React 19, it's been fully removed. By switching to the new
namespace, this package maintains compatibility with React 19.

Author: ebroder

.changeset/bright-turtles-reply.md

@@ -0,0 +1,5 @@
+---
+'slate-react': patch
+---
+
+Update TypeScript declarations for React v19 by switching from JSX.Element to React.JSX.Element

docs/libraries/slate-react/editable.md

@@ -1,6 +1,6 @@
 # Editable component
 
-## `Editable(props: EditableProps): JSX.Element`
+## `Editable(props: EditableProps): React.JSX.Element`
 
 The `Editable` component is the main editing component. Note that it must be inside a `Slate` component.
 
@@ -16,9 +16,9 @@ type EditableProps = {
   readOnly?: boolean
   role?: string
   style?: React.CSSProperties
-  renderElement?: (props: RenderElementProps) => JSX.Element
-  renderLeaf?: (props: RenderLeafProps) => JSX.Element
-  renderPlaceholder?: (props: RenderPlaceholderProps) => JSX.Element
+  renderElement?: (props: RenderElementProps) => React.JSX.Element
+  renderLeaf?: (props: RenderLeafProps) => React.JSX.Element
+  renderPlaceholder?: (props: RenderPlaceholderProps) => React.JSX.Element
   scrollSelectionIntoView?: (editor: ReactEditor, domRange: DOMRange) => void
   as?: React.ElementType
   disableDefaultStyles?: boolean
@@ -39,7 +39,7 @@ If this prop is omitted or set to false, the editor remains in the default "edit
 
 This prop is particularly useful when you want to display text or rich media content without allowing users to edit it, such as when displaying published content or a preview of the user's input.
 
-#### `renderElement?: (props: RenderElementProps) => JSX.Element`
+#### `renderElement?: (props: RenderElementProps) => React.JSX.Element`
 
 The `renderElement` prop is a function used to render a custom component for a specific type of Element node in the Slate.js document model.
 
@@ -108,7 +108,7 @@ const DefaultElement = props => {
 }
 ```
 
-#### `renderLeaf?: (props: RenderLeafProps) => JSX.Element`
+#### `renderLeaf?: (props: RenderLeafProps) => React.JSX.Element`
 
 The `renderLeaf` prop allows you to customize the rendering of leaf nodes in the document tree of your Slate editor. A "leaf" in Slate is the smallest chunk of text and its associated formatting attributes.
 
@@ -151,7 +151,7 @@ Example usage:
 />
 ```
 
-#### `renderText?: (props: RenderTextProps) => JSX.Element`
+#### `renderText?: (props: RenderTextProps) => React.JSX.Element`
 
 The `renderText` prop allows you to customize the rendering of the container element for a Text node in the Slate editor. This is useful when you need to wrap the entire text node content or add elements associated with the text node as a whole, regardless of how decorations might split the text into multiple leaves.
 
@@ -183,7 +183,7 @@ Example usage:
 />
 ```
 
-#### `renderPlaceholder?: (props: RenderPlaceholderProps) => JSX.Element`
+#### `renderPlaceholder?: (props: RenderPlaceholderProps) => React.JSX.Element`
 
 The `renderPlaceholder` prop allows you to customize how the placeholder of the Slate.js `Editable` component is rendered when the editor is empty. The placeholder will only be shown when the editor's content is empty.
 

docs/libraries/slate-react/slate.md

@@ -1,6 +1,6 @@
 # Slate Component
 
-## `Slate(props: SlateProps): JSX.Element`
+## `Slate(props: SlateProps): React.JSX.Element`
 
 The `Slate` component must include somewhere in its `children` the `Editable` component.
 

packages/slate-react/src/components/chunk-tree.tsx

@@ -13,8 +13,8 @@ const defaultRenderChunk = ({ children }: RenderChunkProps) => children
 const ChunkAncestor = <C extends TChunkAncestor>(props: {
   root: TChunkTree
   ancestor: C
-  renderElement: (node: Element, index: number, key: Key) => JSX.Element
-  renderChunk?: (props: RenderChunkProps) => JSX.Element
+  renderElement: (node: Element, index: number, key: Key) => React.JSX.Element
+  renderChunk?: (props: RenderChunkProps) => React.JSX.Element
 }) => {
   const {
     root,

packages/slate-react/src/components/editable.tsx

@@ -158,11 +158,11 @@ export type EditableProps = {
   readOnly?: boolean
   role?: string
   style?: React.CSSProperties
-  renderElement?: (props: RenderElementProps) => JSX.Element
-  renderChunk?: (props: RenderChunkProps) => JSX.Element
-  renderLeaf?: (props: RenderLeafProps) => JSX.Element
-  renderText?: (props: RenderTextProps) => JSX.Element
-  renderPlaceholder?: (props: RenderPlaceholderProps) => JSX.Element
+  renderElement?: (props: RenderElementProps) => React.JSX.Element
+  renderChunk?: (props: RenderChunkProps) => React.JSX.Element
+  renderLeaf?: (props: RenderLeafProps) => React.JSX.Element
+  renderText?: (props: RenderTextProps) => React.JSX.Element
+  renderPlaceholder?: (props: RenderPlaceholderProps) => React.JSX.Element
   scrollSelectionIntoView?: (editor: ReactEditor, domRange: DOMRange) => void
   as?: React.ElementType
   disableDefaultStyles?: boolean

packages/slate-react/src/components/element.tsx

@@ -34,11 +34,11 @@ const defaultRenderElement = (props: RenderElementProps) => (
 const Element = (props: {
   decorations: DecoratedRange[]
   element: SlateElement
-  renderElement?: (props: RenderElementProps) => JSX.Element
-  renderChunk?: (props: RenderChunkProps) => JSX.Element
-  renderPlaceholder: (props: RenderPlaceholderProps) => JSX.Element
-  renderText?: (props: RenderTextProps) => JSX.Element
-  renderLeaf?: (props: RenderLeafProps) => JSX.Element
+  renderElement?: (props: RenderElementProps) => React.JSX.Element
+  renderChunk?: (props: RenderChunkProps) => React.JSX.Element
+  renderPlaceholder: (props: RenderPlaceholderProps) => React.JSX.Element
+  renderText?: (props: RenderTextProps) => React.JSX.Element
+  renderLeaf?: (props: RenderLeafProps) => React.JSX.Element
 }) => {
   const {
     decorations: parentDecorations,

packages/slate-react/src/components/leaf.tsx

@@ -48,8 +48,8 @@ const Leaf = (props: {
   isLast: boolean
   leaf: Text
   parent: Element
-  renderPlaceholder: (props: RenderPlaceholderProps) => JSX.Element
-  renderLeaf?: (props: RenderLeafProps) => JSX.Element
+  renderPlaceholder: (props: RenderPlaceholderProps) => React.JSX.Element
+  renderLeaf?: (props: RenderLeafProps) => React.JSX.Element
   text: Text
   leafPosition?: LeafPosition
 }) => {

packages/slate-react/src/components/text.tsx

@@ -25,9 +25,9 @@ const Text = (props: {
   decorations: DecoratedRange[]
   isLast: boolean
   parent: Element
-  renderPlaceholder: (props: RenderPlaceholderProps) => JSX.Element
-  renderLeaf?: (props: RenderLeafProps) => JSX.Element
-  renderText?: (props: RenderTextProps) => JSX.Element
+  renderPlaceholder: (props: RenderPlaceholderProps) => React.JSX.Element
+  renderLeaf?: (props: RenderLeafProps) => React.JSX.Element
+  renderText?: (props: RenderTextProps) => React.JSX.Element
   text: SlateText
 }) => {
   const {

packages/slate-react/src/hooks/use-children.tsx

@@ -30,11 +30,11 @@ import { ElementContext } from './use-element'
 const useChildren = (props: {
   decorations: DecoratedRange[]
   node: Ancestor
-  renderElement?: (props: RenderElementProps) => JSX.Element
-  renderChunk?: (props: RenderChunkProps) => JSX.Element
-  renderPlaceholder: (props: RenderPlaceholderProps) => JSX.Element
-  renderText?: (props: RenderTextProps) => JSX.Element
-  renderLeaf?: (props: RenderLeafProps) => JSX.Element
+  renderElement?: (props: RenderElementProps) => React.JSX.Element
+  renderChunk?: (props: RenderChunkProps) => React.JSX.Element
+  renderPlaceholder: (props: RenderPlaceholderProps) => React.JSX.Element
+  renderText?: (props: RenderTextProps) => React.JSX.Element
+  renderLeaf?: (props: RenderLeafProps) => React.JSX.Element
 }) => {
   const {
     decorations,