From a1c1f801c2e8ab47d0a901b461db60d07e84dda6 Mon Sep 17 00:00:00 2001 From: Xander Leatherwood <44583237+xman343@users.noreply.github.com> Date: Mon, 14 Aug 2023 11:22:38 -0400 Subject: [PATCH 001/196] Initial commit From 23fc9bba486c6813fde46c8cafd1211273381a10 Mon Sep 17 00:00:00 2001 From: Xander Leatherwood <44583237+xman343@users.noreply.github.com> Date: Mon, 14 Aug 2023 14:56:59 -0400 Subject: [PATCH 002/196] useId added to label date table by current month --- .../itwinui-react/src/core/DatePicker/DatePicker.tsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/packages/itwinui-react/src/core/DatePicker/DatePicker.tsx b/packages/itwinui-react/src/core/DatePicker/DatePicker.tsx index 3bdccac81d8..93eca4b8e8d 100644 --- a/packages/itwinui-react/src/core/DatePicker/DatePicker.tsx +++ b/packages/itwinui-react/src/core/DatePicker/DatePicker.tsx @@ -11,6 +11,7 @@ import { SvgChevronRightDouble, isBefore, Box, + useId, } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; import { IconButton } from '../Buttons/IconButton/index.js'; @@ -226,6 +227,8 @@ export const DatePicker = React.forwardRef((props, forwardedRef) => { startDate, endDate, isDateDisabled, + // eslint-disable-next-line react-hooks/rules-of-hooks + id = useId(), ...rest } = props; @@ -555,6 +558,7 @@ export const DatePicker = React.forwardRef((props, forwardedRef) => { {monthNames[displayedMonthIndex]} @@ -587,7 +591,11 @@ export const DatePicker = React.forwardRef((props, forwardedRef) => { ))} -
+
{weeks.map((weekDays, weekIndex) => { return ( Date: Mon, 14 Aug 2023 15:51:45 -0400 Subject: [PATCH 003/196] aria label added to DatePicker button in Menu ex --- examples/DatePicker.menu.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/examples/DatePicker.menu.tsx b/examples/DatePicker.menu.tsx index c61c3876a78..f60d00d9db3 100644 --- a/examples/DatePicker.menu.tsx +++ b/examples/DatePicker.menu.tsx @@ -12,7 +12,11 @@ export default () => { return ( <> - setOpened(!opened)} id='picker-button'> + setOpened(!opened)} + id='picker-button' + aria-label='date picker' + > {currentDate.toString()} From ee7425e745ad4b1ebbfbaded9ea9d06eda160b2c Mon Sep 17 00:00:00 2001 From: Xander Leatherwood <44583237+xman343@users.noreply.github.com> Date: Mon, 14 Aug 2023 16:45:36 -0400 Subject: [PATCH 004/196] changeset --- .changeset/pink-shirts-trade.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/pink-shirts-trade.md diff --git a/.changeset/pink-shirts-trade.md b/.changeset/pink-shirts-trade.md new file mode 100644 index 00000000000..f27f22cd5a0 --- /dev/null +++ b/.changeset/pink-shirts-trade.md @@ -0,0 +1,5 @@ +--- +'@itwin/itwinui-react': minor +--- + +DatePicker date tables now have accessible labels. From 9c9f1d00e7f9cc3ec499fccbb5549154a7f2c72f Mon Sep 17 00:00:00 2001 From: Xander Leatherwood <44583237+xman343@users.noreply.github.com> Date: Tue, 15 Aug 2023 15:20:28 -0400 Subject: [PATCH 005/196] variable created for useId() --- packages/itwinui-react/src/core/DatePicker/DatePicker.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/itwinui-react/src/core/DatePicker/DatePicker.tsx b/packages/itwinui-react/src/core/DatePicker/DatePicker.tsx index 93eca4b8e8d..657bf50dd30 100644 --- a/packages/itwinui-react/src/core/DatePicker/DatePicker.tsx +++ b/packages/itwinui-react/src/core/DatePicker/DatePicker.tsx @@ -227,8 +227,6 @@ export const DatePicker = React.forwardRef((props, forwardedRef) => { startDate, endDate, isDateDisabled, - // eslint-disable-next-line react-hooks/rules-of-hooks - id = useId(), ...rest } = props; @@ -528,6 +526,8 @@ export const DatePicker = React.forwardRef((props, forwardedRef) => { return dayClass; }; + const dateTableId = useId(); + return ( { {monthNames[displayedMonthIndex]} @@ -594,7 +594,7 @@ export const DatePicker = React.forwardRef((props, forwardedRef) => {
{weeks.map((weekDays, weekIndex) => { return ( From 4a1712ca56b43d9d95b7e1467ac0d00f1768e335 Mon Sep 17 00:00:00 2001 From: Xander Leatherwood <44583237+xman343@users.noreply.github.com> Date: Tue, 15 Aug 2023 15:25:51 -0400 Subject: [PATCH 006/196] changeset update --- .changeset/pink-shirts-trade.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/pink-shirts-trade.md b/.changeset/pink-shirts-trade.md index f27f22cd5a0..19b2ed7f258 100644 --- a/.changeset/pink-shirts-trade.md +++ b/.changeset/pink-shirts-trade.md @@ -1,5 +1,5 @@ --- -'@itwin/itwinui-react': minor +'@itwin/itwinui-react': patch --- DatePicker date tables now have accessible labels. From 4e60dd9c07558fec535d9b0f7180057ca6deff4f Mon Sep 17 00:00:00 2001 From: Xander Leatherwood <44583237+xman343@users.noreply.github.com> Date: Tue, 15 Aug 2023 15:29:37 -0400 Subject: [PATCH 007/196] menu ex updated --- examples/DatePicker.menu.tsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/examples/DatePicker.menu.tsx b/examples/DatePicker.menu.tsx index f60d00d9db3..135be4864d7 100644 --- a/examples/DatePicker.menu.tsx +++ b/examples/DatePicker.menu.tsx @@ -12,11 +12,7 @@ export default () => { return ( <> - setOpened(!opened)} - id='picker-button' - aria-label='date picker' - > + setOpened(!opened)} label='Date picker'> {currentDate.toString()} From 4510505908a9c47e6a04684489bc7b298ac6c4ea Mon Sep 17 00:00:00 2001 From: Xander Leatherwood <44583237+xman343@users.noreply.github.com> Date: Tue, 15 Aug 2023 15:37:55 -0400 Subject: [PATCH 008/196] menu ex label update --- examples/DatePicker.menu.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/DatePicker.menu.tsx b/examples/DatePicker.menu.tsx index 135be4864d7..4999fec0731 100644 --- a/examples/DatePicker.menu.tsx +++ b/examples/DatePicker.menu.tsx @@ -12,7 +12,7 @@ export default () => { return ( <> - setOpened(!opened)} label='Date picker'> + setOpened(!opened)} label='Choose date'> {currentDate.toString()} From 727751545de6a1c4371fa953e346d349260db070 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Mon, 21 Aug 2023 10:33:15 -0400 Subject: [PATCH 009/196] Partially edited index.d.ts. Playground table from last week + removed satisfies --- index.d.ts 1 | 924 +++++++++++++++++++++++++++++++++++ playgrounds/vite/src/App.tsx | 226 ++++++++- react-table-config.ts 1 | 251 ++++++++++ 3 files changed, 1397 insertions(+), 4 deletions(-) create mode 100644 index.d.ts 1 create mode 100644 react-table-config.ts 1 diff --git a/index.d.ts 1 b/index.d.ts 1 new file mode 100644 index 00000000000..8988d42c4b0 --- /dev/null +++ b/index.d.ts 1 @@ -0,0 +1,924 @@ +// Type definitions for react-table 7.7 +// Project: https://github.com/tannerlinsley/react-table +// Definitions by: Guy Gascoigne-Piggford , +// Michael Stramel +// Rohit Garg +// Jason Clark +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +// TypeScript Version: 3.5 +// reflects react-table@7.7.0 + +// tslint:disable:no-empty-interface +// no-empty-interface is disabled to allow easy extension with declaration merging + +// tslint:disable:no-unnecessary-generics +// no-unnecessary-generics is disabled because many of these definitions are either used in a generic +// context or the signatures are required to match for declaration merging + +// The changelog for the important changes is located in the Readme.md + +import { + ChangeEvent, + ComponentType, + CSSProperties, + DependencyList, + EffectCallback, + MouseEvent, + ReactElement, + ReactFragment, + ReactNode, +} from 'react'; + +export {}; + +/** + * The empty definitions of below provides a base definition for the parts used by useTable, that can then be extended in the users code. + * + * @example + * export interface TableOptions + * extends + * UseExpandedOptions, + * UseFiltersOptions {} + * see https://gist.github.com/ggascoigne/646e14c9d54258e40588a13aabf0102d for more details + */ +export interface TableOptions extends UseTableOptions {} + +export interface TableInstance + extends Omit, 'columns' | 'pageCount'>, + UseTableInstanceProps {} + +export interface TableState { + hiddenColumns?: Array> | undefined; +} + +export interface Hooks extends UseTableHooks {} + +export interface Cell extends UseTableCellProps {} + +export interface ColumnInterface extends UseTableColumnOptions {} + +export interface ColumnInterfaceBasedOnValue { + Cell?: Renderer> | undefined; +} + +export interface ColumnGroupInterface { + columns: Array>; +} + +export type ColumnGroup = + & ColumnInterface + // & ColumnGroupInterface + & ( + | { Header: string; } + | ({ id: IdType; } & { + Header: Renderer>; + }) + ) + // Not used, but needed for backwards compatibility + & { accessor?: Accessor | undefined; }; + +type ValueOf = T[keyof T]; + +// The accessors like `foo.bar` are not supported, use functions instead +export type ColumnWithStrictAccessor = + & ColumnInterface + & ValueOf<{ + [K in keyof D]: { + accessor: K; + } & ColumnInterfaceBasedOnValue; + }>; + +export type ColumnWithLooseAccessor = + & ColumnInterface + & ColumnInterfaceBasedOnValue + & ( + | { Header: string } + | { id: IdType } + | { accessor: keyof D extends never ? IdType : never } + ) + & { accessor?: (keyof D extends never ? IdType | Accessor : Accessor) | undefined; }; + +export type Column = + | ColumnGroup + | ColumnWithLooseAccessor + | ColumnWithStrictAccessor; + +export interface ColumnInstance + extends Omit, 'id'>, + ColumnInterfaceBasedOnValue, + UseTableColumnProps {} + +export interface HeaderGroup extends ColumnInstance, UseTableHeaderGroupProps {} + +export interface Row extends UseTableRowProps {} + +export interface TableCommonProps { + style?: CSSProperties | undefined; + className?: string | undefined; + role?: string | undefined; +} + +export interface TableProps extends TableCommonProps {} + +export interface TableBodyProps extends TableCommonProps {} + +export interface TableKeyedProps extends TableCommonProps { + key: React.Key; +} + +export interface TableHeaderGroupProps extends TableKeyedProps {} + +export interface TableFooterGroupProps extends TableKeyedProps {} + +export interface TableHeaderProps extends TableKeyedProps {} + +export interface TableFooterProps extends TableKeyedProps {} + +export interface TableRowProps extends TableKeyedProps {} + +export interface TableCellProps extends TableKeyedProps {} + +export interface TableToggleCommonProps extends TableCommonProps { + onChange?: ((e: ChangeEvent) => void) | undefined; + checked?: boolean | undefined; + title?: string | undefined; + indeterminate?: boolean | undefined; +} + +export interface MetaBase { + instance: TableInstance; + userProps: any; +} + +// inspired by ExtendState in https://github.com/reduxjs/redux/blob/master/src/types/store.ts +export type Meta> = [Extension] extends [never] + ? M + : M & Extension; + +//#region useTable +export function useTable( + options: TableOptions, + ...plugins: Array> +): TableInstance; + +/** + * NOTE: To use custom options, use "Interface Merging" to add the custom options + */ +export type UseTableOptions = { + columns: ReadonlyArray>; + data: readonly D[]; +} & Partial<{ + initialState: Partial>; + stateReducer: (newState: TableState, action: ActionType, previousState: TableState, instance?: TableInstance) => TableState; + useControlledState: (state: TableState, meta: Meta) => TableState; + defaultColumn: Partial>; + getSubRows: (originalRow: D, relativeIndex: number) => D[]; + getRowId: (originalRow: D, relativeIndex: number, parent?: Row) => string; + autoResetHiddenColumns: boolean; +}>; + +export type PropGetter> = + | ((props: P, meta: Meta) => P | P[]) + | P + | P[]; + +export type TablePropGetter = PropGetter; + +export type TableBodyPropGetter = PropGetter; + +export type HeaderPropGetter = PropGetter }>; + +export type FooterGroupPropGetter = PropGetter }>; + +export type HeaderGroupPropGetter = PropGetter }>; + +export type FooterPropGetter = PropGetter }>; + +export type RowPropGetter = PropGetter }>; + +export type CellPropGetter = PropGetter }>; + +export interface ReducerTableState extends TableState, Record {} + +export interface UseTableHooks extends Record { + useOptions: Array<(options: TableOptions, args: TableOptions) => TableOptions>; + stateReducers: Array< + ( + newState: TableState, + action: ActionType, + previousState?: TableState, + instance?: TableInstance, + ) => ReducerTableState | undefined + >; + columns: Array<(columns: Array>, meta: Meta) => Array>>; + columnsDeps: Array<(deps: any[], meta: Meta) => any[]>; + allColumns: Array<(allColumns: Array>, meta: Meta) => Array>>; + allColumnsDeps: Array<(deps: any[], meta: Meta) => any[]>; + visibleColumns: Array<(allColumns: Array>, meta: Meta) => Array>>; + visibleColumnsDeps: Array<(deps: any[], meta: Meta) => any[]>; + headerGroups: Array<(allColumns: Array>, meta: Meta) => Array>>; + headerGroupsDeps: Array<(deps: any[], meta: Meta) => any[]>; + useInstanceBeforeDimensions: Array<(instance: TableInstance) => void>; + useInstance: Array<(instance: TableInstance) => void>; + prepareRow: Array<(row: Row, meta: Meta) => void>; + useControlledState: Array<(state: TableState, meta: Meta) => TableState>; + + getTableProps: Array>; + getTableBodyProps: Array>; + getHeaderGroupProps: Array>; + getFooterGroupProps: Array>; + getHeaderProps: Array>; + getFooterProps: Array>; + getRowProps: Array>; + getCellProps: Array>; + useFinalInstance: Array<(instance: TableInstance) => void>; +} + +export interface UseTableColumnOptions { + id?: IdType | undefined; + Header?: Renderer> | undefined; + Footer?: Renderer> | undefined; + width?: number | string | undefined; + minWidth?: number | undefined; + maxWidth?: number | undefined; +} + +type UpdateHiddenColumns = (oldHidden: Array>) => Array>; + +export interface TableToggleHideAllColumnProps extends TableToggleCommonProps {} + +export interface UseTableInstanceProps { + state: TableState; + plugins: Array>; + dispatch: TableDispatch; + columns: Array>; + allColumns: Array>; + visibleColumns: Array>; + headerGroups: Array>; + footerGroups: Array>; + headers: Array>; + flatHeaders: Array>; + rows: Array>; + rowsById: Record>; + getTableProps: (propGetter?: TablePropGetter) => TableProps; + getTableBodyProps: (propGetter?: TableBodyPropGetter) => TableBodyProps; + prepareRow: (row: Row) => void; + flatRows: Array>; + totalColumnsWidth: number; + allColumnsHidden: boolean; + toggleHideColumn: (columnId: IdType, value?: boolean) => void; + setHiddenColumns: (param: Array> | UpdateHiddenColumns) => void; + toggleHideAllColumns: (value?: boolean) => void; + getToggleHideAllColumnsProps: (props?: Partial) => TableToggleHideAllColumnProps; + getHooks: () => Hooks; +} + +export interface UseTableHeaderGroupProps { + headers: Array>; + getHeaderGroupProps: (propGetter?: HeaderGroupPropGetter) => TableHeaderProps; + getFooterGroupProps: (propGetter?: FooterGroupPropGetter) => TableFooterProps; + totalHeaderCount: number; // not documented +} + +export interface UseTableColumnProps { + id: IdType; + columns?: Array> | undefined; + isVisible: boolean; + render: (type: 'Header' | 'Footer' | string, props?: object) => ReactNode; + totalLeft: number; + totalWidth: number; + getHeaderProps: (propGetter?: HeaderPropGetter) => TableHeaderProps; + getFooterProps: (propGetter?: FooterPropGetter) => TableFooterProps; + toggleHidden: (value?: boolean) => void; + parent?: ColumnInstance | undefined; // not documented + getToggleHiddenProps: (userProps?: any) => any; + depth: number; // not documented + placeholderOf?: ColumnInstance | undefined; +} + +export interface UseTableRowProps { + cells: Array>; + allCells: Array>; + values: Record, CellValue>; + getRowProps: (propGetter?: RowPropGetter) => TableRowProps; + index: number; + original: D; + id: string; + subRows: Array>; +} + +export interface UseTableCellProps { + column: ColumnInstance; + row: Row; + value: CellValue; + getCellProps: (propGetter?: CellPropGetter) => TableCellProps; + render: (type: 'Cell' | string, userProps?: object) => ReactNode; +} + +export type HeaderProps = TableInstance & { + column: ColumnInstance; +}; + +export type FooterProps = TableInstance & { + column: ColumnInstance; +}; + +export type CellProps = TableInstance & { + column: ColumnInstance; + row: Row; + cell: Cell; + value: CellValue; +}; + +export type Accessor = ( + originalRow: D, + index: number, + sub: { + subRows: D[]; + depth: number; + data: D[]; + }, +) => CellValue; + +//#endregion + +// Plugins + +//#region useAbsoluteLayout +export function useAbsoluteLayout(hooks: Hooks): void; + +export namespace useAbsoluteLayout { + const pluginName = 'useAbsoluteLayout'; +} +//#endregion + +//#region useBlockLayout +export function useBlockLayout(hooks: Hooks): void; + +export namespace useBlockLayout { + const pluginName = 'useBlockLayout'; +} +//#endregion + +//#region useColumnOrder +export function useColumnOrder(hooks: Hooks): void; + +export namespace useColumnOrder { + const pluginName = 'useColumnOrder'; +} + +export interface UseColumnOrderState { + columnOrder: Array>; +} + +export interface UseColumnOrderInstanceProps { + setColumnOrder: (updater: ((columnOrder: Array>) => Array>) | Array>) => void; +} + +//#endregion + +//#region useExpanded +export function useExpanded(hooks: Hooks): void; + +export namespace useExpanded { + const pluginName = 'useExpanded'; +} + +export interface TableExpandedToggleProps extends TableKeyedProps {} + +export type UseExpandedOptions = Partial<{ + manualExpandedKey: IdType; + paginateExpandedRows: boolean; + expandSubRows: boolean; + autoResetExpanded?: boolean | undefined; +}>; + +export interface UseExpandedHooks { + getToggleRowsExpandedProps: Array>; + getToggleAllRowsExpandedProps: Array>; +} + +export interface UseExpandedState { + expanded: Record, boolean>; +} + +export interface UseExpandedInstanceProps { + preExpandedRows: Array>; + expandedRows: Array>; + rows: Array>; + expandedDepth: number; + isAllRowsExpanded: boolean; + toggleRowExpanded: (id: Array>, value?: boolean) => void; + toggleAllRowsExpanded: (value?: boolean) => void; +} + +export interface UseExpandedRowProps { + isExpanded: boolean; + canExpand: boolean; + subRows: Array>; + toggleRowExpanded: (value?: boolean) => void; + getToggleRowExpandedProps: (props?: Partial) => TableExpandedToggleProps; + depth: number; +} + +//#endregion + +//#region useFilters +export function useFilters(hooks: Hooks): void; + +export namespace useFilters { + const pluginName = 'useFilters'; +} + +export type UseFiltersOptions = Partial<{ + manualFilters: boolean; + disableFilters: boolean; + defaultCanFilter: boolean; + filterTypes: FilterTypes; + autoResetFilters?: boolean | undefined; +}>; + +export interface UseFiltersState { + filters: Filters; +} + +export type UseFiltersColumnOptions = Partial<{ + Filter: Renderer>; + disableFilters: boolean; + defaultCanFilter: boolean; + filter: FilterType | DefaultFilterTypes | string; +}>; + +export interface UseFiltersInstanceProps { + preFilteredRows: Array>; + preFilteredFlatRows: Array>; + preFilteredRowsById: Record>; + filteredRows: Array>; + filteredFlatRows: Array>; + filteredRowsById: Record>; + rows: Array>; + flatRows: Array>; + rowsById: Record>; + setFilter: (columnId: IdType, updater: ((filterValue: FilterValue) => FilterValue) | FilterValue) => void; + setAllFilters: (updater: Filters | ((filters: Filters) => Filters)) => void; +} + +export interface UseFiltersColumnProps { + canFilter: boolean; + setFilter: (updater: ((filterValue: FilterValue) => FilterValue) | FilterValue) => void; + filterValue: FilterValue; + preFilteredRows: Array>; + filteredRows: Array>; +} + +export type FilterProps = HeaderProps; +export type FilterValue = any; +export type Filters = Array<{ id: IdType; value: FilterValue }>; +export type FilterTypes = Record>; + +export type DefaultFilterTypes = + | 'text' + | 'exactText' + | 'exactTextCase' + | 'includes' + | 'includesAll' + | 'exact' + | 'equals' + | 'between'; + +export interface FilterType { + (rows: Array>, columnIds: Array>, filterValue: FilterValue): Array>; + + autoRemove?: ((filterValue: FilterValue) => boolean) | undefined; +} + +//#endregion + +//#region useFlexLayout +export function useFlexLayout(hooks: Hooks): void; + +export namespace useFlexLayout { + const pluginName = 'useFlexLayout'; +} +//#endregion + +//#region useGridLayout +export function useGridLayout(hooks: Hooks): void; + +export namespace useGridLayout { + const pluginName = 'useGridLayout'; +} +//#endregion + +//#region useGlobalFilter +export function useGlobalFilter(hooks: Hooks): void; + +export namespace useGlobalFilter { + const pluginName = 'useGlobalFilter'; +} + +export type UseGlobalFiltersOptions = Partial<{ + globalFilter: ((rows: Array>, columnIds: Array>, filterValue: any) => Array>) | string; + manualGlobalFilter: boolean; + filterTypes: FilterTypes; + autoResetGlobalFilter?: boolean | undefined; + disableGlobalFilter?: boolean | undefined; +}>; + +export interface UseGlobalFiltersState { + globalFilter: any; +} + +export type UseGlobalFiltersColumnOptions = Partial<{ + disableGlobalFilter?: boolean | undefined; +}>; + +export interface UseGlobalFiltersInstanceProps { + preGlobalFilteredRows: Array>; + preGlobalFilteredFlatRows: Array>; + preGlobalFilteredRowsById: Record>; + globalFilteredRows: Array>; + globalFilteredFlatRows: Array>; + globalFilteredRowsById: Record>; + rows: Array>; + flatRows: Array>; + rowsById: Record>; + setGlobalFilter: (filterValue: FilterValue) => void; +} + +//#endregion + +//#region useGroupBy +export function useGroupBy(hooks: Hooks): void; + +export namespace useGroupBy { + const pluginName = 'useGroupBy'; +} + +export interface TableGroupByToggleProps { + title?: string | undefined; + style?: CSSProperties | undefined; + onClick?: ((e: MouseEvent) => void) | undefined; +} + +export type UseGroupByOptions = Partial<{ + manualGroupBy: boolean; + disableGroupBy: boolean; + defaultCanGroupBy: boolean; + aggregations: Record>; + groupByFn: (rows: Array>, columnId: IdType) => Record>>; + autoResetGroupBy?: boolean | undefined; +}>; + +export interface UseGroupByHooks { + getGroupByToggleProps: Array>; +} + +export interface UseGroupByState { + groupBy: Array>; +} + +export type UseGroupByColumnOptions = Partial<{ + aggregate: Aggregator; + Aggregated: Renderer>; + disableGroupBy: boolean; + defaultCanGroupBy: boolean; +}>; + +export interface UseGroupByInstanceProps { + preGroupedRows: Array>; + preGroupedFlatRows: Array>; + preGroupedRowsById: Record>; + groupedRows: Array>; + groupedFlatRows: Array>; + groupedRowsById: Record>; + onlyGroupedFlatRows: Array>; + onlyGroupedRowsById: Record>; + nonGroupedFlatRows: Array>; + nonGroupedRowsById: Record>; + rows: Array>; + flatRows: Array>; + rowsById: Record>; + toggleGroupBy: (columnId: IdType, value?: boolean) => void; +} + +export interface UseGroupByColumnProps { + canGroupBy: boolean; + isGrouped: boolean; + groupedIndex: number; + toggleGroupBy: () => void; + getGroupByToggleProps: (props?: Partial) => TableGroupByToggleProps; +} + +export interface UseGroupByRowProps { + isGrouped: boolean; + groupByID: IdType; + groupByVal: string; + values: Record, AggregatedValue>; + subRows: Array>; + leafRows: Array>; + depth: number; + id: string; + index: number; +} + +export interface UseGroupByCellProps { + isGrouped: boolean; + isPlaceholder: boolean; + isAggregated: boolean; +} + +export type DefaultAggregators = 'sum' | 'average' | 'median' | 'uniqueCount' | 'count'; + +export type AggregatorFn = ( + columnValues: CellValue[], + rows: Array>, + isAggregated: boolean, +) => AggregatedValue; +export type Aggregator = AggregatorFn | DefaultAggregators | string; +export type AggregatedValue = any; +//#endregion + +//#region usePagination +export function usePagination(hooks: Hooks): void; + +export namespace usePagination { + const pluginName = 'usePagination'; +} + +export type UsePaginationOptions = Partial<{ + pageCount: number; + manualPagination: boolean; + autoResetPage?: boolean | undefined; + paginateExpandedRows: boolean; +}>; + +export interface UsePaginationState { + pageSize: number; + pageIndex: number; +} + +export interface UsePaginationInstanceProps { + page: Array>; + pageCount: number; + pageOptions: number[]; + canPreviousPage: boolean; + canNextPage: boolean; + gotoPage: (updater: ((pageIndex: number) => number) | number) => void; + previousPage: () => void; + nextPage: () => void; + setPageSize: (pageSize: number) => void; +} + +//#endregion + +//#region useResizeColumns +export function useResizeColumns(hooks: Hooks): void; + +export namespace useResizeColumns { + const pluginName = 'useResizeColumns'; +} + +export interface UseResizeColumnsOptions { + disableResizing?: boolean | undefined; + autoResetResize?: boolean | undefined; +} + +export interface UseResizeColumnsState { + columnResizing: { + startX?: number | undefined; + columnWidth: number; + headerIdWidths: Record; + columnWidths: any; + isResizingColumn?: string | undefined; + }; +} + +export interface UseResizeColumnsColumnOptions { + disableResizing?: boolean | undefined; +} + +export interface TableResizerProps {} + +export interface UseResizeColumnsColumnProps { + getResizerProps: (props?: Partial) => TableResizerProps; + canResize: boolean; + isResizing: boolean; +} + +//#endregion + +//#region useRowSelect +export function useRowSelect(hooks: Hooks): void; + +export namespace useRowSelect { + const pluginName = 'useRowSelect'; +} + +export interface TableToggleAllRowsSelectedProps extends TableToggleCommonProps {} + +export interface TableToggleRowsSelectedProps extends TableToggleCommonProps {} + +export type UseRowSelectOptions = Partial<{ + manualRowSelectedKey: IdType; + autoResetSelectedRows: boolean; + selectSubRows: boolean; +}>; + +export interface UseRowSelectHooks { + getToggleRowSelectedProps: Array>; + getToggleAllRowsSelectedProps: Array>; + getToggleAllPageRowsSelectedProps: Array>; +} + +export interface UseRowSelectState { + selectedRowIds: Record, boolean>; +} + +export interface UseRowSelectInstanceProps { + toggleRowSelected: (rowId: IdType, set?: boolean) => void; + toggleAllRowsSelected: (value?: boolean) => void; + getToggleAllRowsSelectedProps: ( + props?: Partial, + ) => TableToggleAllRowsSelectedProps; + getToggleAllPageRowsSelectedProps: ( + props?: Partial, + ) => TableToggleAllRowsSelectedProps; + isAllRowsSelected: boolean; + selectedFlatRows: Array>; +} + +export interface UseRowSelectRowProps { + isSelected: boolean; + isSomeSelected: boolean; + toggleRowSelected: (set?: boolean) => void; + getToggleRowSelectedProps: (props?: Partial) => TableToggleRowsSelectedProps; +} + +//#endregion + +//#region useRowState +export function useRowState(hooks: Hooks): void; + +export namespace useRowState { + const pluginName = 'useRowState'; +} + +export type UseRowStateOptions = Partial<{ + initialRowStateAccessor: (row: Row) => UseRowStateLocalState; + getResetRowStateDeps: (instance: TableInstance) => any[]; + autoResetRowState?: boolean | undefined; +}>; + +export interface UseRowStateState { + rowState: Record }>; +} + +export interface UseRowStateInstanceProps { + setRowState: (rowPath: string[], updater: UseRowUpdater) => void; + setCellState: (rowPath: string[], columnId: IdType, updater: UseRowUpdater) => void; +} + +export interface UseRowStateRowProps { + state: UseRowStateLocalState; + setState: (updater: UseRowUpdater) => void; +} + +export interface UseRowStateCellProps { + state: UseRowStateLocalState; + setState: (updater: UseRowUpdater) => void; +} + +export type UseRowUpdater = T | ((prev: T) => T); +export type UseRowStateLocalState = Record, T>; +//#endregion + +//#region useSortBy +export function useSortBy(hooks: Hooks): void; + +export namespace useSortBy { + const pluginName = 'useSortBy'; +} + +export interface TableSortByToggleProps { + title?: string | undefined; + style?: CSSProperties | undefined; + onClick?: ((e: MouseEvent) => void)| undefined; +} + +export type UseSortByOptions = Partial<{ + manualSortBy: boolean; + disableSortBy: boolean; + defaultCanSort: boolean; + disableMultiSort: boolean; + isMultiSortEvent: (e: MouseEvent) => boolean; + maxMultiSortColCount: number; + disableSortRemove: boolean; + disabledMultiRemove: boolean; + orderByFn: (rows: Array>, sortFns: Array>, directions: boolean[]) => Array>; + sortTypes: Record>; + autoResetSortBy?: boolean | undefined; +}>; + +export interface UseSortByHooks { + getSortByToggleProps: Array>; +} + +export interface UseSortByState { + sortBy: Array>; +} + +export type UseSortByColumnOptions = Partial<{ + defaultCanSort: boolean; + disableSortBy: boolean; + sortDescFirst: boolean; + sortInverted: boolean; + sortType: SortByFn | DefaultSortTypes | string; +}>; + +export interface UseSortByInstanceProps { + rows: Array>; + preSortedRows: Array>; + setSortBy: (sortBy: Array>) => void; + toggleSortBy: (columnId: IdType, descending?: boolean, isMulti?: boolean) => void; +} + +export interface UseSortByColumnProps { + canSort: boolean; + toggleSortBy: (descending?: boolean, multi?: boolean) => void; + getSortByToggleProps: (props?: Partial) => TableSortByToggleProps; + clearSortBy: () => void; + isSorted: boolean; + sortedIndex: number; + isSortedDesc: boolean | undefined; +} + +export type OrderByFn = (rowA: Row, rowB: Row) => number; +export type SortByFn = (rowA: Row, rowB: Row, columnId: IdType, desc?: boolean) => number; + +export type DefaultSortTypes = 'alphanumeric' | 'datetime' | 'basic' | 'string' | 'number'; + +export interface SortingRule { + id: IdType; + desc?: boolean | undefined; +} + +//#endregion + +// Additional API +export const actions: Record; +export type ActionType = { type: string } & Record; +export const defaultColumn: Partial & Record; + +// Helpers +export type StringKey = Extract; +export type IdType = StringKey | string; +export type CellValue = V; + +export type Renderer = ComponentType | ReactElement | string | number | ReactFragment; + +export interface PluginHook { + (hooks: Hooks): void; + pluginName?: string | undefined; +} + +export type TableDispatch = (action: A) => void; + +// utils +export function defaultOrderByFn( + arr: Array>, + funcs: Array>, + dirs: boolean[], +): Array>; + +export function defaultGroupByFn( + rows: Array>, + columnId: IdType, +): Record>>; + +export function makePropGetter(hooks: Hooks, ...meta: any[]): any; + +export function reduceHooks(hooks: Hooks, initial: T, ...args: any[]): T; + +export function loopHooks(hooks: Hooks, ...args: any[]): void; + +export function ensurePluginOrder( + plugins: Array>, + befores: string[], + pluginName: string, +): void; + +export function functionalUpdate( + updater: any, + old: Partial>, +): Partial>; + +export function useGetLatest(obj: T): () => T; + +export function safeUseLayoutEffect(effect: EffectCallback, deps?: DependencyList): void; + +export function useMountedLayoutEffect(effect: EffectCallback, deps?: DependencyList): void; + +export function useAsyncDebounce any>(defaultFn: F, defaultWait?: number): F; + +export function makeRenderer(instance: TableInstance, column: ColumnInstance, meta?: any): ReactElement; diff --git a/playgrounds/vite/src/App.tsx b/playgrounds/vite/src/App.tsx index 308ffd82cc0..77ce67c5670 100644 --- a/playgrounds/vite/src/App.tsx +++ b/playgrounds/vite/src/App.tsx @@ -1,10 +1,228 @@ -import { Button } from '@itwin/itwinui-react'; +import { SvgMore } from '@itwin/itwinui-icons-react'; +import { + ActionColumn, + Button, + DefaultCell, + DropdownMenu, + IconButton, + Input, + MenuItem, + Table, + tableFilters, +} from '@itwin/itwinui-react'; +import { useCallback, useMemo, useState } from 'react'; +import type { + CellProps, + CellRendererProps, + Column, + Row, + TableInstance, + TableState, +} from 'react-table'; const App = () => { + // type TableStoryDataType = Record; + type TableStoryDataType = { + product: string; + price: number; + // [K in string]: any; + // quantity: number; + // rating: number; + // deliveryTime: number; + // status: 'positive' | 'negative' | 'warning' | undefined; + // subRows: TableStoryDataType[]; + }; + + const generateItem = useCallback( + (index: number, parentRow = '', depth = 0): TableStoryDataType => { + const keyValue = parentRow ? `${parentRow}.${index + 1}` : `${index + 1}`; + const rating = (index % 4) + 1; + return { + product: `Product ${keyValue}`, + price: ((index % 10) + 1) * 15, + // quantity: ((index % 10) + 1) * 150, + // rating: rating, + // deliveryTime: (index % 15) + 1, + // status: + // rating >= 4 ? 'positive' : rating === 3 ? 'warning' : 'negative', + // subRows: + // depth < 2 + // ? Array(Math.round(index % 5)) + // .fill(null) + // .map((_, index) => generateItem(index, keyValue, depth + 1)) + // : [], + }; + }, + [], + ); + + const data = useMemo( + () => + Array(100) + .fill(null) + .map((_, index) => generateItem(index)), + [generateItem], + ); + + const isRowDisabled = useCallback((rowData: TableStoryDataType) => { + return rowData.product.endsWith('3'); + }, []); + + const menuItems = useCallback((close: () => void) => { + return [ + close()}> + Edit + , + close()}> + Delete + , + ]; + }, []); + + const columns = useMemo( + // (): Column[] => [ + () => + [ + { + id: 'product', + Header: 'Product', + // accessor: 'product', + Filter: tableFilters.TextFilter(), + disableToggleVisibility: true, + disableReordering: true, + width: 200, + sticky: 'left', + }, + { + id: 'price', + Header: 'Price', + accessor: 'price', + width: 200, + Filter: tableFilters.NumberRangeFilter(), + filter: 'between', + disableReordering: true, + sortType: 'number', + // Cell1: (props) => { + // return
+ // }, + Cell: (props: CellProps, number>) => { + return <>${props.value}; + }, + // Cell: (props) => { + // return <>${props.value}; + // }, + sticky: 'left', + }, + // { + // id: 'quantity', + // Header: 'Quantity', + // accessor: 'quantity', + // Filter: tableFilters.NumberRangeFilter(), + // filter: 'between', + // sortType: 'number', + // width: 400, + // }, + // { + // id: 'rating', + // Header: 'Rating', + // accessor: 'rating', + // Filter: tableFilters.NumberRangeFilter(), + // filter: 'between', + // sortType: 'number', + // width: 400, + // // cellRenderer: (props: CellRendererProps) => { + // // return ( + // // + // // {props.cellProps.row.original.rating}/5 + // // + // // ); + // // }, + // }, + // { + // id: 'deliveryTime', + // Header: 'Delivery Time', + // accessor: 'deliveryTime', + // Filter: tableFilters.NumberRangeFilter(), + // filter: 'between', + // sortType: 'number', + // width: 400, + // Cell: (props: CellProps) => { + // return <>{props.value} day(s); + // }, + // }, + // // { + // // ...ActionColumn({ columnManager: true }), + // // // Cell: (props: CellProps) => ( + // // // + // // // e.stopPropagation()} + // // // disabled={isRowDisabled(props.row.original)} + // // // > + // // // + // // // + // // // + // // // ), + // // // sticky: 'right', + // // }, + // ] satisfies Array>>, + // ] satisfies Array>, + // ] as Column[], + ] as Column[], + [isRowDisabled, menuItems], + ); + + const rowProps = useCallback((row: Row<{ status: string | undefined }>) => { + return { + status: row.original.status, + }; + }, []); + + const [globalFilterValue, setGlobalFilterValue] = useState(''); + return ( - <> - - +
+ ) => + setGlobalFilterValue(e.target.value) + } + /> +
+ >>} + columns={columns} + // columnsq={columns} + emptyTableContent='No data.' + // isRowDisabled={isRowDisabled} + isSelectable + isSortable + isResizable + enableColumnReordering + data={data} + style={{ height: '100%' }} + enableVirtualization + // rowProps={rowProps} + globalFilterValue={globalFilterValue} + /> + + ); }; diff --git a/react-table-config.ts 1 b/react-table-config.ts 1 new file mode 100644 index 00000000000..615f77e4df3 --- /dev/null +++ b/react-table-config.ts 1 @@ -0,0 +1,251 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Bentley Systems, Incorporated. All rights reserved. + * See LICENSE.md in the project root for license terms and full copyright notice. + *--------------------------------------------------------------------------------------------*/ +// react-table was written with plain JS therefore these type overrides are needed +// Link: https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-table +/* eslint-disable @typescript-eslint/ban-types */ +// eslint-disable-next-line @typescript-eslint/ban-ts-comment +// @ts-ignore +import type { + UseColumnOrderInstanceProps, + UseColumnOrderState, + UseExpandedHooks, + UseExpandedInstanceProps, + UseExpandedOptions, + UseExpandedRowProps, + UseExpandedState, + UseFiltersColumnOptions, + UseFiltersColumnProps, + UseFiltersInstanceProps, + UseFiltersOptions, + UseFiltersState, + UseGlobalFiltersColumnOptions, + UseGlobalFiltersInstanceProps, + UseGlobalFiltersOptions, + UseGlobalFiltersState, + UseGroupByCellProps, + // UseGroupByColumnOptions, + UseGroupByColumnProps, + UseGroupByHooks, + UseGroupByInstanceProps, + // UseGroupByOptions, + UseGroupByRowProps, + UseGroupByState, + UsePaginationInstanceProps, + UsePaginationOptions, + UsePaginationState, + UseResizeColumnsColumnOptions, + UseResizeColumnsColumnProps, + UseResizeColumnsOptions, + // UseResizeColumnsState, + UseRowSelectHooks, + UseRowSelectInstanceProps, + UseRowSelectOptions, + UseRowSelectRowProps, + UseRowSelectState, + UseRowStateCellProps, + UseRowStateInstanceProps, + // UseRowStateOptions, + UseRowStateRowProps, + UseRowStateState, + UseSortByColumnOptions, + UseSortByColumnProps, + UseSortByHooks, + UseSortByInstanceProps, + UseSortByOptions, + UseSortByState, + UseTableOptions, +} from 'react-table'; +import type { TableFilterProps } from '../core/Table/filters/index.js'; + +declare module 'react-table' { + export type FieldType = 'text' | 'number' | 'date' | string; + + export type CellRendererProps = { + /** + * Cell HTML props passed from the Table. + */ + cellElementProps: TableCellProps; + /** + * Table specific cell props like `column`, `row`. + */ + cellProps: CellProps; + /** + * Cell's content. + */ + children: React.ReactNode; + /** + * Function that returns whether the cell is disabled. + */ + isDisabled?: (rowData: D) => boolean; + }; + + // take this file as-is, or comment out the sections that don't apply to your plugin configuration + export interface TableOptions + extends Omit, 'data' | 'columns'>, + UseRowSelectOptions, + UseExpandedOptions, + UseFiltersOptions, + // UseGroupByOptions, + UsePaginationOptions, + UseGlobalFiltersOptions, + UseGlobalFiltersColumnOptions, + Omit, 'disableResizing'>, + // UseRowStateOptions, + UseSortByOptions { + /** + * List of columns. + * + * Should not have a top-level `Header` or a `columns` sub-property. They are only allowed to be passed for backwards compatibility. + * See [migration guide](https://github.com/iTwin/iTwinUI/wiki/iTwinUI-react-v2-migration-guide#breaking-changes). + */ + columns: Array>; + /** + * Table data list. + * Must be memoized. + * + * Supports expandable sub-rows using the `subRows` field in data entries. + * If some rows don't have sub-data, it is recommended to pass an empty array to `subRows` for consistent spacing. + */ + data: D[]; + /** + * Column's resize mode. + * - `fit` - when resizing it affects current and the next column, + * e.g. when increasing width of current column, next column's width will decrease. + * - `expand` - when resizing it affects only the current column, + * e.g. when increasing width of the current column, next column's width remains the same. + * @default 'fit' + */ + columnResizeMode?: 'fit' | 'expand'; + } + + export interface Hooks + extends UseExpandedHooks, + UseGroupByHooks, + UseRowSelectHooks, + UseSortByHooks {} + + export interface TableInstance + extends UseColumnOrderInstanceProps, + UseExpandedInstanceProps, + UseFiltersInstanceProps, + UseGlobalFiltersInstanceProps, + UseGroupByInstanceProps, + UsePaginationInstanceProps, + UseRowSelectInstanceProps, + UseRowStateInstanceProps, + UseSortByInstanceProps { + initialRows: Row[]; + columnResizeMode: TableOptions['columnResizeMode']; + tableWidth: number; + } + + export interface TableState + extends UseColumnOrderState, + UseExpandedState, + UseFiltersState, + UseGlobalFiltersState, + UseGroupByState, + UsePaginationState, + UseRowSelectState, + UseRowStateState, + UseSortByState { + // UseResizeColumnsState with fixed typings + columnResizing: { + startX?: number; + columnWidth?: number; + nextColumnWidth?: number; + headerIdWidths?: Array<[string, number]>; + nextHeaderIdWidths?: Array<[string, number]>; + columnWidths: Record; + isResizingColumn?: string; + }; + isTableResizing?: boolean; + columnReorderStartIndex: number; + sticky: { + isScrolledToRight?: boolean; + isScrolledToLeft?: boolean; + }; + lastSelectedRowId?: string; + } + + export interface ColumnInterface + // UseGroupByColumnOptions, + extends UseSortByColumnOptions, + UseFiltersColumnOptions, + UseResizeColumnsColumnOptions, + UseGlobalFiltersColumnOptions { + /** + * Custom class name applied to header column cell. + */ + columnClassName?: string; + /** + * Custom class name applied to each column's cell. + */ + cellClassName?: string; + /** + * Type of the data in cell. Used for manual filtering. + */ + fieldType?: FieldType; + /** + * Filter component used as a column filter. Should use filters from `tableFilters`. + */ + Filter?: Renderer> | Renderer>; + /** + * String value or custom function to use for filtering. + * Possible string values: `text`, `exactText`, `exactTextCase`, `includes`, `includesAll`, `exact`, `equals`, `between`. + * More info about these filters: https://github.com/tannerlinsley/react-table/blob/master/src/filterTypes.js + */ + filter?: FilterType | DefaultFilterTypes | string; + /** + * Function that should return whole cell element not only the content. + * Must be memoized. + * @example + * { + * Header: 'Name', + * accessor: 'name', + * cellRenderer: (props) => , + * } + */ + cellRenderer?: (props: CellRendererProps) => React.ReactNode; + /** + * If true, column can't be reordered. + * @default false + */ + disableReordering?: boolean; + /** + * If true, column's visibility cannot be toggled. + * @default false + */ + disableToggleVisibility?: boolean; + /** + * Side on which column should be sticked to. + */ + sticky?: 'left' | 'right'; + } + + export interface ColumnInstance + extends UseFiltersColumnProps, + UseGroupByColumnProps, + UseResizeColumnsColumnProps, + UseSortByColumnProps { + originalWidth: number; + resizeWidth?: number; + isResizerVisible?: boolean; + getDragAndDropProps: () => TableKeyedProps; + originalSticky?: 'left' | 'right' | 'none'; + } + + // export interface Cell + // extends UseGroupByCellProps, + // UseRowStateCellProps {} + + export interface Row + extends UseExpandedRowProps, + UseGroupByRowProps, + UseRowSelectRowProps, + UseRowStateRowProps { + initialSubRows: Row[]; + } +} From 0db913c154fa10fa977188c78b26c5df64bacbad Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Mon, 21 Aug 2023 10:57:47 -0400 Subject: [PATCH 010/196] Trying to add react-table package folder inside itwinui-react folder --- packages/itwinui-react/.eslintignore | 4 + .../src/types/react-table/LICENSE | 21 + .../src/types/react-table/README.md | 16 + .../src/types/react-table/index.d.ts | 1105 +++++++++++++++++ .../src/types/react-table/package.json | 42 + 5 files changed, 1188 insertions(+) create mode 100644 packages/itwinui-react/src/types/react-table/LICENSE create mode 100644 packages/itwinui-react/src/types/react-table/README.md create mode 100644 packages/itwinui-react/src/types/react-table/index.d.ts create mode 100644 packages/itwinui-react/src/types/react-table/package.json diff --git a/packages/itwinui-react/.eslintignore b/packages/itwinui-react/.eslintignore index 0033cd845a0..e234fb7f1a2 100644 --- a/packages/itwinui-react/.eslintignore +++ b/packages/itwinui-react/.eslintignore @@ -7,3 +7,7 @@ scripts cjs esm *.d.ts + +# # Ignore all .d.ts files, except the ones in src/types/react-table/index.d.ts +# **/*.d.ts +# !src/types/react-table/index.d.ts diff --git a/packages/itwinui-react/src/types/react-table/LICENSE b/packages/itwinui-react/src/types/react-table/LICENSE new file mode 100644 index 00000000000..9e841e7a26e --- /dev/null +++ b/packages/itwinui-react/src/types/react-table/LICENSE @@ -0,0 +1,21 @@ + MIT License + + Copyright (c) Microsoft Corporation. + + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: + + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. + + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE diff --git a/packages/itwinui-react/src/types/react-table/README.md b/packages/itwinui-react/src/types/react-table/README.md new file mode 100644 index 00000000000..5ca79e9d73d --- /dev/null +++ b/packages/itwinui-react/src/types/react-table/README.md @@ -0,0 +1,16 @@ +# Installation +> `npm install --save @types/react-table` + +# Summary +This package contains type definitions for react-table (https://github.com/tannerlinsley/react-table). + +# Details +Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-table. + +### Additional Details + * Last updated: Wed, 11 May 2022 16:01:37 GMT + * Dependencies: [@types/react](https://npmjs.com/package/@types/react) + * Global values: none + +# Credits +These definitions were written by [Guy Gascoigne-Piggford](https://github.com/ggascoigne), [Michael Stramel](https://github.com/stramel), [Rohit Garg](https://github.com/gargroh), and [Jason Clark](https://github.com/riceboyler). diff --git a/packages/itwinui-react/src/types/react-table/index.d.ts b/packages/itwinui-react/src/types/react-table/index.d.ts new file mode 100644 index 00000000000..1ab8a65ddbd --- /dev/null +++ b/packages/itwinui-react/src/types/react-table/index.d.ts @@ -0,0 +1,1105 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Bentley Systems, Incorporated. All rights reserved. + * See LICENSE.md in the project root for license terms and full copyright notice. + *--------------------------------------------------------------------------------------------*/ +// Type definitions for react-table 7.7 +// Project: https://github.com/tannerlinsley/react-table +// Definitions by: Guy Gascoigne-Piggford , +// Michael Stramel +// Rohit Garg +// Jason Clark +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +// TypeScript Version: 3.5 +// reflects react-table@7.7.0 + +// tslint:disable:no-empty-interface +// no-empty-interface is disabled to allow easy extension with declaration merging + +// tslint:disable:no-unnecessary-generics +// no-unnecessary-generics is disabled because many of these definitions are either used in a generic +// context or the signatures are required to match for declaration merging + +// The changelog for the important changes is located in the Readme.md + +import { + ChangeEvent, + ComponentType, + CSSProperties, + DependencyList, + EffectCallback, + MouseEvent, + ReactElement, + ReactFragment, + ReactNode, +} from 'react'; + +declare module 'react-table' { + export {}; + + /** + * The empty definitions of below provides a base definition for the parts used by useTable, that can then be extended in the users code. + * + * @example + * export interface TableOptions + * extends + * UseExpandedOptions, + * UseFiltersOptions {} + * see https://gist.github.com/ggascoigne/646e14c9d54258e40588a13aabf0102d for more details + */ + export type TableOptions = UseTableOptions; + + export interface TableInstance + extends Omit, 'columns' | 'pageCount'>, + UseTableInstanceProps {} + + export interface TableState { + hiddenColumns?: Array> | undefined; + } + + export type Hooks = UseTableHooks; + + export type Cell = UseTableCellProps; + + export type ColumnInterface = UseTableColumnOptions; + + export interface ColumnInterfaceBasedOnValue { + Cell?: Renderer> | undefined; + } + + export interface ColumnGroupInterface { + columns: Array>; + } + + export type ColumnGroup = ColumnInterface & + ColumnGroupInterface & + ( + | { Header: string } + | ({ id: IdType } & { + Header: Renderer>; + }) + ) & { accessor?: Accessor | undefined }; // Not used, but needed for backwards compatibility + + type ValueOf = T[keyof T]; + + // The accessors like `foo.bar` are not supported, use functions instead + export type ColumnWithStrictAccessor = + ColumnInterface & + ValueOf<{ + [K in keyof D]: { + accessor: K; + } & ColumnInterfaceBasedOnValue; + }>; + + export type ColumnWithLooseAccessor = + ColumnInterface & + ColumnInterfaceBasedOnValue & + ( + | { Header: string } + | { id: IdType } + | { accessor: keyof D extends never ? IdType : never } + ) & { + accessor?: + | (keyof D extends never ? IdType | Accessor : Accessor) + | undefined; + }; + + export type Column = + | ColumnGroup + | ColumnWithLooseAccessor + | ColumnWithStrictAccessor; + + export interface ColumnInstance + extends Omit, 'id'>, + ColumnInterfaceBasedOnValue, + UseTableColumnProps {} + + export interface HeaderGroup + extends ColumnInstance, + UseTableHeaderGroupProps {} + + export type Row = UseTableRowProps; + + export interface TableCommonProps { + style?: CSSProperties | undefined; + className?: string | undefined; + role?: string | undefined; + } + + export interface TableProps extends TableCommonProps {} + + export interface TableBodyProps extends TableCommonProps {} + + export interface TableKeyedProps extends TableCommonProps { + key: React.Key; + } + + export interface TableHeaderGroupProps extends TableKeyedProps {} + + export interface TableFooterGroupProps extends TableKeyedProps {} + + export interface TableHeaderProps extends TableKeyedProps {} + + export interface TableFooterProps extends TableKeyedProps {} + + export interface TableRowProps extends TableKeyedProps {} + + export interface TableCellProps extends TableKeyedProps {} + + export interface TableToggleCommonProps extends TableCommonProps { + onChange?: ((e: ChangeEvent) => void) | undefined; + checked?: boolean | undefined; + title?: string | undefined; + indeterminate?: boolean | undefined; + } + + export interface MetaBase { + instance: TableInstance; + userProps: any; + } + + // inspired by ExtendState in https://github.com/reduxjs/redux/blob/master/src/types/store.ts + export type Meta> = [ + Extension, + ] extends [never] + ? M + : M & Extension; + + //#region useTable + export function useTable( + options: TableOptions, + ...plugins: Array> + ): TableInstance; + + /** + * NOTE: To use custom options, use "Interface Merging" to add the custom options + */ + export type UseTableOptions = { + columns: ReadonlyArray>; + data: readonly D[]; + } & Partial<{ + initialState: Partial>; + stateReducer: ( + newState: TableState, + action: ActionType, + previousState: TableState, + instance?: TableInstance, + ) => TableState; + useControlledState: (state: TableState, meta: Meta) => TableState; + defaultColumn: Partial>; + getSubRows: (originalRow: D, relativeIndex: number) => D[]; + getRowId: ( + originalRow: D, + relativeIndex: number, + parent?: Row, + ) => string; + autoResetHiddenColumns: boolean; + }>; + + export type PropGetter< + D extends object, + Props, + T extends object = never, + P = Partial, + > = ((props: P, meta: Meta) => P | P[]) | P | P[]; + + export type TablePropGetter = PropGetter; + + export type TableBodyPropGetter = PropGetter< + D, + TableBodyProps + >; + + export type HeaderPropGetter = PropGetter< + D, + TableHeaderProps, + { column: HeaderGroup } + >; + + export type FooterGroupPropGetter = PropGetter< + D, + TableFooterGroupProps, + { column: HeaderGroup } + >; + + export type HeaderGroupPropGetter = PropGetter< + D, + TableHeaderGroupProps, + { column: HeaderGroup } + >; + + export type FooterPropGetter = PropGetter< + D, + TableFooterProps, + { column: HeaderGroup } + >; + + export type RowPropGetter = PropGetter< + D, + TableRowProps, + { row: Row } + >; + + export type CellPropGetter = PropGetter< + D, + TableCellProps, + { cell: Cell } + >; + + export interface ReducerTableState + extends TableState, + Record {} + + export interface UseTableHooks extends Record { + useOptions: Array< + (options: TableOptions, args: TableOptions) => TableOptions + >; + stateReducers: Array< + ( + newState: TableState, + action: ActionType, + previousState?: TableState, + instance?: TableInstance, + ) => ReducerTableState | undefined + >; + columns: Array< + (columns: Array>, meta: Meta) => Array> + >; + columnsDeps: Array<(deps: any[], meta: Meta) => any[]>; + allColumns: Array< + (allColumns: Array>, meta: Meta) => Array> + >; + allColumnsDeps: Array<(deps: any[], meta: Meta) => any[]>; + visibleColumns: Array< + (allColumns: Array>, meta: Meta) => Array> + >; + visibleColumnsDeps: Array<(deps: any[], meta: Meta) => any[]>; + headerGroups: Array< + ( + allColumns: Array>, + meta: Meta, + ) => Array> + >; + headerGroupsDeps: Array<(deps: any[], meta: Meta) => any[]>; + useInstanceBeforeDimensions: Array<(instance: TableInstance) => void>; + useInstance: Array<(instance: TableInstance) => void>; + prepareRow: Array<(row: Row, meta: Meta) => void>; + useControlledState: Array< + (state: TableState, meta: Meta) => TableState + >; + + getTableProps: Array>; + getTableBodyProps: Array>; + getHeaderGroupProps: Array>; + getFooterGroupProps: Array>; + getHeaderProps: Array>; + getFooterProps: Array>; + getRowProps: Array>; + getCellProps: Array>; + useFinalInstance: Array<(instance: TableInstance) => void>; + } + + export interface UseTableColumnOptions { + id?: IdType | undefined; + Header?: Renderer> | undefined; + Footer?: Renderer> | undefined; + width?: number | string | undefined; + minWidth?: number | undefined; + maxWidth?: number | undefined; + } + + type UpdateHiddenColumns = ( + oldHidden: Array>, + ) => Array>; + + export interface TableToggleHideAllColumnProps + extends TableToggleCommonProps {} + + export interface UseTableInstanceProps { + state: TableState; + plugins: Array>; + dispatch: TableDispatch; + columns: Array>; + allColumns: Array>; + visibleColumns: Array>; + headerGroups: Array>; + footerGroups: Array>; + headers: Array>; + flatHeaders: Array>; + rows: Array>; + rowsById: Record>; + getTableProps: (propGetter?: TablePropGetter) => TableProps; + getTableBodyProps: (propGetter?: TableBodyPropGetter) => TableBodyProps; + prepareRow: (row: Row) => void; + flatRows: Array>; + totalColumnsWidth: number; + allColumnsHidden: boolean; + toggleHideColumn: (columnId: IdType, value?: boolean) => void; + setHiddenColumns: ( + param: Array> | UpdateHiddenColumns, + ) => void; + toggleHideAllColumns: (value?: boolean) => void; + getToggleHideAllColumnsProps: ( + props?: Partial, + ) => TableToggleHideAllColumnProps; + getHooks: () => Hooks; + } + + export interface UseTableHeaderGroupProps { + headers: Array>; + getHeaderGroupProps: ( + propGetter?: HeaderGroupPropGetter, + ) => TableHeaderProps; + getFooterGroupProps: ( + propGetter?: FooterGroupPropGetter, + ) => TableFooterProps; + totalHeaderCount: number; // not documented + } + + export interface UseTableColumnProps { + id: IdType; + columns?: Array> | undefined; + isVisible: boolean; + render: (type: 'Header' | 'Footer' | string, props?: object) => ReactNode; + totalLeft: number; + totalWidth: number; + getHeaderProps: (propGetter?: HeaderPropGetter) => TableHeaderProps; + getFooterProps: (propGetter?: FooterPropGetter) => TableFooterProps; + toggleHidden: (value?: boolean) => void; + parent?: ColumnInstance | undefined; // not documented + getToggleHiddenProps: (userProps?: any) => any; + depth: number; // not documented + placeholderOf?: ColumnInstance | undefined; + } + + export interface UseTableRowProps { + cells: Array>; + allCells: Array>; + values: Record, CellValue>; + getRowProps: (propGetter?: RowPropGetter) => TableRowProps; + index: number; + original: D; + id: string; + subRows: Array>; + } + + export interface UseTableCellProps { + column: ColumnInstance; + row: Row; + value: CellValue; + getCellProps: (propGetter?: CellPropGetter) => TableCellProps; + render: (type: 'Cell' | string, userProps?: object) => ReactNode; + } + + export type HeaderProps = TableInstance & { + column: ColumnInstance; + }; + + export type FooterProps = TableInstance & { + column: ColumnInstance; + }; + + export type CellProps = TableInstance & { + column: ColumnInstance; + row: Row; + cell: Cell; + value: CellValue; + }; + + export type Accessor = ( + originalRow: D, + index: number, + sub: { + subRows: D[]; + depth: number; + data: D[]; + }, + ) => CellValue; + + //#endregion + + // Plugins + + //#region useAbsoluteLayout + export function useAbsoluteLayout( + hooks: Hooks, + ): void; + + export namespace useAbsoluteLayout { + const pluginName = 'useAbsoluteLayout'; + } + //#endregion + + //#region useBlockLayout + export function useBlockLayout(hooks: Hooks): void; + + export namespace useBlockLayout { + const pluginName = 'useBlockLayout'; + } + //#endregion + + //#region useColumnOrder + export function useColumnOrder(hooks: Hooks): void; + + export namespace useColumnOrder { + const pluginName = 'useColumnOrder'; + } + + export interface UseColumnOrderState { + columnOrder: Array>; + } + + export interface UseColumnOrderInstanceProps { + setColumnOrder: ( + updater: + | ((columnOrder: Array>) => Array>) + | Array>, + ) => void; + } + + //#endregion + + //#region useExpanded + export function useExpanded(hooks: Hooks): void; + + export namespace useExpanded { + const pluginName = 'useExpanded'; + } + + export interface TableExpandedToggleProps extends TableKeyedProps {} + + export type UseExpandedOptions = Partial<{ + manualExpandedKey: IdType; + paginateExpandedRows: boolean; + expandSubRows: boolean; + autoResetExpanded?: boolean | undefined; + }>; + + export interface UseExpandedHooks { + getToggleRowsExpandedProps: Array>; + getToggleAllRowsExpandedProps: Array>; + } + + export interface UseExpandedState { + expanded: Record, boolean>; + } + + export interface UseExpandedInstanceProps { + preExpandedRows: Array>; + expandedRows: Array>; + rows: Array>; + expandedDepth: number; + isAllRowsExpanded: boolean; + toggleRowExpanded: (id: Array>, value?: boolean) => void; + toggleAllRowsExpanded: (value?: boolean) => void; + } + + export interface UseExpandedRowProps { + isExpanded: boolean; + canExpand: boolean; + subRows: Array>; + toggleRowExpanded: (value?: boolean) => void; + getToggleRowExpandedProps: ( + props?: Partial, + ) => TableExpandedToggleProps; + depth: number; + } + + //#endregion + + //#region useFilters + export function useFilters(hooks: Hooks): void; + + export namespace useFilters { + const pluginName = 'useFilters'; + } + + export type UseFiltersOptions = Partial<{ + manualFilters: boolean; + disableFilters: boolean; + defaultCanFilter: boolean; + filterTypes: FilterTypes; + autoResetFilters?: boolean | undefined; + }>; + + export interface UseFiltersState { + filters: Filters; + } + + export type UseFiltersColumnOptions = Partial<{ + Filter: Renderer>; + disableFilters: boolean; + defaultCanFilter: boolean; + filter: FilterType | DefaultFilterTypes | string; + }>; + + export interface UseFiltersInstanceProps { + preFilteredRows: Array>; + preFilteredFlatRows: Array>; + preFilteredRowsById: Record>; + filteredRows: Array>; + filteredFlatRows: Array>; + filteredRowsById: Record>; + rows: Array>; + flatRows: Array>; + rowsById: Record>; + setFilter: ( + columnId: IdType, + updater: ((filterValue: FilterValue) => FilterValue) | FilterValue, + ) => void; + setAllFilters: ( + updater: Filters | ((filters: Filters) => Filters), + ) => void; + } + + export interface UseFiltersColumnProps { + canFilter: boolean; + setFilter: ( + updater: ((filterValue: FilterValue) => FilterValue) | FilterValue, + ) => void; + filterValue: FilterValue; + preFilteredRows: Array>; + filteredRows: Array>; + } + + export type FilterProps = HeaderProps; + export type FilterValue = any; + export type Filters = Array<{ + id: IdType; + value: FilterValue; + }>; + export type FilterTypes = Record>; + + export type DefaultFilterTypes = + | 'text' + | 'exactText' + | 'exactTextCase' + | 'includes' + | 'includesAll' + | 'exact' + | 'equals' + | 'between'; + + export interface FilterType { + ( + rows: Array>, + columnIds: Array>, + filterValue: FilterValue, + ): Array>; + + autoRemove?: ((filterValue: FilterValue) => boolean) | undefined; + } + + //#endregion + + //#region useFlexLayout + export function useFlexLayout(hooks: Hooks): void; + + export namespace useFlexLayout { + const pluginName = 'useFlexLayout'; + } + //#endregion + + //#region useGridLayout + export function useGridLayout(hooks: Hooks): void; + + export namespace useGridLayout { + const pluginName = 'useGridLayout'; + } + //#endregion + + //#region useGlobalFilter + export function useGlobalFilter(hooks: Hooks): void; + + export namespace useGlobalFilter { + const pluginName = 'useGlobalFilter'; + } + + export type UseGlobalFiltersOptions = Partial<{ + globalFilter: + | (( + rows: Array>, + columnIds: Array>, + filterValue: any, + ) => Array>) + | string; + manualGlobalFilter: boolean; + filterTypes: FilterTypes; + autoResetGlobalFilter?: boolean | undefined; + disableGlobalFilter?: boolean | undefined; + }>; + + export interface UseGlobalFiltersState { + globalFilter: any; + } + + export type UseGlobalFiltersColumnOptions = Partial<{ + disableGlobalFilter?: boolean | undefined; + }>; + + export interface UseGlobalFiltersInstanceProps { + preGlobalFilteredRows: Array>; + preGlobalFilteredFlatRows: Array>; + preGlobalFilteredRowsById: Record>; + globalFilteredRows: Array>; + globalFilteredFlatRows: Array>; + globalFilteredRowsById: Record>; + rows: Array>; + flatRows: Array>; + rowsById: Record>; + setGlobalFilter: (filterValue: FilterValue) => void; + } + + //#endregion + + //#region useGroupBy + export function useGroupBy(hooks: Hooks): void; + + export namespace useGroupBy { + const pluginName = 'useGroupBy'; + } + + export interface TableGroupByToggleProps { + title?: string | undefined; + style?: CSSProperties | undefined; + onClick?: ((e: MouseEvent) => void) | undefined; + } + + export type UseGroupByOptions = Partial<{ + manualGroupBy: boolean; + disableGroupBy: boolean; + defaultCanGroupBy: boolean; + aggregations: Record>; + groupByFn: ( + rows: Array>, + columnId: IdType, + ) => Record>>; + autoResetGroupBy?: boolean | undefined; + }>; + + export interface UseGroupByHooks { + getGroupByToggleProps: Array>; + } + + export interface UseGroupByState { + groupBy: Array>; + } + + export type UseGroupByColumnOptions = Partial<{ + aggregate: Aggregator; + Aggregated: Renderer>; + disableGroupBy: boolean; + defaultCanGroupBy: boolean; + }>; + + export interface UseGroupByInstanceProps { + preGroupedRows: Array>; + preGroupedFlatRows: Array>; + preGroupedRowsById: Record>; + groupedRows: Array>; + groupedFlatRows: Array>; + groupedRowsById: Record>; + onlyGroupedFlatRows: Array>; + onlyGroupedRowsById: Record>; + nonGroupedFlatRows: Array>; + nonGroupedRowsById: Record>; + rows: Array>; + flatRows: Array>; + rowsById: Record>; + toggleGroupBy: (columnId: IdType, value?: boolean) => void; + } + + export interface UseGroupByColumnProps { + canGroupBy: boolean; + isGrouped: boolean; + groupedIndex: number; + toggleGroupBy: () => void; + getGroupByToggleProps: ( + props?: Partial, + ) => TableGroupByToggleProps; + } + + export interface UseGroupByRowProps { + isGrouped: boolean; + groupByID: IdType; + groupByVal: string; + values: Record, AggregatedValue>; + subRows: Array>; + leafRows: Array>; + depth: number; + id: string; + index: number; + } + + export interface UseGroupByCellProps { + isGrouped: boolean; + isPlaceholder: boolean; + isAggregated: boolean; + } + + export type DefaultAggregators = + | 'sum' + | 'average' + | 'median' + | 'uniqueCount' + | 'count'; + + export type AggregatorFn = ( + columnValues: CellValue[], + rows: Array>, + isAggregated: boolean, + ) => AggregatedValue; + export type Aggregator = + | AggregatorFn + | DefaultAggregators + | string; + export type AggregatedValue = any; + //#endregion + + //#region usePagination + export function usePagination(hooks: Hooks): void; + + export namespace usePagination { + const pluginName = 'usePagination'; + } + + export type UsePaginationOptions = Partial<{ + pageCount: number; + manualPagination: boolean; + autoResetPage?: boolean | undefined; + paginateExpandedRows: boolean; + }>; + + export interface UsePaginationState { + pageSize: number; + pageIndex: number; + } + + export interface UsePaginationInstanceProps { + page: Array>; + pageCount: number; + pageOptions: number[]; + canPreviousPage: boolean; + canNextPage: boolean; + gotoPage: (updater: ((pageIndex: number) => number) | number) => void; + previousPage: () => void; + nextPage: () => void; + setPageSize: (pageSize: number) => void; + } + + //#endregion + + //#region useResizeColumns + export function useResizeColumns( + hooks: Hooks, + ): void; + + export namespace useResizeColumns { + const pluginName = 'useResizeColumns'; + } + + export interface UseResizeColumnsOptions { + disableResizing?: boolean | undefined; + autoResetResize?: boolean | undefined; + } + + export interface UseResizeColumnsState { + columnResizing: { + startX?: number | undefined; + columnWidth: number; + headerIdWidths: Record; + columnWidths: any; + isResizingColumn?: string | undefined; + }; + } + + export interface UseResizeColumnsColumnOptions { + disableResizing?: boolean | undefined; + } + + export interface TableResizerProps {} + + export interface UseResizeColumnsColumnProps { + getResizerProps: (props?: Partial) => TableResizerProps; + canResize: boolean; + isResizing: boolean; + } + + //#endregion + + //#region useRowSelect + export function useRowSelect(hooks: Hooks): void; + + export namespace useRowSelect { + const pluginName = 'useRowSelect'; + } + + export interface TableToggleAllRowsSelectedProps + extends TableToggleCommonProps {} + + export interface TableToggleRowsSelectedProps + extends TableToggleCommonProps {} + + export type UseRowSelectOptions = Partial<{ + manualRowSelectedKey: IdType; + autoResetSelectedRows: boolean; + selectSubRows: boolean; + }>; + + export interface UseRowSelectHooks { + getToggleRowSelectedProps: Array< + PropGetter + >; + getToggleAllRowsSelectedProps: Array< + PropGetter + >; + getToggleAllPageRowsSelectedProps: Array< + PropGetter + >; + } + + export interface UseRowSelectState { + selectedRowIds: Record, boolean>; + } + + export interface UseRowSelectInstanceProps { + toggleRowSelected: (rowId: IdType, set?: boolean) => void; + toggleAllRowsSelected: (value?: boolean) => void; + getToggleAllRowsSelectedProps: ( + props?: Partial, + ) => TableToggleAllRowsSelectedProps; + getToggleAllPageRowsSelectedProps: ( + props?: Partial, + ) => TableToggleAllRowsSelectedProps; + isAllRowsSelected: boolean; + selectedFlatRows: Array>; + } + + export interface UseRowSelectRowProps { + isSelected: boolean; + isSomeSelected: boolean; + toggleRowSelected: (set?: boolean) => void; + getToggleRowSelectedProps: ( + props?: Partial, + ) => TableToggleRowsSelectedProps; + } + + //#endregion + + //#region useRowState + export function useRowState(hooks: Hooks): void; + + export namespace useRowState { + const pluginName = 'useRowState'; + } + + export type UseRowStateOptions = Partial<{ + initialRowStateAccessor: (row: Row) => UseRowStateLocalState; + getResetRowStateDeps: (instance: TableInstance) => any[]; + autoResetRowState?: boolean | undefined; + }>; + + export interface UseRowStateState { + rowState: Record }>; + } + + export interface UseRowStateInstanceProps { + setRowState: (rowPath: string[], updater: UseRowUpdater) => void; + setCellState: ( + rowPath: string[], + columnId: IdType, + updater: UseRowUpdater, + ) => void; + } + + export interface UseRowStateRowProps { + state: UseRowStateLocalState; + setState: (updater: UseRowUpdater) => void; + } + + export interface UseRowStateCellProps { + state: UseRowStateLocalState; + setState: (updater: UseRowUpdater) => void; + } + + export type UseRowUpdater = T | ((prev: T) => T); + export type UseRowStateLocalState = Record< + IdType, + T + >; + //#endregion + + //#region useSortBy + export function useSortBy(hooks: Hooks): void; + + export namespace useSortBy { + const pluginName = 'useSortBy'; + } + + export interface TableSortByToggleProps { + title?: string | undefined; + style?: CSSProperties | undefined; + onClick?: ((e: MouseEvent) => void) | undefined; + } + + export type UseSortByOptions = Partial<{ + manualSortBy: boolean; + disableSortBy: boolean; + defaultCanSort: boolean; + disableMultiSort: boolean; + isMultiSortEvent: (e: MouseEvent) => boolean; + maxMultiSortColCount: number; + disableSortRemove: boolean; + disabledMultiRemove: boolean; + orderByFn: ( + rows: Array>, + sortFns: Array>, + directions: boolean[], + ) => Array>; + sortTypes: Record>; + autoResetSortBy?: boolean | undefined; + }>; + + export interface UseSortByHooks { + getSortByToggleProps: Array>; + } + + export interface UseSortByState { + sortBy: Array>; + } + + export type UseSortByColumnOptions = Partial<{ + defaultCanSort: boolean; + disableSortBy: boolean; + sortDescFirst: boolean; + sortInverted: boolean; + sortType: SortByFn | DefaultSortTypes | string; + }>; + + export interface UseSortByInstanceProps { + rows: Array>; + preSortedRows: Array>; + setSortBy: (sortBy: Array>) => void; + toggleSortBy: ( + columnId: IdType, + descending?: boolean, + isMulti?: boolean, + ) => void; + } + + export interface UseSortByColumnProps { + canSort: boolean; + toggleSortBy: (descending?: boolean, multi?: boolean) => void; + getSortByToggleProps: ( + props?: Partial, + ) => TableSortByToggleProps; + clearSortBy: () => void; + isSorted: boolean; + sortedIndex: number; + isSortedDesc: boolean | undefined; + } + + export type OrderByFn = ( + rowA: Row, + rowB: Row, + ) => number; + export type SortByFn = ( + rowA: Row, + rowB: Row, + columnId: IdType, + desc?: boolean, + ) => number; + + export type DefaultSortTypes = + | 'alphanumeric' + | 'datetime' + | 'basic' + | 'string' + | 'number'; + + export interface SortingRule { + id: IdType; + desc?: boolean | undefined; + } + + //#endregion + + // Additional API + export const actions: Record; + export type ActionType = { type: string } & Record; + export const defaultColumn: Partial & Record; + + // Helpers + export type StringKey = Extract; + export type IdType = StringKey | string; + export type CellValue = V; + + export type Renderer = + | ComponentType + | ReactElement + | string + | number + | ReactFragment; + + export interface PluginHook { + (hooks: Hooks): void; + pluginName?: string | undefined; + } + + export type TableDispatch = (action: A) => void; + + // utils + export function defaultOrderByFn( + arr: Array>, + funcs: Array>, + dirs: boolean[], + ): Array>; + + export function defaultGroupByFn( + rows: Array>, + columnId: IdType, + ): Record>>; + + export function makePropGetter(hooks: Hooks, ...meta: any[]): any; + + export function reduceHooks( + hooks: Hooks, + initial: T, + ...args: any[] + ): T; + + export function loopHooks(hooks: Hooks, ...args: any[]): void; + + export function ensurePluginOrder( + plugins: Array>, + befores: string[], + pluginName: string, + ): void; + + export function functionalUpdate( + updater: any, + old: Partial>, + ): Partial>; + + export function useGetLatest(obj: T): () => T; + + export function safeUseLayoutEffect( + effect: EffectCallback, + deps?: DependencyList, + ): void; + + export function useMountedLayoutEffect( + effect: EffectCallback, + deps?: DependencyList, + ): void; + + export function useAsyncDebounce any>( + defaultFn: F, + defaultWait?: number, + ): F; + + export function makeRenderer( + instance: TableInstance, + column: ColumnInstance, + meta?: any, + ): ReactElement; +} diff --git a/packages/itwinui-react/src/types/react-table/package.json b/packages/itwinui-react/src/types/react-table/package.json new file mode 100644 index 00000000000..c4da7573625 --- /dev/null +++ b/packages/itwinui-react/src/types/react-table/package.json @@ -0,0 +1,42 @@ +{ + "name": "@types/react-table", + "version": "7.7.12", + "description": "TypeScript definitions for react-table", + "homepage": "https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-table", + "license": "MIT", + "contributors": [ + { + "name": "Guy Gascoigne-Piggford", + "url": "https://github.com/ggascoigne", + "githubUsername": "ggascoigne" + }, + { + "name": "Michael Stramel", + "url": "https://github.com/stramel", + "githubUsername": "stramel" + }, + { + "name": "Rohit Garg", + "url": "https://github.com/gargroh", + "githubUsername": "gargroh" + }, + { + "name": "Jason Clark", + "url": "https://github.com/riceboyler", + "githubUsername": "riceboyler" + } + ], + "main": "", + "types": "index.d.ts", + "repository": { + "type": "git", + "url": "https://github.com/DefinitelyTyped/DefinitelyTyped.git", + "directory": "types/react-table" + }, + "scripts": {}, + "dependencies": { + "@types/react": "*" + }, + "typesPublisherContentHash": "28ce2a560b81f85701c43e70d16f022ecafc569457187c2066e6965ede177399", + "typeScriptVersion": "3.9" +} \ No newline at end of file From 179330f8f5405c861ee07b665764d901748d91ee Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Mon, 21 Aug 2023 11:04:03 -0400 Subject: [PATCH 011/196] WIP --- .../src/types/base-react-table-config.d.ts | 928 ++++++++++++++++++ .../src/types/react-table-config.ts | 2 + 2 files changed, 930 insertions(+) create mode 100644 packages/itwinui-react/src/types/base-react-table-config.d.ts diff --git a/packages/itwinui-react/src/types/base-react-table-config.d.ts b/packages/itwinui-react/src/types/base-react-table-config.d.ts new file mode 100644 index 00000000000..b1871a4734c --- /dev/null +++ b/packages/itwinui-react/src/types/base-react-table-config.d.ts @@ -0,0 +1,928 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Bentley Systems, Incorporated. All rights reserved. + * See LICENSE.md in the project root for license terms and full copyright notice. + *--------------------------------------------------------------------------------------------*/ +// // Type definitions for react-table 7.7 +// // Project: https://github.com/tannerlinsley/react-table +// // Definitions by: Guy Gascoigne-Piggford , +// // Michael Stramel +// // Rohit Garg +// // Jason Clark +// // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +// // TypeScript Version: 3.5 +// // reflects react-table@7.7.0 + +// // tslint:disable:no-empty-interface +// // no-empty-interface is disabled to allow easy extension with declaration merging + +// // tslint:disable:no-unnecessary-generics +// // no-unnecessary-generics is disabled because many of these definitions are either used in a generic +// // context or the signatures are required to match for declaration merging + +// // The changelog for the important changes is located in the Readme.md + +// import { +// ChangeEvent, +// ComponentType, +// CSSProperties, +// DependencyList, +// EffectCallback, +// MouseEvent, +// ReactElement, +// ReactFragment, +// ReactNode, +// } from 'react'; + +// export {}; + +// /** +// * The empty definitions of below provides a base definition for the parts used by useTable, that can then be extended in the users code. +// * +// * @example +// * export interface TableOptions +// * extends +// * UseExpandedOptions, +// * UseFiltersOptions {} +// * see https://gist.github.com/ggascoigne/646e14c9d54258e40588a13aabf0102d for more details +// */ +// export interface TableOptions extends UseTableOptions {} + +// export interface TableInstance +// extends Omit, 'columns' | 'pageCount'>, +// UseTableInstanceProps {} + +// export interface TableState { +// hiddenColumns?: Array> | undefined; +// } + +// export interface Hooks extends UseTableHooks {} + +// export interface Cell extends UseTableCellProps {} + +// export interface ColumnInterface extends UseTableColumnOptions {} + +// export interface ColumnInterfaceBasedOnValue { +// Cell?: Renderer> | undefined; +// } + +// export interface ColumnGroupInterface { +// columns: Array>; +// } + +// export type ColumnGroup = +// & ColumnInterface +// & ColumnGroupInterface +// & ( +// | { Header: string; } +// | ({ id: IdType; } & { +// Header: Renderer>; +// }) +// ) +// // Not used, but needed for backwards compatibility +// & { accessor?: Accessor | undefined; }; + +// type ValueOf = T[keyof T]; + +// // The accessors like `foo.bar` are not supported, use functions instead +// export type ColumnWithStrictAccessor = +// & ColumnInterface +// & ValueOf<{ +// [K in keyof D]: { +// accessor: K; +// } & ColumnInterfaceBasedOnValue; +// }>; + +// export type ColumnWithLooseAccessor = +// & ColumnInterface +// & ColumnInterfaceBasedOnValue +// & ( +// | { Header: string } +// | { id: IdType } +// | { accessor: keyof D extends never ? IdType : never } +// ) +// & { accessor?: (keyof D extends never ? IdType | Accessor : Accessor) | undefined; }; + +// export type Column = +// | ColumnGroup +// | ColumnWithLooseAccessor +// | ColumnWithStrictAccessor; + +// export interface ColumnInstance +// extends Omit, 'id'>, +// ColumnInterfaceBasedOnValue, +// UseTableColumnProps {} + +// export interface HeaderGroup extends ColumnInstance, UseTableHeaderGroupProps {} + +// export interface Row extends UseTableRowProps {} + +// export interface TableCommonProps { +// style?: CSSProperties | undefined; +// className?: string | undefined; +// role?: string | undefined; +// } + +// export interface TableProps extends TableCommonProps {} + +// export interface TableBodyProps extends TableCommonProps {} + +// export interface TableKeyedProps extends TableCommonProps { +// key: React.Key; +// } + +// export interface TableHeaderGroupProps extends TableKeyedProps {} + +// export interface TableFooterGroupProps extends TableKeyedProps {} + +// export interface TableHeaderProps extends TableKeyedProps {} + +// export interface TableFooterProps extends TableKeyedProps {} + +// export interface TableRowProps extends TableKeyedProps {} + +// export interface TableCellProps extends TableKeyedProps {} + +// export interface TableToggleCommonProps extends TableCommonProps { +// onChange?: ((e: ChangeEvent) => void) | undefined; +// checked?: boolean | undefined; +// title?: string | undefined; +// indeterminate?: boolean | undefined; +// } + +// export interface MetaBase { +// instance: TableInstance; +// userProps: any; +// } + +// // inspired by ExtendState in https://github.com/reduxjs/redux/blob/master/src/types/store.ts +// export type Meta> = [Extension] extends [never] +// ? M +// : M & Extension; + +// //#region useTable +// export function useTable( +// options: TableOptions, +// ...plugins: Array> +// ): TableInstance; + +// /** +// * NOTE: To use custom options, use "Interface Merging" to add the custom options +// */ +// export type UseTableOptions = { +// columns: ReadonlyArray>; +// data: readonly D[]; +// } & Partial<{ +// initialState: Partial>; +// stateReducer: (newState: TableState, action: ActionType, previousState: TableState, instance?: TableInstance) => TableState; +// useControlledState: (state: TableState, meta: Meta) => TableState; +// defaultColumn: Partial>; +// getSubRows: (originalRow: D, relativeIndex: number) => D[]; +// getRowId: (originalRow: D, relativeIndex: number, parent?: Row) => string; +// autoResetHiddenColumns: boolean; +// }>; + +// export type PropGetter> = +// | ((props: P, meta: Meta) => P | P[]) +// | P +// | P[]; + +// export type TablePropGetter = PropGetter; + +// export type TableBodyPropGetter = PropGetter; + +// export type HeaderPropGetter = PropGetter }>; + +// export type FooterGroupPropGetter = PropGetter }>; + +// export type HeaderGroupPropGetter = PropGetter }>; + +// export type FooterPropGetter = PropGetter }>; + +// export type RowPropGetter = PropGetter }>; + +// export type CellPropGetter = PropGetter }>; + +// export interface ReducerTableState extends TableState, Record {} + +// export interface UseTableHooks extends Record { +// useOptions: Array<(options: TableOptions, args: TableOptions) => TableOptions>; +// stateReducers: Array< +// ( +// newState: TableState, +// action: ActionType, +// previousState?: TableState, +// instance?: TableInstance, +// ) => ReducerTableState | undefined +// >; +// columns: Array<(columns: Array>, meta: Meta) => Array>>; +// columnsDeps: Array<(deps: any[], meta: Meta) => any[]>; +// allColumns: Array<(allColumns: Array>, meta: Meta) => Array>>; +// allColumnsDeps: Array<(deps: any[], meta: Meta) => any[]>; +// visibleColumns: Array<(allColumns: Array>, meta: Meta) => Array>>; +// visibleColumnsDeps: Array<(deps: any[], meta: Meta) => any[]>; +// headerGroups: Array<(allColumns: Array>, meta: Meta) => Array>>; +// headerGroupsDeps: Array<(deps: any[], meta: Meta) => any[]>; +// useInstanceBeforeDimensions: Array<(instance: TableInstance) => void>; +// useInstance: Array<(instance: TableInstance) => void>; +// prepareRow: Array<(row: Row, meta: Meta) => void>; +// useControlledState: Array<(state: TableState, meta: Meta) => TableState>; + +// getTableProps: Array>; +// getTableBodyProps: Array>; +// getHeaderGroupProps: Array>; +// getFooterGroupProps: Array>; +// getHeaderProps: Array>; +// getFooterProps: Array>; +// getRowProps: Array>; +// getCellProps: Array>; +// useFinalInstance: Array<(instance: TableInstance) => void>; +// } + +// export interface UseTableColumnOptions { +// id?: IdType | undefined; +// Header?: Renderer> | undefined; +// Footer?: Renderer> | undefined; +// width?: number | string | undefined; +// minWidth?: number | undefined; +// maxWidth?: number | undefined; +// } + +// type UpdateHiddenColumns = (oldHidden: Array>) => Array>; + +// export interface TableToggleHideAllColumnProps extends TableToggleCommonProps {} + +// export interface UseTableInstanceProps { +// state: TableState; +// plugins: Array>; +// dispatch: TableDispatch; +// columns: Array>; +// allColumns: Array>; +// visibleColumns: Array>; +// headerGroups: Array>; +// footerGroups: Array>; +// headers: Array>; +// flatHeaders: Array>; +// rows: Array>; +// rowsById: Record>; +// getTableProps: (propGetter?: TablePropGetter) => TableProps; +// getTableBodyProps: (propGetter?: TableBodyPropGetter) => TableBodyProps; +// prepareRow: (row: Row) => void; +// flatRows: Array>; +// totalColumnsWidth: number; +// allColumnsHidden: boolean; +// toggleHideColumn: (columnId: IdType, value?: boolean) => void; +// setHiddenColumns: (param: Array> | UpdateHiddenColumns) => void; +// toggleHideAllColumns: (value?: boolean) => void; +// getToggleHideAllColumnsProps: (props?: Partial) => TableToggleHideAllColumnProps; +// getHooks: () => Hooks; +// } + +// export interface UseTableHeaderGroupProps { +// headers: Array>; +// getHeaderGroupProps: (propGetter?: HeaderGroupPropGetter) => TableHeaderProps; +// getFooterGroupProps: (propGetter?: FooterGroupPropGetter) => TableFooterProps; +// totalHeaderCount: number; // not documented +// } + +// export interface UseTableColumnProps { +// id: IdType; +// columns?: Array> | undefined; +// isVisible: boolean; +// render: (type: 'Header' | 'Footer' | string, props?: object) => ReactNode; +// totalLeft: number; +// totalWidth: number; +// getHeaderProps: (propGetter?: HeaderPropGetter) => TableHeaderProps; +// getFooterProps: (propGetter?: FooterPropGetter) => TableFooterProps; +// toggleHidden: (value?: boolean) => void; +// parent?: ColumnInstance | undefined; // not documented +// getToggleHiddenProps: (userProps?: any) => any; +// depth: number; // not documented +// placeholderOf?: ColumnInstance | undefined; +// } + +// export interface UseTableRowProps { +// cells: Array>; +// allCells: Array>; +// values: Record, CellValue>; +// getRowProps: (propGetter?: RowPropGetter) => TableRowProps; +// index: number; +// original: D; +// id: string; +// subRows: Array>; +// } + +// export interface UseTableCellProps { +// column: ColumnInstance; +// row: Row; +// value: CellValue; +// getCellProps: (propGetter?: CellPropGetter) => TableCellProps; +// render: (type: 'Cell' | string, userProps?: object) => ReactNode; +// } + +// export type HeaderProps = TableInstance & { +// column: ColumnInstance; +// }; + +// export type FooterProps = TableInstance & { +// column: ColumnInstance; +// }; + +// export type CellProps = TableInstance & { +// column: ColumnInstance; +// row: Row; +// cell: Cell; +// value: CellValue; +// }; + +// export type Accessor = ( +// originalRow: D, +// index: number, +// sub: { +// subRows: D[]; +// depth: number; +// data: D[]; +// }, +// ) => CellValue; + +// //#endregion + +// // Plugins + +// //#region useAbsoluteLayout +// export function useAbsoluteLayout(hooks: Hooks): void; + +// export namespace useAbsoluteLayout { +// const pluginName = 'useAbsoluteLayout'; +// } +// //#endregion + +// //#region useBlockLayout +// export function useBlockLayout(hooks: Hooks): void; + +// export namespace useBlockLayout { +// const pluginName = 'useBlockLayout'; +// } +// //#endregion + +// //#region useColumnOrder +// export function useColumnOrder(hooks: Hooks): void; + +// export namespace useColumnOrder { +// const pluginName = 'useColumnOrder'; +// } + +// export interface UseColumnOrderState { +// columnOrder: Array>; +// } + +// export interface UseColumnOrderInstanceProps { +// setColumnOrder: (updater: ((columnOrder: Array>) => Array>) | Array>) => void; +// } + +// //#endregion + +// //#region useExpanded +// export function useExpanded(hooks: Hooks): void; + +// export namespace useExpanded { +// const pluginName = 'useExpanded'; +// } + +// export interface TableExpandedToggleProps extends TableKeyedProps {} + +// export type UseExpandedOptions = Partial<{ +// manualExpandedKey: IdType; +// paginateExpandedRows: boolean; +// expandSubRows: boolean; +// autoResetExpanded?: boolean | undefined; +// }>; + +// export interface UseExpandedHooks { +// getToggleRowsExpandedProps: Array>; +// getToggleAllRowsExpandedProps: Array>; +// } + +// export interface UseExpandedState { +// expanded: Record, boolean>; +// } + +// export interface UseExpandedInstanceProps { +// preExpandedRows: Array>; +// expandedRows: Array>; +// rows: Array>; +// expandedDepth: number; +// isAllRowsExpanded: boolean; +// toggleRowExpanded: (id: Array>, value?: boolean) => void; +// toggleAllRowsExpanded: (value?: boolean) => void; +// } + +// export interface UseExpandedRowProps { +// isExpanded: boolean; +// canExpand: boolean; +// subRows: Array>; +// toggleRowExpanded: (value?: boolean) => void; +// getToggleRowExpandedProps: (props?: Partial) => TableExpandedToggleProps; +// depth: number; +// } + +// //#endregion + +// //#region useFilters +// export function useFilters(hooks: Hooks): void; + +// export namespace useFilters { +// const pluginName = 'useFilters'; +// } + +// export type UseFiltersOptions = Partial<{ +// manualFilters: boolean; +// disableFilters: boolean; +// defaultCanFilter: boolean; +// filterTypes: FilterTypes; +// autoResetFilters?: boolean | undefined; +// }>; + +// export interface UseFiltersState { +// filters: Filters; +// } + +// export type UseFiltersColumnOptions = Partial<{ +// Filter: Renderer>; +// disableFilters: boolean; +// defaultCanFilter: boolean; +// filter: FilterType | DefaultFilterTypes | string; +// }>; + +// export interface UseFiltersInstanceProps { +// preFilteredRows: Array>; +// preFilteredFlatRows: Array>; +// preFilteredRowsById: Record>; +// filteredRows: Array>; +// filteredFlatRows: Array>; +// filteredRowsById: Record>; +// rows: Array>; +// flatRows: Array>; +// rowsById: Record>; +// setFilter: (columnId: IdType, updater: ((filterValue: FilterValue) => FilterValue) | FilterValue) => void; +// setAllFilters: (updater: Filters | ((filters: Filters) => Filters)) => void; +// } + +// export interface UseFiltersColumnProps { +// canFilter: boolean; +// setFilter: (updater: ((filterValue: FilterValue) => FilterValue) | FilterValue) => void; +// filterValue: FilterValue; +// preFilteredRows: Array>; +// filteredRows: Array>; +// } + +// export type FilterProps = HeaderProps; +// export type FilterValue = any; +// export type Filters = Array<{ id: IdType; value: FilterValue }>; +// export type FilterTypes = Record>; + +// export type DefaultFilterTypes = +// | 'text' +// | 'exactText' +// | 'exactTextCase' +// | 'includes' +// | 'includesAll' +// | 'exact' +// | 'equals' +// | 'between'; + +// export interface FilterType { +// (rows: Array>, columnIds: Array>, filterValue: FilterValue): Array>; + +// autoRemove?: ((filterValue: FilterValue) => boolean) | undefined; +// } + +// //#endregion + +// //#region useFlexLayout +// export function useFlexLayout(hooks: Hooks): void; + +// export namespace useFlexLayout { +// const pluginName = 'useFlexLayout'; +// } +// //#endregion + +// //#region useGridLayout +// export function useGridLayout(hooks: Hooks): void; + +// export namespace useGridLayout { +// const pluginName = 'useGridLayout'; +// } +// //#endregion + +// //#region useGlobalFilter +// export function useGlobalFilter(hooks: Hooks): void; + +// export namespace useGlobalFilter { +// const pluginName = 'useGlobalFilter'; +// } + +// export type UseGlobalFiltersOptions = Partial<{ +// globalFilter: ((rows: Array>, columnIds: Array>, filterValue: any) => Array>) | string; +// manualGlobalFilter: boolean; +// filterTypes: FilterTypes; +// autoResetGlobalFilter?: boolean | undefined; +// disableGlobalFilter?: boolean | undefined; +// }>; + +// export interface UseGlobalFiltersState { +// globalFilter: any; +// } + +// export type UseGlobalFiltersColumnOptions = Partial<{ +// disableGlobalFilter?: boolean | undefined; +// }>; + +// export interface UseGlobalFiltersInstanceProps { +// preGlobalFilteredRows: Array>; +// preGlobalFilteredFlatRows: Array>; +// preGlobalFilteredRowsById: Record>; +// globalFilteredRows: Array>; +// globalFilteredFlatRows: Array>; +// globalFilteredRowsById: Record>; +// rows: Array>; +// flatRows: Array>; +// rowsById: Record>; +// setGlobalFilter: (filterValue: FilterValue) => void; +// } + +// //#endregion + +// //#region useGroupBy +// export function useGroupBy(hooks: Hooks): void; + +// export namespace useGroupBy { +// const pluginName = 'useGroupBy'; +// } + +// export interface TableGroupByToggleProps { +// title?: string | undefined; +// style?: CSSProperties | undefined; +// onClick?: ((e: MouseEvent) => void) | undefined; +// } + +// export type UseGroupByOptions = Partial<{ +// manualGroupBy: boolean; +// disableGroupBy: boolean; +// defaultCanGroupBy: boolean; +// aggregations: Record>; +// groupByFn: (rows: Array>, columnId: IdType) => Record>>; +// autoResetGroupBy?: boolean | undefined; +// }>; + +// export interface UseGroupByHooks { +// getGroupByToggleProps: Array>; +// } + +// export interface UseGroupByState { +// groupBy: Array>; +// } + +// export type UseGroupByColumnOptions = Partial<{ +// aggregate: Aggregator; +// Aggregated: Renderer>; +// disableGroupBy: boolean; +// defaultCanGroupBy: boolean; +// }>; + +// export interface UseGroupByInstanceProps { +// preGroupedRows: Array>; +// preGroupedFlatRows: Array>; +// preGroupedRowsById: Record>; +// groupedRows: Array>; +// groupedFlatRows: Array>; +// groupedRowsById: Record>; +// onlyGroupedFlatRows: Array>; +// onlyGroupedRowsById: Record>; +// nonGroupedFlatRows: Array>; +// nonGroupedRowsById: Record>; +// rows: Array>; +// flatRows: Array>; +// rowsById: Record>; +// toggleGroupBy: (columnId: IdType, value?: boolean) => void; +// } + +// export interface UseGroupByColumnProps { +// canGroupBy: boolean; +// isGrouped: boolean; +// groupedIndex: number; +// toggleGroupBy: () => void; +// getGroupByToggleProps: (props?: Partial) => TableGroupByToggleProps; +// } + +// export interface UseGroupByRowProps { +// isGrouped: boolean; +// groupByID: IdType; +// groupByVal: string; +// values: Record, AggregatedValue>; +// subRows: Array>; +// leafRows: Array>; +// depth: number; +// id: string; +// index: number; +// } + +// export interface UseGroupByCellProps { +// isGrouped: boolean; +// isPlaceholder: boolean; +// isAggregated: boolean; +// } + +// export type DefaultAggregators = 'sum' | 'average' | 'median' | 'uniqueCount' | 'count'; + +// export type AggregatorFn = ( +// columnValues: CellValue[], +// rows: Array>, +// isAggregated: boolean, +// ) => AggregatedValue; +// export type Aggregator = AggregatorFn | DefaultAggregators | string; +// export type AggregatedValue = any; +// //#endregion + +// //#region usePagination +// export function usePagination(hooks: Hooks): void; + +// export namespace usePagination { +// const pluginName = 'usePagination'; +// } + +// export type UsePaginationOptions = Partial<{ +// pageCount: number; +// manualPagination: boolean; +// autoResetPage?: boolean | undefined; +// paginateExpandedRows: boolean; +// }>; + +// export interface UsePaginationState { +// pageSize: number; +// pageIndex: number; +// } + +// export interface UsePaginationInstanceProps { +// page: Array>; +// pageCount: number; +// pageOptions: number[]; +// canPreviousPage: boolean; +// canNextPage: boolean; +// gotoPage: (updater: ((pageIndex: number) => number) | number) => void; +// previousPage: () => void; +// nextPage: () => void; +// setPageSize: (pageSize: number) => void; +// } + +// //#endregion + +// //#region useResizeColumns +// export function useResizeColumns(hooks: Hooks): void; + +// export namespace useResizeColumns { +// const pluginName = 'useResizeColumns'; +// } + +// export interface UseResizeColumnsOptions { +// disableResizing?: boolean | undefined; +// autoResetResize?: boolean | undefined; +// } + +// export interface UseResizeColumnsState { +// columnResizing: { +// startX?: number | undefined; +// columnWidth: number; +// headerIdWidths: Record; +// columnWidths: any; +// isResizingColumn?: string | undefined; +// }; +// } + +// export interface UseResizeColumnsColumnOptions { +// disableResizing?: boolean | undefined; +// } + +// export interface TableResizerProps {} + +// export interface UseResizeColumnsColumnProps { +// getResizerProps: (props?: Partial) => TableResizerProps; +// canResize: boolean; +// isResizing: boolean; +// } + +// //#endregion + +// //#region useRowSelect +// export function useRowSelect(hooks: Hooks): void; + +// export namespace useRowSelect { +// const pluginName = 'useRowSelect'; +// } + +// export interface TableToggleAllRowsSelectedProps extends TableToggleCommonProps {} + +// export interface TableToggleRowsSelectedProps extends TableToggleCommonProps {} + +// export type UseRowSelectOptions = Partial<{ +// manualRowSelectedKey: IdType; +// autoResetSelectedRows: boolean; +// selectSubRows: boolean; +// }>; + +// export interface UseRowSelectHooks { +// getToggleRowSelectedProps: Array>; +// getToggleAllRowsSelectedProps: Array>; +// getToggleAllPageRowsSelectedProps: Array>; +// } + +// export interface UseRowSelectState { +// selectedRowIds: Record, boolean>; +// } + +// export interface UseRowSelectInstanceProps { +// toggleRowSelected: (rowId: IdType, set?: boolean) => void; +// toggleAllRowsSelected: (value?: boolean) => void; +// getToggleAllRowsSelectedProps: ( +// props?: Partial, +// ) => TableToggleAllRowsSelectedProps; +// getToggleAllPageRowsSelectedProps: ( +// props?: Partial, +// ) => TableToggleAllRowsSelectedProps; +// isAllRowsSelected: boolean; +// selectedFlatRows: Array>; +// } + +// export interface UseRowSelectRowProps { +// isSelected: boolean; +// isSomeSelected: boolean; +// toggleRowSelected: (set?: boolean) => void; +// getToggleRowSelectedProps: (props?: Partial) => TableToggleRowsSelectedProps; +// } + +// //#endregion + +// //#region useRowState +// export function useRowState(hooks: Hooks): void; + +// export namespace useRowState { +// const pluginName = 'useRowState'; +// } + +// export type UseRowStateOptions = Partial<{ +// initialRowStateAccessor: (row: Row) => UseRowStateLocalState; +// getResetRowStateDeps: (instance: TableInstance) => any[]; +// autoResetRowState?: boolean | undefined; +// }>; + +// export interface UseRowStateState { +// rowState: Record }>; +// } + +// export interface UseRowStateInstanceProps { +// setRowState: (rowPath: string[], updater: UseRowUpdater) => void; +// setCellState: (rowPath: string[], columnId: IdType, updater: UseRowUpdater) => void; +// } + +// export interface UseRowStateRowProps { +// state: UseRowStateLocalState; +// setState: (updater: UseRowUpdater) => void; +// } + +// export interface UseRowStateCellProps { +// state: UseRowStateLocalState; +// setState: (updater: UseRowUpdater) => void; +// } + +// export type UseRowUpdater = T | ((prev: T) => T); +// export type UseRowStateLocalState = Record, T>; +// //#endregion + +// //#region useSortBy +// export function useSortBy(hooks: Hooks): void; + +// export namespace useSortBy { +// const pluginName = 'useSortBy'; +// } + +// export interface TableSortByToggleProps { +// title?: string | undefined; +// style?: CSSProperties | undefined; +// onClick?: ((e: MouseEvent) => void)| undefined; +// } + +// export type UseSortByOptions = Partial<{ +// manualSortBy: boolean; +// disableSortBy: boolean; +// defaultCanSort: boolean; +// disableMultiSort: boolean; +// isMultiSortEvent: (e: MouseEvent) => boolean; +// maxMultiSortColCount: number; +// disableSortRemove: boolean; +// disabledMultiRemove: boolean; +// orderByFn: (rows: Array>, sortFns: Array>, directions: boolean[]) => Array>; +// sortTypes: Record>; +// autoResetSortBy?: boolean | undefined; +// }>; + +// export interface UseSortByHooks { +// getSortByToggleProps: Array>; +// } + +// export interface UseSortByState { +// sortBy: Array>; +// } + +// export type UseSortByColumnOptions = Partial<{ +// defaultCanSort: boolean; +// disableSortBy: boolean; +// sortDescFirst: boolean; +// sortInverted: boolean; +// sortType: SortByFn | DefaultSortTypes | string; +// }>; + +// export interface UseSortByInstanceProps { +// rows: Array>; +// preSortedRows: Array>; +// setSortBy: (sortBy: Array>) => void; +// toggleSortBy: (columnId: IdType, descending?: boolean, isMulti?: boolean) => void; +// } + +// export interface UseSortByColumnProps { +// canSort: boolean; +// toggleSortBy: (descending?: boolean, multi?: boolean) => void; +// getSortByToggleProps: (props?: Partial) => TableSortByToggleProps; +// clearSortBy: () => void; +// isSorted: boolean; +// sortedIndex: number; +// isSortedDesc: boolean | undefined; +// } + +// export type OrderByFn = (rowA: Row, rowB: Row) => number; +// export type SortByFn = (rowA: Row, rowB: Row, columnId: IdType, desc?: boolean) => number; + +// export type DefaultSortTypes = 'alphanumeric' | 'datetime' | 'basic' | 'string' | 'number'; + +// export interface SortingRule { +// id: IdType; +// desc?: boolean | undefined; +// } + +// //#endregion + +// // Additional API +// export const actions: Record; +// export type ActionType = { type: string } & Record; +// export const defaultColumn: Partial & Record; + +// // Helpers +// export type StringKey = Extract; +// export type IdType = StringKey | string; +// export type CellValue = V; + +// export type Renderer = ComponentType | ReactElement | string | number | ReactFragment; + +// export interface PluginHook { +// (hooks: Hooks): void; +// pluginName?: string | undefined; +// } + +// export type TableDispatch = (action: A) => void; + +// // utils +// export function defaultOrderByFn( +// arr: Array>, +// funcs: Array>, +// dirs: boolean[], +// ): Array>; + +// export function defaultGroupByFn( +// rows: Array>, +// columnId: IdType, +// ): Record>>; + +// export function makePropGetter(hooks: Hooks, ...meta: any[]): any; + +// export function reduceHooks(hooks: Hooks, initial: T, ...args: any[]): T; + +// export function loopHooks(hooks: Hooks, ...args: any[]): void; + +// export function ensurePluginOrder( +// plugins: Array>, +// befores: string[], +// pluginName: string, +// ): void; + +// export function functionalUpdate( +// updater: any, +// old: Partial>, +// ): Partial>; + +// export function useGetLatest(obj: T): () => T; + +// export function safeUseLayoutEffect(effect: EffectCallback, deps?: DependencyList): void; + +// export function useMountedLayoutEffect(effect: EffectCallback, deps?: DependencyList): void; + +// export function useAsyncDebounce any>(defaultFn: F, defaultWait?: number): F; + +// export function makeRenderer(instance: TableInstance, column: ColumnInstance, meta?: any): ReactElement; diff --git a/packages/itwinui-react/src/types/react-table-config.ts b/packages/itwinui-react/src/types/react-table-config.ts index d97d4786334..b546161b0ac 100644 --- a/packages/itwinui-react/src/types/react-table-config.ts +++ b/packages/itwinui-react/src/types/react-table-config.ts @@ -60,6 +60,8 @@ import type { import type { TableFilterProps } from '../core/Table/filters/index.js'; declare module 'react-table' { + ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// + export type FieldType = 'text' | 'number' | 'date' | string; export type CellRendererProps = { From 482449b6b11192832e7ccdd29fb29fd6a9b7e31b Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Mon, 21 Aug 2023 11:04:17 -0400 Subject: [PATCH 012/196] WIP --- .../src/types/react-table/index.d.ts | 70 +++++++++---------- 1 file changed, 33 insertions(+), 37 deletions(-) diff --git a/packages/itwinui-react/src/types/react-table/index.d.ts b/packages/itwinui-react/src/types/react-table/index.d.ts index 1ab8a65ddbd..3f5d9517359 100644 --- a/packages/itwinui-react/src/types/react-table/index.d.ts +++ b/packages/itwinui-react/src/types/react-table/index.d.ts @@ -48,21 +48,21 @@ declare module 'react-table' { */ export type TableOptions = UseTableOptions; - export interface TableInstance + export interface TableInstance extends Omit, 'columns' | 'pageCount'>, UseTableInstanceProps {} - export interface TableState { + export interface TableState { hiddenColumns?: Array> | undefined; } - export type Hooks = UseTableHooks; + export type Hooks = UseTableHooks; - export type Cell = UseTableCellProps; + export type Cell = UseTableCellProps; - export type ColumnInterface = UseTableColumnOptions; + export type ColumnInterface = UseTableColumnOptions; - export interface ColumnInterfaceBasedOnValue { + export interface ColumnInterfaceBasedOnValue { Cell?: Renderer> | undefined; } @@ -70,7 +70,7 @@ declare module 'react-table' { columns: Array>; } - export type ColumnGroup = ColumnInterface & + export type ColumnGroup = ColumnInterface & ColumnGroupInterface & ( | { Header: string } @@ -82,42 +82,40 @@ declare module 'react-table' { type ValueOf = T[keyof T]; // The accessors like `foo.bar` are not supported, use functions instead - export type ColumnWithStrictAccessor = - ColumnInterface & - ValueOf<{ - [K in keyof D]: { - accessor: K; - } & ColumnInterfaceBasedOnValue; - }>; - - export type ColumnWithLooseAccessor = - ColumnInterface & - ColumnInterfaceBasedOnValue & - ( - | { Header: string } - | { id: IdType } - | { accessor: keyof D extends never ? IdType : never } - ) & { - accessor?: - | (keyof D extends never ? IdType | Accessor : Accessor) - | undefined; - }; - - export type Column = + export type ColumnWithStrictAccessor = ColumnInterface & + ValueOf<{ + [K in keyof D]: { + accessor: K; + } & ColumnInterfaceBasedOnValue; + }>; + + export type ColumnWithLooseAccessor = ColumnInterface & + ColumnInterfaceBasedOnValue & + ( + | { Header: string } + | { id: IdType } + | { accessor: keyof D extends never ? IdType : never } + ) & { + accessor?: + | (keyof D extends never ? IdType | Accessor : Accessor) + | undefined; + }; + + export type Column = | ColumnGroup | ColumnWithLooseAccessor | ColumnWithStrictAccessor; - export interface ColumnInstance + export interface ColumnInstance extends Omit, 'id'>, ColumnInterfaceBasedOnValue, UseTableColumnProps {} - export interface HeaderGroup + export interface HeaderGroup extends ColumnInstance, UseTableHeaderGroupProps {} - export type Row = UseTableRowProps; + export type Row = UseTableRowProps; export interface TableCommonProps { style?: CSSProperties | undefined; @@ -165,7 +163,7 @@ declare module 'react-table' { : M & Extension; //#region useTable - export function useTable( + export function useTable( options: TableOptions, ...plugins: Array> ): TableInstance; @@ -420,9 +418,7 @@ declare module 'react-table' { // Plugins //#region useAbsoluteLayout - export function useAbsoluteLayout( - hooks: Hooks, - ): void; + export function useAbsoluteLayout(hooks: Hooks): void; export namespace useAbsoluteLayout { const pluginName = 'useAbsoluteLayout'; @@ -430,7 +426,7 @@ declare module 'react-table' { //#endregion //#region useBlockLayout - export function useBlockLayout(hooks: Hooks): void; + export function useBlockLayout(hooks: Hooks): void; export namespace useBlockLayout { const pluginName = 'useBlockLayout'; From 602e3574d0c7510eba45b60baab96657849942c6 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Mon, 21 Aug 2023 11:04:40 -0400 Subject: [PATCH 013/196] Temp allowing 1 warning in eslint --- packages/itwinui-react/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/itwinui-react/package.json b/packages/itwinui-react/package.json index b24a5fcdb8b..6b335cad88a 100644 --- a/packages/itwinui-react/package.json +++ b/packages/itwinui-react/package.json @@ -130,7 +130,7 @@ "node ../../scripts/copyrightLinter.js --fix" ], "*.{tsx,ts}": [ - "eslint --max-warnings=0 --fix" + "eslint --max-warnings=1 --fix" ] }, "prettier": "configs/prettier-config", From 26db866e3e685d60f1d35f7efc16b05a3fdf1d4f Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Tue, 22 Aug 2023 07:56:22 -0400 Subject: [PATCH 014/196] Added react-table (backup) before removing the dep --- react-table (backup)/LICENSE | 21 + react-table (backup)/README.md | 16 + react-table (backup)/index.d.ts | 1085 +++++++++++++++++++++++++++++ react-table (backup)/package.json | 42 ++ 4 files changed, 1164 insertions(+) create mode 100644 react-table (backup)/LICENSE create mode 100644 react-table (backup)/README.md create mode 100644 react-table (backup)/index.d.ts create mode 100644 react-table (backup)/package.json diff --git a/react-table (backup)/LICENSE b/react-table (backup)/LICENSE new file mode 100644 index 00000000000..9e841e7a26e --- /dev/null +++ b/react-table (backup)/LICENSE @@ -0,0 +1,21 @@ + MIT License + + Copyright (c) Microsoft Corporation. + + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: + + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. + + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE diff --git a/react-table (backup)/README.md b/react-table (backup)/README.md new file mode 100644 index 00000000000..5ca79e9d73d --- /dev/null +++ b/react-table (backup)/README.md @@ -0,0 +1,16 @@ +# Installation +> `npm install --save @types/react-table` + +# Summary +This package contains type definitions for react-table (https://github.com/tannerlinsley/react-table). + +# Details +Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-table. + +### Additional Details + * Last updated: Wed, 11 May 2022 16:01:37 GMT + * Dependencies: [@types/react](https://npmjs.com/package/@types/react) + * Global values: none + +# Credits +These definitions were written by [Guy Gascoigne-Piggford](https://github.com/ggascoigne), [Michael Stramel](https://github.com/stramel), [Rohit Garg](https://github.com/gargroh), and [Jason Clark](https://github.com/riceboyler). diff --git a/react-table (backup)/index.d.ts b/react-table (backup)/index.d.ts new file mode 100644 index 00000000000..14548fb6dbd --- /dev/null +++ b/react-table (backup)/index.d.ts @@ -0,0 +1,1085 @@ +// Type definitions for react-table 7.7 +// Project: https://github.com/tannerlinsley/react-table +// Definitions by: Guy Gascoigne-Piggford , +// Michael Stramel +// Rohit Garg +// Jason Clark +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +// TypeScript Version: 3.5 +// reflects react-table@7.7.0 + +// tslint:disable:no-empty-interface +// no-empty-interface is disabled to allow easy extension with declaration merging + +// tslint:disable:no-unnecessary-generics +// no-unnecessary-generics is disabled because many of these definitions are either used in a generic +// context or the signatures are required to match for declaration merging + +// The changelog for the important changes is located in the Readme.md + +import { + ChangeEvent, + ComponentType, + CSSProperties, + DependencyList, + EffectCallback, + MouseEvent, + ReactElement, + ReactFragment, + ReactNode, +} from 'react'; + +export {}; + +/** + * The empty definitions of below provides a base definition for the parts used by useTable, that can then be extended in the users code. + * + * @example + * export interface TableOptions + * extends + * UseExpandedOptions, + * UseFiltersOptions {} + * see https://gist.github.com/ggascoigne/646e14c9d54258e40588a13aabf0102d for more details + */ +export interface TableOptions extends UseTableOptions {} + +export interface TableInstance + extends Omit, 'columns' | 'pageCount'>, + UseTableInstanceProps {} + +export interface TableState { + hiddenColumns?: Array> | undefined; +} + +export interface Hooks extends UseTableHooks {} + +export interface Cell + extends UseTableCellProps {} + +export interface ColumnInterface + extends UseTableColumnOptions {} + +export interface ColumnInterfaceBasedOnValue { + Cell?: Renderer> | undefined; +} + +export interface ColumnGroupInterface { + columns: Array>; +} + +export type ColumnGroup = ColumnInterface & + ColumnGroupInterface & + ( + | { Header: string } + | ({ id: IdType } & { + Header: Renderer>; + }) + ) & // Not used, but needed for backwards compatibility + { accessor?: Accessor | undefined }; + +type ValueOf = T[keyof T]; + +// The accessors like `foo.bar` are not supported, use functions instead +export type ColumnWithStrictAccessor = + ColumnInterface & + ValueOf<{ + [K in keyof D]: { + accessor: K; + } & ColumnInterfaceBasedOnValue; + }>; + +export type ColumnWithLooseAccessor = + ColumnInterface & + ColumnInterfaceBasedOnValue & + ( + | { Header: string } + | { id: IdType } + | { accessor: keyof D extends never ? IdType : never } + ) & { + accessor?: + | (keyof D extends never ? IdType | Accessor : Accessor) + | undefined; + }; + +export type Column = + | ColumnGroup + | ColumnWithLooseAccessor + | ColumnWithStrictAccessor; + +export interface ColumnInstance + extends Omit, 'id'>, + ColumnInterfaceBasedOnValue, + UseTableColumnProps {} + +export interface HeaderGroup + extends ColumnInstance, + UseTableHeaderGroupProps {} + +export interface Row extends UseTableRowProps {} + +export interface TableCommonProps { + style?: CSSProperties | undefined; + className?: string | undefined; + role?: string | undefined; +} + +export interface TableProps extends TableCommonProps {} + +export interface TableBodyProps extends TableCommonProps {} + +export interface TableKeyedProps extends TableCommonProps { + key: React.Key; +} + +export interface TableHeaderGroupProps extends TableKeyedProps {} + +export interface TableFooterGroupProps extends TableKeyedProps {} + +export interface TableHeaderProps extends TableKeyedProps {} + +export interface TableFooterProps extends TableKeyedProps {} + +export interface TableRowProps extends TableKeyedProps {} + +export interface TableCellProps extends TableKeyedProps {} + +export interface TableToggleCommonProps extends TableCommonProps { + onChange?: ((e: ChangeEvent) => void) | undefined; + checked?: boolean | undefined; + title?: string | undefined; + indeterminate?: boolean | undefined; +} + +export interface MetaBase { + instance: TableInstance; + userProps: any; +} + +// inspired by ExtendState in https://github.com/reduxjs/redux/blob/master/src/types/store.ts +export type Meta> = [ + Extension, +] extends [never] + ? M + : M & Extension; + +//#region useTable +export function useTable( + options: TableOptions, + ...plugins: Array> +): TableInstance; + +/** + * NOTE: To use custom options, use "Interface Merging" to add the custom options + */ +export type UseTableOptions = { + columns: ReadonlyArray>; + data: readonly D[]; +} & Partial<{ + initialState: Partial>; + stateReducer: ( + newState: TableState, + action: ActionType, + previousState: TableState, + instance?: TableInstance, + ) => TableState; + useControlledState: (state: TableState, meta: Meta) => TableState; + defaultColumn: Partial>; + getSubRows: (originalRow: D, relativeIndex: number) => D[]; + getRowId: (originalRow: D, relativeIndex: number, parent?: Row) => string; + autoResetHiddenColumns: boolean; +}>; + +export type PropGetter< + D extends object, + Props, + T extends object = never, + P = Partial, +> = ((props: P, meta: Meta) => P | P[]) | P | P[]; + +export type TablePropGetter = PropGetter; + +export type TableBodyPropGetter = PropGetter< + D, + TableBodyProps +>; + +export type HeaderPropGetter = PropGetter< + D, + TableHeaderProps, + { column: HeaderGroup } +>; + +export type FooterGroupPropGetter = PropGetter< + D, + TableFooterGroupProps, + { column: HeaderGroup } +>; + +export type HeaderGroupPropGetter = PropGetter< + D, + TableHeaderGroupProps, + { column: HeaderGroup } +>; + +export type FooterPropGetter = PropGetter< + D, + TableFooterProps, + { column: HeaderGroup } +>; + +export type RowPropGetter = PropGetter< + D, + TableRowProps, + { row: Row } +>; + +export type CellPropGetter = PropGetter< + D, + TableCellProps, + { cell: Cell } +>; + +export interface ReducerTableState + extends TableState, + Record {} + +export interface UseTableHooks extends Record { + useOptions: Array< + (options: TableOptions, args: TableOptions) => TableOptions + >; + stateReducers: Array< + ( + newState: TableState, + action: ActionType, + previousState?: TableState, + instance?: TableInstance, + ) => ReducerTableState | undefined + >; + columns: Array< + (columns: Array>, meta: Meta) => Array> + >; + columnsDeps: Array<(deps: any[], meta: Meta) => any[]>; + allColumns: Array< + (allColumns: Array>, meta: Meta) => Array> + >; + allColumnsDeps: Array<(deps: any[], meta: Meta) => any[]>; + visibleColumns: Array< + (allColumns: Array>, meta: Meta) => Array> + >; + visibleColumnsDeps: Array<(deps: any[], meta: Meta) => any[]>; + headerGroups: Array< + (allColumns: Array>, meta: Meta) => Array> + >; + headerGroupsDeps: Array<(deps: any[], meta: Meta) => any[]>; + useInstanceBeforeDimensions: Array<(instance: TableInstance) => void>; + useInstance: Array<(instance: TableInstance) => void>; + prepareRow: Array<(row: Row, meta: Meta) => void>; + useControlledState: Array< + (state: TableState, meta: Meta) => TableState + >; + + getTableProps: Array>; + getTableBodyProps: Array>; + getHeaderGroupProps: Array>; + getFooterGroupProps: Array>; + getHeaderProps: Array>; + getFooterProps: Array>; + getRowProps: Array>; + getCellProps: Array>; + useFinalInstance: Array<(instance: TableInstance) => void>; +} + +export interface UseTableColumnOptions { + id?: IdType | undefined; + Header?: Renderer> | undefined; + Footer?: Renderer> | undefined; + width?: number | string | undefined; + minWidth?: number | undefined; + maxWidth?: number | undefined; +} + +type UpdateHiddenColumns = ( + oldHidden: Array>, +) => Array>; + +export interface TableToggleHideAllColumnProps extends TableToggleCommonProps {} + +export interface UseTableInstanceProps { + state: TableState; + plugins: Array>; + dispatch: TableDispatch; + columns: Array>; + allColumns: Array>; + visibleColumns: Array>; + headerGroups: Array>; + footerGroups: Array>; + headers: Array>; + flatHeaders: Array>; + rows: Array>; + rowsById: Record>; + getTableProps: (propGetter?: TablePropGetter) => TableProps; + getTableBodyProps: (propGetter?: TableBodyPropGetter) => TableBodyProps; + prepareRow: (row: Row) => void; + flatRows: Array>; + totalColumnsWidth: number; + allColumnsHidden: boolean; + toggleHideColumn: (columnId: IdType, value?: boolean) => void; + setHiddenColumns: (param: Array> | UpdateHiddenColumns) => void; + toggleHideAllColumns: (value?: boolean) => void; + getToggleHideAllColumnsProps: ( + props?: Partial, + ) => TableToggleHideAllColumnProps; + getHooks: () => Hooks; +} + +export interface UseTableHeaderGroupProps { + headers: Array>; + getHeaderGroupProps: ( + propGetter?: HeaderGroupPropGetter, + ) => TableHeaderProps; + getFooterGroupProps: ( + propGetter?: FooterGroupPropGetter, + ) => TableFooterProps; + totalHeaderCount: number; // not documented +} + +export interface UseTableColumnProps { + id: IdType; + columns?: Array> | undefined; + isVisible: boolean; + render: (type: 'Header' | 'Footer' | string, props?: object) => ReactNode; + totalLeft: number; + totalWidth: number; + getHeaderProps: (propGetter?: HeaderPropGetter) => TableHeaderProps; + getFooterProps: (propGetter?: FooterPropGetter) => TableFooterProps; + toggleHidden: (value?: boolean) => void; + parent?: ColumnInstance | undefined; // not documented + getToggleHiddenProps: (userProps?: any) => any; + depth: number; // not documented + placeholderOf?: ColumnInstance | undefined; +} + +export interface UseTableRowProps { + cells: Array>; + allCells: Array>; + values: Record, CellValue>; + getRowProps: (propGetter?: RowPropGetter) => TableRowProps; + index: number; + original: D; + id: string; + subRows: Array>; +} + +export interface UseTableCellProps { + column: ColumnInstance; + row: Row; + value: CellValue; + getCellProps: (propGetter?: CellPropGetter) => TableCellProps; + render: (type: 'Cell' | string, userProps?: object) => ReactNode; +} + +export type HeaderProps = TableInstance & { + column: ColumnInstance; +}; + +export type FooterProps = TableInstance & { + column: ColumnInstance; +}; + +export type CellProps = TableInstance & { + column: ColumnInstance; + row: Row; + cell: Cell; + value: CellValue; +}; + +export type Accessor = ( + originalRow: D, + index: number, + sub: { + subRows: D[]; + depth: number; + data: D[]; + }, +) => CellValue; + +//#endregion + +// Plugins + +//#region useAbsoluteLayout +export function useAbsoluteLayout(hooks: Hooks): void; + +export namespace useAbsoluteLayout { + const pluginName = 'useAbsoluteLayout'; +} +//#endregion + +//#region useBlockLayout +export function useBlockLayout(hooks: Hooks): void; + +export namespace useBlockLayout { + const pluginName = 'useBlockLayout'; +} +//#endregion + +//#region useColumnOrder +export function useColumnOrder(hooks: Hooks): void; + +export namespace useColumnOrder { + const pluginName = 'useColumnOrder'; +} + +export interface UseColumnOrderState { + columnOrder: Array>; +} + +export interface UseColumnOrderInstanceProps { + setColumnOrder: ( + updater: + | ((columnOrder: Array>) => Array>) + | Array>, + ) => void; +} + +//#endregion + +//#region useExpanded +export function useExpanded(hooks: Hooks): void; + +export namespace useExpanded { + const pluginName = 'useExpanded'; +} + +export interface TableExpandedToggleProps extends TableKeyedProps {} + +export type UseExpandedOptions = Partial<{ + manualExpandedKey: IdType; + paginateExpandedRows: boolean; + expandSubRows: boolean; + autoResetExpanded?: boolean | undefined; +}>; + +export interface UseExpandedHooks { + getToggleRowsExpandedProps: Array>; + getToggleAllRowsExpandedProps: Array>; +} + +export interface UseExpandedState { + expanded: Record, boolean>; +} + +export interface UseExpandedInstanceProps { + preExpandedRows: Array>; + expandedRows: Array>; + rows: Array>; + expandedDepth: number; + isAllRowsExpanded: boolean; + toggleRowExpanded: (id: Array>, value?: boolean) => void; + toggleAllRowsExpanded: (value?: boolean) => void; +} + +export interface UseExpandedRowProps { + isExpanded: boolean; + canExpand: boolean; + subRows: Array>; + toggleRowExpanded: (value?: boolean) => void; + getToggleRowExpandedProps: ( + props?: Partial, + ) => TableExpandedToggleProps; + depth: number; +} + +//#endregion + +//#region useFilters +export function useFilters(hooks: Hooks): void; + +export namespace useFilters { + const pluginName = 'useFilters'; +} + +export type UseFiltersOptions = Partial<{ + manualFilters: boolean; + disableFilters: boolean; + defaultCanFilter: boolean; + filterTypes: FilterTypes; + autoResetFilters?: boolean | undefined; +}>; + +export interface UseFiltersState { + filters: Filters; +} + +export type UseFiltersColumnOptions = Partial<{ + Filter: Renderer>; + disableFilters: boolean; + defaultCanFilter: boolean; + filter: FilterType | DefaultFilterTypes | string; +}>; + +export interface UseFiltersInstanceProps { + preFilteredRows: Array>; + preFilteredFlatRows: Array>; + preFilteredRowsById: Record>; + filteredRows: Array>; + filteredFlatRows: Array>; + filteredRowsById: Record>; + rows: Array>; + flatRows: Array>; + rowsById: Record>; + setFilter: ( + columnId: IdType, + updater: ((filterValue: FilterValue) => FilterValue) | FilterValue, + ) => void; + setAllFilters: ( + updater: Filters | ((filters: Filters) => Filters), + ) => void; +} + +export interface UseFiltersColumnProps { + canFilter: boolean; + setFilter: ( + updater: ((filterValue: FilterValue) => FilterValue) | FilterValue, + ) => void; + filterValue: FilterValue; + preFilteredRows: Array>; + filteredRows: Array>; +} + +export type FilterProps = HeaderProps; +export type FilterValue = any; +export type Filters = Array<{ + id: IdType; + value: FilterValue; +}>; +export type FilterTypes = Record>; + +export type DefaultFilterTypes = + | 'text' + | 'exactText' + | 'exactTextCase' + | 'includes' + | 'includesAll' + | 'exact' + | 'equals' + | 'between'; + +export interface FilterType { + ( + rows: Array>, + columnIds: Array>, + filterValue: FilterValue, + ): Array>; + + autoRemove?: ((filterValue: FilterValue) => boolean) | undefined; +} + +//#endregion + +//#region useFlexLayout +export function useFlexLayout(hooks: Hooks): void; + +export namespace useFlexLayout { + const pluginName = 'useFlexLayout'; +} +//#endregion + +//#region useGridLayout +export function useGridLayout(hooks: Hooks): void; + +export namespace useGridLayout { + const pluginName = 'useGridLayout'; +} +//#endregion + +//#region useGlobalFilter +export function useGlobalFilter(hooks: Hooks): void; + +export namespace useGlobalFilter { + const pluginName = 'useGlobalFilter'; +} + +export type UseGlobalFiltersOptions = Partial<{ + globalFilter: + | (( + rows: Array>, + columnIds: Array>, + filterValue: any, + ) => Array>) + | string; + manualGlobalFilter: boolean; + filterTypes: FilterTypes; + autoResetGlobalFilter?: boolean | undefined; + disableGlobalFilter?: boolean | undefined; +}>; + +export interface UseGlobalFiltersState { + globalFilter: any; +} + +export type UseGlobalFiltersColumnOptions = Partial<{ + disableGlobalFilter?: boolean | undefined; +}>; + +export interface UseGlobalFiltersInstanceProps { + preGlobalFilteredRows: Array>; + preGlobalFilteredFlatRows: Array>; + preGlobalFilteredRowsById: Record>; + globalFilteredRows: Array>; + globalFilteredFlatRows: Array>; + globalFilteredRowsById: Record>; + rows: Array>; + flatRows: Array>; + rowsById: Record>; + setGlobalFilter: (filterValue: FilterValue) => void; +} + +//#endregion + +//#region useGroupBy +export function useGroupBy(hooks: Hooks): void; + +export namespace useGroupBy { + const pluginName = 'useGroupBy'; +} + +export interface TableGroupByToggleProps { + title?: string | undefined; + style?: CSSProperties | undefined; + onClick?: ((e: MouseEvent) => void) | undefined; +} + +export type UseGroupByOptions = Partial<{ + manualGroupBy: boolean; + disableGroupBy: boolean; + defaultCanGroupBy: boolean; + aggregations: Record>; + groupByFn: ( + rows: Array>, + columnId: IdType, + ) => Record>>; + autoResetGroupBy?: boolean | undefined; +}>; + +export interface UseGroupByHooks { + getGroupByToggleProps: Array>; +} + +export interface UseGroupByState { + groupBy: Array>; +} + +export type UseGroupByColumnOptions = Partial<{ + aggregate: Aggregator; + Aggregated: Renderer>; + disableGroupBy: boolean; + defaultCanGroupBy: boolean; +}>; + +export interface UseGroupByInstanceProps { + preGroupedRows: Array>; + preGroupedFlatRows: Array>; + preGroupedRowsById: Record>; + groupedRows: Array>; + groupedFlatRows: Array>; + groupedRowsById: Record>; + onlyGroupedFlatRows: Array>; + onlyGroupedRowsById: Record>; + nonGroupedFlatRows: Array>; + nonGroupedRowsById: Record>; + rows: Array>; + flatRows: Array>; + rowsById: Record>; + toggleGroupBy: (columnId: IdType, value?: boolean) => void; +} + +export interface UseGroupByColumnProps { + canGroupBy: boolean; + isGrouped: boolean; + groupedIndex: number; + toggleGroupBy: () => void; + getGroupByToggleProps: ( + props?: Partial, + ) => TableGroupByToggleProps; +} + +export interface UseGroupByRowProps { + isGrouped: boolean; + groupByID: IdType; + groupByVal: string; + values: Record, AggregatedValue>; + subRows: Array>; + leafRows: Array>; + depth: number; + id: string; + index: number; +} + +export interface UseGroupByCellProps { + isGrouped: boolean; + isPlaceholder: boolean; + isAggregated: boolean; +} + +export type DefaultAggregators = + | 'sum' + | 'average' + | 'median' + | 'uniqueCount' + | 'count'; + +export type AggregatorFn = ( + columnValues: CellValue[], + rows: Array>, + isAggregated: boolean, +) => AggregatedValue; +export type Aggregator = + | AggregatorFn + | DefaultAggregators + | string; +export type AggregatedValue = any; +//#endregion + +//#region usePagination +export function usePagination(hooks: Hooks): void; + +export namespace usePagination { + const pluginName = 'usePagination'; +} + +export type UsePaginationOptions = Partial<{ + pageCount: number; + manualPagination: boolean; + autoResetPage?: boolean | undefined; + paginateExpandedRows: boolean; +}>; + +export interface UsePaginationState { + pageSize: number; + pageIndex: number; +} + +export interface UsePaginationInstanceProps { + page: Array>; + pageCount: number; + pageOptions: number[]; + canPreviousPage: boolean; + canNextPage: boolean; + gotoPage: (updater: ((pageIndex: number) => number) | number) => void; + previousPage: () => void; + nextPage: () => void; + setPageSize: (pageSize: number) => void; +} + +//#endregion + +//#region useResizeColumns +export function useResizeColumns(hooks: Hooks): void; + +export namespace useResizeColumns { + const pluginName = 'useResizeColumns'; +} + +export interface UseResizeColumnsOptions { + disableResizing?: boolean | undefined; + autoResetResize?: boolean | undefined; +} + +export interface UseResizeColumnsState { + columnResizing: { + startX?: number | undefined; + columnWidth: number; + headerIdWidths: Record; + columnWidths: any; + isResizingColumn?: string | undefined; + }; +} + +export interface UseResizeColumnsColumnOptions { + disableResizing?: boolean | undefined; +} + +export interface TableResizerProps {} + +export interface UseResizeColumnsColumnProps { + getResizerProps: (props?: Partial) => TableResizerProps; + canResize: boolean; + isResizing: boolean; +} + +//#endregion + +//#region useRowSelect +export function useRowSelect(hooks: Hooks): void; + +export namespace useRowSelect { + const pluginName = 'useRowSelect'; +} + +export interface TableToggleAllRowsSelectedProps + extends TableToggleCommonProps {} + +export interface TableToggleRowsSelectedProps extends TableToggleCommonProps {} + +export type UseRowSelectOptions = Partial<{ + manualRowSelectedKey: IdType; + autoResetSelectedRows: boolean; + selectSubRows: boolean; +}>; + +export interface UseRowSelectHooks { + getToggleRowSelectedProps: Array>; + getToggleAllRowsSelectedProps: Array< + PropGetter + >; + getToggleAllPageRowsSelectedProps: Array< + PropGetter + >; +} + +export interface UseRowSelectState { + selectedRowIds: Record, boolean>; +} + +export interface UseRowSelectInstanceProps { + toggleRowSelected: (rowId: IdType, set?: boolean) => void; + toggleAllRowsSelected: (value?: boolean) => void; + getToggleAllRowsSelectedProps: ( + props?: Partial, + ) => TableToggleAllRowsSelectedProps; + getToggleAllPageRowsSelectedProps: ( + props?: Partial, + ) => TableToggleAllRowsSelectedProps; + isAllRowsSelected: boolean; + selectedFlatRows: Array>; +} + +export interface UseRowSelectRowProps { + isSelected: boolean; + isSomeSelected: boolean; + toggleRowSelected: (set?: boolean) => void; + getToggleRowSelectedProps: ( + props?: Partial, + ) => TableToggleRowsSelectedProps; +} + +//#endregion + +//#region useRowState +export function useRowState(hooks: Hooks): void; + +export namespace useRowState { + const pluginName = 'useRowState'; +} + +export type UseRowStateOptions = Partial<{ + initialRowStateAccessor: (row: Row) => UseRowStateLocalState; + getResetRowStateDeps: (instance: TableInstance) => any[]; + autoResetRowState?: boolean | undefined; +}>; + +export interface UseRowStateState { + rowState: Record }>; +} + +export interface UseRowStateInstanceProps { + setRowState: (rowPath: string[], updater: UseRowUpdater) => void; + setCellState: ( + rowPath: string[], + columnId: IdType, + updater: UseRowUpdater, + ) => void; +} + +export interface UseRowStateRowProps { + state: UseRowStateLocalState; + setState: (updater: UseRowUpdater) => void; +} + +export interface UseRowStateCellProps { + state: UseRowStateLocalState; + setState: (updater: UseRowUpdater) => void; +} + +export type UseRowUpdater = T | ((prev: T) => T); +export type UseRowStateLocalState = Record< + IdType, + T +>; +//#endregion + +//#region useSortBy +export function useSortBy(hooks: Hooks): void; + +export namespace useSortBy { + const pluginName = 'useSortBy'; +} + +export interface TableSortByToggleProps { + title?: string | undefined; + style?: CSSProperties | undefined; + onClick?: ((e: MouseEvent) => void) | undefined; +} + +export type UseSortByOptions = Partial<{ + manualSortBy: boolean; + disableSortBy: boolean; + defaultCanSort: boolean; + disableMultiSort: boolean; + isMultiSortEvent: (e: MouseEvent) => boolean; + maxMultiSortColCount: number; + disableSortRemove: boolean; + disabledMultiRemove: boolean; + orderByFn: ( + rows: Array>, + sortFns: Array>, + directions: boolean[], + ) => Array>; + sortTypes: Record>; + autoResetSortBy?: boolean | undefined; +}>; + +export interface UseSortByHooks { + getSortByToggleProps: Array>; +} + +export interface UseSortByState { + sortBy: Array>; +} + +export type UseSortByColumnOptions = Partial<{ + defaultCanSort: boolean; + disableSortBy: boolean; + sortDescFirst: boolean; + sortInverted: boolean; + sortType: SortByFn | DefaultSortTypes | string; +}>; + +export interface UseSortByInstanceProps { + rows: Array>; + preSortedRows: Array>; + setSortBy: (sortBy: Array>) => void; + toggleSortBy: ( + columnId: IdType, + descending?: boolean, + isMulti?: boolean, + ) => void; +} + +export interface UseSortByColumnProps { + canSort: boolean; + toggleSortBy: (descending?: boolean, multi?: boolean) => void; + getSortByToggleProps: ( + props?: Partial, + ) => TableSortByToggleProps; + clearSortBy: () => void; + isSorted: boolean; + sortedIndex: number; + isSortedDesc: boolean | undefined; +} + +export type OrderByFn = ( + rowA: Row, + rowB: Row, +) => number; +export type SortByFn = ( + rowA: Row, + rowB: Row, + columnId: IdType, + desc?: boolean, +) => number; + +export type DefaultSortTypes = + | 'alphanumeric' + | 'datetime' + | 'basic' + | 'string' + | 'number'; + +export interface SortingRule { + id: IdType; + desc?: boolean | undefined; +} + +//#endregion + +// Additional API +export const actions: Record; +export type ActionType = { type: string } & Record; +export const defaultColumn: Partial & Record; + +// Helpers +export type StringKey = Extract; +export type IdType = StringKey | string; +export type CellValue = V; + +export type Renderer = + | ComponentType + | ReactElement + | string + | number + | ReactFragment; + +export interface PluginHook { + (hooks: Hooks): void; + pluginName?: string | undefined; +} + +export type TableDispatch = (action: A) => void; + +// utils +export function defaultOrderByFn( + arr: Array>, + funcs: Array>, + dirs: boolean[], +): Array>; + +export function defaultGroupByFn( + rows: Array>, + columnId: IdType, +): Record>>; + +export function makePropGetter(hooks: Hooks, ...meta: any[]): any; + +export function reduceHooks( + hooks: Hooks, + initial: T, + ...args: any[] +): T; + +export function loopHooks(hooks: Hooks, ...args: any[]): void; + +export function ensurePluginOrder( + plugins: Array>, + befores: string[], + pluginName: string, +): void; + +export function functionalUpdate( + updater: any, + old: Partial>, +): Partial>; + +export function useGetLatest(obj: T): () => T; + +export function safeUseLayoutEffect( + effect: EffectCallback, + deps?: DependencyList, +): void; + +export function useMountedLayoutEffect( + effect: EffectCallback, + deps?: DependencyList, +): void; + +export function useAsyncDebounce any>( + defaultFn: F, + defaultWait?: number, +): F; + +export function makeRenderer( + instance: TableInstance, + column: ColumnInstance, + meta?: any, +): ReactElement; diff --git a/react-table (backup)/package.json b/react-table (backup)/package.json new file mode 100644 index 00000000000..c4da7573625 --- /dev/null +++ b/react-table (backup)/package.json @@ -0,0 +1,42 @@ +{ + "name": "@types/react-table", + "version": "7.7.12", + "description": "TypeScript definitions for react-table", + "homepage": "https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-table", + "license": "MIT", + "contributors": [ + { + "name": "Guy Gascoigne-Piggford", + "url": "https://github.com/ggascoigne", + "githubUsername": "ggascoigne" + }, + { + "name": "Michael Stramel", + "url": "https://github.com/stramel", + "githubUsername": "stramel" + }, + { + "name": "Rohit Garg", + "url": "https://github.com/gargroh", + "githubUsername": "gargroh" + }, + { + "name": "Jason Clark", + "url": "https://github.com/riceboyler", + "githubUsername": "riceboyler" + } + ], + "main": "", + "types": "index.d.ts", + "repository": { + "type": "git", + "url": "https://github.com/DefinitelyTyped/DefinitelyTyped.git", + "directory": "types/react-table" + }, + "scripts": {}, + "dependencies": { + "@types/react": "*" + }, + "typesPublisherContentHash": "28ce2a560b81f85701c43e70d16f022ecafc569457187c2066e6965ede177399", + "typeScriptVersion": "3.9" +} \ No newline at end of file From 9932a6a548f7cfbcd4a5c719b5547e109a3c67b1 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Tue, 22 Aug 2023 07:57:38 -0400 Subject: [PATCH 015/196] Fixed all errors (need to confirm if those changes are logically correct) --- .../src/types/react-table/index.d.ts | 75 +++++++++++-------- 1 file changed, 42 insertions(+), 33 deletions(-) diff --git a/packages/itwinui-react/src/types/react-table/index.d.ts b/packages/itwinui-react/src/types/react-table/index.d.ts index 3f5d9517359..2b86ac7fedc 100644 --- a/packages/itwinui-react/src/types/react-table/index.d.ts +++ b/packages/itwinui-react/src/types/react-table/index.d.ts @@ -123,25 +123,25 @@ declare module 'react-table' { role?: string | undefined; } - export interface TableProps extends TableCommonProps {} + export type TableProps = TableCommonProps; - export interface TableBodyProps extends TableCommonProps {} + export type TableBodyProps = TableCommonProps; export interface TableKeyedProps extends TableCommonProps { key: React.Key; } - export interface TableHeaderGroupProps extends TableKeyedProps {} + export type TableHeaderGroupProps = TableKeyedProps; - export interface TableFooterGroupProps extends TableKeyedProps {} + export type TableFooterGroupProps = TableKeyedProps; - export interface TableHeaderProps extends TableKeyedProps {} + export type TableHeaderProps = TableKeyedProps; - export interface TableFooterProps extends TableKeyedProps {} + export type TableFooterProps = TableKeyedProps; - export interface TableRowProps extends TableKeyedProps {} + export type TableRowProps = TableKeyedProps; - export interface TableCellProps extends TableKeyedProps {} + export type TableCellProps = TableKeyedProps; export interface TableToggleCommonProps extends TableCommonProps { onChange?: ((e: ChangeEvent) => void) | undefined; @@ -309,8 +309,7 @@ declare module 'react-table' { oldHidden: Array>, ) => Array>; - export interface TableToggleHideAllColumnProps - extends TableToggleCommonProps {} + export type TableToggleHideAllColumnProps = TableToggleCommonProps; export interface UseTableInstanceProps { state: TableState; @@ -434,7 +433,9 @@ declare module 'react-table' { //#endregion //#region useColumnOrder - export function useColumnOrder(hooks: Hooks): void; + export function useColumnOrder( + hooks: Hooks, + ): void; export namespace useColumnOrder { const pluginName = 'useColumnOrder'; @@ -455,13 +456,13 @@ declare module 'react-table' { //#endregion //#region useExpanded - export function useExpanded(hooks: Hooks): void; + export function useExpanded(hooks: Hooks): void; export namespace useExpanded { const pluginName = 'useExpanded'; } - export interface TableExpandedToggleProps extends TableKeyedProps {} + export type TableExpandedToggleProps = TableKeyedProps; export type UseExpandedOptions = Partial<{ manualExpandedKey: IdType; @@ -503,7 +504,7 @@ declare module 'react-table' { //#endregion //#region useFilters - export function useFilters(hooks: Hooks): void; + export function useFilters(hooks: Hooks): void; export namespace useFilters { const pluginName = 'useFilters'; @@ -588,7 +589,9 @@ declare module 'react-table' { //#endregion //#region useFlexLayout - export function useFlexLayout(hooks: Hooks): void; + export function useFlexLayout( + hooks: Hooks, + ): void; export namespace useFlexLayout { const pluginName = 'useFlexLayout'; @@ -596,7 +599,9 @@ declare module 'react-table' { //#endregion //#region useGridLayout - export function useGridLayout(hooks: Hooks): void; + export function useGridLayout( + hooks: Hooks, + ): void; export namespace useGridLayout { const pluginName = 'useGridLayout'; @@ -604,7 +609,9 @@ declare module 'react-table' { //#endregion //#region useGlobalFilter - export function useGlobalFilter(hooks: Hooks): void; + export function useGlobalFilter( + hooks: Hooks, + ): void; export namespace useGlobalFilter { const pluginName = 'useGlobalFilter'; @@ -648,7 +655,7 @@ declare module 'react-table' { //#endregion //#region useGroupBy - export function useGroupBy(hooks: Hooks): void; + export function useGroupBy(hooks: Hooks): void; export namespace useGroupBy { const pluginName = 'useGroupBy'; @@ -752,7 +759,9 @@ declare module 'react-table' { //#endregion //#region usePagination - export function usePagination(hooks: Hooks): void; + export function usePagination( + hooks: Hooks, + ): void; export namespace usePagination { const pluginName = 'usePagination'; @@ -785,7 +794,7 @@ declare module 'react-table' { //#endregion //#region useResizeColumns - export function useResizeColumns( + export function useResizeColumns( hooks: Hooks, ): void; @@ -812,7 +821,7 @@ declare module 'react-table' { disableResizing?: boolean | undefined; } - export interface TableResizerProps {} + // export interface TableResizerProps {} export interface UseResizeColumnsColumnProps { getResizerProps: (props?: Partial) => TableResizerProps; @@ -823,17 +832,17 @@ declare module 'react-table' { //#endregion //#region useRowSelect - export function useRowSelect(hooks: Hooks): void; + export function useRowSelect( + hooks: Hooks, + ): void; export namespace useRowSelect { const pluginName = 'useRowSelect'; } - export interface TableToggleAllRowsSelectedProps - extends TableToggleCommonProps {} + export type TableToggleAllRowsSelectedProps = TableToggleCommonProps; - export interface TableToggleRowsSelectedProps - extends TableToggleCommonProps {} + export type TableToggleRowsSelectedProps = TableToggleCommonProps; export type UseRowSelectOptions = Partial<{ manualRowSelectedKey: IdType; @@ -882,7 +891,7 @@ declare module 'react-table' { //#endregion //#region useRowState - export function useRowState(hooks: Hooks): void; + export function useRowState(hooks: Hooks): void; export namespace useRowState { const pluginName = 'useRowState'; @@ -925,7 +934,7 @@ declare module 'react-table' { //#endregion //#region useSortBy - export function useSortBy(hooks: Hooks): void; + export function useSortBy(hooks: Hooks): void; export namespace useSortBy { const pluginName = 'useSortBy'; @@ -1044,20 +1053,20 @@ declare module 'react-table' { export type TableDispatch = (action: A) => void; // utils - export function defaultOrderByFn( + export function defaultOrderByFn( arr: Array>, funcs: Array>, dirs: boolean[], ): Array>; - export function defaultGroupByFn( + export function defaultGroupByFn( rows: Array>, columnId: IdType, ): Record>>; export function makePropGetter(hooks: Hooks, ...meta: any[]): any; - export function reduceHooks( + export function reduceHooks( hooks: Hooks, initial: T, ...args: any[] @@ -1065,13 +1074,13 @@ declare module 'react-table' { export function loopHooks(hooks: Hooks, ...args: any[]): void; - export function ensurePluginOrder( + export function ensurePluginOrder( plugins: Array>, befores: string[], pluginName: string, ): void; - export function functionalUpdate( + export function functionalUpdate( updater: any, old: Partial>, ): Partial>; From b8c01a89c4692d9abad3bc64108cb3b9c03cc064 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Tue, 22 Aug 2023 08:21:14 -0400 Subject: [PATCH 016/196] Change dep to local folder for `@types/react-table` and removed `columns` from ColumnGroupInterface (to disallow multi-level headers) --- packages/itwinui-react/package.json | 2 +- packages/itwinui-react/src/index.ts | 1 + packages/itwinui-react/src/types/react-table/index.d.ts | 5 ++++- yarn.lock | 4 +--- 4 files changed, 7 insertions(+), 5 deletions(-) diff --git a/packages/itwinui-react/package.json b/packages/itwinui-react/package.json index 6b335cad88a..898621d9005 100644 --- a/packages/itwinui-react/package.json +++ b/packages/itwinui-react/package.json @@ -75,7 +75,7 @@ "dependencies": { "@floating-ui/react": "^0.24.3", "@tippyjs/react": "^4.2.6", - "@types/react-table": "^7.0.18", + "@types/react-table": "file:./src/types/react-table", "classnames": "^2.2.6", "react-table": "^7.1.0", "react-transition-group": "^4.4.2", diff --git a/packages/itwinui-react/src/index.ts b/packages/itwinui-react/src/index.ts index c96f66d356a..138c23ebe91 100644 --- a/packages/itwinui-react/src/index.ts +++ b/packages/itwinui-react/src/index.ts @@ -4,3 +4,4 @@ *--------------------------------------------------------------------------------------------*/ export * from './core/index.js'; export * from './types/react-table-config.js'; +export * from './types/react-table/index.js'; diff --git a/packages/itwinui-react/src/types/react-table/index.d.ts b/packages/itwinui-react/src/types/react-table/index.d.ts index 2b86ac7fedc..7f5bb13e276 100644 --- a/packages/itwinui-react/src/types/react-table/index.d.ts +++ b/packages/itwinui-react/src/types/react-table/index.d.ts @@ -33,6 +33,8 @@ import { ReactNode, } from 'react'; +export const TESTING = 'TESTING'; + declare module 'react-table' { export {}; @@ -66,8 +68,9 @@ declare module 'react-table' { Cell?: Renderer> | undefined; } + // eslint-disable-next-line @typescript-eslint/no-empty-interface export interface ColumnGroupInterface { - columns: Array>; + // columns: Array>; } export type ColumnGroup = ColumnInterface & diff --git a/yarn.lock b/yarn.lock index 7ca9eea7500..46cb9f40293 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4238,10 +4238,8 @@ dependencies: "@types/react" "*" -"@types/react-table@^7.0.18": +"@types/react-table@file:./packages/itwinui-react/src/types/react-table": version "7.7.12" - resolved "https://registry.npmjs.org/@types/react-table/-/react-table-7.7.12.tgz" - integrity sha512-bRUent+NR/WwtDGwI/BqhZ8XnHghwHw0HUKeohzB5xN3K2qKWYE5w19e7GCuOkL1CXD9Gi1HFy7TIm2AvgWUHg== dependencies: "@types/react" "*" From aa2bf77d26a995a100a5860750c0504a207f73b2 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Tue, 22 Aug 2023 10:02:59 -0400 Subject: [PATCH 017/196] Combined Cell from react-table-config with index.d.ts --- packages/itwinui-react/src/types/react-table-config.ts | 10 +++++----- .../itwinui-react/src/types/react-table/index.d.ts | 5 ++++- 2 files changed, 9 insertions(+), 6 deletions(-) diff --git a/packages/itwinui-react/src/types/react-table-config.ts b/packages/itwinui-react/src/types/react-table-config.ts index b546161b0ac..acbd9d005b2 100644 --- a/packages/itwinui-react/src/types/react-table-config.ts +++ b/packages/itwinui-react/src/types/react-table-config.ts @@ -24,7 +24,7 @@ import type { UseGlobalFiltersInstanceProps, UseGlobalFiltersOptions, UseGlobalFiltersState, - UseGroupByCellProps, + // UseGroupByCellProps, // UseGroupByColumnOptions, UseGroupByColumnProps, UseGroupByHooks, @@ -44,7 +44,7 @@ import type { UseRowSelectOptions, UseRowSelectRowProps, UseRowSelectState, - UseRowStateCellProps, + // UseRowStateCellProps, UseRowStateInstanceProps, // UseRowStateOptions, UseRowStateRowProps, @@ -239,9 +239,9 @@ declare module 'react-table' { originalSticky?: 'left' | 'right' | 'none'; } - export interface Cell - extends UseGroupByCellProps, - UseRowStateCellProps {} + // export interface Cell + // extends UseGroupByCellProps, + // UseRowStateCellProps {} export interface Row extends UseExpandedRowProps, diff --git a/packages/itwinui-react/src/types/react-table/index.d.ts b/packages/itwinui-react/src/types/react-table/index.d.ts index 7f5bb13e276..02a8ff079a9 100644 --- a/packages/itwinui-react/src/types/react-table/index.d.ts +++ b/packages/itwinui-react/src/types/react-table/index.d.ts @@ -60,7 +60,10 @@ declare module 'react-table' { export type Hooks = UseTableHooks; - export type Cell = UseTableCellProps; + export interface Cell + extends UseTableCellProps, + UseGroupByCellProps, + UseRowStateCellProps {} export type ColumnInterface = UseTableColumnOptions; From e3d6746adaa063e79aec3f6f9d7821b4a6e976a5 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Tue, 22 Aug 2023 11:17:03 -0400 Subject: [PATCH 018/196] Combined everything from react-table-config with index.d.ts --- .../src/types/react-table-config.ts | 462 +++++++++--------- .../src/types/react-table/index.d.ts | 190 ++++++- 2 files changed, 408 insertions(+), 244 deletions(-) diff --git a/packages/itwinui-react/src/types/react-table-config.ts b/packages/itwinui-react/src/types/react-table-config.ts index acbd9d005b2..39adacd826e 100644 --- a/packages/itwinui-react/src/types/react-table-config.ts +++ b/packages/itwinui-react/src/types/react-table-config.ts @@ -7,247 +7,237 @@ /* eslint-disable @typescript-eslint/ban-types */ // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore -import type { - UseColumnOrderInstanceProps, - UseColumnOrderState, - UseExpandedHooks, - UseExpandedInstanceProps, - UseExpandedOptions, - UseExpandedRowProps, - UseExpandedState, - UseFiltersColumnOptions, - UseFiltersColumnProps, - UseFiltersInstanceProps, - UseFiltersOptions, - UseFiltersState, - UseGlobalFiltersColumnOptions, - UseGlobalFiltersInstanceProps, - UseGlobalFiltersOptions, - UseGlobalFiltersState, - // UseGroupByCellProps, - // UseGroupByColumnOptions, - UseGroupByColumnProps, - UseGroupByHooks, - UseGroupByInstanceProps, - // UseGroupByOptions, - UseGroupByRowProps, - UseGroupByState, - UsePaginationInstanceProps, - UsePaginationOptions, - UsePaginationState, - UseResizeColumnsColumnOptions, - UseResizeColumnsColumnProps, - UseResizeColumnsOptions, - // UseResizeColumnsState, - UseRowSelectHooks, - UseRowSelectInstanceProps, - UseRowSelectOptions, - UseRowSelectRowProps, - UseRowSelectState, - // UseRowStateCellProps, - UseRowStateInstanceProps, - // UseRowStateOptions, - UseRowStateRowProps, - UseRowStateState, - UseSortByColumnOptions, - UseSortByColumnProps, - UseSortByHooks, - UseSortByInstanceProps, - UseSortByOptions, - UseSortByState, - UseTableOptions, -} from 'react-table'; -import type { TableFilterProps } from '../core/Table/filters/index.js'; +// import type { +// UseColumnOrderInstanceProps, +// UseColumnOrderState, +// UseExpandedHooks, +// UseExpandedInstanceProps, +// UseExpandedOptions, +// UseExpandedRowProps, +// UseExpandedState, +// UseFiltersColumnOptions, +// UseFiltersColumnProps, +// UseFiltersInstanceProps, +// UseFiltersOptions, +// UseFiltersState, +// UseGlobalFiltersColumnOptions, +// UseGlobalFiltersInstanceProps, +// UseGlobalFiltersOptions, +// UseGlobalFiltersState, +// // UseGroupByCellProps, +// // UseGroupByColumnOptions, +// UseGroupByColumnProps, +// UseGroupByHooks, +// UseGroupByInstanceProps, +// // UseGroupByOptions, +// UseGroupByRowProps, +// UseGroupByState, +// UsePaginationInstanceProps, +// UsePaginationOptions, +// UsePaginationState, +// UseResizeColumnsColumnOptions, +// UseResizeColumnsColumnProps, +// UseResizeColumnsOptions, +// // UseResizeColumnsState, +// UseRowSelectHooks, +// UseRowSelectInstanceProps, +// UseRowSelectOptions, +// UseRowSelectRowProps, +// UseRowSelectState, +// // UseRowStateCellProps, +// UseRowStateInstanceProps, +// // UseRowStateOptions, +// UseRowStateRowProps, +// UseRowStateState, +// UseSortByColumnOptions, +// UseSortByColumnProps, +// UseSortByHooks, +// UseSortByInstanceProps, +// UseSortByOptions, +// UseSortByState, +// UseTableOptions, +// } from 'react-table'; +// import type { TableFilterProps } from '../core/Table/filters/index.js'; declare module 'react-table' { ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// - - export type FieldType = 'text' | 'number' | 'date' | string; - - export type CellRendererProps = { - /** - * Cell HTML props passed from the Table. - */ - cellElementProps: TableCellProps; - /** - * Table specific cell props like `column`, `row`. - */ - cellProps: CellProps; - /** - * Cell's content. - */ - children: React.ReactNode; - /** - * Function that returns whether the cell is disabled. - */ - isDisabled?: (rowData: D) => boolean; - }; - + // export type FieldType = 'text' | 'number' | 'date' | string; + // export type CellRendererProps = { + // /** + // * Cell HTML props passed from the Table. + // */ + // cellElementProps: TableCellProps; + // /** + // * Table specific cell props like `column`, `row`. + // */ + // cellProps: CellProps; + // /** + // * Cell's content. + // */ + // children: React.ReactNode; + // /** + // * Function that returns whether the cell is disabled. + // */ + // isDisabled?: (rowData: D) => boolean; + // }; // take this file as-is, or comment out the sections that don't apply to your plugin configuration - export interface TableOptions - extends Omit, 'data' | 'columns'>, - UseRowSelectOptions, - UseExpandedOptions, - UseFiltersOptions, - // UseGroupByOptions, - UsePaginationOptions, - UseGlobalFiltersOptions, - UseGlobalFiltersColumnOptions, - Omit, 'disableResizing'>, - // UseRowStateOptions, - UseSortByOptions { - /** - * List of columns. - * - * Should not have a top-level `Header` or a `columns` sub-property. They are only allowed to be passed for backwards compatibility. - * See [migration guide](https://github.com/iTwin/iTwinUI/wiki/iTwinUI-react-v2-migration-guide#breaking-changes). - */ - columns: Array>; - /** - * Table data list. - * Must be memoized. - * - * Supports expandable sub-rows using the `subRows` field in data entries. - * If some rows don't have sub-data, it is recommended to pass an empty array to `subRows` for consistent spacing. - */ - data: D[]; - /** - * Column's resize mode. - * - `fit` - when resizing it affects current and the next column, - * e.g. when increasing width of current column, next column's width will decrease. - * - `expand` - when resizing it affects only the current column, - * e.g. when increasing width of the current column, next column's width remains the same. - * @default 'fit' - */ - columnResizeMode?: 'fit' | 'expand'; - } - - export interface Hooks - extends UseExpandedHooks, - UseGroupByHooks, - UseRowSelectHooks, - UseSortByHooks {} - - export interface TableInstance - extends UseColumnOrderInstanceProps, - UseExpandedInstanceProps, - UseFiltersInstanceProps, - UseGlobalFiltersInstanceProps, - UseGroupByInstanceProps, - UsePaginationInstanceProps, - UseRowSelectInstanceProps, - UseRowStateInstanceProps, - UseSortByInstanceProps { - initialRows: Row[]; - columnResizeMode: TableOptions['columnResizeMode']; - tableWidth: number; - } - - export interface TableState - extends UseColumnOrderState, - UseExpandedState, - UseFiltersState, - UseGlobalFiltersState, - UseGroupByState, - UsePaginationState, - UseRowSelectState, - UseRowStateState, - UseSortByState { - // UseResizeColumnsState with fixed typings - columnResizing: { - startX?: number; - columnWidth?: number; - nextColumnWidth?: number; - headerIdWidths?: Array<[string, number]>; - nextHeaderIdWidths?: Array<[string, number]>; - columnWidths: Record; - isResizingColumn?: string; - }; - isTableResizing?: boolean; - columnReorderStartIndex: number; - sticky: { - isScrolledToRight?: boolean; - isScrolledToLeft?: boolean; - }; - lastSelectedRowId?: string; - } - - export interface ColumnInterface - // UseGroupByColumnOptions, - extends UseSortByColumnOptions, - UseFiltersColumnOptions, - UseResizeColumnsColumnOptions, - UseGlobalFiltersColumnOptions { - /** - * Custom class name applied to header column cell. - */ - columnClassName?: string; - /** - * Custom class name applied to each column's cell. - */ - cellClassName?: string; - /** - * Type of the data in cell. Used for manual filtering. - */ - fieldType?: FieldType; - /** - * Filter component used as a column filter. Should use filters from `tableFilters`. - */ - Filter?: Renderer> | Renderer>; - /** - * String value or custom function to use for filtering. - * Possible string values: `text`, `exactText`, `exactTextCase`, `includes`, `includesAll`, `exact`, `equals`, `between`. - * More info about these filters: https://github.com/tannerlinsley/react-table/blob/master/src/filterTypes.js - */ - filter?: FilterType | DefaultFilterTypes | string; - /** - * Function that should return whole cell element not only the content. - * Must be memoized. - * @example - * { - * Header: 'Name', - * accessor: 'name', - * cellRenderer: (props) => , - * } - */ - cellRenderer?: (props: CellRendererProps) => React.ReactNode; - /** - * If true, column can't be reordered. - * @default false - */ - disableReordering?: boolean; - /** - * If true, column's visibility cannot be toggled. - * @default false - */ - disableToggleVisibility?: boolean; - /** - * Side on which column should be sticked to. - */ - sticky?: 'left' | 'right'; - } - - export interface ColumnInstance - extends UseFiltersColumnProps, - UseGroupByColumnProps, - UseResizeColumnsColumnProps, - UseSortByColumnProps { - originalWidth: number; - resizeWidth?: number; - isResizerVisible?: boolean; - getDragAndDropProps: () => TableKeyedProps; - originalSticky?: 'left' | 'right' | 'none'; - } - + // export interface TableOptions + // extends Omit, 'data' | 'columns'>, + // UseRowSelectOptions, + // UseExpandedOptions, + // UseFiltersOptions, + // // UseGroupByOptions, + // UsePaginationOptions, + // UseGlobalFiltersOptions, + // UseGlobalFiltersColumnOptions, + // Omit, 'disableResizing'>, + // // UseRowStateOptions, + // UseSortByOptions { + // /** + // * List of columns. + // * + // * Should not have a top-level `Header` or a `columns` sub-property. They are only allowed to be passed for backwards compatibility. + // * See [migration guide](https://github.com/iTwin/iTwinUI/wiki/iTwinUI-react-v2-migration-guide#breaking-changes). + // */ + // columns: Array>; + // /** + // * Table data list. + // * Must be memoized. + // * + // * Supports expandable sub-rows using the `subRows` field in data entries. + // * If some rows don't have sub-data, it is recommended to pass an empty array to `subRows` for consistent spacing. + // */ + // data: D[]; + // /** + // * Column's resize mode. + // * - `fit` - when resizing it affects current and the next column, + // * e.g. when increasing width of current column, next column's width will decrease. + // * - `expand` - when resizing it affects only the current column, + // * e.g. when increasing width of the current column, next column's width remains the same. + // * @default 'fit' + // */ + // columnResizeMode?: 'fit' | 'expand'; + // } + // export interface Hooks + // extends UseExpandedHooks, + // UseGroupByHooks, + // UseRowSelectHooks, + // UseSortByHooks {} + // export interface TableInstance + // extends UseColumnOrderInstanceProps, + // UseExpandedInstanceProps, + // UseFiltersInstanceProps, + // UseGlobalFiltersInstanceProps, + // UseGroupByInstanceProps, + // UsePaginationInstanceProps, + // UseRowSelectInstanceProps, + // UseRowStateInstanceProps, + // UseSortByInstanceProps { + // initialRows: Row[]; + // columnResizeMode: TableOptions['columnResizeMode']; + // tableWidth: number; + // } + // export interface TableState + // extends UseColumnOrderState, + // UseExpandedState, + // UseFiltersState, + // UseGlobalFiltersState, + // UseGroupByState, + // UsePaginationState, + // UseRowSelectState, + // UseRowStateState, + // UseSortByState { + // // UseResizeColumnsState with fixed typings + // columnResizing: { + // startX?: number; + // columnWidth?: number; + // nextColumnWidth?: number; + // headerIdWidths?: Array<[string, number]>; + // nextHeaderIdWidths?: Array<[string, number]>; + // columnWidths: Record; + // isResizingColumn?: string; + // }; + // isTableResizing?: boolean; + // columnReorderStartIndex: number; + // sticky: { + // isScrolledToRight?: boolean; + // isScrolledToLeft?: boolean; + // }; + // lastSelectedRowId?: string; + // } + // export interface ColumnInterface + // // UseGroupByColumnOptions, + // extends UseSortByColumnOptions, + // UseFiltersColumnOptions, + // UseResizeColumnsColumnOptions, + // UseGlobalFiltersColumnOptions { + // /** + // * Custom class name applied to header column cell. + // */ + // columnClassName?: string; + // /** + // * Custom class name applied to each column's cell. + // */ + // cellClassName?: string; + // /** + // * Type of the data in cell. Used for manual filtering. + // */ + // fieldType?: FieldType; + // /** + // * Filter component used as a column filter. Should use filters from `tableFilters`. + // */ + // Filter?: Renderer> | Renderer>; + // /** + // * String value or custom function to use for filtering. + // * Possible string values: `text`, `exactText`, `exactTextCase`, `includes`, `includesAll`, `exact`, `equals`, `between`. + // * More info about these filters: https://github.com/tannerlinsley/react-table/blob/master/src/filterTypes.js + // */ + // filter?: FilterType | DefaultFilterTypes | string; + // /** + // * Function that should return whole cell element not only the content. + // * Must be memoized. + // * @example + // * { + // * Header: 'Name', + // * accessor: 'name', + // * cellRenderer: (props) => , + // * } + // */ + // cellRenderer?: (props: CellRendererProps) => React.ReactNode; + // /** + // * If true, column can't be reordered. + // * @default false + // */ + // disableReordering?: boolean; + // /** + // * If true, column's visibility cannot be toggled. + // * @default false + // */ + // disableToggleVisibility?: boolean; + // /** + // * Side on which column should be sticked to. + // */ + // sticky?: 'left' | 'right'; + // } + // export interface ColumnInstance + // extends UseFiltersColumnProps, + // UseGroupByColumnProps, + // UseResizeColumnsColumnProps, + // UseSortByColumnProps { + // originalWidth: number; + // resizeWidth?: number; + // isResizerVisible?: boolean; + // getDragAndDropProps: () => TableKeyedProps; + // originalSticky?: 'left' | 'right' | 'none'; + // } // export interface Cell // extends UseGroupByCellProps, // UseRowStateCellProps {} - - export interface Row - extends UseExpandedRowProps, - UseGroupByRowProps, - UseRowSelectRowProps, - UseRowStateRowProps { - initialSubRows: Row[]; - } + // export interface Row + // extends UseExpandedRowProps, + // UseGroupByRowProps, + // UseRowSelectRowProps, + // UseRowStateRowProps { + // initialSubRows: Row[]; + // } } diff --git a/packages/itwinui-react/src/types/react-table/index.d.ts b/packages/itwinui-react/src/types/react-table/index.d.ts index 02a8ff079a9..368d8750f9a 100644 --- a/packages/itwinui-react/src/types/react-table/index.d.ts +++ b/packages/itwinui-react/src/types/react-table/index.d.ts @@ -48,24 +48,156 @@ declare module 'react-table' { * UseFiltersOptions {} * see https://gist.github.com/ggascoigne/646e14c9d54258e40588a13aabf0102d for more details */ - export type TableOptions = UseTableOptions; + export interface TableOptions + extends Omit, 'data' | 'columns'>, + UseRowSelectOptions, + UseExpandedOptions, + UseFiltersOptions, + // UseGroupByOptions, + UsePaginationOptions, + UseGlobalFiltersOptions, + UseGlobalFiltersColumnOptions, + Omit, 'disableResizing'>, + // UseRowStateOptions, + UseSortByOptions { + /** + * List of columns. + * + * Should not have a top-level `Header` or a `columns` sub-property. They are only allowed to be passed for backwards compatibility. + * See [migration guide](https://github.com/iTwin/iTwinUI/wiki/iTwinUI-react-v2-migration-guide#breaking-changes). + */ + columns: Array>; + /** + * Table data list. + * Must be memoized. + * + * Supports expandable sub-rows using the `subRows` field in data entries. + * If some rows don't have sub-data, it is recommended to pass an empty array to `subRows` for consistent spacing. + */ + data: D[]; + /** + * Column's resize mode. + * - `fit` - when resizing it affects current and the next column, + * e.g. when increasing width of current column, next column's width will decrease. + * - `expand` - when resizing it affects only the current column, + * e.g. when increasing width of the current column, next column's width remains the same. + * @default 'fit' + */ + columnResizeMode?: 'fit' | 'expand'; + } export interface TableInstance extends Omit, 'columns' | 'pageCount'>, - UseTableInstanceProps {} - - export interface TableState { + UseTableInstanceProps, + UseColumnOrderInstanceProps, + UseExpandedInstanceProps, + UseFiltersInstanceProps, + UseGlobalFiltersInstanceProps, + UseGroupByInstanceProps, + UsePaginationInstanceProps, + UseRowSelectInstanceProps, + UseRowStateInstanceProps, + UseSortByInstanceProps { + initialRows: Row[]; + columnResizeMode: TableOptions['columnResizeMode']; + tableWidth: number; + } + + export interface TableState + extends UseColumnOrderState, + UseExpandedState, + UseFiltersState, + UseGlobalFiltersState, + UseGroupByState, + UsePaginationState, + UseRowSelectState, + UseRowStateState, + UseSortByState { hiddenColumns?: Array> | undefined; + columnResizing: { + startX?: number; + columnWidth?: number; + nextColumnWidth?: number; + headerIdWidths?: Array<[string, number]>; + nextHeaderIdWidths?: Array<[string, number]>; + columnWidths: Record; + isResizingColumn?: string; + }; + isTableResizing?: boolean; + columnReorderStartIndex: number; + sticky: { + isScrolledToRight?: boolean; + isScrolledToLeft?: boolean; + }; + lastSelectedRowId?: string; } - export type Hooks = UseTableHooks; + export interface Hooks + extends UseTableHooks, + UseExpandedHooks, + UseGroupByHooks, + UseRowSelectHooks, + UseSortByHooks {} export interface Cell extends UseTableCellProps, UseGroupByCellProps, UseRowStateCellProps {} - export type ColumnInterface = UseTableColumnOptions; + export interface ColumnInterface + extends UseTableColumnOptions, + UseSortByColumnOptions, + UseFiltersColumnOptions, + UseResizeColumnsColumnOptions, + UseGlobalFiltersColumnOptions { + /** + * Custom class name applied to header column cell. + */ + columnClassName?: string; + /** + * Custom class name applied to each column's cell. + */ + cellClassName?: string; + /** + * Type of the data in cell. Used for manual filtering. + */ + fieldType?: FieldType; + /** + * Filter component used as a column filter. Should use filters from `tableFilters`. + */ + Filter?: Renderer> | Renderer>; + /** + * String value or custom function to use for filtering. + * Possible string values: `text`, `exactText`, `exactTextCase`, `includes`, `includesAll`, `exact`, `equals`, `between`. + * More info about these filters: https://github.com/tannerlinsley/react-table/blob/master/src/filterTypes.js + */ + filter?: FilterType | DefaultFilterTypes | string; + /** + * Function that should return whole cell element not only the content. + * Must be memoized. + * @example + * { + * Header: 'Name', + * accessor: 'name', + * cellRenderer: (props) => , + * } + */ + cellRenderer?: (props: CellRendererProps) => React.ReactNode; + /** + * If true, column can't be reordered. + * @default false + */ + disableReordering?: boolean; + /** + * If true, column's visibility cannot be toggled. + * @default false + */ + disableToggleVisibility?: boolean; + /** + * Side on which column should be sticked to. + */ + sticky?: 'left' | 'right'; + } export interface ColumnInterfaceBasedOnValue { Cell?: Renderer> | undefined; @@ -115,13 +247,30 @@ declare module 'react-table' { export interface ColumnInstance extends Omit, 'id'>, ColumnInterfaceBasedOnValue, - UseTableColumnProps {} + UseTableColumnProps, + UseFiltersColumnProps, + UseGroupByColumnProps, + UseResizeColumnsColumnProps, + UseSortByColumnProps { + originalWidth: number; + resizeWidth?: number; + isResizerVisible?: boolean; + getDragAndDropProps: () => TableKeyedProps; + originalSticky?: 'left' | 'right' | 'none'; + } export interface HeaderGroup extends ColumnInstance, UseTableHeaderGroupProps {} - export type Row = UseTableRowProps; + export interface Row + extends UseTableRowProps, + UseExpandedRowProps, + UseGroupByRowProps, + UseRowSelectRowProps, + UseRowStateRowProps { + initialSubRows: Row[]; + } export interface TableCommonProps { style?: CSSProperties | undefined; @@ -1113,4 +1262,29 @@ declare module 'react-table' { column: ColumnInstance, meta?: any, ): ReactElement; + + ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// + + // Additional Types + + export type FieldType = 'text' | 'number' | 'date' | string; + + export type CellRendererProps = { + /** + * Cell HTML props passed from the Table. + */ + cellElementProps: TableCellProps; + /** + * Table specific cell props like `column`, `row`. + */ + cellProps: CellProps; + /** + * Cell's content. + */ + children: React.ReactNode; + /** + * Function that returns whether the cell is disabled. + */ + isDisabled?: (rowData: D) => boolean; + }; } From 4ae39b557a022ba992c3da92d995f77a342ef8fc Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Tue, 22 Aug 2023 17:03:54 -0400 Subject: [PATCH 019/196] WIP --- .../src/types/react-table/index.d.ts | 37 ++++- packages/itwinui-react/tsconfig.json | 3 +- playgrounds/vite/src/App.tsx | 126 ++++++++++-------- 3 files changed, 108 insertions(+), 58 deletions(-) diff --git a/packages/itwinui-react/src/types/react-table/index.d.ts b/packages/itwinui-react/src/types/react-table/index.d.ts index 368d8750f9a..56066afaed1 100644 --- a/packages/itwinui-react/src/types/react-table/index.d.ts +++ b/packages/itwinui-react/src/types/react-table/index.d.ts @@ -200,7 +200,10 @@ declare module 'react-table' { } export interface ColumnInterfaceBasedOnValue { - Cell?: Renderer> | undefined; + // Cell?: Renderer> | undefined; + // Cell?: (props: CellProps) => React.ReactNode; + // testing1: Renderer> | undefined; + testing1: Renderer> | undefined; } // eslint-disable-next-line @typescript-eslint/no-empty-interface @@ -219,8 +222,26 @@ declare module 'react-table' { type ValueOf = T[keyof T]; + // interface TableStoryDataType { + // product: number; + // price: number; + // // [K in string]: any; + // quantity: number; + // rating: number; + // deliveryTime: number; + // status: 'positive' | 'negative' | 'warning' | undefined; + // // subRows: TableStoryDataType[]; + // // 1?: number; + // }; + + // // type testing = ColumnWithStrictAccessor + // // type testing = ColumnInterfaceBasedOnValue + // // type testing = CellProps + // type testing = TableInstance + // The accessors like `foo.bar` are not supported, use functions instead export type ColumnWithStrictAccessor = ColumnInterface & + // export type ColumnWithStrictAccessor = ValueOf<{ ValueOf<{ [K in keyof D]: { accessor: K; @@ -239,7 +260,7 @@ declare module 'react-table' { | undefined; }; - export type Column = + export type Column = | ColumnGroup | ColumnWithLooseAccessor | ColumnWithStrictAccessor; @@ -550,12 +571,18 @@ declare module 'react-table' { column: ColumnInstance; }; - export type CellProps = TableInstance & { - column: ColumnInstance; + export type CellProps = { + // column: ColumnInstance; row: Row; - cell: Cell; + // cell: Cell; value: CellValue; }; + // export type CellProps = TableInstance & { + // column: ColumnInstance; + // row: Row; + // cell: Cell; + // value: CellValue; + // }; export type Accessor = ( originalRow: D, diff --git a/packages/itwinui-react/tsconfig.json b/packages/itwinui-react/tsconfig.json index 8ba3ad58ae7..dfb5d2c1f35 100644 --- a/packages/itwinui-react/tsconfig.json +++ b/packages/itwinui-react/tsconfig.json @@ -20,7 +20,8 @@ "noUnusedLocals": true, "skipLibCheck": true, "isolatedModules": true, - "verbatimModuleSyntax": true + "verbatimModuleSyntax": true, + "noErrorTruncation": true }, "exclude": ["node_modules", "cjs/**/*", "esm/**/*"] } diff --git a/playgrounds/vite/src/App.tsx b/playgrounds/vite/src/App.tsx index 77ce67c5670..4aa9d7b1940 100644 --- a/playgrounds/vite/src/App.tsx +++ b/playgrounds/vite/src/App.tsx @@ -20,26 +20,41 @@ import type { TableState, } from 'react-table'; +type ValueOf = T[keyof T]; + const App = () => { // type TableStoryDataType = Record; - type TableStoryDataType = { - product: string; - price: number; - // [K in string]: any; + // interface TableStoryDataType extends Record { + interface TableStoryDataType extends Record { + 1: string; + // price: number; + // // [K in string]: any; // quantity: number; // rating: number; // deliveryTime: number; // status: 'positive' | 'negative' | 'warning' | undefined; // subRows: TableStoryDataType[]; - }; + // 1?: number; + } + + // type MyType = { + // "a_key": string, + // "b_key": number, + // "c_key": boolean, + // }; + // type q = ValueOf<{ + // [K in keyof TableStoryDataType]: { + // accessor: K; + // } + // }>; const generateItem = useCallback( (index: number, parentRow = '', depth = 0): TableStoryDataType => { const keyValue = parentRow ? `${parentRow}.${index + 1}` : `${index + 1}`; const rating = (index % 4) + 1; return { - product: `Product ${keyValue}`, - price: ((index % 10) + 1) * 15, + 1: `Product ${keyValue}`, + // price: ((index % 10) + 1) * 15, // quantity: ((index % 10) + 1) * 150, // rating: rating, // deliveryTime: (index % 15) + 1, @@ -86,37 +101,42 @@ const App = () => { { id: 'product', Header: 'Product', - // accessor: 'product', + accessor: 'product', Filter: tableFilters.TextFilter(), disableToggleVisibility: true, disableReordering: true, width: 200, sticky: 'left', - }, - { - id: 'price', - Header: 'Price', - accessor: 'price', - width: 200, - Filter: tableFilters.NumberRangeFilter(), - filter: 'between', - disableReordering: true, - sortType: 'number', - // Cell1: (props) => { - // return
- // }, - Cell: (props: CellProps, number>) => { - return <>${props.value}; - }, - // Cell: (props) => { - // return <>${props.value}; - // }, - sticky: 'left', + // testing1: '', + testing1: (props) =>
, }, // { + // id: 'price', + // Header: 'Price', + // // accessor: 'price', + // width: 200, + // Filter: tableFilters.NumberRangeFilter(), + // filter: 'between', + // disableReordering: true, + // sortType: 'number', + // // Cell1: (props) => { + // // return
+ // // }, + // // Cell: (props: CellProps, number>) => { + // // cell + // // Cell: (props) => { + // // return
; + // // // return <>${props.value}; + // // }, + // // Cell: (props) => { + // // return <>${props.value}; + // // }, + // sticky: 'left', + // }, + // { // id: 'quantity', // Header: 'Quantity', - // accessor: 'quantity', + // // accessor: 'quantity', // Filter: tableFilters.NumberRangeFilter(), // filter: 'between', // sortType: 'number', @@ -125,7 +145,7 @@ const App = () => { // { // id: 'rating', // Header: 'Rating', - // accessor: 'rating', + // // accessor: 'rating', // Filter: tableFilters.NumberRangeFilter(), // filter: 'between', // sortType: 'number', @@ -144,34 +164,36 @@ const App = () => { // { // id: 'deliveryTime', // Header: 'Delivery Time', - // accessor: 'deliveryTime', + // // accessor: 'deliveryTime', // Filter: tableFilters.NumberRangeFilter(), // filter: 'between', // sortType: 'number', // width: 400, - // Cell: (props: CellProps) => { - // return <>{props.value} day(s); - // }, + // // Cell: (props: CellProps) => { + // // return <>{props.value} day(s); + // // }, + // }, + // { + // // accessor: 'actions', + // // ...ActionColumn({ columnManager: true }), + // // Cell: (props: CellProps) => ( + // // + // // e.stopPropagation()} + // // disabled={isRowDisabled(props.row.original)} + // // > + // // + // // + // // + // // ), + // accessor: 'deliveryTime', + // sticky: 'right', // }, - // // { - // // ...ActionColumn({ columnManager: true }), - // // // Cell: (props: CellProps) => ( - // // // - // // // e.stopPropagation()} - // // // disabled={isRowDisabled(props.row.original)} - // // // > - // // // - // // // - // // // - // // // ), - // // // sticky: 'right', - // // }, // ] satisfies Array>>, - // ] satisfies Array>, - // ] as Column[], - ] as Column[], + ] satisfies Array>, + // ] as Column[], + // ] as Column[], [isRowDisabled, menuItems], ); From 86b48f99674c8c9b8504041889297247045f0ac6 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Wed, 23 Aug 2023 07:00:58 -0400 Subject: [PATCH 020/196] WIP --- .../src/types/react-table/index.d.ts | 1000 +---------------- playgrounds/vite/src/App.tsx | 19 +- 2 files changed, 32 insertions(+), 987 deletions(-) diff --git a/packages/itwinui-react/src/types/react-table/index.d.ts b/packages/itwinui-react/src/types/react-table/index.d.ts index 56066afaed1..d946da5047c 100644 --- a/packages/itwinui-react/src/types/react-table/index.d.ts +++ b/packages/itwinui-react/src/types/react-table/index.d.ts @@ -2,25 +2,6 @@ * Copyright (c) Bentley Systems, Incorporated. All rights reserved. * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ -// Type definitions for react-table 7.7 -// Project: https://github.com/tannerlinsley/react-table -// Definitions by: Guy Gascoigne-Piggford , -// Michael Stramel -// Rohit Garg -// Jason Clark -// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped -// TypeScript Version: 3.5 -// reflects react-table@7.7.0 - -// tslint:disable:no-empty-interface -// no-empty-interface is disabled to allow easy extension with declaration merging - -// tslint:disable:no-unnecessary-generics -// no-unnecessary-generics is disabled because many of these definitions are either used in a generic -// context or the signatures are required to match for declaration merging - -// The changelog for the important changes is located in the Readme.md - import { ChangeEvent, ComponentType, @@ -33,8 +14,6 @@ import { ReactNode, } from 'react'; -export const TESTING = 'TESTING'; - declare module 'react-table' { export {}; @@ -49,17 +28,7 @@ declare module 'react-table' { * see https://gist.github.com/ggascoigne/646e14c9d54258e40588a13aabf0102d for more details */ export interface TableOptions - extends Omit, 'data' | 'columns'>, - UseRowSelectOptions, - UseExpandedOptions, - UseFiltersOptions, - // UseGroupByOptions, - UsePaginationOptions, - UseGlobalFiltersOptions, - UseGlobalFiltersColumnOptions, - Omit, 'disableResizing'>, - // UseRowStateOptions, - UseSortByOptions { + extends Omit, 'data' | 'columns'> { /** * List of columns. * @@ -132,24 +101,11 @@ declare module 'react-table' { lastSelectedRowId?: string; } - export interface Hooks - extends UseTableHooks, - UseExpandedHooks, - UseGroupByHooks, - UseRowSelectHooks, - UseSortByHooks {} - - export interface Cell - extends UseTableCellProps, - UseGroupByCellProps, - UseRowStateCellProps {} - export interface ColumnInterface extends UseTableColumnOptions, UseSortByColumnOptions, UseFiltersColumnOptions, - UseResizeColumnsColumnOptions, - UseGlobalFiltersColumnOptions { + UseResizeColumnsColumnOptions { /** * Custom class name applied to header column cell. */ @@ -206,11 +162,6 @@ declare module 'react-table' { testing1: Renderer> | undefined; } - // eslint-disable-next-line @typescript-eslint/no-empty-interface - export interface ColumnGroupInterface { - // columns: Array>; - } - export type ColumnGroup = ColumnInterface & ColumnGroupInterface & ( @@ -260,10 +211,12 @@ declare module 'react-table' { | undefined; }; - export type Column = - | ColumnGroup - | ColumnWithLooseAccessor - | ColumnWithStrictAccessor; + // export type Column = + // | ColumnGroup + // | ColumnWithLooseAccessor + // | ColumnWithStrictAccessor; + + export type Column = ColumnWithStrictAccessor; export interface ColumnInstance extends Omit, 'id'>, @@ -280,10 +233,6 @@ declare module 'react-table' { originalSticky?: 'left' | 'right' | 'none'; } - export interface HeaderGroup - extends ColumnInstance, - UseTableHeaderGroupProps {} - export interface Row extends UseTableRowProps, UseExpandedRowProps, @@ -293,51 +242,6 @@ declare module 'react-table' { initialSubRows: Row[]; } - export interface TableCommonProps { - style?: CSSProperties | undefined; - className?: string | undefined; - role?: string | undefined; - } - - export type TableProps = TableCommonProps; - - export type TableBodyProps = TableCommonProps; - - export interface TableKeyedProps extends TableCommonProps { - key: React.Key; - } - - export type TableHeaderGroupProps = TableKeyedProps; - - export type TableFooterGroupProps = TableKeyedProps; - - export type TableHeaderProps = TableKeyedProps; - - export type TableFooterProps = TableKeyedProps; - - export type TableRowProps = TableKeyedProps; - - export type TableCellProps = TableKeyedProps; - - export interface TableToggleCommonProps extends TableCommonProps { - onChange?: ((e: ChangeEvent) => void) | undefined; - checked?: boolean | undefined; - title?: string | undefined; - indeterminate?: boolean | undefined; - } - - export interface MetaBase { - instance: TableInstance; - userProps: any; - } - - // inspired by ExtendState in https://github.com/reduxjs/redux/blob/master/src/types/store.ts - export type Meta> = [ - Extension, - ] extends [never] - ? M - : M & Extension; - //#region useTable export function useTable( options: TableOptions, @@ -369,109 +273,6 @@ declare module 'react-table' { autoResetHiddenColumns: boolean; }>; - export type PropGetter< - D extends object, - Props, - T extends object = never, - P = Partial, - > = ((props: P, meta: Meta) => P | P[]) | P | P[]; - - export type TablePropGetter = PropGetter; - - export type TableBodyPropGetter = PropGetter< - D, - TableBodyProps - >; - - export type HeaderPropGetter = PropGetter< - D, - TableHeaderProps, - { column: HeaderGroup } - >; - - export type FooterGroupPropGetter = PropGetter< - D, - TableFooterGroupProps, - { column: HeaderGroup } - >; - - export type HeaderGroupPropGetter = PropGetter< - D, - TableHeaderGroupProps, - { column: HeaderGroup } - >; - - export type FooterPropGetter = PropGetter< - D, - TableFooterProps, - { column: HeaderGroup } - >; - - export type RowPropGetter = PropGetter< - D, - TableRowProps, - { row: Row } - >; - - export type CellPropGetter = PropGetter< - D, - TableCellProps, - { cell: Cell } - >; - - export interface ReducerTableState - extends TableState, - Record {} - - export interface UseTableHooks extends Record { - useOptions: Array< - (options: TableOptions, args: TableOptions) => TableOptions - >; - stateReducers: Array< - ( - newState: TableState, - action: ActionType, - previousState?: TableState, - instance?: TableInstance, - ) => ReducerTableState | undefined - >; - columns: Array< - (columns: Array>, meta: Meta) => Array> - >; - columnsDeps: Array<(deps: any[], meta: Meta) => any[]>; - allColumns: Array< - (allColumns: Array>, meta: Meta) => Array> - >; - allColumnsDeps: Array<(deps: any[], meta: Meta) => any[]>; - visibleColumns: Array< - (allColumns: Array>, meta: Meta) => Array> - >; - visibleColumnsDeps: Array<(deps: any[], meta: Meta) => any[]>; - headerGroups: Array< - ( - allColumns: Array>, - meta: Meta, - ) => Array> - >; - headerGroupsDeps: Array<(deps: any[], meta: Meta) => any[]>; - useInstanceBeforeDimensions: Array<(instance: TableInstance) => void>; - useInstance: Array<(instance: TableInstance) => void>; - prepareRow: Array<(row: Row, meta: Meta) => void>; - useControlledState: Array< - (state: TableState, meta: Meta) => TableState - >; - - getTableProps: Array>; - getTableBodyProps: Array>; - getHeaderGroupProps: Array>; - getFooterGroupProps: Array>; - getHeaderProps: Array>; - getFooterProps: Array>; - getRowProps: Array>; - getCellProps: Array>; - useFinalInstance: Array<(instance: TableInstance) => void>; - } - export interface UseTableColumnOptions { id?: IdType | undefined; Header?: Renderer> | undefined; @@ -481,12 +282,6 @@ declare module 'react-table' { maxWidth?: number | undefined; } - type UpdateHiddenColumns = ( - oldHidden: Array>, - ) => Array>; - - export type TableToggleHideAllColumnProps = TableToggleCommonProps; - export interface UseTableInstanceProps { state: TableState; plugins: Array>; @@ -517,60 +312,6 @@ declare module 'react-table' { getHooks: () => Hooks; } - export interface UseTableHeaderGroupProps { - headers: Array>; - getHeaderGroupProps: ( - propGetter?: HeaderGroupPropGetter, - ) => TableHeaderProps; - getFooterGroupProps: ( - propGetter?: FooterGroupPropGetter, - ) => TableFooterProps; - totalHeaderCount: number; // not documented - } - - export interface UseTableColumnProps { - id: IdType; - columns?: Array> | undefined; - isVisible: boolean; - render: (type: 'Header' | 'Footer' | string, props?: object) => ReactNode; - totalLeft: number; - totalWidth: number; - getHeaderProps: (propGetter?: HeaderPropGetter) => TableHeaderProps; - getFooterProps: (propGetter?: FooterPropGetter) => TableFooterProps; - toggleHidden: (value?: boolean) => void; - parent?: ColumnInstance | undefined; // not documented - getToggleHiddenProps: (userProps?: any) => any; - depth: number; // not documented - placeholderOf?: ColumnInstance | undefined; - } - - export interface UseTableRowProps { - cells: Array>; - allCells: Array>; - values: Record, CellValue>; - getRowProps: (propGetter?: RowPropGetter) => TableRowProps; - index: number; - original: D; - id: string; - subRows: Array>; - } - - export interface UseTableCellProps { - column: ColumnInstance; - row: Row; - value: CellValue; - getCellProps: (propGetter?: CellPropGetter) => TableCellProps; - render: (type: 'Cell' | string, userProps?: object) => ReactNode; - } - - export type HeaderProps = TableInstance & { - column: ColumnInstance; - }; - - export type FooterProps = TableInstance & { - column: ColumnInstance; - }; - export type CellProps = { // column: ColumnInstance; row: Row; @@ -598,720 +339,21 @@ declare module 'react-table' { // Plugins - //#region useAbsoluteLayout - export function useAbsoluteLayout(hooks: Hooks): void; - - export namespace useAbsoluteLayout { - const pluginName = 'useAbsoluteLayout'; - } - //#endregion - - //#region useBlockLayout - export function useBlockLayout(hooks: Hooks): void; - - export namespace useBlockLayout { - const pluginName = 'useBlockLayout'; - } - //#endregion - - //#region useColumnOrder - export function useColumnOrder( - hooks: Hooks, - ): void; - - export namespace useColumnOrder { - const pluginName = 'useColumnOrder'; - } - - export interface UseColumnOrderState { - columnOrder: Array>; - } - - export interface UseColumnOrderInstanceProps { - setColumnOrder: ( - updater: - | ((columnOrder: Array>) => Array>) - | Array>, - ) => void; - } - - //#endregion - - //#region useExpanded - export function useExpanded(hooks: Hooks): void; - - export namespace useExpanded { - const pluginName = 'useExpanded'; - } - - export type TableExpandedToggleProps = TableKeyedProps; - - export type UseExpandedOptions = Partial<{ - manualExpandedKey: IdType; - paginateExpandedRows: boolean; - expandSubRows: boolean; - autoResetExpanded?: boolean | undefined; - }>; - - export interface UseExpandedHooks { - getToggleRowsExpandedProps: Array>; - getToggleAllRowsExpandedProps: Array>; - } - - export interface UseExpandedState { - expanded: Record, boolean>; - } - - export interface UseExpandedInstanceProps { - preExpandedRows: Array>; - expandedRows: Array>; - rows: Array>; - expandedDepth: number; - isAllRowsExpanded: boolean; - toggleRowExpanded: (id: Array>, value?: boolean) => void; - toggleAllRowsExpanded: (value?: boolean) => void; - } - - export interface UseExpandedRowProps { - isExpanded: boolean; - canExpand: boolean; - subRows: Array>; - toggleRowExpanded: (value?: boolean) => void; - getToggleRowExpandedProps: ( - props?: Partial, - ) => TableExpandedToggleProps; - depth: number; - } - - //#endregion - - //#region useFilters - export function useFilters(hooks: Hooks): void; - - export namespace useFilters { - const pluginName = 'useFilters'; - } - - export type UseFiltersOptions = Partial<{ - manualFilters: boolean; - disableFilters: boolean; - defaultCanFilter: boolean; - filterTypes: FilterTypes; - autoResetFilters?: boolean | undefined; - }>; - - export interface UseFiltersState { - filters: Filters; - } - - export type UseFiltersColumnOptions = Partial<{ - Filter: Renderer>; - disableFilters: boolean; - defaultCanFilter: boolean; - filter: FilterType | DefaultFilterTypes | string; - }>; - - export interface UseFiltersInstanceProps { - preFilteredRows: Array>; - preFilteredFlatRows: Array>; - preFilteredRowsById: Record>; - filteredRows: Array>; - filteredFlatRows: Array>; - filteredRowsById: Record>; - rows: Array>; - flatRows: Array>; - rowsById: Record>; - setFilter: ( - columnId: IdType, - updater: ((filterValue: FilterValue) => FilterValue) | FilterValue, - ) => void; - setAllFilters: ( - updater: Filters | ((filters: Filters) => Filters), - ) => void; - } - - export interface UseFiltersColumnProps { - canFilter: boolean; - setFilter: ( - updater: ((filterValue: FilterValue) => FilterValue) | FilterValue, - ) => void; - filterValue: FilterValue; - preFilteredRows: Array>; - filteredRows: Array>; - } - - export type FilterProps = HeaderProps; - export type FilterValue = any; - export type Filters = Array<{ - id: IdType; - value: FilterValue; - }>; - export type FilterTypes = Record>; - - export type DefaultFilterTypes = - | 'text' - | 'exactText' - | 'exactTextCase' - | 'includes' - | 'includesAll' - | 'exact' - | 'equals' - | 'between'; - - export interface FilterType { - ( - rows: Array>, - columnIds: Array>, - filterValue: FilterValue, - ): Array>; - - autoRemove?: ((filterValue: FilterValue) => boolean) | undefined; - } - - //#endregion - - //#region useFlexLayout - export function useFlexLayout( - hooks: Hooks, - ): void; - - export namespace useFlexLayout { - const pluginName = 'useFlexLayout'; - } - //#endregion - - //#region useGridLayout - export function useGridLayout( - hooks: Hooks, - ): void; - - export namespace useGridLayout { - const pluginName = 'useGridLayout'; - } - //#endregion - - //#region useGlobalFilter - export function useGlobalFilter( - hooks: Hooks, - ): void; - - export namespace useGlobalFilter { - const pluginName = 'useGlobalFilter'; - } - - export type UseGlobalFiltersOptions = Partial<{ - globalFilter: - | (( - rows: Array>, - columnIds: Array>, - filterValue: any, - ) => Array>) - | string; - manualGlobalFilter: boolean; - filterTypes: FilterTypes; - autoResetGlobalFilter?: boolean | undefined; - disableGlobalFilter?: boolean | undefined; - }>; - - export interface UseGlobalFiltersState { - globalFilter: any; - } - - export type UseGlobalFiltersColumnOptions = Partial<{ - disableGlobalFilter?: boolean | undefined; - }>; - - export interface UseGlobalFiltersInstanceProps { - preGlobalFilteredRows: Array>; - preGlobalFilteredFlatRows: Array>; - preGlobalFilteredRowsById: Record>; - globalFilteredRows: Array>; - globalFilteredFlatRows: Array>; - globalFilteredRowsById: Record>; - rows: Array>; - flatRows: Array>; - rowsById: Record>; - setGlobalFilter: (filterValue: FilterValue) => void; - } - - //#endregion - - //#region useGroupBy - export function useGroupBy(hooks: Hooks): void; - - export namespace useGroupBy { - const pluginName = 'useGroupBy'; - } - - export interface TableGroupByToggleProps { - title?: string | undefined; - style?: CSSProperties | undefined; - onClick?: ((e: MouseEvent) => void) | undefined; - } - - export type UseGroupByOptions = Partial<{ - manualGroupBy: boolean; - disableGroupBy: boolean; - defaultCanGroupBy: boolean; - aggregations: Record>; - groupByFn: ( - rows: Array>, - columnId: IdType, - ) => Record>>; - autoResetGroupBy?: boolean | undefined; - }>; - - export interface UseGroupByHooks { - getGroupByToggleProps: Array>; - } - - export interface UseGroupByState { - groupBy: Array>; - } - - export type UseGroupByColumnOptions = Partial<{ - aggregate: Aggregator; - Aggregated: Renderer>; - disableGroupBy: boolean; - defaultCanGroupBy: boolean; - }>; - - export interface UseGroupByInstanceProps { - preGroupedRows: Array>; - preGroupedFlatRows: Array>; - preGroupedRowsById: Record>; - groupedRows: Array>; - groupedFlatRows: Array>; - groupedRowsById: Record>; - onlyGroupedFlatRows: Array>; - onlyGroupedRowsById: Record>; - nonGroupedFlatRows: Array>; - nonGroupedRowsById: Record>; - rows: Array>; - flatRows: Array>; - rowsById: Record>; - toggleGroupBy: (columnId: IdType, value?: boolean) => void; - } - - export interface UseGroupByColumnProps { - canGroupBy: boolean; - isGrouped: boolean; - groupedIndex: number; - toggleGroupBy: () => void; - getGroupByToggleProps: ( - props?: Partial, - ) => TableGroupByToggleProps; - } - - export interface UseGroupByRowProps { - isGrouped: boolean; - groupByID: IdType; - groupByVal: string; - values: Record, AggregatedValue>; - subRows: Array>; - leafRows: Array>; - depth: number; - id: string; - index: number; - } - - export interface UseGroupByCellProps { - isGrouped: boolean; - isPlaceholder: boolean; - isAggregated: boolean; - } - - export type DefaultAggregators = - | 'sum' - | 'average' - | 'median' - | 'uniqueCount' - | 'count'; - - export type AggregatorFn = ( - columnValues: CellValue[], - rows: Array>, - isAggregated: boolean, - ) => AggregatedValue; - export type Aggregator = - | AggregatorFn - | DefaultAggregators - | string; - export type AggregatedValue = any; - //#endregion - - //#region usePagination - export function usePagination( - hooks: Hooks, - ): void; - - export namespace usePagination { - const pluginName = 'usePagination'; - } - - export type UsePaginationOptions = Partial<{ - pageCount: number; - manualPagination: boolean; - autoResetPage?: boolean | undefined; - paginateExpandedRows: boolean; - }>; - - export interface UsePaginationState { - pageSize: number; - pageIndex: number; - } - - export interface UsePaginationInstanceProps { - page: Array>; - pageCount: number; - pageOptions: number[]; - canPreviousPage: boolean; - canNextPage: boolean; - gotoPage: (updater: ((pageIndex: number) => number) | number) => void; - previousPage: () => void; - nextPage: () => void; - setPageSize: (pageSize: number) => void; - } - - //#endregion - - //#region useResizeColumns - export function useResizeColumns( - hooks: Hooks, - ): void; - - export namespace useResizeColumns { - const pluginName = 'useResizeColumns'; - } - - export interface UseResizeColumnsOptions { - disableResizing?: boolean | undefined; - autoResetResize?: boolean | undefined; - } - - export interface UseResizeColumnsState { - columnResizing: { - startX?: number | undefined; - columnWidth: number; - headerIdWidths: Record; - columnWidths: any; - isResizingColumn?: string | undefined; - }; - } - - export interface UseResizeColumnsColumnOptions { - disableResizing?: boolean | undefined; - } - - // export interface TableResizerProps {} - - export interface UseResizeColumnsColumnProps { - getResizerProps: (props?: Partial) => TableResizerProps; - canResize: boolean; - isResizing: boolean; - } - - //#endregion - - //#region useRowSelect - export function useRowSelect( - hooks: Hooks, - ): void; - - export namespace useRowSelect { - const pluginName = 'useRowSelect'; - } - - export type TableToggleAllRowsSelectedProps = TableToggleCommonProps; - - export type TableToggleRowsSelectedProps = TableToggleCommonProps; - - export type UseRowSelectOptions = Partial<{ - manualRowSelectedKey: IdType; - autoResetSelectedRows: boolean; - selectSubRows: boolean; - }>; - - export interface UseRowSelectHooks { - getToggleRowSelectedProps: Array< - PropGetter - >; - getToggleAllRowsSelectedProps: Array< - PropGetter - >; - getToggleAllPageRowsSelectedProps: Array< - PropGetter - >; - } - - export interface UseRowSelectState { - selectedRowIds: Record, boolean>; - } - - export interface UseRowSelectInstanceProps { - toggleRowSelected: (rowId: IdType, set?: boolean) => void; - toggleAllRowsSelected: (value?: boolean) => void; - getToggleAllRowsSelectedProps: ( - props?: Partial, - ) => TableToggleAllRowsSelectedProps; - getToggleAllPageRowsSelectedProps: ( - props?: Partial, - ) => TableToggleAllRowsSelectedProps; - isAllRowsSelected: boolean; - selectedFlatRows: Array>; - } - - export interface UseRowSelectRowProps { - isSelected: boolean; - isSomeSelected: boolean; - toggleRowSelected: (set?: boolean) => void; - getToggleRowSelectedProps: ( - props?: Partial, - ) => TableToggleRowsSelectedProps; - } - - //#endregion - - //#region useRowState - export function useRowState(hooks: Hooks): void; - - export namespace useRowState { - const pluginName = 'useRowState'; - } - - export type UseRowStateOptions = Partial<{ - initialRowStateAccessor: (row: Row) => UseRowStateLocalState; - getResetRowStateDeps: (instance: TableInstance) => any[]; - autoResetRowState?: boolean | undefined; - }>; - - export interface UseRowStateState { - rowState: Record }>; - } - - export interface UseRowStateInstanceProps { - setRowState: (rowPath: string[], updater: UseRowUpdater) => void; - setCellState: ( - rowPath: string[], - columnId: IdType, - updater: UseRowUpdater, - ) => void; - } - - export interface UseRowStateRowProps { - state: UseRowStateLocalState; - setState: (updater: UseRowUpdater) => void; - } - - export interface UseRowStateCellProps { - state: UseRowStateLocalState; - setState: (updater: UseRowUpdater) => void; - } - - export type UseRowUpdater = T | ((prev: T) => T); - export type UseRowStateLocalState = Record< - IdType, - T - >; - //#endregion - - //#region useSortBy - export function useSortBy(hooks: Hooks): void; - - export namespace useSortBy { - const pluginName = 'useSortBy'; - } - - export interface TableSortByToggleProps { - title?: string | undefined; - style?: CSSProperties | undefined; - onClick?: ((e: MouseEvent) => void) | undefined; - } - - export type UseSortByOptions = Partial<{ - manualSortBy: boolean; - disableSortBy: boolean; - defaultCanSort: boolean; - disableMultiSort: boolean; - isMultiSortEvent: (e: MouseEvent) => boolean; - maxMultiSortColCount: number; - disableSortRemove: boolean; - disabledMultiRemove: boolean; - orderByFn: ( - rows: Array>, - sortFns: Array>, - directions: boolean[], - ) => Array>; - sortTypes: Record>; - autoResetSortBy?: boolean | undefined; - }>; - - export interface UseSortByHooks { - getSortByToggleProps: Array>; - } - - export interface UseSortByState { - sortBy: Array>; - } - - export type UseSortByColumnOptions = Partial<{ - defaultCanSort: boolean; - disableSortBy: boolean; - sortDescFirst: boolean; - sortInverted: boolean; - sortType: SortByFn | DefaultSortTypes | string; - }>; - - export interface UseSortByInstanceProps { - rows: Array>; - preSortedRows: Array>; - setSortBy: (sortBy: Array>) => void; - toggleSortBy: ( - columnId: IdType, - descending?: boolean, - isMulti?: boolean, - ) => void; - } - - export interface UseSortByColumnProps { - canSort: boolean; - toggleSortBy: (descending?: boolean, multi?: boolean) => void; - getSortByToggleProps: ( - props?: Partial, - ) => TableSortByToggleProps; - clearSortBy: () => void; - isSorted: boolean; - sortedIndex: number; - isSortedDesc: boolean | undefined; - } + /////////////////////////////////////////// - export type OrderByFn = ( - rowA: Row, - rowB: Row, - ) => number; - export type SortByFn = ( - rowA: Row, - rowB: Row, - columnId: IdType, - desc?: boolean, - ) => number; + // Testing - export type DefaultSortTypes = - | 'alphanumeric' - | 'datetime' - | 'basic' - | 'string' - | 'number'; - - export interface SortingRule { - id: IdType; - desc?: boolean | undefined; - } - - //#endregion - - // Additional API - export const actions: Record; - export type ActionType = { type: string } & Record; - export const defaultColumn: Partial & Record; - - // Helpers - export type StringKey = Extract; - export type IdType = StringKey | string; - export type CellValue = V; - - export type Renderer = - | ComponentType - | ReactElement - | string - | number - | ReactFragment; - - export interface PluginHook { - (hooks: Hooks): void; - pluginName?: string | undefined; - } - - export type TableDispatch
= (action: A) => void; - - // utils - export function defaultOrderByFn( - arr: Array>, - funcs: Array>, - dirs: boolean[], - ): Array>; - - export function defaultGroupByFn( - rows: Array>, - columnId: IdType, - ): Record>>; - - export function makePropGetter(hooks: Hooks, ...meta: any[]): any; - - export function reduceHooks( - hooks: Hooks, - initial: T, - ...args: any[] - ): T; - - export function loopHooks(hooks: Hooks, ...args: any[]): void; - - export function ensurePluginOrder( - plugins: Array>, - befores: string[], - pluginName: string, - ): void; - - export function functionalUpdate( - updater: any, - old: Partial>, - ): Partial>; - - export function useGetLatest(obj: T): () => T; - - export function safeUseLayoutEffect( - effect: EffectCallback, - deps?: DependencyList, - ): void; - - export function useMountedLayoutEffect( - effect: EffectCallback, - deps?: DependencyList, - ): void; - - export function useAsyncDebounce any>( - defaultFn: F, - defaultWait?: number, - ): F; - - export function makeRenderer( - instance: TableInstance, - column: ColumnInstance, - meta?: any, - ): ReactElement; - - ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// - - // Additional Types + type TableStoryDataType = { + product: string; + price: number; + }; - export type FieldType = 'text' | 'number' | 'date' | string; + const data = [ + { + product: 'product1', + price: 1, + }, + ] satisfies Array; - export type CellRendererProps = { - /** - * Cell HTML props passed from the Table. - */ - cellElementProps: TableCellProps; - /** - * Table specific cell props like `column`, `row`. - */ - cellProps: CellProps; - /** - * Cell's content. - */ - children: React.ReactNode; - /** - * Function that returns whether the cell is disabled. - */ - isDisabled?: (rowData: D) => boolean; - }; + const columns = [{}] satisfies Array>; } diff --git a/playgrounds/vite/src/App.tsx b/playgrounds/vite/src/App.tsx index 4aa9d7b1940..08bec5411e1 100644 --- a/playgrounds/vite/src/App.tsx +++ b/playgrounds/vite/src/App.tsx @@ -13,7 +13,7 @@ import { import { useCallback, useMemo, useState } from 'react'; import type { CellProps, - CellRendererProps, + // CellRendererProps, Column, Row, TableInstance, @@ -106,10 +106,13 @@ const App = () => { disableToggleVisibility: true, disableReordering: true, width: 200, - sticky: 'left', + testing1: (props: any) =>
{props}
, + // sticky: 'left', // testing1: '', - testing1: (props) =>
, + // testig + // testing1: (props) =>
, }, + // {}, // { // id: 'price', // Header: 'Price', @@ -197,11 +200,11 @@ const App = () => { [isRowDisabled, menuItems], ); - const rowProps = useCallback((row: Row<{ status: string | undefined }>) => { - return { - status: row.original.status, - }; - }, []); + // const rowProps = useCallback((row: Row<{ status: string | undefined }>) => { + // return { + // status: row.original.status, + // }; + // }, []); const [globalFilterValue, setGlobalFilterValue] = useState(''); From 2ff2b82249f4d5decbbca0c4137118e3e0d33292 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Wed, 23 Aug 2023 07:10:42 -0400 Subject: [PATCH 021/196] Working so far --- .../src/types/react-table/index.d.ts | 4 +- .../react-table/old-not-working-index.d.ts | 1317 +++++++++++++++++ playgrounds/vite/src/App.tsx | 4 +- 3 files changed, 1322 insertions(+), 3 deletions(-) create mode 100644 packages/itwinui-react/src/types/react-table/old-not-working-index.d.ts diff --git a/packages/itwinui-react/src/types/react-table/index.d.ts b/packages/itwinui-react/src/types/react-table/index.d.ts index d946da5047c..3ef5d9b3415 100644 --- a/packages/itwinui-react/src/types/react-table/index.d.ts +++ b/packages/itwinui-react/src/types/react-table/index.d.ts @@ -313,9 +313,9 @@ declare module 'react-table' { } export type CellProps = { - // column: ColumnInstance; + column: ColumnInstance; row: Row; - // cell: Cell; + cell: Cell; value: CellValue; }; // export type CellProps = TableInstance & { diff --git a/packages/itwinui-react/src/types/react-table/old-not-working-index.d.ts b/packages/itwinui-react/src/types/react-table/old-not-working-index.d.ts new file mode 100644 index 00000000000..56066afaed1 --- /dev/null +++ b/packages/itwinui-react/src/types/react-table/old-not-working-index.d.ts @@ -0,0 +1,1317 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Bentley Systems, Incorporated. All rights reserved. + * See LICENSE.md in the project root for license terms and full copyright notice. + *--------------------------------------------------------------------------------------------*/ +// Type definitions for react-table 7.7 +// Project: https://github.com/tannerlinsley/react-table +// Definitions by: Guy Gascoigne-Piggford , +// Michael Stramel +// Rohit Garg +// Jason Clark +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +// TypeScript Version: 3.5 +// reflects react-table@7.7.0 + +// tslint:disable:no-empty-interface +// no-empty-interface is disabled to allow easy extension with declaration merging + +// tslint:disable:no-unnecessary-generics +// no-unnecessary-generics is disabled because many of these definitions are either used in a generic +// context or the signatures are required to match for declaration merging + +// The changelog for the important changes is located in the Readme.md + +import { + ChangeEvent, + ComponentType, + CSSProperties, + DependencyList, + EffectCallback, + MouseEvent, + ReactElement, + ReactFragment, + ReactNode, +} from 'react'; + +export const TESTING = 'TESTING'; + +declare module 'react-table' { + export {}; + + /** + * The empty definitions of below provides a base definition for the parts used by useTable, that can then be extended in the users code. + * + * @example + * export interface TableOptions + * extends + * UseExpandedOptions, + * UseFiltersOptions {} + * see https://gist.github.com/ggascoigne/646e14c9d54258e40588a13aabf0102d for more details + */ + export interface TableOptions + extends Omit, 'data' | 'columns'>, + UseRowSelectOptions, + UseExpandedOptions, + UseFiltersOptions, + // UseGroupByOptions, + UsePaginationOptions, + UseGlobalFiltersOptions, + UseGlobalFiltersColumnOptions, + Omit, 'disableResizing'>, + // UseRowStateOptions, + UseSortByOptions { + /** + * List of columns. + * + * Should not have a top-level `Header` or a `columns` sub-property. They are only allowed to be passed for backwards compatibility. + * See [migration guide](https://github.com/iTwin/iTwinUI/wiki/iTwinUI-react-v2-migration-guide#breaking-changes). + */ + columns: Array>; + /** + * Table data list. + * Must be memoized. + * + * Supports expandable sub-rows using the `subRows` field in data entries. + * If some rows don't have sub-data, it is recommended to pass an empty array to `subRows` for consistent spacing. + */ + data: D[]; + /** + * Column's resize mode. + * - `fit` - when resizing it affects current and the next column, + * e.g. when increasing width of current column, next column's width will decrease. + * - `expand` - when resizing it affects only the current column, + * e.g. when increasing width of the current column, next column's width remains the same. + * @default 'fit' + */ + columnResizeMode?: 'fit' | 'expand'; + } + + export interface TableInstance + extends Omit, 'columns' | 'pageCount'>, + UseTableInstanceProps, + UseColumnOrderInstanceProps, + UseExpandedInstanceProps, + UseFiltersInstanceProps, + UseGlobalFiltersInstanceProps, + UseGroupByInstanceProps, + UsePaginationInstanceProps, + UseRowSelectInstanceProps, + UseRowStateInstanceProps, + UseSortByInstanceProps { + initialRows: Row[]; + columnResizeMode: TableOptions['columnResizeMode']; + tableWidth: number; + } + + export interface TableState + extends UseColumnOrderState, + UseExpandedState, + UseFiltersState, + UseGlobalFiltersState, + UseGroupByState, + UsePaginationState, + UseRowSelectState, + UseRowStateState, + UseSortByState { + hiddenColumns?: Array> | undefined; + columnResizing: { + startX?: number; + columnWidth?: number; + nextColumnWidth?: number; + headerIdWidths?: Array<[string, number]>; + nextHeaderIdWidths?: Array<[string, number]>; + columnWidths: Record; + isResizingColumn?: string; + }; + isTableResizing?: boolean; + columnReorderStartIndex: number; + sticky: { + isScrolledToRight?: boolean; + isScrolledToLeft?: boolean; + }; + lastSelectedRowId?: string; + } + + export interface Hooks + extends UseTableHooks, + UseExpandedHooks, + UseGroupByHooks, + UseRowSelectHooks, + UseSortByHooks {} + + export interface Cell + extends UseTableCellProps, + UseGroupByCellProps, + UseRowStateCellProps {} + + export interface ColumnInterface + extends UseTableColumnOptions, + UseSortByColumnOptions, + UseFiltersColumnOptions, + UseResizeColumnsColumnOptions, + UseGlobalFiltersColumnOptions { + /** + * Custom class name applied to header column cell. + */ + columnClassName?: string; + /** + * Custom class name applied to each column's cell. + */ + cellClassName?: string; + /** + * Type of the data in cell. Used for manual filtering. + */ + fieldType?: FieldType; + /** + * Filter component used as a column filter. Should use filters from `tableFilters`. + */ + Filter?: Renderer> | Renderer>; + /** + * String value or custom function to use for filtering. + * Possible string values: `text`, `exactText`, `exactTextCase`, `includes`, `includesAll`, `exact`, `equals`, `between`. + * More info about these filters: https://github.com/tannerlinsley/react-table/blob/master/src/filterTypes.js + */ + filter?: FilterType | DefaultFilterTypes | string; + /** + * Function that should return whole cell element not only the content. + * Must be memoized. + * @example + * { + * Header: 'Name', + * accessor: 'name', + * cellRenderer: (props) => , + * } + */ + cellRenderer?: (props: CellRendererProps) => React.ReactNode; + /** + * If true, column can't be reordered. + * @default false + */ + disableReordering?: boolean; + /** + * If true, column's visibility cannot be toggled. + * @default false + */ + disableToggleVisibility?: boolean; + /** + * Side on which column should be sticked to. + */ + sticky?: 'left' | 'right'; + } + + export interface ColumnInterfaceBasedOnValue { + // Cell?: Renderer> | undefined; + // Cell?: (props: CellProps) => React.ReactNode; + // testing1: Renderer> | undefined; + testing1: Renderer> | undefined; + } + + // eslint-disable-next-line @typescript-eslint/no-empty-interface + export interface ColumnGroupInterface { + // columns: Array>; + } + + export type ColumnGroup = ColumnInterface & + ColumnGroupInterface & + ( + | { Header: string } + | ({ id: IdType } & { + Header: Renderer>; + }) + ) & { accessor?: Accessor | undefined }; // Not used, but needed for backwards compatibility + + type ValueOf = T[keyof T]; + + // interface TableStoryDataType { + // product: number; + // price: number; + // // [K in string]: any; + // quantity: number; + // rating: number; + // deliveryTime: number; + // status: 'positive' | 'negative' | 'warning' | undefined; + // // subRows: TableStoryDataType[]; + // // 1?: number; + // }; + + // // type testing = ColumnWithStrictAccessor + // // type testing = ColumnInterfaceBasedOnValue + // // type testing = CellProps + // type testing = TableInstance + + // The accessors like `foo.bar` are not supported, use functions instead + export type ColumnWithStrictAccessor = ColumnInterface & + // export type ColumnWithStrictAccessor = ValueOf<{ + ValueOf<{ + [K in keyof D]: { + accessor: K; + } & ColumnInterfaceBasedOnValue; + }>; + + export type ColumnWithLooseAccessor = ColumnInterface & + ColumnInterfaceBasedOnValue & + ( + | { Header: string } + | { id: IdType } + | { accessor: keyof D extends never ? IdType : never } + ) & { + accessor?: + | (keyof D extends never ? IdType | Accessor : Accessor) + | undefined; + }; + + export type Column = + | ColumnGroup + | ColumnWithLooseAccessor + | ColumnWithStrictAccessor; + + export interface ColumnInstance + extends Omit, 'id'>, + ColumnInterfaceBasedOnValue, + UseTableColumnProps, + UseFiltersColumnProps, + UseGroupByColumnProps, + UseResizeColumnsColumnProps, + UseSortByColumnProps { + originalWidth: number; + resizeWidth?: number; + isResizerVisible?: boolean; + getDragAndDropProps: () => TableKeyedProps; + originalSticky?: 'left' | 'right' | 'none'; + } + + export interface HeaderGroup + extends ColumnInstance, + UseTableHeaderGroupProps {} + + export interface Row + extends UseTableRowProps, + UseExpandedRowProps, + UseGroupByRowProps, + UseRowSelectRowProps, + UseRowStateRowProps { + initialSubRows: Row[]; + } + + export interface TableCommonProps { + style?: CSSProperties | undefined; + className?: string | undefined; + role?: string | undefined; + } + + export type TableProps = TableCommonProps; + + export type TableBodyProps = TableCommonProps; + + export interface TableKeyedProps extends TableCommonProps { + key: React.Key; + } + + export type TableHeaderGroupProps = TableKeyedProps; + + export type TableFooterGroupProps = TableKeyedProps; + + export type TableHeaderProps = TableKeyedProps; + + export type TableFooterProps = TableKeyedProps; + + export type TableRowProps = TableKeyedProps; + + export type TableCellProps = TableKeyedProps; + + export interface TableToggleCommonProps extends TableCommonProps { + onChange?: ((e: ChangeEvent) => void) | undefined; + checked?: boolean | undefined; + title?: string | undefined; + indeterminate?: boolean | undefined; + } + + export interface MetaBase { + instance: TableInstance; + userProps: any; + } + + // inspired by ExtendState in https://github.com/reduxjs/redux/blob/master/src/types/store.ts + export type Meta> = [ + Extension, + ] extends [never] + ? M + : M & Extension; + + //#region useTable + export function useTable( + options: TableOptions, + ...plugins: Array> + ): TableInstance; + + /** + * NOTE: To use custom options, use "Interface Merging" to add the custom options + */ + export type UseTableOptions = { + columns: ReadonlyArray>; + data: readonly D[]; + } & Partial<{ + initialState: Partial>; + stateReducer: ( + newState: TableState, + action: ActionType, + previousState: TableState, + instance?: TableInstance, + ) => TableState; + useControlledState: (state: TableState, meta: Meta) => TableState; + defaultColumn: Partial>; + getSubRows: (originalRow: D, relativeIndex: number) => D[]; + getRowId: ( + originalRow: D, + relativeIndex: number, + parent?: Row, + ) => string; + autoResetHiddenColumns: boolean; + }>; + + export type PropGetter< + D extends object, + Props, + T extends object = never, + P = Partial, + > = ((props: P, meta: Meta) => P | P[]) | P | P[]; + + export type TablePropGetter = PropGetter; + + export type TableBodyPropGetter = PropGetter< + D, + TableBodyProps + >; + + export type HeaderPropGetter = PropGetter< + D, + TableHeaderProps, + { column: HeaderGroup } + >; + + export type FooterGroupPropGetter = PropGetter< + D, + TableFooterGroupProps, + { column: HeaderGroup } + >; + + export type HeaderGroupPropGetter = PropGetter< + D, + TableHeaderGroupProps, + { column: HeaderGroup } + >; + + export type FooterPropGetter = PropGetter< + D, + TableFooterProps, + { column: HeaderGroup } + >; + + export type RowPropGetter = PropGetter< + D, + TableRowProps, + { row: Row } + >; + + export type CellPropGetter = PropGetter< + D, + TableCellProps, + { cell: Cell } + >; + + export interface ReducerTableState + extends TableState, + Record {} + + export interface UseTableHooks extends Record { + useOptions: Array< + (options: TableOptions, args: TableOptions) => TableOptions + >; + stateReducers: Array< + ( + newState: TableState, + action: ActionType, + previousState?: TableState, + instance?: TableInstance, + ) => ReducerTableState | undefined + >; + columns: Array< + (columns: Array>, meta: Meta) => Array> + >; + columnsDeps: Array<(deps: any[], meta: Meta) => any[]>; + allColumns: Array< + (allColumns: Array>, meta: Meta) => Array> + >; + allColumnsDeps: Array<(deps: any[], meta: Meta) => any[]>; + visibleColumns: Array< + (allColumns: Array>, meta: Meta) => Array> + >; + visibleColumnsDeps: Array<(deps: any[], meta: Meta) => any[]>; + headerGroups: Array< + ( + allColumns: Array>, + meta: Meta, + ) => Array> + >; + headerGroupsDeps: Array<(deps: any[], meta: Meta) => any[]>; + useInstanceBeforeDimensions: Array<(instance: TableInstance) => void>; + useInstance: Array<(instance: TableInstance) => void>; + prepareRow: Array<(row: Row, meta: Meta) => void>; + useControlledState: Array< + (state: TableState, meta: Meta) => TableState + >; + + getTableProps: Array>; + getTableBodyProps: Array>; + getHeaderGroupProps: Array>; + getFooterGroupProps: Array>; + getHeaderProps: Array>; + getFooterProps: Array>; + getRowProps: Array>; + getCellProps: Array>; + useFinalInstance: Array<(instance: TableInstance) => void>; + } + + export interface UseTableColumnOptions { + id?: IdType | undefined; + Header?: Renderer> | undefined; + Footer?: Renderer> | undefined; + width?: number | string | undefined; + minWidth?: number | undefined; + maxWidth?: number | undefined; + } + + type UpdateHiddenColumns = ( + oldHidden: Array>, + ) => Array>; + + export type TableToggleHideAllColumnProps = TableToggleCommonProps; + + export interface UseTableInstanceProps { + state: TableState; + plugins: Array>; + dispatch: TableDispatch; + columns: Array>; + allColumns: Array>; + visibleColumns: Array>; + headerGroups: Array>; + footerGroups: Array>; + headers: Array>; + flatHeaders: Array>; + rows: Array>; + rowsById: Record>; + getTableProps: (propGetter?: TablePropGetter) => TableProps; + getTableBodyProps: (propGetter?: TableBodyPropGetter) => TableBodyProps; + prepareRow: (row: Row) => void; + flatRows: Array>; + totalColumnsWidth: number; + allColumnsHidden: boolean; + toggleHideColumn: (columnId: IdType, value?: boolean) => void; + setHiddenColumns: ( + param: Array> | UpdateHiddenColumns, + ) => void; + toggleHideAllColumns: (value?: boolean) => void; + getToggleHideAllColumnsProps: ( + props?: Partial, + ) => TableToggleHideAllColumnProps; + getHooks: () => Hooks; + } + + export interface UseTableHeaderGroupProps { + headers: Array>; + getHeaderGroupProps: ( + propGetter?: HeaderGroupPropGetter, + ) => TableHeaderProps; + getFooterGroupProps: ( + propGetter?: FooterGroupPropGetter, + ) => TableFooterProps; + totalHeaderCount: number; // not documented + } + + export interface UseTableColumnProps { + id: IdType; + columns?: Array> | undefined; + isVisible: boolean; + render: (type: 'Header' | 'Footer' | string, props?: object) => ReactNode; + totalLeft: number; + totalWidth: number; + getHeaderProps: (propGetter?: HeaderPropGetter) => TableHeaderProps; + getFooterProps: (propGetter?: FooterPropGetter) => TableFooterProps; + toggleHidden: (value?: boolean) => void; + parent?: ColumnInstance | undefined; // not documented + getToggleHiddenProps: (userProps?: any) => any; + depth: number; // not documented + placeholderOf?: ColumnInstance | undefined; + } + + export interface UseTableRowProps { + cells: Array>; + allCells: Array>; + values: Record, CellValue>; + getRowProps: (propGetter?: RowPropGetter) => TableRowProps; + index: number; + original: D; + id: string; + subRows: Array>; + } + + export interface UseTableCellProps { + column: ColumnInstance; + row: Row; + value: CellValue; + getCellProps: (propGetter?: CellPropGetter) => TableCellProps; + render: (type: 'Cell' | string, userProps?: object) => ReactNode; + } + + export type HeaderProps = TableInstance & { + column: ColumnInstance; + }; + + export type FooterProps = TableInstance & { + column: ColumnInstance; + }; + + export type CellProps = { + // column: ColumnInstance; + row: Row; + // cell: Cell; + value: CellValue; + }; + // export type CellProps = TableInstance & { + // column: ColumnInstance; + // row: Row; + // cell: Cell; + // value: CellValue; + // }; + + export type Accessor = ( + originalRow: D, + index: number, + sub: { + subRows: D[]; + depth: number; + data: D[]; + }, + ) => CellValue; + + //#endregion + + // Plugins + + //#region useAbsoluteLayout + export function useAbsoluteLayout(hooks: Hooks): void; + + export namespace useAbsoluteLayout { + const pluginName = 'useAbsoluteLayout'; + } + //#endregion + + //#region useBlockLayout + export function useBlockLayout(hooks: Hooks): void; + + export namespace useBlockLayout { + const pluginName = 'useBlockLayout'; + } + //#endregion + + //#region useColumnOrder + export function useColumnOrder( + hooks: Hooks, + ): void; + + export namespace useColumnOrder { + const pluginName = 'useColumnOrder'; + } + + export interface UseColumnOrderState { + columnOrder: Array>; + } + + export interface UseColumnOrderInstanceProps { + setColumnOrder: ( + updater: + | ((columnOrder: Array>) => Array>) + | Array>, + ) => void; + } + + //#endregion + + //#region useExpanded + export function useExpanded(hooks: Hooks): void; + + export namespace useExpanded { + const pluginName = 'useExpanded'; + } + + export type TableExpandedToggleProps = TableKeyedProps; + + export type UseExpandedOptions = Partial<{ + manualExpandedKey: IdType; + paginateExpandedRows: boolean; + expandSubRows: boolean; + autoResetExpanded?: boolean | undefined; + }>; + + export interface UseExpandedHooks { + getToggleRowsExpandedProps: Array>; + getToggleAllRowsExpandedProps: Array>; + } + + export interface UseExpandedState { + expanded: Record, boolean>; + } + + export interface UseExpandedInstanceProps { + preExpandedRows: Array>; + expandedRows: Array>; + rows: Array>; + expandedDepth: number; + isAllRowsExpanded: boolean; + toggleRowExpanded: (id: Array>, value?: boolean) => void; + toggleAllRowsExpanded: (value?: boolean) => void; + } + + export interface UseExpandedRowProps { + isExpanded: boolean; + canExpand: boolean; + subRows: Array>; + toggleRowExpanded: (value?: boolean) => void; + getToggleRowExpandedProps: ( + props?: Partial, + ) => TableExpandedToggleProps; + depth: number; + } + + //#endregion + + //#region useFilters + export function useFilters(hooks: Hooks): void; + + export namespace useFilters { + const pluginName = 'useFilters'; + } + + export type UseFiltersOptions = Partial<{ + manualFilters: boolean; + disableFilters: boolean; + defaultCanFilter: boolean; + filterTypes: FilterTypes; + autoResetFilters?: boolean | undefined; + }>; + + export interface UseFiltersState { + filters: Filters; + } + + export type UseFiltersColumnOptions = Partial<{ + Filter: Renderer>; + disableFilters: boolean; + defaultCanFilter: boolean; + filter: FilterType | DefaultFilterTypes | string; + }>; + + export interface UseFiltersInstanceProps { + preFilteredRows: Array>; + preFilteredFlatRows: Array>; + preFilteredRowsById: Record>; + filteredRows: Array>; + filteredFlatRows: Array>; + filteredRowsById: Record>; + rows: Array>; + flatRows: Array>; + rowsById: Record>; + setFilter: ( + columnId: IdType, + updater: ((filterValue: FilterValue) => FilterValue) | FilterValue, + ) => void; + setAllFilters: ( + updater: Filters | ((filters: Filters) => Filters), + ) => void; + } + + export interface UseFiltersColumnProps { + canFilter: boolean; + setFilter: ( + updater: ((filterValue: FilterValue) => FilterValue) | FilterValue, + ) => void; + filterValue: FilterValue; + preFilteredRows: Array>; + filteredRows: Array>; + } + + export type FilterProps = HeaderProps; + export type FilterValue = any; + export type Filters = Array<{ + id: IdType; + value: FilterValue; + }>; + export type FilterTypes = Record>; + + export type DefaultFilterTypes = + | 'text' + | 'exactText' + | 'exactTextCase' + | 'includes' + | 'includesAll' + | 'exact' + | 'equals' + | 'between'; + + export interface FilterType { + ( + rows: Array>, + columnIds: Array>, + filterValue: FilterValue, + ): Array>; + + autoRemove?: ((filterValue: FilterValue) => boolean) | undefined; + } + + //#endregion + + //#region useFlexLayout + export function useFlexLayout( + hooks: Hooks, + ): void; + + export namespace useFlexLayout { + const pluginName = 'useFlexLayout'; + } + //#endregion + + //#region useGridLayout + export function useGridLayout( + hooks: Hooks, + ): void; + + export namespace useGridLayout { + const pluginName = 'useGridLayout'; + } + //#endregion + + //#region useGlobalFilter + export function useGlobalFilter( + hooks: Hooks, + ): void; + + export namespace useGlobalFilter { + const pluginName = 'useGlobalFilter'; + } + + export type UseGlobalFiltersOptions = Partial<{ + globalFilter: + | (( + rows: Array>, + columnIds: Array>, + filterValue: any, + ) => Array>) + | string; + manualGlobalFilter: boolean; + filterTypes: FilterTypes; + autoResetGlobalFilter?: boolean | undefined; + disableGlobalFilter?: boolean | undefined; + }>; + + export interface UseGlobalFiltersState { + globalFilter: any; + } + + export type UseGlobalFiltersColumnOptions = Partial<{ + disableGlobalFilter?: boolean | undefined; + }>; + + export interface UseGlobalFiltersInstanceProps { + preGlobalFilteredRows: Array>; + preGlobalFilteredFlatRows: Array>; + preGlobalFilteredRowsById: Record>; + globalFilteredRows: Array>; + globalFilteredFlatRows: Array>; + globalFilteredRowsById: Record>; + rows: Array>; + flatRows: Array>; + rowsById: Record>; + setGlobalFilter: (filterValue: FilterValue) => void; + } + + //#endregion + + //#region useGroupBy + export function useGroupBy(hooks: Hooks): void; + + export namespace useGroupBy { + const pluginName = 'useGroupBy'; + } + + export interface TableGroupByToggleProps { + title?: string | undefined; + style?: CSSProperties | undefined; + onClick?: ((e: MouseEvent) => void) | undefined; + } + + export type UseGroupByOptions = Partial<{ + manualGroupBy: boolean; + disableGroupBy: boolean; + defaultCanGroupBy: boolean; + aggregations: Record>; + groupByFn: ( + rows: Array>, + columnId: IdType, + ) => Record>>; + autoResetGroupBy?: boolean | undefined; + }>; + + export interface UseGroupByHooks { + getGroupByToggleProps: Array>; + } + + export interface UseGroupByState { + groupBy: Array>; + } + + export type UseGroupByColumnOptions = Partial<{ + aggregate: Aggregator; + Aggregated: Renderer>; + disableGroupBy: boolean; + defaultCanGroupBy: boolean; + }>; + + export interface UseGroupByInstanceProps { + preGroupedRows: Array>; + preGroupedFlatRows: Array>; + preGroupedRowsById: Record>; + groupedRows: Array>; + groupedFlatRows: Array>; + groupedRowsById: Record>; + onlyGroupedFlatRows: Array>; + onlyGroupedRowsById: Record>; + nonGroupedFlatRows: Array>; + nonGroupedRowsById: Record>; + rows: Array>; + flatRows: Array>; + rowsById: Record>; + toggleGroupBy: (columnId: IdType, value?: boolean) => void; + } + + export interface UseGroupByColumnProps { + canGroupBy: boolean; + isGrouped: boolean; + groupedIndex: number; + toggleGroupBy: () => void; + getGroupByToggleProps: ( + props?: Partial, + ) => TableGroupByToggleProps; + } + + export interface UseGroupByRowProps { + isGrouped: boolean; + groupByID: IdType; + groupByVal: string; + values: Record, AggregatedValue>; + subRows: Array>; + leafRows: Array>; + depth: number; + id: string; + index: number; + } + + export interface UseGroupByCellProps { + isGrouped: boolean; + isPlaceholder: boolean; + isAggregated: boolean; + } + + export type DefaultAggregators = + | 'sum' + | 'average' + | 'median' + | 'uniqueCount' + | 'count'; + + export type AggregatorFn = ( + columnValues: CellValue[], + rows: Array>, + isAggregated: boolean, + ) => AggregatedValue; + export type Aggregator = + | AggregatorFn + | DefaultAggregators + | string; + export type AggregatedValue = any; + //#endregion + + //#region usePagination + export function usePagination( + hooks: Hooks, + ): void; + + export namespace usePagination { + const pluginName = 'usePagination'; + } + + export type UsePaginationOptions = Partial<{ + pageCount: number; + manualPagination: boolean; + autoResetPage?: boolean | undefined; + paginateExpandedRows: boolean; + }>; + + export interface UsePaginationState { + pageSize: number; + pageIndex: number; + } + + export interface UsePaginationInstanceProps { + page: Array>; + pageCount: number; + pageOptions: number[]; + canPreviousPage: boolean; + canNextPage: boolean; + gotoPage: (updater: ((pageIndex: number) => number) | number) => void; + previousPage: () => void; + nextPage: () => void; + setPageSize: (pageSize: number) => void; + } + + //#endregion + + //#region useResizeColumns + export function useResizeColumns( + hooks: Hooks, + ): void; + + export namespace useResizeColumns { + const pluginName = 'useResizeColumns'; + } + + export interface UseResizeColumnsOptions { + disableResizing?: boolean | undefined; + autoResetResize?: boolean | undefined; + } + + export interface UseResizeColumnsState { + columnResizing: { + startX?: number | undefined; + columnWidth: number; + headerIdWidths: Record; + columnWidths: any; + isResizingColumn?: string | undefined; + }; + } + + export interface UseResizeColumnsColumnOptions { + disableResizing?: boolean | undefined; + } + + // export interface TableResizerProps {} + + export interface UseResizeColumnsColumnProps { + getResizerProps: (props?: Partial) => TableResizerProps; + canResize: boolean; + isResizing: boolean; + } + + //#endregion + + //#region useRowSelect + export function useRowSelect( + hooks: Hooks, + ): void; + + export namespace useRowSelect { + const pluginName = 'useRowSelect'; + } + + export type TableToggleAllRowsSelectedProps = TableToggleCommonProps; + + export type TableToggleRowsSelectedProps = TableToggleCommonProps; + + export type UseRowSelectOptions = Partial<{ + manualRowSelectedKey: IdType; + autoResetSelectedRows: boolean; + selectSubRows: boolean; + }>; + + export interface UseRowSelectHooks { + getToggleRowSelectedProps: Array< + PropGetter + >; + getToggleAllRowsSelectedProps: Array< + PropGetter + >; + getToggleAllPageRowsSelectedProps: Array< + PropGetter + >; + } + + export interface UseRowSelectState { + selectedRowIds: Record, boolean>; + } + + export interface UseRowSelectInstanceProps { + toggleRowSelected: (rowId: IdType, set?: boolean) => void; + toggleAllRowsSelected: (value?: boolean) => void; + getToggleAllRowsSelectedProps: ( + props?: Partial, + ) => TableToggleAllRowsSelectedProps; + getToggleAllPageRowsSelectedProps: ( + props?: Partial, + ) => TableToggleAllRowsSelectedProps; + isAllRowsSelected: boolean; + selectedFlatRows: Array>; + } + + export interface UseRowSelectRowProps { + isSelected: boolean; + isSomeSelected: boolean; + toggleRowSelected: (set?: boolean) => void; + getToggleRowSelectedProps: ( + props?: Partial, + ) => TableToggleRowsSelectedProps; + } + + //#endregion + + //#region useRowState + export function useRowState(hooks: Hooks): void; + + export namespace useRowState { + const pluginName = 'useRowState'; + } + + export type UseRowStateOptions = Partial<{ + initialRowStateAccessor: (row: Row) => UseRowStateLocalState; + getResetRowStateDeps: (instance: TableInstance) => any[]; + autoResetRowState?: boolean | undefined; + }>; + + export interface UseRowStateState { + rowState: Record }>; + } + + export interface UseRowStateInstanceProps { + setRowState: (rowPath: string[], updater: UseRowUpdater) => void; + setCellState: ( + rowPath: string[], + columnId: IdType, + updater: UseRowUpdater, + ) => void; + } + + export interface UseRowStateRowProps { + state: UseRowStateLocalState; + setState: (updater: UseRowUpdater) => void; + } + + export interface UseRowStateCellProps { + state: UseRowStateLocalState; + setState: (updater: UseRowUpdater) => void; + } + + export type UseRowUpdater = T | ((prev: T) => T); + export type UseRowStateLocalState = Record< + IdType, + T + >; + //#endregion + + //#region useSortBy + export function useSortBy(hooks: Hooks): void; + + export namespace useSortBy { + const pluginName = 'useSortBy'; + } + + export interface TableSortByToggleProps { + title?: string | undefined; + style?: CSSProperties | undefined; + onClick?: ((e: MouseEvent) => void) | undefined; + } + + export type UseSortByOptions = Partial<{ + manualSortBy: boolean; + disableSortBy: boolean; + defaultCanSort: boolean; + disableMultiSort: boolean; + isMultiSortEvent: (e: MouseEvent) => boolean; + maxMultiSortColCount: number; + disableSortRemove: boolean; + disabledMultiRemove: boolean; + orderByFn: ( + rows: Array>, + sortFns: Array>, + directions: boolean[], + ) => Array>; + sortTypes: Record>; + autoResetSortBy?: boolean | undefined; + }>; + + export interface UseSortByHooks { + getSortByToggleProps: Array>; + } + + export interface UseSortByState { + sortBy: Array>; + } + + export type UseSortByColumnOptions = Partial<{ + defaultCanSort: boolean; + disableSortBy: boolean; + sortDescFirst: boolean; + sortInverted: boolean; + sortType: SortByFn | DefaultSortTypes | string; + }>; + + export interface UseSortByInstanceProps { + rows: Array>; + preSortedRows: Array>; + setSortBy: (sortBy: Array>) => void; + toggleSortBy: ( + columnId: IdType, + descending?: boolean, + isMulti?: boolean, + ) => void; + } + + export interface UseSortByColumnProps { + canSort: boolean; + toggleSortBy: (descending?: boolean, multi?: boolean) => void; + getSortByToggleProps: ( + props?: Partial, + ) => TableSortByToggleProps; + clearSortBy: () => void; + isSorted: boolean; + sortedIndex: number; + isSortedDesc: boolean | undefined; + } + + export type OrderByFn = ( + rowA: Row, + rowB: Row, + ) => number; + export type SortByFn = ( + rowA: Row, + rowB: Row, + columnId: IdType, + desc?: boolean, + ) => number; + + export type DefaultSortTypes = + | 'alphanumeric' + | 'datetime' + | 'basic' + | 'string' + | 'number'; + + export interface SortingRule { + id: IdType; + desc?: boolean | undefined; + } + + //#endregion + + // Additional API + export const actions: Record; + export type ActionType = { type: string } & Record; + export const defaultColumn: Partial & Record; + + // Helpers + export type StringKey = Extract; + export type IdType = StringKey | string; + export type CellValue = V; + + export type Renderer = + | ComponentType + | ReactElement + | string + | number + | ReactFragment; + + export interface PluginHook { + (hooks: Hooks): void; + pluginName?: string | undefined; + } + + export type TableDispatch
= (action: A) => void; + + // utils + export function defaultOrderByFn( + arr: Array>, + funcs: Array>, + dirs: boolean[], + ): Array>; + + export function defaultGroupByFn( + rows: Array>, + columnId: IdType, + ): Record>>; + + export function makePropGetter(hooks: Hooks, ...meta: any[]): any; + + export function reduceHooks( + hooks: Hooks, + initial: T, + ...args: any[] + ): T; + + export function loopHooks(hooks: Hooks, ...args: any[]): void; + + export function ensurePluginOrder( + plugins: Array>, + befores: string[], + pluginName: string, + ): void; + + export function functionalUpdate( + updater: any, + old: Partial>, + ): Partial>; + + export function useGetLatest(obj: T): () => T; + + export function safeUseLayoutEffect( + effect: EffectCallback, + deps?: DependencyList, + ): void; + + export function useMountedLayoutEffect( + effect: EffectCallback, + deps?: DependencyList, + ): void; + + export function useAsyncDebounce any>( + defaultFn: F, + defaultWait?: number, + ): F; + + export function makeRenderer( + instance: TableInstance, + column: ColumnInstance, + meta?: any, + ): ReactElement; + + ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// + + // Additional Types + + export type FieldType = 'text' | 'number' | 'date' | string; + + export type CellRendererProps = { + /** + * Cell HTML props passed from the Table. + */ + cellElementProps: TableCellProps; + /** + * Table specific cell props like `column`, `row`. + */ + cellProps: CellProps; + /** + * Cell's content. + */ + children: React.ReactNode; + /** + * Function that returns whether the cell is disabled. + */ + isDisabled?: (rowData: D) => boolean; + }; +} diff --git a/playgrounds/vite/src/App.tsx b/playgrounds/vite/src/App.tsx index 08bec5411e1..e38d3e19871 100644 --- a/playgrounds/vite/src/App.tsx +++ b/playgrounds/vite/src/App.tsx @@ -106,7 +106,9 @@ const App = () => { disableToggleVisibility: true, disableReordering: true, width: 200, - testing1: (props: any) =>
{props}
, + testing1: (props: CellProps) => ( +
{`${props}`}
+ ), // sticky: 'left', // testing1: '', // testig From 9b2a8f1ba5a73f005813ab54285bede853861fdb Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Wed, 23 Aug 2023 07:49:02 -0400 Subject: [PATCH 022/196] Not working after adding the definition for Renderer --- .../src/types/react-table/index.d.ts | 873 +++++++++++++++++- 1 file changed, 867 insertions(+), 6 deletions(-) diff --git a/packages/itwinui-react/src/types/react-table/index.d.ts b/packages/itwinui-react/src/types/react-table/index.d.ts index 3ef5d9b3415..80cc97d4294 100644 --- a/packages/itwinui-react/src/types/react-table/index.d.ts +++ b/packages/itwinui-react/src/types/react-table/index.d.ts @@ -101,11 +101,24 @@ declare module 'react-table' { lastSelectedRowId?: string; } + export interface Hooks + extends UseTableHooks, + UseExpandedHooks, + UseGroupByHooks, + UseRowSelectHooks, + UseSortByHooks {} + + export interface Cell + extends UseTableCellProps, + UseGroupByCellProps, + UseRowStateCellProps {} + export interface ColumnInterface extends UseTableColumnOptions, UseSortByColumnOptions, UseFiltersColumnOptions, - UseResizeColumnsColumnOptions { + UseResizeColumnsColumnOptions, + UseGlobalFiltersColumnOptions { /** * Custom class name applied to header column cell. */ @@ -162,6 +175,11 @@ declare module 'react-table' { testing1: Renderer> | undefined; } + // eslint-disable-next-line @typescript-eslint/no-empty-interface + export interface ColumnGroupInterface { + // columns: Array>; + } + export type ColumnGroup = ColumnInterface & ColumnGroupInterface & ( @@ -211,12 +229,12 @@ declare module 'react-table' { | undefined; }; - // export type Column = - // | ColumnGroup - // | ColumnWithLooseAccessor - // | ColumnWithStrictAccessor; + export type Column = + | ColumnGroup + | ColumnWithLooseAccessor + | ColumnWithStrictAccessor; - export type Column = ColumnWithStrictAccessor; + // export type Column = ColumnWithStrictAccessor; export interface ColumnInstance extends Omit, 'id'>, @@ -233,6 +251,10 @@ declare module 'react-table' { originalSticky?: 'left' | 'right' | 'none'; } + export interface HeaderGroup + extends ColumnInstance, + UseTableHeaderGroupProps {} + export interface Row extends UseTableRowProps, UseExpandedRowProps, @@ -242,6 +264,51 @@ declare module 'react-table' { initialSubRows: Row[]; } + export interface TableCommonProps { + style?: CSSProperties | undefined; + className?: string | undefined; + role?: string | undefined; + } + + export type TableProps = TableCommonProps; + + export type TableBodyProps = TableCommonProps; + + export interface TableKeyedProps extends TableCommonProps { + key: React.Key; + } + + export type TableHeaderGroupProps = TableKeyedProps; + + export type TableFooterGroupProps = TableKeyedProps; + + export type TableHeaderProps = TableKeyedProps; + + export type TableFooterProps = TableKeyedProps; + + export type TableRowProps = TableKeyedProps; + + export type TableCellProps = TableKeyedProps; + + export interface TableToggleCommonProps extends TableCommonProps { + onChange?: ((e: ChangeEvent) => void) | undefined; + checked?: boolean | undefined; + title?: string | undefined; + indeterminate?: boolean | undefined; + } + + export interface MetaBase { + instance: TableInstance; + userProps: any; + } + + // inspired by ExtendState in https://github.com/reduxjs/redux/blob/master/src/types/store.ts + export type Meta> = [ + Extension, + ] extends [never] + ? M + : M & Extension; + //#region useTable export function useTable( options: TableOptions, @@ -273,6 +340,109 @@ declare module 'react-table' { autoResetHiddenColumns: boolean; }>; + export type PropGetter< + D extends object, + Props, + T extends object = never, + P = Partial, + > = ((props: P, meta: Meta) => P | P[]) | P | P[]; + + export type TablePropGetter = PropGetter; + + export type TableBodyPropGetter = PropGetter< + D, + TableBodyProps + >; + + export type HeaderPropGetter = PropGetter< + D, + TableHeaderProps, + { column: HeaderGroup } + >; + + export type FooterGroupPropGetter = PropGetter< + D, + TableFooterGroupProps, + { column: HeaderGroup } + >; + + export type HeaderGroupPropGetter = PropGetter< + D, + TableHeaderGroupProps, + { column: HeaderGroup } + >; + + export type FooterPropGetter = PropGetter< + D, + TableFooterProps, + { column: HeaderGroup } + >; + + export type RowPropGetter = PropGetter< + D, + TableRowProps, + { row: Row } + >; + + export type CellPropGetter = PropGetter< + D, + TableCellProps, + { cell: Cell } + >; + + export interface ReducerTableState + extends TableState, + Record {} + + export interface UseTableHooks extends Record { + useOptions: Array< + (options: TableOptions, args: TableOptions) => TableOptions + >; + stateReducers: Array< + ( + newState: TableState, + action: ActionType, + previousState?: TableState, + instance?: TableInstance, + ) => ReducerTableState | undefined + >; + columns: Array< + (columns: Array>, meta: Meta) => Array> + >; + columnsDeps: Array<(deps: any[], meta: Meta) => any[]>; + allColumns: Array< + (allColumns: Array>, meta: Meta) => Array> + >; + allColumnsDeps: Array<(deps: any[], meta: Meta) => any[]>; + visibleColumns: Array< + (allColumns: Array>, meta: Meta) => Array> + >; + visibleColumnsDeps: Array<(deps: any[], meta: Meta) => any[]>; + headerGroups: Array< + ( + allColumns: Array>, + meta: Meta, + ) => Array> + >; + headerGroupsDeps: Array<(deps: any[], meta: Meta) => any[]>; + useInstanceBeforeDimensions: Array<(instance: TableInstance) => void>; + useInstance: Array<(instance: TableInstance) => void>; + prepareRow: Array<(row: Row, meta: Meta) => void>; + useControlledState: Array< + (state: TableState, meta: Meta) => TableState + >; + + getTableProps: Array>; + getTableBodyProps: Array>; + getHeaderGroupProps: Array>; + getFooterGroupProps: Array>; + getHeaderProps: Array>; + getFooterProps: Array>; + getRowProps: Array>; + getCellProps: Array>; + useFinalInstance: Array<(instance: TableInstance) => void>; + } + export interface UseTableColumnOptions { id?: IdType | undefined; Header?: Renderer> | undefined; @@ -282,6 +452,12 @@ declare module 'react-table' { maxWidth?: number | undefined; } + type UpdateHiddenColumns = ( + oldHidden: Array>, + ) => Array>; + + export type TableToggleHideAllColumnProps = TableToggleCommonProps; + export interface UseTableInstanceProps { state: TableState; plugins: Array>; @@ -312,6 +488,60 @@ declare module 'react-table' { getHooks: () => Hooks; } + export interface UseTableHeaderGroupProps { + headers: Array>; + getHeaderGroupProps: ( + propGetter?: HeaderGroupPropGetter, + ) => TableHeaderProps; + getFooterGroupProps: ( + propGetter?: FooterGroupPropGetter, + ) => TableFooterProps; + totalHeaderCount: number; // not documented + } + + export interface UseTableColumnProps { + id: IdType; + columns?: Array> | undefined; + isVisible: boolean; + render: (type: 'Header' | 'Footer' | string, props?: object) => ReactNode; + totalLeft: number; + totalWidth: number; + getHeaderProps: (propGetter?: HeaderPropGetter) => TableHeaderProps; + getFooterProps: (propGetter?: FooterPropGetter) => TableFooterProps; + toggleHidden: (value?: boolean) => void; + parent?: ColumnInstance | undefined; // not documented + getToggleHiddenProps: (userProps?: any) => any; + depth: number; // not documented + placeholderOf?: ColumnInstance | undefined; + } + + export interface UseTableRowProps { + cells: Array>; + allCells: Array>; + values: Record, CellValue>; + getRowProps: (propGetter?: RowPropGetter) => TableRowProps; + index: number; + original: D; + id: string; + subRows: Array>; + } + + export interface UseTableCellProps { + column: ColumnInstance; + row: Row; + value: CellValue; + getCellProps: (propGetter?: CellPropGetter) => TableCellProps; + render: (type: 'Cell' | string, userProps?: object) => ReactNode; + } + + export type HeaderProps = TableInstance & { + column: ColumnInstance; + }; + + export type FooterProps = TableInstance & { + column: ColumnInstance; + }; + export type CellProps = { column: ColumnInstance; row: Row; @@ -356,4 +586,635 @@ declare module 'react-table' { ] satisfies Array; const columns = [{}] satisfies Array>; + + ///////////////////////////////////////////////// + + //#region useAbsoluteLayout + export function useAbsoluteLayout(hooks: Hooks): void; + + export namespace useAbsoluteLayout { + const pluginName = 'useAbsoluteLayout'; + } + //#endregion + + //#region useBlockLayout + export function useBlockLayout(hooks: Hooks): void; + + export namespace useBlockLayout { + const pluginName = 'useBlockLayout'; + } + //#endregion + + //#region useColumnOrder + export function useColumnOrder( + hooks: Hooks, + ): void; + + export namespace useColumnOrder { + const pluginName = 'useColumnOrder'; + } + + export interface UseColumnOrderState { + columnOrder: Array>; + } + + export interface UseColumnOrderInstanceProps { + setColumnOrder: ( + updater: + | ((columnOrder: Array>) => Array>) + | Array>, + ) => void; + } + + //#endregion + + //#region useExpanded + export function useExpanded(hooks: Hooks): void; + + export namespace useExpanded { + const pluginName = 'useExpanded'; + } + + export type TableExpandedToggleProps = TableKeyedProps; + + export type UseExpandedOptions = Partial<{ + manualExpandedKey: IdType; + paginateExpandedRows: boolean; + expandSubRows: boolean; + autoResetExpanded?: boolean | undefined; + }>; + + export interface UseExpandedHooks { + getToggleRowsExpandedProps: Array>; + getToggleAllRowsExpandedProps: Array>; + } + + export interface UseExpandedState { + expanded: Record, boolean>; + } + + export interface UseExpandedInstanceProps { + preExpandedRows: Array>; + expandedRows: Array>; + rows: Array>; + expandedDepth: number; + isAllRowsExpanded: boolean; + toggleRowExpanded: (id: Array>, value?: boolean) => void; + toggleAllRowsExpanded: (value?: boolean) => void; + } + + export interface UseExpandedRowProps { + isExpanded: boolean; + canExpand: boolean; + subRows: Array>; + toggleRowExpanded: (value?: boolean) => void; + getToggleRowExpandedProps: ( + props?: Partial, + ) => TableExpandedToggleProps; + depth: number; + } + + //#endregion + + //#region useFilters + export function useFilters(hooks: Hooks): void; + + export namespace useFilters { + const pluginName = 'useFilters'; + } + + export type UseFiltersOptions = Partial<{ + manualFilters: boolean; + disableFilters: boolean; + defaultCanFilter: boolean; + filterTypes: FilterTypes; + autoResetFilters?: boolean | undefined; + }>; + + export interface UseFiltersState { + filters: Filters; + } + + export type UseFiltersColumnOptions = Partial<{ + Filter: Renderer>; + disableFilters: boolean; + defaultCanFilter: boolean; + filter: FilterType | DefaultFilterTypes | string; + }>; + + export interface UseFiltersInstanceProps { + preFilteredRows: Array>; + preFilteredFlatRows: Array>; + preFilteredRowsById: Record>; + filteredRows: Array>; + filteredFlatRows: Array>; + filteredRowsById: Record>; + rows: Array>; + flatRows: Array>; + rowsById: Record>; + setFilter: ( + columnId: IdType, + updater: ((filterValue: FilterValue) => FilterValue) | FilterValue, + ) => void; + setAllFilters: ( + updater: Filters | ((filters: Filters) => Filters), + ) => void; + } + + export interface UseFiltersColumnProps { + canFilter: boolean; + setFilter: ( + updater: ((filterValue: FilterValue) => FilterValue) | FilterValue, + ) => void; + filterValue: FilterValue; + preFilteredRows: Array>; + filteredRows: Array>; + } + + export type FilterProps = HeaderProps; + export type FilterValue = any; + export type Filters = Array<{ + id: IdType; + value: FilterValue; + }>; + export type FilterTypes = Record>; + + export type DefaultFilterTypes = + | 'text' + | 'exactText' + | 'exactTextCase' + | 'includes' + | 'includesAll' + | 'exact' + | 'equals' + | 'between'; + + export interface FilterType { + ( + rows: Array>, + columnIds: Array>, + filterValue: FilterValue, + ): Array>; + + autoRemove?: ((filterValue: FilterValue) => boolean) | undefined; + } + + //#endregion + + //#region useFlexLayout + export function useFlexLayout( + hooks: Hooks, + ): void; + + export namespace useFlexLayout { + const pluginName = 'useFlexLayout'; + } + //#endregion + + //#region useGridLayout + export function useGridLayout( + hooks: Hooks, + ): void; + + export namespace useGridLayout { + const pluginName = 'useGridLayout'; + } + //#endregion + + //#region useGlobalFilter + export function useGlobalFilter( + hooks: Hooks, + ): void; + + export namespace useGlobalFilter { + const pluginName = 'useGlobalFilter'; + } + + export type UseGlobalFiltersOptions = Partial<{ + globalFilter: + | (( + rows: Array>, + columnIds: Array>, + filterValue: any, + ) => Array>) + | string; + manualGlobalFilter: boolean; + filterTypes: FilterTypes; + autoResetGlobalFilter?: boolean | undefined; + disableGlobalFilter?: boolean | undefined; + }>; + + export interface UseGlobalFiltersState { + globalFilter: any; + } + + export type UseGlobalFiltersColumnOptions = Partial<{ + disableGlobalFilter?: boolean | undefined; + }>; + + export interface UseGlobalFiltersInstanceProps { + preGlobalFilteredRows: Array>; + preGlobalFilteredFlatRows: Array>; + preGlobalFilteredRowsById: Record>; + globalFilteredRows: Array>; + globalFilteredFlatRows: Array>; + globalFilteredRowsById: Record>; + rows: Array>; + flatRows: Array>; + rowsById: Record>; + setGlobalFilter: (filterValue: FilterValue) => void; + } + + //#endregion + + //#region useGroupBy + export function useGroupBy(hooks: Hooks): void; + + export namespace useGroupBy { + const pluginName = 'useGroupBy'; + } + + export interface TableGroupByToggleProps { + title?: string | undefined; + style?: CSSProperties | undefined; + onClick?: ((e: MouseEvent) => void) | undefined; + } + + export type UseGroupByOptions = Partial<{ + manualGroupBy: boolean; + disableGroupBy: boolean; + defaultCanGroupBy: boolean; + aggregations: Record>; + groupByFn: ( + rows: Array>, + columnId: IdType, + ) => Record>>; + autoResetGroupBy?: boolean | undefined; + }>; + + export interface UseGroupByHooks { + getGroupByToggleProps: Array>; + } + + export interface UseGroupByState { + groupBy: Array>; + } + + export type UseGroupByColumnOptions = Partial<{ + aggregate: Aggregator; + Aggregated: Renderer>; + disableGroupBy: boolean; + defaultCanGroupBy: boolean; + }>; + + export interface UseGroupByInstanceProps { + preGroupedRows: Array>; + preGroupedFlatRows: Array>; + preGroupedRowsById: Record>; + groupedRows: Array>; + groupedFlatRows: Array>; + groupedRowsById: Record>; + onlyGroupedFlatRows: Array>; + onlyGroupedRowsById: Record>; + nonGroupedFlatRows: Array>; + nonGroupedRowsById: Record>; + rows: Array>; + flatRows: Array>; + rowsById: Record>; + toggleGroupBy: (columnId: IdType, value?: boolean) => void; + } + + export interface UseGroupByColumnProps { + canGroupBy: boolean; + isGrouped: boolean; + groupedIndex: number; + toggleGroupBy: () => void; + getGroupByToggleProps: ( + props?: Partial, + ) => TableGroupByToggleProps; + } + + export interface UseGroupByRowProps { + isGrouped: boolean; + groupByID: IdType; + groupByVal: string; + values: Record, AggregatedValue>; + subRows: Array>; + leafRows: Array>; + depth: number; + id: string; + index: number; + } + + export interface UseGroupByCellProps { + isGrouped: boolean; + isPlaceholder: boolean; + isAggregated: boolean; + } + + export type DefaultAggregators = + | 'sum' + | 'average' + | 'median' + | 'uniqueCount' + | 'count'; + + export type AggregatorFn = ( + columnValues: CellValue[], + rows: Array>, + isAggregated: boolean, + ) => AggregatedValue; + export type Aggregator = + | AggregatorFn + | DefaultAggregators + | string; + export type AggregatedValue = any; + //#endregion + + //#region usePagination + export function usePagination( + hooks: Hooks, + ): void; + + export namespace usePagination { + const pluginName = 'usePagination'; + } + + export type UsePaginationOptions = Partial<{ + pageCount: number; + manualPagination: boolean; + autoResetPage?: boolean | undefined; + paginateExpandedRows: boolean; + }>; + + export interface UsePaginationState { + pageSize: number; + pageIndex: number; + } + + export interface UsePaginationInstanceProps { + page: Array>; + pageCount: number; + pageOptions: number[]; + canPreviousPage: boolean; + canNextPage: boolean; + gotoPage: (updater: ((pageIndex: number) => number) | number) => void; + previousPage: () => void; + nextPage: () => void; + setPageSize: (pageSize: number) => void; + } + + //#endregion + + //#region useResizeColumns + export function useResizeColumns( + hooks: Hooks, + ): void; + + export namespace useResizeColumns { + const pluginName = 'useResizeColumns'; + } + + export interface UseResizeColumnsOptions { + disableResizing?: boolean | undefined; + autoResetResize?: boolean | undefined; + } + + export interface UseResizeColumnsState { + columnResizing: { + startX?: number | undefined; + columnWidth: number; + headerIdWidths: Record; + columnWidths: any; + isResizingColumn?: string | undefined; + }; + } + + export interface UseResizeColumnsColumnOptions { + disableResizing?: boolean | undefined; + } + + // export interface TableResizerProps {} + + export interface UseResizeColumnsColumnProps { + getResizerProps: (props?: Partial) => TableResizerProps; + canResize: boolean; + isResizing: boolean; + } + + //#endregion + + //#region useRowSelect + export function useRowSelect( + hooks: Hooks, + ): void; + + export namespace useRowSelect { + const pluginName = 'useRowSelect'; + } + + export type TableToggleAllRowsSelectedProps = TableToggleCommonProps; + + export type TableToggleRowsSelectedProps = TableToggleCommonProps; + + export type UseRowSelectOptions = Partial<{ + manualRowSelectedKey: IdType; + autoResetSelectedRows: boolean; + selectSubRows: boolean; + }>; + + export interface UseRowSelectHooks { + getToggleRowSelectedProps: Array< + PropGetter + >; + getToggleAllRowsSelectedProps: Array< + PropGetter + >; + getToggleAllPageRowsSelectedProps: Array< + PropGetter + >; + } + + export interface UseRowSelectState { + selectedRowIds: Record, boolean>; + } + + export interface UseRowSelectInstanceProps { + toggleRowSelected: (rowId: IdType, set?: boolean) => void; + toggleAllRowsSelected: (value?: boolean) => void; + getToggleAllRowsSelectedProps: ( + props?: Partial, + ) => TableToggleAllRowsSelectedProps; + getToggleAllPageRowsSelectedProps: ( + props?: Partial, + ) => TableToggleAllRowsSelectedProps; + isAllRowsSelected: boolean; + selectedFlatRows: Array>; + } + + export interface UseRowSelectRowProps { + isSelected: boolean; + isSomeSelected: boolean; + toggleRowSelected: (set?: boolean) => void; + getToggleRowSelectedProps: ( + props?: Partial, + ) => TableToggleRowsSelectedProps; + } + + //#endregion + + //#region useRowState + export function useRowState(hooks: Hooks): void; + + export namespace useRowState { + const pluginName = 'useRowState'; + } + + export type UseRowStateOptions = Partial<{ + initialRowStateAccessor: (row: Row) => UseRowStateLocalState; + getResetRowStateDeps: (instance: TableInstance) => any[]; + autoResetRowState?: boolean | undefined; + }>; + + export interface UseRowStateState { + rowState: Record }>; + } + + export interface UseRowStateInstanceProps { + setRowState: (rowPath: string[], updater: UseRowUpdater) => void; + setCellState: ( + rowPath: string[], + columnId: IdType, + updater: UseRowUpdater, + ) => void; + } + + export interface UseRowStateRowProps { + state: UseRowStateLocalState; + setState: (updater: UseRowUpdater) => void; + } + + export interface UseRowStateCellProps { + state: UseRowStateLocalState; + setState: (updater: UseRowUpdater) => void; + } + + export type UseRowUpdater = T | ((prev: T) => T); + export type UseRowStateLocalState = Record< + IdType, + T + >; + //#endregion + + //#region useSortBy + export function useSortBy(hooks: Hooks): void; + + export namespace useSortBy { + const pluginName = 'useSortBy'; + } + + export interface TableSortByToggleProps { + title?: string | undefined; + style?: CSSProperties | undefined; + onClick?: ((e: MouseEvent) => void) | undefined; + } + + export type UseSortByOptions = Partial<{ + manualSortBy: boolean; + disableSortBy: boolean; + defaultCanSort: boolean; + disableMultiSort: boolean; + isMultiSortEvent: (e: MouseEvent) => boolean; + maxMultiSortColCount: number; + disableSortRemove: boolean; + disabledMultiRemove: boolean; + orderByFn: ( + rows: Array>, + sortFns: Array>, + directions: boolean[], + ) => Array>; + sortTypes: Record>; + autoResetSortBy?: boolean | undefined; + }>; + + export interface UseSortByHooks { + getSortByToggleProps: Array>; + } + + export interface UseSortByState { + sortBy: Array>; + } + + export type UseSortByColumnOptions = Partial<{ + defaultCanSort: boolean; + disableSortBy: boolean; + sortDescFirst: boolean; + sortInverted: boolean; + sortType: SortByFn | DefaultSortTypes | string; + }>; + + export interface UseSortByInstanceProps { + rows: Array>; + preSortedRows: Array>; + setSortBy: (sortBy: Array>) => void; + toggleSortBy: ( + columnId: IdType, + descending?: boolean, + isMulti?: boolean, + ) => void; + } + + export interface UseSortByColumnProps { + canSort: boolean; + toggleSortBy: (descending?: boolean, multi?: boolean) => void; + getSortByToggleProps: ( + props?: Partial, + ) => TableSortByToggleProps; + clearSortBy: () => void; + isSorted: boolean; + sortedIndex: number; + isSortedDesc: boolean | undefined; + } + + export type OrderByFn = ( + rowA: Row, + rowB: Row, + ) => number; + export type SortByFn = ( + rowA: Row, + rowB: Row, + columnId: IdType, + desc?: boolean, + ) => number; + + export type DefaultSortTypes = + | 'alphanumeric' + | 'datetime' + | 'basic' + | 'string' + | 'number'; + + export interface SortingRule { + id: IdType; + desc?: boolean | undefined; + } + + //#endregion + + // Additional API + export const actions: Record; + export type ActionType = { type: string } & Record; + export const defaultColumn: Partial & Record; + + // Helpers + export type StringKey = Extract; + export type IdType = StringKey | string; + export type CellValue = V; + + export type Renderer = + | ComponentType + | ReactElement + | string + | number + | ReactFragment; } From 122c1f363a05deb50d2e88a13432152c233c7ee5 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Wed, 23 Aug 2023 07:57:17 -0400 Subject: [PATCH 023/196] Working after removing other types --- .../src/types/react-table/index.d.ts | 920 +----------------- playgrounds/vite/src/App.tsx | 9 +- 2 files changed, 21 insertions(+), 908 deletions(-) diff --git a/packages/itwinui-react/src/types/react-table/index.d.ts b/packages/itwinui-react/src/types/react-table/index.d.ts index 80cc97d4294..15611354e85 100644 --- a/packages/itwinui-react/src/types/react-table/index.d.ts +++ b/packages/itwinui-react/src/types/react-table/index.d.ts @@ -56,81 +56,31 @@ declare module 'react-table' { } export interface TableInstance - extends Omit, 'columns' | 'pageCount'>, - UseTableInstanceProps, - UseColumnOrderInstanceProps, - UseExpandedInstanceProps, - UseFiltersInstanceProps, - UseGlobalFiltersInstanceProps, - UseGroupByInstanceProps, - UsePaginationInstanceProps, - UseRowSelectInstanceProps, - UseRowStateInstanceProps, - UseSortByInstanceProps { + extends Omit, 'columns' | 'pageCount'> { initialRows: Row[]; columnResizeMode: TableOptions['columnResizeMode']; tableWidth: number; } - export interface TableState - extends UseColumnOrderState, - UseExpandedState, - UseFiltersState, - UseGlobalFiltersState, - UseGroupByState, - UsePaginationState, - UseRowSelectState, - UseRowStateState, - UseSortByState { - hiddenColumns?: Array> | undefined; - columnResizing: { - startX?: number; - columnWidth?: number; - nextColumnWidth?: number; - headerIdWidths?: Array<[string, number]>; - nextHeaderIdWidths?: Array<[string, number]>; - columnWidths: Record; - isResizingColumn?: string; - }; - isTableResizing?: boolean; - columnReorderStartIndex: number; - sticky: { - isScrolledToRight?: boolean; - isScrolledToLeft?: boolean; - }; - lastSelectedRowId?: string; - } + export interface TableState {} - export interface Hooks - extends UseTableHooks, - UseExpandedHooks, - UseGroupByHooks, - UseRowSelectHooks, - UseSortByHooks {} + // export interface Hooks + // extends UseTableHooks, + // UseExpandedHooks, + // UseGroupByHooks, + // UseRowSelectHooks, + // UseSortByHooks {} - export interface Cell - extends UseTableCellProps, - UseGroupByCellProps, - UseRowStateCellProps {} + // export interface Cell + // extends UseTableCellProps, + // UseGroupByCellProps, + // UseRowStateCellProps {} - export interface ColumnInterface - extends UseTableColumnOptions, - UseSortByColumnOptions, - UseFiltersColumnOptions, - UseResizeColumnsColumnOptions, - UseGlobalFiltersColumnOptions { + export interface ColumnInterface { /** * Custom class name applied to header column cell. */ columnClassName?: string; - /** - * Custom class name applied to each column's cell. - */ - cellClassName?: string; - /** - * Type of the data in cell. Used for manual filtering. - */ - fieldType?: FieldType; /** * Filter component used as a column filter. Should use filters from `tableFilters`. */ @@ -152,20 +102,6 @@ declare module 'react-table' { * } */ cellRenderer?: (props: CellRendererProps) => React.ReactNode; - /** - * If true, column can't be reordered. - * @default false - */ - disableReordering?: boolean; - /** - * If true, column's visibility cannot be toggled. - * @default false - */ - disableToggleVisibility?: boolean; - /** - * Side on which column should be sticked to. - */ - sticky?: 'left' | 'right'; } export interface ColumnInterfaceBasedOnValue { @@ -236,79 +172,16 @@ declare module 'react-table' { // export type Column = ColumnWithStrictAccessor; - export interface ColumnInstance - extends Omit, 'id'>, - ColumnInterfaceBasedOnValue, - UseTableColumnProps, - UseFiltersColumnProps, - UseGroupByColumnProps, - UseResizeColumnsColumnProps, - UseSortByColumnProps { - originalWidth: number; - resizeWidth?: number; - isResizerVisible?: boolean; - getDragAndDropProps: () => TableKeyedProps; - originalSticky?: 'left' | 'right' | 'none'; - } + export type ColumnInstance = Omit, 'id'>; export interface HeaderGroup extends ColumnInstance, UseTableHeaderGroupProps {} - export interface Row - extends UseTableRowProps, - UseExpandedRowProps, - UseGroupByRowProps, - UseRowSelectRowProps, - UseRowStateRowProps { + export interface Row extends UseTableRowProps { initialSubRows: Row[]; } - export interface TableCommonProps { - style?: CSSProperties | undefined; - className?: string | undefined; - role?: string | undefined; - } - - export type TableProps = TableCommonProps; - - export type TableBodyProps = TableCommonProps; - - export interface TableKeyedProps extends TableCommonProps { - key: React.Key; - } - - export type TableHeaderGroupProps = TableKeyedProps; - - export type TableFooterGroupProps = TableKeyedProps; - - export type TableHeaderProps = TableKeyedProps; - - export type TableFooterProps = TableKeyedProps; - - export type TableRowProps = TableKeyedProps; - - export type TableCellProps = TableKeyedProps; - - export interface TableToggleCommonProps extends TableCommonProps { - onChange?: ((e: ChangeEvent) => void) | undefined; - checked?: boolean | undefined; - title?: string | undefined; - indeterminate?: boolean | undefined; - } - - export interface MetaBase { - instance: TableInstance; - userProps: any; - } - - // inspired by ExtendState in https://github.com/reduxjs/redux/blob/master/src/types/store.ts - export type Meta> = [ - Extension, - ] extends [never] - ? M - : M & Extension; - //#region useTable export function useTable( options: TableOptions, @@ -340,60 +213,6 @@ declare module 'react-table' { autoResetHiddenColumns: boolean; }>; - export type PropGetter< - D extends object, - Props, - T extends object = never, - P = Partial, - > = ((props: P, meta: Meta) => P | P[]) | P | P[]; - - export type TablePropGetter = PropGetter; - - export type TableBodyPropGetter = PropGetter< - D, - TableBodyProps - >; - - export type HeaderPropGetter = PropGetter< - D, - TableHeaderProps, - { column: HeaderGroup } - >; - - export type FooterGroupPropGetter = PropGetter< - D, - TableFooterGroupProps, - { column: HeaderGroup } - >; - - export type HeaderGroupPropGetter = PropGetter< - D, - TableHeaderGroupProps, - { column: HeaderGroup } - >; - - export type FooterPropGetter = PropGetter< - D, - TableFooterProps, - { column: HeaderGroup } - >; - - export type RowPropGetter = PropGetter< - D, - TableRowProps, - { row: Row } - >; - - export type CellPropGetter = PropGetter< - D, - TableCellProps, - { cell: Cell } - >; - - export interface ReducerTableState - extends TableState, - Record {} - export interface UseTableHooks extends Record { useOptions: Array< (options: TableOptions, args: TableOptions) => TableOptions @@ -443,105 +262,6 @@ declare module 'react-table' { useFinalInstance: Array<(instance: TableInstance) => void>; } - export interface UseTableColumnOptions { - id?: IdType | undefined; - Header?: Renderer> | undefined; - Footer?: Renderer> | undefined; - width?: number | string | undefined; - minWidth?: number | undefined; - maxWidth?: number | undefined; - } - - type UpdateHiddenColumns = ( - oldHidden: Array>, - ) => Array>; - - export type TableToggleHideAllColumnProps = TableToggleCommonProps; - - export interface UseTableInstanceProps { - state: TableState; - plugins: Array>; - dispatch: TableDispatch; - columns: Array>; - allColumns: Array>; - visibleColumns: Array>; - headerGroups: Array>; - footerGroups: Array>; - headers: Array>; - flatHeaders: Array>; - rows: Array>; - rowsById: Record>; - getTableProps: (propGetter?: TablePropGetter) => TableProps; - getTableBodyProps: (propGetter?: TableBodyPropGetter) => TableBodyProps; - prepareRow: (row: Row) => void; - flatRows: Array>; - totalColumnsWidth: number; - allColumnsHidden: boolean; - toggleHideColumn: (columnId: IdType, value?: boolean) => void; - setHiddenColumns: ( - param: Array> | UpdateHiddenColumns, - ) => void; - toggleHideAllColumns: (value?: boolean) => void; - getToggleHideAllColumnsProps: ( - props?: Partial, - ) => TableToggleHideAllColumnProps; - getHooks: () => Hooks; - } - - export interface UseTableHeaderGroupProps { - headers: Array>; - getHeaderGroupProps: ( - propGetter?: HeaderGroupPropGetter, - ) => TableHeaderProps; - getFooterGroupProps: ( - propGetter?: FooterGroupPropGetter, - ) => TableFooterProps; - totalHeaderCount: number; // not documented - } - - export interface UseTableColumnProps { - id: IdType; - columns?: Array> | undefined; - isVisible: boolean; - render: (type: 'Header' | 'Footer' | string, props?: object) => ReactNode; - totalLeft: number; - totalWidth: number; - getHeaderProps: (propGetter?: HeaderPropGetter) => TableHeaderProps; - getFooterProps: (propGetter?: FooterPropGetter) => TableFooterProps; - toggleHidden: (value?: boolean) => void; - parent?: ColumnInstance | undefined; // not documented - getToggleHiddenProps: (userProps?: any) => any; - depth: number; // not documented - placeholderOf?: ColumnInstance | undefined; - } - - export interface UseTableRowProps { - cells: Array>; - allCells: Array>; - values: Record, CellValue>; - getRowProps: (propGetter?: RowPropGetter) => TableRowProps; - index: number; - original: D; - id: string; - subRows: Array>; - } - - export interface UseTableCellProps { - column: ColumnInstance; - row: Row; - value: CellValue; - getCellProps: (propGetter?: CellPropGetter) => TableCellProps; - render: (type: 'Cell' | string, userProps?: object) => ReactNode; - } - - export type HeaderProps = TableInstance & { - column: ColumnInstance; - }; - - export type FooterProps = TableInstance & { - column: ColumnInstance; - }; - export type CellProps = { column: ColumnInstance; row: Row; @@ -589,616 +309,6 @@ declare module 'react-table' { ///////////////////////////////////////////////// - //#region useAbsoluteLayout - export function useAbsoluteLayout(hooks: Hooks): void; - - export namespace useAbsoluteLayout { - const pluginName = 'useAbsoluteLayout'; - } - //#endregion - - //#region useBlockLayout - export function useBlockLayout(hooks: Hooks): void; - - export namespace useBlockLayout { - const pluginName = 'useBlockLayout'; - } - //#endregion - - //#region useColumnOrder - export function useColumnOrder( - hooks: Hooks, - ): void; - - export namespace useColumnOrder { - const pluginName = 'useColumnOrder'; - } - - export interface UseColumnOrderState { - columnOrder: Array>; - } - - export interface UseColumnOrderInstanceProps { - setColumnOrder: ( - updater: - | ((columnOrder: Array>) => Array>) - | Array>, - ) => void; - } - - //#endregion - - //#region useExpanded - export function useExpanded(hooks: Hooks): void; - - export namespace useExpanded { - const pluginName = 'useExpanded'; - } - - export type TableExpandedToggleProps = TableKeyedProps; - - export type UseExpandedOptions = Partial<{ - manualExpandedKey: IdType; - paginateExpandedRows: boolean; - expandSubRows: boolean; - autoResetExpanded?: boolean | undefined; - }>; - - export interface UseExpandedHooks { - getToggleRowsExpandedProps: Array>; - getToggleAllRowsExpandedProps: Array>; - } - - export interface UseExpandedState { - expanded: Record, boolean>; - } - - export interface UseExpandedInstanceProps { - preExpandedRows: Array>; - expandedRows: Array>; - rows: Array>; - expandedDepth: number; - isAllRowsExpanded: boolean; - toggleRowExpanded: (id: Array>, value?: boolean) => void; - toggleAllRowsExpanded: (value?: boolean) => void; - } - - export interface UseExpandedRowProps { - isExpanded: boolean; - canExpand: boolean; - subRows: Array>; - toggleRowExpanded: (value?: boolean) => void; - getToggleRowExpandedProps: ( - props?: Partial, - ) => TableExpandedToggleProps; - depth: number; - } - - //#endregion - - //#region useFilters - export function useFilters(hooks: Hooks): void; - - export namespace useFilters { - const pluginName = 'useFilters'; - } - - export type UseFiltersOptions = Partial<{ - manualFilters: boolean; - disableFilters: boolean; - defaultCanFilter: boolean; - filterTypes: FilterTypes; - autoResetFilters?: boolean | undefined; - }>; - - export interface UseFiltersState { - filters: Filters; - } - - export type UseFiltersColumnOptions = Partial<{ - Filter: Renderer>; - disableFilters: boolean; - defaultCanFilter: boolean; - filter: FilterType | DefaultFilterTypes | string; - }>; - - export interface UseFiltersInstanceProps { - preFilteredRows: Array>; - preFilteredFlatRows: Array>; - preFilteredRowsById: Record>; - filteredRows: Array>; - filteredFlatRows: Array>; - filteredRowsById: Record>; - rows: Array>; - flatRows: Array>; - rowsById: Record>; - setFilter: ( - columnId: IdType, - updater: ((filterValue: FilterValue) => FilterValue) | FilterValue, - ) => void; - setAllFilters: ( - updater: Filters | ((filters: Filters) => Filters), - ) => void; - } - - export interface UseFiltersColumnProps { - canFilter: boolean; - setFilter: ( - updater: ((filterValue: FilterValue) => FilterValue) | FilterValue, - ) => void; - filterValue: FilterValue; - preFilteredRows: Array>; - filteredRows: Array>; - } - - export type FilterProps = HeaderProps; - export type FilterValue = any; - export type Filters = Array<{ - id: IdType; - value: FilterValue; - }>; - export type FilterTypes = Record>; - - export type DefaultFilterTypes = - | 'text' - | 'exactText' - | 'exactTextCase' - | 'includes' - | 'includesAll' - | 'exact' - | 'equals' - | 'between'; - - export interface FilterType { - ( - rows: Array>, - columnIds: Array>, - filterValue: FilterValue, - ): Array>; - - autoRemove?: ((filterValue: FilterValue) => boolean) | undefined; - } - - //#endregion - - //#region useFlexLayout - export function useFlexLayout( - hooks: Hooks, - ): void; - - export namespace useFlexLayout { - const pluginName = 'useFlexLayout'; - } - //#endregion - - //#region useGridLayout - export function useGridLayout( - hooks: Hooks, - ): void; - - export namespace useGridLayout { - const pluginName = 'useGridLayout'; - } - //#endregion - - //#region useGlobalFilter - export function useGlobalFilter( - hooks: Hooks, - ): void; - - export namespace useGlobalFilter { - const pluginName = 'useGlobalFilter'; - } - - export type UseGlobalFiltersOptions = Partial<{ - globalFilter: - | (( - rows: Array>, - columnIds: Array>, - filterValue: any, - ) => Array>) - | string; - manualGlobalFilter: boolean; - filterTypes: FilterTypes; - autoResetGlobalFilter?: boolean | undefined; - disableGlobalFilter?: boolean | undefined; - }>; - - export interface UseGlobalFiltersState { - globalFilter: any; - } - - export type UseGlobalFiltersColumnOptions = Partial<{ - disableGlobalFilter?: boolean | undefined; - }>; - - export interface UseGlobalFiltersInstanceProps { - preGlobalFilteredRows: Array>; - preGlobalFilteredFlatRows: Array>; - preGlobalFilteredRowsById: Record>; - globalFilteredRows: Array>; - globalFilteredFlatRows: Array>; - globalFilteredRowsById: Record>; - rows: Array>; - flatRows: Array>; - rowsById: Record>; - setGlobalFilter: (filterValue: FilterValue) => void; - } - - //#endregion - - //#region useGroupBy - export function useGroupBy(hooks: Hooks): void; - - export namespace useGroupBy { - const pluginName = 'useGroupBy'; - } - - export interface TableGroupByToggleProps { - title?: string | undefined; - style?: CSSProperties | undefined; - onClick?: ((e: MouseEvent) => void) | undefined; - } - - export type UseGroupByOptions = Partial<{ - manualGroupBy: boolean; - disableGroupBy: boolean; - defaultCanGroupBy: boolean; - aggregations: Record>; - groupByFn: ( - rows: Array>, - columnId: IdType, - ) => Record>>; - autoResetGroupBy?: boolean | undefined; - }>; - - export interface UseGroupByHooks { - getGroupByToggleProps: Array>; - } - - export interface UseGroupByState { - groupBy: Array>; - } - - export type UseGroupByColumnOptions = Partial<{ - aggregate: Aggregator; - Aggregated: Renderer>; - disableGroupBy: boolean; - defaultCanGroupBy: boolean; - }>; - - export interface UseGroupByInstanceProps { - preGroupedRows: Array>; - preGroupedFlatRows: Array>; - preGroupedRowsById: Record>; - groupedRows: Array>; - groupedFlatRows: Array>; - groupedRowsById: Record>; - onlyGroupedFlatRows: Array>; - onlyGroupedRowsById: Record>; - nonGroupedFlatRows: Array>; - nonGroupedRowsById: Record>; - rows: Array>; - flatRows: Array>; - rowsById: Record>; - toggleGroupBy: (columnId: IdType, value?: boolean) => void; - } - - export interface UseGroupByColumnProps { - canGroupBy: boolean; - isGrouped: boolean; - groupedIndex: number; - toggleGroupBy: () => void; - getGroupByToggleProps: ( - props?: Partial, - ) => TableGroupByToggleProps; - } - - export interface UseGroupByRowProps { - isGrouped: boolean; - groupByID: IdType; - groupByVal: string; - values: Record, AggregatedValue>; - subRows: Array>; - leafRows: Array>; - depth: number; - id: string; - index: number; - } - - export interface UseGroupByCellProps { - isGrouped: boolean; - isPlaceholder: boolean; - isAggregated: boolean; - } - - export type DefaultAggregators = - | 'sum' - | 'average' - | 'median' - | 'uniqueCount' - | 'count'; - - export type AggregatorFn = ( - columnValues: CellValue[], - rows: Array>, - isAggregated: boolean, - ) => AggregatedValue; - export type Aggregator = - | AggregatorFn - | DefaultAggregators - | string; - export type AggregatedValue = any; - //#endregion - - //#region usePagination - export function usePagination( - hooks: Hooks, - ): void; - - export namespace usePagination { - const pluginName = 'usePagination'; - } - - export type UsePaginationOptions = Partial<{ - pageCount: number; - manualPagination: boolean; - autoResetPage?: boolean | undefined; - paginateExpandedRows: boolean; - }>; - - export interface UsePaginationState { - pageSize: number; - pageIndex: number; - } - - export interface UsePaginationInstanceProps { - page: Array>; - pageCount: number; - pageOptions: number[]; - canPreviousPage: boolean; - canNextPage: boolean; - gotoPage: (updater: ((pageIndex: number) => number) | number) => void; - previousPage: () => void; - nextPage: () => void; - setPageSize: (pageSize: number) => void; - } - - //#endregion - - //#region useResizeColumns - export function useResizeColumns( - hooks: Hooks, - ): void; - - export namespace useResizeColumns { - const pluginName = 'useResizeColumns'; - } - - export interface UseResizeColumnsOptions { - disableResizing?: boolean | undefined; - autoResetResize?: boolean | undefined; - } - - export interface UseResizeColumnsState { - columnResizing: { - startX?: number | undefined; - columnWidth: number; - headerIdWidths: Record; - columnWidths: any; - isResizingColumn?: string | undefined; - }; - } - - export interface UseResizeColumnsColumnOptions { - disableResizing?: boolean | undefined; - } - - // export interface TableResizerProps {} - - export interface UseResizeColumnsColumnProps { - getResizerProps: (props?: Partial) => TableResizerProps; - canResize: boolean; - isResizing: boolean; - } - - //#endregion - - //#region useRowSelect - export function useRowSelect( - hooks: Hooks, - ): void; - - export namespace useRowSelect { - const pluginName = 'useRowSelect'; - } - - export type TableToggleAllRowsSelectedProps = TableToggleCommonProps; - - export type TableToggleRowsSelectedProps = TableToggleCommonProps; - - export type UseRowSelectOptions = Partial<{ - manualRowSelectedKey: IdType; - autoResetSelectedRows: boolean; - selectSubRows: boolean; - }>; - - export interface UseRowSelectHooks { - getToggleRowSelectedProps: Array< - PropGetter - >; - getToggleAllRowsSelectedProps: Array< - PropGetter - >; - getToggleAllPageRowsSelectedProps: Array< - PropGetter - >; - } - - export interface UseRowSelectState { - selectedRowIds: Record, boolean>; - } - - export interface UseRowSelectInstanceProps { - toggleRowSelected: (rowId: IdType, set?: boolean) => void; - toggleAllRowsSelected: (value?: boolean) => void; - getToggleAllRowsSelectedProps: ( - props?: Partial, - ) => TableToggleAllRowsSelectedProps; - getToggleAllPageRowsSelectedProps: ( - props?: Partial, - ) => TableToggleAllRowsSelectedProps; - isAllRowsSelected: boolean; - selectedFlatRows: Array>; - } - - export interface UseRowSelectRowProps { - isSelected: boolean; - isSomeSelected: boolean; - toggleRowSelected: (set?: boolean) => void; - getToggleRowSelectedProps: ( - props?: Partial, - ) => TableToggleRowsSelectedProps; - } - - //#endregion - - //#region useRowState - export function useRowState(hooks: Hooks): void; - - export namespace useRowState { - const pluginName = 'useRowState'; - } - - export type UseRowStateOptions = Partial<{ - initialRowStateAccessor: (row: Row) => UseRowStateLocalState; - getResetRowStateDeps: (instance: TableInstance) => any[]; - autoResetRowState?: boolean | undefined; - }>; - - export interface UseRowStateState { - rowState: Record }>; - } - - export interface UseRowStateInstanceProps { - setRowState: (rowPath: string[], updater: UseRowUpdater) => void; - setCellState: ( - rowPath: string[], - columnId: IdType, - updater: UseRowUpdater, - ) => void; - } - - export interface UseRowStateRowProps { - state: UseRowStateLocalState; - setState: (updater: UseRowUpdater) => void; - } - - export interface UseRowStateCellProps { - state: UseRowStateLocalState; - setState: (updater: UseRowUpdater) => void; - } - - export type UseRowUpdater = T | ((prev: T) => T); - export type UseRowStateLocalState = Record< - IdType, - T - >; - //#endregion - - //#region useSortBy - export function useSortBy(hooks: Hooks): void; - - export namespace useSortBy { - const pluginName = 'useSortBy'; - } - - export interface TableSortByToggleProps { - title?: string | undefined; - style?: CSSProperties | undefined; - onClick?: ((e: MouseEvent) => void) | undefined; - } - - export type UseSortByOptions = Partial<{ - manualSortBy: boolean; - disableSortBy: boolean; - defaultCanSort: boolean; - disableMultiSort: boolean; - isMultiSortEvent: (e: MouseEvent) => boolean; - maxMultiSortColCount: number; - disableSortRemove: boolean; - disabledMultiRemove: boolean; - orderByFn: ( - rows: Array>, - sortFns: Array>, - directions: boolean[], - ) => Array>; - sortTypes: Record>; - autoResetSortBy?: boolean | undefined; - }>; - - export interface UseSortByHooks { - getSortByToggleProps: Array>; - } - - export interface UseSortByState { - sortBy: Array>; - } - - export type UseSortByColumnOptions = Partial<{ - defaultCanSort: boolean; - disableSortBy: boolean; - sortDescFirst: boolean; - sortInverted: boolean; - sortType: SortByFn | DefaultSortTypes | string; - }>; - - export interface UseSortByInstanceProps { - rows: Array>; - preSortedRows: Array>; - setSortBy: (sortBy: Array>) => void; - toggleSortBy: ( - columnId: IdType, - descending?: boolean, - isMulti?: boolean, - ) => void; - } - - export interface UseSortByColumnProps { - canSort: boolean; - toggleSortBy: (descending?: boolean, multi?: boolean) => void; - getSortByToggleProps: ( - props?: Partial, - ) => TableSortByToggleProps; - clearSortBy: () => void; - isSorted: boolean; - sortedIndex: number; - isSortedDesc: boolean | undefined; - } - - export type OrderByFn = ( - rowA: Row, - rowB: Row, - ) => number; - export type SortByFn = ( - rowA: Row, - rowB: Row, - columnId: IdType, - desc?: boolean, - ) => number; - - export type DefaultSortTypes = - | 'alphanumeric' - | 'datetime' - | 'basic' - | 'string' - | 'number'; - - export interface SortingRule { - id: IdType; - desc?: boolean | undefined; - } - //#endregion // Additional API diff --git a/playgrounds/vite/src/App.tsx b/playgrounds/vite/src/App.tsx index e38d3e19871..636cb70abf0 100644 --- a/playgrounds/vite/src/App.tsx +++ b/playgrounds/vite/src/App.tsx @@ -103,9 +103,9 @@ const App = () => { Header: 'Product', accessor: 'product', Filter: tableFilters.TextFilter(), - disableToggleVisibility: true, - disableReordering: true, - width: 200, + // disableToggleVisibility: true, + // disableReordering: true, + // width: 200, testing1: (props: CellProps) => (
{`${props}`}
), @@ -210,6 +210,9 @@ const App = () => { const [globalFilterValue, setGlobalFilterValue] = useState(''); + let testing0: TableStoryDataType = { 1: 'q' }; + let testing1: Record = testing0; + return (
Date: Wed, 23 Aug 2023 08:07:05 -0400 Subject: [PATCH 024/196] Working after readding all definitions but removing unnecessary properties from the column object in the columns array --- .../src/types/react-table/index.d.ts | 1041 ++++++++++++++++- playgrounds/vite/src/App.tsx | 2 +- 2 files changed, 999 insertions(+), 44 deletions(-) diff --git a/packages/itwinui-react/src/types/react-table/index.d.ts b/packages/itwinui-react/src/types/react-table/index.d.ts index 15611354e85..0544d02cd6b 100644 --- a/packages/itwinui-react/src/types/react-table/index.d.ts +++ b/packages/itwinui-react/src/types/react-table/index.d.ts @@ -28,7 +28,17 @@ declare module 'react-table' { * see https://gist.github.com/ggascoigne/646e14c9d54258e40588a13aabf0102d for more details */ export interface TableOptions - extends Omit, 'data' | 'columns'> { + extends Omit, 'data' | 'columns'>, + UseRowSelectOptions, + UseExpandedOptions, + UseFiltersOptions, + // UseGroupByOptions, + UsePaginationOptions, + UseGlobalFiltersOptions, + UseGlobalFiltersColumnOptions, + Omit, 'disableResizing'>, + // UseRowStateOptions, + UseSortByOptions { /** * List of columns. * @@ -56,41 +66,78 @@ declare module 'react-table' { } export interface TableInstance - extends Omit, 'columns' | 'pageCount'> { + extends Omit, 'columns' | 'pageCount'>, + UseTableInstanceProps, + UseColumnOrderInstanceProps, + UseExpandedInstanceProps, + UseFiltersInstanceProps, + UseGlobalFiltersInstanceProps, + UseGroupByInstanceProps, + UsePaginationInstanceProps, + UseRowSelectInstanceProps, + UseRowStateInstanceProps, + UseSortByInstanceProps { initialRows: Row[]; columnResizeMode: TableOptions['columnResizeMode']; tableWidth: number; } - export interface TableState {} + export interface TableState + extends UseColumnOrderState, + UseExpandedState, + UseFiltersState, + UseGlobalFiltersState, + UseGroupByState, + UsePaginationState, + UseRowSelectState, + UseRowStateState, + UseSortByState { + // hiddenColumns?: Array> | undefined; + // columnResizing: { + // startX?: number; + // columnWidth?: number; + // nextColumnWidth?: number; + // headerIdWidths?: Array<[string, number]>; + // nextHeaderIdWidths?: Array<[string, number]>; + // columnWidths: Record; + // isResizingColumn?: string; + // }; + // isTableResizing?: boolean; + // columnReorderStartIndex: number; + // sticky: { + // isScrolledToRight?: boolean; + // isScrolledToLeft?: boolean; + // }; + // lastSelectedRowId?: string; + } - // export interface Hooks - // extends UseTableHooks, - // UseExpandedHooks, - // UseGroupByHooks, - // UseRowSelectHooks, - // UseSortByHooks {} + export interface Hooks + extends UseTableHooks, + UseExpandedHooks, + UseGroupByHooks, + UseRowSelectHooks, + UseSortByHooks {} - // export interface Cell - // extends UseTableCellProps, - // UseGroupByCellProps, - // UseRowStateCellProps {} + export interface Cell + extends UseTableCellProps, + UseGroupByCellProps, + UseRowStateCellProps {} export interface ColumnInterface { - /** - * Custom class name applied to header column cell. - */ - columnClassName?: string; - /** - * Filter component used as a column filter. Should use filters from `tableFilters`. - */ - Filter?: Renderer> | Renderer>; - /** - * String value or custom function to use for filtering. - * Possible string values: `text`, `exactText`, `exactTextCase`, `includes`, `includesAll`, `exact`, `equals`, `between`. - * More info about these filters: https://github.com/tannerlinsley/react-table/blob/master/src/filterTypes.js - */ - filter?: FilterType | DefaultFilterTypes | string; + // /** + // * Custom class name applied to header column cell. + // */ + // columnClassName?: string; + // /** + // * Filter component used as a column filter. Should use filters from `tableFilters`. + // */ + // Filter?: Renderer> | Renderer>; + // /** + // * String value or custom function to use for filtering. + // * Possible string values: `text`, `exactText`, `exactTextCase`, `includes`, `includesAll`, `exact`, `equals`, `between`. + // * More info about these filters: https://github.com/tannerlinsley/react-table/blob/master/src/filterTypes.js + // */ + // filter?: FilterType | DefaultFilterTypes | string; /** * Function that should return whole cell element not only the content. * Must be memoized. @@ -102,6 +149,20 @@ declare module 'react-table' { * } */ cellRenderer?: (props: CellRendererProps) => React.ReactNode; + // /** + // * If true, column can't be reordered. + // * @default false + // */ + // disableReordering?: boolean; + // /** + // * If true, column's visibility cannot be toggled. + // * @default false + // */ + // disableToggleVisibility?: boolean; + // /** + // * Side on which column should be sticked to. + // */ + // sticky?: 'left' | 'right'; } export interface ColumnInterfaceBasedOnValue { @@ -172,16 +233,79 @@ declare module 'react-table' { // export type Column = ColumnWithStrictAccessor; - export type ColumnInstance = Omit, 'id'>; + export interface ColumnInstance + extends Omit, 'id'>, + ColumnInterfaceBasedOnValue, + UseTableColumnProps, + UseFiltersColumnProps, + UseGroupByColumnProps, + UseResizeColumnsColumnProps, + UseSortByColumnProps { + // originalWidth: number; + // resizeWidth?: number; + // isResizerVisible?: boolean; + // getDragAndDropProps: () => TableKeyedProps; + // originalSticky?: 'left' | 'right' | 'none'; + } export interface HeaderGroup extends ColumnInstance, UseTableHeaderGroupProps {} - export interface Row extends UseTableRowProps { + export interface Row + extends UseTableRowProps, + UseExpandedRowProps, + UseGroupByRowProps, + UseRowSelectRowProps, + UseRowStateRowProps { initialSubRows: Row[]; } + export interface TableCommonProps { + style?: CSSProperties | undefined; + className?: string | undefined; + role?: string | undefined; + } + + export type TableProps = TableCommonProps; + + export type TableBodyProps = TableCommonProps; + + export interface TableKeyedProps extends TableCommonProps { + key: React.Key; + } + + export type TableHeaderGroupProps = TableKeyedProps; + + export type TableFooterGroupProps = TableKeyedProps; + + export type TableHeaderProps = TableKeyedProps; + + export type TableFooterProps = TableKeyedProps; + + export type TableRowProps = TableKeyedProps; + + export type TableCellProps = TableKeyedProps; + + export interface TableToggleCommonProps extends TableCommonProps { + onChange?: ((e: ChangeEvent) => void) | undefined; + checked?: boolean | undefined; + title?: string | undefined; + indeterminate?: boolean | undefined; + } + + export interface MetaBase { + instance: TableInstance; + userProps: any; + } + + // inspired by ExtendState in https://github.com/reduxjs/redux/blob/master/src/types/store.ts + export type Meta> = [ + Extension, + ] extends [never] + ? M + : M & Extension; + //#region useTable export function useTable( options: TableOptions, @@ -213,6 +337,60 @@ declare module 'react-table' { autoResetHiddenColumns: boolean; }>; + export type PropGetter< + D extends object, + Props, + T extends object = never, + P = Partial, + > = ((props: P, meta: Meta) => P | P[]) | P | P[]; + + export type TablePropGetter = PropGetter; + + export type TableBodyPropGetter = PropGetter< + D, + TableBodyProps + >; + + export type HeaderPropGetter = PropGetter< + D, + TableHeaderProps, + { column: HeaderGroup } + >; + + export type FooterGroupPropGetter = PropGetter< + D, + TableFooterGroupProps, + { column: HeaderGroup } + >; + + export type HeaderGroupPropGetter = PropGetter< + D, + TableHeaderGroupProps, + { column: HeaderGroup } + >; + + export type FooterPropGetter = PropGetter< + D, + TableFooterProps, + { column: HeaderGroup } + >; + + export type RowPropGetter = PropGetter< + D, + TableRowProps, + { row: Row } + >; + + export type CellPropGetter = PropGetter< + D, + TableCellProps, + { cell: Cell } + >; + + export interface ReducerTableState + extends TableState, + Record {} + export interface UseTableHooks extends Record { useOptions: Array< (options: TableOptions, args: TableOptions) => TableOptions @@ -262,6 +440,105 @@ declare module 'react-table' { useFinalInstance: Array<(instance: TableInstance) => void>; } + export interface UseTableColumnOptions { + id?: IdType | undefined; + Header?: Renderer> | undefined; + Footer?: Renderer> | undefined; + width?: number | string | undefined; + minWidth?: number | undefined; + maxWidth?: number | undefined; + } + + type UpdateHiddenColumns = ( + oldHidden: Array>, + ) => Array>; + + export type TableToggleHideAllColumnProps = TableToggleCommonProps; + + export interface UseTableInstanceProps { + state: TableState; + plugins: Array>; + dispatch: TableDispatch; + columns: Array>; + allColumns: Array>; + visibleColumns: Array>; + headerGroups: Array>; + footerGroups: Array>; + headers: Array>; + flatHeaders: Array>; + rows: Array>; + rowsById: Record>; + getTableProps: (propGetter?: TablePropGetter) => TableProps; + getTableBodyProps: (propGetter?: TableBodyPropGetter) => TableBodyProps; + prepareRow: (row: Row) => void; + flatRows: Array>; + totalColumnsWidth: number; + allColumnsHidden: boolean; + toggleHideColumn: (columnId: IdType, value?: boolean) => void; + setHiddenColumns: ( + param: Array> | UpdateHiddenColumns, + ) => void; + toggleHideAllColumns: (value?: boolean) => void; + getToggleHideAllColumnsProps: ( + props?: Partial, + ) => TableToggleHideAllColumnProps; + getHooks: () => Hooks; + } + + export interface UseTableHeaderGroupProps { + headers: Array>; + getHeaderGroupProps: ( + propGetter?: HeaderGroupPropGetter, + ) => TableHeaderProps; + getFooterGroupProps: ( + propGetter?: FooterGroupPropGetter, + ) => TableFooterProps; + totalHeaderCount: number; // not documented + } + + export interface UseTableColumnProps { + id: IdType; + columns?: Array> | undefined; + isVisible: boolean; + render: (type: 'Header' | 'Footer' | string, props?: object) => ReactNode; + totalLeft: number; + totalWidth: number; + getHeaderProps: (propGetter?: HeaderPropGetter) => TableHeaderProps; + getFooterProps: (propGetter?: FooterPropGetter) => TableFooterProps; + toggleHidden: (value?: boolean) => void; + parent?: ColumnInstance | undefined; // not documented + getToggleHiddenProps: (userProps?: any) => any; + depth: number; // not documented + placeholderOf?: ColumnInstance | undefined; + } + + export interface UseTableRowProps { + cells: Array>; + allCells: Array>; + values: Record, CellValue>; + getRowProps: (propGetter?: RowPropGetter) => TableRowProps; + index: number; + original: D; + id: string; + subRows: Array>; + } + + export interface UseTableCellProps { + column: ColumnInstance; + row: Row; + value: CellValue; + getCellProps: (propGetter?: CellPropGetter) => TableCellProps; + render: (type: 'Cell' | string, userProps?: object) => ReactNode; + } + + export type HeaderProps = TableInstance & { + column: ColumnInstance; + }; + + export type FooterProps = TableInstance & { + column: ColumnInstance; + }; + export type CellProps = { column: ColumnInstance; row: Row; @@ -289,25 +566,615 @@ declare module 'react-table' { // Plugins - /////////////////////////////////////////// + //#region useAbsoluteLayout + export function useAbsoluteLayout(hooks: Hooks): void; - // Testing + export namespace useAbsoluteLayout { + const pluginName = 'useAbsoluteLayout'; + } + //#endregion - type TableStoryDataType = { - product: string; - price: number; - }; + //#region useBlockLayout + export function useBlockLayout(hooks: Hooks): void; - const data = [ - { - product: 'product1', - price: 1, - }, - ] satisfies Array; + export namespace useBlockLayout { + const pluginName = 'useBlockLayout'; + } + //#endregion + + //#region useColumnOrder + export function useColumnOrder( + hooks: Hooks, + ): void; + + export namespace useColumnOrder { + const pluginName = 'useColumnOrder'; + } + + export interface UseColumnOrderState { + columnOrder: Array>; + } + + export interface UseColumnOrderInstanceProps { + setColumnOrder: ( + updater: + | ((columnOrder: Array>) => Array>) + | Array>, + ) => void; + } + + //#endregion + + //#region useExpanded + export function useExpanded(hooks: Hooks): void; + + export namespace useExpanded { + const pluginName = 'useExpanded'; + } + + export type TableExpandedToggleProps = TableKeyedProps; + + export type UseExpandedOptions = Partial<{ + manualExpandedKey: IdType; + paginateExpandedRows: boolean; + expandSubRows: boolean; + autoResetExpanded?: boolean | undefined; + }>; + + export interface UseExpandedHooks { + getToggleRowsExpandedProps: Array>; + getToggleAllRowsExpandedProps: Array>; + } + + export interface UseExpandedState { + expanded: Record, boolean>; + } + + export interface UseExpandedInstanceProps { + preExpandedRows: Array>; + expandedRows: Array>; + rows: Array>; + expandedDepth: number; + isAllRowsExpanded: boolean; + toggleRowExpanded: (id: Array>, value?: boolean) => void; + toggleAllRowsExpanded: (value?: boolean) => void; + } + + export interface UseExpandedRowProps { + isExpanded: boolean; + canExpand: boolean; + subRows: Array>; + toggleRowExpanded: (value?: boolean) => void; + getToggleRowExpandedProps: ( + props?: Partial, + ) => TableExpandedToggleProps; + depth: number; + } + + //#endregion + + //#region useFilters + export function useFilters(hooks: Hooks): void; + + export namespace useFilters { + const pluginName = 'useFilters'; + } + + export type UseFiltersOptions = Partial<{ + manualFilters: boolean; + disableFilters: boolean; + defaultCanFilter: boolean; + filterTypes: FilterTypes; + autoResetFilters?: boolean | undefined; + }>; + + export interface UseFiltersState { + filters: Filters; + } + + export type UseFiltersColumnOptions = Partial<{ + // Filter: Renderer>; + // disableFilters: boolean; + // defaultCanFilter: boolean; + // filter: FilterType | DefaultFilterTypes | string; + }>; + + export interface UseFiltersInstanceProps { + preFilteredRows: Array>; + preFilteredFlatRows: Array>; + preFilteredRowsById: Record>; + filteredRows: Array>; + filteredFlatRows: Array>; + filteredRowsById: Record>; + rows: Array>; + flatRows: Array>; + rowsById: Record>; + setFilter: ( + columnId: IdType, + updater: ((filterValue: FilterValue) => FilterValue) | FilterValue, + ) => void; + setAllFilters: ( + updater: Filters | ((filters: Filters) => Filters), + ) => void; + } + + export interface UseFiltersColumnProps { + canFilter: boolean; + setFilter: ( + updater: ((filterValue: FilterValue) => FilterValue) | FilterValue, + ) => void; + filterValue: FilterValue; + preFilteredRows: Array>; + filteredRows: Array>; + } + + export type FilterProps = HeaderProps; + export type FilterValue = any; + export type Filters = Array<{ + id: IdType; + value: FilterValue; + }>; + export type FilterTypes = Record>; + + export type DefaultFilterTypes = + | 'text' + | 'exactText' + | 'exactTextCase' + | 'includes' + | 'includesAll' + | 'exact' + | 'equals' + | 'between'; + + export interface FilterType { + ( + rows: Array>, + columnIds: Array>, + filterValue: FilterValue, + ): Array>; + + autoRemove?: ((filterValue: FilterValue) => boolean) | undefined; + } + + //#endregion + + //#region useFlexLayout + export function useFlexLayout( + hooks: Hooks, + ): void; + + export namespace useFlexLayout { + const pluginName = 'useFlexLayout'; + } + //#endregion + + //#region useGridLayout + export function useGridLayout( + hooks: Hooks, + ): void; + + export namespace useGridLayout { + const pluginName = 'useGridLayout'; + } + //#endregion + + //#region useGlobalFilter + export function useGlobalFilter( + hooks: Hooks, + ): void; + + export namespace useGlobalFilter { + const pluginName = 'useGlobalFilter'; + } + + export type UseGlobalFiltersOptions = Partial<{ + globalFilter: + | (( + rows: Array>, + columnIds: Array>, + filterValue: any, + ) => Array>) + | string; + manualGlobalFilter: boolean; + filterTypes: FilterTypes; + autoResetGlobalFilter?: boolean | undefined; + disableGlobalFilter?: boolean | undefined; + }>; + + export interface UseGlobalFiltersState { + globalFilter: any; + } + + export type UseGlobalFiltersColumnOptions = Partial<{ + disableGlobalFilter?: boolean | undefined; + }>; + + export interface UseGlobalFiltersInstanceProps { + preGlobalFilteredRows: Array>; + preGlobalFilteredFlatRows: Array>; + preGlobalFilteredRowsById: Record>; + globalFilteredRows: Array>; + globalFilteredFlatRows: Array>; + globalFilteredRowsById: Record>; + rows: Array>; + flatRows: Array>; + rowsById: Record>; + setGlobalFilter: (filterValue: FilterValue) => void; + } + + //#endregion - const columns = [{}] satisfies Array>; + //#region useGroupBy + export function useGroupBy(hooks: Hooks): void; - ///////////////////////////////////////////////// + export namespace useGroupBy { + const pluginName = 'useGroupBy'; + } + + export interface TableGroupByToggleProps { + title?: string | undefined; + style?: CSSProperties | undefined; + onClick?: ((e: MouseEvent) => void) | undefined; + } + + export type UseGroupByOptions = Partial<{ + manualGroupBy: boolean; + disableGroupBy: boolean; + defaultCanGroupBy: boolean; + aggregations: Record>; + groupByFn: ( + rows: Array>, + columnId: IdType, + ) => Record>>; + autoResetGroupBy?: boolean | undefined; + }>; + + export interface UseGroupByHooks { + getGroupByToggleProps: Array>; + } + + export interface UseGroupByState { + groupBy: Array>; + } + + export type UseGroupByColumnOptions = Partial<{ + aggregate: Aggregator; + Aggregated: Renderer>; + disableGroupBy: boolean; + defaultCanGroupBy: boolean; + }>; + + export interface UseGroupByInstanceProps { + preGroupedRows: Array>; + preGroupedFlatRows: Array>; + preGroupedRowsById: Record>; + groupedRows: Array>; + groupedFlatRows: Array>; + groupedRowsById: Record>; + onlyGroupedFlatRows: Array>; + onlyGroupedRowsById: Record>; + nonGroupedFlatRows: Array>; + nonGroupedRowsById: Record>; + rows: Array>; + flatRows: Array>; + rowsById: Record>; + toggleGroupBy: (columnId: IdType, value?: boolean) => void; + } + + export interface UseGroupByColumnProps { + canGroupBy: boolean; + isGrouped: boolean; + groupedIndex: number; + toggleGroupBy: () => void; + getGroupByToggleProps: ( + props?: Partial, + ) => TableGroupByToggleProps; + } + + export interface UseGroupByRowProps { + isGrouped: boolean; + groupByID: IdType; + groupByVal: string; + values: Record, AggregatedValue>; + subRows: Array>; + leafRows: Array>; + depth: number; + id: string; + index: number; + } + + export interface UseGroupByCellProps { + isGrouped: boolean; + isPlaceholder: boolean; + isAggregated: boolean; + } + + export type DefaultAggregators = + | 'sum' + | 'average' + | 'median' + | 'uniqueCount' + | 'count'; + + export type AggregatorFn = ( + columnValues: CellValue[], + rows: Array>, + isAggregated: boolean, + ) => AggregatedValue; + export type Aggregator = + | AggregatorFn + | DefaultAggregators + | string; + export type AggregatedValue = any; + //#endregion + + //#region usePagination + export function usePagination( + hooks: Hooks, + ): void; + + export namespace usePagination { + const pluginName = 'usePagination'; + } + + export type UsePaginationOptions = Partial<{ + pageCount: number; + manualPagination: boolean; + autoResetPage?: boolean | undefined; + paginateExpandedRows: boolean; + }>; + + export interface UsePaginationState { + pageSize: number; + pageIndex: number; + } + + export interface UsePaginationInstanceProps { + page: Array>; + pageCount: number; + pageOptions: number[]; + canPreviousPage: boolean; + canNextPage: boolean; + gotoPage: (updater: ((pageIndex: number) => number) | number) => void; + previousPage: () => void; + nextPage: () => void; + setPageSize: (pageSize: number) => void; + } + + //#endregion + + //#region useResizeColumns + export function useResizeColumns( + hooks: Hooks, + ): void; + + export namespace useResizeColumns { + const pluginName = 'useResizeColumns'; + } + + export interface UseResizeColumnsOptions { + disableResizing?: boolean | undefined; + autoResetResize?: boolean | undefined; + } + + export interface UseResizeColumnsState { + columnResizing: { + startX?: number | undefined; + columnWidth: number; + headerIdWidths: Record; + columnWidths: any; + isResizingColumn?: string | undefined; + }; + } + + export interface UseResizeColumnsColumnOptions { + disableResizing?: boolean | undefined; + } + + // export interface TableResizerProps {} + + export interface UseResizeColumnsColumnProps { + getResizerProps: (props?: Partial) => TableResizerProps; + canResize: boolean; + isResizing: boolean; + } + + //#endregion + + //#region useRowSelect + export function useRowSelect( + hooks: Hooks, + ): void; + + export namespace useRowSelect { + const pluginName = 'useRowSelect'; + } + + export type TableToggleAllRowsSelectedProps = TableToggleCommonProps; + + export type TableToggleRowsSelectedProps = TableToggleCommonProps; + + export type UseRowSelectOptions = Partial<{ + manualRowSelectedKey: IdType; + autoResetSelectedRows: boolean; + selectSubRows: boolean; + }>; + + export interface UseRowSelectHooks { + getToggleRowSelectedProps: Array< + PropGetter + >; + getToggleAllRowsSelectedProps: Array< + PropGetter + >; + getToggleAllPageRowsSelectedProps: Array< + PropGetter + >; + } + + export interface UseRowSelectState { + selectedRowIds: Record, boolean>; + } + + export interface UseRowSelectInstanceProps { + toggleRowSelected: (rowId: IdType, set?: boolean) => void; + toggleAllRowsSelected: (value?: boolean) => void; + getToggleAllRowsSelectedProps: ( + props?: Partial, + ) => TableToggleAllRowsSelectedProps; + getToggleAllPageRowsSelectedProps: ( + props?: Partial, + ) => TableToggleAllRowsSelectedProps; + isAllRowsSelected: boolean; + selectedFlatRows: Array>; + } + + export interface UseRowSelectRowProps { + isSelected: boolean; + isSomeSelected: boolean; + toggleRowSelected: (set?: boolean) => void; + getToggleRowSelectedProps: ( + props?: Partial, + ) => TableToggleRowsSelectedProps; + } + + //#endregion + + //#region useRowState + export function useRowState(hooks: Hooks): void; + + export namespace useRowState { + const pluginName = 'useRowState'; + } + + export type UseRowStateOptions = Partial<{ + initialRowStateAccessor: (row: Row) => UseRowStateLocalState; + getResetRowStateDeps: (instance: TableInstance) => any[]; + autoResetRowState?: boolean | undefined; + }>; + + export interface UseRowStateState { + rowState: Record }>; + } + + export interface UseRowStateInstanceProps { + setRowState: (rowPath: string[], updater: UseRowUpdater) => void; + setCellState: ( + rowPath: string[], + columnId: IdType, + updater: UseRowUpdater, + ) => void; + } + + export interface UseRowStateRowProps { + state: UseRowStateLocalState; + setState: (updater: UseRowUpdater) => void; + } + + export interface UseRowStateCellProps { + state: UseRowStateLocalState; + setState: (updater: UseRowUpdater) => void; + } + + export type UseRowUpdater = T | ((prev: T) => T); + export type UseRowStateLocalState = Record< + IdType, + T + >; + //#endregion + + //#region useSortBy + export function useSortBy(hooks: Hooks): void; + + export namespace useSortBy { + const pluginName = 'useSortBy'; + } + + export interface TableSortByToggleProps { + title?: string | undefined; + style?: CSSProperties | undefined; + onClick?: ((e: MouseEvent) => void) | undefined; + } + + export type UseSortByOptions = Partial<{ + manualSortBy: boolean; + disableSortBy: boolean; + defaultCanSort: boolean; + disableMultiSort: boolean; + isMultiSortEvent: (e: MouseEvent) => boolean; + maxMultiSortColCount: number; + disableSortRemove: boolean; + disabledMultiRemove: boolean; + orderByFn: ( + rows: Array>, + sortFns: Array>, + directions: boolean[], + ) => Array>; + sortTypes: Record>; + autoResetSortBy?: boolean | undefined; + }>; + + export interface UseSortByHooks { + getSortByToggleProps: Array>; + } + + export interface UseSortByState { + sortBy: Array>; + } + + export type UseSortByColumnOptions = Partial<{ + defaultCanSort: boolean; + disableSortBy: boolean; + sortDescFirst: boolean; + sortInverted: boolean; + sortType: SortByFn | DefaultSortTypes | string; + }>; + + export interface UseSortByInstanceProps { + rows: Array>; + preSortedRows: Array>; + setSortBy: (sortBy: Array>) => void; + toggleSortBy: ( + columnId: IdType, + descending?: boolean, + isMulti?: boolean, + ) => void; + } + + export interface UseSortByColumnProps { + canSort: boolean; + toggleSortBy: (descending?: boolean, multi?: boolean) => void; + getSortByToggleProps: ( + props?: Partial, + ) => TableSortByToggleProps; + clearSortBy: () => void; + isSorted: boolean; + sortedIndex: number; + isSortedDesc: boolean | undefined; + } + + export type OrderByFn = ( + rowA: Row, + rowB: Row, + ) => number; + export type SortByFn = ( + rowA: Row, + rowB: Row, + columnId: IdType, + desc?: boolean, + ) => number; + + export type DefaultSortTypes = + | 'alphanumeric' + | 'datetime' + | 'basic' + | 'string' + | 'number'; + + export interface SortingRule { + id: IdType; + desc?: boolean | undefined; + } //#endregion @@ -327,4 +1194,92 @@ declare module 'react-table' { | string | number | ReactFragment; + + export interface PluginHook { + (hooks: Hooks): void; + pluginName?: string | undefined; + } + + export type TableDispatch = (action: A) => void; + + // utils + export function defaultOrderByFn( + arr: Array>, + funcs: Array>, + dirs: boolean[], + ): Array>; + + export function defaultGroupByFn( + rows: Array>, + columnId: IdType, + ): Record>>; + + export function makePropGetter(hooks: Hooks, ...meta: any[]): any; + + export function reduceHooks( + hooks: Hooks, + initial: T, + ...args: any[] + ): T; + + export function loopHooks(hooks: Hooks, ...args: any[]): void; + + export function ensurePluginOrder( + plugins: Array>, + befores: string[], + pluginName: string, + ): void; + + export function functionalUpdate( + updater: any, + old: Partial>, + ): Partial>; + + export function useGetLatest(obj: T): () => T; + + export function safeUseLayoutEffect( + effect: EffectCallback, + deps?: DependencyList, + ): void; + + export function useMountedLayoutEffect( + effect: EffectCallback, + deps?: DependencyList, + ): void; + + export function useAsyncDebounce any>( + defaultFn: F, + defaultWait?: number, + ): F; + + export function makeRenderer( + instance: TableInstance, + column: ColumnInstance, + meta?: any, + ): ReactElement; + + ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// + + // Additional Types + + export type FieldType = 'text' | 'number' | 'date' | string; + + export type CellRendererProps = { + /** + * Cell HTML props passed from the Table. + */ + cellElementProps: TableCellProps; + /** + * Table specific cell props like `column`, `row`. + */ + cellProps: CellProps; + /** + * Cell's content. + */ + children: React.ReactNode; + /** + * Function that returns whether the cell is disabled. + */ + isDisabled?: (rowData: D) => boolean; + }; } diff --git a/playgrounds/vite/src/App.tsx b/playgrounds/vite/src/App.tsx index 636cb70abf0..e040197577c 100644 --- a/playgrounds/vite/src/App.tsx +++ b/playgrounds/vite/src/App.tsx @@ -102,7 +102,7 @@ const App = () => { id: 'product', Header: 'Product', accessor: 'product', - Filter: tableFilters.TextFilter(), + // Filter: tableFilters.TextFilter(), // disableToggleVisibility: true, // disableReordering: true, // width: 200, From e7adb0028a1805476fdbf8884c2f64151b4e63db Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Wed, 23 Aug 2023 10:04:45 -0400 Subject: [PATCH 025/196] WIP --- .../src/types/react-table/index.d.ts | 116 ++++++++++-------- playgrounds/vite/src/App.tsx | 14 ++- ts playground.ts | 59 +++++++++ 3 files changed, 134 insertions(+), 55 deletions(-) create mode 100644 ts playground.ts diff --git a/packages/itwinui-react/src/types/react-table/index.d.ts b/packages/itwinui-react/src/types/react-table/index.d.ts index 0544d02cd6b..bc65a05f563 100644 --- a/packages/itwinui-react/src/types/react-table/index.d.ts +++ b/packages/itwinui-react/src/types/react-table/index.d.ts @@ -82,16 +82,17 @@ declare module 'react-table' { tableWidth: number; } - export interface TableState - extends UseColumnOrderState, - UseExpandedState, - UseFiltersState, - UseGlobalFiltersState, - UseGroupByState, - UsePaginationState, - UseRowSelectState, - UseRowStateState, - UseSortByState { + export interface TableState { + // extends + // UseColumnOrderState, + // UseExpandedState, + // UseFiltersState, + // UseGlobalFiltersState, + // UseGroupByState, + // UsePaginationState, + // UseRowSelectState, + // UseRowStateState, + // UseSortByState // hiddenColumns?: Array> | undefined; // columnResizing: { // startX?: number; @@ -111,33 +112,48 @@ declare module 'react-table' { // lastSelectedRowId?: string; } - export interface Hooks - extends UseTableHooks, - UseExpandedHooks, - UseGroupByHooks, - UseRowSelectHooks, - UseSortByHooks {} + export interface Hooks { + // extends UseTableHooks, + // UseExpandedHooks, + // UseGroupByHooks, + // UseRowSelectHooks, + // UseSortByHooks + } - export interface Cell - extends UseTableCellProps, - UseGroupByCellProps, - UseRowStateCellProps {} + export interface Cell { + // extends UseTableCellProps, + // UseGroupByCellProps, + // UseRowStateCellProps + } export interface ColumnInterface { - // /** - // * Custom class name applied to header column cell. - // */ - // columnClassName?: string; - // /** - // * Filter component used as a column filter. Should use filters from `tableFilters`. - // */ - // Filter?: Renderer> | Renderer>; - // /** - // * String value or custom function to use for filtering. - // * Possible string values: `text`, `exactText`, `exactTextCase`, `includes`, `includesAll`, `exact`, `equals`, `between`. - // * More info about these filters: https://github.com/tannerlinsley/react-table/blob/master/src/filterTypes.js - // */ - // filter?: FilterType | DefaultFilterTypes | string; + // extends UseTableColumnOptions, + // UseSortByColumnOptions, + // UseFiltersColumnOptions, + // UseResizeColumnsColumnOptions, + // UseGlobalFiltersColumnOptions + /** + * Custom class name applied to header column cell. + */ + columnClassName?: string; + /** + * Custom class name applied to each column's cell. + */ + cellClassName?: string; + /** + * Type of the data in cell. Used for manual filtering. + */ + fieldType?: FieldType; + /** + * Filter component used as a column filter. Should use filters from `tableFilters`. + */ + Filter?: Renderer> | Renderer>; + /** + * String value or custom function to use for filtering. + * Possible string values: `text`, `exactText`, `exactTextCase`, `includes`, `includesAll`, `exact`, `equals`, `between`. + * More info about these filters: https://github.com/tannerlinsley/react-table/blob/master/src/filterTypes.js + */ + filter?: FilterType | DefaultFilterTypes | string; /** * Function that should return whole cell element not only the content. * Must be memoized. @@ -149,27 +165,27 @@ declare module 'react-table' { * } */ cellRenderer?: (props: CellRendererProps) => React.ReactNode; - // /** - // * If true, column can't be reordered. - // * @default false - // */ - // disableReordering?: boolean; - // /** - // * If true, column's visibility cannot be toggled. - // * @default false - // */ - // disableToggleVisibility?: boolean; - // /** - // * Side on which column should be sticked to. - // */ - // sticky?: 'left' | 'right'; + /** + * If true, column can't be reordered. + * @default false + */ + disableReordering?: boolean; + /** + * If true, column's visibility cannot be toggled. + * @default false + */ + disableToggleVisibility?: boolean; + /** + * Side on which column should be sticked to. + */ + sticky?: 'left' | 'right'; } export interface ColumnInterfaceBasedOnValue { // Cell?: Renderer> | undefined; // Cell?: (props: CellProps) => React.ReactNode; // testing1: Renderer> | undefined; - testing1: Renderer> | undefined; + testing1?: Renderer> | undefined; } // eslint-disable-next-line @typescript-eslint/no-empty-interface @@ -539,7 +555,7 @@ declare module 'react-table' { column: ColumnInstance; }; - export type CellProps = { + export type CellProps = { column: ColumnInstance; row: Row; cell: Cell; diff --git a/playgrounds/vite/src/App.tsx b/playgrounds/vite/src/App.tsx index e040197577c..936512943ef 100644 --- a/playgrounds/vite/src/App.tsx +++ b/playgrounds/vite/src/App.tsx @@ -10,6 +10,7 @@ import { Table, tableFilters, } from '@itwin/itwinui-react'; +import { TableFilterProps } from '@itwin/itwinui-react/cjs/core/Table/index.js'; import { useCallback, useMemo, useState } from 'react'; import type { CellProps, @@ -18,6 +19,7 @@ import type { Row, TableInstance, TableState, + Renderer, } from 'react-table'; type ValueOf = T[keyof T]; @@ -102,17 +104,19 @@ const App = () => { id: 'product', Header: 'Product', accessor: 'product', - // Filter: tableFilters.TextFilter(), + Filter: tableFilters.TextFilter() as Renderer< + TableFilterProps + >, // disableToggleVisibility: true, // disableReordering: true, // width: 200, - testing1: (props: CellProps) => ( -
{`${props}`}
- ), + // testing1: (props: CellProps) => ( + // testing1: (props) =>
{`${props}`}
, + // sticky: 'left', // testing1: '', // testig - // testing1: (props) =>
, + testing1: (props) =>
, }, // {}, // { diff --git a/ts playground.ts b/ts playground.ts new file mode 100644 index 00000000000..eb540b54d0d --- /dev/null +++ b/ts playground.ts @@ -0,0 +1,59 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Bentley Systems, Incorporated. All rights reserved. + * See LICENSE.md in the project root for license terms and full copyright notice. + *--------------------------------------------------------------------------------------------*/ +// Welcome to the TypeScript Playground, this is a website +// which gives you a chance to write, share and learn TypeScript. + +// You could think of it in three ways: +// +// - A location to learn TypeScript where nothing can break +// - A place to experiment with TypeScript syntax, and share the URLs with others +// - A sandbox to experiment with different compiler features of TypeScript + +const anExampleVariable = 'Hello World'; +console.log(anExampleVariable); + +// To learn more about the language, click above in "Examples" or "What's New". +// Otherwise, get started by removing these comments and the world is your playground. + +type MyColType = { + prod: string; + price: number; +}; + +type MyProps = { + prop1: D; + prop2: V; +}; + +type MyInterface = { + sticky: 'left' | 'top' | 'right'; +}; + +type ValueOf = T[keyof T]; + +type MyInterfaceBsdOnValue = { + testing1: MyProps; +}; + +type StrictProps = MyInterface & + ValueOf<{ + [K in keyof D]: { + accessor: K; + } & MyInterfaceBsdOnValue; + }>; + +const myCols = [ + { + accessor: 'price', + sticky: 'left', + testing1: { + prop1: { + prod: '', + price: 1, + }, + prop2: 1, + }, + }, +] satisfies Array>; From 2f9235b42f3fbdacbd475026641f7f4a2ec86f50 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Wed, 23 Aug 2023 10:12:36 -0400 Subject: [PATCH 026/196] Stops working when both Filter and Cell are provided --- packages/itwinui-react/src/types/react-table/index.d.ts | 8 ++++---- playgrounds/vite/src/App.tsx | 4 +--- 2 files changed, 5 insertions(+), 7 deletions(-) diff --git a/packages/itwinui-react/src/types/react-table/index.d.ts b/packages/itwinui-react/src/types/react-table/index.d.ts index bc65a05f563..f49c5b1618a 100644 --- a/packages/itwinui-react/src/types/react-table/index.d.ts +++ b/packages/itwinui-react/src/types/react-table/index.d.ts @@ -689,10 +689,10 @@ declare module 'react-table' { } export type UseFiltersColumnOptions = Partial<{ - // Filter: Renderer>; - // disableFilters: boolean; - // defaultCanFilter: boolean; - // filter: FilterType | DefaultFilterTypes | string; + Filter: Renderer>; + disableFilters: boolean; + defaultCanFilter: boolean; + filter: FilterType | DefaultFilterTypes | string; }>; export interface UseFiltersInstanceProps { diff --git a/playgrounds/vite/src/App.tsx b/playgrounds/vite/src/App.tsx index 936512943ef..176cd4799b6 100644 --- a/playgrounds/vite/src/App.tsx +++ b/playgrounds/vite/src/App.tsx @@ -104,9 +104,7 @@ const App = () => { id: 'product', Header: 'Product', accessor: 'product', - Filter: tableFilters.TextFilter() as Renderer< - TableFilterProps - >, + Filter: tableFilters.TextFilter(), // disableToggleVisibility: true, // disableReordering: true, // width: 200, From 4ebff725c826a4148a0e99d52ed36e4c1634bf3f Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Wed, 23 Aug 2023 14:37:57 -0400 Subject: [PATCH 027/196] WIP --- packages/itwinui-react/src/types/react-table/index.d.ts | 1 + playgrounds/vite/src/App.tsx | 2 ++ 2 files changed, 3 insertions(+) diff --git a/packages/itwinui-react/src/types/react-table/index.d.ts b/packages/itwinui-react/src/types/react-table/index.d.ts index f49c5b1618a..c7afc164c31 100644 --- a/packages/itwinui-react/src/types/react-table/index.d.ts +++ b/packages/itwinui-react/src/types/react-table/index.d.ts @@ -148,6 +148,7 @@ declare module 'react-table' { * Filter component used as a column filter. Should use filters from `tableFilters`. */ Filter?: Renderer> | Renderer>; + // Filter?: Renderer> | undefined; /** * String value or custom function to use for filtering. * Possible string values: `text`, `exactText`, `exactTextCase`, `includes`, `includesAll`, `exact`, `equals`, `between`. diff --git a/playgrounds/vite/src/App.tsx b/playgrounds/vite/src/App.tsx index 176cd4799b6..dca8f28b54a 100644 --- a/playgrounds/vite/src/App.tsx +++ b/playgrounds/vite/src/App.tsx @@ -105,6 +105,7 @@ const App = () => { Header: 'Product', accessor: 'product', Filter: tableFilters.TextFilter(), + // Filter: () =>
, // disableToggleVisibility: true, // disableReordering: true, // width: 200, @@ -114,6 +115,7 @@ const App = () => { // sticky: 'left', // testing1: '', // testig + // col testing1: (props) =>
, }, // {}, From 22e13109d6027da58f761a871b3476120127c0e0 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Wed, 23 Aug 2023 15:38:53 -0400 Subject: [PATCH 028/196] WIP --- packages/itwinui-react/src/types/react-table/index.d.ts | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/itwinui-react/src/types/react-table/index.d.ts b/packages/itwinui-react/src/types/react-table/index.d.ts index c7afc164c31..29da3f2fd93 100644 --- a/packages/itwinui-react/src/types/react-table/index.d.ts +++ b/packages/itwinui-react/src/types/react-table/index.d.ts @@ -14,6 +14,8 @@ import { ReactNode, } from 'react'; +// import { TableFilterProps } from '@itwin/itwinui-react'; + declare module 'react-table' { export {}; @@ -186,7 +188,8 @@ declare module 'react-table' { // Cell?: Renderer> | undefined; // Cell?: (props: CellProps) => React.ReactNode; // testing1: Renderer> | undefined; - testing1?: Renderer> | undefined; + // testing1?: Renderer> | undefined; + Cell?: Renderer> | undefined; } // eslint-disable-next-line @typescript-eslint/no-empty-interface @@ -526,7 +529,7 @@ declare module 'react-table' { parent?: ColumnInstance | undefined; // not documented getToggleHiddenProps: (userProps?: any) => any; depth: number; // not documented - placeholderOf?: ColumnInstance | undefined; + placeholderOf?: ColumnInstance | undefined; } export interface UseTableRowProps { From 47b3f34e4fe0b686fe3b09ec529d75ec7b958821 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Wed, 23 Aug 2023 15:54:24 -0400 Subject: [PATCH 029/196] WIP --- playgrounds/vite/src/App.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/playgrounds/vite/src/App.tsx b/playgrounds/vite/src/App.tsx index dca8f28b54a..fb5a83ad03d 100644 --- a/playgrounds/vite/src/App.tsx +++ b/playgrounds/vite/src/App.tsx @@ -116,7 +116,7 @@ const App = () => { // testing1: '', // testig // col - testing1: (props) =>
, + Cell: (props) =>
, }, // {}, // { From bfb60c5f7df6f78b44513181e7793c042cec0ac3 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Wed, 23 Aug 2023 15:58:27 -0400 Subject: [PATCH 030/196] Pasted newly merged index.d.ts from the playground --- .../src/types/react-table/index.d.ts | 2448 ++++++++--------- 1 file changed, 1204 insertions(+), 1244 deletions(-) diff --git a/packages/itwinui-react/src/types/react-table/index.d.ts b/packages/itwinui-react/src/types/react-table/index.d.ts index 29da3f2fd93..24133696741 100644 --- a/packages/itwinui-react/src/types/react-table/index.d.ts +++ b/packages/itwinui-react/src/types/react-table/index.d.ts @@ -2,6 +2,25 @@ * Copyright (c) Bentley Systems, Incorporated. All rights reserved. * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ +// Type definitions for react-table 7.7 +// Project: https://github.com/tannerlinsley/react-table +// Definitions by: Guy Gascoigne-Piggford , +// Rohit Garg +// Jason Clark +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +// TypeScript Version: 3.5 +// reflects react-table@7.7.0 + +// tslint:disable:no-empty-interface +// no-empty-interface is disabled to allow easy extension with declaration merging + +// TODO: Find out why the below line was giving an error +// /* eslint-disable @definitelytyped/no-unnecessary-generics */ +// no-unnecessary-generics is disabled because many of these definitions are either used in a generic +// context or the signatures are required to match for declaration merging + +// The changelog for the important changes is located in the Readme.md + import { ChangeEvent, ComponentType, @@ -14,227 +33,202 @@ import { ReactNode, } from 'react'; -// import { TableFilterProps } from '@itwin/itwinui-react'; +export {}; + +/** + * The empty definitions of below provides a base definition for the parts used by useTable, that can then be extended in the users code. + * + * @example + * export interface TableOptions + * extends + * UseExpandedOptions, + * UseFiltersOptions {} + * see https://gist.github.com/ggascoigne/646e14c9d54258e40588a13aabf0102d for more details + */ +export interface TableOptions + extends Omit, 'data' | 'columns'>, + UseRowSelectOptions, + UseExpandedOptions, + UseFiltersOptions, + // UseGroupByOptions, + UsePaginationOptions, + UseGlobalFiltersOptions, + UseGlobalFiltersColumnOptions, + Omit, 'disableResizing'>, + // UseRowStateOptions, + UseSortByOptions { + /** + * List of columns. + * + * Should not have a top-level `Header` or a `columns` sub-property. They are only allowed to be passed for backwards compatibility. + * See [migration guide](https://github.com/iTwin/iTwinUI/wiki/iTwinUI-react-v2-migration-guide#breaking-changes). + */ + columns: Array>; + /** + * Table data list. + * Must be memoized. + * + * Supports expandable sub-rows using the `subRows` field in data entries. + * If some rows don't have sub-data, it is recommended to pass an empty array to `subRows` for consistent spacing. + */ + data: D[]; + /** + * Column's resize mode. + * - `fit` - when resizing it affects current and the next column, + * e.g. when increasing width of current column, next column's width will decrease. + * - `expand` - when resizing it affects only the current column, + * e.g. when increasing width of the current column, next column's width remains the same. + * @default 'fit' + */ + columnResizeMode?: 'fit' | 'expand'; +} -declare module 'react-table' { - export {}; +export interface TableInstance + extends Omit, 'columns' | 'pageCount'>, + UseTableInstanceProps, + UseColumnOrderInstanceProps, + UseExpandedInstanceProps, + UseFiltersInstanceProps, + UseGlobalFiltersInstanceProps, + UseGroupByInstanceProps, + UsePaginationInstanceProps, + UseRowSelectInstanceProps, + UseRowStateInstanceProps, + UseSortByInstanceProps { + initialRows: Row[]; + columnResizeMode: TableOptions['columnResizeMode']; + tableWidth: number; +} + +export interface TableState + extends UseColumnOrderState, + UseExpandedState, + UseFiltersState, + UseGlobalFiltersState, + UseGroupByState, + UsePaginationState, + UseRowSelectState, + UseRowStateState, + UseSortByState { + hiddenColumns?: Array> | undefined; + + // UseResizeColumnsState with fixed typings + columnResizing: { + startX?: number; + columnWidth?: number; + nextColumnWidth?: number; + headerIdWidths?: Array<[string, number]>; + nextHeaderIdWidths?: Array<[string, number]>; + columnWidths: Record; + isResizingColumn?: string; + }; + isTableResizing?: boolean; + columnReorderStartIndex: number; + sticky: { + isScrolledToRight?: boolean; + isScrolledToLeft?: boolean; + }; + lastSelectedRowId?: string; +} +export interface Hooks + extends UseTableHooks, + UseExpandedHooks, + UseGroupByHooks, + UseRowSelectHooks, + UseSortByHooks {} + +export interface Cell + extends UseTableCellProps, + UseGroupByCellProps, + UseRowStateCellProps {} + +export interface ColumnInterface + extends UseTableColumnOptions, + // UseGroupByColumnOptions, + UseSortByColumnOptions, + UseFiltersColumnOptions, + UseResizeColumnsColumnOptions, + UseGlobalFiltersColumnOptions { /** - * The empty definitions of below provides a base definition for the parts used by useTable, that can then be extended in the users code. - * + * Custom class name applied to header column cell. + */ + columnClassName?: string; + /** + * Custom class name applied to each column's cell. + */ + cellClassName?: string; + /** + * Type of the data in cell. Used for manual filtering. + */ + fieldType?: FieldType; + /** + * Filter component used as a column filter. Should use filters from `tableFilters`. + */ + Filter?: Renderer> | Renderer>; + /** + * String value or custom function to use for filtering. + * Possible string values: `text`, `exactText`, `exactTextCase`, `includes`, `includesAll`, `exact`, `equals`, `between`. + * More info about these filters: https://github.com/tannerlinsley/react-table/blob/master/src/filterTypes.js + */ + filter?: FilterType | DefaultFilterTypes | string; + /** + * Function that should return whole cell element not only the content. + * Must be memoized. * @example - * export interface TableOptions - * extends - * UseExpandedOptions, - * UseFiltersOptions {} - * see https://gist.github.com/ggascoigne/646e14c9d54258e40588a13aabf0102d for more details + * { + * Header: 'Name', + * accessor: 'name', + * cellRenderer: (props) => , + * } */ - export interface TableOptions - extends Omit, 'data' | 'columns'>, - UseRowSelectOptions, - UseExpandedOptions, - UseFiltersOptions, - // UseGroupByOptions, - UsePaginationOptions, - UseGlobalFiltersOptions, - UseGlobalFiltersColumnOptions, - Omit, 'disableResizing'>, - // UseRowStateOptions, - UseSortByOptions { - /** - * List of columns. - * - * Should not have a top-level `Header` or a `columns` sub-property. They are only allowed to be passed for backwards compatibility. - * See [migration guide](https://github.com/iTwin/iTwinUI/wiki/iTwinUI-react-v2-migration-guide#breaking-changes). - */ - columns: Array>; - /** - * Table data list. - * Must be memoized. - * - * Supports expandable sub-rows using the `subRows` field in data entries. - * If some rows don't have sub-data, it is recommended to pass an empty array to `subRows` for consistent spacing. - */ - data: D[]; - /** - * Column's resize mode. - * - `fit` - when resizing it affects current and the next column, - * e.g. when increasing width of current column, next column's width will decrease. - * - `expand` - when resizing it affects only the current column, - * e.g. when increasing width of the current column, next column's width remains the same. - * @default 'fit' - */ - columnResizeMode?: 'fit' | 'expand'; - } - - export interface TableInstance - extends Omit, 'columns' | 'pageCount'>, - UseTableInstanceProps, - UseColumnOrderInstanceProps, - UseExpandedInstanceProps, - UseFiltersInstanceProps, - UseGlobalFiltersInstanceProps, - UseGroupByInstanceProps, - UsePaginationInstanceProps, - UseRowSelectInstanceProps, - UseRowStateInstanceProps, - UseSortByInstanceProps { - initialRows: Row[]; - columnResizeMode: TableOptions['columnResizeMode']; - tableWidth: number; - } - - export interface TableState { - // extends - // UseColumnOrderState, - // UseExpandedState, - // UseFiltersState, - // UseGlobalFiltersState, - // UseGroupByState, - // UsePaginationState, - // UseRowSelectState, - // UseRowStateState, - // UseSortByState - // hiddenColumns?: Array> | undefined; - // columnResizing: { - // startX?: number; - // columnWidth?: number; - // nextColumnWidth?: number; - // headerIdWidths?: Array<[string, number]>; - // nextHeaderIdWidths?: Array<[string, number]>; - // columnWidths: Record; - // isResizingColumn?: string; - // }; - // isTableResizing?: boolean; - // columnReorderStartIndex: number; - // sticky: { - // isScrolledToRight?: boolean; - // isScrolledToLeft?: boolean; - // }; - // lastSelectedRowId?: string; - } - - export interface Hooks { - // extends UseTableHooks, - // UseExpandedHooks, - // UseGroupByHooks, - // UseRowSelectHooks, - // UseSortByHooks - } - - export interface Cell { - // extends UseTableCellProps, - // UseGroupByCellProps, - // UseRowStateCellProps - } - - export interface ColumnInterface { - // extends UseTableColumnOptions, - // UseSortByColumnOptions, - // UseFiltersColumnOptions, - // UseResizeColumnsColumnOptions, - // UseGlobalFiltersColumnOptions - /** - * Custom class name applied to header column cell. - */ - columnClassName?: string; - /** - * Custom class name applied to each column's cell. - */ - cellClassName?: string; - /** - * Type of the data in cell. Used for manual filtering. - */ - fieldType?: FieldType; - /** - * Filter component used as a column filter. Should use filters from `tableFilters`. - */ - Filter?: Renderer> | Renderer>; - // Filter?: Renderer> | undefined; - /** - * String value or custom function to use for filtering. - * Possible string values: `text`, `exactText`, `exactTextCase`, `includes`, `includesAll`, `exact`, `equals`, `between`. - * More info about these filters: https://github.com/tannerlinsley/react-table/blob/master/src/filterTypes.js - */ - filter?: FilterType | DefaultFilterTypes | string; - /** - * Function that should return whole cell element not only the content. - * Must be memoized. - * @example - * { - * Header: 'Name', - * accessor: 'name', - * cellRenderer: (props) => , - * } - */ - cellRenderer?: (props: CellRendererProps) => React.ReactNode; - /** - * If true, column can't be reordered. - * @default false - */ - disableReordering?: boolean; - /** - * If true, column's visibility cannot be toggled. - * @default false - */ - disableToggleVisibility?: boolean; - /** - * Side on which column should be sticked to. - */ - sticky?: 'left' | 'right'; - } - - export interface ColumnInterfaceBasedOnValue { - // Cell?: Renderer> | undefined; - // Cell?: (props: CellProps) => React.ReactNode; - // testing1: Renderer> | undefined; - // testing1?: Renderer> | undefined; - Cell?: Renderer> | undefined; - } - - // eslint-disable-next-line @typescript-eslint/no-empty-interface - export interface ColumnGroupInterface { - // columns: Array>; - } - - export type ColumnGroup = ColumnInterface & - ColumnGroupInterface & - ( - | { Header: string } - | ({ id: IdType } & { - Header: Renderer>; - }) - ) & { accessor?: Accessor | undefined }; // Not used, but needed for backwards compatibility - - type ValueOf = T[keyof T]; - - // interface TableStoryDataType { - // product: number; - // price: number; - // // [K in string]: any; - // quantity: number; - // rating: number; - // deliveryTime: number; - // status: 'positive' | 'negative' | 'warning' | undefined; - // // subRows: TableStoryDataType[]; - // // 1?: number; - // }; - - // // type testing = ColumnWithStrictAccessor - // // type testing = ColumnInterfaceBasedOnValue - // // type testing = CellProps - // type testing = TableInstance - - // The accessors like `foo.bar` are not supported, use functions instead - export type ColumnWithStrictAccessor = ColumnInterface & - // export type ColumnWithStrictAccessor = ValueOf<{ + cellRenderer?: (props: CellRendererProps) => React.ReactNode; + /** + * If true, column can't be reordered. + * @default false + */ + disableReordering?: boolean; + /** + * If true, column's visibility cannot be toggled. + * @default false + */ + disableToggleVisibility?: boolean; + /** + * Side on which column should be sticked to. + */ + sticky?: 'left' | 'right'; +} + +export interface ColumnInterfaceBasedOnValue { + Cell?: Renderer> | undefined; +} + +export interface ColumnGroupInterface { + columns: Array>; +} + +export type ColumnGroup = ColumnInterface & + ColumnGroupInterface & + ( + | { Header: string } + | ({ id: IdType } & { + Header: Renderer>; + }) + ) & { accessor?: Accessor | undefined }; // Not used, but needed for backwards compatibility + +type ValueOf = T[keyof T]; + +// The accessors like `foo.bar` are not supported, use functions instead +export type ColumnWithStrictAccessor = + ColumnInterface & ValueOf<{ [K in keyof D]: { accessor: K; } & ColumnInterfaceBasedOnValue; }>; - export type ColumnWithLooseAccessor = ColumnInterface & +export type ColumnWithLooseAccessor = + ColumnInterface & ColumnInterfaceBasedOnValue & ( | { Header: string } @@ -246,1060 +240,1026 @@ declare module 'react-table' { | undefined; }; - export type Column = - | ColumnGroup - | ColumnWithLooseAccessor - | ColumnWithStrictAccessor; - - // export type Column = ColumnWithStrictAccessor; - - export interface ColumnInstance - extends Omit, 'id'>, - ColumnInterfaceBasedOnValue, - UseTableColumnProps, - UseFiltersColumnProps, - UseGroupByColumnProps, - UseResizeColumnsColumnProps, - UseSortByColumnProps { - // originalWidth: number; - // resizeWidth?: number; - // isResizerVisible?: boolean; - // getDragAndDropProps: () => TableKeyedProps; - // originalSticky?: 'left' | 'right' | 'none'; - } - - export interface HeaderGroup - extends ColumnInstance, - UseTableHeaderGroupProps {} - - export interface Row - extends UseTableRowProps, - UseExpandedRowProps, - UseGroupByRowProps, - UseRowSelectRowProps, - UseRowStateRowProps { - initialSubRows: Row[]; - } - - export interface TableCommonProps { - style?: CSSProperties | undefined; - className?: string | undefined; - role?: string | undefined; - } - - export type TableProps = TableCommonProps; - - export type TableBodyProps = TableCommonProps; - - export interface TableKeyedProps extends TableCommonProps { - key: React.Key; - } - - export type TableHeaderGroupProps = TableKeyedProps; - - export type TableFooterGroupProps = TableKeyedProps; - - export type TableHeaderProps = TableKeyedProps; - - export type TableFooterProps = TableKeyedProps; - - export type TableRowProps = TableKeyedProps; - - export type TableCellProps = TableKeyedProps; - - export interface TableToggleCommonProps extends TableCommonProps { - onChange?: ((e: ChangeEvent) => void) | undefined; - checked?: boolean | undefined; - title?: string | undefined; - indeterminate?: boolean | undefined; - } - - export interface MetaBase { - instance: TableInstance; - userProps: any; - } - - // inspired by ExtendState in https://github.com/reduxjs/redux/blob/master/src/types/store.ts - export type Meta> = [ - Extension, - ] extends [never] - ? M - : M & Extension; - - //#region useTable - export function useTable( - options: TableOptions, - ...plugins: Array> - ): TableInstance; +export type Column = + | ColumnGroup + | ColumnWithLooseAccessor + | ColumnWithStrictAccessor; + +export interface ColumnInstance + extends Omit, 'id'>, + ColumnInterfaceBasedOnValue, + UseTableColumnProps, + UseFiltersColumnProps, + UseGroupByColumnProps, + UseResizeColumnsColumnProps, + UseSortByColumnProps { + originalWidth: number; + resizeWidth?: number; + isResizerVisible?: boolean; + getDragAndDropProps: () => TableKeyedProps; + originalSticky?: 'left' | 'right' | 'none'; +} + +export interface HeaderGroup + extends ColumnInstance, + UseTableHeaderGroupProps {} + +export interface Row + extends UseTableRowProps, + UseExpandedRowProps, + UseGroupByRowProps, + UseRowSelectRowProps, + UseRowStateRowProps { + initialSubRows: Row[]; +} - /** - * NOTE: To use custom options, use "Interface Merging" to add the custom options - */ - export type UseTableOptions = { - columns: ReadonlyArray>; - data: readonly D[]; - } & Partial<{ - initialState: Partial>; - stateReducer: ( +export interface TableCommonProps { + style?: CSSProperties | undefined; + className?: string | undefined; + role?: string | undefined; +} + +export interface TableProps extends TableCommonProps {} + +export interface TableBodyProps extends TableCommonProps {} + +export interface TableKeyedProps extends TableCommonProps { + key: React.Key; +} + +export interface TableHeaderGroupProps extends TableKeyedProps {} + +export interface TableFooterGroupProps extends TableKeyedProps {} + +export interface TableHeaderProps extends TableKeyedProps {} + +export interface TableFooterProps extends TableKeyedProps {} + +export interface TableRowProps extends TableKeyedProps {} + +export interface TableCellProps extends TableKeyedProps {} + +export interface TableToggleCommonProps extends TableCommonProps { + onChange?: ((e: ChangeEvent) => void) | undefined; + checked?: boolean | undefined; + title?: string | undefined; + indeterminate?: boolean | undefined; +} + +export interface MetaBase { + instance: TableInstance; + userProps: any; +} + +// inspired by ExtendState in https://github.com/reduxjs/redux/blob/master/src/types/store.ts +export type Meta> = [ + Extension, +] extends [never] + ? M + : M & Extension; + +//#region useTable +export function useTable( + options: TableOptions, + ...plugins: Array> +): TableInstance; + +/** + * NOTE: To use custom options, use "Interface Merging" to add the custom options + */ +export type UseTableOptions = { + columns: ReadonlyArray>; + data: readonly D[]; +} & Partial<{ + initialState: Partial>; + stateReducer: ( + newState: TableState, + action: ActionType, + previousState: TableState, + instance?: TableInstance, + ) => TableState; + useControlledState: (state: TableState, meta: Meta) => TableState; + defaultColumn: Partial>; + getSubRows: (originalRow: D, relativeIndex: number) => D[]; + getRowId: (originalRow: D, relativeIndex: number, parent?: Row) => string; + autoResetHiddenColumns: boolean; +}>; + +export type PropGetter< + D extends object, + Props, + T extends object = never, + P = Partial, +> = ((props: P, meta: Meta) => P | P[]) | P | P[]; + +export type TablePropGetter = PropGetter; + +export type TableBodyPropGetter = PropGetter< + D, + TableBodyProps +>; + +export type HeaderPropGetter = PropGetter< + D, + TableHeaderProps, + { column: HeaderGroup } +>; + +export type FooterGroupPropGetter = PropGetter< + D, + TableFooterGroupProps, + { column: HeaderGroup } +>; + +export type HeaderGroupPropGetter = PropGetter< + D, + TableHeaderGroupProps, + { column: HeaderGroup } +>; + +export type FooterPropGetter = PropGetter< + D, + TableFooterProps, + { column: HeaderGroup } +>; + +export type RowPropGetter = PropGetter< + D, + TableRowProps, + { row: Row } +>; + +export type CellPropGetter = PropGetter< + D, + TableCellProps, + { cell: Cell } +>; + +export interface ReducerTableState + extends TableState, + Record {} + +export interface UseTableHooks extends Record { + useOptions: Array< + (options: TableOptions, args: TableOptions) => TableOptions + >; + stateReducers: Array< + ( newState: TableState, action: ActionType, - previousState: TableState, + previousState?: TableState, instance?: TableInstance, - ) => TableState; - useControlledState: (state: TableState, meta: Meta) => TableState; - defaultColumn: Partial>; - getSubRows: (originalRow: D, relativeIndex: number) => D[]; - getRowId: ( - originalRow: D, - relativeIndex: number, - parent?: Row, - ) => string; - autoResetHiddenColumns: boolean; - }>; - - export type PropGetter< - D extends object, - Props, - T extends object = never, - P = Partial, - > = ((props: P, meta: Meta) => P | P[]) | P | P[]; - - export type TablePropGetter = PropGetter; - - export type TableBodyPropGetter = PropGetter< - D, - TableBodyProps + ) => ReducerTableState | undefined >; - - export type HeaderPropGetter = PropGetter< - D, - TableHeaderProps, - { column: HeaderGroup } + columns: Array< + (columns: Array>, meta: Meta) => Array> >; - - export type FooterGroupPropGetter = PropGetter< - D, - TableFooterGroupProps, - { column: HeaderGroup } + columnsDeps: Array<(deps: any[], meta: Meta) => any[]>; + allColumns: Array< + (allColumns: Array>, meta: Meta) => Array> >; - - export type HeaderGroupPropGetter = PropGetter< - D, - TableHeaderGroupProps, - { column: HeaderGroup } + allColumnsDeps: Array<(deps: any[], meta: Meta) => any[]>; + visibleColumns: Array< + (allColumns: Array>, meta: Meta) => Array> >; - - export type FooterPropGetter = PropGetter< - D, - TableFooterProps, - { column: HeaderGroup } + visibleColumnsDeps: Array<(deps: any[], meta: Meta) => any[]>; + headerGroups: Array< + (allColumns: Array>, meta: Meta) => Array> >; - - export type RowPropGetter = PropGetter< - D, - TableRowProps, - { row: Row } + headerGroupsDeps: Array<(deps: any[], meta: Meta) => any[]>; + useInstanceBeforeDimensions: Array<(instance: TableInstance) => void>; + useInstance: Array<(instance: TableInstance) => void>; + prepareRow: Array<(row: Row, meta: Meta) => void>; + useControlledState: Array< + (state: TableState, meta: Meta) => TableState >; - export type CellPropGetter = PropGetter< - D, - TableCellProps, - { cell: Cell } - >; + getTableProps: Array>; + getTableBodyProps: Array>; + getHeaderGroupProps: Array>; + getFooterGroupProps: Array>; + getHeaderProps: Array>; + getFooterProps: Array>; + getRowProps: Array>; + getCellProps: Array>; + useFinalInstance: Array<(instance: TableInstance) => void>; +} - export interface ReducerTableState - extends TableState, - Record {} - - export interface UseTableHooks extends Record { - useOptions: Array< - (options: TableOptions, args: TableOptions) => TableOptions - >; - stateReducers: Array< - ( - newState: TableState, - action: ActionType, - previousState?: TableState, - instance?: TableInstance, - ) => ReducerTableState | undefined - >; - columns: Array< - (columns: Array>, meta: Meta) => Array> - >; - columnsDeps: Array<(deps: any[], meta: Meta) => any[]>; - allColumns: Array< - (allColumns: Array>, meta: Meta) => Array> - >; - allColumnsDeps: Array<(deps: any[], meta: Meta) => any[]>; - visibleColumns: Array< - (allColumns: Array>, meta: Meta) => Array> - >; - visibleColumnsDeps: Array<(deps: any[], meta: Meta) => any[]>; - headerGroups: Array< - ( - allColumns: Array>, - meta: Meta, - ) => Array> - >; - headerGroupsDeps: Array<(deps: any[], meta: Meta) => any[]>; - useInstanceBeforeDimensions: Array<(instance: TableInstance) => void>; - useInstance: Array<(instance: TableInstance) => void>; - prepareRow: Array<(row: Row, meta: Meta) => void>; - useControlledState: Array< - (state: TableState, meta: Meta) => TableState - >; - - getTableProps: Array>; - getTableBodyProps: Array>; - getHeaderGroupProps: Array>; - getFooterGroupProps: Array>; - getHeaderProps: Array>; - getFooterProps: Array>; - getRowProps: Array>; - getCellProps: Array>; - useFinalInstance: Array<(instance: TableInstance) => void>; - } - - export interface UseTableColumnOptions { - id?: IdType | undefined; - Header?: Renderer> | undefined; - Footer?: Renderer> | undefined; - width?: number | string | undefined; - minWidth?: number | undefined; - maxWidth?: number | undefined; - } - - type UpdateHiddenColumns = ( - oldHidden: Array>, - ) => Array>; - - export type TableToggleHideAllColumnProps = TableToggleCommonProps; - - export interface UseTableInstanceProps { - state: TableState; - plugins: Array>; - dispatch: TableDispatch; - columns: Array>; - allColumns: Array>; - visibleColumns: Array>; - headerGroups: Array>; - footerGroups: Array>; - headers: Array>; - flatHeaders: Array>; - rows: Array>; - rowsById: Record>; - getTableProps: (propGetter?: TablePropGetter) => TableProps; - getTableBodyProps: (propGetter?: TableBodyPropGetter) => TableBodyProps; - prepareRow: (row: Row) => void; - flatRows: Array>; - totalColumnsWidth: number; - allColumnsHidden: boolean; - toggleHideColumn: (columnId: IdType, value?: boolean) => void; - setHiddenColumns: ( - param: Array> | UpdateHiddenColumns, - ) => void; - toggleHideAllColumns: (value?: boolean) => void; - getToggleHideAllColumnsProps: ( - props?: Partial, - ) => TableToggleHideAllColumnProps; - getHooks: () => Hooks; - } - - export interface UseTableHeaderGroupProps { - headers: Array>; - getHeaderGroupProps: ( - propGetter?: HeaderGroupPropGetter, - ) => TableHeaderProps; - getFooterGroupProps: ( - propGetter?: FooterGroupPropGetter, - ) => TableFooterProps; - totalHeaderCount: number; // not documented - } - - export interface UseTableColumnProps { - id: IdType; - columns?: Array> | undefined; - isVisible: boolean; - render: (type: 'Header' | 'Footer' | string, props?: object) => ReactNode; - totalLeft: number; - totalWidth: number; - getHeaderProps: (propGetter?: HeaderPropGetter) => TableHeaderProps; - getFooterProps: (propGetter?: FooterPropGetter) => TableFooterProps; - toggleHidden: (value?: boolean) => void; - parent?: ColumnInstance | undefined; // not documented - getToggleHiddenProps: (userProps?: any) => any; - depth: number; // not documented - placeholderOf?: ColumnInstance | undefined; - } - - export interface UseTableRowProps { - cells: Array>; - allCells: Array>; - values: Record, CellValue>; - getRowProps: (propGetter?: RowPropGetter) => TableRowProps; - index: number; - original: D; - id: string; - subRows: Array>; - } - - export interface UseTableCellProps { - column: ColumnInstance; - row: Row; - value: CellValue; - getCellProps: (propGetter?: CellPropGetter) => TableCellProps; - render: (type: 'Cell' | string, userProps?: object) => ReactNode; - } - - export type HeaderProps = TableInstance & { - column: ColumnInstance; - }; +export interface UseTableColumnOptions { + id?: IdType | undefined; + Header?: Renderer> | undefined; + Footer?: Renderer> | undefined; + width?: number | string | undefined; + minWidth?: number | undefined; + maxWidth?: number | undefined; +} - export type FooterProps = TableInstance & { - column: ColumnInstance; - }; +type UpdateHiddenColumns = ( + oldHidden: Array>, +) => Array>; + +export interface TableToggleHideAllColumnProps extends TableToggleCommonProps {} + +export interface UseTableInstanceProps { + state: TableState; + plugins: Array>; + dispatch: TableDispatch; + columns: Array>; + allColumns: Array>; + visibleColumns: Array>; + headerGroups: Array>; + footerGroups: Array>; + headers: Array>; + flatHeaders: Array>; + rows: Array>; + rowsById: Record>; + getTableProps: (propGetter?: TablePropGetter) => TableProps; + getTableBodyProps: (propGetter?: TableBodyPropGetter) => TableBodyProps; + prepareRow: (row: Row) => void; + flatRows: Array>; + totalColumnsWidth: number; + allColumnsHidden: boolean; + toggleHideColumn: (columnId: IdType, value?: boolean) => void; + setHiddenColumns: (param: Array> | UpdateHiddenColumns) => void; + toggleHideAllColumns: (value?: boolean) => void; + getToggleHideAllColumnsProps: ( + props?: Partial, + ) => TableToggleHideAllColumnProps; + getHooks: () => Hooks; +} - export type CellProps = { - column: ColumnInstance; - row: Row; - cell: Cell; - value: CellValue; - }; - // export type CellProps = TableInstance & { - // column: ColumnInstance; - // row: Row; - // cell: Cell; - // value: CellValue; - // }; - - export type Accessor = ( - originalRow: D, - index: number, - sub: { - subRows: D[]; - depth: number; - data: D[]; - }, - ) => CellValue; - - //#endregion - - // Plugins - - //#region useAbsoluteLayout - export function useAbsoluteLayout(hooks: Hooks): void; - - export namespace useAbsoluteLayout { - const pluginName = 'useAbsoluteLayout'; - } - //#endregion - - //#region useBlockLayout - export function useBlockLayout(hooks: Hooks): void; - - export namespace useBlockLayout { - const pluginName = 'useBlockLayout'; - } - //#endregion - - //#region useColumnOrder - export function useColumnOrder( - hooks: Hooks, - ): void; - - export namespace useColumnOrder { - const pluginName = 'useColumnOrder'; - } - - export interface UseColumnOrderState { - columnOrder: Array>; - } - - export interface UseColumnOrderInstanceProps { - setColumnOrder: ( - updater: - | ((columnOrder: Array>) => Array>) - | Array>, - ) => void; - } - - //#endregion - - //#region useExpanded - export function useExpanded(hooks: Hooks): void; - - export namespace useExpanded { - const pluginName = 'useExpanded'; - } - - export type TableExpandedToggleProps = TableKeyedProps; - - export type UseExpandedOptions = Partial<{ - manualExpandedKey: IdType; - paginateExpandedRows: boolean; - expandSubRows: boolean; - autoResetExpanded?: boolean | undefined; - }>; - - export interface UseExpandedHooks { - getToggleRowsExpandedProps: Array>; - getToggleAllRowsExpandedProps: Array>; - } - - export interface UseExpandedState { - expanded: Record, boolean>; - } - - export interface UseExpandedInstanceProps { - preExpandedRows: Array>; - expandedRows: Array>; - rows: Array>; - expandedDepth: number; - isAllRowsExpanded: boolean; - toggleRowExpanded: (id: Array>, value?: boolean) => void; - toggleAllRowsExpanded: (value?: boolean) => void; - } - - export interface UseExpandedRowProps { - isExpanded: boolean; - canExpand: boolean; - subRows: Array>; - toggleRowExpanded: (value?: boolean) => void; - getToggleRowExpandedProps: ( - props?: Partial, - ) => TableExpandedToggleProps; - depth: number; - } - - //#endregion - - //#region useFilters - export function useFilters(hooks: Hooks): void; - - export namespace useFilters { - const pluginName = 'useFilters'; - } - - export type UseFiltersOptions = Partial<{ - manualFilters: boolean; - disableFilters: boolean; - defaultCanFilter: boolean; - filterTypes: FilterTypes; - autoResetFilters?: boolean | undefined; - }>; - - export interface UseFiltersState { - filters: Filters; - } - - export type UseFiltersColumnOptions = Partial<{ - Filter: Renderer>; - disableFilters: boolean; - defaultCanFilter: boolean; - filter: FilterType | DefaultFilterTypes | string; - }>; - - export interface UseFiltersInstanceProps { - preFilteredRows: Array>; - preFilteredFlatRows: Array>; - preFilteredRowsById: Record>; - filteredRows: Array>; - filteredFlatRows: Array>; - filteredRowsById: Record>; - rows: Array>; - flatRows: Array>; - rowsById: Record>; - setFilter: ( - columnId: IdType, - updater: ((filterValue: FilterValue) => FilterValue) | FilterValue, - ) => void; - setAllFilters: ( - updater: Filters | ((filters: Filters) => Filters), - ) => void; - } - - export interface UseFiltersColumnProps { - canFilter: boolean; - setFilter: ( - updater: ((filterValue: FilterValue) => FilterValue) | FilterValue, - ) => void; - filterValue: FilterValue; - preFilteredRows: Array>; - filteredRows: Array>; - } - - export type FilterProps = HeaderProps; - export type FilterValue = any; - export type Filters = Array<{ - id: IdType; - value: FilterValue; - }>; - export type FilterTypes = Record>; - - export type DefaultFilterTypes = - | 'text' - | 'exactText' - | 'exactTextCase' - | 'includes' - | 'includesAll' - | 'exact' - | 'equals' - | 'between'; - - export interface FilterType { - ( - rows: Array>, - columnIds: Array>, - filterValue: FilterValue, - ): Array>; - - autoRemove?: ((filterValue: FilterValue) => boolean) | undefined; - } - - //#endregion - - //#region useFlexLayout - export function useFlexLayout( - hooks: Hooks, - ): void; - - export namespace useFlexLayout { - const pluginName = 'useFlexLayout'; - } - //#endregion - - //#region useGridLayout - export function useGridLayout( - hooks: Hooks, - ): void; - - export namespace useGridLayout { - const pluginName = 'useGridLayout'; - } - //#endregion - - //#region useGlobalFilter - export function useGlobalFilter( - hooks: Hooks, - ): void; - - export namespace useGlobalFilter { - const pluginName = 'useGlobalFilter'; - } - - export type UseGlobalFiltersOptions = Partial<{ - globalFilter: - | (( - rows: Array>, - columnIds: Array>, - filterValue: any, - ) => Array>) - | string; - manualGlobalFilter: boolean; - filterTypes: FilterTypes; - autoResetGlobalFilter?: boolean | undefined; - disableGlobalFilter?: boolean | undefined; - }>; - - export interface UseGlobalFiltersState { - globalFilter: any; - } - - export type UseGlobalFiltersColumnOptions = Partial<{ - disableGlobalFilter?: boolean | undefined; - }>; - - export interface UseGlobalFiltersInstanceProps { - preGlobalFilteredRows: Array>; - preGlobalFilteredFlatRows: Array>; - preGlobalFilteredRowsById: Record>; - globalFilteredRows: Array>; - globalFilteredFlatRows: Array>; - globalFilteredRowsById: Record>; - rows: Array>; - flatRows: Array>; - rowsById: Record>; - setGlobalFilter: (filterValue: FilterValue) => void; - } - - //#endregion - - //#region useGroupBy - export function useGroupBy(hooks: Hooks): void; - - export namespace useGroupBy { - const pluginName = 'useGroupBy'; - } - - export interface TableGroupByToggleProps { - title?: string | undefined; - style?: CSSProperties | undefined; - onClick?: ((e: MouseEvent) => void) | undefined; - } - - export type UseGroupByOptions = Partial<{ - manualGroupBy: boolean; - disableGroupBy: boolean; - defaultCanGroupBy: boolean; - aggregations: Record>; - groupByFn: ( - rows: Array>, - columnId: IdType, - ) => Record>>; - autoResetGroupBy?: boolean | undefined; - }>; - - export interface UseGroupByHooks { - getGroupByToggleProps: Array>; - } - - export interface UseGroupByState { - groupBy: Array>; - } - - export type UseGroupByColumnOptions = Partial<{ - aggregate: Aggregator; - Aggregated: Renderer>; - disableGroupBy: boolean; - defaultCanGroupBy: boolean; - }>; - - export interface UseGroupByInstanceProps { - preGroupedRows: Array>; - preGroupedFlatRows: Array>; - preGroupedRowsById: Record>; - groupedRows: Array>; - groupedFlatRows: Array>; - groupedRowsById: Record>; - onlyGroupedFlatRows: Array>; - onlyGroupedRowsById: Record>; - nonGroupedFlatRows: Array>; - nonGroupedRowsById: Record>; - rows: Array>; - flatRows: Array>; - rowsById: Record>; - toggleGroupBy: (columnId: IdType, value?: boolean) => void; - } - - export interface UseGroupByColumnProps { - canGroupBy: boolean; - isGrouped: boolean; - groupedIndex: number; - toggleGroupBy: () => void; - getGroupByToggleProps: ( - props?: Partial, - ) => TableGroupByToggleProps; - } - - export interface UseGroupByRowProps { - isGrouped: boolean; - groupByID: IdType; - groupByVal: string; - values: Record, AggregatedValue>; - subRows: Array>; - leafRows: Array>; +export interface UseTableHeaderGroupProps { + headers: Array>; + getHeaderGroupProps: ( + propGetter?: HeaderGroupPropGetter, + ) => TableHeaderProps; + getFooterGroupProps: ( + propGetter?: FooterGroupPropGetter, + ) => TableFooterProps; + totalHeaderCount: number; // not documented +} + +export interface UseTableColumnProps { + id: IdType; + columns?: Array> | undefined; + isVisible: boolean; + render: (type: 'Header' | 'Footer' | string, props?: object) => ReactNode; + totalLeft: number; + totalWidth: number; + getHeaderProps: (propGetter?: HeaderPropGetter) => TableHeaderProps; + getFooterProps: (propGetter?: FooterPropGetter) => TableFooterProps; + toggleHidden: (value?: boolean) => void; + parent?: ColumnInstance | undefined; // not documented + getToggleHiddenProps: (userProps?: any) => any; + depth: number; // not documented + placeholderOf?: ColumnInstance | undefined; +} + +export interface UseTableRowProps { + cells: Array>; + allCells: Array>; + values: Record, CellValue>; + getRowProps: (propGetter?: RowPropGetter) => TableRowProps; + index: number; + original: D; + id: string; + subRows: Array>; +} + +export interface UseTableCellProps { + column: ColumnInstance; + row: Row; + value: CellValue; + getCellProps: (propGetter?: CellPropGetter) => TableCellProps; + render: (type: 'Cell' | string, userProps?: object) => ReactNode; +} + +export type HeaderProps = TableInstance & { + column: ColumnInstance; +}; + +export type FooterProps = TableInstance & { + column: ColumnInstance; +}; + +export type CellProps = TableInstance & { + column: ColumnInstance; + row: Row; + cell: Cell; + value: CellValue; +}; + +export type Accessor = ( + originalRow: D, + index: number, + sub: { + subRows: D[]; depth: number; - id: string; - index: number; - } - - export interface UseGroupByCellProps { - isGrouped: boolean; - isPlaceholder: boolean; - isAggregated: boolean; - } - - export type DefaultAggregators = - | 'sum' - | 'average' - | 'median' - | 'uniqueCount' - | 'count'; - - export type AggregatorFn = ( - columnValues: CellValue[], + data: D[]; + }, +) => CellValue; + +//#endregion + +// Plugins + +//#region useAbsoluteLayout +export function useAbsoluteLayout(hooks: Hooks): void; + +export namespace useAbsoluteLayout { + const pluginName = 'useAbsoluteLayout'; +} +//#endregion + +//#region useBlockLayout +export function useBlockLayout(hooks: Hooks): void; + +export namespace useBlockLayout { + const pluginName = 'useBlockLayout'; +} +//#endregion + +//#region useColumnOrder +export function useColumnOrder(hooks: Hooks): void; + +export namespace useColumnOrder { + const pluginName = 'useColumnOrder'; +} + +export interface UseColumnOrderState { + columnOrder: Array>; +} + +export interface UseColumnOrderInstanceProps { + setColumnOrder: ( + updater: + | ((columnOrder: Array>) => Array>) + | Array>, + ) => void; +} + +//#endregion + +//#region useExpanded +export function useExpanded(hooks: Hooks): void; + +export namespace useExpanded { + const pluginName = 'useExpanded'; +} + +export interface TableExpandedToggleProps extends TableKeyedProps {} + +export type UseExpandedOptions = Partial<{ + manualExpandedKey: IdType; + paginateExpandedRows: boolean; + expandSubRows: boolean; + autoResetExpanded?: boolean | undefined; +}>; + +export interface UseExpandedHooks { + getToggleRowsExpandedProps: Array>; + getToggleAllRowsExpandedProps: Array>; +} + +export interface UseExpandedState { + expanded: Record, boolean>; +} + +export interface UseExpandedInstanceProps { + preExpandedRows: Array>; + expandedRows: Array>; + rows: Array>; + expandedDepth: number; + isAllRowsExpanded: boolean; + toggleRowExpanded: (id: Array>, value?: boolean) => void; + toggleAllRowsExpanded: (value?: boolean) => void; +} + +export interface UseExpandedRowProps { + isExpanded: boolean; + canExpand: boolean; + subRows: Array>; + toggleRowExpanded: (value?: boolean) => void; + getToggleRowExpandedProps: ( + props?: Partial, + ) => TableExpandedToggleProps; + depth: number; +} + +//#endregion + +//#region useFilters +export function useFilters(hooks: Hooks): void; + +export namespace useFilters { + const pluginName = 'useFilters'; +} + +export type UseFiltersOptions = Partial<{ + manualFilters: boolean; + disableFilters: boolean; + defaultCanFilter: boolean; + filterTypes: FilterTypes; + autoResetFilters?: boolean | undefined; +}>; + +export interface UseFiltersState { + filters: Filters; +} + +export type UseFiltersColumnOptions = Partial<{ + Filter: Renderer>; + disableFilters: boolean; + defaultCanFilter: boolean; + filter: FilterType | DefaultFilterTypes | string; +}>; + +export interface UseFiltersInstanceProps { + preFilteredRows: Array>; + preFilteredFlatRows: Array>; + preFilteredRowsById: Record>; + filteredRows: Array>; + filteredFlatRows: Array>; + filteredRowsById: Record>; + rows: Array>; + flatRows: Array>; + rowsById: Record>; + setFilter: ( + columnId: IdType, + updater: ((filterValue: FilterValue) => FilterValue) | FilterValue, + ) => void; + setAllFilters: ( + updater: Filters | ((filters: Filters) => Filters), + ) => void; +} + +export interface UseFiltersColumnProps { + canFilter: boolean; + setFilter: ( + updater: ((filterValue: FilterValue) => FilterValue) | FilterValue, + ) => void; + filterValue: FilterValue; + preFilteredRows: Array>; + filteredRows: Array>; +} + +export type FilterProps = HeaderProps; +export type FilterValue = any; +export type Filters = Array<{ + id: IdType; + value: FilterValue; +}>; +export type FilterTypes = Record>; + +export type DefaultFilterTypes = + | 'text' + | 'exactText' + | 'exactTextCase' + | 'includes' + | 'includesAll' + | 'exact' + | 'equals' + | 'between'; + +export interface FilterType { + ( rows: Array>, - isAggregated: boolean, - ) => AggregatedValue; - export type Aggregator = - | AggregatorFn - | DefaultAggregators + columnIds: Array>, + filterValue: FilterValue, + ): Array>; + + autoRemove?: ((filterValue: FilterValue) => boolean) | undefined; +} + +//#endregion + +//#region useFlexLayout +export function useFlexLayout(hooks: Hooks): void; + +export namespace useFlexLayout { + const pluginName = 'useFlexLayout'; +} +//#endregion + +//#region useGridLayout +export function useGridLayout(hooks: Hooks): void; + +export namespace useGridLayout { + const pluginName = 'useGridLayout'; +} +//#endregion + +//#region useGlobalFilter +export function useGlobalFilter(hooks: Hooks): void; + +export namespace useGlobalFilter { + const pluginName = 'useGlobalFilter'; +} + +export type UseGlobalFiltersOptions = Partial<{ + globalFilter: + | (( + rows: Array>, + columnIds: Array>, + filterValue: any, + ) => Array>) | string; - export type AggregatedValue = any; - //#endregion - - //#region usePagination - export function usePagination( - hooks: Hooks, - ): void; - - export namespace usePagination { - const pluginName = 'usePagination'; - } - - export type UsePaginationOptions = Partial<{ - pageCount: number; - manualPagination: boolean; - autoResetPage?: boolean | undefined; - paginateExpandedRows: boolean; - }>; - - export interface UsePaginationState { - pageSize: number; - pageIndex: number; - } - - export interface UsePaginationInstanceProps { - page: Array>; - pageCount: number; - pageOptions: number[]; - canPreviousPage: boolean; - canNextPage: boolean; - gotoPage: (updater: ((pageIndex: number) => number) | number) => void; - previousPage: () => void; - nextPage: () => void; - setPageSize: (pageSize: number) => void; - } - - //#endregion - - //#region useResizeColumns - export function useResizeColumns( - hooks: Hooks, - ): void; - - export namespace useResizeColumns { - const pluginName = 'useResizeColumns'; - } - - export interface UseResizeColumnsOptions { - disableResizing?: boolean | undefined; - autoResetResize?: boolean | undefined; - } - - export interface UseResizeColumnsState { - columnResizing: { - startX?: number | undefined; - columnWidth: number; - headerIdWidths: Record; - columnWidths: any; - isResizingColumn?: string | undefined; - }; - } - - export interface UseResizeColumnsColumnOptions { - disableResizing?: boolean | undefined; - } - - // export interface TableResizerProps {} - - export interface UseResizeColumnsColumnProps { - getResizerProps: (props?: Partial) => TableResizerProps; - canResize: boolean; - isResizing: boolean; - } - - //#endregion - - //#region useRowSelect - export function useRowSelect( - hooks: Hooks, - ): void; - - export namespace useRowSelect { - const pluginName = 'useRowSelect'; - } - - export type TableToggleAllRowsSelectedProps = TableToggleCommonProps; - - export type TableToggleRowsSelectedProps = TableToggleCommonProps; - - export type UseRowSelectOptions = Partial<{ - manualRowSelectedKey: IdType; - autoResetSelectedRows: boolean; - selectSubRows: boolean; - }>; - - export interface UseRowSelectHooks { - getToggleRowSelectedProps: Array< - PropGetter - >; - getToggleAllRowsSelectedProps: Array< - PropGetter - >; - getToggleAllPageRowsSelectedProps: Array< - PropGetter - >; - } - - export interface UseRowSelectState { - selectedRowIds: Record, boolean>; - } - - export interface UseRowSelectInstanceProps { - toggleRowSelected: (rowId: IdType, set?: boolean) => void; - toggleAllRowsSelected: (value?: boolean) => void; - getToggleAllRowsSelectedProps: ( - props?: Partial, - ) => TableToggleAllRowsSelectedProps; - getToggleAllPageRowsSelectedProps: ( - props?: Partial, - ) => TableToggleAllRowsSelectedProps; - isAllRowsSelected: boolean; - selectedFlatRows: Array>; - } - - export interface UseRowSelectRowProps { - isSelected: boolean; - isSomeSelected: boolean; - toggleRowSelected: (set?: boolean) => void; - getToggleRowSelectedProps: ( - props?: Partial, - ) => TableToggleRowsSelectedProps; - } - - //#endregion - - //#region useRowState - export function useRowState(hooks: Hooks): void; - - export namespace useRowState { - const pluginName = 'useRowState'; - } - - export type UseRowStateOptions = Partial<{ - initialRowStateAccessor: (row: Row) => UseRowStateLocalState; - getResetRowStateDeps: (instance: TableInstance) => any[]; - autoResetRowState?: boolean | undefined; - }>; - - export interface UseRowStateState { - rowState: Record }>; - } - - export interface UseRowStateInstanceProps { - setRowState: (rowPath: string[], updater: UseRowUpdater) => void; - setCellState: ( - rowPath: string[], - columnId: IdType, - updater: UseRowUpdater, - ) => void; - } - - export interface UseRowStateRowProps { - state: UseRowStateLocalState; - setState: (updater: UseRowUpdater) => void; - } - - export interface UseRowStateCellProps { - state: UseRowStateLocalState; - setState: (updater: UseRowUpdater) => void; - } - - export type UseRowUpdater = T | ((prev: T) => T); - export type UseRowStateLocalState = Record< - IdType, - T + manualGlobalFilter: boolean; + filterTypes: FilterTypes; + autoResetGlobalFilter?: boolean | undefined; + disableGlobalFilter?: boolean | undefined; +}>; + +export interface UseGlobalFiltersState { + globalFilter: any; +} + +export type UseGlobalFiltersColumnOptions = Partial<{ + disableGlobalFilter?: boolean | undefined; +}>; + +export interface UseGlobalFiltersInstanceProps { + preGlobalFilteredRows: Array>; + preGlobalFilteredFlatRows: Array>; + preGlobalFilteredRowsById: Record>; + globalFilteredRows: Array>; + globalFilteredFlatRows: Array>; + globalFilteredRowsById: Record>; + rows: Array>; + flatRows: Array>; + rowsById: Record>; + setGlobalFilter: (filterValue: FilterValue) => void; +} + +//#endregion + +//#region useGroupBy +export function useGroupBy(hooks: Hooks): void; + +export namespace useGroupBy { + const pluginName = 'useGroupBy'; +} + +export interface TableGroupByToggleProps { + title?: string | undefined; + style?: CSSProperties | undefined; + onClick?: ((e: MouseEvent) => void) | undefined; +} + +export type UseGroupByOptions = Partial<{ + manualGroupBy: boolean; + disableGroupBy: boolean; + defaultCanGroupBy: boolean; + aggregations: Record>; + groupByFn: ( + rows: Array>, + columnId: IdType, + ) => Record>>; + autoResetGroupBy?: boolean | undefined; +}>; + +export interface UseGroupByHooks { + getGroupByToggleProps: Array>; +} + +export interface UseGroupByState { + groupBy: Array>; +} + +export type UseGroupByColumnOptions = Partial<{ + aggregate: Aggregator; + Aggregated: Renderer>; + disableGroupBy: boolean; + defaultCanGroupBy: boolean; +}>; + +export interface UseGroupByInstanceProps { + preGroupedRows: Array>; + preGroupedFlatRows: Array>; + preGroupedRowsById: Record>; + groupedRows: Array>; + groupedFlatRows: Array>; + groupedRowsById: Record>; + onlyGroupedFlatRows: Array>; + onlyGroupedRowsById: Record>; + nonGroupedFlatRows: Array>; + nonGroupedRowsById: Record>; + rows: Array>; + flatRows: Array>; + rowsById: Record>; + toggleGroupBy: (columnId: IdType, value?: boolean) => void; +} + +export interface UseGroupByColumnProps { + canGroupBy: boolean; + isGrouped: boolean; + groupedIndex: number; + toggleGroupBy: () => void; + getGroupByToggleProps: ( + props?: Partial, + ) => TableGroupByToggleProps; +} + +export interface UseGroupByRowProps { + isGrouped: boolean; + groupByID: IdType; + groupByVal: string; + values: Record, AggregatedValue>; + subRows: Array>; + leafRows: Array>; + depth: number; + id: string; + index: number; +} + +export interface UseGroupByCellProps { + isGrouped: boolean; + isPlaceholder: boolean; + isAggregated: boolean; +} + +export type DefaultAggregators = + | 'sum' + | 'average' + | 'median' + | 'uniqueCount' + | 'count'; + +export type AggregatorFn = ( + columnValues: CellValue[], + rows: Array>, + isAggregated: boolean, +) => AggregatedValue; +export type Aggregator = + | AggregatorFn + | DefaultAggregators + | string; +export type AggregatedValue = any; +//#endregion + +//#region usePagination +export function usePagination(hooks: Hooks): void; + +export namespace usePagination { + const pluginName = 'usePagination'; +} + +export type UsePaginationOptions = Partial<{ + pageCount: number; + manualPagination: boolean; + autoResetPage?: boolean | undefined; + paginateExpandedRows: boolean; +}>; + +export interface UsePaginationState { + pageSize: number; + pageIndex: number; +} + +export interface UsePaginationInstanceProps { + page: Array>; + pageCount: number; + pageOptions: number[]; + canPreviousPage: boolean; + canNextPage: boolean; + gotoPage: (updater: ((pageIndex: number) => number) | number) => void; + previousPage: () => void; + nextPage: () => void; + setPageSize: (pageSize: number) => void; +} + +//#endregion + +//#region useResizeColumns +export function useResizeColumns(hooks: Hooks): void; + +export namespace useResizeColumns { + const pluginName = 'useResizeColumns'; +} + +export interface UseResizeColumnsOptions { + disableResizing?: boolean | undefined; + autoResetResize?: boolean | undefined; +} + +export interface UseResizeColumnsState { + columnResizing: { + startX?: number | undefined; + columnWidth: number; + headerIdWidths: Record; + columnWidths: any; + isResizingColumn?: string | undefined; + }; +} + +export interface UseResizeColumnsColumnOptions { + disableResizing?: boolean | undefined; +} + +export interface TableResizerProps {} + +export interface UseResizeColumnsColumnProps { + getResizerProps: (props?: Partial) => TableResizerProps; + canResize: boolean; + isResizing: boolean; +} + +//#endregion + +//#region useRowSelect +export function useRowSelect(hooks: Hooks): void; + +export namespace useRowSelect { + const pluginName = 'useRowSelect'; +} + +export interface TableToggleAllRowsSelectedProps + extends TableToggleCommonProps {} + +export interface TableToggleRowsSelectedProps extends TableToggleCommonProps {} + +export type UseRowSelectOptions = Partial<{ + manualRowSelectedKey: IdType; + autoResetSelectedRows: boolean; + selectSubRows: boolean; +}>; + +export interface UseRowSelectHooks { + getToggleRowSelectedProps: Array>; + getToggleAllRowsSelectedProps: Array< + PropGetter >; - //#endregion - - //#region useSortBy - export function useSortBy(hooks: Hooks): void; - - export namespace useSortBy { - const pluginName = 'useSortBy'; - } - - export interface TableSortByToggleProps { - title?: string | undefined; - style?: CSSProperties | undefined; - onClick?: ((e: MouseEvent) => void) | undefined; - } - - export type UseSortByOptions = Partial<{ - manualSortBy: boolean; - disableSortBy: boolean; - defaultCanSort: boolean; - disableMultiSort: boolean; - isMultiSortEvent: (e: MouseEvent) => boolean; - maxMultiSortColCount: number; - disableSortRemove: boolean; - disabledMultiRemove: boolean; - orderByFn: ( - rows: Array>, - sortFns: Array>, - directions: boolean[], - ) => Array>; - sortTypes: Record>; - autoResetSortBy?: boolean | undefined; - }>; - - export interface UseSortByHooks { - getSortByToggleProps: Array>; - } - - export interface UseSortByState { - sortBy: Array>; - } - - export type UseSortByColumnOptions = Partial<{ - defaultCanSort: boolean; - disableSortBy: boolean; - sortDescFirst: boolean; - sortInverted: boolean; - sortType: SortByFn | DefaultSortTypes | string; - }>; - - export interface UseSortByInstanceProps { - rows: Array>; - preSortedRows: Array>; - setSortBy: (sortBy: Array>) => void; - toggleSortBy: ( - columnId: IdType, - descending?: boolean, - isMulti?: boolean, - ) => void; - } - - export interface UseSortByColumnProps { - canSort: boolean; - toggleSortBy: (descending?: boolean, multi?: boolean) => void; - getSortByToggleProps: ( - props?: Partial, - ) => TableSortByToggleProps; - clearSortBy: () => void; - isSorted: boolean; - sortedIndex: number; - isSortedDesc: boolean | undefined; - } - - export type OrderByFn = ( - rowA: Row, - rowB: Row, - ) => number; - export type SortByFn = ( - rowA: Row, - rowB: Row, + getToggleAllPageRowsSelectedProps: Array< + PropGetter + >; +} + +export interface UseRowSelectState { + selectedRowIds: Record, boolean>; +} + +export interface UseRowSelectInstanceProps { + toggleRowSelected: (rowId: IdType, set?: boolean) => void; + toggleAllRowsSelected: (value?: boolean) => void; + getToggleAllRowsSelectedProps: ( + props?: Partial, + ) => TableToggleAllRowsSelectedProps; + getToggleAllPageRowsSelectedProps: ( + props?: Partial, + ) => TableToggleAllRowsSelectedProps; + isAllRowsSelected: boolean; + selectedFlatRows: Array>; +} + +export interface UseRowSelectRowProps { + isSelected: boolean; + isSomeSelected: boolean; + toggleRowSelected: (set?: boolean) => void; + getToggleRowSelectedProps: ( + props?: Partial, + ) => TableToggleRowsSelectedProps; +} + +//#endregion + +//#region useRowState +export function useRowState(hooks: Hooks): void; + +export namespace useRowState { + const pluginName = 'useRowState'; +} + +export type UseRowStateOptions = Partial<{ + initialRowStateAccessor: (row: Row) => UseRowStateLocalState; + getResetRowStateDeps: (instance: TableInstance) => any[]; + autoResetRowState?: boolean | undefined; +}>; + +export interface UseRowStateState { + rowState: Record }>; +} + +export interface UseRowStateInstanceProps { + setRowState: (rowPath: string[], updater: UseRowUpdater) => void; + setCellState: ( + rowPath: string[], columnId: IdType, - desc?: boolean, - ) => number; - - export type DefaultSortTypes = - | 'alphanumeric' - | 'datetime' - | 'basic' - | 'string' - | 'number'; - - export interface SortingRule { - id: IdType; - desc?: boolean | undefined; - } - - //#endregion - - // Additional API - export const actions: Record; - export type ActionType = { type: string } & Record; - export const defaultColumn: Partial & Record; - - // Helpers - export type StringKey = Extract; - export type IdType = StringKey | string; - export type CellValue = V; - - export type Renderer = - | ComponentType - | ReactElement - | string - | number - | ReactFragment; - - export interface PluginHook { - (hooks: Hooks): void; - pluginName?: string | undefined; - } - - export type TableDispatch
= (action: A) => void; - - // utils - export function defaultOrderByFn( - arr: Array>, - funcs: Array>, - dirs: boolean[], - ): Array>; + updater: UseRowUpdater, + ) => void; +} + +export interface UseRowStateRowProps { + state: UseRowStateLocalState; + setState: (updater: UseRowUpdater) => void; +} + +export interface UseRowStateCellProps { + state: UseRowStateLocalState; + setState: (updater: UseRowUpdater) => void; +} + +export type UseRowUpdater = T | ((prev: T) => T); +export type UseRowStateLocalState = Record< + IdType, + T +>; +//#endregion + +//#region useSortBy +export function useSortBy(hooks: Hooks): void; + +export namespace useSortBy { + const pluginName = 'useSortBy'; +} - export function defaultGroupByFn( +export interface TableSortByToggleProps { + title?: string | undefined; + style?: CSSProperties | undefined; + onClick?: ((e: MouseEvent) => void) | undefined; +} + +export type UseSortByOptions = Partial<{ + manualSortBy: boolean; + disableSortBy: boolean; + defaultCanSort: boolean; + disableMultiSort: boolean; + isMultiSortEvent: (e: MouseEvent) => boolean; + maxMultiSortColCount: number; + disableSortRemove: boolean; + disabledMultiRemove: boolean; + orderByFn: ( rows: Array>, + sortFns: Array>, + directions: boolean[], + ) => Array>; + sortTypes: Record>; + autoResetSortBy?: boolean | undefined; +}>; + +export interface UseSortByHooks { + getSortByToggleProps: Array>; +} + +export interface UseSortByState { + sortBy: Array>; +} + +export type UseSortByColumnOptions = Partial<{ + defaultCanSort: boolean; + disableSortBy: boolean; + sortDescFirst: boolean; + sortInverted: boolean; + sortType: SortByFn | DefaultSortTypes | string; +}>; + +export interface UseSortByInstanceProps { + rows: Array>; + preSortedRows: Array>; + setSortBy: (sortBy: Array>) => void; + toggleSortBy: ( columnId: IdType, - ): Record>>; - - export function makePropGetter(hooks: Hooks, ...meta: any[]): any; - - export function reduceHooks( - hooks: Hooks, - initial: T, - ...args: any[] - ): T; - - export function loopHooks(hooks: Hooks, ...args: any[]): void; - - export function ensurePluginOrder( - plugins: Array>, - befores: string[], - pluginName: string, - ): void; - - export function functionalUpdate( - updater: any, - old: Partial>, - ): Partial>; - - export function useGetLatest(obj: T): () => T; - - export function safeUseLayoutEffect( - effect: EffectCallback, - deps?: DependencyList, - ): void; - - export function useMountedLayoutEffect( - effect: EffectCallback, - deps?: DependencyList, - ): void; - - export function useAsyncDebounce any>( - defaultFn: F, - defaultWait?: number, - ): F; - - export function makeRenderer( - instance: TableInstance, - column: ColumnInstance, - meta?: any, - ): ReactElement; - - ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// - - // Additional Types - - export type FieldType = 'text' | 'number' | 'date' | string; - - export type CellRendererProps = { - /** - * Cell HTML props passed from the Table. - */ - cellElementProps: TableCellProps; - /** - * Table specific cell props like `column`, `row`. - */ - cellProps: CellProps; - /** - * Cell's content. - */ - children: React.ReactNode; - /** - * Function that returns whether the cell is disabled. - */ - isDisabled?: (rowData: D) => boolean; - }; + descending?: boolean, + isMulti?: boolean, + ) => void; } + +export interface UseSortByColumnProps { + canSort: boolean; + toggleSortBy: (descending?: boolean, multi?: boolean) => void; + getSortByToggleProps: ( + props?: Partial, + ) => TableSortByToggleProps; + clearSortBy: () => void; + isSorted: boolean; + sortedIndex: number; + isSortedDesc: boolean | undefined; +} + +export type OrderByFn = ( + rowA: Row, + rowB: Row, +) => number; +export type SortByFn = ( + rowA: Row, + rowB: Row, + columnId: IdType, + desc?: boolean, +) => number; + +export type DefaultSortTypes = + | 'alphanumeric' + | 'datetime' + | 'basic' + | 'string' + | 'number'; + +export interface SortingRule { + id: IdType; + desc?: boolean | undefined; +} + +//#endregion + +// Additional API +export const actions: Record; +export type ActionType = { type: string } & Record; +export const defaultColumn: Partial & Record; + +// Helpers +export type StringKey = Extract; +export type IdType = StringKey | string; +export type CellValue = V; + +export type Renderer = + | ComponentType + | ReactElement + | string + | number + | ReactFragment; + +export interface PluginHook { + (hooks: Hooks): void; + pluginName?: string | undefined; +} + +export type TableDispatch = (action: A) => void; + +// utils +export function defaultOrderByFn( + arr: Array>, + funcs: Array>, + dirs: boolean[], +): Array>; + +export function defaultGroupByFn( + rows: Array>, + columnId: IdType, +): Record>>; + +export function makePropGetter(hooks: Hooks, ...meta: any[]): any; + +export function reduceHooks( + hooks: Hooks, + initial: T, + ...args: any[] +): T; + +export function loopHooks(hooks: Hooks, ...args: any[]): void; + +export function ensurePluginOrder( + plugins: Array>, + befores: string[], + pluginName: string, +): void; + +export function functionalUpdate( + updater: any, + old: Partial>, +): Partial>; + +export function useGetLatest(obj: T): () => T; + +export function safeUseLayoutEffect( + effect: EffectCallback, + deps?: DependencyList, +): void; + +export function useMountedLayoutEffect( + effect: EffectCallback, + deps?: DependencyList, +): void; + +export function useAsyncDebounce any>( + defaultFn: F, + defaultWait?: number, +): F; + +export function makeRenderer( + instance: TableInstance, + column: ColumnInstance, + meta?: any, +): ReactElement; + +////////////////////////////////////////////////////////////////////////////////////////////////// +// Custom Additions (parts from the old file called react-table-config.ts) + +export type FieldType = 'text' | 'number' | 'date' | string; + +export type CellRendererProps = { + /** + * Cell HTML props passed from the Table. + */ + cellElementProps: TableCellProps; + /** + * Table specific cell props like `column`, `row`. + */ + cellProps: CellProps; + /** + * Cell's content. + */ + children: React.ReactNode; + /** + * Function that returns whether the cell is disabled. + */ + isDisabled?: (rowData: D) => boolean; +}; From 538fd91bfd4a96097c5e8c1ce5279607a2015233 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Wed, 23 Aug 2023 16:05:31 -0400 Subject: [PATCH 031/196] Wrapped index.d.ts code in declare module --- .../src/types/react-table/index.d.ts | 2419 +++++++++-------- 1 file changed, 1219 insertions(+), 1200 deletions(-) diff --git a/packages/itwinui-react/src/types/react-table/index.d.ts b/packages/itwinui-react/src/types/react-table/index.d.ts index 24133696741..75146013b20 100644 --- a/packages/itwinui-react/src/types/react-table/index.d.ts +++ b/packages/itwinui-react/src/types/react-table/index.d.ts @@ -33,1233 +33,1252 @@ import { ReactNode, } from 'react'; -export {}; - -/** - * The empty definitions of below provides a base definition for the parts used by useTable, that can then be extended in the users code. - * - * @example - * export interface TableOptions - * extends - * UseExpandedOptions, - * UseFiltersOptions {} - * see https://gist.github.com/ggascoigne/646e14c9d54258e40588a13aabf0102d for more details - */ -export interface TableOptions - extends Omit, 'data' | 'columns'>, - UseRowSelectOptions, - UseExpandedOptions, - UseFiltersOptions, - // UseGroupByOptions, - UsePaginationOptions, - UseGlobalFiltersOptions, - UseGlobalFiltersColumnOptions, - Omit, 'disableResizing'>, - // UseRowStateOptions, - UseSortByOptions { - /** - * List of columns. - * - * Should not have a top-level `Header` or a `columns` sub-property. They are only allowed to be passed for backwards compatibility. - * See [migration guide](https://github.com/iTwin/iTwinUI/wiki/iTwinUI-react-v2-migration-guide#breaking-changes). - */ - columns: Array>; - /** - * Table data list. - * Must be memoized. - * - * Supports expandable sub-rows using the `subRows` field in data entries. - * If some rows don't have sub-data, it is recommended to pass an empty array to `subRows` for consistent spacing. - */ - data: D[]; - /** - * Column's resize mode. - * - `fit` - when resizing it affects current and the next column, - * e.g. when increasing width of current column, next column's width will decrease. - * - `expand` - when resizing it affects only the current column, - * e.g. when increasing width of the current column, next column's width remains the same. - * @default 'fit' - */ - columnResizeMode?: 'fit' | 'expand'; -} +declare module 'react-table' { + export {}; -export interface TableInstance - extends Omit, 'columns' | 'pageCount'>, - UseTableInstanceProps, - UseColumnOrderInstanceProps, - UseExpandedInstanceProps, - UseFiltersInstanceProps, - UseGlobalFiltersInstanceProps, - UseGroupByInstanceProps, - UsePaginationInstanceProps, - UseRowSelectInstanceProps, - UseRowStateInstanceProps, - UseSortByInstanceProps { - initialRows: Row[]; - columnResizeMode: TableOptions['columnResizeMode']; - tableWidth: number; -} - -export interface TableState - extends UseColumnOrderState, - UseExpandedState, - UseFiltersState, - UseGlobalFiltersState, - UseGroupByState, - UsePaginationState, - UseRowSelectState, - UseRowStateState, - UseSortByState { - hiddenColumns?: Array> | undefined; - - // UseResizeColumnsState with fixed typings - columnResizing: { - startX?: number; - columnWidth?: number; - nextColumnWidth?: number; - headerIdWidths?: Array<[string, number]>; - nextHeaderIdWidths?: Array<[string, number]>; - columnWidths: Record; - isResizingColumn?: string; - }; - isTableResizing?: boolean; - columnReorderStartIndex: number; - sticky: { - isScrolledToRight?: boolean; - isScrolledToLeft?: boolean; - }; - lastSelectedRowId?: string; -} - -export interface Hooks - extends UseTableHooks, - UseExpandedHooks, - UseGroupByHooks, - UseRowSelectHooks, - UseSortByHooks {} - -export interface Cell - extends UseTableCellProps, - UseGroupByCellProps, - UseRowStateCellProps {} - -export interface ColumnInterface - extends UseTableColumnOptions, - // UseGroupByColumnOptions, - UseSortByColumnOptions, - UseFiltersColumnOptions, - UseResizeColumnsColumnOptions, - UseGlobalFiltersColumnOptions { - /** - * Custom class name applied to header column cell. - */ - columnClassName?: string; /** - * Custom class name applied to each column's cell. - */ - cellClassName?: string; - /** - * Type of the data in cell. Used for manual filtering. - */ - fieldType?: FieldType; - /** - * Filter component used as a column filter. Should use filters from `tableFilters`. - */ - Filter?: Renderer> | Renderer>; - /** - * String value or custom function to use for filtering. - * Possible string values: `text`, `exactText`, `exactTextCase`, `includes`, `includesAll`, `exact`, `equals`, `between`. - * More info about these filters: https://github.com/tannerlinsley/react-table/blob/master/src/filterTypes.js - */ - filter?: FilterType | DefaultFilterTypes | string; - /** - * Function that should return whole cell element not only the content. - * Must be memoized. + * The empty definitions of below provides a base definition for the parts used by useTable, that can then be extended in the users code. + * * @example - * { - * Header: 'Name', - * accessor: 'name', - * cellRenderer: (props) => , - * } + * export interface TableOptions + * extends + * UseExpandedOptions, + * UseFiltersOptions {} + * see https://gist.github.com/ggascoigne/646e14c9d54258e40588a13aabf0102d for more details */ - cellRenderer?: (props: CellRendererProps) => React.ReactNode; - /** - * If true, column can't be reordered. - * @default false - */ - disableReordering?: boolean; - /** - * If true, column's visibility cannot be toggled. - * @default false - */ - disableToggleVisibility?: boolean; - /** - * Side on which column should be sticked to. - */ - sticky?: 'left' | 'right'; -} - -export interface ColumnInterfaceBasedOnValue { - Cell?: Renderer> | undefined; -} - -export interface ColumnGroupInterface { - columns: Array>; -} - -export type ColumnGroup = ColumnInterface & - ColumnGroupInterface & - ( - | { Header: string } - | ({ id: IdType } & { - Header: Renderer>; - }) - ) & { accessor?: Accessor | undefined }; // Not used, but needed for backwards compatibility - -type ValueOf = T[keyof T]; - -// The accessors like `foo.bar` are not supported, use functions instead -export type ColumnWithStrictAccessor = - ColumnInterface & - ValueOf<{ - [K in keyof D]: { - accessor: K; - } & ColumnInterfaceBasedOnValue; - }>; - -export type ColumnWithLooseAccessor = - ColumnInterface & - ColumnInterfaceBasedOnValue & + export interface TableOptions + extends Omit, 'data' | 'columns'>, + UseRowSelectOptions, + UseExpandedOptions, + UseFiltersOptions, + // UseGroupByOptions, + UsePaginationOptions, + UseGlobalFiltersOptions, + UseGlobalFiltersColumnOptions, + Omit, 'disableResizing'>, + // UseRowStateOptions, + UseSortByOptions { + /** + * List of columns. + * + * Should not have a top-level `Header` or a `columns` sub-property. They are only allowed to be passed for backwards compatibility. + * See [migration guide](https://github.com/iTwin/iTwinUI/wiki/iTwinUI-react-v2-migration-guide#breaking-changes). + */ + columns: Array>; + /** + * Table data list. + * Must be memoized. + * + * Supports expandable sub-rows using the `subRows` field in data entries. + * If some rows don't have sub-data, it is recommended to pass an empty array to `subRows` for consistent spacing. + */ + data: D[]; + /** + * Column's resize mode. + * - `fit` - when resizing it affects current and the next column, + * e.g. when increasing width of current column, next column's width will decrease. + * - `expand` - when resizing it affects only the current column, + * e.g. when increasing width of the current column, next column's width remains the same. + * @default 'fit' + */ + columnResizeMode?: 'fit' | 'expand'; + } + + export interface TableInstance + extends Omit, 'columns' | 'pageCount'>, + UseTableInstanceProps, + UseColumnOrderInstanceProps, + UseExpandedInstanceProps, + UseFiltersInstanceProps, + UseGlobalFiltersInstanceProps, + UseGroupByInstanceProps, + UsePaginationInstanceProps, + UseRowSelectInstanceProps, + UseRowStateInstanceProps, + UseSortByInstanceProps { + initialRows: Row[]; + columnResizeMode: TableOptions['columnResizeMode']; + tableWidth: number; + } + + export interface TableState + extends UseColumnOrderState, + UseExpandedState, + UseFiltersState, + UseGlobalFiltersState, + UseGroupByState, + UsePaginationState, + UseRowSelectState, + UseRowStateState, + UseSortByState { + hiddenColumns?: Array> | undefined; + + // UseResizeColumnsState with fixed typings + columnResizing: { + startX?: number; + columnWidth?: number; + nextColumnWidth?: number; + headerIdWidths?: Array<[string, number]>; + nextHeaderIdWidths?: Array<[string, number]>; + columnWidths: Record; + isResizingColumn?: string; + }; + isTableResizing?: boolean; + columnReorderStartIndex: number; + sticky: { + isScrolledToRight?: boolean; + isScrolledToLeft?: boolean; + }; + lastSelectedRowId?: string; + } + + export interface Hooks + extends UseTableHooks, + UseExpandedHooks, + UseGroupByHooks, + UseRowSelectHooks, + UseSortByHooks {} + + export interface Cell + extends UseTableCellProps, + UseGroupByCellProps, + UseRowStateCellProps {} + + export interface ColumnInterface + extends UseTableColumnOptions, + // UseGroupByColumnOptions, + UseSortByColumnOptions, + UseFiltersColumnOptions, + UseResizeColumnsColumnOptions, + UseGlobalFiltersColumnOptions { + /** + * Custom class name applied to header column cell. + */ + columnClassName?: string; + /** + * Custom class name applied to each column's cell. + */ + cellClassName?: string; + /** + * Type of the data in cell. Used for manual filtering. + */ + fieldType?: FieldType; + /** + * Filter component used as a column filter. Should use filters from `tableFilters`. + */ + Filter?: Renderer> | Renderer>; + /** + * String value or custom function to use for filtering. + * Possible string values: `text`, `exactText`, `exactTextCase`, `includes`, `includesAll`, `exact`, `equals`, `between`. + * More info about these filters: https://github.com/tannerlinsley/react-table/blob/master/src/filterTypes.js + */ + filter?: FilterType | DefaultFilterTypes | string; + /** + * Function that should return whole cell element not only the content. + * Must be memoized. + * @example + * { + * Header: 'Name', + * accessor: 'name', + * cellRenderer: (props) => , + * } + */ + cellRenderer?: (props: CellRendererProps) => React.ReactNode; + /** + * If true, column can't be reordered. + * @default false + */ + disableReordering?: boolean; + /** + * If true, column's visibility cannot be toggled. + * @default false + */ + disableToggleVisibility?: boolean; + /** + * Side on which column should be sticked to. + */ + sticky?: 'left' | 'right'; + } + + export interface ColumnInterfaceBasedOnValue { + Cell?: Renderer> | undefined; + } + + export interface ColumnGroupInterface { + columns: Array>; + } + + export type ColumnGroup = ColumnInterface & + ColumnGroupInterface & ( | { Header: string } - | { id: IdType } - | { accessor: keyof D extends never ? IdType : never } - ) & { - accessor?: - | (keyof D extends never ? IdType | Accessor : Accessor) - | undefined; - }; + | ({ id: IdType } & { + Header: Renderer>; + }) + ) & { accessor?: Accessor | undefined }; // Not used, but needed for backwards compatibility + + type ValueOf = T[keyof T]; + + // The accessors like `foo.bar` are not supported, use functions instead + export type ColumnWithStrictAccessor = + ColumnInterface & + ValueOf<{ + [K in keyof D]: { + accessor: K; + } & ColumnInterfaceBasedOnValue; + }>; + + export type ColumnWithLooseAccessor = + ColumnInterface & + ColumnInterfaceBasedOnValue & + ( + | { Header: string } + | { id: IdType } + | { accessor: keyof D extends never ? IdType : never } + ) & { + accessor?: + | (keyof D extends never ? IdType | Accessor : Accessor) + | undefined; + }; + + export type Column = + | ColumnGroup + | ColumnWithLooseAccessor + | ColumnWithStrictAccessor; + + export interface ColumnInstance + extends Omit, 'id'>, + ColumnInterfaceBasedOnValue, + UseTableColumnProps, + UseFiltersColumnProps, + UseGroupByColumnProps, + UseResizeColumnsColumnProps, + UseSortByColumnProps { + originalWidth: number; + resizeWidth?: number; + isResizerVisible?: boolean; + getDragAndDropProps: () => TableKeyedProps; + originalSticky?: 'left' | 'right' | 'none'; + } + + export interface HeaderGroup + extends ColumnInstance, + UseTableHeaderGroupProps {} + + export interface Row + extends UseTableRowProps, + UseExpandedRowProps, + UseGroupByRowProps, + UseRowSelectRowProps, + UseRowStateRowProps { + initialSubRows: Row[]; + } + + export interface TableCommonProps { + style?: CSSProperties | undefined; + className?: string | undefined; + role?: string | undefined; + } + + export interface TableProps extends TableCommonProps {} + + export interface TableBodyProps extends TableCommonProps {} + + export interface TableKeyedProps extends TableCommonProps { + key: React.Key; + } + + export interface TableHeaderGroupProps extends TableKeyedProps {} + + export interface TableFooterGroupProps extends TableKeyedProps {} + + export interface TableHeaderProps extends TableKeyedProps {} + + export interface TableFooterProps extends TableKeyedProps {} + + export interface TableRowProps extends TableKeyedProps {} + + export interface TableCellProps extends TableKeyedProps {} + + export interface TableToggleCommonProps extends TableCommonProps { + onChange?: ((e: ChangeEvent) => void) | undefined; + checked?: boolean | undefined; + title?: string | undefined; + indeterminate?: boolean | undefined; + } + + export interface MetaBase { + instance: TableInstance; + userProps: any; + } + + // inspired by ExtendState in https://github.com/reduxjs/redux/blob/master/src/types/store.ts + export type Meta> = [ + Extension, + ] extends [never] + ? M + : M & Extension; + + //#region useTable + export function useTable( + options: TableOptions, + ...plugins: Array> + ): TableInstance; -export type Column = - | ColumnGroup - | ColumnWithLooseAccessor - | ColumnWithStrictAccessor; - -export interface ColumnInstance - extends Omit, 'id'>, - ColumnInterfaceBasedOnValue, - UseTableColumnProps, - UseFiltersColumnProps, - UseGroupByColumnProps, - UseResizeColumnsColumnProps, - UseSortByColumnProps { - originalWidth: number; - resizeWidth?: number; - isResizerVisible?: boolean; - getDragAndDropProps: () => TableKeyedProps; - originalSticky?: 'left' | 'right' | 'none'; -} - -export interface HeaderGroup - extends ColumnInstance, - UseTableHeaderGroupProps {} - -export interface Row - extends UseTableRowProps, - UseExpandedRowProps, - UseGroupByRowProps, - UseRowSelectRowProps, - UseRowStateRowProps { - initialSubRows: Row[]; -} - -export interface TableCommonProps { - style?: CSSProperties | undefined; - className?: string | undefined; - role?: string | undefined; -} - -export interface TableProps extends TableCommonProps {} - -export interface TableBodyProps extends TableCommonProps {} - -export interface TableKeyedProps extends TableCommonProps { - key: React.Key; -} - -export interface TableHeaderGroupProps extends TableKeyedProps {} - -export interface TableFooterGroupProps extends TableKeyedProps {} - -export interface TableHeaderProps extends TableKeyedProps {} - -export interface TableFooterProps extends TableKeyedProps {} - -export interface TableRowProps extends TableKeyedProps {} - -export interface TableCellProps extends TableKeyedProps {} - -export interface TableToggleCommonProps extends TableCommonProps { - onChange?: ((e: ChangeEvent) => void) | undefined; - checked?: boolean | undefined; - title?: string | undefined; - indeterminate?: boolean | undefined; -} - -export interface MetaBase { - instance: TableInstance; - userProps: any; -} - -// inspired by ExtendState in https://github.com/reduxjs/redux/blob/master/src/types/store.ts -export type Meta> = [ - Extension, -] extends [never] - ? M - : M & Extension; - -//#region useTable -export function useTable( - options: TableOptions, - ...plugins: Array> -): TableInstance; - -/** - * NOTE: To use custom options, use "Interface Merging" to add the custom options - */ -export type UseTableOptions = { - columns: ReadonlyArray>; - data: readonly D[]; -} & Partial<{ - initialState: Partial>; - stateReducer: ( - newState: TableState, - action: ActionType, - previousState: TableState, - instance?: TableInstance, - ) => TableState; - useControlledState: (state: TableState, meta: Meta) => TableState; - defaultColumn: Partial>; - getSubRows: (originalRow: D, relativeIndex: number) => D[]; - getRowId: (originalRow: D, relativeIndex: number, parent?: Row) => string; - autoResetHiddenColumns: boolean; -}>; - -export type PropGetter< - D extends object, - Props, - T extends object = never, - P = Partial, -> = ((props: P, meta: Meta) => P | P[]) | P | P[]; - -export type TablePropGetter = PropGetter; - -export type TableBodyPropGetter = PropGetter< - D, - TableBodyProps ->; - -export type HeaderPropGetter = PropGetter< - D, - TableHeaderProps, - { column: HeaderGroup } ->; - -export type FooterGroupPropGetter = PropGetter< - D, - TableFooterGroupProps, - { column: HeaderGroup } ->; - -export type HeaderGroupPropGetter = PropGetter< - D, - TableHeaderGroupProps, - { column: HeaderGroup } ->; - -export type FooterPropGetter = PropGetter< - D, - TableFooterProps, - { column: HeaderGroup } ->; - -export type RowPropGetter = PropGetter< - D, - TableRowProps, - { row: Row } ->; - -export type CellPropGetter = PropGetter< - D, - TableCellProps, - { cell: Cell } ->; - -export interface ReducerTableState - extends TableState, - Record {} - -export interface UseTableHooks extends Record { - useOptions: Array< - (options: TableOptions, args: TableOptions) => TableOptions - >; - stateReducers: Array< - ( + /** + * NOTE: To use custom options, use "Interface Merging" to add the custom options + */ + export type UseTableOptions = { + columns: ReadonlyArray>; + data: readonly D[]; + } & Partial<{ + initialState: Partial>; + stateReducer: ( newState: TableState, action: ActionType, - previousState?: TableState, + previousState: TableState, instance?: TableInstance, - ) => ReducerTableState | undefined - >; - columns: Array< - (columns: Array>, meta: Meta) => Array> + ) => TableState; + useControlledState: (state: TableState, meta: Meta) => TableState; + defaultColumn: Partial>; + getSubRows: (originalRow: D, relativeIndex: number) => D[]; + getRowId: ( + originalRow: D, + relativeIndex: number, + parent?: Row, + ) => string; + autoResetHiddenColumns: boolean; + }>; + + export type PropGetter< + D extends object, + Props, + T extends object = never, + P = Partial, + > = ((props: P, meta: Meta) => P | P[]) | P | P[]; + + export type TablePropGetter = PropGetter; + + export type TableBodyPropGetter = PropGetter< + D, + TableBodyProps >; - columnsDeps: Array<(deps: any[], meta: Meta) => any[]>; - allColumns: Array< - (allColumns: Array>, meta: Meta) => Array> - >; - allColumnsDeps: Array<(deps: any[], meta: Meta) => any[]>; - visibleColumns: Array< - (allColumns: Array>, meta: Meta) => Array> - >; - visibleColumnsDeps: Array<(deps: any[], meta: Meta) => any[]>; - headerGroups: Array< - (allColumns: Array>, meta: Meta) => Array> + + export type HeaderPropGetter = PropGetter< + D, + TableHeaderProps, + { column: HeaderGroup } >; - headerGroupsDeps: Array<(deps: any[], meta: Meta) => any[]>; - useInstanceBeforeDimensions: Array<(instance: TableInstance) => void>; - useInstance: Array<(instance: TableInstance) => void>; - prepareRow: Array<(row: Row, meta: Meta) => void>; - useControlledState: Array< - (state: TableState, meta: Meta) => TableState + + export type FooterGroupPropGetter = PropGetter< + D, + TableFooterGroupProps, + { column: HeaderGroup } >; - getTableProps: Array>; - getTableBodyProps: Array>; - getHeaderGroupProps: Array>; - getFooterGroupProps: Array>; - getHeaderProps: Array>; - getFooterProps: Array>; - getRowProps: Array>; - getCellProps: Array>; - useFinalInstance: Array<(instance: TableInstance) => void>; -} + export type HeaderGroupPropGetter = PropGetter< + D, + TableHeaderGroupProps, + { column: HeaderGroup } + >; -export interface UseTableColumnOptions { - id?: IdType | undefined; - Header?: Renderer> | undefined; - Footer?: Renderer> | undefined; - width?: number | string | undefined; - minWidth?: number | undefined; - maxWidth?: number | undefined; -} + export type FooterPropGetter = PropGetter< + D, + TableFooterProps, + { column: HeaderGroup } + >; -type UpdateHiddenColumns = ( - oldHidden: Array>, -) => Array>; - -export interface TableToggleHideAllColumnProps extends TableToggleCommonProps {} - -export interface UseTableInstanceProps { - state: TableState; - plugins: Array>; - dispatch: TableDispatch; - columns: Array>; - allColumns: Array>; - visibleColumns: Array>; - headerGroups: Array>; - footerGroups: Array>; - headers: Array>; - flatHeaders: Array>; - rows: Array>; - rowsById: Record>; - getTableProps: (propGetter?: TablePropGetter) => TableProps; - getTableBodyProps: (propGetter?: TableBodyPropGetter) => TableBodyProps; - prepareRow: (row: Row) => void; - flatRows: Array>; - totalColumnsWidth: number; - allColumnsHidden: boolean; - toggleHideColumn: (columnId: IdType, value?: boolean) => void; - setHiddenColumns: (param: Array> | UpdateHiddenColumns) => void; - toggleHideAllColumns: (value?: boolean) => void; - getToggleHideAllColumnsProps: ( - props?: Partial, - ) => TableToggleHideAllColumnProps; - getHooks: () => Hooks; -} + export type RowPropGetter = PropGetter< + D, + TableRowProps, + { row: Row } + >; -export interface UseTableHeaderGroupProps { - headers: Array>; - getHeaderGroupProps: ( - propGetter?: HeaderGroupPropGetter, - ) => TableHeaderProps; - getFooterGroupProps: ( - propGetter?: FooterGroupPropGetter, - ) => TableFooterProps; - totalHeaderCount: number; // not documented -} + export type CellPropGetter = PropGetter< + D, + TableCellProps, + { cell: Cell } + >; -export interface UseTableColumnProps { - id: IdType; - columns?: Array> | undefined; - isVisible: boolean; - render: (type: 'Header' | 'Footer' | string, props?: object) => ReactNode; - totalLeft: number; - totalWidth: number; - getHeaderProps: (propGetter?: HeaderPropGetter) => TableHeaderProps; - getFooterProps: (propGetter?: FooterPropGetter) => TableFooterProps; - toggleHidden: (value?: boolean) => void; - parent?: ColumnInstance | undefined; // not documented - getToggleHiddenProps: (userProps?: any) => any; - depth: number; // not documented - placeholderOf?: ColumnInstance | undefined; -} + export interface ReducerTableState + extends TableState, + Record {} + + export interface UseTableHooks extends Record { + useOptions: Array< + (options: TableOptions, args: TableOptions) => TableOptions + >; + stateReducers: Array< + ( + newState: TableState, + action: ActionType, + previousState?: TableState, + instance?: TableInstance, + ) => ReducerTableState | undefined + >; + columns: Array< + (columns: Array>, meta: Meta) => Array> + >; + columnsDeps: Array<(deps: any[], meta: Meta) => any[]>; + allColumns: Array< + (allColumns: Array>, meta: Meta) => Array> + >; + allColumnsDeps: Array<(deps: any[], meta: Meta) => any[]>; + visibleColumns: Array< + (allColumns: Array>, meta: Meta) => Array> + >; + visibleColumnsDeps: Array<(deps: any[], meta: Meta) => any[]>; + headerGroups: Array< + ( + allColumns: Array>, + meta: Meta, + ) => Array> + >; + headerGroupsDeps: Array<(deps: any[], meta: Meta) => any[]>; + useInstanceBeforeDimensions: Array<(instance: TableInstance) => void>; + useInstance: Array<(instance: TableInstance) => void>; + prepareRow: Array<(row: Row, meta: Meta) => void>; + useControlledState: Array< + (state: TableState, meta: Meta) => TableState + >; + + getTableProps: Array>; + getTableBodyProps: Array>; + getHeaderGroupProps: Array>; + getFooterGroupProps: Array>; + getHeaderProps: Array>; + getFooterProps: Array>; + getRowProps: Array>; + getCellProps: Array>; + useFinalInstance: Array<(instance: TableInstance) => void>; + } + + export interface UseTableColumnOptions { + id?: IdType | undefined; + Header?: Renderer> | undefined; + Footer?: Renderer> | undefined; + width?: number | string | undefined; + minWidth?: number | undefined; + maxWidth?: number | undefined; + } + + type UpdateHiddenColumns = ( + oldHidden: Array>, + ) => Array>; + + export interface TableToggleHideAllColumnProps + extends TableToggleCommonProps {} + + export interface UseTableInstanceProps { + state: TableState; + plugins: Array>; + dispatch: TableDispatch; + columns: Array>; + allColumns: Array>; + visibleColumns: Array>; + headerGroups: Array>; + footerGroups: Array>; + headers: Array>; + flatHeaders: Array>; + rows: Array>; + rowsById: Record>; + getTableProps: (propGetter?: TablePropGetter) => TableProps; + getTableBodyProps: (propGetter?: TableBodyPropGetter) => TableBodyProps; + prepareRow: (row: Row) => void; + flatRows: Array>; + totalColumnsWidth: number; + allColumnsHidden: boolean; + toggleHideColumn: (columnId: IdType, value?: boolean) => void; + setHiddenColumns: ( + param: Array> | UpdateHiddenColumns, + ) => void; + toggleHideAllColumns: (value?: boolean) => void; + getToggleHideAllColumnsProps: ( + props?: Partial, + ) => TableToggleHideAllColumnProps; + getHooks: () => Hooks; + } + + export interface UseTableHeaderGroupProps { + headers: Array>; + getHeaderGroupProps: ( + propGetter?: HeaderGroupPropGetter, + ) => TableHeaderProps; + getFooterGroupProps: ( + propGetter?: FooterGroupPropGetter, + ) => TableFooterProps; + totalHeaderCount: number; // not documented + } + + export interface UseTableColumnProps { + id: IdType; + columns?: Array> | undefined; + isVisible: boolean; + render: (type: 'Header' | 'Footer' | string, props?: object) => ReactNode; + totalLeft: number; + totalWidth: number; + getHeaderProps: (propGetter?: HeaderPropGetter) => TableHeaderProps; + getFooterProps: (propGetter?: FooterPropGetter) => TableFooterProps; + toggleHidden: (value?: boolean) => void; + parent?: ColumnInstance | undefined; // not documented + getToggleHiddenProps: (userProps?: any) => any; + depth: number; // not documented + placeholderOf?: ColumnInstance | undefined; + } + + export interface UseTableRowProps { + cells: Array>; + allCells: Array>; + values: Record, CellValue>; + getRowProps: (propGetter?: RowPropGetter) => TableRowProps; + index: number; + original: D; + id: string; + subRows: Array>; + } + + export interface UseTableCellProps { + column: ColumnInstance; + row: Row; + value: CellValue; + getCellProps: (propGetter?: CellPropGetter) => TableCellProps; + render: (type: 'Cell' | string, userProps?: object) => ReactNode; + } + + export type HeaderProps = TableInstance & { + column: ColumnInstance; + }; -export interface UseTableRowProps { - cells: Array>; - allCells: Array>; - values: Record, CellValue>; - getRowProps: (propGetter?: RowPropGetter) => TableRowProps; - index: number; - original: D; - id: string; - subRows: Array>; -} + export type FooterProps = TableInstance & { + column: ColumnInstance; + }; -export interface UseTableCellProps { - column: ColumnInstance; - row: Row; - value: CellValue; - getCellProps: (propGetter?: CellPropGetter) => TableCellProps; - render: (type: 'Cell' | string, userProps?: object) => ReactNode; -} + export type CellProps = TableInstance & { + column: ColumnInstance; + row: Row; + cell: Cell; + value: CellValue; + }; -export type HeaderProps = TableInstance & { - column: ColumnInstance; -}; - -export type FooterProps = TableInstance & { - column: ColumnInstance; -}; - -export type CellProps = TableInstance & { - column: ColumnInstance; - row: Row; - cell: Cell; - value: CellValue; -}; - -export type Accessor = ( - originalRow: D, - index: number, - sub: { - subRows: D[]; + export type Accessor = ( + originalRow: D, + index: number, + sub: { + subRows: D[]; + depth: number; + data: D[]; + }, + ) => CellValue; + + //#endregion + + // Plugins + + //#region useAbsoluteLayout + export function useAbsoluteLayout( + hooks: Hooks, + ): void; + + export namespace useAbsoluteLayout { + const pluginName = 'useAbsoluteLayout'; + } + //#endregion + + //#region useBlockLayout + export function useBlockLayout(hooks: Hooks): void; + + export namespace useBlockLayout { + const pluginName = 'useBlockLayout'; + } + //#endregion + + //#region useColumnOrder + export function useColumnOrder(hooks: Hooks): void; + + export namespace useColumnOrder { + const pluginName = 'useColumnOrder'; + } + + export interface UseColumnOrderState { + columnOrder: Array>; + } + + export interface UseColumnOrderInstanceProps { + setColumnOrder: ( + updater: + | ((columnOrder: Array>) => Array>) + | Array>, + ) => void; + } + + //#endregion + + //#region useExpanded + export function useExpanded(hooks: Hooks): void; + + export namespace useExpanded { + const pluginName = 'useExpanded'; + } + + export interface TableExpandedToggleProps extends TableKeyedProps {} + + export type UseExpandedOptions = Partial<{ + manualExpandedKey: IdType; + paginateExpandedRows: boolean; + expandSubRows: boolean; + autoResetExpanded?: boolean | undefined; + }>; + + export interface UseExpandedHooks { + getToggleRowsExpandedProps: Array>; + getToggleAllRowsExpandedProps: Array>; + } + + export interface UseExpandedState { + expanded: Record, boolean>; + } + + export interface UseExpandedInstanceProps { + preExpandedRows: Array>; + expandedRows: Array>; + rows: Array>; + expandedDepth: number; + isAllRowsExpanded: boolean; + toggleRowExpanded: (id: Array>, value?: boolean) => void; + toggleAllRowsExpanded: (value?: boolean) => void; + } + + export interface UseExpandedRowProps { + isExpanded: boolean; + canExpand: boolean; + subRows: Array>; + toggleRowExpanded: (value?: boolean) => void; + getToggleRowExpandedProps: ( + props?: Partial, + ) => TableExpandedToggleProps; depth: number; - data: D[]; - }, -) => CellValue; - -//#endregion - -// Plugins - -//#region useAbsoluteLayout -export function useAbsoluteLayout(hooks: Hooks): void; - -export namespace useAbsoluteLayout { - const pluginName = 'useAbsoluteLayout'; -} -//#endregion - -//#region useBlockLayout -export function useBlockLayout(hooks: Hooks): void; - -export namespace useBlockLayout { - const pluginName = 'useBlockLayout'; -} -//#endregion - -//#region useColumnOrder -export function useColumnOrder(hooks: Hooks): void; - -export namespace useColumnOrder { - const pluginName = 'useColumnOrder'; -} - -export interface UseColumnOrderState { - columnOrder: Array>; -} - -export interface UseColumnOrderInstanceProps { - setColumnOrder: ( - updater: - | ((columnOrder: Array>) => Array>) - | Array>, - ) => void; -} - -//#endregion - -//#region useExpanded -export function useExpanded(hooks: Hooks): void; - -export namespace useExpanded { - const pluginName = 'useExpanded'; -} - -export interface TableExpandedToggleProps extends TableKeyedProps {} - -export type UseExpandedOptions = Partial<{ - manualExpandedKey: IdType; - paginateExpandedRows: boolean; - expandSubRows: boolean; - autoResetExpanded?: boolean | undefined; -}>; - -export interface UseExpandedHooks { - getToggleRowsExpandedProps: Array>; - getToggleAllRowsExpandedProps: Array>; -} - -export interface UseExpandedState { - expanded: Record, boolean>; -} - -export interface UseExpandedInstanceProps { - preExpandedRows: Array>; - expandedRows: Array>; - rows: Array>; - expandedDepth: number; - isAllRowsExpanded: boolean; - toggleRowExpanded: (id: Array>, value?: boolean) => void; - toggleAllRowsExpanded: (value?: boolean) => void; -} - -export interface UseExpandedRowProps { - isExpanded: boolean; - canExpand: boolean; - subRows: Array>; - toggleRowExpanded: (value?: boolean) => void; - getToggleRowExpandedProps: ( - props?: Partial, - ) => TableExpandedToggleProps; - depth: number; -} - -//#endregion - -//#region useFilters -export function useFilters(hooks: Hooks): void; - -export namespace useFilters { - const pluginName = 'useFilters'; -} - -export type UseFiltersOptions = Partial<{ - manualFilters: boolean; - disableFilters: boolean; - defaultCanFilter: boolean; - filterTypes: FilterTypes; - autoResetFilters?: boolean | undefined; -}>; - -export interface UseFiltersState { - filters: Filters; -} - -export type UseFiltersColumnOptions = Partial<{ - Filter: Renderer>; - disableFilters: boolean; - defaultCanFilter: boolean; - filter: FilterType | DefaultFilterTypes | string; -}>; - -export interface UseFiltersInstanceProps { - preFilteredRows: Array>; - preFilteredFlatRows: Array>; - preFilteredRowsById: Record>; - filteredRows: Array>; - filteredFlatRows: Array>; - filteredRowsById: Record>; - rows: Array>; - flatRows: Array>; - rowsById: Record>; - setFilter: ( - columnId: IdType, - updater: ((filterValue: FilterValue) => FilterValue) | FilterValue, - ) => void; - setAllFilters: ( - updater: Filters | ((filters: Filters) => Filters), - ) => void; -} - -export interface UseFiltersColumnProps { - canFilter: boolean; - setFilter: ( - updater: ((filterValue: FilterValue) => FilterValue) | FilterValue, - ) => void; - filterValue: FilterValue; - preFilteredRows: Array>; - filteredRows: Array>; -} - -export type FilterProps = HeaderProps; -export type FilterValue = any; -export type Filters = Array<{ - id: IdType; - value: FilterValue; -}>; -export type FilterTypes = Record>; - -export type DefaultFilterTypes = - | 'text' - | 'exactText' - | 'exactTextCase' - | 'includes' - | 'includesAll' - | 'exact' - | 'equals' - | 'between'; - -export interface FilterType { - ( + } + + //#endregion + + //#region useFilters + export function useFilters(hooks: Hooks): void; + + export namespace useFilters { + const pluginName = 'useFilters'; + } + + export type UseFiltersOptions = Partial<{ + manualFilters: boolean; + disableFilters: boolean; + defaultCanFilter: boolean; + filterTypes: FilterTypes; + autoResetFilters?: boolean | undefined; + }>; + + export interface UseFiltersState { + filters: Filters; + } + + export type UseFiltersColumnOptions = Partial<{ + Filter: Renderer>; + disableFilters: boolean; + defaultCanFilter: boolean; + filter: FilterType | DefaultFilterTypes | string; + }>; + + export interface UseFiltersInstanceProps { + preFilteredRows: Array>; + preFilteredFlatRows: Array>; + preFilteredRowsById: Record>; + filteredRows: Array>; + filteredFlatRows: Array>; + filteredRowsById: Record>; + rows: Array>; + flatRows: Array>; + rowsById: Record>; + setFilter: ( + columnId: IdType, + updater: ((filterValue: FilterValue) => FilterValue) | FilterValue, + ) => void; + setAllFilters: ( + updater: Filters | ((filters: Filters) => Filters), + ) => void; + } + + export interface UseFiltersColumnProps { + canFilter: boolean; + setFilter: ( + updater: ((filterValue: FilterValue) => FilterValue) | FilterValue, + ) => void; + filterValue: FilterValue; + preFilteredRows: Array>; + filteredRows: Array>; + } + + export type FilterProps = HeaderProps; + export type FilterValue = any; + export type Filters = Array<{ + id: IdType; + value: FilterValue; + }>; + export type FilterTypes = Record>; + + export type DefaultFilterTypes = + | 'text' + | 'exactText' + | 'exactTextCase' + | 'includes' + | 'includesAll' + | 'exact' + | 'equals' + | 'between'; + + export interface FilterType { + ( + rows: Array>, + columnIds: Array>, + filterValue: FilterValue, + ): Array>; + + autoRemove?: ((filterValue: FilterValue) => boolean) | undefined; + } + + //#endregion + + //#region useFlexLayout + export function useFlexLayout(hooks: Hooks): void; + + export namespace useFlexLayout { + const pluginName = 'useFlexLayout'; + } + //#endregion + + //#region useGridLayout + export function useGridLayout(hooks: Hooks): void; + + export namespace useGridLayout { + const pluginName = 'useGridLayout'; + } + //#endregion + + //#region useGlobalFilter + export function useGlobalFilter(hooks: Hooks): void; + + export namespace useGlobalFilter { + const pluginName = 'useGlobalFilter'; + } + + export type UseGlobalFiltersOptions = Partial<{ + globalFilter: + | (( + rows: Array>, + columnIds: Array>, + filterValue: any, + ) => Array>) + | string; + manualGlobalFilter: boolean; + filterTypes: FilterTypes; + autoResetGlobalFilter?: boolean | undefined; + disableGlobalFilter?: boolean | undefined; + }>; + + export interface UseGlobalFiltersState { + globalFilter: any; + } + + export type UseGlobalFiltersColumnOptions = Partial<{ + disableGlobalFilter?: boolean | undefined; + }>; + + export interface UseGlobalFiltersInstanceProps { + preGlobalFilteredRows: Array>; + preGlobalFilteredFlatRows: Array>; + preGlobalFilteredRowsById: Record>; + globalFilteredRows: Array>; + globalFilteredFlatRows: Array>; + globalFilteredRowsById: Record>; + rows: Array>; + flatRows: Array>; + rowsById: Record>; + setGlobalFilter: (filterValue: FilterValue) => void; + } + + //#endregion + + //#region useGroupBy + export function useGroupBy(hooks: Hooks): void; + + export namespace useGroupBy { + const pluginName = 'useGroupBy'; + } + + export interface TableGroupByToggleProps { + title?: string | undefined; + style?: CSSProperties | undefined; + onClick?: ((e: MouseEvent) => void) | undefined; + } + + export type UseGroupByOptions = Partial<{ + manualGroupBy: boolean; + disableGroupBy: boolean; + defaultCanGroupBy: boolean; + aggregations: Record>; + groupByFn: ( + rows: Array>, + columnId: IdType, + ) => Record>>; + autoResetGroupBy?: boolean | undefined; + }>; + + export interface UseGroupByHooks { + getGroupByToggleProps: Array>; + } + + export interface UseGroupByState { + groupBy: Array>; + } + + export type UseGroupByColumnOptions = Partial<{ + aggregate: Aggregator; + Aggregated: Renderer>; + disableGroupBy: boolean; + defaultCanGroupBy: boolean; + }>; + + export interface UseGroupByInstanceProps { + preGroupedRows: Array>; + preGroupedFlatRows: Array>; + preGroupedRowsById: Record>; + groupedRows: Array>; + groupedFlatRows: Array>; + groupedRowsById: Record>; + onlyGroupedFlatRows: Array>; + onlyGroupedRowsById: Record>; + nonGroupedFlatRows: Array>; + nonGroupedRowsById: Record>; + rows: Array>; + flatRows: Array>; + rowsById: Record>; + toggleGroupBy: (columnId: IdType, value?: boolean) => void; + } + + export interface UseGroupByColumnProps { + canGroupBy: boolean; + isGrouped: boolean; + groupedIndex: number; + toggleGroupBy: () => void; + getGroupByToggleProps: ( + props?: Partial, + ) => TableGroupByToggleProps; + } + + export interface UseGroupByRowProps { + isGrouped: boolean; + groupByID: IdType; + groupByVal: string; + values: Record, AggregatedValue>; + subRows: Array>; + leafRows: Array>; + depth: number; + id: string; + index: number; + } + + export interface UseGroupByCellProps { + isGrouped: boolean; + isPlaceholder: boolean; + isAggregated: boolean; + } + + export type DefaultAggregators = + | 'sum' + | 'average' + | 'median' + | 'uniqueCount' + | 'count'; + + export type AggregatorFn = ( + columnValues: CellValue[], rows: Array>, - columnIds: Array>, - filterValue: FilterValue, - ): Array>; - - autoRemove?: ((filterValue: FilterValue) => boolean) | undefined; -} - -//#endregion - -//#region useFlexLayout -export function useFlexLayout(hooks: Hooks): void; - -export namespace useFlexLayout { - const pluginName = 'useFlexLayout'; -} -//#endregion - -//#region useGridLayout -export function useGridLayout(hooks: Hooks): void; - -export namespace useGridLayout { - const pluginName = 'useGridLayout'; -} -//#endregion - -//#region useGlobalFilter -export function useGlobalFilter(hooks: Hooks): void; - -export namespace useGlobalFilter { - const pluginName = 'useGlobalFilter'; -} - -export type UseGlobalFiltersOptions = Partial<{ - globalFilter: - | (( - rows: Array>, - columnIds: Array>, - filterValue: any, - ) => Array>) + isAggregated: boolean, + ) => AggregatedValue; + export type Aggregator = + | AggregatorFn + | DefaultAggregators | string; - manualGlobalFilter: boolean; - filterTypes: FilterTypes; - autoResetGlobalFilter?: boolean | undefined; - disableGlobalFilter?: boolean | undefined; -}>; - -export interface UseGlobalFiltersState { - globalFilter: any; -} - -export type UseGlobalFiltersColumnOptions = Partial<{ - disableGlobalFilter?: boolean | undefined; -}>; - -export interface UseGlobalFiltersInstanceProps { - preGlobalFilteredRows: Array>; - preGlobalFilteredFlatRows: Array>; - preGlobalFilteredRowsById: Record>; - globalFilteredRows: Array>; - globalFilteredFlatRows: Array>; - globalFilteredRowsById: Record>; - rows: Array>; - flatRows: Array>; - rowsById: Record>; - setGlobalFilter: (filterValue: FilterValue) => void; -} - -//#endregion - -//#region useGroupBy -export function useGroupBy(hooks: Hooks): void; - -export namespace useGroupBy { - const pluginName = 'useGroupBy'; -} - -export interface TableGroupByToggleProps { - title?: string | undefined; - style?: CSSProperties | undefined; - onClick?: ((e: MouseEvent) => void) | undefined; -} - -export type UseGroupByOptions = Partial<{ - manualGroupBy: boolean; - disableGroupBy: boolean; - defaultCanGroupBy: boolean; - aggregations: Record>; - groupByFn: ( - rows: Array>, - columnId: IdType, - ) => Record>>; - autoResetGroupBy?: boolean | undefined; -}>; - -export interface UseGroupByHooks { - getGroupByToggleProps: Array>; -} - -export interface UseGroupByState { - groupBy: Array>; -} - -export type UseGroupByColumnOptions = Partial<{ - aggregate: Aggregator; - Aggregated: Renderer>; - disableGroupBy: boolean; - defaultCanGroupBy: boolean; -}>; - -export interface UseGroupByInstanceProps { - preGroupedRows: Array>; - preGroupedFlatRows: Array>; - preGroupedRowsById: Record>; - groupedRows: Array>; - groupedFlatRows: Array>; - groupedRowsById: Record>; - onlyGroupedFlatRows: Array>; - onlyGroupedRowsById: Record>; - nonGroupedFlatRows: Array>; - nonGroupedRowsById: Record>; - rows: Array>; - flatRows: Array>; - rowsById: Record>; - toggleGroupBy: (columnId: IdType, value?: boolean) => void; -} - -export interface UseGroupByColumnProps { - canGroupBy: boolean; - isGrouped: boolean; - groupedIndex: number; - toggleGroupBy: () => void; - getGroupByToggleProps: ( - props?: Partial, - ) => TableGroupByToggleProps; -} - -export interface UseGroupByRowProps { - isGrouped: boolean; - groupByID: IdType; - groupByVal: string; - values: Record, AggregatedValue>; - subRows: Array>; - leafRows: Array>; - depth: number; - id: string; - index: number; -} - -export interface UseGroupByCellProps { - isGrouped: boolean; - isPlaceholder: boolean; - isAggregated: boolean; -} - -export type DefaultAggregators = - | 'sum' - | 'average' - | 'median' - | 'uniqueCount' - | 'count'; - -export type AggregatorFn = ( - columnValues: CellValue[], - rows: Array>, - isAggregated: boolean, -) => AggregatedValue; -export type Aggregator = - | AggregatorFn - | DefaultAggregators - | string; -export type AggregatedValue = any; -//#endregion - -//#region usePagination -export function usePagination(hooks: Hooks): void; - -export namespace usePagination { - const pluginName = 'usePagination'; -} - -export type UsePaginationOptions = Partial<{ - pageCount: number; - manualPagination: boolean; - autoResetPage?: boolean | undefined; - paginateExpandedRows: boolean; -}>; - -export interface UsePaginationState { - pageSize: number; - pageIndex: number; -} - -export interface UsePaginationInstanceProps { - page: Array>; - pageCount: number; - pageOptions: number[]; - canPreviousPage: boolean; - canNextPage: boolean; - gotoPage: (updater: ((pageIndex: number) => number) | number) => void; - previousPage: () => void; - nextPage: () => void; - setPageSize: (pageSize: number) => void; -} - -//#endregion - -//#region useResizeColumns -export function useResizeColumns(hooks: Hooks): void; - -export namespace useResizeColumns { - const pluginName = 'useResizeColumns'; -} - -export interface UseResizeColumnsOptions { - disableResizing?: boolean | undefined; - autoResetResize?: boolean | undefined; -} - -export interface UseResizeColumnsState { - columnResizing: { - startX?: number | undefined; - columnWidth: number; - headerIdWidths: Record; - columnWidths: any; - isResizingColumn?: string | undefined; - }; -} - -export interface UseResizeColumnsColumnOptions { - disableResizing?: boolean | undefined; -} - -export interface TableResizerProps {} - -export interface UseResizeColumnsColumnProps { - getResizerProps: (props?: Partial) => TableResizerProps; - canResize: boolean; - isResizing: boolean; -} - -//#endregion - -//#region useRowSelect -export function useRowSelect(hooks: Hooks): void; - -export namespace useRowSelect { - const pluginName = 'useRowSelect'; -} - -export interface TableToggleAllRowsSelectedProps - extends TableToggleCommonProps {} - -export interface TableToggleRowsSelectedProps extends TableToggleCommonProps {} - -export type UseRowSelectOptions = Partial<{ - manualRowSelectedKey: IdType; - autoResetSelectedRows: boolean; - selectSubRows: boolean; -}>; - -export interface UseRowSelectHooks { - getToggleRowSelectedProps: Array>; - getToggleAllRowsSelectedProps: Array< - PropGetter - >; - getToggleAllPageRowsSelectedProps: Array< - PropGetter + export type AggregatedValue = any; + //#endregion + + //#region usePagination + export function usePagination(hooks: Hooks): void; + + export namespace usePagination { + const pluginName = 'usePagination'; + } + + export type UsePaginationOptions = Partial<{ + pageCount: number; + manualPagination: boolean; + autoResetPage?: boolean | undefined; + paginateExpandedRows: boolean; + }>; + + export interface UsePaginationState { + pageSize: number; + pageIndex: number; + } + + export interface UsePaginationInstanceProps { + page: Array>; + pageCount: number; + pageOptions: number[]; + canPreviousPage: boolean; + canNextPage: boolean; + gotoPage: (updater: ((pageIndex: number) => number) | number) => void; + previousPage: () => void; + nextPage: () => void; + setPageSize: (pageSize: number) => void; + } + + //#endregion + + //#region useResizeColumns + export function useResizeColumns( + hooks: Hooks, + ): void; + + export namespace useResizeColumns { + const pluginName = 'useResizeColumns'; + } + + export interface UseResizeColumnsOptions { + disableResizing?: boolean | undefined; + autoResetResize?: boolean | undefined; + } + + export interface UseResizeColumnsState { + columnResizing: { + startX?: number | undefined; + columnWidth: number; + headerIdWidths: Record; + columnWidths: any; + isResizingColumn?: string | undefined; + }; + } + + export interface UseResizeColumnsColumnOptions { + disableResizing?: boolean | undefined; + } + + export interface TableResizerProps {} + + export interface UseResizeColumnsColumnProps { + getResizerProps: (props?: Partial) => TableResizerProps; + canResize: boolean; + isResizing: boolean; + } + + //#endregion + + //#region useRowSelect + export function useRowSelect(hooks: Hooks): void; + + export namespace useRowSelect { + const pluginName = 'useRowSelect'; + } + + export interface TableToggleAllRowsSelectedProps + extends TableToggleCommonProps {} + + export interface TableToggleRowsSelectedProps + extends TableToggleCommonProps {} + + export type UseRowSelectOptions = Partial<{ + manualRowSelectedKey: IdType; + autoResetSelectedRows: boolean; + selectSubRows: boolean; + }>; + + export interface UseRowSelectHooks { + getToggleRowSelectedProps: Array< + PropGetter + >; + getToggleAllRowsSelectedProps: Array< + PropGetter + >; + getToggleAllPageRowsSelectedProps: Array< + PropGetter + >; + } + + export interface UseRowSelectState { + selectedRowIds: Record, boolean>; + } + + export interface UseRowSelectInstanceProps { + toggleRowSelected: (rowId: IdType, set?: boolean) => void; + toggleAllRowsSelected: (value?: boolean) => void; + getToggleAllRowsSelectedProps: ( + props?: Partial, + ) => TableToggleAllRowsSelectedProps; + getToggleAllPageRowsSelectedProps: ( + props?: Partial, + ) => TableToggleAllRowsSelectedProps; + isAllRowsSelected: boolean; + selectedFlatRows: Array>; + } + + export interface UseRowSelectRowProps { + isSelected: boolean; + isSomeSelected: boolean; + toggleRowSelected: (set?: boolean) => void; + getToggleRowSelectedProps: ( + props?: Partial, + ) => TableToggleRowsSelectedProps; + } + + //#endregion + + //#region useRowState + export function useRowState(hooks: Hooks): void; + + export namespace useRowState { + const pluginName = 'useRowState'; + } + + export type UseRowStateOptions = Partial<{ + initialRowStateAccessor: (row: Row) => UseRowStateLocalState; + getResetRowStateDeps: (instance: TableInstance) => any[]; + autoResetRowState?: boolean | undefined; + }>; + + export interface UseRowStateState { + rowState: Record }>; + } + + export interface UseRowStateInstanceProps { + setRowState: (rowPath: string[], updater: UseRowUpdater) => void; + setCellState: ( + rowPath: string[], + columnId: IdType, + updater: UseRowUpdater, + ) => void; + } + + export interface UseRowStateRowProps { + state: UseRowStateLocalState; + setState: (updater: UseRowUpdater) => void; + } + + export interface UseRowStateCellProps { + state: UseRowStateLocalState; + setState: (updater: UseRowUpdater) => void; + } + + export type UseRowUpdater = T | ((prev: T) => T); + export type UseRowStateLocalState = Record< + IdType, + T >; -} - -export interface UseRowSelectState { - selectedRowIds: Record, boolean>; -} - -export interface UseRowSelectInstanceProps { - toggleRowSelected: (rowId: IdType, set?: boolean) => void; - toggleAllRowsSelected: (value?: boolean) => void; - getToggleAllRowsSelectedProps: ( - props?: Partial, - ) => TableToggleAllRowsSelectedProps; - getToggleAllPageRowsSelectedProps: ( - props?: Partial, - ) => TableToggleAllRowsSelectedProps; - isAllRowsSelected: boolean; - selectedFlatRows: Array>; -} - -export interface UseRowSelectRowProps { - isSelected: boolean; - isSomeSelected: boolean; - toggleRowSelected: (set?: boolean) => void; - getToggleRowSelectedProps: ( - props?: Partial, - ) => TableToggleRowsSelectedProps; -} - -//#endregion - -//#region useRowState -export function useRowState(hooks: Hooks): void; - -export namespace useRowState { - const pluginName = 'useRowState'; -} - -export type UseRowStateOptions = Partial<{ - initialRowStateAccessor: (row: Row) => UseRowStateLocalState; - getResetRowStateDeps: (instance: TableInstance) => any[]; - autoResetRowState?: boolean | undefined; -}>; - -export interface UseRowStateState { - rowState: Record }>; -} - -export interface UseRowStateInstanceProps { - setRowState: (rowPath: string[], updater: UseRowUpdater) => void; - setCellState: ( - rowPath: string[], + //#endregion + + //#region useSortBy + export function useSortBy(hooks: Hooks): void; + + export namespace useSortBy { + const pluginName = 'useSortBy'; + } + + export interface TableSortByToggleProps { + title?: string | undefined; + style?: CSSProperties | undefined; + onClick?: ((e: MouseEvent) => void) | undefined; + } + + export type UseSortByOptions = Partial<{ + manualSortBy: boolean; + disableSortBy: boolean; + defaultCanSort: boolean; + disableMultiSort: boolean; + isMultiSortEvent: (e: MouseEvent) => boolean; + maxMultiSortColCount: number; + disableSortRemove: boolean; + disabledMultiRemove: boolean; + orderByFn: ( + rows: Array>, + sortFns: Array>, + directions: boolean[], + ) => Array>; + sortTypes: Record>; + autoResetSortBy?: boolean | undefined; + }>; + + export interface UseSortByHooks { + getSortByToggleProps: Array>; + } + + export interface UseSortByState { + sortBy: Array>; + } + + export type UseSortByColumnOptions = Partial<{ + defaultCanSort: boolean; + disableSortBy: boolean; + sortDescFirst: boolean; + sortInverted: boolean; + sortType: SortByFn | DefaultSortTypes | string; + }>; + + export interface UseSortByInstanceProps { + rows: Array>; + preSortedRows: Array>; + setSortBy: (sortBy: Array>) => void; + toggleSortBy: ( + columnId: IdType, + descending?: boolean, + isMulti?: boolean, + ) => void; + } + + export interface UseSortByColumnProps { + canSort: boolean; + toggleSortBy: (descending?: boolean, multi?: boolean) => void; + getSortByToggleProps: ( + props?: Partial, + ) => TableSortByToggleProps; + clearSortBy: () => void; + isSorted: boolean; + sortedIndex: number; + isSortedDesc: boolean | undefined; + } + + export type OrderByFn = ( + rowA: Row, + rowB: Row, + ) => number; + export type SortByFn = ( + rowA: Row, + rowB: Row, columnId: IdType, - updater: UseRowUpdater, - ) => void; -} - -export interface UseRowStateRowProps { - state: UseRowStateLocalState; - setState: (updater: UseRowUpdater) => void; -} - -export interface UseRowStateCellProps { - state: UseRowStateLocalState; - setState: (updater: UseRowUpdater) => void; -} - -export type UseRowUpdater = T | ((prev: T) => T); -export type UseRowStateLocalState = Record< - IdType, - T ->; -//#endregion - -//#region useSortBy -export function useSortBy(hooks: Hooks): void; - -export namespace useSortBy { - const pluginName = 'useSortBy'; -} - -export interface TableSortByToggleProps { - title?: string | undefined; - style?: CSSProperties | undefined; - onClick?: ((e: MouseEvent) => void) | undefined; -} + desc?: boolean, + ) => number; + + export type DefaultSortTypes = + | 'alphanumeric' + | 'datetime' + | 'basic' + | 'string' + | 'number'; + + export interface SortingRule { + id: IdType; + desc?: boolean | undefined; + } + + //#endregion + + // Additional API + export const actions: Record; + export type ActionType = { type: string } & Record; + export const defaultColumn: Partial & Record; + + // Helpers + export type StringKey = Extract; + export type IdType = StringKey | string; + export type CellValue = V; + + export type Renderer = + | ComponentType + | ReactElement + | string + | number + | ReactFragment; + + export interface PluginHook { + (hooks: Hooks): void; + pluginName?: string | undefined; + } + + export type TableDispatch = (action: A) => void; + + // utils + export function defaultOrderByFn( + arr: Array>, + funcs: Array>, + dirs: boolean[], + ): Array>; -export type UseSortByOptions = Partial<{ - manualSortBy: boolean; - disableSortBy: boolean; - defaultCanSort: boolean; - disableMultiSort: boolean; - isMultiSortEvent: (e: MouseEvent) => boolean; - maxMultiSortColCount: number; - disableSortRemove: boolean; - disabledMultiRemove: boolean; - orderByFn: ( + export function defaultGroupByFn( rows: Array>, - sortFns: Array>, - directions: boolean[], - ) => Array>; - sortTypes: Record>; - autoResetSortBy?: boolean | undefined; -}>; - -export interface UseSortByHooks { - getSortByToggleProps: Array>; -} - -export interface UseSortByState { - sortBy: Array>; -} - -export type UseSortByColumnOptions = Partial<{ - defaultCanSort: boolean; - disableSortBy: boolean; - sortDescFirst: boolean; - sortInverted: boolean; - sortType: SortByFn | DefaultSortTypes | string; -}>; - -export interface UseSortByInstanceProps { - rows: Array>; - preSortedRows: Array>; - setSortBy: (sortBy: Array>) => void; - toggleSortBy: ( columnId: IdType, - descending?: boolean, - isMulti?: boolean, - ) => void; -} - -export interface UseSortByColumnProps { - canSort: boolean; - toggleSortBy: (descending?: boolean, multi?: boolean) => void; - getSortByToggleProps: ( - props?: Partial, - ) => TableSortByToggleProps; - clearSortBy: () => void; - isSorted: boolean; - sortedIndex: number; - isSortedDesc: boolean | undefined; -} - -export type OrderByFn = ( - rowA: Row, - rowB: Row, -) => number; -export type SortByFn = ( - rowA: Row, - rowB: Row, - columnId: IdType, - desc?: boolean, -) => number; - -export type DefaultSortTypes = - | 'alphanumeric' - | 'datetime' - | 'basic' - | 'string' - | 'number'; - -export interface SortingRule { - id: IdType; - desc?: boolean | undefined; -} - -//#endregion - -// Additional API -export const actions: Record; -export type ActionType = { type: string } & Record; -export const defaultColumn: Partial & Record; - -// Helpers -export type StringKey = Extract; -export type IdType = StringKey | string; -export type CellValue = V; - -export type Renderer = - | ComponentType - | ReactElement - | string - | number - | ReactFragment; - -export interface PluginHook { - (hooks: Hooks): void; - pluginName?: string | undefined; + ): Record>>; + + export function makePropGetter(hooks: Hooks, ...meta: any[]): any; + + export function reduceHooks( + hooks: Hooks, + initial: T, + ...args: any[] + ): T; + + export function loopHooks(hooks: Hooks, ...args: any[]): void; + + export function ensurePluginOrder( + plugins: Array>, + befores: string[], + pluginName: string, + ): void; + + export function functionalUpdate( + updater: any, + old: Partial>, + ): Partial>; + + export function useGetLatest(obj: T): () => T; + + export function safeUseLayoutEffect( + effect: EffectCallback, + deps?: DependencyList, + ): void; + + export function useMountedLayoutEffect( + effect: EffectCallback, + deps?: DependencyList, + ): void; + + export function useAsyncDebounce any>( + defaultFn: F, + defaultWait?: number, + ): F; + + export function makeRenderer( + instance: TableInstance, + column: ColumnInstance, + meta?: any, + ): ReactElement; + + ////////////////////////////////////////////////////////////////////////////////////////////////// + // Custom Additions (parts from the old file called react-table-config.ts) + + export type FieldType = 'text' | 'number' | 'date' | string; + + export type CellRendererProps = { + /** + * Cell HTML props passed from the Table. + */ + cellElementProps: TableCellProps; + /** + * Table specific cell props like `column`, `row`. + */ + cellProps: CellProps; + /** + * Cell's content. + */ + children: React.ReactNode; + /** + * Function that returns whether the cell is disabled. + */ + isDisabled?: (rowData: D) => boolean; + }; } - -export type TableDispatch = (action: A) => void; - -// utils -export function defaultOrderByFn( - arr: Array>, - funcs: Array>, - dirs: boolean[], -): Array>; - -export function defaultGroupByFn( - rows: Array>, - columnId: IdType, -): Record>>; - -export function makePropGetter(hooks: Hooks, ...meta: any[]): any; - -export function reduceHooks( - hooks: Hooks, - initial: T, - ...args: any[] -): T; - -export function loopHooks(hooks: Hooks, ...args: any[]): void; - -export function ensurePluginOrder( - plugins: Array>, - befores: string[], - pluginName: string, -): void; - -export function functionalUpdate( - updater: any, - old: Partial>, -): Partial>; - -export function useGetLatest(obj: T): () => T; - -export function safeUseLayoutEffect( - effect: EffectCallback, - deps?: DependencyList, -): void; - -export function useMountedLayoutEffect( - effect: EffectCallback, - deps?: DependencyList, -): void; - -export function useAsyncDebounce any>( - defaultFn: F, - defaultWait?: number, -): F; - -export function makeRenderer( - instance: TableInstance, - column: ColumnInstance, - meta?: any, -): ReactElement; - -////////////////////////////////////////////////////////////////////////////////////////////////// -// Custom Additions (parts from the old file called react-table-config.ts) - -export type FieldType = 'text' | 'number' | 'date' | string; - -export type CellRendererProps = { - /** - * Cell HTML props passed from the Table. - */ - cellElementProps: TableCellProps; - /** - * Table specific cell props like `column`, `row`. - */ - cellProps: CellProps; - /** - * Cell's content. - */ - children: React.ReactNode; - /** - * Function that returns whether the cell is disabled. - */ - isDisabled?: (rowData: D) => boolean; -}; From 1089eccde3617881a5af29be3f3fd702d685de9d Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Wed, 23 Aug 2023 16:26:38 -0400 Subject: [PATCH 032/196] Deleted some comments and code from App.tsx --- playgrounds/vite/src/App.tsx | 98 ------------------------------------ 1 file changed, 98 deletions(-) diff --git a/playgrounds/vite/src/App.tsx b/playgrounds/vite/src/App.tsx index fb5a83ad03d..0f93316d750 100644 --- a/playgrounds/vite/src/App.tsx +++ b/playgrounds/vite/src/App.tsx @@ -105,104 +105,9 @@ const App = () => { Header: 'Product', accessor: 'product', Filter: tableFilters.TextFilter(), - // Filter: () =>
, - // disableToggleVisibility: true, - // disableReordering: true, - // width: 200, - // testing1: (props: CellProps) => ( - // testing1: (props) =>
{`${props}`}
, - - // sticky: 'left', - // testing1: '', - // testig - // col Cell: (props) =>
, }, - // {}, - // { - // id: 'price', - // Header: 'Price', - // // accessor: 'price', - // width: 200, - // Filter: tableFilters.NumberRangeFilter(), - // filter: 'between', - // disableReordering: true, - // sortType: 'number', - // // Cell1: (props) => { - // // return
- // // }, - // // Cell: (props: CellProps, number>) => { - // // cell - // // Cell: (props) => { - // // return
; - // // // return <>${props.value}; - // // }, - // // Cell: (props) => { - // // return <>${props.value}; - // // }, - // sticky: 'left', - // }, - // { - // id: 'quantity', - // Header: 'Quantity', - // // accessor: 'quantity', - // Filter: tableFilters.NumberRangeFilter(), - // filter: 'between', - // sortType: 'number', - // width: 400, - // }, - // { - // id: 'rating', - // Header: 'Rating', - // // accessor: 'rating', - // Filter: tableFilters.NumberRangeFilter(), - // filter: 'between', - // sortType: 'number', - // width: 400, - // // cellRenderer: (props: CellRendererProps) => { - // // return ( - // // - // // {props.cellProps.row.original.rating}/5 - // // - // // ); - // // }, - // }, - // { - // id: 'deliveryTime', - // Header: 'Delivery Time', - // // accessor: 'deliveryTime', - // Filter: tableFilters.NumberRangeFilter(), - // filter: 'between', - // sortType: 'number', - // width: 400, - // // Cell: (props: CellProps) => { - // // return <>{props.value} day(s); - // // }, - // }, - // { - // // accessor: 'actions', - // // ...ActionColumn({ columnManager: true }), - // // Cell: (props: CellProps) => ( - // // - // // e.stopPropagation()} - // // disabled={isRowDisabled(props.row.original)} - // // > - // // - // // - // // - // // ), - // accessor: 'deliveryTime', - // sticky: 'right', - // }, - // ] satisfies Array>>, ] satisfies Array>, - // ] as Column[], - // ] as Column[], [isRowDisabled, menuItems], ); @@ -214,9 +119,6 @@ const App = () => { const [globalFilterValue, setGlobalFilterValue] = useState(''); - let testing0: TableStoryDataType = { 1: 'q' }; - let testing1: Record = testing0; - return (
Date: Wed, 23 Aug 2023 16:28:49 -0400 Subject: [PATCH 033/196] Commented out old-not-working-index.d.ts --- .../react-table/old-not-working-index.d.ts | 2634 ++++++++--------- 1 file changed, 1317 insertions(+), 1317 deletions(-) diff --git a/packages/itwinui-react/src/types/react-table/old-not-working-index.d.ts b/packages/itwinui-react/src/types/react-table/old-not-working-index.d.ts index 56066afaed1..7b97e3f7d93 100644 --- a/packages/itwinui-react/src/types/react-table/old-not-working-index.d.ts +++ b/packages/itwinui-react/src/types/react-table/old-not-working-index.d.ts @@ -1,1317 +1,1317 @@ -/*--------------------------------------------------------------------------------------------- - * Copyright (c) Bentley Systems, Incorporated. All rights reserved. - * See LICENSE.md in the project root for license terms and full copyright notice. - *--------------------------------------------------------------------------------------------*/ -// Type definitions for react-table 7.7 -// Project: https://github.com/tannerlinsley/react-table -// Definitions by: Guy Gascoigne-Piggford , -// Michael Stramel -// Rohit Garg -// Jason Clark -// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped -// TypeScript Version: 3.5 -// reflects react-table@7.7.0 - -// tslint:disable:no-empty-interface -// no-empty-interface is disabled to allow easy extension with declaration merging - -// tslint:disable:no-unnecessary-generics -// no-unnecessary-generics is disabled because many of these definitions are either used in a generic -// context or the signatures are required to match for declaration merging - -// The changelog for the important changes is located in the Readme.md - -import { - ChangeEvent, - ComponentType, - CSSProperties, - DependencyList, - EffectCallback, - MouseEvent, - ReactElement, - ReactFragment, - ReactNode, -} from 'react'; - -export const TESTING = 'TESTING'; - -declare module 'react-table' { - export {}; - - /** - * The empty definitions of below provides a base definition for the parts used by useTable, that can then be extended in the users code. - * - * @example - * export interface TableOptions - * extends - * UseExpandedOptions, - * UseFiltersOptions {} - * see https://gist.github.com/ggascoigne/646e14c9d54258e40588a13aabf0102d for more details - */ - export interface TableOptions - extends Omit, 'data' | 'columns'>, - UseRowSelectOptions, - UseExpandedOptions, - UseFiltersOptions, - // UseGroupByOptions, - UsePaginationOptions, - UseGlobalFiltersOptions, - UseGlobalFiltersColumnOptions, - Omit, 'disableResizing'>, - // UseRowStateOptions, - UseSortByOptions { - /** - * List of columns. - * - * Should not have a top-level `Header` or a `columns` sub-property. They are only allowed to be passed for backwards compatibility. - * See [migration guide](https://github.com/iTwin/iTwinUI/wiki/iTwinUI-react-v2-migration-guide#breaking-changes). - */ - columns: Array>; - /** - * Table data list. - * Must be memoized. - * - * Supports expandable sub-rows using the `subRows` field in data entries. - * If some rows don't have sub-data, it is recommended to pass an empty array to `subRows` for consistent spacing. - */ - data: D[]; - /** - * Column's resize mode. - * - `fit` - when resizing it affects current and the next column, - * e.g. when increasing width of current column, next column's width will decrease. - * - `expand` - when resizing it affects only the current column, - * e.g. when increasing width of the current column, next column's width remains the same. - * @default 'fit' - */ - columnResizeMode?: 'fit' | 'expand'; - } - - export interface TableInstance - extends Omit, 'columns' | 'pageCount'>, - UseTableInstanceProps, - UseColumnOrderInstanceProps, - UseExpandedInstanceProps, - UseFiltersInstanceProps, - UseGlobalFiltersInstanceProps, - UseGroupByInstanceProps, - UsePaginationInstanceProps, - UseRowSelectInstanceProps, - UseRowStateInstanceProps, - UseSortByInstanceProps { - initialRows: Row[]; - columnResizeMode: TableOptions['columnResizeMode']; - tableWidth: number; - } - - export interface TableState - extends UseColumnOrderState, - UseExpandedState, - UseFiltersState, - UseGlobalFiltersState, - UseGroupByState, - UsePaginationState, - UseRowSelectState, - UseRowStateState, - UseSortByState { - hiddenColumns?: Array> | undefined; - columnResizing: { - startX?: number; - columnWidth?: number; - nextColumnWidth?: number; - headerIdWidths?: Array<[string, number]>; - nextHeaderIdWidths?: Array<[string, number]>; - columnWidths: Record; - isResizingColumn?: string; - }; - isTableResizing?: boolean; - columnReorderStartIndex: number; - sticky: { - isScrolledToRight?: boolean; - isScrolledToLeft?: boolean; - }; - lastSelectedRowId?: string; - } - - export interface Hooks - extends UseTableHooks, - UseExpandedHooks, - UseGroupByHooks, - UseRowSelectHooks, - UseSortByHooks {} - - export interface Cell - extends UseTableCellProps, - UseGroupByCellProps, - UseRowStateCellProps {} - - export interface ColumnInterface - extends UseTableColumnOptions, - UseSortByColumnOptions, - UseFiltersColumnOptions, - UseResizeColumnsColumnOptions, - UseGlobalFiltersColumnOptions { - /** - * Custom class name applied to header column cell. - */ - columnClassName?: string; - /** - * Custom class name applied to each column's cell. - */ - cellClassName?: string; - /** - * Type of the data in cell. Used for manual filtering. - */ - fieldType?: FieldType; - /** - * Filter component used as a column filter. Should use filters from `tableFilters`. - */ - Filter?: Renderer> | Renderer>; - /** - * String value or custom function to use for filtering. - * Possible string values: `text`, `exactText`, `exactTextCase`, `includes`, `includesAll`, `exact`, `equals`, `between`. - * More info about these filters: https://github.com/tannerlinsley/react-table/blob/master/src/filterTypes.js - */ - filter?: FilterType | DefaultFilterTypes | string; - /** - * Function that should return whole cell element not only the content. - * Must be memoized. - * @example - * { - * Header: 'Name', - * accessor: 'name', - * cellRenderer: (props) => , - * } - */ - cellRenderer?: (props: CellRendererProps) => React.ReactNode; - /** - * If true, column can't be reordered. - * @default false - */ - disableReordering?: boolean; - /** - * If true, column's visibility cannot be toggled. - * @default false - */ - disableToggleVisibility?: boolean; - /** - * Side on which column should be sticked to. - */ - sticky?: 'left' | 'right'; - } - - export interface ColumnInterfaceBasedOnValue { - // Cell?: Renderer> | undefined; - // Cell?: (props: CellProps) => React.ReactNode; - // testing1: Renderer> | undefined; - testing1: Renderer> | undefined; - } - - // eslint-disable-next-line @typescript-eslint/no-empty-interface - export interface ColumnGroupInterface { - // columns: Array>; - } - - export type ColumnGroup = ColumnInterface & - ColumnGroupInterface & - ( - | { Header: string } - | ({ id: IdType } & { - Header: Renderer>; - }) - ) & { accessor?: Accessor | undefined }; // Not used, but needed for backwards compatibility - - type ValueOf = T[keyof T]; - - // interface TableStoryDataType { - // product: number; - // price: number; - // // [K in string]: any; - // quantity: number; - // rating: number; - // deliveryTime: number; - // status: 'positive' | 'negative' | 'warning' | undefined; - // // subRows: TableStoryDataType[]; - // // 1?: number; - // }; - - // // type testing = ColumnWithStrictAccessor - // // type testing = ColumnInterfaceBasedOnValue - // // type testing = CellProps - // type testing = TableInstance - - // The accessors like `foo.bar` are not supported, use functions instead - export type ColumnWithStrictAccessor = ColumnInterface & - // export type ColumnWithStrictAccessor = ValueOf<{ - ValueOf<{ - [K in keyof D]: { - accessor: K; - } & ColumnInterfaceBasedOnValue; - }>; - - export type ColumnWithLooseAccessor = ColumnInterface & - ColumnInterfaceBasedOnValue & - ( - | { Header: string } - | { id: IdType } - | { accessor: keyof D extends never ? IdType : never } - ) & { - accessor?: - | (keyof D extends never ? IdType | Accessor : Accessor) - | undefined; - }; - - export type Column = - | ColumnGroup - | ColumnWithLooseAccessor - | ColumnWithStrictAccessor; - - export interface ColumnInstance - extends Omit, 'id'>, - ColumnInterfaceBasedOnValue, - UseTableColumnProps, - UseFiltersColumnProps, - UseGroupByColumnProps, - UseResizeColumnsColumnProps, - UseSortByColumnProps { - originalWidth: number; - resizeWidth?: number; - isResizerVisible?: boolean; - getDragAndDropProps: () => TableKeyedProps; - originalSticky?: 'left' | 'right' | 'none'; - } - - export interface HeaderGroup - extends ColumnInstance, - UseTableHeaderGroupProps {} - - export interface Row - extends UseTableRowProps, - UseExpandedRowProps, - UseGroupByRowProps, - UseRowSelectRowProps, - UseRowStateRowProps { - initialSubRows: Row[]; - } - - export interface TableCommonProps { - style?: CSSProperties | undefined; - className?: string | undefined; - role?: string | undefined; - } - - export type TableProps = TableCommonProps; - - export type TableBodyProps = TableCommonProps; - - export interface TableKeyedProps extends TableCommonProps { - key: React.Key; - } - - export type TableHeaderGroupProps = TableKeyedProps; - - export type TableFooterGroupProps = TableKeyedProps; - - export type TableHeaderProps = TableKeyedProps; - - export type TableFooterProps = TableKeyedProps; - - export type TableRowProps = TableKeyedProps; - - export type TableCellProps = TableKeyedProps; - - export interface TableToggleCommonProps extends TableCommonProps { - onChange?: ((e: ChangeEvent) => void) | undefined; - checked?: boolean | undefined; - title?: string | undefined; - indeterminate?: boolean | undefined; - } - - export interface MetaBase { - instance: TableInstance; - userProps: any; - } - - // inspired by ExtendState in https://github.com/reduxjs/redux/blob/master/src/types/store.ts - export type Meta> = [ - Extension, - ] extends [never] - ? M - : M & Extension; - - //#region useTable - export function useTable( - options: TableOptions, - ...plugins: Array> - ): TableInstance; - - /** - * NOTE: To use custom options, use "Interface Merging" to add the custom options - */ - export type UseTableOptions = { - columns: ReadonlyArray>; - data: readonly D[]; - } & Partial<{ - initialState: Partial>; - stateReducer: ( - newState: TableState, - action: ActionType, - previousState: TableState, - instance?: TableInstance, - ) => TableState; - useControlledState: (state: TableState, meta: Meta) => TableState; - defaultColumn: Partial>; - getSubRows: (originalRow: D, relativeIndex: number) => D[]; - getRowId: ( - originalRow: D, - relativeIndex: number, - parent?: Row, - ) => string; - autoResetHiddenColumns: boolean; - }>; - - export type PropGetter< - D extends object, - Props, - T extends object = never, - P = Partial, - > = ((props: P, meta: Meta) => P | P[]) | P | P[]; - - export type TablePropGetter = PropGetter; - - export type TableBodyPropGetter = PropGetter< - D, - TableBodyProps - >; - - export type HeaderPropGetter = PropGetter< - D, - TableHeaderProps, - { column: HeaderGroup } - >; - - export type FooterGroupPropGetter = PropGetter< - D, - TableFooterGroupProps, - { column: HeaderGroup } - >; - - export type HeaderGroupPropGetter = PropGetter< - D, - TableHeaderGroupProps, - { column: HeaderGroup } - >; - - export type FooterPropGetter = PropGetter< - D, - TableFooterProps, - { column: HeaderGroup } - >; - - export type RowPropGetter = PropGetter< - D, - TableRowProps, - { row: Row } - >; - - export type CellPropGetter = PropGetter< - D, - TableCellProps, - { cell: Cell } - >; - - export interface ReducerTableState - extends TableState, - Record {} - - export interface UseTableHooks extends Record { - useOptions: Array< - (options: TableOptions, args: TableOptions) => TableOptions - >; - stateReducers: Array< - ( - newState: TableState, - action: ActionType, - previousState?: TableState, - instance?: TableInstance, - ) => ReducerTableState | undefined - >; - columns: Array< - (columns: Array>, meta: Meta) => Array> - >; - columnsDeps: Array<(deps: any[], meta: Meta) => any[]>; - allColumns: Array< - (allColumns: Array>, meta: Meta) => Array> - >; - allColumnsDeps: Array<(deps: any[], meta: Meta) => any[]>; - visibleColumns: Array< - (allColumns: Array>, meta: Meta) => Array> - >; - visibleColumnsDeps: Array<(deps: any[], meta: Meta) => any[]>; - headerGroups: Array< - ( - allColumns: Array>, - meta: Meta, - ) => Array> - >; - headerGroupsDeps: Array<(deps: any[], meta: Meta) => any[]>; - useInstanceBeforeDimensions: Array<(instance: TableInstance) => void>; - useInstance: Array<(instance: TableInstance) => void>; - prepareRow: Array<(row: Row, meta: Meta) => void>; - useControlledState: Array< - (state: TableState, meta: Meta) => TableState - >; - - getTableProps: Array>; - getTableBodyProps: Array>; - getHeaderGroupProps: Array>; - getFooterGroupProps: Array>; - getHeaderProps: Array>; - getFooterProps: Array>; - getRowProps: Array>; - getCellProps: Array>; - useFinalInstance: Array<(instance: TableInstance) => void>; - } - - export interface UseTableColumnOptions { - id?: IdType | undefined; - Header?: Renderer> | undefined; - Footer?: Renderer> | undefined; - width?: number | string | undefined; - minWidth?: number | undefined; - maxWidth?: number | undefined; - } - - type UpdateHiddenColumns = ( - oldHidden: Array>, - ) => Array>; - - export type TableToggleHideAllColumnProps = TableToggleCommonProps; - - export interface UseTableInstanceProps { - state: TableState; - plugins: Array>; - dispatch: TableDispatch; - columns: Array>; - allColumns: Array>; - visibleColumns: Array>; - headerGroups: Array>; - footerGroups: Array>; - headers: Array>; - flatHeaders: Array>; - rows: Array>; - rowsById: Record>; - getTableProps: (propGetter?: TablePropGetter) => TableProps; - getTableBodyProps: (propGetter?: TableBodyPropGetter) => TableBodyProps; - prepareRow: (row: Row) => void; - flatRows: Array>; - totalColumnsWidth: number; - allColumnsHidden: boolean; - toggleHideColumn: (columnId: IdType, value?: boolean) => void; - setHiddenColumns: ( - param: Array> | UpdateHiddenColumns, - ) => void; - toggleHideAllColumns: (value?: boolean) => void; - getToggleHideAllColumnsProps: ( - props?: Partial, - ) => TableToggleHideAllColumnProps; - getHooks: () => Hooks; - } - - export interface UseTableHeaderGroupProps { - headers: Array>; - getHeaderGroupProps: ( - propGetter?: HeaderGroupPropGetter, - ) => TableHeaderProps; - getFooterGroupProps: ( - propGetter?: FooterGroupPropGetter, - ) => TableFooterProps; - totalHeaderCount: number; // not documented - } - - export interface UseTableColumnProps { - id: IdType; - columns?: Array> | undefined; - isVisible: boolean; - render: (type: 'Header' | 'Footer' | string, props?: object) => ReactNode; - totalLeft: number; - totalWidth: number; - getHeaderProps: (propGetter?: HeaderPropGetter) => TableHeaderProps; - getFooterProps: (propGetter?: FooterPropGetter) => TableFooterProps; - toggleHidden: (value?: boolean) => void; - parent?: ColumnInstance | undefined; // not documented - getToggleHiddenProps: (userProps?: any) => any; - depth: number; // not documented - placeholderOf?: ColumnInstance | undefined; - } - - export interface UseTableRowProps { - cells: Array>; - allCells: Array>; - values: Record, CellValue>; - getRowProps: (propGetter?: RowPropGetter) => TableRowProps; - index: number; - original: D; - id: string; - subRows: Array>; - } - - export interface UseTableCellProps { - column: ColumnInstance; - row: Row; - value: CellValue; - getCellProps: (propGetter?: CellPropGetter) => TableCellProps; - render: (type: 'Cell' | string, userProps?: object) => ReactNode; - } - - export type HeaderProps = TableInstance & { - column: ColumnInstance; - }; - - export type FooterProps = TableInstance & { - column: ColumnInstance; - }; - - export type CellProps = { - // column: ColumnInstance; - row: Row; - // cell: Cell; - value: CellValue; - }; - // export type CellProps = TableInstance & { - // column: ColumnInstance; - // row: Row; - // cell: Cell; - // value: CellValue; - // }; - - export type Accessor = ( - originalRow: D, - index: number, - sub: { - subRows: D[]; - depth: number; - data: D[]; - }, - ) => CellValue; - - //#endregion - - // Plugins - - //#region useAbsoluteLayout - export function useAbsoluteLayout(hooks: Hooks): void; - - export namespace useAbsoluteLayout { - const pluginName = 'useAbsoluteLayout'; - } - //#endregion - - //#region useBlockLayout - export function useBlockLayout(hooks: Hooks): void; - - export namespace useBlockLayout { - const pluginName = 'useBlockLayout'; - } - //#endregion - - //#region useColumnOrder - export function useColumnOrder( - hooks: Hooks, - ): void; - - export namespace useColumnOrder { - const pluginName = 'useColumnOrder'; - } - - export interface UseColumnOrderState { - columnOrder: Array>; - } - - export interface UseColumnOrderInstanceProps { - setColumnOrder: ( - updater: - | ((columnOrder: Array>) => Array>) - | Array>, - ) => void; - } - - //#endregion - - //#region useExpanded - export function useExpanded(hooks: Hooks): void; - - export namespace useExpanded { - const pluginName = 'useExpanded'; - } - - export type TableExpandedToggleProps = TableKeyedProps; - - export type UseExpandedOptions = Partial<{ - manualExpandedKey: IdType; - paginateExpandedRows: boolean; - expandSubRows: boolean; - autoResetExpanded?: boolean | undefined; - }>; - - export interface UseExpandedHooks { - getToggleRowsExpandedProps: Array>; - getToggleAllRowsExpandedProps: Array>; - } - - export interface UseExpandedState { - expanded: Record, boolean>; - } - - export interface UseExpandedInstanceProps { - preExpandedRows: Array>; - expandedRows: Array>; - rows: Array>; - expandedDepth: number; - isAllRowsExpanded: boolean; - toggleRowExpanded: (id: Array>, value?: boolean) => void; - toggleAllRowsExpanded: (value?: boolean) => void; - } - - export interface UseExpandedRowProps { - isExpanded: boolean; - canExpand: boolean; - subRows: Array>; - toggleRowExpanded: (value?: boolean) => void; - getToggleRowExpandedProps: ( - props?: Partial, - ) => TableExpandedToggleProps; - depth: number; - } - - //#endregion - - //#region useFilters - export function useFilters(hooks: Hooks): void; - - export namespace useFilters { - const pluginName = 'useFilters'; - } - - export type UseFiltersOptions = Partial<{ - manualFilters: boolean; - disableFilters: boolean; - defaultCanFilter: boolean; - filterTypes: FilterTypes; - autoResetFilters?: boolean | undefined; - }>; - - export interface UseFiltersState { - filters: Filters; - } - - export type UseFiltersColumnOptions = Partial<{ - Filter: Renderer>; - disableFilters: boolean; - defaultCanFilter: boolean; - filter: FilterType | DefaultFilterTypes | string; - }>; - - export interface UseFiltersInstanceProps { - preFilteredRows: Array>; - preFilteredFlatRows: Array>; - preFilteredRowsById: Record>; - filteredRows: Array>; - filteredFlatRows: Array>; - filteredRowsById: Record>; - rows: Array>; - flatRows: Array>; - rowsById: Record>; - setFilter: ( - columnId: IdType, - updater: ((filterValue: FilterValue) => FilterValue) | FilterValue, - ) => void; - setAllFilters: ( - updater: Filters | ((filters: Filters) => Filters), - ) => void; - } - - export interface UseFiltersColumnProps { - canFilter: boolean; - setFilter: ( - updater: ((filterValue: FilterValue) => FilterValue) | FilterValue, - ) => void; - filterValue: FilterValue; - preFilteredRows: Array>; - filteredRows: Array>; - } - - export type FilterProps = HeaderProps; - export type FilterValue = any; - export type Filters = Array<{ - id: IdType; - value: FilterValue; - }>; - export type FilterTypes = Record>; - - export type DefaultFilterTypes = - | 'text' - | 'exactText' - | 'exactTextCase' - | 'includes' - | 'includesAll' - | 'exact' - | 'equals' - | 'between'; - - export interface FilterType { - ( - rows: Array>, - columnIds: Array>, - filterValue: FilterValue, - ): Array>; - - autoRemove?: ((filterValue: FilterValue) => boolean) | undefined; - } - - //#endregion - - //#region useFlexLayout - export function useFlexLayout( - hooks: Hooks, - ): void; - - export namespace useFlexLayout { - const pluginName = 'useFlexLayout'; - } - //#endregion - - //#region useGridLayout - export function useGridLayout( - hooks: Hooks, - ): void; - - export namespace useGridLayout { - const pluginName = 'useGridLayout'; - } - //#endregion - - //#region useGlobalFilter - export function useGlobalFilter( - hooks: Hooks, - ): void; - - export namespace useGlobalFilter { - const pluginName = 'useGlobalFilter'; - } - - export type UseGlobalFiltersOptions = Partial<{ - globalFilter: - | (( - rows: Array>, - columnIds: Array>, - filterValue: any, - ) => Array>) - | string; - manualGlobalFilter: boolean; - filterTypes: FilterTypes; - autoResetGlobalFilter?: boolean | undefined; - disableGlobalFilter?: boolean | undefined; - }>; - - export interface UseGlobalFiltersState { - globalFilter: any; - } - - export type UseGlobalFiltersColumnOptions = Partial<{ - disableGlobalFilter?: boolean | undefined; - }>; - - export interface UseGlobalFiltersInstanceProps { - preGlobalFilteredRows: Array>; - preGlobalFilteredFlatRows: Array>; - preGlobalFilteredRowsById: Record>; - globalFilteredRows: Array>; - globalFilteredFlatRows: Array>; - globalFilteredRowsById: Record>; - rows: Array>; - flatRows: Array>; - rowsById: Record>; - setGlobalFilter: (filterValue: FilterValue) => void; - } - - //#endregion - - //#region useGroupBy - export function useGroupBy(hooks: Hooks): void; - - export namespace useGroupBy { - const pluginName = 'useGroupBy'; - } - - export interface TableGroupByToggleProps { - title?: string | undefined; - style?: CSSProperties | undefined; - onClick?: ((e: MouseEvent) => void) | undefined; - } - - export type UseGroupByOptions = Partial<{ - manualGroupBy: boolean; - disableGroupBy: boolean; - defaultCanGroupBy: boolean; - aggregations: Record>; - groupByFn: ( - rows: Array>, - columnId: IdType, - ) => Record>>; - autoResetGroupBy?: boolean | undefined; - }>; - - export interface UseGroupByHooks { - getGroupByToggleProps: Array>; - } - - export interface UseGroupByState { - groupBy: Array>; - } - - export type UseGroupByColumnOptions = Partial<{ - aggregate: Aggregator; - Aggregated: Renderer>; - disableGroupBy: boolean; - defaultCanGroupBy: boolean; - }>; - - export interface UseGroupByInstanceProps { - preGroupedRows: Array>; - preGroupedFlatRows: Array>; - preGroupedRowsById: Record>; - groupedRows: Array>; - groupedFlatRows: Array>; - groupedRowsById: Record>; - onlyGroupedFlatRows: Array>; - onlyGroupedRowsById: Record>; - nonGroupedFlatRows: Array>; - nonGroupedRowsById: Record>; - rows: Array>; - flatRows: Array>; - rowsById: Record>; - toggleGroupBy: (columnId: IdType, value?: boolean) => void; - } - - export interface UseGroupByColumnProps { - canGroupBy: boolean; - isGrouped: boolean; - groupedIndex: number; - toggleGroupBy: () => void; - getGroupByToggleProps: ( - props?: Partial, - ) => TableGroupByToggleProps; - } - - export interface UseGroupByRowProps { - isGrouped: boolean; - groupByID: IdType; - groupByVal: string; - values: Record, AggregatedValue>; - subRows: Array>; - leafRows: Array>; - depth: number; - id: string; - index: number; - } - - export interface UseGroupByCellProps { - isGrouped: boolean; - isPlaceholder: boolean; - isAggregated: boolean; - } - - export type DefaultAggregators = - | 'sum' - | 'average' - | 'median' - | 'uniqueCount' - | 'count'; - - export type AggregatorFn = ( - columnValues: CellValue[], - rows: Array>, - isAggregated: boolean, - ) => AggregatedValue; - export type Aggregator = - | AggregatorFn - | DefaultAggregators - | string; - export type AggregatedValue = any; - //#endregion - - //#region usePagination - export function usePagination( - hooks: Hooks, - ): void; - - export namespace usePagination { - const pluginName = 'usePagination'; - } - - export type UsePaginationOptions = Partial<{ - pageCount: number; - manualPagination: boolean; - autoResetPage?: boolean | undefined; - paginateExpandedRows: boolean; - }>; - - export interface UsePaginationState { - pageSize: number; - pageIndex: number; - } - - export interface UsePaginationInstanceProps { - page: Array>; - pageCount: number; - pageOptions: number[]; - canPreviousPage: boolean; - canNextPage: boolean; - gotoPage: (updater: ((pageIndex: number) => number) | number) => void; - previousPage: () => void; - nextPage: () => void; - setPageSize: (pageSize: number) => void; - } - - //#endregion - - //#region useResizeColumns - export function useResizeColumns( - hooks: Hooks, - ): void; - - export namespace useResizeColumns { - const pluginName = 'useResizeColumns'; - } - - export interface UseResizeColumnsOptions { - disableResizing?: boolean | undefined; - autoResetResize?: boolean | undefined; - } - - export interface UseResizeColumnsState { - columnResizing: { - startX?: number | undefined; - columnWidth: number; - headerIdWidths: Record; - columnWidths: any; - isResizingColumn?: string | undefined; - }; - } - - export interface UseResizeColumnsColumnOptions { - disableResizing?: boolean | undefined; - } - - // export interface TableResizerProps {} - - export interface UseResizeColumnsColumnProps { - getResizerProps: (props?: Partial) => TableResizerProps; - canResize: boolean; - isResizing: boolean; - } - - //#endregion - - //#region useRowSelect - export function useRowSelect( - hooks: Hooks, - ): void; - - export namespace useRowSelect { - const pluginName = 'useRowSelect'; - } - - export type TableToggleAllRowsSelectedProps = TableToggleCommonProps; - - export type TableToggleRowsSelectedProps = TableToggleCommonProps; - - export type UseRowSelectOptions = Partial<{ - manualRowSelectedKey: IdType; - autoResetSelectedRows: boolean; - selectSubRows: boolean; - }>; - - export interface UseRowSelectHooks { - getToggleRowSelectedProps: Array< - PropGetter - >; - getToggleAllRowsSelectedProps: Array< - PropGetter - >; - getToggleAllPageRowsSelectedProps: Array< - PropGetter - >; - } - - export interface UseRowSelectState { - selectedRowIds: Record, boolean>; - } - - export interface UseRowSelectInstanceProps { - toggleRowSelected: (rowId: IdType, set?: boolean) => void; - toggleAllRowsSelected: (value?: boolean) => void; - getToggleAllRowsSelectedProps: ( - props?: Partial, - ) => TableToggleAllRowsSelectedProps; - getToggleAllPageRowsSelectedProps: ( - props?: Partial, - ) => TableToggleAllRowsSelectedProps; - isAllRowsSelected: boolean; - selectedFlatRows: Array>; - } - - export interface UseRowSelectRowProps { - isSelected: boolean; - isSomeSelected: boolean; - toggleRowSelected: (set?: boolean) => void; - getToggleRowSelectedProps: ( - props?: Partial, - ) => TableToggleRowsSelectedProps; - } - - //#endregion - - //#region useRowState - export function useRowState(hooks: Hooks): void; - - export namespace useRowState { - const pluginName = 'useRowState'; - } - - export type UseRowStateOptions = Partial<{ - initialRowStateAccessor: (row: Row) => UseRowStateLocalState; - getResetRowStateDeps: (instance: TableInstance) => any[]; - autoResetRowState?: boolean | undefined; - }>; - - export interface UseRowStateState { - rowState: Record }>; - } - - export interface UseRowStateInstanceProps { - setRowState: (rowPath: string[], updater: UseRowUpdater) => void; - setCellState: ( - rowPath: string[], - columnId: IdType, - updater: UseRowUpdater, - ) => void; - } - - export interface UseRowStateRowProps { - state: UseRowStateLocalState; - setState: (updater: UseRowUpdater) => void; - } - - export interface UseRowStateCellProps { - state: UseRowStateLocalState; - setState: (updater: UseRowUpdater) => void; - } - - export type UseRowUpdater = T | ((prev: T) => T); - export type UseRowStateLocalState = Record< - IdType, - T - >; - //#endregion - - //#region useSortBy - export function useSortBy(hooks: Hooks): void; - - export namespace useSortBy { - const pluginName = 'useSortBy'; - } - - export interface TableSortByToggleProps { - title?: string | undefined; - style?: CSSProperties | undefined; - onClick?: ((e: MouseEvent) => void) | undefined; - } - - export type UseSortByOptions = Partial<{ - manualSortBy: boolean; - disableSortBy: boolean; - defaultCanSort: boolean; - disableMultiSort: boolean; - isMultiSortEvent: (e: MouseEvent) => boolean; - maxMultiSortColCount: number; - disableSortRemove: boolean; - disabledMultiRemove: boolean; - orderByFn: ( - rows: Array>, - sortFns: Array>, - directions: boolean[], - ) => Array>; - sortTypes: Record>; - autoResetSortBy?: boolean | undefined; - }>; - - export interface UseSortByHooks { - getSortByToggleProps: Array>; - } - - export interface UseSortByState { - sortBy: Array>; - } - - export type UseSortByColumnOptions = Partial<{ - defaultCanSort: boolean; - disableSortBy: boolean; - sortDescFirst: boolean; - sortInverted: boolean; - sortType: SortByFn | DefaultSortTypes | string; - }>; - - export interface UseSortByInstanceProps { - rows: Array>; - preSortedRows: Array>; - setSortBy: (sortBy: Array>) => void; - toggleSortBy: ( - columnId: IdType, - descending?: boolean, - isMulti?: boolean, - ) => void; - } - - export interface UseSortByColumnProps { - canSort: boolean; - toggleSortBy: (descending?: boolean, multi?: boolean) => void; - getSortByToggleProps: ( - props?: Partial, - ) => TableSortByToggleProps; - clearSortBy: () => void; - isSorted: boolean; - sortedIndex: number; - isSortedDesc: boolean | undefined; - } - - export type OrderByFn = ( - rowA: Row, - rowB: Row, - ) => number; - export type SortByFn = ( - rowA: Row, - rowB: Row, - columnId: IdType, - desc?: boolean, - ) => number; - - export type DefaultSortTypes = - | 'alphanumeric' - | 'datetime' - | 'basic' - | 'string' - | 'number'; - - export interface SortingRule { - id: IdType; - desc?: boolean | undefined; - } - - //#endregion - - // Additional API - export const actions: Record; - export type ActionType = { type: string } & Record; - export const defaultColumn: Partial & Record; - - // Helpers - export type StringKey = Extract; - export type IdType = StringKey | string; - export type CellValue = V; - - export type Renderer = - | ComponentType - | ReactElement - | string - | number - | ReactFragment; - - export interface PluginHook { - (hooks: Hooks): void; - pluginName?: string | undefined; - } - - export type TableDispatch = (action: A) => void; - - // utils - export function defaultOrderByFn( - arr: Array>, - funcs: Array>, - dirs: boolean[], - ): Array>; - - export function defaultGroupByFn( - rows: Array>, - columnId: IdType, - ): Record>>; - - export function makePropGetter(hooks: Hooks, ...meta: any[]): any; - - export function reduceHooks( - hooks: Hooks, - initial: T, - ...args: any[] - ): T; - - export function loopHooks(hooks: Hooks, ...args: any[]): void; - - export function ensurePluginOrder( - plugins: Array>, - befores: string[], - pluginName: string, - ): void; - - export function functionalUpdate( - updater: any, - old: Partial>, - ): Partial>; - - export function useGetLatest(obj: T): () => T; - - export function safeUseLayoutEffect( - effect: EffectCallback, - deps?: DependencyList, - ): void; - - export function useMountedLayoutEffect( - effect: EffectCallback, - deps?: DependencyList, - ): void; - - export function useAsyncDebounce any>( - defaultFn: F, - defaultWait?: number, - ): F; - - export function makeRenderer( - instance: TableInstance, - column: ColumnInstance, - meta?: any, - ): ReactElement; - - ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// - - // Additional Types - - export type FieldType = 'text' | 'number' | 'date' | string; - - export type CellRendererProps = { - /** - * Cell HTML props passed from the Table. - */ - cellElementProps: TableCellProps; - /** - * Table specific cell props like `column`, `row`. - */ - cellProps: CellProps; - /** - * Cell's content. - */ - children: React.ReactNode; - /** - * Function that returns whether the cell is disabled. - */ - isDisabled?: (rowData: D) => boolean; - }; -} +// /*--------------------------------------------------------------------------------------------- +// * Copyright (c) Bentley Systems, Incorporated. All rights reserved. +// * See LICENSE.md in the project root for license terms and full copyright notice. +// *--------------------------------------------------------------------------------------------*/ +// // Type definitions for react-table 7.7 +// // Project: https://github.com/tannerlinsley/react-table +// // Definitions by: Guy Gascoigne-Piggford , +// // Michael Stramel +// // Rohit Garg +// // Jason Clark +// // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +// // TypeScript Version: 3.5 +// // reflects react-table@7.7.0 + +// // tslint:disable:no-empty-interface +// // no-empty-interface is disabled to allow easy extension with declaration merging + +// // tslint:disable:no-unnecessary-generics +// // no-unnecessary-generics is disabled because many of these definitions are either used in a generic +// // context or the signatures are required to match for declaration merging + +// // The changelog for the important changes is located in the Readme.md + +// import { +// ChangeEvent, +// ComponentType, +// CSSProperties, +// DependencyList, +// EffectCallback, +// MouseEvent, +// ReactElement, +// ReactFragment, +// ReactNode, +// } from 'react'; + +// export const TESTING = 'TESTING'; + +// declare module 'react-table' { +// export {}; + +// /** +// * The empty definitions of below provides a base definition for the parts used by useTable, that can then be extended in the users code. +// * +// * @example +// * export interface TableOptions +// * extends +// * UseExpandedOptions, +// * UseFiltersOptions {} +// * see https://gist.github.com/ggascoigne/646e14c9d54258e40588a13aabf0102d for more details +// */ +// export interface TableOptions +// extends Omit, 'data' | 'columns'>, +// UseRowSelectOptions, +// UseExpandedOptions, +// UseFiltersOptions, +// // UseGroupByOptions, +// UsePaginationOptions, +// UseGlobalFiltersOptions, +// UseGlobalFiltersColumnOptions, +// Omit, 'disableResizing'>, +// // UseRowStateOptions, +// UseSortByOptions { +// /** +// * List of columns. +// * +// * Should not have a top-level `Header` or a `columns` sub-property. They are only allowed to be passed for backwards compatibility. +// * See [migration guide](https://github.com/iTwin/iTwinUI/wiki/iTwinUI-react-v2-migration-guide#breaking-changes). +// */ +// columns: Array>; +// /** +// * Table data list. +// * Must be memoized. +// * +// * Supports expandable sub-rows using the `subRows` field in data entries. +// * If some rows don't have sub-data, it is recommended to pass an empty array to `subRows` for consistent spacing. +// */ +// data: D[]; +// /** +// * Column's resize mode. +// * - `fit` - when resizing it affects current and the next column, +// * e.g. when increasing width of current column, next column's width will decrease. +// * - `expand` - when resizing it affects only the current column, +// * e.g. when increasing width of the current column, next column's width remains the same. +// * @default 'fit' +// */ +// columnResizeMode?: 'fit' | 'expand'; +// } + +// export interface TableInstance +// extends Omit, 'columns' | 'pageCount'>, +// UseTableInstanceProps, +// UseColumnOrderInstanceProps, +// UseExpandedInstanceProps, +// UseFiltersInstanceProps, +// UseGlobalFiltersInstanceProps, +// UseGroupByInstanceProps, +// UsePaginationInstanceProps, +// UseRowSelectInstanceProps, +// UseRowStateInstanceProps, +// UseSortByInstanceProps { +// initialRows: Row[]; +// columnResizeMode: TableOptions['columnResizeMode']; +// tableWidth: number; +// } + +// export interface TableState +// extends UseColumnOrderState, +// UseExpandedState, +// UseFiltersState, +// UseGlobalFiltersState, +// UseGroupByState, +// UsePaginationState, +// UseRowSelectState, +// UseRowStateState, +// UseSortByState { +// hiddenColumns?: Array> | undefined; +// columnResizing: { +// startX?: number; +// columnWidth?: number; +// nextColumnWidth?: number; +// headerIdWidths?: Array<[string, number]>; +// nextHeaderIdWidths?: Array<[string, number]>; +// columnWidths: Record; +// isResizingColumn?: string; +// }; +// isTableResizing?: boolean; +// columnReorderStartIndex: number; +// sticky: { +// isScrolledToRight?: boolean; +// isScrolledToLeft?: boolean; +// }; +// lastSelectedRowId?: string; +// } + +// export interface Hooks +// extends UseTableHooks, +// UseExpandedHooks, +// UseGroupByHooks, +// UseRowSelectHooks, +// UseSortByHooks {} + +// export interface Cell +// extends UseTableCellProps, +// UseGroupByCellProps, +// UseRowStateCellProps {} + +// export interface ColumnInterface +// extends UseTableColumnOptions, +// UseSortByColumnOptions, +// UseFiltersColumnOptions, +// UseResizeColumnsColumnOptions, +// UseGlobalFiltersColumnOptions { +// /** +// * Custom class name applied to header column cell. +// */ +// columnClassName?: string; +// /** +// * Custom class name applied to each column's cell. +// */ +// cellClassName?: string; +// /** +// * Type of the data in cell. Used for manual filtering. +// */ +// fieldType?: FieldType; +// /** +// * Filter component used as a column filter. Should use filters from `tableFilters`. +// */ +// Filter?: Renderer> | Renderer>; +// /** +// * String value or custom function to use for filtering. +// * Possible string values: `text`, `exactText`, `exactTextCase`, `includes`, `includesAll`, `exact`, `equals`, `between`. +// * More info about these filters: https://github.com/tannerlinsley/react-table/blob/master/src/filterTypes.js +// */ +// filter?: FilterType | DefaultFilterTypes | string; +// /** +// * Function that should return whole cell element not only the content. +// * Must be memoized. +// * @example +// * { +// * Header: 'Name', +// * accessor: 'name', +// * cellRenderer: (props) => , +// * } +// */ +// cellRenderer?: (props: CellRendererProps) => React.ReactNode; +// /** +// * If true, column can't be reordered. +// * @default false +// */ +// disableReordering?: boolean; +// /** +// * If true, column's visibility cannot be toggled. +// * @default false +// */ +// disableToggleVisibility?: boolean; +// /** +// * Side on which column should be sticked to. +// */ +// sticky?: 'left' | 'right'; +// } + +// export interface ColumnInterfaceBasedOnValue { +// // Cell?: Renderer> | undefined; +// // Cell?: (props: CellProps) => React.ReactNode; +// // testing1: Renderer> | undefined; +// testing1: Renderer> | undefined; +// } + +// // eslint-disable-next-line @typescript-eslint/no-empty-interface +// export interface ColumnGroupInterface { +// // columns: Array>; +// } + +// export type ColumnGroup = ColumnInterface & +// ColumnGroupInterface & +// ( +// | { Header: string } +// | ({ id: IdType } & { +// Header: Renderer>; +// }) +// ) & { accessor?: Accessor | undefined }; // Not used, but needed for backwards compatibility + +// type ValueOf = T[keyof T]; + +// // interface TableStoryDataType { +// // product: number; +// // price: number; +// // // [K in string]: any; +// // quantity: number; +// // rating: number; +// // deliveryTime: number; +// // status: 'positive' | 'negative' | 'warning' | undefined; +// // // subRows: TableStoryDataType[]; +// // // 1?: number; +// // }; + +// // // type testing = ColumnWithStrictAccessor +// // // type testing = ColumnInterfaceBasedOnValue +// // // type testing = CellProps +// // type testing = TableInstance + +// // The accessors like `foo.bar` are not supported, use functions instead +// export type ColumnWithStrictAccessor = ColumnInterface & +// // export type ColumnWithStrictAccessor = ValueOf<{ +// ValueOf<{ +// [K in keyof D]: { +// accessor: K; +// } & ColumnInterfaceBasedOnValue; +// }>; + +// export type ColumnWithLooseAccessor = ColumnInterface & +// ColumnInterfaceBasedOnValue & +// ( +// | { Header: string } +// | { id: IdType } +// | { accessor: keyof D extends never ? IdType : never } +// ) & { +// accessor?: +// | (keyof D extends never ? IdType | Accessor : Accessor) +// | undefined; +// }; + +// export type Column = +// | ColumnGroup +// | ColumnWithLooseAccessor +// | ColumnWithStrictAccessor; + +// export interface ColumnInstance +// extends Omit, 'id'>, +// ColumnInterfaceBasedOnValue, +// UseTableColumnProps, +// UseFiltersColumnProps, +// UseGroupByColumnProps, +// UseResizeColumnsColumnProps, +// UseSortByColumnProps { +// originalWidth: number; +// resizeWidth?: number; +// isResizerVisible?: boolean; +// getDragAndDropProps: () => TableKeyedProps; +// originalSticky?: 'left' | 'right' | 'none'; +// } + +// export interface HeaderGroup +// extends ColumnInstance, +// UseTableHeaderGroupProps {} + +// export interface Row +// extends UseTableRowProps, +// UseExpandedRowProps, +// UseGroupByRowProps, +// UseRowSelectRowProps, +// UseRowStateRowProps { +// initialSubRows: Row[]; +// } + +// export interface TableCommonProps { +// style?: CSSProperties | undefined; +// className?: string | undefined; +// role?: string | undefined; +// } + +// export type TableProps = TableCommonProps; + +// export type TableBodyProps = TableCommonProps; + +// export interface TableKeyedProps extends TableCommonProps { +// key: React.Key; +// } + +// export type TableHeaderGroupProps = TableKeyedProps; + +// export type TableFooterGroupProps = TableKeyedProps; + +// export type TableHeaderProps = TableKeyedProps; + +// export type TableFooterProps = TableKeyedProps; + +// export type TableRowProps = TableKeyedProps; + +// export type TableCellProps = TableKeyedProps; + +// export interface TableToggleCommonProps extends TableCommonProps { +// onChange?: ((e: ChangeEvent) => void) | undefined; +// checked?: boolean | undefined; +// title?: string | undefined; +// indeterminate?: boolean | undefined; +// } + +// export interface MetaBase { +// instance: TableInstance; +// userProps: any; +// } + +// // inspired by ExtendState in https://github.com/reduxjs/redux/blob/master/src/types/store.ts +// export type Meta> = [ +// Extension, +// ] extends [never] +// ? M +// : M & Extension; + +// //#region useTable +// export function useTable( +// options: TableOptions, +// ...plugins: Array> +// ): TableInstance; + +// /** +// * NOTE: To use custom options, use "Interface Merging" to add the custom options +// */ +// export type UseTableOptions = { +// columns: ReadonlyArray>; +// data: readonly D[]; +// } & Partial<{ +// initialState: Partial>; +// stateReducer: ( +// newState: TableState, +// action: ActionType, +// previousState: TableState, +// instance?: TableInstance, +// ) => TableState; +// useControlledState: (state: TableState, meta: Meta) => TableState; +// defaultColumn: Partial>; +// getSubRows: (originalRow: D, relativeIndex: number) => D[]; +// getRowId: ( +// originalRow: D, +// relativeIndex: number, +// parent?: Row, +// ) => string; +// autoResetHiddenColumns: boolean; +// }>; + +// export type PropGetter< +// D extends object, +// Props, +// T extends object = never, +// P = Partial, +// > = ((props: P, meta: Meta) => P | P[]) | P | P[]; + +// export type TablePropGetter = PropGetter; + +// export type TableBodyPropGetter = PropGetter< +// D, +// TableBodyProps +// >; + +// export type HeaderPropGetter = PropGetter< +// D, +// TableHeaderProps, +// { column: HeaderGroup } +// >; + +// export type FooterGroupPropGetter = PropGetter< +// D, +// TableFooterGroupProps, +// { column: HeaderGroup } +// >; + +// export type HeaderGroupPropGetter = PropGetter< +// D, +// TableHeaderGroupProps, +// { column: HeaderGroup } +// >; + +// export type FooterPropGetter = PropGetter< +// D, +// TableFooterProps, +// { column: HeaderGroup } +// >; + +// export type RowPropGetter = PropGetter< +// D, +// TableRowProps, +// { row: Row } +// >; + +// export type CellPropGetter = PropGetter< +// D, +// TableCellProps, +// { cell: Cell } +// >; + +// export interface ReducerTableState +// extends TableState, +// Record {} + +// export interface UseTableHooks extends Record { +// useOptions: Array< +// (options: TableOptions, args: TableOptions) => TableOptions +// >; +// stateReducers: Array< +// ( +// newState: TableState, +// action: ActionType, +// previousState?: TableState, +// instance?: TableInstance, +// ) => ReducerTableState | undefined +// >; +// columns: Array< +// (columns: Array>, meta: Meta) => Array> +// >; +// columnsDeps: Array<(deps: any[], meta: Meta) => any[]>; +// allColumns: Array< +// (allColumns: Array>, meta: Meta) => Array> +// >; +// allColumnsDeps: Array<(deps: any[], meta: Meta) => any[]>; +// visibleColumns: Array< +// (allColumns: Array>, meta: Meta) => Array> +// >; +// visibleColumnsDeps: Array<(deps: any[], meta: Meta) => any[]>; +// headerGroups: Array< +// ( +// allColumns: Array>, +// meta: Meta, +// ) => Array> +// >; +// headerGroupsDeps: Array<(deps: any[], meta: Meta) => any[]>; +// useInstanceBeforeDimensions: Array<(instance: TableInstance) => void>; +// useInstance: Array<(instance: TableInstance) => void>; +// prepareRow: Array<(row: Row, meta: Meta) => void>; +// useControlledState: Array< +// (state: TableState, meta: Meta) => TableState +// >; + +// getTableProps: Array>; +// getTableBodyProps: Array>; +// getHeaderGroupProps: Array>; +// getFooterGroupProps: Array>; +// getHeaderProps: Array>; +// getFooterProps: Array>; +// getRowProps: Array>; +// getCellProps: Array>; +// useFinalInstance: Array<(instance: TableInstance) => void>; +// } + +// export interface UseTableColumnOptions { +// id?: IdType | undefined; +// Header?: Renderer> | undefined; +// Footer?: Renderer> | undefined; +// width?: number | string | undefined; +// minWidth?: number | undefined; +// maxWidth?: number | undefined; +// } + +// type UpdateHiddenColumns = ( +// oldHidden: Array>, +// ) => Array>; + +// export type TableToggleHideAllColumnProps = TableToggleCommonProps; + +// export interface UseTableInstanceProps { +// state: TableState; +// plugins: Array>; +// dispatch: TableDispatch; +// columns: Array>; +// allColumns: Array>; +// visibleColumns: Array>; +// headerGroups: Array>; +// footerGroups: Array>; +// headers: Array>; +// flatHeaders: Array>; +// rows: Array>; +// rowsById: Record>; +// getTableProps: (propGetter?: TablePropGetter) => TableProps; +// getTableBodyProps: (propGetter?: TableBodyPropGetter) => TableBodyProps; +// prepareRow: (row: Row) => void; +// flatRows: Array>; +// totalColumnsWidth: number; +// allColumnsHidden: boolean; +// toggleHideColumn: (columnId: IdType, value?: boolean) => void; +// setHiddenColumns: ( +// param: Array> | UpdateHiddenColumns, +// ) => void; +// toggleHideAllColumns: (value?: boolean) => void; +// getToggleHideAllColumnsProps: ( +// props?: Partial, +// ) => TableToggleHideAllColumnProps; +// getHooks: () => Hooks; +// } + +// export interface UseTableHeaderGroupProps { +// headers: Array>; +// getHeaderGroupProps: ( +// propGetter?: HeaderGroupPropGetter, +// ) => TableHeaderProps; +// getFooterGroupProps: ( +// propGetter?: FooterGroupPropGetter, +// ) => TableFooterProps; +// totalHeaderCount: number; // not documented +// } + +// export interface UseTableColumnProps { +// id: IdType; +// columns?: Array> | undefined; +// isVisible: boolean; +// render: (type: 'Header' | 'Footer' | string, props?: object) => ReactNode; +// totalLeft: number; +// totalWidth: number; +// getHeaderProps: (propGetter?: HeaderPropGetter) => TableHeaderProps; +// getFooterProps: (propGetter?: FooterPropGetter) => TableFooterProps; +// toggleHidden: (value?: boolean) => void; +// parent?: ColumnInstance | undefined; // not documented +// getToggleHiddenProps: (userProps?: any) => any; +// depth: number; // not documented +// placeholderOf?: ColumnInstance | undefined; +// } + +// export interface UseTableRowProps { +// cells: Array>; +// allCells: Array>; +// values: Record, CellValue>; +// getRowProps: (propGetter?: RowPropGetter) => TableRowProps; +// index: number; +// original: D; +// id: string; +// subRows: Array>; +// } + +// export interface UseTableCellProps { +// column: ColumnInstance; +// row: Row; +// value: CellValue; +// getCellProps: (propGetter?: CellPropGetter) => TableCellProps; +// render: (type: 'Cell' | string, userProps?: object) => ReactNode; +// } + +// export type HeaderProps = TableInstance & { +// column: ColumnInstance; +// }; + +// export type FooterProps = TableInstance & { +// column: ColumnInstance; +// }; + +// export type CellProps = { +// // column: ColumnInstance; +// row: Row; +// // cell: Cell; +// value: CellValue; +// }; +// // export type CellProps = TableInstance & { +// // column: ColumnInstance; +// // row: Row; +// // cell: Cell; +// // value: CellValue; +// // }; + +// export type Accessor = ( +// originalRow: D, +// index: number, +// sub: { +// subRows: D[]; +// depth: number; +// data: D[]; +// }, +// ) => CellValue; + +// //#endregion + +// // Plugins + +// //#region useAbsoluteLayout +// export function useAbsoluteLayout(hooks: Hooks): void; + +// export namespace useAbsoluteLayout { +// const pluginName = 'useAbsoluteLayout'; +// } +// //#endregion + +// //#region useBlockLayout +// export function useBlockLayout(hooks: Hooks): void; + +// export namespace useBlockLayout { +// const pluginName = 'useBlockLayout'; +// } +// //#endregion + +// //#region useColumnOrder +// export function useColumnOrder( +// hooks: Hooks, +// ): void; + +// export namespace useColumnOrder { +// const pluginName = 'useColumnOrder'; +// } + +// export interface UseColumnOrderState { +// columnOrder: Array>; +// } + +// export interface UseColumnOrderInstanceProps { +// setColumnOrder: ( +// updater: +// | ((columnOrder: Array>) => Array>) +// | Array>, +// ) => void; +// } + +// //#endregion + +// //#region useExpanded +// export function useExpanded(hooks: Hooks): void; + +// export namespace useExpanded { +// const pluginName = 'useExpanded'; +// } + +// export type TableExpandedToggleProps = TableKeyedProps; + +// export type UseExpandedOptions = Partial<{ +// manualExpandedKey: IdType; +// paginateExpandedRows: boolean; +// expandSubRows: boolean; +// autoResetExpanded?: boolean | undefined; +// }>; + +// export interface UseExpandedHooks { +// getToggleRowsExpandedProps: Array>; +// getToggleAllRowsExpandedProps: Array>; +// } + +// export interface UseExpandedState { +// expanded: Record, boolean>; +// } + +// export interface UseExpandedInstanceProps { +// preExpandedRows: Array>; +// expandedRows: Array>; +// rows: Array>; +// expandedDepth: number; +// isAllRowsExpanded: boolean; +// toggleRowExpanded: (id: Array>, value?: boolean) => void; +// toggleAllRowsExpanded: (value?: boolean) => void; +// } + +// export interface UseExpandedRowProps { +// isExpanded: boolean; +// canExpand: boolean; +// subRows: Array>; +// toggleRowExpanded: (value?: boolean) => void; +// getToggleRowExpandedProps: ( +// props?: Partial, +// ) => TableExpandedToggleProps; +// depth: number; +// } + +// //#endregion + +// //#region useFilters +// export function useFilters(hooks: Hooks): void; + +// export namespace useFilters { +// const pluginName = 'useFilters'; +// } + +// export type UseFiltersOptions = Partial<{ +// manualFilters: boolean; +// disableFilters: boolean; +// defaultCanFilter: boolean; +// filterTypes: FilterTypes; +// autoResetFilters?: boolean | undefined; +// }>; + +// export interface UseFiltersState { +// filters: Filters; +// } + +// export type UseFiltersColumnOptions = Partial<{ +// Filter: Renderer>; +// disableFilters: boolean; +// defaultCanFilter: boolean; +// filter: FilterType | DefaultFilterTypes | string; +// }>; + +// export interface UseFiltersInstanceProps { +// preFilteredRows: Array>; +// preFilteredFlatRows: Array>; +// preFilteredRowsById: Record>; +// filteredRows: Array>; +// filteredFlatRows: Array>; +// filteredRowsById: Record>; +// rows: Array>; +// flatRows: Array>; +// rowsById: Record>; +// setFilter: ( +// columnId: IdType, +// updater: ((filterValue: FilterValue) => FilterValue) | FilterValue, +// ) => void; +// setAllFilters: ( +// updater: Filters | ((filters: Filters) => Filters), +// ) => void; +// } + +// export interface UseFiltersColumnProps { +// canFilter: boolean; +// setFilter: ( +// updater: ((filterValue: FilterValue) => FilterValue) | FilterValue, +// ) => void; +// filterValue: FilterValue; +// preFilteredRows: Array>; +// filteredRows: Array>; +// } + +// export type FilterProps = HeaderProps; +// export type FilterValue = any; +// export type Filters = Array<{ +// id: IdType; +// value: FilterValue; +// }>; +// export type FilterTypes = Record>; + +// export type DefaultFilterTypes = +// | 'text' +// | 'exactText' +// | 'exactTextCase' +// | 'includes' +// | 'includesAll' +// | 'exact' +// | 'equals' +// | 'between'; + +// export interface FilterType { +// ( +// rows: Array>, +// columnIds: Array>, +// filterValue: FilterValue, +// ): Array>; + +// autoRemove?: ((filterValue: FilterValue) => boolean) | undefined; +// } + +// //#endregion + +// //#region useFlexLayout +// export function useFlexLayout( +// hooks: Hooks, +// ): void; + +// export namespace useFlexLayout { +// const pluginName = 'useFlexLayout'; +// } +// //#endregion + +// //#region useGridLayout +// export function useGridLayout( +// hooks: Hooks, +// ): void; + +// export namespace useGridLayout { +// const pluginName = 'useGridLayout'; +// } +// //#endregion + +// //#region useGlobalFilter +// export function useGlobalFilter( +// hooks: Hooks, +// ): void; + +// export namespace useGlobalFilter { +// const pluginName = 'useGlobalFilter'; +// } + +// export type UseGlobalFiltersOptions = Partial<{ +// globalFilter: +// | (( +// rows: Array>, +// columnIds: Array>, +// filterValue: any, +// ) => Array>) +// | string; +// manualGlobalFilter: boolean; +// filterTypes: FilterTypes; +// autoResetGlobalFilter?: boolean | undefined; +// disableGlobalFilter?: boolean | undefined; +// }>; + +// export interface UseGlobalFiltersState { +// globalFilter: any; +// } + +// export type UseGlobalFiltersColumnOptions = Partial<{ +// disableGlobalFilter?: boolean | undefined; +// }>; + +// export interface UseGlobalFiltersInstanceProps { +// preGlobalFilteredRows: Array>; +// preGlobalFilteredFlatRows: Array>; +// preGlobalFilteredRowsById: Record>; +// globalFilteredRows: Array>; +// globalFilteredFlatRows: Array>; +// globalFilteredRowsById: Record>; +// rows: Array>; +// flatRows: Array>; +// rowsById: Record>; +// setGlobalFilter: (filterValue: FilterValue) => void; +// } + +// //#endregion + +// //#region useGroupBy +// export function useGroupBy(hooks: Hooks): void; + +// export namespace useGroupBy { +// const pluginName = 'useGroupBy'; +// } + +// export interface TableGroupByToggleProps { +// title?: string | undefined; +// style?: CSSProperties | undefined; +// onClick?: ((e: MouseEvent) => void) | undefined; +// } + +// export type UseGroupByOptions = Partial<{ +// manualGroupBy: boolean; +// disableGroupBy: boolean; +// defaultCanGroupBy: boolean; +// aggregations: Record>; +// groupByFn: ( +// rows: Array>, +// columnId: IdType, +// ) => Record>>; +// autoResetGroupBy?: boolean | undefined; +// }>; + +// export interface UseGroupByHooks { +// getGroupByToggleProps: Array>; +// } + +// export interface UseGroupByState { +// groupBy: Array>; +// } + +// export type UseGroupByColumnOptions = Partial<{ +// aggregate: Aggregator; +// Aggregated: Renderer>; +// disableGroupBy: boolean; +// defaultCanGroupBy: boolean; +// }>; + +// export interface UseGroupByInstanceProps { +// preGroupedRows: Array>; +// preGroupedFlatRows: Array>; +// preGroupedRowsById: Record>; +// groupedRows: Array>; +// groupedFlatRows: Array>; +// groupedRowsById: Record>; +// onlyGroupedFlatRows: Array>; +// onlyGroupedRowsById: Record>; +// nonGroupedFlatRows: Array>; +// nonGroupedRowsById: Record>; +// rows: Array>; +// flatRows: Array>; +// rowsById: Record>; +// toggleGroupBy: (columnId: IdType, value?: boolean) => void; +// } + +// export interface UseGroupByColumnProps { +// canGroupBy: boolean; +// isGrouped: boolean; +// groupedIndex: number; +// toggleGroupBy: () => void; +// getGroupByToggleProps: ( +// props?: Partial, +// ) => TableGroupByToggleProps; +// } + +// export interface UseGroupByRowProps { +// isGrouped: boolean; +// groupByID: IdType; +// groupByVal: string; +// values: Record, AggregatedValue>; +// subRows: Array>; +// leafRows: Array>; +// depth: number; +// id: string; +// index: number; +// } + +// export interface UseGroupByCellProps { +// isGrouped: boolean; +// isPlaceholder: boolean; +// isAggregated: boolean; +// } + +// export type DefaultAggregators = +// | 'sum' +// | 'average' +// | 'median' +// | 'uniqueCount' +// | 'count'; + +// export type AggregatorFn = ( +// columnValues: CellValue[], +// rows: Array>, +// isAggregated: boolean, +// ) => AggregatedValue; +// export type Aggregator = +// | AggregatorFn +// | DefaultAggregators +// | string; +// export type AggregatedValue = any; +// //#endregion + +// //#region usePagination +// export function usePagination( +// hooks: Hooks, +// ): void; + +// export namespace usePagination { +// const pluginName = 'usePagination'; +// } + +// export type UsePaginationOptions = Partial<{ +// pageCount: number; +// manualPagination: boolean; +// autoResetPage?: boolean | undefined; +// paginateExpandedRows: boolean; +// }>; + +// export interface UsePaginationState { +// pageSize: number; +// pageIndex: number; +// } + +// export interface UsePaginationInstanceProps { +// page: Array>; +// pageCount: number; +// pageOptions: number[]; +// canPreviousPage: boolean; +// canNextPage: boolean; +// gotoPage: (updater: ((pageIndex: number) => number) | number) => void; +// previousPage: () => void; +// nextPage: () => void; +// setPageSize: (pageSize: number) => void; +// } + +// //#endregion + +// //#region useResizeColumns +// export function useResizeColumns( +// hooks: Hooks, +// ): void; + +// export namespace useResizeColumns { +// const pluginName = 'useResizeColumns'; +// } + +// export interface UseResizeColumnsOptions { +// disableResizing?: boolean | undefined; +// autoResetResize?: boolean | undefined; +// } + +// export interface UseResizeColumnsState { +// columnResizing: { +// startX?: number | undefined; +// columnWidth: number; +// headerIdWidths: Record; +// columnWidths: any; +// isResizingColumn?: string | undefined; +// }; +// } + +// export interface UseResizeColumnsColumnOptions { +// disableResizing?: boolean | undefined; +// } + +// // export interface TableResizerProps {} + +// export interface UseResizeColumnsColumnProps { +// getResizerProps: (props?: Partial) => TableResizerProps; +// canResize: boolean; +// isResizing: boolean; +// } + +// //#endregion + +// //#region useRowSelect +// export function useRowSelect( +// hooks: Hooks, +// ): void; + +// export namespace useRowSelect { +// const pluginName = 'useRowSelect'; +// } + +// export type TableToggleAllRowsSelectedProps = TableToggleCommonProps; + +// export type TableToggleRowsSelectedProps = TableToggleCommonProps; + +// export type UseRowSelectOptions = Partial<{ +// manualRowSelectedKey: IdType; +// autoResetSelectedRows: boolean; +// selectSubRows: boolean; +// }>; + +// export interface UseRowSelectHooks { +// getToggleRowSelectedProps: Array< +// PropGetter +// >; +// getToggleAllRowsSelectedProps: Array< +// PropGetter +// >; +// getToggleAllPageRowsSelectedProps: Array< +// PropGetter +// >; +// } + +// export interface UseRowSelectState { +// selectedRowIds: Record, boolean>; +// } + +// export interface UseRowSelectInstanceProps { +// toggleRowSelected: (rowId: IdType, set?: boolean) => void; +// toggleAllRowsSelected: (value?: boolean) => void; +// getToggleAllRowsSelectedProps: ( +// props?: Partial, +// ) => TableToggleAllRowsSelectedProps; +// getToggleAllPageRowsSelectedProps: ( +// props?: Partial, +// ) => TableToggleAllRowsSelectedProps; +// isAllRowsSelected: boolean; +// selectedFlatRows: Array>; +// } + +// export interface UseRowSelectRowProps { +// isSelected: boolean; +// isSomeSelected: boolean; +// toggleRowSelected: (set?: boolean) => void; +// getToggleRowSelectedProps: ( +// props?: Partial, +// ) => TableToggleRowsSelectedProps; +// } + +// //#endregion + +// //#region useRowState +// export function useRowState(hooks: Hooks): void; + +// export namespace useRowState { +// const pluginName = 'useRowState'; +// } + +// export type UseRowStateOptions = Partial<{ +// initialRowStateAccessor: (row: Row) => UseRowStateLocalState; +// getResetRowStateDeps: (instance: TableInstance) => any[]; +// autoResetRowState?: boolean | undefined; +// }>; + +// export interface UseRowStateState { +// rowState: Record }>; +// } + +// export interface UseRowStateInstanceProps { +// setRowState: (rowPath: string[], updater: UseRowUpdater) => void; +// setCellState: ( +// rowPath: string[], +// columnId: IdType, +// updater: UseRowUpdater, +// ) => void; +// } + +// export interface UseRowStateRowProps { +// state: UseRowStateLocalState; +// setState: (updater: UseRowUpdater) => void; +// } + +// export interface UseRowStateCellProps { +// state: UseRowStateLocalState; +// setState: (updater: UseRowUpdater) => void; +// } + +// export type UseRowUpdater = T | ((prev: T) => T); +// export type UseRowStateLocalState = Record< +// IdType, +// T +// >; +// //#endregion + +// //#region useSortBy +// export function useSortBy(hooks: Hooks): void; + +// export namespace useSortBy { +// const pluginName = 'useSortBy'; +// } + +// export interface TableSortByToggleProps { +// title?: string | undefined; +// style?: CSSProperties | undefined; +// onClick?: ((e: MouseEvent) => void) | undefined; +// } + +// export type UseSortByOptions = Partial<{ +// manualSortBy: boolean; +// disableSortBy: boolean; +// defaultCanSort: boolean; +// disableMultiSort: boolean; +// isMultiSortEvent: (e: MouseEvent) => boolean; +// maxMultiSortColCount: number; +// disableSortRemove: boolean; +// disabledMultiRemove: boolean; +// orderByFn: ( +// rows: Array>, +// sortFns: Array>, +// directions: boolean[], +// ) => Array>; +// sortTypes: Record>; +// autoResetSortBy?: boolean | undefined; +// }>; + +// export interface UseSortByHooks { +// getSortByToggleProps: Array>; +// } + +// export interface UseSortByState { +// sortBy: Array>; +// } + +// export type UseSortByColumnOptions = Partial<{ +// defaultCanSort: boolean; +// disableSortBy: boolean; +// sortDescFirst: boolean; +// sortInverted: boolean; +// sortType: SortByFn | DefaultSortTypes | string; +// }>; + +// export interface UseSortByInstanceProps { +// rows: Array>; +// preSortedRows: Array>; +// setSortBy: (sortBy: Array>) => void; +// toggleSortBy: ( +// columnId: IdType, +// descending?: boolean, +// isMulti?: boolean, +// ) => void; +// } + +// export interface UseSortByColumnProps { +// canSort: boolean; +// toggleSortBy: (descending?: boolean, multi?: boolean) => void; +// getSortByToggleProps: ( +// props?: Partial, +// ) => TableSortByToggleProps; +// clearSortBy: () => void; +// isSorted: boolean; +// sortedIndex: number; +// isSortedDesc: boolean | undefined; +// } + +// export type OrderByFn = ( +// rowA: Row, +// rowB: Row, +// ) => number; +// export type SortByFn = ( +// rowA: Row, +// rowB: Row, +// columnId: IdType, +// desc?: boolean, +// ) => number; + +// export type DefaultSortTypes = +// | 'alphanumeric' +// | 'datetime' +// | 'basic' +// | 'string' +// | 'number'; + +// export interface SortingRule { +// id: IdType; +// desc?: boolean | undefined; +// } + +// //#endregion + +// // Additional API +// export const actions: Record; +// export type ActionType = { type: string } & Record; +// export const defaultColumn: Partial & Record; + +// // Helpers +// export type StringKey = Extract; +// export type IdType = StringKey | string; +// export type CellValue = V; + +// export type Renderer = +// | ComponentType +// | ReactElement +// | string +// | number +// | ReactFragment; + +// export interface PluginHook { +// (hooks: Hooks): void; +// pluginName?: string | undefined; +// } + +// export type TableDispatch = (action: A) => void; + +// // utils +// export function defaultOrderByFn( +// arr: Array>, +// funcs: Array>, +// dirs: boolean[], +// ): Array>; + +// export function defaultGroupByFn( +// rows: Array>, +// columnId: IdType, +// ): Record>>; + +// export function makePropGetter(hooks: Hooks, ...meta: any[]): any; + +// export function reduceHooks( +// hooks: Hooks, +// initial: T, +// ...args: any[] +// ): T; + +// export function loopHooks(hooks: Hooks, ...args: any[]): void; + +// export function ensurePluginOrder( +// plugins: Array>, +// befores: string[], +// pluginName: string, +// ): void; + +// export function functionalUpdate( +// updater: any, +// old: Partial>, +// ): Partial>; + +// export function useGetLatest(obj: T): () => T; + +// export function safeUseLayoutEffect( +// effect: EffectCallback, +// deps?: DependencyList, +// ): void; + +// export function useMountedLayoutEffect( +// effect: EffectCallback, +// deps?: DependencyList, +// ): void; + +// export function useAsyncDebounce any>( +// defaultFn: F, +// defaultWait?: number, +// ): F; + +// export function makeRenderer( +// instance: TableInstance, +// column: ColumnInstance, +// meta?: any, +// ): ReactElement; + +// ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// + +// // Additional Types + +// export type FieldType = 'text' | 'number' | 'date' | string; + +// export type CellRendererProps = { +// /** +// * Cell HTML props passed from the Table. +// */ +// cellElementProps: TableCellProps; +// /** +// * Table specific cell props like `column`, `row`. +// */ +// cellProps: CellProps; +// /** +// * Cell's content. +// */ +// children: React.ReactNode; +// /** +// * Function that returns whether the cell is disabled. +// */ +// isDisabled?: (rowData: D) => boolean; +// }; +// } From f250ba8fc583326df1cd1e644c2a8f6020f0dcd0 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Wed, 23 Aug 2023 16:45:18 -0400 Subject: [PATCH 034/196] Removed dep on types/react-table --- packages/itwinui-react/package.json | 1 - packages/itwinui-react/src/index.ts | 4 +- .../src/types/base-react-table-config.d.ts | 928 ------------ .../index.d.ts => react-table-types.d.ts} | 0 .../src/types/react-table/LICENSE | 21 - .../src/types/react-table/README.md | 16 - .../react-table/old-not-working-index.d.ts | 1317 ----------------- .../src/types/react-table/package.json | 42 - yarn.lock | 5 - 9 files changed, 2 insertions(+), 2332 deletions(-) delete mode 100644 packages/itwinui-react/src/types/base-react-table-config.d.ts rename packages/itwinui-react/src/types/{react-table/index.d.ts => react-table-types.d.ts} (100%) delete mode 100644 packages/itwinui-react/src/types/react-table/LICENSE delete mode 100644 packages/itwinui-react/src/types/react-table/README.md delete mode 100644 packages/itwinui-react/src/types/react-table/old-not-working-index.d.ts delete mode 100644 packages/itwinui-react/src/types/react-table/package.json diff --git a/packages/itwinui-react/package.json b/packages/itwinui-react/package.json index 898621d9005..b9a68a87e9b 100644 --- a/packages/itwinui-react/package.json +++ b/packages/itwinui-react/package.json @@ -75,7 +75,6 @@ "dependencies": { "@floating-ui/react": "^0.24.3", "@tippyjs/react": "^4.2.6", - "@types/react-table": "file:./src/types/react-table", "classnames": "^2.2.6", "react-table": "^7.1.0", "react-transition-group": "^4.4.2", diff --git a/packages/itwinui-react/src/index.ts b/packages/itwinui-react/src/index.ts index 138c23ebe91..34c3af2c790 100644 --- a/packages/itwinui-react/src/index.ts +++ b/packages/itwinui-react/src/index.ts @@ -3,5 +3,5 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ export * from './core/index.js'; -export * from './types/react-table-config.js'; -export * from './types/react-table/index.js'; +// export * from './types/react-table-config.js'; +export * from './types/react-table-types.js'; diff --git a/packages/itwinui-react/src/types/base-react-table-config.d.ts b/packages/itwinui-react/src/types/base-react-table-config.d.ts deleted file mode 100644 index b1871a4734c..00000000000 --- a/packages/itwinui-react/src/types/base-react-table-config.d.ts +++ /dev/null @@ -1,928 +0,0 @@ -/*--------------------------------------------------------------------------------------------- - * Copyright (c) Bentley Systems, Incorporated. All rights reserved. - * See LICENSE.md in the project root for license terms and full copyright notice. - *--------------------------------------------------------------------------------------------*/ -// // Type definitions for react-table 7.7 -// // Project: https://github.com/tannerlinsley/react-table -// // Definitions by: Guy Gascoigne-Piggford , -// // Michael Stramel -// // Rohit Garg -// // Jason Clark -// // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped -// // TypeScript Version: 3.5 -// // reflects react-table@7.7.0 - -// // tslint:disable:no-empty-interface -// // no-empty-interface is disabled to allow easy extension with declaration merging - -// // tslint:disable:no-unnecessary-generics -// // no-unnecessary-generics is disabled because many of these definitions are either used in a generic -// // context or the signatures are required to match for declaration merging - -// // The changelog for the important changes is located in the Readme.md - -// import { -// ChangeEvent, -// ComponentType, -// CSSProperties, -// DependencyList, -// EffectCallback, -// MouseEvent, -// ReactElement, -// ReactFragment, -// ReactNode, -// } from 'react'; - -// export {}; - -// /** -// * The empty definitions of below provides a base definition for the parts used by useTable, that can then be extended in the users code. -// * -// * @example -// * export interface TableOptions -// * extends -// * UseExpandedOptions, -// * UseFiltersOptions {} -// * see https://gist.github.com/ggascoigne/646e14c9d54258e40588a13aabf0102d for more details -// */ -// export interface TableOptions extends UseTableOptions {} - -// export interface TableInstance -// extends Omit, 'columns' | 'pageCount'>, -// UseTableInstanceProps {} - -// export interface TableState { -// hiddenColumns?: Array> | undefined; -// } - -// export interface Hooks extends UseTableHooks {} - -// export interface Cell extends UseTableCellProps {} - -// export interface ColumnInterface extends UseTableColumnOptions {} - -// export interface ColumnInterfaceBasedOnValue { -// Cell?: Renderer> | undefined; -// } - -// export interface ColumnGroupInterface { -// columns: Array>; -// } - -// export type ColumnGroup = -// & ColumnInterface -// & ColumnGroupInterface -// & ( -// | { Header: string; } -// | ({ id: IdType; } & { -// Header: Renderer>; -// }) -// ) -// // Not used, but needed for backwards compatibility -// & { accessor?: Accessor | undefined; }; - -// type ValueOf = T[keyof T]; - -// // The accessors like `foo.bar` are not supported, use functions instead -// export type ColumnWithStrictAccessor = -// & ColumnInterface -// & ValueOf<{ -// [K in keyof D]: { -// accessor: K; -// } & ColumnInterfaceBasedOnValue; -// }>; - -// export type ColumnWithLooseAccessor = -// & ColumnInterface -// & ColumnInterfaceBasedOnValue -// & ( -// | { Header: string } -// | { id: IdType } -// | { accessor: keyof D extends never ? IdType : never } -// ) -// & { accessor?: (keyof D extends never ? IdType | Accessor : Accessor) | undefined; }; - -// export type Column = -// | ColumnGroup -// | ColumnWithLooseAccessor -// | ColumnWithStrictAccessor; - -// export interface ColumnInstance -// extends Omit, 'id'>, -// ColumnInterfaceBasedOnValue, -// UseTableColumnProps {} - -// export interface HeaderGroup extends ColumnInstance, UseTableHeaderGroupProps {} - -// export interface Row extends UseTableRowProps {} - -// export interface TableCommonProps { -// style?: CSSProperties | undefined; -// className?: string | undefined; -// role?: string | undefined; -// } - -// export interface TableProps extends TableCommonProps {} - -// export interface TableBodyProps extends TableCommonProps {} - -// export interface TableKeyedProps extends TableCommonProps { -// key: React.Key; -// } - -// export interface TableHeaderGroupProps extends TableKeyedProps {} - -// export interface TableFooterGroupProps extends TableKeyedProps {} - -// export interface TableHeaderProps extends TableKeyedProps {} - -// export interface TableFooterProps extends TableKeyedProps {} - -// export interface TableRowProps extends TableKeyedProps {} - -// export interface TableCellProps extends TableKeyedProps {} - -// export interface TableToggleCommonProps extends TableCommonProps { -// onChange?: ((e: ChangeEvent) => void) | undefined; -// checked?: boolean | undefined; -// title?: string | undefined; -// indeterminate?: boolean | undefined; -// } - -// export interface MetaBase { -// instance: TableInstance; -// userProps: any; -// } - -// // inspired by ExtendState in https://github.com/reduxjs/redux/blob/master/src/types/store.ts -// export type Meta> = [Extension] extends [never] -// ? M -// : M & Extension; - -// //#region useTable -// export function useTable( -// options: TableOptions, -// ...plugins: Array> -// ): TableInstance; - -// /** -// * NOTE: To use custom options, use "Interface Merging" to add the custom options -// */ -// export type UseTableOptions = { -// columns: ReadonlyArray>; -// data: readonly D[]; -// } & Partial<{ -// initialState: Partial>; -// stateReducer: (newState: TableState, action: ActionType, previousState: TableState, instance?: TableInstance) => TableState; -// useControlledState: (state: TableState, meta: Meta) => TableState; -// defaultColumn: Partial>; -// getSubRows: (originalRow: D, relativeIndex: number) => D[]; -// getRowId: (originalRow: D, relativeIndex: number, parent?: Row) => string; -// autoResetHiddenColumns: boolean; -// }>; - -// export type PropGetter> = -// | ((props: P, meta: Meta) => P | P[]) -// | P -// | P[]; - -// export type TablePropGetter = PropGetter; - -// export type TableBodyPropGetter = PropGetter; - -// export type HeaderPropGetter = PropGetter }>; - -// export type FooterGroupPropGetter = PropGetter }>; - -// export type HeaderGroupPropGetter = PropGetter }>; - -// export type FooterPropGetter = PropGetter }>; - -// export type RowPropGetter = PropGetter }>; - -// export type CellPropGetter = PropGetter }>; - -// export interface ReducerTableState extends TableState, Record {} - -// export interface UseTableHooks extends Record { -// useOptions: Array<(options: TableOptions, args: TableOptions) => TableOptions>; -// stateReducers: Array< -// ( -// newState: TableState, -// action: ActionType, -// previousState?: TableState, -// instance?: TableInstance, -// ) => ReducerTableState | undefined -// >; -// columns: Array<(columns: Array>, meta: Meta) => Array>>; -// columnsDeps: Array<(deps: any[], meta: Meta) => any[]>; -// allColumns: Array<(allColumns: Array>, meta: Meta) => Array>>; -// allColumnsDeps: Array<(deps: any[], meta: Meta) => any[]>; -// visibleColumns: Array<(allColumns: Array>, meta: Meta) => Array>>; -// visibleColumnsDeps: Array<(deps: any[], meta: Meta) => any[]>; -// headerGroups: Array<(allColumns: Array>, meta: Meta) => Array>>; -// headerGroupsDeps: Array<(deps: any[], meta: Meta) => any[]>; -// useInstanceBeforeDimensions: Array<(instance: TableInstance) => void>; -// useInstance: Array<(instance: TableInstance) => void>; -// prepareRow: Array<(row: Row, meta: Meta) => void>; -// useControlledState: Array<(state: TableState, meta: Meta) => TableState>; - -// getTableProps: Array>; -// getTableBodyProps: Array>; -// getHeaderGroupProps: Array>; -// getFooterGroupProps: Array>; -// getHeaderProps: Array>; -// getFooterProps: Array>; -// getRowProps: Array>; -// getCellProps: Array>; -// useFinalInstance: Array<(instance: TableInstance) => void>; -// } - -// export interface UseTableColumnOptions { -// id?: IdType | undefined; -// Header?: Renderer> | undefined; -// Footer?: Renderer> | undefined; -// width?: number | string | undefined; -// minWidth?: number | undefined; -// maxWidth?: number | undefined; -// } - -// type UpdateHiddenColumns = (oldHidden: Array>) => Array>; - -// export interface TableToggleHideAllColumnProps extends TableToggleCommonProps {} - -// export interface UseTableInstanceProps { -// state: TableState; -// plugins: Array>; -// dispatch: TableDispatch; -// columns: Array>; -// allColumns: Array>; -// visibleColumns: Array>; -// headerGroups: Array>; -// footerGroups: Array>; -// headers: Array>; -// flatHeaders: Array>; -// rows: Array>; -// rowsById: Record>; -// getTableProps: (propGetter?: TablePropGetter) => TableProps; -// getTableBodyProps: (propGetter?: TableBodyPropGetter) => TableBodyProps; -// prepareRow: (row: Row) => void; -// flatRows: Array>; -// totalColumnsWidth: number; -// allColumnsHidden: boolean; -// toggleHideColumn: (columnId: IdType, value?: boolean) => void; -// setHiddenColumns: (param: Array> | UpdateHiddenColumns) => void; -// toggleHideAllColumns: (value?: boolean) => void; -// getToggleHideAllColumnsProps: (props?: Partial) => TableToggleHideAllColumnProps; -// getHooks: () => Hooks; -// } - -// export interface UseTableHeaderGroupProps { -// headers: Array>; -// getHeaderGroupProps: (propGetter?: HeaderGroupPropGetter) => TableHeaderProps; -// getFooterGroupProps: (propGetter?: FooterGroupPropGetter) => TableFooterProps; -// totalHeaderCount: number; // not documented -// } - -// export interface UseTableColumnProps { -// id: IdType; -// columns?: Array> | undefined; -// isVisible: boolean; -// render: (type: 'Header' | 'Footer' | string, props?: object) => ReactNode; -// totalLeft: number; -// totalWidth: number; -// getHeaderProps: (propGetter?: HeaderPropGetter) => TableHeaderProps; -// getFooterProps: (propGetter?: FooterPropGetter) => TableFooterProps; -// toggleHidden: (value?: boolean) => void; -// parent?: ColumnInstance | undefined; // not documented -// getToggleHiddenProps: (userProps?: any) => any; -// depth: number; // not documented -// placeholderOf?: ColumnInstance | undefined; -// } - -// export interface UseTableRowProps { -// cells: Array>; -// allCells: Array>; -// values: Record, CellValue>; -// getRowProps: (propGetter?: RowPropGetter) => TableRowProps; -// index: number; -// original: D; -// id: string; -// subRows: Array>; -// } - -// export interface UseTableCellProps { -// column: ColumnInstance; -// row: Row; -// value: CellValue; -// getCellProps: (propGetter?: CellPropGetter) => TableCellProps; -// render: (type: 'Cell' | string, userProps?: object) => ReactNode; -// } - -// export type HeaderProps = TableInstance & { -// column: ColumnInstance; -// }; - -// export type FooterProps = TableInstance & { -// column: ColumnInstance; -// }; - -// export type CellProps = TableInstance & { -// column: ColumnInstance; -// row: Row; -// cell: Cell; -// value: CellValue; -// }; - -// export type Accessor = ( -// originalRow: D, -// index: number, -// sub: { -// subRows: D[]; -// depth: number; -// data: D[]; -// }, -// ) => CellValue; - -// //#endregion - -// // Plugins - -// //#region useAbsoluteLayout -// export function useAbsoluteLayout(hooks: Hooks): void; - -// export namespace useAbsoluteLayout { -// const pluginName = 'useAbsoluteLayout'; -// } -// //#endregion - -// //#region useBlockLayout -// export function useBlockLayout(hooks: Hooks): void; - -// export namespace useBlockLayout { -// const pluginName = 'useBlockLayout'; -// } -// //#endregion - -// //#region useColumnOrder -// export function useColumnOrder(hooks: Hooks): void; - -// export namespace useColumnOrder { -// const pluginName = 'useColumnOrder'; -// } - -// export interface UseColumnOrderState { -// columnOrder: Array>; -// } - -// export interface UseColumnOrderInstanceProps { -// setColumnOrder: (updater: ((columnOrder: Array>) => Array>) | Array>) => void; -// } - -// //#endregion - -// //#region useExpanded -// export function useExpanded(hooks: Hooks): void; - -// export namespace useExpanded { -// const pluginName = 'useExpanded'; -// } - -// export interface TableExpandedToggleProps extends TableKeyedProps {} - -// export type UseExpandedOptions = Partial<{ -// manualExpandedKey: IdType; -// paginateExpandedRows: boolean; -// expandSubRows: boolean; -// autoResetExpanded?: boolean | undefined; -// }>; - -// export interface UseExpandedHooks { -// getToggleRowsExpandedProps: Array>; -// getToggleAllRowsExpandedProps: Array>; -// } - -// export interface UseExpandedState { -// expanded: Record, boolean>; -// } - -// export interface UseExpandedInstanceProps { -// preExpandedRows: Array>; -// expandedRows: Array>; -// rows: Array>; -// expandedDepth: number; -// isAllRowsExpanded: boolean; -// toggleRowExpanded: (id: Array>, value?: boolean) => void; -// toggleAllRowsExpanded: (value?: boolean) => void; -// } - -// export interface UseExpandedRowProps { -// isExpanded: boolean; -// canExpand: boolean; -// subRows: Array>; -// toggleRowExpanded: (value?: boolean) => void; -// getToggleRowExpandedProps: (props?: Partial) => TableExpandedToggleProps; -// depth: number; -// } - -// //#endregion - -// //#region useFilters -// export function useFilters(hooks: Hooks): void; - -// export namespace useFilters { -// const pluginName = 'useFilters'; -// } - -// export type UseFiltersOptions = Partial<{ -// manualFilters: boolean; -// disableFilters: boolean; -// defaultCanFilter: boolean; -// filterTypes: FilterTypes; -// autoResetFilters?: boolean | undefined; -// }>; - -// export interface UseFiltersState { -// filters: Filters; -// } - -// export type UseFiltersColumnOptions = Partial<{ -// Filter: Renderer>; -// disableFilters: boolean; -// defaultCanFilter: boolean; -// filter: FilterType | DefaultFilterTypes | string; -// }>; - -// export interface UseFiltersInstanceProps { -// preFilteredRows: Array>; -// preFilteredFlatRows: Array>; -// preFilteredRowsById: Record>; -// filteredRows: Array>; -// filteredFlatRows: Array>; -// filteredRowsById: Record>; -// rows: Array>; -// flatRows: Array>; -// rowsById: Record>; -// setFilter: (columnId: IdType, updater: ((filterValue: FilterValue) => FilterValue) | FilterValue) => void; -// setAllFilters: (updater: Filters | ((filters: Filters) => Filters)) => void; -// } - -// export interface UseFiltersColumnProps { -// canFilter: boolean; -// setFilter: (updater: ((filterValue: FilterValue) => FilterValue) | FilterValue) => void; -// filterValue: FilterValue; -// preFilteredRows: Array>; -// filteredRows: Array>; -// } - -// export type FilterProps = HeaderProps; -// export type FilterValue = any; -// export type Filters = Array<{ id: IdType; value: FilterValue }>; -// export type FilterTypes = Record>; - -// export type DefaultFilterTypes = -// | 'text' -// | 'exactText' -// | 'exactTextCase' -// | 'includes' -// | 'includesAll' -// | 'exact' -// | 'equals' -// | 'between'; - -// export interface FilterType { -// (rows: Array>, columnIds: Array>, filterValue: FilterValue): Array>; - -// autoRemove?: ((filterValue: FilterValue) => boolean) | undefined; -// } - -// //#endregion - -// //#region useFlexLayout -// export function useFlexLayout(hooks: Hooks): void; - -// export namespace useFlexLayout { -// const pluginName = 'useFlexLayout'; -// } -// //#endregion - -// //#region useGridLayout -// export function useGridLayout(hooks: Hooks): void; - -// export namespace useGridLayout { -// const pluginName = 'useGridLayout'; -// } -// //#endregion - -// //#region useGlobalFilter -// export function useGlobalFilter(hooks: Hooks): void; - -// export namespace useGlobalFilter { -// const pluginName = 'useGlobalFilter'; -// } - -// export type UseGlobalFiltersOptions = Partial<{ -// globalFilter: ((rows: Array>, columnIds: Array>, filterValue: any) => Array>) | string; -// manualGlobalFilter: boolean; -// filterTypes: FilterTypes; -// autoResetGlobalFilter?: boolean | undefined; -// disableGlobalFilter?: boolean | undefined; -// }>; - -// export interface UseGlobalFiltersState { -// globalFilter: any; -// } - -// export type UseGlobalFiltersColumnOptions = Partial<{ -// disableGlobalFilter?: boolean | undefined; -// }>; - -// export interface UseGlobalFiltersInstanceProps { -// preGlobalFilteredRows: Array>; -// preGlobalFilteredFlatRows: Array>; -// preGlobalFilteredRowsById: Record>; -// globalFilteredRows: Array>; -// globalFilteredFlatRows: Array>; -// globalFilteredRowsById: Record>; -// rows: Array>; -// flatRows: Array>; -// rowsById: Record>; -// setGlobalFilter: (filterValue: FilterValue) => void; -// } - -// //#endregion - -// //#region useGroupBy -// export function useGroupBy(hooks: Hooks): void; - -// export namespace useGroupBy { -// const pluginName = 'useGroupBy'; -// } - -// export interface TableGroupByToggleProps { -// title?: string | undefined; -// style?: CSSProperties | undefined; -// onClick?: ((e: MouseEvent) => void) | undefined; -// } - -// export type UseGroupByOptions = Partial<{ -// manualGroupBy: boolean; -// disableGroupBy: boolean; -// defaultCanGroupBy: boolean; -// aggregations: Record>; -// groupByFn: (rows: Array>, columnId: IdType) => Record>>; -// autoResetGroupBy?: boolean | undefined; -// }>; - -// export interface UseGroupByHooks { -// getGroupByToggleProps: Array>; -// } - -// export interface UseGroupByState { -// groupBy: Array>; -// } - -// export type UseGroupByColumnOptions = Partial<{ -// aggregate: Aggregator; -// Aggregated: Renderer>; -// disableGroupBy: boolean; -// defaultCanGroupBy: boolean; -// }>; - -// export interface UseGroupByInstanceProps { -// preGroupedRows: Array>; -// preGroupedFlatRows: Array>; -// preGroupedRowsById: Record>; -// groupedRows: Array>; -// groupedFlatRows: Array>; -// groupedRowsById: Record>; -// onlyGroupedFlatRows: Array>; -// onlyGroupedRowsById: Record>; -// nonGroupedFlatRows: Array>; -// nonGroupedRowsById: Record>; -// rows: Array>; -// flatRows: Array>; -// rowsById: Record>; -// toggleGroupBy: (columnId: IdType, value?: boolean) => void; -// } - -// export interface UseGroupByColumnProps { -// canGroupBy: boolean; -// isGrouped: boolean; -// groupedIndex: number; -// toggleGroupBy: () => void; -// getGroupByToggleProps: (props?: Partial) => TableGroupByToggleProps; -// } - -// export interface UseGroupByRowProps { -// isGrouped: boolean; -// groupByID: IdType; -// groupByVal: string; -// values: Record, AggregatedValue>; -// subRows: Array>; -// leafRows: Array>; -// depth: number; -// id: string; -// index: number; -// } - -// export interface UseGroupByCellProps { -// isGrouped: boolean; -// isPlaceholder: boolean; -// isAggregated: boolean; -// } - -// export type DefaultAggregators = 'sum' | 'average' | 'median' | 'uniqueCount' | 'count'; - -// export type AggregatorFn = ( -// columnValues: CellValue[], -// rows: Array>, -// isAggregated: boolean, -// ) => AggregatedValue; -// export type Aggregator = AggregatorFn | DefaultAggregators | string; -// export type AggregatedValue = any; -// //#endregion - -// //#region usePagination -// export function usePagination(hooks: Hooks): void; - -// export namespace usePagination { -// const pluginName = 'usePagination'; -// } - -// export type UsePaginationOptions = Partial<{ -// pageCount: number; -// manualPagination: boolean; -// autoResetPage?: boolean | undefined; -// paginateExpandedRows: boolean; -// }>; - -// export interface UsePaginationState { -// pageSize: number; -// pageIndex: number; -// } - -// export interface UsePaginationInstanceProps { -// page: Array>; -// pageCount: number; -// pageOptions: number[]; -// canPreviousPage: boolean; -// canNextPage: boolean; -// gotoPage: (updater: ((pageIndex: number) => number) | number) => void; -// previousPage: () => void; -// nextPage: () => void; -// setPageSize: (pageSize: number) => void; -// } - -// //#endregion - -// //#region useResizeColumns -// export function useResizeColumns(hooks: Hooks): void; - -// export namespace useResizeColumns { -// const pluginName = 'useResizeColumns'; -// } - -// export interface UseResizeColumnsOptions { -// disableResizing?: boolean | undefined; -// autoResetResize?: boolean | undefined; -// } - -// export interface UseResizeColumnsState { -// columnResizing: { -// startX?: number | undefined; -// columnWidth: number; -// headerIdWidths: Record; -// columnWidths: any; -// isResizingColumn?: string | undefined; -// }; -// } - -// export interface UseResizeColumnsColumnOptions { -// disableResizing?: boolean | undefined; -// } - -// export interface TableResizerProps {} - -// export interface UseResizeColumnsColumnProps { -// getResizerProps: (props?: Partial) => TableResizerProps; -// canResize: boolean; -// isResizing: boolean; -// } - -// //#endregion - -// //#region useRowSelect -// export function useRowSelect(hooks: Hooks): void; - -// export namespace useRowSelect { -// const pluginName = 'useRowSelect'; -// } - -// export interface TableToggleAllRowsSelectedProps extends TableToggleCommonProps {} - -// export interface TableToggleRowsSelectedProps extends TableToggleCommonProps {} - -// export type UseRowSelectOptions = Partial<{ -// manualRowSelectedKey: IdType; -// autoResetSelectedRows: boolean; -// selectSubRows: boolean; -// }>; - -// export interface UseRowSelectHooks { -// getToggleRowSelectedProps: Array>; -// getToggleAllRowsSelectedProps: Array>; -// getToggleAllPageRowsSelectedProps: Array>; -// } - -// export interface UseRowSelectState { -// selectedRowIds: Record, boolean>; -// } - -// export interface UseRowSelectInstanceProps { -// toggleRowSelected: (rowId: IdType, set?: boolean) => void; -// toggleAllRowsSelected: (value?: boolean) => void; -// getToggleAllRowsSelectedProps: ( -// props?: Partial, -// ) => TableToggleAllRowsSelectedProps; -// getToggleAllPageRowsSelectedProps: ( -// props?: Partial, -// ) => TableToggleAllRowsSelectedProps; -// isAllRowsSelected: boolean; -// selectedFlatRows: Array>; -// } - -// export interface UseRowSelectRowProps { -// isSelected: boolean; -// isSomeSelected: boolean; -// toggleRowSelected: (set?: boolean) => void; -// getToggleRowSelectedProps: (props?: Partial) => TableToggleRowsSelectedProps; -// } - -// //#endregion - -// //#region useRowState -// export function useRowState(hooks: Hooks): void; - -// export namespace useRowState { -// const pluginName = 'useRowState'; -// } - -// export type UseRowStateOptions = Partial<{ -// initialRowStateAccessor: (row: Row) => UseRowStateLocalState; -// getResetRowStateDeps: (instance: TableInstance) => any[]; -// autoResetRowState?: boolean | undefined; -// }>; - -// export interface UseRowStateState { -// rowState: Record }>; -// } - -// export interface UseRowStateInstanceProps { -// setRowState: (rowPath: string[], updater: UseRowUpdater) => void; -// setCellState: (rowPath: string[], columnId: IdType, updater: UseRowUpdater) => void; -// } - -// export interface UseRowStateRowProps { -// state: UseRowStateLocalState; -// setState: (updater: UseRowUpdater) => void; -// } - -// export interface UseRowStateCellProps { -// state: UseRowStateLocalState; -// setState: (updater: UseRowUpdater) => void; -// } - -// export type UseRowUpdater = T | ((prev: T) => T); -// export type UseRowStateLocalState = Record, T>; -// //#endregion - -// //#region useSortBy -// export function useSortBy(hooks: Hooks): void; - -// export namespace useSortBy { -// const pluginName = 'useSortBy'; -// } - -// export interface TableSortByToggleProps { -// title?: string | undefined; -// style?: CSSProperties | undefined; -// onClick?: ((e: MouseEvent) => void)| undefined; -// } - -// export type UseSortByOptions = Partial<{ -// manualSortBy: boolean; -// disableSortBy: boolean; -// defaultCanSort: boolean; -// disableMultiSort: boolean; -// isMultiSortEvent: (e: MouseEvent) => boolean; -// maxMultiSortColCount: number; -// disableSortRemove: boolean; -// disabledMultiRemove: boolean; -// orderByFn: (rows: Array>, sortFns: Array>, directions: boolean[]) => Array>; -// sortTypes: Record>; -// autoResetSortBy?: boolean | undefined; -// }>; - -// export interface UseSortByHooks { -// getSortByToggleProps: Array>; -// } - -// export interface UseSortByState { -// sortBy: Array>; -// } - -// export type UseSortByColumnOptions = Partial<{ -// defaultCanSort: boolean; -// disableSortBy: boolean; -// sortDescFirst: boolean; -// sortInverted: boolean; -// sortType: SortByFn | DefaultSortTypes | string; -// }>; - -// export interface UseSortByInstanceProps { -// rows: Array>; -// preSortedRows: Array>; -// setSortBy: (sortBy: Array>) => void; -// toggleSortBy: (columnId: IdType, descending?: boolean, isMulti?: boolean) => void; -// } - -// export interface UseSortByColumnProps { -// canSort: boolean; -// toggleSortBy: (descending?: boolean, multi?: boolean) => void; -// getSortByToggleProps: (props?: Partial) => TableSortByToggleProps; -// clearSortBy: () => void; -// isSorted: boolean; -// sortedIndex: number; -// isSortedDesc: boolean | undefined; -// } - -// export type OrderByFn = (rowA: Row, rowB: Row) => number; -// export type SortByFn = (rowA: Row, rowB: Row, columnId: IdType, desc?: boolean) => number; - -// export type DefaultSortTypes = 'alphanumeric' | 'datetime' | 'basic' | 'string' | 'number'; - -// export interface SortingRule { -// id: IdType; -// desc?: boolean | undefined; -// } - -// //#endregion - -// // Additional API -// export const actions: Record; -// export type ActionType = { type: string } & Record; -// export const defaultColumn: Partial & Record; - -// // Helpers -// export type StringKey = Extract; -// export type IdType = StringKey | string; -// export type CellValue = V; - -// export type Renderer = ComponentType | ReactElement | string | number | ReactFragment; - -// export interface PluginHook { -// (hooks: Hooks): void; -// pluginName?: string | undefined; -// } - -// export type TableDispatch = (action: A) => void; - -// // utils -// export function defaultOrderByFn( -// arr: Array>, -// funcs: Array>, -// dirs: boolean[], -// ): Array>; - -// export function defaultGroupByFn( -// rows: Array>, -// columnId: IdType, -// ): Record>>; - -// export function makePropGetter(hooks: Hooks, ...meta: any[]): any; - -// export function reduceHooks(hooks: Hooks, initial: T, ...args: any[]): T; - -// export function loopHooks(hooks: Hooks, ...args: any[]): void; - -// export function ensurePluginOrder( -// plugins: Array>, -// befores: string[], -// pluginName: string, -// ): void; - -// export function functionalUpdate( -// updater: any, -// old: Partial>, -// ): Partial>; - -// export function useGetLatest(obj: T): () => T; - -// export function safeUseLayoutEffect(effect: EffectCallback, deps?: DependencyList): void; - -// export function useMountedLayoutEffect(effect: EffectCallback, deps?: DependencyList): void; - -// export function useAsyncDebounce any>(defaultFn: F, defaultWait?: number): F; - -// export function makeRenderer(instance: TableInstance, column: ColumnInstance, meta?: any): ReactElement; diff --git a/packages/itwinui-react/src/types/react-table/index.d.ts b/packages/itwinui-react/src/types/react-table-types.d.ts similarity index 100% rename from packages/itwinui-react/src/types/react-table/index.d.ts rename to packages/itwinui-react/src/types/react-table-types.d.ts diff --git a/packages/itwinui-react/src/types/react-table/LICENSE b/packages/itwinui-react/src/types/react-table/LICENSE deleted file mode 100644 index 9e841e7a26e..00000000000 --- a/packages/itwinui-react/src/types/react-table/LICENSE +++ /dev/null @@ -1,21 +0,0 @@ - MIT License - - Copyright (c) Microsoft Corporation. - - Permission is hereby granted, free of charge, to any person obtaining a copy - of this software and associated documentation files (the "Software"), to deal - in the Software without restriction, including without limitation the rights - to use, copy, modify, merge, publish, distribute, sublicense, and/or sell - copies of the Software, and to permit persons to whom the Software is - furnished to do so, subject to the following conditions: - - The above copyright notice and this permission notice shall be included in all - copies or substantial portions of the Software. - - THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR - IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, - FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE - AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER - LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, - OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE - SOFTWARE diff --git a/packages/itwinui-react/src/types/react-table/README.md b/packages/itwinui-react/src/types/react-table/README.md deleted file mode 100644 index 5ca79e9d73d..00000000000 --- a/packages/itwinui-react/src/types/react-table/README.md +++ /dev/null @@ -1,16 +0,0 @@ -# Installation -> `npm install --save @types/react-table` - -# Summary -This package contains type definitions for react-table (https://github.com/tannerlinsley/react-table). - -# Details -Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-table. - -### Additional Details - * Last updated: Wed, 11 May 2022 16:01:37 GMT - * Dependencies: [@types/react](https://npmjs.com/package/@types/react) - * Global values: none - -# Credits -These definitions were written by [Guy Gascoigne-Piggford](https://github.com/ggascoigne), [Michael Stramel](https://github.com/stramel), [Rohit Garg](https://github.com/gargroh), and [Jason Clark](https://github.com/riceboyler). diff --git a/packages/itwinui-react/src/types/react-table/old-not-working-index.d.ts b/packages/itwinui-react/src/types/react-table/old-not-working-index.d.ts deleted file mode 100644 index 7b97e3f7d93..00000000000 --- a/packages/itwinui-react/src/types/react-table/old-not-working-index.d.ts +++ /dev/null @@ -1,1317 +0,0 @@ -// /*--------------------------------------------------------------------------------------------- -// * Copyright (c) Bentley Systems, Incorporated. All rights reserved. -// * See LICENSE.md in the project root for license terms and full copyright notice. -// *--------------------------------------------------------------------------------------------*/ -// // Type definitions for react-table 7.7 -// // Project: https://github.com/tannerlinsley/react-table -// // Definitions by: Guy Gascoigne-Piggford , -// // Michael Stramel -// // Rohit Garg -// // Jason Clark -// // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped -// // TypeScript Version: 3.5 -// // reflects react-table@7.7.0 - -// // tslint:disable:no-empty-interface -// // no-empty-interface is disabled to allow easy extension with declaration merging - -// // tslint:disable:no-unnecessary-generics -// // no-unnecessary-generics is disabled because many of these definitions are either used in a generic -// // context or the signatures are required to match for declaration merging - -// // The changelog for the important changes is located in the Readme.md - -// import { -// ChangeEvent, -// ComponentType, -// CSSProperties, -// DependencyList, -// EffectCallback, -// MouseEvent, -// ReactElement, -// ReactFragment, -// ReactNode, -// } from 'react'; - -// export const TESTING = 'TESTING'; - -// declare module 'react-table' { -// export {}; - -// /** -// * The empty definitions of below provides a base definition for the parts used by useTable, that can then be extended in the users code. -// * -// * @example -// * export interface TableOptions -// * extends -// * UseExpandedOptions, -// * UseFiltersOptions {} -// * see https://gist.github.com/ggascoigne/646e14c9d54258e40588a13aabf0102d for more details -// */ -// export interface TableOptions -// extends Omit, 'data' | 'columns'>, -// UseRowSelectOptions, -// UseExpandedOptions, -// UseFiltersOptions, -// // UseGroupByOptions, -// UsePaginationOptions, -// UseGlobalFiltersOptions, -// UseGlobalFiltersColumnOptions, -// Omit, 'disableResizing'>, -// // UseRowStateOptions, -// UseSortByOptions { -// /** -// * List of columns. -// * -// * Should not have a top-level `Header` or a `columns` sub-property. They are only allowed to be passed for backwards compatibility. -// * See [migration guide](https://github.com/iTwin/iTwinUI/wiki/iTwinUI-react-v2-migration-guide#breaking-changes). -// */ -// columns: Array>; -// /** -// * Table data list. -// * Must be memoized. -// * -// * Supports expandable sub-rows using the `subRows` field in data entries. -// * If some rows don't have sub-data, it is recommended to pass an empty array to `subRows` for consistent spacing. -// */ -// data: D[]; -// /** -// * Column's resize mode. -// * - `fit` - when resizing it affects current and the next column, -// * e.g. when increasing width of current column, next column's width will decrease. -// * - `expand` - when resizing it affects only the current column, -// * e.g. when increasing width of the current column, next column's width remains the same. -// * @default 'fit' -// */ -// columnResizeMode?: 'fit' | 'expand'; -// } - -// export interface TableInstance -// extends Omit, 'columns' | 'pageCount'>, -// UseTableInstanceProps, -// UseColumnOrderInstanceProps, -// UseExpandedInstanceProps, -// UseFiltersInstanceProps, -// UseGlobalFiltersInstanceProps, -// UseGroupByInstanceProps, -// UsePaginationInstanceProps, -// UseRowSelectInstanceProps, -// UseRowStateInstanceProps, -// UseSortByInstanceProps { -// initialRows: Row[]; -// columnResizeMode: TableOptions['columnResizeMode']; -// tableWidth: number; -// } - -// export interface TableState -// extends UseColumnOrderState, -// UseExpandedState, -// UseFiltersState, -// UseGlobalFiltersState, -// UseGroupByState, -// UsePaginationState, -// UseRowSelectState, -// UseRowStateState, -// UseSortByState { -// hiddenColumns?: Array> | undefined; -// columnResizing: { -// startX?: number; -// columnWidth?: number; -// nextColumnWidth?: number; -// headerIdWidths?: Array<[string, number]>; -// nextHeaderIdWidths?: Array<[string, number]>; -// columnWidths: Record; -// isResizingColumn?: string; -// }; -// isTableResizing?: boolean; -// columnReorderStartIndex: number; -// sticky: { -// isScrolledToRight?: boolean; -// isScrolledToLeft?: boolean; -// }; -// lastSelectedRowId?: string; -// } - -// export interface Hooks -// extends UseTableHooks, -// UseExpandedHooks, -// UseGroupByHooks, -// UseRowSelectHooks, -// UseSortByHooks {} - -// export interface Cell -// extends UseTableCellProps, -// UseGroupByCellProps, -// UseRowStateCellProps {} - -// export interface ColumnInterface -// extends UseTableColumnOptions, -// UseSortByColumnOptions, -// UseFiltersColumnOptions, -// UseResizeColumnsColumnOptions, -// UseGlobalFiltersColumnOptions { -// /** -// * Custom class name applied to header column cell. -// */ -// columnClassName?: string; -// /** -// * Custom class name applied to each column's cell. -// */ -// cellClassName?: string; -// /** -// * Type of the data in cell. Used for manual filtering. -// */ -// fieldType?: FieldType; -// /** -// * Filter component used as a column filter. Should use filters from `tableFilters`. -// */ -// Filter?: Renderer> | Renderer>; -// /** -// * String value or custom function to use for filtering. -// * Possible string values: `text`, `exactText`, `exactTextCase`, `includes`, `includesAll`, `exact`, `equals`, `between`. -// * More info about these filters: https://github.com/tannerlinsley/react-table/blob/master/src/filterTypes.js -// */ -// filter?: FilterType | DefaultFilterTypes | string; -// /** -// * Function that should return whole cell element not only the content. -// * Must be memoized. -// * @example -// * { -// * Header: 'Name', -// * accessor: 'name', -// * cellRenderer: (props) => , -// * } -// */ -// cellRenderer?: (props: CellRendererProps) => React.ReactNode; -// /** -// * If true, column can't be reordered. -// * @default false -// */ -// disableReordering?: boolean; -// /** -// * If true, column's visibility cannot be toggled. -// * @default false -// */ -// disableToggleVisibility?: boolean; -// /** -// * Side on which column should be sticked to. -// */ -// sticky?: 'left' | 'right'; -// } - -// export interface ColumnInterfaceBasedOnValue { -// // Cell?: Renderer> | undefined; -// // Cell?: (props: CellProps) => React.ReactNode; -// // testing1: Renderer> | undefined; -// testing1: Renderer> | undefined; -// } - -// // eslint-disable-next-line @typescript-eslint/no-empty-interface -// export interface ColumnGroupInterface { -// // columns: Array>; -// } - -// export type ColumnGroup = ColumnInterface & -// ColumnGroupInterface & -// ( -// | { Header: string } -// | ({ id: IdType } & { -// Header: Renderer>; -// }) -// ) & { accessor?: Accessor | undefined }; // Not used, but needed for backwards compatibility - -// type ValueOf = T[keyof T]; - -// // interface TableStoryDataType { -// // product: number; -// // price: number; -// // // [K in string]: any; -// // quantity: number; -// // rating: number; -// // deliveryTime: number; -// // status: 'positive' | 'negative' | 'warning' | undefined; -// // // subRows: TableStoryDataType[]; -// // // 1?: number; -// // }; - -// // // type testing = ColumnWithStrictAccessor -// // // type testing = ColumnInterfaceBasedOnValue -// // // type testing = CellProps -// // type testing = TableInstance - -// // The accessors like `foo.bar` are not supported, use functions instead -// export type ColumnWithStrictAccessor = ColumnInterface & -// // export type ColumnWithStrictAccessor = ValueOf<{ -// ValueOf<{ -// [K in keyof D]: { -// accessor: K; -// } & ColumnInterfaceBasedOnValue; -// }>; - -// export type ColumnWithLooseAccessor = ColumnInterface & -// ColumnInterfaceBasedOnValue & -// ( -// | { Header: string } -// | { id: IdType } -// | { accessor: keyof D extends never ? IdType : never } -// ) & { -// accessor?: -// | (keyof D extends never ? IdType | Accessor : Accessor) -// | undefined; -// }; - -// export type Column = -// | ColumnGroup -// | ColumnWithLooseAccessor -// | ColumnWithStrictAccessor; - -// export interface ColumnInstance -// extends Omit, 'id'>, -// ColumnInterfaceBasedOnValue, -// UseTableColumnProps, -// UseFiltersColumnProps, -// UseGroupByColumnProps, -// UseResizeColumnsColumnProps, -// UseSortByColumnProps { -// originalWidth: number; -// resizeWidth?: number; -// isResizerVisible?: boolean; -// getDragAndDropProps: () => TableKeyedProps; -// originalSticky?: 'left' | 'right' | 'none'; -// } - -// export interface HeaderGroup -// extends ColumnInstance, -// UseTableHeaderGroupProps {} - -// export interface Row -// extends UseTableRowProps, -// UseExpandedRowProps, -// UseGroupByRowProps, -// UseRowSelectRowProps, -// UseRowStateRowProps { -// initialSubRows: Row[]; -// } - -// export interface TableCommonProps { -// style?: CSSProperties | undefined; -// className?: string | undefined; -// role?: string | undefined; -// } - -// export type TableProps = TableCommonProps; - -// export type TableBodyProps = TableCommonProps; - -// export interface TableKeyedProps extends TableCommonProps { -// key: React.Key; -// } - -// export type TableHeaderGroupProps = TableKeyedProps; - -// export type TableFooterGroupProps = TableKeyedProps; - -// export type TableHeaderProps = TableKeyedProps; - -// export type TableFooterProps = TableKeyedProps; - -// export type TableRowProps = TableKeyedProps; - -// export type TableCellProps = TableKeyedProps; - -// export interface TableToggleCommonProps extends TableCommonProps { -// onChange?: ((e: ChangeEvent) => void) | undefined; -// checked?: boolean | undefined; -// title?: string | undefined; -// indeterminate?: boolean | undefined; -// } - -// export interface MetaBase { -// instance: TableInstance; -// userProps: any; -// } - -// // inspired by ExtendState in https://github.com/reduxjs/redux/blob/master/src/types/store.ts -// export type Meta> = [ -// Extension, -// ] extends [never] -// ? M -// : M & Extension; - -// //#region useTable -// export function useTable( -// options: TableOptions, -// ...plugins: Array> -// ): TableInstance; - -// /** -// * NOTE: To use custom options, use "Interface Merging" to add the custom options -// */ -// export type UseTableOptions = { -// columns: ReadonlyArray>; -// data: readonly D[]; -// } & Partial<{ -// initialState: Partial>; -// stateReducer: ( -// newState: TableState, -// action: ActionType, -// previousState: TableState, -// instance?: TableInstance, -// ) => TableState; -// useControlledState: (state: TableState, meta: Meta) => TableState; -// defaultColumn: Partial>; -// getSubRows: (originalRow: D, relativeIndex: number) => D[]; -// getRowId: ( -// originalRow: D, -// relativeIndex: number, -// parent?: Row, -// ) => string; -// autoResetHiddenColumns: boolean; -// }>; - -// export type PropGetter< -// D extends object, -// Props, -// T extends object = never, -// P = Partial, -// > = ((props: P, meta: Meta) => P | P[]) | P | P[]; - -// export type TablePropGetter = PropGetter; - -// export type TableBodyPropGetter = PropGetter< -// D, -// TableBodyProps -// >; - -// export type HeaderPropGetter = PropGetter< -// D, -// TableHeaderProps, -// { column: HeaderGroup } -// >; - -// export type FooterGroupPropGetter = PropGetter< -// D, -// TableFooterGroupProps, -// { column: HeaderGroup } -// >; - -// export type HeaderGroupPropGetter = PropGetter< -// D, -// TableHeaderGroupProps, -// { column: HeaderGroup } -// >; - -// export type FooterPropGetter = PropGetter< -// D, -// TableFooterProps, -// { column: HeaderGroup } -// >; - -// export type RowPropGetter = PropGetter< -// D, -// TableRowProps, -// { row: Row } -// >; - -// export type CellPropGetter = PropGetter< -// D, -// TableCellProps, -// { cell: Cell } -// >; - -// export interface ReducerTableState -// extends TableState, -// Record {} - -// export interface UseTableHooks extends Record { -// useOptions: Array< -// (options: TableOptions, args: TableOptions) => TableOptions -// >; -// stateReducers: Array< -// ( -// newState: TableState, -// action: ActionType, -// previousState?: TableState, -// instance?: TableInstance, -// ) => ReducerTableState | undefined -// >; -// columns: Array< -// (columns: Array>, meta: Meta) => Array> -// >; -// columnsDeps: Array<(deps: any[], meta: Meta) => any[]>; -// allColumns: Array< -// (allColumns: Array>, meta: Meta) => Array> -// >; -// allColumnsDeps: Array<(deps: any[], meta: Meta) => any[]>; -// visibleColumns: Array< -// (allColumns: Array>, meta: Meta) => Array> -// >; -// visibleColumnsDeps: Array<(deps: any[], meta: Meta) => any[]>; -// headerGroups: Array< -// ( -// allColumns: Array>, -// meta: Meta, -// ) => Array> -// >; -// headerGroupsDeps: Array<(deps: any[], meta: Meta) => any[]>; -// useInstanceBeforeDimensions: Array<(instance: TableInstance) => void>; -// useInstance: Array<(instance: TableInstance) => void>; -// prepareRow: Array<(row: Row, meta: Meta) => void>; -// useControlledState: Array< -// (state: TableState, meta: Meta) => TableState -// >; - -// getTableProps: Array>; -// getTableBodyProps: Array>; -// getHeaderGroupProps: Array>; -// getFooterGroupProps: Array>; -// getHeaderProps: Array>; -// getFooterProps: Array>; -// getRowProps: Array>; -// getCellProps: Array>; -// useFinalInstance: Array<(instance: TableInstance) => void>; -// } - -// export interface UseTableColumnOptions { -// id?: IdType | undefined; -// Header?: Renderer> | undefined; -// Footer?: Renderer> | undefined; -// width?: number | string | undefined; -// minWidth?: number | undefined; -// maxWidth?: number | undefined; -// } - -// type UpdateHiddenColumns = ( -// oldHidden: Array>, -// ) => Array>; - -// export type TableToggleHideAllColumnProps = TableToggleCommonProps; - -// export interface UseTableInstanceProps { -// state: TableState; -// plugins: Array>; -// dispatch: TableDispatch; -// columns: Array>; -// allColumns: Array>; -// visibleColumns: Array>; -// headerGroups: Array>; -// footerGroups: Array>; -// headers: Array>; -// flatHeaders: Array>; -// rows: Array>; -// rowsById: Record>; -// getTableProps: (propGetter?: TablePropGetter) => TableProps; -// getTableBodyProps: (propGetter?: TableBodyPropGetter) => TableBodyProps; -// prepareRow: (row: Row) => void; -// flatRows: Array>; -// totalColumnsWidth: number; -// allColumnsHidden: boolean; -// toggleHideColumn: (columnId: IdType, value?: boolean) => void; -// setHiddenColumns: ( -// param: Array> | UpdateHiddenColumns, -// ) => void; -// toggleHideAllColumns: (value?: boolean) => void; -// getToggleHideAllColumnsProps: ( -// props?: Partial, -// ) => TableToggleHideAllColumnProps; -// getHooks: () => Hooks; -// } - -// export interface UseTableHeaderGroupProps { -// headers: Array>; -// getHeaderGroupProps: ( -// propGetter?: HeaderGroupPropGetter, -// ) => TableHeaderProps; -// getFooterGroupProps: ( -// propGetter?: FooterGroupPropGetter, -// ) => TableFooterProps; -// totalHeaderCount: number; // not documented -// } - -// export interface UseTableColumnProps { -// id: IdType; -// columns?: Array> | undefined; -// isVisible: boolean; -// render: (type: 'Header' | 'Footer' | string, props?: object) => ReactNode; -// totalLeft: number; -// totalWidth: number; -// getHeaderProps: (propGetter?: HeaderPropGetter) => TableHeaderProps; -// getFooterProps: (propGetter?: FooterPropGetter) => TableFooterProps; -// toggleHidden: (value?: boolean) => void; -// parent?: ColumnInstance | undefined; // not documented -// getToggleHiddenProps: (userProps?: any) => any; -// depth: number; // not documented -// placeholderOf?: ColumnInstance | undefined; -// } - -// export interface UseTableRowProps { -// cells: Array>; -// allCells: Array>; -// values: Record, CellValue>; -// getRowProps: (propGetter?: RowPropGetter) => TableRowProps; -// index: number; -// original: D; -// id: string; -// subRows: Array>; -// } - -// export interface UseTableCellProps { -// column: ColumnInstance; -// row: Row; -// value: CellValue; -// getCellProps: (propGetter?: CellPropGetter) => TableCellProps; -// render: (type: 'Cell' | string, userProps?: object) => ReactNode; -// } - -// export type HeaderProps = TableInstance & { -// column: ColumnInstance; -// }; - -// export type FooterProps = TableInstance & { -// column: ColumnInstance; -// }; - -// export type CellProps = { -// // column: ColumnInstance; -// row: Row; -// // cell: Cell; -// value: CellValue; -// }; -// // export type CellProps = TableInstance & { -// // column: ColumnInstance; -// // row: Row; -// // cell: Cell; -// // value: CellValue; -// // }; - -// export type Accessor = ( -// originalRow: D, -// index: number, -// sub: { -// subRows: D[]; -// depth: number; -// data: D[]; -// }, -// ) => CellValue; - -// //#endregion - -// // Plugins - -// //#region useAbsoluteLayout -// export function useAbsoluteLayout(hooks: Hooks): void; - -// export namespace useAbsoluteLayout { -// const pluginName = 'useAbsoluteLayout'; -// } -// //#endregion - -// //#region useBlockLayout -// export function useBlockLayout(hooks: Hooks): void; - -// export namespace useBlockLayout { -// const pluginName = 'useBlockLayout'; -// } -// //#endregion - -// //#region useColumnOrder -// export function useColumnOrder( -// hooks: Hooks, -// ): void; - -// export namespace useColumnOrder { -// const pluginName = 'useColumnOrder'; -// } - -// export interface UseColumnOrderState { -// columnOrder: Array>; -// } - -// export interface UseColumnOrderInstanceProps { -// setColumnOrder: ( -// updater: -// | ((columnOrder: Array>) => Array>) -// | Array>, -// ) => void; -// } - -// //#endregion - -// //#region useExpanded -// export function useExpanded(hooks: Hooks): void; - -// export namespace useExpanded { -// const pluginName = 'useExpanded'; -// } - -// export type TableExpandedToggleProps = TableKeyedProps; - -// export type UseExpandedOptions = Partial<{ -// manualExpandedKey: IdType; -// paginateExpandedRows: boolean; -// expandSubRows: boolean; -// autoResetExpanded?: boolean | undefined; -// }>; - -// export interface UseExpandedHooks { -// getToggleRowsExpandedProps: Array>; -// getToggleAllRowsExpandedProps: Array>; -// } - -// export interface UseExpandedState { -// expanded: Record, boolean>; -// } - -// export interface UseExpandedInstanceProps { -// preExpandedRows: Array>; -// expandedRows: Array>; -// rows: Array>; -// expandedDepth: number; -// isAllRowsExpanded: boolean; -// toggleRowExpanded: (id: Array>, value?: boolean) => void; -// toggleAllRowsExpanded: (value?: boolean) => void; -// } - -// export interface UseExpandedRowProps { -// isExpanded: boolean; -// canExpand: boolean; -// subRows: Array>; -// toggleRowExpanded: (value?: boolean) => void; -// getToggleRowExpandedProps: ( -// props?: Partial, -// ) => TableExpandedToggleProps; -// depth: number; -// } - -// //#endregion - -// //#region useFilters -// export function useFilters(hooks: Hooks): void; - -// export namespace useFilters { -// const pluginName = 'useFilters'; -// } - -// export type UseFiltersOptions = Partial<{ -// manualFilters: boolean; -// disableFilters: boolean; -// defaultCanFilter: boolean; -// filterTypes: FilterTypes; -// autoResetFilters?: boolean | undefined; -// }>; - -// export interface UseFiltersState { -// filters: Filters; -// } - -// export type UseFiltersColumnOptions = Partial<{ -// Filter: Renderer>; -// disableFilters: boolean; -// defaultCanFilter: boolean; -// filter: FilterType | DefaultFilterTypes | string; -// }>; - -// export interface UseFiltersInstanceProps { -// preFilteredRows: Array>; -// preFilteredFlatRows: Array>; -// preFilteredRowsById: Record>; -// filteredRows: Array>; -// filteredFlatRows: Array>; -// filteredRowsById: Record>; -// rows: Array>; -// flatRows: Array>; -// rowsById: Record>; -// setFilter: ( -// columnId: IdType, -// updater: ((filterValue: FilterValue) => FilterValue) | FilterValue, -// ) => void; -// setAllFilters: ( -// updater: Filters | ((filters: Filters) => Filters), -// ) => void; -// } - -// export interface UseFiltersColumnProps { -// canFilter: boolean; -// setFilter: ( -// updater: ((filterValue: FilterValue) => FilterValue) | FilterValue, -// ) => void; -// filterValue: FilterValue; -// preFilteredRows: Array>; -// filteredRows: Array>; -// } - -// export type FilterProps = HeaderProps; -// export type FilterValue = any; -// export type Filters = Array<{ -// id: IdType; -// value: FilterValue; -// }>; -// export type FilterTypes = Record>; - -// export type DefaultFilterTypes = -// | 'text' -// | 'exactText' -// | 'exactTextCase' -// | 'includes' -// | 'includesAll' -// | 'exact' -// | 'equals' -// | 'between'; - -// export interface FilterType { -// ( -// rows: Array>, -// columnIds: Array>, -// filterValue: FilterValue, -// ): Array>; - -// autoRemove?: ((filterValue: FilterValue) => boolean) | undefined; -// } - -// //#endregion - -// //#region useFlexLayout -// export function useFlexLayout( -// hooks: Hooks, -// ): void; - -// export namespace useFlexLayout { -// const pluginName = 'useFlexLayout'; -// } -// //#endregion - -// //#region useGridLayout -// export function useGridLayout( -// hooks: Hooks, -// ): void; - -// export namespace useGridLayout { -// const pluginName = 'useGridLayout'; -// } -// //#endregion - -// //#region useGlobalFilter -// export function useGlobalFilter( -// hooks: Hooks, -// ): void; - -// export namespace useGlobalFilter { -// const pluginName = 'useGlobalFilter'; -// } - -// export type UseGlobalFiltersOptions = Partial<{ -// globalFilter: -// | (( -// rows: Array>, -// columnIds: Array>, -// filterValue: any, -// ) => Array>) -// | string; -// manualGlobalFilter: boolean; -// filterTypes: FilterTypes; -// autoResetGlobalFilter?: boolean | undefined; -// disableGlobalFilter?: boolean | undefined; -// }>; - -// export interface UseGlobalFiltersState { -// globalFilter: any; -// } - -// export type UseGlobalFiltersColumnOptions = Partial<{ -// disableGlobalFilter?: boolean | undefined; -// }>; - -// export interface UseGlobalFiltersInstanceProps { -// preGlobalFilteredRows: Array>; -// preGlobalFilteredFlatRows: Array>; -// preGlobalFilteredRowsById: Record>; -// globalFilteredRows: Array>; -// globalFilteredFlatRows: Array>; -// globalFilteredRowsById: Record>; -// rows: Array>; -// flatRows: Array>; -// rowsById: Record>; -// setGlobalFilter: (filterValue: FilterValue) => void; -// } - -// //#endregion - -// //#region useGroupBy -// export function useGroupBy(hooks: Hooks): void; - -// export namespace useGroupBy { -// const pluginName = 'useGroupBy'; -// } - -// export interface TableGroupByToggleProps { -// title?: string | undefined; -// style?: CSSProperties | undefined; -// onClick?: ((e: MouseEvent) => void) | undefined; -// } - -// export type UseGroupByOptions = Partial<{ -// manualGroupBy: boolean; -// disableGroupBy: boolean; -// defaultCanGroupBy: boolean; -// aggregations: Record>; -// groupByFn: ( -// rows: Array>, -// columnId: IdType, -// ) => Record>>; -// autoResetGroupBy?: boolean | undefined; -// }>; - -// export interface UseGroupByHooks { -// getGroupByToggleProps: Array>; -// } - -// export interface UseGroupByState { -// groupBy: Array>; -// } - -// export type UseGroupByColumnOptions = Partial<{ -// aggregate: Aggregator; -// Aggregated: Renderer>; -// disableGroupBy: boolean; -// defaultCanGroupBy: boolean; -// }>; - -// export interface UseGroupByInstanceProps { -// preGroupedRows: Array>; -// preGroupedFlatRows: Array>; -// preGroupedRowsById: Record>; -// groupedRows: Array>; -// groupedFlatRows: Array>; -// groupedRowsById: Record>; -// onlyGroupedFlatRows: Array>; -// onlyGroupedRowsById: Record>; -// nonGroupedFlatRows: Array>; -// nonGroupedRowsById: Record>; -// rows: Array>; -// flatRows: Array>; -// rowsById: Record>; -// toggleGroupBy: (columnId: IdType, value?: boolean) => void; -// } - -// export interface UseGroupByColumnProps { -// canGroupBy: boolean; -// isGrouped: boolean; -// groupedIndex: number; -// toggleGroupBy: () => void; -// getGroupByToggleProps: ( -// props?: Partial, -// ) => TableGroupByToggleProps; -// } - -// export interface UseGroupByRowProps { -// isGrouped: boolean; -// groupByID: IdType; -// groupByVal: string; -// values: Record, AggregatedValue>; -// subRows: Array>; -// leafRows: Array>; -// depth: number; -// id: string; -// index: number; -// } - -// export interface UseGroupByCellProps { -// isGrouped: boolean; -// isPlaceholder: boolean; -// isAggregated: boolean; -// } - -// export type DefaultAggregators = -// | 'sum' -// | 'average' -// | 'median' -// | 'uniqueCount' -// | 'count'; - -// export type AggregatorFn = ( -// columnValues: CellValue[], -// rows: Array>, -// isAggregated: boolean, -// ) => AggregatedValue; -// export type Aggregator = -// | AggregatorFn -// | DefaultAggregators -// | string; -// export type AggregatedValue = any; -// //#endregion - -// //#region usePagination -// export function usePagination( -// hooks: Hooks, -// ): void; - -// export namespace usePagination { -// const pluginName = 'usePagination'; -// } - -// export type UsePaginationOptions = Partial<{ -// pageCount: number; -// manualPagination: boolean; -// autoResetPage?: boolean | undefined; -// paginateExpandedRows: boolean; -// }>; - -// export interface UsePaginationState { -// pageSize: number; -// pageIndex: number; -// } - -// export interface UsePaginationInstanceProps { -// page: Array>; -// pageCount: number; -// pageOptions: number[]; -// canPreviousPage: boolean; -// canNextPage: boolean; -// gotoPage: (updater: ((pageIndex: number) => number) | number) => void; -// previousPage: () => void; -// nextPage: () => void; -// setPageSize: (pageSize: number) => void; -// } - -// //#endregion - -// //#region useResizeColumns -// export function useResizeColumns( -// hooks: Hooks, -// ): void; - -// export namespace useResizeColumns { -// const pluginName = 'useResizeColumns'; -// } - -// export interface UseResizeColumnsOptions { -// disableResizing?: boolean | undefined; -// autoResetResize?: boolean | undefined; -// } - -// export interface UseResizeColumnsState { -// columnResizing: { -// startX?: number | undefined; -// columnWidth: number; -// headerIdWidths: Record; -// columnWidths: any; -// isResizingColumn?: string | undefined; -// }; -// } - -// export interface UseResizeColumnsColumnOptions { -// disableResizing?: boolean | undefined; -// } - -// // export interface TableResizerProps {} - -// export interface UseResizeColumnsColumnProps { -// getResizerProps: (props?: Partial) => TableResizerProps; -// canResize: boolean; -// isResizing: boolean; -// } - -// //#endregion - -// //#region useRowSelect -// export function useRowSelect( -// hooks: Hooks, -// ): void; - -// export namespace useRowSelect { -// const pluginName = 'useRowSelect'; -// } - -// export type TableToggleAllRowsSelectedProps = TableToggleCommonProps; - -// export type TableToggleRowsSelectedProps = TableToggleCommonProps; - -// export type UseRowSelectOptions = Partial<{ -// manualRowSelectedKey: IdType; -// autoResetSelectedRows: boolean; -// selectSubRows: boolean; -// }>; - -// export interface UseRowSelectHooks { -// getToggleRowSelectedProps: Array< -// PropGetter -// >; -// getToggleAllRowsSelectedProps: Array< -// PropGetter -// >; -// getToggleAllPageRowsSelectedProps: Array< -// PropGetter -// >; -// } - -// export interface UseRowSelectState { -// selectedRowIds: Record, boolean>; -// } - -// export interface UseRowSelectInstanceProps { -// toggleRowSelected: (rowId: IdType, set?: boolean) => void; -// toggleAllRowsSelected: (value?: boolean) => void; -// getToggleAllRowsSelectedProps: ( -// props?: Partial, -// ) => TableToggleAllRowsSelectedProps; -// getToggleAllPageRowsSelectedProps: ( -// props?: Partial, -// ) => TableToggleAllRowsSelectedProps; -// isAllRowsSelected: boolean; -// selectedFlatRows: Array>; -// } - -// export interface UseRowSelectRowProps { -// isSelected: boolean; -// isSomeSelected: boolean; -// toggleRowSelected: (set?: boolean) => void; -// getToggleRowSelectedProps: ( -// props?: Partial, -// ) => TableToggleRowsSelectedProps; -// } - -// //#endregion - -// //#region useRowState -// export function useRowState(hooks: Hooks): void; - -// export namespace useRowState { -// const pluginName = 'useRowState'; -// } - -// export type UseRowStateOptions = Partial<{ -// initialRowStateAccessor: (row: Row) => UseRowStateLocalState; -// getResetRowStateDeps: (instance: TableInstance) => any[]; -// autoResetRowState?: boolean | undefined; -// }>; - -// export interface UseRowStateState { -// rowState: Record }>; -// } - -// export interface UseRowStateInstanceProps { -// setRowState: (rowPath: string[], updater: UseRowUpdater) => void; -// setCellState: ( -// rowPath: string[], -// columnId: IdType, -// updater: UseRowUpdater, -// ) => void; -// } - -// export interface UseRowStateRowProps { -// state: UseRowStateLocalState; -// setState: (updater: UseRowUpdater) => void; -// } - -// export interface UseRowStateCellProps { -// state: UseRowStateLocalState; -// setState: (updater: UseRowUpdater) => void; -// } - -// export type UseRowUpdater = T | ((prev: T) => T); -// export type UseRowStateLocalState = Record< -// IdType, -// T -// >; -// //#endregion - -// //#region useSortBy -// export function useSortBy(hooks: Hooks): void; - -// export namespace useSortBy { -// const pluginName = 'useSortBy'; -// } - -// export interface TableSortByToggleProps { -// title?: string | undefined; -// style?: CSSProperties | undefined; -// onClick?: ((e: MouseEvent) => void) | undefined; -// } - -// export type UseSortByOptions = Partial<{ -// manualSortBy: boolean; -// disableSortBy: boolean; -// defaultCanSort: boolean; -// disableMultiSort: boolean; -// isMultiSortEvent: (e: MouseEvent) => boolean; -// maxMultiSortColCount: number; -// disableSortRemove: boolean; -// disabledMultiRemove: boolean; -// orderByFn: ( -// rows: Array>, -// sortFns: Array>, -// directions: boolean[], -// ) => Array>; -// sortTypes: Record>; -// autoResetSortBy?: boolean | undefined; -// }>; - -// export interface UseSortByHooks { -// getSortByToggleProps: Array>; -// } - -// export interface UseSortByState { -// sortBy: Array>; -// } - -// export type UseSortByColumnOptions = Partial<{ -// defaultCanSort: boolean; -// disableSortBy: boolean; -// sortDescFirst: boolean; -// sortInverted: boolean; -// sortType: SortByFn | DefaultSortTypes | string; -// }>; - -// export interface UseSortByInstanceProps { -// rows: Array>; -// preSortedRows: Array>; -// setSortBy: (sortBy: Array>) => void; -// toggleSortBy: ( -// columnId: IdType, -// descending?: boolean, -// isMulti?: boolean, -// ) => void; -// } - -// export interface UseSortByColumnProps { -// canSort: boolean; -// toggleSortBy: (descending?: boolean, multi?: boolean) => void; -// getSortByToggleProps: ( -// props?: Partial, -// ) => TableSortByToggleProps; -// clearSortBy: () => void; -// isSorted: boolean; -// sortedIndex: number; -// isSortedDesc: boolean | undefined; -// } - -// export type OrderByFn = ( -// rowA: Row, -// rowB: Row, -// ) => number; -// export type SortByFn = ( -// rowA: Row, -// rowB: Row, -// columnId: IdType, -// desc?: boolean, -// ) => number; - -// export type DefaultSortTypes = -// | 'alphanumeric' -// | 'datetime' -// | 'basic' -// | 'string' -// | 'number'; - -// export interface SortingRule { -// id: IdType; -// desc?: boolean | undefined; -// } - -// //#endregion - -// // Additional API -// export const actions: Record; -// export type ActionType = { type: string } & Record; -// export const defaultColumn: Partial & Record; - -// // Helpers -// export type StringKey = Extract; -// export type IdType = StringKey | string; -// export type CellValue = V; - -// export type Renderer = -// | ComponentType -// | ReactElement -// | string -// | number -// | ReactFragment; - -// export interface PluginHook { -// (hooks: Hooks): void; -// pluginName?: string | undefined; -// } - -// export type TableDispatch = (action: A) => void; - -// // utils -// export function defaultOrderByFn( -// arr: Array>, -// funcs: Array>, -// dirs: boolean[], -// ): Array>; - -// export function defaultGroupByFn( -// rows: Array>, -// columnId: IdType, -// ): Record>>; - -// export function makePropGetter(hooks: Hooks, ...meta: any[]): any; - -// export function reduceHooks( -// hooks: Hooks, -// initial: T, -// ...args: any[] -// ): T; - -// export function loopHooks(hooks: Hooks, ...args: any[]): void; - -// export function ensurePluginOrder( -// plugins: Array>, -// befores: string[], -// pluginName: string, -// ): void; - -// export function functionalUpdate( -// updater: any, -// old: Partial>, -// ): Partial>; - -// export function useGetLatest(obj: T): () => T; - -// export function safeUseLayoutEffect( -// effect: EffectCallback, -// deps?: DependencyList, -// ): void; - -// export function useMountedLayoutEffect( -// effect: EffectCallback, -// deps?: DependencyList, -// ): void; - -// export function useAsyncDebounce any>( -// defaultFn: F, -// defaultWait?: number, -// ): F; - -// export function makeRenderer( -// instance: TableInstance, -// column: ColumnInstance, -// meta?: any, -// ): ReactElement; - -// ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// - -// // Additional Types - -// export type FieldType = 'text' | 'number' | 'date' | string; - -// export type CellRendererProps = { -// /** -// * Cell HTML props passed from the Table. -// */ -// cellElementProps: TableCellProps; -// /** -// * Table specific cell props like `column`, `row`. -// */ -// cellProps: CellProps; -// /** -// * Cell's content. -// */ -// children: React.ReactNode; -// /** -// * Function that returns whether the cell is disabled. -// */ -// isDisabled?: (rowData: D) => boolean; -// }; -// } diff --git a/packages/itwinui-react/src/types/react-table/package.json b/packages/itwinui-react/src/types/react-table/package.json deleted file mode 100644 index c4da7573625..00000000000 --- a/packages/itwinui-react/src/types/react-table/package.json +++ /dev/null @@ -1,42 +0,0 @@ -{ - "name": "@types/react-table", - "version": "7.7.12", - "description": "TypeScript definitions for react-table", - "homepage": "https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-table", - "license": "MIT", - "contributors": [ - { - "name": "Guy Gascoigne-Piggford", - "url": "https://github.com/ggascoigne", - "githubUsername": "ggascoigne" - }, - { - "name": "Michael Stramel", - "url": "https://github.com/stramel", - "githubUsername": "stramel" - }, - { - "name": "Rohit Garg", - "url": "https://github.com/gargroh", - "githubUsername": "gargroh" - }, - { - "name": "Jason Clark", - "url": "https://github.com/riceboyler", - "githubUsername": "riceboyler" - } - ], - "main": "", - "types": "index.d.ts", - "repository": { - "type": "git", - "url": "https://github.com/DefinitelyTyped/DefinitelyTyped.git", - "directory": "types/react-table" - }, - "scripts": {}, - "dependencies": { - "@types/react": "*" - }, - "typesPublisherContentHash": "28ce2a560b81f85701c43e70d16f022ecafc569457187c2066e6965ede177399", - "typeScriptVersion": "3.9" -} \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 46cb9f40293..244a9569309 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4238,11 +4238,6 @@ dependencies: "@types/react" "*" -"@types/react-table@file:./packages/itwinui-react/src/types/react-table": - version "7.7.12" - dependencies: - "@types/react" "*" - "@types/react-transition-group@^4.4.6": version "4.4.6" resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.6.tgz#18187bcda5281f8e10dfc48f0943e2fdf4f75e2e" From 83137c719745178bc76d9a24e0fcf972527fc31f Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Wed, 23 Aug 2023 16:51:05 -0400 Subject: [PATCH 035/196] Fully commented out react-table-config.ts --- .../src/types/react-table-config.ts | 364 +++++++++--------- 1 file changed, 182 insertions(+), 182 deletions(-) diff --git a/packages/itwinui-react/src/types/react-table-config.ts b/packages/itwinui-react/src/types/react-table-config.ts index 39adacd826e..5768280c968 100644 --- a/packages/itwinui-react/src/types/react-table-config.ts +++ b/packages/itwinui-react/src/types/react-table-config.ts @@ -59,185 +59,185 @@ // } from 'react-table'; // import type { TableFilterProps } from '../core/Table/filters/index.js'; -declare module 'react-table' { - ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// - // export type FieldType = 'text' | 'number' | 'date' | string; - // export type CellRendererProps = { - // /** - // * Cell HTML props passed from the Table. - // */ - // cellElementProps: TableCellProps; - // /** - // * Table specific cell props like `column`, `row`. - // */ - // cellProps: CellProps; - // /** - // * Cell's content. - // */ - // children: React.ReactNode; - // /** - // * Function that returns whether the cell is disabled. - // */ - // isDisabled?: (rowData: D) => boolean; - // }; - // take this file as-is, or comment out the sections that don't apply to your plugin configuration - // export interface TableOptions - // extends Omit, 'data' | 'columns'>, - // UseRowSelectOptions, - // UseExpandedOptions, - // UseFiltersOptions, - // // UseGroupByOptions, - // UsePaginationOptions, - // UseGlobalFiltersOptions, - // UseGlobalFiltersColumnOptions, - // Omit, 'disableResizing'>, - // // UseRowStateOptions, - // UseSortByOptions { - // /** - // * List of columns. - // * - // * Should not have a top-level `Header` or a `columns` sub-property. They are only allowed to be passed for backwards compatibility. - // * See [migration guide](https://github.com/iTwin/iTwinUI/wiki/iTwinUI-react-v2-migration-guide#breaking-changes). - // */ - // columns: Array>; - // /** - // * Table data list. - // * Must be memoized. - // * - // * Supports expandable sub-rows using the `subRows` field in data entries. - // * If some rows don't have sub-data, it is recommended to pass an empty array to `subRows` for consistent spacing. - // */ - // data: D[]; - // /** - // * Column's resize mode. - // * - `fit` - when resizing it affects current and the next column, - // * e.g. when increasing width of current column, next column's width will decrease. - // * - `expand` - when resizing it affects only the current column, - // * e.g. when increasing width of the current column, next column's width remains the same. - // * @default 'fit' - // */ - // columnResizeMode?: 'fit' | 'expand'; - // } - // export interface Hooks - // extends UseExpandedHooks, - // UseGroupByHooks, - // UseRowSelectHooks, - // UseSortByHooks {} - // export interface TableInstance - // extends UseColumnOrderInstanceProps, - // UseExpandedInstanceProps, - // UseFiltersInstanceProps, - // UseGlobalFiltersInstanceProps, - // UseGroupByInstanceProps, - // UsePaginationInstanceProps, - // UseRowSelectInstanceProps, - // UseRowStateInstanceProps, - // UseSortByInstanceProps { - // initialRows: Row[]; - // columnResizeMode: TableOptions['columnResizeMode']; - // tableWidth: number; - // } - // export interface TableState - // extends UseColumnOrderState, - // UseExpandedState, - // UseFiltersState, - // UseGlobalFiltersState, - // UseGroupByState, - // UsePaginationState, - // UseRowSelectState, - // UseRowStateState, - // UseSortByState { - // // UseResizeColumnsState with fixed typings - // columnResizing: { - // startX?: number; - // columnWidth?: number; - // nextColumnWidth?: number; - // headerIdWidths?: Array<[string, number]>; - // nextHeaderIdWidths?: Array<[string, number]>; - // columnWidths: Record; - // isResizingColumn?: string; - // }; - // isTableResizing?: boolean; - // columnReorderStartIndex: number; - // sticky: { - // isScrolledToRight?: boolean; - // isScrolledToLeft?: boolean; - // }; - // lastSelectedRowId?: string; - // } - // export interface ColumnInterface - // // UseGroupByColumnOptions, - // extends UseSortByColumnOptions, - // UseFiltersColumnOptions, - // UseResizeColumnsColumnOptions, - // UseGlobalFiltersColumnOptions { - // /** - // * Custom class name applied to header column cell. - // */ - // columnClassName?: string; - // /** - // * Custom class name applied to each column's cell. - // */ - // cellClassName?: string; - // /** - // * Type of the data in cell. Used for manual filtering. - // */ - // fieldType?: FieldType; - // /** - // * Filter component used as a column filter. Should use filters from `tableFilters`. - // */ - // Filter?: Renderer> | Renderer>; - // /** - // * String value or custom function to use for filtering. - // * Possible string values: `text`, `exactText`, `exactTextCase`, `includes`, `includesAll`, `exact`, `equals`, `between`. - // * More info about these filters: https://github.com/tannerlinsley/react-table/blob/master/src/filterTypes.js - // */ - // filter?: FilterType | DefaultFilterTypes | string; - // /** - // * Function that should return whole cell element not only the content. - // * Must be memoized. - // * @example - // * { - // * Header: 'Name', - // * accessor: 'name', - // * cellRenderer: (props) => , - // * } - // */ - // cellRenderer?: (props: CellRendererProps) => React.ReactNode; - // /** - // * If true, column can't be reordered. - // * @default false - // */ - // disableReordering?: boolean; - // /** - // * If true, column's visibility cannot be toggled. - // * @default false - // */ - // disableToggleVisibility?: boolean; - // /** - // * Side on which column should be sticked to. - // */ - // sticky?: 'left' | 'right'; - // } - // export interface ColumnInstance - // extends UseFiltersColumnProps, - // UseGroupByColumnProps, - // UseResizeColumnsColumnProps, - // UseSortByColumnProps { - // originalWidth: number; - // resizeWidth?: number; - // isResizerVisible?: boolean; - // getDragAndDropProps: () => TableKeyedProps; - // originalSticky?: 'left' | 'right' | 'none'; - // } - // export interface Cell - // extends UseGroupByCellProps, - // UseRowStateCellProps {} - // export interface Row - // extends UseExpandedRowProps, - // UseGroupByRowProps, - // UseRowSelectRowProps, - // UseRowStateRowProps { - // initialSubRows: Row[]; - // } -} +// declare module 'react-table' { +////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// +// export type FieldType = 'text' | 'number' | 'date' | string; +// export type CellRendererProps = { +// /** +// * Cell HTML props passed from the Table. +// */ +// cellElementProps: TableCellProps; +// /** +// * Table specific cell props like `column`, `row`. +// */ +// cellProps: CellProps; +// /** +// * Cell's content. +// */ +// children: React.ReactNode; +// /** +// * Function that returns whether the cell is disabled. +// */ +// isDisabled?: (rowData: D) => boolean; +// }; +// take this file as-is, or comment out the sections that don't apply to your plugin configuration +// export interface TableOptions +// extends Omit, 'data' | 'columns'>, +// UseRowSelectOptions, +// UseExpandedOptions, +// UseFiltersOptions, +// // UseGroupByOptions, +// UsePaginationOptions, +// UseGlobalFiltersOptions, +// UseGlobalFiltersColumnOptions, +// Omit, 'disableResizing'>, +// // UseRowStateOptions, +// UseSortByOptions { +// /** +// * List of columns. +// * +// * Should not have a top-level `Header` or a `columns` sub-property. They are only allowed to be passed for backwards compatibility. +// * See [migration guide](https://github.com/iTwin/iTwinUI/wiki/iTwinUI-react-v2-migration-guide#breaking-changes). +// */ +// columns: Array>; +// /** +// * Table data list. +// * Must be memoized. +// * +// * Supports expandable sub-rows using the `subRows` field in data entries. +// * If some rows don't have sub-data, it is recommended to pass an empty array to `subRows` for consistent spacing. +// */ +// data: D[]; +// /** +// * Column's resize mode. +// * - `fit` - when resizing it affects current and the next column, +// * e.g. when increasing width of current column, next column's width will decrease. +// * - `expand` - when resizing it affects only the current column, +// * e.g. when increasing width of the current column, next column's width remains the same. +// * @default 'fit' +// */ +// columnResizeMode?: 'fit' | 'expand'; +// } +// export interface Hooks +// extends UseExpandedHooks, +// UseGroupByHooks, +// UseRowSelectHooks, +// UseSortByHooks {} +// export interface TableInstance +// extends UseColumnOrderInstanceProps, +// UseExpandedInstanceProps, +// UseFiltersInstanceProps, +// UseGlobalFiltersInstanceProps, +// UseGroupByInstanceProps, +// UsePaginationInstanceProps, +// UseRowSelectInstanceProps, +// UseRowStateInstanceProps, +// UseSortByInstanceProps { +// initialRows: Row[]; +// columnResizeMode: TableOptions['columnResizeMode']; +// tableWidth: number; +// } +// export interface TableState +// extends UseColumnOrderState, +// UseExpandedState, +// UseFiltersState, +// UseGlobalFiltersState, +// UseGroupByState, +// UsePaginationState, +// UseRowSelectState, +// UseRowStateState, +// UseSortByState { +// // UseResizeColumnsState with fixed typings +// columnResizing: { +// startX?: number; +// columnWidth?: number; +// nextColumnWidth?: number; +// headerIdWidths?: Array<[string, number]>; +// nextHeaderIdWidths?: Array<[string, number]>; +// columnWidths: Record; +// isResizingColumn?: string; +// }; +// isTableResizing?: boolean; +// columnReorderStartIndex: number; +// sticky: { +// isScrolledToRight?: boolean; +// isScrolledToLeft?: boolean; +// }; +// lastSelectedRowId?: string; +// } +// export interface ColumnInterface +// // UseGroupByColumnOptions, +// extends UseSortByColumnOptions, +// UseFiltersColumnOptions, +// UseResizeColumnsColumnOptions, +// UseGlobalFiltersColumnOptions { +// /** +// * Custom class name applied to header column cell. +// */ +// columnClassName?: string; +// /** +// * Custom class name applied to each column's cell. +// */ +// cellClassName?: string; +// /** +// * Type of the data in cell. Used for manual filtering. +// */ +// fieldType?: FieldType; +// /** +// * Filter component used as a column filter. Should use filters from `tableFilters`. +// */ +// Filter?: Renderer> | Renderer>; +// /** +// * String value or custom function to use for filtering. +// * Possible string values: `text`, `exactText`, `exactTextCase`, `includes`, `includesAll`, `exact`, `equals`, `between`. +// * More info about these filters: https://github.com/tannerlinsley/react-table/blob/master/src/filterTypes.js +// */ +// filter?: FilterType | DefaultFilterTypes | string; +// /** +// * Function that should return whole cell element not only the content. +// * Must be memoized. +// * @example +// * { +// * Header: 'Name', +// * accessor: 'name', +// * cellRenderer: (props) => , +// * } +// */ +// cellRenderer?: (props: CellRendererProps) => React.ReactNode; +// /** +// * If true, column can't be reordered. +// * @default false +// */ +// disableReordering?: boolean; +// /** +// * If true, column's visibility cannot be toggled. +// * @default false +// */ +// disableToggleVisibility?: boolean; +// /** +// * Side on which column should be sticked to. +// */ +// sticky?: 'left' | 'right'; +// } +// export interface ColumnInstance +// extends UseFiltersColumnProps, +// UseGroupByColumnProps, +// UseResizeColumnsColumnProps, +// UseSortByColumnProps { +// originalWidth: number; +// resizeWidth?: number; +// isResizerVisible?: boolean; +// getDragAndDropProps: () => TableKeyedProps; +// originalSticky?: 'left' | 'right' | 'none'; +// } +// export interface Cell +// extends UseGroupByCellProps, +// UseRowStateCellProps {} +// export interface Row +// extends UseExpandedRowProps, +// UseGroupByRowProps, +// UseRowSelectRowProps, +// UseRowStateRowProps { +// initialSubRows: Row[]; +// } +// } From 5fcc72cd7de49aa0e11917cef4077e747272f4c4 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Wed, 23 Aug 2023 17:23:22 -0400 Subject: [PATCH 036/196] Trying to import react-table types into Table.tsx --- packages/itwinui-react/src/types/react-table-types.d.ts | 6 +++++- packages/itwinui-react/tsconfig.build.json | 2 +- packages/itwinui-react/tsconfig.json | 1 + 3 files changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/itwinui-react/src/types/react-table-types.d.ts b/packages/itwinui-react/src/types/react-table-types.d.ts index 75146013b20..5f51cc9db9f 100644 --- a/packages/itwinui-react/src/types/react-table-types.d.ts +++ b/packages/itwinui-react/src/types/react-table-types.d.ts @@ -2,6 +2,8 @@ * Copyright (c) Bentley Systems, Incorporated. All rights reserved. * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ +/* eslint-disable @typescript-eslint/no-empty-interface */ +/* eslint-disable @typescript-eslint/ban-types */ // Type definitions for react-table 7.7 // Project: https://github.com/tannerlinsley/react-table // Definitions by: Guy Gascoigne-Piggford , @@ -33,8 +35,10 @@ import { ReactNode, } from 'react'; +declare module 'react-table'; + declare module 'react-table' { - export {}; + // export {}; /** * The empty definitions of below provides a base definition for the parts used by useTable, that can then be extended in the users code. diff --git a/packages/itwinui-react/tsconfig.build.json b/packages/itwinui-react/tsconfig.build.json index ae1f4b12713..8c50a0a9a00 100644 --- a/packages/itwinui-react/tsconfig.build.json +++ b/packages/itwinui-react/tsconfig.build.json @@ -1,6 +1,6 @@ { "extends": "./tsconfig.json", - "files": ["src/index.ts", "src/types/react-table-config.ts"], + "files": ["src/index.ts", "src/types/react-table-types.js"], "compilerOptions": { "noUnusedLocals": false, "importHelpers": true diff --git a/packages/itwinui-react/tsconfig.json b/packages/itwinui-react/tsconfig.json index dfb5d2c1f35..12f6a1b7446 100644 --- a/packages/itwinui-react/tsconfig.json +++ b/packages/itwinui-react/tsconfig.json @@ -23,5 +23,6 @@ "verbatimModuleSyntax": true, "noErrorTruncation": true }, + "include": ["src"], "exclude": ["node_modules", "cjs/**/*", "esm/**/*"] } From df2fec3f345a09f6024dc328b0b599712594e582 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Thu, 24 Aug 2023 12:00:29 -0400 Subject: [PATCH 037/196] WIP --- .../itwinui-react/src/core/Table/Table.tsx | 4 +- .../src/types/react-table-types.d.ts | 2419 ++++++++--------- 2 files changed, 1201 insertions(+), 1222 deletions(-) diff --git a/packages/itwinui-react/src/core/Table/Table.tsx b/packages/itwinui-react/src/core/Table/Table.tsx index 9af9f02200f..36562400103 100644 --- a/packages/itwinui-react/src/core/Table/Table.tsx +++ b/packages/itwinui-react/src/core/Table/Table.tsx @@ -15,7 +15,7 @@ import { usePagination, useColumnOrder, useGlobalFilter, -} from 'react-table'; +} from '../../types/react-table-types.js'; import type { CellProps, HeaderGroup, @@ -25,7 +25,7 @@ import type { ActionType, TableInstance, Column, -} from 'react-table'; +} from '../../types/react-table-types.js'; import { ProgressRadial } from '../ProgressIndicators/index.js'; import { useGlobals, diff --git a/packages/itwinui-react/src/types/react-table-types.d.ts b/packages/itwinui-react/src/types/react-table-types.d.ts index 5f51cc9db9f..07de727cf60 100644 --- a/packages/itwinui-react/src/types/react-table-types.d.ts +++ b/packages/itwinui-react/src/types/react-table-types.d.ts @@ -35,1254 +35,1233 @@ import { ReactNode, } from 'react'; -declare module 'react-table'; +// export {}; + +/** + * The empty definitions of below provides a base definition for the parts used by useTable, that can then be extended in the users code. + * + * @example + * export interface TableOptions + * extends + * UseExpandedOptions, + * UseFiltersOptions {} + * see https://gist.github.com/ggascoigne/646e14c9d54258e40588a13aabf0102d for more details + */ +export interface TableOptions + extends Omit, 'data' | 'columns'>, + UseRowSelectOptions, + UseExpandedOptions, + UseFiltersOptions, + // UseGroupByOptions, + UsePaginationOptions, + UseGlobalFiltersOptions, + UseGlobalFiltersColumnOptions, + Omit, 'disableResizing'>, + // UseRowStateOptions, + UseSortByOptions { + /** + * List of columns. + * + * Should not have a top-level `Header` or a `columns` sub-property. They are only allowed to be passed for backwards compatibility. + * See [migration guide](https://github.com/iTwin/iTwinUI/wiki/iTwinUI-react-v2-migration-guide#breaking-changes). + */ + columns: Array>; + /** + * Table data list. + * Must be memoized. + * + * Supports expandable sub-rows using the `subRows` field in data entries. + * If some rows don't have sub-data, it is recommended to pass an empty array to `subRows` for consistent spacing. + */ + data: D[]; + /** + * Column's resize mode. + * - `fit` - when resizing it affects current and the next column, + * e.g. when increasing width of current column, next column's width will decrease. + * - `expand` - when resizing it affects only the current column, + * e.g. when increasing width of the current column, next column's width remains the same. + * @default 'fit' + */ + columnResizeMode?: 'fit' | 'expand'; +} -declare module 'react-table' { - // export {}; +export interface TableInstance + extends Omit, 'columns' | 'pageCount'>, + UseTableInstanceProps, + UseColumnOrderInstanceProps, + UseExpandedInstanceProps, + UseFiltersInstanceProps, + UseGlobalFiltersInstanceProps, + UseGroupByInstanceProps, + UsePaginationInstanceProps, + UseRowSelectInstanceProps, + UseRowStateInstanceProps, + UseSortByInstanceProps { + initialRows: Row[]; + columnResizeMode: TableOptions['columnResizeMode']; + tableWidth: number; +} + +export interface TableState + extends UseColumnOrderState, + UseExpandedState, + UseFiltersState, + UseGlobalFiltersState, + UseGroupByState, + UsePaginationState, + UseRowSelectState, + UseRowStateState, + UseSortByState { + hiddenColumns?: Array> | undefined; + + // UseResizeColumnsState with fixed typings + columnResizing: { + startX?: number; + columnWidth?: number; + nextColumnWidth?: number; + headerIdWidths?: Array<[string, number]>; + nextHeaderIdWidths?: Array<[string, number]>; + columnWidths: Record; + isResizingColumn?: string; + }; + isTableResizing?: boolean; + columnReorderStartIndex: number; + sticky: { + isScrolledToRight?: boolean; + isScrolledToLeft?: boolean; + }; + lastSelectedRowId?: string; +} +export interface Hooks + extends UseTableHooks, + UseExpandedHooks, + UseGroupByHooks, + UseRowSelectHooks, + UseSortByHooks {} + +export interface Cell + extends UseTableCellProps, + UseGroupByCellProps, + UseRowStateCellProps {} + +export interface ColumnInterface + extends UseTableColumnOptions, + // UseGroupByColumnOptions, + UseSortByColumnOptions, + UseFiltersColumnOptions, + UseResizeColumnsColumnOptions, + UseGlobalFiltersColumnOptions { /** - * The empty definitions of below provides a base definition for the parts used by useTable, that can then be extended in the users code. - * + * Custom class name applied to header column cell. + */ + columnClassName?: string; + /** + * Custom class name applied to each column's cell. + */ + cellClassName?: string; + /** + * Type of the data in cell. Used for manual filtering. + */ + fieldType?: FieldType; + /** + * Filter component used as a column filter. Should use filters from `tableFilters`. + */ + Filter?: Renderer> | Renderer>; + /** + * String value or custom function to use for filtering. + * Possible string values: `text`, `exactText`, `exactTextCase`, `includes`, `includesAll`, `exact`, `equals`, `between`. + * More info about these filters: https://github.com/tannerlinsley/react-table/blob/master/src/filterTypes.js + */ + filter?: FilterType | DefaultFilterTypes | string; + /** + * Function that should return whole cell element not only the content. + * Must be memoized. * @example - * export interface TableOptions - * extends - * UseExpandedOptions, - * UseFiltersOptions {} - * see https://gist.github.com/ggascoigne/646e14c9d54258e40588a13aabf0102d for more details + * { + * Header: 'Name', + * accessor: 'name', + * cellRenderer: (props) => , + * } */ - export interface TableOptions - extends Omit, 'data' | 'columns'>, - UseRowSelectOptions, - UseExpandedOptions, - UseFiltersOptions, - // UseGroupByOptions, - UsePaginationOptions, - UseGlobalFiltersOptions, - UseGlobalFiltersColumnOptions, - Omit, 'disableResizing'>, - // UseRowStateOptions, - UseSortByOptions { - /** - * List of columns. - * - * Should not have a top-level `Header` or a `columns` sub-property. They are only allowed to be passed for backwards compatibility. - * See [migration guide](https://github.com/iTwin/iTwinUI/wiki/iTwinUI-react-v2-migration-guide#breaking-changes). - */ - columns: Array>; - /** - * Table data list. - * Must be memoized. - * - * Supports expandable sub-rows using the `subRows` field in data entries. - * If some rows don't have sub-data, it is recommended to pass an empty array to `subRows` for consistent spacing. - */ - data: D[]; - /** - * Column's resize mode. - * - `fit` - when resizing it affects current and the next column, - * e.g. when increasing width of current column, next column's width will decrease. - * - `expand` - when resizing it affects only the current column, - * e.g. when increasing width of the current column, next column's width remains the same. - * @default 'fit' - */ - columnResizeMode?: 'fit' | 'expand'; - } - - export interface TableInstance - extends Omit, 'columns' | 'pageCount'>, - UseTableInstanceProps, - UseColumnOrderInstanceProps, - UseExpandedInstanceProps, - UseFiltersInstanceProps, - UseGlobalFiltersInstanceProps, - UseGroupByInstanceProps, - UsePaginationInstanceProps, - UseRowSelectInstanceProps, - UseRowStateInstanceProps, - UseSortByInstanceProps { - initialRows: Row[]; - columnResizeMode: TableOptions['columnResizeMode']; - tableWidth: number; - } - - export interface TableState - extends UseColumnOrderState, - UseExpandedState, - UseFiltersState, - UseGlobalFiltersState, - UseGroupByState, - UsePaginationState, - UseRowSelectState, - UseRowStateState, - UseSortByState { - hiddenColumns?: Array> | undefined; - - // UseResizeColumnsState with fixed typings - columnResizing: { - startX?: number; - columnWidth?: number; - nextColumnWidth?: number; - headerIdWidths?: Array<[string, number]>; - nextHeaderIdWidths?: Array<[string, number]>; - columnWidths: Record; - isResizingColumn?: string; - }; - isTableResizing?: boolean; - columnReorderStartIndex: number; - sticky: { - isScrolledToRight?: boolean; - isScrolledToLeft?: boolean; - }; - lastSelectedRowId?: string; - } - - export interface Hooks - extends UseTableHooks, - UseExpandedHooks, - UseGroupByHooks, - UseRowSelectHooks, - UseSortByHooks {} - - export interface Cell - extends UseTableCellProps, - UseGroupByCellProps, - UseRowStateCellProps {} - - export interface ColumnInterface - extends UseTableColumnOptions, - // UseGroupByColumnOptions, - UseSortByColumnOptions, - UseFiltersColumnOptions, - UseResizeColumnsColumnOptions, - UseGlobalFiltersColumnOptions { - /** - * Custom class name applied to header column cell. - */ - columnClassName?: string; - /** - * Custom class name applied to each column's cell. - */ - cellClassName?: string; - /** - * Type of the data in cell. Used for manual filtering. - */ - fieldType?: FieldType; - /** - * Filter component used as a column filter. Should use filters from `tableFilters`. - */ - Filter?: Renderer> | Renderer>; - /** - * String value or custom function to use for filtering. - * Possible string values: `text`, `exactText`, `exactTextCase`, `includes`, `includesAll`, `exact`, `equals`, `between`. - * More info about these filters: https://github.com/tannerlinsley/react-table/blob/master/src/filterTypes.js - */ - filter?: FilterType | DefaultFilterTypes | string; - /** - * Function that should return whole cell element not only the content. - * Must be memoized. - * @example - * { - * Header: 'Name', - * accessor: 'name', - * cellRenderer: (props) => , - * } - */ - cellRenderer?: (props: CellRendererProps) => React.ReactNode; - /** - * If true, column can't be reordered. - * @default false - */ - disableReordering?: boolean; - /** - * If true, column's visibility cannot be toggled. - * @default false - */ - disableToggleVisibility?: boolean; - /** - * Side on which column should be sticked to. - */ - sticky?: 'left' | 'right'; - } - - export interface ColumnInterfaceBasedOnValue { - Cell?: Renderer> | undefined; - } - - export interface ColumnGroupInterface { - columns: Array>; - } - - export type ColumnGroup = ColumnInterface & - ColumnGroupInterface & + cellRenderer?: (props: CellRendererProps) => React.ReactNode; + /** + * If true, column can't be reordered. + * @default false + */ + disableReordering?: boolean; + /** + * If true, column's visibility cannot be toggled. + * @default false + */ + disableToggleVisibility?: boolean; + /** + * Side on which column should be sticked to. + */ + sticky?: 'left' | 'right'; +} + +export interface ColumnInterfaceBasedOnValue { + Cell?: Renderer> | undefined; +} + +export interface ColumnGroupInterface { + columns: Array>; +} + +export type ColumnGroup = ColumnInterface & + ColumnGroupInterface & + ( + | { Header: string } + | ({ id: IdType } & { + Header: Renderer>; + }) + ) & { accessor?: Accessor | undefined }; // Not used, but needed for backwards compatibility + +type ValueOf = T[keyof T]; + +// The accessors like `foo.bar` are not supported, use functions instead +export type ColumnWithStrictAccessor = + ColumnInterface & + ValueOf<{ + [K in keyof D]: { + accessor: K; + } & ColumnInterfaceBasedOnValue; + }>; + +export type ColumnWithLooseAccessor = + ColumnInterface & + ColumnInterfaceBasedOnValue & ( | { Header: string } - | ({ id: IdType } & { - Header: Renderer>; - }) - ) & { accessor?: Accessor | undefined }; // Not used, but needed for backwards compatibility - - type ValueOf = T[keyof T]; - - // The accessors like `foo.bar` are not supported, use functions instead - export type ColumnWithStrictAccessor = - ColumnInterface & - ValueOf<{ - [K in keyof D]: { - accessor: K; - } & ColumnInterfaceBasedOnValue; - }>; - - export type ColumnWithLooseAccessor = - ColumnInterface & - ColumnInterfaceBasedOnValue & - ( - | { Header: string } - | { id: IdType } - | { accessor: keyof D extends never ? IdType : never } - ) & { - accessor?: - | (keyof D extends never ? IdType | Accessor : Accessor) - | undefined; - }; - - export type Column = - | ColumnGroup - | ColumnWithLooseAccessor - | ColumnWithStrictAccessor; - - export interface ColumnInstance - extends Omit, 'id'>, - ColumnInterfaceBasedOnValue, - UseTableColumnProps, - UseFiltersColumnProps, - UseGroupByColumnProps, - UseResizeColumnsColumnProps, - UseSortByColumnProps { - originalWidth: number; - resizeWidth?: number; - isResizerVisible?: boolean; - getDragAndDropProps: () => TableKeyedProps; - originalSticky?: 'left' | 'right' | 'none'; - } - - export interface HeaderGroup - extends ColumnInstance, - UseTableHeaderGroupProps {} - - export interface Row - extends UseTableRowProps, - UseExpandedRowProps, - UseGroupByRowProps, - UseRowSelectRowProps, - UseRowStateRowProps { - initialSubRows: Row[]; - } - - export interface TableCommonProps { - style?: CSSProperties | undefined; - className?: string | undefined; - role?: string | undefined; - } - - export interface TableProps extends TableCommonProps {} - - export interface TableBodyProps extends TableCommonProps {} - - export interface TableKeyedProps extends TableCommonProps { - key: React.Key; - } - - export interface TableHeaderGroupProps extends TableKeyedProps {} - - export interface TableFooterGroupProps extends TableKeyedProps {} - - export interface TableHeaderProps extends TableKeyedProps {} - - export interface TableFooterProps extends TableKeyedProps {} - - export interface TableRowProps extends TableKeyedProps {} - - export interface TableCellProps extends TableKeyedProps {} - - export interface TableToggleCommonProps extends TableCommonProps { - onChange?: ((e: ChangeEvent) => void) | undefined; - checked?: boolean | undefined; - title?: string | undefined; - indeterminate?: boolean | undefined; - } - - export interface MetaBase { - instance: TableInstance; - userProps: any; - } - - // inspired by ExtendState in https://github.com/reduxjs/redux/blob/master/src/types/store.ts - export type Meta> = [ - Extension, - ] extends [never] - ? M - : M & Extension; - - //#region useTable - export function useTable( - options: TableOptions, - ...plugins: Array> - ): TableInstance; + | { id: IdType } + | { accessor: keyof D extends never ? IdType : never } + ) & { + accessor?: + | (keyof D extends never ? IdType | Accessor : Accessor) + | undefined; + }; - /** - * NOTE: To use custom options, use "Interface Merging" to add the custom options - */ - export type UseTableOptions = { - columns: ReadonlyArray>; - data: readonly D[]; - } & Partial<{ - initialState: Partial>; - stateReducer: ( +export type Column = + | ColumnGroup + | ColumnWithLooseAccessor + | ColumnWithStrictAccessor; + +export interface ColumnInstance + extends Omit, 'id'>, + ColumnInterfaceBasedOnValue, + UseTableColumnProps, + UseFiltersColumnProps, + UseGroupByColumnProps, + UseResizeColumnsColumnProps, + UseSortByColumnProps { + originalWidth: number; + resizeWidth?: number; + isResizerVisible?: boolean; + getDragAndDropProps: () => TableKeyedProps; + originalSticky?: 'left' | 'right' | 'none'; +} + +export interface HeaderGroup + extends ColumnInstance, + UseTableHeaderGroupProps {} + +export interface Row + extends UseTableRowProps, + UseExpandedRowProps, + UseGroupByRowProps, + UseRowSelectRowProps, + UseRowStateRowProps { + initialSubRows: Row[]; +} + +export interface TableCommonProps { + style?: CSSProperties | undefined; + className?: string | undefined; + role?: string | undefined; +} + +export interface TableProps extends TableCommonProps {} + +export interface TableBodyProps extends TableCommonProps {} + +export interface TableKeyedProps extends TableCommonProps { + key: React.Key; +} + +export interface TableHeaderGroupProps extends TableKeyedProps {} + +export interface TableFooterGroupProps extends TableKeyedProps {} + +export interface TableHeaderProps extends TableKeyedProps {} + +export interface TableFooterProps extends TableKeyedProps {} + +export interface TableRowProps extends TableKeyedProps {} + +export interface TableCellProps extends TableKeyedProps {} + +export interface TableToggleCommonProps extends TableCommonProps { + onChange?: ((e: ChangeEvent) => void) | undefined; + checked?: boolean | undefined; + title?: string | undefined; + indeterminate?: boolean | undefined; +} + +export interface MetaBase { + instance: TableInstance; + userProps: any; +} + +// inspired by ExtendState in https://github.com/reduxjs/redux/blob/master/src/types/store.ts +export type Meta> = [ + Extension, +] extends [never] + ? M + : M & Extension; + +//#region useTable +export function useTable( + options: TableOptions, + ...plugins: Array> +): TableInstance; + +/** + * NOTE: To use custom options, use "Interface Merging" to add the custom options + */ +export type UseTableOptions = { + columns: ReadonlyArray>; + data: readonly D[]; +} & Partial<{ + initialState: Partial>; + stateReducer: ( + newState: TableState, + action: ActionType, + previousState: TableState, + instance?: TableInstance, + ) => TableState; + useControlledState: (state: TableState, meta: Meta) => TableState; + defaultColumn: Partial>; + getSubRows: (originalRow: D, relativeIndex: number) => D[]; + getRowId: (originalRow: D, relativeIndex: number, parent?: Row) => string; + autoResetHiddenColumns: boolean; +}>; + +export type PropGetter< + D extends object, + Props, + T extends object = never, + P = Partial, +> = ((props: P, meta: Meta) => P | P[]) | P | P[]; + +export type TablePropGetter = PropGetter; + +export type TableBodyPropGetter = PropGetter< + D, + TableBodyProps +>; + +export type HeaderPropGetter = PropGetter< + D, + TableHeaderProps, + { column: HeaderGroup } +>; + +export type FooterGroupPropGetter = PropGetter< + D, + TableFooterGroupProps, + { column: HeaderGroup } +>; + +export type HeaderGroupPropGetter = PropGetter< + D, + TableHeaderGroupProps, + { column: HeaderGroup } +>; + +export type FooterPropGetter = PropGetter< + D, + TableFooterProps, + { column: HeaderGroup } +>; + +export type RowPropGetter = PropGetter< + D, + TableRowProps, + { row: Row } +>; + +export type CellPropGetter = PropGetter< + D, + TableCellProps, + { cell: Cell } +>; + +export interface ReducerTableState + extends TableState, + Record {} + +export interface UseTableHooks extends Record { + useOptions: Array< + (options: TableOptions, args: TableOptions) => TableOptions + >; + stateReducers: Array< + ( newState: TableState, action: ActionType, - previousState: TableState, + previousState?: TableState, instance?: TableInstance, - ) => TableState; - useControlledState: (state: TableState, meta: Meta) => TableState; - defaultColumn: Partial>; - getSubRows: (originalRow: D, relativeIndex: number) => D[]; - getRowId: ( - originalRow: D, - relativeIndex: number, - parent?: Row, - ) => string; - autoResetHiddenColumns: boolean; - }>; - - export type PropGetter< - D extends object, - Props, - T extends object = never, - P = Partial, - > = ((props: P, meta: Meta) => P | P[]) | P | P[]; - - export type TablePropGetter = PropGetter; - - export type TableBodyPropGetter = PropGetter< - D, - TableBodyProps + ) => ReducerTableState | undefined >; - - export type HeaderPropGetter = PropGetter< - D, - TableHeaderProps, - { column: HeaderGroup } + columns: Array< + (columns: Array>, meta: Meta) => Array> >; - - export type FooterGroupPropGetter = PropGetter< - D, - TableFooterGroupProps, - { column: HeaderGroup } + columnsDeps: Array<(deps: any[], meta: Meta) => any[]>; + allColumns: Array< + (allColumns: Array>, meta: Meta) => Array> >; - - export type HeaderGroupPropGetter = PropGetter< - D, - TableHeaderGroupProps, - { column: HeaderGroup } + allColumnsDeps: Array<(deps: any[], meta: Meta) => any[]>; + visibleColumns: Array< + (allColumns: Array>, meta: Meta) => Array> >; - - export type FooterPropGetter = PropGetter< - D, - TableFooterProps, - { column: HeaderGroup } + visibleColumnsDeps: Array<(deps: any[], meta: Meta) => any[]>; + headerGroups: Array< + (allColumns: Array>, meta: Meta) => Array> >; - - export type RowPropGetter = PropGetter< - D, - TableRowProps, - { row: Row } + headerGroupsDeps: Array<(deps: any[], meta: Meta) => any[]>; + useInstanceBeforeDimensions: Array<(instance: TableInstance) => void>; + useInstance: Array<(instance: TableInstance) => void>; + prepareRow: Array<(row: Row, meta: Meta) => void>; + useControlledState: Array< + (state: TableState, meta: Meta) => TableState >; - export type CellPropGetter = PropGetter< - D, - TableCellProps, - { cell: Cell } - >; + getTableProps: Array>; + getTableBodyProps: Array>; + getHeaderGroupProps: Array>; + getFooterGroupProps: Array>; + getHeaderProps: Array>; + getFooterProps: Array>; + getRowProps: Array>; + getCellProps: Array>; + useFinalInstance: Array<(instance: TableInstance) => void>; +} - export interface ReducerTableState - extends TableState, - Record {} - - export interface UseTableHooks extends Record { - useOptions: Array< - (options: TableOptions, args: TableOptions) => TableOptions - >; - stateReducers: Array< - ( - newState: TableState, - action: ActionType, - previousState?: TableState, - instance?: TableInstance, - ) => ReducerTableState | undefined - >; - columns: Array< - (columns: Array>, meta: Meta) => Array> - >; - columnsDeps: Array<(deps: any[], meta: Meta) => any[]>; - allColumns: Array< - (allColumns: Array>, meta: Meta) => Array> - >; - allColumnsDeps: Array<(deps: any[], meta: Meta) => any[]>; - visibleColumns: Array< - (allColumns: Array>, meta: Meta) => Array> - >; - visibleColumnsDeps: Array<(deps: any[], meta: Meta) => any[]>; - headerGroups: Array< - ( - allColumns: Array>, - meta: Meta, - ) => Array> - >; - headerGroupsDeps: Array<(deps: any[], meta: Meta) => any[]>; - useInstanceBeforeDimensions: Array<(instance: TableInstance) => void>; - useInstance: Array<(instance: TableInstance) => void>; - prepareRow: Array<(row: Row, meta: Meta) => void>; - useControlledState: Array< - (state: TableState, meta: Meta) => TableState - >; - - getTableProps: Array>; - getTableBodyProps: Array>; - getHeaderGroupProps: Array>; - getFooterGroupProps: Array>; - getHeaderProps: Array>; - getFooterProps: Array>; - getRowProps: Array>; - getCellProps: Array>; - useFinalInstance: Array<(instance: TableInstance) => void>; - } - - export interface UseTableColumnOptions { - id?: IdType | undefined; - Header?: Renderer> | undefined; - Footer?: Renderer> | undefined; - width?: number | string | undefined; - minWidth?: number | undefined; - maxWidth?: number | undefined; - } - - type UpdateHiddenColumns = ( - oldHidden: Array>, - ) => Array>; - - export interface TableToggleHideAllColumnProps - extends TableToggleCommonProps {} - - export interface UseTableInstanceProps { - state: TableState; - plugins: Array>; - dispatch: TableDispatch; - columns: Array>; - allColumns: Array>; - visibleColumns: Array>; - headerGroups: Array>; - footerGroups: Array>; - headers: Array>; - flatHeaders: Array>; - rows: Array>; - rowsById: Record>; - getTableProps: (propGetter?: TablePropGetter) => TableProps; - getTableBodyProps: (propGetter?: TableBodyPropGetter) => TableBodyProps; - prepareRow: (row: Row) => void; - flatRows: Array>; - totalColumnsWidth: number; - allColumnsHidden: boolean; - toggleHideColumn: (columnId: IdType, value?: boolean) => void; - setHiddenColumns: ( - param: Array> | UpdateHiddenColumns, - ) => void; - toggleHideAllColumns: (value?: boolean) => void; - getToggleHideAllColumnsProps: ( - props?: Partial, - ) => TableToggleHideAllColumnProps; - getHooks: () => Hooks; - } - - export interface UseTableHeaderGroupProps { - headers: Array>; - getHeaderGroupProps: ( - propGetter?: HeaderGroupPropGetter, - ) => TableHeaderProps; - getFooterGroupProps: ( - propGetter?: FooterGroupPropGetter, - ) => TableFooterProps; - totalHeaderCount: number; // not documented - } - - export interface UseTableColumnProps { - id: IdType; - columns?: Array> | undefined; - isVisible: boolean; - render: (type: 'Header' | 'Footer' | string, props?: object) => ReactNode; - totalLeft: number; - totalWidth: number; - getHeaderProps: (propGetter?: HeaderPropGetter) => TableHeaderProps; - getFooterProps: (propGetter?: FooterPropGetter) => TableFooterProps; - toggleHidden: (value?: boolean) => void; - parent?: ColumnInstance | undefined; // not documented - getToggleHiddenProps: (userProps?: any) => any; - depth: number; // not documented - placeholderOf?: ColumnInstance | undefined; - } - - export interface UseTableRowProps { - cells: Array>; - allCells: Array>; - values: Record, CellValue>; - getRowProps: (propGetter?: RowPropGetter) => TableRowProps; - index: number; - original: D; - id: string; - subRows: Array>; - } - - export interface UseTableCellProps { - column: ColumnInstance; - row: Row; - value: CellValue; - getCellProps: (propGetter?: CellPropGetter) => TableCellProps; - render: (type: 'Cell' | string, userProps?: object) => ReactNode; - } - - export type HeaderProps = TableInstance & { - column: ColumnInstance; - }; +export interface UseTableColumnOptions { + id?: IdType | undefined; + Header?: Renderer> | undefined; + Footer?: Renderer> | undefined; + width?: number | string | undefined; + minWidth?: number | undefined; + maxWidth?: number | undefined; +} - export type FooterProps = TableInstance & { - column: ColumnInstance; - }; +type UpdateHiddenColumns = ( + oldHidden: Array>, +) => Array>; + +export interface TableToggleHideAllColumnProps extends TableToggleCommonProps {} + +export interface UseTableInstanceProps { + state: TableState; + plugins: Array>; + dispatch: TableDispatch; + columns: Array>; + allColumns: Array>; + visibleColumns: Array>; + headerGroups: Array>; + footerGroups: Array>; + headers: Array>; + flatHeaders: Array>; + rows: Array>; + rowsById: Record>; + getTableProps: (propGetter?: TablePropGetter) => TableProps; + getTableBodyProps: (propGetter?: TableBodyPropGetter) => TableBodyProps; + prepareRow: (row: Row) => void; + flatRows: Array>; + totalColumnsWidth: number; + allColumnsHidden: boolean; + toggleHideColumn: (columnId: IdType, value?: boolean) => void; + setHiddenColumns: (param: Array> | UpdateHiddenColumns) => void; + toggleHideAllColumns: (value?: boolean) => void; + getToggleHideAllColumnsProps: ( + props?: Partial, + ) => TableToggleHideAllColumnProps; + getHooks: () => Hooks; +} - export type CellProps = TableInstance & { - column: ColumnInstance; - row: Row; - cell: Cell; - value: CellValue; - }; +export interface UseTableHeaderGroupProps { + headers: Array>; + getHeaderGroupProps: ( + propGetter?: HeaderGroupPropGetter, + ) => TableHeaderProps; + getFooterGroupProps: ( + propGetter?: FooterGroupPropGetter, + ) => TableFooterProps; + totalHeaderCount: number; // not documented +} - export type Accessor = ( - originalRow: D, - index: number, - sub: { - subRows: D[]; - depth: number; - data: D[]; - }, - ) => CellValue; - - //#endregion - - // Plugins - - //#region useAbsoluteLayout - export function useAbsoluteLayout( - hooks: Hooks, - ): void; - - export namespace useAbsoluteLayout { - const pluginName = 'useAbsoluteLayout'; - } - //#endregion - - //#region useBlockLayout - export function useBlockLayout(hooks: Hooks): void; - - export namespace useBlockLayout { - const pluginName = 'useBlockLayout'; - } - //#endregion - - //#region useColumnOrder - export function useColumnOrder(hooks: Hooks): void; - - export namespace useColumnOrder { - const pluginName = 'useColumnOrder'; - } - - export interface UseColumnOrderState { - columnOrder: Array>; - } - - export interface UseColumnOrderInstanceProps { - setColumnOrder: ( - updater: - | ((columnOrder: Array>) => Array>) - | Array>, - ) => void; - } - - //#endregion - - //#region useExpanded - export function useExpanded(hooks: Hooks): void; - - export namespace useExpanded { - const pluginName = 'useExpanded'; - } - - export interface TableExpandedToggleProps extends TableKeyedProps {} - - export type UseExpandedOptions = Partial<{ - manualExpandedKey: IdType; - paginateExpandedRows: boolean; - expandSubRows: boolean; - autoResetExpanded?: boolean | undefined; - }>; - - export interface UseExpandedHooks { - getToggleRowsExpandedProps: Array>; - getToggleAllRowsExpandedProps: Array>; - } - - export interface UseExpandedState { - expanded: Record, boolean>; - } - - export interface UseExpandedInstanceProps { - preExpandedRows: Array>; - expandedRows: Array>; - rows: Array>; - expandedDepth: number; - isAllRowsExpanded: boolean; - toggleRowExpanded: (id: Array>, value?: boolean) => void; - toggleAllRowsExpanded: (value?: boolean) => void; - } - - export interface UseExpandedRowProps { - isExpanded: boolean; - canExpand: boolean; - subRows: Array>; - toggleRowExpanded: (value?: boolean) => void; - getToggleRowExpandedProps: ( - props?: Partial, - ) => TableExpandedToggleProps; - depth: number; - } - - //#endregion - - //#region useFilters - export function useFilters(hooks: Hooks): void; - - export namespace useFilters { - const pluginName = 'useFilters'; - } - - export type UseFiltersOptions = Partial<{ - manualFilters: boolean; - disableFilters: boolean; - defaultCanFilter: boolean; - filterTypes: FilterTypes; - autoResetFilters?: boolean | undefined; - }>; - - export interface UseFiltersState { - filters: Filters; - } - - export type UseFiltersColumnOptions = Partial<{ - Filter: Renderer>; - disableFilters: boolean; - defaultCanFilter: boolean; - filter: FilterType | DefaultFilterTypes | string; - }>; - - export interface UseFiltersInstanceProps { - preFilteredRows: Array>; - preFilteredFlatRows: Array>; - preFilteredRowsById: Record>; - filteredRows: Array>; - filteredFlatRows: Array>; - filteredRowsById: Record>; - rows: Array>; - flatRows: Array>; - rowsById: Record>; - setFilter: ( - columnId: IdType, - updater: ((filterValue: FilterValue) => FilterValue) | FilterValue, - ) => void; - setAllFilters: ( - updater: Filters | ((filters: Filters) => Filters), - ) => void; - } - - export interface UseFiltersColumnProps { - canFilter: boolean; - setFilter: ( - updater: ((filterValue: FilterValue) => FilterValue) | FilterValue, - ) => void; - filterValue: FilterValue; - preFilteredRows: Array>; - filteredRows: Array>; - } - - export type FilterProps = HeaderProps; - export type FilterValue = any; - export type Filters = Array<{ - id: IdType; - value: FilterValue; - }>; - export type FilterTypes = Record>; - - export type DefaultFilterTypes = - | 'text' - | 'exactText' - | 'exactTextCase' - | 'includes' - | 'includesAll' - | 'exact' - | 'equals' - | 'between'; - - export interface FilterType { - ( - rows: Array>, - columnIds: Array>, - filterValue: FilterValue, - ): Array>; - - autoRemove?: ((filterValue: FilterValue) => boolean) | undefined; - } - - //#endregion - - //#region useFlexLayout - export function useFlexLayout(hooks: Hooks): void; - - export namespace useFlexLayout { - const pluginName = 'useFlexLayout'; - } - //#endregion - - //#region useGridLayout - export function useGridLayout(hooks: Hooks): void; - - export namespace useGridLayout { - const pluginName = 'useGridLayout'; - } - //#endregion - - //#region useGlobalFilter - export function useGlobalFilter(hooks: Hooks): void; - - export namespace useGlobalFilter { - const pluginName = 'useGlobalFilter'; - } - - export type UseGlobalFiltersOptions = Partial<{ - globalFilter: - | (( - rows: Array>, - columnIds: Array>, - filterValue: any, - ) => Array>) - | string; - manualGlobalFilter: boolean; - filterTypes: FilterTypes; - autoResetGlobalFilter?: boolean | undefined; - disableGlobalFilter?: boolean | undefined; - }>; - - export interface UseGlobalFiltersState { - globalFilter: any; - } - - export type UseGlobalFiltersColumnOptions = Partial<{ - disableGlobalFilter?: boolean | undefined; - }>; - - export interface UseGlobalFiltersInstanceProps { - preGlobalFilteredRows: Array>; - preGlobalFilteredFlatRows: Array>; - preGlobalFilteredRowsById: Record>; - globalFilteredRows: Array>; - globalFilteredFlatRows: Array>; - globalFilteredRowsById: Record>; - rows: Array>; - flatRows: Array>; - rowsById: Record>; - setGlobalFilter: (filterValue: FilterValue) => void; - } - - //#endregion - - //#region useGroupBy - export function useGroupBy(hooks: Hooks): void; - - export namespace useGroupBy { - const pluginName = 'useGroupBy'; - } - - export interface TableGroupByToggleProps { - title?: string | undefined; - style?: CSSProperties | undefined; - onClick?: ((e: MouseEvent) => void) | undefined; - } - - export type UseGroupByOptions = Partial<{ - manualGroupBy: boolean; - disableGroupBy: boolean; - defaultCanGroupBy: boolean; - aggregations: Record>; - groupByFn: ( - rows: Array>, - columnId: IdType, - ) => Record>>; - autoResetGroupBy?: boolean | undefined; - }>; - - export interface UseGroupByHooks { - getGroupByToggleProps: Array>; - } - - export interface UseGroupByState { - groupBy: Array>; - } - - export type UseGroupByColumnOptions = Partial<{ - aggregate: Aggregator; - Aggregated: Renderer>; - disableGroupBy: boolean; - defaultCanGroupBy: boolean; - }>; - - export interface UseGroupByInstanceProps { - preGroupedRows: Array>; - preGroupedFlatRows: Array>; - preGroupedRowsById: Record>; - groupedRows: Array>; - groupedFlatRows: Array>; - groupedRowsById: Record>; - onlyGroupedFlatRows: Array>; - onlyGroupedRowsById: Record>; - nonGroupedFlatRows: Array>; - nonGroupedRowsById: Record>; - rows: Array>; - flatRows: Array>; - rowsById: Record>; - toggleGroupBy: (columnId: IdType, value?: boolean) => void; - } - - export interface UseGroupByColumnProps { - canGroupBy: boolean; - isGrouped: boolean; - groupedIndex: number; - toggleGroupBy: () => void; - getGroupByToggleProps: ( - props?: Partial, - ) => TableGroupByToggleProps; - } - - export interface UseGroupByRowProps { - isGrouped: boolean; - groupByID: IdType; - groupByVal: string; - values: Record, AggregatedValue>; - subRows: Array>; - leafRows: Array>; +export interface UseTableColumnProps { + id: IdType; + columns?: Array> | undefined; + isVisible: boolean; + render: (type: 'Header' | 'Footer' | string, props?: object) => ReactNode; + totalLeft: number; + totalWidth: number; + getHeaderProps: (propGetter?: HeaderPropGetter) => TableHeaderProps; + getFooterProps: (propGetter?: FooterPropGetter) => TableFooterProps; + toggleHidden: (value?: boolean) => void; + parent?: ColumnInstance | undefined; // not documented + getToggleHiddenProps: (userProps?: any) => any; + depth: number; // not documented + placeholderOf?: ColumnInstance | undefined; +} + +export interface UseTableRowProps { + cells: Array>; + allCells: Array>; + values: Record, CellValue>; + getRowProps: (propGetter?: RowPropGetter) => TableRowProps; + index: number; + original: D; + id: string; + subRows: Array>; +} + +export interface UseTableCellProps { + column: ColumnInstance; + row: Row; + value: CellValue; + getCellProps: (propGetter?: CellPropGetter) => TableCellProps; + render: (type: 'Cell' | string, userProps?: object) => ReactNode; +} + +export type HeaderProps = TableInstance & { + column: ColumnInstance; +}; + +export type FooterProps = TableInstance & { + column: ColumnInstance; +}; + +export type CellProps = TableInstance & { + column: ColumnInstance; + row: Row; + cell: Cell; + value: CellValue; +}; + +export type Accessor = ( + originalRow: D, + index: number, + sub: { + subRows: D[]; depth: number; - id: string; - index: number; - } - - export interface UseGroupByCellProps { - isGrouped: boolean; - isPlaceholder: boolean; - isAggregated: boolean; - } - - export type DefaultAggregators = - | 'sum' - | 'average' - | 'median' - | 'uniqueCount' - | 'count'; - - export type AggregatorFn = ( - columnValues: CellValue[], + data: D[]; + }, +) => CellValue; + +//#endregion + +// Plugins + +//#region useAbsoluteLayout +export function useAbsoluteLayout(hooks: Hooks): void; + +export namespace useAbsoluteLayout { + const pluginName = 'useAbsoluteLayout'; +} +//#endregion + +//#region useBlockLayout +export function useBlockLayout(hooks: Hooks): void; + +export namespace useBlockLayout { + const pluginName = 'useBlockLayout'; +} +//#endregion + +//#region useColumnOrder +export function useColumnOrder(hooks: Hooks): void; + +export namespace useColumnOrder { + const pluginName = 'useColumnOrder'; +} + +export interface UseColumnOrderState { + columnOrder: Array>; +} + +export interface UseColumnOrderInstanceProps { + setColumnOrder: ( + updater: + | ((columnOrder: Array>) => Array>) + | Array>, + ) => void; +} + +//#endregion + +//#region useExpanded +export function useExpanded(hooks: Hooks): void; + +export namespace useExpanded { + const pluginName = 'useExpanded'; +} + +export interface TableExpandedToggleProps extends TableKeyedProps {} + +export type UseExpandedOptions = Partial<{ + manualExpandedKey: IdType; + paginateExpandedRows: boolean; + expandSubRows: boolean; + autoResetExpanded?: boolean | undefined; +}>; + +export interface UseExpandedHooks { + getToggleRowsExpandedProps: Array>; + getToggleAllRowsExpandedProps: Array>; +} + +export interface UseExpandedState { + expanded: Record, boolean>; +} + +export interface UseExpandedInstanceProps { + preExpandedRows: Array>; + expandedRows: Array>; + rows: Array>; + expandedDepth: number; + isAllRowsExpanded: boolean; + toggleRowExpanded: (id: Array>, value?: boolean) => void; + toggleAllRowsExpanded: (value?: boolean) => void; +} + +export interface UseExpandedRowProps { + isExpanded: boolean; + canExpand: boolean; + subRows: Array>; + toggleRowExpanded: (value?: boolean) => void; + getToggleRowExpandedProps: ( + props?: Partial, + ) => TableExpandedToggleProps; + depth: number; +} + +//#endregion + +//#region useFilters +export function useFilters(hooks: Hooks): void; + +export namespace useFilters { + const pluginName = 'useFilters'; +} + +export type UseFiltersOptions = Partial<{ + manualFilters: boolean; + disableFilters: boolean; + defaultCanFilter: boolean; + filterTypes: FilterTypes; + autoResetFilters?: boolean | undefined; +}>; + +export interface UseFiltersState { + filters: Filters; +} + +export type UseFiltersColumnOptions = Partial<{ + Filter: Renderer>; + disableFilters: boolean; + defaultCanFilter: boolean; + filter: FilterType | DefaultFilterTypes | string; +}>; + +export interface UseFiltersInstanceProps { + preFilteredRows: Array>; + preFilteredFlatRows: Array>; + preFilteredRowsById: Record>; + filteredRows: Array>; + filteredFlatRows: Array>; + filteredRowsById: Record>; + rows: Array>; + flatRows: Array>; + rowsById: Record>; + setFilter: ( + columnId: IdType, + updater: ((filterValue: FilterValue) => FilterValue) | FilterValue, + ) => void; + setAllFilters: ( + updater: Filters | ((filters: Filters) => Filters), + ) => void; +} + +export interface UseFiltersColumnProps { + canFilter: boolean; + setFilter: ( + updater: ((filterValue: FilterValue) => FilterValue) | FilterValue, + ) => void; + filterValue: FilterValue; + preFilteredRows: Array>; + filteredRows: Array>; +} + +export type FilterProps = HeaderProps; +export type FilterValue = any; +export type Filters = Array<{ + id: IdType; + value: FilterValue; +}>; +export type FilterTypes = Record>; + +export type DefaultFilterTypes = + | 'text' + | 'exactText' + | 'exactTextCase' + | 'includes' + | 'includesAll' + | 'exact' + | 'equals' + | 'between'; + +export interface FilterType { + ( rows: Array>, - isAggregated: boolean, - ) => AggregatedValue; - export type Aggregator = - | AggregatorFn - | DefaultAggregators + columnIds: Array>, + filterValue: FilterValue, + ): Array>; + + autoRemove?: ((filterValue: FilterValue) => boolean) | undefined; +} + +//#endregion + +//#region useFlexLayout +export function useFlexLayout(hooks: Hooks): void; + +export namespace useFlexLayout { + const pluginName = 'useFlexLayout'; +} +//#endregion + +//#region useGridLayout +export function useGridLayout(hooks: Hooks): void; + +export namespace useGridLayout { + const pluginName = 'useGridLayout'; +} +//#endregion + +//#region useGlobalFilter +export function useGlobalFilter(hooks: Hooks): void; + +export namespace useGlobalFilter { + const pluginName = 'useGlobalFilter'; +} + +export type UseGlobalFiltersOptions = Partial<{ + globalFilter: + | (( + rows: Array>, + columnIds: Array>, + filterValue: any, + ) => Array>) | string; - export type AggregatedValue = any; - //#endregion - - //#region usePagination - export function usePagination(hooks: Hooks): void; - - export namespace usePagination { - const pluginName = 'usePagination'; - } - - export type UsePaginationOptions = Partial<{ - pageCount: number; - manualPagination: boolean; - autoResetPage?: boolean | undefined; - paginateExpandedRows: boolean; - }>; - - export interface UsePaginationState { - pageSize: number; - pageIndex: number; - } - - export interface UsePaginationInstanceProps { - page: Array>; - pageCount: number; - pageOptions: number[]; - canPreviousPage: boolean; - canNextPage: boolean; - gotoPage: (updater: ((pageIndex: number) => number) | number) => void; - previousPage: () => void; - nextPage: () => void; - setPageSize: (pageSize: number) => void; - } - - //#endregion - - //#region useResizeColumns - export function useResizeColumns( - hooks: Hooks, - ): void; - - export namespace useResizeColumns { - const pluginName = 'useResizeColumns'; - } - - export interface UseResizeColumnsOptions { - disableResizing?: boolean | undefined; - autoResetResize?: boolean | undefined; - } - - export interface UseResizeColumnsState { - columnResizing: { - startX?: number | undefined; - columnWidth: number; - headerIdWidths: Record; - columnWidths: any; - isResizingColumn?: string | undefined; - }; - } - - export interface UseResizeColumnsColumnOptions { - disableResizing?: boolean | undefined; - } - - export interface TableResizerProps {} - - export interface UseResizeColumnsColumnProps { - getResizerProps: (props?: Partial) => TableResizerProps; - canResize: boolean; - isResizing: boolean; - } - - //#endregion - - //#region useRowSelect - export function useRowSelect(hooks: Hooks): void; - - export namespace useRowSelect { - const pluginName = 'useRowSelect'; - } - - export interface TableToggleAllRowsSelectedProps - extends TableToggleCommonProps {} - - export interface TableToggleRowsSelectedProps - extends TableToggleCommonProps {} - - export type UseRowSelectOptions = Partial<{ - manualRowSelectedKey: IdType; - autoResetSelectedRows: boolean; - selectSubRows: boolean; - }>; - - export interface UseRowSelectHooks { - getToggleRowSelectedProps: Array< - PropGetter - >; - getToggleAllRowsSelectedProps: Array< - PropGetter - >; - getToggleAllPageRowsSelectedProps: Array< - PropGetter - >; - } - - export interface UseRowSelectState { - selectedRowIds: Record, boolean>; - } - - export interface UseRowSelectInstanceProps { - toggleRowSelected: (rowId: IdType, set?: boolean) => void; - toggleAllRowsSelected: (value?: boolean) => void; - getToggleAllRowsSelectedProps: ( - props?: Partial, - ) => TableToggleAllRowsSelectedProps; - getToggleAllPageRowsSelectedProps: ( - props?: Partial, - ) => TableToggleAllRowsSelectedProps; - isAllRowsSelected: boolean; - selectedFlatRows: Array>; - } - - export interface UseRowSelectRowProps { - isSelected: boolean; - isSomeSelected: boolean; - toggleRowSelected: (set?: boolean) => void; - getToggleRowSelectedProps: ( - props?: Partial, - ) => TableToggleRowsSelectedProps; - } - - //#endregion - - //#region useRowState - export function useRowState(hooks: Hooks): void; - - export namespace useRowState { - const pluginName = 'useRowState'; - } - - export type UseRowStateOptions = Partial<{ - initialRowStateAccessor: (row: Row) => UseRowStateLocalState; - getResetRowStateDeps: (instance: TableInstance) => any[]; - autoResetRowState?: boolean | undefined; - }>; - - export interface UseRowStateState { - rowState: Record }>; - } - - export interface UseRowStateInstanceProps { - setRowState: (rowPath: string[], updater: UseRowUpdater) => void; - setCellState: ( - rowPath: string[], - columnId: IdType, - updater: UseRowUpdater, - ) => void; - } - - export interface UseRowStateRowProps { - state: UseRowStateLocalState; - setState: (updater: UseRowUpdater) => void; - } - - export interface UseRowStateCellProps { - state: UseRowStateLocalState; - setState: (updater: UseRowUpdater) => void; - } - - export type UseRowUpdater = T | ((prev: T) => T); - export type UseRowStateLocalState = Record< - IdType, - T + manualGlobalFilter: boolean; + filterTypes: FilterTypes; + autoResetGlobalFilter?: boolean | undefined; + disableGlobalFilter?: boolean | undefined; +}>; + +export interface UseGlobalFiltersState { + globalFilter: any; +} + +export type UseGlobalFiltersColumnOptions = Partial<{ + disableGlobalFilter?: boolean | undefined; +}>; + +export interface UseGlobalFiltersInstanceProps { + preGlobalFilteredRows: Array>; + preGlobalFilteredFlatRows: Array>; + preGlobalFilteredRowsById: Record>; + globalFilteredRows: Array>; + globalFilteredFlatRows: Array>; + globalFilteredRowsById: Record>; + rows: Array>; + flatRows: Array>; + rowsById: Record>; + setGlobalFilter: (filterValue: FilterValue) => void; +} + +//#endregion + +//#region useGroupBy +export function useGroupBy(hooks: Hooks): void; + +export namespace useGroupBy { + const pluginName = 'useGroupBy'; +} + +export interface TableGroupByToggleProps { + title?: string | undefined; + style?: CSSProperties | undefined; + onClick?: ((e: MouseEvent) => void) | undefined; +} + +export type UseGroupByOptions = Partial<{ + manualGroupBy: boolean; + disableGroupBy: boolean; + defaultCanGroupBy: boolean; + aggregations: Record>; + groupByFn: ( + rows: Array>, + columnId: IdType, + ) => Record>>; + autoResetGroupBy?: boolean | undefined; +}>; + +export interface UseGroupByHooks { + getGroupByToggleProps: Array>; +} + +export interface UseGroupByState { + groupBy: Array>; +} + +export type UseGroupByColumnOptions = Partial<{ + aggregate: Aggregator; + Aggregated: Renderer>; + disableGroupBy: boolean; + defaultCanGroupBy: boolean; +}>; + +export interface UseGroupByInstanceProps { + preGroupedRows: Array>; + preGroupedFlatRows: Array>; + preGroupedRowsById: Record>; + groupedRows: Array>; + groupedFlatRows: Array>; + groupedRowsById: Record>; + onlyGroupedFlatRows: Array>; + onlyGroupedRowsById: Record>; + nonGroupedFlatRows: Array>; + nonGroupedRowsById: Record>; + rows: Array>; + flatRows: Array>; + rowsById: Record>; + toggleGroupBy: (columnId: IdType, value?: boolean) => void; +} + +export interface UseGroupByColumnProps { + canGroupBy: boolean; + isGrouped: boolean; + groupedIndex: number; + toggleGroupBy: () => void; + getGroupByToggleProps: ( + props?: Partial, + ) => TableGroupByToggleProps; +} + +export interface UseGroupByRowProps { + isGrouped: boolean; + groupByID: IdType; + groupByVal: string; + values: Record, AggregatedValue>; + subRows: Array>; + leafRows: Array>; + depth: number; + id: string; + index: number; +} + +export interface UseGroupByCellProps { + isGrouped: boolean; + isPlaceholder: boolean; + isAggregated: boolean; +} + +export type DefaultAggregators = + | 'sum' + | 'average' + | 'median' + | 'uniqueCount' + | 'count'; + +export type AggregatorFn = ( + columnValues: CellValue[], + rows: Array>, + isAggregated: boolean, +) => AggregatedValue; +export type Aggregator = + | AggregatorFn + | DefaultAggregators + | string; +export type AggregatedValue = any; +//#endregion + +//#region usePagination +export function usePagination(hooks: Hooks): void; + +export namespace usePagination { + const pluginName = 'usePagination'; +} + +export type UsePaginationOptions = Partial<{ + pageCount: number; + manualPagination: boolean; + autoResetPage?: boolean | undefined; + paginateExpandedRows: boolean; +}>; + +export interface UsePaginationState { + pageSize: number; + pageIndex: number; +} + +export interface UsePaginationInstanceProps { + page: Array>; + pageCount: number; + pageOptions: number[]; + canPreviousPage: boolean; + canNextPage: boolean; + gotoPage: (updater: ((pageIndex: number) => number) | number) => void; + previousPage: () => void; + nextPage: () => void; + setPageSize: (pageSize: number) => void; +} + +//#endregion + +//#region useResizeColumns +export function useResizeColumns(hooks: Hooks): void; + +export namespace useResizeColumns { + const pluginName = 'useResizeColumns'; +} + +export interface UseResizeColumnsOptions { + disableResizing?: boolean | undefined; + autoResetResize?: boolean | undefined; +} + +export interface UseResizeColumnsState { + columnResizing: { + startX?: number | undefined; + columnWidth: number; + headerIdWidths: Record; + columnWidths: any; + isResizingColumn?: string | undefined; + }; +} + +export interface UseResizeColumnsColumnOptions { + disableResizing?: boolean | undefined; +} + +export interface TableResizerProps {} + +export interface UseResizeColumnsColumnProps { + getResizerProps: (props?: Partial) => TableResizerProps; + canResize: boolean; + isResizing: boolean; +} + +//#endregion + +//#region useRowSelect +export function useRowSelect(hooks: Hooks): void; + +export namespace useRowSelect { + const pluginName = 'useRowSelect'; +} + +export interface TableToggleAllRowsSelectedProps + extends TableToggleCommonProps {} + +export interface TableToggleRowsSelectedProps extends TableToggleCommonProps {} + +export type UseRowSelectOptions = Partial<{ + manualRowSelectedKey: IdType; + autoResetSelectedRows: boolean; + selectSubRows: boolean; +}>; + +export interface UseRowSelectHooks { + getToggleRowSelectedProps: Array>; + getToggleAllRowsSelectedProps: Array< + PropGetter + >; + getToggleAllPageRowsSelectedProps: Array< + PropGetter >; - //#endregion - - //#region useSortBy - export function useSortBy(hooks: Hooks): void; - - export namespace useSortBy { - const pluginName = 'useSortBy'; - } - - export interface TableSortByToggleProps { - title?: string | undefined; - style?: CSSProperties | undefined; - onClick?: ((e: MouseEvent) => void) | undefined; - } - - export type UseSortByOptions = Partial<{ - manualSortBy: boolean; - disableSortBy: boolean; - defaultCanSort: boolean; - disableMultiSort: boolean; - isMultiSortEvent: (e: MouseEvent) => boolean; - maxMultiSortColCount: number; - disableSortRemove: boolean; - disabledMultiRemove: boolean; - orderByFn: ( - rows: Array>, - sortFns: Array>, - directions: boolean[], - ) => Array>; - sortTypes: Record>; - autoResetSortBy?: boolean | undefined; - }>; - - export interface UseSortByHooks { - getSortByToggleProps: Array>; - } - - export interface UseSortByState { - sortBy: Array>; - } - - export type UseSortByColumnOptions = Partial<{ - defaultCanSort: boolean; - disableSortBy: boolean; - sortDescFirst: boolean; - sortInverted: boolean; - sortType: SortByFn | DefaultSortTypes | string; - }>; - - export interface UseSortByInstanceProps { - rows: Array>; - preSortedRows: Array>; - setSortBy: (sortBy: Array>) => void; - toggleSortBy: ( - columnId: IdType, - descending?: boolean, - isMulti?: boolean, - ) => void; - } - - export interface UseSortByColumnProps { - canSort: boolean; - toggleSortBy: (descending?: boolean, multi?: boolean) => void; - getSortByToggleProps: ( - props?: Partial, - ) => TableSortByToggleProps; - clearSortBy: () => void; - isSorted: boolean; - sortedIndex: number; - isSortedDesc: boolean | undefined; - } - - export type OrderByFn = ( - rowA: Row, - rowB: Row, - ) => number; - export type SortByFn = ( - rowA: Row, - rowB: Row, +} + +export interface UseRowSelectState { + selectedRowIds: Record, boolean>; +} + +export interface UseRowSelectInstanceProps { + toggleRowSelected: (rowId: IdType, set?: boolean) => void; + toggleAllRowsSelected: (value?: boolean) => void; + getToggleAllRowsSelectedProps: ( + props?: Partial, + ) => TableToggleAllRowsSelectedProps; + getToggleAllPageRowsSelectedProps: ( + props?: Partial, + ) => TableToggleAllRowsSelectedProps; + isAllRowsSelected: boolean; + selectedFlatRows: Array>; +} + +export interface UseRowSelectRowProps { + isSelected: boolean; + isSomeSelected: boolean; + toggleRowSelected: (set?: boolean) => void; + getToggleRowSelectedProps: ( + props?: Partial, + ) => TableToggleRowsSelectedProps; +} + +//#endregion + +//#region useRowState +export function useRowState(hooks: Hooks): void; + +export namespace useRowState { + const pluginName = 'useRowState'; +} + +export type UseRowStateOptions = Partial<{ + initialRowStateAccessor: (row: Row) => UseRowStateLocalState; + getResetRowStateDeps: (instance: TableInstance) => any[]; + autoResetRowState?: boolean | undefined; +}>; + +export interface UseRowStateState { + rowState: Record }>; +} + +export interface UseRowStateInstanceProps { + setRowState: (rowPath: string[], updater: UseRowUpdater) => void; + setCellState: ( + rowPath: string[], columnId: IdType, - desc?: boolean, - ) => number; - - export type DefaultSortTypes = - | 'alphanumeric' - | 'datetime' - | 'basic' - | 'string' - | 'number'; - - export interface SortingRule { - id: IdType; - desc?: boolean | undefined; - } - - //#endregion - - // Additional API - export const actions: Record; - export type ActionType = { type: string } & Record; - export const defaultColumn: Partial & Record; - - // Helpers - export type StringKey = Extract; - export type IdType = StringKey | string; - export type CellValue = V; - - export type Renderer = - | ComponentType - | ReactElement - | string - | number - | ReactFragment; - - export interface PluginHook { - (hooks: Hooks): void; - pluginName?: string | undefined; - } - - export type TableDispatch = (action: A) => void; - - // utils - export function defaultOrderByFn( - arr: Array>, - funcs: Array>, - dirs: boolean[], - ): Array>; + updater: UseRowUpdater, + ) => void; +} - export function defaultGroupByFn( +export interface UseRowStateRowProps { + state: UseRowStateLocalState; + setState: (updater: UseRowUpdater) => void; +} + +export interface UseRowStateCellProps { + state: UseRowStateLocalState; + setState: (updater: UseRowUpdater) => void; +} + +export type UseRowUpdater = T | ((prev: T) => T); +export type UseRowStateLocalState = Record< + IdType, + T +>; +//#endregion + +//#region useSortBy +export function useSortBy(hooks: Hooks): void; + +export namespace useSortBy { + const pluginName = 'useSortBy'; +} + +export interface TableSortByToggleProps { + title?: string | undefined; + style?: CSSProperties | undefined; + onClick?: ((e: MouseEvent) => void) | undefined; +} + +export type UseSortByOptions = Partial<{ + manualSortBy: boolean; + disableSortBy: boolean; + defaultCanSort: boolean; + disableMultiSort: boolean; + isMultiSortEvent: (e: MouseEvent) => boolean; + maxMultiSortColCount: number; + disableSortRemove: boolean; + disabledMultiRemove: boolean; + orderByFn: ( rows: Array>, + sortFns: Array>, + directions: boolean[], + ) => Array>; + sortTypes: Record>; + autoResetSortBy?: boolean | undefined; +}>; + +export interface UseSortByHooks { + getSortByToggleProps: Array>; +} + +export interface UseSortByState { + sortBy: Array>; +} + +export type UseSortByColumnOptions = Partial<{ + defaultCanSort: boolean; + disableSortBy: boolean; + sortDescFirst: boolean; + sortInverted: boolean; + sortType: SortByFn | DefaultSortTypes | string; +}>; + +export interface UseSortByInstanceProps { + rows: Array>; + preSortedRows: Array>; + setSortBy: (sortBy: Array>) => void; + toggleSortBy: ( columnId: IdType, - ): Record>>; - - export function makePropGetter(hooks: Hooks, ...meta: any[]): any; - - export function reduceHooks( - hooks: Hooks, - initial: T, - ...args: any[] - ): T; - - export function loopHooks(hooks: Hooks, ...args: any[]): void; - - export function ensurePluginOrder( - plugins: Array>, - befores: string[], - pluginName: string, - ): void; - - export function functionalUpdate( - updater: any, - old: Partial>, - ): Partial>; - - export function useGetLatest(obj: T): () => T; - - export function safeUseLayoutEffect( - effect: EffectCallback, - deps?: DependencyList, - ): void; - - export function useMountedLayoutEffect( - effect: EffectCallback, - deps?: DependencyList, - ): void; - - export function useAsyncDebounce any>( - defaultFn: F, - defaultWait?: number, - ): F; - - export function makeRenderer( - instance: TableInstance, - column: ColumnInstance, - meta?: any, - ): ReactElement; - - ////////////////////////////////////////////////////////////////////////////////////////////////// - // Custom Additions (parts from the old file called react-table-config.ts) - - export type FieldType = 'text' | 'number' | 'date' | string; - - export type CellRendererProps = { - /** - * Cell HTML props passed from the Table. - */ - cellElementProps: TableCellProps; - /** - * Table specific cell props like `column`, `row`. - */ - cellProps: CellProps; - /** - * Cell's content. - */ - children: React.ReactNode; - /** - * Function that returns whether the cell is disabled. - */ - isDisabled?: (rowData: D) => boolean; - }; + descending?: boolean, + isMulti?: boolean, + ) => void; +} + +export interface UseSortByColumnProps { + canSort: boolean; + toggleSortBy: (descending?: boolean, multi?: boolean) => void; + getSortByToggleProps: ( + props?: Partial, + ) => TableSortByToggleProps; + clearSortBy: () => void; + isSorted: boolean; + sortedIndex: number; + isSortedDesc: boolean | undefined; +} + +export type OrderByFn = ( + rowA: Row, + rowB: Row, +) => number; +export type SortByFn = ( + rowA: Row, + rowB: Row, + columnId: IdType, + desc?: boolean, +) => number; + +export type DefaultSortTypes = + | 'alphanumeric' + | 'datetime' + | 'basic' + | 'string' + | 'number'; + +export interface SortingRule { + id: IdType; + desc?: boolean | undefined; +} + +//#endregion + +// Additional API +export const actions: Record; +export type ActionType = { type: string } & Record; +export const defaultColumn: Partial & Record; + +// Helpers +export type StringKey = Extract; +export type IdType = StringKey | string; +export type CellValue = V; + +export type Renderer = + | ComponentType + | ReactElement + | string + | number + | ReactFragment; + +export interface PluginHook { + (hooks: Hooks): void; + pluginName?: string | undefined; } + +export type TableDispatch = (action: A) => void; + +// utils +export function defaultOrderByFn( + arr: Array>, + funcs: Array>, + dirs: boolean[], +): Array>; + +export function defaultGroupByFn( + rows: Array>, + columnId: IdType, +): Record>>; + +export function makePropGetter(hooks: Hooks, ...meta: any[]): any; + +export function reduceHooks( + hooks: Hooks, + initial: T, + ...args: any[] +): T; + +export function loopHooks(hooks: Hooks, ...args: any[]): void; + +export function ensurePluginOrder( + plugins: Array>, + befores: string[], + pluginName: string, +): void; + +export function functionalUpdate( + updater: any, + old: Partial>, +): Partial>; + +export function useGetLatest(obj: T): () => T; + +export function safeUseLayoutEffect( + effect: EffectCallback, + deps?: DependencyList, +): void; + +export function useMountedLayoutEffect( + effect: EffectCallback, + deps?: DependencyList, +): void; + +export function useAsyncDebounce any>( + defaultFn: F, + defaultWait?: number, +): F; + +export function makeRenderer( + instance: TableInstance, + column: ColumnInstance, + meta?: any, +): ReactElement; + +////////////////////////////////////////////////////////////////////////////////////////////////// +// Custom Additions (parts from the old file called react-table-config.ts) + +export type FieldType = 'text' | 'number' | 'date' | string; + +export type CellRendererProps = { + /** + * Cell HTML props passed from the Table. + */ + cellElementProps: TableCellProps; + /** + * Table specific cell props like `column`, `row`. + */ + cellProps: CellProps; + /** + * Cell's content. + */ + children: React.ReactNode; + /** + * Function that returns whether the cell is disabled. + */ + isDisabled?: (rowData: D) => boolean; +}; From 2cfc9400c4a2c2ffb3b0340b31f8fb1855ec8206 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Sun, 27 Aug 2023 18:52:35 -0400 Subject: [PATCH 038/196] Updated the imports from react-table to the react-table-types.js file everywhere (or at least in many places) --- apps/storybook/src/InformationPanel.stories.tsx | 2 +- apps/storybook/src/Table.stories.tsx | 2 +- examples/Table.main.tsx | 6 +++++- .../itwinui-react/src/core/Table/SubRowExpander.tsx | 2 +- packages/itwinui-react/src/core/Table/Table.test.tsx | 4 ++-- packages/itwinui-react/src/core/Table/TableCell.tsx | 2 +- .../itwinui-react/src/core/Table/TableRowMemoized.tsx | 7 ++++++- .../src/core/Table/actionHandlers/expandHandler.ts | 5 ++++- .../src/core/Table/actionHandlers/filterHandler.ts | 6 +++++- .../src/core/Table/actionHandlers/resizeHandler.ts | 5 ++++- .../src/core/Table/actionHandlers/selectHandler.ts | 7 ++++++- .../src/core/Table/cells/DefaultCell.tsx | 2 +- .../src/core/Table/cells/EditableCell.tsx | 2 +- .../src/core/Table/columns/actionColumn.tsx | 2 +- .../src/core/Table/columns/expanderColumn.tsx | 6 +++++- .../src/core/Table/columns/selectionColumn.tsx | 6 +++++- .../src/core/Table/filters/FilterToggle.tsx | 2 +- .../src/core/Table/filters/customFilterFunctions.ts | 2 +- .../src/core/Table/filters/defaultFilterFunctions.ts | 2 +- .../itwinui-react/src/core/Table/filters/types.ts | 2 +- .../src/core/Table/hooks/useColumnDragAndDrop.tsx | 8 ++++++-- .../src/core/Table/hooks/useExpanderCell.tsx | 7 ++++++- .../src/core/Table/hooks/useResizeColumns.tsx | 8 ++++++-- .../src/core/Table/hooks/useScrollToRow.ts | 2 +- .../src/core/Table/hooks/useSelectionCell.tsx | 5 ++++- .../src/core/Table/hooks/useStickyColumns.tsx | 9 +++++++-- .../src/core/Table/hooks/useSubRowFiltering.tsx | 7 ++++++- .../src/core/Table/hooks/useSubRowSelection.tsx | 7 ++++++- packages/itwinui-react/src/core/Table/utils.ts | 2 +- packages/itwinui-react/src/index.ts | 3 +++ packages/itwinui-react/src/types/index.ts | 11 +++++++++++ .../itwinui-react/src/types/react-table-types.d.ts | 5 ++++- playgrounds/vite/src/App.tsx | 2 +- 33 files changed, 115 insertions(+), 35 deletions(-) create mode 100644 packages/itwinui-react/src/types/index.ts diff --git a/apps/storybook/src/InformationPanel.stories.tsx b/apps/storybook/src/InformationPanel.stories.tsx index 48d24e55da5..541d2d785de 100644 --- a/apps/storybook/src/InformationPanel.stories.tsx +++ b/apps/storybook/src/InformationPanel.stories.tsx @@ -4,7 +4,7 @@ *--------------------------------------------------------------------------------------------*/ import { Story, Meta } from '@storybook/react'; import React from 'react'; -import { CellProps } from 'react-table'; +import { CellProps } from '@itwin/itwinui-react'; import { action } from '@storybook/addon-actions'; import { SvgEdit } from '@itwin/itwinui-icons-react'; import { diff --git a/apps/storybook/src/Table.stories.tsx b/apps/storybook/src/Table.stories.tsx index c225c2e7438..4badd57d234 100644 --- a/apps/storybook/src/Table.stories.tsx +++ b/apps/storybook/src/Table.stories.tsx @@ -10,7 +10,7 @@ import type { Row, TableInstance, TableState, -} from 'react-table'; +} from '@itwin/itwinui-react'; import { Checkbox, Code, diff --git a/examples/Table.main.tsx b/examples/Table.main.tsx index 990ae2b8ac8..fc94fa9deab 100644 --- a/examples/Table.main.tsx +++ b/examples/Table.main.tsx @@ -4,7 +4,11 @@ *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; import { Table, DefaultCell } from '@itwin/itwinui-react'; -import type { CellProps, CellRendererProps, Column } from 'react-table'; +import type { + CellProps, + CellRendererProps, + Column, +} from '@itwin/itwinui-react'; export default () => { type TableDataType = { diff --git a/packages/itwinui-react/src/core/Table/SubRowExpander.tsx b/packages/itwinui-react/src/core/Table/SubRowExpander.tsx index 556ce2555c3..1c8017d1a75 100644 --- a/packages/itwinui-react/src/core/Table/SubRowExpander.tsx +++ b/packages/itwinui-react/src/core/Table/SubRowExpander.tsx @@ -4,7 +4,7 @@ *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; import { SvgChevronRight } from '../utils/index.js'; -import type { Cell, CellProps } from 'react-table'; +import type { Cell, CellProps } from '../../types/react-table-types.js'; import { IconButton } from '../Buttons/index.js'; export type SubRowExpanderProps> = { diff --git a/packages/itwinui-react/src/core/Table/Table.test.tsx b/packages/itwinui-react/src/core/Table/Table.test.tsx index d455fad11b5..383dfbb945a 100644 --- a/packages/itwinui-react/src/core/Table/Table.test.tsx +++ b/packages/itwinui-react/src/core/Table/Table.test.tsx @@ -18,8 +18,8 @@ import { type TableFilterProps, tableFilters, } from './filters/index.js'; -import { actions } from 'react-table'; -import type { CellProps, Column, Row } from 'react-table'; +import { actions } from '../../types/react-table-types.js'; +import type { CellProps, Column, Row } from '../../types/react-table-types.js'; import { InputGroup } from '../InputGroup/index.js'; import { Radio } from '../Radio/index.js'; import { diff --git a/packages/itwinui-react/src/core/Table/TableCell.tsx b/packages/itwinui-react/src/core/Table/TableCell.tsx index 46cc6ebea04..5010b361770 100644 --- a/packages/itwinui-react/src/core/Table/TableCell.tsx +++ b/packages/itwinui-react/src/core/Table/TableCell.tsx @@ -8,7 +8,7 @@ import type { CellProps, CellRendererProps, TableInstance, -} from 'react-table'; +} from '../../types/react-table-types.js'; import cx from 'classnames'; import { getCellStyle, getStickyStyle } from './utils.js'; import { SubRowExpander } from './SubRowExpander.js'; diff --git a/packages/itwinui-react/src/core/Table/TableRowMemoized.tsx b/packages/itwinui-react/src/core/Table/TableRowMemoized.tsx index e42a436fd8c..bbfd34be251 100644 --- a/packages/itwinui-react/src/core/Table/TableRowMemoized.tsx +++ b/packages/itwinui-react/src/core/Table/TableRowMemoized.tsx @@ -4,7 +4,12 @@ *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; import cx from 'classnames'; -import type { CellProps, Row, TableInstance, TableState } from 'react-table'; +import type { + CellProps, + Row, + TableInstance, + TableState, +} from '../../types/react-table-types.js'; import { Box, useIntersection, diff --git a/packages/itwinui-react/src/core/Table/actionHandlers/expandHandler.ts b/packages/itwinui-react/src/core/Table/actionHandlers/expandHandler.ts index 28fce8e700d..d4ecdcc731f 100644 --- a/packages/itwinui-react/src/core/Table/actionHandlers/expandHandler.ts +++ b/packages/itwinui-react/src/core/Table/actionHandlers/expandHandler.ts @@ -2,7 +2,10 @@ * Copyright (c) Bentley Systems, Incorporated. All rights reserved. * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ -import type { TableInstance, TableState } from 'react-table'; +import type { + TableInstance, + TableState, +} from '../../../types/react-table-types.js'; export const onExpandHandler = >( newState: TableState, diff --git a/packages/itwinui-react/src/core/Table/actionHandlers/filterHandler.ts b/packages/itwinui-react/src/core/Table/actionHandlers/filterHandler.ts index e803fce43f9..2332e571e0e 100644 --- a/packages/itwinui-react/src/core/Table/actionHandlers/filterHandler.ts +++ b/packages/itwinui-react/src/core/Table/actionHandlers/filterHandler.ts @@ -2,7 +2,11 @@ * Copyright (c) Bentley Systems, Incorporated. All rights reserved. * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ -import type { ActionType, TableInstance, TableState } from 'react-table'; +import type { + ActionType, + TableInstance, + TableState, +} from '../../../types/react-table-types.js'; import type { TableFilterValue } from '../filters/index.js'; export const onFilterHandler = >( diff --git a/packages/itwinui-react/src/core/Table/actionHandlers/resizeHandler.ts b/packages/itwinui-react/src/core/Table/actionHandlers/resizeHandler.ts index 98993b9b510..e099a6af41c 100644 --- a/packages/itwinui-react/src/core/Table/actionHandlers/resizeHandler.ts +++ b/packages/itwinui-react/src/core/Table/actionHandlers/resizeHandler.ts @@ -2,7 +2,10 @@ * Copyright (c) Bentley Systems, Incorporated. All rights reserved. * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ -import type { ActionType, TableState } from 'react-table'; +import type { + ActionType, + TableState, +} from '../../../types/react-table-types.js'; export const onTableResizeStart = >( state: TableState, diff --git a/packages/itwinui-react/src/core/Table/actionHandlers/selectHandler.ts b/packages/itwinui-react/src/core/Table/actionHandlers/selectHandler.ts index 10569525210..50f3f45981f 100644 --- a/packages/itwinui-react/src/core/Table/actionHandlers/selectHandler.ts +++ b/packages/itwinui-react/src/core/Table/actionHandlers/selectHandler.ts @@ -2,7 +2,12 @@ * Copyright (c) Bentley Systems, Incorporated. All rights reserved. * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ -import type { ActionType, Row, TableInstance, TableState } from 'react-table'; +import type { + ActionType, + Row, + TableInstance, + TableState, +} from '../../../types/react-table-types.js'; /** * Handles subrow selection and validation. diff --git a/packages/itwinui-react/src/core/Table/cells/DefaultCell.tsx b/packages/itwinui-react/src/core/Table/cells/DefaultCell.tsx index 469a47b0826..59f163ba535 100644 --- a/packages/itwinui-react/src/core/Table/cells/DefaultCell.tsx +++ b/packages/itwinui-react/src/core/Table/cells/DefaultCell.tsx @@ -3,7 +3,7 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; -import type { CellRendererProps } from 'react-table'; +import type { CellRendererProps } from '../../../types/react-table-types.js'; import cx from 'classnames'; import { Box } from '../../utils/index.js'; diff --git a/packages/itwinui-react/src/core/Table/cells/EditableCell.tsx b/packages/itwinui-react/src/core/Table/cells/EditableCell.tsx index f703b1d6f51..c0f7dc68056 100644 --- a/packages/itwinui-react/src/core/Table/cells/EditableCell.tsx +++ b/packages/itwinui-react/src/core/Table/cells/EditableCell.tsx @@ -3,7 +3,7 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; -import type { CellRendererProps } from 'react-table'; +import type { CellRendererProps } from '../../../types/react-table-types.js'; import { Box, getRandomValue } from '../../utils/index.js'; export type EditableCellProps> = diff --git a/packages/itwinui-react/src/core/Table/columns/actionColumn.tsx b/packages/itwinui-react/src/core/Table/columns/actionColumn.tsx index a5b57bbe4d9..93b5f2a2361 100644 --- a/packages/itwinui-react/src/core/Table/columns/actionColumn.tsx +++ b/packages/itwinui-react/src/core/Table/columns/actionColumn.tsx @@ -3,7 +3,7 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; -import type { HeaderProps } from 'react-table'; +import type { HeaderProps } from '../../../types/react-table-types.js'; import { Checkbox } from '../../Checkbox/index.js'; import { SvgColumnManager } from '../../utils/index.js'; import { DropdownMenu } from '../../DropdownMenu/index.js'; diff --git a/packages/itwinui-react/src/core/Table/columns/expanderColumn.tsx b/packages/itwinui-react/src/core/Table/columns/expanderColumn.tsx index 8932195d7f8..41589423a80 100644 --- a/packages/itwinui-react/src/core/Table/columns/expanderColumn.tsx +++ b/packages/itwinui-react/src/core/Table/columns/expanderColumn.tsx @@ -4,7 +4,11 @@ *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; import { SvgChevronRight } from '../../utils/index.js'; -import type { CellProps, CellRendererProps, Row } from 'react-table'; +import type { + CellProps, + CellRendererProps, + Row, +} from '../../../types/react-table-types.js'; import { IconButton } from '../../Buttons/index.js'; import { DefaultCell } from '../cells/index.js'; diff --git a/packages/itwinui-react/src/core/Table/columns/selectionColumn.tsx b/packages/itwinui-react/src/core/Table/columns/selectionColumn.tsx index d687290b46e..a5300e3d4ed 100644 --- a/packages/itwinui-react/src/core/Table/columns/selectionColumn.tsx +++ b/packages/itwinui-react/src/core/Table/columns/selectionColumn.tsx @@ -3,7 +3,11 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; -import type { CellProps, CellRendererProps, HeaderProps } from 'react-table'; +import type { + CellProps, + CellRendererProps, + HeaderProps, +} from '../../../types/react-table-types.js'; import { Checkbox } from '../../Checkbox/index.js'; import { DefaultCell } from '../cells/index.js'; diff --git a/packages/itwinui-react/src/core/Table/filters/FilterToggle.tsx b/packages/itwinui-react/src/core/Table/filters/FilterToggle.tsx index 3a2b65f75d6..0d43eb29704 100644 --- a/packages/itwinui-react/src/core/Table/filters/FilterToggle.tsx +++ b/packages/itwinui-react/src/core/Table/filters/FilterToggle.tsx @@ -4,7 +4,7 @@ *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; import cx from 'classnames'; -import type { HeaderGroup } from 'react-table'; +import type { HeaderGroup } from '../../../types/react-table-types.js'; import { useGlobals, Popover, diff --git a/packages/itwinui-react/src/core/Table/filters/customFilterFunctions.ts b/packages/itwinui-react/src/core/Table/filters/customFilterFunctions.ts index 65e90cbb69f..be90e8bd94a 100644 --- a/packages/itwinui-react/src/core/Table/filters/customFilterFunctions.ts +++ b/packages/itwinui-react/src/core/Table/filters/customFilterFunctions.ts @@ -2,7 +2,7 @@ * Copyright (c) Bentley Systems, Incorporated. All rights reserved. * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ -import type { IdType, Row } from 'react-table'; +import type { IdType, Row } from '../../../types/react-table-types.js'; const isValidDate = (date: Date | undefined) => !!date && !isNaN(date.valueOf()); diff --git a/packages/itwinui-react/src/core/Table/filters/defaultFilterFunctions.ts b/packages/itwinui-react/src/core/Table/filters/defaultFilterFunctions.ts index d7ceddd47e6..01c02b9545b 100644 --- a/packages/itwinui-react/src/core/Table/filters/defaultFilterFunctions.ts +++ b/packages/itwinui-react/src/core/Table/filters/defaultFilterFunctions.ts @@ -28,7 +28,7 @@ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE * SOFTWARE. */ -import type { IdType, Row } from 'react-table'; +import type { IdType, Row } from '../../../types/react-table-types.js'; const text = >( rows: Row[], diff --git a/packages/itwinui-react/src/core/Table/filters/types.ts b/packages/itwinui-react/src/core/Table/filters/types.ts index 5eccca2f624..109743dc853 100644 --- a/packages/itwinui-react/src/core/Table/filters/types.ts +++ b/packages/itwinui-react/src/core/Table/filters/types.ts @@ -7,7 +7,7 @@ import type { FilterProps, FilterType, HeaderGroup, -} from 'react-table'; +} from '../../../types/react-table-types.js'; export interface TableFilterValue> { /** diff --git a/packages/itwinui-react/src/core/Table/hooks/useColumnDragAndDrop.tsx b/packages/itwinui-react/src/core/Table/hooks/useColumnDragAndDrop.tsx index eb538aad142..86c39d9def2 100644 --- a/packages/itwinui-react/src/core/Table/hooks/useColumnDragAndDrop.tsx +++ b/packages/itwinui-react/src/core/Table/hooks/useColumnDragAndDrop.tsx @@ -3,7 +3,11 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import type * as React from 'react'; -import { actions, makePropGetter, useGetLatest } from 'react-table'; +import { + actions, + makePropGetter, + useGetLatest, +} from '../../../types/react-table-types.js'; import type { ActionType, HeaderGroup, @@ -12,7 +16,7 @@ import type { TableInstance, TableKeyedProps, TableState, -} from 'react-table'; +} from '../../../types/react-table-types.js'; import styles from '../../../styles.js'; const REORDER_ACTIONS = { diff --git a/packages/itwinui-react/src/core/Table/hooks/useExpanderCell.tsx b/packages/itwinui-react/src/core/Table/hooks/useExpanderCell.tsx index b8ba4ae9d92..f7d508749dd 100644 --- a/packages/itwinui-react/src/core/Table/hooks/useExpanderCell.tsx +++ b/packages/itwinui-react/src/core/Table/hooks/useExpanderCell.tsx @@ -3,7 +3,12 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; -import type { CellProps, ColumnInstance, Hooks, Row } from 'react-table'; +import type { + CellProps, + ColumnInstance, + Hooks, + Row, +} from '../../../types/react-table-types.js'; import { ExpanderColumn, EXPANDER_CELL_ID } from '../columns/index.js'; export const useExpanderCell = diff --git a/packages/itwinui-react/src/core/Table/hooks/useResizeColumns.tsx b/packages/itwinui-react/src/core/Table/hooks/useResizeColumns.tsx index bab0eee8e78..21cc6d35779 100644 --- a/packages/itwinui-react/src/core/Table/hooks/useResizeColumns.tsx +++ b/packages/itwinui-react/src/core/Table/hooks/useResizeColumns.tsx @@ -34,7 +34,11 @@ * SOFTWARE. */ import type * as React from 'react'; -import { actions, makePropGetter, useGetLatest } from 'react-table'; +import { + actions, + makePropGetter, + useGetLatest, +} from '../../../types/react-table-types.js'; import type { ActionType, ColumnInstance, @@ -43,7 +47,7 @@ import type { TableInstance, TableKeyedProps, TableState, -} from 'react-table'; +} from '../../../types/react-table-types.js'; export const useResizeColumns = >( diff --git a/packages/itwinui-react/src/core/Table/hooks/useScrollToRow.ts b/packages/itwinui-react/src/core/Table/hooks/useScrollToRow.ts index 9a98874807f..23e6d3a6f69 100644 --- a/packages/itwinui-react/src/core/Table/hooks/useScrollToRow.ts +++ b/packages/itwinui-react/src/core/Table/hooks/useScrollToRow.ts @@ -3,7 +3,7 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; -import type { Row } from 'react-table'; +import type { Row } from '../../../types/react-table-types.js'; import type { TableProps } from '../Table.js'; type ScrollToRow> = { diff --git a/packages/itwinui-react/src/core/Table/hooks/useSelectionCell.tsx b/packages/itwinui-react/src/core/Table/hooks/useSelectionCell.tsx index a1f520f574b..0b8b7ac533c 100644 --- a/packages/itwinui-react/src/core/Table/hooks/useSelectionCell.tsx +++ b/packages/itwinui-react/src/core/Table/hooks/useSelectionCell.tsx @@ -2,7 +2,10 @@ * Copyright (c) Bentley Systems, Incorporated. All rights reserved. * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ -import type { ColumnInstance, Hooks } from 'react-table'; +import type { + ColumnInstance, + Hooks, +} from '../../../types/react-table-types.js'; import { SelectionColumn, SELECTION_CELL_ID } from '../columns/index.js'; export const useSelectionCell = diff --git a/packages/itwinui-react/src/core/Table/hooks/useStickyColumns.tsx b/packages/itwinui-react/src/core/Table/hooks/useStickyColumns.tsx index d8480445ed6..ac72aab76d1 100644 --- a/packages/itwinui-react/src/core/Table/hooks/useStickyColumns.tsx +++ b/packages/itwinui-react/src/core/Table/hooks/useStickyColumns.tsx @@ -2,8 +2,13 @@ * Copyright (c) Bentley Systems, Incorporated. All rights reserved. * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ -import { actions } from 'react-table'; -import type { ActionType, Hooks, TableInstance, TableState } from 'react-table'; +import { actions } from '../../../types/react-table-types.js'; +import type { + ActionType, + Hooks, + TableInstance, + TableState, +} from '../../../types/react-table-types.js'; actions.setScrolledLeft = 'setScrolledLeft'; actions.setScrolledRight = 'setScrolledRight'; diff --git a/packages/itwinui-react/src/core/Table/hooks/useSubRowFiltering.tsx b/packages/itwinui-react/src/core/Table/hooks/useSubRowFiltering.tsx index 84183095b98..0f1372d97dc 100644 --- a/packages/itwinui-react/src/core/Table/hooks/useSubRowFiltering.tsx +++ b/packages/itwinui-react/src/core/Table/hooks/useSubRowFiltering.tsx @@ -3,7 +3,12 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; -import type { Hooks, IdType, Row, TableInstance } from 'react-table'; +import type { + Hooks, + IdType, + Row, + TableInstance, +} from '../../../types/react-table-types.js'; import { defaultFilterFunctions } from '../filters/defaultFilterFunctions.js'; export const useSubRowFiltering = diff --git a/packages/itwinui-react/src/core/Table/hooks/useSubRowSelection.tsx b/packages/itwinui-react/src/core/Table/hooks/useSubRowSelection.tsx index 24180f3a9cb..75a19b6384d 100644 --- a/packages/itwinui-react/src/core/Table/hooks/useSubRowSelection.tsx +++ b/packages/itwinui-react/src/core/Table/hooks/useSubRowSelection.tsx @@ -3,7 +3,12 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; -import type { Hooks, IdType, Row, TableInstance } from 'react-table'; +import type { + Hooks, + IdType, + Row, + TableInstance, +} from '../../../types/react-table-types.js'; export const useSubRowSelection = >( hooks: Hooks, diff --git a/packages/itwinui-react/src/core/Table/utils.ts b/packages/itwinui-react/src/core/Table/utils.ts index e012cbb630a..bad0f64df7a 100644 --- a/packages/itwinui-react/src/core/Table/utils.ts +++ b/packages/itwinui-react/src/core/Table/utils.ts @@ -2,7 +2,7 @@ * Copyright (c) Bentley Systems, Incorporated. All rights reserved. * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ -import type { ColumnInstance } from 'react-table'; +import type { ColumnInstance } from '../../types/react-table-types.js'; export const getCellStyle = >( column: ColumnInstance, diff --git a/packages/itwinui-react/src/index.ts b/packages/itwinui-react/src/index.ts index 34c3af2c790..f90221e82a4 100644 --- a/packages/itwinui-react/src/index.ts +++ b/packages/itwinui-react/src/index.ts @@ -5,3 +5,6 @@ export * from './core/index.js'; // export * from './types/react-table-config.js'; export * from './types/react-table-types.js'; +// import * from './types/react-table-types.js'; + +export const CellPropsq = {}; diff --git a/packages/itwinui-react/src/types/index.ts b/packages/itwinui-react/src/types/index.ts new file mode 100644 index 00000000000..093f9791ba3 --- /dev/null +++ b/packages/itwinui-react/src/types/index.ts @@ -0,0 +1,11 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Bentley Systems, Incorporated. All rights reserved. + * See LICENSE.md in the project root for license terms and full copyright notice. + *--------------------------------------------------------------------------------------------*/ +import { + // TableInterface, + type TableBodyPropGetter, +} from './react-table-types.js'; + +const testing: TableBodyPropGetter | undefined = undefined; +console.log(testing ?? 0 + 1); diff --git a/packages/itwinui-react/src/types/react-table-types.d.ts b/packages/itwinui-react/src/types/react-table-types.d.ts index 07de727cf60..75545982ab5 100644 --- a/packages/itwinui-react/src/types/react-table-types.d.ts +++ b/packages/itwinui-react/src/types/react-table-types.d.ts @@ -23,7 +23,7 @@ // The changelog for the important changes is located in the Readme.md -import { +import type { ChangeEvent, ComponentType, CSSProperties, @@ -35,6 +35,9 @@ import { ReactNode, } from 'react'; +import type { TableFilterProps } from '../core/Table/index.js'; + +export const testingVar = 0; // export {}; /** diff --git a/playgrounds/vite/src/App.tsx b/playgrounds/vite/src/App.tsx index 0f93316d750..6b8d1a178ea 100644 --- a/playgrounds/vite/src/App.tsx +++ b/playgrounds/vite/src/App.tsx @@ -20,7 +20,7 @@ import type { TableInstance, TableState, Renderer, -} from 'react-table'; +} from '@itwin/itwinui-react'; type ValueOf = T[keyof T]; From eacefb4a14098330362995ca3d3f3cbc24b6d629 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Mon, 28 Aug 2023 07:18:48 -0400 Subject: [PATCH 039/196] Small trial and error changes --- packages/itwinui-react/index.ts | 5 +++++ packages/itwinui-react/tsconfig.build.json | 2 +- packages/itwinui-react/tsconfig.json | 2 +- 3 files changed, 7 insertions(+), 2 deletions(-) create mode 100644 packages/itwinui-react/index.ts diff --git a/packages/itwinui-react/index.ts b/packages/itwinui-react/index.ts new file mode 100644 index 00000000000..7bc9f5adc96 --- /dev/null +++ b/packages/itwinui-react/index.ts @@ -0,0 +1,5 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Bentley Systems, Incorporated. All rights reserved. + * See LICENSE.md in the project root for license terms and full copyright notice. + *--------------------------------------------------------------------------------------------*/ +import { Column } from './src/index.js'; diff --git a/packages/itwinui-react/tsconfig.build.json b/packages/itwinui-react/tsconfig.build.json index 8c50a0a9a00..ea1fe1067f2 100644 --- a/packages/itwinui-react/tsconfig.build.json +++ b/packages/itwinui-react/tsconfig.build.json @@ -1,6 +1,6 @@ { "extends": "./tsconfig.json", - "files": ["src/index.ts", "src/types/react-table-types.js"], + "files": ["src/index.ts", "src/types/react-table-types.d.ts"], "compilerOptions": { "noUnusedLocals": false, "importHelpers": true diff --git a/packages/itwinui-react/tsconfig.json b/packages/itwinui-react/tsconfig.json index 12f6a1b7446..e0fbdb42edc 100644 --- a/packages/itwinui-react/tsconfig.json +++ b/packages/itwinui-react/tsconfig.json @@ -23,6 +23,6 @@ "verbatimModuleSyntax": true, "noErrorTruncation": true }, - "include": ["src"], + // "include": ["src"], "exclude": ["node_modules", "cjs/**/*", "esm/**/*"] } From a276dcd010bddc0ce05392294c453956dd1916b8 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Mon, 28 Aug 2023 07:21:27 -0400 Subject: [PATCH 040/196] Trying moving the types folder within code --- packages/itwinui-react/src/core/Table/SubRowExpander.tsx | 2 +- packages/itwinui-react/src/core/Table/Table.test.tsx | 8 ++++++-- packages/itwinui-react/src/core/Table/Table.tsx | 4 ++-- packages/itwinui-react/src/core/Table/TableCell.tsx | 2 +- .../itwinui-react/src/core/Table/TableRowMemoized.tsx | 2 +- .../src/core/Table/actionHandlers/expandHandler.ts | 2 +- .../src/core/Table/actionHandlers/filterHandler.ts | 2 +- .../src/core/Table/actionHandlers/resizeHandler.ts | 2 +- .../src/core/Table/actionHandlers/selectHandler.ts | 2 +- .../itwinui-react/src/core/Table/cells/DefaultCell.tsx | 2 +- .../itwinui-react/src/core/Table/cells/EditableCell.tsx | 2 +- .../itwinui-react/src/core/Table/columns/actionColumn.tsx | 2 +- .../src/core/Table/columns/expanderColumn.tsx | 2 +- .../src/core/Table/columns/selectionColumn.tsx | 2 +- .../itwinui-react/src/core/Table/filters/FilterToggle.tsx | 2 +- .../src/core/Table/filters/customFilterFunctions.ts | 2 +- .../src/core/Table/filters/defaultFilterFunctions.ts | 2 +- packages/itwinui-react/src/core/Table/filters/types.ts | 2 +- .../src/core/Table/hooks/useColumnDragAndDrop.tsx | 4 ++-- .../src/core/Table/hooks/useExpanderCell.tsx | 2 +- .../src/core/Table/hooks/useResizeColumns.tsx | 4 ++-- .../itwinui-react/src/core/Table/hooks/useScrollToRow.ts | 2 +- .../src/core/Table/hooks/useSelectionCell.tsx | 2 +- .../src/core/Table/hooks/useStickyColumns.tsx | 4 ++-- .../src/core/Table/hooks/useSubRowFiltering.tsx | 2 +- .../src/core/Table/hooks/useSubRowSelection.tsx | 2 +- packages/itwinui-react/src/core/Table/utils.ts | 2 +- .../itwinui-react/src/{ => core/utils}/types/index.ts | 0 .../src/{ => core/utils}/types/react-table-config.ts | 0 .../src/{ => core/utils}/types/react-table-types.d.ts | 2 +- packages/itwinui-react/src/index.ts | 2 +- 31 files changed, 38 insertions(+), 34 deletions(-) rename packages/itwinui-react/src/{ => core/utils}/types/index.ts (100%) rename packages/itwinui-react/src/{ => core/utils}/types/react-table-config.ts (100%) rename packages/itwinui-react/src/{ => core/utils}/types/react-table-types.d.ts (99%) diff --git a/packages/itwinui-react/src/core/Table/SubRowExpander.tsx b/packages/itwinui-react/src/core/Table/SubRowExpander.tsx index 1c8017d1a75..2aacbbc876b 100644 --- a/packages/itwinui-react/src/core/Table/SubRowExpander.tsx +++ b/packages/itwinui-react/src/core/Table/SubRowExpander.tsx @@ -4,7 +4,7 @@ *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; import { SvgChevronRight } from '../utils/index.js'; -import type { Cell, CellProps } from '../../types/react-table-types.js'; +import type { Cell, CellProps } from '../utils/types/react-table-types.js'; import { IconButton } from '../Buttons/index.js'; export type SubRowExpanderProps> = { diff --git a/packages/itwinui-react/src/core/Table/Table.test.tsx b/packages/itwinui-react/src/core/Table/Table.test.tsx index 383dfbb945a..9750cd59a28 100644 --- a/packages/itwinui-react/src/core/Table/Table.test.tsx +++ b/packages/itwinui-react/src/core/Table/Table.test.tsx @@ -18,8 +18,12 @@ import { type TableFilterProps, tableFilters, } from './filters/index.js'; -import { actions } from '../../types/react-table-types.js'; -import type { CellProps, Column, Row } from '../../types/react-table-types.js'; +import { actions } from '../utils/types/react-table-types.js'; +import type { + CellProps, + Column, + Row, +} from '../utils/types/react-table-types.js'; import { InputGroup } from '../InputGroup/index.js'; import { Radio } from '../Radio/index.js'; import { diff --git a/packages/itwinui-react/src/core/Table/Table.tsx b/packages/itwinui-react/src/core/Table/Table.tsx index 36562400103..23f9539fb89 100644 --- a/packages/itwinui-react/src/core/Table/Table.tsx +++ b/packages/itwinui-react/src/core/Table/Table.tsx @@ -15,7 +15,7 @@ import { usePagination, useColumnOrder, useGlobalFilter, -} from '../../types/react-table-types.js'; +} from '../utils/types/react-table-types.js'; import type { CellProps, HeaderGroup, @@ -25,7 +25,7 @@ import type { ActionType, TableInstance, Column, -} from '../../types/react-table-types.js'; +} from '../utils/types/react-table-types.js'; import { ProgressRadial } from '../ProgressIndicators/index.js'; import { useGlobals, diff --git a/packages/itwinui-react/src/core/Table/TableCell.tsx b/packages/itwinui-react/src/core/Table/TableCell.tsx index 5010b361770..a19f14cbecb 100644 --- a/packages/itwinui-react/src/core/Table/TableCell.tsx +++ b/packages/itwinui-react/src/core/Table/TableCell.tsx @@ -8,7 +8,7 @@ import type { CellProps, CellRendererProps, TableInstance, -} from '../../types/react-table-types.js'; +} from '../utils/types/react-table-types.js'; import cx from 'classnames'; import { getCellStyle, getStickyStyle } from './utils.js'; import { SubRowExpander } from './SubRowExpander.js'; diff --git a/packages/itwinui-react/src/core/Table/TableRowMemoized.tsx b/packages/itwinui-react/src/core/Table/TableRowMemoized.tsx index bbfd34be251..d6c94cf318a 100644 --- a/packages/itwinui-react/src/core/Table/TableRowMemoized.tsx +++ b/packages/itwinui-react/src/core/Table/TableRowMemoized.tsx @@ -9,7 +9,7 @@ import type { Row, TableInstance, TableState, -} from '../../types/react-table-types.js'; +} from '../utils/types/react-table-types.js'; import { Box, useIntersection, diff --git a/packages/itwinui-react/src/core/Table/actionHandlers/expandHandler.ts b/packages/itwinui-react/src/core/Table/actionHandlers/expandHandler.ts index d4ecdcc731f..26f6b469195 100644 --- a/packages/itwinui-react/src/core/Table/actionHandlers/expandHandler.ts +++ b/packages/itwinui-react/src/core/Table/actionHandlers/expandHandler.ts @@ -5,7 +5,7 @@ import type { TableInstance, TableState, -} from '../../../types/react-table-types.js'; +} from '../../utils/types/react-table-types.js'; export const onExpandHandler = >( newState: TableState, diff --git a/packages/itwinui-react/src/core/Table/actionHandlers/filterHandler.ts b/packages/itwinui-react/src/core/Table/actionHandlers/filterHandler.ts index 2332e571e0e..09d095936df 100644 --- a/packages/itwinui-react/src/core/Table/actionHandlers/filterHandler.ts +++ b/packages/itwinui-react/src/core/Table/actionHandlers/filterHandler.ts @@ -6,7 +6,7 @@ import type { ActionType, TableInstance, TableState, -} from '../../../types/react-table-types.js'; +} from '../../utils/types/react-table-types.js'; import type { TableFilterValue } from '../filters/index.js'; export const onFilterHandler = >( diff --git a/packages/itwinui-react/src/core/Table/actionHandlers/resizeHandler.ts b/packages/itwinui-react/src/core/Table/actionHandlers/resizeHandler.ts index e099a6af41c..bebd2514eff 100644 --- a/packages/itwinui-react/src/core/Table/actionHandlers/resizeHandler.ts +++ b/packages/itwinui-react/src/core/Table/actionHandlers/resizeHandler.ts @@ -5,7 +5,7 @@ import type { ActionType, TableState, -} from '../../../types/react-table-types.js'; +} from '../../utils/types/react-table-types.js'; export const onTableResizeStart = >( state: TableState, diff --git a/packages/itwinui-react/src/core/Table/actionHandlers/selectHandler.ts b/packages/itwinui-react/src/core/Table/actionHandlers/selectHandler.ts index 50f3f45981f..4fd10b866d7 100644 --- a/packages/itwinui-react/src/core/Table/actionHandlers/selectHandler.ts +++ b/packages/itwinui-react/src/core/Table/actionHandlers/selectHandler.ts @@ -7,7 +7,7 @@ import type { Row, TableInstance, TableState, -} from '../../../types/react-table-types.js'; +} from '../../utils/types/react-table-types.js'; /** * Handles subrow selection and validation. diff --git a/packages/itwinui-react/src/core/Table/cells/DefaultCell.tsx b/packages/itwinui-react/src/core/Table/cells/DefaultCell.tsx index 59f163ba535..ed1e301fd2b 100644 --- a/packages/itwinui-react/src/core/Table/cells/DefaultCell.tsx +++ b/packages/itwinui-react/src/core/Table/cells/DefaultCell.tsx @@ -3,7 +3,7 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; -import type { CellRendererProps } from '../../../types/react-table-types.js'; +import type { CellRendererProps } from '../../utils/types/react-table-types.js'; import cx from 'classnames'; import { Box } from '../../utils/index.js'; diff --git a/packages/itwinui-react/src/core/Table/cells/EditableCell.tsx b/packages/itwinui-react/src/core/Table/cells/EditableCell.tsx index c0f7dc68056..d0157a884ba 100644 --- a/packages/itwinui-react/src/core/Table/cells/EditableCell.tsx +++ b/packages/itwinui-react/src/core/Table/cells/EditableCell.tsx @@ -3,7 +3,7 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; -import type { CellRendererProps } from '../../../types/react-table-types.js'; +import type { CellRendererProps } from '../../utils/types/react-table-types.js'; import { Box, getRandomValue } from '../../utils/index.js'; export type EditableCellProps> = diff --git a/packages/itwinui-react/src/core/Table/columns/actionColumn.tsx b/packages/itwinui-react/src/core/Table/columns/actionColumn.tsx index 93b5f2a2361..b46f8f66185 100644 --- a/packages/itwinui-react/src/core/Table/columns/actionColumn.tsx +++ b/packages/itwinui-react/src/core/Table/columns/actionColumn.tsx @@ -3,7 +3,7 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; -import type { HeaderProps } from '../../../types/react-table-types.js'; +import type { HeaderProps } from '../../utils/types/react-table-types.js'; import { Checkbox } from '../../Checkbox/index.js'; import { SvgColumnManager } from '../../utils/index.js'; import { DropdownMenu } from '../../DropdownMenu/index.js'; diff --git a/packages/itwinui-react/src/core/Table/columns/expanderColumn.tsx b/packages/itwinui-react/src/core/Table/columns/expanderColumn.tsx index 41589423a80..9f7fa481732 100644 --- a/packages/itwinui-react/src/core/Table/columns/expanderColumn.tsx +++ b/packages/itwinui-react/src/core/Table/columns/expanderColumn.tsx @@ -8,7 +8,7 @@ import type { CellProps, CellRendererProps, Row, -} from '../../../types/react-table-types.js'; +} from '../../utils/types/react-table-types.js'; import { IconButton } from '../../Buttons/index.js'; import { DefaultCell } from '../cells/index.js'; diff --git a/packages/itwinui-react/src/core/Table/columns/selectionColumn.tsx b/packages/itwinui-react/src/core/Table/columns/selectionColumn.tsx index a5300e3d4ed..db058b078dc 100644 --- a/packages/itwinui-react/src/core/Table/columns/selectionColumn.tsx +++ b/packages/itwinui-react/src/core/Table/columns/selectionColumn.tsx @@ -7,7 +7,7 @@ import type { CellProps, CellRendererProps, HeaderProps, -} from '../../../types/react-table-types.js'; +} from '../../utils/types/react-table-types.js'; import { Checkbox } from '../../Checkbox/index.js'; import { DefaultCell } from '../cells/index.js'; diff --git a/packages/itwinui-react/src/core/Table/filters/FilterToggle.tsx b/packages/itwinui-react/src/core/Table/filters/FilterToggle.tsx index 0d43eb29704..ce5f1500d7b 100644 --- a/packages/itwinui-react/src/core/Table/filters/FilterToggle.tsx +++ b/packages/itwinui-react/src/core/Table/filters/FilterToggle.tsx @@ -4,7 +4,7 @@ *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; import cx from 'classnames'; -import type { HeaderGroup } from '../../../types/react-table-types.js'; +import type { HeaderGroup } from '../../utils/types/react-table-types.js'; import { useGlobals, Popover, diff --git a/packages/itwinui-react/src/core/Table/filters/customFilterFunctions.ts b/packages/itwinui-react/src/core/Table/filters/customFilterFunctions.ts index be90e8bd94a..b7c897627e4 100644 --- a/packages/itwinui-react/src/core/Table/filters/customFilterFunctions.ts +++ b/packages/itwinui-react/src/core/Table/filters/customFilterFunctions.ts @@ -2,7 +2,7 @@ * Copyright (c) Bentley Systems, Incorporated. All rights reserved. * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ -import type { IdType, Row } from '../../../types/react-table-types.js'; +import type { IdType, Row } from '../../utils/types/react-table-types.js'; const isValidDate = (date: Date | undefined) => !!date && !isNaN(date.valueOf()); diff --git a/packages/itwinui-react/src/core/Table/filters/defaultFilterFunctions.ts b/packages/itwinui-react/src/core/Table/filters/defaultFilterFunctions.ts index 01c02b9545b..784c5e75b9c 100644 --- a/packages/itwinui-react/src/core/Table/filters/defaultFilterFunctions.ts +++ b/packages/itwinui-react/src/core/Table/filters/defaultFilterFunctions.ts @@ -28,7 +28,7 @@ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE * SOFTWARE. */ -import type { IdType, Row } from '../../../types/react-table-types.js'; +import type { IdType, Row } from '../../utils/types/react-table-types.js'; const text = >( rows: Row[], diff --git a/packages/itwinui-react/src/core/Table/filters/types.ts b/packages/itwinui-react/src/core/Table/filters/types.ts index 109743dc853..f20c1854f24 100644 --- a/packages/itwinui-react/src/core/Table/filters/types.ts +++ b/packages/itwinui-react/src/core/Table/filters/types.ts @@ -7,7 +7,7 @@ import type { FilterProps, FilterType, HeaderGroup, -} from '../../../types/react-table-types.js'; +} from '../../utils/types/react-table-types.js'; export interface TableFilterValue> { /** diff --git a/packages/itwinui-react/src/core/Table/hooks/useColumnDragAndDrop.tsx b/packages/itwinui-react/src/core/Table/hooks/useColumnDragAndDrop.tsx index 86c39d9def2..99ab8edaaf0 100644 --- a/packages/itwinui-react/src/core/Table/hooks/useColumnDragAndDrop.tsx +++ b/packages/itwinui-react/src/core/Table/hooks/useColumnDragAndDrop.tsx @@ -7,7 +7,7 @@ import { actions, makePropGetter, useGetLatest, -} from '../../../types/react-table-types.js'; +} from '../../utils/types/react-table-types.js'; import type { ActionType, HeaderGroup, @@ -16,7 +16,7 @@ import type { TableInstance, TableKeyedProps, TableState, -} from '../../../types/react-table-types.js'; +} from '../../utils/types/react-table-types.js'; import styles from '../../../styles.js'; const REORDER_ACTIONS = { diff --git a/packages/itwinui-react/src/core/Table/hooks/useExpanderCell.tsx b/packages/itwinui-react/src/core/Table/hooks/useExpanderCell.tsx index f7d508749dd..2b6e5641679 100644 --- a/packages/itwinui-react/src/core/Table/hooks/useExpanderCell.tsx +++ b/packages/itwinui-react/src/core/Table/hooks/useExpanderCell.tsx @@ -8,7 +8,7 @@ import type { ColumnInstance, Hooks, Row, -} from '../../../types/react-table-types.js'; +} from '../../utils/types/react-table-types.js'; import { ExpanderColumn, EXPANDER_CELL_ID } from '../columns/index.js'; export const useExpanderCell = diff --git a/packages/itwinui-react/src/core/Table/hooks/useResizeColumns.tsx b/packages/itwinui-react/src/core/Table/hooks/useResizeColumns.tsx index 21cc6d35779..8783bfdcb28 100644 --- a/packages/itwinui-react/src/core/Table/hooks/useResizeColumns.tsx +++ b/packages/itwinui-react/src/core/Table/hooks/useResizeColumns.tsx @@ -38,7 +38,7 @@ import { actions, makePropGetter, useGetLatest, -} from '../../../types/react-table-types.js'; +} from '../../utils/types/react-table-types.js'; import type { ActionType, ColumnInstance, @@ -47,7 +47,7 @@ import type { TableInstance, TableKeyedProps, TableState, -} from '../../../types/react-table-types.js'; +} from '../../utils/types/react-table-types.js'; export const useResizeColumns = >( diff --git a/packages/itwinui-react/src/core/Table/hooks/useScrollToRow.ts b/packages/itwinui-react/src/core/Table/hooks/useScrollToRow.ts index 23e6d3a6f69..aa4087b9fc8 100644 --- a/packages/itwinui-react/src/core/Table/hooks/useScrollToRow.ts +++ b/packages/itwinui-react/src/core/Table/hooks/useScrollToRow.ts @@ -3,7 +3,7 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; -import type { Row } from '../../../types/react-table-types.js'; +import type { Row } from '../../utils/types/react-table-types.js'; import type { TableProps } from '../Table.js'; type ScrollToRow> = { diff --git a/packages/itwinui-react/src/core/Table/hooks/useSelectionCell.tsx b/packages/itwinui-react/src/core/Table/hooks/useSelectionCell.tsx index 0b8b7ac533c..35309a51ce1 100644 --- a/packages/itwinui-react/src/core/Table/hooks/useSelectionCell.tsx +++ b/packages/itwinui-react/src/core/Table/hooks/useSelectionCell.tsx @@ -5,7 +5,7 @@ import type { ColumnInstance, Hooks, -} from '../../../types/react-table-types.js'; +} from '../../utils/types/react-table-types.js'; import { SelectionColumn, SELECTION_CELL_ID } from '../columns/index.js'; export const useSelectionCell = diff --git a/packages/itwinui-react/src/core/Table/hooks/useStickyColumns.tsx b/packages/itwinui-react/src/core/Table/hooks/useStickyColumns.tsx index ac72aab76d1..8d86c8e8a07 100644 --- a/packages/itwinui-react/src/core/Table/hooks/useStickyColumns.tsx +++ b/packages/itwinui-react/src/core/Table/hooks/useStickyColumns.tsx @@ -2,13 +2,13 @@ * Copyright (c) Bentley Systems, Incorporated. All rights reserved. * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ -import { actions } from '../../../types/react-table-types.js'; +import { actions } from '../../utils/types/react-table-types.js'; import type { ActionType, Hooks, TableInstance, TableState, -} from '../../../types/react-table-types.js'; +} from '../../utils/types/react-table-types.js'; actions.setScrolledLeft = 'setScrolledLeft'; actions.setScrolledRight = 'setScrolledRight'; diff --git a/packages/itwinui-react/src/core/Table/hooks/useSubRowFiltering.tsx b/packages/itwinui-react/src/core/Table/hooks/useSubRowFiltering.tsx index 0f1372d97dc..c22138a8786 100644 --- a/packages/itwinui-react/src/core/Table/hooks/useSubRowFiltering.tsx +++ b/packages/itwinui-react/src/core/Table/hooks/useSubRowFiltering.tsx @@ -8,7 +8,7 @@ import type { IdType, Row, TableInstance, -} from '../../../types/react-table-types.js'; +} from '../../utils/types/react-table-types.js'; import { defaultFilterFunctions } from '../filters/defaultFilterFunctions.js'; export const useSubRowFiltering = diff --git a/packages/itwinui-react/src/core/Table/hooks/useSubRowSelection.tsx b/packages/itwinui-react/src/core/Table/hooks/useSubRowSelection.tsx index 75a19b6384d..11749ed0549 100644 --- a/packages/itwinui-react/src/core/Table/hooks/useSubRowSelection.tsx +++ b/packages/itwinui-react/src/core/Table/hooks/useSubRowSelection.tsx @@ -8,7 +8,7 @@ import type { IdType, Row, TableInstance, -} from '../../../types/react-table-types.js'; +} from '../../utils/types/react-table-types.js'; export const useSubRowSelection = >( hooks: Hooks, diff --git a/packages/itwinui-react/src/core/Table/utils.ts b/packages/itwinui-react/src/core/Table/utils.ts index bad0f64df7a..9d6929e30a4 100644 --- a/packages/itwinui-react/src/core/Table/utils.ts +++ b/packages/itwinui-react/src/core/Table/utils.ts @@ -2,7 +2,7 @@ * Copyright (c) Bentley Systems, Incorporated. All rights reserved. * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ -import type { ColumnInstance } from '../../types/react-table-types.js'; +import type { ColumnInstance } from '../utils/types/react-table-types.js'; export const getCellStyle = >( column: ColumnInstance, diff --git a/packages/itwinui-react/src/types/index.ts b/packages/itwinui-react/src/core/utils/types/index.ts similarity index 100% rename from packages/itwinui-react/src/types/index.ts rename to packages/itwinui-react/src/core/utils/types/index.ts diff --git a/packages/itwinui-react/src/types/react-table-config.ts b/packages/itwinui-react/src/core/utils/types/react-table-config.ts similarity index 100% rename from packages/itwinui-react/src/types/react-table-config.ts rename to packages/itwinui-react/src/core/utils/types/react-table-config.ts diff --git a/packages/itwinui-react/src/types/react-table-types.d.ts b/packages/itwinui-react/src/core/utils/types/react-table-types.d.ts similarity index 99% rename from packages/itwinui-react/src/types/react-table-types.d.ts rename to packages/itwinui-react/src/core/utils/types/react-table-types.d.ts index 75545982ab5..a7359dbfbc9 100644 --- a/packages/itwinui-react/src/types/react-table-types.d.ts +++ b/packages/itwinui-react/src/core/utils/types/react-table-types.d.ts @@ -35,7 +35,7 @@ import type { ReactNode, } from 'react'; -import type { TableFilterProps } from '../core/Table/index.js'; +import type { TableFilterProps } from '../../Table/index.js'; export const testingVar = 0; // export {}; diff --git a/packages/itwinui-react/src/index.ts b/packages/itwinui-react/src/index.ts index f90221e82a4..f1dca5110d1 100644 --- a/packages/itwinui-react/src/index.ts +++ b/packages/itwinui-react/src/index.ts @@ -4,7 +4,7 @@ *--------------------------------------------------------------------------------------------*/ export * from './core/index.js'; // export * from './types/react-table-config.js'; -export * from './types/react-table-types.js'; +export * from './core/utils/types/react-table-types.js'; // import * from './types/react-table-types.js'; export const CellPropsq = {}; From 18d7aa507d838d43169e6466d1e76ced94b56ab9 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Mon, 28 Aug 2023 10:18:23 -0400 Subject: [PATCH 041/196] Trying to move react-table-types.d.ts to src/core/Table/types --- packages/itwinui-react/index.ts | 5 ----- .../src/core/Table/SubRowExpander.tsx | 2 +- .../itwinui-react/src/core/Table/Table.test.tsx | 8 ++------ packages/itwinui-react/src/core/Table/Table.tsx | 4 ++-- .../itwinui-react/src/core/Table/TableCell.tsx | 2 +- .../src/core/Table/TableRowMemoized.tsx | 2 +- .../core/Table/actionHandlers/expandHandler.ts | 5 +---- .../core/Table/actionHandlers/filterHandler.ts | 2 +- .../core/Table/actionHandlers/resizeHandler.ts | 5 +---- .../core/Table/actionHandlers/selectHandler.ts | 2 +- .../src/core/Table/cells/DefaultCell.tsx | 2 +- .../src/core/Table/cells/EditableCell.tsx | 2 +- .../src/core/Table/columns/actionColumn.tsx | 2 +- .../src/core/Table/columns/expanderColumn.tsx | 2 +- .../src/core/Table/columns/selectionColumn.tsx | 2 +- .../src/core/Table/filters/FilterToggle.tsx | 2 +- .../core/Table/filters/customFilterFunctions.ts | 2 +- .../core/Table/filters/defaultFilterFunctions.ts | 2 +- .../src/core/Table/filters/types.ts | 2 +- .../core/Table/hooks/useColumnDragAndDrop.tsx | 4 ++-- .../src/core/Table/hooks/useExpanderCell.tsx | 2 +- .../src/core/Table/hooks/useResizeColumns.tsx | 4 ++-- .../src/core/Table/hooks/useScrollToRow.ts | 2 +- .../src/core/Table/hooks/useSelectionCell.tsx | 5 +---- .../src/core/Table/hooks/useStickyColumns.tsx | 4 ++-- .../src/core/Table/hooks/useSubRowFiltering.tsx | 2 +- .../src/core/Table/hooks/useSubRowSelection.tsx | 2 +- packages/itwinui-react/src/core/Table/index.ts | 4 ++++ .../itwinui-react/src/core/Table/types/index.ts | 16 ++++++++++++++++ .../{utils => Table}/types/react-table-config.ts | 0 .../types/react-table-types.d.ts | 2 +- packages/itwinui-react/src/core/Table/utils.ts | 2 +- packages/itwinui-react/src/core/utils/index.ts | 2 ++ .../itwinui-react/src/core/utils/types/index.ts | 11 ----------- packages/itwinui-react/src/index.ts | 2 +- packages/itwinui-react/tsconfig.build.json | 2 +- 36 files changed, 57 insertions(+), 64 deletions(-) delete mode 100644 packages/itwinui-react/index.ts create mode 100644 packages/itwinui-react/src/core/Table/types/index.ts rename packages/itwinui-react/src/core/{utils => Table}/types/react-table-config.ts (100%) rename packages/itwinui-react/src/core/{utils => Table}/types/react-table-types.d.ts (99%) delete mode 100644 packages/itwinui-react/src/core/utils/types/index.ts diff --git a/packages/itwinui-react/index.ts b/packages/itwinui-react/index.ts deleted file mode 100644 index 7bc9f5adc96..00000000000 --- a/packages/itwinui-react/index.ts +++ /dev/null @@ -1,5 +0,0 @@ -/*--------------------------------------------------------------------------------------------- - * Copyright (c) Bentley Systems, Incorporated. All rights reserved. - * See LICENSE.md in the project root for license terms and full copyright notice. - *--------------------------------------------------------------------------------------------*/ -import { Column } from './src/index.js'; diff --git a/packages/itwinui-react/src/core/Table/SubRowExpander.tsx b/packages/itwinui-react/src/core/Table/SubRowExpander.tsx index 2aacbbc876b..2910cb38e80 100644 --- a/packages/itwinui-react/src/core/Table/SubRowExpander.tsx +++ b/packages/itwinui-react/src/core/Table/SubRowExpander.tsx @@ -4,7 +4,7 @@ *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; import { SvgChevronRight } from '../utils/index.js'; -import type { Cell, CellProps } from '../utils/types/react-table-types.js'; +import type { Cell, CellProps } from './types/react-table-types.js'; import { IconButton } from '../Buttons/index.js'; export type SubRowExpanderProps> = { diff --git a/packages/itwinui-react/src/core/Table/Table.test.tsx b/packages/itwinui-react/src/core/Table/Table.test.tsx index 9750cd59a28..5836f20d566 100644 --- a/packages/itwinui-react/src/core/Table/Table.test.tsx +++ b/packages/itwinui-react/src/core/Table/Table.test.tsx @@ -18,12 +18,8 @@ import { type TableFilterProps, tableFilters, } from './filters/index.js'; -import { actions } from '../utils/types/react-table-types.js'; -import type { - CellProps, - Column, - Row, -} from '../utils/types/react-table-types.js'; +import { actions } from './types/react-table-types.js'; +import type { CellProps, Column, Row } from './types/react-table-types.js'; import { InputGroup } from '../InputGroup/index.js'; import { Radio } from '../Radio/index.js'; import { diff --git a/packages/itwinui-react/src/core/Table/Table.tsx b/packages/itwinui-react/src/core/Table/Table.tsx index 23f9539fb89..1241f7771c6 100644 --- a/packages/itwinui-react/src/core/Table/Table.tsx +++ b/packages/itwinui-react/src/core/Table/Table.tsx @@ -15,7 +15,7 @@ import { usePagination, useColumnOrder, useGlobalFilter, -} from '../utils/types/react-table-types.js'; +} from './types/react-table-types.js'; import type { CellProps, HeaderGroup, @@ -25,7 +25,7 @@ import type { ActionType, TableInstance, Column, -} from '../utils/types/react-table-types.js'; +} from './types/react-table-types.js'; import { ProgressRadial } from '../ProgressIndicators/index.js'; import { useGlobals, diff --git a/packages/itwinui-react/src/core/Table/TableCell.tsx b/packages/itwinui-react/src/core/Table/TableCell.tsx index a19f14cbecb..7bcc71dc45c 100644 --- a/packages/itwinui-react/src/core/Table/TableCell.tsx +++ b/packages/itwinui-react/src/core/Table/TableCell.tsx @@ -8,7 +8,7 @@ import type { CellProps, CellRendererProps, TableInstance, -} from '../utils/types/react-table-types.js'; +} from './types/react-table-types.js'; import cx from 'classnames'; import { getCellStyle, getStickyStyle } from './utils.js'; import { SubRowExpander } from './SubRowExpander.js'; diff --git a/packages/itwinui-react/src/core/Table/TableRowMemoized.tsx b/packages/itwinui-react/src/core/Table/TableRowMemoized.tsx index d6c94cf318a..a2b3366cf85 100644 --- a/packages/itwinui-react/src/core/Table/TableRowMemoized.tsx +++ b/packages/itwinui-react/src/core/Table/TableRowMemoized.tsx @@ -9,7 +9,7 @@ import type { Row, TableInstance, TableState, -} from '../utils/types/react-table-types.js'; +} from './types/react-table-types.js'; import { Box, useIntersection, diff --git a/packages/itwinui-react/src/core/Table/actionHandlers/expandHandler.ts b/packages/itwinui-react/src/core/Table/actionHandlers/expandHandler.ts index 26f6b469195..8dc122bb445 100644 --- a/packages/itwinui-react/src/core/Table/actionHandlers/expandHandler.ts +++ b/packages/itwinui-react/src/core/Table/actionHandlers/expandHandler.ts @@ -2,10 +2,7 @@ * Copyright (c) Bentley Systems, Incorporated. All rights reserved. * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ -import type { - TableInstance, - TableState, -} from '../../utils/types/react-table-types.js'; +import type { TableInstance, TableState } from '../types/react-table-types.js'; export const onExpandHandler = >( newState: TableState, diff --git a/packages/itwinui-react/src/core/Table/actionHandlers/filterHandler.ts b/packages/itwinui-react/src/core/Table/actionHandlers/filterHandler.ts index 09d095936df..3250dd14874 100644 --- a/packages/itwinui-react/src/core/Table/actionHandlers/filterHandler.ts +++ b/packages/itwinui-react/src/core/Table/actionHandlers/filterHandler.ts @@ -6,7 +6,7 @@ import type { ActionType, TableInstance, TableState, -} from '../../utils/types/react-table-types.js'; +} from '../types/react-table-types.js'; import type { TableFilterValue } from '../filters/index.js'; export const onFilterHandler = >( diff --git a/packages/itwinui-react/src/core/Table/actionHandlers/resizeHandler.ts b/packages/itwinui-react/src/core/Table/actionHandlers/resizeHandler.ts index bebd2514eff..474b78ea37f 100644 --- a/packages/itwinui-react/src/core/Table/actionHandlers/resizeHandler.ts +++ b/packages/itwinui-react/src/core/Table/actionHandlers/resizeHandler.ts @@ -2,10 +2,7 @@ * Copyright (c) Bentley Systems, Incorporated. All rights reserved. * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ -import type { - ActionType, - TableState, -} from '../../utils/types/react-table-types.js'; +import type { ActionType, TableState } from '../types/react-table-types.js'; export const onTableResizeStart = >( state: TableState, diff --git a/packages/itwinui-react/src/core/Table/actionHandlers/selectHandler.ts b/packages/itwinui-react/src/core/Table/actionHandlers/selectHandler.ts index 4fd10b866d7..d8485456cb4 100644 --- a/packages/itwinui-react/src/core/Table/actionHandlers/selectHandler.ts +++ b/packages/itwinui-react/src/core/Table/actionHandlers/selectHandler.ts @@ -7,7 +7,7 @@ import type { Row, TableInstance, TableState, -} from '../../utils/types/react-table-types.js'; +} from '../types/react-table-types.js'; /** * Handles subrow selection and validation. diff --git a/packages/itwinui-react/src/core/Table/cells/DefaultCell.tsx b/packages/itwinui-react/src/core/Table/cells/DefaultCell.tsx index ed1e301fd2b..1c059033935 100644 --- a/packages/itwinui-react/src/core/Table/cells/DefaultCell.tsx +++ b/packages/itwinui-react/src/core/Table/cells/DefaultCell.tsx @@ -3,7 +3,7 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; -import type { CellRendererProps } from '../../utils/types/react-table-types.js'; +import type { CellRendererProps } from '../types/react-table-types.js'; import cx from 'classnames'; import { Box } from '../../utils/index.js'; diff --git a/packages/itwinui-react/src/core/Table/cells/EditableCell.tsx b/packages/itwinui-react/src/core/Table/cells/EditableCell.tsx index d0157a884ba..755336b8e29 100644 --- a/packages/itwinui-react/src/core/Table/cells/EditableCell.tsx +++ b/packages/itwinui-react/src/core/Table/cells/EditableCell.tsx @@ -3,7 +3,7 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; -import type { CellRendererProps } from '../../utils/types/react-table-types.js'; +import type { CellRendererProps } from '../types/react-table-types.js'; import { Box, getRandomValue } from '../../utils/index.js'; export type EditableCellProps> = diff --git a/packages/itwinui-react/src/core/Table/columns/actionColumn.tsx b/packages/itwinui-react/src/core/Table/columns/actionColumn.tsx index b46f8f66185..a0338255089 100644 --- a/packages/itwinui-react/src/core/Table/columns/actionColumn.tsx +++ b/packages/itwinui-react/src/core/Table/columns/actionColumn.tsx @@ -3,7 +3,7 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; -import type { HeaderProps } from '../../utils/types/react-table-types.js'; +import type { HeaderProps } from '../types/react-table-types.js'; import { Checkbox } from '../../Checkbox/index.js'; import { SvgColumnManager } from '../../utils/index.js'; import { DropdownMenu } from '../../DropdownMenu/index.js'; diff --git a/packages/itwinui-react/src/core/Table/columns/expanderColumn.tsx b/packages/itwinui-react/src/core/Table/columns/expanderColumn.tsx index 9f7fa481732..597a495fd4a 100644 --- a/packages/itwinui-react/src/core/Table/columns/expanderColumn.tsx +++ b/packages/itwinui-react/src/core/Table/columns/expanderColumn.tsx @@ -8,7 +8,7 @@ import type { CellProps, CellRendererProps, Row, -} from '../../utils/types/react-table-types.js'; +} from '../types/react-table-types.js'; import { IconButton } from '../../Buttons/index.js'; import { DefaultCell } from '../cells/index.js'; diff --git a/packages/itwinui-react/src/core/Table/columns/selectionColumn.tsx b/packages/itwinui-react/src/core/Table/columns/selectionColumn.tsx index db058b078dc..ac1f23383af 100644 --- a/packages/itwinui-react/src/core/Table/columns/selectionColumn.tsx +++ b/packages/itwinui-react/src/core/Table/columns/selectionColumn.tsx @@ -7,7 +7,7 @@ import type { CellProps, CellRendererProps, HeaderProps, -} from '../../utils/types/react-table-types.js'; +} from '../types/react-table-types.js'; import { Checkbox } from '../../Checkbox/index.js'; import { DefaultCell } from '../cells/index.js'; diff --git a/packages/itwinui-react/src/core/Table/filters/FilterToggle.tsx b/packages/itwinui-react/src/core/Table/filters/FilterToggle.tsx index ce5f1500d7b..834d26378a6 100644 --- a/packages/itwinui-react/src/core/Table/filters/FilterToggle.tsx +++ b/packages/itwinui-react/src/core/Table/filters/FilterToggle.tsx @@ -4,7 +4,7 @@ *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; import cx from 'classnames'; -import type { HeaderGroup } from '../../utils/types/react-table-types.js'; +import type { HeaderGroup } from '../types/react-table-types.js'; import { useGlobals, Popover, diff --git a/packages/itwinui-react/src/core/Table/filters/customFilterFunctions.ts b/packages/itwinui-react/src/core/Table/filters/customFilterFunctions.ts index b7c897627e4..5f4cb4718b7 100644 --- a/packages/itwinui-react/src/core/Table/filters/customFilterFunctions.ts +++ b/packages/itwinui-react/src/core/Table/filters/customFilterFunctions.ts @@ -2,7 +2,7 @@ * Copyright (c) Bentley Systems, Incorporated. All rights reserved. * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ -import type { IdType, Row } from '../../utils/types/react-table-types.js'; +import type { IdType, Row } from '../types/react-table-types.js'; const isValidDate = (date: Date | undefined) => !!date && !isNaN(date.valueOf()); diff --git a/packages/itwinui-react/src/core/Table/filters/defaultFilterFunctions.ts b/packages/itwinui-react/src/core/Table/filters/defaultFilterFunctions.ts index 784c5e75b9c..56e40c3f1f5 100644 --- a/packages/itwinui-react/src/core/Table/filters/defaultFilterFunctions.ts +++ b/packages/itwinui-react/src/core/Table/filters/defaultFilterFunctions.ts @@ -28,7 +28,7 @@ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE * SOFTWARE. */ -import type { IdType, Row } from '../../utils/types/react-table-types.js'; +import type { IdType, Row } from '../types/react-table-types.js'; const text = >( rows: Row[], diff --git a/packages/itwinui-react/src/core/Table/filters/types.ts b/packages/itwinui-react/src/core/Table/filters/types.ts index f20c1854f24..15ac417a4ba 100644 --- a/packages/itwinui-react/src/core/Table/filters/types.ts +++ b/packages/itwinui-react/src/core/Table/filters/types.ts @@ -7,7 +7,7 @@ import type { FilterProps, FilterType, HeaderGroup, -} from '../../utils/types/react-table-types.js'; +} from '../types/react-table-types.js'; export interface TableFilterValue> { /** diff --git a/packages/itwinui-react/src/core/Table/hooks/useColumnDragAndDrop.tsx b/packages/itwinui-react/src/core/Table/hooks/useColumnDragAndDrop.tsx index 99ab8edaaf0..5319e9fdea5 100644 --- a/packages/itwinui-react/src/core/Table/hooks/useColumnDragAndDrop.tsx +++ b/packages/itwinui-react/src/core/Table/hooks/useColumnDragAndDrop.tsx @@ -7,7 +7,7 @@ import { actions, makePropGetter, useGetLatest, -} from '../../utils/types/react-table-types.js'; +} from '../types/react-table-types.js'; import type { ActionType, HeaderGroup, @@ -16,7 +16,7 @@ import type { TableInstance, TableKeyedProps, TableState, -} from '../../utils/types/react-table-types.js'; +} from '../types/react-table-types.js'; import styles from '../../../styles.js'; const REORDER_ACTIONS = { diff --git a/packages/itwinui-react/src/core/Table/hooks/useExpanderCell.tsx b/packages/itwinui-react/src/core/Table/hooks/useExpanderCell.tsx index 2b6e5641679..764a747efef 100644 --- a/packages/itwinui-react/src/core/Table/hooks/useExpanderCell.tsx +++ b/packages/itwinui-react/src/core/Table/hooks/useExpanderCell.tsx @@ -8,7 +8,7 @@ import type { ColumnInstance, Hooks, Row, -} from '../../utils/types/react-table-types.js'; +} from '../types/react-table-types.js'; import { ExpanderColumn, EXPANDER_CELL_ID } from '../columns/index.js'; export const useExpanderCell = diff --git a/packages/itwinui-react/src/core/Table/hooks/useResizeColumns.tsx b/packages/itwinui-react/src/core/Table/hooks/useResizeColumns.tsx index 8783bfdcb28..3632f2d9b58 100644 --- a/packages/itwinui-react/src/core/Table/hooks/useResizeColumns.tsx +++ b/packages/itwinui-react/src/core/Table/hooks/useResizeColumns.tsx @@ -38,7 +38,7 @@ import { actions, makePropGetter, useGetLatest, -} from '../../utils/types/react-table-types.js'; +} from '../types/react-table-types.js'; import type { ActionType, ColumnInstance, @@ -47,7 +47,7 @@ import type { TableInstance, TableKeyedProps, TableState, -} from '../../utils/types/react-table-types.js'; +} from '../types/react-table-types.js'; export const useResizeColumns = >( diff --git a/packages/itwinui-react/src/core/Table/hooks/useScrollToRow.ts b/packages/itwinui-react/src/core/Table/hooks/useScrollToRow.ts index aa4087b9fc8..86da4ace157 100644 --- a/packages/itwinui-react/src/core/Table/hooks/useScrollToRow.ts +++ b/packages/itwinui-react/src/core/Table/hooks/useScrollToRow.ts @@ -3,7 +3,7 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; -import type { Row } from '../../utils/types/react-table-types.js'; +import type { Row } from '../types/react-table-types.js'; import type { TableProps } from '../Table.js'; type ScrollToRow> = { diff --git a/packages/itwinui-react/src/core/Table/hooks/useSelectionCell.tsx b/packages/itwinui-react/src/core/Table/hooks/useSelectionCell.tsx index 35309a51ce1..06e33bee52b 100644 --- a/packages/itwinui-react/src/core/Table/hooks/useSelectionCell.tsx +++ b/packages/itwinui-react/src/core/Table/hooks/useSelectionCell.tsx @@ -2,10 +2,7 @@ * Copyright (c) Bentley Systems, Incorporated. All rights reserved. * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ -import type { - ColumnInstance, - Hooks, -} from '../../utils/types/react-table-types.js'; +import type { ColumnInstance, Hooks } from '../types/react-table-types.js'; import { SelectionColumn, SELECTION_CELL_ID } from '../columns/index.js'; export const useSelectionCell = diff --git a/packages/itwinui-react/src/core/Table/hooks/useStickyColumns.tsx b/packages/itwinui-react/src/core/Table/hooks/useStickyColumns.tsx index 8d86c8e8a07..6fdd04e7bb2 100644 --- a/packages/itwinui-react/src/core/Table/hooks/useStickyColumns.tsx +++ b/packages/itwinui-react/src/core/Table/hooks/useStickyColumns.tsx @@ -2,13 +2,13 @@ * Copyright (c) Bentley Systems, Incorporated. All rights reserved. * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ -import { actions } from '../../utils/types/react-table-types.js'; +import { actions } from '../types/react-table-types.js'; import type { ActionType, Hooks, TableInstance, TableState, -} from '../../utils/types/react-table-types.js'; +} from '../types/react-table-types.js'; actions.setScrolledLeft = 'setScrolledLeft'; actions.setScrolledRight = 'setScrolledRight'; diff --git a/packages/itwinui-react/src/core/Table/hooks/useSubRowFiltering.tsx b/packages/itwinui-react/src/core/Table/hooks/useSubRowFiltering.tsx index c22138a8786..ac0bbf7c4ef 100644 --- a/packages/itwinui-react/src/core/Table/hooks/useSubRowFiltering.tsx +++ b/packages/itwinui-react/src/core/Table/hooks/useSubRowFiltering.tsx @@ -8,7 +8,7 @@ import type { IdType, Row, TableInstance, -} from '../../utils/types/react-table-types.js'; +} from '../types/react-table-types.js'; import { defaultFilterFunctions } from '../filters/defaultFilterFunctions.js'; export const useSubRowFiltering = diff --git a/packages/itwinui-react/src/core/Table/hooks/useSubRowSelection.tsx b/packages/itwinui-react/src/core/Table/hooks/useSubRowSelection.tsx index 11749ed0549..a7d4c5660b5 100644 --- a/packages/itwinui-react/src/core/Table/hooks/useSubRowSelection.tsx +++ b/packages/itwinui-react/src/core/Table/hooks/useSubRowSelection.tsx @@ -8,7 +8,7 @@ import type { IdType, Row, TableInstance, -} from '../../utils/types/react-table-types.js'; +} from '../types/react-table-types.js'; export const useSubRowSelection = >( hooks: Hooks, diff --git a/packages/itwinui-react/src/core/Table/index.ts b/packages/itwinui-react/src/core/Table/index.ts index 96af7755eab..a0605cd60ba 100644 --- a/packages/itwinui-react/src/core/Table/index.ts +++ b/packages/itwinui-react/src/core/Table/index.ts @@ -3,6 +3,10 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ export { Table } from './Table.js'; + +// Export everything from './types/react-table-types.js' as a variable called `ReactTableTypes` +export { TableTypes } from './types/index.js'; + export type { TableProps, TablePaginatorRendererProps } from './Table.js'; export { BaseFilter, FilterButtonBar, tableFilters } from './filters/index.js'; diff --git a/packages/itwinui-react/src/core/Table/types/index.ts b/packages/itwinui-react/src/core/Table/types/index.ts new file mode 100644 index 00000000000..62472f8644d --- /dev/null +++ b/packages/itwinui-react/src/core/Table/types/index.ts @@ -0,0 +1,16 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Bentley Systems, Incorporated. All rights reserved. + * See LICENSE.md in the project root for license terms and full copyright notice. + *--------------------------------------------------------------------------------------------*/ +// import { +// // TableInterface, +// type TableBodyPropGetter, +// } from './react-table-types.js'; + +// import everything from './react-table-types.js' and put it in a variable called ReactTableTypes +// import * as ReactTableTypes from './react-table-types.js'; +// export { ReactTableTypes }; +export * as TableTypes from './react-table-types.js'; + +// const testing: ReactTableTypes.TableBodyPropGetter | undefined = undefined; +// console.log(testing ?? 0 + 1); diff --git a/packages/itwinui-react/src/core/utils/types/react-table-config.ts b/packages/itwinui-react/src/core/Table/types/react-table-config.ts similarity index 100% rename from packages/itwinui-react/src/core/utils/types/react-table-config.ts rename to packages/itwinui-react/src/core/Table/types/react-table-config.ts diff --git a/packages/itwinui-react/src/core/utils/types/react-table-types.d.ts b/packages/itwinui-react/src/core/Table/types/react-table-types.d.ts similarity index 99% rename from packages/itwinui-react/src/core/utils/types/react-table-types.d.ts rename to packages/itwinui-react/src/core/Table/types/react-table-types.d.ts index a7359dbfbc9..4d6ee9c1e22 100644 --- a/packages/itwinui-react/src/core/utils/types/react-table-types.d.ts +++ b/packages/itwinui-react/src/core/Table/types/react-table-types.d.ts @@ -35,7 +35,7 @@ import type { ReactNode, } from 'react'; -import type { TableFilterProps } from '../../Table/index.js'; +import type { TableFilterProps } from '../index.js'; export const testingVar = 0; // export {}; diff --git a/packages/itwinui-react/src/core/Table/utils.ts b/packages/itwinui-react/src/core/Table/utils.ts index 9d6929e30a4..a7ff8496bc6 100644 --- a/packages/itwinui-react/src/core/Table/utils.ts +++ b/packages/itwinui-react/src/core/Table/utils.ts @@ -2,7 +2,7 @@ * Copyright (c) Bentley Systems, Incorporated. All rights reserved. * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ -import type { ColumnInstance } from '../utils/types/react-table-types.js'; +import type { ColumnInstance } from './types/react-table-types.js'; export const getCellStyle = >( column: ColumnInstance, diff --git a/packages/itwinui-react/src/core/utils/index.ts b/packages/itwinui-react/src/core/utils/index.ts index ec31f211feb..e697d657313 100644 --- a/packages/itwinui-react/src/core/utils/index.ts +++ b/packages/itwinui-react/src/core/utils/index.ts @@ -8,4 +8,6 @@ export * from './components/index.js'; export * from './props.js'; export * from './color/index.js'; export * from './icons/index.js'; +// export * from '../Table/types/index.js'; +// export * from '../Table/types/react-table-types.js'; export * from './types.js'; diff --git a/packages/itwinui-react/src/core/utils/types/index.ts b/packages/itwinui-react/src/core/utils/types/index.ts deleted file mode 100644 index 093f9791ba3..00000000000 --- a/packages/itwinui-react/src/core/utils/types/index.ts +++ /dev/null @@ -1,11 +0,0 @@ -/*--------------------------------------------------------------------------------------------- - * Copyright (c) Bentley Systems, Incorporated. All rights reserved. - * See LICENSE.md in the project root for license terms and full copyright notice. - *--------------------------------------------------------------------------------------------*/ -import { - // TableInterface, - type TableBodyPropGetter, -} from './react-table-types.js'; - -const testing: TableBodyPropGetter | undefined = undefined; -console.log(testing ?? 0 + 1); diff --git a/packages/itwinui-react/src/index.ts b/packages/itwinui-react/src/index.ts index f1dca5110d1..e40b81be0e2 100644 --- a/packages/itwinui-react/src/index.ts +++ b/packages/itwinui-react/src/index.ts @@ -4,7 +4,7 @@ *--------------------------------------------------------------------------------------------*/ export * from './core/index.js'; // export * from './types/react-table-config.js'; -export * from './core/utils/types/react-table-types.js'; +export * from './core/Table/types/react-table-types.js'; // import * from './types/react-table-types.js'; export const CellPropsq = {}; diff --git a/packages/itwinui-react/tsconfig.build.json b/packages/itwinui-react/tsconfig.build.json index ea1fe1067f2..96b27bce57e 100644 --- a/packages/itwinui-react/tsconfig.build.json +++ b/packages/itwinui-react/tsconfig.build.json @@ -1,6 +1,6 @@ { "extends": "./tsconfig.json", - "files": ["src/index.ts", "src/types/react-table-types.d.ts"], + "files": ["src/index.ts", "src/core/Table/types/react-table-types.d.ts"], "compilerOptions": { "noUnusedLocals": false, "importHelpers": true From 02014c53ade021ed86c28c41ed290ebcf9dd4763 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Mon, 28 Aug 2023 13:50:14 -0400 Subject: [PATCH 042/196] Add postBuildTypes.mjs to copy react-table-types.d.ts to the cjs/esm folders. Edit package.json scripts to use postBuildTypes.mjs. swcrc ignores react-table-types.d.ts to avoid converting that into react-table-types.d.js. --- apps/storybook/src/Table.stories.tsx | 17 ++-- packages/itwinui-react/.swcrc | 6 +- packages/itwinui-react/package.json | 5 +- .../itwinui-react/scripts/postBuildTypes.mjs | 41 ++++++++++ .../itwinui-react/src/core/Table/index.ts | 3 +- .../src/core/Table/types/index.ts | 7 +- yarn.lock | 77 ++++++++++++++++--- 7 files changed, 129 insertions(+), 27 deletions(-) create mode 100644 packages/itwinui-react/scripts/postBuildTypes.mjs diff --git a/apps/storybook/src/Table.stories.tsx b/apps/storybook/src/Table.stories.tsx index 4badd57d234..8f6d0716065 100644 --- a/apps/storybook/src/Table.stories.tsx +++ b/apps/storybook/src/Table.stories.tsx @@ -3,14 +3,14 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import React, { useCallback } from 'react'; -import type { - CellProps, - CellRendererProps, - Column, - Row, - TableInstance, - TableState, -} from '@itwin/itwinui-react'; +// import type { +// CellProps, +// CellRendererProps, +// Column, +// Row, +// TableInstance, +// TableState, +// } from '@itwin/itwinui-react'; import { Checkbox, Code, @@ -23,6 +23,7 @@ import { tableFilters, TableFilterValue, TableProps, + // TableTypes, Tooltip, DefaultCell, EditableCell, diff --git a/packages/itwinui-react/.swcrc b/packages/itwinui-react/.swcrc index fbcb6fccdc8..c5b939c5f78 100644 --- a/packages/itwinui-react/.swcrc +++ b/packages/itwinui-react/.swcrc @@ -8,5 +8,9 @@ "module": { "type": "es6" }, - "exclude": ["src/styles.js", "src/styles.d.ts"] + "exclude": [ + "src/styles.js", + "src/styles.d.ts", + "src/core/Table/types/react-table-types.d.ts" + ] } diff --git a/packages/itwinui-react/package.json b/packages/itwinui-react/package.json index b9a68a87e9b..5731f51bb5d 100644 --- a/packages/itwinui-react/package.json +++ b/packages/itwinui-react/package.json @@ -57,7 +57,7 @@ "build": "yarn clean:build && tsc -p tsconfig.cjs.json && tsc -p tsconfig.esm.json && yarn build:styles && yarn build:post", "build:styles": "vite build src/styles.js", "build:watch": "concurrently \"tsc -p tsconfig.cjs.json --watch\" \"tsc -p tsconfig.esm.json --watch\"", - "build:post": "node ./scripts/postBuild.mjs", + "build:post": "node ./scripts/postBuild.mjs && node ./scripts/postBuildTypes.mjs", "clean:build": "rimraf esm && rimraf cjs", "clean:coverage": "rimraf coverage", "clean": "rimraf .turbo && yarn clean:coverage && yarn clean:build && rimraf node_modules", @@ -69,7 +69,7 @@ "dev": "yarn clean:build && concurrently \"yarn dev:esm\" \"yarn dev:cjs\" \"yarn build:styles --watch\" \"yarn dev:types\"", "dev:esm": "swc src -d esm --watch", "dev:cjs": "swc src -d cjs --watch -C module.type=commonjs", - "dev:types": "concurrently \"tsc -p tsconfig.cjs.json --emitDeclarationOnly --watch --preserveWatchOutput\" \"tsc -p tsconfig.esm.json --emitDeclarationOnly --watch --preserveWatchOutput\"", + "dev:types": "node ./scripts/postBuildTypes.mjs && concurrently \"tsc -p tsconfig.cjs.json --emitDeclarationOnly --watch --preserveWatchOutput\" \"tsc -p tsconfig.esm.json --emitDeclarationOnly --watch --preserveWatchOutput\"", "dev:styles": "yarn build:styles --watch" }, "dependencies": { @@ -99,6 +99,7 @@ "@typescript-eslint/eslint-plugin": "^5.60.0", "@typescript-eslint/parser": "^5.60.0", "concurrently": "^5.3.0", + "copyfiles": "^2.4.1", "eslint": "^8.43.0", "eslint-config-prettier": "^8.8.0", "eslint-plugin-require-extensions": "^0.1.3", diff --git a/packages/itwinui-react/scripts/postBuildTypes.mjs b/packages/itwinui-react/scripts/postBuildTypes.mjs new file mode 100644 index 00000000000..745cf2675d1 --- /dev/null +++ b/packages/itwinui-react/scripts/postBuildTypes.mjs @@ -0,0 +1,41 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Bentley Systems, Incorporated. All rights reserved. + * See LICENSE.md in the project root for license terms and full copyright notice. + *--------------------------------------------------------------------------------------------*/ +import { exec } from 'node:child_process'; + +// Since tsc does not include the react-table-types.d.ts file in the esm build, +// we need to copy it manually. +exec( + 'copyfiles -u 1 src/core/Table/types/react-table-types.d.ts esm', + (error) => { + if (error) { + console.error( + 'Error copying react-table-types.d.ts to esm build folder', + error, + ); + } else { + console.log( + '✓ Finished copying react-table-types.d.ts to esm build folder', + ); + } + }, +); + +// Since tsc does not include the react-table-types.d.ts file in the cjs build, +// we need to copy it manually. +exec( + 'copyfiles -u 1 src/core/Table/types/react-table-types.d.ts cjs', + (error) => { + if (error) { + console.error( + 'Error copying react-table-types.d.ts to cjs build folder', + error, + ); + } else { + console.log( + '✓ Finished copying react-table-types.d.ts to cjs build folder', + ); + } + }, +); diff --git a/packages/itwinui-react/src/core/Table/index.ts b/packages/itwinui-react/src/core/Table/index.ts index a0605cd60ba..6fffa306331 100644 --- a/packages/itwinui-react/src/core/Table/index.ts +++ b/packages/itwinui-react/src/core/Table/index.ts @@ -5,7 +5,8 @@ export { Table } from './Table.js'; // Export everything from './types/react-table-types.js' as a variable called `ReactTableTypes` -export { TableTypes } from './types/index.js'; +// export { TableTypes } from './types/index.js'; +export * from './types/index.js'; export type { TableProps, TablePaginatorRendererProps } from './Table.js'; diff --git a/packages/itwinui-react/src/core/Table/types/index.ts b/packages/itwinui-react/src/core/Table/types/index.ts index 62472f8644d..dbc84ef55f2 100644 --- a/packages/itwinui-react/src/core/Table/types/index.ts +++ b/packages/itwinui-react/src/core/Table/types/index.ts @@ -8,9 +8,10 @@ // } from './react-table-types.js'; // import everything from './react-table-types.js' and put it in a variable called ReactTableTypes -// import * as ReactTableTypes from './react-table-types.js'; -// export { ReactTableTypes }; -export * as TableTypes from './react-table-types.js'; +import * as TableTypes from './react-table-types.js'; +export { TableTypes }; +// export { TableTypes } from './react-table-types.js'; +// export * from './testing.js'; // const testing: ReactTableTypes.TableBodyPropGetter | undefined = undefined; // console.log(testing ?? 0 + 1); diff --git a/yarn.lock b/yarn.lock index 244a9569309..a20efbe4e49 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1273,13 +1273,20 @@ resolved "https://registry.npmjs.org/@babel/regjsgen/-/regjsgen-0.8.0.tgz" integrity sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA== -"@babel/runtime@^7.12.5", "@babel/runtime@^7.17.8", "@babel/runtime@^7.18.3", "@babel/runtime@^7.20.1", "@babel/runtime@^7.3.1", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2": +"@babel/runtime@^7.12.5", "@babel/runtime@^7.17.8", "@babel/runtime@^7.18.3", "@babel/runtime@^7.20.1", "@babel/runtime@^7.3.1", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2": version "7.22.5" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.22.5.tgz#8564dd588182ce0047d55d7a75e93921107b57ec" integrity sha512-ecjvYlnAaZ/KVneE/OdKYBYfgXV3Ptu6zQWmgEF7vwKhQnvVS6bjMD2XYgj+SNvQ1GfK/pjgokfPkC/2CO8CuA== dependencies: regenerator-runtime "^0.13.11" +"@babel/runtime@^7.7.2": + version "7.22.11" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.22.11.tgz#7a9ba3bbe406ad6f9e8dd4da2ece453eb23a77a4" + integrity sha512-ee7jVNlWN09+KftVOu9n7S8gQzD/Z6hN/I8VBRXW4P1+Xe7kJGXMwu8vds4aGIMHZnNbdpSWCfZZtinytpcAvA== + dependencies: + regenerator-runtime "^0.14.0" + "@babel/template@^7.18.10", "@babel/template@^7.20.7", "@babel/template@^7.22.5", "@babel/template@^7.3.3": version "7.22.5" resolved "https://registry.npmjs.org/@babel/template/-/template-7.22.5.tgz" @@ -5194,7 +5201,7 @@ big-integer@^1.6.44: big.js@^5.2.2: version "5.2.2" - resolved "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz" + resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328" integrity sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ== bin-check@^4.1.0: @@ -6082,6 +6089,19 @@ cookie@0.5.0, cookie@^0.5.0: resolved "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz" integrity sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw== +copyfiles@^2.4.1: + version "2.4.1" + resolved "https://registry.yarnpkg.com/copyfiles/-/copyfiles-2.4.1.tgz#d2dcff60aaad1015f09d0b66e7f0f1c5cd3c5da5" + integrity sha512-fereAvAvxDrQDOXybk3Qu3dPbOoKoysFMWtkY3mv5BsL8//OSZVL5DCLYqgRfY5cWirgRzlC+WSrxp6Bo3eNZg== + dependencies: + glob "^7.0.5" + minimatch "^3.0.3" + mkdirp "^1.0.4" + noms "0.0.0" + through2 "^2.0.1" + untildify "^4.0.0" + yargs "^16.1.0" + core-js-compat@^3.25.1: version "3.28.0" resolved "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.28.0.tgz" @@ -6795,7 +6815,7 @@ emoji-regex@^9.2.2: emojis-list@^3.0.0: version "3.0.0" - resolved "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz" + resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-3.0.0.tgz#5570662046ad29e2e916e71aae260abdff4f6a78" integrity sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q== encodeurl@~1.0.2: @@ -8024,7 +8044,7 @@ glob-to-regexp@^0.4.1: resolved "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz" integrity sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw== -glob@^7.0.0, glob@^7.1.3, glob@^7.1.4, glob@^7.2.0: +glob@^7.0.0, glob@^7.0.5, glob@^7.1.3, glob@^7.1.4, glob@^7.2.0: version "7.2.3" resolved "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz" integrity sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q== @@ -8683,7 +8703,7 @@ inflight@^1.0.4: once "^1.3.0" wrappy "1" -inherits@2, inherits@2.0.4, inherits@^2.0.1, inherits@^2.0.3, inherits@^2.0.4, inherits@~2.0.3: +inherits@2, inherits@2.0.4, inherits@^2.0.1, inherits@^2.0.3, inherits@^2.0.4, inherits@~2.0.1, inherits@~2.0.3: version "2.0.4" resolved "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz" integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ== @@ -9137,6 +9157,11 @@ is-wsl@^2.1.1, is-wsl@^2.2.0: dependencies: is-docker "^2.0.0" +isarray@0.0.1: + version "0.0.1" + resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf" + integrity sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ== + isarray@~1.0.0: version "1.0.0" resolved "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz" @@ -9777,7 +9802,7 @@ json-stringify-safe@~5.0.1: json5@^2.1.2, json5@^2.2.2, json5@^2.2.3: version "2.2.3" - resolved "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz" + resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283" integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg== json5@^2.1.3: @@ -11013,7 +11038,7 @@ min-indent@^1.0.0, min-indent@^1.0.1: resolved "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz" integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg== -minimatch@3.1.2, minimatch@^3.0.2, minimatch@^3.0.4, minimatch@^3.0.5, minimatch@^3.1.1, minimatch@^3.1.2, minimatch@^5.0.1: +minimatch@3.1.2, minimatch@^3.0.2, minimatch@^3.0.3, minimatch@^3.0.4, minimatch@^3.0.5, minimatch@^3.1.1, minimatch@^3.1.2, minimatch@^5.0.1: version "3.1.2" resolved "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz" integrity sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw== @@ -11223,6 +11248,14 @@ node-releases@^2.0.8: resolved "https://registry.npmjs.org/node-releases/-/node-releases-2.0.10.tgz" integrity sha512-5GFldHPXVG/YZmFzJvKK2zDSzPKhEp0+ZR5SVaoSag9fsL5YgHbUHDfnG5494ISANDcK4KwPXAx2xqVEydmd7w== +noms@0.0.0: + version "0.0.0" + resolved "https://registry.yarnpkg.com/noms/-/noms-0.0.0.tgz#da8ebd9f3af9d6760919b27d9cdc8092a7332859" + integrity sha512-lNDU9VJaOPxUmXcLb+HQFeUgQQPtMI24Gt6hgfuMHRJgMRHMF/qZ4HJD3GDru4sSw9IQl2jPjAYnQrdIeLbwow== + dependencies: + inherits "^2.0.1" + readable-stream "~1.0.31" + normalize-package-data@^2.3.2, normalize-package-data@^2.5.0: version "2.5.0" resolved "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz" @@ -12766,6 +12799,16 @@ readable-stream@^3.1.1, readable-stream@^3.4.0, readable-stream@^3.6.0: string_decoder "^1.1.1" util-deprecate "^1.0.1" +readable-stream@~1.0.31: + version "1.0.34" + resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.0.34.tgz#125820e34bc842d2f2aaafafe4c2916ee32c157c" + integrity sha512-ok1qVCJuRkNmvebYikljxJA/UEsKwLl2nI1OmaqAu4/UE+h0wKCHok4XkL/gvi39OacXvw59RJUOFUkDib2rHg== + dependencies: + core-util-is "~1.0.0" + inherits "~2.0.1" + isarray "0.0.1" + string_decoder "~0.10.x" + readable-web-to-node-stream@^3.0.0, readable-web-to-node-stream@^3.0.2: version "3.0.2" resolved "https://registry.yarnpkg.com/readable-web-to-node-stream/-/readable-web-to-node-stream-3.0.2.tgz#5d52bb5df7b54861fd48d015e93a2cb87b3ee0bb" @@ -12850,6 +12893,11 @@ regenerator-runtime@^0.13.11, regenerator-runtime@^0.13.3: resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9" integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg== +regenerator-runtime@^0.14.0: + version "0.14.0" + resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz#5e19d68eb12d486f797e15a3c6a918f7cec5eb45" + integrity sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA== + regenerator-transform@^0.15.1: version "0.15.1" resolved "https://registry.npmjs.org/regenerator-transform/-/regenerator-transform-0.15.1.tgz" @@ -13974,6 +14022,11 @@ string_decoder@^1.1.1: dependencies: safe-buffer "~5.2.0" +string_decoder@~0.10.x: + version "0.10.31" + resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-0.10.31.tgz#62e203bc41766c6c28c9fc84301dab1c5310fa94" + integrity sha512-ev2QzSzWPYmy9GuqfIVildA4OdcGLeFZQrq5ys6RtiuF+RQQiZWr8TZNyAcuVXyQRYfEO+MsoB/1BuQVhOJuoQ== + string_decoder@~1.1.1: version "1.1.1" resolved "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz" @@ -14407,7 +14460,7 @@ throttleit@^1.0.0: resolved "https://registry.npmjs.org/throttleit/-/throttleit-1.0.0.tgz" integrity sha1-nnhYNtr0Z0MUWlmEtiaNgoUorGw= -through2@^2.0.3: +through2@^2.0.1, through2@^2.0.3: version "2.0.5" resolved "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz" integrity sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ== @@ -15607,9 +15660,9 @@ yallist@^4.0.0: integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A== yaml@^1.10.0, yaml@^1.10.2, yaml@^2.2.1, yaml@^2.2.2: - version "2.3.1" - resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.3.1.tgz#02fe0975d23cd441242aa7204e09fc28ac2ac33b" - integrity sha512-2eHWfjaoXgTBC2jNM1LRef62VQa0umtvRiDSk6HSzW7RvS5YtkabJrwYLLEKWBc8a5U2PTSCs+dJjUTJdlHsWQ== + version "2.3.2" + resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.3.2.tgz#f522db4313c671a0ca963a75670f1c12ea909144" + integrity sha512-N/lyzTPaJasoDmfV7YTrYCI0G/3ivm/9wdG0aHuheKowWQwGTsK0Eoiw6utmzAnI6pkJa0DUVygvp3spqqEKXg== yargs-parser@^13.1.2: version "13.1.2" @@ -15688,7 +15741,7 @@ yargs@^15.1.0: y18n "^4.0.0" yargs-parser "^18.1.2" -yargs@^16.2.0: +yargs@^16.1.0, yargs@^16.2.0: version "16.2.0" resolved "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz" integrity sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw== From acfb8fd69f9724e4438f3cea9249263ed42b873b Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Mon, 28 Aug 2023 14:53:50 -0400 Subject: [PATCH 043/196] Working export of types (export type) instead of just values (export) --- packages/itwinui-react/src/core/Table/index.ts | 2 +- packages/itwinui-react/src/core/Table/types/testing.ts | 5 +++++ packages/itwinui-react/src/index.ts | 2 +- playgrounds/vite/src/App.tsx | 4 ++++ 4 files changed, 11 insertions(+), 2 deletions(-) create mode 100644 packages/itwinui-react/src/core/Table/types/testing.ts diff --git a/packages/itwinui-react/src/core/Table/index.ts b/packages/itwinui-react/src/core/Table/index.ts index 6fffa306331..150336e7703 100644 --- a/packages/itwinui-react/src/core/Table/index.ts +++ b/packages/itwinui-react/src/core/Table/index.ts @@ -6,7 +6,7 @@ export { Table } from './Table.js'; // Export everything from './types/react-table-types.js' as a variable called `ReactTableTypes` // export { TableTypes } from './types/index.js'; -export * from './types/index.js'; +export { TableTypes } from './types/index.js'; export type { TableProps, TablePaginatorRendererProps } from './Table.js'; diff --git a/packages/itwinui-react/src/core/Table/types/testing.ts b/packages/itwinui-react/src/core/Table/types/testing.ts new file mode 100644 index 00000000000..08640023f0f --- /dev/null +++ b/packages/itwinui-react/src/core/Table/types/testing.ts @@ -0,0 +1,5 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Bentley Systems, Incorporated. All rights reserved. + * See LICENSE.md in the project root for license terms and full copyright notice. + *--------------------------------------------------------------------------------------------*/ +export const q = 1; diff --git a/packages/itwinui-react/src/index.ts b/packages/itwinui-react/src/index.ts index e40b81be0e2..74551556c6f 100644 --- a/packages/itwinui-react/src/index.ts +++ b/packages/itwinui-react/src/index.ts @@ -4,7 +4,7 @@ *--------------------------------------------------------------------------------------------*/ export * from './core/index.js'; // export * from './types/react-table-config.js'; -export * from './core/Table/types/react-table-types.js'; +export type * as ReactTableTypes from './core/Table/types/react-table-types.js'; // import * from './types/react-table-types.js'; export const CellPropsq = {}; diff --git a/playgrounds/vite/src/App.tsx b/playgrounds/vite/src/App.tsx index 6b8d1a178ea..64b321c21b1 100644 --- a/playgrounds/vite/src/App.tsx +++ b/playgrounds/vite/src/App.tsx @@ -9,6 +9,8 @@ import { MenuItem, Table, tableFilters, + // TableTypes, + ReactTableTypes, } from '@itwin/itwinui-react'; import { TableFilterProps } from '@itwin/itwinui-react/cjs/core/Table/index.js'; import { useCallback, useMemo, useState } from 'react'; @@ -24,6 +26,8 @@ import type { type ValueOf = T[keyof T]; +const q: ReactTableTypes.Column; + const App = () => { // type TableStoryDataType = Record; // interface TableStoryDataType extends Record { From d9914ba9ae3e3b9b8e7fa52c272c7095e10c2c52 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Mon, 28 Aug 2023 15:42:12 -0400 Subject: [PATCH 044/196] Proper exports along the barrel files --- .../itwinui-react/src/core/Table/index.ts | 2 +- .../src/core/Table/types/index.ts | 4 +-- packages/itwinui-react/src/core/index.ts | 1 + packages/itwinui-react/src/index.ts | 4 +-- playgrounds/vite/src/App.tsx | 26 +++++++++---------- 5 files changed, 19 insertions(+), 18 deletions(-) diff --git a/packages/itwinui-react/src/core/Table/index.ts b/packages/itwinui-react/src/core/Table/index.ts index 150336e7703..8a935400e6f 100644 --- a/packages/itwinui-react/src/core/Table/index.ts +++ b/packages/itwinui-react/src/core/Table/index.ts @@ -6,7 +6,7 @@ export { Table } from './Table.js'; // Export everything from './types/react-table-types.js' as a variable called `ReactTableTypes` // export { TableTypes } from './types/index.js'; -export { TableTypes } from './types/index.js'; +export type { TableTypes } from './types/index.js'; export type { TableProps, TablePaginatorRendererProps } from './Table.js'; diff --git a/packages/itwinui-react/src/core/Table/types/index.ts b/packages/itwinui-react/src/core/Table/types/index.ts index dbc84ef55f2..72f341b2155 100644 --- a/packages/itwinui-react/src/core/Table/types/index.ts +++ b/packages/itwinui-react/src/core/Table/types/index.ts @@ -8,8 +8,8 @@ // } from './react-table-types.js'; // import everything from './react-table-types.js' and put it in a variable called ReactTableTypes -import * as TableTypes from './react-table-types.js'; -export { TableTypes }; +export type * as TableTypes from './react-table-types.js'; +// export { TableTypes }; // export { TableTypes } from './react-table-types.js'; // export * from './testing.js'; diff --git a/packages/itwinui-react/src/core/index.ts b/packages/itwinui-react/src/core/index.ts index c9124c59cf6..9de176f142f 100644 --- a/packages/itwinui-react/src/core/index.ts +++ b/packages/itwinui-react/src/core/index.ts @@ -155,6 +155,7 @@ export type { TableFilterValue, DateRangeFilterOptions, TablePaginatorRendererProps, + TableTypes, } from './Table/index.js'; export { Tag, TagContainer } from './Tag/index.js'; diff --git a/packages/itwinui-react/src/index.ts b/packages/itwinui-react/src/index.ts index 74551556c6f..87fa80c0e45 100644 --- a/packages/itwinui-react/src/index.ts +++ b/packages/itwinui-react/src/index.ts @@ -4,7 +4,7 @@ *--------------------------------------------------------------------------------------------*/ export * from './core/index.js'; // export * from './types/react-table-config.js'; -export type * as ReactTableTypes from './core/Table/types/react-table-types.js'; +// export type * as ReactTableTypes from './core/Table/types/react-table-types.js'; // import * from './types/react-table-types.js'; -export const CellPropsq = {}; +// export const CellPropsq = {}; diff --git a/playgrounds/vite/src/App.tsx b/playgrounds/vite/src/App.tsx index 64b321c21b1..d2b679d530a 100644 --- a/playgrounds/vite/src/App.tsx +++ b/playgrounds/vite/src/App.tsx @@ -9,24 +9,24 @@ import { MenuItem, Table, tableFilters, - // TableTypes, - ReactTableTypes, + TableTypes, + // ReactTableTypes, } from '@itwin/itwinui-react'; import { TableFilterProps } from '@itwin/itwinui-react/cjs/core/Table/index.js'; import { useCallback, useMemo, useState } from 'react'; -import type { - CellProps, - // CellRendererProps, - Column, - Row, - TableInstance, - TableState, - Renderer, -} from '@itwin/itwinui-react'; +// import type { +// CellProps, +// // CellRendererProps, +// Column, +// Row, +// TableInstance, +// TableState, +// Renderer, +// } from '@itwin/itwinui-react'; type ValueOf = T[keyof T]; -const q: ReactTableTypes.Column; +const q: TableTypes.Column; const App = () => { // type TableStoryDataType = Record; @@ -111,7 +111,7 @@ const App = () => { Filter: tableFilters.TextFilter(), Cell: (props) =>
, }, - ] satisfies Array>, + ] satisfies Array>, [isRowDisabled, menuItems], ); From 3eeb66525016424282b1bf81f070458e758a82a2 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Mon, 28 Aug 2023 16:18:10 -0400 Subject: [PATCH 045/196] Changed some leftover imports from react-table to react-table-types.js --- .../core/Table/filters/DateRangeFilter/DateRangeFilter.test.tsx | 2 +- .../itwinui-react/src/core/Table/filters/FilterToggle.test.tsx | 2 +- .../Table/filters/NumberRangeFilter/NumberRangeFilter.test.tsx | 2 +- .../src/core/Table/filters/TextFilter/TextFilter.test.tsx | 2 +- .../src/core/Table/filters/customFilterFunctions.test.ts | 2 +- playgrounds/vite/src/App.tsx | 2 -- 6 files changed, 5 insertions(+), 7 deletions(-) diff --git a/packages/itwinui-react/src/core/Table/filters/DateRangeFilter/DateRangeFilter.test.tsx b/packages/itwinui-react/src/core/Table/filters/DateRangeFilter/DateRangeFilter.test.tsx index 4ffec75fde0..9c40316ccdf 100644 --- a/packages/itwinui-react/src/core/Table/filters/DateRangeFilter/DateRangeFilter.test.tsx +++ b/packages/itwinui-react/src/core/Table/filters/DateRangeFilter/DateRangeFilter.test.tsx @@ -4,7 +4,7 @@ *--------------------------------------------------------------------------------------------*/ import { fireEvent, render, screen } from '@testing-library/react'; import * as React from 'react'; -import type { HeaderGroup } from 'react-table'; +import type { HeaderGroup } from '../../types/react-table-types.js'; import { DateRangeFilter, type DateRangeFilterProps, diff --git a/packages/itwinui-react/src/core/Table/filters/FilterToggle.test.tsx b/packages/itwinui-react/src/core/Table/filters/FilterToggle.test.tsx index 8b1ca81ad26..b9c9bf04eb9 100644 --- a/packages/itwinui-react/src/core/Table/filters/FilterToggle.test.tsx +++ b/packages/itwinui-react/src/core/Table/filters/FilterToggle.test.tsx @@ -5,7 +5,7 @@ import { render, type RenderResult, screen } from '@testing-library/react'; import * as React from 'react'; -import type { HeaderGroup } from 'react-table'; +import type { HeaderGroup } from '../types/react-table-types.js'; import { FilterToggle, type FilterToggleProps } from './FilterToggle.js'; import { tableFilters } from './tableFilters.js'; diff --git a/packages/itwinui-react/src/core/Table/filters/NumberRangeFilter/NumberRangeFilter.test.tsx b/packages/itwinui-react/src/core/Table/filters/NumberRangeFilter/NumberRangeFilter.test.tsx index e02a11b51e6..e05bc51d07b 100644 --- a/packages/itwinui-react/src/core/Table/filters/NumberRangeFilter/NumberRangeFilter.test.tsx +++ b/packages/itwinui-react/src/core/Table/filters/NumberRangeFilter/NumberRangeFilter.test.tsx @@ -4,7 +4,7 @@ *--------------------------------------------------------------------------------------------*/ import { fireEvent, render, screen } from '@testing-library/react'; import * as React from 'react'; -import type { HeaderGroup } from 'react-table'; +import type { HeaderGroup } from '../../types/react-table-types.js'; import { NumberRangeFilter } from './NumberRangeFilter.js'; import type { NumberRangeFilterProps } from './NumberRangeFilter.js'; diff --git a/packages/itwinui-react/src/core/Table/filters/TextFilter/TextFilter.test.tsx b/packages/itwinui-react/src/core/Table/filters/TextFilter/TextFilter.test.tsx index 2c72431a17c..f785ca05cb3 100644 --- a/packages/itwinui-react/src/core/Table/filters/TextFilter/TextFilter.test.tsx +++ b/packages/itwinui-react/src/core/Table/filters/TextFilter/TextFilter.test.tsx @@ -4,7 +4,7 @@ *--------------------------------------------------------------------------------------------*/ import { fireEvent, render, screen } from '@testing-library/react'; import * as React from 'react'; -import type { HeaderGroup } from 'react-table'; +import type { HeaderGroup } from '../../types/react-table-types.js'; import type { TableFilterProps } from '../types.js'; import { TextFilter } from './TextFilter.js'; diff --git a/packages/itwinui-react/src/core/Table/filters/customFilterFunctions.test.ts b/packages/itwinui-react/src/core/Table/filters/customFilterFunctions.test.ts index bfb81fe63f9..29670f57e0e 100644 --- a/packages/itwinui-react/src/core/Table/filters/customFilterFunctions.test.ts +++ b/packages/itwinui-react/src/core/Table/filters/customFilterFunctions.test.ts @@ -3,7 +3,7 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ /* eslint-disable @typescript-eslint/no-explicit-any */ -import type { Row } from 'react-table'; +import type { Row } from '../types/react-table-types.js'; import { customFilterFunctions } from './customFilterFunctions.js'; const mockRows = (values: any[]) => { diff --git a/playgrounds/vite/src/App.tsx b/playgrounds/vite/src/App.tsx index d2b679d530a..36f488c3c07 100644 --- a/playgrounds/vite/src/App.tsx +++ b/playgrounds/vite/src/App.tsx @@ -26,8 +26,6 @@ import { useCallback, useMemo, useState } from 'react'; type ValueOf = T[keyof T]; -const q: TableTypes.Column; - const App = () => { // type TableStoryDataType = Record; // interface TableStoryDataType extends Record { From 9bfee47447c2f8209c2062487a354704b2f62f4e Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Mon, 28 Aug 2023 16:18:57 -0400 Subject: [PATCH 046/196] Removed unnecessarily testing files --- .../core/Table/types/react-table-config.ts | 243 ------------------ .../src/core/Table/types/testing.ts | 5 - 2 files changed, 248 deletions(-) delete mode 100644 packages/itwinui-react/src/core/Table/types/react-table-config.ts delete mode 100644 packages/itwinui-react/src/core/Table/types/testing.ts diff --git a/packages/itwinui-react/src/core/Table/types/react-table-config.ts b/packages/itwinui-react/src/core/Table/types/react-table-config.ts deleted file mode 100644 index 5768280c968..00000000000 --- a/packages/itwinui-react/src/core/Table/types/react-table-config.ts +++ /dev/null @@ -1,243 +0,0 @@ -/*--------------------------------------------------------------------------------------------- - * Copyright (c) Bentley Systems, Incorporated. All rights reserved. - * See LICENSE.md in the project root for license terms and full copyright notice. - *--------------------------------------------------------------------------------------------*/ -// react-table was written with plain JS therefore these type overrides are needed -// Link: https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-table -/* eslint-disable @typescript-eslint/ban-types */ -// eslint-disable-next-line @typescript-eslint/ban-ts-comment -// @ts-ignore -// import type { -// UseColumnOrderInstanceProps, -// UseColumnOrderState, -// UseExpandedHooks, -// UseExpandedInstanceProps, -// UseExpandedOptions, -// UseExpandedRowProps, -// UseExpandedState, -// UseFiltersColumnOptions, -// UseFiltersColumnProps, -// UseFiltersInstanceProps, -// UseFiltersOptions, -// UseFiltersState, -// UseGlobalFiltersColumnOptions, -// UseGlobalFiltersInstanceProps, -// UseGlobalFiltersOptions, -// UseGlobalFiltersState, -// // UseGroupByCellProps, -// // UseGroupByColumnOptions, -// UseGroupByColumnProps, -// UseGroupByHooks, -// UseGroupByInstanceProps, -// // UseGroupByOptions, -// UseGroupByRowProps, -// UseGroupByState, -// UsePaginationInstanceProps, -// UsePaginationOptions, -// UsePaginationState, -// UseResizeColumnsColumnOptions, -// UseResizeColumnsColumnProps, -// UseResizeColumnsOptions, -// // UseResizeColumnsState, -// UseRowSelectHooks, -// UseRowSelectInstanceProps, -// UseRowSelectOptions, -// UseRowSelectRowProps, -// UseRowSelectState, -// // UseRowStateCellProps, -// UseRowStateInstanceProps, -// // UseRowStateOptions, -// UseRowStateRowProps, -// UseRowStateState, -// UseSortByColumnOptions, -// UseSortByColumnProps, -// UseSortByHooks, -// UseSortByInstanceProps, -// UseSortByOptions, -// UseSortByState, -// UseTableOptions, -// } from 'react-table'; -// import type { TableFilterProps } from '../core/Table/filters/index.js'; - -// declare module 'react-table' { -////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// -// export type FieldType = 'text' | 'number' | 'date' | string; -// export type CellRendererProps = { -// /** -// * Cell HTML props passed from the Table. -// */ -// cellElementProps: TableCellProps; -// /** -// * Table specific cell props like `column`, `row`. -// */ -// cellProps: CellProps; -// /** -// * Cell's content. -// */ -// children: React.ReactNode; -// /** -// * Function that returns whether the cell is disabled. -// */ -// isDisabled?: (rowData: D) => boolean; -// }; -// take this file as-is, or comment out the sections that don't apply to your plugin configuration -// export interface TableOptions -// extends Omit, 'data' | 'columns'>, -// UseRowSelectOptions, -// UseExpandedOptions, -// UseFiltersOptions, -// // UseGroupByOptions, -// UsePaginationOptions, -// UseGlobalFiltersOptions, -// UseGlobalFiltersColumnOptions, -// Omit, 'disableResizing'>, -// // UseRowStateOptions, -// UseSortByOptions { -// /** -// * List of columns. -// * -// * Should not have a top-level `Header` or a `columns` sub-property. They are only allowed to be passed for backwards compatibility. -// * See [migration guide](https://github.com/iTwin/iTwinUI/wiki/iTwinUI-react-v2-migration-guide#breaking-changes). -// */ -// columns: Array>; -// /** -// * Table data list. -// * Must be memoized. -// * -// * Supports expandable sub-rows using the `subRows` field in data entries. -// * If some rows don't have sub-data, it is recommended to pass an empty array to `subRows` for consistent spacing. -// */ -// data: D[]; -// /** -// * Column's resize mode. -// * - `fit` - when resizing it affects current and the next column, -// * e.g. when increasing width of current column, next column's width will decrease. -// * - `expand` - when resizing it affects only the current column, -// * e.g. when increasing width of the current column, next column's width remains the same. -// * @default 'fit' -// */ -// columnResizeMode?: 'fit' | 'expand'; -// } -// export interface Hooks -// extends UseExpandedHooks, -// UseGroupByHooks, -// UseRowSelectHooks, -// UseSortByHooks {} -// export interface TableInstance -// extends UseColumnOrderInstanceProps, -// UseExpandedInstanceProps, -// UseFiltersInstanceProps, -// UseGlobalFiltersInstanceProps, -// UseGroupByInstanceProps, -// UsePaginationInstanceProps, -// UseRowSelectInstanceProps, -// UseRowStateInstanceProps, -// UseSortByInstanceProps { -// initialRows: Row[]; -// columnResizeMode: TableOptions['columnResizeMode']; -// tableWidth: number; -// } -// export interface TableState -// extends UseColumnOrderState, -// UseExpandedState, -// UseFiltersState, -// UseGlobalFiltersState, -// UseGroupByState, -// UsePaginationState, -// UseRowSelectState, -// UseRowStateState, -// UseSortByState { -// // UseResizeColumnsState with fixed typings -// columnResizing: { -// startX?: number; -// columnWidth?: number; -// nextColumnWidth?: number; -// headerIdWidths?: Array<[string, number]>; -// nextHeaderIdWidths?: Array<[string, number]>; -// columnWidths: Record; -// isResizingColumn?: string; -// }; -// isTableResizing?: boolean; -// columnReorderStartIndex: number; -// sticky: { -// isScrolledToRight?: boolean; -// isScrolledToLeft?: boolean; -// }; -// lastSelectedRowId?: string; -// } -// export interface ColumnInterface -// // UseGroupByColumnOptions, -// extends UseSortByColumnOptions, -// UseFiltersColumnOptions, -// UseResizeColumnsColumnOptions, -// UseGlobalFiltersColumnOptions { -// /** -// * Custom class name applied to header column cell. -// */ -// columnClassName?: string; -// /** -// * Custom class name applied to each column's cell. -// */ -// cellClassName?: string; -// /** -// * Type of the data in cell. Used for manual filtering. -// */ -// fieldType?: FieldType; -// /** -// * Filter component used as a column filter. Should use filters from `tableFilters`. -// */ -// Filter?: Renderer> | Renderer>; -// /** -// * String value or custom function to use for filtering. -// * Possible string values: `text`, `exactText`, `exactTextCase`, `includes`, `includesAll`, `exact`, `equals`, `between`. -// * More info about these filters: https://github.com/tannerlinsley/react-table/blob/master/src/filterTypes.js -// */ -// filter?: FilterType | DefaultFilterTypes | string; -// /** -// * Function that should return whole cell element not only the content. -// * Must be memoized. -// * @example -// * { -// * Header: 'Name', -// * accessor: 'name', -// * cellRenderer: (props) => , -// * } -// */ -// cellRenderer?: (props: CellRendererProps) => React.ReactNode; -// /** -// * If true, column can't be reordered. -// * @default false -// */ -// disableReordering?: boolean; -// /** -// * If true, column's visibility cannot be toggled. -// * @default false -// */ -// disableToggleVisibility?: boolean; -// /** -// * Side on which column should be sticked to. -// */ -// sticky?: 'left' | 'right'; -// } -// export interface ColumnInstance -// extends UseFiltersColumnProps, -// UseGroupByColumnProps, -// UseResizeColumnsColumnProps, -// UseSortByColumnProps { -// originalWidth: number; -// resizeWidth?: number; -// isResizerVisible?: boolean; -// getDragAndDropProps: () => TableKeyedProps; -// originalSticky?: 'left' | 'right' | 'none'; -// } -// export interface Cell -// extends UseGroupByCellProps, -// UseRowStateCellProps {} -// export interface Row -// extends UseExpandedRowProps, -// UseGroupByRowProps, -// UseRowSelectRowProps, -// UseRowStateRowProps { -// initialSubRows: Row[]; -// } -// } diff --git a/packages/itwinui-react/src/core/Table/types/testing.ts b/packages/itwinui-react/src/core/Table/types/testing.ts deleted file mode 100644 index 08640023f0f..00000000000 --- a/packages/itwinui-react/src/core/Table/types/testing.ts +++ /dev/null @@ -1,5 +0,0 @@ -/*--------------------------------------------------------------------------------------------- - * Copyright (c) Bentley Systems, Incorporated. All rights reserved. - * See LICENSE.md in the project root for license terms and full copyright notice. - *--------------------------------------------------------------------------------------------*/ -export const q = 1; From e9da2e59f8d82812e5758ed77370641edf461fcc Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Mon, 28 Aug 2023 16:31:41 -0400 Subject: [PATCH 047/196] Modified a few files to start using TableTypes instead of directly from @ itwin/itwinui-react --- .../src/InformationPanel.stories.tsx | 11 +- apps/storybook/src/Table.stories.tsx | 164 ++++++++++-------- 2 files changed, 103 insertions(+), 72 deletions(-) diff --git a/apps/storybook/src/InformationPanel.stories.tsx b/apps/storybook/src/InformationPanel.stories.tsx index 541d2d785de..be391e74699 100644 --- a/apps/storybook/src/InformationPanel.stories.tsx +++ b/apps/storybook/src/InformationPanel.stories.tsx @@ -4,7 +4,8 @@ *--------------------------------------------------------------------------------------------*/ import { Story, Meta } from '@storybook/react'; import React from 'react'; -import { CellProps } from '@itwin/itwinui-react'; +// import { CellProps } from '@itwin/itwinui-react'; +import { TableTypes } from '@itwin/itwinui-react'; import { action } from '@storybook/addon-actions'; import { SvgEdit } from '@itwin/itwinui-icons-react'; import { @@ -56,7 +57,7 @@ export const Basic: Story = (args) => { { id: 'name', Header: 'Name', accessor: 'name' }, { Header: 'Details', - Cell: ({ row: { index } }: CellProps<{ name: string }>) => ( + Cell: ({ row: { index } }: TableTypes.CellProps<{ name: string }>) => ( ), }, @@ -137,7 +138,7 @@ export const Horizontal: Story = (args) => { { id: 'name', Header: 'Name', accessor: 'name' }, { Header: 'Details', - Cell: ({ row: { index } }: CellProps<{ name: string }>) => ( + Cell: ({ row: { index } }: TableTypes.CellProps<{ name: string }>) => ( ), }, @@ -212,7 +213,9 @@ export const CustomActions: Story = (args) => { { id: 'name', Header: 'Name', accessor: 'name' }, { Header: 'Details', - Cell: ({ row }: CellProps<{ name: string; info: string }>) => ( + Cell: ({ + row, + }: TableTypes.CellProps<{ name: string; info: string }>) => ( ), }, diff --git a/apps/storybook/src/Table.stories.tsx b/apps/storybook/src/Table.stories.tsx index 8f6d0716065..aecaefe8581 100644 --- a/apps/storybook/src/Table.stories.tsx +++ b/apps/storybook/src/Table.stories.tsx @@ -22,8 +22,8 @@ import { Text, tableFilters, TableFilterValue, - TableProps, - // TableTypes, + // TableProps, + TableTypes, Tooltip, DefaultCell, EditableCell, @@ -103,7 +103,7 @@ export default { export const Basic: Story> = (args) => { const onClickHandler = ( - props: CellProps<{ name: string; description: string }>, + props: TableTypes.CellProps<{ name: string; description: string }>, ) => action(props.row.original.name)(); const columns = useMemo( @@ -123,7 +123,9 @@ export const Basic: Story> = (args) => { id: 'click-me', Header: 'Click', width: 100, - Cell: (props: CellProps<{ name: string; description: string }>) => { + Cell: ( + props: TableTypes.CellProps<{ name: string; description: string }>, + ) => { const onClick = () => onClickHandler(props); return ( @@ -157,7 +159,7 @@ export const Basic: Story> = (args) => { export const SelectableSingle: Story> = (args) => { const onRowClick = useCallback( - (event: React.MouseEvent, row: Row) => + (event: React.MouseEvent, row: TableTypes.Row) => action(`Row clicked: ${JSON.stringify(row.original)}`)(), [], ); @@ -179,7 +181,9 @@ export const SelectableSingle: Story> = (args) => { id: 'click-me', Header: 'Click', width: 100, - Cell: (props: CellProps<{ name: string; description: string }>) => { + Cell: ( + props: TableTypes.CellProps<{ name: string; description: string }>, + ) => { return ( > = (args) => { ); const onRowClick = useCallback( - (event: React.MouseEvent, row: Row) => + (event: React.MouseEvent, row: TableTypes.Row) => action(`Row clicked: ${JSON.stringify(row.original)}`)(), [], ); @@ -255,7 +259,9 @@ export const SelectableMulti: Story> = (args) => { id: 'click-me', Header: 'Click', width: 100, - Cell: (props: CellProps<{ name: string; description: string }>) => { + Cell: ( + props: TableTypes.CellProps<{ name: string; description: string }>, + ) => { return ( > = (args) => { const onClickHandler = ( - props: CellProps<{ name: string; description: string }>, + props: TableTypes.CellProps<{ name: string; description: string }>, ) => action(props.row.original.name)(); const onSort = useCallback( @@ -332,7 +338,9 @@ export const Sortable: Story> = (args) => { id: 'click-me', Header: 'Click', width: 100, - Cell: (props: CellProps<{ name: string; description: string }>) => { + Cell: ( + props: TableTypes.CellProps<{ name: string; description: string }>, + ) => { const onClick = () => onClickHandler(props); return ( @@ -413,7 +421,7 @@ export const Filters: Story> = (args) => { ); const columns = useMemo( - (): Column[] => [ + (): TableTypes.Column[] => [ { id: 'index', Header: '#', @@ -442,7 +450,7 @@ export const Filters: Story> = (args) => { id: 'ids', Header: 'IDs (enter one of the IDs in the filter)', accessor: 'ids', - Cell: (props: CellProps) => { + Cell: (props: TableTypes.CellProps) => { return <>{props.row.original.ids.join(', ')}; }, Filter: tableFilters.TextFilter(translatedLabels), @@ -452,7 +460,7 @@ export const Filters: Story> = (args) => { id: 'startDate', Header: 'Start date', accessor: 'startDate', - Cell: (props: CellProps) => { + Cell: (props: TableTypes.CellProps) => { return <>{formatDate(props.row.original.startDate)}; }, Filter: tableFilters.DateRangeFilter({ @@ -465,7 +473,7 @@ export const Filters: Story> = (args) => { Header: 'End date', // Converting string to Date for filtering accessor: (rowData) => new Date(rowData.endDate), - Cell: (props: CellProps) => { + Cell: (props: TableTypes.CellProps) => { return <>{formatDate(new Date(props.row.original.endDate))}; }, Filter: tableFilters.DateRangeFilter({ @@ -510,8 +518,8 @@ export const Filters: Story> = (args) => { const onFilter = React.useCallback( ( filters: TableFilterValue[], - state: TableState, - filteredData: Row<{ name: string; description: string }>[], + state: TableTypes.TableState, + filteredData: TableTypes.Row<{ name: string; description: string }>[], ) => { // rowInfo is used due to JSON errors when displaying row data let rowInfo = '['; @@ -576,7 +584,7 @@ export const GlobalFilter: Story> = (args) => { }; const onClickHandler = ( - props: CellProps<{ name: string; description: string }>, + props: TableTypes.CellProps<{ name: string; description: string }>, ) => action(props.row.original.name)(); const columns = useMemo( @@ -598,7 +606,9 @@ export const GlobalFilter: Story> = (args) => { id: 'click-me', Header: 'Click', width: 100, - Cell: (props: CellProps<{ name: string; description: string }>) => { + Cell: ( + props: TableTypes.CellProps<{ name: string; description: string }>, + ) => { const onClick = () => onClickHandler(props); return ( @@ -696,7 +706,7 @@ export const Expandable: Story> = (args) => { ); const expandedSubComponent = useCallback( - (row: Row) => ( + (row: TableTypes.Row) => (
Extra information
@@ -872,7 +882,7 @@ ExpandableSubrows.args = {
 
 export const LazyLoading: Story> = (args) => {
   const onClickHandler = (
-    props: CellProps<{ name: string; description: string }>,
+    props: TableTypes.CellProps<{ name: string; description: string }>,
   ) => action(props.row.original.name)();
 
   const columns = useMemo(
@@ -893,7 +903,9 @@ export const LazyLoading: Story> = (args) => {
         id: 'click-me',
         Header: 'Click',
         width: 100,
-        Cell: (props: CellProps<{ name: string; description: string }>) => {
+        Cell: (
+          props: TableTypes.CellProps<{ name: string; description: string }>,
+        ) => {
           const onClick = () => onClickHandler(props);
           return (
             
@@ -957,7 +969,7 @@ LazyLoading.argTypes = {
 
 export const RowInViewport: Story> = (args) => {
   const onClickHandler = (
-    props: CellProps<{ name: string; description: string }>,
+    props: TableTypes.CellProps<{ name: string; description: string }>,
   ) => action(props.row.original.name)();
 
   const columns = useMemo(
@@ -977,7 +989,9 @@ export const RowInViewport: Story> = (args) => {
         id: 'click-me',
         Header: 'Click',
         width: 100,
-        Cell: (props: CellProps<{ name: string; description: string }>) => {
+        Cell: (
+          props: TableTypes.CellProps<{ name: string; description: string }>,
+        ) => {
           const onClick = () => onClickHandler(props);
           return (
             
@@ -1045,7 +1059,7 @@ RowInViewport.argTypes = {
 
 export const DisabledRows: Story> = (args) => {
   const onRowClick = useCallback(
-    (event: React.MouseEvent, row: Row) =>
+    (event: React.MouseEvent, row: TableTypes.Row) =>
       action(`Row clicked: ${JSON.stringify(row.original)}`)(),
     [],
   );
@@ -1075,7 +1089,9 @@ export const DisabledRows: Story> = (args) => {
         Header: 'Click',
         width: 100,
         // Manually handling disabled state in custom cells
-        Cell: (props: CellProps<{ name: string; description: string }>) => (
+        Cell: (
+          props: TableTypes.CellProps<{ name: string; description: string }>,
+        ) => (
           <>
             {isRowDisabled(props.row.original) ? (
               <>Click me!
@@ -1101,7 +1117,7 @@ export const DisabledRows: Story> = (args) => {
   );
 
   const expandedSubComponent = useCallback(
-    (row: Row) => (
+    (row: TableTypes.Row) => (
       
Extra information
@@ -1490,7 +1506,7 @@ export const Full: Story> = (args) => {
   );
 
   const expandedSubComponent = useCallback(
-    (row: Row) => (
+    (row: TableTypes.Row) => (
       
Extra information
@@ -1502,7 +1518,7 @@ export const Full: Story> = (args) => {
   );
 
   const rowProps = useCallback(
-    (row: Row<{ name: string; description: string }>) => {
+    (row: TableTypes.Row<{ name: string; description: string }>) => {
       return {
         onMouseEnter: () => {
           action(`Hovered over ${row.original.name}`)();
@@ -1612,7 +1628,7 @@ export const Full2: Story> = (args) => {
   }, []);
 
   const columns = useMemo(
-    (): Column[] => [
+    (): TableTypes.Column[] => [
       {
         id: 'product',
         Header: 'Product',
@@ -1632,7 +1648,7 @@ export const Full2: Story> = (args) => {
         filter: 'between',
         disableReordering: true,
         sortType: 'number',
-        Cell: (props: CellProps) => {
+        Cell: (props: TableTypes.CellProps) => {
           return <>${props.value};
         },
         sticky: 'left',
@@ -1654,7 +1670,9 @@ export const Full2: Story> = (args) => {
         filter: 'between',
         sortType: 'number',
         width: 400,
-        cellRenderer: (props: CellRendererProps) => {
+        cellRenderer: (
+          props: TableTypes.CellRendererProps,
+        ) => {
           return (
             > = (args) => {
         filter: 'between',
         sortType: 'number',
         width: 400,
-        Cell: (props: CellProps) => {
+        Cell: (props: TableTypes.CellProps) => {
           return <>{props.value} day(s);
         },
       },
       {
         ...ActionColumn({ columnManager: true }),
-        Cell: (props: CellProps) => (
+        Cell: (props: TableTypes.CellProps) => (
           
             > = (args) => {
     [isRowDisabled, menuItems],
   );
 
-  const rowProps = useCallback((row: Row<{ status: string | undefined }>) => {
-    return {
-      status: row.original.status,
-    };
-  }, []);
+  const rowProps = useCallback(
+    (row: TableTypes.Row<{ status: string | undefined }>) => {
+      return {
+        status: row.original.status,
+      };
+    },
+    [],
+  );
 
   const [globalFilterValue, setGlobalFilterValue] = useState('');
 
@@ -1853,7 +1874,7 @@ Localized.parameters = {
 
 export const Condensed: Story> = (args) => {
   const onClickHandler = (
-    props: CellProps<{ name: string; description: string }>,
+    props: TableTypes.CellProps<{ name: string; description: string }>,
   ) => action(props.row.original.name)();
 
   const onExpand = useCallback(
@@ -1884,7 +1905,9 @@ export const Condensed: Story> = (args) => {
         id: 'click-me',
         Header: 'Click',
         width: 100,
-        Cell: (props: CellProps<{ name: string; description: string }>) => {
+        Cell: (
+          props: TableTypes.CellProps<{ name: string; description: string }>,
+        ) => {
           const onClick = () => onClickHandler(props);
           return (
             
@@ -2041,7 +2064,7 @@ export const Editable: Story> = (args) => {
   );
 
   const cellRenderer = useCallback(
-    (props: CellRendererProps) => (
+    (props: TableTypes.CellRendererProps) => (
       <>
         {!isRowDisabled(props.cellProps.row.original) &&
         props.cellProps.value !== 'Fetching...' ? (
@@ -2055,7 +2078,7 @@ export const Editable: Story> = (args) => {
   );
 
   const columns = React.useMemo(
-    (): Column[] => [
+    (): TableTypes.Column[] => [
       {
         id: 'name',
         Header: 'Name',
@@ -2578,7 +2601,7 @@ export const ResizableColumns: Story> = (args) => {
   };
 
   const columns = useMemo(
-    (): Column[] => [
+    (): TableTypes.Column[] => [
       {
         id: 'index',
         Header: '#',
@@ -2609,7 +2632,7 @@ export const ResizableColumns: Story> = (args) => {
         id: 'startDate',
         Header: 'Start date',
         accessor: 'startDate',
-        Cell: (props: CellProps) => {
+        Cell: (props: TableTypes.CellProps) => {
           return (
             <>{props.row.original.startDate.toLocaleDateString('en-US')}
           );
@@ -2620,7 +2643,7 @@ export const ResizableColumns: Story> = (args) => {
       {
         id: 'endDate',
         Header: 'End date',
-        Cell: (props: CellProps) => {
+        Cell: (props: TableTypes.CellProps) => {
           return <>{props.row.original.endDate.toLocaleDateString('en-US')};
         },
         maxWidth: 200,
@@ -2878,7 +2901,7 @@ export const HorizontalScroll: Story> = (args) => {
   );
 
   const columns = useMemo(
-    (): Column<(typeof data)[number]>[] => [
+    (): TableTypes.Column<(typeof data)[number]>[] => [
       {
         id: 'product',
         Header: 'Product',
@@ -2890,7 +2913,7 @@ export const HorizontalScroll: Story> = (args) => {
         Header: 'Price',
         accessor: 'price',
         width: 400,
-        Cell: (props: CellProps<(typeof data)[0]>) => {
+        Cell: (props: TableTypes.CellProps<(typeof data)[0]>) => {
           return <>{`$${props.value}`};
         },
       },
@@ -2911,7 +2934,7 @@ export const HorizontalScroll: Story> = (args) => {
         Header: 'Delivery Time',
         accessor: 'deliveryTime',
         width: 400,
-        Cell: (props: CellProps<(typeof data)[0]>) => {
+        Cell: (props: TableTypes.CellProps<(typeof data)[0]>) => {
           return <>{`${props.value} day(s)`};
         },
       },
@@ -3021,7 +3044,7 @@ HorizontalScroll.decorators = [
 
 export const Virtualized: Story> = (args) => {
   const onClickHandler = (
-    props: CellProps<{ name: string; description: string }>,
+    props: TableTypes.CellProps<{ name: string; description: string }>,
   ) => action(props.row.original.name)();
 
   const columns = useMemo(
@@ -3040,7 +3063,9 @@ export const Virtualized: Story> = (args) => {
         id: 'click-me',
         Header: 'Click',
         width: 100,
-        Cell: (props: CellProps<{ name: string; description: string }>) => {
+        Cell: (
+          props: TableTypes.CellProps<{ name: string; description: string }>,
+        ) => {
           const onClick = () => onClickHandler(props);
           return (
             
@@ -3089,7 +3114,8 @@ export const ScrollToRow: Story> = (args) => {
     description: string;
   };
   const onClickHandler = React.useCallback(
-    (props: CellProps) => action(props.row.original.name)(),
+    (props: TableTypes.CellProps) =>
+      action(props.row.original.name)(),
     [],
   );
 
@@ -3111,7 +3137,7 @@ export const ScrollToRow: Story> = (args) => {
         id: 'click-me',
         Header: 'Click',
         width: 100,
-        Cell: (props: CellProps) => {
+        Cell: (props: TableTypes.CellProps) => {
           const onClick = () => onClickHandler(props);
           return (
             
@@ -3149,8 +3175,10 @@ export const ScrollToRow: Story> = (args) => {
       style={{ maxHeight: '90vh' }}
       data={data}
       scrollToRow={React.useCallback(
-        (rows: Row[], data: TableStoryDataType[]) =>
-          rows.findIndex((row) => row.original.id === data[12345].id),
+        (
+          rows: TableTypes.Row[],
+          data: TableStoryDataType[],
+        ) => rows.findIndex((row) => row.original.id === data[12345].id),
         [],
       )}
     />
@@ -3308,7 +3336,7 @@ export const DraggableColumns: Story> = (args) => {
   );
 
   const columns = useMemo(
-    (): Column[] => [
+    (): TableTypes.Column[] => [
       {
         id: 'product',
         Header: 'Product',
@@ -3319,7 +3347,7 @@ export const DraggableColumns: Story> = (args) => {
         id: 'price',
         Header: 'Price',
         accessor: 'price',
-        Cell: (props: CellProps<(typeof data)[0]>) => {
+        Cell: (props: TableTypes.CellProps<(typeof data)[0]>) => {
           return <>{`$${props.value}`};
         },
       },
@@ -3337,7 +3365,7 @@ export const DraggableColumns: Story> = (args) => {
         id: 'deliveryTime',
         Header: 'Delivery Time',
         accessor: 'deliveryTime',
-        Cell: (props: CellProps<(typeof data)[0]>) => {
+        Cell: (props: TableTypes.CellProps<(typeof data)[0]>) => {
           return <>{`${props.value} day(s)`};
         },
       },
@@ -3469,7 +3497,7 @@ export const CustomizedColumns: Story> = (args) => {
   }, []);
 
   const subComponent = useCallback(
-    (row: Row) => (
+    (row: TableTypes.Row) => (
       
Extra information
@@ -3481,7 +3509,7 @@ export const CustomizedColumns: Story> = (args) => {
   );
 
   const columns = useMemo(
-    (): Column<(typeof data)[number]>[] => [
+    (): TableTypes.Column<(typeof data)[number]>[] => [
       SelectionColumn({
         isDisabled: isCheckboxDisabled,
       }),
@@ -3553,7 +3581,7 @@ export const ColumnManager: Story> = (args) => {
   };
 
   const columns = useMemo(
-    (): Column[] => [
+    (): TableTypes.Column[] => [
       {
         id: 'index',
         Header: '#',
@@ -3580,7 +3608,7 @@ export const ColumnManager: Story> = (args) => {
         id: 'startDate',
         Header: 'Start date',
         accessor: 'startDate',
-        Cell: (props: CellProps) => {
+        Cell: (props: TableTypes.CellProps) => {
           return (
             <>{props.row.original.startDate.toLocaleDateString('en-US')}
           );
@@ -3590,7 +3618,7 @@ export const ColumnManager: Story> = (args) => {
         id: 'endDate',
         Header: 'End date',
         accessor: 'endDate',
-        Cell: (props: CellProps) => {
+        Cell: (props: TableTypes.CellProps) => {
           return <>{props.row.original.endDate.toLocaleDateString('en-US')};
         },
       },
@@ -3866,7 +3894,7 @@ export const StickyColumns: Story> = (args) => {
   }, []);
 
   const columns = useMemo(
-    (): Column<(typeof data)[number]>[] => [
+    (): TableTypes.Column<(typeof data)[number]>[] => [
       {
         id: 'product',
         Header: 'Product',
@@ -3879,7 +3907,7 @@ export const StickyColumns: Story> = (args) => {
         Header: 'Price',
         accessor: 'price',
         width: 150,
-        Cell: (props: CellProps<(typeof data)[0]>) => {
+        Cell: (props: TableTypes.CellProps<(typeof data)[0]>) => {
           return <>${props.value};
         },
         sticky: 'left',
@@ -3901,7 +3929,7 @@ export const StickyColumns: Story> = (args) => {
         Header: 'Delivery Time',
         accessor: 'deliveryTime',
         width: 400,
-        Cell: (props: CellProps<(typeof data)[0]>) => {
+        Cell: (props: TableTypes.CellProps<(typeof data)[0]>) => {
           return <>{props.value} day(s);
         },
       },
@@ -4032,7 +4060,7 @@ export const StatusAndCellIcons: Story> = (args) => {
         Header: 'Name',
         accessor: 'name',
         cellRenderer: (
-          props: CellRendererProps<{
+          props: TableTypes.CellRendererProps<{
             startIcon: JSX.Element;
             endIcon: JSX.Element;
           }>,
@@ -4056,7 +4084,7 @@ export const StatusAndCellIcons: Story> = (args) => {
         accessor: 'modified',
         maxWidth: 200,
         cellRenderer: (
-          props: CellRendererProps<{
+          props: TableTypes.CellRendererProps<{
             status: 'positive' | 'warning' | 'negative' | undefined;
           }>,
         ) => {
@@ -4122,7 +4150,7 @@ export const StatusAndCellIcons: Story> = (args) => {
 
   const rowProps = useCallback(
     (
-      row: Row<{
+      row: TableTypes.Row<{
         name: string;
         modified: string;
         size: string;

From 55b492c81492b886960ccc76559f85cf3cb045fa Mon Sep 17 00:00:00 2001
From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com>
Date: Mon, 28 Aug 2023 16:32:11 -0400
Subject: [PATCH 048/196] Export TableProps

---
 packages/itwinui-react/src/core/index.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/itwinui-react/src/core/index.ts b/packages/itwinui-react/src/core/index.ts
index 9de176f142f..000948cad46 100644
--- a/packages/itwinui-react/src/core/index.ts
+++ b/packages/itwinui-react/src/core/index.ts
@@ -156,6 +156,7 @@ export type {
   DateRangeFilterOptions,
   TablePaginatorRendererProps,
   TableTypes,
+  TableProps,
 } from './Table/index.js';
 
 export { Tag, TagContainer } from './Tag/index.js';

From 6d58e8f9e2dc1e23bec026d52625151c58428627 Mon Sep 17 00:00:00 2001
From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com>
Date: Mon, 28 Aug 2023 16:53:37 -0400
Subject: [PATCH 049/196] Fixed some type errors of missing ids in Table data's
 subRows

---
 apps/storybook/src/Table.stories.tsx | 23 +++++++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/apps/storybook/src/Table.stories.tsx b/apps/storybook/src/Table.stories.tsx
index aecaefe8581..a5efebca834 100644
--- a/apps/storybook/src/Table.stories.tsx
+++ b/apps/storybook/src/Table.stories.tsx
@@ -22,7 +22,7 @@ import {
   Text,
   tableFilters,
   TableFilterValue,
-  // TableProps,
+  TableProps,
   TableTypes,
   Tooltip,
   DefaultCell,
@@ -1372,9 +1372,24 @@ export const ControlledState: Story> = (args) => {
         name: 'Row 2',
         description: 'Description 2',
         subRows: [
-          { name: 'Row 2.1', description: 'Description 2.1', subRows: [] },
-          { name: 'Row 2.2', description: 'Description 2.2', subRows: [] },
-          { name: 'Row 2.3', description: 'Description 2.3', subRows: [] },
+          {
+            id: '2.1',
+            name: 'Row 2.1',
+            description: 'Description 2.1',
+            subRows: [],
+          },
+          {
+            id: '2.2',
+            name: 'Row 2.2',
+            description: 'Description 2.2',
+            subRows: [],
+          },
+          {
+            id: '2.3',
+            name: 'Row 2.3',
+            description: 'Description 2.3',
+            subRows: [],
+          },
         ],
       },
       { id: '3', name: 'Row 3', description: 'Description 3', subRows: [] },

From 6a58ad9d556000bb4cbf90c45b63aed0c37b2581 Mon Sep 17 00:00:00 2001
From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com>
Date: Tue, 29 Aug 2023 11:35:23 -0400
Subject: [PATCH 050/196] Added back all types on TableStoryDataType

---
 playgrounds/vite/src/App.tsx | 42 ++++++++++++++++++------------------
 1 file changed, 21 insertions(+), 21 deletions(-)

diff --git a/playgrounds/vite/src/App.tsx b/playgrounds/vite/src/App.tsx
index 36f488c3c07..f1665a098e2 100644
--- a/playgrounds/vite/src/App.tsx
+++ b/playgrounds/vite/src/App.tsx
@@ -30,14 +30,14 @@ const App = () => {
   // type TableStoryDataType = Record;
   // interface TableStoryDataType extends Record {
   interface TableStoryDataType extends Record {
-    1: string;
-    // price: number;
+    // 1: string;
+    price: number;
     // // [K in string]: any;
-    // quantity: number;
-    // rating: number;
-    // deliveryTime: number;
-    // status: 'positive' | 'negative' | 'warning' | undefined;
-    // subRows: TableStoryDataType[];
+    quantity: number;
+    rating: number;
+    deliveryTime: number;
+    status: 'positive' | 'negative' | 'warning' | undefined;
+    subRows: TableStoryDataType[];
     // 1?: number;
   }
 
@@ -57,19 +57,19 @@ const App = () => {
       const keyValue = parentRow ? `${parentRow}.${index + 1}` : `${index + 1}`;
       const rating = (index % 4) + 1;
       return {
-        1: `Product ${keyValue}`,
-        // price: ((index % 10) + 1) * 15,
-        // quantity: ((index % 10) + 1) * 150,
-        // rating: rating,
-        // deliveryTime: (index % 15) + 1,
-        // status:
-        //   rating >= 4 ? 'positive' : rating === 3 ? 'warning' : 'negative',
-        // subRows:
-        //   depth < 2
-        //     ? Array(Math.round(index % 5))
-        //         .fill(null)
-        //         .map((_, index) => generateItem(index, keyValue, depth + 1))
-        //     : [],
+        // 1: `Product ${keyValue}`,
+        price: ((index % 10) + 1) * 15,
+        quantity: ((index % 10) + 1) * 150,
+        rating: rating,
+        deliveryTime: (index % 15) + 1,
+        status:
+          rating >= 4 ? 'positive' : rating === 3 ? 'warning' : 'negative',
+        subRows:
+          depth < 2
+            ? Array(Math.round(index % 5))
+                .fill(null)
+                .map((_, index) => generateItem(index, keyValue, depth + 1))
+            : [],
       };
     },
     [],
@@ -107,7 +107,7 @@ const App = () => {
           Header: 'Product',
           accessor: 'product',
           Filter: tableFilters.TextFilter(),
-          Cell: (props) => 
, + Cell: (props) =>
{`${props}`}
, }, ] satisfies Array>, [isRowDisabled, menuItems], From b5ff12c972b76f0a97fab2c4fc0b6a7f8d5d6304 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Tue, 29 Aug 2023 16:39:06 -0400 Subject: [PATCH 051/196] Changed all object to Record --- .../core/Table/types/react-table-types.d.ts | 423 ++++++++++-------- 1 file changed, 238 insertions(+), 185 deletions(-) diff --git a/packages/itwinui-react/src/core/Table/types/react-table-types.d.ts b/packages/itwinui-react/src/core/Table/types/react-table-types.d.ts index 4d6ee9c1e22..92ab80f79a0 100644 --- a/packages/itwinui-react/src/core/Table/types/react-table-types.d.ts +++ b/packages/itwinui-react/src/core/Table/types/react-table-types.d.ts @@ -44,13 +44,13 @@ export const testingVar = 0; * The empty definitions of below provides a base definition for the parts used by useTable, that can then be extended in the users code. * * @example - * export interface TableOptions + * export interface TableOptions = {}}> * extends * UseExpandedOptions, * UseFiltersOptions {} * see https://gist.github.com/ggascoigne/646e14c9d54258e40588a13aabf0102d for more details */ -export interface TableOptions +export interface TableOptions> extends Omit, 'data' | 'columns'>, UseRowSelectOptions, UseExpandedOptions, @@ -88,7 +88,7 @@ export interface TableOptions columnResizeMode?: 'fit' | 'expand'; } -export interface TableInstance +export interface TableInstance = {}> extends Omit, 'columns' | 'pageCount'>, UseTableInstanceProps, UseColumnOrderInstanceProps, @@ -105,7 +105,7 @@ export interface TableInstance tableWidth: number; } -export interface TableState +export interface TableState = {}> extends UseColumnOrderState, UseExpandedState, UseFiltersState, @@ -136,19 +136,19 @@ export interface TableState lastSelectedRowId?: string; } -export interface Hooks +export interface Hooks = {}> extends UseTableHooks, UseExpandedHooks, UseGroupByHooks, UseRowSelectHooks, UseSortByHooks {} -export interface Cell +export interface Cell = {}, V = any> extends UseTableCellProps, UseGroupByCellProps, UseRowStateCellProps {} -export interface ColumnInterface +export interface ColumnInterface = {}> extends UseTableColumnOptions, // UseGroupByColumnOptions, UseSortByColumnOptions, @@ -204,35 +204,41 @@ export interface ColumnInterface sticky?: 'left' | 'right'; } -export interface ColumnInterfaceBasedOnValue { +export interface ColumnInterfaceBasedOnValue< + D extends Record = {}, + V = any, +> { Cell?: Renderer> | undefined; } -export interface ColumnGroupInterface { - columns: Array>; +export interface ColumnGroupInterface> { + // columns: Array>; } -export type ColumnGroup = ColumnInterface & - ColumnGroupInterface & - ( - | { Header: string } - | ({ id: IdType } & { - Header: Renderer>; - }) - ) & { accessor?: Accessor | undefined }; // Not used, but needed for backwards compatibility +export type ColumnGroup = {}> = + ColumnInterface & + ColumnGroupInterface & + ( + | { Header: string } + | ({ id: IdType } & { + Header: Renderer>; + }) + ) & { accessor?: Accessor | undefined }; // Not used, but needed for backwards compatibility type ValueOf = T[keyof T]; // The accessors like `foo.bar` are not supported, use functions instead -export type ColumnWithStrictAccessor = +export type ColumnWithStrictAccessor = {}> = ColumnInterface & ValueOf<{ [K in keyof D]: { accessor: K; - } & ColumnInterfaceBasedOnValue; + Cell?: Renderer> | undefined; + }; + // } & ColumnInterfaceBasedOnValue; }>; -export type ColumnWithLooseAccessor = +export type ColumnWithLooseAccessor = {}> = ColumnInterface & ColumnInterfaceBasedOnValue & ( @@ -245,12 +251,13 @@ export type ColumnWithLooseAccessor = | undefined; }; -export type Column = - | ColumnGroup - | ColumnWithLooseAccessor - | ColumnWithStrictAccessor; +export type Column = {}> = + ColumnWithStrictAccessor; +// | ColumnGroup +// | ColumnWithLooseAccessor +// | ColumnWithStrictAccessor; -export interface ColumnInstance +export interface ColumnInstance = {}> extends Omit, 'id'>, ColumnInterfaceBasedOnValue, UseTableColumnProps, @@ -265,11 +272,11 @@ export interface ColumnInstance originalSticky?: 'left' | 'right' | 'none'; } -export interface HeaderGroup +export interface HeaderGroup = {}> extends ColumnInstance, UseTableHeaderGroupProps {} -export interface Row +export interface Row = {}> extends UseTableRowProps, UseExpandedRowProps, UseGroupByRowProps, @@ -311,20 +318,20 @@ export interface TableToggleCommonProps extends TableCommonProps { indeterminate?: boolean | undefined; } -export interface MetaBase { +export interface MetaBase> { instance: TableInstance; userProps: any; } // inspired by ExtendState in https://github.com/reduxjs/redux/blob/master/src/types/store.ts -export type Meta> = [ - Extension, -] extends [never] - ? M - : M & Extension; +export type Meta< + D extends Record, + Extension = never, + M = MetaBase, +> = [Extension] extends [never] ? M : M & Extension; //#region useTable -export function useTable( +export function useTable = {}>( options: TableOptions, ...plugins: Array> ): TableInstance; @@ -332,7 +339,7 @@ export function useTable( /** * NOTE: To use custom options, use "Interface Merging" to add the custom options */ -export type UseTableOptions = { +export type UseTableOptions> = { columns: ReadonlyArray>; data: readonly D[]; } & Partial<{ @@ -351,60 +358,58 @@ export type UseTableOptions = { }>; export type PropGetter< - D extends object, + D extends Record, Props, T extends object = never, P = Partial, > = ((props: P, meta: Meta) => P | P[]) | P | P[]; -export type TablePropGetter = PropGetter; +export type TablePropGetter> = PropGetter< + D, + TableProps +>; -export type TableBodyPropGetter = PropGetter< +export type TableBodyPropGetter> = PropGetter< D, TableBodyProps >; -export type HeaderPropGetter = PropGetter< +export type HeaderPropGetter> = PropGetter< D, TableHeaderProps, { column: HeaderGroup } >; -export type FooterGroupPropGetter = PropGetter< - D, - TableFooterGroupProps, - { column: HeaderGroup } ->; +export type FooterGroupPropGetter> = + PropGetter }>; -export type HeaderGroupPropGetter = PropGetter< - D, - TableHeaderGroupProps, - { column: HeaderGroup } ->; +export type HeaderGroupPropGetter> = + PropGetter }>; -export type FooterPropGetter = PropGetter< +export type FooterPropGetter> = PropGetter< D, TableFooterProps, { column: HeaderGroup } >; -export type RowPropGetter = PropGetter< +export type RowPropGetter> = PropGetter< D, TableRowProps, { row: Row } >; -export type CellPropGetter = PropGetter< +export type CellPropGetter> = PropGetter< D, TableCellProps, { cell: Cell } >; -export interface ReducerTableState +export interface ReducerTableState> extends TableState, Record {} -export interface UseTableHooks extends Record { +export interface UseTableHooks> + extends Record { useOptions: Array< (options: TableOptions, args: TableOptions) => TableOptions >; @@ -450,7 +455,7 @@ export interface UseTableHooks extends Record { useFinalInstance: Array<(instance: TableInstance) => void>; } -export interface UseTableColumnOptions { +export interface UseTableColumnOptions> { id?: IdType | undefined; Header?: Renderer> | undefined; Footer?: Renderer> | undefined; @@ -459,13 +464,13 @@ export interface UseTableColumnOptions { maxWidth?: number | undefined; } -type UpdateHiddenColumns = ( +type UpdateHiddenColumns> = ( oldHidden: Array>, ) => Array>; export interface TableToggleHideAllColumnProps extends TableToggleCommonProps {} -export interface UseTableInstanceProps { +export interface UseTableInstanceProps> { state: TableState; plugins: Array>; dispatch: TableDispatch; @@ -493,7 +498,7 @@ export interface UseTableInstanceProps { getHooks: () => Hooks; } -export interface UseTableHeaderGroupProps { +export interface UseTableHeaderGroupProps> { headers: Array>; getHeaderGroupProps: ( propGetter?: HeaderGroupPropGetter, @@ -504,7 +509,7 @@ export interface UseTableHeaderGroupProps { totalHeaderCount: number; // not documented } -export interface UseTableColumnProps { +export interface UseTableColumnProps> { id: IdType; columns?: Array> | undefined; isVisible: boolean; @@ -520,7 +525,7 @@ export interface UseTableColumnProps { placeholderOf?: ColumnInstance | undefined; } -export interface UseTableRowProps { +export interface UseTableRowProps> { cells: Array>; allCells: Array>; values: Record, CellValue>; @@ -531,7 +536,7 @@ export interface UseTableRowProps { subRows: Array>; } -export interface UseTableCellProps { +export interface UseTableCellProps, V = any> { column: ColumnInstance; row: Row; value: CellValue; @@ -539,22 +544,26 @@ export interface UseTableCellProps { render: (type: 'Cell' | string, userProps?: object) => ReactNode; } -export type HeaderProps = TableInstance & { - column: ColumnInstance; -}; +export type HeaderProps> = + TableInstance & { + column: ColumnInstance; + }; -export type FooterProps = TableInstance & { - column: ColumnInstance; -}; +export type FooterProps> = + TableInstance & { + column: ColumnInstance; + }; -export type CellProps = TableInstance & { - column: ColumnInstance; - row: Row; - cell: Cell; - value: CellValue; -}; +export type CellProps, V = any> = + // TableInstance & + { + // column: ColumnInstance; + row: Row; + // cell: Cell; + value: CellValue; + }; -export type Accessor = ( +export type Accessor> = ( originalRow: D, index: number, sub: { @@ -569,7 +578,9 @@ export type Accessor = ( // Plugins //#region useAbsoluteLayout -export function useAbsoluteLayout(hooks: Hooks): void; +export function useAbsoluteLayout = {}>( + hooks: Hooks, +): void; export namespace useAbsoluteLayout { const pluginName = 'useAbsoluteLayout'; @@ -577,7 +588,9 @@ export namespace useAbsoluteLayout { //#endregion //#region useBlockLayout -export function useBlockLayout(hooks: Hooks): void; +export function useBlockLayout = {}>( + hooks: Hooks, +): void; export namespace useBlockLayout { const pluginName = 'useBlockLayout'; @@ -585,17 +598,21 @@ export namespace useBlockLayout { //#endregion //#region useColumnOrder -export function useColumnOrder(hooks: Hooks): void; +export function useColumnOrder = {}>( + hooks: Hooks, +): void; export namespace useColumnOrder { const pluginName = 'useColumnOrder'; } -export interface UseColumnOrderState { +export interface UseColumnOrderState> { columnOrder: Array>; } -export interface UseColumnOrderInstanceProps { +export interface UseColumnOrderInstanceProps< + D extends Record, +> { setColumnOrder: ( updater: | ((columnOrder: Array>) => Array>) @@ -606,7 +623,9 @@ export interface UseColumnOrderInstanceProps { //#endregion //#region useExpanded -export function useExpanded(hooks: Hooks): void; +export function useExpanded = {}>( + hooks: Hooks, +): void; export namespace useExpanded { const pluginName = 'useExpanded'; @@ -614,23 +633,23 @@ export namespace useExpanded { export interface TableExpandedToggleProps extends TableKeyedProps {} -export type UseExpandedOptions = Partial<{ +export type UseExpandedOptions> = Partial<{ manualExpandedKey: IdType; paginateExpandedRows: boolean; expandSubRows: boolean; autoResetExpanded?: boolean | undefined; }>; -export interface UseExpandedHooks { +export interface UseExpandedHooks> { getToggleRowsExpandedProps: Array>; getToggleAllRowsExpandedProps: Array>; } -export interface UseExpandedState { +export interface UseExpandedState> { expanded: Record, boolean>; } -export interface UseExpandedInstanceProps { +export interface UseExpandedInstanceProps> { preExpandedRows: Array>; expandedRows: Array>; rows: Array>; @@ -640,7 +659,7 @@ export interface UseExpandedInstanceProps { toggleAllRowsExpanded: (value?: boolean) => void; } -export interface UseExpandedRowProps { +export interface UseExpandedRowProps> { isExpanded: boolean; canExpand: boolean; subRows: Array>; @@ -654,13 +673,15 @@ export interface UseExpandedRowProps { //#endregion //#region useFilters -export function useFilters(hooks: Hooks): void; +export function useFilters = {}>( + hooks: Hooks, +): void; export namespace useFilters { const pluginName = 'useFilters'; } -export type UseFiltersOptions = Partial<{ +export type UseFiltersOptions> = Partial<{ manualFilters: boolean; disableFilters: boolean; defaultCanFilter: boolean; @@ -668,18 +689,19 @@ export type UseFiltersOptions = Partial<{ autoResetFilters?: boolean | undefined; }>; -export interface UseFiltersState { +export interface UseFiltersState> { filters: Filters; } -export type UseFiltersColumnOptions = Partial<{ - Filter: Renderer>; - disableFilters: boolean; - defaultCanFilter: boolean; - filter: FilterType | DefaultFilterTypes | string; -}>; +export type UseFiltersColumnOptions> = + Partial<{ + Filter: Renderer>; + disableFilters: boolean; + defaultCanFilter: boolean; + filter: FilterType | DefaultFilterTypes | string; + }>; -export interface UseFiltersInstanceProps { +export interface UseFiltersInstanceProps> { preFilteredRows: Array>; preFilteredFlatRows: Array>; preFilteredRowsById: Record>; @@ -698,7 +720,7 @@ export interface UseFiltersInstanceProps { ) => void; } -export interface UseFiltersColumnProps { +export interface UseFiltersColumnProps> { canFilter: boolean; setFilter: ( updater: ((filterValue: FilterValue) => FilterValue) | FilterValue, @@ -708,13 +730,16 @@ export interface UseFiltersColumnProps { filteredRows: Array>; } -export type FilterProps = HeaderProps; +export type FilterProps> = HeaderProps; export type FilterValue = any; -export type Filters = Array<{ +export type Filters> = Array<{ id: IdType; value: FilterValue; }>; -export type FilterTypes = Record>; +export type FilterTypes> = Record< + string, + FilterType +>; export type DefaultFilterTypes = | 'text' @@ -726,7 +751,7 @@ export type DefaultFilterTypes = | 'equals' | 'between'; -export interface FilterType { +export interface FilterType> { ( rows: Array>, columnIds: Array>, @@ -739,7 +764,9 @@ export interface FilterType { //#endregion //#region useFlexLayout -export function useFlexLayout(hooks: Hooks): void; +export function useFlexLayout = {}>( + hooks: Hooks, +): void; export namespace useFlexLayout { const pluginName = 'useFlexLayout'; @@ -747,7 +774,9 @@ export namespace useFlexLayout { //#endregion //#region useGridLayout -export function useGridLayout(hooks: Hooks): void; +export function useGridLayout = {}>( + hooks: Hooks, +): void; export namespace useGridLayout { const pluginName = 'useGridLayout'; @@ -755,35 +784,41 @@ export namespace useGridLayout { //#endregion //#region useGlobalFilter -export function useGlobalFilter(hooks: Hooks): void; +export function useGlobalFilter = {}>( + hooks: Hooks, +): void; export namespace useGlobalFilter { const pluginName = 'useGlobalFilter'; } -export type UseGlobalFiltersOptions = Partial<{ - globalFilter: - | (( - rows: Array>, - columnIds: Array>, - filterValue: any, - ) => Array>) - | string; - manualGlobalFilter: boolean; - filterTypes: FilterTypes; - autoResetGlobalFilter?: boolean | undefined; - disableGlobalFilter?: boolean | undefined; -}>; - -export interface UseGlobalFiltersState { +export type UseGlobalFiltersOptions> = + Partial<{ + globalFilter: + | (( + rows: Array>, + columnIds: Array>, + filterValue: any, + ) => Array>) + | string; + manualGlobalFilter: boolean; + filterTypes: FilterTypes; + autoResetGlobalFilter?: boolean | undefined; + disableGlobalFilter?: boolean | undefined; + }>; + +export interface UseGlobalFiltersState> { globalFilter: any; } -export type UseGlobalFiltersColumnOptions = Partial<{ - disableGlobalFilter?: boolean | undefined; -}>; +export type UseGlobalFiltersColumnOptions> = + Partial<{ + disableGlobalFilter?: boolean | undefined; + }>; -export interface UseGlobalFiltersInstanceProps { +export interface UseGlobalFiltersInstanceProps< + D extends Record, +> { preGlobalFilteredRows: Array>; preGlobalFilteredFlatRows: Array>; preGlobalFilteredRowsById: Record>; @@ -799,7 +834,9 @@ export interface UseGlobalFiltersInstanceProps { //#endregion //#region useGroupBy -export function useGroupBy(hooks: Hooks): void; +export function useGroupBy = {}>( + hooks: Hooks, +): void; export namespace useGroupBy { const pluginName = 'useGroupBy'; @@ -811,7 +848,7 @@ export interface TableGroupByToggleProps { onClick?: ((e: MouseEvent) => void) | undefined; } -export type UseGroupByOptions = Partial<{ +export type UseGroupByOptions> = Partial<{ manualGroupBy: boolean; disableGroupBy: boolean; defaultCanGroupBy: boolean; @@ -823,22 +860,23 @@ export type UseGroupByOptions = Partial<{ autoResetGroupBy?: boolean | undefined; }>; -export interface UseGroupByHooks { +export interface UseGroupByHooks> { getGroupByToggleProps: Array>; } -export interface UseGroupByState { +export interface UseGroupByState> { groupBy: Array>; } -export type UseGroupByColumnOptions = Partial<{ - aggregate: Aggregator; - Aggregated: Renderer>; - disableGroupBy: boolean; - defaultCanGroupBy: boolean; -}>; +export type UseGroupByColumnOptions> = + Partial<{ + aggregate: Aggregator; + Aggregated: Renderer>; + disableGroupBy: boolean; + defaultCanGroupBy: boolean; + }>; -export interface UseGroupByInstanceProps { +export interface UseGroupByInstanceProps> { preGroupedRows: Array>; preGroupedFlatRows: Array>; preGroupedRowsById: Record>; @@ -855,7 +893,7 @@ export interface UseGroupByInstanceProps { toggleGroupBy: (columnId: IdType, value?: boolean) => void; } -export interface UseGroupByColumnProps { +export interface UseGroupByColumnProps> { canGroupBy: boolean; isGrouped: boolean; groupedIndex: number; @@ -865,7 +903,7 @@ export interface UseGroupByColumnProps { ) => TableGroupByToggleProps; } -export interface UseGroupByRowProps { +export interface UseGroupByRowProps> { isGrouped: boolean; groupByID: IdType; groupByVal: string; @@ -877,7 +915,7 @@ export interface UseGroupByRowProps { index: number; } -export interface UseGroupByCellProps { +export interface UseGroupByCellProps> { isGrouped: boolean; isPlaceholder: boolean; isAggregated: boolean; @@ -890,12 +928,12 @@ export type DefaultAggregators = | 'uniqueCount' | 'count'; -export type AggregatorFn = ( +export type AggregatorFn> = ( columnValues: CellValue[], rows: Array>, isAggregated: boolean, ) => AggregatedValue; -export type Aggregator = +export type Aggregator> = | AggregatorFn | DefaultAggregators | string; @@ -903,25 +941,27 @@ export type AggregatedValue = any; //#endregion //#region usePagination -export function usePagination(hooks: Hooks): void; +export function usePagination = {}>( + hooks: Hooks, +): void; export namespace usePagination { const pluginName = 'usePagination'; } -export type UsePaginationOptions = Partial<{ +export type UsePaginationOptions> = Partial<{ pageCount: number; manualPagination: boolean; autoResetPage?: boolean | undefined; paginateExpandedRows: boolean; }>; -export interface UsePaginationState { +export interface UsePaginationState> { pageSize: number; pageIndex: number; } -export interface UsePaginationInstanceProps { +export interface UsePaginationInstanceProps> { page: Array>; pageCount: number; pageOptions: number[]; @@ -936,18 +976,20 @@ export interface UsePaginationInstanceProps { //#endregion //#region useResizeColumns -export function useResizeColumns(hooks: Hooks): void; +export function useResizeColumns = {}>( + hooks: Hooks, +): void; export namespace useResizeColumns { const pluginName = 'useResizeColumns'; } -export interface UseResizeColumnsOptions { +export interface UseResizeColumnsOptions> { disableResizing?: boolean | undefined; autoResetResize?: boolean | undefined; } -export interface UseResizeColumnsState { +export interface UseResizeColumnsState> { columnResizing: { startX?: number | undefined; columnWidth: number; @@ -957,13 +999,17 @@ export interface UseResizeColumnsState { }; } -export interface UseResizeColumnsColumnOptions { +export interface UseResizeColumnsColumnOptions< + D extends Record, +> { disableResizing?: boolean | undefined; } export interface TableResizerProps {} -export interface UseResizeColumnsColumnProps { +export interface UseResizeColumnsColumnProps< + D extends Record, +> { getResizerProps: (props?: Partial) => TableResizerProps; canResize: boolean; isResizing: boolean; @@ -972,7 +1018,9 @@ export interface UseResizeColumnsColumnProps { //#endregion //#region useRowSelect -export function useRowSelect(hooks: Hooks): void; +export function useRowSelect = {}>( + hooks: Hooks, +): void; export namespace useRowSelect { const pluginName = 'useRowSelect'; @@ -983,13 +1031,13 @@ export interface TableToggleAllRowsSelectedProps export interface TableToggleRowsSelectedProps extends TableToggleCommonProps {} -export type UseRowSelectOptions = Partial<{ +export type UseRowSelectOptions> = Partial<{ manualRowSelectedKey: IdType; autoResetSelectedRows: boolean; selectSubRows: boolean; }>; -export interface UseRowSelectHooks { +export interface UseRowSelectHooks> { getToggleRowSelectedProps: Array>; getToggleAllRowsSelectedProps: Array< PropGetter @@ -999,11 +1047,11 @@ export interface UseRowSelectHooks { >; } -export interface UseRowSelectState { +export interface UseRowSelectState> { selectedRowIds: Record, boolean>; } -export interface UseRowSelectInstanceProps { +export interface UseRowSelectInstanceProps> { toggleRowSelected: (rowId: IdType, set?: boolean) => void; toggleAllRowsSelected: (value?: boolean) => void; getToggleAllRowsSelectedProps: ( @@ -1016,7 +1064,7 @@ export interface UseRowSelectInstanceProps { selectedFlatRows: Array>; } -export interface UseRowSelectRowProps { +export interface UseRowSelectRowProps> { isSelected: boolean; isSomeSelected: boolean; toggleRowSelected: (set?: boolean) => void; @@ -1028,23 +1076,25 @@ export interface UseRowSelectRowProps { //#endregion //#region useRowState -export function useRowState(hooks: Hooks): void; +export function useRowState = {}>( + hooks: Hooks, +): void; export namespace useRowState { const pluginName = 'useRowState'; } -export type UseRowStateOptions = Partial<{ +export type UseRowStateOptions> = Partial<{ initialRowStateAccessor: (row: Row) => UseRowStateLocalState; getResetRowStateDeps: (instance: TableInstance) => any[]; autoResetRowState?: boolean | undefined; }>; -export interface UseRowStateState { +export interface UseRowStateState> { rowState: Record }>; } -export interface UseRowStateInstanceProps { +export interface UseRowStateInstanceProps> { setRowState: (rowPath: string[], updater: UseRowUpdater) => void; setCellState: ( rowPath: string[], @@ -1053,25 +1103,27 @@ export interface UseRowStateInstanceProps { ) => void; } -export interface UseRowStateRowProps { +export interface UseRowStateRowProps> { state: UseRowStateLocalState; setState: (updater: UseRowUpdater) => void; } -export interface UseRowStateCellProps { +export interface UseRowStateCellProps> { state: UseRowStateLocalState; setState: (updater: UseRowUpdater) => void; } export type UseRowUpdater = T | ((prev: T) => T); -export type UseRowStateLocalState = Record< - IdType, - T ->; +export type UseRowStateLocalState< + D extends Record, + T = unknown, +> = Record, T>; //#endregion //#region useSortBy -export function useSortBy(hooks: Hooks): void; +export function useSortBy = {}>( + hooks: Hooks, +): void; export namespace useSortBy { const pluginName = 'useSortBy'; @@ -1083,7 +1135,7 @@ export interface TableSortByToggleProps { onClick?: ((e: MouseEvent) => void) | undefined; } -export type UseSortByOptions = Partial<{ +export type UseSortByOptions> = Partial<{ manualSortBy: boolean; disableSortBy: boolean; defaultCanSort: boolean; @@ -1101,23 +1153,24 @@ export type UseSortByOptions = Partial<{ autoResetSortBy?: boolean | undefined; }>; -export interface UseSortByHooks { +export interface UseSortByHooks> { getSortByToggleProps: Array>; } -export interface UseSortByState { +export interface UseSortByState> { sortBy: Array>; } -export type UseSortByColumnOptions = Partial<{ - defaultCanSort: boolean; - disableSortBy: boolean; - sortDescFirst: boolean; - sortInverted: boolean; - sortType: SortByFn | DefaultSortTypes | string; -}>; +export type UseSortByColumnOptions> = + Partial<{ + defaultCanSort: boolean; + disableSortBy: boolean; + sortDescFirst: boolean; + sortInverted: boolean; + sortType: SortByFn | DefaultSortTypes | string; + }>; -export interface UseSortByInstanceProps { +export interface UseSortByInstanceProps> { rows: Array>; preSortedRows: Array>; setSortBy: (sortBy: Array>) => void; @@ -1128,7 +1181,7 @@ export interface UseSortByInstanceProps { ) => void; } -export interface UseSortByColumnProps { +export interface UseSortByColumnProps> { canSort: boolean; toggleSortBy: (descending?: boolean, multi?: boolean) => void; getSortByToggleProps: ( @@ -1140,11 +1193,11 @@ export interface UseSortByColumnProps { isSortedDesc: boolean | undefined; } -export type OrderByFn = ( +export type OrderByFn> = ( rowA: Row, rowB: Row, ) => number; -export type SortByFn = ( +export type SortByFn> = ( rowA: Row, rowB: Row, columnId: IdType, @@ -1182,7 +1235,7 @@ export type Renderer = | number | ReactFragment; -export interface PluginHook { +export interface PluginHook> { (hooks: Hooks): void; pluginName?: string | undefined; } @@ -1190,13 +1243,13 @@ export interface PluginHook { export type TableDispatch = (action: A) => void; // utils -export function defaultOrderByFn( +export function defaultOrderByFn = {}>( arr: Array>, funcs: Array>, dirs: boolean[], ): Array>; -export function defaultGroupByFn( +export function defaultGroupByFn = {}>( rows: Array>, columnId: IdType, ): Record>>; @@ -1211,13 +1264,13 @@ export function reduceHooks( export function loopHooks(hooks: Hooks, ...args: any[]): void; -export function ensurePluginOrder( +export function ensurePluginOrder = {}>( plugins: Array>, befores: string[], pluginName: string, ): void; -export function functionalUpdate( +export function functionalUpdate = {}>( updater: any, old: Partial>, ): Partial>; @@ -1250,7 +1303,7 @@ export function makeRenderer( export type FieldType = 'text' | 'number' | 'date' | string; -export type CellRendererProps = { +export type CellRendererProps = {}> = { /** * Cell HTML props passed from the Table. */ From 4201b3083c2c1c28d67d9675f3cc8cb26a640f7c Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Tue, 29 Aug 2023 17:23:19 -0400 Subject: [PATCH 052/196] Undid some old trial and error type changes --- .../src/core/Table/types/react-table-types.d.ts | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/packages/itwinui-react/src/core/Table/types/react-table-types.d.ts b/packages/itwinui-react/src/core/Table/types/react-table-types.d.ts index 92ab80f79a0..4736bd67e62 100644 --- a/packages/itwinui-react/src/core/Table/types/react-table-types.d.ts +++ b/packages/itwinui-react/src/core/Table/types/react-table-types.d.ts @@ -233,8 +233,8 @@ export type ColumnWithStrictAccessor = {}> = ValueOf<{ [K in keyof D]: { accessor: K; - Cell?: Renderer> | undefined; - }; + // Cell?: Renderer> | undefined; + } & ColumnInterfaceBasedOnValue; // } & ColumnInterfaceBasedOnValue; }>; @@ -252,10 +252,8 @@ export type ColumnWithLooseAccessor = {}> = }; export type Column = {}> = - ColumnWithStrictAccessor; -// | ColumnGroup -// | ColumnWithLooseAccessor -// | ColumnWithStrictAccessor; + // ColumnWithStrictAccessor; + ColumnGroup | ColumnWithLooseAccessor | ColumnWithStrictAccessor; export interface ColumnInstance = {}> extends Omit, 'id'>, From 279f1beffdbdefca03e7c9f2cba9108de8c31532 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Wed, 30 Aug 2023 08:11:54 -0400 Subject: [PATCH 053/196] Moved TableProps and TablePaginatorRendererProps from Table.tsx to react-table-types.d.ts --- .../itwinui-react/src/core/Table/Table.tsx | 250 +----------------- .../core/Table/types/react-table-types.d.ts | 246 ++++++++++++++++- 2 files changed, 249 insertions(+), 247 deletions(-) diff --git a/packages/itwinui-react/src/core/Table/Table.tsx b/packages/itwinui-react/src/core/Table/Table.tsx index 1241f7771c6..17cca151b4a 100644 --- a/packages/itwinui-react/src/core/Table/Table.tsx +++ b/packages/itwinui-react/src/core/Table/Table.tsx @@ -17,9 +17,11 @@ import { useGlobalFilter, } from './types/react-table-types.js'; import type { - CellProps, + TableProps, + TablePaginatorRendererProps, + // CellProps, HeaderGroup, - TableOptions, + // TableOptions, Row, TableState, ActionType, @@ -35,7 +37,7 @@ import { useIsomorphicLayoutEffect, Box, } from '../utils/index.js'; -import type { CommonProps } from '../utils/index.js'; +// import type { CommonProps } from '../utils/index.js'; import { getCellStyle, getStickyStyle } from './utils.js'; import { TableRowMemoized } from './TableRowMemoized.js'; import { FilterToggle } from './filters/index.js'; @@ -76,248 +78,6 @@ try { isDev = process.env.NODE_ENV !== 'production'; } catch {} -export type TablePaginatorRendererProps = { - /** - * The zero-based index of the current page. - */ - currentPage: number; - /** - * Total number of rows. - */ - totalRowsCount: number; - /** - * Number of rows per page. - */ - pageSize: number; - /** - * Callback when page is changed. - */ - onPageChange: (page: number) => void; - /** - * Callback when page size is changed. - */ - onPageSizeChange: (size: number) => void; - /** - * Modify the size of the pagination (adjusts the elements size). - * @default 'default' if Table density is `default` else `small` - */ - size?: 'default' | 'small'; - /** - * Flag whether data is still loading and total rows count is not known. - * @default false - */ - isLoading?: boolean; - /** - * Total number of rows selected (for mutli-selection mode only) - */ - totalSelectedRowsCount?: number; -}; - -/** - * Table props. - * columns and data must be memoized. - */ -export type TableProps< - T extends Record = Record, -> = Omit, 'disableSortBy'> & { - /** - * Flag whether data is loading. - * @default false - */ - isLoading?: boolean; - /** - * Content shown when there is no data. - */ - emptyTableContent: React.ReactNode; - /** - * Flag whether table rows can be selectable. - * @default false - */ - isSelectable?: boolean; - /** - * Handler for rows selection. Must be memoized. - * This is triggered only by user initiated actions (i.e. data change will not call it). - */ - onSelect?: ( - selectedData: T[] | undefined, - tableState?: TableState, - ) => void; - /** - * Handler for when a row is clicked. Must be memoized. - */ - onRowClick?: (event: React.MouseEvent, row: Row) => void; - /** - * Modify the selection mode of the table. - * The column with checkboxes will not be present with 'single' selection mode. - * @default 'multi' - */ - selectionMode?: 'multi' | 'single'; - /** - * Flag whether table columns can be sortable. - * @default false - */ - isSortable?: boolean; - /** - * Callback function when sort changes. - * Use with `manualSortBy` to handle sorting yourself e.g. sort in server-side. - * Must be memoized. - */ - onSort?: (state: TableState) => void; - /** - * Callback function when scroll reaches bottom. Can be used for lazy-loading the data. - */ - onBottomReached?: () => void; - /** - * Callback function when row is in viewport. - */ - onRowInViewport?: (rowData: T) => void; - /** - * Margin in pixels when row is considered to be already in viewport. Used for `onBottomReached` and `onRowInViewport`. - * @default 300 - */ - intersectionMargin?: number; - /** - * A function that will be used for rendering a component for each row if that row is expanded. - * Component will be placed right after the row. Can return false/null if row should not be expandable. - */ - subComponent?: (row: Row) => React.ReactNode; - /** - * A function used for overriding default expander cell. `subComponent` must be present. - * Make sure to trigger `cellProps.row.toggleRowExpanded()`. - */ - expanderCell?: (cellProps: CellProps) => React.ReactNode; - /** - * Handler for row expand events. Will trigger when expanding and collapsing rows. - */ - onExpand?: ( - expandedData: T[] | undefined, - tableState?: TableState, - ) => void; - /** - * Callback function when filters change. - * Use with `manualFilters` to handle filtering yourself e.g. filter in server-side. - * Must be memoized. - */ - onFilter?: ( - filters: TableFilterValue[], - state: TableState, - filteredData?: Row[], - ) => void; - /** - * Value used for global filtering. - * Use with `globalFilter` and/or `manualGlobalFilter` to handle filtering yourself e.g. filter in server-side. - * Must be memoized. - */ - globalFilterValue?: unknown; - /** - * Content shown when there is no data after filtering. - */ - emptyFilteredTableContent?: React.ReactNode; - /** - * Function that should return true if a row is disabled (i.e. cannot be selected or expanded). - * If not specified, all rows are enabled. - */ - isRowDisabled?: (rowData: T) => boolean; - /** - * Function that should return custom props passed to the each row. - * Must be memoized. - */ - rowProps?: (row: Row) => React.ComponentPropsWithRef<'div'> & { - status?: 'positive' | 'warning' | 'negative'; - isLoading?: boolean; - }; - /** - * Modify the density of the table (adjusts the row height). - * @default 'default' - */ - density?: 'default' | 'condensed' | 'extra-condensed'; - /** - * Flag whether to select a row when clicked anywhere inside of it. - * @default true - */ - selectRowOnClick?: boolean; - /** - * Function that takes `TablePaginatorRendererProps` as an argument and returns pagination component. - * - * Recommended to use `TablePaginator`. Passing `props` to `TablePaginator` handles all state management and is enough for basic use-cases. - * @example - * (props: TablePaginatorRendererProps) => ( - * - * ) - */ - paginatorRenderer?: (props: TablePaginatorRendererProps) => React.ReactNode; - /** - * Number of rows per page. - * @default 25 - */ - pageSize?: number; - /** - * Flag whether columns are resizable. - * In order to disable resizing for specific column, set `disableResizing: true` for that column. - * @default false - */ - isResizable?: boolean; - /** - * Style of the table. - * @default 'default' - */ - styleType?: 'default' | 'zebra-rows'; - /** - * Virtualization is used for the scrollable table body. - * Height on the table is required for virtualization to work. - * @example - *
- * @default false - * @beta - */ - enableVirtualization?: boolean; - /** - * Flag whether columns can be reordered. - * @default false - */ - enableColumnReordering?: boolean; - /** - * Passes props to Table header wrapper. - */ - headerWrapperProps?: React.ComponentProps<'div'>; - /** - * Passes props to Table header. - */ - headerProps?: React.ComponentProps<'div'>; - /** - * Passes custom props to Table body. - */ - bodyProps?: React.ComponentProps<'div'>; - /** - * Passes custom props to empty table. - */ - emptyTableContentProps?: React.ComponentProps<'div'>; - /** - * Function that returns index of the row that you want to scroll to. - * - * When using with lazy-loading table, you need to take care that row is already loaded. - * It doesn't work with paginated tables. - * @beta - * @example - *
rows.findIndex((row) => row.original === data[250]), - * [] - * )} - * {...restProps} - * /> - * @example - *
rows.findIndex((row) => row.original.id === data[250].id), - * [] - * )} - * {...restProps} - * /> - */ - scrollToRow?: (rows: Row[], data: T[]) => number; -} & Omit; - const flattenColumns = (columns: Column[]): Column[] => { const flatColumns: Column[] = []; columns.forEach((column) => { diff --git a/packages/itwinui-react/src/core/Table/types/react-table-types.d.ts b/packages/itwinui-react/src/core/Table/types/react-table-types.d.ts index 4736bd67e62..48c14778392 100644 --- a/packages/itwinui-react/src/core/Table/types/react-table-types.d.ts +++ b/packages/itwinui-react/src/core/Table/types/react-table-types.d.ts @@ -35,7 +35,8 @@ import type { ReactNode, } from 'react'; -import type { TableFilterProps } from '../index.js'; +import type { TableFilterProps, TableFilterValue } from '../index.js'; +import type { CommonProps } from '../../utils/props.js'; export const testingVar = 0; // export {}; @@ -289,7 +290,248 @@ export interface TableCommonProps { role?: string | undefined; } -export interface TableProps extends TableCommonProps {} +export type TablePaginatorRendererProps = { + /** + * The zero-based index of the current page. + */ + currentPage: number; + /** + * Total number of rows. + */ + totalRowsCount: number; + /** + * Number of rows per page. + */ + pageSize: number; + /** + * Callback when page is changed. + */ + onPageChange: (page: number) => void; + /** + * Callback when page size is changed. + */ + onPageSizeChange: (size: number) => void; + /** + * Modify the size of the pagination (adjusts the elements size). + * @default 'default' if Table density is `default` else `small` + */ + size?: 'default' | 'small'; + /** + * Flag whether data is still loading and total rows count is not known. + * @default false + */ + isLoading?: boolean; + /** + * Total number of rows selected (for mutli-selection mode only) + */ + totalSelectedRowsCount?: number; +}; + +// export interface TableProps extends TableCommonProps {} +/** + * Table props. + * columns and data must be memoized. + */ +export type TableProps< + T extends Record = Record, +> = Omit, 'disableSortBy'> & { + /** + * Flag whether data is loading. + * @default false + */ + isLoading?: boolean; + /** + * Content shown when there is no data. + */ + emptyTableContent: React.ReactNode; + /** + * Flag whether table rows can be selectable. + * @default false + */ + isSelectable?: boolean; + /** + * Handler for rows selection. Must be memoized. + * This is triggered only by user initiated actions (i.e. data change will not call it). + */ + onSelect?: ( + selectedData: T[] | undefined, + tableState?: TableState, + ) => void; + /** + * Handler for when a row is clicked. Must be memoized. + */ + onRowClick?: (event: React.MouseEvent, row: Row) => void; + /** + * Modify the selection mode of the table. + * The column with checkboxes will not be present with 'single' selection mode. + * @default 'multi' + */ + selectionMode?: 'multi' | 'single'; + /** + * Flag whether table columns can be sortable. + * @default false + */ + isSortable?: boolean; + /** + * Callback function when sort changes. + * Use with `manualSortBy` to handle sorting yourself e.g. sort in server-side. + * Must be memoized. + */ + onSort?: (state: TableState) => void; + /** + * Callback function when scroll reaches bottom. Can be used for lazy-loading the data. + */ + onBottomReached?: () => void; + /** + * Callback function when row is in viewport. + */ + onRowInViewport?: (rowData: T) => void; + /** + * Margin in pixels when row is considered to be already in viewport. Used for `onBottomReached` and `onRowInViewport`. + * @default 300 + */ + intersectionMargin?: number; + /** + * A function that will be used for rendering a component for each row if that row is expanded. + * Component will be placed right after the row. Can return false/null if row should not be expandable. + */ + subComponent?: (row: Row) => React.ReactNode; + /** + * A function used for overriding default expander cell. `subComponent` must be present. + * Make sure to trigger `cellProps.row.toggleRowExpanded()`. + */ + expanderCell?: (cellProps: CellProps) => React.ReactNode; + /** + * Handler for row expand events. Will trigger when expanding and collapsing rows. + */ + onExpand?: ( + expandedData: T[] | undefined, + tableState?: TableState, + ) => void; + /** + * Callback function when filters change. + * Use with `manualFilters` to handle filtering yourself e.g. filter in server-side. + * Must be memoized. + */ + onFilter?: ( + filters: TableFilterValue[], + state: TableState, + filteredData?: Row[], + ) => void; + /** + * Value used for global filtering. + * Use with `globalFilter` and/or `manualGlobalFilter` to handle filtering yourself e.g. filter in server-side. + * Must be memoized. + */ + globalFilterValue?: unknown; + /** + * Content shown when there is no data after filtering. + */ + emptyFilteredTableContent?: React.ReactNode; + /** + * Function that should return true if a row is disabled (i.e. cannot be selected or expanded). + * If not specified, all rows are enabled. + */ + isRowDisabled?: (rowData: T) => boolean; + /** + * Function that should return custom props passed to the each row. + * Must be memoized. + */ + rowProps?: (row: Row) => React.ComponentPropsWithRef<'div'> & { + status?: 'positive' | 'warning' | 'negative'; + isLoading?: boolean; + }; + /** + * Modify the density of the table (adjusts the row height). + * @default 'default' + */ + density?: 'default' | 'condensed' | 'extra-condensed'; + /** + * Flag whether to select a row when clicked anywhere inside of it. + * @default true + */ + selectRowOnClick?: boolean; + /** + * Function that takes `TablePaginatorRendererProps` as an argument and returns pagination component. + * + * Recommended to use `TablePaginator`. Passing `props` to `TablePaginator` handles all state management and is enough for basic use-cases. + * @example + * (props: TablePaginatorRendererProps) => ( + * + * ) + */ + paginatorRenderer?: (props: TablePaginatorRendererProps) => React.ReactNode; + /** + * Number of rows per page. + * @default 25 + */ + pageSize?: number; + /** + * Flag whether columns are resizable. + * In order to disable resizing for specific column, set `disableResizing: true` for that column. + * @default false + */ + isResizable?: boolean; + /** + * Style of the table. + * @default 'default' + */ + styleType?: 'default' | 'zebra-rows'; + /** + * Virtualization is used for the scrollable table body. + * Height on the table is required for virtualization to work. + * @example + *
+ * @default false + * @beta + */ + enableVirtualization?: boolean; + /** + * Flag whether columns can be reordered. + * @default false + */ + enableColumnReordering?: boolean; + /** + * Passes props to Table header wrapper. + */ + headerWrapperProps?: React.ComponentProps<'div'>; + /** + * Passes props to Table header. + */ + headerProps?: React.ComponentProps<'div'>; + /** + * Passes custom props to Table body. + */ + bodyProps?: React.ComponentProps<'div'>; + /** + * Passes custom props to empty table. + */ + emptyTableContentProps?: React.ComponentProps<'div'>; + /** + * Function that returns index of the row that you want to scroll to. + * + * When using with lazy-loading table, you need to take care that row is already loaded. + * It doesn't work with paginated tables. + * @beta + * @example + *
rows.findIndex((row) => row.original === data[250]), + * [] + * )} + * {...restProps} + * /> + * @example + *
rows.findIndex((row) => row.original.id === data[250].id), + * [] + * )} + * {...restProps} + * /> + */ + scrollToRow?: (rows: Row[], data: T[]) => number; +} & Omit; export interface TableBodyProps extends TableCommonProps {} From 0bd10bd8d9773e5eca7897735530820ccda28ef0 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Wed, 30 Aug 2023 08:29:32 -0400 Subject: [PATCH 054/196] Moved back TableProps and TablePaginatorRendererProps from react-table-types.d.ts to Table.tsx --- .../itwinui-react/src/core/Table/Table.tsx | 242 +++++++++++++++++ .../core/Table/types/react-table-types.d.ts | 243 +----------------- 2 files changed, 243 insertions(+), 242 deletions(-) diff --git a/packages/itwinui-react/src/core/Table/Table.tsx b/packages/itwinui-react/src/core/Table/Table.tsx index 17cca151b4a..2f93728728f 100644 --- a/packages/itwinui-react/src/core/Table/Table.tsx +++ b/packages/itwinui-react/src/core/Table/Table.tsx @@ -89,6 +89,248 @@ const flattenColumns = (columns: Column[]): Column[] => { return flatColumns; }; +export type TablePaginatorRendererProps = { + /** + * The zero-based index of the current page. + */ + currentPage: number; + /** + * Total number of rows. + */ + totalRowsCount: number; + /** + * Number of rows per page. + */ + pageSize: number; + /** + * Callback when page is changed. + */ + onPageChange: (page: number) => void; + /** + * Callback when page size is changed. + */ + onPageSizeChange: (size: number) => void; + /** + * Modify the size of the pagination (adjusts the elements size). + * @default 'default' if Table density is `default` else `small` + */ + size?: 'default' | 'small'; + /** + * Flag whether data is still loading and total rows count is not known. + * @default false + */ + isLoading?: boolean; + /** + * Total number of rows selected (for mutli-selection mode only) + */ + totalSelectedRowsCount?: number; +}; + +/** + * Table props. + * columns and data must be memoized. + */ +export type TableProps< + T extends Record = Record, +> = Omit, 'disableSortBy'> & { + /** + * Flag whether data is loading. + * @default false + */ + isLoading?: boolean; + /** + * Content shown when there is no data. + */ + emptyTableContent: React.ReactNode; + /** + * Flag whether table rows can be selectable. + * @default false + */ + isSelectable?: boolean; + /** + * Handler for rows selection. Must be memoized. + * This is triggered only by user initiated actions (i.e. data change will not call it). + */ + onSelect?: ( + selectedData: T[] | undefined, + tableState?: TableState, + ) => void; + /** + * Handler for when a row is clicked. Must be memoized. + */ + onRowClick?: (event: React.MouseEvent, row: Row) => void; + /** + * Modify the selection mode of the table. + * The column with checkboxes will not be present with 'single' selection mode. + * @default 'multi' + */ + selectionMode?: 'multi' | 'single'; + /** + * Flag whether table columns can be sortable. + * @default false + */ + isSortable?: boolean; + /** + * Callback function when sort changes. + * Use with `manualSortBy` to handle sorting yourself e.g. sort in server-side. + * Must be memoized. + */ + onSort?: (state: TableState) => void; + /** + * Callback function when scroll reaches bottom. Can be used for lazy-loading the data. + */ + onBottomReached?: () => void; + /** + * Callback function when row is in viewport. + */ + onRowInViewport?: (rowData: T) => void; + /** + * Margin in pixels when row is considered to be already in viewport. Used for `onBottomReached` and `onRowInViewport`. + * @default 300 + */ + intersectionMargin?: number; + /** + * A function that will be used for rendering a component for each row if that row is expanded. + * Component will be placed right after the row. Can return false/null if row should not be expandable. + */ + subComponent?: (row: Row) => React.ReactNode; + /** + * A function used for overriding default expander cell. `subComponent` must be present. + * Make sure to trigger `cellProps.row.toggleRowExpanded()`. + */ + expanderCell?: (cellProps: CellProps) => React.ReactNode; + /** + * Handler for row expand events. Will trigger when expanding and collapsing rows. + */ + onExpand?: ( + expandedData: T[] | undefined, + tableState?: TableState, + ) => void; + /** + * Callback function when filters change. + * Use with `manualFilters` to handle filtering yourself e.g. filter in server-side. + * Must be memoized. + */ + onFilter?: ( + filters: TableFilterValue[], + state: TableState, + filteredData?: Row[], + ) => void; + /** + * Value used for global filtering. + * Use with `globalFilter` and/or `manualGlobalFilter` to handle filtering yourself e.g. filter in server-side. + * Must be memoized. + */ + globalFilterValue?: unknown; + /** + * Content shown when there is no data after filtering. + */ + emptyFilteredTableContent?: React.ReactNode; + /** + * Function that should return true if a row is disabled (i.e. cannot be selected or expanded). + * If not specified, all rows are enabled. + */ + isRowDisabled?: (rowData: T) => boolean; + /** + * Function that should return custom props passed to the each row. + * Must be memoized. + */ + rowProps?: (row: Row) => React.ComponentPropsWithRef<'div'> & { + status?: 'positive' | 'warning' | 'negative'; + isLoading?: boolean; + }; + /** + * Modify the density of the table (adjusts the row height). + * @default 'default' + */ + density?: 'default' | 'condensed' | 'extra-condensed'; + /** + * Flag whether to select a row when clicked anywhere inside of it. + * @default true + */ + selectRowOnClick?: boolean; + /** + * Function that takes `TablePaginatorRendererProps` as an argument and returns pagination component. + * + * Recommended to use `TablePaginator`. Passing `props` to `TablePaginator` handles all state management and is enough for basic use-cases. + * @example + * (props: TablePaginatorRendererProps) => ( + * + * ) + */ + paginatorRenderer?: (props: TablePaginatorRendererProps) => React.ReactNode; + /** + * Number of rows per page. + * @default 25 + */ + pageSize?: number; + /** + * Flag whether columns are resizable. + * In order to disable resizing for specific column, set `disableResizing: true` for that column. + * @default false + */ + isResizable?: boolean; + /** + * Style of the table. + * @default 'default' + */ + styleType?: 'default' | 'zebra-rows'; + /** + * Virtualization is used for the scrollable table body. + * Height on the table is required for virtualization to work. + * @example + *
+ * @default false + * @beta + */ + enableVirtualization?: boolean; + /** + * Flag whether columns can be reordered. + * @default false + */ + enableColumnReordering?: boolean; + /** + * Passes props to Table header wrapper. + */ + headerWrapperProps?: React.ComponentProps<'div'>; + /** + * Passes props to Table header. + */ + headerProps?: React.ComponentProps<'div'>; + /** + * Passes custom props to Table body. + */ + bodyProps?: React.ComponentProps<'div'>; + /** + * Passes custom props to empty table. + */ + emptyTableContentProps?: React.ComponentProps<'div'>; + /** + * Function that returns index of the row that you want to scroll to. + * + * When using with lazy-loading table, you need to take care that row is already loaded. + * It doesn't work with paginated tables. + * @beta + * @example + *
rows.findIndex((row) => row.original === data[250]), + * [] + * )} + * {...restProps} + * /> + * @example + *
rows.findIndex((row) => row.original.id === data[250].id), + * [] + * )} + * {...restProps} + * /> + */ + scrollToRow?: (rows: Row[], data: T[]) => number; +} & Omit; + /** * Table based on [react-table](https://react-table.tanstack.com/docs/api/overview). * @example diff --git a/packages/itwinui-react/src/core/Table/types/react-table-types.d.ts b/packages/itwinui-react/src/core/Table/types/react-table-types.d.ts index 48c14778392..3e94c3b206b 100644 --- a/packages/itwinui-react/src/core/Table/types/react-table-types.d.ts +++ b/packages/itwinui-react/src/core/Table/types/react-table-types.d.ts @@ -290,248 +290,7 @@ export interface TableCommonProps { role?: string | undefined; } -export type TablePaginatorRendererProps = { - /** - * The zero-based index of the current page. - */ - currentPage: number; - /** - * Total number of rows. - */ - totalRowsCount: number; - /** - * Number of rows per page. - */ - pageSize: number; - /** - * Callback when page is changed. - */ - onPageChange: (page: number) => void; - /** - * Callback when page size is changed. - */ - onPageSizeChange: (size: number) => void; - /** - * Modify the size of the pagination (adjusts the elements size). - * @default 'default' if Table density is `default` else `small` - */ - size?: 'default' | 'small'; - /** - * Flag whether data is still loading and total rows count is not known. - * @default false - */ - isLoading?: boolean; - /** - * Total number of rows selected (for mutli-selection mode only) - */ - totalSelectedRowsCount?: number; -}; - -// export interface TableProps extends TableCommonProps {} -/** - * Table props. - * columns and data must be memoized. - */ -export type TableProps< - T extends Record = Record, -> = Omit, 'disableSortBy'> & { - /** - * Flag whether data is loading. - * @default false - */ - isLoading?: boolean; - /** - * Content shown when there is no data. - */ - emptyTableContent: React.ReactNode; - /** - * Flag whether table rows can be selectable. - * @default false - */ - isSelectable?: boolean; - /** - * Handler for rows selection. Must be memoized. - * This is triggered only by user initiated actions (i.e. data change will not call it). - */ - onSelect?: ( - selectedData: T[] | undefined, - tableState?: TableState, - ) => void; - /** - * Handler for when a row is clicked. Must be memoized. - */ - onRowClick?: (event: React.MouseEvent, row: Row) => void; - /** - * Modify the selection mode of the table. - * The column with checkboxes will not be present with 'single' selection mode. - * @default 'multi' - */ - selectionMode?: 'multi' | 'single'; - /** - * Flag whether table columns can be sortable. - * @default false - */ - isSortable?: boolean; - /** - * Callback function when sort changes. - * Use with `manualSortBy` to handle sorting yourself e.g. sort in server-side. - * Must be memoized. - */ - onSort?: (state: TableState) => void; - /** - * Callback function when scroll reaches bottom. Can be used for lazy-loading the data. - */ - onBottomReached?: () => void; - /** - * Callback function when row is in viewport. - */ - onRowInViewport?: (rowData: T) => void; - /** - * Margin in pixels when row is considered to be already in viewport. Used for `onBottomReached` and `onRowInViewport`. - * @default 300 - */ - intersectionMargin?: number; - /** - * A function that will be used for rendering a component for each row if that row is expanded. - * Component will be placed right after the row. Can return false/null if row should not be expandable. - */ - subComponent?: (row: Row) => React.ReactNode; - /** - * A function used for overriding default expander cell. `subComponent` must be present. - * Make sure to trigger `cellProps.row.toggleRowExpanded()`. - */ - expanderCell?: (cellProps: CellProps) => React.ReactNode; - /** - * Handler for row expand events. Will trigger when expanding and collapsing rows. - */ - onExpand?: ( - expandedData: T[] | undefined, - tableState?: TableState, - ) => void; - /** - * Callback function when filters change. - * Use with `manualFilters` to handle filtering yourself e.g. filter in server-side. - * Must be memoized. - */ - onFilter?: ( - filters: TableFilterValue[], - state: TableState, - filteredData?: Row[], - ) => void; - /** - * Value used for global filtering. - * Use with `globalFilter` and/or `manualGlobalFilter` to handle filtering yourself e.g. filter in server-side. - * Must be memoized. - */ - globalFilterValue?: unknown; - /** - * Content shown when there is no data after filtering. - */ - emptyFilteredTableContent?: React.ReactNode; - /** - * Function that should return true if a row is disabled (i.e. cannot be selected or expanded). - * If not specified, all rows are enabled. - */ - isRowDisabled?: (rowData: T) => boolean; - /** - * Function that should return custom props passed to the each row. - * Must be memoized. - */ - rowProps?: (row: Row) => React.ComponentPropsWithRef<'div'> & { - status?: 'positive' | 'warning' | 'negative'; - isLoading?: boolean; - }; - /** - * Modify the density of the table (adjusts the row height). - * @default 'default' - */ - density?: 'default' | 'condensed' | 'extra-condensed'; - /** - * Flag whether to select a row when clicked anywhere inside of it. - * @default true - */ - selectRowOnClick?: boolean; - /** - * Function that takes `TablePaginatorRendererProps` as an argument and returns pagination component. - * - * Recommended to use `TablePaginator`. Passing `props` to `TablePaginator` handles all state management and is enough for basic use-cases. - * @example - * (props: TablePaginatorRendererProps) => ( - * - * ) - */ - paginatorRenderer?: (props: TablePaginatorRendererProps) => React.ReactNode; - /** - * Number of rows per page. - * @default 25 - */ - pageSize?: number; - /** - * Flag whether columns are resizable. - * In order to disable resizing for specific column, set `disableResizing: true` for that column. - * @default false - */ - isResizable?: boolean; - /** - * Style of the table. - * @default 'default' - */ - styleType?: 'default' | 'zebra-rows'; - /** - * Virtualization is used for the scrollable table body. - * Height on the table is required for virtualization to work. - * @example - *
- * @default false - * @beta - */ - enableVirtualization?: boolean; - /** - * Flag whether columns can be reordered. - * @default false - */ - enableColumnReordering?: boolean; - /** - * Passes props to Table header wrapper. - */ - headerWrapperProps?: React.ComponentProps<'div'>; - /** - * Passes props to Table header. - */ - headerProps?: React.ComponentProps<'div'>; - /** - * Passes custom props to Table body. - */ - bodyProps?: React.ComponentProps<'div'>; - /** - * Passes custom props to empty table. - */ - emptyTableContentProps?: React.ComponentProps<'div'>; - /** - * Function that returns index of the row that you want to scroll to. - * - * When using with lazy-loading table, you need to take care that row is already loaded. - * It doesn't work with paginated tables. - * @beta - * @example - *
rows.findIndex((row) => row.original === data[250]), - * [] - * )} - * {...restProps} - * /> - * @example - *
rows.findIndex((row) => row.original.id === data[250].id), - * [] - * )} - * {...restProps} - * /> - */ - scrollToRow?: (rows: Row[], data: T[]) => number; -} & Omit; +export interface TableProps extends TableCommonProps {} export interface TableBodyProps extends TableCommonProps {} From 2557ea8c855e304f91b2301c2f08fd32d47c4ec5 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Wed, 30 Aug 2023 08:31:10 -0400 Subject: [PATCH 055/196] Fixed imports and undid unnecessary changes --- .../itwinui-react/src/core/Table/Table.tsx | 30 +++++++++---------- 1 file changed, 14 insertions(+), 16 deletions(-) diff --git a/packages/itwinui-react/src/core/Table/Table.tsx b/packages/itwinui-react/src/core/Table/Table.tsx index 2f93728728f..1241f7771c6 100644 --- a/packages/itwinui-react/src/core/Table/Table.tsx +++ b/packages/itwinui-react/src/core/Table/Table.tsx @@ -17,11 +17,9 @@ import { useGlobalFilter, } from './types/react-table-types.js'; import type { - TableProps, - TablePaginatorRendererProps, - // CellProps, + CellProps, HeaderGroup, - // TableOptions, + TableOptions, Row, TableState, ActionType, @@ -37,7 +35,7 @@ import { useIsomorphicLayoutEffect, Box, } from '../utils/index.js'; -// import type { CommonProps } from '../utils/index.js'; +import type { CommonProps } from '../utils/index.js'; import { getCellStyle, getStickyStyle } from './utils.js'; import { TableRowMemoized } from './TableRowMemoized.js'; import { FilterToggle } from './filters/index.js'; @@ -78,17 +76,6 @@ try { isDev = process.env.NODE_ENV !== 'production'; } catch {} -const flattenColumns = (columns: Column[]): Column[] => { - const flatColumns: Column[] = []; - columns.forEach((column) => { - flatColumns.push(column); - if ('columns' in column) { - flatColumns.push(...flattenColumns(column.columns)); - } - }); - return flatColumns; -}; - export type TablePaginatorRendererProps = { /** * The zero-based index of the current page. @@ -331,6 +318,17 @@ export type TableProps< scrollToRow?: (rows: Row[], data: T[]) => number; } & Omit; +const flattenColumns = (columns: Column[]): Column[] => { + const flatColumns: Column[] = []; + columns.forEach((column) => { + flatColumns.push(column); + if ('columns' in column) { + flatColumns.push(...flattenColumns(column.columns)); + } + }); + return flatColumns; +}; + /** * Table based on [react-table](https://react-table.tanstack.com/docs/api/overview). * @example From 2e3424bce532a5a7c4c7bbe256db913b9554579c Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Wed, 30 Aug 2023 08:32:41 -0400 Subject: [PATCH 056/196] Undid previous trial and error change --- .../src/core/Table/types/react-table-types.d.ts | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/packages/itwinui-react/src/core/Table/types/react-table-types.d.ts b/packages/itwinui-react/src/core/Table/types/react-table-types.d.ts index 3e94c3b206b..5db77a15e65 100644 --- a/packages/itwinui-react/src/core/Table/types/react-table-types.d.ts +++ b/packages/itwinui-react/src/core/Table/types/react-table-types.d.ts @@ -553,14 +553,15 @@ export type FooterProps> = column: ColumnInstance; }; -export type CellProps, V = any> = - // TableInstance & - { - // column: ColumnInstance; - row: Row; - // cell: Cell; - value: CellValue; - }; +export type CellProps< + D extends Record, + V = any, +> = TableInstance & { + column: ColumnInstance; + row: Row; + cell: Cell; + value: CellValue; +}; export type Accessor> = ( originalRow: D, From 3600272457a71fc2c4dc00080d907c91487e3555 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Wed, 30 Aug 2023 08:36:10 -0400 Subject: [PATCH 057/196] Changed flattenColumns to return columns itself since we don't support nested columns --- packages/itwinui-react/src/core/Table/Table.tsx | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/packages/itwinui-react/src/core/Table/Table.tsx b/packages/itwinui-react/src/core/Table/Table.tsx index 1241f7771c6..b20cc1c249c 100644 --- a/packages/itwinui-react/src/core/Table/Table.tsx +++ b/packages/itwinui-react/src/core/Table/Table.tsx @@ -319,14 +319,8 @@ export type TableProps< } & Omit; const flattenColumns = (columns: Column[]): Column[] => { - const flatColumns: Column[] = []; - columns.forEach((column) => { - flatColumns.push(column); - if ('columns' in column) { - flatColumns.push(...flattenColumns(column.columns)); - } - }); - return flatColumns; + // Return columns itself since we don't support nested columns + return columns; }; /** From 76cccaad799bed26ebe4f0e8c4896208644da97b Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Wed, 30 Aug 2023 08:40:50 -0400 Subject: [PATCH 058/196] Removed two unnecessary type assertions --- packages/itwinui-react/src/core/Table/Table.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/itwinui-react/src/core/Table/Table.tsx b/packages/itwinui-react/src/core/Table/Table.tsx index b20cc1c249c..6c117f78cdd 100644 --- a/packages/itwinui-react/src/core/Table/Table.tsx +++ b/packages/itwinui-react/src/core/Table/Table.tsx @@ -432,7 +432,7 @@ export const Table = < }, [onBottomReached, onRowInViewport]); const hasManualSelectionColumn = React.useMemo(() => { - const flatColumns = flattenColumns(columns as Column[]); + const flatColumns = flattenColumns(columns); return flatColumns.some((column) => column.id === SELECTION_CELL_ID); }, [columns]); @@ -718,7 +718,7 @@ export const Table = < if (JSON.stringify(lastPassedColumns.current) !== JSON.stringify(columns)) { instance.setColumnOrder([]); } - lastPassedColumns.current = columns as Column[]; + lastPassedColumns.current = columns; }, [columns, instance]); const paginatorRendererProps: TablePaginatorRendererProps = React.useMemo( From 9749a718c2793e9ac4a35884ca938429e2879344 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Wed, 30 Aug 2023 08:46:27 -0400 Subject: [PATCH 059/196] Remove commented code --- apps/storybook/src/InformationPanel.stories.tsx | 1 - apps/storybook/src/Table.stories.tsx | 8 -------- 2 files changed, 9 deletions(-) diff --git a/apps/storybook/src/InformationPanel.stories.tsx b/apps/storybook/src/InformationPanel.stories.tsx index be391e74699..a664e1f0820 100644 --- a/apps/storybook/src/InformationPanel.stories.tsx +++ b/apps/storybook/src/InformationPanel.stories.tsx @@ -4,7 +4,6 @@ *--------------------------------------------------------------------------------------------*/ import { Story, Meta } from '@storybook/react'; import React from 'react'; -// import { CellProps } from '@itwin/itwinui-react'; import { TableTypes } from '@itwin/itwinui-react'; import { action } from '@storybook/addon-actions'; import { SvgEdit } from '@itwin/itwinui-icons-react'; diff --git a/apps/storybook/src/Table.stories.tsx b/apps/storybook/src/Table.stories.tsx index a5efebca834..cc0bd9e0ae6 100644 --- a/apps/storybook/src/Table.stories.tsx +++ b/apps/storybook/src/Table.stories.tsx @@ -3,14 +3,6 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import React, { useCallback } from 'react'; -// import type { -// CellProps, -// CellRendererProps, -// Column, -// Row, -// TableInstance, -// TableState, -// } from '@itwin/itwinui-react'; import { Checkbox, Code, From 31df020debf06ada8cfae27234d09e8327021ea8 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Wed, 30 Aug 2023 14:04:29 -0400 Subject: [PATCH 060/196] Temporarily created react-table-objects.ts --- .../itwinui-react/src/core/Table/Table.tsx | 23 +- .../src/core/Table/filters/types.ts | 4 +- .../core/Table/types/react-table-objects.ts | 1323 +++++++++++++++++ 3 files changed, 1337 insertions(+), 13 deletions(-) create mode 100644 packages/itwinui-react/src/core/Table/types/react-table-objects.ts diff --git a/packages/itwinui-react/src/core/Table/Table.tsx b/packages/itwinui-react/src/core/Table/Table.tsx index 6c117f78cdd..a275ff5e7de 100644 --- a/packages/itwinui-react/src/core/Table/Table.tsx +++ b/packages/itwinui-react/src/core/Table/Table.tsx @@ -4,6 +4,16 @@ *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; import cx from 'classnames'; +import type { + CellProps, + HeaderGroup, + TableOptions, + Row, + TableState, + ActionType, + TableInstance, + Column, +} from './types/react-table-objects.js'; import { actions as TableActions, useFlexLayout, @@ -15,17 +25,7 @@ import { usePagination, useColumnOrder, useGlobalFilter, -} from './types/react-table-types.js'; -import type { - CellProps, - HeaderGroup, - TableOptions, - Row, - TableState, - ActionType, - TableInstance, - Column, -} from './types/react-table-types.js'; +} from './types/react-table-objects.js'; import { ProgressRadial } from '../ProgressIndicators/index.js'; import { useGlobals, @@ -432,6 +432,7 @@ export const Table = < }, [onBottomReached, onRowInViewport]); const hasManualSelectionColumn = React.useMemo(() => { + const q = 0; const flatColumns = flattenColumns(columns); return flatColumns.some((column) => column.id === SELECTION_CELL_ID); }, [columns]); diff --git a/packages/itwinui-react/src/core/Table/filters/types.ts b/packages/itwinui-react/src/core/Table/filters/types.ts index 15ac417a4ba..a0dee8fcbd8 100644 --- a/packages/itwinui-react/src/core/Table/filters/types.ts +++ b/packages/itwinui-react/src/core/Table/filters/types.ts @@ -7,7 +7,7 @@ import type { FilterProps, FilterType, HeaderGroup, -} from '../types/react-table-types.js'; +} from '../types/react-table-objects.js'; export interface TableFilterValue> { /** @@ -28,7 +28,7 @@ export interface TableFilterValue> { filterType: FilterType; } -export type TableFilterProps | object> = +export type TableFilterProps> = FilterProps & { /** * Data of column on which filter is opened. It is provided by the table it self. diff --git a/packages/itwinui-react/src/core/Table/types/react-table-objects.ts b/packages/itwinui-react/src/core/Table/types/react-table-objects.ts new file mode 100644 index 00000000000..5db77a15e65 --- /dev/null +++ b/packages/itwinui-react/src/core/Table/types/react-table-objects.ts @@ -0,0 +1,1323 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Bentley Systems, Incorporated. All rights reserved. + * See LICENSE.md in the project root for license terms and full copyright notice. + *--------------------------------------------------------------------------------------------*/ +/* eslint-disable @typescript-eslint/no-empty-interface */ +/* eslint-disable @typescript-eslint/ban-types */ +// Type definitions for react-table 7.7 +// Project: https://github.com/tannerlinsley/react-table +// Definitions by: Guy Gascoigne-Piggford , +// Rohit Garg +// Jason Clark +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +// TypeScript Version: 3.5 +// reflects react-table@7.7.0 + +// tslint:disable:no-empty-interface +// no-empty-interface is disabled to allow easy extension with declaration merging + +// TODO: Find out why the below line was giving an error +// /* eslint-disable @definitelytyped/no-unnecessary-generics */ +// no-unnecessary-generics is disabled because many of these definitions are either used in a generic +// context or the signatures are required to match for declaration merging + +// The changelog for the important changes is located in the Readme.md + +import type { + ChangeEvent, + ComponentType, + CSSProperties, + DependencyList, + EffectCallback, + MouseEvent, + ReactElement, + ReactFragment, + ReactNode, +} from 'react'; + +import type { TableFilterProps, TableFilterValue } from '../index.js'; +import type { CommonProps } from '../../utils/props.js'; + +export const testingVar = 0; +// export {}; + +/** + * The empty definitions of below provides a base definition for the parts used by useTable, that can then be extended in the users code. + * + * @example + * export interface TableOptions = {}}> + * extends + * UseExpandedOptions, + * UseFiltersOptions {} + * see https://gist.github.com/ggascoigne/646e14c9d54258e40588a13aabf0102d for more details + */ +export interface TableOptions> + extends Omit, 'data' | 'columns'>, + UseRowSelectOptions, + UseExpandedOptions, + UseFiltersOptions, + // UseGroupByOptions, + UsePaginationOptions, + UseGlobalFiltersOptions, + UseGlobalFiltersColumnOptions, + Omit, 'disableResizing'>, + // UseRowStateOptions, + UseSortByOptions { + /** + * List of columns. + * + * Should not have a top-level `Header` or a `columns` sub-property. They are only allowed to be passed for backwards compatibility. + * See [migration guide](https://github.com/iTwin/iTwinUI/wiki/iTwinUI-react-v2-migration-guide#breaking-changes). + */ + columns: Array>; + /** + * Table data list. + * Must be memoized. + * + * Supports expandable sub-rows using the `subRows` field in data entries. + * If some rows don't have sub-data, it is recommended to pass an empty array to `subRows` for consistent spacing. + */ + data: D[]; + /** + * Column's resize mode. + * - `fit` - when resizing it affects current and the next column, + * e.g. when increasing width of current column, next column's width will decrease. + * - `expand` - when resizing it affects only the current column, + * e.g. when increasing width of the current column, next column's width remains the same. + * @default 'fit' + */ + columnResizeMode?: 'fit' | 'expand'; +} + +export interface TableInstance = {}> + extends Omit, 'columns' | 'pageCount'>, + UseTableInstanceProps, + UseColumnOrderInstanceProps, + UseExpandedInstanceProps, + UseFiltersInstanceProps, + UseGlobalFiltersInstanceProps, + UseGroupByInstanceProps, + UsePaginationInstanceProps, + UseRowSelectInstanceProps, + UseRowStateInstanceProps, + UseSortByInstanceProps { + initialRows: Row[]; + columnResizeMode: TableOptions['columnResizeMode']; + tableWidth: number; +} + +export interface TableState = {}> + extends UseColumnOrderState, + UseExpandedState, + UseFiltersState, + UseGlobalFiltersState, + UseGroupByState, + UsePaginationState, + UseRowSelectState, + UseRowStateState, + UseSortByState { + hiddenColumns?: Array> | undefined; + + // UseResizeColumnsState with fixed typings + columnResizing: { + startX?: number; + columnWidth?: number; + nextColumnWidth?: number; + headerIdWidths?: Array<[string, number]>; + nextHeaderIdWidths?: Array<[string, number]>; + columnWidths: Record; + isResizingColumn?: string; + }; + isTableResizing?: boolean; + columnReorderStartIndex: number; + sticky: { + isScrolledToRight?: boolean; + isScrolledToLeft?: boolean; + }; + lastSelectedRowId?: string; +} + +export interface Hooks = {}> + extends UseTableHooks, + UseExpandedHooks, + UseGroupByHooks, + UseRowSelectHooks, + UseSortByHooks {} + +export interface Cell = {}, V = any> + extends UseTableCellProps, + UseGroupByCellProps, + UseRowStateCellProps {} + +export interface ColumnInterface = {}> + extends UseTableColumnOptions, + // UseGroupByColumnOptions, + UseSortByColumnOptions, + UseFiltersColumnOptions, + UseResizeColumnsColumnOptions, + UseGlobalFiltersColumnOptions { + /** + * Custom class name applied to header column cell. + */ + columnClassName?: string; + /** + * Custom class name applied to each column's cell. + */ + cellClassName?: string; + /** + * Type of the data in cell. Used for manual filtering. + */ + fieldType?: FieldType; + /** + * Filter component used as a column filter. Should use filters from `tableFilters`. + */ + Filter?: Renderer> | Renderer>; + /** + * String value or custom function to use for filtering. + * Possible string values: `text`, `exactText`, `exactTextCase`, `includes`, `includesAll`, `exact`, `equals`, `between`. + * More info about these filters: https://github.com/tannerlinsley/react-table/blob/master/src/filterTypes.js + */ + filter?: FilterType | DefaultFilterTypes | string; + /** + * Function that should return whole cell element not only the content. + * Must be memoized. + * @example + * { + * Header: 'Name', + * accessor: 'name', + * cellRenderer: (props) => , + * } + */ + cellRenderer?: (props: CellRendererProps) => React.ReactNode; + /** + * If true, column can't be reordered. + * @default false + */ + disableReordering?: boolean; + /** + * If true, column's visibility cannot be toggled. + * @default false + */ + disableToggleVisibility?: boolean; + /** + * Side on which column should be sticked to. + */ + sticky?: 'left' | 'right'; +} + +export interface ColumnInterfaceBasedOnValue< + D extends Record = {}, + V = any, +> { + Cell?: Renderer> | undefined; +} + +export interface ColumnGroupInterface> { + // columns: Array>; +} + +export type ColumnGroup = {}> = + ColumnInterface & + ColumnGroupInterface & + ( + | { Header: string } + | ({ id: IdType } & { + Header: Renderer>; + }) + ) & { accessor?: Accessor | undefined }; // Not used, but needed for backwards compatibility + +type ValueOf = T[keyof T]; + +// The accessors like `foo.bar` are not supported, use functions instead +export type ColumnWithStrictAccessor = {}> = + ColumnInterface & + ValueOf<{ + [K in keyof D]: { + accessor: K; + // Cell?: Renderer> | undefined; + } & ColumnInterfaceBasedOnValue; + // } & ColumnInterfaceBasedOnValue; + }>; + +export type ColumnWithLooseAccessor = {}> = + ColumnInterface & + ColumnInterfaceBasedOnValue & + ( + | { Header: string } + | { id: IdType } + | { accessor: keyof D extends never ? IdType : never } + ) & { + accessor?: + | (keyof D extends never ? IdType | Accessor : Accessor) + | undefined; + }; + +export type Column = {}> = + // ColumnWithStrictAccessor; + ColumnGroup | ColumnWithLooseAccessor | ColumnWithStrictAccessor; + +export interface ColumnInstance = {}> + extends Omit, 'id'>, + ColumnInterfaceBasedOnValue, + UseTableColumnProps, + UseFiltersColumnProps, + UseGroupByColumnProps, + UseResizeColumnsColumnProps, + UseSortByColumnProps { + originalWidth: number; + resizeWidth?: number; + isResizerVisible?: boolean; + getDragAndDropProps: () => TableKeyedProps; + originalSticky?: 'left' | 'right' | 'none'; +} + +export interface HeaderGroup = {}> + extends ColumnInstance, + UseTableHeaderGroupProps {} + +export interface Row = {}> + extends UseTableRowProps, + UseExpandedRowProps, + UseGroupByRowProps, + UseRowSelectRowProps, + UseRowStateRowProps { + initialSubRows: Row[]; +} + +export interface TableCommonProps { + style?: CSSProperties | undefined; + className?: string | undefined; + role?: string | undefined; +} + +export interface TableProps extends TableCommonProps {} + +export interface TableBodyProps extends TableCommonProps {} + +export interface TableKeyedProps extends TableCommonProps { + key: React.Key; +} + +export interface TableHeaderGroupProps extends TableKeyedProps {} + +export interface TableFooterGroupProps extends TableKeyedProps {} + +export interface TableHeaderProps extends TableKeyedProps {} + +export interface TableFooterProps extends TableKeyedProps {} + +export interface TableRowProps extends TableKeyedProps {} + +export interface TableCellProps extends TableKeyedProps {} + +export interface TableToggleCommonProps extends TableCommonProps { + onChange?: ((e: ChangeEvent) => void) | undefined; + checked?: boolean | undefined; + title?: string | undefined; + indeterminate?: boolean | undefined; +} + +export interface MetaBase> { + instance: TableInstance; + userProps: any; +} + +// inspired by ExtendState in https://github.com/reduxjs/redux/blob/master/src/types/store.ts +export type Meta< + D extends Record, + Extension = never, + M = MetaBase, +> = [Extension] extends [never] ? M : M & Extension; + +//#region useTable +export function useTable = {}>( + options: TableOptions, + ...plugins: Array> +): TableInstance; + +/** + * NOTE: To use custom options, use "Interface Merging" to add the custom options + */ +export type UseTableOptions> = { + columns: ReadonlyArray>; + data: readonly D[]; +} & Partial<{ + initialState: Partial>; + stateReducer: ( + newState: TableState, + action: ActionType, + previousState: TableState, + instance?: TableInstance, + ) => TableState; + useControlledState: (state: TableState, meta: Meta) => TableState; + defaultColumn: Partial>; + getSubRows: (originalRow: D, relativeIndex: number) => D[]; + getRowId: (originalRow: D, relativeIndex: number, parent?: Row) => string; + autoResetHiddenColumns: boolean; +}>; + +export type PropGetter< + D extends Record, + Props, + T extends object = never, + P = Partial, +> = ((props: P, meta: Meta) => P | P[]) | P | P[]; + +export type TablePropGetter> = PropGetter< + D, + TableProps +>; + +export type TableBodyPropGetter> = PropGetter< + D, + TableBodyProps +>; + +export type HeaderPropGetter> = PropGetter< + D, + TableHeaderProps, + { column: HeaderGroup } +>; + +export type FooterGroupPropGetter> = + PropGetter }>; + +export type HeaderGroupPropGetter> = + PropGetter }>; + +export type FooterPropGetter> = PropGetter< + D, + TableFooterProps, + { column: HeaderGroup } +>; + +export type RowPropGetter> = PropGetter< + D, + TableRowProps, + { row: Row } +>; + +export type CellPropGetter> = PropGetter< + D, + TableCellProps, + { cell: Cell } +>; + +export interface ReducerTableState> + extends TableState, + Record {} + +export interface UseTableHooks> + extends Record { + useOptions: Array< + (options: TableOptions, args: TableOptions) => TableOptions + >; + stateReducers: Array< + ( + newState: TableState, + action: ActionType, + previousState?: TableState, + instance?: TableInstance, + ) => ReducerTableState | undefined + >; + columns: Array< + (columns: Array>, meta: Meta) => Array> + >; + columnsDeps: Array<(deps: any[], meta: Meta) => any[]>; + allColumns: Array< + (allColumns: Array>, meta: Meta) => Array> + >; + allColumnsDeps: Array<(deps: any[], meta: Meta) => any[]>; + visibleColumns: Array< + (allColumns: Array>, meta: Meta) => Array> + >; + visibleColumnsDeps: Array<(deps: any[], meta: Meta) => any[]>; + headerGroups: Array< + (allColumns: Array>, meta: Meta) => Array> + >; + headerGroupsDeps: Array<(deps: any[], meta: Meta) => any[]>; + useInstanceBeforeDimensions: Array<(instance: TableInstance) => void>; + useInstance: Array<(instance: TableInstance) => void>; + prepareRow: Array<(row: Row, meta: Meta) => void>; + useControlledState: Array< + (state: TableState, meta: Meta) => TableState + >; + + getTableProps: Array>; + getTableBodyProps: Array>; + getHeaderGroupProps: Array>; + getFooterGroupProps: Array>; + getHeaderProps: Array>; + getFooterProps: Array>; + getRowProps: Array>; + getCellProps: Array>; + useFinalInstance: Array<(instance: TableInstance) => void>; +} + +export interface UseTableColumnOptions> { + id?: IdType | undefined; + Header?: Renderer> | undefined; + Footer?: Renderer> | undefined; + width?: number | string | undefined; + minWidth?: number | undefined; + maxWidth?: number | undefined; +} + +type UpdateHiddenColumns> = ( + oldHidden: Array>, +) => Array>; + +export interface TableToggleHideAllColumnProps extends TableToggleCommonProps {} + +export interface UseTableInstanceProps> { + state: TableState; + plugins: Array>; + dispatch: TableDispatch; + columns: Array>; + allColumns: Array>; + visibleColumns: Array>; + headerGroups: Array>; + footerGroups: Array>; + headers: Array>; + flatHeaders: Array>; + rows: Array>; + rowsById: Record>; + getTableProps: (propGetter?: TablePropGetter) => TableProps; + getTableBodyProps: (propGetter?: TableBodyPropGetter) => TableBodyProps; + prepareRow: (row: Row) => void; + flatRows: Array>; + totalColumnsWidth: number; + allColumnsHidden: boolean; + toggleHideColumn: (columnId: IdType, value?: boolean) => void; + setHiddenColumns: (param: Array> | UpdateHiddenColumns) => void; + toggleHideAllColumns: (value?: boolean) => void; + getToggleHideAllColumnsProps: ( + props?: Partial, + ) => TableToggleHideAllColumnProps; + getHooks: () => Hooks; +} + +export interface UseTableHeaderGroupProps> { + headers: Array>; + getHeaderGroupProps: ( + propGetter?: HeaderGroupPropGetter, + ) => TableHeaderProps; + getFooterGroupProps: ( + propGetter?: FooterGroupPropGetter, + ) => TableFooterProps; + totalHeaderCount: number; // not documented +} + +export interface UseTableColumnProps> { + id: IdType; + columns?: Array> | undefined; + isVisible: boolean; + render: (type: 'Header' | 'Footer' | string, props?: object) => ReactNode; + totalLeft: number; + totalWidth: number; + getHeaderProps: (propGetter?: HeaderPropGetter) => TableHeaderProps; + getFooterProps: (propGetter?: FooterPropGetter) => TableFooterProps; + toggleHidden: (value?: boolean) => void; + parent?: ColumnInstance | undefined; // not documented + getToggleHiddenProps: (userProps?: any) => any; + depth: number; // not documented + placeholderOf?: ColumnInstance | undefined; +} + +export interface UseTableRowProps> { + cells: Array>; + allCells: Array>; + values: Record, CellValue>; + getRowProps: (propGetter?: RowPropGetter) => TableRowProps; + index: number; + original: D; + id: string; + subRows: Array>; +} + +export interface UseTableCellProps, V = any> { + column: ColumnInstance; + row: Row; + value: CellValue; + getCellProps: (propGetter?: CellPropGetter) => TableCellProps; + render: (type: 'Cell' | string, userProps?: object) => ReactNode; +} + +export type HeaderProps> = + TableInstance & { + column: ColumnInstance; + }; + +export type FooterProps> = + TableInstance & { + column: ColumnInstance; + }; + +export type CellProps< + D extends Record, + V = any, +> = TableInstance & { + column: ColumnInstance; + row: Row; + cell: Cell; + value: CellValue; +}; + +export type Accessor> = ( + originalRow: D, + index: number, + sub: { + subRows: D[]; + depth: number; + data: D[]; + }, +) => CellValue; + +//#endregion + +// Plugins + +//#region useAbsoluteLayout +export function useAbsoluteLayout = {}>( + hooks: Hooks, +): void; + +export namespace useAbsoluteLayout { + const pluginName = 'useAbsoluteLayout'; +} +//#endregion + +//#region useBlockLayout +export function useBlockLayout = {}>( + hooks: Hooks, +): void; + +export namespace useBlockLayout { + const pluginName = 'useBlockLayout'; +} +//#endregion + +//#region useColumnOrder +export function useColumnOrder = {}>( + hooks: Hooks, +): void; + +export namespace useColumnOrder { + const pluginName = 'useColumnOrder'; +} + +export interface UseColumnOrderState> { + columnOrder: Array>; +} + +export interface UseColumnOrderInstanceProps< + D extends Record, +> { + setColumnOrder: ( + updater: + | ((columnOrder: Array>) => Array>) + | Array>, + ) => void; +} + +//#endregion + +//#region useExpanded +export function useExpanded = {}>( + hooks: Hooks, +): void; + +export namespace useExpanded { + const pluginName = 'useExpanded'; +} + +export interface TableExpandedToggleProps extends TableKeyedProps {} + +export type UseExpandedOptions> = Partial<{ + manualExpandedKey: IdType; + paginateExpandedRows: boolean; + expandSubRows: boolean; + autoResetExpanded?: boolean | undefined; +}>; + +export interface UseExpandedHooks> { + getToggleRowsExpandedProps: Array>; + getToggleAllRowsExpandedProps: Array>; +} + +export interface UseExpandedState> { + expanded: Record, boolean>; +} + +export interface UseExpandedInstanceProps> { + preExpandedRows: Array>; + expandedRows: Array>; + rows: Array>; + expandedDepth: number; + isAllRowsExpanded: boolean; + toggleRowExpanded: (id: Array>, value?: boolean) => void; + toggleAllRowsExpanded: (value?: boolean) => void; +} + +export interface UseExpandedRowProps> { + isExpanded: boolean; + canExpand: boolean; + subRows: Array>; + toggleRowExpanded: (value?: boolean) => void; + getToggleRowExpandedProps: ( + props?: Partial, + ) => TableExpandedToggleProps; + depth: number; +} + +//#endregion + +//#region useFilters +export function useFilters = {}>( + hooks: Hooks, +): void; + +export namespace useFilters { + const pluginName = 'useFilters'; +} + +export type UseFiltersOptions> = Partial<{ + manualFilters: boolean; + disableFilters: boolean; + defaultCanFilter: boolean; + filterTypes: FilterTypes; + autoResetFilters?: boolean | undefined; +}>; + +export interface UseFiltersState> { + filters: Filters; +} + +export type UseFiltersColumnOptions> = + Partial<{ + Filter: Renderer>; + disableFilters: boolean; + defaultCanFilter: boolean; + filter: FilterType | DefaultFilterTypes | string; + }>; + +export interface UseFiltersInstanceProps> { + preFilteredRows: Array>; + preFilteredFlatRows: Array>; + preFilteredRowsById: Record>; + filteredRows: Array>; + filteredFlatRows: Array>; + filteredRowsById: Record>; + rows: Array>; + flatRows: Array>; + rowsById: Record>; + setFilter: ( + columnId: IdType, + updater: ((filterValue: FilterValue) => FilterValue) | FilterValue, + ) => void; + setAllFilters: ( + updater: Filters | ((filters: Filters) => Filters), + ) => void; +} + +export interface UseFiltersColumnProps> { + canFilter: boolean; + setFilter: ( + updater: ((filterValue: FilterValue) => FilterValue) | FilterValue, + ) => void; + filterValue: FilterValue; + preFilteredRows: Array>; + filteredRows: Array>; +} + +export type FilterProps> = HeaderProps; +export type FilterValue = any; +export type Filters> = Array<{ + id: IdType; + value: FilterValue; +}>; +export type FilterTypes> = Record< + string, + FilterType +>; + +export type DefaultFilterTypes = + | 'text' + | 'exactText' + | 'exactTextCase' + | 'includes' + | 'includesAll' + | 'exact' + | 'equals' + | 'between'; + +export interface FilterType> { + ( + rows: Array>, + columnIds: Array>, + filterValue: FilterValue, + ): Array>; + + autoRemove?: ((filterValue: FilterValue) => boolean) | undefined; +} + +//#endregion + +//#region useFlexLayout +export function useFlexLayout = {}>( + hooks: Hooks, +): void; + +export namespace useFlexLayout { + const pluginName = 'useFlexLayout'; +} +//#endregion + +//#region useGridLayout +export function useGridLayout = {}>( + hooks: Hooks, +): void; + +export namespace useGridLayout { + const pluginName = 'useGridLayout'; +} +//#endregion + +//#region useGlobalFilter +export function useGlobalFilter = {}>( + hooks: Hooks, +): void; + +export namespace useGlobalFilter { + const pluginName = 'useGlobalFilter'; +} + +export type UseGlobalFiltersOptions> = + Partial<{ + globalFilter: + | (( + rows: Array>, + columnIds: Array>, + filterValue: any, + ) => Array>) + | string; + manualGlobalFilter: boolean; + filterTypes: FilterTypes; + autoResetGlobalFilter?: boolean | undefined; + disableGlobalFilter?: boolean | undefined; + }>; + +export interface UseGlobalFiltersState> { + globalFilter: any; +} + +export type UseGlobalFiltersColumnOptions> = + Partial<{ + disableGlobalFilter?: boolean | undefined; + }>; + +export interface UseGlobalFiltersInstanceProps< + D extends Record, +> { + preGlobalFilteredRows: Array>; + preGlobalFilteredFlatRows: Array>; + preGlobalFilteredRowsById: Record>; + globalFilteredRows: Array>; + globalFilteredFlatRows: Array>; + globalFilteredRowsById: Record>; + rows: Array>; + flatRows: Array>; + rowsById: Record>; + setGlobalFilter: (filterValue: FilterValue) => void; +} + +//#endregion + +//#region useGroupBy +export function useGroupBy = {}>( + hooks: Hooks, +): void; + +export namespace useGroupBy { + const pluginName = 'useGroupBy'; +} + +export interface TableGroupByToggleProps { + title?: string | undefined; + style?: CSSProperties | undefined; + onClick?: ((e: MouseEvent) => void) | undefined; +} + +export type UseGroupByOptions> = Partial<{ + manualGroupBy: boolean; + disableGroupBy: boolean; + defaultCanGroupBy: boolean; + aggregations: Record>; + groupByFn: ( + rows: Array>, + columnId: IdType, + ) => Record>>; + autoResetGroupBy?: boolean | undefined; +}>; + +export interface UseGroupByHooks> { + getGroupByToggleProps: Array>; +} + +export interface UseGroupByState> { + groupBy: Array>; +} + +export type UseGroupByColumnOptions> = + Partial<{ + aggregate: Aggregator; + Aggregated: Renderer>; + disableGroupBy: boolean; + defaultCanGroupBy: boolean; + }>; + +export interface UseGroupByInstanceProps> { + preGroupedRows: Array>; + preGroupedFlatRows: Array>; + preGroupedRowsById: Record>; + groupedRows: Array>; + groupedFlatRows: Array>; + groupedRowsById: Record>; + onlyGroupedFlatRows: Array>; + onlyGroupedRowsById: Record>; + nonGroupedFlatRows: Array>; + nonGroupedRowsById: Record>; + rows: Array>; + flatRows: Array>; + rowsById: Record>; + toggleGroupBy: (columnId: IdType, value?: boolean) => void; +} + +export interface UseGroupByColumnProps> { + canGroupBy: boolean; + isGrouped: boolean; + groupedIndex: number; + toggleGroupBy: () => void; + getGroupByToggleProps: ( + props?: Partial, + ) => TableGroupByToggleProps; +} + +export interface UseGroupByRowProps> { + isGrouped: boolean; + groupByID: IdType; + groupByVal: string; + values: Record, AggregatedValue>; + subRows: Array>; + leafRows: Array>; + depth: number; + id: string; + index: number; +} + +export interface UseGroupByCellProps> { + isGrouped: boolean; + isPlaceholder: boolean; + isAggregated: boolean; +} + +export type DefaultAggregators = + | 'sum' + | 'average' + | 'median' + | 'uniqueCount' + | 'count'; + +export type AggregatorFn> = ( + columnValues: CellValue[], + rows: Array>, + isAggregated: boolean, +) => AggregatedValue; +export type Aggregator> = + | AggregatorFn + | DefaultAggregators + | string; +export type AggregatedValue = any; +//#endregion + +//#region usePagination +export function usePagination = {}>( + hooks: Hooks, +): void; + +export namespace usePagination { + const pluginName = 'usePagination'; +} + +export type UsePaginationOptions> = Partial<{ + pageCount: number; + manualPagination: boolean; + autoResetPage?: boolean | undefined; + paginateExpandedRows: boolean; +}>; + +export interface UsePaginationState> { + pageSize: number; + pageIndex: number; +} + +export interface UsePaginationInstanceProps> { + page: Array>; + pageCount: number; + pageOptions: number[]; + canPreviousPage: boolean; + canNextPage: boolean; + gotoPage: (updater: ((pageIndex: number) => number) | number) => void; + previousPage: () => void; + nextPage: () => void; + setPageSize: (pageSize: number) => void; +} + +//#endregion + +//#region useResizeColumns +export function useResizeColumns = {}>( + hooks: Hooks, +): void; + +export namespace useResizeColumns { + const pluginName = 'useResizeColumns'; +} + +export interface UseResizeColumnsOptions> { + disableResizing?: boolean | undefined; + autoResetResize?: boolean | undefined; +} + +export interface UseResizeColumnsState> { + columnResizing: { + startX?: number | undefined; + columnWidth: number; + headerIdWidths: Record; + columnWidths: any; + isResizingColumn?: string | undefined; + }; +} + +export interface UseResizeColumnsColumnOptions< + D extends Record, +> { + disableResizing?: boolean | undefined; +} + +export interface TableResizerProps {} + +export interface UseResizeColumnsColumnProps< + D extends Record, +> { + getResizerProps: (props?: Partial) => TableResizerProps; + canResize: boolean; + isResizing: boolean; +} + +//#endregion + +//#region useRowSelect +export function useRowSelect = {}>( + hooks: Hooks, +): void; + +export namespace useRowSelect { + const pluginName = 'useRowSelect'; +} + +export interface TableToggleAllRowsSelectedProps + extends TableToggleCommonProps {} + +export interface TableToggleRowsSelectedProps extends TableToggleCommonProps {} + +export type UseRowSelectOptions> = Partial<{ + manualRowSelectedKey: IdType; + autoResetSelectedRows: boolean; + selectSubRows: boolean; +}>; + +export interface UseRowSelectHooks> { + getToggleRowSelectedProps: Array>; + getToggleAllRowsSelectedProps: Array< + PropGetter + >; + getToggleAllPageRowsSelectedProps: Array< + PropGetter + >; +} + +export interface UseRowSelectState> { + selectedRowIds: Record, boolean>; +} + +export interface UseRowSelectInstanceProps> { + toggleRowSelected: (rowId: IdType, set?: boolean) => void; + toggleAllRowsSelected: (value?: boolean) => void; + getToggleAllRowsSelectedProps: ( + props?: Partial, + ) => TableToggleAllRowsSelectedProps; + getToggleAllPageRowsSelectedProps: ( + props?: Partial, + ) => TableToggleAllRowsSelectedProps; + isAllRowsSelected: boolean; + selectedFlatRows: Array>; +} + +export interface UseRowSelectRowProps> { + isSelected: boolean; + isSomeSelected: boolean; + toggleRowSelected: (set?: boolean) => void; + getToggleRowSelectedProps: ( + props?: Partial, + ) => TableToggleRowsSelectedProps; +} + +//#endregion + +//#region useRowState +export function useRowState = {}>( + hooks: Hooks, +): void; + +export namespace useRowState { + const pluginName = 'useRowState'; +} + +export type UseRowStateOptions> = Partial<{ + initialRowStateAccessor: (row: Row) => UseRowStateLocalState; + getResetRowStateDeps: (instance: TableInstance) => any[]; + autoResetRowState?: boolean | undefined; +}>; + +export interface UseRowStateState> { + rowState: Record }>; +} + +export interface UseRowStateInstanceProps> { + setRowState: (rowPath: string[], updater: UseRowUpdater) => void; + setCellState: ( + rowPath: string[], + columnId: IdType, + updater: UseRowUpdater, + ) => void; +} + +export interface UseRowStateRowProps> { + state: UseRowStateLocalState; + setState: (updater: UseRowUpdater) => void; +} + +export interface UseRowStateCellProps> { + state: UseRowStateLocalState; + setState: (updater: UseRowUpdater) => void; +} + +export type UseRowUpdater = T | ((prev: T) => T); +export type UseRowStateLocalState< + D extends Record, + T = unknown, +> = Record, T>; +//#endregion + +//#region useSortBy +export function useSortBy = {}>( + hooks: Hooks, +): void; + +export namespace useSortBy { + const pluginName = 'useSortBy'; +} + +export interface TableSortByToggleProps { + title?: string | undefined; + style?: CSSProperties | undefined; + onClick?: ((e: MouseEvent) => void) | undefined; +} + +export type UseSortByOptions> = Partial<{ + manualSortBy: boolean; + disableSortBy: boolean; + defaultCanSort: boolean; + disableMultiSort: boolean; + isMultiSortEvent: (e: MouseEvent) => boolean; + maxMultiSortColCount: number; + disableSortRemove: boolean; + disabledMultiRemove: boolean; + orderByFn: ( + rows: Array>, + sortFns: Array>, + directions: boolean[], + ) => Array>; + sortTypes: Record>; + autoResetSortBy?: boolean | undefined; +}>; + +export interface UseSortByHooks> { + getSortByToggleProps: Array>; +} + +export interface UseSortByState> { + sortBy: Array>; +} + +export type UseSortByColumnOptions> = + Partial<{ + defaultCanSort: boolean; + disableSortBy: boolean; + sortDescFirst: boolean; + sortInverted: boolean; + sortType: SortByFn | DefaultSortTypes | string; + }>; + +export interface UseSortByInstanceProps> { + rows: Array>; + preSortedRows: Array>; + setSortBy: (sortBy: Array>) => void; + toggleSortBy: ( + columnId: IdType, + descending?: boolean, + isMulti?: boolean, + ) => void; +} + +export interface UseSortByColumnProps> { + canSort: boolean; + toggleSortBy: (descending?: boolean, multi?: boolean) => void; + getSortByToggleProps: ( + props?: Partial, + ) => TableSortByToggleProps; + clearSortBy: () => void; + isSorted: boolean; + sortedIndex: number; + isSortedDesc: boolean | undefined; +} + +export type OrderByFn> = ( + rowA: Row, + rowB: Row, +) => number; +export type SortByFn> = ( + rowA: Row, + rowB: Row, + columnId: IdType, + desc?: boolean, +) => number; + +export type DefaultSortTypes = + | 'alphanumeric' + | 'datetime' + | 'basic' + | 'string' + | 'number'; + +export interface SortingRule { + id: IdType; + desc?: boolean | undefined; +} + +//#endregion + +// Additional API +export const actions: Record; +export type ActionType = { type: string } & Record; +export const defaultColumn: Partial & Record; + +// Helpers +export type StringKey = Extract; +export type IdType = StringKey | string; +export type CellValue = V; + +export type Renderer = + | ComponentType + | ReactElement + | string + | number + | ReactFragment; + +export interface PluginHook> { + (hooks: Hooks): void; + pluginName?: string | undefined; +} + +export type TableDispatch = (action: A) => void; + +// utils +export function defaultOrderByFn = {}>( + arr: Array>, + funcs: Array>, + dirs: boolean[], +): Array>; + +export function defaultGroupByFn = {}>( + rows: Array>, + columnId: IdType, +): Record>>; + +export function makePropGetter(hooks: Hooks, ...meta: any[]): any; + +export function reduceHooks( + hooks: Hooks, + initial: T, + ...args: any[] +): T; + +export function loopHooks(hooks: Hooks, ...args: any[]): void; + +export function ensurePluginOrder = {}>( + plugins: Array>, + befores: string[], + pluginName: string, +): void; + +export function functionalUpdate = {}>( + updater: any, + old: Partial>, +): Partial>; + +export function useGetLatest(obj: T): () => T; + +export function safeUseLayoutEffect( + effect: EffectCallback, + deps?: DependencyList, +): void; + +export function useMountedLayoutEffect( + effect: EffectCallback, + deps?: DependencyList, +): void; + +export function useAsyncDebounce any>( + defaultFn: F, + defaultWait?: number, +): F; + +export function makeRenderer( + instance: TableInstance, + column: ColumnInstance, + meta?: any, +): ReactElement; + +////////////////////////////////////////////////////////////////////////////////////////////////// +// Custom Additions (parts from the old file called react-table-config.ts) + +export type FieldType = 'text' | 'number' | 'date' | string; + +export type CellRendererProps = {}> = { + /** + * Cell HTML props passed from the Table. + */ + cellElementProps: TableCellProps; + /** + * Table specific cell props like `column`, `row`. + */ + cellProps: CellProps; + /** + * Cell's content. + */ + children: React.ReactNode; + /** + * Function that returns whether the cell is disabled. + */ + isDisabled?: (rowData: D) => boolean; +}; From 287551fe219933e3e300ca85c35453cb6ca77847 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Wed, 30 Aug 2023 14:45:30 -0400 Subject: [PATCH 061/196] Deleted temp file react-table-objects --- .../core/Table/types/react-table-objects.ts | 1323 ----------------- 1 file changed, 1323 deletions(-) delete mode 100644 packages/itwinui-react/src/core/Table/types/react-table-objects.ts diff --git a/packages/itwinui-react/src/core/Table/types/react-table-objects.ts b/packages/itwinui-react/src/core/Table/types/react-table-objects.ts deleted file mode 100644 index 5db77a15e65..00000000000 --- a/packages/itwinui-react/src/core/Table/types/react-table-objects.ts +++ /dev/null @@ -1,1323 +0,0 @@ -/*--------------------------------------------------------------------------------------------- - * Copyright (c) Bentley Systems, Incorporated. All rights reserved. - * See LICENSE.md in the project root for license terms and full copyright notice. - *--------------------------------------------------------------------------------------------*/ -/* eslint-disable @typescript-eslint/no-empty-interface */ -/* eslint-disable @typescript-eslint/ban-types */ -// Type definitions for react-table 7.7 -// Project: https://github.com/tannerlinsley/react-table -// Definitions by: Guy Gascoigne-Piggford , -// Rohit Garg -// Jason Clark -// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped -// TypeScript Version: 3.5 -// reflects react-table@7.7.0 - -// tslint:disable:no-empty-interface -// no-empty-interface is disabled to allow easy extension with declaration merging - -// TODO: Find out why the below line was giving an error -// /* eslint-disable @definitelytyped/no-unnecessary-generics */ -// no-unnecessary-generics is disabled because many of these definitions are either used in a generic -// context or the signatures are required to match for declaration merging - -// The changelog for the important changes is located in the Readme.md - -import type { - ChangeEvent, - ComponentType, - CSSProperties, - DependencyList, - EffectCallback, - MouseEvent, - ReactElement, - ReactFragment, - ReactNode, -} from 'react'; - -import type { TableFilterProps, TableFilterValue } from '../index.js'; -import type { CommonProps } from '../../utils/props.js'; - -export const testingVar = 0; -// export {}; - -/** - * The empty definitions of below provides a base definition for the parts used by useTable, that can then be extended in the users code. - * - * @example - * export interface TableOptions = {}}> - * extends - * UseExpandedOptions, - * UseFiltersOptions {} - * see https://gist.github.com/ggascoigne/646e14c9d54258e40588a13aabf0102d for more details - */ -export interface TableOptions> - extends Omit, 'data' | 'columns'>, - UseRowSelectOptions, - UseExpandedOptions, - UseFiltersOptions, - // UseGroupByOptions, - UsePaginationOptions, - UseGlobalFiltersOptions, - UseGlobalFiltersColumnOptions, - Omit, 'disableResizing'>, - // UseRowStateOptions, - UseSortByOptions { - /** - * List of columns. - * - * Should not have a top-level `Header` or a `columns` sub-property. They are only allowed to be passed for backwards compatibility. - * See [migration guide](https://github.com/iTwin/iTwinUI/wiki/iTwinUI-react-v2-migration-guide#breaking-changes). - */ - columns: Array>; - /** - * Table data list. - * Must be memoized. - * - * Supports expandable sub-rows using the `subRows` field in data entries. - * If some rows don't have sub-data, it is recommended to pass an empty array to `subRows` for consistent spacing. - */ - data: D[]; - /** - * Column's resize mode. - * - `fit` - when resizing it affects current and the next column, - * e.g. when increasing width of current column, next column's width will decrease. - * - `expand` - when resizing it affects only the current column, - * e.g. when increasing width of the current column, next column's width remains the same. - * @default 'fit' - */ - columnResizeMode?: 'fit' | 'expand'; -} - -export interface TableInstance = {}> - extends Omit, 'columns' | 'pageCount'>, - UseTableInstanceProps, - UseColumnOrderInstanceProps, - UseExpandedInstanceProps, - UseFiltersInstanceProps, - UseGlobalFiltersInstanceProps, - UseGroupByInstanceProps, - UsePaginationInstanceProps, - UseRowSelectInstanceProps, - UseRowStateInstanceProps, - UseSortByInstanceProps { - initialRows: Row[]; - columnResizeMode: TableOptions['columnResizeMode']; - tableWidth: number; -} - -export interface TableState = {}> - extends UseColumnOrderState, - UseExpandedState, - UseFiltersState, - UseGlobalFiltersState, - UseGroupByState, - UsePaginationState, - UseRowSelectState, - UseRowStateState, - UseSortByState { - hiddenColumns?: Array> | undefined; - - // UseResizeColumnsState with fixed typings - columnResizing: { - startX?: number; - columnWidth?: number; - nextColumnWidth?: number; - headerIdWidths?: Array<[string, number]>; - nextHeaderIdWidths?: Array<[string, number]>; - columnWidths: Record; - isResizingColumn?: string; - }; - isTableResizing?: boolean; - columnReorderStartIndex: number; - sticky: { - isScrolledToRight?: boolean; - isScrolledToLeft?: boolean; - }; - lastSelectedRowId?: string; -} - -export interface Hooks = {}> - extends UseTableHooks, - UseExpandedHooks, - UseGroupByHooks, - UseRowSelectHooks, - UseSortByHooks {} - -export interface Cell = {}, V = any> - extends UseTableCellProps, - UseGroupByCellProps, - UseRowStateCellProps {} - -export interface ColumnInterface = {}> - extends UseTableColumnOptions, - // UseGroupByColumnOptions, - UseSortByColumnOptions, - UseFiltersColumnOptions, - UseResizeColumnsColumnOptions, - UseGlobalFiltersColumnOptions { - /** - * Custom class name applied to header column cell. - */ - columnClassName?: string; - /** - * Custom class name applied to each column's cell. - */ - cellClassName?: string; - /** - * Type of the data in cell. Used for manual filtering. - */ - fieldType?: FieldType; - /** - * Filter component used as a column filter. Should use filters from `tableFilters`. - */ - Filter?: Renderer> | Renderer>; - /** - * String value or custom function to use for filtering. - * Possible string values: `text`, `exactText`, `exactTextCase`, `includes`, `includesAll`, `exact`, `equals`, `between`. - * More info about these filters: https://github.com/tannerlinsley/react-table/blob/master/src/filterTypes.js - */ - filter?: FilterType | DefaultFilterTypes | string; - /** - * Function that should return whole cell element not only the content. - * Must be memoized. - * @example - * { - * Header: 'Name', - * accessor: 'name', - * cellRenderer: (props) => , - * } - */ - cellRenderer?: (props: CellRendererProps) => React.ReactNode; - /** - * If true, column can't be reordered. - * @default false - */ - disableReordering?: boolean; - /** - * If true, column's visibility cannot be toggled. - * @default false - */ - disableToggleVisibility?: boolean; - /** - * Side on which column should be sticked to. - */ - sticky?: 'left' | 'right'; -} - -export interface ColumnInterfaceBasedOnValue< - D extends Record = {}, - V = any, -> { - Cell?: Renderer> | undefined; -} - -export interface ColumnGroupInterface> { - // columns: Array>; -} - -export type ColumnGroup = {}> = - ColumnInterface & - ColumnGroupInterface & - ( - | { Header: string } - | ({ id: IdType } & { - Header: Renderer>; - }) - ) & { accessor?: Accessor | undefined }; // Not used, but needed for backwards compatibility - -type ValueOf = T[keyof T]; - -// The accessors like `foo.bar` are not supported, use functions instead -export type ColumnWithStrictAccessor = {}> = - ColumnInterface & - ValueOf<{ - [K in keyof D]: { - accessor: K; - // Cell?: Renderer> | undefined; - } & ColumnInterfaceBasedOnValue; - // } & ColumnInterfaceBasedOnValue; - }>; - -export type ColumnWithLooseAccessor = {}> = - ColumnInterface & - ColumnInterfaceBasedOnValue & - ( - | { Header: string } - | { id: IdType } - | { accessor: keyof D extends never ? IdType : never } - ) & { - accessor?: - | (keyof D extends never ? IdType | Accessor : Accessor) - | undefined; - }; - -export type Column = {}> = - // ColumnWithStrictAccessor; - ColumnGroup | ColumnWithLooseAccessor | ColumnWithStrictAccessor; - -export interface ColumnInstance = {}> - extends Omit, 'id'>, - ColumnInterfaceBasedOnValue, - UseTableColumnProps, - UseFiltersColumnProps, - UseGroupByColumnProps, - UseResizeColumnsColumnProps, - UseSortByColumnProps { - originalWidth: number; - resizeWidth?: number; - isResizerVisible?: boolean; - getDragAndDropProps: () => TableKeyedProps; - originalSticky?: 'left' | 'right' | 'none'; -} - -export interface HeaderGroup = {}> - extends ColumnInstance, - UseTableHeaderGroupProps {} - -export interface Row = {}> - extends UseTableRowProps, - UseExpandedRowProps, - UseGroupByRowProps, - UseRowSelectRowProps, - UseRowStateRowProps { - initialSubRows: Row[]; -} - -export interface TableCommonProps { - style?: CSSProperties | undefined; - className?: string | undefined; - role?: string | undefined; -} - -export interface TableProps extends TableCommonProps {} - -export interface TableBodyProps extends TableCommonProps {} - -export interface TableKeyedProps extends TableCommonProps { - key: React.Key; -} - -export interface TableHeaderGroupProps extends TableKeyedProps {} - -export interface TableFooterGroupProps extends TableKeyedProps {} - -export interface TableHeaderProps extends TableKeyedProps {} - -export interface TableFooterProps extends TableKeyedProps {} - -export interface TableRowProps extends TableKeyedProps {} - -export interface TableCellProps extends TableKeyedProps {} - -export interface TableToggleCommonProps extends TableCommonProps { - onChange?: ((e: ChangeEvent) => void) | undefined; - checked?: boolean | undefined; - title?: string | undefined; - indeterminate?: boolean | undefined; -} - -export interface MetaBase> { - instance: TableInstance; - userProps: any; -} - -// inspired by ExtendState in https://github.com/reduxjs/redux/blob/master/src/types/store.ts -export type Meta< - D extends Record, - Extension = never, - M = MetaBase, -> = [Extension] extends [never] ? M : M & Extension; - -//#region useTable -export function useTable = {}>( - options: TableOptions, - ...plugins: Array> -): TableInstance; - -/** - * NOTE: To use custom options, use "Interface Merging" to add the custom options - */ -export type UseTableOptions> = { - columns: ReadonlyArray>; - data: readonly D[]; -} & Partial<{ - initialState: Partial>; - stateReducer: ( - newState: TableState, - action: ActionType, - previousState: TableState, - instance?: TableInstance, - ) => TableState; - useControlledState: (state: TableState, meta: Meta) => TableState; - defaultColumn: Partial>; - getSubRows: (originalRow: D, relativeIndex: number) => D[]; - getRowId: (originalRow: D, relativeIndex: number, parent?: Row) => string; - autoResetHiddenColumns: boolean; -}>; - -export type PropGetter< - D extends Record, - Props, - T extends object = never, - P = Partial, -> = ((props: P, meta: Meta) => P | P[]) | P | P[]; - -export type TablePropGetter> = PropGetter< - D, - TableProps ->; - -export type TableBodyPropGetter> = PropGetter< - D, - TableBodyProps ->; - -export type HeaderPropGetter> = PropGetter< - D, - TableHeaderProps, - { column: HeaderGroup } ->; - -export type FooterGroupPropGetter> = - PropGetter }>; - -export type HeaderGroupPropGetter> = - PropGetter }>; - -export type FooterPropGetter> = PropGetter< - D, - TableFooterProps, - { column: HeaderGroup } ->; - -export type RowPropGetter> = PropGetter< - D, - TableRowProps, - { row: Row } ->; - -export type CellPropGetter> = PropGetter< - D, - TableCellProps, - { cell: Cell } ->; - -export interface ReducerTableState> - extends TableState, - Record {} - -export interface UseTableHooks> - extends Record { - useOptions: Array< - (options: TableOptions, args: TableOptions) => TableOptions - >; - stateReducers: Array< - ( - newState: TableState, - action: ActionType, - previousState?: TableState, - instance?: TableInstance, - ) => ReducerTableState | undefined - >; - columns: Array< - (columns: Array>, meta: Meta) => Array> - >; - columnsDeps: Array<(deps: any[], meta: Meta) => any[]>; - allColumns: Array< - (allColumns: Array>, meta: Meta) => Array> - >; - allColumnsDeps: Array<(deps: any[], meta: Meta) => any[]>; - visibleColumns: Array< - (allColumns: Array>, meta: Meta) => Array> - >; - visibleColumnsDeps: Array<(deps: any[], meta: Meta) => any[]>; - headerGroups: Array< - (allColumns: Array>, meta: Meta) => Array> - >; - headerGroupsDeps: Array<(deps: any[], meta: Meta) => any[]>; - useInstanceBeforeDimensions: Array<(instance: TableInstance) => void>; - useInstance: Array<(instance: TableInstance) => void>; - prepareRow: Array<(row: Row, meta: Meta) => void>; - useControlledState: Array< - (state: TableState, meta: Meta) => TableState - >; - - getTableProps: Array>; - getTableBodyProps: Array>; - getHeaderGroupProps: Array>; - getFooterGroupProps: Array>; - getHeaderProps: Array>; - getFooterProps: Array>; - getRowProps: Array>; - getCellProps: Array>; - useFinalInstance: Array<(instance: TableInstance) => void>; -} - -export interface UseTableColumnOptions> { - id?: IdType | undefined; - Header?: Renderer> | undefined; - Footer?: Renderer> | undefined; - width?: number | string | undefined; - minWidth?: number | undefined; - maxWidth?: number | undefined; -} - -type UpdateHiddenColumns> = ( - oldHidden: Array>, -) => Array>; - -export interface TableToggleHideAllColumnProps extends TableToggleCommonProps {} - -export interface UseTableInstanceProps> { - state: TableState; - plugins: Array>; - dispatch: TableDispatch; - columns: Array>; - allColumns: Array>; - visibleColumns: Array>; - headerGroups: Array>; - footerGroups: Array>; - headers: Array>; - flatHeaders: Array>; - rows: Array>; - rowsById: Record>; - getTableProps: (propGetter?: TablePropGetter) => TableProps; - getTableBodyProps: (propGetter?: TableBodyPropGetter) => TableBodyProps; - prepareRow: (row: Row) => void; - flatRows: Array>; - totalColumnsWidth: number; - allColumnsHidden: boolean; - toggleHideColumn: (columnId: IdType, value?: boolean) => void; - setHiddenColumns: (param: Array> | UpdateHiddenColumns) => void; - toggleHideAllColumns: (value?: boolean) => void; - getToggleHideAllColumnsProps: ( - props?: Partial, - ) => TableToggleHideAllColumnProps; - getHooks: () => Hooks; -} - -export interface UseTableHeaderGroupProps> { - headers: Array>; - getHeaderGroupProps: ( - propGetter?: HeaderGroupPropGetter, - ) => TableHeaderProps; - getFooterGroupProps: ( - propGetter?: FooterGroupPropGetter, - ) => TableFooterProps; - totalHeaderCount: number; // not documented -} - -export interface UseTableColumnProps> { - id: IdType; - columns?: Array> | undefined; - isVisible: boolean; - render: (type: 'Header' | 'Footer' | string, props?: object) => ReactNode; - totalLeft: number; - totalWidth: number; - getHeaderProps: (propGetter?: HeaderPropGetter) => TableHeaderProps; - getFooterProps: (propGetter?: FooterPropGetter) => TableFooterProps; - toggleHidden: (value?: boolean) => void; - parent?: ColumnInstance | undefined; // not documented - getToggleHiddenProps: (userProps?: any) => any; - depth: number; // not documented - placeholderOf?: ColumnInstance | undefined; -} - -export interface UseTableRowProps> { - cells: Array>; - allCells: Array>; - values: Record, CellValue>; - getRowProps: (propGetter?: RowPropGetter) => TableRowProps; - index: number; - original: D; - id: string; - subRows: Array>; -} - -export interface UseTableCellProps, V = any> { - column: ColumnInstance; - row: Row; - value: CellValue; - getCellProps: (propGetter?: CellPropGetter) => TableCellProps; - render: (type: 'Cell' | string, userProps?: object) => ReactNode; -} - -export type HeaderProps> = - TableInstance & { - column: ColumnInstance; - }; - -export type FooterProps> = - TableInstance & { - column: ColumnInstance; - }; - -export type CellProps< - D extends Record, - V = any, -> = TableInstance & { - column: ColumnInstance; - row: Row; - cell: Cell; - value: CellValue; -}; - -export type Accessor> = ( - originalRow: D, - index: number, - sub: { - subRows: D[]; - depth: number; - data: D[]; - }, -) => CellValue; - -//#endregion - -// Plugins - -//#region useAbsoluteLayout -export function useAbsoluteLayout = {}>( - hooks: Hooks, -): void; - -export namespace useAbsoluteLayout { - const pluginName = 'useAbsoluteLayout'; -} -//#endregion - -//#region useBlockLayout -export function useBlockLayout = {}>( - hooks: Hooks, -): void; - -export namespace useBlockLayout { - const pluginName = 'useBlockLayout'; -} -//#endregion - -//#region useColumnOrder -export function useColumnOrder = {}>( - hooks: Hooks, -): void; - -export namespace useColumnOrder { - const pluginName = 'useColumnOrder'; -} - -export interface UseColumnOrderState> { - columnOrder: Array>; -} - -export interface UseColumnOrderInstanceProps< - D extends Record, -> { - setColumnOrder: ( - updater: - | ((columnOrder: Array>) => Array>) - | Array>, - ) => void; -} - -//#endregion - -//#region useExpanded -export function useExpanded = {}>( - hooks: Hooks, -): void; - -export namespace useExpanded { - const pluginName = 'useExpanded'; -} - -export interface TableExpandedToggleProps extends TableKeyedProps {} - -export type UseExpandedOptions> = Partial<{ - manualExpandedKey: IdType; - paginateExpandedRows: boolean; - expandSubRows: boolean; - autoResetExpanded?: boolean | undefined; -}>; - -export interface UseExpandedHooks> { - getToggleRowsExpandedProps: Array>; - getToggleAllRowsExpandedProps: Array>; -} - -export interface UseExpandedState> { - expanded: Record, boolean>; -} - -export interface UseExpandedInstanceProps> { - preExpandedRows: Array>; - expandedRows: Array>; - rows: Array>; - expandedDepth: number; - isAllRowsExpanded: boolean; - toggleRowExpanded: (id: Array>, value?: boolean) => void; - toggleAllRowsExpanded: (value?: boolean) => void; -} - -export interface UseExpandedRowProps> { - isExpanded: boolean; - canExpand: boolean; - subRows: Array>; - toggleRowExpanded: (value?: boolean) => void; - getToggleRowExpandedProps: ( - props?: Partial, - ) => TableExpandedToggleProps; - depth: number; -} - -//#endregion - -//#region useFilters -export function useFilters = {}>( - hooks: Hooks, -): void; - -export namespace useFilters { - const pluginName = 'useFilters'; -} - -export type UseFiltersOptions> = Partial<{ - manualFilters: boolean; - disableFilters: boolean; - defaultCanFilter: boolean; - filterTypes: FilterTypes; - autoResetFilters?: boolean | undefined; -}>; - -export interface UseFiltersState> { - filters: Filters; -} - -export type UseFiltersColumnOptions> = - Partial<{ - Filter: Renderer>; - disableFilters: boolean; - defaultCanFilter: boolean; - filter: FilterType | DefaultFilterTypes | string; - }>; - -export interface UseFiltersInstanceProps> { - preFilteredRows: Array>; - preFilteredFlatRows: Array>; - preFilteredRowsById: Record>; - filteredRows: Array>; - filteredFlatRows: Array>; - filteredRowsById: Record>; - rows: Array>; - flatRows: Array>; - rowsById: Record>; - setFilter: ( - columnId: IdType, - updater: ((filterValue: FilterValue) => FilterValue) | FilterValue, - ) => void; - setAllFilters: ( - updater: Filters | ((filters: Filters) => Filters), - ) => void; -} - -export interface UseFiltersColumnProps> { - canFilter: boolean; - setFilter: ( - updater: ((filterValue: FilterValue) => FilterValue) | FilterValue, - ) => void; - filterValue: FilterValue; - preFilteredRows: Array>; - filteredRows: Array>; -} - -export type FilterProps> = HeaderProps; -export type FilterValue = any; -export type Filters> = Array<{ - id: IdType; - value: FilterValue; -}>; -export type FilterTypes> = Record< - string, - FilterType ->; - -export type DefaultFilterTypes = - | 'text' - | 'exactText' - | 'exactTextCase' - | 'includes' - | 'includesAll' - | 'exact' - | 'equals' - | 'between'; - -export interface FilterType> { - ( - rows: Array>, - columnIds: Array>, - filterValue: FilterValue, - ): Array>; - - autoRemove?: ((filterValue: FilterValue) => boolean) | undefined; -} - -//#endregion - -//#region useFlexLayout -export function useFlexLayout = {}>( - hooks: Hooks, -): void; - -export namespace useFlexLayout { - const pluginName = 'useFlexLayout'; -} -//#endregion - -//#region useGridLayout -export function useGridLayout = {}>( - hooks: Hooks, -): void; - -export namespace useGridLayout { - const pluginName = 'useGridLayout'; -} -//#endregion - -//#region useGlobalFilter -export function useGlobalFilter = {}>( - hooks: Hooks, -): void; - -export namespace useGlobalFilter { - const pluginName = 'useGlobalFilter'; -} - -export type UseGlobalFiltersOptions> = - Partial<{ - globalFilter: - | (( - rows: Array>, - columnIds: Array>, - filterValue: any, - ) => Array>) - | string; - manualGlobalFilter: boolean; - filterTypes: FilterTypes; - autoResetGlobalFilter?: boolean | undefined; - disableGlobalFilter?: boolean | undefined; - }>; - -export interface UseGlobalFiltersState> { - globalFilter: any; -} - -export type UseGlobalFiltersColumnOptions> = - Partial<{ - disableGlobalFilter?: boolean | undefined; - }>; - -export interface UseGlobalFiltersInstanceProps< - D extends Record, -> { - preGlobalFilteredRows: Array>; - preGlobalFilteredFlatRows: Array>; - preGlobalFilteredRowsById: Record>; - globalFilteredRows: Array>; - globalFilteredFlatRows: Array>; - globalFilteredRowsById: Record>; - rows: Array>; - flatRows: Array>; - rowsById: Record>; - setGlobalFilter: (filterValue: FilterValue) => void; -} - -//#endregion - -//#region useGroupBy -export function useGroupBy = {}>( - hooks: Hooks, -): void; - -export namespace useGroupBy { - const pluginName = 'useGroupBy'; -} - -export interface TableGroupByToggleProps { - title?: string | undefined; - style?: CSSProperties | undefined; - onClick?: ((e: MouseEvent) => void) | undefined; -} - -export type UseGroupByOptions> = Partial<{ - manualGroupBy: boolean; - disableGroupBy: boolean; - defaultCanGroupBy: boolean; - aggregations: Record>; - groupByFn: ( - rows: Array>, - columnId: IdType, - ) => Record>>; - autoResetGroupBy?: boolean | undefined; -}>; - -export interface UseGroupByHooks> { - getGroupByToggleProps: Array>; -} - -export interface UseGroupByState> { - groupBy: Array>; -} - -export type UseGroupByColumnOptions> = - Partial<{ - aggregate: Aggregator; - Aggregated: Renderer>; - disableGroupBy: boolean; - defaultCanGroupBy: boolean; - }>; - -export interface UseGroupByInstanceProps> { - preGroupedRows: Array>; - preGroupedFlatRows: Array>; - preGroupedRowsById: Record>; - groupedRows: Array>; - groupedFlatRows: Array>; - groupedRowsById: Record>; - onlyGroupedFlatRows: Array>; - onlyGroupedRowsById: Record>; - nonGroupedFlatRows: Array>; - nonGroupedRowsById: Record>; - rows: Array>; - flatRows: Array>; - rowsById: Record>; - toggleGroupBy: (columnId: IdType, value?: boolean) => void; -} - -export interface UseGroupByColumnProps> { - canGroupBy: boolean; - isGrouped: boolean; - groupedIndex: number; - toggleGroupBy: () => void; - getGroupByToggleProps: ( - props?: Partial, - ) => TableGroupByToggleProps; -} - -export interface UseGroupByRowProps> { - isGrouped: boolean; - groupByID: IdType; - groupByVal: string; - values: Record, AggregatedValue>; - subRows: Array>; - leafRows: Array>; - depth: number; - id: string; - index: number; -} - -export interface UseGroupByCellProps> { - isGrouped: boolean; - isPlaceholder: boolean; - isAggregated: boolean; -} - -export type DefaultAggregators = - | 'sum' - | 'average' - | 'median' - | 'uniqueCount' - | 'count'; - -export type AggregatorFn> = ( - columnValues: CellValue[], - rows: Array>, - isAggregated: boolean, -) => AggregatedValue; -export type Aggregator> = - | AggregatorFn - | DefaultAggregators - | string; -export type AggregatedValue = any; -//#endregion - -//#region usePagination -export function usePagination = {}>( - hooks: Hooks, -): void; - -export namespace usePagination { - const pluginName = 'usePagination'; -} - -export type UsePaginationOptions> = Partial<{ - pageCount: number; - manualPagination: boolean; - autoResetPage?: boolean | undefined; - paginateExpandedRows: boolean; -}>; - -export interface UsePaginationState> { - pageSize: number; - pageIndex: number; -} - -export interface UsePaginationInstanceProps> { - page: Array>; - pageCount: number; - pageOptions: number[]; - canPreviousPage: boolean; - canNextPage: boolean; - gotoPage: (updater: ((pageIndex: number) => number) | number) => void; - previousPage: () => void; - nextPage: () => void; - setPageSize: (pageSize: number) => void; -} - -//#endregion - -//#region useResizeColumns -export function useResizeColumns = {}>( - hooks: Hooks, -): void; - -export namespace useResizeColumns { - const pluginName = 'useResizeColumns'; -} - -export interface UseResizeColumnsOptions> { - disableResizing?: boolean | undefined; - autoResetResize?: boolean | undefined; -} - -export interface UseResizeColumnsState> { - columnResizing: { - startX?: number | undefined; - columnWidth: number; - headerIdWidths: Record; - columnWidths: any; - isResizingColumn?: string | undefined; - }; -} - -export interface UseResizeColumnsColumnOptions< - D extends Record, -> { - disableResizing?: boolean | undefined; -} - -export interface TableResizerProps {} - -export interface UseResizeColumnsColumnProps< - D extends Record, -> { - getResizerProps: (props?: Partial) => TableResizerProps; - canResize: boolean; - isResizing: boolean; -} - -//#endregion - -//#region useRowSelect -export function useRowSelect = {}>( - hooks: Hooks, -): void; - -export namespace useRowSelect { - const pluginName = 'useRowSelect'; -} - -export interface TableToggleAllRowsSelectedProps - extends TableToggleCommonProps {} - -export interface TableToggleRowsSelectedProps extends TableToggleCommonProps {} - -export type UseRowSelectOptions> = Partial<{ - manualRowSelectedKey: IdType; - autoResetSelectedRows: boolean; - selectSubRows: boolean; -}>; - -export interface UseRowSelectHooks> { - getToggleRowSelectedProps: Array>; - getToggleAllRowsSelectedProps: Array< - PropGetter - >; - getToggleAllPageRowsSelectedProps: Array< - PropGetter - >; -} - -export interface UseRowSelectState> { - selectedRowIds: Record, boolean>; -} - -export interface UseRowSelectInstanceProps> { - toggleRowSelected: (rowId: IdType, set?: boolean) => void; - toggleAllRowsSelected: (value?: boolean) => void; - getToggleAllRowsSelectedProps: ( - props?: Partial, - ) => TableToggleAllRowsSelectedProps; - getToggleAllPageRowsSelectedProps: ( - props?: Partial, - ) => TableToggleAllRowsSelectedProps; - isAllRowsSelected: boolean; - selectedFlatRows: Array>; -} - -export interface UseRowSelectRowProps> { - isSelected: boolean; - isSomeSelected: boolean; - toggleRowSelected: (set?: boolean) => void; - getToggleRowSelectedProps: ( - props?: Partial, - ) => TableToggleRowsSelectedProps; -} - -//#endregion - -//#region useRowState -export function useRowState = {}>( - hooks: Hooks, -): void; - -export namespace useRowState { - const pluginName = 'useRowState'; -} - -export type UseRowStateOptions> = Partial<{ - initialRowStateAccessor: (row: Row) => UseRowStateLocalState; - getResetRowStateDeps: (instance: TableInstance) => any[]; - autoResetRowState?: boolean | undefined; -}>; - -export interface UseRowStateState> { - rowState: Record }>; -} - -export interface UseRowStateInstanceProps> { - setRowState: (rowPath: string[], updater: UseRowUpdater) => void; - setCellState: ( - rowPath: string[], - columnId: IdType, - updater: UseRowUpdater, - ) => void; -} - -export interface UseRowStateRowProps> { - state: UseRowStateLocalState; - setState: (updater: UseRowUpdater) => void; -} - -export interface UseRowStateCellProps> { - state: UseRowStateLocalState; - setState: (updater: UseRowUpdater) => void; -} - -export type UseRowUpdater = T | ((prev: T) => T); -export type UseRowStateLocalState< - D extends Record, - T = unknown, -> = Record, T>; -//#endregion - -//#region useSortBy -export function useSortBy = {}>( - hooks: Hooks, -): void; - -export namespace useSortBy { - const pluginName = 'useSortBy'; -} - -export interface TableSortByToggleProps { - title?: string | undefined; - style?: CSSProperties | undefined; - onClick?: ((e: MouseEvent) => void) | undefined; -} - -export type UseSortByOptions> = Partial<{ - manualSortBy: boolean; - disableSortBy: boolean; - defaultCanSort: boolean; - disableMultiSort: boolean; - isMultiSortEvent: (e: MouseEvent) => boolean; - maxMultiSortColCount: number; - disableSortRemove: boolean; - disabledMultiRemove: boolean; - orderByFn: ( - rows: Array>, - sortFns: Array>, - directions: boolean[], - ) => Array>; - sortTypes: Record>; - autoResetSortBy?: boolean | undefined; -}>; - -export interface UseSortByHooks> { - getSortByToggleProps: Array>; -} - -export interface UseSortByState> { - sortBy: Array>; -} - -export type UseSortByColumnOptions> = - Partial<{ - defaultCanSort: boolean; - disableSortBy: boolean; - sortDescFirst: boolean; - sortInverted: boolean; - sortType: SortByFn | DefaultSortTypes | string; - }>; - -export interface UseSortByInstanceProps> { - rows: Array>; - preSortedRows: Array>; - setSortBy: (sortBy: Array>) => void; - toggleSortBy: ( - columnId: IdType, - descending?: boolean, - isMulti?: boolean, - ) => void; -} - -export interface UseSortByColumnProps> { - canSort: boolean; - toggleSortBy: (descending?: boolean, multi?: boolean) => void; - getSortByToggleProps: ( - props?: Partial, - ) => TableSortByToggleProps; - clearSortBy: () => void; - isSorted: boolean; - sortedIndex: number; - isSortedDesc: boolean | undefined; -} - -export type OrderByFn> = ( - rowA: Row, - rowB: Row, -) => number; -export type SortByFn> = ( - rowA: Row, - rowB: Row, - columnId: IdType, - desc?: boolean, -) => number; - -export type DefaultSortTypes = - | 'alphanumeric' - | 'datetime' - | 'basic' - | 'string' - | 'number'; - -export interface SortingRule { - id: IdType; - desc?: boolean | undefined; -} - -//#endregion - -// Additional API -export const actions: Record; -export type ActionType = { type: string } & Record; -export const defaultColumn: Partial & Record; - -// Helpers -export type StringKey = Extract; -export type IdType = StringKey | string; -export type CellValue = V; - -export type Renderer = - | ComponentType - | ReactElement - | string - | number - | ReactFragment; - -export interface PluginHook> { - (hooks: Hooks): void; - pluginName?: string | undefined; -} - -export type TableDispatch = (action: A) => void; - -// utils -export function defaultOrderByFn = {}>( - arr: Array>, - funcs: Array>, - dirs: boolean[], -): Array>; - -export function defaultGroupByFn = {}>( - rows: Array>, - columnId: IdType, -): Record>>; - -export function makePropGetter(hooks: Hooks, ...meta: any[]): any; - -export function reduceHooks( - hooks: Hooks, - initial: T, - ...args: any[] -): T; - -export function loopHooks(hooks: Hooks, ...args: any[]): void; - -export function ensurePluginOrder = {}>( - plugins: Array>, - befores: string[], - pluginName: string, -): void; - -export function functionalUpdate = {}>( - updater: any, - old: Partial>, -): Partial>; - -export function useGetLatest(obj: T): () => T; - -export function safeUseLayoutEffect( - effect: EffectCallback, - deps?: DependencyList, -): void; - -export function useMountedLayoutEffect( - effect: EffectCallback, - deps?: DependencyList, -): void; - -export function useAsyncDebounce any>( - defaultFn: F, - defaultWait?: number, -): F; - -export function makeRenderer( - instance: TableInstance, - column: ColumnInstance, - meta?: any, -): ReactElement; - -////////////////////////////////////////////////////////////////////////////////////////////////// -// Custom Additions (parts from the old file called react-table-config.ts) - -export type FieldType = 'text' | 'number' | 'date' | string; - -export type CellRendererProps = {}> = { - /** - * Cell HTML props passed from the Table. - */ - cellElementProps: TableCellProps; - /** - * Table specific cell props like `column`, `row`. - */ - cellProps: CellProps; - /** - * Cell's content. - */ - children: React.ReactNode; - /** - * Function that returns whether the cell is disabled. - */ - isDisabled?: (rowData: D) => boolean; -}; From 61590ae267b12f4e5c88c897ad5c0146de8c85c5 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Wed, 30 Aug 2023 14:56:38 -0400 Subject: [PATCH 062/196] Corrected leftover paths --- packages/itwinui-react/src/core/Table/Table.tsx | 4 ++-- packages/itwinui-react/src/core/Table/filters/types.ts | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/itwinui-react/src/core/Table/Table.tsx b/packages/itwinui-react/src/core/Table/Table.tsx index a275ff5e7de..452ec61b4fa 100644 --- a/packages/itwinui-react/src/core/Table/Table.tsx +++ b/packages/itwinui-react/src/core/Table/Table.tsx @@ -13,7 +13,7 @@ import type { ActionType, TableInstance, Column, -} from './types/react-table-objects.js'; +} from './types/react-table-types.js'; import { actions as TableActions, useFlexLayout, @@ -25,7 +25,7 @@ import { usePagination, useColumnOrder, useGlobalFilter, -} from './types/react-table-objects.js'; +} from './types/react-table-types.js'; import { ProgressRadial } from '../ProgressIndicators/index.js'; import { useGlobals, diff --git a/packages/itwinui-react/src/core/Table/filters/types.ts b/packages/itwinui-react/src/core/Table/filters/types.ts index a0dee8fcbd8..dc02c40769f 100644 --- a/packages/itwinui-react/src/core/Table/filters/types.ts +++ b/packages/itwinui-react/src/core/Table/filters/types.ts @@ -7,7 +7,7 @@ import type { FilterProps, FilterType, HeaderGroup, -} from '../types/react-table-objects.js'; +} from '../types/react-table-types.js'; export interface TableFilterValue> { /** From 034ef1d5355c271e07dedec1319498c97aee4658 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Wed, 30 Aug 2023 15:23:03 -0400 Subject: [PATCH 063/196] Added paths to compilerOptions in tsconfig.json so that we can import react-table itself instead of the path to the types file --- .../src/core/Table/types/react-table-types.d.ts | 4 ++++ packages/itwinui-react/tsconfig.json | 6 +++++- 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/packages/itwinui-react/src/core/Table/types/react-table-types.d.ts b/packages/itwinui-react/src/core/Table/types/react-table-types.d.ts index 5db77a15e65..5aab33133c3 100644 --- a/packages/itwinui-react/src/core/Table/types/react-table-types.d.ts +++ b/packages/itwinui-react/src/core/Table/types/react-table-types.d.ts @@ -38,6 +38,8 @@ import type { import type { TableFilterProps, TableFilterValue } from '../index.js'; import type { CommonProps } from '../../utils/props.js'; +declare module 'react-table' { + export const testingVar = 0; // export {}; @@ -1321,3 +1323,5 @@ export type CellRendererProps = {}> = { */ isDisabled?: (rowData: D) => boolean; }; + +} \ No newline at end of file diff --git a/packages/itwinui-react/tsconfig.json b/packages/itwinui-react/tsconfig.json index e0fbdb42edc..9f48d93b53c 100644 --- a/packages/itwinui-react/tsconfig.json +++ b/packages/itwinui-react/tsconfig.json @@ -21,7 +21,11 @@ "skipLibCheck": true, "isolatedModules": true, "verbatimModuleSyntax": true, - "noErrorTruncation": true + "noErrorTruncation": true, + "baseUrl": ".", + "paths": { + "react-table": ["src/core/Table/types/react-table-types.d.ts"] + } }, // "include": ["src"], "exclude": ["node_modules", "cjs/**/*", "esm/**/*"] From 23c37e1af7adb6233796c20148844fb1c51edb07 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Wed, 30 Aug 2023 15:25:23 -0400 Subject: [PATCH 064/196] Added comment explanation --- packages/itwinui-react/tsconfig.json | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/itwinui-react/tsconfig.json b/packages/itwinui-react/tsconfig.json index 9f48d93b53c..9e3718b935f 100644 --- a/packages/itwinui-react/tsconfig.json +++ b/packages/itwinui-react/tsconfig.json @@ -24,6 +24,7 @@ "noErrorTruncation": true, "baseUrl": ".", "paths": { + // Since we don't depend on `@types/react-table`, we need to provide the types for it. "react-table": ["src/core/Table/types/react-table-types.d.ts"] } }, From 3abee9fe4418da4076fe923755c76d3890c4b9e6 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Wed, 30 Aug 2023 15:30:36 -0400 Subject: [PATCH 065/196] Reformat file --- .../core/Table/types/react-table-types.d.ts | 2457 +++++++++-------- 1 file changed, 1237 insertions(+), 1220 deletions(-) diff --git a/packages/itwinui-react/src/core/Table/types/react-table-types.d.ts b/packages/itwinui-react/src/core/Table/types/react-table-types.d.ts index 5aab33133c3..08823b85432 100644 --- a/packages/itwinui-react/src/core/Table/types/react-table-types.d.ts +++ b/packages/itwinui-react/src/core/Table/types/react-table-types.d.ts @@ -39,1289 +39,1306 @@ import type { TableFilterProps, TableFilterValue } from '../index.js'; import type { CommonProps } from '../../utils/props.js'; declare module 'react-table' { + export const testingVar = 0; + // export {}; -export const testingVar = 0; -// export {}; - -/** - * The empty definitions of below provides a base definition for the parts used by useTable, that can then be extended in the users code. - * - * @example - * export interface TableOptions = {}}> - * extends - * UseExpandedOptions, - * UseFiltersOptions {} - * see https://gist.github.com/ggascoigne/646e14c9d54258e40588a13aabf0102d for more details - */ -export interface TableOptions> - extends Omit, 'data' | 'columns'>, - UseRowSelectOptions, - UseExpandedOptions, - UseFiltersOptions, - // UseGroupByOptions, - UsePaginationOptions, - UseGlobalFiltersOptions, - UseGlobalFiltersColumnOptions, - Omit, 'disableResizing'>, - // UseRowStateOptions, - UseSortByOptions { /** - * List of columns. + * The empty definitions of below provides a base definition for the parts used by useTable, that can then be extended in the users code. * - * Should not have a top-level `Header` or a `columns` sub-property. They are only allowed to be passed for backwards compatibility. - * See [migration guide](https://github.com/iTwin/iTwinUI/wiki/iTwinUI-react-v2-migration-guide#breaking-changes). - */ - columns: Array>; - /** - * Table data list. - * Must be memoized. - * - * Supports expandable sub-rows using the `subRows` field in data entries. - * If some rows don't have sub-data, it is recommended to pass an empty array to `subRows` for consistent spacing. - */ - data: D[]; - /** - * Column's resize mode. - * - `fit` - when resizing it affects current and the next column, - * e.g. when increasing width of current column, next column's width will decrease. - * - `expand` - when resizing it affects only the current column, - * e.g. when increasing width of the current column, next column's width remains the same. - * @default 'fit' - */ - columnResizeMode?: 'fit' | 'expand'; -} - -export interface TableInstance = {}> - extends Omit, 'columns' | 'pageCount'>, - UseTableInstanceProps, - UseColumnOrderInstanceProps, - UseExpandedInstanceProps, - UseFiltersInstanceProps, - UseGlobalFiltersInstanceProps, - UseGroupByInstanceProps, - UsePaginationInstanceProps, - UseRowSelectInstanceProps, - UseRowStateInstanceProps, - UseSortByInstanceProps { - initialRows: Row[]; - columnResizeMode: TableOptions['columnResizeMode']; - tableWidth: number; -} - -export interface TableState = {}> - extends UseColumnOrderState, - UseExpandedState, - UseFiltersState, - UseGlobalFiltersState, - UseGroupByState, - UsePaginationState, - UseRowSelectState, - UseRowStateState, - UseSortByState { - hiddenColumns?: Array> | undefined; - - // UseResizeColumnsState with fixed typings - columnResizing: { - startX?: number; - columnWidth?: number; - nextColumnWidth?: number; - headerIdWidths?: Array<[string, number]>; - nextHeaderIdWidths?: Array<[string, number]>; - columnWidths: Record; - isResizingColumn?: string; - }; - isTableResizing?: boolean; - columnReorderStartIndex: number; - sticky: { - isScrolledToRight?: boolean; - isScrolledToLeft?: boolean; - }; - lastSelectedRowId?: string; -} - -export interface Hooks = {}> - extends UseTableHooks, - UseExpandedHooks, - UseGroupByHooks, - UseRowSelectHooks, - UseSortByHooks {} - -export interface Cell = {}, V = any> - extends UseTableCellProps, - UseGroupByCellProps, - UseRowStateCellProps {} - -export interface ColumnInterface = {}> - extends UseTableColumnOptions, - // UseGroupByColumnOptions, - UseSortByColumnOptions, - UseFiltersColumnOptions, - UseResizeColumnsColumnOptions, - UseGlobalFiltersColumnOptions { - /** - * Custom class name applied to header column cell. - */ - columnClassName?: string; - /** - * Custom class name applied to each column's cell. - */ - cellClassName?: string; - /** - * Type of the data in cell. Used for manual filtering. - */ - fieldType?: FieldType; - /** - * Filter component used as a column filter. Should use filters from `tableFilters`. - */ - Filter?: Renderer> | Renderer>; - /** - * String value or custom function to use for filtering. - * Possible string values: `text`, `exactText`, `exactTextCase`, `includes`, `includesAll`, `exact`, `equals`, `between`. - * More info about these filters: https://github.com/tannerlinsley/react-table/blob/master/src/filterTypes.js - */ - filter?: FilterType | DefaultFilterTypes | string; - /** - * Function that should return whole cell element not only the content. - * Must be memoized. * @example - * { - * Header: 'Name', - * accessor: 'name', - * cellRenderer: (props) => , - * } + * export interface TableOptions = {}}> + * extends + * UseExpandedOptions, + * UseFiltersOptions {} + * see https://gist.github.com/ggascoigne/646e14c9d54258e40588a13aabf0102d for more details */ - cellRenderer?: (props: CellRendererProps) => React.ReactNode; - /** - * If true, column can't be reordered. - * @default false - */ - disableReordering?: boolean; - /** - * If true, column's visibility cannot be toggled. - * @default false - */ - disableToggleVisibility?: boolean; - /** - * Side on which column should be sticked to. - */ - sticky?: 'left' | 'right'; -} - -export interface ColumnInterfaceBasedOnValue< - D extends Record = {}, - V = any, -> { - Cell?: Renderer> | undefined; -} - -export interface ColumnGroupInterface> { - // columns: Array>; -} - -export type ColumnGroup = {}> = - ColumnInterface & - ColumnGroupInterface & - ( - | { Header: string } - | ({ id: IdType } & { - Header: Renderer>; - }) - ) & { accessor?: Accessor | undefined }; // Not used, but needed for backwards compatibility - -type ValueOf = T[keyof T]; - -// The accessors like `foo.bar` are not supported, use functions instead -export type ColumnWithStrictAccessor = {}> = - ColumnInterface & - ValueOf<{ - [K in keyof D]: { - accessor: K; - // Cell?: Renderer> | undefined; - } & ColumnInterfaceBasedOnValue; - // } & ColumnInterfaceBasedOnValue; - }>; - -export type ColumnWithLooseAccessor = {}> = - ColumnInterface & - ColumnInterfaceBasedOnValue & - ( - | { Header: string } - | { id: IdType } - | { accessor: keyof D extends never ? IdType : never } - ) & { - accessor?: - | (keyof D extends never ? IdType | Accessor : Accessor) - | undefined; + export interface TableOptions> + extends Omit, 'data' | 'columns'>, + UseRowSelectOptions, + UseExpandedOptions, + UseFiltersOptions, + // UseGroupByOptions, + UsePaginationOptions, + UseGlobalFiltersOptions, + UseGlobalFiltersColumnOptions, + Omit, 'disableResizing'>, + // UseRowStateOptions, + UseSortByOptions { + /** + * List of columns. + * + * Should not have a top-level `Header` or a `columns` sub-property. They are only allowed to be passed for backwards compatibility. + * See [migration guide](https://github.com/iTwin/iTwinUI/wiki/iTwinUI-react-v2-migration-guide#breaking-changes). + */ + columns: Array>; + /** + * Table data list. + * Must be memoized. + * + * Supports expandable sub-rows using the `subRows` field in data entries. + * If some rows don't have sub-data, it is recommended to pass an empty array to `subRows` for consistent spacing. + */ + data: D[]; + /** + * Column's resize mode. + * - `fit` - when resizing it affects current and the next column, + * e.g. when increasing width of current column, next column's width will decrease. + * - `expand` - when resizing it affects only the current column, + * e.g. when increasing width of the current column, next column's width remains the same. + * @default 'fit' + */ + columnResizeMode?: 'fit' | 'expand'; + } + + export interface TableInstance = {}> + extends Omit, 'columns' | 'pageCount'>, + UseTableInstanceProps, + UseColumnOrderInstanceProps, + UseExpandedInstanceProps, + UseFiltersInstanceProps, + UseGlobalFiltersInstanceProps, + UseGroupByInstanceProps, + UsePaginationInstanceProps, + UseRowSelectInstanceProps, + UseRowStateInstanceProps, + UseSortByInstanceProps { + initialRows: Row[]; + columnResizeMode: TableOptions['columnResizeMode']; + tableWidth: number; + } + + export interface TableState = {}> + extends UseColumnOrderState, + UseExpandedState, + UseFiltersState, + UseGlobalFiltersState, + UseGroupByState, + UsePaginationState, + UseRowSelectState, + UseRowStateState, + UseSortByState { + hiddenColumns?: Array> | undefined; + + // UseResizeColumnsState with fixed typings + columnResizing: { + startX?: number; + columnWidth?: number; + nextColumnWidth?: number; + headerIdWidths?: Array<[string, number]>; + nextHeaderIdWidths?: Array<[string, number]>; + columnWidths: Record; + isResizingColumn?: string; }; + isTableResizing?: boolean; + columnReorderStartIndex: number; + sticky: { + isScrolledToRight?: boolean; + isScrolledToLeft?: boolean; + }; + lastSelectedRowId?: string; + } + + export interface Hooks = {}> + extends UseTableHooks, + UseExpandedHooks, + UseGroupByHooks, + UseRowSelectHooks, + UseSortByHooks {} + + export interface Cell = {}, V = any> + extends UseTableCellProps, + UseGroupByCellProps, + UseRowStateCellProps {} + + export interface ColumnInterface = {}> + extends UseTableColumnOptions, + // UseGroupByColumnOptions, + UseSortByColumnOptions, + UseFiltersColumnOptions, + UseResizeColumnsColumnOptions, + UseGlobalFiltersColumnOptions { + /** + * Custom class name applied to header column cell. + */ + columnClassName?: string; + /** + * Custom class name applied to each column's cell. + */ + cellClassName?: string; + /** + * Type of the data in cell. Used for manual filtering. + */ + fieldType?: FieldType; + /** + * Filter component used as a column filter. Should use filters from `tableFilters`. + */ + Filter?: Renderer> | Renderer>; + /** + * String value or custom function to use for filtering. + * Possible string values: `text`, `exactText`, `exactTextCase`, `includes`, `includesAll`, `exact`, `equals`, `between`. + * More info about these filters: https://github.com/tannerlinsley/react-table/blob/master/src/filterTypes.js + */ + filter?: FilterType | DefaultFilterTypes | string; + /** + * Function that should return whole cell element not only the content. + * Must be memoized. + * @example + * { + * Header: 'Name', + * accessor: 'name', + * cellRenderer: (props) => , + * } + */ + cellRenderer?: (props: CellRendererProps) => React.ReactNode; + /** + * If true, column can't be reordered. + * @default false + */ + disableReordering?: boolean; + /** + * If true, column's visibility cannot be toggled. + * @default false + */ + disableToggleVisibility?: boolean; + /** + * Side on which column should be sticked to. + */ + sticky?: 'left' | 'right'; + } + + export interface ColumnInterfaceBasedOnValue< + D extends Record = {}, + V = any, + > { + Cell?: Renderer> | undefined; + } + + export interface ColumnGroupInterface> { + // columns: Array>; + } + + export type ColumnGroup = {}> = + ColumnInterface & + ColumnGroupInterface & + ( + | { Header: string } + | ({ id: IdType } & { + Header: Renderer>; + }) + ) & { accessor?: Accessor | undefined }; // Not used, but needed for backwards compatibility + + type ValueOf = T[keyof T]; + + // The accessors like `foo.bar` are not supported, use functions instead + export type ColumnWithStrictAccessor = {}> = + ColumnInterface & + ValueOf<{ + [K in keyof D]: { + accessor: K; + // Cell?: Renderer> | undefined; + } & ColumnInterfaceBasedOnValue; + // } & ColumnInterfaceBasedOnValue; + }>; + + export type ColumnWithLooseAccessor = {}> = + ColumnInterface & + ColumnInterfaceBasedOnValue & + ( + | { Header: string } + | { id: IdType } + | { accessor: keyof D extends never ? IdType : never } + ) & { + accessor?: + | (keyof D extends never ? IdType | Accessor : Accessor) + | undefined; + }; + + export type Column = {}> = + // ColumnWithStrictAccessor; + ColumnGroup | ColumnWithLooseAccessor | ColumnWithStrictAccessor; + + export interface ColumnInstance = {}> + extends Omit, 'id'>, + ColumnInterfaceBasedOnValue, + UseTableColumnProps, + UseFiltersColumnProps, + UseGroupByColumnProps, + UseResizeColumnsColumnProps, + UseSortByColumnProps { + originalWidth: number; + resizeWidth?: number; + isResizerVisible?: boolean; + getDragAndDropProps: () => TableKeyedProps; + originalSticky?: 'left' | 'right' | 'none'; + } + + export interface HeaderGroup = {}> + extends ColumnInstance, + UseTableHeaderGroupProps {} + + export interface Row = {}> + extends UseTableRowProps, + UseExpandedRowProps, + UseGroupByRowProps, + UseRowSelectRowProps, + UseRowStateRowProps { + initialSubRows: Row[]; + } + + export interface TableCommonProps { + style?: CSSProperties | undefined; + className?: string | undefined; + role?: string | undefined; + } + + export interface TableProps extends TableCommonProps {} + + export interface TableBodyProps extends TableCommonProps {} + + export interface TableKeyedProps extends TableCommonProps { + key: React.Key; + } + + export interface TableHeaderGroupProps extends TableKeyedProps {} + + export interface TableFooterGroupProps extends TableKeyedProps {} + + export interface TableHeaderProps extends TableKeyedProps {} + + export interface TableFooterProps extends TableKeyedProps {} + + export interface TableRowProps extends TableKeyedProps {} + + export interface TableCellProps extends TableKeyedProps {} + + export interface TableToggleCommonProps extends TableCommonProps { + onChange?: ((e: ChangeEvent) => void) | undefined; + checked?: boolean | undefined; + title?: string | undefined; + indeterminate?: boolean | undefined; + } + + export interface MetaBase> { + instance: TableInstance; + userProps: any; + } + + // inspired by ExtendState in https://github.com/reduxjs/redux/blob/master/src/types/store.ts + export type Meta< + D extends Record, + Extension = never, + M = MetaBase, + > = [Extension] extends [never] ? M : M & Extension; + + //#region useTable + export function useTable = {}>( + options: TableOptions, + ...plugins: Array> + ): TableInstance; -export type Column = {}> = - // ColumnWithStrictAccessor; - ColumnGroup | ColumnWithLooseAccessor | ColumnWithStrictAccessor; - -export interface ColumnInstance = {}> - extends Omit, 'id'>, - ColumnInterfaceBasedOnValue, - UseTableColumnProps, - UseFiltersColumnProps, - UseGroupByColumnProps, - UseResizeColumnsColumnProps, - UseSortByColumnProps { - originalWidth: number; - resizeWidth?: number; - isResizerVisible?: boolean; - getDragAndDropProps: () => TableKeyedProps; - originalSticky?: 'left' | 'right' | 'none'; -} - -export interface HeaderGroup = {}> - extends ColumnInstance, - UseTableHeaderGroupProps {} - -export interface Row = {}> - extends UseTableRowProps, - UseExpandedRowProps, - UseGroupByRowProps, - UseRowSelectRowProps, - UseRowStateRowProps { - initialSubRows: Row[]; -} - -export interface TableCommonProps { - style?: CSSProperties | undefined; - className?: string | undefined; - role?: string | undefined; -} - -export interface TableProps extends TableCommonProps {} - -export interface TableBodyProps extends TableCommonProps {} - -export interface TableKeyedProps extends TableCommonProps { - key: React.Key; -} - -export interface TableHeaderGroupProps extends TableKeyedProps {} - -export interface TableFooterGroupProps extends TableKeyedProps {} - -export interface TableHeaderProps extends TableKeyedProps {} - -export interface TableFooterProps extends TableKeyedProps {} - -export interface TableRowProps extends TableKeyedProps {} - -export interface TableCellProps extends TableKeyedProps {} - -export interface TableToggleCommonProps extends TableCommonProps { - onChange?: ((e: ChangeEvent) => void) | undefined; - checked?: boolean | undefined; - title?: string | undefined; - indeterminate?: boolean | undefined; -} - -export interface MetaBase> { - instance: TableInstance; - userProps: any; -} - -// inspired by ExtendState in https://github.com/reduxjs/redux/blob/master/src/types/store.ts -export type Meta< - D extends Record, - Extension = never, - M = MetaBase, -> = [Extension] extends [never] ? M : M & Extension; - -//#region useTable -export function useTable = {}>( - options: TableOptions, - ...plugins: Array> -): TableInstance; - -/** - * NOTE: To use custom options, use "Interface Merging" to add the custom options - */ -export type UseTableOptions> = { - columns: ReadonlyArray>; - data: readonly D[]; -} & Partial<{ - initialState: Partial>; - stateReducer: ( - newState: TableState, - action: ActionType, - previousState: TableState, - instance?: TableInstance, - ) => TableState; - useControlledState: (state: TableState, meta: Meta) => TableState; - defaultColumn: Partial>; - getSubRows: (originalRow: D, relativeIndex: number) => D[]; - getRowId: (originalRow: D, relativeIndex: number, parent?: Row) => string; - autoResetHiddenColumns: boolean; -}>; - -export type PropGetter< - D extends Record, - Props, - T extends object = never, - P = Partial, -> = ((props: P, meta: Meta) => P | P[]) | P | P[]; - -export type TablePropGetter> = PropGetter< - D, - TableProps ->; - -export type TableBodyPropGetter> = PropGetter< - D, - TableBodyProps ->; - -export type HeaderPropGetter> = PropGetter< - D, - TableHeaderProps, - { column: HeaderGroup } ->; - -export type FooterGroupPropGetter> = - PropGetter }>; - -export type HeaderGroupPropGetter> = - PropGetter }>; - -export type FooterPropGetter> = PropGetter< - D, - TableFooterProps, - { column: HeaderGroup } ->; - -export type RowPropGetter> = PropGetter< - D, - TableRowProps, - { row: Row } ->; - -export type CellPropGetter> = PropGetter< - D, - TableCellProps, - { cell: Cell } ->; - -export interface ReducerTableState> - extends TableState, - Record {} - -export interface UseTableHooks> - extends Record { - useOptions: Array< - (options: TableOptions, args: TableOptions) => TableOptions - >; - stateReducers: Array< - ( + /** + * NOTE: To use custom options, use "Interface Merging" to add the custom options + */ + export type UseTableOptions> = { + columns: ReadonlyArray>; + data: readonly D[]; + } & Partial<{ + initialState: Partial>; + stateReducer: ( newState: TableState, action: ActionType, - previousState?: TableState, + previousState: TableState, instance?: TableInstance, - ) => ReducerTableState | undefined - >; - columns: Array< - (columns: Array>, meta: Meta) => Array> - >; - columnsDeps: Array<(deps: any[], meta: Meta) => any[]>; - allColumns: Array< - (allColumns: Array>, meta: Meta) => Array> - >; - allColumnsDeps: Array<(deps: any[], meta: Meta) => any[]>; - visibleColumns: Array< - (allColumns: Array>, meta: Meta) => Array> - >; - visibleColumnsDeps: Array<(deps: any[], meta: Meta) => any[]>; - headerGroups: Array< - (allColumns: Array>, meta: Meta) => Array> - >; - headerGroupsDeps: Array<(deps: any[], meta: Meta) => any[]>; - useInstanceBeforeDimensions: Array<(instance: TableInstance) => void>; - useInstance: Array<(instance: TableInstance) => void>; - prepareRow: Array<(row: Row, meta: Meta) => void>; - useControlledState: Array< - (state: TableState, meta: Meta) => TableState + ) => TableState; + useControlledState: (state: TableState, meta: Meta) => TableState; + defaultColumn: Partial>; + getSubRows: (originalRow: D, relativeIndex: number) => D[]; + getRowId: ( + originalRow: D, + relativeIndex: number, + parent?: Row, + ) => string; + autoResetHiddenColumns: boolean; + }>; + + export type PropGetter< + D extends Record, + Props, + T extends object = never, + P = Partial, + > = ((props: P, meta: Meta) => P | P[]) | P | P[]; + + export type TablePropGetter> = PropGetter< + D, + TableProps >; - getTableProps: Array>; - getTableBodyProps: Array>; - getHeaderGroupProps: Array>; - getFooterGroupProps: Array>; - getHeaderProps: Array>; - getFooterProps: Array>; - getRowProps: Array>; - getCellProps: Array>; - useFinalInstance: Array<(instance: TableInstance) => void>; -} + export type TableBodyPropGetter> = + PropGetter; -export interface UseTableColumnOptions> { - id?: IdType | undefined; - Header?: Renderer> | undefined; - Footer?: Renderer> | undefined; - width?: number | string | undefined; - minWidth?: number | undefined; - maxWidth?: number | undefined; -} + export type HeaderPropGetter> = PropGetter< + D, + TableHeaderProps, + { column: HeaderGroup } + >; -type UpdateHiddenColumns> = ( - oldHidden: Array>, -) => Array>; - -export interface TableToggleHideAllColumnProps extends TableToggleCommonProps {} - -export interface UseTableInstanceProps> { - state: TableState; - plugins: Array>; - dispatch: TableDispatch; - columns: Array>; - allColumns: Array>; - visibleColumns: Array>; - headerGroups: Array>; - footerGroups: Array>; - headers: Array>; - flatHeaders: Array>; - rows: Array>; - rowsById: Record>; - getTableProps: (propGetter?: TablePropGetter) => TableProps; - getTableBodyProps: (propGetter?: TableBodyPropGetter) => TableBodyProps; - prepareRow: (row: Row) => void; - flatRows: Array>; - totalColumnsWidth: number; - allColumnsHidden: boolean; - toggleHideColumn: (columnId: IdType, value?: boolean) => void; - setHiddenColumns: (param: Array> | UpdateHiddenColumns) => void; - toggleHideAllColumns: (value?: boolean) => void; - getToggleHideAllColumnsProps: ( - props?: Partial, - ) => TableToggleHideAllColumnProps; - getHooks: () => Hooks; -} + export type FooterGroupPropGetter> = + PropGetter }>; -export interface UseTableHeaderGroupProps> { - headers: Array>; - getHeaderGroupProps: ( - propGetter?: HeaderGroupPropGetter, - ) => TableHeaderProps; - getFooterGroupProps: ( - propGetter?: FooterGroupPropGetter, - ) => TableFooterProps; - totalHeaderCount: number; // not documented -} + export type HeaderGroupPropGetter> = + PropGetter }>; -export interface UseTableColumnProps> { - id: IdType; - columns?: Array> | undefined; - isVisible: boolean; - render: (type: 'Header' | 'Footer' | string, props?: object) => ReactNode; - totalLeft: number; - totalWidth: number; - getHeaderProps: (propGetter?: HeaderPropGetter) => TableHeaderProps; - getFooterProps: (propGetter?: FooterPropGetter) => TableFooterProps; - toggleHidden: (value?: boolean) => void; - parent?: ColumnInstance | undefined; // not documented - getToggleHiddenProps: (userProps?: any) => any; - depth: number; // not documented - placeholderOf?: ColumnInstance | undefined; -} + export type FooterPropGetter> = PropGetter< + D, + TableFooterProps, + { column: HeaderGroup } + >; -export interface UseTableRowProps> { - cells: Array>; - allCells: Array>; - values: Record, CellValue>; - getRowProps: (propGetter?: RowPropGetter) => TableRowProps; - index: number; - original: D; - id: string; - subRows: Array>; -} + export type RowPropGetter> = PropGetter< + D, + TableRowProps, + { row: Row } + >; -export interface UseTableCellProps, V = any> { - column: ColumnInstance; - row: Row; - value: CellValue; - getCellProps: (propGetter?: CellPropGetter) => TableCellProps; - render: (type: 'Cell' | string, userProps?: object) => ReactNode; -} + export type CellPropGetter> = PropGetter< + D, + TableCellProps, + { cell: Cell } + >; -export type HeaderProps> = - TableInstance & { + export interface ReducerTableState> + extends TableState, + Record {} + + export interface UseTableHooks> + extends Record { + useOptions: Array< + (options: TableOptions, args: TableOptions) => TableOptions + >; + stateReducers: Array< + ( + newState: TableState, + action: ActionType, + previousState?: TableState, + instance?: TableInstance, + ) => ReducerTableState | undefined + >; + columns: Array< + (columns: Array>, meta: Meta) => Array> + >; + columnsDeps: Array<(deps: any[], meta: Meta) => any[]>; + allColumns: Array< + (allColumns: Array>, meta: Meta) => Array> + >; + allColumnsDeps: Array<(deps: any[], meta: Meta) => any[]>; + visibleColumns: Array< + (allColumns: Array>, meta: Meta) => Array> + >; + visibleColumnsDeps: Array<(deps: any[], meta: Meta) => any[]>; + headerGroups: Array< + ( + allColumns: Array>, + meta: Meta, + ) => Array> + >; + headerGroupsDeps: Array<(deps: any[], meta: Meta) => any[]>; + useInstanceBeforeDimensions: Array<(instance: TableInstance) => void>; + useInstance: Array<(instance: TableInstance) => void>; + prepareRow: Array<(row: Row, meta: Meta) => void>; + useControlledState: Array< + (state: TableState, meta: Meta) => TableState + >; + + getTableProps: Array>; + getTableBodyProps: Array>; + getHeaderGroupProps: Array>; + getFooterGroupProps: Array>; + getHeaderProps: Array>; + getFooterProps: Array>; + getRowProps: Array>; + getCellProps: Array>; + useFinalInstance: Array<(instance: TableInstance) => void>; + } + + export interface UseTableColumnOptions> { + id?: IdType | undefined; + Header?: Renderer> | undefined; + Footer?: Renderer> | undefined; + width?: number | string | undefined; + minWidth?: number | undefined; + maxWidth?: number | undefined; + } + + type UpdateHiddenColumns> = ( + oldHidden: Array>, + ) => Array>; + + export interface TableToggleHideAllColumnProps + extends TableToggleCommonProps {} + + export interface UseTableInstanceProps> { + state: TableState; + plugins: Array>; + dispatch: TableDispatch; + columns: Array>; + allColumns: Array>; + visibleColumns: Array>; + headerGroups: Array>; + footerGroups: Array>; + headers: Array>; + flatHeaders: Array>; + rows: Array>; + rowsById: Record>; + getTableProps: (propGetter?: TablePropGetter) => TableProps; + getTableBodyProps: (propGetter?: TableBodyPropGetter) => TableBodyProps; + prepareRow: (row: Row) => void; + flatRows: Array>; + totalColumnsWidth: number; + allColumnsHidden: boolean; + toggleHideColumn: (columnId: IdType, value?: boolean) => void; + setHiddenColumns: ( + param: Array> | UpdateHiddenColumns, + ) => void; + toggleHideAllColumns: (value?: boolean) => void; + getToggleHideAllColumnsProps: ( + props?: Partial, + ) => TableToggleHideAllColumnProps; + getHooks: () => Hooks; + } + + export interface UseTableHeaderGroupProps> { + headers: Array>; + getHeaderGroupProps: ( + propGetter?: HeaderGroupPropGetter, + ) => TableHeaderProps; + getFooterGroupProps: ( + propGetter?: FooterGroupPropGetter, + ) => TableFooterProps; + totalHeaderCount: number; // not documented + } + + export interface UseTableColumnProps> { + id: IdType; + columns?: Array> | undefined; + isVisible: boolean; + render: (type: 'Header' | 'Footer' | string, props?: object) => ReactNode; + totalLeft: number; + totalWidth: number; + getHeaderProps: (propGetter?: HeaderPropGetter) => TableHeaderProps; + getFooterProps: (propGetter?: FooterPropGetter) => TableFooterProps; + toggleHidden: (value?: boolean) => void; + parent?: ColumnInstance | undefined; // not documented + getToggleHiddenProps: (userProps?: any) => any; + depth: number; // not documented + placeholderOf?: ColumnInstance | undefined; + } + + export interface UseTableRowProps> { + cells: Array>; + allCells: Array>; + values: Record, CellValue>; + getRowProps: (propGetter?: RowPropGetter) => TableRowProps; + index: number; + original: D; + id: string; + subRows: Array>; + } + + export interface UseTableCellProps< + D extends Record, + V = any, + > { column: ColumnInstance; - }; + row: Row; + value: CellValue; + getCellProps: (propGetter?: CellPropGetter) => TableCellProps; + render: (type: 'Cell' | string, userProps?: object) => ReactNode; + } + + export type HeaderProps> = + TableInstance & { + column: ColumnInstance; + }; + + export type FooterProps> = + TableInstance & { + column: ColumnInstance; + }; -export type FooterProps> = - TableInstance & { + export type CellProps< + D extends Record, + V = any, + > = TableInstance & { column: ColumnInstance; + row: Row; + cell: Cell; + value: CellValue; }; -export type CellProps< - D extends Record, - V = any, -> = TableInstance & { - column: ColumnInstance; - row: Row; - cell: Cell; - value: CellValue; -}; - -export type Accessor> = ( - originalRow: D, - index: number, - sub: { - subRows: D[]; - depth: number; - data: D[]; - }, -) => CellValue; - -//#endregion - -// Plugins - -//#region useAbsoluteLayout -export function useAbsoluteLayout = {}>( - hooks: Hooks, -): void; - -export namespace useAbsoluteLayout { - const pluginName = 'useAbsoluteLayout'; -} -//#endregion - -//#region useBlockLayout -export function useBlockLayout = {}>( - hooks: Hooks, -): void; - -export namespace useBlockLayout { - const pluginName = 'useBlockLayout'; -} -//#endregion - -//#region useColumnOrder -export function useColumnOrder = {}>( - hooks: Hooks, -): void; - -export namespace useColumnOrder { - const pluginName = 'useColumnOrder'; -} - -export interface UseColumnOrderState> { - columnOrder: Array>; -} - -export interface UseColumnOrderInstanceProps< - D extends Record, -> { - setColumnOrder: ( - updater: - | ((columnOrder: Array>) => Array>) - | Array>, - ) => void; -} - -//#endregion - -//#region useExpanded -export function useExpanded = {}>( - hooks: Hooks, -): void; - -export namespace useExpanded { - const pluginName = 'useExpanded'; -} - -export interface TableExpandedToggleProps extends TableKeyedProps {} - -export type UseExpandedOptions> = Partial<{ - manualExpandedKey: IdType; - paginateExpandedRows: boolean; - expandSubRows: boolean; - autoResetExpanded?: boolean | undefined; -}>; - -export interface UseExpandedHooks> { - getToggleRowsExpandedProps: Array>; - getToggleAllRowsExpandedProps: Array>; -} - -export interface UseExpandedState> { - expanded: Record, boolean>; -} - -export interface UseExpandedInstanceProps> { - preExpandedRows: Array>; - expandedRows: Array>; - rows: Array>; - expandedDepth: number; - isAllRowsExpanded: boolean; - toggleRowExpanded: (id: Array>, value?: boolean) => void; - toggleAllRowsExpanded: (value?: boolean) => void; -} - -export interface UseExpandedRowProps> { - isExpanded: boolean; - canExpand: boolean; - subRows: Array>; - toggleRowExpanded: (value?: boolean) => void; - getToggleRowExpandedProps: ( - props?: Partial, - ) => TableExpandedToggleProps; - depth: number; -} - -//#endregion + export type Accessor> = ( + originalRow: D, + index: number, + sub: { + subRows: D[]; + depth: number; + data: D[]; + }, + ) => CellValue; + + //#endregion + + // Plugins + + //#region useAbsoluteLayout + export function useAbsoluteLayout = {}>( + hooks: Hooks, + ): void; + + export namespace useAbsoluteLayout { + const pluginName = 'useAbsoluteLayout'; + } + //#endregion + + //#region useBlockLayout + export function useBlockLayout = {}>( + hooks: Hooks, + ): void; + + export namespace useBlockLayout { + const pluginName = 'useBlockLayout'; + } + //#endregion + + //#region useColumnOrder + export function useColumnOrder = {}>( + hooks: Hooks, + ): void; + + export namespace useColumnOrder { + const pluginName = 'useColumnOrder'; + } + + export interface UseColumnOrderState> { + columnOrder: Array>; + } + + export interface UseColumnOrderInstanceProps< + D extends Record, + > { + setColumnOrder: ( + updater: + | ((columnOrder: Array>) => Array>) + | Array>, + ) => void; + } + + //#endregion + + //#region useExpanded + export function useExpanded = {}>( + hooks: Hooks, + ): void; + + export namespace useExpanded { + const pluginName = 'useExpanded'; + } + + export interface TableExpandedToggleProps extends TableKeyedProps {} + + export type UseExpandedOptions> = Partial<{ + manualExpandedKey: IdType; + paginateExpandedRows: boolean; + expandSubRows: boolean; + autoResetExpanded?: boolean | undefined; + }>; -//#region useFilters -export function useFilters = {}>( - hooks: Hooks, -): void; + export interface UseExpandedHooks> { + getToggleRowsExpandedProps: Array>; + getToggleAllRowsExpandedProps: Array>; + } + + export interface UseExpandedState> { + expanded: Record, boolean>; + } + + export interface UseExpandedInstanceProps> { + preExpandedRows: Array>; + expandedRows: Array>; + rows: Array>; + expandedDepth: number; + isAllRowsExpanded: boolean; + toggleRowExpanded: (id: Array>, value?: boolean) => void; + toggleAllRowsExpanded: (value?: boolean) => void; + } + + export interface UseExpandedRowProps> { + isExpanded: boolean; + canExpand: boolean; + subRows: Array>; + toggleRowExpanded: (value?: boolean) => void; + getToggleRowExpandedProps: ( + props?: Partial, + ) => TableExpandedToggleProps; + depth: number; + } -export namespace useFilters { - const pluginName = 'useFilters'; -} + //#endregion -export type UseFiltersOptions> = Partial<{ - manualFilters: boolean; - disableFilters: boolean; - defaultCanFilter: boolean; - filterTypes: FilterTypes; - autoResetFilters?: boolean | undefined; -}>; + //#region useFilters + export function useFilters = {}>( + hooks: Hooks, + ): void; -export interface UseFiltersState> { - filters: Filters; -} + export namespace useFilters { + const pluginName = 'useFilters'; + } -export type UseFiltersColumnOptions> = - Partial<{ - Filter: Renderer>; + export type UseFiltersOptions> = Partial<{ + manualFilters: boolean; disableFilters: boolean; defaultCanFilter: boolean; - filter: FilterType | DefaultFilterTypes | string; - }>; - -export interface UseFiltersInstanceProps> { - preFilteredRows: Array>; - preFilteredFlatRows: Array>; - preFilteredRowsById: Record>; - filteredRows: Array>; - filteredFlatRows: Array>; - filteredRowsById: Record>; - rows: Array>; - flatRows: Array>; - rowsById: Record>; - setFilter: ( - columnId: IdType, - updater: ((filterValue: FilterValue) => FilterValue) | FilterValue, - ) => void; - setAllFilters: ( - updater: Filters | ((filters: Filters) => Filters), - ) => void; -} - -export interface UseFiltersColumnProps> { - canFilter: boolean; - setFilter: ( - updater: ((filterValue: FilterValue) => FilterValue) | FilterValue, - ) => void; - filterValue: FilterValue; - preFilteredRows: Array>; - filteredRows: Array>; -} - -export type FilterProps> = HeaderProps; -export type FilterValue = any; -export type Filters> = Array<{ - id: IdType; - value: FilterValue; -}>; -export type FilterTypes> = Record< - string, - FilterType ->; - -export type DefaultFilterTypes = - | 'text' - | 'exactText' - | 'exactTextCase' - | 'includes' - | 'includesAll' - | 'exact' - | 'equals' - | 'between'; - -export interface FilterType> { - ( - rows: Array>, - columnIds: Array>, - filterValue: FilterValue, - ): Array>; - - autoRemove?: ((filterValue: FilterValue) => boolean) | undefined; -} - -//#endregion - -//#region useFlexLayout -export function useFlexLayout = {}>( - hooks: Hooks, -): void; - -export namespace useFlexLayout { - const pluginName = 'useFlexLayout'; -} -//#endregion - -//#region useGridLayout -export function useGridLayout = {}>( - hooks: Hooks, -): void; - -export namespace useGridLayout { - const pluginName = 'useGridLayout'; -} -//#endregion - -//#region useGlobalFilter -export function useGlobalFilter = {}>( - hooks: Hooks, -): void; - -export namespace useGlobalFilter { - const pluginName = 'useGlobalFilter'; -} - -export type UseGlobalFiltersOptions> = - Partial<{ - globalFilter: - | (( - rows: Array>, - columnIds: Array>, - filterValue: any, - ) => Array>) - | string; - manualGlobalFilter: boolean; filterTypes: FilterTypes; - autoResetGlobalFilter?: boolean | undefined; - disableGlobalFilter?: boolean | undefined; - }>; - -export interface UseGlobalFiltersState> { - globalFilter: any; -} - -export type UseGlobalFiltersColumnOptions> = - Partial<{ - disableGlobalFilter?: boolean | undefined; + autoResetFilters?: boolean | undefined; }>; -export interface UseGlobalFiltersInstanceProps< - D extends Record, -> { - preGlobalFilteredRows: Array>; - preGlobalFilteredFlatRows: Array>; - preGlobalFilteredRowsById: Record>; - globalFilteredRows: Array>; - globalFilteredFlatRows: Array>; - globalFilteredRowsById: Record>; - rows: Array>; - flatRows: Array>; - rowsById: Record>; - setGlobalFilter: (filterValue: FilterValue) => void; -} - -//#endregion - -//#region useGroupBy -export function useGroupBy = {}>( - hooks: Hooks, -): void; + export interface UseFiltersState> { + filters: Filters; + } -export namespace useGroupBy { - const pluginName = 'useGroupBy'; -} + export type UseFiltersColumnOptions> = + Partial<{ + Filter: Renderer>; + disableFilters: boolean; + defaultCanFilter: boolean; + filter: FilterType | DefaultFilterTypes | string; + }>; -export interface TableGroupByToggleProps { - title?: string | undefined; - style?: CSSProperties | undefined; - onClick?: ((e: MouseEvent) => void) | undefined; -} + export interface UseFiltersInstanceProps> { + preFilteredRows: Array>; + preFilteredFlatRows: Array>; + preFilteredRowsById: Record>; + filteredRows: Array>; + filteredFlatRows: Array>; + filteredRowsById: Record>; + rows: Array>; + flatRows: Array>; + rowsById: Record>; + setFilter: ( + columnId: IdType, + updater: ((filterValue: FilterValue) => FilterValue) | FilterValue, + ) => void; + setAllFilters: ( + updater: Filters | ((filters: Filters) => Filters), + ) => void; + } + + export interface UseFiltersColumnProps> { + canFilter: boolean; + setFilter: ( + updater: ((filterValue: FilterValue) => FilterValue) | FilterValue, + ) => void; + filterValue: FilterValue; + preFilteredRows: Array>; + filteredRows: Array>; + } + + export type FilterProps> = HeaderProps; + export type FilterValue = any; + export type Filters> = Array<{ + id: IdType; + value: FilterValue; + }>; + export type FilterTypes> = Record< + string, + FilterType + >; -export type UseGroupByOptions> = Partial<{ - manualGroupBy: boolean; - disableGroupBy: boolean; - defaultCanGroupBy: boolean; - aggregations: Record>; - groupByFn: ( - rows: Array>, - columnId: IdType, - ) => Record>>; - autoResetGroupBy?: boolean | undefined; -}>; + export type DefaultFilterTypes = + | 'text' + | 'exactText' + | 'exactTextCase' + | 'includes' + | 'includesAll' + | 'exact' + | 'equals' + | 'between'; + + export interface FilterType> { + ( + rows: Array>, + columnIds: Array>, + filterValue: FilterValue, + ): Array>; + + autoRemove?: ((filterValue: FilterValue) => boolean) | undefined; + } + + //#endregion + + //#region useFlexLayout + export function useFlexLayout = {}>( + hooks: Hooks, + ): void; + + export namespace useFlexLayout { + const pluginName = 'useFlexLayout'; + } + //#endregion + + //#region useGridLayout + export function useGridLayout = {}>( + hooks: Hooks, + ): void; + + export namespace useGridLayout { + const pluginName = 'useGridLayout'; + } + //#endregion + + //#region useGlobalFilter + export function useGlobalFilter = {}>( + hooks: Hooks, + ): void; + + export namespace useGlobalFilter { + const pluginName = 'useGlobalFilter'; + } + + export type UseGlobalFiltersOptions> = + Partial<{ + globalFilter: + | (( + rows: Array>, + columnIds: Array>, + filterValue: any, + ) => Array>) + | string; + manualGlobalFilter: boolean; + filterTypes: FilterTypes; + autoResetGlobalFilter?: boolean | undefined; + disableGlobalFilter?: boolean | undefined; + }>; -export interface UseGroupByHooks> { - getGroupByToggleProps: Array>; -} + export interface UseGlobalFiltersState> { + globalFilter: any; + } -export interface UseGroupByState> { - groupBy: Array>; -} + export type UseGlobalFiltersColumnOptions> = + Partial<{ + disableGlobalFilter?: boolean | undefined; + }>; -export type UseGroupByColumnOptions> = - Partial<{ - aggregate: Aggregator; - Aggregated: Renderer>; + export interface UseGlobalFiltersInstanceProps< + D extends Record, + > { + preGlobalFilteredRows: Array>; + preGlobalFilteredFlatRows: Array>; + preGlobalFilteredRowsById: Record>; + globalFilteredRows: Array>; + globalFilteredFlatRows: Array>; + globalFilteredRowsById: Record>; + rows: Array>; + flatRows: Array>; + rowsById: Record>; + setGlobalFilter: (filterValue: FilterValue) => void; + } + + //#endregion + + //#region useGroupBy + export function useGroupBy = {}>( + hooks: Hooks, + ): void; + + export namespace useGroupBy { + const pluginName = 'useGroupBy'; + } + + export interface TableGroupByToggleProps { + title?: string | undefined; + style?: CSSProperties | undefined; + onClick?: ((e: MouseEvent) => void) | undefined; + } + + export type UseGroupByOptions> = Partial<{ + manualGroupBy: boolean; disableGroupBy: boolean; defaultCanGroupBy: boolean; + aggregations: Record>; + groupByFn: ( + rows: Array>, + columnId: IdType, + ) => Record>>; + autoResetGroupBy?: boolean | undefined; }>; -export interface UseGroupByInstanceProps> { - preGroupedRows: Array>; - preGroupedFlatRows: Array>; - preGroupedRowsById: Record>; - groupedRows: Array>; - groupedFlatRows: Array>; - groupedRowsById: Record>; - onlyGroupedFlatRows: Array>; - onlyGroupedRowsById: Record>; - nonGroupedFlatRows: Array>; - nonGroupedRowsById: Record>; - rows: Array>; - flatRows: Array>; - rowsById: Record>; - toggleGroupBy: (columnId: IdType, value?: boolean) => void; -} - -export interface UseGroupByColumnProps> { - canGroupBy: boolean; - isGrouped: boolean; - groupedIndex: number; - toggleGroupBy: () => void; - getGroupByToggleProps: ( - props?: Partial, - ) => TableGroupByToggleProps; -} - -export interface UseGroupByRowProps> { - isGrouped: boolean; - groupByID: IdType; - groupByVal: string; - values: Record, AggregatedValue>; - subRows: Array>; - leafRows: Array>; - depth: number; - id: string; - index: number; -} - -export interface UseGroupByCellProps> { - isGrouped: boolean; - isPlaceholder: boolean; - isAggregated: boolean; -} - -export type DefaultAggregators = - | 'sum' - | 'average' - | 'median' - | 'uniqueCount' - | 'count'; - -export type AggregatorFn> = ( - columnValues: CellValue[], - rows: Array>, - isAggregated: boolean, -) => AggregatedValue; -export type Aggregator> = - | AggregatorFn - | DefaultAggregators - | string; -export type AggregatedValue = any; -//#endregion - -//#region usePagination -export function usePagination = {}>( - hooks: Hooks, -): void; - -export namespace usePagination { - const pluginName = 'usePagination'; -} - -export type UsePaginationOptions> = Partial<{ - pageCount: number; - manualPagination: boolean; - autoResetPage?: boolean | undefined; - paginateExpandedRows: boolean; -}>; - -export interface UsePaginationState> { - pageSize: number; - pageIndex: number; -} - -export interface UsePaginationInstanceProps> { - page: Array>; - pageCount: number; - pageOptions: number[]; - canPreviousPage: boolean; - canNextPage: boolean; - gotoPage: (updater: ((pageIndex: number) => number) | number) => void; - previousPage: () => void; - nextPage: () => void; - setPageSize: (pageSize: number) => void; -} - -//#endregion - -//#region useResizeColumns -export function useResizeColumns = {}>( - hooks: Hooks, -): void; - -export namespace useResizeColumns { - const pluginName = 'useResizeColumns'; -} - -export interface UseResizeColumnsOptions> { - disableResizing?: boolean | undefined; - autoResetResize?: boolean | undefined; -} + export interface UseGroupByHooks> { + getGroupByToggleProps: Array>; + } -export interface UseResizeColumnsState> { - columnResizing: { - startX?: number | undefined; - columnWidth: number; - headerIdWidths: Record; - columnWidths: any; - isResizingColumn?: string | undefined; - }; -} - -export interface UseResizeColumnsColumnOptions< - D extends Record, -> { - disableResizing?: boolean | undefined; -} + export interface UseGroupByState> { + groupBy: Array>; + } -export interface TableResizerProps {} + export type UseGroupByColumnOptions> = + Partial<{ + aggregate: Aggregator; + Aggregated: Renderer>; + disableGroupBy: boolean; + defaultCanGroupBy: boolean; + }>; -export interface UseResizeColumnsColumnProps< - D extends Record, -> { - getResizerProps: (props?: Partial) => TableResizerProps; - canResize: boolean; - isResizing: boolean; -} + export interface UseGroupByInstanceProps> { + preGroupedRows: Array>; + preGroupedFlatRows: Array>; + preGroupedRowsById: Record>; + groupedRows: Array>; + groupedFlatRows: Array>; + groupedRowsById: Record>; + onlyGroupedFlatRows: Array>; + onlyGroupedRowsById: Record>; + nonGroupedFlatRows: Array>; + nonGroupedRowsById: Record>; + rows: Array>; + flatRows: Array>; + rowsById: Record>; + toggleGroupBy: (columnId: IdType, value?: boolean) => void; + } + + export interface UseGroupByColumnProps> { + canGroupBy: boolean; + isGrouped: boolean; + groupedIndex: number; + toggleGroupBy: () => void; + getGroupByToggleProps: ( + props?: Partial, + ) => TableGroupByToggleProps; + } + + export interface UseGroupByRowProps> { + isGrouped: boolean; + groupByID: IdType; + groupByVal: string; + values: Record, AggregatedValue>; + subRows: Array>; + leafRows: Array>; + depth: number; + id: string; + index: number; + } + + export interface UseGroupByCellProps> { + isGrouped: boolean; + isPlaceholder: boolean; + isAggregated: boolean; + } + + export type DefaultAggregators = + | 'sum' + | 'average' + | 'median' + | 'uniqueCount' + | 'count'; + + export type AggregatorFn> = ( + columnValues: CellValue[], + rows: Array>, + isAggregated: boolean, + ) => AggregatedValue; + export type Aggregator> = + | AggregatorFn + | DefaultAggregators + | string; + export type AggregatedValue = any; + //#endregion + + //#region usePagination + export function usePagination = {}>( + hooks: Hooks, + ): void; + + export namespace usePagination { + const pluginName = 'usePagination'; + } + + export type UsePaginationOptions> = + Partial<{ + pageCount: number; + manualPagination: boolean; + autoResetPage?: boolean | undefined; + paginateExpandedRows: boolean; + }>; -//#endregion + export interface UsePaginationState> { + pageSize: number; + pageIndex: number; + } + + export interface UsePaginationInstanceProps< + D extends Record, + > { + page: Array>; + pageCount: number; + pageOptions: number[]; + canPreviousPage: boolean; + canNextPage: boolean; + gotoPage: (updater: ((pageIndex: number) => number) | number) => void; + previousPage: () => void; + nextPage: () => void; + setPageSize: (pageSize: number) => void; + } + + //#endregion + + //#region useResizeColumns + export function useResizeColumns = {}>( + hooks: Hooks, + ): void; + + export namespace useResizeColumns { + const pluginName = 'useResizeColumns'; + } + + export interface UseResizeColumnsOptions> { + disableResizing?: boolean | undefined; + autoResetResize?: boolean | undefined; + } + + export interface UseResizeColumnsState> { + columnResizing: { + startX?: number | undefined; + columnWidth: number; + headerIdWidths: Record; + columnWidths: any; + isResizingColumn?: string | undefined; + }; + } -//#region useRowSelect -export function useRowSelect = {}>( - hooks: Hooks, -): void; + export interface UseResizeColumnsColumnOptions< + D extends Record, + > { + disableResizing?: boolean | undefined; + } -export namespace useRowSelect { - const pluginName = 'useRowSelect'; -} + export interface TableResizerProps {} -export interface TableToggleAllRowsSelectedProps - extends TableToggleCommonProps {} + export interface UseResizeColumnsColumnProps< + D extends Record, + > { + getResizerProps: (props?: Partial) => TableResizerProps; + canResize: boolean; + isResizing: boolean; + } -export interface TableToggleRowsSelectedProps extends TableToggleCommonProps {} + //#endregion -export type UseRowSelectOptions> = Partial<{ - manualRowSelectedKey: IdType; - autoResetSelectedRows: boolean; - selectSubRows: boolean; -}>; + //#region useRowSelect + export function useRowSelect = {}>( + hooks: Hooks, + ): void; -export interface UseRowSelectHooks> { - getToggleRowSelectedProps: Array>; - getToggleAllRowsSelectedProps: Array< - PropGetter - >; - getToggleAllPageRowsSelectedProps: Array< - PropGetter - >; -} + export namespace useRowSelect { + const pluginName = 'useRowSelect'; + } -export interface UseRowSelectState> { - selectedRowIds: Record, boolean>; -} + export interface TableToggleAllRowsSelectedProps + extends TableToggleCommonProps {} -export interface UseRowSelectInstanceProps> { - toggleRowSelected: (rowId: IdType, set?: boolean) => void; - toggleAllRowsSelected: (value?: boolean) => void; - getToggleAllRowsSelectedProps: ( - props?: Partial, - ) => TableToggleAllRowsSelectedProps; - getToggleAllPageRowsSelectedProps: ( - props?: Partial, - ) => TableToggleAllRowsSelectedProps; - isAllRowsSelected: boolean; - selectedFlatRows: Array>; -} + export interface TableToggleRowsSelectedProps + extends TableToggleCommonProps {} -export interface UseRowSelectRowProps> { - isSelected: boolean; - isSomeSelected: boolean; - toggleRowSelected: (set?: boolean) => void; - getToggleRowSelectedProps: ( - props?: Partial, - ) => TableToggleRowsSelectedProps; -} - -//#endregion - -//#region useRowState -export function useRowState = {}>( - hooks: Hooks, -): void; + export type UseRowSelectOptions> = Partial<{ + manualRowSelectedKey: IdType; + autoResetSelectedRows: boolean; + selectSubRows: boolean; + }>; -export namespace useRowState { - const pluginName = 'useRowState'; -} + export interface UseRowSelectHooks> { + getToggleRowSelectedProps: Array< + PropGetter + >; + getToggleAllRowsSelectedProps: Array< + PropGetter + >; + getToggleAllPageRowsSelectedProps: Array< + PropGetter + >; + } + + export interface UseRowSelectState> { + selectedRowIds: Record, boolean>; + } + + export interface UseRowSelectInstanceProps< + D extends Record, + > { + toggleRowSelected: (rowId: IdType, set?: boolean) => void; + toggleAllRowsSelected: (value?: boolean) => void; + getToggleAllRowsSelectedProps: ( + props?: Partial, + ) => TableToggleAllRowsSelectedProps; + getToggleAllPageRowsSelectedProps: ( + props?: Partial, + ) => TableToggleAllRowsSelectedProps; + isAllRowsSelected: boolean; + selectedFlatRows: Array>; + } + + export interface UseRowSelectRowProps> { + isSelected: boolean; + isSomeSelected: boolean; + toggleRowSelected: (set?: boolean) => void; + getToggleRowSelectedProps: ( + props?: Partial, + ) => TableToggleRowsSelectedProps; + } + + //#endregion + + //#region useRowState + export function useRowState = {}>( + hooks: Hooks, + ): void; + + export namespace useRowState { + const pluginName = 'useRowState'; + } + + export type UseRowStateOptions> = Partial<{ + initialRowStateAccessor: (row: Row) => UseRowStateLocalState; + getResetRowStateDeps: (instance: TableInstance) => any[]; + autoResetRowState?: boolean | undefined; + }>; -export type UseRowStateOptions> = Partial<{ - initialRowStateAccessor: (row: Row) => UseRowStateLocalState; - getResetRowStateDeps: (instance: TableInstance) => any[]; - autoResetRowState?: boolean | undefined; -}>; + export interface UseRowStateState> { + rowState: Record }>; + } + + export interface UseRowStateInstanceProps> { + setRowState: (rowPath: string[], updater: UseRowUpdater) => void; + setCellState: ( + rowPath: string[], + columnId: IdType, + updater: UseRowUpdater, + ) => void; + } + + export interface UseRowStateRowProps> { + state: UseRowStateLocalState; + setState: (updater: UseRowUpdater) => void; + } + + export interface UseRowStateCellProps> { + state: UseRowStateLocalState; + setState: (updater: UseRowUpdater) => void; + } + + export type UseRowUpdater = T | ((prev: T) => T); + export type UseRowStateLocalState< + D extends Record, + T = unknown, + > = Record, T>; + //#endregion + + //#region useSortBy + export function useSortBy = {}>( + hooks: Hooks, + ): void; + + export namespace useSortBy { + const pluginName = 'useSortBy'; + } + + export interface TableSortByToggleProps { + title?: string | undefined; + style?: CSSProperties | undefined; + onClick?: ((e: MouseEvent) => void) | undefined; + } + + export type UseSortByOptions> = Partial<{ + manualSortBy: boolean; + disableSortBy: boolean; + defaultCanSort: boolean; + disableMultiSort: boolean; + isMultiSortEvent: (e: MouseEvent) => boolean; + maxMultiSortColCount: number; + disableSortRemove: boolean; + disabledMultiRemove: boolean; + orderByFn: ( + rows: Array>, + sortFns: Array>, + directions: boolean[], + ) => Array>; + sortTypes: Record>; + autoResetSortBy?: boolean | undefined; + }>; -export interface UseRowStateState> { - rowState: Record }>; -} + export interface UseSortByHooks> { + getSortByToggleProps: Array>; + } + + export interface UseSortByState> { + sortBy: Array>; + } + + export type UseSortByColumnOptions> = + Partial<{ + defaultCanSort: boolean; + disableSortBy: boolean; + sortDescFirst: boolean; + sortInverted: boolean; + sortType: SortByFn | DefaultSortTypes | string; + }>; -export interface UseRowStateInstanceProps> { - setRowState: (rowPath: string[], updater: UseRowUpdater) => void; - setCellState: ( - rowPath: string[], + export interface UseSortByInstanceProps> { + rows: Array>; + preSortedRows: Array>; + setSortBy: (sortBy: Array>) => void; + toggleSortBy: ( + columnId: IdType, + descending?: boolean, + isMulti?: boolean, + ) => void; + } + + export interface UseSortByColumnProps> { + canSort: boolean; + toggleSortBy: (descending?: boolean, multi?: boolean) => void; + getSortByToggleProps: ( + props?: Partial, + ) => TableSortByToggleProps; + clearSortBy: () => void; + isSorted: boolean; + sortedIndex: number; + isSortedDesc: boolean | undefined; + } + + export type OrderByFn> = ( + rowA: Row, + rowB: Row, + ) => number; + export type SortByFn> = ( + rowA: Row, + rowB: Row, columnId: IdType, - updater: UseRowUpdater, - ) => void; -} - -export interface UseRowStateRowProps> { - state: UseRowStateLocalState; - setState: (updater: UseRowUpdater) => void; -} - -export interface UseRowStateCellProps> { - state: UseRowStateLocalState; - setState: (updater: UseRowUpdater) => void; -} - -export type UseRowUpdater = T | ((prev: T) => T); -export type UseRowStateLocalState< - D extends Record, - T = unknown, -> = Record, T>; -//#endregion - -//#region useSortBy -export function useSortBy = {}>( - hooks: Hooks, -): void; - -export namespace useSortBy { - const pluginName = 'useSortBy'; -} - -export interface TableSortByToggleProps { - title?: string | undefined; - style?: CSSProperties | undefined; - onClick?: ((e: MouseEvent) => void) | undefined; -} + desc?: boolean, + ) => number; + + export type DefaultSortTypes = + | 'alphanumeric' + | 'datetime' + | 'basic' + | 'string' + | 'number'; + + export interface SortingRule { + id: IdType; + desc?: boolean | undefined; + } + + //#endregion + + // Additional API + export const actions: Record; + export type ActionType = { type: string } & Record; + export const defaultColumn: Partial & Record; + + // Helpers + export type StringKey = Extract; + export type IdType = StringKey | string; + export type CellValue = V; + + export type Renderer = + | ComponentType + | ReactElement + | string + | number + | ReactFragment; + + export interface PluginHook> { + (hooks: Hooks): void; + pluginName?: string | undefined; + } + + export type TableDispatch = (action: A) => void; + + // utils + export function defaultOrderByFn = {}>( + arr: Array>, + funcs: Array>, + dirs: boolean[], + ): Array>; -export type UseSortByOptions> = Partial<{ - manualSortBy: boolean; - disableSortBy: boolean; - defaultCanSort: boolean; - disableMultiSort: boolean; - isMultiSortEvent: (e: MouseEvent) => boolean; - maxMultiSortColCount: number; - disableSortRemove: boolean; - disabledMultiRemove: boolean; - orderByFn: ( + export function defaultGroupByFn = {}>( rows: Array>, - sortFns: Array>, - directions: boolean[], - ) => Array>; - sortTypes: Record>; - autoResetSortBy?: boolean | undefined; -}>; - -export interface UseSortByHooks> { - getSortByToggleProps: Array>; -} - -export interface UseSortByState> { - sortBy: Array>; -} - -export type UseSortByColumnOptions> = - Partial<{ - defaultCanSort: boolean; - disableSortBy: boolean; - sortDescFirst: boolean; - sortInverted: boolean; - sortType: SortByFn | DefaultSortTypes | string; - }>; - -export interface UseSortByInstanceProps> { - rows: Array>; - preSortedRows: Array>; - setSortBy: (sortBy: Array>) => void; - toggleSortBy: ( columnId: IdType, - descending?: boolean, - isMulti?: boolean, - ) => void; -} - -export interface UseSortByColumnProps> { - canSort: boolean; - toggleSortBy: (descending?: boolean, multi?: boolean) => void; - getSortByToggleProps: ( - props?: Partial, - ) => TableSortByToggleProps; - clearSortBy: () => void; - isSorted: boolean; - sortedIndex: number; - isSortedDesc: boolean | undefined; -} - -export type OrderByFn> = ( - rowA: Row, - rowB: Row, -) => number; -export type SortByFn> = ( - rowA: Row, - rowB: Row, - columnId: IdType, - desc?: boolean, -) => number; - -export type DefaultSortTypes = - | 'alphanumeric' - | 'datetime' - | 'basic' - | 'string' - | 'number'; - -export interface SortingRule { - id: IdType; - desc?: boolean | undefined; -} - -//#endregion - -// Additional API -export const actions: Record; -export type ActionType = { type: string } & Record; -export const defaultColumn: Partial & Record; - -// Helpers -export type StringKey = Extract; -export type IdType = StringKey | string; -export type CellValue = V; - -export type Renderer = - | ComponentType - | ReactElement - | string - | number - | ReactFragment; - -export interface PluginHook> { - (hooks: Hooks): void; - pluginName?: string | undefined; + ): Record>>; + + export function makePropGetter(hooks: Hooks, ...meta: any[]): any; + + export function reduceHooks( + hooks: Hooks, + initial: T, + ...args: any[] + ): T; + + export function loopHooks(hooks: Hooks, ...args: any[]): void; + + export function ensurePluginOrder = {}>( + plugins: Array>, + befores: string[], + pluginName: string, + ): void; + + export function functionalUpdate = {}>( + updater: any, + old: Partial>, + ): Partial>; + + export function useGetLatest(obj: T): () => T; + + export function safeUseLayoutEffect( + effect: EffectCallback, + deps?: DependencyList, + ): void; + + export function useMountedLayoutEffect( + effect: EffectCallback, + deps?: DependencyList, + ): void; + + export function useAsyncDebounce any>( + defaultFn: F, + defaultWait?: number, + ): F; + + export function makeRenderer( + instance: TableInstance, + column: ColumnInstance, + meta?: any, + ): ReactElement; + + ////////////////////////////////////////////////////////////////////////////////////////////////// + // Custom Additions (parts from the old file called react-table-config.ts) + + export type FieldType = 'text' | 'number' | 'date' | string; + + export type CellRendererProps = {}> = { + /** + * Cell HTML props passed from the Table. + */ + cellElementProps: TableCellProps; + /** + * Table specific cell props like `column`, `row`. + */ + cellProps: CellProps; + /** + * Cell's content. + */ + children: React.ReactNode; + /** + * Function that returns whether the cell is disabled. + */ + isDisabled?: (rowData: D) => boolean; + }; } - -export type TableDispatch = (action: A) => void; - -// utils -export function defaultOrderByFn = {}>( - arr: Array>, - funcs: Array>, - dirs: boolean[], -): Array>; - -export function defaultGroupByFn = {}>( - rows: Array>, - columnId: IdType, -): Record>>; - -export function makePropGetter(hooks: Hooks, ...meta: any[]): any; - -export function reduceHooks( - hooks: Hooks, - initial: T, - ...args: any[] -): T; - -export function loopHooks(hooks: Hooks, ...args: any[]): void; - -export function ensurePluginOrder = {}>( - plugins: Array>, - befores: string[], - pluginName: string, -): void; - -export function functionalUpdate = {}>( - updater: any, - old: Partial>, -): Partial>; - -export function useGetLatest(obj: T): () => T; - -export function safeUseLayoutEffect( - effect: EffectCallback, - deps?: DependencyList, -): void; - -export function useMountedLayoutEffect( - effect: EffectCallback, - deps?: DependencyList, -): void; - -export function useAsyncDebounce any>( - defaultFn: F, - defaultWait?: number, -): F; - -export function makeRenderer( - instance: TableInstance, - column: ColumnInstance, - meta?: any, -): ReactElement; - -////////////////////////////////////////////////////////////////////////////////////////////////// -// Custom Additions (parts from the old file called react-table-config.ts) - -export type FieldType = 'text' | 'number' | 'date' | string; - -export type CellRendererProps = {}> = { - /** - * Cell HTML props passed from the Table. - */ - cellElementProps: TableCellProps; - /** - * Table specific cell props like `column`, `row`. - */ - cellProps: CellProps; - /** - * Cell's content. - */ - children: React.ReactNode; - /** - * Function that returns whether the cell is disabled. - */ - isDisabled?: (rowData: D) => boolean; -}; - -} \ No newline at end of file From 10e75f905dd555873e8ce88b2b94d26a87d20797 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Wed, 30 Aug 2023 15:34:54 -0400 Subject: [PATCH 066/196] Changed all imports of the types file to now using react-table --- packages/itwinui-react/src/core/Table/SubRowExpander.tsx | 2 +- packages/itwinui-react/src/core/Table/Table.test.tsx | 4 ++-- packages/itwinui-react/src/core/Table/Table.tsx | 9 +++++---- packages/itwinui-react/src/core/Table/TableCell.tsx | 2 +- .../itwinui-react/src/core/Table/TableRowMemoized.tsx | 7 +------ .../src/core/Table/actionHandlers/expandHandler.ts | 2 +- .../src/core/Table/actionHandlers/filterHandler.ts | 6 +----- .../src/core/Table/actionHandlers/resizeHandler.ts | 2 +- .../src/core/Table/actionHandlers/selectHandler.ts | 7 +------ .../itwinui-react/src/core/Table/cells/DefaultCell.tsx | 2 +- .../itwinui-react/src/core/Table/cells/EditableCell.tsx | 2 +- .../src/core/Table/columns/actionColumn.tsx | 2 +- .../src/core/Table/columns/expanderColumn.tsx | 6 +----- .../src/core/Table/columns/selectionColumn.tsx | 6 +----- .../filters/DateRangeFilter/DateRangeFilter.test.tsx | 2 +- .../src/core/Table/filters/FilterToggle.test.tsx | 2 +- .../src/core/Table/filters/FilterToggle.tsx | 2 +- .../filters/NumberRangeFilter/NumberRangeFilter.test.tsx | 2 +- .../core/Table/filters/TextFilter/TextFilter.test.tsx | 2 +- .../src/core/Table/filters/customFilterFunctions.test.ts | 2 +- .../src/core/Table/filters/customFilterFunctions.ts | 2 +- .../src/core/Table/filters/defaultFilterFunctions.ts | 2 +- packages/itwinui-react/src/core/Table/filters/types.ts | 2 +- .../src/core/Table/hooks/useColumnDragAndDrop.tsx | 8 ++------ .../src/core/Table/hooks/useExpanderCell.tsx | 7 +------ .../src/core/Table/hooks/useResizeColumns.tsx | 8 ++------ .../itwinui-react/src/core/Table/hooks/useScrollToRow.ts | 2 +- .../src/core/Table/hooks/useSelectionCell.tsx | 2 +- .../src/core/Table/hooks/useStickyColumns.tsx | 9 ++------- .../src/core/Table/hooks/useSubRowFiltering.tsx | 7 +------ .../src/core/Table/hooks/useSubRowSelection.tsx | 7 +------ packages/itwinui-react/src/core/Table/utils.ts | 2 +- 32 files changed, 40 insertions(+), 89 deletions(-) diff --git a/packages/itwinui-react/src/core/Table/SubRowExpander.tsx b/packages/itwinui-react/src/core/Table/SubRowExpander.tsx index 14842cf82a8..c97897a6334 100644 --- a/packages/itwinui-react/src/core/Table/SubRowExpander.tsx +++ b/packages/itwinui-react/src/core/Table/SubRowExpander.tsx @@ -4,7 +4,7 @@ *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; import { SvgChevronRight } from '../utils/index.js'; -import type { Cell, CellProps } from './types/react-table-types.js'; +import type { Cell, CellProps } from 'react-table'; import { IconButton } from '../Buttons/index.js'; export type SubRowExpanderProps> = { diff --git a/packages/itwinui-react/src/core/Table/Table.test.tsx b/packages/itwinui-react/src/core/Table/Table.test.tsx index 5836f20d566..d455fad11b5 100644 --- a/packages/itwinui-react/src/core/Table/Table.test.tsx +++ b/packages/itwinui-react/src/core/Table/Table.test.tsx @@ -18,8 +18,8 @@ import { type TableFilterProps, tableFilters, } from './filters/index.js'; -import { actions } from './types/react-table-types.js'; -import type { CellProps, Column, Row } from './types/react-table-types.js'; +import { actions } from 'react-table'; +import type { CellProps, Column, Row } from 'react-table'; import { InputGroup } from '../InputGroup/index.js'; import { Radio } from '../Radio/index.js'; import { diff --git a/packages/itwinui-react/src/core/Table/Table.tsx b/packages/itwinui-react/src/core/Table/Table.tsx index 452ec61b4fa..161975ea17d 100644 --- a/packages/itwinui-react/src/core/Table/Table.tsx +++ b/packages/itwinui-react/src/core/Table/Table.tsx @@ -13,7 +13,7 @@ import type { ActionType, TableInstance, Column, -} from './types/react-table-types.js'; +} from 'react-table'; import { actions as TableActions, useFlexLayout, @@ -25,7 +25,7 @@ import { usePagination, useColumnOrder, useGlobalFilter, -} from './types/react-table-types.js'; +} from 'react-table'; import { ProgressRadial } from '../ProgressIndicators/index.js'; import { useGlobals, @@ -318,7 +318,9 @@ export type TableProps< scrollToRow?: (rows: Row[], data: T[]) => number; } & Omit; -const flattenColumns = (columns: Column[]): Column[] => { +const flattenColumns = >( + columns: Column[], +): Column[] => { // Return columns itself since we don't support nested columns return columns; }; @@ -432,7 +434,6 @@ export const Table = < }, [onBottomReached, onRowInViewport]); const hasManualSelectionColumn = React.useMemo(() => { - const q = 0; const flatColumns = flattenColumns(columns); return flatColumns.some((column) => column.id === SELECTION_CELL_ID); }, [columns]); diff --git a/packages/itwinui-react/src/core/Table/TableCell.tsx b/packages/itwinui-react/src/core/Table/TableCell.tsx index 7bcc71dc45c..46cc6ebea04 100644 --- a/packages/itwinui-react/src/core/Table/TableCell.tsx +++ b/packages/itwinui-react/src/core/Table/TableCell.tsx @@ -8,7 +8,7 @@ import type { CellProps, CellRendererProps, TableInstance, -} from './types/react-table-types.js'; +} from 'react-table'; import cx from 'classnames'; import { getCellStyle, getStickyStyle } from './utils.js'; import { SubRowExpander } from './SubRowExpander.js'; diff --git a/packages/itwinui-react/src/core/Table/TableRowMemoized.tsx b/packages/itwinui-react/src/core/Table/TableRowMemoized.tsx index a2b3366cf85..e42a436fd8c 100644 --- a/packages/itwinui-react/src/core/Table/TableRowMemoized.tsx +++ b/packages/itwinui-react/src/core/Table/TableRowMemoized.tsx @@ -4,12 +4,7 @@ *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; import cx from 'classnames'; -import type { - CellProps, - Row, - TableInstance, - TableState, -} from './types/react-table-types.js'; +import type { CellProps, Row, TableInstance, TableState } from 'react-table'; import { Box, useIntersection, diff --git a/packages/itwinui-react/src/core/Table/actionHandlers/expandHandler.ts b/packages/itwinui-react/src/core/Table/actionHandlers/expandHandler.ts index 8dc122bb445..28fce8e700d 100644 --- a/packages/itwinui-react/src/core/Table/actionHandlers/expandHandler.ts +++ b/packages/itwinui-react/src/core/Table/actionHandlers/expandHandler.ts @@ -2,7 +2,7 @@ * Copyright (c) Bentley Systems, Incorporated. All rights reserved. * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ -import type { TableInstance, TableState } from '../types/react-table-types.js'; +import type { TableInstance, TableState } from 'react-table'; export const onExpandHandler = >( newState: TableState, diff --git a/packages/itwinui-react/src/core/Table/actionHandlers/filterHandler.ts b/packages/itwinui-react/src/core/Table/actionHandlers/filterHandler.ts index 3250dd14874..e803fce43f9 100644 --- a/packages/itwinui-react/src/core/Table/actionHandlers/filterHandler.ts +++ b/packages/itwinui-react/src/core/Table/actionHandlers/filterHandler.ts @@ -2,11 +2,7 @@ * Copyright (c) Bentley Systems, Incorporated. All rights reserved. * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ -import type { - ActionType, - TableInstance, - TableState, -} from '../types/react-table-types.js'; +import type { ActionType, TableInstance, TableState } from 'react-table'; import type { TableFilterValue } from '../filters/index.js'; export const onFilterHandler = >( diff --git a/packages/itwinui-react/src/core/Table/actionHandlers/resizeHandler.ts b/packages/itwinui-react/src/core/Table/actionHandlers/resizeHandler.ts index 474b78ea37f..98993b9b510 100644 --- a/packages/itwinui-react/src/core/Table/actionHandlers/resizeHandler.ts +++ b/packages/itwinui-react/src/core/Table/actionHandlers/resizeHandler.ts @@ -2,7 +2,7 @@ * Copyright (c) Bentley Systems, Incorporated. All rights reserved. * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ -import type { ActionType, TableState } from '../types/react-table-types.js'; +import type { ActionType, TableState } from 'react-table'; export const onTableResizeStart = >( state: TableState, diff --git a/packages/itwinui-react/src/core/Table/actionHandlers/selectHandler.ts b/packages/itwinui-react/src/core/Table/actionHandlers/selectHandler.ts index d8485456cb4..10569525210 100644 --- a/packages/itwinui-react/src/core/Table/actionHandlers/selectHandler.ts +++ b/packages/itwinui-react/src/core/Table/actionHandlers/selectHandler.ts @@ -2,12 +2,7 @@ * Copyright (c) Bentley Systems, Incorporated. All rights reserved. * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ -import type { - ActionType, - Row, - TableInstance, - TableState, -} from '../types/react-table-types.js'; +import type { ActionType, Row, TableInstance, TableState } from 'react-table'; /** * Handles subrow selection and validation. diff --git a/packages/itwinui-react/src/core/Table/cells/DefaultCell.tsx b/packages/itwinui-react/src/core/Table/cells/DefaultCell.tsx index 1c059033935..469a47b0826 100644 --- a/packages/itwinui-react/src/core/Table/cells/DefaultCell.tsx +++ b/packages/itwinui-react/src/core/Table/cells/DefaultCell.tsx @@ -3,7 +3,7 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; -import type { CellRendererProps } from '../types/react-table-types.js'; +import type { CellRendererProps } from 'react-table'; import cx from 'classnames'; import { Box } from '../../utils/index.js'; diff --git a/packages/itwinui-react/src/core/Table/cells/EditableCell.tsx b/packages/itwinui-react/src/core/Table/cells/EditableCell.tsx index 755336b8e29..f703b1d6f51 100644 --- a/packages/itwinui-react/src/core/Table/cells/EditableCell.tsx +++ b/packages/itwinui-react/src/core/Table/cells/EditableCell.tsx @@ -3,7 +3,7 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; -import type { CellRendererProps } from '../types/react-table-types.js'; +import type { CellRendererProps } from 'react-table'; import { Box, getRandomValue } from '../../utils/index.js'; export type EditableCellProps> = diff --git a/packages/itwinui-react/src/core/Table/columns/actionColumn.tsx b/packages/itwinui-react/src/core/Table/columns/actionColumn.tsx index a0338255089..a5b57bbe4d9 100644 --- a/packages/itwinui-react/src/core/Table/columns/actionColumn.tsx +++ b/packages/itwinui-react/src/core/Table/columns/actionColumn.tsx @@ -3,7 +3,7 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; -import type { HeaderProps } from '../types/react-table-types.js'; +import type { HeaderProps } from 'react-table'; import { Checkbox } from '../../Checkbox/index.js'; import { SvgColumnManager } from '../../utils/index.js'; import { DropdownMenu } from '../../DropdownMenu/index.js'; diff --git a/packages/itwinui-react/src/core/Table/columns/expanderColumn.tsx b/packages/itwinui-react/src/core/Table/columns/expanderColumn.tsx index 597a495fd4a..8932195d7f8 100644 --- a/packages/itwinui-react/src/core/Table/columns/expanderColumn.tsx +++ b/packages/itwinui-react/src/core/Table/columns/expanderColumn.tsx @@ -4,11 +4,7 @@ *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; import { SvgChevronRight } from '../../utils/index.js'; -import type { - CellProps, - CellRendererProps, - Row, -} from '../types/react-table-types.js'; +import type { CellProps, CellRendererProps, Row } from 'react-table'; import { IconButton } from '../../Buttons/index.js'; import { DefaultCell } from '../cells/index.js'; diff --git a/packages/itwinui-react/src/core/Table/columns/selectionColumn.tsx b/packages/itwinui-react/src/core/Table/columns/selectionColumn.tsx index ac1f23383af..d687290b46e 100644 --- a/packages/itwinui-react/src/core/Table/columns/selectionColumn.tsx +++ b/packages/itwinui-react/src/core/Table/columns/selectionColumn.tsx @@ -3,11 +3,7 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; -import type { - CellProps, - CellRendererProps, - HeaderProps, -} from '../types/react-table-types.js'; +import type { CellProps, CellRendererProps, HeaderProps } from 'react-table'; import { Checkbox } from '../../Checkbox/index.js'; import { DefaultCell } from '../cells/index.js'; diff --git a/packages/itwinui-react/src/core/Table/filters/DateRangeFilter/DateRangeFilter.test.tsx b/packages/itwinui-react/src/core/Table/filters/DateRangeFilter/DateRangeFilter.test.tsx index 9c40316ccdf..4ffec75fde0 100644 --- a/packages/itwinui-react/src/core/Table/filters/DateRangeFilter/DateRangeFilter.test.tsx +++ b/packages/itwinui-react/src/core/Table/filters/DateRangeFilter/DateRangeFilter.test.tsx @@ -4,7 +4,7 @@ *--------------------------------------------------------------------------------------------*/ import { fireEvent, render, screen } from '@testing-library/react'; import * as React from 'react'; -import type { HeaderGroup } from '../../types/react-table-types.js'; +import type { HeaderGroup } from 'react-table'; import { DateRangeFilter, type DateRangeFilterProps, diff --git a/packages/itwinui-react/src/core/Table/filters/FilterToggle.test.tsx b/packages/itwinui-react/src/core/Table/filters/FilterToggle.test.tsx index b9c9bf04eb9..8b1ca81ad26 100644 --- a/packages/itwinui-react/src/core/Table/filters/FilterToggle.test.tsx +++ b/packages/itwinui-react/src/core/Table/filters/FilterToggle.test.tsx @@ -5,7 +5,7 @@ import { render, type RenderResult, screen } from '@testing-library/react'; import * as React from 'react'; -import type { HeaderGroup } from '../types/react-table-types.js'; +import type { HeaderGroup } from 'react-table'; import { FilterToggle, type FilterToggleProps } from './FilterToggle.js'; import { tableFilters } from './tableFilters.js'; diff --git a/packages/itwinui-react/src/core/Table/filters/FilterToggle.tsx b/packages/itwinui-react/src/core/Table/filters/FilterToggle.tsx index 834d26378a6..3a2b65f75d6 100644 --- a/packages/itwinui-react/src/core/Table/filters/FilterToggle.tsx +++ b/packages/itwinui-react/src/core/Table/filters/FilterToggle.tsx @@ -4,7 +4,7 @@ *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; import cx from 'classnames'; -import type { HeaderGroup } from '../types/react-table-types.js'; +import type { HeaderGroup } from 'react-table'; import { useGlobals, Popover, diff --git a/packages/itwinui-react/src/core/Table/filters/NumberRangeFilter/NumberRangeFilter.test.tsx b/packages/itwinui-react/src/core/Table/filters/NumberRangeFilter/NumberRangeFilter.test.tsx index e05bc51d07b..e02a11b51e6 100644 --- a/packages/itwinui-react/src/core/Table/filters/NumberRangeFilter/NumberRangeFilter.test.tsx +++ b/packages/itwinui-react/src/core/Table/filters/NumberRangeFilter/NumberRangeFilter.test.tsx @@ -4,7 +4,7 @@ *--------------------------------------------------------------------------------------------*/ import { fireEvent, render, screen } from '@testing-library/react'; import * as React from 'react'; -import type { HeaderGroup } from '../../types/react-table-types.js'; +import type { HeaderGroup } from 'react-table'; import { NumberRangeFilter } from './NumberRangeFilter.js'; import type { NumberRangeFilterProps } from './NumberRangeFilter.js'; diff --git a/packages/itwinui-react/src/core/Table/filters/TextFilter/TextFilter.test.tsx b/packages/itwinui-react/src/core/Table/filters/TextFilter/TextFilter.test.tsx index f785ca05cb3..2c72431a17c 100644 --- a/packages/itwinui-react/src/core/Table/filters/TextFilter/TextFilter.test.tsx +++ b/packages/itwinui-react/src/core/Table/filters/TextFilter/TextFilter.test.tsx @@ -4,7 +4,7 @@ *--------------------------------------------------------------------------------------------*/ import { fireEvent, render, screen } from '@testing-library/react'; import * as React from 'react'; -import type { HeaderGroup } from '../../types/react-table-types.js'; +import type { HeaderGroup } from 'react-table'; import type { TableFilterProps } from '../types.js'; import { TextFilter } from './TextFilter.js'; diff --git a/packages/itwinui-react/src/core/Table/filters/customFilterFunctions.test.ts b/packages/itwinui-react/src/core/Table/filters/customFilterFunctions.test.ts index 29670f57e0e..bfb81fe63f9 100644 --- a/packages/itwinui-react/src/core/Table/filters/customFilterFunctions.test.ts +++ b/packages/itwinui-react/src/core/Table/filters/customFilterFunctions.test.ts @@ -3,7 +3,7 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ /* eslint-disable @typescript-eslint/no-explicit-any */ -import type { Row } from '../types/react-table-types.js'; +import type { Row } from 'react-table'; import { customFilterFunctions } from './customFilterFunctions.js'; const mockRows = (values: any[]) => { diff --git a/packages/itwinui-react/src/core/Table/filters/customFilterFunctions.ts b/packages/itwinui-react/src/core/Table/filters/customFilterFunctions.ts index 5f4cb4718b7..65e90cbb69f 100644 --- a/packages/itwinui-react/src/core/Table/filters/customFilterFunctions.ts +++ b/packages/itwinui-react/src/core/Table/filters/customFilterFunctions.ts @@ -2,7 +2,7 @@ * Copyright (c) Bentley Systems, Incorporated. All rights reserved. * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ -import type { IdType, Row } from '../types/react-table-types.js'; +import type { IdType, Row } from 'react-table'; const isValidDate = (date: Date | undefined) => !!date && !isNaN(date.valueOf()); diff --git a/packages/itwinui-react/src/core/Table/filters/defaultFilterFunctions.ts b/packages/itwinui-react/src/core/Table/filters/defaultFilterFunctions.ts index 56e40c3f1f5..d7ceddd47e6 100644 --- a/packages/itwinui-react/src/core/Table/filters/defaultFilterFunctions.ts +++ b/packages/itwinui-react/src/core/Table/filters/defaultFilterFunctions.ts @@ -28,7 +28,7 @@ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE * SOFTWARE. */ -import type { IdType, Row } from '../types/react-table-types.js'; +import type { IdType, Row } from 'react-table'; const text = >( rows: Row[], diff --git a/packages/itwinui-react/src/core/Table/filters/types.ts b/packages/itwinui-react/src/core/Table/filters/types.ts index dc02c40769f..32ccefcf3f8 100644 --- a/packages/itwinui-react/src/core/Table/filters/types.ts +++ b/packages/itwinui-react/src/core/Table/filters/types.ts @@ -7,7 +7,7 @@ import type { FilterProps, FilterType, HeaderGroup, -} from '../types/react-table-types.js'; +} from 'react-table'; export interface TableFilterValue> { /** diff --git a/packages/itwinui-react/src/core/Table/hooks/useColumnDragAndDrop.tsx b/packages/itwinui-react/src/core/Table/hooks/useColumnDragAndDrop.tsx index 5319e9fdea5..eb538aad142 100644 --- a/packages/itwinui-react/src/core/Table/hooks/useColumnDragAndDrop.tsx +++ b/packages/itwinui-react/src/core/Table/hooks/useColumnDragAndDrop.tsx @@ -3,11 +3,7 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import type * as React from 'react'; -import { - actions, - makePropGetter, - useGetLatest, -} from '../types/react-table-types.js'; +import { actions, makePropGetter, useGetLatest } from 'react-table'; import type { ActionType, HeaderGroup, @@ -16,7 +12,7 @@ import type { TableInstance, TableKeyedProps, TableState, -} from '../types/react-table-types.js'; +} from 'react-table'; import styles from '../../../styles.js'; const REORDER_ACTIONS = { diff --git a/packages/itwinui-react/src/core/Table/hooks/useExpanderCell.tsx b/packages/itwinui-react/src/core/Table/hooks/useExpanderCell.tsx index 764a747efef..b8ba4ae9d92 100644 --- a/packages/itwinui-react/src/core/Table/hooks/useExpanderCell.tsx +++ b/packages/itwinui-react/src/core/Table/hooks/useExpanderCell.tsx @@ -3,12 +3,7 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; -import type { - CellProps, - ColumnInstance, - Hooks, - Row, -} from '../types/react-table-types.js'; +import type { CellProps, ColumnInstance, Hooks, Row } from 'react-table'; import { ExpanderColumn, EXPANDER_CELL_ID } from '../columns/index.js'; export const useExpanderCell = diff --git a/packages/itwinui-react/src/core/Table/hooks/useResizeColumns.tsx b/packages/itwinui-react/src/core/Table/hooks/useResizeColumns.tsx index 3632f2d9b58..bab0eee8e78 100644 --- a/packages/itwinui-react/src/core/Table/hooks/useResizeColumns.tsx +++ b/packages/itwinui-react/src/core/Table/hooks/useResizeColumns.tsx @@ -34,11 +34,7 @@ * SOFTWARE. */ import type * as React from 'react'; -import { - actions, - makePropGetter, - useGetLatest, -} from '../types/react-table-types.js'; +import { actions, makePropGetter, useGetLatest } from 'react-table'; import type { ActionType, ColumnInstance, @@ -47,7 +43,7 @@ import type { TableInstance, TableKeyedProps, TableState, -} from '../types/react-table-types.js'; +} from 'react-table'; export const useResizeColumns = >( diff --git a/packages/itwinui-react/src/core/Table/hooks/useScrollToRow.ts b/packages/itwinui-react/src/core/Table/hooks/useScrollToRow.ts index 86da4ace157..9a98874807f 100644 --- a/packages/itwinui-react/src/core/Table/hooks/useScrollToRow.ts +++ b/packages/itwinui-react/src/core/Table/hooks/useScrollToRow.ts @@ -3,7 +3,7 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; -import type { Row } from '../types/react-table-types.js'; +import type { Row } from 'react-table'; import type { TableProps } from '../Table.js'; type ScrollToRow> = { diff --git a/packages/itwinui-react/src/core/Table/hooks/useSelectionCell.tsx b/packages/itwinui-react/src/core/Table/hooks/useSelectionCell.tsx index 06e33bee52b..a1f520f574b 100644 --- a/packages/itwinui-react/src/core/Table/hooks/useSelectionCell.tsx +++ b/packages/itwinui-react/src/core/Table/hooks/useSelectionCell.tsx @@ -2,7 +2,7 @@ * Copyright (c) Bentley Systems, Incorporated. All rights reserved. * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ -import type { ColumnInstance, Hooks } from '../types/react-table-types.js'; +import type { ColumnInstance, Hooks } from 'react-table'; import { SelectionColumn, SELECTION_CELL_ID } from '../columns/index.js'; export const useSelectionCell = diff --git a/packages/itwinui-react/src/core/Table/hooks/useStickyColumns.tsx b/packages/itwinui-react/src/core/Table/hooks/useStickyColumns.tsx index 6fdd04e7bb2..d8480445ed6 100644 --- a/packages/itwinui-react/src/core/Table/hooks/useStickyColumns.tsx +++ b/packages/itwinui-react/src/core/Table/hooks/useStickyColumns.tsx @@ -2,13 +2,8 @@ * Copyright (c) Bentley Systems, Incorporated. All rights reserved. * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ -import { actions } from '../types/react-table-types.js'; -import type { - ActionType, - Hooks, - TableInstance, - TableState, -} from '../types/react-table-types.js'; +import { actions } from 'react-table'; +import type { ActionType, Hooks, TableInstance, TableState } from 'react-table'; actions.setScrolledLeft = 'setScrolledLeft'; actions.setScrolledRight = 'setScrolledRight'; diff --git a/packages/itwinui-react/src/core/Table/hooks/useSubRowFiltering.tsx b/packages/itwinui-react/src/core/Table/hooks/useSubRowFiltering.tsx index ac0bbf7c4ef..84183095b98 100644 --- a/packages/itwinui-react/src/core/Table/hooks/useSubRowFiltering.tsx +++ b/packages/itwinui-react/src/core/Table/hooks/useSubRowFiltering.tsx @@ -3,12 +3,7 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; -import type { - Hooks, - IdType, - Row, - TableInstance, -} from '../types/react-table-types.js'; +import type { Hooks, IdType, Row, TableInstance } from 'react-table'; import { defaultFilterFunctions } from '../filters/defaultFilterFunctions.js'; export const useSubRowFiltering = diff --git a/packages/itwinui-react/src/core/Table/hooks/useSubRowSelection.tsx b/packages/itwinui-react/src/core/Table/hooks/useSubRowSelection.tsx index a7d4c5660b5..24180f3a9cb 100644 --- a/packages/itwinui-react/src/core/Table/hooks/useSubRowSelection.tsx +++ b/packages/itwinui-react/src/core/Table/hooks/useSubRowSelection.tsx @@ -3,12 +3,7 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; -import type { - Hooks, - IdType, - Row, - TableInstance, -} from '../types/react-table-types.js'; +import type { Hooks, IdType, Row, TableInstance } from 'react-table'; export const useSubRowSelection = >( hooks: Hooks, diff --git a/packages/itwinui-react/src/core/Table/utils.ts b/packages/itwinui-react/src/core/Table/utils.ts index a7ff8496bc6..e012cbb630a 100644 --- a/packages/itwinui-react/src/core/Table/utils.ts +++ b/packages/itwinui-react/src/core/Table/utils.ts @@ -2,7 +2,7 @@ * Copyright (c) Bentley Systems, Incorporated. All rights reserved. * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ -import type { ColumnInstance } from './types/react-table-types.js'; +import type { ColumnInstance } from 'react-table'; export const getCellStyle = >( column: ColumnInstance, From 952101053b25184bf1b2664b27edfa422015adad Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Wed, 30 Aug 2023 17:28:52 -0400 Subject: [PATCH 067/196] Removed the declare module wrapper to solve the "namespace does not export ..." error --- .../itwinui-react/src/core/Table/types/react-table-types.d.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/itwinui-react/src/core/Table/types/react-table-types.d.ts b/packages/itwinui-react/src/core/Table/types/react-table-types.d.ts index 08823b85432..edb3000c13f 100644 --- a/packages/itwinui-react/src/core/Table/types/react-table-types.d.ts +++ b/packages/itwinui-react/src/core/Table/types/react-table-types.d.ts @@ -38,7 +38,7 @@ import type { import type { TableFilterProps, TableFilterValue } from '../index.js'; import type { CommonProps } from '../../utils/props.js'; -declare module 'react-table' { +// declare module 'react-table' { export const testingVar = 0; // export {}; @@ -1341,4 +1341,4 @@ declare module 'react-table' { */ isDisabled?: (rowData: D) => boolean; }; -} +// } From 30b882f542f4df2c2afdbe4ee73afa28bf6fbdf4 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Wed, 30 Aug 2023 17:29:50 -0400 Subject: [PATCH 068/196] Reformat file --- .../core/Table/types/react-table-types.d.ts | 2507 ++++++++--------- 1 file changed, 1244 insertions(+), 1263 deletions(-) diff --git a/packages/itwinui-react/src/core/Table/types/react-table-types.d.ts b/packages/itwinui-react/src/core/Table/types/react-table-types.d.ts index edb3000c13f..e4e734f7471 100644 --- a/packages/itwinui-react/src/core/Table/types/react-table-types.d.ts +++ b/packages/itwinui-react/src/core/Table/types/react-table-types.d.ts @@ -39,1306 +39,1287 @@ import type { TableFilterProps, TableFilterValue } from '../index.js'; import type { CommonProps } from '../../utils/props.js'; // declare module 'react-table' { - export const testingVar = 0; - // export {}; - +export const testingVar = 0; +// export {}; + +/** + * The empty definitions of below provides a base definition for the parts used by useTable, that can then be extended in the users code. + * + * @example + * export interface TableOptions = {}}> + * extends + * UseExpandedOptions, + * UseFiltersOptions {} + * see https://gist.github.com/ggascoigne/646e14c9d54258e40588a13aabf0102d for more details + */ +export interface TableOptions> + extends Omit, 'data' | 'columns'>, + UseRowSelectOptions, + UseExpandedOptions, + UseFiltersOptions, + // UseGroupByOptions, + UsePaginationOptions, + UseGlobalFiltersOptions, + UseGlobalFiltersColumnOptions, + Omit, 'disableResizing'>, + // UseRowStateOptions, + UseSortByOptions { + /** + * List of columns. + * + * Should not have a top-level `Header` or a `columns` sub-property. They are only allowed to be passed for backwards compatibility. + * See [migration guide](https://github.com/iTwin/iTwinUI/wiki/iTwinUI-react-v2-migration-guide#breaking-changes). + */ + columns: Array>; /** - * The empty definitions of below provides a base definition for the parts used by useTable, that can then be extended in the users code. + * Table data list. + * Must be memoized. * + * Supports expandable sub-rows using the `subRows` field in data entries. + * If some rows don't have sub-data, it is recommended to pass an empty array to `subRows` for consistent spacing. + */ + data: D[]; + /** + * Column's resize mode. + * - `fit` - when resizing it affects current and the next column, + * e.g. when increasing width of current column, next column's width will decrease. + * - `expand` - when resizing it affects only the current column, + * e.g. when increasing width of the current column, next column's width remains the same. + * @default 'fit' + */ + columnResizeMode?: 'fit' | 'expand'; +} + +export interface TableInstance = {}> + extends Omit, 'columns' | 'pageCount'>, + UseTableInstanceProps, + UseColumnOrderInstanceProps, + UseExpandedInstanceProps, + UseFiltersInstanceProps, + UseGlobalFiltersInstanceProps, + UseGroupByInstanceProps, + UsePaginationInstanceProps, + UseRowSelectInstanceProps, + UseRowStateInstanceProps, + UseSortByInstanceProps { + initialRows: Row[]; + columnResizeMode: TableOptions['columnResizeMode']; + tableWidth: number; +} + +export interface TableState = {}> + extends UseColumnOrderState, + UseExpandedState, + UseFiltersState, + UseGlobalFiltersState, + UseGroupByState, + UsePaginationState, + UseRowSelectState, + UseRowStateState, + UseSortByState { + hiddenColumns?: Array> | undefined; + + // UseResizeColumnsState with fixed typings + columnResizing: { + startX?: number; + columnWidth?: number; + nextColumnWidth?: number; + headerIdWidths?: Array<[string, number]>; + nextHeaderIdWidths?: Array<[string, number]>; + columnWidths: Record; + isResizingColumn?: string; + }; + isTableResizing?: boolean; + columnReorderStartIndex: number; + sticky: { + isScrolledToRight?: boolean; + isScrolledToLeft?: boolean; + }; + lastSelectedRowId?: string; +} + +export interface Hooks = {}> + extends UseTableHooks, + UseExpandedHooks, + UseGroupByHooks, + UseRowSelectHooks, + UseSortByHooks {} + +export interface Cell = {}, V = any> + extends UseTableCellProps, + UseGroupByCellProps, + UseRowStateCellProps {} + +export interface ColumnInterface = {}> + extends UseTableColumnOptions, + // UseGroupByColumnOptions, + UseSortByColumnOptions, + UseFiltersColumnOptions, + UseResizeColumnsColumnOptions, + UseGlobalFiltersColumnOptions { + /** + * Custom class name applied to header column cell. + */ + columnClassName?: string; + /** + * Custom class name applied to each column's cell. + */ + cellClassName?: string; + /** + * Type of the data in cell. Used for manual filtering. + */ + fieldType?: FieldType; + /** + * Filter component used as a column filter. Should use filters from `tableFilters`. + */ + Filter?: Renderer> | Renderer>; + /** + * String value or custom function to use for filtering. + * Possible string values: `text`, `exactText`, `exactTextCase`, `includes`, `includesAll`, `exact`, `equals`, `between`. + * More info about these filters: https://github.com/tannerlinsley/react-table/blob/master/src/filterTypes.js + */ + filter?: FilterType | DefaultFilterTypes | string; + /** + * Function that should return whole cell element not only the content. + * Must be memoized. * @example - * export interface TableOptions = {}}> - * extends - * UseExpandedOptions, - * UseFiltersOptions {} - * see https://gist.github.com/ggascoigne/646e14c9d54258e40588a13aabf0102d for more details + * { + * Header: 'Name', + * accessor: 'name', + * cellRenderer: (props) => , + * } */ - export interface TableOptions> - extends Omit, 'data' | 'columns'>, - UseRowSelectOptions, - UseExpandedOptions, - UseFiltersOptions, - // UseGroupByOptions, - UsePaginationOptions, - UseGlobalFiltersOptions, - UseGlobalFiltersColumnOptions, - Omit, 'disableResizing'>, - // UseRowStateOptions, - UseSortByOptions { - /** - * List of columns. - * - * Should not have a top-level `Header` or a `columns` sub-property. They are only allowed to be passed for backwards compatibility. - * See [migration guide](https://github.com/iTwin/iTwinUI/wiki/iTwinUI-react-v2-migration-guide#breaking-changes). - */ - columns: Array>; - /** - * Table data list. - * Must be memoized. - * - * Supports expandable sub-rows using the `subRows` field in data entries. - * If some rows don't have sub-data, it is recommended to pass an empty array to `subRows` for consistent spacing. - */ - data: D[]; - /** - * Column's resize mode. - * - `fit` - when resizing it affects current and the next column, - * e.g. when increasing width of current column, next column's width will decrease. - * - `expand` - when resizing it affects only the current column, - * e.g. when increasing width of the current column, next column's width remains the same. - * @default 'fit' - */ - columnResizeMode?: 'fit' | 'expand'; - } - - export interface TableInstance = {}> - extends Omit, 'columns' | 'pageCount'>, - UseTableInstanceProps, - UseColumnOrderInstanceProps, - UseExpandedInstanceProps, - UseFiltersInstanceProps, - UseGlobalFiltersInstanceProps, - UseGroupByInstanceProps, - UsePaginationInstanceProps, - UseRowSelectInstanceProps, - UseRowStateInstanceProps, - UseSortByInstanceProps { - initialRows: Row[]; - columnResizeMode: TableOptions['columnResizeMode']; - tableWidth: number; - } - - export interface TableState = {}> - extends UseColumnOrderState, - UseExpandedState, - UseFiltersState, - UseGlobalFiltersState, - UseGroupByState, - UsePaginationState, - UseRowSelectState, - UseRowStateState, - UseSortByState { - hiddenColumns?: Array> | undefined; - - // UseResizeColumnsState with fixed typings - columnResizing: { - startX?: number; - columnWidth?: number; - nextColumnWidth?: number; - headerIdWidths?: Array<[string, number]>; - nextHeaderIdWidths?: Array<[string, number]>; - columnWidths: Record; - isResizingColumn?: string; - }; - isTableResizing?: boolean; - columnReorderStartIndex: number; - sticky: { - isScrolledToRight?: boolean; - isScrolledToLeft?: boolean; - }; - lastSelectedRowId?: string; - } - - export interface Hooks = {}> - extends UseTableHooks, - UseExpandedHooks, - UseGroupByHooks, - UseRowSelectHooks, - UseSortByHooks {} - - export interface Cell = {}, V = any> - extends UseTableCellProps, - UseGroupByCellProps, - UseRowStateCellProps {} - - export interface ColumnInterface = {}> - extends UseTableColumnOptions, - // UseGroupByColumnOptions, - UseSortByColumnOptions, - UseFiltersColumnOptions, - UseResizeColumnsColumnOptions, - UseGlobalFiltersColumnOptions { - /** - * Custom class name applied to header column cell. - */ - columnClassName?: string; - /** - * Custom class name applied to each column's cell. - */ - cellClassName?: string; - /** - * Type of the data in cell. Used for manual filtering. - */ - fieldType?: FieldType; - /** - * Filter component used as a column filter. Should use filters from `tableFilters`. - */ - Filter?: Renderer> | Renderer>; - /** - * String value or custom function to use for filtering. - * Possible string values: `text`, `exactText`, `exactTextCase`, `includes`, `includesAll`, `exact`, `equals`, `between`. - * More info about these filters: https://github.com/tannerlinsley/react-table/blob/master/src/filterTypes.js - */ - filter?: FilterType | DefaultFilterTypes | string; - /** - * Function that should return whole cell element not only the content. - * Must be memoized. - * @example - * { - * Header: 'Name', - * accessor: 'name', - * cellRenderer: (props) => , - * } - */ - cellRenderer?: (props: CellRendererProps) => React.ReactNode; - /** - * If true, column can't be reordered. - * @default false - */ - disableReordering?: boolean; - /** - * If true, column's visibility cannot be toggled. - * @default false - */ - disableToggleVisibility?: boolean; - /** - * Side on which column should be sticked to. - */ - sticky?: 'left' | 'right'; - } - - export interface ColumnInterfaceBasedOnValue< - D extends Record = {}, - V = any, - > { - Cell?: Renderer> | undefined; - } - - export interface ColumnGroupInterface> { - // columns: Array>; - } - - export type ColumnGroup = {}> = - ColumnInterface & - ColumnGroupInterface & - ( - | { Header: string } - | ({ id: IdType } & { - Header: Renderer>; - }) - ) & { accessor?: Accessor | undefined }; // Not used, but needed for backwards compatibility - - type ValueOf = T[keyof T]; - - // The accessors like `foo.bar` are not supported, use functions instead - export type ColumnWithStrictAccessor = {}> = - ColumnInterface & - ValueOf<{ - [K in keyof D]: { - accessor: K; - // Cell?: Renderer> | undefined; - } & ColumnInterfaceBasedOnValue; - // } & ColumnInterfaceBasedOnValue; - }>; - - export type ColumnWithLooseAccessor = {}> = - ColumnInterface & - ColumnInterfaceBasedOnValue & - ( - | { Header: string } - | { id: IdType } - | { accessor: keyof D extends never ? IdType : never } - ) & { - accessor?: - | (keyof D extends never ? IdType | Accessor : Accessor) - | undefined; - }; - - export type Column = {}> = - // ColumnWithStrictAccessor; - ColumnGroup | ColumnWithLooseAccessor | ColumnWithStrictAccessor; - - export interface ColumnInstance = {}> - extends Omit, 'id'>, - ColumnInterfaceBasedOnValue, - UseTableColumnProps, - UseFiltersColumnProps, - UseGroupByColumnProps, - UseResizeColumnsColumnProps, - UseSortByColumnProps { - originalWidth: number; - resizeWidth?: number; - isResizerVisible?: boolean; - getDragAndDropProps: () => TableKeyedProps; - originalSticky?: 'left' | 'right' | 'none'; - } - - export interface HeaderGroup = {}> - extends ColumnInstance, - UseTableHeaderGroupProps {} - - export interface Row = {}> - extends UseTableRowProps, - UseExpandedRowProps, - UseGroupByRowProps, - UseRowSelectRowProps, - UseRowStateRowProps { - initialSubRows: Row[]; - } - - export interface TableCommonProps { - style?: CSSProperties | undefined; - className?: string | undefined; - role?: string | undefined; - } - - export interface TableProps extends TableCommonProps {} - - export interface TableBodyProps extends TableCommonProps {} - - export interface TableKeyedProps extends TableCommonProps { - key: React.Key; - } - - export interface TableHeaderGroupProps extends TableKeyedProps {} - - export interface TableFooterGroupProps extends TableKeyedProps {} - - export interface TableHeaderProps extends TableKeyedProps {} - - export interface TableFooterProps extends TableKeyedProps {} - - export interface TableRowProps extends TableKeyedProps {} - - export interface TableCellProps extends TableKeyedProps {} - - export interface TableToggleCommonProps extends TableCommonProps { - onChange?: ((e: ChangeEvent) => void) | undefined; - checked?: boolean | undefined; - title?: string | undefined; - indeterminate?: boolean | undefined; - } - - export interface MetaBase> { - instance: TableInstance; - userProps: any; - } - - // inspired by ExtendState in https://github.com/reduxjs/redux/blob/master/src/types/store.ts - export type Meta< - D extends Record, - Extension = never, - M = MetaBase, - > = [Extension] extends [never] ? M : M & Extension; - - //#region useTable - export function useTable = {}>( - options: TableOptions, - ...plugins: Array> - ): TableInstance; - + cellRenderer?: (props: CellRendererProps) => React.ReactNode; + /** + * If true, column can't be reordered. + * @default false + */ + disableReordering?: boolean; /** - * NOTE: To use custom options, use "Interface Merging" to add the custom options + * If true, column's visibility cannot be toggled. + * @default false */ - export type UseTableOptions> = { - columns: ReadonlyArray>; - data: readonly D[]; - } & Partial<{ - initialState: Partial>; - stateReducer: ( + disableToggleVisibility?: boolean; + /** + * Side on which column should be sticked to. + */ + sticky?: 'left' | 'right'; +} + +export interface ColumnInterfaceBasedOnValue< + D extends Record = {}, + V = any, +> { + Cell?: Renderer> | undefined; +} + +export interface ColumnGroupInterface> { + // columns: Array>; +} + +export type ColumnGroup = {}> = + ColumnInterface & + ColumnGroupInterface & + ( + | { Header: string } + | ({ id: IdType } & { + Header: Renderer>; + }) + ) & { accessor?: Accessor | undefined }; // Not used, but needed for backwards compatibility + +type ValueOf = T[keyof T]; + +// The accessors like `foo.bar` are not supported, use functions instead +export type ColumnWithStrictAccessor = {}> = + ColumnInterface & + ValueOf<{ + [K in keyof D]: { + accessor: K; + // Cell?: Renderer> | undefined; + } & ColumnInterfaceBasedOnValue; + // } & ColumnInterfaceBasedOnValue; + }>; + +export type ColumnWithLooseAccessor = {}> = + ColumnInterface & + ColumnInterfaceBasedOnValue & + ( + | { Header: string } + | { id: IdType } + | { accessor: keyof D extends never ? IdType : never } + ) & { + accessor?: + | (keyof D extends never ? IdType | Accessor : Accessor) + | undefined; + }; + +export type Column = {}> = + // ColumnWithStrictAccessor; + ColumnGroup | ColumnWithLooseAccessor | ColumnWithStrictAccessor; + +export interface ColumnInstance = {}> + extends Omit, 'id'>, + ColumnInterfaceBasedOnValue, + UseTableColumnProps, + UseFiltersColumnProps, + UseGroupByColumnProps, + UseResizeColumnsColumnProps, + UseSortByColumnProps { + originalWidth: number; + resizeWidth?: number; + isResizerVisible?: boolean; + getDragAndDropProps: () => TableKeyedProps; + originalSticky?: 'left' | 'right' | 'none'; +} + +export interface HeaderGroup = {}> + extends ColumnInstance, + UseTableHeaderGroupProps {} + +export interface Row = {}> + extends UseTableRowProps, + UseExpandedRowProps, + UseGroupByRowProps, + UseRowSelectRowProps, + UseRowStateRowProps { + initialSubRows: Row[]; +} + +export interface TableCommonProps { + style?: CSSProperties | undefined; + className?: string | undefined; + role?: string | undefined; +} + +export interface TableProps extends TableCommonProps {} + +export interface TableBodyProps extends TableCommonProps {} + +export interface TableKeyedProps extends TableCommonProps { + key: React.Key; +} + +export interface TableHeaderGroupProps extends TableKeyedProps {} + +export interface TableFooterGroupProps extends TableKeyedProps {} + +export interface TableHeaderProps extends TableKeyedProps {} + +export interface TableFooterProps extends TableKeyedProps {} + +export interface TableRowProps extends TableKeyedProps {} + +export interface TableCellProps extends TableKeyedProps {} + +export interface TableToggleCommonProps extends TableCommonProps { + onChange?: ((e: ChangeEvent) => void) | undefined; + checked?: boolean | undefined; + title?: string | undefined; + indeterminate?: boolean | undefined; +} + +export interface MetaBase> { + instance: TableInstance; + userProps: any; +} + +// inspired by ExtendState in https://github.com/reduxjs/redux/blob/master/src/types/store.ts +export type Meta< + D extends Record, + Extension = never, + M = MetaBase, +> = [Extension] extends [never] ? M : M & Extension; + +//#region useTable +export function useTable = {}>( + options: TableOptions, + ...plugins: Array> +): TableInstance; + +/** + * NOTE: To use custom options, use "Interface Merging" to add the custom options + */ +export type UseTableOptions> = { + columns: ReadonlyArray>; + data: readonly D[]; +} & Partial<{ + initialState: Partial>; + stateReducer: ( + newState: TableState, + action: ActionType, + previousState: TableState, + instance?: TableInstance, + ) => TableState; + useControlledState: (state: TableState, meta: Meta) => TableState; + defaultColumn: Partial>; + getSubRows: (originalRow: D, relativeIndex: number) => D[]; + getRowId: (originalRow: D, relativeIndex: number, parent?: Row) => string; + autoResetHiddenColumns: boolean; +}>; + +export type PropGetter< + D extends Record, + Props, + T extends object = never, + P = Partial, +> = ((props: P, meta: Meta) => P | P[]) | P | P[]; + +export type TablePropGetter> = PropGetter< + D, + TableProps +>; + +export type TableBodyPropGetter> = PropGetter< + D, + TableBodyProps +>; + +export type HeaderPropGetter> = PropGetter< + D, + TableHeaderProps, + { column: HeaderGroup } +>; + +export type FooterGroupPropGetter> = + PropGetter }>; + +export type HeaderGroupPropGetter> = + PropGetter }>; + +export type FooterPropGetter> = PropGetter< + D, + TableFooterProps, + { column: HeaderGroup } +>; + +export type RowPropGetter> = PropGetter< + D, + TableRowProps, + { row: Row } +>; + +export type CellPropGetter> = PropGetter< + D, + TableCellProps, + { cell: Cell } +>; + +export interface ReducerTableState> + extends TableState, + Record {} + +export interface UseTableHooks> + extends Record { + useOptions: Array< + (options: TableOptions, args: TableOptions) => TableOptions + >; + stateReducers: Array< + ( newState: TableState, action: ActionType, - previousState: TableState, + previousState?: TableState, instance?: TableInstance, - ) => TableState; - useControlledState: (state: TableState, meta: Meta) => TableState; - defaultColumn: Partial>; - getSubRows: (originalRow: D, relativeIndex: number) => D[]; - getRowId: ( - originalRow: D, - relativeIndex: number, - parent?: Row, - ) => string; - autoResetHiddenColumns: boolean; - }>; - - export type PropGetter< - D extends Record, - Props, - T extends object = never, - P = Partial, - > = ((props: P, meta: Meta) => P | P[]) | P | P[]; - - export type TablePropGetter> = PropGetter< - D, - TableProps + ) => ReducerTableState | undefined >; - - export type TableBodyPropGetter> = - PropGetter; - - export type HeaderPropGetter> = PropGetter< - D, - TableHeaderProps, - { column: HeaderGroup } + columns: Array< + (columns: Array>, meta: Meta) => Array> >; - - export type FooterGroupPropGetter> = - PropGetter }>; - - export type HeaderGroupPropGetter> = - PropGetter }>; - - export type FooterPropGetter> = PropGetter< - D, - TableFooterProps, - { column: HeaderGroup } + columnsDeps: Array<(deps: any[], meta: Meta) => any[]>; + allColumns: Array< + (allColumns: Array>, meta: Meta) => Array> >; - - export type RowPropGetter> = PropGetter< - D, - TableRowProps, - { row: Row } + allColumnsDeps: Array<(deps: any[], meta: Meta) => any[]>; + visibleColumns: Array< + (allColumns: Array>, meta: Meta) => Array> >; - - export type CellPropGetter> = PropGetter< - D, - TableCellProps, - { cell: Cell } + visibleColumnsDeps: Array<(deps: any[], meta: Meta) => any[]>; + headerGroups: Array< + (allColumns: Array>, meta: Meta) => Array> + >; + headerGroupsDeps: Array<(deps: any[], meta: Meta) => any[]>; + useInstanceBeforeDimensions: Array<(instance: TableInstance) => void>; + useInstance: Array<(instance: TableInstance) => void>; + prepareRow: Array<(row: Row, meta: Meta) => void>; + useControlledState: Array< + (state: TableState, meta: Meta) => TableState >; - export interface ReducerTableState> - extends TableState, - Record {} - - export interface UseTableHooks> - extends Record { - useOptions: Array< - (options: TableOptions, args: TableOptions) => TableOptions - >; - stateReducers: Array< - ( - newState: TableState, - action: ActionType, - previousState?: TableState, - instance?: TableInstance, - ) => ReducerTableState | undefined - >; - columns: Array< - (columns: Array>, meta: Meta) => Array> - >; - columnsDeps: Array<(deps: any[], meta: Meta) => any[]>; - allColumns: Array< - (allColumns: Array>, meta: Meta) => Array> - >; - allColumnsDeps: Array<(deps: any[], meta: Meta) => any[]>; - visibleColumns: Array< - (allColumns: Array>, meta: Meta) => Array> - >; - visibleColumnsDeps: Array<(deps: any[], meta: Meta) => any[]>; - headerGroups: Array< - ( - allColumns: Array>, - meta: Meta, - ) => Array> - >; - headerGroupsDeps: Array<(deps: any[], meta: Meta) => any[]>; - useInstanceBeforeDimensions: Array<(instance: TableInstance) => void>; - useInstance: Array<(instance: TableInstance) => void>; - prepareRow: Array<(row: Row, meta: Meta) => void>; - useControlledState: Array< - (state: TableState, meta: Meta) => TableState - >; - - getTableProps: Array>; - getTableBodyProps: Array>; - getHeaderGroupProps: Array>; - getFooterGroupProps: Array>; - getHeaderProps: Array>; - getFooterProps: Array>; - getRowProps: Array>; - getCellProps: Array>; - useFinalInstance: Array<(instance: TableInstance) => void>; - } - - export interface UseTableColumnOptions> { - id?: IdType | undefined; - Header?: Renderer> | undefined; - Footer?: Renderer> | undefined; - width?: number | string | undefined; - minWidth?: number | undefined; - maxWidth?: number | undefined; - } - - type UpdateHiddenColumns> = ( - oldHidden: Array>, - ) => Array>; - - export interface TableToggleHideAllColumnProps - extends TableToggleCommonProps {} - - export interface UseTableInstanceProps> { - state: TableState; - plugins: Array>; - dispatch: TableDispatch; - columns: Array>; - allColumns: Array>; - visibleColumns: Array>; - headerGroups: Array>; - footerGroups: Array>; - headers: Array>; - flatHeaders: Array>; - rows: Array>; - rowsById: Record>; - getTableProps: (propGetter?: TablePropGetter) => TableProps; - getTableBodyProps: (propGetter?: TableBodyPropGetter) => TableBodyProps; - prepareRow: (row: Row) => void; - flatRows: Array>; - totalColumnsWidth: number; - allColumnsHidden: boolean; - toggleHideColumn: (columnId: IdType, value?: boolean) => void; - setHiddenColumns: ( - param: Array> | UpdateHiddenColumns, - ) => void; - toggleHideAllColumns: (value?: boolean) => void; - getToggleHideAllColumnsProps: ( - props?: Partial, - ) => TableToggleHideAllColumnProps; - getHooks: () => Hooks; - } - - export interface UseTableHeaderGroupProps> { - headers: Array>; - getHeaderGroupProps: ( - propGetter?: HeaderGroupPropGetter, - ) => TableHeaderProps; - getFooterGroupProps: ( - propGetter?: FooterGroupPropGetter, - ) => TableFooterProps; - totalHeaderCount: number; // not documented - } - - export interface UseTableColumnProps> { - id: IdType; - columns?: Array> | undefined; - isVisible: boolean; - render: (type: 'Header' | 'Footer' | string, props?: object) => ReactNode; - totalLeft: number; - totalWidth: number; - getHeaderProps: (propGetter?: HeaderPropGetter) => TableHeaderProps; - getFooterProps: (propGetter?: FooterPropGetter) => TableFooterProps; - toggleHidden: (value?: boolean) => void; - parent?: ColumnInstance | undefined; // not documented - getToggleHiddenProps: (userProps?: any) => any; - depth: number; // not documented - placeholderOf?: ColumnInstance | undefined; - } - - export interface UseTableRowProps> { - cells: Array>; - allCells: Array>; - values: Record, CellValue>; - getRowProps: (propGetter?: RowPropGetter) => TableRowProps; - index: number; - original: D; - id: string; - subRows: Array>; - } - - export interface UseTableCellProps< - D extends Record, - V = any, - > { + getTableProps: Array>; + getTableBodyProps: Array>; + getHeaderGroupProps: Array>; + getFooterGroupProps: Array>; + getHeaderProps: Array>; + getFooterProps: Array>; + getRowProps: Array>; + getCellProps: Array>; + useFinalInstance: Array<(instance: TableInstance) => void>; +} + +export interface UseTableColumnOptions> { + id?: IdType | undefined; + Header?: Renderer> | undefined; + Footer?: Renderer> | undefined; + width?: number | string | undefined; + minWidth?: number | undefined; + maxWidth?: number | undefined; +} + +type UpdateHiddenColumns> = ( + oldHidden: Array>, +) => Array>; + +export interface TableToggleHideAllColumnProps extends TableToggleCommonProps {} + +export interface UseTableInstanceProps> { + state: TableState; + plugins: Array>; + dispatch: TableDispatch; + columns: Array>; + allColumns: Array>; + visibleColumns: Array>; + headerGroups: Array>; + footerGroups: Array>; + headers: Array>; + flatHeaders: Array>; + rows: Array>; + rowsById: Record>; + getTableProps: (propGetter?: TablePropGetter) => TableProps; + getTableBodyProps: (propGetter?: TableBodyPropGetter) => TableBodyProps; + prepareRow: (row: Row) => void; + flatRows: Array>; + totalColumnsWidth: number; + allColumnsHidden: boolean; + toggleHideColumn: (columnId: IdType, value?: boolean) => void; + setHiddenColumns: (param: Array> | UpdateHiddenColumns) => void; + toggleHideAllColumns: (value?: boolean) => void; + getToggleHideAllColumnsProps: ( + props?: Partial, + ) => TableToggleHideAllColumnProps; + getHooks: () => Hooks; +} + +export interface UseTableHeaderGroupProps> { + headers: Array>; + getHeaderGroupProps: ( + propGetter?: HeaderGroupPropGetter, + ) => TableHeaderProps; + getFooterGroupProps: ( + propGetter?: FooterGroupPropGetter, + ) => TableFooterProps; + totalHeaderCount: number; // not documented +} + +export interface UseTableColumnProps> { + id: IdType; + columns?: Array> | undefined; + isVisible: boolean; + render: (type: 'Header' | 'Footer' | string, props?: object) => ReactNode; + totalLeft: number; + totalWidth: number; + getHeaderProps: (propGetter?: HeaderPropGetter) => TableHeaderProps; + getFooterProps: (propGetter?: FooterPropGetter) => TableFooterProps; + toggleHidden: (value?: boolean) => void; + parent?: ColumnInstance | undefined; // not documented + getToggleHiddenProps: (userProps?: any) => any; + depth: number; // not documented + placeholderOf?: ColumnInstance | undefined; +} + +export interface UseTableRowProps> { + cells: Array>; + allCells: Array>; + values: Record, CellValue>; + getRowProps: (propGetter?: RowPropGetter) => TableRowProps; + index: number; + original: D; + id: string; + subRows: Array>; +} + +export interface UseTableCellProps, V = any> { + column: ColumnInstance; + row: Row; + value: CellValue; + getCellProps: (propGetter?: CellPropGetter) => TableCellProps; + render: (type: 'Cell' | string, userProps?: object) => ReactNode; +} + +export type HeaderProps> = + TableInstance & { column: ColumnInstance; - row: Row; - value: CellValue; - getCellProps: (propGetter?: CellPropGetter) => TableCellProps; - render: (type: 'Cell' | string, userProps?: object) => ReactNode; - } - - export type HeaderProps> = - TableInstance & { - column: ColumnInstance; - }; - - export type FooterProps> = - TableInstance & { - column: ColumnInstance; - }; + }; - export type CellProps< - D extends Record, - V = any, - > = TableInstance & { +export type FooterProps> = + TableInstance & { column: ColumnInstance; - row: Row; - cell: Cell; - value: CellValue; }; - export type Accessor> = ( - originalRow: D, - index: number, - sub: { - subRows: D[]; - depth: number; - data: D[]; - }, - ) => CellValue; - - //#endregion - - // Plugins - - //#region useAbsoluteLayout - export function useAbsoluteLayout = {}>( - hooks: Hooks, - ): void; - - export namespace useAbsoluteLayout { - const pluginName = 'useAbsoluteLayout'; - } - //#endregion - - //#region useBlockLayout - export function useBlockLayout = {}>( - hooks: Hooks, - ): void; - - export namespace useBlockLayout { - const pluginName = 'useBlockLayout'; - } - //#endregion - - //#region useColumnOrder - export function useColumnOrder = {}>( - hooks: Hooks, - ): void; - - export namespace useColumnOrder { - const pluginName = 'useColumnOrder'; - } - - export interface UseColumnOrderState> { - columnOrder: Array>; - } - - export interface UseColumnOrderInstanceProps< - D extends Record, - > { - setColumnOrder: ( - updater: - | ((columnOrder: Array>) => Array>) - | Array>, - ) => void; - } - - //#endregion - - //#region useExpanded - export function useExpanded = {}>( - hooks: Hooks, - ): void; - - export namespace useExpanded { - const pluginName = 'useExpanded'; - } - - export interface TableExpandedToggleProps extends TableKeyedProps {} - - export type UseExpandedOptions> = Partial<{ - manualExpandedKey: IdType; - paginateExpandedRows: boolean; - expandSubRows: boolean; - autoResetExpanded?: boolean | undefined; - }>; - - export interface UseExpandedHooks> { - getToggleRowsExpandedProps: Array>; - getToggleAllRowsExpandedProps: Array>; - } - - export interface UseExpandedState> { - expanded: Record, boolean>; - } - - export interface UseExpandedInstanceProps> { - preExpandedRows: Array>; - expandedRows: Array>; - rows: Array>; - expandedDepth: number; - isAllRowsExpanded: boolean; - toggleRowExpanded: (id: Array>, value?: boolean) => void; - toggleAllRowsExpanded: (value?: boolean) => void; - } - - export interface UseExpandedRowProps> { - isExpanded: boolean; - canExpand: boolean; - subRows: Array>; - toggleRowExpanded: (value?: boolean) => void; - getToggleRowExpandedProps: ( - props?: Partial, - ) => TableExpandedToggleProps; +export type CellProps< + D extends Record, + V = any, +> = TableInstance & { + column: ColumnInstance; + row: Row; + cell: Cell; + value: CellValue; +}; + +export type Accessor> = ( + originalRow: D, + index: number, + sub: { + subRows: D[]; depth: number; - } - - //#endregion - - //#region useFilters - export function useFilters = {}>( - hooks: Hooks, - ): void; - - export namespace useFilters { - const pluginName = 'useFilters'; - } - - export type UseFiltersOptions> = Partial<{ - manualFilters: boolean; + data: D[]; + }, +) => CellValue; + +//#endregion + +// Plugins + +//#region useAbsoluteLayout +export function useAbsoluteLayout = {}>( + hooks: Hooks, +): void; + +export namespace useAbsoluteLayout { + const pluginName = 'useAbsoluteLayout'; +} +//#endregion + +//#region useBlockLayout +export function useBlockLayout = {}>( + hooks: Hooks, +): void; + +export namespace useBlockLayout { + const pluginName = 'useBlockLayout'; +} +//#endregion + +//#region useColumnOrder +export function useColumnOrder = {}>( + hooks: Hooks, +): void; + +export namespace useColumnOrder { + const pluginName = 'useColumnOrder'; +} + +export interface UseColumnOrderState> { + columnOrder: Array>; +} + +export interface UseColumnOrderInstanceProps< + D extends Record, +> { + setColumnOrder: ( + updater: + | ((columnOrder: Array>) => Array>) + | Array>, + ) => void; +} + +//#endregion + +//#region useExpanded +export function useExpanded = {}>( + hooks: Hooks, +): void; + +export namespace useExpanded { + const pluginName = 'useExpanded'; +} + +export interface TableExpandedToggleProps extends TableKeyedProps {} + +export type UseExpandedOptions> = Partial<{ + manualExpandedKey: IdType; + paginateExpandedRows: boolean; + expandSubRows: boolean; + autoResetExpanded?: boolean | undefined; +}>; + +export interface UseExpandedHooks> { + getToggleRowsExpandedProps: Array>; + getToggleAllRowsExpandedProps: Array>; +} + +export interface UseExpandedState> { + expanded: Record, boolean>; +} + +export interface UseExpandedInstanceProps> { + preExpandedRows: Array>; + expandedRows: Array>; + rows: Array>; + expandedDepth: number; + isAllRowsExpanded: boolean; + toggleRowExpanded: (id: Array>, value?: boolean) => void; + toggleAllRowsExpanded: (value?: boolean) => void; +} + +export interface UseExpandedRowProps> { + isExpanded: boolean; + canExpand: boolean; + subRows: Array>; + toggleRowExpanded: (value?: boolean) => void; + getToggleRowExpandedProps: ( + props?: Partial, + ) => TableExpandedToggleProps; + depth: number; +} + +//#endregion + +//#region useFilters +export function useFilters = {}>( + hooks: Hooks, +): void; + +export namespace useFilters { + const pluginName = 'useFilters'; +} + +export type UseFiltersOptions> = Partial<{ + manualFilters: boolean; + disableFilters: boolean; + defaultCanFilter: boolean; + filterTypes: FilterTypes; + autoResetFilters?: boolean | undefined; +}>; + +export interface UseFiltersState> { + filters: Filters; +} + +export type UseFiltersColumnOptions> = + Partial<{ + Filter: Renderer>; disableFilters: boolean; defaultCanFilter: boolean; - filterTypes: FilterTypes; - autoResetFilters?: boolean | undefined; + filter: FilterType | DefaultFilterTypes | string; }>; - export interface UseFiltersState> { - filters: Filters; - } - - export type UseFiltersColumnOptions> = - Partial<{ - Filter: Renderer>; - disableFilters: boolean; - defaultCanFilter: boolean; - filter: FilterType | DefaultFilterTypes | string; - }>; +export interface UseFiltersInstanceProps> { + preFilteredRows: Array>; + preFilteredFlatRows: Array>; + preFilteredRowsById: Record>; + filteredRows: Array>; + filteredFlatRows: Array>; + filteredRowsById: Record>; + rows: Array>; + flatRows: Array>; + rowsById: Record>; + setFilter: ( + columnId: IdType, + updater: ((filterValue: FilterValue) => FilterValue) | FilterValue, + ) => void; + setAllFilters: ( + updater: Filters | ((filters: Filters) => Filters), + ) => void; +} + +export interface UseFiltersColumnProps> { + canFilter: boolean; + setFilter: ( + updater: ((filterValue: FilterValue) => FilterValue) | FilterValue, + ) => void; + filterValue: FilterValue; + preFilteredRows: Array>; + filteredRows: Array>; +} + +export type FilterProps> = HeaderProps; +export type FilterValue = any; +export type Filters> = Array<{ + id: IdType; + value: FilterValue; +}>; +export type FilterTypes> = Record< + string, + FilterType +>; + +export type DefaultFilterTypes = + | 'text' + | 'exactText' + | 'exactTextCase' + | 'includes' + | 'includesAll' + | 'exact' + | 'equals' + | 'between'; + +export interface FilterType> { + ( + rows: Array>, + columnIds: Array>, + filterValue: FilterValue, + ): Array>; - export interface UseFiltersInstanceProps> { - preFilteredRows: Array>; - preFilteredFlatRows: Array>; - preFilteredRowsById: Record>; - filteredRows: Array>; - filteredFlatRows: Array>; - filteredRowsById: Record>; - rows: Array>; - flatRows: Array>; - rowsById: Record>; - setFilter: ( - columnId: IdType, - updater: ((filterValue: FilterValue) => FilterValue) | FilterValue, - ) => void; - setAllFilters: ( - updater: Filters | ((filters: Filters) => Filters), - ) => void; - } - - export interface UseFiltersColumnProps> { - canFilter: boolean; - setFilter: ( - updater: ((filterValue: FilterValue) => FilterValue) | FilterValue, - ) => void; - filterValue: FilterValue; - preFilteredRows: Array>; - filteredRows: Array>; - } - - export type FilterProps> = HeaderProps; - export type FilterValue = any; - export type Filters> = Array<{ - id: IdType; - value: FilterValue; + autoRemove?: ((filterValue: FilterValue) => boolean) | undefined; +} + +//#endregion + +//#region useFlexLayout +export function useFlexLayout = {}>( + hooks: Hooks, +): void; + +export namespace useFlexLayout { + const pluginName = 'useFlexLayout'; +} +//#endregion + +//#region useGridLayout +export function useGridLayout = {}>( + hooks: Hooks, +): void; + +export namespace useGridLayout { + const pluginName = 'useGridLayout'; +} +//#endregion + +//#region useGlobalFilter +export function useGlobalFilter = {}>( + hooks: Hooks, +): void; + +export namespace useGlobalFilter { + const pluginName = 'useGlobalFilter'; +} + +export type UseGlobalFiltersOptions> = + Partial<{ + globalFilter: + | (( + rows: Array>, + columnIds: Array>, + filterValue: any, + ) => Array>) + | string; + manualGlobalFilter: boolean; + filterTypes: FilterTypes; + autoResetGlobalFilter?: boolean | undefined; + disableGlobalFilter?: boolean | undefined; }>; - export type FilterTypes> = Record< - string, - FilterType - >; - export type DefaultFilterTypes = - | 'text' - | 'exactText' - | 'exactTextCase' - | 'includes' - | 'includesAll' - | 'exact' - | 'equals' - | 'between'; - - export interface FilterType> { - ( - rows: Array>, - columnIds: Array>, - filterValue: FilterValue, - ): Array>; - - autoRemove?: ((filterValue: FilterValue) => boolean) | undefined; - } - - //#endregion - - //#region useFlexLayout - export function useFlexLayout = {}>( - hooks: Hooks, - ): void; - - export namespace useFlexLayout { - const pluginName = 'useFlexLayout'; - } - //#endregion - - //#region useGridLayout - export function useGridLayout = {}>( - hooks: Hooks, - ): void; - - export namespace useGridLayout { - const pluginName = 'useGridLayout'; - } - //#endregion - - //#region useGlobalFilter - export function useGlobalFilter = {}>( - hooks: Hooks, - ): void; - - export namespace useGlobalFilter { - const pluginName = 'useGlobalFilter'; - } - - export type UseGlobalFiltersOptions> = - Partial<{ - globalFilter: - | (( - rows: Array>, - columnIds: Array>, - filterValue: any, - ) => Array>) - | string; - manualGlobalFilter: boolean; - filterTypes: FilterTypes; - autoResetGlobalFilter?: boolean | undefined; - disableGlobalFilter?: boolean | undefined; - }>; +export interface UseGlobalFiltersState> { + globalFilter: any; +} - export interface UseGlobalFiltersState> { - globalFilter: any; - } - - export type UseGlobalFiltersColumnOptions> = - Partial<{ - disableGlobalFilter?: boolean | undefined; - }>; +export type UseGlobalFiltersColumnOptions> = + Partial<{ + disableGlobalFilter?: boolean | undefined; + }>; - export interface UseGlobalFiltersInstanceProps< - D extends Record, - > { - preGlobalFilteredRows: Array>; - preGlobalFilteredFlatRows: Array>; - preGlobalFilteredRowsById: Record>; - globalFilteredRows: Array>; - globalFilteredFlatRows: Array>; - globalFilteredRowsById: Record>; - rows: Array>; - flatRows: Array>; - rowsById: Record>; - setGlobalFilter: (filterValue: FilterValue) => void; - } - - //#endregion - - //#region useGroupBy - export function useGroupBy = {}>( - hooks: Hooks, - ): void; - - export namespace useGroupBy { - const pluginName = 'useGroupBy'; - } - - export interface TableGroupByToggleProps { - title?: string | undefined; - style?: CSSProperties | undefined; - onClick?: ((e: MouseEvent) => void) | undefined; - } - - export type UseGroupByOptions> = Partial<{ - manualGroupBy: boolean; +export interface UseGlobalFiltersInstanceProps< + D extends Record, +> { + preGlobalFilteredRows: Array>; + preGlobalFilteredFlatRows: Array>; + preGlobalFilteredRowsById: Record>; + globalFilteredRows: Array>; + globalFilteredFlatRows: Array>; + globalFilteredRowsById: Record>; + rows: Array>; + flatRows: Array>; + rowsById: Record>; + setGlobalFilter: (filterValue: FilterValue) => void; +} + +//#endregion + +//#region useGroupBy +export function useGroupBy = {}>( + hooks: Hooks, +): void; + +export namespace useGroupBy { + const pluginName = 'useGroupBy'; +} + +export interface TableGroupByToggleProps { + title?: string | undefined; + style?: CSSProperties | undefined; + onClick?: ((e: MouseEvent) => void) | undefined; +} + +export type UseGroupByOptions> = Partial<{ + manualGroupBy: boolean; + disableGroupBy: boolean; + defaultCanGroupBy: boolean; + aggregations: Record>; + groupByFn: ( + rows: Array>, + columnId: IdType, + ) => Record>>; + autoResetGroupBy?: boolean | undefined; +}>; + +export interface UseGroupByHooks> { + getGroupByToggleProps: Array>; +} + +export interface UseGroupByState> { + groupBy: Array>; +} + +export type UseGroupByColumnOptions> = + Partial<{ + aggregate: Aggregator; + Aggregated: Renderer>; disableGroupBy: boolean; defaultCanGroupBy: boolean; - aggregations: Record>; - groupByFn: ( - rows: Array>, - columnId: IdType, - ) => Record>>; - autoResetGroupBy?: boolean | undefined; }>; - export interface UseGroupByHooks> { - getGroupByToggleProps: Array>; - } - - export interface UseGroupByState> { - groupBy: Array>; - } - - export type UseGroupByColumnOptions> = - Partial<{ - aggregate: Aggregator; - Aggregated: Renderer>; - disableGroupBy: boolean; - defaultCanGroupBy: boolean; - }>; - - export interface UseGroupByInstanceProps> { - preGroupedRows: Array>; - preGroupedFlatRows: Array>; - preGroupedRowsById: Record>; - groupedRows: Array>; - groupedFlatRows: Array>; - groupedRowsById: Record>; - onlyGroupedFlatRows: Array>; - onlyGroupedRowsById: Record>; - nonGroupedFlatRows: Array>; - nonGroupedRowsById: Record>; - rows: Array>; - flatRows: Array>; - rowsById: Record>; - toggleGroupBy: (columnId: IdType, value?: boolean) => void; - } - - export interface UseGroupByColumnProps> { - canGroupBy: boolean; - isGrouped: boolean; - groupedIndex: number; - toggleGroupBy: () => void; - getGroupByToggleProps: ( - props?: Partial, - ) => TableGroupByToggleProps; - } - - export interface UseGroupByRowProps> { - isGrouped: boolean; - groupByID: IdType; - groupByVal: string; - values: Record, AggregatedValue>; - subRows: Array>; - leafRows: Array>; - depth: number; - id: string; - index: number; - } - - export interface UseGroupByCellProps> { - isGrouped: boolean; - isPlaceholder: boolean; - isAggregated: boolean; - } - - export type DefaultAggregators = - | 'sum' - | 'average' - | 'median' - | 'uniqueCount' - | 'count'; - - export type AggregatorFn> = ( - columnValues: CellValue[], +export interface UseGroupByInstanceProps> { + preGroupedRows: Array>; + preGroupedFlatRows: Array>; + preGroupedRowsById: Record>; + groupedRows: Array>; + groupedFlatRows: Array>; + groupedRowsById: Record>; + onlyGroupedFlatRows: Array>; + onlyGroupedRowsById: Record>; + nonGroupedFlatRows: Array>; + nonGroupedRowsById: Record>; + rows: Array>; + flatRows: Array>; + rowsById: Record>; + toggleGroupBy: (columnId: IdType, value?: boolean) => void; +} + +export interface UseGroupByColumnProps> { + canGroupBy: boolean; + isGrouped: boolean; + groupedIndex: number; + toggleGroupBy: () => void; + getGroupByToggleProps: ( + props?: Partial, + ) => TableGroupByToggleProps; +} + +export interface UseGroupByRowProps> { + isGrouped: boolean; + groupByID: IdType; + groupByVal: string; + values: Record, AggregatedValue>; + subRows: Array>; + leafRows: Array>; + depth: number; + id: string; + index: number; +} + +export interface UseGroupByCellProps> { + isGrouped: boolean; + isPlaceholder: boolean; + isAggregated: boolean; +} + +export type DefaultAggregators = + | 'sum' + | 'average' + | 'median' + | 'uniqueCount' + | 'count'; + +export type AggregatorFn> = ( + columnValues: CellValue[], + rows: Array>, + isAggregated: boolean, +) => AggregatedValue; +export type Aggregator> = + | AggregatorFn + | DefaultAggregators + | string; +export type AggregatedValue = any; +//#endregion + +//#region usePagination +export function usePagination = {}>( + hooks: Hooks, +): void; + +export namespace usePagination { + const pluginName = 'usePagination'; +} + +export type UsePaginationOptions> = Partial<{ + pageCount: number; + manualPagination: boolean; + autoResetPage?: boolean | undefined; + paginateExpandedRows: boolean; +}>; + +export interface UsePaginationState> { + pageSize: number; + pageIndex: number; +} + +export interface UsePaginationInstanceProps> { + page: Array>; + pageCount: number; + pageOptions: number[]; + canPreviousPage: boolean; + canNextPage: boolean; + gotoPage: (updater: ((pageIndex: number) => number) | number) => void; + previousPage: () => void; + nextPage: () => void; + setPageSize: (pageSize: number) => void; +} + +//#endregion + +//#region useResizeColumns +export function useResizeColumns = {}>( + hooks: Hooks, +): void; + +export namespace useResizeColumns { + const pluginName = 'useResizeColumns'; +} + +export interface UseResizeColumnsOptions> { + disableResizing?: boolean | undefined; + autoResetResize?: boolean | undefined; +} + +export interface UseResizeColumnsState> { + columnResizing: { + startX?: number | undefined; + columnWidth: number; + headerIdWidths: Record; + columnWidths: any; + isResizingColumn?: string | undefined; + }; +} + +export interface UseResizeColumnsColumnOptions< + D extends Record, +> { + disableResizing?: boolean | undefined; +} + +export interface TableResizerProps {} + +export interface UseResizeColumnsColumnProps< + D extends Record, +> { + getResizerProps: (props?: Partial) => TableResizerProps; + canResize: boolean; + isResizing: boolean; +} + +//#endregion + +//#region useRowSelect +export function useRowSelect = {}>( + hooks: Hooks, +): void; + +export namespace useRowSelect { + const pluginName = 'useRowSelect'; +} + +export interface TableToggleAllRowsSelectedProps + extends TableToggleCommonProps {} + +export interface TableToggleRowsSelectedProps extends TableToggleCommonProps {} + +export type UseRowSelectOptions> = Partial<{ + manualRowSelectedKey: IdType; + autoResetSelectedRows: boolean; + selectSubRows: boolean; +}>; + +export interface UseRowSelectHooks> { + getToggleRowSelectedProps: Array>; + getToggleAllRowsSelectedProps: Array< + PropGetter + >; + getToggleAllPageRowsSelectedProps: Array< + PropGetter + >; +} + +export interface UseRowSelectState> { + selectedRowIds: Record, boolean>; +} + +export interface UseRowSelectInstanceProps> { + toggleRowSelected: (rowId: IdType, set?: boolean) => void; + toggleAllRowsSelected: (value?: boolean) => void; + getToggleAllRowsSelectedProps: ( + props?: Partial, + ) => TableToggleAllRowsSelectedProps; + getToggleAllPageRowsSelectedProps: ( + props?: Partial, + ) => TableToggleAllRowsSelectedProps; + isAllRowsSelected: boolean; + selectedFlatRows: Array>; +} + +export interface UseRowSelectRowProps> { + isSelected: boolean; + isSomeSelected: boolean; + toggleRowSelected: (set?: boolean) => void; + getToggleRowSelectedProps: ( + props?: Partial, + ) => TableToggleRowsSelectedProps; +} + +//#endregion + +//#region useRowState +export function useRowState = {}>( + hooks: Hooks, +): void; + +export namespace useRowState { + const pluginName = 'useRowState'; +} + +export type UseRowStateOptions> = Partial<{ + initialRowStateAccessor: (row: Row) => UseRowStateLocalState; + getResetRowStateDeps: (instance: TableInstance) => any[]; + autoResetRowState?: boolean | undefined; +}>; + +export interface UseRowStateState> { + rowState: Record }>; +} + +export interface UseRowStateInstanceProps> { + setRowState: (rowPath: string[], updater: UseRowUpdater) => void; + setCellState: ( + rowPath: string[], + columnId: IdType, + updater: UseRowUpdater, + ) => void; +} + +export interface UseRowStateRowProps> { + state: UseRowStateLocalState; + setState: (updater: UseRowUpdater) => void; +} + +export interface UseRowStateCellProps> { + state: UseRowStateLocalState; + setState: (updater: UseRowUpdater) => void; +} + +export type UseRowUpdater = T | ((prev: T) => T); +export type UseRowStateLocalState< + D extends Record, + T = unknown, +> = Record, T>; +//#endregion + +//#region useSortBy +export function useSortBy = {}>( + hooks: Hooks, +): void; + +export namespace useSortBy { + const pluginName = 'useSortBy'; +} + +export interface TableSortByToggleProps { + title?: string | undefined; + style?: CSSProperties | undefined; + onClick?: ((e: MouseEvent) => void) | undefined; +} + +export type UseSortByOptions> = Partial<{ + manualSortBy: boolean; + disableSortBy: boolean; + defaultCanSort: boolean; + disableMultiSort: boolean; + isMultiSortEvent: (e: MouseEvent) => boolean; + maxMultiSortColCount: number; + disableSortRemove: boolean; + disabledMultiRemove: boolean; + orderByFn: ( rows: Array>, - isAggregated: boolean, - ) => AggregatedValue; - export type Aggregator> = - | AggregatorFn - | DefaultAggregators - | string; - export type AggregatedValue = any; - //#endregion - - //#region usePagination - export function usePagination = {}>( - hooks: Hooks, - ): void; - - export namespace usePagination { - const pluginName = 'usePagination'; - } - - export type UsePaginationOptions> = - Partial<{ - pageCount: number; - manualPagination: boolean; - autoResetPage?: boolean | undefined; - paginateExpandedRows: boolean; - }>; - - export interface UsePaginationState> { - pageSize: number; - pageIndex: number; - } - - export interface UsePaginationInstanceProps< - D extends Record, - > { - page: Array>; - pageCount: number; - pageOptions: number[]; - canPreviousPage: boolean; - canNextPage: boolean; - gotoPage: (updater: ((pageIndex: number) => number) | number) => void; - previousPage: () => void; - nextPage: () => void; - setPageSize: (pageSize: number) => void; - } - - //#endregion - - //#region useResizeColumns - export function useResizeColumns = {}>( - hooks: Hooks, - ): void; - - export namespace useResizeColumns { - const pluginName = 'useResizeColumns'; - } - - export interface UseResizeColumnsOptions> { - disableResizing?: boolean | undefined; - autoResetResize?: boolean | undefined; - } - - export interface UseResizeColumnsState> { - columnResizing: { - startX?: number | undefined; - columnWidth: number; - headerIdWidths: Record; - columnWidths: any; - isResizingColumn?: string | undefined; - }; - } - - export interface UseResizeColumnsColumnOptions< - D extends Record, - > { - disableResizing?: boolean | undefined; - } - - export interface TableResizerProps {} - - export interface UseResizeColumnsColumnProps< - D extends Record, - > { - getResizerProps: (props?: Partial) => TableResizerProps; - canResize: boolean; - isResizing: boolean; - } - - //#endregion - - //#region useRowSelect - export function useRowSelect = {}>( - hooks: Hooks, - ): void; - - export namespace useRowSelect { - const pluginName = 'useRowSelect'; - } - - export interface TableToggleAllRowsSelectedProps - extends TableToggleCommonProps {} - - export interface TableToggleRowsSelectedProps - extends TableToggleCommonProps {} - - export type UseRowSelectOptions> = Partial<{ - manualRowSelectedKey: IdType; - autoResetSelectedRows: boolean; - selectSubRows: boolean; - }>; - - export interface UseRowSelectHooks> { - getToggleRowSelectedProps: Array< - PropGetter - >; - getToggleAllRowsSelectedProps: Array< - PropGetter - >; - getToggleAllPageRowsSelectedProps: Array< - PropGetter - >; - } - - export interface UseRowSelectState> { - selectedRowIds: Record, boolean>; - } - - export interface UseRowSelectInstanceProps< - D extends Record, - > { - toggleRowSelected: (rowId: IdType, set?: boolean) => void; - toggleAllRowsSelected: (value?: boolean) => void; - getToggleAllRowsSelectedProps: ( - props?: Partial, - ) => TableToggleAllRowsSelectedProps; - getToggleAllPageRowsSelectedProps: ( - props?: Partial, - ) => TableToggleAllRowsSelectedProps; - isAllRowsSelected: boolean; - selectedFlatRows: Array>; - } - - export interface UseRowSelectRowProps> { - isSelected: boolean; - isSomeSelected: boolean; - toggleRowSelected: (set?: boolean) => void; - getToggleRowSelectedProps: ( - props?: Partial, - ) => TableToggleRowsSelectedProps; - } - - //#endregion - - //#region useRowState - export function useRowState = {}>( - hooks: Hooks, - ): void; - - export namespace useRowState { - const pluginName = 'useRowState'; - } - - export type UseRowStateOptions> = Partial<{ - initialRowStateAccessor: (row: Row) => UseRowStateLocalState; - getResetRowStateDeps: (instance: TableInstance) => any[]; - autoResetRowState?: boolean | undefined; - }>; - - export interface UseRowStateState> { - rowState: Record }>; - } - - export interface UseRowStateInstanceProps> { - setRowState: (rowPath: string[], updater: UseRowUpdater) => void; - setCellState: ( - rowPath: string[], - columnId: IdType, - updater: UseRowUpdater, - ) => void; - } - - export interface UseRowStateRowProps> { - state: UseRowStateLocalState; - setState: (updater: UseRowUpdater) => void; - } - - export interface UseRowStateCellProps> { - state: UseRowStateLocalState; - setState: (updater: UseRowUpdater) => void; - } - - export type UseRowUpdater = T | ((prev: T) => T); - export type UseRowStateLocalState< - D extends Record, - T = unknown, - > = Record, T>; - //#endregion - - //#region useSortBy - export function useSortBy = {}>( - hooks: Hooks, - ): void; - - export namespace useSortBy { - const pluginName = 'useSortBy'; - } - - export interface TableSortByToggleProps { - title?: string | undefined; - style?: CSSProperties | undefined; - onClick?: ((e: MouseEvent) => void) | undefined; - } - - export type UseSortByOptions> = Partial<{ - manualSortBy: boolean; - disableSortBy: boolean; + sortFns: Array>, + directions: boolean[], + ) => Array>; + sortTypes: Record>; + autoResetSortBy?: boolean | undefined; +}>; + +export interface UseSortByHooks> { + getSortByToggleProps: Array>; +} + +export interface UseSortByState> { + sortBy: Array>; +} + +export type UseSortByColumnOptions> = + Partial<{ defaultCanSort: boolean; - disableMultiSort: boolean; - isMultiSortEvent: (e: MouseEvent) => boolean; - maxMultiSortColCount: number; - disableSortRemove: boolean; - disabledMultiRemove: boolean; - orderByFn: ( - rows: Array>, - sortFns: Array>, - directions: boolean[], - ) => Array>; - sortTypes: Record>; - autoResetSortBy?: boolean | undefined; + disableSortBy: boolean; + sortDescFirst: boolean; + sortInverted: boolean; + sortType: SortByFn | DefaultSortTypes | string; }>; - export interface UseSortByHooks> { - getSortByToggleProps: Array>; - } - - export interface UseSortByState> { - sortBy: Array>; - } - - export type UseSortByColumnOptions> = - Partial<{ - defaultCanSort: boolean; - disableSortBy: boolean; - sortDescFirst: boolean; - sortInverted: boolean; - sortType: SortByFn | DefaultSortTypes | string; - }>; - - export interface UseSortByInstanceProps> { - rows: Array>; - preSortedRows: Array>; - setSortBy: (sortBy: Array>) => void; - toggleSortBy: ( - columnId: IdType, - descending?: boolean, - isMulti?: boolean, - ) => void; - } - - export interface UseSortByColumnProps> { - canSort: boolean; - toggleSortBy: (descending?: boolean, multi?: boolean) => void; - getSortByToggleProps: ( - props?: Partial, - ) => TableSortByToggleProps; - clearSortBy: () => void; - isSorted: boolean; - sortedIndex: number; - isSortedDesc: boolean | undefined; - } - - export type OrderByFn> = ( - rowA: Row, - rowB: Row, - ) => number; - export type SortByFn> = ( - rowA: Row, - rowB: Row, +export interface UseSortByInstanceProps> { + rows: Array>; + preSortedRows: Array>; + setSortBy: (sortBy: Array>) => void; + toggleSortBy: ( columnId: IdType, - desc?: boolean, - ) => number; - - export type DefaultSortTypes = - | 'alphanumeric' - | 'datetime' - | 'basic' - | 'string' - | 'number'; - - export interface SortingRule { - id: IdType; - desc?: boolean | undefined; - } - - //#endregion - - // Additional API - export const actions: Record; - export type ActionType = { type: string } & Record; - export const defaultColumn: Partial & Record; - - // Helpers - export type StringKey = Extract; - export type IdType = StringKey | string; - export type CellValue = V; - - export type Renderer = - | ComponentType - | ReactElement - | string - | number - | ReactFragment; - - export interface PluginHook> { - (hooks: Hooks): void; - pluginName?: string | undefined; - } - - export type TableDispatch = (action: A) => void; - - // utils - export function defaultOrderByFn = {}>( - arr: Array>, - funcs: Array>, - dirs: boolean[], - ): Array>; - - export function defaultGroupByFn = {}>( - rows: Array>, - columnId: IdType, - ): Record>>; - - export function makePropGetter(hooks: Hooks, ...meta: any[]): any; - - export function reduceHooks( - hooks: Hooks, - initial: T, - ...args: any[] - ): T; - - export function loopHooks(hooks: Hooks, ...args: any[]): void; - - export function ensurePluginOrder = {}>( - plugins: Array>, - befores: string[], - pluginName: string, - ): void; - - export function functionalUpdate = {}>( - updater: any, - old: Partial>, - ): Partial>; - - export function useGetLatest(obj: T): () => T; - - export function safeUseLayoutEffect( - effect: EffectCallback, - deps?: DependencyList, - ): void; - - export function useMountedLayoutEffect( - effect: EffectCallback, - deps?: DependencyList, - ): void; - - export function useAsyncDebounce any>( - defaultFn: F, - defaultWait?: number, - ): F; - - export function makeRenderer( - instance: TableInstance, - column: ColumnInstance, - meta?: any, - ): ReactElement; - - ////////////////////////////////////////////////////////////////////////////////////////////////// - // Custom Additions (parts from the old file called react-table-config.ts) - - export type FieldType = 'text' | 'number' | 'date' | string; - - export type CellRendererProps = {}> = { - /** - * Cell HTML props passed from the Table. - */ - cellElementProps: TableCellProps; - /** - * Table specific cell props like `column`, `row`. - */ - cellProps: CellProps; - /** - * Cell's content. - */ - children: React.ReactNode; - /** - * Function that returns whether the cell is disabled. - */ - isDisabled?: (rowData: D) => boolean; - }; + descending?: boolean, + isMulti?: boolean, + ) => void; +} + +export interface UseSortByColumnProps> { + canSort: boolean; + toggleSortBy: (descending?: boolean, multi?: boolean) => void; + getSortByToggleProps: ( + props?: Partial, + ) => TableSortByToggleProps; + clearSortBy: () => void; + isSorted: boolean; + sortedIndex: number; + isSortedDesc: boolean | undefined; +} + +export type OrderByFn> = ( + rowA: Row, + rowB: Row, +) => number; +export type SortByFn> = ( + rowA: Row, + rowB: Row, + columnId: IdType, + desc?: boolean, +) => number; + +export type DefaultSortTypes = + | 'alphanumeric' + | 'datetime' + | 'basic' + | 'string' + | 'number'; + +export interface SortingRule { + id: IdType; + desc?: boolean | undefined; +} + +//#endregion + +// Additional API +export const actions: Record; +export type ActionType = { type: string } & Record; +export const defaultColumn: Partial & Record; + +// Helpers +export type StringKey = Extract; +export type IdType = StringKey | string; +export type CellValue = V; + +export type Renderer = + | ComponentType + | ReactElement + | string + | number + | ReactFragment; + +export interface PluginHook> { + (hooks: Hooks): void; + pluginName?: string | undefined; +} + +export type TableDispatch = (action: A) => void; + +// utils +export function defaultOrderByFn = {}>( + arr: Array>, + funcs: Array>, + dirs: boolean[], +): Array>; + +export function defaultGroupByFn = {}>( + rows: Array>, + columnId: IdType, +): Record>>; + +export function makePropGetter(hooks: Hooks, ...meta: any[]): any; + +export function reduceHooks( + hooks: Hooks, + initial: T, + ...args: any[] +): T; + +export function loopHooks(hooks: Hooks, ...args: any[]): void; + +export function ensurePluginOrder = {}>( + plugins: Array>, + befores: string[], + pluginName: string, +): void; + +export function functionalUpdate = {}>( + updater: any, + old: Partial>, +): Partial>; + +export function useGetLatest(obj: T): () => T; + +export function safeUseLayoutEffect( + effect: EffectCallback, + deps?: DependencyList, +): void; + +export function useMountedLayoutEffect( + effect: EffectCallback, + deps?: DependencyList, +): void; + +export function useAsyncDebounce any>( + defaultFn: F, + defaultWait?: number, +): F; + +export function makeRenderer( + instance: TableInstance, + column: ColumnInstance, + meta?: any, +): ReactElement; + +////////////////////////////////////////////////////////////////////////////////////////////////// +// Custom Additions (parts from the old file called react-table-config.ts) + +export type FieldType = 'text' | 'number' | 'date' | string; + +export type CellRendererProps = {}> = { + /** + * Cell HTML props passed from the Table. + */ + cellElementProps: TableCellProps; + /** + * Table specific cell props like `column`, `row`. + */ + cellProps: CellProps; + /** + * Cell's content. + */ + children: React.ReactNode; + /** + * Function that returns whether the cell is disabled. + */ + isDisabled?: (rowData: D) => boolean; +}; // } From a13ed813648703605ce50550b0973afa65693db9 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Wed, 30 Aug 2023 17:32:09 -0400 Subject: [PATCH 069/196] Few parts of the written debug code --- packages/itwinui-react/src/core/Table/types/index.ts | 2 +- packages/itwinui-react/src/index.ts | 5 +++++ playgrounds/vite/src/App.tsx | 6 ++++++ 3 files changed, 12 insertions(+), 1 deletion(-) diff --git a/packages/itwinui-react/src/core/Table/types/index.ts b/packages/itwinui-react/src/core/Table/types/index.ts index 72f341b2155..48d10de2a76 100644 --- a/packages/itwinui-react/src/core/Table/types/index.ts +++ b/packages/itwinui-react/src/core/Table/types/index.ts @@ -7,7 +7,7 @@ // type TableBodyPropGetter, // } from './react-table-types.js'; -// import everything from './react-table-types.js' and put it in a variable called ReactTableTypes +// import everything from './react-table-types.d.ts' and put it in a variable called TableTypes export type * as TableTypes from './react-table-types.js'; // export { TableTypes }; // export { TableTypes } from './react-table-types.js'; diff --git a/packages/itwinui-react/src/index.ts b/packages/itwinui-react/src/index.ts index 87fa80c0e45..3bb1edac398 100644 --- a/packages/itwinui-react/src/index.ts +++ b/packages/itwinui-react/src/index.ts @@ -3,6 +3,11 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ export * from './core/index.js'; +// export * as Objects from './core/index.js'; +// import * as Q from './core/index.js'; + +// const q: Types.TableTypes; + // export * from './types/react-table-config.js'; // export type * as ReactTableTypes from './core/Table/types/react-table-types.js'; // import * from './types/react-table-types.js'; diff --git a/playgrounds/vite/src/App.tsx b/playgrounds/vite/src/App.tsx index f1665a098e2..0a8520e3f44 100644 --- a/playgrounds/vite/src/App.tsx +++ b/playgrounds/vite/src/App.tsx @@ -12,6 +12,12 @@ import { TableTypes, // ReactTableTypes, } from '@itwin/itwinui-react'; + +// import type { TableTypes } from '@itwin/itwinui-react/cjs/core/Table/index.js'; + +const q: TableTypes.Column>[] = []; + +// import type { TableTypes } from '@itwin/itwinui-react'; import { TableFilterProps } from '@itwin/itwinui-react/cjs/core/Table/index.js'; import { useCallback, useMemo, useState } from 'react'; // import type { From e2df9fe14d8a98b75008dd73d6c9fa0994653e00 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Wed, 30 Aug 2023 21:32:15 -0400 Subject: [PATCH 070/196] Some type error fixes --- apps/storybook/src/Table.stories.tsx | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/apps/storybook/src/Table.stories.tsx b/apps/storybook/src/Table.stories.tsx index cc0bd9e0ae6..2293fa1d317 100644 --- a/apps/storybook/src/Table.stories.tsx +++ b/apps/storybook/src/Table.stories.tsx @@ -1721,14 +1721,11 @@ export const Full2: Story> = (args) => { [isRowDisabled, menuItems], ); - const rowProps = useCallback( - (row: TableTypes.Row<{ status: string | undefined }>) => { - return { - status: row.original.status, - }; - }, - [], - ); + const rowProps = useCallback((row: TableTypes.Row) => { + return { + status: row.original.status satisfies TableStoryDataType['status'], + }; + }, []); const [globalFilterValue, setGlobalFilterValue] = useState(''); @@ -3585,6 +3582,11 @@ export const ColumnManager: Story> = (args) => { id: string; startDate: Date; endDate: Date; + price: string; + color: string; + stock: number; + rating: string; + location: string; }; const columns = useMemo( @@ -4070,6 +4072,7 @@ export const StatusAndCellIcons: Story> = (args) => { props: TableTypes.CellRendererProps<{ startIcon: JSX.Element; endIcon: JSX.Element; + isLoading?: boolean; }>, ) => ( Date: Thu, 31 Aug 2023 00:03:26 -0400 Subject: [PATCH 071/196] Some basic react table type tests --- .../Table/types/react-table-types.test.tsx | 258 ++++++++++++++++++ 1 file changed, 258 insertions(+) create mode 100644 packages/itwinui-react/src/core/Table/types/react-table-types.test.tsx diff --git a/packages/itwinui-react/src/core/Table/types/react-table-types.test.tsx b/packages/itwinui-react/src/core/Table/types/react-table-types.test.tsx new file mode 100644 index 00000000000..c6d85483659 --- /dev/null +++ b/packages/itwinui-react/src/core/Table/types/react-table-types.test.tsx @@ -0,0 +1,258 @@ +/* eslint-disable @typescript-eslint/no-unused-vars */ + +import { Table } from '../index.js'; +import type { TableProps } from '../index.js'; + +// TableTypes should be imported as a type-only import.y +// @ts-expect-error (TS 1485) - 'TableTypes' resolves to a type-only declaration and must be imported using a type-only import when 'verbatimModuleSyntax' is enabled. +import { TableTypes as _TableTypes } from '../index.js'; +import type { TableTypes } from '../index.js'; + +import type { Column } from 'react-table'; + +import React from 'react'; + +// Testing that all imports from `react-table` work as expected. +// import type * from 'react-table'; + +/** + * Confirm that `satisfies` on columns does not give any unnecessary type errors. + */ +const ColumnsSatisfiesColumn = () => { + const columns = [ + { + Header: 'Header 1', + accessor: 'header1', + }, + { + Header: 'Header 2', + accessor: 'header2', + }, + ] satisfies TableTypes.Column<{ + header1: string; + header2: string; + }>[]; + + const data = [ + { + header1: 'row1', + header2: 'row1', + }, + { + header1: 'row2', + header2: 'row2', + }, + ]; + + return
; +}; + +/** + * To make sure we cannot pass nested columns. + */ +const NoNestedColumns = () => { + const columns = [ + { + Header: 'Header 1', + accessor: 'header1', + // There should be error: TS 2353 + // @ts-expect-error (TS 2353): `columns` should not exist inside of a column object. + columns: [ + { + Header: 'Header 2', + accessor: 'header2', + }, + ], + }, + ] satisfies TableTypes.Column<{ + header1: string; + header2: string; + }>[]; +}; + +/** + * To test that passing other props to `Table` do not give any type errors. + */ +const TableWithOtherProps = () => { + const columns = [ + { + Header: 'Header 1', + accessor: 'header1', + }, + { + Header: 'Header 2', + accessor: 'header2', + }, + ] satisfies TableTypes.Column<{ + header1: string; + header2: string; + }>[]; + + const data = [ + { + header1: 'row1', + header2: 'row1', + }, + { + header1: 'row2', + header2: 'row2', + }, + ]; + + return ( +
+ ); +}; + +/** + * Both 'react-table'.Column and TableTypes.Column should work. + */ +const ReactTableColumnAndTableTypesColumnInterchangeable = () => { + // Using 'react-table'.Column + const columns1 = [ + { + Header: 'Header 1', + accessor: 'header1', + }, + { + Header: 'Header 2', + accessor: 'header2', + }, + // No type error + ] satisfies Column<{ + header1: string; + header2: string; + }>[]; + + // Using TableTypes.Column + const columns2 = [ + { + Header: 'Header 1', + accessor: 'header1', + }, + { + Header: 'Header 2', + accessor: 'header2', + }, + // No type error + ] satisfies TableTypes.Column<{ + header1: string; + header2: string; + }>[]; + + const data = [ + { + header1: 'row1', + header2: 'row1', + }, + { + header1: 'row2', + header2: 'row2', + }, + ]; + + return ( +
+
+
+ + ); +}; + +/** + * When creating variables (with satisfies) that are passed as props. + */ +const VariablesWithSatisfiesPassedAsProps = () => { + const cellRenderer = React.useCallback((props) => { + return
{props.cellProps.row.original.header1}
; + }, []) satisfies NonNullable< + TableTypes.Column<{ + header1: string; + header2: string; + }>['cellRenderer'] + >; + + const columns = [ + { + Header: 'Header 1', + accessor: 'header1', + cellRenderer: cellRenderer, + }, + { + Header: 'Header 2', + accessor: 'header2', + // Cell: + }, + ] satisfies TableTypes.Column<{ + header1: string; + header2: string; + }>[]; + + const data = [ + { + header1: 'row1', + header2: 'row1', + }, + { + header1: 'row2', + header2: 'row2', + }, + ]; + + return
; +}; + +/** + * When creating variables (without satisfies) that are passed as props. + */ +const VariablesWithoutSatisfiesPassedAsProps = () => { + const Cell = React.useCallback( + ( + props: TableTypes.CellProps< + { + header1: string; + header2: string; + }, + string + >, + ) => { + return
{props.row.original.header1}
; + }, + [], + ); + + const columns = [ + { + Header: 'Header 1', + accessor: 'header1', + Cell: Cell, + }, + { + Header: 'Header 2', + accessor: 'header2', + }, + ] satisfies TableTypes.Column<{ + header1: string; + header2: string; + }>[]; + + const data = [ + { + header1: 'row1', + header2: 'row1', + }, + { + header1: 'row2', + header2: 'row2', + }, + ]; + + return
; +}; From 4c9bd2273928079357ad7364efcefdd2498c9084 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Thu, 31 Aug 2023 00:17:02 -0400 Subject: [PATCH 072/196] Added @ ts-expect-error for the existing unit test that is giving type errors --- packages/itwinui-react/src/core/Table/Table.test.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/itwinui-react/src/core/Table/Table.test.tsx b/packages/itwinui-react/src/core/Table/Table.test.tsx index d455fad11b5..067534e5b94 100644 --- a/packages/itwinui-react/src/core/Table/Table.test.tsx +++ b/packages/itwinui-react/src/core/Table/Table.test.tsx @@ -4658,6 +4658,10 @@ it('should ignore top-level Header if one is passed', async () => { columns={[ { Header: 'Header name', + // We expect to get `columns` does not exist type error. + // Because although `columns` is removed from the Column type (i.e. no sub-columns), + // we allow to pass `columns` in the top level Header for backward compatibility. + // @ts-expect-error - `columns` does not exist in type ... columns: [ { id: 'name', From afbfd2f980ed7ac32f764fb877c8178c7fa352a4 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Thu, 31 Aug 2023 00:44:47 -0400 Subject: [PATCH 073/196] Added multiple @ts-ignore to stop tsc reporting the unused variable name error --- .../src/core/Table/types/react-table-types.test.tsx | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/packages/itwinui-react/src/core/Table/types/react-table-types.test.tsx b/packages/itwinui-react/src/core/Table/types/react-table-types.test.tsx index c6d85483659..a9b239c72f5 100644 --- a/packages/itwinui-react/src/core/Table/types/react-table-types.test.tsx +++ b/packages/itwinui-react/src/core/Table/types/react-table-types.test.tsx @@ -1,7 +1,9 @@ /* eslint-disable @typescript-eslint/no-unused-vars */ +/* eslint-disable @typescript-eslint/ban-ts-comment */ + import { Table } from '../index.js'; -import type { TableProps } from '../index.js'; +// import type { TableProps } from '../index.js'; // TableTypes should be imported as a type-only import.y // @ts-expect-error (TS 1485) - 'TableTypes' resolves to a type-only declaration and must be imported using a type-only import when 'verbatimModuleSyntax' is enabled. @@ -18,6 +20,7 @@ import React from 'react'; /** * Confirm that `satisfies` on columns does not give any unnecessary type errors. */ +// @ts-ignore - Ignore declared but unused variable. const ColumnsSatisfiesColumn = () => { const columns = [ { @@ -50,7 +53,10 @@ const ColumnsSatisfiesColumn = () => { /** * To make sure we cannot pass nested columns. */ +// @ts-ignore - Ignore declared but unused variable. const NoNestedColumns = () => { + // Don't show TS warning: 'columns' is declared but its value is never read.ts(6133) + // @ts-ignore - Ignore declared but unused variable. const columns = [ { Header: 'Header 1', @@ -73,6 +79,7 @@ const NoNestedColumns = () => { /** * To test that passing other props to `Table` do not give any type errors. */ +// @ts-ignore - Ignore declared but unused variable. const TableWithOtherProps = () => { const columns = [ { @@ -114,6 +121,7 @@ const TableWithOtherProps = () => { /** * Both 'react-table'.Column and TableTypes.Column should work. */ +// @ts-ignore - Ignore declared but unused variable. const ReactTableColumnAndTableTypesColumnInterchangeable = () => { // Using 'react-table'.Column const columns1 = [ @@ -169,6 +177,7 @@ const ReactTableColumnAndTableTypesColumnInterchangeable = () => { /** * When creating variables (with satisfies) that are passed as props. */ +// @ts-ignore - Ignore declared but unused variable. const VariablesWithSatisfiesPassedAsProps = () => { const cellRenderer = React.useCallback((props) => { return
{props.cellProps.row.original.header1}
; @@ -212,6 +221,7 @@ const VariablesWithSatisfiesPassedAsProps = () => { /** * When creating variables (without satisfies) that are passed as props. */ +// @ts-ignore - Ignore declared but unused variable. const VariablesWithoutSatisfiesPassedAsProps = () => { const Cell = React.useCallback( ( From 0e614aab5ddefc42bbbc743bff5659a923448335 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Thu, 31 Aug 2023 00:45:33 -0400 Subject: [PATCH 074/196] Added test:types to use tsconfig.test.json. Also edited the other package.json scripts --- packages/itwinui-react/package.json | 6 ++++-- packages/itwinui-react/tsconfig.test.json | 12 ++++++++++++ 2 files changed, 16 insertions(+), 2 deletions(-) create mode 100644 packages/itwinui-react/tsconfig.test.json diff --git a/packages/itwinui-react/package.json b/packages/itwinui-react/package.json index 51307937bd0..f31a83f7573 100644 --- a/packages/itwinui-react/package.json +++ b/packages/itwinui-react/package.json @@ -61,8 +61,10 @@ "clean:build": "rimraf esm && rimraf cjs", "clean:coverage": "rimraf coverage", "clean": "rimraf .turbo && yarn clean:coverage && yarn clean:build && rimraf node_modules", - "test": "jest", - "test:watch": "jest --watch", + "test": "yarn test:jest && yarn test:types", + "test:unit": "jest", + "test:unit:watch": "jest --watch", + "test:types": "tsc -p tsconfig.test.json --noEmit", "format": "prettier --config .prettierrc **/*.{tsx,ts,js} --ignore-path .gitignore --write", "lint": "eslint \"**/*.{js,ts,tsx}\" --max-warnings=0", "lint:fix": "yarn lint --fix && node ../../scripts/copyrightLinter.js --fix \"*/**/*.{js,ts,tsx}\"", diff --git a/packages/itwinui-react/tsconfig.test.json b/packages/itwinui-react/tsconfig.test.json new file mode 100644 index 00000000000..4499c9b1097 --- /dev/null +++ b/packages/itwinui-react/tsconfig.test.json @@ -0,0 +1,12 @@ +{ + "extends": "./tsconfig.json", + "files": [ + "src/core/Table/types/react-table-types.test.tsx", + "../../apps/storybook/src/Table.stories.tsx" + ], + "compilerOptions": { + // This is needed to avoid the below error when running yarn test:types + // TS17004: Cannot use JSX unless the '--jsx' flag is provided. + "jsx": "react" + } +} From 4e9bb57b558740be2e72b0e199a1b5a31f1271c2 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Thu, 31 Aug 2023 00:48:04 -0400 Subject: [PATCH 075/196] Removed some unnecessary variable names that were unused. Thus, also removed few @ ts-ignore --- .../Table/types/react-table-types.test.tsx | 19 ++++++------------- 1 file changed, 6 insertions(+), 13 deletions(-) diff --git a/packages/itwinui-react/src/core/Table/types/react-table-types.test.tsx b/packages/itwinui-react/src/core/Table/types/react-table-types.test.tsx index a9b239c72f5..efa697964aa 100644 --- a/packages/itwinui-react/src/core/Table/types/react-table-types.test.tsx +++ b/packages/itwinui-react/src/core/Table/types/react-table-types.test.tsx @@ -1,5 +1,4 @@ /* eslint-disable @typescript-eslint/no-unused-vars */ - /* eslint-disable @typescript-eslint/ban-ts-comment */ import { Table } from '../index.js'; @@ -20,8 +19,7 @@ import React from 'react'; /** * Confirm that `satisfies` on columns does not give any unnecessary type errors. */ -// @ts-ignore - Ignore declared but unused variable. -const ColumnsSatisfiesColumn = () => { +() => { const columns = [ { Header: 'Header 1', @@ -53,8 +51,7 @@ const ColumnsSatisfiesColumn = () => { /** * To make sure we cannot pass nested columns. */ -// @ts-ignore - Ignore declared but unused variable. -const NoNestedColumns = () => { +() => { // Don't show TS warning: 'columns' is declared but its value is never read.ts(6133) // @ts-ignore - Ignore declared but unused variable. const columns = [ @@ -79,8 +76,7 @@ const NoNestedColumns = () => { /** * To test that passing other props to `Table` do not give any type errors. */ -// @ts-ignore - Ignore declared but unused variable. -const TableWithOtherProps = () => { +() => { const columns = [ { Header: 'Header 1', @@ -121,8 +117,7 @@ const TableWithOtherProps = () => { /** * Both 'react-table'.Column and TableTypes.Column should work. */ -// @ts-ignore - Ignore declared but unused variable. -const ReactTableColumnAndTableTypesColumnInterchangeable = () => { +() => { // Using 'react-table'.Column const columns1 = [ { @@ -177,8 +172,7 @@ const ReactTableColumnAndTableTypesColumnInterchangeable = () => { /** * When creating variables (with satisfies) that are passed as props. */ -// @ts-ignore - Ignore declared but unused variable. -const VariablesWithSatisfiesPassedAsProps = () => { +() => { const cellRenderer = React.useCallback((props) => { return
{props.cellProps.row.original.header1}
; }, []) satisfies NonNullable< @@ -221,8 +215,7 @@ const VariablesWithSatisfiesPassedAsProps = () => { /** * When creating variables (without satisfies) that are passed as props. */ -// @ts-ignore - Ignore declared but unused variable. -const VariablesWithoutSatisfiesPassedAsProps = () => { +() => { const Cell = React.useCallback( ( props: TableTypes.CellProps< From 315a2d853b8bfe98db803686645fdca8566610bd Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Thu, 31 Aug 2023 10:29:08 -0400 Subject: [PATCH 076/196] Fixed all type errors in Table.stories.tsx --- apps/storybook/src/Table.stories.tsx | 84 ++++++++++++++++++++-------- 1 file changed, 61 insertions(+), 23 deletions(-) diff --git a/apps/storybook/src/Table.stories.tsx b/apps/storybook/src/Table.stories.tsx index 2293fa1d317..4bf1ed14e94 100644 --- a/apps/storybook/src/Table.stories.tsx +++ b/apps/storybook/src/Table.stories.tsx @@ -30,6 +30,7 @@ import { ProgressRadial, BaseFilter, } from '@itwin/itwinui-react'; +import type { DefaultCellProps } from '@itwin/itwinui-react/cjs/core/Table/'; import { Story, Meta } from '@storybook/react'; import { useMemo, useState } from '@storybook/addons'; import { action } from '@storybook/addon-actions'; @@ -226,7 +227,9 @@ export const SelectableMulti: Story> = (args) => { )}`, )(), [], - ); + ) satisfies NonNullable< + TableProps<{ name: string; description: string }>['onSelect'] + >; const onRowClick = useCallback( (event: React.MouseEvent, row: TableTypes.Row) => @@ -304,7 +307,9 @@ export const Sortable: Story> = (args) => { const onSort = useCallback( (state) => action(`Sort changed. Table state: ${JSON.stringify(state)}`)(), [], - ); + ) satisfies NonNullable< + TableProps<{ name: string; description: string }>['onSort'] + >; const columns = useMemo( () => [ @@ -669,7 +674,12 @@ export const Expandable: Story> = (args) => { )}`, )(), [], - ); + ) satisfies NonNullable< + TableProps<{ + name: string; + description: string; + }>['onExpand'] + >; const columns = useMemo( () => [ @@ -734,7 +744,12 @@ export const ExpandableSubrows: Story> = (args) => { )}`, )(), [], - ); + ) satisfies NonNullable< + TableProps<{ + name: string; + description: string; + }>['onExpand'] + >; const columns = useMemo( () => [ @@ -1009,7 +1024,12 @@ export const RowInViewport: Story> = (args) => { const onRowInViewport = useCallback((rowData) => { action(`Row in view: ${JSON.stringify(rowData)}`)(); - }, []); + }, []) satisfies NonNullable< + TableProps<{ + name: string; + description: string; + }>['onRowInViewport'] + >; return ( <> @@ -1281,7 +1301,7 @@ export const ControlledState: Story> = (args) => { subRows: DemoData[]; }; - const tableInstance = React.useRef(); + const tableInstance = React.useRef>(); const [selectedRows, setSelectedRows] = useState([]); const [expandedRows, setExpandedRows] = useState([]); @@ -1424,18 +1444,30 @@ export const ControlledState: Story> = (args) => {
{ - tableInstance.current = instance; - return newState; - }, [])} + stateReducer={ + useCallback((newState, action, prevState, instance) => { + tableInstance.current = instance; + return newState; + }, []) satisfies NonNullable< + TableTypes.TableOptions['stateReducer'] + > + } isSelectable - onSelect={useCallback((selected) => { - setSelectedRows(selected ?? []); - }, [])} - onExpand={useCallback((expanded) => { - setExpandedRows(expanded); - }, [])} - getRowId={useCallback((rowData) => rowData.id, [])} + onSelect={ + useCallback((selected) => { + setSelectedRows(selected ?? []); + }, []) satisfies NonNullable['onSelect']> + } + onExpand={ + useCallback((expanded) => { + setExpandedRows(expanded ?? []); + }, []) satisfies NonNullable['onExpand']> + } + getRowId={ + useCallback((rowData) => rowData.id, []) satisfies NonNullable< + TableTypes.TableOptions['getRowId'] + > + } {...args} data={data} /> @@ -1557,7 +1589,7 @@ export const Full: Story> = (args) => { {...args} /> @@ -1889,7 +1921,9 @@ export const Condensed: Story> = (args) => { )}`, )(), [], - ); + ) satisfies NonNullable< + TableProps<{ name: string; description: string }>['onExpand'] + >; const columns = useMemo( () => [ @@ -3475,7 +3509,7 @@ export const CustomizedColumns: Story> = (args) => { )}`, )(), [], - ); + ) satisfies NonNullable['onExpand']>; const data = useMemo( () => [ @@ -3523,10 +3557,14 @@ export const CustomizedColumns: Story> = (args) => { Header: 'Name', accessor: 'name', cellRenderer: (props) => ( - {...props} - isDisabled={(rowData) => - isCellDisabled(rowData) || isRowDisabled(rowData) + isDisabled={ + ((rowData: (typeof data)[number]) => + isCellDisabled(rowData) || + isRowDisabled(rowData)) satisfies NonNullable< + DefaultCellProps<(typeof data)[number]>['isDisabled'] + > } /> ), From 6cae5bdae524b3d39e613e800836713b3bbed496 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Thu, 31 Aug 2023 10:30:25 -0400 Subject: [PATCH 077/196] Removed unnecessary satisfies --- apps/storybook/src/Table.stories.tsx | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/apps/storybook/src/Table.stories.tsx b/apps/storybook/src/Table.stories.tsx index 4bf1ed14e94..c9be178718a 100644 --- a/apps/storybook/src/Table.stories.tsx +++ b/apps/storybook/src/Table.stories.tsx @@ -30,7 +30,6 @@ import { ProgressRadial, BaseFilter, } from '@itwin/itwinui-react'; -import type { DefaultCellProps } from '@itwin/itwinui-react/cjs/core/Table/'; import { Story, Meta } from '@storybook/react'; import { useMemo, useState } from '@storybook/addons'; import { action } from '@storybook/addon-actions'; @@ -3559,12 +3558,8 @@ export const CustomizedColumns: Story> = (args) => { cellRenderer: (props) => ( {...props} - isDisabled={ - ((rowData: (typeof data)[number]) => - isCellDisabled(rowData) || - isRowDisabled(rowData)) satisfies NonNullable< - DefaultCellProps<(typeof data)[number]>['isDisabled'] - > + isDisabled={(rowData: (typeof data)[number]) => + isCellDisabled(rowData) || isRowDisabled(rowData) } /> ), From 00b6dc45209db0ca0f7bc4db9f552dc0875984a6 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Thu, 31 Aug 2023 10:30:50 -0400 Subject: [PATCH 078/196] Exported DefaultCellProps and EditableCellProps --- packages/itwinui-react/src/core/index.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/itwinui-react/src/core/index.ts b/packages/itwinui-react/src/core/index.ts index 000948cad46..662e19de2f5 100644 --- a/packages/itwinui-react/src/core/index.ts +++ b/packages/itwinui-react/src/core/index.ts @@ -152,6 +152,8 @@ export { SelectionColumn, } from './Table/index.js'; export type { + DefaultCellProps, + EditableCellProps, TableFilterValue, DateRangeFilterOptions, TablePaginatorRendererProps, From 9ab12fad07dd2584de809b47c38017d0ba7aa5ba Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Thu, 31 Aug 2023 11:16:05 -0400 Subject: [PATCH 079/196] Removed code duplication --- .../itwinui-react/scripts/postBuildTypes.mjs | 52 +++++++------------ 1 file changed, 18 insertions(+), 34 deletions(-) diff --git a/packages/itwinui-react/scripts/postBuildTypes.mjs b/packages/itwinui-react/scripts/postBuildTypes.mjs index 745cf2675d1..ad49487e994 100644 --- a/packages/itwinui-react/scripts/postBuildTypes.mjs +++ b/packages/itwinui-react/scripts/postBuildTypes.mjs @@ -4,38 +4,22 @@ *--------------------------------------------------------------------------------------------*/ import { exec } from 'node:child_process'; -// Since tsc does not include the react-table-types.d.ts file in the esm build, +// Since tsc does not include the react-table-types.d.ts file in the cjs and esm builds, // we need to copy it manually. -exec( - 'copyfiles -u 1 src/core/Table/types/react-table-types.d.ts esm', - (error) => { - if (error) { - console.error( - 'Error copying react-table-types.d.ts to esm build folder', - error, - ); - } else { - console.log( - '✓ Finished copying react-table-types.d.ts to esm build folder', - ); - } - }, -); - -// Since tsc does not include the react-table-types.d.ts file in the cjs build, -// we need to copy it manually. -exec( - 'copyfiles -u 1 src/core/Table/types/react-table-types.d.ts cjs', - (error) => { - if (error) { - console.error( - 'Error copying react-table-types.d.ts to cjs build folder', - error, - ); - } else { - console.log( - '✓ Finished copying react-table-types.d.ts to cjs build folder', - ); - } - }, -); +['cjs', 'esm'].forEach((buildType) => { + exec( + `copyfiles -u 1 src/core/Table/types/react-table-types.d.ts ${buildType}`, + (error) => { + if (error) { + console.error( + `Error copying react-table-types.d.ts to ${buildType} build folder`, + error, + ); + } else { + console.log( + `✓ Finished copying react-table-types.d.ts to ${buildType} build folder`, + ); + } + }, + ); +}); From c4ad330df2cda72fb646fbc5fa7829eaa958e88e Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Thu, 31 Aug 2023 11:20:55 -0400 Subject: [PATCH 080/196] Removed unnecessary comments --- packages/itwinui-react/src/core/Table/types/index.ts | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/packages/itwinui-react/src/core/Table/types/index.ts b/packages/itwinui-react/src/core/Table/types/index.ts index 48d10de2a76..d173bd2ee62 100644 --- a/packages/itwinui-react/src/core/Table/types/index.ts +++ b/packages/itwinui-react/src/core/Table/types/index.ts @@ -2,16 +2,4 @@ * Copyright (c) Bentley Systems, Incorporated. All rights reserved. * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ -// import { -// // TableInterface, -// type TableBodyPropGetter, -// } from './react-table-types.js'; - -// import everything from './react-table-types.d.ts' and put it in a variable called TableTypes export type * as TableTypes from './react-table-types.js'; -// export { TableTypes }; -// export { TableTypes } from './react-table-types.js'; -// export * from './testing.js'; - -// const testing: ReactTableTypes.TableBodyPropGetter | undefined = undefined; -// console.log(testing ?? 0 + 1); From 45f54f79361d970bb4180b02925a16da29bbbd9b Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Thu, 31 Aug 2023 11:21:46 -0400 Subject: [PATCH 081/196] Removed testing variables and unused imports --- .../src/core/Table/types/react-table-types.d.ts | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/packages/itwinui-react/src/core/Table/types/react-table-types.d.ts b/packages/itwinui-react/src/core/Table/types/react-table-types.d.ts index e4e734f7471..d3f1841d0a3 100644 --- a/packages/itwinui-react/src/core/Table/types/react-table-types.d.ts +++ b/packages/itwinui-react/src/core/Table/types/react-table-types.d.ts @@ -35,12 +35,7 @@ import type { ReactNode, } from 'react'; -import type { TableFilterProps, TableFilterValue } from '../index.js'; -import type { CommonProps } from '../../utils/props.js'; - -// declare module 'react-table' { -export const testingVar = 0; -// export {}; +import type { TableFilterProps } from '../index.js'; /** * The empty definitions of below provides a base definition for the parts used by useTable, that can then be extended in the users code. From d54296977cd8f719c58c9ac03428f58550f54320 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Thu, 31 Aug 2023 11:28:40 -0400 Subject: [PATCH 082/196] Remove unnecessary comments --- packages/itwinui-react/src/core/Table/index.ts | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/packages/itwinui-react/src/core/Table/index.ts b/packages/itwinui-react/src/core/Table/index.ts index 8a935400e6f..09d52c28cc4 100644 --- a/packages/itwinui-react/src/core/Table/index.ts +++ b/packages/itwinui-react/src/core/Table/index.ts @@ -3,13 +3,10 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ export { Table } from './Table.js'; +export type { TableProps, TablePaginatorRendererProps } from './Table.js'; -// Export everything from './types/react-table-types.js' as a variable called `ReactTableTypes` -// export { TableTypes } from './types/index.js'; export type { TableTypes } from './types/index.js'; -export type { TableProps, TablePaginatorRendererProps } from './Table.js'; - export { BaseFilter, FilterButtonBar, tableFilters } from './filters/index.js'; export type { BaseFilterProps, From 6397770d34d9964c9799a542233661ae067f5914 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Thu, 31 Aug 2023 11:29:05 -0400 Subject: [PATCH 083/196] Helpful explanation comments --- packages/itwinui-react/src/core/Table/Table.test.tsx | 1 + .../src/core/Table/types/react-table-types.test.tsx | 6 ++++++ 2 files changed, 7 insertions(+) diff --git a/packages/itwinui-react/src/core/Table/Table.test.tsx b/packages/itwinui-react/src/core/Table/Table.test.tsx index 067534e5b94..44b45cec01f 100644 --- a/packages/itwinui-react/src/core/Table/Table.test.tsx +++ b/packages/itwinui-react/src/core/Table/Table.test.tsx @@ -4661,6 +4661,7 @@ it('should ignore top-level Header if one is passed', async () => { // We expect to get `columns` does not exist type error. // Because although `columns` is removed from the Column type (i.e. no sub-columns), // we allow to pass `columns` in the top level Header for backward compatibility. + // (#1072: https://github.com/iTwin/iTwinUI/pull/1072) // @ts-expect-error - `columns` does not exist in type ... columns: [ { diff --git a/packages/itwinui-react/src/core/Table/types/react-table-types.test.tsx b/packages/itwinui-react/src/core/Table/types/react-table-types.test.tsx index efa697964aa..86a1a1f85ff 100644 --- a/packages/itwinui-react/src/core/Table/types/react-table-types.test.tsx +++ b/packages/itwinui-react/src/core/Table/types/react-table-types.test.tsx @@ -1,3 +1,9 @@ +/** + * This test file to test some Table type related cases that have not been tested in other files + * (e.g. storybook, unit tests, etc.) + */ + +// To hide impertinent errors /* eslint-disable @typescript-eslint/no-unused-vars */ /* eslint-disable @typescript-eslint/ban-ts-comment */ From affa6e16c0148980c8cbf5d4d5531f3489d3ba5d Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Thu, 31 Aug 2023 11:40:52 -0400 Subject: [PATCH 084/196] Tested that Column and TableTypes.Column are equivalent --- .../Table/types/react-table-types.test.tsx | 46 +++++++++++++++++-- 1 file changed, 42 insertions(+), 4 deletions(-) diff --git a/packages/itwinui-react/src/core/Table/types/react-table-types.test.tsx b/packages/itwinui-react/src/core/Table/types/react-table-types.test.tsx index 86a1a1f85ff..085652384b2 100644 --- a/packages/itwinui-react/src/core/Table/types/react-table-types.test.tsx +++ b/packages/itwinui-react/src/core/Table/types/react-table-types.test.tsx @@ -8,9 +8,8 @@ /* eslint-disable @typescript-eslint/ban-ts-comment */ import { Table } from '../index.js'; -// import type { TableProps } from '../index.js'; -// TableTypes should be imported as a type-only import.y +// TableTypes should be imported as a type-only import. // @ts-expect-error (TS 1485) - 'TableTypes' resolves to a type-only declaration and must be imported using a type-only import when 'verbatimModuleSyntax' is enabled. import { TableTypes as _TableTypes } from '../index.js'; import type { TableTypes } from '../index.js'; @@ -19,8 +18,47 @@ import type { Column } from 'react-table'; import React from 'react'; -// Testing that all imports from `react-table` work as expected. -// import type * from 'react-table'; +/** + * Confirm that `Column` from `react-table` is equivalent to `TableTypes.Column`. + */ +() => { + const columns1: TableTypes.Column<{ + header1: string; + header2: string; + }>[] = [ + { + Header: 'Header 1', + accessor: 'header1', + }, + { + Header: 'Header 2', + accessor: 'header2', + }, + ] as Column<{ + header1: string; + header2: string; + }>[]; + + const columns2: Column<{ + header1: string; + header2: string; + }>[] = [ + { + Header: 'Header 1', + accessor: 'header1', + }, + { + Header: 'Header 2', + accessor: 'header2', + }, + ] as TableTypes.Column<{ + header1: string; + header2: string; + }>[]; + + // Dummy return statement to prevent the variables declared but unused warning + return [columns1, columns2]; +}; /** * Confirm that `satisfies` on columns does not give any unnecessary type errors. From 859d9e2348a74fe2af33b9462dde786ae1f9b2cf Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Thu, 31 Aug 2023 11:42:25 -0400 Subject: [PATCH 085/196] Removed unnecessary diff --- .../itwinui-react/src/core/Table/Table.tsx | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/packages/itwinui-react/src/core/Table/Table.tsx b/packages/itwinui-react/src/core/Table/Table.tsx index 161975ea17d..31aa0a2288e 100644 --- a/packages/itwinui-react/src/core/Table/Table.tsx +++ b/packages/itwinui-react/src/core/Table/Table.tsx @@ -4,16 +4,6 @@ *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; import cx from 'classnames'; -import type { - CellProps, - HeaderGroup, - TableOptions, - Row, - TableState, - ActionType, - TableInstance, - Column, -} from 'react-table'; import { actions as TableActions, useFlexLayout, @@ -26,6 +16,16 @@ import { useColumnOrder, useGlobalFilter, } from 'react-table'; +import type { + CellProps, + HeaderGroup, + TableOptions, + Row, + TableState, + ActionType, + TableInstance, + Column, +} from 'react-table'; import { ProgressRadial } from '../ProgressIndicators/index.js'; import { useGlobals, From 00396bccc2eebf84dd15cd23dddc202f19acfa03 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Thu, 31 Aug 2023 11:57:08 -0400 Subject: [PATCH 086/196] Combined two similar type tests --- .../Table/types/react-table-types.test.tsx | 77 +++++-------------- 1 file changed, 19 insertions(+), 58 deletions(-) diff --git a/packages/itwinui-react/src/core/Table/types/react-table-types.test.tsx b/packages/itwinui-react/src/core/Table/types/react-table-types.test.tsx index 085652384b2..6c40d2235b0 100644 --- a/packages/itwinui-react/src/core/Table/types/react-table-types.test.tsx +++ b/packages/itwinui-react/src/core/Table/types/react-table-types.test.tsx @@ -18,48 +18,6 @@ import type { Column } from 'react-table'; import React from 'react'; -/** - * Confirm that `Column` from `react-table` is equivalent to `TableTypes.Column`. - */ -() => { - const columns1: TableTypes.Column<{ - header1: string; - header2: string; - }>[] = [ - { - Header: 'Header 1', - accessor: 'header1', - }, - { - Header: 'Header 2', - accessor: 'header2', - }, - ] as Column<{ - header1: string; - header2: string; - }>[]; - - const columns2: Column<{ - header1: string; - header2: string; - }>[] = [ - { - Header: 'Header 1', - accessor: 'header1', - }, - { - Header: 'Header 2', - accessor: 'header2', - }, - ] as TableTypes.Column<{ - header1: string; - header2: string; - }>[]; - - // Dummy return statement to prevent the variables declared but unused warning - return [columns1, columns2]; -}; - /** * Confirm that `satisfies` on columns does not give any unnecessary type errors. */ @@ -159,11 +117,13 @@ import React from 'react'; }; /** - * Both 'react-table'.Column and TableTypes.Column should work. + * Confirm that `Column` from `react-table` is equivalent to `TableTypes.Column`. */ () => { - // Using 'react-table'.Column - const columns1 = [ + const columns1: TableTypes.Column<{ + header1: string; + header2: string; + }>[] = [ { Header: 'Header 1', accessor: 'header1', @@ -172,14 +132,15 @@ import React from 'react'; Header: 'Header 2', accessor: 'header2', }, - // No type error - ] satisfies Column<{ + ] as Column<{ header1: string; header2: string; }>[]; - // Using TableTypes.Column - const columns2 = [ + const columns2: Column<{ + header1: string; + header2: string; + }>[] = [ { Header: 'Header 1', accessor: 'header1', @@ -188,13 +149,15 @@ import React from 'react'; Header: 'Header 2', accessor: 'header2', }, - // No type error - ] satisfies TableTypes.Column<{ + ] as TableTypes.Column<{ header1: string; header2: string; }>[]; - const data = [ + const data: Array<{ + header1: string; + header2: string; + }> = [ { header1: 'row1', header2: 'row1', @@ -205,12 +168,10 @@ import React from 'react'; }, ]; - return ( -
-
-
- - ); +
+
+
+ ; }; /** From 358f211d1ffeeb4e665e5afc97e4da313abaaccf Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Thu, 31 Aug 2023 12:01:22 -0400 Subject: [PATCH 087/196] Removed unnecessary diffs --- packages/itwinui-react/src/core/utils/index.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/itwinui-react/src/core/utils/index.ts b/packages/itwinui-react/src/core/utils/index.ts index e697d657313..ec31f211feb 100644 --- a/packages/itwinui-react/src/core/utils/index.ts +++ b/packages/itwinui-react/src/core/utils/index.ts @@ -8,6 +8,4 @@ export * from './components/index.js'; export * from './props.js'; export * from './color/index.js'; export * from './icons/index.js'; -// export * from '../Table/types/index.js'; -// export * from '../Table/types/react-table-types.js'; export * from './types.js'; From c47954aa61f2d655177cd08c3908c1d0e7e12a9a Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Thu, 31 Aug 2023 12:02:32 -0400 Subject: [PATCH 088/196] Delete old testing files --- index.d.ts 1 | 924 ---------------------------------------- react-table-config.ts 1 | 251 ----------- ts playground.ts | 59 --- 3 files changed, 1234 deletions(-) delete mode 100644 index.d.ts 1 delete mode 100644 react-table-config.ts 1 delete mode 100644 ts playground.ts diff --git a/index.d.ts 1 b/index.d.ts 1 deleted file mode 100644 index 8988d42c4b0..00000000000 --- a/index.d.ts 1 +++ /dev/null @@ -1,924 +0,0 @@ -// Type definitions for react-table 7.7 -// Project: https://github.com/tannerlinsley/react-table -// Definitions by: Guy Gascoigne-Piggford , -// Michael Stramel -// Rohit Garg -// Jason Clark -// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped -// TypeScript Version: 3.5 -// reflects react-table@7.7.0 - -// tslint:disable:no-empty-interface -// no-empty-interface is disabled to allow easy extension with declaration merging - -// tslint:disable:no-unnecessary-generics -// no-unnecessary-generics is disabled because many of these definitions are either used in a generic -// context or the signatures are required to match for declaration merging - -// The changelog for the important changes is located in the Readme.md - -import { - ChangeEvent, - ComponentType, - CSSProperties, - DependencyList, - EffectCallback, - MouseEvent, - ReactElement, - ReactFragment, - ReactNode, -} from 'react'; - -export {}; - -/** - * The empty definitions of below provides a base definition for the parts used by useTable, that can then be extended in the users code. - * - * @example - * export interface TableOptions - * extends - * UseExpandedOptions, - * UseFiltersOptions {} - * see https://gist.github.com/ggascoigne/646e14c9d54258e40588a13aabf0102d for more details - */ -export interface TableOptions extends UseTableOptions {} - -export interface TableInstance - extends Omit, 'columns' | 'pageCount'>, - UseTableInstanceProps {} - -export interface TableState { - hiddenColumns?: Array> | undefined; -} - -export interface Hooks extends UseTableHooks {} - -export interface Cell extends UseTableCellProps {} - -export interface ColumnInterface extends UseTableColumnOptions {} - -export interface ColumnInterfaceBasedOnValue { - Cell?: Renderer> | undefined; -} - -export interface ColumnGroupInterface { - columns: Array>; -} - -export type ColumnGroup = - & ColumnInterface - // & ColumnGroupInterface - & ( - | { Header: string; } - | ({ id: IdType; } & { - Header: Renderer>; - }) - ) - // Not used, but needed for backwards compatibility - & { accessor?: Accessor | undefined; }; - -type ValueOf = T[keyof T]; - -// The accessors like `foo.bar` are not supported, use functions instead -export type ColumnWithStrictAccessor = - & ColumnInterface - & ValueOf<{ - [K in keyof D]: { - accessor: K; - } & ColumnInterfaceBasedOnValue; - }>; - -export type ColumnWithLooseAccessor = - & ColumnInterface - & ColumnInterfaceBasedOnValue - & ( - | { Header: string } - | { id: IdType } - | { accessor: keyof D extends never ? IdType : never } - ) - & { accessor?: (keyof D extends never ? IdType | Accessor : Accessor) | undefined; }; - -export type Column = - | ColumnGroup - | ColumnWithLooseAccessor - | ColumnWithStrictAccessor; - -export interface ColumnInstance - extends Omit, 'id'>, - ColumnInterfaceBasedOnValue, - UseTableColumnProps {} - -export interface HeaderGroup extends ColumnInstance, UseTableHeaderGroupProps {} - -export interface Row extends UseTableRowProps {} - -export interface TableCommonProps { - style?: CSSProperties | undefined; - className?: string | undefined; - role?: string | undefined; -} - -export interface TableProps extends TableCommonProps {} - -export interface TableBodyProps extends TableCommonProps {} - -export interface TableKeyedProps extends TableCommonProps { - key: React.Key; -} - -export interface TableHeaderGroupProps extends TableKeyedProps {} - -export interface TableFooterGroupProps extends TableKeyedProps {} - -export interface TableHeaderProps extends TableKeyedProps {} - -export interface TableFooterProps extends TableKeyedProps {} - -export interface TableRowProps extends TableKeyedProps {} - -export interface TableCellProps extends TableKeyedProps {} - -export interface TableToggleCommonProps extends TableCommonProps { - onChange?: ((e: ChangeEvent) => void) | undefined; - checked?: boolean | undefined; - title?: string | undefined; - indeterminate?: boolean | undefined; -} - -export interface MetaBase { - instance: TableInstance; - userProps: any; -} - -// inspired by ExtendState in https://github.com/reduxjs/redux/blob/master/src/types/store.ts -export type Meta> = [Extension] extends [never] - ? M - : M & Extension; - -//#region useTable -export function useTable( - options: TableOptions, - ...plugins: Array> -): TableInstance; - -/** - * NOTE: To use custom options, use "Interface Merging" to add the custom options - */ -export type UseTableOptions = { - columns: ReadonlyArray>; - data: readonly D[]; -} & Partial<{ - initialState: Partial>; - stateReducer: (newState: TableState, action: ActionType, previousState: TableState, instance?: TableInstance) => TableState; - useControlledState: (state: TableState, meta: Meta) => TableState; - defaultColumn: Partial>; - getSubRows: (originalRow: D, relativeIndex: number) => D[]; - getRowId: (originalRow: D, relativeIndex: number, parent?: Row) => string; - autoResetHiddenColumns: boolean; -}>; - -export type PropGetter> = - | ((props: P, meta: Meta) => P | P[]) - | P - | P[]; - -export type TablePropGetter = PropGetter; - -export type TableBodyPropGetter = PropGetter; - -export type HeaderPropGetter = PropGetter }>; - -export type FooterGroupPropGetter = PropGetter }>; - -export type HeaderGroupPropGetter = PropGetter }>; - -export type FooterPropGetter = PropGetter }>; - -export type RowPropGetter = PropGetter }>; - -export type CellPropGetter = PropGetter }>; - -export interface ReducerTableState extends TableState, Record {} - -export interface UseTableHooks extends Record { - useOptions: Array<(options: TableOptions, args: TableOptions) => TableOptions>; - stateReducers: Array< - ( - newState: TableState, - action: ActionType, - previousState?: TableState, - instance?: TableInstance, - ) => ReducerTableState | undefined - >; - columns: Array<(columns: Array>, meta: Meta) => Array>>; - columnsDeps: Array<(deps: any[], meta: Meta) => any[]>; - allColumns: Array<(allColumns: Array>, meta: Meta) => Array>>; - allColumnsDeps: Array<(deps: any[], meta: Meta) => any[]>; - visibleColumns: Array<(allColumns: Array>, meta: Meta) => Array>>; - visibleColumnsDeps: Array<(deps: any[], meta: Meta) => any[]>; - headerGroups: Array<(allColumns: Array>, meta: Meta) => Array>>; - headerGroupsDeps: Array<(deps: any[], meta: Meta) => any[]>; - useInstanceBeforeDimensions: Array<(instance: TableInstance) => void>; - useInstance: Array<(instance: TableInstance) => void>; - prepareRow: Array<(row: Row, meta: Meta) => void>; - useControlledState: Array<(state: TableState, meta: Meta) => TableState>; - - getTableProps: Array>; - getTableBodyProps: Array>; - getHeaderGroupProps: Array>; - getFooterGroupProps: Array>; - getHeaderProps: Array>; - getFooterProps: Array>; - getRowProps: Array>; - getCellProps: Array>; - useFinalInstance: Array<(instance: TableInstance) => void>; -} - -export interface UseTableColumnOptions { - id?: IdType | undefined; - Header?: Renderer> | undefined; - Footer?: Renderer> | undefined; - width?: number | string | undefined; - minWidth?: number | undefined; - maxWidth?: number | undefined; -} - -type UpdateHiddenColumns = (oldHidden: Array>) => Array>; - -export interface TableToggleHideAllColumnProps extends TableToggleCommonProps {} - -export interface UseTableInstanceProps { - state: TableState; - plugins: Array>; - dispatch: TableDispatch; - columns: Array>; - allColumns: Array>; - visibleColumns: Array>; - headerGroups: Array>; - footerGroups: Array>; - headers: Array>; - flatHeaders: Array>; - rows: Array>; - rowsById: Record>; - getTableProps: (propGetter?: TablePropGetter) => TableProps; - getTableBodyProps: (propGetter?: TableBodyPropGetter) => TableBodyProps; - prepareRow: (row: Row) => void; - flatRows: Array>; - totalColumnsWidth: number; - allColumnsHidden: boolean; - toggleHideColumn: (columnId: IdType, value?: boolean) => void; - setHiddenColumns: (param: Array> | UpdateHiddenColumns) => void; - toggleHideAllColumns: (value?: boolean) => void; - getToggleHideAllColumnsProps: (props?: Partial) => TableToggleHideAllColumnProps; - getHooks: () => Hooks; -} - -export interface UseTableHeaderGroupProps { - headers: Array>; - getHeaderGroupProps: (propGetter?: HeaderGroupPropGetter) => TableHeaderProps; - getFooterGroupProps: (propGetter?: FooterGroupPropGetter) => TableFooterProps; - totalHeaderCount: number; // not documented -} - -export interface UseTableColumnProps { - id: IdType; - columns?: Array> | undefined; - isVisible: boolean; - render: (type: 'Header' | 'Footer' | string, props?: object) => ReactNode; - totalLeft: number; - totalWidth: number; - getHeaderProps: (propGetter?: HeaderPropGetter) => TableHeaderProps; - getFooterProps: (propGetter?: FooterPropGetter) => TableFooterProps; - toggleHidden: (value?: boolean) => void; - parent?: ColumnInstance | undefined; // not documented - getToggleHiddenProps: (userProps?: any) => any; - depth: number; // not documented - placeholderOf?: ColumnInstance | undefined; -} - -export interface UseTableRowProps { - cells: Array>; - allCells: Array>; - values: Record, CellValue>; - getRowProps: (propGetter?: RowPropGetter) => TableRowProps; - index: number; - original: D; - id: string; - subRows: Array>; -} - -export interface UseTableCellProps { - column: ColumnInstance; - row: Row; - value: CellValue; - getCellProps: (propGetter?: CellPropGetter) => TableCellProps; - render: (type: 'Cell' | string, userProps?: object) => ReactNode; -} - -export type HeaderProps = TableInstance & { - column: ColumnInstance; -}; - -export type FooterProps = TableInstance & { - column: ColumnInstance; -}; - -export type CellProps = TableInstance & { - column: ColumnInstance; - row: Row; - cell: Cell; - value: CellValue; -}; - -export type Accessor = ( - originalRow: D, - index: number, - sub: { - subRows: D[]; - depth: number; - data: D[]; - }, -) => CellValue; - -//#endregion - -// Plugins - -//#region useAbsoluteLayout -export function useAbsoluteLayout(hooks: Hooks): void; - -export namespace useAbsoluteLayout { - const pluginName = 'useAbsoluteLayout'; -} -//#endregion - -//#region useBlockLayout -export function useBlockLayout(hooks: Hooks): void; - -export namespace useBlockLayout { - const pluginName = 'useBlockLayout'; -} -//#endregion - -//#region useColumnOrder -export function useColumnOrder(hooks: Hooks): void; - -export namespace useColumnOrder { - const pluginName = 'useColumnOrder'; -} - -export interface UseColumnOrderState { - columnOrder: Array>; -} - -export interface UseColumnOrderInstanceProps { - setColumnOrder: (updater: ((columnOrder: Array>) => Array>) | Array>) => void; -} - -//#endregion - -//#region useExpanded -export function useExpanded(hooks: Hooks): void; - -export namespace useExpanded { - const pluginName = 'useExpanded'; -} - -export interface TableExpandedToggleProps extends TableKeyedProps {} - -export type UseExpandedOptions = Partial<{ - manualExpandedKey: IdType; - paginateExpandedRows: boolean; - expandSubRows: boolean; - autoResetExpanded?: boolean | undefined; -}>; - -export interface UseExpandedHooks { - getToggleRowsExpandedProps: Array>; - getToggleAllRowsExpandedProps: Array>; -} - -export interface UseExpandedState { - expanded: Record, boolean>; -} - -export interface UseExpandedInstanceProps { - preExpandedRows: Array>; - expandedRows: Array>; - rows: Array>; - expandedDepth: number; - isAllRowsExpanded: boolean; - toggleRowExpanded: (id: Array>, value?: boolean) => void; - toggleAllRowsExpanded: (value?: boolean) => void; -} - -export interface UseExpandedRowProps { - isExpanded: boolean; - canExpand: boolean; - subRows: Array>; - toggleRowExpanded: (value?: boolean) => void; - getToggleRowExpandedProps: (props?: Partial) => TableExpandedToggleProps; - depth: number; -} - -//#endregion - -//#region useFilters -export function useFilters(hooks: Hooks): void; - -export namespace useFilters { - const pluginName = 'useFilters'; -} - -export type UseFiltersOptions = Partial<{ - manualFilters: boolean; - disableFilters: boolean; - defaultCanFilter: boolean; - filterTypes: FilterTypes; - autoResetFilters?: boolean | undefined; -}>; - -export interface UseFiltersState { - filters: Filters; -} - -export type UseFiltersColumnOptions = Partial<{ - Filter: Renderer>; - disableFilters: boolean; - defaultCanFilter: boolean; - filter: FilterType | DefaultFilterTypes | string; -}>; - -export interface UseFiltersInstanceProps { - preFilteredRows: Array>; - preFilteredFlatRows: Array>; - preFilteredRowsById: Record>; - filteredRows: Array>; - filteredFlatRows: Array>; - filteredRowsById: Record>; - rows: Array>; - flatRows: Array>; - rowsById: Record>; - setFilter: (columnId: IdType, updater: ((filterValue: FilterValue) => FilterValue) | FilterValue) => void; - setAllFilters: (updater: Filters | ((filters: Filters) => Filters)) => void; -} - -export interface UseFiltersColumnProps { - canFilter: boolean; - setFilter: (updater: ((filterValue: FilterValue) => FilterValue) | FilterValue) => void; - filterValue: FilterValue; - preFilteredRows: Array>; - filteredRows: Array>; -} - -export type FilterProps = HeaderProps; -export type FilterValue = any; -export type Filters = Array<{ id: IdType; value: FilterValue }>; -export type FilterTypes = Record>; - -export type DefaultFilterTypes = - | 'text' - | 'exactText' - | 'exactTextCase' - | 'includes' - | 'includesAll' - | 'exact' - | 'equals' - | 'between'; - -export interface FilterType { - (rows: Array>, columnIds: Array>, filterValue: FilterValue): Array>; - - autoRemove?: ((filterValue: FilterValue) => boolean) | undefined; -} - -//#endregion - -//#region useFlexLayout -export function useFlexLayout(hooks: Hooks): void; - -export namespace useFlexLayout { - const pluginName = 'useFlexLayout'; -} -//#endregion - -//#region useGridLayout -export function useGridLayout(hooks: Hooks): void; - -export namespace useGridLayout { - const pluginName = 'useGridLayout'; -} -//#endregion - -//#region useGlobalFilter -export function useGlobalFilter(hooks: Hooks): void; - -export namespace useGlobalFilter { - const pluginName = 'useGlobalFilter'; -} - -export type UseGlobalFiltersOptions = Partial<{ - globalFilter: ((rows: Array>, columnIds: Array>, filterValue: any) => Array>) | string; - manualGlobalFilter: boolean; - filterTypes: FilterTypes; - autoResetGlobalFilter?: boolean | undefined; - disableGlobalFilter?: boolean | undefined; -}>; - -export interface UseGlobalFiltersState { - globalFilter: any; -} - -export type UseGlobalFiltersColumnOptions = Partial<{ - disableGlobalFilter?: boolean | undefined; -}>; - -export interface UseGlobalFiltersInstanceProps { - preGlobalFilteredRows: Array>; - preGlobalFilteredFlatRows: Array>; - preGlobalFilteredRowsById: Record>; - globalFilteredRows: Array>; - globalFilteredFlatRows: Array>; - globalFilteredRowsById: Record>; - rows: Array>; - flatRows: Array>; - rowsById: Record>; - setGlobalFilter: (filterValue: FilterValue) => void; -} - -//#endregion - -//#region useGroupBy -export function useGroupBy(hooks: Hooks): void; - -export namespace useGroupBy { - const pluginName = 'useGroupBy'; -} - -export interface TableGroupByToggleProps { - title?: string | undefined; - style?: CSSProperties | undefined; - onClick?: ((e: MouseEvent) => void) | undefined; -} - -export type UseGroupByOptions = Partial<{ - manualGroupBy: boolean; - disableGroupBy: boolean; - defaultCanGroupBy: boolean; - aggregations: Record>; - groupByFn: (rows: Array>, columnId: IdType) => Record>>; - autoResetGroupBy?: boolean | undefined; -}>; - -export interface UseGroupByHooks { - getGroupByToggleProps: Array>; -} - -export interface UseGroupByState { - groupBy: Array>; -} - -export type UseGroupByColumnOptions = Partial<{ - aggregate: Aggregator; - Aggregated: Renderer>; - disableGroupBy: boolean; - defaultCanGroupBy: boolean; -}>; - -export interface UseGroupByInstanceProps { - preGroupedRows: Array>; - preGroupedFlatRows: Array>; - preGroupedRowsById: Record>; - groupedRows: Array>; - groupedFlatRows: Array>; - groupedRowsById: Record>; - onlyGroupedFlatRows: Array>; - onlyGroupedRowsById: Record>; - nonGroupedFlatRows: Array>; - nonGroupedRowsById: Record>; - rows: Array>; - flatRows: Array>; - rowsById: Record>; - toggleGroupBy: (columnId: IdType, value?: boolean) => void; -} - -export interface UseGroupByColumnProps { - canGroupBy: boolean; - isGrouped: boolean; - groupedIndex: number; - toggleGroupBy: () => void; - getGroupByToggleProps: (props?: Partial) => TableGroupByToggleProps; -} - -export interface UseGroupByRowProps { - isGrouped: boolean; - groupByID: IdType; - groupByVal: string; - values: Record, AggregatedValue>; - subRows: Array>; - leafRows: Array>; - depth: number; - id: string; - index: number; -} - -export interface UseGroupByCellProps { - isGrouped: boolean; - isPlaceholder: boolean; - isAggregated: boolean; -} - -export type DefaultAggregators = 'sum' | 'average' | 'median' | 'uniqueCount' | 'count'; - -export type AggregatorFn = ( - columnValues: CellValue[], - rows: Array>, - isAggregated: boolean, -) => AggregatedValue; -export type Aggregator = AggregatorFn | DefaultAggregators | string; -export type AggregatedValue = any; -//#endregion - -//#region usePagination -export function usePagination(hooks: Hooks): void; - -export namespace usePagination { - const pluginName = 'usePagination'; -} - -export type UsePaginationOptions = Partial<{ - pageCount: number; - manualPagination: boolean; - autoResetPage?: boolean | undefined; - paginateExpandedRows: boolean; -}>; - -export interface UsePaginationState { - pageSize: number; - pageIndex: number; -} - -export interface UsePaginationInstanceProps { - page: Array>; - pageCount: number; - pageOptions: number[]; - canPreviousPage: boolean; - canNextPage: boolean; - gotoPage: (updater: ((pageIndex: number) => number) | number) => void; - previousPage: () => void; - nextPage: () => void; - setPageSize: (pageSize: number) => void; -} - -//#endregion - -//#region useResizeColumns -export function useResizeColumns(hooks: Hooks): void; - -export namespace useResizeColumns { - const pluginName = 'useResizeColumns'; -} - -export interface UseResizeColumnsOptions { - disableResizing?: boolean | undefined; - autoResetResize?: boolean | undefined; -} - -export interface UseResizeColumnsState { - columnResizing: { - startX?: number | undefined; - columnWidth: number; - headerIdWidths: Record; - columnWidths: any; - isResizingColumn?: string | undefined; - }; -} - -export interface UseResizeColumnsColumnOptions { - disableResizing?: boolean | undefined; -} - -export interface TableResizerProps {} - -export interface UseResizeColumnsColumnProps { - getResizerProps: (props?: Partial) => TableResizerProps; - canResize: boolean; - isResizing: boolean; -} - -//#endregion - -//#region useRowSelect -export function useRowSelect(hooks: Hooks): void; - -export namespace useRowSelect { - const pluginName = 'useRowSelect'; -} - -export interface TableToggleAllRowsSelectedProps extends TableToggleCommonProps {} - -export interface TableToggleRowsSelectedProps extends TableToggleCommonProps {} - -export type UseRowSelectOptions = Partial<{ - manualRowSelectedKey: IdType; - autoResetSelectedRows: boolean; - selectSubRows: boolean; -}>; - -export interface UseRowSelectHooks { - getToggleRowSelectedProps: Array>; - getToggleAllRowsSelectedProps: Array>; - getToggleAllPageRowsSelectedProps: Array>; -} - -export interface UseRowSelectState { - selectedRowIds: Record, boolean>; -} - -export interface UseRowSelectInstanceProps { - toggleRowSelected: (rowId: IdType, set?: boolean) => void; - toggleAllRowsSelected: (value?: boolean) => void; - getToggleAllRowsSelectedProps: ( - props?: Partial, - ) => TableToggleAllRowsSelectedProps; - getToggleAllPageRowsSelectedProps: ( - props?: Partial, - ) => TableToggleAllRowsSelectedProps; - isAllRowsSelected: boolean; - selectedFlatRows: Array>; -} - -export interface UseRowSelectRowProps { - isSelected: boolean; - isSomeSelected: boolean; - toggleRowSelected: (set?: boolean) => void; - getToggleRowSelectedProps: (props?: Partial) => TableToggleRowsSelectedProps; -} - -//#endregion - -//#region useRowState -export function useRowState(hooks: Hooks): void; - -export namespace useRowState { - const pluginName = 'useRowState'; -} - -export type UseRowStateOptions = Partial<{ - initialRowStateAccessor: (row: Row) => UseRowStateLocalState; - getResetRowStateDeps: (instance: TableInstance) => any[]; - autoResetRowState?: boolean | undefined; -}>; - -export interface UseRowStateState { - rowState: Record }>; -} - -export interface UseRowStateInstanceProps { - setRowState: (rowPath: string[], updater: UseRowUpdater) => void; - setCellState: (rowPath: string[], columnId: IdType, updater: UseRowUpdater) => void; -} - -export interface UseRowStateRowProps { - state: UseRowStateLocalState; - setState: (updater: UseRowUpdater) => void; -} - -export interface UseRowStateCellProps { - state: UseRowStateLocalState; - setState: (updater: UseRowUpdater) => void; -} - -export type UseRowUpdater = T | ((prev: T) => T); -export type UseRowStateLocalState = Record, T>; -//#endregion - -//#region useSortBy -export function useSortBy(hooks: Hooks): void; - -export namespace useSortBy { - const pluginName = 'useSortBy'; -} - -export interface TableSortByToggleProps { - title?: string | undefined; - style?: CSSProperties | undefined; - onClick?: ((e: MouseEvent) => void)| undefined; -} - -export type UseSortByOptions = Partial<{ - manualSortBy: boolean; - disableSortBy: boolean; - defaultCanSort: boolean; - disableMultiSort: boolean; - isMultiSortEvent: (e: MouseEvent) => boolean; - maxMultiSortColCount: number; - disableSortRemove: boolean; - disabledMultiRemove: boolean; - orderByFn: (rows: Array>, sortFns: Array>, directions: boolean[]) => Array>; - sortTypes: Record>; - autoResetSortBy?: boolean | undefined; -}>; - -export interface UseSortByHooks { - getSortByToggleProps: Array>; -} - -export interface UseSortByState { - sortBy: Array>; -} - -export type UseSortByColumnOptions = Partial<{ - defaultCanSort: boolean; - disableSortBy: boolean; - sortDescFirst: boolean; - sortInverted: boolean; - sortType: SortByFn | DefaultSortTypes | string; -}>; - -export interface UseSortByInstanceProps { - rows: Array>; - preSortedRows: Array>; - setSortBy: (sortBy: Array>) => void; - toggleSortBy: (columnId: IdType, descending?: boolean, isMulti?: boolean) => void; -} - -export interface UseSortByColumnProps { - canSort: boolean; - toggleSortBy: (descending?: boolean, multi?: boolean) => void; - getSortByToggleProps: (props?: Partial) => TableSortByToggleProps; - clearSortBy: () => void; - isSorted: boolean; - sortedIndex: number; - isSortedDesc: boolean | undefined; -} - -export type OrderByFn = (rowA: Row, rowB: Row) => number; -export type SortByFn = (rowA: Row, rowB: Row, columnId: IdType, desc?: boolean) => number; - -export type DefaultSortTypes = 'alphanumeric' | 'datetime' | 'basic' | 'string' | 'number'; - -export interface SortingRule { - id: IdType; - desc?: boolean | undefined; -} - -//#endregion - -// Additional API -export const actions: Record; -export type ActionType = { type: string } & Record; -export const defaultColumn: Partial & Record; - -// Helpers -export type StringKey = Extract; -export type IdType = StringKey | string; -export type CellValue = V; - -export type Renderer = ComponentType | ReactElement | string | number | ReactFragment; - -export interface PluginHook { - (hooks: Hooks): void; - pluginName?: string | undefined; -} - -export type TableDispatch = (action: A) => void; - -// utils -export function defaultOrderByFn( - arr: Array>, - funcs: Array>, - dirs: boolean[], -): Array>; - -export function defaultGroupByFn( - rows: Array>, - columnId: IdType, -): Record>>; - -export function makePropGetter(hooks: Hooks, ...meta: any[]): any; - -export function reduceHooks(hooks: Hooks, initial: T, ...args: any[]): T; - -export function loopHooks(hooks: Hooks, ...args: any[]): void; - -export function ensurePluginOrder( - plugins: Array>, - befores: string[], - pluginName: string, -): void; - -export function functionalUpdate( - updater: any, - old: Partial>, -): Partial>; - -export function useGetLatest(obj: T): () => T; - -export function safeUseLayoutEffect(effect: EffectCallback, deps?: DependencyList): void; - -export function useMountedLayoutEffect(effect: EffectCallback, deps?: DependencyList): void; - -export function useAsyncDebounce any>(defaultFn: F, defaultWait?: number): F; - -export function makeRenderer(instance: TableInstance, column: ColumnInstance, meta?: any): ReactElement; diff --git a/react-table-config.ts 1 b/react-table-config.ts 1 deleted file mode 100644 index 615f77e4df3..00000000000 --- a/react-table-config.ts 1 +++ /dev/null @@ -1,251 +0,0 @@ -/*--------------------------------------------------------------------------------------------- - * Copyright (c) Bentley Systems, Incorporated. All rights reserved. - * See LICENSE.md in the project root for license terms and full copyright notice. - *--------------------------------------------------------------------------------------------*/ -// react-table was written with plain JS therefore these type overrides are needed -// Link: https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-table -/* eslint-disable @typescript-eslint/ban-types */ -// eslint-disable-next-line @typescript-eslint/ban-ts-comment -// @ts-ignore -import type { - UseColumnOrderInstanceProps, - UseColumnOrderState, - UseExpandedHooks, - UseExpandedInstanceProps, - UseExpandedOptions, - UseExpandedRowProps, - UseExpandedState, - UseFiltersColumnOptions, - UseFiltersColumnProps, - UseFiltersInstanceProps, - UseFiltersOptions, - UseFiltersState, - UseGlobalFiltersColumnOptions, - UseGlobalFiltersInstanceProps, - UseGlobalFiltersOptions, - UseGlobalFiltersState, - UseGroupByCellProps, - // UseGroupByColumnOptions, - UseGroupByColumnProps, - UseGroupByHooks, - UseGroupByInstanceProps, - // UseGroupByOptions, - UseGroupByRowProps, - UseGroupByState, - UsePaginationInstanceProps, - UsePaginationOptions, - UsePaginationState, - UseResizeColumnsColumnOptions, - UseResizeColumnsColumnProps, - UseResizeColumnsOptions, - // UseResizeColumnsState, - UseRowSelectHooks, - UseRowSelectInstanceProps, - UseRowSelectOptions, - UseRowSelectRowProps, - UseRowSelectState, - UseRowStateCellProps, - UseRowStateInstanceProps, - // UseRowStateOptions, - UseRowStateRowProps, - UseRowStateState, - UseSortByColumnOptions, - UseSortByColumnProps, - UseSortByHooks, - UseSortByInstanceProps, - UseSortByOptions, - UseSortByState, - UseTableOptions, -} from 'react-table'; -import type { TableFilterProps } from '../core/Table/filters/index.js'; - -declare module 'react-table' { - export type FieldType = 'text' | 'number' | 'date' | string; - - export type CellRendererProps = { - /** - * Cell HTML props passed from the Table. - */ - cellElementProps: TableCellProps; - /** - * Table specific cell props like `column`, `row`. - */ - cellProps: CellProps; - /** - * Cell's content. - */ - children: React.ReactNode; - /** - * Function that returns whether the cell is disabled. - */ - isDisabled?: (rowData: D) => boolean; - }; - - // take this file as-is, or comment out the sections that don't apply to your plugin configuration - export interface TableOptions - extends Omit, 'data' | 'columns'>, - UseRowSelectOptions, - UseExpandedOptions, - UseFiltersOptions, - // UseGroupByOptions, - UsePaginationOptions, - UseGlobalFiltersOptions, - UseGlobalFiltersColumnOptions, - Omit, 'disableResizing'>, - // UseRowStateOptions, - UseSortByOptions { - /** - * List of columns. - * - * Should not have a top-level `Header` or a `columns` sub-property. They are only allowed to be passed for backwards compatibility. - * See [migration guide](https://github.com/iTwin/iTwinUI/wiki/iTwinUI-react-v2-migration-guide#breaking-changes). - */ - columns: Array>; - /** - * Table data list. - * Must be memoized. - * - * Supports expandable sub-rows using the `subRows` field in data entries. - * If some rows don't have sub-data, it is recommended to pass an empty array to `subRows` for consistent spacing. - */ - data: D[]; - /** - * Column's resize mode. - * - `fit` - when resizing it affects current and the next column, - * e.g. when increasing width of current column, next column's width will decrease. - * - `expand` - when resizing it affects only the current column, - * e.g. when increasing width of the current column, next column's width remains the same. - * @default 'fit' - */ - columnResizeMode?: 'fit' | 'expand'; - } - - export interface Hooks - extends UseExpandedHooks, - UseGroupByHooks, - UseRowSelectHooks, - UseSortByHooks {} - - export interface TableInstance - extends UseColumnOrderInstanceProps, - UseExpandedInstanceProps, - UseFiltersInstanceProps, - UseGlobalFiltersInstanceProps, - UseGroupByInstanceProps, - UsePaginationInstanceProps, - UseRowSelectInstanceProps, - UseRowStateInstanceProps, - UseSortByInstanceProps { - initialRows: Row[]; - columnResizeMode: TableOptions['columnResizeMode']; - tableWidth: number; - } - - export interface TableState - extends UseColumnOrderState, - UseExpandedState, - UseFiltersState, - UseGlobalFiltersState, - UseGroupByState, - UsePaginationState, - UseRowSelectState, - UseRowStateState, - UseSortByState { - // UseResizeColumnsState with fixed typings - columnResizing: { - startX?: number; - columnWidth?: number; - nextColumnWidth?: number; - headerIdWidths?: Array<[string, number]>; - nextHeaderIdWidths?: Array<[string, number]>; - columnWidths: Record; - isResizingColumn?: string; - }; - isTableResizing?: boolean; - columnReorderStartIndex: number; - sticky: { - isScrolledToRight?: boolean; - isScrolledToLeft?: boolean; - }; - lastSelectedRowId?: string; - } - - export interface ColumnInterface - // UseGroupByColumnOptions, - extends UseSortByColumnOptions, - UseFiltersColumnOptions, - UseResizeColumnsColumnOptions, - UseGlobalFiltersColumnOptions { - /** - * Custom class name applied to header column cell. - */ - columnClassName?: string; - /** - * Custom class name applied to each column's cell. - */ - cellClassName?: string; - /** - * Type of the data in cell. Used for manual filtering. - */ - fieldType?: FieldType; - /** - * Filter component used as a column filter. Should use filters from `tableFilters`. - */ - Filter?: Renderer> | Renderer>; - /** - * String value or custom function to use for filtering. - * Possible string values: `text`, `exactText`, `exactTextCase`, `includes`, `includesAll`, `exact`, `equals`, `between`. - * More info about these filters: https://github.com/tannerlinsley/react-table/blob/master/src/filterTypes.js - */ - filter?: FilterType | DefaultFilterTypes | string; - /** - * Function that should return whole cell element not only the content. - * Must be memoized. - * @example - * { - * Header: 'Name', - * accessor: 'name', - * cellRenderer: (props) => , - * } - */ - cellRenderer?: (props: CellRendererProps) => React.ReactNode; - /** - * If true, column can't be reordered. - * @default false - */ - disableReordering?: boolean; - /** - * If true, column's visibility cannot be toggled. - * @default false - */ - disableToggleVisibility?: boolean; - /** - * Side on which column should be sticked to. - */ - sticky?: 'left' | 'right'; - } - - export interface ColumnInstance - extends UseFiltersColumnProps, - UseGroupByColumnProps, - UseResizeColumnsColumnProps, - UseSortByColumnProps { - originalWidth: number; - resizeWidth?: number; - isResizerVisible?: boolean; - getDragAndDropProps: () => TableKeyedProps; - originalSticky?: 'left' | 'right' | 'none'; - } - - // export interface Cell - // extends UseGroupByCellProps, - // UseRowStateCellProps {} - - export interface Row - extends UseExpandedRowProps, - UseGroupByRowProps, - UseRowSelectRowProps, - UseRowStateRowProps { - initialSubRows: Row[]; - } -} diff --git a/ts playground.ts b/ts playground.ts deleted file mode 100644 index eb540b54d0d..00000000000 --- a/ts playground.ts +++ /dev/null @@ -1,59 +0,0 @@ -/*--------------------------------------------------------------------------------------------- - * Copyright (c) Bentley Systems, Incorporated. All rights reserved. - * See LICENSE.md in the project root for license terms and full copyright notice. - *--------------------------------------------------------------------------------------------*/ -// Welcome to the TypeScript Playground, this is a website -// which gives you a chance to write, share and learn TypeScript. - -// You could think of it in three ways: -// -// - A location to learn TypeScript where nothing can break -// - A place to experiment with TypeScript syntax, and share the URLs with others -// - A sandbox to experiment with different compiler features of TypeScript - -const anExampleVariable = 'Hello World'; -console.log(anExampleVariable); - -// To learn more about the language, click above in "Examples" or "What's New". -// Otherwise, get started by removing these comments and the world is your playground. - -type MyColType = { - prod: string; - price: number; -}; - -type MyProps = { - prop1: D; - prop2: V; -}; - -type MyInterface = { - sticky: 'left' | 'top' | 'right'; -}; - -type ValueOf = T[keyof T]; - -type MyInterfaceBsdOnValue = { - testing1: MyProps; -}; - -type StrictProps = MyInterface & - ValueOf<{ - [K in keyof D]: { - accessor: K; - } & MyInterfaceBsdOnValue; - }>; - -const myCols = [ - { - accessor: 'price', - sticky: 'left', - testing1: { - prop1: { - prod: '', - price: 1, - }, - prop2: 1, - }, - }, -] satisfies Array>; From eae6ee96ba685adadd4376f41e1f3c9b2e15f75d Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Thu, 31 Aug 2023 12:04:15 -0400 Subject: [PATCH 089/196] Removed unnecessary changes --- packages/itwinui-react/.eslintignore | 4 ---- packages/itwinui-react/src/index.ts | 10 ---------- 2 files changed, 14 deletions(-) diff --git a/packages/itwinui-react/.eslintignore b/packages/itwinui-react/.eslintignore index e234fb7f1a2..0033cd845a0 100644 --- a/packages/itwinui-react/.eslintignore +++ b/packages/itwinui-react/.eslintignore @@ -7,7 +7,3 @@ scripts cjs esm *.d.ts - -# # Ignore all .d.ts files, except the ones in src/types/react-table/index.d.ts -# **/*.d.ts -# !src/types/react-table/index.d.ts diff --git a/packages/itwinui-react/src/index.ts b/packages/itwinui-react/src/index.ts index 3bb1edac398..489768890ab 100644 --- a/packages/itwinui-react/src/index.ts +++ b/packages/itwinui-react/src/index.ts @@ -3,13 +3,3 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ export * from './core/index.js'; -// export * as Objects from './core/index.js'; -// import * as Q from './core/index.js'; - -// const q: Types.TableTypes; - -// export * from './types/react-table-config.js'; -// export type * as ReactTableTypes from './core/Table/types/react-table-types.js'; -// import * from './types/react-table-types.js'; - -// export const CellPropsq = {}; From cc8ca64a24f903298c5c796b2ce01fbd464b5dfd Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Thu, 31 Aug 2023 12:04:46 -0400 Subject: [PATCH 090/196] Comment explanation --- packages/itwinui-react/.swcrc | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/itwinui-react/.swcrc b/packages/itwinui-react/.swcrc index c5b939c5f78..70a22604840 100644 --- a/packages/itwinui-react/.swcrc +++ b/packages/itwinui-react/.swcrc @@ -11,6 +11,7 @@ "exclude": [ "src/styles.js", "src/styles.d.ts", + // Since swc converts `react-table-types.d.ts` to `react-table-types.d.js` "src/core/Table/types/react-table-types.d.ts" ] } From f68aed02285b453123fe61c6720e023bae4638b7 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Thu, 31 Aug 2023 12:08:44 -0400 Subject: [PATCH 091/196] Ignore react-table-types.test.tsx from jest since this file is only to test types and not to run any unit tests --- packages/itwinui-react/jest.config.cjs | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/itwinui-react/jest.config.cjs b/packages/itwinui-react/jest.config.cjs index 0835fa61435..c4abd3bb35c 100644 --- a/packages/itwinui-react/jest.config.cjs +++ b/packages/itwinui-react/jest.config.cjs @@ -150,7 +150,13 @@ module.exports = { // ], // An array of regexp pattern strings that are matched against all test paths, matched tests are skipped - testPathIgnorePatterns: ['/node_modules/', '/esm/', '/cjs/'], + testPathIgnorePatterns: [ + '/node_modules/', + '/esm/', + '/cjs/', + // Since this file is only to test types and not to run any unit tests + 'src/core/Table/types/react-table-types.test.tsx', + ], // The regexp pattern or array of patterns that Jest uses to detect test files // testRegex: [], From 8ab6cffa5436dcef8374de9c9a010e7c619c1a90 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Thu, 31 Aug 2023 12:08:56 -0400 Subject: [PATCH 092/196] Typo --- packages/itwinui-react/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/itwinui-react/package.json b/packages/itwinui-react/package.json index f31a83f7573..82d4f8dfab7 100644 --- a/packages/itwinui-react/package.json +++ b/packages/itwinui-react/package.json @@ -61,7 +61,7 @@ "clean:build": "rimraf esm && rimraf cjs", "clean:coverage": "rimraf coverage", "clean": "rimraf .turbo && yarn clean:coverage && yarn clean:build && rimraf node_modules", - "test": "yarn test:jest && yarn test:types", + "test": "yarn test:unit && yarn test:types", "test:unit": "jest", "test:unit:watch": "jest --watch", "test:types": "tsc -p tsconfig.test.json --noEmit", From b8cb71358171da6b98af85779020bcf7eb2948ed Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Thu, 31 Aug 2023 12:12:57 -0400 Subject: [PATCH 093/196] Fixed type errors in Table.stories.tsx --- apps/storybook/src/Table.stories.tsx | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/apps/storybook/src/Table.stories.tsx b/apps/storybook/src/Table.stories.tsx index c9be178718a..da3d66e2b9b 100644 --- a/apps/storybook/src/Table.stories.tsx +++ b/apps/storybook/src/Table.stories.tsx @@ -13,14 +13,10 @@ import { Table, Text, tableFilters, - TableFilterValue, - TableProps, - TableTypes, Tooltip, DefaultCell, EditableCell, TablePaginator, - TablePaginatorRendererProps, ActionColumn, Anchor, SelectionColumn, @@ -30,7 +26,13 @@ import { ProgressRadial, BaseFilter, } from '@itwin/itwinui-react'; -import { Story, Meta } from '@storybook/react'; +import type { + TableFilterValue, + TableProps, + TableTypes, + TablePaginatorRendererProps, +} from '@itwin/itwinui-react'; +import type { Story, Meta } from '@storybook/react'; import { useMemo, useState } from '@storybook/addons'; import { action } from '@storybook/addon-actions'; import { From 12a99a07c4e6fe56a7f61b2065d0e4556121c25d Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Thu, 31 Aug 2023 12:35:35 -0400 Subject: [PATCH 094/196] Better structured code for test:types only for Table --- apps/storybook/package.json | 4 +++- apps/storybook/tsconfig.test.json | 5 +++++ package.json | 1 + packages/itwinui-react/tsconfig.test.json | 10 +--------- turbo.json | 3 +++ 5 files changed, 13 insertions(+), 10 deletions(-) create mode 100644 apps/storybook/tsconfig.test.json diff --git a/apps/storybook/package.json b/apps/storybook/package.json index e535e2e125b..7819b22852a 100644 --- a/apps/storybook/package.json +++ b/apps/storybook/package.json @@ -37,7 +37,9 @@ "build": "dotenv -v NODE_OPTIONS=\"--max-old-space-size=4096\" sb build", "dev": "sb dev -p 6006 --no-open --quiet", "lint": "eslint \"**/*.{ts,tsx}\" --max-warnings=0", - "test": "node scripts/run-tests.js", + "test": "yarn test:visual && yarn test:types", + "test:visual": "node scripts/run-tests.js", + "test:types": "tsc -p tsconfig.test.json --noEmit", "approve": "cypress-image-diff -u", "cy": "cypress open", "cy:run": "cypress run", diff --git a/apps/storybook/tsconfig.test.json b/apps/storybook/tsconfig.test.json new file mode 100644 index 00000000000..e93366b265b --- /dev/null +++ b/apps/storybook/tsconfig.test.json @@ -0,0 +1,5 @@ +{ + "extends": "./tsconfig.json", + "include": [], + "files": ["src/Table.stories.tsx"] +} diff --git a/package.json b/package.json index ff9c5365ce6..d95a6df1a60 100644 --- a/package.json +++ b/package.json @@ -31,6 +31,7 @@ "build": "turbo run build", "dev": "turbo run dev", "test": "turbo run test", + "test:types": "turbo run test:types", "lint": "turbo run lint", "format": "turbo run format", "prepare": "husky install", diff --git a/packages/itwinui-react/tsconfig.test.json b/packages/itwinui-react/tsconfig.test.json index 4499c9b1097..534b8f910af 100644 --- a/packages/itwinui-react/tsconfig.test.json +++ b/packages/itwinui-react/tsconfig.test.json @@ -1,12 +1,4 @@ { "extends": "./tsconfig.json", - "files": [ - "src/core/Table/types/react-table-types.test.tsx", - "../../apps/storybook/src/Table.stories.tsx" - ], - "compilerOptions": { - // This is needed to avoid the below error when running yarn test:types - // TS17004: Cannot use JSX unless the '--jsx' flag is provided. - "jsx": "react" - } + "include": ["src/core/Table/**/*"] } diff --git a/turbo.json b/turbo.json index 7658dd8fd01..1b2a54cbe1e 100644 --- a/turbo.json +++ b/turbo.json @@ -21,6 +21,9 @@ "test": { "outputs": [] }, + "test:types": { + "outputs": [] + }, "storybook#test": { "dependsOn": ["build"] }, From 718e56fda355001be0bf7fdd201dadf5ce96a126 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Thu, 31 Aug 2023 12:40:39 -0400 Subject: [PATCH 095/196] Renamed postBuildTypes to postBuild_Types to not confuse it with script for "after the types have been built" --- packages/itwinui-react/package.json | 4 ++-- .../scripts/{postBuildTypes.mjs => postBuild_Types.mjs} | 0 2 files changed, 2 insertions(+), 2 deletions(-) rename packages/itwinui-react/scripts/{postBuildTypes.mjs => postBuild_Types.mjs} (100%) diff --git a/packages/itwinui-react/package.json b/packages/itwinui-react/package.json index 82d4f8dfab7..f6dc50b6747 100644 --- a/packages/itwinui-react/package.json +++ b/packages/itwinui-react/package.json @@ -57,7 +57,7 @@ "build": "yarn clean:build && tsc -p tsconfig.cjs.json && tsc -p tsconfig.esm.json && yarn build:styles && yarn build:post", "build:styles": "vite build src/styles.js", "build:watch": "concurrently \"tsc -p tsconfig.cjs.json --watch\" \"tsc -p tsconfig.esm.json --watch\"", - "build:post": "node ./scripts/postBuild.mjs && node ./scripts/postBuildTypes.mjs", + "build:post": "node ./scripts/postBuild.mjs && node ./scripts/postBuild_Types.mjs", "clean:build": "rimraf esm && rimraf cjs", "clean:coverage": "rimraf coverage", "clean": "rimraf .turbo && yarn clean:coverage && yarn clean:build && rimraf node_modules", @@ -71,7 +71,7 @@ "dev": "yarn clean:build && concurrently \"yarn dev:esm\" \"yarn dev:cjs\" \"yarn build:styles --watch\" \"yarn dev:types\"", "dev:esm": "swc src -d esm --watch", "dev:cjs": "swc src -d cjs --watch -C module.type=commonjs", - "dev:types": "node ./scripts/postBuildTypes.mjs && concurrently \"tsc -p tsconfig.cjs.json --emitDeclarationOnly --watch --preserveWatchOutput\" \"tsc -p tsconfig.esm.json --emitDeclarationOnly --watch --preserveWatchOutput\"", + "dev:types": "node ./scripts/postBuild_Types.mjs && concurrently \"tsc -p tsconfig.cjs.json --emitDeclarationOnly --watch --preserveWatchOutput\" \"tsc -p tsconfig.esm.json --emitDeclarationOnly --watch --preserveWatchOutput\"", "dev:styles": "yarn build:styles --watch" }, "dependencies": { diff --git a/packages/itwinui-react/scripts/postBuildTypes.mjs b/packages/itwinui-react/scripts/postBuild_Types.mjs similarity index 100% rename from packages/itwinui-react/scripts/postBuildTypes.mjs rename to packages/itwinui-react/scripts/postBuild_Types.mjs From c5a31719c78be38a26cd479ecc36f300dea5dd6a Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Thu, 31 Aug 2023 12:46:28 -0400 Subject: [PATCH 096/196] Removed unnecessary file from tsconfig.build.json --- packages/itwinui-react/tsconfig.build.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/itwinui-react/tsconfig.build.json b/packages/itwinui-react/tsconfig.build.json index 96b27bce57e..8037e438341 100644 --- a/packages/itwinui-react/tsconfig.build.json +++ b/packages/itwinui-react/tsconfig.build.json @@ -1,6 +1,6 @@ { "extends": "./tsconfig.json", - "files": ["src/index.ts", "src/core/Table/types/react-table-types.d.ts"], + "files": ["src/index.ts"], "compilerOptions": { "noUnusedLocals": false, "importHelpers": true From 732064bf699d3fee41181a26da724e7a9c5e26bc Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Thu, 31 Aug 2023 12:47:04 -0400 Subject: [PATCH 097/196] Delete old testing files --- react-table (backup)/LICENSE | 21 - react-table (backup)/README.md | 16 - react-table (backup)/index.d.ts | 1085 ----------------------------- react-table (backup)/package.json | 42 -- 4 files changed, 1164 deletions(-) delete mode 100644 react-table (backup)/LICENSE delete mode 100644 react-table (backup)/README.md delete mode 100644 react-table (backup)/index.d.ts delete mode 100644 react-table (backup)/package.json diff --git a/react-table (backup)/LICENSE b/react-table (backup)/LICENSE deleted file mode 100644 index 9e841e7a26e..00000000000 --- a/react-table (backup)/LICENSE +++ /dev/null @@ -1,21 +0,0 @@ - MIT License - - Copyright (c) Microsoft Corporation. - - Permission is hereby granted, free of charge, to any person obtaining a copy - of this software and associated documentation files (the "Software"), to deal - in the Software without restriction, including without limitation the rights - to use, copy, modify, merge, publish, distribute, sublicense, and/or sell - copies of the Software, and to permit persons to whom the Software is - furnished to do so, subject to the following conditions: - - The above copyright notice and this permission notice shall be included in all - copies or substantial portions of the Software. - - THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR - IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, - FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE - AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER - LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, - OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE - SOFTWARE diff --git a/react-table (backup)/README.md b/react-table (backup)/README.md deleted file mode 100644 index 5ca79e9d73d..00000000000 --- a/react-table (backup)/README.md +++ /dev/null @@ -1,16 +0,0 @@ -# Installation -> `npm install --save @types/react-table` - -# Summary -This package contains type definitions for react-table (https://github.com/tannerlinsley/react-table). - -# Details -Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-table. - -### Additional Details - * Last updated: Wed, 11 May 2022 16:01:37 GMT - * Dependencies: [@types/react](https://npmjs.com/package/@types/react) - * Global values: none - -# Credits -These definitions were written by [Guy Gascoigne-Piggford](https://github.com/ggascoigne), [Michael Stramel](https://github.com/stramel), [Rohit Garg](https://github.com/gargroh), and [Jason Clark](https://github.com/riceboyler). diff --git a/react-table (backup)/index.d.ts b/react-table (backup)/index.d.ts deleted file mode 100644 index 14548fb6dbd..00000000000 --- a/react-table (backup)/index.d.ts +++ /dev/null @@ -1,1085 +0,0 @@ -// Type definitions for react-table 7.7 -// Project: https://github.com/tannerlinsley/react-table -// Definitions by: Guy Gascoigne-Piggford , -// Michael Stramel -// Rohit Garg -// Jason Clark -// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped -// TypeScript Version: 3.5 -// reflects react-table@7.7.0 - -// tslint:disable:no-empty-interface -// no-empty-interface is disabled to allow easy extension with declaration merging - -// tslint:disable:no-unnecessary-generics -// no-unnecessary-generics is disabled because many of these definitions are either used in a generic -// context or the signatures are required to match for declaration merging - -// The changelog for the important changes is located in the Readme.md - -import { - ChangeEvent, - ComponentType, - CSSProperties, - DependencyList, - EffectCallback, - MouseEvent, - ReactElement, - ReactFragment, - ReactNode, -} from 'react'; - -export {}; - -/** - * The empty definitions of below provides a base definition for the parts used by useTable, that can then be extended in the users code. - * - * @example - * export interface TableOptions - * extends - * UseExpandedOptions, - * UseFiltersOptions {} - * see https://gist.github.com/ggascoigne/646e14c9d54258e40588a13aabf0102d for more details - */ -export interface TableOptions extends UseTableOptions {} - -export interface TableInstance - extends Omit, 'columns' | 'pageCount'>, - UseTableInstanceProps {} - -export interface TableState { - hiddenColumns?: Array> | undefined; -} - -export interface Hooks extends UseTableHooks {} - -export interface Cell - extends UseTableCellProps {} - -export interface ColumnInterface - extends UseTableColumnOptions {} - -export interface ColumnInterfaceBasedOnValue { - Cell?: Renderer> | undefined; -} - -export interface ColumnGroupInterface { - columns: Array>; -} - -export type ColumnGroup = ColumnInterface & - ColumnGroupInterface & - ( - | { Header: string } - | ({ id: IdType } & { - Header: Renderer>; - }) - ) & // Not used, but needed for backwards compatibility - { accessor?: Accessor | undefined }; - -type ValueOf = T[keyof T]; - -// The accessors like `foo.bar` are not supported, use functions instead -export type ColumnWithStrictAccessor = - ColumnInterface & - ValueOf<{ - [K in keyof D]: { - accessor: K; - } & ColumnInterfaceBasedOnValue; - }>; - -export type ColumnWithLooseAccessor = - ColumnInterface & - ColumnInterfaceBasedOnValue & - ( - | { Header: string } - | { id: IdType } - | { accessor: keyof D extends never ? IdType : never } - ) & { - accessor?: - | (keyof D extends never ? IdType | Accessor : Accessor) - | undefined; - }; - -export type Column = - | ColumnGroup - | ColumnWithLooseAccessor - | ColumnWithStrictAccessor; - -export interface ColumnInstance - extends Omit, 'id'>, - ColumnInterfaceBasedOnValue, - UseTableColumnProps {} - -export interface HeaderGroup - extends ColumnInstance, - UseTableHeaderGroupProps {} - -export interface Row extends UseTableRowProps {} - -export interface TableCommonProps { - style?: CSSProperties | undefined; - className?: string | undefined; - role?: string | undefined; -} - -export interface TableProps extends TableCommonProps {} - -export interface TableBodyProps extends TableCommonProps {} - -export interface TableKeyedProps extends TableCommonProps { - key: React.Key; -} - -export interface TableHeaderGroupProps extends TableKeyedProps {} - -export interface TableFooterGroupProps extends TableKeyedProps {} - -export interface TableHeaderProps extends TableKeyedProps {} - -export interface TableFooterProps extends TableKeyedProps {} - -export interface TableRowProps extends TableKeyedProps {} - -export interface TableCellProps extends TableKeyedProps {} - -export interface TableToggleCommonProps extends TableCommonProps { - onChange?: ((e: ChangeEvent) => void) | undefined; - checked?: boolean | undefined; - title?: string | undefined; - indeterminate?: boolean | undefined; -} - -export interface MetaBase { - instance: TableInstance; - userProps: any; -} - -// inspired by ExtendState in https://github.com/reduxjs/redux/blob/master/src/types/store.ts -export type Meta> = [ - Extension, -] extends [never] - ? M - : M & Extension; - -//#region useTable -export function useTable( - options: TableOptions, - ...plugins: Array> -): TableInstance; - -/** - * NOTE: To use custom options, use "Interface Merging" to add the custom options - */ -export type UseTableOptions = { - columns: ReadonlyArray>; - data: readonly D[]; -} & Partial<{ - initialState: Partial>; - stateReducer: ( - newState: TableState, - action: ActionType, - previousState: TableState, - instance?: TableInstance, - ) => TableState; - useControlledState: (state: TableState, meta: Meta) => TableState; - defaultColumn: Partial>; - getSubRows: (originalRow: D, relativeIndex: number) => D[]; - getRowId: (originalRow: D, relativeIndex: number, parent?: Row) => string; - autoResetHiddenColumns: boolean; -}>; - -export type PropGetter< - D extends object, - Props, - T extends object = never, - P = Partial, -> = ((props: P, meta: Meta) => P | P[]) | P | P[]; - -export type TablePropGetter = PropGetter; - -export type TableBodyPropGetter = PropGetter< - D, - TableBodyProps ->; - -export type HeaderPropGetter = PropGetter< - D, - TableHeaderProps, - { column: HeaderGroup } ->; - -export type FooterGroupPropGetter = PropGetter< - D, - TableFooterGroupProps, - { column: HeaderGroup } ->; - -export type HeaderGroupPropGetter = PropGetter< - D, - TableHeaderGroupProps, - { column: HeaderGroup } ->; - -export type FooterPropGetter = PropGetter< - D, - TableFooterProps, - { column: HeaderGroup } ->; - -export type RowPropGetter = PropGetter< - D, - TableRowProps, - { row: Row } ->; - -export type CellPropGetter = PropGetter< - D, - TableCellProps, - { cell: Cell } ->; - -export interface ReducerTableState - extends TableState, - Record {} - -export interface UseTableHooks extends Record { - useOptions: Array< - (options: TableOptions, args: TableOptions) => TableOptions - >; - stateReducers: Array< - ( - newState: TableState, - action: ActionType, - previousState?: TableState, - instance?: TableInstance, - ) => ReducerTableState | undefined - >; - columns: Array< - (columns: Array>, meta: Meta) => Array> - >; - columnsDeps: Array<(deps: any[], meta: Meta) => any[]>; - allColumns: Array< - (allColumns: Array>, meta: Meta) => Array> - >; - allColumnsDeps: Array<(deps: any[], meta: Meta) => any[]>; - visibleColumns: Array< - (allColumns: Array>, meta: Meta) => Array> - >; - visibleColumnsDeps: Array<(deps: any[], meta: Meta) => any[]>; - headerGroups: Array< - (allColumns: Array>, meta: Meta) => Array> - >; - headerGroupsDeps: Array<(deps: any[], meta: Meta) => any[]>; - useInstanceBeforeDimensions: Array<(instance: TableInstance) => void>; - useInstance: Array<(instance: TableInstance) => void>; - prepareRow: Array<(row: Row, meta: Meta) => void>; - useControlledState: Array< - (state: TableState, meta: Meta) => TableState - >; - - getTableProps: Array>; - getTableBodyProps: Array>; - getHeaderGroupProps: Array>; - getFooterGroupProps: Array>; - getHeaderProps: Array>; - getFooterProps: Array>; - getRowProps: Array>; - getCellProps: Array>; - useFinalInstance: Array<(instance: TableInstance) => void>; -} - -export interface UseTableColumnOptions { - id?: IdType | undefined; - Header?: Renderer> | undefined; - Footer?: Renderer> | undefined; - width?: number | string | undefined; - minWidth?: number | undefined; - maxWidth?: number | undefined; -} - -type UpdateHiddenColumns = ( - oldHidden: Array>, -) => Array>; - -export interface TableToggleHideAllColumnProps extends TableToggleCommonProps {} - -export interface UseTableInstanceProps { - state: TableState; - plugins: Array>; - dispatch: TableDispatch; - columns: Array>; - allColumns: Array>; - visibleColumns: Array>; - headerGroups: Array>; - footerGroups: Array>; - headers: Array>; - flatHeaders: Array>; - rows: Array>; - rowsById: Record>; - getTableProps: (propGetter?: TablePropGetter) => TableProps; - getTableBodyProps: (propGetter?: TableBodyPropGetter) => TableBodyProps; - prepareRow: (row: Row) => void; - flatRows: Array>; - totalColumnsWidth: number; - allColumnsHidden: boolean; - toggleHideColumn: (columnId: IdType, value?: boolean) => void; - setHiddenColumns: (param: Array> | UpdateHiddenColumns) => void; - toggleHideAllColumns: (value?: boolean) => void; - getToggleHideAllColumnsProps: ( - props?: Partial, - ) => TableToggleHideAllColumnProps; - getHooks: () => Hooks; -} - -export interface UseTableHeaderGroupProps { - headers: Array>; - getHeaderGroupProps: ( - propGetter?: HeaderGroupPropGetter, - ) => TableHeaderProps; - getFooterGroupProps: ( - propGetter?: FooterGroupPropGetter, - ) => TableFooterProps; - totalHeaderCount: number; // not documented -} - -export interface UseTableColumnProps { - id: IdType; - columns?: Array> | undefined; - isVisible: boolean; - render: (type: 'Header' | 'Footer' | string, props?: object) => ReactNode; - totalLeft: number; - totalWidth: number; - getHeaderProps: (propGetter?: HeaderPropGetter) => TableHeaderProps; - getFooterProps: (propGetter?: FooterPropGetter) => TableFooterProps; - toggleHidden: (value?: boolean) => void; - parent?: ColumnInstance | undefined; // not documented - getToggleHiddenProps: (userProps?: any) => any; - depth: number; // not documented - placeholderOf?: ColumnInstance | undefined; -} - -export interface UseTableRowProps { - cells: Array>; - allCells: Array>; - values: Record, CellValue>; - getRowProps: (propGetter?: RowPropGetter) => TableRowProps; - index: number; - original: D; - id: string; - subRows: Array>; -} - -export interface UseTableCellProps { - column: ColumnInstance; - row: Row; - value: CellValue; - getCellProps: (propGetter?: CellPropGetter) => TableCellProps; - render: (type: 'Cell' | string, userProps?: object) => ReactNode; -} - -export type HeaderProps = TableInstance & { - column: ColumnInstance; -}; - -export type FooterProps = TableInstance & { - column: ColumnInstance; -}; - -export type CellProps = TableInstance & { - column: ColumnInstance; - row: Row; - cell: Cell; - value: CellValue; -}; - -export type Accessor = ( - originalRow: D, - index: number, - sub: { - subRows: D[]; - depth: number; - data: D[]; - }, -) => CellValue; - -//#endregion - -// Plugins - -//#region useAbsoluteLayout -export function useAbsoluteLayout(hooks: Hooks): void; - -export namespace useAbsoluteLayout { - const pluginName = 'useAbsoluteLayout'; -} -//#endregion - -//#region useBlockLayout -export function useBlockLayout(hooks: Hooks): void; - -export namespace useBlockLayout { - const pluginName = 'useBlockLayout'; -} -//#endregion - -//#region useColumnOrder -export function useColumnOrder(hooks: Hooks): void; - -export namespace useColumnOrder { - const pluginName = 'useColumnOrder'; -} - -export interface UseColumnOrderState { - columnOrder: Array>; -} - -export interface UseColumnOrderInstanceProps { - setColumnOrder: ( - updater: - | ((columnOrder: Array>) => Array>) - | Array>, - ) => void; -} - -//#endregion - -//#region useExpanded -export function useExpanded(hooks: Hooks): void; - -export namespace useExpanded { - const pluginName = 'useExpanded'; -} - -export interface TableExpandedToggleProps extends TableKeyedProps {} - -export type UseExpandedOptions = Partial<{ - manualExpandedKey: IdType; - paginateExpandedRows: boolean; - expandSubRows: boolean; - autoResetExpanded?: boolean | undefined; -}>; - -export interface UseExpandedHooks { - getToggleRowsExpandedProps: Array>; - getToggleAllRowsExpandedProps: Array>; -} - -export interface UseExpandedState { - expanded: Record, boolean>; -} - -export interface UseExpandedInstanceProps { - preExpandedRows: Array>; - expandedRows: Array>; - rows: Array>; - expandedDepth: number; - isAllRowsExpanded: boolean; - toggleRowExpanded: (id: Array>, value?: boolean) => void; - toggleAllRowsExpanded: (value?: boolean) => void; -} - -export interface UseExpandedRowProps { - isExpanded: boolean; - canExpand: boolean; - subRows: Array>; - toggleRowExpanded: (value?: boolean) => void; - getToggleRowExpandedProps: ( - props?: Partial, - ) => TableExpandedToggleProps; - depth: number; -} - -//#endregion - -//#region useFilters -export function useFilters(hooks: Hooks): void; - -export namespace useFilters { - const pluginName = 'useFilters'; -} - -export type UseFiltersOptions = Partial<{ - manualFilters: boolean; - disableFilters: boolean; - defaultCanFilter: boolean; - filterTypes: FilterTypes; - autoResetFilters?: boolean | undefined; -}>; - -export interface UseFiltersState { - filters: Filters; -} - -export type UseFiltersColumnOptions = Partial<{ - Filter: Renderer>; - disableFilters: boolean; - defaultCanFilter: boolean; - filter: FilterType | DefaultFilterTypes | string; -}>; - -export interface UseFiltersInstanceProps { - preFilteredRows: Array>; - preFilteredFlatRows: Array>; - preFilteredRowsById: Record>; - filteredRows: Array>; - filteredFlatRows: Array>; - filteredRowsById: Record>; - rows: Array>; - flatRows: Array>; - rowsById: Record>; - setFilter: ( - columnId: IdType, - updater: ((filterValue: FilterValue) => FilterValue) | FilterValue, - ) => void; - setAllFilters: ( - updater: Filters | ((filters: Filters) => Filters), - ) => void; -} - -export interface UseFiltersColumnProps { - canFilter: boolean; - setFilter: ( - updater: ((filterValue: FilterValue) => FilterValue) | FilterValue, - ) => void; - filterValue: FilterValue; - preFilteredRows: Array>; - filteredRows: Array>; -} - -export type FilterProps = HeaderProps; -export type FilterValue = any; -export type Filters = Array<{ - id: IdType; - value: FilterValue; -}>; -export type FilterTypes = Record>; - -export type DefaultFilterTypes = - | 'text' - | 'exactText' - | 'exactTextCase' - | 'includes' - | 'includesAll' - | 'exact' - | 'equals' - | 'between'; - -export interface FilterType { - ( - rows: Array>, - columnIds: Array>, - filterValue: FilterValue, - ): Array>; - - autoRemove?: ((filterValue: FilterValue) => boolean) | undefined; -} - -//#endregion - -//#region useFlexLayout -export function useFlexLayout(hooks: Hooks): void; - -export namespace useFlexLayout { - const pluginName = 'useFlexLayout'; -} -//#endregion - -//#region useGridLayout -export function useGridLayout(hooks: Hooks): void; - -export namespace useGridLayout { - const pluginName = 'useGridLayout'; -} -//#endregion - -//#region useGlobalFilter -export function useGlobalFilter(hooks: Hooks): void; - -export namespace useGlobalFilter { - const pluginName = 'useGlobalFilter'; -} - -export type UseGlobalFiltersOptions = Partial<{ - globalFilter: - | (( - rows: Array>, - columnIds: Array>, - filterValue: any, - ) => Array>) - | string; - manualGlobalFilter: boolean; - filterTypes: FilterTypes; - autoResetGlobalFilter?: boolean | undefined; - disableGlobalFilter?: boolean | undefined; -}>; - -export interface UseGlobalFiltersState { - globalFilter: any; -} - -export type UseGlobalFiltersColumnOptions = Partial<{ - disableGlobalFilter?: boolean | undefined; -}>; - -export interface UseGlobalFiltersInstanceProps { - preGlobalFilteredRows: Array>; - preGlobalFilteredFlatRows: Array>; - preGlobalFilteredRowsById: Record>; - globalFilteredRows: Array>; - globalFilteredFlatRows: Array>; - globalFilteredRowsById: Record>; - rows: Array>; - flatRows: Array>; - rowsById: Record>; - setGlobalFilter: (filterValue: FilterValue) => void; -} - -//#endregion - -//#region useGroupBy -export function useGroupBy(hooks: Hooks): void; - -export namespace useGroupBy { - const pluginName = 'useGroupBy'; -} - -export interface TableGroupByToggleProps { - title?: string | undefined; - style?: CSSProperties | undefined; - onClick?: ((e: MouseEvent) => void) | undefined; -} - -export type UseGroupByOptions = Partial<{ - manualGroupBy: boolean; - disableGroupBy: boolean; - defaultCanGroupBy: boolean; - aggregations: Record>; - groupByFn: ( - rows: Array>, - columnId: IdType, - ) => Record>>; - autoResetGroupBy?: boolean | undefined; -}>; - -export interface UseGroupByHooks { - getGroupByToggleProps: Array>; -} - -export interface UseGroupByState { - groupBy: Array>; -} - -export type UseGroupByColumnOptions = Partial<{ - aggregate: Aggregator; - Aggregated: Renderer>; - disableGroupBy: boolean; - defaultCanGroupBy: boolean; -}>; - -export interface UseGroupByInstanceProps { - preGroupedRows: Array>; - preGroupedFlatRows: Array>; - preGroupedRowsById: Record>; - groupedRows: Array>; - groupedFlatRows: Array>; - groupedRowsById: Record>; - onlyGroupedFlatRows: Array>; - onlyGroupedRowsById: Record>; - nonGroupedFlatRows: Array>; - nonGroupedRowsById: Record>; - rows: Array>; - flatRows: Array>; - rowsById: Record>; - toggleGroupBy: (columnId: IdType, value?: boolean) => void; -} - -export interface UseGroupByColumnProps { - canGroupBy: boolean; - isGrouped: boolean; - groupedIndex: number; - toggleGroupBy: () => void; - getGroupByToggleProps: ( - props?: Partial, - ) => TableGroupByToggleProps; -} - -export interface UseGroupByRowProps { - isGrouped: boolean; - groupByID: IdType; - groupByVal: string; - values: Record, AggregatedValue>; - subRows: Array>; - leafRows: Array>; - depth: number; - id: string; - index: number; -} - -export interface UseGroupByCellProps { - isGrouped: boolean; - isPlaceholder: boolean; - isAggregated: boolean; -} - -export type DefaultAggregators = - | 'sum' - | 'average' - | 'median' - | 'uniqueCount' - | 'count'; - -export type AggregatorFn = ( - columnValues: CellValue[], - rows: Array>, - isAggregated: boolean, -) => AggregatedValue; -export type Aggregator = - | AggregatorFn - | DefaultAggregators - | string; -export type AggregatedValue = any; -//#endregion - -//#region usePagination -export function usePagination(hooks: Hooks): void; - -export namespace usePagination { - const pluginName = 'usePagination'; -} - -export type UsePaginationOptions = Partial<{ - pageCount: number; - manualPagination: boolean; - autoResetPage?: boolean | undefined; - paginateExpandedRows: boolean; -}>; - -export interface UsePaginationState { - pageSize: number; - pageIndex: number; -} - -export interface UsePaginationInstanceProps { - page: Array>; - pageCount: number; - pageOptions: number[]; - canPreviousPage: boolean; - canNextPage: boolean; - gotoPage: (updater: ((pageIndex: number) => number) | number) => void; - previousPage: () => void; - nextPage: () => void; - setPageSize: (pageSize: number) => void; -} - -//#endregion - -//#region useResizeColumns -export function useResizeColumns(hooks: Hooks): void; - -export namespace useResizeColumns { - const pluginName = 'useResizeColumns'; -} - -export interface UseResizeColumnsOptions { - disableResizing?: boolean | undefined; - autoResetResize?: boolean | undefined; -} - -export interface UseResizeColumnsState { - columnResizing: { - startX?: number | undefined; - columnWidth: number; - headerIdWidths: Record; - columnWidths: any; - isResizingColumn?: string | undefined; - }; -} - -export interface UseResizeColumnsColumnOptions { - disableResizing?: boolean | undefined; -} - -export interface TableResizerProps {} - -export interface UseResizeColumnsColumnProps { - getResizerProps: (props?: Partial) => TableResizerProps; - canResize: boolean; - isResizing: boolean; -} - -//#endregion - -//#region useRowSelect -export function useRowSelect(hooks: Hooks): void; - -export namespace useRowSelect { - const pluginName = 'useRowSelect'; -} - -export interface TableToggleAllRowsSelectedProps - extends TableToggleCommonProps {} - -export interface TableToggleRowsSelectedProps extends TableToggleCommonProps {} - -export type UseRowSelectOptions = Partial<{ - manualRowSelectedKey: IdType; - autoResetSelectedRows: boolean; - selectSubRows: boolean; -}>; - -export interface UseRowSelectHooks { - getToggleRowSelectedProps: Array>; - getToggleAllRowsSelectedProps: Array< - PropGetter - >; - getToggleAllPageRowsSelectedProps: Array< - PropGetter - >; -} - -export interface UseRowSelectState { - selectedRowIds: Record, boolean>; -} - -export interface UseRowSelectInstanceProps { - toggleRowSelected: (rowId: IdType, set?: boolean) => void; - toggleAllRowsSelected: (value?: boolean) => void; - getToggleAllRowsSelectedProps: ( - props?: Partial, - ) => TableToggleAllRowsSelectedProps; - getToggleAllPageRowsSelectedProps: ( - props?: Partial, - ) => TableToggleAllRowsSelectedProps; - isAllRowsSelected: boolean; - selectedFlatRows: Array>; -} - -export interface UseRowSelectRowProps { - isSelected: boolean; - isSomeSelected: boolean; - toggleRowSelected: (set?: boolean) => void; - getToggleRowSelectedProps: ( - props?: Partial, - ) => TableToggleRowsSelectedProps; -} - -//#endregion - -//#region useRowState -export function useRowState(hooks: Hooks): void; - -export namespace useRowState { - const pluginName = 'useRowState'; -} - -export type UseRowStateOptions = Partial<{ - initialRowStateAccessor: (row: Row) => UseRowStateLocalState; - getResetRowStateDeps: (instance: TableInstance) => any[]; - autoResetRowState?: boolean | undefined; -}>; - -export interface UseRowStateState { - rowState: Record }>; -} - -export interface UseRowStateInstanceProps { - setRowState: (rowPath: string[], updater: UseRowUpdater) => void; - setCellState: ( - rowPath: string[], - columnId: IdType, - updater: UseRowUpdater, - ) => void; -} - -export interface UseRowStateRowProps { - state: UseRowStateLocalState; - setState: (updater: UseRowUpdater) => void; -} - -export interface UseRowStateCellProps { - state: UseRowStateLocalState; - setState: (updater: UseRowUpdater) => void; -} - -export type UseRowUpdater = T | ((prev: T) => T); -export type UseRowStateLocalState = Record< - IdType, - T ->; -//#endregion - -//#region useSortBy -export function useSortBy(hooks: Hooks): void; - -export namespace useSortBy { - const pluginName = 'useSortBy'; -} - -export interface TableSortByToggleProps { - title?: string | undefined; - style?: CSSProperties | undefined; - onClick?: ((e: MouseEvent) => void) | undefined; -} - -export type UseSortByOptions = Partial<{ - manualSortBy: boolean; - disableSortBy: boolean; - defaultCanSort: boolean; - disableMultiSort: boolean; - isMultiSortEvent: (e: MouseEvent) => boolean; - maxMultiSortColCount: number; - disableSortRemove: boolean; - disabledMultiRemove: boolean; - orderByFn: ( - rows: Array>, - sortFns: Array>, - directions: boolean[], - ) => Array>; - sortTypes: Record>; - autoResetSortBy?: boolean | undefined; -}>; - -export interface UseSortByHooks { - getSortByToggleProps: Array>; -} - -export interface UseSortByState { - sortBy: Array>; -} - -export type UseSortByColumnOptions = Partial<{ - defaultCanSort: boolean; - disableSortBy: boolean; - sortDescFirst: boolean; - sortInverted: boolean; - sortType: SortByFn | DefaultSortTypes | string; -}>; - -export interface UseSortByInstanceProps { - rows: Array>; - preSortedRows: Array>; - setSortBy: (sortBy: Array>) => void; - toggleSortBy: ( - columnId: IdType, - descending?: boolean, - isMulti?: boolean, - ) => void; -} - -export interface UseSortByColumnProps { - canSort: boolean; - toggleSortBy: (descending?: boolean, multi?: boolean) => void; - getSortByToggleProps: ( - props?: Partial, - ) => TableSortByToggleProps; - clearSortBy: () => void; - isSorted: boolean; - sortedIndex: number; - isSortedDesc: boolean | undefined; -} - -export type OrderByFn = ( - rowA: Row, - rowB: Row, -) => number; -export type SortByFn = ( - rowA: Row, - rowB: Row, - columnId: IdType, - desc?: boolean, -) => number; - -export type DefaultSortTypes = - | 'alphanumeric' - | 'datetime' - | 'basic' - | 'string' - | 'number'; - -export interface SortingRule { - id: IdType; - desc?: boolean | undefined; -} - -//#endregion - -// Additional API -export const actions: Record; -export type ActionType = { type: string } & Record; -export const defaultColumn: Partial & Record; - -// Helpers -export type StringKey = Extract; -export type IdType = StringKey | string; -export type CellValue = V; - -export type Renderer = - | ComponentType - | ReactElement - | string - | number - | ReactFragment; - -export interface PluginHook { - (hooks: Hooks): void; - pluginName?: string | undefined; -} - -export type TableDispatch = (action: A) => void; - -// utils -export function defaultOrderByFn( - arr: Array>, - funcs: Array>, - dirs: boolean[], -): Array>; - -export function defaultGroupByFn( - rows: Array>, - columnId: IdType, -): Record>>; - -export function makePropGetter(hooks: Hooks, ...meta: any[]): any; - -export function reduceHooks( - hooks: Hooks, - initial: T, - ...args: any[] -): T; - -export function loopHooks(hooks: Hooks, ...args: any[]): void; - -export function ensurePluginOrder( - plugins: Array>, - befores: string[], - pluginName: string, -): void; - -export function functionalUpdate( - updater: any, - old: Partial>, -): Partial>; - -export function useGetLatest(obj: T): () => T; - -export function safeUseLayoutEffect( - effect: EffectCallback, - deps?: DependencyList, -): void; - -export function useMountedLayoutEffect( - effect: EffectCallback, - deps?: DependencyList, -): void; - -export function useAsyncDebounce any>( - defaultFn: F, - defaultWait?: number, -): F; - -export function makeRenderer( - instance: TableInstance, - column: ColumnInstance, - meta?: any, -): ReactElement; diff --git a/react-table (backup)/package.json b/react-table (backup)/package.json deleted file mode 100644 index c4da7573625..00000000000 --- a/react-table (backup)/package.json +++ /dev/null @@ -1,42 +0,0 @@ -{ - "name": "@types/react-table", - "version": "7.7.12", - "description": "TypeScript definitions for react-table", - "homepage": "https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-table", - "license": "MIT", - "contributors": [ - { - "name": "Guy Gascoigne-Piggford", - "url": "https://github.com/ggascoigne", - "githubUsername": "ggascoigne" - }, - { - "name": "Michael Stramel", - "url": "https://github.com/stramel", - "githubUsername": "stramel" - }, - { - "name": "Rohit Garg", - "url": "https://github.com/gargroh", - "githubUsername": "gargroh" - }, - { - "name": "Jason Clark", - "url": "https://github.com/riceboyler", - "githubUsername": "riceboyler" - } - ], - "main": "", - "types": "index.d.ts", - "repository": { - "type": "git", - "url": "https://github.com/DefinitelyTyped/DefinitelyTyped.git", - "directory": "types/react-table" - }, - "scripts": {}, - "dependencies": { - "@types/react": "*" - }, - "typesPublisherContentHash": "28ce2a560b81f85701c43e70d16f022ecafc569457187c2066e6965ede177399", - "typeScriptVersion": "3.9" -} \ No newline at end of file From 13e6747f87f7aaf335f47496e7eff566c17d4a28 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Thu, 31 Aug 2023 12:49:33 -0400 Subject: [PATCH 098/196] Reverted playground --- playgrounds/vite/src/App.tsx | 170 +---------------------------------- 1 file changed, 4 insertions(+), 166 deletions(-) diff --git a/playgrounds/vite/src/App.tsx b/playgrounds/vite/src/App.tsx index 0a8520e3f44..308ffd82cc0 100644 --- a/playgrounds/vite/src/App.tsx +++ b/playgrounds/vite/src/App.tsx @@ -1,172 +1,10 @@ -import { SvgMore } from '@itwin/itwinui-icons-react'; -import { - ActionColumn, - Button, - DefaultCell, - DropdownMenu, - IconButton, - Input, - MenuItem, - Table, - tableFilters, - TableTypes, - // ReactTableTypes, -} from '@itwin/itwinui-react'; - -// import type { TableTypes } from '@itwin/itwinui-react/cjs/core/Table/index.js'; - -const q: TableTypes.Column>[] = []; - -// import type { TableTypes } from '@itwin/itwinui-react'; -import { TableFilterProps } from '@itwin/itwinui-react/cjs/core/Table/index.js'; -import { useCallback, useMemo, useState } from 'react'; -// import type { -// CellProps, -// // CellRendererProps, -// Column, -// Row, -// TableInstance, -// TableState, -// Renderer, -// } from '@itwin/itwinui-react'; - -type ValueOf = T[keyof T]; +import { Button } from '@itwin/itwinui-react'; const App = () => { - // type TableStoryDataType = Record; - // interface TableStoryDataType extends Record { - interface TableStoryDataType extends Record { - // 1: string; - price: number; - // // [K in string]: any; - quantity: number; - rating: number; - deliveryTime: number; - status: 'positive' | 'negative' | 'warning' | undefined; - subRows: TableStoryDataType[]; - // 1?: number; - } - - // type MyType = { - // "a_key": string, - // "b_key": number, - // "c_key": boolean, - // }; - // type q = ValueOf<{ - // [K in keyof TableStoryDataType]: { - // accessor: K; - // } - // }>; - - const generateItem = useCallback( - (index: number, parentRow = '', depth = 0): TableStoryDataType => { - const keyValue = parentRow ? `${parentRow}.${index + 1}` : `${index + 1}`; - const rating = (index % 4) + 1; - return { - // 1: `Product ${keyValue}`, - price: ((index % 10) + 1) * 15, - quantity: ((index % 10) + 1) * 150, - rating: rating, - deliveryTime: (index % 15) + 1, - status: - rating >= 4 ? 'positive' : rating === 3 ? 'warning' : 'negative', - subRows: - depth < 2 - ? Array(Math.round(index % 5)) - .fill(null) - .map((_, index) => generateItem(index, keyValue, depth + 1)) - : [], - }; - }, - [], - ); - - const data = useMemo( - () => - Array(100) - .fill(null) - .map((_, index) => generateItem(index)), - [generateItem], - ); - - const isRowDisabled = useCallback((rowData: TableStoryDataType) => { - return rowData.product.endsWith('3'); - }, []); - - const menuItems = useCallback((close: () => void) => { - return [ - close()}> - Edit - , - close()}> - Delete - , - ]; - }, []); - - const columns = useMemo( - // (): Column[] => [ - () => - [ - { - id: 'product', - Header: 'Product', - accessor: 'product', - Filter: tableFilters.TextFilter(), - Cell: (props) =>
{`${props}`}
, - }, - ] satisfies Array>, - [isRowDisabled, menuItems], - ); - - // const rowProps = useCallback((row: Row<{ status: string | undefined }>) => { - // return { - // status: row.original.status, - // }; - // }, []); - - const [globalFilterValue, setGlobalFilterValue] = useState(''); - return ( -
- ) => - setGlobalFilterValue(e.target.value) - } - /> -
-
>>} - columns={columns} - // columnsq={columns} - emptyTableContent='No data.' - // isRowDisabled={isRowDisabled} - isSelectable - isSortable - isResizable - enableColumnReordering - data={data} - style={{ height: '100%' }} - enableVirtualization - // rowProps={rowProps} - globalFilterValue={globalFilterValue} - /> - - + <> + + ); }; From 24b09bb8ec3c708812db9060d4af9db14f6cc4f6 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Thu, 31 Aug 2023 14:39:33 -0400 Subject: [PATCH 099/196] Removed unnecessary `compilerOptions` from `tsconfig.json` --- packages/itwinui-react/tsconfig.json | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/itwinui-react/tsconfig.json b/packages/itwinui-react/tsconfig.json index 9e3718b935f..66858865965 100644 --- a/packages/itwinui-react/tsconfig.json +++ b/packages/itwinui-react/tsconfig.json @@ -21,13 +21,11 @@ "skipLibCheck": true, "isolatedModules": true, "verbatimModuleSyntax": true, - "noErrorTruncation": true, "baseUrl": ".", "paths": { // Since we don't depend on `@types/react-table`, we need to provide the types for it. "react-table": ["src/core/Table/types/react-table-types.d.ts"] } }, - // "include": ["src"], "exclude": ["node_modules", "cjs/**/*", "esm/**/*"] } From 3c1352d359af6bcb802b452073be6262426dab00 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Thu, 31 Aug 2023 15:01:13 -0400 Subject: [PATCH 100/196] Changeset --- .changeset/fluffy-pianos-end.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/fluffy-pianos-end.md diff --git a/.changeset/fluffy-pianos-end.md b/.changeset/fluffy-pianos-end.md new file mode 100644 index 00000000000..bb9aa038aac --- /dev/null +++ b/.changeset/fluffy-pianos-end.md @@ -0,0 +1,5 @@ +--- +'@itwin/itwinui-react': major +--- + +Table now has better type support. Users must now use `TableTypes` from `@itwin/itwinui-react` instead of from `@types/react-table`. From c9f583b11e525c1cf07b8ec4fd1ed52b732799d8 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Thu, 31 Aug 2023 15:48:31 -0400 Subject: [PATCH 101/196] Revert eslint change --- packages/itwinui-react/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/itwinui-react/package.json b/packages/itwinui-react/package.json index cf95cedaed3..a06c2656d3b 100644 --- a/packages/itwinui-react/package.json +++ b/packages/itwinui-react/package.json @@ -132,7 +132,7 @@ "node ../../scripts/copyrightLinter.js --fix" ], "*.{tsx,ts}": [ - "eslint --max-warnings=1 --fix" + "eslint --max-warnings=0 --fix" ] }, "prettier": "configs/prettier-config", From fbbad82b24076393b45cc556df0a18519160507c Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Thu, 31 Aug 2023 15:49:54 -0400 Subject: [PATCH 102/196] Revert root level test:types to minimize file changes in PR --- package.json | 1 - turbo.json | 3 --- 2 files changed, 4 deletions(-) diff --git a/package.json b/package.json index d95a6df1a60..ff9c5365ce6 100644 --- a/package.json +++ b/package.json @@ -31,7 +31,6 @@ "build": "turbo run build", "dev": "turbo run dev", "test": "turbo run test", - "test:types": "turbo run test:types", "lint": "turbo run lint", "format": "turbo run format", "prepare": "husky install", diff --git a/turbo.json b/turbo.json index 1b2a54cbe1e..7658dd8fd01 100644 --- a/turbo.json +++ b/turbo.json @@ -21,9 +21,6 @@ "test": { "outputs": [] }, - "test:types": { - "outputs": [] - }, "storybook#test": { "dependsOn": ["build"] }, From 174bf8e1a0e655b8fb5398d6817549bbb80e3dd5 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Thu, 31 Aug 2023 15:53:00 -0400 Subject: [PATCH 103/196] Removed exporting of inner props --- packages/itwinui-react/src/core/index.ts | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/itwinui-react/src/core/index.ts b/packages/itwinui-react/src/core/index.ts index 93a7eab4e72..df16877a5e0 100644 --- a/packages/itwinui-react/src/core/index.ts +++ b/packages/itwinui-react/src/core/index.ts @@ -156,13 +156,10 @@ export { SelectionColumn, } from './Table/index.js'; export type { - DefaultCellProps, - EditableCellProps, TableFilterValue, DateRangeFilterOptions, TablePaginatorRendererProps, TableTypes, - TableProps, } from './Table/index.js'; export { Tag, TagContainer } from './Tag/index.js'; From 5e94e8c91f9739cf1dc0478556b29704fa33b032 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Thu, 31 Aug 2023 15:56:40 -0400 Subject: [PATCH 104/196] Fix a type error in Table stories --- apps/storybook/src/Table.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/storybook/src/Table.stories.tsx b/apps/storybook/src/Table.stories.tsx index 4bf0b50920c..c467c7ddbfe 100644 --- a/apps/storybook/src/Table.stories.tsx +++ b/apps/storybook/src/Table.stories.tsx @@ -1595,7 +1595,7 @@ export const Full: Story> = (args) => { {...args} /> From 67e8fcc6bbaa05b18ff87e4a719fdc590b2570ee Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Thu, 31 Aug 2023 16:20:09 -0400 Subject: [PATCH 105/196] Reverted functionality change of the logic for flattenColumns. Added @ ts-expect-error to ignore the type error --- packages/itwinui-react/src/core/Table/Table.tsx | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/packages/itwinui-react/src/core/Table/Table.tsx b/packages/itwinui-react/src/core/Table/Table.tsx index 31aa0a2288e..724e3e741d1 100644 --- a/packages/itwinui-react/src/core/Table/Table.tsx +++ b/packages/itwinui-react/src/core/Table/Table.tsx @@ -321,8 +321,15 @@ export type TableProps< const flattenColumns = >( columns: Column[], ): Column[] => { - // Return columns itself since we don't support nested columns - return columns; + const flatColumns: Column[] = []; + columns.forEach((column) => { + flatColumns.push(column); + if ('columns' in column) { + // @ts-expect-error - Since nested columns are not supported from a types perspective + flatColumns.push(...flattenColumns(column.columns)); + } + }); + return flatColumns; }; /** From 7f9d5f4dc66081a7815616a45bc147f76be57b68 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Fri, 1 Sep 2023 11:55:29 -0400 Subject: [PATCH 106/196] Re-export TableProps --- packages/itwinui-react/src/core/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/itwinui-react/src/core/index.ts b/packages/itwinui-react/src/core/index.ts index df16877a5e0..4fa13cbed73 100644 --- a/packages/itwinui-react/src/core/index.ts +++ b/packages/itwinui-react/src/core/index.ts @@ -160,6 +160,7 @@ export type { DateRangeFilterOptions, TablePaginatorRendererProps, TableTypes, + TableProps, } from './Table/index.js'; export { Tag, TagContainer } from './Tag/index.js'; From 8fa777da5e0586abf96d09a204a925b89e7cebb9 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Fri, 1 Sep 2023 14:24:52 -0400 Subject: [PATCH 107/196] Removed args --- apps/storybook/src/Table.stories.tsx | 776 ++------------------------- 1 file changed, 37 insertions(+), 739 deletions(-) diff --git a/apps/storybook/src/Table.stories.tsx b/apps/storybook/src/Table.stories.tsx index 289970cff02..73b32f72216 100644 --- a/apps/storybook/src/Table.stories.tsx +++ b/apps/storybook/src/Table.stories.tsx @@ -52,55 +52,9 @@ import { export default { title: 'Core/Table', component: Table, - args: { - data: [ - { name: 'Name1', description: 'Description1' }, - { name: 'Name2', description: 'Description2' }, - { name: 'Name3', description: 'Description3' }, - ], - emptyTableContent: 'No data.', - density: 'default', - emptyFilteredTableContent: 'No results found. Clear or try another filter.', - }, - argTypes: { - columns: { control: { disable: true } }, - isSelectable: { control: { disable: true } }, - selectionMode: { control: { disable: true } }, - style: { control: { disable: true } }, - className: { control: { disable: true } }, - id: { control: { disable: true } }, - initialState: { table: { disable: true } }, - stateReducer: { table: { disable: true } }, - useControlledState: { table: { disable: true } }, - defaultColumn: { table: { disable: true } }, - getSubRows: { table: { disable: true } }, - getRowId: { table: { disable: true } }, - manualRowSelectedKey: { table: { disable: true } }, - autoResetSelectedRows: { table: { disable: true } }, - selectSubRows: { table: { disable: true } }, - manualSortBy: { table: { disable: true } }, - defaultCanSort: { table: { disable: true } }, - disableMultiSort: { table: { disable: true } }, - isMultiSortEvent: { table: { disable: true } }, - maxMultiSortColCount: { table: { disable: true } }, - disableSortRemove: { table: { disable: true } }, - disabledMultiRemove: { table: { disable: true } }, - orderByFn: { table: { disable: true } }, - sortTypes: { table: { disable: true } }, - autoResetSortBy: { table: { disable: true } }, - autoResetHiddenColumns: { table: { disable: true } }, - autoResetFilters: { table: { disable: true } }, - filterTypes: { table: { disable: true } }, - defaultCanFilter: { table: { disable: true } }, - manualFilters: { table: { disable: true } }, - paginateExpandedRows: { table: { disable: true } }, - expandSubRows: { table: { disable: true } }, - autoResetExpanded: { table: { disable: true } }, - manualExpandedKey: { table: { disable: true } }, - }, } as Meta; -export const Basic: Story> = (args) => { +export const Basic: Story> = () => { const onClickHandler = ( props: CellProps<{ name: string; description: string }>, ) => action(props.row.original.name)(); @@ -144,17 +98,10 @@ export const Basic: Story> = (args) => { [], ); - return ( -
- ); + return
; }; -export const SelectableSingle: Story> = (args) => { +export const SelectableSingle: Story> = () => { const onRowClick = useCallback( (event: React.MouseEvent, row: Row) => action(`Row clicked: ${JSON.stringify(row.original)}`)(), @@ -213,14 +160,11 @@ export const SelectableSingle: Story> = (args) => { isSelectable={true} onRowClick={onRowClick} selectionMode='single' - {...args} /> ); }; -SelectableSingle.args = { isSelectable: true, selectionMode: 'single' }; - -export const SelectableMulti: Story> = (args) => { +export const SelectableMulti: Story> = () => { const onSelect = useCallback( (rows, state) => action( @@ -290,14 +234,11 @@ export const SelectableMulti: Story> = (args) => { onSelect={onSelect} onRowClick={onRowClick} selectionMode='multi' - {...args} /> ); }; -SelectableMulti.args = { isSelectable: true, selectionMode: 'multi' }; - -export const Sortable: Story> = (args) => { +export const Sortable: Story> = () => { const onClickHandler = ( props: CellProps<{ name: string; description: string }>, ) => action(props.row.original.name)(); @@ -360,21 +301,11 @@ export const Sortable: Story> = (args) => { emptyTableContent='No data.' isSortable onSort={onSort} - {...args} /> ); }; -Sortable.args = { - data: [ - { id: '1', name: 'Name1', description: 'Description1' }, - { id: '3', name: 'Name3', description: 'Description3' }, - { id: '2', name: 'Name2', description: 'Description2' }, - ], - isSortable: true, -}; - -export const Filters: Story> = (args) => { +export const Filters: Story> = () => { type TableStoryDataType = { index: number; name: string; @@ -534,41 +465,11 @@ export const Filters: Story> = (args) => { data={data} emptyTableContent='No data.' onFilter={onFilter} - {...args} /> ); }; -Filters.args = { - data: [ - { - index: 1, - name: 'Name1', - description: 'Description1', - ids: ['1'], - startDate: new Date('May 1, 2021'), - endDate: '2021-05-31T21:00:00.000Z', - }, - { - index: 2, - name: 'Name2', - description: 'Description2', - ids: ['2', '3', '4'], - startDate: new Date('May 2, 2021'), - endDate: '2021-06-01T21:00:00.000Z', - }, - { - index: 3, - name: 'Name3', - description: 'Description3', - ids: ['3', '4'], - startDate: new Date('May 3, 2021'), - endDate: '2021-06-02T21:00:00.000Z', - }, - ], -}; - -export const GlobalFilter: Story> = (args) => { +export const GlobalFilter: Story> = () => { type TableStoryDataType = { name: string; description: string; @@ -640,24 +541,12 @@ export const GlobalFilter: Story> = (args) => { data={data} emptyTableContent='No data.' globalFilterValue={globalFilter} - {...args} /> ); }; -GlobalFilter.args = { - data: [ - { name: 'Name1', description: 'Description7' }, - { name: 'Name2', description: 'Description7' }, - { name: 'Name3', description: 'Description8' }, - { name: 'Name4', description: 'Description8' }, - { name: 'Name5', description: 'Description9' }, - { name: 'Name6', description: 'Description9' }, - ], -}; - -export const Expandable: Story> = (args) => { +export const Expandable: Story> = () => { const onExpand = useCallback( (rows, state) => action( @@ -713,16 +602,12 @@ export const Expandable: Story> = (args) => { emptyTableContent='No data.' subComponent={expandedSubComponent} onExpand={onExpand} - {...args} + isSelectable /> ); }; -Expandable.args = { - isSelectable: true, -}; - -export const ExpandableSubrows: Story> = (args) => { +export const ExpandableSubrows: Story> = () => { const onExpand = useCallback( (rows, state) => action( @@ -812,64 +697,13 @@ export const ExpandableSubrows: Story> = (args) => { isSortable data={data} columns={columns} - {...args} onExpand={onExpand} /> ); }; -ExpandableSubrows.args = { - data: [ - { - name: 'Row 1', - description: 'Description 1', - subRows: [ - { name: 'Row 1.1', description: 'Description 1.1', subRows: [] }, - { - name: 'Row 1.2', - description: 'Description 1.2', - subRows: [ - { - name: 'Row 1.2.1', - description: 'Description 1.2.1', - subRows: [], - }, - { - name: 'Row 1.2.2', - description: 'Description 1.2.2', - subRows: [], - }, - { - name: 'Row 1.2.3', - description: 'Description 1.2.3', - subRows: [], - }, - { - name: 'Row 1.2.4', - description: 'Description 1.2.4', - subRows: [], - }, - ], - }, - { name: 'Row 1.3', description: 'Description 1.3', subRows: [] }, - { name: 'Row 1.4', description: 'Description 1.4', subRows: [] }, - ], - }, - { - name: 'Row 2', - description: 'Description 2', - subRows: [ - { name: 'Row 2.1', description: 'Description 2.1', subRows: [] }, - { name: 'Row 2.2', description: 'Description 2.2', subRows: [] }, - { name: 'Row 2.3', description: 'Description 2.3', subRows: [] }, - ], - }, - { name: 'Row 3', description: 'Description 3', subRows: [] }, - ], -}; - -export const LazyLoading: Story> = (args) => { +export const LazyLoading: Story> = () => { const onClickHandler = ( props: CellProps<{ name: string; description: string }>, ) => action(props.row.original.name)(); @@ -936,7 +770,6 @@ export const LazyLoading: Story> = (args) => { onBottomReached={onBottomReached} isLoading={isLoading} isSortable - {...args} style={{ height: 440, maxHeight: '90vh' }} data={data} // Prevents from resetting filters and sorting when more data is loaded @@ -946,15 +779,7 @@ export const LazyLoading: Story> = (args) => { ); }; -LazyLoading.args = { - isSortable: true, -}; - -LazyLoading.argTypes = { - isLoading: { control: { disable: true } }, -}; - -export const RowInViewport: Story> = (args) => { +export const RowInViewport: Story> = () => { const onClickHandler = ( props: CellProps<{ name: string; description: string }>, ) => action(props.row.original.name)(); @@ -1031,18 +856,13 @@ export const RowInViewport: Story> = (args) => { columns={columns} emptyTableContent='No data.' onRowInViewport={onRowInViewport} - {...args} data={data} /> ); }; -RowInViewport.argTypes = { - data: { control: { disable: true } }, -}; - -export const DisabledRows: Story> = (args) => { +export const DisabledRows: Story> = () => { const onRowClick = useCallback( (event: React.MouseEvent, row: Row) => action(`Row clicked: ${JSON.stringify(row.original)}`)(), @@ -1119,21 +939,12 @@ export const DisabledRows: Story> = (args) => { onRowClick={onRowClick} subComponent={expandedSubComponent} isRowDisabled={isRowDisabled} - {...args} + isSelectable /> ); }; -DisabledRows.args = { - data: [ - { name: 'Name1', description: 'Description1' }, - { name: 'Name2', description: 'Description2' }, - { name: 'Name3', description: 'Description3' }, - ], - isSelectable: true, -}; - -export const Loading: Story> = (args) => { +export const Loading: Story> = () => { const columns = useMemo( () => [ { @@ -1157,17 +968,11 @@ export const Loading: Story> = (args) => { data={[]} isLoading={true} emptyTableContent='No data.' - {...args} /> ); }; -Loading.args = { - data: [], - isLoading: true, -}; - -export const NoData: Story> = (args) => { +export const NoData: Story> = () => { const columns = useMemo( () => [ { @@ -1191,16 +996,11 @@ export const NoData: Story> = (args) => { data={[]} isLoading={false} emptyTableContent='No data.' - {...args} /> ); }; -NoData.args = { - data: [], -}; - -export const InitialState: Story> = (args) => { +export const InitialState: Story> = () => { const columns = useMemo( () => [ { @@ -1241,30 +1041,11 @@ export const InitialState: Story> = (args) => { filters: [{ id: 'name', value: '1' }], selectedRowIds: { '0': true, '1': true, '4': true, '5': true }, }} - {...args} /> ); }; -InitialState.args = { - data: [ - { name: 'Name17', description: 'Description17' }, - { name: 'Name18', description: 'Description18' }, - { name: 'Name19', description: 'Description19' }, - { name: 'Name20', description: 'Description20' }, - { name: 'Name21', description: 'Description21' }, - { name: 'Name22', description: 'Description22' }, - ], - initialState: { - filters: [{ id: 'name', value: '1' }], - selectedRowIds: { '0': true, '1': true, '4': true, '5': true }, - }, -}; -InitialState.argTypes = { - initialState: { table: { disable: false } }, -}; - -export const ControlledState: Story> = (args) => { +export const ControlledState: Story> = () => { type DemoData = { id: string; name: string; @@ -1412,18 +1193,13 @@ export const ControlledState: Story> = (args) => { setExpandedRows(expanded); }, [])} getRowId={useCallback((rowData) => rowData.id, [])} - {...args} data={data} /> ); }; -ControlledState.argTypes = { - data: { control: { disable: true } }, -}; - -export const Full: Story> = (args) => { +export const Full: Story> = () => { const [hoveredRowIndex, setHoveredRowIndex] = useState(0); const [rowRefMap, setRowRefMap] = React.useState>( @@ -1535,7 +1311,6 @@ export const Full: Story> = (args) => { isSortable isResizable enableColumnReordering - {...args} /> > = (args) => { ); }; -Full.args = { - data: [ - { name: 'Name1', description: 'Description1' }, - { name: 'Name2', description: 'Description2' }, - { name: 'Name3', description: 'Description3' }, - ], - isSelectable: true, - isSortable: true, - isResizable: true, - enableColumnReordering: true, -}; - -export const Full2: Story> = (args) => { +export const Full2: Story> = () => { type TableStoryDataType = { product: string; price: number; @@ -1738,7 +1501,6 @@ export const Full2: Story> = (args) => { isSortable isResizable enableColumnReordering - {...args} data={data} style={{ height: '100%' }} enableVirtualization @@ -1750,18 +1512,7 @@ export const Full2: Story> = (args) => { ); }; -Full2.args = { - isSelectable: true, - isSortable: true, - isResizable: true, - enableColumnReordering: true, -}; - -Full2.argTypes = { - data: { control: { disable: true } }, -}; - -export const Localized: Story> = (args) => { +export const Localized: Story> = () => { const columns = useMemo( () => [ { @@ -1829,7 +1580,6 @@ export const Localized: Story> = (args) => { emptyTableContent='No localized data.' isSelectable isSortable - {...args} columns={columns} data={generateData(0, 100)} pageSize={25} @@ -1848,14 +1598,11 @@ Localized.decorators = [ ), ]; -Localized.argTypes = { - data: { control: { disable: true } }, -}; Localized.parameters = { docs: { source: { excludeDecorators: true } }, }; -export const Condensed: Story> = (args) => { +export const Condensed: Story> = () => { const onClickHandler = ( props: CellProps<{ name: string; description: string }>, ) => action(props.row.original.name)(); @@ -1957,63 +1704,12 @@ export const Condensed: Story> = (args) => { data={data} emptyTableContent='No data.' density='condensed' - {...args} onExpand={onExpand} /> ); }; -Condensed.args = { - density: 'condensed', - data: [ - { - name: 'Row 1', - description: 'Description 1', - subRows: [ - { name: 'Row 1.1', description: 'Description 1.1', subRows: [] }, - { - name: 'Row 1.2', - description: 'Description 1.2', - subRows: [ - { - name: 'Row 1.2.1', - description: 'Description 1.2.1', - subRows: [], - }, - { - name: 'Row 1.2.2', - description: 'Description 1.2.2', - subRows: [], - }, - { - name: 'Row 1.2.3', - description: 'Description 1.2.3', - subRows: [], - }, - { - name: 'Row 1.2.4', - description: 'Description 1.2.4', - subRows: [], - }, - ], - }, - { name: 'Row 1.3', description: 'Description 1.3', subRows: [] }, - { name: 'Row 1.4', description: 'Description 1.4', subRows: [] }, - ], - }, - { - name: 'Row 2', - description: 'Description 2', - subRows: [ - { name: 'Row 2.1', description: 'Description 2.1', subRows: [] }, - { name: 'Row 2.2', description: 'Description 2.2', subRows: [] }, - { name: 'Row 2.3', description: 'Description 2.3', subRows: [] }, - ], - }, - { name: 'Row 3', description: 'Description 3', subRows: [] }, - ], -}; -export const Editable: Story> = (args) => { +export const Editable: Story> = () => { type TableStoryDataType = { name: string; description: string; @@ -2081,7 +1777,6 @@ export const Editable: Story> = (args) => { return (
> = (args) => { ); }; -Editable.argTypes = { - data: { control: { disable: true } }, -}; - -export const WithPaginator: Story> = (args) => { +export const WithPaginator: Story> = () => { const columns = useMemo( () => [ { @@ -2163,7 +1854,6 @@ export const WithPaginator: Story> = (args) => { emptyTableContent='No data.' isSelectable isSortable - {...args} columns={columns} data={data} pageSize={25} @@ -2174,11 +1864,6 @@ export const WithPaginator: Story> = (args) => { ); }; -WithPaginator.args = { - isSelectable: true, - isSortable: true, -}; - WithPaginator.decorators = [ (Story) => (
@@ -2187,16 +1872,11 @@ WithPaginator.decorators = [ ), ]; -WithPaginator.argTypes = { - data: { control: { disable: true } }, -}; WithPaginator.parameters = { docs: { source: { excludeDecorators: true } }, }; -export const WithManualPaginatorAndFilter: Story> = ( - args, -) => { +export const WithManualPaginatorAndFilter: Story> = () => { type RowData = { name: string; description: string; @@ -2379,7 +2059,6 @@ export const WithManualPaginatorAndFilter: Story> = ( <>
> = (args) => { +export const CustomFilter: Story> = () => { type RowData = { name: string; description: string; @@ -2543,7 +2219,6 @@ export const CustomFilter: Story> = (args) => { <>
> = (args) => { +export const ResizableColumns: Story> = () => { type TableStoryDataType = { index: number; name: string; @@ -2690,44 +2362,13 @@ export const ResizableColumns: Story> = (args) => { emptyTableContent='No data.' isResizable isSortable - {...args} columnResizeMode={columnResizeMode} /> ); }; -ResizableColumns.args = { - isResizable: true, - data: [ - { - index: 1, - name: 'Name1', - description: 'Description1', - id: '111', - startDate: new Date('May 1, 2021'), - endDate: new Date('Jun 1, 2021'), - }, - { - index: 2, - name: 'Name2', - description: 'Description2', - id: '222', - startDate: new Date('May 2, 2021'), - endDate: new Date('Jun 2, 2021'), - }, - { - index: 3, - name: 'Name3', - description: 'Description3', - id: '333', - startDate: new Date('May 3, 2021'), - endDate: new Date('Jun 3, 2021'), - }, - ], -}; - -export const ZebraStripedRows: Story> = (args) => { +export const ZebraStripedRows: Story> = () => { const columns = useMemo( () => [ { @@ -2785,7 +2426,6 @@ export const ZebraStripedRows: Story> = (args) => { isSelectable isSortable styleType='zebra-rows' - {...args} columns={columns} data={data} style={{ height: '100%' }} @@ -2794,13 +2434,7 @@ export const ZebraStripedRows: Story> = (args) => { ); }; -ZebraStripedRows.args = { - isSelectable: true, - isSortable: true, - styleType: 'zebra-rows', -}; - -export const HorizontalScroll: Story> = (args) => { +export const HorizontalScroll: Story> = () => { const data = useMemo( () => [ { @@ -2925,86 +2559,10 @@ export const HorizontalScroll: Story> = (args) => { data={data} emptyTableContent='No data.' style={{ height: '100%' }} - {...args} /> ); }; -HorizontalScroll.args = { - data: [ - { - product: 'Product 1', - price: 5, - quantity: 500, - rating: '4/5', - deliveryTime: 5, - }, - { - product: 'Product 2', - price: 12, - quantity: 1200, - rating: '1/5', - deliveryTime: 25, - }, - { - product: 'Product 3', - price: 2.99, - quantity: 1500, - rating: '3/5', - deliveryTime: 7, - }, - { - product: 'Product 4', - price: 20, - quantity: 50, - rating: '4/5', - deliveryTime: 2, - }, - { - product: 'Product 5', - price: 1.99, - quantity: 700, - rating: '5/5', - deliveryTime: 1, - }, - { - product: 'Product 6', - price: 499, - quantity: 30, - rating: '5/5', - deliveryTime: 20, - }, - { - product: 'Product 7', - price: 13.99, - quantity: 130, - rating: '1/5', - deliveryTime: 30, - }, - { - product: 'Product 8', - price: 5.99, - quantity: 500, - rating: '4/5', - deliveryTime: 5, - }, - { - product: 'Product 9', - price: 12, - quantity: 1200, - rating: '1/5', - deliveryTime: 25, - }, - { - product: 'Product 10', - price: 2.99, - quantity: 200, - rating: '3/5', - deliveryTime: 17, - }, - ], -}; - HorizontalScroll.decorators = [ (Story) => (
> = (args) => { +export const Virtualized: Story> = () => { const onClickHandler = ( props: CellProps<{ name: string; description: string }>, ) => action(props.row.original.name)(); @@ -3070,19 +2628,13 @@ export const Virtualized: Story> = (args) => { enableVirtualization columns={columns} emptyTableContent='No data.' - {...args} style={{ maxHeight: '90vh' }} data={data} /> ); }; -Virtualized.argTypes = { - isLoading: { control: { disable: true } }, - data: { control: { disable: true } }, -}; - -export const ScrollToRow: Story> = (args) => { +export const ScrollToRow: Story> = () => { type TableStoryDataType = { id: string; name: string; @@ -3145,7 +2697,6 @@ export const ScrollToRow: Story> = (args) => { columns={columns} emptyTableContent='No data.' isSortable - {...args} style={{ maxHeight: '90vh' }} data={data} scrollToRow={React.useCallback( @@ -3157,12 +2708,7 @@ export const ScrollToRow: Story> = (args) => { ); }; -ScrollToRow.argTypes = { - isLoading: { control: { disable: true } }, - data: { control: { disable: true } }, -}; - -export const VirtualizedSubRows: Story> = (args) => { +export const VirtualizedSubRows: Story> = () => { const columns = useMemo( () => [ { @@ -3218,19 +2764,13 @@ export const VirtualizedSubRows: Story> = (args) => { enableVirtualization columns={columns} emptyTableContent='No data.' - {...args} style={{ maxHeight: '90vh' }} data={data} /> ); }; -VirtualizedSubRows.argTypes = { - isLoading: { control: { disable: true } }, - data: { control: { disable: true } }, -}; - -export const DraggableColumns: Story> = (args) => { +export const DraggableColumns: Story> = () => { const data = useMemo( () => [ { @@ -3352,89 +2892,11 @@ export const DraggableColumns: Story> = (args) => { data={data} emptyTableContent='No data.' isSelectable - {...args} /> ); }; -DraggableColumns.args = { - data: [ - { - product: 'Product 1', - price: 5, - quantity: 500, - rating: '4/5', - deliveryTime: 5, - }, - { - product: 'Product 2', - price: 12, - quantity: 1200, - rating: '1/5', - deliveryTime: 25, - }, - { - product: 'Product 3', - price: 2.99, - quantity: 1500, - rating: '3/5', - deliveryTime: 7, - }, - { - product: 'Product 4', - price: 20, - quantity: 50, - rating: '4/5', - deliveryTime: 2, - }, - { - product: 'Product 5', - price: 1.99, - quantity: 700, - rating: '5/5', - deliveryTime: 1, - }, - { - product: 'Product 6', - price: 499, - quantity: 30, - rating: '5/5', - deliveryTime: 20, - }, - { - product: 'Product 7', - price: 13.99, - quantity: 130, - rating: '1/5', - deliveryTime: 30, - }, - { - product: 'Product 8', - price: 5.99, - quantity: 500, - rating: '4/5', - deliveryTime: 5, - }, - { - product: 'Product 9', - price: 12, - quantity: 1200, - rating: '1/5', - deliveryTime: 25, - }, - { - product: 'Product 10', - price: 2.99, - quantity: 200, - rating: '3/5', - deliveryTime: 17, - }, - ], - enableColumnReordering: true, - isSelectable: true, -}; - -export const CustomizedColumns: Story> = (args) => { +export const CustomizedColumns: Story> = () => { const onExpand = useCallback( (rows, state) => action( @@ -3527,22 +2989,11 @@ export const CustomizedColumns: Story> = (args) => { rowProps={({ index }) => ({ onClick: (e) => index === 0 && e.preventDefault(), })} - {...args} /> ); }; -CustomizedColumns.args = { - isSelectable: true, - data: [ - { name: 'Name1', description: 'Description1' }, - { name: 'Name2', description: 'Description2' }, - { name: 'Name3', description: 'Description3' }, - { name: 'Name4', description: 'Description4' }, - ], -}; - -export const ColumnManager: Story> = (args) => { +export const ColumnManager: Story> = () => { type TableStoryDataType = { index: number; name: string; @@ -3702,82 +3153,11 @@ export const ColumnManager: Story> = (args) => { columns={columns} data={data} emptyTableContent='No data.' - {...args} /> ); }; -ColumnManager.args = { - data: [ - { - index: 1, - name: 'Name1', - description: 'Description1', - id: '111', - startDate: new Date('May 1, 2021'), - endDate: new Date('Jun 1, 2021'), - price: '$1.00', - color: 'Red', - stock: 10, - rating: '5/5', - location: 'Philadelphia, Pennsylvania', - }, - { - index: 2, - name: 'Name2', - description: 'Description2', - id: '222', - startDate: new Date('May 2, 2021'), - endDate: new Date('Jun 2, 2021'), - price: '$2.00', - color: 'Green', - stock: 20, - rating: '4/5', - location: 'Philadelphia, Pennsylvania', - }, - { - index: 3, - name: 'Name3', - description: 'Description3', - id: '333', - startDate: new Date('May 3, 2021'), - endDate: new Date('Jun 3, 2021'), - price: '$3.00', - color: 'Green', - stock: 30, - rating: '3/5', - location: 'Philadelphia, Pennsylvania', - }, - { - index: 4, - name: 'Name4', - description: 'Description4', - id: '444', - startDate: new Date('May 4, 2021'), - endDate: new Date('Jun 4, 2021'), - price: '$4.00', - color: 'Yellow', - stock: 40, - rating: '2/5', - location: 'Philadelphia, Pennsylvania', - }, - { - index: 5, - name: 'Name5', - description: 'Description5', - id: '555', - startDate: new Date('May 5, 2021'), - endDate: new Date('Jun 5, 2021'), - price: '$5.00', - color: 'Purple', - stock: 50, - rating: '1/5', - location: 'Philadelphia, Pennsylvania', - }, - ], -}; - -export const StickyColumns: Story> = (args) => { +export const StickyColumns: Story> = () => { const data = useMemo( () => [ { @@ -3930,86 +3310,10 @@ export const StickyColumns: Story> = (args) => { emptyTableContent='No data.' style={{ height: '100%' }} isResizable - {...args} /> ); }; -StickyColumns.args = { - data: [ - { - product: 'Product 1', - price: 5, - quantity: 500, - rating: '4/5', - deliveryTime: 5, - }, - { - product: 'Product 2', - price: 12, - quantity: 1200, - rating: '1/5', - deliveryTime: 25, - }, - { - product: 'Product 3', - price: 2.99, - quantity: 1500, - rating: '3/5', - deliveryTime: 7, - }, - { - product: 'Product 4', - price: 20, - quantity: 50, - rating: '4/5', - deliveryTime: 2, - }, - { - product: 'Product 5', - price: 1.99, - quantity: 700, - rating: '5/5', - deliveryTime: 1, - }, - { - product: 'Product 6', - price: 499, - quantity: 30, - rating: '5/5', - deliveryTime: 20, - }, - { - product: 'Product 7', - price: 13.99, - quantity: 130, - rating: '1/5', - deliveryTime: 30, - }, - { - product: 'Product 8', - price: 5.99, - quantity: 500, - rating: '4/5', - deliveryTime: 5, - }, - { - product: 'Product 9', - price: 12, - quantity: 1200, - rating: '1/5', - deliveryTime: 25, - }, - { - product: 'Product 10', - price: 2.99, - quantity: 200, - rating: '3/5', - deliveryTime: 17, - }, - ], -}; - StickyColumns.decorators = [ (Story) => (
> = (args) => { +export const StatusAndCellIcons: Story> = () => { const columns = useMemo( () => [ { @@ -4142,7 +3446,6 @@ export const StatusAndCellIcons: Story> = (args) => { return (
> = (args) => { /> ); }; - -StatusAndCellIcons.args = { - isSelectable: true, - selectionMode: 'multi', -}; From 45ca69b7b9a46a7970122c711495b0f39bedd826 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Fri, 1 Sep 2023 15:04:16 -0400 Subject: [PATCH 108/196] Removed unnecessary type assertion --- apps/storybook/src/Table.stories.tsx | 70 ++++++++++++++-------------- 1 file changed, 35 insertions(+), 35 deletions(-) diff --git a/apps/storybook/src/Table.stories.tsx b/apps/storybook/src/Table.stories.tsx index 73b32f72216..e1fe009da4f 100644 --- a/apps/storybook/src/Table.stories.tsx +++ b/apps/storybook/src/Table.stories.tsx @@ -37,7 +37,7 @@ import { ProgressRadial, BaseFilter, } from '@itwin/itwinui-react'; -import { Story, Meta } from '@storybook/react'; +import { Meta } from '@storybook/react'; import { useMemo, useState } from '@storybook/addons'; import { action } from '@storybook/addon-actions'; import { @@ -54,7 +54,7 @@ export default { component: Table, } as Meta; -export const Basic: Story> = () => { +export const Basic = () => { const onClickHandler = ( props: CellProps<{ name: string; description: string }>, ) => action(props.row.original.name)(); @@ -101,7 +101,7 @@ export const Basic: Story> = () => { return
; }; -export const SelectableSingle: Story> = () => { +export const SelectableSingle = () => { const onRowClick = useCallback( (event: React.MouseEvent, row: Row) => action(`Row clicked: ${JSON.stringify(row.original)}`)(), @@ -164,7 +164,7 @@ export const SelectableSingle: Story> = () => { ); }; -export const SelectableMulti: Story> = () => { +export const SelectableMulti = () => { const onSelect = useCallback( (rows, state) => action( @@ -238,7 +238,7 @@ export const SelectableMulti: Story> = () => { ); }; -export const Sortable: Story> = () => { +export const Sortable = () => { const onClickHandler = ( props: CellProps<{ name: string; description: string }>, ) => action(props.row.original.name)(); @@ -305,7 +305,7 @@ export const Sortable: Story> = () => { ); }; -export const Filters: Story> = () => { +export const Filters = () => { type TableStoryDataType = { index: number; name: string; @@ -469,7 +469,7 @@ export const Filters: Story> = () => { ); }; -export const GlobalFilter: Story> = () => { +export const GlobalFilter = () => { type TableStoryDataType = { name: string; description: string; @@ -546,7 +546,7 @@ export const GlobalFilter: Story> = () => { ); }; -export const Expandable: Story> = () => { +export const Expandable = () => { const onExpand = useCallback( (rows, state) => action( @@ -607,7 +607,7 @@ export const Expandable: Story> = () => { ); }; -export const ExpandableSubrows: Story> = () => { +export const ExpandableSubrows = () => { const onExpand = useCallback( (rows, state) => action( @@ -703,7 +703,7 @@ export const ExpandableSubrows: Story> = () => { ); }; -export const LazyLoading: Story> = () => { +export const LazyLoading = () => { const onClickHandler = ( props: CellProps<{ name: string; description: string }>, ) => action(props.row.original.name)(); @@ -779,7 +779,7 @@ export const LazyLoading: Story> = () => { ); }; -export const RowInViewport: Story> = () => { +export const RowInViewport = () => { const onClickHandler = ( props: CellProps<{ name: string; description: string }>, ) => action(props.row.original.name)(); @@ -862,7 +862,7 @@ export const RowInViewport: Story> = () => { ); }; -export const DisabledRows: Story> = () => { +export const DisabledRows = () => { const onRowClick = useCallback( (event: React.MouseEvent, row: Row) => action(`Row clicked: ${JSON.stringify(row.original)}`)(), @@ -944,7 +944,7 @@ export const DisabledRows: Story> = () => { ); }; -export const Loading: Story> = () => { +export const Loading = () => { const columns = useMemo( () => [ { @@ -972,7 +972,7 @@ export const Loading: Story> = () => { ); }; -export const NoData: Story> = () => { +export const NoData = () => { const columns = useMemo( () => [ { @@ -1000,7 +1000,7 @@ export const NoData: Story> = () => { ); }; -export const InitialState: Story> = () => { +export const InitialState = () => { const columns = useMemo( () => [ { @@ -1045,7 +1045,7 @@ export const InitialState: Story> = () => { ); }; -export const ControlledState: Story> = () => { +export const ControlledState = () => { type DemoData = { id: string; name: string; @@ -1199,7 +1199,7 @@ export const ControlledState: Story> = () => { ); }; -export const Full: Story> = () => { +export const Full = () => { const [hoveredRowIndex, setHoveredRowIndex] = useState(0); const [rowRefMap, setRowRefMap] = React.useState>( @@ -1321,7 +1321,7 @@ export const Full: Story> = () => { ); }; -export const Full2: Story> = () => { +export const Full2 = () => { type TableStoryDataType = { product: string; price: number; @@ -1512,7 +1512,7 @@ export const Full2: Story> = () => { ); }; -export const Localized: Story> = () => { +export const Localized = () => { const columns = useMemo( () => [ { @@ -1602,7 +1602,7 @@ Localized.parameters = { docs: { source: { excludeDecorators: true } }, }; -export const Condensed: Story> = () => { +export const Condensed = () => { const onClickHandler = ( props: CellProps<{ name: string; description: string }>, ) => action(props.row.original.name)(); @@ -1709,7 +1709,7 @@ export const Condensed: Story> = () => { ); }; -export const Editable: Story> = () => { +export const Editable = () => { type TableStoryDataType = { name: string; description: string; @@ -1789,7 +1789,7 @@ export const Editable: Story> = () => { ); }; -export const WithPaginator: Story> = () => { +export const WithPaginator = () => { const columns = useMemo( () => [ { @@ -1876,7 +1876,7 @@ WithPaginator.parameters = { docs: { source: { excludeDecorators: true } }, }; -export const WithManualPaginatorAndFilter: Story> = () => { +export const WithManualPaginatorAndFilter = () => { type RowData = { name: string; description: string; @@ -2085,7 +2085,7 @@ WithManualPaginatorAndFilter.parameters = { docs: { source: { excludeDecorators: true } }, }; -export const CustomFilter: Story> = () => { +export const CustomFilter = () => { type RowData = { name: string; description: string; @@ -2243,7 +2243,7 @@ CustomFilter.parameters = { docs: { source: { excludeDecorators: true } }, }; -export const ResizableColumns: Story> = () => { +export const ResizableColumns = () => { type TableStoryDataType = { index: number; name: string; @@ -2368,7 +2368,7 @@ export const ResizableColumns: Story> = () => { ); }; -export const ZebraStripedRows: Story> = () => { +export const ZebraStripedRows = () => { const columns = useMemo( () => [ { @@ -2434,7 +2434,7 @@ export const ZebraStripedRows: Story> = () => { ); }; -export const HorizontalScroll: Story> = () => { +export const HorizontalScroll = () => { const data = useMemo( () => [ { @@ -2577,7 +2577,7 @@ HorizontalScroll.decorators = [ ), ]; -export const Virtualized: Story> = () => { +export const Virtualized = () => { const onClickHandler = ( props: CellProps<{ name: string; description: string }>, ) => action(props.row.original.name)(); @@ -2634,7 +2634,7 @@ export const Virtualized: Story> = () => { ); }; -export const ScrollToRow: Story> = () => { +export const ScrollToRow = () => { type TableStoryDataType = { id: string; name: string; @@ -2708,7 +2708,7 @@ export const ScrollToRow: Story> = () => { ); }; -export const VirtualizedSubRows: Story> = () => { +export const VirtualizedSubRows = () => { const columns = useMemo( () => [ { @@ -2770,7 +2770,7 @@ export const VirtualizedSubRows: Story> = () => { ); }; -export const DraggableColumns: Story> = () => { +export const DraggableColumns = () => { const data = useMemo( () => [ { @@ -2896,7 +2896,7 @@ export const DraggableColumns: Story> = () => { ); }; -export const CustomizedColumns: Story> = () => { +export const CustomizedColumns = () => { const onExpand = useCallback( (rows, state) => action( @@ -2993,7 +2993,7 @@ export const CustomizedColumns: Story> = () => { ); }; -export const ColumnManager: Story> = () => { +export const ColumnManager = () => { type TableStoryDataType = { index: number; name: string; @@ -3157,7 +3157,7 @@ export const ColumnManager: Story> = () => { ); }; -export const StickyColumns: Story> = () => { +export const StickyColumns = () => { const data = useMemo( () => [ { @@ -3328,7 +3328,7 @@ StickyColumns.decorators = [ ), ]; -export const StatusAndCellIcons: Story> = () => { +export const StatusAndCellIcons = () => { const columns = useMemo( () => [ { From a5bf4c7dad28171acc9c927d82508fe2f2cce684 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Fri, 1 Sep 2023 15:05:25 -0400 Subject: [PATCH 109/196] Removed one more unnecessary type assertion --- apps/storybook/src/Table.stories.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/apps/storybook/src/Table.stories.tsx b/apps/storybook/src/Table.stories.tsx index e1fe009da4f..22fbb48c6e6 100644 --- a/apps/storybook/src/Table.stories.tsx +++ b/apps/storybook/src/Table.stories.tsx @@ -37,7 +37,6 @@ import { ProgressRadial, BaseFilter, } from '@itwin/itwinui-react'; -import { Meta } from '@storybook/react'; import { useMemo, useState } from '@storybook/addons'; import { action } from '@storybook/addon-actions'; import { @@ -52,7 +51,7 @@ import { export default { title: 'Core/Table', component: Table, -} as Meta; +}; export const Basic = () => { const onClickHandler = ( From 08d5b6f7553a61240191e02b3ff2545ac57ba062 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Tue, 5 Sep 2023 11:00:23 -0400 Subject: [PATCH 110/196] Added copyright header to react-table-types.tsx --- .../src/core/Table/types/react-table-types.test.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/itwinui-react/src/core/Table/types/react-table-types.test.tsx b/packages/itwinui-react/src/core/Table/types/react-table-types.test.tsx index 6c40d2235b0..d337053e3f2 100644 --- a/packages/itwinui-react/src/core/Table/types/react-table-types.test.tsx +++ b/packages/itwinui-react/src/core/Table/types/react-table-types.test.tsx @@ -1,3 +1,7 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Bentley Systems, Incorporated. All rights reserved. + * See LICENSE.md in the project root for license terms and full copyright notice. + *--------------------------------------------------------------------------------------------*/ /** * This test file to test some Table type related cases that have not been tested in other files * (e.g. storybook, unit tests, etc.) From f7140d13e40d511ac8ff77e6150e93f270effbab Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Tue, 5 Sep 2023 11:26:30 -0400 Subject: [PATCH 111/196] Trying to use .ts instead of .d.ts. Used declare and commented export namespace to solve errors. Temporarily disabled a few eslint warnings --- ...-table-types.d.ts => react-table-types.ts} | 176 +++++++++--------- packages/itwinui-react/tsconfig.json | 2 +- 2 files changed, 92 insertions(+), 86 deletions(-) rename packages/itwinui-react/src/core/Table/types/{react-table-types.d.ts => react-table-types.ts} (90%) diff --git a/packages/itwinui-react/src/core/Table/types/react-table-types.d.ts b/packages/itwinui-react/src/core/Table/types/react-table-types.ts similarity index 90% rename from packages/itwinui-react/src/core/Table/types/react-table-types.d.ts rename to packages/itwinui-react/src/core/Table/types/react-table-types.ts index d3f1841d0a3..cbc364da933 100644 --- a/packages/itwinui-react/src/core/Table/types/react-table-types.d.ts +++ b/packages/itwinui-react/src/core/Table/types/react-table-types.ts @@ -2,6 +2,8 @@ * Copyright (c) Bentley Systems, Incorporated. All rights reserved. * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ +/* eslint-disable @typescript-eslint/no-explicit-any */ +/* eslint-disable @typescript-eslint/no-unused-vars */ /* eslint-disable @typescript-eslint/no-empty-interface */ /* eslint-disable @typescript-eslint/ban-types */ // Type definitions for react-table 7.7 @@ -326,7 +328,7 @@ export type Meta< > = [Extension] extends [never] ? M : M & Extension; //#region useTable -export function useTable = {}>( +export declare function useTable = {}>( options: TableOptions, ...plugins: Array> ): TableInstance; @@ -574,33 +576,39 @@ export type Accessor> = ( // Plugins //#region useAbsoluteLayout -export function useAbsoluteLayout = {}>( - hooks: Hooks, -): void; +export declare function useAbsoluteLayout< + D extends Record = {}, +>(hooks: Hooks): void; -export namespace useAbsoluteLayout { - const pluginName = 'useAbsoluteLayout'; -} +// export namespace useAbsoluteLayout { +// const pluginName = 'useAbsoluteLayout'; +// } + +// export declare const useAbsoluteLayout: (< +// D extends Record = {}, +// >( +// hooks: Hooks, +// ) => void) & { pluginName: 'useAbsoluteLayout' }; //#endregion //#region useBlockLayout -export function useBlockLayout = {}>( +export declare function useBlockLayout = {}>( hooks: Hooks, ): void; -export namespace useBlockLayout { - const pluginName = 'useBlockLayout'; -} +// export namespace useBlockLayout { +// const pluginName = 'useBlockLayout'; +// } //#endregion //#region useColumnOrder -export function useColumnOrder = {}>( +export declare function useColumnOrder = {}>( hooks: Hooks, ): void; -export namespace useColumnOrder { - const pluginName = 'useColumnOrder'; -} +// export namespace useColumnOrder { +// const pluginName = 'useColumnOrder'; +// } export interface UseColumnOrderState> { columnOrder: Array>; @@ -619,13 +627,13 @@ export interface UseColumnOrderInstanceProps< //#endregion //#region useExpanded -export function useExpanded = {}>( +export declare function useExpanded = {}>( hooks: Hooks, ): void; -export namespace useExpanded { - const pluginName = 'useExpanded'; -} +// export namespace useExpanded { +// const pluginName = 'useExpanded'; +// } export interface TableExpandedToggleProps extends TableKeyedProps {} @@ -669,13 +677,13 @@ export interface UseExpandedRowProps> { //#endregion //#region useFilters -export function useFilters = {}>( +export declare function useFilters = {}>( hooks: Hooks, ): void; -export namespace useFilters { - const pluginName = 'useFilters'; -} +// export namespace useFilters { +// const pluginName = 'useFilters'; +// } export type UseFiltersOptions> = Partial<{ manualFilters: boolean; @@ -760,33 +768,33 @@ export interface FilterType> { //#endregion //#region useFlexLayout -export function useFlexLayout = {}>( +export declare function useFlexLayout = {}>( hooks: Hooks, ): void; -export namespace useFlexLayout { - const pluginName = 'useFlexLayout'; -} +// export namespace useFlexLayout { +// const pluginName = 'useFlexLayout'; +// } //#endregion //#region useGridLayout -export function useGridLayout = {}>( +export declare function useGridLayout = {}>( hooks: Hooks, ): void; -export namespace useGridLayout { - const pluginName = 'useGridLayout'; -} +// export namespace useGridLayout { +// const pluginName = 'useGridLayout'; +// } //#endregion //#region useGlobalFilter -export function useGlobalFilter = {}>( +export declare function useGlobalFilter = {}>( hooks: Hooks, ): void; -export namespace useGlobalFilter { - const pluginName = 'useGlobalFilter'; -} +// export namespace useGlobalFilter { +// const pluginName = 'useGlobalFilter'; +// } export type UseGlobalFiltersOptions> = Partial<{ @@ -830,13 +838,13 @@ export interface UseGlobalFiltersInstanceProps< //#endregion //#region useGroupBy -export function useGroupBy = {}>( +export declare function useGroupBy = {}>( hooks: Hooks, ): void; -export namespace useGroupBy { - const pluginName = 'useGroupBy'; -} +// export namespace useGroupBy { +// const pluginName = 'useGroupBy'; +// } export interface TableGroupByToggleProps { title?: string | undefined; @@ -937,13 +945,13 @@ export type AggregatedValue = any; //#endregion //#region usePagination -export function usePagination = {}>( +export declare function usePagination = {}>( hooks: Hooks, ): void; -export namespace usePagination { - const pluginName = 'usePagination'; -} +// export namespace usePagination { +// const pluginName = 'usePagination'; +// } export type UsePaginationOptions> = Partial<{ pageCount: number; @@ -972,13 +980,13 @@ export interface UsePaginationInstanceProps> { //#endregion //#region useResizeColumns -export function useResizeColumns = {}>( - hooks: Hooks, -): void; +export declare function useResizeColumns< + D extends Record = {}, +>(hooks: Hooks): void; -export namespace useResizeColumns { - const pluginName = 'useResizeColumns'; -} +// export namespace useResizeColumns { +// const pluginName = 'useResizeColumns'; +// } export interface UseResizeColumnsOptions> { disableResizing?: boolean | undefined; @@ -1014,13 +1022,13 @@ export interface UseResizeColumnsColumnProps< //#endregion //#region useRowSelect -export function useRowSelect = {}>( +export declare function useRowSelect = {}>( hooks: Hooks, ): void; -export namespace useRowSelect { - const pluginName = 'useRowSelect'; -} +// export namespace useRowSelect { +// const pluginName = 'useRowSelect'; +// } export interface TableToggleAllRowsSelectedProps extends TableToggleCommonProps {} @@ -1072,13 +1080,13 @@ export interface UseRowSelectRowProps> { //#endregion //#region useRowState -export function useRowState = {}>( +export declare function useRowState = {}>( hooks: Hooks, ): void; -export namespace useRowState { - const pluginName = 'useRowState'; -} +// export namespace useRowState { +// const pluginName = 'useRowState'; +// } export type UseRowStateOptions> = Partial<{ initialRowStateAccessor: (row: Row) => UseRowStateLocalState; @@ -1117,13 +1125,13 @@ export type UseRowStateLocalState< //#endregion //#region useSortBy -export function useSortBy = {}>( +export declare function useSortBy = {}>( hooks: Hooks, ): void; -export namespace useSortBy { - const pluginName = 'useSortBy'; -} +// export namespace useSortBy { +// const pluginName = 'useSortBy'; +// } export interface TableSortByToggleProps { title?: string | undefined; @@ -1215,9 +1223,9 @@ export interface SortingRule { //#endregion // Additional API -export const actions: Record; +export declare const actions: Record; export type ActionType = { type: string } & Record; -export const defaultColumn: Partial & Record; +export declare const defaultColumn: Partial & Record; // Helpers export type StringKey = Extract; @@ -1239,56 +1247,54 @@ export interface PluginHook> { export type TableDispatch = (action: A) => void; // utils -export function defaultOrderByFn = {}>( +export declare function defaultOrderByFn< + D extends Record = {}, +>( arr: Array>, funcs: Array>, dirs: boolean[], ): Array>; -export function defaultGroupByFn = {}>( - rows: Array>, - columnId: IdType, -): Record>>; +export declare function defaultGroupByFn< + D extends Record = {}, +>(rows: Array>, columnId: IdType): Record>>; -export function makePropGetter(hooks: Hooks, ...meta: any[]): any; +export declare function makePropGetter(hooks: Hooks, ...meta: any[]): any; -export function reduceHooks( +export declare function reduceHooks( hooks: Hooks, initial: T, ...args: any[] ): T; -export function loopHooks(hooks: Hooks, ...args: any[]): void; +export declare function loopHooks(hooks: Hooks, ...args: any[]): void; -export function ensurePluginOrder = {}>( - plugins: Array>, - befores: string[], - pluginName: string, -): void; +export declare function ensurePluginOrder< + D extends Record = {}, +>(plugins: Array>, befores: string[], pluginName: string): void; -export function functionalUpdate = {}>( - updater: any, - old: Partial>, -): Partial>; +export declare function functionalUpdate< + D extends Record = {}, +>(updater: any, old: Partial>): Partial>; -export function useGetLatest(obj: T): () => T; +export declare function useGetLatest(obj: T): () => T; -export function safeUseLayoutEffect( +export declare function safeUseLayoutEffect( effect: EffectCallback, deps?: DependencyList, ): void; -export function useMountedLayoutEffect( +export declare function useMountedLayoutEffect( effect: EffectCallback, deps?: DependencyList, ): void; -export function useAsyncDebounce any>( +export declare function useAsyncDebounce any>( defaultFn: F, defaultWait?: number, ): F; -export function makeRenderer( +export declare function makeRenderer( instance: TableInstance, column: ColumnInstance, meta?: any, diff --git a/packages/itwinui-react/tsconfig.json b/packages/itwinui-react/tsconfig.json index 66858865965..8dbdc6a6c58 100644 --- a/packages/itwinui-react/tsconfig.json +++ b/packages/itwinui-react/tsconfig.json @@ -24,7 +24,7 @@ "baseUrl": ".", "paths": { // Since we don't depend on `@types/react-table`, we need to provide the types for it. - "react-table": ["src/core/Table/types/react-table-types.d.ts"] + "react-table": ["src/core/Table/types/react-table-types.ts"] } }, "exclude": ["node_modules", "cjs/**/*", "esm/**/*"] From 7bb6598c0201ea316a5b9da2f655e866a146ca1c Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Tue, 5 Sep 2023 12:49:25 -0400 Subject: [PATCH 112/196] Testing change --- playgrounds/vite/src/App.tsx | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/playgrounds/vite/src/App.tsx b/playgrounds/vite/src/App.tsx index 308ffd82cc0..0faf0eaad56 100644 --- a/playgrounds/vite/src/App.tsx +++ b/playgrounds/vite/src/App.tsx @@ -1,6 +1,23 @@ -import { Button } from '@itwin/itwinui-react'; +import { Button, Table, TableTypes } from '@itwin/itwinui-react'; const App = () => { + const columns: TableTypes.Column<{ + header1: string; + header2: string; + }>[] = [ + { + Header: 'Header 1', + accessor: 'header1', + }, + { + Header: 'Header 2', + accessor: 'header2', + }, + ] as TableTypes.Column<{ + header1: string; + header2: string; + }>[]; + return ( <> From 4194d209a67c0f0acda1508dbe65507ada2bbb7b Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Tue, 5 Sep 2023 13:09:31 -0400 Subject: [PATCH 113/196] Undid testing change --- playgrounds/vite/src/App.tsx | 19 +------------------ 1 file changed, 1 insertion(+), 18 deletions(-) diff --git a/playgrounds/vite/src/App.tsx b/playgrounds/vite/src/App.tsx index 0faf0eaad56..308ffd82cc0 100644 --- a/playgrounds/vite/src/App.tsx +++ b/playgrounds/vite/src/App.tsx @@ -1,23 +1,6 @@ -import { Button, Table, TableTypes } from '@itwin/itwinui-react'; +import { Button } from '@itwin/itwinui-react'; const App = () => { - const columns: TableTypes.Column<{ - header1: string; - header2: string; - }>[] = [ - { - Header: 'Header 1', - accessor: 'header1', - }, - { - Header: 'Header 2', - accessor: 'header2', - }, - ] as TableTypes.Column<{ - header1: string; - header2: string; - }>[]; - return ( <> From fc3cfb5c8898906b8be524f71f46c4efd021f7b5 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Tue, 5 Sep 2023 13:13:42 -0400 Subject: [PATCH 114/196] Replaced default top of file comments with custom comments attributing @ types/react-table --- .../src/core/Table/types/react-table-types.ts | 29 ++----------------- 1 file changed, 2 insertions(+), 27 deletions(-) diff --git a/packages/itwinui-react/src/core/Table/types/react-table-types.ts b/packages/itwinui-react/src/core/Table/types/react-table-types.ts index cbc364da933..b052eaa8e0e 100644 --- a/packages/itwinui-react/src/core/Table/types/react-table-types.ts +++ b/packages/itwinui-react/src/core/Table/types/react-table-types.ts @@ -6,24 +6,9 @@ /* eslint-disable @typescript-eslint/no-unused-vars */ /* eslint-disable @typescript-eslint/no-empty-interface */ /* eslint-disable @typescript-eslint/ban-types */ -// Type definitions for react-table 7.7 -// Project: https://github.com/tannerlinsley/react-table -// Definitions by: Guy Gascoigne-Piggford , -// Rohit Garg -// Jason Clark -// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped -// TypeScript Version: 3.5 -// reflects react-table@7.7.0 -// tslint:disable:no-empty-interface -// no-empty-interface is disabled to allow easy extension with declaration merging - -// TODO: Find out why the below line was giving an error -// /* eslint-disable @definitelytyped/no-unnecessary-generics */ -// no-unnecessary-generics is disabled because many of these definitions are either used in a generic -// context or the signatures are required to match for declaration merging - -// The changelog for the important changes is located in the Readme.md +// This file is a hard fork of @types/react-table v7 +// The original code is licensed under MIT - https://unpkg.com/browse/@types/react-table@7.7.15/LICENSE import type { ChangeEvent, @@ -39,16 +24,6 @@ import type { import type { TableFilterProps } from '../index.js'; -/** - * The empty definitions of below provides a base definition for the parts used by useTable, that can then be extended in the users code. - * - * @example - * export interface TableOptions = {}}> - * extends - * UseExpandedOptions, - * UseFiltersOptions {} - * see https://gist.github.com/ggascoigne/646e14c9d54258e40588a13aabf0102d for more details - */ export interface TableOptions> extends Omit, 'data' | 'columns'>, UseRowSelectOptions, From 61137eae6d0aae0e6d174f99727859c26d63b6e0 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Tue, 5 Sep 2023 13:14:49 -0400 Subject: [PATCH 115/196] Changed code divider comment's style --- .../itwinui-react/src/core/Table/types/react-table-types.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/itwinui-react/src/core/Table/types/react-table-types.ts b/packages/itwinui-react/src/core/Table/types/react-table-types.ts index b052eaa8e0e..916e550f543 100644 --- a/packages/itwinui-react/src/core/Table/types/react-table-types.ts +++ b/packages/itwinui-react/src/core/Table/types/react-table-types.ts @@ -1275,7 +1275,7 @@ export declare function makeRenderer( meta?: any, ): ReactElement; -////////////////////////////////////////////////////////////////////////////////////////////////// +//------------------------------------------------------------------------------- // Custom Additions (parts from the old file called react-table-config.ts) export type FieldType = 'text' | 'number' | 'date' | string; From 0f47a7a6f6b7f85f63c0e9e057f2195d2a2f0a91 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Tue, 5 Sep 2023 13:23:05 -0400 Subject: [PATCH 116/196] Added few reasons for hard fork of @ types/react-table --- .../itwinui-react/src/core/Table/types/react-table-types.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/itwinui-react/src/core/Table/types/react-table-types.ts b/packages/itwinui-react/src/core/Table/types/react-table-types.ts index 916e550f543..2efb1d2467d 100644 --- a/packages/itwinui-react/src/core/Table/types/react-table-types.ts +++ b/packages/itwinui-react/src/core/Table/types/react-table-types.ts @@ -9,6 +9,10 @@ // This file is a hard fork of @types/react-table v7 // The original code is licensed under MIT - https://unpkg.com/browse/@types/react-table@7.7.15/LICENSE +// A few reasons for this hard fork are: +// - iTwinUI Table does not offer all the functionality that `react-table` offers. (no nested columns) +// - `@types/react-table` expects row data to extend `object`. However, iTwinUI Table's expects row data to extend `Record`. +// - This gave type errors like: `Type Record is not assignable to type TableStoryDataType.` import type { ChangeEvent, From fd13f3a3118e7055507b016fa99aad0624d9da51 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Tue, 5 Sep 2023 18:57:53 -0400 Subject: [PATCH 117/196] Change storybook types "test" to "build" --- apps/storybook/.gitignore | 3 +++ apps/storybook/package.json | 6 ++---- apps/storybook/tsconfig.build.json | 13 +++++++++++++ apps/storybook/tsconfig.test.json | 5 ----- 4 files changed, 18 insertions(+), 9 deletions(-) create mode 100644 apps/storybook/tsconfig.build.json delete mode 100644 apps/storybook/tsconfig.test.json diff --git a/apps/storybook/.gitignore b/apps/storybook/.gitignore index d7929a6c854..beb9d1edcfa 100644 --- a/apps/storybook/.gitignore +++ b/apps/storybook/.gitignore @@ -4,3 +4,6 @@ cypress-visual-screenshots/comparison cypress-visual-screenshots/diff cypress-visual-report cypress/screenshots + +# Compiled files +dist diff --git a/apps/storybook/package.json b/apps/storybook/package.json index 7819b22852a..fe3cd90c30e 100644 --- a/apps/storybook/package.json +++ b/apps/storybook/package.json @@ -34,12 +34,10 @@ "vite": "^4.1.5" }, "scripts": { - "build": "dotenv -v NODE_OPTIONS=\"--max-old-space-size=4096\" sb build", + "build": "tsc -p tsconfig.build.json && dotenv -v NODE_OPTIONS=\"--max-old-space-size=4096\" sb build", "dev": "sb dev -p 6006 --no-open --quiet", "lint": "eslint \"**/*.{ts,tsx}\" --max-warnings=0", - "test": "yarn test:visual && yarn test:types", - "test:visual": "node scripts/run-tests.js", - "test:types": "tsc -p tsconfig.test.json --noEmit", + "test": "yarn test:visual", "approve": "cypress-image-diff -u", "cy": "cypress open", "cy:run": "cypress run", diff --git a/apps/storybook/tsconfig.build.json b/apps/storybook/tsconfig.build.json new file mode 100644 index 00000000000..b3d4ab66b0e --- /dev/null +++ b/apps/storybook/tsconfig.build.json @@ -0,0 +1,13 @@ +{ + "$schema": "https://json.schemastore.org/tsconfig", + "extends": "./tsconfig.json", + + // Temporarily testing only Table.stories.tsx. + // TODO: Fix all tsc errors in all stories and then include all stories. + "include": [], + "files": ["src/Table.stories.tsx"], + + "compilerOptions": { + "outDir": "dist" + } +} diff --git a/apps/storybook/tsconfig.test.json b/apps/storybook/tsconfig.test.json deleted file mode 100644 index e93366b265b..00000000000 --- a/apps/storybook/tsconfig.test.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "extends": "./tsconfig.json", - "include": [], - "files": ["src/Table.stories.tsx"] -} From 8fe0b0f600841568df375199651cf4aec81187f4 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Tue, 5 Sep 2023 19:09:10 -0400 Subject: [PATCH 118/196] Fixed type errors in Table.stories.tsx --- apps/storybook/src/Table.stories.tsx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/apps/storybook/src/Table.stories.tsx b/apps/storybook/src/Table.stories.tsx index 9279648ba39..fe3e25c394a 100644 --- a/apps/storybook/src/Table.stories.tsx +++ b/apps/storybook/src/Table.stories.tsx @@ -42,6 +42,7 @@ import { SvgStatusSuccess, SvgStatusWarning, } from '@itwin/itwinui-icons-react'; +import { StoryFn } from '@storybook/react'; export default { title: 'Core/Table', @@ -1249,7 +1250,6 @@ export const ControlledState = () => { TableTypes.TableOptions['getRowId'] > } - {...args} data={data} /> @@ -1370,7 +1370,7 @@ export const Full = () => { enableColumnReordering /> @@ -1650,7 +1650,7 @@ export const Localized = () => { }; Localized.decorators = [ - (Story) => ( + (Story: StoryFn) => (
@@ -1928,7 +1928,7 @@ export const WithPaginator = () => { }; WithPaginator.decorators = [ - (Story) => ( + (Story: StoryFn) => (
@@ -2137,7 +2137,7 @@ export const WithManualPaginatorAndFilter = () => { }; WithManualPaginatorAndFilter.decorators = [ - (Story) => ( + (Story: StoryFn) => (
@@ -2295,7 +2295,7 @@ export const CustomFilter = () => { }; CustomFilter.decorators = [ - (Story) => ( + (Story: StoryFn) => (
@@ -2627,7 +2627,7 @@ export const HorizontalScroll = () => { }; HorizontalScroll.decorators = [ - (Story) => ( + (Story: StoryFn) => (
{ }; StickyColumns.decorators = [ - (Story) => ( + (Story: StoryFn) => (
Date: Tue, 5 Sep 2023 23:50:51 -0400 Subject: [PATCH 119/196] Working exposing table entry point --- packages/itwinui-react/package.json | 10 ++++++++++ packages/itwinui-react/src/table/index.ts | 4 ++++ packages/itwinui-react/tsconfig.build.json | 2 +- playgrounds/vite/src/App.tsx | 6 ++++++ playgrounds/vite/tsconfig.json | 4 ++-- 5 files changed, 23 insertions(+), 3 deletions(-) create mode 100644 packages/itwinui-react/src/table/index.ts diff --git a/packages/itwinui-react/package.json b/packages/itwinui-react/package.json index a06c2656d3b..a0a5fc772dd 100644 --- a/packages/itwinui-react/package.json +++ b/packages/itwinui-react/package.json @@ -18,6 +18,16 @@ "default": "./cjs/index.js" } }, + "./table": { + "import": { + "types": "./esm/table/index.d.ts", + "default": "./esm/table/index.js" + }, + "require": { + "types": "./cjs/table/index.d.ts", + "default": "./cjs/table/index.js" + } + }, "./styles.css": "./styles.css", "./cjs": "./cjs/index.js", "./esm": "./esm/index.js", diff --git a/packages/itwinui-react/src/table/index.ts b/packages/itwinui-react/src/table/index.ts new file mode 100644 index 00000000000..bd5dd518443 --- /dev/null +++ b/packages/itwinui-react/src/table/index.ts @@ -0,0 +1,4 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Bentley Systems, Incorporated. All rights reserved. + * See LICENSE.md in the project root for license terms and full copyright notice. + *--------------------------------------------------------------------------------------------*/ diff --git a/packages/itwinui-react/tsconfig.build.json b/packages/itwinui-react/tsconfig.build.json index 8037e438341..58a94ac0860 100644 --- a/packages/itwinui-react/tsconfig.build.json +++ b/packages/itwinui-react/tsconfig.build.json @@ -1,6 +1,6 @@ { "extends": "./tsconfig.json", - "files": ["src/index.ts"], + "files": ["src/index.ts", "src/table/index.ts"], "compilerOptions": { "noUnusedLocals": false, "importHelpers": true diff --git a/playgrounds/vite/src/App.tsx b/playgrounds/vite/src/App.tsx index 308ffd82cc0..25af9d2d23f 100644 --- a/playgrounds/vite/src/App.tsx +++ b/playgrounds/vite/src/App.tsx @@ -1,6 +1,12 @@ import { Button } from '@itwin/itwinui-react'; +import { TableTrial } from '@itwin/itwinui-react/table'; +// import { Anchor } from '@itwin/itwinui-react/cjs'; +// import { Badge } from '@itwin/itwinui-react/esm'; +// import { } from '@itwin/itwinui-react/table'; const App = () => { + console.log(TableTrial); + return ( <> diff --git a/playgrounds/vite/tsconfig.json b/playgrounds/vite/tsconfig.json index 3d0a51a86e2..3328f7e546c 100644 --- a/playgrounds/vite/tsconfig.json +++ b/playgrounds/vite/tsconfig.json @@ -9,8 +9,8 @@ "allowSyntheticDefaultImports": true, "strict": true, "forceConsistentCasingInFileNames": true, - "module": "ESNext", - "moduleResolution": "Node", + "module": "NodeNext", + "moduleResolution": "NodeNext", "resolveJsonModule": true, "isolatedModules": true, "noEmit": true, From 89bf4fe2f3ba50faeb813af7ca1d5498ab853d36 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Wed, 6 Sep 2023 06:40:26 -0400 Subject: [PATCH 120/196] Created a new endpoint called table --- packages/itwinui-react/src/core/Table/index.ts | 2 -- packages/itwinui-react/src/core/Table/types/index.ts | 5 ----- packages/itwinui-react/src/core/index.ts | 1 - packages/itwinui-react/src/table/index.ts | 1 + .../{core/Table/types => table}/react-table-types.test.tsx | 0 .../src/{core/Table/types => table}/react-table-types.ts | 2 +- packages/itwinui-react/tsconfig.json | 2 +- 7 files changed, 3 insertions(+), 10 deletions(-) delete mode 100644 packages/itwinui-react/src/core/Table/types/index.ts rename packages/itwinui-react/src/{core/Table/types => table}/react-table-types.test.tsx (100%) rename packages/itwinui-react/src/{core/Table/types => table}/react-table-types.ts (99%) diff --git a/packages/itwinui-react/src/core/Table/index.ts b/packages/itwinui-react/src/core/Table/index.ts index 09d52c28cc4..96af7755eab 100644 --- a/packages/itwinui-react/src/core/Table/index.ts +++ b/packages/itwinui-react/src/core/Table/index.ts @@ -5,8 +5,6 @@ export { Table } from './Table.js'; export type { TableProps, TablePaginatorRendererProps } from './Table.js'; -export type { TableTypes } from './types/index.js'; - export { BaseFilter, FilterButtonBar, tableFilters } from './filters/index.js'; export type { BaseFilterProps, diff --git a/packages/itwinui-react/src/core/Table/types/index.ts b/packages/itwinui-react/src/core/Table/types/index.ts deleted file mode 100644 index d173bd2ee62..00000000000 --- a/packages/itwinui-react/src/core/Table/types/index.ts +++ /dev/null @@ -1,5 +0,0 @@ -/*--------------------------------------------------------------------------------------------- - * Copyright (c) Bentley Systems, Incorporated. All rights reserved. - * See LICENSE.md in the project root for license terms and full copyright notice. - *--------------------------------------------------------------------------------------------*/ -export type * as TableTypes from './react-table-types.js'; diff --git a/packages/itwinui-react/src/core/index.ts b/packages/itwinui-react/src/core/index.ts index 4fa13cbed73..d606edd7133 100644 --- a/packages/itwinui-react/src/core/index.ts +++ b/packages/itwinui-react/src/core/index.ts @@ -159,7 +159,6 @@ export type { TableFilterValue, DateRangeFilterOptions, TablePaginatorRendererProps, - TableTypes, TableProps, } from './Table/index.js'; diff --git a/packages/itwinui-react/src/table/index.ts b/packages/itwinui-react/src/table/index.ts index bd5dd518443..b2850816126 100644 --- a/packages/itwinui-react/src/table/index.ts +++ b/packages/itwinui-react/src/table/index.ts @@ -2,3 +2,4 @@ * Copyright (c) Bentley Systems, Incorporated. All rights reserved. * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ +export type * from './index.js'; diff --git a/packages/itwinui-react/src/core/Table/types/react-table-types.test.tsx b/packages/itwinui-react/src/table/react-table-types.test.tsx similarity index 100% rename from packages/itwinui-react/src/core/Table/types/react-table-types.test.tsx rename to packages/itwinui-react/src/table/react-table-types.test.tsx diff --git a/packages/itwinui-react/src/core/Table/types/react-table-types.ts b/packages/itwinui-react/src/table/react-table-types.ts similarity index 99% rename from packages/itwinui-react/src/core/Table/types/react-table-types.ts rename to packages/itwinui-react/src/table/react-table-types.ts index 2efb1d2467d..dfa96005059 100644 --- a/packages/itwinui-react/src/core/Table/types/react-table-types.ts +++ b/packages/itwinui-react/src/table/react-table-types.ts @@ -26,7 +26,7 @@ import type { ReactNode, } from 'react'; -import type { TableFilterProps } from '../index.js'; +import type { TableFilterProps } from '../core/Table/index.js'; export interface TableOptions> extends Omit, 'data' | 'columns'>, diff --git a/packages/itwinui-react/tsconfig.json b/packages/itwinui-react/tsconfig.json index 8dbdc6a6c58..3adaf474540 100644 --- a/packages/itwinui-react/tsconfig.json +++ b/packages/itwinui-react/tsconfig.json @@ -24,7 +24,7 @@ "baseUrl": ".", "paths": { // Since we don't depend on `@types/react-table`, we need to provide the types for it. - "react-table": ["src/core/Table/types/react-table-types.ts"] + "react-table": ["src/table/react-table-types.ts"] } }, "exclude": ["node_modules", "cjs/**/*", "esm/**/*"] From 2b7e17570e8ceeb6e66822d279b852e6db051cd6 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Wed, 6 Sep 2023 07:38:14 -0400 Subject: [PATCH 121/196] Removed TableProps export --- packages/itwinui-react/src/core/Table/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/itwinui-react/src/core/Table/index.ts b/packages/itwinui-react/src/core/Table/index.ts index 96af7755eab..997c3a74d18 100644 --- a/packages/itwinui-react/src/core/Table/index.ts +++ b/packages/itwinui-react/src/core/Table/index.ts @@ -3,7 +3,7 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ export { Table } from './Table.js'; -export type { TableProps, TablePaginatorRendererProps } from './Table.js'; +export type { TablePaginatorRendererProps } from './Table.js'; export { BaseFilter, FilterButtonBar, tableFilters } from './filters/index.js'; export type { From 24399521fa14e4807b2d5da48608eb6f02119b39 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Wed, 6 Sep 2023 08:00:59 -0400 Subject: [PATCH 122/196] Fixed Table storybook type errors --- apps/storybook/src/Table.stories.tsx | 10 ++++++---- apps/storybook/tsconfig.json | 3 ++- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/apps/storybook/src/Table.stories.tsx b/apps/storybook/src/Table.stories.tsx index fe3e25c394a..b36a7c1fefb 100644 --- a/apps/storybook/src/Table.stories.tsx +++ b/apps/storybook/src/Table.stories.tsx @@ -28,10 +28,9 @@ import { } from '@itwin/itwinui-react'; import type { TableFilterValue, - TableProps, - TableTypes, TablePaginatorRendererProps, } from '@itwin/itwinui-react'; +import * as TableTypes from '@itwin/itwinui-react/table'; import { useMemo, useState } from '@storybook/addons'; import { action } from '@storybook/addon-actions'; import { @@ -44,6 +43,9 @@ import { } from '@itwin/itwinui-icons-react'; import { StoryFn } from '@storybook/react'; +type TableProps = Record> = + React.ComponentProps>; + export default { title: 'Core/Table', component: Table, @@ -1101,7 +1103,7 @@ export const ControlledState = () => { }, ], [], - ); + ) satisfies TableTypes.Column[]; const data: DemoData[] = useMemo( () => [ @@ -2399,7 +2401,7 @@ export const ResizableColumns = () => { ); const [columnResizeMode, setColumnResizeMode] = - React.useState('fit'); + React.useState['columnResizeMode']>('fit'); return ( <> diff --git a/apps/storybook/tsconfig.json b/apps/storybook/tsconfig.json index ef8d4d912ca..ba5f00a2a92 100644 --- a/apps/storybook/tsconfig.json +++ b/apps/storybook/tsconfig.json @@ -9,7 +9,8 @@ "sourceMap": false, "allowJs": false, "jsx": "react", - "moduleResolution": "node", + "module": "Node16", + "moduleResolution": "Node16", "traceResolution": false, "forceConsistentCasingInFileNames": true, "noImplicitReturns": true, From 2d0a0e5f0b988cf9003c46f5f2ccdaa9876be37c Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Wed, 6 Sep 2023 08:10:03 -0400 Subject: [PATCH 123/196] Small Table story type improvements --- apps/storybook/src/Table.stories.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/storybook/src/Table.stories.tsx b/apps/storybook/src/Table.stories.tsx index b36a7c1fefb..76d56800258 100644 --- a/apps/storybook/src/Table.stories.tsx +++ b/apps/storybook/src/Table.stories.tsx @@ -450,7 +450,7 @@ export const Filters = () => { ( filters: TableFilterValue[], state: TableTypes.TableState, - filteredData: TableTypes.Row<{ name: string; description: string }>[], + filteredData: TableTypes.Row[], ) => { // rowInfo is used due to JSON errors when displaying row data let rowInfo = '['; @@ -466,7 +466,7 @@ export const Filters = () => { )(); }, [], - ); + ) satisfies NonNullable['onFilter']>; return (
Date: Wed, 6 Sep 2023 09:11:31 -0400 Subject: [PATCH 124/196] Added a complex Table example --- .../src/table/react-table-types.test.tsx | 593 ++++++++++++++++-- 1 file changed, 544 insertions(+), 49 deletions(-) diff --git a/packages/itwinui-react/src/table/react-table-types.test.tsx b/packages/itwinui-react/src/table/react-table-types.test.tsx index d337053e3f2..74f8ba1df3d 100644 --- a/packages/itwinui-react/src/table/react-table-types.test.tsx +++ b/packages/itwinui-react/src/table/react-table-types.test.tsx @@ -11,16 +11,39 @@ /* eslint-disable @typescript-eslint/no-unused-vars */ /* eslint-disable @typescript-eslint/ban-ts-comment */ -import { Table } from '../index.js'; - -// TableTypes should be imported as a type-only import. -// @ts-expect-error (TS 1485) - 'TableTypes' resolves to a type-only declaration and must be imported using a type-only import when 'verbatimModuleSyntax' is enabled. -import { TableTypes as _TableTypes } from '../index.js'; -import type { TableTypes } from '../index.js'; +import { + ActionColumn, + Table, + TablePaginator, + tableFilters, + EditableCell, + DefaultCell, + SelectionColumn, + ExpanderColumn, +} from '../core/Table/index.js'; +import type { + TableFilterValue, + TablePaginatorRendererProps, +} from '../core/Table/index.js'; +// Table types can be imported with an alias or selective types can be imported too. +import * as TableTypes from 'react-table'; import type { Column } from 'react-table'; +type TableProps = Record> = + React.ComponentProps>; + import React from 'react'; +import { + Anchor, + DropdownMenu, + IconButton, + Input, + MenuItem, + Text, + Tooltip, +} from 'src/core/index.js'; +import { SvgMore } from 'src/core/utils/index.js'; /** * Confirm that `satisfies` on columns does not give any unnecessary type errors. @@ -80,48 +103,7 @@ import React from 'react'; }; /** - * To test that passing other props to `Table` do not give any type errors. - */ -() => { - const columns = [ - { - Header: 'Header 1', - accessor: 'header1', - }, - { - Header: 'Header 2', - accessor: 'header2', - }, - ] satisfies TableTypes.Column<{ - header1: string; - header2: string; - }>[]; - - const data = [ - { - header1: 'row1', - header2: 'row1', - }, - { - header1: 'row2', - header2: 'row2', - }, - ]; - - return ( -
- ); -}; - -/** - * Confirm that `Column` from `react-table` is equivalent to `TableTypes.Column`. + * Confirm that `Column` and `TableTypes.Column` are equivalent. */ () => { const columns1: TableTypes.Column<{ @@ -200,7 +182,7 @@ import React from 'react'; { Header: 'Header 2', accessor: 'header2', - // Cell: + Cell: (props) =>
{props.row.original.header2}
, }, ] satisfies TableTypes.Column<{ header1: string; @@ -268,3 +250,516 @@ import React from 'react'; return
; }; + +/** + * Complex Table example. + */ +() => { + type TableRowDataType = { + index: number; + name: string; + description: string; + ids: string[]; + startDate: Date; + endDate: string; + subRows: TableRowDataType[]; + }; + + const translatedLabels = React.useMemo( + () => ({ + filter: 'Filter', + clear: 'Clear', + from: 'From', + to: 'To', + }), + [], + ); + + const formatter = React.useMemo( + () => + new Intl.DateTimeFormat('en-us', { + month: 'short', + day: 'numeric', + year: 'numeric', + }), + [], + ); + + const formatDate = React.useCallback( + (date: Date) => { + return formatter.format(date); + }, + [formatter], + ); + + const menuItems = React.useCallback((close: () => void) => { + return [ + close()}> + Edit + , + close()}> + Delete + , + ]; + }, []); + + const isRowDisabled = React.useCallback( + (rowData: { name: string; description: string }) => { + return rowData.name === 'Name2'; + }, + [], + ); + const isCheckboxDisabled = React.useCallback( + (rowData: (typeof data)[number]) => { + return rowData.name === 'Name1'; + }, + [], + ); + const isExpanderDisabled = React.useCallback( + (rowData: (typeof data)[number]) => { + return rowData.name === 'Name2'; + }, + [], + ); + const isCellDisabled = React.useCallback((rowData: (typeof data)[number]) => { + return rowData.name === 'Name3'; + }, []); + + const onCellEdit = React.useCallback( + (columnId: string, value: string, rowData: TableRowDataType) => { + console.log({ columnId, value, rowData }); + }, + [], + ); + + const cellRenderer = React.useCallback( + (props: TableTypes.CellRendererProps) => ( + <> + {!isRowDisabled(props.cellProps.row.original) && + props.cellProps.value !== 'Fetching...' ? ( + + ) : ( + + isCellDisabled(rowData) || isRowDisabled(rowData) + } + /> + )} + + ), + [isCellDisabled, isRowDisabled, onCellEdit], + ); + + const expandedSubComponent = React.useCallback( + (row: TableTypes.Row) => ( +
+ Extra information +
+          {JSON.stringify({ values: row.values }, null, 2)}
+        
+
+ ), + [], + ); + + const columns = React.useMemo( + () => [ + SelectionColumn({ + isDisabled: isCheckboxDisabled, + }), + ExpanderColumn({ + subComponent: expandedSubComponent, + isDisabled: isExpanderDisabled, + }), + { + id: 'index', + Header: '#', + accessor: 'index', + width: 80, + fieldType: 'number', + Filter: tableFilters.NumberRangeFilter(translatedLabels), + filter: 'between', + disableToggleVisibility: true, + sticky: 'left', + }, + { + id: 'name', + Header: 'Name', + accessor: 'name', + fieldType: 'text', + cellRenderer, + Filter: tableFilters.TextFilter(translatedLabels), + disableReordering: true, + }, + { + id: 'description', + Header: 'Description', + accessor: 'description', + fieldType: 'text', + Filter: tableFilters.TextFilter(translatedLabels), + maxWidth: 200, + }, + { + id: 'ids', + Header: 'IDs (enter one of the IDs in the filter)', + accessor: 'ids', + Cell: (props: TableTypes.CellProps) => { + return <>{props.row.original.ids.join(', ')}; + }, + Filter: tableFilters.TextFilter(translatedLabels), + filter: 'includes', + minWidth: 200, + }, + { + id: 'startDate', + Header: 'Start date', + accessor: 'startDate', + Cell: (props: TableTypes.CellProps) => { + return <>{formatDate(props.row.original.startDate)}; + }, + Filter: tableFilters.DateRangeFilter({ + translatedLabels, + }), + filter: 'betweenDate', + }, + { + id: 'endDate', + Header: 'End date', + // Converting string to Date for filtering + accessor: (rowData) => new Date(rowData.endDate), + Cell: (props: TableTypes.CellProps) => { + return <>{formatDate(new Date(props.row.original.endDate))}; + }, + Filter: tableFilters.DateRangeFilter({ + translatedLabels, + }), + filter: 'betweenDate', + }, + { + id: 'click-me', + Header: 'Click', + width: 100, + Cell: ( + props: TableTypes.CellProps<{ name: string; description: string }>, + ) => { + return ( + { + e.stopPropagation(); // prevent row selection when clicking on link + console.log(props.row.original.name); + + onClickHandler(props); + }} + > + Click me! + + ); + }, + disableResizing: true, + }, + { + ...ActionColumn({ columnManager: true }), + Cell: (props: TableTypes.CellProps) => ( + + e.stopPropagation()} + disabled={isRowDisabled(props.row.original)} + > + + + + ), + sticky: 'right', + }, + ], + [ + isCheckboxDisabled, + expandedSubComponent, + isExpanderDisabled, + translatedLabels, + cellRenderer, + formatDate, + menuItems, + isRowDisabled, + ], + ) satisfies TableTypes.Column[]; + + const data = React.useMemo( + () => [ + { + index: 1, + name: 'Name1', + description: 'Description1', + ids: ['1'], + startDate: new Date('May 1, 2021'), + endDate: '2021-05-31T21:00:00.000Z', + subRows: [ + { + index: 11, + name: 'Name11', + description: 'Description11', + ids: ['11'], + startDate: new Date('May 11, 2021'), + endDate: '2021-05-31T21:00:00.000Z', + subRows: [ + { + index: 111, + name: 'Name111', + description: 'Description111', + ids: ['111'], + startDate: new Date('May 11, 2021'), + endDate: '2021-05-31T21:00:00.000Z', + subRows: [], + }, + ], + }, + ], + }, + { + index: 2, + name: 'Name2', + description: 'Description2', + ids: ['2', '3', '4'], + startDate: new Date('May 2, 2021'), + endDate: '2021-06-01T21:00:00.000Z', + subRows: [ + { + index: 21, + name: 'Name21', + description: 'Description21', + ids: ['21'], + startDate: new Date('May 21, 2021'), + endDate: '2021-06-01T21:00:00.000Z', + subRows: [], + }, + { + index: 22, + name: 'Name22', + description: 'Description22', + ids: ['22'], + startDate: new Date('May 22, 2021'), + endDate: '2021-06-01T21:00:00.000Z', + subRows: [], + }, + ], + }, + { + index: 3, + name: 'Name3', + description: 'Description3', + ids: ['3', '4'], + startDate: new Date('May 3, 2021'), + endDate: '2021-06-02T21:00:00.000Z', + subRows: [], + }, + ], + [], + ) satisfies TableRowDataType[]; + + const onFilter = React.useCallback( + ( + filters: TableFilterValue[], + state: TableTypes.TableState, + filteredData: TableTypes.Row[], + ) => { + // rowInfo is used due to JSON errors when displaying row data + let rowInfo = '['; + filteredData.forEach((row) => { + rowInfo += `${JSON.stringify(row.original)},`; + }); + rowInfo = rowInfo.slice(0, rowInfo.length - 1); + rowInfo += ']'; + + console.log( + `Filter changed. Filters: ${JSON.stringify( + filters, + )}, State: ${JSON.stringify(state)}, Rows: ${rowInfo}`, + ); + }, + [], + ) satisfies NonNullable['onFilter']>; + + const onSelect = React.useCallback( + (rows, state) => + console.log( + `Selected rows: ${JSON.stringify(rows)}, Table state: ${JSON.stringify( + state, + )}`, + ), + [], + ) satisfies NonNullable< + TableProps<{ name: string; description: string }>['onSelect'] + >; + + const onRowClick = React.useCallback( + (event: React.MouseEvent, row: TableTypes.Row) => + console.log(`Row clicked: ${JSON.stringify(row.original)}`), + [], + ); + + const onClickHandler = ( + props: TableTypes.CellProps<{ name: string; description: string }>, + ) => console.log(props.row.original.name); + + const onSort = React.useCallback( + (state) => + console.log(`Sort changed. Table state: ${JSON.stringify(state)}`), + [], + ) satisfies NonNullable< + TableProps<{ name: string; description: string }>['onSort'] + >; + + const onExpand = React.useCallback( + (rows, state) => + console.log( + `Expanded rows: ${JSON.stringify(rows)}. Table state: ${JSON.stringify( + state, + )}`, + ), + [], + ) satisfies NonNullable< + TableProps<{ + name: string; + description: string; + }>['onExpand'] + >; + + const onRowInViewport = React.useCallback((rowData) => { + console.log(`Row in view: ${JSON.stringify(rowData)}`); + }, []) satisfies NonNullable< + TableProps<{ + name: string; + description: string; + }>['onRowInViewport'] + >; + + const rowProps = React.useCallback( + (row: TableTypes.Row<{ name: string; description: string }>) => { + return { + onMouseEnter: () => { + console.log(`Hovered over ${row.original.name}`); + setHoveredRowIndex(row.index); + }, + ref: (el: HTMLDivElement | null) => { + if (el) { + setRowRefMap((r) => { + r[row.index] = el; + return r; + }); + } + }, + }; + }, + [], + ); + + const pageSizeList = React.useMemo(() => [10, 25, 50], []); + const paginator = React.useCallback( + (props: TablePaginatorRendererProps) => ( + `${size} per localized page`, + rangeLabel: ( + startIndex: number, + endIndex: number, + totalRows: number, + isLoading: boolean, + ) => + isLoading + ? `${startIndex}-${endIndex} localized` + : `${startIndex}-${endIndex} of localized ${totalRows}`, + previousPage: 'Previous localized page', + nextPage: 'Next localized page', + goToPageLabel: (page: number) => `Go to localized page ${page}`, + rowsPerPageLabel: 'Rows per localized page', + rowsSelectedLabel: (totalSelectedRowsCount: number) => + `${totalSelectedRowsCount} localized ${ + totalSelectedRowsCount === 1 ? 'row' : 'rows' + } selected`, + }} + /> + ), + [pageSizeList], + ); + + const [globalFilter, setGlobalFilter] = React.useState(''); + const tableInstance = + React.useRef>(); + + const [hoveredRowIndex, setHoveredRowIndex] = React.useState(0); + const [rowRefMap, setRowRefMap] = React.useState>( + {}, + ); + + return ( +
+ ) => + setGlobalFilter(e.target.value) + } + /> +
{ + tableInstance.current = instance; + return newState; + }, []) satisfies NonNullable< + TableTypes.TableOptions['stateReducer'] + > + } + rowProps={rowProps} + paginatorRenderer={paginator} + density='condensed' + // These flags prevent filters and sorting from resetting + autoResetFilters={false} + autoResetSortBy={false} + columnResizeMode='expand' + styleType='zebra-rows' + enableVirtualization + scrollToRow={React.useCallback( + ( + rows: TableTypes.Row[], + data: TableRowDataType[], + ) => rows.findIndex((row) => row.original.index === 1), + [], + )} + /> + + + ); +}; From 28b107e41b603318fdd01bf1053519cb0fa8d590 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Wed, 6 Sep 2023 09:12:06 -0400 Subject: [PATCH 125/196] Corrected export path --- packages/itwinui-react/src/table/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/itwinui-react/src/table/index.ts b/packages/itwinui-react/src/table/index.ts index b2850816126..ca36ef273d6 100644 --- a/packages/itwinui-react/src/table/index.ts +++ b/packages/itwinui-react/src/table/index.ts @@ -2,4 +2,4 @@ * Copyright (c) Bentley Systems, Incorporated. All rights reserved. * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ -export type * from './index.js'; +export type * from './react-table-types.js'; From facf20d01c49acc1de10560f629a6c40f5f51984 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Wed, 6 Sep 2023 09:16:37 -0400 Subject: [PATCH 126/196] Removed incorrect export --- packages/itwinui-react/src/core/index.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/itwinui-react/src/core/index.ts b/packages/itwinui-react/src/core/index.ts index d606edd7133..68d4ff49f19 100644 --- a/packages/itwinui-react/src/core/index.ts +++ b/packages/itwinui-react/src/core/index.ts @@ -159,7 +159,6 @@ export type { TableFilterValue, DateRangeFilterOptions, TablePaginatorRendererProps, - TableProps, } from './Table/index.js'; export { Tag, TagContainer } from './Tag/index.js'; From f26235232f2e612e1e1982ad2367106c8471a1b8 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Wed, 6 Sep 2023 09:18:15 -0400 Subject: [PATCH 127/196] Removed unnecessary comment --- packages/itwinui-react/src/table/react-table-types.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/itwinui-react/src/table/react-table-types.ts b/packages/itwinui-react/src/table/react-table-types.ts index dfa96005059..a30d98d8513 100644 --- a/packages/itwinui-react/src/table/react-table-types.ts +++ b/packages/itwinui-react/src/table/react-table-types.ts @@ -1302,4 +1302,3 @@ export type CellRendererProps = {}> = { */ isDisabled?: (rowData: D) => boolean; }; -// } From d2da820e50d85c916ed00a9152f904dfa58cdfdf Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Wed, 6 Sep 2023 09:47:29 -0400 Subject: [PATCH 128/196] Renamed /table entrypoint to /react-table --- packages/itwinui-react/package.json | 10 +++++----- .../itwinui-react/src/{table => react-table}/index.ts | 0 .../{table => react-table}/react-table-types.test.tsx | 4 ++-- .../src/{table => react-table}/react-table-types.ts | 0 packages/itwinui-react/tsconfig.json | 2 +- 5 files changed, 8 insertions(+), 8 deletions(-) rename packages/itwinui-react/src/{table => react-table}/index.ts (100%) rename packages/itwinui-react/src/{table => react-table}/react-table-types.test.tsx (99%) rename packages/itwinui-react/src/{table => react-table}/react-table-types.ts (100%) diff --git a/packages/itwinui-react/package.json b/packages/itwinui-react/package.json index a0a5fc772dd..513af8202c4 100644 --- a/packages/itwinui-react/package.json +++ b/packages/itwinui-react/package.json @@ -18,14 +18,14 @@ "default": "./cjs/index.js" } }, - "./table": { + "./react-table": { "import": { - "types": "./esm/table/index.d.ts", - "default": "./esm/table/index.js" + "types": "./esm/react-table/index.d.ts", + "default": "./esm/react-table/index.js" }, "require": { - "types": "./cjs/table/index.d.ts", - "default": "./cjs/table/index.js" + "types": "./cjs/react-table/index.d.ts", + "default": "./cjs/react-table/index.js" } }, "./styles.css": "./styles.css", diff --git a/packages/itwinui-react/src/table/index.ts b/packages/itwinui-react/src/react-table/index.ts similarity index 100% rename from packages/itwinui-react/src/table/index.ts rename to packages/itwinui-react/src/react-table/index.ts diff --git a/packages/itwinui-react/src/table/react-table-types.test.tsx b/packages/itwinui-react/src/react-table/react-table-types.test.tsx similarity index 99% rename from packages/itwinui-react/src/table/react-table-types.test.tsx rename to packages/itwinui-react/src/react-table/react-table-types.test.tsx index 74f8ba1df3d..790d4363719 100644 --- a/packages/itwinui-react/src/table/react-table-types.test.tsx +++ b/packages/itwinui-react/src/react-table/react-table-types.test.tsx @@ -27,8 +27,8 @@ import type { } from '../core/Table/index.js'; // Table types can be imported with an alias or selective types can be imported too. -import * as TableTypes from 'react-table'; -import type { Column } from 'react-table'; +import * as TableTypes from 'src/react-table/react-table-types.js'; +import type { Column } from 'src/react-table/react-table-types.js'; type TableProps = Record> = React.ComponentProps>; diff --git a/packages/itwinui-react/src/table/react-table-types.ts b/packages/itwinui-react/src/react-table/react-table-types.ts similarity index 100% rename from packages/itwinui-react/src/table/react-table-types.ts rename to packages/itwinui-react/src/react-table/react-table-types.ts diff --git a/packages/itwinui-react/tsconfig.json b/packages/itwinui-react/tsconfig.json index 3adaf474540..0be2c313a63 100644 --- a/packages/itwinui-react/tsconfig.json +++ b/packages/itwinui-react/tsconfig.json @@ -24,7 +24,7 @@ "baseUrl": ".", "paths": { // Since we don't depend on `@types/react-table`, we need to provide the types for it. - "react-table": ["src/table/react-table-types.ts"] + "react-table": ["src/react-table/react-table-types.ts"] } }, "exclude": ["node_modules", "cjs/**/*", "esm/**/*"] From 0b9f523e602b51df8d556a03f54bfed17e409dd7 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Wed, 6 Sep 2023 10:02:55 -0400 Subject: [PATCH 129/196] Added test to confirm custom Filters don't give type errors --- .../react-table/react-table-types.test.tsx | 34 +++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/packages/itwinui-react/src/react-table/react-table-types.test.tsx b/packages/itwinui-react/src/react-table/react-table-types.test.tsx index 790d4363719..07b0c42c9ff 100644 --- a/packages/itwinui-react/src/react-table/react-table-types.test.tsx +++ b/packages/itwinui-react/src/react-table/react-table-types.test.tsx @@ -251,6 +251,40 @@ import { SvgMore } from 'src/core/utils/index.js'; return
; }; +/** + * Passing custom `Filter` does not produce any type errors. + * (Testing this since custom `Filter`s used to give type errors.) + */ +() => { + const columns = React.useMemo( + () => [ + { + id: 'name', + Header: 'Name', + Filter: tableFilters.TextFilter(), + accessor: 'name', + }, + { + id: 'description', + Header: 'Description', + accessor: 'description', + maxWidth: 200, + }, + ], + [], + ); + + const data = React.useMemo(() => { + return [ + { name: 'Name1', description: 'description' }, + { name: 'Name2', description: 'description' }, + { name: 'Name3', description: 'description' }, + ]; + }, []); + + return
; +}; + /** * Complex Table example. */ From 2c3150234dde397050c5a074d2582de019c9c301 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Wed, 6 Sep 2023 10:09:46 -0400 Subject: [PATCH 130/196] Revert playground --- playgrounds/vite/src/App.tsx | 6 ------ 1 file changed, 6 deletions(-) diff --git a/playgrounds/vite/src/App.tsx b/playgrounds/vite/src/App.tsx index 25af9d2d23f..308ffd82cc0 100644 --- a/playgrounds/vite/src/App.tsx +++ b/playgrounds/vite/src/App.tsx @@ -1,12 +1,6 @@ import { Button } from '@itwin/itwinui-react'; -import { TableTrial } from '@itwin/itwinui-react/table'; -// import { Anchor } from '@itwin/itwinui-react/cjs'; -// import { Badge } from '@itwin/itwinui-react/esm'; -// import { } from '@itwin/itwinui-react/table'; const App = () => { - console.log(TableTrial); - return ( <> From de72f343007df6690cff401ab09e8ad0dce954fe Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Wed, 6 Sep 2023 10:16:29 -0400 Subject: [PATCH 131/196] Leftover from rename /table to /react-table --- apps/storybook/src/Table.stories.tsx | 2 +- packages/itwinui-react/tsconfig.build.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/storybook/src/Table.stories.tsx b/apps/storybook/src/Table.stories.tsx index 76d56800258..32675de8c00 100644 --- a/apps/storybook/src/Table.stories.tsx +++ b/apps/storybook/src/Table.stories.tsx @@ -30,7 +30,7 @@ import type { TableFilterValue, TablePaginatorRendererProps, } from '@itwin/itwinui-react'; -import * as TableTypes from '@itwin/itwinui-react/table'; +import * as TableTypes from '@itwin/itwinui-react/react-table'; import { useMemo, useState } from '@storybook/addons'; import { action } from '@storybook/addon-actions'; import { diff --git a/packages/itwinui-react/tsconfig.build.json b/packages/itwinui-react/tsconfig.build.json index 58a94ac0860..5f3ea9fce3e 100644 --- a/packages/itwinui-react/tsconfig.build.json +++ b/packages/itwinui-react/tsconfig.build.json @@ -1,6 +1,6 @@ { "extends": "./tsconfig.json", - "files": ["src/index.ts", "src/table/index.ts"], + "files": ["src/index.ts", "src/react-table/index.ts"], "compilerOptions": { "noUnusedLocals": false, "importHelpers": true From ddce4b56827709a6b093bc9c78ba7f1dd782a717 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Wed, 6 Sep 2023 12:39:00 -0400 Subject: [PATCH 132/196] Added the fallback react-table file --- packages/itwinui-react/.eslintignore | 4 ++++ packages/itwinui-react/react-table.d.ts | 7 +++++++ 2 files changed, 11 insertions(+) create mode 100644 packages/itwinui-react/react-table.d.ts diff --git a/packages/itwinui-react/.eslintignore b/packages/itwinui-react/.eslintignore index 0033cd845a0..8800c2eb360 100644 --- a/packages/itwinui-react/.eslintignore +++ b/packages/itwinui-react/.eslintignore @@ -6,4 +6,8 @@ dist scripts cjs esm + +# Ignore all .d.ts except ./react-table.d.ts *.d.ts +!/react-table.d.ts + diff --git a/packages/itwinui-react/react-table.d.ts b/packages/itwinui-react/react-table.d.ts new file mode 100644 index 00000000000..a0cc1422b45 --- /dev/null +++ b/packages/itwinui-react/react-table.d.ts @@ -0,0 +1,7 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Bentley Systems, Incorporated. All rights reserved. + * See LICENSE.md in the project root for license terms and full copyright notice. + *--------------------------------------------------------------------------------------------*/ + +// This is a fallback for those using old node versions who cannot resolve @itwin/itwinui-react/react-table to the esm/cjs versions. +export * from './esm/react-table/react-table-types.js'; From 2e5f0a128503559f915e078ec076c2e4e968f1fe Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Wed, 6 Sep 2023 12:39:26 -0400 Subject: [PATCH 133/196] Temp --- packages/itwinui-react/scripts/postBuild_Types.mjs | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/itwinui-react/scripts/postBuild_Types.mjs b/packages/itwinui-react/scripts/postBuild_Types.mjs index ad49487e994..37c67c9bf5f 100644 --- a/packages/itwinui-react/scripts/postBuild_Types.mjs +++ b/packages/itwinui-react/scripts/postBuild_Types.mjs @@ -4,11 +4,15 @@ *--------------------------------------------------------------------------------------------*/ import { exec } from 'node:child_process'; -// Since tsc does not include the react-table-types.d.ts file in the cjs and esm builds, -// we need to copy it manually. +// react-table-types.d.ts created by tsc may not be importable from @itwin/itwinui-react/react-table +// for older node versions. This is because tsconfig requires Node16 for moduleResolution when trying to +// import using the `exports` of @itwin/itwinui-react's package.json. Thus, we need to copy +// react-table-types.d.ts manually to esm/react-table so that older node versions can still import by +// path instead of only by endpoint module resolution. +// https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-7.html#ecmascript-module-support-in-nodejs ['cjs', 'esm'].forEach((buildType) => { exec( - `copyfiles -u 1 src/core/Table/types/react-table-types.d.ts ${buildType}`, + `copyfiles -u 3 src/core/Table/types/react-table-types.d.ts ${buildType}`, (error) => { if (error) { console.error( From 5d92efeb165621f8acec4c48508d2227b8b314a2 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Wed, 6 Sep 2023 12:40:14 -0400 Subject: [PATCH 134/196] Deleted postBuild_types.mjs --- packages/itwinui-react/package.json | 4 +-- .../itwinui-react/scripts/postBuild_Types.mjs | 29 ------------------- 2 files changed, 2 insertions(+), 31 deletions(-) delete mode 100644 packages/itwinui-react/scripts/postBuild_Types.mjs diff --git a/packages/itwinui-react/package.json b/packages/itwinui-react/package.json index 513af8202c4..abeb688dbdf 100644 --- a/packages/itwinui-react/package.json +++ b/packages/itwinui-react/package.json @@ -67,7 +67,7 @@ "build": "yarn clean:build && tsc -p tsconfig.cjs.json && tsc -p tsconfig.esm.json && yarn build:styles && yarn build:post", "build:styles": "vite build src/styles.js", "build:watch": "concurrently \"tsc -p tsconfig.cjs.json --watch\" \"tsc -p tsconfig.esm.json --watch\"", - "build:post": "node ./scripts/postBuild.mjs && node ./scripts/postBuild_Types.mjs", + "build:post": "node ./scripts/postBuild.mjs", "clean:build": "rimraf esm && rimraf cjs", "clean:coverage": "rimraf coverage", "clean": "rimraf .turbo && yarn clean:coverage && yarn clean:build && rimraf node_modules", @@ -81,7 +81,7 @@ "dev": "yarn clean:build && concurrently \"yarn dev:esm\" \"yarn dev:cjs\" \"yarn build:styles --watch\" \"yarn dev:types\"", "dev:esm": "swc src -d esm --watch", "dev:cjs": "swc src -d cjs --watch -C module.type=commonjs", - "dev:types": "node ./scripts/postBuild_Types.mjs && concurrently \"tsc -p tsconfig.cjs.json --emitDeclarationOnly --watch --preserveWatchOutput\" \"tsc -p tsconfig.esm.json --emitDeclarationOnly --watch --preserveWatchOutput\"", + "dev:types": "concurrently \"tsc -p tsconfig.cjs.json --emitDeclarationOnly --watch --preserveWatchOutput\" \"tsc -p tsconfig.esm.json --emitDeclarationOnly --watch --preserveWatchOutput\"", "dev:styles": "yarn build:styles --watch" }, "dependencies": { diff --git a/packages/itwinui-react/scripts/postBuild_Types.mjs b/packages/itwinui-react/scripts/postBuild_Types.mjs deleted file mode 100644 index 37c67c9bf5f..00000000000 --- a/packages/itwinui-react/scripts/postBuild_Types.mjs +++ /dev/null @@ -1,29 +0,0 @@ -/*--------------------------------------------------------------------------------------------- - * Copyright (c) Bentley Systems, Incorporated. All rights reserved. - * See LICENSE.md in the project root for license terms and full copyright notice. - *--------------------------------------------------------------------------------------------*/ -import { exec } from 'node:child_process'; - -// react-table-types.d.ts created by tsc may not be importable from @itwin/itwinui-react/react-table -// for older node versions. This is because tsconfig requires Node16 for moduleResolution when trying to -// import using the `exports` of @itwin/itwinui-react's package.json. Thus, we need to copy -// react-table-types.d.ts manually to esm/react-table so that older node versions can still import by -// path instead of only by endpoint module resolution. -// https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-7.html#ecmascript-module-support-in-nodejs -['cjs', 'esm'].forEach((buildType) => { - exec( - `copyfiles -u 3 src/core/Table/types/react-table-types.d.ts ${buildType}`, - (error) => { - if (error) { - console.error( - `Error copying react-table-types.d.ts to ${buildType} build folder`, - error, - ); - } else { - console.log( - `✓ Finished copying react-table-types.d.ts to ${buildType} build folder`, - ); - } - }, - ); -}); From 22df9d614a022682586ffe31ecf0e060dea8047f Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Wed, 6 Sep 2023 12:41:50 -0400 Subject: [PATCH 135/196] Reverted module and moduleResolution to Node16/NodeNext --- apps/storybook/tsconfig.json | 2 -- playgrounds/vite/tsconfig.json | 4 ++-- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/apps/storybook/tsconfig.json b/apps/storybook/tsconfig.json index ba5f00a2a92..b967eee84ae 100644 --- a/apps/storybook/tsconfig.json +++ b/apps/storybook/tsconfig.json @@ -9,8 +9,6 @@ "sourceMap": false, "allowJs": false, "jsx": "react", - "module": "Node16", - "moduleResolution": "Node16", "traceResolution": false, "forceConsistentCasingInFileNames": true, "noImplicitReturns": true, diff --git a/playgrounds/vite/tsconfig.json b/playgrounds/vite/tsconfig.json index 3328f7e546c..3d0a51a86e2 100644 --- a/playgrounds/vite/tsconfig.json +++ b/playgrounds/vite/tsconfig.json @@ -9,8 +9,8 @@ "allowSyntheticDefaultImports": true, "strict": true, "forceConsistentCasingInFileNames": true, - "module": "NodeNext", - "moduleResolution": "NodeNext", + "module": "ESNext", + "moduleResolution": "Node", "resolveJsonModule": true, "isolatedModules": true, "noEmit": true, From 230b73477716175e772c7206bf0bf4170d4d1536 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Wed, 6 Sep 2023 12:42:53 -0400 Subject: [PATCH 136/196] Revert excess change --- apps/storybook/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/storybook/package.json b/apps/storybook/package.json index fe3cd90c30e..50141bf664d 100644 --- a/apps/storybook/package.json +++ b/apps/storybook/package.json @@ -37,7 +37,7 @@ "build": "tsc -p tsconfig.build.json && dotenv -v NODE_OPTIONS=\"--max-old-space-size=4096\" sb build", "dev": "sb dev -p 6006 --no-open --quiet", "lint": "eslint \"**/*.{ts,tsx}\" --max-warnings=0", - "test": "yarn test:visual", + "test": "node scripts/run-tests.js", "approve": "cypress-image-diff -u", "cy": "cypress open", "cy:run": "cypress run", From d854e1fdf2fea1f7091a13b681242d7a645231e0 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Wed, 6 Sep 2023 12:49:48 -0400 Subject: [PATCH 137/196] Removed copyfiles dep --- packages/itwinui-react/package.json | 1 - yarn.lock | 51 +++-------------------------- 2 files changed, 5 insertions(+), 47 deletions(-) diff --git a/packages/itwinui-react/package.json b/packages/itwinui-react/package.json index fab72e438ff..5eaf76d5c3e 100644 --- a/packages/itwinui-react/package.json +++ b/packages/itwinui-react/package.json @@ -111,7 +111,6 @@ "@typescript-eslint/eslint-plugin": "^5.60.0", "@typescript-eslint/parser": "^5.60.0", "concurrently": "^5.3.0", - "copyfiles": "^2.4.1", "eslint": "^8.43.0", "eslint-config-prettier": "^8.8.0", "eslint-plugin-require-extensions": "^0.1.3", diff --git a/yarn.lock b/yarn.lock index 310de7f0523..4fc740aea99 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6087,19 +6087,6 @@ cookie@0.5.0, cookie@^0.5.0: resolved "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz" integrity sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw== -copyfiles@^2.4.1: - version "2.4.1" - resolved "https://registry.yarnpkg.com/copyfiles/-/copyfiles-2.4.1.tgz#d2dcff60aaad1015f09d0b66e7f0f1c5cd3c5da5" - integrity sha512-fereAvAvxDrQDOXybk3Qu3dPbOoKoysFMWtkY3mv5BsL8//OSZVL5DCLYqgRfY5cWirgRzlC+WSrxp6Bo3eNZg== - dependencies: - glob "^7.0.5" - minimatch "^3.0.3" - mkdirp "^1.0.4" - noms "0.0.0" - through2 "^2.0.1" - untildify "^4.0.0" - yargs "^16.1.0" - core-js-compat@^3.25.1: version "3.28.0" resolved "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.28.0.tgz" @@ -8042,7 +8029,7 @@ glob-to-regexp@^0.4.1: resolved "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz" integrity sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw== -glob@^7.0.0, glob@^7.0.5, glob@^7.1.3, glob@^7.1.4, glob@^7.2.0: +glob@^7.0.0, glob@^7.1.3, glob@^7.1.4, glob@^7.2.0: version "7.2.3" resolved "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz" integrity sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q== @@ -8701,7 +8688,7 @@ inflight@^1.0.4: once "^1.3.0" wrappy "1" -inherits@2, inherits@2.0.4, inherits@^2.0.1, inherits@^2.0.3, inherits@^2.0.4, inherits@~2.0.1, inherits@~2.0.3: +inherits@2, inherits@2.0.4, inherits@^2.0.1, inherits@^2.0.3, inherits@^2.0.4, inherits@~2.0.3: version "2.0.4" resolved "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz" integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ== @@ -9155,11 +9142,6 @@ is-wsl@^2.1.1, is-wsl@^2.2.0: dependencies: is-docker "^2.0.0" -isarray@0.0.1: - version "0.0.1" - resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf" - integrity sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ== - isarray@~1.0.0: version "1.0.0" resolved "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz" @@ -11036,7 +11018,7 @@ min-indent@^1.0.0, min-indent@^1.0.1: resolved "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz" integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg== -minimatch@3.1.2, minimatch@^3.0.2, minimatch@^3.0.3, minimatch@^3.0.4, minimatch@^3.0.5, minimatch@^3.1.1, minimatch@^3.1.2, minimatch@^5.0.1: +minimatch@3.1.2, minimatch@^3.0.2, minimatch@^3.0.4, minimatch@^3.0.5, minimatch@^3.1.1, minimatch@^3.1.2, minimatch@^5.0.1: version "3.1.2" resolved "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz" integrity sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw== @@ -11246,14 +11228,6 @@ node-releases@^2.0.8: resolved "https://registry.npmjs.org/node-releases/-/node-releases-2.0.10.tgz" integrity sha512-5GFldHPXVG/YZmFzJvKK2zDSzPKhEp0+ZR5SVaoSag9fsL5YgHbUHDfnG5494ISANDcK4KwPXAx2xqVEydmd7w== -noms@0.0.0: - version "0.0.0" - resolved "https://registry.yarnpkg.com/noms/-/noms-0.0.0.tgz#da8ebd9f3af9d6760919b27d9cdc8092a7332859" - integrity sha512-lNDU9VJaOPxUmXcLb+HQFeUgQQPtMI24Gt6hgfuMHRJgMRHMF/qZ4HJD3GDru4sSw9IQl2jPjAYnQrdIeLbwow== - dependencies: - inherits "^2.0.1" - readable-stream "~1.0.31" - normalize-package-data@^2.3.2, normalize-package-data@^2.5.0: version "2.5.0" resolved "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz" @@ -12797,16 +12771,6 @@ readable-stream@^3.1.1, readable-stream@^3.4.0, readable-stream@^3.6.0: string_decoder "^1.1.1" util-deprecate "^1.0.1" -readable-stream@~1.0.31: - version "1.0.34" - resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.0.34.tgz#125820e34bc842d2f2aaafafe4c2916ee32c157c" - integrity sha512-ok1qVCJuRkNmvebYikljxJA/UEsKwLl2nI1OmaqAu4/UE+h0wKCHok4XkL/gvi39OacXvw59RJUOFUkDib2rHg== - dependencies: - core-util-is "~1.0.0" - inherits "~2.0.1" - isarray "0.0.1" - string_decoder "~0.10.x" - readable-web-to-node-stream@^3.0.0, readable-web-to-node-stream@^3.0.2: version "3.0.2" resolved "https://registry.yarnpkg.com/readable-web-to-node-stream/-/readable-web-to-node-stream-3.0.2.tgz#5d52bb5df7b54861fd48d015e93a2cb87b3ee0bb" @@ -14020,11 +13984,6 @@ string_decoder@^1.1.1: dependencies: safe-buffer "~5.2.0" -string_decoder@~0.10.x: - version "0.10.31" - resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-0.10.31.tgz#62e203bc41766c6c28c9fc84301dab1c5310fa94" - integrity sha512-ev2QzSzWPYmy9GuqfIVildA4OdcGLeFZQrq5ys6RtiuF+RQQiZWr8TZNyAcuVXyQRYfEO+MsoB/1BuQVhOJuoQ== - string_decoder@~1.1.1: version "1.1.1" resolved "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz" @@ -14458,7 +14417,7 @@ throttleit@^1.0.0: resolved "https://registry.npmjs.org/throttleit/-/throttleit-1.0.0.tgz" integrity sha1-nnhYNtr0Z0MUWlmEtiaNgoUorGw= -through2@^2.0.1, through2@^2.0.3: +through2@^2.0.3: version "2.0.5" resolved "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz" integrity sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ== @@ -15734,7 +15693,7 @@ yargs@^15.1.0: y18n "^4.0.0" yargs-parser "^18.1.2" -yargs@^16.1.0, yargs@^16.2.0: +yargs@^16.2.0: version "16.2.0" resolved "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz" integrity sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw== From e9c27d798ba33b3d7c50d37945e9438d38f93080 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Wed, 6 Sep 2023 12:52:03 -0400 Subject: [PATCH 138/196] Revert yarn.lock --- yarn.lock | 26 +++++++------------------- 1 file changed, 7 insertions(+), 19 deletions(-) diff --git a/yarn.lock b/yarn.lock index 4fc740aea99..2b61547c716 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1273,20 +1273,13 @@ resolved "https://registry.npmjs.org/@babel/regjsgen/-/regjsgen-0.8.0.tgz" integrity sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA== -"@babel/runtime@^7.12.5", "@babel/runtime@^7.17.8", "@babel/runtime@^7.18.3", "@babel/runtime@^7.20.1", "@babel/runtime@^7.3.1", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2": +"@babel/runtime@^7.12.5", "@babel/runtime@^7.17.8", "@babel/runtime@^7.18.3", "@babel/runtime@^7.20.1", "@babel/runtime@^7.3.1", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2": version "7.22.5" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.22.5.tgz#8564dd588182ce0047d55d7a75e93921107b57ec" integrity sha512-ecjvYlnAaZ/KVneE/OdKYBYfgXV3Ptu6zQWmgEF7vwKhQnvVS6bjMD2XYgj+SNvQ1GfK/pjgokfPkC/2CO8CuA== dependencies: regenerator-runtime "^0.13.11" -"@babel/runtime@^7.7.2": - version "7.22.11" - resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.22.11.tgz#7a9ba3bbe406ad6f9e8dd4da2ece453eb23a77a4" - integrity sha512-ee7jVNlWN09+KftVOu9n7S8gQzD/Z6hN/I8VBRXW4P1+Xe7kJGXMwu8vds4aGIMHZnNbdpSWCfZZtinytpcAvA== - dependencies: - regenerator-runtime "^0.14.0" - "@babel/template@^7.18.10", "@babel/template@^7.20.7", "@babel/template@^7.22.5", "@babel/template@^7.3.3": version "7.22.5" resolved "https://registry.npmjs.org/@babel/template/-/template-7.22.5.tgz" @@ -5199,7 +5192,7 @@ big-integer@^1.6.44: big.js@^5.2.2: version "5.2.2" - resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328" + resolved "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz" integrity sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ== bin-check@^4.1.0: @@ -6800,7 +6793,7 @@ emoji-regex@^9.2.2: emojis-list@^3.0.0: version "3.0.0" - resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-3.0.0.tgz#5570662046ad29e2e916e71aae260abdff4f6a78" + resolved "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz" integrity sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q== encodeurl@~1.0.2: @@ -9782,7 +9775,7 @@ json-stringify-safe@~5.0.1: json5@^2.1.2, json5@^2.2.2, json5@^2.2.3: version "2.2.3" - resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283" + resolved "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz" integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg== json5@^2.1.3: @@ -12855,11 +12848,6 @@ regenerator-runtime@^0.13.11, regenerator-runtime@^0.13.3: resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9" integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg== -regenerator-runtime@^0.14.0: - version "0.14.0" - resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz#5e19d68eb12d486f797e15a3c6a918f7cec5eb45" - integrity sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA== - regenerator-transform@^0.15.1: version "0.15.1" resolved "https://registry.npmjs.org/regenerator-transform/-/regenerator-transform-0.15.1.tgz" @@ -15612,9 +15600,9 @@ yallist@^4.0.0: integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A== yaml@^1.10.0, yaml@^1.10.2, yaml@^2.2.1, yaml@^2.2.2: - version "2.3.2" - resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.3.2.tgz#f522db4313c671a0ca963a75670f1c12ea909144" - integrity sha512-N/lyzTPaJasoDmfV7YTrYCI0G/3ivm/9wdG0aHuheKowWQwGTsK0Eoiw6utmzAnI6pkJa0DUVygvp3spqqEKXg== + version "2.3.1" + resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.3.1.tgz#02fe0975d23cd441242aa7204e09fc28ac2ac33b" + integrity sha512-2eHWfjaoXgTBC2jNM1LRef62VQa0umtvRiDSk6HSzW7RvS5YtkabJrwYLLEKWBc8a5U2PTSCs+dJjUTJdlHsWQ== yargs-parser@^13.1.2: version "13.1.2" From 5a4fa69959ea69d1fb6b2b739f7756aef19df20c Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Wed, 6 Sep 2023 13:03:17 -0400 Subject: [PATCH 139/196] Remove .stylelintrc.json leftover changes --- packages/itwinui-css/.stylelintrc.json | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 packages/itwinui-css/.stylelintrc.json diff --git a/packages/itwinui-css/.stylelintrc.json b/packages/itwinui-css/.stylelintrc.json new file mode 100644 index 00000000000..5ce38247d5d --- /dev/null +++ b/packages/itwinui-css/.stylelintrc.json @@ -0,0 +1,5 @@ +{ + "extends": [ + "configs/.stylelintrc.json" + ] +} From d3172f70d436a32ada6aa2a189f6d31844e796a2 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Wed, 6 Sep 2023 13:03:44 -0400 Subject: [PATCH 140/196] Remove .stylelintrc.json leftover changes --- .stylelintrc.json | 5 ----- 1 file changed, 5 deletions(-) delete mode 100644 .stylelintrc.json diff --git a/.stylelintrc.json b/.stylelintrc.json deleted file mode 100644 index 5ce38247d5d..00000000000 --- a/.stylelintrc.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "extends": [ - "configs/.stylelintrc.json" - ] -} From 30acb3bf7abf15ea61a36089b038b010dcdc69b9 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Wed, 6 Sep 2023 13:48:48 -0400 Subject: [PATCH 141/196] WIP - still not working --- apps/storybook/tsconfig.json | 2 ++ packages/itwinui-react/package.json | 8 ++++---- packages/itwinui-react/react-table.d.ts | 7 ------- .../react-table/react-table-types.ts => react-table.ts} | 2 +- .../Table/types}/react-table-types.test.tsx | 8 ++++---- packages/itwinui-react/src/react-table/index.ts | 5 ----- packages/itwinui-react/tsconfig.build.json | 2 +- packages/itwinui-react/tsconfig.json | 2 +- 8 files changed, 13 insertions(+), 23 deletions(-) delete mode 100644 packages/itwinui-react/react-table.d.ts rename packages/itwinui-react/{src/react-table/react-table-types.ts => react-table.ts} (99%) rename packages/itwinui-react/src/{react-table => core/Table/types}/react-table-types.test.tsx (99%) delete mode 100644 packages/itwinui-react/src/react-table/index.ts diff --git a/apps/storybook/tsconfig.json b/apps/storybook/tsconfig.json index b967eee84ae..664cef96026 100644 --- a/apps/storybook/tsconfig.json +++ b/apps/storybook/tsconfig.json @@ -10,6 +10,8 @@ "allowJs": false, "jsx": "react", "traceResolution": false, + "module": "NodeNext", + "moduleResolution": "NodeNext", "forceConsistentCasingInFileNames": true, "noImplicitReturns": true, "noImplicitThis": true, diff --git a/packages/itwinui-react/package.json b/packages/itwinui-react/package.json index 5eaf76d5c3e..5121ae1da66 100644 --- a/packages/itwinui-react/package.json +++ b/packages/itwinui-react/package.json @@ -20,12 +20,12 @@ }, "./react-table": { "import": { - "types": "./esm/react-table/index.d.ts", - "default": "./esm/react-table/index.js" + "types": "./react-table.d.ts", + "default": "./react-table.js" }, "require": { - "types": "./cjs/react-table/index.d.ts", - "default": "./cjs/react-table/index.js" + "types": "./react-table.d.ts", + "default": "./react-table.js" } }, "./styles.css": "./styles.css", diff --git a/packages/itwinui-react/react-table.d.ts b/packages/itwinui-react/react-table.d.ts deleted file mode 100644 index a0cc1422b45..00000000000 --- a/packages/itwinui-react/react-table.d.ts +++ /dev/null @@ -1,7 +0,0 @@ -/*--------------------------------------------------------------------------------------------- - * Copyright (c) Bentley Systems, Incorporated. All rights reserved. - * See LICENSE.md in the project root for license terms and full copyright notice. - *--------------------------------------------------------------------------------------------*/ - -// This is a fallback for those using old node versions who cannot resolve @itwin/itwinui-react/react-table to the esm/cjs versions. -export * from './esm/react-table/react-table-types.js'; diff --git a/packages/itwinui-react/src/react-table/react-table-types.ts b/packages/itwinui-react/react-table.ts similarity index 99% rename from packages/itwinui-react/src/react-table/react-table-types.ts rename to packages/itwinui-react/react-table.ts index a30d98d8513..3f2c2af47f6 100644 --- a/packages/itwinui-react/src/react-table/react-table-types.ts +++ b/packages/itwinui-react/react-table.ts @@ -26,7 +26,7 @@ import type { ReactNode, } from 'react'; -import type { TableFilterProps } from '../core/Table/index.js'; +import type { TableFilterProps } from './src/core/Table/index.js'; export interface TableOptions> extends Omit, 'data' | 'columns'>, diff --git a/packages/itwinui-react/src/react-table/react-table-types.test.tsx b/packages/itwinui-react/src/core/Table/types/react-table-types.test.tsx similarity index 99% rename from packages/itwinui-react/src/react-table/react-table-types.test.tsx rename to packages/itwinui-react/src/core/Table/types/react-table-types.test.tsx index 07b0c42c9ff..a6013b77dc4 100644 --- a/packages/itwinui-react/src/react-table/react-table-types.test.tsx +++ b/packages/itwinui-react/src/core/Table/types/react-table-types.test.tsx @@ -20,15 +20,15 @@ import { DefaultCell, SelectionColumn, ExpanderColumn, -} from '../core/Table/index.js'; +} from '../../index.js'; import type { TableFilterValue, TablePaginatorRendererProps, -} from '../core/Table/index.js'; +} from '../../index.js'; // Table types can be imported with an alias or selective types can be imported too. -import * as TableTypes from 'src/react-table/react-table-types.js'; -import type { Column } from 'src/react-table/react-table-types.js'; +import * as TableTypes from 'react-table'; +import type { Column } from 'react-table'; type TableProps = Record> = React.ComponentProps>; diff --git a/packages/itwinui-react/src/react-table/index.ts b/packages/itwinui-react/src/react-table/index.ts deleted file mode 100644 index ca36ef273d6..00000000000 --- a/packages/itwinui-react/src/react-table/index.ts +++ /dev/null @@ -1,5 +0,0 @@ -/*--------------------------------------------------------------------------------------------- - * Copyright (c) Bentley Systems, Incorporated. All rights reserved. - * See LICENSE.md in the project root for license terms and full copyright notice. - *--------------------------------------------------------------------------------------------*/ -export type * from './react-table-types.js'; diff --git a/packages/itwinui-react/tsconfig.build.json b/packages/itwinui-react/tsconfig.build.json index 5f3ea9fce3e..8037e438341 100644 --- a/packages/itwinui-react/tsconfig.build.json +++ b/packages/itwinui-react/tsconfig.build.json @@ -1,6 +1,6 @@ { "extends": "./tsconfig.json", - "files": ["src/index.ts", "src/react-table/index.ts"], + "files": ["src/index.ts"], "compilerOptions": { "noUnusedLocals": false, "importHelpers": true diff --git a/packages/itwinui-react/tsconfig.json b/packages/itwinui-react/tsconfig.json index 0be2c313a63..34ff7b9b113 100644 --- a/packages/itwinui-react/tsconfig.json +++ b/packages/itwinui-react/tsconfig.json @@ -24,7 +24,7 @@ "baseUrl": ".", "paths": { // Since we don't depend on `@types/react-table`, we need to provide the types for it. - "react-table": ["src/react-table/react-table-types.ts"] + "react-table": ["react-table.ts"] } }, "exclude": ["node_modules", "cjs/**/*", "esm/**/*"] From a1b9ebb326a5aa52daa70ca4e8afd2f119d020e5 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Wed, 6 Sep 2023 13:49:10 -0400 Subject: [PATCH 142/196] Undid .swcrc change --- packages/itwinui-react/.swcrc | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/packages/itwinui-react/.swcrc b/packages/itwinui-react/.swcrc index 70a22604840..fbcb6fccdc8 100644 --- a/packages/itwinui-react/.swcrc +++ b/packages/itwinui-react/.swcrc @@ -8,10 +8,5 @@ "module": { "type": "es6" }, - "exclude": [ - "src/styles.js", - "src/styles.d.ts", - // Since swc converts `react-table-types.d.ts` to `react-table-types.d.js` - "src/core/Table/types/react-table-types.d.ts" - ] + "exclude": ["src/styles.js", "src/styles.d.ts"] } From 54d0c48a068aa38fc3ec7fecee896d14d52a49b9 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Wed, 6 Sep 2023 14:36:32 -0400 Subject: [PATCH 143/196] Revert "WIP - still not working" This reverts commit 30acb3bf7abf15ea61a36089b038b010dcdc69b9. --- apps/storybook/tsconfig.json | 2 -- packages/itwinui-react/package.json | 8 ++++---- packages/itwinui-react/react-table.d.ts | 7 +++++++ packages/itwinui-react/src/react-table/index.ts | 5 +++++ .../types => react-table}/react-table-types.test.tsx | 8 ++++---- .../react-table/react-table-types.ts} | 2 +- packages/itwinui-react/tsconfig.build.json | 2 +- packages/itwinui-react/tsconfig.json | 2 +- 8 files changed, 23 insertions(+), 13 deletions(-) create mode 100644 packages/itwinui-react/react-table.d.ts create mode 100644 packages/itwinui-react/src/react-table/index.ts rename packages/itwinui-react/src/{core/Table/types => react-table}/react-table-types.test.tsx (99%) rename packages/itwinui-react/{react-table.ts => src/react-table/react-table-types.ts} (99%) diff --git a/apps/storybook/tsconfig.json b/apps/storybook/tsconfig.json index 664cef96026..b967eee84ae 100644 --- a/apps/storybook/tsconfig.json +++ b/apps/storybook/tsconfig.json @@ -10,8 +10,6 @@ "allowJs": false, "jsx": "react", "traceResolution": false, - "module": "NodeNext", - "moduleResolution": "NodeNext", "forceConsistentCasingInFileNames": true, "noImplicitReturns": true, "noImplicitThis": true, diff --git a/packages/itwinui-react/package.json b/packages/itwinui-react/package.json index 5121ae1da66..5eaf76d5c3e 100644 --- a/packages/itwinui-react/package.json +++ b/packages/itwinui-react/package.json @@ -20,12 +20,12 @@ }, "./react-table": { "import": { - "types": "./react-table.d.ts", - "default": "./react-table.js" + "types": "./esm/react-table/index.d.ts", + "default": "./esm/react-table/index.js" }, "require": { - "types": "./react-table.d.ts", - "default": "./react-table.js" + "types": "./cjs/react-table/index.d.ts", + "default": "./cjs/react-table/index.js" } }, "./styles.css": "./styles.css", diff --git a/packages/itwinui-react/react-table.d.ts b/packages/itwinui-react/react-table.d.ts new file mode 100644 index 00000000000..a0cc1422b45 --- /dev/null +++ b/packages/itwinui-react/react-table.d.ts @@ -0,0 +1,7 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Bentley Systems, Incorporated. All rights reserved. + * See LICENSE.md in the project root for license terms and full copyright notice. + *--------------------------------------------------------------------------------------------*/ + +// This is a fallback for those using old node versions who cannot resolve @itwin/itwinui-react/react-table to the esm/cjs versions. +export * from './esm/react-table/react-table-types.js'; diff --git a/packages/itwinui-react/src/react-table/index.ts b/packages/itwinui-react/src/react-table/index.ts new file mode 100644 index 00000000000..ca36ef273d6 --- /dev/null +++ b/packages/itwinui-react/src/react-table/index.ts @@ -0,0 +1,5 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Bentley Systems, Incorporated. All rights reserved. + * See LICENSE.md in the project root for license terms and full copyright notice. + *--------------------------------------------------------------------------------------------*/ +export type * from './react-table-types.js'; diff --git a/packages/itwinui-react/src/core/Table/types/react-table-types.test.tsx b/packages/itwinui-react/src/react-table/react-table-types.test.tsx similarity index 99% rename from packages/itwinui-react/src/core/Table/types/react-table-types.test.tsx rename to packages/itwinui-react/src/react-table/react-table-types.test.tsx index a6013b77dc4..07b0c42c9ff 100644 --- a/packages/itwinui-react/src/core/Table/types/react-table-types.test.tsx +++ b/packages/itwinui-react/src/react-table/react-table-types.test.tsx @@ -20,15 +20,15 @@ import { DefaultCell, SelectionColumn, ExpanderColumn, -} from '../../index.js'; +} from '../core/Table/index.js'; import type { TableFilterValue, TablePaginatorRendererProps, -} from '../../index.js'; +} from '../core/Table/index.js'; // Table types can be imported with an alias or selective types can be imported too. -import * as TableTypes from 'react-table'; -import type { Column } from 'react-table'; +import * as TableTypes from 'src/react-table/react-table-types.js'; +import type { Column } from 'src/react-table/react-table-types.js'; type TableProps = Record> = React.ComponentProps>; diff --git a/packages/itwinui-react/react-table.ts b/packages/itwinui-react/src/react-table/react-table-types.ts similarity index 99% rename from packages/itwinui-react/react-table.ts rename to packages/itwinui-react/src/react-table/react-table-types.ts index 3f2c2af47f6..a30d98d8513 100644 --- a/packages/itwinui-react/react-table.ts +++ b/packages/itwinui-react/src/react-table/react-table-types.ts @@ -26,7 +26,7 @@ import type { ReactNode, } from 'react'; -import type { TableFilterProps } from './src/core/Table/index.js'; +import type { TableFilterProps } from '../core/Table/index.js'; export interface TableOptions> extends Omit, 'data' | 'columns'>, diff --git a/packages/itwinui-react/tsconfig.build.json b/packages/itwinui-react/tsconfig.build.json index 8037e438341..5f3ea9fce3e 100644 --- a/packages/itwinui-react/tsconfig.build.json +++ b/packages/itwinui-react/tsconfig.build.json @@ -1,6 +1,6 @@ { "extends": "./tsconfig.json", - "files": ["src/index.ts"], + "files": ["src/index.ts", "src/react-table/index.ts"], "compilerOptions": { "noUnusedLocals": false, "importHelpers": true diff --git a/packages/itwinui-react/tsconfig.json b/packages/itwinui-react/tsconfig.json index 34ff7b9b113..0be2c313a63 100644 --- a/packages/itwinui-react/tsconfig.json +++ b/packages/itwinui-react/tsconfig.json @@ -24,7 +24,7 @@ "baseUrl": ".", "paths": { // Since we don't depend on `@types/react-table`, we need to provide the types for it. - "react-table": ["react-table.ts"] + "react-table": ["src/react-table/react-table-types.ts"] } }, "exclude": ["node_modules", "cjs/**/*", "esm/**/*"] From a3edccd4c3ddc7f29e1f616a1def28e71780bfc0 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Wed, 6 Sep 2023 14:46:48 -0400 Subject: [PATCH 144/196] Spacing for better text formatting --- packages/itwinui-react/src/react-table/react-table-types.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/itwinui-react/src/react-table/react-table-types.ts b/packages/itwinui-react/src/react-table/react-table-types.ts index a30d98d8513..860424e955f 100644 --- a/packages/itwinui-react/src/react-table/react-table-types.ts +++ b/packages/itwinui-react/src/react-table/react-table-types.ts @@ -9,6 +9,7 @@ // This file is a hard fork of @types/react-table v7 // The original code is licensed under MIT - https://unpkg.com/browse/@types/react-table@7.7.15/LICENSE +// // A few reasons for this hard fork are: // - iTwinUI Table does not offer all the functionality that `react-table` offers. (no nested columns) // - `@types/react-table` expects row data to extend `object`. However, iTwinUI Table's expects row data to extend `Record`. From 40a6b72e1b4137f09402d8081b49da46743ee1b9 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Wed, 6 Sep 2023 14:48:39 -0400 Subject: [PATCH 145/196] Fixed use of incorrect endpoint --- apps/storybook/src/InformationPanel.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/storybook/src/InformationPanel.stories.tsx b/apps/storybook/src/InformationPanel.stories.tsx index a664e1f0820..58eb0c4d20b 100644 --- a/apps/storybook/src/InformationPanel.stories.tsx +++ b/apps/storybook/src/InformationPanel.stories.tsx @@ -4,7 +4,7 @@ *--------------------------------------------------------------------------------------------*/ import { Story, Meta } from '@storybook/react'; import React from 'react'; -import { TableTypes } from '@itwin/itwinui-react'; +import * as TableTypes from '@itwin/itwinui-react/react-table'; import { action } from '@storybook/addon-actions'; import { SvgEdit } from '@itwin/itwinui-icons-react'; import { From 809be55fa283f4ca0a1cd190aa031331ed2c1ceb Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Wed, 6 Sep 2023 15:11:39 -0400 Subject: [PATCH 146/196] Fixed reference to incorrect endpoint --- examples/Table.main.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/Table.main.tsx b/examples/Table.main.tsx index fc94fa9deab..39d3b4f13ec 100644 --- a/examples/Table.main.tsx +++ b/examples/Table.main.tsx @@ -8,7 +8,7 @@ import type { CellProps, CellRendererProps, Column, -} from '@itwin/itwinui-react'; +} from '@itwin/itwinui-react/react-table'; export default () => { type TableDataType = { From 7a043ac8f1dad9d17fd79a80547e54ffbe7b0d48 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Wed, 6 Sep 2023 15:12:45 -0400 Subject: [PATCH 147/196] Added a small test to confirm types can be imported by file path or package name --- .../itwinui-react/src/react-table/react-table-types.test.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/itwinui-react/src/react-table/react-table-types.test.tsx b/packages/itwinui-react/src/react-table/react-table-types.test.tsx index 07b0c42c9ff..7aa84c8f76b 100644 --- a/packages/itwinui-react/src/react-table/react-table-types.test.tsx +++ b/packages/itwinui-react/src/react-table/react-table-types.test.tsx @@ -27,9 +27,12 @@ import type { } from '../core/Table/index.js'; // Table types can be imported with an alias or selective types can be imported too. -import * as TableTypes from 'src/react-table/react-table-types.js'; +import * as _TableTypes from 'src/react-table/react-table-types.js'; import type { Column } from 'src/react-table/react-table-types.js'; +// Can import types from file or by package name. +import * as TableTypes from 'react-table'; + type TableProps = Record> = React.ComponentProps>; From cab7f9c001bf55d7333e554c64156a979dfd661d Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Wed, 6 Sep 2023 15:21:17 -0400 Subject: [PATCH 148/196] Added ./react-table.d.ts to package.json -> files --- packages/itwinui-react/package.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/itwinui-react/package.json b/packages/itwinui-react/package.json index 5eaf76d5c3e..1178acff9d1 100644 --- a/packages/itwinui-react/package.json +++ b/packages/itwinui-react/package.json @@ -40,7 +40,8 @@ "esm", "styles.css", "CHANGELOG.md", - "LICENSE.md" + "LICENSE.md", + "react-table.d.ts" ], "description": "A react component library for iTwinUI", "homepage": "https://github.com/iTwin/iTwinUI", From 5bdfc9dc13033e1cf4534e8e51fefe37f54343b1 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Wed, 6 Sep 2023 15:37:12 -0400 Subject: [PATCH 149/196] Mentioned "yarn test" to "yarn test:unit" in CONTRIBUTING.md --- CONTRIBUTING.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 19761c24d87..18b19fb7f0b 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -250,7 +250,7 @@ More examples can be found in the [style guide](./STYLEGUIDE.md). Each component has a corresponding jest test inside of its directory. Be sure to cover your added code with tests. -Use `yarn test` to run the tests. Add `--watch` flag if you want tests to rerun after changes. +Use `yarn test:unit` to run the unit tests. Run `yarn test:unit:watch` if you want unit tests to rerun after changes. We usually do not use `describe` block and our test case should start with 'should'. From 174baa32e332bf79b1c1f7e942e089933f369e4a Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Wed, 6 Sep 2023 15:37:24 -0400 Subject: [PATCH 150/196] Added TODO --- packages/itwinui-react/tsconfig.test.json | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/itwinui-react/tsconfig.test.json b/packages/itwinui-react/tsconfig.test.json index 534b8f910af..9d596311991 100644 --- a/packages/itwinui-react/tsconfig.test.json +++ b/packages/itwinui-react/tsconfig.test.json @@ -1,4 +1,5 @@ { "extends": "./tsconfig.json", + // TODO: Test all the files, and not just the Table files or just the build files. "include": ["src/core/Table/**/*"] } From 60749e035ce058b55c06b7045b99832ee2d6a1ba Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Wed, 6 Sep 2023 17:39:01 -0400 Subject: [PATCH 151/196] Build react-table types file in root folder using custom tsconfig. Removed fallback react-table.d.ts --- packages/itwinui-react/.gitignore | 4 +++ packages/itwinui-react/package.json | 17 +++++------- packages/itwinui-react/react-table.d.ts | 7 ----- .../src/core/Table/filters/types.ts | 27 ++----------------- .../itwinui-react/src/react-table/index.ts | 2 +- .../react-table/react-table-types.test.tsx | 4 +-- .../{react-table-types.ts => react-table.ts} | 20 +++++++++++++- packages/itwinui-react/tsconfig.json | 2 +- .../itwinui-react/tsconfig.react-table.json | 9 +++++++ 9 files changed, 44 insertions(+), 48 deletions(-) delete mode 100644 packages/itwinui-react/react-table.d.ts rename packages/itwinui-react/src/react-table/{react-table-types.ts => react-table.ts} (98%) create mode 100644 packages/itwinui-react/tsconfig.react-table.json diff --git a/packages/itwinui-react/.gitignore b/packages/itwinui-react/.gitignore index 79d90833531..559732e1715 100644 --- a/packages/itwinui-react/.gitignore +++ b/packages/itwinui-react/.gitignore @@ -8,6 +8,10 @@ build cjs esm +# Build outputs +react-table.js +react-table.d.ts + # Compiled Styles src/**/*.css diff --git a/packages/itwinui-react/package.json b/packages/itwinui-react/package.json index 1178acff9d1..8d249ba2127 100644 --- a/packages/itwinui-react/package.json +++ b/packages/itwinui-react/package.json @@ -19,14 +19,8 @@ } }, "./react-table": { - "import": { - "types": "./esm/react-table/index.d.ts", - "default": "./esm/react-table/index.js" - }, - "require": { - "types": "./cjs/react-table/index.d.ts", - "default": "./cjs/react-table/index.js" - } + "types": "./react-table.d.ts", + "default": "./react-table.js" }, "./styles.css": "./styles.css", "./cjs": "./cjs/index.js", @@ -41,7 +35,8 @@ "styles.css", "CHANGELOG.md", "LICENSE.md", - "react-table.d.ts" + "react-table.d.ts", + "react-table.js" ], "description": "A react component library for iTwinUI", "homepage": "https://github.com/iTwin/iTwinUI", @@ -65,7 +60,7 @@ "ux" ], "scripts": { - "build": "yarn clean:build && tsc -p tsconfig.cjs.json && tsc -p tsconfig.esm.json && yarn build:styles && yarn build:post", + "build": "yarn clean:build && tsc -p tsconfig.cjs.json && tsc -p tsconfig.esm.json && tsc -p tsconfig.react-table.json && yarn build:styles && yarn build:post", "build:styles": "vite build src/styles.js", "build:watch": "concurrently \"tsc -p tsconfig.cjs.json --watch\" \"tsc -p tsconfig.esm.json --watch\"", "build:post": "node ./scripts/postBuild.mjs", @@ -82,7 +77,7 @@ "dev": "yarn clean:build && concurrently \"yarn dev:esm\" \"yarn dev:cjs\" \"yarn build:styles --watch\" \"yarn dev:types\"", "dev:esm": "swc src -d esm --watch", "dev:cjs": "swc src -d cjs --watch -C module.type=commonjs", - "dev:types": "concurrently \"tsc -p tsconfig.cjs.json --emitDeclarationOnly --watch --preserveWatchOutput\" \"tsc -p tsconfig.esm.json --emitDeclarationOnly --watch --preserveWatchOutput\"", + "dev:types": "concurrently \"tsc -p tsconfig.cjs.json --emitDeclarationOnly --watch --preserveWatchOutput\" \"tsc -p tsconfig.esm.json --emitDeclarationOnly --watch --preserveWatchOutput\" \"tsc -p tsconfig.react-table.json --emitDeclarationOnly --watch --preserveWatchOutput\"", "dev:styles": "yarn build:styles --watch" }, "dependencies": { diff --git a/packages/itwinui-react/react-table.d.ts b/packages/itwinui-react/react-table.d.ts deleted file mode 100644 index a0cc1422b45..00000000000 --- a/packages/itwinui-react/react-table.d.ts +++ /dev/null @@ -1,7 +0,0 @@ -/*--------------------------------------------------------------------------------------------- - * Copyright (c) Bentley Systems, Incorporated. All rights reserved. - * See LICENSE.md in the project root for license terms and full copyright notice. - *--------------------------------------------------------------------------------------------*/ - -// This is a fallback for those using old node versions who cannot resolve @itwin/itwinui-react/react-table to the esm/cjs versions. -export * from './esm/react-table/react-table-types.js'; diff --git a/packages/itwinui-react/src/core/Table/filters/types.ts b/packages/itwinui-react/src/core/Table/filters/types.ts index 32ccefcf3f8..a483d1c21a3 100644 --- a/packages/itwinui-react/src/core/Table/filters/types.ts +++ b/packages/itwinui-react/src/core/Table/filters/types.ts @@ -2,12 +2,7 @@ * Copyright (c) Bentley Systems, Incorporated. All rights reserved. * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ -import type { - FieldType, - FilterProps, - FilterType, - HeaderGroup, -} from 'react-table'; +import type { FieldType, FilterType, TableFilterProps } from 'react-table'; export interface TableFilterValue> { /** @@ -28,22 +23,4 @@ export interface TableFilterValue> { filterType: FilterType; } -export type TableFilterProps> = - FilterProps & { - /** - * Data of column on which filter is opened. It is provided by the table it self. - */ - column: HeaderGroup; - /** - * Function to close the filter. It is provided by the table it self. - */ - close: () => void; - /** - * Function to set the filter value. It is provided by the table it self. - */ - setFilter: (filterValue: unknown | undefined) => void; - /** - * Function to clear the filter value. It is provided by the table it self. - */ - clearFilter: () => void; - }; +export type { TableFilterProps }; diff --git a/packages/itwinui-react/src/react-table/index.ts b/packages/itwinui-react/src/react-table/index.ts index ca36ef273d6..6983685bea2 100644 --- a/packages/itwinui-react/src/react-table/index.ts +++ b/packages/itwinui-react/src/react-table/index.ts @@ -2,4 +2,4 @@ * Copyright (c) Bentley Systems, Incorporated. All rights reserved. * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ -export type * from './react-table-types.js'; +export type * from './react-table.js'; diff --git a/packages/itwinui-react/src/react-table/react-table-types.test.tsx b/packages/itwinui-react/src/react-table/react-table-types.test.tsx index 7aa84c8f76b..973dbb7b6bd 100644 --- a/packages/itwinui-react/src/react-table/react-table-types.test.tsx +++ b/packages/itwinui-react/src/react-table/react-table-types.test.tsx @@ -27,8 +27,8 @@ import type { } from '../core/Table/index.js'; // Table types can be imported with an alias or selective types can be imported too. -import * as _TableTypes from 'src/react-table/react-table-types.js'; -import type { Column } from 'src/react-table/react-table-types.js'; +import * as _TableTypes from 'src/react-table/react-table.js'; +import type { Column } from 'src/react-table/react-table.js'; // Can import types from file or by package name. import * as TableTypes from 'react-table'; diff --git a/packages/itwinui-react/src/react-table/react-table-types.ts b/packages/itwinui-react/src/react-table/react-table.ts similarity index 98% rename from packages/itwinui-react/src/react-table/react-table-types.ts rename to packages/itwinui-react/src/react-table/react-table.ts index 860424e955f..90d80bbac1f 100644 --- a/packages/itwinui-react/src/react-table/react-table-types.ts +++ b/packages/itwinui-react/src/react-table/react-table.ts @@ -27,7 +27,25 @@ import type { ReactNode, } from 'react'; -import type { TableFilterProps } from '../core/Table/index.js'; +export type TableFilterProps> = + FilterProps & { + /** + * Data of column on which filter is opened. It is provided by the table it self. + */ + column: HeaderGroup; + /** + * Function to close the filter. It is provided by the table it self. + */ + close: () => void; + /** + * Function to set the filter value. It is provided by the table it self. + */ + setFilter: (filterValue: unknown | undefined) => void; + /** + * Function to clear the filter value. It is provided by the table it self. + */ + clearFilter: () => void; + }; export interface TableOptions> extends Omit, 'data' | 'columns'>, diff --git a/packages/itwinui-react/tsconfig.json b/packages/itwinui-react/tsconfig.json index 0be2c313a63..cef733bfd6a 100644 --- a/packages/itwinui-react/tsconfig.json +++ b/packages/itwinui-react/tsconfig.json @@ -24,7 +24,7 @@ "baseUrl": ".", "paths": { // Since we don't depend on `@types/react-table`, we need to provide the types for it. - "react-table": ["src/react-table/react-table-types.ts"] + "react-table": ["src/react-table/react-table.ts"] } }, "exclude": ["node_modules", "cjs/**/*", "esm/**/*"] diff --git a/packages/itwinui-react/tsconfig.react-table.json b/packages/itwinui-react/tsconfig.react-table.json new file mode 100644 index 00000000000..5be10bda887 --- /dev/null +++ b/packages/itwinui-react/tsconfig.react-table.json @@ -0,0 +1,9 @@ +{ + "extends": "./tsconfig.json", + "files": ["src/core/Table/types/react-table.ts"], + "compilerOptions": { + "outDir": ".", + "noUnusedLocals": false, + "importHelpers": true + } +} From a7f2c36c97c864c54a7b623b19329991124e22b5 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Wed, 6 Sep 2023 17:49:26 -0400 Subject: [PATCH 152/196] Removed unnecessary file --- packages/itwinui-react/src/react-table/index.ts | 5 ----- 1 file changed, 5 deletions(-) delete mode 100644 packages/itwinui-react/src/react-table/index.ts diff --git a/packages/itwinui-react/src/react-table/index.ts b/packages/itwinui-react/src/react-table/index.ts deleted file mode 100644 index 6983685bea2..00000000000 --- a/packages/itwinui-react/src/react-table/index.ts +++ /dev/null @@ -1,5 +0,0 @@ -/*--------------------------------------------------------------------------------------------- - * Copyright (c) Bentley Systems, Incorporated. All rights reserved. - * See LICENSE.md in the project root for license terms and full copyright notice. - *--------------------------------------------------------------------------------------------*/ -export type * from './react-table.js'; From d9830f5cedc9821f38e34d97c742abd2fc8bcd09 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Wed, 6 Sep 2023 17:51:30 -0400 Subject: [PATCH 153/196] Fixed few errors by fixing path --- packages/itwinui-react/tsconfig.build.json | 2 +- packages/itwinui-react/tsconfig.react-table.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/itwinui-react/tsconfig.build.json b/packages/itwinui-react/tsconfig.build.json index 5f3ea9fce3e..8037e438341 100644 --- a/packages/itwinui-react/tsconfig.build.json +++ b/packages/itwinui-react/tsconfig.build.json @@ -1,6 +1,6 @@ { "extends": "./tsconfig.json", - "files": ["src/index.ts", "src/react-table/index.ts"], + "files": ["src/index.ts"], "compilerOptions": { "noUnusedLocals": false, "importHelpers": true diff --git a/packages/itwinui-react/tsconfig.react-table.json b/packages/itwinui-react/tsconfig.react-table.json index 5be10bda887..166580f2c8b 100644 --- a/packages/itwinui-react/tsconfig.react-table.json +++ b/packages/itwinui-react/tsconfig.react-table.json @@ -1,6 +1,6 @@ { "extends": "./tsconfig.json", - "files": ["src/core/Table/types/react-table.ts"], + "files": ["src/react-table/react-table.ts"], "compilerOptions": { "outDir": ".", "noUnusedLocals": false, From 5d2d0438773427ebd2dea7e3ae2c77f0c1344fd3 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Thu, 7 Sep 2023 09:15:40 -0400 Subject: [PATCH 154/196] Added emitDeclarationOnly --- packages/itwinui-react/tsconfig.react-table.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/itwinui-react/tsconfig.react-table.json b/packages/itwinui-react/tsconfig.react-table.json index 166580f2c8b..10da6c67841 100644 --- a/packages/itwinui-react/tsconfig.react-table.json +++ b/packages/itwinui-react/tsconfig.react-table.json @@ -4,6 +4,7 @@ "compilerOptions": { "outDir": ".", "noUnusedLocals": false, - "importHelpers": true + "importHelpers": true, + "emitDeclarationOnly": true } } From 523947f1821cd8aa2854f661b2bcf3dd83b11f44 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Thu, 7 Sep 2023 09:16:08 -0400 Subject: [PATCH 155/196] Added react-table.d.ts to clean:build --- packages/itwinui-react/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/itwinui-react/package.json b/packages/itwinui-react/package.json index 8d249ba2127..69ff440ab77 100644 --- a/packages/itwinui-react/package.json +++ b/packages/itwinui-react/package.json @@ -64,7 +64,7 @@ "build:styles": "vite build src/styles.js", "build:watch": "concurrently \"tsc -p tsconfig.cjs.json --watch\" \"tsc -p tsconfig.esm.json --watch\"", "build:post": "node ./scripts/postBuild.mjs", - "clean:build": "rimraf esm && rimraf cjs", + "clean:build": "rimraf esm && rimraf cjs && rimraf react-table.d.ts", "clean:coverage": "rimraf coverage", "clean": "rimraf .turbo && yarn clean:coverage && yarn clean:build && rimraf node_modules", "test": "yarn test:unit && yarn test:types", From b33ef878af8e1ba5335084d58eeba4c5c0b8c004 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Thu, 7 Sep 2023 10:01:15 -0400 Subject: [PATCH 156/196] WIP testing --- packages/itwinui-react/package.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/itwinui-react/package.json b/packages/itwinui-react/package.json index 69ff440ab77..e528abdaa3d 100644 --- a/packages/itwinui-react/package.json +++ b/packages/itwinui-react/package.json @@ -35,8 +35,8 @@ "styles.css", "CHANGELOG.md", "LICENSE.md", - "react-table.d.ts", - "react-table.js" + "react-table.js", + "react-table.d.ts" ], "description": "A react component library for iTwinUI", "homepage": "https://github.com/iTwin/iTwinUI", @@ -64,7 +64,7 @@ "build:styles": "vite build src/styles.js", "build:watch": "concurrently \"tsc -p tsconfig.cjs.json --watch\" \"tsc -p tsconfig.esm.json --watch\"", "build:post": "node ./scripts/postBuild.mjs", - "clean:build": "rimraf esm && rimraf cjs && rimraf react-table.d.ts", + "clean:build": "rimraf esm && rimraf cjs && rimraf react-table.js && rimraf react-table.d.ts", "clean:coverage": "rimraf coverage", "clean": "rimraf .turbo && yarn clean:coverage && yarn clean:build && rimraf node_modules", "test": "yarn test:unit && yarn test:types", From e074fc5252e6649b1ae7d96753d10f86835596bf Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Thu, 7 Sep 2023 10:24:49 -0400 Subject: [PATCH 157/196] Set module & moduleResolution to Node16 in tsconfigs. Added type: module to package.json where missing. --- playgrounds/astro/tsconfig.json | 6 +++++- playgrounds/next/package.json | 1 + playgrounds/next/tsconfig.json | 4 ++-- playgrounds/vite/package.json | 1 + playgrounds/vite/tsconfig.json | 4 ++-- 5 files changed, 11 insertions(+), 5 deletions(-) diff --git a/playgrounds/astro/tsconfig.json b/playgrounds/astro/tsconfig.json index bcbf8b50906..258a939a284 100644 --- a/playgrounds/astro/tsconfig.json +++ b/playgrounds/astro/tsconfig.json @@ -1,3 +1,7 @@ { - "extends": "astro/tsconfigs/strict" + "extends": "astro/tsconfigs/strict", + "compilerOptions": { + "module": "Node16", + "moduleResolution": "Node16" + } } diff --git a/playgrounds/next/package.json b/playgrounds/next/package.json index bb66636e440..32ce668728a 100644 --- a/playgrounds/next/package.json +++ b/playgrounds/next/package.json @@ -2,6 +2,7 @@ "name": "next-playground", "version": "0.1.0", "private": true, + "type": "module", "scripts": { "dev": "next dev -p 1702", "build": "next build", diff --git a/playgrounds/next/tsconfig.json b/playgrounds/next/tsconfig.json index 99710e85787..f08852093ff 100644 --- a/playgrounds/next/tsconfig.json +++ b/playgrounds/next/tsconfig.json @@ -8,8 +8,8 @@ "forceConsistentCasingInFileNames": true, "noEmit": true, "esModuleInterop": true, - "module": "esnext", - "moduleResolution": "node", + "module": "Node16", + "moduleResolution": "Node16", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", diff --git a/playgrounds/vite/package.json b/playgrounds/vite/package.json index 6469097528d..1ecb06447b9 100644 --- a/playgrounds/vite/package.json +++ b/playgrounds/vite/package.json @@ -8,6 +8,7 @@ "preview": "vite preview", "clean": "rimraf .turbo && rimraf node_modules && rimraf dist" }, + "type": "module", "dependencies": { "@itwin/itwinui-react": "3.0.0-dev.8", "@itwin/itwinui-icons-react": "2", diff --git a/playgrounds/vite/tsconfig.json b/playgrounds/vite/tsconfig.json index 3d0a51a86e2..bfc7865a60f 100644 --- a/playgrounds/vite/tsconfig.json +++ b/playgrounds/vite/tsconfig.json @@ -9,8 +9,8 @@ "allowSyntheticDefaultImports": true, "strict": true, "forceConsistentCasingInFileNames": true, - "module": "ESNext", - "moduleResolution": "Node", + "module": "Node16", + "moduleResolution": "Node16", "resolveJsonModule": true, "isolatedModules": true, "noEmit": true, From 6a4236c961be16526d2c2c4d1c6330877d5dd016 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Thu, 7 Sep 2023 10:37:57 -0400 Subject: [PATCH 158/196] Fixed an error of required extension for relative imports --- playgrounds/vite/src/main.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/playgrounds/vite/src/main.tsx b/playgrounds/vite/src/main.tsx index 8970a0696ae..0f474c2aa2b 100644 --- a/playgrounds/vite/src/main.tsx +++ b/playgrounds/vite/src/main.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { createRoot } from 'react-dom/client'; import styled from '@emotion/styled'; import { ThemeProvider } from '@itwin/itwinui-react'; -import App from './App'; +import App from './App.js'; import { SvgMoon, SvgSun } from '@itwin/itwinui-icons-react'; import '@itwin/itwinui-react/styles.css'; From 8bf2bbdb9c53b1db86938b020507bc8f1c59eff1 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Thu, 7 Sep 2023 11:20:53 -0400 Subject: [PATCH 159/196] Workaround for emotion/styled not working in ESM --- playgrounds/vite/src/main.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/playgrounds/vite/src/main.tsx b/playgrounds/vite/src/main.tsx index 0f474c2aa2b..e1745b36485 100644 --- a/playgrounds/vite/src/main.tsx +++ b/playgrounds/vite/src/main.tsx @@ -1,6 +1,10 @@ import * as React from 'react'; import { createRoot } from 'react-dom/client'; -import styled from '@emotion/styled'; + +// Workaround for emotion/styled not working in ESM: https://github.com/emotion-js/emotion/issues/2730#issuecomment-1205489497 +import _styled from '@emotion/styled'; +const styled = _styled.default; + import { ThemeProvider } from '@itwin/itwinui-react'; import App from './App.js'; import { SvgMoon, SvgSun } from '@itwin/itwinui-icons-react'; From 07784ca490b2fdd0ffc1232eddbeb3844cf95af3 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Thu, 7 Sep 2023 11:26:37 -0400 Subject: [PATCH 160/196] Fixed errors in next-playground --- playgrounds/next/next.config.js | 7 ------- playgrounds/next/next.config.mjs | 9 +++++++++ playgrounds/next/pages/_app.tsx | 2 +- 3 files changed, 10 insertions(+), 8 deletions(-) delete mode 100644 playgrounds/next/next.config.js create mode 100644 playgrounds/next/next.config.mjs diff --git a/playgrounds/next/next.config.js b/playgrounds/next/next.config.js deleted file mode 100644 index 3d3bc9990d8..00000000000 --- a/playgrounds/next/next.config.js +++ /dev/null @@ -1,7 +0,0 @@ -/** @type {import('next').NextConfig} */ -const nextConfig = { - reactStrictMode: true, - swcMinify: true, -}; - -module.exports = nextConfig; diff --git a/playgrounds/next/next.config.mjs b/playgrounds/next/next.config.mjs new file mode 100644 index 00000000000..8de48876ce8 --- /dev/null +++ b/playgrounds/next/next.config.mjs @@ -0,0 +1,9 @@ +/** + * @type {import('next').NextConfig} + */ +const nextConfig = { + reactStrictMode: true, + swcMinify: true, +}; + +export default nextConfig; diff --git a/playgrounds/next/pages/_app.tsx b/playgrounds/next/pages/_app.tsx index 468fb9def63..03e7c53c160 100644 --- a/playgrounds/next/pages/_app.tsx +++ b/playgrounds/next/pages/_app.tsx @@ -1,4 +1,4 @@ -import type { AppProps } from 'next/app'; +import type { AppProps } from 'next/app.js'; import css from 'styled-jsx/css'; import { ThemeProvider } from '@itwin/itwinui-react'; import '@itwin/itwinui-react/styles.css'; From 5d4d1d3cf246dc3e4fd9d4e21d367099be745bb8 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Thu, 7 Sep 2023 11:48:08 -0400 Subject: [PATCH 161/196] Removed module/moduleResolution in astro playground --- playgrounds/astro/tsconfig.json | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/playgrounds/astro/tsconfig.json b/playgrounds/astro/tsconfig.json index 258a939a284..bcbf8b50906 100644 --- a/playgrounds/astro/tsconfig.json +++ b/playgrounds/astro/tsconfig.json @@ -1,7 +1,3 @@ { - "extends": "astro/tsconfigs/strict", - "compilerOptions": { - "module": "Node16", - "moduleResolution": "Node16" - } + "extends": "astro/tsconfigs/strict" } From 06470baede198e4d18a9d0dd2c1a29e79f07644d Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Thu, 7 Sep 2023 11:50:33 -0400 Subject: [PATCH 162/196] Reordering keys in package.json for clarity and uniformity --- playgrounds/next/package.json | 2 +- playgrounds/vite/package.json | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/playgrounds/next/package.json b/playgrounds/next/package.json index 32ce668728a..758125e6a81 100644 --- a/playgrounds/next/package.json +++ b/playgrounds/next/package.json @@ -1,8 +1,8 @@ { "name": "next-playground", + "type": "module", "version": "0.1.0", "private": true, - "type": "module", "scripts": { "dev": "next dev -p 1702", "build": "next build", diff --git a/playgrounds/vite/package.json b/playgrounds/vite/package.json index 1ecb06447b9..ad29e38fcba 100644 --- a/playgrounds/vite/package.json +++ b/playgrounds/vite/package.json @@ -1,14 +1,14 @@ { "name": "vite-playground", - "private": true, + "type": "module", "version": "0.0.0", + "private": true, "scripts": { "dev": "vite", "build": "tsc && vite build", "preview": "vite preview", "clean": "rimraf .turbo && rimraf node_modules && rimraf dist" }, - "type": "module", "dependencies": { "@itwin/itwinui-react": "3.0.0-dev.8", "@itwin/itwinui-icons-react": "2", From efb929b1139205be700a7ade69bd63668ab9afdd Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Thu, 7 Sep 2023 11:55:15 -0400 Subject: [PATCH 163/196] Changed moduleResolution from Node16 to Bundler --- playgrounds/next/pages/_app.tsx | 2 +- playgrounds/next/tsconfig.json | 20 +++++++++++++++----- playgrounds/vite/src/main.tsx | 8 ++------ playgrounds/vite/tsconfig.json | 4 ++-- 4 files changed, 20 insertions(+), 14 deletions(-) diff --git a/playgrounds/next/pages/_app.tsx b/playgrounds/next/pages/_app.tsx index 03e7c53c160..468fb9def63 100644 --- a/playgrounds/next/pages/_app.tsx +++ b/playgrounds/next/pages/_app.tsx @@ -1,4 +1,4 @@ -import type { AppProps } from 'next/app.js'; +import type { AppProps } from 'next/app'; import css from 'styled-jsx/css'; import { ThemeProvider } from '@itwin/itwinui-react'; import '@itwin/itwinui-react/styles.css'; diff --git a/playgrounds/next/tsconfig.json b/playgrounds/next/tsconfig.json index f08852093ff..107838eda93 100644 --- a/playgrounds/next/tsconfig.json +++ b/playgrounds/next/tsconfig.json @@ -1,20 +1,30 @@ { "compilerOptions": { "target": "es5", - "lib": ["dom", "dom.iterable", "esnext"], + "lib": [ + "dom", + "dom.iterable", + "esnext" + ], "allowJs": true, "skipLibCheck": true, "strict": true, "forceConsistentCasingInFileNames": true, "noEmit": true, "esModuleInterop": true, - "module": "Node16", - "moduleResolution": "Node16", + "module": "ESNext", + "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", "incremental": true }, - "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], - "exclude": ["node_modules"] + "include": [ + "next-env.d.ts", + "**/*.ts", + "**/*.tsx" + ], + "exclude": [ + "node_modules" + ] } diff --git a/playgrounds/vite/src/main.tsx b/playgrounds/vite/src/main.tsx index e1745b36485..8970a0696ae 100644 --- a/playgrounds/vite/src/main.tsx +++ b/playgrounds/vite/src/main.tsx @@ -1,12 +1,8 @@ import * as React from 'react'; import { createRoot } from 'react-dom/client'; - -// Workaround for emotion/styled not working in ESM: https://github.com/emotion-js/emotion/issues/2730#issuecomment-1205489497 -import _styled from '@emotion/styled'; -const styled = _styled.default; - +import styled from '@emotion/styled'; import { ThemeProvider } from '@itwin/itwinui-react'; -import App from './App.js'; +import App from './App'; import { SvgMoon, SvgSun } from '@itwin/itwinui-icons-react'; import '@itwin/itwinui-react/styles.css'; diff --git a/playgrounds/vite/tsconfig.json b/playgrounds/vite/tsconfig.json index bfc7865a60f..a4fceaf8784 100644 --- a/playgrounds/vite/tsconfig.json +++ b/playgrounds/vite/tsconfig.json @@ -9,8 +9,8 @@ "allowSyntheticDefaultImports": true, "strict": true, "forceConsistentCasingInFileNames": true, - "module": "Node16", - "moduleResolution": "Node16", + "module": "ESNext", + "moduleResolution": "Bundler", "resolveJsonModule": true, "isolatedModules": true, "noEmit": true, From a22d11c74b5fb2a449ab4b52d3889acf2d5d10e4 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Thu, 7 Sep 2023 13:20:02 -0400 Subject: [PATCH 164/196] Use moduleResolution=Node16 for next-playground since next may not support bundler --- playgrounds/next/pages/_app.tsx | 2 +- playgrounds/next/tsconfig.json | 20 +++++--------------- 2 files changed, 6 insertions(+), 16 deletions(-) diff --git a/playgrounds/next/pages/_app.tsx b/playgrounds/next/pages/_app.tsx index 468fb9def63..03e7c53c160 100644 --- a/playgrounds/next/pages/_app.tsx +++ b/playgrounds/next/pages/_app.tsx @@ -1,4 +1,4 @@ -import type { AppProps } from 'next/app'; +import type { AppProps } from 'next/app.js'; import css from 'styled-jsx/css'; import { ThemeProvider } from '@itwin/itwinui-react'; import '@itwin/itwinui-react/styles.css'; diff --git a/playgrounds/next/tsconfig.json b/playgrounds/next/tsconfig.json index 107838eda93..f08852093ff 100644 --- a/playgrounds/next/tsconfig.json +++ b/playgrounds/next/tsconfig.json @@ -1,30 +1,20 @@ { "compilerOptions": { "target": "es5", - "lib": [ - "dom", - "dom.iterable", - "esnext" - ], + "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, "strict": true, "forceConsistentCasingInFileNames": true, "noEmit": true, "esModuleInterop": true, - "module": "ESNext", - "moduleResolution": "node", + "module": "Node16", + "moduleResolution": "Node16", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", "incremental": true }, - "include": [ - "next-env.d.ts", - "**/*.ts", - "**/*.tsx" - ], - "exclude": [ - "node_modules" - ] + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], + "exclude": ["node_modules"] } From eedcc83e69a40f76a9c3594af65d50b1e4462816 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Thu, 7 Sep 2023 13:56:51 -0400 Subject: [PATCH 165/196] Removed react-table.js from package.json --- packages/itwinui-react/package.json | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/itwinui-react/package.json b/packages/itwinui-react/package.json index e528abdaa3d..82b336f291f 100644 --- a/packages/itwinui-react/package.json +++ b/packages/itwinui-react/package.json @@ -35,7 +35,6 @@ "styles.css", "CHANGELOG.md", "LICENSE.md", - "react-table.js", "react-table.d.ts" ], "description": "A react component library for iTwinUI", @@ -64,7 +63,7 @@ "build:styles": "vite build src/styles.js", "build:watch": "concurrently \"tsc -p tsconfig.cjs.json --watch\" \"tsc -p tsconfig.esm.json --watch\"", "build:post": "node ./scripts/postBuild.mjs", - "clean:build": "rimraf esm && rimraf cjs && rimraf react-table.js && rimraf react-table.d.ts", + "clean:build": "rimraf esm && rimraf cjs && rimraf react-table.d.ts", "clean:coverage": "rimraf coverage", "clean": "rimraf .turbo && yarn clean:coverage && yarn clean:build && rimraf node_modules", "test": "yarn test:unit && yarn test:types", From 79602768c0d7e1e55ce7e7370967696efba09a70 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Thu, 7 Sep 2023 14:01:46 -0400 Subject: [PATCH 166/196] Use file extensions when doing relative imports in the vite playground --- playgrounds/vite/src/main.tsx | 2 +- playgrounds/vite/tsconfig.json | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/playgrounds/vite/src/main.tsx b/playgrounds/vite/src/main.tsx index 8970a0696ae..e6f12f53144 100644 --- a/playgrounds/vite/src/main.tsx +++ b/playgrounds/vite/src/main.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { createRoot } from 'react-dom/client'; import styled from '@emotion/styled'; import { ThemeProvider } from '@itwin/itwinui-react'; -import App from './App'; +import App from './App.tsx'; import { SvgMoon, SvgSun } from '@itwin/itwinui-icons-react'; import '@itwin/itwinui-react/styles.css'; diff --git a/playgrounds/vite/tsconfig.json b/playgrounds/vite/tsconfig.json index a4fceaf8784..fe2aae73dc1 100644 --- a/playgrounds/vite/tsconfig.json +++ b/playgrounds/vite/tsconfig.json @@ -14,7 +14,8 @@ "resolveJsonModule": true, "isolatedModules": true, "noEmit": true, - "jsx": "react-jsx" + "jsx": "react-jsx", + "allowImportingTsExtensions": true }, "include": ["src"], "references": [{ "path": "./tsconfig.node.json" }] From bc9f4c8ebe4e9f6e59c94ac7efc67de3af291f4e Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Thu, 7 Sep 2023 14:51:59 -0400 Subject: [PATCH 167/196] Updated changeset --- .changeset/fluffy-pianos-end.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/fluffy-pianos-end.md b/.changeset/fluffy-pianos-end.md index bb9aa038aac..4db117dafc2 100644 --- a/.changeset/fluffy-pianos-end.md +++ b/.changeset/fluffy-pianos-end.md @@ -2,4 +2,4 @@ '@itwin/itwinui-react': major --- -Table now has better type support. Users must now use `TableTypes` from `@itwin/itwinui-react` instead of from `@types/react-table`. +Table now has better type support. Users must now import types from `@itwin/itwinui-react/react-table` instead of from `@types/react-table`. From 10d159e3a4860bba419c7ea83cf035ff09b11be6 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Thu, 7 Sep 2023 14:54:31 -0400 Subject: [PATCH 168/196] Reverted few unnecessary changes --- apps/storybook/tsconfig.json | 1 + packages/itwinui-react/.eslintignore | 4 ---- packages/itwinui-react/.gitignore | 1 - 3 files changed, 1 insertion(+), 5 deletions(-) diff --git a/apps/storybook/tsconfig.json b/apps/storybook/tsconfig.json index b967eee84ae..ef8d4d912ca 100644 --- a/apps/storybook/tsconfig.json +++ b/apps/storybook/tsconfig.json @@ -9,6 +9,7 @@ "sourceMap": false, "allowJs": false, "jsx": "react", + "moduleResolution": "node", "traceResolution": false, "forceConsistentCasingInFileNames": true, "noImplicitReturns": true, diff --git a/packages/itwinui-react/.eslintignore b/packages/itwinui-react/.eslintignore index 8800c2eb360..0033cd845a0 100644 --- a/packages/itwinui-react/.eslintignore +++ b/packages/itwinui-react/.eslintignore @@ -6,8 +6,4 @@ dist scripts cjs esm - -# Ignore all .d.ts except ./react-table.d.ts *.d.ts -!/react-table.d.ts - diff --git a/packages/itwinui-react/.gitignore b/packages/itwinui-react/.gitignore index 559732e1715..9e33270588e 100644 --- a/packages/itwinui-react/.gitignore +++ b/packages/itwinui-react/.gitignore @@ -9,7 +9,6 @@ cjs esm # Build outputs -react-table.js react-table.d.ts # Compiled Styles From d13ddb7b73b734a59be1ff717cf5f3b670ffbfca Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Thu, 7 Sep 2023 14:56:13 -0400 Subject: [PATCH 169/196] Renamed react-table-types.test.tsx to react-table.types-test.tsx to avoid it becoming a Jest test --- packages/itwinui-react/jest.config.cjs | 8 +------- ...ct-table-types.test.tsx => react-table.types-test.tsx} | 0 2 files changed, 1 insertion(+), 7 deletions(-) rename packages/itwinui-react/src/react-table/{react-table-types.test.tsx => react-table.types-test.tsx} (100%) diff --git a/packages/itwinui-react/jest.config.cjs b/packages/itwinui-react/jest.config.cjs index c4abd3bb35c..0835fa61435 100644 --- a/packages/itwinui-react/jest.config.cjs +++ b/packages/itwinui-react/jest.config.cjs @@ -150,13 +150,7 @@ module.exports = { // ], // An array of regexp pattern strings that are matched against all test paths, matched tests are skipped - testPathIgnorePatterns: [ - '/node_modules/', - '/esm/', - '/cjs/', - // Since this file is only to test types and not to run any unit tests - 'src/core/Table/types/react-table-types.test.tsx', - ], + testPathIgnorePatterns: ['/node_modules/', '/esm/', '/cjs/'], // The regexp pattern or array of patterns that Jest uses to detect test files // testRegex: [], diff --git a/packages/itwinui-react/src/react-table/react-table-types.test.tsx b/packages/itwinui-react/src/react-table/react-table.types-test.tsx similarity index 100% rename from packages/itwinui-react/src/react-table/react-table-types.test.tsx rename to packages/itwinui-react/src/react-table/react-table.types-test.tsx From ab9223c4f128b0deb0f97cac2d02f47cef6faace Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Thu, 7 Sep 2023 15:15:01 -0400 Subject: [PATCH 170/196] Removed unnecessary default --- packages/itwinui-react/package.json | 3 +-- playgrounds/vite/src/App.tsx | 1 + 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/itwinui-react/package.json b/packages/itwinui-react/package.json index 82b336f291f..c1030a326cd 100644 --- a/packages/itwinui-react/package.json +++ b/packages/itwinui-react/package.json @@ -19,8 +19,7 @@ } }, "./react-table": { - "types": "./react-table.d.ts", - "default": "./react-table.js" + "types": "./react-table.d.ts" }, "./styles.css": "./styles.css", "./cjs": "./cjs/index.js", diff --git a/playgrounds/vite/src/App.tsx b/playgrounds/vite/src/App.tsx index 308ffd82cc0..0a6d89ab420 100644 --- a/playgrounds/vite/src/App.tsx +++ b/playgrounds/vite/src/App.tsx @@ -1,4 +1,5 @@ import { Button } from '@itwin/itwinui-react'; +import { Column } from '@itwin/itwinui-react/react-table'; const App = () => { return ( From 3c953e9bd32e4c1eefbd820ae9f60a4ef6f212da Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Thu, 7 Sep 2023 15:16:20 -0400 Subject: [PATCH 171/196] Remove redundant --emitDeclarationsOnly --- packages/itwinui-react/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/itwinui-react/package.json b/packages/itwinui-react/package.json index c1030a326cd..76ad01d6d03 100644 --- a/packages/itwinui-react/package.json +++ b/packages/itwinui-react/package.json @@ -75,7 +75,7 @@ "dev": "yarn clean:build && concurrently \"yarn dev:esm\" \"yarn dev:cjs\" \"yarn build:styles --watch\" \"yarn dev:types\"", "dev:esm": "swc src -d esm --watch", "dev:cjs": "swc src -d cjs --watch -C module.type=commonjs", - "dev:types": "concurrently \"tsc -p tsconfig.cjs.json --emitDeclarationOnly --watch --preserveWatchOutput\" \"tsc -p tsconfig.esm.json --emitDeclarationOnly --watch --preserveWatchOutput\" \"tsc -p tsconfig.react-table.json --emitDeclarationOnly --watch --preserveWatchOutput\"", + "dev:types": "concurrently \"tsc -p tsconfig.cjs.json --emitDeclarationOnly --watch --preserveWatchOutput\" \"tsc -p tsconfig.esm.json --emitDeclarationOnly --watch --preserveWatchOutput\" \"tsc -p tsconfig.react-table.json --watch --preserveWatchOutput\"", "dev:styles": "yarn build:styles --watch" }, "dependencies": { From ac68f3f540ea6516ecf1536861857705d402df68 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Thu, 7 Sep 2023 15:25:14 -0400 Subject: [PATCH 172/196] Move custom additions to the top --- .../src/react-table/react-table.ts | 51 ++++++++++--------- 1 file changed, 26 insertions(+), 25 deletions(-) diff --git a/packages/itwinui-react/src/react-table/react-table.ts b/packages/itwinui-react/src/react-table/react-table.ts index 90d80bbac1f..b4b513ec0e9 100644 --- a/packages/itwinui-react/src/react-table/react-table.ts +++ b/packages/itwinui-react/src/react-table/react-table.ts @@ -7,7 +7,32 @@ /* eslint-disable @typescript-eslint/no-empty-interface */ /* eslint-disable @typescript-eslint/ban-types */ -// This file is a hard fork of @types/react-table v7 +//------------------------------------------------------------------------------- +// Custom Additions (parts from the old file called react-table-config.ts) + +export type FieldType = 'text' | 'number' | 'date' | string; + +export type CellRendererProps = {}> = { + /** + * Cell HTML props passed from the Table. + */ + cellElementProps: TableCellProps; + /** + * Table specific cell props like `column`, `row`. + */ + cellProps: CellProps; + /** + * Cell's content. + */ + children: React.ReactNode; + /** + * Function that returns whether the cell is disabled. + */ + isDisabled?: (rowData: D) => boolean; +}; + +//------------------------------------------------------------------------------- +// Everything below is a hard fork of @types/react-table v7 // The original code is licensed under MIT - https://unpkg.com/browse/@types/react-table@7.7.15/LICENSE // // A few reasons for this hard fork are: @@ -1297,27 +1322,3 @@ export declare function makeRenderer( column: ColumnInstance, meta?: any, ): ReactElement; - -//------------------------------------------------------------------------------- -// Custom Additions (parts from the old file called react-table-config.ts) - -export type FieldType = 'text' | 'number' | 'date' | string; - -export type CellRendererProps = {}> = { - /** - * Cell HTML props passed from the Table. - */ - cellElementProps: TableCellProps; - /** - * Table specific cell props like `column`, `row`. - */ - cellProps: CellProps; - /** - * Cell's content. - */ - children: React.ReactNode; - /** - * Function that returns whether the cell is disabled. - */ - isDisabled?: (rowData: D) => boolean; -}; From 7c1ca720e1d30f863057c2f15f333b637e42784b Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Thu, 7 Sep 2023 15:26:04 -0400 Subject: [PATCH 173/196] Corrected the path of tsconfig tests --- packages/itwinui-react/tsconfig.test.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/itwinui-react/tsconfig.test.json b/packages/itwinui-react/tsconfig.test.json index 9d596311991..3cc7301e3d2 100644 --- a/packages/itwinui-react/tsconfig.test.json +++ b/packages/itwinui-react/tsconfig.test.json @@ -1,5 +1,5 @@ { "extends": "./tsconfig.json", // TODO: Test all the files, and not just the Table files or just the build files. - "include": ["src/core/Table/**/*"] + "include": ["src/core/Table/**/*", "src/react-table/*"] } From 21d1c0f376028ea04eb850d2251e03749ff14dfb Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Thu, 7 Sep 2023 15:45:52 -0400 Subject: [PATCH 174/196] Added generic to `
` --- .../itwinui-react/src/react-table/react-table.types-test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/itwinui-react/src/react-table/react-table.types-test.tsx b/packages/itwinui-react/src/react-table/react-table.types-test.tsx index 973dbb7b6bd..1e345535af4 100644 --- a/packages/itwinui-react/src/react-table/react-table.types-test.tsx +++ b/packages/itwinui-react/src/react-table/react-table.types-test.tsx @@ -745,7 +745,7 @@ import { SvgMore } from 'src/core/utils/index.js'; setGlobalFilter(e.target.value) } /> -
columns={columns} data={data} emptyTableContent='No data.' From 2f8cec68743d317548640d40123aadba4d25654d Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Thu, 7 Sep 2023 15:49:41 -0400 Subject: [PATCH 175/196] Removed unnecessary type assertions --- .../react-table/react-table.types-test.tsx | 37 ++++++++----------- 1 file changed, 15 insertions(+), 22 deletions(-) diff --git a/packages/itwinui-react/src/react-table/react-table.types-test.tsx b/packages/itwinui-react/src/react-table/react-table.types-test.tsx index 1e345535af4..c991c8db35c 100644 --- a/packages/itwinui-react/src/react-table/react-table.types-test.tsx +++ b/packages/itwinui-react/src/react-table/react-table.types-test.tsx @@ -599,28 +599,21 @@ import { SvgMore } from 'src/core/utils/index.js'; [], ) satisfies TableRowDataType[]; - const onFilter = React.useCallback( - ( - filters: TableFilterValue[], - state: TableTypes.TableState, - filteredData: TableTypes.Row[], - ) => { - // rowInfo is used due to JSON errors when displaying row data - let rowInfo = '['; - filteredData.forEach((row) => { - rowInfo += `${JSON.stringify(row.original)},`; - }); - rowInfo = rowInfo.slice(0, rowInfo.length - 1); - rowInfo += ']'; - - console.log( - `Filter changed. Filters: ${JSON.stringify( - filters, - )}, State: ${JSON.stringify(state)}, Rows: ${rowInfo}`, - ); - }, - [], - ) satisfies NonNullable['onFilter']>; + const onFilter = React.useCallback((filters, state, filteredData) => { + // rowInfo is used due to JSON errors when displaying row data + let rowInfo = '['; + filteredData?.forEach((row) => { + rowInfo += `${JSON.stringify(row.original)},`; + }); + rowInfo = rowInfo.slice(0, rowInfo.length - 1); + rowInfo += ']'; + + console.log( + `Filter changed. Filters: ${JSON.stringify( + filters, + )}, State: ${JSON.stringify(state)}, Rows: ${rowInfo}`, + ); + }, []) satisfies NonNullable['onFilter']>; const onSelect = React.useCallback( (rows, state) => From cf815ff38bbb4953c0486f9924369e1518b673d3 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Fri, 8 Sep 2023 09:30:14 -0400 Subject: [PATCH 176/196] Moved TableFilterProps to the custom additions section. Also moved all imports up --- .../src/react-table/react-table.ts | 42 +++++++++---------- 1 file changed, 21 insertions(+), 21 deletions(-) diff --git a/packages/itwinui-react/src/react-table/react-table.ts b/packages/itwinui-react/src/react-table/react-table.ts index b4b513ec0e9..70dc8be7ebe 100644 --- a/packages/itwinui-react/src/react-table/react-table.ts +++ b/packages/itwinui-react/src/react-table/react-table.ts @@ -7,6 +7,18 @@ /* eslint-disable @typescript-eslint/no-empty-interface */ /* eslint-disable @typescript-eslint/ban-types */ +import type { + ChangeEvent, + ComponentType, + CSSProperties, + DependencyList, + EffectCallback, + MouseEvent, + ReactElement, + ReactFragment, + ReactNode, +} from 'react'; + //------------------------------------------------------------------------------- // Custom Additions (parts from the old file called react-table-config.ts) @@ -31,27 +43,6 @@ export type CellRendererProps = {}> = { isDisabled?: (rowData: D) => boolean; }; -//------------------------------------------------------------------------------- -// Everything below is a hard fork of @types/react-table v7 -// The original code is licensed under MIT - https://unpkg.com/browse/@types/react-table@7.7.15/LICENSE -// -// A few reasons for this hard fork are: -// - iTwinUI Table does not offer all the functionality that `react-table` offers. (no nested columns) -// - `@types/react-table` expects row data to extend `object`. However, iTwinUI Table's expects row data to extend `Record`. -// - This gave type errors like: `Type Record is not assignable to type TableStoryDataType.` - -import type { - ChangeEvent, - ComponentType, - CSSProperties, - DependencyList, - EffectCallback, - MouseEvent, - ReactElement, - ReactFragment, - ReactNode, -} from 'react'; - export type TableFilterProps> = FilterProps & { /** @@ -72,6 +63,15 @@ export type TableFilterProps> = clearFilter: () => void; }; +//------------------------------------------------------------------------------- +// Everything below is a hard fork of @types/react-table v7 +// The original code is licensed under MIT - https://unpkg.com/browse/@types/react-table@7.7.15/LICENSE +// +// A few reasons for this hard fork are: +// - iTwinUI Table does not offer all the functionality that `react-table` offers. (no nested columns) +// - `@types/react-table` expects row data to extend `object`. However, iTwinUI Table's expects row data to extend `Record`. +// - This gave type errors like: `Type Record is not assignable to type TableStoryDataType.` + export interface TableOptions> extends Omit, 'data' | 'columns'>, UseRowSelectOptions, From 2cd4729b017fe1ef7c55ac523a7303fb6436672d Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Fri, 8 Sep 2023 10:44:14 -0400 Subject: [PATCH 177/196] Added clarifying comment --- .../itwinui-react/src/react-table/react-table.types-test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/itwinui-react/src/react-table/react-table.types-test.tsx b/packages/itwinui-react/src/react-table/react-table.types-test.tsx index c991c8db35c..ea7f1026afb 100644 --- a/packages/itwinui-react/src/react-table/react-table.types-test.tsx +++ b/packages/itwinui-react/src/react-table/react-table.types-test.tsx @@ -106,7 +106,7 @@ import { SvgMore } from 'src/core/utils/index.js'; }; /** - * Confirm that `Column` and `TableTypes.Column` are equivalent. + * Confirm that `react-table` (e.g. `TableTypes.Column`) and `src/react-table/react-table.js` (e.g. `Column`) are equivalent. */ () => { const columns1: TableTypes.Column<{ From d0c2a6a1dc49c0db4ecf7e8c03a83a84886c9b66 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Fri, 8 Sep 2023 11:13:21 -0400 Subject: [PATCH 178/196] Changed all subsets of TableRoeDataType to TableRowDataType --- .../react-table/react-table.types-test.tsx | 29 ++++++------------- 1 file changed, 9 insertions(+), 20 deletions(-) diff --git a/packages/itwinui-react/src/react-table/react-table.types-test.tsx b/packages/itwinui-react/src/react-table/react-table.types-test.tsx index ea7f1026afb..bae6fa67091 100644 --- a/packages/itwinui-react/src/react-table/react-table.types-test.tsx +++ b/packages/itwinui-react/src/react-table/react-table.types-test.tsx @@ -21,10 +21,7 @@ import { SelectionColumn, ExpanderColumn, } from '../core/Table/index.js'; -import type { - TableFilterValue, - TablePaginatorRendererProps, -} from '../core/Table/index.js'; +import type { TablePaginatorRendererProps } from '../core/Table/index.js'; // Table types can be imported with an alias or selective types can be imported too. import * as _TableTypes from 'src/react-table/react-table.js'; @@ -340,12 +337,9 @@ import { SvgMore } from 'src/core/utils/index.js'; ]; }, []); - const isRowDisabled = React.useCallback( - (rowData: { name: string; description: string }) => { - return rowData.name === 'Name2'; - }, - [], - ); + const isRowDisabled = React.useCallback((rowData: TableRowDataType) => { + return rowData.name === 'Name2'; + }, []); const isCheckboxDisabled = React.useCallback( (rowData: (typeof data)[number]) => { return rowData.name === 'Name1'; @@ -480,9 +474,7 @@ import { SvgMore } from 'src/core/utils/index.js'; id: 'click-me', Header: 'Click', width: 100, - Cell: ( - props: TableTypes.CellProps<{ name: string; description: string }>, - ) => { + Cell: (props: TableTypes.CellProps) => { return ( ['onSelect'] - >; + ) satisfies NonNullable['onSelect']>; const onRowClick = React.useCallback( (event: React.MouseEvent, row: TableTypes.Row) => @@ -633,9 +623,8 @@ import { SvgMore } from 'src/core/utils/index.js'; [], ); - const onClickHandler = ( - props: TableTypes.CellProps<{ name: string; description: string }>, - ) => console.log(props.row.original.name); + const onClickHandler = (props: TableTypes.CellProps) => + console.log(props.row.original.name); const onSort = React.useCallback( (state) => @@ -670,7 +659,7 @@ import { SvgMore } from 'src/core/utils/index.js'; >; const rowProps = React.useCallback( - (row: TableTypes.Row<{ name: string; description: string }>) => { + (row: TableTypes.Row) => { return { onMouseEnter: () => { console.log(`Hovered over ${row.original.name}`); From fac126944cc9ecde664bb05a65a145b3e2da7580 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Fri, 8 Sep 2023 11:15:27 -0400 Subject: [PATCH 179/196] Fixed missing dep in dep array warning --- .../src/react-table/react-table.types-test.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/itwinui-react/src/react-table/react-table.types-test.tsx b/packages/itwinui-react/src/react-table/react-table.types-test.tsx index bae6fa67091..93c5d984828 100644 --- a/packages/itwinui-react/src/react-table/react-table.types-test.tsx +++ b/packages/itwinui-react/src/react-table/react-table.types-test.tsx @@ -397,6 +397,12 @@ import { SvgMore } from 'src/core/utils/index.js'; [], ); + const onClickHandler = React.useCallback( + (props: TableTypes.CellProps) => + console.log(props.row.original.name), + [], + ); + const columns = React.useMemo( () => [ SelectionColumn({ @@ -514,6 +520,7 @@ import { SvgMore } from 'src/core/utils/index.js'; translatedLabels, cellRenderer, formatDate, + onClickHandler, menuItems, isRowDisabled, ], @@ -623,9 +630,6 @@ import { SvgMore } from 'src/core/utils/index.js'; [], ); - const onClickHandler = (props: TableTypes.CellProps) => - console.log(props.row.original.name); - const onSort = React.useCallback( (state) => console.log(`Sort changed. Table state: ${JSON.stringify(state)}`), From c4d7d5947e8a17d593c433f05a8808b0231f05be Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Fri, 8 Sep 2023 11:25:15 -0400 Subject: [PATCH 180/196] Removed unnecessary test --- .../react-table/react-table.types-test.tsx | 58 ------------------- 1 file changed, 58 deletions(-) diff --git a/packages/itwinui-react/src/react-table/react-table.types-test.tsx b/packages/itwinui-react/src/react-table/react-table.types-test.tsx index 93c5d984828..8e5bc1a9ec8 100644 --- a/packages/itwinui-react/src/react-table/react-table.types-test.tsx +++ b/packages/itwinui-react/src/react-table/react-table.types-test.tsx @@ -102,64 +102,6 @@ import { SvgMore } from 'src/core/utils/index.js'; }>[]; }; -/** - * Confirm that `react-table` (e.g. `TableTypes.Column`) and `src/react-table/react-table.js` (e.g. `Column`) are equivalent. - */ -() => { - const columns1: TableTypes.Column<{ - header1: string; - header2: string; - }>[] = [ - { - Header: 'Header 1', - accessor: 'header1', - }, - { - Header: 'Header 2', - accessor: 'header2', - }, - ] as Column<{ - header1: string; - header2: string; - }>[]; - - const columns2: Column<{ - header1: string; - header2: string; - }>[] = [ - { - Header: 'Header 1', - accessor: 'header1', - }, - { - Header: 'Header 2', - accessor: 'header2', - }, - ] as TableTypes.Column<{ - header1: string; - header2: string; - }>[]; - - const data: Array<{ - header1: string; - header2: string; - }> = [ - { - header1: 'row1', - header2: 'row1', - }, - { - header1: 'row2', - header2: 'row2', - }, - ]; - -
-
-
- ; -}; - /** * When creating variables (with satisfies) that are passed as props. */ From b71a06dc008450444fc36d35493a7e1985d3b3d6 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Fri, 8 Sep 2023 11:35:23 -0400 Subject: [PATCH 181/196] Revert "Removed unnecessary test" This reverts commit c4d7d5947e8a17d593c433f05a8808b0231f05be. --- .../react-table/react-table.types-test.tsx | 58 +++++++++++++++++++ 1 file changed, 58 insertions(+) diff --git a/packages/itwinui-react/src/react-table/react-table.types-test.tsx b/packages/itwinui-react/src/react-table/react-table.types-test.tsx index 8e5bc1a9ec8..93c5d984828 100644 --- a/packages/itwinui-react/src/react-table/react-table.types-test.tsx +++ b/packages/itwinui-react/src/react-table/react-table.types-test.tsx @@ -102,6 +102,64 @@ import { SvgMore } from 'src/core/utils/index.js'; }>[]; }; +/** + * Confirm that `react-table` (e.g. `TableTypes.Column`) and `src/react-table/react-table.js` (e.g. `Column`) are equivalent. + */ +() => { + const columns1: TableTypes.Column<{ + header1: string; + header2: string; + }>[] = [ + { + Header: 'Header 1', + accessor: 'header1', + }, + { + Header: 'Header 2', + accessor: 'header2', + }, + ] as Column<{ + header1: string; + header2: string; + }>[]; + + const columns2: Column<{ + header1: string; + header2: string; + }>[] = [ + { + Header: 'Header 1', + accessor: 'header1', + }, + { + Header: 'Header 2', + accessor: 'header2', + }, + ] as TableTypes.Column<{ + header1: string; + header2: string; + }>[]; + + const data: Array<{ + header1: string; + header2: string; + }> = [ + { + header1: 'row1', + header2: 'row1', + }, + { + header1: 'row2', + header2: 'row2', + }, + ]; + +
+
+
+ ; +}; + /** * When creating variables (with satisfies) that are passed as props. */ From 03243adfdae178b61458966d28cf8b7d7c736a35 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Fri, 8 Sep 2023 11:42:40 -0400 Subject: [PATCH 182/196] Replaced all react-table types alias imports with individual imports to reduce diff and show the easier import method --- apps/storybook/src/Table.stories.tsx | 169 ++++++++++++--------------- 1 file changed, 75 insertions(+), 94 deletions(-) diff --git a/apps/storybook/src/Table.stories.tsx b/apps/storybook/src/Table.stories.tsx index 32675de8c00..de5762041b4 100644 --- a/apps/storybook/src/Table.stories.tsx +++ b/apps/storybook/src/Table.stories.tsx @@ -3,6 +3,15 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import React, { useCallback } from 'react'; +import type { + CellProps, + CellRendererProps, + Column, + Row, + TableInstance, + TableState, + TableOptions, +} from '@itwin/itwinui-react/react-table'; import { Checkbox, Code, @@ -30,7 +39,6 @@ import type { TableFilterValue, TablePaginatorRendererProps, } from '@itwin/itwinui-react'; -import * as TableTypes from '@itwin/itwinui-react/react-table'; import { useMemo, useState } from '@storybook/addons'; import { action } from '@storybook/addon-actions'; import { @@ -53,7 +61,7 @@ export default { export const Basic = () => { const onClickHandler = ( - props: TableTypes.CellProps<{ name: string; description: string }>, + props: CellProps<{ name: string; description: string }>, ) => action(props.row.original.name)(); const columns = useMemo( @@ -73,9 +81,7 @@ export const Basic = () => { id: 'click-me', Header: 'Click', width: 100, - Cell: ( - props: TableTypes.CellProps<{ name: string; description: string }>, - ) => { + Cell: (props: CellProps<{ name: string; description: string }>) => { const onClick = () => onClickHandler(props); return ( @@ -102,7 +108,7 @@ export const Basic = () => { export const SelectableSingle = () => { const onRowClick = useCallback( - (event: React.MouseEvent, row: TableTypes.Row) => + (event: React.MouseEvent, row: Row) => action(`Row clicked: ${JSON.stringify(row.original)}`)(), [], ); @@ -124,9 +130,7 @@ export const SelectableSingle = () => { id: 'click-me', Header: 'Click', width: 100, - Cell: ( - props: TableTypes.CellProps<{ name: string; description: string }>, - ) => { + Cell: (props: CellProps<{ name: string; description: string }>) => { return ( { >; const onRowClick = useCallback( - (event: React.MouseEvent, row: TableTypes.Row) => + (event: React.MouseEvent, row: Row) => action(`Row clicked: ${JSON.stringify(row.original)}`)(), [], ); @@ -201,9 +205,7 @@ export const SelectableMulti = () => { id: 'click-me', Header: 'Click', width: 100, - Cell: ( - props: TableTypes.CellProps<{ name: string; description: string }>, - ) => { + Cell: (props: CellProps<{ name: string; description: string }>) => { return ( { export const Sortable = () => { const onClickHandler = ( - props: TableTypes.CellProps<{ name: string; description: string }>, + props: CellProps<{ name: string; description: string }>, ) => action(props.row.original.name)(); const onSort = useCallback( @@ -279,9 +281,7 @@ export const Sortable = () => { id: 'click-me', Header: 'Click', width: 100, - Cell: ( - props: TableTypes.CellProps<{ name: string; description: string }>, - ) => { + Cell: (props: CellProps<{ name: string; description: string }>) => { const onClick = () => onClickHandler(props); return ( @@ -352,7 +352,7 @@ export const Filters = () => { ); const columns = useMemo( - (): TableTypes.Column[] => [ + (): Column[] => [ { id: 'index', Header: '#', @@ -381,7 +381,7 @@ export const Filters = () => { id: 'ids', Header: 'IDs (enter one of the IDs in the filter)', accessor: 'ids', - Cell: (props: TableTypes.CellProps) => { + Cell: (props: CellProps) => { return <>{props.row.original.ids.join(', ')}; }, Filter: tableFilters.TextFilter(translatedLabels), @@ -391,7 +391,7 @@ export const Filters = () => { id: 'startDate', Header: 'Start date', accessor: 'startDate', - Cell: (props: TableTypes.CellProps) => { + Cell: (props: CellProps) => { return <>{formatDate(props.row.original.startDate)}; }, Filter: tableFilters.DateRangeFilter({ @@ -404,7 +404,7 @@ export const Filters = () => { Header: 'End date', // Converting string to Date for filtering accessor: (rowData) => new Date(rowData.endDate), - Cell: (props: TableTypes.CellProps) => { + Cell: (props: CellProps) => { return <>{formatDate(new Date(props.row.original.endDate))}; }, Filter: tableFilters.DateRangeFilter({ @@ -449,8 +449,8 @@ export const Filters = () => { const onFilter = React.useCallback( ( filters: TableFilterValue[], - state: TableTypes.TableState, - filteredData: TableTypes.Row[], + state: TableState, + filteredData: Row[], ) => { // rowInfo is used due to JSON errors when displaying row data let rowInfo = '['; @@ -485,7 +485,7 @@ export const GlobalFilter = () => { }; const onClickHandler = ( - props: TableTypes.CellProps<{ name: string; description: string }>, + props: CellProps<{ name: string; description: string }>, ) => action(props.row.original.name)(); const columns = useMemo( @@ -507,9 +507,7 @@ export const GlobalFilter = () => { id: 'click-me', Header: 'Click', width: 100, - Cell: ( - props: TableTypes.CellProps<{ name: string; description: string }>, - ) => { + Cell: (props: CellProps<{ name: string; description: string }>) => { const onClick = () => onClickHandler(props); return ( @@ -600,7 +598,7 @@ export const Expandable = () => { ); const expandedSubComponent = useCallback( - (row: TableTypes.Row) => ( + (row: Row) => (
Extra information
@@ -726,7 +724,7 @@ export const ExpandableSubrows = () => {
 
 export const LazyLoading = () => {
   const onClickHandler = (
-    props: TableTypes.CellProps<{ name: string; description: string }>,
+    props: CellProps<{ name: string; description: string }>,
   ) => action(props.row.original.name)();
 
   const columns = useMemo(
@@ -747,9 +745,7 @@ export const LazyLoading = () => {
         id: 'click-me',
         Header: 'Click',
         width: 100,
-        Cell: (
-          props: TableTypes.CellProps<{ name: string; description: string }>,
-        ) => {
+        Cell: (props: CellProps<{ name: string; description: string }>) => {
           const onClick = () => onClickHandler(props);
           return (
             
@@ -804,7 +800,7 @@ export const LazyLoading = () => {
 
 export const RowInViewport = () => {
   const onClickHandler = (
-    props: TableTypes.CellProps<{ name: string; description: string }>,
+    props: CellProps<{ name: string; description: string }>,
   ) => action(props.row.original.name)();
 
   const columns = useMemo(
@@ -824,9 +820,7 @@ export const RowInViewport = () => {
         id: 'click-me',
         Header: 'Click',
         width: 100,
-        Cell: (
-          props: TableTypes.CellProps<{ name: string; description: string }>,
-        ) => {
+        Cell: (props: CellProps<{ name: string; description: string }>) => {
           const onClick = () => onClickHandler(props);
           return (
             
@@ -894,7 +888,7 @@ export const RowInViewport = () => {
 
 export const DisabledRows = () => {
   const onRowClick = useCallback(
-    (event: React.MouseEvent, row: TableTypes.Row) =>
+    (event: React.MouseEvent, row: Row) =>
       action(`Row clicked: ${JSON.stringify(row.original)}`)(),
     [],
   );
@@ -924,9 +918,7 @@ export const DisabledRows = () => {
         Header: 'Click',
         width: 100,
         // Manually handling disabled state in custom cells
-        Cell: (
-          props: TableTypes.CellProps<{ name: string; description: string }>,
-        ) => (
+        Cell: (props: CellProps<{ name: string; description: string }>) => (
           <>
             {isRowDisabled(props.row.original) ? (
               <>Click me!
@@ -952,7 +944,7 @@ export const DisabledRows = () => {
   );
 
   const expandedSubComponent = useCallback(
-    (row: TableTypes.Row) => (
+    (row: Row) => (
       
Extra information
@@ -1085,7 +1077,7 @@ export const ControlledState = () => {
     subRows: DemoData[];
   };
 
-  const tableInstance = React.useRef>();
+  const tableInstance = React.useRef>();
   const [selectedRows, setSelectedRows] = useState([]);
   const [expandedRows, setExpandedRows] = useState([]);
 
@@ -1103,7 +1095,7 @@ export const ControlledState = () => {
       },
     ],
     [],
-  ) satisfies TableTypes.Column[];
+  ) satisfies Column[];
 
   const data: DemoData[] = useMemo(
     () => [
@@ -1232,9 +1224,7 @@ export const ControlledState = () => {
           useCallback((newState, action, prevState, instance) => {
             tableInstance.current = instance;
             return newState;
-          }, []) satisfies NonNullable<
-            TableTypes.TableOptions['stateReducer']
-          >
+          }, []) satisfies NonNullable['stateReducer']>
         }
         isSelectable
         onSelect={
@@ -1249,7 +1239,7 @@ export const ControlledState = () => {
         }
         getRowId={
           useCallback((rowData) => rowData.id, []) satisfies NonNullable<
-            TableTypes.TableOptions['getRowId']
+            TableOptions['getRowId']
           >
         }
         data={data}
@@ -1326,7 +1316,7 @@ export const Full = () => {
   );
 
   const expandedSubComponent = useCallback(
-    (row: TableTypes.Row) => (
+    (row: Row) => (
       
Extra information
@@ -1338,7 +1328,7 @@ export const Full = () => {
   );
 
   const rowProps = useCallback(
-    (row: TableTypes.Row<{ name: string; description: string }>) => {
+    (row: Row<{ name: string; description: string }>) => {
       return {
         onMouseEnter: () => {
           action(`Hovered over ${row.original.name}`)();
@@ -1438,7 +1428,7 @@ export const Full2 = () => {
   }, []);
 
   const columns = useMemo(
-    (): TableTypes.Column[] => [
+    (): Column[] => [
       {
         id: 'product',
         Header: 'Product',
@@ -1458,7 +1448,7 @@ export const Full2 = () => {
         filter: 'between',
         disableReordering: true,
         sortType: 'number',
-        Cell: (props: TableTypes.CellProps) => {
+        Cell: (props: CellProps) => {
           return <>${props.value};
         },
         sticky: 'left',
@@ -1480,9 +1470,7 @@ export const Full2 = () => {
         filter: 'between',
         sortType: 'number',
         width: 400,
-        cellRenderer: (
-          props: TableTypes.CellRendererProps,
-        ) => {
+        cellRenderer: (props: CellRendererProps) => {
           return (
              {
         filter: 'between',
         sortType: 'number',
         width: 400,
-        Cell: (props: TableTypes.CellProps) => {
+        Cell: (props: CellProps) => {
           return <>{props.value} day(s);
         },
       },
       {
         ...ActionColumn({ columnManager: true }),
-        Cell: (props: TableTypes.CellProps) => (
+        Cell: (props: CellProps) => (
           
              {
     [isRowDisabled, menuItems],
   );
 
-  const rowProps = useCallback((row: TableTypes.Row) => {
+  const rowProps = useCallback((row: Row) => {
     return {
       status: row.original.status satisfies TableStoryDataType['status'],
     };
@@ -1665,7 +1653,7 @@ Localized.parameters = {
 
 export const Condensed = () => {
   const onClickHandler = (
-    props: TableTypes.CellProps<{ name: string; description: string }>,
+    props: CellProps<{ name: string; description: string }>,
   ) => action(props.row.original.name)();
 
   const onExpand = useCallback(
@@ -1698,9 +1686,7 @@ export const Condensed = () => {
         id: 'click-me',
         Header: 'Click',
         width: 100,
-        Cell: (
-          props: TableTypes.CellProps<{ name: string; description: string }>,
-        ) => {
+        Cell: (props: CellProps<{ name: string; description: string }>) => {
           const onClick = () => onClickHandler(props);
           return (
             
@@ -1806,7 +1792,7 @@ export const Editable = () => {
   );
 
   const cellRenderer = useCallback(
-    (props: TableTypes.CellRendererProps) => (
+    (props: CellRendererProps) => (
       <>
         {!isRowDisabled(props.cellProps.row.original) &&
         props.cellProps.value !== 'Fetching...' ? (
@@ -1820,7 +1806,7 @@ export const Editable = () => {
   );
 
   const columns = React.useMemo(
-    (): TableTypes.Column[] => [
+    (): Column[] => [
       {
         id: 'name',
         Header: 'Name',
@@ -2319,7 +2305,7 @@ export const ResizableColumns = () => {
   };
 
   const columns = useMemo(
-    (): TableTypes.Column[] => [
+    (): Column[] => [
       {
         id: 'index',
         Header: '#',
@@ -2350,7 +2336,7 @@ export const ResizableColumns = () => {
         id: 'startDate',
         Header: 'Start date',
         accessor: 'startDate',
-        Cell: (props: TableTypes.CellProps) => {
+        Cell: (props: CellProps) => {
           return (
             <>{props.row.original.startDate.toLocaleDateString('en-US')}
           );
@@ -2361,7 +2347,7 @@ export const ResizableColumns = () => {
       {
         id: 'endDate',
         Header: 'End date',
-        Cell: (props: TableTypes.CellProps) => {
+        Cell: (props: CellProps) => {
           return <>{props.row.original.endDate.toLocaleDateString('en-US')};
         },
         maxWidth: 200,
@@ -2577,7 +2563,7 @@ export const HorizontalScroll = () => {
   );
 
   const columns = useMemo(
-    (): TableTypes.Column<(typeof data)[number]>[] => [
+    (): Column<(typeof data)[number]>[] => [
       {
         id: 'product',
         Header: 'Product',
@@ -2589,7 +2575,7 @@ export const HorizontalScroll = () => {
         Header: 'Price',
         accessor: 'price',
         width: 400,
-        Cell: (props: TableTypes.CellProps<(typeof data)[0]>) => {
+        Cell: (props: CellProps<(typeof data)[0]>) => {
           return <>{`$${props.value}`};
         },
       },
@@ -2610,7 +2596,7 @@ export const HorizontalScroll = () => {
         Header: 'Delivery Time',
         accessor: 'deliveryTime',
         width: 400,
-        Cell: (props: TableTypes.CellProps<(typeof data)[0]>) => {
+        Cell: (props: CellProps<(typeof data)[0]>) => {
           return <>{`${props.value} day(s)`};
         },
       },
@@ -2644,7 +2630,7 @@ HorizontalScroll.decorators = [
 
 export const Virtualized = () => {
   const onClickHandler = (
-    props: TableTypes.CellProps<{ name: string; description: string }>,
+    props: CellProps<{ name: string; description: string }>,
   ) => action(props.row.original.name)();
 
   const columns = useMemo(
@@ -2663,9 +2649,7 @@ export const Virtualized = () => {
         id: 'click-me',
         Header: 'Click',
         width: 100,
-        Cell: (
-          props: TableTypes.CellProps<{ name: string; description: string }>,
-        ) => {
+        Cell: (props: CellProps<{ name: string; description: string }>) => {
           const onClick = () => onClickHandler(props);
           return (
             
@@ -2708,8 +2692,7 @@ export const ScrollToRow = () => {
     description: string;
   };
   const onClickHandler = React.useCallback(
-    (props: TableTypes.CellProps) =>
-      action(props.row.original.name)(),
+    (props: CellProps) => action(props.row.original.name)(),
     [],
   );
 
@@ -2731,7 +2714,7 @@ export const ScrollToRow = () => {
         id: 'click-me',
         Header: 'Click',
         width: 100,
-        Cell: (props: TableTypes.CellProps) => {
+        Cell: (props: CellProps) => {
           const onClick = () => onClickHandler(props);
           return (
             
@@ -2768,10 +2751,8 @@ export const ScrollToRow = () => {
       style={{ maxHeight: '90vh' }}
       data={data}
       scrollToRow={React.useCallback(
-        (
-          rows: TableTypes.Row[],
-          data: TableStoryDataType[],
-        ) => rows.findIndex((row) => row.original.id === data[12345].id),
+        (rows: Row[], data: TableStoryDataType[]) =>
+          rows.findIndex((row) => row.original.id === data[12345].id),
         [],
       )}
     />
@@ -2918,7 +2899,7 @@ export const DraggableColumns = () => {
   );
 
   const columns = useMemo(
-    (): TableTypes.Column[] => [
+    (): Column[] => [
       {
         id: 'product',
         Header: 'Product',
@@ -2929,7 +2910,7 @@ export const DraggableColumns = () => {
         id: 'price',
         Header: 'Price',
         accessor: 'price',
-        Cell: (props: TableTypes.CellProps<(typeof data)[0]>) => {
+        Cell: (props: CellProps<(typeof data)[0]>) => {
           return <>{`$${props.value}`};
         },
       },
@@ -2947,7 +2928,7 @@ export const DraggableColumns = () => {
         id: 'deliveryTime',
         Header: 'Delivery Time',
         accessor: 'deliveryTime',
-        Cell: (props: TableTypes.CellProps<(typeof data)[0]>) => {
+        Cell: (props: CellProps<(typeof data)[0]>) => {
           return <>{`${props.value} day(s)`};
         },
       },
@@ -3001,7 +2982,7 @@ export const CustomizedColumns = () => {
   }, []);
 
   const subComponent = useCallback(
-    (row: TableTypes.Row) => (
+    (row: Row) => (
       
Extra information
@@ -3013,7 +2994,7 @@ export const CustomizedColumns = () => {
   );
 
   const columns = useMemo(
-    (): TableTypes.Column<(typeof data)[number]>[] => [
+    (): Column<(typeof data)[number]>[] => [
       SelectionColumn({
         isDisabled: isCheckboxDisabled,
       }),
@@ -3079,7 +3060,7 @@ export const ColumnManager = () => {
   };
 
   const columns = useMemo(
-    (): TableTypes.Column[] => [
+    (): Column[] => [
       {
         id: 'index',
         Header: '#',
@@ -3106,7 +3087,7 @@ export const ColumnManager = () => {
         id: 'startDate',
         Header: 'Start date',
         accessor: 'startDate',
-        Cell: (props: TableTypes.CellProps) => {
+        Cell: (props: CellProps) => {
           return (
             <>{props.row.original.startDate.toLocaleDateString('en-US')}
           );
@@ -3116,7 +3097,7 @@ export const ColumnManager = () => {
         id: 'endDate',
         Header: 'End date',
         accessor: 'endDate',
-        Cell: (props: TableTypes.CellProps) => {
+        Cell: (props: CellProps) => {
           return <>{props.row.original.endDate.toLocaleDateString('en-US')};
         },
       },
@@ -3321,7 +3302,7 @@ export const StickyColumns = () => {
   }, []);
 
   const columns = useMemo(
-    (): TableTypes.Column<(typeof data)[number]>[] => [
+    (): Column<(typeof data)[number]>[] => [
       {
         id: 'product',
         Header: 'Product',
@@ -3334,7 +3315,7 @@ export const StickyColumns = () => {
         Header: 'Price',
         accessor: 'price',
         width: 150,
-        Cell: (props: TableTypes.CellProps<(typeof data)[0]>) => {
+        Cell: (props: CellProps<(typeof data)[0]>) => {
           return <>${props.value};
         },
         sticky: 'left',
@@ -3356,7 +3337,7 @@ export const StickyColumns = () => {
         Header: 'Delivery Time',
         accessor: 'deliveryTime',
         width: 400,
-        Cell: (props: TableTypes.CellProps<(typeof data)[0]>) => {
+        Cell: (props: CellProps<(typeof data)[0]>) => {
           return <>{props.value} day(s);
         },
       },
@@ -3411,7 +3392,7 @@ export const StatusAndCellIcons = () => {
         Header: 'Name',
         accessor: 'name',
         cellRenderer: (
-          props: TableTypes.CellRendererProps<{
+          props: CellRendererProps<{
             startIcon: JSX.Element;
             endIcon: JSX.Element;
             isLoading?: boolean;
@@ -3436,7 +3417,7 @@ export const StatusAndCellIcons = () => {
         accessor: 'modified',
         maxWidth: 200,
         cellRenderer: (
-          props: TableTypes.CellRendererProps<{
+          props: CellRendererProps<{
             status: 'positive' | 'warning' | 'negative' | undefined;
           }>,
         ) => {
@@ -3502,7 +3483,7 @@ export const StatusAndCellIcons = () => {
 
   const rowProps = useCallback(
     (
-      row: TableTypes.Row<{
+      row: Row<{
         name: string;
         modified: string;
         size: string;

From f7813ba9419505d1c3931092f04430b17471781a Mon Sep 17 00:00:00 2001
From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com>
Date: Fri, 8 Sep 2023 11:45:15 -0400
Subject: [PATCH 183/196] Leftover: Replaced all react-table types alias
 imports with individual imports to reduce diff and show the easier import
 method

---
 apps/storybook/src/InformationPanel.stories.tsx | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/apps/storybook/src/InformationPanel.stories.tsx b/apps/storybook/src/InformationPanel.stories.tsx
index 58eb0c4d20b..9e3136be42e 100644
--- a/apps/storybook/src/InformationPanel.stories.tsx
+++ b/apps/storybook/src/InformationPanel.stories.tsx
@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import { Story, Meta } from '@storybook/react';
 import React from 'react';
-import * as TableTypes from '@itwin/itwinui-react/react-table';
+import { CellProps } from '@itwin/itwinui-react/react-table';
 import { action } from '@storybook/addon-actions';
 import { SvgEdit } from '@itwin/itwinui-icons-react';
 import {
@@ -56,7 +56,7 @@ export const Basic: Story = (args) => {
       { id: 'name', Header: 'Name', accessor: 'name' },
       {
         Header: 'Details',
-        Cell: ({ row: { index } }: TableTypes.CellProps<{ name: string }>) => (
+        Cell: ({ row: { index } }: CellProps<{ name: string }>) => (
           
         ),
       },
@@ -137,7 +137,7 @@ export const Horizontal: Story = (args) => {
       { id: 'name', Header: 'Name', accessor: 'name' },
       {
         Header: 'Details',
-        Cell: ({ row: { index } }: TableTypes.CellProps<{ name: string }>) => (
+        Cell: ({ row: { index } }: CellProps<{ name: string }>) => (
           
         ),
       },
@@ -212,9 +212,7 @@ export const CustomActions: Story = (args) => {
       { id: 'name', Header: 'Name', accessor: 'name' },
       {
         Header: 'Details',
-        Cell: ({
-          row,
-        }: TableTypes.CellProps<{ name: string; info: string }>) => (
+        Cell: ({ row }: CellProps<{ name: string; info: string }>) => (
           
         ),
       },

From 94c3e54d2cc0601168a938d89e738c70ba2bcd29 Mon Sep 17 00:00:00 2001
From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com>
Date: Fri, 8 Sep 2023 11:50:49 -0400
Subject: [PATCH 184/196] Removed unnecessary test

---
 .../react-table/react-table.types-test.tsx    | 58 -------------------
 1 file changed, 58 deletions(-)

diff --git a/packages/itwinui-react/src/react-table/react-table.types-test.tsx b/packages/itwinui-react/src/react-table/react-table.types-test.tsx
index 93c5d984828..8e5bc1a9ec8 100644
--- a/packages/itwinui-react/src/react-table/react-table.types-test.tsx
+++ b/packages/itwinui-react/src/react-table/react-table.types-test.tsx
@@ -102,64 +102,6 @@ import { SvgMore } from 'src/core/utils/index.js';
   }>[];
 };
 
-/**
- * Confirm that `react-table` (e.g. `TableTypes.Column`) and `src/react-table/react-table.js` (e.g. `Column`) are equivalent.
- */
-() => {
-  const columns1: TableTypes.Column<{
-    header1: string;
-    header2: string;
-  }>[] = [
-    {
-      Header: 'Header 1',
-      accessor: 'header1',
-    },
-    {
-      Header: 'Header 2',
-      accessor: 'header2',
-    },
-  ] as Column<{
-    header1: string;
-    header2: string;
-  }>[];
-
-  const columns2: Column<{
-    header1: string;
-    header2: string;
-  }>[] = [
-    {
-      Header: 'Header 1',
-      accessor: 'header1',
-    },
-    {
-      Header: 'Header 2',
-      accessor: 'header2',
-    },
-  ] as TableTypes.Column<{
-    header1: string;
-    header2: string;
-  }>[];
-
-  const data: Array<{
-    header1: string;
-    header2: string;
-  }> = [
-    {
-      header1: 'row1',
-      header2: 'row1',
-    },
-    {
-      header1: 'row2',
-      header2: 'row2',
-    },
-  ];
-
-  
-
-
- ; -}; - /** * When creating variables (with satisfies) that are passed as props. */ From 280f183310fd777893f108e49121f5e8be4d97f2 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Fri, 8 Sep 2023 11:56:53 -0400 Subject: [PATCH 185/196] Removed few unnecessary comments --- .../src/react-table/react-table.ts | 64 ++----------------- 1 file changed, 4 insertions(+), 60 deletions(-) diff --git a/packages/itwinui-react/src/react-table/react-table.ts b/packages/itwinui-react/src/react-table/react-table.ts index 70dc8be7ebe..598b2c5613a 100644 --- a/packages/itwinui-react/src/react-table/react-table.ts +++ b/packages/itwinui-react/src/react-table/react-table.ts @@ -234,6 +234,7 @@ export interface ColumnInterfaceBasedOnValue< } export interface ColumnGroupInterface> { + // Commented out since we do not support nested columns // columns: Array>; } @@ -274,8 +275,9 @@ export type ColumnWithLooseAccessor = {}> = }; export type Column = {}> = - // ColumnWithStrictAccessor; - ColumnGroup | ColumnWithLooseAccessor | ColumnWithStrictAccessor; + | ColumnGroup + | ColumnWithLooseAccessor + | ColumnWithStrictAccessor; export interface ColumnInstance = {}> extends Omit, 'id'>, @@ -603,15 +605,6 @@ export declare function useAbsoluteLayout< D extends Record = {}, >(hooks: Hooks): void; -// export namespace useAbsoluteLayout { -// const pluginName = 'useAbsoluteLayout'; -// } - -// export declare const useAbsoluteLayout: (< -// D extends Record = {}, -// >( -// hooks: Hooks, -// ) => void) & { pluginName: 'useAbsoluteLayout' }; //#endregion //#region useBlockLayout @@ -619,9 +612,6 @@ export declare function useBlockLayout = {}>( hooks: Hooks, ): void; -// export namespace useBlockLayout { -// const pluginName = 'useBlockLayout'; -// } //#endregion //#region useColumnOrder @@ -629,10 +619,6 @@ export declare function useColumnOrder = {}>( hooks: Hooks, ): void; -// export namespace useColumnOrder { -// const pluginName = 'useColumnOrder'; -// } - export interface UseColumnOrderState> { columnOrder: Array>; } @@ -654,10 +640,6 @@ export declare function useExpanded = {}>( hooks: Hooks, ): void; -// export namespace useExpanded { -// const pluginName = 'useExpanded'; -// } - export interface TableExpandedToggleProps extends TableKeyedProps {} export type UseExpandedOptions> = Partial<{ @@ -704,10 +686,6 @@ export declare function useFilters = {}>( hooks: Hooks, ): void; -// export namespace useFilters { -// const pluginName = 'useFilters'; -// } - export type UseFiltersOptions> = Partial<{ manualFilters: boolean; disableFilters: boolean; @@ -795,9 +773,6 @@ export declare function useFlexLayout = {}>( hooks: Hooks, ): void; -// export namespace useFlexLayout { -// const pluginName = 'useFlexLayout'; -// } //#endregion //#region useGridLayout @@ -805,9 +780,6 @@ export declare function useGridLayout = {}>( hooks: Hooks, ): void; -// export namespace useGridLayout { -// const pluginName = 'useGridLayout'; -// } //#endregion //#region useGlobalFilter @@ -815,10 +787,6 @@ export declare function useGlobalFilter = {}>( hooks: Hooks, ): void; -// export namespace useGlobalFilter { -// const pluginName = 'useGlobalFilter'; -// } - export type UseGlobalFiltersOptions> = Partial<{ globalFilter: @@ -865,10 +833,6 @@ export declare function useGroupBy = {}>( hooks: Hooks, ): void; -// export namespace useGroupBy { -// const pluginName = 'useGroupBy'; -// } - export interface TableGroupByToggleProps { title?: string | undefined; style?: CSSProperties | undefined; @@ -972,10 +936,6 @@ export declare function usePagination = {}>( hooks: Hooks, ): void; -// export namespace usePagination { -// const pluginName = 'usePagination'; -// } - export type UsePaginationOptions> = Partial<{ pageCount: number; manualPagination: boolean; @@ -1007,10 +967,6 @@ export declare function useResizeColumns< D extends Record = {}, >(hooks: Hooks): void; -// export namespace useResizeColumns { -// const pluginName = 'useResizeColumns'; -// } - export interface UseResizeColumnsOptions> { disableResizing?: boolean | undefined; autoResetResize?: boolean | undefined; @@ -1049,10 +1005,6 @@ export declare function useRowSelect = {}>( hooks: Hooks, ): void; -// export namespace useRowSelect { -// const pluginName = 'useRowSelect'; -// } - export interface TableToggleAllRowsSelectedProps extends TableToggleCommonProps {} @@ -1107,10 +1059,6 @@ export declare function useRowState = {}>( hooks: Hooks, ): void; -// export namespace useRowState { -// const pluginName = 'useRowState'; -// } - export type UseRowStateOptions> = Partial<{ initialRowStateAccessor: (row: Row) => UseRowStateLocalState; getResetRowStateDeps: (instance: TableInstance) => any[]; @@ -1152,10 +1100,6 @@ export declare function useSortBy = {}>( hooks: Hooks, ): void; -// export namespace useSortBy { -// const pluginName = 'useSortBy'; -// } - export interface TableSortByToggleProps { title?: string | undefined; style?: CSSProperties | undefined; From 50ea7b9d2b582e2f20e2eb9f1c62450f66db8530 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Fri, 8 Sep 2023 13:02:34 -0400 Subject: [PATCH 186/196] Added react-table (remade).ts as a temp file to confirm if no types are missing or incorrect --- .../src/react-table/react-table (remade).ts | 1330 +++++++++++++++++ 1 file changed, 1330 insertions(+) create mode 100644 packages/itwinui-react/src/react-table/react-table (remade).ts diff --git a/packages/itwinui-react/src/react-table/react-table (remade).ts b/packages/itwinui-react/src/react-table/react-table (remade).ts new file mode 100644 index 00000000000..be2bfadd073 --- /dev/null +++ b/packages/itwinui-react/src/react-table/react-table (remade).ts @@ -0,0 +1,1330 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Bentley Systems, Incorporated. All rights reserved. + * See LICENSE.md in the project root for license terms and full copyright notice. + *--------------------------------------------------------------------------------------------*/ +/* eslint-disable @typescript-eslint/no-explicit-any */ +/* eslint-disable @typescript-eslint/no-unused-vars */ +/* eslint-disable @typescript-eslint/no-empty-interface */ +/* eslint-disable @typescript-eslint/ban-types */ + +import { + ChangeEvent, + ComponentType, + CSSProperties, + DependencyList, + EffectCallback, + MouseEvent, + ReactElement, + ReactFragment, + ReactNode, +} from 'react'; + +//------------------------------------------------------------------------------- +// Custom Additions (parts from the old file called react-table-config.ts) + +export type FieldType = 'text' | 'number' | 'date' | string; + +export type CellRendererProps = {}> = { + /** + * Cell HTML props passed from the Table. + */ + cellElementProps: TableCellProps; + /** + * Table specific cell props like `column`, `row`. + */ + cellProps: CellProps; + /** + * Cell's content. + */ + children: React.ReactNode; + /** + * Function that returns whether the cell is disabled. + */ + isDisabled?: (rowData: D) => boolean; +}; + +export type TableFilterProps> = + FilterProps & { + /** + * Data of column on which filter is opened. It is provided by the table it self. + */ + column: HeaderGroup; + /** + * Function to close the filter. It is provided by the table it self. + */ + close: () => void; + /** + * Function to set the filter value. It is provided by the table it self. + */ + setFilter: (filterValue: unknown | undefined) => void; + /** + * Function to clear the filter value. It is provided by the table it self. + */ + clearFilter: () => void; + }; + +//------------------------------------------------------------------------------- +// Everything below is a hard fork of @types/react-table v7 +// The original code is licensed under MIT - https://unpkg.com/browse/@types/react-table@7.7.15/LICENSE +// +// A few reasons for this hard fork are: +// - iTwinUI Table does not offer all the functionality that `react-table` offers. (no nested columns) +// - `@types/react-table` expects row data to extend `object`. However, iTwinUI Table's expects row data to extend `Record`. +// - This gave type errors like: `Type Record is not assignable to type TableStoryDataType.` + +export {}; + +/** + * The empty definitions of below provides a base definition for the parts used by useTable, that can then be extended in the users code. + * + * @example + * export interface TableOptions = {}}> + * extends + * UseExpandedOptions, + * UseFiltersOptions {} + * see https://gist.github.com/ggascoigne/646e14c9d54258e40588a13aabf0102d for more details + */ +export interface TableOptions = {}> + extends Omit, 'data' | 'columns'>, + UseRowSelectOptions, + UseExpandedOptions, + UseFiltersOptions, + // UseGroupByOptions, + UsePaginationOptions, + UseGlobalFiltersOptions, + UseGlobalFiltersColumnOptions, + Omit, 'disableResizing'>, + // UseRowStateOptions, + UseSortByOptions { + /** + * List of columns. + * + * Should not have a top-level `Header` or a `columns` sub-property. They are only allowed to be passed for backwards compatibility. + * See [migration guide](https://github.com/iTwin/iTwinUI/wiki/iTwinUI-react-v2-migration-guide#breaking-changes). + */ + columns: Array>; + /** + * Table data list. + * Must be memoized. + * + * Supports expandable sub-rows using the `subRows` field in data entries. + * If some rows don't have sub-data, it is recommended to pass an empty array to `subRows` for consistent spacing. + */ + data: D[]; + /** + * Column's resize mode. + * - `fit` - when resizing it affects current and the next column, + * e.g. when increasing width of current column, next column's width will decrease. + * - `expand` - when resizing it affects only the current column, + * e.g. when increasing width of the current column, next column's width remains the same. + * @default 'fit' + */ + columnResizeMode?: 'fit' | 'expand'; +} + +export interface TableInstance = {}> + extends Omit, 'columns' | 'pageCount'>, + UseTableInstanceProps, + UseColumnOrderInstanceProps, + UseExpandedInstanceProps, + UseFiltersInstanceProps, + UseGlobalFiltersInstanceProps, + UseGroupByInstanceProps, + UsePaginationInstanceProps, + UseRowSelectInstanceProps, + UseRowStateInstanceProps, + UseSortByInstanceProps { + initialRows: Row[]; + columnResizeMode: TableOptions['columnResizeMode']; + tableWidth: number; +} + +export interface TableState = {}> + extends UseColumnOrderState, + UseExpandedState, + UseFiltersState, + UseGlobalFiltersState, + UseGroupByState, + UsePaginationState, + UseRowSelectState, + UseRowStateState, + UseSortByState { + hiddenColumns?: Array> | undefined; + // UseResizeColumnsState with fixed typings + columnResizing: { + startX?: number; + columnWidth?: number; + nextColumnWidth?: number; + headerIdWidths?: Array<[string, number]>; + nextHeaderIdWidths?: Array<[string, number]>; + columnWidths: Record; + isResizingColumn?: string; + }; + isTableResizing?: boolean; + columnReorderStartIndex: number; + sticky: { + isScrolledToRight?: boolean; + isScrolledToLeft?: boolean; + }; + lastSelectedRowId?: string; +} + +export interface Hooks = {}> + extends UseTableHooks, + UseExpandedHooks, + UseGroupByHooks, + UseRowSelectHooks, + UseSortByHooks {} + +export interface Cell = {}, V = any> + extends UseTableCellProps, + UseGroupByCellProps, + UseRowStateCellProps {} + +export interface ColumnInterface = {}> + // UseGroupByColumnOptions, + extends UseTableColumnOptions, + UseSortByColumnOptions, + UseFiltersColumnOptions, + UseResizeColumnsColumnOptions, + UseGlobalFiltersColumnOptions { + /** + * Custom class name applied to header column cell. + */ + columnClassName?: string; + /** + * Custom class name applied to each column's cell. + */ + cellClassName?: string; + /** + * Type of the data in cell. Used for manual filtering. + */ + fieldType?: FieldType; + /** + * Filter component used as a column filter. Should use filters from `tableFilters`. + */ + Filter?: Renderer> | Renderer>; + /** + * String value or custom function to use for filtering. + * Possible string values: `text`, `exactText`, `exactTextCase`, `includes`, `includesAll`, `exact`, `equals`, `between`. + * More info about these filters: https://github.com/tannerlinsley/react-table/blob/master/src/filterTypes.js + */ + filter?: FilterType | DefaultFilterTypes | string; + /** + * Function that should return whole cell element not only the content. + * Must be memoized. + * @example + * { + * Header: 'Name', + * accessor: 'name', + * cellRenderer: (props) => , + * } + */ + cellRenderer?: (props: CellRendererProps) => React.ReactNode; + /** + * If true, column can't be reordered. + * @default false + */ + disableReordering?: boolean; + /** + * If true, column's visibility cannot be toggled. + * @default false + */ + disableToggleVisibility?: boolean; + /** + * Side on which column should be sticked to. + */ + sticky?: 'left' | 'right'; +} + +export interface ColumnInterfaceBasedOnValue< + D extends Record = {}, + V = any, +> { + Cell?: Renderer> | undefined; +} + +export interface ColumnGroupInterface> { + columns: Array>; +} + +export type ColumnGroup = {}> = + ColumnInterface & + ColumnGroupInterface & + ( + | { Header: string } + | ({ id: IdType } & { + Header: Renderer>; + }) + ) & { accessor?: Accessor | undefined }; // Not used, but needed for backwards compatibility + +type ValueOf = T[keyof T]; + +// The accessors like `foo.bar` are not supported, use functions instead +export type ColumnWithStrictAccessor = {}> = + ColumnInterface & + ValueOf<{ + [K in keyof D]: { + accessor: K; + } & ColumnInterfaceBasedOnValue; + }>; + +export type ColumnWithLooseAccessor = {}> = + ColumnInterface & + ColumnInterfaceBasedOnValue & + ( + | { Header: string } + | { id: IdType } + | { accessor: keyof D extends never ? IdType : never } + ) & { + accessor?: + | (keyof D extends never ? IdType | Accessor : Accessor) + | undefined; + }; + +export type Column = {}> = + | ColumnGroup + | ColumnWithLooseAccessor + | ColumnWithStrictAccessor; + +export interface ColumnInstance = {}> + extends Omit, 'id'>, + ColumnInterfaceBasedOnValue, + UseTableColumnProps, + UseFiltersColumnProps, + UseGroupByColumnProps, + UseResizeColumnsColumnProps, + UseSortByColumnProps { + originalWidth: number; + resizeWidth?: number; + isResizerVisible?: boolean; + getDragAndDropProps: () => TableKeyedProps; + originalSticky?: 'left' | 'right' | 'none'; +} + +export interface HeaderGroup = {}> + extends ColumnInstance, + UseTableHeaderGroupProps {} + +export interface Row = {}> + extends UseTableRowProps, + UseExpandedRowProps, + UseGroupByRowProps, + UseRowSelectRowProps, + UseRowStateRowProps { + initialSubRows: Row[]; +} + +export interface TableCommonProps { + style?: CSSProperties | undefined; + className?: string | undefined; + role?: string | undefined; +} + +export interface TableProps extends TableCommonProps {} + +export interface TableBodyProps extends TableCommonProps {} + +export interface TableKeyedProps extends TableCommonProps { + key: React.Key; +} + +export interface TableHeaderGroupProps extends TableKeyedProps {} + +export interface TableFooterGroupProps extends TableKeyedProps {} + +export interface TableHeaderProps extends TableKeyedProps {} + +export interface TableFooterProps extends TableKeyedProps {} + +export interface TableRowProps extends TableKeyedProps {} + +export interface TableCellProps extends TableKeyedProps {} + +export interface TableToggleCommonProps extends TableCommonProps { + onChange?: ((e: ChangeEvent) => void) | undefined; + checked?: boolean | undefined; + title?: string | undefined; + indeterminate?: boolean | undefined; +} + +export interface MetaBase> { + instance: TableInstance; + userProps: any; +} + +// inspired by ExtendState in https://github.com/reduxjs/redux/blob/master/src/types/store.ts +export type Meta< + D extends Record, + Extension = never, + M = MetaBase, +> = [Extension] extends [never] ? M : M & Extension; + +//#region useTable +export function useTable = {}>( + options: TableOptions, + ...plugins: Array> +): TableInstance; + +/** + * NOTE: To use custom options, use "Interface Merging" to add the custom options + */ +export type UseTableOptions> = { + columns: ReadonlyArray>; + data: readonly D[]; +} & Partial<{ + initialState: Partial>; + stateReducer: ( + newState: TableState, + action: ActionType, + previousState: TableState, + instance?: TableInstance, + ) => TableState; + useControlledState: (state: TableState, meta: Meta) => TableState; + defaultColumn: Partial>; + getSubRows: (originalRow: D, relativeIndex: number) => D[]; + getRowId: (originalRow: D, relativeIndex: number, parent?: Row) => string; + autoResetHiddenColumns: boolean; +}>; + +export type PropGetter< + D extends Record, + Props, + T extends object = never, + P = Partial, +> = ((props: P, meta: Meta) => P | P[]) | P | P[]; + +export type TablePropGetter> = PropGetter< + D, + TableProps +>; + +export type TableBodyPropGetter> = PropGetter< + D, + TableBodyProps +>; + +export type HeaderPropGetter> = PropGetter< + D, + TableHeaderProps, + { column: HeaderGroup } +>; + +export type FooterGroupPropGetter> = + PropGetter }>; + +export type HeaderGroupPropGetter> = + PropGetter }>; + +export type FooterPropGetter> = PropGetter< + D, + TableFooterProps, + { column: HeaderGroup } +>; + +export type RowPropGetter> = PropGetter< + D, + TableRowProps, + { row: Row } +>; + +export type CellPropGetter> = PropGetter< + D, + TableCellProps, + { cell: Cell } +>; + +export interface ReducerTableState> + extends TableState, + Record {} + +export interface UseTableHooks> + extends Record { + useOptions: Array< + (options: TableOptions, args: TableOptions) => TableOptions + >; + stateReducers: Array< + ( + newState: TableState, + action: ActionType, + previousState?: TableState, + instance?: TableInstance, + ) => ReducerTableState | undefined + >; + columns: Array< + (columns: Array>, meta: Meta) => Array> + >; + columnsDeps: Array<(deps: any[], meta: Meta) => any[]>; + allColumns: Array< + (allColumns: Array>, meta: Meta) => Array> + >; + allColumnsDeps: Array<(deps: any[], meta: Meta) => any[]>; + visibleColumns: Array< + (allColumns: Array>, meta: Meta) => Array> + >; + visibleColumnsDeps: Array<(deps: any[], meta: Meta) => any[]>; + headerGroups: Array< + (allColumns: Array>, meta: Meta) => Array> + >; + headerGroupsDeps: Array<(deps: any[], meta: Meta) => any[]>; + useInstanceBeforeDimensions: Array<(instance: TableInstance) => void>; + useInstance: Array<(instance: TableInstance) => void>; + prepareRow: Array<(row: Row, meta: Meta) => void>; + useControlledState: Array< + (state: TableState, meta: Meta) => TableState + >; + + getTableProps: Array>; + getTableBodyProps: Array>; + getHeaderGroupProps: Array>; + getFooterGroupProps: Array>; + getHeaderProps: Array>; + getFooterProps: Array>; + getRowProps: Array>; + getCellProps: Array>; + useFinalInstance: Array<(instance: TableInstance) => void>; +} + +export interface UseTableColumnOptions> { + id?: IdType | undefined; + Header?: Renderer> | undefined; + Footer?: Renderer> | undefined; + width?: number | string | undefined; + minWidth?: number | undefined; + maxWidth?: number | undefined; +} + +type UpdateHiddenColumns> = ( + oldHidden: Array>, +) => Array>; + +export interface TableToggleHideAllColumnProps extends TableToggleCommonProps {} + +export interface UseTableInstanceProps> { + state: TableState; + plugins: Array>; + dispatch: TableDispatch; + columns: Array>; + allColumns: Array>; + visibleColumns: Array>; + headerGroups: Array>; + footerGroups: Array>; + headers: Array>; + flatHeaders: Array>; + rows: Array>; + rowsById: Record>; + getTableProps: (propGetter?: TablePropGetter) => TableProps; + getTableBodyProps: (propGetter?: TableBodyPropGetter) => TableBodyProps; + prepareRow: (row: Row) => void; + flatRows: Array>; + totalColumnsWidth: number; + allColumnsHidden: boolean; + toggleHideColumn: (columnId: IdType, value?: boolean) => void; + setHiddenColumns: (param: Array> | UpdateHiddenColumns) => void; + toggleHideAllColumns: (value?: boolean) => void; + getToggleHideAllColumnsProps: ( + props?: Partial, + ) => TableToggleHideAllColumnProps; + getHooks: () => Hooks; +} + +export interface UseTableHeaderGroupProps> { + headers: Array>; + getHeaderGroupProps: ( + propGetter?: HeaderGroupPropGetter, + ) => TableHeaderProps; + getFooterGroupProps: ( + propGetter?: FooterGroupPropGetter, + ) => TableFooterProps; + totalHeaderCount: number; // not documented +} + +export interface UseTableColumnProps> { + id: IdType; + columns?: Array> | undefined; + isVisible: boolean; + render: (type: 'Header' | 'Footer' | string, props?: object) => ReactNode; + totalLeft: number; + totalWidth: number; + getHeaderProps: (propGetter?: HeaderPropGetter) => TableHeaderProps; + getFooterProps: (propGetter?: FooterPropGetter) => TableFooterProps; + toggleHidden: (value?: boolean) => void; + parent?: ColumnInstance | undefined; // not documented + getToggleHiddenProps: (userProps?: any) => any; + depth: number; // not documented + placeholderOf?: ColumnInstance | undefined; +} + +export interface UseTableRowProps> { + cells: Array>; + allCells: Array>; + values: Record, CellValue>; + getRowProps: (propGetter?: RowPropGetter) => TableRowProps; + index: number; + original: D; + id: string; + subRows: Array>; +} + +export interface UseTableCellProps, V = any> { + column: ColumnInstance; + row: Row; + value: CellValue; + getCellProps: (propGetter?: CellPropGetter) => TableCellProps; + render: (type: 'Cell' | string, userProps?: object) => ReactNode; +} + +export type HeaderProps> = + TableInstance & { + column: ColumnInstance; + }; + +export type FooterProps> = + TableInstance & { + column: ColumnInstance; + }; + +export type CellProps< + D extends Record, + V = any, +> = TableInstance & { + column: ColumnInstance; + row: Row; + cell: Cell; + value: CellValue; +}; + +export type Accessor> = ( + originalRow: D, + index: number, + sub: { + subRows: D[]; + depth: number; + data: D[]; + }, +) => CellValue; + +//#endregion + +// Plugins + +//#region useAbsoluteLayout +export function useAbsoluteLayout = {}>( + hooks: Hooks, +): void; + +export namespace useAbsoluteLayout { + const pluginName = 'useAbsoluteLayout'; +} +//#endregion + +//#region useBlockLayout +export function useBlockLayout = {}>( + hooks: Hooks, +): void; + +export namespace useBlockLayout { + const pluginName = 'useBlockLayout'; +} +//#endregion + +//#region useColumnOrder +export function useColumnOrder = {}>( + hooks: Hooks, +): void; + +export namespace useColumnOrder { + const pluginName = 'useColumnOrder'; +} + +export interface UseColumnOrderState> { + columnOrder: Array>; +} + +export interface UseColumnOrderInstanceProps< + D extends Record, +> { + setColumnOrder: ( + updater: + | ((columnOrder: Array>) => Array>) + | Array>, + ) => void; +} + +//#endregion + +//#region useExpanded +export function useExpanded = {}>( + hooks: Hooks, +): void; + +export namespace useExpanded { + const pluginName = 'useExpanded'; +} + +export interface TableExpandedToggleProps extends TableKeyedProps {} + +export type UseExpandedOptions> = Partial<{ + manualExpandedKey: IdType; + paginateExpandedRows: boolean; + expandSubRows: boolean; + autoResetExpanded?: boolean | undefined; +}>; + +export interface UseExpandedHooks> { + getToggleRowsExpandedProps: Array>; + getToggleAllRowsExpandedProps: Array>; +} + +export interface UseExpandedState> { + expanded: Record, boolean>; +} + +export interface UseExpandedInstanceProps> { + preExpandedRows: Array>; + expandedRows: Array>; + rows: Array>; + expandedDepth: number; + isAllRowsExpanded: boolean; + toggleRowExpanded: (id: Array>, value?: boolean) => void; + toggleAllRowsExpanded: (value?: boolean) => void; +} + +export interface UseExpandedRowProps> { + isExpanded: boolean; + canExpand: boolean; + subRows: Array>; + toggleRowExpanded: (value?: boolean) => void; + getToggleRowExpandedProps: ( + props?: Partial, + ) => TableExpandedToggleProps; + depth: number; +} + +//#endregion + +//#region useFilters +export function useFilters = {}>( + hooks: Hooks, +): void; + +export namespace useFilters { + const pluginName = 'useFilters'; +} + +export type UseFiltersOptions> = Partial<{ + manualFilters: boolean; + disableFilters: boolean; + defaultCanFilter: boolean; + filterTypes: FilterTypes; + autoResetFilters?: boolean | undefined; +}>; + +export interface UseFiltersState> { + filters: Filters; +} + +export type UseFiltersColumnOptions> = + Partial<{ + Filter: Renderer>; + disableFilters: boolean; + defaultCanFilter: boolean; + filter: FilterType | DefaultFilterTypes | string; + }>; + +export interface UseFiltersInstanceProps> { + preFilteredRows: Array>; + preFilteredFlatRows: Array>; + preFilteredRowsById: Record>; + filteredRows: Array>; + filteredFlatRows: Array>; + filteredRowsById: Record>; + rows: Array>; + flatRows: Array>; + rowsById: Record>; + setFilter: ( + columnId: IdType, + updater: ((filterValue: FilterValue) => FilterValue) | FilterValue, + ) => void; + setAllFilters: ( + updater: Filters | ((filters: Filters) => Filters), + ) => void; +} + +export interface UseFiltersColumnProps> { + canFilter: boolean; + setFilter: ( + updater: ((filterValue: FilterValue) => FilterValue) | FilterValue, + ) => void; + filterValue: FilterValue; + preFilteredRows: Array>; + filteredRows: Array>; +} + +export type FilterProps> = HeaderProps; +export type FilterValue = any; +export type Filters> = Array<{ + id: IdType; + value: FilterValue; +}>; +export type FilterTypes> = Record< + string, + FilterType +>; + +export type DefaultFilterTypes = + | 'text' + | 'exactText' + | 'exactTextCase' + | 'includes' + | 'includesAll' + | 'exact' + | 'equals' + | 'between'; + +export interface FilterType> { + ( + rows: Array>, + columnIds: Array>, + filterValue: FilterValue, + ): Array>; + + autoRemove?: ((filterValue: FilterValue) => boolean) | undefined; +} + +//#endregion + +//#region useFlexLayout +export function useFlexLayout = {}>( + hooks: Hooks, +): void; + +export namespace useFlexLayout { + const pluginName = 'useFlexLayout'; +} +//#endregion + +//#region useGridLayout +export function useGridLayout = {}>( + hooks: Hooks, +): void; + +export namespace useGridLayout { + const pluginName = 'useGridLayout'; +} +//#endregion + +//#region useGlobalFilter +export function useGlobalFilter = {}>( + hooks: Hooks, +): void; + +export namespace useGlobalFilter { + const pluginName = 'useGlobalFilter'; +} + +export type UseGlobalFiltersOptions> = + Partial<{ + globalFilter: + | (( + rows: Array>, + columnIds: Array>, + filterValue: any, + ) => Array>) + | string; + manualGlobalFilter: boolean; + filterTypes: FilterTypes; + autoResetGlobalFilter?: boolean | undefined; + disableGlobalFilter?: boolean | undefined; + }>; + +export interface UseGlobalFiltersState> { + globalFilter: any; +} + +export type UseGlobalFiltersColumnOptions> = + Partial<{ + disableGlobalFilter?: boolean | undefined; + }>; + +export interface UseGlobalFiltersInstanceProps< + D extends Record, +> { + preGlobalFilteredRows: Array>; + preGlobalFilteredFlatRows: Array>; + preGlobalFilteredRowsById: Record>; + globalFilteredRows: Array>; + globalFilteredFlatRows: Array>; + globalFilteredRowsById: Record>; + rows: Array>; + flatRows: Array>; + rowsById: Record>; + setGlobalFilter: (filterValue: FilterValue) => void; +} + +//#endregion + +//#region useGroupBy +export function useGroupBy = {}>( + hooks: Hooks, +): void; + +export namespace useGroupBy { + const pluginName = 'useGroupBy'; +} + +export interface TableGroupByToggleProps { + title?: string | undefined; + style?: CSSProperties | undefined; + onClick?: ((e: MouseEvent) => void) | undefined; +} + +export type UseGroupByOptions> = Partial<{ + manualGroupBy: boolean; + disableGroupBy: boolean; + defaultCanGroupBy: boolean; + aggregations: Record>; + groupByFn: ( + rows: Array>, + columnId: IdType, + ) => Record>>; + autoResetGroupBy?: boolean | undefined; +}>; + +export interface UseGroupByHooks> { + getGroupByToggleProps: Array>; +} + +export interface UseGroupByState> { + groupBy: Array>; +} + +export type UseGroupByColumnOptions> = + Partial<{ + aggregate: Aggregator; + Aggregated: Renderer>; + disableGroupBy: boolean; + defaultCanGroupBy: boolean; + }>; + +export interface UseGroupByInstanceProps> { + preGroupedRows: Array>; + preGroupedFlatRows: Array>; + preGroupedRowsById: Record>; + groupedRows: Array>; + groupedFlatRows: Array>; + groupedRowsById: Record>; + onlyGroupedFlatRows: Array>; + onlyGroupedRowsById: Record>; + nonGroupedFlatRows: Array>; + nonGroupedRowsById: Record>; + rows: Array>; + flatRows: Array>; + rowsById: Record>; + toggleGroupBy: (columnId: IdType, value?: boolean) => void; +} + +export interface UseGroupByColumnProps> { + canGroupBy: boolean; + isGrouped: boolean; + groupedIndex: number; + toggleGroupBy: () => void; + getGroupByToggleProps: ( + props?: Partial, + ) => TableGroupByToggleProps; +} + +export interface UseGroupByRowProps> { + isGrouped: boolean; + groupByID: IdType; + groupByVal: string; + values: Record, AggregatedValue>; + subRows: Array>; + leafRows: Array>; + depth: number; + id: string; + index: number; +} + +export interface UseGroupByCellProps> { + isGrouped: boolean; + isPlaceholder: boolean; + isAggregated: boolean; +} + +export type DefaultAggregators = + | 'sum' + | 'average' + | 'median' + | 'uniqueCount' + | 'count'; + +export type AggregatorFn> = ( + columnValues: CellValue[], + rows: Array>, + isAggregated: boolean, +) => AggregatedValue; +export type Aggregator> = + | AggregatorFn + | DefaultAggregators + | string; +export type AggregatedValue = any; +//#endregion + +//#region usePagination +export function usePagination = {}>( + hooks: Hooks, +): void; + +export namespace usePagination { + const pluginName = 'usePagination'; +} + +export type UsePaginationOptions> = Partial<{ + pageCount: number; + manualPagination: boolean; + autoResetPage?: boolean | undefined; + paginateExpandedRows: boolean; +}>; + +export interface UsePaginationState> { + pageSize: number; + pageIndex: number; +} + +export interface UsePaginationInstanceProps> { + page: Array>; + pageCount: number; + pageOptions: number[]; + canPreviousPage: boolean; + canNextPage: boolean; + gotoPage: (updater: ((pageIndex: number) => number) | number) => void; + previousPage: () => void; + nextPage: () => void; + setPageSize: (pageSize: number) => void; +} + +//#endregion + +//#region useResizeColumns +export function useResizeColumns = {}>( + hooks: Hooks, +): void; + +export namespace useResizeColumns { + const pluginName = 'useResizeColumns'; +} + +export interface UseResizeColumnsOptions> { + disableResizing?: boolean | undefined; + autoResetResize?: boolean | undefined; +} + +export interface UseResizeColumnsState> { + columnResizing: { + startX?: number | undefined; + columnWidth: number; + headerIdWidths: Record; + columnWidths: any; + isResizingColumn?: string | undefined; + }; +} + +export interface UseResizeColumnsColumnOptions< + D extends Record, +> { + disableResizing?: boolean | undefined; +} + +export interface TableResizerProps {} + +export interface UseResizeColumnsColumnProps< + D extends Record, +> { + getResizerProps: (props?: Partial) => TableResizerProps; + canResize: boolean; + isResizing: boolean; +} + +//#endregion + +//#region useRowSelect +export function useRowSelect = {}>( + hooks: Hooks, +): void; + +export namespace useRowSelect { + const pluginName = 'useRowSelect'; +} + +export interface TableToggleAllRowsSelectedProps + extends TableToggleCommonProps {} + +export interface TableToggleRowsSelectedProps extends TableToggleCommonProps {} + +export type UseRowSelectOptions> = Partial<{ + manualRowSelectedKey: IdType; + autoResetSelectedRows: boolean; + selectSubRows: boolean; +}>; + +export interface UseRowSelectHooks> { + getToggleRowSelectedProps: Array>; + getToggleAllRowsSelectedProps: Array< + PropGetter + >; + getToggleAllPageRowsSelectedProps: Array< + PropGetter + >; +} + +export interface UseRowSelectState> { + selectedRowIds: Record, boolean>; +} + +export interface UseRowSelectInstanceProps> { + toggleRowSelected: (rowId: IdType, set?: boolean) => void; + toggleAllRowsSelected: (value?: boolean) => void; + getToggleAllRowsSelectedProps: ( + props?: Partial, + ) => TableToggleAllRowsSelectedProps; + getToggleAllPageRowsSelectedProps: ( + props?: Partial, + ) => TableToggleAllRowsSelectedProps; + isAllRowsSelected: boolean; + selectedFlatRows: Array>; +} + +export interface UseRowSelectRowProps> { + isSelected: boolean; + isSomeSelected: boolean; + toggleRowSelected: (set?: boolean) => void; + getToggleRowSelectedProps: ( + props?: Partial, + ) => TableToggleRowsSelectedProps; +} + +//#endregion + +//#region useRowState +export function useRowState = {}>( + hooks: Hooks, +): void; + +export namespace useRowState { + const pluginName = 'useRowState'; +} + +export type UseRowStateOptions> = Partial<{ + initialRowStateAccessor: (row: Row) => UseRowStateLocalState; + getResetRowStateDeps: (instance: TableInstance) => any[]; + autoResetRowState?: boolean | undefined; +}>; + +export interface UseRowStateState> { + rowState: Record }>; +} + +export interface UseRowStateInstanceProps> { + setRowState: (rowPath: string[], updater: UseRowUpdater) => void; + setCellState: ( + rowPath: string[], + columnId: IdType, + updater: UseRowUpdater, + ) => void; +} + +export interface UseRowStateRowProps> { + state: UseRowStateLocalState; + setState: (updater: UseRowUpdater) => void; +} + +export interface UseRowStateCellProps> { + state: UseRowStateLocalState; + setState: (updater: UseRowUpdater) => void; +} + +export type UseRowUpdater = T | ((prev: T) => T); +export type UseRowStateLocalState< + D extends Record, + T = unknown, +> = Record, T>; +//#endregion + +//#region useSortBy +export function useSortBy = {}>( + hooks: Hooks, +): void; + +export namespace useSortBy { + const pluginName = 'useSortBy'; +} + +export interface TableSortByToggleProps { + title?: string | undefined; + style?: CSSProperties | undefined; + onClick?: ((e: MouseEvent) => void) | undefined; +} + +export type UseSortByOptions> = Partial<{ + manualSortBy: boolean; + disableSortBy: boolean; + defaultCanSort: boolean; + disableMultiSort: boolean; + isMultiSortEvent: (e: MouseEvent) => boolean; + maxMultiSortColCount: number; + disableSortRemove: boolean; + disabledMultiRemove: boolean; + orderByFn: ( + rows: Array>, + sortFns: Array>, + directions: boolean[], + ) => Array>; + sortTypes: Record>; + autoResetSortBy?: boolean | undefined; +}>; + +export interface UseSortByHooks> { + getSortByToggleProps: Array>; +} + +export interface UseSortByState> { + sortBy: Array>; +} + +export type UseSortByColumnOptions> = + Partial<{ + defaultCanSort: boolean; + disableSortBy: boolean; + sortDescFirst: boolean; + sortInverted: boolean; + sortType: SortByFn | DefaultSortTypes | string; + }>; + +export interface UseSortByInstanceProps> { + rows: Array>; + preSortedRows: Array>; + setSortBy: (sortBy: Array>) => void; + toggleSortBy: ( + columnId: IdType, + descending?: boolean, + isMulti?: boolean, + ) => void; +} + +export interface UseSortByColumnProps> { + canSort: boolean; + toggleSortBy: (descending?: boolean, multi?: boolean) => void; + getSortByToggleProps: ( + props?: Partial, + ) => TableSortByToggleProps; + clearSortBy: () => void; + isSorted: boolean; + sortedIndex: number; + isSortedDesc: boolean | undefined; +} + +export type OrderByFn> = ( + rowA: Row, + rowB: Row, +) => number; +export type SortByFn> = ( + rowA: Row, + rowB: Row, + columnId: IdType, + desc?: boolean, +) => number; + +export type DefaultSortTypes = + | 'alphanumeric' + | 'datetime' + | 'basic' + | 'string' + | 'number'; + +export interface SortingRule { + id: IdType; + desc?: boolean | undefined; +} + +//#endregion + +// Additional API +export const actions: Record; +export type ActionType = { type: string } & Record; +export const defaultColumn: Partial & Record; + +// Helpers +export type StringKey = Extract; +export type IdType = StringKey | string; +export type CellValue = V; + +export type Renderer = + | ComponentType + | ReactElement + | string + | number + | ReactFragment; + +export interface PluginHook> { + (hooks: Hooks): void; + pluginName?: string | undefined; +} + +export type TableDispatch = (action: A) => void; + +// utils +export function defaultOrderByFn = {}>( + arr: Array>, + funcs: Array>, + dirs: boolean[], +): Array>; + +export function defaultGroupByFn = {}>( + rows: Array>, + columnId: IdType, +): Record>>; + +export function makePropGetter(hooks: Hooks, ...meta: any[]): any; + +export function reduceHooks( + hooks: Hooks, + initial: T, + ...args: any[] +): T; + +export function loopHooks(hooks: Hooks, ...args: any[]): void; + +export function ensurePluginOrder = {}>( + plugins: Array>, + befores: string[], + pluginName: string, +): void; + +export function functionalUpdate = {}>( + updater: any, + old: Partial>, +): Partial>; + +export function useGetLatest(obj: T): () => T; + +export function safeUseLayoutEffect( + effect: EffectCallback, + deps?: DependencyList, +): void; + +export function useMountedLayoutEffect( + effect: EffectCallback, + deps?: DependencyList, +): void; + +export function useAsyncDebounce any>( + defaultFn: F, + defaultWait?: number, +): F; + +export function makeRenderer( + instance: TableInstance, + column: ColumnInstance, + meta?: any, +): ReactElement; From 9655b76547ae18bae782d3f3b424179d0dce2d2c Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Fri, 8 Sep 2023 13:08:43 -0400 Subject: [PATCH 187/196] Made a few changes to react-table.ts to be similar to react-table (remade).ts --- packages/itwinui-react/src/react-table/react-table.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/itwinui-react/src/react-table/react-table.ts b/packages/itwinui-react/src/react-table/react-table.ts index 598b2c5613a..16a20cf00fd 100644 --- a/packages/itwinui-react/src/react-table/react-table.ts +++ b/packages/itwinui-react/src/react-table/react-table.ts @@ -171,8 +171,8 @@ export interface Cell = {}, V = any> UseRowStateCellProps {} export interface ColumnInterface = {}> + // UseGroupByColumnOptions, extends UseTableColumnOptions, - // UseGroupByColumnOptions, UseSortByColumnOptions, UseFiltersColumnOptions, UseResizeColumnsColumnOptions, @@ -256,9 +256,7 @@ export type ColumnWithStrictAccessor = {}> = ValueOf<{ [K in keyof D]: { accessor: K; - // Cell?: Renderer> | undefined; } & ColumnInterfaceBasedOnValue; - // } & ColumnInterfaceBasedOnValue; }>; export type ColumnWithLooseAccessor = {}> = From f02bd8f4f6596bb8026ae0ec99589a55ed33068f Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Fri, 8 Sep 2023 13:09:31 -0400 Subject: [PATCH 188/196] Deleted react-table (remade).ts --- .../src/react-table/react-table (remade).ts | 1330 ----------------- 1 file changed, 1330 deletions(-) delete mode 100644 packages/itwinui-react/src/react-table/react-table (remade).ts diff --git a/packages/itwinui-react/src/react-table/react-table (remade).ts b/packages/itwinui-react/src/react-table/react-table (remade).ts deleted file mode 100644 index be2bfadd073..00000000000 --- a/packages/itwinui-react/src/react-table/react-table (remade).ts +++ /dev/null @@ -1,1330 +0,0 @@ -/*--------------------------------------------------------------------------------------------- - * Copyright (c) Bentley Systems, Incorporated. All rights reserved. - * See LICENSE.md in the project root for license terms and full copyright notice. - *--------------------------------------------------------------------------------------------*/ -/* eslint-disable @typescript-eslint/no-explicit-any */ -/* eslint-disable @typescript-eslint/no-unused-vars */ -/* eslint-disable @typescript-eslint/no-empty-interface */ -/* eslint-disable @typescript-eslint/ban-types */ - -import { - ChangeEvent, - ComponentType, - CSSProperties, - DependencyList, - EffectCallback, - MouseEvent, - ReactElement, - ReactFragment, - ReactNode, -} from 'react'; - -//------------------------------------------------------------------------------- -// Custom Additions (parts from the old file called react-table-config.ts) - -export type FieldType = 'text' | 'number' | 'date' | string; - -export type CellRendererProps = {}> = { - /** - * Cell HTML props passed from the Table. - */ - cellElementProps: TableCellProps; - /** - * Table specific cell props like `column`, `row`. - */ - cellProps: CellProps; - /** - * Cell's content. - */ - children: React.ReactNode; - /** - * Function that returns whether the cell is disabled. - */ - isDisabled?: (rowData: D) => boolean; -}; - -export type TableFilterProps> = - FilterProps & { - /** - * Data of column on which filter is opened. It is provided by the table it self. - */ - column: HeaderGroup; - /** - * Function to close the filter. It is provided by the table it self. - */ - close: () => void; - /** - * Function to set the filter value. It is provided by the table it self. - */ - setFilter: (filterValue: unknown | undefined) => void; - /** - * Function to clear the filter value. It is provided by the table it self. - */ - clearFilter: () => void; - }; - -//------------------------------------------------------------------------------- -// Everything below is a hard fork of @types/react-table v7 -// The original code is licensed under MIT - https://unpkg.com/browse/@types/react-table@7.7.15/LICENSE -// -// A few reasons for this hard fork are: -// - iTwinUI Table does not offer all the functionality that `react-table` offers. (no nested columns) -// - `@types/react-table` expects row data to extend `object`. However, iTwinUI Table's expects row data to extend `Record`. -// - This gave type errors like: `Type Record is not assignable to type TableStoryDataType.` - -export {}; - -/** - * The empty definitions of below provides a base definition for the parts used by useTable, that can then be extended in the users code. - * - * @example - * export interface TableOptions = {}}> - * extends - * UseExpandedOptions, - * UseFiltersOptions {} - * see https://gist.github.com/ggascoigne/646e14c9d54258e40588a13aabf0102d for more details - */ -export interface TableOptions = {}> - extends Omit, 'data' | 'columns'>, - UseRowSelectOptions, - UseExpandedOptions, - UseFiltersOptions, - // UseGroupByOptions, - UsePaginationOptions, - UseGlobalFiltersOptions, - UseGlobalFiltersColumnOptions, - Omit, 'disableResizing'>, - // UseRowStateOptions, - UseSortByOptions { - /** - * List of columns. - * - * Should not have a top-level `Header` or a `columns` sub-property. They are only allowed to be passed for backwards compatibility. - * See [migration guide](https://github.com/iTwin/iTwinUI/wiki/iTwinUI-react-v2-migration-guide#breaking-changes). - */ - columns: Array>; - /** - * Table data list. - * Must be memoized. - * - * Supports expandable sub-rows using the `subRows` field in data entries. - * If some rows don't have sub-data, it is recommended to pass an empty array to `subRows` for consistent spacing. - */ - data: D[]; - /** - * Column's resize mode. - * - `fit` - when resizing it affects current and the next column, - * e.g. when increasing width of current column, next column's width will decrease. - * - `expand` - when resizing it affects only the current column, - * e.g. when increasing width of the current column, next column's width remains the same. - * @default 'fit' - */ - columnResizeMode?: 'fit' | 'expand'; -} - -export interface TableInstance = {}> - extends Omit, 'columns' | 'pageCount'>, - UseTableInstanceProps, - UseColumnOrderInstanceProps, - UseExpandedInstanceProps, - UseFiltersInstanceProps, - UseGlobalFiltersInstanceProps, - UseGroupByInstanceProps, - UsePaginationInstanceProps, - UseRowSelectInstanceProps, - UseRowStateInstanceProps, - UseSortByInstanceProps { - initialRows: Row[]; - columnResizeMode: TableOptions['columnResizeMode']; - tableWidth: number; -} - -export interface TableState = {}> - extends UseColumnOrderState, - UseExpandedState, - UseFiltersState, - UseGlobalFiltersState, - UseGroupByState, - UsePaginationState, - UseRowSelectState, - UseRowStateState, - UseSortByState { - hiddenColumns?: Array> | undefined; - // UseResizeColumnsState with fixed typings - columnResizing: { - startX?: number; - columnWidth?: number; - nextColumnWidth?: number; - headerIdWidths?: Array<[string, number]>; - nextHeaderIdWidths?: Array<[string, number]>; - columnWidths: Record; - isResizingColumn?: string; - }; - isTableResizing?: boolean; - columnReorderStartIndex: number; - sticky: { - isScrolledToRight?: boolean; - isScrolledToLeft?: boolean; - }; - lastSelectedRowId?: string; -} - -export interface Hooks = {}> - extends UseTableHooks, - UseExpandedHooks, - UseGroupByHooks, - UseRowSelectHooks, - UseSortByHooks {} - -export interface Cell = {}, V = any> - extends UseTableCellProps, - UseGroupByCellProps, - UseRowStateCellProps {} - -export interface ColumnInterface = {}> - // UseGroupByColumnOptions, - extends UseTableColumnOptions, - UseSortByColumnOptions, - UseFiltersColumnOptions, - UseResizeColumnsColumnOptions, - UseGlobalFiltersColumnOptions { - /** - * Custom class name applied to header column cell. - */ - columnClassName?: string; - /** - * Custom class name applied to each column's cell. - */ - cellClassName?: string; - /** - * Type of the data in cell. Used for manual filtering. - */ - fieldType?: FieldType; - /** - * Filter component used as a column filter. Should use filters from `tableFilters`. - */ - Filter?: Renderer> | Renderer>; - /** - * String value or custom function to use for filtering. - * Possible string values: `text`, `exactText`, `exactTextCase`, `includes`, `includesAll`, `exact`, `equals`, `between`. - * More info about these filters: https://github.com/tannerlinsley/react-table/blob/master/src/filterTypes.js - */ - filter?: FilterType | DefaultFilterTypes | string; - /** - * Function that should return whole cell element not only the content. - * Must be memoized. - * @example - * { - * Header: 'Name', - * accessor: 'name', - * cellRenderer: (props) => , - * } - */ - cellRenderer?: (props: CellRendererProps) => React.ReactNode; - /** - * If true, column can't be reordered. - * @default false - */ - disableReordering?: boolean; - /** - * If true, column's visibility cannot be toggled. - * @default false - */ - disableToggleVisibility?: boolean; - /** - * Side on which column should be sticked to. - */ - sticky?: 'left' | 'right'; -} - -export interface ColumnInterfaceBasedOnValue< - D extends Record = {}, - V = any, -> { - Cell?: Renderer> | undefined; -} - -export interface ColumnGroupInterface> { - columns: Array>; -} - -export type ColumnGroup = {}> = - ColumnInterface & - ColumnGroupInterface & - ( - | { Header: string } - | ({ id: IdType } & { - Header: Renderer>; - }) - ) & { accessor?: Accessor | undefined }; // Not used, but needed for backwards compatibility - -type ValueOf = T[keyof T]; - -// The accessors like `foo.bar` are not supported, use functions instead -export type ColumnWithStrictAccessor = {}> = - ColumnInterface & - ValueOf<{ - [K in keyof D]: { - accessor: K; - } & ColumnInterfaceBasedOnValue; - }>; - -export type ColumnWithLooseAccessor = {}> = - ColumnInterface & - ColumnInterfaceBasedOnValue & - ( - | { Header: string } - | { id: IdType } - | { accessor: keyof D extends never ? IdType : never } - ) & { - accessor?: - | (keyof D extends never ? IdType | Accessor : Accessor) - | undefined; - }; - -export type Column = {}> = - | ColumnGroup - | ColumnWithLooseAccessor - | ColumnWithStrictAccessor; - -export interface ColumnInstance = {}> - extends Omit, 'id'>, - ColumnInterfaceBasedOnValue, - UseTableColumnProps, - UseFiltersColumnProps, - UseGroupByColumnProps, - UseResizeColumnsColumnProps, - UseSortByColumnProps { - originalWidth: number; - resizeWidth?: number; - isResizerVisible?: boolean; - getDragAndDropProps: () => TableKeyedProps; - originalSticky?: 'left' | 'right' | 'none'; -} - -export interface HeaderGroup = {}> - extends ColumnInstance, - UseTableHeaderGroupProps {} - -export interface Row = {}> - extends UseTableRowProps, - UseExpandedRowProps, - UseGroupByRowProps, - UseRowSelectRowProps, - UseRowStateRowProps { - initialSubRows: Row[]; -} - -export interface TableCommonProps { - style?: CSSProperties | undefined; - className?: string | undefined; - role?: string | undefined; -} - -export interface TableProps extends TableCommonProps {} - -export interface TableBodyProps extends TableCommonProps {} - -export interface TableKeyedProps extends TableCommonProps { - key: React.Key; -} - -export interface TableHeaderGroupProps extends TableKeyedProps {} - -export interface TableFooterGroupProps extends TableKeyedProps {} - -export interface TableHeaderProps extends TableKeyedProps {} - -export interface TableFooterProps extends TableKeyedProps {} - -export interface TableRowProps extends TableKeyedProps {} - -export interface TableCellProps extends TableKeyedProps {} - -export interface TableToggleCommonProps extends TableCommonProps { - onChange?: ((e: ChangeEvent) => void) | undefined; - checked?: boolean | undefined; - title?: string | undefined; - indeterminate?: boolean | undefined; -} - -export interface MetaBase> { - instance: TableInstance; - userProps: any; -} - -// inspired by ExtendState in https://github.com/reduxjs/redux/blob/master/src/types/store.ts -export type Meta< - D extends Record, - Extension = never, - M = MetaBase, -> = [Extension] extends [never] ? M : M & Extension; - -//#region useTable -export function useTable = {}>( - options: TableOptions, - ...plugins: Array> -): TableInstance; - -/** - * NOTE: To use custom options, use "Interface Merging" to add the custom options - */ -export type UseTableOptions> = { - columns: ReadonlyArray>; - data: readonly D[]; -} & Partial<{ - initialState: Partial>; - stateReducer: ( - newState: TableState, - action: ActionType, - previousState: TableState, - instance?: TableInstance, - ) => TableState; - useControlledState: (state: TableState, meta: Meta) => TableState; - defaultColumn: Partial>; - getSubRows: (originalRow: D, relativeIndex: number) => D[]; - getRowId: (originalRow: D, relativeIndex: number, parent?: Row) => string; - autoResetHiddenColumns: boolean; -}>; - -export type PropGetter< - D extends Record, - Props, - T extends object = never, - P = Partial, -> = ((props: P, meta: Meta) => P | P[]) | P | P[]; - -export type TablePropGetter> = PropGetter< - D, - TableProps ->; - -export type TableBodyPropGetter> = PropGetter< - D, - TableBodyProps ->; - -export type HeaderPropGetter> = PropGetter< - D, - TableHeaderProps, - { column: HeaderGroup } ->; - -export type FooterGroupPropGetter> = - PropGetter }>; - -export type HeaderGroupPropGetter> = - PropGetter }>; - -export type FooterPropGetter> = PropGetter< - D, - TableFooterProps, - { column: HeaderGroup } ->; - -export type RowPropGetter> = PropGetter< - D, - TableRowProps, - { row: Row } ->; - -export type CellPropGetter> = PropGetter< - D, - TableCellProps, - { cell: Cell } ->; - -export interface ReducerTableState> - extends TableState, - Record {} - -export interface UseTableHooks> - extends Record { - useOptions: Array< - (options: TableOptions, args: TableOptions) => TableOptions - >; - stateReducers: Array< - ( - newState: TableState, - action: ActionType, - previousState?: TableState, - instance?: TableInstance, - ) => ReducerTableState | undefined - >; - columns: Array< - (columns: Array>, meta: Meta) => Array> - >; - columnsDeps: Array<(deps: any[], meta: Meta) => any[]>; - allColumns: Array< - (allColumns: Array>, meta: Meta) => Array> - >; - allColumnsDeps: Array<(deps: any[], meta: Meta) => any[]>; - visibleColumns: Array< - (allColumns: Array>, meta: Meta) => Array> - >; - visibleColumnsDeps: Array<(deps: any[], meta: Meta) => any[]>; - headerGroups: Array< - (allColumns: Array>, meta: Meta) => Array> - >; - headerGroupsDeps: Array<(deps: any[], meta: Meta) => any[]>; - useInstanceBeforeDimensions: Array<(instance: TableInstance) => void>; - useInstance: Array<(instance: TableInstance) => void>; - prepareRow: Array<(row: Row, meta: Meta) => void>; - useControlledState: Array< - (state: TableState, meta: Meta) => TableState - >; - - getTableProps: Array>; - getTableBodyProps: Array>; - getHeaderGroupProps: Array>; - getFooterGroupProps: Array>; - getHeaderProps: Array>; - getFooterProps: Array>; - getRowProps: Array>; - getCellProps: Array>; - useFinalInstance: Array<(instance: TableInstance) => void>; -} - -export interface UseTableColumnOptions> { - id?: IdType | undefined; - Header?: Renderer> | undefined; - Footer?: Renderer> | undefined; - width?: number | string | undefined; - minWidth?: number | undefined; - maxWidth?: number | undefined; -} - -type UpdateHiddenColumns> = ( - oldHidden: Array>, -) => Array>; - -export interface TableToggleHideAllColumnProps extends TableToggleCommonProps {} - -export interface UseTableInstanceProps> { - state: TableState; - plugins: Array>; - dispatch: TableDispatch; - columns: Array>; - allColumns: Array>; - visibleColumns: Array>; - headerGroups: Array>; - footerGroups: Array>; - headers: Array>; - flatHeaders: Array>; - rows: Array>; - rowsById: Record>; - getTableProps: (propGetter?: TablePropGetter) => TableProps; - getTableBodyProps: (propGetter?: TableBodyPropGetter) => TableBodyProps; - prepareRow: (row: Row) => void; - flatRows: Array>; - totalColumnsWidth: number; - allColumnsHidden: boolean; - toggleHideColumn: (columnId: IdType, value?: boolean) => void; - setHiddenColumns: (param: Array> | UpdateHiddenColumns) => void; - toggleHideAllColumns: (value?: boolean) => void; - getToggleHideAllColumnsProps: ( - props?: Partial, - ) => TableToggleHideAllColumnProps; - getHooks: () => Hooks; -} - -export interface UseTableHeaderGroupProps> { - headers: Array>; - getHeaderGroupProps: ( - propGetter?: HeaderGroupPropGetter, - ) => TableHeaderProps; - getFooterGroupProps: ( - propGetter?: FooterGroupPropGetter, - ) => TableFooterProps; - totalHeaderCount: number; // not documented -} - -export interface UseTableColumnProps> { - id: IdType; - columns?: Array> | undefined; - isVisible: boolean; - render: (type: 'Header' | 'Footer' | string, props?: object) => ReactNode; - totalLeft: number; - totalWidth: number; - getHeaderProps: (propGetter?: HeaderPropGetter) => TableHeaderProps; - getFooterProps: (propGetter?: FooterPropGetter) => TableFooterProps; - toggleHidden: (value?: boolean) => void; - parent?: ColumnInstance | undefined; // not documented - getToggleHiddenProps: (userProps?: any) => any; - depth: number; // not documented - placeholderOf?: ColumnInstance | undefined; -} - -export interface UseTableRowProps> { - cells: Array>; - allCells: Array>; - values: Record, CellValue>; - getRowProps: (propGetter?: RowPropGetter) => TableRowProps; - index: number; - original: D; - id: string; - subRows: Array>; -} - -export interface UseTableCellProps, V = any> { - column: ColumnInstance; - row: Row; - value: CellValue; - getCellProps: (propGetter?: CellPropGetter) => TableCellProps; - render: (type: 'Cell' | string, userProps?: object) => ReactNode; -} - -export type HeaderProps> = - TableInstance & { - column: ColumnInstance; - }; - -export type FooterProps> = - TableInstance & { - column: ColumnInstance; - }; - -export type CellProps< - D extends Record, - V = any, -> = TableInstance & { - column: ColumnInstance; - row: Row; - cell: Cell; - value: CellValue; -}; - -export type Accessor> = ( - originalRow: D, - index: number, - sub: { - subRows: D[]; - depth: number; - data: D[]; - }, -) => CellValue; - -//#endregion - -// Plugins - -//#region useAbsoluteLayout -export function useAbsoluteLayout = {}>( - hooks: Hooks, -): void; - -export namespace useAbsoluteLayout { - const pluginName = 'useAbsoluteLayout'; -} -//#endregion - -//#region useBlockLayout -export function useBlockLayout = {}>( - hooks: Hooks, -): void; - -export namespace useBlockLayout { - const pluginName = 'useBlockLayout'; -} -//#endregion - -//#region useColumnOrder -export function useColumnOrder = {}>( - hooks: Hooks, -): void; - -export namespace useColumnOrder { - const pluginName = 'useColumnOrder'; -} - -export interface UseColumnOrderState> { - columnOrder: Array>; -} - -export interface UseColumnOrderInstanceProps< - D extends Record, -> { - setColumnOrder: ( - updater: - | ((columnOrder: Array>) => Array>) - | Array>, - ) => void; -} - -//#endregion - -//#region useExpanded -export function useExpanded = {}>( - hooks: Hooks, -): void; - -export namespace useExpanded { - const pluginName = 'useExpanded'; -} - -export interface TableExpandedToggleProps extends TableKeyedProps {} - -export type UseExpandedOptions> = Partial<{ - manualExpandedKey: IdType; - paginateExpandedRows: boolean; - expandSubRows: boolean; - autoResetExpanded?: boolean | undefined; -}>; - -export interface UseExpandedHooks> { - getToggleRowsExpandedProps: Array>; - getToggleAllRowsExpandedProps: Array>; -} - -export interface UseExpandedState> { - expanded: Record, boolean>; -} - -export interface UseExpandedInstanceProps> { - preExpandedRows: Array>; - expandedRows: Array>; - rows: Array>; - expandedDepth: number; - isAllRowsExpanded: boolean; - toggleRowExpanded: (id: Array>, value?: boolean) => void; - toggleAllRowsExpanded: (value?: boolean) => void; -} - -export interface UseExpandedRowProps> { - isExpanded: boolean; - canExpand: boolean; - subRows: Array>; - toggleRowExpanded: (value?: boolean) => void; - getToggleRowExpandedProps: ( - props?: Partial, - ) => TableExpandedToggleProps; - depth: number; -} - -//#endregion - -//#region useFilters -export function useFilters = {}>( - hooks: Hooks, -): void; - -export namespace useFilters { - const pluginName = 'useFilters'; -} - -export type UseFiltersOptions> = Partial<{ - manualFilters: boolean; - disableFilters: boolean; - defaultCanFilter: boolean; - filterTypes: FilterTypes; - autoResetFilters?: boolean | undefined; -}>; - -export interface UseFiltersState> { - filters: Filters; -} - -export type UseFiltersColumnOptions> = - Partial<{ - Filter: Renderer>; - disableFilters: boolean; - defaultCanFilter: boolean; - filter: FilterType | DefaultFilterTypes | string; - }>; - -export interface UseFiltersInstanceProps> { - preFilteredRows: Array>; - preFilteredFlatRows: Array>; - preFilteredRowsById: Record>; - filteredRows: Array>; - filteredFlatRows: Array>; - filteredRowsById: Record>; - rows: Array>; - flatRows: Array>; - rowsById: Record>; - setFilter: ( - columnId: IdType, - updater: ((filterValue: FilterValue) => FilterValue) | FilterValue, - ) => void; - setAllFilters: ( - updater: Filters | ((filters: Filters) => Filters), - ) => void; -} - -export interface UseFiltersColumnProps> { - canFilter: boolean; - setFilter: ( - updater: ((filterValue: FilterValue) => FilterValue) | FilterValue, - ) => void; - filterValue: FilterValue; - preFilteredRows: Array>; - filteredRows: Array>; -} - -export type FilterProps> = HeaderProps; -export type FilterValue = any; -export type Filters> = Array<{ - id: IdType; - value: FilterValue; -}>; -export type FilterTypes> = Record< - string, - FilterType ->; - -export type DefaultFilterTypes = - | 'text' - | 'exactText' - | 'exactTextCase' - | 'includes' - | 'includesAll' - | 'exact' - | 'equals' - | 'between'; - -export interface FilterType> { - ( - rows: Array>, - columnIds: Array>, - filterValue: FilterValue, - ): Array>; - - autoRemove?: ((filterValue: FilterValue) => boolean) | undefined; -} - -//#endregion - -//#region useFlexLayout -export function useFlexLayout = {}>( - hooks: Hooks, -): void; - -export namespace useFlexLayout { - const pluginName = 'useFlexLayout'; -} -//#endregion - -//#region useGridLayout -export function useGridLayout = {}>( - hooks: Hooks, -): void; - -export namespace useGridLayout { - const pluginName = 'useGridLayout'; -} -//#endregion - -//#region useGlobalFilter -export function useGlobalFilter = {}>( - hooks: Hooks, -): void; - -export namespace useGlobalFilter { - const pluginName = 'useGlobalFilter'; -} - -export type UseGlobalFiltersOptions> = - Partial<{ - globalFilter: - | (( - rows: Array>, - columnIds: Array>, - filterValue: any, - ) => Array>) - | string; - manualGlobalFilter: boolean; - filterTypes: FilterTypes; - autoResetGlobalFilter?: boolean | undefined; - disableGlobalFilter?: boolean | undefined; - }>; - -export interface UseGlobalFiltersState> { - globalFilter: any; -} - -export type UseGlobalFiltersColumnOptions> = - Partial<{ - disableGlobalFilter?: boolean | undefined; - }>; - -export interface UseGlobalFiltersInstanceProps< - D extends Record, -> { - preGlobalFilteredRows: Array>; - preGlobalFilteredFlatRows: Array>; - preGlobalFilteredRowsById: Record>; - globalFilteredRows: Array>; - globalFilteredFlatRows: Array>; - globalFilteredRowsById: Record>; - rows: Array>; - flatRows: Array>; - rowsById: Record>; - setGlobalFilter: (filterValue: FilterValue) => void; -} - -//#endregion - -//#region useGroupBy -export function useGroupBy = {}>( - hooks: Hooks, -): void; - -export namespace useGroupBy { - const pluginName = 'useGroupBy'; -} - -export interface TableGroupByToggleProps { - title?: string | undefined; - style?: CSSProperties | undefined; - onClick?: ((e: MouseEvent) => void) | undefined; -} - -export type UseGroupByOptions> = Partial<{ - manualGroupBy: boolean; - disableGroupBy: boolean; - defaultCanGroupBy: boolean; - aggregations: Record>; - groupByFn: ( - rows: Array>, - columnId: IdType, - ) => Record>>; - autoResetGroupBy?: boolean | undefined; -}>; - -export interface UseGroupByHooks> { - getGroupByToggleProps: Array>; -} - -export interface UseGroupByState> { - groupBy: Array>; -} - -export type UseGroupByColumnOptions> = - Partial<{ - aggregate: Aggregator; - Aggregated: Renderer>; - disableGroupBy: boolean; - defaultCanGroupBy: boolean; - }>; - -export interface UseGroupByInstanceProps> { - preGroupedRows: Array>; - preGroupedFlatRows: Array>; - preGroupedRowsById: Record>; - groupedRows: Array>; - groupedFlatRows: Array>; - groupedRowsById: Record>; - onlyGroupedFlatRows: Array>; - onlyGroupedRowsById: Record>; - nonGroupedFlatRows: Array>; - nonGroupedRowsById: Record>; - rows: Array>; - flatRows: Array>; - rowsById: Record>; - toggleGroupBy: (columnId: IdType, value?: boolean) => void; -} - -export interface UseGroupByColumnProps> { - canGroupBy: boolean; - isGrouped: boolean; - groupedIndex: number; - toggleGroupBy: () => void; - getGroupByToggleProps: ( - props?: Partial, - ) => TableGroupByToggleProps; -} - -export interface UseGroupByRowProps> { - isGrouped: boolean; - groupByID: IdType; - groupByVal: string; - values: Record, AggregatedValue>; - subRows: Array>; - leafRows: Array>; - depth: number; - id: string; - index: number; -} - -export interface UseGroupByCellProps> { - isGrouped: boolean; - isPlaceholder: boolean; - isAggregated: boolean; -} - -export type DefaultAggregators = - | 'sum' - | 'average' - | 'median' - | 'uniqueCount' - | 'count'; - -export type AggregatorFn> = ( - columnValues: CellValue[], - rows: Array>, - isAggregated: boolean, -) => AggregatedValue; -export type Aggregator> = - | AggregatorFn - | DefaultAggregators - | string; -export type AggregatedValue = any; -//#endregion - -//#region usePagination -export function usePagination = {}>( - hooks: Hooks, -): void; - -export namespace usePagination { - const pluginName = 'usePagination'; -} - -export type UsePaginationOptions> = Partial<{ - pageCount: number; - manualPagination: boolean; - autoResetPage?: boolean | undefined; - paginateExpandedRows: boolean; -}>; - -export interface UsePaginationState> { - pageSize: number; - pageIndex: number; -} - -export interface UsePaginationInstanceProps> { - page: Array>; - pageCount: number; - pageOptions: number[]; - canPreviousPage: boolean; - canNextPage: boolean; - gotoPage: (updater: ((pageIndex: number) => number) | number) => void; - previousPage: () => void; - nextPage: () => void; - setPageSize: (pageSize: number) => void; -} - -//#endregion - -//#region useResizeColumns -export function useResizeColumns = {}>( - hooks: Hooks, -): void; - -export namespace useResizeColumns { - const pluginName = 'useResizeColumns'; -} - -export interface UseResizeColumnsOptions> { - disableResizing?: boolean | undefined; - autoResetResize?: boolean | undefined; -} - -export interface UseResizeColumnsState> { - columnResizing: { - startX?: number | undefined; - columnWidth: number; - headerIdWidths: Record; - columnWidths: any; - isResizingColumn?: string | undefined; - }; -} - -export interface UseResizeColumnsColumnOptions< - D extends Record, -> { - disableResizing?: boolean | undefined; -} - -export interface TableResizerProps {} - -export interface UseResizeColumnsColumnProps< - D extends Record, -> { - getResizerProps: (props?: Partial) => TableResizerProps; - canResize: boolean; - isResizing: boolean; -} - -//#endregion - -//#region useRowSelect -export function useRowSelect = {}>( - hooks: Hooks, -): void; - -export namespace useRowSelect { - const pluginName = 'useRowSelect'; -} - -export interface TableToggleAllRowsSelectedProps - extends TableToggleCommonProps {} - -export interface TableToggleRowsSelectedProps extends TableToggleCommonProps {} - -export type UseRowSelectOptions> = Partial<{ - manualRowSelectedKey: IdType; - autoResetSelectedRows: boolean; - selectSubRows: boolean; -}>; - -export interface UseRowSelectHooks> { - getToggleRowSelectedProps: Array>; - getToggleAllRowsSelectedProps: Array< - PropGetter - >; - getToggleAllPageRowsSelectedProps: Array< - PropGetter - >; -} - -export interface UseRowSelectState> { - selectedRowIds: Record, boolean>; -} - -export interface UseRowSelectInstanceProps> { - toggleRowSelected: (rowId: IdType, set?: boolean) => void; - toggleAllRowsSelected: (value?: boolean) => void; - getToggleAllRowsSelectedProps: ( - props?: Partial, - ) => TableToggleAllRowsSelectedProps; - getToggleAllPageRowsSelectedProps: ( - props?: Partial, - ) => TableToggleAllRowsSelectedProps; - isAllRowsSelected: boolean; - selectedFlatRows: Array>; -} - -export interface UseRowSelectRowProps> { - isSelected: boolean; - isSomeSelected: boolean; - toggleRowSelected: (set?: boolean) => void; - getToggleRowSelectedProps: ( - props?: Partial, - ) => TableToggleRowsSelectedProps; -} - -//#endregion - -//#region useRowState -export function useRowState = {}>( - hooks: Hooks, -): void; - -export namespace useRowState { - const pluginName = 'useRowState'; -} - -export type UseRowStateOptions> = Partial<{ - initialRowStateAccessor: (row: Row) => UseRowStateLocalState; - getResetRowStateDeps: (instance: TableInstance) => any[]; - autoResetRowState?: boolean | undefined; -}>; - -export interface UseRowStateState> { - rowState: Record }>; -} - -export interface UseRowStateInstanceProps> { - setRowState: (rowPath: string[], updater: UseRowUpdater) => void; - setCellState: ( - rowPath: string[], - columnId: IdType, - updater: UseRowUpdater, - ) => void; -} - -export interface UseRowStateRowProps> { - state: UseRowStateLocalState; - setState: (updater: UseRowUpdater) => void; -} - -export interface UseRowStateCellProps> { - state: UseRowStateLocalState; - setState: (updater: UseRowUpdater) => void; -} - -export type UseRowUpdater = T | ((prev: T) => T); -export type UseRowStateLocalState< - D extends Record, - T = unknown, -> = Record, T>; -//#endregion - -//#region useSortBy -export function useSortBy = {}>( - hooks: Hooks, -): void; - -export namespace useSortBy { - const pluginName = 'useSortBy'; -} - -export interface TableSortByToggleProps { - title?: string | undefined; - style?: CSSProperties | undefined; - onClick?: ((e: MouseEvent) => void) | undefined; -} - -export type UseSortByOptions> = Partial<{ - manualSortBy: boolean; - disableSortBy: boolean; - defaultCanSort: boolean; - disableMultiSort: boolean; - isMultiSortEvent: (e: MouseEvent) => boolean; - maxMultiSortColCount: number; - disableSortRemove: boolean; - disabledMultiRemove: boolean; - orderByFn: ( - rows: Array>, - sortFns: Array>, - directions: boolean[], - ) => Array>; - sortTypes: Record>; - autoResetSortBy?: boolean | undefined; -}>; - -export interface UseSortByHooks> { - getSortByToggleProps: Array>; -} - -export interface UseSortByState> { - sortBy: Array>; -} - -export type UseSortByColumnOptions> = - Partial<{ - defaultCanSort: boolean; - disableSortBy: boolean; - sortDescFirst: boolean; - sortInverted: boolean; - sortType: SortByFn | DefaultSortTypes | string; - }>; - -export interface UseSortByInstanceProps> { - rows: Array>; - preSortedRows: Array>; - setSortBy: (sortBy: Array>) => void; - toggleSortBy: ( - columnId: IdType, - descending?: boolean, - isMulti?: boolean, - ) => void; -} - -export interface UseSortByColumnProps> { - canSort: boolean; - toggleSortBy: (descending?: boolean, multi?: boolean) => void; - getSortByToggleProps: ( - props?: Partial, - ) => TableSortByToggleProps; - clearSortBy: () => void; - isSorted: boolean; - sortedIndex: number; - isSortedDesc: boolean | undefined; -} - -export type OrderByFn> = ( - rowA: Row, - rowB: Row, -) => number; -export type SortByFn> = ( - rowA: Row, - rowB: Row, - columnId: IdType, - desc?: boolean, -) => number; - -export type DefaultSortTypes = - | 'alphanumeric' - | 'datetime' - | 'basic' - | 'string' - | 'number'; - -export interface SortingRule { - id: IdType; - desc?: boolean | undefined; -} - -//#endregion - -// Additional API -export const actions: Record; -export type ActionType = { type: string } & Record; -export const defaultColumn: Partial & Record; - -// Helpers -export type StringKey = Extract; -export type IdType = StringKey | string; -export type CellValue = V; - -export type Renderer = - | ComponentType - | ReactElement - | string - | number - | ReactFragment; - -export interface PluginHook> { - (hooks: Hooks): void; - pluginName?: string | undefined; -} - -export type TableDispatch = (action: A) => void; - -// utils -export function defaultOrderByFn = {}>( - arr: Array>, - funcs: Array>, - dirs: boolean[], -): Array>; - -export function defaultGroupByFn = {}>( - rows: Array>, - columnId: IdType, -): Record>>; - -export function makePropGetter(hooks: Hooks, ...meta: any[]): any; - -export function reduceHooks( - hooks: Hooks, - initial: T, - ...args: any[] -): T; - -export function loopHooks(hooks: Hooks, ...args: any[]): void; - -export function ensurePluginOrder = {}>( - plugins: Array>, - befores: string[], - pluginName: string, -): void; - -export function functionalUpdate = {}>( - updater: any, - old: Partial>, -): Partial>; - -export function useGetLatest(obj: T): () => T; - -export function safeUseLayoutEffect( - effect: EffectCallback, - deps?: DependencyList, -): void; - -export function useMountedLayoutEffect( - effect: EffectCallback, - deps?: DependencyList, -): void; - -export function useAsyncDebounce any>( - defaultFn: F, - defaultWait?: number, -): F; - -export function makeRenderer( - instance: TableInstance, - column: ColumnInstance, - meta?: any, -): ReactElement; From 2a1a04d935658082772e9b06971188090b629219 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Fri, 8 Sep 2023 13:09:51 -0400 Subject: [PATCH 189/196] Reverted playground --- playgrounds/vite/src/App.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/playgrounds/vite/src/App.tsx b/playgrounds/vite/src/App.tsx index 0a6d89ab420..308ffd82cc0 100644 --- a/playgrounds/vite/src/App.tsx +++ b/playgrounds/vite/src/App.tsx @@ -1,5 +1,4 @@ import { Button } from '@itwin/itwinui-react'; -import { Column } from '@itwin/itwinui-react/react-table'; const App = () => { return ( From 0007c277056a8965bd2d37bd0eb64e441b2288be Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Fri, 8 Sep 2023 13:16:54 -0400 Subject: [PATCH 190/196] Removed unnecessary generic type assignment --- .../itwinui-react/src/react-table/react-table.types-test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/itwinui-react/src/react-table/react-table.types-test.tsx b/packages/itwinui-react/src/react-table/react-table.types-test.tsx index 8e5bc1a9ec8..89d25361496 100644 --- a/packages/itwinui-react/src/react-table/react-table.types-test.tsx +++ b/packages/itwinui-react/src/react-table/react-table.types-test.tsx @@ -673,7 +673,7 @@ import { SvgMore } from 'src/core/utils/index.js'; setGlobalFilter(e.target.value) } /> - +
Date: Fri, 8 Sep 2023 16:10:08 -0400 Subject: [PATCH 191/196] Make Column used in file --- .../itwinui-react/src/react-table/react-table.types-test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/itwinui-react/src/react-table/react-table.types-test.tsx b/packages/itwinui-react/src/react-table/react-table.types-test.tsx index 89d25361496..c3944654c38 100644 --- a/packages/itwinui-react/src/react-table/react-table.types-test.tsx +++ b/packages/itwinui-react/src/react-table/react-table.types-test.tsx @@ -58,7 +58,7 @@ import { SvgMore } from 'src/core/utils/index.js'; Header: 'Header 2', accessor: 'header2', }, - ] satisfies TableTypes.Column<{ + ] satisfies Column<{ header1: string; header2: string; }>[]; From 33f9179110d74a0922a4e38f47b4157af9630301 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Mon, 11 Sep 2023 12:42:08 -0400 Subject: [PATCH 192/196] Reverse order of test:types and test:unit to pass --coverage in CI to jest --- packages/itwinui-react/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/itwinui-react/package.json b/packages/itwinui-react/package.json index 76ad01d6d03..d41427f6f4e 100644 --- a/packages/itwinui-react/package.json +++ b/packages/itwinui-react/package.json @@ -65,7 +65,7 @@ "clean:build": "rimraf esm && rimraf cjs && rimraf react-table.d.ts", "clean:coverage": "rimraf coverage", "clean": "rimraf .turbo && yarn clean:coverage && yarn clean:build && rimraf node_modules", - "test": "yarn test:unit && yarn test:types", + "test": "yarn test:types && yarn test:unit", "test:unit": "jest", "test:unit:watch": "jest --watch", "test:types": "tsc -p tsconfig.test.json --noEmit", From fdff0a98f9c4198b434e37595b1deabadfba2133 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Mon, 11 Sep 2023 13:01:30 -0400 Subject: [PATCH 193/196] Leftover changes of subset types to TableRowDataType --- .../src/react-table/react-table.types-test.tsx | 18 +++--------------- 1 file changed, 3 insertions(+), 15 deletions(-) diff --git a/packages/itwinui-react/src/react-table/react-table.types-test.tsx b/packages/itwinui-react/src/react-table/react-table.types-test.tsx index c3944654c38..debbf710eae 100644 --- a/packages/itwinui-react/src/react-table/react-table.types-test.tsx +++ b/packages/itwinui-react/src/react-table/react-table.types-test.tsx @@ -576,9 +576,7 @@ import { SvgMore } from 'src/core/utils/index.js'; (state) => console.log(`Sort changed. Table state: ${JSON.stringify(state)}`), [], - ) satisfies NonNullable< - TableProps<{ name: string; description: string }>['onSort'] - >; + ) satisfies NonNullable['onSort']>; const onExpand = React.useCallback( (rows, state) => @@ -588,21 +586,11 @@ import { SvgMore } from 'src/core/utils/index.js'; )}`, ), [], - ) satisfies NonNullable< - TableProps<{ - name: string; - description: string; - }>['onExpand'] - >; + ) satisfies NonNullable['onExpand']>; const onRowInViewport = React.useCallback((rowData) => { console.log(`Row in view: ${JSON.stringify(rowData)}`); - }, []) satisfies NonNullable< - TableProps<{ - name: string; - description: string; - }>['onRowInViewport'] - >; + }, []) satisfies NonNullable['onRowInViewport']>; const rowProps = React.useCallback( (row: TableTypes.Row) => { From 234f4f84535b9a7581400d3b4869fbc868304739 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Mon, 11 Sep 2023 13:07:35 -0400 Subject: [PATCH 194/196] Removed a few verbose types in favor of less strict types --- apps/storybook/src/Table.stories.tsx | 35 ++++++---------------------- 1 file changed, 7 insertions(+), 28 deletions(-) diff --git a/apps/storybook/src/Table.stories.tsx b/apps/storybook/src/Table.stories.tsx index de5762041b4..b93e1d91078 100644 --- a/apps/storybook/src/Table.stories.tsx +++ b/apps/storybook/src/Table.stories.tsx @@ -178,9 +178,7 @@ export const SelectableMulti = () => { )}`, )(), [], - ) satisfies NonNullable< - TableProps<{ name: string; description: string }>['onSelect'] - >; + ) satisfies NonNullable; const onRowClick = useCallback( (event: React.MouseEvent, row: Row) => @@ -253,9 +251,7 @@ export const Sortable = () => { const onSort = useCallback( (state) => action(`Sort changed. Table state: ${JSON.stringify(state)}`)(), [], - ) satisfies NonNullable< - TableProps<{ name: string; description: string }>['onSort'] - >; + ) satisfies NonNullable; const columns = useMemo( () => [ @@ -466,7 +462,7 @@ export const Filters = () => { )(); }, [], - ) satisfies NonNullable['onFilter']>; + ) satisfies NonNullable; return (
{ )}`, )(), [], - ) satisfies NonNullable< - TableProps<{ - name: string; - description: string; - }>['onExpand'] - >; + ) satisfies NonNullable; const columns = useMemo( () => [ @@ -630,12 +621,7 @@ export const ExpandableSubrows = () => { )}`, )(), [], - ) satisfies NonNullable< - TableProps<{ - name: string; - description: string; - }>['onExpand'] - >; + ) satisfies NonNullable; const columns = useMemo( () => [ @@ -846,12 +832,7 @@ export const RowInViewport = () => { const onRowInViewport = useCallback((rowData) => { action(`Row in view: ${JSON.stringify(rowData)}`)(); - }, []) satisfies NonNullable< - TableProps<{ - name: string; - description: string; - }>['onRowInViewport'] - >; + }, []) satisfies NonNullable; return ( <> @@ -1664,9 +1645,7 @@ export const Condensed = () => { )}`, )(), [], - ) satisfies NonNullable< - TableProps<{ name: string; description: string }>['onExpand'] - >; + ) satisfies NonNullable; const columns = useMemo( () => [ From 7b4c2c8fd071910ea366c7196d6c512e6333a7f8 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Tue, 12 Sep 2023 10:53:44 -0400 Subject: [PATCH 195/196] Removed paths from tsconfig since they were hiding TS errors. In progress of updating Table.stories.tsx --- .../src/core/Table/SubRowExpander.tsx | 2 +- .../itwinui-react/src/core/Table/Table.test.tsx | 4 ++-- packages/itwinui-react/src/core/Table/Table.tsx | 4 ++-- .../itwinui-react/src/core/Table/TableCell.tsx | 2 +- .../src/core/Table/TableRowMemoized.tsx | 7 ++++++- .../src/core/Table/actionHandlers/expandHandler.ts | 5 ++++- .../src/core/Table/actionHandlers/filterHandler.ts | 6 +++++- .../src/core/Table/actionHandlers/resizeHandler.ts | 5 ++++- .../src/core/Table/actionHandlers/selectHandler.ts | 7 ++++++- .../src/core/Table/cells/DefaultCell.tsx | 2 +- .../src/core/Table/cells/EditableCell.tsx | 2 +- .../src/core/Table/columns/actionColumn.tsx | 2 +- .../src/core/Table/columns/expanderColumn.tsx | 6 +++++- .../src/core/Table/columns/selectionColumn.tsx | 6 +++++- .../DateRangeFilter/DateRangeFilter.test.tsx | 2 +- .../src/core/Table/filters/FilterToggle.test.tsx | 2 +- .../src/core/Table/filters/FilterToggle.tsx | 2 +- .../NumberRangeFilter/NumberRangeFilter.test.tsx | 2 +- .../Table/filters/TextFilter/TextFilter.test.tsx | 2 +- .../Table/filters/customFilterFunctions.test.ts | 2 +- .../core/Table/filters/customFilterFunctions.ts | 2 +- .../core/Table/filters/defaultFilterFunctions.ts | 2 +- .../itwinui-react/src/core/Table/filters/types.ts | 6 +++++- .../src/core/Table/hooks/useColumnDragAndDrop.tsx | 8 ++++++-- .../src/core/Table/hooks/useExpanderCell.tsx | 7 ++++++- .../src/core/Table/hooks/useResizeColumns.tsx | 8 ++++++-- .../src/core/Table/hooks/useScrollToRow.ts | 2 +- .../src/core/Table/hooks/useSelectionCell.tsx | 5 ++++- .../src/core/Table/hooks/useStickyColumns.tsx | 9 +++++++-- .../src/core/Table/hooks/useSubRowFiltering.tsx | 7 ++++++- .../src/core/Table/hooks/useSubRowSelection.tsx | 7 ++++++- packages/itwinui-react/src/core/Table/utils.ts | 2 +- .../src/react-table/react-table.types-test.tsx | 14 ++++++++------ packages/itwinui-react/tsconfig.json | 7 +------ 34 files changed, 109 insertions(+), 49 deletions(-) diff --git a/packages/itwinui-react/src/core/Table/SubRowExpander.tsx b/packages/itwinui-react/src/core/Table/SubRowExpander.tsx index c97897a6334..1899d49faba 100644 --- a/packages/itwinui-react/src/core/Table/SubRowExpander.tsx +++ b/packages/itwinui-react/src/core/Table/SubRowExpander.tsx @@ -4,7 +4,7 @@ *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; import { SvgChevronRight } from '../utils/index.js'; -import type { Cell, CellProps } from 'react-table'; +import type { Cell, CellProps } from '../../react-table/react-table.js'; import { IconButton } from '../Buttons/index.js'; export type SubRowExpanderProps> = { diff --git a/packages/itwinui-react/src/core/Table/Table.test.tsx b/packages/itwinui-react/src/core/Table/Table.test.tsx index 02cc55ac2eb..8d0c4a22151 100644 --- a/packages/itwinui-react/src/core/Table/Table.test.tsx +++ b/packages/itwinui-react/src/core/Table/Table.test.tsx @@ -18,8 +18,8 @@ import { type TableFilterProps, tableFilters, } from './filters/index.js'; -import { actions } from 'react-table'; -import type { CellProps, Column, Row } from 'react-table'; +import { actions } from '../../react-table/react-table.js'; +import type { CellProps, Column, Row } from '../../react-table/react-table.js'; import { InputGroup } from '../InputGroup/index.js'; import { Radio } from '../Radio/index.js'; import { diff --git a/packages/itwinui-react/src/core/Table/Table.tsx b/packages/itwinui-react/src/core/Table/Table.tsx index 724e3e741d1..08f6b312ccd 100644 --- a/packages/itwinui-react/src/core/Table/Table.tsx +++ b/packages/itwinui-react/src/core/Table/Table.tsx @@ -15,7 +15,7 @@ import { usePagination, useColumnOrder, useGlobalFilter, -} from 'react-table'; +} from '../../react-table/react-table.js'; import type { CellProps, HeaderGroup, @@ -25,7 +25,7 @@ import type { ActionType, TableInstance, Column, -} from 'react-table'; +} from '../../react-table/react-table.js'; import { ProgressRadial } from '../ProgressIndicators/index.js'; import { useGlobals, diff --git a/packages/itwinui-react/src/core/Table/TableCell.tsx b/packages/itwinui-react/src/core/Table/TableCell.tsx index 46cc6ebea04..38395a189fe 100644 --- a/packages/itwinui-react/src/core/Table/TableCell.tsx +++ b/packages/itwinui-react/src/core/Table/TableCell.tsx @@ -8,7 +8,7 @@ import type { CellProps, CellRendererProps, TableInstance, -} from 'react-table'; +} from '../../react-table/react-table.js'; import cx from 'classnames'; import { getCellStyle, getStickyStyle } from './utils.js'; import { SubRowExpander } from './SubRowExpander.js'; diff --git a/packages/itwinui-react/src/core/Table/TableRowMemoized.tsx b/packages/itwinui-react/src/core/Table/TableRowMemoized.tsx index e42a436fd8c..2788a603c6f 100644 --- a/packages/itwinui-react/src/core/Table/TableRowMemoized.tsx +++ b/packages/itwinui-react/src/core/Table/TableRowMemoized.tsx @@ -4,7 +4,12 @@ *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; import cx from 'classnames'; -import type { CellProps, Row, TableInstance, TableState } from 'react-table'; +import type { + CellProps, + Row, + TableInstance, + TableState, +} from '../../react-table/react-table.js'; import { Box, useIntersection, diff --git a/packages/itwinui-react/src/core/Table/actionHandlers/expandHandler.ts b/packages/itwinui-react/src/core/Table/actionHandlers/expandHandler.ts index 28fce8e700d..1aacfcd824d 100644 --- a/packages/itwinui-react/src/core/Table/actionHandlers/expandHandler.ts +++ b/packages/itwinui-react/src/core/Table/actionHandlers/expandHandler.ts @@ -2,7 +2,10 @@ * Copyright (c) Bentley Systems, Incorporated. All rights reserved. * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ -import type { TableInstance, TableState } from 'react-table'; +import type { + TableInstance, + TableState, +} from '../../../react-table/react-table.js'; export const onExpandHandler = >( newState: TableState, diff --git a/packages/itwinui-react/src/core/Table/actionHandlers/filterHandler.ts b/packages/itwinui-react/src/core/Table/actionHandlers/filterHandler.ts index e803fce43f9..691bedc0ae5 100644 --- a/packages/itwinui-react/src/core/Table/actionHandlers/filterHandler.ts +++ b/packages/itwinui-react/src/core/Table/actionHandlers/filterHandler.ts @@ -2,7 +2,11 @@ * Copyright (c) Bentley Systems, Incorporated. All rights reserved. * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ -import type { ActionType, TableInstance, TableState } from 'react-table'; +import type { + ActionType, + TableInstance, + TableState, +} from '../../../react-table/react-table.js'; import type { TableFilterValue } from '../filters/index.js'; export const onFilterHandler = >( diff --git a/packages/itwinui-react/src/core/Table/actionHandlers/resizeHandler.ts b/packages/itwinui-react/src/core/Table/actionHandlers/resizeHandler.ts index 98993b9b510..257a10ede72 100644 --- a/packages/itwinui-react/src/core/Table/actionHandlers/resizeHandler.ts +++ b/packages/itwinui-react/src/core/Table/actionHandlers/resizeHandler.ts @@ -2,7 +2,10 @@ * Copyright (c) Bentley Systems, Incorporated. All rights reserved. * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ -import type { ActionType, TableState } from 'react-table'; +import type { + ActionType, + TableState, +} from '../../../react-table/react-table.js'; export const onTableResizeStart = >( state: TableState, diff --git a/packages/itwinui-react/src/core/Table/actionHandlers/selectHandler.ts b/packages/itwinui-react/src/core/Table/actionHandlers/selectHandler.ts index 10569525210..689af474ec5 100644 --- a/packages/itwinui-react/src/core/Table/actionHandlers/selectHandler.ts +++ b/packages/itwinui-react/src/core/Table/actionHandlers/selectHandler.ts @@ -2,7 +2,12 @@ * Copyright (c) Bentley Systems, Incorporated. All rights reserved. * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ -import type { ActionType, Row, TableInstance, TableState } from 'react-table'; +import type { + ActionType, + Row, + TableInstance, + TableState, +} from '../../../react-table/react-table.js'; /** * Handles subrow selection and validation. diff --git a/packages/itwinui-react/src/core/Table/cells/DefaultCell.tsx b/packages/itwinui-react/src/core/Table/cells/DefaultCell.tsx index 469a47b0826..0a46ff7a1cd 100644 --- a/packages/itwinui-react/src/core/Table/cells/DefaultCell.tsx +++ b/packages/itwinui-react/src/core/Table/cells/DefaultCell.tsx @@ -3,7 +3,7 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; -import type { CellRendererProps } from 'react-table'; +import type { CellRendererProps } from '../../../react-table/react-table.js'; import cx from 'classnames'; import { Box } from '../../utils/index.js'; diff --git a/packages/itwinui-react/src/core/Table/cells/EditableCell.tsx b/packages/itwinui-react/src/core/Table/cells/EditableCell.tsx index f703b1d6f51..614aa0cd371 100644 --- a/packages/itwinui-react/src/core/Table/cells/EditableCell.tsx +++ b/packages/itwinui-react/src/core/Table/cells/EditableCell.tsx @@ -3,7 +3,7 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; -import type { CellRendererProps } from 'react-table'; +import type { CellRendererProps } from '../../../react-table/react-table.js'; import { Box, getRandomValue } from '../../utils/index.js'; export type EditableCellProps> = diff --git a/packages/itwinui-react/src/core/Table/columns/actionColumn.tsx b/packages/itwinui-react/src/core/Table/columns/actionColumn.tsx index b695be199ed..9eedbe56e09 100644 --- a/packages/itwinui-react/src/core/Table/columns/actionColumn.tsx +++ b/packages/itwinui-react/src/core/Table/columns/actionColumn.tsx @@ -3,7 +3,7 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; -import type { HeaderProps } from 'react-table'; +import type { HeaderProps } from '../../../react-table/react-table.js'; import { Checkbox } from '../../Checkbox/index.js'; import { SvgColumnManager } from '../../utils/index.js'; import { DropdownMenu } from '../../DropdownMenu/index.js'; diff --git a/packages/itwinui-react/src/core/Table/columns/expanderColumn.tsx b/packages/itwinui-react/src/core/Table/columns/expanderColumn.tsx index 8932195d7f8..961756028df 100644 --- a/packages/itwinui-react/src/core/Table/columns/expanderColumn.tsx +++ b/packages/itwinui-react/src/core/Table/columns/expanderColumn.tsx @@ -4,7 +4,11 @@ *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; import { SvgChevronRight } from '../../utils/index.js'; -import type { CellProps, CellRendererProps, Row } from 'react-table'; +import type { + CellProps, + CellRendererProps, + Row, +} from '../../../react-table/react-table.js'; import { IconButton } from '../../Buttons/index.js'; import { DefaultCell } from '../cells/index.js'; diff --git a/packages/itwinui-react/src/core/Table/columns/selectionColumn.tsx b/packages/itwinui-react/src/core/Table/columns/selectionColumn.tsx index d687290b46e..214b76028ae 100644 --- a/packages/itwinui-react/src/core/Table/columns/selectionColumn.tsx +++ b/packages/itwinui-react/src/core/Table/columns/selectionColumn.tsx @@ -3,7 +3,11 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; -import type { CellProps, CellRendererProps, HeaderProps } from 'react-table'; +import type { + CellProps, + CellRendererProps, + HeaderProps, +} from '../../../react-table/react-table.js'; import { Checkbox } from '../../Checkbox/index.js'; import { DefaultCell } from '../cells/index.js'; diff --git a/packages/itwinui-react/src/core/Table/filters/DateRangeFilter/DateRangeFilter.test.tsx b/packages/itwinui-react/src/core/Table/filters/DateRangeFilter/DateRangeFilter.test.tsx index e8780cb1098..cf3cdf971bb 100644 --- a/packages/itwinui-react/src/core/Table/filters/DateRangeFilter/DateRangeFilter.test.tsx +++ b/packages/itwinui-react/src/core/Table/filters/DateRangeFilter/DateRangeFilter.test.tsx @@ -4,7 +4,7 @@ *--------------------------------------------------------------------------------------------*/ import { fireEvent, render, screen } from '@testing-library/react'; import * as React from 'react'; -import type { HeaderGroup } from 'react-table'; +import type { HeaderGroup } from '../../../../react-table/react-table.js'; import { DateRangeFilter, type DateRangeFilterProps, diff --git a/packages/itwinui-react/src/core/Table/filters/FilterToggle.test.tsx b/packages/itwinui-react/src/core/Table/filters/FilterToggle.test.tsx index 8b1ca81ad26..e4fa36a4e1a 100644 --- a/packages/itwinui-react/src/core/Table/filters/FilterToggle.test.tsx +++ b/packages/itwinui-react/src/core/Table/filters/FilterToggle.test.tsx @@ -5,7 +5,7 @@ import { render, type RenderResult, screen } from '@testing-library/react'; import * as React from 'react'; -import type { HeaderGroup } from 'react-table'; +import type { HeaderGroup } from '../../../react-table/react-table.js'; import { FilterToggle, type FilterToggleProps } from './FilterToggle.js'; import { tableFilters } from './tableFilters.js'; diff --git a/packages/itwinui-react/src/core/Table/filters/FilterToggle.tsx b/packages/itwinui-react/src/core/Table/filters/FilterToggle.tsx index b8f4da2ca00..1bebe8f1b56 100644 --- a/packages/itwinui-react/src/core/Table/filters/FilterToggle.tsx +++ b/packages/itwinui-react/src/core/Table/filters/FilterToggle.tsx @@ -4,7 +4,7 @@ *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; import cx from 'classnames'; -import type { HeaderGroup } from 'react-table'; +import type { HeaderGroup } from '../../../react-table/react-table.js'; import { useGlobals, Popover, diff --git a/packages/itwinui-react/src/core/Table/filters/NumberRangeFilter/NumberRangeFilter.test.tsx b/packages/itwinui-react/src/core/Table/filters/NumberRangeFilter/NumberRangeFilter.test.tsx index c4f65400a00..87401e845e6 100644 --- a/packages/itwinui-react/src/core/Table/filters/NumberRangeFilter/NumberRangeFilter.test.tsx +++ b/packages/itwinui-react/src/core/Table/filters/NumberRangeFilter/NumberRangeFilter.test.tsx @@ -4,7 +4,7 @@ *--------------------------------------------------------------------------------------------*/ import { fireEvent, render, screen } from '@testing-library/react'; import * as React from 'react'; -import type { HeaderGroup } from 'react-table'; +import type { HeaderGroup } from '../../../../react-table/react-table.js'; import { NumberRangeFilter } from './NumberRangeFilter.js'; import type { NumberRangeFilterProps } from './NumberRangeFilter.js'; diff --git a/packages/itwinui-react/src/core/Table/filters/TextFilter/TextFilter.test.tsx b/packages/itwinui-react/src/core/Table/filters/TextFilter/TextFilter.test.tsx index 2c72431a17c..d0d5e0fa2ad 100644 --- a/packages/itwinui-react/src/core/Table/filters/TextFilter/TextFilter.test.tsx +++ b/packages/itwinui-react/src/core/Table/filters/TextFilter/TextFilter.test.tsx @@ -4,7 +4,7 @@ *--------------------------------------------------------------------------------------------*/ import { fireEvent, render, screen } from '@testing-library/react'; import * as React from 'react'; -import type { HeaderGroup } from 'react-table'; +import type { HeaderGroup } from '../../../../react-table/react-table.js'; import type { TableFilterProps } from '../types.js'; import { TextFilter } from './TextFilter.js'; diff --git a/packages/itwinui-react/src/core/Table/filters/customFilterFunctions.test.ts b/packages/itwinui-react/src/core/Table/filters/customFilterFunctions.test.ts index bfb81fe63f9..2b9bfe2cfd6 100644 --- a/packages/itwinui-react/src/core/Table/filters/customFilterFunctions.test.ts +++ b/packages/itwinui-react/src/core/Table/filters/customFilterFunctions.test.ts @@ -3,7 +3,7 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ /* eslint-disable @typescript-eslint/no-explicit-any */ -import type { Row } from 'react-table'; +import type { Row } from '../../../react-table/react-table.js'; import { customFilterFunctions } from './customFilterFunctions.js'; const mockRows = (values: any[]) => { diff --git a/packages/itwinui-react/src/core/Table/filters/customFilterFunctions.ts b/packages/itwinui-react/src/core/Table/filters/customFilterFunctions.ts index 65e90cbb69f..beeaf01e3f9 100644 --- a/packages/itwinui-react/src/core/Table/filters/customFilterFunctions.ts +++ b/packages/itwinui-react/src/core/Table/filters/customFilterFunctions.ts @@ -2,7 +2,7 @@ * Copyright (c) Bentley Systems, Incorporated. All rights reserved. * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ -import type { IdType, Row } from 'react-table'; +import type { IdType, Row } from '../../../react-table/react-table.js'; const isValidDate = (date: Date | undefined) => !!date && !isNaN(date.valueOf()); diff --git a/packages/itwinui-react/src/core/Table/filters/defaultFilterFunctions.ts b/packages/itwinui-react/src/core/Table/filters/defaultFilterFunctions.ts index d7ceddd47e6..244317d7eb1 100644 --- a/packages/itwinui-react/src/core/Table/filters/defaultFilterFunctions.ts +++ b/packages/itwinui-react/src/core/Table/filters/defaultFilterFunctions.ts @@ -28,7 +28,7 @@ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE * SOFTWARE. */ -import type { IdType, Row } from 'react-table'; +import type { IdType, Row } from '../../../react-table/react-table.js'; const text = >( rows: Row[], diff --git a/packages/itwinui-react/src/core/Table/filters/types.ts b/packages/itwinui-react/src/core/Table/filters/types.ts index a483d1c21a3..4f3673e4b46 100644 --- a/packages/itwinui-react/src/core/Table/filters/types.ts +++ b/packages/itwinui-react/src/core/Table/filters/types.ts @@ -2,7 +2,11 @@ * Copyright (c) Bentley Systems, Incorporated. All rights reserved. * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ -import type { FieldType, FilterType, TableFilterProps } from 'react-table'; +import type { + FieldType, + FilterType, + TableFilterProps, +} from '../../../react-table/react-table.js'; export interface TableFilterValue> { /** diff --git a/packages/itwinui-react/src/core/Table/hooks/useColumnDragAndDrop.tsx b/packages/itwinui-react/src/core/Table/hooks/useColumnDragAndDrop.tsx index eb538aad142..eb2cab19034 100644 --- a/packages/itwinui-react/src/core/Table/hooks/useColumnDragAndDrop.tsx +++ b/packages/itwinui-react/src/core/Table/hooks/useColumnDragAndDrop.tsx @@ -3,7 +3,11 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import type * as React from 'react'; -import { actions, makePropGetter, useGetLatest } from 'react-table'; +import { + actions, + makePropGetter, + useGetLatest, +} from '../../../react-table/react-table.js'; import type { ActionType, HeaderGroup, @@ -12,7 +16,7 @@ import type { TableInstance, TableKeyedProps, TableState, -} from 'react-table'; +} from '../../../react-table/react-table.js'; import styles from '../../../styles.js'; const REORDER_ACTIONS = { diff --git a/packages/itwinui-react/src/core/Table/hooks/useExpanderCell.tsx b/packages/itwinui-react/src/core/Table/hooks/useExpanderCell.tsx index b8ba4ae9d92..a8d77c3f00a 100644 --- a/packages/itwinui-react/src/core/Table/hooks/useExpanderCell.tsx +++ b/packages/itwinui-react/src/core/Table/hooks/useExpanderCell.tsx @@ -3,7 +3,12 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; -import type { CellProps, ColumnInstance, Hooks, Row } from 'react-table'; +import type { + CellProps, + ColumnInstance, + Hooks, + Row, +} from '../../../react-table/react-table.js'; import { ExpanderColumn, EXPANDER_CELL_ID } from '../columns/index.js'; export const useExpanderCell = diff --git a/packages/itwinui-react/src/core/Table/hooks/useResizeColumns.tsx b/packages/itwinui-react/src/core/Table/hooks/useResizeColumns.tsx index bab0eee8e78..c309875bad2 100644 --- a/packages/itwinui-react/src/core/Table/hooks/useResizeColumns.tsx +++ b/packages/itwinui-react/src/core/Table/hooks/useResizeColumns.tsx @@ -34,7 +34,11 @@ * SOFTWARE. */ import type * as React from 'react'; -import { actions, makePropGetter, useGetLatest } from 'react-table'; +import { + actions, + makePropGetter, + useGetLatest, +} from '../../../react-table/react-table.js'; import type { ActionType, ColumnInstance, @@ -43,7 +47,7 @@ import type { TableInstance, TableKeyedProps, TableState, -} from 'react-table'; +} from '../../../react-table/react-table.js'; export const useResizeColumns = >( diff --git a/packages/itwinui-react/src/core/Table/hooks/useScrollToRow.ts b/packages/itwinui-react/src/core/Table/hooks/useScrollToRow.ts index 9a98874807f..af32be3a95c 100644 --- a/packages/itwinui-react/src/core/Table/hooks/useScrollToRow.ts +++ b/packages/itwinui-react/src/core/Table/hooks/useScrollToRow.ts @@ -3,7 +3,7 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; -import type { Row } from 'react-table'; +import type { Row } from '../../../react-table/react-table.js'; import type { TableProps } from '../Table.js'; type ScrollToRow> = { diff --git a/packages/itwinui-react/src/core/Table/hooks/useSelectionCell.tsx b/packages/itwinui-react/src/core/Table/hooks/useSelectionCell.tsx index a1f520f574b..f163ccebeec 100644 --- a/packages/itwinui-react/src/core/Table/hooks/useSelectionCell.tsx +++ b/packages/itwinui-react/src/core/Table/hooks/useSelectionCell.tsx @@ -2,7 +2,10 @@ * Copyright (c) Bentley Systems, Incorporated. All rights reserved. * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ -import type { ColumnInstance, Hooks } from 'react-table'; +import type { + ColumnInstance, + Hooks, +} from '../../../react-table/react-table.js'; import { SelectionColumn, SELECTION_CELL_ID } from '../columns/index.js'; export const useSelectionCell = diff --git a/packages/itwinui-react/src/core/Table/hooks/useStickyColumns.tsx b/packages/itwinui-react/src/core/Table/hooks/useStickyColumns.tsx index d8480445ed6..5d1e770717c 100644 --- a/packages/itwinui-react/src/core/Table/hooks/useStickyColumns.tsx +++ b/packages/itwinui-react/src/core/Table/hooks/useStickyColumns.tsx @@ -2,8 +2,13 @@ * Copyright (c) Bentley Systems, Incorporated. All rights reserved. * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ -import { actions } from 'react-table'; -import type { ActionType, Hooks, TableInstance, TableState } from 'react-table'; +import { actions } from '../../../react-table/react-table.js'; +import type { + ActionType, + Hooks, + TableInstance, + TableState, +} from '../../../react-table/react-table.js'; actions.setScrolledLeft = 'setScrolledLeft'; actions.setScrolledRight = 'setScrolledRight'; diff --git a/packages/itwinui-react/src/core/Table/hooks/useSubRowFiltering.tsx b/packages/itwinui-react/src/core/Table/hooks/useSubRowFiltering.tsx index 84183095b98..e005df885b1 100644 --- a/packages/itwinui-react/src/core/Table/hooks/useSubRowFiltering.tsx +++ b/packages/itwinui-react/src/core/Table/hooks/useSubRowFiltering.tsx @@ -3,7 +3,12 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; -import type { Hooks, IdType, Row, TableInstance } from 'react-table'; +import type { + Hooks, + IdType, + Row, + TableInstance, +} from '../../../react-table/react-table.js'; import { defaultFilterFunctions } from '../filters/defaultFilterFunctions.js'; export const useSubRowFiltering = diff --git a/packages/itwinui-react/src/core/Table/hooks/useSubRowSelection.tsx b/packages/itwinui-react/src/core/Table/hooks/useSubRowSelection.tsx index 24180f3a9cb..0d40ce9d52b 100644 --- a/packages/itwinui-react/src/core/Table/hooks/useSubRowSelection.tsx +++ b/packages/itwinui-react/src/core/Table/hooks/useSubRowSelection.tsx @@ -3,7 +3,12 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; -import type { Hooks, IdType, Row, TableInstance } from 'react-table'; +import type { + Hooks, + IdType, + Row, + TableInstance, +} from '../../../react-table/react-table.js'; export const useSubRowSelection = >( hooks: Hooks, diff --git a/packages/itwinui-react/src/core/Table/utils.ts b/packages/itwinui-react/src/core/Table/utils.ts index e012cbb630a..fe907227c8a 100644 --- a/packages/itwinui-react/src/core/Table/utils.ts +++ b/packages/itwinui-react/src/core/Table/utils.ts @@ -2,7 +2,7 @@ * Copyright (c) Bentley Systems, Incorporated. All rights reserved. * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ -import type { ColumnInstance } from 'react-table'; +import type { ColumnInstance } from '../../react-table/react-table.js'; export const getCellStyle = >( column: ColumnInstance, diff --git a/packages/itwinui-react/src/react-table/react-table.types-test.tsx b/packages/itwinui-react/src/react-table/react-table.types-test.tsx index debbf710eae..0d559a279d5 100644 --- a/packages/itwinui-react/src/react-table/react-table.types-test.tsx +++ b/packages/itwinui-react/src/react-table/react-table.types-test.tsx @@ -24,11 +24,13 @@ import { import type { TablePaginatorRendererProps } from '../core/Table/index.js'; // Table types can be imported with an alias or selective types can be imported too. -import * as _TableTypes from 'src/react-table/react-table.js'; -import type { Column } from 'src/react-table/react-table.js'; +import * as TableTypes from './react-table.js'; +import type { Column } from './react-table.js'; -// Can import types from file or by package name. -import * as TableTypes from 'react-table'; +// Importing from react-table should not be possible internally. +// Because doing so could cause unexpected `any`s in the type definitions. +// @ts-expect-error +import * as _TableTypes from 'react-table'; type TableProps = Record> = React.ComponentProps>; @@ -42,8 +44,8 @@ import { MenuItem, Text, Tooltip, -} from 'src/core/index.js'; -import { SvgMore } from 'src/core/utils/index.js'; +} from '../index.js'; +import { SvgMore } from '../core/utils/index.js'; /** * Confirm that `satisfies` on columns does not give any unnecessary type errors. diff --git a/packages/itwinui-react/tsconfig.json b/packages/itwinui-react/tsconfig.json index cef733bfd6a..8ba3ad58ae7 100644 --- a/packages/itwinui-react/tsconfig.json +++ b/packages/itwinui-react/tsconfig.json @@ -20,12 +20,7 @@ "noUnusedLocals": true, "skipLibCheck": true, "isolatedModules": true, - "verbatimModuleSyntax": true, - "baseUrl": ".", - "paths": { - // Since we don't depend on `@types/react-table`, we need to provide the types for it. - "react-table": ["src/react-table/react-table.ts"] - } + "verbatimModuleSyntax": true }, "exclude": ["node_modules", "cjs/**/*", "esm/**/*"] } From 6a76170ae0306491b063a4c47a3e5b209db61533 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Tue, 12 Sep 2023 16:03:57 -0400 Subject: [PATCH 196/196] Revert "Removed paths from tsconfig since they were hiding TS errors. In progress of updating Table.stories.tsx" This reverts commit 7b4c2c8fd071910ea366c7196d6c512e6333a7f8. --- .../src/core/Table/SubRowExpander.tsx | 2 +- .../itwinui-react/src/core/Table/Table.test.tsx | 4 ++-- packages/itwinui-react/src/core/Table/Table.tsx | 4 ++-- .../itwinui-react/src/core/Table/TableCell.tsx | 2 +- .../src/core/Table/TableRowMemoized.tsx | 7 +------ .../src/core/Table/actionHandlers/expandHandler.ts | 5 +---- .../src/core/Table/actionHandlers/filterHandler.ts | 6 +----- .../src/core/Table/actionHandlers/resizeHandler.ts | 5 +---- .../src/core/Table/actionHandlers/selectHandler.ts | 7 +------ .../src/core/Table/cells/DefaultCell.tsx | 2 +- .../src/core/Table/cells/EditableCell.tsx | 2 +- .../src/core/Table/columns/actionColumn.tsx | 2 +- .../src/core/Table/columns/expanderColumn.tsx | 6 +----- .../src/core/Table/columns/selectionColumn.tsx | 6 +----- .../DateRangeFilter/DateRangeFilter.test.tsx | 2 +- .../src/core/Table/filters/FilterToggle.test.tsx | 2 +- .../src/core/Table/filters/FilterToggle.tsx | 2 +- .../NumberRangeFilter/NumberRangeFilter.test.tsx | 2 +- .../Table/filters/TextFilter/TextFilter.test.tsx | 2 +- .../Table/filters/customFilterFunctions.test.ts | 2 +- .../core/Table/filters/customFilterFunctions.ts | 2 +- .../core/Table/filters/defaultFilterFunctions.ts | 2 +- .../itwinui-react/src/core/Table/filters/types.ts | 6 +----- .../src/core/Table/hooks/useColumnDragAndDrop.tsx | 8 ++------ .../src/core/Table/hooks/useExpanderCell.tsx | 7 +------ .../src/core/Table/hooks/useResizeColumns.tsx | 8 ++------ .../src/core/Table/hooks/useScrollToRow.ts | 2 +- .../src/core/Table/hooks/useSelectionCell.tsx | 5 +---- .../src/core/Table/hooks/useStickyColumns.tsx | 9 ++------- .../src/core/Table/hooks/useSubRowFiltering.tsx | 7 +------ .../src/core/Table/hooks/useSubRowSelection.tsx | 7 +------ packages/itwinui-react/src/core/Table/utils.ts | 2 +- .../src/react-table/react-table.types-test.tsx | 14 ++++++-------- packages/itwinui-react/tsconfig.json | 7 ++++++- 34 files changed, 49 insertions(+), 109 deletions(-) diff --git a/packages/itwinui-react/src/core/Table/SubRowExpander.tsx b/packages/itwinui-react/src/core/Table/SubRowExpander.tsx index 1899d49faba..c97897a6334 100644 --- a/packages/itwinui-react/src/core/Table/SubRowExpander.tsx +++ b/packages/itwinui-react/src/core/Table/SubRowExpander.tsx @@ -4,7 +4,7 @@ *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; import { SvgChevronRight } from '../utils/index.js'; -import type { Cell, CellProps } from '../../react-table/react-table.js'; +import type { Cell, CellProps } from 'react-table'; import { IconButton } from '../Buttons/index.js'; export type SubRowExpanderProps> = { diff --git a/packages/itwinui-react/src/core/Table/Table.test.tsx b/packages/itwinui-react/src/core/Table/Table.test.tsx index 8d0c4a22151..02cc55ac2eb 100644 --- a/packages/itwinui-react/src/core/Table/Table.test.tsx +++ b/packages/itwinui-react/src/core/Table/Table.test.tsx @@ -18,8 +18,8 @@ import { type TableFilterProps, tableFilters, } from './filters/index.js'; -import { actions } from '../../react-table/react-table.js'; -import type { CellProps, Column, Row } from '../../react-table/react-table.js'; +import { actions } from 'react-table'; +import type { CellProps, Column, Row } from 'react-table'; import { InputGroup } from '../InputGroup/index.js'; import { Radio } from '../Radio/index.js'; import { diff --git a/packages/itwinui-react/src/core/Table/Table.tsx b/packages/itwinui-react/src/core/Table/Table.tsx index 08f6b312ccd..724e3e741d1 100644 --- a/packages/itwinui-react/src/core/Table/Table.tsx +++ b/packages/itwinui-react/src/core/Table/Table.tsx @@ -15,7 +15,7 @@ import { usePagination, useColumnOrder, useGlobalFilter, -} from '../../react-table/react-table.js'; +} from 'react-table'; import type { CellProps, HeaderGroup, @@ -25,7 +25,7 @@ import type { ActionType, TableInstance, Column, -} from '../../react-table/react-table.js'; +} from 'react-table'; import { ProgressRadial } from '../ProgressIndicators/index.js'; import { useGlobals, diff --git a/packages/itwinui-react/src/core/Table/TableCell.tsx b/packages/itwinui-react/src/core/Table/TableCell.tsx index 38395a189fe..46cc6ebea04 100644 --- a/packages/itwinui-react/src/core/Table/TableCell.tsx +++ b/packages/itwinui-react/src/core/Table/TableCell.tsx @@ -8,7 +8,7 @@ import type { CellProps, CellRendererProps, TableInstance, -} from '../../react-table/react-table.js'; +} from 'react-table'; import cx from 'classnames'; import { getCellStyle, getStickyStyle } from './utils.js'; import { SubRowExpander } from './SubRowExpander.js'; diff --git a/packages/itwinui-react/src/core/Table/TableRowMemoized.tsx b/packages/itwinui-react/src/core/Table/TableRowMemoized.tsx index 2788a603c6f..e42a436fd8c 100644 --- a/packages/itwinui-react/src/core/Table/TableRowMemoized.tsx +++ b/packages/itwinui-react/src/core/Table/TableRowMemoized.tsx @@ -4,12 +4,7 @@ *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; import cx from 'classnames'; -import type { - CellProps, - Row, - TableInstance, - TableState, -} from '../../react-table/react-table.js'; +import type { CellProps, Row, TableInstance, TableState } from 'react-table'; import { Box, useIntersection, diff --git a/packages/itwinui-react/src/core/Table/actionHandlers/expandHandler.ts b/packages/itwinui-react/src/core/Table/actionHandlers/expandHandler.ts index 1aacfcd824d..28fce8e700d 100644 --- a/packages/itwinui-react/src/core/Table/actionHandlers/expandHandler.ts +++ b/packages/itwinui-react/src/core/Table/actionHandlers/expandHandler.ts @@ -2,10 +2,7 @@ * Copyright (c) Bentley Systems, Incorporated. All rights reserved. * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ -import type { - TableInstance, - TableState, -} from '../../../react-table/react-table.js'; +import type { TableInstance, TableState } from 'react-table'; export const onExpandHandler = >( newState: TableState, diff --git a/packages/itwinui-react/src/core/Table/actionHandlers/filterHandler.ts b/packages/itwinui-react/src/core/Table/actionHandlers/filterHandler.ts index 691bedc0ae5..e803fce43f9 100644 --- a/packages/itwinui-react/src/core/Table/actionHandlers/filterHandler.ts +++ b/packages/itwinui-react/src/core/Table/actionHandlers/filterHandler.ts @@ -2,11 +2,7 @@ * Copyright (c) Bentley Systems, Incorporated. All rights reserved. * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ -import type { - ActionType, - TableInstance, - TableState, -} from '../../../react-table/react-table.js'; +import type { ActionType, TableInstance, TableState } from 'react-table'; import type { TableFilterValue } from '../filters/index.js'; export const onFilterHandler = >( diff --git a/packages/itwinui-react/src/core/Table/actionHandlers/resizeHandler.ts b/packages/itwinui-react/src/core/Table/actionHandlers/resizeHandler.ts index 257a10ede72..98993b9b510 100644 --- a/packages/itwinui-react/src/core/Table/actionHandlers/resizeHandler.ts +++ b/packages/itwinui-react/src/core/Table/actionHandlers/resizeHandler.ts @@ -2,10 +2,7 @@ * Copyright (c) Bentley Systems, Incorporated. All rights reserved. * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ -import type { - ActionType, - TableState, -} from '../../../react-table/react-table.js'; +import type { ActionType, TableState } from 'react-table'; export const onTableResizeStart = >( state: TableState, diff --git a/packages/itwinui-react/src/core/Table/actionHandlers/selectHandler.ts b/packages/itwinui-react/src/core/Table/actionHandlers/selectHandler.ts index 689af474ec5..10569525210 100644 --- a/packages/itwinui-react/src/core/Table/actionHandlers/selectHandler.ts +++ b/packages/itwinui-react/src/core/Table/actionHandlers/selectHandler.ts @@ -2,12 +2,7 @@ * Copyright (c) Bentley Systems, Incorporated. All rights reserved. * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ -import type { - ActionType, - Row, - TableInstance, - TableState, -} from '../../../react-table/react-table.js'; +import type { ActionType, Row, TableInstance, TableState } from 'react-table'; /** * Handles subrow selection and validation. diff --git a/packages/itwinui-react/src/core/Table/cells/DefaultCell.tsx b/packages/itwinui-react/src/core/Table/cells/DefaultCell.tsx index 0a46ff7a1cd..469a47b0826 100644 --- a/packages/itwinui-react/src/core/Table/cells/DefaultCell.tsx +++ b/packages/itwinui-react/src/core/Table/cells/DefaultCell.tsx @@ -3,7 +3,7 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; -import type { CellRendererProps } from '../../../react-table/react-table.js'; +import type { CellRendererProps } from 'react-table'; import cx from 'classnames'; import { Box } from '../../utils/index.js'; diff --git a/packages/itwinui-react/src/core/Table/cells/EditableCell.tsx b/packages/itwinui-react/src/core/Table/cells/EditableCell.tsx index 614aa0cd371..f703b1d6f51 100644 --- a/packages/itwinui-react/src/core/Table/cells/EditableCell.tsx +++ b/packages/itwinui-react/src/core/Table/cells/EditableCell.tsx @@ -3,7 +3,7 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; -import type { CellRendererProps } from '../../../react-table/react-table.js'; +import type { CellRendererProps } from 'react-table'; import { Box, getRandomValue } from '../../utils/index.js'; export type EditableCellProps> = diff --git a/packages/itwinui-react/src/core/Table/columns/actionColumn.tsx b/packages/itwinui-react/src/core/Table/columns/actionColumn.tsx index 9eedbe56e09..b695be199ed 100644 --- a/packages/itwinui-react/src/core/Table/columns/actionColumn.tsx +++ b/packages/itwinui-react/src/core/Table/columns/actionColumn.tsx @@ -3,7 +3,7 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; -import type { HeaderProps } from '../../../react-table/react-table.js'; +import type { HeaderProps } from 'react-table'; import { Checkbox } from '../../Checkbox/index.js'; import { SvgColumnManager } from '../../utils/index.js'; import { DropdownMenu } from '../../DropdownMenu/index.js'; diff --git a/packages/itwinui-react/src/core/Table/columns/expanderColumn.tsx b/packages/itwinui-react/src/core/Table/columns/expanderColumn.tsx index 961756028df..8932195d7f8 100644 --- a/packages/itwinui-react/src/core/Table/columns/expanderColumn.tsx +++ b/packages/itwinui-react/src/core/Table/columns/expanderColumn.tsx @@ -4,11 +4,7 @@ *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; import { SvgChevronRight } from '../../utils/index.js'; -import type { - CellProps, - CellRendererProps, - Row, -} from '../../../react-table/react-table.js'; +import type { CellProps, CellRendererProps, Row } from 'react-table'; import { IconButton } from '../../Buttons/index.js'; import { DefaultCell } from '../cells/index.js'; diff --git a/packages/itwinui-react/src/core/Table/columns/selectionColumn.tsx b/packages/itwinui-react/src/core/Table/columns/selectionColumn.tsx index 214b76028ae..d687290b46e 100644 --- a/packages/itwinui-react/src/core/Table/columns/selectionColumn.tsx +++ b/packages/itwinui-react/src/core/Table/columns/selectionColumn.tsx @@ -3,11 +3,7 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; -import type { - CellProps, - CellRendererProps, - HeaderProps, -} from '../../../react-table/react-table.js'; +import type { CellProps, CellRendererProps, HeaderProps } from 'react-table'; import { Checkbox } from '../../Checkbox/index.js'; import { DefaultCell } from '../cells/index.js'; diff --git a/packages/itwinui-react/src/core/Table/filters/DateRangeFilter/DateRangeFilter.test.tsx b/packages/itwinui-react/src/core/Table/filters/DateRangeFilter/DateRangeFilter.test.tsx index cf3cdf971bb..e8780cb1098 100644 --- a/packages/itwinui-react/src/core/Table/filters/DateRangeFilter/DateRangeFilter.test.tsx +++ b/packages/itwinui-react/src/core/Table/filters/DateRangeFilter/DateRangeFilter.test.tsx @@ -4,7 +4,7 @@ *--------------------------------------------------------------------------------------------*/ import { fireEvent, render, screen } from '@testing-library/react'; import * as React from 'react'; -import type { HeaderGroup } from '../../../../react-table/react-table.js'; +import type { HeaderGroup } from 'react-table'; import { DateRangeFilter, type DateRangeFilterProps, diff --git a/packages/itwinui-react/src/core/Table/filters/FilterToggle.test.tsx b/packages/itwinui-react/src/core/Table/filters/FilterToggle.test.tsx index e4fa36a4e1a..8b1ca81ad26 100644 --- a/packages/itwinui-react/src/core/Table/filters/FilterToggle.test.tsx +++ b/packages/itwinui-react/src/core/Table/filters/FilterToggle.test.tsx @@ -5,7 +5,7 @@ import { render, type RenderResult, screen } from '@testing-library/react'; import * as React from 'react'; -import type { HeaderGroup } from '../../../react-table/react-table.js'; +import type { HeaderGroup } from 'react-table'; import { FilterToggle, type FilterToggleProps } from './FilterToggle.js'; import { tableFilters } from './tableFilters.js'; diff --git a/packages/itwinui-react/src/core/Table/filters/FilterToggle.tsx b/packages/itwinui-react/src/core/Table/filters/FilterToggle.tsx index 1bebe8f1b56..b8f4da2ca00 100644 --- a/packages/itwinui-react/src/core/Table/filters/FilterToggle.tsx +++ b/packages/itwinui-react/src/core/Table/filters/FilterToggle.tsx @@ -4,7 +4,7 @@ *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; import cx from 'classnames'; -import type { HeaderGroup } from '../../../react-table/react-table.js'; +import type { HeaderGroup } from 'react-table'; import { useGlobals, Popover, diff --git a/packages/itwinui-react/src/core/Table/filters/NumberRangeFilter/NumberRangeFilter.test.tsx b/packages/itwinui-react/src/core/Table/filters/NumberRangeFilter/NumberRangeFilter.test.tsx index 87401e845e6..c4f65400a00 100644 --- a/packages/itwinui-react/src/core/Table/filters/NumberRangeFilter/NumberRangeFilter.test.tsx +++ b/packages/itwinui-react/src/core/Table/filters/NumberRangeFilter/NumberRangeFilter.test.tsx @@ -4,7 +4,7 @@ *--------------------------------------------------------------------------------------------*/ import { fireEvent, render, screen } from '@testing-library/react'; import * as React from 'react'; -import type { HeaderGroup } from '../../../../react-table/react-table.js'; +import type { HeaderGroup } from 'react-table'; import { NumberRangeFilter } from './NumberRangeFilter.js'; import type { NumberRangeFilterProps } from './NumberRangeFilter.js'; diff --git a/packages/itwinui-react/src/core/Table/filters/TextFilter/TextFilter.test.tsx b/packages/itwinui-react/src/core/Table/filters/TextFilter/TextFilter.test.tsx index d0d5e0fa2ad..2c72431a17c 100644 --- a/packages/itwinui-react/src/core/Table/filters/TextFilter/TextFilter.test.tsx +++ b/packages/itwinui-react/src/core/Table/filters/TextFilter/TextFilter.test.tsx @@ -4,7 +4,7 @@ *--------------------------------------------------------------------------------------------*/ import { fireEvent, render, screen } from '@testing-library/react'; import * as React from 'react'; -import type { HeaderGroup } from '../../../../react-table/react-table.js'; +import type { HeaderGroup } from 'react-table'; import type { TableFilterProps } from '../types.js'; import { TextFilter } from './TextFilter.js'; diff --git a/packages/itwinui-react/src/core/Table/filters/customFilterFunctions.test.ts b/packages/itwinui-react/src/core/Table/filters/customFilterFunctions.test.ts index 2b9bfe2cfd6..bfb81fe63f9 100644 --- a/packages/itwinui-react/src/core/Table/filters/customFilterFunctions.test.ts +++ b/packages/itwinui-react/src/core/Table/filters/customFilterFunctions.test.ts @@ -3,7 +3,7 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ /* eslint-disable @typescript-eslint/no-explicit-any */ -import type { Row } from '../../../react-table/react-table.js'; +import type { Row } from 'react-table'; import { customFilterFunctions } from './customFilterFunctions.js'; const mockRows = (values: any[]) => { diff --git a/packages/itwinui-react/src/core/Table/filters/customFilterFunctions.ts b/packages/itwinui-react/src/core/Table/filters/customFilterFunctions.ts index beeaf01e3f9..65e90cbb69f 100644 --- a/packages/itwinui-react/src/core/Table/filters/customFilterFunctions.ts +++ b/packages/itwinui-react/src/core/Table/filters/customFilterFunctions.ts @@ -2,7 +2,7 @@ * Copyright (c) Bentley Systems, Incorporated. All rights reserved. * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ -import type { IdType, Row } from '../../../react-table/react-table.js'; +import type { IdType, Row } from 'react-table'; const isValidDate = (date: Date | undefined) => !!date && !isNaN(date.valueOf()); diff --git a/packages/itwinui-react/src/core/Table/filters/defaultFilterFunctions.ts b/packages/itwinui-react/src/core/Table/filters/defaultFilterFunctions.ts index 244317d7eb1..d7ceddd47e6 100644 --- a/packages/itwinui-react/src/core/Table/filters/defaultFilterFunctions.ts +++ b/packages/itwinui-react/src/core/Table/filters/defaultFilterFunctions.ts @@ -28,7 +28,7 @@ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE * SOFTWARE. */ -import type { IdType, Row } from '../../../react-table/react-table.js'; +import type { IdType, Row } from 'react-table'; const text = >( rows: Row[], diff --git a/packages/itwinui-react/src/core/Table/filters/types.ts b/packages/itwinui-react/src/core/Table/filters/types.ts index 4f3673e4b46..a483d1c21a3 100644 --- a/packages/itwinui-react/src/core/Table/filters/types.ts +++ b/packages/itwinui-react/src/core/Table/filters/types.ts @@ -2,11 +2,7 @@ * Copyright (c) Bentley Systems, Incorporated. All rights reserved. * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ -import type { - FieldType, - FilterType, - TableFilterProps, -} from '../../../react-table/react-table.js'; +import type { FieldType, FilterType, TableFilterProps } from 'react-table'; export interface TableFilterValue> { /** diff --git a/packages/itwinui-react/src/core/Table/hooks/useColumnDragAndDrop.tsx b/packages/itwinui-react/src/core/Table/hooks/useColumnDragAndDrop.tsx index eb2cab19034..eb538aad142 100644 --- a/packages/itwinui-react/src/core/Table/hooks/useColumnDragAndDrop.tsx +++ b/packages/itwinui-react/src/core/Table/hooks/useColumnDragAndDrop.tsx @@ -3,11 +3,7 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import type * as React from 'react'; -import { - actions, - makePropGetter, - useGetLatest, -} from '../../../react-table/react-table.js'; +import { actions, makePropGetter, useGetLatest } from 'react-table'; import type { ActionType, HeaderGroup, @@ -16,7 +12,7 @@ import type { TableInstance, TableKeyedProps, TableState, -} from '../../../react-table/react-table.js'; +} from 'react-table'; import styles from '../../../styles.js'; const REORDER_ACTIONS = { diff --git a/packages/itwinui-react/src/core/Table/hooks/useExpanderCell.tsx b/packages/itwinui-react/src/core/Table/hooks/useExpanderCell.tsx index a8d77c3f00a..b8ba4ae9d92 100644 --- a/packages/itwinui-react/src/core/Table/hooks/useExpanderCell.tsx +++ b/packages/itwinui-react/src/core/Table/hooks/useExpanderCell.tsx @@ -3,12 +3,7 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; -import type { - CellProps, - ColumnInstance, - Hooks, - Row, -} from '../../../react-table/react-table.js'; +import type { CellProps, ColumnInstance, Hooks, Row } from 'react-table'; import { ExpanderColumn, EXPANDER_CELL_ID } from '../columns/index.js'; export const useExpanderCell = diff --git a/packages/itwinui-react/src/core/Table/hooks/useResizeColumns.tsx b/packages/itwinui-react/src/core/Table/hooks/useResizeColumns.tsx index c309875bad2..bab0eee8e78 100644 --- a/packages/itwinui-react/src/core/Table/hooks/useResizeColumns.tsx +++ b/packages/itwinui-react/src/core/Table/hooks/useResizeColumns.tsx @@ -34,11 +34,7 @@ * SOFTWARE. */ import type * as React from 'react'; -import { - actions, - makePropGetter, - useGetLatest, -} from '../../../react-table/react-table.js'; +import { actions, makePropGetter, useGetLatest } from 'react-table'; import type { ActionType, ColumnInstance, @@ -47,7 +43,7 @@ import type { TableInstance, TableKeyedProps, TableState, -} from '../../../react-table/react-table.js'; +} from 'react-table'; export const useResizeColumns = >( diff --git a/packages/itwinui-react/src/core/Table/hooks/useScrollToRow.ts b/packages/itwinui-react/src/core/Table/hooks/useScrollToRow.ts index af32be3a95c..9a98874807f 100644 --- a/packages/itwinui-react/src/core/Table/hooks/useScrollToRow.ts +++ b/packages/itwinui-react/src/core/Table/hooks/useScrollToRow.ts @@ -3,7 +3,7 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; -import type { Row } from '../../../react-table/react-table.js'; +import type { Row } from 'react-table'; import type { TableProps } from '../Table.js'; type ScrollToRow> = { diff --git a/packages/itwinui-react/src/core/Table/hooks/useSelectionCell.tsx b/packages/itwinui-react/src/core/Table/hooks/useSelectionCell.tsx index f163ccebeec..a1f520f574b 100644 --- a/packages/itwinui-react/src/core/Table/hooks/useSelectionCell.tsx +++ b/packages/itwinui-react/src/core/Table/hooks/useSelectionCell.tsx @@ -2,10 +2,7 @@ * Copyright (c) Bentley Systems, Incorporated. All rights reserved. * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ -import type { - ColumnInstance, - Hooks, -} from '../../../react-table/react-table.js'; +import type { ColumnInstance, Hooks } from 'react-table'; import { SelectionColumn, SELECTION_CELL_ID } from '../columns/index.js'; export const useSelectionCell = diff --git a/packages/itwinui-react/src/core/Table/hooks/useStickyColumns.tsx b/packages/itwinui-react/src/core/Table/hooks/useStickyColumns.tsx index 5d1e770717c..d8480445ed6 100644 --- a/packages/itwinui-react/src/core/Table/hooks/useStickyColumns.tsx +++ b/packages/itwinui-react/src/core/Table/hooks/useStickyColumns.tsx @@ -2,13 +2,8 @@ * Copyright (c) Bentley Systems, Incorporated. All rights reserved. * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ -import { actions } from '../../../react-table/react-table.js'; -import type { - ActionType, - Hooks, - TableInstance, - TableState, -} from '../../../react-table/react-table.js'; +import { actions } from 'react-table'; +import type { ActionType, Hooks, TableInstance, TableState } from 'react-table'; actions.setScrolledLeft = 'setScrolledLeft'; actions.setScrolledRight = 'setScrolledRight'; diff --git a/packages/itwinui-react/src/core/Table/hooks/useSubRowFiltering.tsx b/packages/itwinui-react/src/core/Table/hooks/useSubRowFiltering.tsx index e005df885b1..84183095b98 100644 --- a/packages/itwinui-react/src/core/Table/hooks/useSubRowFiltering.tsx +++ b/packages/itwinui-react/src/core/Table/hooks/useSubRowFiltering.tsx @@ -3,12 +3,7 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; -import type { - Hooks, - IdType, - Row, - TableInstance, -} from '../../../react-table/react-table.js'; +import type { Hooks, IdType, Row, TableInstance } from 'react-table'; import { defaultFilterFunctions } from '../filters/defaultFilterFunctions.js'; export const useSubRowFiltering = diff --git a/packages/itwinui-react/src/core/Table/hooks/useSubRowSelection.tsx b/packages/itwinui-react/src/core/Table/hooks/useSubRowSelection.tsx index 0d40ce9d52b..24180f3a9cb 100644 --- a/packages/itwinui-react/src/core/Table/hooks/useSubRowSelection.tsx +++ b/packages/itwinui-react/src/core/Table/hooks/useSubRowSelection.tsx @@ -3,12 +3,7 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; -import type { - Hooks, - IdType, - Row, - TableInstance, -} from '../../../react-table/react-table.js'; +import type { Hooks, IdType, Row, TableInstance } from 'react-table'; export const useSubRowSelection = >( hooks: Hooks, diff --git a/packages/itwinui-react/src/core/Table/utils.ts b/packages/itwinui-react/src/core/Table/utils.ts index fe907227c8a..e012cbb630a 100644 --- a/packages/itwinui-react/src/core/Table/utils.ts +++ b/packages/itwinui-react/src/core/Table/utils.ts @@ -2,7 +2,7 @@ * Copyright (c) Bentley Systems, Incorporated. All rights reserved. * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ -import type { ColumnInstance } from '../../react-table/react-table.js'; +import type { ColumnInstance } from 'react-table'; export const getCellStyle = >( column: ColumnInstance, diff --git a/packages/itwinui-react/src/react-table/react-table.types-test.tsx b/packages/itwinui-react/src/react-table/react-table.types-test.tsx index 0d559a279d5..debbf710eae 100644 --- a/packages/itwinui-react/src/react-table/react-table.types-test.tsx +++ b/packages/itwinui-react/src/react-table/react-table.types-test.tsx @@ -24,13 +24,11 @@ import { import type { TablePaginatorRendererProps } from '../core/Table/index.js'; // Table types can be imported with an alias or selective types can be imported too. -import * as TableTypes from './react-table.js'; -import type { Column } from './react-table.js'; +import * as _TableTypes from 'src/react-table/react-table.js'; +import type { Column } from 'src/react-table/react-table.js'; -// Importing from react-table should not be possible internally. -// Because doing so could cause unexpected `any`s in the type definitions. -// @ts-expect-error -import * as _TableTypes from 'react-table'; +// Can import types from file or by package name. +import * as TableTypes from 'react-table'; type TableProps = Record> = React.ComponentProps>; @@ -44,8 +42,8 @@ import { MenuItem, Text, Tooltip, -} from '../index.js'; -import { SvgMore } from '../core/utils/index.js'; +} from 'src/core/index.js'; +import { SvgMore } from 'src/core/utils/index.js'; /** * Confirm that `satisfies` on columns does not give any unnecessary type errors. diff --git a/packages/itwinui-react/tsconfig.json b/packages/itwinui-react/tsconfig.json index 8ba3ad58ae7..cef733bfd6a 100644 --- a/packages/itwinui-react/tsconfig.json +++ b/packages/itwinui-react/tsconfig.json @@ -20,7 +20,12 @@ "noUnusedLocals": true, "skipLibCheck": true, "isolatedModules": true, - "verbatimModuleSyntax": true + "verbatimModuleSyntax": true, + "baseUrl": ".", + "paths": { + // Since we don't depend on `@types/react-table`, we need to provide the types for it. + "react-table": ["src/react-table/react-table.ts"] + } }, "exclude": ["node_modules", "cjs/**/*", "esm/**/*"] }