@prosekit/web 0.5.6 → 0.5.8

package/dist/prosekit-web-inline-popover.d.ts

@@ -1,5 +1,81 @@
-export { InlinePopoverElement } from './_tsup-dts-rollup.js';
-export { inlinePopoverEvents } from './_tsup-dts-rollup.js';
-export { inlinePopoverProps } from './_tsup-dts-rollup.js';
-export { InlinePopoverEvents } from './_tsup-dts-rollup.js';
-export { InlinePopoverProps } from './_tsup-dts-rollup.js';
+import { BaseElementConstructor, EventDeclarations, PropDeclarations } from "@aria-ui/core";
+import { Editor } from "@prosekit/core";
+import { OverlayPositionerEvents, OverlayPositionerProps } from "@aria-ui/overlay";
+
+//#region src/components/inline-popover/inline-popover/types.d.ts
+interface InlinePopoverProps extends Omit<OverlayPositionerProps, "placement" | "offset" | "hide" | "overlap" | "inline" | "overflowPadding"> {
+  /**
+  * The ProseKit editor instance.
+  *
+  * @default null
+  * @hidden
+  */
+  editor: Editor | null;
+  /**
+  * Whether the popover is open by default when some inline content is
+  * selected.
+  *
+  * When `defaultOpen` is true, the popover will open or close based on the
+  * inline selection. When `defaultOpen` is false, the popover will never be
+  * opened unless the `open` prop is true.
+  *
+  * @default true
+  */
+  defaultOpen: boolean;
+  /**
+  * Whether the popover is open.
+  *
+  * Notice that the popover will be always hidden if the inline selection is
+  * empty.
+  *
+  * @default false
+  */
+  open: boolean;
+  /**
+  * Whether the inline popover should be dismissed when the editor receives an
+  * Escape key press.
+  *
+  * @default true
+  */
+  dismissOnEscape: boolean;
+  /**
+  * @default "top"
+  */
+  placement: OverlayPositionerProps["placement"];
+  /**
+  * @default 12
+  */
+  offset: OverlayPositionerProps["offset"];
+  /**
+  * @default true
+  */
+  hide: OverlayPositionerProps["hide"];
+  /**
+  * @default true
+  */
+  overlap: OverlayPositionerProps["overlap"];
+  /**
+  * @default true
+  */
+  inline: OverlayPositionerProps["inline"];
+  /**
+  * @default 8
+  */
+  overflowPadding: OverlayPositionerProps["overflowPadding"];
+}
+/** @internal */
+declare const inlinePopoverProps: PropDeclarations<InlinePopoverProps>;
+interface InlinePopoverEvents extends OverlayPositionerEvents {
+  /**
+  * Fired when the open state changes.
+  */
+  openChange: CustomEvent<boolean>;
+}
+/** @internal */
+declare const inlinePopoverEvents: EventDeclarations<InlinePopoverEvents>; //#endregion
+//#region src/components/inline-popover/inline-popover/element.gen.d.ts
+declare const InlinePopoverElementBase: BaseElementConstructor<InlinePopoverProps>;
+declare class InlinePopoverElement extends InlinePopoverElementBase {}
+
+//#endregion
+export { InlinePopoverElement, InlinePopoverEvents, InlinePopoverProps, inlinePopoverEvents, inlinePopoverProps };

package/dist/prosekit-web-inline-popover.js

@@ -1,185 +1,144 @@
-import {
-  useEditorExtension
-} from "./chunk-WTW6FOH3.js";
-
-// src/components/inline-popover/inline-popover/element.gen.ts
-import { defineCustomElement, registerCustomElement } from "@aria-ui/core";
-
-// src/components/inline-popover/inline-popover/setup.ts
-import {
-  createComputed,
-  createSignal,
-  useAttribute,
-  useEffect
-} from "@aria-ui/core";
+import { useEditorExtension } from "./use-editor-extension-Cc7ZG7uj.js";
+import { createComputed, createSignal, defineCustomElement, registerCustomElement, useAttribute, useEffect } from "@aria-ui/core";
+import { containsInlineNode, defineFocusChangeHandler, defineKeymap, defineUpdateHandler, isInCodeBlock, isTextSelection } from "@prosekit/core";
 import { useOverlayPositionerState } from "@aria-ui/overlay/elements";
 import { usePresence } from "@aria-ui/presence";
