@redsift/table 11.5.0 → 11.6.0-muiv5-alpha.0

package/components/Toolbar/Toolbar.js

@@ -0,0 +1,72 @@
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default from 'react';
+import { GridToolbarContainer, GridToolbarFilterButton, GridToolbarColumnsButton, GridToolbarDensitySelector, GridToolbarExport, gridVisibleSortedRowIdsSelector, GridToolbarQuickFilter } from '@mui/x-data-grid-pro';
+import { GridToolbarWrapper } from './styles.js';
+import { Flexbox } from '@redsift/design-system';
+import { GridToolbarFilterSemanticField } from '../GridToolbarFilterSemanticField/GridToolbarFilterSemanticField.js';
+
+/**
+ * Temporary workaround for a type mismatch between react 17 and 18
+ * https://github.com/mui/material-ui/issues/35287#issuecomment-1337250566
+ */
+
+/** ------ */
+
+const Toolbar = props => {
+  const {
+    hasExportButton = true,
+    exportButtonProps,
+    exportButtonRef,
+    hasFilterButton = true,
+    filterButtonProps,
+    filterButtonRef,
+    hasColumnsButton = true,
+    columnsButtonProps,
+    columnsButtonRef,
+    hasDensityButton = true,
+    densityButtonProps,
+    densityButtonRef,
+    onFilterModelChange,
+    semanticFilterProps = undefined,
+    showQuickFilter
+  } = props;
+  if (semanticFilterProps && onFilterModelChange) {
+    semanticFilterProps.onFilterModelChange = onFilterModelChange;
+  }
+  return /*#__PURE__*/React__default.createElement(GridToolbarWrapper, null, /*#__PURE__*/React__default.createElement(GridToolbarContainer, null, /*#__PURE__*/React__default.createElement(Flexbox, {
+    gap: "0"
+  }, hasFilterButton ? /*#__PURE__*/React__default.createElement(GridToolbarFilterButton, _extends({}, filterButtonProps, {
+    ref: filterButtonRef,
+    className: filterButtonProps !== null && filterButtonProps !== void 0 && filterButtonProps.className ? `${filterButtonProps === null || filterButtonProps === void 0 ? void 0 : filterButtonProps.className} redsift-condensed` : 'redsift-condensed'
+  })) : null, hasColumnsButton ? /*#__PURE__*/React__default.createElement(GridToolbarColumnsButton, _extends({}, columnsButtonProps, {
+    ref: columnsButtonRef,
+    className: filterButtonProps !== null && filterButtonProps !== void 0 && filterButtonProps.className ? `${filterButtonProps === null || filterButtonProps === void 0 ? void 0 : filterButtonProps.className} redsift-condensed` : 'redsift-condensed'
+  })) : null, hasDensityButton ? /*#__PURE__*/React__default.createElement(GridToolbarDensitySelector, _extends({}, densityButtonProps, {
+    ref: densityButtonRef,
+    className: filterButtonProps !== null && filterButtonProps !== void 0 && filterButtonProps.className ? `${filterButtonProps === null || filterButtonProps === void 0 ? void 0 : filterButtonProps.className} redsift-condensed` : 'redsift-condensed'
+  })) : null, hasExportButton ? /*#__PURE__*/React__default.createElement(GridToolbarExport, _extends({
+    csvOptions: {
+      allColumns: true,
+      fileName: 'csv',
+      getRowsToExport: _ref => {
+        let {
+          apiRef
+        } = _ref;
+        return gridVisibleSortedRowIdsSelector(apiRef);
+      }
+    },
+    printOptions: {
+      disableToolbarButton: true
+    }
+  }, exportButtonProps, {
+    ref: exportButtonRef,
+    className: filterButtonProps !== null && filterButtonProps !== void 0 && filterButtonProps.className ? `${filterButtonProps === null || filterButtonProps === void 0 ? void 0 : filterButtonProps.className} redsift-condensed` : 'redsift-condensed'
+  })) : null, /*#__PURE__*/React__default.createElement(Flexbox, {
+    marginLeft: "8px"
+  }, showQuickFilter ? /*#__PURE__*/React__default.createElement(GridToolbarQuickFilter, null) : null)), /*#__PURE__*/React__default.createElement(Flexbox, {
+    flexGrow: 3
+  }, semanticFilterProps ? /*#__PURE__*/React__default.createElement(GridToolbarFilterSemanticField, semanticFilterProps) : null)));
+};
+
+export { Toolbar };
+//# sourceMappingURL=Toolbar.js.map

