@dxos/react-ui 0.8.2-main.30e4dbb → 0.8.2-main.4c6cf53

package/src/components/Tooltip/Tooltip.tsx

@@ -251,7 +251,6 @@ type TooltipTriggerProps = PrimitiveButtonProps &
   Pick<TooltipProps, 'delayDuration'> & {
     content?: string;
     side?: TooltipSide;
-    suppressNextTooltip?: MutableRefObject<boolean>;
     onInteract?: (event: SyntheticEvent) => void;
   };
 
@@ -262,7 +261,6 @@ const TooltipTrigger = forwardRef<TooltipTriggerElement, TooltipTriggerProps>(
       onInteract,
       // TODO(thure): Pass `delayDuration` into the context.
       delayDuration: _delayDuration,
-      suppressNextTooltip,
       side,
       content,
       ...triggerProps
@@ -313,20 +311,7 @@ const TooltipTrigger = forwardRef<TooltipTriggerElement, TooltipTriggerProps>(
           isPointerDownRef.current = true;
           document.addEventListener('pointerup', handlePointerUp, { once: true });
         })}
-        onFocus={composeEventHandlers(props.onFocus, (event) => {
-          if (!isPointerDownRef.current) {
-            onInteract?.(event);
-            if (event.defaultPrevented) {
-              return;
-            }
-            if (suppressNextTooltip?.current) {
-              suppressNextTooltip.current = false;
-            } else {
-              context.onTriggerChange(ref.current);
-              context.onOpen();
-            }
-          }
-        })}
+        onFocus={props.onFocus}
         onBlur={composeEventHandlers(props.onBlur, context.onClose)}
         onClick={composeEventHandlers(props.onClick, context.onClose)}
       />

package/src/playground/Controls.stories.tsx

@@ -8,7 +8,7 @@ import { FileTs, FileJs, ArrowClockwise, Bug, TextUnderline, TextB, TextItalic }
 import React, { useState } from 'react';
 
 import { Input, Select, Toggle, Toolbar } from '../components';
-import { withTheme, withVariants } from '../testing';
+import { withTheme, withSurfaceVariantsLayout } from '../testing';
 
 const DefaultStory = () => {
   const [checked, setChecked] = useState<boolean>(false);
@@ -84,7 +84,7 @@ const DefaultStory = () => {
 export default {
   title: 'ui/react-ui-core/Playground/Controls',
   render: DefaultStory,
-  decorators: [withVariants(), withTheme],
+  decorators: [withSurfaceVariantsLayout(), withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };
 

package/src/playground/Typography.stories.tsx

@@ -8,7 +8,7 @@ import React from 'react';
 
 import { withTheme } from '../testing';
 
-const TypographyStory = () => {
+const DefaultStory = () => {
   return (
     <div className='mli-auto p-8 max-is-[60rem] space-b-4'>
       <h1 className='text-4xl font-medium'>
@@ -45,7 +45,7 @@ const TypographyStory = () => {
 
 export default {
   title: 'ui/react-ui-core/Playground/Typography',
-  render: TypographyStory,
+  render: DefaultStory,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };

package/src/testing/decorators/index.ts

@@ -3,4 +3,4 @@
 //
 
 export * from './withTheme';
-export * from './withVariants';
+export * from './withSurfaceVariantsLayout';

package/src/testing/decorators/withSurfaceVariantsLayout.tsx

@@ -0,0 +1,53 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Decorator } from '@storybook/react';
+import React, { type ComponentType, type PropsWithChildren } from 'react';
+
+import { mx, surfaceShadow } from '@dxos/react-ui-theme';
+import { type Density, type Elevation } from '@dxos/react-ui-types';
+
+type Config = {
+  elevations?: { elevation: Elevation; surface?: string }[];
+  densities?: Density[];
+};
+
+const Container = ({ children, elevation, surface }: PropsWithChildren<{ elevation: Elevation; surface?: string }>) => (
+  <div className={mx('p-4 mlb-4 rounded-md border border-separator', surface, surfaceShadow({ elevation }))}>
+    {children}
+  </div>
+);
+
+const Panel = ({
+  Story,
+  elevations,
+  densities,
+  className,
+}: { Story: ComponentType } & Config & { className?: string }) => (
+  <div className={mx('flex flex-col h-full p-4', className)}>
+    {elevations?.map(({ elevation, surface }) =>
+      densities?.map((density) => (
+        <Container key={`${elevation}--${density}`} surface={surface} elevation={elevation}>
+          <Story />
+        </Container>
+      )),
+    )}
+  </div>
+);
+
+export const withSurfaceVariantsLayout = ({
+  elevations = [
+    { elevation: 'base', surface: 'bg-baseSurface' },
+    { elevation: 'positioned', surface: 'bg-cardSurface' },
+    { elevation: 'dialog', surface: 'bg-modalSurface' },
+  ],
+  densities = ['coarse'],
+}: Config = {}): Decorator => {
+  return (Story) => (
+    <div className='fixed inset-0 grid grid-cols-2 overflow-y-auto'>
+      <Panel Story={Story} className='light' elevations={elevations} densities={densities} />
+      <Panel Story={Story} className='dark' elevations={elevations} densities={densities} />
+    </div>
+  );
+};

package/dist/types/src/testing/decorators/withVariants.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"withVariants.d.ts","sourceRoot":"","sources":["../../../../../src/testing/decorators/withVariants.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAIlD,OAAO,EAAE,KAAK,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAIpE,KAAK,MAAM,GAAG;IACZ,UAAU,CAAC,EAAE;QAAE,SAAS,EAAE,SAAS,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC1D,SAAS,CAAC,EAAE,OAAO,EAAE,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,6BAO1B,MAAW,KAAG,SAkBhB,CAAC"}

package/src/testing/decorators/withVariants.tsx

@@ -1,45 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import '@dxos-theme';
-
-import { type Decorator } from '@storybook/react';
-import React from 'react';
-
-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';
-
-type Config = {
-  elevations?: { elevation: Elevation; surface?: string }[];
-  densities?: Density[];
-};
-
-export const withVariants = ({
-  elevations = [
-    { elevation: 'base' },
-    { elevation: 'positioned', surface: groupSurface },
-    { elevation: 'dialog', surface: modalSurface },
-  ],
-  densities = ['coarse', 'fine'],
-}: Config = {}): Decorator => {
-  return (Story) => (
-    <div className='flex flex-col gap-8'>
-      {elevations.map(({ elevation, surface }) => (
-        <ElevationProvider key={elevation} elevation={elevation}>
-          <div className='flex flex-col gap-8'>
-            {densities.map((density) => (
-              <DensityProvider key={density} density={density}>
-                <div className={mx('p-4 rounded-lg', surface, surfaceShadow({ elevation }))}>
-                  <Story />
-                </div>
-              </DensityProvider>
-            ))}
-          </div>
-        </ElevationProvider>
-      ))}
-    </div>
-  );
-};