@prosekit/react 0.7.0-beta.0 → 0.7.0-beta.1

package/src/components/inline-popover/inline-popover-positioner.gen.ts

@@ -0,0 +1,175 @@
+/**
+ * This file is auto-generated by the "@aria-ui/cli" tool. Do not edit this file directly.
+ */
+
+import { registerInlinePopoverPositionerElement, type InlinePopoverPositionerElement, type InlinePopoverPositionerProps as InlinePopoverPositionerElementProps } from '@prosekit/web/inline-popover';
+import { createElement, forwardRef, useCallback, useRef, type ForwardedRef, type ForwardRefExoticComponent, type HTMLAttributes, type RefAttributes, useLayoutEffect } from 'react';
+
+/**
+ * Props for the {@link InlinePopoverPositioner} React component.
+ *
+ * @public
+ */
+export interface InlinePopoverPositionerProps extends HTMLAttributes<InlinePopoverPositionerElement> {
+  /**
+   * The initial placement of the floating element
+   *
+   * @default "top"
+   */
+  placement?: InlinePopoverPositionerElementProps['placement'];
+  /**
+   * The distance between the reference and floating element.
+   *
+   * @default 12
+   */
+  offset?: InlinePopoverPositionerElementProps['offset'];
+  /**
+   * Whether to hide the floating element when the reference element or the
+   * floating element is fully clipped.
+   *
+   * @default true
+   */
+  hide?: InlinePopoverPositionerElementProps['hide'];
+  /**
+   * Whether the floating element can overlap the reference element to keep it
+   * in view.
+   *
+   * @default true
+   */
+  overlap?: InlinePopoverPositionerElementProps['overlap'];
+  /**
+   * Whether to improve positioning for inline reference elements that span over
+   * multiple lines.
+   *
+   * @default true
+   */
+  inline?: InlinePopoverPositionerElementProps['inline'];
+  /**
+   * Describes the virtual padding around the boundary to check for overflow.
+   *
+   * @default 8
+   */
+  overflowPadding?: InlinePopoverPositionerElementProps['overflowPadding'];
+  /**
+   * The strategy to use for positioning
+   *
+   * @default "absolute"
+   */
+  strategy?: InlinePopoverPositionerElementProps['strategy'];
+  /**
+   * Options to activate auto-update listeners
+   *
+   * @see https://floating-ui.com/docs/autoUpdate
+   *
+   * @default true
+   */
+  autoUpdate?: InlinePopoverPositionerElementProps['autoUpdate'];
+  /**
+   * Whether to use the browser Popover API to place the floating element on
+   * top of other page content.
+   *
+   * @default true
+   */
+  hoist?: InlinePopoverPositionerElementProps['hoist'];
+  /**
+   * Whether to flip the `placement` in order to keep it in view when the
+   * preferred placement(s) will overflow the clipping boundary. You can also
+   * provide an array of placements to try sequentially if the preferred
+   * `placement` does not fit.
+   *
+   * @default true
+   */
+  flip?: InlinePopoverPositionerElementProps['flip'];
+  /**
+   * Whether the floating element should shift to keep it in view.
+   *
+   * @default true
+   */
+  shift?: InlinePopoverPositionerElementProps['shift'];
+  /**
+   * Whether to constrain the floating element's width and height to not exceed
+   * the viewport.
+   *
+   * @default false
+   */
+  fitViewport?: InlinePopoverPositionerElementProps['fitViewport'];
+  /**
+   * Whether to constrain the floating element's width so that it matches the
+   * reference element.
+   *
+   * @default false
+   */
+  sameWidth?: InlinePopoverPositionerElementProps['sameWidth'];
+  /**
+   * Whether to constrain the floating element's height so that it matches the
+   * reference element.
+   *
+   * @default false
+   */
+  sameHeight?: InlinePopoverPositionerElementProps['sameHeight'];
+  /**
+   * Describes the clipping element(s) or area that overflow will be checked relative to.
+   * Please see https://floating-ui.com/docs/detectoverflow#boundary for more information.
+   *
+   * @default 'clippingAncestors'
+   */
+  boundary?: InlinePopoverPositionerElementProps['boundary'];
+  /**
+   * Describes the root boundary that the element will be checked for overflow relative to.
+   * Please see https://floating-ui.com/docs/detectoverflow#rootboundary for more information.
+   *
+   * @default 'viewport'
+   */
+  rootBoundary?: InlinePopoverPositionerElementProps['rootBoundary'];
+  /**
+   * The element that will be used to check for overflow. Please see
+   * https://floating-ui.com/docs/detectoverflow#elementcontext for more
+   * information.
+   *
+   * @default 'floating'
+   */
+  elementContext?: InlinePopoverPositionerElementProps['elementContext'];
+  /**
+   * Whether to check the alternate elementContext's boundary. Please see
+   * https://floating-ui.com/docs/detectoverflow#altboundary for more
+   * information.
+   *
+   * @default false
+   */
+  altBoundary?: InlinePopoverPositionerElementProps['altBoundary'];
+}
+
+function InlinePopoverPositionerComponent(props: InlinePopoverPositionerProps, forwardedRef: ForwardedRef<InlinePopoverPositionerElement>) {
+  registerInlinePopoverPositionerElement();
+
+  const elementRef = useRef<InlinePopoverPositionerElement>(null);
+
+  const { altBoundary: p0, autoUpdate: p1, boundary: p2, elementContext: p3, fitViewport: p4, flip: p5, hide: p6, hoist: p7, inline: p8, offset: p9, overflowPadding: p10, overlap: p11, placement: p12, rootBoundary: p13, sameHeight: p14, sameWidth: p15, shift: p16, strategy: p17, ...restProps } = props;
+
+  useLayoutEffect(() => {
+    const element = elementRef.current as Record<string, unknown> | null;
+    if (!element) return;
+    Object.assign(element, { altBoundary: p0, autoUpdate: p1, boundary: p2, elementContext: p3, fitViewport: p4, flip: p5, hide: p6, hoist: p7, inline: p8, offset: p9, overflowPadding: p10, overlap: p11, placement: p12, rootBoundary: p13, sameHeight: p14, sameWidth: p15, shift: p16, strategy: p17 });
+  });
+
+  const mergedRef = useCallback(
+    (element: InlinePopoverPositionerElement | null) => {
+      elementRef.current = element;
+      if (typeof forwardedRef === 'function') {
+        forwardedRef(element);
+      } else if (forwardedRef) {
+        forwardedRef.current = element;
+      }
+    },
+    [forwardedRef],
+  );
+
+  return createElement('prosekit-inline-popover-positioner', { ...restProps, ref: mergedRef, suppressHydrationWarning: true });
+}
+
+/**
+ * A React component that renders an `prosekit-inline-popover-positioner` custom element.
+ *
+ * @public
+ */
+export const InlinePopoverPositioner: ForwardRefExoticComponent<InlinePopoverPositionerProps & RefAttributes<InlinePopoverPositionerElement>> = /* @__PURE__ */ forwardRef(InlinePopoverPositionerComponent);

