@okta/odyssey-react-mui 1.28.1 → 1.32.0

package/src/labs/DataView/dataTypes.ts

@@ -19,7 +19,7 @@ import {
   MRT_SortingState,
 } from "material-react-table";
 
-import { DataFilter } from "../DataFilters";
+import { DataFilter } from "../DataFilters.js";
 
 export type DataQueryParamsType = {
   filters?: DataFilter[];
@@ -29,7 +29,10 @@ export type DataQueryParamsType = {
   sort?: MRT_SortingState;
 };
 
-export type DataTableColumn<T extends MRT_RowData> = MRT_ColumnDef<T> & {
+export type DataTableColumn<
+  TData extends MRT_RowData,
+  TValue = unknown,
+> = MRT_ColumnDef<TData, TValue> & {
   /**
    * @deprecated use hasTextWrapping instead of enableWrapping
    */
@@ -37,21 +40,24 @@ export type DataTableColumn<T extends MRT_RowData> = MRT_ColumnDef<T> & {
   hasTextWrapping?: boolean;
 };
 
-export type DataTableColumnInstance<T extends MRT_RowData> = Omit<
-  MRT_Column<T, unknown>,
+export type DataTableColumnInstance<TData extends MRT_RowData, TValue> = Omit<
+  MRT_Column<TData, TValue>,
   "columnDef"
 > & {
-  columnDef: DataTableColumn<T>;
+  columnDef: DataTableColumn<TData, TValue>;
 };
 
-export type DataTableCell<T extends MRT_RowData> = Omit<
-  MRT_Cell<T>,
+export type DataTableCell<TData extends MRT_RowData, TValue> = Omit<
+  MRT_Cell<TData>,
   "column"
 > & {
-  column: DataTableColumnInstance<T>;
+  column: DataTableColumnInstance<TData, TValue>;
 };
 
-export type DataColumns = DataTableColumn<MRT_RowData>[];
+export type DataColumns<
+  TData extends MRT_RowData,
+  TValue = unknown,
+> = DataTableColumn<TData, TValue>[];
 
 export type DataRow = MRT_RowData;
 

package/src/labs/DataView/fetchData.ts

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

package/src/labs/DataView/index.ts

@@ -0,0 +1,19 @@
+/*!
+ * 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

@@ -13,9 +13,9 @@
 import styled from "@emotion/styled";
 import { MRT_RowData, MRT_TableOptions } from "material-react-table";
 
-import { Box } from "../../Box";
-import { DesignTokens } from "../../OdysseyDesignTokensContext";
-import { DragIndicatorIcon } from "../../icons.generated";
+import { Box } from "../../Box.js";
+import { DesignTokens } from "../../OdysseyDesignTokensContext.js";
+import { DragIndicatorIcon } from "../../icons.generated/index.js";
 
 export const dataTableImmutableSettings = {
   enableColumnActions: false,
@@ -90,54 +90,48 @@ export const ScrollableTableContainer = styled("div", {
     prop !== "odysseyDesignTokens" &&
     prop !== "isScrollableStart" &&
     prop !== "isScrollableEnd",
-})(
-  ({
-    odysseyDesignTokens,
-    isScrollableStart,
-    isScrollableEnd,
-  }: {
-    odysseyDesignTokens: DesignTokens;
-    isScrollableStart: boolean;
-    isScrollableEnd: boolean;
-  }) => ({
-    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}`,
-    },
-  }),
-);
+})<{
+  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}`,
+  },
+}));

package/src/labs/DataView/testSupportData.tsx

@@ -0,0 +1,301 @@
+/*!
+ * 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 { Status } from "../../Status.js";
+import { DataColumns, DataFilter, DataGetDataType } from "../index.js";
+
+export type Person = {
+  order: number;
+  id: string;
+  name: string;
+  city: string;
+  state: string;
+  age: number;
+  risk: "high" | "medium" | "low";
+};
+
+export const columns: DataColumns<Person> = [
+  {
+    accessorKey: "order",
+    header: "ID",
+    enableColumnFilter: false,
+    size: 120,
+  },
+  {
+    accessorKey: "name",
+    header: "Name",
+    enableHiding: false,
+  },
+  {
+    accessorKey: "city",
+    header: "City",
+  },
+  {
+    accessorKey: "state",
+    header: "State",
+  },
+  {
+    accessorKey: "age",
+    header: "Age",
+    size: 80,
+    filterVariant: "range",
+  },
+  {
+    accessorKey: "risk",
+    header: "Risk level",
+    Cell: ({ cell }) => {
+      const value = cell.getValue<string>();
+      const severity =
+        value === "low" ? "success" : value === "medium" ? "warning" : "error";
+      return (
+        <Status
+          label={value.charAt(0).toUpperCase() + value.slice(1)}
+          severity={severity}
+        />
+      );
+    },
+    filterVariant: "multi-select",
+    filterSelectOptions: [
+      {
+        label: "Low",
+        value: "low",
+      },
+      {
+        label: "Medium",
+        value: "medium",
+      },
+      {
+        label: "High",
+        value: "high",
+      },
+    ],
+  },
+];
+
+export const data: Person[] = [
+  {
+    order: 1,
+    id: "1",
+    name: "Luke Skywalker",
+    city: "Mos Eisley",
+    state: "Tatooine",
+    age: 19,
+    risk: "low",
+  },
+  {
+    order: 2,
+    id: "2",
+    name: "Han Solo",
+    city: "Corellia",
+    state: "Corellia",
+    age: 40,
+    risk: "medium",
+  },
+  {
+    order: 3,
+    id: "3",
+    name: "Leia Organa",
+    city: "Alderaan City",
+    state: "Alderaan",
+    age: 19,
+    risk: "low",
+  },
+  {
+    order: 4,
+    id: "4",
+    name: "Chewbacca",
+    city: "Kashyyyk City",
+    state: "Kashyyyk",
+    age: 50,
+    risk: "high",
+  },
+  {
+    order: 5,
+    id: "5",
+    name: "C-3P0",
+    city: "Mos Espa",
+    state: "Tatooine",
+    age: 25,
+    risk: "low",
+  },
+  {
+    order: 6,
+    id: "6",
+    name: "R2-D2",
+    city: "Theed",
+    state: "Naboo",
+    age: 25,
+    risk: "low",
+  },
+];
+
+let result: Person[] = [];
+for (let i = 0; i < 50; i++) {
+  result = result.concat(data);
+}
+export const lotsOfData = result;
+
+export const filterData = ({
+  data,
+  ...args
+}: {
+  data: Person[];
+} & DataGetDataType) => {
+  const { search, filters, sort, page = 1, resultsPerPage = 20 } = args;
+
+  const searchFiltered = search
+    ? data.filter((row) =>
+        Object.values(row).some((value) =>
+          value.toString().toLowerCase().includes(search.toLowerCase()),
+        ),
+      )
+    : data;
+
+  const personKeys: (keyof Person)[] = [
+    "order",
+    "id",
+    "name",
+    "city",
+    "state",
+    "age",
+    "risk",
+  ];
+
+  const isKeyOfPerson = (key: string): key is keyof Person => {
+    return personKeys.includes(key as keyof Person);
+  };
+
+  const handleStartLetterFilter = (
+    row: Person,
+    value: DataFilter["value"],
+  ): boolean => {
+    if (typeof row.name !== "string") return true;
+    const firstLetter = row.name[0]?.toLowerCase();
+    if (value === "vowel") return "aeiou".includes(firstLetter);
+    if (value === "consonant") return !"aeiou".includes(firstLetter);
+    return true;
+  };
+
+  const handleStandardFilter = (
+    row: Person,
+    id: keyof Person,
+    value: DataFilter["value"],
+  ): boolean => {
+    const rowValue = String(row[id]).toLowerCase();
+
+    if (value === null || value === undefined) {
+      return true;
+    }
+
+    if (typeof value === "string" || typeof value === "number") {
+      return rowValue.includes(String(value).toLowerCase());
+    }
+
+    if (Array.isArray(value)) {
+      return value.some((arrayValue) => {
+        const filterValue =
+          typeof arrayValue === "object" ? arrayValue.value : arrayValue;
+        return row[id]
+          ?.toString()
+          .toLowerCase()
+          .includes(filterValue.toString().toLowerCase());
+      });
+    }
+
+    return false;
+  };
+
+  const compareValues = (
+    a: string | number,
+    b: string | number,
+    desc: boolean,
+  ): number => {
+    if (a < b) return desc ? 1 : -1;
+    if (a > b) return desc ? -1 : 1;
+    return 0;
+  };
+
+  // In a real-world scenario, the consumer would provide their own backend
+  // filtering/searching logic. This is a demo of what that could look like
+  // for the provided sample data and demo filters.
+  const columnFiltered = filters
+    ? searchFiltered.filter((row) =>
+        filters.every(({ id, value }: DataFilter) => {
+          // If the filter value is null, return all the data
+          if (value === null || value === undefined) {
+            return true;
+          }
+
+          // Handle custom filters
+          if (id === "startLetter") {
+            return handleStartLetterFilter(row, value);
+          }
+
+          // Handle standard Person properties
+          if (isKeyOfPerson(id)) {
+            return handleStandardFilter(row, id, value);
+          }
+
+          return true;
+        }),
+      )
+    : searchFiltered;
+
+  const sorted =
+    sort && sort.length > 0
+      ? [...columnFiltered].sort((a, b) =>
+          sort.reduce((result, { id, desc }) => {
+            if (result !== 0) return result;
+
+            if (isKeyOfPerson(id)) {
+              const aValue = a[id];
+              const bValue = b[id];
+              return compareValues(aValue, bValue, desc);
+            }
+
+            // Handle custom sort fields if needed
+            return 0;
+          }, 0),
+        )
+      : columnFiltered;
+
+  const startRow = (page - 1) * resultsPerPage;
+  const endRow = startRow + resultsPerPage;
+
+  return sorted.slice(startRow, endRow);
+};
+
+export const reorderData = <Data extends Person>({
+  data,
+  rowId,
+  newRowIndex,
+}: {
+  data: Data[];
+  rowId: string | number;
+  newRowIndex: number;
+}): Data[] => {
+  const rowIndex = data.findIndex((row) => row.id === rowId);
+
+  if (rowIndex === -1) {
+    return data;
+  }
+
+  const [removedRow] = data.splice(rowIndex, 1);
+
+  const reorderedData = [
+    ...data.slice(0, newRowIndex),
+    removedRow,
+    ...data.slice(newRowIndex),
+  ];
+
+  return reorderedData;
+};

package/src/labs/DataView/useFilterConversion.ts

@@ -13,19 +13,19 @@
 import { useCallback, useMemo } from "react";
 import { MRT_RowData } from "material-react-table";
 
-import { DataFilter } from "../DataFilters";
-import { DataTableColumn } from "../../DataTable";
-import { UniversalProps, TableLayoutProps } from "./componentTypes";
+import { DataFilter } from "../DataFilters.js";
+import { DataTableColumn } from "../../DataTable/index.js";
+import { UniversalProps, TableLayoutProps } from "./componentTypes.js";
 
-type FilterConversionType = {
-  columns?: TableLayoutProps["columns"];
-  filters?: UniversalProps["filters"];
+type FilterConversionType<TData extends MRT_RowData> = {
+  columns?: TableLayoutProps<TData>["columns"];
+  filters?: UniversalProps<TData>["filters"];
 };
 
-export const useFilterConversion = ({
+export const useFilterConversion = <TData extends MRT_RowData>({
   columns,
   filters,
-}: FilterConversionType) => {
+}: FilterConversionType<TData>) => {
   const convertFilterSelectOptions = useCallback(
     (options: DataTableColumn<MRT_RowData>["filterSelectOptions"]) =>
       options?.map((option) =>
@@ -37,22 +37,22 @@ export const useFilterConversion = ({
           : {
               // If the option isn't a string, it must have value and/or option defined
               // If either is undefined, use the other
-              label: option.label ?? option.value,
-              value: option.value ?? option.label,
+              label: (option.label ?? option.value) as string,
+              value: (option.value ?? option.label) as string,
             },
       ),
     [],
   );
 
   const convertColumnToFilter = useCallback(
-    (column: DataTableColumn<MRT_RowData>) =>
+    (column: DataTableColumn<TData>) =>
       column.enableColumnFilter !== false && column.accessorKey
-        ? ({
+        ? {
             id: column.accessorKey,
             label: column.header,
             variant: column.filterVariant,
             options: convertFilterSelectOptions(column.filterSelectOptions),
-          } satisfies DataFilter as DataFilter)
+          }
         : null,
     [convertFilterSelectOptions],
   );