@okta/odyssey-react-mui 1.32.0 → 1.33.0

package/src/DataTable/DataTableRowActions.tsx

@@ -1,132 +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 { MRT_Row, MRT_RowData } from "material-react-table";
-import { Fragment, ReactElement, memo, useCallback } from "react";
-import {
-  Button,
-  MenuButton,
-  MenuButtonProps,
-  MenuItem,
-} from "../Buttons/index.js";
-import { Box as MuiBox } from "@mui/material";
-import {
-  ArrowBottomIcon,
-  ArrowDownIcon,
-  ArrowTopIcon,
-  ArrowUpIcon,
-  MoreIcon,
-} from "../icons.generated/index.js";
-import { DataTableProps } from "./DataTable.js";
-import { Trans, useTranslation } from "react-i18next";
-
-export type DataTableRowActionsProps = {
-  row: (MRT_Row<MRT_RowData> | MRT_RowData) & { id: string };
-  rowIndex: number;
-  rowActionButtons?: (
-    row: MRT_RowData,
-  ) => ReactElement<typeof Button | typeof Fragment>;
-  rowActionMenuItems?: (row: MRT_RowData) => MenuButtonProps["children"];
-  totalRows?: DataTableProps["totalRows"];
-  updateRowOrder?: ({
-    rowId,
-    newRowIndex,
-  }: {
-    rowId: string;
-    newRowIndex: number;
-  }) => void;
-};
-
-const DataTableRowActions = ({
-  row,
-  rowIndex,
-  rowActionButtons,
-  rowActionMenuItems,
-  totalRows,
-  updateRowOrder,
-}: DataTableRowActionsProps) => {
-  const { t } = useTranslation();
-
-  const handleToFrontClick = useCallback(() => {
-    if (updateRowOrder) {
-      updateRowOrder({ rowId: row.id, newRowIndex: 0 });
-    }
-  }, [row.id, updateRowOrder]);
-
-  const handleForwardClick = useCallback(() => {
-    if (updateRowOrder) {
-      updateRowOrder({ rowId: row.id, newRowIndex: Math.max(0, rowIndex - 1) });
-    }
-  }, [row.id, rowIndex, updateRowOrder]);
-
-  const handleBackwardClick = useCallback(() => {
-    if (updateRowOrder) {
-      updateRowOrder({ rowId: row.id, newRowIndex: rowIndex + 1 });
-    }
-  }, [row.id, rowIndex, updateRowOrder]);
-
-  const handleToBackClick = useCallback(() => {
-    if (updateRowOrder) {
-      updateRowOrder({
-        rowId: row.id,
-        newRowIndex: totalRows ? totalRows - 1 : rowIndex,
-      });
-    }
-  }, [row.id, rowIndex, totalRows, updateRowOrder]);
-
-  return (
-    <MuiBox display="flex">
-      {rowActionButtons?.(row)}
-      {(rowActionMenuItems || updateRowOrder) && (
-        <MenuButton
-          endIcon={<MoreIcon />}
-          size="small"
-          buttonVariant="floating"
-          ariaLabel={t("table.moreactions.arialabel")}
-          menuAlignment="right"
-        >
-          {rowActionMenuItems && <>{rowActionMenuItems(row)}</>}
-          {rowActionMenuItems && updateRowOrder && <hr />}
-          {updateRowOrder && (
-            <>
-              <MenuItem isDisabled={rowIndex <= 0} onClick={handleToFrontClick}>
-                <ArrowTopIcon /> <Trans i18nKey="table.reorder.tofront" />
-              </MenuItem>
-              <MenuItem isDisabled={rowIndex <= 0} onClick={handleForwardClick}>
-                <ArrowUpIcon /> <Trans i18nKey="table.reorder.forward" />
-              </MenuItem>
-              <MenuItem
-                isDisabled={totalRows ? rowIndex >= totalRows - 1 : false}
-                onClick={handleBackwardClick}
-              >
-                <ArrowDownIcon /> <Trans i18nKey="table.reorder.backward" />
-              </MenuItem>
-              {totalRows && (
-                <MenuItem
-                  isDisabled={rowIndex >= totalRows - 1}
-                  onClick={handleToBackClick}
-                >
-                  <ArrowBottomIcon /> <Trans i18nKey="table.reorder.toback" />
-                </MenuItem>
-              )}
-            </>
-          )}
-        </MenuButton>
-      )}
-    </MuiBox>
-  );
-};
-
-const MemoizedDataTableRowActions = memo(DataTableRowActions);
-MemoizedDataTableRowActions.displayName = "DataTableRowActions";
-
-export { MemoizedDataTableRowActions as DataTableRowActions };