package/components/Toolbar/Toolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toolbar.js","sources":["../../../src/components/Toolbar/Toolbar.tsx"],"sourcesContent":["import React from 'react';\n\nimport {\n  GridToolbarContainer,\n  GridToolbarColumnsButton,\n  GridToolbarDensitySelector,\n  GridToolbarFilterButton,\n  GridToolbarExport,\n  gridVisibleSortedRowIdsSelector,\n  GridCsvGetRowsToExportParams,\n  GridToolbarQuickFilter,\n} from '@mui/x-data-grid-pro';\n\nimport { GridToolbarWrapper } from './styles';\nimport { ToolbarProps } from './types';\nimport { Flexbox } from '@redsift/design-system';\nimport { GridToolbarFilterSemanticField } from '../GridToolbarFilterSemanticField';\n\n/**\n * Temporary workaround for a type mismatch between react 17 and 18\n * https://github.com/mui/material-ui/issues/35287#issuecomment-1337250566\n */\ndeclare global {\n  namespace React {\n    interface DOMAttributes<T> {\n      onResize?: React.ReactEventHandler<T> | undefined;\n      onResizeCapture?: React.ReactEventHandler<T> | undefined;\n      nonce?: string | undefined;\n    }\n  }\n}\n/** ------ */\n\nexport const Toolbar: React.FC<ToolbarProps> = (props) => {\n  const {\n    hasExportButton = true,\n    exportButtonProps,\n    exportButtonRef,\n    hasFilterButton = true,\n    filterButtonProps,\n    filterButtonRef,\n    hasColumnsButton = true,\n    columnsButtonProps,\n    columnsButtonRef,\n    hasDensityButton = true,\n    densityButtonProps,\n    densityButtonRef,\n    onFilterModelChange,\n    semanticFilterProps = undefined,\n    showQuickFilter,\n  } = props;\n\n  if (semanticFilterProps && onFilterModelChange) {\n    semanticFilterProps.onFilterModelChange = onFilterModelChange;\n  }\n\n  return (\n    <GridToolbarWrapper>\n      <GridToolbarContainer>\n        <Flexbox gap=\"0\">\n          {hasFilterButton ? (\n            <GridToolbarFilterButton\n              {...filterButtonProps}\n              ref={filterButtonRef}\n              className={\n                filterButtonProps?.className ? `${filterButtonProps?.className} redsift-condensed` : 'redsift-condensed'\n              }\n            />\n          ) : null}\n          {hasColumnsButton ? (\n            <GridToolbarColumnsButton\n              {...columnsButtonProps}\n              ref={columnsButtonRef}\n              className={\n                filterButtonProps?.className ? `${filterButtonProps?.className} redsift-condensed` : 'redsift-condensed'\n              }\n            />\n          ) : null}\n          {hasDensityButton ? (\n            <GridToolbarDensitySelector\n              {...densityButtonProps}\n              ref={densityButtonRef}\n              className={\n                filterButtonProps?.className ? `${filterButtonProps?.className} redsift-condensed` : 'redsift-condensed'\n              }\n            />\n          ) : null}\n          {hasExportButton ? (\n            <GridToolbarExport\n              csvOptions={{\n                allColumns: true,\n                fileName: 'csv',\n                getRowsToExport: ({ apiRef }: GridCsvGetRowsToExportParams) => gridVisibleSortedRowIdsSelector(apiRef),\n              }}\n              printOptions={{\n                disableToolbarButton: true,\n              }}\n              {...exportButtonProps}\n              ref={exportButtonRef}\n              className={\n                filterButtonProps?.className ? `${filterButtonProps?.className} redsift-condensed` : 'redsift-condensed'\n              }\n            />\n          ) : null}\n          <Flexbox marginLeft=\"8px\">{showQuickFilter ? <GridToolbarQuickFilter /> : null}</Flexbox>\n        </Flexbox>\n        <Flexbox flexGrow={3}>\n          {semanticFilterProps ? <GridToolbarFilterSemanticField {...semanticFilterProps} /> : null}\n        </Flexbox>\n      </GridToolbarContainer>\n    </GridToolbarWrapper>\n  );\n};\n"],"names":["Toolbar","props","hasExportButton","exportButtonProps","exportButtonRef","hasFilterButton","filterButtonProps","filterButtonRef","hasColumnsButton","columnsButtonProps","columnsButtonRef","hasDensityButton","densityButtonProps","densityButtonRef","onFilterModelChange","semanticFilterProps","undefined","showQuickFilter","React","createElement","GridToolbarWrapper","GridToolbarContainer","Flexbox","gap","GridToolbarFilterButton","_extends","ref","className","GridToolbarColumnsButton","GridToolbarDensitySelector","GridToolbarExport","csvOptions","allColumns","fileName","getRowsToExport","_ref","apiRef","gridVisibleSortedRowIdsSelector","printOptions","disableToolbarButton","marginLeft","GridToolbarQuickFilter","flexGrow","GridToolbarFilterSemanticField"],"mappings":"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"}

package/components/Toolbar/styles.js

@@ -0,0 +1,17 @@
+import styled from 'styled-components';
+
+/**
+ * Component style.
+ */
+const GridToolbarWrapper = styled.div`
+  .MuiButtonBase-root-JobBs.MuiButton-root {
+    svg {
+      path {
+        fill: var(--redsift-color-primary-n);
+      }
+    }
+  }
+`;
+
+export { GridToolbarWrapper };
+//# sourceMappingURL=styles.js.map

package/components/Toolbar/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../src/components/Toolbar/styles.ts"],"sourcesContent":["import styled from 'styled-components';\n\n/**\n * Component style.\n */\nexport const GridToolbarWrapper = styled.div`\n  .MuiButtonBase-root-JobBs.MuiButton-root {\n    svg {\n      path {\n        fill: var(--redsift-color-primary-n);\n      }\n    }\n  }\n`;\n"],"names":["GridToolbarWrapper","styled","div"],"mappings":";;AAEA;AACA;AACA;AACaA,MAAAA,kBAAkB,GAAGC,MAAM,CAACC,GAAI,CAAA;AAC7C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;"}

package/components/Toolbar/types.d.ts

@@ -0,0 +1,40 @@
+import { RefObject } from 'react';
+import { GridToolbarExportProps, GridToolbarFilterButtonProps, GridFilterModel, GridToolbarColumnsButton, GridToolbarDensitySelector } from '@mui/x-data-grid-pro';
+import { GridToolbarFilterSemanticFieldProps } from '../GridToolbarFilterSemanticField/types.js';
+
+type GridToolbarColumnsProps = Omit<typeof GridToolbarColumnsButton, 'ref'>;
+type GridToolbarDensityProps = Omit<typeof GridToolbarDensitySelector, 'ref'>;
+type GridToolbarFilterSemanticProps = Omit<GridToolbarFilterSemanticFieldProps, 'ref'>;
+interface ToolbarProps {
+    /** Props to forward to the column button. */
+    columnsButtonProps?: GridToolbarColumnsProps;
+    /** Column button ref. */
+    columnsButtonRef?: RefObject<HTMLButtonElement>;
+    /** Props to forward to the density button. */
+    densityButtonProps?: GridToolbarDensityProps;
+    /** Density button ref. */
+    densityButtonRef?: RefObject<HTMLButtonElement>;
+    /** Props to forward to the export button. */
+    exportButtonProps?: GridToolbarExportProps;
+    /** Export button ref. */
+    exportButtonRef?: RefObject<HTMLButtonElement>;
+    /** Props to forward to the filter button. */
+    filterButtonProps?: GridToolbarFilterButtonProps;
+    /** Filter button ref. */
+    filterButtonRef?: RefObject<HTMLButtonElement>;
+    /** Whether the columns button is displayed or not. */
+    hasColumnsButton?: boolean;
+    /** Whether the density button is displayed or not. */
+    hasDensityButton?: boolean;
+    /** Whether the export button is displayed or not. */
+    hasExportButton?: boolean;
+    /** Whether the filter button is displayed or not. */
+    hasFilterButton?: boolean;
+    /** Configuration object for NLP filter. undefined if disabled. */
+    onFilterModelChange?: (filterModel: GridFilterModel) => void;
+    semanticFilterProps?: GridToolbarFilterSemanticProps;
+    /** Whether you want to show the quick filter or not. */
+    showQuickFilter?: boolean;
+}
+
+export { ToolbarProps };

