@dxos/react-ui 0.8.4-main.b97322e → 0.8.4-main.bcb3aa67d6

package/src/components/Dialogs/Dialog.tsx

@@ -1,159 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { createContext } from '@radix-ui/react-context';
-import {
-  type DialogProps as DialogRootPrimitiveProps,
-  Root as DialogRootPrimitive,
-  DialogTrigger as DialogTriggerPrimitive,
-  type DialogTriggerProps as DialogTriggerPrimitiveProps,
-  DialogPortal as DialogPortalPrimitive,
-  type DialogPortalProps as DialogPortalPrimitiveProps,
-  DialogOverlay as DialogOverlayPrimitive,
-  type DialogOverlayProps as DialogOverlayPrimitiveProps,
-  DialogTitle as DialogTitlePrimitive,
-  type DialogTitleProps as DialogTitlePrimitiveProps,
-  DialogDescription as DialogDescriptionPrimitive,
-  type DialogDescriptionProps as DialogDescriptionPrimitiveProps,
-  DialogClose as DialogClosePrimitive,
-  type DialogCloseProps as DialogClosePrimitiveProps,
-  DialogContent as DialogContentPrimitive,
-  type DialogContentProps as DialogContentPrimitiveProps,
-} from '@radix-ui/react-dialog';
-import React, { forwardRef, type ForwardRefExoticComponent, type FunctionComponent } from 'react';
-
-import { useThemeContext } from '../../hooks';
-import { type ThemedClassName } from '../../util';
-import { ElevationProvider } from '../ElevationProvider';
-
-type DialogRootProps = DialogRootPrimitiveProps;
-
-const DialogRoot: FunctionComponent<DialogRootProps> = (props) => (
-  <ElevationProvider elevation='dialog'>
-    <DialogRootPrimitive {...props} />
-  </ElevationProvider>
-);
-
-type DialogTriggerProps = DialogTriggerPrimitiveProps;
-
-const DialogTrigger: FunctionComponent<DialogTriggerProps> = DialogTriggerPrimitive;
-
-type DialogPortalProps = DialogPortalPrimitiveProps;
-
-const DialogPortal: FunctionComponent<DialogPortalProps> = DialogPortalPrimitive;
-
-type DialogTitleProps = ThemedClassName<DialogTitlePrimitiveProps> & { srOnly?: boolean };
-
-const DialogTitle: ForwardRefExoticComponent<DialogTitleProps> = forwardRef<HTMLHeadingElement, DialogTitleProps>(
-  ({ classNames, srOnly, ...props }, forwardedRef) => {
-    const { tx } = useThemeContext();
-    return (
-      <DialogTitlePrimitive
-        {...props}
-        className={tx('dialog.title', 'dialog__title', { srOnly }, classNames)}
-        ref={forwardedRef}
-      />
-    );
-  },
-);
-
-type DialogDescriptionProps = ThemedClassName<DialogDescriptionPrimitiveProps> & { srOnly?: boolean };
-
-const DialogDescription: ForwardRefExoticComponent<DialogTitleProps> = forwardRef<
-  HTMLParagraphElement,
-  DialogDescriptionProps
->(({ classNames, srOnly, ...props }, forwardedRef) => {
-  const { tx } = useThemeContext();
-  return (
-    <DialogDescriptionPrimitive
-      {...props}
-      className={tx('dialog.description', 'dialog__description', { srOnly }, classNames)}
-      ref={forwardedRef}
-    />
-  );
-});
-
-type DialogCloseProps = DialogClosePrimitiveProps;
-
-const DialogClose: FunctionComponent<DialogCloseProps> = DialogClosePrimitive;
-
-type OverlayLayoutContextValue = { inOverlayLayout?: boolean };
-const DIALOG_OVERLAY_NAME = 'DialogOverlay';
-const DIALOG_CONTENT_NAME = 'DialogContent';
-const [OverlayLayoutProvider, useOverlayLayoutContext] = createContext<OverlayLayoutContextValue>(
-  DIALOG_OVERLAY_NAME,
-  {},
-);
-
-type DialogOverlayProps = ThemedClassName<DialogOverlayPrimitiveProps & { blockAlign?: 'center' | 'start' | 'end' }>;
-
-const DialogOverlay: ForwardRefExoticComponent<DialogOverlayProps> = forwardRef<HTMLDivElement, DialogOverlayProps>(
-  ({ classNames, children, blockAlign, ...props }, forwardedRef) => {
-    const { tx } = useThemeContext();
-
-    return (
-      <DialogOverlayPrimitive
-        {...props}
-        className={tx('dialog.overlay', 'dialog__overlay', {}, classNames)}
-        ref={forwardedRef}
-        data-block-align={blockAlign}
-      >
-        <OverlayLayoutProvider inOverlayLayout>{children}</OverlayLayoutProvider>
-      </DialogOverlayPrimitive>
-    );
-  },
-);
-
-DialogOverlay.displayName = DIALOG_OVERLAY_NAME;
-
-type DialogContentProps = ThemedClassName<DialogContentPrimitiveProps> & { inOverlayLayout?: boolean };
-
-const DialogContent: ForwardRefExoticComponent<DialogContentProps> = forwardRef<HTMLDivElement, DialogContentProps>(
-  ({ classNames, children, inOverlayLayout: propsInOverlayLayout, ...props }, forwardedRef) => {
-    const { tx } = useThemeContext();
-    const { inOverlayLayout } = useOverlayLayoutContext(DIALOG_CONTENT_NAME);
-
-    return (
-      <DialogContentPrimitive
-        // NOTE: Radix warning unless set to undefined.
-        // https://www.radix-ui.com/primitives/docs/components/dialog#description
-        aria-describedby={undefined}
-        {...props}
-        className={tx(
-          'dialog.content',
-          'dialog',
-          { inOverlayLayout: propsInOverlayLayout || inOverlayLayout },
-          classNames,
-        )}
-        ref={forwardedRef}
-      >
-        {children}
-      </DialogContentPrimitive>
-    );
-  },
-);
-
-DialogContent.displayName = DIALOG_CONTENT_NAME;
-
-export const Dialog = {
-  Root: DialogRoot,
-  Trigger: DialogTrigger,
-  Portal: DialogPortal,
-  Overlay: DialogOverlay,
-  Content: DialogContent,
-  Title: DialogTitle,
-  Description: DialogDescription,
-  Close: DialogClose,
-};
-
-export type {
-  DialogRootProps,
-  DialogTriggerProps,
-  DialogPortalProps,
-  DialogOverlayProps,
-  DialogContentProps,
-  DialogTitleProps,
-  DialogDescriptionProps,
-  DialogCloseProps,
-};