package/src/DataTable/DataTableSettings.tsx

@@ -1,136 +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 { MenuButton, MenuItem } from "../Buttons/index.js";
-import { ListIcon, ShowIcon } from "../icons.generated/index.js";
-import { densityValues } from "./constants.js";
-import { DataTableProps } from "./DataTable.js";
-import { MRT_VisibilityState } from "material-react-table";
-import { useTranslation } from "react-i18next";
-
-export type DataTableSettingsProps = {
-  hasChangeableDensity: DataTableProps["hasChangeableDensity"];
-  rowDensity: (typeof densityValues)[number];
-  setRowDensity: Dispatch<SetStateAction<(typeof densityValues)[number]>>;
-  hasColumnVisibility: DataTableProps["hasColumnVisibility"];
-  columns: DataTableProps["columns"];
-  columnVisibility?: MRT_VisibilityState;
-  setColumnVisibility: Dispatch<
-    SetStateAction<MRT_VisibilityState | undefined>
-  >;
-};
-
-const DataTableSettings = ({
-  hasChangeableDensity,
-  rowDensity,
-  setRowDensity,
-  hasColumnVisibility,
-  columns,
-  columnVisibility,
-  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 && (
-        <MenuButton
-          endIcon={<ListIcon />}
-          ariaLabel={t("table.density.arialabel")}
-          menuAlignment="right"
-          shouldCloseOnSelect={false}
-        >
-          <>
-            {densityValues.map((value: (typeof densityValues)[number]) => (
-              <MenuItem
-                key={value}
-                isSelected={rowDensity === value}
-                onClick={changeRowDensity(value)}
-              >
-                {`${value.charAt(0).toUpperCase()}${value.slice(1)}`}
-              </MenuItem>
-            ))}
-          </>
-        </MenuButton>
-      )}
-
-      {hasColumnVisibility && (
-        <MenuButton
-          endIcon={<ShowIcon />}
-          ariaLabel={t("table.columnvisibility.arialabel")}
-          menuAlignment="right"
-          shouldCloseOnSelect={false}
-        >
-          <>
-            {columns
-              .filter((column) => column.enableHiding !== false)
-              .map((column) => (
-                <MenuItem
-                  key={column.accessorKey}
-                  onClick={changeColumnVisibility(column.id as string)}
-                >
-                  <MuiCheckbox
-                    checked={isColumnVisibilityChecked[column.accessorKey!]}
-                  />
-                  {column.header}
-                </MenuItem>
-              ))}
-          </>
-        </MenuButton>
-      )}
-    </>
-  );
-};
-
-const MemoizedDataTableSettings = memo(DataTableSettings);
-MemoizedDataTableSettings.displayName = "DataTableSettings";
-
-export { MemoizedDataTableSettings as DataTableSettings };

package/src/DataTable/index.tsx

@@ -1,28 +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.
- */
-
-export {
-  DataTable,
-  type DataTableColumn,
-  type DataTableProps,
-  type DataTableGetDataType,
-  type DataTableOnReorderRowsType,
-  type DataTableRenderDetailPanelType,
-} from "./DataTable.js";
-export { densityValues } from "./constants.js";
-export type {
-  MRT_ColumnFiltersState as DataTableFiltersState,
-  MRT_SortingState as DataTableSortingState,
-  MRT_RowSelectionState as DataTableRowSelectionState,
-  MRT_RowData as DataTableRowData,
-  MRT_Row as DataTableRow,
-} from "material-react-table";

package/src/DataTable/reorderDataRowsLocally.tsx

@@ -1,48 +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 { MRT_RowData } from "material-react-table";
-
-/**
- * Reorders data rows locally.
- *
- * @param currentData - The current array of data rows.
- * @param rowId - The ID of the row to move.
- * @param newIndex - The new index to move the row to.
- * @returns A new array of data with the row moved to the specified index.
- */
-export const reorderDataRowsLocally = <TData extends MRT_RowData>({
-  currentData,
-  rowId,
-  newRowIndex,
-}: {
-  currentData: TData[];
-  rowId: string;
-  newRowIndex: number;
-}): TData[] => {
-  const updatedData = [...currentData];
-  const rowIndex = updatedData.findIndex((row) => row.id === rowId);
-
-  // Ensure the row exists and the new index is within bounds
-  if (rowIndex === -1 || newRowIndex < 0 || newRowIndex >= updatedData.length) {
-    console.warn("Invalid row ID or newIndex; cannot reorder rows.");
-    return updatedData; // Return the original data if conditions aren't met
-  }
-
-  // Remove the row from its current position
-  const [removedRow] = updatedData.splice(rowIndex, 1);
-
-  // Insert the row at the new index
-  updatedData.splice(newRowIndex, 0, removedRow);
-
-  return updatedData;
-};