package/components/ToolbarWrapper/ToolbarWrapper.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import { DataGridProps, SelectionStatus } from '../DataGrid/types.js';
+
+type ToolbarWrapperProps = {
+    hideToolbar: DataGridProps['hideToolbar'];
+    RenderedToolbar: React.JSXElementConstructor<any>;
+    filterModel: DataGridProps['filterModel'];
+    onFilterModelChange: DataGridProps['onFilterModelChange'];
+    pagination: DataGridProps['pagination'];
+    paginationPlacement: DataGridProps['paginationPlacement'];
+    selectionStatus: React.MutableRefObject<SelectionStatus>;
+    apiRef: DataGridProps['apiRef'];
+    isRowSelectable: DataGridProps['isRowSelectable'];
+    page: DataGridProps['page'];
+    onPageChange: DataGridProps['onPageChange'];
+    pageSize: DataGridProps['pageSize'];
+    onPageSizeChange: DataGridProps['onPageSizeChange'];
+    rowsPerPageOptions: DataGridProps['rowsPerPageOptions'];
+    paginationProps: DataGridProps['paginationProps'];
+    paginationMode?: DataGridProps['paginationMode'];
+    rowCount?: DataGridProps['rowCount'];
+};
+declare const ToolbarWrapper: React.FC<ToolbarWrapperProps>;
+
+export { ToolbarWrapper, ToolbarWrapperProps };

package/components/ToolbarWrapper/ToolbarWrapper.js

@@ -0,0 +1,60 @@
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default from 'react';
+import { ServerSideControlledPagination } from '../Pagination/ServerSideControlledPagination.js';
+import { ControlledPagination } from '../Pagination/ControlledPagination.js';
+
+const _excluded = ["hideToolbar", "RenderedToolbar", "filterModel", "onFilterModelChange", "pagination", "paginationPlacement", "selectionStatus", "apiRef", "isRowSelectable", "page", "onPageChange", "pageSize", "onPageSizeChange", "rowsPerPageOptions", "paginationProps", "paginationMode", "rowCount"];
+const ToolbarWrapper = _ref => {
+  let {
+      hideToolbar,
+      RenderedToolbar,
+      filterModel,
+      onFilterModelChange,
+      pagination,
+      paginationPlacement,
+      selectionStatus,
+      apiRef,
+      isRowSelectable,
+      page,
+      onPageChange,
+      pageSize,
+      onPageSizeChange,
+      rowsPerPageOptions,
+      paginationProps,
+      paginationMode = 'client',
+      rowCount
+    } = _ref,
+    forwardedProps = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, !hideToolbar ? /*#__PURE__*/React__default.createElement(RenderedToolbar, _extends({}, forwardedProps, {
+    filterModel: filterModel,
+    onFilterModelChange: onFilterModelChange
+  })) : null, pagination ? paginationMode == 'server' ? /*#__PURE__*/React__default.createElement(ServerSideControlledPagination, {
+    displaySelection: true,
+    displayRowsPerPage: false,
+    displayPagination: ['top', 'both'].includes(paginationPlacement),
+    selectionStatus: selectionStatus.current,
+    page: page,
+    onPageChange: onPageChange,
+    pageSize: pageSize,
+    onPageSizeChange: onPageSizeChange,
+    rowsPerPageOptions: rowsPerPageOptions,
+    paginationProps: paginationProps,
+    rowCount: rowCount
+  }) : /*#__PURE__*/React__default.createElement(ControlledPagination, {
+    displaySelection: true,
+    displayRowsPerPage: false,
+    displayPagination: ['top', 'both'].includes(paginationPlacement),
+    selectionStatus: selectionStatus.current,
+    apiRef: apiRef,
+    isRowSelectable: isRowSelectable,
+    page: page,
+    onPageChange: onPageChange,
+    pageSize: pageSize,
+    onPageSizeChange: onPageSizeChange,
+    rowsPerPageOptions: rowsPerPageOptions,
+    paginationProps: paginationProps
+  }) : null);
+};
+
+export { ToolbarWrapper };
+//# sourceMappingURL=ToolbarWrapper.js.map

