@dxos/plugin-deck 0.8.1-staging.391c573 → 0.8.1-staging.9eaf14f

package/dist/types/src/hooks/useNode.d.ts

@@ -1,11 +0,0 @@
-import { type Graph, type Node } from '@dxos/plugin-graph';
-/**
- * React hook to get a node from the graph.
- *
- * @param graph Graph to find the node in.
- * @param id Id of the node to find.
- * @param timeout Optional timeout in milliseconds to wait for the node to be found.
- * @returns Node if found, undefined otherwise.
- */
-export declare const useNode: <T = any>(graph: Graph, id?: string, timeout?: number) => Node<T> | undefined;
-//# sourceMappingURL=useNode.d.ts.map

package/dist/types/src/hooks/useNode.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useNode.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useNode.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,KAAK,EAAE,KAAK,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAE3D;;;;;;;GAOG;AAEH,eAAO,MAAM,OAAO,GAAI,CAAC,eAAe,KAAK,OAAO,MAAM,YAAY,MAAM,KAAG,IAAI,CAAC,CAAC,CAAC,GAAG,SA4BxF,CAAC"}

package/src/components/DeckLayout/NodePlankHeading.tsx

@@ -1,148 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import React, { Fragment, memo, useCallback, useEffect, useMemo } from 'react';
-
-import { createIntent, LayoutAction, Surface, useAppGraph, useIntentDispatcher } from '@dxos/app-framework';
-import { type Node } from '@dxos/plugin-graph';
-import { Icon, Popover, toLocalizedString, useTranslation } from '@dxos/react-ui';
-import { StackItem, type StackItemSigilAction } from '@dxos/react-ui-stack';
-import { TextTooltip } from '@dxos/react-ui-text-tooltip';
-
-import { PlankControls } from './PlankControls';
-import { DECK_PLUGIN } from '../../meta';
-import { DeckAction, SLUG_PATH_SEPARATOR } from '../../types';
-import { useBreakpoints } from '../../util';
-import { soloInlinePadding } from '../fragments';
-
-export type NodePlankHeadingProps = {
-  id: string;
-  part: 'solo' | 'deck' | 'complementary';
-  node?: Node;
-  canIncrementStart?: boolean;
-  canIncrementEnd?: boolean;
-  popoverAnchorId?: string;
-  pending?: boolean;
-  actions?: StackItemSigilAction[];
-};
-
-export const NodePlankHeading = memo(
-  ({
-    id,
-    part,
-    node,
-    canIncrementStart,
-    canIncrementEnd,
-    popoverAnchorId,
-    pending,
-    actions = [],
-  }: NodePlankHeadingProps) => {
-    const { t } = useTranslation(DECK_PLUGIN);
-    const { graph } = useAppGraph();
-    const breakpoint = useBreakpoints();
-    const icon = node?.properties?.icon ?? 'ph--placeholder--regular';
-    const label = pending
-      ? t('pending heading')
-      : toLocalizedString(node?.properties?.label ?? ['plank heading fallback label', { ns: DECK_PLUGIN }], t);
-    const { dispatchPromise: dispatch } = useIntentDispatcher();
-    const ActionRoot = node && popoverAnchorId === `dxos.org/ui/${DECK_PLUGIN}/${node.id}` ? Popover.Anchor : Fragment;
-
-    useEffect(() => {
-      const frame = requestAnimationFrame(() => {
-        // Load actions for the node.
-        node && graph.actions(node);
-      });
-
-      return () => cancelAnimationFrame(frame);
-    }, [node]);
-
-    // NOTE(Zan): Node ids may now contain a path like `${space}:${id}~comments`
-    const attendableId = id.split(SLUG_PATH_SEPARATOR).at(0);
-    const capabilities = useMemo(
-      () => ({
-        solo: breakpoint !== 'mobile' && (part === 'solo' || part === 'deck'),
-        incrementStart: canIncrementStart,
-        incrementEnd: canIncrementEnd,
-      }),
-      [breakpoint, part, canIncrementStart, canIncrementEnd],
-    );
-
-    const sigilActions = useMemo(
-      () => node && [actions, graph.actions(node)].filter((a) => a.length > 0),
-      [actions, node, graph],
-    );
-    const handleAction = useCallback((action: StackItemSigilAction) => {
-      typeof action.data === 'function' && action.data?.({ node: action as Node, caller: DECK_PLUGIN });
-    }, []);
-
-    const handlePlankAction = useCallback(
-      (eventType: DeckAction.PartAdjustment) => {
-        if (eventType === 'solo') {
-          return dispatch(createIntent(DeckAction.Adjust, { type: eventType, id }));
-        } else if (eventType === 'close') {
-          if (part === 'complementary') {
-            return dispatch(
-              createIntent(LayoutAction.UpdateComplementary, {
-                part: 'complementary',
-                options: { state: 'collapsed' },
-              }),
-            );
-          } else {
-            return dispatch(
-              createIntent(LayoutAction.Close, { part: 'main', subject: [id], options: { state: false } }),
-            );
-          }
-        } else {
-          return dispatch(createIntent(DeckAction.Adjust, { type: eventType, id }));
-        }
-      },
-      [dispatch, id, part],
-    );
-
-    return (
-      <StackItem.Heading
-        classNames={[
-          'plb-1 border-be border-separator items-stretch gap-1 sticky inline-start-12 app-drag',
-          part === 'solo' ? soloInlinePadding : 'pli-1',
-        ]}
-      >
-        <ActionRoot>
-          {node && sigilActions ? (
-            <StackItem.Sigil
-              icon={icon}
-              related={part === 'complementary'}
-              attendableId={attendableId}
-              triggerLabel={t('actions menu label')}
-              actions={sigilActions}
-              onAction={handleAction}
-            >
-              <Surface role='menu-footer' data={{ subject: node.data }} />
-            </StackItem.Sigil>
-          ) : (
-            <StackItem.SigilButton>
-              <span className='sr-only'>{label}</span>
-              <Icon icon={icon} size={5} />
-            </StackItem.SigilButton>
-          )}
-        </ActionRoot>
-        <TextTooltip text={label} onlyWhenTruncating>
-          <StackItem.HeadingLabel
-            attendableId={attendableId}
-            related={part === 'complementary'}
-            {...(pending && { classNames: 'text-description' })}
-          >
-            {label}
-          </StackItem.HeadingLabel>
-        </TextTooltip>
-        {node && part !== 'complementary' && <Surface role='navbar-end' data={{ subject: node.data }} />}
-        <PlankControls
-          capabilities={capabilities}
-          isSolo={part === 'solo'}
-          onClick={handlePlankAction}
-          close={part === 'complementary' ? 'minify-end' : true}
-        />
-      </StackItem.Heading>
-    );
-  },
-);