package/src/DataTable/useRowReordering.tsx

@@ -1,232 +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, KeyboardEvent } from "react";
-import { DataTableProps } from "./DataTable.js";
-import { reorderDataRowsLocally } from "./reorderDataRowsLocally.js";
-import { useOdysseyDesignTokens } from "../OdysseyDesignTokensContext.js";
-import { MRT_Row, MRT_RowData, MRT_TableInstance } from "material-react-table";
-
-export const useRowReordering = <TData extends MRT_RowData>({
-  totalRows,
-  onReorderRows,
-  data,
-  setData,
-  draggingRow,
-  setDraggingRow,
-  resultsPerPage,
-  page,
-}: {
-  totalRows: DataTableProps["totalRows"];
-  onReorderRows: DataTableProps["onReorderRows"];
-  data: TData[];
-  setData: Dispatch<SetStateAction<TData[]>>;
-  draggingRow?: MRT_Row<TData> | null;
-  setDraggingRow: Dispatch<SetStateAction<MRT_Row<TData> | null | undefined>>;
-  resultsPerPage: number;
-  page: number;
-}) => {
-  const updateRowOrder = ({
-    rowId,
-    newRowIndex,
-  }: {
-    rowId: string;
-    newRowIndex: number;
-  }) => {
-    if (newRowIndex < 0) {
-      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;
-    }
-
-    const newData = reorderDataRowsLocally({
-      currentData: data,
-      rowId,
-      newRowIndex,
-    });
-
-    setData(newData);
-    onReorderRows?.({ rowId, newRowIndex });
-  };
-
-  const odysseyDesignTokens = useOdysseyDesignTokens();
-  const dragHandleStyles = {
-    padding: odysseyDesignTokens.Spacing1,
-    borderRadius: odysseyDesignTokens.BorderRadiusMain,
-    "&:focus-visible": {
-      boxShadow: `0 0 0 2px ${odysseyDesignTokens.HueNeutralWhite}, 0 0 0 4px ${odysseyDesignTokens.PalettePrimaryMain}`,
-      outline: "2px solid transparent",
-      outlineOffset: "1px",
-    },
-  };
-
-  const dragHandleText = {
-    title: "Drag row or press space/enter key to start and stop reordering",
-    "aria-label":
-      "Drag row to reorder. Or, press space or enter to start and stop reordering and esc to cancel.",
-  };
-
-  const draggableTableBodyRowClassName = ({
-    currentRowId,
-    draggingRowId,
-    hoveredRowId,
-  }: {
-    currentRowId: string;
-    draggingRowId?: string;
-    hoveredRowId?: string;
-  }) => {
-    if (draggingRowId === currentRowId && hoveredRowId !== currentRowId) {
-      return "isDragging";
-    }
-
-    if (hoveredRowId === currentRowId && draggingRowId !== currentRowId) {
-      return "isDragTarget";
-    }
-
-    if (draggingRowId === currentRowId && hoveredRowId === currentRowId) {
-      return "isDragging isDragTarget";
-    }
-
-    return undefined;
-  };
-
-  const setHoveredRow = (table: MRT_TableInstance<TData>, id: TData["id"]) => {
-    if (id) {
-      // The `as MRT_Row<TData>` is necessary here to overcome some type/generic
-      // issues with the type of `setHoveredRow` defined by MRT. It's not ideal code,
-      // but it's the only way that works without a much larger rewrite.
-      const nextRow = table.getRow(id) as MRT_Row<TData>;
-
-      if (nextRow) {
-        table.setHoveredRow(nextRow);
-      }
-    }
-  };
-
-  type HandleDragHandleKeyDownArgs = {
-    table: MRT_TableInstance<TData>;
-    row: MRT_Row<TData>;
-    event: KeyboardEvent<HTMLButtonElement>;
-  };
-
-  const handleDragHandleKeyDown = ({
-    table,
-    row,
-    event,
-  }: HandleDragHandleKeyDownArgs) => {
-    const { hoveredRow } = table.getState();
-
-    const { key } = event;
-
-    const isSpaceKey = key === " ";
-    const isEnterKey = key === "Enter";
-    const isEscapeKey = key === "Escape";
-    const isArrowDown = key === "ArrowDown";
-    const isArrowUp = key === "ArrowUp";
-    const isSpaceOrEnter = isSpaceKey || isEnterKey;
-    const zeroIndexedPageNumber = page - 1;
-    const currentIndex = row.index + zeroIndexedPageNumber * resultsPerPage;
-
-    if (isEscapeKey) {
-      resetDraggingAndHoveredRow(table);
-      return;
-    }
-
-    if (isSpaceOrEnter) {
-      event.preventDefault();
-      event.stopPropagation();
-    }
-
-    if (draggingRow) {
-      if (typeof hoveredRow?.index === "number") {
-        const { index } = hoveredRow;
-
-        if (isSpaceOrEnter) {
-          const pageRelativeIndex =
-            index + zeroIndexedPageNumber * resultsPerPage;
-
-          if (pageRelativeIndex !== currentIndex) {
-            updateRowOrder({
-              rowId: row.id,
-              newRowIndex: pageRelativeIndex,
-            });
-
-            // Can't transition CSS hover effect. Use timeout to delay hovered row effect removal
-            setTimeout(() => {
-              resetDraggingAndHoveredRow(table);
-            }, odysseyDesignTokens.TransitionDurationMainAsNumber);
-            return;
-          }
-        }
-
-        if (isArrowDown || isArrowUp) {
-          const nextIndex = isArrowDown ? index + 1 : index - 1;
-          // This is a legacy file, and this type isn't a problem in `DataView` --Kevin Ghadyani
-          // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-          setHoveredRow(table, data[nextIndex]?.id);
-        }
-      } else {
-        if (isArrowDown || isArrowUp) {
-          const nextIndex = isArrowDown ? row.index + 1 : row.index - 1;
-          // This is a legacy file, and this type isn't a problem in `DataView` --Kevin Ghadyani
-          // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-          setHoveredRow(table, data[nextIndex]?.id);
-        }
-      }
-    } else {
-      if (isSpaceOrEnter) {
-        setDraggingRow(row);
-      }
-    }
-  };
-
-  const handleDragHandleOnDragEnd = (table: MRT_TableInstance<TData>) => {
-    const cols = table.getAllColumns();
-    cols[0].toggleVisibility();
-
-    const { draggingRow, hoveredRow } = table.getState();
-    if (draggingRow) {
-      updateRowOrder({
-        newRowIndex: (hoveredRow as TData).index as number,
-        rowId: draggingRow.id,
-      });
-    }
-
-    setDraggingRow(null);
-  };
-
-  const handleDragHandleOnDragCapture = (table: MRT_TableInstance<TData>) => {
-    if (!draggingRow && table.getState().draggingRow?.id) {
-      setDraggingRow(table.getState().draggingRow);
-    }
-  };
-
-  const resetDraggingAndHoveredRow = (table: MRT_TableInstance<TData>) => {
-    setDraggingRow(null);
-    table.setHoveredRow(null);
-  };
-
-  return {
-    dragHandleStyles,
-    dragHandleText,
-    draggableTableBodyRowClassName,
-    handleDragHandleKeyDown,
-    handleDragHandleOnDragCapture,
-    handleDragHandleOnDragEnd,
-    resetDraggingAndHoveredRow,
-    updateRowOrder,
-  };
-};

package/src/DataTable/useScrollIndication.tsx

@@ -1,125 +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,
-  useCallback,
-  useEffect,
-  useRef,
-} from "react";
-import { useOdysseyDesignTokens } from "../OdysseyDesignTokensContext.js";
-
-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 odysseyDesignTokens = useOdysseyDesignTokens();
-
-  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(() => {
-    // Avoid creating multiple observers or if ResizeObserver is unsupported
-    if (typeof ResizeObserver === "undefined" || resizeObserverRef.current) {
-      return;
-    }
-
-    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 - Number(odysseyDesignTokens.BorderWidthMain) * 2}px` // Account for the border on the outer container
-            : "100%",
-        );
-      }, 100); // debounce delay
-    });
-
-    if (tableOuterContainer && tableOuterContainer.parentElement) {
-      resizeObserverRef.current.observe(tableOuterContainer.parentElement);
-    }
-
-    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,
-    odysseyDesignTokens.BorderWidthMain,
-  ]);
-
-  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
-  }, []);
-};