package/components/ToolbarWrapper/ToolbarWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarWrapper.js","sources":["../../../src/components/ToolbarWrapper/ToolbarWrapper.tsx"],"sourcesContent":["import React from 'react';\n\nimport { DataGridProps, SelectionStatus } from '../DataGrid/types';\nimport { ServerSideControlledPagination } from '../Pagination/ServerSideControlledPagination';\nimport { ControlledPagination } from '../Pagination/ControlledPagination';\n\nexport type ToolbarWrapperProps = {\n  hideToolbar: DataGridProps['hideToolbar'];\n  RenderedToolbar: React.JSXElementConstructor<any>;\n  filterModel: DataGridProps['filterModel'];\n  onFilterModelChange: DataGridProps['onFilterModelChange'];\n  pagination: DataGridProps['pagination'];\n  paginationPlacement: DataGridProps['paginationPlacement'];\n  selectionStatus: React.MutableRefObject<SelectionStatus>;\n  apiRef: DataGridProps['apiRef'];\n  isRowSelectable: DataGridProps['isRowSelectable'];\n  page: DataGridProps['page'];\n  onPageChange: DataGridProps['onPageChange'];\n  pageSize: DataGridProps['pageSize'];\n  onPageSizeChange: DataGridProps['onPageSizeChange'];\n  rowsPerPageOptions: DataGridProps['rowsPerPageOptions'];\n  paginationProps: DataGridProps['paginationProps'];\n  paginationMode?: DataGridProps['paginationMode'];\n  rowCount?: DataGridProps['rowCount'];\n};\n\nexport const ToolbarWrapper: React.FC<ToolbarWrapperProps> = ({\n  hideToolbar,\n  RenderedToolbar,\n  filterModel,\n  onFilterModelChange,\n  pagination,\n  paginationPlacement,\n  selectionStatus,\n  apiRef,\n  isRowSelectable,\n  page,\n  onPageChange,\n  pageSize,\n  onPageSizeChange,\n  rowsPerPageOptions,\n  paginationProps,\n  paginationMode = 'client',\n  rowCount,\n  ...forwardedProps\n}) => {\n  return (\n    <>\n      {!hideToolbar ? (\n        <RenderedToolbar {...forwardedProps} filterModel={filterModel} onFilterModelChange={onFilterModelChange} />\n      ) : null}\n      {pagination ? (\n        paginationMode == 'server' ? (\n          <ServerSideControlledPagination\n            displaySelection={true}\n            displayRowsPerPage={false}\n            displayPagination={['top', 'both'].includes(paginationPlacement!)}\n            selectionStatus={selectionStatus.current}\n            page={page!}\n            onPageChange={onPageChange as any}\n            pageSize={pageSize!}\n            onPageSizeChange={onPageSizeChange as any}\n            rowsPerPageOptions={rowsPerPageOptions}\n            paginationProps={paginationProps}\n            rowCount={rowCount!}\n          />\n        ) : (\n          <ControlledPagination\n            displaySelection={true}\n            displayRowsPerPage={false}\n            displayPagination={['top', 'both'].includes(paginationPlacement!)}\n            selectionStatus={selectionStatus.current}\n            apiRef={apiRef!}\n            isRowSelectable={isRowSelectable}\n            page={page!}\n            onPageChange={onPageChange as any}\n            pageSize={pageSize!}\n            onPageSizeChange={onPageSizeChange as any}\n            rowsPerPageOptions={rowsPerPageOptions}\n            paginationProps={paginationProps}\n          />\n        )\n      ) : null}\n    </>\n  );\n};\n"],"names":["ToolbarWrapper","_ref","hideToolbar","RenderedToolbar","filterModel","onFilterModelChange","pagination","paginationPlacement","selectionStatus","apiRef","isRowSelectable","page","onPageChange","pageSize","onPageSizeChange","rowsPerPageOptions","paginationProps","paginationMode","rowCount","forwardedProps","_objectWithoutProperties","_excluded","React","createElement","Fragment","_extends","ServerSideControlledPagination","displaySelection","displayRowsPerPage","displayPagination","includes","current","ControlledPagination"],"mappings":";;;;;;AA0BaA,MAAAA,cAA6C,GAAGC,IAAA,IAmBvD;EAAA,IAnBwD;MAC5DC,WAAW;MACXC,eAAe;MACfC,WAAW;MACXC,mBAAmB;MACnBC,UAAU;MACVC,mBAAmB;MACnBC,eAAe;MACfC,MAAM;MACNC,eAAe;MACfC,IAAI;MACJC,YAAY;MACZC,QAAQ;MACRC,gBAAgB;MAChBC,kBAAkB;MAClBC,eAAe;AACfC,MAAAA,cAAc,GAAG,QAAQ;AACzBC,MAAAA,QAAAA;AAEF,KAAC,GAAAjB,IAAA;AADIkB,IAAAA,cAAc,GAAAC,wBAAA,CAAAnB,IAAA,EAAAoB,SAAA,CAAA,CAAA;AAEjB,EAAA,oBACEC,cAAA,CAAAC,aAAA,CAAAD,cAAA,CAAAE,QAAA,EACG,IAAA,EAAA,CAACtB,WAAW,gBACXoB,cAAA,CAAAC,aAAA,CAACpB,eAAe,EAAAsB,QAAA,KAAKN,cAAc,EAAA;AAAEf,IAAAA,WAAW,EAAEA,WAAY;AAACC,IAAAA,mBAAmB,EAAEA,mBAAAA;AAAoB,GAAA,CAAE,CAAC,GACzG,IAAI,EACPC,UAAU,GACTW,cAAc,IAAI,QAAQ,gBACxBK,cAAA,CAAAC,aAAA,CAACG,8BAA8B,EAAA;AAC7BC,IAAAA,gBAAgB,EAAE,IAAK;AACvBC,IAAAA,kBAAkB,EAAE,KAAM;IAC1BC,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,CAACC,QAAQ,CAACvB,mBAAoB,CAAE;IAClEC,eAAe,EAAEA,eAAe,CAACuB,OAAQ;AACzCpB,IAAAA,IAAI,EAAEA,IAAM;AACZC,IAAAA,YAAY,EAAEA,YAAoB;AAClCC,IAAAA,QAAQ,EAAEA,QAAU;AACpBC,IAAAA,gBAAgB,EAAEA,gBAAwB;AAC1CC,IAAAA,kBAAkB,EAAEA,kBAAmB;AACvCC,IAAAA,eAAe,EAAEA,eAAgB;AACjCE,IAAAA,QAAQ,EAAEA,QAAAA;AAAU,GACrB,CAAC,gBAEFI,cAAA,CAAAC,aAAA,CAACS,oBAAoB,EAAA;AACnBL,IAAAA,gBAAgB,EAAE,IAAK;AACvBC,IAAAA,kBAAkB,EAAE,KAAM;IAC1BC,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,CAACC,QAAQ,CAACvB,mBAAoB,CAAE;IAClEC,eAAe,EAAEA,eAAe,CAACuB,OAAQ;AACzCtB,IAAAA,MAAM,EAAEA,MAAQ;AAChBC,IAAAA,eAAe,EAAEA,eAAgB;AACjCC,IAAAA,IAAI,EAAEA,IAAM;AACZC,IAAAA,YAAY,EAAEA,YAAoB;AAClCC,IAAAA,QAAQ,EAAEA,QAAU;AACpBC,IAAAA,gBAAgB,EAAEA,gBAAwB;AAC1CC,IAAAA,kBAAkB,EAAEA,kBAAmB;AACvCC,IAAAA,eAAe,EAAEA,eAAAA;GAClB,CACF,GACC,IACJ,CAAC,CAAA;AAEP;;;;"}

package/hooks/useControlledDatagridState.js

