@dxos/react-ui 0.3.3-main.3ce60d4 → 0.3.3-main.3dbd870

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui",
-  "version": "0.3.3-main.3ce60d4",
+  "version": "0.3.3-main.3dbd870",
   "description": "Opinionated, styled, low-level React components for DXOS.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -40,10 +40,10 @@
     "jdenticon": "^3.2.0",
     "keyborg": "^2.0.0",
     "react-i18next": "^11.18.6",
-    "@dxos/react-hooks": "0.3.3-main.3ce60d4",
-    "@dxos/react-input": "0.3.3-main.3ce60d4",
-    "@dxos/react-list": "0.3.3-main.3ce60d4",
-    "@dxos/react-ui-types": "0.3.3-main.3ce60d4"
+    "@dxos/react-hooks": "0.3.3-main.3dbd870",
+    "@dxos/react-input": "0.3.3-main.3dbd870",
+    "@dxos/react-list": "0.3.3-main.3dbd870",
+    "@dxos/react-ui-types": "0.3.3-main.3dbd870"
   },
   "devDependencies": {
     "@dnd-kit/core": "^6.0.5",
@@ -58,7 +58,7 @@
     "react-dom": "^18.2.0",
     "vite": "^4.3.9",
     "vite-plugin-turbosnap": "^1.0.2",
-    "@dxos/react-ui-theme": "0.3.3-main.3ce60d4"
+    "@dxos/react-ui-theme": "0.3.3-main.3dbd870"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.0.5",

package/src/components/Card/Card.tsx

@@ -2,12 +2,19 @@
 // Copyright 2023 DXOS.org
 //
 
-import { DotsSixVertical, DotsThreeVertical } from '@phosphor-icons/react';
+import { DotsSixVertical, DotsThreeVertical, type Icon } from '@phosphor-icons/react';
 import { type Primitive } from '@radix-ui/react-primitive';
-import React, { type ComponentPropsWithoutRef, type ComponentPropsWithRef, type FC, forwardRef } from 'react';
+import React, {
+  type ComponentPropsWithoutRef,
+  type ComponentPropsWithRef,
+  type FC,
+  forwardRef,
+  type PropsWithChildren,
+} from 'react';
 
 import { useDensityContext, useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
+import { DropdownMenu } from '../DropdownMenu';
 
 type CardRootProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.div>> & {
   grow?: boolean;
@@ -65,17 +72,42 @@ const CardDragHandle: FC<CardDragHandleProps> = ({ position, classNames, ...prop
   );
 };
 
-type CardMenuProps = ThemedClassName<ComponentPropsWithoutRef<'div'>> & { position?: 'left' | 'right' };
+type CardEndcapProps = ThemedClassName<ComponentPropsWithoutRef<'div'>> & { Icon: Icon; position?: 'left' | 'right' };
 
-const CardMenu = forwardRef<HTMLDivElement, CardMenuProps>(({ position, classNames, ...props }, forwardRef) => {
+const CardEndcap: FC<CardEndcapProps> = ({ Icon, position, classNames, ...props }) => {
   const { tx } = useThemeContext();
   const density = useDensityContext();
   return (
-    <div {...props} className={tx('card.menu', 'card', { density, position }, classNames)} ref={forwardRef}>
-      <DotsThreeVertical className={tx('card.menuIcon', 'card', {})} />
+    <div {...props} className={tx('card.menu', 'card', { density, position }, classNames)}>
+      <Icon className={tx('card.menuIcon', 'card')} />
     </div>
   );
-});
+};
+
+type CardMenuProps = PropsWithChildren<
+  ThemedClassName<ComponentPropsWithoutRef<'div'>> & { position?: 'left' | 'right' }
+>;
+
+// TODO(burdon): Reconcile with Endcap (remove dropdown from here). See ListItem.Endcap (style icon/size?)
+const CardMenu = forwardRef<HTMLDivElement, CardMenuProps>(
+  ({ children, position, classNames, ...props }, forwardRef) => {
+    const { tx } = useThemeContext();
+    const density = useDensityContext();
+    return (
+      <div {...props} className={tx('card.menu', 'card', { density, position }, classNames)} ref={forwardRef}>
+        <DropdownMenu.Root>
+          <DropdownMenu.Trigger asChild>
+            <DotsThreeVertical className={tx('card.menuIcon', 'card', {})} />
+          </DropdownMenu.Trigger>
+          {/* TODO(burdon): Position to the left of the menu button. */}
+          <DropdownMenu.Content>
+            <DropdownMenu.Viewport>{children}</DropdownMenu.Viewport>
+          </DropdownMenu.Content>
+        </DropdownMenu.Root>
+      </div>
+    );
+  },
+);
 
 type CardBodyProps = ThemedClassName<ComponentPropsWithoutRef<'div'>> & { gutter?: boolean };
 
@@ -105,6 +137,7 @@ export const Card = {
   Root: CardRoot,
   Header: CardHeader,
   DragHandle: CardDragHandle,
+  Endcap: CardEndcap,
   Menu: CardMenu,
   Title: CardTitle,
   Body: CardBody,

package/src/components/Main/Main.tsx

@@ -131,8 +131,6 @@ type MainSidebarProps = ThemedClassName<ComponentPropsWithRef<typeof DialogConte
   side: 'inline-start' | 'inline-end';
 };
 
-// TODO(burdon): Factor out Sidebar?
-// TODO(burdon): Style left/right sidebar differently.
 const MainSidebar = forwardRef<HTMLDivElement, MainSidebarProps>(
   ({ classNames, children, swipeToDismiss, onOpenAutoFocus, open, setOpen, side, ...props }, forwardedRef) => {
     const [isLg] = useMediaQuery('lg', { ssr: false });
@@ -259,9 +257,9 @@ const MainOverlay = forwardRef<HTMLDivElement, MainOverlayProps>(({ classNames,
 });
 
 export const Main = {
+  Root: MainRoot,
   Content: MainContent,
   Overlay: MainOverlay,
-  Root: MainRoot,
   NavigationSidebar: MainNavigationSidebar,
   ComplementarySidebar: MainComplementarySidebar,
 };