@okta/odyssey-react-mui 0.24.0 → 1.0.0

package/src/icons.generated/index.ts

@@ -0,0 +1,87 @@
+/*!
+ * 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.
+ */
+
+// Code automatically generated by svgr; DO NOT EDIT.
+
+export * from "./Add";
+export * from "./AddCircle";
+export * from "./Apps";
+export * from "./ArrowDown";
+export * from "./ArrowLeft";
+export * from "./ArrowLowerLeft";
+export * from "./ArrowLowerRight";
+export * from "./ArrowRight";
+export * from "./ArrowUnsorted";
+export * from "./ArrowUp";
+export * from "./ArrowUpperLeft";
+export * from "./ArrowUpperRight";
+export * from "./Bug";
+export * from "./Calendar";
+export * from "./Call";
+export * from "./Chat";
+export * from "./Check";
+export * from "./CheckCircleFilled";
+export * from "./ChevronDown";
+export * from "./ChevronLeft";
+export * from "./ChevronRight";
+export * from "./ChevronUp";
+export * from "./Clock";
+export * from "./Close";
+export * from "./CloseCircleFilled";
+export * from "./CollapseLeft";
+export * from "./CollapseRight";
+export * from "./Copy";
+export * from "./DangerDiamond";
+export * from "./DangerDiamondFilled";
+export * from "./Delete";
+export * from "./Deny";
+export * from "./Devices";
+export * from "./Directory";
+export * from "./Documentation";
+export * from "./Download";
+export * from "./DragIndicator";
+export * from "./Edit";
+export * from "./ExpandLeft";
+export * from "./ExpandRight";
+export * from "./ExternalLink";
+export * from "./Filter";
+export * from "./Folder";
+export * from "./Globe";
+export * from "./Grid";
+export * from "./Group";
+export * from "./Hide";
+export * from "./Home";
+export * from "./InformationCircle";
+export * from "./InformationCircleFilled";
+export * from "./Link";
+export * from "./List";
+export * from "./Lock";
+export * from "./More";
+export * from "./Notification";
+export * from "./Pause";
+export * from "./QuestionCircle";
+export * from "./QuestionCircleFilled";
+export * from "./Refresh";
+export * from "./Reset";
+export * from "./Resume";
+export * from "./Search";
+export * from "./Server";
+export * from "./Settings";
+export * from "./Show";
+export * from "./Subtract";
+export * from "./Sync";
+export * from "./Unlock";
+export * from "./Upload";
+export * from "./User";
+export * from "./Video";
+export * from "./Warning";
+export * from "./WarningFilled";

package/src/index.ts

@@ -10,100 +10,57 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
+export { deepmerge, visuallyHidden } from "@mui/utils";
+
 export {
-  Alert,
-  AlertTitle,
-  Box,
-  Chip,
   createTheme,
+  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */
   CssBaseline,
+  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */
   DialogContentText,
+  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */
   Divider,
-  FormControl,
-  FormControlLabel,
-  FormGroup,
-  FormHelperText,
-  FormLabel,
-  IconButton,
-  /** @deprecated Will be removed in a future Odyssey version. Please switch to `TextField`. */
+  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */
   InputAdornment,
-  /** @deprecated Will be removed in a future Odyssey version. Please switch to `TextField`. */
+  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */
   InputBase,
-  /** @deprecated Will be removed in a future Odyssey version. Please switch to `TextField`. */
-  InputLabel,
-  List,
-  ListItem,
+  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */
   ListItemIcon,
+  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */
   ListItemText,
+  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */
   ListSubheader,
-  Menu,
+  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */
   MenuList,
+  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */
   Paper,
+  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */
   ScopedCssBaseline,
-  Snackbar,
-  Stack,
-  SvgIcon,
-  Table,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableHead,
-  TableRow,
-  TableSortLabel,
-  ThemeProvider as MuiThemeProvider,
-  Typography,
+  ThemeProvider,
 } from "@mui/material";
 
 export type {
-  AlertProps,
-  AlertTitleProps,
-  BoxProps,
-  ChipProps,
   CssBaselineProps,
+  DialogContentTextProps,
   DividerProps,
-  FormControlLabelProps,
-  FormControlProps,
-  FormGroupProps,
-  FormHelperTextProps,
-  FormLabelProps,
-  IconButtonProps,
-  /** @deprecated Will be removed in a future Odyssey version. Please switch to `TextFieldProps`. */
   InputAdornmentProps,
-  /** @deprecated Will be removed in a future Odyssey version. Please switch to `TextFieldProps`. */
   InputBaseProps,
-  /** @deprecated Will be removed in a future Odyssey version. Please switch to `TextFieldProps`. */
-  InputLabelProps,
-  ListProps,
-  ListItemProps,
   ListItemIconProps,
   ListItemTextProps,
   ListSubheaderProps,
-  MenuProps,
   MenuListProps,
   PaperProps,
   ScopedCssBaselineProps,
-  SelectChangeEvent,
-  SnackbarProps,
-  StackProps,
-  SvgIconProps,
-  TableBodyProps,
-  TableCellProps,
-  TableContainerProps,
-  TableHeadProps,
-  TableProps,
-  TableRowProps,
-  TableSortLabelProps,
   ThemeOptions,
-  TypographyProps,
 } from "@mui/material";
 
