@okta/odyssey-react-mui 1.14.2 → 1.14.4

package/src/DataTable/DataTableSettings.tsx

@@ -0,0 +1,109 @@
+/*!
+ * 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 } from "react";
+import { Checkbox as MuiCheckbox } from "@mui/material";
+import { MenuButton } from "../MenuButton";
+import { MenuItem } from "../MenuItem";
+import { ListIcon, ShowIcon } from "../icons.generated";
+import { densityValues } from "./constants";
+import { DataTableProps } from "./DataTable";
+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();
+  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={() => setRowDensity(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={() => {
+                    const columnId = column.id as string;
+                    setColumnVisibility((prevVisibility) => ({
+                      ...prevVisibility,
+                      [columnId]: prevVisibility
+                        ? prevVisibility[columnId] === false
+                        : false,
+                    }));
+                  }}
+                >
+                  <MuiCheckbox
+                    checked={
+                      columnVisibility
+                        ? columnVisibility[column.accessorKey as string] !==
+                          false
+                        : true
+                    }
+                  />
+                  {column.header}
+                </MenuItem>
+              ))}
+          </>
+        </MenuButton>
+      )}
+    </>
+  );
+};
+const MemoizedDataTableSettings = memo(DataTableSettings);
+export { MemoizedDataTableSettings as DataTableSettings };

package/src/DataTable/constants.ts

@@ -0,0 +1,13 @@
+/*!
+ * 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 const densityValues = ["comfortable", "spacious", "compact"] as const;

package/src/DataTable/index.tsx

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

package/src/DataTable/reorderDataRowsLocally.tsx

@@ -0,0 +1,48 @@
+/*!
+ * 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 = ({
+  currentData,
+  rowId,
+  newRowIndex,
+}: {
+  currentData: MRT_RowData[];
+  rowId: string;
+  newRowIndex: number;
+}): MRT_RowData[] => {
+  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

@@ -0,0 +1,233 @@
+/*!
+ * 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";
+import { reorderDataRowsLocally } from "./reorderDataRowsLocally";
+import { useOdysseyDesignTokens } from "../OdysseyDesignTokensContext";
+import { MRT_Row, MRT_RowData, MRT_TableInstance } from "material-react-table";
+
+export const useRowReordering = ({
+  totalRows,
+  onReorderRows,
+  data,
+  setData,
+  draggingRow,
+  setDraggingRow,
+  resultsPerPage,
+  page,
+}: {
+  totalRows: DataTableProps["totalRows"];
+  onReorderRows: DataTableProps["onReorderRows"];
+  data: MRT_RowData[];
+  setData: Dispatch<SetStateAction<MRT_RowData[]>>;
+  draggingRow?: MRT_Row<MRT_RowData> | null;
+  setDraggingRow: Dispatch<
+    SetStateAction<MRT_Row<MRT_RowData> | null | undefined>
+  >;
+  resultsPerPage: number;
+  page: number;
+}) => {
+  const updateRowOrder = ({
+    rowId,
+    newRowIndex,
+  }: {
+    rowId: string;
+    newRowIndex: number;
+  }) => {
+    if (newRowIndex < 0) {
+      return;
+    }
+
+    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 getRowFromTableAndSetHovered = (
+    table: MRT_TableInstance<MRT_RowData>,
+    id: MRT_RowData["id"],
+  ) => {
+    if (id) {
+      const nextRow: MRT_RowData = table.getRow(id);
+
+      if (nextRow) {
+        table.setHoveredRow(nextRow);
+      }
+    }
+  };
+
+  type HandleDragHandleKeyDownArgs = {
+    table: MRT_TableInstance<MRT_RowData>;
+    row: MRT_Row<MRT_RowData>;
+    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;
+          getRowFromTableAndSetHovered(table, data[nextIndex]?.id);
+        }
+      } else {
+        if (isArrowDown || isArrowUp) {
+          const nextIndex = isArrowDown ? row.index + 1 : row.index - 1;
+          getRowFromTableAndSetHovered(table, data[nextIndex]?.id);
+        }
+      }
+    } else {
+      if (isSpaceOrEnter) {
+        setDraggingRow(row);
+      }
+    }
+  };
+
+  const handleDragHandleOnDragEnd = (table: MRT_TableInstance<MRT_RowData>) => {
+    const cols = table.getAllColumns();
+    cols[0].toggleVisibility();
+
+    const { draggingRow, hoveredRow } = table.getState();
+    if (draggingRow) {
+      updateRowOrder({
+        rowId: draggingRow.id,
+        newRowIndex: (hoveredRow as MRT_RowData).index,
+      });
+    }
+
+    setDraggingRow(null);
+  };
+
+  const handleDragHandleOnDragCapture = (
+    table: MRT_TableInstance<MRT_RowData>,
+  ) => {
+    if (!draggingRow && table.getState().draggingRow?.id) {
+      setDraggingRow(table.getState().draggingRow);
+    }
+  };
+
+  const resetDraggingAndHoveredRow = (
+    table: MRT_TableInstance<MRT_RowData>,
+  ) => {
+    setDraggingRow(null);
+    table.setHoveredRow(null);
+  };
+
+  return {
+    dragHandleStyles,
+    dragHandleText,
+    draggableTableBodyRowClassName,
+    handleDragHandleKeyDown,
+    handleDragHandleOnDragCapture,
+    handleDragHandleOnDragEnd,
+    resetDraggingAndHoveredRow,
+    updateRowOrder,
+  };
+};

package/src/IconWithTooltip.tsx

@@ -0,0 +1,90 @@
+/*!
+ * Copyright (c) 2022-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 { memo, ReactNode } from "react";
+import styled from "@emotion/styled";
+import { Tooltip as MuiTooltip } from "@mui/material";
+import type { TooltipProps as MuiTooltipProps } from "@mui/material";
+
+import { HtmlProps } from "./HtmlProps";
+import { InformationCircleIcon } from "./icons.generated";
+import { useMuiProps } from "./MuiPropsContext";
+import {
+  useOdysseyDesignTokens,
+  DesignTokens,
+} from "./OdysseyDesignTokensContext";
+
+const IconContainer = styled.span<{
+  odysseyDesignTokens: DesignTokens;
+}>(({ odysseyDesignTokens }) => ({
+  display: "inline-flex",
+  transitionProperty: "border-color, box-shadow, outline",
+  transitionDuration: odysseyDesignTokens.TransitionDurationMain,
+  border: "1px solid transparent",
+
+  "&:focus, &:focus-visible": {
+    borderColor: odysseyDesignTokens.FocusOutlineColorPrimary,
+    boxShadow: `0 0 0 1px ${odysseyDesignTokens.FocusOutlineColorPrimary}`,
+    outline: `${odysseyDesignTokens.FocusOutlineWidthMain} ${odysseyDesignTokens.FocusOutlineStyle} transparent`,
+    outlineOffset: odysseyDesignTokens.FocusOutlineOffsetTight,
+  },
+
+  svg: {
+    display: "flex",
+  },
+}));
+
+export type IconWithTooltipProps = {
+  /**
+   * The icon to render. Defaults to `InformationCircleIcon`
+   */
+  IconComponent?: ReactNode;
+  /**
+   * The placement of the Tooltip
+   */
+  placement?: MuiTooltipProps["placement"];
+  /**
+   * The text to display in the Tooltip
+   */
+  tooltipText: string;
+} & Pick<HtmlProps, "testId" | "translate">;
+
+const IconWithTooltip = ({
+  IconComponent = <InformationCircleIcon />,
+  placement = "right",
+  testId,
+  tooltipText,
+  translate,
+}: IconWithTooltipProps) => {
+  const muiProps = useMuiProps();
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+
+  return (
+    <MuiTooltip
+      data-se={testId}
+      describeChild
+      placement={placement}
+      tabIndex={0}
+      title={tooltipText}
+      translate={translate}
+    >
+      <IconContainer odysseyDesignTokens={odysseyDesignTokens} {...muiProps}>
+        {IconComponent}
+      </IconContainer>
+    </MuiTooltip>
+  );
+};
+
+const MemoizedIconWithTooltip = memo(IconWithTooltip);
+MemoizedIconWithTooltip.displayName = "IconWithTooltip";
+
+export { MemoizedIconWithTooltip as IconWithTooltip };

package/src/index.ts

@@ -69,11 +69,13 @@ export * from "./CircularProgress";
 export * from "./CssBaseline";
 export * from "./createShadowRootElement";
 export * from "./createUniqueId";
+export * from "./DataTable";
 export * from "./Dialog";
 export * from "./Fieldset";
 export * from "./FieldComponentProps";
 export * from "./Form";
 export * from "./HintLink";
+export * from "./IconWithTooltip";
 export * from "./Link";
 export * from "./MenuButton";
 export * from "./MenuItem";