@tcn/ui-transfer 1.0.0

package/src/transfer_list/index.ts

@@ -0,0 +1 @@
+export { TransferList, type TransferListProps } from './transfer_list.js';

package/src/transfer_list/transfer_list.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Scaffold, type ScaffoldProps } from '@tcn/ui/layouts';
+
+export interface TransferListProps extends ScaffoldProps {}
+
+export const TransferList = React.forwardRef<HTMLElement, TransferListProps>(
+  function TransferList({ children, ...props }: TransferListProps, ref) {
+    return (
+      <Scaffold ref={ref} {...props}>
+        {children}
+      </Scaffold>
+    );
+  }
+);

package/src/transfer_table/components/available_table.tsx

@@ -0,0 +1,80 @@
+import { clsx } from 'clsx';
+import { ArrowRightIcon } from '@tcn/icons/arrow_right_icon.js';
+import { DataSource } from '@tcn/resource-store';
+import { IBroadcast } from '@tcn/state';
+import { FieldFilterProps, Table, TableColumn, TableColumnProps } from '@tcn/ui-table';
+import { Button } from '@tcn/ui/actions';
+import { Rail, Scaffold, type ScaffoldProps } from '@tcn/ui/layouts';
+import React, { ReactElement } from 'react';
+import styles from '../transfer_table.module.css';
+import { AvailableTableFilterPanel } from './available_table_filter_panel.js';
+import { AvailableTableHeader } from './available_table_header.js';
+
+export interface AvailableTableOwnProps<T> {
+  dataSource: DataSource<T>;
+  columns: TableColumnProps<T>[];
+  filterPanelIsOpenBroadcast: IBroadcast<boolean>;
+  filterChildren?: ReactElement<FieldFilterProps> | ReactElement<FieldFilterProps>[];
+  onClickMove: (item: T) => void;
+  onClickFilterPanelToggle: () => void;
+  onClickMoveAll: () => void;
+}
+
+export type AvailableTableProps<T> = AvailableTableOwnProps<T> & ScaffoldProps;
+
+export const AvailableTable = <T,>({
+  dataSource,
+  columns,
+  filterPanelIsOpenBroadcast,
+  filterChildren,
+  onClickMove,
+  onClickFilterPanelToggle,
+  onClickMoveAll,
+  className,
+  ...props
+}: AvailableTableProps<T>) => {
+  return (
+    <Scaffold
+      className={clsx(
+        styles['tcn-table-available-table'],
+        'tcn-table-available-table',
+        className
+      )}
+      {...props}
+    >
+      <AvailableTableHeader
+        dataSource={dataSource}
+        filterChildren={filterChildren}
+        onClickFilterPanelToggle={onClickFilterPanelToggle}
+        onClickMoveAll={onClickMoveAll}
+      />
+      <Rail>
+        <AvailableTableFilterPanel
+          dataSource={dataSource}
+          filterPanelIsOpenBroadcast={filterPanelIsOpenBroadcast}
+          filterChildren={filterChildren}
+          onClickFilterPanelToggle={onClickFilterPanelToggle}
+        />
+        {columns?.length > 0 ? (
+          <Table minWidth={200} dataSource={dataSource} className={styles['table-body']}>
+            {[
+              ...columns.map((columnProps, index) => (
+                <TableColumn key={columnProps.fieldName ?? index} {...columnProps} />
+              )),
+              <TableColumn
+                key="actions"
+                heading="Actions"
+                sticky="end"
+                render={(item: T) => (
+                  <Button utility hierarchy="tertiary" onClick={() => onClickMove(item)}>
+                    <ArrowRightIcon />
+                  </Button>
+                )}
+              />,
+            ]}
+          </Table>
+        ) : null}
+      </Rail>
+    </Scaffold>
+  );
+};

package/src/transfer_table/components/available_table_filter_panel.tsx

