@dxos/react-ui 0.3.10 → 0.3.11-main.00a28cb

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

@@ -3,10 +3,10 @@ export * from './Avatars';
 export * from './Breadcrumb';
 export * from './Buttons';
 export * from './Dialogs';
-export * from './DropdownMenu';
+export * from './Menus';
 export * from './Input';
 export * from './Link';
-export * from './Lists';
+export * from './List';
 export * from './Main';
 export * from './Message';
 export * from './Popover';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAIA,cAAc,oBAAoB,CAAC;AACnC,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,OAAO,CAAC;AACtB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAE1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAIA,cAAc,oBAAoB,CAAC;AACnC,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,OAAO,CAAC;AACtB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAE1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui",
-  "version": "0.3.10",
+  "version": "0.3.11-main.00a28cb",
   "description": "Low-level React components for DXOS, applying a theme to a core group of primitives",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -13,10 +13,12 @@
     "src"
   ],
   "dependencies": {
+    "@fluentui/react-tabster": "^9.16.1",
     "@radix-ui/react-alert-dialog": "^1.0.3",
     "@radix-ui/react-avatar": "^1.0.2",
     "@radix-ui/react-checkbox": "^1.0.3",
     "@radix-ui/react-context": "^1.0.0",
+    "@radix-ui/react-context-menu": "^2.1.5",
     "@radix-ui/react-dialog": "^1.0.3",
     "@radix-ui/react-dropdown-menu": "^2.0.5",
     "@radix-ui/react-popover": "^1.0.6",
@@ -37,24 +39,24 @@
     "jdenticon": "^3.2.0",
     "keyborg": "^2.0.0",
     "react-i18next": "^11.18.6",
-    "@dxos/react-hooks": "0.3.10",
-    "@dxos/react-input": "0.3.10",
-    "@dxos/react-list": "0.3.10",
-    "@dxos/react-ui-types": "0.3.10"
+    "@dxos/react-list": "0.3.11-main.00a28cb",
+    "@dxos/react-hooks": "0.3.11-main.00a28cb",
+    "@dxos/react-input": "0.3.11-main.00a28cb",
+    "@dxos/react-ui-types": "0.3.11-main.00a28cb"
   },
   "devDependencies": {
     "@dnd-kit/core": "^6.0.5",
     "@dnd-kit/sortable": "^7.0.1",
     "@dnd-kit/utilities": "^3.2.0",
-    "@faker-js/faker": "^8.0.2",
+    "@faker-js/faker": "^8.3.1",
     "@phosphor-icons/react": "^2.0.5",
     "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "vite": "^4.3.9",
+    "vite": "^5.0.11",
     "vite-plugin-turbosnap": "^1.0.2",
-    "@dxos/react-ui-theme": "0.3.10"
+    "@dxos/react-ui-theme": "0.3.11-main.00a28cb"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.0.5",

package/src/components/Avatars/Avatar.tsx

@@ -21,7 +21,7 @@ import { useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
 
 type AvatarVariant = 'square' | 'circle';
-type AvatarStatus = 'active' | 'inactive' | 'error' | 'warning';
+type AvatarStatus = 'active' | 'inactive' | 'current' | 'error' | 'warning';
 type AvatarAnimation = 'pulse' | 'none';
 
 export type AvatarRootProps = PropsWithChildren<Partial<AvatarContextValue>>;

package/src/components/{Lists → List}/List.stories.tsx

@@ -7,10 +7,11 @@ import '@dxosTheme';
 import { DndContext, type DragEndEvent, type DragStartEvent } from '@dnd-kit/core';
 import { arrayMove, SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
+import { useArrowNavigationGroup } from '@fluentui/react-tabster';
 import { DotsSixVertical, PushPin } from '@phosphor-icons/react';
 import React, { type FC, type ReactNode, useState } from 'react';
 
-import { getSize, mx, surfaceElevation } from '@dxos/react-ui-theme';
+import { getSize, ghostHover, ghostSelected, mx, surfaceElevation } from '@dxos/react-ui-theme';
 
 import { List, ListItem, type ListProps, type ListScopedProps } from './List';
 import { withTheme } from '../../testing';
@@ -106,6 +107,7 @@ const ManySizesDraggableListItem = ({
     </ListItem.Root>
   );
 };
+
 export const ManySizesDraggable = {
   render: ({ ...args }) => {
     const [items, setItems] = useState(
@@ -183,6 +185,40 @@ export const Collapsible = {
   },
   args: {
     variant: 'unordered',
-    toggleOpenLabel: 'Open/close storybook list item',
+    // toggleOpenLabel: 'Open/close storybook list item', // TODO(burdon): ???
+  },
+};
+
+export const SelectableListbox = {
+  render: () => {
+    const [selectedId, setSelectedId] = useState<string>();
+    const domAttributes = useArrowNavigationGroup({ axis: 'vertical' });
+    const [items, _setItems] = useState(
+      [...Array(12)].map((_, index) => ({
+        id: `listItem-${index}`,
+        text: `List item ${index + 1}`,
+      })),
+    );
+
+    // TODO(burdon): Handle up/down.
+    const handleKeyUp = (event: any) => {
+      console.log(event);
+    };
+
+    return (
+      <List selectable {...domAttributes}>
+        {items.map(({ id, text }) => (
+          <ListItem.Root
+            key={id}
+            selected={selectedId === id}
+            classNames={mx('items-center', ghostHover, selectedId === id && ghostSelected)}
+            onClick={() => setSelectedId(id)}
+            onKeyUp={handleKeyUp}
+          >
+            <ListItem.Heading classNames='grow'>{text}</ListItem.Heading>
+          </ListItem.Root>
+        ))}
+      </List>
+    );
   },
 };

package/src/components/Menus/ContextMenu.stories.tsx

@@ -0,0 +1,106 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import '@dxosTheme';
+
+import React from 'react';
+
+import { ContextMenu } from './ContextMenu';
+import { withTheme } from '../../testing';
+
+const StorybookContextMenu = () => {
+  // NOTE(thure): Since long-tap will select text in some OSs, apply `select-none` to `ContextMenu.Trigger` where possible.
+  return (
+    <ContextMenu.Root>
+      <ContextMenu.Trigger className='select-none border border-dashed border-neutral-400/50 rounded-lg flex items-center justify-center p-8 font-normal'>
+        Right-click / long-tap here.
+      </ContextMenu.Trigger>
+
+      <ContextMenu.Content collisionPadding={8}>
+        <ContextMenu.Viewport>
+          <ContextMenu.Item>
+            <span className='grow'>New Tab</span>
+            <span className='opacity-50'>⌘+T</span>
+          </ContextMenu.Item>
+          <ContextMenu.Item>
+            <span className='grow'>New Window</span>
+            <span className='opacity-50'>⌘+N</span>
+          </ContextMenu.Item>
+          <ContextMenu.Item disabled>
+            <span className='grow'>New Private Window</span>
+            <span className='opacity-50'>⇧+⌘+N</span>
+          </ContextMenu.Item>
+          {/* <ContextMenu.Sub> */}
+          {/*  <ContextMenu.SubTrigger> */}
+          {/*    More Tools */}
+          {/*    <div> */}
+          {/*      <ChevronRightIcon /> */}
+          {/*    </div> */}
+          {/*  </ContextMenu.SubTrigger> */}
+          {/*  <ContextMenu.Portal> */}
+          {/*    <ContextMenu.SubContent sideOffset={2} alignOffset={-5}> */}
+          {/*      <ContextMenu.Item> */}
+          {/*        Save Page As… <div>⌘+S</div> */}
+          {/*      </ContextMenu.Item> */}
+          {/*      <ContextMenu.Item>Create Shortcut…</ContextMenu.Item> */}
+          {/*      <ContextMenu.Item>Name Window…</ContextMenu.Item> */}
+          {/*      <ContextMenu.Separator /> */}
+          {/*      <ContextMenu.Item>Developer Tools</ContextMenu.Item> */}
+          {/*    </ContextMenu.SubContent> */}
+          {/*  </ContextMenu.Portal> */}
+          {/* </ContextMenu.Sub> */}
+
+          {/* <ContextMenu.Separator /> */}
+
+          {/* <ContextMenu.CheckboxItem checked={bookmarksChecked} onCheckedChange={setBookmarksChecked}> */}
+          {/*  <ContextMenu.ItemIndicator> */}
+          {/*    <CheckIcon /> */}
+          {/*  </ContextMenu.ItemIndicator> */}
+          {/*  Show Bookmarks <div>⌘+B</div> */}
+          {/* </ContextMenu.CheckboxItem> */}
+          {/* <ContextMenu.CheckboxItem checked={urlsChecked} onCheckedChange={setUrlsChecked}> */}
+          {/*  <ContextMenu.ItemIndicator> */}
+          {/*    <CheckIcon /> */}
+          {/*  </ContextMenu.ItemIndicator> */}
+          {/*  Show Full URLs */}
+          {/* </ContextMenu.CheckboxItem> */}
+
+          <ContextMenu.Separator />
+
+          <ContextMenu.GroupLabel>People</ContextMenu.GroupLabel>
+          {/* <ContextMenu.RadioGroup value={person} onValueChange={setPerson}> */}
+          {/*  <ContextMenu.RadioItem value='pedro'> */}
+          {/*    <ContextMenu.ItemIndicator> */}
+          {/*      <DotFilledIcon /> */}
+          {/*    </ContextMenu.ItemIndicator> */}
+          {/*    Pedro Duarte */}
+          {/*  </ContextMenu.RadioItem> */}
+          {/*  <ContextMenu.RadioItem value='colm'> */}
+          {/*    <ContextMenu.ItemIndicator> */}
+          {/*      <DotFilledIcon /> */}
+          {/*    </ContextMenu.ItemIndicator> */}
+          {/*    Colm Tuite */}
+          {/*  </ContextMenu.RadioItem> */}
+          {/* </ContextMenu.RadioGroup> */}
+        </ContextMenu.Viewport>
+
+        <ContextMenu.Arrow />
+      </ContextMenu.Content>
+    </ContextMenu.Root>
+  );
+};
+
+export default {
+  title: 'react-ui/Context menu',
+  component: StorybookContextMenu,
+  decorators: [withTheme],
+  parameters: { chromatic: { disableSnapshot: false } },
+};
+
+export const Default = {
+  args: {},
+  parameters: {
+    chromatic: { delay: 1600 },
+  },
+};

package/src/components/Menus/ContextMenu.tsx

@@ -0,0 +1,170 @@
+//
+// Copyright 2023 DXOS.org
+//
+import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
+import { Primitive } from '@radix-ui/react-primitive';
+import { Slot } from '@radix-ui/react-slot';
+import React, { type ComponentPropsWithRef, forwardRef } from 'react';
+
+import { useThemeContext } from '../../hooks';
+import { type ThemedClassName } from '../../util';
+import { ElevationProvider } from '../ElevationProvider';
+
+type ContextMenuRootProps = ContextMenuPrimitive.ContextMenuProps;
+
+const ContextMenuRoot = ContextMenuPrimitive.ContextMenu;
+
+type ContextMenuTriggerProps = ContextMenuPrimitive.ContextMenuTriggerProps;
+
+const ContextMenuTrigger = ContextMenuPrimitive.Trigger;
+
+type ContextMenuPortalProps = ContextMenuPrimitive.ContextMenuPortalProps;
+
+const ContextMenuPortal = ContextMenuPrimitive.Portal;
+
+type ContextMenuContentProps = ThemedClassName<ContextMenuPrimitive.ContextMenuContentProps> & {
+  constrainBlockSize?: boolean;
+};
+
+const ContextMenuContent = forwardRef<HTMLDivElement, ContextMenuContentProps>(
+  ({ classNames, children, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    return (
+      <ContextMenuPrimitive.Content
+        collisionPadding={8}
+        {...props}
+        className={tx('menu.content', 'menu', {}, classNames)}
+        ref={forwardedRef}
+      >
+        <ElevationProvider elevation='chrome'>{children}</ElevationProvider>
+      </ContextMenuPrimitive.Content>
+    );
+  },
+);
+
+type ContextMenuViewportProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.div>> & {
+  asChild?: boolean;
+};
+
+const ContextMenuViewport = forwardRef<HTMLDivElement, ContextMenuViewportProps>(
+  ({ classNames, asChild, children, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    const Root = asChild ? Slot : Primitive.div;
+    return (
+      <Root {...props} className={tx('menu.viewport', 'menu__viewport', {}, classNames)} ref={forwardedRef}>
+        {children}
+      </Root>
+    );
+  },
+);
+
+type ContextMenuArrowProps = ThemedClassName<ContextMenuPrimitive.ContextMenuArrowProps>;
+
+const ContextMenuArrow = forwardRef<SVGSVGElement, ContextMenuArrowProps>(({ classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return (
+    <ContextMenuPrimitive.Arrow
+      {...props}
+      className={tx('menu.arrow', 'menu__arrow', {}, classNames)}
+      ref={forwardedRef}
+    />
+  );
+});
+
+type ContextMenuGroupProps = ContextMenuPrimitive.ContextMenuGroupProps;
+
+const ContextMenuGroup = ContextMenuPrimitive.Group;
+
+type ContextMenuItemIndicatorProps = ContextMenuPrimitive.ContextMenuItemIndicatorProps;
+
+const ContextMenuItemIndicator = ContextMenuPrimitive.ItemIndicator;
+
+type ContextMenuItemProps = ThemedClassName<ContextMenuPrimitive.ContextMenuItemProps>;
+
+const ContextMenuItem = forwardRef<HTMLDivElement, ContextMenuItemProps>(
+  ({ classNames, ...props }: ContextMenuItemProps, forwardedRef) => {
+    const { tx } = useThemeContext();
+    return (
+      <ContextMenuPrimitive.Item
+        {...props}
+        className={tx('menu.item', 'menu__item', {}, classNames)}
+        ref={forwardedRef}
+      />
+    );
+  },
+);
+
+type ContextMenuCheckboxItemProps = ThemedClassName<ContextMenuPrimitive.ContextMenuCheckboxItemProps>;
+
+const ContextMenuCheckboxItem = forwardRef<HTMLDivElement, ContextMenuCheckboxItemProps>(
+  ({ classNames, ...props }: ContextMenuItemProps, forwardedRef) => {
+    const { tx } = useThemeContext();
+    return (
+      <ContextMenuPrimitive.CheckboxItem
+        {...props}
+        className={tx('menu.item', 'menu__item--checkbox', {}, classNames)}
+        ref={forwardedRef}
+      />
+    );
+  },
+);
+
+type ContextMenuSeparatorProps = ThemedClassName<ContextMenuPrimitive.ContextMenuSeparatorProps>;
+
+const ContextMenuSeparator = forwardRef<HTMLDivElement, ContextMenuSeparatorProps>(
+  ({ classNames, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    return (
+      <ContextMenuPrimitive.Separator
+        {...props}
+        className={tx('menu.separator', 'menu__item', {}, classNames)}
+        ref={forwardedRef}
+      />
+    );
+  },
+);
+
+type ContextMenuGroupLabelProps = ThemedClassName<ContextMenuPrimitive.ContextMenuLabelProps>;
+
+const ContextMenuGroupLabel = forwardRef<HTMLDivElement, ContextMenuGroupLabelProps>(
+  ({ classNames, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    return (
+      <ContextMenuPrimitive.Label
+        {...props}
+        className={tx('menu.groupLabel', 'menu__group__label', {}, classNames)}
+        ref={forwardedRef}
+      />
+    );
+  },
+);
+
+export const ContextMenu = {
+  Root: ContextMenuRoot,
+  Trigger: ContextMenuTrigger,
+  Portal: ContextMenuPortal,
+  Content: ContextMenuContent,
+  Viewport: ContextMenuViewport,
+  Arrow: ContextMenuArrow,
+  Group: ContextMenuGroup,
+  Item: ContextMenuItem,
+  CheckboxItem: ContextMenuCheckboxItem,
+  ItemIndicator: ContextMenuItemIndicator,
+  Separator: ContextMenuSeparator,
+  GroupLabel: ContextMenuGroupLabel,
+};
+
+export type {
+  ContextMenuRootProps,
+  ContextMenuTriggerProps,
+  ContextMenuPortalProps,
+  ContextMenuContentProps,
+  ContextMenuViewportProps,
+  ContextMenuArrowProps,
+  ContextMenuGroupProps,
+  ContextMenuItemProps,
+  ContextMenuCheckboxItemProps,
+  ContextMenuItemIndicatorProps,
+  ContextMenuSeparatorProps,
+  ContextMenuGroupLabelProps,
+};

package/src/components/Menus/DropdownMenu.tsx

@@ -0,0 +1,173 @@
+//
+// Copyright 2023 DXOS.org
+//
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { Primitive } from '@radix-ui/react-primitive';
+import { Slot } from '@radix-ui/react-slot';
+import React, { type ComponentPropsWithRef, forwardRef } from 'react';
+
+import { useThemeContext } from '../../hooks';
+import { type ThemedClassName } from '../../util';
+import { ElevationProvider } from '../ElevationProvider';
+
+type DropdownMenuRootProps = DropdownMenuPrimitive.DropdownMenuProps;
+
+const DropdownMenuRoot = DropdownMenuPrimitive.DropdownMenu;
+
+type DropdownMenuTriggerProps = DropdownMenuPrimitive.DropdownMenuTriggerProps;
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+
+type DropdownMenuPortalProps = DropdownMenuPrimitive.DropdownMenuPortalProps;
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+
+type DropdownMenuContentProps = ThemedClassName<DropdownMenuPrimitive.DropdownMenuContentProps> & {
+  constrainBlockSize?: boolean;
+};
+
+const DropdownMenuContent = forwardRef<HTMLDivElement, DropdownMenuContentProps>(
+  ({ classNames, children, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    return (
+      <DropdownMenuPrimitive.Content
+        sideOffset={4}
+        collisionPadding={8}
+        {...props}
+        className={tx('menu.content', 'menu', {}, classNames)}
+        ref={forwardedRef}
+      >
+        <ElevationProvider elevation='chrome'>{children}</ElevationProvider>
+      </DropdownMenuPrimitive.Content>
+    );
+  },
+);
+
+type DropdownMenuViewportProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.div>> & {
+  asChild?: boolean;
+};
+
+const DropdownMenuViewport = forwardRef<HTMLDivElement, DropdownMenuViewportProps>(
+  ({ classNames, asChild, children, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    const Root = asChild ? Slot : Primitive.div;
+    return (
+      <Root {...props} className={tx('menu.viewport', 'menu__viewport', {}, classNames)} ref={forwardedRef}>
+        {children}
+      </Root>
+    );
+  },
+);
+
+type DropdownMenuArrowProps = ThemedClassName<DropdownMenuPrimitive.DropdownMenuArrowProps>;
+
+const DropdownMenuArrow = forwardRef<SVGSVGElement, DropdownMenuArrowProps>(
+  ({ classNames, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    return (
+      <DropdownMenuPrimitive.Arrow
+        {...props}
+        className={tx('menu.arrow', 'menu__arrow', {}, classNames)}
+        ref={forwardedRef}
+      />
+    );
+  },
+);
+
+type DropdownMenuGroupProps = DropdownMenuPrimitive.DropdownMenuGroupProps;
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+
+type DropdownMenuItemIndicatorProps = DropdownMenuPrimitive.DropdownMenuItemIndicatorProps;
+
+const DropdownMenuItemIndicator = DropdownMenuPrimitive.ItemIndicator;
+
+type DropdownMenuItemProps = ThemedClassName<DropdownMenuPrimitive.DropdownMenuItemProps>;
+
+const DropdownMenuItem = forwardRef<HTMLDivElement, DropdownMenuItemProps>(
+  ({ classNames, ...props }: DropdownMenuItemProps, forwardedRef) => {
+    const { tx } = useThemeContext();
+    return (
+      <DropdownMenuPrimitive.Item
+        {...props}
+        className={tx('menu.item', 'menu__item', {}, classNames)}
+        ref={forwardedRef}
+      />
+    );
+  },
+);
+
+type DropdownMenuCheckboxItemProps = ThemedClassName<DropdownMenuPrimitive.DropdownMenuCheckboxItemProps>;
+
+const DropdownMenuCheckboxItem = forwardRef<HTMLDivElement, DropdownMenuCheckboxItemProps>(
+  ({ classNames, ...props }: DropdownMenuItemProps, forwardedRef) => {
+    const { tx } = useThemeContext();
+    return (
+      <DropdownMenuPrimitive.CheckboxItem
+        {...props}
+        className={tx('menu.item', 'menu__item--checkbox', {}, classNames)}
+        ref={forwardedRef}
+      />
+    );
+  },
+);
+
+type DropdownMenuSeparatorProps = ThemedClassName<DropdownMenuPrimitive.DropdownMenuSeparatorProps>;
+
+const DropdownMenuSeparator = forwardRef<HTMLDivElement, DropdownMenuSeparatorProps>(
+  ({ classNames, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    return (
+      <DropdownMenuPrimitive.Separator
+        {...props}
+        className={tx('menu.separator', 'menu__item', {}, classNames)}
+        ref={forwardedRef}
+      />
+    );
+  },
+);
+
+type DropdownMenuGroupLabelProps = ThemedClassName<DropdownMenuPrimitive.DropdownMenuLabelProps>;
+
+const DropdownMenuGroupLabel = forwardRef<HTMLDivElement, DropdownMenuGroupLabelProps>(
+  ({ classNames, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    return (
+      <DropdownMenuPrimitive.Label
+        {...props}
+        className={tx('menu.groupLabel', 'menu__group__label', {}, classNames)}
+        ref={forwardedRef}
+      />
+    );
+  },
+);
+
+export const DropdownMenu = {
+  Root: DropdownMenuRoot,
+  Trigger: DropdownMenuTrigger,
+  Portal: DropdownMenuPortal,
+  Content: DropdownMenuContent,
+  Viewport: DropdownMenuViewport,
+  Arrow: DropdownMenuArrow,
+  Group: DropdownMenuGroup,
+  Item: DropdownMenuItem,
+  CheckboxItem: DropdownMenuCheckboxItem,
+  ItemIndicator: DropdownMenuItemIndicator,
+  Separator: DropdownMenuSeparator,
+  GroupLabel: DropdownMenuGroupLabel,
+};
+
+export type {
+  DropdownMenuRootProps,
+  DropdownMenuTriggerProps,
+  DropdownMenuPortalProps,
+  DropdownMenuContentProps,
+  DropdownMenuViewportProps,
+  DropdownMenuArrowProps,
+  DropdownMenuGroupProps,
+  DropdownMenuItemProps,
+  DropdownMenuCheckboxItemProps,
+  DropdownMenuItemIndicatorProps,
+  DropdownMenuSeparatorProps,
+  DropdownMenuGroupLabelProps,
+};

package/src/components/{DropdownMenu → Menus}/index.ts

@@ -2,4 +2,5 @@
 // Copyright 2023 DXOS.org
 //
 
+export * from './ContextMenu';
 export * from './DropdownMenu';

package/src/components/index.ts

@@ -7,10 +7,10 @@ export * from './Avatars';
 export * from './Breadcrumb';
 export * from './Buttons';
 export * from './Dialogs';
-export * from './DropdownMenu';
+export * from './Menus';
 export * from './Input';
 export * from './Link';
-export * from './Lists';
+export * from './List';
 export * from './Main';
 export * from './Message';
 export * from './Popover';

package/src/playground/Typography.stories.tsx

@@ -44,7 +44,7 @@ const TypographyStory = () => {
 };
 
 export default {
-  title: 'DXOS UI/Scenarios/Typography',
+  title: 'react-ui/Scenarios/Typography',
   component: TypographyStory,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },

package/dist/types/src/components/DropdownMenu/DropdownMenu.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../../../../src/components/DropdownMenu/DropdownMenu.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEL,KAAK,iBAAiB,IAAI,8BAA8B,EAExD,KAAK,wBAAwB,IAAI,iCAAiC,EAElE,KAAK,uBAAuB,IAAI,gCAAgC,EAEhE,KAAK,wBAAwB,IAAI,iCAAiC,EAElE,KAAK,sBAAsB,IAAI,+BAA+B,EAE9D,KAAK,sBAAsB,IAAI,+BAA+B,EAE9D,KAAK,qBAAqB,IAAI,8BAA8B,EAE5D,KAAK,6BAA6B,IAAI,sCAAsC,EAE5E,KAAK,8BAA8B,IAAI,uCAAuC,EAE9E,KAAK,0BAA0B,IAAI,mCAAmC,EAEtE,KAAK,sBAAsB,IAAI,+BAA+B,EAC/D,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAEtD,OAAO,KAAK,EAAE,EAAE,KAAK,qBAAqB,EAAc,MAAM,OAAO,CAAC;AAGtE,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,YAAY,CAAC;AAGlD,KAAK,qBAAqB,GAAG,8BAA8B,CAAC;AAI5D,KAAK,wBAAwB,GAAG,iCAAiC,CAAC;AAIlE,KAAK,uBAAuB,GAAG,gCAAgC,CAAC;AAIhE,KAAK,wBAAwB,GAAG,eAAe,CAAC,iCAAiC,CAAC,GAAG;IAAE,kBAAkB,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAmBtH,KAAK,yBAAyB,GAAG,eAAe,CAAC,qBAAqB,CAAC,OAAO,SAAS,CAAC,GAAG,CAAC,CAAC,GAAG;IAC9F,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAkBF,KAAK,sBAAsB,GAAG,eAAe,CAAC,+BAA+B,CAAC,CAAC;AAe/E,KAAK,sBAAsB,GAAG,+BAA+B,CAAC;AAI9D,KAAK,8BAA8B,GAAG,uCAAuC,CAAC;AAI9E,KAAK,qBAAqB,GAAG,eAAe,CAAC,8BAA8B,CAAC,CAAC;AAe7E,KAAK,6BAA6B,GAAG,eAAe,CAAC,sCAAsC,CAAC,CAAC;AAe7F,KAAK,0BAA0B,GAAG,eAAe,CAAC,mCAAmC,CAAC,CAAC;AAevF,KAAK,2BAA2B,GAAG,eAAe,CAAC,+BAA+B,CAAC,CAAC;AAepF,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;CAaxB,CAAC;AAEF,YAAY,EACV,qBAAqB,EACrB,wBAAwB,EACxB,uBAAuB,EACvB,wBAAwB,EACxB,yBAAyB,EACzB,sBAAsB,EACtB,sBAAsB,EACtB,qBAAqB,EACrB,6BAA6B,EAC7B,8BAA8B,EAC9B,0BAA0B,EAC1B,2BAA2B,GAC5B,CAAC"}

package/dist/types/src/components/DropdownMenu/DropdownMenu.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"DropdownMenu.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/DropdownMenu/DropdownMenu.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,YAAY,CAAC;;;;;;;;;;;AAyFpB,wBAKE;AAEF,eAAO,MAAM,OAAO;;;;;;;CAKnB,CAAC"}

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

@@ -1,2 +0,0 @@
-export * from './DropdownMenu';
-//# sourceMappingURL=index.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/DropdownMenu/index.ts"],"names":[],"mappings":"AAIA,cAAc,gBAAgB,CAAC"}

package/dist/types/src/components/Lists/List.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../../../../src/components/Lists/List.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,EAAE,KAAK,wBAAwB,EAAE,KAAK,EAAE,EAAc,KAAK,yBAAyB,EAAE,MAAM,OAAO,CAAC;AAElH,OAAO,EAEL,KAAK,SAAS,IAAI,kBAAkB,EACpC,KAAK,eAAe,EAEpB,KAAK,oBAAoB,IAAI,6BAA6B,EAE1D,KAAK,wBAAwB,IAAI,iCAAiC,EAElE,KAAK,+BAA+B,EAEpC,KAAK,aAAa,IAAI,sBAAsB,EAC5C,KAAK,mBAAmB,EACxB,SAAS,EACT,cAAc,EACd,cAAc,EACd,kBAAkB,EACnB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,KAAK,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAGpD,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,YAAY,CAAC;AAGlD,KAAK,SAAS,GAAG,eAAe,CAAC,kBAAkB,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAE7E,QAAA,MAAM,IAAI,krJAWR,CAAC;AAEH,KAAK,mBAAmB,GAAG,eAAe,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAmCpG,KAAK,oBAAoB,GAAG,eAAe,CAAC,6BAA6B,CAAC,CAAC;AAkB3E,KAAK,wBAAwB,GAAG,eAAe,CAAC,iCAAiC,CAAC,CAAC;AA2BnF,KAAK,iBAAiB,GAAG,eAAe,CAAC,sBAAsB,CAAC,CAAC;AAkBjE,eAAO,MAAM,QAAQ,EAAE;IACrB,IAAI,EAAE,yBAAyB,CAAC,iBAAiB,CAAC,CAAC;IACnD,MAAM,EAAE,yBAAyB,CAAC,mBAAmB,CAAC,CAAC;IACvD,OAAO,EAAE,yBAAyB,CAAC,oBAAoB,CAAC,CAAC;IACzD,WAAW,EAAE,yBAAyB,CAAC,wBAAwB,CAAC,CAAC;IACjE,kBAAkB,EAAE,yBAAyB,CAAC,+BAA+B,CAAC,CAAC;IAC/E,eAAe,EAAE,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC;CAQzF,CAAC;AAEF,OAAO,EAAE,IAAI,EAAE,cAAc,EAAE,kBAAkB,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;AAE/E,YAAY,EACV,SAAS,EACT,eAAe,EACf,iBAAiB,EACjB,mBAAmB,EACnB,mBAAmB,EACnB,oBAAoB,EACpB,wBAAwB,EACxB,+BAA+B,GAChC,CAAC"}

package/dist/types/src/components/Lists/List.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"List.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Lists/List.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,YAAY,CAAC;AAMpB,OAAO,KAA4C,MAAM,OAAO,CAAC;AAIjE,OAAO,EAAkB,KAAK,SAAS,EAAwB,MAAM,QAAQ,CAAC;;;;;;;;;;;AAG9E,wBAKE;AAuBF,eAAO,MAAM,oBAAoB;;;;;CAgChC,CAAC;AA+BF,eAAO,MAAM,kBAAkB;;;;;CA8C9B,CAAC;AAEF,eAAO,MAAM,WAAW;;;;;;;;CA+BvB,CAAC"}

package/dist/types/src/components/Lists/Tree.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Tree.d.ts","sourceRoot":"","sources":["../../../../../src/components/Lists/Tree.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EAAE,KAAK,wBAAwB,EAAE,KAAK,EAAE,EAAc,KAAK,yBAAyB,EAAE,MAAM,OAAO,CAAC;AAElH,OAAO,EAIL,KAAK,+BAA+B,EACpC,KAAK,oBAAoB,EACzB,KAAK,wBAAwB,EAC7B,KAAK,iBAAiB,EACtB,KAAK,SAAS,EAGf,MAAM,QAAQ,CAAC;AAChB,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,YAAY,CAAC;AAElD,KAAK,aAAa,GAAG,SAAS,CAAC;AAE/B,KAAK,aAAa,GAAG,iBAAiB,CAAC;AAwBvC,KAAK,oBAAoB,GAAG,oBAAoB,CAAC;AAIjD,KAAK,wBAAwB,GAAG,wBAAwB,CAAC;AAMzD,KAAK,iBAAiB,GAAG,+BAA+B,CAAC;AAIzD,eAAO,MAAM,IAAI;;;CAAyC,CAAC;AAC3D,eAAO,MAAM,QAAQ,EAAE;IACrB,IAAI,EAAE,yBAAyB,CAAC,aAAa,CAAC,CAAC;IAC/C,OAAO,EAAE,yBAAyB,CAAC,oBAAoB,CAAC,CAAC;IACzD,IAAI,EAAE,yBAAyB,CAAC,iBAAiB,CAAC,CAAC;IACnD,WAAW,EAAE,yBAAyB,CAAC,wBAAwB,CAAC,CAAC;IACjE,eAAe,EAAE,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC;CAOzF,CAAC;AAEF,YAAY,EAAE,aAAa,EAAE,aAAa,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,wBAAwB,EAAE,CAAC"}

package/dist/types/src/components/Lists/Tree.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Tree.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Lists/Tree.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,YAAY,CAAC;AAOpB,KAAK,kBAAkB,GAAG;IACxB,IAAI,EAAE,GAAG,CAAC;CACX,CAAC;;;;;;;;;;;AA4CF,wBAKE;AAEF,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;CAmBnB,CAAC"}

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Lists/index.ts"],"names":[],"mappings":"AAIA,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC"}