@okta/odyssey-react-mui 1.14.2 → 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":"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"}

package/dist/IconWithTooltip.js

@@ -0,0 +1,63 @@
+import _Tooltip from "@mui/material/Tooltip";
+/*!
+ * 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 } from "react";
+import styled from "@emotion/styled";
+import { InformationCircleIcon } from "./icons.generated/index.js";
+import { useMuiProps } from "./MuiPropsContext.js";
+import { useOdysseyDesignTokens } from "./OdysseyDesignTokensContext.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const IconContainer = styled.span(({
+  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"
+  }
+}));
+const IconWithTooltip = ({
+  IconComponent = _jsx(InformationCircleIcon, {}),
+  placement = "right",
+  testId,
+  tooltipText,
+  translate
+}) => {
+  const muiProps = useMuiProps();
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+  return _jsx(_Tooltip, {
+    "data-se": testId,
+    describeChild: true,
+    placement: placement,
+    tabIndex: 0,
+    title: tooltipText,
+    translate: translate,
+    children: _jsx(IconContainer, {
+      odysseyDesignTokens: odysseyDesignTokens,
+      ...muiProps,
+      children: IconComponent
+    })
+  });
+};
+const MemoizedIconWithTooltip = memo(IconWithTooltip);
+MemoizedIconWithTooltip.displayName = "IconWithTooltip";
+export { MemoizedIconWithTooltip as IconWithTooltip };
+//# sourceMappingURL=IconWithTooltip.js.map

package/dist/IconWithTooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconWithTooltip.js","names":["memo","styled","InformationCircleIcon","useMuiProps","useOdysseyDesignTokens","jsx","_jsx","IconContainer","span","odysseyDesignTokens","display","transitionProperty","transitionDuration","TransitionDurationMain","border","borderColor","FocusOutlineColorPrimary","boxShadow","outline","FocusOutlineWidthMain","FocusOutlineStyle","outlineOffset","FocusOutlineOffsetTight","svg","IconWithTooltip","IconComponent","placement","testId","tooltipText","translate","muiProps","_Tooltip","describeChild","tabIndex","title","children","MemoizedIconWithTooltip","displayName"],"sources":["../src/IconWithTooltip.tsx"],"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\nimport { memo, ReactNode } from \"react\";\nimport styled from \"@emotion/styled\";\nimport { Tooltip as MuiTooltip } from \"@mui/material\";\nimport type { TooltipProps as MuiTooltipProps } from \"@mui/material\";\n\nimport { HtmlProps } from \"./HtmlProps\";\nimport { InformationCircleIcon } from \"./icons.generated\";\nimport { useMuiProps } from \"./MuiPropsContext\";\nimport {\n  useOdysseyDesignTokens,\n  DesignTokens,\n} from \"./OdysseyDesignTokensContext\";\n\nconst IconContainer = styled.span<{\n  odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens }) => ({\n  display: \"inline-flex\",\n  transitionProperty: \"border-color, box-shadow, outline\",\n  transitionDuration: odysseyDesignTokens.TransitionDurationMain,\n  border: \"1px solid transparent\",\n\n  \"&:focus, &:focus-visible\": {\n    borderColor: odysseyDesignTokens.FocusOutlineColorPrimary,\n    boxShadow: `0 0 0 1px ${odysseyDesignTokens.FocusOutlineColorPrimary}`,\n    outline: `${odysseyDesignTokens.FocusOutlineWidthMain} ${odysseyDesignTokens.FocusOutlineStyle} transparent`,\n    outlineOffset: odysseyDesignTokens.FocusOutlineOffsetTight,\n  },\n\n  svg: {\n    display: \"flex\",\n  },\n}));\n\nexport type IconWithTooltipProps = {\n  /**\n   * The icon to render. Defaults to `InformationCircleIcon`\n   */\n  IconComponent?: ReactNode;\n  /**\n   * The placement of the Tooltip\n   */\n  placement?: MuiTooltipProps[\"placement\"];\n  /**\n   * The text to display in the Tooltip\n   */\n  tooltipText: string;\n} & Pick<HtmlProps, \"testId\" | \"translate\">;\n\nconst IconWithTooltip = ({\n  IconComponent = <InformationCircleIcon />,\n  placement = \"right\",\n  testId,\n  tooltipText,\n  translate,\n}: IconWithTooltipProps) => {\n  const muiProps = useMuiProps();\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  return (\n    <MuiTooltip\n      data-se={testId}\n      describeChild\n      placement={placement}\n      tabIndex={0}\n      title={tooltipText}\n      translate={translate}\n    >\n      <IconContainer odysseyDesignTokens={odysseyDesignTokens} {...muiProps}>\n        {IconComponent}\n      </IconContainer>\n    </MuiTooltip>\n  );\n};\n\nconst MemoizedIconWithTooltip = memo(IconWithTooltip);\nMemoizedIconWithTooltip.displayName = \"IconWithTooltip\";\n\nexport { MemoizedIconWithTooltip as IconWithTooltip };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,QAAmB,OAAO;AACvC,OAAOC,MAAM,MAAM,iBAAiB;AAAC,SAK5BC,qBAAqB;AAAA,SACrBC,WAAW;AAAA,SAElBC,sBAAsB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAIxB,MAAMC,aAAa,GAAGN,MAAM,CAACO,IAAI,CAE9B,CAAC;EAAEC;AAAoB,CAAC,MAAM;EAC/BC,OAAO,EAAE,aAAa;EACtBC,kBAAkB,EAAE,mCAAmC;EACvDC,kBAAkB,EAAEH,mBAAmB,CAACI,sBAAsB;EAC9DC,MAAM,EAAE,uBAAuB;EAE/B,0BAA0B,EAAE;IAC1BC,WAAW,EAAEN,mBAAmB,CAACO,wBAAwB;IACzDC,SAAS,EAAG,aAAYR,mBAAmB,CAACO,wBAAyB,EAAC;IACtEE,OAAO,EAAG,GAAET,mBAAmB,CAACU,qBAAsB,IAAGV,mBAAmB,CAACW,iBAAkB,cAAa;IAC5GC,aAAa,EAAEZ,mBAAmB,CAACa;EACrC,CAAC;EAEDC,GAAG,EAAE;IACHb,OAAO,EAAE;EACX;AACF,CAAC,CAAC,CAAC;AAiBH,MAAMc,eAAe,GAAGA,CAAC;EACvBC,aAAa,GAAGnB,IAAA,CAACJ,qBAAqB,IAAE,CAAC;EACzCwB,SAAS,GAAG,OAAO;EACnBC,MAAM;EACNC,WAAW;EACXC;AACoB,CAAC,KAAK;EAC1B,MAAMC,QAAQ,GAAG3B,WAAW,CAAC,CAAC;EAC9B,MAAMM,mBAAmB,GAAGL,sBAAsB,CAAC,CAAC;EAEpD,OACEE,IAAA,CAAAyB,QAAA;IACE,WAASJ,MAAO;IAChBK,aAAa;IACbN,SAAS,EAAEA,SAAU;IACrBO,QAAQ,EAAE,CAAE;IACZC,KAAK,EAAEN,WAAY;IACnBC,SAAS,EAAEA,SAAU;IAAAM,QAAA,EAErB7B,IAAA,CAACC,aAAa;MAACE,mBAAmB,EAAEA,mBAAoB;MAAA,GAAKqB,QAAQ;MAAAK,QAAA,EAClEV;IAAa,CACD;EAAC,CACN,CAAC;AAEjB,CAAC;AAED,MAAMW,uBAAuB,GAAGpC,IAAI,CAACwB,eAAe,CAAC;AACrDY,uBAAuB,CAACC,WAAW,GAAG,iBAAiB;AAEvD,SAASD,uBAAuB,IAAIZ,eAAe"}

package/dist/index.js

@@ -27,11 +27,13 @@ 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";
 export * from "./Form.js";
 export * from "./HintLink.js";
+export * from "./IconWithTooltip.js";
 export * from "./Link.js";
 export * from "./MenuButton.js";
 export * from "./MenuItem.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 \"./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,SA2BtBC,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]