@okta/odyssey-react-mui 0.23.0 → 1.0.0

package/dist/index.js

@@ -9,39 +9,46 @@
  *
  * See the License for the specific language governing permissions and limitations under the License.
  */
-export { Alert, AlertTitle, Box, Chip, createTheme, CssBaseline, DialogContentText, Divider, FormControl, FormControlLabel, FormGroup, FormHelperText, FormLabel, IconButton, InputAdornment, InputBase, InputLabel, List, ListItem, ListItemIcon, ListItemText, ListSubheader, Menu, MenuList, Paper, ScopedCssBaseline, Select, Snackbar, Stack, SvgIcon, Tab, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TableSortLabel, ThemeProvider as MuiThemeProvider, Typography } from "@mui/material";
-export { TabContext, TabList, TabPanel } from "@mui/lab";
-export { default as FavoriteIcon } from "@mui/icons-material/Favorite";
+
 export { deepmerge, visuallyHidden } from "@mui/utils";
+export { createTheme, CssBaseline, DialogContentText, Divider, InputAdornment, InputBase, ListItemIcon, ListItemText, ListSubheader, MenuList, Paper, ScopedCssBaseline, ThemeProvider } from "@mui/material";
+export { useOdysseyDesignTokens } from "./OdysseyDesignTokensContext.js";
 export * from "./Autocomplete.js";
 export * from "./Banner.js";
+export * from "./Box.js";
 export * from "./Button.js";
+export * from "./Callout.js";
 export * from "./Checkbox.js";
 export * from "./CheckboxGroup.js";
 export * from "./CircularProgress.js";
 export * from "./createUniqueId.js";
 export * from "./Dialog.js";
-export * from "./Icon.js";
-export * from "./iconDictionary/index.js";
-export * from "./Infobox.js";
+export * from "./Fieldset.js";
+export * from "./Form.js";
 export * from "./Link.js";
 export * from "./MenuButton.js";
 export * from "./MenuItem.js";
+export * from "./NativeSelect.js";
+export * from "./NullElement.js";
 export * from "./OdysseyCacheProvider.js";
+export * from "./OdysseyProvider.js";
 export * from "./OdysseyThemeProvider.js";
+export * from "./OdysseyTranslationProvider.js";
 export * from "./PasswordField.js";
 export * from "./Radio.js";
 export * from "./RadioGroup.js";
 export * from "./ScreenReaderText.js";
 export * from "./SearchField.js";
+export * from "./Select.js";
 export * from "./Status.js";
+export * from "./Tabs.js";
 export * from "./Tag.js";
 export * from "./TagList.js";
 export * from "./TextField.js";
 export * from "./theme/index.js";
-export * from "./ThemeProvider.js";
-export * from "./Tooltip.js";
 export * from "./Toast.js";
 export * from "./ToastStack.js";