+import { overlayPositionerEvents as overlayPositionerEvents$1, overlayPositionerProps as overlayPositionerProps$1 } from "@aria-ui/overlay";
 
-// src/hooks/use-editor-focus-event.ts
-import {
-  defineFocusChangeHandler
-} from "@prosekit/core";
+//#region src/hooks/use-editor-focus-event.ts
+/**
+* @internal
+*/
 function useEditorFocusChangeEvent(host, editor, handler) {
-  const extension = defineFocusChangeHandler(handler);
-  useEditorExtension(host, editor, extension);
+	const extension = defineFocusChangeHandler(handler);
+	useEditorExtension(host, editor, extension);
 }
 
-// src/hooks/use-editor-update-event.ts
-import {
-  defineUpdateHandler
-} from "@prosekit/core";
+//#endregion
+//#region src/hooks/use-editor-update-event.ts
+/**
+* @internal
+*/
 function useEditorUpdateEvent(host, editor, handler) {
-  const extension = defineUpdateHandler(handler);
-  useEditorExtension(host, editor, extension);
+	const extension = defineUpdateHandler(handler);
+	useEditorExtension(host, editor, extension);
 }
 
-// src/hooks/use-keymap.ts
-import {
-  defineKeymap
-} from "@prosekit/core";
+//#endregion
+//#region src/hooks/use-keymap.ts
 function useKeymap(host, editor, keymap) {
-  const extension = defineKeymap(keymap);
-  return useEditorExtension(host, editor, extension);
+	const extension = defineKeymap(keymap);
+	useEditorExtension(host, editor, extension);
 }
 
-// src/components/inline-popover/inline-popover/virtual-selection-element.ts
-import {
-  containsInlineNode,
-  isInCodeBlock,
-  isTextSelection
-} from "@prosekit/core";
+//#endregion
+//#region src/components/inline-popover/inline-popover/virtual-selection-element.ts
 function getVirtualSelectionElement(view) {
-  if (typeof window === "undefined" || view.isDestroyed) {
-    return;
-  }
-  const selection = view.state.selection;
-  if (!selection.empty && !isInCodeBlock(selection) && isTextSelection(selection) && containsInlineNode(view.state.doc, selection.from, selection.to)) {
-    return getDomDecoration(view) || getInlineDecoration(view);
-  }
+	if (typeof window === "undefined" || view.isDestroyed) return;
+	const selection = view.state.selection;
+	if (!selection.empty && !isInCodeBlock(selection) && isTextSelection(selection) && containsInlineNode(view.state.doc, selection.from, selection.to)) return getDomDecoration(view) || getInlineDecoration(view);
 }
 function getDomDecoration(view) {
-  const range = getDomRange(view);
-  if (range) {
-    return {
-      contextElement: view.dom,
-      getBoundingClientRect: () => range.getBoundingClientRect(),
-      getClientRects: () => range.getClientRects()
-    };
-  }
+	const range = getDomRange(view);
+	if (range) return {
+		contextElement: view.dom,
+		getBoundingClientRect: () => range.getBoundingClientRect(),
+		getClientRects: () => range.getClientRects()
+	};
 }
 function getDomRange(view) {
-  const win = view.dom.ownerDocument.defaultView;
-  const selection = win?.getSelection();
-  if (!selection || selection.isCollapsed) {
-    return;
-  }
-  const range = typeof selection.rangeCount === "number" && selection.rangeCount > 0 && selection.getRangeAt(0);
-  if (!range) {
-    return;
-  }
-  return range;
+	const win = view.dom.ownerDocument.defaultView;
+	const selection = win?.getSelection();
+	if (!selection || selection.isCollapsed) return;
+	const range = typeof selection.rangeCount === "number" && selection.rangeCount > 0 && selection.getRangeAt(0);
+	if (!range) return;
+	return range;
 }
 function getInlineDecoration(view) {
-  const match = view.dom.querySelectorAll(".prosekit-virtual-selection");
-  if (match.length === 0) {
-    return;
-  }
-  if (match.length === 1) {
-    return match[0];
-  }
-  const items = Array.from(match);
-  return {
-    contextElement: items[0],
-    getBoundingClientRect: () => items[0].getBoundingClientRect(),
-    getClientRects: () => items.map((item) => item.getBoundingClientRect())
-  };
+	const match = view.dom.querySelectorAll(".prosekit-virtual-selection");
+	if (match.length === 0) return;
+	if (match.length === 1) return match[0];
+	const items = Array.from(match);
+	return {
+		contextElement: items[0],
+		getBoundingClientRect: () => items[0].getBoundingClientRect(),
+		getClientRects: () => items.map((item) => item.getBoundingClientRect())
+	};
 }
 
