@okta/odyssey-react-mui 1.14.4 → 1.14.6

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

@@ -11,7 +11,7 @@
  */
 
 import { MRT_Row, MRT_RowData } from "material-react-table";
-import { Fragment, ReactElement, memo } from "react";
+import { Fragment, ReactElement, memo, useCallback } from "react";
 import { Button } from "../Button";
 import { MenuItem } from "../MenuItem";
 import { Box as MuiBox } from "@mui/material";
@@ -52,6 +52,29 @@ const DataTableRowActions = ({
   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)}
@@ -67,51 +90,26 @@ const DataTableRowActions = ({
           {rowActionMenuItems && updateRowOrder && <hr />}
           {updateRowOrder && (
             <>
-              <MenuItem
-                isDisabled={rowIndex <= 0}
-                onClick={() =>
-                  updateRowOrder({ rowId: row.id, newRowIndex: 0 })
-                }
-              >
+              <MenuItem isDisabled={rowIndex <= 0} onClick={handleToFrontClick}>
                 <ArrowTopIcon /> <Trans i18nKey="table.reorder.tofront" />
               </MenuItem>
-              <MenuItem
-                isDisabled={rowIndex <= 0}
-                onClick={() =>
-                  updateRowOrder({
-                    rowId: row.id,
-                    newRowIndex: rowIndex <= 0 ? 0 : rowIndex - 1,
-                  })
-                }
-              >
+              <MenuItem isDisabled={rowIndex <= 0} onClick={handleForwardClick}>
                 <ArrowUpIcon /> <Trans i18nKey="table.reorder.forward" />
               </MenuItem>
               <MenuItem
                 isDisabled={totalRows ? rowIndex >= totalRows - 1 : false}
-                onClick={() =>
-                  updateRowOrder({
-                    rowId: row.id,
-                    newRowIndex: rowIndex + 1,
-                  })
-                }
+                onClick={handleBackwardClick}
               >
                 <ArrowDownIcon /> <Trans i18nKey="table.reorder.backward" />
               </MenuItem>
-              <>
-                {totalRows && (
-                  <MenuItem
-                    isDisabled={rowIndex >= totalRows - 1}
-                    onClick={() =>
-                      updateRowOrder({
-                        rowId: row.id,
-                        newRowIndex: totalRows,
-                      })
-                    }
-                  >
-                    <ArrowBottomIcon /> <Trans i18nKey="table.reorder.toback" />
-                  </MenuItem>
-                )}
-              </>
+              {totalRows && (
+                <MenuItem
+                  isDisabled={rowIndex >= totalRows - 1}
+                  onClick={handleToBackClick}
+                >
+                  <ArrowBottomIcon /> <Trans i18nKey="table.reorder.toback" />
+                </MenuItem>
+              )}
             </>
           )}
         </MenuButton>

package/src/DataTable/DataTableSettings.tsx

@@ -10,7 +10,7 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { Dispatch, SetStateAction, memo } from "react";
+import { Dispatch, SetStateAction, memo, useCallback, useMemo } from "react";
 import { Checkbox as MuiCheckbox } from "@mui/material";
 import { MenuButton } from "../MenuButton";
 import { MenuItem } from "../MenuItem";
@@ -42,6 +42,44 @@ const DataTableSettings = ({
   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 && (
@@ -56,7 +94,7 @@ const DataTableSettings = ({
               <MenuItem
                 key={value}
                 isSelected={rowDensity === value}
-                onClick={() => setRowDensity(value)}
+                onClick={changeRowDensity(value)}
               >
                 {`${value.charAt(0).toUpperCase()}${value.slice(1)}`}
               </MenuItem>
@@ -78,23 +116,10 @@ const DataTableSettings = ({
               .map((column) => (
                 <MenuItem
                   key={column.accessorKey}
-                  onClick={() => {
-                    const columnId = column.id as string;
-                    setColumnVisibility((prevVisibility) => ({
-                      ...prevVisibility,
-                      [columnId]: prevVisibility
-                        ? prevVisibility[columnId] === false
-                        : false,
-                    }));
-                  }}
+                  onClick={changeColumnVisibility(column.id as string)}
                 >
                   <MuiCheckbox
-                    checked={
-                      columnVisibility
-                        ? columnVisibility[column.accessorKey as string] !==
-                          false
-                        : true
-                    }
+                    checked={isColumnVisibilityChecked[column.accessorKey!]}
                   />
                   {column.header}
                 </MenuItem>
@@ -105,5 +130,6 @@ const DataTableSettings = ({
     </>
   );
 };
+
 const MemoizedDataTableSettings = memo(DataTableSettings);
 export { MemoizedDataTableSettings as DataTableSettings };

package/src/DataTable/constants.ts

@@ -11,3 +11,4 @@
  */
 
 export const densityValues = ["comfortable", "spacious", "compact"] as const;
+export const paginationTypeValues = ["paged", "loadMore"] as const;

package/src/DataTable/index.tsx

@@ -10,7 +10,13 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-export { DataTable, type DataTableProps } from "./DataTable";
+export {
+  DataTable,
+  type DataTableProps,
+  type DataTableGetDataType,
+  type DataTableOnReorderRowsType,
+} from "./DataTable";
+export { DataTableEmptyState } from "./DataTableEmptyState";
 export { densityValues } from "./constants";
 export type {
   MRT_ColumnFiltersState as DataTableFiltersState,

package/src/DataTable/useRowReordering.tsx

@@ -48,6 +48,8 @@ export const useRowReordering = ({
       return;
     }
 
+    // Needs to include the totalRows check because totalRows might not
+    // be set. If it isn't set, this whole check doesn't matter.
     if (totalRows && newRowIndex > totalRows) {
       return;
     }
@@ -104,7 +106,7 @@ export const useRowReordering = ({
     return undefined;
   };
 
-  const getRowFromTableAndSetHovered = (
+  const setHoveredRow = (
     table: MRT_TableInstance<MRT_RowData>,
     id: MRT_RowData["id"],
   ) => {
@@ -175,12 +177,12 @@ export const useRowReordering = ({
 
         if (isArrowDown || isArrowUp) {
           const nextIndex = isArrowDown ? index + 1 : index - 1;
-          getRowFromTableAndSetHovered(table, data[nextIndex]?.id);
+          setHoveredRow(table, data[nextIndex]?.id);
         }
       } else {
         if (isArrowDown || isArrowUp) {
           const nextIndex = isArrowDown ? row.index + 1 : row.index - 1;
-          getRowFromTableAndSetHovered(table, data[nextIndex]?.id);
+          setHoveredRow(table, data[nextIndex]?.id);
         }
       }
     } else {

package/src/DataTable/useScrollIndication.tsx

@@ -0,0 +1,118 @@
+/*!
+ * 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,
+  useCallback,
+  useEffect,
+  useRef,
+} from "react";
+
+type UseScrollIndicationProps = {
+  tableOuterContainer: HTMLDivElement | null;
+  tableInnerContainer: HTMLDivElement | null;
+  setIsTableContainerScrolledToStart: Dispatch<SetStateAction<boolean>>;
+  setIsTableContainerScrolledToEnd: Dispatch<SetStateAction<boolean>>;
+  setTableInnerContainerWidth: Dispatch<SetStateAction<string>>;
+};
+export const useScrollIndication = ({
+  tableOuterContainer,
+  tableInnerContainer,
+  setIsTableContainerScrolledToStart,
+  setIsTableContainerScrolledToEnd,
+  setTableInnerContainerWidth,
+}: UseScrollIndicationProps) => {
+  const animationFrameIdRef = useRef<number | null>(null);
+
+  const resizeObserverRef = useRef<ResizeObserver | null>(null);
+
+  const checkScrollIndicators = useCallback(() => {
+    if (!tableOuterContainer || !tableInnerContainer) return;
+
+    const containerWidth = tableOuterContainer.clientWidth;
+    const contentWidth = tableInnerContainer.scrollWidth;
+    const containerStartScrollPosition = tableInnerContainer.scrollLeft;
+    const containerEndScrollPosition =
+      containerStartScrollPosition + containerWidth;
+
+    setIsTableContainerScrolledToStart(containerStartScrollPosition <= 16);
+    setIsTableContainerScrolledToEnd(
+      containerEndScrollPosition >= contentWidth - 16,
+    );
+  }, [
+    tableInnerContainer,
+    tableOuterContainer,
+    setIsTableContainerScrolledToEnd,
+    setIsTableContainerScrolledToStart,
+  ]);
+
+  useEffect(() => {
+    if (resizeObserverRef.current) return; // Avoid creating multiple observers
+
+    let debounceTimer: ReturnType<typeof setTimeout>;
+
+    resizeObserverRef.current = new ResizeObserver(() => {
+      clearTimeout(debounceTimer);
+      debounceTimer = setTimeout(() => {
+        if (!animationFrameIdRef.current) {
+          animationFrameIdRef.current = requestAnimationFrame(() => {
+            checkScrollIndicators();
+            animationFrameIdRef.current = null;
+          });
+        }
+
+        setTableInnerContainerWidth(
+          tableInnerContainer?.clientWidth
+            ? `${tableInnerContainer.clientWidth}px`
+            : "100%",
+        );
+      }, 100); // debounce delay
+    });
+
+    if (tableOuterContainer) {
+      resizeObserverRef.current.observe(tableOuterContainer);
+    }
+
+    return () => {
+      if (resizeObserverRef.current) {
+        resizeObserverRef.current.disconnect();
+        resizeObserverRef.current = null;
+      }
+      clearTimeout(debounceTimer); // Ensure timer is cleared on component unmount
+      if (animationFrameIdRef.current) {
+        cancelAnimationFrame(animationFrameIdRef.current);
+        animationFrameIdRef.current = null;
+      }
+    };
+  }, [
+    checkScrollIndicators,
+    setTableInnerContainerWidth,
+    tableOuterContainer,
+    tableInnerContainer,
+    setIsTableContainerScrolledToStart,
+    setIsTableContainerScrolledToEnd,
+  ]);
+
+  useEffect(() => {
+    tableInnerContainer?.addEventListener("scroll", checkScrollIndicators);
+    return () =>
+      tableInnerContainer?.removeEventListener("scroll", checkScrollIndicators);
+  }, [tableInnerContainer, checkScrollIndicators]); // Re-run when innerContainerRef changes
+
+  // Initial check to set state correctly on mount
+  useEffect(() => {
+    checkScrollIndicators();
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+};

package/src/Field.tsx

@@ -29,6 +29,14 @@ import { useUniqueId } from "./useUniqueId";
 
 export const fieldTypeValues = ["single", "group"] as const;
 
+export type RenderFieldComponentProps = {
+  ariaDescribedBy?: string;
+  dataSe?: string;
+  errorMessageElementId?: string;
+  id: string;
+  labelElementId: string;
+};
+
 export type FieldProps = {
   /**
    * If `error` is not undefined, the `input` will indicate an error.
@@ -67,13 +75,7 @@ export type FieldProps = {
     errorMessageElementId,
     id,
     labelElementId,
-  }: {
-    ariaDescribedBy?: string;
-    dataSe?: string;
-    errorMessageElementId?: string;
-    id: string;
-    labelElementId: string;
-  }) => ReactElement;
+  }: RenderFieldComponentProps) => ReactElement;
 };
 
 const Field = ({