@okta/odyssey-react-mui 1.14.3 → 1.14.4

package/dist/DataTable/reorderDataRowsLocally.js

@@ -0,0 +1,26 @@
+/*!
+ * 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 reorderDataRowsLocally = ({
+  currentData,
+  rowId,
+  newRowIndex
+}) => {
+  const updatedData = [...currentData];
+  const rowIndex = updatedData.findIndex(row => row.id === rowId);
+  if (rowIndex === -1 || newRowIndex < 0 || newRowIndex >= updatedData.length) {
+    console.warn("Invalid row ID or newIndex; cannot reorder rows.");
+    return updatedData;
+  }
+  const [removedRow] = updatedData.splice(rowIndex, 1);
+  updatedData.splice(newRowIndex, 0, removedRow);
+  return updatedData;
+};
+//# sourceMappingURL=reorderDataRowsLocally.js.map

package/dist/DataTable/reorderDataRowsLocally.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"reorderDataRowsLocally.js","names":["reorderDataRowsLocally","currentData","rowId","newRowIndex","updatedData","rowIndex","findIndex","row","id","length","console","warn","removedRow","splice"],"sources":["../../src/DataTable/reorderDataRowsLocally.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { MRT_RowData } from \"material-react-table\";\n\n/**\n * Reorders data rows locally.\n *\n * @param currentData - The current array of data rows.\n * @param rowId - The ID of the row to move.\n * @param newIndex - The new index to move the row to.\n * @returns A new array of data with the row moved to the specified index.\n */\nexport const reorderDataRowsLocally = ({\n  currentData,\n  rowId,\n  newRowIndex,\n}: {\n  currentData: MRT_RowData[];\n  rowId: string;\n  newRowIndex: number;\n}): MRT_RowData[] => {\n  const updatedData = [...currentData];\n  const rowIndex = updatedData.findIndex((row) => row.id === rowId);\n\n  // Ensure the row exists and the new index is within bounds\n  if (rowIndex === -1 || newRowIndex < 0 || newRowIndex >= updatedData.length) {\n    console.warn(\"Invalid row ID or newIndex; cannot reorder rows.\");\n    return updatedData; // Return the original data if conditions aren't met\n  }\n\n  // Remove the row from its current position\n  const [removedRow] = updatedData.splice(rowIndex, 1);\n\n  // Insert the row at the new index\n  updatedData.splice(newRowIndex, 0, removedRow);\n\n  return updatedData;\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAYA,OAAO,MAAMA,sBAAsB,GAAGA,CAAC;EACrCC,WAAW;EACXC,KAAK;EACLC;AAKF,CAAC,KAAoB;EACnB,MAAMC,WAAW,GAAG,CAAC,GAAGH,WAAW,CAAC;EACpC,MAAMI,QAAQ,GAAGD,WAAW,CAACE,SAAS,CAAEC,GAAG,IAAKA,GAAG,CAACC,EAAE,KAAKN,KAAK,CAAC;EAGjE,IAAIG,QAAQ,KAAK,CAAC,CAAC,IAAIF,WAAW,GAAG,CAAC,IAAIA,WAAW,IAAIC,WAAW,CAACK,MAAM,EAAE;IAC3EC,OAAO,CAACC,IAAI,CAAC,kDAAkD,CAAC;IAChE,OAAOP,WAAW;EACpB;EAGA,MAAM,CAACQ,UAAU,CAAC,GAAGR,WAAW,CAACS,MAAM,CAACR,QAAQ,EAAE,CAAC,CAAC;EAGpDD,WAAW,CAACS,MAAM,CAACV,WAAW,EAAE,CAAC,EAAES,UAAU,CAAC;EAE9C,OAAOR,WAAW;AACpB,CAAC"}

package/dist/DataTable/useRowReordering.js

@@ -0,0 +1,179 @@
+/*!
+ * 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 { reorderDataRowsLocally } from "./reorderDataRowsLocally.js";
+import { useOdysseyDesignTokens } from "../OdysseyDesignTokensContext.js";
+export const useRowReordering = ({
+  totalRows,
+  onReorderRows,
+  data,
+  setData,
+  draggingRow,
+  setDraggingRow,
+  resultsPerPage,
+  page
+}) => {
+  const updateRowOrder = ({
+    rowId,
+    newRowIndex
+  }) => {
+    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
+  }) => {
+    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, id) => {
+    if (id) {
+      const nextRow = table.getRow(id);
+      if (nextRow) {
+        table.setHoveredRow(nextRow);
+      }
+    }
+  };
+  const handleDragHandleKeyDown = ({
+    table,
+    row,
+    event
+  }) => {
+    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
+            });
+            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 => {
+    const cols = table.getAllColumns();
+    cols[0].toggleVisibility();
+    const {
+      draggingRow,
+      hoveredRow
+    } = table.getState();
+    if (draggingRow) {
+      updateRowOrder({
+        rowId: draggingRow.id,
+        newRowIndex: hoveredRow.index
+      });
+    }
+    setDraggingRow(null);
+  };
+  const handleDragHandleOnDragCapture = table => {
+    if (!draggingRow && table.getState().draggingRow?.id) {
+      setDraggingRow(table.getState().draggingRow);
+    }
+  };
+  const resetDraggingAndHoveredRow = table => {
+    setDraggingRow(null);
+    table.setHoveredRow(null);
+  };
+  return {
+    dragHandleStyles,
+    dragHandleText,
+    draggableTableBodyRowClassName,
+    handleDragHandleKeyDown,
+    handleDragHandleOnDragCapture,
+    handleDragHandleOnDragEnd,
+    resetDraggingAndHoveredRow,
+    updateRowOrder
+  };
+};
+//# sourceMappingURL=useRowReordering.js.map

package/dist/DataTable/useRowReordering.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRowReordering.js","names":["reorderDataRowsLocally","useOdysseyDesignTokens","useRowReordering","totalRows","onReorderRows","data","setData","draggingRow","setDraggingRow","resultsPerPage","page","updateRowOrder","rowId","newRowIndex","newData","currentData","odysseyDesignTokens","dragHandleStyles","padding","Spacing1","borderRadius","BorderRadiusMain","boxShadow","HueNeutralWhite","PalettePrimaryMain","outline","outlineOffset","dragHandleText","title","draggableTableBodyRowClassName","currentRowId","draggingRowId","hoveredRowId","undefined","getRowFromTableAndSetHovered","table","id","nextRow","getRow","setHoveredRow","handleDragHandleKeyDown","row","event","hoveredRow","getState","key","isSpaceKey","isEnterKey","isEscapeKey","isArrowDown","isArrowUp","isSpaceOrEnter","zeroIndexedPageNumber","currentIndex","index","resetDraggingAndHoveredRow","preventDefault","stopPropagation","pageRelativeIndex","setTimeout","TransitionDurationMainAsNumber","nextIndex","handleDragHandleOnDragEnd","cols","getAllColumns","toggleVisibility","handleDragHandleOnDragCapture"],"sources":["../../src/DataTable/useRowReordering.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { Dispatch, SetStateAction, KeyboardEvent } from \"react\";\nimport { DataTableProps } from \"./DataTable\";\nimport { reorderDataRowsLocally } from \"./reorderDataRowsLocally\";\nimport { useOdysseyDesignTokens } from \"../OdysseyDesignTokensContext\";\nimport { MRT_Row, MRT_RowData, MRT_TableInstance } from \"material-react-table\";\n\nexport const useRowReordering = ({\n  totalRows,\n  onReorderRows,\n  data,\n  setData,\n  draggingRow,\n  setDraggingRow,\n  resultsPerPage,\n  page,\n}: {\n  totalRows: DataTableProps[\"totalRows\"];\n  onReorderRows: DataTableProps[\"onReorderRows\"];\n  data: MRT_RowData[];\n  setData: Dispatch<SetStateAction<MRT_RowData[]>>;\n  draggingRow?: MRT_Row<MRT_RowData> | null;\n  setDraggingRow: Dispatch<\n    SetStateAction<MRT_Row<MRT_RowData> | null | undefined>\n  >;\n  resultsPerPage: number;\n  page: number;\n}) => {\n  const updateRowOrder = ({\n    rowId,\n    newRowIndex,\n  }: {\n    rowId: string;\n    newRowIndex: number;\n  }) => {\n    if (newRowIndex < 0) {\n      return;\n    }\n\n    if (totalRows && newRowIndex > totalRows) {\n      return;\n    }\n\n    const newData = reorderDataRowsLocally({\n      currentData: data,\n      rowId,\n      newRowIndex,\n    });\n\n    setData(newData);\n    onReorderRows?.({ rowId, newRowIndex });\n  };\n\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n  const dragHandleStyles = {\n    padding: odysseyDesignTokens.Spacing1,\n    borderRadius: odysseyDesignTokens.BorderRadiusMain,\n\n    \"&:focus-visible\": {\n      boxShadow: `0 0 0 2px ${odysseyDesignTokens.HueNeutralWhite}, 0 0 0 4px ${odysseyDesignTokens.PalettePrimaryMain}`,\n      outline: \"2px solid transparent\",\n      outlineOffset: \"1px\",\n    },\n  };\n\n  const dragHandleText = {\n    title: \"Drag row or press space/enter key to start and stop reordering\",\n    \"aria-label\":\n      \"Drag row to reorder. Or, press space or enter to start and stop reordering and esc to cancel.\",\n  };\n\n  const draggableTableBodyRowClassName = ({\n    currentRowId,\n    draggingRowId,\n    hoveredRowId,\n  }: {\n    currentRowId: string;\n    draggingRowId?: string;\n    hoveredRowId?: string;\n  }) => {\n    if (draggingRowId === currentRowId && hoveredRowId !== currentRowId) {\n      return \"isDragging\";\n    }\n\n    if (hoveredRowId === currentRowId && draggingRowId !== currentRowId) {\n      return \"isDragTarget\";\n    }\n\n    if (draggingRowId === currentRowId && hoveredRowId === currentRowId) {\n      return \"isDragging isDragTarget\";\n    }\n\n    return undefined;\n  };\n\n  const getRowFromTableAndSetHovered = (\n    table: MRT_TableInstance<MRT_RowData>,\n    id: MRT_RowData[\"id\"],\n  ) => {\n    if (id) {\n      const nextRow: MRT_RowData = table.getRow(id);\n\n      if (nextRow) {\n        table.setHoveredRow(nextRow);\n      }\n    }\n  };\n\n  type HandleDragHandleKeyDownArgs = {\n    table: MRT_TableInstance<MRT_RowData>;\n    row: MRT_Row<MRT_RowData>;\n    event: KeyboardEvent<HTMLButtonElement>;\n  };\n\n  const handleDragHandleKeyDown = ({\n    table,\n    row,\n    event,\n  }: HandleDragHandleKeyDownArgs) => {\n    const { hoveredRow } = table.getState();\n\n    const { key } = event;\n\n    const isSpaceKey = key === \" \";\n    const isEnterKey = key === \"Enter\";\n    const isEscapeKey = key === \"Escape\";\n    const isArrowDown = key === \"ArrowDown\";\n    const isArrowUp = key === \"ArrowUp\";\n    const isSpaceOrEnter = isSpaceKey || isEnterKey;\n    const zeroIndexedPageNumber = page - 1;\n    const currentIndex = row.index + zeroIndexedPageNumber * resultsPerPage;\n\n    if (isEscapeKey) {\n      resetDraggingAndHoveredRow(table);\n      return;\n    }\n\n    if (isSpaceOrEnter) {\n      event.preventDefault();\n      event.stopPropagation();\n    }\n\n    if (draggingRow) {\n      if (typeof hoveredRow?.index === \"number\") {\n        const { index } = hoveredRow;\n\n        if (isSpaceOrEnter) {\n          const pageRelativeIndex =\n            index + zeroIndexedPageNumber * resultsPerPage;\n\n          if (pageRelativeIndex !== currentIndex) {\n            updateRowOrder({\n              rowId: row.id,\n              newRowIndex: pageRelativeIndex,\n            });\n\n            // Can't transition CSS hover effect. Use timeout to delay hovered row effect removal\n            setTimeout(() => {\n              resetDraggingAndHoveredRow(table);\n            }, odysseyDesignTokens.TransitionDurationMainAsNumber);\n            return;\n          }\n        }\n\n        if (isArrowDown || isArrowUp) {\n          const nextIndex = isArrowDown ? index + 1 : index - 1;\n          getRowFromTableAndSetHovered(table, data[nextIndex]?.id);\n        }\n      } else {\n        if (isArrowDown || isArrowUp) {\n          const nextIndex = isArrowDown ? row.index + 1 : row.index - 1;\n          getRowFromTableAndSetHovered(table, data[nextIndex]?.id);\n        }\n      }\n    } else {\n      if (isSpaceOrEnter) {\n        setDraggingRow(row);\n      }\n    }\n  };\n\n  const handleDragHandleOnDragEnd = (table: MRT_TableInstance<MRT_RowData>) => {\n    const cols = table.getAllColumns();\n    cols[0].toggleVisibility();\n\n    const { draggingRow, hoveredRow } = table.getState();\n    if (draggingRow) {\n      updateRowOrder({\n        rowId: draggingRow.id,\n        newRowIndex: (hoveredRow as MRT_RowData).index,\n      });\n    }\n\n    setDraggingRow(null);\n  };\n\n  const handleDragHandleOnDragCapture = (\n    table: MRT_TableInstance<MRT_RowData>,\n  ) => {\n    if (!draggingRow && table.getState().draggingRow?.id) {\n      setDraggingRow(table.getState().draggingRow);\n    }\n  };\n\n  const resetDraggingAndHoveredRow = (\n    table: MRT_TableInstance<MRT_RowData>,\n  ) => {\n    setDraggingRow(null);\n    table.setHoveredRow(null);\n  };\n\n  return {\n    dragHandleStyles,\n    dragHandleText,\n    draggableTableBodyRowClassName,\n    handleDragHandleKeyDown,\n    handleDragHandleOnDragCapture,\n    handleDragHandleOnDragEnd,\n    resetDraggingAndHoveredRow,\n    updateRowOrder,\n  };\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAVA,SAcSA,sBAAsB;AAAA,SACtBC,sBAAsB;AAG/B,OAAO,MAAMC,gBAAgB,GAAGA,CAAC;EAC/BC,SAAS;EACTC,aAAa;EACbC,IAAI;EACJC,OAAO;EACPC,WAAW;EACXC,cAAc;EACdC,cAAc;EACdC;AAYF,CAAC,KAAK;EACJ,MAAMC,cAAc,GAAGA,CAAC;IACtBC,KAAK;IACLC;EAIF,CAAC,KAAK;IACJ,IAAIA,WAAW,GAAG,CAAC,EAAE;MACnB;IACF;IAEA,IAAIV,SAAS,IAAIU,WAAW,GAAGV,SAAS,EAAE;MACxC;IACF;IAEA,MAAMW,OAAO,GAAGd,sBAAsB,CAAC;MACrCe,WAAW,EAAEV,IAAI;MACjBO,KAAK;MACLC;IACF,CAAC,CAAC;IAEFP,OAAO,CAACQ,OAAO,CAAC;IAChBV,aAAa,GAAG;MAAEQ,KAAK;MAAEC;IAAY,CAAC,CAAC;EACzC,CAAC;EAED,MAAMG,mBAAmB,GAAGf,sBAAsB,CAAC,CAAC;EACpD,MAAMgB,gBAAgB,GAAG;IACvBC,OAAO,EAAEF,mBAAmB,CAACG,QAAQ;IACrCC,YAAY,EAAEJ,mBAAmB,CAACK,gBAAgB;IAElD,iBAAiB,EAAE;MACjBC,SAAS,EAAG,aAAYN,mBAAmB,CAACO,eAAgB,eAAcP,mBAAmB,CAACQ,kBAAmB,EAAC;MAClHC,OAAO,EAAE,uBAAuB;MAChCC,aAAa,EAAE;IACjB;EACF,CAAC;EAED,MAAMC,cAAc,GAAG;IACrBC,KAAK,EAAE,gEAAgE;IACvE,YAAY,EACV;EACJ,CAAC;EAED,MAAMC,8BAA8B,GAAGA,CAAC;IACtCC,YAAY;IACZC,aAAa;IACbC;EAKF,CAAC,KAAK;IACJ,IAAID,aAAa,KAAKD,YAAY,IAAIE,YAAY,KAAKF,YAAY,EAAE;MACnE,OAAO,YAAY;IACrB;IAEA,IAAIE,YAAY,KAAKF,YAAY,IAAIC,aAAa,KAAKD,YAAY,EAAE;MACnE,OAAO,cAAc;IACvB;IAEA,IAAIC,aAAa,KAAKD,YAAY,IAAIE,YAAY,KAAKF,YAAY,EAAE;MACnE,OAAO,yBAAyB;IAClC;IAEA,OAAOG,SAAS;EAClB,CAAC;EAED,MAAMC,4BAA4B,GAAGA,CACnCC,KAAqC,EACrCC,EAAqB,KAClB;IACH,IAAIA,EAAE,EAAE;MACN,MAAMC,OAAoB,GAAGF,KAAK,CAACG,MAAM,CAACF,EAAE,CAAC;MAE7C,IAAIC,OAAO,EAAE;QACXF,KAAK,CAACI,aAAa,CAACF,OAAO,CAAC;MAC9B;IACF;EACF,CAAC;EAQD,MAAMG,uBAAuB,GAAGA,CAAC;IAC/BL,KAAK;IACLM,GAAG;IACHC;EAC2B,CAAC,KAAK;IACjC,MAAM;MAAEC;IAAW,CAAC,GAAGR,KAAK,CAACS,QAAQ,CAAC,CAAC;IAEvC,MAAM;MAAEC;IAAI,CAAC,GAAGH,KAAK;IAErB,MAAMI,UAAU,GAAGD,GAAG,KAAK,GAAG;IAC9B,MAAME,UAAU,GAAGF,GAAG,KAAK,OAAO;IAClC,MAAMG,WAAW,GAAGH,GAAG,KAAK,QAAQ;IACpC,MAAMI,WAAW,GAAGJ,GAAG,KAAK,WAAW;IACvC,MAAMK,SAAS,GAAGL,GAAG,KAAK,SAAS;IACnC,MAAMM,cAAc,GAAGL,UAAU,IAAIC,UAAU;IAC/C,MAAMK,qBAAqB,GAAG1C,IAAI,GAAG,CAAC;IACtC,MAAM2C,YAAY,GAAGZ,GAAG,CAACa,KAAK,GAAGF,qBAAqB,GAAG3C,cAAc;IAEvE,IAAIuC,WAAW,EAAE;MACfO,0BAA0B,CAACpB,KAAK,CAAC;MACjC;IACF;IAEA,IAAIgB,cAAc,EAAE;MAClBT,KAAK,CAACc,cAAc,CAAC,CAAC;MACtBd,KAAK,CAACe,eAAe,CAAC,CAAC;IACzB;IAEA,IAAIlD,WAAW,EAAE;MACf,IAAI,OAAOoC,UAAU,EAAEW,KAAK,KAAK,QAAQ,EAAE;QACzC,MAAM;UAAEA;QAAM,CAAC,GAAGX,UAAU;QAE5B,IAAIQ,cAAc,EAAE;UAClB,MAAMO,iBAAiB,GACrBJ,KAAK,GAAGF,qBAAqB,GAAG3C,cAAc;UAEhD,IAAIiD,iBAAiB,KAAKL,YAAY,EAAE;YACtC1C,cAAc,CAAC;cACbC,KAAK,EAAE6B,GAAG,CAACL,EAAE;cACbvB,WAAW,EAAE6C;YACf,CAAC,CAAC;YAGFC,UAAU,CAAC,MAAM;cACfJ,0BAA0B,CAACpB,KAAK,CAAC;YACnC,CAAC,EAAEnB,mBAAmB,CAAC4C,8BAA8B,CAAC;YACtD;UACF;QACF;QAEA,IAAIX,WAAW,IAAIC,SAAS,EAAE;UAC5B,MAAMW,SAAS,GAAGZ,WAAW,GAAGK,KAAK,GAAG,CAAC,GAAGA,KAAK,GAAG,CAAC;UACrDpB,4BAA4B,CAACC,KAAK,EAAE9B,IAAI,CAACwD,SAAS,CAAC,EAAEzB,EAAE,CAAC;QAC1D;MACF,CAAC,MAAM;QACL,IAAIa,WAAW,IAAIC,SAAS,EAAE;UAC5B,MAAMW,SAAS,GAAGZ,WAAW,GAAGR,GAAG,CAACa,KAAK,GAAG,CAAC,GAAGb,GAAG,CAACa,KAAK,GAAG,CAAC;UAC7DpB,4BAA4B,CAACC,KAAK,EAAE9B,IAAI,CAACwD,SAAS,CAAC,EAAEzB,EAAE,CAAC;QAC1D;MACF;IACF,CAAC,MAAM;MACL,IAAIe,cAAc,EAAE;QAClB3C,cAAc,CAACiC,GAAG,CAAC;MACrB;IACF;EACF,CAAC;EAED,MAAMqB,yBAAyB,GAAI3B,KAAqC,IAAK;IAC3E,MAAM4B,IAAI,GAAG5B,KAAK,CAAC6B,aAAa,CAAC,CAAC;IAClCD,IAAI,CAAC,CAAC,CAAC,CAACE,gBAAgB,CAAC,CAAC;IAE1B,MAAM;MAAE1D,WAAW;MAAEoC;IAAW,CAAC,GAAGR,KAAK,CAACS,QAAQ,CAAC,CAAC;IACpD,IAAIrC,WAAW,EAAE;MACfI,cAAc,CAAC;QACbC,KAAK,EAAEL,WAAW,CAAC6B,EAAE;QACrBvB,WAAW,EAAG8B,UAAU,CAAiBW;MAC3C,CAAC,CAAC;IACJ;IAEA9C,cAAc,CAAC,IAAI,CAAC;EACtB,CAAC;EAED,MAAM0D,6BAA6B,GACjC/B,KAAqC,IAClC;IACH,IAAI,CAAC5B,WAAW,IAAI4B,KAAK,CAACS,QAAQ,CAAC,CAAC,CAACrC,WAAW,EAAE6B,EAAE,EAAE;MACpD5B,cAAc,CAAC2B,KAAK,CAACS,QAAQ,CAAC,CAAC,CAACrC,WAAW,CAAC;IAC9C;EACF,CAAC;EAED,MAAMgD,0BAA0B,GAC9BpB,KAAqC,IAClC;IACH3B,cAAc,CAAC,IAAI,CAAC;IACpB2B,KAAK,CAACI,aAAa,CAAC,IAAI,CAAC;EAC3B,CAAC;EAED,OAAO;IACLtB,gBAAgB;IAChBU,cAAc;IACdE,8BAA8B;IAC9BW,uBAAuB;IACvB0B,6BAA6B;IAC7BJ,yBAAyB;IACzBP,0BAA0B;IAC1B5C;EACF,CAAC;AACH,CAAC"}

package/dist/index.js

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

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["deepmerge","visuallyHidden","createTheme","DialogContentText","Divider","InputAdornment","InputBase","ListItemIcon","ListItemText","ListSubheader","MenuList","Paper","ScopedCssBaseline","ThemeProvider","useOdysseyDesignTokens","odysseyTranslate"],"sources":["../src/index.ts"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nexport { deepmerge, visuallyHidden } from \"@mui/utils\";\n\nexport {\n  createTheme,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  DialogContentText,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  Divider,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  InputAdornment,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  InputBase,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  ListItemIcon,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  ListItemText,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  ListSubheader,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  MenuList,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  Paper,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  ScopedCssBaseline,\n  ThemeProvider,\n} from \"@mui/material\";\n\nexport type {\n  CssBaselineProps,\n  DialogContentTextProps,\n  DividerProps,\n  InputAdornmentProps,\n  InputBaseProps,\n  ListItemIconProps,\n  ListItemTextProps,\n  ListSubheaderProps,\n  MenuListProps,\n  PaperProps,\n  ScopedCssBaselineProps,\n  ThemeOptions,\n} from \"@mui/material\";\n\nexport type { FocusHandle } from \"./inputUtils\";\nexport { useOdysseyDesignTokens } from \"./OdysseyDesignTokensContext\";\n\nexport * from \"./Accordion\";\nexport * from \"./Autocomplete\";\nexport * from \"./Banner\";\nexport * from \"./Box\";\nexport * from \"./Breadcrumbs\";\nexport * from \"./Button\";\nexport * from \"./Tile\";\nexport * from \"./Callout\";\nexport * from \"./Checkbox\";\nexport * from \"./CheckboxGroup\";\nexport * from \"./CircularProgress\";\nexport * from \"./CssBaseline\";\nexport * from \"./createShadowRootElement\";\nexport * from \"./createUniqueId\";\nexport * from \"./Dialog\";\nexport * from \"./Fieldset\";\nexport * from \"./FieldComponentProps\";\nexport * from \"./Form\";\nexport * from \"./HintLink\";\nexport * from \"./IconWithTooltip\";\nexport * from \"./Link\";\nexport * from \"./MenuButton\";\nexport * from \"./MenuItem\";\nexport * from \"./NativeSelect\";\nexport * from \"./NullElement\";\nexport * from \"./OdysseyCacheProvider\";\nexport { odysseyTranslate } from \"./i18n\";\nexport * from \"./OdysseyProvider\";\nexport * from \"./OdysseyThemeProvider\";\nexport * from \"./OdysseyTranslationProvider\";\nexport * from \"./PasswordField\";\nexport * from \"./Radio\";\nexport * from \"./RadioGroup\";\nexport * from \"./ScreenReaderText\";\nexport * from \"./SearchField\";\nexport * from \"./Select\";\nexport * from \"./Status\";\nexport * from \"./Tabs\";\nexport * from \"./Tag\";\nexport * from \"./TagList\";\nexport * from \"./TextField\";\nexport * from \"./theme\";\nexport * from \"./Toast\";\nexport * from \"./ToastStack\";\nexport * from \"./labs/Switch\";\nexport * from \"./Tooltip\";\nexport * from \"./Typography\";\nexport * from \"./useUniqueId\";\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,SAAS,EAAEC,cAAc,QAAQ,YAAY;AAEtD,SACEC,WAAW,EAEXC,iBAAiB,EAEjBC,OAAO,EAEPC,cAAc,EAEdC,SAAS,EAETC,YAAY,EAEZC,YAAY,EAEZC,aAAa,EAEbC,QAAQ,EAERC,KAAK,EAELC,iBAAiB,EACjBC,aAAa,QACR,eAAe;AAAC,SAkBdC,sBAAsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SA4BtBC,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA"}
+{"version":3,"file":"index.js","names":["deepmerge","visuallyHidden","createTheme","DialogContentText","Divider","InputAdornment","InputBase","ListItemIcon","ListItemText","ListSubheader","MenuList","Paper","ScopedCssBaseline","ThemeProvider","useOdysseyDesignTokens","odysseyTranslate"],"sources":["../src/index.ts"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nexport { deepmerge, visuallyHidden } from \"@mui/utils\";\n\nexport {\n  createTheme,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  DialogContentText,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  Divider,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  InputAdornment,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  InputBase,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  ListItemIcon,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  ListItemText,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  ListSubheader,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  MenuList,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  Paper,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  ScopedCssBaseline,\n  ThemeProvider,\n} from \"@mui/material\";\n\nexport type {\n  CssBaselineProps,\n  DialogContentTextProps,\n  DividerProps,\n  InputAdornmentProps,\n  InputBaseProps,\n  ListItemIconProps,\n  ListItemTextProps,\n  ListSubheaderProps,\n  MenuListProps,\n  PaperProps,\n  ScopedCssBaselineProps,\n  ThemeOptions,\n} from \"@mui/material\";\n\nexport type { FocusHandle } from \"./inputUtils\";\nexport { useOdysseyDesignTokens } from \"./OdysseyDesignTokensContext\";\n\nexport * from \"./Accordion\";\nexport * from \"./Autocomplete\";\nexport * from \"./Banner\";\nexport * from \"./Box\";\nexport * from \"./Breadcrumbs\";\nexport * from \"./Button\";\nexport * from \"./Tile\";\nexport * from \"./Callout\";\nexport * from \"./Checkbox\";\nexport * from \"./CheckboxGroup\";\nexport * from \"./CircularProgress\";\nexport * from \"./CssBaseline\";\nexport * from \"./createShadowRootElement\";\nexport * from \"./createUniqueId\";\nexport * from \"./DataTable\";\nexport * from \"./Dialog\";\nexport * from \"./Fieldset\";\nexport * from \"./FieldComponentProps\";\nexport * from \"./Form\";\nexport * from \"./HintLink\";\nexport * from \"./IconWithTooltip\";\nexport * from \"./Link\";\nexport * from \"./MenuButton\";\nexport * from \"./MenuItem\";\nexport * from \"./NativeSelect\";\nexport * from \"./NullElement\";\nexport * from \"./OdysseyCacheProvider\";\nexport { odysseyTranslate } from \"./i18n\";\nexport * from \"./OdysseyProvider\";\nexport * from \"./OdysseyThemeProvider\";\nexport * from \"./OdysseyTranslationProvider\";\nexport * from \"./PasswordField\";\nexport * from \"./Radio\";\nexport * from \"./RadioGroup\";\nexport * from \"./ScreenReaderText\";\nexport * from \"./SearchField\";\nexport * from \"./Select\";\nexport * from \"./Status\";\nexport * from \"./Tabs\";\nexport * from \"./Tag\";\nexport * from \"./TagList\";\nexport * from \"./TextField\";\nexport * from \"./theme\";\nexport * from \"./Toast\";\nexport * from \"./ToastStack\";\nexport * from \"./labs/Switch\";\nexport * from \"./Tooltip\";\nexport * from \"./Typography\";\nexport * from \"./useUniqueId\";\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,SAAS,EAAEC,cAAc,QAAQ,YAAY;AAEtD,SACEC,WAAW,EAEXC,iBAAiB,EAEjBC,OAAO,EAEPC,cAAc,EAEdC,SAAS,EAETC,YAAY,EAEZC,YAAY,EAEZC,aAAa,EAEbC,QAAQ,EAERC,KAAK,EAELC,iBAAiB,EACjBC,aAAa,QACR,eAAe;AAAC,SAkBdC,sBAAsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SA6BtBC,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA"}

package/dist/labs/DataFilters.js

@@ -1,6 +1,8 @@
 import _Popover from "@mui/material/Popover";
 import _IconButton from "@mui/material/IconButton";
 import _Menu from "@mui/material/Menu";
+import _MenuItem from "@mui/material/MenuItem";
+import _Typography from "@mui/material/Typography";
 /*!
  * 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.")
@@ -22,13 +24,13 @@ import { Tag } from "../Tag.js";
 import { SearchField } from "../SearchField.js";
 import { Button } from "../Button.js";
 import { CheckIcon, ChevronRightIcon, CloseCircleFilledIcon, FilterIcon } from "../icons.generated/index.js";
-import { MenuItem } from "../MenuItem.js";
-import { Paragraph, Subordinate } from "../Typography.js";
+import { Subordinate } from "../Typography.js";
 import { TextField } from "../TextField.js";
 import { CheckboxGroup } from "../CheckboxGroup.js";
 import { Checkbox } from "../Checkbox.js";
 import { RadioGroup } from "../RadioGroup.js";
 import { Radio } from "../Radio.js";
+import { Trans, useTranslation } from "react-i18next";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -42,6 +44,9 @@ const DataFilters = ({
   filters: filtersProp = []
 }) => {
   const [filters, setFilters] = useState(filtersProp);
+  const {
+    t
+  } = useTranslation();
   const initialInputValues = useMemo(() => {
     return filtersProp.reduce((accumulator, filter) => {
       accumulator[filter.id] = filter.value;
@@ -162,7 +167,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: _jsx(FilterIcon, {}),
         onClick: event => {
           setFiltersMenuAnchorElement(event.currentTarget);
@@ -188,37 +193,55 @@ const DataFilters = ({
       },
       children: filtersProp.map(filter => {
         const latestFilterValue = filters.find(f => f.id === filter.id)?.value;
-        return _jsx(MenuItem, {
+        return _jsx(_MenuItem, {
           onClick: event => {
             setIsFilterPopoverOpen(true);
             setFilterPopoverAnchorElement(event.currentTarget);
             setFilterPopoverCurrentFilter(filter);
           },
+          selected: filterPopoverCurrentFilter === filter && isFilterPopoverOpen === true,
+          className: filterPopoverCurrentFilter === filter && isFilterPopoverOpen === true ? "isVisiblySelected" : undefined,
           children: _jsxs(Box, {
             sx: {
               display: "flex",
               alignItems: "center",
               justifyContent: "space-between",
               width: "100%",
-              minWidth: 180
+              minWidth: 180,
+              paddingBlock: 1,
+              paddingInlineStart: 2
             },
             children: [_jsxs(Box, {
               sx: {
                 marginRight: 2
               },
-              children: [_jsx(Paragraph, {
-                component: "div",
+              children: [_jsx(_Typography, {
+                fontWeight: "500",
+                sx: {
+                  marginBlockEnd: 2
+                },
                 children: filter.label
               }), _jsx(Subordinate, {
                 component: "div",
-                children: !latestFilterValue || Array.isArray(latestFilterValue) && latestFilterValue.length === 0 ? `Any ${filter.label.toLowerCase()}` : Array.isArray(latestFilterValue) ? `${latestFilterValue.length} selected` : latestFilterValue
+                children: !latestFilterValue || Array.isArray(latestFilterValue) && latestFilterValue.length === 0 ? _jsx(Trans, {
+                  i18nKey: "filters.menuitem.any",
+                  values: {
+                    label: filter.label.toLowerCase()
+                  }
+                }) : Array.isArray(latestFilterValue) ? _jsx(Trans, {
+                  count: latestFilterValue.length,
+                  i18nKey: "filters.menuitem.selected",
+                  values: {
+                    selected: latestFilterValue.length
+                  }
+                }) : latestFilterValue
               })]
             }), _jsx(ChevronRightIcon, {})]
           })
         }, filter.id);
       })
     })]
-  }), [isFiltersMenuOpen, filtersMenuAnchorElement, filtersProp, filters]);
+  }), [isFiltersMenuOpen, filterPopoverCurrentFilter, isFilterPopoverOpen, filtersMenuAnchorElement, filtersProp, filters, t]);
   return _jsxs(Box, {
     children: [_jsxs(Box, {
       sx: {
@@ -235,6 +258,11 @@ const DataFilters = ({
         children: [filters.length > 0 && _jsxs(_Fragment, {
           children: [filterMenu, _jsx(_Popover, {
             anchorEl: filterPopoverAnchorElement,
+            elevation: 2,
+            sx: {
+              marginLeft: 2,
+              marginTop: -1
+            },
             open: isFilterPopoverOpen,
             anchorOrigin: {
               vertical: "top",
@@ -306,7 +334,7 @@ const DataFilters = ({
                       }),
                       endAdornment: inputValues[filterPopoverCurrentFilter.id] && _jsx(_IconButton, {
                         size: "small",
-                        "aria-label": "Clear filter",
+                        "aria-label": t("filters.filter.clear"),
                         onClick: () => {
                           updateInputValue({
                             filterId: filterPopoverCurrentFilter.id,
@@ -347,7 +375,7 @@ const DataFilters = ({
                     });
                   },
                   children: [_jsx(Radio, {
-                    label: "Any",
+                    label: t("filters.filter.any"),
                     value: "",
                     isChecked: !inputValues[filterPopoverCurrentFilter.id]
                   }), _jsx(_Fragment, {
@@ -379,7 +407,7 @@ const DataFilters = ({
             },
             children: [_jsx(SearchField, {
               value: searchValue,
-              label: "Search",
+              label: t("filters.search.label"),
               onClear: () => {
                 setSearchValue("");
                 onChangeSearch("");
@@ -388,7 +416,7 @@ const DataFilters = ({
             }), hasSearchSubmitButton && _jsx(Box, {
               children: _jsx(Button, {
                 variant: "primary",
-                label: "Search",
+                label: t("filters.search.label"),
                 onClick: () => onChangeSearch(searchValue)
               })
             })]
@@ -402,7 +430,7 @@ const DataFilters = ({
         children: [activeFilters.length > 0 && _jsx(Box, {
           children: _jsx(Button, {
             variant: "secondary",
-            label: "Clear filters",
+            label: t("filters.clear.label"),
             onClick: clearAllFilters
           })
         }), additionalActions]