@dxos/react-ui 0.6.4 → 0.6.5-staging.435ed25

package/src/components/Lists/Treegrid.stories.tsx

@@ -0,0 +1,152 @@
+//
+// Copyright 2024 DXOS.org
+//
+import React from 'react';
+
+import { faker } from '@dxos/random';
+
+import { Treegrid as Tg } from './Treegrid';
+import { withTheme } from '../../testing';
+
+faker.seed(1234);
+
+type StorybookNode = {
+  id: string;
+  title: string;
+  icon?: string;
+  nodes?: StorybookNode[];
+};
+
+type StorybookIteratorNode = {
+  node: StorybookNode;
+  path: string[];
+  parentOf?: string[];
+};
+
+const content = {
+  id: 'root',
+  title: 'Root',
+  nodes: [
+    {
+      id: faker.string.uuid(),
+      title: 'Personal Space',
+      icon: 'ph--house--regular',
+      nodes: [
+        {
+          id: faker.string.uuid(),
+          title: faker.commerce.productName(),
+        },
+        {
+          id: faker.string.uuid(),
+          title: faker.commerce.productName(),
+        },
+        {
+          id: faker.string.uuid(),
+          title: faker.commerce.productName(),
+          nodes: [
+            {
+              id: faker.string.uuid(),
+              title: faker.commerce.productName(),
+              nodes: [
+                {
+                  id: faker.string.uuid(),
+                  title: faker.commerce.productName(),
+                },
+                {
+                  id: faker.string.uuid(),
+                  title: faker.commerce.productName(),
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    },
+    {
+      id: faker.string.uuid(),
+      title: faker.commerce.productName(),
+      icon: 'ph--planet--regular',
+      nodes: [
+        {
+          id: faker.string.uuid(),
+          title: faker.commerce.productName(),
+        },
+      ],
+    },
+    {
+      id: faker.string.uuid(),
+      title: faker.commerce.productName(),
+      icon: 'ph--sailboat--regular',
+    },
+    {
+      id: faker.string.uuid(),
+      title: faker.commerce.productName(),
+      icon: 'ph--planet--regular',
+    },
+  ],
+} satisfies StorybookNode;
+
+function* visitor(node: StorybookNode, isOpen?: (node: StorybookNode) => boolean): Generator<StorybookIteratorNode> {
+  const stack: StorybookIteratorNode[] = [
+    {
+      node,
+      path: [node.id],
+      parentOf: (node.nodes ?? []).map(({ id }) => id),
+    },
+  ];
+  while (stack.length > 0) {
+    const { node, path, parentOf } = stack.pop()!;
+    if (path.length > 1) {
+      yield { node, path, parentOf };
+    }
+
+    const children = Array.from(node.nodes ?? []);
+    if (path.length === 1 || isOpen?.(node)) {
+      for (let i = children.length - 1; i >= 0; i--) {
+        const child = children[i];
+        stack.push({
+          node: child,
+          path: [...path, child.id],
+          ...((child.nodes?.length ?? 0) > 0 && {
+            parentOf: child.nodes!.map(({ id }) => id),
+          }),
+        });
+      }
+    }
+  }
+}
+
+const flattenedContent = Array.from(visitor(content, () => true));
+
+const StorybookTreegrid = () => {
+  return (
+    <Tg.Root gridTemplateColumns='1fr'>
+      {flattenedContent.map(({ node, parentOf, path }) => {
+        return (
+          <Tg.Row
+            key={node.id}
+            id={path.join(Tg.PATH_SEPARATOR)}
+            {...(parentOf && { parentOf: parentOf.join(Tg.PARENT_OF_SEPARATOR) })}
+          >
+            <Tg.Cell indent classNames='flex items-center'>
+              {node.icon && (
+                <svg className='is-[1em] bs-[1em] mlb-1'>
+                  <use href={`/icons.svg#${node.icon}`} />
+                </svg>
+              )}
+              {node.title}
+            </Tg.Cell>
+          </Tg.Row>
+        );
+      })}
+    </Tg.Root>
+  );
+};
+
+export default {
+  title: 'react-ui/Treegrid',
+  component: StorybookTreegrid,
+  decorators: [withTheme],
+};
+
+export const Treegrid = () => <StorybookTreegrid />;

package/src/components/Lists/Treegrid.tsx

@@ -0,0 +1,142 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { useFocusableGroup, useArrowNavigationGroup } 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' });
+    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();
+    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}
+        >
+          {children}
+        </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/components/{List → Lists}/index.ts

@@ -4,3 +4,4 @@
 
 export * from './List';
 export * from './Tree';
+export * from './Treegrid';

package/src/components/index.ts

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../../../../src/components/List/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/List/List.stories.d.ts.map

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"Tree.d.ts","sourceRoot":"","sources":["../../../../../src/components/List/Tree.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EAAE,KAAK,wBAAwB,EAAE,KAAK,EAAE,EAAc,KAAK,yBAAyB,EAAE,MAAM,OAAO,CAAC;AAElH,OAAO,EAGL,KAAK,+BAA+B,EACpC,KAAK,oBAAoB,EACzB,KAAK,wBAAwB,EAC7B,KAAK,iBAAiB,EACtB,KAAK,SAAS,EAIf,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/List/Tree.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Tree.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/List/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/List/index.d.ts

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

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

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