@okta/odyssey-react-mui 1.43.0 → 1.44.0

package/dist/esm/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","names":["memo","useMemo","useEffect","styled","ButtonContext","MenuButton","MoreIcon","useOdysseyDesignTokens","Heading5","Paragraph","Support","Box","jsx","_jsx","jsxs","_jsxs","CARD_IMAGE_HEIGHT","ImageContainer","shouldForwardProp","prop","odysseyDesignTokens","hasMenuButtonChildren","display","alignItems","maxHeight","height","marginBlockEnd","Spacing5","paddingRight","MenuButtonContainer","position","right","Spacing3","top","CardContentContainer","buttonProviderValue","isFullWidth","Card","button","description","image","menuButtonChildren","onClick","overline","title","cardContent","children","Boolean","component","color","_CardActions","Provider","value","_Card","className","_CardActionArea","endIcon","ariaLabel","buttonVariant","menuAlignment","size","tooltipText","MemoizedCard","displayName","Tile","props","console","warn","MemoizedTile"],"sources":["../../src/Card.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  MouseEventHandler,\n  ReactElement,\n  memo,\n  useMemo,\n  useEffect,\n} from \"react\";\nimport {\n  Card as MuiCard,\n  CardActions as MuiCardActions,\n  CardActionArea as MuiCardActionArea,\n} from \"@mui/material\";\nimport styled from \"@emotion/styled\";\n\nimport {\n  Button,\n  ButtonContext,\n  MenuButton,\n  MenuButtonProps,\n} from \"./Buttons/index.js\";\nimport { MoreIcon } from \"./icons.generated/index.js\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"./OdysseyDesignTokensContext.js\";\nimport { Heading5, Paragraph, Support } from \"./Typography.js\";\nimport { Box } from \"./Box.js\";\n\nexport const CARD_IMAGE_HEIGHT = \"64px\";\n\nexport type CardProps = {\n  description?: string;\n  image?: ReactElement;\n  overline?: string;\n  title?: string;\n} & (\n  | {\n      onClick: MouseEventHandler;\n      button?: never;\n      menuButtonChildren?: never;\n    }\n  | {\n      onClick?: never;\n      button?: ReactElement<typeof Button>;\n      menuButtonChildren?: MenuButtonProps[\"children\"];\n    }\n);\n\nconst ImageContainer = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" && prop !== \"hasMenuButtonChildren\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n  hasMenuButtonChildren: boolean;\n}>(({ odysseyDesignTokens, hasMenuButtonChildren }) => ({\n  display: \"flex\",\n  alignItems: \"flex-start\",\n  maxHeight: CARD_IMAGE_HEIGHT,\n  height: CARD_IMAGE_HEIGHT,\n  marginBlockEnd: odysseyDesignTokens.Spacing5,\n  paddingRight: hasMenuButtonChildren ? odysseyDesignTokens.Spacing5 : 0,\n}));\n\nconst MenuButtonContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({\n  position: \"absolute\",\n  right: odysseyDesignTokens.Spacing3,\n  top: odysseyDesignTokens.Spacing3,\n}));\n\nconst CardContentContainer = styled(\"div\")(() => ({\n  display: \"flex\",\n}));\n\nconst buttonProviderValue = { isFullWidth: true };\n\nconst Card = ({\n  button,\n  description,\n  image,\n  menuButtonChildren,\n  onClick,\n  overline,\n  title,\n}: CardProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  const cardContent = useMemo(\n    () => (\n      <CardContentContainer>\n        <Box>\n          {image && (\n            <ImageContainer\n              odysseyDesignTokens={odysseyDesignTokens}\n              hasMenuButtonChildren={Boolean(menuButtonChildren)}\n            >\n              {image}\n            </ImageContainer>\n          )}\n\n          {overline && <Support component=\"div\">{overline}</Support>}\n          {title && <Heading5 component=\"div\">{title}</Heading5>}\n          {description && (\n            <Paragraph color=\"textSecondary\">{description}</Paragraph>\n          )}\n\n          {button && (\n            <MuiCardActions>\n              <ButtonContext.Provider value={buttonProviderValue}>\n                {button}\n              </ButtonContext.Provider>\n            </MuiCardActions>\n          )}\n        </Box>\n      </CardContentContainer>\n    ),\n    [\n      button,\n      description,\n      image,\n      menuButtonChildren,\n      overline,\n      title,\n      odysseyDesignTokens,\n    ],\n  );\n\n  return (\n    <MuiCard className={onClick ? \"isClickable\" : \"\"}>\n      {onClick ? (\n        <MuiCardActionArea onClick={onClick}>{cardContent}</MuiCardActionArea>\n      ) : (\n        cardContent\n      )}\n\n      {menuButtonChildren && (\n        <MenuButtonContainer odysseyDesignTokens={odysseyDesignTokens}>\n          <MenuButton\n            endIcon={<MoreIcon />}\n            ariaLabel=\"Card menu\"\n            buttonVariant=\"floating\"\n            menuAlignment=\"right\"\n            size=\"small\"\n            tooltipText=\"Actions\"\n          >\n            {menuButtonChildren}\n          </MenuButton>\n        </MenuButtonContainer>\n      )}\n    </MuiCard>\n  );\n};\n\nconst MemoizedCard = memo(Card);\nMemoizedCard.displayName = \"Card\";\n\n/**\n * @deprecated The 'Tile' component is now called 'Card'. Please update your references as 'Tile' will be deprecated soon.\n */\nconst Tile = (props: CardProps) => {\n  useEffect(() => {\n    console.warn(\n      \"Warning: The 'Tile' component is now called 'Card'. Please update your references as 'Tile' will be deprecated soon.\",\n    );\n  }, []);\n\n  return <MemoizedCard {...props} />;\n};\n\nconst MemoizedTile = memo(Tile);\nMemoizedTile.displayName = \"Tile\";\n\nexport { MemoizedCard as Card, MemoizedTile as Tile };\n"],"mappings":";;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAGEA,IAAI,EACJC,OAAO,EACPC,SAAS,QACJ,OAAO;AAMd,OAAOC,MAAM,MAAM,iBAAiB;AAEpC,SAEEC,aAAa,EACbC,UAAU,QAEL,oBAAoB;AAC3B,SAASC,QAAQ,QAAQ,4BAA4B;AACrD,SAEEC,sBAAsB,QACjB,iCAAiC;AACxC,SAASC,QAAQ,EAAEC,SAAS,EAAEC,OAAO,QAAQ,iBAAiB;AAC9D,SAASC,GAAG,QAAQ,UAAU;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAE/B,OAAO,MAAMC,iBAAiB,GAAG,MAAM;AAoBvC,MAAMC,cAAc,GAAGd,MAAM,CAAC,KAAK,EAAE;EACnCe,iBAAiB,EAAGC,IAAI,IACtBA,IAAI,KAAK,qBAAqB,IAAIA,IAAI,KAAK;AAC/C,CAAC,CAAC,CAGC,CAAC;EAAEC,mBAAmB;EAAEC;AAAsB,CAAC,MAAM;EACtDC,OAAO,EAAE,MAAM;EACfC,UAAU,EAAE,YAAY;EACxBC,SAAS,EAAER,iBAAiB;EAC5BS,MAAM,EAAET,iBAAiB;EACzBU,cAAc,EAAEN,mBAAmB,CAACO,QAAQ;EAC5CC,YAAY,EAAEP,qBAAqB,GAAGD,mBAAmB,CAACO,QAAQ,GAAG;AACvE,CAAC,CAAC,CAAC;AAEH,MAAME,mBAAmB,GAAG1B,MAAM,CAAC,KAAK,EAAE;EACxCe,iBAAiB,EAAGC,IAAI,IAAKA,IAAI,KAAK;AACxC,CAAC,CAAC,CAAwC,CAAC;EAAEC;AAAoB,CAAC,MAAM;EACtEU,QAAQ,EAAE,UAAU;EACpBC,KAAK,EAAEX,mBAAmB,CAACY,QAAQ;EACnCC,GAAG,EAAEb,mBAAmB,CAACY;AAC3B,CAAC,CAAC,CAAC;AAEH,MAAME,oBAAoB,GAAG/B,MAAM,CAAC,KAAK,CAAC,CAAC,OAAO;EAChDmB,OAAO,EAAE;AACX,CAAC,CAAC,CAAC;AAEH,MAAMa,mBAAmB,GAAG;EAAEC,WAAW,EAAE;AAAK,CAAC;AAEjD,MAAMC,IAAI,GAAGA,CAAC;EACZC,MAAM;EACNC,WAAW;EACXC,KAAK;EACLC,kBAAkB;EAClBC,OAAO;EACPC,QAAQ;EACRC;AACS,CAAC,KAAK;EACf,MAAMxB,mBAAmB,GAAGb,sBAAsB,CAAC,CAAC;EAEpD,MAAMsC,WAAW,GAAG5C,OAAO,CACzB,MACEY,IAAA,CAACqB,oBAAoB;IAAAY,QAAA,EACnB/B,KAAA,CAACJ,GAAG;MAAAmC,QAAA,GACDN,KAAK,IACJ3B,IAAA,CAACI,cAAc;QACbG,mBAAmB,EAAEA,mBAAoB;QACzCC,qBAAqB,EAAE0B,OAAO,CAACN,kBAAkB,CAAE;QAAAK,QAAA,EAElDN;MAAK,CACQ,CACjB,EAEAG,QAAQ,IAAI9B,IAAA,CAACH,OAAO;QAACsC,SAAS,EAAC,KAAK;QAAAF,QAAA,EAAEH;MAAQ,CAAU,CAAC,EACzDC,KAAK,IAAI/B,IAAA,CAACL,QAAQ;QAACwC,SAAS,EAAC,KAAK;QAAAF,QAAA,EAAEF;MAAK,CAAW,CAAC,EACrDL,WAAW,IACV1B,IAAA,CAACJ,SAAS;QAACwC,KAAK,EAAC,eAAe;QAAAH,QAAA,EAAEP;MAAW,CAAY,CAC1D,EAEAD,MAAM,IACLzB,IAAA,CAAAqC,YAAA;QAAAJ,QAAA,EACEjC,IAAA,CAACT,aAAa,CAAC+C,QAAQ;UAACC,KAAK,EAAEjB,mBAAoB;UAAAW,QAAA,EAChDR;QAAM,CACe;MAAC,CACX,CACjB;IAAA,CACE;EAAC,CACc,CACvB,EACD,CACEA,MAAM,EACNC,WAAW,EACXC,KAAK,EACLC,kBAAkB,EAClBE,QAAQ,EACRC,KAAK,EACLxB,mBAAmB,CAEvB,CAAC;EAED,OACEL,KAAA,CAAAsC,KAAA;IAASC,SAAS,EAAEZ,OAAO,GAAG,aAAa,GAAG,EAAG;IAAAI,QAAA,GAC9CJ,OAAO,GACN7B,IAAA,CAAA0C,eAAA;MAAmBb,OAAO,EAAEA,OAAQ;MAAAI,QAAA,EAAED;IAAW,CAAoB,CAAC,GAEtEA,WACD,EAEAJ,kBAAkB,IACjB5B,IAAA,CAACgB,mBAAmB;MAACT,mBAAmB,EAAEA,mBAAoB;MAAA0B,QAAA,EAC5DjC,IAAA,CAACR,UAAU;QACTmD,OAAO,EAAE3C,IAAA,CAACP,QAAQ,IAAE,CAAE;QACtBmD,SAAS,EAAC,WAAW;QACrBC,aAAa,EAAC,UAAU;QACxBC,aAAa,EAAC,OAAO;QACrBC,IAAI,EAAC,OAAO;QACZC,WAAW,EAAC,SAAS;QAAAf,QAAA,EAEpBL;MAAkB,CACT;IAAC,CACM,CACtB;EAAA,CACM,CAAC;AAEd,CAAC;AAED,MAAMqB,YAAY,GAAG9D,IAAI,CAACqC,IAAI,CAAC;AAC/ByB,YAAY,CAACC,WAAW,GAAG,MAAM;AAKjC,MAAMC,IAAI,GAAIC,KAAgB,IAAK;EACjC/D,SAAS,CAAC,MAAM;IACdgE,OAAO,CAACC,IAAI,CACV,sHACF,CAAC;EACH,CAAC,EAAE,EAAE,CAAC;EAEN,OAAOtD,IAAA,CAACiD,YAAY;IAAA,GAAKG;EAAK,CAAG,CAAC;AACpC,CAAC;AAED,MAAMG,YAAY,GAAGpE,IAAI,CAACgE,IAAI,CAAC;AAC/BI,YAAY,CAACL,WAAW,GAAG,MAAM;AAEjC,SAASD,YAAY,IAAIzB,IAAI,EAAE+B,YAAY,IAAIJ,IAAI","ignoreList":[]}
+{"version":3,"file":"Card.js","names":["styled","memo","useEffect","useMemo","Box","ButtonContext","MenuButton","MoreIcon","useOdysseyDesignTokens","Heading5","Paragraph","Support","jsx","_jsx","jsxs","_jsxs","CARD_IMAGE_HEIGHT","ImageContainer","shouldForwardProp","prop","odysseyDesignTokens","hasMenuButtonChildren","display","alignItems","maxHeight","height","marginBlockEnd","Spacing5","paddingRight","MenuButtonContainer","position","right","Spacing3","top","CardContentContainer","buttonProviderValue","isFullWidth","Card","button","description","image","menuButtonChildren","onClick","overline","title","cardContent","children","Boolean","component","color","_CardActions","Provider","value","_Card","className","_CardActionArea","ariaLabel","buttonVariant","endIcon","menuAlignment","size","tooltipText","MemoizedCard","displayName","Tile","props","console","warn","MemoizedTile"],"sources":["../../src/Card.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 styled from \"@emotion/styled\";\nimport {\n  Card as MuiCard,\n  CardActionArea as MuiCardActionArea,\n  CardActions as MuiCardActions,\n} from \"@mui/material\";\nimport {\n  memo,\n  MouseEventHandler,\n  ReactElement,\n  useEffect,\n  useMemo,\n} from \"react\";\n\nimport { Box } from \"./Box.js\";\nimport {\n  Button,\n  ButtonContext,\n  MenuButton,\n  MenuButtonProps,\n} from \"./Buttons/index.js\";\nimport { MoreIcon } from \"./icons.generated/index.js\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"./OdysseyDesignTokensContext.js\";\nimport { Heading5, Paragraph, Support } from \"./Typography.js\";\n\nexport const CARD_IMAGE_HEIGHT = \"64px\";\n\nexport type CardProps = {\n  description?: string;\n  image?: ReactElement;\n  overline?: string;\n  title?: string;\n} & (\n  | {\n      button?: never;\n      menuButtonChildren?: never;\n      onClick: MouseEventHandler;\n    }\n  | {\n      button?: ReactElement<typeof Button>;\n      menuButtonChildren?: MenuButtonProps[\"children\"];\n      onClick?: never;\n    }\n);\n\nconst ImageContainer = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" && prop !== \"hasMenuButtonChildren\",\n})<{\n  hasMenuButtonChildren: boolean;\n  odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens, hasMenuButtonChildren }) => ({\n  display: \"flex\",\n  alignItems: \"flex-start\",\n  maxHeight: CARD_IMAGE_HEIGHT,\n  height: CARD_IMAGE_HEIGHT,\n  marginBlockEnd: odysseyDesignTokens.Spacing5,\n  paddingRight: hasMenuButtonChildren ? odysseyDesignTokens.Spacing5 : 0,\n}));\n\nconst MenuButtonContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({\n  position: \"absolute\",\n  right: odysseyDesignTokens.Spacing3,\n  top: odysseyDesignTokens.Spacing3,\n}));\n\nconst CardContentContainer = styled(\"div\")(() => ({\n  display: \"flex\",\n}));\n\nconst buttonProviderValue = { isFullWidth: true };\n\nconst Card = ({\n  button,\n  description,\n  image,\n  menuButtonChildren,\n  onClick,\n  overline,\n  title,\n}: CardProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  const cardContent = useMemo(\n    () => (\n      <CardContentContainer>\n        <Box>\n          {image && (\n            <ImageContainer\n              hasMenuButtonChildren={Boolean(menuButtonChildren)}\n              odysseyDesignTokens={odysseyDesignTokens}\n            >\n              {image}\n            </ImageContainer>\n          )}\n\n          {overline && <Support component=\"div\">{overline}</Support>}\n          {title && <Heading5 component=\"div\">{title}</Heading5>}\n          {description && (\n            <Paragraph color=\"textSecondary\">{description}</Paragraph>\n          )}\n\n          {button && (\n            <MuiCardActions>\n              <ButtonContext.Provider value={buttonProviderValue}>\n                {button}\n              </ButtonContext.Provider>\n            </MuiCardActions>\n          )}\n        </Box>\n      </CardContentContainer>\n    ),\n    [\n      button,\n      description,\n      image,\n      menuButtonChildren,\n      overline,\n      title,\n      odysseyDesignTokens,\n    ],\n  );\n\n  return (\n    <MuiCard className={onClick ? \"isClickable\" : \"\"}>\n      {onClick ? (\n        <MuiCardActionArea onClick={onClick}>{cardContent}</MuiCardActionArea>\n      ) : (\n        cardContent\n      )}\n\n      {menuButtonChildren && (\n        <MenuButtonContainer odysseyDesignTokens={odysseyDesignTokens}>\n          <MenuButton\n            ariaLabel=\"Card menu\"\n            buttonVariant=\"floating\"\n            endIcon={<MoreIcon />}\n            menuAlignment=\"right\"\n            size=\"small\"\n            tooltipText=\"Actions\"\n          >\n            {menuButtonChildren}\n          </MenuButton>\n        </MenuButtonContainer>\n      )}\n    </MuiCard>\n  );\n};\n\nconst MemoizedCard = memo(Card);\nMemoizedCard.displayName = \"Card\";\n\n/**\n * @deprecated The 'Tile' component is now called 'Card'. Please update your references as 'Tile' will be deprecated soon.\n */\nconst Tile = (props: CardProps) => {\n  useEffect(() => {\n    console.warn(\n      \"Warning: The 'Tile' component is now called 'Card'. Please update your references as 'Tile' will be deprecated soon.\",\n    );\n  }, []);\n\n  return <MemoizedCard {...props} />;\n};\n\nconst MemoizedTile = memo(Tile);\nMemoizedTile.displayName = \"Tile\";\n\nexport { MemoizedCard as Card, MemoizedTile as Tile };\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/Checkbox.js

@@ -13,9 +13,9 @@ import _Checkbox from "@mui/material/Checkbox";
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { useTranslation } from "react-i18next";
-import { memo, useCallback, useMemo, useRef, useImperativeHandle } from "react";
 import styled from "@emotion/styled";
+import { memo, useCallback, useImperativeHandle, useMemo, useRef } from "react";
+import { useTranslation } from "react-i18next";
 import { ComponentControlledState, getControlState } from "./inputUtils.js";
 import { useOdysseyDesignTokens } from "./OdysseyDesignTokensContext.js";
 import { Typography } from "./Typography.js";
@@ -85,8 +85,8 @@ const Checkbox = ({
         children: labelProp
       }), isRequired && _jsxs(_Fragment, {
         children: [" ", _jsxs(Typography, {
-          component: "span",
           color: "textSecondary",
+          component: "span",
           children: ["(", t("fieldlabel.required.text"), ")"]
         })]
       })]
@@ -120,24 +120,23 @@ const Checkbox = ({
   }), [hint, isReadOnly]);
   return _jsxs(_Fragment, {
     children: [_jsx(_FormControlLabel, {
-      sx: checkboxStyles,
       "aria-label": ariaLabel,
       "aria-labelledby": ariaLabelledBy,
       className: validity === "invalid" ? "Mui-error" : validity === "valid" ? "Mui-valid" : "",
       control: _jsx(_Checkbox, {
         ...inputValues,
+        disabled: isDisabled,
         indeterminate: isIndeterminate,
-        onChange: onChange,
-        onClick: onClick,
-        required: isRequired,
         inputProps: {
           "aria-describedby": hintId,
           "aria-readonly": isReadOnly,
           "data-se": testId,
           readOnly: isReadOnly
         },
-        disabled: isDisabled,
         inputRef: localInputRef,
+        onChange: onChange,
+        onClick: onClick,
+        required: isRequired,
         sx: {
           marginBlockStart: "2px"
         }
@@ -146,10 +145,11 @@ const Checkbox = ({
       id: idOverride,
       label: label,
       name: nameOverride ?? idOverride,
-      value: value,
-      required: isRequired,
       onBlur: onBlur,
-      translate: translate
+      required: isRequired,
+      sx: checkboxStyles,
+      translate: translate,
+      value: value
     }), hint && _jsx(HintContainerWithInlineStartSpacing, {
       odysseyDesignTokens: odysseyDesignTokens,
       children: _jsx(_FormHelperText, {

package/dist/esm/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","names":["useTranslation","memo","useCallback","useMemo","useRef","useImperativeHandle","styled","ComponentControlledState","getControlState","useOdysseyDesignTokens","Typography","useUniqueId","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","checkboxValidityValues","HintContainerWithInlineStartSpacing","div","odysseyDesignTokens","paddingInlineStart","TypographyLineHeightUi","Spacing2","marginBlockEnd","color","TypographyColorSubordinate","Checkbox","ariaLabel","ariaLabelledBy","id","idOverride","inputRef","isChecked","isDefaultChecked","isDisabled","isIndeterminate","isReadOnly","isRequired","label","labelProp","hint","name","nameOverride","onChange","onChangeProp","onBlur","onBlurProp","testId","translate","validity","value","t","hintId","undefined","controlledStateRef","controlledValue","uncontrolledValue","inputValues","current","CONTROLLED","checked","defaultChecked","localInputRef","focus","children","component","event","onClick","stopPropagation","preventDefault","checkboxStyles","alignItems","cursor","_FormControlLabel","sx","className","control","_Checkbox","indeterminate","required","inputProps","readOnly","disabled","marginBlockStart","_FormHelperText","MemoizedCheckbox","displayName"],"sources":["../../src/Checkbox.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 { useTranslation } from \"react-i18next\";\nimport { memo, useCallback, useMemo, useRef, useImperativeHandle } from \"react\";\nimport {\n  Checkbox as MuiCheckbox,\n  CheckboxProps as MuiCheckboxProps,\n  FormControlLabel,\n  FormControlLabelProps as MuiFormControlLabelProps,\n  FormHelperText,\n} from \"@mui/material\";\nimport styled from \"@emotion/styled\";\n\nimport { CheckedFieldProps } from \"./FormCheckedProps.js\";\nimport type { HtmlProps } from \"./HtmlProps.js\";\nimport {\n  ComponentControlledState,\n  FocusHandle,\n  getControlState,\n} from \"./inputUtils.js\";\nimport { FieldComponentProps } from \"./FieldComponentProps.js\";\nimport {\n  useOdysseyDesignTokens,\n  DesignTokens,\n} from \"./OdysseyDesignTokensContext.js\";\nimport { Typography } from \"./Typography.js\";\nimport { useUniqueId } from \"./useUniqueId.js\";\n\nexport const checkboxValidityValues = [\"valid\", \"invalid\", \"inherit\"] as const;\n\nconst HintContainerWithInlineStartSpacing = styled.div<{\n  odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens }) => ({\n  paddingInlineStart: `calc(${odysseyDesignTokens.TypographyLineHeightUi}em + ${odysseyDesignTokens.Spacing2})`,\n  marginBlockEnd: odysseyDesignTokens.Spacing2,\n\n  // MUI applies the '.Mui-error' class to this hint text when the checkbox is invalid which turns the copy red\n  // We want to keep the hint text gray in the error state\n  \".Mui-error\": {\n    color: odysseyDesignTokens.TypographyColorSubordinate,\n  },\n}));\n\nexport type CheckboxProps = {\n  /**\n   * The ref forwarded to the Checkbox\n   */\n  inputRef?: React.RefObject<FocusHandle>;\n  /**\n   * Determines whether the Checkbox is in an indeterminate state\n   */\n  isIndeterminate?: boolean;\n  /**\n   * Determines whether the Checkbox is required\n   */\n  isRequired?: boolean;\n  /**\n   * The label text for the Checkbox\n   */\n  label?: string;\n  /**\n   * The checkbox validity, if different from its enclosing group. Defaults to \"inherit\".\n   */\n  validity?: (typeof checkboxValidityValues)[number];\n  /**\n   * The value attribute of the Checkbox\n   */\n  value?: string;\n  /**\n   * Callback fired when the blur event happens. Provides event value.\n   */\n  onBlur?: MuiFormControlLabelProps[\"onBlur\"];\n} & Pick<\n  FieldComponentProps,\n  \"hint\" | \"id\" | \"isDisabled\" | \"isReadOnly\" | \"name\"\n> &\n  CheckedFieldProps<MuiCheckboxProps> &\n  Pick<HtmlProps, \"ariaLabel\" | \"ariaLabelledBy\" | \"testId\" | \"translate\">;\n\nconst Checkbox = ({\n  ariaLabel,\n  ariaLabelledBy,\n  id: idOverride,\n  inputRef,\n  isChecked,\n  isDefaultChecked,\n  isDisabled,\n  isIndeterminate,\n  isReadOnly = false,\n  isRequired,\n  label: labelProp,\n  hint,\n  name: nameOverride,\n  onChange: onChangeProp,\n  onBlur: onBlurProp,\n  testId,\n  translate,\n  validity = \"inherit\",\n  value,\n}: CheckboxProps) => {\n  const { t } = useTranslation();\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n  const id = useUniqueId(idOverride);\n  const hintId = hint ? `${id}-hint` : undefined;\n\n  const controlledStateRef = useRef(\n    getControlState({\n      controlledValue: isChecked,\n      uncontrolledValue: isDefaultChecked,\n    }),\n  );\n  const inputValues = useMemo(() => {\n    if (controlledStateRef.current === ComponentControlledState.CONTROLLED) {\n      return { checked: isChecked };\n    }\n    return { defaultChecked: isDefaultChecked };\n  }, [isDefaultChecked, isChecked]);\n\n  const localInputRef = useRef<HTMLInputElement>(null);\n  useImperativeHandle(\n    inputRef,\n    () => ({\n      focus: () => {\n        localInputRef.current?.focus();\n      },\n    }),\n    [],\n  );\n\n  const label = useMemo(() => {\n    return (\n      <>\n        <Typography component=\"span\">{labelProp}</Typography>\n        {isRequired && (\n          <>\n            {\" \"}\n            <Typography component=\"span\" color=\"textSecondary\">\n              ({t(\"fieldlabel.required.text\")})\n            </Typography>\n          </>\n        )}\n      </>\n    );\n  }, [isRequired, labelProp, t]);\n\n  const onChange = useCallback<NonNullable<MuiCheckboxProps[\"onChange\"]>>(\n    (event, checked) => {\n      onChangeProp?.(event, checked);\n    },\n    [onChangeProp],\n  );\n\n  const onClick = useCallback<NonNullable<MuiCheckboxProps[\"onClick\"]>>(\n    (event) => {\n      if (isReadOnly) {\n        event.stopPropagation();\n        event.preventDefault();\n      }\n    },\n    [isReadOnly],\n  );\n\n  const onBlur = useCallback<NonNullable<MuiFormControlLabelProps[\"onBlur\"]>>(\n    (event) => {\n      onBlurProp?.(event);\n    },\n    [onBlurProp],\n  );\n\n  const checkboxStyles = useMemo(\n    () => ({\n      alignItems: \"flex-start\",\n\n      ...(isReadOnly && {\n        cursor: \"default\",\n        \"& .MuiTypography-root\": {\n          cursor: \"default\",\n        },\n      }),\n\n      ...(hint && {\n        // needed to override specific :not(:last-child) selector\n        \":not(:last-child)\": {\n          marginBlockEnd: 0,\n        },\n      }),\n    }),\n    [hint, isReadOnly],\n  );\n\n  return (\n    <>\n      <FormControlLabel\n        sx={checkboxStyles}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        className={\n          validity === \"invalid\"\n            ? \"Mui-error\"\n            : validity === \"valid\"\n              ? \"Mui-valid\"\n              : \"\"\n        }\n        control={\n          <MuiCheckbox\n            {...inputValues}\n            indeterminate={isIndeterminate}\n            onChange={onChange}\n            onClick={\n              onClick as unknown as React.MouseEventHandler<HTMLButtonElement>\n            }\n            required={isRequired}\n            inputProps={{\n              \"aria-describedby\": hintId,\n              \"aria-readonly\": isReadOnly,\n              \"data-se\": testId,\n              readOnly: isReadOnly,\n            }}\n            disabled={isDisabled}\n            inputRef={localInputRef}\n            sx={{\n              marginBlockStart: \"2px\",\n            }}\n          />\n        }\n        disabled={isDisabled}\n        id={idOverride}\n        label={label}\n        name={nameOverride ?? idOverride}\n        value={value}\n        required={isRequired}\n        onBlur={onBlur}\n        translate={translate}\n      />\n      {hint && (\n        <HintContainerWithInlineStartSpacing\n          odysseyDesignTokens={odysseyDesignTokens}\n        >\n          <FormHelperText id={hintId} translate={translate}>\n            {hint}\n          </FormHelperText>\n        </HintContainerWithInlineStartSpacing>\n      )}\n    </>\n  );\n};\n\nconst MemoizedCheckbox = memo(Checkbox);\nMemoizedCheckbox.displayName = \"Checkbox\";\n\nexport { MemoizedCheckbox as Checkbox };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Checkbox.js","names":["styled","memo","useCallback","useImperativeHandle","useMemo","useRef","useTranslation","ComponentControlledState","getControlState","useOdysseyDesignTokens","Typography","useUniqueId","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","checkboxValidityValues","HintContainerWithInlineStartSpacing","div","odysseyDesignTokens","paddingInlineStart","TypographyLineHeightUi","Spacing2","marginBlockEnd","color","TypographyColorSubordinate","Checkbox","ariaLabel","ariaLabelledBy","id","idOverride","inputRef","isChecked","isDefaultChecked","isDisabled","isIndeterminate","isReadOnly","isRequired","label","labelProp","hint","name","nameOverride","onChange","onChangeProp","onBlur","onBlurProp","testId","translate","validity","value","t","hintId","undefined","controlledStateRef","controlledValue","uncontrolledValue","inputValues","current","CONTROLLED","checked","defaultChecked","localInputRef","focus","children","component","event","onClick","stopPropagation","preventDefault","checkboxStyles","alignItems","cursor","_FormControlLabel","className","control","_Checkbox","disabled","indeterminate","inputProps","readOnly","required","sx","marginBlockStart","_FormHelperText","MemoizedCheckbox","displayName"],"sources":["../../src/Checkbox.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 styled from \"@emotion/styled\";\nimport {\n  FormControlLabel,\n  FormHelperText,\n  Checkbox as MuiCheckbox,\n  CheckboxProps as MuiCheckboxProps,\n  FormControlLabelProps as MuiFormControlLabelProps,\n} from \"@mui/material\";\nimport { memo, useCallback, useImperativeHandle, useMemo, useRef } from \"react\";\nimport { useTranslation } from \"react-i18next\";\n\nimport type { HtmlProps } from \"./HtmlProps.js\";\n\nimport { FieldComponentProps } from \"./FieldComponentProps.js\";\nimport { CheckedFieldProps } from \"./FormCheckedProps.js\";\nimport {\n  ComponentControlledState,\n  FocusHandle,\n  getControlState,\n} from \"./inputUtils.js\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"./OdysseyDesignTokensContext.js\";\nimport { Typography } from \"./Typography.js\";\nimport { useUniqueId } from \"./useUniqueId.js\";\n\nexport const checkboxValidityValues = [\"valid\", \"invalid\", \"inherit\"] as const;\n\nconst HintContainerWithInlineStartSpacing = styled.div<{\n  odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens }) => ({\n  paddingInlineStart: `calc(${odysseyDesignTokens.TypographyLineHeightUi}em + ${odysseyDesignTokens.Spacing2})`,\n  marginBlockEnd: odysseyDesignTokens.Spacing2,\n\n  // MUI applies the '.Mui-error' class to this hint text when the checkbox is invalid which turns the copy red\n  // We want to keep the hint text gray in the error state\n  \".Mui-error\": {\n    color: odysseyDesignTokens.TypographyColorSubordinate,\n  },\n}));\n\nexport type CheckboxProps = {\n  /**\n   * The ref forwarded to the Checkbox\n   */\n  inputRef?: React.RefObject<FocusHandle>;\n  /**\n   * Determines whether the Checkbox is in an indeterminate state\n   */\n  isIndeterminate?: boolean;\n  /**\n   * Determines whether the Checkbox is required\n   */\n  isRequired?: boolean;\n  /**\n   * The label text for the Checkbox\n   */\n  label?: string;\n  /**\n   * Callback fired when the blur event happens. Provides event value.\n   */\n  onBlur?: MuiFormControlLabelProps[\"onBlur\"];\n  /**\n   * The checkbox validity, if different from its enclosing group. Defaults to \"inherit\".\n   */\n  validity?: (typeof checkboxValidityValues)[number];\n  /**\n   * The value attribute of the Checkbox\n   */\n  value?: string;\n} & Pick<\n  FieldComponentProps,\n  \"hint\" | \"id\" | \"isDisabled\" | \"isReadOnly\" | \"name\"\n> &\n  CheckedFieldProps<MuiCheckboxProps> &\n  Pick<HtmlProps, \"ariaLabel\" | \"ariaLabelledBy\" | \"testId\" | \"translate\">;\n\nconst Checkbox = ({\n  ariaLabel,\n  ariaLabelledBy,\n  id: idOverride,\n  inputRef,\n  isChecked,\n  isDefaultChecked,\n  isDisabled,\n  isIndeterminate,\n  isReadOnly = false,\n  isRequired,\n  label: labelProp,\n  hint,\n  name: nameOverride,\n  onChange: onChangeProp,\n  onBlur: onBlurProp,\n  testId,\n  translate,\n  validity = \"inherit\",\n  value,\n}: CheckboxProps) => {\n  const { t } = useTranslation();\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n  const id = useUniqueId(idOverride);\n  const hintId = hint ? `${id}-hint` : undefined;\n\n  const controlledStateRef = useRef(\n    getControlState({\n      controlledValue: isChecked,\n      uncontrolledValue: isDefaultChecked,\n    }),\n  );\n  const inputValues = useMemo(() => {\n    if (controlledStateRef.current === ComponentControlledState.CONTROLLED) {\n      return { checked: isChecked };\n    }\n    return { defaultChecked: isDefaultChecked };\n  }, [isDefaultChecked, isChecked]);\n\n  const localInputRef = useRef<HTMLInputElement>(null);\n  useImperativeHandle(\n    inputRef,\n    () => ({\n      focus: () => {\n        localInputRef.current?.focus();\n      },\n    }),\n    [],\n  );\n\n  const label = useMemo(() => {\n    return (\n      <>\n        <Typography component=\"span\">{labelProp}</Typography>\n        {isRequired && (\n          <>\n            {\" \"}\n            <Typography color=\"textSecondary\" component=\"span\">\n              ({t(\"fieldlabel.required.text\")})\n            </Typography>\n          </>\n        )}\n      </>\n    );\n  }, [isRequired, labelProp, t]);\n\n  const onChange = useCallback<NonNullable<MuiCheckboxProps[\"onChange\"]>>(\n    (event, checked) => {\n      onChangeProp?.(event, checked);\n    },\n    [onChangeProp],\n  );\n\n  const onClick = useCallback<NonNullable<MuiCheckboxProps[\"onClick\"]>>(\n    (event) => {\n      if (isReadOnly) {\n        event.stopPropagation();\n        event.preventDefault();\n      }\n    },\n    [isReadOnly],\n  );\n\n  const onBlur = useCallback<NonNullable<MuiFormControlLabelProps[\"onBlur\"]>>(\n    (event) => {\n      onBlurProp?.(event);\n    },\n    [onBlurProp],\n  );\n\n  const checkboxStyles = useMemo(\n    () => ({\n      alignItems: \"flex-start\",\n\n      ...(isReadOnly && {\n        cursor: \"default\",\n        \"& .MuiTypography-root\": {\n          cursor: \"default\",\n        },\n      }),\n\n      ...(hint && {\n        // needed to override specific :not(:last-child) selector\n        \":not(:last-child)\": {\n          marginBlockEnd: 0,\n        },\n      }),\n    }),\n    [hint, isReadOnly],\n  );\n\n  return (\n    <>\n      <FormControlLabel\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        className={\n          validity === \"invalid\"\n            ? \"Mui-error\"\n            : validity === \"valid\"\n              ? \"Mui-valid\"\n              : \"\"\n        }\n        control={\n          <MuiCheckbox\n            {...inputValues}\n            disabled={isDisabled}\n            indeterminate={isIndeterminate}\n            inputProps={{\n              \"aria-describedby\": hintId,\n              \"aria-readonly\": isReadOnly,\n              \"data-se\": testId,\n              readOnly: isReadOnly,\n            }}\n            inputRef={localInputRef}\n            onChange={onChange}\n            onClick={\n              onClick as unknown as React.MouseEventHandler<HTMLButtonElement>\n            }\n            required={isRequired}\n            sx={{\n              marginBlockStart: \"2px\",\n            }}\n          />\n        }\n        disabled={isDisabled}\n        id={idOverride}\n        label={label}\n        name={nameOverride ?? idOverride}\n        onBlur={onBlur}\n        required={isRequired}\n        sx={checkboxStyles}\n        translate={translate}\n        value={value}\n      />\n      {hint && (\n        <HintContainerWithInlineStartSpacing\n          odysseyDesignTokens={odysseyDesignTokens}\n        >\n          <FormHelperText id={hintId} translate={translate}>\n            {hint}\n          </FormHelperText>\n        </HintContainerWithInlineStartSpacing>\n      )}\n    </>\n  );\n};\n\nconst MemoizedCheckbox = memo(Checkbox);\nMemoizedCheckbox.displayName = \"Checkbox\";\n\nexport { MemoizedCheckbox as Checkbox };\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/CheckboxGroup.js

@@ -10,7 +10,6 @@ import _FormGroup from "@mui/material/FormGroup";
  *
  * See the License for the specific language governing permissions and limitations under the License.
  */
-
 import React, { memo, useCallback, useMemo } from "react";
 import { Field } from "./Field.js";
 import { jsx as _jsx } from "react/jsx-runtime";

package/dist/esm/CheckboxGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxGroup.js","names":["React","memo","useCallback","useMemo","Field","jsx","_jsx","CheckboxGroup","ariaDescribedBy","children","errorMessage","errorMessageList","hint","HintLinkComponent","id","idOverride","isDisabled","isReadOnly","isRequired","label","testId","translate","memoizedChildren","Children","map","child","isValidElement","cloneElement","props","renderFieldComponent","errorMessageElementId","labelElementId","_FormGroup","fieldType","hasVisibleLabel","isOptional","MemoizedCheckboxGroup","displayName"],"sources":["../../src/CheckboxGroup.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 React, { memo, ReactNode, useCallback, useMemo } from \"react\";\nimport { FormGroup as MuiFormGroup } from \"@mui/material\";\nimport { CheckboxProps } from \"./Checkbox.js\";\nimport { Field } from \"./Field.js\";\nimport {\n  FieldComponentProps,\n  FieldComponentRenderProps,\n} from \"./FieldComponentProps.js\";\nimport type { HtmlProps } from \"./HtmlProps.js\";\n\nexport type CheckboxGroupProps = {\n  /**\n   * A single Checkbox element or an array of Checkbox elements\n   */\n  children: ReactNode;\n  /**\n   * If `true`, the CheckboxGroup is required\n   */\n  isRequired?: boolean;\n  /**\n   * The label text for the CheckboxGroup\n   */\n  label: string;\n} & Pick<\n  FieldComponentProps,\n  | \"errorMessage\"\n  | \"errorMessageList\"\n  | \"hint\"\n  | \"HintLinkComponent\"\n  | \"id\"\n  | \"isDisabled\"\n  | \"isReadOnly\"\n> &\n  Pick<HtmlProps, \"ariaDescribedBy\" | \"testId\" | \"translate\">;\n\ntype CheckboxGroupRenderProps = Pick<\n  FieldComponentRenderProps,\n  \"id\" | \"labelElementId\"\n> &\n  Partial<\n    Pick<FieldComponentRenderProps, \"ariaDescribedBy\" | \"errorMessageElementId\">\n  >;\n\nconst CheckboxGroup = ({\n  ariaDescribedBy,\n  children,\n  errorMessage,\n  errorMessageList,\n  hint,\n  HintLinkComponent,\n  id: idOverride,\n  isDisabled,\n  isReadOnly = false,\n  isRequired = false,\n  label,\n  testId,\n  translate,\n}: CheckboxGroupProps) => {\n  const memoizedChildren = useMemo(\n    () =>\n      React.Children.map(children, (child) => {\n        if (React.isValidElement<CheckboxProps>(child)) {\n          return React.cloneElement(child, {\n            isReadOnly,\n            isDisabled: isDisabled || child.props.isDisabled,\n          });\n        }\n        return child;\n      }),\n    [children, isReadOnly, isDisabled],\n  );\n\n  const renderFieldComponent = useCallback(\n    ({\n      ariaDescribedBy,\n      errorMessageElementId,\n      id,\n      labelElementId,\n    }: CheckboxGroupRenderProps) => (\n      <MuiFormGroup\n        aria-describedby={ariaDescribedBy}\n        aria-errormessage={errorMessageElementId}\n        aria-labelledby={labelElementId}\n        data-se={testId}\n        id={id}\n        translate={translate}\n      >\n        {memoizedChildren}\n      </MuiFormGroup>\n    ),\n    [memoizedChildren, testId, translate],\n  );\n\n  return (\n    <Field\n      ariaDescribedBy={ariaDescribedBy}\n      errorMessage={errorMessage}\n      errorMessageList={errorMessageList}\n      fieldType=\"group\"\n      hasVisibleLabel={true}\n      hint={hint}\n      HintLinkComponent={HintLinkComponent}\n      id={idOverride}\n      isDisabled={isDisabled}\n      isOptional={!isRequired}\n      label={label}\n      renderFieldComponent={renderFieldComponent}\n    />\n  );\n};\n\nconst MemoizedCheckboxGroup = memo(CheckboxGroup);\nMemoizedCheckboxGroup.displayName = \"CheckboxGroup\";\n\nexport { MemoizedCheckboxGroup as CheckboxGroup };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAOA,KAAK,IAAIC,IAAI,EAAaC,WAAW,EAAEC,OAAO,QAAQ,OAAO;AAGpE,SAASC,KAAK,QAAQ,YAAY;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAwCnC,MAAMC,aAAa,GAAGA,CAAC;EACrBC,eAAe;EACfC,QAAQ;EACRC,YAAY;EACZC,gBAAgB;EAChBC,IAAI;EACJC,iBAAiB;EACjBC,EAAE,EAAEC,UAAU;EACdC,UAAU;EACVC,UAAU,GAAG,KAAK;EAClBC,UAAU,GAAG,KAAK;EAClBC,KAAK;EACLC,MAAM;EACNC;AACkB,CAAC,KAAK;EACxB,MAAMC,gBAAgB,GAAGnB,OAAO,CAC9B,MACEH,KAAK,CAACuB,QAAQ,CAACC,GAAG,CAACf,QAAQ,EAAGgB,KAAK,IAAK;IACtC,IAAIzB,KAAK,CAAC0B,cAAc,CAAgBD,KAAK,CAAC,EAAE;MAC9C,OAAOzB,KAAK,CAAC2B,YAAY,CAACF,KAAK,EAAE;QAC/BR,UAAU;QACVD,UAAU,EAAEA,UAAU,IAAIS,KAAK,CAACG,KAAK,CAACZ;MACxC,CAAC,CAAC;IACJ;IACA,OAAOS,KAAK;EACd,CAAC,CAAC,EACJ,CAAChB,QAAQ,EAAEQ,UAAU,EAAED,UAAU,CACnC,CAAC;EAED,MAAMa,oBAAoB,GAAG3B,WAAW,CACtC,CAAC;IACCM,eAAe;IACfsB,qBAAqB;IACrBhB,EAAE;IACFiB;EACwB,CAAC,KACzBzB,IAAA,CAAA0B,UAAA;IACE,oBAAkBxB,eAAgB;IAClC,qBAAmBsB,qBAAsB;IACzC,mBAAiBC,cAAe;IAChC,WAASX,MAAO;IAChBN,EAAE,EAAEA,EAAG;IACPO,SAAS,EAAEA,SAAU;IAAAZ,QAAA,EAEpBa;EAAgB,CACL,CACf,EACD,CAACA,gBAAgB,EAAEF,MAAM,EAAEC,SAAS,CACtC,CAAC;EAED,OACEf,IAAA,CAACF,KAAK;IACJI,eAAe,EAAEA,eAAgB;IACjCE,YAAY,EAAEA,YAAa;IAC3BC,gBAAgB,EAAEA,gBAAiB;IACnCsB,SAAS,EAAC,OAAO;IACjBC,eAAe,EAAE,IAAK;IACtBtB,IAAI,EAAEA,IAAK;IACXC,iBAAiB,EAAEA,iBAAkB;IACrCC,EAAE,EAAEC,UAAW;IACfC,UAAU,EAAEA,UAAW;IACvBmB,UAAU,EAAE,CAACjB,UAAW;IACxBC,KAAK,EAAEA,KAAM;IACbU,oBAAoB,EAAEA;EAAqB,CAC5C,CAAC;AAEN,CAAC;AAED,MAAMO,qBAAqB,GAAGnC,IAAI,CAACM,aAAa,CAAC;AACjD6B,qBAAqB,CAACC,WAAW,GAAG,eAAe;AAEnD,SAASD,qBAAqB,IAAI7B,aAAa","ignoreList":[]}
+{"version":3,"file":"CheckboxGroup.js","names":["React","memo","useCallback","useMemo","Field","jsx","_jsx","CheckboxGroup","ariaDescribedBy","children","errorMessage","errorMessageList","hint","HintLinkComponent","id","idOverride","isDisabled","isReadOnly","isRequired","label","testId","translate","memoizedChildren","Children","map","child","isValidElement","cloneElement","props","renderFieldComponent","errorMessageElementId","labelElementId","_FormGroup","fieldType","hasVisibleLabel","isOptional","MemoizedCheckboxGroup","displayName"],"sources":["../../src/CheckboxGroup.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 { FormGroup as MuiFormGroup } from \"@mui/material\";\nimport React, { memo, ReactNode, useCallback, useMemo } from \"react\";\n\nimport type { HtmlProps } from \"./HtmlProps.js\";\n\nimport { CheckboxProps } from \"./Checkbox.js\";\nimport { Field } from \"./Field.js\";\nimport {\n  FieldComponentProps,\n  FieldComponentRenderProps,\n} from \"./FieldComponentProps.js\";\n\nexport type CheckboxGroupProps = {\n  /**\n   * A single Checkbox element or an array of Checkbox elements\n   */\n  children: ReactNode;\n  /**\n   * If `true`, the CheckboxGroup is required\n   */\n  isRequired?: boolean;\n  /**\n   * The label text for the CheckboxGroup\n   */\n  label: string;\n} & Pick<\n  FieldComponentProps,\n  | \"errorMessage\"\n  | \"errorMessageList\"\n  | \"hint\"\n  | \"HintLinkComponent\"\n  | \"id\"\n  | \"isDisabled\"\n  | \"isReadOnly\"\n> &\n  Pick<HtmlProps, \"ariaDescribedBy\" | \"testId\" | \"translate\">;\n\ntype CheckboxGroupRenderProps = Pick<\n  FieldComponentRenderProps,\n  \"id\" | \"labelElementId\"\n> &\n  Partial<\n    Pick<FieldComponentRenderProps, \"ariaDescribedBy\" | \"errorMessageElementId\">\n  >;\n\nconst CheckboxGroup = ({\n  ariaDescribedBy,\n  children,\n  errorMessage,\n  errorMessageList,\n  hint,\n  HintLinkComponent,\n  id: idOverride,\n  isDisabled,\n  isReadOnly = false,\n  isRequired = false,\n  label,\n  testId,\n  translate,\n}: CheckboxGroupProps) => {\n  const memoizedChildren = useMemo(\n    () =>\n      React.Children.map(children, (child) => {\n        if (React.isValidElement<CheckboxProps>(child)) {\n          return React.cloneElement(child, {\n            isReadOnly,\n            isDisabled: isDisabled || child.props.isDisabled,\n          });\n        }\n        return child;\n      }),\n    [children, isReadOnly, isDisabled],\n  );\n\n  const renderFieldComponent = useCallback(\n    ({\n      ariaDescribedBy,\n      errorMessageElementId,\n      id,\n      labelElementId,\n    }: CheckboxGroupRenderProps) => (\n      <MuiFormGroup\n        aria-describedby={ariaDescribedBy}\n        aria-errormessage={errorMessageElementId}\n        aria-labelledby={labelElementId}\n        data-se={testId}\n        id={id}\n        translate={translate}\n      >\n        {memoizedChildren}\n      </MuiFormGroup>\n    ),\n    [memoizedChildren, testId, translate],\n  );\n\n  return (\n    <Field\n      ariaDescribedBy={ariaDescribedBy}\n      errorMessage={errorMessage}\n      errorMessageList={errorMessageList}\n      fieldType=\"group\"\n      hasVisibleLabel={true}\n      hint={hint}\n      HintLinkComponent={HintLinkComponent}\n      id={idOverride}\n      isDisabled={isDisabled}\n      isOptional={!isRequired}\n      label={label}\n      renderFieldComponent={renderFieldComponent}\n    />\n  );\n};\n\nconst MemoizedCheckboxGroup = memo(CheckboxGroup);\nMemoizedCheckboxGroup.displayName = \"CheckboxGroup\";\n\nexport { MemoizedCheckboxGroup as CheckboxGroup };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA,OAAOA,KAAK,IAAIC,IAAI,EAAaC,WAAW,EAAEC,OAAO,QAAQ,OAAO;AAKpE,SAASC,KAAK,QAAQ,YAAY;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAuCnC,MAAMC,aAAa,GAAGA,CAAC;EACrBC,eAAe;EACfC,QAAQ;EACRC,YAAY;EACZC,gBAAgB;EAChBC,IAAI;EACJC,iBAAiB;EACjBC,EAAE,EAAEC,UAAU;EACdC,UAAU;EACVC,UAAU,GAAG,KAAK;EAClBC,UAAU,GAAG,KAAK;EAClBC,KAAK;EACLC,MAAM;EACNC;AACkB,CAAC,KAAK;EACxB,MAAMC,gBAAgB,GAAGnB,OAAO,CAC9B,MACEH,KAAK,CAACuB,QAAQ,CAACC,GAAG,CAACf,QAAQ,EAAGgB,KAAK,IAAK;IACtC,IAAIzB,KAAK,CAAC0B,cAAc,CAAgBD,KAAK,CAAC,EAAE;MAC9C,OAAOzB,KAAK,CAAC2B,YAAY,CAACF,KAAK,EAAE;QAC/BR,UAAU;QACVD,UAAU,EAAEA,UAAU,IAAIS,KAAK,CAACG,KAAK,CAACZ;MACxC,CAAC,CAAC;IACJ;IACA,OAAOS,KAAK;EACd,CAAC,CAAC,EACJ,CAAChB,QAAQ,EAAEQ,UAAU,EAAED,UAAU,CACnC,CAAC;EAED,MAAMa,oBAAoB,GAAG3B,WAAW,CACtC,CAAC;IACCM,eAAe;IACfsB,qBAAqB;IACrBhB,EAAE;IACFiB;EACwB,CAAC,KACzBzB,IAAA,CAAA0B,UAAA;IACE,oBAAkBxB,eAAgB;IAClC,qBAAmBsB,qBAAsB;IACzC,mBAAiBC,cAAe;IAChC,WAASX,MAAO;IAChBN,EAAE,EAAEA,EAAG;IACPO,SAAS,EAAEA,SAAU;IAAAZ,QAAA,EAEpBa;EAAgB,CACL,CACf,EACD,CAACA,gBAAgB,EAAEF,MAAM,EAAEC,SAAS,CACtC,CAAC;EAED,OACEf,IAAA,CAACF,KAAK;IACJI,eAAe,EAAEA,eAAgB;IACjCE,YAAY,EAAEA,YAAa;IAC3BC,gBAAgB,EAAEA,gBAAiB;IACnCsB,SAAS,EAAC,OAAO;IACjBC,eAAe,EAAE,IAAK;IACtBtB,IAAI,EAAEA,IAAK;IACXC,iBAAiB,EAAEA,iBAAkB;IACrCC,EAAE,EAAEC,UAAW;IACfC,UAAU,EAAEA,UAAW;IACvBmB,UAAU,EAAE,CAACjB,UAAW;IACxBC,KAAK,EAAEA,KAAM;IACbU,oBAAoB,EAAEA;EAAqB,CAC5C,CAAC;AAEN,CAAC;AAED,MAAMO,qBAAqB,GAAGnC,IAAI,CAACM,aAAa,CAAC;AACjD6B,qBAAqB,CAACC,WAAW,GAAG,eAAe;AAEnD,SAASD,qBAAqB,IAAI7B,aAAa","ignoreList":[]}

package/dist/esm/CircularProgress.js

@@ -10,7 +10,6 @@ import _CircularProgress from "@mui/material/CircularProgress";
  *
  * See the License for the specific language governing permissions and limitations under the License.
  */
-
 import { memo } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
 const CircularProgress = ({
@@ -18,10 +17,10 @@ const CircularProgress = ({
   testId,
   value
 }) => _jsx(_CircularProgress, {
+  "aria-label": ariaLabel,
   "data-se": testId,
   value: value,
-  variant: value ? "determinate" : "indeterminate",
-  "aria-label": ariaLabel
+  variant: value ? "determinate" : "indeterminate"
 });
 const MemoizedCircularProgress = memo(CircularProgress);
 MemoizedCircularProgress.displayName = "CircularProgress";

package/dist/esm/CircularProgress.js.map

@@ -1 +1 @@
-{"version":3,"file":"CircularProgress.js","names":["memo","jsx","_jsx","CircularProgress","ariaLabel","testId","value","_CircularProgress","variant","MemoizedCircularProgress","displayName"],"sources":["../../src/CircularProgress.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 } from \"react\";\nimport { CircularProgress as MuiCircularProgress } from \"@mui/material\";\n\nimport type { HtmlProps } from \"./HtmlProps.js\";\n\nexport type CircularProgressProps = {\n  /**\n   * The percentage filled the spinner should be, as an integer.\n   * If undefined, the spinner will spin perpetually.\n   */\n  value?: number;\n} & Pick<HtmlProps, \"ariaLabel\" | \"testId\">;\n\nconst CircularProgress = ({\n  ariaLabel,\n  testId,\n  value,\n}: CircularProgressProps) => (\n  <MuiCircularProgress\n    data-se={testId}\n    value={value}\n    variant={value ? \"determinate\" : \"indeterminate\"}\n    aria-label={ariaLabel}\n  />\n);\n\nconst MemoizedCircularProgress = memo(CircularProgress);\nMemoizedCircularProgress.displayName = \"CircularProgress\";\n\nexport { MemoizedCircularProgress as CircularProgress };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,QAAQ,OAAO;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAa7B,MAAMC,gBAAgB,GAAGA,CAAC;EACxBC,SAAS;EACTC,MAAM;EACNC;AACqB,CAAC,KACtBJ,IAAA,CAAAK,iBAAA;EACE,WAASF,MAAO;EAChBC,KAAK,EAAEA,KAAM;EACbE,OAAO,EAAEF,KAAK,GAAG,aAAa,GAAG,eAAgB;EACjD,cAAYF;AAAU,CACvB,CACF;AAED,MAAMK,wBAAwB,GAAGT,IAAI,CAACG,gBAAgB,CAAC;AACvDM,wBAAwB,CAACC,WAAW,GAAG,kBAAkB;AAEzD,SAASD,wBAAwB,IAAIN,gBAAgB","ignoreList":[]}
+{"version":3,"file":"CircularProgress.js","names":["memo","jsx","_jsx","CircularProgress","ariaLabel","testId","value","_CircularProgress","variant","MemoizedCircularProgress","displayName"],"sources":["../../src/CircularProgress.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 { CircularProgress as MuiCircularProgress } from \"@mui/material\";\nimport { memo } from \"react\";\n\nimport type { HtmlProps } from \"./HtmlProps.js\";\n\nexport type CircularProgressProps = {\n  /**\n   * The percentage filled the spinner should be, as an integer.\n   * If undefined, the spinner will spin perpetually.\n   */\n  value?: number;\n} & Pick<HtmlProps, \"ariaLabel\" | \"testId\">;\n\nconst CircularProgress = ({\n  ariaLabel,\n  testId,\n  value,\n}: CircularProgressProps) => (\n  <MuiCircularProgress\n    aria-label={ariaLabel}\n    data-se={testId}\n    value={value}\n    variant={value ? \"determinate\" : \"indeterminate\"}\n  />\n);\n\nconst MemoizedCircularProgress = memo(CircularProgress);\nMemoizedCircularProgress.displayName = \"CircularProgress\";\n\nexport { MemoizedCircularProgress as CircularProgress };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA,SAASA,IAAI,QAAQ,OAAO;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAY7B,MAAMC,gBAAgB,GAAGA,CAAC;EACxBC,SAAS;EACTC,MAAM;EACNC;AACqB,CAAC,KACtBJ,IAAA,CAAAK,iBAAA;EACE,cAAYH,SAAU;EACtB,WAASC,MAAO;EAChBC,KAAK,EAAEA,KAAM;EACbE,OAAO,EAAEF,KAAK,GAAG,aAAa,GAAG;AAAgB,CAClD,CACF;AAED,MAAMG,wBAAwB,GAAGT,IAAI,CAACG,gBAAgB,CAAC;AACvDM,wBAAwB,CAACC,WAAW,GAAG,kBAAkB;AAEzD,SAASD,wBAAwB,IAAIN,gBAAgB","ignoreList":[]}

package/dist/esm/DataTable/DataTable.js

@@ -10,23 +10,23 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import styled from "@emotion/styled";
 import { MRT_TableContainer, useMaterialReactTable } from "material-react-table";
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
+import { Box } from "../Box.js";
+import { Button, MenuButton } from "../Buttons/index.js";
+import { Callout } from "../Callout.js";
+import { EmptyState } from "../EmptyState.js";
 import { ArrowDownIcon, ArrowUnsortedIcon, ChevronDownIcon, DragIndicatorIcon, MoreIcon } from "../icons.generated/index.js";
-import { densityValues } from "./constants.js";
-import { Pagination, usePagination } from "../Pagination/index.js";
 import { DataFilters } from "../labs/DataFilters.js";
+import { useOdysseyDesignTokens } from "../OdysseyDesignTokensContext.js";
+import { Pagination, usePagination } from "../Pagination/index.js";
+import { densityValues } from "./constants.js";
 import { DataTableRowActions } from "./DataTableRowActions.js";
-import { useRowReordering } from "./useRowReordering.js";
 import { DataTableSettings } from "./DataTableSettings.js";
-import { Box } from "../Box.js";
-import { useOdysseyDesignTokens } from "../OdysseyDesignTokensContext.js";
+import { useRowReordering } from "./useRowReordering.js";
 import { useScrollIndication } from "./useScrollIndication.js";
-import styled from "@emotion/styled";
-import { EmptyState } from "../EmptyState.js";
-import { Button, MenuButton } from "../Buttons/index.js";
-import { Callout } from "../Callout.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const ScrollableTableContainer = styled("div", {
   shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "isScrollableStart" && prop !== "isScrollableEnd"
@@ -170,9 +170,9 @@ const DataTable = ({
     const currentIndex = row.index + (pagination.pageIndex - 1) * pagination.pageSize;
     return _jsx(DataTableRowActions, {
       row: row,
-      rowIndex: currentIndex,
       rowActionButtons: rowActionButtons,
       rowActionMenuItems: rowActionMenuItems,
+      rowIndex: currentIndex,
       totalRows: totalRows,
       updateRowOrder: hasRowReordering && onReorderRows ? updateRowOrder : undefined
     });
@@ -228,8 +228,8 @@ const DataTable = ({
   }, []);
   const emptyState = useCallback(() => {
     const noResultsInnerContent = noResultsPlaceholder || _jsx(EmptyState, {
-      heading: t("table.noresults.heading"),
-      description: t("table.noresults.text")
+      description: t("table.noresults.text"),
+      heading: t("table.noresults.heading")
     });
     const emptyStateInnerContent = emptyPlaceholder && isEmpty ? emptyPlaceholder : noResultsInnerContent;
     return _jsx(Box, {
@@ -366,11 +366,11 @@ const DataTable = ({
               id: null
             }), (hasRowReordering && onReorderRows || rowActionMenuItems) && _jsx(Box, {
               children: _jsx(Button, {
+                ariaLabel: t("table.moreactions.arialabel"),
                 endIcon: _jsx(MoreIcon, {}),
+                isDisabled: true,
                 size: "small",
-                variant: "floating",
-                ariaLabel: t("table.moreactions.arialabel"),
-                isDisabled: true
+                variant: "floating"
               })
             })]
           })
@@ -455,10 +455,10 @@ const DataTable = ({
   });
   const bulkActionMenuButton = useMemo(() => _jsx(_Fragment, {
     children: _jsx(MenuButton, {
+      ariaLabel: "More actions",
       buttonVariant: "secondary",
       endIcon: _jsx(MoreIcon, {}),
       isDisabled: Object.keys(rowSelection).length === 0,
-      ariaLabel: "More actions",
       children: bulkActionMenuItems?.(rowSelection)
     })
   }), [bulkActionMenuItems, rowSelection]);
@@ -511,30 +511,30 @@ const DataTable = ({
         marginBottom: 5
       },
       children: _jsx(DataFilters, {
-        onChangeSearch: hasSearch ? setSearch : undefined,
-        onChangeFilters: hasFilters ? setFilters : undefined,
-        hasSearchSubmitButton: hasSearchSubmitButton,
-        searchDelayTime: searchDelayTime,
-        filters: hasFilters ? dataTableFilters : undefined,
-        defaultSearchTerm: initialSearchValue,
-        isDisabled: isEmpty,
         additionalActions: _jsxs(_Fragment, {
           children: [_jsx(DataTableSettings, {
-            hasChangeableDensity: hasChangeableDensity,
-            rowDensity: rowDensity,
-            setRowDensity: setRowDensity,
-            hasColumnVisibility: hasColumnVisibility,
             columns: columns,
             columnVisibility: columnVisibility,
-            setColumnVisibility: setColumnVisibility
+            hasChangeableDensity: hasChangeableDensity,
+            hasColumnVisibility: hasColumnVisibility,
+            rowDensity: rowDensity,
+            setColumnVisibility: setColumnVisibility,
+            setRowDensity: setRowDensity
           }), bulkActionMenuItems && bulkActionMenuButton, additionalActionButton, additionalActionMenuItems && _jsx(MenuButton, {
-            endIcon: _jsx(MoreIcon, {}),
             ariaLabel: t("table.moreactions.arialabel"),
             buttonVariant: "secondary",
+            endIcon: _jsx(MoreIcon, {}),
             menuAlignment: "right",
             children: additionalActionMenuItems
           })]
-        })
+        }),
+        defaultSearchTerm: initialSearchValue,
+        filters: hasFilters ? dataTableFilters : undefined,
+        hasSearchSubmitButton: hasSearchSubmitButton,
+        isDisabled: isEmpty,
+        onChangeFilters: hasFilters ? setFilters : undefined,
+        onChangeSearch: hasSearch ? setSearch : undefined,
+        searchDelayTime: searchDelayTime
       })
     }), errorMessage && _jsx(Box, {
       sx: {
@@ -545,30 +545,30 @@ const DataTable = ({
         text: errorMessage
       })
     }), _jsx(ScrollableTableContainer, {
-      odysseyDesignTokens: odysseyDesignTokens,
-      isScrollableStart: !isTableContainerScrolledToStart,
       isScrollableEnd: !isTableContainerScrolledToEnd,
+      isScrollableStart: !isTableContainerScrolledToStart,
+      odysseyDesignTokens: odysseyDesignTokens,
       ref: tableOuterContainerRef,
       children: _jsx(MRT_TableContainer, {
         table: dataTable
       })
     }), hasPagination && _jsx(Pagination, {
-      pageIndex: pagination.pageIndex,
-      pageSize: pagination.pageSize,
-      maxPageIndex: maxPages,
-      maxPageSize: maxResultsPerPage,
-      onPaginationChange: setPagination,
-      lastRow: lastRow,
-      totalRows: totalRows,
+      currentPageLabel: t("pagination.page"),
       currentRowsCount: data.length,
       isDisabled: isEmpty,
       isMoreDisabled: isPaginationMoreDisabled,
-      variant: paginationType,
-      rowsPerPageLabel: t("pagination.rowsperpage"),
-      currentPageLabel: t("pagination.page"),
-      previousLabel: t("pagination.previous"),
+      lastRow: lastRow,
+      loadMoreLabel: t("pagination.loadmore"),
+      maxPageIndex: maxPages,
+      maxPageSize: maxResultsPerPage,
       nextLabel: t("pagination.next"),
-      loadMoreLabel: t("pagination.loadmore")
+      onPaginationChange: setPagination,
+      pageIndex: pagination.pageIndex,
+      pageSize: pagination.pageSize,
+      previousLabel: t("pagination.previous"),
+      rowsPerPageLabel: t("pagination.rowsperpage"),
+      totalRows: totalRows,
+      variant: paginationType
     })]
   });
 };