@okta/odyssey-react-mui 1.32.0 → 1.33.0

package/src/labs/PageTemplate/PageTemplate.tsx

@@ -1,234 +0,0 @@
-/*!
- * 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, ReactElement, ReactNode } from "react";
-
-import { DrawerProps } from "../../Drawer.js";
-import { DocumentationIcon } from "../../icons.generated/index.js";
-import { Link } from "../../Link.js";
-import {
-  DesignTokens,
-  useOdysseyDesignTokens,
-} from "../../OdysseyDesignTokensContext.js";
-import { Heading4, Subordinate } from "../../Typography.js";
-import { useHasUiShell } from "../../ui-shell/useHasUiShell.js";
-
-export type PageTemplateProps = {
-  /**
-   * The title of the layout to be situated in the layout header
-   */
-  title?: string;
-  /**
-   * A supplementary description to be situated in the layout header
-   */
-  description?: string;
-  /**
-   * The destination for a documentation `Link` to be situated in the layout header
-   */
-  documentationLink?: string;
-  /**
-   * The text for a documentation `Link` to be situated in the layout header
-   */
-  documentationText?: string;
-  /**
-   * An optional `Drawer` object. Can be of variant 'temporary' or 'persistent'.
-   */
-  drawer?: ReactElement<DrawerProps>;
-  /**
-   * An optional `Button` object to be situated in the layout header. Should almost always be of variant `primary`.
-   */
-  primaryCallToActionComponent?: ReactElement;
-  /**
-   * An optional `Button` object to be situated in the layout header, alongside the `callToActionPrimaryComponent`.
-   */
-  secondaryCallToActionComponent?: ReactElement;
-  /**
-   * An optional `Button` object to be situated in the layout header, alongside the other two `callToAction` components.
-   */
-  tertiaryCallToActionComponent?: ReactElement;
-  /**
-   * The content of the layout. May be a `string` or any other `ReactNode` or array of `ReactNode`s. Will often be `Grid` objects.
-   */
-  children?: ReactNode;
-  /**
-   * When set to `true`, the layout expands past its max width of 1440px and spans the entire available screen width.
-   */
-  isFullWidth?: boolean;
-};
-
-type TemplateContentProps = {
-  odysseyDesignTokens: DesignTokens;
-  isDrawerOpen?: boolean;
-  drawerVariant?: string;
-};
-
-const TemplateContainer = styled("div", {
-  shouldForwardProp: (prop) =>
-    prop !== "odysseyDesignTokens" &&
-    prop !== "hasUiShell" &&
-    prop !== "isFullWidth",
-})<{
-  hasUiShell: boolean;
-  isFullWidth: boolean;
-  odysseyDesignTokens: DesignTokens;
-}>(({ hasUiShell, isFullWidth, odysseyDesignTokens }) => ({
-  maxWidth: isFullWidth
-    ? "100%"
-    : `calc(1440px + ${odysseyDesignTokens.Spacing6} + ${odysseyDesignTokens.Spacing6})`,
-  marginInline:
-    isFullWidth && !hasUiShell ? odysseyDesignTokens.Spacing6 : "auto",
-  padding: hasUiShell ? 0 : odysseyDesignTokens.Spacing6,
-}));
-
-const TemplateHeader = styled("div")(() => ({
-  display: "flex",
-  alignItems: "flex-end",
-  justifyContent: "space-between",
-}));
-
-const TemplateHeaderPrimaryContent = styled("div")(() => ({
-  [".MuiTypography-root:last-child"]: {
-    marginBlockEnd: "0",
-  },
-}));
-
-const TemplateHeaderSecondaryContent = styled("div", {
-  shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
-})<{
-  odysseyDesignTokens: DesignTokens;
-}>(({ odysseyDesignTokens }) => ({
-  alignItems: "flex-end",
-  display: "flex",
-  flexDirection: "column",
-  gap: odysseyDesignTokens.Spacing2,
-  minHeight: odysseyDesignTokens.Spacing7,
-  justifyContent: "center",
-}));
-
-const TemplateHeaderButtons = styled("div", {
-  shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
-})<{
-  odysseyDesignTokens: DesignTokens;
-}>(({ odysseyDesignTokens }) => ({
-  display: "flex",
-  gap: odysseyDesignTokens.Spacing2,
-}));
-
-const TemplateContent = styled("div", {
-  shouldForwardProp: (prop) =>
-    !["odysseyDesignTokens", "isDrawerOpen", "drawerVariant"].includes(prop),
-})<TemplateContentProps>(
-  ({ odysseyDesignTokens, isDrawerOpen, drawerVariant }) => ({
-    "@keyframes animate-drawer-open": {
-      "0%": {
-        gridTemplateColumns: "minmax(0, 1fr) 0",
-      },
-      "100%": {
-        gridTemplateColumns: "minmax(0, 1fr) 360px",
-      },
-    },
-    "@keyframes animate-drawer-close": {
-      "0%": {
-        gridTemplateColumns: "minmax(0, 1fr) 360px",
-      },
-      "100%": {
-        gridTemplateColumns: "minmax(0, 1fr) 0",
-      },
-    },
-    display: "grid",
-    gridGap:
-      drawerVariant === "persistent" && !isDrawerOpen
-        ? 0
-        : odysseyDesignTokens.Spacing4,
-    gap:
-      drawerVariant === "persistent" && !isDrawerOpen
-        ? 0
-        : odysseyDesignTokens.Spacing4,
-    marginBlock: odysseyDesignTokens.Spacing4,
-    gridTemplateColumns:
-      drawerVariant === "persistent"
-        ? isDrawerOpen
-          ? "minmax(0, 1fr) 360px"
-          : "minmax(0, 1fr) 0"
-        : "minmax(0, 1fr)",
-    animation:
-      drawerVariant === "persistent" && isDrawerOpen
-        ? "animate-drawer-open 225ms cubic-bezier(0, 0, 0.2, 1)"
-        : "animate-drawer-close 225ms cubic-bezier(0, 0, 0.2, 1)",
-  }),
-);
-
-const PageTemplate = ({
-  children,
-  description,
-  documentationLink,
-  documentationText,
-  drawer,
-  isFullWidth = false,
-  primaryCallToActionComponent,
-  secondaryCallToActionComponent,
-  tertiaryCallToActionComponent,
-  title,
-}: PageTemplateProps) => {
-  const odysseyDesignTokens = useOdysseyDesignTokens();
-  const { isOpen: isDrawerOpen, variant: drawerVariant } = drawer?.props ?? {};
-
-  const hasUiShell = useHasUiShell();
-
-  return (
-    <TemplateContainer
-      hasUiShell={hasUiShell}
-      isFullWidth={isFullWidth}
-      odysseyDesignTokens={odysseyDesignTokens}
-    >
-      <TemplateHeader>
-        <TemplateHeaderPrimaryContent>
-          {title && <Heading4>{title}</Heading4>}
-          {description && <Subordinate>{description}</Subordinate>}
-        </TemplateHeaderPrimaryContent>
-
-        <TemplateHeaderSecondaryContent
-          odysseyDesignTokens={odysseyDesignTokens}
-        >
-          {documentationLink && (
-            <Link href={documentationLink} icon={<DocumentationIcon />}>
-              {documentationText}
-            </Link>
-          )}
-          {(primaryCallToActionComponent ||
-            secondaryCallToActionComponent ||
-            tertiaryCallToActionComponent) && (
-            <TemplateHeaderButtons odysseyDesignTokens={odysseyDesignTokens}>
-              {tertiaryCallToActionComponent}
-              {secondaryCallToActionComponent}
-              {primaryCallToActionComponent}
-            </TemplateHeaderButtons>
-          )}
-        </TemplateHeaderSecondaryContent>
-      </TemplateHeader>
-      <TemplateContent
-        odysseyDesignTokens={odysseyDesignTokens}
-        isDrawerOpen={isDrawerOpen}
-        drawerVariant={drawerVariant}
-      >
-        {children}
-        {drawer}
-      </TemplateContent>
-    </TemplateContainer>
-  );
-};
-
-const MemoizedPageTemplate = memo(PageTemplate);
-MemoizedPageTemplate.displayName = "PageTemplate";
-
-export { MemoizedPageTemplate as PageTemplate };

