@okta/odyssey-react-mui 1.43.0 → 1.45.0

package/dist/esm/DataTable/DataTableRowActions.js

@@ -10,11 +10,10 @@ import _Box from "@mui/material/Box";
  *
  * See the License for the specific language governing permissions and limitations under the License.
  */
-
 import { memo, useCallback } from "react";
+import { Trans, useTranslation } from "react-i18next";
 import { MenuButton, MenuItem } from "../Buttons/index.js";
 import { ArrowBottomIcon, ArrowDownIcon, ArrowTopIcon, ArrowUpIcon, MoreIcon } from "../icons.generated/index.js";
-import { Trans, useTranslation } from "react-i18next";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const DataTableRowActions = ({
   row,
@@ -62,11 +61,11 @@ const DataTableRowActions = ({
   return _jsxs(_Box, {
     display: "flex",
     children: [rowActionButtons?.(row), (rowActionMenuItems || updateRowOrder) && _jsxs(MenuButton, {
-      endIcon: _jsx(MoreIcon, {}),
-      size: "small",
-      buttonVariant: "floating",
       ariaLabel: t("table.moreactions.arialabel"),
+      buttonVariant: "floating",
+      endIcon: _jsx(MoreIcon, {}),
       menuAlignment: "right",
+      size: "small",
       children: [rowActionMenuItems && _jsx(_Fragment, {
         children: rowActionMenuItems(row)
       }), rowActionMenuItems && updateRowOrder && _jsx("hr", {}), updateRowOrder && _jsxs(_Fragment, {

package/dist/esm/DataTable/DataTableRowActions.js.map

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

package/dist/esm/DataTable/DataTableSettings.js

@@ -10,12 +10,11 @@ import _Checkbox from "@mui/material/Checkbox";
  *
  * See the License for the specific language governing permissions and limitations under the License.
  */
-
 import { memo, useCallback, useMemo } from "react";
+import { useTranslation } from "react-i18next";
 import { MenuButton, MenuItem } from "../Buttons/index.js";
 import { ListIcon, ShowIcon } from "../icons.generated/index.js";
 import { densityValues } from "./constants.js";
-import { useTranslation } from "react-i18next";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const DataTableSettings = ({
   hasChangeableDensity,
@@ -49,20 +48,20 @@ const DataTableSettings = ({
   }, [columns, columnVisibility]);
   return _jsxs(_Fragment, {
     children: [hasChangeableDensity && _jsx(MenuButton, {
-      endIcon: _jsx(ListIcon, {}),
       ariaLabel: t("table.density.arialabel"),
+      endIcon: _jsx(ListIcon, {}),
       menuAlignment: "right",
       shouldCloseOnSelect: false,
       children: _jsx(_Fragment, {
         children: densityValues.map(value => _jsx(MenuItem, {
           isSelected: rowDensity === value,
           onClick: changeRowDensity(value),
-          children: `${value.charAt(0).toUpperCase()}${value.slice(1)}`
+          children: t(`table.density.${value}`)
         }, value))
       })
     }), hasColumnVisibility && _jsx(MenuButton, {
-      endIcon: _jsx(ShowIcon, {}),
       ariaLabel: t("table.columnvisibility.arialabel"),
+      endIcon: _jsx(ShowIcon, {}),
       menuAlignment: "right",
       shouldCloseOnSelect: false,
       children: _jsx(_Fragment, {

package/dist/esm/DataTable/DataTableSettings.js.map

@@ -1 +1 @@
-{"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","displayName"],"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, MenuItem } from \"../Buttons/index.js\";\nimport { ListIcon, ShowIcon } from \"../icons.generated/index.js\";\nimport { densityValues } from \"./constants.js\";\nimport { DataTableProps } from \"./DataTable.js\";\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);\nMemoizedDataTableSettings.displayName = \"DataTableSettings\";\n\nexport { MemoizedDataTableSettings as DataTableSettings };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"DataTableSettings.js","names":["memo","useCallback","useMemo","useTranslation","MenuButton","MenuItem","ListIcon","ShowIcon","densityValues","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","ariaLabel","endIcon","menuAlignment","shouldCloseOnSelect","map","isSelected","onClick","filter","enableHiding","id","_Checkbox","checked","header","MemoizedDataTableSettings","displayName"],"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 { Checkbox as MuiCheckbox } from \"@mui/material\";\nimport { MRT_VisibilityState } from \"material-react-table\";\nimport { Dispatch, memo, SetStateAction, useCallback, useMemo } from \"react\";\nimport { useTranslation } from \"react-i18next\";\n\nimport { MenuButton, MenuItem } from \"../Buttons/index.js\";\nimport { ListIcon, ShowIcon } from \"../icons.generated/index.js\";\nimport { densityValues } from \"./constants.js\";\nimport { DataTableProps } from \"./DataTable.js\";\n\nexport type DataTableSettingsProps = {\n  columns: DataTableProps[\"columns\"];\n  columnVisibility?: MRT_VisibilityState;\n  hasChangeableDensity: DataTableProps[\"hasChangeableDensity\"];\n  hasColumnVisibility: DataTableProps[\"hasColumnVisibility\"];\n  rowDensity: (typeof densityValues)[number];\n  setColumnVisibility: Dispatch<\n    SetStateAction<MRT_VisibilityState | undefined>\n  >;\n  setRowDensity: Dispatch<SetStateAction<(typeof densityValues)[number]>>;\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          ariaLabel={t(\"table.density.arialabel\")}\n          endIcon={<ListIcon />}\n          menuAlignment=\"right\"\n          shouldCloseOnSelect={false}\n        >\n          <>\n            {densityValues.map((value: (typeof densityValues)[number]) => (\n              <MenuItem\n                isSelected={rowDensity === value}\n                key={value}\n                onClick={changeRowDensity(value)}\n              >\n                {t(`table.density.${value}`)}\n              </MenuItem>\n            ))}\n          </>\n        </MenuButton>\n      )}\n\n      {hasColumnVisibility && (\n        <MenuButton\n          ariaLabel={t(\"table.columnvisibility.arialabel\")}\n          endIcon={<ShowIcon />}\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);\nMemoizedDataTableSettings.displayName = \"DataTableSettings\";\n\nexport { MemoizedDataTableSettings as DataTableSettings };\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/DataTable/index.js

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

package/dist/esm/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 {\n  DataTable,\n  type DataTableColumn,\n  type DataTableProps,\n  type DataTableGetDataType,\n  type DataTableOnReorderRowsType,\n  type DataTableRenderDetailPanelType,\n} from \"./DataTable.js\";\nexport { densityValues } from \"./constants.js\";\nexport type {\n  MRT_ColumnFiltersState as DataTableFiltersState,\n  MRT_SortingState as DataTableSortingState,\n  MRT_RowSelectionState as DataTableRowSelectionState,\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;;AAEA,SACEA,SAAS,QAMJ,gBAAgB;AACvB,SAASC,aAAa,QAAQ,gBAAgB","ignoreList":[]}
+{"version":3,"file":"index.js","names":["densityValues","DataTable"],"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 { densityValues } from \"./constants.js\";\nexport {\n  DataTable,\n  type DataTableColumn,\n  type DataTableGetDataType,\n  type DataTableOnReorderRowsType,\n  type DataTableProps,\n  type DataTableRenderDetailPanelType,\n} from \"./DataTable.js\";\nexport type {\n  MRT_ColumnFiltersState as DataTableFiltersState,\n  MRT_Row as DataTableRow,\n  MRT_RowData as DataTableRowData,\n  MRT_RowSelectionState as DataTableRowSelectionState,\n  MRT_SortingState as DataTableSortingState,\n} from \"material-react-table\";\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,aAAa,QAAQ,gBAAgB;AAC9C,SACEC,SAAS,QAMJ,gBAAgB","ignoreList":[]}

package/dist/esm/DataTable/reorderDataRowsLocally.js.map

@@ -1 +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 = <TData extends MRT_RowData>({\n  currentData,\n  rowId,\n  newRowIndex,\n}: {\n  currentData: TData[];\n  rowId: string;\n  newRowIndex: number;\n}): TData[] => {\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,CAA4B;EAChEC,WAAW;EACXC,KAAK;EACLC;AAKF,CAAC,KAAc;EACb,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","ignoreList":[]}
+{"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 = <TData extends MRT_RowData>({\n  currentData,\n  rowId,\n  newRowIndex,\n}: {\n  currentData: TData[];\n  newRowIndex: number;\n  rowId: string;\n}): TData[] => {\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,CAA4B;EAChEC,WAAW;EACXC,KAAK;EACLC;AAKF,CAAC,KAAc;EACb,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","ignoreList":[]}

package/dist/esm/DataTable/useRowReordering.js

@@ -10,8 +10,9 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { reorderDataRowsLocally } from "./reorderDataRowsLocally.js";
+import { useTranslation } from "react-i18next";
 import { useOdysseyDesignTokens } from "../OdysseyDesignTokensContext.js";
+import { reorderDataRowsLocally } from "./reorderDataRowsLocally.js";
 export const useRowReordering = ({
   totalRows,
   onReorderRows,
@@ -22,6 +23,9 @@ export const useRowReordering = ({
   resultsPerPage,
   page
 }) => {
+  const {
+    t
+  } = useTranslation();
   const updateRowOrder = ({
     rowId,
     newRowIndex
@@ -54,8 +58,8 @@ export const useRowReordering = ({
     }
   };
   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."
+    title: t("table.draghandle.tooltip"),
+    "aria-label": t("table.draghandle.arialabel")
   };
   const draggableTableBodyRowClassName = ({
     currentRowId,

package/dist/esm/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","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.js\";\nimport { reorderDataRowsLocally } from \"./reorderDataRowsLocally.js\";\nimport { useOdysseyDesignTokens } from \"../OdysseyDesignTokensContext.js\";\nimport { MRT_Row, MRT_RowData, MRT_TableInstance } from \"material-react-table\";\n\nexport const useRowReordering = <TData extends MRT_RowData>({\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: TData[];\n  setData: Dispatch<SetStateAction<TData[]>>;\n  draggingRow?: MRT_Row<TData> | null;\n  setDraggingRow: Dispatch<SetStateAction<MRT_Row<TData> | null | undefined>>;\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    \"&: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 = (table: MRT_TableInstance<TData>, id: TData[\"id\"]) => {\n    if (id) {\n      // The `as MRT_Row<TData>` is necessary here to overcome some type/generic\n      // issues with the type of `setHoveredRow` defined by MRT. It's not ideal code,\n      // but it's the only way that works without a much larger rewrite.\n      const nextRow = table.getRow(id) as MRT_Row<TData>;\n\n      if (nextRow) {\n        table.setHoveredRow(nextRow);\n      }\n    }\n  };\n\n  type HandleDragHandleKeyDownArgs = {\n    table: MRT_TableInstance<TData>;\n    row: MRT_Row<TData>;\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          // This is a legacy file, and this type isn't a problem in `DataView` --Kevin Ghadyani\n          // eslint-disable-next-line @typescript-eslint/no-unsafe-argument\n          setHoveredRow(table, data[nextIndex]?.id);\n        }\n      } else {\n        if (isArrowDown || isArrowUp) {\n          const nextIndex = isArrowDown ? row.index + 1 : row.index - 1;\n          // This is a legacy file, and this type isn't a problem in `DataView` --Kevin Ghadyani\n          // eslint-disable-next-line @typescript-eslint/no-unsafe-argument\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<TData>) => {\n    const cols = table.getAllColumns();\n    cols[0].toggleVisibility();\n\n    const { draggingRow, hoveredRow } = table.getState();\n    if (draggingRow) {\n      updateRowOrder({\n        newRowIndex: (hoveredRow as TData).index as number,\n        rowId: draggingRow.id,\n      });\n    }\n\n    setDraggingRow(null);\n  };\n\n  const handleDragHandleOnDragCapture = (table: MRT_TableInstance<TData>) => {\n    if (!draggingRow && table.getState().draggingRow?.id) {\n      setDraggingRow(table.getState().draggingRow);\n    }\n  };\n\n  const resetDraggingAndHoveredRow = (table: MRT_TableInstance<TData>) => {\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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","ignoreList":[]}
+{"version":3,"file":"useRowReordering.js","names":["useTranslation","useOdysseyDesignTokens","reorderDataRowsLocally","useRowReordering","totalRows","onReorderRows","data","setData","draggingRow","setDraggingRow","resultsPerPage","page","t","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 { MRT_Row, MRT_RowData, MRT_TableInstance } from \"material-react-table\";\nimport { Dispatch, KeyboardEvent, SetStateAction } from \"react\";\nimport { useTranslation } from \"react-i18next\";\n\nimport { useOdysseyDesignTokens } from \"../OdysseyDesignTokensContext.js\";\nimport { DataTableProps } from \"./DataTable.js\";\nimport { reorderDataRowsLocally } from \"./reorderDataRowsLocally.js\";\n\nexport const useRowReordering = <TData extends MRT_RowData>({\n  totalRows,\n  onReorderRows,\n  data,\n  setData,\n  draggingRow,\n  setDraggingRow,\n  resultsPerPage,\n  page,\n}: {\n  data: TData[];\n  draggingRow?: MRT_Row<TData> | null;\n  onReorderRows: DataTableProps[\"onReorderRows\"];\n  page: number;\n  resultsPerPage: number;\n  setData: Dispatch<SetStateAction<TData[]>>;\n  setDraggingRow: Dispatch<SetStateAction<MRT_Row<TData> | null | undefined>>;\n  totalRows: DataTableProps[\"totalRows\"];\n}) => {\n  const { t } = useTranslation();\n\n  const updateRowOrder = ({\n    rowId,\n    newRowIndex,\n  }: {\n    newRowIndex: number;\n    rowId: string;\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    \"&: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: t(\"table.draghandle.tooltip\"),\n    \"aria-label\": t(\"table.draghandle.arialabel\"),\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 = (table: MRT_TableInstance<TData>, id: TData[\"id\"]) => {\n    if (id) {\n      // The `as MRT_Row<TData>` is necessary here to overcome some type/generic\n      // issues with the type of `setHoveredRow` defined by MRT. It's not ideal code,\n      // but it's the only way that works without a much larger rewrite.\n      const nextRow = table.getRow(id) as MRT_Row<TData>;\n\n      if (nextRow) {\n        table.setHoveredRow(nextRow);\n      }\n    }\n  };\n\n  type HandleDragHandleKeyDownArgs = {\n    event: KeyboardEvent<HTMLButtonElement>;\n    row: MRT_Row<TData>;\n    table: MRT_TableInstance<TData>;\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          // This is a legacy file, and this type isn't a problem in `DataView` --Kevin Ghadyani\n          // eslint-disable-next-line @typescript-eslint/no-unsafe-argument\n          setHoveredRow(table, data[nextIndex]?.id);\n        }\n      } else {\n        if (isArrowDown || isArrowUp) {\n          const nextIndex = isArrowDown ? row.index + 1 : row.index - 1;\n          // This is a legacy file, and this type isn't a problem in `DataView` --Kevin Ghadyani\n          // eslint-disable-next-line @typescript-eslint/no-unsafe-argument\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<TData>) => {\n    const cols = table.getAllColumns();\n    cols[0].toggleVisibility();\n\n    const { draggingRow, hoveredRow } = table.getState();\n    if (draggingRow) {\n      updateRowOrder({\n        newRowIndex: (hoveredRow as TData).index as number,\n        rowId: draggingRow.id,\n      });\n    }\n\n    setDraggingRow(null);\n  };\n\n  const handleDragHandleOnDragCapture = (table: MRT_TableInstance<TData>) => {\n    if (!draggingRow && table.getState().draggingRow?.id) {\n      setDraggingRow(table.getState().draggingRow);\n    }\n  };\n\n  const resetDraggingAndHoveredRow = (table: MRT_TableInstance<TData>) => {\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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","ignoreList":[]}

package/dist/esm/DataTable/useScrollIndication.js.map

@@ -1 +1 @@
-{"version":3,"file":"useScrollIndication.js","names":["useCallback","useEffect","useRef","useOdysseyDesignTokens","useScrollIndication","tableOuterContainer","tableInnerContainer","setIsTableContainerScrolledToStart","setIsTableContainerScrolledToEnd","setTableInnerContainerWidth","animationFrameIdRef","resizeObserverRef","odysseyDesignTokens","checkScrollIndicators","containerWidth","clientWidth","contentWidth","scrollWidth","containerStartScrollPosition","scrollLeft","containerEndScrollPosition","ResizeObserver","current","debounceTimer","clearTimeout","setTimeout","requestAnimationFrame","Number","BorderWidthMain","parentElement","observe","disconnect","cancelAnimationFrame","addEventListener","removeEventListener"],"sources":["../../../src/DataTable/useScrollIndication.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 {\n  Dispatch,\n  SetStateAction,\n  useCallback,\n  useEffect,\n  useRef,\n} from \"react\";\nimport { useOdysseyDesignTokens } from \"../OdysseyDesignTokensContext.js\";\n\ntype UseScrollIndicationProps = {\n  tableOuterContainer: HTMLDivElement | null;\n  tableInnerContainer: HTMLDivElement | null;\n  setIsTableContainerScrolledToStart: Dispatch<SetStateAction<boolean>>;\n  setIsTableContainerScrolledToEnd: Dispatch<SetStateAction<boolean>>;\n  setTableInnerContainerWidth: Dispatch<SetStateAction<string>>;\n};\nexport const useScrollIndication = ({\n  tableOuterContainer,\n  tableInnerContainer,\n  setIsTableContainerScrolledToStart,\n  setIsTableContainerScrolledToEnd,\n  setTableInnerContainerWidth,\n}: UseScrollIndicationProps) => {\n  const animationFrameIdRef = useRef<number | null>(null);\n\n  const resizeObserverRef = useRef<ResizeObserver | null>(null);\n\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  const checkScrollIndicators = useCallback(() => {\n    if (!tableOuterContainer || !tableInnerContainer) return;\n\n    const containerWidth = tableOuterContainer.clientWidth;\n    const contentWidth = tableInnerContainer.scrollWidth;\n    const containerStartScrollPosition = tableInnerContainer.scrollLeft;\n    const containerEndScrollPosition =\n      containerStartScrollPosition + containerWidth;\n\n    setIsTableContainerScrolledToStart(containerStartScrollPosition <= 16);\n    setIsTableContainerScrolledToEnd(\n      containerEndScrollPosition >= contentWidth - 16,\n    );\n  }, [\n    tableInnerContainer,\n    tableOuterContainer,\n    setIsTableContainerScrolledToEnd,\n    setIsTableContainerScrolledToStart,\n  ]);\n\n  useEffect(() => {\n    // Avoid creating multiple observers or if ResizeObserver is unsupported\n    if (typeof ResizeObserver === \"undefined\" || resizeObserverRef.current) {\n      return;\n    }\n\n    let debounceTimer: ReturnType<typeof setTimeout>;\n\n    resizeObserverRef.current = new ResizeObserver(() => {\n      clearTimeout(debounceTimer);\n      debounceTimer = setTimeout(() => {\n        if (!animationFrameIdRef.current) {\n          animationFrameIdRef.current = requestAnimationFrame(() => {\n            checkScrollIndicators();\n            animationFrameIdRef.current = null;\n          });\n        }\n\n        setTableInnerContainerWidth(\n          tableInnerContainer?.clientWidth\n            ? `${tableInnerContainer.clientWidth - Number(odysseyDesignTokens.BorderWidthMain) * 2}px` // Account for the border on the outer container\n            : \"100%\",\n        );\n      }, 100); // debounce delay\n    });\n\n    if (tableOuterContainer && tableOuterContainer.parentElement) {\n      resizeObserverRef.current.observe(tableOuterContainer.parentElement);\n    }\n\n    return () => {\n      if (resizeObserverRef.current) {\n        resizeObserverRef.current.disconnect();\n        resizeObserverRef.current = null;\n      }\n      clearTimeout(debounceTimer); // Ensure timer is cleared on component unmount\n      if (animationFrameIdRef.current) {\n        cancelAnimationFrame(animationFrameIdRef.current);\n        animationFrameIdRef.current = null;\n      }\n    };\n  }, [\n    checkScrollIndicators,\n    setTableInnerContainerWidth,\n    tableOuterContainer,\n    tableInnerContainer,\n    setIsTableContainerScrolledToStart,\n    setIsTableContainerScrolledToEnd,\n    odysseyDesignTokens.BorderWidthMain,\n  ]);\n\n  useEffect(() => {\n    tableInnerContainer?.addEventListener(\"scroll\", checkScrollIndicators);\n    return () =>\n      tableInnerContainer?.removeEventListener(\"scroll\", checkScrollIndicators);\n  }, [tableInnerContainer, checkScrollIndicators]); // Re-run when innerContainerRef changes\n\n  // Initial check to set state correctly on mount\n  useEffect(() => {\n    checkScrollIndicators();\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAGEA,WAAW,EACXC,SAAS,EACTC,MAAM,QACD,OAAO;AACd,SAASC,sBAAsB,QAAQ,kCAAkC;AASzE,OAAO,MAAMC,mBAAmB,GAAGA,CAAC;EAClCC,mBAAmB;EACnBC,mBAAmB;EACnBC,kCAAkC;EAClCC,gCAAgC;EAChCC;AACwB,CAAC,KAAK;EAC9B,MAAMC,mBAAmB,GAAGR,MAAM,CAAgB,IAAI,CAAC;EAEvD,MAAMS,iBAAiB,GAAGT,MAAM,CAAwB,IAAI,CAAC;EAE7D,MAAMU,mBAAmB,GAAGT,sBAAsB,CAAC,CAAC;EAEpD,MAAMU,qBAAqB,GAAGb,WAAW,CAAC,MAAM;IAC9C,IAAI,CAACK,mBAAmB,IAAI,CAACC,mBAAmB,EAAE;IAElD,MAAMQ,cAAc,GAAGT,mBAAmB,CAACU,WAAW;IACtD,MAAMC,YAAY,GAAGV,mBAAmB,CAACW,WAAW;IACpD,MAAMC,4BAA4B,GAAGZ,mBAAmB,CAACa,UAAU;IACnE,MAAMC,0BAA0B,GAC9BF,4BAA4B,GAAGJ,cAAc;IAE/CP,kCAAkC,CAACW,4BAA4B,IAAI,EAAE,CAAC;IACtEV,gCAAgC,CAC9BY,0BAA0B,IAAIJ,YAAY,GAAG,EAC/C,CAAC;EACH,CAAC,EAAE,CACDV,mBAAmB,EACnBD,mBAAmB,EACnBG,gCAAgC,EAChCD,kCAAkC,CACnC,CAAC;EAEFN,SAAS,CAAC,MAAM;IAEd,IAAI,OAAOoB,cAAc,KAAK,WAAW,IAAIV,iBAAiB,CAACW,OAAO,EAAE;MACtE;IACF;IAEA,IAAIC,aAA4C;IAEhDZ,iBAAiB,CAACW,OAAO,GAAG,IAAID,cAAc,CAAC,MAAM;MACnDG,YAAY,CAACD,aAAa,CAAC;MAC3BA,aAAa,GAAGE,UAAU,CAAC,MAAM;QAC/B,IAAI,CAACf,mBAAmB,CAACY,OAAO,EAAE;UAChCZ,mBAAmB,CAACY,OAAO,GAAGI,qBAAqB,CAAC,MAAM;YACxDb,qBAAqB,CAAC,CAAC;YACvBH,mBAAmB,CAACY,OAAO,GAAG,IAAI;UACpC,CAAC,CAAC;QACJ;QAEAb,2BAA2B,CACzBH,mBAAmB,EAAES,WAAW,GAC5B,GAAGT,mBAAmB,CAACS,WAAW,GAAGY,MAAM,CAACf,mBAAmB,CAACgB,eAAe,CAAC,GAAG,CAAC,IAAI,GACxF,MACN,CAAC;MACH,CAAC,EAAE,GAAG,CAAC;IACT,CAAC,CAAC;IAEF,IAAIvB,mBAAmB,IAAIA,mBAAmB,CAACwB,aAAa,EAAE;MAC5DlB,iBAAiB,CAACW,OAAO,CAACQ,OAAO,CAACzB,mBAAmB,CAACwB,aAAa,CAAC;IACtE;IAEA,OAAO,MAAM;MACX,IAAIlB,iBAAiB,CAACW,OAAO,EAAE;QAC7BX,iBAAiB,CAACW,OAAO,CAACS,UAAU,CAAC,CAAC;QACtCpB,iBAAiB,CAACW,OAAO,GAAG,IAAI;MAClC;MACAE,YAAY,CAACD,aAAa,CAAC;MAC3B,IAAIb,mBAAmB,CAACY,OAAO,EAAE;QAC/BU,oBAAoB,CAACtB,mBAAmB,CAACY,OAAO,CAAC;QACjDZ,mBAAmB,CAACY,OAAO,GAAG,IAAI;MACpC;IACF,CAAC;EACH,CAAC,EAAE,CACDT,qBAAqB,EACrBJ,2BAA2B,EAC3BJ,mBAAmB,EACnBC,mBAAmB,EACnBC,kCAAkC,EAClCC,gCAAgC,EAChCI,mBAAmB,CAACgB,eAAe,CACpC,CAAC;EAEF3B,SAAS,CAAC,MAAM;IACdK,mBAAmB,EAAE2B,gBAAgB,CAAC,QAAQ,EAAEpB,qBAAqB,CAAC;IACtE,OAAO,MACLP,mBAAmB,EAAE4B,mBAAmB,CAAC,QAAQ,EAAErB,qBAAqB,CAAC;EAC7E,CAAC,EAAE,CAACP,mBAAmB,EAAEO,qBAAqB,CAAC,CAAC;EAGhDZ,SAAS,CAAC,MAAM;IACdY,qBAAqB,CAAC,CAAC;EAGzB,CAAC,EAAE,EAAE,CAAC;AACR,CAAC","ignoreList":[]}
+{"version":3,"file":"useScrollIndication.js","names":["useCallback","useEffect","useRef","useOdysseyDesignTokens","useScrollIndication","tableOuterContainer","tableInnerContainer","setIsTableContainerScrolledToStart","setIsTableContainerScrolledToEnd","setTableInnerContainerWidth","animationFrameIdRef","resizeObserverRef","odysseyDesignTokens","checkScrollIndicators","containerWidth","clientWidth","contentWidth","scrollWidth","containerStartScrollPosition","scrollLeft","containerEndScrollPosition","ResizeObserver","current","debounceTimer","clearTimeout","setTimeout","requestAnimationFrame","Number","BorderWidthMain","parentElement","observe","disconnect","cancelAnimationFrame","addEventListener","removeEventListener"],"sources":["../../../src/DataTable/useScrollIndication.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 {\n  Dispatch,\n  SetStateAction,\n  useCallback,\n  useEffect,\n  useRef,\n} from \"react\";\n\nimport { useOdysseyDesignTokens } from \"../OdysseyDesignTokensContext.js\";\n\ntype UseScrollIndicationProps = {\n  setIsTableContainerScrolledToEnd: Dispatch<SetStateAction<boolean>>;\n  setIsTableContainerScrolledToStart: Dispatch<SetStateAction<boolean>>;\n  setTableInnerContainerWidth: Dispatch<SetStateAction<string>>;\n  tableInnerContainer: HTMLDivElement | null;\n  tableOuterContainer: HTMLDivElement | null;\n};\nexport const useScrollIndication = ({\n  tableOuterContainer,\n  tableInnerContainer,\n  setIsTableContainerScrolledToStart,\n  setIsTableContainerScrolledToEnd,\n  setTableInnerContainerWidth,\n}: UseScrollIndicationProps) => {\n  const animationFrameIdRef = useRef<number | null>(null);\n\n  const resizeObserverRef = useRef<ResizeObserver | null>(null);\n\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  const checkScrollIndicators = useCallback(() => {\n    if (!tableOuterContainer || !tableInnerContainer) return;\n\n    const containerWidth = tableOuterContainer.clientWidth;\n    const contentWidth = tableInnerContainer.scrollWidth;\n    const containerStartScrollPosition = tableInnerContainer.scrollLeft;\n    const containerEndScrollPosition =\n      containerStartScrollPosition + containerWidth;\n\n    setIsTableContainerScrolledToStart(containerStartScrollPosition <= 16);\n    setIsTableContainerScrolledToEnd(\n      containerEndScrollPosition >= contentWidth - 16,\n    );\n  }, [\n    tableInnerContainer,\n    tableOuterContainer,\n    setIsTableContainerScrolledToEnd,\n    setIsTableContainerScrolledToStart,\n  ]);\n\n  useEffect(() => {\n    // Avoid creating multiple observers or if ResizeObserver is unsupported\n    if (typeof ResizeObserver === \"undefined\" || resizeObserverRef.current) {\n      return;\n    }\n\n    let debounceTimer: ReturnType<typeof setTimeout>;\n\n    resizeObserverRef.current = new ResizeObserver(() => {\n      clearTimeout(debounceTimer);\n      debounceTimer = setTimeout(() => {\n        if (!animationFrameIdRef.current) {\n          animationFrameIdRef.current = requestAnimationFrame(() => {\n            checkScrollIndicators();\n            animationFrameIdRef.current = null;\n          });\n        }\n\n        setTableInnerContainerWidth(\n          tableInnerContainer?.clientWidth\n            ? `${tableInnerContainer.clientWidth - Number(odysseyDesignTokens.BorderWidthMain) * 2}px` // Account for the border on the outer container\n            : \"100%\",\n        );\n      }, 100); // debounce delay\n    });\n\n    if (tableOuterContainer && tableOuterContainer.parentElement) {\n      resizeObserverRef.current.observe(tableOuterContainer.parentElement);\n    }\n\n    return () => {\n      if (resizeObserverRef.current) {\n        resizeObserverRef.current.disconnect();\n        resizeObserverRef.current = null;\n      }\n      clearTimeout(debounceTimer); // Ensure timer is cleared on component unmount\n      if (animationFrameIdRef.current) {\n        cancelAnimationFrame(animationFrameIdRef.current);\n        animationFrameIdRef.current = null;\n      }\n    };\n  }, [\n    checkScrollIndicators,\n    setTableInnerContainerWidth,\n    tableOuterContainer,\n    tableInnerContainer,\n    setIsTableContainerScrolledToStart,\n    setIsTableContainerScrolledToEnd,\n    odysseyDesignTokens.BorderWidthMain,\n  ]);\n\n  useEffect(() => {\n    tableInnerContainer?.addEventListener(\"scroll\", checkScrollIndicators);\n    return () =>\n      tableInnerContainer?.removeEventListener(\"scroll\", checkScrollIndicators);\n  }, [tableInnerContainer, checkScrollIndicators]); // Re-run when innerContainerRef changes\n\n  // Initial check to set state correctly on mount\n  useEffect(() => {\n    checkScrollIndicators();\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/DatePickers/DateField.js

@@ -10,9 +10,8 @@ import _InputAdornment from "@mui/material/InputAdornment";
  *
  * See the License for the specific language governing permissions and limitations under the License.
  */
-
-import { memo, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
 import { DateField as MuiDateField } from "@mui/x-date-pickers";
+import { memo, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Field } from "../Field.js";
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
@@ -135,8 +134,8 @@ const DateField = ({
       })
     },
     inputRef: localInputRef,
-    minDate: minDate,
     maxDate: maxDate,
+    minDate: minDate,
     name: id,
     onBlur: checkFieldValidityAndSetError,
     onChange: validateAndCallOnChange,

package/dist/esm/DatePickers/DateField.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateField.js","names":["memo","useCallback","useEffect","useImperativeHandle","useRef","useState","DateField","MuiDateField","useTranslation","Field","jsx","_jsx","Fragment","_Fragment","useOdysseyDateError","t","Map","formatDateTimeToUtcIsoDateString","value","toUTC","toISO","defaultValue","endAdornment","errorMessage","hasInitialFocus","hint","HintLinkComponent","id","idOverride","inputRef","isDisabled","isOptional","isReadOnly","label","minDate","maxDate","onBlur","onChange","onFocus","timezone","errorMap","displayedErrorMessage","setDisplayedErrorMessage","internalValidationError","localInputRef","focus","current","checkMinMaxValidity","hasMinError","hasMaxError","get","clearErrorMessages","undefined","validateAndCallOnChange","validationContext","validationError","hasEnteredFullYear","year","toString","length","odysseyValidationError","isValid","dateStringFromDateTime","checkFieldValidityAndSetError","event","hasVisibleAdornment","renderFieldComponent","ariaDescribedBy","errorMessageElementId","labelElementId","autoFocus","disabled","inputProps","InputProps","error","Boolean","children","_InputAdornment","position","name","readOnly","variant","fieldType","hasVisibleLabel","MemoizedDateField","displayName"],"sources":["../../../src/DatePickers/DateField.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 {\n  FocusEventHandler,\n  memo,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n} from \"react\";\nimport { InputAdornment } from \"@mui/material\";\nimport {\n  DateField as MuiDateField,\n  DateFieldProps as MuiDateFieldProps,\n  DateValidationError,\n} from \"@mui/x-date-pickers\";\nimport { DateTime } from \"luxon\";\nimport { useTranslation } from \"react-i18next\";\n\nimport { Field, RenderFieldComponentProps } from \"../Field.js\";\nimport { TextFieldProps } from \"../TextField.js\";\n\nexport type DateFieldProps = {\n  onChange?: (value: string) => void;\n} & Pick<\n  MuiDateFieldProps<DateTime>,\n  \"defaultValue\" | \"inputRef\" | \"minDate\" | \"maxDate\" | \"timezone\" | \"value\"\n> &\n  Pick<\n    TextFieldProps,\n    | \"endAdornment\"\n    | \"errorMessage\"\n    | \"hasInitialFocus\"\n    | \"hint\"\n    | \"HintLinkComponent\"\n    | \"id\"\n    | \"isDisabled\"\n    | \"isOptional\"\n    | \"isReadOnly\"\n    | \"label\"\n    | \"onBlur\"\n    | \"onFocus\"\n  >;\n\nconst useOdysseyDateError = () => {\n  const { t } = useTranslation();\n\n  return new Map<DateValidationError, string>([\n    [\"invalidDate\", t(\"picker.error.invalid\")],\n    [\"maxDate\", t(\"picker.error.maxdate\")],\n    [\"minDate\", t(\"picker.error.mindate\")],\n  ]);\n};\n\nconst formatDateTimeToUtcIsoDateString = (value: DateTime) =>\n  value.toUTC().toISO();\n\nconst DateField = ({\n  defaultValue,\n  endAdornment,\n  errorMessage,\n  hasInitialFocus,\n  hint,\n  HintLinkComponent,\n  id: idOverride,\n  inputRef,\n  isDisabled = false,\n  isOptional = false,\n  isReadOnly,\n  label,\n  minDate,\n  maxDate,\n  onBlur,\n  onChange,\n  onFocus,\n  timezone,\n  value,\n}: DateFieldProps) => {\n  const errorMap = useOdysseyDateError();\n  const [displayedErrorMessage, setDisplayedErrorMessage] =\n    useState(errorMessage);\n\n  const internalValidationError = useRef<string | undefined>();\n  const localInputRef = useRef<HTMLInputElement>(null);\n\n  useImperativeHandle(inputRef, () => {\n    return {\n      focus: () => {\n        localInputRef.current?.focus();\n      },\n    };\n  }, []);\n\n  const checkMinMaxValidity = useCallback(\n    (value: DateTime) => {\n      const hasMinError = minDate && value.toUTC() < minDate.toUTC();\n      const hasMaxError = maxDate && value.toUTC() > maxDate.toUTC();\n\n      if (hasMinError || hasMaxError) {\n        if (hasMinError) {\n          setDisplayedErrorMessage(errorMap.get(\"minDate\"));\n        }\n\n        if (hasMaxError) {\n          setDisplayedErrorMessage(errorMap.get(\"maxDate\"));\n        }\n\n        return false;\n      }\n\n      return true;\n    },\n    [errorMap, minDate, maxDate],\n  );\n\n  useEffect(() => {\n    if (value) {\n      checkMinMaxValidity(value);\n    }\n\n    if (defaultValue) {\n      checkMinMaxValidity(defaultValue);\n    }\n  }, [checkMinMaxValidity, defaultValue, minDate, maxDate, value]);\n\n  const clearErrorMessages = useCallback(() => {\n    setDisplayedErrorMessage(undefined);\n    internalValidationError.current = undefined;\n  }, [internalValidationError, setDisplayedErrorMessage]);\n\n  const validateAndCallOnChange = useCallback<\n    NonNullable<MuiDateFieldProps<DateTime>[\"onChange\"]>\n  >(\n    (value, validationContext) => {\n      clearErrorMessages();\n      const { validationError } = validationContext;\n      const hasEnteredFullYear = value?.year.toString().length === 4;\n\n      if (validationError) {\n        const odysseyValidationError = errorMap.get(validationError);\n\n        if (odysseyValidationError) {\n          internalValidationError.current = odysseyValidationError;\n\n          if (value?.isValid && hasEnteredFullYear) {\n            setDisplayedErrorMessage(odysseyValidationError);\n          }\n        }\n      }\n\n      if (value?.isValid && !validationError) {\n        const dateStringFromDateTime = formatDateTimeToUtcIsoDateString(value);\n\n        if (dateStringFromDateTime && checkMinMaxValidity(value)) {\n          onChange?.(dateStringFromDateTime);\n        }\n      }\n    },\n    [checkMinMaxValidity, clearErrorMessages, errorMap, onChange],\n  );\n\n  const checkFieldValidityAndSetError = useCallback<\n    FocusEventHandler<HTMLInputElement>\n  >(\n    (event) => {\n      if (internalValidationError?.current && !displayedErrorMessage) {\n        setDisplayedErrorMessage(internalValidationError.current);\n      }\n      onBlur?.(event);\n    },\n    [displayedErrorMessage, internalValidationError, onBlur],\n  );\n\n  const hasVisibleAdornment = !isReadOnly && !isDisabled;\n\n  const renderFieldComponent = useCallback(\n    ({\n      ariaDescribedBy,\n      errorMessageElementId,\n      id,\n      labelElementId,\n    }: RenderFieldComponentProps) => (\n      <MuiDateField\n        /* eslint-disable-next-line jsx-a11y/no-autofocus */\n        autoFocus={hasInitialFocus}\n        defaultValue={defaultValue}\n        disabled={isDisabled}\n        id={id}\n        inputProps={{\n          \"aria-describedby\": ariaDescribedBy,\n          \"aria-errormessage\": errorMessageElementId,\n          \"aria-labelledby\": labelElementId,\n        }}\n        InputProps={{\n          error: Boolean(displayedErrorMessage || errorMessage),\n          endAdornment: (\n            <>\n              {hasVisibleAdornment && (\n                <InputAdornment position=\"end\">{endAdornment}</InputAdornment>\n              )}\n            </>\n          ),\n        }}\n        inputRef={localInputRef}\n        minDate={minDate}\n        maxDate={maxDate}\n        name={id}\n        onBlur={checkFieldValidityAndSetError}\n        onChange={validateAndCallOnChange}\n        onFocus={onFocus}\n        readOnly={isReadOnly}\n        timezone={timezone}\n        value={value}\n        variant=\"standard\"\n      />\n    ),\n    [\n      checkFieldValidityAndSetError,\n      defaultValue,\n      displayedErrorMessage,\n      endAdornment,\n      errorMessage,\n      hasInitialFocus,\n      hasVisibleAdornment,\n      isDisabled,\n      localInputRef,\n      minDate,\n      maxDate,\n      onFocus,\n      isReadOnly,\n      timezone,\n      validateAndCallOnChange,\n      value,\n    ],\n  );\n\n  return (\n    <Field\n      errorMessage={displayedErrorMessage || errorMessage}\n      fieldType=\"single\"\n      hasVisibleLabel\n      hint={hint}\n      HintLinkComponent={HintLinkComponent}\n      id={idOverride}\n      isDisabled={isDisabled}\n      isOptional={isOptional}\n      label={label}\n      renderFieldComponent={renderFieldComponent}\n    />\n  );\n};\n\nconst MemoizedDateField = memo(DateField);\nMemoizedDateField.displayName = \"DateField\";\n\nexport { MemoizedDateField as DateField };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"DateField.js","names":["DateField","MuiDateField","memo","useCallback","useEffect","useImperativeHandle","useRef","useState","useTranslation","Field","jsx","_jsx","Fragment","_Fragment","useOdysseyDateError","t","Map","formatDateTimeToUtcIsoDateString","value","toUTC","toISO","defaultValue","endAdornment","errorMessage","hasInitialFocus","hint","HintLinkComponent","id","idOverride","inputRef","isDisabled","isOptional","isReadOnly","label","minDate","maxDate","onBlur","onChange","onFocus","timezone","errorMap","displayedErrorMessage","setDisplayedErrorMessage","internalValidationError","localInputRef","focus","current","checkMinMaxValidity","hasMinError","hasMaxError","get","clearErrorMessages","undefined","validateAndCallOnChange","validationContext","validationError","hasEnteredFullYear","year","toString","length","odysseyValidationError","isValid","dateStringFromDateTime","checkFieldValidityAndSetError","event","hasVisibleAdornment","renderFieldComponent","ariaDescribedBy","errorMessageElementId","labelElementId","autoFocus","disabled","inputProps","InputProps","error","Boolean","children","_InputAdornment","position","name","readOnly","variant","fieldType","hasVisibleLabel","MemoizedDateField","displayName"],"sources":["../../../src/DatePickers/DateField.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 { InputAdornment } from \"@mui/material\";\nimport {\n  DateValidationError,\n  DateField as MuiDateField,\n  DateFieldProps as MuiDateFieldProps,\n} from \"@mui/x-date-pickers\";\nimport { DateTime } from \"luxon\";\nimport {\n  FocusEventHandler,\n  memo,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n} from \"react\";\nimport { useTranslation } from \"react-i18next\";\n\nimport { Field, RenderFieldComponentProps } from \"../Field.js\";\nimport { TextFieldProps } from \"../TextField.js\";\n\nexport type DateFieldProps = {\n  onChange?: (value: string) => void;\n} & Pick<\n  MuiDateFieldProps<DateTime>,\n  \"defaultValue\" | \"inputRef\" | \"minDate\" | \"maxDate\" | \"timezone\" | \"value\"\n> &\n  Pick<\n    TextFieldProps,\n    | \"endAdornment\"\n    | \"errorMessage\"\n    | \"hasInitialFocus\"\n    | \"hint\"\n    | \"HintLinkComponent\"\n    | \"id\"\n    | \"isDisabled\"\n    | \"isOptional\"\n    | \"isReadOnly\"\n    | \"label\"\n    | \"onBlur\"\n    | \"onFocus\"\n  >;\n\nconst useOdysseyDateError = () => {\n  const { t } = useTranslation();\n\n  return new Map<DateValidationError, string>([\n    [\"invalidDate\", t(\"picker.error.invalid\")],\n    [\"maxDate\", t(\"picker.error.maxdate\")],\n    [\"minDate\", t(\"picker.error.mindate\")],\n  ]);\n};\n\nconst formatDateTimeToUtcIsoDateString = (value: DateTime) =>\n  value.toUTC().toISO();\n\nconst DateField = ({\n  defaultValue,\n  endAdornment,\n  errorMessage,\n  hasInitialFocus,\n  hint,\n  HintLinkComponent,\n  id: idOverride,\n  inputRef,\n  isDisabled = false,\n  isOptional = false,\n  isReadOnly,\n  label,\n  minDate,\n  maxDate,\n  onBlur,\n  onChange,\n  onFocus,\n  timezone,\n  value,\n}: DateFieldProps) => {\n  const errorMap = useOdysseyDateError();\n  const [displayedErrorMessage, setDisplayedErrorMessage] =\n    useState(errorMessage);\n\n  const internalValidationError = useRef<string | undefined>();\n  const localInputRef = useRef<HTMLInputElement>(null);\n\n  useImperativeHandle(inputRef, () => {\n    return {\n      focus: () => {\n        localInputRef.current?.focus();\n      },\n    };\n  }, []);\n\n  const checkMinMaxValidity = useCallback(\n    (value: DateTime) => {\n      const hasMinError = minDate && value.toUTC() < minDate.toUTC();\n      const hasMaxError = maxDate && value.toUTC() > maxDate.toUTC();\n\n      if (hasMinError || hasMaxError) {\n        if (hasMinError) {\n          setDisplayedErrorMessage(errorMap.get(\"minDate\"));\n        }\n\n        if (hasMaxError) {\n          setDisplayedErrorMessage(errorMap.get(\"maxDate\"));\n        }\n\n        return false;\n      }\n\n      return true;\n    },\n    [errorMap, minDate, maxDate],\n  );\n\n  useEffect(() => {\n    if (value) {\n      checkMinMaxValidity(value);\n    }\n\n    if (defaultValue) {\n      checkMinMaxValidity(defaultValue);\n    }\n  }, [checkMinMaxValidity, defaultValue, minDate, maxDate, value]);\n\n  const clearErrorMessages = useCallback(() => {\n    setDisplayedErrorMessage(undefined);\n    internalValidationError.current = undefined;\n  }, [internalValidationError, setDisplayedErrorMessage]);\n\n  const validateAndCallOnChange = useCallback<\n    NonNullable<MuiDateFieldProps<DateTime>[\"onChange\"]>\n  >(\n    (value, validationContext) => {\n      clearErrorMessages();\n      const { validationError } = validationContext;\n      const hasEnteredFullYear = value?.year.toString().length === 4;\n\n      if (validationError) {\n        const odysseyValidationError = errorMap.get(validationError);\n\n        if (odysseyValidationError) {\n          internalValidationError.current = odysseyValidationError;\n\n          if (value?.isValid && hasEnteredFullYear) {\n            setDisplayedErrorMessage(odysseyValidationError);\n          }\n        }\n      }\n\n      if (value?.isValid && !validationError) {\n        const dateStringFromDateTime = formatDateTimeToUtcIsoDateString(value);\n\n        if (dateStringFromDateTime && checkMinMaxValidity(value)) {\n          onChange?.(dateStringFromDateTime);\n        }\n      }\n    },\n    [checkMinMaxValidity, clearErrorMessages, errorMap, onChange],\n  );\n\n  const checkFieldValidityAndSetError = useCallback<\n    FocusEventHandler<HTMLInputElement>\n  >(\n    (event) => {\n      if (internalValidationError?.current && !displayedErrorMessage) {\n        setDisplayedErrorMessage(internalValidationError.current);\n      }\n      onBlur?.(event);\n    },\n    [displayedErrorMessage, internalValidationError, onBlur],\n  );\n\n  const hasVisibleAdornment = !isReadOnly && !isDisabled;\n\n  const renderFieldComponent = useCallback(\n    ({\n      ariaDescribedBy,\n      errorMessageElementId,\n      id,\n      labelElementId,\n    }: RenderFieldComponentProps) => (\n      <MuiDateField\n        /* eslint-disable-next-line jsx-a11y/no-autofocus */\n        autoFocus={hasInitialFocus}\n        defaultValue={defaultValue}\n        disabled={isDisabled}\n        id={id}\n        inputProps={{\n          \"aria-describedby\": ariaDescribedBy,\n          \"aria-errormessage\": errorMessageElementId,\n          \"aria-labelledby\": labelElementId,\n        }}\n        InputProps={{\n          error: Boolean(displayedErrorMessage || errorMessage),\n          endAdornment: (\n            <>\n              {hasVisibleAdornment && (\n                <InputAdornment position=\"end\">{endAdornment}</InputAdornment>\n              )}\n            </>\n          ),\n        }}\n        inputRef={localInputRef}\n        maxDate={maxDate}\n        minDate={minDate}\n        name={id}\n        onBlur={checkFieldValidityAndSetError}\n        onChange={validateAndCallOnChange}\n        onFocus={onFocus}\n        readOnly={isReadOnly}\n        timezone={timezone}\n        value={value}\n        variant=\"standard\"\n      />\n    ),\n    [\n      checkFieldValidityAndSetError,\n      defaultValue,\n      displayedErrorMessage,\n      endAdornment,\n      errorMessage,\n      hasInitialFocus,\n      hasVisibleAdornment,\n      isDisabled,\n      localInputRef,\n      minDate,\n      maxDate,\n      onFocus,\n      isReadOnly,\n      timezone,\n      validateAndCallOnChange,\n      value,\n    ],\n  );\n\n  return (\n    <Field\n      errorMessage={displayedErrorMessage || errorMessage}\n      fieldType=\"single\"\n      hasVisibleLabel\n      hint={hint}\n      HintLinkComponent={HintLinkComponent}\n      id={idOverride}\n      isDisabled={isDisabled}\n      isOptional={isOptional}\n      label={label}\n      renderFieldComponent={renderFieldComponent}\n    />\n  );\n};\n\nconst MemoizedDateField = memo(DateField);\nMemoizedDateField.displayName = \"DateField\";\n\nexport { MemoizedDateField as DateField };\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/DatePickers/DateFieldActionBar.js

@@ -10,9 +10,9 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
+import styled from "@emotion/styled";
 import { memo } from "react";
 import { useTranslation } from "react-i18next";
-import styled from "@emotion/styled";
 import { Button } from "../Buttons/index.js";
 import { useOdysseyDesignTokens } from "../OdysseyDesignTokensContext.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";

package/dist/esm/DatePickers/DateFieldActionBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateFieldActionBar.js","names":["memo","useTranslation","styled","Button","useOdysseyDesignTokens","jsx","_jsx","jsxs","_jsxs","ActionContainer","div","odysseyDesignTokens","display","justifyContent","paddingInline","Spacing4","paddingBlockEnd","DateFieldActionBar","actions","onAccept","onCancel","t","length","children","label","onClick","variant","MemoizedDateFieldActionBar","displayName"],"sources":["../../../src/DatePickers/DateFieldActionBar.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 { memo } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { PickersActionBarProps } from \"@mui/x-date-pickers\";\nimport styled from \"@emotion/styled\";\n\nimport { Button } from \"../Buttons/index.js\";\nimport {\n  useOdysseyDesignTokens,\n  DesignTokens,\n} from \"../OdysseyDesignTokensContext.js\";\n\nconst ActionContainer = styled.div<{ odysseyDesignTokens: DesignTokens }>(\n  ({ odysseyDesignTokens }) => ({\n    display: \"flex\",\n    justifyContent: \"flex-end\",\n    paddingInline: odysseyDesignTokens.Spacing4,\n    paddingBlockEnd: odysseyDesignTokens.Spacing4,\n  }),\n);\n\nconst DateFieldActionBar = ({\n  actions,\n  onAccept,\n  onCancel,\n}: PickersActionBarProps) => {\n  const { t } = useTranslation();\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  // actions will be [] or [\"accept\", \"cancel\"]\n  if (actions && actions.length > 0) {\n    return (\n      <ActionContainer odysseyDesignTokens={odysseyDesignTokens}>\n        <Button\n          label={t(\"picker.labels.action.cancel\")}\n          onClick={onCancel}\n          variant=\"floating\"\n        />\n        <Button\n          label={t(\"picker.labels.action.apply\")}\n          onClick={onAccept}\n          variant=\"primary\"\n        />\n      </ActionContainer>\n    );\n  }\n\n  return null;\n};\n\nconst MemoizedDateFieldActionBar = memo(DateFieldActionBar);\nMemoizedDateFieldActionBar.displayName = \"DateFieldActionBar\";\n\nexport { MemoizedDateFieldActionBar as DateFieldActionBar };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,QAAQ,OAAO;AAC5B,SAASC,cAAc,QAAQ,eAAe;AAE9C,OAAOC,MAAM,MAAM,iBAAiB;AAEpC,SAASC,MAAM,QAAQ,qBAAqB;AAC5C,SACEC,sBAAsB,QAEjB,kCAAkC;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAE1C,MAAMC,eAAe,GAAGP,MAAM,CAACQ,GAAG,CAChC,CAAC;EAAEC;AAAoB,CAAC,MAAM;EAC5BC,OAAO,EAAE,MAAM;EACfC,cAAc,EAAE,UAAU;EAC1BC,aAAa,EAAEH,mBAAmB,CAACI,QAAQ;EAC3CC,eAAe,EAAEL,mBAAmB,CAACI;AACvC,CAAC,CACH,CAAC;AAED,MAAME,kBAAkB,GAAGA,CAAC;EAC1BC,OAAO;EACPC,QAAQ;EACRC;AACqB,CAAC,KAAK;EAC3B,MAAM;IAAEC;EAAE,CAAC,GAAGpB,cAAc,CAAC,CAAC;EAC9B,MAAMU,mBAAmB,GAAGP,sBAAsB,CAAC,CAAC;EAGpD,IAAIc,OAAO,IAAIA,OAAO,CAACI,MAAM,GAAG,CAAC,EAAE;IACjC,OACEd,KAAA,CAACC,eAAe;MAACE,mBAAmB,EAAEA,mBAAoB;MAAAY,QAAA,GACxDjB,IAAA,CAACH,MAAM;QACLqB,KAAK,EAAEH,CAAC,CAAC,6BAA6B,CAAE;QACxCI,OAAO,EAAEL,QAAS;QAClBM,OAAO,EAAC;MAAU,CACnB,CAAC,EACFpB,IAAA,CAACH,MAAM;QACLqB,KAAK,EAAEH,CAAC,CAAC,4BAA4B,CAAE;QACvCI,OAAO,EAAEN,QAAS;QAClBO,OAAO,EAAC;MAAS,CAClB,CAAC;IAAA,CACa,CAAC;EAEtB;EAEA,OAAO,IAAI;AACb,CAAC;AAED,MAAMC,0BAA0B,GAAG3B,IAAI,CAACiB,kBAAkB,CAAC;AAC3DU,0BAA0B,CAACC,WAAW,GAAG,oBAAoB;AAE7D,SAASD,0BAA0B,IAAIV,kBAAkB","ignoreList":[]}
+{"version":3,"file":"DateFieldActionBar.js","names":["styled","memo","useTranslation","Button","useOdysseyDesignTokens","jsx","_jsx","jsxs","_jsxs","ActionContainer","div","odysseyDesignTokens","display","justifyContent","paddingInline","Spacing4","paddingBlockEnd","DateFieldActionBar","actions","onAccept","onCancel","t","length","children","label","onClick","variant","MemoizedDateFieldActionBar","displayName"],"sources":["../../../src/DatePickers/DateFieldActionBar.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 styled from \"@emotion/styled\";\nimport { PickersActionBarProps } from \"@mui/x-date-pickers\";\nimport { memo } from \"react\";\nimport { useTranslation } from \"react-i18next\";\n\nimport { Button } from \"../Buttons/index.js\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../OdysseyDesignTokensContext.js\";\n\nconst ActionContainer = styled.div<{ odysseyDesignTokens: DesignTokens }>(\n  ({ odysseyDesignTokens }) => ({\n    display: \"flex\",\n    justifyContent: \"flex-end\",\n    paddingInline: odysseyDesignTokens.Spacing4,\n    paddingBlockEnd: odysseyDesignTokens.Spacing4,\n  }),\n);\n\nconst DateFieldActionBar = ({\n  actions,\n  onAccept,\n  onCancel,\n}: PickersActionBarProps) => {\n  const { t } = useTranslation();\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  // actions will be [] or [\"accept\", \"cancel\"]\n  if (actions && actions.length > 0) {\n    return (\n      <ActionContainer odysseyDesignTokens={odysseyDesignTokens}>\n        <Button\n          label={t(\"picker.labels.action.cancel\")}\n          onClick={onCancel}\n          variant=\"floating\"\n        />\n        <Button\n          label={t(\"picker.labels.action.apply\")}\n          onClick={onAccept}\n          variant=\"primary\"\n        />\n      </ActionContainer>\n    );\n  }\n\n  return null;\n};\n\nconst MemoizedDateFieldActionBar = memo(DateFieldActionBar);\nMemoizedDateFieldActionBar.displayName = \"DateFieldActionBar\";\n\nexport { MemoizedDateFieldActionBar as DateFieldActionBar };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAOA,MAAM,MAAM,iBAAiB;AAEpC,SAASC,IAAI,QAAQ,OAAO;AAC5B,SAASC,cAAc,QAAQ,eAAe;AAE9C,SAASC,MAAM,QAAQ,qBAAqB;AAC5C,SAEEC,sBAAsB,QACjB,kCAAkC;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAE1C,MAAMC,eAAe,GAAGT,MAAM,CAACU,GAAG,CAChC,CAAC;EAAEC;AAAoB,CAAC,MAAM;EAC5BC,OAAO,EAAE,MAAM;EACfC,cAAc,EAAE,UAAU;EAC1BC,aAAa,EAAEH,mBAAmB,CAACI,QAAQ;EAC3CC,eAAe,EAAEL,mBAAmB,CAACI;AACvC,CAAC,CACH,CAAC;AAED,MAAME,kBAAkB,GAAGA,CAAC;EAC1BC,OAAO;EACPC,QAAQ;EACRC;AACqB,CAAC,KAAK;EAC3B,MAAM;IAAEC;EAAE,CAAC,GAAGnB,cAAc,CAAC,CAAC;EAC9B,MAAMS,mBAAmB,GAAGP,sBAAsB,CAAC,CAAC;EAGpD,IAAIc,OAAO,IAAIA,OAAO,CAACI,MAAM,GAAG,CAAC,EAAE;IACjC,OACEd,KAAA,CAACC,eAAe;MAACE,mBAAmB,EAAEA,mBAAoB;MAAAY,QAAA,GACxDjB,IAAA,CAACH,MAAM;QACLqB,KAAK,EAAEH,CAAC,CAAC,6BAA6B,CAAE;QACxCI,OAAO,EAAEL,QAAS;QAClBM,OAAO,EAAC;MAAU,CACnB,CAAC,EACFpB,IAAA,CAACH,MAAM;QACLqB,KAAK,EAAEH,CAAC,CAAC,4BAA4B,CAAE;QACvCI,OAAO,EAAEN,QAAS;QAClBO,OAAO,EAAC;MAAS,CAClB,CAAC;IAAA,CACa,CAAC;EAEtB;EAEA,OAAO,IAAI;AACb,CAAC;AAED,MAAMC,0BAA0B,GAAG1B,IAAI,CAACgB,kBAAkB,CAAC;AAC3DU,0BAA0B,CAACC,WAAW,GAAG,oBAAoB;AAE7D,SAASD,0BAA0B,IAAIV,kBAAkB","ignoreList":[]}

package/dist/esm/DatePickers/DateFieldLocalizationProvider.js

@@ -10,9 +10,9 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { memo } from "react";
 import { LocalizationProvider } from "@mui/x-date-pickers";
 import { AdapterLuxon } from "@mui/x-date-pickers/AdapterLuxon";
+import { memo } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
 const DateFieldLocalizationProvider = ({
   children,
@@ -20,8 +20,8 @@ const DateFieldLocalizationProvider = ({
   localeText
 }) => {
   return _jsx(LocalizationProvider, {
-    dateAdapter: AdapterLuxon,
     adapterLocale: defaultedLanguageCode,
+    dateAdapter: AdapterLuxon,
     localeText: localeText,
     children: children
   });

package/dist/esm/DatePickers/DateFieldLocalizationProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateFieldLocalizationProvider.js","names":["memo","LocalizationProvider","AdapterLuxon","jsx","_jsx","DateFieldLocalizationProvider","children","defaultedLanguageCode","localeText","dateAdapter","adapterLocale","MemoizedDateFieldLocalizationProvider","displayName"],"sources":["../../../src/DatePickers/DateFieldLocalizationProvider.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 { memo, PropsWithChildren } from \"react\";\nimport { LocalizationProvider } from \"@mui/x-date-pickers\";\nimport { AdapterLuxon } from \"@mui/x-date-pickers/AdapterLuxon\";\n\nimport { DateFieldsTranslations } from \"./useDateFieldsTranslations.js\";\n\ntype DateFieldLocalizationProviderProps = {\n  localeText: DateFieldsTranslations;\n  defaultedLanguageCode: string;\n};\n\nconst DateFieldLocalizationProvider = ({\n  children,\n  defaultedLanguageCode,\n  localeText,\n}: PropsWithChildren<DateFieldLocalizationProviderProps>) => {\n  return (\n    <LocalizationProvider\n      dateAdapter={AdapterLuxon}\n      adapterLocale={defaultedLanguageCode}\n      localeText={localeText}\n    >\n      {children}\n    </LocalizationProvider>\n  );\n};\n\nconst MemoizedDateFieldLocalizationProvider = memo(\n  DateFieldLocalizationProvider,\n);\nMemoizedDateFieldLocalizationProvider.displayName =\n  \"DateFieldLocalizationProvider\";\n\nexport { MemoizedDateFieldLocalizationProvider as DateFieldLocalizationProvider };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,QAA2B,OAAO;AAC/C,SAASC,oBAAoB,QAAQ,qBAAqB;AAC1D,SAASC,YAAY,QAAQ,kCAAkC;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAShE,MAAMC,6BAA6B,GAAGA,CAAC;EACrCC,QAAQ;EACRC,qBAAqB;EACrBC;AACqD,CAAC,KAAK;EAC3D,OACEJ,IAAA,CAACH,oBAAoB;IACnBQ,WAAW,EAAEP,YAAa;IAC1BQ,aAAa,EAAEH,qBAAsB;IACrCC,UAAU,EAAEA,UAAW;IAAAF,QAAA,EAEtBA;EAAQ,CACW,CAAC;AAE3B,CAAC;AAED,MAAMK,qCAAqC,GAAGX,IAAI,CAChDK,6BACF,CAAC;AACDM,qCAAqC,CAACC,WAAW,GAC/C,+BAA+B;AAEjC,SAASD,qCAAqC,IAAIN,6BAA6B","ignoreList":[]}
+{"version":3,"file":"DateFieldLocalizationProvider.js","names":["LocalizationProvider","AdapterLuxon","memo","jsx","_jsx","DateFieldLocalizationProvider","children","defaultedLanguageCode","localeText","adapterLocale","dateAdapter","MemoizedDateFieldLocalizationProvider","displayName"],"sources":["../../../src/DatePickers/DateFieldLocalizationProvider.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 { LocalizationProvider } from \"@mui/x-date-pickers\";\nimport { AdapterLuxon } from \"@mui/x-date-pickers/AdapterLuxon\";\nimport { memo, PropsWithChildren } from \"react\";\n\nimport { DateFieldsTranslations } from \"./useDateFieldsTranslations.js\";\n\ntype DateFieldLocalizationProviderProps = {\n  defaultedLanguageCode: string;\n  localeText: DateFieldsTranslations;\n};\n\nconst DateFieldLocalizationProvider = ({\n  children,\n  defaultedLanguageCode,\n  localeText,\n}: PropsWithChildren<DateFieldLocalizationProviderProps>) => {\n  return (\n    <LocalizationProvider\n      adapterLocale={defaultedLanguageCode}\n      dateAdapter={AdapterLuxon}\n      localeText={localeText}\n    >\n      {children}\n    </LocalizationProvider>\n  );\n};\n\nconst MemoizedDateFieldLocalizationProvider = memo(\n  DateFieldLocalizationProvider,\n);\nMemoizedDateFieldLocalizationProvider.displayName =\n  \"DateFieldLocalizationProvider\";\n\nexport { MemoizedDateFieldLocalizationProvider as DateFieldLocalizationProvider };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,oBAAoB,QAAQ,qBAAqB;AAC1D,SAASC,YAAY,QAAQ,kCAAkC;AAC/D,SAASC,IAAI,QAA2B,OAAO;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAShD,MAAMC,6BAA6B,GAAGA,CAAC;EACrCC,QAAQ;EACRC,qBAAqB;EACrBC;AACqD,CAAC,KAAK;EAC3D,OACEJ,IAAA,CAACJ,oBAAoB;IACnBS,aAAa,EAAEF,qBAAsB;IACrCG,WAAW,EAAET,YAAa;IAC1BO,UAAU,EAAEA,UAAW;IAAAF,QAAA,EAEtBA;EAAQ,CACW,CAAC;AAE3B,CAAC;AAED,MAAMK,qCAAqC,GAAGT,IAAI,CAChDG,6BACF,CAAC;AACDM,qCAAqC,CAACC,WAAW,GAC/C,+BAA+B;AAEjC,SAASD,qCAAqC,IAAIN,6BAA6B","ignoreList":[]}

package/dist/esm/DatePickers/DatePicker.js

@@ -10,17 +10,18 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
+import styled from "@emotion/styled";
+import { DatePicker as MuiDatePicker } from "@mui/x-date-pickers";
 import { memo, useCallback, useEffect, useMemo, useRef } from "react";
 import { useTranslation } from "react-i18next";
-import { DatePicker as MuiDatePicker } from "@mui/x-date-pickers";
-import styled from "@emotion/styled";
 import { Button } from "../Buttons/index.js";
-import { DateFieldActionBar } from "./DateFieldActionBar.js";
+import { useOdysseyDesignTokens } from "../OdysseyDesignTokensContext.js";
+import { OdysseyThemeProvider } from "../OdysseyThemeProvider.js";
+import { useUniqueId } from "../useUniqueId.js";
 import { DateField } from "./DateField.js";
+import { DateFieldActionBar } from "./DateFieldActionBar.js";
 import { DateFieldLocalizationProvider } from "./DateFieldLocalizationProvider.js";
 import { datePickerTheme } from "./datePickerTheme.js";
-import { useOdysseyDesignTokens } from "../OdysseyDesignTokensContext.js";
-import { OdysseyThemeProvider } from "../OdysseyThemeProvider.js";
 import { TimeZonePicker } from "./TimeZonePicker.js";
 import { useOdysseyDateFields } from "./useOdysseyDateFields.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -49,6 +50,7 @@ const DatePicker = ({
   errorMessage,
   hint,
   HintLinkComponent,
+  id: idOverride,
   isDateEnabled = () => true,
   isDisabled,
   isOptional,
@@ -72,6 +74,7 @@ const DatePicker = ({
   } = useTranslation();
   const inputRef = useRef(null);
   const odysseyDesignTokens = useOdysseyDesignTokens();
+  const datePickerId = useUniqueId(idOverride);
   const {
     closeCalendar,
     commonIcons,
@@ -140,19 +143,20 @@ const DatePicker = ({
       errorMessage: errorMessage,
       hint: hint,
       HintLinkComponent: HintLinkComponent,
+      id: datePickerId,
       inputRef: inputRef,
       isDisabled: isDisabled,
       isOptional: isOptional,
       isReadOnly: isReadOnly,
       label: label,
-      onBlur: onBlur,
-      minDate: minDate,
       maxDate: maxDate,
+      minDate: minDate,
+      onBlur: onBlur,
       onChange: onInputChange,
       timezone: internalTimeZone,
       value: value
     });
-  }, [commonIcons, errorMessage, hint, HintLinkComponent, internalTimeZone, isDisabled, isOptional, isReadOnly, label, onBlur, onInputChange, minDate, maxDate, t, toggleCalendarVisibility]);
+  }, [commonIcons, datePickerId, errorMessage, hint, HintLinkComponent, internalTimeZone, isDisabled, isOptional, isReadOnly, label, onBlur, onInputChange, minDate, maxDate, t, toggleCalendarVisibility]);
   const slots = useMemo(() => ({
     actionBar: DateFieldActionBar,
     field: muiProps => renderDateField(muiProps),
@@ -193,8 +197,8 @@ const DatePicker = ({
             fixedWeekNumber: 6,
             inputRef: inputRef,
             label: label,
-            minDate: minDate,
             maxDate: maxDate,
+            minDate: minDate,
             onChange: formatDateTimeToJsDateStringOnCalendarSelection,
             onClose: closeCalendar,
             open: isOpen,
@@ -202,8 +206,8 @@ const DatePicker = ({
             shouldDisableDate: shouldDisableDate,
             shouldDisableMonth: shouldDisableMonth,
             shouldDisableYear: shouldDisableYear,
-            slots: slots,
             slotProps: slotProps,
+            slots: slots,
             timezone: internalTimeZone,
             value: inputValues?.value
           }, language)
@@ -211,9 +215,9 @@ const DatePicker = ({
       }), timeZoneOptions && timeZonePickerLabel && _jsx(TimeZonePickerContainer, {
         odysseyDesignTokens: odysseyDesignTokens,
         children: _jsx(TimeZonePicker, {
+          isReadOnly: isReadOnly,
           label: timeZonePickerLabel,
           onTimeZoneChange: onTimeZoneChange,
-          isReadOnly: isReadOnly,
           timeZoneOptions: timeZoneOptions,
           value: internalTimeZone
         })