@@ -0,0 +1,109 @@
+import { useState, useEffect } from 'react';
+
+const useControlledDatagridState = _ref => {
+  var _initialState$paginat, _initialState$paginat2;
+  let {
+    initialState,
+    rowsPerPageOptions,
+    propsColumnVisibilityModel,
+    propsFilterModel,
+    propsOnColumnVisibilityModelChange,
+    propsOnFilterModelChange,
+    propsOnPageChange,
+    propsOnPageSizeChange,
+    propsOnPinnedColumnsChange,
+    propsOnSortModelChange,
+    propsPage,
+    propsPageSize,
+    propsPinnedColumns,
+    propsSortModel
+  } = _ref;
+  const [filterModel, setFilterModel] = useState(propsFilterModel);
+  useEffect(() => {
+    setFilterModel(propsFilterModel);
+  }, [propsFilterModel]);
+  const onFilterModelChange = (model, details) => {
+    if (propsOnFilterModelChange) {
+      propsOnFilterModelChange(model, details);
+    } else {
+      setFilterModel(model);
+    }
+  };
+  const [columnVisibilityModel, setColumnVisibilityModel] = useState(propsColumnVisibilityModel);
+  useEffect(() => {
+    setColumnVisibilityModel(propsColumnVisibilityModel);
+  }, [propsColumnVisibilityModel]);
+  const onColumnVisibilityModelChange = (model, details) => {
+    if (propsOnColumnVisibilityModelChange) {
+      propsOnColumnVisibilityModelChange(model, details);
+    } else {
+      setColumnVisibilityModel(model);
+    }
+  };
+  const [pinnedColumns, setPinnedColumns] = useState(propsPinnedColumns);
+  useEffect(() => {
+    setPinnedColumns(propsPinnedColumns);
+  }, [propsPinnedColumns]);
+  const onPinnedColumnsChange = (model, details) => {
+    if (propsOnPinnedColumnsChange) {
+      propsOnPinnedColumnsChange(model, details);
+    } else {
+      setPinnedColumns(model);
+    }
+  };
+  const [sortModel, setSortModel] = useState(propsSortModel);
+  useEffect(() => {
+    setSortModel(propsSortModel);
+  }, [propsSortModel]);
+  const onSortModelChange = (model, details) => {
+    if (propsOnSortModelChange) {
+      propsOnSortModelChange(model, details);
+    } else {
+      setSortModel(model);
+    }
+  };
+  const [page, setPage] = useState((initialState === null || initialState === void 0 ? void 0 : (_initialState$paginat = initialState.pagination) === null || _initialState$paginat === void 0 ? void 0 : _initialState$paginat.page) || propsPage || 0);
+  const [pageSize, setPageSize] = useState((initialState === null || initialState === void 0 ? void 0 : (_initialState$paginat2 = initialState.pagination) === null || _initialState$paginat2 === void 0 ? void 0 : _initialState$paginat2.pageSize) || propsPageSize || (rowsPerPageOptions === null || rowsPerPageOptions === void 0 ? void 0 : rowsPerPageOptions[0]) || 25);
+  const onPageChange = page => {
+    if (propsOnPageChange) {
+      propsOnPageChange(page, undefined);
+    } else {
+      setPage(page);
+    }
+  };
+  useEffect(() => {
+    if (propsPage || propsPage === 0) {
+      setPage(propsPage);
+    }
+  }, [propsPage]);
+  const onPageSizeChange = pageSize => {
+    onPageChange(0);
+    if (propsOnPageSizeChange) {
+      propsOnPageSizeChange(pageSize, undefined);
+    } else {
+      setPageSize(pageSize);
+    }
+  };
+  useEffect(() => {
+    if (propsPageSize) {
+      setPageSize(propsPageSize);
+    }
+  }, [propsPageSize]);
+  return {
+    filterModel,
+    onFilterModelChange,
+    columnVisibilityModel,
+    onColumnVisibilityModelChange,
+    pinnedColumns,
+    onPinnedColumnsChange,
+    sortModel,
+    onSortModelChange,
+    page,
+    pageSize,
+    onPageChange,
+    onPageSizeChange
+  };
+};
+
+export { useControlledDatagridState };
+//# sourceMappingURL=useControlledDatagridState.js.map