-export { default as FavoriteIcon } from "@mui/icons-material/Favorite";
-
-export { deepmerge, visuallyHidden } from "@mui/utils";
+export { useOdysseyDesignTokens } from "./OdysseyDesignTokensContext";
 
 export * from "./Autocomplete";
 export * from "./Banner";
+export * from "./Box";
 export * from "./Button";
+export * from "./Callout";
 export * from "./Checkbox";
 export * from "./CheckboxGroup";
 export * from "./CircularProgress";
@@ -111,13 +68,11 @@ export * from "./createUniqueId";
 export * from "./Dialog";
 export * from "./Fieldset";
 export * from "./Form";
-export * from "./Icon";
-export * from "./iconDictionary";
-export * from "./Infobox";
 export * from "./Link";
 export * from "./MenuButton";
 export * from "./MenuItem";
 export * from "./NativeSelect";
+export * from "./NullElement";
 export * from "./OdysseyCacheProvider";
 export * from "./OdysseyProvider";
 export * from "./OdysseyThemeProvider";
@@ -134,7 +89,8 @@ export * from "./Tag";
 export * from "./TagList";
 export * from "./TextField";
 export * from "./theme";
-export * from "./Tooltip";
 export * from "./Toast";
 export * from "./ToastStack";
+export * from "./Tooltip";
+export * from "./Typography";
 export * from "./useUniqueId";

package/src/labs/DatePicker.tsx

@@ -0,0 +1,48 @@
+/*!
+ * 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 { InputBase } from "@mui/material";
+import {
+  DatePicker as MuiDatePicker,
+  DatePickerProps as MuiDatePickerProps,
+} from "@mui/x-date-pickers";
+import { useCallback } from "react";
+
+export type DatePickerProps<TInputDate, TDate> = {
+  label: MuiDatePickerProps<TInputDate, TDate>["label"];
+  onChange: MuiDatePickerProps<TInputDate, TDate>["onChange"];
+  value: MuiDatePickerProps<TInputDate, TDate>["value"];
+};
+
+export const DatePicker = <TInputDate, TDate>({
+  label,
+  onChange,
+  value = null,
+}: DatePickerProps<TInputDate, TDate>) => {
+  const renderInput = useCallback(({ InputProps, ...props }) => {
+    const combinedProps = {
+      ...InputProps,
+      ...props,
+    };
+
+    return <InputBase {...combinedProps} />;
+  }, []);
+
+  return (
+    <MuiDatePicker
+      label={label}
+      onChange={onChange}
+      renderInput={renderInput}
+      value={value}
+    />
+  );
+};

package/src/labs/DatePicker.types.ts

@@ -0,0 +1,24 @@
+/*!
+ * 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.
+ */
+
+// This has to be imported separately for theme types, so it's been separated out to make that clear.
+import "@mui/x-date-pickers/themeAugmentation";
+
+import { PickersComponentNameToClassKey } from "@mui/x-date-pickers/themeAugmentation";
+
+declare module "@mui/material/styles" {
+  interface ComponentNameToClassKey extends PickersComponentNameToClassKey {
+    PrivatePickersYear:
+      | PickersComponentNameToClassKey["PrivatePickersYear"]
+      | "button";
+  }
+}

package/src/labs/PaginatedTable.tsx

