@okta/odyssey-react-mui 1.21.2 → 1.23.0

package/src/labs/{DataComponents → DataView}/DataView.tsx

@@ -35,12 +35,15 @@ import { DataFilters } from "../DataFilters";
 import { EmptyState } from "../../EmptyState";
 import { fetchData } from "./fetchData";
 import { LayoutSwitcher } from "./LayoutSwitcher";
+import { MenuButton } from "../../MenuButton";
+import { MoreIcon } from "../../icons.generated";
 import { TableSettings } from "./TableSettings";
 import { Pagination, usePagination } from "../../Pagination";
-import { TableContent } from "./TableContent";
-import { StackContent } from "./StackContent";
+import { TableLayoutContent } from "./TableLayoutContent";
+import { CardLayoutContent } from "./CardLayoutContent";
 import { useFilterConversion } from "./useFilterConversion";
 import { useRowReordering } from "../../DataTable/useRowReordering";
+import { Typography } from "../../Typography";
 import {
   DesignTokens,
   useOdysseyDesignTokens,
@@ -62,16 +65,36 @@ const BulkActionsContainer = styled("div")(() => ({
   justifyContent: "space-between",
 }));
 
-const AdditionalActionsContainer = styled("div")(() => ({
+const AdditionalActionsContainer = styled("div", {
+  shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
+})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({
   display: "flex",
   justifyContent: "flex-end",
+  gap: odysseyDesignTokens.Spacing2,
+}));
+
+const AdditionalActionsInner = styled("div", {
+  shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
+})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: odysseyDesignTokens.Spacing2,
+}));
+
+const MetaTextContainer = styled("div", {
+  shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
+})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({
+  marginInlineEnd: odysseyDesignTokens.Spacing2,
 }));
 
 const DataView = ({
+  additionalActionButton,
+  additionalActionMenuItems,
   availableLayouts = allAvailableLayouts,
   bulkActionMenuItems,
   currentPage = 1,
   emptyPlaceholder,
+  enableVirtualization: enableVirtualizationProp,
   errorMessage: errorMessageProp,
   filters: filtersProp,
   getData,
@@ -88,17 +111,19 @@ const DataView = ({
   isNoResults: isNoResultsProp,
   isPaginationMoreDisabled,
   isRowReorderingDisabled,
+  metaText,
   noResultsPlaceholder,
   onChangeRowSelection,
   onReorderRows,
   paginationType = "paged",
   resultsPerPage = 20,
   searchDelayTime,
-  stackOptions,
-  tableOptions,
+  cardLayoutOptions,
+  tableLayoutOptions,
   totalRows,
   maxPages,
   maxResultsPerPage,
+  onPaginationChange,
 }: DataViewProps) => {
   const odysseyDesignTokens = useOdysseyDesignTokens();
   const { t } = useTranslation();
@@ -139,14 +164,18 @@ const DataView = ({
   const [tableState, setTableState] = useState<TableState>({
     columnSorting: [],
     columnVisibility: {},
-    rowDensity: tableOptions?.initialDensity ?? densityValues[0],
+    rowDensity: tableLayoutOptions?.initialDensity ?? densityValues[0],
   });
 
-  const shouldShowFilters = hasSearch || hasFilters;
+  const shouldShowFilters =
+    hasSearch ||
+    hasFilters ||
+    additionalActionButton ||
+    additionalActionMenuItems;
 
   const availableFilters = useFilterConversion({
     filters: filters,
-    columns: tableOptions?.columns,
+    columns: tableLayoutOptions?.columns,
   });
 
   useEffect(() => {
@@ -186,9 +215,14 @@ const DataView = ({
   useEffect(() => {
     setPagination((prev) => ({
       pageIndex: 1,
-      pageSize: prev.pageSize,
+      pageSize: paginationType == "loadMore" ? resultsPerPage : prev.pageSize,
     }));
-  }, [filters, search]);
+  }, [filters, paginationType, resultsPerPage, search]);
+
+  // Fire onPaginationChange if pagination changes
+  useEffect(() => {
+    onPaginationChange?.(pagination);
+  }, [onPaginationChange, pagination]);
 
   // Retrieve the data
   useEffect(() => {
@@ -254,27 +288,66 @@ const DataView = ({
     return;
   }, [noResultsPlaceholder, t, isEmpty, isNoResults, emptyPlaceholder]);
 
-  const additionalActions = useMemo(
-    () => (
-      <>
-        {currentLayout === "table" && tableOptions && (
-          <TableSettings
-            setTableState={setTableState}
-            tableOptions={tableOptions}
-            tableState={tableState}
-          />
-        )}
+  const additionalActions = useMemo(() => {
+    return (
+      (metaText ||
+        (currentLayout === "table" && tableLayoutOptions) ||
+        availableLayouts.length > 1 ||
+        additionalActionButton ||
+        additionalActionMenuItems) && (
+        <AdditionalActionsInner odysseyDesignTokens={odysseyDesignTokens}>
+          {metaText && (
+            <MetaTextContainer odysseyDesignTokens={odysseyDesignTokens}>
+              <Typography color="textSecondary">{metaText}</Typography>
+            </MetaTextContainer>
+          )}
+
+          {currentLayout === "table" && tableLayoutOptions && (
+            <TableSettings
+              setTableState={setTableState}
+              tableLayoutOptions={tableLayoutOptions}
+              tableState={tableState}
+            />
+          )}
+
+          {availableLayouts.length > 1 && (
+            <LayoutSwitcher
+              availableLayouts={availableLayouts}
+              currentLayout={currentLayout}
+              setCurrentLayout={setCurrentLayout}
+            />
+          )}
+
+          {additionalActionButton}
+
+          {additionalActionMenuItems && (
+            <MenuButton
+              endIcon={<MoreIcon />}
+              ariaLabel={t("table.moreactions.arialabel")}
+              buttonVariant="secondary"
+              menuAlignment="right"
+            >
+              {additionalActionMenuItems}
+            </MenuButton>
+          )}
+        </AdditionalActionsInner>
+      )
+    );
+  }, [
+    additionalActionButton,
+    additionalActionMenuItems,
+    availableLayouts,
+    currentLayout,
+    metaText,
+    odysseyDesignTokens,
+    tableLayoutOptions,
+    tableState,
+    t,
+  ]);
 
-        {availableLayouts.length > 1 && (
-          <LayoutSwitcher
-            availableLayouts={availableLayouts}
-            currentLayout={currentLayout}
-            setCurrentLayout={setCurrentLayout}
-          />
-        )}
-      </>
-    ),
-    [currentLayout, tableOptions, tableState, availableLayouts],
+  const enableVirtualization = useMemo(
+    () => enableVirtualizationProp ?? paginationType === "loadMore",
+    [enableVirtualizationProp, paginationType],
   );
 
   const { lastRow: lastRowOnPage } = usePagination({
@@ -327,18 +400,22 @@ const DataView = ({
         </BulkActionsContainer>
       )}
 
-      {!shouldShowFilters && !bulkActionMenuItems && !hasRowSelection && (
-        <AdditionalActionsContainer>
-          {additionalActions}
-        </AdditionalActionsContainer>
-      )}
+      {!shouldShowFilters &&
+        !bulkActionMenuItems &&
+        !hasRowSelection &&
+        additionalActions && (
+          <AdditionalActionsContainer odysseyDesignTokens={odysseyDesignTokens}>
+            {additionalActions}
+          </AdditionalActionsContainer>
+        )}
 
-      {currentLayout === "table" && tableOptions && (
-        <TableContent
-          columns={tableOptions.columns}
+      {currentLayout === "table" && tableLayoutOptions && (
+        <TableLayoutContent
+          columns={tableLayoutOptions.columns}
           data={data}
           draggingRow={draggingRow}
           emptyState={emptyState}
+          enableVirtualization={enableVirtualization}
           getRowId={getRowId}
           hasRowReordering={hasRowReordering}
           hasRowSelection={hasRowSelection}
@@ -352,14 +429,14 @@ const DataView = ({
           rowSelection={rowSelection}
           setRowSelection={setRowSelection}
           setTableState={setTableState}
-          tableOptions={tableOptions}
+          tableLayoutOptions={tableLayoutOptions}
           tableState={tableState}
           totalRows={totalRows}
         />
       )}
       {(currentLayout === "list" || currentLayout === "grid") &&
-        stackOptions && (
-          <StackContent
+        cardLayoutOptions && (
+          <CardLayoutContent
             currentLayout={currentLayout}
             data={data}
             draggingRow={draggingRow}
@@ -376,7 +453,7 @@ const DataView = ({
             rowReorderingUtilities={rowReorderingUtilities}
             rowSelection={rowSelection}
             setRowSelection={setRowSelection}
-            stackOptions={stackOptions}
+            cardLayoutOptions={cardLayoutOptions}
             totalRows={totalRows}
           />
         )}

package/src/labs/{DataComponents → DataView}/DetailPanel.tsx

@@ -11,7 +11,7 @@
  */
 
 import { memo } from "react";
-import { StackProps } from "./componentTypes";
+import { CardLayoutProps } from "./componentTypes";
 import { DataRow } from "./dataTypes";
 
 const DetailPanel = ({
@@ -19,7 +19,7 @@ const DetailPanel = ({
   renderDetailPanel,
 }: {
   row: DataRow;
-  renderDetailPanel: StackProps["renderDetailPanel"];
+  renderDetailPanel: CardLayoutProps["renderDetailPanel"];
 }) => {
   if (!renderDetailPanel) return null;
   return renderDetailPanel({ row });

package/src/labs/{DataComponents/TableContent.tsx → DataView/TableLayoutContent.tsx}

@@ -20,6 +20,7 @@ import {
   ReactNode,
   Dispatch,
   ReactElement,
+  useEffect,
 } from "react";
 import styled, { CSSObject } from "@emotion/styled";
 import {
@@ -41,7 +42,7 @@ import {
 } from "../../icons.generated";
 import { Box } from "../../Box";
 import { Button } from "../../Button";
-import { TableProps, TableState, UniversalProps } from "./componentTypes";
+import { TableLayoutProps, TableState, UniversalProps } from "./componentTypes";
 import { DataTableCell } from "./dataTypes";
 import {
   dataTableImmutableSettings,
@@ -64,11 +65,12 @@ const RowActionsContainer = styled("div")(() => ({
   display: "flex",
 }));
 
-export type TableContentProps = {
-  columns: TableProps["columns"];
+export type TableLayoutContentProps = {
+  columns: TableLayoutProps["columns"];
   data: MRT_RowData[];
   draggingRow?: MRT_Row<MRT_RowData> | null;
   emptyState: ReactNode;
+  enableVirtualization?: boolean;
   getRowId: UniversalProps["getRowId"];
   hasRowReordering: UniversalProps["hasRowReordering"];
   hasRowSelection: UniversalProps["hasRowSelection"];
@@ -121,16 +123,17 @@ export type TableContentProps = {
   rowSelection: MRT_RowSelectionState;
   setRowSelection: Dispatch<SetStateAction<MRT_RowSelectionState>>;
   setTableState: Dispatch<SetStateAction<TableState>>;
-  tableOptions: TableProps;
+  tableLayoutOptions: TableLayoutProps;
   tableState: TableState;
   totalRows: UniversalProps["totalRows"];
 };
 
-const TableContent = ({
+const TableLayoutContent = ({
   columns,
   data,
   draggingRow,
   emptyState,
+  enableVirtualization,
   getRowId,
   hasRowReordering,
   hasRowSelection,
@@ -144,16 +147,17 @@ const TableContent = ({
   rowSelection,
   setRowSelection,
   setTableState,
-  tableOptions,
+  tableLayoutOptions,
   tableState,
   totalRows,
-}: TableContentProps) => {
+}: TableLayoutContentProps) => {
   const [isTableContainerScrolledToStart, setIsTableContainerScrolledToStart] =
     useState(true);
   const [isTableContainerScrolledToEnd, setIsTableContainerScrolledToEnd] =
     useState(true);
   const [tableInnerContainerWidth, setTableInnerContainerWidth] =
     useState<string>("100%");
+  const shouldUpdateScroll = useRef<boolean>(false);
   const tableOuterContainerRef = useRef<HTMLDivElement>(null);
   const tableInnerContainerRef = useRef<HTMLDivElement>(null);
   const tableContentRef = useRef<HTMLTableElement>(null);
@@ -220,8 +224,8 @@ const TableContent = ({
         row.index + (pagination.pageIndex - 1) * pagination.pageSize;
       return (
         <RowActionsContainer>
-          {tableOptions.rowActionButtons?.(row)}
-          {(tableOptions.rowActionMenuItems || hasRowReordering) && (
+          {tableLayoutOptions.rowActionButtons?.(row)}
+          {(tableLayoutOptions.rowActionMenuItems || hasRowReordering) && (
             <MenuButton
               ariaLabel={t("table.moreactions.arialabel")}
               buttonVariant="floating"
@@ -232,7 +236,7 @@ const TableContent = ({
               <RowActions
                 isRowReorderingDisabled={isRowReorderingDisabled}
                 row={row}
-                rowActionMenuItems={tableOptions.rowActionMenuItems}
+                rowActionMenuItems={tableLayoutOptions.rowActionMenuItems}
                 rowIndex={currentIndex}
                 totalRows={totalRows}
                 updateRowOrder={
@@ -251,7 +255,7 @@ const TableContent = ({
       pagination.pageIndex,
       pagination.pageSize,
       t,
-      tableOptions,
+      tableLayoutOptions,
       totalRows,
       updateRowOrder,
     ],
@@ -267,18 +271,40 @@ const TableContent = ({
     [innerWidthStyle, emptyState],
   );
 
+  // Scroll to the bottom as soon as data loads after clicking the
+  // loadMore pagination button
+  useEffect(() => {
+    if (enableVirtualization) {
+      shouldUpdateScroll.current = true;
+    }
+  }, [enableVirtualization, pagination]);
+
+  useEffect(() => {
+    if (
+      shouldUpdateScroll.current &&
+      tableContentRef.current &&
+      typeof tableInnerContainerRef.current?.scrollTo !== "undefined"
+    ) {
+      tableInnerContainerRef.current?.scrollTo(
+        0,
+        tableContentRef.current.clientHeight,
+      );
+      shouldUpdateScroll.current = false;
+    }
+  }, [data]);
+
   const shouldDisplayRowActions = useMemo(
     () =>
       (hasRowReordering === true && onReorderRows) ||
-      tableOptions.rowActionButtons ||
-      tableOptions.rowActionMenuItems
+      tableLayoutOptions.rowActionButtons ||
+      tableLayoutOptions.rowActionMenuItems
         ? true
         : false,
     [
       hasRowReordering,
       onReorderRows,
-      tableOptions.rowActionButtons,
-      tableOptions.rowActionMenuItems,
+      tableLayoutOptions.rowActionButtons,
+      tableLayoutOptions.rowActionMenuItems,
     ],
   );
 
@@ -323,10 +349,10 @@ const TableContent = ({
           className: "ods-actions-cell",
           children: (
             <Box sx={{ display: "flex", visibility: "hidden" }}>
-              {tableOptions.rowActionButtons &&
-                tableOptions.rowActionButtons({ id: null })}
+              {tableLayoutOptions.rowActionButtons &&
+                tableLayoutOptions.rowActionButtons({ id: null })}
               {((hasRowReordering === true && onReorderRows) ||
-                tableOptions.rowActionMenuItems) && (
+                tableLayoutOptions.rowActionMenuItems) && (
                 <Box>
                   <Button
                     endIcon={<MoreIcon />}
@@ -345,7 +371,7 @@ const TableContent = ({
     muiTableProps: {
       ref: tableContentRef,
       className:
-        !shouldDisplayRowActions && tableOptions.hasColumnResizing
+        !shouldDisplayRowActions && tableLayoutOptions.hasColumnResizing
           ? "ods-hide-spacer-column"
           : "",
     },
@@ -354,12 +380,18 @@ const TableContent = ({
     },
     muiTableBodyProps: () => ({
       className: rowDensityClassName,
+      tabIndex: enableVirtualization ? 0 : undefined,
     }),
-    enableColumnResizing: tableOptions.hasColumnResizing,
+    enableColumnResizing: tableLayoutOptions.hasColumnResizing,
     defaultColumn: {
       Cell: defaultCell,
     },
-    enableRowActions: shouldDisplayRowActions,
+    enableRowActions:
+      (hasRowReordering === true && onReorderRows) ||
+      tableLayoutOptions.rowActionButtons ||
+      tableLayoutOptions.rowActionMenuItems
+        ? true
+        : false,
     renderRowActions: ({ row }) => renderRowActions({ row }),
     enableRowOrdering: hasRowReordering && Boolean(onReorderRows),
     enableRowDragging: hasRowReordering && Boolean(onReorderRows),
@@ -395,8 +427,8 @@ const TableContent = ({
       sx: dragHandleStyles,
       ...dragHandleText,
     }),
-    renderDetailPanel: tableOptions.renderDetailPanel,
-    enableRowVirtualization: data.length >= 50,
+    renderDetailPanel: tableLayoutOptions.renderDetailPanel,
+    enableRowVirtualization: enableVirtualization,
     muiTableHeadCellProps: ({ column: currentColumn }) => ({
       className: tableState.columnSorting.find(
         (sortedColumn) => sortedColumn.id === currentColumn.id,
@@ -407,7 +439,7 @@ const TableContent = ({
     muiTableBodyCellProps: ({ column }) => ({
       className: column.getIsResizing() ? "isResizing" : "",
     }),
-    enableSorting: tableOptions.hasSorting === true, // I don't know why this needs to be true, but it still works if undefined otherwise
+    enableSorting: tableLayoutOptions.hasSorting === true, // I don't know why this needs to be true, but it still works if undefined otherwise
     onSortingChange: (sortingUpdater) => {
       const newSortVal =
         typeof sortingUpdater === "function"
@@ -441,7 +473,7 @@ const TableContent = ({
   );
 };
 
-const MemoizedTableContent = memo(TableContent);
-MemoizedTableContent.displayName = "TableContent";
+const MemoizedTableLayoutContent = memo(TableLayoutContent);
+MemoizedTableLayoutContent.displayName = "TableLayoutContent";
 
-export { MemoizedTableContent as TableContent };
+export { MemoizedTableLayoutContent as TableLayoutContent };

package/src/labs/{DataComponents → DataView}/TableSettings.tsx

@@ -19,22 +19,23 @@ import { densityValues } from "./constants";
 import { ListIcon, ShowIcon } from "../../icons.generated";
 import { MenuButton } from "../../MenuButton";
 import { MenuItem } from "../../MenuItem";
-import { TableProps, TableState } from "./componentTypes";
+import { TableLayoutProps, TableState } from "./componentTypes";
 
 export type TableSettingsProps = {
   setTableState: Dispatch<SetStateAction<TableState>>;
-  tableOptions: TableProps;
+  tableLayoutOptions: TableLayoutProps;
   tableState: TableState;
 };
 
 const TableSettings = ({
   setTableState,
-  tableOptions,
+  tableLayoutOptions,
   tableState,
 }: TableSettingsProps) => {
   const { t } = useTranslation();
 
-  const { hasChangeableDensity, hasColumnVisibility, columns } = tableOptions;
+  const { hasChangeableDensity, hasColumnVisibility, columns } =
+    tableLayoutOptions;
   const { rowDensity, columnVisibility } = tableState;
 
   const changeRowDensity = useCallback<(value: MRT_DensityState) => void>(

package/src/labs/{DataComponents → DataView}/componentTypes.ts

@@ -19,7 +19,7 @@ import {
   MRT_VisibilityState,
 } from "material-react-table";
 
-import { availableLayouts, availableStackLayouts } from "./constants";
+import { availableLayouts, availableCardLayouts } from "./constants";
 import { DataFilter } from "../DataFilters";
 import {
   DataGetDataType,
@@ -31,20 +31,23 @@ import { DataTableRowActionsProps } from "../../DataTable/DataTableRowActions";
 import { MenuButtonProps } from "../..";
 import { paginationTypeValues } from "../DataTablePagination";
 import { ReactNode } from "react";
-import { StackCardProps } from "./StackCard";
+import { DataCardProps } from "./DataCard";
 
 export type DataLayout = (typeof availableLayouts)[number];
-export type StackLayout = (typeof availableStackLayouts)[number];
+export type CardLayout = (typeof availableCardLayouts)[number];
 
 export type AvailableLayouts = DataLayout[];
-export type AvailableStackLayouts = StackLayout[];
+export type AvailableCardLayouts = CardLayout[];
 
 export type UniversalProps = {
+  additionalActionButton?: ReactNode;
+  additionalActionMenuItems?: ReactNode;
   bulkActionMenuItems?: (
     selectedRows: MRT_RowSelectionState,
   ) => MenuButtonProps["children"];
   currentPage?: number;
   emptyPlaceholder?: ReactNode;
+  enableVirtualization?: boolean;
   errorMessage?: string;
   filters?: Array<DataFilter | DataTableColumn<MRT_RowData> | string>;
   getData: ({
@@ -68,16 +71,28 @@ export type UniversalProps = {
   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;
 };
 
-export type TableProps = {
+export type TableLayoutProps = {
   columns: DataTableColumn<MRT_RowData>[];
   hasChangeableDensity?: boolean;
   hasColumnResizing?: boolean;
@@ -89,8 +104,8 @@ export type TableProps = {
   rowActionMenuItems?: DataTableRowActionsProps["rowActionMenuItems"];
 };
 
-export type StackProps = {
-  cardProps: (row: MRT_RowData) => StackCardProps;
+export type CardLayoutProps = {
+  itemProps: (row: MRT_RowData) => DataCardProps;
   maxGridColumns?: number;
   renderDetailPanel?: (props: { row: MRT_RowData }) => ReactNode;
   rowActionMenuItems?: DataTableRowActionsProps["rowActionMenuItems"];
@@ -99,8 +114,8 @@ export type StackProps = {
 export type ViewProps<L extends DataLayout> = {
   availableLayouts?: L[];
   initialLayout?: L;
-  stackOptions?: StackProps;
-  tableOptions?: TableProps;
+  cardLayoutOptions?: CardLayoutProps;
+  tableLayoutOptions?: TableLayoutProps;
 };
 
 export type TableState = {

package/src/labs/{DataComponents → DataView}/constants.tsx

@@ -14,11 +14,11 @@ import { MRT_DensityState } from "material-react-table";
 
 export type DataViewLayout = "list" | "grid" | "table";
 
-export const availableStackLayouts: DataViewLayout[] = ["list", "grid"];
+export const availableCardLayouts: DataViewLayout[] = ["list", "grid"];
 export const availableTableLayouts: DataViewLayout[] = ["table"];
 export const availableLayouts: DataViewLayout[] = [
   ...availableTableLayouts,
-  ...availableStackLayouts,
+  ...availableCardLayouts,
 ];
 
 export const densityValues: MRT_DensityState[] = [

package/src/labs/{DataComponents → DataView}/index.tsx

@@ -10,7 +10,6 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-export { DataStack, type DataStackProps } from "./DataStack";
 export { DataTable, type DataTableProps } from "./DataTable";
 export { DataView, type DataViewProps } from "./DataView";
 

package/src/labs/{DataComponents → DataView}/useFilterConversion.ts

@@ -15,10 +15,10 @@ import { MRT_RowData } from "material-react-table";
 
 import { DataFilter } from "../DataFilters";
 import { DataTableColumn } from "../../DataTable";
-import { UniversalProps, TableProps } from "./componentTypes";
+import { UniversalProps, TableLayoutProps } from "./componentTypes";
 
 type FilterConversionType = {
-  columns?: TableProps["columns"];
+  columns?: TableLayoutProps["columns"];
   filters?: UniversalProps["filters"];
 };
 

package/src/labs/DateField.tsx

@@ -43,6 +43,7 @@ export type DateFieldProps = {
     | "errorMessage"
     | "hasInitialFocus"
     | "hint"
+    | "HintLinkComponent"
     | "id"
     | "isDisabled"
     | "isOptional"
@@ -71,6 +72,7 @@ const DateField = ({
   errorMessage,
   hasInitialFocus,
   hint,
+  HintLinkComponent,
   id: idOverride,
   inputRef,
   isDisabled = false,
@@ -253,6 +255,7 @@ const DateField = ({
       fieldType="single"
       hasVisibleLabel
       hint={hint}
+      HintLinkComponent={HintLinkComponent}
       id={idOverride}
       isDisabled={isDisabled}
       isOptional={isOptional}