@okta/odyssey-react-mui 1.32.0 → 1.33.0

package/src/labs/DataView/TableSettings.tsx

@@ -1,144 +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 { Dispatch, SetStateAction, memo, useCallback, useMemo } from "react";
-import { Checkbox as MuiCheckbox } from "@mui/material";
-import { MRT_DensityState, MRT_RowData } from "material-react-table";
-import { useTranslation } from "react-i18next";
-
-import { densityValues } from "./constants.js";
-import { ListIcon, ShowIcon } from "../../icons.generated/index.js";
-import { MenuButton, MenuItem } from "../../Buttons/index.js";
-import { TableLayoutProps, TableState } from "./componentTypes.js";
-
-export type TableSettingsProps<TData extends MRT_RowData> = {
-  setTableState: Dispatch<SetStateAction<TableState>>;
-  tableLayoutOptions: TableLayoutProps<TData>;
-  tableState: TableState;
-};
-
-type TableSettingsComponent = (<TData extends MRT_RowData>(
-  props: TableSettingsProps<TData>,
-) => JSX.Element) & {
-  displayName?: string;
-};
-
-const TableSettings: TableSettingsComponent = <TData extends MRT_RowData>({
-  setTableState,
-  tableLayoutOptions,
-  tableState,
-}: TableSettingsProps<TData>) => {
-  const { t } = useTranslation();
-
-  const { hasChangeableDensity, hasColumnVisibility, columns } =
-    tableLayoutOptions;
-  const { rowDensity, columnVisibility } = tableState;
-
-  const changeRowDensity = useCallback<(value: MRT_DensityState) => void>(
-    (value) => {
-      setTableState((prevState) => ({
-        ...prevState,
-        rowDensity: value,
-      }));
-    },
-    [setTableState],
-  );
-
-  const changeColumnVisibility = useCallback<(columnId: string) => void>(
-    (columnId) => {
-      setTableState((prevState) => ({
-        ...prevState,
-        columnVisibility: {
-          ...prevState.columnVisibility,
-          [columnId]: prevState.columnVisibility
-            ? prevState.columnVisibility[columnId] === false
-            : false,
-        },
-      }));
-    },
-    [setTableState],
-  );
-
-  const visibleColumns = useMemo(
-    () =>
-      new Set(
-        columns
-          .filter((column) =>
-            columnVisibility
-              ? columnVisibility[column.accessorKey!] !== false
-              : true,
-          )
-          .map((column) => column.accessorKey!),
-      ),
-    [columns, columnVisibility],
-  );
-
-  const memoizedDensityMenu = useMemo(
-    () =>
-      hasChangeableDensity && (
-        <MenuButton
-          ariaLabel={t("table.density.arialabel")}
-          endIcon={<ListIcon />}
-          menuAlignment="right"
-          shouldCloseOnSelect={false}
-        >
-          {densityValues.map((value) => (
-            <MenuItem
-              key={value}
-              isSelected={rowDensity === value}
-              onClick={() => changeRowDensity(value)}
-            >
-              {`${value.charAt(0).toUpperCase()}${value.slice(1)}`}
-            </MenuItem>
-          ))}
-        </MenuButton>
-      ),
-    [hasChangeableDensity, t, rowDensity, changeRowDensity],
-  );
-
-  const memoizedColumnVisibilityMenu = useMemo(
-    () =>
-      hasColumnVisibility && (
-        <MenuButton
-          ariaLabel={t("table.columnvisibility.arialabel")}
-          endIcon={<ShowIcon />}
-          menuAlignment="right"
-          shouldCloseOnSelect={false}
-        >
-          {columns
-            .filter((column) => Boolean(column.enableHiding !== false))
-            .map((column) => (
-              <MenuItem
-                key={column.accessorKey}
-                onClick={() => changeColumnVisibility(column.id!)}
-              >
-                <MuiCheckbox checked={visibleColumns.has(column.id!)} />
-                {column.header}
-              </MenuItem>
-            ))}
-        </MenuButton>
-      ),
-    [hasColumnVisibility, t, columns, changeColumnVisibility, visibleColumns],
-  );
-
-  return (
-    <>
-      {memoizedDensityMenu}
-      {memoizedColumnVisibilityMenu}
-    </>
-  );
-};
-
-const MemoizedTableSettings = memo(TableSettings) as TableSettingsComponent;
-MemoizedTableSettings.displayName = "TableSettings";
-
-export { MemoizedTableSettings as TableSettings };

package/src/labs/DataView/componentTypes.ts