@@ -0,0 +1,272 @@
+/*!
+ * 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 { AlertProps, TablePaginationProps } from "@mui/material";
+import { Typography } from "../Typography";
+import MaterialReactTable, {
+  MRT_PaginationState,
+  type MRT_ColumnFiltersState,
+  type MRT_RowSelectionState,
+  type MRT_TableInstance,
+  type MRT_Virtualizer,
+} from "material-react-table";
+import {
+  FunctionComponent,
+  memo,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { Trans, useTranslation } from "react-i18next";
+
+import type {
+  DefaultMaterialReactTableData,
+  MaterialReactTableProps,
+} from "./materialReactTableTypes";
+
+export type PaginatedTableProps<TData extends DefaultMaterialReactTableData> = {
+  columns: MaterialReactTableProps<TData>["columns"];
+  data: MaterialReactTableProps<TData>["data"];
+  fetchMoreData?: () => void;
+  getRowId?: MaterialReactTableProps<TData>["getRowId"];
+  hasError?: boolean;
+  hasRowSelection?: boolean;
+  initialState?: MaterialReactTableProps<TData>["initialState"];
+  isFetching?: boolean;
+  onGlobalFilterChange?: MaterialReactTableProps<TData>["onGlobalFilterChange"];
+  onPaginationChange?: MaterialReactTableProps<TData>["onPaginationChange"];
+  onRowSelectionChange?: MaterialReactTableProps<TData>["onRowSelectionChange"];
+  rowsPerPage?: number;
+  state?: MaterialReactTableProps<TData>["state"];
+  ToolbarButtons?: FunctionComponent<
+    { table: MRT_TableInstance<TData> } & unknown
+  >;
+};
+
+const PaginatedTable = <TData extends DefaultMaterialReactTableData>({
+  columns,
+  data,
+  fetchMoreData,
+  getRowId,
+  hasError,
+  hasRowSelection,
+  initialState,
+  isFetching,
+  onGlobalFilterChange,
+  onPaginationChange,
+  onRowSelectionChange: onRowSelectionChangeProp,
+  rowsPerPage = 10,
+  state,
+  ToolbarButtons,
+}: PaginatedTableProps<TData>) => {
+  const { t } = useTranslation();
+
+  const rowVirtualizerInstanceRef =
+    useRef<MRT_Virtualizer<HTMLDivElement, HTMLTableRowElement>>(null);
+
+  const [columnFilters, setColumnFilters] = useState<MRT_ColumnFiltersState>(
+    []
+  );
+
+  const [globalFilter, setGlobalFilter] = useState<string>();
+
+  useEffect(() => {
+    if (globalFilter) {
+      onGlobalFilterChange?.(globalFilter);
+    }
+  }, [globalFilter, onGlobalFilterChange]);
+
+  useEffect(() => {
+    try {
+      // Scroll to top of table when sorting or filters change.
+      rowVirtualizerInstanceRef.current?.scrollToIndex?.(0);
+    } catch (error) {
+      console.error(error);
+    }
+  }, [columnFilters, globalFilter]);
+
+  const totalFetchedRows = data.length ?? 0;
+
+  const renderBottomToolbarCustomActions = useCallback(
+    () =>
+      fetchMoreData ? (
+        <Typography>
+          <Trans
+            count={totalFetchedRows}
+            i18nKey="table.fetchedrows.text"
+            values={{
+              totalRows: totalFetchedRows,
+            }}
+          />
+        </Typography>
+      ) : (
+        <Typography>
+          <Trans
+            count={totalFetchedRows}
+            i18nKey="table.rows.text"
+            values={{
+              totalRows: totalFetchedRows,
+            }}
+          />
+        </Typography>
+      ),
+    [fetchMoreData, totalFetchedRows]
+  );
+
+  const renderTopToolbarCustomActions = useCallback<
+    Exclude<
+      MaterialReactTableProps<TData>["renderTopToolbarCustomActions"],
+      undefined
+    >
+  >(
+    ({ table }) => <>{ToolbarButtons && <ToolbarButtons table={table} />}</>,
+    [ToolbarButtons]
+  );
+
+  const [rowSelection, setRowSelection] = useState<MRT_RowSelectionState>({});
+
+  useEffect(() => {
+    onRowSelectionChangeProp?.(rowSelection);
+  }, [onRowSelectionChangeProp, rowSelection]);
+
+  const [pagination, setPagination] = useState<MRT_PaginationState>(
+    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: AlertProps = useMemo(
+    () =>
+      hasError
+        ? {
+            children: t("table.error"),
+            severity: "error",
+          }
+        : {},
+    [hasError, t]
+  );
+
+  const muiTablePaginationProps: Partial<
+    Omit<TablePaginationProps, "rowsPerPage">
+  > = 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 (
+    <MaterialReactTable
+      columns={columns}
+      data={data}
+      enableMultiRowSelection={hasRowSelection}
+      enablePagination
+      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) as typeof PaginatedTable;
+
+// @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.
+MemoizedPaginatedTable.displayName = "PaginatedTable";
+
+export { MemoizedPaginatedTable as PaginatedTable };

package/src/labs/README.md

@@ -0,0 +1,44 @@
+# @okta/odyssey-react-labs
+
+## Production Readiness
+
+This project has not yet hit version 1.0.0 and is still in active development.
+
+That said, it is beyond the early alpha stage in some key areas. For some
+early-adopters that means it is good enough to use for real things. Some
+other people think this means it is not ready yet.
+
+Even though the project is in development, effort is still made to keep
+the API stable. Patch versions are intended for backwards-compatible
+changes and minor versions are intended for backwards-incompatible changes.
+
+If you plan to use this for something real, you should either pin the
+exact version (maximum safety) or pin the major and minor versions
+(only accept backwards-compatible upgrades).
+
+## Getting Started
+
+Install the package and peer dependencies:
+
+```sh
+yarn add @okta/odyssey-react-mui @okta/odyssey-react-labs @emotion/react
+```
+
+## Components
+
+Components are published in an ESM format transpiled for the modern browsers
+within the [Okta supported browser list][1]. These modules can be served
+directly to evergreen browsers for simple applications, or further transpiled,
+bundled, and polyfilled for advanced use cases and browser support targets.
+
+[1]: https://help.okta.com/en/prod/Content/Topics/Miscellaneous/Platforms_Browser_OS_Support.htm
+
+## License
+
+[Apache Version 2.0](https://github.com/okta/odyssey/blob/master/LICENSE)
+
+## Support Disclaimer
+
+This library is community supported and is maintained by members of the Okta team for developers and IT professionals.
+This library is not an official Okta product and does not qualify for any Okta support. Anyone who chooses to use this
+library must ensure that their implementation meets any applicable legal obligations including any Okta terms and conditions.