@economic/taco 2.53.2 → 2.55.0-EC-64018.0

package/dist/esm/packages/taco/src/primitives/Table/useTableDataLoader2.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTableDataLoader2.js","sources":["../../../../../../../src/primitives/Table/useTableDataLoader2.ts"],"sourcesContent":["import React from 'react';\nimport { v4 as uuid } from 'uuid';\nimport {\n    TableColumnFilter,\n    TableColumnSort,\n    TableFilterHandler,\n    TableServerLoadPageHandler,\n    TableServerLoadAllHandler,\n    TableSortHandler,\n    TableSearchHandler,\n} from './types';\nimport { DEFAULT_PAGE_SIZE, useTableDataLoaderOptions } from './useTableDataLoader';\n\nconst DATASET_SIZE_MULTIPLIER = 15;\n\nexport type useTableDataPageFetcher2<TType = unknown> = (\n    pageIndex: number,\n    pageSize: number,\n    sorting: TableColumnSort[],\n    filters: TableColumnFilter[],\n    hiddenColumns: string[],\n    search: string | undefined\n) => Promise<{ data: TType[]; length: number }>;\n\nexport type useTableDataAllFetcher2<TType = unknown> = (\n    sorting: TableColumnSort[],\n    filters: TableColumnFilter[],\n    hiddenColumns: string[],\n    search: string | undefined\n) => Promise<{ data: TType[]; length: number }>;\n\nexport type useTableDataLoaderValues2<TType = unknown> = {\n    data: TType[];\n    length: number | undefined;\n    loadAll: TableServerLoadAllHandler;\n    loadPage: TableServerLoadPageHandler;\n    onChangeFilter: TableFilterHandler;\n    onChangeSearch: TableSearchHandler;\n    onChangeSort: TableSortHandler;\n    pageSize: number;\n    pages: number[];\n    _experimentalDataLoader2: boolean;\n};\n\ntype Data<TType = unknown> = {\n    rows: TType[];\n    pages: number[];\n    cache: Record<number, TType[]>;\n    lastFetchedPage: number | undefined;\n};\ntype Direction = 'forward' | 'backward' | undefined;\n\nexport function useTableDataLoader2<TType = unknown>(\n    fetchPage: useTableDataPageFetcher2<TType>,\n    fetchAll: useTableDataAllFetcher2<TType>,\n    options: useTableDataLoaderOptions = { pageSize: DEFAULT_PAGE_SIZE }\n): [useTableDataLoaderValues2<TType>, () => void] {\n    const { pageSize } = options;\n    const DATASET_SIZE = DATASET_SIZE_MULTIPLIER * pageSize;\n\n    // track the data length, we don't know it until the first request\n    const length = React.useRef<number>(0);\n    // data will be filled after the first request\n    const [data, setData] = React.useState<Data<TType>>({ rows: [], pages: [], cache: {}, lastFetchedPage: undefined });\n    // track which pages have been loaded to dedupe requests\n    const _pendingPageRequests = React.useRef<Record<number, boolean>>({});\n    // it's possible to spam updates, e.g. sort, so we don't set state if the last request wasn't the current oen\n    const _lastRequestId = React.useRef<string | undefined>();\n    // store last used properties\n    const _lastUsedSorting = React.useRef<TableColumnSort[]>([]);\n    const _lastUsedFilters = React.useRef<TableColumnFilter[]>([]);\n    const _lastUsedSearch = React.useRef<string | undefined>();\n    const _lastUsedHiddenColumns = React.useRef<string[]>([]);\n\n    async function loadPage(\n        pageIndex: number,\n        sorting: TableColumnSort[],\n        filters: TableColumnFilter[],\n        hiddenColumns: string[],\n        search: string | undefined,\n        reset = false\n    ) {\n        // if a request is already pending for this page (and it's not a reset), skip it\n        if (_pendingPageRequests.current[pageIndex] && !reset) {\n            return;\n        }\n\n        const hasChangedData =\n            JSON.stringify(sorting) !== JSON.stringify(_lastUsedSorting.current) ||\n            JSON.stringify(filters) !== JSON.stringify(_lastUsedFilters.current) ||\n            search !== _lastUsedSearch.current;\n\n        // if the page is already loaded and has actual rows, abort\n        if (data.cache[pageIndex] && data.cache[pageIndex][0] && !hasChangedData && !reset) {\n            return;\n        }\n\n        // create an id to track the update\n        const requestId = uuid();\n\n        // set the page as loading, so that subsequent requests don't retrigger it\n        _pendingPageRequests.current[pageIndex] = true;\n\n        try {\n            _lastRequestId.current = requestId;\n            const response = await fetchPage(pageIndex, pageSize, sorting, filters, hiddenColumns, search);\n            length.current = response.length;\n\n            // update state, here we do some \"magic\" to support \"load in place\"\n            setData(currentData => {\n                // if this request wasn't the last one, just return the current state to prevent weird updates\n                if (_lastRequestId.current !== requestId) {\n                    return currentData;\n                }\n\n                const direction = getDirection(pageIndex, currentData.pages);\n                const nextPages = getPages(pageIndex, currentData.lastFetchedPage, reset ? [] : currentData.pages, direction);\n\n                // set values so we can track if they changed between loads\n                _lastUsedSorting.current = sorting;\n                _lastUsedFilters.current = filters;\n                _lastUsedSearch.current = search;\n                _lastUsedHiddenColumns.current = hiddenColumns;\n\n                // cache data as an object to prevent any duplicates for pages\n                let nextCache: Record<number, TType[]>;\n\n                if (reset || hasChangedData || !direction) {\n                    nextCache = nextPages.reduce((acc, p) => ({ ...acc, [p]: Array(pageSize).fill(undefined) }), {});\n                } else {\n                    nextCache = { ...currentData.cache };\n                }\n\n                nextCache[pageIndex] = response.data;\n\n                // cleanup \"unloaded\" pages\n                if (direction === 'forward' && currentData.rows.length >= DATASET_SIZE) {\n                    delete nextCache[currentData.pages[0]];\n                } else if (direction === 'backward' && currentData.rows.length >= DATASET_SIZE) {\n                    delete nextCache[currentData.pages[currentData.pages.length - 1]];\n                }\n\n                // remap rows from the cached data - do it here and not in render to save some performance\n                const rows = Object.values(nextCache).reduce((acc, p) => acc.concat(p), []);\n\n                return {\n                    cache: nextCache,\n                    pages: nextPages,\n                    rows: rows,\n                    lastFetchedPage: pageIndex,\n                };\n            });\n\n            // reset pending requests\n            delete _pendingPageRequests.current[pageIndex];\n        } catch {\n            //\n        }\n    }\n\n    const loadAll = async (\n        sorting: TableColumnSort[],\n        filters: TableColumnFilter[],\n        hiddenColumns: string[],\n        search: string | undefined\n    ) => {\n        // set values so we can track if they changed between loads\n        _lastUsedSorting.current = sorting;\n        _lastUsedFilters.current = filters;\n        _lastUsedSearch.current = search;\n        _lastUsedHiddenColumns.current = hiddenColumns;\n\n        try {\n            const response = await fetchAll(sorting, filters, hiddenColumns, search);\n            length.current = response.length;\n\n            const pages: number[] = [];\n            const cache = {};\n            const pageCount = Math.ceil(response.length / pageSize);\n\n            Array.from(Array(pageCount).keys()).forEach(index => {\n                pages.push(index);\n                const startIndex = index * pageSize;\n                cache[index] = response.data.slice(startIndex, startIndex + pageSize);\n            });\n\n            setData({\n                cache,\n                pages,\n                rows: response.data,\n                lastFetchedPage: undefined,\n            });\n        } catch {\n            //\n        } finally {\n            // reset pending requests\n            _pendingPageRequests.current = {};\n        }\n    };\n\n    const invalidate = async () => {\n        // reset stuff\n        _pendingPageRequests.current = {};\n\n        // load the current page again\n        return loadPage(\n            getCurrentPage(data.pages),\n            _lastUsedSorting.current,\n            _lastUsedFilters.current,\n            _lastUsedHiddenColumns.current,\n            _lastUsedSearch.current,\n            true\n        );\n    };\n\n    const handleSort = async (sorting: TableColumnSort[]) => {\n        // reset before loading the current page\n        _pendingPageRequests.current = {};\n\n        return loadPage(\n            getCurrentPage(data.pages),\n            sorting,\n            _lastUsedFilters.current,\n            _lastUsedHiddenColumns.current,\n            _lastUsedSearch.current,\n            true\n        );\n    };\n    const handleFilter = async (filters: TableColumnFilter[], hiddenColumns: string[]) => {\n        // reset before loading the current page\n        _pendingPageRequests.current = {};\n        return loadPage(0, _lastUsedSorting.current, filters, hiddenColumns, _lastUsedSearch.current, true);\n    };\n    const handleSearch = async (search: string | undefined, hiddenColumns: string[]) => {\n        // reset before loading the current page\n        _pendingPageRequests.current = {};\n        return loadPage(0, _lastUsedSorting.current, _lastUsedFilters.current, hiddenColumns, search, true);\n    };\n\n    return [\n        {\n            data: data.rows,\n            pages: data.pages,\n            length: length.current,\n            loadAll,\n            loadPage,\n            onChangeFilter: handleFilter,\n            onChangeSearch: handleSearch,\n            onChangeSort: handleSort,\n            pageSize,\n            _experimentalDataLoader2: true,\n        },\n        invalidate,\n    ];\n}\n\nfunction getCurrentPage(currentPages: number[]): number {\n    if (currentPages.length <= 2) {\n        return currentPages[0];\n    }\n\n    // for even page lengths we can't know which is the current visible page - it could even be both\n    // so we load one of them and rely on the \"load next/previous page\" functionality in row\n    const middle = Math.floor(currentPages.length / 2);\n    return currentPages[middle];\n}\n\nfunction getDirection(pageIndex: number, currentPages: number[]): Direction {\n    if (currentPages.length) {\n        if (pageIndex === currentPages[currentPages.length - 1] + 1) {\n            return 'forward';\n        } else if (\n            pageIndex === currentPages[0] - 1 ||\n            (currentPages.length === 2 && currentPages[0] !== 0 && pageIndex === currentPages[0])\n        ) {\n            return 'backward';\n        }\n    }\n\n    return undefined;\n}\n\nfunction getPages(pageIndex: number, lastUsedPageIndex: number | undefined, currentPages: number[], direction: Direction) {\n    if (currentPages.length && (pageIndex === lastUsedPageIndex || currentPages.includes(pageIndex))) {\n        return currentPages;\n    }\n\n    if (direction === 'forward') {\n        const nextPages = currentPages.length === DATASET_SIZE_MULTIPLIER ? currentPages.slice(1) : currentPages;\n        return nextPages.concat(pageIndex);\n    }\n\n    if (direction === 'backward') {\n        const nextPages = currentPages.length === DATASET_SIZE_MULTIPLIER ? currentPages.slice(0, -1) : currentPages;\n        return [pageIndex].concat(nextPages);\n    }\n\n    return [pageIndex];\n}\n"],"names":["DATASET_SIZE_MULTIPLIER","useTableDataLoader2","fetchPage","fetchAll","options","pageSize","DEFAULT_PAGE_SIZE","loadPage","pageIndex","sorting","filters","hiddenColumns","search","reset","_pendingPageRequests","current","Promise","resolve","hasChangedData","JSON","stringify","_lastUsedSorting","_lastUsedFilters","_lastUsedSearch","data","cache","requestId","uuid","_temp2","_catch","_lastRequestId","then","response","length","setData","currentData","direction","getDirection","pages","nextPages","getPages","lastFetchedPage","_lastUsedHiddenColumns","nextCache","reduce","acc","p","Array","fill","undefined","rows","DATASET_SIZE","Object","values","concat","e","reject","React","useRef","useState","loadAll","_temp","_finallyRethrows","pageCount","Math","ceil","from","keys","forEach","index","push","startIndex","slice","_wasThrown","_result","invalidate","getCurrentPage","handleSort","handleFilter","handleSearch","onChangeFilter","onChangeSearch","onChangeSort","_experimentalDataLoader2","currentPages","middle","floor","lastUsedPageIndex","includes"],"mappings":";;;;;AAaA,MAAMA,uBAAuB,GAAG,EAAE;SAuClBC,mBAAmBA,CAC/BC,SAA0C,EAC1CC,QAAwC,EACxCC,UAAqC;EAAEC,QAAQ,EAAEC;CAAmB;QAmBrDC,QAAQ,aACnBC,SAAiB,EACjBC,OAA0B,EAC1BC,OAA4B,EAC5BC,aAAuB,EACvBC,MAA0B,EAC1BC,KAAK,GAAG,KAAK;IAAA;;MAGb,IAAIC,oBAAoB,CAACC,OAAO,CAACP,SAAS,CAAC,IAAI,CAACK,KAAK,EAAE;QACnD,OAAAG,OAAA,CAAAC,OAAA;;MAGJ,MAAMC,cAAc,GAChBC,IAAI,CAACC,SAAS,CAACX,OAAO,CAAC,KAAKU,IAAI,CAACC,SAAS,CAACC,gBAAgB,CAACN,OAAO,CAAC,IACpEI,IAAI,CAACC,SAAS,CAACV,OAAO,CAAC,KAAKS,IAAI,CAACC,SAAS,CAACE,gBAAgB,CAACP,OAAO,CAAC,IACpEH,MAAM,KAAKW,eAAe,CAACR,OAAO;;MAGtC,IAAIS,IAAI,CAACC,KAAK,CAACjB,SAAS,CAAC,IAAIgB,IAAI,CAACC,KAAK,CAACjB,SAAS,CAAC,CAAC,CAAC,CAAC,IAAI,CAACU,cAAc,IAAI,CAACL,KAAK,EAAE;QAChF,OAAAG,OAAA,CAAAC,OAAA;;;MAIJ,MAAMS,SAAS,GAAGC,EAAI,EAAE;;MAGxBb,oBAAoB,CAACC,OAAO,CAACP,SAAS,CAAC,GAAG,IAAI;MAAC,MAAAoB,MAAA,GAAAC,MAAA,aAE3C;QACAC,cAAc,CAACf,OAAO,GAAGW,SAAS;QAAC,OAAAV,OAAA,CAAAC,OAAA,CACZf,SAAS,CAACM,SAAS,EAAEH,QAAQ,EAAEI,OAAO,EAAEC,OAAO,EAAEC,aAAa,EAAEC,MAAM,CAAC,EAAAmB,IAAA,WAAxFC,QAAQ;UACdC,MAAM,CAAClB,OAAO,GAAGiB,QAAQ,CAACC,MAAM;;UAGhCC,OAAO,CAACC,WAAW;;YAEf,IAAIL,cAAc,CAACf,OAAO,KAAKW,SAAS,EAAE;cACtC,OAAOS,WAAW;;YAGtB,MAAMC,SAAS,GAAGC,YAAY,CAAC7B,SAAS,EAAE2B,WAAW,CAACG,KAAK,CAAC;YAC5D,MAAMC,SAAS,GAAGC,QAAQ,CAAChC,SAAS,EAAE2B,WAAW,CAACM,eAAe,EAAE5B,KAAK,GAAG,EAAE,GAAGsB,WAAW,CAACG,KAAK,EAAEF,SAAS,CAAC;;YAG7Gf,gBAAgB,CAACN,OAAO,GAAGN,OAAO;YAClCa,gBAAgB,CAACP,OAAO,GAAGL,OAAO;YAClCa,eAAe,CAACR,OAAO,GAAGH,MAAM;YAChC8B,sBAAsB,CAAC3B,OAAO,GAAGJ,aAAa;;YAG9C,IAAIgC,SAAkC;YAEtC,IAAI9B,KAAK,IAAIK,cAAc,IAAI,CAACkB,SAAS,EAAE;cACvCO,SAAS,GAAGJ,SAAS,CAACK,MAAM,CAAC,CAACC,GAAG,EAAEC,CAAC,MAAM;gBAAE,GAAGD,GAAG;gBAAE,CAACC,CAAC,GAAGC,KAAK,CAAC1C,QAAQ,CAAC,CAAC2C,IAAI,CAACC,SAAS;eAAG,CAAC,EAAE,EAAE,CAAC;aACnG,MAAM;cACHN,SAAS,GAAG;gBAAE,GAAGR,WAAW,CAACV;eAAO;;YAGxCkB,SAAS,CAACnC,SAAS,CAAC,GAAGwB,QAAQ,CAACR,IAAI;;YAGpC,IAAIY,SAAS,KAAK,SAAS,IAAID,WAAW,CAACe,IAAI,CAACjB,MAAM,IAAIkB,YAAY,EAAE;cACpE,OAAOR,SAAS,CAACR,WAAW,CAACG,KAAK,CAAC,CAAC,CAAC,CAAC;aACzC,MAAM,IAAIF,SAAS,KAAK,UAAU,IAAID,WAAW,CAACe,IAAI,CAACjB,MAAM,IAAIkB,YAAY,EAAE;cAC5E,OAAOR,SAAS,CAACR,WAAW,CAACG,KAAK,CAACH,WAAW,CAACG,KAAK,CAACL,MAAM,GAAG,CAAC,CAAC,CAAC;;;YAIrE,MAAMiB,IAAI,GAAGE,MAAM,CAACC,MAAM,CAACV,SAAS,CAAC,CAACC,MAAM,CAAC,CAACC,GAAG,EAAEC,CAAC,KAAKD,GAAG,CAACS,MAAM,CAACR,CAAC,CAAC,EAAE,EAAE,CAAC;YAE3E,OAAO;cACHrB,KAAK,EAAEkB,SAAS;cAChBL,KAAK,EAAEC,SAAS;cAChBW,IAAI,EAAEA,IAAI;cACVT,eAAe,EAAEjC;aACpB;WACJ,CAAC;;UAGF,OAAOM,oBAAoB,CAACC,OAAO,CAACP,SAAS,CAAC;;OACjD;MAAA,OAAAQ,OAAA,CAAAC,OAAA,CAAAW,MAAA,IAAAA,MAAA,CAAAG,IAAA,GAAAH,MAAA,CAAAG,IAAA;KAGJ,QAAAwB,CAAA;MAAA,OAAAvC,OAAA,CAAAwC,MAAA,CAAAD,CAAA;;;EArGD,MAAM;IAAElD;GAAU,GAAGD,OAAO;EAC5B,MAAM+C,YAAY,GAAGnD,uBAAuB,GAAGK,QAAQ;;EAGvD,MAAM4B,MAAM,GAAGwB,cAAK,CAACC,MAAM,CAAS,CAAC,CAAC;;EAEtC,MAAM,CAAClC,IAAI,EAAEU,OAAO,CAAC,GAAGuB,cAAK,CAACE,QAAQ,CAAc;IAAET,IAAI,EAAE,EAAE;IAAEZ,KAAK,EAAE,EAAE;IAAEb,KAAK,EAAE,EAAE;IAAEgB,eAAe,EAAEQ;GAAW,CAAC;;EAEnH,MAAMnC,oBAAoB,GAAG2C,cAAK,CAACC,MAAM,CAA0B,EAAE,CAAC;;EAEtE,MAAM5B,cAAc,GAAG2B,cAAK,CAACC,MAAM,EAAsB;;EAEzD,MAAMrC,gBAAgB,GAAGoC,cAAK,CAACC,MAAM,CAAoB,EAAE,CAAC;EAC5D,MAAMpC,gBAAgB,GAAGmC,cAAK,CAACC,MAAM,CAAsB,EAAE,CAAC;EAC9D,MAAMnC,eAAe,GAAGkC,cAAK,CAACC,MAAM,EAAsB;EAC1D,MAAMhB,sBAAsB,GAAGe,cAAK,CAACC,MAAM,CAAW,EAAE,CAAC;EAwFzD,MAAME,OAAO,aACTnD,OAA0B,EAC1BC,OAA4B,EAC5BC,aAAuB,EACvBC,MAA0B;IAAA;;MAG1BS,gBAAgB,CAACN,OAAO,GAAGN,OAAO;MAClCa,gBAAgB,CAACP,OAAO,GAAGL,OAAO;MAClCa,eAAe,CAACR,OAAO,GAAGH,MAAM;MAChC8B,sBAAsB,CAAC3B,OAAO,GAAGJ,aAAa;MAAC,MAAAkD,KAAA,GAAAC,gBAAA;QAAA,OAAAjC,MAAA,aAE3C;UAAA,OAAAb,OAAA,CAAAC,OAAA,CACuBd,QAAQ,CAACM,OAAO,EAAEC,OAAO,EAAEC,aAAa,EAAEC,MAAM,CAAC,EAAAmB,IAAA,WAAlEC,QAAQ;YACdC,MAAM,CAAClB,OAAO,GAAGiB,QAAQ,CAACC,MAAM;YAEhC,MAAMK,KAAK,GAAa,EAAE;YAC1B,MAAMb,KAAK,GAAG,EAAE;YAChB,MAAMsC,SAAS,GAAGC,IAAI,CAACC,IAAI,CAACjC,QAAQ,CAACC,MAAM,GAAG5B,QAAQ,CAAC;YAEvD0C,KAAK,CAACmB,IAAI,CAACnB,KAAK,CAACgB,SAAS,CAAC,CAACI,IAAI,EAAE,CAAC,CAACC,OAAO,CAACC,KAAK;cAC7C/B,KAAK,CAACgC,IAAI,CAACD,KAAK,CAAC;cACjB,MAAME,UAAU,GAAGF,KAAK,GAAGhE,QAAQ;cACnCoB,KAAK,CAAC4C,KAAK,CAAC,GAAGrC,QAAQ,CAACR,IAAI,CAACgD,KAAK,CAACD,UAAU,EAAEA,UAAU,GAAGlE,QAAQ,CAAC;aACxE,CAAC;YAEF6B,OAAO,CAAC;cACJT,KAAK;cACLa,KAAK;cACLY,IAAI,EAAElB,QAAQ,CAACR,IAAI;cACnBiB,eAAe,EAAEQ;aACpB,CAAC;;SACL;mBAAAwB,UAAA,EAAAC,OAAA;;QAIG5D,oBAAoB,CAACC,OAAO,GAAG,EAAE;QAAC,IAAA0D,UAAA,QAAAC,OAAA;QAAA,OAAAA,OAAA;;MAAA,OAAA1D,OAAA,CAAAC,OAAA,CAAA4C,KAAA,IAAAA,KAAA,CAAA9B,IAAA,GAAA8B,KAAA,CAAA9B,IAAA;KAEzC,QAAAwB,CAAA;MAAA,OAAAvC,OAAA,CAAAwC,MAAA,CAAAD,CAAA;;;EAED,MAAMoB,UAAU;IAAA;;MAEZ7D,oBAAoB,CAACC,OAAO,GAAG,EAAE;;MAGjC,OAAOR,QAAQ,CACXqE,cAAc,CAACpD,IAAI,CAACc,KAAK,CAAC,EAC1BjB,gBAAgB,CAACN,OAAO,EACxBO,gBAAgB,CAACP,OAAO,EACxB2B,sBAAsB,CAAC3B,OAAO,EAC9BQ,eAAe,CAACR,OAAO,EACvB,IAAI,CACP;KACJ,QAAAwC,CAAA;MAAA,OAAAvC,OAAA,CAAAwC,MAAA,CAAAD,CAAA;;;EAED,MAAMsB,UAAU,aAAUpE,OAA0B;IAAA;;MAEhDK,oBAAoB,CAACC,OAAO,GAAG,EAAE;MAEjC,OAAOR,QAAQ,CACXqE,cAAc,CAACpD,IAAI,CAACc,KAAK,CAAC,EAC1B7B,OAAO,EACPa,gBAAgB,CAACP,OAAO,EACxB2B,sBAAsB,CAAC3B,OAAO,EAC9BQ,eAAe,CAACR,OAAO,EACvB,IAAI,CACP;KACJ,QAAAwC,CAAA;MAAA,OAAAvC,OAAA,CAAAwC,MAAA,CAAAD,CAAA;;;EACD,MAAMuB,YAAY,aAAUpE,OAA4B,EAAEC,aAAuB;IAAA;;MAE7EG,oBAAoB,CAACC,OAAO,GAAG,EAAE;MACjC,OAAOR,QAAQ,CAAC,CAAC,EAAEc,gBAAgB,CAACN,OAAO,EAAEL,OAAO,EAAEC,aAAa,EAAEY,eAAe,CAACR,OAAO,EAAE,IAAI,CAAC;KACtG,QAAAwC,CAAA;MAAA,OAAAvC,OAAA,CAAAwC,MAAA,CAAAD,CAAA;;;EACD,MAAMwB,YAAY,aAAUnE,MAA0B,EAAED,aAAuB;IAAA;;MAE3EG,oBAAoB,CAACC,OAAO,GAAG,EAAE;MACjC,OAAOR,QAAQ,CAAC,CAAC,EAAEc,gBAAgB,CAACN,OAAO,EAAEO,gBAAgB,CAACP,OAAO,EAAEJ,aAAa,EAAEC,MAAM,EAAE,IAAI,CAAC;KACtG,QAAA2C,CAAA;MAAA,OAAAvC,OAAA,CAAAwC,MAAA,CAAAD,CAAA;;;EAED,OAAO,CACH;IACI/B,IAAI,EAAEA,IAAI,CAAC0B,IAAI;IACfZ,KAAK,EAAEd,IAAI,CAACc,KAAK;IACjBL,MAAM,EAAEA,MAAM,CAAClB,OAAO;IACtB6C,OAAO;IACPrD,QAAQ;IACRyE,cAAc,EAAEF,YAAY;IAC5BG,cAAc,EAAEF,YAAY;IAC5BG,YAAY,EAAEL,UAAU;IACxBxE,QAAQ;IACR8E,wBAAwB,EAAE;GAC7B,EACDR,UAAU,CACb;AACL;AAEA,SAASC,cAAcA,CAACQ,YAAsB;EAC1C,IAAIA,YAAY,CAACnD,MAAM,IAAI,CAAC,EAAE;IAC1B,OAAOmD,YAAY,CAAC,CAAC,CAAC;;;;EAK1B,MAAMC,MAAM,GAAGrB,IAAI,CAACsB,KAAK,CAACF,YAAY,CAACnD,MAAM,GAAG,CAAC,CAAC;EAClD,OAAOmD,YAAY,CAACC,MAAM,CAAC;AAC/B;AAEA,SAAShD,YAAYA,CAAC7B,SAAiB,EAAE4E,YAAsB;EAC3D,IAAIA,YAAY,CAACnD,MAAM,EAAE;IACrB,IAAIzB,SAAS,KAAK4E,YAAY,CAACA,YAAY,CAACnD,MAAM,GAAG,CAAC,CAAC,GAAG,CAAC,EAAE;MACzD,OAAO,SAAS;KACnB,MAAM,IACHzB,SAAS,KAAK4E,YAAY,CAAC,CAAC,CAAC,GAAG,CAAC,IAChCA,YAAY,CAACnD,MAAM,KAAK,CAAC,IAAImD,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI5E,SAAS,KAAK4E,YAAY,CAAC,CAAC,CAAE,EACvF;MACE,OAAO,UAAU;;;EAIzB,OAAOnC,SAAS;AACpB;AAEA,SAAST,QAAQA,CAAChC,SAAiB,EAAE+E,iBAAqC,EAAEH,YAAsB,EAAEhD,SAAoB;EACpH,IAAIgD,YAAY,CAACnD,MAAM,KAAKzB,SAAS,KAAK+E,iBAAiB,IAAIH,YAAY,CAACI,QAAQ,CAAChF,SAAS,CAAC,CAAC,EAAE;IAC9F,OAAO4E,YAAY;;EAGvB,IAAIhD,SAAS,KAAK,SAAS,EAAE;IACzB,MAAMG,SAAS,GAAG6C,YAAY,CAACnD,MAAM,KAAKjC,uBAAuB,GAAGoF,YAAY,CAACZ,KAAK,CAAC,CAAC,CAAC,GAAGY,YAAY;IACxG,OAAO7C,SAAS,CAACe,MAAM,CAAC9C,SAAS,CAAC;;EAGtC,IAAI4B,SAAS,KAAK,UAAU,EAAE;IAC1B,MAAMG,SAAS,GAAG6C,YAAY,CAACnD,MAAM,KAAKjC,uBAAuB,GAAGoF,YAAY,CAACZ,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAGY,YAAY;IAC5G,OAAO,CAAC5E,SAAS,CAAC,CAAC8C,MAAM,CAACf,SAAS,CAAC;;EAGxC,OAAO,CAAC/B,SAAS,CAAC;AACtB;;;;"}
+{"version":3,"file":"useTableDataLoader2.js","sources":["../../../../../../../src/primitives/Table/useTableDataLoader2.ts"],"sourcesContent":["import React from 'react';\nimport { v4 as uuid } from 'uuid';\nimport {\n    TableColumnFilter,\n    TableColumnSort,\n    TableFilterHandler,\n    TableServerLoadPageHandler,\n    TableServerLoadAllHandler,\n    TableSortHandler,\n    TableSearchHandler,\n} from './types';\nimport { DEFAULT_PAGE_SIZE, useTableDataLoaderOptions } from './useTableDataLoader';\n\nconst DATASET_SIZE_MULTIPLIER = 15;\n\nexport type useTableDataPageFetcher2<TType = unknown> = (\n    pageIndex: number,\n    pageSize: number,\n    sorting: TableColumnSort[],\n    filters: TableColumnFilter[],\n    hiddenColumns: string[],\n    search: string | undefined\n) => Promise<{ data: TType[]; length: number }>;\n\nexport type useTableDataAllFetcher2<TType = unknown> = (\n    sorting: TableColumnSort[],\n    filters: TableColumnFilter[],\n    hiddenColumns: string[],\n    search: string | undefined\n) => Promise<{ data: TType[]; length: number }>;\n\nexport type useTableDataLoaderValues2<TType = unknown> = {\n    data: TType[];\n    length: number | undefined;\n    loadAll: TableServerLoadAllHandler;\n    loadPage: TableServerLoadPageHandler;\n    onChangeFilter: TableFilterHandler;\n    onChangeSearch: TableSearchHandler;\n    onChangeSort: TableSortHandler;\n    pageSize: number;\n    pages: number[];\n    _experimentalDataLoader2: boolean;\n};\n\ntype Data<TType = unknown> = {\n    rows: TType[];\n    pages: number[];\n    cache: Record<number, TType[]>;\n    lastFetchedPage: number | undefined;\n};\ntype Direction = 'forward' | 'backward' | undefined;\n\nexport function useTableDataLoader2<TType = unknown>(\n    fetchPage: useTableDataPageFetcher2<TType>,\n    fetchAll: useTableDataAllFetcher2<TType>,\n    options: useTableDataLoaderOptions = { pageSize: DEFAULT_PAGE_SIZE }\n): [useTableDataLoaderValues2<TType>, () => void] {\n    const { pageSize } = options;\n    const DATASET_SIZE = DATASET_SIZE_MULTIPLIER * pageSize;\n\n    // track the data length, we don't know it until the first request\n    const length = React.useRef<number>(0);\n    // data will be filled after the first request\n    const [data, setData] = React.useState<Data<TType>>({ rows: [], pages: [], cache: {}, lastFetchedPage: undefined });\n    // track which pages have been loaded to dedupe requests\n    const _pendingPageRequests = React.useRef<Record<number, boolean>>({});\n    // it's possible to spam updates, e.g. sort, so we don't set state if the last request wasn't the current oen\n    const _lastRequestId = React.useRef<string | undefined>();\n    // store last used properties\n    const _lastUsedSorting = React.useRef<TableColumnSort[]>([]);\n    const _lastUsedFilters = React.useRef<TableColumnFilter[]>([]);\n    const _lastUsedSearch = React.useRef<string | undefined>();\n    const _lastUsedHiddenColumns = React.useRef<string[]>([]);\n\n    async function loadPage(\n        pageIndex: number,\n        sorting: TableColumnSort[],\n        filters: TableColumnFilter[],\n        hiddenColumns: string[],\n        search: string | undefined,\n        reset = false\n    ) {\n        const hasChangedData =\n            JSON.stringify(sorting) !== JSON.stringify(_lastUsedSorting.current) ||\n            JSON.stringify(filters) !== JSON.stringify(_lastUsedFilters.current) ||\n            search !== _lastUsedSearch.current;\n\n        // if a request is already pending for this page (and it's not a reset), skip it\n        if (_pendingPageRequests.current[pageIndex] && !hasChangedData && !reset) {\n            return;\n        }\n\n        // if the page is already loaded and has actual rows, abort\n        if (data.cache[pageIndex] && data.cache[pageIndex][0] && !hasChangedData && !reset) {\n            return;\n        }\n\n        // create an id to track the update\n        const requestId = uuid();\n\n        // set the page as loading, so that subsequent requests don't retrigger it\n        _pendingPageRequests.current[pageIndex] = true;\n\n        try {\n            _lastRequestId.current = requestId;\n            const response = await fetchPage(pageIndex, pageSize, sorting, filters, hiddenColumns, search);\n            length.current = response.length;\n\n            // update state, here we do some \"magic\" to support \"load in place\"\n            setData(currentData => {\n                // if this request wasn't the last one, just return the current state to prevent weird updates\n                if (_lastRequestId.current !== requestId) {\n                    return currentData;\n                }\n\n                const direction = getDirection(pageIndex, currentData.pages);\n                const nextPages = getPages(pageIndex, currentData.lastFetchedPage, reset ? [] : currentData.pages, direction);\n\n                // set values so we can track if they changed between loads\n                _lastUsedSorting.current = sorting;\n                _lastUsedFilters.current = filters;\n                _lastUsedSearch.current = search;\n                _lastUsedHiddenColumns.current = hiddenColumns;\n\n                // cache data as an object to prevent any duplicates for pages\n                let nextCache: Record<number, TType[]>;\n\n                if (reset || hasChangedData || !direction) {\n                    nextCache = nextPages.reduce((acc, p) => ({ ...acc, [p]: Array(pageSize).fill(undefined) }), {});\n                } else {\n                    nextCache = { ...currentData.cache };\n                }\n\n                nextCache[pageIndex] = response.data;\n\n                // cleanup \"unloaded\" pages\n                if (direction === 'forward' && currentData.rows.length >= DATASET_SIZE) {\n                    delete nextCache[currentData.pages[0]];\n                } else if (direction === 'backward' && currentData.rows.length >= DATASET_SIZE) {\n                    delete nextCache[currentData.pages[currentData.pages.length - 1]];\n                }\n\n                // remap rows from the cached data - do it here and not in render to save some performance\n                const rows = Object.values(nextCache).reduce((acc, p) => acc.concat(p), []);\n\n                return {\n                    cache: nextCache,\n                    pages: nextPages,\n                    rows: rows,\n                    lastFetchedPage: pageIndex,\n                };\n            });\n\n            // reset pending requests\n            delete _pendingPageRequests.current[pageIndex];\n        } catch {\n            //\n        }\n    }\n\n    const loadAll = async (\n        sorting: TableColumnSort[],\n        filters: TableColumnFilter[],\n        hiddenColumns: string[],\n        search: string | undefined\n    ) => {\n        // set values so we can track if they changed between loads\n        _lastUsedSorting.current = sorting;\n        _lastUsedFilters.current = filters;\n        _lastUsedSearch.current = search;\n        _lastUsedHiddenColumns.current = hiddenColumns;\n\n        try {\n            const response = await fetchAll(sorting, filters, hiddenColumns, search);\n            length.current = response.length;\n\n            const pages: number[] = [];\n            const cache = {};\n            const pageCount = Math.ceil(response.length / pageSize);\n\n            Array.from(Array(pageCount).keys()).forEach(index => {\n                pages.push(index);\n                const startIndex = index * pageSize;\n                cache[index] = response.data.slice(startIndex, startIndex + pageSize);\n            });\n\n            setData({\n                cache,\n                pages,\n                rows: response.data,\n                lastFetchedPage: undefined,\n            });\n        } catch {\n            //\n        } finally {\n            // reset pending requests\n            _pendingPageRequests.current = {};\n        }\n    };\n\n    const invalidate = async () => {\n        // reset stuff\n        _pendingPageRequests.current = {};\n\n        // load the current page again\n        return loadPage(\n            getCurrentPage(data.pages),\n            _lastUsedSorting.current,\n            _lastUsedFilters.current,\n            _lastUsedHiddenColumns.current,\n            _lastUsedSearch.current,\n            true\n        );\n    };\n\n    const handleSort = async (sorting: TableColumnSort[]) => {\n        // reset before loading the current page\n        _pendingPageRequests.current = {};\n\n        return loadPage(\n            getCurrentPage(data.pages),\n            sorting,\n            _lastUsedFilters.current,\n            _lastUsedHiddenColumns.current,\n            _lastUsedSearch.current,\n            true\n        );\n    };\n    const handleFilter = async (filters: TableColumnFilter[], hiddenColumns: string[]) => {\n        // reset before loading the current page\n        _pendingPageRequests.current = {};\n        return loadPage(0, _lastUsedSorting.current, filters, hiddenColumns, _lastUsedSearch.current, true);\n    };\n    const handleSearch = async (search: string | undefined, hiddenColumns: string[]) => {\n        // reset before loading the current page\n        _pendingPageRequests.current = {};\n        return loadPage(0, _lastUsedSorting.current, _lastUsedFilters.current, hiddenColumns, search, true);\n    };\n\n    return [\n        {\n            data: data.rows,\n            pages: data.pages,\n            length: length.current,\n            loadAll,\n            loadPage,\n            onChangeFilter: handleFilter,\n            onChangeSearch: handleSearch,\n            onChangeSort: handleSort,\n            pageSize,\n            _experimentalDataLoader2: true,\n        },\n        invalidate,\n    ];\n}\n\nfunction getCurrentPage(currentPages: number[]): number {\n    if (currentPages.length <= 2) {\n        return currentPages[0];\n    }\n\n    // for even page lengths we can't know which is the current visible page - it could even be both\n    // so we load one of them and rely on the \"load next/previous page\" functionality in row\n    const middle = Math.floor(currentPages.length / 2);\n    return currentPages[middle];\n}\n\nfunction getDirection(pageIndex: number, currentPages: number[]): Direction {\n    if (currentPages.length) {\n        if (pageIndex === currentPages[currentPages.length - 1] + 1) {\n            return 'forward';\n        } else if (\n            pageIndex === currentPages[0] - 1 ||\n            (currentPages.length === 2 && currentPages[0] !== 0 && pageIndex === currentPages[0])\n        ) {\n            return 'backward';\n        }\n    }\n\n    return undefined;\n}\n\nfunction getPages(pageIndex: number, lastUsedPageIndex: number | undefined, currentPages: number[], direction: Direction) {\n    if (currentPages.length && (pageIndex === lastUsedPageIndex || currentPages.includes(pageIndex))) {\n        return currentPages;\n    }\n\n    if (direction === 'forward') {\n        const nextPages = currentPages.length === DATASET_SIZE_MULTIPLIER ? currentPages.slice(1) : currentPages;\n        return nextPages.concat(pageIndex);\n    }\n\n    if (direction === 'backward') {\n        const nextPages = currentPages.length === DATASET_SIZE_MULTIPLIER ? currentPages.slice(0, -1) : currentPages;\n        return [pageIndex].concat(nextPages);\n    }\n\n    return [pageIndex];\n}\n"],"names":["DATASET_SIZE_MULTIPLIER","useTableDataLoader2","fetchPage","fetchAll","options","pageSize","DEFAULT_PAGE_SIZE","loadPage","pageIndex","sorting","filters","hiddenColumns","search","reset","hasChangedData","JSON","stringify","_lastUsedSorting","current","_lastUsedFilters","_lastUsedSearch","_pendingPageRequests","Promise","resolve","data","cache","requestId","uuid","_temp2","_catch","_lastRequestId","then","response","length","setData","currentData","direction","getDirection","pages","nextPages","getPages","lastFetchedPage","_lastUsedHiddenColumns","nextCache","reduce","acc","p","Array","fill","undefined","rows","DATASET_SIZE","Object","values","concat","e","reject","React","useRef","useState","loadAll","_temp","_finallyRethrows","pageCount","Math","ceil","from","keys","forEach","index","push","startIndex","slice","_wasThrown","_result","invalidate","getCurrentPage","handleSort","handleFilter","handleSearch","onChangeFilter","onChangeSearch","onChangeSort","_experimentalDataLoader2","currentPages","middle","floor","lastUsedPageIndex","includes"],"mappings":"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"}

package/dist/esm/packages/taco/src/primitives/Table/useTableManager/features/useTableSearch.js

@@ -12,10 +12,10 @@ function useTableSearch(isEnabled = false, onChangeSearch, defaultEnableGlobalFi
     // react-table doesn't re-render when options.enableGlobalFilter changes, so for now we force it
     const currentFilter = instance.getState().globalFilter;
     if (currentFilter) {
-      setTimeout(() => {
-        instance.setGlobalFilter('');
+      instance.resetGlobalFilter(true);
+      window.requestAnimationFrame(() => {
         instance.setGlobalFilter(currentFilter);
-      }, 1);
+      });
     }
   }
   // highlighting

package/dist/esm/packages/taco/src/primitives/Table/useTableManager/features/useTableSearch.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTableSearch.js","sources":["../../../../../../../../../src/primitives/Table/useTableManager/features/useTableSearch.ts"],"sourcesContent":["import React from 'react';\nimport { Table as ReactTable } from '@tanstack/react-table';\nimport { TableSearchHandler } from '../../types';\n\n/*\n    Search has two behaviours:\n    - Highlighting search results, this is custom and only uses the state part of globalFilter (to store the search query)\n    - Filtering of results, this is essentially the built in filtering, and relies on enableGlobalFilter being on or off\n*/\nexport function useTableSearch<TType = unknown>(\n    isEnabled = false,\n    onChangeSearch: TableSearchHandler | undefined,\n    defaultEnableGlobalFilter = false\n) {\n    const [enableGlobalFilter, _setEnableGlobalFilter] = React.useState<boolean>(defaultEnableGlobalFilter);\n\n    function setEnableGlobalFilter<T extends TType>(enabled: boolean, instance: ReactTable<T>) {\n        _setEnableGlobalFilter(enabled);\n\n        // react-table doesn't re-render when options.enableGlobalFilter changes, so for now we force it\n        const currentFilter = instance.getState().globalFilter;\n\n        if (currentFilter) {\n            setTimeout(() => {\n                instance.setGlobalFilter('');\n                instance.setGlobalFilter(currentFilter);\n            }, 1);\n        }\n    }\n\n    // highlighting\n    const [highlightedColumnIndexes, setHighlightedColumnIndexes] = React.useState<number[][]>([]);\n    const [currentHighlightColumnIndex, setCurrentHighlightColumnIndex] = React.useState<number | undefined>(undefined);\n\n    return {\n        isEnabled,\n        // filtering - built-in\n        enableGlobalFilter,\n        setEnableGlobalFilter,\n        // highlighting - custom\n        highlightedColumnIndexes,\n        setHighlightedColumnIndexes,\n        currentHighlightColumnIndex,\n        setCurrentHighlightColumnIndex,\n        handleSearch: isEnabled && typeof onChangeSearch === 'function' ? onChangeSearch : undefined,\n    };\n}\n"],"names":["useTableSearch","isEnabled","onChangeSearch","defaultEnableGlobalFilter","enableGlobalFilter","_setEnableGlobalFilter","React","useState","setEnableGlobalFilter","enabled","instance","currentFilter","getState","globalFilter","setTimeout","setGlobalFilter","highlightedColumnIndexes","setHighlightedColumnIndexes","currentHighlightColumnIndex","setCurrentHighlightColumnIndex","undefined","handleSearch"],"mappings":";;AAIA;;;;;SAKgBA,cAAcA,CAC1BC,SAAS,GAAG,KAAK,EACjBC,cAA8C,EAC9CC,yBAAyB,GAAG,KAAK;EAEjC,MAAM,CAACC,kBAAkB,EAAEC,sBAAsB,CAAC,GAAGC,cAAK,CAACC,QAAQ,CAAUJ,yBAAyB,CAAC;EAEvG,SAASK,qBAAqBA,CAAkBC,OAAgB,EAAEC,QAAuB;IACrFL,sBAAsB,CAACI,OAAO,CAAC;;IAG/B,MAAME,aAAa,GAAGD,QAAQ,CAACE,QAAQ,EAAE,CAACC,YAAY;IAEtD,IAAIF,aAAa,EAAE;MACfG,UAAU,CAAC;QACPJ,QAAQ,CAACK,eAAe,CAAC,EAAE,CAAC;QAC5BL,QAAQ,CAACK,eAAe,CAACJ,aAAa,CAAC;OAC1C,EAAE,CAAC,CAAC;;;;EAKb,MAAM,CAACK,wBAAwB,EAAEC,2BAA2B,CAAC,GAAGX,cAAK,CAACC,QAAQ,CAAa,EAAE,CAAC;EAC9F,MAAM,CAACW,2BAA2B,EAAEC,8BAA8B,CAAC,GAAGb,cAAK,CAACC,QAAQ,CAAqBa,SAAS,CAAC;EAEnH,OAAO;IACHnB,SAAS;;IAETG,kBAAkB;IAClBI,qBAAqB;;IAErBQ,wBAAwB;IACxBC,2BAA2B;IAC3BC,2BAA2B;IAC3BC,8BAA8B;IAC9BE,YAAY,EAAEpB,SAAS,IAAI,OAAOC,cAAc,KAAK,UAAU,GAAGA,cAAc,GAAGkB;GACtF;AACL;;;;"}
+{"version":3,"file":"useTableSearch.js","sources":["../../../../../../../../../src/primitives/Table/useTableManager/features/useTableSearch.ts"],"sourcesContent":["import React from 'react';\nimport { Table as ReactTable } from '@tanstack/react-table';\nimport { TableSearchHandler } from '../../types';\n\n/*\n    Search has two behaviours:\n    - Highlighting search results, this is custom and only uses the state part of globalFilter (to store the search query)\n    - Filtering of results, this is essentially the built in filtering, and relies on enableGlobalFilter being on or off\n*/\nexport function useTableSearch<TType = unknown>(\n    isEnabled = false,\n    onChangeSearch: TableSearchHandler | undefined,\n    defaultEnableGlobalFilter = false\n) {\n    const [enableGlobalFilter, _setEnableGlobalFilter] = React.useState<boolean>(defaultEnableGlobalFilter);\n\n    function setEnableGlobalFilter<T extends TType>(enabled: boolean, instance: ReactTable<T>) {\n        _setEnableGlobalFilter(enabled);\n\n        // react-table doesn't re-render when options.enableGlobalFilter changes, so for now we force it\n        const currentFilter = instance.getState().globalFilter;\n\n        if (currentFilter) {\n            instance.resetGlobalFilter(true);\n\n            window.requestAnimationFrame(() => {\n                instance.setGlobalFilter(currentFilter);\n            });\n        }\n    }\n\n    // highlighting\n    const [highlightedColumnIndexes, setHighlightedColumnIndexes] = React.useState<number[][]>([]);\n    const [currentHighlightColumnIndex, setCurrentHighlightColumnIndex] = React.useState<number | undefined>(undefined);\n\n    return {\n        isEnabled,\n        // filtering - built-in\n        enableGlobalFilter,\n        setEnableGlobalFilter,\n        // highlighting - custom\n        highlightedColumnIndexes,\n        setHighlightedColumnIndexes,\n        currentHighlightColumnIndex,\n        setCurrentHighlightColumnIndex,\n        handleSearch: isEnabled && typeof onChangeSearch === 'function' ? onChangeSearch : undefined,\n    };\n}\n"],"names":["useTableSearch","isEnabled","onChangeSearch","defaultEnableGlobalFilter","enableGlobalFilter","_setEnableGlobalFilter","React","useState","setEnableGlobalFilter","enabled","instance","currentFilter","getState","globalFilter","resetGlobalFilter","window","requestAnimationFrame","setGlobalFilter","highlightedColumnIndexes","setHighlightedColumnIndexes","currentHighlightColumnIndex","setCurrentHighlightColumnIndex","undefined","handleSearch"],"mappings":";;AAIA;;;;;SAKgBA,cAAcA,CAC1BC,SAAS,GAAG,KAAK,EACjBC,cAA8C,EAC9CC,yBAAyB,GAAG,KAAK;EAEjC,MAAM,CAACC,kBAAkB,EAAEC,sBAAsB,CAAC,GAAGC,cAAK,CAACC,QAAQ,CAAUJ,yBAAyB,CAAC;EAEvG,SAASK,qBAAqBA,CAAkBC,OAAgB,EAAEC,QAAuB;IACrFL,sBAAsB,CAACI,OAAO,CAAC;;IAG/B,MAAME,aAAa,GAAGD,QAAQ,CAACE,QAAQ,EAAE,CAACC,YAAY;IAEtD,IAAIF,aAAa,EAAE;MACfD,QAAQ,CAACI,iBAAiB,CAAC,IAAI,CAAC;MAEhCC,MAAM,CAACC,qBAAqB,CAAC;QACzBN,QAAQ,CAACO,eAAe,CAACN,aAAa,CAAC;OAC1C,CAAC;;;;EAKV,MAAM,CAACO,wBAAwB,EAAEC,2BAA2B,CAAC,GAAGb,cAAK,CAACC,QAAQ,CAAa,EAAE,CAAC;EAC9F,MAAM,CAACa,2BAA2B,EAAEC,8BAA8B,CAAC,GAAGf,cAAK,CAACC,QAAQ,CAAqBe,SAAS,CAAC;EAEnH,OAAO;IACHrB,SAAS;;IAETG,kBAAkB;IAClBI,qBAAqB;;IAErBU,wBAAwB;IACxBC,2BAA2B;IAC3BC,2BAA2B;IAC3BC,8BAA8B;IAC9BE,YAAY,EAAEtB,SAAS,IAAI,OAAOC,cAAc,KAAK,UAAU,GAAGA,cAAc,GAAGoB;GACtF;AACL;;;;"}

package/dist/esm/packages/taco/src/utils/dom.js

@@ -54,10 +54,11 @@ function isElementTriggeredFromContainer(element, container) {
   var _getOverlaySelector, _element$closest;
   const selector = (_getOverlaySelector = getOverlaySelector(element)) !== null && _getOverlaySelector !== void 0 ? _getOverlaySelector : getOverlaySelector((_element$closest = element === null || element === void 0 ? void 0 : element.closest('[role=dialog],[role=menu]')) !== null && _element$closest !== void 0 ? _element$closest : null);
   if (selector) {
-    if (container !== null && container !== void 0 && container.querySelector(selector)) {
+    const escapedSelector = CSS.escape(selector);
+    if (container !== null && container !== void 0 && container.querySelector(escapedSelector)) {
       return true;
     }
-    const elementInDocument = document.querySelector(selector);
+    const elementInDocument = document.querySelector(escapedSelector);
     if (elementInDocument === container) {
       return true;
     }

package/dist/esm/packages/taco/src/utils/dom.js.map

@@ -1 +1 @@
-{"version":3,"file":"dom.js","sources":["../../../../../../src/utils/dom.ts"],"sourcesContent":["// taken from react-aria\nconst FOCUSABLE_ELEMENTS = [\n    '[tabindex]:not([disabled])',\n    'input:not([disabled])',\n    'select:not([disabled])',\n    'textarea:not([disabled])',\n    'button:not([disabled])',\n    'a[href]',\n    'area[href]',\n    'summary',\n    'iframe',\n    'object',\n    'embed',\n    'audio[controls]',\n    'video[controls]',\n    '[contenteditable]',\n    'details:not([disabled])',\n    'summary:not(:disabled)',\n];\n\nexport const hasFocusableElement = (element: HTMLElement | null) => {\n    if (!element) {\n        return null;\n    }\n\n    return !!element.querySelector(FOCUSABLE_ELEMENTS.join(','));\n};\n\nexport const isOverflowing = (element: HTMLElement | null) =>\n    element !== null ? element.scrollWidth > element.offsetWidth : false;\n\nexport const getIndexOfFirstChildOverflowingParent = (element: HTMLElement, overscan = 0) => {\n    let index = 0;\n    let boundaryChildIndex: number | null = null;\n    const clientRect = element.getBoundingClientRect();\n\n    for (const child of Array.from(element.children)) {\n        const right = child.getBoundingClientRect().right - clientRect.left;\n        const width = clientRect.width - overscan;\n\n        if (right > width) {\n            boundaryChildIndex = index;\n            break;\n        }\n        index++;\n    }\n\n    return boundaryChildIndex;\n};\n\nexport const getNextFocussableElement = (currentElement: HTMLElement | null) => {\n    if (!currentElement) {\n        return null;\n    }\n\n    let focussableElements = [...document.querySelectorAll<HTMLElement>(FOCUSABLE_ELEMENTS.join(','))];\n    const currentElementIndex = focussableElements.indexOf(currentElement);\n\n    if (currentElementIndex > -1) {\n        focussableElements = focussableElements\n            .slice(currentElementIndex + 1)\n            .filter(element => element.getAttribute('tabindex') !== '-1');\n\n        if (focussableElements.length) {\n            focussableElements = focussableElements.filter(element => (element as any).checkVisibility?.() ?? true);\n            return focussableElements[0] ?? null;\n        }\n    }\n\n    return null;\n};\n\nconst getOverlaySelector = (element: Element | null) => {\n    switch (element?.getAttribute('role')) {\n        case 'dialog':\n            return `[aria-controls='${element.id}']`;\n\n        case 'menu':\n            return `#${element.getAttribute('aria-labelledby')}`;\n\n        default:\n            return undefined;\n    }\n};\n\nexport function isElementTriggeredFromContainer(element: Element | null, container: Element | null) {\n    const selector = getOverlaySelector(element) ?? getOverlaySelector(element?.closest('[role=dialog],[role=menu]') ?? null);\n\n    if (selector) {\n        if (container?.querySelector(selector)) {\n            return true;\n        }\n\n        const elementInDocument = document.querySelector(selector);\n\n        if (elementInDocument === container) {\n            return true;\n        }\n\n        // if the element does exist, see if it is itself connected to somethng that was triggered from the container\n        if (elementInDocument) {\n            return isElementTriggeredFromContainer(elementInDocument, container);\n        }\n\n        return false;\n    }\n\n    return false;\n}\n\nexport function isElementInsideOrTriggeredFromContainer(element: Element | null, container: Element | null) {\n    return isElementTriggeredFromContainer(element, container) || !!container?.contains(element);\n}\n\nexport function isElementInsideOverlay(element: Element | null) {\n    return !!element?.closest('[role=dialog],[role=menu]');\n}\n\nexport function isSiblingElementInsideSameParentOverlay(element: Element | null, sibling: Element | null) {\n    return !!element?.closest('[role=dialog],[role=menu]')?.contains(sibling);\n}\n\nexport function isElementInteractive(element: Element | null) {\n    if (!element) {\n        return false;\n    }\n\n    const interactiveElements = ['A', 'BUTTON', 'INPUT', 'TEXTAREA', 'SELECT', 'LABEL', 'OPTION'];\n\n    const isInteractive =\n        interactiveElements.includes(element.tagName) &&\n        !(element as HTMLElement).hidden &&\n        !(element as HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement | HTMLButtonElement).disabled &&\n        !(element as HTMLInputElement | HTMLTextAreaElement).readOnly;\n\n    // sometimes buttons contain content like an icon, and we can't rely on pointer events being disabled\n    // so search for a focusable parent\n    if (!isInteractive) {\n        const focusableParent = element.closest(FOCUSABLE_ELEMENTS.join(','));\n        return focusableParent ? interactiveElements.includes(focusableParent.tagName) : false;\n    }\n\n    return isInteractive;\n}\n\nexport function isElementInsideTable3OrReport(element: Element | null) {\n    return !!element?.closest('[data-taco^=table]');\n}\n\nexport function setDataFocusAttribute(target: Element) {\n    target.setAttribute('data-focus', 'programmatic');\n\n    const cleanup = () => {\n        target.removeAttribute('data-focus');\n        target.removeEventListener('blur', cleanup);\n    };\n\n    target.addEventListener('blur', cleanup);\n}\n"],"names":["FOCUSABLE_ELEMENTS","hasFocusableElement","element","querySelector","join","getIndexOfFirstChildOverflowingParent","overscan","index","boundaryChildIndex","clientRect","getBoundingClientRect","child","Array","from","children","right","left","width","getNextFocussableElement","currentElement","focussableElements","document","querySelectorAll","currentElementIndex","indexOf","slice","filter","getAttribute","length","_focussableElements$","_element$checkVisibil","_element$checkVisibil2","checkVisibility","call","getOverlaySelector","id","undefined","isElementTriggeredFromContainer","container","selector","_getOverlaySelector","_element$closest","closest","elementInDocument","isElementInsideOrTriggeredFromContainer","contains","isElementInsideOverlay","isSiblingElementInsideSameParentOverlay","sibling","_element$closest2","isElementInteractive","interactiveElements","isInteractive","includes","tagName","hidden","disabled","readOnly","focusableParent","isElementInsideTable3OrReport","setDataFocusAttribute","target","setAttribute","cleanup","removeAttribute","removeEventListener","addEventListener"],"mappings":"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"}
+{"version":3,"file":"dom.js","sources":["../../../../../../src/utils/dom.ts"],"sourcesContent":["// taken from react-aria\nconst FOCUSABLE_ELEMENTS = [\n    '[tabindex]:not([disabled])',\n    'input:not([disabled])',\n    'select:not([disabled])',\n    'textarea:not([disabled])',\n    'button:not([disabled])',\n    'a[href]',\n    'area[href]',\n    'summary',\n    'iframe',\n    'object',\n    'embed',\n    'audio[controls]',\n    'video[controls]',\n    '[contenteditable]',\n    'details:not([disabled])',\n    'summary:not(:disabled)',\n];\n\nexport const hasFocusableElement = (element: HTMLElement | null) => {\n    if (!element) {\n        return null;\n    }\n\n    return !!element.querySelector(FOCUSABLE_ELEMENTS.join(','));\n};\n\nexport const isOverflowing = (element: HTMLElement | null) =>\n    element !== null ? element.scrollWidth > element.offsetWidth : false;\n\nexport const getIndexOfFirstChildOverflowingParent = (element: HTMLElement, overscan = 0) => {\n    let index = 0;\n    let boundaryChildIndex: number | null = null;\n    const clientRect = element.getBoundingClientRect();\n\n    for (const child of Array.from(element.children)) {\n        const right = child.getBoundingClientRect().right - clientRect.left;\n        const width = clientRect.width - overscan;\n\n        if (right > width) {\n            boundaryChildIndex = index;\n            break;\n        }\n        index++;\n    }\n\n    return boundaryChildIndex;\n};\n\nexport const getNextFocussableElement = (currentElement: HTMLElement | null) => {\n    if (!currentElement) {\n        return null;\n    }\n\n    let focussableElements = [...document.querySelectorAll<HTMLElement>(FOCUSABLE_ELEMENTS.join(','))];\n    const currentElementIndex = focussableElements.indexOf(currentElement);\n\n    if (currentElementIndex > -1) {\n        focussableElements = focussableElements\n            .slice(currentElementIndex + 1)\n            .filter(element => element.getAttribute('tabindex') !== '-1');\n\n        if (focussableElements.length) {\n            focussableElements = focussableElements.filter(element => (element as any).checkVisibility?.() ?? true);\n            return focussableElements[0] ?? null;\n        }\n    }\n\n    return null;\n};\n\nconst getOverlaySelector = (element: Element | null) => {\n    switch (element?.getAttribute('role')) {\n        case 'dialog':\n            return `[aria-controls='${element.id}']`;\n\n        case 'menu':\n            return `#${element.getAttribute('aria-labelledby')}`;\n\n        default:\n            return undefined;\n    }\n};\n\nexport function isElementTriggeredFromContainer(element: Element | null, container: Element | null): boolean {\n    const selector = getOverlaySelector(element) ?? getOverlaySelector(element?.closest('[role=dialog],[role=menu]') ?? null);\n\n    if (selector) {\n        const escapedSelector = CSS.escape(selector);\n\n        if (container?.querySelector(escapedSelector)) {\n            return true;\n        }\n\n        const elementInDocument = document.querySelector(escapedSelector);\n\n        if (elementInDocument === container) {\n            return true;\n        }\n\n        // if the element does exist, see if it is itself connected to somethng that was triggered from the container\n        if (elementInDocument) {\n            return isElementTriggeredFromContainer(elementInDocument, container);\n        }\n\n        return false;\n    }\n\n    return false;\n}\n\nexport function isElementInsideOrTriggeredFromContainer(element: Element | null, container: Element | null) {\n    return isElementTriggeredFromContainer(element, container) || !!container?.contains(element);\n}\n\nexport function isElementInsideOverlay(element: Element | null) {\n    return !!element?.closest('[role=dialog],[role=menu]');\n}\n\nexport function isSiblingElementInsideSameParentOverlay(element: Element | null, sibling: Element | null) {\n    return !!element?.closest('[role=dialog],[role=menu]')?.contains(sibling);\n}\n\nexport function isElementInteractive(element: Element | null) {\n    if (!element) {\n        return false;\n    }\n\n    const interactiveElements = ['A', 'BUTTON', 'INPUT', 'TEXTAREA', 'SELECT', 'LABEL', 'OPTION'];\n\n    const isInteractive =\n        interactiveElements.includes(element.tagName) &&\n        !(element as HTMLElement).hidden &&\n        !(element as HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement | HTMLButtonElement).disabled &&\n        !(element as HTMLInputElement | HTMLTextAreaElement).readOnly;\n\n    // sometimes buttons contain content like an icon, and we can't rely on pointer events being disabled\n    // so search for a focusable parent\n    if (!isInteractive) {\n        const focusableParent = element.closest(FOCUSABLE_ELEMENTS.join(','));\n        return focusableParent ? interactiveElements.includes(focusableParent.tagName) : false;\n    }\n\n    return isInteractive;\n}\n\nexport function isElementInsideTable3OrReport(element: Element | null) {\n    return !!element?.closest('[data-taco^=table]');\n}\n\nexport function setDataFocusAttribute(target: Element) {\n    target.setAttribute('data-focus', 'programmatic');\n\n    const cleanup = () => {\n        target.removeAttribute('data-focus');\n        target.removeEventListener('blur', cleanup);\n    };\n\n    target.addEventListener('blur', cleanup);\n}\n"],"names":["FOCUSABLE_ELEMENTS","hasFocusableElement","element","querySelector","join","getIndexOfFirstChildOverflowingParent","overscan","index","boundaryChildIndex","clientRect","getBoundingClientRect","child","Array","from","children","right","left","width","getNextFocussableElement","currentElement","focussableElements","document","querySelectorAll","currentElementIndex","indexOf","slice","filter","getAttribute","length","_focussableElements$","_element$checkVisibil","_element$checkVisibil2","checkVisibility","call","getOverlaySelector","id","undefined","isElementTriggeredFromContainer","container","selector","_getOverlaySelector","_element$closest","closest","escapedSelector","CSS","escape","elementInDocument","isElementInsideOrTriggeredFromContainer","contains","isElementInsideOverlay","isSiblingElementInsideSameParentOverlay","sibling","_element$closest2","isElementInteractive","interactiveElements","isInteractive","includes","tagName","hidden","disabled","readOnly","focusableParent","isElementInsideTable3OrReport","setDataFocusAttribute","target","setAttribute","cleanup","removeAttribute","removeEventListener","addEventListener"],"mappings":"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"}

package/dist/index.css

@@ -350,6 +350,77 @@
     stroke: currentColor;
 }
 
+/* Base styles */
+[data-taco='checkbox-container'] [data-taco='checkbox'] {
+    @apply border-grey-500;
+}
+
+[data-taco='checkbox-container'][data-focus-visible] [data-taco='checkbox'] {
+    @apply yt-focus;
+}
+
+/* Readonly state */
+[data-taco='checkbox-container'][data-readonly] [data-taco='checkbox'] {
+    @apply cursor-default;
+}
+
+/* Invalid state */
+[data-taco='checkbox-container'][data-invalid] [data-taco='checkbox'] {
+    @apply border-red-500;
+}
+
+/* Selected or indeterminate state */
+[data-taco='checkbox-container'][data-selected] [data-taco='checkbox'],
+[data-taco='checkbox-container'][data-indeterminate] [data-taco='checkbox'] {
+    @apply border-blue-500 bg-blue-500;
+}
+
+/* Selected or indeterminate AND invalid state */
+[data-taco='checkbox-container'][data-selected][data-invalid] [data-taco='checkbox'],
+[data-taco='checkbox-container'][data-indeterminate][data-invalid] [data-taco='checkbox'] {
+    @apply !border-red-500 !bg-red-500;
+}
+
+/* Disabled state */
+[data-taco='checkbox-container'][data-disabled] [data-taco='checkbox'] {
+    @apply border-grey-500/50 cursor-not-allowed;
+}
+
+[data-taco='checkbox-container'][data-disabled][data-invalid] [data-taco='checkbox'] {
+    @apply !border-red-500/50 !bg-red-500/50;
+}
+
+[data-taco='checkbox-container'][data-disabled][data-selected] [data-taco='checkbox'],
+[data-taco='checkbox-container'][data-disabled][data-indeterminate] [data-taco='checkbox'] {
+    @apply !bg-blue-500/50;
+}
+
+[data-taco='checkbox-container'][data-disabled][data-selected][data-invalid] [data-taco='checkbox'],
+[data-taco='checkbox-container'][data-disabled][data-indeterminate][data-invalid] [data-taco='checkbox'] {
+    @apply !bg-red-500/50 text-white;
+}
+
+/* Hover states (separate rules for clarity) */
+[data-taco='checkbox-container']:hover:not([data-disabled]):not([data-readonly]) [data-taco='checkbox'] {
+    @apply border-grey-700;
+}
+
+[data-taco='checkbox-container']:hover[data-selected]:not([data-disabled]):not([data-readonly]) [data-taco='checkbox'],
+[data-taco='checkbox-container']:hover[data-indeterminate]:not([data-disabled]):not([data-readonly]) [data-taco='checkbox'] {
+    @apply !border-blue-700 !bg-blue-700;
+}
+
+[data-taco='checkbox-container']:hover[data-invalid]:not([data-disabled]):not([data-readonly]) [data-taco='checkbox'] {
+    @apply !border-red-700;
+}
+
+[data-taco='checkbox-container']:hover[data-invalid][data-selected]:not([data-disabled]):not([data-readonly])
+    [data-taco='checkbox'],
+[data-taco='checkbox-container']:hover[data-invalid][data-indeterminate]:not([data-disabled]):not([data-readonly])
+    [data-taco='checkbox'] {
+    @apply !border-red-700 !bg-red-700;
+}
+
 [data-taco='scrollable-list'].yt-list--multiselect li:first-child {
     @apply border-grey-100 border-b-2 pl-4; /* Listbox max-height is dependant on this border-bottom-width value! */
 }
@@ -824,7 +895,7 @@ table[data-taco^='table'] td[data-cell-truncate='true'] [data-taco='textarea'] {
     @apply focus:absolute focus:overflow-y-auto;
 }
 
-table[data-taco^='table'] td label {
+table[data-taco^='table'] td label:not([data-taco='checkbox-label']) {
     @apply h-fit !min-h-fit w-full !pb-0;
 }
 
@@ -863,14 +934,14 @@ table[data-taco^='table'][data-table-font-size='small'] td [data-taco='spinner']
     @apply !h-4 !w-4;
 }
 
-table[data-taco^='table'][data-table-font-size='small'] td [data-taco='icon'],
+table[data-taco^='table'][data-table-font-size='small'] td [data-taco='icon']:not([data-taco='checkbox'] *),
 table[data-taco^='table'][data-table-font-size='small'] td [data-taco='spinner'] {
     @apply !-my-[3px];
 }
 
 table[data-taco^='table'][data-table-font-size='small'] td [data-taco='badge'],
 table[data-taco^='table'][data-table-font-size='small'] td [data-taco='badge-icon'],
-table[data-taco^='table'][data-table-font-size='small'] td [data-taco='icon'],
+table[data-taco^='table'][data-table-font-size='small'] td [data-taco='icon']:not([data-taco='checkbox'] *),
 table[data-taco^='table'][data-table-font-size='small'] td [data-taco='spinner'] {
     @apply !-my-0.5 !text-xs;
 }
@@ -999,7 +1070,7 @@ table[data-taco^='table'][data-table-font-size='medium'] td [data-taco='icon-but
     @apply !-my-1.5;
 }
 
-table[data-taco^='table'][data-table-font-size='medium'] td [data-taco='icon'] {
+table[data-taco^='table'][data-table-font-size='medium'] td [data-taco='icon']:not([data-taco='checkbox'] *) {
     @apply !-my-0.5;
 }
 
@@ -1084,7 +1155,7 @@ table[data-taco^='table'][data-table-font-size='large'] td [data-taco='icon-butt
     @apply !-my-1;
 }
 
-table[data-taco^='table'][data-table-font-size='large'] td [data-taco='icon'] {
+table[data-taco^='table'][data-table-font-size='large'] td [data-taco='icon']:not([data-taco='checkbox'] *) {
     @apply !-my-0.5;
 }
 

package/dist/primitives/BubbleSelect.d.ts

@@ -1,2 +1,2 @@
 import React from 'react';
-export declare const BubbleSelect: (props: React.SelectHTMLAttributes<HTMLSelectElement>) => JSX.Element;
+export declare const BubbleSelect: (props: React.SelectHTMLAttributes<HTMLSelectElement>) => React.JSX.Element;

package/dist/primitives/Sortable/components/Container.d.ts

@@ -1,11 +1,11 @@
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { SortableItemId } from './Item';
 export declare type SortableContainerProps = {
     children: ReactNode;
     move?: (activeId: SortableItemId, overId: SortableItemId, listId: string) => void;
     reorder: (activeId: SortableItemId, oldListId: string, listId: string) => void;
 };
-export declare function Container(externalProps: any): JSX.Element;
+export declare function Container(externalProps: any): React.JSX.Element;
 export declare namespace Container {
     var displayName: string;
 }

package/dist/primitives/Sortable/components/Item.d.ts

@@ -5,7 +5,7 @@ export declare type SortableListItemProps = Omit<React.HTMLAttributes<HTMLDivEle
     id: SortableItemId;
     asChild: boolean;
 };
-export declare function Item(props: SortableListItemProps): JSX.Element;
+export declare function Item(props: SortableListItemProps): React.JSX.Element;
 export declare namespace Item {
     var displayName: string;
 }

package/dist/primitives/Sortable/components/List.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 export declare type SortableListProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'id'> & {
     id: string;
 };
-export declare function List(externalProps: SortableListProps): JSX.Element;
+export declare function List(externalProps: SortableListProps): React.JSX.Element;
 export declare namespace List {
     var displayName: string;
 }

package/dist/primitives/Table/Core/Table.d.ts

@@ -5,7 +5,7 @@ import './style.css';
 declare type TableProps = {
     children: JSX.Element | Array<JSX.Element | null>;
 };
-export declare function Table(props: TableProps): JSX.Element;
+export declare function Table(props: TableProps): React.JSX.Element;
 export declare namespace Table {
     var Toolbar: typeof TableToolbar;
     var Grid: typeof TableGrid;
@@ -16,5 +16,5 @@ export declare type TableGridProps<TType = unknown> = React.TableHTMLAttributes<
     footerRows?: null | JSX.Element | JSX.Element[];
     table: useTableReturnValue<TType>;
 };
-export declare function TableGrid<TType = unknown>(props: TableGridProps<TType>): JSX.Element;
+export declare function TableGrid<TType = unknown>(props: TableGridProps<TType>): React.JSX.Element;
 export {};

package/dist/primitives/Table/Core/components/Body/Body.d.ts

@@ -7,5 +7,5 @@ declare type BodyProps<TType = unknown> = React.HTMLAttributes<HTMLTableSectionE
     table: ReactTable<TType>;
     tableElement: TableRef | null;
 };
-export declare function Body<TType = unknown>(props: BodyProps<TType>): JSX.Element;
+export declare function Body<TType = unknown>(props: BodyProps<TType>): React.JSX.Element;
 export {};

package/dist/primitives/Table/Core/components/Body/EmptyStateBody.d.ts

@@ -5,5 +5,5 @@ declare type EmptyStateProps = React.HTMLAttributes<HTMLTableSectionElement> & {
     isReady: boolean;
     reason: TableEmptyStateReason;
 };
-export declare function EmptyStateBody(props: EmptyStateProps): JSX.Element;
+export declare function EmptyStateBody(props: EmptyStateProps): React.JSX.Element;
 export {};

package/dist/primitives/Table/Core/components/Body/util.d.ts

@@ -1,6 +1,6 @@
 export declare function useAugmentedFocusManager(): {
-    focusPrevious: (arrowNavigation?: boolean) => import("@react-types/shared").FocusableElement;
-    focusNext: (arrowNavigation?: boolean) => import("@react-types/shared").FocusableElement;
-    focusFirst: () => import("@react-types/shared").FocusableElement;
-    focusLast: () => import("@react-types/shared").FocusableElement;
+    focusPrevious: (arrowNavigation?: boolean) => import("@react-types/shared").FocusableElement | null | undefined;
+    focusNext: (arrowNavigation?: boolean) => import("@react-types/shared").FocusableElement | null | undefined;
+    focusFirst: () => import("@react-types/shared").FocusableElement | null | undefined;
+    focusLast: () => import("@react-types/shared").FocusableElement | null | undefined;
 };

package/dist/primitives/Table/Core/components/Columns/Cell/BuiltIns/DisplayCell.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import React from 'react';
 import { TableCellRendererProps } from '../../../../types';
-export declare function DisplayCell<TType = unknown>(props: TableCellRendererProps<TType>): JSX.Element;
+export declare function DisplayCell<TType = unknown>(props: TableCellRendererProps<TType>): React.JSX.Element;

package/dist/primitives/Table/Core/components/Columns/Cell/BuiltIns/GroupedCell.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import React from 'react';
 import { TableCellRendererProps } from '../../../../types';
-export declare function GroupedCell<TType = unknown>(props: TableCellRendererProps<TType>): JSX.Element;
+export declare function GroupedCell<TType = unknown>(props: TableCellRendererProps<TType>): React.JSX.Element;

package/dist/primitives/Table/Core/components/Columns/Cell/Cell.d.ts

@@ -6,5 +6,5 @@ declare type CellProps<TType = unknown> = React.HTMLAttributes<HTMLTableCellElem
     index: number;
     renderer: TableCellRenderer<TType>;
 };
-export declare function Cell<TType = unknown>(props: CellProps<TType>): JSX.Element | null;
+export declare function Cell<TType = unknown>(props: CellProps<TType>): React.JSX.Element | null;
 export {};

package/dist/primitives/Table/Core/components/Columns/Internal/Actions.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { Table as ReactTable } from '@tanstack/react-table';
 import { useTableManagerInternalColumn } from '../../../../useTableManager/types';
 import { TableRowActionRenderer } from '../../../../types';
@@ -10,5 +10,5 @@ export declare type ActionsProps<TType = unknown> = {
     rowId: string;
     table: ReactTable<TType>;
 };
-export declare function Actions<TType = unknown>(props: ActionsProps<TType>): JSX.Element;
+export declare function Actions<TType = unknown>(props: ActionsProps<TType>): React.JSX.Element;
 export declare const renderer: useTableManagerInternalColumn;

package/dist/primitives/Table/Core/components/Footer/Footer.d.ts

@@ -3,12 +3,12 @@ import { Header as ReactTableHeader, Table as ReactTable } from '@tanstack/react
 export declare type FootProps<TType = unknown> = React.HTMLAttributes<HTMLTableSectionElement> & {
     table: ReactTable<TType>;
 };
-export declare function Foot<TType = unknown>(props: FootProps<TType>): JSX.Element;
+export declare function Foot<TType = unknown>(props: FootProps<TType>): React.JSX.Element;
 export declare type FooterProps<TType = unknown> = {
     header: ReactTableHeader<TType, unknown>;
     showSummary: boolean;
 };
-export declare function Footer<TType = unknown>(props: FooterProps<TType>): JSX.Element;
+export declare function Footer<TType = unknown>(props: FooterProps<TType>): React.JSX.Element;
 export declare type MemoedFooterProps<TType = unknown> = {
     footer: ReactTableHeader<TType, unknown>;
     showSummary: boolean;

package/dist/primitives/Table/Core/components/Footer/Summary.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import React from 'react';
 import { Table as ReactTable } from '@tanstack/react-table';
 export declare type FooterSummaryProps<TType = unknown> = {
     table: ReactTable<TType>;
 };
-export declare function Summary<TType = unknown>(props: FooterSummaryProps<TType>): JSX.Element;
+export declare function Summary<TType = unknown>(props: FooterSummaryProps<TType>): React.JSX.Element;

package/dist/primitives/Table/Core/components/Header/Header.d.ts

@@ -5,7 +5,7 @@ export declare type HeaderProps<TType = unknown> = {
     header: ReactTableHeader<TType, unknown>;
     scrollToIndex: (index: number) => void;
 };
-export declare function Header<TType = unknown>(props: HeaderProps<TType>): JSX.Element | null;
+export declare function Header<TType = unknown>(props: HeaderProps<TType>): React.JSX.Element | null;
 export declare type MemoedHeaderProps = {
     align?: TableColumnAlignment;
     canFilter: boolean;

package/dist/primitives/Table/Core/components/Header/components/Goto.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import React from 'react';
 import { PopoverProps } from '../../../../../../components/Popover/Popover';
 export declare type GotoProps = PopoverProps & {
     onGoto: (query: string) => Promise<void>;
 };
-export declare function GotoPopover(props: GotoProps): JSX.Element;
+export declare function GotoPopover(props: GotoProps): React.JSX.Element;

package/dist/primitives/Table/Core/components/Header/components/Menu.d.ts

@@ -19,4 +19,4 @@ export declare type HeaderMenuProps = React.ButtonHTMLAttributes<HTMLButtonEleme
     setRowActiveIndex: (index: number) => void;
     sortDirection?: TableColumnSortDirection | false;
 };
-export declare function HeaderMenu(props: HeaderMenuProps): JSX.Element;
+export declare function HeaderMenu(props: HeaderMenuProps): React.JSX.Element;

package/dist/primitives/Table/Core/components/Header/components/Resizer.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { TableColumnWidth } from '../../../../types';
 declare type ResizerProps = {
     headerRef: HTMLTableCellElement | null;
@@ -9,5 +9,5 @@ declare type ResizerProps = {
     setColumnSizing: any;
     width?: TableColumnWidth;
 };
-export declare function Resizer(props: ResizerProps): JSX.Element;
+export declare function Resizer(props: ResizerProps): React.JSX.Element;
 export {};

package/dist/primitives/Table/Core/components/Header/components/SortIndicator.d.ts

@@ -3,7 +3,7 @@ import { TableColumnSortDirection } from '../../../../types';
 declare type SortIndicatorProps = {
     direction: false | TableColumnSortDirection;
 };
-export declare function SortIndicator(props: SortIndicatorProps): JSX.Element;
+export declare function SortIndicator(props: SortIndicatorProps): React.JSX.Element;
 export declare const getAriaSort: (direction: TableColumnSortDirection) => "ascending" | "descending";
 export declare function getSortAttributes(canSort: boolean, toggleSorting?: (event: unknown) => void, sortDirection?: false | TableColumnSortDirection): {
     'aria-sort'?: undefined;

package/dist/primitives/Table/Core/components/Row/BuiltIns/SkeletonRow.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
+import React from 'react';
 import { Table as ReactTable } from '@tanstack/react-table';
 export declare type RowProps<TType = unknown> = {
     index: number;
     scrollDirection: 'forward' | 'backward' | undefined;
     table: ReactTable<TType>;
 };
-export declare function SkeletonRow<TType = unknown>(props: RowProps<TType>): JSX.Element;
+export declare function SkeletonRow<TType = unknown>(props: RowProps<TType>): React.JSX.Element;

package/dist/primitives/Table/Core/components/Row/Row.d.ts

@@ -5,4 +5,4 @@ export declare type RowProps<TType = unknown> = React.HTMLAttributes<HTMLTableRo
     scrollDirection?: 'forward' | 'backward';
     skipPageLoading?: boolean;
 };
-export declare function Row<TType = unknown>(props: RowProps<TType>): JSX.Element;
+export declare function Row<TType = unknown>(props: RowProps<TType>): React.JSX.Element;

package/dist/primitives/Table/Core/components/Toolbar/Toolbar.d.ts

@@ -4,4 +4,4 @@ export declare type TableToolbarProps<TType = unknown> = React.HTMLAttributes<HT
     children?: JSX.Element | null;
     table: useTableReturnValue<TType>;
 };
-export declare function TableToolbar<TType = unknown>(props: TableToolbarProps<TType>): JSX.Element | null;
+export declare function TableToolbar<TType = unknown>(props: TableToolbarProps<TType>): React.JSX.Element | null;

package/dist/primitives/Table/Core/components/Toolbar/components/Filters/Filters.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import React from 'react';
 import { Table as ReactTable } from '@tanstack/react-table';
 export declare type FiltersProps<TType = unknown> = {
     length: number;
     table: ReactTable<TType>;
 };
-export declare function Filters<TType = unknown>(props: FiltersProps<TType>): JSX.Element;
+export declare function Filters<TType = unknown>(props: FiltersProps<TType>): React.JSX.Element;

package/dist/primitives/Table/Core/components/Toolbar/components/Filters/ManageFiltersPopover.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import React from 'react';
 import { Table as ReactTable } from '@tanstack/react-table';
 export declare type ManageFiltersPopoverProps<TType = unknown> = {
     length: number;
     table: ReactTable<TType>;
 };
-export declare function ManageFiltersPopover<TType = unknown>(props: ManageFiltersPopoverProps<TType>): JSX.Element;
+export declare function ManageFiltersPopover<TType = unknown>(props: ManageFiltersPopoverProps<TType>): React.JSX.Element;

package/dist/primitives/Table/Core/components/Toolbar/components/Filters/components/Filter.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { Column as ReactTableColumn } from '@tanstack/react-table';
 import { TableFilter } from '../../../../../../types';
 export declare type FilterProps<TType = unknown> = {
@@ -8,4 +8,4 @@ export declare type FilterProps<TType = unknown> = {
     onChange: (position: number, value: TableFilter) => void;
     onRemove?: (position: number) => void;
 };
-export declare function Filter<TType = unknown>(props: FilterProps<TType>): JSX.Element;
+export declare function Filter<TType = unknown>(props: FilterProps<TType>): React.JSX.Element;