package/hooks/useControlledDatagridState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useControlledDatagridState.js","sources":["../../src/hooks/useControlledDatagridState.tsx"],"sourcesContent":["import {\n  GridCallbackDetails,\n  GridColumnVisibilityModel,\n  GridFilterModel,\n  GridPinnedColumns,\n  GridSortModel,\n} from '@mui/x-data-grid-pro';\nimport { useEffect, useState } from 'react';\nimport { DataGridProps } from '../components/DataGrid';\n\nexport interface UseControlledDatagridStateProps {\n  initialState: DataGridProps['initialState'];\n  rowsPerPageOptions: DataGridProps['rowsPerPageOptions'];\n  propsColumnVisibilityModel: DataGridProps['columnVisibilityModel'];\n  propsFilterModel: DataGridProps['filterModel'];\n  propsOnColumnVisibilityModelChange: DataGridProps['onColumnVisibilityModelChange'];\n  propsOnFilterModelChange: DataGridProps['onFilterModelChange'];\n  propsOnPageChange: DataGridProps['onPageChange'];\n  propsOnPageSizeChange: DataGridProps['onPageSizeChange'];\n  propsOnPinnedColumnsChange: DataGridProps['onPinnedColumnsChange'];\n  propsOnSortModelChange: DataGridProps['onSortModelChange'];\n  propsPage: DataGridProps['page'];\n  propsPageSize: DataGridProps['pageSize'];\n  propsPinnedColumns: DataGridProps['pinnedColumns'];\n  propsSortModel: DataGridProps['sortModel'];\n}\n\nexport const useControlledDatagridState = ({\n  initialState,\n  rowsPerPageOptions,\n  propsColumnVisibilityModel,\n  propsFilterModel,\n  propsOnColumnVisibilityModelChange,\n  propsOnFilterModelChange,\n  propsOnPageChange,\n  propsOnPageSizeChange,\n  propsOnPinnedColumnsChange,\n  propsOnSortModelChange,\n  propsPage,\n  propsPageSize,\n  propsPinnedColumns,\n  propsSortModel,\n}: UseControlledDatagridStateProps) => {\n  const [filterModel, setFilterModel] = useState(propsFilterModel);\n  useEffect(() => {\n    setFilterModel(propsFilterModel);\n  }, [propsFilterModel]);\n\n  const onFilterModelChange = (model: GridFilterModel, details: GridCallbackDetails<'filter'>) => {\n    if (propsOnFilterModelChange) {\n      propsOnFilterModelChange(model, details);\n    } else {\n      setFilterModel(model);\n    }\n  };\n\n  const [columnVisibilityModel, setColumnVisibilityModel] = useState(propsColumnVisibilityModel);\n  useEffect(() => {\n    setColumnVisibilityModel(propsColumnVisibilityModel);\n  }, [propsColumnVisibilityModel]);\n\n  const onColumnVisibilityModelChange = (model: GridColumnVisibilityModel, details: GridCallbackDetails<'filter'>) => {\n    if (propsOnColumnVisibilityModelChange) {\n      propsOnColumnVisibilityModelChange(model, details);\n    } else {\n      setColumnVisibilityModel(model);\n    }\n  };\n\n  const [pinnedColumns, setPinnedColumns] = useState(propsPinnedColumns);\n  useEffect(() => {\n    setPinnedColumns(propsPinnedColumns);\n  }, [propsPinnedColumns]);\n\n  const onPinnedColumnsChange = (model: GridPinnedColumns, details: GridCallbackDetails<'filter'>) => {\n    if (propsOnPinnedColumnsChange) {\n      propsOnPinnedColumnsChange(model, details);\n    } else {\n      setPinnedColumns(model);\n    }\n  };\n\n  const [sortModel, setSortModel] = useState(propsSortModel);\n  useEffect(() => {\n    setSortModel(propsSortModel);\n  }, [propsSortModel]);\n\n  const onSortModelChange = (model: GridSortModel, details: GridCallbackDetails<'filter'>) => {\n    if (propsOnSortModelChange) {\n      propsOnSortModelChange(model, details);\n    } else {\n      setSortModel(model);\n    }\n  };\n\n  const [page, setPage] = useState(initialState?.pagination?.page || propsPage || 0);\n  const [pageSize, setPageSize] = useState(\n    initialState?.pagination?.pageSize || propsPageSize || rowsPerPageOptions?.[0] || 25\n  );\n\n  const onPageChange = (page: number) => {\n    if (propsOnPageChange) {\n      propsOnPageChange(page, undefined!);\n    } else {\n      setPage(page);\n    }\n  };\n\n  useEffect(() => {\n    if (propsPage || propsPage === 0) {\n      setPage(propsPage);\n    }\n  }, [propsPage]);\n\n  const onPageSizeChange = (pageSize: number) => {\n    onPageChange(0);\n    if (propsOnPageSizeChange) {\n      propsOnPageSizeChange(pageSize, undefined!);\n    } else {\n      setPageSize(pageSize);\n    }\n  };\n\n  useEffect(() => {\n    if (propsPageSize) {\n      setPageSize(propsPageSize);\n    }\n  }, [propsPageSize]);\n\n  return {\n    filterModel,\n    onFilterModelChange,\n    columnVisibilityModel,\n    onColumnVisibilityModelChange,\n    pinnedColumns,\n    onPinnedColumnsChange,\n    sortModel,\n    onSortModelChange,\n    page,\n    pageSize,\n    onPageChange,\n    onPageSizeChange,\n  };\n};\n"],"names":["useControlledDatagridState","_ref","_initialState$paginat","_initialState$paginat2","initialState","rowsPerPageOptions","propsColumnVisibilityModel","propsFilterModel","propsOnColumnVisibilityModelChange","propsOnFilterModelChange","propsOnPageChange","propsOnPageSizeChange","propsOnPinnedColumnsChange","propsOnSortModelChange","propsPage","propsPageSize","propsPinnedColumns","propsSortModel","filterModel","setFilterModel","useState","useEffect","onFilterModelChange","model","details","columnVisibilityModel","setColumnVisibilityModel","onColumnVisibilityModelChange","pinnedColumns","setPinnedColumns","onPinnedColumnsChange","sortModel","setSortModel","onSortModelChange","page","setPage","pagination","pageSize","setPageSize","onPageChange","undefined","onPageSizeChange"],"mappings":"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"}

package/hooks/useFetchState.js

@@ -0,0 +1,34 @@
+import { useCallback } from 'react';
+
+// Get and Set data from LocalStorage WITHOUT useState
+
+// triggering a state update and consecutive re-render
+const useFetchState = (defaultValue, key) => {
+  let stickyValue = null;
+  try {
+    stickyValue = window.localStorage.getItem(key);
+  } catch (e) {
+    console.error('StatefulDataGrid: error getting item from local storage: ', e);
+  }
+  let parsedValue = stickyValue !== null && stickyValue !== undefined && stickyValue !== 'undefined' ? JSON.parse(stickyValue) : defaultValue;
+
+  // TODO: temporary workaround to avoid clashes when someone had sorting on the now-removed screenshot field (renamed to num_annotations)
+  // Consider upgrading the Datagrid component library as the exception handling was added in this PR: https://github.com/mui-org/material-ui-x/pull/3224
+  if (parsedValue instanceof Array) {
+    const fields = (parsedValue || []).map(item => item.field);
+    if (fields.includes('screenshot') || fields.includes('diffs')) {
+      parsedValue = defaultValue;
+    }
+  }
+  const updateValue = useCallback(value => {
+    try {
+      window.localStorage.setItem(key, JSON.stringify(value));
+    } catch (e) {
+      console.error('StatefulDataGrid: error setting item into local storage: ', e);
+    }
+  }, [key]);
+  return [parsedValue, updateValue];
+};
+
+export { useFetchState };
+//# sourceMappingURL=useFetchState.js.map

