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

package/src/components/Menus/DropdownMenu.tsx

@@ -28,7 +28,7 @@ import React, {
   type RefObject,
 } from 'react';
 
-import { useThemeContext } from '../../hooks';
+import { useElevationContext, useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
 
 type Direction = 'ltr' | 'rtl';
@@ -235,6 +235,7 @@ const DropdownMenuContent = forwardRef<DropdownMenuContentElement, DropdownMenuC
     const { __scopeDropdownMenu, classNames, ...contentProps } = props;
     const { tx } = useThemeContext();
     const context = useDropdownMenuContext(CONTENT_NAME, __scopeDropdownMenu);
+    const elevation = useElevationContext();
     const menuScope = useMenuScope(__scopeDropdownMenu);
     const hasInteractedOutsideRef = useRef(false);
 
@@ -261,7 +262,7 @@ const DropdownMenuContent = forwardRef<DropdownMenuContentElement, DropdownMenuC
             hasInteractedOutsideRef.current = true;
           }
         })}
-        className={tx('menu.content', 'menu', {}, classNames)}
+        className={tx('menu.content', 'menu', { elevation }, classNames)}
         style={{
           ...props.style,
           // re-namespace exposed content custom properties

package/src/components/Popover/Popover.tsx

@@ -36,7 +36,7 @@ import React, {
 } from 'react';
 import { RemoveScroll } from 'react-remove-scroll';
 
-import { useThemeContext } from '../../hooks';
+import { useElevationContext, useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
 
 /* -------------------------------------------------------------------------------------------------
@@ -258,6 +258,7 @@ const PopoverContent = forwardRef<PopoverContentTypeElement, PopoverContentProps
     const portalContext = usePortalContext(CONTENT_NAME, props.__scopePopover);
     const { forceMount = portalContext.forceMount, ...contentProps } = props;
     const context = usePopoverContext(CONTENT_NAME, props.__scopePopover);
+
     return (
       <Presence present={forceMount || context.open}>
         {context.modal ? (
@@ -433,6 +434,7 @@ const PopoverContentImpl = forwardRef<PopoverContentImplElement, PopoverContentI
     const context = usePopoverContext(CONTENT_NAME, __scopePopover);
     const popperScope = usePopperScope(__scopePopover);
     const { tx } = useThemeContext();
+    const elevation = useElevationContext();
 
     // Make sure the whole tree has focus guards as our `Popover` may be
     // the last element in the DOM (because of the `Portal`)
@@ -461,7 +463,7 @@ const PopoverContentImpl = forwardRef<PopoverContentImplElement, PopoverContentI
             id={context.contentId}
             {...popperScope}
             {...contentProps}
-            className={tx('popover.content', 'popover', {}, classNames)}
+            className={tx('popover.content', 'popover', { elevation }, classNames)}
             ref={forwardedRef}
             style={{
               ...contentProps.style,

package/src/components/ScrollArea/ScrollArea.stories.tsx

@@ -7,7 +7,7 @@ import '@dxos-theme';
 import React, { type PropsWithChildren } from 'react';
 
 import { faker } from '@dxos/random';
-import { groupSurface, surfaceElevation } from '@dxos/react-ui-theme';
+import { groupSurface, surfaceShadow } from '@dxos/react-ui-theme';
 
 import { ScrollArea } from './ScrollArea';
 import { withTheme } from '../../testing';
@@ -17,7 +17,7 @@ faker.seed(1234);
 const StorybookScrollArea = ({ children }: PropsWithChildren<{}>) => {
   return (
     <ScrollArea.Root
-      classNames={['is-[300px] bs-[400px] rounded', groupSurface, surfaceElevation({ elevation: 'group' })]}
+      classNames={['is-[300px] bs-[400px] rounded', groupSurface, surfaceShadow({ elevation: 'positioned' })]}
     >
       <ScrollArea.Viewport classNames='rounded p-4'>
         <p>{children}</p>

package/src/components/Select/Select.tsx

@@ -6,7 +6,7 @@ import { CaretDown, CaretUp } from '@phosphor-icons/react';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import React, { forwardRef } from 'react';
 
-import { useThemeContext } from '../../hooks';
+import { useElevationContext, useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
 import { Button, type ButtonProps } from '../Buttons';
 import { Icon } from '../Icon';
@@ -55,10 +55,11 @@ type SelectContentProps = ThemedClassName<SelectPrimitive.SelectContentProps>;
 const SelectContent = forwardRef<HTMLDivElement, SelectContentProps>(
   ({ classNames, children, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
+    const elevation = useElevationContext();
     return (
       <SelectPrimitive.Content
         {...props}
-        className={tx('select.content', 'select__content', {}, classNames)}
+        className={tx('select.content', 'select__content', { elevation }, classNames)}
         position='popper'
         ref={forwardedRef}
       >

package/src/components/ThemeProvider/ThemeProvider.tsx

@@ -41,7 +41,6 @@ export const ThemeProvider = ({
   tx = (_path, defaultClassName, _styleProps, ..._options) => defaultClassName,
   themeMode = 'dark',
   rootDensity = 'fine',
-  rootElevation = 'base',
   ...rest
 }: ThemeProviderProps) => {
   useEffect(() => {
@@ -61,7 +60,7 @@ export const ThemeProvider = ({
           appNs,
         }}
       >
-        <ElevationProvider elevation={rootElevation}>
+        <ElevationProvider elevation='base'>
           <DensityProvider density={rootDensity}>{children}</DensityProvider>
         </ElevationProvider>
       </TranslationsProvider>

package/src/components/Toast/Toast.tsx

@@ -45,7 +45,7 @@ const ToastRoot = forwardRef<HTMLLIElement, ToastRootProps>(({ classNames, child
   const { tx } = useThemeContext();
   return (
     <ToastRootPrimitive {...props} className={tx('toast.root', 'toast', {}, classNames)} ref={forwardedRef}>
-      <ElevationProvider elevation='chrome'>{children}</ElevationProvider>
+      <ElevationProvider elevation='toast'>{children}</ElevationProvider>
     </ToastRootPrimitive>
   );
 });

package/src/components/Tooltip/Tooltip.tsx

@@ -18,7 +18,7 @@ import {
 } from '@radix-ui/react-tooltip';
 import React, { forwardRef, type FunctionComponent } from 'react';
 
-import { useThemeContext } from '../../hooks';
+import { useElevationContext, useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
 
 type TooltipProviderProps = TooltipProviderPrimitiveProps;
@@ -54,12 +54,13 @@ type TooltipContentProps = ThemedClassName<TooltipContentPrimitiveProps>;
 
 const TooltipContent = forwardRef<HTMLDivElement, TooltipContentProps>(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
+  const elevation = useElevationContext();
   return (
     <TooltipContentPrimitive
       sideOffset={4}
       collisionPadding={8}
       {...props}
-      className={tx('tooltip.content', 'tooltip', {}, classNames)}
+      className={tx('tooltip.content', 'tooltip', { elevation }, classNames)}
       ref={forwardedRef}
     />
   );

package/src/testing/decorators/withVariants.tsx

@@ -7,7 +7,7 @@ import '@dxos-theme';
 import { type Decorator } from '@storybook/react';
 import React from 'react';
 
-import { modalSurface, groupSurface, mx, surfaceElevation } from '@dxos/react-ui-theme';
+import { modalSurface, groupSurface, mx, surfaceShadow } from '@dxos/react-ui-theme';
 import { type Density, type Elevation } from '@dxos/react-ui-types';
 
 import { DensityProvider, ElevationProvider } from '../../components';
@@ -20,8 +20,8 @@ type Config = {
 export const withVariants = ({
   elevations = [
     { elevation: 'base' },
-    { elevation: 'group', surface: groupSurface },
-    { elevation: 'chrome', surface: modalSurface },
+    { elevation: 'positioned', surface: groupSurface },
+    { elevation: 'dialog', surface: modalSurface },
   ],
   densities = ['coarse', 'fine'],
 }: Config = {}): Decorator => {
@@ -32,7 +32,7 @@ export const withVariants = ({
           <div className='flex flex-col gap-8'>
             {densities.map((density) => (
               <DensityProvider key={density} density={density}>
-                <div className={mx('p-4 rounded-lg', surface, surfaceElevation({ elevation }))}>
+                <div className={mx('p-4 rounded-lg', surface, surfaceShadow({ elevation }))}>
                   <Story />
                 </div>
               </DensityProvider>

package/dist/types/src/playground/Surfaces.stories.d.ts

@@ -1,21 +0,0 @@
-import '@dxos-theme';
-import React, { type PropsWithChildren } from 'react';
-type SurfaceLevel = 'base' | 'group' | 'chrome' | 'fixed' | 'input' | 'accent';
-declare const _default: {
-    title: string;
-    component: ({ children, level }: PropsWithChildren & {
-        level: SurfaceLevel;
-    }) => React.JSX.Element;
-    render: () => React.JSX.Element;
-    decorators: import("@storybook/react/*").Decorator[];
-    parameters: {
-        chromatic: {
-            disableSnapshot: boolean;
-        };
-    };
-};
-export default _default;
-export declare const Default: {
-    args: {};
-};
-//# sourceMappingURL=Surfaces.stories.d.ts.map

package/dist/types/src/playground/Surfaces.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Surfaces.stories.d.ts","sourceRoot":"","sources":["../../../../src/playground/Surfaces.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAgBtD,KAAK,YAAY,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ,CAAC;;;qCAEzC,iBAAiB,GAAG;QAAE,KAAK,EAAE,YAAY,CAAA;KAAE;;;;;;;;;AAsCjF,wBAME;AAEF,eAAO,MAAM,OAAO;;CAEnB,CAAC"}

package/src/playground/Surfaces.stories.tsx

@@ -1,73 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import '@dxos-theme';
-
-import React, { type PropsWithChildren } from 'react';
-
-import {
-  baseSurface,
-  modalSurface,
-  groupSurface,
-  mx,
-  surfaceElevation,
-  fixedSurface,
-  fixedBorder,
-  attentionSurface,
-  accentSurface,
-} from '@dxos/react-ui-theme';
-
-import { withTheme } from '../testing';
-
-type SurfaceLevel = 'base' | 'group' | 'chrome' | 'fixed' | 'input' | 'accent';
-
-const Surface = ({ children, level }: PropsWithChildren & { level: SurfaceLevel }) => {
-  const surface =
-    level === 'chrome'
-      ? [modalSurface, surfaceElevation({ elevation: 'chrome' })]
-      : level === 'group'
-        ? [groupSurface, surfaceElevation({ elevation: 'group' })]
-        : level === 'input'
-          ? [attentionSurface, surfaceElevation({ elevation: 'group' })]
-          : level === 'fixed'
-            ? [fixedSurface, fixedBorder, 'border', surfaceElevation({ elevation: 'chrome' })]
-            : level === 'accent'
-              ? [accentSurface, surfaceElevation({ elevation: 'chrome' })]
-              : [baseSurface];
-
-  return (
-    <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>
-  );
-};
-
-const SurfaceStory = () => {
-  return (
-    <div className='bg-cubes p-10 m-0'>
-      <Surface level='fixed' />
-      <Surface level='base' />
-      <Surface level='group' />
-      <Surface level='chrome' />
-      <Surface level='input' />
-      <Surface level='accent' />
-    </div>
-  );
-};
-
-export default {
-  title: 'ui/react-ui-core/Playground/Surfaces',
-  component: Surface,
-  render: SurfaceStory,
-  decorators: [withTheme],
-  parameters: { chromatic: { disableSnapshot: false } },
-};
-
-export const Default = {
-  args: {},
-};