@economic/taco 1.41.0 → 2.0.0-alpha.5

package/dist/esm/packages/taco/src/components/Table3/hooks/listeners/useSearchStateListener.js

@@ -0,0 +1,51 @@
+import React__default from 'react';
+import { _finallyRethrows } from '../../../../../../../node_modules/babel-plugin-transform-async-to-promises/helpers.mjs.js';
+import { useLazyEffect } from '../../../../hooks/useLazyEffect.js';
+
+// we use a listener, and not the internal "controlled" change handlers because we don't actually want consumers
+// to control the state outside the table. this listener is really here to let the consumer make a server request
+// and provide the server with the search state, so that it can search server side
+function useSearchStateListener(table, onSearch) {
+  const tableMeta = table.options.meta;
+  const rows = table.getRowModel().rows;
+  const loadingRef = React__default.useRef(false);
+  const lastUsedExcludeRef = React__default.useRef(tableMeta.search.excludeUnmatchedResults);
+  const handleSearch = function (query, excludeUnmatchedResults) {
+    try {
+      const _temp4 = function () {
+        if (tableMeta.search.isEnabled && !loadingRef.current) {
+          function _temp3() {
+            if (excludeUnmatchedResults && table.options.enableRowSelection) {
+              table.resetRowSelection();
+            }
+          }
+          const _temp2 = function () {
+            if (typeof onSearch === 'function' && (excludeUnmatchedResults || lastUsedExcludeRef.current)) {
+              const _temp = _finallyRethrows(function () {
+                loadingRef.current = true;
+                // if we are transitioning from true to false on exclude, then we need to "reset" by searching with no value
+                return Promise.resolve(onSearch(!excludeUnmatchedResults && lastUsedExcludeRef.current ? undefined : query)).then(function () {});
+              }, function (_wasThrown, _result) {
+                loadingRef.current = false;
+                lastUsedExcludeRef.current = excludeUnmatchedResults;
+                if (_wasThrown) throw _result;
+                return _result;
+              });
+              if (_temp && _temp.then) return _temp.then(function () {});
+            }
+          }();
+          return _temp2 && _temp2.then ? _temp2.then(_temp3) : _temp3(_temp2);
+        }
+      }();
+      return Promise.resolve(_temp4 && _temp4.then ? _temp4.then(function () {}) : void 0);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  useLazyEffect(() => {
+    handleSearch(tableMeta.search.query, tableMeta.search.excludeUnmatchedResults);
+  }, [tableMeta.search.isEnabled, tableMeta.search.query, tableMeta.search.excludeUnmatchedResults, rows.length]);
+}
+
+export { useSearchStateListener };
+//# sourceMappingURL=useSearchStateListener.js.map

package/dist/esm/packages/taco/src/components/Table3/hooks/listeners/useSearchStateListener.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSearchStateListener.js","sources":["../../../../../../../../../src/components/Table3/hooks/listeners/useSearchStateListener.ts"],"sourcesContent":["import React from 'react';\nimport { Table as RTable, TableMeta } from '@tanstack/react-table';\nimport { Table3SearchHandler } from '../../types';\nimport { useLazyEffect } from '../../../../hooks/useLazyEffect';\n\n// we use a listener, and not the internal \"controlled\" change handlers because we don't actually want consumers\n// to control the state outside the table. this listener is really here to let the consumer make a server request\n// and provide the server with the search state, so that it can search server side\nexport function useSearchStateListener<TType = unknown>(table: RTable<TType>, onSearch?: Table3SearchHandler) {\n    const tableMeta = table.options.meta as TableMeta<TType>;\n    const rows = table.getRowModel().rows;\n    const loadingRef = React.useRef(false);\n    const lastUsedExcludeRef = React.useRef(tableMeta.search.excludeUnmatchedResults);\n\n    const handleSearch = async (query: string | undefined, excludeUnmatchedResults: boolean) => {\n        if (tableMeta.search.isEnabled && !loadingRef.current) {\n            if (typeof onSearch === 'function' && (excludeUnmatchedResults || lastUsedExcludeRef.current)) {\n                try {\n                    loadingRef.current = true;\n                    // if we are transitioning from true to false on exclude, then we need to \"reset\" by searching with no value\n                    await onSearch(!excludeUnmatchedResults && lastUsedExcludeRef.current ? undefined : query);\n                } finally {\n                    loadingRef.current = false;\n                    lastUsedExcludeRef.current = excludeUnmatchedResults;\n                }\n            }\n\n            if (excludeUnmatchedResults && table.options.enableRowSelection) {\n                table.resetRowSelection();\n            }\n        }\n    };\n\n    useLazyEffect(() => {\n        handleSearch(tableMeta.search.query, tableMeta.search.excludeUnmatchedResults);\n    }, [tableMeta.search.isEnabled, tableMeta.search.query, tableMeta.search.excludeUnmatchedResults, rows.length]);\n}\n"],"names":["useSearchStateListener","table","onSearch","tableMeta","options","meta","rows","getRowModel","loadingRef","React","useRef","lastUsedExcludeRef","search","excludeUnmatchedResults","handleSearch","query","isEnabled","current","enableRowSelection","resetRowSelection","undefined","useLazyEffect","length"],"mappings":";;;;AAKA;AACA;AACA;SACgBA,sBAAsB,CAAkBC,KAAoB,EAAEC,QAA8B;EACxG,MAAMC,SAAS,GAAGF,KAAK,CAACG,OAAO,CAACC,IAAwB;EACxD,MAAMC,IAAI,GAAGL,KAAK,CAACM,WAAW,EAAE,CAACD,IAAI;EACrC,MAAME,UAAU,GAAGC,cAAK,CAACC,MAAM,CAAC,KAAK,CAAC;EACtC,MAAMC,kBAAkB,GAAGF,cAAK,CAACC,MAAM,CAACP,SAAS,CAACS,MAAM,CAACC,uBAAuB,CAAC;EAEjF,MAAMC,YAAY,aAAUC,KAAyB,EAAEF,uBAAgC;IAAA;;YAC/EV,SAAS,CAACS,MAAM,CAACI,SAAS,IAAI,CAACR,UAAU,CAACS,OAAO;UAAA;YAAA,IAY7CJ,uBAAuB,IAAIZ,KAAK,CAACG,OAAO,CAACc,kBAAkB;cAC3DjB,KAAK,CAACkB,iBAAiB,EAAE;;;UAAC;YAAA,IAZ1B,OAAOjB,QAAQ,KAAK,UAAU,KAAKW,uBAAuB,IAAIF,kBAAkB,CAACM,OAAO,CAAC;cAAA,2CACrF;gBACAT,UAAU,CAACS,OAAO,GAAG,IAAI;;gBACzB,uBACMf,QAAQ,CAAC,CAACW,uBAAuB,IAAIF,kBAAkB,CAACM,OAAO,GAAGG,SAAS,GAAGL,KAAK,CAAC;eAC7F;gBACGP,UAAU,CAACS,OAAO,GAAG,KAAK;gBAC1BN,kBAAkB,CAACM,OAAO,GAAGJ,uBAAuB;gBAAC;gBAAA;;cAAA;;;UAAA;;;MAAA;KAQpE;MAAA;;;EAEDQ,aAAa,CAAC;IACVP,YAAY,CAACX,SAAS,CAACS,MAAM,CAACG,KAAK,EAAEZ,SAAS,CAACS,MAAM,CAACC,uBAAuB,CAAC;GACjF,EAAE,CAACV,SAAS,CAACS,MAAM,CAACI,SAAS,EAAEb,SAAS,CAACS,MAAM,CAACG,KAAK,EAAEZ,SAAS,CAACS,MAAM,CAACC,uBAAuB,EAAEP,IAAI,CAACgB,MAAM,CAAC,CAAC;AACnH;;;;"}

package/dist/esm/packages/taco/src/components/Table3/hooks/listeners/useServerLoadingListener.js

@@ -0,0 +1,16 @@
+import React__default from 'react';
+
+function useServerLoadingListener(table, loadPage) {
+  const sorting = table.getState().sorting;
+  const columnFilters = table.getState().columnFilters;
+  const search = table.getState().globalFilter;
+  // trigger load of the first page on mount
+  React__default.useEffect(() => {
+    if (loadPage) {
+      loadPage(0, sorting, columnFilters, search);
+    }
+  }, []);
+}
+
+export { useServerLoadingListener };
+//# sourceMappingURL=useServerLoadingListener.js.map

package/dist/esm/packages/taco/src/components/Table3/hooks/listeners/useServerLoadingListener.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useServerLoadingListener.js","sources":["../../../../../../../../../src/components/Table3/hooks/listeners/useServerLoadingListener.ts"],"sourcesContent":["import React from 'react';\nimport { Table as RTable } from '@tanstack/react-table';\nimport { Table3LoadPageHandler } from '../../types';\n\nexport function useServerLoadingListener<TType = unknown>(table: RTable<TType>, loadPage?: Table3LoadPageHandler) {\n    const sorting = table.getState().sorting;\n    const columnFilters = table.getState().columnFilters;\n    const search = table.getState().globalFilter;\n\n    // trigger load of the first page on mount\n    React.useEffect(() => {\n        if (loadPage) {\n            loadPage(0, sorting, columnFilters, search);\n        }\n    }, []);\n}\n"],"names":["useServerLoadingListener","table","loadPage","sorting","getState","columnFilters","search","globalFilter","React","useEffect"],"mappings":";;SAIgBA,wBAAwB,CAAkBC,KAAoB,EAAEC,QAAgC;EAC5G,MAAMC,OAAO,GAAGF,KAAK,CAACG,QAAQ,EAAE,CAACD,OAAO;EACxC,MAAME,aAAa,GAAGJ,KAAK,CAACG,QAAQ,EAAE,CAACC,aAAa;EACpD,MAAMC,MAAM,GAAGL,KAAK,CAACG,QAAQ,EAAE,CAACG,YAAY;;EAG5CC,cAAK,CAACC,SAAS,CAAC;IACZ,IAAIP,QAAQ,EAAE;MACVA,QAAQ,CAAC,CAAC,EAAEC,OAAO,EAAEE,aAAa,EAAEC,MAAM,CAAC;;GAElD,EAAE,EAAE,CAAC;AACV;;;;"}

package/dist/esm/packages/taco/src/components/Table3/hooks/listeners/useSettingsStateListener.js

@@ -0,0 +1,26 @@
+import React__default from 'react';
+
+function useSettingsStateListener(table, onChangeSettings) {
+  const meta = table.options.meta;
+  const state = table.getState();
+  React__default.useEffect(() => {
+    let handler;
+    if (typeof onChangeSettings === 'function') {
+      handler = setTimeout(() => onChangeSettings({
+        columnFreezingIndex: meta.columnFreezing.frozenColumnIndex,
+        columnOrder: state.columnOrder,
+        columnPinning: state.columnPinning,
+        columnSizing: state.columnSizing,
+        columnVisibility: state.columnVisibility,
+        excludeUnmatchedRecordsInSearch: meta.search.excludeUnmatchedResults,
+        fontSize: meta.fontSize.size,
+        rowHeight: meta.rowHeight.height,
+        sorting: state.sorting
+      }), 250);
+    }
+    return () => clearTimeout(handler);
+  }, [onChangeSettings, state.columnFilters, state.columnOrder, state.columnPinning, state.columnSizing, state.columnVisibility, meta.columnFreezing.frozenColumnIndex, meta.search.excludeUnmatchedResults, meta.fontSize.size, meta.rowHeight.height, state.sorting]);
+}
+
+export { useSettingsStateListener };
+//# sourceMappingURL=useSettingsStateListener.js.map

package/dist/esm/packages/taco/src/components/Table3/hooks/listeners/useSettingsStateListener.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSettingsStateListener.js","sources":["../../../../../../../../../src/components/Table3/hooks/listeners/useSettingsStateListener.ts"],"sourcesContent":["import React from 'react';\nimport { Table as RTable, TableMeta } from '@tanstack/react-table';\nimport { Table3SettingsAdapter } from '../../types';\n\nexport function useSettingsStateListener<TType = unknown>(\n    table: RTable<TType>,\n    onChangeSettings: Table3SettingsAdapter | undefined\n) {\n    const meta = table.options.meta as TableMeta<TType>;\n    const state = table.getState();\n\n    React.useEffect(() => {\n        let handler;\n\n        if (typeof onChangeSettings === 'function') {\n            handler = setTimeout(\n                () =>\n                    onChangeSettings({\n                        columnFreezingIndex: meta.columnFreezing.frozenColumnIndex,\n                        columnOrder: state.columnOrder,\n                        columnPinning: state.columnPinning,\n                        columnSizing: state.columnSizing,\n                        columnVisibility: state.columnVisibility,\n                        excludeUnmatchedRecordsInSearch: meta.search.excludeUnmatchedResults,\n                        fontSize: meta.fontSize.size,\n                        rowHeight: meta.rowHeight.height,\n                        sorting: state.sorting,\n                    }),\n                250\n            );\n        }\n\n        return () => clearTimeout(handler);\n    }, [\n        onChangeSettings,\n        state.columnFilters,\n        state.columnOrder,\n        state.columnPinning,\n        state.columnSizing,\n        state.columnVisibility,\n        meta.columnFreezing.frozenColumnIndex,\n        meta.search.excludeUnmatchedResults,\n        meta.fontSize.size,\n        meta.rowHeight.height,\n        state.sorting,\n    ]);\n}\n"],"names":["useSettingsStateListener","table","onChangeSettings","meta","options","state","getState","React","useEffect","handler","setTimeout","columnFreezingIndex","columnFreezing","frozenColumnIndex","columnOrder","columnPinning","columnSizing","columnVisibility","excludeUnmatchedRecordsInSearch","search","excludeUnmatchedResults","fontSize","size","rowHeight","height","sorting","clearTimeout","columnFilters"],"mappings":";;SAIgBA,wBAAwB,CACpCC,KAAoB,EACpBC,gBAAmD;EAEnD,MAAMC,IAAI,GAAGF,KAAK,CAACG,OAAO,CAACD,IAAwB;EACnD,MAAME,KAAK,GAAGJ,KAAK,CAACK,QAAQ,EAAE;EAE9BC,cAAK,CAACC,SAAS,CAAC;IACZ,IAAIC,OAAO;IAEX,IAAI,OAAOP,gBAAgB,KAAK,UAAU,EAAE;MACxCO,OAAO,GAAGC,UAAU,CAChB,MACIR,gBAAgB,CAAC;QACbS,mBAAmB,EAAER,IAAI,CAACS,cAAc,CAACC,iBAAiB;QAC1DC,WAAW,EAAET,KAAK,CAACS,WAAW;QAC9BC,aAAa,EAAEV,KAAK,CAACU,aAAa;QAClCC,YAAY,EAAEX,KAAK,CAACW,YAAY;QAChCC,gBAAgB,EAAEZ,KAAK,CAACY,gBAAgB;QACxCC,+BAA+B,EAAEf,IAAI,CAACgB,MAAM,CAACC,uBAAuB;QACpEC,QAAQ,EAAElB,IAAI,CAACkB,QAAQ,CAACC,IAAI;QAC5BC,SAAS,EAAEpB,IAAI,CAACoB,SAAS,CAACC,MAAM;QAChCC,OAAO,EAAEpB,KAAK,CAACoB;OAClB,CAAC,EACN,GAAG,CACN;;IAGL,OAAO,MAAMC,YAAY,CAACjB,OAAO,CAAC;GACrC,EAAE,CACCP,gBAAgB,EAChBG,KAAK,CAACsB,aAAa,EACnBtB,KAAK,CAACS,WAAW,EACjBT,KAAK,CAACU,aAAa,EACnBV,KAAK,CAACW,YAAY,EAClBX,KAAK,CAACY,gBAAgB,EACtBd,IAAI,CAACS,cAAc,CAACC,iBAAiB,EACrCV,IAAI,CAACgB,MAAM,CAACC,uBAAuB,EACnCjB,IAAI,CAACkB,QAAQ,CAACC,IAAI,EAClBnB,IAAI,CAACoB,SAAS,CAACC,MAAM,EACrBnB,KAAK,CAACoB,OAAO,CAChB,CAAC;AACN;;;;"}

package/dist/esm/packages/taco/src/components/Table3/hooks/listeners/useShortcutsListener.js

@@ -0,0 +1,49 @@
+import React__default from 'react';
+import { createShortcutKeyDownHandler } from '../../../../utils/keyboard.js';
+
+function useShortcutsListener(table, shortcuts) {
+  const meta = table.options.meta;
+  const rows = table.getRowModel().rows;
+  React__default.useEffect(() => {
+    const shortcutKeys = Object.keys(shortcuts !== null && shortcuts !== void 0 ? shortcuts : {});
+    const globalHandlers = [];
+    // convert the shortcut into the correct format to register it
+    if (shortcuts && shortcutKeys.length) {
+      const currentRow = rows[meta.currentRow.currentRowIndex];
+      shortcutKeys.forEach(key => {
+        const handler = shortcuts[key];
+        let keyDownHandler;
+        let keyDownHandlerOptions;
+        if (typeof handler === 'function') {
+          keyDownHandler = handler;
+          keyDownHandlerOptions = {
+            key
+          };
+        } else {
+          const handlerObject = handler;
+          keyDownHandler = handlerObject.handler;
+          keyDownHandlerOptions = {
+            key,
+            meta: handlerObject.meta,
+            shift: handlerObject.shift
+          };
+        }
+        globalHandlers.push(createShortcutKeyDownHandler(keyDownHandlerOptions, event => {
+          event.preventDefault();
+          keyDownHandler(currentRow === null || currentRow === void 0 ? void 0 : currentRow.original);
+        }));
+      });
+    }
+    globalHandlers.forEach(handler => {
+      document.addEventListener('keydown', handler);
+    });
+    return () => {
+      globalHandlers.forEach(handler => {
+        document.removeEventListener('keydown', handler);
+      });
+    };
+  }, [shortcuts, meta.currentRow.currentRowIndex, rows.length]);
+}
+
+export { useShortcutsListener };
+//# sourceMappingURL=useShortcutsListener.js.map

package/dist/esm/packages/taco/src/components/Table3/hooks/listeners/useShortcutsListener.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useShortcutsListener.js","sources":["../../../../../../../../../src/components/Table3/hooks/listeners/useShortcutsListener.ts"],"sourcesContent":["import React from 'react';\nimport { TableMeta, Table as RTable } from '@tanstack/react-table';\nimport { KeyDownHandlerOptions, createShortcutKeyDownHandler } from '../../../../utils/keyboard';\nimport { Table3ShortcutHandlerObject, Table3Shortcuts } from '../../types';\n\nexport function useShortcutsListener<TType = unknown>(table: RTable<TType>, shortcuts: Table3Shortcuts<TType> | undefined) {\n    const meta = table.options.meta as TableMeta<TType>;\n    const rows = table.getRowModel().rows;\n\n    React.useEffect(() => {\n        const shortcutKeys = Object.keys(shortcuts ?? {});\n        const globalHandlers: Array<(event: KeyboardEvent) => void> = [];\n\n        // convert the shortcut into the correct format to register it\n        if (shortcuts && shortcutKeys.length) {\n            const currentRow = rows[meta.currentRow.currentRowIndex];\n\n            shortcutKeys.forEach(key => {\n                const handler = shortcuts[key];\n\n                let keyDownHandler;\n                let keyDownHandlerOptions: KeyDownHandlerOptions;\n\n                if (typeof handler === 'function') {\n                    keyDownHandler = handler;\n                    keyDownHandlerOptions = {\n                        key,\n                    };\n                } else {\n                    const handlerObject = handler as Table3ShortcutHandlerObject<TType>;\n                    keyDownHandler = handlerObject.handler;\n                    keyDownHandlerOptions = {\n                        key,\n                        meta: handlerObject.meta,\n                        shift: handlerObject.shift,\n                    };\n                }\n\n                globalHandlers.push(\n                    createShortcutKeyDownHandler(keyDownHandlerOptions, event => {\n                        event.preventDefault();\n                        keyDownHandler(currentRow?.original);\n                    })\n                );\n            });\n        }\n\n        globalHandlers.forEach(handler => {\n            document.addEventListener('keydown', handler);\n        });\n\n        return () => {\n            globalHandlers.forEach(handler => {\n                document.removeEventListener('keydown', handler);\n            });\n        };\n    }, [shortcuts, meta.currentRow.currentRowIndex, rows.length]);\n}\n"],"names":["useShortcutsListener","table","shortcuts","meta","options","rows","getRowModel","React","useEffect","shortcutKeys","Object","keys","globalHandlers","length","currentRow","currentRowIndex","forEach","key","handler","keyDownHandler","keyDownHandlerOptions","handlerObject","shift","push","createShortcutKeyDownHandler","event","preventDefault","original","document","addEventListener","removeEventListener"],"mappings":";;;SAKgBA,oBAAoB,CAAkBC,KAAoB,EAAEC,SAA6C;EACrH,MAAMC,IAAI,GAAGF,KAAK,CAACG,OAAO,CAACD,IAAwB;EACnD,MAAME,IAAI,GAAGJ,KAAK,CAACK,WAAW,EAAE,CAACD,IAAI;EAErCE,cAAK,CAACC,SAAS,CAAC;IACZ,MAAMC,YAAY,GAAGC,MAAM,CAACC,IAAI,CAACT,SAAS,aAATA,SAAS,cAATA,SAAS,GAAI,EAAE,CAAC;IACjD,MAAMU,cAAc,GAA0C,EAAE;;IAGhE,IAAIV,SAAS,IAAIO,YAAY,CAACI,MAAM,EAAE;MAClC,MAAMC,UAAU,GAAGT,IAAI,CAACF,IAAI,CAACW,UAAU,CAACC,eAAe,CAAC;MAExDN,YAAY,CAACO,OAAO,CAACC,GAAG;QACpB,MAAMC,OAAO,GAAGhB,SAAS,CAACe,GAAG,CAAC;QAE9B,IAAIE,cAAc;QAClB,IAAIC,qBAA4C;QAEhD,IAAI,OAAOF,OAAO,KAAK,UAAU,EAAE;UAC/BC,cAAc,GAAGD,OAAO;UACxBE,qBAAqB,GAAG;YACpBH;WACH;SACJ,MAAM;UACH,MAAMI,aAAa,GAAGH,OAA6C;UACnEC,cAAc,GAAGE,aAAa,CAACH,OAAO;UACtCE,qBAAqB,GAAG;YACpBH,GAAG;YACHd,IAAI,EAAEkB,aAAa,CAAClB,IAAI;YACxBmB,KAAK,EAAED,aAAa,CAACC;WACxB;;QAGLV,cAAc,CAACW,IAAI,CACfC,4BAA4B,CAACJ,qBAAqB,EAAEK,KAAK;UACrDA,KAAK,CAACC,cAAc,EAAE;UACtBP,cAAc,CAACL,UAAU,aAAVA,UAAU,uBAAVA,UAAU,CAAEa,QAAQ,CAAC;SACvC,CAAC,CACL;OACJ,CAAC;;IAGNf,cAAc,CAACI,OAAO,CAACE,OAAO;MAC1BU,QAAQ,CAACC,gBAAgB,CAAC,SAAS,EAAEX,OAAO,CAAC;KAChD,CAAC;IAEF,OAAO;MACHN,cAAc,CAACI,OAAO,CAACE,OAAO;QAC1BU,QAAQ,CAACE,mBAAmB,CAAC,SAAS,EAAEZ,OAAO,CAAC;OACnD,CAAC;KACL;GACJ,EAAE,CAAChB,SAAS,EAAEC,IAAI,CAACW,UAAU,CAACC,eAAe,EAAEV,IAAI,CAACQ,MAAM,CAAC,CAAC;AACjE;;;;"}

package/dist/esm/packages/taco/src/components/Table3/hooks/listeners/useSortingStateListener.js

@@ -0,0 +1,17 @@
+import { useLazyEffect } from '../../../../hooks/useLazyEffect.js';
+
+// we use a listener, and not the internal "controlled" change handlers because we don't actually want consumers
+// to control the state outside the table. this listener is really here to let the consumer make a server request
+// and provide the server with the sorting state, so that it can sort server side
+function useSortingStateListener(table, onSort) {
+  const sorting = table.getState().sorting;
+  useLazyEffect(() => {
+    table.resetRowSelection();
+    if (table.options.enableSorting && typeof onSort === 'function') {
+      onSort(sorting);
+    }
+  }, [table.options.enableSorting, sorting]);
+}
+
+export { useSortingStateListener };
+//# sourceMappingURL=useSortingStateListener.js.map

package/dist/esm/packages/taco/src/components/Table3/hooks/listeners/useSortingStateListener.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSortingStateListener.js","sources":["../../../../../../../../../src/components/Table3/hooks/listeners/useSortingStateListener.ts"],"sourcesContent":["import { Table as RTable } from '@tanstack/react-table';\nimport { Table3SortHandler } from '../../types';\nimport { useLazyEffect } from '../../../../hooks/useLazyEffect';\n\n// we use a listener, and not the internal \"controlled\" change handlers because we don't actually want consumers\n// to control the state outside the table. this listener is really here to let the consumer make a server request\n// and provide the server with the sorting state, so that it can sort server side\nexport function useSortingStateListener<TType = unknown>(table: RTable<TType>, onSort?: Table3SortHandler) {\n    const sorting = table.getState().sorting;\n\n    useLazyEffect(() => {\n        table.resetRowSelection();\n\n        if (table.options.enableSorting && typeof onSort === 'function') {\n            onSort(sorting);\n        }\n    }, [table.options.enableSorting, sorting]);\n}\n"],"names":["useSortingStateListener","table","onSort","sorting","getState","useLazyEffect","resetRowSelection","options","enableSorting"],"mappings":";;AAIA;AACA;AACA;SACgBA,uBAAuB,CAAkBC,KAAoB,EAAEC,MAA0B;EACrG,MAAMC,OAAO,GAAGF,KAAK,CAACG,QAAQ,EAAE,CAACD,OAAO;EAExCE,aAAa,CAAC;IACVJ,KAAK,CAACK,iBAAiB,EAAE;IAEzB,IAAIL,KAAK,CAACM,OAAO,CAACC,aAAa,IAAI,OAAON,MAAM,KAAK,UAAU,EAAE;MAC7DA,MAAM,CAACC,OAAO,CAAC;;GAEtB,EAAE,CAACF,KAAK,CAACM,OAAO,CAACC,aAAa,EAAEL,OAAO,CAAC,CAAC;AAC9C;;;;"}

package/dist/esm/packages/taco/src/components/Table3/hooks/useConvertChildrenToColumns.js

@@ -0,0 +1,116 @@
+import React__default from 'react';
+import { createColumnHelper } from '@tanstack/react-table';
+import { MIN_COLUMN_SIZE } from '../components/columns/styles.js';
+import { Header } from '../components/columns/header/Header.js';
+import { Footer } from '../components/columns/footer/Footer.js';
+import { createRowActionsColumn } from '../components/columns/internal/Actions.js';
+import { createRowEditingActionsColumn } from '../components/columns/internal/EditingActions.js';
+import { Cell } from '../components/columns/cell/Cell.js';
+import { createRowSelectionColumn } from '../components/columns/internal/Selection.js';
+import { createRowExpansionColumn } from '../components/columns/internal/Expansion.js';
+import { createRowDragColumn } from '../components/columns/internal/Drag.js';
+
+function getSortingFn(dataType, customFnOrBuiltIn) {
+  if (typeof customFnOrBuiltIn === 'function') {
+    return (rowA, rowB, columnId) => customFnOrBuiltIn(rowA.original, rowB.original, columnId);
+  }
+  // if a built in is being used, just return that
+  if (customFnOrBuiltIn) {
+    return customFnOrBuiltIn;
+  }
+  // some times we alias based on the type
+  if (dataType && dataType !== 'boolean') {
+    return dataType;
+  }
+  // otherwise fall back to auto
+  return 'auto';
+}
+function useConvertChildrenToColumns(props, options, editing) {
+  var _props$actionsForRow;
+  const columnHelper = createColumnHelper();
+  const columns = [];
+  const defaultColumnSizing = {};
+  const defaultColumnVisibility = {};
+  const defaultSorting = [];
+  React__default.Children.toArray(props.children).filter(child => !!child) // remove falsey children
+  .forEach(child => {
+    if ( /*#__PURE__*/React__default.isValidElement(child) && child.props.accessor) {
+      var _child$props$enableRe, _child$props$enableFi, _child$props$enableSo, _child$props$enableHi, _child$props$enableOr, _child$props$enableSe, _child$props$enableTr;
+      if (child.props.defaultWidth) {
+        defaultColumnSizing[child.props.accessor] = child.props.defaultWidth === 'grow' ? '1fr' : child.props.defaultWidth;
+      }
+      if (child.props.defaultHidden && options.enableColumnHiding) {
+        defaultColumnVisibility[child.props.accessor] = false;
+      }
+      if (child.props.sort !== undefined) {
+        defaultSorting.push({
+          id: child.props.accessor,
+          desc: child.props.sort === 'desc'
+        });
+      }
+      columns.push({
+        accessorKey: child.props.accessor,
+        id: child.props.accessor,
+        header: Header,
+        cell: Cell,
+        footer: Footer,
+        // sizing
+        minSize: MIN_COLUMN_SIZE,
+        enableResizing: (_child$props$enableRe = child.props.enableResizing) !== null && _child$props$enableRe !== void 0 ? _child$props$enableRe : true,
+        // filtering
+        enableColumnFilter: (_child$props$enableFi = child.props.enableFiltering) !== null && _child$props$enableFi !== void 0 ? _child$props$enableFi : true,
+        filterFn: options.enableFiltering ? 'tacoFilter' : undefined,
+        // sorting
+        enableSorting: (_child$props$enableSo = child.props.enableSorting) !== null && _child$props$enableSo !== void 0 ? _child$props$enableSo : true,
+        sortingFn: getSortingFn(child.props.dataType, child.props.sortFn),
+        sortDescFirst: false,
+        sortUndefined: 1,
+        // visibility
+        enableHiding: (_child$props$enableHi = child.props.enableHiding) !== null && _child$props$enableHi !== void 0 ? _child$props$enableHi : true,
+        // custom options
+        meta: {
+          align: child.props.align,
+          className: child.props.className,
+          control: child.props.control,
+          dataType: child.props.dataType,
+          enableOrdering: (_child$props$enableOr = child.props.enableOrdering) !== null && _child$props$enableOr !== void 0 ? _child$props$enableOr : true,
+          // react-table global filtering only samples from row 0 in a dataset for filtering and this
+          // leads to some columns being disabled if, e.g., a column in row 0 has an undefined value
+          // so we do not use the native enableGlobalFilter property and instead use our own enableSearch
+          enableSearch: (_child$props$enableSe = child.props.enableSearch) !== null && _child$props$enableSe !== void 0 ? _child$props$enableSe : true,
+          enableTruncate: (_child$props$enableTr = child.props.enableTruncate) !== null && _child$props$enableTr !== void 0 ? _child$props$enableTr : false,
+          footer: child.props.footer,
+          header: child.props.header,
+          headerClassName: child.props.headerClassName,
+          menu: child.props.menu,
+          renderer: child.props.renderer,
+          tooltip: child.props.tooltip
+        }
+      });
+    }
+  });
+  if (options.enableRowExpansion && props.expandedRowRenderer) {
+    columns.unshift(columnHelper.display(createRowExpansionColumn(props.expandedRowRenderer)));
+  }
+  if (options.enableRowSelection) {
+    columns.unshift(columnHelper.display(createRowSelectionColumn(options.enableRowDrag ? props.onRowDrag : undefined)));
+  }
+  if (options.enableRowDrag && props.onRowDrag) {
+    columns.unshift(columnHelper.display(createRowDragColumn(props.onRowDrag)));
+  }
+  if ((_props$actionsForRow = props.actionsForRow) !== null && _props$actionsForRow !== void 0 && _props$actionsForRow.length) {
+    columns.push(columnHelper.display(createRowActionsColumn(props.actionsForRow, props.actionsForRowLength)));
+  }
+  if (editing.isEnabled && editing.isEditing) {
+    columns.push(columnHelper.display(createRowEditingActionsColumn()));
+  }
+  return {
+    columns,
+    defaultColumnSizing,
+    defaultColumnVisibility,
+    defaultSorting
+  };
+}
+
+export { useConvertChildrenToColumns };
+//# sourceMappingURL=useConvertChildrenToColumns.js.map

package/dist/esm/packages/taco/src/components/Table3/hooks/useConvertChildrenToColumns.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useConvertChildrenToColumns.js","sources":["../../../../../../../../src/components/Table3/hooks/useConvertChildrenToColumns.tsx"],"sourcesContent":["import React from 'react';\nimport { ColumnDef, ColumnSizingState, createColumnHelper, ColumnSort, VisibilityState } from '@tanstack/react-table';\nimport { Table3ColumnProps, Table3Props, Table3Options, Table3ColumnDataType, Table3SortFn } from '../types';\nimport { Header } from '../components/columns/header/Header';\nimport { Footer } from '../components/columns/footer/Footer';\nimport { Cell } from '../components/columns/cell/Cell';\nimport { createRowSelectionColumn } from '../components/columns/internal/Selection';\nimport { MIN_COLUMN_SIZE } from '../components/columns/styles';\nimport { createRowActionsColumn } from '../components/columns/internal/Actions';\nimport { createRowExpansionColumn } from '../components/columns/internal/Expansion';\nimport { createRowDragColumn } from '../components/columns/internal/Drag';\nimport { createRowEditingActionsColumn } from '../components/columns/internal/EditingActions';\nimport { useEditing } from './features/useEditing';\n\nfunction getSortingFn<TType = unknown>(dataType?: Table3ColumnDataType, customFnOrBuiltIn?: Table3SortFn<TType>) {\n    if (typeof customFnOrBuiltIn === 'function') {\n        return (rowA, rowB, columnId) => customFnOrBuiltIn(rowA.original, rowB.original, columnId);\n    }\n\n    // if a built in is being used, just return that\n    if (customFnOrBuiltIn) {\n        return customFnOrBuiltIn;\n    }\n\n    // some times we alias based on the type\n    if (dataType && dataType !== 'boolean') {\n        return dataType;\n    }\n\n    // otherwise fall back to auto\n    return 'auto';\n}\n\nexport function useConvertChildrenToColumns<TType = unknown>(\n    props: Table3Props<TType>,\n    options: Table3Options,\n    editing: ReturnType<typeof useEditing>\n) {\n    const columnHelper = createColumnHelper<TType>();\n\n    const columns: ColumnDef<TType>[] = [];\n    const defaultColumnSizing: ColumnSizingState = {};\n    const defaultColumnVisibility: VisibilityState = {};\n    const defaultSorting: ColumnSort[] = [];\n\n    (React.Children.toArray(props.children) as React.ReactElement<Table3ColumnProps<TType>>[])\n        .filter(child => !!child) // remove falsey children\n        .forEach(child => {\n            if (React.isValidElement<Table3ColumnProps<TType>>(child) && child.props.accessor) {\n                if (child.props.defaultWidth) {\n                    defaultColumnSizing[child.props.accessor] =\n                        child.props.defaultWidth === 'grow' ? '1fr' : (child.props.defaultWidth as any);\n                }\n\n                if (child.props.defaultHidden && options.enableColumnHiding) {\n                    defaultColumnVisibility[child.props.accessor] = false;\n                }\n\n                if (child.props.sort !== undefined) {\n                    defaultSorting.push({\n                        id: child.props.accessor,\n                        desc: child.props.sort === 'desc',\n                    });\n                }\n\n                columns.push({\n                    accessorKey: child.props.accessor,\n                    id: child.props.accessor,\n                    header: Header,\n                    cell: Cell,\n                    footer: Footer,\n                    // sizing\n                    minSize: MIN_COLUMN_SIZE,\n                    enableResizing: child.props.enableResizing ?? true,\n                    // filtering\n                    enableColumnFilter: child.props.enableFiltering ?? true,\n                    filterFn: options.enableFiltering ? ('tacoFilter' as any) : undefined,\n                    // sorting\n                    enableSorting: child.props.enableSorting ?? true,\n                    sortingFn: getSortingFn<TType>(child.props.dataType, child.props.sortFn),\n                    sortDescFirst: false,\n                    sortUndefined: 1,\n                    // visibility\n                    enableHiding: child.props.enableHiding ?? true,\n                    // custom options\n                    meta: {\n                        align: child.props.align,\n                        className: child.props.className,\n                        control: child.props.control,\n                        dataType: child.props.dataType,\n                        enableOrdering: child.props.enableOrdering ?? true,\n                        // react-table global filtering only samples from row 0 in a dataset for filtering and this\n                        // leads to some columns being disabled if, e.g., a column in row 0 has an undefined value\n                        // so we do not use the native enableGlobalFilter property and instead use our own enableSearch\n                        enableSearch: child.props.enableSearch ?? true,\n                        enableTruncate: child.props.enableTruncate ?? false,\n                        footer: child.props.footer,\n                        header: child.props.header,\n                        headerClassName: child.props.headerClassName,\n                        menu: child.props.menu,\n                        renderer: child.props.renderer,\n                        tooltip: child.props.tooltip,\n                    },\n                });\n            }\n        });\n\n    if (options.enableRowExpansion && props.expandedRowRenderer) {\n        columns.unshift(columnHelper.display(createRowExpansionColumn(props.expandedRowRenderer)));\n    }\n\n    if (options.enableRowSelection) {\n        columns.unshift(\n            columnHelper.display(createRowSelectionColumn<TType>(options.enableRowDrag ? props.onRowDrag : undefined))\n        );\n    }\n\n    if (options.enableRowDrag && props.onRowDrag) {\n        columns.unshift(columnHelper.display(createRowDragColumn(props.onRowDrag)));\n    }\n\n    if (props.actionsForRow?.length) {\n        columns.push(columnHelper.display(createRowActionsColumn<TType>(props.actionsForRow, props.actionsForRowLength)));\n    }\n\n    if (editing.isEnabled && editing.isEditing) {\n        columns.push(columnHelper.display(createRowEditingActionsColumn<TType>()));\n    }\n\n    return { columns, defaultColumnSizing, defaultColumnVisibility, defaultSorting };\n}\n"],"names":["getSortingFn","dataType","customFnOrBuiltIn","rowA","rowB","columnId","original","useConvertChildrenToColumns","props","options","editing","columnHelper","createColumnHelper","columns","defaultColumnSizing","defaultColumnVisibility","defaultSorting","React","Children","toArray","children","filter","child","forEach","isValidElement","accessor","defaultWidth","defaultHidden","enableColumnHiding","sort","undefined","push","id","desc","accessorKey","header","Header","cell","Cell","footer","Footer","minSize","MIN_COLUMN_SIZE","enableResizing","enableColumnFilter","enableFiltering","filterFn","enableSorting","sortingFn","sortFn","sortDescFirst","sortUndefined","enableHiding","meta","align","className","control","enableOrdering","enableSearch","enableTruncate","headerClassName","menu","renderer","tooltip","enableRowExpansion","expandedRowRenderer","unshift","display","createRowExpansionColumn","enableRowSelection","createRowSelectionColumn","enableRowDrag","onRowDrag","createRowDragColumn","actionsForRow","length","createRowActionsColumn","actionsForRowLength","isEnabled","isEditing","createRowEditingActionsColumn"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/Table3/hooks/useCssGrid.js

@@ -0,0 +1,56 @@
+import React__default from 'react';
+import { isInternalColumn } from '../util/columns.js';
+import { MIN_COLUMN_SIZE } from '../components/columns/styles.js';
+import { COLUMN_ID } from '../components/columns/internal/Actions.js';
+
+const useCssGrid = table => {
+  const allVisibleColumns = table.getVisibleLeafColumns();
+  const columnSizing = table.getState().columnSizing;
+  const length = table.getRowModel().rows.length;
+  const gridTemplateColumns = React__default.useMemo(() => {
+    return allVisibleColumns.reduce((accum, column, index) => {
+      let size;
+      const isLastColumn = index === allVisibleColumns.length - 1;
+      // column has a getSize function, but it always returns a default value (150), and we want the
+      // first render to use auto layout - so we get the size directly from table state where it is undefined
+      const width = columnSizing[column.id];
+      if (isInternalColumn(column.id)) {
+        if (column.id === COLUMN_ID) {
+          // it's important to set a min width so that when the the column width is maintained
+          // when the current row is scrolled out of the virtualisation view
+          size = `minmax(${column.getSize()}px, auto)`;
+        } else {
+          size = `${column.getSize()}px`;
+        }
+      } else if (width !== undefined) {
+        if (width === '1fr') {
+          size = 'minmax(max-content, 1fr)';
+        } else if (isLastColumn) {
+          size = `minmax(${width}px, auto)`;
+        } else if (width < MIN_COLUMN_SIZE) {
+          // the react-table getResizeHandler function does not respect the minSize property on columns, it is possible
+          // to go below the minSize - so we have to prevent it entirely on the grid layout
+          size = `${MIN_COLUMN_SIZE}px`;
+        } else {
+          size = `${width}px`;
+        }
+      } else {
+        size = 'minmax(max-content, auto)';
+      }
+      return `${accum} ${size}`.trim();
+    }, '');
+  }, [allVisibleColumns, columnSizing]);
+  const gridTemplateRows = React__default.useMemo(() => {
+    return `min-content repeat(${length}, min-content) 1fr min-content`;
+  }, [length]);
+  const style = {
+    gridTemplateColumns,
+    gridTemplateRows
+  };
+  return {
+    style
+  };
+};
+
+export { useCssGrid };
+//# sourceMappingURL=useCssGrid.js.map

package/dist/esm/packages/taco/src/components/Table3/hooks/useCssGrid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCssGrid.js","sources":["../../../../../../../../src/components/Table3/hooks/useCssGrid.ts"],"sourcesContent":["import React from 'react';\nimport { Table as RTable } from '@tanstack/react-table';\nimport { isInternalColumn } from '../util/columns';\nimport { MIN_COLUMN_SIZE } from '../components/columns/styles';\nimport { COLUMN_ID as ACTIONS_COLUMN_ID } from '../components/columns/internal/Actions';\n\nexport const useCssGrid = <TType = unknown>(table: RTable<TType>) => {\n    const allVisibleColumns = table.getVisibleLeafColumns();\n    const columnSizing = table.getState().columnSizing;\n    const length = table.getRowModel().rows.length;\n\n    const gridTemplateColumns = React.useMemo(() => {\n        return allVisibleColumns.reduce((accum, column, index) => {\n            let size;\n            const isLastColumn = index === allVisibleColumns.length - 1;\n            // column has a getSize function, but it always returns a default value (150), and we want the\n            // first render to use auto layout - so we get the size directly from table state where it is undefined\n            const width = columnSizing[column.id] as number | '1fr';\n\n            if (isInternalColumn(column.id)) {\n                if (column.id === ACTIONS_COLUMN_ID) {\n                    // it's important to set a min width so that when the the column width is maintained\n                    // when the current row is scrolled out of the virtualisation view\n                    size = `minmax(${column.getSize()}px, auto)`;\n                } else {\n                    size = `${column.getSize()}px`;\n                }\n            } else if (width !== undefined) {\n                if (width === '1fr') {\n                    size = 'minmax(max-content, 1fr)';\n                } else if (isLastColumn) {\n                    size = `minmax(${width}px, auto)`;\n                } else if (width < MIN_COLUMN_SIZE) {\n                    // the react-table getResizeHandler function does not respect the minSize property on columns, it is possible\n                    // to go below the minSize - so we have to prevent it entirely on the grid layout\n                    size = `${MIN_COLUMN_SIZE}px`;\n                } else {\n                    size = `${width}px`;\n                }\n            } else {\n                size = 'minmax(max-content, auto)';\n            }\n\n            return `${accum} ${size}`.trim();\n        }, '');\n    }, [allVisibleColumns, columnSizing]);\n\n    const gridTemplateRows = React.useMemo(() => {\n        return `min-content repeat(${length}, min-content) 1fr min-content`;\n    }, [length]);\n\n    const style: React.CSSProperties = {\n        gridTemplateColumns,\n        gridTemplateRows,\n    };\n\n    return { style };\n};\n"],"names":["useCssGrid","table","allVisibleColumns","getVisibleLeafColumns","columnSizing","getState","length","getRowModel","rows","gridTemplateColumns","React","useMemo","reduce","accum","column","index","size","isLastColumn","width","id","isInternalColumn","ACTIONS_COLUMN_ID","getSize","undefined","MIN_COLUMN_SIZE","trim","gridTemplateRows","style"],"mappings":";;;;;MAMaA,UAAU,GAAqBC,KAAoB;EAC5D,MAAMC,iBAAiB,GAAGD,KAAK,CAACE,qBAAqB,EAAE;EACvD,MAAMC,YAAY,GAAGH,KAAK,CAACI,QAAQ,EAAE,CAACD,YAAY;EAClD,MAAME,MAAM,GAAGL,KAAK,CAACM,WAAW,EAAE,CAACC,IAAI,CAACF,MAAM;EAE9C,MAAMG,mBAAmB,GAAGC,cAAK,CAACC,OAAO,CAAC;IACtC,OAAOT,iBAAiB,CAACU,MAAM,CAAC,CAACC,KAAK,EAAEC,MAAM,EAAEC,KAAK;MACjD,IAAIC,IAAI;MACR,MAAMC,YAAY,GAAGF,KAAK,KAAKb,iBAAiB,CAACI,MAAM,GAAG,CAAC;;;MAG3D,MAAMY,KAAK,GAAGd,YAAY,CAACU,MAAM,CAACK,EAAE,CAAmB;MAEvD,IAAIC,gBAAgB,CAACN,MAAM,CAACK,EAAE,CAAC,EAAE;QAC7B,IAAIL,MAAM,CAACK,EAAE,KAAKE,SAAiB,EAAE;;;UAGjCL,IAAI,aAAaF,MAAM,CAACQ,OAAO,aAAa;SAC/C,MAAM;UACHN,IAAI,MAAMF,MAAM,CAACQ,OAAO,MAAM;;OAErC,MAAM,IAAIJ,KAAK,KAAKK,SAAS,EAAE;QAC5B,IAAIL,KAAK,KAAK,KAAK,EAAE;UACjBF,IAAI,GAAG,0BAA0B;SACpC,MAAM,IAAIC,YAAY,EAAE;UACrBD,IAAI,aAAaE,gBAAgB;SACpC,MAAM,IAAIA,KAAK,GAAGM,eAAe,EAAE;;;UAGhCR,IAAI,MAAMQ,mBAAmB;SAChC,MAAM;UACHR,IAAI,MAAME,SAAS;;OAE1B,MAAM;QACHF,IAAI,GAAG,2BAA2B;;MAGtC,UAAUH,SAASG,MAAM,CAACS,IAAI,EAAE;KACnC,EAAE,EAAE,CAAC;GACT,EAAE,CAACvB,iBAAiB,EAAEE,YAAY,CAAC,CAAC;EAErC,MAAMsB,gBAAgB,GAAGhB,cAAK,CAACC,OAAO,CAAC;IACnC,6BAA6BL,sCAAsC;GACtE,EAAE,CAACA,MAAM,CAAC,CAAC;EAEZ,MAAMqB,KAAK,GAAwB;IAC/BlB,mBAAmB;IACnBiB;GACH;EAED,OAAO;IAAEC;GAAO;AACpB;;;;"}

package/dist/esm/packages/taco/src/components/Table3/hooks/useCssVars.js

@@ -0,0 +1,61 @@
+// we cannot just use a fixed height because our rows need to grow in height (images, edit mode validation etc)
+const getRowHeightSizing = (height, fontSize) => {
+  // TODO: can we get the rem values from tailwind
+  switch (height) {
+    case 'short':
+      {
+        switch (fontSize) {
+          case 'small':
+            return '8px';
+          default:
+            return '6px';
+          // py-1.5
+        }
+      }
+
+    case 'tall':
+      {
+        switch (fontSize) {
+          case 'small':
+            return '16px';
+          case 'large':
+            return '12px';
+          default:
+            return '14px';
+        }
+      }
+    case 'extra-tall':
+      {
+        switch (fontSize) {
+          case 'small':
+            return '22px';
+          case 'large':
+            return '18px';
+          default:
+            return '20px';
+        }
+      }
+    default:
+      {
+        switch (fontSize) {
+          case 'small':
+            return '12px';
+          case 'large':
+            return '8px';
+          default:
+            return '10px';
+        }
+      }
+  }
+};
+const useCssVars = (height, fontSize) => {
+  const style = {
+    '--table3-row-padding': getRowHeightSizing(height, fontSize)
+  };
+  return {
+    style
+  };
+};
+
+export { useCssVars };
+//# sourceMappingURL=useCssVars.js.map

package/dist/esm/packages/taco/src/components/Table3/hooks/useCssVars.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCssVars.js","sources":["../../../../../../../../src/components/Table3/hooks/useCssVars.ts"],"sourcesContent":["import { Table3FontSize, Table3RowHeight } from '../types';\n\n// we cannot just use a fixed height because our rows need to grow in height (images, edit mode validation etc)\nconst getRowHeightSizing = (height: Table3RowHeight, fontSize: Table3FontSize) => {\n    // TODO: can we get the rem values from tailwind\n    switch (height) {\n        case 'short': {\n            switch (fontSize) {\n                case 'small':\n                    return '8px';\n\n                default:\n                    return '6px'; // py-1.5\n            }\n        }\n\n        case 'tall': {\n            switch (fontSize) {\n                case 'small':\n                    return '16px';\n\n                case 'large':\n                    return '12px';\n\n                default:\n                    return '14px';\n            }\n        }\n\n        case 'extra-tall': {\n            switch (fontSize) {\n                case 'small':\n                    return '22px';\n\n                case 'large':\n                    return '18px';\n\n                default:\n                    return '20px';\n            }\n        }\n\n        default: {\n            switch (fontSize) {\n                case 'small':\n                    return '12px';\n\n                case 'large':\n                    return '8px';\n\n                default:\n                    return '10px';\n            }\n        }\n    }\n};\n\nexport const useCssVars = (height: Table3RowHeight, fontSize: Table3FontSize) => {\n    const style = {\n        '--table3-row-padding': getRowHeightSizing(height, fontSize),\n    };\n\n    return { style };\n};\n"],"names":["getRowHeightSizing","height","fontSize","useCssVars","style"],"mappings":"AAEA;AACA,MAAMA,kBAAkB,GAAG,CAACC,MAAuB,EAAEC,QAAwB;;EAEzE,QAAQD,MAAM;IACV,KAAK,OAAO;MAAE;QACV,QAAQC,QAAQ;UACZ,KAAK,OAAO;YACR,OAAO,KAAK;UAEhB;YACI,OAAO,KAAK;;;;;IAIxB,KAAK,MAAM;MAAE;QACT,QAAQA,QAAQ;UACZ,KAAK,OAAO;YACR,OAAO,MAAM;UAEjB,KAAK,OAAO;YACR,OAAO,MAAM;UAEjB;YACI,OAAO,MAAM;;;IAIzB,KAAK,YAAY;MAAE;QACf,QAAQA,QAAQ;UACZ,KAAK,OAAO;YACR,OAAO,MAAM;UAEjB,KAAK,OAAO;YACR,OAAO,MAAM;UAEjB;YACI,OAAO,MAAM;;;IAIzB;MAAS;QACL,QAAQA,QAAQ;UACZ,KAAK,OAAO;YACR,OAAO,MAAM;UAEjB,KAAK,OAAO;YACR,OAAO,KAAK;UAEhB;YACI,OAAO,MAAM;;;;AAIjC,CAAC;MAEYC,UAAU,GAAG,CAACF,MAAuB,EAAEC,QAAwB;EACxE,MAAME,KAAK,GAAG;IACV,sBAAsB,EAAEJ,kBAAkB,CAACC,MAAM,EAAEC,QAAQ;GAC9D;EAED,OAAO;IAAEE;GAAO;AACpB;;;;"}