Improve types and components, minor improvements to the others (plone…

…#6029)

packages/client/news/6029.bugfix

@@ -0,0 +1 @@
+Fixed path search bug @pnicolli

packages/client/src/restapi/search/get.ts

@@ -21,10 +21,13 @@ export const getSearch = async ({
 
   const options: ApiRequestParams = {
     config,
-    params: flattenedQuery,
+    params: {
+      ...flattenedQuery,
+      'path.query': undefined,
+    },
   };
 
-  return apiRequest('get', '/@search', options);
+  return apiRequest('get', `${query.path?.query ?? ''}/@search`, options);
 };
 
 export const getSearchQuery = ({ query, config }: SearchArgs) => ({

packages/components/news/6029.feature

@@ -0,0 +1 @@
+Improved several components and styles @pnicolli

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/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;
+  showArrow?: boolean;
 }
 
-export function Popover({ children, ...props }: PopoverProps) {
+export function Popover({
+  children,
+  dialogAriaLabel,
+  dialogAriaLabelledby,
+  showArrow,
+  ...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>
+      {showArrow && (
+        <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/DraggableIcon';
+
+export function Row<T extends object>({
+  id,
+  columns,
+  children,
+  ...otherProps
+}: RowProps<T>) {
+  let { selectionBehavior, allowsDragging } = useTableOptions();
+
+  return (
+    <RACRow id={id} {...otherProps}>
+      {allowsDragging && (
+        <Cell className="react-aria-Cell drag-cell">
+          <Button slot="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,5 +1,8 @@
 import React from 'react';
-import { Table, TableHeader, Row, Column } from './Table';
+import { Table } from './Table';
+import { TableHeader } from './TableHeader';
+import { Column } from './Column';
+import { Row } from './Row';
 import { Cell, TableBody } from 'react-aria-components';
 
 import type { Meta, StoryObj } from '@storybook/react';
@@ -46,7 +49,7 @@ export const Default: Story = {
     </Table>
   ),
   args: {
-    onRowAction: null,
+    onRowAction: undefined,
     // selectionMode: "multiple",
   },
 };

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

@@ -1,83 +1,90 @@
-import React from 'react';
+import React, { type ReactNode, type ComponentProps } from 'react';
 import {
-  Button,
-  Cell,
-  Collection,
-  Column as RACColumn,
-  ColumnProps,
-  Row as RACRow,
-  RowProps,
+  type TableProps as RACTableProps,
+  ResizableTableContainer,
+  ColumnResizer,
   Table as RACTable,
-  TableHeader as RACTableHeader,
-  TableHeaderProps,
-  TableProps,
-  useTableOptions,
+  TableBody,
+  Cell,
 } from 'react-aria-components';
+import { TableHeader } from './TableHeader';
+import { Column } from './Column';
+import { Row } from './Row';
 
-import { Checkbox } from '../Checkbox/Checkbox';
-
-export function Table(props: TableProps) {
-  return <RACTable {...props} />;
+interface ColumnType {
+  id: string;
+  name: ReactNode;
+  isRowHeader?: boolean;
+  // TODO support width constraints for resizable columns
 }
 
-export function Column(props: ColumnProps) {
-  return (
-    <RACColumn {...props}>
-      {({ allowsSorting, sortDirection }) => (
-        <>
-          {props.children}
-          {allowsSorting && (
-            <span aria-hidden="true" className="sort-indicator">
-              {sortDirection === 'ascending' ? '▲' : '▼'}
-            </span>
-          )}
-        </>
-      )}
-    </RACColumn>
-  );
+interface RowType {
+  id: string;
+  textValue?: string;
+  [key: string]: ReactNode; // TODO can we make this more specific?
 }
 
-export function TableHeader<T extends object>({
-  columns,
-  children,
-}: TableHeaderProps<T>) {
-  let { selectionBehavior, selectionMode, allowsDragging } = useTableOptions();
-
-  return (
-    <RACTableHeader>
-      {/* Add extra columns for drag and drop and selection. */}
-      {allowsDragging && <RACColumn />}
-      {selectionBehavior === 'toggle' && (
-        <RACColumn>
-          {selectionMode === 'multiple' && <Checkbox slot="selection" />}
-        </RACColumn>
-      )}
-      <Collection items={columns}>{children}</Collection>
-    </RACTableHeader>
-  );
+interface TableProps<C, R> extends RACTableProps {
+  columns?: C[];
+  rows?: R[];
+  resizableColumns?: boolean;
+  dragColumnHeader?: ComponentProps<typeof TableHeader>['dragColumnHeader'];
+  // TODO maybe a custom "selectall" component? Is it doable with react-aria-components?
 }
 
-export function Row<T extends object>({
-  id,
+/**
+ * A wrapper around the `react-aria-components` Table component.
+ *
+ * See https://react-spectrum.adobe.com/react-aria/Table.html
+ */
+export function Table<C extends ColumnType, R extends RowType>({
   columns,
-  children,
+  rows,
+  resizableColumns,
+  dragColumnHeader,
   ...otherProps
-}: RowProps<T>) {
-  let { selectionBehavior, allowsDragging } = useTableOptions();
+}: TableProps<C, R>) {
+  let table = null;
+  if (Array.isArray(columns) && Array.isArray(rows)) {
+    table = (
+      <RACTable {...otherProps}>
+        <TableHeader columns={columns} dragColumnHeader={dragColumnHeader}>
+          {(column) => (
+            <Column isRowHeader={column.isRowHeader}>
+              {resizableColumns && (
+                <div className="flex-wrapper">
+                  <span tabIndex={-1} className="column-name">
+                    {column.name}
+                  </span>
+                  <ColumnResizer />
+                </div>
+              )}
+              {!resizableColumns && column.name}
+            </Column>
+          )}
+        </TableHeader>
+        <TableBody items={rows}>
+          {(item) => (
+            <Row columns={columns} textValue={item.textValue}>
+              {(column) => <Cell>{item[column.id]}</Cell>}
+            </Row>
+          )}
+        </TableBody>
+      </RACTable>
+    );
+  } else {
+    table = <RACTable {...otherProps} />;
+
+    if (Array.isArray(columns)) {
+      console.warn('The Table component was given columns but no rows');
+    } else if (Array.isArray(rows)) {
+      console.warn('The Table component was given rows but no columns');
+    }
+  }
 
-  return (
-    <RACRow id={id} {...otherProps}>
-      {allowsDragging && (
-        <Cell>
-          <Button slot="drag">≡</Button>
-        </Cell>
-      )}
-      {selectionBehavior === 'toggle' && (
-        <Cell>
-          <Checkbox slot="selection" />
-        </Cell>
-      )}
-      <Collection items={columns}>{children}</Collection>
-    </RACRow>
-  );
+  if (resizableColumns) {
+    return <ResizableTableContainer>{table}</ResizableTableContainer>;
+  } else {
+    return table;
+  }
 }

packages/components/src/components/Table/TableHeader.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import {
+  type TableHeaderProps,
+  TableHeader as RACTableHeader,
+  useTableOptions,
+  Collection,
+} from 'react-aria-components';
+import { Checkbox } from '../Checkbox/Checkbox';
+import { Column } from './Column';
+
+interface Props<T extends object> extends TableHeaderProps<T> {
+  dragColumnHeader?: React.ReactNode;
+}
+
+export function TableHeader<T extends object>({
+  columns,
+  children,
+  dragColumnHeader,
+}: Props<T>) {
+  let { selectionBehavior, selectionMode, allowsDragging } = useTableOptions();
+
+  return (
+    <RACTableHeader>
+      {/* Add extra columns for drag and drop and selection. */}
+      {allowsDragging && (
+        <Column className="react-aria-Column drag-column-header">
+          {dragColumnHeader}
+        </Column>
+      )}
+      {selectionBehavior === 'toggle' && (
+        <Column>
+          {selectionMode === 'multiple' && <Checkbox slot="selection" />}
+        </Column>
+      )}
+      <Collection items={columns}>{children}</Collection>
+    </RACTableHeader>
+  );
+}