package/hooks/useFetchState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFetchState.js","sources":["../../src/hooks/useFetchState.tsx"],"sourcesContent":["// Get and Set data from LocalStorage WITHOUT useState\n// Useful for when you want to get and set data without\n\nimport { useCallback } from 'react';\n\n// triggering a state update and consecutive re-render\nexport const useFetchState = (defaultValue: unknown, key: string) => {\n  let stickyValue = null;\n  try {\n    stickyValue = window.localStorage.getItem(key);\n  } catch (e) {\n    console.error('StatefulDataGrid: error getting item from local storage: ', e);\n  }\n  let parsedValue =\n    stickyValue !== null && stickyValue !== undefined && stickyValue !== 'undefined'\n      ? JSON.parse(stickyValue)\n      : defaultValue;\n\n  // TODO: temporary workaround to avoid clashes when someone had sorting on the now-removed screenshot field (renamed to num_annotations)\n  // Consider upgrading the Datagrid component library as the exception handling was added in this PR: https://github.com/mui-org/material-ui-x/pull/3224\n  if (parsedValue instanceof Array) {\n    const fields = (parsedValue || []).map((item) => item.field);\n    if (fields.includes('screenshot') || fields.includes('diffs')) {\n      parsedValue = defaultValue;\n    }\n  }\n\n  const updateValue = useCallback(\n    (value: unknown) => {\n      try {\n        window.localStorage.setItem(key, JSON.stringify(value));\n      } catch (e) {\n        console.error('StatefulDataGrid: error setting item into local storage: ', e);\n      }\n    },\n    [key]\n  );\n\n  return [parsedValue, updateValue];\n};\n"],"names":["useFetchState","defaultValue","key","stickyValue","window","localStorage","getItem","e","console","error","parsedValue","undefined","JSON","parse","Array","fields","map","item","field","includes","updateValue","useCallback","value","setItem","stringify"],"mappings":";;AAAA;;AAKA;MACaA,aAAa,GAAGA,CAACC,YAAqB,EAAEC,GAAW,KAAK;EACnE,IAAIC,WAAW,GAAG,IAAI,CAAA;EACtB,IAAI;IACFA,WAAW,GAAGC,MAAM,CAACC,YAAY,CAACC,OAAO,CAACJ,GAAG,CAAC,CAAA;GAC/C,CAAC,OAAOK,CAAC,EAAE;AACVC,IAAAA,OAAO,CAACC,KAAK,CAAC,2DAA2D,EAAEF,CAAC,CAAC,CAAA;AAC/E,GAAA;EACA,IAAIG,WAAW,GACbP,WAAW,KAAK,IAAI,IAAIA,WAAW,KAAKQ,SAAS,IAAIR,WAAW,KAAK,WAAW,GAC5ES,IAAI,CAACC,KAAK,CAACV,WAAW,CAAC,GACvBF,YAAY,CAAA;;AAElB;AACA;EACA,IAAIS,WAAW,YAAYI,KAAK,EAAE;AAChC,IAAA,MAAMC,MAAM,GAAG,CAACL,WAAW,IAAI,EAAE,EAAEM,GAAG,CAAEC,IAAI,IAAKA,IAAI,CAACC,KAAK,CAAC,CAAA;AAC5D,IAAA,IAAIH,MAAM,CAACI,QAAQ,CAAC,YAAY,CAAC,IAAIJ,MAAM,CAACI,QAAQ,CAAC,OAAO,CAAC,EAAE;AAC7DT,MAAAA,WAAW,GAAGT,YAAY,CAAA;AAC5B,KAAA;AACF,GAAA;AAEA,EAAA,MAAMmB,WAAW,GAAGC,WAAW,CAC5BC,KAAc,IAAK;IAClB,IAAI;AACFlB,MAAAA,MAAM,CAACC,YAAY,CAACkB,OAAO,CAACrB,GAAG,EAAEU,IAAI,CAACY,SAAS,CAACF,KAAK,CAAC,CAAC,CAAA;KACxD,CAAC,OAAOf,CAAC,EAAE;AACVC,MAAAA,OAAO,CAACC,KAAK,CAAC,2DAA2D,EAAEF,CAAC,CAAC,CAAA;AAC/E,KAAA;AACF,GAAC,EACD,CAACL,GAAG,CACN,CAAC,CAAA;AAED,EAAA,OAAO,CAACQ,WAAW,EAAEU,WAAW,CAAC,CAAA;AACnC;;;;"}

package/hooks/useStatefulTable.d.ts

@@ -0,0 +1,12 @@
+import { GridFilterModel } from '@mui/x-data-grid-pro';
+
+interface ExtendedGridFilterModel extends GridFilterModel {
+    quickFilterValues?: string[];
+}
+interface ExtendedGridPaginationModel {
+    page: number;
+    pageSize: number;
+    direction?: 'next' | 'back';
+}
+
+export { ExtendedGridFilterModel, ExtendedGridPaginationModel };

package/hooks/useStatefulTable.js