@@ -1,129 +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 {
-  MRT_DensityState,
-  MRT_RowData,
-  MRT_RowSelectionState,
-  MRT_SortingState,
-  MRT_TableOptions,
-  MRT_VisibilityState,
-} from "material-react-table";
-import { ReactNode } from "react";
-
-import { availableLayouts, availableCardLayouts } from "./constants.js";
-import { DataFilter } from "../DataFilters.js";
-import {
-  DataGetDataType,
-  DataOnReorderRowsType,
-  DataRowSelectionState,
-  DataTableColumn,
-} from "./dataTypes.js";
-import { MenuButtonProps } from "../../index.js";
-import { paginationTypeValues } from "../DataTablePagination.js";
-import { DataCardProps } from "./DataCard.js";
-import { type PaginationProps } from "../../Pagination/index.js";
-import { RowActionsProps } from "./RowActions.js";
-
-export type DataLayout = (typeof availableLayouts)[number];
-export type CardLayout = (typeof availableCardLayouts)[number];
-
-export type AvailableLayouts = DataLayout[];
-export type AvailableCardLayouts = CardLayout[];
-
-export type UniversalProps<TData extends MRT_RowData> = {
-  additionalActionButton?: ReactNode;
-  additionalActionMenuItems?: ReactNode;
-  bulkActionMenuItems?: (
-    selectedRows: MRT_RowSelectionState,
-  ) => MenuButtonProps["children"];
-  currentPage?: number;
-  emptyPlaceholder?: ReactNode;
-  enableVirtualization?: boolean;
-  errorMessage?: string;
-  filters?: Array<DataFilter | DataTableColumn<TData> | string>;
-  getData: ({
-    page,
-    resultsPerPage,
-    search,
-    filters,
-    sort,
-  }: DataGetDataType) => TData[] | Promise<TData[]>;
-  getRowId?: MRT_TableOptions<TData>["getRowId"];
-  hasFilters?: boolean;
-  hasPagination?: boolean;
-  hasRowReordering?: boolean;
-  hasRowSelection?: boolean;
-  hasSearch?: boolean;
-  hasSearchSubmitButton?: boolean;
-  isEmpty?: boolean;
-  isLoading?: boolean;
-  isNoResults?: boolean;
-  isPaginationMoreDisabled?: boolean;
-  isRowReorderingDisabled?: boolean;
-  maxPages?: number;
-  maxResultsPerPage?: number;
-  metaText?: string;
-  noResultsPlaceholder?: ReactNode;
-  /**
-   * @deprecated onChangeRowSelection is now onRowSelectionChange
-   */
-  onChangeRowSelection?: (rowSelection: DataRowSelectionState) => void;
-  onPaginationChange?: ({
-    pageIndex,
-    pageSize,
-  }: {
-    pageIndex: number;
-    pageSize: number;
-  }) => void;
-  onReorderRows?: ({ rowId, newRowIndex }: DataOnReorderRowsType) => void;
-  onRowSelectionChange?: (rowSelection: DataRowSelectionState) => void;
-  paginationType?: (typeof paginationTypeValues)[number];
-  resultsPerPage?: number;
-  searchDelayTime?: number;
-  totalRows?: number;
-} & Pick<
-  PaginationProps,
-  "hasPageInput" | "hasRowCountInput" | "hasRowCountLabel"
->;
-
-export type TableLayoutProps<TData extends MRT_RowData> = {
-  columns: DataTableColumn<TData>[];
-  hasChangeableDensity?: boolean;
-  hasColumnResizing?: boolean;
-  hasColumnVisibility?: boolean;
-  hasSorting?: boolean;
-  initialDensity?: MRT_DensityState;
-  renderDetailPanel?: MRT_TableOptions<TData>["renderDetailPanel"];
-  rowActionButtons?: RowActionsProps<TData>["rowActionButtons"];
-  rowActionMenuItems?: RowActionsProps<TData>["rowActionMenuItems"];
-};
-
-export type CardLayoutProps<TData extends MRT_RowData> = {
-  itemProps: (row: TData) => Omit<DataCardProps<TData>, "row">;
-  maxGridColumns?: number;
-  renderDetailPanel?: (props: { row: TData }) => ReactNode;
-  rowActionMenuItems?: RowActionsProps<TData>["rowActionMenuItems"];
-};
-
-export type ViewProps<TData extends MRT_RowData, L extends DataLayout> = {
-  availableLayouts?: L[];
-  initialLayout?: L;
-  cardLayoutOptions?: CardLayoutProps<TData>;
-  tableLayoutOptions?: TableLayoutProps<TData>;
-};
-
-export type TableState = {
-  columnSorting: MRT_SortingState;
-  columnVisibility: MRT_VisibilityState;
-  rowDensity?: MRT_DensityState;
-};

