@servicetitan/table 25.0.1 → 25.2.0

package/src/filters/single-select/single-select-filter.tsx

@@ -3,7 +3,10 @@ import { Component, SyntheticEvent, ReactNode, FC } from 'react';
 import { IdType } from '@servicetitan/data-query';
 import { TableFilterCellProps, Radio } from '@servicetitan/design-system';
 
-import { renderCustomColumnMenuFilter } from '../column-menu-filters';
+import {
+    CustomColumnMenuFilterSingleOpts,
+    renderCustomColumnMenuFilter,
+} from '../column-menu-filters';
 
 interface SelectorProps<TV, TO> {
     options: TO[];
@@ -33,16 +36,21 @@ class SelectorRadio<TV, TO> extends Component<SelectorProps<TV, TO>> {
     }
 }
 
-export interface SingleSelectColumnMenuOptions<TV, TO = TV> {
+export interface SingleSelectColumnMenuOptions<TV, TO = TV>
+    extends CustomColumnMenuFilterSingleOpts {
     options: TO[];
     valueSelector?: (item: TO) => TV;
     renderItem?: (item: TO) => ReactNode | string;
     filterOperator?: (listItem: any, value: TV) => boolean;
 }
 
-export function singleSelectColumnMenuFilter<TV extends IdType, TO = TV>(
-    props: SingleSelectColumnMenuOptions<TV, TO>
-) {
+export function singleSelectColumnMenuFilter<TV extends IdType, TO = TV>({
+    options,
+    valueSelector,
+    renderItem,
+    filterOperator,
+    ...opts
+}: SingleSelectColumnMenuOptions<TV, TO>) {
     const FilterCell: FC<TableFilterCellProps> = ({ value, onChange }) => {
         const handleChange = (value: TV | undefined, event: SyntheticEvent<HTMLInputElement>) => {
             const filter =
@@ -50,7 +58,7 @@ export function singleSelectColumnMenuFilter<TV extends IdType, TO = TV>(
                     ? { value: '', operator: '' }
                     : {
                           value,
-                          operator: props.filterOperator ?? 'equals',
+                          operator: filterOperator ?? 'equals',
                       };
 
             onChange({
@@ -61,14 +69,14 @@ export function singleSelectColumnMenuFilter<TV extends IdType, TO = TV>(
 
         return (
             <SelectorRadio
-                options={props.options}
+                options={options}
                 value={value === '' ? undefined : value}
                 onChange={handleChange}
-                renderer={props.renderItem}
-                valueSelector={props.valueSelector ?? (option => option)}
+                renderer={renderItem}
+                valueSelector={valueSelector ?? (option => option)}
             />
         );
     };
 
-    return renderCustomColumnMenuFilter(FilterCell);
+    return renderCustomColumnMenuFilter(FilterCell, opts);
 }

package/src/index.ts

@@ -15,6 +15,7 @@ export {
     TableColumnReorderEvent,
     TableCell,
     TableHeaderCellProps,
+    TableHeaderCell,
     TableRowProps,
     TableRowClickEvent,
     TableDetailRow,

package/src/table.stories.tsx

@@ -2,14 +2,16 @@ import {
     TableExample,
     TableMasterDetailExample,
     TableStateCachingExample,
-    TableColumnHidingExample
+    TableColumnHidingExample,
+    TableFooterPageSizeExample,
 } from './demo';
 
 export default {
-    title: 'Table/Demos'
+    title: 'Table/Demos',
 };
 
 export const Table = () => <TableExample />;
 export const TableMasterDetail = () => <TableMasterDetailExample />;
 export const TableStateCaching = () => <TableStateCachingExample />;
 export const TableColumnHiding = () => <TableColumnHidingExample />;
+export const TableFooterPageSize = () => <TableFooterPageSizeExample />;