@okta/odyssey-react-mui 1.28.1 → 1.32.0

package/dist/esm/labs/PaginatedTable.js

@@ -0,0 +1,171 @@
+/*!
+ * 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 { useMaterialReactTable, MaterialReactTable } from "material-react-table";
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Trans, useTranslation } from "react-i18next";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+const PaginatedTable = ({
+  columns = [],
+  data = [],
+  fetchMoreData,
+  getRowId,
+  hasError,
+  hasRowSelection,
+  initialState,
+  isFetching,
+  onGlobalFilterChange,
+  onPaginationChange,
+  onRowSelectionChange: onRowSelectionChangeProp,
+  rowsPerPage = 10,
+  state,
+  ToolbarButtons
+}) => {
+  const {
+    t
+  } = useTranslation();
+  const rowVirtualizerInstanceRef = useRef(null);
+  const [columnFilters, setColumnFilters] = useState([]);
+  const [globalFilter, setGlobalFilter] = useState();
+  useEffect(() => {
+    if (globalFilter !== undefined) {
+      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(({
+    table
+  }) => _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(() => ({
+    pagination: {
+      pageIndex: pagination.pageIndex,
+      pageSize: pagination.pageSize
+    },
+    rowSelection,
+    globalFilter,
+    columnFilters,
+    ...state
+  }), [pagination.pageIndex, pagination.pageSize, rowSelection, globalFilter, columnFilters, 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
+  }) : "", []);
+  const table = useMaterialReactTable({
+    columns: columns,
+    data: data,
+    enableMultiRowSelection: hasRowSelection,
+    enablePagination: true,
+    enableRowSelection: hasRowSelection,
+    enableSorting: false,
+    getRowId: getRowId,
+    initialState: modifiedInitialState,
+    muiSelectAllCheckboxProps: {
+      sx: muiCheckboxStyles
+    },
+    muiSelectCheckboxProps: {
+      sx: muiCheckboxStyles
+    },
+    muiPaginationProps: muiTablePaginationProps,
+    muiToolbarAlertBannerProps: muiToolbarAlertBannerProps,
+    onColumnFiltersChange: setColumnFilters,
+    onGlobalFilterChange: setGlobalFilter,
+    onPaginationChange: updatePagination,
+    onRowSelectionChange: setRowSelection,
+    renderBottomToolbarCustomActions: renderBottomToolbarCustomActions,
+    renderTopToolbarCustomActions: renderTopToolbarCustomActions,
+    rowVirtualizerInstanceRef: rowVirtualizerInstanceRef,
+    rowVirtualizerOptions: {
+      overscan: 4
+    },
+    state: modifiedState
+  });
+  return _jsx(MaterialReactTable, {
+    table: table
+  });
+};
+const MemoizedPaginatedTable = memo(PaginatedTable);
+MemoizedPaginatedTable.displayName = "PaginatedTable";
+export { MemoizedPaginatedTable as PaginatedTable };
+//# sourceMappingURL=PaginatedTable.js.map

package/dist/esm/labs/PaginatedTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaginatedTable.js","names":["Typography","useMaterialReactTable","MaterialReactTable","memo","useCallback","useEffect","useMemo","useRef","useState","Trans","useTranslation","jsx","_jsx","Fragment","_Fragment","PaginatedTable","columns","data","fetchMoreData","getRowId","hasError","hasRowSelection","initialState","isFetching","onGlobalFilterChange","onPaginationChange","onRowSelectionChange","onRowSelectionChangeProp","rowsPerPage","state","ToolbarButtons","t","rowVirtualizerInstanceRef","columnFilters","setColumnFilters","globalFilter","setGlobalFilter","undefined","current","scrollToIndex","error","console","totalFetchedRows","length","renderBottomToolbarCustomActions","children","count","i18nKey","values","totalRows","renderTopToolbarCustomActions","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","muiPaginationProps","onColumnFiltersChange","rowVirtualizerOptions","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, CheckboxProps } from \"@mui/material\";\nimport { Typography } from \"../Typography.js\";\nimport {\n  MRT_PaginationState,\n  type MRT_ColumnFiltersState,\n  type MRT_RowSelectionState,\n  type MRT_TableInstance,\n  type MRT_Virtualizer,\n  useMaterialReactTable,\n  MaterialReactTable,\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.js\";\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<{ table: MRT_TableInstance<TData> }>;\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 !== undefined) {\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 }: { table: MRT_TableInstance<TData> }) => (\n      <>{ToolbarButtons && <ToolbarButtons table={table} />}</>\n    ),\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    Required<MaterialReactTableProps<TData>>[\"onPaginationChange\"]\n  >(\n    (paginationFunction) => {\n      if (data.length === dataLengthRef.current) {\n        setPagination((previousPagination) => {\n          // @ts-expect-error This broke in the upgrade, but this component is legacy and replaced by `DataView`.\n          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n          const nextPagination = paginationFunction(previousPagination);\n\n          // eslint-disable-next-line @typescript-eslint/no-unsafe-return\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      pagination: {\n        pageIndex: pagination.pageIndex,\n        pageSize: pagination.pageSize,\n      },\n      rowSelection,\n      globalFilter,\n      columnFilters,\n      ...state,\n    }),\n    [\n      pagination.pageIndex,\n      pagination.pageSize,\n      rowSelection,\n      globalFilter,\n      columnFilters,\n      state,\n    ],\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 = useMemo(\n    () => ({\n      rowsPerPageOptions: [],\n      showFirstButton: false,\n      showLastButton: false,\n    }),\n    [],\n  );\n\n  const muiCheckboxStyles = useCallback<\n    // @ts-expect-error This breaks after the upgrade, but it doesn't matter as this is a legacy function and internal type.\n    NonNullable<Required<CheckboxProps>[\"sx\"]>\n  >(\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  const table = useMaterialReactTable({\n    columns: columns,\n    data: data,\n    enableMultiRowSelection: hasRowSelection,\n    enablePagination: true,\n    enableRowSelection: hasRowSelection,\n    enableSorting: false,\n    getRowId: getRowId,\n    initialState: modifiedInitialState,\n    muiSelectAllCheckboxProps: { sx: muiCheckboxStyles },\n    muiSelectCheckboxProps: { sx: muiCheckboxStyles },\n    muiPaginationProps: 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    rowVirtualizerOptions: { overscan: 4 },\n    state: modifiedState,\n  });\n\n  return <MaterialReactTable table={table} />;\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":"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","ignoreList":[]}

package/dist/esm/labs/StaticTable.js

@@ -0,0 +1,86 @@
+/*!
+ * 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 { useMaterialReactTable, MaterialReactTable } from "material-react-table";
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+const StaticTable = ({
+  columns = [],
+  data = [],
+  getRowId,
+  hasError,
+  initialState,
+  onGlobalFilterChange,
+  state,
+  ToolbarButtons
+}) => {
+  const {
+    t
+  } = useTranslation();
+  const rowVirtualizerInstanceRef = useRef(null);
+  const [columnFilters, setColumnFilters] = useState([]);
+  const [globalFilter, setGlobalFilter] = useState();
+  useEffect(() => {
+    if (globalFilter !== undefined) {
+      onGlobalFilterChange?.(globalFilter);
+    }
+  }, [globalFilter, onGlobalFilterChange]);
+  const modifiedState = useMemo(() => ({
+    globalFilter,
+    columnFilters,
+    ...state
+  }), [globalFilter, columnFilters, state]);
+  const renderTopToolbarCustomActions = useCallback(({
+    table
+  }) => _jsx(_Fragment, {
+    children: ToolbarButtons && _jsx(ToolbarButtons, {
+      table: table
+    })
+  }), [ToolbarButtons]);
+  useEffect(() => {
+    try {
+      rowVirtualizerInstanceRef.current?.scrollToIndex?.(0);
+    } catch (error) {
+      console.error(error);
+    }
+  }, [columnFilters, globalFilter]);
+  const table = useMaterialReactTable({
+    columns: columns,
+    data: data,
+    enableBottomToolbar: false,
+    enablePagination: false,
+    enableRowVirtualization: true,
+    enableSorting: false,
+    getRowId: getRowId,
+    initialState: initialState,
+    muiToolbarAlertBannerProps: hasError ? {
+      children: t("table.error"),
+      color: "error"
+    } : undefined,
+    onColumnFiltersChange: setColumnFilters,
+    onGlobalFilterChange: setGlobalFilter,
+    renderTopToolbarCustomActions: renderTopToolbarCustomActions,
+    rowVirtualizerInstanceRef: rowVirtualizerInstanceRef,
+    rowVirtualizerOptions: {
+      overscan: 4
+    },
+    state: modifiedState
+  });
+  return _jsx(MaterialReactTable, {
+    table: table
+  });
+};
+const MemoizedStaticTable = memo(StaticTable);
+MemoizedStaticTable.displayName = "StaticTable";
+export { MemoizedStaticTable as StaticTable };
+//# sourceMappingURL=StaticTable.js.map

package/dist/esm/labs/StaticTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StaticTable.js","names":["useMaterialReactTable","MaterialReactTable","memo","useCallback","useEffect","useMemo","useRef","useState","useTranslation","jsx","_jsx","Fragment","_Fragment","StaticTable","columns","data","getRowId","hasError","initialState","onGlobalFilterChange","state","ToolbarButtons","t","rowVirtualizerInstanceRef","columnFilters","setColumnFilters","globalFilter","setGlobalFilter","undefined","modifiedState","renderTopToolbarCustomActions","table","children","current","scrollToIndex","error","console","enableBottomToolbar","enablePagination","enableRowVirtualization","enableSorting","muiToolbarAlertBannerProps","color","onColumnFiltersChange","rowVirtualizerOptions","overscan","MemoizedStaticTable","displayName"],"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 {\n  useMaterialReactTable,\n  type MRT_ColumnFiltersState,\n  type MRT_TableInstance,\n  type MRT_Virtualizer,\n  MaterialReactTable,\n} from \"material-react-table\";\nimport {\n  FunctionComponent,\n  memo,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { useTranslation } from \"react-i18next\";\n\nimport type {\n  DefaultMaterialReactTableData,\n  MaterialReactTableProps,\n} from \"./materialReactTableTypes.js\";\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<{ table: MRT_TableInstance<TData> }>;\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 !== undefined) {\n      onGlobalFilterChange?.(globalFilter);\n    }\n  }, [globalFilter, onGlobalFilterChange]);\n\n  const modifiedState = useMemo(\n    () => ({\n      globalFilter,\n      columnFilters,\n      ...state,\n    }),\n    [globalFilter, columnFilters, state],\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  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 table = useMaterialReactTable({\n    columns: columns,\n    data: data,\n    enableBottomToolbar: false,\n    enablePagination: false,\n    enableRowVirtualization: true,\n    enableSorting: false,\n    getRowId: getRowId,\n    initialState: initialState,\n    muiToolbarAlertBannerProps: hasError\n      ? { children: t(\"table.error\"), color: \"error\" }\n      : undefined,\n    onColumnFiltersChange: setColumnFilters,\n    onGlobalFilterChange: setGlobalFilter,\n    renderTopToolbarCustomActions: renderTopToolbarCustomActions,\n    rowVirtualizerInstanceRef: rowVirtualizerInstanceRef,\n    rowVirtualizerOptions: { overscan: 4 },\n    state: modifiedState,\n  });\n\n  return <MaterialReactTable table={table} />;\n};\n\n// Need the `typeof StaticTable` because generics don't get passed through `memo`.\nconst MemoizedStaticTable = memo(StaticTable) as typeof StaticTable;\n\n// @ts-expect-error displayName is expected to not be on `typeof StaticTable`\nMemoizedStaticTable.displayName = \"StaticTable\";\n\nexport { MemoizedStaticTable as StaticTable };\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/labs/UserProfile.js

@@ -0,0 +1,73 @@
+/*!
+ * Copyright (c) 2024-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 styled from "@emotion/styled";
+import { memo } from "react";
+import { Box } from "../Box.js";
+import { useOdysseyDesignTokens } from "../OdysseyDesignTokensContext.js";
+import { Subordinate } from "../Typography.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const UserProfileContainer = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})({
+  display: "flex",
+  alignItems: "center"
+});
+const UserProfileIconContainer = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})(({
+  odysseyDesignTokens
+}) => ({
+  display: "flex",
+  paddingInlineEnd: odysseyDesignTokens.Spacing2
+}));
+const UserProfile = ({
+  profileIcon,
+  userName,
+  orgName,
+  translate,
+  userNameEndIcon
+}) => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+  return _jsxs(UserProfileContainer, {
+    odysseyDesignTokens: odysseyDesignTokens,
+    children: [profileIcon && _jsx(UserProfileIconContainer, {
+      odysseyDesignTokens: odysseyDesignTokens,
+      children: profileIcon
+    }), _jsxs("div", {
+      children: [userNameEndIcon ? _jsxs(Box, {
+        sx: {
+          display: "flex",
+          flexDirection: "row",
+          gap: odysseyDesignTokens.Spacing2
+        },
+        children: [_jsx(Subordinate, {
+          color: "textPrimary",
+          translate: translate,
+          children: userName
+        }), userNameEndIcon]
+      }) : _jsx(Subordinate, {
+        color: "textPrimary",
+        translate: translate,
+        children: userName
+      }), _jsx(Subordinate, {
+        color: "textSecondary",
+        translate: translate,
+        children: orgName
+      })]
+    })]
+  });
+};
+const MemoizedUserProfile = memo(UserProfile);
+MemoizedUserProfile.displayName = "UserProfile";
+export { MemoizedUserProfile as UserProfile };
+//# sourceMappingURL=UserProfile.js.map

package/dist/esm/labs/UserProfile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserProfile.js","names":["styled","memo","Box","useOdysseyDesignTokens","Subordinate","jsx","_jsx","jsxs","_jsxs","UserProfileContainer","shouldForwardProp","prop","display","alignItems","UserProfileIconContainer","odysseyDesignTokens","paddingInlineEnd","Spacing2","UserProfile","profileIcon","userName","orgName","translate","userNameEndIcon","children","sx","flexDirection","gap","color","MemoizedUserProfile","displayName"],"sources":["../../../src/labs/UserProfile.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2024-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 styled from \"@emotion/styled\";\nimport { memo, type ReactElement } from \"react\";\n\nimport { Box } from \"../Box.js\";\nimport { HtmlProps } from \"../HtmlProps.js\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../OdysseyDesignTokensContext.js\";\nimport { Subordinate } from \"../Typography.js\";\n\nconst UserProfileContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{ odysseyDesignTokens: DesignTokens }>({\n  display: \"flex\",\n  alignItems: \"center\",\n});\n\nconst UserProfileIconContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({\n  display: \"flex\",\n  paddingInlineEnd: odysseyDesignTokens.Spacing2,\n}));\n\nexport type UserProfileProps = {\n  /**\n   * Logged in user profile icon to be displayed in the top nav\n   */\n  profileIcon?: ReactElement;\n  /**\n   * Logged in user info to be displayed in the top nav\n   */\n  userName: string;\n  /**\n   * Org name of the logged in user\n   */\n  orgName: string;\n  /**\n   * The icon element to display after the username\n   */\n  userNameEndIcon?: ReactElement;\n} & Pick<HtmlProps, \"translate\">;\n\nconst UserProfile = ({\n  profileIcon,\n  userName,\n  orgName,\n  translate,\n  userNameEndIcon,\n}: UserProfileProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  return (\n    <UserProfileContainer odysseyDesignTokens={odysseyDesignTokens}>\n      {profileIcon && (\n        <UserProfileIconContainer odysseyDesignTokens={odysseyDesignTokens}>\n          {profileIcon}\n        </UserProfileIconContainer>\n      )}\n\n      <div>\n        {userNameEndIcon ? (\n          <Box\n            sx={{\n              display: \"flex\",\n              flexDirection: \"row\",\n              gap: odysseyDesignTokens.Spacing2,\n            }}\n          >\n            <Subordinate color=\"textPrimary\" translate={translate}>\n              {userName}\n            </Subordinate>\n            {userNameEndIcon}\n          </Box>\n        ) : (\n          <Subordinate color=\"textPrimary\" translate={translate}>\n            {userName}\n          </Subordinate>\n        )}\n        <Subordinate color=\"textSecondary\" translate={translate}>\n          {orgName}\n        </Subordinate>\n      </div>\n    </UserProfileContainer>\n  );\n};\n\nconst MemoizedUserProfile = memo(UserProfile);\nMemoizedUserProfile.displayName = \"UserProfile\";\n\nexport { MemoizedUserProfile as UserProfile };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAOA,MAAM,MAAM,iBAAiB;AACpC,SAASC,IAAI,QAA2B,OAAO;AAE/C,SAASC,GAAG,QAAQ,WAAW;AAE/B,SAEEC,sBAAsB,QACjB,kCAAkC;AACzC,SAASC,WAAW,QAAQ,kBAAkB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAE/C,MAAMC,oBAAoB,GAAGT,MAAM,CAAC,KAAK,EAAE;EACzCU,iBAAiB,EAAGC,IAAI,IAAKA,IAAI,KAAK;AACxC,CAAC,CAAC,CAAwC;EACxCC,OAAO,EAAE,MAAM;EACfC,UAAU,EAAE;AACd,CAAC,CAAC;AAEF,MAAMC,wBAAwB,GAAGd,MAAM,CAAC,KAAK,EAAE;EAC7CU,iBAAiB,EAAGC,IAAI,IAAKA,IAAI,KAAK;AACxC,CAAC,CAAC,CAAwC,CAAC;EAAEI;AAAoB,CAAC,MAAM;EACtEH,OAAO,EAAE,MAAM;EACfI,gBAAgB,EAAED,mBAAmB,CAACE;AACxC,CAAC,CAAC,CAAC;AAqBH,MAAMC,WAAW,GAAGA,CAAC;EACnBC,WAAW;EACXC,QAAQ;EACRC,OAAO;EACPC,SAAS;EACTC;AACgB,CAAC,KAAK;EACtB,MAAMR,mBAAmB,GAAGZ,sBAAsB,CAAC,CAAC;EAEpD,OACEK,KAAA,CAACC,oBAAoB;IAACM,mBAAmB,EAAEA,mBAAoB;IAAAS,QAAA,GAC5DL,WAAW,IACVb,IAAA,CAACQ,wBAAwB;MAACC,mBAAmB,EAAEA,mBAAoB;MAAAS,QAAA,EAChEL;IAAW,CACY,CAC3B,EAEDX,KAAA;MAAAgB,QAAA,GACGD,eAAe,GACdf,KAAA,CAACN,GAAG;QACFuB,EAAE,EAAE;UACFb,OAAO,EAAE,MAAM;UACfc,aAAa,EAAE,KAAK;UACpBC,GAAG,EAAEZ,mBAAmB,CAACE;QAC3B,CAAE;QAAAO,QAAA,GAEFlB,IAAA,CAACF,WAAW;UAACwB,KAAK,EAAC,aAAa;UAACN,SAAS,EAAEA,SAAU;UAAAE,QAAA,EACnDJ;QAAQ,CACE,CAAC,EACbG,eAAe;MAAA,CACb,CAAC,GAENjB,IAAA,CAACF,WAAW;QAACwB,KAAK,EAAC,aAAa;QAACN,SAAS,EAAEA,SAAU;QAAAE,QAAA,EACnDJ;MAAQ,CACE,CACd,EACDd,IAAA,CAACF,WAAW;QAACwB,KAAK,EAAC,eAAe;QAACN,SAAS,EAAEA,SAAU;QAAAE,QAAA,EACrDH;MAAO,CACG,CAAC;IAAA,CACX,CAAC;EAAA,CACc,CAAC;AAE3B,CAAC;AAED,MAAMQ,mBAAmB,GAAG5B,IAAI,CAACiB,WAAW,CAAC;AAC7CW,mBAAmB,CAACC,WAAW,GAAG,aAAa;AAE/C,SAASD,mBAAmB,IAAIX,WAAW","ignoreList":[]}