@@ -0,0 +1,62 @@
+import { DataSource } from '@tcn/resource-store';
+import { IBroadcast, useSignalValue } from '@tcn/state';
+import {
+  FieldFilterProps,
+  TableFilterPanel,
+  type TableFilterPanelProps,
+} from '@tcn/ui-table';
+import { Resizable, ResizeHandle } from '@tcn/ui/utils';
+import React, { ReactElement } from 'react';
+
+export interface AvailableTableFilterPanelOwnProps<T> {
+  dataSource: DataSource<T>;
+  filterPanelIsOpenBroadcast: IBroadcast<boolean>;
+  filterChildren?: ReactElement<FieldFilterProps> | ReactElement<FieldFilterProps>[];
+  onClickFilterPanelToggle: () => void;
+}
+
+export type AvailableTableFilterPanelProps<T> = AvailableTableFilterPanelOwnProps<T> &
+  Omit<TableFilterPanelProps, 'children' | 'dataSource' | 'onClose'>;
+
+function AvailableTableFilterPanelInner<T>(
+  {
+    dataSource,
+    filterPanelIsOpenBroadcast,
+    filterChildren,
+    onClickFilterPanelToggle,
+    minWidth = '200px',
+    maxWidth = '400px',
+    width = '296px',
+    ...props
+  }: AvailableTableFilterPanelProps<T>,
+  ref: React.ForwardedRef<HTMLElement>
+) {
+  const filterPanelIsOpen = useSignalValue(filterPanelIsOpenBroadcast);
+
+  if (!filterPanelIsOpen || !filterChildren) {
+    return null;
+  }
+
+  return (
+    <Resizable>
+      <TableFilterPanel
+        ref={ref}
+        dataSource={dataSource}
+        onClose={onClickFilterPanelToggle}
+        minWidth={minWidth}
+        maxWidth={maxWidth}
+        width={width}
+        {...props}
+      >
+        {filterChildren}
+      </TableFilterPanel>
+      <ResizeHandle position="end" />
+    </Resizable>
+  );
+}
+
+export const AvailableTableFilterPanel = React.forwardRef(
+  AvailableTableFilterPanelInner
+) as <T>(
+  props: AvailableTableFilterPanelProps<T> & React.RefAttributes<HTMLElement>
+) => React.ReactElement | null;

package/src/transfer_table/components/available_table_header.tsx

@@ -0,0 +1,60 @@
+import { clsx } from 'clsx';
+import { ArrowRightIcon } from '@tcn/icons/arrow_right_icon.js';
+import { FilterTwoIcon } from '@tcn/icons/filter_two_icon.js';
+import { DataSource } from '@tcn/resource-store';
+import { FieldFilterProps, GlobalSearch } from '@tcn/ui-table';
+import { Button } from '@tcn/ui/actions';
+import { Group, UtilityBar, type HeaderProps } from '@tcn/ui/layouts';
+import { Spacer } from '@tcn/ui/stacks';
+import { Title } from '@tcn/ui/typography';
+import React, { ReactElement } from 'react';
+import styles from '../transfer_table.module.css';
+
+export interface AvailableTableHeaderOwnProps<T> {
+  dataSource: DataSource<T>;
+  onClickFilterPanelToggle: () => void;
+  onClickMoveAll: () => void;
+  filterChildren?: ReactElement<FieldFilterProps> | ReactElement<FieldFilterProps>[];
+}
+
+export type AvailableTableHeaderProps<T> = AvailableTableHeaderOwnProps<T> & HeaderProps;
+
+function AvailableTableHeaderInner<T>(
+  {
+    dataSource,
+    onClickFilterPanelToggle,
+    onClickMoveAll,
+    filterChildren,
+    className,
+    ...props
+  }: AvailableTableHeaderProps<T>,
+  ref: React.ForwardedRef<HTMLElement>
+) {
+  return (
+    <UtilityBar
+      ref={ref}
+      className={clsx(styles['available-table-header'], className)}
+      {...props}
+    >
+      <Group>
+        <Title emphasis="strong">Available</Title>
+      </Group>
+      {filterChildren && (
+        <Group>
+          <Button utility hierarchy="tertiary" onClick={onClickFilterPanelToggle}>
+            <FilterTwoIcon />
+          </Button>
+        </Group>
+      )}
+      <Spacer />
+      <GlobalSearch dataSource={dataSource} />
+      <Button hierarchy="tertiary" onClick={onClickMoveAll}>
+        Move All <ArrowRightIcon />
+      </Button>
+    </UtilityBar>
+  );
+}
+
+export const AvailableTableHeader = React.forwardRef(AvailableTableHeaderInner) as <T>(
+  props: AvailableTableHeaderProps<T> & React.RefAttributes<HTMLElement>
+) => React.ReactElement | null;

package/src/transfer_table/components/selected_column.tsx

