@astryxdesign/core 0.1.5 → 0.1.6-canary.02f2602

package/src/Table/plugins/filtering/useTableFiltering.tsx

@@ -42,6 +42,7 @@ import type {
   HeaderCellRenderProps,
 } from '../../types';
 import {proportional} from '../../columnUtils';
+import {useTranslator} from '../../../i18n';
 import type {
   PowerSearchConfig,
   PowerSearchField,
@@ -263,10 +264,7 @@ function tableValueToFilterValue(
  * };
  * ```
  */
-export type TableFilterState = Record<
-  string,
-  TableFilterValue | undefined
->;
+export type TableFilterState = Record<string, TableFilterValue | undefined>;
 
 /**
  * Display variant for the filter UI.
@@ -299,10 +297,7 @@ export interface UseTableFilteringConfig {
   /** Current filter state — map from column key to filter value. */
   filters: TableFilterState;
   /** Called when the user changes a filter value. `null` clears the filter. */
-  onFilterChange: (
-    columnKey: string,
-    value: TableFilterValue | null,
-  ) => void;
+  onFilterChange: (columnKey: string, value: TableFilterValue | null) => void;
   /**
    * Display variant for filter controls.
    *
@@ -424,6 +419,7 @@ function TextFilterControl({
   size: 'sm' | 'md';
   hasClear?: boolean;
 }) {
+  const t = useTranslator();
   const store = useFilterStore();
   const config = store.getConfig();
   const value = config.filters[columnKey];
@@ -431,7 +427,7 @@ function TextFilterControl({
 
   return (
     <TextInput
-      label={`Filter ${header}`}
+      label={t('@astryx.tableFiltering.filterByColumn', {header})}
       isLabelHidden
       value={strValue}
       onChange={(newValue: string) => {
@@ -439,7 +435,7 @@ function TextFilterControl({
           .getConfig()
           .onFilterChange(columnKey, newValue === '' ? null : newValue);
       }}
-      placeholder={`Filter ${header}`}
+      placeholder={t('@astryx.tableFiltering.filterByColumn', {header})}
       size={size}
       hasClear={hasClear}
     />
@@ -459,6 +455,7 @@ function NumberFilterControl({
   size: 'sm' | 'md';
   hasClear?: boolean;
 }) {
+  const t = useTranslator();
   const store = useFilterStore();
   const config = store.getConfig();
   const value = config.filters[columnKey];
@@ -476,11 +473,11 @@ function NumberFilterControl({
   if (hasClear) {
     return (
       <NumberInput
-        label={`Filter ${header}`}
+        label={t('@astryx.tableFiltering.filterByColumn', {header})}
         isLabelHidden
         value={numValue}
         onChange={handleChange}
-        placeholder={`Filter ${header}`}
+        placeholder={t('@astryx.tableFiltering.filterByColumn', {header})}
         min={operatorValue.minValue ?? null}
         max={operatorValue.maxValue ?? null}
         step={step}
@@ -492,11 +489,11 @@ function NumberFilterControl({
 
   return (
     <NumberInput
-      label={`Filter ${header}`}
+      label={t('@astryx.tableFiltering.filterByColumn', {header})}
       isLabelHidden
       value={numValue}
       onChange={handleChange}
-      placeholder={`Filter ${header}`}
+      placeholder={t('@astryx.tableFiltering.filterByColumn', {header})}
       min={operatorValue.minValue ?? null}
       max={operatorValue.maxValue ?? null}
       step={step}
@@ -518,6 +515,7 @@ function SelectorFilterControl({
   size: 'sm' | 'md';
   hasClear?: boolean;
 }) {
+  const t = useTranslator();
   const store = useFilterStore();
   const config = store.getConfig();
   const value = config.filters[columnKey];
@@ -543,12 +541,12 @@ function SelectorFilterControl({
   if (hasClear) {
     return (
       <Selector
-        label={`Filter ${header}`}
+        label={t('@astryx.tableFiltering.filterByColumn', {header})}
         isLabelHidden
         options={options}
         value={strValue || null}
         onChange={handleChange}
-        placeholder="All"
+        placeholder={t('@astryx.table.filter.allPlaceholder')}
         size={size}
         hasClear
       />
@@ -557,12 +555,12 @@ function SelectorFilterControl({
 
   return (
     <Selector
-      label={`Filter ${header}`}
+      label={t('@astryx.tableFiltering.filterByColumn', {header})}
       isLabelHidden
       options={options}
       value={strValue}
       onChange={handleChange}
-      placeholder="All"
+      placeholder={t('@astryx.table.filter.allPlaceholder')}
       size={size}
     />
   );
@@ -581,6 +579,7 @@ function MultiSelectorFilterControl({
   size: 'sm' | 'md';
   hasClear?: boolean;
 }) {
+  const t = useTranslator();
   const store = useFilterStore();
   const config = store.getConfig();
   const value = config.filters[columnKey];
@@ -593,7 +592,7 @@ function MultiSelectorFilterControl({
 
   return (
     <MultiSelector
-      label={`Filter ${header}`}
+      label={t('@astryx.tableFiltering.filterByColumn', {header})}
       isLabelHidden
       options={options}
       value={arrValue}
@@ -602,7 +601,7 @@ function MultiSelectorFilterControl({
           .getConfig()
           .onFilterChange(columnKey, newValue.length === 0 ? null : newValue);
       }}
-      placeholder="All"
+      placeholder={t('@astryx.table.filter.allPlaceholder')}
       size={size}
       hasSelectAll
       hasSearch={false}
@@ -622,12 +621,13 @@ function DateFilterControl({
   size: 'sm' | 'md';
   hasClear?: boolean;
 }) {
+  const t = useTranslator();
   const store = useFilterStore();
   const value = store.getConfig().filters[columnKey] as string | undefined;
 
   return (
     <DateInput
-      label={`Filter ${header}`}
+      label={t('@astryx.tableFiltering.filterByColumn', {header})}
       isLabelHidden
       value={(value as ISODateString | undefined) ?? undefined}
       onChange={newValue => {
@@ -650,12 +650,13 @@ function TimeFilterControl({
   size: 'sm' | 'md';
   hasClear?: boolean;
 }) {
+  const t = useTranslator();
   const store = useFilterStore();
   const value = store.getConfig().filters[columnKey] as string | undefined;
 
   return (
     <TimeInput
-      label={`Filter ${header}`}
+      label={t('@astryx.tableFiltering.filterByColumn', {header})}
       isLabelHidden
       value={(value as ISOTimeString | undefined) ?? undefined}
       onChange={newValue => {
@@ -680,6 +681,7 @@ function StringListFilterControl({
   size: 'sm' | 'md';
   hasClear?: boolean;
 }) {
+  const t = useTranslator();
   const store = useFilterStore();
   const value =
     (store.getConfig().filters[columnKey] as string[] | undefined) ?? [];
@@ -699,7 +701,7 @@ function StringListFilterControl({
 
   return (
     <Tokenizer
-      label={`Filter ${header}`}
+      label={t('@astryx.tableFiltering.filterByColumn', {header})}
       isLabelHidden
       searchSource={searchSource}
       value={value.map(v => ({id: v, label: v}))}
@@ -821,6 +823,7 @@ function PopoverFilterTrigger({
   header: string;
   operatorValue: OperatorValue;
 }) {
+  const t = useTranslator();
   const store = useFilterStore();
   const config = store.getConfig();
   const value = config.filters[columnKey];
@@ -876,7 +879,7 @@ function PopoverFilterTrigger({
     <Popover
       isOpen={isOpen}
       onOpenChange={handleOpen}
-      label={`Filter ${header}`}
+      label={t('@astryx.tableFiltering.filterByColumn', {header})}
       placement="below"
       alignment="start"
       content={
@@ -890,14 +893,14 @@ function PopoverFilterTrigger({
             />
             <div {...stylex.props(filterStyles.popoverActions)}>
               <Button
-                label="Reset"
+                label={t('@astryx.table.filter.reset')}
                 variant="ghost"
                 size="sm"
                 onClick={handleClear}
               />
               <div {...stylex.props(filterStyles.popoverActionsSpacer)} />
               <Button
-                label="Apply"
+                label={t('@astryx.table.filter.apply')}
                 variant="primary"
                 size="sm"
                 onClick={handleApply}
@@ -908,7 +911,7 @@ function PopoverFilterTrigger({
       }>
       <button
         type="button"
-        aria-label={`Filter ${header}`}
+        aria-label={t('@astryx.tableFiltering.filterByColumn', {header})}
         aria-haspopup="dialog"
         {...stylex.props(
           filterStyles.triggerButton,
@@ -928,9 +931,7 @@ function PopoverFilterTrigger({
 // Helper
 // =============================================================================
 
-function getHeaderString(
-  column: TableColumn<Record<string, unknown>>,
-): string {
+function getHeaderString(column: TableColumn<Record<string, unknown>>): string {
   if (typeof column.header === 'string') {
     return column.header;
   }

package/src/Table/plugins/groupedRows/index.ts

@@ -0,0 +1,7 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+export {useTableGroupedRows} from './useTableGroupedRows';
+export type {
+  UseTableGroupedRowsConfig,
+  UseTableGroupedRowsResult,
+} from './useTableGroupedRows';

package/src/Table/plugins/groupedRows/useTableGroupedRows.test.tsx

@@ -0,0 +1,231 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+import {describe, it, expect} from 'vitest';
+import {render, screen, fireEvent, within} from '@testing-library/react';
+import {useState, useCallback} from 'react';
+import {Table} from '../../Table';
+import type {TableColumn} from '../../types';
+import {useTableGroupedRows} from './useTableGroupedRows';
+
+interface Person extends Record<string, unknown> {
+  id: string;
+  name: string;
+  team: string;
+}
+
+const people: Person[] = [
+  {id: 'a', name: 'Alice', team: 'Core'},
+  {id: 'b', name: 'Bob', team: 'Core'},
+  {id: 'c', name: 'Carol', team: 'Infra'},
+];
+
+const columns: TableColumn<Person>[] = [{key: 'name', header: 'Name'}];
+
+const EMPTY = new Set<string>();
+
+function Harness({
+  rows = people,
+  initialCollapsed = EMPTY,
+  renderGroupHeader,
+}: {
+  rows?: Person[];
+  initialCollapsed?: Set<string>;
+  renderGroupHeader?: (
+    groupKey: string,
+    count: number,
+    collapsed: boolean,
+  ) => React.ReactNode;
+}) {
+  const [collapsedGroups, setCollapsed] = useState(initialCollapsed);
+  const onToggleGroup = useCallback((key: string) => {
+    setCollapsed(prev => {
+      const next = new Set(prev);
+      if (next.has(key)) {
+        next.delete(key);
+      } else {
+        next.add(key);
+      }
+      return next;
+    });
+  }, []);
+  const grouped = useTableGroupedRows<Person>({
+    data: rows,
+    groupBy: p => p.team,
+    collapsedGroups,
+    onToggleGroup,
+    getRowKey: p => p.id,
+    renderGroupHeader,
+  });
+  return (
+    <Table
+      data={grouped.data}
+      columns={columns}
+      idKey={grouped.idKey}
+      plugins={{grouped: grouped.plugin}}
+    />
+  );
+}
+
+describe('useTableGroupedRows', () => {
+  it('renders a header row per group with label and count', () => {
+    render(<Harness />);
+    // Two groups: Core (2), Infra (1).
+    expect(screen.getByText('Core')).toBeInTheDocument();
+    expect(screen.getByText('(2)')).toBeInTheDocument();
+    expect(screen.getByText('Infra')).toBeInTheDocument();
+    expect(screen.getByText('(1)')).toBeInTheDocument();
+  });
+
+  it('shows group members when expanded', () => {
+    render(<Harness />);
+    expect(screen.getByText('Alice')).toBeInTheDocument();
+    expect(screen.getByText('Bob')).toBeInTheDocument();
+    expect(screen.getByText('Carol')).toBeInTheDocument();
+  });
+
+  it('hides members of a collapsed group but keeps the header', () => {
+    render(<Harness initialCollapsed={new Set(['Core'])} />);
+    expect(screen.getByText('Core')).toBeInTheDocument();
+    expect(screen.queryByText('Alice')).not.toBeInTheDocument();
+    expect(screen.queryByText('Bob')).not.toBeInTheDocument();
+    // Other group unaffected.
+    expect(screen.getByText('Carol')).toBeInTheDocument();
+  });
+
+  it('toggles a group via its chevron and back again', () => {
+    render(<Harness />);
+    expect(screen.getByText('Alice')).toBeInTheDocument();
+    // The standalone chevron button toggles the group; its accessible name is
+    // qualified with the group key.
+    fireEvent.click(screen.getByRole('button', {name: 'Collapse group Core'}));
+    expect(screen.queryByText('Alice')).not.toBeInTheDocument();
+    expect(screen.queryByText('Bob')).not.toBeInTheDocument();
+    expect(screen.getByText('Core')).toBeInTheDocument();
+    expect(screen.getByText('Carol')).toBeInTheDocument();
+    // Toggle back: the Core chevron now says "Expand group Core".
+    fireEvent.click(screen.getByRole('button', {name: 'Expand group Core'}));
+    expect(screen.getByText('Alice')).toBeInTheDocument();
+    expect(screen.getByText('Bob')).toBeInTheDocument();
+  });
+
+  it('exposes each group toggle as a named, keyboard-operable button', () => {
+    render(<Harness />);
+    // Native <button>: focusable and operable without a custom key handler.
+    const coreToggle = screen.getByRole('button', {
+      name: 'Collapse group Core',
+    });
+    expect(coreToggle.tagName).toBe('BUTTON');
+    expect(coreToggle).toHaveAttribute('aria-expanded', 'true');
+  });
+
+  it('sets aria-expanded on the header row reflecting collapse state', () => {
+    render(<Harness initialCollapsed={new Set(['Core'])} />);
+    const rows = screen.getAllByRole('row');
+    // rows[1] = Core header (collapsed), rows[2] = Infra header (expanded).
+    expect(rows[1]).toHaveAttribute('aria-expanded', 'false');
+    expect(rows[2]).toHaveAttribute('aria-expanded', 'true');
+  });
+
+  it('respects groupOrder in the flattened data', () => {
+    function OrderedHarness() {
+      const [collapsed, setCollapsed] = useState<Set<string>>(new Set());
+      const grouped = useTableGroupedRows<Person>({
+        data: people,
+        groupBy: p => p.team,
+        collapsedGroups: collapsed,
+        onToggleGroup: k => setCollapsed(new Set([k])),
+        getRowKey: p => p.id,
+        groupOrder: ['Infra', 'Core'],
+      });
+      expect(grouped.data.length).toBeGreaterThan(0);
+      return (
+        <Table
+          data={grouped.data}
+          columns={columns}
+          idKey={grouped.idKey}
+          plugins={{grouped: grouped.plugin}}
+        />
+      );
+    }
+    render(<OrderedHarness />);
+    const rows = screen.getAllByRole('row');
+    // rows[0] = column header; rows[1] = first group header (Infra).
+    expect(within(rows[1]).getByText('Infra')).toBeInTheDocument();
+  });
+
+  it('renders custom group header content via renderGroupHeader', () => {
+    render(
+      <Harness
+        renderGroupHeader={(key, count, collapsed) => (
+          <span>{`${key}::${count}::${collapsed ? 'closed' : 'open'}`}</span>
+        )}
+      />,
+    );
+    expect(screen.getByText('Core::2::open')).toBeInTheDocument();
+    expect(screen.getByText('Infra::1::open')).toBeInTheDocument();
+  });
+
+  it('renders nothing (no group headers) for empty data', () => {
+    render(<Harness rows={[]} />);
+    // Column header row still renders; no group header rows.
+    expect(screen.queryByText('Core')).not.toBeInTheDocument();
+    expect(screen.queryByText('Infra')).not.toBeInTheDocument();
+    expect(
+      screen.queryByRole('button', {name: /group/i}),
+    ).not.toBeInTheDocument();
+  });
+
+  it('keeps a group collapsed across a data change (state keyed by group)', () => {
+    function ChangingHarness() {
+      const [collapsed, setCollapsed] = useState<Set<string>>(
+        new Set(['Core']),
+      );
+      const [rows, setRows] = useState(people);
+      const onToggleGroup = useCallback((key: string) => {
+        setCollapsed(prev => {
+          const next = new Set(prev);
+          if (next.has(key)) {
+            next.delete(key);
+          } else {
+            next.add(key);
+          }
+          return next;
+        });
+      }, []);
+      const grouped = useTableGroupedRows<Person>({
+        data: rows,
+        groupBy: p => p.team,
+        collapsedGroups: collapsed,
+        onToggleGroup,
+        getRowKey: p => p.id,
+      });
+      return (
+        <>
+          <button
+            type="button"
+            onClick={() =>
+              setRows([...people, {id: 'd', name: 'Dave', team: 'Core'}])
+            }>
+            add
+          </button>
+          <Table
+            data={grouped.data}
+            columns={columns}
+            idKey={grouped.idKey}
+            plugins={{grouped: grouped.plugin}}
+          />
+        </>
+      );
+    }
+    render(<ChangingHarness />);
+    // Core collapsed initially: Alice hidden.
+    expect(screen.queryByText('Alice')).not.toBeInTheDocument();
+    // Add a new Core member; Core must stay collapsed (keyed by group value).
+    fireEvent.click(screen.getByText('add'));
+    expect(screen.queryByText('Alice')).not.toBeInTheDocument();
+    expect(screen.queryByText('Dave')).not.toBeInTheDocument();
+    // Count reflects the new member (3), header still present.
+    expect(screen.getByText('Core')).toBeInTheDocument();
+    expect(screen.getByText('(3)')).toBeInTheDocument();
+  });
+});