+export * from "./Tooltip.js";
+export * from "./Typography.js";
 export * from "./useUniqueId.js";
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Alert","AlertTitle","Box","Chip","createTheme","CssBaseline","DialogContentText","Divider","FormControl","FormControlLabel","FormGroup","FormHelperText","FormLabel","IconButton","InputAdornment","InputBase","InputLabel","List","ListItem","ListItemIcon","ListItemText","ListSubheader","Menu","MenuList","Paper","ScopedCssBaseline","Select","Snackbar","Stack","SvgIcon","Tab","Table","TableBody","TableCell","TableContainer","TableHead","TableRow","TableSortLabel","ThemeProvider","MuiThemeProvider","Typography","TabContext","TabList","TabPanel","default","FavoriteIcon","deepmerge","visuallyHidden"],"sources":["../src/index.ts"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nexport {\n  Alert,\n  AlertTitle,\n  Box,\n  Chip,\n  createTheme,\n  CssBaseline,\n  DialogContentText,\n  Divider,\n  FormControl,\n  FormControlLabel,\n  FormGroup,\n  FormHelperText,\n  FormLabel,\n  IconButton,\n  /** @deprecated Will be removed in a future Odyssey version. Please switch to `TextField`. */\n  InputAdornment,\n  /** @deprecated Will be removed in a future Odyssey version. Please switch to `TextField`. */\n  InputBase,\n  /** @deprecated Will be removed in a future Odyssey version. Please switch to `TextField`. */\n  InputLabel,\n  List,\n  ListItem,\n  ListItemIcon,\n  ListItemText,\n  ListSubheader,\n  Menu,\n  MenuList,\n  Paper,\n  ScopedCssBaseline,\n  Select,\n  Snackbar,\n  Stack,\n  SvgIcon,\n  Tab,\n  Table,\n  TableBody,\n  TableCell,\n  TableContainer,\n  TableHead,\n  TableRow,\n  TableSortLabel,\n  ThemeProvider as MuiThemeProvider,\n  Typography,\n} from \"@mui/material\";\n\nexport type {\n  AlertProps,\n  AlertTitleProps,\n  BoxProps,\n  ChipProps,\n  CssBaselineProps,\n  DividerProps,\n  FormControlLabelProps,\n  FormControlProps,\n  FormGroupProps,\n  FormHelperTextProps,\n  FormLabelProps,\n  IconButtonProps,\n  /** @deprecated Will be removed in a future Odyssey version. Please switch to `TextFieldProps`. */\n  InputAdornmentProps,\n  /** @deprecated Will be removed in a future Odyssey version. Please switch to `TextFieldProps`. */\n  InputBaseProps,\n  /** @deprecated Will be removed in a future Odyssey version. Please switch to `TextFieldProps`. */\n  InputLabelProps,\n  ListProps,\n  ListItemProps,\n  ListItemIconProps,\n  ListItemTextProps,\n  ListSubheaderProps,\n  MenuProps,\n  MenuListProps,\n  PaperProps,\n  ScopedCssBaselineProps,\n  SelectChangeEvent,\n  SelectProps,\n  SnackbarProps,\n  StackProps,\n  SvgIconProps,\n  TabProps,\n  TableBodyProps,\n  TableCellProps,\n  TableContainerProps,\n  TableHeadProps,\n  TableProps,\n  TableRowProps,\n  TableSortLabelProps,\n  ThemeOptions,\n  TypographyProps,\n} from \"@mui/material\";\n\nexport { TabContext, TabList, TabPanel } from \"@mui/lab\";\n\nexport type { TabContextProps, TabListProps, TabPanelProps } from \"@mui/lab\";\n\nexport { default as FavoriteIcon } from \"@mui/icons-material/Favorite\";\n\nexport { deepmerge, visuallyHidden } from \"@mui/utils\";\n\nexport * from \"./Autocomplete\";\nexport * from \"./Banner\";\nexport * from \"./Button\";\nexport * from \"./Checkbox\";\nexport * from \"./CheckboxGroup\";\nexport * from \"./CircularProgress\";\nexport * from \"./createUniqueId\";\nexport * from \"./Dialog\";\nexport * from \"./Icon\";\nexport * from \"./iconDictionary\";\nexport * from \"./Infobox\";\nexport * from \"./Link\";\nexport * from \"./MenuButton\";\nexport * from \"./MenuItem\";\nexport * from \"./OdysseyCacheProvider\";\nexport * from \"./OdysseyThemeProvider\";\nexport * from \"./PasswordField\";\nexport * from \"./Radio\";\nexport * from \"./RadioGroup\";\nexport * from \"./ScreenReaderText\";\nexport * from \"./SearchField\";\nexport * from \"./Status\";\nexport * from \"./Tag\";\nexport * from \"./TagList\";\nexport * from \"./TextField\";\nexport * from \"./theme\";\nexport * from \"./ThemeProvider\";\nexport * from \"./Tooltip\";\nexport * from \"./Toast\";\nexport * from \"./ToastStack\";\nexport * from \"./useUniqueId\";\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,SACEA,KADF,EAEEC,UAFF,EAGEC,GAHF,EAIEC,IAJF,EAKEC,WALF,EAMEC,WANF,EAOEC,iBAPF,EAQEC,OARF,EASEC,WATF,EAUEC,gBAVF,EAWEC,SAXF,EAYEC,cAZF,EAaEC,SAbF,EAcEC,UAdF,EAgBEC,cAhBF,EAkBEC,SAlBF,EAoBEC,UApBF,EAqBEC,IArBF,EAsBEC,QAtBF,EAuBEC,YAvBF,EAwBEC,YAxBF,EAyBEC,aAzBF,EA0BEC,IA1BF,EA2BEC,QA3BF,EA4BEC,KA5BF,EA6BEC,iBA7BF,EA8BEC,MA9BF,EA+BEC,QA/BF,EAgCEC,KAhCF,EAiCEC,OAjCF,EAkCEC,GAlCF,EAmCEC,KAnCF,EAoCEC,SApCF,EAqCEC,SArCF,EAsCEC,cAtCF,EAuCEC,SAvCF,EAwCEC,QAxCF,EAyCEC,cAzCF,EA0CEC,aAAa,IAAIC,gBA1CnB,EA2CEC,UA3CF,QA4CO,eA5CP;AA2FA,SAASC,UAAT,EAAqBC,OAArB,EAA8BC,QAA9B,QAA8C,UAA9C;AAIA,SAASC,OAAO,IAAIC,YAApB,QAAwC,8BAAxC;AAEA,SAASC,SAAT,EAAoBC,cAApB,QAA0C,YAA1C"}
+{"version":3,"file":"index.js","names":["deepmerge","visuallyHidden","createTheme","CssBaseline","DialogContentText","Divider","InputAdornment","InputBase","ListItemIcon","ListItemText","ListSubheader","MenuList","Paper","ScopedCssBaseline","ThemeProvider","useOdysseyDesignTokens"],"sources":["../src/index.ts"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nexport { deepmerge, visuallyHidden } from \"@mui/utils\";\n\nexport {\n  createTheme,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  CssBaseline,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  DialogContentText,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  Divider,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  InputAdornment,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  InputBase,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  ListItemIcon,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  ListItemText,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  ListSubheader,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  MenuList,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  Paper,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  ScopedCssBaseline,\n  ThemeProvider,\n} from \"@mui/material\";\n\nexport type {\n  CssBaselineProps,\n  DialogContentTextProps,\n  DividerProps,\n  InputAdornmentProps,\n  InputBaseProps,\n  ListItemIconProps,\n  ListItemTextProps,\n  ListSubheaderProps,\n  MenuListProps,\n  PaperProps,\n  ScopedCssBaselineProps,\n  ThemeOptions,\n} from \"@mui/material\";\n\nexport { useOdysseyDesignTokens } from \"./OdysseyDesignTokensContext\";\n\nexport * from \"./Autocomplete\";\nexport * from \"./Banner\";\nexport * from \"./Box\";\nexport * from \"./Button\";\nexport * from \"./Callout\";\nexport * from \"./Checkbox\";\nexport * from \"./CheckboxGroup\";\nexport * from \"./CircularProgress\";\nexport * from \"./createUniqueId\";\nexport * from \"./Dialog\";\nexport * from \"./Fieldset\";\nexport * from \"./Form\";\nexport * from \"./Link\";\nexport * from \"./MenuButton\";\nexport * from \"./MenuItem\";\nexport * from \"./NativeSelect\";\nexport * from \"./NullElement\";\nexport * from \"./OdysseyCacheProvider\";\nexport * from \"./OdysseyProvider\";\nexport * from \"./OdysseyThemeProvider\";\nexport * from \"./OdysseyTranslationProvider\";\nexport * from \"./PasswordField\";\nexport * from \"./Radio\";\nexport * from \"./RadioGroup\";\nexport * from \"./ScreenReaderText\";\nexport * from \"./SearchField\";\nexport * from \"./Select\";\nexport * from \"./Status\";\nexport * from \"./Tabs\";\nexport * from \"./Tag\";\nexport * from \"./TagList\";\nexport * from \"./TextField\";\nexport * from \"./theme\";\nexport * from \"./Toast\";\nexport * from \"./ToastStack\";\nexport * from \"./Tooltip\";\nexport * from \"./Typography\";\nexport * from \"./useUniqueId\";\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,SAAS,EAAEC,cAAc,QAAQ,YAAY;AAEtD,SACEC,WAAW,EAEXC,WAAW,EAEXC,iBAAiB,EAEjBC,OAAO,EAEPC,cAAc,EAEdC,SAAS,EAETC,YAAY,EAEZC,YAAY,EAEZC,aAAa,EAEbC,QAAQ,EAERC,KAAK,EAELC,iBAAiB,EACjBC,aAAa,QACR,eAAe;AAAC,SAiBdC,sBAAsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA"}

package/dist/labs/DatePicker.js

@@ -0,0 +1,42 @@
+import _InputBase from "@mui/material/InputBase";
+/*!
+ * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+import { DatePicker as MuiDatePicker } from "@mui/x-date-pickers";
+import { useCallback } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const DatePicker = _ref => {
+  let {
+    label,
+    onChange,
+    value = null
+  } = _ref;
+  const renderInput = useCallback(_ref2 => {
+    let {
+      InputProps,
+      ...props
+    } = _ref2;
+    const combinedProps = {
+      ...InputProps,
+      ...props
+    };
+    return _jsx(_InputBase, {
+      ...combinedProps
+    });
+  }, []);
+  return _jsx(MuiDatePicker, {
+    label: label,
+    onChange: onChange,
+    renderInput: renderInput,
+    value: value
+  });
+};
+//# sourceMappingURL=DatePicker.js.map

package/dist/labs/DatePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.js","names":["DatePicker","MuiDatePicker","useCallback","jsx","_jsx","_ref","label","onChange","value","renderInput","_ref2","InputProps","props","combinedProps","_InputBase"],"sources":["../../src/labs/DatePicker.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { InputBase } from \"@mui/material\";\nimport {\n  DatePicker as MuiDatePicker,\n  DatePickerProps as MuiDatePickerProps,\n} from \"@mui/x-date-pickers\";\nimport { useCallback } from \"react\";\n\nexport type DatePickerProps<TInputDate, TDate> = {\n  label: MuiDatePickerProps<TInputDate, TDate>[\"label\"];\n  onChange: MuiDatePickerProps<TInputDate, TDate>[\"onChange\"];\n  value: MuiDatePickerProps<TInputDate, TDate>[\"value\"];\n};\n\nexport const DatePicker = <TInputDate, TDate>({\n  label,\n  onChange,\n  value = null,\n}: DatePickerProps<TInputDate, TDate>) => {\n  const renderInput = useCallback(({ InputProps, ...props }) => {\n    const combinedProps = {\n      ...InputProps,\n      ...props,\n    };\n\n    return <InputBase {...combinedProps} />;\n  }, []);\n\n  return (\n    <MuiDatePicker\n      label={label}\n      onChange={onChange}\n      renderInput={renderInput}\n      value={value}\n    />\n  );\n};\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA,SACEA,UAAU,IAAIC,aAAa,QAEtB,qBAAqB;AAC5B,SAASC,WAAW,QAAQ,OAAO;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAQpC,OAAO,MAAMJ,UAAU,GAAGK,IAAA,IAIgB;EAAA,IAJI;IAC5CC,KAAK;IACLC,QAAQ;IACRC,KAAK,GAAG;EAC0B,CAAC,GAAAH,IAAA;EACnC,MAAMI,WAAW,GAAGP,WAAW,CAACQ,KAAA,IAA8B;IAAA,IAA7B;MAAEC,UAAU;MAAE,GAAGC;IAAM,CAAC,GAAAF,KAAA;IACvD,MAAMG,aAAa,GAAG;MACpB,GAAGF,UAAU;MACb,GAAGC;IACL,CAAC;IAED,OAAOR,IAAA,CAAAU,UAAA;MAAA,GAAeD;IAAa,CAAG,CAAC;EACzC,CAAC,EAAE,EAAE,CAAC;EAEN,OACET,IAAA,CAACH,aAAa;IACZK,KAAK,EAAEA,KAAM;IACbC,QAAQ,EAAEA,QAAS;IACnBE,WAAW,EAAEA,WAAY;IACzBD,KAAK,EAAEA;EAAM,CACd,CAAC;AAEN,CAAC"}

package/dist/labs/DatePicker.types.js

@@ -0,0 +1,12 @@
+/*!
+ * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */import "@mui/x-date-pickers/themeAugmentation";
+//# sourceMappingURL=DatePicker.types.js.map

package/dist/labs/DatePicker.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.types.js","names":[],"sources":["../../src/labs/DatePicker.types.ts"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\n// This has to be imported separately for theme types, so it's been separated out to make that clear.\nimport \"@mui/x-date-pickers/themeAugmentation\";\n\nimport { PickersComponentNameToClassKey } from \"@mui/x-date-pickers/themeAugmentation\";\n\ndeclare module \"@mui/material/styles\" {\n  interface ComponentNameToClassKey extends PickersComponentNameToClassKey {\n    PrivatePickersYear:\n      | PickersComponentNameToClassKey[\"PrivatePickersYear\"]\n      | \"button\";\n  }\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAGA,OAAO,uCAAuC"}

