@dxos/react-ui-stack 0.7.5-main.9cb18ac → 0.7.5-main.9d2a38b

package/src/components/StackItemContent.tsx

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { type ComponentPropsWithoutRef } from 'react';
+import React, { type ComponentPropsWithoutRef, forwardRef } from 'react';
 
 import { type ThemedClassName } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
@@ -10,33 +10,51 @@ import { mx } from '@dxos/react-ui-theme';
 import { useStack } from './StackContext';
 
 export type StackItemContentProps = ThemedClassName<ComponentPropsWithoutRef<'div'>> & {
-  toolbar?: boolean;
+  /**
+   * This flag is required in order to clarify a developer experience that seemed like it needed extra boilerplate
+   * (`row-span-2`) or was buggy. See the description of the StackItem.Content component itself for more information.
+   */
+  toolbar: boolean;
+  /**
+   * Whether to provide for the layout of a statusbar after the content.
+   */
   statusbar?: boolean;
+  /**
+   * Whether to set a certain aspect ratio on the content, including the toolbar and statusbar. This is provided for
+   * convenience and consistency; it can instead be specified by the `classNames` or `style` props as needed.
+   */
+  size?: 'intrinsic' | 'video' | 'square';
 };
 
-export const StackItemContent = ({
-  children,
-  toolbar = true,
-  statusbar,
-  classNames,
-  ...props
-}: StackItemContentProps) => {
-  const { size } = useStack();
+/**
+ * This component should be used by plugins for rendering content within a stack item, a.k.a. a “plank” or “section”.
+ * The `toolbar` flag must be provided since this component provides for the layout of content with the toolbar.
+ */
+export const StackItemContent = forwardRef<HTMLDivElement, StackItemContentProps>(
+  ({ children, toolbar, statusbar, classNames, size = 'intrinsic', ...props }, forwardedRef) => {
+    const { size: stackItemSize } = useStack();
 
-  return (
-    <div
-      role='none'
-      {...props}
-      className={mx('group grid grid-cols-[100%]', size === 'contain' && 'min-bs-0 overflow-hidden', classNames)}
-      style={{
-        gridTemplateRows: [
-          ...(toolbar ? ['var(--rail-action)'] : []),
-          '1fr',
-          ...(statusbar ? ['var(--statusbar-size)'] : []),
-        ].join(' '),
-      }}
-    >
-      {children}
-    </div>
-  );
-};
+    return (
+      <div
+        role='none'
+        {...props}
+        className={mx(
+          'group grid grid-cols-[100%]',
+          stackItemSize === 'contain' && 'min-bs-0 overflow-hidden',
+          size === 'video' ? 'aspect-video' : size === 'square' && 'aspect-square',
+          classNames,
+        )}
+        style={{
+          gridTemplateRows: [
+            ...(toolbar ? ['var(--rail-action)'] : []),
+            '1fr',
+            ...(statusbar ? ['var(--statusbar-size)'] : []),
+          ].join(' '),
+        }}
+        ref={forwardedRef}
+      >
+        {children}
+      </div>
+    );
+  },
+);

package/src/components/StackItemHeading.tsx

@@ -43,7 +43,7 @@ export const StackItemHeadingLabel = forwardRef<HTMLHeadingElement, StackItemHea
         {...props}
         data-attention={((related && isRelated) || hasAttention || isAncestor).toString()}
         className={mx(
-          'pli-1 min-is-0 is-0 grow truncate font-medium text-baseText data-[attention=true]:text-accentText',
+          'pli-1 min-is-0 is-0 grow truncate font-medium text-baseText data-[attention=true]:text-accentText self-center',
           classNames,
         )}
         ref={forwardedRef}

package/src/components/StackItemSigil.tsx

@@ -42,7 +42,7 @@ export const StackItemSigilButton = forwardRef<HTMLButtonElement, StackItemSigil
       <Button
         {...props}
         variant={variant}
-        classNames={['m-1 shrink-0 pli-0 min-bs-0 is-[--rail-action] bs-[--rail-action] relative', classNames]}
+        classNames={['shrink-0 pli-0 min-bs-0 is-[--rail-action] bs-[--rail-action] relative', classNames]}
         ref={forwardedRef}
       >
         <MenuSignifierHorizontal />

package/dist/types/src/testing/EditorContent.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-import { type StackItemContentProps } from '../components';
-export declare const EditorContent: ({ data: { content } }: {
-    data: StackItemContentProps & {
-        content?: string;
-    };
-}) => React.JSX.Element;
-//# sourceMappingURL=EditorContent.d.ts.map

package/dist/types/src/testing/EditorContent.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"EditorContent.d.ts","sourceRoot":"","sources":["../../../../src/testing/EditorContent.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAkBxC,OAAO,EAAa,KAAK,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAEtE,eAAO,MAAM,aAAa,0BAAgC;IAAE,IAAI,EAAE,qBAAqB,GAAG;QAAE,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;CAAE,sBAmC/G,CAAC"}

package/src/testing/EditorContent.tsx

@@ -1,60 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import React, { useState } from 'react';
-
-import { Expando } from '@dxos/echo-schema';
-import { create } from '@dxos/live-object';
-import { useThemeContext } from '@dxos/react-ui';
-import {
-  createBasicExtensions,
-  createMarkdownExtensions,
-  createThemeExtensions,
-  decorateMarkdown,
-  formattingKeymap,
-  Toolbar,
-  useActionHandler,
-  useFormattingState,
-  useTextEditor,
-} from '@dxos/react-ui-editor';
-import { focusRing, mx, textBlockWidth } from '@dxos/react-ui-theme';
-
-import { StackItem, type StackItemContentProps } from '../components';
-
-export const EditorContent = ({ data: { content = '' } }: { data: StackItemContentProps & { content?: string } }) => {
-  const { themeMode } = useThemeContext();
-  const [text] = useState(create(Expando, { content }));
-  const id = text.id;
-  const [formattingState, formattingObserver] = useFormattingState();
-  const { parentRef, view, focusAttributes } = useTextEditor(() => {
-    return {
-      id,
-      initialValue: text.content,
-      extensions: [
-        formattingObserver,
-        createBasicExtensions(),
-        createMarkdownExtensions({ themeMode }),
-        createThemeExtensions({ themeMode, syntaxHighlighting: true, slots: { editor: { className: 'p-2' } } }),
-        decorateMarkdown(),
-        formattingKeymap(),
-      ],
-    };
-  }, [id, formattingObserver, themeMode]);
-
-  const handleAction = useActionHandler(view);
-
-  return (
-    <StackItem.Content>
-      <div {...focusAttributes} className={mx(textBlockWidth, focusRing, 'rounded-sm order-last')} ref={parentRef} />
-      <Toolbar.Root
-        onAction={handleAction}
-        state={formattingState}
-        classNames='sticky block-start-0 bg-[--sticky-bg] z-10'
-      >
-        <Toolbar.Markdown />
-        <Toolbar.Separator />
-      </Toolbar.Root>
-    </StackItem.Content>
-  );
-};