package/src/components/inline-popover/inline-popover-root.gen.ts

@@ -0,0 +1,106 @@
+/**
+ * This file is auto-generated by the "@aria-ui/cli" tool. Do not edit this file directly.
+ */
+
+import { registerInlinePopoverRootElement, type InlinePopoverRootElement, type InlinePopoverRootProps as InlinePopoverRootElementProps, type InlinePopoverRootEvents } from '@prosekit/web/inline-popover';
+import { createElement, forwardRef, useCallback, useRef, type ForwardedRef, type ForwardRefExoticComponent, type HTMLAttributes, type RefAttributes, useLayoutEffect } from 'react';
+
+import { useEditorContext } from '../../contexts/editor-context.ts';
+
+/**
+ * Props for the {@link InlinePopoverRoot} React component.
+ *
+ * @public
+ */
+export interface InlinePopoverRootProps extends HTMLAttributes<InlinePopoverRootElement> {
+  /**
+   * The ProseKit editor instance.
+   *
+   * @default null
+   * @hidden
+   */
+  editor?: InlinePopoverRootElementProps['editor'];
+  /**
+   * Whether the popover is open by default when some inline content is
+   * selected.
+   *
+   * @default true
+   */
+  defaultOpen?: InlinePopoverRootElementProps['defaultOpen'];
+  /**
+   * Whether the inline popover should be dismissed when the editor receives an
+   * Escape key press.
+   *
+   * @default true
+   */
+  dismissOnEscape?: InlinePopoverRootElementProps['dismissOnEscape'];
+  /**
+   * Whether the overlay is currently open.
+   * @default null
+   */
+  open?: InlinePopoverRootElementProps['open'];
+  /**
+   * Whether the component should ignore user interaction.
+   * @default false
+   */
+  disabled?: InlinePopoverRootElementProps['disabled'];
+  /** */
+  onOpenChange?: (event: InlinePopoverRootEvents['openChange']) => void;
+}
+
+function InlinePopoverRootComponent(props: InlinePopoverRootProps, forwardedRef: ForwardedRef<InlinePopoverRootElement>) {
+  registerInlinePopoverRootElement();
+
+  const elementRef = useRef<InlinePopoverRootElement>(null);
+  const handlersRef = useRef<Array<((event: Event) => void) | undefined>>([]);
+
+  const p3Fallback = useEditorContext();
+
+  const { defaultOpen: p0, disabled: p1, dismissOnEscape: p2, editor: p3, open: p4, onOpenChange: e0, ...restProps } = props;
+
+  useLayoutEffect(() => {
+    const element = elementRef.current as Record<string, unknown> | null;
+    if (!element) return;
+    Object.assign(element, { defaultOpen: p0, disabled: p1, dismissOnEscape: p2, editor: p3 ?? p3Fallback, open: p4 });
+    handlersRef.current = [e0] as Array<((event: Event) => void) | undefined>;
+  });
+
+  useLayoutEffect(() => {
+    const element = elementRef.current;
+    if (!element) return;
+    const ac = new AbortController();
+    for (const [index, eventName] of ['openChange'].entries()) {
+      element.addEventListener(
+        eventName,
+        (event: Event) => {
+          handlersRef.current[index]?.(event);
+        },
+        { signal: ac.signal },
+      );
+    }
+    return () => ac.abort();
+  }, []);
+
+  const mergedRef = useCallback(
+    (element: InlinePopoverRootElement | null) => {
+      elementRef.current = element;
+      if (typeof forwardedRef === 'function') {
+        forwardedRef(element);
+      } else if (forwardedRef) {
+        forwardedRef.current = element;
+      }
+    },
+    [forwardedRef],
+  );
+
+  return createElement('prosekit-inline-popover-root', { ...restProps, ref: mergedRef, suppressHydrationWarning: true });
+}
+
+/**
+ * A React component that renders an `prosekit-inline-popover-root` custom element.
+ *
+ * @public
+ */
+export const InlinePopoverRoot: ForwardRefExoticComponent<InlinePopoverRootProps & RefAttributes<InlinePopoverRootElement>> = /* @__PURE__ */ forwardRef(InlinePopoverRootComponent);
+
+export type { InlinePopoverRootEvents };