@@ -0,0 +1,120 @@
+import { clsx } from 'clsx';
+import { CrossCircleIcon } from '@tcn/icons/cross_circle_icon.js';
+import { IBroadcast, useSignalValue } from '@tcn/state';
+import { Button } from '@tcn/ui/actions';
+import { Column, type ColumnProps, Detail, Scaffold, UtilityBar } from '@tcn/ui/layouts';
+import { Spacer } from '@tcn/ui/stacks';
+import { Title } from '@tcn/ui/typography';
+import React, { useEffect, useRef } from 'react';
+import { SelectedList } from '../../components/index.js';
+import { SelectedItemsUpdate } from '../types.js';
+import styles from '../transfer_table.module.css';
+import { SelectedItem } from './selected_item.js';
+import { Resizable, ResizeHandle } from '@tcn/ui/utils';
+
+export interface SelectedColumnOwnProps<T> {
+  selectedItemsBroadcast: IBroadcast<SelectedItemsUpdate<T>>;
+  getSelectedItemKey: (item: T) => string | number;
+  selectedItemRender: (item: T) => React.ReactNode;
+  /** Receives the items that were removed (snapshot before the list is cleared). */
+  onRemoveAll: (removedItems: T[]) => void;
+  onRemove: (item: T) => void;
+}
+
+export type SelectedColumnProps<T> = SelectedColumnOwnProps<T> & ColumnProps;
+
+function SelectedColumnInner<T>(
+  {
+    selectedItemsBroadcast,
+    getSelectedItemKey,
+    selectedItemRender,
+    onRemoveAll,
+    onRemove,
+    className,
+    width = '296px',
+    minWidth = '200px',
+    maxWidth = '50%',
+    ...props
+  }: SelectedColumnProps<T>,
+  ref: React.ForwardedRef<HTMLElement>
+) {
+  const { selectedItems, highlight } = useSignalValue(selectedItemsBroadcast);
+
+  // TODO: Remove highlight tracking once Presence is done (https://git.tcncloud.net/blackcat-ui/blackcat/-/issues/386)
+  const knownKeysRef = useRef<Set<string | number>>(new Set());
+  const newKeys = new Set<string | number>();
+  if (highlight) {
+    for (const item of selectedItems) {
+      const key = getSelectedItemKey(item);
+      if (!knownKeysRef.current.has(key)) {
+        newKeys.add(key);
+      }
+    }
+  }
+
+  useEffect(() => {
+    const currentKeys = new Set(selectedItems.map(getSelectedItemKey));
+    for (const key of currentKeys) {
+      knownKeysRef.current.add(key);
+    }
+    for (const key of [...knownKeysRef.current]) {
+      if (!currentKeys.has(key)) {
+        knownKeysRef.current.delete(key);
+      }
+    }
+  }, [selectedItems, getSelectedItemKey]);
+
+  return (
+    <Resizable>
+      <ResizeHandle position="start" />
+      <Column
+        ref={ref}
+        className={clsx(
+          styles['selected-list'],
+          'tcn-transfer-table-selected-list',
+          className
+        )}
+        width={width}
+        minWidth={minWidth}
+        maxWidth={maxWidth}
+        {...props}
+      >
+        <Scaffold height="100%" width="100%">
+          <UtilityBar>
+            <Title emphasis="strong">Selected</Title>
+            <Spacer />
+            <Button hierarchy="tertiary" onClick={() => onRemoveAll(selectedItems)}>
+              Remove All <CrossCircleIcon />
+            </Button>
+          </UtilityBar>
+          <Scaffold>
+            <Detail>
+              <SelectedList
+                items={selectedItems}
+                getItemKey={getSelectedItemKey}
+                renderItem={selectedItemRender}
+                onClickItem={onRemove}
+                renderListItem={(item, content) => (
+                  <SelectedItem
+                    item={item}
+                    onClickItem={onRemove}
+                    isNew={newKeys.has(getSelectedItemKey(item))}
+                  >
+                    {content}
+                  </SelectedItem>
+                )}
+              />
+            </Detail>
+          </Scaffold>
+        </Scaffold>
+      </Column>
+    </Resizable>
+  );
+}
+
+// React.forwardRef erases the generic <T> from SelectedColumnInner, returning
+// ForwardRefExoticComponent<SelectedColumnProps<unknown>>. The cast restores the
+// generic signature so consumers get proper type inference for their item type.
+export const SelectedColumn = React.forwardRef(SelectedColumnInner) as <T>(
+  props: SelectedColumnProps<T> & React.RefAttributes<HTMLElement>
+) => React.ReactElement | null;

package/src/transfer_table/components/selected_item.tsx