package/src/components/DeckLayout/Plank.tsx

@@ -1,149 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import React, { type KeyboardEvent, memo, useCallback, useLayoutEffect, useMemo, useRef } from 'react';
-
-import {
-  createIntent,
-  LayoutAction,
-  Surface,
-  useCapability,
-  useAppGraph,
-  useIntentDispatcher,
-} from '@dxos/app-framework';
-import { debounce } from '@dxos/async';
-import { useAttendableAttributes } from '@dxos/react-ui-attention';
-import { StackItem, railGridHorizontal } from '@dxos/react-ui-stack';
-import { mainIntrinsicSize, mx } from '@dxos/react-ui-theme';
-
-import { NodePlankHeading, type NodePlankHeadingProps } from './NodePlankHeading';
-import { PlankContentError, PlankError } from './PlankError';
-import { PlankLoading } from './PlankLoading';
-import { DeckCapabilities } from '../../capabilities';
-import { useNode, useMainSize } from '../../hooks';
-import { DeckAction, type LayoutMode } from '../../types';
-
-const UNKNOWN_ID = 'unknown_id';
-
-export type PlankProps = {
-  id?: string;
-  part: NodePlankHeadingProps['part'];
-  path?: string[];
-  order?: number;
-  active?: string[];
-  layoutMode: LayoutMode;
-};
-
-export const Plank = memo(({ id = UNKNOWN_ID, part, path, order, active, layoutMode }: PlankProps) => {
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
-  const { deck, popoverAnchorId, scrollIntoView } = useCapability(DeckCapabilities.DeckState);
-  const { graph } = useAppGraph();
-  const node = useNode(graph, id);
-  const rootElement = useRef<HTMLDivElement | null>(null);
-  const canResize = layoutMode === 'deck';
-  const Root = part === 'solo' ? 'article' : StackItem.Root;
-
-  const attendableAttrs = useAttendableAttributes(id);
-  const index = active ? active.findIndex((entryId) => entryId === id) : 0;
-  const length = active?.length ?? 1;
-  const canIncrementStart = active && index !== undefined && index > 0 && length !== undefined && length > 1;
-  const canIncrementEnd = active && index !== undefined && index < length - 1 && length !== undefined;
-
-  const key = id.split('+')[0];
-  const size = deck.plankSizing[key] as number | undefined;
-  const setSize = useCallback(
-    debounce((nextSize: number) => {
-      return dispatch(createIntent(DeckAction.UpdatePlankSize, { id: key, size: nextSize }));
-    }, 200),
-    [dispatch, key],
-  );
-
-  // TODO(thure): Tabster’s focus group should handle moving focus to Main, but something is blocking it.
-  const handleKeyDown = useCallback((event: KeyboardEvent) => {
-    if (event.target === event.currentTarget && event.key === 'Escape') {
-      rootElement.current?.closest('main')?.focus();
-    }
-  }, []);
-
-  useLayoutEffect(() => {
-    if (scrollIntoView === id) {
-      // TODO(wittjosiah): When focused on page load, the focus is always visible.
-      //   Forcing focus to something smaller than the plank prevents large focus ring in the interim.
-      const focusable = rootElement.current?.querySelector('button') || rootElement.current;
-      focusable?.focus({ preventScroll: true });
-      layoutMode === 'deck' && focusable?.scrollIntoView({ behavior: 'smooth', inline: 'center' });
-      // Clear the scroll into view state once it has been actioned.
-      void dispatch(createIntent(LayoutAction.ScrollIntoView, { part: 'current', subject: undefined }));
-    }
-  }, [id, scrollIntoView, layoutMode]);
-
-  const isSolo = layoutMode === 'solo' && part === 'solo';
-  const isAttendable = isSolo || (layoutMode === 'deck' && part === 'deck');
-
-  const sizeAttrs = useMainSize();
-
-  const data = useMemo(
-    () =>
-      node && {
-        subject: node.data,
-        path,
-        popoverAnchorId,
-      },
-    [node, node?.data, path, popoverAnchorId],
-  );
-
-  // TODO(wittjosiah): Change prop to accept a component.
-  const placeholder = useMemo(() => <PlankLoading />, []);
-
-  const className = mx(
-    'attention-surface relative',
-    isSolo && mainIntrinsicSize,
-    isSolo && railGridHorizontal,
-    isSolo ? 'grid absolute inset-0' : '!border-separator border-li',
-  );
-
-  return (
-    <Root
-      ref={rootElement}
-      data-testid='deck.plank'
-      tabIndex={0}
-      {...(part === 'solo'
-        ? ({ ...sizeAttrs, className } as any)
-        : {
-            item: { id },
-            size,
-            onSizeChange: setSize,
-            classNames: className,
-            order,
-            role: 'article',
-          })}
-      {...(isAttendable ? attendableAttrs : {})}
-      onKeyDown={handleKeyDown}
-    >
-      {node ? (
-        <>
-          <NodePlankHeading
-            id={id}
-            part={part}
-            node={node}
-            canIncrementStart={canIncrementStart}
-            canIncrementEnd={canIncrementEnd}
-            popoverAnchorId={popoverAnchorId}
-          />
-          <Surface
-            key={node.id}
-            role='article'
-            data={data}
-            limit={1}
-            fallback={PlankContentError}
-            placeholder={placeholder}
-          />
-        </>
-      ) : (
-        <PlankError id={id} part={part} />
-      )}
-      {canResize && <StackItem.ResizeHandle />}
-    </Root>
-  );
-});