package/src/components/menu/index.gen.ts

@@ -0,0 +1,19 @@
+/**
+ * This file is auto-generated by the "@aria-ui/cli" tool. Do not edit this file directly.
+ */
+
+export { MenuItem, type MenuItemProps, type MenuItemEvents } from './menu-item.gen.ts';
+
+export { MenuPopup, type MenuPopupProps } from './menu-popup.gen.ts';
+
+export { MenuPositioner, type MenuPositionerProps } from './menu-positioner.gen.ts';
+
+export { MenuRoot, type MenuRootProps, type MenuRootEvents } from './menu-root.gen.ts';
+
+export { MenuSubmenuRoot, type MenuSubmenuRootProps } from './menu-submenu-root.gen.ts';
+
+export { MenuSubmenuTrigger, type MenuSubmenuTriggerProps } from './menu-submenu-trigger.gen.ts';
+
+export { MenuTrigger, type MenuTriggerProps, type MenuTriggerEvents } from './menu-trigger.gen.ts';
+
+export { OpenChangeEvent, SelectEvent } from '@prosekit/web/menu';

package/src/components/menu/index.ts

@@ -0,0 +1,37 @@
+/**
+
+@module
+
+## Anatomy
+
+```jsx
+import {
+  MenuItem,
+  MenuPopup,
+  MenuPositioner,
+  MenuRoot,
+  MenuSubmenuRoot,
+  MenuSubmenuTrigger,
+  MenuTrigger,
+} from 'prosekit/react/menu'
+
+<MenuRoot>
+  <MenuTrigger>...</MenuTrigger>
+  <MenuPositioner>
+    <MenuPopup>
+      <MenuItem>...</MenuItem>
+      <MenuSubmenuRoot>
+        <MenuSubmenuTrigger>...</MenuSubmenuTrigger>
+        <MenuPositioner>
+          <MenuPopup>
+            <MenuItem>...</MenuItem>
+          </MenuPopup>
+        </MenuPositioner>
+      </MenuSubmenuRoot>
+    </MenuPopup>
+  </MenuPositioner>
+</MenuRoot>
+```
+*/
+
+export * from './index.gen.ts'

