New Contents component

packages/components/src/components/Button/Button.tsx

@@ -1,6 +1,9 @@
-import React from 'react';
+import React, { forwardRef, ForwardedRef } from 'react';
 import { Button as RACButton, ButtonProps } from 'react-aria-components';
 
-export function Button(props: ButtonProps) {
-  return <RACButton {...props} />;
-}
+export const Button = forwardRef(function _Button(
+  props: ButtonProps,
+  ref: ForwardedRef<HTMLButtonElement>,
+) {
+  return <RACButton ref={ref} {...props} />;
+});

packages/components/src/components/Checkbox/Checkbox.scss

@@ -0,0 +1,97 @@
+.react-aria-Checkbox {
+  --selected-color: var(--highlight-background);
+  --selected-color-pressed: var(--highlight-background-pressed);
+  --checkmark-color: var(--highlight-foreground);
+
+  display: flex;
+  align-items: center;
+  color: var(--text-color);
+  font-size: 1.143rem;
+  forced-color-adjust: none;
+  gap: 0.571rem;
+
+  .checkbox {
+    display: flex;
+    width: 1.143rem;
+    height: 1.143rem;
+    align-items: center;
+    justify-content: center;
+    border: 2px solid var(--border-color);
+    border-radius: 4px;
+    transition: all 200ms;
+  }
+
+  svg {
+    width: 1rem;
+    height: 1rem;
+    fill: none;
+    stroke: var(--checkmark-color);
+    stroke-dasharray: 22px;
+    stroke-dashoffset: 66;
+    stroke-width: 3px;
+    transition: all 200ms;
+  }
+
+  &[data-pressed] .checkbox {
+    border-color: var(--border-color-pressed);
+  }
+
+  &[data-focus-visible] .checkbox {
+    outline: 2px solid var(--focus-ring-color);
+    outline-offset: 2px;
+  }
+
+  &[data-selected],
+  &[data-indeterminate] {
+    .checkbox {
+      border-color: var(--selected-color);
+      background: var(--selected-color);
+    }
+
+    &[data-pressed] .checkbox {
+      border-color: var(--selected-color-pressed);
+      background: var(--selected-color-pressed);
+    }
+
+    svg {
+      stroke-dashoffset: 44;
+    }
+  }
+
+  &[data-indeterminate] {
+    & svg {
+      fill: var(--checkmark-color);
+      stroke: none;
+    }
+  }
+
+  &[data-invalid] {
+    .checkbox {
+      --checkmark-color: var(--gray-50);
+      border-color: var(--color-invalid);
+    }
+
+    &[data-pressed] .checkbox {
+      border-color: var(--color-pressed-invalid);
+    }
+
+    &[data-selected],
+    &[data-indeterminate] {
+      .checkbox {
+        background: var(--color-invalid);
+      }
+
+      &[data-pressed] .checkbox {
+        background: var(--color-pressed-invalid);
+      }
+    }
+  }
+
+  &[data-disabled] {
+    color: var(--text-color-disabled);
+
+    .checkbox {
+      border-color: var(--border-color-disabled);
+    }
+  }
+}

packages/components/src/components/Container/Container.tsx

