@okta/odyssey-react-mui 1.15.9 → 1.21.0

package/dist/FieldError.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldError.js","names":["memo","ScreenReaderText","ErrorMessageList","useTranslation","Box","jsx","_jsx","jsxs","_jsxs","FieldError","id","message","messageList","testId","translate","t","_FormHelperText","error","children","errorMessages","MemoizedFieldError","displayName"],"sources":["../src/FieldError.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { memo } from \"react\";\n\nimport { FormHelperText } from \"@mui/material\";\nimport { ScreenReaderText } from \"./ScreenReaderText\";\nimport { ErrorMessageList } from \"./ErrorMessageList\";\nimport { useTranslation } from \"react-i18next\";\n\nimport type { HtmlProps } from \"./HtmlProps\";\nimport { Box } from \"./Box\";\n\nexport type FieldErrorProps = {\n  id?: string;\n  message?: string;\n  messageList?: string[];\n} & Pick<HtmlProps, \"testId\" | \"translate\">;\n\nconst FieldError = ({\n  id,\n  message,\n  messageList,\n  testId,\n  translate,\n}: FieldErrorProps) => {\n  const { t } = useTranslation();\n\n  return (\n    <FormHelperText data-se={testId} error id={id} translate={translate}>\n      <ScreenReaderText translate={translate}>{`${t(\n        \"fielderror.screenreader.text\",\n      )}:`}</ScreenReaderText>\n      <Box>\n        {message}\n        {messageList && <ErrorMessageList errorMessages={messageList} />}\n      </Box>\n    </FormHelperText>\n  );\n};\n\nconst MemoizedFieldError = memo(FieldError);\nMemoizedFieldError.displayName = \"FieldError\";\n\nexport { MemoizedFieldError as FieldError };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,QAAQ,OAAO;AAAC,SAGpBC,gBAAgB;AAAA,SAChBC,gBAAgB;AACzB,SAASC,cAAc,QAAQ,eAAe;AAAC,SAGtCC,GAAG;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAQZ,MAAMC,UAAU,GAAGA,CAAC;EAClBC,EAAE;EACFC,OAAO;EACPC,WAAW;EACXC,MAAM;EACNC;AACe,CAAC,KAAK;EACrB,MAAM;IAAEC;EAAE,CAAC,GAAGZ,cAAc,CAAC,CAAC;EAE9B,OACEK,KAAA,CAAAQ,eAAA;IAAgB,WAASH,MAAO;IAACI,KAAK;IAACP,EAAE,EAAEA,EAAG;IAACI,SAAS,EAAEA,SAAU;IAAAI,QAAA,GAClEZ,IAAA,CAACL,gBAAgB;MAACa,SAAS,EAAEA,SAAU;MAAAI,QAAA,EAAG,GAAEH,CAAC,CAC3C,8BACF,CAAE;IAAE,CAAmB,CAAC,EACxBP,KAAA,CAACJ,GAAG;MAAAc,QAAA,GACDP,OAAO,EACPC,WAAW,IAAIN,IAAA,CAACJ,gBAAgB;QAACiB,aAAa,EAAEP;MAAY,CAAE,CAAC;IAAA,CAC7D,CAAC;EAAA,CACQ,CAAC;AAErB,CAAC;AAED,MAAMQ,kBAAkB,GAAGpB,IAAI,CAACS,UAAU,CAAC;AAC3CW,kBAAkB,CAACC,WAAW,GAAG,YAAY;AAE7C,SAASD,kBAAkB,IAAIX,UAAU"}
+{"version":3,"file":"FieldError.js","names":["memo","useTranslation","Box","ErrorMessageList","ScreenReaderText","jsx","_jsx","jsxs","_jsxs","FieldError","id","message","messageList","testId","translate","t","_FormHelperText","component","error","children","errorMessages","MemoizedFieldError","displayName"],"sources":["../src/FieldError.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { memo } from \"react\";\nimport { FormHelperText } from \"@mui/material\";\nimport { useTranslation } from \"react-i18next\";\n\nimport { Box } from \"./Box\";\nimport { ErrorMessageList } from \"./ErrorMessageList\";\nimport type { HtmlProps } from \"./HtmlProps\";\nimport { ScreenReaderText } from \"./ScreenReaderText\";\n\nexport type FieldErrorProps = {\n  id?: string;\n  message?: string;\n  messageList?: string[];\n} & Pick<HtmlProps, \"testId\" | \"translate\">;\n\nconst FieldError = ({\n  id,\n  message,\n  messageList,\n  testId,\n  translate,\n}: FieldErrorProps) => {\n  const { t } = useTranslation();\n\n  return (\n    <FormHelperText\n      component=\"div\"\n      data-se={testId}\n      error\n      id={id}\n      translate={translate}\n    >\n      <ScreenReaderText translate={translate}>{`${t(\n        \"fielderror.screenreader.text\",\n      )}:`}</ScreenReaderText>\n      <Box>\n        {message}\n        {messageList && <ErrorMessageList errorMessages={messageList} />}\n      </Box>\n    </FormHelperText>\n  );\n};\n\nconst MemoizedFieldError = memo(FieldError);\nMemoizedFieldError.displayName = \"FieldError\";\n\nexport { MemoizedFieldError as FieldError };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,QAAQ,OAAO;AAE5B,SAASC,cAAc,QAAQ,eAAe;AAAC,SAEtCC,GAAG;AAAA,SACHC,gBAAgB;AAAA,SAEhBC,gBAAgB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAQzB,MAAMC,UAAU,GAAGA,CAAC;EAClBC,EAAE;EACFC,OAAO;EACPC,WAAW;EACXC,MAAM;EACNC;AACe,CAAC,KAAK;EACrB,MAAM;IAAEC;EAAE,CAAC,GAAGd,cAAc,CAAC,CAAC;EAE9B,OACEO,KAAA,CAAAQ,eAAA;IACEC,SAAS,EAAC,KAAK;IACf,WAASJ,MAAO;IAChBK,KAAK;IACLR,EAAE,EAAEA,EAAG;IACPI,SAAS,EAAEA,SAAU;IAAAK,QAAA,GAErBb,IAAA,CAACF,gBAAgB;MAACU,SAAS,EAAEA,SAAU;MAAAK,QAAA,EAAG,GAAEJ,CAAC,CAC3C,8BACF,CAAE;IAAE,CAAmB,CAAC,EACxBP,KAAA,CAACN,GAAG;MAAAiB,QAAA,GACDR,OAAO,EACPC,WAAW,IAAIN,IAAA,CAACH,gBAAgB;QAACiB,aAAa,EAAER;MAAY,CAAE,CAAC;IAAA,CAC7D,CAAC;EAAA,CACQ,CAAC;AAErB,CAAC;AAED,MAAMS,kBAAkB,GAAGrB,IAAI,CAACS,UAAU,CAAC;AAC3CY,kBAAkB,CAACC,WAAW,GAAG,YAAY;AAE7C,SAASD,kBAAkB,IAAIZ,UAAU"}

package/dist/HtmlProps.js.map

@@ -1 +1 @@
-{"version":3,"file":"HtmlProps.js","names":[],"sources":["../src/HtmlProps.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 { HTMLAttributes } from \"react\";\n\nexport type HtmlProps = {\n  /**\n   * Used in [ARIA live regions](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions), the global aria-busy state indicates an element is being modified and that assistive technologies may want to wait until the changes are complete before informing the user about the update.\n   */\n  ariaBusy?: HTMLAttributes<HTMLElement>[\"aria-busy\"];\n  /**\n   * The `aria-checked` attribute indicates the current \"checked\" state of checkboxes, radio buttons, and other widgets.\n   *\n   * NOTE: Where possible use an HTML `<input>` element with `type=\"checkbox\"` and `type=\"radio\"` as these have built in semantics and do not require ARIA attributes.\n   */\n  ariaChecked?: HTMLAttributes<HTMLElement>[\"aria-checked\"];\n  /**\n   * The global `aria-controls` property identifies the element (or elements) whose contents or presence are controlled by the element on which this attribute is set.\n   *\n   * Value: A space-separated list of one or more ID values referencing the elements being controlled by the current element\n   */\n  ariaControls?: HTMLAttributes<HTMLElement>[\"aria-controls\"];\n  /**\n   * The global `aria-describedby` attribute identifies the element (or elements) that describes the element on which the attribute is set.\n   *\n   * Value: The id or space-separated list of element ids that describe the current element.\n   *\n   * Note: The `aria-describedby` attribute is not designed to reference descriptions from external resources. It must reference elements in the same DOM document.\n   */\n  ariaDescribedBy?: HTMLAttributes<HTMLElement>[\"aria-describedby\"];\n  /**\n   * The `aria-errormessage` attribute on an object identifies the element that provides an error message for that object.\n   *\n   * Value: The value of the id of the element containing the error message for the current element\n   */\n  ariaErrorMessage?: HTMLAttributes<HTMLElement>[\"aria-errormessage\"];\n  /**\n   * The `aria-expanded` attribute is set on an element to indicate if a control is expanded or collapsed, and whether or not the controlled elements are displayed or hidden.\n   */\n  ariaExpanded?: HTMLAttributes<HTMLElement>[\"aria-expanded\"];\n  /**\n   * The `aria-haspopup` attribute indicates the availability and type of interactive popup element that can be triggered by the element on which the attribute is set.\n   */\n  ariaHasPopup?: HTMLAttributes<HTMLElement>[\"aria-haspopup\"];\n  /**\n   * The `aria-label` attribute defines a string value that labels an interactive element.\n   */\n  ariaLabel?: HTMLAttributes<HTMLElement>[\"aria-label\"];\n  /**\n   * The `aria-labelledby` attribute identifies the element (or elements) that labels the element it is applied to.\n   *\n   * Value: Space separated list of one or more ID values referencing the elements that label the current element.\n   */\n  ariaLabelledBy?: HTMLAttributes<HTMLElement>[\"aria-labelledby\"];\n  /**\n   * The `aria-pressed` attribute indicates the current \"pressed\" state of a toggle button.\n   */\n  ariaPressed?: HTMLAttributes<HTMLElement>[\"aria-pressed\"];\n  /**\n   * The `tabindex` global attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable\n   *\n   * Note: Manipulating the natural tab order is generally advised against\n   */\n  tabIndex?: HTMLAttributes<HTMLElement>[\"tabIndex\"];\n  /**\n   * This prop puts a `data` attribute on an HTML element in this component with the value provided.\n   *\n   * @deprecated **WARNING:** You should be using Semantic Selectors instead of this property. This is a temporary measure for backwards compatibility with existing Selenium tests.\n   */\n  testId?: string;\n  /**\n   * This prop puts a `translate` attribute on an HTML element. It should be used to indicate whether text within the element should be translated.\n   */\n  translate?: \"yes\" | \"no\";\n};\n"],"mappings":""}
+{"version":3,"file":"HtmlProps.js","names":[],"sources":["../src/HtmlProps.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 { HTMLAttributes } from \"react\";\n\nexport type HtmlProps = {\n  /**\n   * Used in [ARIA live regions](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions), the global aria-busy state indicates an element is being modified and that assistive technologies may want to wait until the changes are complete before informing the user about the update.\n   */\n  ariaBusy?: HTMLAttributes<HTMLElement>[\"aria-busy\"];\n  /**\n   * The `aria-checked` attribute indicates the current \"checked\" state of checkboxes, radio buttons, and other widgets.\n   *\n   * NOTE: Where possible use an HTML `<input>` element with `type=\"checkbox\"` and `type=\"radio\"` as these have built in semantics and do not require ARIA attributes.\n   */\n  ariaChecked?: HTMLAttributes<HTMLElement>[\"aria-checked\"];\n  /**\n   * The global `aria-controls` property identifies the element (or elements) whose contents or presence are controlled by the element on which this attribute is set.\n   *\n   * Value: A space-separated list of one or more ID values referencing the elements being controlled by the current element\n   */\n  ariaControls?: HTMLAttributes<HTMLElement>[\"aria-controls\"];\n  /**\n   * The global `aria-describedby` attribute identifies the element (or elements) that describes the element on which the attribute is set.\n   *\n   * Value: The id or space-separated list of element ids that describe the current element.\n   *\n   * Note: The `aria-describedby` attribute is not designed to reference descriptions from external resources. It must reference elements in the same DOM document.\n   */\n  ariaDescribedBy?: HTMLAttributes<HTMLElement>[\"aria-describedby\"];\n  /**\n   * The `aria-errormessage` attribute on an object identifies the element that provides an error message for that object.\n   *\n   * Value: The value of the id of the element containing the error message for the current element\n   */\n  ariaErrorMessage?: HTMLAttributes<HTMLElement>[\"aria-errormessage\"];\n  /**\n   * The `aria-expanded` attribute is set on an element to indicate if a control is expanded or collapsed, and whether or not the controlled elements are displayed or hidden.\n   */\n  ariaExpanded?: HTMLAttributes<HTMLElement>[\"aria-expanded\"];\n  /**\n   * The `aria-haspopup` attribute indicates the availability and type of interactive popup element that can be triggered by the element on which the attribute is set.\n   */\n  ariaHasPopup?: HTMLAttributes<HTMLElement>[\"aria-haspopup\"];\n  ariaHidden?: HTMLAttributes<HTMLElement>[\"aria-hidden\"];\n  /**\n   * The `aria-label` attribute defines a string value that labels an interactive element.\n   */\n  ariaLabel?: HTMLAttributes<HTMLElement>[\"aria-label\"];\n  /**\n   * The `aria-labelledby` attribute identifies the element (or elements) that labels the element it is applied to.\n   *\n   * Value: Space separated list of one or more ID values referencing the elements that label the current element.\n   */\n  ariaLabelledBy?: HTMLAttributes<HTMLElement>[\"aria-labelledby\"];\n  /**\n   * The `aria-pressed` attribute indicates the current \"pressed\" state of a toggle button.\n   */\n  ariaPressed?: HTMLAttributes<HTMLElement>[\"aria-pressed\"];\n  /**\n   * The `tabindex` global attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable\n   *\n   * Note: Manipulating the natural tab order is generally advised against\n   */\n  tabIndex?: HTMLAttributes<HTMLElement>[\"tabIndex\"];\n  /**\n   * This prop puts a `data` attribute on an HTML element in this component with the value provided.\n   *\n   * @deprecated **WARNING:** You should be using Semantic Selectors instead of this property. This is a temporary measure for backwards compatibility with existing Selenium tests.\n   */\n  testId?: string;\n  /**\n   * This prop puts a `translate` attribute on an HTML element. It should be used to indicate whether text within the element should be translated.\n   */\n  translate?: \"yes\" | \"no\";\n};\n"],"mappings":""}

package/dist/MenuItem.js

@@ -42,6 +42,7 @@ const MenuItem = ({
     onClick: onClick,
     selected: isSelected,
     value: value,
+    tabIndex: 0,
     children: children
   });
 };