-// src/components/inline-popover/inline-popover/setup.ts
+//#endregion
+//#region src/components/inline-popover/inline-popover/setup.ts
 function useInlinePopover(host, { state, emit }) {
-  const { editor, defaultOpen, open, ...overlayState } = state;
-  const reference = useInlinePopoverReference(host, editor);
-  const hasReference = createComputed(() => !!reference.get());
-  useEffect(host, () => {
-    const hasReferenceValue = hasReference.get();
-    const defaultOpenValue = defaultOpen.peek();
-    const openValue = open.peek();
-    if (defaultOpenValue || openValue) {
-      emit("openChange", hasReferenceValue);
-    }
-  });
-  useEffect(host, () => {
-    const hasReferenceValue = hasReference.get();
-    const defaultOpenValue = defaultOpen.peek();
-    if (hasReferenceValue && defaultOpenValue) {
-      open.set(true);
-    } else if (!hasReferenceValue) {
-      open.set(false);
-    }
-  });
-  useKeymap(host, editor, {
-    Escape: () => {
-      if (!state.dismissOnEscape.peek() || !open.peek()) {
-        return false;
-      }
-      open.set(false);
-      emit("openChange", false);
-      return true;
-    }
-  });
-  useOverlayPositionerState(host, overlayState, { reference });
-  useAttribute(host, "data-state", () => open.get() ? "open" : "closed");
-  usePresence(host, open);
+	const { editor, defaultOpen, open,...overlayState } = state;
+	const reference = useInlinePopoverReference(host, editor);
+	const hasReference = createComputed(() => !!reference.get());
+	useEffect(host, () => {
+		const hasReferenceValue = hasReference.get();
+		const defaultOpenValue = defaultOpen.peek();
+		const openValue = open.peek();
+		if (defaultOpenValue || openValue) emit("openChange", hasReferenceValue);
+	});
+	useEffect(host, () => {
+		const hasReferenceValue = hasReference.get();
+		const defaultOpenValue = defaultOpen.peek();
+		if (hasReferenceValue && defaultOpenValue) open.set(true);
+		else if (!hasReferenceValue) open.set(false);
+	});
+	useKeymap(host, editor, { Escape: () => {
+		if (!state.dismissOnEscape.peek() || !open.peek()) return false;
+		open.set(false);
+		emit("openChange", false);
+		return true;
+	} });
+	useOverlayPositionerState(host, overlayState, { reference });
+	useAttribute(host, "data-state", () => open.get() ? "open" : "closed");
+	usePresence(host, open);
 }
 function useInlinePopoverReference(host, editor) {
-  const reference = createSignal(null);
-  let editorFocused = false;
-  useEditorFocusChangeEvent(host, editor, (focus) => {
-    editorFocused = focus;
-  });
-  useEditorUpdateEvent(host, editor, (view) => {
-    const isPopoverFocused = !editorFocused && host.contains(host.ownerDocument.activeElement);
-    if (isPopoverFocused) {
-      return;
-    }
-    reference.set(getVirtualSelectionElement(view) || null);
-  });
-  return reference;
+	const reference = createSignal(null);
+	let editorFocused = false;
+	useEditorFocusChangeEvent(host, editor, (focus) => {
+		editorFocused = focus;
+	});
+	useEditorUpdateEvent(host, editor, (view) => {
+		const isPopoverFocused = !editorFocused && host.contains(host.ownerDocument.activeElement);
+		if (isPopoverFocused) return;
+		reference.set(getVirtualSelectionElement(view) || null);
+	});
+	return reference;
 }
 
