@okta/odyssey-react-mui 1.14.4 → 1.14.5

package/dist/DataTable/DataTablePagination.js

@@ -0,0 +1,221 @@
+import _InputBase from "@mui/material/InputBase";
+/*!
+ * 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 { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Paragraph } from "../Typography.js";
+import { Button } from "../Button.js";
+import { ArrowLeftIcon, ArrowRightIcon } from "../icons.generated/index.js";
+import styled from "@emotion/styled";
+import { useOdysseyDesignTokens } from "../OdysseyDesignTokensContext.js";
+import { Box } from "../Box.js";
+import { Trans, useTranslation } from "react-i18next";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const PaginationContainer = styled("div")({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between"
+});
+const PaginationSegment = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})(({
+  odysseyDesignTokens
+}) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: odysseyDesignTokens.Spacing4,
+  "& > div": {
+    display: "flex",
+    alignItems: "center",
+    gap: odysseyDesignTokens.Spacing2
+  }
+}));
+const PaginationInput = styled(_InputBase, {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})(({
+  odysseyDesignTokens
+}) => ({
+  borderColor: odysseyDesignTokens.HueNeutral200,
+  borderRadius: odysseyDesignTokens.BorderRadiusTight,
+  height: odysseyDesignTokens.Spacing6,
+  width: "4.5714285714rem",
+  "&:hover": {
+    borderColor: odysseyDesignTokens.HueNeutral400
+  },
+  "&.Mui-focused:hover": {
+    borderColor: odysseyDesignTokens.PalettePrimaryMain
+  }
+}));
+const PaginationButtonContainer = styled("div")({
+  "& > *": {
+    marginInlineStart: `0 !important`
+  }
+});
+const DataTablePagination = ({
+  pagination,
+  setPagination,
+  totalRows,
+  isDisabled,
+  variant
+}) => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+  const {
+    t
+  } = useTranslation();
+  const [page, setPage] = useState(pagination.pageIndex);
+  const [rowsPerPage, setRowsPerPage] = useState(pagination.pageSize);
+  const initialRowsPerPage = useRef(pagination.pageSize);
+  const firstRow = pagination.pageSize * (pagination.pageIndex - 1) + 1;
+  let lastRow = firstRow + (pagination.pageSize - 1);
+  lastRow = totalRows && lastRow > totalRows ? totalRows : lastRow;
+  useEffect(() => {
+    setPage(pagination.pageIndex);
+    setRowsPerPage(pagination.pageSize);
+  }, [pagination]);
+  const handlePaginationChange = useCallback(() => {
+    const updatedPage = totalRows && page * totalRows > lastRow ? Math.ceil(totalRows / rowsPerPage) : page;
+    const updatedRowsPerPage = totalRows && rowsPerPage > totalRows ? totalRows : rowsPerPage;
+    setPagination({
+      pageIndex: updatedPage,
+      pageSize: updatedRowsPerPage
+    });
+  }, [page, rowsPerPage, lastRow, setPagination, totalRows]);
+  const handlePageSubmit = useCallback(event => {
+    if (event.key === "Enter") {
+      setPagination({
+        pageIndex: parseInt(event.currentTarget.value),
+        pageSize: rowsPerPage
+      });
+    }
+  }, [rowsPerPage, setPagination]);
+  const handleRowsPerPageSubmit = useCallback(event => {
+    if (event.key === "Enter") {
+      setPagination({
+        pageIndex: page,
+        pageSize: parseInt(event.currentTarget.value)
+      });
+    }
+  }, [page, setPagination]);
+  const setPageFromEvent = useCallback(event => {
+    setPage(parseInt(event.target.value));
+  }, [setPage]);
+  const setRowsPerPageFromEvent = useCallback(event => {
+    setRowsPerPage(parseInt(event.target.value));
+  }, [setRowsPerPage]);
+  const handleLoadMore = useCallback(() => {
+    setPagination({
+      pageIndex: 1,
+      pageSize: rowsPerPage + initialRowsPerPage.current
+    });
+  }, [rowsPerPage, setPagination]);
+  const handleNextButton = useCallback(() => {
+    setPagination({
+      pageIndex: page + 1,
+      pageSize: rowsPerPage
+    });
+  }, [setPagination, page, rowsPerPage]);
+  const handlePreviousButton = useCallback(() => {
+    setPagination({
+      pageIndex: page - 1,
+      pageSize: rowsPerPage
+    });
+  }, [setPagination, page, rowsPerPage]);
+  const loadMoreIsDisabled = useMemo(() => {
+    return totalRows ? rowsPerPage >= totalRows : false;
+  }, [rowsPerPage, totalRows]);
+  const nextButtonDisabled = useMemo(() => (totalRows ? lastRow >= totalRows : false) || isDisabled, [totalRows, lastRow, isDisabled]);
+  const previousButtonDisabled = useMemo(() => pagination.pageIndex <= 1 || isDisabled, [pagination, isDisabled]);
+  return variant === "paged" ? _jsxs(PaginationContainer, {
+    children: [_jsxs(PaginationSegment, {
+      odysseyDesignTokens: odysseyDesignTokens,
+      children: [_jsxs(Box, {
+        children: [_jsx(Paragraph, {
+          component: "span",
+          color: "textSecondary",
+          children: t("table.pagination.rowsperpage")
+        }), _jsx(PaginationInput, {
+          odysseyDesignTokens: odysseyDesignTokens,
+          type: "number",
+          value: rowsPerPage,
+          onChange: setRowsPerPageFromEvent,
+          onBlur: handlePaginationChange,
+          onKeyDown: handleRowsPerPageSubmit,
+          disabled: isDisabled,
+          inputProps: {
+            "aria-label": t("table.pagination.rowsperpage")
+          }
+        })]
+      }), _jsx(Paragraph, {
+        component: "span",
+        color: "textSecondary",
+        children: totalRows ? _jsx(Trans, {
+          i18nKey: "table.pagination.rowswithtotal",
+          values: {
+            firstRow,
+            lastRow,
+            totalRows
+          }
+        }) : _jsx(Trans, {
+          i18nKey: "table.pagination.rowswithouttotal",
+          values: {
+            firstRow,
+            lastRow
+          }
+        })
+      })]
+    }), _jsxs(PaginationSegment, {
+      odysseyDesignTokens: odysseyDesignTokens,
+      children: [totalRows && _jsxs(Box, {
+        children: [_jsx(Paragraph, {
+          component: "span",
+          color: "textSecondary",
+          children: t("table.pagination.page")
+        }), _jsx(PaginationInput, {
+          odysseyDesignTokens: odysseyDesignTokens,
+          type: "number",
+          value: page,
+          onChange: setPageFromEvent,
+          onBlur: handlePaginationChange,
+          onKeyDown: handlePageSubmit,
+          disabled: isDisabled,
+          inputProps: {
+            "aria-label": t("table.pagination.page")
+          }
+        })]
+      }), _jsxs(PaginationButtonContainer, {
+        children: [_jsx(Button, {
+          startIcon: _jsx(ArrowLeftIcon, {}),
+          variant: "floating",
+          size: "small",
+          ariaLabel: t("table.pagination.previous"),
+          onClick: handlePreviousButton,
+          isDisabled: previousButtonDisabled
+        }), _jsx(Button, {
+          endIcon: _jsx(ArrowRightIcon, {}),
+          variant: "floating",
+          size: "small",
+          ariaLabel: t("table.pagination.next"),
+          onClick: handleNextButton,
+          isDisabled: nextButtonDisabled
+        })]
+      })]
+    })]
+  }) : _jsx(Button, {
+    variant: "secondary",
+    label: t("table.pagination.loadmore"),
+    onClick: handleLoadMore,
+    isDisabled: loadMoreIsDisabled
+  });
+};
+const MemoizedDataTablePagination = memo(DataTablePagination);
+export { MemoizedDataTablePagination as DataTablePagination };
+//# sourceMappingURL=DataTablePagination.js.map

package/dist/DataTable/DataTablePagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTablePagination.js","names":["memo","useCallback","useEffect","useMemo","useRef","useState","Paragraph","Button","ArrowLeftIcon","ArrowRightIcon","styled","useOdysseyDesignTokens","Box","Trans","useTranslation","jsx","_jsx","jsxs","_jsxs","PaginationContainer","display","alignItems","justifyContent","PaginationSegment","shouldForwardProp","prop","odysseyDesignTokens","gap","Spacing4","Spacing2","PaginationInput","_InputBase","borderColor","HueNeutral200","borderRadius","BorderRadiusTight","height","Spacing6","width","HueNeutral400","PalettePrimaryMain","PaginationButtonContainer","marginInlineStart","DataTablePagination","pagination","setPagination","totalRows","isDisabled","variant","t","page","setPage","pageIndex","rowsPerPage","setRowsPerPage","pageSize","initialRowsPerPage","firstRow","lastRow","handlePaginationChange","updatedPage","Math","ceil","updatedRowsPerPage","handlePageSubmit","event","key","parseInt","currentTarget","value","handleRowsPerPageSubmit","setPageFromEvent","target","setRowsPerPageFromEvent","handleLoadMore","current","handleNextButton","handlePreviousButton","loadMoreIsDisabled","nextButtonDisabled","previousButtonDisabled","children","component","color","type","onChange","onBlur","onKeyDown","disabled","inputProps","i18nKey","values","startIcon","size","ariaLabel","onClick","endIcon","label","MemoizedDataTablePagination"],"sources":["../../src/DataTable/DataTablePagination.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 { InputBase } from \"@mui/material\";\nimport {\n  Dispatch,\n  SetStateAction,\n  memo,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { Paragraph } from \"../Typography\";\nimport { Button } from \"../Button\";\nimport { ArrowLeftIcon, ArrowRightIcon } from \"../icons.generated\";\nimport styled from \"@emotion/styled\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../OdysseyDesignTokensContext\";\nimport { Box } from \"../Box\";\nimport { Trans, useTranslation } from \"react-i18next\";\nimport { paginationTypeValues } from \"./constants\";\n\nconst PaginationContainer = styled(\"div\")({\n  display: \"flex\",\n  alignItems: \"center\",\n  justifyContent: \"space-between\",\n});\n\nconst PaginationSegment = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({\n  display: \"flex\",\n  alignItems: \"center\",\n  gap: odysseyDesignTokens.Spacing4,\n  \"& > div\": {\n    display: \"flex\",\n    alignItems: \"center\",\n    gap: odysseyDesignTokens.Spacing2,\n  },\n}));\n\nconst PaginationInput = styled(InputBase, {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({\n  borderColor: odysseyDesignTokens.HueNeutral200,\n  borderRadius: odysseyDesignTokens.BorderRadiusTight,\n  height: odysseyDesignTokens.Spacing6,\n  width: \"4.5714285714rem\", // This is a hardcoded value, keep as string\n  \"&:hover\": {\n    borderColor: odysseyDesignTokens.HueNeutral400,\n  },\n  \"&.Mui-focused:hover\": {\n    borderColor: odysseyDesignTokens.PalettePrimaryMain,\n  },\n}));\n\nconst PaginationButtonContainer = styled(\"div\")({\n  \"& > *\": {\n    marginInlineStart: `0 !important`,\n  },\n});\n\nexport type DataTablePaginationProps = {\n  pagination: {\n    pageIndex: number;\n    pageSize: number;\n  };\n  setPagination: Dispatch<\n    SetStateAction<{ pageIndex: number; pageSize: number }>\n  >;\n  totalRows?: number;\n  isDisabled?: boolean;\n  /**\n   * The type of pagination controls shown. Defaults to next/prev buttons, but can be\n   * set to a simple \"Load more\" button by setting to \"loadMore\".\n   */\n  variant?: (typeof paginationTypeValues)[number];\n};\n\nconst DataTablePagination = ({\n  pagination,\n  setPagination,\n  totalRows,\n  isDisabled,\n  variant,\n}: DataTablePaginationProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n  const { t } = useTranslation();\n\n  const [page, setPage] = useState<number>(pagination.pageIndex);\n  const [rowsPerPage, setRowsPerPage] = useState<number>(pagination.pageSize);\n  const initialRowsPerPage = useRef<number>(pagination.pageSize);\n\n  const firstRow = pagination.pageSize * (pagination.pageIndex - 1) + 1;\n  let lastRow = firstRow + (pagination.pageSize - 1);\n  // If the last eligible row is greater than the number of total rows,\n  // show the number of total rows instead (ie, if we're showing rows\n  // 180-200 but there are only 190 rows, show 180-190 instead)\n  lastRow = totalRows && lastRow > totalRows ? totalRows : lastRow;\n\n  useEffect(() => {\n    setPage(pagination.pageIndex);\n    setRowsPerPage(pagination.pageSize);\n  }, [pagination]);\n\n  const handlePaginationChange = useCallback(() => {\n    const updatedPage =\n      totalRows && page * totalRows > lastRow\n        ? Math.ceil(totalRows / rowsPerPage)\n        : page;\n    const updatedRowsPerPage =\n      totalRows && rowsPerPage > totalRows ? totalRows : rowsPerPage;\n\n    setPagination({\n      pageIndex: updatedPage,\n      pageSize: updatedRowsPerPage,\n    });\n  }, [page, rowsPerPage, lastRow, setPagination, totalRows]);\n\n  // The following handlers use React.KeyboardEvent (rather than just KeyboardEvent) becuase React.KeyboardEvent\n  // is generic, while plain KeyboardEvent is not. We need this generic so we can specify the HTMLInputElement,\n  // which allows us to use currentTarget.value\n  const handlePageSubmit = useCallback(\n    (event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n      if (event.key === \"Enter\") {\n        setPagination({\n          pageIndex: parseInt(event.currentTarget.value),\n          pageSize: rowsPerPage,\n        });\n      }\n    },\n    [rowsPerPage, setPagination],\n  );\n\n  const handleRowsPerPageSubmit = useCallback(\n    (event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n      if (event.key === \"Enter\") {\n        setPagination({\n          pageIndex: page,\n          pageSize: parseInt(event.currentTarget.value),\n        });\n      }\n    },\n    [page, setPagination],\n  );\n\n  const setPageFromEvent = useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      setPage(parseInt(event.target.value));\n    },\n    [setPage],\n  );\n\n  const setRowsPerPageFromEvent = useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      setRowsPerPage(parseInt(event.target.value));\n    },\n    [setRowsPerPage],\n  );\n\n  const handleLoadMore = useCallback(() => {\n    setPagination({\n      pageIndex: 1,\n      pageSize: rowsPerPage + initialRowsPerPage.current,\n    });\n  }, [rowsPerPage, setPagination]);\n\n  const handleNextButton = useCallback(() => {\n    setPagination({ pageIndex: page + 1, pageSize: rowsPerPage });\n  }, [setPagination, page, rowsPerPage]);\n\n  const handlePreviousButton = useCallback(() => {\n    setPagination({ pageIndex: page - 1, pageSize: rowsPerPage });\n  }, [setPagination, page, rowsPerPage]);\n\n  const loadMoreIsDisabled = useMemo(() => {\n    return totalRows ? rowsPerPage >= totalRows : false;\n  }, [rowsPerPage, totalRows]);\n\n  const nextButtonDisabled = useMemo(\n    () => (totalRows ? lastRow >= totalRows : false) || isDisabled,\n    [totalRows, lastRow, isDisabled],\n  );\n\n  const previousButtonDisabled = useMemo(\n    () => pagination.pageIndex <= 1 || isDisabled,\n    [pagination, isDisabled],\n  );\n\n  return variant === \"paged\" ? (\n    <PaginationContainer>\n      <PaginationSegment odysseyDesignTokens={odysseyDesignTokens}>\n        <Box>\n          <Paragraph component=\"span\" color=\"textSecondary\">\n            {t(\"table.pagination.rowsperpage\")}\n          </Paragraph>\n          <PaginationInput\n            odysseyDesignTokens={odysseyDesignTokens}\n            type=\"number\"\n            value={rowsPerPage}\n            onChange={setRowsPerPageFromEvent}\n            onBlur={handlePaginationChange}\n            onKeyDown={handleRowsPerPageSubmit}\n            disabled={isDisabled}\n            inputProps={{\n              \"aria-label\": t(\"table.pagination.rowsperpage\"),\n            }}\n          />\n        </Box>\n        <Paragraph component=\"span\" color=\"textSecondary\">\n          {totalRows ? (\n            <Trans\n              i18nKey=\"table.pagination.rowswithtotal\"\n              values={{ firstRow, lastRow, totalRows }}\n            />\n          ) : (\n            <Trans\n              i18nKey=\"table.pagination.rowswithouttotal\"\n              values={{ firstRow, lastRow }}\n            />\n          )}\n        </Paragraph>\n      </PaginationSegment>\n\n      <PaginationSegment odysseyDesignTokens={odysseyDesignTokens}>\n        {totalRows && (\n          <Box>\n            <Paragraph component=\"span\" color=\"textSecondary\">\n              {t(\"table.pagination.page\")}\n            </Paragraph>\n            <PaginationInput\n              odysseyDesignTokens={odysseyDesignTokens}\n              type=\"number\"\n              value={page}\n              onChange={setPageFromEvent}\n              onBlur={handlePaginationChange}\n              onKeyDown={handlePageSubmit}\n              disabled={isDisabled}\n              inputProps={{\n                \"aria-label\": t(\"table.pagination.page\"),\n              }}\n            />\n          </Box>\n        )}\n        <PaginationButtonContainer>\n          <Button\n            startIcon={<ArrowLeftIcon />}\n            variant=\"floating\"\n            size=\"small\"\n            ariaLabel={t(\"table.pagination.previous\")}\n            onClick={handlePreviousButton}\n            isDisabled={previousButtonDisabled}\n          />\n          <Button\n            endIcon={<ArrowRightIcon />}\n            variant=\"floating\"\n            size=\"small\"\n            ariaLabel={t(\"table.pagination.next\")}\n            onClick={handleNextButton}\n            isDisabled={nextButtonDisabled}\n          />\n        </PaginationButtonContainer>\n      </PaginationSegment>\n    </PaginationContainer>\n  ) : (\n    <Button\n      variant=\"secondary\"\n      label={t(\"table.pagination.loadmore\")}\n      onClick={handleLoadMore}\n      isDisabled={loadMoreIsDisabled}\n    />\n  );\n};\n\nconst MemoizedDataTablePagination = memo(DataTablePagination);\nexport { MemoizedDataTablePagination as DataTablePagination };\n"],"mappings":"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"}

package/dist/DataTable/DataTableRowActions.js

@@ -11,7 +11,7 @@ import _Box from "@mui/material/Box";
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { memo } from "react";
+import { memo, useCallback } from "react";
 import { MenuItem } from "../MenuItem.js";
 import { MenuButton } from "../MenuButton.js";
 import { ArrowBottomIcon, ArrowDownIcon, ArrowTopIcon, ArrowUpIcon, MoreIcon } from "../icons.generated/index.js";
@@ -30,6 +30,30 @@ const DataTableRowActions = ({
   const {
     t
   } = useTranslation();
+  const handleToFrontClick = useCallback(() => {
+    updateRowOrder && updateRowOrder({
+      rowId: row.id,
+      newRowIndex: 0
+    });
+  }, [row.id, updateRowOrder]);
+  const handleForwardClick = useCallback(() => {
+    updateRowOrder && updateRowOrder({
+      rowId: row.id,
+      newRowIndex: Math.max(0, rowIndex - 1)
+    });
+  }, [row.id, rowIndex, updateRowOrder]);
+  const handleBackwardClick = useCallback(() => {
+    updateRowOrder && updateRowOrder({
+      rowId: row.id,
+      newRowIndex: rowIndex + 1
+    });
+  }, [row.id, rowIndex, updateRowOrder]);
+  const handleToBackClick = useCallback(() => {
+    updateRowOrder && updateRowOrder({
+      rowId: row.id,
+      newRowIndex: totalRows ? totalRows - 1 : rowIndex
+    });
+  }, [row.id, rowIndex, totalRows, updateRowOrder]);
   return _jsxs(_Box, {
     display: "flex",
     children: [rowActionButtons?.(row), (rowActionMenuItems || updateRowOrder) && _jsxs(MenuButton, {
@@ -43,42 +67,28 @@ const DataTableRowActions = ({
       }), rowActionMenuItems && updateRowOrder && _jsx("hr", {}), updateRowOrder && _jsxs(_Fragment, {
         children: [_jsxs(MenuItem, {
           isDisabled: rowIndex <= 0,
-          onClick: () => updateRowOrder({
-            rowId: row.id,
-            newRowIndex: 0
-          }),
+          onClick: handleToFrontClick,
           children: [_jsx(ArrowTopIcon, {}), " ", _jsx(Trans, {
             i18nKey: "table.reorder.tofront"
           })]
         }), _jsxs(MenuItem, {
           isDisabled: rowIndex <= 0,
-          onClick: () => updateRowOrder({
-            rowId: row.id,
-            newRowIndex: rowIndex <= 0 ? 0 : rowIndex - 1
-          }),
+          onClick: handleForwardClick,
           children: [_jsx(ArrowUpIcon, {}), " ", _jsx(Trans, {
             i18nKey: "table.reorder.forward"
           })]
         }), _jsxs(MenuItem, {
           isDisabled: totalRows ? rowIndex >= totalRows - 1 : false,
-          onClick: () => updateRowOrder({
-            rowId: row.id,
-            newRowIndex: rowIndex + 1
-          }),
+          onClick: handleBackwardClick,
           children: [_jsx(ArrowDownIcon, {}), " ", _jsx(Trans, {
             i18nKey: "table.reorder.backward"
           })]
-        }), _jsx(_Fragment, {
-          children: totalRows && _jsxs(MenuItem, {
-            isDisabled: rowIndex >= totalRows - 1,
-            onClick: () => updateRowOrder({
-              rowId: row.id,
-              newRowIndex: totalRows
-            }),
-            children: [_jsx(ArrowBottomIcon, {}), " ", _jsx(Trans, {
-              i18nKey: "table.reorder.toback"
-            })]
-          })
+        }), totalRows && _jsxs(MenuItem, {
+          isDisabled: rowIndex >= totalRows - 1,
+          onClick: handleToBackClick,
+          children: [_jsx(ArrowBottomIcon, {}), " ", _jsx(Trans, {
+            i18nKey: "table.reorder.toback"
+          })]
         })]
       })]
     })]

package/dist/DataTable/DataTableRowActions.js.map

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

package/dist/DataTable/DataTableSettings.js

@@ -11,7 +11,7 @@ import _Checkbox from "@mui/material/Checkbox";
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { memo } from "react";
+import { memo, useCallback, useMemo } from "react";
 import { MenuButton } from "../MenuButton.js";
 import { MenuItem } from "../MenuItem.js";
 import { ListIcon, ShowIcon } from "../icons.generated/index.js";
@@ -32,6 +32,24 @@ const DataTableSettings = ({
   const {
     t
   } = useTranslation();
+  const changeRowDensity = useCallback(value => _event => {
+    if (process.env.NODE_ENV === "development") console.debug(_event);
+    setRowDensity(value);
+  }, [setRowDensity]);
+  const changeColumnVisibility = useCallback(columnId => _event => {
+    if (process.env.NODE_ENV === "development") console.debug(_event);
+    setColumnVisibility(prevVisibility => ({
+      ...prevVisibility,
+      [columnId]: prevVisibility ? prevVisibility[columnId] === false : false
+    }));
+  }, [setColumnVisibility]);
+  const isColumnVisibilityChecked = useMemo(() => {
+    return columns.reduce((acc, column) => {
+      const isChecked = columnVisibility ? columnVisibility[column.accessorKey] !== false : true;
+      acc[column.accessorKey] = isChecked;
+      return acc;
+    }, {});
+  }, [columns, columnVisibility]);
   return _jsxs(_Fragment, {
     children: [hasChangeableDensity && _jsx(MenuButton, {
       endIcon: _jsx(ListIcon, {}),
@@ -41,7 +59,7 @@ const DataTableSettings = ({
       children: _jsx(_Fragment, {
         children: densityValues.map(value => _jsx(MenuItem, {
           isSelected: rowDensity === value,
-          onClick: () => setRowDensity(value),
+          onClick: changeRowDensity(value),
           children: `${value.charAt(0).toUpperCase()}${value.slice(1)}`
         }, value))
       })
@@ -52,15 +70,9 @@ const DataTableSettings = ({
       shouldCloseOnSelect: false,
       children: _jsx(_Fragment, {
         children: columns.filter(column => column.enableHiding !== false).map(column => _jsxs(MenuItem, {
-          onClick: () => {
-            const columnId = column.id;
-            setColumnVisibility(prevVisibility => ({
-              ...prevVisibility,
-              [columnId]: prevVisibility ? prevVisibility[columnId] === false : false
-            }));
-          },
+          onClick: changeColumnVisibility(column.id),
           children: [_jsx(_Checkbox, {
-            checked: columnVisibility ? columnVisibility[column.accessorKey] !== false : true
+            checked: isColumnVisibilityChecked[column.accessorKey]
           }), column.header]
         }, column.accessorKey))
       })

package/dist/DataTable/DataTableSettings.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTableSettings.js","names":["memo","MenuButton","MenuItem","ListIcon","ShowIcon","densityValues","useTranslation","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","DataTableSettings","hasChangeableDensity","rowDensity","setRowDensity","hasColumnVisibility","columns","columnVisibility","setColumnVisibility","t","children","endIcon","ariaLabel","menuAlignment","shouldCloseOnSelect","map","value","isSelected","onClick","charAt","toUpperCase","slice","filter","column","enableHiding","columnId","id","prevVisibility","_Checkbox","checked","accessorKey","header","MemoizedDataTableSettings"],"sources":["../../src/DataTable/DataTableSettings.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, memo } from \"react\";\nimport { Checkbox as MuiCheckbox } from \"@mui/material\";\nimport { MenuButton } from \"../MenuButton\";\nimport { MenuItem } from \"../MenuItem\";\nimport { ListIcon, ShowIcon } from \"../icons.generated\";\nimport { densityValues } from \"./constants\";\nimport { DataTableProps } from \"./DataTable\";\nimport { MRT_VisibilityState } from \"material-react-table\";\nimport { useTranslation } from \"react-i18next\";\n\nexport type DataTableSettingsProps = {\n  hasChangeableDensity: DataTableProps[\"hasChangeableDensity\"];\n  rowDensity: (typeof densityValues)[number];\n  setRowDensity: Dispatch<SetStateAction<(typeof densityValues)[number]>>;\n  hasColumnVisibility: DataTableProps[\"hasColumnVisibility\"];\n  columns: DataTableProps[\"columns\"];\n  columnVisibility?: MRT_VisibilityState;\n  setColumnVisibility: Dispatch<\n    SetStateAction<MRT_VisibilityState | undefined>\n  >;\n};\n\nconst DataTableSettings = ({\n  hasChangeableDensity,\n  rowDensity,\n  setRowDensity,\n  hasColumnVisibility,\n  columns,\n  columnVisibility,\n  setColumnVisibility,\n}: DataTableSettingsProps) => {\n  const { t } = useTranslation();\n  return (\n    <>\n      {hasChangeableDensity && (\n        <MenuButton\n          endIcon={<ListIcon />}\n          ariaLabel={t(\"table.density.arialabel\")}\n          menuAlignment=\"right\"\n          shouldCloseOnSelect={false}\n        >\n          <>\n            {densityValues.map((value: (typeof densityValues)[number]) => (\n              <MenuItem\n                key={value}\n                isSelected={rowDensity === value}\n                onClick={() => setRowDensity(value)}\n              >\n                {`${value.charAt(0).toUpperCase()}${value.slice(1)}`}\n              </MenuItem>\n            ))}\n          </>\n        </MenuButton>\n      )}\n\n      {hasColumnVisibility && (\n        <MenuButton\n          endIcon={<ShowIcon />}\n          ariaLabel={t(\"table.columnvisibility.arialabel\")}\n          menuAlignment=\"right\"\n          shouldCloseOnSelect={false}\n        >\n          <>\n            {columns\n              .filter((column) => column.enableHiding !== false)\n              .map((column) => (\n                <MenuItem\n                  key={column.accessorKey}\n                  onClick={() => {\n                    const columnId = column.id as string;\n                    setColumnVisibility((prevVisibility) => ({\n                      ...prevVisibility,\n                      [columnId]: prevVisibility\n                        ? prevVisibility[columnId] === false\n                        : false,\n                    }));\n                  }}\n                >\n                  <MuiCheckbox\n                    checked={\n                      columnVisibility\n                        ? columnVisibility[column.accessorKey as string] !==\n                          false\n                        : true\n                    }\n                  />\n                  {column.header}\n                </MenuItem>\n              ))}\n          </>\n        </MenuButton>\n      )}\n    </>\n  );\n};\nconst MemoizedDataTableSettings = memo(DataTableSettings);\nexport { MemoizedDataTableSettings as DataTableSettings };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAAmCA,IAAI,QAAQ,OAAO;AAAC,SAE9CC,UAAU;AAAA,SACVC,QAAQ;AAAA,SACRC,QAAQ,EAAEC,QAAQ;AAAA,SAClBC,aAAa;AAGtB,SAASC,cAAc,QAAQ,eAAe;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,QAAA,IAAAC,SAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAc/C,MAAMC,iBAAiB,GAAGA,CAAC;EACzBC,oBAAoB;EACpBC,UAAU;EACVC,aAAa;EACbC,mBAAmB;EACnBC,OAAO;EACPC,gBAAgB;EAChBC;AACsB,CAAC,KAAK;EAC5B,MAAM;IAAEC;EAAE,CAAC,GAAGf,cAAc,CAAC,CAAC;EAC9B,OACEM,KAAA,CAAAF,SAAA;IAAAY,QAAA,GACGR,oBAAoB,IACnBN,IAAA,CAACP,UAAU;MACTsB,OAAO,EAAEf,IAAA,CAACL,QAAQ,IAAE,CAAE;MACtBqB,SAAS,EAAEH,CAAC,CAAC,yBAAyB,CAAE;MACxCI,aAAa,EAAC,OAAO;MACrBC,mBAAmB,EAAE,KAAM;MAAAJ,QAAA,EAE3Bd,IAAA,CAAAE,SAAA;QAAAY,QAAA,EACGjB,aAAa,CAACsB,GAAG,CAAEC,KAAqC,IACvDpB,IAAA,CAACN,QAAQ;UAEP2B,UAAU,EAAEd,UAAU,KAAKa,KAAM;UACjCE,OAAO,EAAEA,CAAA,KAAMd,aAAa,CAACY,KAAK,CAAE;UAAAN,QAAA,EAElC,GAAEM,KAAK,CAACG,MAAM,CAAC,CAAC,CAAC,CAACC,WAAW,CAAC,CAAE,GAAEJ,KAAK,CAACK,KAAK,CAAC,CAAC,CAAE;QAAC,GAJ/CL,KAKG,CACX;MAAC,CACF;IAAC,CACO,CACb,EAEAX,mBAAmB,IAClBT,IAAA,CAACP,UAAU;MACTsB,OAAO,EAAEf,IAAA,CAACJ,QAAQ,IAAE,CAAE;MACtBoB,SAAS,EAAEH,CAAC,CAAC,kCAAkC,CAAE;MACjDI,aAAa,EAAC,OAAO;MACrBC,mBAAmB,EAAE,KAAM;MAAAJ,QAAA,EAE3Bd,IAAA,CAAAE,SAAA;QAAAY,QAAA,EACGJ,OAAO,CACLgB,MAAM,CAAEC,MAAM,IAAKA,MAAM,CAACC,YAAY,KAAK,KAAK,CAAC,CACjDT,GAAG,CAAEQ,MAAM,IACVvB,KAAA,CAACV,QAAQ;UAEP4B,OAAO,EAAEA,CAAA,KAAM;YACb,MAAMO,QAAQ,GAAGF,MAAM,CAACG,EAAY;YACpClB,mBAAmB,CAAEmB,cAAc,KAAM;cACvC,GAAGA,cAAc;cACjB,CAACF,QAAQ,GAAGE,cAAc,GACtBA,cAAc,CAACF,QAAQ,CAAC,KAAK,KAAK,GAClC;YACN,CAAC,CAAC,CAAC;UACL,CAAE;UAAAf,QAAA,GAEFd,IAAA,CAAAgC,SAAA;YACEC,OAAO,EACLtB,gBAAgB,GACZA,gBAAgB,CAACgB,MAAM,CAACO,WAAW,CAAW,KAC9C,KAAK,GACL;UACL,CACF,CAAC,EACDP,MAAM,CAACQ,MAAM;QAAA,GAnBTR,MAAM,CAACO,WAoBJ,CACX;MAAC,CACJ;IAAC,CACO,CACb;EAAA,CACD,CAAC;AAEP,CAAC;AACD,MAAME,yBAAyB,GAAG5C,IAAI,CAACa,iBAAiB,CAAC;AACzD,SAAS+B,yBAAyB,IAAI/B,iBAAiB"}
+{"version":3,"file":"DataTableSettings.js","names":["memo","useCallback","useMemo","MenuButton","MenuItem","ListIcon","ShowIcon","densityValues","useTranslation","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","DataTableSettings","hasChangeableDensity","rowDensity","setRowDensity","hasColumnVisibility","columns","columnVisibility","setColumnVisibility","t","changeRowDensity","value","_event","process","env","NODE_ENV","console","debug","changeColumnVisibility","columnId","prevVisibility","isColumnVisibilityChecked","reduce","acc","column","isChecked","accessorKey","children","endIcon","ariaLabel","menuAlignment","shouldCloseOnSelect","map","isSelected","onClick","charAt","toUpperCase","slice","filter","enableHiding","id","_Checkbox","checked","header","MemoizedDataTableSettings"],"sources":["../../src/DataTable/DataTableSettings.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, memo, useCallback, useMemo } from \"react\";\nimport { Checkbox as MuiCheckbox } from \"@mui/material\";\nimport { MenuButton } from \"../MenuButton\";\nimport { MenuItem } from \"../MenuItem\";\nimport { ListIcon, ShowIcon } from \"../icons.generated\";\nimport { densityValues } from \"./constants\";\nimport { DataTableProps } from \"./DataTable\";\nimport { MRT_VisibilityState } from \"material-react-table\";\nimport { useTranslation } from \"react-i18next\";\n\nexport type DataTableSettingsProps = {\n  hasChangeableDensity: DataTableProps[\"hasChangeableDensity\"];\n  rowDensity: (typeof densityValues)[number];\n  setRowDensity: Dispatch<SetStateAction<(typeof densityValues)[number]>>;\n  hasColumnVisibility: DataTableProps[\"hasColumnVisibility\"];\n  columns: DataTableProps[\"columns\"];\n  columnVisibility?: MRT_VisibilityState;\n  setColumnVisibility: Dispatch<\n    SetStateAction<MRT_VisibilityState | undefined>\n  >;\n};\n\nconst DataTableSettings = ({\n  hasChangeableDensity,\n  rowDensity,\n  setRowDensity,\n  hasColumnVisibility,\n  columns,\n  columnVisibility,\n  setColumnVisibility,\n}: DataTableSettingsProps) => {\n  const { t } = useTranslation();\n\n  const changeRowDensity = useCallback(\n    (value: (typeof densityValues)[number]) =>\n      (_event: React.MouseEvent<HTMLLIElement>) => {\n        // This is necessary to avoid linter errors, while the _event is necessary to satisfy the onClick type\n        if (process.env.NODE_ENV === \"development\") console.debug(_event);\n\n        setRowDensity(value);\n      },\n    [setRowDensity],\n  );\n\n  const changeColumnVisibility = useCallback(\n    (columnId: string) => (_event: React.MouseEvent<HTMLLIElement>) => {\n      // This is necessary to avoid linter errors, while the _event is necessary to satisfy the onClick type\n      if (process.env.NODE_ENV === \"development\") console.debug(_event);\n\n      setColumnVisibility((prevVisibility) => ({\n        ...prevVisibility,\n        [columnId]: prevVisibility ? prevVisibility[columnId] === false : false,\n      }));\n    },\n    [setColumnVisibility],\n  );\n\n  const isColumnVisibilityChecked = useMemo(() => {\n    return columns.reduce(\n      (acc, column) => {\n        const isChecked = columnVisibility\n          ? columnVisibility[column.accessorKey!] !== false\n          : true;\n        acc[column.accessorKey!] = isChecked;\n        return acc;\n      },\n      {} as Record<string, boolean>,\n    );\n  }, [columns, columnVisibility]);\n\n  return (\n    <>\n      {hasChangeableDensity && (\n        <MenuButton\n          endIcon={<ListIcon />}\n          ariaLabel={t(\"table.density.arialabel\")}\n          menuAlignment=\"right\"\n          shouldCloseOnSelect={false}\n        >\n          <>\n            {densityValues.map((value: (typeof densityValues)[number]) => (\n              <MenuItem\n                key={value}\n                isSelected={rowDensity === value}\n                onClick={changeRowDensity(value)}\n              >\n                {`${value.charAt(0).toUpperCase()}${value.slice(1)}`}\n              </MenuItem>\n            ))}\n          </>\n        </MenuButton>\n      )}\n\n      {hasColumnVisibility && (\n        <MenuButton\n          endIcon={<ShowIcon />}\n          ariaLabel={t(\"table.columnvisibility.arialabel\")}\n          menuAlignment=\"right\"\n          shouldCloseOnSelect={false}\n        >\n          <>\n            {columns\n              .filter((column) => column.enableHiding !== false)\n              .map((column) => (\n                <MenuItem\n                  key={column.accessorKey}\n                  onClick={changeColumnVisibility(column.id as string)}\n                >\n                  <MuiCheckbox\n                    checked={isColumnVisibilityChecked[column.accessorKey!]}\n                  />\n                  {column.header}\n                </MenuItem>\n              ))}\n          </>\n        </MenuButton>\n      )}\n    </>\n  );\n};\n\nconst MemoizedDataTableSettings = memo(DataTableSettings);\nexport { MemoizedDataTableSettings as DataTableSettings };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAAmCA,IAAI,EAAEC,WAAW,EAAEC,OAAO,QAAQ,OAAO;AAAC,SAEpEC,UAAU;AAAA,SACVC,QAAQ;AAAA,SACRC,QAAQ,EAAEC,QAAQ;AAAA,SAClBC,aAAa;AAGtB,SAASC,cAAc,QAAQ,eAAe;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,QAAA,IAAAC,SAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAc/C,MAAMC,iBAAiB,GAAGA,CAAC;EACzBC,oBAAoB;EACpBC,UAAU;EACVC,aAAa;EACbC,mBAAmB;EACnBC,OAAO;EACPC,gBAAgB;EAChBC;AACsB,CAAC,KAAK;EAC5B,MAAM;IAAEC;EAAE,CAAC,GAAGf,cAAc,CAAC,CAAC;EAE9B,MAAMgB,gBAAgB,GAAGvB,WAAW,CACjCwB,KAAqC,IACnCC,MAAuC,IAAK;IAE3C,IAAIC,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,aAAa,EAAEC,OAAO,CAACC,KAAK,CAACL,MAAM,CAAC;IAEjER,aAAa,CAACO,KAAK,CAAC;EACtB,CAAC,EACH,CAACP,aAAa,CAChB,CAAC;EAED,MAAMc,sBAAsB,GAAG/B,WAAW,CACvCgC,QAAgB,IAAMP,MAAuC,IAAK;IAEjE,IAAIC,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,aAAa,EAAEC,OAAO,CAACC,KAAK,CAACL,MAAM,CAAC;IAEjEJ,mBAAmB,CAAEY,cAAc,KAAM;MACvC,GAAGA,cAAc;MACjB,CAACD,QAAQ,GAAGC,cAAc,GAAGA,cAAc,CAACD,QAAQ,CAAC,KAAK,KAAK,GAAG;IACpE,CAAC,CAAC,CAAC;EACL,CAAC,EACD,CAACX,mBAAmB,CACtB,CAAC;EAED,MAAMa,yBAAyB,GAAGjC,OAAO,CAAC,MAAM;IAC9C,OAAOkB,OAAO,CAACgB,MAAM,CACnB,CAACC,GAAG,EAAEC,MAAM,KAAK;MACf,MAAMC,SAAS,GAAGlB,gBAAgB,GAC9BA,gBAAgB,CAACiB,MAAM,CAACE,WAAW,CAAE,KAAK,KAAK,GAC/C,IAAI;MACRH,GAAG,CAACC,MAAM,CAACE,WAAW,CAAE,GAAGD,SAAS;MACpC,OAAOF,GAAG;IACZ,CAAC,EACD,CAAC,CACH,CAAC;EACH,CAAC,EAAE,CAACjB,OAAO,EAAEC,gBAAgB,CAAC,CAAC;EAE/B,OACEP,KAAA,CAAAF,SAAA;IAAA6B,QAAA,GACGzB,oBAAoB,IACnBN,IAAA,CAACP,UAAU;MACTuC,OAAO,EAAEhC,IAAA,CAACL,QAAQ,IAAE,CAAE;MACtBsC,SAAS,EAAEpB,CAAC,CAAC,yBAAyB,CAAE;MACxCqB,aAAa,EAAC,OAAO;MACrBC,mBAAmB,EAAE,KAAM;MAAAJ,QAAA,EAE3B/B,IAAA,CAAAE,SAAA;QAAA6B,QAAA,EACGlC,aAAa,CAACuC,GAAG,CAAErB,KAAqC,IACvDf,IAAA,CAACN,QAAQ;UAEP2C,UAAU,EAAE9B,UAAU,KAAKQ,KAAM;UACjCuB,OAAO,EAAExB,gBAAgB,CAACC,KAAK,CAAE;UAAAgB,QAAA,EAE/B,GAAEhB,KAAK,CAACwB,MAAM,CAAC,CAAC,CAAC,CAACC,WAAW,CAAC,CAAE,GAAEzB,KAAK,CAAC0B,KAAK,CAAC,CAAC,CAAE;QAAC,GAJ/C1B,KAKG,CACX;MAAC,CACF;IAAC,CACO,CACb,EAEAN,mBAAmB,IAClBT,IAAA,CAACP,UAAU;MACTuC,OAAO,EAAEhC,IAAA,CAACJ,QAAQ,IAAE,CAAE;MACtBqC,SAAS,EAAEpB,CAAC,CAAC,kCAAkC,CAAE;MACjDqB,aAAa,EAAC,OAAO;MACrBC,mBAAmB,EAAE,KAAM;MAAAJ,QAAA,EAE3B/B,IAAA,CAAAE,SAAA;QAAA6B,QAAA,EACGrB,OAAO,CACLgC,MAAM,CAAEd,MAAM,IAAKA,MAAM,CAACe,YAAY,KAAK,KAAK,CAAC,CACjDP,GAAG,CAAER,MAAM,IACVxB,KAAA,CAACV,QAAQ;UAEP4C,OAAO,EAAEhB,sBAAsB,CAACM,MAAM,CAACgB,EAAY,CAAE;UAAAb,QAAA,GAErD/B,IAAA,CAAA6C,SAAA;YACEC,OAAO,EAAErB,yBAAyB,CAACG,MAAM,CAACE,WAAW;UAAG,CACzD,CAAC,EACDF,MAAM,CAACmB,MAAM;QAAA,GANTnB,MAAM,CAACE,WAOJ,CACX;MAAC,CACJ;IAAC,CACO,CACb;EAAA,CACD,CAAC;AAEP,CAAC;AAED,MAAMkB,yBAAyB,GAAG1D,IAAI,CAACe,iBAAiB,CAAC;AACzD,SAAS2C,yBAAyB,IAAI3C,iBAAiB"}

package/dist/DataTable/constants.js

@@ -11,4 +11,5 @@
  */
 
 export const densityValues = ["comfortable", "spacious", "compact"];
+export const paginationTypeValues = ["paged", "loadMore"];
 //# sourceMappingURL=constants.js.map

package/dist/DataTable/constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.js","names":["densityValues"],"sources":["../../src/DataTable/constants.ts"],"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\nexport const densityValues = [\"comfortable\", \"spacious\", \"compact\"] as const;\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAO,MAAMA,aAAa,GAAG,CAAC,aAAa,EAAE,UAAU,EAAE,SAAS,CAAU"}
+{"version":3,"file":"constants.js","names":["densityValues","paginationTypeValues"],"sources":["../../src/DataTable/constants.ts"],"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\nexport const densityValues = [\"comfortable\", \"spacious\", \"compact\"] as const;\nexport const paginationTypeValues = [\"paged\", \"loadMore\"] as const;\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAO,MAAMA,aAAa,GAAG,CAAC,aAAa,EAAE,UAAU,EAAE,SAAS,CAAU;AAC5E,OAAO,MAAMC,oBAAoB,GAAG,CAAC,OAAO,EAAE,UAAU,CAAU"}

package/dist/DataTable/index.js

@@ -10,5 +10,6 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 export { DataTable } from "./DataTable.js";
+export { DataTableEmptyState } from "./DataTableEmptyState.js";
 export { densityValues } from "./constants.js";
 //# sourceMappingURL=index.js.map

package/dist/DataTable/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["DataTable","densityValues"],"sources":["../../src/DataTable/index.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\nexport { DataTable, type DataTableProps } from \"./DataTable\";\nexport { densityValues } from \"./constants\";\nexport type {\n  MRT_ColumnFiltersState as DataTableFiltersState,\n  MRT_SortingState as DataTableSortingState,\n  MRT_RowSelectionState as DataTableRowSelectionState,\n  MRT_ColumnDef as DataTableColumn,\n  MRT_RowData as DataTableRowData,\n  MRT_Row as DataTableRow,\n} from \"material-react-table\";\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAVA,SAYSA,SAAS;AAAA,SACTC,aAAa"}
+{"version":3,"file":"index.js","names":["DataTable","DataTableEmptyState","densityValues"],"sources":["../../src/DataTable/index.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\nexport {\n  DataTable,\n  type DataTableProps,\n  type DataTableGetDataType,\n  type DataTableOnReorderRowsType,\n} from \"./DataTable\";\nexport { DataTableEmptyState } from \"./DataTableEmptyState\";\nexport { densityValues } from \"./constants\";\nexport type {\n  MRT_ColumnFiltersState as DataTableFiltersState,\n  MRT_SortingState as DataTableSortingState,\n  MRT_RowSelectionState as DataTableRowSelectionState,\n  MRT_ColumnDef as DataTableColumn,\n  MRT_RowData as DataTableRowData,\n  MRT_Row as DataTableRow,\n} from \"material-react-table\";\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAVA,SAaEA,SAAS;AAAA,SAKFC,mBAAmB;AAAA,SACnBC,aAAa"}

package/dist/DataTable/useRowReordering.js

@@ -72,7 +72,7 @@ export const useRowReordering = ({
     }
     return undefined;
   };
-  const getRowFromTableAndSetHovered = (table, id) => {
+  const setHoveredRow = (table, id) => {
     if (id) {
       const nextRow = table.getRow(id);
       if (nextRow) {
@@ -127,12 +127,12 @@ export const useRowReordering = ({
         }
         if (isArrowDown || isArrowUp) {
           const nextIndex = isArrowDown ? index + 1 : index - 1;
-          getRowFromTableAndSetHovered(table, data[nextIndex]?.id);
+          setHoveredRow(table, data[nextIndex]?.id);
         }
       } else {
         if (isArrowDown || isArrowUp) {
           const nextIndex = isArrowDown ? row.index + 1 : row.index - 1;
-          getRowFromTableAndSetHovered(table, data[nextIndex]?.id);
+          setHoveredRow(table, data[nextIndex]?.id);
         }
       }
     } else {

package/dist/DataTable/useRowReordering.js.map

@@ -1 +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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"}
+{"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","setHoveredRow","table","id","nextRow","getRow","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    // Needs to include the totalRows check because totalRows might not\n    // be set. If it isn't set, this whole check doesn't matter.\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 setHoveredRow = (\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          setHoveredRow(table, data[nextIndex]?.id);\n        }\n      } else {\n        if (isArrowDown || isArrowUp) {\n          const nextIndex = isArrowDown ? row.index + 1 : row.index - 1;\n          setHoveredRow(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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"}