package/dist/MenuItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.js","names":["menuItemClasses","memo","useCallback","useContext","MenuContext","jsx","_jsx","MenuItem","children","hasInitialFocus","isSelected","isDisabled","onClick","onClickProp","testId","value","variant","closeMenu","shouldCloseOnSelect","event","_MenuItem","autoFocus","className","root","undefined","disabled","selected","MemoizedMenuItem","displayName"],"sources":["../src/MenuItem.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  MenuItem as MuiMenuItem,\n  MenuItemProps as MuiMenuItemProps,\n} from \"@mui/material\";\nimport { menuItemClasses } from \"@mui/material/MenuItem\";\nimport { memo, useCallback, useContext, type ReactNode } from \"react\";\n\nimport { MenuContext } from \"./MenuContext\";\nimport type { HtmlProps } from \"./HtmlProps\";\n\nexport type MenuItemProps = {\n  /**\n   * The content of the menu item.\n   */\n  children: ReactNode;\n  /**\n   * If `true`, the menu item will receive focus automatically.\n   */\n  hasInitialFocus?: boolean;\n  /**\n   * If `true`, the menu item will be visually marked as selected.\n   */\n  isSelected?: boolean;\n  /**\n   * If `true`, the menu item will be visually marked as disabled.\n   */\n  isDisabled?: boolean;\n  /**\n   * Callback fired when the menu item is clicked.\n   */\n  onClick?: MuiMenuItemProps[\"onClick\"];\n  /**\n   * The value associated with the menu item.\n   */\n  value?: string;\n  /**\n   * The variant of the menu item.\n   * - \"default\": The default variant.\n   * - \"destructive\": A variant indicating a destructive action.\n   */\n  variant?: \"default\" | \"destructive\";\n} & Pick<HtmlProps, \"testId\">;\n\nconst MenuItem = ({\n  children,\n  hasInitialFocus,\n  isSelected,\n  isDisabled,\n  onClick: onClickProp,\n  testId,\n  value,\n  variant = \"default\",\n}: MenuItemProps) => {\n  const { closeMenu, shouldCloseOnSelect } = useContext(MenuContext);\n\n  const onClick = useCallback<NonNullable<MuiMenuItemProps[\"onClick\"]>>(\n    (event) => {\n      onClickProp?.(event);\n      if (shouldCloseOnSelect) {\n        closeMenu();\n      }\n    },\n    [onClickProp, closeMenu, shouldCloseOnSelect],\n  );\n\n  return (\n    <MuiMenuItem\n      /* eslint-disable-next-line jsx-a11y/no-autofocus */\n      autoFocus={hasInitialFocus}\n      className={\n        variant === \"destructive\"\n          ? `${menuItemClasses.root}-destructive`\n          : undefined\n      }\n      data-se={testId}\n      disabled={isDisabled}\n      onClick={onClick}\n      selected={isSelected}\n      value={value}\n    >\n      {children}\n    </MuiMenuItem>\n  );\n};\n\nconst MemoizedMenuItem = memo(MenuItem);\nMemoizedMenuItem.displayName = \"MenuItem\";\n\nexport { MemoizedMenuItem as MenuItem };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAMA,SAASA,eAAe,QAAQ,wBAAwB;AACxD,SAASC,IAAI,EAAEC,WAAW,EAAEC,UAAU,QAAwB,OAAO;AAAC,SAE7DC,WAAW;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAoCpB,MAAMC,QAAQ,GAAGA,CAAC;EAChBC,QAAQ;EACRC,eAAe;EACfC,UAAU;EACVC,UAAU;EACVC,OAAO,EAAEC,WAAW;EACpBC,MAAM;EACNC,KAAK;EACLC,OAAO,GAAG;AACG,CAAC,KAAK;EACnB,MAAM;IAAEC,SAAS;IAAEC;EAAoB,CAAC,GAAGf,UAAU,CAACC,WAAW,CAAC;EAElE,MAAMQ,OAAO,GAAGV,WAAW,CACxBiB,KAAK,IAAK;IACTN,WAAW,GAAGM,KAAK,CAAC;IACpB,IAAID,mBAAmB,EAAE;MACvBD,SAAS,CAAC,CAAC;IACb;EACF,CAAC,EACD,CAACJ,WAAW,EAAEI,SAAS,EAAEC,mBAAmB,CAC9C,CAAC;EAED,OACEZ,IAAA,CAAAc,SAAA;IAEEC,SAAS,EAAEZ,eAAgB;IAC3Ba,SAAS,EACPN,OAAO,KAAK,aAAa,GACpB,GAAEhB,eAAe,CAACuB,IAAK,cAAa,GACrCC,SACL;IACD,WAASV,MAAO;IAChBW,QAAQ,EAAEd,UAAW;IACrBC,OAAO,EAAEA,OAAQ;IACjBc,QAAQ,EAAEhB,UAAW;IACrBK,KAAK,EAAEA,KAAM;IAAAP,QAAA,EAEZA;EAAQ,CACE,CAAC;AAElB,CAAC;AAED,MAAMmB,gBAAgB,GAAG1B,IAAI,CAACM,QAAQ,CAAC;AACvCoB,gBAAgB,CAACC,WAAW,GAAG,UAAU;AAEzC,SAASD,gBAAgB,IAAIpB,QAAQ"}
+{"version":3,"file":"MenuItem.js","names":["menuItemClasses","memo","useCallback","useContext","MenuContext","jsx","_jsx","MenuItem","children","hasInitialFocus","isSelected","isDisabled","onClick","onClickProp","testId","value","variant","closeMenu","shouldCloseOnSelect","event","_MenuItem","autoFocus","className","root","undefined","disabled","selected","tabIndex","MemoizedMenuItem","displayName"],"sources":["../src/MenuItem.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  MenuItem as MuiMenuItem,\n  MenuItemProps as MuiMenuItemProps,\n} from \"@mui/material\";\nimport { menuItemClasses } from \"@mui/material/MenuItem\";\nimport { memo, useCallback, useContext, type ReactNode } from \"react\";\n\nimport { MenuContext } from \"./MenuContext\";\nimport type { HtmlProps } from \"./HtmlProps\";\n\nexport type MenuItemProps = {\n  /**\n   * The content of the menu item.\n   */\n  children: ReactNode;\n  /**\n   * If `true`, the menu item will receive focus automatically.\n   */\n  hasInitialFocus?: boolean;\n  /**\n   * If `true`, the menu item will be visually marked as selected.\n   */\n  isSelected?: boolean;\n  /**\n   * If `true`, the menu item will be visually marked as disabled.\n   */\n  isDisabled?: boolean;\n  /**\n   * Callback fired when the menu item is clicked.\n   */\n  onClick?: MuiMenuItemProps[\"onClick\"];\n  /**\n   * The value associated with the menu item.\n   */\n  value?: string;\n  /**\n   * The variant of the menu item.\n   * - \"default\": The default variant.\n   * - \"destructive\": A variant indicating a destructive action.\n   */\n  variant?: \"default\" | \"destructive\";\n} & Pick<HtmlProps, \"testId\">;\n\nconst MenuItem = ({\n  children,\n  hasInitialFocus,\n  isSelected,\n  isDisabled,\n  onClick: onClickProp,\n  testId,\n  value,\n  variant = \"default\",\n}: MenuItemProps) => {\n  const { closeMenu, shouldCloseOnSelect } = useContext(MenuContext);\n\n  const onClick = useCallback<NonNullable<MuiMenuItemProps[\"onClick\"]>>(\n    (event) => {\n      onClickProp?.(event);\n      if (shouldCloseOnSelect) {\n        closeMenu();\n      }\n    },\n    [onClickProp, closeMenu, shouldCloseOnSelect],\n  );\n\n  return (\n    <MuiMenuItem\n      /* eslint-disable-next-line jsx-a11y/no-autofocus */\n      autoFocus={hasInitialFocus}\n      className={\n        variant === \"destructive\"\n          ? `${menuItemClasses.root}-destructive`\n          : undefined\n      }\n      data-se={testId}\n      disabled={isDisabled}\n      onClick={onClick}\n      selected={isSelected}\n      value={value}\n      tabIndex={0}\n    >\n      {children}\n    </MuiMenuItem>\n  );\n};\n\nconst MemoizedMenuItem = memo(MenuItem);\nMemoizedMenuItem.displayName = \"MenuItem\";\n\nexport { MemoizedMenuItem as MenuItem };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAMA,SAASA,eAAe,QAAQ,wBAAwB;AACxD,SAASC,IAAI,EAAEC,WAAW,EAAEC,UAAU,QAAwB,OAAO;AAAC,SAE7DC,WAAW;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAoCpB,MAAMC,QAAQ,GAAGA,CAAC;EAChBC,QAAQ;EACRC,eAAe;EACfC,UAAU;EACVC,UAAU;EACVC,OAAO,EAAEC,WAAW;EACpBC,MAAM;EACNC,KAAK;EACLC,OAAO,GAAG;AACG,CAAC,KAAK;EACnB,MAAM;IAAEC,SAAS;IAAEC;EAAoB,CAAC,GAAGf,UAAU,CAACC,WAAW,CAAC;EAElE,MAAMQ,OAAO,GAAGV,WAAW,CACxBiB,KAAK,IAAK;IACTN,WAAW,GAAGM,KAAK,CAAC;IACpB,IAAID,mBAAmB,EAAE;MACvBD,SAAS,CAAC,CAAC;IACb;EACF,CAAC,EACD,CAACJ,WAAW,EAAEI,SAAS,EAAEC,mBAAmB,CAC9C,CAAC;EAED,OACEZ,IAAA,CAAAc,SAAA;IAEEC,SAAS,EAAEZ,eAAgB;IAC3Ba,SAAS,EACPN,OAAO,KAAK,aAAa,GACpB,GAAEhB,eAAe,CAACuB,IAAK,cAAa,GACrCC,SACL;IACD,WAASV,MAAO;IAChBW,QAAQ,EAAEd,UAAW;IACrBC,OAAO,EAAEA,OAAQ;IACjBc,QAAQ,EAAEhB,UAAW;IACrBK,KAAK,EAAEA,KAAM;IACbY,QAAQ,EAAE,CAAE;IAAAnB,QAAA,EAEXA;EAAQ,CACE,CAAC;AAElB,CAAC;AAED,MAAMoB,gBAAgB,GAAG3B,IAAI,CAACM,QAAQ,CAAC;AACvCqB,gBAAgB,CAACC,WAAW,GAAG,UAAU;AAEzC,SAASD,gBAAgB,IAAIrB,QAAQ"}

package/dist/OdysseyCacheProvider.js

@@ -18,10 +18,13 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const OdysseyCacheProvider = ({
   children,
   emotionRoot,
+  hasShadowDom: hasShadowDomProp,
   nonce,
+  shadowDomElement,
   stylisPlugins
 }) => {
   const uniqueAlphabeticalId = useUniqueAlphabeticalId();
+  const hasShadowDom = hasShadowDomProp || shadowDomElement;
   const emotionCache = useMemo(() => {
     return createCache({
       ...(emotionRoot && {
@@ -30,12 +33,12 @@ const OdysseyCacheProvider = ({
       key: uniqueAlphabeticalId,
       nonce: nonce ?? window.cspNonce,
       prepend: true,
-      speedy: false,
+      speedy: hasShadowDom ? false : true,
       ...(stylisPlugins && {
         stylisPlugins
       })
     });
-  }, [emotionRoot, nonce, stylisPlugins, uniqueAlphabeticalId]);
+  }, [emotionRoot, hasShadowDom, nonce, stylisPlugins, uniqueAlphabeticalId]);
   return _jsx(CacheProvider, {
     value: emotionCache,
     children: children

package/dist/OdysseyCacheProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"OdysseyCacheProvider.js","names":["createCache","memo","useMemo","useUniqueAlphabeticalId","CacheProvider","jsx","_jsx","OdysseyCacheProvider","children","emotionRoot","nonce","stylisPlugins","uniqueAlphabeticalId","emotionCache","container","key","window","cspNonce","prepend","speedy","value","MemoizedOdysseyCacheProvider","displayName"],"sources":["../src/OdysseyCacheProvider.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\ndeclare global {\n  interface Window {\n    cspNonce: string;\n  }\n}\n\nimport createCache, { StylisPlugin } from \"@emotion/cache\";\nimport { memo, useMemo, ReactNode } from \"react\";\nimport { useUniqueAlphabeticalId } from \"./useUniqueAlphabeticalId\";\nimport { CacheProvider } from \"@emotion/react\";\n\nexport type OdysseyCacheProviderProps = {\n  children: ReactNode;\n  nonce?: string;\n  /**\n   * Emotion caches styles into the style element.\n   * When enabling this prop, Emotion caches the styles at this element, rather than in <head>.\n   */\n  emotionRoot?: HTMLStyleElement;\n  /**\n   * Emotion renders into this HTML element.\n   * When enabling this prop, Emotion renders at the top of this component rather than the bottom like it does in the HTML `<head>`.\n   */\n  shadowDomElement?: HTMLDivElement | HTMLElement;\n  stylisPlugins?: StylisPlugin[];\n};\n\nconst OdysseyCacheProvider = ({\n  children,\n  emotionRoot,\n  nonce,\n  stylisPlugins,\n}: OdysseyCacheProviderProps) => {\n  const uniqueAlphabeticalId = useUniqueAlphabeticalId();\n\n  const emotionCache = useMemo(() => {\n    return createCache({\n      ...(emotionRoot && { container: emotionRoot }),\n      key: uniqueAlphabeticalId,\n      nonce: nonce ?? window.cspNonce,\n      prepend: true,\n      speedy: false, // <-- Needs to be set to false when shadow-dom is used!! https://github.com/emotion-js/emotion/issues/2053#issuecomment-713429122\n      ...(stylisPlugins && { stylisPlugins }),\n    });\n  }, [emotionRoot, nonce, stylisPlugins, uniqueAlphabeticalId]);\n\n  return <CacheProvider value={emotionCache}>{children}</CacheProvider>;\n};\n\nconst MemoizedOdysseyCacheProvider = memo(OdysseyCacheProvider);\nMemoizedOdysseyCacheProvider.displayName = \"OdysseyCacheProvider\";\n\nexport { MemoizedOdysseyCacheProvider as OdysseyCacheProvider };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAQA,OAAOA,WAAW,MAAwB,gBAAgB;AAC1D,SAASC,IAAI,EAAEC,OAAO,QAAmB,OAAO;AAAC,SACxCC,uBAAuB;AAChC,SAASC,aAAa,QAAQ,gBAAgB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAkB/C,MAAMC,oBAAoB,GAAGA,CAAC;EAC5BC,QAAQ;EACRC,WAAW;EACXC,KAAK;EACLC;AACyB,CAAC,KAAK;EAC/B,MAAMC,oBAAoB,GAAGT,uBAAuB,CAAC,CAAC;EAEtD,MAAMU,YAAY,GAAGX,OAAO,CAAC,MAAM;IACjC,OAAOF,WAAW,CAAC;MACjB,IAAIS,WAAW,IAAI;QAAEK,SAAS,EAAEL;MAAY,CAAC,CAAC;MAC9CM,GAAG,EAAEH,oBAAoB;MACzBF,KAAK,EAAEA,KAAK,IAAIM,MAAM,CAACC,QAAQ;MAC/BC,OAAO,EAAE,IAAI;MACbC,MAAM,EAAE,KAAK;MACb,IAAIR,aAAa,IAAI;QAAEA;MAAc,CAAC;IACxC,CAAC,CAAC;EACJ,CAAC,EAAE,CAACF,WAAW,EAAEC,KAAK,EAAEC,aAAa,EAAEC,oBAAoB,CAAC,CAAC;EAE7D,OAAON,IAAA,CAACF,aAAa;IAACgB,KAAK,EAAEP,YAAa;IAAAL,QAAA,EAAEA;EAAQ,CAAgB,CAAC;AACvE,CAAC;AAED,MAAMa,4BAA4B,GAAGpB,IAAI,CAACM,oBAAoB,CAAC;AAC/Dc,4BAA4B,CAACC,WAAW,GAAG,sBAAsB;AAEjE,SAASD,4BAA4B,IAAId,oBAAoB"}
+{"version":3,"file":"OdysseyCacheProvider.js","names":["createCache","memo","useMemo","useUniqueAlphabeticalId","CacheProvider","jsx","_jsx","OdysseyCacheProvider","children","emotionRoot","hasShadowDom","hasShadowDomProp","nonce","shadowDomElement","stylisPlugins","uniqueAlphabeticalId","emotionCache","container","key","window","cspNonce","prepend","speedy","value","MemoizedOdysseyCacheProvider","displayName"],"sources":["../src/OdysseyCacheProvider.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\ndeclare global {\n  interface Window {\n    cspNonce: string;\n  }\n}\n\nimport createCache, { StylisPlugin } from \"@emotion/cache\";\nimport { memo, useMemo, ReactNode } from \"react\";\nimport { useUniqueAlphabeticalId } from \"./useUniqueAlphabeticalId\";\nimport { CacheProvider } from \"@emotion/react\";\n\nexport type OdysseyCacheProviderProps = {\n  children: ReactNode;\n  /**\n   * Emotion caches styles into the style element.\n   * When enabling this prop, Emotion caches the styles at this element, rather than in <head>.\n   */\n  emotionRoot?: HTMLStyleElement;\n  hasShadowDom?: boolean;\n  nonce?: string;\n  /**\n   * Emotion renders into this HTML element.\n   * When enabling this prop, Emotion renders at the top of this component rather than the bottom like it does in the HTML `<head>`.\n   */\n  /**\n   * @deprecated Will be removed in a future Odyssey version. Use `hasShadowDomElement` instead.\n   */\n  shadowDomElement?: HTMLDivElement | HTMLElement;\n  stylisPlugins?: StylisPlugin[];\n};\n\nconst OdysseyCacheProvider = ({\n  children,\n  emotionRoot,\n  hasShadowDom: hasShadowDomProp,\n  nonce,\n  shadowDomElement,\n  stylisPlugins,\n}: OdysseyCacheProviderProps) => {\n  const uniqueAlphabeticalId = useUniqueAlphabeticalId();\n\n  const hasShadowDom = hasShadowDomProp || shadowDomElement;\n\n  const emotionCache = useMemo(() => {\n    return createCache({\n      ...(emotionRoot && { container: emotionRoot }),\n      key: uniqueAlphabeticalId,\n      nonce: nonce ?? window.cspNonce,\n      prepend: true,\n      speedy: hasShadowDom ? false : true, // <-- Needs to be set to false when shadow-dom is used!! https://github.com/emotion-js/emotion/issues/2053#issuecomment-713429122\n      ...(stylisPlugins && { stylisPlugins }),\n    });\n  }, [emotionRoot, hasShadowDom, nonce, stylisPlugins, uniqueAlphabeticalId]);\n\n  return <CacheProvider value={emotionCache}>{children}</CacheProvider>;\n};\n\nconst MemoizedOdysseyCacheProvider = memo(OdysseyCacheProvider);\nMemoizedOdysseyCacheProvider.displayName = \"OdysseyCacheProvider\";\n\nexport { MemoizedOdysseyCacheProvider as OdysseyCacheProvider };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAQA,OAAOA,WAAW,MAAwB,gBAAgB;AAC1D,SAASC,IAAI,EAAEC,OAAO,QAAmB,OAAO;AAAC,SACxCC,uBAAuB;AAChC,SAASC,aAAa,QAAQ,gBAAgB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAsB/C,MAAMC,oBAAoB,GAAGA,CAAC;EAC5BC,QAAQ;EACRC,WAAW;EACXC,YAAY,EAAEC,gBAAgB;EAC9BC,KAAK;EACLC,gBAAgB;EAChBC;AACyB,CAAC,KAAK;EAC/B,MAAMC,oBAAoB,GAAGZ,uBAAuB,CAAC,CAAC;EAEtD,MAAMO,YAAY,GAAGC,gBAAgB,IAAIE,gBAAgB;EAEzD,MAAMG,YAAY,GAAGd,OAAO,CAAC,MAAM;IACjC,OAAOF,WAAW,CAAC;MACjB,IAAIS,WAAW,IAAI;QAAEQ,SAAS,EAAER;MAAY,CAAC,CAAC;MAC9CS,GAAG,EAAEH,oBAAoB;MACzBH,KAAK,EAAEA,KAAK,IAAIO,MAAM,CAACC,QAAQ;MAC/BC,OAAO,EAAE,IAAI;MACbC,MAAM,EAAEZ,YAAY,GAAG,KAAK,GAAG,IAAI;MACnC,IAAII,aAAa,IAAI;QAAEA;MAAc,CAAC;IACxC,CAAC,CAAC;EACJ,CAAC,EAAE,CAACL,WAAW,EAAEC,YAAY,EAAEE,KAAK,EAAEE,aAAa,EAAEC,oBAAoB,CAAC,CAAC;EAE3E,OAAOT,IAAA,CAACF,aAAa;IAACmB,KAAK,EAAEP,YAAa;IAAAR,QAAA,EAAEA;EAAQ,CAAgB,CAAC;AACvE,CAAC;AAED,MAAMgB,4BAA4B,GAAGvB,IAAI,CAACM,oBAAoB,CAAC;AAC/DiB,4BAA4B,CAACC,WAAW,GAAG,sBAAsB;AAEjE,SAASD,4BAA4B,IAAIjB,oBAAoB"}

package/dist/OdysseyProvider.js

@@ -29,7 +29,7 @@ const OdysseyProvider = ({
 }) => _jsx(OdysseyCacheProvider, {
   nonce: nonce,
   emotionRoot: emotionRoot,
-  shadowDomElement: shadowDomElement,
+  hasShadowDom: Boolean(shadowDomElement),
   stylisPlugins: stylisPlugins,
   children: _jsx(OdysseyThemeProvider, {
     designTokensOverride: designTokensOverride,

package/dist/OdysseyProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"OdysseyProvider.js","names":["memo","OdysseyCacheProvider","OdysseyThemeProvider","OdysseyTranslationProvider","jsx","_jsx","OdysseyProvider","children","designTokensOverride","emotionRoot","shadowDomElement","languageCode","nonce","stylisPlugins","themeOverride","translationOverrides","_ScopedCssBaseline","MemoizedThemeProvider"],"sources":["../src/OdysseyProvider.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 { ScopedCssBaseline } from \"@mui/material\";\n\nimport {\n  OdysseyCacheProvider,\n  OdysseyCacheProviderProps,\n} from \"./OdysseyCacheProvider\";\nimport {\n  OdysseyThemeProvider,\n  OdysseyThemeProviderProps,\n} from \"./OdysseyThemeProvider\";\nimport {\n  OdysseyTranslationProvider,\n  OdysseyTranslationProviderProps,\n} from \"./OdysseyTranslationProvider\";\nimport { DefaultSupportedLanguages } from \"./OdysseyTranslationProvider.types\";\n\nexport type OdysseyProviderProps<\n  SupportedLanguages extends string = DefaultSupportedLanguages,\n> = OdysseyCacheProviderProps &\n  OdysseyThemeProviderProps &\n  OdysseyTranslationProviderProps<SupportedLanguages> & {\n    children: ReactNode;\n  };\n\nconst OdysseyProvider = <SupportedLanguages extends string>({\n  children,\n  designTokensOverride,\n  emotionRoot,\n  shadowDomElement,\n  languageCode,\n  nonce,\n  stylisPlugins,\n  themeOverride,\n  translationOverrides,\n}: OdysseyProviderProps<SupportedLanguages>) => (\n  <OdysseyCacheProvider\n    nonce={nonce}\n    emotionRoot={emotionRoot}\n    shadowDomElement={shadowDomElement}\n    stylisPlugins={stylisPlugins}\n  >\n    <OdysseyThemeProvider\n      designTokensOverride={designTokensOverride}\n      shadowDomElement={shadowDomElement}\n      themeOverride={themeOverride}\n    >\n      <ScopedCssBaseline>\n        <OdysseyTranslationProvider<SupportedLanguages>\n          languageCode={languageCode}\n          translationOverrides={translationOverrides}\n        >\n          {children}\n        </OdysseyTranslationProvider>\n      </ScopedCssBaseline>\n    </OdysseyThemeProvider>\n  </OdysseyCacheProvider>\n);\n\nconst MemoizedThemeProvider = memo(OdysseyProvider) as typeof OdysseyProvider;\n\nexport { MemoizedThemeProvider as OdysseyProvider };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,QAAmB,OAAO;AAAC,SAItCC,oBAAoB;AAAA,SAIpBC,oBAAoB;AAAA,SAIpBC,0BAA0B;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAa5B,MAAMC,eAAe,GAAGA,CAAoC;EAC1DC,QAAQ;EACRC,oBAAoB;EACpBC,WAAW;EACXC,gBAAgB;EAChBC,YAAY;EACZC,KAAK;EACLC,aAAa;EACbC,aAAa;EACbC;AACwC,CAAC,KACzCV,IAAA,CAACJ,oBAAoB;EACnBW,KAAK,EAAEA,KAAM;EACbH,WAAW,EAAEA,WAAY;EACzBC,gBAAgB,EAAEA,gBAAiB;EACnCG,aAAa,EAAEA,aAAc;EAAAN,QAAA,EAE7BF,IAAA,CAACH,oBAAoB;IACnBM,oBAAoB,EAAEA,oBAAqB;IAC3CE,gBAAgB,EAAEA,gBAAiB;IACnCI,aAAa,EAAEA,aAAc;IAAAP,QAAA,EAE7BF,IAAA,CAAAW,kBAAA;MAAAT,QAAA,EACEF,IAAA,CAACF,0BAA0B;QACzBQ,YAAY,EAAEA,YAAa;QAC3BI,oBAAoB,EAAEA,oBAAqB;QAAAR,QAAA,EAE1CA;MAAQ,CACiB;IAAC,CACZ;EAAC,CACA;AAAC,CACH,CACvB;AAED,MAAMU,qBAAqB,GAAGjB,IAAI,CAACM,eAAe,CAA2B;AAE7E,SAASW,qBAAqB,IAAIX,eAAe"}
+{"version":3,"file":"OdysseyProvider.js","names":["memo","OdysseyCacheProvider","OdysseyThemeProvider","OdysseyTranslationProvider","jsx","_jsx","OdysseyProvider","children","designTokensOverride","emotionRoot","shadowDomElement","languageCode","nonce","stylisPlugins","themeOverride","translationOverrides","hasShadowDom","Boolean","_ScopedCssBaseline","MemoizedThemeProvider"],"sources":["../src/OdysseyProvider.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 { ScopedCssBaseline } from \"@mui/material\";\n\nimport {\n  OdysseyCacheProvider,\n  OdysseyCacheProviderProps,\n} from \"./OdysseyCacheProvider\";\nimport {\n  OdysseyThemeProvider,\n  OdysseyThemeProviderProps,\n} from \"./OdysseyThemeProvider\";\nimport {\n  OdysseyTranslationProvider,\n  OdysseyTranslationProviderProps,\n} from \"./OdysseyTranslationProvider\";\nimport { DefaultSupportedLanguages } from \"./OdysseyTranslationProvider.types\";\n\nexport type OdysseyProviderProps<\n  SupportedLanguages extends string = DefaultSupportedLanguages,\n> = OdysseyCacheProviderProps &\n  OdysseyThemeProviderProps &\n  OdysseyTranslationProviderProps<SupportedLanguages> & {\n    children: ReactNode;\n  };\n\nconst OdysseyProvider = <SupportedLanguages extends string>({\n  children,\n  designTokensOverride,\n  emotionRoot,\n  shadowDomElement,\n  languageCode,\n  nonce,\n  stylisPlugins,\n  themeOverride,\n  translationOverrides,\n}: OdysseyProviderProps<SupportedLanguages>) => (\n  <OdysseyCacheProvider\n    nonce={nonce}\n    emotionRoot={emotionRoot}\n    hasShadowDom={Boolean(shadowDomElement)}\n    stylisPlugins={stylisPlugins}\n  >\n    <OdysseyThemeProvider\n      designTokensOverride={designTokensOverride}\n      shadowDomElement={shadowDomElement}\n      themeOverride={themeOverride}\n    >\n      <ScopedCssBaseline>\n        <OdysseyTranslationProvider<SupportedLanguages>\n          languageCode={languageCode}\n          translationOverrides={translationOverrides}\n        >\n          {children}\n        </OdysseyTranslationProvider>\n      </ScopedCssBaseline>\n    </OdysseyThemeProvider>\n  </OdysseyCacheProvider>\n);\n\nconst MemoizedThemeProvider = memo(OdysseyProvider) as typeof OdysseyProvider;\n\nexport { MemoizedThemeProvider as OdysseyProvider };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,QAAmB,OAAO;AAAC,SAItCC,oBAAoB;AAAA,SAIpBC,oBAAoB;AAAA,SAIpBC,0BAA0B;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAa5B,MAAMC,eAAe,GAAGA,CAAoC;EAC1DC,QAAQ;EACRC,oBAAoB;EACpBC,WAAW;EACXC,gBAAgB;EAChBC,YAAY;EACZC,KAAK;EACLC,aAAa;EACbC,aAAa;EACbC;AACwC,CAAC,KACzCV,IAAA,CAACJ,oBAAoB;EACnBW,KAAK,EAAEA,KAAM;EACbH,WAAW,EAAEA,WAAY;EACzBO,YAAY,EAAEC,OAAO,CAACP,gBAAgB,CAAE;EACxCG,aAAa,EAAEA,aAAc;EAAAN,QAAA,EAE7BF,IAAA,CAACH,oBAAoB;IACnBM,oBAAoB,EAAEA,oBAAqB;IAC3CE,gBAAgB,EAAEA,gBAAiB;IACnCI,aAAa,EAAEA,aAAc;IAAAP,QAAA,EAE7BF,IAAA,CAAAa,kBAAA;MAAAX,QAAA,EACEF,IAAA,CAACF,0BAA0B;QACzBQ,YAAY,EAAEA,YAAa;QAC3BI,oBAAoB,EAAEA,oBAAqB;QAAAR,QAAA,EAE1CA;MAAQ,CACiB;IAAC,CACZ;EAAC,CACA;AAAC,CACH,CACvB;AAED,MAAMY,qBAAqB,GAAGnB,IAAI,CAACM,eAAe,CAA2B;AAE7E,SAASa,qBAAqB,IAAIb,eAAe"}

package/dist/OdysseyTranslationProvider.js

@@ -24,18 +24,13 @@ const mergeBundleOverrides = (languageCode, translationOverrides) => {
     ...translationStringOverrides
   };
 };
-const formatLanguageCodeToHyphenated = languageCode => languageCode?.replaceAll("_", "-");
 export const OdysseyTranslationProvider = ({
   children,
   languageCode,
   translationOverrides
 }) => {
   useEffect(() => {
-    const normalizedLanguageCode = formatLanguageCodeToHyphenated(languageCode);
-    const changeHtmlElementLanguageAttribute = () => {
-      window.document.documentElement.setAttribute("lang", normalizedLanguageCode || "en");
-    };
-    i18n.changeLanguage(languageCode || window.navigator.language, changeHtmlElementLanguageAttribute);
+    i18n.changeLanguage(languageCode || window.navigator.language);
   }, [languageCode]);
   useEffect(() => {
     if (translationOverrides) {

package/dist/OdysseyTranslationProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"OdysseyTranslationProvider.js","names":["useEffect","i18n","defaultNS","resources","I18nextProvider","getTypedObjectKeys","jsx","_jsx","odysseyI18nResourceKeysList","mergeBundleOverrides","languageCode","translationOverrides","translationStrings","translationStringOverrides","formatLanguageCodeToHyphenated","replaceAll","OdysseyTranslationProvider","children","normalizedLanguageCode","changeHtmlElementLanguageAttribute","window","document","documentElement","setAttribute","changeLanguage","navigator","language","forEach","bundle","addResourceBundle"],"sources":["../src/OdysseyTranslationProvider.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 { ReactNode, useEffect } from \"react\";\n\nimport { DefaultSupportedLanguages } from \"./OdysseyTranslationProvider.types\";\n\nimport { i18n, defaultNS, resources } from \"./i18n\";\nimport { I18nextProvider } from \"react-i18next\";\nimport { getTypedObjectKeys } from \"./getTypedObjectKeys\";\n\nexport type OdysseyI18nResourceKeys = (typeof resources)[\"en\"];\nexport const odysseyI18nResourceKeysList = getTypedObjectKeys(resources[\"en\"]);\n\nexport type TranslationOverrides<\n  SupportedLanguages extends string = DefaultSupportedLanguages,\n> = Record<SupportedLanguages, Partial<OdysseyI18nResourceKeys>>;\n\nconst mergeBundleOverrides = <SupportedLanguages extends string>(\n  languageCode: SupportedLanguages,\n  translationOverrides: TranslationOverrides<SupportedLanguages>,\n) => {\n  const translationStrings = resources[languageCode] || {};\n  const translationStringOverrides = translationOverrides[languageCode];\n  return {\n    ...translationStrings,\n    ...translationStringOverrides,\n  };\n};\n\nexport type OdysseyTranslationProviderProps<\n  SupportedLanguages extends string = DefaultSupportedLanguages,\n> = {\n  children: ReactNode;\n  languageCode?: SupportedLanguages | DefaultSupportedLanguages;\n  translationOverrides?: TranslationOverrides<SupportedLanguages>;\n};\n\nconst formatLanguageCodeToHyphenated = <SupportedLanguages extends string>(\n  languageCode: OdysseyTranslationProviderProps<SupportedLanguages>[\"languageCode\"],\n) => languageCode?.replaceAll(\"_\", \"-\");\n\nexport const OdysseyTranslationProvider = <SupportedLanguages extends string>({\n  children,\n  languageCode,\n  translationOverrides,\n}: OdysseyTranslationProviderProps<SupportedLanguages>) => {\n  useEffect(() => {\n    const normalizedLanguageCode =\n      formatLanguageCodeToHyphenated<SupportedLanguages>(languageCode);\n\n    const changeHtmlElementLanguageAttribute = () => {\n      window.document.documentElement.setAttribute(\n        \"lang\",\n        normalizedLanguageCode || \"en\",\n      );\n    };\n    // Defaults to the browser's language if available otherwise `en` will be used\n    i18n.changeLanguage(\n      languageCode || window.navigator.language,\n      changeHtmlElementLanguageAttribute,\n    );\n  }, [languageCode]);\n\n  useEffect(() => {\n    if (translationOverrides) {\n      getTypedObjectKeys(translationOverrides).forEach((language) => {\n        const bundle = mergeBundleOverrides<SupportedLanguages>(\n          language,\n          translationOverrides,\n        );\n        i18n.addResourceBundle(language, defaultNS, bundle);\n      });\n    }\n  }, [translationOverrides]);\n\n  return <I18nextProvider i18n={i18n}>{children}</I18nextProvider>;\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAAoBA,SAAS,QAAQ,OAAO;AAAC,SAIpCC,IAAI,EAAEC,SAAS,EAAEC,SAAS;AACnC,SAASC,eAAe,QAAQ,eAAe;AAAC,SACvCC,kBAAkB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAG3B,OAAO,MAAMC,2BAA2B,GAAGH,kBAAkB,CAACF,SAAS,CAAC,IAAI,CAAC,CAAC;AAM9E,MAAMM,oBAAoB,GAAGA,CAC3BC,YAAgC,EAChCC,oBAA8D,KAC3D;EACH,MAAMC,kBAAkB,GAAGT,SAAS,CAACO,YAAY,CAAC,IAAI,CAAC,CAAC;EACxD,MAAMG,0BAA0B,GAAGF,oBAAoB,CAACD,YAAY,CAAC;EACrE,OAAO;IACL,GAAGE,kBAAkB;IACrB,GAAGC;EACL,CAAC;AACH,CAAC;AAUD,MAAMC,8BAA8B,GAClCJ,YAAiF,IAC9EA,YAAY,EAAEK,UAAU,CAAC,GAAG,EAAE,GAAG,CAAC;AAEvC,OAAO,MAAMC,0BAA0B,GAAGA,CAAoC;EAC5EC,QAAQ;EACRP,YAAY;EACZC;AACmD,CAAC,KAAK;EACzDX,SAAS,CAAC,MAAM;IACd,MAAMkB,sBAAsB,GAC1BJ,8BAA8B,CAAqBJ,YAAY,CAAC;IAElE,MAAMS,kCAAkC,GAAGA,CAAA,KAAM;MAC/CC,MAAM,CAACC,QAAQ,CAACC,eAAe,CAACC,YAAY,CAC1C,MAAM,EACNL,sBAAsB,IAAI,IAC5B,CAAC;IACH,CAAC;IAEDjB,IAAI,CAACuB,cAAc,CACjBd,YAAY,IAAIU,MAAM,CAACK,SAAS,CAACC,QAAQ,EACzCP,kCACF,CAAC;EACH,CAAC,EAAE,CAACT,YAAY,CAAC,CAAC;EAElBV,SAAS,CAAC,MAAM;IACd,IAAIW,oBAAoB,EAAE;MACxBN,kBAAkB,CAACM,oBAAoB,CAAC,CAACgB,OAAO,CAAED,QAAQ,IAAK;QAC7D,MAAME,MAAM,GAAGnB,oBAAoB,CACjCiB,QAAQ,EACRf,oBACF,CAAC;QACDV,IAAI,CAAC4B,iBAAiB,CAACH,QAAQ,EAAExB,SAAS,EAAE0B,MAAM,CAAC;MACrD,CAAC,CAAC;IACJ;EACF,CAAC,EAAE,CAACjB,oBAAoB,CAAC,CAAC;EAE1B,OAAOJ,IAAA,CAACH,eAAe;IAACH,IAAI,EAAEA,IAAK;IAAAgB,QAAA,EAAEA;EAAQ,CAAkB,CAAC;AAClE,CAAC"}
+{"version":3,"file":"OdysseyTranslationProvider.js","names":["useEffect","i18n","defaultNS","resources","I18nextProvider","getTypedObjectKeys","jsx","_jsx","odysseyI18nResourceKeysList","mergeBundleOverrides","languageCode","translationOverrides","translationStrings","translationStringOverrides","OdysseyTranslationProvider","children","changeLanguage","window","navigator","language","forEach","bundle","addResourceBundle"],"sources":["../src/OdysseyTranslationProvider.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 { ReactNode, useEffect } from \"react\";\n\nimport { DefaultSupportedLanguages } from \"./OdysseyTranslationProvider.types\";\n\nimport { i18n, defaultNS, resources } from \"./i18n\";\nimport { I18nextProvider } from \"react-i18next\";\nimport { getTypedObjectKeys } from \"./getTypedObjectKeys\";\n\nexport type OdysseyI18nResourceKeys = (typeof resources)[\"en\"];\nexport const odysseyI18nResourceKeysList = getTypedObjectKeys(resources[\"en\"]);\n\nexport type TranslationOverrides<\n  SupportedLanguages extends string = DefaultSupportedLanguages,\n> = Record<SupportedLanguages, Partial<OdysseyI18nResourceKeys>>;\n\nconst mergeBundleOverrides = <SupportedLanguages extends string>(\n  languageCode: SupportedLanguages,\n  translationOverrides: TranslationOverrides<SupportedLanguages>,\n) => {\n  const translationStrings = resources[languageCode] || {};\n  const translationStringOverrides = translationOverrides[languageCode];\n  return {\n    ...translationStrings,\n    ...translationStringOverrides,\n  };\n};\n\nexport type OdysseyTranslationProviderProps<\n  SupportedLanguages extends string = DefaultSupportedLanguages,\n> = {\n  children: ReactNode;\n  languageCode?: SupportedLanguages | DefaultSupportedLanguages;\n  translationOverrides?: TranslationOverrides<SupportedLanguages>;\n};\n\nexport const OdysseyTranslationProvider = <SupportedLanguages extends string>({\n  children,\n  languageCode,\n  translationOverrides,\n}: OdysseyTranslationProviderProps<SupportedLanguages>) => {\n  useEffect(() => {\n    // Defaults to the browser's language if available otherwise `en` will be used\n    i18n.changeLanguage(languageCode || window.navigator.language);\n  }, [languageCode]);\n\n  useEffect(() => {\n    if (translationOverrides) {\n      getTypedObjectKeys(translationOverrides).forEach((language) => {\n        const bundle = mergeBundleOverrides<SupportedLanguages>(\n          language,\n          translationOverrides,\n        );\n        i18n.addResourceBundle(language, defaultNS, bundle);\n      });\n    }\n  }, [translationOverrides]);\n\n  return <I18nextProvider i18n={i18n}>{children}</I18nextProvider>;\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAAoBA,SAAS,QAAQ,OAAO;AAAC,SAIpCC,IAAI,EAAEC,SAAS,EAAEC,SAAS;AACnC,SAASC,eAAe,QAAQ,eAAe;AAAC,SACvCC,kBAAkB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAG3B,OAAO,MAAMC,2BAA2B,GAAGH,kBAAkB,CAACF,SAAS,CAAC,IAAI,CAAC,CAAC;AAM9E,MAAMM,oBAAoB,GAAGA,CAC3BC,YAAgC,EAChCC,oBAA8D,KAC3D;EACH,MAAMC,kBAAkB,GAAGT,SAAS,CAACO,YAAY,CAAC,IAAI,CAAC,CAAC;EACxD,MAAMG,0BAA0B,GAAGF,oBAAoB,CAACD,YAAY,CAAC;EACrE,OAAO;IACL,GAAGE,kBAAkB;IACrB,GAAGC;EACL,CAAC;AACH,CAAC;AAUD,OAAO,MAAMC,0BAA0B,GAAGA,CAAoC;EAC5EC,QAAQ;EACRL,YAAY;EACZC;AACmD,CAAC,KAAK;EACzDX,SAAS,CAAC,MAAM;IAEdC,IAAI,CAACe,cAAc,CAACN,YAAY,IAAIO,MAAM,CAACC,SAAS,CAACC,QAAQ,CAAC;EAChE,CAAC,EAAE,CAACT,YAAY,CAAC,CAAC;EAElBV,SAAS,CAAC,MAAM;IACd,IAAIW,oBAAoB,EAAE;MACxBN,kBAAkB,CAACM,oBAAoB,CAAC,CAACS,OAAO,CAAED,QAAQ,IAAK;QAC7D,MAAME,MAAM,GAAGZ,oBAAoB,CACjCU,QAAQ,EACRR,oBACF,CAAC;QACDV,IAAI,CAACqB,iBAAiB,CAACH,QAAQ,EAAEjB,SAAS,EAAEmB,MAAM,CAAC;MACrD,CAAC,CAAC;IACJ;EACF,CAAC,EAAE,CAACV,oBAAoB,CAAC,CAAC;EAE1B,OAAOJ,IAAA,CAACH,eAAe;IAACH,IAAI,EAAEA,IAAK;IAAAc,QAAA,EAAEA;EAAQ,CAAkB,CAAC;AAClE,CAAC"}

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,80 +60,103 @@ const PaginationButtonContainer = styled("div")({
     marginInlineStart: `0 !important`
   }
 });
-const DataTablePagination = ({
-  pagination,
-  setPagination,
-  totalRows,
+const Pagination = ({
+  currentPageLabel,
   isDisabled,
+  isMoreDisabled,
+  lastRow,
+  loadMoreLabel,
+  maxPageIndex,
+  maxPageSize,
+  nextLabel,
+  onPaginationChange,
+  pageIndex,
+  pageSize,
+  previousLabel,
+  rowsPerPageLabel,
+  totalRows,
+  currentRowsCount,
   variant
 }) => {
   const odysseyDesignTokens = useOdysseyDesignTokens();
-  const {
-    t
-  } = useTranslation();
-  const [page, setPage] = useState(pagination.pageIndex);
-  const [rowsPerPage, setRowsPerPage] = useState(pagination.pageSize);
-  const initialRowsPerPage = useRef(pagination.pageSize);
-  const firstRow = pagination.pageSize * (pagination.pageIndex - 1) + 1;
-  let lastRow = firstRow + (pagination.pageSize - 1);
-  lastRow = totalRows && lastRow > totalRows ? totalRows : lastRow;
+  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,
+    currentRowsCount: currentRowsCount || 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]);
+    const value = maxPageIndex ? Math.min(parseInt(event.target.value), maxPageIndex) : parseInt(event.target.value);
+    setPage(value);
+  }, [setPage, maxPageIndex]);
   const setRowsPerPageFromEvent = useCallback(event => {
-    setRowsPerPage(parseInt(event.target.value));
-  }, [setRowsPerPage]);
+    const value = maxPageSize ? Math.min(parseInt(event.target.value), maxPageSize) : parseInt(event.target.value);
+    setRowsPerPage(value);
+  }, [setRowsPerPage, maxPageSize]);
   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]);
+    return isMoreDisabled || (totalRows ? rowsPerPage >= totalRows : false);
+  }, [isMoreDisabled, rowsPerPage, totalRows]);
+  const nextButtonDisabled = useMemo(() => isMoreDisabled || (totalRows ? lastRow >= totalRows : false) || isDisabled, [isMoreDisabled, totalRows, lastRow, isDisabled]);
+  const previousButtonDisabled = useMemo(() => pageIndex <= 1 || isDisabled, [pageIndex, isDisabled]);
+  const rowsPerPageInputProps = useMemo(() => ({
+    "aria-label": rowsPerPageLabel,
+    max: maxPageSize || totalRows
+  }), [maxPageSize, rowsPerPageLabel, totalRows]);
+  const currentPageInputProps = useMemo(() => ({
+    "aria-label": currentPageLabel,
+    max: maxPageIndex
+  }), [currentPageLabel, maxPageIndex]);
   return variant === "paged" ? _jsxs(PaginationContainer, {
     children: [_jsxs(PaginationSegment, {
       odysseyDesignTokens: odysseyDesignTokens,
@@ -141,7 +164,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 +173,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 +186,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 +195,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 +217,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","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","handleLoadMore","current","handleNextButton","handlePreviousButton","loadMoreIsDisabled","nextButtonDisabled","previousButtonDisabled","rowsPerPageInputProps","max","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      setRowsPerPage(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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"}

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,42 @@
+/*!
+ * 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";
+import { useMemo } from "react";
+export const usePagination = ({
+  currentRowsCount,
+  pageIndex,
+  pageSize,
+  totalRows
+}) => {
+  const {
+    t
+  } = useTranslation();
+  return useMemo(() => {
+    const firstRow = pageSize * (pageIndex - 1) + 1;
+    const lastRow = firstRow + (currentRowsCount - 1);
+    const totalRowsLabel = totalRows ? t("pagination.rowswithtotal", {
+      firstRow,
+      lastRow,
+      totalRows
+    }) : t("pagination.rowswithouttotal", {
+      firstRow,
+      lastRow
+    });
+    return {
+      firstRow,
+      lastRow,
+      totalRowsLabel
+    };
+  }, [currentRowsCount, pageIndex, pageSize, totalRows, t]);
+};
+//# sourceMappingURL=usePagination.js.map

package/dist/Pagination/usePagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePagination.js","names":["useTranslation","useMemo","usePagination","currentRowsCount","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\";\nimport { useMemo } from \"react\";\n\ntype UsePaginationType = {\n  currentRowsCount: number;\n  pageIndex: number;\n  pageSize: number;\n  totalRows?: number;\n};\n\nexport const usePagination = ({\n  currentRowsCount,\n  pageIndex,\n  pageSize,\n  totalRows,\n}: UsePaginationType) => {\n  const { t } = useTranslation();\n\n  return useMemo(() => {\n    const firstRow = pageSize * (pageIndex - 1) + 1;\n    const lastRow = firstRow + (currentRowsCount - 1);\n\n    const totalRowsLabel = totalRows\n      ? t(\"pagination.rowswithtotal\", { firstRow, lastRow, totalRows })\n      : t(\"pagination.rowswithouttotal\", { firstRow, lastRow });\n\n    return {\n      firstRow,\n      lastRow,\n      totalRowsLabel,\n    };\n  }, [currentRowsCount, pageIndex, pageSize, totalRows, t]);\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,cAAc,QAAQ,eAAe;AAC9C,SAASC,OAAO,QAAQ,OAAO;AAS/B,OAAO,MAAMC,aAAa,GAAGA,CAAC;EAC5BC,gBAAgB;EAChBC,SAAS;EACTC,QAAQ;EACRC;AACiB,CAAC,KAAK;EACvB,MAAM;IAAEC;EAAE,CAAC,GAAGP,cAAc,CAAC,CAAC;EAE9B,OAAOC,OAAO,CAAC,MAAM;IACnB,MAAMO,QAAQ,GAAGH,QAAQ,IAAID,SAAS,GAAG,CAAC,CAAC,GAAG,CAAC;IAC/C,MAAMK,OAAO,GAAGD,QAAQ,IAAIL,gBAAgB,GAAG,CAAC,CAAC;IAEjD,MAAMO,cAAc,GAAGJ,SAAS,GAC5BC,CAAC,CAAC,0BAA0B,EAAE;MAAEC,QAAQ;MAAEC,OAAO;MAAEH;IAAU,CAAC,CAAC,GAC/DC,CAAC,CAAC,6BAA6B,EAAE;MAAEC,QAAQ;MAAEC;IAAQ,CAAC,CAAC;IAE3D,OAAO;MACLD,QAAQ;MACRC,OAAO;MACPC;IACF,CAAC;EACH,CAAC,EAAE,CAACP,gBAAgB,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,CAAC,CAAC,CAAC;AAC3D,CAAC"}