-// src/components/inline-popover/inline-popover/types.ts
-import {
-  overlayPositionerEvents,
-  overlayPositionerProps
-} from "@aria-ui/overlay";
-var inlinePopoverProps = Object.freeze({
-  ...overlayPositionerProps,
-  editor: { default: null },
-  defaultOpen: { default: true },
-  open: { default: false },
-  dismissOnEscape: { default: true },
-  placement: { default: "top" },
-  offset: { default: 12 },
-  hide: { default: true },
-  overlap: { default: true },
-  inline: { default: true },
-  overflowPadding: { default: 8 }
+//#endregion
+//#region src/components/inline-popover/inline-popover/types.ts
+/** @internal */
+const inlinePopoverProps = Object.freeze({
+	...overlayPositionerProps$1,
+	editor: { default: null },
+	defaultOpen: { default: true },
+	open: { default: false },
+	dismissOnEscape: { default: true },
+	placement: { default: "top" },
+	offset: { default: 12 },
+	hide: { default: true },
+	overlap: { default: true },
+	inline: { default: true },
+	overflowPadding: { default: 8 }
 });
-var inlinePopoverEvents = {
-  ...overlayPositionerEvents,
-  openChange: {}
+/** @internal */
+const inlinePopoverEvents = {
+	...overlayPositionerEvents$1,
+	openChange: {}
 };
 
-// src/components/inline-popover/inline-popover/element.gen.ts
-var InlinePopoverElement = class extends defineCustomElement({
-  props: inlinePopoverProps,
-  events: inlinePopoverEvents,
-  setup: useInlinePopover
-}) {
-};
+//#endregion
+//#region src/components/inline-popover/inline-popover/element.gen.ts
+const InlinePopoverElementBase = defineCustomElement({
+	props: inlinePopoverProps,
+	events: inlinePopoverEvents,
+	setup: useInlinePopover
+});
+var InlinePopoverElement = class extends InlinePopoverElementBase {};
 registerCustomElement("prosekit-inline-popover", InlinePopoverElement);
-export {
-  InlinePopoverElement,
-  inlinePopoverEvents,
-  inlinePopoverProps
-};
+
+//#endregion
+export { InlinePopoverElement, inlinePopoverEvents, inlinePopoverProps };

package/dist/prosekit-web-popover.d.ts

@@ -1,15 +1,34 @@
-export { PopoverContentElement } from './_tsup-dts-rollup.js';
-export { popoverContentEvents } from './_tsup-dts-rollup.js';
-export { popoverContentProps } from './_tsup-dts-rollup.js';
-export { PopoverContentEvents } from './_tsup-dts-rollup.js';
-export { PopoverContentProps } from './_tsup-dts-rollup.js';
-export { PopoverRootElement } from './_tsup-dts-rollup.js';
-export { popoverRootEvents } from './_tsup-dts-rollup.js';
-export { popoverRootProps } from './_tsup-dts-rollup.js';
-export { PopoverRootEvents } from './_tsup-dts-rollup.js';
-export { PopoverRootProps } from './_tsup-dts-rollup.js';
-export { PopoverTriggerElement } from './_tsup-dts-rollup.js';
-export { popoverTriggerEvents } from './_tsup-dts-rollup.js';
-export { popoverTriggerProps } from './_tsup-dts-rollup.js';
-export { PopoverTriggerEvents } from './_tsup-dts-rollup.js';
-export { PopoverTriggerProps } from './_tsup-dts-rollup.js';
+import { BaseElementConstructor } from "@aria-ui/core";
+import { PopoverContentEvents as PopoverContentEvents$1, PopoverContentProps as PopoverContentProps$1, PopoverRootEvents as PopoverRootEvents$1, PopoverRootProps as PopoverRootProps$1, PopoverTriggerEvents as PopoverTriggerEvents$1, PopoverTriggerProps as PopoverTriggerProps$1, popoverContentEvents, popoverContentProps, popoverRootEvents, popoverRootProps, popoverTriggerEvents, popoverTriggerProps } from "@aria-ui/popover/elements";
+
+//#region src/components/popover/popover-content/types.d.ts
+interface PopoverContentProps extends PopoverContentProps$1 {}
+interface PopoverContentEvents extends PopoverContentEvents$1 {}
+
+//#endregion
+//#region src/components/popover/popover-content/element.gen.d.ts
+declare const PopoverContentElementBase: BaseElementConstructor<PopoverContentProps>;
+declare class PopoverContentElement extends PopoverContentElementBase {}
+
+//#endregion
+//#region src/components/popover/popover-root/types.d.ts
+interface PopoverRootProps extends PopoverRootProps$1 {}
+interface PopoverRootEvents extends PopoverRootEvents$1 {}
+
+//#endregion
+//#region src/components/popover/popover-root/element.gen.d.ts
+declare const PopoverRootElementBase: BaseElementConstructor<PopoverRootProps>;
+declare class PopoverRootElement extends PopoverRootElementBase {}
+
+//#endregion
+//#region src/components/popover/popover-trigger/types.d.ts
+interface PopoverTriggerProps extends PopoverTriggerProps$1 {}
+interface PopoverTriggerEvents extends PopoverTriggerEvents$1 {}
+
+//#endregion
+//#region src/components/popover/popover-trigger/element.gen.d.ts
+declare const PopoverTriggerElementBase: BaseElementConstructor<PopoverTriggerProps>;
+declare class PopoverTriggerElement extends PopoverTriggerElementBase {}
+
+//#endregion
+export { PopoverContentElement, PopoverContentEvents, PopoverContentProps, PopoverRootElement, PopoverRootEvents, PopoverRootProps, PopoverTriggerElement, PopoverTriggerEvents, PopoverTriggerProps, popoverContentEvents, popoverContentProps, popoverRootEvents, popoverRootProps, popoverTriggerEvents, popoverTriggerProps };

package/dist/prosekit-web-popover.js

@@ -1,73 +1,34 @@
-// src/components/popover/popover-content/element.gen.ts
 import { defineCustomElement, registerCustomElement } from "@aria-ui/core";
-
-// src/components/popover/popover-content/setup.ts
-import { usePopoverContent } from "@aria-ui/popover/elements";
-
-// src/components/popover/popover-content/types.ts
-import {
-  popoverContentEvents,
-  popoverContentProps
-} from "@aria-ui/popover/elements";
-
-// src/components/popover/popover-content/element.gen.ts
-var PopoverContentElement = class extends defineCustomElement({
-  props: popoverContentProps,
-  events: popoverContentEvents,
-  setup: usePopoverContent
-}) {
-};
+import { popoverContentEvents, popoverContentProps, popoverRootEvents, popoverRootProps, popoverTriggerEvents, popoverTriggerProps, usePopoverContent, usePopoverRoot, usePopoverTrigger } from "@aria-ui/popover/elements";
+
+//#region src/components/popover/popover-content/element.gen.ts
+const PopoverContentElementBase = defineCustomElement({
+	props: popoverContentProps,
+	events: popoverContentEvents,
+	setup: usePopoverContent
+});
+var PopoverContentElement = class extends PopoverContentElementBase {};
 registerCustomElement("prosekit-popover-content", PopoverContentElement);
 
-// src/components/popover/popover-root/element.gen.ts
-import { defineCustomElement as defineCustomElement2, registerCustomElement as registerCustomElement2 } from "@aria-ui/core";
-
-// src/components/popover/popover-root/setup.ts
-import { usePopoverRoot } from "@aria-ui/popover/elements";
-
-// src/components/popover/popover-root/types.ts
-import {
-  popoverRootEvents,
-  popoverRootProps
-} from "@aria-ui/popover/elements";
-
-// src/components/popover/popover-root/element.gen.ts
-var PopoverRootElement = class extends defineCustomElement2({
-  props: popoverRootProps,
-  events: popoverRootEvents,
-  setup: usePopoverRoot
-}) {
-};
-registerCustomElement2("prosekit-popover-root", PopoverRootElement);
-
-// src/components/popover/popover-trigger/element.gen.ts
-import { defineCustomElement as defineCustomElement3, registerCustomElement as registerCustomElement3 } from "@aria-ui/core";
-
-// src/components/popover/popover-trigger/setup.ts
-import { usePopoverTrigger } from "@aria-ui/popover/elements";
-
-// src/components/popover/popover-trigger/types.ts
-import {
-  popoverTriggerEvents,
-  popoverTriggerProps
-} from "@aria-ui/popover/elements";
-
-// src/components/popover/popover-trigger/element.gen.ts
-var PopoverTriggerElement = class extends defineCustomElement3({
-  props: popoverTriggerProps,
-  events: popoverTriggerEvents,
-  setup: usePopoverTrigger
-}) {
-};
-registerCustomElement3("prosekit-popover-trigger", PopoverTriggerElement);
-export {
-  PopoverContentElement,
-  PopoverRootElement,
-  PopoverTriggerElement,
-  popoverContentEvents,
-  popoverContentProps,
-  popoverRootEvents,
-  popoverRootProps,
-  popoverTriggerEvents,
-  popoverTriggerProps
-};
+//#endregion
+//#region src/components/popover/popover-root/element.gen.ts
+const PopoverRootElementBase = defineCustomElement({
+	props: popoverRootProps,
+	events: popoverRootEvents,
+	setup: usePopoverRoot
+});
+var PopoverRootElement = class extends PopoverRootElementBase {};
+registerCustomElement("prosekit-popover-root", PopoverRootElement);
+
+//#endregion
+//#region src/components/popover/popover-trigger/element.gen.ts
+const PopoverTriggerElementBase = defineCustomElement({
+	props: popoverTriggerProps,
+	events: popoverTriggerEvents,
+	setup: usePopoverTrigger
+});
+var PopoverTriggerElement = class extends PopoverTriggerElementBase {};
+registerCustomElement("prosekit-popover-trigger", PopoverTriggerElement);
+
+//#endregion
+export { PopoverContentElement, PopoverRootElement, PopoverTriggerElement, popoverContentEvents, popoverContentProps, popoverRootEvents, popoverRootProps, popoverTriggerEvents, popoverTriggerProps };

package/dist/prosekit-web-resizable.d.ts

@@ -1,10 +1,52 @@
-export { ResizableHandleElement } from './_tsup-dts-rollup.js';
-export { resizableHandleEvents } from './_tsup-dts-rollup.js';
-export { resizableHandleProps } from './_tsup-dts-rollup.js';
-export { ResizableHandleEvents } from './_tsup-dts-rollup.js';
-export { ResizableHandleProps } from './_tsup-dts-rollup.js';
-export { ResizableRootElement } from './_tsup-dts-rollup.js';
-export { resizableRootEvents } from './_tsup-dts-rollup.js';
-export { resizableRootProps } from './_tsup-dts-rollup.js';
-export { ResizableRootEvents } from './_tsup-dts-rollup.js';
-export { ResizableRootProps } from './_tsup-dts-rollup.js';
+import { BaseElementConstructor, EventDeclarations, PropDeclarations } from "@aria-ui/core";
+
+//#region src/components/resizable/resizable-handle/types.d.ts
+interface ResizableHandleProps {
+  /**
+  * The position of the handle.
+  *
+  * @default "bottom-right"
+  */
+  position: "top" | "right" | "bottom" | "left" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
+}
+/** @internal */
+declare const resizableHandleProps: PropDeclarations<ResizableHandleProps>;
+/** @internal */
+interface ResizableHandleEvents {}
+/** @internal */
+declare const resizableHandleEvents: EventDeclarations<ResizableHandleEvents>;
+
+//#endregion
+//#region src/components/resizable/resizable-handle/element.gen.d.ts
+declare const ResizableHandleElementBase: BaseElementConstructor<ResizableHandleProps>;
+declare class ResizableHandleElement extends ResizableHandleElementBase {}
+
+//#endregion
+//#region src/components/resizable/resizable-root/types.d.ts
+interface ResizableRootProps {
+  width: number | null;
+  height: number | null;
+  aspectRatio: number | null;
+}
+/** @internal */
+declare const resizableRootProps: PropDeclarations<ResizableRootProps>;
+interface ResizableRootEvents {
+  resizeStart: CustomEvent<{
+    width: number;
+    height: number;
+  }>;
+  resizeEnd: CustomEvent<{
+    width: number;
+    height: number;
+  }>;
+}
+/** @internal */
+declare const resizableRootEvents: EventDeclarations<ResizableRootEvents>;
+
+//#endregion
+//#region src/components/resizable/resizable-root/element.gen.d.ts
+declare const ResizableRootElementBase: BaseElementConstructor<ResizableRootProps>;
+declare class ResizableRootElement extends ResizableRootElementBase {}
+
+//#endregion
+export { ResizableHandleElement, ResizableHandleEvents, ResizableHandleProps, ResizableRootElement, ResizableRootEvents, ResizableRootProps, resizableHandleEvents, resizableHandleProps, resizableRootEvents, resizableRootProps };