package/dist/labs/PaginatedTable.js

@@ -0,0 +1,170 @@
+/*!
+ * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+import { Typography } from "../Typography.js";
+import MaterialReactTable from "material-react-table";
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Trans, useTranslation } from "react-i18next";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+const PaginatedTable = _ref => {
+  let {
+    columns,
+    data,
+    fetchMoreData,
+    getRowId,
+    hasError,
+    hasRowSelection,
+    initialState,
+    isFetching,
+    onGlobalFilterChange,
+    onPaginationChange,
+    onRowSelectionChange: onRowSelectionChangeProp,
+    rowsPerPage = 10,
+    state,
+    ToolbarButtons
+  } = _ref;
+  const {
+    t
+  } = useTranslation();
+  const rowVirtualizerInstanceRef = useRef(null);
+  const [columnFilters, setColumnFilters] = useState([]);
+  const [globalFilter, setGlobalFilter] = useState();
+  useEffect(() => {
+    if (globalFilter) {
+      onGlobalFilterChange?.(globalFilter);
+    }
+  }, [globalFilter, onGlobalFilterChange]);
+  useEffect(() => {
+    try {
+      rowVirtualizerInstanceRef.current?.scrollToIndex?.(0);
+    } catch (error) {
+      console.error(error);
+    }
+  }, [columnFilters, globalFilter]);
+  const totalFetchedRows = data.length ?? 0;
+  const renderBottomToolbarCustomActions = useCallback(() => fetchMoreData ? _jsx(Typography, {
+    children: _jsx(Trans, {
+      count: totalFetchedRows,
+      i18nKey: "table.fetchedrows.text",
+      values: {
+        totalRows: totalFetchedRows
+      }
+    })
+  }) : _jsx(Typography, {
+    children: _jsx(Trans, {
+      count: totalFetchedRows,
+      i18nKey: "table.rows.text",
+      values: {
+        totalRows: totalFetchedRows
+      }
+    })
+  }), [fetchMoreData, totalFetchedRows]);
+  const renderTopToolbarCustomActions = useCallback(_ref2 => {
+    let {
+      table
+    } = _ref2;
+    return _jsx(_Fragment, {
+      children: ToolbarButtons && _jsx(ToolbarButtons, {
+        table: table
+      })
+    });
+  }, [ToolbarButtons]);
+  const [rowSelection, setRowSelection] = useState({});
+  useEffect(() => {
+    onRowSelectionChangeProp?.(rowSelection);
+  }, [onRowSelectionChangeProp, rowSelection]);
+  const [pagination, setPagination] = useState(initialState?.pagination || {
+    pageIndex: 0,
+    pageSize: rowsPerPage
+  });
+  const dataLengthRef = useRef(data.length);
+  const updatePagination = useCallback(paginationFunction => {
+    if (data.length === dataLengthRef.current) {
+      setPagination(previousPagination => {
+        const nextPagination = paginationFunction(previousPagination);
+        return nextPagination;
+      });
+    } else {
+      dataLengthRef.current = data.length;
+    }
+  }, [data.length]);
+  useEffect(() => {
+    const numberOfPages = Math.floor(data.length / pagination.pageSize);
+    if (!isFetching && pagination.pageIndex > numberOfPages - 1) {
+      fetchMoreData?.();
+    }
+  }, [data.length, fetchMoreData, isFetching, pagination.pageIndex, pagination.pageSize]);
+  useEffect(() => {
+    onPaginationChange?.({
+      pageIndex: pagination.pageIndex,
+      pageSize: pagination.pageSize
+    });
+  }, [onPaginationChange, pagination.pageIndex, pagination.pageSize]);
+  const modifiedInitialState = useMemo(() => ({
+    pagination,
+    ...initialState
+  }), [initialState, pagination]);
+  const modifiedState = useMemo(() => ({
+    ...state,
+    pagination: {
+      pageIndex: pagination.pageIndex,
+      pageSize: pagination.pageSize
+    },
+    rowSelection
+  }), [pagination.pageIndex, pagination.pageSize, rowSelection, state]);
+  const muiToolbarAlertBannerProps = useMemo(() => hasError ? {
+    children: t("table.error"),
+    severity: "error"
+  } : {}, [hasError, t]);
+  const muiTablePaginationProps = useMemo(() => ({
+    rowsPerPageOptions: [],
+    showFirstButton: false,
+    showLastButton: false
+  }), []);
+  const muiCheckboxStyles = useCallback(theme => typeof theme.components?.MuiCheckbox?.styleOverrides?.root === "function" ? theme.components?.MuiCheckbox?.styleOverrides?.root?.({
+    ownerState: {},
+    theme
+  }) : "", []);
+  return _jsx(MaterialReactTable, {
+    columns: columns,
+    data: data,
+    enableMultiRowSelection: hasRowSelection,
+    enablePagination: true,
+    enableRowSelection: hasRowSelection,
+    enableSorting: false,
+    getRowId: getRowId,
+    initialState: modifiedInitialState,
+    muiSelectAllCheckboxProps: {
+      sx: muiCheckboxStyles
+    },
+    muiSelectCheckboxProps: {
+      sx: muiCheckboxStyles
+    },
+    muiTablePaginationProps: muiTablePaginationProps,
+    muiToolbarAlertBannerProps: muiToolbarAlertBannerProps,
+    onColumnFiltersChange: setColumnFilters,
+    onGlobalFilterChange: setGlobalFilter,
+    onPaginationChange: updatePagination,
+    onRowSelectionChange: setRowSelection,
+    renderBottomToolbarCustomActions: renderBottomToolbarCustomActions,
+    renderTopToolbarCustomActions: renderTopToolbarCustomActions,
+    rowVirtualizerInstanceRef: rowVirtualizerInstanceRef,
+    rowVirtualizerProps: {
+      overscan: 4
+    },
+    state: modifiedState
+  });
+};
+const MemoizedPaginatedTable = memo(PaginatedTable);
+MemoizedPaginatedTable.displayName = "PaginatedTable";
+export { MemoizedPaginatedTable as PaginatedTable };
+//# sourceMappingURL=PaginatedTable.js.map

package/dist/labs/PaginatedTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaginatedTable.js","names":["Typography","MaterialReactTable","memo","useCallback","useEffect","useMemo","useRef","useState","Trans","useTranslation","jsx","_jsx","Fragment","_Fragment","PaginatedTable","_ref","columns","data","fetchMoreData","getRowId","hasError","hasRowSelection","initialState","isFetching","onGlobalFilterChange","onPaginationChange","onRowSelectionChange","onRowSelectionChangeProp","rowsPerPage","state","ToolbarButtons","t","rowVirtualizerInstanceRef","columnFilters","setColumnFilters","globalFilter","setGlobalFilter","current","scrollToIndex","error","console","totalFetchedRows","length","renderBottomToolbarCustomActions","children","count","i18nKey","values","totalRows","renderTopToolbarCustomActions","_ref2","table","rowSelection","setRowSelection","pagination","setPagination","pageIndex","pageSize","dataLengthRef","updatePagination","paginationFunction","previousPagination","nextPagination","numberOfPages","Math","floor","modifiedInitialState","modifiedState","muiToolbarAlertBannerProps","severity","muiTablePaginationProps","rowsPerPageOptions","showFirstButton","showLastButton","muiCheckboxStyles","theme","components","MuiCheckbox","styleOverrides","root","ownerState","enableMultiRowSelection","enablePagination","enableRowSelection","enableSorting","muiSelectAllCheckboxProps","sx","muiSelectCheckboxProps","onColumnFiltersChange","rowVirtualizerProps","overscan","MemoizedPaginatedTable","displayName"],"sources":["../../src/labs/PaginatedTable.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { AlertProps, TablePaginationProps } from \"@mui/material\";\nimport { Typography } from \"../Typography\";\nimport MaterialReactTable, {\n  MRT_PaginationState,\n  type MRT_ColumnFiltersState,\n  type MRT_RowSelectionState,\n  type MRT_TableInstance,\n  type MRT_Virtualizer,\n} from \"material-react-table\";\nimport {\n  FunctionComponent,\n  memo,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { Trans, useTranslation } from \"react-i18next\";\n\nimport type {\n  DefaultMaterialReactTableData,\n  MaterialReactTableProps,\n} from \"./materialReactTableTypes\";\n\nexport type PaginatedTableProps<TData extends DefaultMaterialReactTableData> = {\n  columns: MaterialReactTableProps<TData>[\"columns\"];\n  data: MaterialReactTableProps<TData>[\"data\"];\n  fetchMoreData?: () => void;\n  getRowId?: MaterialReactTableProps<TData>[\"getRowId\"];\n  hasError?: boolean;\n  hasRowSelection?: boolean;\n  initialState?: MaterialReactTableProps<TData>[\"initialState\"];\n  isFetching?: boolean;\n  onGlobalFilterChange?: MaterialReactTableProps<TData>[\"onGlobalFilterChange\"];\n  onPaginationChange?: MaterialReactTableProps<TData>[\"onPaginationChange\"];\n  onRowSelectionChange?: MaterialReactTableProps<TData>[\"onRowSelectionChange\"];\n  rowsPerPage?: number;\n  state?: MaterialReactTableProps<TData>[\"state\"];\n  ToolbarButtons?: FunctionComponent<\n    { table: MRT_TableInstance<TData> } & unknown\n  >;\n};\n\nconst PaginatedTable = <TData extends DefaultMaterialReactTableData>({\n  columns,\n  data,\n  fetchMoreData,\n  getRowId,\n  hasError,\n  hasRowSelection,\n  initialState,\n  isFetching,\n  onGlobalFilterChange,\n  onPaginationChange,\n  onRowSelectionChange: onRowSelectionChangeProp,\n  rowsPerPage = 10,\n  state,\n  ToolbarButtons,\n}: PaginatedTableProps<TData>) => {\n  const { t } = useTranslation();\n\n  const rowVirtualizerInstanceRef =\n    useRef<MRT_Virtualizer<HTMLDivElement, HTMLTableRowElement>>(null);\n\n  const [columnFilters, setColumnFilters] = useState<MRT_ColumnFiltersState>(\n    []\n  );\n\n  const [globalFilter, setGlobalFilter] = useState<string>();\n\n  useEffect(() => {\n    if (globalFilter) {\n      onGlobalFilterChange?.(globalFilter);\n    }\n  }, [globalFilter, onGlobalFilterChange]);\n\n  useEffect(() => {\n    try {\n      // Scroll to top of table when sorting or filters change.\n      rowVirtualizerInstanceRef.current?.scrollToIndex?.(0);\n    } catch (error) {\n      console.error(error);\n    }\n  }, [columnFilters, globalFilter]);\n\n  const totalFetchedRows = data.length ?? 0;\n\n  const renderBottomToolbarCustomActions = useCallback(\n    () =>\n      fetchMoreData ? (\n        <Typography>\n          <Trans\n            count={totalFetchedRows}\n            i18nKey=\"table.fetchedrows.text\"\n            values={{\n              totalRows: totalFetchedRows,\n            }}\n          />\n        </Typography>\n      ) : (\n        <Typography>\n          <Trans\n            count={totalFetchedRows}\n            i18nKey=\"table.rows.text\"\n            values={{\n              totalRows: totalFetchedRows,\n            }}\n          />\n        </Typography>\n      ),\n    [fetchMoreData, totalFetchedRows]\n  );\n\n  const renderTopToolbarCustomActions = useCallback<\n    Exclude<\n      MaterialReactTableProps<TData>[\"renderTopToolbarCustomActions\"],\n      undefined\n    >\n  >(\n    ({ table }) => <>{ToolbarButtons && <ToolbarButtons table={table} />}</>,\n    [ToolbarButtons]\n  );\n\n  const [rowSelection, setRowSelection] = useState<MRT_RowSelectionState>({});\n\n  useEffect(() => {\n    onRowSelectionChangeProp?.(rowSelection);\n  }, [onRowSelectionChangeProp, rowSelection]);\n\n  const [pagination, setPagination] = useState<MRT_PaginationState>(\n    initialState?.pagination || {\n      pageIndex: 0,\n      pageSize: rowsPerPage,\n    }\n  );\n\n  const dataLengthRef = useRef(data.length);\n\n  const updatePagination = useCallback(\n    (paginationFunction) => {\n      if (data.length === dataLengthRef.current) {\n        setPagination((previousPagination) => {\n          const nextPagination = paginationFunction(previousPagination);\n          return nextPagination;\n        });\n      } else {\n        dataLengthRef.current = data.length;\n      }\n    },\n    [data.length]\n  );\n\n  useEffect(() => {\n    const numberOfPages = Math.floor(data.length / pagination.pageSize);\n\n    if (!isFetching && pagination.pageIndex > numberOfPages - 1) {\n      fetchMoreData?.();\n    }\n  }, [\n    data.length,\n    fetchMoreData,\n    isFetching,\n    pagination.pageIndex,\n    pagination.pageSize,\n  ]);\n\n  useEffect(() => {\n    onPaginationChange?.({\n      pageIndex: pagination.pageIndex,\n      pageSize: pagination.pageSize,\n    });\n  }, [onPaginationChange, pagination.pageIndex, pagination.pageSize]);\n\n  const modifiedInitialState = useMemo(\n    () => ({\n      pagination,\n      ...initialState,\n    }),\n    [initialState, pagination]\n  );\n\n  const modifiedState = useMemo(\n    () => ({\n      ...state,\n      pagination: {\n        pageIndex: pagination.pageIndex,\n        pageSize: pagination.pageSize,\n      },\n      rowSelection,\n    }),\n    [pagination.pageIndex, pagination.pageSize, rowSelection, state]\n  );\n\n  const muiToolbarAlertBannerProps: AlertProps = useMemo(\n    () =>\n      hasError\n        ? {\n            children: t(\"table.error\"),\n            severity: \"error\",\n          }\n        : {},\n    [hasError, t]\n  );\n\n  const muiTablePaginationProps: Partial<\n    Omit<TablePaginationProps, \"rowsPerPage\">\n  > = useMemo(\n    () => ({\n      rowsPerPageOptions: [],\n      showFirstButton: false,\n      showLastButton: false,\n    }),\n    []\n  );\n\n  const muiCheckboxStyles = useCallback(\n    (theme) =>\n      typeof theme.components?.MuiCheckbox?.styleOverrides?.root === \"function\"\n        ? theme.components?.MuiCheckbox?.styleOverrides?.root?.({\n            ownerState: {},\n            theme,\n          })\n        : \"\",\n    []\n  );\n\n  return (\n    <MaterialReactTable\n      columns={columns}\n      data={data}\n      enableMultiRowSelection={hasRowSelection}\n      enablePagination\n      enableRowSelection={hasRowSelection}\n      enableSorting={false}\n      getRowId={getRowId}\n      initialState={modifiedInitialState}\n      muiSelectAllCheckboxProps={{ sx: muiCheckboxStyles }}\n      muiSelectCheckboxProps={{ sx: muiCheckboxStyles }}\n      muiTablePaginationProps={muiTablePaginationProps}\n      muiToolbarAlertBannerProps={muiToolbarAlertBannerProps}\n      onColumnFiltersChange={setColumnFilters}\n      onGlobalFilterChange={setGlobalFilter}\n      onPaginationChange={updatePagination}\n      onRowSelectionChange={setRowSelection}\n      renderBottomToolbarCustomActions={renderBottomToolbarCustomActions}\n      renderTopToolbarCustomActions={renderTopToolbarCustomActions}\n      rowVirtualizerInstanceRef={rowVirtualizerInstanceRef}\n      rowVirtualizerProps={{ overscan: 4 }}\n      state={modifiedState}\n    />\n  );\n};\n\nconst MemoizedPaginatedTable = memo(PaginatedTable) as typeof PaginatedTable;\n\n// @ts-expect-error | This is going to error because the component isn't and can't be defined as a `FunctionComponent`, and therefore, doesn't have a `displayName` prop.\nMemoizedPaginatedTable.displayName = \"PaginatedTable\";\n\nexport { MemoizedPaginatedTable as PaginatedTable };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAVA,SAaSA,UAAU;AACnB,OAAOC,kBAAkB,MAMlB,sBAAsB;AAC7B,SAEEC,IAAI,EACJC,WAAW,EACXC,SAAS,EACTC,OAAO,EACPC,MAAM,EACNC,QAAQ,QACH,OAAO;AACd,SAASC,KAAK,EAAEC,cAAc,QAAQ,eAAe;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,QAAA,IAAAC,SAAA;AA0BtD,MAAMC,cAAc,GAAGC,IAAA,IAeW;EAAA,IAfmC;IACnEC,OAAO;IACPC,IAAI;IACJC,aAAa;IACbC,QAAQ;IACRC,QAAQ;IACRC,eAAe;IACfC,YAAY;IACZC,UAAU;IACVC,oBAAoB;IACpBC,kBAAkB;IAClBC,oBAAoB,EAAEC,wBAAwB;IAC9CC,WAAW,GAAG,EAAE;IAChBC,KAAK;IACLC;EAC0B,CAAC,GAAAf,IAAA;EAC3B,MAAM;IAAEgB;EAAE,CAAC,GAAGtB,cAAc,CAAC,CAAC;EAE9B,MAAMuB,yBAAyB,GAC7B1B,MAAM,CAAuD,IAAI,CAAC;EAEpE,MAAM,CAAC2B,aAAa,EAAEC,gBAAgB,CAAC,GAAG3B,QAAQ,CAChD,EACF,CAAC;EAED,MAAM,CAAC4B,YAAY,EAAEC,eAAe,CAAC,GAAG7B,QAAQ,CAAS,CAAC;EAE1DH,SAAS,CAAC,MAAM;IACd,IAAI+B,YAAY,EAAE;MAChBX,oBAAoB,GAAGW,YAAY,CAAC;IACtC;EACF,CAAC,EAAE,CAACA,YAAY,EAAEX,oBAAoB,CAAC,CAAC;EAExCpB,SAAS,CAAC,MAAM;IACd,IAAI;MAEF4B,yBAAyB,CAACK,OAAO,EAAEC,aAAa,GAAG,CAAC,CAAC;IACvD,CAAC,CAAC,OAAOC,KAAK,EAAE;MACdC,OAAO,CAACD,KAAK,CAACA,KAAK,CAAC;IACtB;EACF,CAAC,EAAE,CAACN,aAAa,EAAEE,YAAY,CAAC,CAAC;EAEjC,MAAMM,gBAAgB,GAAGxB,IAAI,CAACyB,MAAM,IAAI,CAAC;EAEzC,MAAMC,gCAAgC,GAAGxC,WAAW,CAClD,MACEe,aAAa,GACXP,IAAA,CAACX,UAAU;IAAA4C,QAAA,EACTjC,IAAA,CAACH,KAAK;MACJqC,KAAK,EAAEJ,gBAAiB;MACxBK,OAAO,EAAC,wBAAwB;MAChCC,MAAM,EAAE;QACNC,SAAS,EAAEP;MACb;IAAE,CACH;EAAC,CACQ,CAAC,GAEb9B,IAAA,CAACX,UAAU;IAAA4C,QAAA,EACTjC,IAAA,CAACH,KAAK;MACJqC,KAAK,EAAEJ,gBAAiB;MACxBK,OAAO,EAAC,iBAAiB;MACzBC,MAAM,EAAE;QACNC,SAAS,EAAEP;MACb;IAAE,CACH;EAAC,CACQ,CACb,EACH,CAACvB,aAAa,EAAEuB,gBAAgB,CAClC,CAAC;EAED,MAAMQ,6BAA6B,GAAG9C,WAAW,CAM/C+C,KAAA;IAAA,IAAC;MAAEC;IAAM,CAAC,GAAAD,KAAA;IAAA,OAAKvC,IAAA,CAAAE,SAAA;MAAA+B,QAAA,EAAGd,cAAc,IAAInB,IAAA,CAACmB,cAAc;QAACqB,KAAK,EAAEA;MAAM,CAAE;IAAC,CAAG,CAAC;EAAA,GACxE,CAACrB,cAAc,CACjB,CAAC;EAED,MAAM,CAACsB,YAAY,EAAEC,eAAe,CAAC,GAAG9C,QAAQ,CAAwB,CAAC,CAAC,CAAC;EAE3EH,SAAS,CAAC,MAAM;IACduB,wBAAwB,GAAGyB,YAAY,CAAC;EAC1C,CAAC,EAAE,CAACzB,wBAAwB,EAAEyB,YAAY,CAAC,CAAC;EAE5C,MAAM,CAACE,UAAU,EAAEC,aAAa,CAAC,GAAGhD,QAAQ,CAC1Ce,YAAY,EAAEgC,UAAU,IAAI;IAC1BE,SAAS,EAAE,CAAC;IACZC,QAAQ,EAAE7B;EACZ,CACF,CAAC;EAED,MAAM8B,aAAa,GAAGpD,MAAM,CAACW,IAAI,CAACyB,MAAM,CAAC;EAEzC,MAAMiB,gBAAgB,GAAGxD,WAAW,CACjCyD,kBAAkB,IAAK;IACtB,IAAI3C,IAAI,CAACyB,MAAM,KAAKgB,aAAa,CAACrB,OAAO,EAAE;MACzCkB,aAAa,CAAEM,kBAAkB,IAAK;QACpC,MAAMC,cAAc,GAAGF,kBAAkB,CAACC,kBAAkB,CAAC;QAC7D,OAAOC,cAAc;MACvB,CAAC,CAAC;IACJ,CAAC,MAAM;MACLJ,aAAa,CAACrB,OAAO,GAAGpB,IAAI,CAACyB,MAAM;IACrC;EACF,CAAC,EACD,CAACzB,IAAI,CAACyB,MAAM,CACd,CAAC;EAEDtC,SAAS,CAAC,MAAM;IACd,MAAM2D,aAAa,GAAGC,IAAI,CAACC,KAAK,CAAChD,IAAI,CAACyB,MAAM,GAAGY,UAAU,CAACG,QAAQ,CAAC;IAEnE,IAAI,CAAClC,UAAU,IAAI+B,UAAU,CAACE,SAAS,GAAGO,aAAa,GAAG,CAAC,EAAE;MAC3D7C,aAAa,GAAG,CAAC;IACnB;EACF,CAAC,EAAE,CACDD,IAAI,CAACyB,MAAM,EACXxB,aAAa,EACbK,UAAU,EACV+B,UAAU,CAACE,SAAS,EACpBF,UAAU,CAACG,QAAQ,CACpB,CAAC;EAEFrD,SAAS,CAAC,MAAM;IACdqB,kBAAkB,GAAG;MACnB+B,SAAS,EAAEF,UAAU,CAACE,SAAS;MAC/BC,QAAQ,EAAEH,UAAU,CAACG;IACvB,CAAC,CAAC;EACJ,CAAC,EAAE,CAAChC,kBAAkB,EAAE6B,UAAU,CAACE,SAAS,EAAEF,UAAU,CAACG,QAAQ,CAAC,CAAC;EAEnE,MAAMS,oBAAoB,GAAG7D,OAAO,CAClC,OAAO;IACLiD,UAAU;IACV,GAAGhC;EACL,CAAC,CAAC,EACF,CAACA,YAAY,EAAEgC,UAAU,CAC3B,CAAC;EAED,MAAMa,aAAa,GAAG9D,OAAO,CAC3B,OAAO;IACL,GAAGwB,KAAK;IACRyB,UAAU,EAAE;MACVE,SAAS,EAAEF,UAAU,CAACE,SAAS;MAC/BC,QAAQ,EAAEH,UAAU,CAACG;IACvB,CAAC;IACDL;EACF,CAAC,CAAC,EACF,CAACE,UAAU,CAACE,SAAS,EAAEF,UAAU,CAACG,QAAQ,EAAEL,YAAY,EAAEvB,KAAK,CACjE,CAAC;EAED,MAAMuC,0BAAsC,GAAG/D,OAAO,CACpD,MACEe,QAAQ,GACJ;IACEwB,QAAQ,EAAEb,CAAC,CAAC,aAAa,CAAC;IAC1BsC,QAAQ,EAAE;EACZ,CAAC,GACD,CAAC,CAAC,EACR,CAACjD,QAAQ,EAAEW,CAAC,CACd,CAAC;EAED,MAAMuC,uBAEL,GAAGjE,OAAO,CACT,OAAO;IACLkE,kBAAkB,EAAE,EAAE;IACtBC,eAAe,EAAE,KAAK;IACtBC,cAAc,EAAE;EAClB,CAAC,CAAC,EACF,EACF,CAAC;EAED,MAAMC,iBAAiB,GAAGvE,WAAW,CAClCwE,KAAK,IACJ,OAAOA,KAAK,CAACC,UAAU,EAAEC,WAAW,EAAEC,cAAc,EAAEC,IAAI,KAAK,UAAU,GACrEJ,KAAK,CAACC,UAAU,EAAEC,WAAW,EAAEC,cAAc,EAAEC,IAAI,GAAG;IACpDC,UAAU,EAAE,CAAC,CAAC;IACdL;EACF,CAAC,CAAC,GACF,EAAE,EACR,EACF,CAAC;EAED,OACEhE,IAAA,CAACV,kBAAkB;IACjBe,OAAO,EAAEA,OAAQ;IACjBC,IAAI,EAAEA,IAAK;IACXgE,uBAAuB,EAAE5D,eAAgB;IACzC6D,gBAAgB;IAChBC,kBAAkB,EAAE9D,eAAgB;IACpC+D,aAAa,EAAE,KAAM;IACrBjE,QAAQ,EAAEA,QAAS;IACnBG,YAAY,EAAE4C,oBAAqB;IACnCmB,yBAAyB,EAAE;MAAEC,EAAE,EAAEZ;IAAkB,CAAE;IACrDa,sBAAsB,EAAE;MAAED,EAAE,EAAEZ;IAAkB,CAAE;IAClDJ,uBAAuB,EAAEA,uBAAwB;IACjDF,0BAA0B,EAAEA,0BAA2B;IACvDoB,qBAAqB,EAAEtD,gBAAiB;IACxCV,oBAAoB,EAAEY,eAAgB;IACtCX,kBAAkB,EAAEkC,gBAAiB;IACrCjC,oBAAoB,EAAE2B,eAAgB;IACtCV,gCAAgC,EAAEA,gCAAiC;IACnEM,6BAA6B,EAAEA,6BAA8B;IAC7DjB,yBAAyB,EAAEA,yBAA0B;IACrDyD,mBAAmB,EAAE;MAAEC,QAAQ,EAAE;IAAE,CAAE;IACrC7D,KAAK,EAAEsC;EAAc,CACtB,CAAC;AAEN,CAAC;AAED,MAAMwB,sBAAsB,GAAGzF,IAAI,CAACY,cAAc,CAA0B;AAG5E6E,sBAAsB,CAACC,WAAW,GAAG,gBAAgB;AAErD,SAASD,sBAAsB,IAAI7E,cAAc"}

package/dist/labs/StaticTable.js

@@ -0,0 +1,82 @@
+/*!
+ * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import MaterialReactTable from "material-react-table";
+import { memo, useCallback, useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+const StaticTable = _ref => {
+  let {
+    columns,
+    data,
+    getRowId,
+    hasError,
+    initialState,
+    onGlobalFilterChange,
+    state,
+    ToolbarButtons
+  } = _ref;
+  const {
+    t
+  } = useTranslation();
+  const rowVirtualizerInstanceRef = useRef(null);
+  const [columnFilters, setColumnFilters] = useState([]);
+  const [globalFilter, setGlobalFilter] = useState();
+  useEffect(() => {
+    if (globalFilter) {
+      onGlobalFilterChange?.(globalFilter);
+    }
+  }, [globalFilter, onGlobalFilterChange]);
+  const renderTopToolbarCustomActions = useCallback(_ref2 => {
+    let {
+      table
+    } = _ref2;
+    return _jsx(_Fragment, {
+      children: ToolbarButtons && _jsx(ToolbarButtons, {
+        table: table
+      })
+    });
+  }, [ToolbarButtons]);
+  useEffect(() => {
+    try {
+      rowVirtualizerInstanceRef.current?.scrollToIndex?.(0);
+    } catch (error) {
+      console.error(error);
+    }
+  }, [columnFilters, globalFilter]);
+  return _jsx(MaterialReactTable, {
+    columns: columns,
+    data: data,
+    enableBottomToolbar: false,
+    enablePagination: false,
+    enableRowVirtualization: data.length > 50,
+    enableSorting: false,
+    getRowId: getRowId,
+    initialState: initialState,
+    muiToolbarAlertBannerProps: hasError ? {
+      children: t("table.error"),
+      color: "error"
+    } : undefined,
+    onColumnFiltersChange: setColumnFilters,
+    onGlobalFilterChange: setGlobalFilter,
+    renderTopToolbarCustomActions: renderTopToolbarCustomActions,
+    rowVirtualizerInstanceRef: rowVirtualizerInstanceRef,
+    rowVirtualizerProps: {
+      overscan: 4
+    },
+    state: state
+  });
+};
+const MemoizedStaticTable = memo(StaticTable);
+export { MemoizedStaticTable as StaticTable };
+//# sourceMappingURL=StaticTable.js.map

package/dist/labs/StaticTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StaticTable.js","names":["MaterialReactTable","memo","useCallback","useEffect","useRef","useState","useTranslation","jsx","_jsx","Fragment","_Fragment","StaticTable","_ref","columns","data","getRowId","hasError","initialState","onGlobalFilterChange","state","ToolbarButtons","t","rowVirtualizerInstanceRef","columnFilters","setColumnFilters","globalFilter","setGlobalFilter","renderTopToolbarCustomActions","_ref2","table","children","current","scrollToIndex","error","console","enableBottomToolbar","enablePagination","enableRowVirtualization","length","enableSorting","muiToolbarAlertBannerProps","color","undefined","onColumnFiltersChange","rowVirtualizerProps","overscan","MemoizedStaticTable"],"sources":["../../src/labs/StaticTable.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport MaterialReactTable, {\n  type MRT_ColumnFiltersState,\n  type MRT_TableInstance,\n  type MRT_Virtualizer,\n} from \"material-react-table\";\nimport {\n  FunctionComponent,\n  memo,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { useTranslation } from \"react-i18next\";\n\nimport type {\n  DefaultMaterialReactTableData,\n  MaterialReactTableProps,\n} from \"./materialReactTableTypes\";\n\nexport type StaticTableProps<TData extends DefaultMaterialReactTableData> = {\n  columns: MaterialReactTableProps<TData>[\"columns\"];\n  data: MaterialReactTableProps<TData>[\"data\"];\n  getRowId?: MaterialReactTableProps<TData>[\"getRowId\"];\n  hasError?: boolean;\n  initialState?: MaterialReactTableProps<TData>[\"initialState\"];\n  onGlobalFilterChange?: MaterialReactTableProps<TData>[\"onGlobalFilterChange\"];\n  state?: MaterialReactTableProps<TData>[\"state\"];\n  ToolbarButtons?: FunctionComponent<\n    { table: MRT_TableInstance<TData> } & unknown\n  >;\n};\n\nconst StaticTable = <TData extends DefaultMaterialReactTableData>({\n  columns,\n  data,\n  getRowId,\n  hasError,\n  initialState,\n  onGlobalFilterChange,\n  state,\n  ToolbarButtons,\n}: StaticTableProps<TData>) => {\n  const { t } = useTranslation();\n\n  const rowVirtualizerInstanceRef =\n    useRef<MRT_Virtualizer<HTMLDivElement, HTMLTableRowElement>>(null);\n\n  const [columnFilters, setColumnFilters] = useState<MRT_ColumnFiltersState>(\n    []\n  );\n\n  const [globalFilter, setGlobalFilter] = useState<string>();\n\n  useEffect(() => {\n    if (globalFilter) {\n      onGlobalFilterChange?.(globalFilter);\n    }\n  }, [globalFilter, onGlobalFilterChange]);\n\n  const renderTopToolbarCustomActions = useCallback<\n    Exclude<\n      MaterialReactTableProps<TData>[\"renderTopToolbarCustomActions\"],\n      undefined\n    >\n  >(\n    ({ table }) => <>{ToolbarButtons && <ToolbarButtons table={table} />}</>,\n    [ToolbarButtons]\n  );\n\n  useEffect(() => {\n    try {\n      // Scroll to top of table when sorting or filters change.\n      rowVirtualizerInstanceRef.current?.scrollToIndex?.(0);\n    } catch (error) {\n      console.error(error);\n    }\n  }, [columnFilters, globalFilter]);\n\n  return (\n    <MaterialReactTable\n      columns={columns}\n      data={data}\n      enableBottomToolbar={false}\n      enablePagination={false}\n      enableRowVirtualization={data.length > 50}\n      enableSorting={false}\n      getRowId={getRowId}\n      initialState={initialState}\n      muiToolbarAlertBannerProps={\n        hasError\n          ? {\n              children: t(\"table.error\"),\n              color: \"error\",\n            }\n          : undefined\n      }\n      onColumnFiltersChange={setColumnFilters}\n      onGlobalFilterChange={setGlobalFilter}\n      renderTopToolbarCustomActions={renderTopToolbarCustomActions}\n      rowVirtualizerInstanceRef={rowVirtualizerInstanceRef}\n      rowVirtualizerProps={{ overscan: 4 }}\n      state={state}\n    />\n  );\n};\n\nconst MemoizedStaticTable = memo(StaticTable) as typeof StaticTable;\n\nexport { MemoizedStaticTable as StaticTable };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAOA,kBAAkB,MAIlB,sBAAsB;AAC7B,SAEEC,IAAI,EACJC,WAAW,EACXC,SAAS,EACTC,MAAM,EACNC,QAAQ,QACH,OAAO;AACd,SAASC,cAAc,QAAQ,eAAe;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,QAAA,IAAAC,SAAA;AAoB/C,MAAMC,WAAW,GAAGC,IAAA,IASW;EAAA,IATmC;IAChEC,OAAO;IACPC,IAAI;IACJC,QAAQ;IACRC,QAAQ;IACRC,YAAY;IACZC,oBAAoB;IACpBC,KAAK;IACLC;EACuB,CAAC,GAAAR,IAAA;EACxB,MAAM;IAAES;EAAE,CAAC,GAAGf,cAAc,CAAC,CAAC;EAE9B,MAAMgB,yBAAyB,GAC7BlB,MAAM,CAAuD,IAAI,CAAC;EAEpE,MAAM,CAACmB,aAAa,EAAEC,gBAAgB,CAAC,GAAGnB,QAAQ,CAChD,EACF,CAAC;EAED,MAAM,CAACoB,YAAY,EAAEC,eAAe,CAAC,GAAGrB,QAAQ,CAAS,CAAC;EAE1DF,SAAS,CAAC,MAAM;IACd,IAAIsB,YAAY,EAAE;MAChBP,oBAAoB,GAAGO,YAAY,CAAC;IACtC;EACF,CAAC,EAAE,CAACA,YAAY,EAAEP,oBAAoB,CAAC,CAAC;EAExC,MAAMS,6BAA6B,GAAGzB,WAAW,CAM/C0B,KAAA;IAAA,IAAC;MAAEC;IAAM,CAAC,GAAAD,KAAA;IAAA,OAAKpB,IAAA,CAAAE,SAAA;MAAAoB,QAAA,EAAGV,cAAc,IAAIZ,IAAA,CAACY,cAAc;QAACS,KAAK,EAAEA;MAAM,CAAE;IAAC,CAAG,CAAC;EAAA,GACxE,CAACT,cAAc,CACjB,CAAC;EAEDjB,SAAS,CAAC,MAAM;IACd,IAAI;MAEFmB,yBAAyB,CAACS,OAAO,EAAEC,aAAa,GAAG,CAAC,CAAC;IACvD,CAAC,CAAC,OAAOC,KAAK,EAAE;MACdC,OAAO,CAACD,KAAK,CAACA,KAAK,CAAC;IACtB;EACF,CAAC,EAAE,CAACV,aAAa,EAAEE,YAAY,CAAC,CAAC;EAEjC,OACEjB,IAAA,CAACR,kBAAkB;IACjBa,OAAO,EAAEA,OAAQ;IACjBC,IAAI,EAAEA,IAAK;IACXqB,mBAAmB,EAAE,KAAM;IAC3BC,gBAAgB,EAAE,KAAM;IACxBC,uBAAuB,EAAEvB,IAAI,CAACwB,MAAM,GAAG,EAAG;IAC1CC,aAAa,EAAE,KAAM;IACrBxB,QAAQ,EAAEA,QAAS;IACnBE,YAAY,EAAEA,YAAa;IAC3BuB,0BAA0B,EACxBxB,QAAQ,GACJ;MACEc,QAAQ,EAAET,CAAC,CAAC,aAAa,CAAC;MAC1BoB,KAAK,EAAE;IACT,CAAC,GACDC,SACL;IACDC,qBAAqB,EAAEnB,gBAAiB;IACxCN,oBAAoB,EAAEQ,eAAgB;IACtCC,6BAA6B,EAAEA,6BAA8B;IAC7DL,yBAAyB,EAAEA,yBAA0B;IACrDsB,mBAAmB,EAAE;MAAEC,QAAQ,EAAE;IAAE,CAAE;IACrC1B,KAAK,EAAEA;EAAM,CACd,CAAC;AAEN,CAAC;AAED,MAAM2B,mBAAmB,GAAG7C,IAAI,CAACU,WAAW,CAAuB;AAEnE,SAASmC,mBAAmB,IAAInC,WAAW"}