package/src/components/menu/menu-item.gen.ts

@@ -0,0 +1,89 @@
+/**
+ * This file is auto-generated by the "@aria-ui/cli" tool. Do not edit this file directly.
+ */
+
+import { registerMenuItemElement, type MenuItemElement, type MenuItemProps as MenuItemElementProps, type MenuItemEvents } from '@prosekit/web/menu';
+import { createElement, forwardRef, useCallback, useRef, type ForwardedRef, type ForwardRefExoticComponent, type HTMLAttributes, type RefAttributes, useLayoutEffect } from 'react';
+
+/**
+ * Props for the {@link MenuItem} React component.
+ *
+ * @public
+ */
+export interface MenuItemProps extends Omit<HTMLAttributes<MenuItemElement>, 'onSelect'> {
+  /**
+   * The unique value for this menu item.
+   *
+   * @default ""
+   */
+  value?: MenuItemElementProps['value'];
+  /**
+   * Whether this menu item is disabled.
+   *
+   * @default false
+   */
+  disabled?: MenuItemElementProps['disabled'];
+  /**
+   * Whether to close the menu when the item is pressed.
+   *
+   * @default true
+   */
+  closeOnSelect?: MenuItemElementProps['closeOnSelect'];
+  /** Emitted when the the item is selected. */
+  onSelect?: (event: MenuItemEvents['select']) => void;
+}
+
+function MenuItemComponent(props: MenuItemProps, forwardedRef: ForwardedRef<MenuItemElement>) {
+  registerMenuItemElement();
+
+  const elementRef = useRef<MenuItemElement>(null);
+  const handlersRef = useRef<Array<((event: Event) => void) | undefined>>([]);
+
+  const { closeOnSelect: p0, disabled: p1, value: p2, onSelect: e0, ...restProps } = props;
+
+  useLayoutEffect(() => {
+    const element = elementRef.current as Record<string, unknown> | null;
+    if (!element) return;
+    Object.assign(element, { closeOnSelect: p0, disabled: p1, value: p2 });
+    handlersRef.current = [e0] as Array<((event: Event) => void) | undefined>;
+  });
+
+  useLayoutEffect(() => {
+    const element = elementRef.current;
+    if (!element) return;
+    const ac = new AbortController();
+    for (const [index, eventName] of ['select'].entries()) {
+      element.addEventListener(
+        eventName,
+        (event: Event) => {
+          handlersRef.current[index]?.(event);
+        },
+        { signal: ac.signal },
+      );
+    }
+    return () => ac.abort();
+  }, []);
+
+  const mergedRef = useCallback(
+    (element: MenuItemElement | null) => {
+      elementRef.current = element;
+      if (typeof forwardedRef === 'function') {
+        forwardedRef(element);
+      } else if (forwardedRef) {
+        forwardedRef.current = element;
+      }
+    },
+    [forwardedRef],
+  );
+
+  return createElement('prosekit-menu-item', { ...restProps, ref: mergedRef, suppressHydrationWarning: true });
+}
+
+/**
+ * A React component that renders an `prosekit-menu-item` custom element.
+ *
+ * @public
+ */
+export const MenuItem: ForwardRefExoticComponent<MenuItemProps & RefAttributes<MenuItemElement>> = /* @__PURE__ */ forwardRef(MenuItemComponent);
+
+export type { MenuItemEvents };

package/src/components/menu/menu-popup.gen.ts

