@okta/odyssey-react-mui 1.14.3 → 1.14.5

package/src/DataTable/DataTableEmptyState.tsx

@@ -0,0 +1,62 @@
+/*!
+ * 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 { ReactNode, memo } from "react";
+import { Heading4, Paragraph } from "../Typography";
+import { Box } from "../Box";
+import styled from "@emotion/styled";
+import {
+  useOdysseyDesignTokens,
+  DesignTokens,
+} from "../OdysseyDesignTokensContext";
+
+const EmptyContainer = styled("div", {
+  shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
+})(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({
+  display: "flex",
+  flexDirection: "column",
+  marginBlock: odysseyDesignTokens.Spacing9,
+  padding: odysseyDesignTokens.Spacing5,
+  textAlign: "center",
+  width: "100%",
+}));
+
+export type DataTableEmptyStateProps = {
+  heading: string;
+  text: string;
+  primaryButton?: ReactNode;
+  secondaryButton?: ReactNode;
+};
+
+const DataTableEmptyState = ({
+  heading,
+  text,
+  primaryButton,
+  secondaryButton,
+}: DataTableEmptyStateProps) => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+  return (
+    <EmptyContainer odysseyDesignTokens={odysseyDesignTokens}>
+      <Heading4>{heading}</Heading4>
+      <Paragraph>{text}</Paragraph>
+      {(primaryButton || secondaryButton) && (
+        <Box sx={{ marginBlockStart: 5 }}>
+          {secondaryButton}
+          {primaryButton}
+        </Box>
+      )}
+    </EmptyContainer>
+  );
+};
+
+const MemoizedDataTableEmptyState = memo(DataTableEmptyState);
+export { MemoizedDataTableEmptyState as DataTableEmptyState };

package/src/DataTable/DataTablePagination.tsx

@@ -0,0 +1,289 @@
+/*!
+ * 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 {
+  Dispatch,
+  SetStateAction,
+  memo,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { Paragraph } from "../Typography";
+import { Button } from "../Button";
+import { ArrowLeftIcon, ArrowRightIcon } from "../icons.generated";
+import styled from "@emotion/styled";
+import {
+  DesignTokens,
+  useOdysseyDesignTokens,
+} from "../OdysseyDesignTokensContext";
+import { Box } from "../Box";
+import { Trans, useTranslation } from "react-i18next";
+import { paginationTypeValues } from "./constants";
+
+const PaginationContainer = styled("div")({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+});
+
+const PaginationSegment = styled("div", {
+  shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
+})(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: odysseyDesignTokens.Spacing4,
+  "& > div": {
+    display: "flex",
+    alignItems: "center",
+    gap: odysseyDesignTokens.Spacing2,
+  },
+}));
+
+const PaginationInput = styled(InputBase, {
+  shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
+})(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({
+  borderColor: odysseyDesignTokens.HueNeutral200,
+  borderRadius: odysseyDesignTokens.BorderRadiusTight,
+  height: odysseyDesignTokens.Spacing6,
+  width: "4.5714285714rem", // This is a hardcoded value, keep as string
+  "&:hover": {
+    borderColor: odysseyDesignTokens.HueNeutral400,
+  },
+  "&.Mui-focused:hover": {
+    borderColor: odysseyDesignTokens.PalettePrimaryMain,
+  },
+}));
+
+const PaginationButtonContainer = styled("div")({
+  "& > *": {
+    marginInlineStart: `0 !important`,
+  },
+});
+
+export type DataTablePaginationProps = {
+  pagination: {
+    pageIndex: number;
+    pageSize: number;
+  };
+  setPagination: Dispatch<
+    SetStateAction<{ pageIndex: number; pageSize: number }>
+  >;
+  totalRows?: number;
+  isDisabled?: boolean;
+  /**
+   * The type of pagination controls shown. Defaults to next/prev buttons, but can be
+   * set to a simple "Load more" button by setting to "loadMore".
+   */
+  variant?: (typeof paginationTypeValues)[number];
+};
+
+const DataTablePagination = ({
+  pagination,
+  setPagination,
+  totalRows,
+  isDisabled,
+  variant,
+}: DataTablePaginationProps) => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+  const { t } = useTranslation();
+
+  const [page, setPage] = useState<number>(pagination.pageIndex);
+  const [rowsPerPage, setRowsPerPage] = useState<number>(pagination.pageSize);
+  const initialRowsPerPage = useRef<number>(pagination.pageSize);
+
+  const firstRow = pagination.pageSize * (pagination.pageIndex - 1) + 1;
+  let lastRow = firstRow + (pagination.pageSize - 1);
+  // If the last eligible row is greater than the number of total rows,
+  // show the number of total rows instead (ie, if we're showing rows
+  // 180-200 but there are only 190 rows, show 180-190 instead)
+  lastRow = totalRows && lastRow > totalRows ? totalRows : lastRow;
+
+  useEffect(() => {
+    setPage(pagination.pageIndex);
+    setRowsPerPage(pagination.pageSize);
+  }, [pagination]);
+
+  const handlePaginationChange = useCallback(() => {
+    const updatedPage =
+      totalRows && page * totalRows > lastRow
+        ? Math.ceil(totalRows / rowsPerPage)
+        : page;
+    const updatedRowsPerPage =
+      totalRows && rowsPerPage > totalRows ? totalRows : rowsPerPage;
+
+    setPagination({
+      pageIndex: updatedPage,
+      pageSize: updatedRowsPerPage,
+    });
+  }, [page, rowsPerPage, lastRow, setPagination, totalRows]);
+
+  // The following handlers use React.KeyboardEvent (rather than just KeyboardEvent) becuase React.KeyboardEvent
+  // is generic, while plain KeyboardEvent is not. We need this generic so we can specify the HTMLInputElement,
+  // which allows us to use currentTarget.value
+  const handlePageSubmit = useCallback(
+    (event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+      if (event.key === "Enter") {
+        setPagination({
+          pageIndex: parseInt(event.currentTarget.value),
+          pageSize: rowsPerPage,
+        });
+      }
+    },
+    [rowsPerPage, setPagination],
+  );
+
+  const handleRowsPerPageSubmit = useCallback(
+    (event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+      if (event.key === "Enter") {
+        setPagination({
+          pageIndex: page,
+          pageSize: parseInt(event.currentTarget.value),
+        });
+      }
+    },
+    [page, setPagination],
+  );
+
+  const setPageFromEvent = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      setPage(parseInt(event.target.value));
+    },
+    [setPage],
+  );
+
+  const setRowsPerPageFromEvent = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      setRowsPerPage(parseInt(event.target.value));
+    },
+    [setRowsPerPage],
+  );
+
+  const handleLoadMore = useCallback(() => {
+    setPagination({
+      pageIndex: 1,
+      pageSize: rowsPerPage + initialRowsPerPage.current,
+    });
+  }, [rowsPerPage, setPagination]);
+
+  const handleNextButton = useCallback(() => {
+    setPagination({ pageIndex: page + 1, pageSize: rowsPerPage });
+  }, [setPagination, page, rowsPerPage]);
+
+  const handlePreviousButton = useCallback(() => {
+    setPagination({ pageIndex: page - 1, pageSize: rowsPerPage });
+  }, [setPagination, page, rowsPerPage]);
+
+  const loadMoreIsDisabled = useMemo(() => {
+    return totalRows ? rowsPerPage >= totalRows : false;
+  }, [rowsPerPage, totalRows]);
+
+  const nextButtonDisabled = useMemo(
+    () => (totalRows ? lastRow >= totalRows : false) || isDisabled,
+    [totalRows, lastRow, isDisabled],
+  );
+
+  const previousButtonDisabled = useMemo(
+    () => pagination.pageIndex <= 1 || isDisabled,
+    [pagination, isDisabled],
+  );
+
+  return variant === "paged" ? (
+    <PaginationContainer>
+      <PaginationSegment odysseyDesignTokens={odysseyDesignTokens}>
+        <Box>
+          <Paragraph component="span" color="textSecondary">
+            {t("table.pagination.rowsperpage")}
+          </Paragraph>
+          <PaginationInput
+            odysseyDesignTokens={odysseyDesignTokens}
+            type="number"
+            value={rowsPerPage}
+            onChange={setRowsPerPageFromEvent}
+            onBlur={handlePaginationChange}
+            onKeyDown={handleRowsPerPageSubmit}
+            disabled={isDisabled}
+            inputProps={{
+              "aria-label": t("table.pagination.rowsperpage"),
+            }}
+          />
+        </Box>
+        <Paragraph component="span" color="textSecondary">
+          {totalRows ? (
+            <Trans
+              i18nKey="table.pagination.rowswithtotal"
+              values={{ firstRow, lastRow, totalRows }}
+            />
+          ) : (
+            <Trans
+              i18nKey="table.pagination.rowswithouttotal"
+              values={{ firstRow, lastRow }}
+            />
+          )}
+        </Paragraph>
+      </PaginationSegment>
+
+      <PaginationSegment odysseyDesignTokens={odysseyDesignTokens}>
+        {totalRows && (
+          <Box>
+            <Paragraph component="span" color="textSecondary">
+              {t("table.pagination.page")}
+            </Paragraph>
+            <PaginationInput
+              odysseyDesignTokens={odysseyDesignTokens}
+              type="number"
+              value={page}
+              onChange={setPageFromEvent}
+              onBlur={handlePaginationChange}
+              onKeyDown={handlePageSubmit}
+              disabled={isDisabled}
+              inputProps={{
+                "aria-label": t("table.pagination.page"),
+              }}
+            />
+          </Box>
+        )}
+        <PaginationButtonContainer>
+          <Button
+            startIcon={<ArrowLeftIcon />}
+            variant="floating"
+            size="small"
+            ariaLabel={t("table.pagination.previous")}
+            onClick={handlePreviousButton}
+            isDisabled={previousButtonDisabled}
+          />
+          <Button
+            endIcon={<ArrowRightIcon />}
+            variant="floating"
+            size="small"
+            ariaLabel={t("table.pagination.next")}
+            onClick={handleNextButton}
+            isDisabled={nextButtonDisabled}
+          />
+        </PaginationButtonContainer>
+      </PaginationSegment>
+    </PaginationContainer>
+  ) : (
+    <Button
+      variant="secondary"
+      label={t("table.pagination.loadmore")}
+      onClick={handleLoadMore}
+      isDisabled={loadMoreIsDisabled}
+    />
+  );
+};
+
+const MemoizedDataTablePagination = memo(DataTablePagination);
+export { MemoizedDataTablePagination as DataTablePagination };