package/src/labs/PageTemplate/index.ts

@@ -1,14 +0,0 @@
-/*!
- * 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.
- */
-
-export * from "./Layout.js";
-export * from "./PageTemplate.js";

package/src/labs/PaginatedTable.tsx

@@ -1,290 +0,0 @@
-/*!
- * 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, CheckboxProps } from "@mui/material";
-import { Typography } from "../Typography.js";
-import {
-  MRT_PaginationState,
-  type MRT_ColumnFiltersState,
-  type MRT_RowSelectionState,
-  type MRT_TableInstance,
-  type MRT_Virtualizer,
-  useMaterialReactTable,
-  MaterialReactTable,
-} 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.js";
-
-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> }>;
-};
-
-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 !== undefined) {
-      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 }: { table: MRT_TableInstance<TData> }) => (
-      <>{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<
-    Required<MaterialReactTableProps<TData>>["onPaginationChange"]
-  >(
-    (paginationFunction) => {
-      if (data.length === dataLengthRef.current) {
-        setPagination((previousPagination) => {
-          // @ts-expect-error This broke in the upgrade, but this component is legacy and replaced by `DataView`.
-          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-          const nextPagination = paginationFunction(previousPagination);
-
-          // eslint-disable-next-line @typescript-eslint/no-unsafe-return
-          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: AlertProps = useMemo(
-    () =>
-      hasError
-        ? {
-            children: t("table.error"),
-            severity: "error",
-          }
-        : {},
-    [hasError, t],
-  );
-
-  const muiTablePaginationProps = useMemo(
-    () => ({
-      rowsPerPageOptions: [],
-      showFirstButton: false,
-      showLastButton: false,
-    }),
-    [],
-  );
-
-  const muiCheckboxStyles = useCallback<
-    // @ts-expect-error This breaks after the upgrade, but it doesn't matter as this is a legacy function and internal type.
-    NonNullable<Required<CheckboxProps>["sx"]>
-  >(
-    (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 <MaterialReactTable table={table} />;
-};
-
-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

@@ -1,46 +0,0 @@
-# @okta/odyssey-react-labs
-
-## Production Readiness
-
-Odyssey is production-ready and available to use for real things. The API
-is stable for the duration of the point-release, meaning that while Odyssey is
-in version 1.x.x, there will be no changes that break the API.
-
-**Odyssey Labs** is the home for components that are usable, but not feature-complete.
-At minimum, they'll provide a good jumping-off point for your project; however, they
-are not guaranteed to have full support for the full suite of things that Odyssey
-provides, such as RTL support, internationalization, etc.
-
-This project follows semantic versioning conventions:
-
-- **Major point releases** may include breaking changes, but the API is stable for the duration of
-  the major point release (for example, 1.x.x)
-- **Minor point releases** include new features and are backwards-compatible (eg, x.1.x)
-- **Patch releases** include bug fixes (eg, x.x.1)
-
-## Getting Started
-
-To use Odyssey Labs, import as:
-
-```sh
-import from "@okta/odyssey-react-mui/labs"
-```
-
-## 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/main/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.