@@ -0,0 +1,182 @@
+import { objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
+import { useEffect, useCallback, useMemo } from 'react';
+import { useTableStates } from './useTableStates.js';
+import { clearPreviousVersionStorage } from '../utils/localStorage.js';
+import { getModelsParsedOrUpdateLocalStorage, updateUrl } from '../utils/urlLocalStorageSync.js';
+
+const useStatefulTable = props => {
+  const {
+    // density = 'standard',
+    apiRef,
+    initialState,
+    columns: propsColumns,
+    onColumnVisibilityModelChange: propsOnColumnVisibilityModelChange,
+    onColumnWidthChange: propsOnColumnWidthChange,
+    onFilterModelChange: propsOnFilterModelChange,
+    onPageChange: propsOnPageChange,
+    onPageSizeChange: propsOnPageSizeChange,
+    onPinnedColumnsChange: propsOnPinnedColumnsChange,
+    onSortModelChange: propsOnSortModelChange,
+    useRouter,
+    localStorageVersion = 1,
+    previousLocalStorageVersions = []
+  } = props;
+  const {
+    search,
+    pathname,
+    historyReplace
+  } = useRouter();
+  const id = pathname;
+
+  // States and setters persisted in the local storage for this table
+  const {
+    paginationModel,
+    setPaginationModel,
+    sortModel,
+    setSortModel,
+    localStorageFilters,
+    setLocalStorageFilters,
+    visibilityModelLocalStorage,
+    setVisibilityModelLocalStorage,
+    pinnedColumns,
+    setPinnedColumns,
+    dimensionModel,
+    setDimensionModel
+  } = useTableStates(id, localStorageVersion);
+
+  // clearing up old version keys
+  useEffect(() => clearPreviousVersionStorage(id, previousLocalStorageVersions), [id, previousLocalStorageVersions]);
+  const onColumnDimensionChange = useCallback(_ref => {
+    let {
+      newWidth,
+      field
+    } = _ref;
+    setDimensionModel(_objectSpread2(_objectSpread2({}, dimensionModel), {}, {
+      [field]: newWidth
+    }));
+  }, [dimensionModel, setDimensionModel]);
+  const {
+    filterModel: filterParsed,
+    sortModel: sortModelParsed,
+    paginationModel: paginationModelParsed,
+    columnVisibilityModel: visibilityModel,
+    pinnedColumnsModel
+  } = getModelsParsedOrUpdateLocalStorage(search || '', localStorageVersion, propsColumns, historyReplace, initialState, {
+    localStorageFilters,
+    setLocalStorageFilters,
+    localStorageSorting: sortModel,
+    setLocalStorageSorting: setSortModel,
+    localStoragePagination: paginationModel,
+    setLocalStoragePagination: setPaginationModel,
+    localStorageColumnsVisibility: visibilityModelLocalStorage,
+    setLocalStorageColumnsVisibility: setVisibilityModelLocalStorage,
+    localStoragePinnedColumns: pinnedColumns,
+    setLocalStoragePinnedColumns: setPinnedColumns
+  });
+  const columns = useMemo(() => propsColumns.map(column => {
+    column.width = dimensionModel[column.field] || column.width || 100;
+    return column;
+  }), [propsColumns, dimensionModel]);
+
+  /** Add resetPage method to apiRef. */
+  apiRef.current.resetPage = () => {
+    apiRef.current.setPage(0);
+  };
+  return {
+    apiRef,
+    columns,
+    onFilterModelChange: (model, details) => {
+      const filterModel = _objectSpread2(_objectSpread2({}, model), {}, {
+        items: model.items.map(item => {
+          const column = apiRef.current.getColumn(item.columnField);
+          item.type = column.type || 'string';
+          return item;
+        }),
+        quickFilterValues: model.quickFilterValues || []
+      });
+      propsOnFilterModelChange === null || propsOnFilterModelChange === void 0 ? void 0 : propsOnFilterModelChange(filterModel, details);
+      updateUrl({
+        filterModel: filterModel,
+        sortModel: sortModelParsed,
+        paginationModel: paginationModelParsed,
+        columnsModel: apiRef.current.state.columns.columnVisibilityModel,
+        pinnedColumnsModel: pinnedColumnsModel
+      }, search, localStorageVersion, historyReplace, columns);
+    },
+    filterModel: filterParsed,
+    onSortModelChange: (model, details) => {
+      propsOnSortModelChange === null || propsOnSortModelChange === void 0 ? void 0 : propsOnSortModelChange(model, details);
+      updateUrl({
+        filterModel: filterParsed,
+        sortModel: model,
+        paginationModel: paginationModelParsed,
+        columnsModel: apiRef.current.state.columns.columnVisibilityModel,
+        pinnedColumnsModel: pinnedColumnsModel
+      }, search, localStorageVersion, historyReplace, columns);
+    },
+    sortModel: sortModelParsed,
+    onPinnedColumnsChange: (pinnedColumns, details) => {
+      propsOnPinnedColumnsChange === null || propsOnPinnedColumnsChange === void 0 ? void 0 : propsOnPinnedColumnsChange(pinnedColumns, details);
+      updateUrl({
+        filterModel: filterParsed,
+        sortModel: sortModelParsed,
+        paginationModel: paginationModelParsed,
+        columnsModel: apiRef.current.state.columns.columnVisibilityModel,
+        pinnedColumnsModel: pinnedColumns
+      }, search, localStorageVersion, historyReplace, columns);
+    },
+    pinnedColumns: pinnedColumnsModel,
+    page: paginationModelParsed.page,
+    pageSize: paginationModelParsed.pageSize,
+    onPageChange: (page, details) => {
+      const direction = paginationModelParsed.page < page ? 'next' : 'back';
+      propsOnPageChange === null || propsOnPageChange === void 0 ? void 0 : propsOnPageChange(page, details);
+      updateUrl({
+        filterModel: filterParsed,
+        sortModel: sortModelParsed,
+        paginationModel: {
+          page,
+          pageSize: paginationModelParsed.pageSize,
+          direction
+        },
+        columnsModel: apiRef.current.state.columns.columnVisibilityModel,
+        pinnedColumnsModel: pinnedColumnsModel
+      }, search, localStorageVersion, historyReplace, columns);
+    },
+    onPageSizeChange: (pageSize, details) => {
+      propsOnPageSizeChange === null || propsOnPageSizeChange === void 0 ? void 0 : propsOnPageSizeChange(pageSize, details);
+      updateUrl({
+        filterModel: filterParsed,
+        sortModel: sortModelParsed,
+        paginationModel: {
+          page: paginationModelParsed.page,
+          pageSize,
+          direction: paginationModelParsed.direction
+        },
+        columnsModel: apiRef.current.state.columns.columnVisibilityModel,
+        pinnedColumnsModel: pinnedColumnsModel
+      }, search, localStorageVersion, historyReplace, columns);
+    },
+    columnVisibilityModel: visibilityModel,
+    onColumnVisibilityModelChange: (columnsVisibilityModel, details) => {
+      propsOnColumnVisibilityModelChange === null || propsOnColumnVisibilityModelChange === void 0 ? void 0 : propsOnColumnVisibilityModelChange(columnsVisibilityModel, details);
+      updateUrl({
+        filterModel: filterParsed,
+        sortModel: sortModelParsed,
+        paginationModel: paginationModelParsed,
+        columnsModel: columnsVisibilityModel,
+        pinnedColumnsModel: pinnedColumnsModel
+      }, search, localStorageVersion, historyReplace, columns);
+    },
+    onColumnWidthChange: (params, event, details) => {
+      propsOnColumnWidthChange === null || propsOnColumnWidthChange === void 0 ? void 0 : propsOnColumnWidthChange(params, event, details);
+      onColumnDimensionChange({
+        newWidth: params.width,
+        field: params.colDef.field
+      });
+    }
+  };
+};
+
+export { useStatefulTable };
+//# sourceMappingURL=useStatefulTable.js.map