@@ -10,9 +10,9 @@ type ContainerProps = {
   /** Additional classes. */
   className: string;
   /** Layout size */
-  layout: boolean;
+  layout?: boolean;
   /** Narrow size. */
-  narrow: boolean;
+  narrow?: boolean;
 };
 
 export const Container = (props: ContainerProps) => {

packages/components/src/components/Popover/Popover.tsx

@@ -1,24 +1,42 @@
 import React from 'react';
 import {
-  Dialog,
   OverlayArrow,
   Popover as RACPopover,
   PopoverProps as RACPopoverProps,
 } from 'react-aria-components';
+import { Dialog } from '../Dialog/Dialog';
 
 export interface PopoverProps extends Omit<RACPopoverProps, 'children'> {
   children: React.ReactNode;
+  /** Mandatory when children don't contain a <Heading slot="title"> or dialogAriaLabelledBy */
+  dialogAriaLabel?: string;
+  /** Mandatory when children don't contain a <Heading slot="title"> or dialogAriaLabel */
+  dialogAriaLabelledby?: string;
+  arrow?: boolean;
 }
 
-export function Popover({ children, ...props }: PopoverProps) {
+export function Popover({
+  children,
+  dialogAriaLabel,
+  dialogAriaLabelledby,
+  arrow,
+  ...props
+}: PopoverProps) {
   return (
     <RACPopover {...props}>
-      <OverlayArrow>
-        <svg width={12} height={12} viewBox="0 0 12 12">
-          <path d="M0 0 L6 6 L12 0" />
-        </svg>
-      </OverlayArrow>
-      <Dialog>{children}</Dialog>
+      {arrow && (
+        <OverlayArrow>
+          <svg width={12} height={12} viewBox="0 0 12 12">
+            <path d="M0 0 L6 6 L12 0" />
+          </svg>
+        </OverlayArrow>
+      )}
+      <Dialog
+        aria-label={dialogAriaLabel}
+        aria-labelledby={dialogAriaLabelledby}
+      >
+        {children}
+      </Dialog>
     </RACPopover>
   );
 }

packages/components/src/components/Table/Column.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { type ColumnProps, Column as RACColumn } from 'react-aria-components';
+
+export function Column(props: ColumnProps) {
+  return (
+    <RACColumn {...props}>
+      {({ allowsSorting, sortDirection }) => (
+        <>
+          {props.children}
+          {allowsSorting && (
+            <span aria-hidden="true" className="sort-indicator">
+              {sortDirection === 'ascending' ? '▲' : '▼'}
+            </span>
+          )}
+        </>
+      )}
+    </RACColumn>
+  );
+}

packages/components/src/components/Table/Row.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import {
+  type RowProps,
+  Row as RACRow,
+  Cell,
+  Collection,
+  useTableOptions,
+  Button,
+} from 'react-aria-components';
+import { Checkbox } from '../Checkbox/Checkbox';
+import { DraggableIcon } from '../Icons';
+
+export function Row<T extends object>({
+  id,
+  columns,
+  children,
+  ...otherProps
+}: RowProps<T>) {
+  let { selectionBehavior, allowsDragging } = useTableOptions();
+
+  return (
+    <RACRow id={id} {...otherProps}>
+      {allowsDragging && (
+        <Cell>
+          <Button slot="drag" aria-label="Drag">
+            <DraggableIcon />
+          </Button>
+        </Cell>
+      )}
+      {selectionBehavior === 'toggle' && (
+        <Cell>
+          <Checkbox slot="selection" />
+        </Cell>
+      )}
+      <Collection items={columns}>{children}</Collection>
+    </RACRow>
+  );
+}

packages/components/src/components/Table/Table.stories.tsx

@@ -1,12 +1,14 @@
 import React from 'react';
-import { Table, TableHeader, Row, Column } from './Table';
-import { Cell, TableBody } from 'react-aria-components';
-
+import { Cell, TableBody, useDragAndDrop } from 'react-aria-components';
+import { Table } from './Table';
+import { TableHeader } from './TableHeader';
+import { Column } from './Column';
+import { Row } from './Row';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import '../../styles/basic/Table.css';
 
-const meta: Meta<typeof Table> = {
+const meta = {
   title: 'Components/Table',
   component: Table,
   parameters: {
@@ -19,8 +21,101 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
+  args: {
+    'aria-label': 'Files',
+    columns: [
+      { name: 'Name', id: 'name', isRowHeader: true },
+      { name: 'Type', id: 'type' },
+      { name: 'Date Modified', id: 'date' },
+    ],
+    rows: [
+      { id: '1', name: 'Games', date: '6/7/2020', type: 'File folder' },
+      { id: '2', name: 'Program Files', date: '4/7/2021', type: 'File folder' },
+      { id: '3', name: 'bootmgr', date: '11/20/2010', type: 'System file' },
+      { id: '4', name: 'log.txt', date: '1/18/2016', type: 'Text Document' },
+    ],
+  },
+};
+
+/**
+ * For more fine grained control over the selection mode,
+ * see https://react-spectrum.adobe.com/react-aria/Table.html#single-selection
+ */
+export const SingleSelection: Story = {
+  args: {
+    ...Default.args,
+    selectionMode: 'single',
+  },
+};
+
+/**
+ * For more fine grained control over the selection mode,
+ * see https://react-spectrum.adobe.com/react-aria/Table.html#multiple-selection
+ */
+export const MultipleSelection: Story = {
+  args: {
+    ...Default.args,
+    selectionMode: 'multiple',
+  },
+};
+
+/**
+ * In order to make the rows draggable, you need to pass
+ * the `dragAndDropHooks` prop to the Table component.
+ * This prop has to be generated using the `useDragAndDrop` hook,
+ * passing the `getItems` and `onReorder` functions.
+ *
+ * See here for more information:
+ * https://react-spectrum.adobe.com/react-aria/Table.html#drag-and-drop
+ */
+export const DraggableRows: Story = {
+  decorators: [
+    (Story) => {
+      const { dragAndDropHooks } = useDragAndDrop({
+        getItems: (keys) =>
+          [...keys].map((key) => ({
+            'text/plain': key.toString(),
+          })),
+        onReorder(e) {
+          if (e.target.dropPosition === 'before') {
+            console.log('moveBefore: key ', e.target.key, ', keys ', e.keys);
+          } else if (e.target.dropPosition === 'after') {
+            console.log('moveAfter: key ', e.target.key, ', keys ', e.keys);
+          }
+        },
+      });
+
+      return (
+        <>
+          <Story args={{ ...Default.args, dragAndDropHooks }} />
+        </>
+      );
+    },
+  ],
+  args: {
+    ...Default.args,
+  },
+};
+
+/**
+ * Use the `resizableColumns` prop to make the columns resizable.
+ */
+export const ResizableColumns: Story = {
+  args: {
+    ...Default.args,
+    resizableColumns: true,
+  },
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+/**
+ * Create a table with manually inserted cells.
+ */
+export const Manual: Story = {
   render: (args: any) => (
-    <Table aria-label="Files" {...args}>
+    <Table {...args}>
       <TableHeader>
         <Column isRowHeader>Name</Column>
         <Column>Type</Column>
@@ -46,7 +141,6 @@ export const Default: Story = {
     </Table>
   ),
   args: {
-    onRowAction: null,
-    // selectionMode: "multiple",
+    'aria-label': 'Files',
   },
 };