package/src/components/Lists/Treegrid.tsx

@@ -1,152 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { useArrowNavigationGroup, useFocusableGroup } from '@fluentui/react-tabster';
-import { createContextScope, type Scope } from '@radix-ui/react-context';
-import { Primitive } from '@radix-ui/react-primitive';
-import { Slot } from '@radix-ui/react-slot';
-import { useControllableState } from '@radix-ui/react-use-controllable-state';
-import React, { type ComponentPropsWithRef, type CSSProperties, forwardRef } from 'react';
-
-import { useThemeContext } from '../../hooks';
-import { type ThemedClassName } from '../../util';
-
-// TODO(thure): A lot of the accessible affordances for this kind of thing need to be implemented per https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/treegrid_role
-
-const TREEGRID_ROW_NAME = 'TreegridRow';
-
-type TreegridRowScopedProps<P> = P & { __treegridRowScope?: Scope };
-
-const [createTreegridRowContext, createTreegridRowScope] = createContextScope(TREEGRID_ROW_NAME, []);
-
-type TreegridRowContextValue = {
-  open?: boolean;
-  onOpenChange?: (nextOpen: boolean) => void;
-};
-
-const [TreegridRowProvider, useTreegridRowContext] =
-  createTreegridRowContext<TreegridRowContextValue>(TREEGRID_ROW_NAME);
-
-const PATH_SEPARATOR = '~';
-const PARENT_OF_SEPARATOR = ' ';
-
-type TreegridRootProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.div>> & {
-  gridTemplateColumns: CSSProperties['gridTemplateColumns'];
-  asChild?: boolean;
-};
-
-const TreegridRoot = forwardRef<HTMLDivElement, TreegridRootProps>(
-  ({ asChild, classNames, children, style, gridTemplateColumns, ...props }, forwardedRef) => {
-    const { tx } = useThemeContext();
-    const Root = asChild ? Slot : Primitive.div;
-    const arrowNavigationAttrs = useArrowNavigationGroup({ axis: 'vertical', tabbable: false, circular: true });
-
-    return (
-      <Root
-        role='treegrid'
-        {...arrowNavigationAttrs}
-        {...props}
-        className={tx('treegrid.root', 'treegrid', {}, classNames)}
-        style={{ ...style, gridTemplateColumns }}
-        ref={forwardedRef}
-      >
-        {children}
-      </Root>
-    );
-  },
-);
-
-type TreegridRowProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.div>> & {
-  id: string;
-  asChild?: boolean;
-  parentOf?: string;
-  defaultOpen?: boolean;
-  open?: boolean;
-  onOpenChange?(open: boolean): void;
-};
-
-const TreegridRow = forwardRef<HTMLDivElement, TreegridRowScopedProps<TreegridRowProps>>(
-  (
-    {
-      __treegridRowScope,
-      asChild,
-      classNames,
-      children,
-      id,
-      parentOf,
-      open: propsOpen,
-      defaultOpen,
-      onOpenChange: propsOnOpenChange,
-      ...props
-    },
-    forwardedRef,
-  ) => {
-    const { tx } = useThemeContext();
-    const Root = asChild ? Slot : Primitive.div;
-    const pathParts = id.split(PATH_SEPARATOR);
-    const level = pathParts.length - 1;
-    const [open, onOpenChange] = useControllableState({
-      prop: propsOpen,
-      onChange: propsOnOpenChange,
-      defaultProp: defaultOpen,
-    });
-    const focusableGroupAttrs = useFocusableGroup({ tabBehavior: 'limited' });
-    const arrowGroupAttrs = useArrowNavigationGroup({
-      axis: 'horizontal',
-      tabbable: false,
-      circular: false,
-      memorizeCurrent: false,
-    });
-
-    return (
-      <TreegridRowProvider open={open} onOpenChange={onOpenChange} scope={__treegridRowScope}>
-        <Root
-          role='row'
-          aria-level={level}
-          className={tx('treegrid.row', 'treegrid__row', { level }, classNames)}
-          {...(parentOf && { 'aria-expanded': open, 'aria-owns': parentOf })}
-          tabIndex={0}
-          {...focusableGroupAttrs}
-          {...props}
-          id={id}
-          ref={forwardedRef}
-        >
-          <div role='none' className='contents' {...arrowGroupAttrs}>
-            {children}
-          </div>
-        </Root>
-      </TreegridRowProvider>
-    );
-  },
-);
-
-type TreegridCellProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.div>> & { indent?: boolean };
-
-const TreegridCell = forwardRef<HTMLDivElement, TreegridCellProps>(
-  ({ classNames, children, indent, ...props }, forwardedRef) => {
-    const { tx } = useThemeContext();
-    return (
-      <div
-        role='gridcell'
-        className={tx('treegrid.cell', 'treegrid__cell', { indent }, classNames)}
-        {...props}
-        ref={forwardedRef}
-      >
-        {children}
-      </div>
-    );
-  },
-);
-
-export type { TreegridRootProps, TreegridRowProps };
-
-export const Treegrid = {
-  Root: TreegridRoot,
-  Row: TreegridRow,
-  Cell: TreegridCell,
-  PARENT_OF_SEPARATOR,
-  PATH_SEPARATOR,
-  createTreegridRowScope,
-  useTreegridRowContext,
-};

package/src/testing/decorators/withSurfaceVariantsLayout.tsx

@@ -1,51 +0,0 @@
-//
-// 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('rounded-md border border-separator p-2', 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 gap-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/src/testing/decorators/withTheme.ts

@@ -1,25 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { type Decorator, type StoryContext, type StoryFn } from '@storybook/react';
-import { useEffect, createElement } from 'react';
-
-import { defaultTx } from '@dxos/react-ui-theme';
-
-import { ThemeProvider } from '../../components';
-
-export const withTheme: Decorator = (Story: StoryFn, context: StoryContext) => {
-  const theme = context?.parameters?.theme || context?.globals?.theme;
-  useEffect(() => {
-    document.documentElement.classList[theme === 'dark' ? 'add' : 'remove']('dark');
-  }, [theme]);
-
-  return createElement(
-    ThemeProvider,
-    {
-      tx: defaultTx,
-    },
-    createElement(Story),
-  );
-};

package/src/util/ThemedClassName.ts

@@ -1,7 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { type ClassNameValue } from '@dxos/react-ui-types';
-
-export type ThemedClassName<P = {}> = Omit<P, 'className'> & { classNames?: ClassNameValue };