@dxos/react-ui-editor 0.8.4-main.dedc0f3 → 0.8.4-main.e098934

package/src/{components/Popover/RefDropdownMenu.tsx → testing/PreviewPopover.tsx}

@@ -6,38 +6,27 @@ import { createContext } from '@radix-ui/react-context';
 import React, { type PropsWithChildren, type RefObject, useCallback, useEffect, useRef, useState } from 'react';
 
 import { addEventListener } from '@dxos/async';
-import { type DxAnchor, type DxAnchorActivate } from '@dxos/lit-ui';
-import { DropdownMenu } from '@dxos/react-ui';
+import { type DxAnchorActivate, Popover } from '@dxos/react-ui';
 
-import { type PreviewLinkRef, type PreviewLinkTarget, type PreviewLookup } from '../../extensions';
+import { type PreviewLinkRef, type PreviewLinkTarget } from '../extensions';
 
-// TODO(burdon): Move to @dxos/lit-ui
+type PreviewLookup = (link: PreviewLinkRef) => Promise<PreviewLinkTarget | null | undefined>;
 
-//
-// Context
-//
-
-type RefDropdownMenuValue = Partial<{
+type PreviewPopoverValue = Partial<{
   link: PreviewLinkRef;
   target: PreviewLinkTarget;
   pending: boolean;
 }>;
 
-const [RefDropdownMenuContextProvider, useRefDropdownMenu] = createContext<RefDropdownMenuValue>('RefDropdownMenu', {});
+const [PreviewPopoverContextProvider, usePreviewPopover] = createContext<PreviewPopoverValue>('PreviewPopover', {});
 
-//
-// Context Provider
-// NOTE: This is handled by the preview-plugin.
-//
-
-type RefDropdownMenuProviderProps = PropsWithChildren<{
+type PopoverLookupProviderProps = PropsWithChildren<{
   onLookup?: PreviewLookup;
 }>;
 
-const RefDropdownMenuProvider = ({ children, onLookup }: RefDropdownMenuProviderProps) => {
-  const trigger = useRef<DxAnchor | null>(null);
-  const [value, setValue] = useState<RefDropdownMenuValue>({});
-  const [rootRef, setRootRef] = useState<HTMLDivElement | null>(null);
+const PreviewPopoverProvider = ({ children, onLookup }: PopoverLookupProviderProps) => {
+  const trigger = useRef<HTMLElement | null>(null);
+  const [value, setValue] = useState<PreviewPopoverValue>({});
   const [open, setOpen] = useState(false);
 
   const handleDxAnchorActivate = useCallback(
@@ -61,8 +50,9 @@ const RefDropdownMenuProvider = ({ children, onLookup }: RefDropdownMenuProvider
     [onLookup],
   );
 
+  const [rootRef, setRootRef] = useState<HTMLDivElement | null>(null);
   useEffect(() => {
-    if (!rootRef) {
+    if (!rootRef || !handleDxAnchorActivate) {
       return;
     }
 
@@ -70,20 +60,19 @@ const RefDropdownMenuProvider = ({ children, onLookup }: RefDropdownMenuProvider
       capture: true,
       passive: false,
     });
-  }, [rootRef]);
+  }, [rootRef, handleDxAnchorActivate]);
 
   return (
-    <RefDropdownMenuContextProvider pending={value.pending} link={value.link} target={value.target}>
-      <DropdownMenu.Root open={open} onOpenChange={setOpen}>
-        <DropdownMenu.VirtualTrigger virtualRef={trigger as unknown as RefObject<HTMLButtonElement>} />
+    <PreviewPopoverContextProvider pending={value.pending} link={value.link} target={value.target}>
+      <Popover.Root open={open} onOpenChange={setOpen}>
+        <Popover.VirtualTrigger virtualRef={trigger as unknown as RefObject<HTMLButtonElement>} />
         <div role='none' className='contents' ref={setRootRef}>
           {children}
         </div>
-      </DropdownMenu.Root>
-    </RefDropdownMenuContextProvider>
+      </Popover.Root>
+    </PreviewPopoverContextProvider>
   );
 };
+export { PreviewPopoverProvider, usePreviewPopover };
 
-export { RefDropdownMenuProvider };
-
-export type { RefDropdownMenuProviderProps, RefDropdownMenuValue };
+export type { PopoverLookupProviderProps, PreviewPopoverValue };

package/src/testing/index.ts

@@ -3,3 +3,4 @@
 //
 
 export * from './util';
+export * from './PreviewPopover';

package/dist/types/src/components/Popover/CommandMenu.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"CommandMenu.d.ts","sourceRoot":"","sources":["../../../../../src/components/Popover/CommandMenu.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,KAAmD,MAAM,OAAO,CAAC;AAExE,OAAO,EAAQ,KAAK,KAAK,EAA+D,MAAM,gBAAgB,CAAC;AAC/G,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,YAAY,CAAC;AAI/C,MAAM,MAAM,gBAAgB,GAAG;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,KAAK,EAAE,eAAe,EAAE,CAAC;CAC1B,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,KAAK,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,YAAY,CAAC,IAAI,CAAC,CAAC;CACnE,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,MAAM,EAAE,gBAAgB,EAAE,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,IAAI,CAAC;CAC3C,CAAC;AAGF,eAAO,MAAM,WAAW,GAAI,mCAAmC,gBAAgB,sBAyB9E,CAAC;AAiEF,eAAO,MAAM,OAAO,GAAI,QAAQ,gBAAgB,EAAE,EAAE,KAAK,MAAM,KAAG,eAAe,GAAG,SAEnF,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,QAAQ,gBAAgB,EAAE,EAAE,KAAK,MAAM,KAAG,eAIrE,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,QAAQ,gBAAgB,EAAE,EAAE,KAAK,MAAM,KAAG,eAIzE,CAAC;AAEF,eAAO,MAAM,WAAW,GACtB,QAAQ,gBAAgB,EAAE,EAC1B,QAAQ,CAAC,IAAI,EAAE,eAAe,KAAK,OAAO,KACzC,gBAAgB,EAKlB,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,MAAM,UAAU,EAAE,MAAM,MAAM,EAAE,QAAQ,MAAM,SAK5E,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,iBAAiB,GAAI,MAAM,UAAU,EAAE,MAAM,MAAM,EAAE,QAAQ,MAAM,SAW/E,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,gBA6E/B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,gBA2B/B,CAAC"}

package/dist/types/src/components/Popover/RefDropdownMenu.d.ts

@@ -1,14 +0,0 @@
-import React, { type PropsWithChildren } from 'react';
-import { type PreviewLinkRef, type PreviewLinkTarget, type PreviewLookup } from '../../extensions';
-type RefDropdownMenuValue = Partial<{
-    link: PreviewLinkRef;
-    target: PreviewLinkTarget;
-    pending: boolean;
-}>;
-type RefDropdownMenuProviderProps = PropsWithChildren<{
-    onLookup?: PreviewLookup;
-}>;
-declare const RefDropdownMenuProvider: ({ children, onLookup }: RefDropdownMenuProviderProps) => React.JSX.Element;
-export { RefDropdownMenuProvider };
-export type { RefDropdownMenuProviderProps, RefDropdownMenuValue };
-//# sourceMappingURL=RefDropdownMenu.d.ts.map

package/dist/types/src/components/Popover/RefDropdownMenu.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"RefDropdownMenu.d.ts","sourceRoot":"","sources":["../../../../../src/components/Popover/RefDropdownMenu.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAA4D,MAAM,OAAO,CAAC;AAMhH,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,iBAAiB,EAAE,KAAK,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAQnG,KAAK,oBAAoB,GAAG,OAAO,CAAC;IAClC,IAAI,EAAE,cAAc,CAAC;IACrB,MAAM,EAAE,iBAAiB,CAAC;IAC1B,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC,CAAC;AASH,KAAK,4BAA4B,GAAG,iBAAiB,CAAC;IACpD,QAAQ,CAAC,EAAE,aAAa,CAAC;CAC1B,CAAC,CAAC;AAEH,QAAA,MAAM,uBAAuB,GAAI,wBAAwB,4BAA4B,sBAgDpF,CAAC;AAEF,OAAO,EAAE,uBAAuB,EAAE,CAAC;AAEnC,YAAY,EAAE,4BAA4B,EAAE,oBAAoB,EAAE,CAAC"}

package/dist/types/src/components/Popover/RefPopover.d.ts

@@ -1,37 +0,0 @@
-import React, { type PropsWithChildren } from 'react';
-import { type DxAnchor, type DxAnchorActivate } from '@dxos/lit-ui';
-import { type PreviewLinkRef, type PreviewLinkTarget, type PreviewLookup } from '../../extensions';
-type RefPopoverValue = Partial<{
-    link: PreviewLinkRef;
-    target: PreviewLinkTarget;
-    pending: boolean;
-}>;
-declare const useRefPopover: (consumerName: string) => Partial<{
-    link: PreviewLinkRef;
-    target: PreviewLinkTarget;
-    pending: boolean;
-}>;
-type PreviewProviderProps = PropsWithChildren<{
-    onLookup?: PreviewLookup;
-}>;
-declare const PreviewProvider: ({ children, onLookup }: PreviewProviderProps) => React.JSX.Element;
-type RefPopoverProps = PropsWithChildren<{
-    modal?: boolean;
-    open?: boolean;
-    onOpenChange?: (open: boolean) => void;
-    onActivate?: (event: DxAnchorActivate) => void;
-}>;
-/**
- * Wraps components that contain <dx-anchor> elements?
- */
-declare const RefPopover: React.ForwardRefExoticComponent<{
-    modal?: boolean;
-    open?: boolean;
-    onOpenChange?: (open: boolean) => void;
-    onActivate?: (event: DxAnchorActivate) => void;
-} & {
-    children?: React.ReactNode | undefined;
-} & React.RefAttributes<DxAnchor | null>>;
-export { RefPopover, PreviewProvider, useRefPopover };
-export type { RefPopoverProps, PreviewProviderProps, RefPopoverValue };
-//# sourceMappingURL=RefPopover.d.ts.map

package/dist/types/src/components/Popover/RefPopover.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"RefPopover.d.ts","sourceRoot":"","sources":["../../../../../src/components/Popover/RefPopover.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,EACZ,KAAK,iBAAiB,EAOvB,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,KAAK,QAAQ,EAAE,KAAK,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAGpE,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,iBAAiB,EAAE,KAAK,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAQnG,KAAK,eAAe,GAAG,OAAO,CAAC;IAC7B,IAAI,EAAE,cAAc,CAAC;IACrB,MAAM,EAAE,iBAAiB,CAAC;IAC1B,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC,CAAC;AAEH,QAAA,MAAkC,aAAa;UALvC,cAAc;YACZ,iBAAiB;aAChB,OAAO;EAGiF,CAAC;AAMpG,KAAK,oBAAoB,GAAG,iBAAiB,CAAC;IAC5C,QAAQ,CAAC,EAAE,aAAa,CAAC;CAC1B,CAAC,CAAC;AAEH,QAAA,MAAM,eAAe,GAAI,wBAAwB,oBAAoB,sBAiCpE,CAAC;AAMF,KAAK,eAAe,GAAG,iBAAiB,CAAC;IACvC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;CAChD,CAAC,CAAC;AAEH;;GAEG;AACH,QAAA,MAAM,UAAU;YATN,OAAO;WACR,OAAO;mBACC,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI;iBACzB,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI;;;yCA0B/C,CAAC;AAEF,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,aAAa,EAAE,CAAC;AAEtD,YAAY,EAAE,eAAe,EAAE,oBAAoB,EAAE,eAAe,EAAE,CAAC"}

package/dist/types/src/components/Popover/index.d.ts

@@ -1,4 +0,0 @@
-export * from './CommandMenu';
-export * from './RefPopover';
-export * from './RefDropdownMenu';
-//# sourceMappingURL=index.d.ts.map

package/dist/types/src/components/Popover/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Popover/index.ts"],"names":[],"mappings":"AAIA,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC"}

package/src/components/Popover/RefPopover.tsx

@@ -1,117 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { createContext } from '@radix-ui/react-context';
-import React, {
-  type PropsWithChildren,
-  type RefObject,
-  forwardRef,
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
-
-import { addEventListener } from '@dxos/async';
-import { type DxAnchor, type DxAnchorActivate } from '@dxos/lit-ui';
-import { Popover } from '@dxos/react-ui';
-
-import { type PreviewLinkRef, type PreviewLinkTarget, type PreviewLookup } from '../../extensions';
-
-// TODO(burdon): Move to @dxos/lit-ui
-
-//
-// Context
-//
-
-type RefPopoverValue = Partial<{
-  link: PreviewLinkRef;
-  target: PreviewLinkTarget;
-  pending: boolean;
-}>;
-
-const [RefPopoverContextProvider, useRefPopover] = createContext<RefPopoverValue>('RefPopover', {});
-
-//
-// ContextProvider
-//
-
-type PreviewProviderProps = PropsWithChildren<{
-  onLookup?: PreviewLookup;
-}>;
-
-const PreviewProvider = ({ children, onLookup }: PreviewProviderProps) => {
-  const trigger = useRef<DxAnchor | null>(null);
-  const [value, setValue] = useState<RefPopoverValue>({});
-  const [open, setOpen] = useState(false);
-
-  const handleDxAnchorActivate = useCallback(
-    (event: DxAnchorActivate) => {
-      const { refId, label, trigger: dxTrigger } = event;
-      setValue((value) => ({
-        ...value,
-        link: { label, ref: refId },
-        pending: true,
-      }));
-      trigger.current = dxTrigger;
-      queueMicrotask(() => setOpen(true));
-      void onLookup?.({ label, ref: refId }).then((target) =>
-        setValue((value) => ({
-          ...value,
-          target: target ?? undefined,
-          pending: false,
-        })),
-      );
-    },
-    [onLookup],
-  );
-
-  return (
-    <RefPopoverContextProvider pending={value.pending} link={value.link} target={value.target}>
-      <RefPopover ref={trigger} open={open} onOpenChange={setOpen} onActivate={handleDxAnchorActivate}>
-        {children}
-      </RefPopover>
-    </RefPopoverContextProvider>
-  );
-};
-
-//
-// Popover
-//
-
-type RefPopoverProps = PropsWithChildren<{
-  modal?: boolean;
-  open?: boolean;
-  onOpenChange?: (open: boolean) => void;
-  onActivate?: (event: DxAnchorActivate) => void;
-}>;
-
-/**
- * Wraps components that contain <dx-anchor> elements?
- */
-const RefPopover = forwardRef<DxAnchor | null, RefPopoverProps>(
-  ({ children, open, onOpenChange, modal, onActivate }, ref) => {
-    const [rootRef, setRootRef] = useState<HTMLDivElement | null>(null);
-    useEffect(() => {
-      if (!rootRef || !onActivate) {
-        return;
-      }
-
-      return addEventListener(rootRef, 'dx-anchor-activate' as any, onActivate, { capture: true, passive: false });
-    }, [rootRef, onActivate]);
-
-    return (
-      <Popover.Root open={open} onOpenChange={onOpenChange} modal={modal}>
-        <Popover.VirtualTrigger virtualRef={ref as unknown as RefObject<HTMLButtonElement>} />
-        <div role='none' className='contents' ref={setRootRef}>
-          {children}
-        </div>
-      </Popover.Root>
-    );
-  },
-);
-
-export { RefPopover, PreviewProvider, useRefPopover };
-
-export type { RefPopoverProps, PreviewProviderProps, RefPopoverValue };