@okta/odyssey-react-mui 1.25.0 → 1.27.0

package/dist/OdysseyThemeProvider.js

@@ -10,38 +10,58 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
+import { useMemo } from "react";
 import { createTheme, ThemeProvider as MuiThemeProvider } from "@mui/material/styles";
-import { memo, useMemo } from "react";
 import { deepmerge } from "@mui/utils";
+import styled from "@emotion/styled";
 import { createOdysseyMuiTheme } from "./theme/index.js";
 import * as Tokens from "@okta/odyssey-design-tokens";
+import { ContrastModeContext, useContrastMode } from "./useContrastMode.js";
 import { OdysseyDesignTokensContext } from "./OdysseyDesignTokensContext.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const OdysseyThemeProvider = ({
+const StyledContrastContainer = styled("div")(() => ({
+  height: "inherit"
+}));
+export const OdysseyThemeProvider = ({
   children,
+  contrastMode: explicitContrastMode,
   designTokensOverride,
   shadowDomElement,
   shadowRootElement,
   themeOverride
 }) => {
+  const {
+    contrastMode,
+    contrastContainerRef
+  } = useContrastMode({
+    contrastMode: explicitContrastMode
+  });
   const odysseyTokens = useMemo(() => ({
     ...Tokens,
     ...designTokensOverride
   }), [designTokensOverride]);
+  const effectiveShadowRootElement = shadowRootElement || shadowDomElement;
   const odysseyTheme = useMemo(() => createOdysseyMuiTheme({
+    contrastMode,
     odysseyTokens,
-    shadowRootElement: shadowRootElement || shadowDomElement,
-    contrastMode: "highContrast"
-  }), [odysseyTokens, shadowDomElement, shadowRootElement]);
-  const customOdysseyTheme = useMemo(() => themeOverride && createTheme(deepmerge(odysseyTheme, themeOverride)), [odysseyTheme, themeOverride]);
-  return _jsx(MuiThemeProvider, {
-    theme: customOdysseyTheme ?? odysseyTheme,
-    children: _jsx(OdysseyDesignTokensContext.Provider, {
-      value: odysseyTokens,
-      children: children
+    shadowRootElement: effectiveShadowRootElement
+  }), [contrastMode, odysseyTokens, effectiveShadowRootElement]);
+  const customOdysseyTheme = useMemo(() => createTheme(deepmerge(odysseyTheme, themeOverride || {})), [odysseyTheme, themeOverride]);
+  const contrastModeProviderValue = useMemo(() => ({
+    contrastMode
+  }), [contrastMode]);
+  return _jsx(StyledContrastContainer, {
+    ref: contrastContainerRef,
+    children: _jsx(ContrastModeContext.Provider, {
+      value: contrastModeProviderValue,
+      children: _jsx(MuiThemeProvider, {
+        theme: customOdysseyTheme,
+        children: _jsx(OdysseyDesignTokensContext.Provider, {
+          value: odysseyTokens,
+          children: children
+        })
+      })
     })
   });
 };
-const MemoizedOdysseyThemeProvider = memo(OdysseyThemeProvider);
-export { MemoizedOdysseyThemeProvider as OdysseyThemeProvider };
 //# sourceMappingURL=OdysseyThemeProvider.js.map

package/dist/OdysseyThemeProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"OdysseyThemeProvider.js","names":["createTheme","ThemeProvider","MuiThemeProvider","memo","useMemo","deepmerge","createOdysseyMuiTheme","Tokens","OdysseyDesignTokensContext","jsx","_jsx","OdysseyThemeProvider","children","designTokensOverride","shadowDomElement","shadowRootElement","themeOverride","odysseyTokens","odysseyTheme","contrastMode","customOdysseyTheme","theme","Provider","value","MemoizedOdysseyThemeProvider"],"sources":["../src/OdysseyThemeProvider.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  createTheme,\n  ThemeProvider as MuiThemeProvider,\n} from \"@mui/material/styles\";\nimport { memo, ReactNode, useMemo } from \"react\";\n\nimport { ThemeOptions } from \"@mui/material\";\nimport { deepmerge } from \"@mui/utils\";\nimport { createOdysseyMuiTheme, DesignTokensOverride } from \"./theme\";\nimport * as Tokens from \"@okta/odyssey-design-tokens\";\nimport { OdysseyDesignTokensContext } from \"./OdysseyDesignTokensContext\";\n\nexport type OdysseyThemeProviderProps = {\n  children: ReactNode;\n  designTokensOverride?: DesignTokensOverride;\n  /** @deprecated Use `shadowRootElement` instead. */\n  shadowDomElement?: HTMLDivElement | HTMLElement | undefined;\n  shadowRootElement?: HTMLDivElement | HTMLElement;\n  themeOverride?: ThemeOptions;\n};\n\ndeclare module \"@mui/material/styles\" {\n  interface Theme {\n    contrastMode: string;\n  }\n  interface ThemeOptions {\n    contrastMode?: string;\n  }\n}\n\n/**\n * This function doesn't include the Emotion Cache or Translations. You should probably be using `OdysseyProvider`.\n *\n * Some teams have a need to wrap separately (SIW), but most teams will never need to use this explicitly.\n */\nconst OdysseyThemeProvider = ({\n  children,\n  designTokensOverride,\n  shadowDomElement,\n  shadowRootElement,\n  themeOverride,\n}: OdysseyThemeProviderProps) => {\n  const odysseyTokens = useMemo(\n    () => ({ ...Tokens, ...designTokensOverride }),\n    [designTokensOverride],\n  );\n\n  const odysseyTheme = useMemo(\n    () =>\n      createOdysseyMuiTheme({\n        odysseyTokens,\n        shadowRootElement: shadowRootElement || shadowDomElement,\n        contrastMode: \"highContrast\",\n      }),\n    [odysseyTokens, shadowDomElement, shadowRootElement],\n  );\n\n  const customOdysseyTheme = useMemo(\n    () => themeOverride && createTheme(deepmerge(odysseyTheme, themeOverride)),\n    [odysseyTheme, themeOverride],\n  );\n\n  return (\n    <MuiThemeProvider theme={customOdysseyTheme ?? odysseyTheme}>\n      <OdysseyDesignTokensContext.Provider value={odysseyTokens}>\n        {children}\n      </OdysseyDesignTokensContext.Provider>\n    </MuiThemeProvider>\n  );\n};\n\nconst MemoizedOdysseyThemeProvider = memo(OdysseyThemeProvider);\n\nexport { MemoizedOdysseyThemeProvider as OdysseyThemeProvider };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SACEA,WAAW,EACXC,aAAa,IAAIC,gBAAgB,QAC5B,sBAAsB;AAC7B,SAASC,IAAI,EAAaC,OAAO,QAAQ,OAAO;AAGhD,SAASC,SAAS,QAAQ,YAAY;AAAC,SAC9BC,qBAAqB;AAC9B,OAAO,KAAKC,MAAM,MAAM,6BAA6B;AAAC,SAC7CC,0BAA0B;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAyBnC,MAAMC,oBAAoB,GAAGA,CAAC;EAC5BC,QAAQ;EACRC,oBAAoB;EACpBC,gBAAgB;EAChBC,iBAAiB;EACjBC;AACyB,CAAC,KAAK;EAC/B,MAAMC,aAAa,GAAGb,OAAO,CAC3B,OAAO;IAAE,GAAGG,MAAM;IAAE,GAAGM;EAAqB,CAAC,CAAC,EAC9C,CAACA,oBAAoB,CACvB,CAAC;EAED,MAAMK,YAAY,GAAGd,OAAO,CAC1B,MACEE,qBAAqB,CAAC;IACpBW,aAAa;IACbF,iBAAiB,EAAEA,iBAAiB,IAAID,gBAAgB;IACxDK,YAAY,EAAE;EAChB,CAAC,CAAC,EACJ,CAACF,aAAa,EAAEH,gBAAgB,EAAEC,iBAAiB,CACrD,CAAC;EAED,MAAMK,kBAAkB,GAAGhB,OAAO,CAChC,MAAMY,aAAa,IAAIhB,WAAW,CAACK,SAAS,CAACa,YAAY,EAAEF,aAAa,CAAC,CAAC,EAC1E,CAACE,YAAY,EAAEF,aAAa,CAC9B,CAAC;EAED,OACEN,IAAA,CAACR,gBAAgB;IAACmB,KAAK,EAAED,kBAAkB,IAAIF,YAAa;IAAAN,QAAA,EAC1DF,IAAA,CAACF,0BAA0B,CAACc,QAAQ;MAACC,KAAK,EAAEN,aAAc;MAAAL,QAAA,EACvDA;IAAQ,CAC0B;EAAC,CACtB,CAAC;AAEvB,CAAC;AAED,MAAMY,4BAA4B,GAAGrB,IAAI,CAACQ,oBAAoB,CAAC;AAE/D,SAASa,4BAA4B,IAAIb,oBAAoB"}
+{"version":3,"file":"OdysseyThemeProvider.js","names":["useMemo","createTheme","ThemeProvider","MuiThemeProvider","deepmerge","styled","createOdysseyMuiTheme","Tokens","ContrastModeContext","useContrastMode","OdysseyDesignTokensContext","jsx","_jsx","StyledContrastContainer","height","OdysseyThemeProvider","children","contrastMode","explicitContrastMode","designTokensOverride","shadowDomElement","shadowRootElement","themeOverride","contrastContainerRef","odysseyTokens","effectiveShadowRootElement","odysseyTheme","customOdysseyTheme","contrastModeProviderValue","ref","Provider","value","theme"],"sources":["../src/OdysseyThemeProvider.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 { ReactNode, useMemo } from \"react\";\nimport {\n  createTheme,\n  ThemeProvider as MuiThemeProvider,\n} from \"@mui/material/styles\";\nimport { ThemeOptions } from \"@mui/material\";\nimport { deepmerge } from \"@mui/utils\";\nimport styled from \"@emotion/styled\";\nimport { createOdysseyMuiTheme, DesignTokensOverride } from \"./theme\";\nimport * as Tokens from \"@okta/odyssey-design-tokens\";\n\nimport {\n  ContrastMode,\n  ContrastModeContext,\n  useContrastMode,\n} from \"./useContrastMode\";\nimport { OdysseyDesignTokensContext } from \"./OdysseyDesignTokensContext\";\n\nexport type OdysseyThemeProviderProps = {\n  children: ReactNode;\n  contrastMode?: ContrastMode;\n  designTokensOverride?: DesignTokensOverride;\n  /** @deprecated Use shadowRootElement instead */\n  shadowDomElement?: HTMLDivElement | HTMLElement;\n  shadowRootElement?: HTMLDivElement | HTMLElement;\n  themeOverride?: ThemeOptions;\n};\n\nconst StyledContrastContainer = styled(\"div\")(() => ({\n  height: \"inherit\",\n}));\n\n/**\n * This function doesn't include the Emotion Cache or Translations. You should probably be using `OdysseyProvider`.\n *\n * Some teams have a need to wrap separately (SIW), but most teams will never need to use this explicitly.\n */\nexport const OdysseyThemeProvider = ({\n  children,\n  contrastMode: explicitContrastMode,\n  designTokensOverride,\n  shadowDomElement,\n  shadowRootElement,\n  themeOverride,\n}: OdysseyThemeProviderProps) => {\n  const { contrastMode, contrastContainerRef } = useContrastMode({\n    contrastMode: explicitContrastMode,\n  });\n\n  const odysseyTokens = useMemo(\n    () => ({ ...Tokens, ...designTokensOverride }),\n    [designTokensOverride],\n  );\n\n  const effectiveShadowRootElement = shadowRootElement || shadowDomElement;\n\n  const odysseyTheme = useMemo(\n    () =>\n      createOdysseyMuiTheme({\n        contrastMode,\n        odysseyTokens,\n        shadowRootElement: effectiveShadowRootElement,\n      }),\n    [contrastMode, odysseyTokens, effectiveShadowRootElement],\n  );\n\n  const customOdysseyTheme = useMemo(\n    () => createTheme(deepmerge(odysseyTheme, themeOverride || {})),\n    [odysseyTheme, themeOverride],\n  );\n\n  const contrastModeProviderValue = useMemo(\n    () => ({\n      contrastMode,\n    }),\n    [contrastMode],\n  );\n\n  return (\n    <StyledContrastContainer ref={contrastContainerRef}>\n      <ContrastModeContext.Provider value={contrastModeProviderValue}>\n        <MuiThemeProvider theme={customOdysseyTheme}>\n          <OdysseyDesignTokensContext.Provider value={odysseyTokens}>\n            {children}\n          </OdysseyDesignTokensContext.Provider>\n        </MuiThemeProvider>\n      </ContrastModeContext.Provider>\n    </StyledContrastContainer>\n  );\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAAoBA,OAAO,QAAQ,OAAO;AAC1C,SACEC,WAAW,EACXC,aAAa,IAAIC,gBAAgB,QAC5B,sBAAsB;AAE7B,SAASC,SAAS,QAAQ,YAAY;AACtC,OAAOC,MAAM,MAAM,iBAAiB;AAAC,SAC5BC,qBAAqB;AAC9B,OAAO,KAAKC,MAAM,MAAM,6BAA6B;AAAC,SAIpDC,mBAAmB,EACnBC,eAAe;AAAA,SAERC,0BAA0B;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAYnC,MAAMC,uBAAuB,GAAGR,MAAM,CAAC,KAAK,CAAC,CAAC,OAAO;EACnDS,MAAM,EAAE;AACV,CAAC,CAAC,CAAC;AAOH,OAAO,MAAMC,oBAAoB,GAAGA,CAAC;EACnCC,QAAQ;EACRC,YAAY,EAAEC,oBAAoB;EAClCC,oBAAoB;EACpBC,gBAAgB;EAChBC,iBAAiB;EACjBC;AACyB,CAAC,KAAK;EAC/B,MAAM;IAAEL,YAAY;IAAEM;EAAqB,CAAC,GAAGd,eAAe,CAAC;IAC7DQ,YAAY,EAAEC;EAChB,CAAC,CAAC;EAEF,MAAMM,aAAa,GAAGxB,OAAO,CAC3B,OAAO;IAAE,GAAGO,MAAM;IAAE,GAAGY;EAAqB,CAAC,CAAC,EAC9C,CAACA,oBAAoB,CACvB,CAAC;EAED,MAAMM,0BAA0B,GAAGJ,iBAAiB,IAAID,gBAAgB;EAExE,MAAMM,YAAY,GAAG1B,OAAO,CAC1B,MACEM,qBAAqB,CAAC;IACpBW,YAAY;IACZO,aAAa;IACbH,iBAAiB,EAAEI;EACrB,CAAC,CAAC,EACJ,CAACR,YAAY,EAAEO,aAAa,EAAEC,0BAA0B,CAC1D,CAAC;EAED,MAAME,kBAAkB,GAAG3B,OAAO,CAChC,MAAMC,WAAW,CAACG,SAAS,CAACsB,YAAY,EAAEJ,aAAa,IAAI,CAAC,CAAC,CAAC,CAAC,EAC/D,CAACI,YAAY,EAAEJ,aAAa,CAC9B,CAAC;EAED,MAAMM,yBAAyB,GAAG5B,OAAO,CACvC,OAAO;IACLiB;EACF,CAAC,CAAC,EACF,CAACA,YAAY,CACf,CAAC;EAED,OACEL,IAAA,CAACC,uBAAuB;IAACgB,GAAG,EAAEN,oBAAqB;IAAAP,QAAA,EACjDJ,IAAA,CAACJ,mBAAmB,CAACsB,QAAQ;MAACC,KAAK,EAAEH,yBAA0B;MAAAZ,QAAA,EAC7DJ,IAAA,CAACT,gBAAgB;QAAC6B,KAAK,EAAEL,kBAAmB;QAAAX,QAAA,EAC1CJ,IAAA,CAACF,0BAA0B,CAACoB,QAAQ;UAACC,KAAK,EAAEP,aAAc;UAAAR,QAAA,EACvDA;QAAQ,CAC0B;MAAC,CACtB;IAAC,CACS;EAAC,CACR,CAAC;AAE9B,CAAC"}

package/dist/Pagination/Pagination.js

@@ -18,6 +18,7 @@ import styled from "@emotion/styled";
 import { useOdysseyDesignTokens } from "../OdysseyDesignTokensContext.js";
 import { Box } from "../Box.js";
 import { usePagination } from "./usePagination.js";
+import { useTranslation } from "react-i18next";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const PaginationContainer = styled("div")({
@@ -61,31 +62,51 @@ const PaginationButtonContainer = styled("div")({
   }
 });
 const Pagination = ({
-  currentPageLabel,
+  currentPageLabel: currentPageLabelProp,
+  currentRowsCount,
+  hasPageInput = true,
+  hasRowCountInput = true,
+  hasRowCountLabel = true,
   isDisabled,
   isMoreDisabled,
   lastRow,
-  loadMoreLabel,
+  loadMoreLabel: loadMoreLabelProp,
   maxPageIndex,
   maxPageSize,
-  nextLabel,
-  onPaginationChange,
+  nextLabel: nextLabelProp,
+  onPaginationChange: onPaginationChangeProp,
   pageIndex,
   pageSize,
-  previousLabel,
-  rowsPerPageLabel,
+  previousLabel: previousLabelProp,
+  rowsPerPageLabel: rowsPerPageLabelProp,
   totalRows,
-  currentRowsCount,
   variant
 }) => {
   const odysseyDesignTokens = useOdysseyDesignTokens();
+  const {
+    t
+  } = useTranslation();
   const [page, setPage] = useState(pageIndex);
   const [rowsPerPage, setRowsPerPage] = useState(pageSize);
   const initialRowsPerPage = useRef(pageSize);
+  const currentPageLabel = currentPageLabelProp ?? t("pagination.page");
+  const loadMoreLabel = loadMoreLabelProp ?? t("pagination.loadmore");
+  const nextLabel = nextLabelProp ?? t("pagination.next");
+  const previousLabel = previousLabelProp ?? t("pagination.previous");
+  const rowsPerPageLabel = rowsPerPageLabelProp ?? t("pagination.rowsperpage");
   useEffect(() => {
     setPage(pageIndex);
     setRowsPerPage(pageSize);
   }, [pageIndex, pageSize]);
+  const onPaginationChange = useCallback(({
+    pageIndex,
+    pageSize
+  }) => {
+    onPaginationChangeProp({
+      pageIndex,
+      pageSize
+    });
+  }, [onPaginationChangeProp]);
   const {
     totalRowsLabel
   } = usePagination({
@@ -95,13 +116,24 @@ const Pagination = ({
     totalRows
   });
   const handlePaginationChange = useCallback(() => {
-    const updatedPage = totalRows && page * totalRows > lastRow ? Math.ceil(totalRows / rowsPerPage) : page;
-    const updatedRowsPerPage = totalRows && rowsPerPage > totalRows ? totalRows : rowsPerPage;
+    let updatedPage = page;
+    let updatedRowsPerPage = rowsPerPage;
+    if (totalRows) {
+      const maxPageIndex = Math.ceil(totalRows / updatedRowsPerPage);
+      if (updatedRowsPerPage > totalRows) {
+        updatedRowsPerPage = totalRows;
+      }
+      if (updatedPage > maxPageIndex) {
+        updatedPage = maxPageIndex;
+      } else if (updatedPage < 1) {
+        updatedPage = 1;
+      }
+    }
     onPaginationChange({
       pageIndex: updatedPage,
       pageSize: updatedRowsPerPage
     });
-  }, [page, rowsPerPage, lastRow, onPaginationChange, totalRows]);
+  }, [page, rowsPerPage, onPaginationChange, totalRows]);
   const handlePageSubmit = useCallback(event => {
     if (event.key === "Enter") {
       onPaginationChange({
@@ -147,7 +179,7 @@ const Pagination = ({
   const loadMoreIsDisabled = useMemo(() => {
     return isMoreDisabled || (totalRows ? rowsPerPage >= totalRows : false);
   }, [isMoreDisabled, rowsPerPage, totalRows]);
-  const nextButtonDisabled = useMemo(() => isMoreDisabled || (totalRows ? lastRow >= totalRows : false) || isDisabled, [isMoreDisabled, totalRows, lastRow, isDisabled]);
+  const nextButtonDisabled = useMemo(() => isMoreDisabled || lastRow && (totalRows ? lastRow >= totalRows : false) || isDisabled, [isMoreDisabled, totalRows, lastRow, isDisabled]);
   const previousButtonDisabled = useMemo(() => pageIndex <= 1 || isDisabled, [pageIndex, isDisabled]);
   const rowsPerPageInputProps = useMemo(() => ({
     "aria-label": rowsPerPageLabel,
@@ -160,7 +192,7 @@ const Pagination = ({
   return variant === "paged" ? _jsxs(PaginationContainer, {
     children: [_jsxs(PaginationSegment, {
       odysseyDesignTokens: odysseyDesignTokens,
-      children: [_jsxs(Box, {
+      children: [hasRowCountInput && _jsxs(Box, {
         children: [_jsx(Paragraph, {
           component: "span",
           color: "textSecondary",
@@ -175,14 +207,14 @@ const Pagination = ({
           disabled: isDisabled,
           inputProps: rowsPerPageInputProps
         })]
-      }), _jsx(Paragraph, {
+      }), hasRowCountLabel && _jsx(Paragraph, {
         component: "span",
         color: "textSecondary",
         children: totalRowsLabel
       })]
     }), _jsxs(PaginationSegment, {
       odysseyDesignTokens: odysseyDesignTokens,
-      children: [totalRows && _jsxs(Box, {
+      children: [totalRows && hasPageInput && _jsxs(Box, {
         children: [_jsx(Paragraph, {
           component: "span",
           color: "textSecondary",

package/dist/Pagination/Pagination.js.map

@@ -1 +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","currentPageLabel","isDisabled","isMoreDisabled","lastRow","loadMoreLabel","maxPageIndex","maxPageSize","nextLabel","onPaginationChange","pageIndex","pageSize","previousLabel","rowsPerPageLabel","totalRows","currentRowsCount","variant","page","setPage","rowsPerPage","setRowsPerPage","initialRowsPerPage","totalRowsLabel","handlePaginationChange","updatedPage","Math","ceil","updatedRowsPerPage","handlePageSubmit","event","key","parseInt","currentTarget","value","handleRowsPerPageSubmit","setPageFromEvent","min","target","setRowsPerPageFromEvent","max","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 labeled rendered for the current page index\n   */\n  currentPageLabel: string;\n  /**\n   * The number of items currently visible on the page\n   */\n  currentRowsCount?: number;\n  /**\n   * If true, the pagination controls will be disabled\n   */\n  isDisabled?: boolean;\n  /**\n   * If true, the next or Show More button will be disabled\n   */\n  isMoreDisabled?: boolean;\n  /**\n   * The current page last row index\n   */\n  lastRow: number;\n  /**\n   * If the pagination is of \"loadMore\" variant, then this is the the load more label\n   */\n  loadMoreLabel: string;\n  /**\n   * The max page\n   */\n  maxPageIndex?: number;\n  /**\n   * The max rows per page\n   */\n  maxPageSize?: number;\n  /**\n   * The label for the next control\n   */\n  nextLabel: string;\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 index\n   */\n  pageIndex: number;\n  /**\n   * The current page size\n   */\n  pageSize: number;\n  /**\n   * The label for the previous control\n   */\n  previousLabel: string;\n  /**\n   * The label that shows how many results are rendered per page\n   */\n  rowsPerPageLabel: string;\n  /**\n   * Total rows count\n   */\n  totalRows?: number;\n  /**\n   * The type of pagination controls shown. Defaults to next/prev buttons, but can be\n   * set to a simple \"Load more\" button by setting to \"loadMore\".\n   */\n  variant?: (typeof paginationTypeValues)[number];\n};\n\nconst Pagination = ({\n  currentPageLabel,\n  isDisabled,\n  isMoreDisabled,\n  lastRow,\n  loadMoreLabel,\n  maxPageIndex,\n  maxPageSize,\n  nextLabel,\n  onPaginationChange,\n  pageIndex,\n  pageSize,\n  previousLabel,\n  rowsPerPageLabel,\n  totalRows,\n  currentRowsCount,\n  variant,\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({\n    pageIndex,\n    pageSize,\n    currentRowsCount: currentRowsCount || pageSize,\n    totalRows,\n  });\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      const value = maxPageIndex\n        ? Math.min(parseInt(event.target.value), maxPageIndex)\n        : parseInt(event.target.value);\n      setPage(value);\n    },\n    [setPage, maxPageIndex],\n  );\n\n  const setRowsPerPageFromEvent = useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      const value = maxPageSize\n        ? Math.min(parseInt(event.target.value), maxPageSize)\n        : parseInt(event.target.value);\n\n      // Ensure the value can't be less than 1\n      setRowsPerPage(Math.max(1, value));\n    },\n    [setRowsPerPage, maxPageSize],\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 isMoreDisabled || (totalRows ? rowsPerPage >= totalRows : false);\n  }, [isMoreDisabled, rowsPerPage, totalRows]);\n\n  const nextButtonDisabled = useMemo(\n    () =>\n      isMoreDisabled ||\n      (totalRows ? lastRow >= totalRows : false) ||\n      isDisabled,\n    [isMoreDisabled, 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      max: maxPageSize || totalRows,\n    }),\n    [maxPageSize, rowsPerPageLabel, totalRows],\n  );\n\n  const currentPageInputProps = useMemo(\n    () => ({\n      \"aria-label\": currentPageLabel,\n      max: maxPageIndex,\n    }),\n    [currentPageLabel, maxPageIndex],\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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"}
+{"version":3,"file":"Pagination.js","names":["memo","useCallback","useEffect","useMemo","useRef","useState","Paragraph","Button","ArrowLeftIcon","ArrowRightIcon","styled","useOdysseyDesignTokens","Box","usePagination","useTranslation","jsx","_jsx","jsxs","_jsxs","PaginationContainer","display","alignItems","justifyContent","PaginationSegment","shouldForwardProp","prop","odysseyDesignTokens","gap","Spacing4","Spacing2","PaginationInput","_InputBase","borderColor","HueNeutral200","borderRadius","BorderRadiusTight","height","Spacing6","width","HueNeutral400","PalettePrimaryMain","PaginationButtonContainer","marginInlineStart","Pagination","currentPageLabel","currentPageLabelProp","currentRowsCount","hasPageInput","hasRowCountInput","hasRowCountLabel","isDisabled","isMoreDisabled","lastRow","loadMoreLabel","loadMoreLabelProp","maxPageIndex","maxPageSize","nextLabel","nextLabelProp","onPaginationChange","onPaginationChangeProp","pageIndex","pageSize","previousLabel","previousLabelProp","rowsPerPageLabel","rowsPerPageLabelProp","totalRows","variant","t","page","setPage","rowsPerPage","setRowsPerPage","initialRowsPerPage","totalRowsLabel","handlePaginationChange","updatedPage","updatedRowsPerPage","Math","ceil","handlePageSubmit","event","key","parseInt","currentTarget","value","handleRowsPerPageSubmit","setPageFromEvent","min","target","setRowsPerPageFromEvent","max","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\";\nimport { useTranslation } from \"react-i18next\";\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 labeled rendered for the current page index\n   */\n  currentPageLabel?: string;\n  /**\n   * The number of items currently visible on the page\n   */\n  currentRowsCount?: number;\n  /**\n   * If true, the page input will be visible and the user can directly manipulate which page\n   * is visible.\n   */\n  hasPageInput?: boolean;\n  /**\n   * If true, the row count input will be visible and the user can directly manipulate how many rows\n   * are visible.\n   */\n  hasRowCountInput?: boolean;\n  /**\n   * If true, the \"X - X of total X\" label will be visible\n   */\n  hasRowCountLabel?: boolean;\n  /**\n   * If true, the pagination controls will be disabled\n   */\n  isDisabled?: boolean;\n  /**\n   * If true, the next or Show More button will be disabled\n   */\n  isMoreDisabled?: boolean;\n  /**\n   * The current page last row index\n   */\n  lastRow?: number;\n  /**\n   * If the pagination is of \"loadMore\" variant, then this is the the load more label\n   */\n  loadMoreLabel?: string;\n  /**\n   * The max page\n   */\n  maxPageIndex?: number;\n  /**\n   * The max rows per page\n   */\n  maxPageSize?: number;\n  /**\n   * The label for the next control\n   */\n  nextLabel?: string;\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 index\n   */\n  pageIndex: number;\n  /**\n   * The current page size\n   */\n  pageSize: number;\n  /**\n   * The label for the previous control\n   */\n  previousLabel?: string;\n  /**\n   * The label that shows how many results are rendered per page\n   */\n  rowsPerPageLabel?: string;\n  /**\n   * Total rows count\n   */\n  totalRows?: number;\n  /**\n   * The type of pagination controls shown. Defaults to next/prev buttons, but can be\n   * set to a simple \"Load more\" button by setting to \"loadMore\".\n   */\n  variant?: (typeof paginationTypeValues)[number];\n};\n\nconst Pagination = ({\n  currentPageLabel: currentPageLabelProp,\n  currentRowsCount,\n  hasPageInput = true,\n  hasRowCountInput = true,\n  hasRowCountLabel = true,\n  isDisabled,\n  isMoreDisabled,\n  lastRow,\n  loadMoreLabel: loadMoreLabelProp,\n  maxPageIndex,\n  maxPageSize,\n  nextLabel: nextLabelProp,\n  onPaginationChange: onPaginationChangeProp,\n  pageIndex,\n  pageSize,\n  previousLabel: previousLabelProp,\n  rowsPerPageLabel: rowsPerPageLabelProp,\n  totalRows,\n  variant,\n}: PaginationProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n  const { t } = useTranslation();\n\n  const [page, setPage] = useState<number>(pageIndex);\n  const [rowsPerPage, setRowsPerPage] = useState<number>(pageSize);\n  const initialRowsPerPage = useRef<number>(pageSize);\n\n  const currentPageLabel = currentPageLabelProp ?? t(\"pagination.page\");\n  const loadMoreLabel = loadMoreLabelProp ?? t(\"pagination.loadmore\");\n  const nextLabel = nextLabelProp ?? t(\"pagination.next\");\n  const previousLabel = previousLabelProp ?? t(\"pagination.previous\");\n  const rowsPerPageLabel = rowsPerPageLabelProp ?? t(\"pagination.rowsperpage\");\n\n  useEffect(() => {\n    setPage(pageIndex);\n    setRowsPerPage(pageSize);\n  }, [pageIndex, pageSize]);\n\n  const onPaginationChange = useCallback(\n    ({ pageIndex, pageSize }: { pageIndex: number; pageSize: number }) => {\n      onPaginationChangeProp({ pageIndex, pageSize });\n    },\n    [onPaginationChangeProp],\n  );\n\n  const { totalRowsLabel } = usePagination({\n    pageIndex,\n    pageSize,\n    currentRowsCount: currentRowsCount || pageSize,\n    totalRows,\n  });\n\n  const handlePaginationChange = useCallback(() => {\n    let updatedPage = page;\n    let updatedRowsPerPage = rowsPerPage;\n\n    if (totalRows) {\n      const maxPageIndex = Math.ceil(totalRows / updatedRowsPerPage);\n\n      // Ensure rowsPerPage does not exceed totalRows\n      if (updatedRowsPerPage > totalRows) {\n        updatedRowsPerPage = totalRows;\n      }\n\n      // Ensure page is within valid range\n      if (updatedPage > maxPageIndex) {\n        updatedPage = maxPageIndex;\n      } else if (updatedPage < 1) {\n        updatedPage = 1;\n      }\n    }\n\n    onPaginationChange({\n      pageIndex: updatedPage,\n      pageSize: updatedRowsPerPage,\n    });\n  }, [page, rowsPerPage, 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      const value = maxPageIndex\n        ? Math.min(parseInt(event.target.value), maxPageIndex)\n        : parseInt(event.target.value);\n      setPage(value);\n    },\n    [setPage, maxPageIndex],\n  );\n\n  const setRowsPerPageFromEvent = useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      const value = maxPageSize\n        ? Math.min(parseInt(event.target.value), maxPageSize)\n        : parseInt(event.target.value);\n\n      // Ensure the value can't be less than 1\n      setRowsPerPage(Math.max(1, value));\n    },\n    [setRowsPerPage, maxPageSize],\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 isMoreDisabled || (totalRows ? rowsPerPage >= totalRows : false);\n  }, [isMoreDisabled, rowsPerPage, totalRows]);\n\n  const nextButtonDisabled = useMemo(\n    () =>\n      isMoreDisabled ||\n      (lastRow && (totalRows ? lastRow >= totalRows : false)) ||\n      isDisabled,\n    [isMoreDisabled, 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      max: maxPageSize || totalRows,\n    }),\n    [maxPageSize, rowsPerPageLabel, totalRows],\n  );\n\n  const currentPageInputProps = useMemo(\n    () => ({\n      \"aria-label\": currentPageLabel,\n      max: maxPageIndex,\n    }),\n    [currentPageLabel, maxPageIndex],\n  );\n\n  return variant === \"paged\" ? (\n    <PaginationContainer>\n      <PaginationSegment odysseyDesignTokens={odysseyDesignTokens}>\n        {hasRowCountInput && (\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        )}\n        {hasRowCountLabel && (\n          <Paragraph component=\"span\" color=\"textSecondary\">\n            {totalRowsLabel}\n          </Paragraph>\n        )}\n      </PaginationSegment>\n\n      <PaginationSegment odysseyDesignTokens={odysseyDesignTokens}>\n        {totalRows && hasPageInput && (\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/Surface.js

@@ -14,22 +14,33 @@ import _Paper from "@mui/material/Paper";
 import { memo } from "react";
 import styled from "@emotion/styled";
 import { useOdysseyDesignTokens } from "./OdysseyDesignTokensContext.js";
+import { OdysseyThemeProvider } from "./OdysseyThemeProvider.js";
+import { useContrastModeContext } from "./useContrastMode.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const StyledContainer = styled(_Paper, {
-  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "contrastMode"
 })(({
+  contrastMode,
   odysseyDesignTokens
 }) => ({
   borderRadius: odysseyDesignTokens.Spacing4,
-  padding: odysseyDesignTokens.Spacing4
+  padding: odysseyDesignTokens.Spacing5,
+  border: contrastMode === "lowContrast" ? `1px solid ${odysseyDesignTokens.HueNeutral100}` : "none",
+  boxShadow: "none"
 }));
 const Surface = ({
   children
 }) => {
   const odysseyDesignTokens = useOdysseyDesignTokens();
+  const {
+    contrastMode
+  } = useContrastModeContext();
   return _jsx(StyledContainer, {
+    contrastMode: contrastMode,
     odysseyDesignTokens: odysseyDesignTokens,
-    children: children
+    children: _jsx(OdysseyThemeProvider, {
+      children: children
+    })
   });
 };
 const MemoizedSurface = memo(Surface);

package/dist/Surface.js.map

@@ -1 +1 @@
-{"version":3,"file":"Surface.js","names":["memo","styled","useOdysseyDesignTokens","jsx","_jsx","StyledContainer","_Paper","shouldForwardProp","prop","odysseyDesignTokens","borderRadius","Spacing4","padding","Surface","children","MemoizedSurface","displayName"],"sources":["../src/Surface.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { memo, ReactNode } from \"react\";\nimport styled from \"@emotion/styled\";\nimport { Paper as MuiPaper } from \"@mui/material\";\n\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"./OdysseyDesignTokensContext\";\n\nconst StyledContainer = styled(MuiPaper, {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens }) => ({\n  borderRadius: odysseyDesignTokens.Spacing4,\n  padding: odysseyDesignTokens.Spacing4,\n}));\n\nexport type SurfaceProps = {\n  children: ReactNode;\n};\n\nconst Surface = ({ children }: SurfaceProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  return (\n    <StyledContainer odysseyDesignTokens={odysseyDesignTokens}>\n      {children}\n    </StyledContainer>\n  );\n};\n\nconst MemoizedSurface = memo(Surface);\nMemoizedSurface.displayName = \"Surface\";\n\nexport { MemoizedSurface as Surface };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,QAAmB,OAAO;AACvC,OAAOC,MAAM,MAAM,iBAAiB;AAAC,SAKnCC,sBAAsB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAGxB,MAAMC,eAAe,GAAGJ,MAAM,CAAAK,MAAA,EAAW;EACvCC,iBAAiB,EAAGC,IAAI,IAAKA,IAAI,KAAK;AACxC,CAAC,CAAC,CAEC,CAAC;EAAEC;AAAoB,CAAC,MAAM;EAC/BC,YAAY,EAAED,mBAAmB,CAACE,QAAQ;EAC1CC,OAAO,EAAEH,mBAAmB,CAACE;AAC/B,CAAC,CAAC,CAAC;AAMH,MAAME,OAAO,GAAGA,CAAC;EAAEC;AAAuB,CAAC,KAAK;EAC9C,MAAML,mBAAmB,GAAGP,sBAAsB,CAAC,CAAC;EAEpD,OACEE,IAAA,CAACC,eAAe;IAACI,mBAAmB,EAAEA,mBAAoB;IAAAK,QAAA,EACvDA;EAAQ,CACM,CAAC;AAEtB,CAAC;AAED,MAAMC,eAAe,GAAGf,IAAI,CAACa,OAAO,CAAC;AACrCE,eAAe,CAACC,WAAW,GAAG,SAAS;AAEvC,SAASD,eAAe,IAAIF,OAAO"}
+{"version":3,"file":"Surface.js","names":["memo","styled","useOdysseyDesignTokens","OdysseyThemeProvider","useContrastModeContext","jsx","_jsx","StyledContainer","_Paper","shouldForwardProp","prop","contrastMode","odysseyDesignTokens","borderRadius","Spacing4","padding","Spacing5","border","HueNeutral100","boxShadow","Surface","children","MemoizedSurface","displayName"],"sources":["../src/Surface.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { memo, ReactNode } from \"react\";\nimport styled from \"@emotion/styled\";\nimport { Paper as MuiPaper } from \"@mui/material\";\n\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"./OdysseyDesignTokensContext\";\nimport { OdysseyThemeProvider } from \"./OdysseyThemeProvider\";\nimport { useContrastModeContext, ContrastMode } from \"./useContrastMode\";\n\nconst StyledContainer = styled(MuiPaper, {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" && prop !== \"contrastMode\",\n})<{\n  contrastMode: ContrastMode;\n  odysseyDesignTokens: DesignTokens;\n}>(({ contrastMode, odysseyDesignTokens }) => ({\n  borderRadius: odysseyDesignTokens.Spacing4,\n  padding: odysseyDesignTokens.Spacing5,\n  border:\n    contrastMode === \"lowContrast\"\n      ? `1px solid ${odysseyDesignTokens.HueNeutral100}`\n      : \"none\",\n  boxShadow: \"none\",\n}));\n\nexport type SurfaceProps = {\n  children: ReactNode;\n};\n\nconst Surface = ({ children }: SurfaceProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n  const { contrastMode } = useContrastModeContext();\n\n  return (\n    <StyledContainer\n      contrastMode={contrastMode}\n      odysseyDesignTokens={odysseyDesignTokens}\n    >\n      <OdysseyThemeProvider>{children}</OdysseyThemeProvider>\n    </StyledContainer>\n  );\n};\n\nconst MemoizedSurface = memo(Surface);\nMemoizedSurface.displayName = \"Surface\";\n\nexport { MemoizedSurface as Surface };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,QAAmB,OAAO;AACvC,OAAOC,MAAM,MAAM,iBAAiB;AAAC,SAKnCC,sBAAsB;AAAA,SAEfC,oBAAoB;AAAA,SACpBC,sBAAsB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAE/B,MAAMC,eAAe,GAAGN,MAAM,CAAAO,MAAA,EAAW;EACvCC,iBAAiB,EAAGC,IAAI,IACtBA,IAAI,KAAK,qBAAqB,IAAIA,IAAI,KAAK;AAC/C,CAAC,CAAC,CAGC,CAAC;EAAEC,YAAY;EAAEC;AAAoB,CAAC,MAAM;EAC7CC,YAAY,EAAED,mBAAmB,CAACE,QAAQ;EAC1CC,OAAO,EAAEH,mBAAmB,CAACI,QAAQ;EACrCC,MAAM,EACJN,YAAY,KAAK,aAAa,GACzB,aAAYC,mBAAmB,CAACM,aAAc,EAAC,GAChD,MAAM;EACZC,SAAS,EAAE;AACb,CAAC,CAAC,CAAC;AAMH,MAAMC,OAAO,GAAGA,CAAC;EAAEC;AAAuB,CAAC,KAAK;EAC9C,MAAMT,mBAAmB,GAAGV,sBAAsB,CAAC,CAAC;EACpD,MAAM;IAAES;EAAa,CAAC,GAAGP,sBAAsB,CAAC,CAAC;EAEjD,OACEE,IAAA,CAACC,eAAe;IACdI,YAAY,EAAEA,YAAa;IAC3BC,mBAAmB,EAAEA,mBAAoB;IAAAS,QAAA,EAEzCf,IAAA,CAACH,oBAAoB;MAAAkB,QAAA,EAAEA;IAAQ,CAAuB;EAAC,CACxC,CAAC;AAEtB,CAAC;AAED,MAAMC,eAAe,GAAGtB,IAAI,CAACoB,OAAO,CAAC;AACrCE,eAAe,CAACC,WAAW,GAAG,SAAS;AAEvC,SAASD,eAAe,IAAIF,OAAO"}

package/dist/Tag.js

@@ -12,22 +12,27 @@ import _Chip from "@mui/material/Chip";
  */
 import { memo, useCallback, useContext } from "react";
 import styled from "@emotion/styled";
-import { TagListContext } from "./TagListContext.js";
+import { CloseCircleFilledIcon } from "./icons.generated/index.js";
 import { MuiPropsContext } from "./MuiPropsContext.js";
 import { useOdysseyDesignTokens } from "./OdysseyDesignTokensContext.js";
-import { CloseCircleFilledIcon } from "./icons.generated/index.js";
-import { useContrastContext } from "./ContrastModeProvider.js";
+import { TagListContext } from "./TagListContext.js";
+import { useContrastModeContext } from "./useContrastMode.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-export const tagColorVariants = ["default", "info", "accentOne", "accentTwo", "accentThree", "accentFour"];
-const getChipColors = (colorVariant, odysseyDesignTokens, contrastMode) => {
+const tagSizeValues = ["medium", "small"];
+export const tagColorVariants = ["accentFour", "accentOne", "accentThree", "accentTwo", "default", "info"];
+const getChipColors = ({
+  colorVariant,
+  contrastMode,
+  odysseyDesignTokens
+}) => {
   const colors = {
     default: {
-      ...(contrastMode === "lowContrast" && {
+      ...(contrastMode === "highContrast" && {
         background: odysseyDesignTokens.HueNeutral200,
         text: odysseyDesignTokens.HueNeutral700,
         textDisabled: odysseyDesignTokens.HueNeutral400
       }),
-      ...(contrastMode === "highContrast" && {
+      ...(contrastMode === "lowContrast" && {
         background: odysseyDesignTokens.HueNeutral100,
         text: odysseyDesignTokens.HueNeutral700,
         textDisabled: odysseyDesignTokens.HueNeutral300
@@ -41,12 +46,12 @@ const getChipColors = (colorVariant, odysseyDesignTokens, contrastMode) => {
       iconDisabled: odysseyDesignTokens.HueNeutral300
     },
     info: {
-      ...(contrastMode === "lowContrast" && {
+      ...(contrastMode === "highContrast" && {
         background: odysseyDesignTokens.HueBlue200,
         text: odysseyDesignTokens.HueBlue700,
         textDisabled: odysseyDesignTokens.HueBlue400
       }),
-      ...(contrastMode === "highContrast" && {
+      ...(contrastMode === "lowContrast" && {
         background: odysseyDesignTokens.HueBlue100,
         text: odysseyDesignTokens.HueBlue700,
         textDisabled: odysseyDesignTokens.HueBlue300
@@ -60,12 +65,12 @@ const getChipColors = (colorVariant, odysseyDesignTokens, contrastMode) => {
       iconDisabled: odysseyDesignTokens.HueBlue300
     },
     accentOne: {
-      ...(contrastMode === "lowContrast" && {
+      ...(contrastMode === "highContrast" && {
         background: odysseyDesignTokens.HueAccentOne200,
         text: odysseyDesignTokens.HueAccentOne700,
         textDisabled: odysseyDesignTokens.HueAccentOne400
       }),
-      ...(contrastMode === "highContrast" && {
+      ...(contrastMode === "lowContrast" && {
         background: odysseyDesignTokens.HueAccentOne100,
         text: odysseyDesignTokens.HueAccentOne700,
         textDisabled: odysseyDesignTokens.HueAccentOne300
@@ -79,12 +84,12 @@ const getChipColors = (colorVariant, odysseyDesignTokens, contrastMode) => {
       iconDisabled: odysseyDesignTokens.HueAccentOne300
     },
     accentTwo: {
-      ...(contrastMode === "lowContrast" && {
+      ...(contrastMode === "highContrast" && {
         background: odysseyDesignTokens.HueAccentTwo200,
         text: odysseyDesignTokens.HueAccentTwo800,
         textDisabled: odysseyDesignTokens.HueAccentTwo400
       }),
-      ...(contrastMode === "highContrast" && {
+      ...(contrastMode === "lowContrast" && {
         background: odysseyDesignTokens.HueAccentTwo100,
         text: odysseyDesignTokens.HueAccentTwo700,
         textDisabled: odysseyDesignTokens.HueAccentTwo300
@@ -98,12 +103,12 @@ const getChipColors = (colorVariant, odysseyDesignTokens, contrastMode) => {
       iconDisabled: odysseyDesignTokens.HueAccentTwo300
     },
     accentThree: {
-      ...(contrastMode === "lowContrast" && {
+      ...(contrastMode === "highContrast" && {
         background: odysseyDesignTokens.HueAccentThree200,
         text: odysseyDesignTokens.HueAccentThree700,
         textDisabled: odysseyDesignTokens.HueAccentThree400
       }),
-      ...(contrastMode === "highContrast" && {
+      ...(contrastMode === "lowContrast" && {
         background: odysseyDesignTokens.HueAccentThree100,
         text: odysseyDesignTokens.HueAccentThree700,
         textDisabled: odysseyDesignTokens.HueAccentThree300
@@ -117,12 +122,12 @@ const getChipColors = (colorVariant, odysseyDesignTokens, contrastMode) => {
       iconDisabled: odysseyDesignTokens.HueAccentThree300
     },
     accentFour: {
-      ...(contrastMode === "lowContrast" && {
+      ...(contrastMode === "highContrast" && {
         background: odysseyDesignTokens.HueAccentFour200,
         text: odysseyDesignTokens.HueAccentFour700,
         textDisabled: odysseyDesignTokens.HueAccentFour400
       }),
-      ...(contrastMode === "highContrast" && {
+      ...(contrastMode === "lowContrast" && {
         background: odysseyDesignTokens.HueAccentFour100,
         text: odysseyDesignTokens.HueAccentFour700,
         textDisabled: odysseyDesignTokens.HueAccentFour300
@@ -139,14 +144,19 @@ const getChipColors = (colorVariant, odysseyDesignTokens, contrastMode) => {
   return colors[colorVariant] || colors.default;
 };
 const StyledTag = styled(_Chip, {
-  shouldForwardProp: prop => !["colorVariant", "contrastMode", "odysseyDesignTokens"].includes(prop)
+  shouldForwardProp: prop => !["colorVariant", "contrastMode", "odysseyDesignTokens", "size"].includes(prop)
 })(({
   colorVariant,
   contrastMode,
   odysseyDesignTokens,
-  clickable
+  clickable,
+  size
 }) => {
-  const colors = getChipColors(colorVariant, odysseyDesignTokens, contrastMode);
+  const colors = getChipColors({
+    colorVariant,
+    odysseyDesignTokens,
+    contrastMode
+  });
   return {
     backgroundColor: colors.background,
     color: colors.text,
@@ -156,6 +166,9 @@ const StyledTag = styled(_Chip, {
     ...(clickable === false && {
       borderColor: "transparent"
     }),
+    ...(size === "small" && {
+      paddingBlock: `calc(${odysseyDesignTokens.Spacing1})`
+    }),
     "&.MuiChip-clickable:hover": {
       backgroundColor: colors.hover
     },
@@ -187,6 +200,7 @@ const Tag = ({
   label,
   onClick,
   onRemove,
+  size = "medium",
   testId,
   translate
 }) => {
@@ -196,24 +210,25 @@ const Tag = ({
   } = useContext(TagListContext);
   const {
     contrastMode
-  } = useContrastContext();
+  } = useContrastModeContext();
   const renderTag = useCallback(muiProps => _jsx(StyledTag, {
     ...muiProps,
-    as: chipElementType,
     "aria-disabled": isDisabled,
+    as: chipElementType,
     clickable: Boolean(onClick),
-    "data-se": testId,
     colorVariant: colorVariant,
-    odysseyDesignTokens: odysseyDesignTokens,
-    contrastMode: "highContrast",
+    contrastMode: contrastMode,
+    "data-se": testId,
+    deleteIcon: _jsx(CloseCircleFilledIcon, {}),
     disabled: isDisabled,
     icon: icon,
     label: label,
+    odysseyDesignTokens: odysseyDesignTokens,
     onClick: onClick,
     onDelete: onRemove,
-    deleteIcon: _jsx(CloseCircleFilledIcon, {}),
+    size: size,
     translate: translate
-  }), [chipElementType, icon, isDisabled, label, onClick, onRemove, testId, translate, colorVariant, odysseyDesignTokens, contrastMode]);
+  }), [chipElementType, colorVariant, contrastMode, icon, isDisabled, label, odysseyDesignTokens, onClick, onRemove, size, testId, translate]);
   return _jsx(MuiPropsContext.Consumer, {
     children: renderTag
   });