package/src/labs/DataView/constants.tsx

@@ -1,28 +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 { MRT_DensityState } from "material-react-table";
-
-export type DataViewLayout = "list" | "grid" | "table";
-
-export const availableCardLayouts: DataViewLayout[] = ["list", "grid"];
-export const availableTableLayouts: DataViewLayout[] = ["table"];
-export const availableLayouts: DataViewLayout[] = [
-  ...availableTableLayouts,
-  ...availableCardLayouts,
-];
-
-export const densityValues: MRT_DensityState[] = [
-  "comfortable",
-  "spacious",
-  "compact",
-];

package/src/labs/DataView/dataTypes.ts

@@ -1,83 +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 {
-  MRT_Cell,
-  MRT_Column,
-  MRT_ColumnDef,
-  MRT_RowData,
-  MRT_RowSelectionState,
-  MRT_SortingState,
-} from "material-react-table";
-
-import { DataFilter } from "../DataFilters.js";
-
-export type DataQueryParamsType = {
-  filters?: DataFilter[];
-  page?: number;
-  resultsPerPage?: number;
-  search?: string;
-  sort?: MRT_SortingState;
-};
-
-export type DataTableColumn<
-  TData extends MRT_RowData,
-  TValue = unknown,
-> = MRT_ColumnDef<TData, TValue> & {
-  /**
-   * @deprecated use hasTextWrapping instead of enableWrapping
-   */
-  enableWrapping?: boolean;
-  hasTextWrapping?: boolean;
-};
-
-export type DataTableColumnInstance<TData extends MRT_RowData, TValue> = Omit<
-  MRT_Column<TData, TValue>,
-  "columnDef"
-> & {
-  columnDef: DataTableColumn<TData, TValue>;
-};
-
-export type DataTableCell<TData extends MRT_RowData, TValue> = Omit<
-  MRT_Cell<TData>,
-  "column"
-> & {
-  column: DataTableColumnInstance<TData, TValue>;
-};
-
-export type DataColumns<
-  TData extends MRT_RowData,
-  TValue = unknown,
-> = DataTableColumn<TData, TValue>[];
-
-export type DataRow = MRT_RowData;
-
-export type DataGetDataType = {
-  filters?: DataFilter[];
-  page?: number;
-  resultsPerPage?: number;
-  search?: string;
-  sort?: MRT_SortingState;
-};
-
-export type DataOnReorderRowsType = {
-  newRowIndex: number;
-  rowId: string;
-};
-
-export type DataRowSelectionState = MRT_RowSelectionState;
-
-// Provided for backwards compatibilty with old DataTable types
-export type DataTableGetDataType = DataGetDataType;
-export type DataTableOnReorderRowsType = DataOnReorderRowsType;
-export type DataTableRowSelectionState = DataRowSelectionState;
-export type DataTableRow = DataRow;

package/src/labs/DataView/fetchData.ts

@@ -1,49 +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, SetStateAction } from "react";
-import { MRT_RowData } from "material-react-table";
-import { t } from "i18next";
-
-import { DataQueryParamsType } from "./dataTypes.js";
-import { UniversalProps } from "./componentTypes.js";
-
-type DataRequestType<TData extends MRT_RowData> = {
-  dataQueryParams: DataQueryParamsType;
-  errorMessageProp: UniversalProps<TData>["errorMessage"];
-  getData: UniversalProps<TData>["getData"];
-  setData: Dispatch<SetStateAction<TData[]>>;
-  setErrorMessage: Dispatch<
-    SetStateAction<UniversalProps<TData>["errorMessage"]>
-  >;
-  setIsLoading?: Dispatch<SetStateAction<boolean>>;
-};
-
-export const fetchData = async <TData extends MRT_RowData>({
-  dataQueryParams,
-  errorMessageProp,
-  getData,
-  setData,
-  setErrorMessage,
-  setIsLoading,
-}: DataRequestType<TData>) => {
-  setIsLoading?.(true);
-  setErrorMessage(errorMessageProp);
-  try {
-    const incomingData = await getData?.(dataQueryParams);
-    setData(incomingData);
-  } catch (error) {
-    setErrorMessage(typeof error === "string" ? error : t("table.error"));
-  } finally {
-    setIsLoading?.(false);
-  }
-};

package/src/labs/DataView/index.ts

@@ -1,19 +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 { DataTable, type DataTableProps } from "./DataTable.js";
-export { DataView, type DataViewProps } from "./DataView.js";
-export { type DataCardProps } from "./DataCard.js";
-
-export * from "./componentTypes.js";
-export * from "./constants.js";
-export * from "./dataTypes.js";