@@ -0,0 +1,56 @@
+/**
+ * This file is auto-generated by the "@aria-ui/cli" tool. Do not edit this file directly.
+ */
+
+import { registerMenuPopupElement, type MenuPopupElement, type MenuPopupProps as MenuPopupElementProps } from '@prosekit/web/menu';
+import { createElement, forwardRef, useCallback, useRef, type ForwardedRef, type ForwardRefExoticComponent, type HTMLAttributes, type RefAttributes, useLayoutEffect } from 'react';
+
+/**
+ * Props for the {@link MenuPopup} React component.
+ *
+ * @public
+ */
+export interface MenuPopupProps extends HTMLAttributes<MenuPopupElement> {
+  /**
+   * By default, the MenuPopup element will listen for keydown events.
+   * You can pass a different element to listen for keydown events.
+   *
+   * @default null
+   */
+  eventTarget?: MenuPopupElementProps['eventTarget'];
+}
+
+function MenuPopupComponent(props: MenuPopupProps, forwardedRef: ForwardedRef<MenuPopupElement>) {
+  registerMenuPopupElement();
+
+  const elementRef = useRef<MenuPopupElement>(null);
+
+  const { eventTarget: p0, ...restProps } = props;
+
+  useLayoutEffect(() => {
+    const element = elementRef.current as Record<string, unknown> | null;
+    if (!element) return;
+    Object.assign(element, { eventTarget: p0 });
+  });
+
+  const mergedRef = useCallback(
+    (element: MenuPopupElement | null) => {
+      elementRef.current = element;
+      if (typeof forwardedRef === 'function') {
+        forwardedRef(element);
+      } else if (forwardedRef) {
+        forwardedRef.current = element;
+      }
+    },
+    [forwardedRef],
+  );
+
+  return createElement('prosekit-menu-popup', { ...restProps, ref: mergedRef, suppressHydrationWarning: true });
+}
+
+/**
+ * A React component that renders an `prosekit-menu-popup` custom element.
+ *
+ * @public
+ */
+export const MenuPopup: ForwardRefExoticComponent<MenuPopupProps & RefAttributes<MenuPopupElement>> = /* @__PURE__ */ forwardRef(MenuPopupComponent);

package/src/components/menu/menu-positioner.gen.ts

