@dxos/react-ui 0.3.5-next.63b0922 → 0.3.5-next.d8a95f3

package/src/components/DropdownMenu/DropdownMenu.tsx

@@ -16,6 +16,10 @@ import {
   type DropdownMenuGroupProps as DropdownMenuGroupPrimitiveProps,
   DropdownMenuItem as DropdownMenuItemPrimitive,
   type DropdownMenuItemProps as DropdownMenuItemPrimitiveProps,
+  DropdownMenuCheckboxItem as DropdownMenuCheckboxItemPrimitive,
+  type DropdownMenuCheckboxItemProps as DropdownMenuCheckboxItemPrimitiveProps,
+  DropdownMenuItemIndicator as DropdownMenuItemIndicatorPrimitive,
+  type DropdownMenuItemIndicatorProps as DropdownMenuItemIndicatorPrimitiveProps,
   DropdownMenuSeparator as DropdownMenuSeparatorPrimitive,
   type DropdownMenuSeparatorProps as DropdownMenuSeparatorPrimitiveProps,
   DropdownMenuLabel as DropdownMenuLabelPrimitive,
@@ -99,6 +103,10 @@ type DropdownMenuGroupProps = DropdownMenuGroupPrimitiveProps;
 
 const DropdownMenuGroup = DropdownMenuGroupPrimitive;
 
+type DropdownMenuItemIndicatorProps = DropdownMenuItemIndicatorPrimitiveProps;
+
+const DropdownMenuItemIndicator = DropdownMenuItemIndicatorPrimitive;
+
 type DropdownMenuItemProps = ThemedClassName<DropdownMenuItemPrimitiveProps>;
 
 const DropdownMenuItem = forwardRef<HTMLDivElement, DropdownMenuItemProps>(
@@ -114,6 +122,21 @@ const DropdownMenuItem = forwardRef<HTMLDivElement, DropdownMenuItemProps>(
   },
 );
 
+type DropdownMenuCheckboxItemProps = ThemedClassName<DropdownMenuCheckboxItemPrimitiveProps>;
+
+const DropdownMenuCheckboxItem = forwardRef<HTMLDivElement, DropdownMenuCheckboxItemProps>(
+  ({ classNames, ...props }: DropdownMenuItemProps, forwardedRef) => {
+    const { tx } = useThemeContext();
+    return (
+      <DropdownMenuCheckboxItemPrimitive
+        {...props}
+        className={tx('dropdownMenu.item', 'dropdown-menu__item--checkbox', {}, classNames)}
+        ref={forwardedRef}
+      />
+    );
+  },
+);
+
 type DropdownMenuSeparatorProps = ThemedClassName<DropdownMenuSeparatorPrimitiveProps>;
 
 const DropdownMenuSeparator = forwardRef<HTMLDivElement, DropdownMenuSeparatorProps>(
@@ -153,6 +176,8 @@ export const DropdownMenu = {
   Arrow: DropdownMenuArrow,
   Group: DropdownMenuGroup,
   Item: DropdownMenuItem,
+  CheckboxItem: DropdownMenuCheckboxItem,
+  ItemIndicator: DropdownMenuItemIndicator,
   Separator: DropdownMenuSeparator,
   GroupLabel: DropdownMenuGroupLabel,
 };
@@ -166,6 +191,8 @@ export type {
   DropdownMenuArrowProps,
   DropdownMenuGroupProps,
   DropdownMenuItemProps,
+  DropdownMenuCheckboxItemProps,
+  DropdownMenuItemIndicatorProps,
   DropdownMenuSeparatorProps,
   DropdownMenuGroupLabelProps,
 };

package/src/components/Main/Main.tsx

@@ -152,6 +152,7 @@ const MainSidebar = forwardRef<HTMLDivElement, MainSidebarProps>(
             { isLg, [side === 'inline-end' ? 'inlineEndSidebarOpen' : 'inlineStartSidebarOpen']: open, side },
             classNames,
           )}
+          {...(!open && { inert: 'true' })}
           ref={ref}
         >
           <ElevationProvider elevation='group'>{children}</ElevationProvider>

package/src/playground/Surfaces.stories.tsx

@@ -6,18 +6,37 @@ import '@dxosTheme';
 
 import React, { type PropsWithChildren } from 'react';
 
-import { baseSurface, chromeSurface, groupSurface, mx, surfaceElevation } from '@dxos/react-ui-theme';
+import {
+  baseSurface,
+  chromeSurface,
+  groupSurface,
+  mx,
+  surfaceElevation,
+  fixedSurface,
+  fixedBorder,
+  inputSurface,
+} from '@dxos/react-ui-theme';
 
-const Surface = ({ children, level }: PropsWithChildren & { level: 'base' | 'group' | 'chrome' }) => {
+const Surface = ({
+  children,
+  level,
+}: PropsWithChildren & { level: 'base' | 'group' | 'chrome' | 'fixed' | 'input' }) => {
   const surface =
     level === 'chrome'
       ? [chromeSurface, surfaceElevation({ elevation: 'chrome' })]
       : level === 'group'
       ? [groupSurface, surfaceElevation({ elevation: 'group' })]
+      : level === 'input'
+      ? [inputSurface, surfaceElevation({ elevation: 'group' })]
+      : level === 'fixed'
+      ? [fixedSurface, fixedBorder, 'border', surfaceElevation({ elevation: 'chrome' })]
       : [baseSurface];
 
   return (
-    <div role='region' className={mx('flex m-8 p-2 w-[320px] h-[160px] rounded-lg', ...surface)}>
+    <div
+      role='region'
+      className={mx('flex justify-center items-center m-8 p-2 w-[320px] h-[160px] rounded-lg', ...surface)}
+    >
       <div>{level}</div>
       {children}
     </div>
@@ -26,11 +45,13 @@ const Surface = ({ children, level }: PropsWithChildren & { level: 'base' | 'gro
 
 const SurfacesStory = () => {
   return (
-    <>
+    <div className='bg-cubes p-10 m-0'>
+      <Surface level='fixed' />
       <Surface level='base' />
       <Surface level='group' />
       <Surface level='chrome' />
-    </>
+      <Surface level='input' />
+    </div>
   );
 };