package/dist/esm/labs/UserProfileMenuButton.js

@@ -0,0 +1,59 @@
+/*!
+ * Copyright (c) 2024-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 { memo } from "react";
+import styled from "@emotion/styled";
+import { ChevronDownIcon } from "../icons.generated/index.js";
+import { BaseMenuButton } from "../Buttons/BaseMenuButton.js";
+import { useOdysseyDesignTokens } from "../OdysseyDesignTokensContext.js";
+import { UserProfile } from "./UserProfile.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const StyledUnsetButtonHeightContainer = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})(({
+  odysseyDesignTokens
+}) => ({
+  button: {
+    height: "unset",
+    paddingBlock: odysseyDesignTokens.Spacing2,
+    textAlign: "unset"
+  }
+}));
+const UserProfileMenuButton = ({
+  profileIcon,
+  orgName,
+  translate,
+  userNameEndIcon,
+  userName,
+  ...menuButtonProps
+}) => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+  return _jsx(StyledUnsetButtonHeightContainer, {
+    odysseyDesignTokens: odysseyDesignTokens,
+    children: _jsx(BaseMenuButton, {
+      ...menuButtonProps,
+      buttonVariant: "floating",
+      omitEndIcon: true,
+      buttonChildren: _jsx(UserProfile, {
+        profileIcon: profileIcon,
+        userName: userName,
+        orgName: orgName,
+        translate: translate,
+        userNameEndIcon: userNameEndIcon ?? _jsx(ChevronDownIcon, {})
+      })
+    })
+  });
+};
+const MemoizedUserProfileMenuButton = memo(UserProfileMenuButton);
+MemoizedUserProfileMenuButton.displayName = "UserProfileMenuButton";
+export { MemoizedUserProfileMenuButton as UserProfileMenuButton };
+//# sourceMappingURL=UserProfileMenuButton.js.map

package/dist/esm/labs/UserProfileMenuButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserProfileMenuButton.js","names":["memo","styled","ChevronDownIcon","BaseMenuButton","useOdysseyDesignTokens","UserProfile","jsx","_jsx","StyledUnsetButtonHeightContainer","shouldForwardProp","prop","odysseyDesignTokens","button","height","paddingBlock","Spacing2","textAlign","UserProfileMenuButton","profileIcon","orgName","translate","userNameEndIcon","userName","menuButtonProps","children","buttonVariant","omitEndIcon","buttonChildren","MemoizedUserProfileMenuButton","displayName"],"sources":["../../../src/labs/UserProfileMenuButton.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2024-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 { memo } from \"react\";\nimport styled from \"@emotion/styled\";\n\nimport { ChevronDownIcon } from \"../icons.generated/index.js\";\nimport {\n  AdditionalBaseMenuButtonProps,\n  BaseMenuButton,\n  BaseMenuButtonProps,\n} from \"../Buttons/BaseMenuButton.js\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../OdysseyDesignTokensContext.js\";\nimport { UserProfile, UserProfileProps } from \"./UserProfile.js\";\n\nconst StyledUnsetButtonHeightContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens }) => ({\n  button: {\n    height: \"unset\",\n    paddingBlock: odysseyDesignTokens.Spacing2,\n    textAlign: \"unset\",\n  },\n}));\n\nexport type UserProfileMenuButtonProps = Omit<\n  BaseMenuButtonProps,\n  \"endIcon\" | \"variant\"\n> &\n  AdditionalBaseMenuButtonProps &\n  UserProfileProps & {\n    /**\n     *\n     * NOTE: In this case, attribute only applies to user name and org name\n     */\n    translate?: string;\n  };\n\nconst UserProfileMenuButton = ({\n  profileIcon,\n  orgName,\n  translate,\n  userNameEndIcon,\n  userName,\n  ...menuButtonProps\n}: UserProfileMenuButtonProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  return (\n    <StyledUnsetButtonHeightContainer odysseyDesignTokens={odysseyDesignTokens}>\n      <BaseMenuButton\n        {...menuButtonProps}\n        buttonVariant=\"floating\"\n        omitEndIcon={true}\n        buttonChildren={\n          <UserProfile\n            profileIcon={profileIcon}\n            userName={userName}\n            orgName={orgName}\n            translate={translate}\n            userNameEndIcon={userNameEndIcon ?? <ChevronDownIcon />}\n          />\n        }\n      />\n    </StyledUnsetButtonHeightContainer>\n  );\n};\n\nconst MemoizedUserProfileMenuButton = memo(UserProfileMenuButton);\nMemoizedUserProfileMenuButton.displayName = \"UserProfileMenuButton\";\n\nexport { MemoizedUserProfileMenuButton as UserProfileMenuButton };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,QAAQ,OAAO;AAC5B,OAAOC,MAAM,MAAM,iBAAiB;AAEpC,SAASC,eAAe,QAAQ,6BAA6B;AAC7D,SAEEC,cAAc,QAET,8BAA8B;AACrC,SAEEC,sBAAsB,QACjB,kCAAkC;AACzC,SAASC,WAAW,QAA0B,kBAAkB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAEjE,MAAMC,gCAAgC,GAAGP,MAAM,CAAC,KAAK,EAAE;EACrDQ,iBAAiB,EAAGC,IAAI,IAAKA,IAAI,KAAK;AACxC,CAAC,CAAC,CAEC,CAAC;EAAEC;AAAoB,CAAC,MAAM;EAC/BC,MAAM,EAAE;IACNC,MAAM,EAAE,OAAO;IACfC,YAAY,EAAEH,mBAAmB,CAACI,QAAQ;IAC1CC,SAAS,EAAE;EACb;AACF,CAAC,CAAC,CAAC;AAeH,MAAMC,qBAAqB,GAAGA,CAAC;EAC7BC,WAAW;EACXC,OAAO;EACPC,SAAS;EACTC,eAAe;EACfC,QAAQ;EACR,GAAGC;AACuB,CAAC,KAAK;EAChC,MAAMZ,mBAAmB,GAAGP,sBAAsB,CAAC,CAAC;EAEpD,OACEG,IAAA,CAACC,gCAAgC;IAACG,mBAAmB,EAAEA,mBAAoB;IAAAa,QAAA,EACzEjB,IAAA,CAACJ,cAAc;MAAA,GACToB,eAAe;MACnBE,aAAa,EAAC,UAAU;MACxBC,WAAW,EAAE,IAAK;MAClBC,cAAc,EACZpB,IAAA,CAACF,WAAW;QACVa,WAAW,EAAEA,WAAY;QACzBI,QAAQ,EAAEA,QAAS;QACnBH,OAAO,EAAEA,OAAQ;QACjBC,SAAS,EAAEA,SAAU;QACrBC,eAAe,EAAEA,eAAe,IAAId,IAAA,CAACL,eAAe,IAAE;MAAE,CACzD;IACF,CACF;EAAC,CAC8B,CAAC;AAEvC,CAAC;AAED,MAAM0B,6BAA6B,GAAG5B,IAAI,CAACiB,qBAAqB,CAAC;AACjEW,6BAA6B,CAACC,WAAW,GAAG,uBAAuB;AAEnE,SAASD,6BAA6B,IAAIX,qBAAqB","ignoreList":[]}

package/dist/esm/labs/index.js

@@ -0,0 +1,32 @@
+/*!
+ * 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.
+ */
+
+export { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
+export { LocalizationProvider } from "@mui/x-date-pickers";
+export * from "./AppTile.js";
+export * from "./DatePickers/index.js";
+export * from "./DataView/index.js";
+export * from "./DataTablePagination.js";
+export * from "./DataFilters.js";
+export * from "./materialReactTableTypes.js";
+export * from "./StaticTable.js";
+export * from "./OdysseyPickers/index.js";
+export * from "./PageTemplate/index.js";
+export * from "./PaginatedTable.js";
+export * from "./UserProfile.js";
+export * from "./UserProfileMenuButton.js";
+export * from "../ui-shell/AppSwitcher/index.js";
+export * from "../ui-shell/SideNav/index.js";
+export * from "../ui-shell/TopNav/index.js";
+export * from "../ui-shell/UiShell.js";
+export { GroupPicker } from "./GroupPicker.js";
+//# sourceMappingURL=index.js.map

package/dist/esm/labs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["AdapterDateFns","LocalizationProvider","GroupPicker"],"sources":["../../../src/labs/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 { AdapterDateFns } from \"@mui/x-date-pickers/AdapterDateFns\";\nexport { LocalizationProvider } from \"@mui/x-date-pickers\";\nexport type { LocalizationProviderProps } from \"@mui/x-date-pickers\";\n\n// export * from \"./AdaptablePicker\";\nexport * from \"./AppTile.js\";\nexport * from \"./DatePickers/index.js\";\nexport * from \"./DataView/index.js\";\n/** @deprecated Will be removed in a future Odyssey version in lieu of the one shipping with DataTable */\nexport * from \"./DataTablePagination.js\";\nexport * from \"./DataFilters.js\";\nexport * from \"./materialReactTableTypes.js\";\n/** @deprecated Will be removed in a future Odyssey version in lieu of DataTable */\nexport * from \"./StaticTable.js\";\nexport * from \"./OdysseyPickers/index.js\";\nexport * from \"./PageTemplate/index.js\";\n/** @deprecated Will be removed in a future Odyssey version in lieu of DataTable */\nexport * from \"./PaginatedTable.js\";\nexport * from \"./UserProfile.js\";\nexport * from \"./UserProfileMenuButton.js\";\n/** @deprecated Will be removed in a future Odyssey version. Use the `/ui-shell` export unless your app is running React v17. */\nexport * from \"../ui-shell/AppSwitcher/index.js\";\n/** @deprecated Will be removed in a future Odyssey version. Use the `/ui-shell` export unless your app is running React v17. */\nexport * from \"../ui-shell/SideNav/index.js\";\n/** @deprecated Will be removed in a future Odyssey version. Use the `/ui-shell` export unless your app is running React v17. */\nexport * from \"../ui-shell/TopNav/index.js\";\n/** @deprecated Will be removed in a future Odyssey version. Use the `/ui-shell` export unless your app is running React v17. */\nexport * from \"../ui-shell/UiShell.js\";\n\nexport {\n  /** @deprecated Will be removed in a future Odyssey version. Use `PickerWithOptionAdornment` */\n  GroupPicker,\n  type GroupPickerOptionType,\n  type GroupPickerProps,\n} from \"./GroupPicker.js\";\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,cAAc,QAAQ,oCAAoC;AACnE,SAASC,oBAAoB,QAAQ,qBAAqB;AAI1D,cAAc,cAAc;AAC5B,cAAc,wBAAwB;AACtC,cAAc,qBAAqB;AAEnC,cAAc,0BAA0B;AACxC,cAAc,kBAAkB;AAChC,cAAc,8BAA8B;AAE5C,cAAc,kBAAkB;AAChC,cAAc,2BAA2B;AACzC,cAAc,yBAAyB;AAEvC,cAAc,qBAAqB;AACnC,cAAc,kBAAkB;AAChC,cAAc,4BAA4B;AAE1C,cAAc,kCAAkC;AAEhD,cAAc,8BAA8B;AAE5C,cAAc,6BAA6B;AAE3C,cAAc,wBAAwB;AAEtC,SAEEC,WAAW,QAGN,kBAAkB","ignoreList":[]}

package/dist/esm/labs/materialReactTableTypes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"materialReactTableTypes.js","names":[],"sources":["../../../src/labs/materialReactTableTypes.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 { MaterialReactTable } from \"material-react-table\";\n\nexport type DefaultMaterialReactTableData = Record<string, unknown>;\n\nexport type MaterialReactTableProps<\n  TData extends DefaultMaterialReactTableData,\n> = Parameters<typeof MaterialReactTable<TData>>[0];\n"],"mappings":"","ignoreList":[]}