@@ -0,0 +1,176 @@
+/**
+ * This file is auto-generated by the "@aria-ui/cli" tool. Do not edit this file directly.
+ */
+
+import { registerMenuPositionerElement, type MenuPositionerElement, type MenuPositionerProps as MenuPositionerElementProps } from '@prosekit/web/menu';
+import { createElement, forwardRef, useCallback, useRef, type ForwardedRef, type ForwardRefExoticComponent, type HTMLAttributes, type RefAttributes, useLayoutEffect } from 'react';
+
+/**
+ * Props for the {@link MenuPositioner} React component.
+ *
+ * @public
+ */
+export interface MenuPositionerProps extends HTMLAttributes<MenuPositionerElement> {
+  /**
+   * The initial placement of the floating element
+   *
+   * @default "bottom-start"
+   */
+  placement?: MenuPositionerElementProps['placement'];
+  /**
+   * The strategy to use for positioning
+   *
+   * @default "absolute"
+   */
+  strategy?: MenuPositionerElementProps['strategy'];
+  /**
+   * Options to activate auto-update listeners
+   *
+   * @see https://floating-ui.com/docs/autoUpdate
+   *
+   * @default true
+   */
+  autoUpdate?: MenuPositionerElementProps['autoUpdate'];
+  /**
+   * Whether to use the browser Popover API to place the floating element on
+   * top of other page content.
+   *
+   * @default true
+   */
+  hoist?: MenuPositionerElementProps['hoist'];
+  /**
+   * The distance between the reference and floating element.
+   *
+   * @default 6
+   */
+  offset?: MenuPositionerElementProps['offset'];
+  /**
+   * Whether to flip the `placement` in order to keep it in view when the
+   * preferred placement(s) will overflow the clipping boundary. You can also
+   * provide an array of placements to try sequentially if the preferred
+   * `placement` does not fit.
+   *
+   * @default true
+   */
+  flip?: MenuPositionerElementProps['flip'];
+  /**
+   * Whether the floating element should shift to keep it in view.
+   *
+   * @default true
+   */
+  shift?: MenuPositionerElementProps['shift'];
+  /**
+   * Whether the floating element can overlap the reference element to keep it
+   * in view.
+   *
+   * @default false
+   */
+  overlap?: MenuPositionerElementProps['overlap'];
+  /**
+   * Whether to constrain the floating element's width and height to not exceed
+   * the viewport.
+   *
+   * @default false
+   */
+  fitViewport?: MenuPositionerElementProps['fitViewport'];
+  /**
+   * Whether to constrain the floating element's width so that it matches the
+   * reference element.
+   *
+   * @default false
+   */
+  sameWidth?: MenuPositionerElementProps['sameWidth'];
+  /**
+   * Whether to constrain the floating element's height so that it matches the
+   * reference element.
+   *
+   * @default false
+   */
+  sameHeight?: MenuPositionerElementProps['sameHeight'];
+  /**
+   * Whether to improve positioning for inline reference elements that span over
+   * multiple lines.
+   *
+   * @default false
+   */
+  inline?: MenuPositionerElementProps['inline'];
+  /**
+   * Whether to hide the floating element when the reference element or the
+   * floating element is fully clipped.
+   *
+   * @default false
+   */
+  hide?: MenuPositionerElementProps['hide'];
+  /**
+   * Describes the clipping element(s) or area that overflow will be checked relative to.
+   * Please see https://floating-ui.com/docs/detectoverflow#boundary for more information.
+   *
+   * @default 'clippingAncestors'
+   */
+  boundary?: MenuPositionerElementProps['boundary'];
+  /**
+   * Describes the root boundary that the element will be checked for overflow relative to.
+   * Please see https://floating-ui.com/docs/detectoverflow#rootboundary for more information.
+   *
+   * @default 'viewport'
+   */
+  rootBoundary?: MenuPositionerElementProps['rootBoundary'];
+  /**
+   * Describes the virtual padding around the boundary to check for overflow.
+   * Please see https://floating-ui.com/docs/detectoverflow#padding for more information.
+   *
+   * @default 4
+   */
+  overflowPadding?: MenuPositionerElementProps['overflowPadding'];
+  /**
+   * The element that will be used to check for overflow. Please see
+   * https://floating-ui.com/docs/detectoverflow#elementcontext for more
+   * information.
+   *
+   * @default 'floating'
+   */
+  elementContext?: MenuPositionerElementProps['elementContext'];
+  /**
+   * Whether to check the alternate elementContext's boundary. Please see
+   * https://floating-ui.com/docs/detectoverflow#altboundary for more
+   * information.
+   *
+   * @default false
+   */
+  altBoundary?: MenuPositionerElementProps['altBoundary'];
+}
+
+function MenuPositionerComponent(props: MenuPositionerProps, forwardedRef: ForwardedRef<MenuPositionerElement>) {
+  registerMenuPositionerElement();
+
+  const elementRef = useRef<MenuPositionerElement>(null);
+
+  const { altBoundary: p0, autoUpdate: p1, boundary: p2, elementContext: p3, fitViewport: p4, flip: p5, hide: p6, hoist: p7, inline: p8, offset: p9, overflowPadding: p10, overlap: p11, placement: p12, rootBoundary: p13, sameHeight: p14, sameWidth: p15, shift: p16, strategy: p17, ...restProps } = props;
+
+  useLayoutEffect(() => {
+    const element = elementRef.current as Record<string, unknown> | null;
+    if (!element) return;
+    Object.assign(element, { altBoundary: p0, autoUpdate: p1, boundary: p2, elementContext: p3, fitViewport: p4, flip: p5, hide: p6, hoist: p7, inline: p8, offset: p9, overflowPadding: p10, overlap: p11, placement: p12, rootBoundary: p13, sameHeight: p14, sameWidth: p15, shift: p16, strategy: p17 });
+  });
+
+  const mergedRef = useCallback(
+    (element: MenuPositionerElement | null) => {
+      elementRef.current = element;
+      if (typeof forwardedRef === 'function') {
+        forwardedRef(element);
+      } else if (forwardedRef) {
+        forwardedRef.current = element;
+      }
+    },
+    [forwardedRef],
+  );
+
+  return createElement('prosekit-menu-positioner', { ...restProps, ref: mergedRef, suppressHydrationWarning: true });
+}
+
+/**
+ * A React component that renders an `prosekit-menu-positioner` custom element.
+ *
+ * @public
+ */
+export const MenuPositioner: ForwardRefExoticComponent<MenuPositionerProps & RefAttributes<MenuPositionerElement>> = /* @__PURE__ */ forwardRef(MenuPositionerComponent);