package/src/hooks/useNode.ts

@@ -1,46 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { useEffect, useState } from 'react';
-
-import { type Graph, type Node } from '@dxos/plugin-graph';
-
-/**
- * React hook to get a node from the graph.
- *
- * @param graph Graph to find the node in.
- * @param id Id of the node to find.
- * @param timeout Optional timeout in milliseconds to wait for the node to be found.
- * @returns Node if found, undefined otherwise.
- */
-// TODO(wittjosiah): Factor out.
-export const useNode = <T = any>(graph: Graph, id?: string, timeout?: number): Node<T> | undefined => {
-  const [nodeState, setNodeState] = useState<Node<T> | undefined>(id ? graph.findNode(id, false) : undefined);
-
-  useEffect(() => {
-    if (!id && nodeState) {
-      setNodeState(undefined);
-    }
-
-    if (nodeState?.id === id || !id) {
-      return;
-    }
-
-    // Set timeout did not seem to effectively not block the UI thread.
-    const frame = requestAnimationFrame(async () => {
-      try {
-        const node = await graph.waitForNode(id, timeout);
-        if (node) {
-          setNodeState(node);
-        }
-      } catch {
-        // TODO(ZaymonFC): This leaves the resolved node in an invalid state in the case of a timeout.
-      }
-    });
-
-    return () => cancelAnimationFrame(frame);
-  }, [graph, id, timeout, nodeState?.id]);
-
-  return nodeState;
-};