@okta/odyssey-react-mui 1.32.0 → 1.33.0

package/src/labs/DataTablePagination.tsx

@@ -1,88 +0,0 @@
-/*!
- * 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 { memo } from "react";
-import { Box } from "../Box.js";
-import { Button } from "../Buttons/index.js";
-import { Support } from "../Typography.js";
-import { ArrowLeftIcon, ArrowRightIcon } from "../icons.generated/index.js";
-
-export const paginationTypeValues = ["paged", "loadMore"] as const;
-
-export type DataTablePaginationProps = {
-  currentPage?: number;
-  currentNumberOfResults?: number;
-  isNextButtonDisabled?: boolean;
-  isPreviousButtonDisabled?: boolean;
-  onClickNext: () => void;
-  onClickPrevious?: () => void;
-  paginationType?: (typeof paginationTypeValues)[number];
-};
-
-const DataTablePagination = ({
-  currentPage,
-  currentNumberOfResults,
-  isNextButtonDisabled,
-  isPreviousButtonDisabled,
-  onClickNext,
-  onClickPrevious,
-  paginationType,
-}: DataTablePaginationProps) => {
-  return (
-    <Box sx={{ display: "flex", gap: 4, alignItems: "center" }}>
-      {paginationType === "loadMore" ? (
-        <>
-          <Button
-            label="Show more"
-            variant="secondary"
-            onClick={onClickNext}
-            isDisabled={isNextButtonDisabled}
-          />
-          {currentNumberOfResults && (
-            <Support color="textSecondary">
-              {currentNumberOfResults} results
-            </Support>
-          )}
-        </>
-      ) : (
-        <>
-          <Button
-            label="Previous"
-            startIcon={<ArrowLeftIcon />}
-            variant="secondary"
-            onClick={onClickPrevious}
-            isDisabled={isPreviousButtonDisabled}
-          />
-          {currentPage && (
-            <Box>
-              <Support color="textSecondary" component="span">
-                Page {currentPage}
-              </Support>
-            </Box>
-          )}
-          <Button
-            label="Next"
-            endIcon={<ArrowRightIcon />}
-            variant="secondary"
-            onClick={onClickNext}
-            isDisabled={isNextButtonDisabled}
-          />
-        </>
-      )}
-    </Box>
-  );
-};
-
-const MemoizedDataTablePagination = memo(DataTablePagination);
-MemoizedDataTablePagination.displayName = "DataTablePagination";
-
-export { MemoizedDataTablePagination as DataTablePagination };

package/src/labs/DataView/BulkActionsMenu.tsx

@@ -1,98 +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 { memo, useCallback, Dispatch, SetStateAction } from "react";
-import { MRT_RowData, MRT_RowSelectionState } from "material-react-table";
-import styled from "@emotion/styled";
-import { useTranslation } from "react-i18next";
-
-import { Box } from "../../Box.js";
-import { Button, MenuButton } from "../../Buttons/index.js";
-import { ChevronDownIcon } from "../../icons.generated/index.js";
-import { UniversalProps } from "./componentTypes.js";
-import {
-  DesignTokens,
-  useOdysseyDesignTokens,
-} from "../../OdysseyDesignTokensContext.js";
-
-export type BulkActionsMenuProps<TData extends MRT_RowData> = {
-  data: MRT_RowData[];
-  menuItems: UniversalProps<TData>["bulkActionMenuItems"];
-  rowSelection: MRT_RowSelectionState;
-  setRowSelection: Dispatch<SetStateAction<MRT_RowSelectionState>>;
-};
-
-const BulkActionsContainer = styled("div", {
-  shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
-})<{
-  odysseyDesignTokens: DesignTokens;
-}>(({ odysseyDesignTokens }) => ({
-  display: "flex",
-  gap: odysseyDesignTokens.Spacing2,
-}));
-
-const BulkActionsMenu = <TData extends MRT_RowData>({
-  data,
-  menuItems,
-  rowSelection,
-  setRowSelection,
-}: BulkActionsMenuProps<TData>) => {
-  const odysseyDesignTokens = useOdysseyDesignTokens();
-  const { t } = useTranslation();
-
-  const selectedRowCount = Object.values(rowSelection).filter(Boolean).length;
-
-  const handleSelectAll = useCallback(() => {
-    const rows = Object.fromEntries(
-      data.map((row) => [row.id as string, true]),
-    );
-    setRowSelection(rows);
-  }, [data, setRowSelection]);
-
-  const handleSelectNone = useCallback(() => {
-    setRowSelection({});
-  }, [setRowSelection]);
-
-  return (
-    <BulkActionsContainer odysseyDesignTokens={odysseyDesignTokens}>
-      {selectedRowCount > 0 && (
-        <MenuButton
-          ariaLabel="More actions"
-          buttonLabel={t("table.actions.selectsome", { selectedRowCount })}
-          buttonVariant="primary"
-          endIcon={<ChevronDownIcon />}
-        >
-          {menuItems?.(rowSelection)}
-        </MenuButton>
-      )}
-      <Box>
-        <Button
-          isDisabled={selectedRowCount === data.length} // Disabled if all are selected
-          label={t("table.actions.selectall")}
-          onClick={handleSelectAll}
-          variant="secondary"
-        />
-        <Button
-          isDisabled={selectedRowCount === 0} // Disabled if none are selected
-          label={t("table.actions.selectnone")}
-          onClick={handleSelectNone}
-          variant="secondary"
-        />
-      </Box>
-    </BulkActionsContainer>
-  );
-};
-
-const MemoizedBulkActionsMenu = memo(BulkActionsMenu);
-MemoizedBulkActionsMenu.displayName = "BulkActionsMenu";
-
-export { MemoizedBulkActionsMenu as BulkActionsMenu };

package/src/labs/DataView/CardLayoutContent.tsx

@@ -1,272 +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 { Dispatch, ReactNode, SetStateAction, memo, useCallback } from "react";
-import styled, { CSSObject } from "@emotion/styled";
-import {
-  MRT_Row,
-  MRT_RowData,
-  MRT_RowSelectionState,
-  MRT_TableInstance,
-} from "material-react-table";
-
-import { Box } from "../../Box.js";
-import { Checkbox as MuiCheckbox } from "@mui/material";
-import { CircularProgress } from "../../CircularProgress.js";
-import {
-  DesignTokens,
-  useOdysseyDesignTokens,
-} from "../../OdysseyDesignTokensContext.js";
-import { RowActions } from "./RowActions.js";
-import { DataCard } from "./DataCard.js";
-import {
-  CardLayout,
-  CardLayoutProps,
-  UniversalProps,
-} from "./componentTypes.js";
-
-export type CardLayoutContentProps<TData extends MRT_RowData> = {
-  currentLayout: CardLayout;
-  data: TData[];
-  draggingRow?: MRT_Row<TData> | null;
-  emptyState: ReactNode;
-  getRowId: UniversalProps<TData>["getRowId"];
-  hasRowReordering: UniversalProps<TData>["hasRowReordering"];
-  hasRowSelection: UniversalProps<TData>["hasRowSelection"];
-  isEmpty?: boolean;
-  isLoading: boolean;
-  isNoResults?: boolean;
-  isRowReorderingDisabled?: boolean;
-  onReorderRows: UniversalProps<TData>["onReorderRows"];
-  pagination: { pageIndex: number; pageSize: number };
-  rowReorderingUtilities: {
-    dragHandleStyles: CSSObject;
-    dragHandleText: {
-      title: string;
-      "aria-label": string;
-    };
-    draggableTableBodyRowClassName: ({
-      currentRowId,
-      draggingRowId,
-      hoveredRowId,
-    }: {
-      currentRowId: string;
-      draggingRowId?: string;
-      hoveredRowId?: string;
-    }) => string | undefined;
-    handleDragHandleKeyDown: ({
-      table,
-      row,
-      event,
-    }: {
-      table: MRT_TableInstance<TData>;
-      row: MRT_Row<TData>;
-      event: React.KeyboardEvent<HTMLButtonElement>;
-    }) => void;
-    handleDragHandleOnDragCapture: (table: MRT_TableInstance<TData>) => void;
-    handleDragHandleOnDragEnd: (table: MRT_TableInstance<TData>) => void;
-    resetDraggingAndHoveredRow: (table: MRT_TableInstance<TData>) => void;
-    updateRowOrder: ({
-      rowId,
-      newRowIndex,
-    }: {
-      rowId: string;
-      newRowIndex: number;
-    }) => void;
-  };
-  rowSelection: MRT_RowSelectionState;
-  setRowSelection: Dispatch<SetStateAction<MRT_RowSelectionState>>;
-  cardLayoutOptions: CardLayoutProps<TData>;
-  totalRows: UniversalProps<TData>["totalRows"];
-};
-type CardLayoutContentComponent = (<TData extends MRT_RowData>(
-  props: CardLayoutContentProps<TData>,
-) => JSX.Element) & {
-  displayName?: string;
-};
-
-const StackContainer = styled("div", {
-  shouldForwardProp: (prop) =>
-    prop !== "odysseyDesignTokens" &&
-    prop !== "currentLayout" &&
-    prop !== "maxGridColumns",
-})<{
-  odysseyDesignTokens: DesignTokens;
-  currentLayout: CardLayout;
-  maxGridColumns: number;
-}>(({ odysseyDesignTokens, currentLayout, maxGridColumns }) => ({
-  display: currentLayout === "list" ? "flex" : "grid",
-  flexDirection: "column",
-  columnGap: odysseyDesignTokens.Spacing5,
-
-  ...(currentLayout === "grid" && {
-    [`@media (max-width: 720px)`]: {
-      gridTemplateColumns: "repeat(1, 1fr)",
-    },
-    [`@media (min-width: 720px) and (max-width: 960px)`]: {
-      gridTemplateColumns: "repeat(2, 1fr)",
-    },
-    [`@media (min-width: 960px)`]: {
-      gridTemplateColumns: `repeat(${maxGridColumns}, 1fr)`,
-    },
-  }),
-}));
-
-const LoadingContainer = styled("div", {
-  shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
-})<{
-  odysseyDesignTokens: DesignTokens;
-}>(({ odysseyDesignTokens }) => ({
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  width: "100%",
-  paddingBlock: odysseyDesignTokens.Spacing5,
-}));
-
-const CheckboxContainer = styled("div", {
-  shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
-})<{
-  odysseyDesignTokens: DesignTokens;
-}>(({ odysseyDesignTokens }) => ({
-  marginBlockStart: `-${odysseyDesignTokens.Spacing1}`,
-}));
-
-const CardLayoutContent = <TData extends MRT_RowData>({
-  currentLayout,
-  data,
-  emptyState,
-  hasRowReordering,
-  hasRowSelection,
-  isEmpty,
-  isLoading,
-  isNoResults,
-  isRowReorderingDisabled,
-  onReorderRows,
-  pagination,
-  rowReorderingUtilities,
-  rowSelection,
-  setRowSelection,
-  cardLayoutOptions,
-  totalRows,
-}: CardLayoutContentProps<TData>) => {
-  const odysseyDesignTokens = useOdysseyDesignTokens();
-
-  const handleRowSelectionChange = useCallback(
-    (row: MRT_RowData) => {
-      setRowSelection((rowSelection) =>
-        Object.fromEntries(
-          row.id in rowSelection
-            ? Object.entries(rowSelection).filter(([key]) => key !== row.id)
-            : Object.entries(rowSelection).concat([[row.id, true]]),
-        ),
-      );
-    },
-    [setRowSelection],
-  );
-
-  const { updateRowOrder } = rowReorderingUtilities;
-
-  return (
-    <Box>
-      {isLoading ? (
-        <LoadingContainer odysseyDesignTokens={odysseyDesignTokens}>
-          <CircularProgress />
-        </LoadingContainer>
-      ) : (
-        <>
-          {!data || data.length === 0 || isEmpty || isNoResults ? (
-            <Box>{emptyState}</Box>
-          ) : (
-            <StackContainer
-              odysseyDesignTokens={odysseyDesignTokens}
-              currentLayout={currentLayout}
-              maxGridColumns={cardLayoutOptions.maxGridColumns ?? 3}
-              role="list"
-            >
-              {data.map((row, index) => {
-                const {
-                  overline,
-                  title,
-                  description,
-                  image,
-                  children,
-                  variant,
-                  button,
-                } = cardLayoutOptions.itemProps(row);
-                const currentIndex =
-                  index + (pagination.pageIndex - 1) * pagination.pageSize;
-
-                return (
-                  <DataCard
-                    Accessory={
-                      hasRowSelection && (
-                        // Negative margin to counteract the checkbox's inbuilt spacing
-                        <CheckboxContainer
-                          odysseyDesignTokens={odysseyDesignTokens}
-                        >
-                          <MuiCheckbox
-                            checked={rowSelection[row.id as string] ?? false}
-                            onChange={() => handleRowSelectionChange(row)}
-                          />
-                        </CheckboxContainer>
-                      )
-                    }
-                    button={button}
-                    children={children}
-                    description={description}
-                    renderDetailPanel={cardLayoutOptions.renderDetailPanel}
-                    row={row}
-                    image={image}
-                    key={row.id as string}
-                    menuButtonChildren={
-                      (cardLayoutOptions.rowActionMenuItems ||
-                        hasRowReordering) && (
-                        <RowActions
-                          row={row as unknown as MRT_Row<MRT_RowData>} // TODO: FIX THIS! The types are wrong. `row` is incorrectly set in `RowActions` to not be TData.
-                          rowIndex={currentIndex}
-                          rowActionMenuItems={
-                            // TODO: FIX THIS! The types are wrong. `row` is incorrectly set in `RowActions` to not be TData.
-                            cardLayoutOptions.rowActionMenuItems as unknown as (
-                              row: MRT_Row<MRT_RowData>,
-                            ) => any // eslint-disable-line @typescript-eslint/no-explicit-any
-                          }
-                          isRowReorderingDisabled={isRowReorderingDisabled}
-                          totalRows={totalRows}
-                          updateRowOrder={
-                            hasRowReordering && onReorderRows
-                              ? updateRowOrder
-                              : undefined
-                          }
-                        />
-                      )
-                    }
-                    overline={overline}
-                    title={title}
-                    variant={variant}
-                  />
-                );
-              })}
-            </StackContainer>
-          )}
-        </>
-      )}
-    </Box>
-  );
-};
-
-const MemoizedCardLayoutContent = memo(
-  CardLayoutContent,
-) as CardLayoutContentComponent;
-MemoizedCardLayoutContent.displayName = "CardLayoutContent";
-
-export { MemoizedCardLayoutContent as CardLayoutContent };