package/src/labs/DataView/tableConstants.tsx

@@ -1,137 +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 { MRT_RowData, MRT_TableOptions } from "material-react-table";
-
-import { Box } from "../../Box.js";
-import { DesignTokens } from "../../OdysseyDesignTokensContext.js";
-import { DragIndicatorIcon } from "../../icons.generated/index.js";
-
-export const dataTableImmutableSettings = {
-  enableColumnActions: false,
-  enableDensityToggle: false,
-  enableExpandAll: false,
-  enableFilters: false,
-  enableFullScreenToggle: false,
-  enableGlobalFilter: false,
-  enableHiding: false,
-  enablePagination: false,
-  layoutMode: "grid-no-grow" as MRT_TableOptions<MRT_RowData>["layoutMode"],
-  manualFiltering: true,
-  manualSorting: true,
-  muiTablePaperProps: {
-    elevation: 0,
-    sx: {
-      overflow: "visible",
-    },
-  },
-  positionActionsColumn:
-    "last" as MRT_TableOptions<MRT_RowData>["positionActionsColumn"],
-  rowVirtualizerOptions: {
-    overscan: 4,
-  },
-  selectAllMode: "all" as MRT_TableOptions<MRT_RowData>["selectAllMode"],
-};
-
-export const displayColumnDefOptions = {
-  "mrt-row-drag": {
-    header: "",
-    muiTableBodyCellProps: {
-      sx: {
-        minWidth: 0,
-        width: "auto",
-      },
-      className: "ods-drag-handle",
-    },
-    muiTableHeadCellProps: {
-      sx: {
-        minWidth: 0,
-        width: "auto",
-      },
-      children: (
-        // Add a spacer to simulate the width of the drag handle in the column.
-        // Without this, the head cells are offset from their body cell counterparts
-        <Box sx={{ marginInline: "-0.1rem" }}>
-          <DragIndicatorIcon sx={{ marginInline: 1, opacity: 0 }} />
-        </Box>
-      ),
-    },
-  },
-  "mrt-row-select": {
-    muiTableHeadCellProps: {
-      padding: "checkbox" as const,
-    },
-    muiTableBodyCellProps: {
-      padding: "checkbox" as const,
-    },
-  },
-  "mrt-row-expand": {
-    header: "",
-    muiTableBodyCellProps: {
-      sx: {
-        overflow: "visible",
-      },
-    },
-  },
-};
-
-export const ScrollableTableContainer = styled("div", {
-  shouldForwardProp: (prop) =>
-    prop !== "odysseyDesignTokens" &&
-    prop !== "isScrollableStart" &&
-    prop !== "isScrollableEnd",
-})<{
-  odysseyDesignTokens: DesignTokens;
-  isScrollableStart: boolean;
-  isScrollableEnd: boolean;
-}>(({ odysseyDesignTokens, isScrollableStart, isScrollableEnd }) => ({
-  marginBlockEnd: odysseyDesignTokens.Spacing4,
-  position: "relative",
-  borderInlineStartColor: isScrollableStart
-    ? odysseyDesignTokens.HueNeutral200
-    : "transparent",
-  borderInlineStartStyle: "solid",
-  borderInlineStartWidth: odysseyDesignTokens.BorderWidthMain,
-  "::before": {
-    background:
-      "linear-gradient(-90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.33) 50%, rgba(0, 0, 0, 1) 100%)",
-    content: '""',
-    opacity: isScrollableStart ? "0.075" : "0",
-    pointerEvents: "none",
-    position: "absolute",
-    top: 0,
-    left: 0,
-    bottom: 0,
-    width: odysseyDesignTokens.Spacing6,
-    zIndex: 100,
-    transition: `opacity ${odysseyDesignTokens.TransitionDurationMain} ${odysseyDesignTokens.TransitionTimingMain}`,
-  },
-  borderInlineEndColor: isScrollableEnd
-    ? odysseyDesignTokens.HueNeutral200
-    : "transparent",
-  borderInlineEndStyle: "solid",
-  borderInlineEndWidth: odysseyDesignTokens.BorderWidthMain,
-  "::after": {
-    background:
-      "linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.33) 50%, rgba(0, 0, 0, 1) 100%)",
-    content: '""',
-    opacity: isScrollableEnd ? "0.075" : "0",
-    pointerEvents: "none",
-    position: "absolute",
-    top: 0,
-    right: 0,
-    bottom: 0,
-    width: odysseyDesignTokens.Spacing6,
-    transition: `opacity ${odysseyDesignTokens.TransitionDurationMain} ${odysseyDesignTokens.TransitionTimingMain}`,
-  },
-}));