package/src/DataTable/DataTableRowActions.tsx

@@ -0,0 +1,122 @@
+/*!
+ * 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 { MRT_Row, MRT_RowData } from "material-react-table";
+import { Fragment, ReactElement, memo, useCallback } from "react";
+import { Button } from "../Button";
+import { MenuItem } from "../MenuItem";
+import { Box as MuiBox } from "@mui/material";
+import { MenuButton, MenuButtonProps } from "../MenuButton";
+import {
+  ArrowBottomIcon,
+  ArrowDownIcon,
+  ArrowTopIcon,
+  ArrowUpIcon,
+  MoreIcon,
+} from "../icons.generated";
+import { DataTableProps } from "./DataTable";
+import { Trans, useTranslation } from "react-i18next";
+
+export type DataTableRowActionsProps = {
+  row: MRT_Row<MRT_RowData>;
+  rowIndex: number;
+  rowActionButtons?: (
+    row: MRT_RowData,
+  ) => ReactElement<typeof Button | typeof Fragment>;
+  rowActionMenuItems?: (row: MRT_RowData) => MenuButtonProps["children"];
+  totalRows?: DataTableProps["totalRows"];
+  updateRowOrder?: ({
+    rowId,
+    newRowIndex,
+  }: {
+    rowId: string;
+    newRowIndex: number;
+  }) => void;
+};
+
+const DataTableRowActions = ({
+  row,
+  rowIndex,
+  rowActionButtons,
+  rowActionMenuItems,
+  totalRows,
+  updateRowOrder,
+}: DataTableRowActionsProps) => {
+  const { t } = useTranslation();
+
+  const handleToFrontClick = useCallback(() => {
+    updateRowOrder && updateRowOrder({ rowId: row.id, newRowIndex: 0 });
+  }, [row.id, updateRowOrder]);
+
+  const handleForwardClick = useCallback(() => {
+    updateRowOrder &&
+      updateRowOrder({ rowId: row.id, newRowIndex: Math.max(0, rowIndex - 1) });
+  }, [row.id, rowIndex, updateRowOrder]);
+
+  const handleBackwardClick = useCallback(() => {
+    updateRowOrder &&
+      updateRowOrder({ rowId: row.id, newRowIndex: rowIndex + 1 });
+  }, [row.id, rowIndex, updateRowOrder]);
+
+  const handleToBackClick = useCallback(() => {
+    updateRowOrder &&
+      updateRowOrder({
+        rowId: row.id,
+        newRowIndex: totalRows ? totalRows - 1 : rowIndex,
+      });
+  }, [row.id, rowIndex, totalRows, updateRowOrder]);
+
+  return (
+    <MuiBox display="flex">
+      {rowActionButtons?.(row)}
+      {(rowActionMenuItems || updateRowOrder) && (
+        <MenuButton
+          endIcon={<MoreIcon />}
+          size="small"
+          buttonVariant="floating"
+          ariaLabel={t("table.moreactions.arialabel")}
+          menuAlignment="right"
+        >
+          {rowActionMenuItems && <>{rowActionMenuItems(row)}</>}
+          {rowActionMenuItems && updateRowOrder && <hr />}
+          {updateRowOrder && (
+            <>
+              <MenuItem isDisabled={rowIndex <= 0} onClick={handleToFrontClick}>
+                <ArrowTopIcon /> <Trans i18nKey="table.reorder.tofront" />
+              </MenuItem>
+              <MenuItem isDisabled={rowIndex <= 0} onClick={handleForwardClick}>
+                <ArrowUpIcon /> <Trans i18nKey="table.reorder.forward" />
+              </MenuItem>
+              <MenuItem
+                isDisabled={totalRows ? rowIndex >= totalRows - 1 : false}
+                onClick={handleBackwardClick}
+              >
+                <ArrowDownIcon /> <Trans i18nKey="table.reorder.backward" />
+              </MenuItem>
+              {totalRows && (
+                <MenuItem
+                  isDisabled={rowIndex >= totalRows - 1}
+                  onClick={handleToBackClick}
+                >
+                  <ArrowBottomIcon /> <Trans i18nKey="table.reorder.toback" />
+                </MenuItem>
+              )}
+            </>
+          )}
+        </MenuButton>
+      )}
+    </MuiBox>
+  );
+};
+
+const MemoizedDataTableRowActions = memo(DataTableRowActions);
+export { MemoizedDataTableRowActions as DataTableRowActions };

package/src/DataTable/DataTableSettings.tsx

@@ -0,0 +1,135 @@
+/*!
+ * 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 { Dispatch, SetStateAction, memo, useCallback, useMemo } from "react";
+import { Checkbox as MuiCheckbox } from "@mui/material";
+import { MenuButton } from "../MenuButton";
+import { MenuItem } from "../MenuItem";
+import { ListIcon, ShowIcon } from "../icons.generated";
+import { densityValues } from "./constants";
+import { DataTableProps } from "./DataTable";
+import { MRT_VisibilityState } from "material-react-table";
+import { useTranslation } from "react-i18next";
+
+export type DataTableSettingsProps = {
+  hasChangeableDensity: DataTableProps["hasChangeableDensity"];
+  rowDensity: (typeof densityValues)[number];
+  setRowDensity: Dispatch<SetStateAction<(typeof densityValues)[number]>>;
+  hasColumnVisibility: DataTableProps["hasColumnVisibility"];
+  columns: DataTableProps["columns"];
+  columnVisibility?: MRT_VisibilityState;
+  setColumnVisibility: Dispatch<
+    SetStateAction<MRT_VisibilityState | undefined>
+  >;
+};
+
+const DataTableSettings = ({
+  hasChangeableDensity,
+  rowDensity,
+  setRowDensity,
+  hasColumnVisibility,
+  columns,
+  columnVisibility,
+  setColumnVisibility,
+}: DataTableSettingsProps) => {
+  const { t } = useTranslation();
+
+  const changeRowDensity = useCallback(
+    (value: (typeof densityValues)[number]) =>
+      (_event: React.MouseEvent<HTMLLIElement>) => {
+        // This is necessary to avoid linter errors, while the _event is necessary to satisfy the onClick type
+        if (process.env.NODE_ENV === "development") console.debug(_event);
+
+        setRowDensity(value);
+      },
+    [setRowDensity],
+  );
+
+  const changeColumnVisibility = useCallback(
+    (columnId: string) => (_event: React.MouseEvent<HTMLLIElement>) => {
+      // This is necessary to avoid linter errors, while the _event is necessary to satisfy the onClick type
+      if (process.env.NODE_ENV === "development") console.debug(_event);
+
+      setColumnVisibility((prevVisibility) => ({
+        ...prevVisibility,
+        [columnId]: prevVisibility ? prevVisibility[columnId] === false : false,
+      }));
+    },
+    [setColumnVisibility],
+  );
+
+  const isColumnVisibilityChecked = useMemo(() => {
+    return columns.reduce(
+      (acc, column) => {
+        const isChecked = columnVisibility
+          ? columnVisibility[column.accessorKey!] !== false
+          : true;
+        acc[column.accessorKey!] = isChecked;
+        return acc;
+      },
+      {} as Record<string, boolean>,
+    );
+  }, [columns, columnVisibility]);
+
+  return (
+    <>
+      {hasChangeableDensity && (
+        <MenuButton
+          endIcon={<ListIcon />}
+          ariaLabel={t("table.density.arialabel")}
+          menuAlignment="right"
+          shouldCloseOnSelect={false}
+        >
+          <>
+            {densityValues.map((value: (typeof densityValues)[number]) => (
+              <MenuItem
+                key={value}
+                isSelected={rowDensity === value}
+                onClick={changeRowDensity(value)}
+              >
+                {`${value.charAt(0).toUpperCase()}${value.slice(1)}`}
+              </MenuItem>
+            ))}
+          </>
+        </MenuButton>
+      )}
+
+      {hasColumnVisibility && (
+        <MenuButton
+          endIcon={<ShowIcon />}
+          ariaLabel={t("table.columnvisibility.arialabel")}
+          menuAlignment="right"
+          shouldCloseOnSelect={false}
+        >
+          <>
+            {columns
+              .filter((column) => column.enableHiding !== false)
+              .map((column) => (
+                <MenuItem
+                  key={column.accessorKey}
+                  onClick={changeColumnVisibility(column.id as string)}
+                >
+                  <MuiCheckbox
+                    checked={isColumnVisibilityChecked[column.accessorKey!]}
+                  />
+                  {column.header}
+                </MenuItem>
+              ))}
+          </>
+        </MenuButton>
+      )}
+    </>
+  );
+};
+
+const MemoizedDataTableSettings = memo(DataTableSettings);
+export { MemoizedDataTableSettings as DataTableSettings };

package/src/DataTable/constants.ts

@@ -0,0 +1,14 @@
+/*!
+ * 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.
+ */
+
+export const densityValues = ["comfortable", "spacious", "compact"] as const;
+export const paginationTypeValues = ["paged", "loadMore"] as const;

package/src/DataTable/index.tsx

@@ -0,0 +1,28 @@
+/*!
+ * 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.
+ */
+
+export {
+  DataTable,
+  type DataTableProps,
+  type DataTableGetDataType,
+  type DataTableOnReorderRowsType,
+} from "./DataTable";
+export { DataTableEmptyState } from "./DataTableEmptyState";
+export { densityValues } from "./constants";
+export type {
+  MRT_ColumnFiltersState as DataTableFiltersState,
+  MRT_SortingState as DataTableSortingState,
+  MRT_RowSelectionState as DataTableRowSelectionState,
+  MRT_ColumnDef as DataTableColumn,
+  MRT_RowData as DataTableRowData,
+  MRT_Row as DataTableRow,
+} from "material-react-table";