@@ -0,0 +1,58 @@
+import { clsx } from 'clsx';
+import React, { useEffect, useRef, useState } from 'react';
+import { RemovableItem, type RemovableItemProps } from '../../components/index.js';
+import styles from '../transfer_table.module.css';
+
+export interface SelectedItemOwnProps {
+  isNew: boolean;
+}
+
+export type SelectedItemProps<T> = SelectedItemOwnProps & RemovableItemProps<T>;
+
+function SelectedItemInner<T>(
+  { isNew: isNewProp, className, ...props }: SelectedItemProps<T>,
+  ref: React.ForwardedRef<HTMLDivElement>
+) {
+  const [isNew, setIsNew] = useState(isNewProp);
+  const timeoutIdRef = useRef<number | null>(null);
+
+  // TODO: Remove once Presence is done (https://git.tcncloud.net/blackcat-ui/blackcat/-/issues/386)
+  useEffect(() => {
+    if (isNewProp) {
+      setIsNew(true);
+      if (timeoutIdRef.current !== null) {
+        window.clearTimeout(timeoutIdRef.current);
+      }
+      const HIGHLIGHT_HOLD_MS = 1000;
+      timeoutIdRef.current = window.setTimeout(() => {
+        setIsNew(false);
+        timeoutIdRef.current = null;
+      }, HIGHLIGHT_HOLD_MS);
+    }
+  }, [isNewProp]);
+
+  // TODO: Remove once Presence is done (https://git.tcncloud.net/blackcat-ui/blackcat/-/issues/386)
+  useEffect(() => {
+    return () => {
+      if (timeoutIdRef.current !== null) {
+        window.clearTimeout(timeoutIdRef.current);
+      }
+    };
+  }, []);
+
+  return (
+    <RemovableItem
+      ref={ref}
+      className={clsx(
+        styles['selected-item'],
+        isNew && styles['selected-item-new'],
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export const SelectedItem = React.forwardRef(SelectedItemInner) as <T>(
+  props: SelectedItemProps<T> & React.RefAttributes<HTMLDivElement>
+) => React.ReactElement | null;

package/src/transfer_table/index.ts

@@ -0,0 +1,6 @@
+export { TransferTable } from './transfer_table.js';
+export { TransferTablePresenter } from './transfer_table_presenter.js';
+export type {
+  SelectedItemsUpdate,
+  TransferTableProps,
+} from './types.js';

package/src/transfer_table/transfer_table.module.css

@@ -0,0 +1,41 @@
+/* Transfer Table */
+.tcn-transfer-table {
+  --material: var(--background-color-primary);
+  :where(.tcn-table-available-table) :global(thead tr) {
+    --material: #e2e2e2;
+  }
+
+  /* TODO: should be on Theme - Column not direct child of page has border */
+  :global(.tcn-rail.tcn-columns) {
+    --resize-offset: -4px;
+  }
+
+  /* TODO: remove once theme provides a way to opt out of .tcn-panel .tcn-columns layout */
+  :global(.tcn-rail.tcn-columns) {
+    padding: 0;
+
+    :global(.tcn-column) {
+      gap: 0;
+      border-right: none;
+      padding-inline-end: 0;
+      padding-inline-start: 0;
+    }
+  }
+}
+
+.tcn-table-available-table {
+  /* TODO: should be on Theme - Column not direct child of page has border */
+  border-right: 1px solid #aaaaaa;
+}
+
+/* Selected Item
+   TODO: Remove highlight CSS once Presence is done (https://git.tcncloud.net/blackcat-ui/blackcat/-/issues/386).
+   --highlight-hold-ms (1000ms) must match the JS timeout in selected_item.tsx.
+   The fade-out duration (0.35s) kicks in after the JS class is removed. */
+:where(.tcn-transfer-table) :where(.selected-item) {
+  transition: background-color 0.35s ease;
+}
+
+:where(.tcn-transfer-table) :where(.selected-item-new) {
+  background-color: var(--secondary-color-faint);
+}

package/src/transfer_table/transfer_table.tsx

@@ -0,0 +1,77 @@
+import { clsx } from 'clsx';
+import { PlusIcon } from '@tcn/icons/plus_icon.js';
+import { Button } from '@tcn/ui/actions';
+import { Column, Columns, Footer, Scaffold } from '@tcn/ui/layouts';
+import { Spacer } from '@tcn/ui/stacks';
+import React from 'react';
+import { AvailableTable } from './components/available_table.js';
+import { SelectedColumn } from './components/selected_column.js';
+import styles from './transfer_table.module.css';
+import { TransferTableProps } from './types.js';
+
+function TransferTableInner<T>(
+  {
+    dataSource,
+    columns,
+    onClickMoveAll,
+    onClickMove,
+    selectedItemsBroadcast,
+    getSelectedItemKey,
+    selectedItemRender,
+    onRemoveAll,
+    onRemove,
+    filterPanelIsOpenBroadcast,
+    filterChildren,
+    onClickFilterPanelToggle,
+    onClickCancel,
+    onClickAdd,
+    ...props
+  }: TransferTableProps<T>,
+  ref: React.ForwardedRef<HTMLElement>
+) {
+  return (
+    <Scaffold
+      ref={ref}
+      className={clsx(styles['tcn-transfer-table'], 'tcn-transfer-table', 'tcn-material')}
+      {...props}
+    >
+      <Columns>
+        <Column width="fill">
+          <AvailableTable
+            dataSource={dataSource}
+            columns={columns}
+            onClickMove={onClickMove}
+            onClickMoveAll={onClickMoveAll}
+            filterPanelIsOpenBroadcast={filterPanelIsOpenBroadcast}
+            filterChildren={filterChildren}
+            onClickFilterPanelToggle={onClickFilterPanelToggle}
+          />
+        </Column>
+
+        <SelectedColumn
+          selectedItemRender={selectedItemRender}
+          selectedItemsBroadcast={selectedItemsBroadcast}
+          getSelectedItemKey={getSelectedItemKey}
+          onRemoveAll={onRemoveAll}
+          onRemove={onRemove}
+        />
+      </Columns>
+      <Footer>
+        <Spacer />
+        <Button hierarchy="tertiary" onClick={onClickCancel}>
+          Cancel
+        </Button>
+        <Button
+          hierarchy="primary"
+          onClick={() => onClickAdd(selectedItemsBroadcast.get().selectedItems)}
+        >
+          Add <PlusIcon />
+        </Button>
+      </Footer>
+    </Scaffold>
+  );
+}
+
+export const TransferTable = React.forwardRef(TransferTableInner) as <T>(
+  props: TransferTableProps<T> & React.RefAttributes<HTMLElement>
+) => React.ReactElement | null;

package/src/transfer_table/transfer_table_presenter.ts

@@ -0,0 +1,164 @@
+import { StaticDataSource } from '@tcn/resource-store';
+import { ISubscription, Signal } from '@tcn/state';
+import { FieldFilterProps, TableColumnProps } from '@tcn/ui-table';
+import { ReactElement } from 'react';
+import { SelectedItemsUpdate, TransferTableProps } from './types.js';
+
+export interface TransferTablePresenterArgs<T> {
+  dataSource: StaticDataSource<T>;
+  columns: TableColumnProps<T>[];
+  filterChildren?: ReactElement<FieldFilterProps> | ReactElement<FieldFilterProps>[];
+  getItemKey: (item: T) => string | number;
+  selectedItemRender: (item: T) => React.ReactNode;
+  onClickMoveAll?: (items: T[]) => void;
+  onClickMove?: (item: T) => void;
+  onRemoveAll?: (items: T[]) => void;
+  onRemove?: (item: T) => void;
+  onClickFilterPanelToggle?: () => void;
+  onClickCancel?: () => void;
+  onClickAdd?: (items: T[]) => void;
+}
+
+export class TransferTablePresenter<T> {
+  dataSource: StaticDataSource<T>;
+  columns: TableColumnProps<T>[];
+  getSelectedItemKey: (item: T) => string | number;
+
+  private selectedItemsSignal = new Signal<SelectedItemsUpdate<T>>({
+    selectedItems: [],
+    highlight: false,
+  });
+  selectedItemsBroadcast = this.selectedItemsSignal.broadcast;
+
+  selectedItemRender: (item: T) => React.ReactNode;
+  filterChildren?: ReactElement<FieldFilterProps> | ReactElement<FieldFilterProps>[];
+
+  private availableItems: T[] = [];
+  private _initialItemsSubscription: ISubscription<T[]> | null = null;
+
+  private filterPanelIsOpenSignal = new Signal<boolean>(false);
+  filterPanelIsOpenBroadcast = this.filterPanelIsOpenSignal.broadcast;
+
+  private callbacks: TransferTablePresenterArgs<T>;
+
+  constructor(args: TransferTablePresenterArgs<T>) {
+    this.dataSource = args.dataSource;
+    this.columns = args.columns;
+    this.selectedItemRender = args.selectedItemRender;
+    this.getSelectedItemKey = args.getItemKey;
+    this.filterChildren = args.filterChildren;
+    this.callbacks = args;
+
+    this._initialItemsSubscription = this.dataSource.broadcasts.currentResults.subscribe(
+      items => {
+        if (this.availableItems.length === 0) {
+          this.availableItems = [...items] as unknown as T[];
+        }
+        this._initialItemsSubscription?.unsubscribe();
+        this._initialItemsSubscription = null;
+      }
+    );
+  }
+
+  /** Load pre-selected items without triggering the highlight animation. */
+  loadItems = (items: T[]) => {
+    this.selectedItemsSignal.set({ selectedItems: items, highlight: false });
+  };
+
+  onClickMoveAll = () => {
+    const visibleItems = this.dataSource.broadcasts.currentResults.get();
+    const visibleKeys = new Set(visibleItems.map(this.getSelectedItemKey));
+    const currentSelectedItems = this.selectedItemsSignal.get().selectedItems;
+
+    this.availableItems = this.availableItems.filter(
+      i => !visibleKeys.has(this.getSelectedItemKey(i))
+    );
+    this.dataSource.setItems(this.availableItems);
+    this.selectedItemsSignal.set({
+      selectedItems: [...currentSelectedItems, ...visibleItems],
+      highlight: true,
+    });
+    this.callbacks.onClickMoveAll?.(visibleItems);
+  };
+
+  onClickMove = (item: T) => {
+    const itemKey = this.getSelectedItemKey(item);
+    this.availableItems = this.availableItems.filter(
+      i => this.getSelectedItemKey(i) !== itemKey
+    );
+
+    const currentSelectedItems = this.selectedItemsSignal.get().selectedItems;
+
+    this.dataSource.setItems(this.availableItems);
+    this.selectedItemsSignal.set({
+      selectedItems: [...currentSelectedItems, item],
+      highlight: true,
+    });
+    this.callbacks.onClickMove?.(item);
+  };
+
+  onRemoveAll = () => {
+    const currentSelectedItems = this.selectedItemsSignal.get().selectedItems;
+
+    this.availableItems = [...this.availableItems, ...currentSelectedItems];
+    this.dataSource.setItems(this.availableItems);
+    this.selectedItemsSignal.set({ selectedItems: [], highlight: false });
+    this.callbacks.onRemoveAll?.(currentSelectedItems);
+  };
+
+  onRemove = (removeItem: T) => {
+    const removeKey = this.getSelectedItemKey(removeItem);
+    const currentSelectedItems = this.selectedItemsSignal.get().selectedItems;
+    const mutatedSelectedItems = currentSelectedItems.filter(
+      item => this.getSelectedItemKey(item) !== removeKey
+    );
+
+    this.availableItems = [...this.availableItems, removeItem];
+    this.dataSource.setItems(this.availableItems);
+    this.selectedItemsSignal.set({
+      selectedItems: mutatedSelectedItems,
+      highlight: false,
+    });
+    this.callbacks.onRemove?.(removeItem);
+  };
+
+  onClickFilterPanelToggle = () => {
+    const currentOpenValue = this.filterPanelIsOpenSignal.get();
+    this.filterPanelIsOpenSignal.set(!currentOpenValue);
+    this.callbacks.onClickFilterPanelToggle?.();
+  };
+
+  onClickCancel = () => {
+    this.callbacks.onClickCancel?.();
+  };
+
+  onClickAdd = (items: T[]) => {
+    this.callbacks.onClickAdd?.(items);
+  };
+
+  /** Returns only the props the TransferTable component needs. */
+  getProps(): TransferTableProps<T> {
+    return {
+      dataSource: this.dataSource,
+      columns: this.columns,
+      onClickMoveAll: this.onClickMoveAll,
+      onClickMove: this.onClickMove,
+      selectedItemsBroadcast: this.selectedItemsBroadcast,
+      getSelectedItemKey: this.getSelectedItemKey,
+      selectedItemRender: this.selectedItemRender,
+      onRemoveAll: this.onRemoveAll,
+      onRemove: this.onRemove,
+      filterPanelIsOpenBroadcast: this.filterPanelIsOpenBroadcast,
+      filterChildren: this.filterChildren,
+      onClickFilterPanelToggle: this.onClickFilterPanelToggle,
+      onClickCancel: this.onClickCancel,
+      onClickAdd: this.onClickAdd,
+    };
+  }
+
+  dispose(): void {
+    this._initialItemsSubscription?.unsubscribe();
+    this.selectedItemsSignal.dispose();
+    this.filterPanelIsOpenSignal.dispose();
+  }
+}