@economic/taco 2.2.2 → 2.2.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Table3/Table3.d.ts +1 -1
- package/dist/components/Table3/components/columns/internal/Actions.d.ts +1 -2
- package/dist/components/Table3/components/rows/Row.d.ts +1 -0
- package/dist/components/Table3/hooks/features/useRowActions.d.ts +5 -0
- package/dist/components/Table3/hooks/useTable.d.ts +2 -0
- package/dist/components/Table3/hooks/useTableDataLoader.d.ts +1 -2
- package/dist/components/Table3/types.d.ts +0 -2
- package/dist/esm/packages/taco/src/components/SearchInput2/SearchInput2.js +3 -1
- package/dist/esm/packages/taco/src/components/SearchInput2/SearchInput2.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/Table3.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/components/columns/cell/DisplayCell.js +2 -2
- package/dist/esm/packages/taco/src/components/Table3/components/columns/cell/DisplayCell.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/components/columns/internal/Actions.js +6 -15
- package/dist/esm/packages/taco/src/components/Table3/components/columns/internal/Actions.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/components/columns/internal/Selection.js +1 -1
- package/dist/esm/packages/taco/src/components/Table3/components/columns/internal/Selection.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/components/rows/Row.js +11 -2
- package/dist/esm/packages/taco/src/components/Table3/components/rows/Row.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/components/toolbar/Search.js +32 -20
- package/dist/esm/packages/taco/src/components/Table3/components/toolbar/Search.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/hooks/features/useRowActions.js +10 -0
- package/dist/esm/packages/taco/src/components/Table3/hooks/features/useRowActions.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Table3/hooks/useConvertChildrenToColumns.js +1 -1
- package/dist/esm/packages/taco/src/components/Table3/hooks/useConvertChildrenToColumns.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/hooks/useCssGrid.js +2 -3
- package/dist/esm/packages/taco/src/components/Table3/hooks/useCssGrid.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/hooks/useTable.js +10 -9
- package/dist/esm/packages/taco/src/components/Table3/hooks/useTable.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/hooks/useTableDataLoader.js +0 -8
- package/dist/esm/packages/taco/src/components/Table3/hooks/useTableDataLoader.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/strategies/virtualised.js +4 -0
- package/dist/esm/packages/taco/src/components/Table3/strategies/virtualised.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/types.js.map +1 -1
- package/dist/taco.cjs.development.js +79 -106
- package/dist/taco.cjs.development.js.map +1 -1
- package/dist/taco.cjs.production.min.js +1 -1
- package/dist/taco.cjs.production.min.js.map +1 -1
- package/package.json +2 -2
- package/types.json +5429 -5459
- package/dist/components/Table3/hooks/listeners/useSearchStateListener.d.ts +0 -3
- package/dist/esm/packages/taco/src/components/Table3/hooks/listeners/useSearchStateListener.js +0 -51
- package/dist/esm/packages/taco/src/components/Table3/hooks/listeners/useSearchStateListener.js.map +0 -1
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"useTableDataLoader.js","sources":["../../../../../../../../src/components/Table3/hooks/useTableDataLoader.ts"],"sourcesContent":["import React from 'react';\nimport {\n ColumnFilter,\n Table3ColumnSort,\n Table3FilterHandler,\n Table3LoadAllHandler,\n Table3LoadPageHandler,\n
|
1
|
+
{"version":3,"file":"useTableDataLoader.js","sources":["../../../../../../../../src/components/Table3/hooks/useTableDataLoader.ts"],"sourcesContent":["import React from 'react';\nimport {\n ColumnFilter,\n Table3ColumnSort,\n Table3FilterHandler,\n Table3LoadAllHandler,\n Table3LoadPageHandler,\n Table3SortHandler,\n} from '../types';\n\nexport type useTable3DataFetcher<TType = unknown> = (\n pageIndex: number,\n pageSize: number,\n sorting: Table3ColumnSort[],\n filters: ColumnFilter[],\n search: string | undefined\n) => Promise<{ data: TType[]; length: number }>;\n\nexport type useTable3AllDataFetcher<TType = unknown> = (\n sorting: Table3ColumnSort[],\n filters: ColumnFilter[],\n search: string | undefined\n) => Promise<{ data: TType[]; length: number }>;\n\nexport type useTable3DataOptions = { pageSize: number };\n\nexport type useTable3DataFetcherValues<TType = unknown> = {\n data: TType[];\n length: number | undefined;\n loadAll: Table3LoadAllHandler;\n loadPage: Table3LoadPageHandler;\n onFilter: Table3FilterHandler;\n onSort: Table3SortHandler;\n pageSize: number;\n};\n\nexport function useTable3DataLoader<TType = unknown>(\n fetch: useTable3DataFetcher<TType>,\n fetchAll: useTable3AllDataFetcher<TType>,\n options: useTable3DataOptions = { pageSize: 100 }\n): [useTable3DataFetcherValues<TType>, () => void] {\n const { pageSize } = options;\n\n // track the data length, we don't know it until the first request\n const length = React.useRef<number | undefined>(undefined);\n // data will be filled after the first request, then we'll update values in place\n const [data, setData] = React.useState<any[]>([]);\n // track which pages have been loaded to dedupe requests\n const _pendingPageRequests = React.useRef({});\n const _lastUsedSorting = React.useRef<Table3ColumnSort[]>([]);\n const _lastUsedFilters = React.useRef<ColumnFilter[]>([]);\n const _lastUsedSearch = React.useRef<string>();\n\n const loadPage = async (\n pageIndex: number,\n sorting: Table3ColumnSort[],\n filters: ColumnFilter[],\n search: string | undefined\n ) => {\n let reset = false;\n\n // sorting or filters changed, reset everything\n if (\n search !== _lastUsedSearch.current ||\n JSON.stringify(sorting) !== JSON.stringify(_lastUsedSorting.current) ||\n JSON.stringify(filters) !== JSON.stringify(_lastUsedFilters.current)\n ) {\n _pendingPageRequests.current = {};\n // nuke the dataset so that we \"start again\" after sorting\n reset = true;\n }\n\n if (_pendingPageRequests.current[pageIndex]) {\n // if page is already loaded/loading, abort, otherwise mark it as loading\n return;\n } else {\n _pendingPageRequests.current[pageIndex] = true;\n }\n\n // set the sorting so we can track if it changed between loads\n _lastUsedSorting.current = sorting;\n // set the filters so we can track if it changed between loads\n _lastUsedFilters.current = filters;\n // set the search so we can track if it changed between loads\n _lastUsedSearch.current = search;\n\n try {\n const response = await fetch(pageIndex, pageSize, sorting, filters, search);\n\n // update state, here we do some \"magic\" to support \"load in place\"\n setData(currentData => {\n let nextData;\n\n // reset table state if:\n // - the length isn't set at all (first load)\n // - the client length and server length are different (the data changed)\n if (reset || length.current !== response.length) {\n length.current = response.length;\n nextData = Array(length.current).fill(undefined);\n } else {\n nextData = [...currentData];\n }\n\n const startIndex = pageIndex * pageSize;\n nextData.splice(startIndex, pageSize, ...response.data);\n return nextData;\n });\n } catch {\n //\n } finally {\n _pendingPageRequests.current[pageIndex] = false;\n }\n };\n\n const loadAll = async (sorting: Table3ColumnSort[], filters: ColumnFilter[], search: string | undefined) => {\n try {\n const response = await fetchAll(sorting, filters, search);\n length.current = response.length;\n\n setData(() => {\n let nextData;\n\n if (response.data.length !== response.length) {\n nextData = Array(response.length).fill(undefined);\n nextData.splice(0, response.data.length, ...response.data);\n } else {\n nextData = [...response.data];\n }\n\n return nextData;\n });\n } catch {\n //\n }\n };\n\n const invalidate = () => setData(Array(length.current).fill(undefined));\n\n // we reset the page to 0 whenever sorting, filtering or search changes\n const handleSort = async (sorting: Table3ColumnSort[]) =>\n loadPage(0, sorting, _lastUsedFilters.current, _lastUsedSearch.current);\n const handleFilter = async (filters: ColumnFilter[]) =>\n loadPage(0, _lastUsedSorting.current, filters, _lastUsedSearch.current);\n\n return [\n {\n data,\n length: length.current,\n loadAll,\n loadPage,\n onFilter: handleFilter,\n onSort: handleSort,\n pageSize,\n },\n invalidate,\n ];\n}\n"],"names":["useTable3DataLoader","fetch","fetchAll","options","pageSize","length","React","useRef","undefined","data","setData","useState","_pendingPageRequests","_lastUsedSorting","_lastUsedFilters","_lastUsedSearch","loadPage","pageIndex","sorting","filters","search","reset","current","JSON","stringify","response","currentData","nextData","Array","fill","startIndex","splice","loadAll","invalidate","handleSort","handleFilter","onFilter","onSort"],"mappings":"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"}
|
@@ -6,6 +6,9 @@ import { ExpandedRow } from '../components/rows/ExpandedRow.js';
|
|
6
6
|
import { rowHeightSizeEstimates } from '../components/rows/styles.js';
|
7
7
|
import { SkeletonRow } from '../components/rows/SkeletonRow.js';
|
8
8
|
|
9
|
+
// Note - latest react-virtual requires an inner container, and that doesn't work with css grid,
|
10
|
+
// so if you update react-virtual, you would need to refactor the entire table away from css grid,
|
11
|
+
// and that would break a number of layout things - auto sizing, resizing etc
|
9
12
|
function createBodyRenderer(props, rows, table, tableRef, virtualiser, setExpandedRowSizes) {
|
10
13
|
return () => {
|
11
14
|
if (rows.length) {
|
@@ -45,6 +48,7 @@ function createBodyRenderer(props, rows, table, tableRef, virtualiser, setExpand
|
|
45
48
|
}, /*#__PURE__*/React__default.createElement(Row, {
|
46
49
|
index: virtualRow.index,
|
47
50
|
isLastRow: virtualRow.index === rows.length - 1,
|
51
|
+
measureRef: virtualRow.measureRef,
|
48
52
|
row: row,
|
49
53
|
table: table,
|
50
54
|
tableRef: tableRef
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"virtualised.js","sources":["../../../../../../../../src/components/Table3/strategies/virtualised.tsx"],"sourcesContent":["import React from 'react';\nimport { flexRender, Row as RTRow, Table as RTable, TableMeta } from '@tanstack/react-table';\nimport { useVirtual } from 'react-virtual';\nimport { Row } from '../components/rows/Row';\nimport { Table3Props, Table3RowExpansionRenderer, TableStrategy } from '../types';\nimport { ExpandedRow } from '../components/rows/ExpandedRow';\nimport { rowHeightSizeEstimates } from '../components/rows/styles';\nimport { SkeletonRow } from '../components/rows/SkeletonRow';\n\nfunction createBodyRenderer<TType = unknown>(\n props: Table3Props<TType>,\n rows: RTRow<TType>[],\n table: RTable<TType>,\n tableRef: React.RefObject<HTMLDivElement>,\n virtualiser: ReturnType<typeof useVirtual>,\n setExpandedRowSizes: React.Dispatch<React.SetStateAction<Record<string, number>>>\n) {\n return () => {\n if (rows.length) {\n const paddingTop = virtualiser.virtualItems.length > 0 ? virtualiser.virtualItems[0]?.start ?? 0 : 0;\n const paddingBottom =\n virtualiser.virtualItems.length > 0\n ? virtualiser.totalSize - (virtualiser.virtualItems[virtualiser.virtualItems.length - 1]?.end ?? 0)\n : 0;\n\n const createSetSizeHandler = (index: number) => (size: number) => {\n setExpandedRowSizes(sizes => {\n if (size !== sizes[index]) {\n return { ...sizes, [index]: size };\n }\n\n return sizes;\n });\n };\n\n return (\n <>\n {paddingTop ? <div style={{ height: paddingTop }} className=\"col-span-full\" /> : null}\n {virtualiser.virtualItems.map(virtualRow => {\n const row = rows[virtualRow.index];\n\n if (row.original === undefined && props.pageSize) {\n const pageIndex = (Math.floor(virtualRow.index / props.pageSize) * props.pageSize) / props.pageSize;\n\n return (\n <SkeletonRow<TType>\n key={row.id}\n columns={table.getVisibleLeafColumns()}\n loadPage={props.loadPage}\n pageIndex={pageIndex}\n table={table}\n />\n );\n }\n\n return (\n <React.Fragment key={row.id}>\n <Row<TType>\n index={virtualRow.index}\n isLastRow={virtualRow.index === rows.length - 1}\n row={row}\n table={table}\n tableRef={tableRef}>\n {row.getVisibleCells().map((cell, index) => (\n <React.Fragment key={cell.id}>\n {flexRender(cell.column.columnDef.cell, { ...cell.getContext(), index, tableRef })}\n </React.Fragment>\n ))}\n </Row>\n {row.getIsExpanded() ? (\n <ExpandedRow\n data={row.original}\n renderer={props.expandedRowRenderer as Table3RowExpansionRenderer}\n registerSize={createSetSizeHandler(virtualRow.index)}\n />\n ) : null}\n </React.Fragment>\n );\n })}\n {paddingBottom ? <div style={{ height: paddingBottom }} className=\"col-span-full\" /> : null}\n </>\n );\n }\n\n return null;\n };\n}\n\nexport function useTableRenderStrategy<TType = unknown>(\n props: Table3Props<TType>,\n table: RTable<TType>,\n tableRef: React.RefObject<HTMLDivElement>\n): TableStrategy {\n const meta = table.options.meta as TableMeta<TType>;\n const rows = table.getRowModel().rows;\n const expandedState = table.getState().expanded;\n\n const [expandedRowSizes, setExpandedRowSizes] = React.useState<Record<string, number>>({});\n\n const firstAvailableExpandedRowHeight = React.useMemo(() => {\n const values: number[] = Object.values(expandedRowSizes);\n return values.length ? values.reduce((a, b) => a + b, 0) / values.length : 0;\n }, [expandedRowSizes]);\n\n const estimateSize = React.useCallback(\n index => {\n const rowHeight = meta.rowHeight.height\n ? rowHeightSizeEstimates[meta.rowHeight.height]\n : rowHeightSizeEstimates.medium;\n\n if (expandedState === true || expandedState?.[index]) {\n return rowHeight + (expandedRowSizes[index] ?? firstAvailableExpandedRowHeight ?? 0);\n }\n\n return rowHeight;\n },\n [meta.rowHeight.height, expandedRowSizes, expandedState]\n );\n\n const virtualiser = useVirtual({\n parentRef: tableRef,\n size: rows.length,\n estimateSize,\n });\n\n const scrollToIndex = React.useCallback(\n (index: number, options?: { align: 'start' | 'center' | 'end' | 'auto' }) => {\n if (tableRef.current) {\n if (index <= 0) {\n tableRef.current.scrollTo(tableRef.current.scrollLeft, 0);\n } else if (index >= rows.length - 1) {\n tableRef.current?.scrollTo(0, tableRef.current.scrollHeight);\n } else {\n virtualiser.scrollToIndex(index, options);\n }\n }\n },\n [rows.length, tableRef.current]\n );\n\n return {\n renderBody: createBodyRenderer(props, rows, table, tableRef, virtualiser, setExpandedRowSizes),\n scrollToIndex,\n };\n}\n"],"names":["createBodyRenderer","props","rows","table","tableRef","virtualiser","setExpandedRowSizes","length","paddingTop","virtualItems","start","paddingBottom","totalSize","end","createSetSizeHandler","index","size","sizes","React","style","height","className","map","virtualRow","row","original","undefined","pageSize","pageIndex","Math","floor","SkeletonRow","key","id","columns","getVisibleLeafColumns","loadPage","Fragment","Row","isLastRow","getVisibleCells","cell","flexRender","column","columnDef","getContext","getIsExpanded","ExpandedRow","data","renderer","expandedRowRenderer","registerSize","useTableRenderStrategy","meta","options","getRowModel","expandedState","getState","expanded","expandedRowSizes","useState","firstAvailableExpandedRowHeight","useMemo","values","Object","reduce","a","b","estimateSize","useCallback","rowHeight","rowHeightSizeEstimates","medium","useVirtual","parentRef","scrollToIndex","current","scrollTo","scrollLeft","scrollHeight","renderBody"],"mappings":"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"}
|
1
|
+
{"version":3,"file":"virtualised.js","sources":["../../../../../../../../src/components/Table3/strategies/virtualised.tsx"],"sourcesContent":["import React from 'react';\nimport { flexRender, Row as RTRow, Table as RTable, TableMeta } from '@tanstack/react-table';\nimport { useVirtual } from 'react-virtual';\nimport { Row } from '../components/rows/Row';\nimport { Table3Props, Table3RowExpansionRenderer, TableStrategy } from '../types';\nimport { ExpandedRow } from '../components/rows/ExpandedRow';\nimport { rowHeightSizeEstimates } from '../components/rows/styles';\nimport { SkeletonRow } from '../components/rows/SkeletonRow';\n\n// Note - latest react-virtual requires an inner container, and that doesn't work with css grid,\n// so if you update react-virtual, you would need to refactor the entire table away from css grid,\n// and that would break a number of layout things - auto sizing, resizing etc\n\nfunction createBodyRenderer<TType = unknown>(\n props: Table3Props<TType>,\n rows: RTRow<TType>[],\n table: RTable<TType>,\n tableRef: React.RefObject<HTMLDivElement>,\n virtualiser: ReturnType<typeof useVirtual>,\n setExpandedRowSizes: React.Dispatch<React.SetStateAction<Record<string, number>>>\n) {\n return () => {\n if (rows.length) {\n const paddingTop = virtualiser.virtualItems.length > 0 ? virtualiser.virtualItems[0]?.start ?? 0 : 0;\n const paddingBottom =\n virtualiser.virtualItems.length > 0\n ? virtualiser.totalSize - (virtualiser.virtualItems[virtualiser.virtualItems.length - 1]?.end ?? 0)\n : 0;\n\n const createSetSizeHandler = (index: number) => (size: number) => {\n setExpandedRowSizes(sizes => {\n if (size !== sizes[index]) {\n return { ...sizes, [index]: size };\n }\n\n return sizes;\n });\n };\n\n return (\n <>\n {paddingTop ? <div style={{ height: paddingTop }} className=\"col-span-full\" /> : null}\n {virtualiser.virtualItems.map(virtualRow => {\n const row = rows[virtualRow.index];\n\n if (row.original === undefined && props.pageSize) {\n const pageIndex = (Math.floor(virtualRow.index / props.pageSize) * props.pageSize) / props.pageSize;\n\n return (\n <SkeletonRow<TType>\n key={row.id}\n columns={table.getVisibleLeafColumns()}\n loadPage={props.loadPage}\n pageIndex={pageIndex}\n table={table}\n />\n );\n }\n\n return (\n <React.Fragment key={row.id}>\n <Row<TType>\n index={virtualRow.index}\n isLastRow={virtualRow.index === rows.length - 1}\n measureRef={virtualRow.measureRef}\n row={row}\n table={table}\n tableRef={tableRef}>\n {row.getVisibleCells().map((cell, index) => (\n <React.Fragment key={cell.id}>\n {flexRender(cell.column.columnDef.cell, { ...cell.getContext(), index, tableRef })}\n </React.Fragment>\n ))}\n </Row>\n {row.getIsExpanded() ? (\n <ExpandedRow\n data={row.original}\n renderer={props.expandedRowRenderer as Table3RowExpansionRenderer}\n registerSize={createSetSizeHandler(virtualRow.index)}\n />\n ) : null}\n </React.Fragment>\n );\n })}\n {paddingBottom ? <div style={{ height: paddingBottom }} className=\"col-span-full\" /> : null}\n </>\n );\n }\n\n return null;\n };\n}\n\nexport function useTableRenderStrategy<TType = unknown>(\n props: Table3Props<TType>,\n table: RTable<TType>,\n tableRef: React.RefObject<HTMLDivElement>\n): TableStrategy {\n const meta = table.options.meta as TableMeta<TType>;\n const rows = table.getRowModel().rows;\n const expandedState = table.getState().expanded;\n\n const [expandedRowSizes, setExpandedRowSizes] = React.useState<Record<string, number>>({});\n\n const firstAvailableExpandedRowHeight = React.useMemo(() => {\n const values: number[] = Object.values(expandedRowSizes);\n return values.length ? values.reduce((a, b) => a + b, 0) / values.length : 0;\n }, [expandedRowSizes]);\n\n const estimateSize = React.useCallback(\n index => {\n const rowHeight = meta.rowHeight.height\n ? rowHeightSizeEstimates[meta.rowHeight.height]\n : rowHeightSizeEstimates.medium;\n\n if (expandedState === true || expandedState?.[index]) {\n return rowHeight + (expandedRowSizes[index] ?? firstAvailableExpandedRowHeight ?? 0);\n }\n\n return rowHeight;\n },\n [meta.rowHeight.height, expandedRowSizes, expandedState]\n );\n\n const virtualiser = useVirtual({\n parentRef: tableRef,\n size: rows.length,\n estimateSize,\n });\n\n const scrollToIndex = React.useCallback(\n (index: number, options?: { align: 'start' | 'center' | 'end' | 'auto' }) => {\n if (tableRef.current) {\n if (index <= 0) {\n tableRef.current.scrollTo(tableRef.current.scrollLeft, 0);\n } else if (index >= rows.length - 1) {\n tableRef.current?.scrollTo(0, tableRef.current.scrollHeight);\n } else {\n virtualiser.scrollToIndex(index, options);\n }\n }\n },\n [rows.length, tableRef.current]\n );\n\n return {\n renderBody: createBodyRenderer(props, rows, table, tableRef, virtualiser, setExpandedRowSizes),\n scrollToIndex,\n };\n}\n"],"names":["createBodyRenderer","props","rows","table","tableRef","virtualiser","setExpandedRowSizes","length","paddingTop","virtualItems","start","paddingBottom","totalSize","end","createSetSizeHandler","index","size","sizes","React","style","height","className","map","virtualRow","row","original","undefined","pageSize","pageIndex","Math","floor","SkeletonRow","key","id","columns","getVisibleLeafColumns","loadPage","Fragment","Row","isLastRow","measureRef","getVisibleCells","cell","flexRender","column","columnDef","getContext","getIsExpanded","ExpandedRow","data","renderer","expandedRowRenderer","registerSize","useTableRenderStrategy","meta","options","getRowModel","expandedState","getState","expanded","expandedRowSizes","useState","firstAvailableExpandedRowHeight","useMemo","values","Object","reduce","a","b","estimateSize","useCallback","rowHeight","rowHeightSizeEstimates","medium","useVirtual","parentRef","scrollToIndex","current","scrollTo","scrollLeft","scrollHeight","renderBody"],"mappings":"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"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"types.js","sources":["../../../../../../../src/components/Table3/types.ts"],"sourcesContent":["import {\n ColumnFilter as RTColumnFilter,\n ColumnOrderState,\n ColumnPinningState,\n ColumnSizingState,\n ColumnSort as RTTableColumnSort,\n SortingState,\n VisibilityState,\n BuiltInSortingFn,\n} from '@tanstack/react-table';\nimport { MenuProps } from '../Menu/Menu';\n\nexport type Table3SortDirection = 'asc' | 'desc';\nexport type Table3SortFn<TType = unknown> =\n | ((rowA: TType, rowB: TType, columnId: string) => -1 | 0 | 1)\n | BuiltInSortingFn\n | 'auto';\n\n// columns\nexport type Table3ColumnRenderer<TValue = unknown, TType = unknown> = (\n value: TValue,\n row: TType\n) => JSX.Element | string | number | null;\nexport type Table3ColumnFooterRenderer<TValue = unknown> = (values: TValue[]) => JSX.Element | string | number | null;\nexport type Table3ColumnClassNameHandler<TType = unknown> = string | ((row: TType) => string | undefined);\nexport type Table3ColumnAlignment = 'left' | 'center' | 'right';\nexport type Table3ColumnDataType = 'auto' | 'alphanumeric' | 'alphanumericCaseSensitive' | 'datetime' | 'boolean';\nexport type Table3ColumnHeaderMenu = (props: Partial<MenuProps>) => JSX.Element;\n\nexport type Table3ColumnControlProps = {\n className?: string;\n disabled?: boolean;\n invalid?: boolean;\n onBlur?: (value: any) => void;\n onFocus?: React.FocusEventHandler;\n readOnly?: boolean;\n ref: React.RefObject<HTMLElement>;\n setValue: (value: any) => void;\n value: any;\n};\nexport type Table3ColumnControlRenderer<TType = unknown> =\n | ((props: Table3ColumnControlProps, row?: TType) => JSX.Element)\n | 'datepicker'\n | 'input'\n | 'switch';\n\ntype ValueOf<T> = T[keyof T];\n\nexport type Table3ColumnProps<TType = unknown> = ValueOf<{\n [K in keyof TType]: {\n accessor: K;\n } & {\n align?: Table3ColumnAlignment;\n className?: Table3ColumnClassNameHandler<TType>;\n control?: Table3ColumnControlRenderer<TType>;\n dataType?: Table3ColumnDataType;\n defaultHidden?: boolean;\n defaultWidth?: number | 'grow';\n enableFiltering?: boolean;\n enableHiding?: boolean;\n enableOrdering?: boolean;\n enableResizing?: boolean;\n enableSearch?: boolean;\n enableSorting?: boolean;\n enableTruncate?: boolean;\n footer?: Table3ColumnFooterRenderer;\n header: string;\n headerClassName?: string;\n menu?: Table3ColumnHeaderMenu;\n minWidth?: number;\n renderer?: Table3ColumnRenderer<TType[K], TType>;\n sort?: Table3SortDirection;\n sortFn?: Table3SortFn<TType>;\n tooltip?: string;\n };\n}>;\n\n// rows\nexport type DeprecatedRowDensity = 'compact' | 'normal' | 'comfortable' | 'spacious';\nexport type Table3RowHeight = 'short' | 'medium' | 'tall' | 'extra-tall';\nexport type Table3FontSize = 'small' | 'medium' | 'large';\nexport type Table3RowClickHandler<TType = unknown> = (row: TType) => void;\nexport type Table3RowDragHandler<TType = unknown> = (\n rows: TType[],\n showPlaceholder: (string) => void,\n setDataTransfer: (data: string) => void\n) => void;\nexport type Table3RowDropHandler<TType = any> = (event: React.DragEvent, row: TType) => void;\nexport type Table3RowExpansionRenderer<TType = unknown> = (row: TType) => (() => JSX.Element) | null;\nexport type Table3RowSelectionHandler<TType = unknown> = (rows: TType[]) => void;\nexport type Table3RowActionRenderer<TType = unknown> = (row: TType) => JSX.Element | null;\n\n// table\nexport type Table3Preset = 'display' | 'editable';\nexport type Table3Settings = {\n columnFreezingIndex?: number;\n columnOrder?: ColumnOrderState;\n columnPinning?: ColumnPinningState;\n columnSizing?: ColumnSizingState;\n columnVisibility?: VisibilityState;\n excludeUnmatchedRecordsInSearch?: boolean;\n showWarningWhenPrintingLargeDataset?: boolean;\n fontSize?: Table3FontSize;\n rowHeight?: Table3RowHeight;\n sorting?: SortingState;\n};\nexport type Table3SettingsAdapter = (settings: Table3Settings) => void;\n\nexport enum Table3FilterComparator {\n Contains,\n DoesNotContain,\n IsEqualTo,\n IsNotEqualTo,\n IsGreaterThan,\n IsLessThan,\n IsBetween,\n IsOneOf,\n IsNoneOf,\n IsAllOf,\n IsEmpty,\n IsNotEmpty,\n}\n\nexport type Table3FilterValue = {\n comparator: Table3FilterComparator;\n value: any;\n};\n\nexport type Table3Filter = { id: string; value: Table3FilterValue };\n\nexport type ColumnFilter = RTColumnFilter;\nexport type Table3FilterHandler = (filters: ColumnFilter[]) => void;\nexport type Table3SearchHandler = (query: string | undefined) => Promise<void>;\nexport type Table3LoadPageHandler = (\n pageIndex: number,\n sorting: Table3ColumnSort[],\n filters: ColumnFilter[],\n search: string | undefined\n) => Promise<void>;\nexport type Table3LoadAllHandler = (\n sorting: Table3ColumnSort[],\n filters: ColumnFilter[],\n search: string | undefined\n) => Promise<void>;\nexport type Table3RowGotoHandler = (\n column: string,\n query: string,\n sorting: Table3ColumnSort[],\n filters: ColumnFilter[],\n search: string | undefined\n) => Promise<number>;\nexport type Table3ColumnSort = RTTableColumnSort;\nexport type Table3SortHandler = (sorting: Table3ColumnSort[]) => void;\nexport type TableStrategy = {\n renderBody: () => JSX.Element | JSX.Element[] | null;\n scrollToIndex: (index: number, options?: { align: 'start' | 'center' | 'end' | 'auto' }) => void;\n};\nexport type Table3ShortcutHandlerFn<TType = unknown> = (row: TType) => void;\nexport type Table3ShortcutHandlerObject<TType = unknown> = {\n handler: Table3ShortcutHandlerFn<TType>;\n meta?: boolean;\n shift?: boolean;\n};\nexport type Table3Shortcuts<TType = unknown> = Record<\n string,\n Table3ShortcutHandlerFn<TType> | Table3ShortcutHandlerObject<TType>\n>;\nexport type Table3SaveHandler<TType = unknown> = (data: TType) => Promise<void>;\n\nexport type Table3Options = {\n enableColumnFreezing: boolean;\n enableColumnHiding: boolean;\n enableColumnOrdering: boolean;\n enableColumnResizing: boolean;\n enableFontSize: boolean;\n enablePrinting: boolean;\n enableRowDrag: boolean;\n enableRowDrop: boolean;\n enableRowExpansion: boolean;\n enableRowGoto: boolean;\n enableRowHeight: boolean;\n enableRowSelection: boolean;\n enableRowSelectionSingle: boolean;\n enableEditing: boolean;\n enableFiltering: boolean;\n enableSearch: boolean;\n enableSorting: boolean;\n};\n\nexport type Table3CommonProps<TType = unknown> = Partial<Table3Options> & {\n actionsForRow?: Table3RowActionRenderer<TType>[];\n actionsForRowLength?: number;\n autoFocus?: boolean;\n children: (JSX.Element | boolean | null | undefined)[];\n data: TType[];\n defaultColumnFreezingIndex?: number;\n defaultCurrentRowIndex?: number;\n defaultSettings?: Table3Settings;\n emptyState?: () => JSX.Element | null;\n expandedRowRenderer?: Table3RowExpansionRenderer<TType>;\n id: string;\n onChangeSettings?: Table3SettingsAdapter;\n onRowClick?: Table3RowClickHandler<TType>;\n onRowDrag?: Table3RowDragHandler<TType>;\n onRowDrop?: Table3RowDropHandler<TType>;\n onRowGoto?: Table3RowGotoHandler;\n onRowSelect?: Table3RowSelectionHandler<TType>;\n onFilter?: Table3FilterHandler;\n onSave?: Table3SaveHandler<TType>;\n onSearch?: Table3SearchHandler;\n onSort?: Table3SortHandler;\n preset?: Table3Preset;\n shortcuts?: Table3Shortcuts<TType>;\n toolbarLeft?: JSX.Element;\n toolbarRight?: JSX.Element;\n};\n\ninterface Table3ClientProps<TType = unknown> extends Table3CommonProps<TType> {\n length?: never;\n loadPage?: never;\n loadAll?: never;\n pageSize?: never;\n}\n\ninterface Table3ServerProps<TType = unknown> extends Table3CommonProps<TType> {\n length: number | undefined;\n loadPage: Table3LoadPageHandler;\n loadAll: Table3LoadAllHandler;\n pageSize?: number;\n}\n\nexport type Table3Props<TType = unknown> = Table3ClientProps<TType> | Table3ServerProps<TType>;\n\nexport type Table3Ref = HTMLDivElement & {\n instance: {\n resetFiltering: () => void;\n resetRowExpansion: () => void;\n resetRowSelection: () => void;\n resetSorting: () => void;\n toggleEditing: (enabled: boolean | undefined) => void;\n };\n};\n\nexport type Table3Texts = {\n columns: {\n actions: {\n tooltip: string;\n };\n drag: {\n tooltip: string;\n };\n expansion: {\n collapse: string;\n collapseAll: string;\n expand: string;\n expandAll: string;\n };\n menu: {\n freezeFirstColumn: string;\n freezeUptoColumn: string;\n gotoRow: string;\n hideColumn: string;\n unfreezeColumns: string;\n };\n resize: {\n tooltip: string;\n };\n select: {\n deselect: string;\n deselectAll: string;\n select: string;\n selectAll: string;\n };\n };\n columnSettings: {\n button: string;\n noResults: string;\n search: string;\n tooltip: string;\n };\n editing: {\n actions: {\n tooltip: string;\n save: string;\n clear: string;\n exit: string;\n };\n buttons: {\n edit: {\n text: string;\n tooltip: string;\n };\n };\n rowIndicator: {\n rowWillMove: string;\n rowWillBeHidden: string;\n rowWillMoveReasonSearch: string;\n rowWillMoveReasonFilter: string;\n rowWillMoveReasonSorting: string;\n };\n saving: {\n progress: string;\n complete: string;\n };\n };\n filters: {\n button: string;\n buttons: {\n addFilter: string;\n clearFilters: string;\n };\n comparators: {\n contains: string;\n doesNotContain: string;\n isEqualTo: string;\n isNotEqualTo: string;\n isGreaterThan: string;\n isLessThan: string;\n isBetween: string;\n isOneOf: string;\n isNoneOf: string;\n isAllOf: string;\n isEmpty: string;\n isNotEmpty: string;\n };\n conditions: {\n and: string;\n where: string;\n };\n emptyFilter: {\n condition: string;\n value: string;\n };\n tooltip: string;\n total: string;\n };\n fontSize: {\n tooltip: string;\n sizes: {\n small: string;\n medium: string;\n large: string;\n };\n };\n footer: {\n summary: {\n count: string;\n records: string;\n selected: string;\n };\n };\n print: {\n error: string;\n loading: string;\n tooltip: string;\n warningDialog: {\n title: string;\n description: string;\n checkboxVisibilityLabel: string;\n cancelButtonText: string;\n printButtonText: string;\n };\n };\n rowHeight: {\n tooltip: string;\n sizes: {\n short: string;\n medium: string;\n tall: string;\n extraTall: string;\n };\n };\n search: {\n excludeUnmatchedResults: string;\n placeholder: string;\n };\n};\n"],"names":["Table3FilterComparator"],"mappings":"IA4GYA;AAAZ,WAAYA,sBAAsB;EAC9BA,2EAAQ;EACRA,uFAAc;EACdA,6EAAS;EACTA,mFAAY;EACZA,qFAAa;EACbA,+EAAU;EACVA,6EAAS;EACTA,yEAAO;EACPA,2EAAQ;EACRA,yEAAO;EACPA,0EAAO;EACPA,gFAAU;AACd,CAAC,EAbWA,sBAAsB,KAAtBA,sBAAsB;;;;"}
|
1
|
+
{"version":3,"file":"types.js","sources":["../../../../../../../src/components/Table3/types.ts"],"sourcesContent":["import {\n ColumnFilter as RTColumnFilter,\n ColumnOrderState,\n ColumnPinningState,\n ColumnSizingState,\n ColumnSort as RTTableColumnSort,\n SortingState,\n VisibilityState,\n BuiltInSortingFn,\n} from '@tanstack/react-table';\nimport { MenuProps } from '../Menu/Menu';\n\nexport type Table3SortDirection = 'asc' | 'desc';\nexport type Table3SortFn<TType = unknown> =\n | ((rowA: TType, rowB: TType, columnId: string) => -1 | 0 | 1)\n | BuiltInSortingFn\n | 'auto';\n\n// columns\nexport type Table3ColumnRenderer<TValue = unknown, TType = unknown> = (\n value: TValue,\n row: TType\n) => JSX.Element | string | number | null;\nexport type Table3ColumnFooterRenderer<TValue = unknown> = (values: TValue[]) => JSX.Element | string | number | null;\nexport type Table3ColumnClassNameHandler<TType = unknown> = string | ((row: TType) => string | undefined);\nexport type Table3ColumnAlignment = 'left' | 'center' | 'right';\nexport type Table3ColumnDataType = 'auto' | 'alphanumeric' | 'alphanumericCaseSensitive' | 'datetime' | 'boolean';\nexport type Table3ColumnHeaderMenu = (props: Partial<MenuProps>) => JSX.Element;\n\nexport type Table3ColumnControlProps = {\n className?: string;\n disabled?: boolean;\n invalid?: boolean;\n onBlur?: (value: any) => void;\n onFocus?: React.FocusEventHandler;\n readOnly?: boolean;\n ref: React.RefObject<HTMLElement>;\n setValue: (value: any) => void;\n value: any;\n};\nexport type Table3ColumnControlRenderer<TType = unknown> =\n | ((props: Table3ColumnControlProps, row?: TType) => JSX.Element)\n | 'datepicker'\n | 'input'\n | 'switch';\n\ntype ValueOf<T> = T[keyof T];\n\nexport type Table3ColumnProps<TType = unknown> = ValueOf<{\n [K in keyof TType]: {\n accessor: K;\n } & {\n align?: Table3ColumnAlignment;\n className?: Table3ColumnClassNameHandler<TType>;\n control?: Table3ColumnControlRenderer<TType>;\n dataType?: Table3ColumnDataType;\n defaultHidden?: boolean;\n defaultWidth?: number | 'grow';\n enableFiltering?: boolean;\n enableHiding?: boolean;\n enableOrdering?: boolean;\n enableResizing?: boolean;\n enableSearch?: boolean;\n enableSorting?: boolean;\n enableTruncate?: boolean;\n footer?: Table3ColumnFooterRenderer;\n header: string;\n headerClassName?: string;\n menu?: Table3ColumnHeaderMenu;\n minWidth?: number;\n renderer?: Table3ColumnRenderer<TType[K], TType>;\n sort?: Table3SortDirection;\n sortFn?: Table3SortFn<TType>;\n tooltip?: string;\n };\n}>;\n\n// rows\nexport type DeprecatedRowDensity = 'compact' | 'normal' | 'comfortable' | 'spacious';\nexport type Table3RowHeight = 'short' | 'medium' | 'tall' | 'extra-tall';\nexport type Table3FontSize = 'small' | 'medium' | 'large';\nexport type Table3RowClickHandler<TType = unknown> = (row: TType) => void;\nexport type Table3RowDragHandler<TType = unknown> = (\n rows: TType[],\n showPlaceholder: (string) => void,\n setDataTransfer: (data: string) => void\n) => void;\nexport type Table3RowDropHandler<TType = any> = (event: React.DragEvent, row: TType) => void;\nexport type Table3RowExpansionRenderer<TType = unknown> = (row: TType) => (() => JSX.Element) | null;\nexport type Table3RowSelectionHandler<TType = unknown> = (rows: TType[]) => void;\nexport type Table3RowActionRenderer<TType = unknown> = (row: TType) => JSX.Element | null;\n\n// table\nexport type Table3Preset = 'display' | 'editable';\nexport type Table3Settings = {\n columnFreezingIndex?: number;\n columnOrder?: ColumnOrderState;\n columnPinning?: ColumnPinningState;\n columnSizing?: ColumnSizingState;\n columnVisibility?: VisibilityState;\n excludeUnmatchedRecordsInSearch?: boolean;\n showWarningWhenPrintingLargeDataset?: boolean;\n fontSize?: Table3FontSize;\n rowHeight?: Table3RowHeight;\n sorting?: SortingState;\n};\nexport type Table3SettingsAdapter = (settings: Table3Settings) => void;\n\nexport enum Table3FilterComparator {\n Contains,\n DoesNotContain,\n IsEqualTo,\n IsNotEqualTo,\n IsGreaterThan,\n IsLessThan,\n IsBetween,\n IsOneOf,\n IsNoneOf,\n IsAllOf,\n IsEmpty,\n IsNotEmpty,\n}\n\nexport type Table3FilterValue = {\n comparator: Table3FilterComparator;\n value: any;\n};\n\nexport type Table3Filter = { id: string; value: Table3FilterValue };\n\nexport type ColumnFilter = RTColumnFilter;\nexport type Table3FilterHandler = (filters: ColumnFilter[]) => void;\nexport type Table3LoadPageHandler = (\n pageIndex: number,\n sorting: Table3ColumnSort[],\n filters: ColumnFilter[],\n search: string | undefined\n) => Promise<void>;\nexport type Table3LoadAllHandler = (\n sorting: Table3ColumnSort[],\n filters: ColumnFilter[],\n search: string | undefined\n) => Promise<void>;\nexport type Table3RowGotoHandler = (\n column: string,\n query: string,\n sorting: Table3ColumnSort[],\n filters: ColumnFilter[],\n search: string | undefined\n) => Promise<number>;\nexport type Table3ColumnSort = RTTableColumnSort;\nexport type Table3SortHandler = (sorting: Table3ColumnSort[]) => void;\nexport type TableStrategy = {\n renderBody: () => JSX.Element | JSX.Element[] | null;\n scrollToIndex: (index: number, options?: { align: 'start' | 'center' | 'end' | 'auto' }) => void;\n};\nexport type Table3ShortcutHandlerFn<TType = unknown> = (row: TType) => void;\nexport type Table3ShortcutHandlerObject<TType = unknown> = {\n handler: Table3ShortcutHandlerFn<TType>;\n meta?: boolean;\n shift?: boolean;\n};\nexport type Table3Shortcuts<TType = unknown> = Record<\n string,\n Table3ShortcutHandlerFn<TType> | Table3ShortcutHandlerObject<TType>\n>;\nexport type Table3SaveHandler<TType = unknown> = (data: TType) => Promise<void>;\n\nexport type Table3Options = {\n enableColumnFreezing: boolean;\n enableColumnHiding: boolean;\n enableColumnOrdering: boolean;\n enableColumnResizing: boolean;\n enableFontSize: boolean;\n enablePrinting: boolean;\n enableRowDrag: boolean;\n enableRowDrop: boolean;\n enableRowExpansion: boolean;\n enableRowGoto: boolean;\n enableRowHeight: boolean;\n enableRowSelection: boolean;\n enableRowSelectionSingle: boolean;\n enableEditing: boolean;\n enableFiltering: boolean;\n enableSearch: boolean;\n enableSorting: boolean;\n};\n\nexport type Table3CommonProps<TType = unknown> = Partial<Table3Options> & {\n actionsForRow?: Table3RowActionRenderer<TType>[];\n actionsForRowLength?: number;\n autoFocus?: boolean;\n children: (JSX.Element | boolean | null | undefined)[];\n data: TType[];\n defaultColumnFreezingIndex?: number;\n defaultCurrentRowIndex?: number;\n defaultSettings?: Table3Settings;\n emptyState?: () => JSX.Element | null;\n expandedRowRenderer?: Table3RowExpansionRenderer<TType>;\n id: string;\n onChangeSettings?: Table3SettingsAdapter;\n onRowClick?: Table3RowClickHandler<TType>;\n onRowDrag?: Table3RowDragHandler<TType>;\n onRowDrop?: Table3RowDropHandler<TType>;\n onRowGoto?: Table3RowGotoHandler;\n onRowSelect?: Table3RowSelectionHandler<TType>;\n onFilter?: Table3FilterHandler;\n onSave?: Table3SaveHandler<TType>;\n onSort?: Table3SortHandler;\n preset?: Table3Preset;\n shortcuts?: Table3Shortcuts<TType>;\n toolbarLeft?: JSX.Element;\n toolbarRight?: JSX.Element;\n};\n\ninterface Table3ClientProps<TType = unknown> extends Table3CommonProps<TType> {\n length?: never;\n loadPage?: never;\n loadAll?: never;\n pageSize?: never;\n}\n\ninterface Table3ServerProps<TType = unknown> extends Table3CommonProps<TType> {\n length: number | undefined;\n loadPage: Table3LoadPageHandler;\n loadAll: Table3LoadAllHandler;\n pageSize?: number;\n}\n\nexport type Table3Props<TType = unknown> = Table3ClientProps<TType> | Table3ServerProps<TType>;\n\nexport type Table3Ref = HTMLDivElement & {\n instance: {\n resetFiltering: () => void;\n resetRowExpansion: () => void;\n resetRowSelection: () => void;\n resetSorting: () => void;\n toggleEditing: (enabled: boolean | undefined) => void;\n };\n};\n\nexport type Table3Texts = {\n columns: {\n actions: {\n tooltip: string;\n };\n drag: {\n tooltip: string;\n };\n expansion: {\n collapse: string;\n collapseAll: string;\n expand: string;\n expandAll: string;\n };\n menu: {\n freezeFirstColumn: string;\n freezeUptoColumn: string;\n gotoRow: string;\n hideColumn: string;\n unfreezeColumns: string;\n };\n resize: {\n tooltip: string;\n };\n select: {\n deselect: string;\n deselectAll: string;\n select: string;\n selectAll: string;\n };\n };\n columnSettings: {\n button: string;\n noResults: string;\n search: string;\n tooltip: string;\n };\n editing: {\n actions: {\n tooltip: string;\n save: string;\n clear: string;\n exit: string;\n };\n buttons: {\n edit: {\n text: string;\n tooltip: string;\n };\n };\n rowIndicator: {\n rowWillMove: string;\n rowWillBeHidden: string;\n rowWillMoveReasonSearch: string;\n rowWillMoveReasonFilter: string;\n rowWillMoveReasonSorting: string;\n };\n saving: {\n progress: string;\n complete: string;\n };\n };\n filters: {\n button: string;\n buttons: {\n addFilter: string;\n clearFilters: string;\n };\n comparators: {\n contains: string;\n doesNotContain: string;\n isEqualTo: string;\n isNotEqualTo: string;\n isGreaterThan: string;\n isLessThan: string;\n isBetween: string;\n isOneOf: string;\n isNoneOf: string;\n isAllOf: string;\n isEmpty: string;\n isNotEmpty: string;\n };\n conditions: {\n and: string;\n where: string;\n };\n emptyFilter: {\n condition: string;\n value: string;\n };\n tooltip: string;\n total: string;\n };\n fontSize: {\n tooltip: string;\n sizes: {\n small: string;\n medium: string;\n large: string;\n };\n };\n footer: {\n summary: {\n count: string;\n records: string;\n selected: string;\n };\n };\n print: {\n error: string;\n loading: string;\n tooltip: string;\n warningDialog: {\n title: string;\n description: string;\n checkboxVisibilityLabel: string;\n cancelButtonText: string;\n printButtonText: string;\n };\n };\n rowHeight: {\n tooltip: string;\n sizes: {\n short: string;\n medium: string;\n tall: string;\n extraTall: string;\n };\n };\n search: {\n excludeUnmatchedResults: string;\n placeholder: string;\n };\n};\n"],"names":["Table3FilterComparator"],"mappings":"IA4GYA;AAAZ,WAAYA,sBAAsB;EAC9BA,2EAAQ;EACRA,uFAAc;EACdA,6EAAS;EACTA,mFAAY;EACZA,qFAAa;EACbA,+EAAU;EACVA,6EAAS;EACTA,yEAAO;EACPA,2EAAQ;EACRA,yEAAO;EACPA,0EAAO;EACPA,gFAAU;AACd,CAAC,EAbWA,sBAAsB,KAAtBA,sBAAsB;;;;"}
|
@@ -8829,7 +8829,9 @@ const SearchInput2 = /*#__PURE__*/React__default.forwardRef(function SearchInput
|
|
8829
8829
|
const handleBlur = event => {
|
8830
8830
|
var _settingsRef$current, _attributes$onBlur;
|
8831
8831
|
// trigger searches when leaving the field
|
8832
|
-
|
8832
|
+
if (!isSynced) {
|
8833
|
+
handleSubmit();
|
8834
|
+
}
|
8833
8835
|
if (settingsRef.current && (settingsRef.current === event.relatedTarget || (_settingsRef$current = settingsRef.current) !== null && _settingsRef$current !== void 0 && _settingsRef$current.contains(event.relatedTarget))) {
|
8834
8836
|
return;
|
8835
8837
|
}
|
@@ -16070,7 +16072,7 @@ function DisplayCell(props) {
|
|
16070
16072
|
return isCellHighlighted(tableMeta.search.query, value, memoedProps.children);
|
16071
16073
|
}
|
16072
16074
|
return false;
|
16073
|
-
}, [memoedProps.children, tableMeta.search.isHighlightingEnabled, tableMeta.search.query]);
|
16075
|
+
}, [memoedProps.children, tableMeta.search.isHighlightingEnabled, tableMeta.search.excludeUnmatchedResults, tableMeta.search.query]);
|
16074
16076
|
const memoedHighlightCurrent = React__default.useMemo(() => {
|
16075
16077
|
if (!tableMeta.search.isHighlightingEnabled || !memoedHighlight || tableMeta.search.currentHighlightColumnIndex === undefined) {
|
16076
16078
|
return false;
|
@@ -16102,7 +16104,7 @@ const MemoedDisplayCell = /*#__PURE__*/React__default.memo(function MemoedDispla
|
|
16102
16104
|
} = props;
|
16103
16105
|
const layoutClassName = cn('py-[var(--table3-row-padding)]', customClassName);
|
16104
16106
|
const className = highlighted ? undefined : layoutClassName;
|
16105
|
-
const content = enableTruncate
|
16107
|
+
const content = enableTruncate ? /*#__PURE__*/React__default.createElement("span", {
|
16106
16108
|
className: "truncate"
|
16107
16109
|
}, children) : children;
|
16108
16110
|
if (debug) {
|
@@ -16193,7 +16195,6 @@ const MemoedFooter = /*#__PURE__*/React__default.memo(function MemoedFooter(prop
|
|
16193
16195
|
});
|
16194
16196
|
|
16195
16197
|
const COLUMN_ID = '__actions';
|
16196
|
-
const ACTIONS_ON_ROW_LENGTH$1 = 4;
|
16197
16198
|
const MemoedCell = /*#__PURE__*/React__default.memo(function MemoedCell(props) {
|
16198
16199
|
const {
|
16199
16200
|
actions,
|
@@ -16213,7 +16214,7 @@ const MemoedCell = /*#__PURE__*/React__default.memo(function MemoedCell(props) {
|
|
16213
16214
|
let content;
|
16214
16215
|
// We don't want to show actions in edit mode, since we have editing actions,
|
16215
16216
|
// which is shown in edit mode instead.
|
16216
|
-
if (!isEditing && (isCurrentRow || isHovered && !isHoverStatePaused && !isResizingColumn)) {
|
16217
|
+
if (actions !== null && actions !== void 0 && actions.length && !isEditing && (isCurrentRow || isHovered && !isHoverStatePaused && !isResizingColumn)) {
|
16217
16218
|
const visibleActions = actions.map(action => action(row.original)).filter(action => !!action);
|
16218
16219
|
const actionsOnRow = visibleActions.length === actionsLength ? visibleActions : visibleActions.slice(0, actionsLength - 1);
|
16219
16220
|
const actionsInMenu = visibleActions.slice(visibleActions.length === actionsLength ? actionsLength : actionsLength - 1);
|
@@ -16245,33 +16246,25 @@ const MemoedCell = /*#__PURE__*/React__default.memo(function MemoedCell(props) {
|
|
16245
16246
|
}
|
16246
16247
|
return /*#__PURE__*/React__default.createElement(DisplayCell, Object.assign({}, props), content);
|
16247
16248
|
});
|
16248
|
-
function Cell$1(
|
16249
|
-
const {
|
16250
|
-
actionsForRow,
|
16251
|
-
actionsForRowLength,
|
16252
|
-
...context
|
16253
|
-
} = props;
|
16249
|
+
function Cell$1(context) {
|
16254
16250
|
const {
|
16255
16251
|
rowIndex
|
16256
16252
|
} = React__default.useContext(RowContext$1);
|
16257
16253
|
const tableMeta = context.table.options.meta;
|
16258
16254
|
return /*#__PURE__*/React__default.createElement(MemoedCell, Object.assign({}, context, {
|
16259
|
-
actions: actionsForRow,
|
16260
|
-
actionsLength: actionsForRowLength,
|
16255
|
+
actions: tableMeta.rowActions.actionsForRow,
|
16256
|
+
actionsLength: tableMeta.rowActions.actionsForRowLength,
|
16261
16257
|
isCurrentRow: tableMeta.currentRow.currentRowIndex === rowIndex,
|
16262
16258
|
isEditing: tableMeta.editing.isEditing,
|
16263
16259
|
isResizingColumn: !!context.table.getState().columnSizingInfo.isResizingColumn,
|
16264
16260
|
isHoverStatePaused: !!tableMeta.hoverState.isPaused
|
16265
16261
|
}));
|
16266
16262
|
}
|
16267
|
-
function createRowActionsColumn$1(
|
16263
|
+
function createRowActionsColumn$1() {
|
16268
16264
|
return {
|
16269
16265
|
id: COLUMN_ID,
|
16270
16266
|
header: Header$2,
|
16271
|
-
cell:
|
16272
|
-
actionsForRow: actionsForRow,
|
16273
|
-
actionsForRowLength: actionsForRowLength
|
16274
|
-
})),
|
16267
|
+
cell: Cell$1,
|
16275
16268
|
footer: Footer$4,
|
16276
16269
|
meta: {
|
16277
16270
|
align: 'right',
|
@@ -16287,6 +16280,7 @@ function createRowActionsColumn$1(actionsForRow, actionsForRowLength = ACTIONS_O
|
|
16287
16280
|
};
|
16288
16281
|
}
|
16289
16282
|
|
16283
|
+
const REACT_TABLE_DEFAULT_COLUMN_SIZE_DO_NOT_CHANGE = 150;
|
16290
16284
|
const useCssGrid = table => {
|
16291
16285
|
const allVisibleColumns = table.getVisibleLeafColumns();
|
16292
16286
|
const columnSizing = table.getState().columnSizing;
|
@@ -16300,9 +16294,7 @@ const useCssGrid = table => {
|
|
16300
16294
|
const width = columnSizing[column.id];
|
16301
16295
|
if (isInternalColumn$1(column.id)) {
|
16302
16296
|
if (column.id === COLUMN_ID) {
|
16303
|
-
|
16304
|
-
// when the current row is scrolled out of the virtualisation view
|
16305
|
-
size = `minmax(${column.getSize()}px, auto)`;
|
16297
|
+
size = column.getSize() !== REACT_TABLE_DEFAULT_COLUMN_SIZE_DO_NOT_CHANGE ? `minmax(${column.getSize()}px, auto)` : '1fr';
|
16306
16298
|
} else {
|
16307
16299
|
size = `${column.getSize()}px`;
|
16308
16300
|
}
|
@@ -16861,51 +16853,6 @@ function useRowClick(onRowClick) {
|
|
16861
16853
|
};
|
16862
16854
|
}
|
16863
16855
|
|
16864
|
-
// we use a listener, and not the internal "controlled" change handlers because we don't actually want consumers
|
16865
|
-
// to control the state outside the table. this listener is really here to let the consumer make a server request
|
16866
|
-
// and provide the server with the search state, so that it can search server side
|
16867
|
-
function useSearchStateListener(table, onSearch) {
|
16868
|
-
const tableMeta = table.options.meta;
|
16869
|
-
const rows = table.getRowModel().rows;
|
16870
|
-
const loadingRef = React__default.useRef(false);
|
16871
|
-
const lastUsedExcludeRef = React__default.useRef(tableMeta.search.excludeUnmatchedResults);
|
16872
|
-
const handleSearch = function (query, excludeUnmatchedResults) {
|
16873
|
-
try {
|
16874
|
-
const _temp4 = function () {
|
16875
|
-
if (tableMeta.search.isEnabled && !loadingRef.current) {
|
16876
|
-
function _temp3() {
|
16877
|
-
if (excludeUnmatchedResults && table.options.enableRowSelection) {
|
16878
|
-
table.resetRowSelection();
|
16879
|
-
}
|
16880
|
-
}
|
16881
|
-
const _temp2 = function () {
|
16882
|
-
if (typeof onSearch === 'function' && (excludeUnmatchedResults || lastUsedExcludeRef.current)) {
|
16883
|
-
const _temp = _finallyRethrows(function () {
|
16884
|
-
loadingRef.current = true;
|
16885
|
-
// if we are transitioning from true to false on exclude, then we need to "reset" by searching with no value
|
16886
|
-
return Promise.resolve(onSearch(!excludeUnmatchedResults && lastUsedExcludeRef.current ? undefined : query)).then(function () {});
|
16887
|
-
}, function (_wasThrown, _result) {
|
16888
|
-
loadingRef.current = false;
|
16889
|
-
lastUsedExcludeRef.current = excludeUnmatchedResults;
|
16890
|
-
if (_wasThrown) throw _result;
|
16891
|
-
return _result;
|
16892
|
-
});
|
16893
|
-
if (_temp && _temp.then) return _temp.then(function () {});
|
16894
|
-
}
|
16895
|
-
}();
|
16896
|
-
return _temp2 && _temp2.then ? _temp2.then(_temp3) : _temp3(_temp2);
|
16897
|
-
}
|
16898
|
-
}();
|
16899
|
-
return Promise.resolve(_temp4 && _temp4.then ? _temp4.then(function () {}) : void 0);
|
16900
|
-
} catch (e) {
|
16901
|
-
return Promise.reject(e);
|
16902
|
-
}
|
16903
|
-
};
|
16904
|
-
useLazyEffect(() => {
|
16905
|
-
handleSearch(tableMeta.search.query, tableMeta.search.excludeUnmatchedResults);
|
16906
|
-
}, [tableMeta.search.isEnabled, tableMeta.search.query, tableMeta.search.excludeUnmatchedResults, rows.length]);
|
16907
|
-
}
|
16908
|
-
|
16909
16856
|
var SavingStateValue;
|
16910
16857
|
(function (SavingStateValue) {
|
16911
16858
|
SavingStateValue["Saving"] = "saving";
|
@@ -17724,7 +17671,7 @@ const Cell$4 = /*#__PURE__*/React__default.memo(function MemoedCell(context) {
|
|
17724
17671
|
}) : null));
|
17725
17672
|
}
|
17726
17673
|
}, function arePropsEqual(oldProps, newProps) {
|
17727
|
-
const oldTableMeta =
|
17674
|
+
const oldTableMeta = oldProps.table.options.meta;
|
17728
17675
|
const newTableMeta = newProps.table.options.meta;
|
17729
17676
|
// we memo because we don't want the row re-rendering and removing focus from the checkbox
|
17730
17677
|
// we can't default to the standard comparison because we need currentRow off the table meta
|
@@ -18010,7 +17957,7 @@ function useConvertChildrenToColumns(props, options, editing) {
|
|
18010
17957
|
columns.unshift(columnHelper.display(createRowDragColumn(props.onRowDrag)));
|
18011
17958
|
}
|
18012
17959
|
if ((_props$actionsForRow = props.actionsForRow) !== null && _props$actionsForRow !== void 0 && _props$actionsForRow.length) {
|
18013
|
-
columns.push(columnHelper.display(createRowActionsColumn$1(
|
17960
|
+
columns.push(columnHelper.display(createRowActionsColumn$1()));
|
18014
17961
|
}
|
18015
17962
|
if (editing.isEnabled && editing.isEditing) {
|
18016
17963
|
columns.push(columnHelper.display(createRowEditingActionsColumn()));
|
@@ -18139,6 +18086,14 @@ function useSearch(isEnabled, excludeUnmatchedResultsInSearch = false, loadAll)
|
|
18139
18086
|
};
|
18140
18087
|
}
|
18141
18088
|
|
18089
|
+
const ACTIONS_ON_ROW_LENGTH$1 = 4;
|
18090
|
+
function useRowActions$1(actionsForRow, actionsForRowLength = ACTIONS_ON_ROW_LENGTH$1) {
|
18091
|
+
return {
|
18092
|
+
actionsForRow,
|
18093
|
+
actionsForRowLength
|
18094
|
+
};
|
18095
|
+
}
|
18096
|
+
|
18142
18097
|
function useTable$2(props) {
|
18143
18098
|
var _ref, _props$defaultSetting, _props$defaultSetting2, _props$defaultSetting3, _props$defaultSetting4, _props$defaultSetting5, _props$defaultSetting6, _props$defaultSetting7, _props$defaultSetting8, _props$defaultSetting9, _props$length;
|
18144
18099
|
// options
|
@@ -18171,13 +18126,13 @@ function useTable$2(props) {
|
|
18171
18126
|
}
|
18172
18127
|
// search
|
18173
18128
|
if (tableOptions.enableGlobalFilter) {
|
18174
|
-
|
18175
|
-
|
18176
|
-
|
18177
|
-
|
18178
|
-
|
18179
|
-
|
18180
|
-
|
18129
|
+
tableOptions.globalFilterFn = (row, columnId, searchQuery) => {
|
18130
|
+
if (row.original) {
|
18131
|
+
return globalFilterFn$1(row.getValue(columnId), searchQuery);
|
18132
|
+
}
|
18133
|
+
return false;
|
18134
|
+
};
|
18135
|
+
tableOptions.getFilteredRowModel = reactTable$1.getFilteredRowModel();
|
18181
18136
|
}
|
18182
18137
|
// sorting
|
18183
18138
|
if (options.enableSorting) {
|
@@ -18197,6 +18152,7 @@ function useTable$2(props) {
|
|
18197
18152
|
const fontSize = useFontSize(options.enableFontSize, (_props$defaultSetting4 = props.defaultSettings) === null || _props$defaultSetting4 === void 0 ? void 0 : _props$defaultSetting4.fontSize);
|
18198
18153
|
const hoverState = usePauseHoverState();
|
18199
18154
|
const printing = usePrinting(options.enablePrinting, props.loadAll, (_props$defaultSetting5 = props.defaultSettings) === null || _props$defaultSetting5 === void 0 ? void 0 : _props$defaultSetting5.showWarningWhenPrintingLargeDataset);
|
18155
|
+
const rowActions = useRowActions$1(props.actionsForRow, props.actionsForRowLength);
|
18200
18156
|
const rowClick = useRowClick(props.onRowClick);
|
18201
18157
|
const rowDrag = useRowDrag(options.enableRowDrag);
|
18202
18158
|
const rowDrop = useRowDrop(options.enableRowDrop, props.onRowDrop);
|
@@ -18239,6 +18195,7 @@ function useTable$2(props) {
|
|
18239
18195
|
hoverState,
|
18240
18196
|
isUsingServer: !!props.loadPage,
|
18241
18197
|
printing,
|
18198
|
+
rowActions: rowActions,
|
18242
18199
|
rowClick: rowClick,
|
18243
18200
|
rowDrag,
|
18244
18201
|
rowDrop,
|
@@ -18253,7 +18210,6 @@ function useTable$2(props) {
|
|
18253
18210
|
useEditingStateListener(table);
|
18254
18211
|
useFilteringStateListener(table, props.onFilter);
|
18255
18212
|
useRowSelectionListener$1(table, props.onRowSelect);
|
18256
|
-
useSearchStateListener(table, props.onSearch);
|
18257
18213
|
useSettingsStateListener$1(table, props.onChangeSettings);
|
18258
18214
|
useShortcutsListener(table, props.shortcuts);
|
18259
18215
|
useServerLoadingListener(table, props.loadPage);
|
@@ -18440,6 +18396,7 @@ const MemoedRow = /*#__PURE__*/React__default.memo(function MemoedRow(props) {
|
|
18440
18396
|
const {
|
18441
18397
|
index,
|
18442
18398
|
isLastRow: _1,
|
18399
|
+
measureRef,
|
18443
18400
|
onClick,
|
18444
18401
|
onClickCapture,
|
18445
18402
|
onDrop,
|
@@ -18453,6 +18410,14 @@ const MemoedRow = /*#__PURE__*/React__default.memo(function MemoedRow(props) {
|
|
18453
18410
|
const {
|
18454
18411
|
setIsHovered
|
18455
18412
|
} = useRowContext$1();
|
18413
|
+
// we measure the first cell (since the row has display: contents) so that the virtualiser height is correct
|
18414
|
+
React__default.useEffect(() => {
|
18415
|
+
var _ref$current;
|
18416
|
+
const firstCell = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.querySelector('[role=cell]:first-child');
|
18417
|
+
if (firstCell) {
|
18418
|
+
measureRef(firstCell);
|
18419
|
+
}
|
18420
|
+
}, [ref.current]);
|
18456
18421
|
// we use capture because it also picks up clicks on e.g. select checkboxes
|
18457
18422
|
const handleClickCapture = event => {
|
18458
18423
|
if (typeof onClickCapture === 'function') {
|
@@ -18463,9 +18428,9 @@ const MemoedRow = /*#__PURE__*/React__default.memo(function MemoedRow(props) {
|
|
18463
18428
|
};
|
18464
18429
|
const handleClick = event => {
|
18465
18430
|
if (typeof onClick === 'function') {
|
18466
|
-
var _ref$
|
18431
|
+
var _ref$current2;
|
18467
18432
|
const clickedElement = event.target;
|
18468
|
-
if (!((_ref$
|
18433
|
+
if (!((_ref$current2 = ref.current) !== null && _ref$current2 !== void 0 && _ref$current2.contains(event.target)) || clickableElements.includes(clickedElement.tagName.toLowerCase()) || clickedElement.closest(clickableElements.map(tag => `[role=row] ${tag}`).join(','))) {
|
18469
18434
|
return;
|
18470
18435
|
}
|
18471
18436
|
onClick(row.original);
|
@@ -18579,6 +18544,9 @@ function SkeletonRow(props) {
|
|
18579
18544
|
}, otherProps))));
|
18580
18545
|
}
|
18581
18546
|
|
18547
|
+
// Note - latest react-virtual requires an inner container, and that doesn't work with css grid,
|
18548
|
+
// so if you update react-virtual, you would need to refactor the entire table away from css grid,
|
18549
|
+
// and that would break a number of layout things - auto sizing, resizing etc
|
18582
18550
|
function createBodyRenderer(props, rows, table, tableRef, virtualiser, setExpandedRowSizes) {
|
18583
18551
|
return () => {
|
18584
18552
|
if (rows.length) {
|
@@ -18618,6 +18586,7 @@ function createBodyRenderer(props, rows, table, tableRef, virtualiser, setExpand
|
|
18618
18586
|
}, /*#__PURE__*/React__default.createElement(Row$2, {
|
18619
18587
|
index: virtualRow.index,
|
18620
18588
|
isLastRow: virtualRow.index === rows.length - 1,
|
18589
|
+
measureRef: virtualRow.measureRef,
|
18621
18590
|
row: row,
|
18622
18591
|
table: table,
|
18623
18592
|
tableRef: tableRef
|
@@ -18726,30 +18695,39 @@ function Search$3(props) {
|
|
18726
18695
|
if (firstRowIndex) {
|
18727
18696
|
scrollTo(firstRowIndex);
|
18728
18697
|
}
|
18729
|
-
}, [table.getRowModel().rows.length, JSON.stringify(table.getState().sorting), JSON.stringify(table.getState().columnVisibility)]);
|
18730
|
-
const handleSearch = query
|
18731
|
-
|
18732
|
-
|
18733
|
-
|
18734
|
-
|
18735
|
-
|
18736
|
-
|
18737
|
-
|
18698
|
+
}, [tableMeta.search.query, tableMeta.search.excludeUnmatchedResults, table.getRowModel().rows.length, JSON.stringify(table.getState().sorting), JSON.stringify(table.getState().columnVisibility)]);
|
18699
|
+
const handleSearch = function (query) {
|
18700
|
+
try {
|
18701
|
+
function _temp2() {
|
18702
|
+
if (tableMeta.search.excludeUnmatchedResults) {
|
18703
|
+
if (value !== null && value !== void 0 && value.length) {
|
18704
|
+
table.setGlobalFilter(value);
|
18705
|
+
} else {
|
18706
|
+
table.resetGlobalFilter();
|
18707
|
+
}
|
18708
|
+
}
|
18709
|
+
tableMeta.search.setQuery(value);
|
18738
18710
|
}
|
18739
|
-
|
18740
|
-
//
|
18741
|
-
|
18742
|
-
|
18743
|
-
|
18744
|
-
|
18745
|
-
|
18711
|
+
const value = String(query !== null && query !== void 0 ? query : '');
|
18712
|
+
// load all data if that is possible
|
18713
|
+
const _temp = function () {
|
18714
|
+
if (tableMeta.search.loadAll) {
|
18715
|
+
// don't pass the search query because we need all data - not filtered data
|
18716
|
+
return Promise.resolve(tableMeta.search.loadAll(table.getState().sorting, table.getState().columnFilters, undefined)).then(function () {});
|
18717
|
+
}
|
18718
|
+
}();
|
18719
|
+
return Promise.resolve(_temp && _temp.then ? _temp.then(_temp2) : _temp2(_temp));
|
18720
|
+
} catch (e) {
|
18721
|
+
return Promise.reject(e);
|
18746
18722
|
}
|
18747
18723
|
};
|
18748
18724
|
const handleToggleExcludeUnmatchedResults = enabled => {
|
18749
18725
|
tableMeta.search.toggleExcludeUnmatchedResults(enabled);
|
18750
18726
|
if (enabled) {
|
18751
|
-
|
18752
|
-
|
18727
|
+
var _ref$current2;
|
18728
|
+
if ((_ref$current2 = ref.current) !== null && _ref$current2 !== void 0 && _ref$current2.value) {
|
18729
|
+
var _ref$current3;
|
18730
|
+
table.setGlobalFilter((_ref$current3 = ref.current) === null || _ref$current3 === void 0 ? void 0 : _ref$current3.value);
|
18753
18731
|
} else {
|
18754
18732
|
table.resetGlobalFilter();
|
18755
18733
|
}
|
@@ -18757,8 +18735,8 @@ function Search$3(props) {
|
|
18757
18735
|
table.resetGlobalFilter();
|
18758
18736
|
}
|
18759
18737
|
requestAnimationFrame(() => {
|
18760
|
-
var _ref$
|
18761
|
-
return (_ref$
|
18738
|
+
var _ref$current4;
|
18739
|
+
return (_ref$current4 = ref.current) === null || _ref$current4 === void 0 ? void 0 : _ref$current4.focus();
|
18762
18740
|
});
|
18763
18741
|
};
|
18764
18742
|
const handleNextResult = () => {
|
@@ -18836,6 +18814,9 @@ function resetHighlightedColumnIndexes(enabled, value, table) {
|
|
18836
18814
|
tableMeta.search.setHighlightedColumnIndexes([]);
|
18837
18815
|
tableMeta.search.setCurrentHighlightColumnIndex(undefined);
|
18838
18816
|
}
|
18817
|
+
if (firstRowIndex !== undefined) {
|
18818
|
+
tableMeta.currentRow.setCurrentRowIndex(firstRowIndex);
|
18819
|
+
}
|
18839
18820
|
return firstRowIndex;
|
18840
18821
|
}
|
18841
18822
|
|
@@ -20078,20 +20059,12 @@ function useTable3DataLoader(fetch, fetchAll, options = {
|
|
20078
20059
|
return Promise.reject(e);
|
20079
20060
|
}
|
20080
20061
|
};
|
20081
|
-
const handleSearch = function (query) {
|
20082
|
-
try {
|
20083
|
-
return loadAll(_lastUsedSorting.current, _lastUsedFilters.current, query);
|
20084
|
-
} catch (e) {
|
20085
|
-
return Promise.reject(e);
|
20086
|
-
}
|
20087
|
-
};
|
20088
20062
|
return [{
|
20089
20063
|
data,
|
20090
20064
|
length: length.current,
|
20091
20065
|
loadAll,
|
20092
20066
|
loadPage,
|
20093
20067
|
onFilter: handleFilter,
|
20094
|
-
onSearch: handleSearch,
|
20095
20068
|
onSort: handleSort,
|
20096
20069
|
pageSize
|
20097
20070
|
}, invalidate];
|