@okta/odyssey-react-mui 1.15.8 → 1.20.0

package/dist/{DataTable/DataTablePagination.js → Pagination/Pagination.js}

@@ -17,7 +17,7 @@ import { ArrowLeftIcon, ArrowRightIcon } from "../icons.generated/index.js";
 import styled from "@emotion/styled";
 import { useOdysseyDesignTokens } from "../OdysseyDesignTokensContext.js";
 import { Box } from "../Box.js";
-import { Trans, useTranslation } from "react-i18next";
+import { usePagination } from "./usePagination.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const PaginationContainer = styled("div")({
@@ -60,51 +60,59 @@ const PaginationButtonContainer = styled("div")({
     marginInlineStart: `0 !important`
   }
 });
-const DataTablePagination = ({
-  pagination,
-  setPagination,
+const Pagination = ({
+  pageIndex,
+  pageSize,
+  onPaginationChange,
+  lastRow,
   totalRows,
   isDisabled,
-  variant
+  variant,
+  rowsPerPageLabel,
+  currentPageLabel,
+  previousLabel,
+  nextLabel,
+  loadMoreLabel
 }) => {
   const odysseyDesignTokens = useOdysseyDesignTokens();
-  const {
-    t
-  } = useTranslation();
-  const [page, setPage] = useState(pagination.pageIndex);
-  const [rowsPerPage, setRowsPerPage] = useState(pagination.pageSize);
-  const initialRowsPerPage = useRef(pagination.pageSize);
-  const firstRow = pagination.pageSize * (pagination.pageIndex - 1) + 1;
-  let lastRow = firstRow + (pagination.pageSize - 1);
-  lastRow = totalRows && lastRow > totalRows ? totalRows : lastRow;
+  const [page, setPage] = useState(pageIndex);
+  const [rowsPerPage, setRowsPerPage] = useState(pageSize);
+  const initialRowsPerPage = useRef(pageSize);
   useEffect(() => {
-    setPage(pagination.pageIndex);
-    setRowsPerPage(pagination.pageSize);
-  }, [pagination]);
+    setPage(pageIndex);
+    setRowsPerPage(pageSize);
+  }, [pageIndex, pageSize]);
+  const {
+    totalRowsLabel
+  } = usePagination({
+    pageIndex,
+    pageSize,
+    totalRows
+  });
   const handlePaginationChange = useCallback(() => {
     const updatedPage = totalRows && page * totalRows > lastRow ? Math.ceil(totalRows / rowsPerPage) : page;
     const updatedRowsPerPage = totalRows && rowsPerPage > totalRows ? totalRows : rowsPerPage;
-    setPagination({
+    onPaginationChange({
       pageIndex: updatedPage,
       pageSize: updatedRowsPerPage
     });
-  }, [page, rowsPerPage, lastRow, setPagination, totalRows]);
+  }, [page, rowsPerPage, lastRow, onPaginationChange, totalRows]);
   const handlePageSubmit = useCallback(event => {
     if (event.key === "Enter") {
-      setPagination({
+      onPaginationChange({
         pageIndex: parseInt(event.currentTarget.value),
         pageSize: rowsPerPage
       });
     }
-  }, [rowsPerPage, setPagination]);
+  }, [rowsPerPage, onPaginationChange]);
   const handleRowsPerPageSubmit = useCallback(event => {
     if (event.key === "Enter") {
-      setPagination({
+      onPaginationChange({
         pageIndex: page,
         pageSize: parseInt(event.currentTarget.value)
       });
     }
-  }, [page, setPagination]);
+  }, [page, onPaginationChange]);
   const setPageFromEvent = useCallback(event => {
     setPage(parseInt(event.target.value));
   }, [setPage]);
@@ -112,28 +120,34 @@ const DataTablePagination = ({
     setRowsPerPage(parseInt(event.target.value));
   }, [setRowsPerPage]);
   const handleLoadMore = useCallback(() => {
-    setPagination({
+    onPaginationChange({
       pageIndex: 1,
       pageSize: rowsPerPage + initialRowsPerPage.current
     });
-  }, [rowsPerPage, setPagination]);
+  }, [rowsPerPage, onPaginationChange]);
   const handleNextButton = useCallback(() => {
-    setPagination({
+    onPaginationChange({
       pageIndex: page + 1,
       pageSize: rowsPerPage
     });
-  }, [setPagination, page, rowsPerPage]);
+  }, [onPaginationChange, page, rowsPerPage]);
   const handlePreviousButton = useCallback(() => {
-    setPagination({
+    onPaginationChange({
       pageIndex: page - 1,
       pageSize: rowsPerPage
     });
-  }, [setPagination, page, rowsPerPage]);
+  }, [onPaginationChange, page, rowsPerPage]);
   const loadMoreIsDisabled = useMemo(() => {
     return totalRows ? rowsPerPage >= totalRows : false;
   }, [rowsPerPage, totalRows]);
   const nextButtonDisabled = useMemo(() => (totalRows ? lastRow >= totalRows : false) || isDisabled, [totalRows, lastRow, isDisabled]);
-  const previousButtonDisabled = useMemo(() => pagination.pageIndex <= 1 || isDisabled, [pagination, isDisabled]);
+  const previousButtonDisabled = useMemo(() => pageIndex <= 1 || isDisabled, [pageIndex, isDisabled]);
+  const rowsPerPageInputProps = useMemo(() => ({
+    "aria-label": rowsPerPageLabel
+  }), [rowsPerPageLabel]);
+  const currentPageInputProps = useMemo(() => ({
+    "aria-label": currentPageLabel
+  }), [currentPageLabel]);
   return variant === "paged" ? _jsxs(PaginationContainer, {
     children: [_jsxs(PaginationSegment, {
       odysseyDesignTokens: odysseyDesignTokens,
@@ -141,7 +155,7 @@ const DataTablePagination = ({
         children: [_jsx(Paragraph, {
           component: "span",
           color: "textSecondary",
-          children: t("table.pagination.rowsperpage")
+          children: rowsPerPageLabel
         }), _jsx(PaginationInput, {
           odysseyDesignTokens: odysseyDesignTokens,
           type: "number",
@@ -150,27 +164,12 @@ const DataTablePagination = ({
           onBlur: handlePaginationChange,
           onKeyDown: handleRowsPerPageSubmit,
           disabled: isDisabled,
-          inputProps: {
-            "aria-label": t("table.pagination.rowsperpage")
-          }
+          inputProps: rowsPerPageInputProps
         })]
       }), _jsx(Paragraph, {
         component: "span",
         color: "textSecondary",
-        children: totalRows ? _jsx(Trans, {
-          i18nKey: "table.pagination.rowswithtotal",
-          values: {
-            firstRow,
-            lastRow,
-            totalRows
-          }
-        }) : _jsx(Trans, {
-          i18nKey: "table.pagination.rowswithouttotal",
-          values: {
-            firstRow,
-            lastRow
-          }
-        })
+        children: totalRowsLabel
       })]
     }), _jsxs(PaginationSegment, {
       odysseyDesignTokens: odysseyDesignTokens,
@@ -178,7 +177,7 @@ const DataTablePagination = ({
         children: [_jsx(Paragraph, {
           component: "span",
           color: "textSecondary",
-          children: t("table.pagination.page")
+          children: currentPageLabel
         }), _jsx(PaginationInput, {
           odysseyDesignTokens: odysseyDesignTokens,
           type: "number",
@@ -187,23 +186,21 @@ const DataTablePagination = ({
           onBlur: handlePaginationChange,
           onKeyDown: handlePageSubmit,
           disabled: isDisabled,
-          inputProps: {
-            "aria-label": t("table.pagination.page")
-          }
+          inputProps: currentPageInputProps
         })]
       }), _jsxs(PaginationButtonContainer, {
         children: [_jsx(Button, {
           startIcon: _jsx(ArrowLeftIcon, {}),
           variant: "floating",
           size: "small",
-          ariaLabel: t("table.pagination.previous"),
+          ariaLabel: previousLabel,
           onClick: handlePreviousButton,
           isDisabled: previousButtonDisabled
         }), _jsx(Button, {
           endIcon: _jsx(ArrowRightIcon, {}),
           variant: "floating",
           size: "small",
-          ariaLabel: t("table.pagination.next"),
+          ariaLabel: nextLabel,
           onClick: handleNextButton,
           isDisabled: nextButtonDisabled
         })]
@@ -211,12 +208,12 @@ const DataTablePagination = ({
     })]
   }) : _jsx(Button, {
     variant: "secondary",
-    label: t("table.pagination.loadmore"),
+    label: loadMoreLabel,
     onClick: handleLoadMore,
     isDisabled: loadMoreIsDisabled
   });
 };
-const MemoizedDataTablePagination = memo(DataTablePagination);
-MemoizedDataTablePagination.displayName = "DataTablePagination";
-export { MemoizedDataTablePagination as DataTablePagination };
-//# sourceMappingURL=DataTablePagination.js.map
+const MemoizedPagination = memo(Pagination);
+MemoizedPagination.displayName = "Pagination";
+export { MemoizedPagination as Pagination };
+//# sourceMappingURL=Pagination.js.map

package/dist/Pagination/Pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.js","names":["memo","useCallback","useEffect","useMemo","useRef","useState","Paragraph","Button","ArrowLeftIcon","ArrowRightIcon","styled","useOdysseyDesignTokens","Box","usePagination","jsx","_jsx","jsxs","_jsxs","PaginationContainer","display","alignItems","justifyContent","PaginationSegment","shouldForwardProp","prop","odysseyDesignTokens","gap","Spacing4","Spacing2","PaginationInput","_InputBase","borderColor","HueNeutral200","borderRadius","BorderRadiusTight","height","Spacing6","width","HueNeutral400","PalettePrimaryMain","PaginationButtonContainer","marginInlineStart","Pagination","pageIndex","pageSize","onPaginationChange","lastRow","totalRows","isDisabled","variant","rowsPerPageLabel","currentPageLabel","previousLabel","nextLabel","loadMoreLabel","page","setPage","rowsPerPage","setRowsPerPage","initialRowsPerPage","totalRowsLabel","handlePaginationChange","updatedPage","Math","ceil","updatedRowsPerPage","handlePageSubmit","event","key","parseInt","currentTarget","value","handleRowsPerPageSubmit","setPageFromEvent","target","setRowsPerPageFromEvent","handleLoadMore","current","handleNextButton","handlePreviousButton","loadMoreIsDisabled","nextButtonDisabled","previousButtonDisabled","rowsPerPageInputProps","currentPageInputProps","children","component","color","type","onChange","onBlur","onKeyDown","disabled","inputProps","startIcon","size","ariaLabel","onClick","endIcon","label","MemoizedPagination","displayName"],"sources":["../../src/Pagination/Pagination.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { InputBase } from \"@mui/material\";\nimport { memo, useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { Paragraph } from \"../Typography\";\nimport { Button } from \"../Button\";\nimport { ArrowLeftIcon, ArrowRightIcon } from \"../icons.generated\";\nimport styled from \"@emotion/styled\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../OdysseyDesignTokensContext\";\nimport { Box } from \"../Box\";\nimport { paginationTypeValues } from \"./constants\";\nimport { usePagination } from \"./usePagination\";\n\nconst PaginationContainer = styled(\"div\")({\n  display: \"flex\",\n  alignItems: \"center\",\n  justifyContent: \"space-between\",\n});\n\nconst PaginationSegment = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({\n  display: \"flex\",\n  alignItems: \"center\",\n  gap: odysseyDesignTokens.Spacing4,\n  \"& > div\": {\n    display: \"flex\",\n    alignItems: \"center\",\n    gap: odysseyDesignTokens.Spacing2,\n  },\n}));\n\nconst PaginationInput = styled(InputBase, {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({\n  borderColor: odysseyDesignTokens.HueNeutral200,\n  borderRadius: odysseyDesignTokens.BorderRadiusTight,\n  height: odysseyDesignTokens.Spacing6,\n  width: \"4.5714285714rem\", // This is a hardcoded value, keep as string\n  \"&:hover\": {\n    borderColor: odysseyDesignTokens.HueNeutral400,\n  },\n  \"&.Mui-focused:hover\": {\n    borderColor: odysseyDesignTokens.PalettePrimaryMain,\n  },\n}));\n\nconst PaginationButtonContainer = styled(\"div\")({\n  \"& > *\": {\n    marginInlineStart: `0 !important`,\n  },\n});\n\nexport type PaginationProps = {\n  /**\n   * The current page index\n   */\n  pageIndex: number;\n  /**\n   * The current page size\n   */\n  pageSize: number;\n  /**\n   * Page index and page size setter\n   */\n  onPaginationChange: ({\n    pageIndex,\n    pageSize,\n  }: {\n    pageIndex: number;\n    pageSize: number;\n  }) => void;\n  /**\n   * The current page last row index\n   */\n  lastRow: number;\n  /**\n   * Total rows count\n   */\n  totalRows?: number;\n  /**\n   * If true, the pagination controls will be disabled\n   */\n  isDisabled?: boolean;\n  /**\n   * The type of pagination controls shown. Defaults to next/prev buttons, but can be\n   * set to a simple \"Load more\" button by setting to \"loadMore\".\n   */\n  variant?: (typeof paginationTypeValues)[number];\n  /**\n   * The label that shows how many results are rendered per page\n   */\n  rowsPerPageLabel: string;\n  /**\n   * The labeled rendered for the current page index\n   */\n  currentPageLabel: string;\n  /**\n   * The label for the previous control\n   */\n  previousLabel: string;\n  /**\n   * The label for the next control\n   */\n  nextLabel: string;\n  /**\n   * If the pagination is of \"loadMore\" variant, then this is the the load more label\n   */\n  loadMoreLabel: string;\n};\n\nconst Pagination = ({\n  pageIndex,\n  pageSize,\n  onPaginationChange,\n  lastRow,\n  totalRows,\n  isDisabled,\n  variant,\n  rowsPerPageLabel,\n  currentPageLabel,\n  previousLabel,\n  nextLabel,\n  loadMoreLabel,\n}: PaginationProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  const [page, setPage] = useState<number>(pageIndex);\n  const [rowsPerPage, setRowsPerPage] = useState<number>(pageSize);\n  const initialRowsPerPage = useRef<number>(pageSize);\n\n  useEffect(() => {\n    setPage(pageIndex);\n    setRowsPerPage(pageSize);\n  }, [pageIndex, pageSize]);\n\n  const { totalRowsLabel } = usePagination({ pageIndex, pageSize, totalRows });\n\n  const handlePaginationChange = useCallback(() => {\n    const updatedPage =\n      totalRows && page * totalRows > lastRow\n        ? Math.ceil(totalRows / rowsPerPage)\n        : page;\n    const updatedRowsPerPage =\n      totalRows && rowsPerPage > totalRows ? totalRows : rowsPerPage;\n\n    onPaginationChange({\n      pageIndex: updatedPage,\n      pageSize: updatedRowsPerPage,\n    });\n  }, [page, rowsPerPage, lastRow, onPaginationChange, totalRows]);\n\n  // The following handlers use React.KeyboardEvent (rather than just KeyboardEvent) becuase React.KeyboardEvent\n  // is generic, while plain KeyboardEvent is not. We need this generic so we can specify the HTMLInputElement,\n  // which allows us to use currentTarget.value\n  const handlePageSubmit = useCallback(\n    (event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n      if (event.key === \"Enter\") {\n        onPaginationChange({\n          pageIndex: parseInt(event.currentTarget.value),\n          pageSize: rowsPerPage,\n        });\n      }\n    },\n    [rowsPerPage, onPaginationChange],\n  );\n\n  const handleRowsPerPageSubmit = useCallback(\n    (event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n      if (event.key === \"Enter\") {\n        onPaginationChange({\n          pageIndex: page,\n          pageSize: parseInt(event.currentTarget.value),\n        });\n      }\n    },\n    [page, onPaginationChange],\n  );\n\n  const setPageFromEvent = useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      setPage(parseInt(event.target.value));\n    },\n    [setPage],\n  );\n\n  const setRowsPerPageFromEvent = useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      setRowsPerPage(parseInt(event.target.value));\n    },\n    [setRowsPerPage],\n  );\n\n  const handleLoadMore = useCallback(() => {\n    onPaginationChange({\n      pageIndex: 1,\n      pageSize: rowsPerPage + initialRowsPerPage.current,\n    });\n  }, [rowsPerPage, onPaginationChange]);\n\n  const handleNextButton = useCallback(() => {\n    onPaginationChange({ pageIndex: page + 1, pageSize: rowsPerPage });\n  }, [onPaginationChange, page, rowsPerPage]);\n\n  const handlePreviousButton = useCallback(() => {\n    onPaginationChange({ pageIndex: page - 1, pageSize: rowsPerPage });\n  }, [onPaginationChange, page, rowsPerPage]);\n\n  const loadMoreIsDisabled = useMemo(() => {\n    return totalRows ? rowsPerPage >= totalRows : false;\n  }, [rowsPerPage, totalRows]);\n\n  const nextButtonDisabled = useMemo(\n    () => (totalRows ? lastRow >= totalRows : false) || isDisabled,\n    [totalRows, lastRow, isDisabled],\n  );\n\n  const previousButtonDisabled = useMemo(\n    () => pageIndex <= 1 || isDisabled,\n    [pageIndex, isDisabled],\n  );\n\n  const rowsPerPageInputProps = useMemo(\n    () => ({\n      \"aria-label\": rowsPerPageLabel,\n    }),\n    [rowsPerPageLabel],\n  );\n\n  const currentPageInputProps = useMemo(\n    () => ({\n      \"aria-label\": currentPageLabel,\n    }),\n    [currentPageLabel],\n  );\n\n  return variant === \"paged\" ? (\n    <PaginationContainer>\n      <PaginationSegment odysseyDesignTokens={odysseyDesignTokens}>\n        <Box>\n          <Paragraph component=\"span\" color=\"textSecondary\">\n            {rowsPerPageLabel}\n          </Paragraph>\n          <PaginationInput\n            odysseyDesignTokens={odysseyDesignTokens}\n            type=\"number\"\n            value={rowsPerPage}\n            onChange={setRowsPerPageFromEvent}\n            onBlur={handlePaginationChange}\n            onKeyDown={handleRowsPerPageSubmit}\n            disabled={isDisabled}\n            inputProps={rowsPerPageInputProps}\n          />\n        </Box>\n        <Paragraph component=\"span\" color=\"textSecondary\">\n          {totalRowsLabel}\n        </Paragraph>\n      </PaginationSegment>\n\n      <PaginationSegment odysseyDesignTokens={odysseyDesignTokens}>\n        {totalRows && (\n          <Box>\n            <Paragraph component=\"span\" color=\"textSecondary\">\n              {currentPageLabel}\n            </Paragraph>\n            <PaginationInput\n              odysseyDesignTokens={odysseyDesignTokens}\n              type=\"number\"\n              value={page}\n              onChange={setPageFromEvent}\n              onBlur={handlePaginationChange}\n              onKeyDown={handlePageSubmit}\n              disabled={isDisabled}\n              inputProps={currentPageInputProps}\n            />\n          </Box>\n        )}\n        <PaginationButtonContainer>\n          <Button\n            startIcon={<ArrowLeftIcon />}\n            variant=\"floating\"\n            size=\"small\"\n            ariaLabel={previousLabel}\n            onClick={handlePreviousButton}\n            isDisabled={previousButtonDisabled}\n          />\n          <Button\n            endIcon={<ArrowRightIcon />}\n            variant=\"floating\"\n            size=\"small\"\n            ariaLabel={nextLabel}\n            onClick={handleNextButton}\n            isDisabled={nextButtonDisabled}\n          />\n        </PaginationButtonContainer>\n      </PaginationSegment>\n    </PaginationContainer>\n  ) : (\n    <Button\n      variant=\"secondary\"\n      label={loadMoreLabel}\n      onClick={handleLoadMore}\n      isDisabled={loadMoreIsDisabled}\n    />\n  );\n};\n\nconst MemoizedPagination = memo(Pagination);\nMemoizedPagination.displayName = \"Pagination\";\n\nexport { MemoizedPagination as Pagination };\n"],"mappings":"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"}

package/dist/Pagination/constants.js

@@ -0,0 +1,14 @@
+/*!
+ * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+export const paginationTypeValues = ["paged", "loadMore"];
+//# sourceMappingURL=constants.js.map

package/dist/Pagination/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","names":["paginationTypeValues"],"sources":["../../src/Pagination/constants.ts"],"sourcesContent":["/*!\n * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nexport const paginationTypeValues = [\"paged\", \"loadMore\"] as const;\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAO,MAAMA,oBAAoB,GAAG,CAAC,OAAO,EAAE,UAAU,CAAU"}

package/dist/Pagination/index.js

@@ -0,0 +1,15 @@
+/*!
+ * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+export { Pagination } from "./Pagination.js";
+export { paginationTypeValues } from "./constants.js";
+export { usePagination } from "./usePagination.js";
+//# sourceMappingURL=index.js.map

package/dist/Pagination/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["Pagination","paginationTypeValues","usePagination"],"sources":["../../src/Pagination/index.ts"],"sourcesContent":["/*!\n * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nexport { Pagination, type PaginationProps } from \"./Pagination\";\nexport { paginationTypeValues } from \"./constants\";\nexport { usePagination } from \"./usePagination\";\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAVA,SAYSA,UAAU;AAAA,SACVC,oBAAoB;AAAA,SACpBC,aAAa"}

package/dist/Pagination/usePagination.js

@@ -0,0 +1,51 @@
+/*!
+ * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { useTranslation } from "react-i18next";
+export const usePagination = ({
+  pageIndex,
+  pageSize,
+  totalRows
+}) => {
+  const {
+    t
+  } = useTranslation();
+  const firstRow = pageSize * (pageIndex - 1) + 1;
+  const lastRow = firstRow + (pageSize - 1);
+  if (totalRows && lastRow > totalRows) {
+    return {
+      firstRow,
+      lastRow: totalRows,
+      totalRowsLabel: totalRows ? t("pagination.rowswithtotal", {
+        firstRow,
+        lastRow,
+        totalRows
+      }) : t("pagination.rowswithouttotal", {
+        firstRow,
+        lastRow
+      })
+    };
+  }
+  return {
+    firstRow,
+    lastRow,
+    totalRowsLabel: totalRows ? t("pagination.rowswithtotal", {
+      firstRow,
+      lastRow,
+      totalRows
+    }) : t("pagination.rowswithouttotal", {
+      firstRow,
+      lastRow
+    })
+  };
+};
+//# sourceMappingURL=usePagination.js.map

package/dist/Pagination/usePagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePagination.js","names":["useTranslation","usePagination","pageIndex","pageSize","totalRows","t","firstRow","lastRow","totalRowsLabel"],"sources":["../../src/Pagination/usePagination.ts"],"sourcesContent":["/*!\n * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { useTranslation } from \"react-i18next\";\n\ntype UsePaginationType = {\n  pageIndex: number;\n  pageSize: number;\n  totalRows?: number;\n};\n\nexport const usePagination = ({\n  pageIndex,\n  pageSize,\n  totalRows,\n}: UsePaginationType) => {\n  const { t } = useTranslation();\n\n  const firstRow = pageSize * (pageIndex - 1) + 1;\n  const lastRow = firstRow + (pageSize - 1);\n  if (totalRows && lastRow > totalRows) {\n    // If the last eligible row is greater than the number of total rows,\n    // show the number of total rows instead (ie, if we're showing rows\n    // 180-200 but there are only 190 rows, show 180-190 instead)\n    return {\n      firstRow,\n      lastRow: totalRows,\n      totalRowsLabel: totalRows\n        ? t(\"pagination.rowswithtotal\", { firstRow, lastRow, totalRows })\n        : t(\"pagination.rowswithouttotal\", { firstRow, lastRow }),\n    };\n  }\n  return {\n    firstRow,\n    lastRow,\n    totalRowsLabel: totalRows\n      ? t(\"pagination.rowswithtotal\", { firstRow, lastRow, totalRows })\n      : t(\"pagination.rowswithouttotal\", { firstRow, lastRow }),\n  };\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,cAAc,QAAQ,eAAe;AAQ9C,OAAO,MAAMC,aAAa,GAAGA,CAAC;EAC5BC,SAAS;EACTC,QAAQ;EACRC;AACiB,CAAC,KAAK;EACvB,MAAM;IAAEC;EAAE,CAAC,GAAGL,cAAc,CAAC,CAAC;EAE9B,MAAMM,QAAQ,GAAGH,QAAQ,IAAID,SAAS,GAAG,CAAC,CAAC,GAAG,CAAC;EAC/C,MAAMK,OAAO,GAAGD,QAAQ,IAAIH,QAAQ,GAAG,CAAC,CAAC;EACzC,IAAIC,SAAS,IAAIG,OAAO,GAAGH,SAAS,EAAE;IAIpC,OAAO;MACLE,QAAQ;MACRC,OAAO,EAAEH,SAAS;MAClBI,cAAc,EAAEJ,SAAS,GACrBC,CAAC,CAAC,0BAA0B,EAAE;QAAEC,QAAQ;QAAEC,OAAO;QAAEH;MAAU,CAAC,CAAC,GAC/DC,CAAC,CAAC,6BAA6B,EAAE;QAAEC,QAAQ;QAAEC;MAAQ,CAAC;IAC5D,CAAC;EACH;EACA,OAAO;IACLD,QAAQ;IACRC,OAAO;IACPC,cAAc,EAAEJ,SAAS,GACrBC,CAAC,CAAC,0BAA0B,EAAE;MAAEC,QAAQ;MAAEC,OAAO;MAAEH;IAAU,CAAC,CAAC,GAC/DC,CAAC,CAAC,6BAA6B,EAAE;MAAEC,QAAQ;MAAEC;IAAQ,CAAC;EAC5D,CAAC;AACH,CAAC"}

package/dist/Radio.js

@@ -1,5 +1,6 @@
 import _FormControlLabel from "@mui/material/FormControlLabel";
 import _Radio from "@mui/material/Radio";
+import _FormHelperText from "@mui/material/FormHelperText";
 /*!
  * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.
  * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
@@ -11,14 +12,18 @@ import _Radio from "@mui/material/Radio";
  *
  * See the License for the specific language governing permissions and limitations under the License.
  */
-import { memo, useCallback, useRef, useImperativeHandle } from "react";
+import { memo, useCallback, useMemo, useRef, useImperativeHandle } from "react";
+import { Typography } from "./Typography.js";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const Radio = ({
+  hint,
   inputRef,
   isChecked,
   isDisabled,
   isInvalid,
-  label,
+  label: labelProp,
   name,
   testId,
   translate,
@@ -34,9 +39,16 @@ const Radio = ({
       }
     };
   }, []);
-  const onChange = useCallback((event, checked) => {
-    onChangeProp?.(event, checked);
-  }, [onChangeProp]);
+  const label = useMemo(() => _jsxs(_Fragment, {
+    children: [_jsx(Typography, {
+      component: "span",
+      children: labelProp
+    }), hint && _jsx(_FormHelperText, {
+      translate: translate,
+      children: hint
+    })]
+  }), [labelProp, hint, translate]);
+  const onChange = useCallback((event, checked) => onChangeProp?.(event, checked), [onChangeProp]);
   const onBlur = useCallback(event => {
     onBlurProp?.(event);
   }, [onBlurProp]);

package/dist/Radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","names":["memo","useCallback","useRef","useImperativeHandle","jsx","_jsx","Radio","inputRef","isChecked","isDisabled","isInvalid","label","name","testId","translate","value","onChange","onChangeProp","onBlur","onBlurProp","localInputRef","focus","current","event","checked","_FormControlLabel","className","control","_Radio","inputProps","disabled","MemoizedRadio","displayName"],"sources":["../src/Radio.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  FormControlLabel,\n  FormControlLabelProps as MuiFormControlLabelProps,\n  Radio as MuiRadio,\n  RadioProps as MuiRadioProps,\n} from \"@mui/material\";\nimport { memo, useCallback, useRef, useImperativeHandle } from \"react\";\n\nimport { FieldComponentProps } from \"./FieldComponentProps\";\nimport type { HtmlProps } from \"./HtmlProps\";\nimport { FocusHandle } from \"./inputUtils\";\n\nexport type RadioProps = {\n  /**\n   * The ref forwarded to the Radio\n   */\n  inputRef?: React.RefObject<FocusHandle>;\n  /**\n   * If `true`, the Radio is selected\n   */\n  isChecked?: boolean;\n  /**\n   * If `true`, the Radio has an invalid value\n   */\n  isInvalid?: boolean;\n  /**\n   * The label text for the Radio\n   */\n  label: string;\n  /**\n   * The value attribute of the Radio\n   */\n  value: string;\n  /**\n   * Callback fired when the state is changed. Provides event and checked value.\n   */\n  onChange?: MuiRadioProps[\"onChange\"];\n  /**\n   * Callback fired when the blur event happens. Provides event value.\n   */\n  onBlur?: MuiFormControlLabelProps[\"onBlur\"];\n} & Pick<FieldComponentProps, \"isDisabled\" | \"name\"> &\n  Pick<HtmlProps, \"testId\" | \"translate\">;\n\nconst Radio = ({\n  inputRef,\n  isChecked,\n  isDisabled,\n  isInvalid,\n  label,\n  name,\n  testId,\n  translate,\n  value,\n  onChange: onChangeProp,\n  onBlur: onBlurProp,\n}: RadioProps) => {\n  const localInputRef = useRef<HTMLInputElement>(null);\n  useImperativeHandle(\n    inputRef,\n    () => {\n      return {\n        focus: () => {\n          localInputRef.current?.focus();\n        },\n      };\n    },\n    [],\n  );\n\n  const onChange = useCallback<NonNullable<MuiRadioProps[\"onChange\"]>>(\n    (event, checked) => {\n      onChangeProp?.(event, checked);\n    },\n    [onChangeProp],\n  );\n\n  const onBlur = useCallback<NonNullable<MuiFormControlLabelProps[\"onBlur\"]>>(\n    (event) => {\n      onBlurProp?.(event);\n    },\n    [onBlurProp],\n  );\n\n  return (\n    <FormControlLabel\n      checked={isChecked}\n      className={isInvalid ? \"Mui-error\" : \"\"}\n      control={\n        <MuiRadio\n          inputProps={{\n            \"data-se\": testId,\n          }}\n          inputRef={localInputRef}\n          onChange={onChange}\n        />\n      }\n      disabled={isDisabled}\n      label={label}\n      name={name}\n      translate={translate}\n      value={value}\n      onBlur={onBlur}\n    />\n  );\n};\n\nconst MemoizedRadio = memo(Radio);\nMemoizedRadio.displayName = \"Radio\";\n\nexport { MemoizedRadio as Radio };\n"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAQA,SAASA,IAAI,EAAEC,WAAW,EAAEC,MAAM,EAAEC,mBAAmB,QAAQ,OAAO;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAsCvE,MAAMC,KAAK,GAAGA,CAAC;EACbC,QAAQ;EACRC,SAAS;EACTC,UAAU;EACVC,SAAS;EACTC,KAAK;EACLC,IAAI;EACJC,MAAM;EACNC,SAAS;EACTC,KAAK;EACLC,QAAQ,EAAEC,YAAY;EACtBC,MAAM,EAAEC;AACE,CAAC,KAAK;EAChB,MAAMC,aAAa,GAAGlB,MAAM,CAAmB,IAAI,CAAC;EACpDC,mBAAmB,CACjBI,QAAQ,EACR,MAAM;IACJ,OAAO;MACLc,KAAK,EAAEA,CAAA,KAAM;QACXD,aAAa,CAACE,OAAO,EAAED,KAAK,CAAC,CAAC;MAChC;IACF,CAAC;EACH,CAAC,EACD,EACF,CAAC;EAED,MAAML,QAAQ,GAAGf,WAAW,CAC1B,CAACsB,KAAK,EAAEC,OAAO,KAAK;IAClBP,YAAY,GAAGM,KAAK,EAAEC,OAAO,CAAC;EAChC,CAAC,EACD,CAACP,YAAY,CACf,CAAC;EAED,MAAMC,MAAM,GAAGjB,WAAW,CACvBsB,KAAK,IAAK;IACTJ,UAAU,GAAGI,KAAK,CAAC;EACrB,CAAC,EACD,CAACJ,UAAU,CACb,CAAC;EAED,OACEd,IAAA,CAAAoB,iBAAA;IACED,OAAO,EAAEhB,SAAU;IACnBkB,SAAS,EAAEhB,SAAS,GAAG,WAAW,GAAG,EAAG;IACxCiB,OAAO,EACLtB,IAAA,CAAAuB,MAAA;MACEC,UAAU,EAAE;QACV,SAAS,EAAEhB;MACb,CAAE;MACFN,QAAQ,EAAEa,aAAc;MACxBJ,QAAQ,EAAEA;IAAS,CACpB,CACF;IACDc,QAAQ,EAAErB,UAAW;IACrBE,KAAK,EAAEA,KAAM;IACbC,IAAI,EAAEA,IAAK;IACXE,SAAS,EAAEA,SAAU;IACrBC,KAAK,EAAEA,KAAM;IACbG,MAAM,EAAEA;EAAO,CAChB,CAAC;AAEN,CAAC;AAED,MAAMa,aAAa,GAAG/B,IAAI,CAACM,KAAK,CAAC;AACjCyB,aAAa,CAACC,WAAW,GAAG,OAAO;AAEnC,SAASD,aAAa,IAAIzB,KAAK"}
+{"version":3,"file":"Radio.js","names":["memo","useCallback","useMemo","useRef","useImperativeHandle","Typography","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","Radio","hint","inputRef","isChecked","isDisabled","isInvalid","label","labelProp","name","testId","translate","value","onChange","onChangeProp","onBlur","onBlurProp","localInputRef","focus","current","children","component","_FormHelperText","event","checked","_FormControlLabel","className","control","_Radio","inputProps","disabled","MemoizedRadio","displayName"],"sources":["../src/Radio.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  FormControlLabel,\n  FormControlLabelProps as MuiFormControlLabelProps,\n  FormHelperText,\n  Radio as MuiRadio,\n  RadioProps as MuiRadioProps,\n} from \"@mui/material\";\n\nimport { memo, useCallback, useMemo, useRef, useImperativeHandle } from \"react\";\n\nimport { FieldComponentProps } from \"./FieldComponentProps\";\nimport type { HtmlProps } from \"./HtmlProps\";\nimport { FocusHandle } from \"./inputUtils\";\nimport { Typography } from \"./Typography\";\n\nexport type RadioProps = {\n  /**\n   * The ref forwarded to the Radio\n   */\n  inputRef?: React.RefObject<FocusHandle>;\n  /**\n   * If `true`, the Radio is selected\n   */\n  isChecked?: boolean;\n  /**\n   * If `true`, the Radio has an invalid value\n   */\n  isInvalid?: boolean;\n  /**\n   * The label text for the Radio\n   */\n  label: string;\n  /**\n   * The value attribute of the Radio\n   */\n  value: string;\n  /**\n   * Callback fired when the state is changed. Provides event and checked value.\n   */\n  onChange?: MuiRadioProps[\"onChange\"];\n  /**\n   * Callback fired when the blur event happens. Provides event value.\n   */\n  onBlur?: MuiFormControlLabelProps[\"onBlur\"];\n} & Pick<FieldComponentProps, \"hint\" | \"id\" | \"isDisabled\" | \"name\"> &\n  Pick<HtmlProps, \"testId\" | \"translate\">;\n\nconst Radio = ({\n  hint,\n  inputRef,\n  isChecked,\n  isDisabled,\n  isInvalid,\n  label: labelProp,\n  name,\n  testId,\n  translate,\n  value,\n  onChange: onChangeProp,\n  onBlur: onBlurProp,\n}: RadioProps) => {\n  const localInputRef = useRef<HTMLInputElement>(null);\n  useImperativeHandle(\n    inputRef,\n    () => {\n      return {\n        focus: () => {\n          localInputRef.current?.focus();\n        },\n      };\n    },\n    [],\n  );\n\n  const label = useMemo(\n    () => (\n      <>\n        <Typography component=\"span\">{labelProp}</Typography>\n        {hint && <FormHelperText translate={translate}>{hint}</FormHelperText>}\n      </>\n    ),\n    [labelProp, hint, translate],\n  );\n\n  const onChange = useCallback<NonNullable<MuiRadioProps[\"onChange\"]>>(\n    (event, checked) => onChangeProp?.(event, checked),\n    [onChangeProp],\n  );\n\n  const onBlur = useCallback<NonNullable<MuiFormControlLabelProps[\"onBlur\"]>>(\n    (event) => {\n      onBlurProp?.(event);\n    },\n    [onBlurProp],\n  );\n\n  return (\n    <FormControlLabel\n      checked={isChecked}\n      className={isInvalid ? \"Mui-error\" : \"\"}\n      control={\n        <MuiRadio\n          inputProps={{\n            \"data-se\": testId,\n          }}\n          inputRef={localInputRef}\n          onChange={onChange}\n        />\n      }\n      disabled={isDisabled}\n      label={label}\n      name={name}\n      translate={translate}\n      value={value}\n      onBlur={onBlur}\n    />\n  );\n};\n\nconst MemoizedRadio = memo(Radio);\nMemoizedRadio.displayName = \"Radio\";\n\nexport { MemoizedRadio as Radio };\n"],"mappings":";;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAUA,SAASA,IAAI,EAAEC,WAAW,EAAEC,OAAO,EAAEC,MAAM,EAAEC,mBAAmB,QAAQ,OAAO;AAAC,SAKvEC,UAAU;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,QAAA,IAAAC,SAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAkCnB,MAAMC,KAAK,GAAGA,CAAC;EACbC,IAAI;EACJC,QAAQ;EACRC,SAAS;EACTC,UAAU;EACVC,SAAS;EACTC,KAAK,EAAEC,SAAS;EAChBC,IAAI;EACJC,MAAM;EACNC,SAAS;EACTC,KAAK;EACLC,QAAQ,EAAEC,YAAY;EACtBC,MAAM,EAAEC;AACE,CAAC,KAAK;EAChB,MAAMC,aAAa,GAAGzB,MAAM,CAAmB,IAAI,CAAC;EACpDC,mBAAmB,CACjBU,QAAQ,EACR,MAAM;IACJ,OAAO;MACLe,KAAK,EAAEA,CAAA,KAAM;QACXD,aAAa,CAACE,OAAO,EAAED,KAAK,CAAC,CAAC;MAChC;IACF,CAAC;EACH,CAAC,EACD,EACF,CAAC;EAED,MAAMX,KAAK,GAAGhB,OAAO,CACnB,MACES,KAAA,CAAAF,SAAA;IAAAsB,QAAA,GACExB,IAAA,CAACF,UAAU;MAAC2B,SAAS,EAAC,MAAM;MAAAD,QAAA,EAAEZ;IAAS,CAAa,CAAC,EACpDN,IAAI,IAAIN,IAAA,CAAA0B,eAAA;MAAgBX,SAAS,EAAEA,SAAU;MAAAS,QAAA,EAAElB;IAAI,CAAiB,CAAC;EAAA,CACtE,CACH,EACD,CAACM,SAAS,EAAEN,IAAI,EAAES,SAAS,CAC7B,CAAC;EAED,MAAME,QAAQ,GAAGvB,WAAW,CAC1B,CAACiC,KAAK,EAAEC,OAAO,KAAKV,YAAY,GAAGS,KAAK,EAAEC,OAAO,CAAC,EAClD,CAACV,YAAY,CACf,CAAC;EAED,MAAMC,MAAM,GAAGzB,WAAW,CACvBiC,KAAK,IAAK;IACTP,UAAU,GAAGO,KAAK,CAAC;EACrB,CAAC,EACD,CAACP,UAAU,CACb,CAAC;EAED,OACEpB,IAAA,CAAA6B,iBAAA;IACED,OAAO,EAAEpB,SAAU;IACnBsB,SAAS,EAAEpB,SAAS,GAAG,WAAW,GAAG,EAAG;IACxCqB,OAAO,EACL/B,IAAA,CAAAgC,MAAA;MACEC,UAAU,EAAE;QACV,SAAS,EAAEnB;MACb,CAAE;MACFP,QAAQ,EAAEc,aAAc;MACxBJ,QAAQ,EAAEA;IAAS,CACpB,CACF;IACDiB,QAAQ,EAAEzB,UAAW;IACrBE,KAAK,EAAEA,KAAM;IACbE,IAAI,EAAEA,IAAK;IACXE,SAAS,EAAEA,SAAU;IACrBC,KAAK,EAAEA,KAAM;IACbG,MAAM,EAAEA;EAAO,CAChB,CAAC;AAEN,CAAC;AAED,MAAMgB,aAAa,GAAG1C,IAAI,CAACY,KAAK,CAAC;AACjC8B,aAAa,CAACC,WAAW,GAAG,OAAO;AAEnC,SAASD,aAAa,IAAI9B,KAAK"}

package/dist/ScreenReaderText.js

@@ -18,11 +18,15 @@ const style = {
   ...visuallyHidden
 };
 const ScreenReaderText = ({
+  ariaHidden,
   children,
+  id,
   translate
 }) => _jsx(_Box, {
+  "aria-hidden": ariaHidden,
   sx: style,
   component: "span",
+  id: id,
   translate: translate,
   children: children
 });

package/dist/ScreenReaderText.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScreenReaderText.js","names":["memo","visuallyHidden","jsx","_jsx","style","ScreenReaderText","children","translate","_Box","sx","component","MemoizedScreenReaderText","displayName"],"sources":["../src/ScreenReaderText.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { memo, ReactNode } from \"react\";\nimport { Box } from \"@mui/material\";\nimport { visuallyHidden } from \"@mui/utils\";\nimport { HtmlProps } from \"./HtmlProps\";\n\nexport type ScreenReaderTextProps = {\n  /**\n   * The visually-hidden text.\n   */\n  children: ReactNode;\n} & Pick<HtmlProps, \"translate\">;\n\n/**\n * MUI sx expects you pass in a CSS object, not an object with CSS.\n * They seem identical, but only if you create a new object like this will MUI be happy with the type of visuallyHidden.\n * It's otherwise a regular object with CSS properties.\n */\nconst style = { ...visuallyHidden };\n\nconst ScreenReaderText = ({ children, translate }: ScreenReaderTextProps) => (\n  <Box sx={style} component=\"span\" translate={translate}>\n    {children}\n  </Box>\n);\n\nconst MemoizedScreenReaderText = memo(ScreenReaderText);\nMemoizedScreenReaderText.displayName = \"ScreenReaderText\";\n\nexport { MemoizedScreenReaderText as ScreenReaderText };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,QAAmB,OAAO;AAEvC,SAASC,cAAc,QAAQ,YAAY;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAe5C,MAAMC,KAAK,GAAG;EAAE,GAAGH;AAAe,CAAC;AAEnC,MAAMI,gBAAgB,GAAGA,CAAC;EAAEC,QAAQ;EAAEC;AAAiC,CAAC,KACtEJ,IAAA,CAAAK,IAAA;EAAKC,EAAE,EAAEL,KAAM;EAACM,SAAS,EAAC,MAAM;EAACH,SAAS,EAAEA,SAAU;EAAAD,QAAA,EACnDA;AAAQ,CACN,CACN;AAED,MAAMK,wBAAwB,GAAGX,IAAI,CAACK,gBAAgB,CAAC;AACvDM,wBAAwB,CAACC,WAAW,GAAG,kBAAkB;AAEzD,SAASD,wBAAwB,IAAIN,gBAAgB"}
+{"version":3,"file":"ScreenReaderText.js","names":["memo","visuallyHidden","jsx","_jsx","style","ScreenReaderText","ariaHidden","children","id","translate","_Box","sx","component","MemoizedScreenReaderText","displayName"],"sources":["../src/ScreenReaderText.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { memo, ReactNode } from \"react\";\nimport { Box } from \"@mui/material\";\nimport { visuallyHidden } from \"@mui/utils\";\nimport { HtmlProps } from \"./HtmlProps\";\n\nexport type ScreenReaderTextProps = {\n  /**\n   * The visually-hidden text.\n   */\n  children: ReactNode;\n  id?: string;\n} & Pick<HtmlProps, \"ariaHidden\" | \"translate\">;\n\n/**\n * MUI sx expects you pass in a CSS object, not an object with CSS.\n * They seem identical, but only if you create a new object like this will MUI be happy with the type of visuallyHidden.\n * It's otherwise a regular object with CSS properties.\n */\nconst style = { ...visuallyHidden };\n\nconst ScreenReaderText = ({\n  ariaHidden,\n  children,\n  id,\n  translate,\n}: ScreenReaderTextProps) => (\n  <Box\n    aria-hidden={ariaHidden}\n    sx={style}\n    component=\"span\"\n    id={id}\n    translate={translate}\n  >\n    {children}\n  </Box>\n);\n\nconst MemoizedScreenReaderText = memo(ScreenReaderText);\nMemoizedScreenReaderText.displayName = \"ScreenReaderText\";\n\nexport { MemoizedScreenReaderText as ScreenReaderText };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,QAAmB,OAAO;AAEvC,SAASC,cAAc,QAAQ,YAAY;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAgB5C,MAAMC,KAAK,GAAG;EAAE,GAAGH;AAAe,CAAC;AAEnC,MAAMI,gBAAgB,GAAGA,CAAC;EACxBC,UAAU;EACVC,QAAQ;EACRC,EAAE;EACFC;AACqB,CAAC,KACtBN,IAAA,CAAAO,IAAA;EACE,eAAaJ,UAAW;EACxBK,EAAE,EAAEP,KAAM;EACVQ,SAAS,EAAC,MAAM;EAChBJ,EAAE,EAAEA,EAAG;EACPC,SAAS,EAAEA,SAAU;EAAAF,QAAA,EAEpBA;AAAQ,CACN,CACN;AAED,MAAMM,wBAAwB,GAAGb,IAAI,CAACK,gBAAgB,CAAC;AACvDQ,wBAAwB,CAACC,WAAW,GAAG,kBAAkB;AAEzD,SAASD,wBAAwB,IAAIR,gBAAgB"}

package/dist/Select.js

@@ -80,15 +80,7 @@ const ChipsInnerContainer = styled(_Box, {
   opacity: ${({
   isInteractive
 }) => isInteractive ? 1 : 0};
-`;
-const ChipsSpacer = styled("div", {
-  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
-})`
-  display: inline-block;
-  border-color: transparent;
-  border-style: solid none;
-  border-width: 1px;
-  height: ${({
+  min-height: ${({
   odysseyDesignTokens
 }) => odysseyDesignTokens.Spacing6};
 `;
@@ -151,10 +143,10 @@ const Select = ({
       }
     } = event;
     if (controlledStateRef.current !== CONTROLLED) {
-      setInternalSelectedValues(typeof value === "string" ? value.split(",") : value);
+      setInternalSelectedValues(typeof value === "string" && hasMultipleChoices ? value.split(",") : value);
     }
     onChangeProp?.(event, child);
-  }, [onChangeProp]);
+  }, [hasMultipleChoices, onChangeProp]);
   const normalizedOptions = useMemo(() => options.map(option => {
     if (typeof option === "object") {
       const value = option?.value === "" ? option.value : option.value || option.text;
@@ -170,45 +162,43 @@ const Select = ({
       type: "option"
     };
   }), [options]);
+  const removeSelectedValue = useCallback(selectedValue => {
+    if (Array.isArray(internalSelectedValues)) {
+      const newValue = internalSelectedValues.filter(internalSelectedValue => internalSelectedValue !== selectedValue);
+      const syntheticEvent = {
+        target: {
+          value: newValue
+        }
+      };
+      onChange(syntheticEvent, null);
+    }
+  }, [internalSelectedValues, onChange]);
   const Chips = useCallback(({
-    selection,
     isInteractive
   }) => {
-    const removeSelection = itemToRemove => {
-      if (Array.isArray(internalSelectedValues)) {
-        const newValue = internalSelectedValues.filter(item => item !== itemToRemove);
-        const syntheticEvent = {
-          target: {
-            value: newValue
-          }
-        };
-        onChange(syntheticEvent, null);
-      }
-    };
     const stopPropagation = event => event.stopPropagation();
-    return _jsxs(ChipsInnerContainer, {
+    const hasNonInteractiveIcon = !isInteractive && controlledStateRef.current === CONTROLLED && hasMultipleChoices;
+    return Array.isArray(internalSelectedValues) && _jsx(ChipsInnerContainer, {
       isInteractive: isInteractive,
       odysseyDesignTokens: odysseyDesignTokens,
-      children: [selection.length <= 0 && _jsx(ChipsSpacer, {
-        odysseyDesignTokens: odysseyDesignTokens
-      }), selection.map(item => item?.length > 0 && _jsx(_Chip, {
+      children: internalSelectedValues.map(item => item?.length > 0 && _jsx(_Chip, {
         label: _jsxs(_Fragment, {
-          children: [item, !isInteractive && controlledStateRef.current === CONTROLLED && hasMultipleChoices && _jsx(NonInteractiveIcon, {
+          children: [item, hasNonInteractiveIcon && _jsx(NonInteractiveIcon, {
             odysseyDesignTokens: odysseyDesignTokens
           })]
         }),
         tabIndex: -1,
-        onDelete: isInteractive && controlledStateRef.current === CONTROLLED ? () => removeSelection(item) : undefined,
+        onDelete: isInteractive && controlledStateRef.current === CONTROLLED ? () => removeSelectedValue(item) : undefined,
         deleteIcon: _jsx(CloseCircleFilledIcon, {
           sx: {
             pointerEvents: "auto"
           },
           onMouseDown: stopPropagation
         })
-      }, item))]
+      }, item))
     });
-  }, [controlledStateRef, hasMultipleChoices, internalSelectedValues, odysseyDesignTokens, onChange]);
-  const children = useMemo(() => normalizedOptions.map((option, index) => {
+  }, [controlledStateRef, hasMultipleChoices, internalSelectedValues, odysseyDesignTokens, removeSelectedValue]);
+  const renderedOptions = useMemo(() => normalizedOptions.map((option, index) => {
     if (option.type === "heading") {
       return _jsxs(_ListSubheader, {
         children: [" ", option.text, " "]
@@ -220,13 +210,12 @@ const Select = ({
       selected: isSelected,
       children: [hasMultipleChoices && _jsx(_Checkbox, {
         checked: isSelected
-      }), option.text, !hasMultipleChoices && (internalSelectedValues?.includes(option.value) || internalSelectedValues === option.value) && _jsx(_ListItemSecondaryAction, {
+      }), option.text, !hasMultipleChoices && internalSelectedValues === option.value && _jsx(_ListItemSecondaryAction, {
         children: _jsx(CheckIcon, {})
       })]
     }, normalizedKey(option.text, index.toString()));
   }), [hasMultipleChoices, normalizedOptions, internalSelectedValues]);
   const renderValue = useCallback(value => Array.isArray(value) && _jsx(Chips, {
-    selection: value,
     isInteractive: false
   }), [Chips]);
   const renderFieldComponent = useCallback(({
@@ -239,7 +228,7 @@ const Select = ({
       ...inputValues,
       "aria-describedby": ariaDescribedBy,
       "aria-errormessage": errorMessageElementId,
-      children: children,
+      displayEmpty: true,
       id: id,
       inputProps: {
         "data-se": testId
@@ -252,15 +241,17 @@ const Select = ({
       onChange: onChange,
       onFocus: onFocus,
       renderValue: hasMultipleChoices ? renderValue : undefined,
-      translate: translate
-    }), hasMultipleChoices && Array.isArray(value) && _jsx(ChipsPositioningContainer, {
-      odysseyDesignTokens: odysseyDesignTokens,
-      children: _jsx(Chips, {
-        selection: value,
-        isInteractive: true
+      translate: translate,
+      children: renderedOptions
+    }), hasMultipleChoices && _jsx(_Fragment, {
+      children: _jsx(ChipsPositioningContainer, {
+        odysseyDesignTokens: odysseyDesignTokens,
+        children: _jsx(Chips, {
+          isInteractive: true
+        })
       })
     })]
-  }), [children, Chips, inputValues, hasMultipleChoices, nameOverride, odysseyDesignTokens, onBlur, onChange, onFocus, renderValue, testId, translate, value]);
+  }), [Chips, inputValues, hasMultipleChoices, nameOverride, odysseyDesignTokens, onBlur, onChange, onFocus, renderedOptions, renderValue, testId, translate]);
   return _jsx(Field, {
     ariaDescribedBy: ariaDescribedBy,
     errorMessage: errorMessage,