@okta/odyssey-react-mui 1.14.3 → 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/index.ts

@@ -69,6 +69,7 @@ export * from "./CircularProgress";
 export * from "./CssBaseline";
 export * from "./createShadowRootElement";
 export * from "./createUniqueId";
+export * from "./DataTable";
 export * from "./Dialog";
 export * from "./Fieldset";
 export * from "./FieldComponentProps";

package/src/labs/DataFilters.tsx

@@ -30,7 +30,9 @@ import { Button } from "../Button";
 import {
   IconButton as MuiIconButton,
   Menu as MuiMenu,
+  MenuItem as MuiMenuItem,
   Popover as MuiPopover,
+  Typography as MuiTypography,
 } from "@mui/material";
 import {
   CheckIcon,
@@ -38,14 +40,14 @@ import {
   CloseCircleFilledIcon,
   FilterIcon,
 } from "../icons.generated";
-import { MenuItem } from "../MenuItem";
-import { Paragraph, Subordinate } from "../Typography";
+import { Subordinate } from "../Typography";
 import { TextField } from "../TextField";
 import { CheckboxGroup } from "../CheckboxGroup";
 import { Checkbox } from "../Checkbox";
 import { RadioGroup } from "../RadioGroup";
 import { Radio } from "../Radio";
 import { MRT_ColumnDef, MRT_RowData } from "material-react-table";
+import { Trans, useTranslation } from "react-i18next";
 
 export type DataFilterValue = string | string[] | undefined;
 
@@ -128,6 +130,7 @@ const DataFilters = ({
   filters: filtersProp = [],
 }: DataFiltersProps) => {
   const [filters, setFilters] = useState<DataFilter[]>(filtersProp);
+  const { t } = useTranslation();
 
   const initialInputValues = useMemo(() => {
     return filtersProp.reduce(
@@ -307,7 +310,7 @@ const DataFilters = ({
             aria-controls={isFiltersMenuOpen ? "filters-menu" : undefined}
             aria-expanded={isFiltersMenuOpen ? "true" : undefined}
             aria-haspopup="true"
-            ariaLabel="Filters"
+            ariaLabel={t("filters.filters.arialabel")}
             endIcon={<FilterIcon />}
             onClick={(event) => {
               setFiltersMenuAnchorElement(event.currentTarget);
@@ -337,13 +340,23 @@ const DataFilters = ({
             )?.value;
 
             return (
-              <MenuItem
+              <MuiMenuItem
                 key={filter.id}
                 onClick={(event) => {
                   setIsFilterPopoverOpen(true);
                   setFilterPopoverAnchorElement(event.currentTarget);
                   setFilterPopoverCurrentFilter(filter);
                 }}
+                selected={
+                  filterPopoverCurrentFilter === filter &&
+                  isFilterPopoverOpen === true
+                }
+                className={
+                  filterPopoverCurrentFilter === filter &&
+                  isFilterPopoverOpen === true
+                    ? "isVisiblySelected"
+                    : undefined
+                }
               >
                 <Box
                   sx={{
@@ -352,29 +365,54 @@ const DataFilters = ({
                     justifyContent: "space-between",
                     width: "100%",
                     minWidth: 180,
+                    paddingBlock: 1,
+                    paddingInlineStart: 2,
                   }}
                 >
                   <Box sx={{ marginRight: 2 }}>
-                    <Paragraph component="div">{filter.label}</Paragraph>
+                    <MuiTypography fontWeight="500" sx={{ marginBlockEnd: 2 }}>
+                      {filter.label}
+                    </MuiTypography>
                     <Subordinate component="div">
                       {!latestFilterValue ||
                       (Array.isArray(latestFilterValue) &&
-                        latestFilterValue.length === 0)
-                        ? `Any ${filter.label.toLowerCase()}`
-                        : Array.isArray(latestFilterValue)
-                          ? `${latestFilterValue.length} selected`
-                          : latestFilterValue}
+                        latestFilterValue.length === 0) ? (
+                        <Trans
+                          i18nKey="filters.menuitem.any"
+                          values={{
+                            label: filter.label.toLowerCase(),
+                          }}
+                        />
+                      ) : Array.isArray(latestFilterValue) ? (
+                        <Trans
+                          count={latestFilterValue.length}
+                          i18nKey="filters.menuitem.selected"
+                          values={{
+                            selected: latestFilterValue.length,
+                          }}
+                        />
+                      ) : (
+                        latestFilterValue
+                      )}
                     </Subordinate>
                   </Box>
                   <ChevronRightIcon />
                 </Box>
-              </MenuItem>
+              </MuiMenuItem>
             );
           })}
         </MuiMenu>
       </>
     ),
-    [isFiltersMenuOpen, filtersMenuAnchorElement, filtersProp, filters],
+    [
+      isFiltersMenuOpen,
+      filterPopoverCurrentFilter,
+      isFilterPopoverOpen,
+      filtersMenuAnchorElement,
+      filtersProp,
+      filters,
+      t,
+    ],
   );
 
   return (
@@ -390,6 +428,11 @@ const DataFilters = ({
               {/* Filter popover */}
               <MuiPopover
                 anchorEl={filterPopoverAnchorElement}
+                // Positions the popover flush with the edge of the parent menu
+                // and at the right shadow elevation. These magic values are simply
+                // to match the default popover offset.
+                elevation={2}
+                sx={{ marginLeft: 2, marginTop: -1 }}
                 open={isFilterPopoverOpen}
                 anchorOrigin={{ vertical: "top", horizontal: "right" }}
                 onClose={(ev: MouseEvent) => {
@@ -493,7 +536,7 @@ const DataFilters = ({
                               inputValues[filterPopoverCurrentFilter.id] && (
                                 <MuiIconButton
                                   size="small"
-                                  aria-label="Clear filter"
+                                  aria-label={t("filters.filter.clear")}
                                   onClick={() => {
                                     updateInputValue({
                                       filterId: filterPopoverCurrentFilter.id,
@@ -571,7 +614,7 @@ const DataFilters = ({
                           }}
                         >
                           <Radio
-                            label="Any"
+                            label={t("filters.filter.any")}
                             value={""}
                             isChecked={
                               !inputValues[filterPopoverCurrentFilter.id]
@@ -615,7 +658,7 @@ const DataFilters = ({
               <Box sx={{ display: "flex", gap: 2, width: "100%" }}>
                 <SearchField
                   value={searchValue}
-                  label="Search"
+                  label={t("filters.search.label")}
                   onClear={() => {
                     setSearchValue("");
                     onChangeSearch("");
@@ -626,7 +669,7 @@ const DataFilters = ({
                   <Box>
                     <Button
                       variant="primary"
-                      label="Search"
+                      label={t("filters.search.label")}
                       onClick={() => onChangeSearch(searchValue)}
                     />
                   </Box>
@@ -642,7 +685,7 @@ const DataFilters = ({
             <Box>
               <Button
                 variant="secondary"
-                label="Clear filters"
+                label={t("filters.clear.label")}
                 onClick={clearAllFilters}
               />
             </Box>