@okta/odyssey-react-mui 1.27.1 → 1.29.0

package/dist/labs/DataTablePagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTablePagination.js","names":["memo","Box","Button","Support","ArrowLeftIcon","ArrowRightIcon","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","paginationTypeValues","DataTablePagination","currentPage","currentNumberOfResults","isNextButtonDisabled","isPreviousButtonDisabled","onClickNext","onClickPrevious","paginationType","sx","display","gap","alignItems","children","label","variant","onClick","isDisabled","color","startIcon","component","endIcon","MemoizedDataTablePagination","displayName"],"sources":["../../src/labs/DataTablePagination.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 { Box } from \"../Box\";\nimport { Button } from \"../Button\";\nimport { Support } from \"../Typography\";\nimport { ArrowLeftIcon, ArrowRightIcon } from \"../icons.generated\";\n\nexport const paginationTypeValues = [\"paged\", \"loadMore\"] as const;\n\nexport type DataTablePaginationProps = {\n  currentPage?: number;\n  currentNumberOfResults?: number;\n  isNextButtonDisabled?: boolean;\n  isPreviousButtonDisabled?: boolean;\n  onClickNext: () => void;\n  onClickPrevious?: () => void;\n  paginationType?: (typeof paginationTypeValues)[number];\n};\n\nconst DataTablePagination = ({\n  currentPage,\n  currentNumberOfResults,\n  isNextButtonDisabled,\n  isPreviousButtonDisabled,\n  onClickNext,\n  onClickPrevious,\n  paginationType,\n}: DataTablePaginationProps) => {\n  return (\n    <Box sx={{ display: \"flex\", gap: 4, alignItems: \"center\" }}>\n      {paginationType === \"loadMore\" ? (\n        <>\n          <Button\n            label=\"Show more\"\n            variant=\"secondary\"\n            onClick={onClickNext}\n            isDisabled={isNextButtonDisabled}\n          />\n          {currentNumberOfResults && (\n            <Support color=\"textSecondary\">\n              {currentNumberOfResults} results\n            </Support>\n          )}\n        </>\n      ) : (\n        <>\n          <Button\n            label=\"Previous\"\n            startIcon={<ArrowLeftIcon />}\n            variant=\"secondary\"\n            onClick={onClickPrevious}\n            isDisabled={isPreviousButtonDisabled}\n          />\n          {currentPage && (\n            <Box>\n              <Support color=\"textSecondary\" component=\"span\">\n                Page {currentPage}\n              </Support>\n            </Box>\n          )}\n          <Button\n            label=\"Next\"\n            endIcon={<ArrowRightIcon />}\n            variant=\"secondary\"\n            onClick={onClickNext}\n            isDisabled={isNextButtonDisabled}\n          />\n        </>\n      )}\n    </Box>\n  );\n};\n\nconst MemoizedDataTablePagination = memo(DataTablePagination);\nMemoizedDataTablePagination.displayName = \"DataTablePagination\";\n\nexport { MemoizedDataTablePagination as DataTablePagination };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,QAAQ,OAAO;AAAC,SACpBC,GAAG;AAAA,SACHC,MAAM;AAAA,SACNC,OAAO;AAAA,SACPC,aAAa,EAAEC,cAAc;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAAA,SAAAC,QAAA,IAAAC,SAAA;AAEtC,OAAO,MAAMC,oBAAoB,GAAG,CAAC,OAAO,EAAE,UAAU,CAAU;AAYlE,MAAMC,mBAAmB,GAAGA,CAAC;EAC3BC,WAAW;EACXC,sBAAsB;EACtBC,oBAAoB;EACpBC,wBAAwB;EACxBC,WAAW;EACXC,eAAe;EACfC;AACwB,CAAC,KAAK;EAC9B,OACEb,IAAA,CAACN,GAAG;IAACoB,EAAE,EAAE;MAAEC,OAAO,EAAE,MAAM;MAAEC,GAAG,EAAE,CAAC;MAAEC,UAAU,EAAE;IAAS,CAAE;IAAAC,QAAA,EACxDL,cAAc,KAAK,UAAU,GAC5BX,KAAA,CAAAE,SAAA;MAAAc,QAAA,GACElB,IAAA,CAACL,MAAM;QACLwB,KAAK,EAAC,WAAW;QACjBC,OAAO,EAAC,WAAW;QACnBC,OAAO,EAAEV,WAAY;QACrBW,UAAU,EAAEb;MAAqB,CAClC,CAAC,EACDD,sBAAsB,IACrBN,KAAA,CAACN,OAAO;QAAC2B,KAAK,EAAC,eAAe;QAAAL,QAAA,GAC3BV,sBAAsB,EAAC,UAC1B;MAAA,CAAS,CACV;IAAA,CACD,CAAC,GAEHN,KAAA,CAAAE,SAAA;MAAAc,QAAA,GACElB,IAAA,CAACL,MAAM;QACLwB,KAAK,EAAC,UAAU;QAChBK,SAAS,EAAExB,IAAA,CAACH,aAAa,IAAE,CAAE;QAC7BuB,OAAO,EAAC,WAAW;QACnBC,OAAO,EAAET,eAAgB;QACzBU,UAAU,EAAEZ;MAAyB,CACtC,CAAC,EACDH,WAAW,IACVP,IAAA,CAACN,GAAG;QAAAwB,QAAA,EACFhB,KAAA,CAACN,OAAO;UAAC2B,KAAK,EAAC,eAAe;UAACE,SAAS,EAAC,MAAM;UAAAP,QAAA,GAAC,OACzC,EAACX,WAAW;QAAA,CACV;MAAC,CACP,CACN,EACDP,IAAA,CAACL,MAAM;QACLwB,KAAK,EAAC,MAAM;QACZO,OAAO,EAAE1B,IAAA,CAACF,cAAc,IAAE,CAAE;QAC5BsB,OAAO,EAAC,WAAW;QACnBC,OAAO,EAAEV,WAAY;QACrBW,UAAU,EAAEb;MAAqB,CAClC,CAAC;IAAA,CACF;EACH,CACE,CAAC;AAEV,CAAC;AAED,MAAMkB,2BAA2B,GAAGlC,IAAI,CAACa,mBAAmB,CAAC;AAC7DqB,2BAA2B,CAACC,WAAW,GAAG,qBAAqB;AAE/D,SAASD,2BAA2B,IAAIrB,mBAAmB"}
+{"version":3,"file":"DataTablePagination.js","names":["memo","Box","Button","Support","ArrowLeftIcon","ArrowRightIcon","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","paginationTypeValues","DataTablePagination","currentPage","currentNumberOfResults","isNextButtonDisabled","isPreviousButtonDisabled","onClickNext","onClickPrevious","paginationType","sx","display","gap","alignItems","children","label","variant","onClick","isDisabled","color","startIcon","component","endIcon","MemoizedDataTablePagination","displayName"],"sources":["../../src/labs/DataTablePagination.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 { Box } from \"../Box\";\nimport { Button } from \"../Buttons\";\nimport { Support } from \"../Typography\";\nimport { ArrowLeftIcon, ArrowRightIcon } from \"../icons.generated\";\n\nexport const paginationTypeValues = [\"paged\", \"loadMore\"] as const;\n\nexport type DataTablePaginationProps = {\n  currentPage?: number;\n  currentNumberOfResults?: number;\n  isNextButtonDisabled?: boolean;\n  isPreviousButtonDisabled?: boolean;\n  onClickNext: () => void;\n  onClickPrevious?: () => void;\n  paginationType?: (typeof paginationTypeValues)[number];\n};\n\nconst DataTablePagination = ({\n  currentPage,\n  currentNumberOfResults,\n  isNextButtonDisabled,\n  isPreviousButtonDisabled,\n  onClickNext,\n  onClickPrevious,\n  paginationType,\n}: DataTablePaginationProps) => {\n  return (\n    <Box sx={{ display: \"flex\", gap: 4, alignItems: \"center\" }}>\n      {paginationType === \"loadMore\" ? (\n        <>\n          <Button\n            label=\"Show more\"\n            variant=\"secondary\"\n            onClick={onClickNext}\n            isDisabled={isNextButtonDisabled}\n          />\n          {currentNumberOfResults && (\n            <Support color=\"textSecondary\">\n              {currentNumberOfResults} results\n            </Support>\n          )}\n        </>\n      ) : (\n        <>\n          <Button\n            label=\"Previous\"\n            startIcon={<ArrowLeftIcon />}\n            variant=\"secondary\"\n            onClick={onClickPrevious}\n            isDisabled={isPreviousButtonDisabled}\n          />\n          {currentPage && (\n            <Box>\n              <Support color=\"textSecondary\" component=\"span\">\n                Page {currentPage}\n              </Support>\n            </Box>\n          )}\n          <Button\n            label=\"Next\"\n            endIcon={<ArrowRightIcon />}\n            variant=\"secondary\"\n            onClick={onClickNext}\n            isDisabled={isNextButtonDisabled}\n          />\n        </>\n      )}\n    </Box>\n  );\n};\n\nconst MemoizedDataTablePagination = memo(DataTablePagination);\nMemoizedDataTablePagination.displayName = \"DataTablePagination\";\n\nexport { MemoizedDataTablePagination as DataTablePagination };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,QAAQ,OAAO;AAAC,SACpBC,GAAG;AAAA,SACHC,MAAM;AAAA,SACNC,OAAO;AAAA,SACPC,aAAa,EAAEC,cAAc;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAAA,SAAAC,QAAA,IAAAC,SAAA;AAEtC,OAAO,MAAMC,oBAAoB,GAAG,CAAC,OAAO,EAAE,UAAU,CAAU;AAYlE,MAAMC,mBAAmB,GAAGA,CAAC;EAC3BC,WAAW;EACXC,sBAAsB;EACtBC,oBAAoB;EACpBC,wBAAwB;EACxBC,WAAW;EACXC,eAAe;EACfC;AACwB,CAAC,KAAK;EAC9B,OACEb,IAAA,CAACN,GAAG;IAACoB,EAAE,EAAE;MAAEC,OAAO,EAAE,MAAM;MAAEC,GAAG,EAAE,CAAC;MAAEC,UAAU,EAAE;IAAS,CAAE;IAAAC,QAAA,EACxDL,cAAc,KAAK,UAAU,GAC5BX,KAAA,CAAAE,SAAA;MAAAc,QAAA,GACElB,IAAA,CAACL,MAAM;QACLwB,KAAK,EAAC,WAAW;QACjBC,OAAO,EAAC,WAAW;QACnBC,OAAO,EAAEV,WAAY;QACrBW,UAAU,EAAEb;MAAqB,CAClC,CAAC,EACDD,sBAAsB,IACrBN,KAAA,CAACN,OAAO;QAAC2B,KAAK,EAAC,eAAe;QAAAL,QAAA,GAC3BV,sBAAsB,EAAC,UAC1B;MAAA,CAAS,CACV;IAAA,CACD,CAAC,GAEHN,KAAA,CAAAE,SAAA;MAAAc,QAAA,GACElB,IAAA,CAACL,MAAM;QACLwB,KAAK,EAAC,UAAU;QAChBK,SAAS,EAAExB,IAAA,CAACH,aAAa,IAAE,CAAE;QAC7BuB,OAAO,EAAC,WAAW;QACnBC,OAAO,EAAET,eAAgB;QACzBU,UAAU,EAAEZ;MAAyB,CACtC,CAAC,EACDH,WAAW,IACVP,IAAA,CAACN,GAAG;QAAAwB,QAAA,EACFhB,KAAA,CAACN,OAAO;UAAC2B,KAAK,EAAC,eAAe;UAACE,SAAS,EAAC,MAAM;UAAAP,QAAA,GAAC,OACzC,EAACX,WAAW;QAAA,CACV;MAAC,CACP,CACN,EACDP,IAAA,CAACL,MAAM;QACLwB,KAAK,EAAC,MAAM;QACZO,OAAO,EAAE1B,IAAA,CAACF,cAAc,IAAE,CAAE;QAC5BsB,OAAO,EAAC,WAAW;QACnBC,OAAO,EAAEV,WAAY;QACrBW,UAAU,EAAEb;MAAqB,CAClC,CAAC;IAAA,CACF;EACH,CACE,CAAC;AAEV,CAAC;AAED,MAAMkB,2BAA2B,GAAGlC,IAAI,CAACa,mBAAmB,CAAC;AAC7DqB,2BAA2B,CAACC,WAAW,GAAG,qBAAqB;AAE/D,SAASD,2BAA2B,IAAIrB,mBAAmB"}

package/dist/labs/DataView/BulkActionsMenu.js

@@ -14,9 +14,8 @@ import { memo, useCallback } from "react";
 import styled from "@emotion/styled";
 import { useTranslation } from "react-i18next";
 import { Box } from "../../Box.js";
-import { Button } from "../../Button.js";
+import { Button, MenuButton } from "../../Buttons/index.js";
 import { ChevronDownIcon } from "../../icons.generated/index.js";
-import { MenuButton } from "../../MenuButton.js";
 import { useOdysseyDesignTokens } from "../../OdysseyDesignTokensContext.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";

package/dist/labs/DataView/BulkActionsMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"BulkActionsMenu.js","names":["memo","useCallback","styled","useTranslation","Box","Button","ChevronDownIcon","MenuButton","useOdysseyDesignTokens","jsx","_jsx","jsxs","_jsxs","BulkActionsContainer","shouldForwardProp","prop","odysseyDesignTokens","display","gap","Spacing2","BulkActionsMenu","data","menuItems","rowSelection","setRowSelection","t","selectedRowCount","Object","values","filter","Boolean","length","handleSelectAll","rows","fromEntries","map","row","id","handleSelectNone","children","ariaLabel","buttonLabel","buttonVariant","endIcon","isDisabled","label","onClick","variant","MemoizedBulkActionsMenu","displayName"],"sources":["../../../src/labs/DataView/BulkActionsMenu.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2024-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, useCallback, Dispatch, SetStateAction } from \"react\";\nimport { MRT_RowData, MRT_RowSelectionState } from \"material-react-table\";\nimport styled from \"@emotion/styled\";\nimport { useTranslation } from \"react-i18next\";\n\nimport { Box } from \"../../Box\";\nimport { Button } from \"../../Button\";\nimport { ChevronDownIcon } from \"../../icons.generated\";\nimport { MenuButton } from \"../../MenuButton\";\nimport { UniversalProps } from \"./componentTypes\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../../OdysseyDesignTokensContext\";\n\nexport type BulkActionsMenuProps = {\n  data: MRT_RowData[];\n  menuItems: UniversalProps[\"bulkActionMenuItems\"];\n  rowSelection: MRT_RowSelectionState;\n  setRowSelection: Dispatch<SetStateAction<MRT_RowSelectionState>>;\n};\n\nconst BulkActionsContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens }) => ({\n  display: \"flex\",\n  gap: odysseyDesignTokens.Spacing2,\n}));\n\nconst BulkActionsMenu = ({\n  data,\n  menuItems,\n  rowSelection,\n  setRowSelection,\n}: BulkActionsMenuProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n  const { t } = useTranslation();\n\n  const selectedRowCount = Object.values(rowSelection).filter(Boolean).length;\n\n  const handleSelectAll = useCallback(() => {\n    const rows = Object.fromEntries(data.map((row) => [row.id, true]));\n    setRowSelection(rows);\n  }, [data, setRowSelection]);\n\n  const handleSelectNone = useCallback(() => {\n    setRowSelection({});\n  }, [setRowSelection]);\n\n  return (\n    <BulkActionsContainer odysseyDesignTokens={odysseyDesignTokens}>\n      {selectedRowCount > 0 && (\n        <MenuButton\n          ariaLabel=\"More actions\"\n          buttonLabel={t(\"table.actions.selectsome\", { selectedRowCount })}\n          buttonVariant=\"primary\"\n          endIcon={<ChevronDownIcon />}\n        >\n          {menuItems?.(rowSelection)}\n        </MenuButton>\n      )}\n      <Box>\n        <Button\n          isDisabled={selectedRowCount === data.length} // Disabled if all are selected\n          label={t(\"table.actions.selectall\")}\n          onClick={handleSelectAll}\n          variant=\"secondary\"\n        />\n        <Button\n          isDisabled={selectedRowCount === 0} // Disabled if none are selected\n          label={t(\"table.actions.selectnone\")}\n          onClick={handleSelectNone}\n          variant=\"secondary\"\n        />\n      </Box>\n    </BulkActionsContainer>\n  );\n};\n\nconst MemoizedBulkActionsMenu = memo(BulkActionsMenu);\nMemoizedBulkActionsMenu.displayName = \"BulkActionsMenu\";\n\nexport { MemoizedBulkActionsMenu as BulkActionsMenu };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,EAAEC,WAAW,QAAkC,OAAO;AAEnE,OAAOC,MAAM,MAAM,iBAAiB;AACpC,SAASC,cAAc,QAAQ,eAAe;AAAC,SAEtCC,GAAG;AAAA,SACHC,MAAM;AAAA,SACNC,eAAe;AAAA,SACfC,UAAU;AAAA,SAIjBC,sBAAsB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAUxB,MAAMC,oBAAoB,GAAGX,MAAM,CAAC,KAAK,EAAE;EACzCY,iBAAiB,EAAGC,IAAI,IAAKA,IAAI,KAAK;AACxC,CAAC,CAAC,CAEC,CAAC;EAAEC;AAAoB,CAAC,MAAM;EAC/BC,OAAO,EAAE,MAAM;EACfC,GAAG,EAAEF,mBAAmB,CAACG;AAC3B,CAAC,CAAC,CAAC;AAEH,MAAMC,eAAe,GAAGA,CAAC;EACvBC,IAAI;EACJC,SAAS;EACTC,YAAY;EACZC;AACoB,CAAC,KAAK;EAC1B,MAAMR,mBAAmB,GAAGR,sBAAsB,CAAC,CAAC;EACpD,MAAM;IAAEiB;EAAE,CAAC,GAAGtB,cAAc,CAAC,CAAC;EAE9B,MAAMuB,gBAAgB,GAAGC,MAAM,CAACC,MAAM,CAACL,YAAY,CAAC,CAACM,MAAM,CAACC,OAAO,CAAC,CAACC,MAAM;EAE3E,MAAMC,eAAe,GAAG/B,WAAW,CAAC,MAAM;IACxC,MAAMgC,IAAI,GAAGN,MAAM,CAACO,WAAW,CAACb,IAAI,CAACc,GAAG,CAAEC,GAAG,IAAK,CAACA,GAAG,CAACC,EAAE,EAAE,IAAI,CAAC,CAAC,CAAC;IAClEb,eAAe,CAACS,IAAI,CAAC;EACvB,CAAC,EAAE,CAACZ,IAAI,EAAEG,eAAe,CAAC,CAAC;EAE3B,MAAMc,gBAAgB,GAAGrC,WAAW,CAAC,MAAM;IACzCuB,eAAe,CAAC,CAAC,CAAC,CAAC;EACrB,CAAC,EAAE,CAACA,eAAe,CAAC,CAAC;EAErB,OACEZ,KAAA,CAACC,oBAAoB;IAACG,mBAAmB,EAAEA,mBAAoB;IAAAuB,QAAA,GAC5Db,gBAAgB,GAAG,CAAC,IACnBhB,IAAA,CAACH,UAAU;MACTiC,SAAS,EAAC,cAAc;MACxBC,WAAW,EAAEhB,CAAC,CAAC,0BAA0B,EAAE;QAAEC;MAAiB,CAAC,CAAE;MACjEgB,aAAa,EAAC,SAAS;MACvBC,OAAO,EAAEjC,IAAA,CAACJ,eAAe,IAAE,CAAE;MAAAiC,QAAA,EAE5BjB,SAAS,GAAGC,YAAY;IAAC,CAChB,CACb,EACDX,KAAA,CAACR,GAAG;MAAAmC,QAAA,GACF7B,IAAA,CAACL,MAAM;QACLuC,UAAU,EAAElB,gBAAgB,KAAKL,IAAI,CAACU,MAAO;QAC7Cc,KAAK,EAAEpB,CAAC,CAAC,yBAAyB,CAAE;QACpCqB,OAAO,EAAEd,eAAgB;QACzBe,OAAO,EAAC;MAAW,CACpB,CAAC,EACFrC,IAAA,CAACL,MAAM;QACLuC,UAAU,EAAElB,gBAAgB,KAAK,CAAE;QACnCmB,KAAK,EAAEpB,CAAC,CAAC,0BAA0B,CAAE;QACrCqB,OAAO,EAAER,gBAAiB;QAC1BS,OAAO,EAAC;MAAW,CACpB,CAAC;IAAA,CACC,CAAC;EAAA,CACc,CAAC;AAE3B,CAAC;AAED,MAAMC,uBAAuB,GAAGhD,IAAI,CAACoB,eAAe,CAAC;AACrD4B,uBAAuB,CAACC,WAAW,GAAG,iBAAiB;AAEvD,SAASD,uBAAuB,IAAI5B,eAAe"}
+{"version":3,"file":"BulkActionsMenu.js","names":["memo","useCallback","styled","useTranslation","Box","Button","MenuButton","ChevronDownIcon","useOdysseyDesignTokens","jsx","_jsx","jsxs","_jsxs","BulkActionsContainer","shouldForwardProp","prop","odysseyDesignTokens","display","gap","Spacing2","BulkActionsMenu","data","menuItems","rowSelection","setRowSelection","t","selectedRowCount","Object","values","filter","Boolean","length","handleSelectAll","rows","fromEntries","map","row","id","handleSelectNone","children","ariaLabel","buttonLabel","buttonVariant","endIcon","isDisabled","label","onClick","variant","MemoizedBulkActionsMenu","displayName"],"sources":["../../../src/labs/DataView/BulkActionsMenu.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2024-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, useCallback, Dispatch, SetStateAction } from \"react\";\nimport { MRT_RowData, MRT_RowSelectionState } from \"material-react-table\";\nimport styled from \"@emotion/styled\";\nimport { useTranslation } from \"react-i18next\";\n\nimport { Box } from \"../../Box\";\nimport { Button, MenuButton } from \"../../Buttons\";\nimport { ChevronDownIcon } from \"../../icons.generated\";\nimport { UniversalProps } from \"./componentTypes\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../../OdysseyDesignTokensContext\";\n\nexport type BulkActionsMenuProps<TData extends MRT_RowData> = {\n  data: MRT_RowData[];\n  menuItems: UniversalProps<TData>[\"bulkActionMenuItems\"];\n  rowSelection: MRT_RowSelectionState;\n  setRowSelection: Dispatch<SetStateAction<MRT_RowSelectionState>>;\n};\n\nconst BulkActionsContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens }) => ({\n  display: \"flex\",\n  gap: odysseyDesignTokens.Spacing2,\n}));\n\nconst BulkActionsMenu = <TData extends MRT_RowData>({\n  data,\n  menuItems,\n  rowSelection,\n  setRowSelection,\n}: BulkActionsMenuProps<TData>) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n  const { t } = useTranslation();\n\n  const selectedRowCount = Object.values(rowSelection).filter(Boolean).length;\n\n  const handleSelectAll = useCallback(() => {\n    const rows = Object.fromEntries(data.map((row) => [row.id, true]));\n    setRowSelection(rows);\n  }, [data, setRowSelection]);\n\n  const handleSelectNone = useCallback(() => {\n    setRowSelection({});\n  }, [setRowSelection]);\n\n  return (\n    <BulkActionsContainer odysseyDesignTokens={odysseyDesignTokens}>\n      {selectedRowCount > 0 && (\n        <MenuButton\n          ariaLabel=\"More actions\"\n          buttonLabel={t(\"table.actions.selectsome\", { selectedRowCount })}\n          buttonVariant=\"primary\"\n          endIcon={<ChevronDownIcon />}\n        >\n          {menuItems?.(rowSelection)}\n        </MenuButton>\n      )}\n      <Box>\n        <Button\n          isDisabled={selectedRowCount === data.length} // Disabled if all are selected\n          label={t(\"table.actions.selectall\")}\n          onClick={handleSelectAll}\n          variant=\"secondary\"\n        />\n        <Button\n          isDisabled={selectedRowCount === 0} // Disabled if none are selected\n          label={t(\"table.actions.selectnone\")}\n          onClick={handleSelectNone}\n          variant=\"secondary\"\n        />\n      </Box>\n    </BulkActionsContainer>\n  );\n};\n\nconst MemoizedBulkActionsMenu = memo(BulkActionsMenu);\nMemoizedBulkActionsMenu.displayName = \"BulkActionsMenu\";\n\nexport { MemoizedBulkActionsMenu as BulkActionsMenu };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,EAAEC,WAAW,QAAkC,OAAO;AAEnE,OAAOC,MAAM,MAAM,iBAAiB;AACpC,SAASC,cAAc,QAAQ,eAAe;AAAC,SAEtCC,GAAG;AAAA,SACHC,MAAM,EAAEC,UAAU;AAAA,SAClBC,eAAe;AAAA,SAItBC,sBAAsB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAUxB,MAAMC,oBAAoB,GAAGX,MAAM,CAAC,KAAK,EAAE;EACzCY,iBAAiB,EAAGC,IAAI,IAAKA,IAAI,KAAK;AACxC,CAAC,CAAC,CAEC,CAAC;EAAEC;AAAoB,CAAC,MAAM;EAC/BC,OAAO,EAAE,MAAM;EACfC,GAAG,EAAEF,mBAAmB,CAACG;AAC3B,CAAC,CAAC,CAAC;AAEH,MAAMC,eAAe,GAAGA,CAA4B;EAClDC,IAAI;EACJC,SAAS;EACTC,YAAY;EACZC;AAC2B,CAAC,KAAK;EACjC,MAAMR,mBAAmB,GAAGR,sBAAsB,CAAC,CAAC;EACpD,MAAM;IAAEiB;EAAE,CAAC,GAAGtB,cAAc,CAAC,CAAC;EAE9B,MAAMuB,gBAAgB,GAAGC,MAAM,CAACC,MAAM,CAACL,YAAY,CAAC,CAACM,MAAM,CAACC,OAAO,CAAC,CAACC,MAAM;EAE3E,MAAMC,eAAe,GAAG/B,WAAW,CAAC,MAAM;IACxC,MAAMgC,IAAI,GAAGN,MAAM,CAACO,WAAW,CAACb,IAAI,CAACc,GAAG,CAAEC,GAAG,IAAK,CAACA,GAAG,CAACC,EAAE,EAAE,IAAI,CAAC,CAAC,CAAC;IAClEb,eAAe,CAACS,IAAI,CAAC;EACvB,CAAC,EAAE,CAACZ,IAAI,EAAEG,eAAe,CAAC,CAAC;EAE3B,MAAMc,gBAAgB,GAAGrC,WAAW,CAAC,MAAM;IACzCuB,eAAe,CAAC,CAAC,CAAC,CAAC;EACrB,CAAC,EAAE,CAACA,eAAe,CAAC,CAAC;EAErB,OACEZ,KAAA,CAACC,oBAAoB;IAACG,mBAAmB,EAAEA,mBAAoB;IAAAuB,QAAA,GAC5Db,gBAAgB,GAAG,CAAC,IACnBhB,IAAA,CAACJ,UAAU;MACTkC,SAAS,EAAC,cAAc;MACxBC,WAAW,EAAEhB,CAAC,CAAC,0BAA0B,EAAE;QAAEC;MAAiB,CAAC,CAAE;MACjEgB,aAAa,EAAC,SAAS;MACvBC,OAAO,EAAEjC,IAAA,CAACH,eAAe,IAAE,CAAE;MAAAgC,QAAA,EAE5BjB,SAAS,GAAGC,YAAY;IAAC,CAChB,CACb,EACDX,KAAA,CAACR,GAAG;MAAAmC,QAAA,GACF7B,IAAA,CAACL,MAAM;QACLuC,UAAU,EAAElB,gBAAgB,KAAKL,IAAI,CAACU,MAAO;QAC7Cc,KAAK,EAAEpB,CAAC,CAAC,yBAAyB,CAAE;QACpCqB,OAAO,EAAEd,eAAgB;QACzBe,OAAO,EAAC;MAAW,CACpB,CAAC,EACFrC,IAAA,CAACL,MAAM;QACLuC,UAAU,EAAElB,gBAAgB,KAAK,CAAE;QACnCmB,KAAK,EAAEpB,CAAC,CAAC,0BAA0B,CAAE;QACrCqB,OAAO,EAAER,gBAAiB;QAC1BS,OAAO,EAAC;MAAW,CACpB,CAAC;IAAA,CACC,CAAC;EAAA,CACc,CAAC;AAE3B,CAAC;AAED,MAAMC,uBAAuB,GAAGhD,IAAI,CAACoB,eAAe,CAAC;AACrD4B,uBAAuB,CAACC,WAAW,GAAG,iBAAiB;AAEvD,SAASD,uBAAuB,IAAI5B,eAAe"}

package/dist/labs/DataView/CardLayoutContent.js

@@ -85,17 +85,18 @@ const CardLayoutContent = ({
   const {
     updateRowOrder
   } = rowReorderingUtilities;
-  return _jsx(StackContainer, {
-    odysseyDesignTokens: odysseyDesignTokens,
-    currentLayout: currentLayout,
-    maxGridColumns: cardLayoutOptions.maxGridColumns ?? 3,
+  return _jsx(Box, {
     children: isLoading ? _jsx(LoadingContainer, {
       odysseyDesignTokens: odysseyDesignTokens,
       children: _jsx(CircularProgress, {})
     }) : _jsx(_Fragment, {
       children: !data || data.length === 0 || isEmpty || isNoResults ? _jsx(Box, {
         children: emptyState
-      }) : _jsx(_Fragment, {
+      }) : _jsx(StackContainer, {
+        odysseyDesignTokens: odysseyDesignTokens,
+        currentLayout: currentLayout,
+        maxGridColumns: cardLayoutOptions.maxGridColumns ?? 3,
+        role: "list",
         children: data.map((row, index) => {
           const {
             overline,

package/dist/labs/DataView/CardLayoutContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardLayoutContent.js","names":["memo","useCallback","styled","Box","CircularProgress","useOdysseyDesignTokens","RowActions","DataCard","jsx","_jsx","Fragment","_Fragment","StackContainer","shouldForwardProp","prop","odysseyDesignTokens","currentLayout","maxGridColumns","display","flexDirection","columnGap","Spacing5","gridTemplateColumns","LoadingContainer","alignItems","justifyContent","width","paddingBlock","CheckboxContainer","marginBlockStart","Spacing1","CardLayoutContent","data","emptyState","hasRowReordering","hasRowSelection","isEmpty","isLoading","isNoResults","isRowReorderingDisabled","onReorderRows","pagination","rowReorderingUtilities","rowSelection","setRowSelection","cardLayoutOptions","totalRows","handleRowSelectionChange","row","Object","fromEntries","id","entries","filter","key","concat","updateRowOrder","children","length","map","index","overline","title","description","image","variant","itemProps","currentIndex","pageIndex","pageSize","Accessory","_Checkbox","checked","onChange","renderDetailPanel","menuButtonChildren","rowActionMenuItems","rowIndex","undefined","MemoizedCardLayoutContent","displayName"],"sources":["../../../src/labs/DataView/CardLayoutContent.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { Dispatch, ReactNode, SetStateAction, memo, useCallback } from \"react\";\nimport styled, { CSSObject } from \"@emotion/styled\";\nimport {\n  MRT_Row,\n  MRT_RowData,\n  MRT_RowSelectionState,\n  MRT_TableInstance,\n} from \"material-react-table\";\n\nimport { Box } from \"../../Box\";\nimport { Checkbox as MuiCheckbox } from \"@mui/material\";\nimport { CircularProgress } from \"../../CircularProgress\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../../OdysseyDesignTokensContext\";\nimport { RowActions } from \"./RowActions\";\nimport { DataCard } from \"./DataCard\";\nimport { CardLayout, CardLayoutProps, UniversalProps } from \"./componentTypes\";\n\nexport type CardLayoutContentProps = {\n  currentLayout: CardLayout;\n  data: MRT_RowData[];\n  draggingRow?: MRT_Row<MRT_RowData> | null;\n  emptyState: ReactNode;\n  getRowId: UniversalProps[\"getRowId\"];\n  hasRowReordering: UniversalProps[\"hasRowReordering\"];\n  hasRowSelection: UniversalProps[\"hasRowSelection\"];\n  isEmpty?: boolean;\n  isLoading: boolean;\n  isNoResults?: boolean;\n  isRowReorderingDisabled?: boolean;\n  onReorderRows: UniversalProps[\"onReorderRows\"];\n  pagination: { pageIndex: number; pageSize: number };\n  rowReorderingUtilities: {\n    dragHandleStyles: CSSObject;\n    dragHandleText: {\n      title: string;\n      \"aria-label\": string;\n    };\n    draggableTableBodyRowClassName: ({\n      currentRowId,\n      draggingRowId,\n      hoveredRowId,\n    }: {\n      currentRowId: string;\n      draggingRowId?: string;\n      hoveredRowId?: string;\n    }) => string | undefined;\n    handleDragHandleKeyDown: ({\n      table,\n      row,\n      event,\n    }: {\n      table: MRT_TableInstance<MRT_RowData>;\n      row: MRT_Row<MRT_RowData>;\n      event: React.KeyboardEvent<HTMLButtonElement>;\n    }) => void;\n    handleDragHandleOnDragCapture: (\n      table: MRT_TableInstance<MRT_RowData>,\n    ) => void;\n    handleDragHandleOnDragEnd: (table: MRT_TableInstance<MRT_RowData>) => void;\n    resetDraggingAndHoveredRow: (table: MRT_TableInstance<MRT_RowData>) => void;\n    updateRowOrder: ({\n      rowId,\n      newRowIndex,\n    }: {\n      rowId: string;\n      newRowIndex: number;\n    }) => void;\n  };\n  rowSelection: MRT_RowSelectionState;\n  setRowSelection: Dispatch<SetStateAction<MRT_RowSelectionState>>;\n  cardLayoutOptions: CardLayoutProps;\n  totalRows: UniversalProps[\"totalRows\"];\n};\n\nconst StackContainer = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" &&\n    prop !== \"currentLayout\" &&\n    prop !== \"maxGridColumns\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n  currentLayout: CardLayout;\n  maxGridColumns: number;\n}>(({ odysseyDesignTokens, currentLayout, maxGridColumns }) => ({\n  display: currentLayout === \"list\" ? \"flex\" : \"grid\",\n  flexDirection: \"column\",\n  columnGap: odysseyDesignTokens.Spacing5,\n\n  ...(currentLayout === \"grid\" && {\n    [`@media (max-width: 720px)`]: {\n      gridTemplateColumns: \"repeat(1, 1fr)\",\n    },\n    [`@media (min-width: 720px) and (max-width: 960px)`]: {\n      gridTemplateColumns: \"repeat(2, 1fr)\",\n    },\n    [`@media (min-width: 960px)`]: {\n      gridTemplateColumns: `repeat(${maxGridColumns}, 1fr)`,\n    },\n  }),\n}));\n\nconst LoadingContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens }) => ({\n  display: \"flex\",\n  alignItems: \"center\",\n  justifyContent: \"center\",\n  width: \"100%\",\n  paddingBlock: odysseyDesignTokens.Spacing5,\n}));\n\nconst CheckboxContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens }) => ({\n  marginBlockStart: `-${odysseyDesignTokens.Spacing1}`,\n}));\n\nconst CardLayoutContent = ({\n  currentLayout,\n  data,\n  emptyState,\n  hasRowReordering,\n  hasRowSelection,\n  isEmpty,\n  isLoading,\n  isNoResults,\n  isRowReorderingDisabled,\n  onReorderRows,\n  pagination,\n  rowReorderingUtilities,\n  rowSelection,\n  setRowSelection,\n  cardLayoutOptions,\n  totalRows,\n}: CardLayoutContentProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  const handleRowSelectionChange = useCallback(\n    (row: MRT_RowData) => {\n      setRowSelection((rowSelection) =>\n        Object.fromEntries(\n          row.id in rowSelection\n            ? Object.entries(rowSelection).filter(([key]) => key !== row.id)\n            : Object.entries(rowSelection).concat([[row.id, true]]),\n        ),\n      );\n    },\n    [setRowSelection],\n  );\n\n  const { updateRowOrder } = rowReorderingUtilities;\n\n  return (\n    <StackContainer\n      odysseyDesignTokens={odysseyDesignTokens}\n      currentLayout={currentLayout}\n      maxGridColumns={cardLayoutOptions.maxGridColumns ?? 3}\n    >\n      {isLoading ? (\n        <LoadingContainer odysseyDesignTokens={odysseyDesignTokens}>\n          <CircularProgress />\n        </LoadingContainer>\n      ) : (\n        <>\n          {!data || data.length === 0 || isEmpty || isNoResults ? (\n            <Box>{emptyState}</Box>\n          ) : (\n            <>\n              {data.map((row: MRT_RowData, index: number) => {\n                const {\n                  overline,\n                  title,\n                  description,\n                  image,\n                  children,\n                  variant,\n                } = cardLayoutOptions.itemProps(row);\n                const currentIndex =\n                  index + (pagination.pageIndex - 1) * pagination.pageSize;\n\n                return (\n                  <DataCard\n                    Accessory={\n                      hasRowSelection && (\n                        // Negative margin to counteract the checkbox's inbuilt spacing\n                        <CheckboxContainer\n                          odysseyDesignTokens={odysseyDesignTokens}\n                        >\n                          <MuiCheckbox\n                            checked={rowSelection[row.id] ?? false}\n                            onChange={() => handleRowSelectionChange(row)}\n                          />\n                        </CheckboxContainer>\n                      )\n                    }\n                    children={children}\n                    description={description}\n                    renderDetailPanel={cardLayoutOptions.renderDetailPanel}\n                    row={row}\n                    image={image}\n                    key={row.id}\n                    menuButtonChildren={\n                      (cardLayoutOptions.rowActionMenuItems ||\n                        hasRowReordering) && (\n                        <RowActions\n                          row={row}\n                          rowIndex={currentIndex}\n                          rowActionMenuItems={\n                            cardLayoutOptions.rowActionMenuItems\n                          }\n                          isRowReorderingDisabled={isRowReorderingDisabled}\n                          totalRows={totalRows}\n                          updateRowOrder={\n                            hasRowReordering && onReorderRows\n                              ? updateRowOrder\n                              : undefined\n                          }\n                        />\n                      )\n                    }\n                    overline={overline}\n                    title={title}\n                    variant={variant}\n                  />\n                );\n              })}\n            </>\n          )}\n        </>\n      )}\n    </StackContainer>\n  );\n};\n\nconst MemoizedCardLayoutContent = memo(CardLayoutContent);\nMemoizedCardLayoutContent.displayName = \"CardLayoutContent\";\n\nexport { MemoizedCardLayoutContent as CardLayoutContent };\n"],"mappings":"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"}
+{"version":3,"file":"CardLayoutContent.js","names":["memo","useCallback","styled","Box","CircularProgress","useOdysseyDesignTokens","RowActions","DataCard","jsx","_jsx","Fragment","_Fragment","StackContainer","shouldForwardProp","prop","odysseyDesignTokens","currentLayout","maxGridColumns","display","flexDirection","columnGap","Spacing5","gridTemplateColumns","LoadingContainer","alignItems","justifyContent","width","paddingBlock","CheckboxContainer","marginBlockStart","Spacing1","CardLayoutContent","data","emptyState","hasRowReordering","hasRowSelection","isEmpty","isLoading","isNoResults","isRowReorderingDisabled","onReorderRows","pagination","rowReorderingUtilities","rowSelection","setRowSelection","cardLayoutOptions","totalRows","handleRowSelectionChange","row","Object","fromEntries","id","entries","filter","key","concat","updateRowOrder","children","length","role","map","index","overline","title","description","image","variant","itemProps","currentIndex","pageIndex","pageSize","Accessory","_Checkbox","checked","onChange","renderDetailPanel","menuButtonChildren","rowActionMenuItems","rowIndex","undefined","MemoizedCardLayoutContent","displayName"],"sources":["../../../src/labs/DataView/CardLayoutContent.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { Dispatch, ReactNode, SetStateAction, memo, useCallback } from \"react\";\nimport styled, { CSSObject } from \"@emotion/styled\";\nimport {\n  MRT_Row,\n  MRT_RowData,\n  MRT_RowSelectionState,\n  MRT_TableInstance,\n} from \"material-react-table\";\n\nimport { Box } from \"../../Box\";\nimport { Checkbox as MuiCheckbox } from \"@mui/material\";\nimport { CircularProgress } from \"../../CircularProgress\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../../OdysseyDesignTokensContext\";\nimport { RowActions } from \"./RowActions\";\nimport { DataCard } from \"./DataCard\";\nimport { CardLayout, CardLayoutProps, UniversalProps } from \"./componentTypes\";\n\nexport type CardLayoutContentProps<TData extends MRT_RowData> = {\n  currentLayout: CardLayout;\n  data: TData[];\n  draggingRow?: MRT_Row<TData> | null;\n  emptyState: ReactNode;\n  getRowId: UniversalProps<TData>[\"getRowId\"];\n  hasRowReordering: UniversalProps<TData>[\"hasRowReordering\"];\n  hasRowSelection: UniversalProps<TData>[\"hasRowSelection\"];\n  isEmpty?: boolean;\n  isLoading: boolean;\n  isNoResults?: boolean;\n  isRowReorderingDisabled?: boolean;\n  onReorderRows: UniversalProps<TData>[\"onReorderRows\"];\n  pagination: { pageIndex: number; pageSize: number };\n  rowReorderingUtilities: {\n    dragHandleStyles: CSSObject;\n    dragHandleText: {\n      title: string;\n      \"aria-label\": string;\n    };\n    draggableTableBodyRowClassName: ({\n      currentRowId,\n      draggingRowId,\n      hoveredRowId,\n    }: {\n      currentRowId: string;\n      draggingRowId?: string;\n      hoveredRowId?: string;\n    }) => string | undefined;\n    handleDragHandleKeyDown: ({\n      table,\n      row,\n      event,\n    }: {\n      table: MRT_TableInstance<TData>;\n      row: MRT_Row<TData>;\n      event: React.KeyboardEvent<HTMLButtonElement>;\n    }) => void;\n    handleDragHandleOnDragCapture: (table: MRT_TableInstance<TData>) => void;\n    handleDragHandleOnDragEnd: (table: MRT_TableInstance<TData>) => void;\n    resetDraggingAndHoveredRow: (table: MRT_TableInstance<TData>) => void;\n    updateRowOrder: ({\n      rowId,\n      newRowIndex,\n    }: {\n      rowId: string;\n      newRowIndex: number;\n    }) => void;\n  };\n  rowSelection: MRT_RowSelectionState;\n  setRowSelection: Dispatch<SetStateAction<MRT_RowSelectionState>>;\n  cardLayoutOptions: CardLayoutProps<TData>;\n  totalRows: UniversalProps<TData>[\"totalRows\"];\n};\ntype CardLayoutContentComponent = (<TData extends MRT_RowData>(\n  props: CardLayoutContentProps<TData>,\n) => JSX.Element) & {\n  displayName?: string;\n};\n\nconst StackContainer = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" &&\n    prop !== \"currentLayout\" &&\n    prop !== \"maxGridColumns\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n  currentLayout: CardLayout;\n  maxGridColumns: number;\n}>(({ odysseyDesignTokens, currentLayout, maxGridColumns }) => ({\n  display: currentLayout === \"list\" ? \"flex\" : \"grid\",\n  flexDirection: \"column\",\n  columnGap: odysseyDesignTokens.Spacing5,\n\n  ...(currentLayout === \"grid\" && {\n    [`@media (max-width: 720px)`]: {\n      gridTemplateColumns: \"repeat(1, 1fr)\",\n    },\n    [`@media (min-width: 720px) and (max-width: 960px)`]: {\n      gridTemplateColumns: \"repeat(2, 1fr)\",\n    },\n    [`@media (min-width: 960px)`]: {\n      gridTemplateColumns: `repeat(${maxGridColumns}, 1fr)`,\n    },\n  }),\n}));\n\nconst LoadingContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens }) => ({\n  display: \"flex\",\n  alignItems: \"center\",\n  justifyContent: \"center\",\n  width: \"100%\",\n  paddingBlock: odysseyDesignTokens.Spacing5,\n}));\n\nconst CheckboxContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens }) => ({\n  marginBlockStart: `-${odysseyDesignTokens.Spacing1}`,\n}));\n\nconst CardLayoutContent = <TData extends MRT_RowData>({\n  currentLayout,\n  data,\n  emptyState,\n  hasRowReordering,\n  hasRowSelection,\n  isEmpty,\n  isLoading,\n  isNoResults,\n  isRowReorderingDisabled,\n  onReorderRows,\n  pagination,\n  rowReorderingUtilities,\n  rowSelection,\n  setRowSelection,\n  cardLayoutOptions,\n  totalRows,\n}: CardLayoutContentProps<TData>) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  const handleRowSelectionChange = useCallback(\n    (row: MRT_RowData) => {\n      setRowSelection((rowSelection) =>\n        Object.fromEntries(\n          row.id in rowSelection\n            ? Object.entries(rowSelection).filter(([key]) => key !== row.id)\n            : Object.entries(rowSelection).concat([[row.id, true]]),\n        ),\n      );\n    },\n    [setRowSelection],\n  );\n\n  const { updateRowOrder } = rowReorderingUtilities;\n\n  return (\n    <Box>\n      {isLoading ? (\n        <LoadingContainer odysseyDesignTokens={odysseyDesignTokens}>\n          <CircularProgress />\n        </LoadingContainer>\n      ) : (\n        <>\n          {!data || data.length === 0 || isEmpty || isNoResults ? (\n            <Box>{emptyState}</Box>\n          ) : (\n            <StackContainer\n              odysseyDesignTokens={odysseyDesignTokens}\n              currentLayout={currentLayout}\n              maxGridColumns={cardLayoutOptions.maxGridColumns ?? 3}\n              role=\"list\"\n            >\n              {data.map((row: TData, index: number) => {\n                const {\n                  overline,\n                  title,\n                  description,\n                  image,\n                  children,\n                  variant,\n                } = cardLayoutOptions.itemProps(row);\n                const currentIndex =\n                  index + (pagination.pageIndex - 1) * pagination.pageSize;\n\n                return (\n                  <DataCard\n                    Accessory={\n                      hasRowSelection && (\n                        // Negative margin to counteract the checkbox's inbuilt spacing\n                        <CheckboxContainer\n                          odysseyDesignTokens={odysseyDesignTokens}\n                        >\n                          <MuiCheckbox\n                            checked={rowSelection[row.id] ?? false}\n                            onChange={() => handleRowSelectionChange(row)}\n                          />\n                        </CheckboxContainer>\n                      )\n                    }\n                    children={children}\n                    description={description}\n                    renderDetailPanel={cardLayoutOptions.renderDetailPanel}\n                    row={row}\n                    image={image}\n                    key={row.id}\n                    menuButtonChildren={\n                      (cardLayoutOptions.rowActionMenuItems ||\n                        hasRowReordering) && (\n                        <RowActions\n                          row={row}\n                          rowIndex={currentIndex}\n                          rowActionMenuItems={\n                            cardLayoutOptions.rowActionMenuItems\n                          }\n                          isRowReorderingDisabled={isRowReorderingDisabled}\n                          totalRows={totalRows}\n                          updateRowOrder={\n                            hasRowReordering && onReorderRows\n                              ? updateRowOrder\n                              : undefined\n                          }\n                        />\n                      )\n                    }\n                    overline={overline}\n                    title={title}\n                    variant={variant}\n                  />\n                );\n              })}\n            </StackContainer>\n          )}\n        </>\n      )}\n    </Box>\n  );\n};\n\nconst MemoizedCardLayoutContent = memo(\n  CardLayoutContent,\n) as CardLayoutContentComponent;\nMemoizedCardLayoutContent.displayName = \"CardLayoutContent\";\n\nexport { MemoizedCardLayoutContent as CardLayoutContent };\n"],"mappings":"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"}

package/dist/labs/DataView/DataCard.js

@@ -19,10 +19,9 @@ import { memo, useMemo, useState } from "react";
 import styled from "@emotion/styled";
 import { useTranslation } from "react-i18next";
 import { Box } from "../../Box.js";
-import { ButtonContext } from "../../ButtonContext.js";
+import { ButtonContext, MenuButton } from "../../Buttons/index.js";
 import { useOdysseyDesignTokens } from "../../OdysseyDesignTokensContext.js";
 import { Heading5, Paragraph, Support } from "../../Typography.js";
-import { MenuButton } from "../../MenuButton.js";
 import { ChevronDownIcon, ChevronUpIcon, MoreIcon } from "../../icons.generated/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -63,7 +62,7 @@ const MenuButtonContainer = styled("div", {
 }) => ({
   position: "absolute",
   right: odysseyDesignTokens.Spacing3,
-  top: odysseyDesignTokens.Spacing3,
+  top: variant === "compact" ? odysseyDesignTokens.Spacing4 : odysseyDesignTokens.Spacing3,
   height: variant === "compact" ? CARD_IMAGE_SIZE_COMPACT : "auto",
   display: "flex",
   alignItems: "center"
@@ -77,12 +76,14 @@ const CardInnerContainer = styled("div", {
   gap: odysseyDesignTokens.Spacing3
 }));
 const CardImageAndContentContainer = styled("div", {
-  shouldForwardProp: prop => prop !== "variant"
+  shouldForwardProp: prop => prop !== "variant" && prop !== "centerContent"
 })(({
-  variant
+  variant,
+  centerContent
 }) => ({
   display: "flex",
-  flexDirection: variant === "tile" ? "column" : "row"
+  flexDirection: variant === "tile" ? "column" : "row",
+  alignItems: centerContent ? "center" : "flex-start"
 }));
 const CardContent = styled("div", {
   shouldForwardProp: prop => prop !== "odysseyDesignTokens"
@@ -90,8 +91,11 @@ const CardContent = styled("div", {
   odysseyDesignTokens,
   variant
 }) => ({
-  "& > .MuiTypography-h5": {
+  "& > .MuiTypography-h5:not(:last-child)": {
     marginBlockEnd: `${variant === "compact" ? odysseyDesignTokens.Spacing1 : odysseyDesignTokens.Spacing3} !important`
+  },
+  "& > *:last-child": {
+    marginBlockEnd: 0
   }
 }));
 const CardChildrenContainer = styled("div", {
@@ -150,48 +154,56 @@ const DataCard = ({
       children: [AccessoryProp, renderDetailPanel && ExpansionToggle]
     });
   }, [AccessoryProp, ExpansionToggle, odysseyDesignTokens, renderDetailPanel, variant]);
-  const cardContent = useMemo(() => _jsxs(CardInnerContainer, {
-    odysseyDesignTokens: odysseyDesignTokens,
-    children: [(AccessoryProp || renderDetailPanel) && _jsx(Box, {
-      children: Accessory
-    }), _jsxs(CardImageAndContentContainer, {
-      variant: variant,
-      children: [image && _jsx(ImageContainer, {
-        odysseyDesignTokens: odysseyDesignTokens,
-        hasMenuButtonChildren: Boolean(menuButtonChildren),
-        variant: variant,
-        children: image
-      }), _jsxs(CardContent, {
-        odysseyDesignTokens: odysseyDesignTokens,
+  const cardContent = useMemo(() => {
+    const countDefinedProps = props => {
+      return props.filter(prop => prop !== undefined).length;
+    };
+    const shouldCenterContent = variant === "compact" && (!renderDetailPanel || !isDetailPanelOpen) && countDefinedProps([title, description, overline, button, children]) <= 2;
+    return _jsxs(CardInnerContainer, {
+      odysseyDesignTokens: odysseyDesignTokens,
+      children: [(AccessoryProp || renderDetailPanel) && _jsx(Box, {
+        children: Accessory
+      }), _jsxs(CardImageAndContentContainer, {
         variant: variant,
-        children: [overline && _jsx(Support, {
-          component: "div",
-          children: overline
-        }), title && _jsx(Heading5, {
-          component: "div",
-          children: title
-        }), description && _jsx(Paragraph, {
-          color: "textSecondary",
-          children: description
-        }), button && _jsx(_CardActions, {
-          children: _jsx(ButtonContext.Provider, {
-            value: buttonProviderValue,
-            children: button
-          })
-        }), children && _jsx(CardChildrenContainer, {
+        centerContent: shouldCenterContent,
+        children: [image && _jsx(ImageContainer, {
           odysseyDesignTokens: odysseyDesignTokens,
-          children: children
-        }), renderDetailPanel && isDetailPanelOpen && _jsx(CardChildrenContainer, {
+          hasMenuButtonChildren: Boolean(menuButtonChildren),
+          variant: variant,
+          children: image
+        }), _jsxs(CardContent, {
           odysseyDesignTokens: odysseyDesignTokens,
-          children: renderDetailPanel({
-            row
-          })
+          variant: variant,
+          children: [overline && _jsx(Support, {
+            component: "div",
+            children: overline
+          }), title && _jsx(Heading5, {
+            component: "div",
+            children: title
+          }), description && _jsx(Paragraph, {
+            color: "textSecondary",
+            children: description
+          }), button && _jsx(_CardActions, {
+            children: _jsx(ButtonContext.Provider, {
+              value: buttonProviderValue,
+              children: button
+            })
+          }), children && _jsx(CardChildrenContainer, {
+            odysseyDesignTokens: odysseyDesignTokens,
+            children: children
+          }), renderDetailPanel && isDetailPanelOpen && _jsx(CardChildrenContainer, {
+            odysseyDesignTokens: odysseyDesignTokens,
+            children: renderDetailPanel({
+              row
+            })
+          })]
         })]
       })]
-    })]
-  }), [odysseyDesignTokens, AccessoryProp, renderDetailPanel, Accessory, variant, image, menuButtonChildren, overline, title, description, button, children, isDetailPanelOpen, row]);
+    });
+  }, [odysseyDesignTokens, AccessoryProp, renderDetailPanel, Accessory, variant, image, menuButtonChildren, overline, title, description, button, children, isDetailPanelOpen, row]);
   return _jsxs(_Card, {
     className: `${onClick ? "isClickable" : ""} ${Accessory ? "hasAccessory" : ""} ods-card-${variant}`,
+    role: "listitem",
     children: [onClick ? _jsx(_CardActionArea, {
       onClick: onClick,
       children: cardContent

package/dist/labs/DataView/DataCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataCard.js","names":["memo","useMemo","useState","styled","useTranslation","Box","ButtonContext","useOdysseyDesignTokens","Heading5","Paragraph","Support","MenuButton","ChevronDownIcon","ChevronUpIcon","MoreIcon","jsx","_jsx","jsxs","_jsxs","CARD_IMAGE_SIZE","CARD_IMAGE_SIZE_COMPACT","cardVariantValues","AccessoryContainer","shouldForwardProp","prop","odysseyDesignTokens","variant","display","flexDirection","alignItems","gap","Spacing2","height","ImageContainer","hasMenuButtonChildren","maxHeight","marginBlockEnd","Spacing5","paddingRight","MenuButtonContainer","position","right","Spacing3","top","CardInnerContainer","CardImageAndContentContainer","CardContent","Spacing1","CardChildrenContainer","marginBlockStart","AccessoryPlaceholder","_IconButton","visibility","buttonProviderValue","isFullWidth","DataCard","Accessory","AccessoryProp","button","children","description","image","menuButtonChildren","onClick","overline","renderDetailPanel","row","title","t","isDetailPanelOpen","setIsDetailPanelOpen","ExpansionToggle","_Tooltip","disabled","cardContent","Boolean","component","color","_CardActions","Provider","value","_Card","className","_CardActionArea","endIcon","ariaLabel","buttonVariant","menuAlignment","size","tooltipText","MemoizedDataCard","displayName"],"sources":["../../../src/labs/DataView/DataCard.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2024-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  ReactNode,\n  useState,\n} from \"react\";\nimport {\n  IconButton as MuiIconButton,\n  Card as MuiCard,\n  CardActions as MuiCardActions,\n  CardActionArea as MuiCardActionArea,\n  Tooltip as MuiTooltip,\n} from \"@mui/material\";\nimport styled from \"@emotion/styled\";\nimport { useTranslation } from \"react-i18next\";\n\nimport { Box } from \"../../Box\";\nimport { Button } from \"../../Button\";\nimport { ButtonContext } from \"../../ButtonContext\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../../OdysseyDesignTokensContext\";\nimport { Heading5, Paragraph, Support } from \"../../Typography\";\nimport { MenuButton, MenuButtonProps } from \"../../MenuButton\";\nimport {\n  ChevronDownIcon,\n  ChevronUpIcon,\n  MoreIcon,\n} from \"../../icons.generated\";\nimport { CardLayoutProps } from \"./componentTypes\";\nimport { MRT_RowData } from \"material-react-table\";\n\nexport const CARD_IMAGE_SIZE = \"64px\";\nexport const CARD_IMAGE_SIZE_COMPACT = \"48px\";\n\nexport const cardVariantValues = [\"tile\", \"stack\", \"compact\"] as const;\n\nexport type DataCardProps = {\n  children?: ReactNode;\n  description?: string;\n  image?: ReactElement;\n  overline?: string;\n  renderDetailPanel?: CardLayoutProps[\"renderDetailPanel\"];\n  row: MRT_RowData;\n  title?: string;\n  variant?: (typeof cardVariantValues)[number];\n} & (\n  | {\n      Accessory?: never;\n      button?: never;\n      menuButtonChildren?: never;\n      onClick: MouseEventHandler;\n    }\n  | {\n      Accessory?: ReactNode;\n      button?: ReactElement<typeof Button>;\n      menuButtonChildren?: MenuButtonProps[\"children\"];\n      onClick?: never;\n    }\n);\n\nconst AccessoryContainer = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" && prop !== \"variant\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n  variant: (typeof cardVariantValues)[number];\n}>(({ odysseyDesignTokens, variant }) => ({\n  display: \"flex\",\n  flexDirection: variant === \"compact\" ? \"row\" : \"column\",\n  alignItems: \"center\",\n  gap: odysseyDesignTokens.Spacing2,\n  height: variant === \"compact\" ? CARD_IMAGE_SIZE_COMPACT : \"auto\",\n}));\n\nconst ImageContainer = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" &&\n    prop !== \"hasMenuButtonChildren\" &&\n    prop !== \"variant\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n  hasMenuButtonChildren: boolean;\n  variant: (typeof cardVariantValues)[number];\n}>(({ odysseyDesignTokens, hasMenuButtonChildren, variant }) => ({\n  display: \"flex\",\n  alignItems: \"flex-start\",\n  height: variant === \"compact\" ? CARD_IMAGE_SIZE_COMPACT : CARD_IMAGE_SIZE,\n  maxHeight: variant === \"compact\" ? CARD_IMAGE_SIZE_COMPACT : CARD_IMAGE_SIZE,\n  marginBlockEnd: variant === \"tile\" ? odysseyDesignTokens.Spacing5 : 0,\n  paddingRight: hasMenuButtonChildren ? odysseyDesignTokens.Spacing5 : 0,\n}));\n\nconst MenuButtonContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n  variant: (typeof cardVariantValues)[number];\n}>(({ odysseyDesignTokens, variant }) => ({\n  position: \"absolute\",\n  right: odysseyDesignTokens.Spacing3,\n  top: odysseyDesignTokens.Spacing3,\n  height: variant === \"compact\" ? CARD_IMAGE_SIZE_COMPACT : \"auto\",\n  display: \"flex\",\n  alignItems: \"center\",\n}));\n\nconst CardInnerContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({\n  display: \"flex\",\n  gap: odysseyDesignTokens.Spacing3,\n}));\n\nconst CardImageAndContentContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"variant\",\n})<{ variant: (typeof cardVariantValues)[number] }>(({ variant }) => ({\n  display: \"flex\",\n  flexDirection: variant === \"tile\" ? \"column\" : \"row\",\n}));\n\nconst CardContent = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n  variant: (typeof cardVariantValues)[number];\n}>(({ odysseyDesignTokens, variant }) => ({\n  \"& > .MuiTypography-h5\": {\n    marginBlockEnd: `${variant === \"compact\" ? odysseyDesignTokens.Spacing1 : odysseyDesignTokens.Spacing3} !important`,\n  },\n}));\n\nconst CardChildrenContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({\n  [\"&:not(:first-child)\"]: {\n    marginBlockStart: odysseyDesignTokens.Spacing3,\n  },\n}));\n\nconst AccessoryPlaceholder = styled(MuiIconButton)(() => ({\n  visibility: \"hidden\",\n}));\nconst buttonProviderValue = { isFullWidth: true };\n\nconst DataCard = ({\n  Accessory: AccessoryProp,\n  button,\n  children,\n  description,\n  image,\n  menuButtonChildren,\n  onClick,\n  overline,\n  renderDetailPanel,\n  row,\n  title,\n  variant = \"tile\",\n}: DataCardProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n  const { t } = useTranslation();\n\n  const [isDetailPanelOpen, setIsDetailPanelOpen] = useState<boolean>(false);\n\n  const ExpansionToggle = useMemo(() => {\n    return renderDetailPanel?.({ row }) ? (\n      <MuiTooltip\n        title={\n          isDetailPanelOpen\n            ? t(\"table.rowexpansion.collapse\")\n            : t(\"table.rowexpansion.expand\")\n        }\n      >\n        <MuiIconButton\n          children={isDetailPanelOpen ? <ChevronUpIcon /> : <ChevronDownIcon />}\n          onClick={() => setIsDetailPanelOpen(!isDetailPanelOpen)}\n          aria-label={\n            isDetailPanelOpen\n              ? t(\"table.rowexpansion.collapse\")\n              : t(\"table.rowexpansion.expand\")\n          }\n        />\n      </MuiTooltip>\n    ) : (\n      <AccessoryPlaceholder disabled>\n        <ChevronDownIcon />\n      </AccessoryPlaceholder>\n    );\n  }, [isDetailPanelOpen, renderDetailPanel, row, t]);\n\n  const Accessory = useMemo(() => {\n    return (\n      <AccessoryContainer\n        odysseyDesignTokens={odysseyDesignTokens}\n        variant={variant}\n      >\n        {AccessoryProp}\n        {renderDetailPanel && ExpansionToggle}\n      </AccessoryContainer>\n    );\n  }, [\n    AccessoryProp,\n    ExpansionToggle,\n    odysseyDesignTokens,\n    renderDetailPanel,\n    variant,\n  ]);\n\n  const cardContent = useMemo(\n    () => (\n      <CardInnerContainer odysseyDesignTokens={odysseyDesignTokens}>\n        {(AccessoryProp || renderDetailPanel) && <Box>{Accessory}</Box>}\n        <CardImageAndContentContainer variant={variant}>\n          {image && (\n            <ImageContainer\n              odysseyDesignTokens={odysseyDesignTokens}\n              hasMenuButtonChildren={Boolean(menuButtonChildren)}\n              variant={variant}\n            >\n              {image}\n            </ImageContainer>\n          )}\n\n          <CardContent\n            odysseyDesignTokens={odysseyDesignTokens}\n            variant={variant}\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\n            {children && (\n              <CardChildrenContainer odysseyDesignTokens={odysseyDesignTokens}>\n                {children}\n              </CardChildrenContainer>\n            )}\n\n            {renderDetailPanel && isDetailPanelOpen && (\n              <CardChildrenContainer odysseyDesignTokens={odysseyDesignTokens}>\n                {renderDetailPanel({ row })}\n              </CardChildrenContainer>\n            )}\n          </CardContent>\n        </CardImageAndContentContainer>\n      </CardInnerContainer>\n    ),\n    [\n      odysseyDesignTokens,\n      AccessoryProp,\n      renderDetailPanel,\n      Accessory,\n      variant,\n      image,\n      menuButtonChildren,\n      overline,\n      title,\n      description,\n      button,\n      children,\n      isDetailPanelOpen,\n      row,\n    ],\n  );\n\n  return (\n    <MuiCard\n      className={`${onClick ? \"isClickable\" : \"\"} ${Accessory ? \"hasAccessory\" : \"\"} ods-card-${variant}`}\n    >\n      {onClick ? (\n        <MuiCardActionArea onClick={onClick}>{cardContent}</MuiCardActionArea>\n      ) : (\n        cardContent\n      )}\n\n      {menuButtonChildren && (\n        <MenuButtonContainer\n          odysseyDesignTokens={odysseyDesignTokens}\n          variant={variant}\n        >\n          <MenuButton\n            endIcon={<MoreIcon />}\n            ariaLabel={t(\"table.moreactions.arialabel\")}\n            buttonVariant=\"floating\"\n            menuAlignment=\"right\"\n            size=\"small\"\n            tooltipText={t(\"table.actions\")}\n          >\n            {menuButtonChildren}\n          </MenuButton>\n        </MenuButtonContainer>\n      )}\n    </MuiCard>\n  );\n};\n\nconst MemoizedDataCard = memo(DataCard);\nMemoizedDataCard.displayName = \"DataCard\";\n\nexport { MemoizedDataCard as DataCard };\n"],"mappings":"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"}
+{"version":3,"file":"DataCard.js","names":["memo","useMemo","useState","styled","useTranslation","Box","ButtonContext","MenuButton","useOdysseyDesignTokens","Heading5","Paragraph","Support","ChevronDownIcon","ChevronUpIcon","MoreIcon","jsx","_jsx","jsxs","_jsxs","CARD_IMAGE_SIZE","CARD_IMAGE_SIZE_COMPACT","cardVariantValues","AccessoryContainer","shouldForwardProp","prop","odysseyDesignTokens","variant","display","flexDirection","alignItems","gap","Spacing2","height","ImageContainer","hasMenuButtonChildren","maxHeight","marginBlockEnd","Spacing5","paddingRight","MenuButtonContainer","position","right","Spacing3","top","Spacing4","CardInnerContainer","CardImageAndContentContainer","centerContent","CardContent","Spacing1","CardChildrenContainer","marginBlockStart","AccessoryPlaceholder","_IconButton","visibility","buttonProviderValue","isFullWidth","DataCard","Accessory","AccessoryProp","button","children","description","image","menuButtonChildren","onClick","overline","renderDetailPanel","row","title","t","isDetailPanelOpen","setIsDetailPanelOpen","ExpansionToggle","_Tooltip","disabled","cardContent","countDefinedProps","props","filter","undefined","length","shouldCenterContent","Boolean","component","color","_CardActions","Provider","value","_Card","className","role","_CardActionArea","endIcon","ariaLabel","buttonVariant","menuAlignment","size","tooltipText","MemoizedDataCard","displayName"],"sources":["../../../src/labs/DataView/DataCard.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2024-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  ReactNode,\n  useState,\n} from \"react\";\nimport {\n  IconButton as MuiIconButton,\n  Card as MuiCard,\n  CardActions as MuiCardActions,\n  CardActionArea as MuiCardActionArea,\n  Tooltip as MuiTooltip,\n} from \"@mui/material\";\nimport styled from \"@emotion/styled\";\nimport { useTranslation } from \"react-i18next\";\n\nimport { Box } from \"../../Box\";\nimport {\n  Button,\n  ButtonContext,\n  MenuButton,\n  MenuButtonProps,\n} from \"../../Buttons\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../../OdysseyDesignTokensContext\";\nimport { Heading5, Paragraph, Support } from \"../../Typography\";\nimport {\n  ChevronDownIcon,\n  ChevronUpIcon,\n  MoreIcon,\n} from \"../../icons.generated\";\nimport { CardLayoutProps } from \"./componentTypes\";\nimport { MRT_RowData } from \"material-react-table\";\n\nexport const CARD_IMAGE_SIZE = \"64px\";\nexport const CARD_IMAGE_SIZE_COMPACT = \"48px\";\n\nexport const cardVariantValues = [\"tile\", \"stack\", \"compact\"] as const;\n\nexport type DataCardProps<TData extends MRT_RowData> = {\n  children?: ReactNode;\n  description?: string;\n  image?: ReactElement;\n  overline?: string;\n  renderDetailPanel?: CardLayoutProps<TData>[\"renderDetailPanel\"];\n  row: TData;\n  title?: string;\n  variant?: (typeof cardVariantValues)[number];\n} & (\n  | {\n      Accessory?: never;\n      button?: never;\n      menuButtonChildren?: never;\n      onClick: MouseEventHandler;\n    }\n  | {\n      Accessory?: ReactNode;\n      button?: ReactElement<typeof Button>;\n      menuButtonChildren?: MenuButtonProps[\"children\"];\n      onClick?: never;\n    }\n);\n\ntype DataCardComponent = (<TData extends MRT_RowData>(\n  props: DataCardProps<TData>,\n) => JSX.Element) & {\n  displayName?: string;\n};\n\nconst AccessoryContainer = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" && prop !== \"variant\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n  variant: (typeof cardVariantValues)[number];\n}>(({ odysseyDesignTokens, variant }) => ({\n  display: \"flex\",\n  flexDirection: variant === \"compact\" ? \"row\" : \"column\",\n  alignItems: \"center\",\n  gap: odysseyDesignTokens.Spacing2,\n  height: variant === \"compact\" ? CARD_IMAGE_SIZE_COMPACT : \"auto\",\n}));\n\nconst ImageContainer = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" &&\n    prop !== \"hasMenuButtonChildren\" &&\n    prop !== \"variant\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n  hasMenuButtonChildren: boolean;\n  variant: (typeof cardVariantValues)[number];\n}>(({ odysseyDesignTokens, hasMenuButtonChildren, variant }) => ({\n  display: \"flex\",\n  alignItems: \"flex-start\",\n  height: variant === \"compact\" ? CARD_IMAGE_SIZE_COMPACT : CARD_IMAGE_SIZE,\n  maxHeight: variant === \"compact\" ? CARD_IMAGE_SIZE_COMPACT : CARD_IMAGE_SIZE,\n  marginBlockEnd: variant === \"tile\" ? odysseyDesignTokens.Spacing5 : 0,\n  paddingRight: hasMenuButtonChildren ? odysseyDesignTokens.Spacing5 : 0,\n}));\n\nconst MenuButtonContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n  variant: (typeof cardVariantValues)[number];\n}>(({ odysseyDesignTokens, variant }) => ({\n  position: \"absolute\",\n  right: odysseyDesignTokens.Spacing3,\n  top:\n    variant === \"compact\"\n      ? odysseyDesignTokens.Spacing4\n      : odysseyDesignTokens.Spacing3,\n  height: variant === \"compact\" ? CARD_IMAGE_SIZE_COMPACT : \"auto\",\n  display: \"flex\",\n  alignItems: \"center\",\n}));\n\nconst CardInnerContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({\n  display: \"flex\",\n  gap: odysseyDesignTokens.Spacing3,\n}));\n\nconst CardImageAndContentContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"variant\" && prop !== \"centerContent\",\n})<{ variant: (typeof cardVariantValues)[number]; centerContent: boolean }>(\n  ({ variant, centerContent }) => ({\n    display: \"flex\",\n    flexDirection: variant === \"tile\" ? \"column\" : \"row\",\n    alignItems: centerContent ? \"center\" : \"flex-start\",\n  }),\n);\n\nconst CardContent = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n  variant: (typeof cardVariantValues)[number];\n}>(({ odysseyDesignTokens, variant }) => ({\n  \"& > .MuiTypography-h5:not(:last-child)\": {\n    marginBlockEnd: `${variant === \"compact\" ? odysseyDesignTokens.Spacing1 : odysseyDesignTokens.Spacing3} !important`,\n  },\n  \"& > *:last-child\": {\n    marginBlockEnd: 0,\n  },\n}));\n\nconst CardChildrenContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({\n  [\"&:not(:first-child)\"]: {\n    marginBlockStart: odysseyDesignTokens.Spacing3,\n  },\n}));\n\nconst AccessoryPlaceholder = styled(MuiIconButton)(() => ({\n  visibility: \"hidden\",\n}));\nconst buttonProviderValue = { isFullWidth: true };\n\nconst DataCard: DataCardComponent = <TData extends MRT_RowData>({\n  Accessory: AccessoryProp,\n  button,\n  children,\n  description,\n  image,\n  menuButtonChildren,\n  onClick,\n  overline,\n  renderDetailPanel,\n  row,\n  title,\n  variant = \"tile\",\n}: DataCardProps<TData>) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n  const { t } = useTranslation();\n\n  const [isDetailPanelOpen, setIsDetailPanelOpen] = useState<boolean>(false);\n\n  const ExpansionToggle = useMemo(() => {\n    return renderDetailPanel?.({ row }) ? (\n      <MuiTooltip\n        title={\n          isDetailPanelOpen\n            ? t(\"table.rowexpansion.collapse\")\n            : t(\"table.rowexpansion.expand\")\n        }\n      >\n        <MuiIconButton\n          children={isDetailPanelOpen ? <ChevronUpIcon /> : <ChevronDownIcon />}\n          onClick={() => setIsDetailPanelOpen(!isDetailPanelOpen)}\n          aria-label={\n            isDetailPanelOpen\n              ? t(\"table.rowexpansion.collapse\")\n              : t(\"table.rowexpansion.expand\")\n          }\n        />\n      </MuiTooltip>\n    ) : (\n      <AccessoryPlaceholder disabled>\n        <ChevronDownIcon />\n      </AccessoryPlaceholder>\n    );\n  }, [isDetailPanelOpen, renderDetailPanel, row, t]);\n\n  const Accessory = useMemo(() => {\n    return (\n      <AccessoryContainer\n        odysseyDesignTokens={odysseyDesignTokens}\n        variant={variant}\n      >\n        {AccessoryProp}\n        {renderDetailPanel && ExpansionToggle}\n      </AccessoryContainer>\n    );\n  }, [\n    AccessoryProp,\n    ExpansionToggle,\n    odysseyDesignTokens,\n    renderDetailPanel,\n    variant,\n  ]);\n\n  const cardContent = useMemo(() => {\n    const countDefinedProps = (\n      props: Array<string | ReactNode | undefined>,\n    ) => {\n      return props.filter((prop) => prop !== undefined).length;\n    };\n\n    const shouldCenterContent =\n      variant === \"compact\" &&\n      (!renderDetailPanel || !isDetailPanelOpen) &&\n      countDefinedProps([title, description, overline, button, children]) <= 2;\n\n    return (\n      <CardInnerContainer odysseyDesignTokens={odysseyDesignTokens}>\n        {(AccessoryProp || renderDetailPanel) && <Box>{Accessory}</Box>}\n        <CardImageAndContentContainer\n          variant={variant}\n          centerContent={shouldCenterContent}\n        >\n          {image && (\n            <ImageContainer\n              odysseyDesignTokens={odysseyDesignTokens}\n              hasMenuButtonChildren={Boolean(menuButtonChildren)}\n              variant={variant}\n            >\n              {image}\n            </ImageContainer>\n          )}\n\n          <CardContent\n            odysseyDesignTokens={odysseyDesignTokens}\n            variant={variant}\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\n            {children && (\n              <CardChildrenContainer odysseyDesignTokens={odysseyDesignTokens}>\n                {children}\n              </CardChildrenContainer>\n            )}\n\n            {renderDetailPanel && isDetailPanelOpen && (\n              <CardChildrenContainer odysseyDesignTokens={odysseyDesignTokens}>\n                {renderDetailPanel({ row })}\n              </CardChildrenContainer>\n            )}\n          </CardContent>\n        </CardImageAndContentContainer>\n      </CardInnerContainer>\n    );\n  }, [\n    odysseyDesignTokens,\n    AccessoryProp,\n    renderDetailPanel,\n    Accessory,\n    variant,\n    image,\n    menuButtonChildren,\n    overline,\n    title,\n    description,\n    button,\n    children,\n    isDetailPanelOpen,\n    row,\n  ]);\n\n  return (\n    <MuiCard\n      className={`${onClick ? \"isClickable\" : \"\"} ${Accessory ? \"hasAccessory\" : \"\"} ods-card-${variant}`}\n      role=\"listitem\"\n    >\n      {onClick ? (\n        <MuiCardActionArea onClick={onClick}>{cardContent}</MuiCardActionArea>\n      ) : (\n        cardContent\n      )}\n\n      {menuButtonChildren && (\n        <MenuButtonContainer\n          odysseyDesignTokens={odysseyDesignTokens}\n          variant={variant}\n        >\n          <MenuButton\n            endIcon={<MoreIcon />}\n            ariaLabel={t(\"table.moreactions.arialabel\")}\n            buttonVariant=\"floating\"\n            menuAlignment=\"right\"\n            size=\"small\"\n            tooltipText={t(\"table.actions\")}\n          >\n            {menuButtonChildren}\n          </MenuButton>\n        </MenuButtonContainer>\n      )}\n    </MuiCard>\n  );\n};\n\nconst MemoizedDataCard = memo(DataCard) as DataCardComponent;\nMemoizedDataCard.displayName = \"DataCard\";\n\nexport { MemoizedDataCard as DataCard };\n"],"mappings":"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"}

package/dist/labs/DataView/DataTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTable.js","names":["memo","useMemo","DataView","jsx","_jsx","DataTable","additionalActionButton","additionalActionMenuItems","bulkActionMenuItems","columns","currentPage","emptyPlaceholder","errorMessage","filters","getData","hasChangeableDensity","hasColumnResizing","hasColumnVisibility","initialDensity","hasFilters","hasPagination","hasRowReordering","hasRowSelection","hasSearch","hasSearchSubmitButton","hasSorting","isLoading","isEmpty","isNoResults","isPaginationMoreDisabled","isRowReorderingDisabled","maxResultsPerPage","maxPages","noResultsPlaceholder","onChangeRowSelection","paginationType","renderDetailPanel","resultsPerPage","rowActionButtons","rowActionMenuItems","searchDelayTime","totalRows","tableLayoutOptions","availableLayouts","MemoizedDataTable","displayName"],"sources":["../../../src/labs/DataView/DataTable.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2024-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, useMemo } from \"react\";\n\nimport { DataView } from \"./DataView\";\nimport { TableLayoutProps, UniversalProps } from \"./componentTypes\";\n\nexport type DataTableProps = UniversalProps & TableLayoutProps;\n\nconst DataTable = ({\n  additionalActionButton,\n  additionalActionMenuItems,\n  bulkActionMenuItems,\n  columns,\n  currentPage,\n  emptyPlaceholder,\n  errorMessage,\n  filters,\n  getData,\n  hasChangeableDensity,\n  hasColumnResizing,\n  hasColumnVisibility,\n  initialDensity,\n  hasFilters,\n  hasPagination,\n  hasRowReordering,\n  hasRowSelection,\n  hasSearch,\n  hasSearchSubmitButton,\n  hasSorting,\n  isLoading,\n  isEmpty,\n  isNoResults,\n  isPaginationMoreDisabled,\n  isRowReorderingDisabled,\n  maxResultsPerPage,\n  maxPages,\n  noResultsPlaceholder,\n  onChangeRowSelection,\n  paginationType,\n  renderDetailPanel,\n  resultsPerPage,\n  rowActionButtons,\n  rowActionMenuItems,\n  searchDelayTime,\n  totalRows,\n}: DataTableProps) => {\n  const tableLayoutOptions = useMemo(\n    () => ({\n      columns,\n      hasChangeableDensity,\n      hasColumnResizing,\n      hasColumnVisibility,\n      hasSorting,\n      initialDensity,\n      renderDetailPanel,\n      rowActionButtons,\n      rowActionMenuItems,\n    }),\n    [\n      columns,\n      hasChangeableDensity,\n      hasColumnResizing,\n      hasColumnVisibility,\n      hasSorting,\n      initialDensity,\n      renderDetailPanel,\n      rowActionButtons,\n      rowActionMenuItems,\n    ],\n  );\n\n  return (\n    <DataView\n      additionalActionButton={additionalActionButton}\n      additionalActionMenuItems={additionalActionMenuItems}\n      availableLayouts={[\"table\"]}\n      bulkActionMenuItems={bulkActionMenuItems}\n      currentPage={currentPage}\n      emptyPlaceholder={emptyPlaceholder}\n      errorMessage={errorMessage}\n      filters={filters}\n      getData={getData}\n      hasFilters={hasFilters}\n      hasPagination={hasPagination}\n      hasRowReordering={hasRowReordering}\n      hasRowSelection={hasRowSelection}\n      hasSearch={hasSearch}\n      hasSearchSubmitButton={hasSearchSubmitButton}\n      isEmpty={isEmpty}\n      isLoading={isLoading}\n      isNoResults={isNoResults}\n      isPaginationMoreDisabled={isPaginationMoreDisabled}\n      isRowReorderingDisabled={isRowReorderingDisabled}\n      maxPages={maxPages}\n      maxResultsPerPage={maxResultsPerPage}\n      noResultsPlaceholder={noResultsPlaceholder}\n      onChangeRowSelection={onChangeRowSelection}\n      paginationType={paginationType}\n      resultsPerPage={resultsPerPage}\n      searchDelayTime={searchDelayTime}\n      tableLayoutOptions={tableLayoutOptions}\n      totalRows={totalRows}\n    />\n  );\n};\n\nconst MemoizedDataTable = memo(DataTable);\nMemoizedDataTable.displayName = \"DataTable\";\n\nexport { MemoizedDataTable as DataTable };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,EAAEC,OAAO,QAAQ,OAAO;AAAC,SAE7BC,QAAQ;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAKjB,MAAMC,SAAS,GAAGA,CAAC;EACjBC,sBAAsB;EACtBC,yBAAyB;EACzBC,mBAAmB;EACnBC,OAAO;EACPC,WAAW;EACXC,gBAAgB;EAChBC,YAAY;EACZC,OAAO;EACPC,OAAO;EACPC,oBAAoB;EACpBC,iBAAiB;EACjBC,mBAAmB;EACnBC,cAAc;EACdC,UAAU;EACVC,aAAa;EACbC,gBAAgB;EAChBC,eAAe;EACfC,SAAS;EACTC,qBAAqB;EACrBC,UAAU;EACVC,SAAS;EACTC,OAAO;EACPC,WAAW;EACXC,wBAAwB;EACxBC,uBAAuB;EACvBC,iBAAiB;EACjBC,QAAQ;EACRC,oBAAoB;EACpBC,oBAAoB;EACpBC,cAAc;EACdC,iBAAiB;EACjBC,cAAc;EACdC,gBAAgB;EAChBC,kBAAkB;EAClBC,eAAe;EACfC;AACc,CAAC,KAAK;EACpB,MAAMC,kBAAkB,GAAGzC,OAAO,CAChC,OAAO;IACLQ,OAAO;IACPM,oBAAoB;IACpBC,iBAAiB;IACjBC,mBAAmB;IACnBQ,UAAU;IACVP,cAAc;IACdkB,iBAAiB;IACjBE,gBAAgB;IAChBC;EACF,CAAC,CAAC,EACF,CACE9B,OAAO,EACPM,oBAAoB,EACpBC,iBAAiB,EACjBC,mBAAmB,EACnBQ,UAAU,EACVP,cAAc,EACdkB,iBAAiB,EACjBE,gBAAgB,EAChBC,kBAAkB,CAEtB,CAAC;EAED,OACEnC,IAAA,CAACF,QAAQ;IACPI,sBAAsB,EAAEA,sBAAuB;IAC/CC,yBAAyB,EAAEA,yBAA0B;IACrDoC,gBAAgB,EAAE,CAAC,OAAO,CAAE;IAC5BnC,mBAAmB,EAAEA,mBAAoB;IACzCE,WAAW,EAAEA,WAAY;IACzBC,gBAAgB,EAAEA,gBAAiB;IACnCC,YAAY,EAAEA,YAAa;IAC3BC,OAAO,EAAEA,OAAQ;IACjBC,OAAO,EAAEA,OAAQ;IACjBK,UAAU,EAAEA,UAAW;IACvBC,aAAa,EAAEA,aAAc;IAC7BC,gBAAgB,EAAEA,gBAAiB;IACnCC,eAAe,EAAEA,eAAgB;IACjCC,SAAS,EAAEA,SAAU;IACrBC,qBAAqB,EAAEA,qBAAsB;IAC7CG,OAAO,EAAEA,OAAQ;IACjBD,SAAS,EAAEA,SAAU;IACrBE,WAAW,EAAEA,WAAY;IACzBC,wBAAwB,EAAEA,wBAAyB;IACnDC,uBAAuB,EAAEA,uBAAwB;IACjDE,QAAQ,EAAEA,QAAS;IACnBD,iBAAiB,EAAEA,iBAAkB;IACrCE,oBAAoB,EAAEA,oBAAqB;IAC3CC,oBAAoB,EAAEA,oBAAqB;IAC3CC,cAAc,EAAEA,cAAe;IAC/BE,cAAc,EAAEA,cAAe;IAC/BG,eAAe,EAAEA,eAAgB;IACjCE,kBAAkB,EAAEA,kBAAmB;IACvCD,SAAS,EAAEA;EAAU,CACtB,CAAC;AAEN,CAAC;AAED,MAAMG,iBAAiB,GAAG5C,IAAI,CAACK,SAAS,CAAC;AACzCuC,iBAAiB,CAACC,WAAW,GAAG,WAAW;AAE3C,SAASD,iBAAiB,IAAIvC,SAAS"}
+{"version":3,"file":"DataTable.js","names":["memo","useMemo","DataView","jsx","_jsx","DataTable","additionalActionButton","additionalActionMenuItems","bulkActionMenuItems","columns","currentPage","emptyPlaceholder","errorMessage","filters","getData","hasChangeableDensity","hasColumnResizing","hasColumnVisibility","initialDensity","hasFilters","hasPagination","hasRowReordering","hasRowSelection","hasSearch","hasSearchSubmitButton","hasSorting","isLoading","isEmpty","isNoResults","isPaginationMoreDisabled","isRowReorderingDisabled","maxResultsPerPage","maxPages","noResultsPlaceholder","onChangeRowSelection","paginationType","renderDetailPanel","resultsPerPage","rowActionButtons","rowActionMenuItems","searchDelayTime","totalRows","tableLayoutOptions","availableLayouts","MemoizedDataTable","displayName"],"sources":["../../../src/labs/DataView/DataTable.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2024-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, useMemo } from \"react\";\n\nimport { DataView } from \"./DataView\";\nimport { TableLayoutProps, UniversalProps } from \"./componentTypes\";\nimport { MRT_RowData } from \"material-react-table\";\n\nexport type DataTableProps<TData extends MRT_RowData> = UniversalProps<TData> &\n  TableLayoutProps<TData>;\ntype DataTableComponent = (<TData extends MRT_RowData>(\n  props: DataTableProps<TData>,\n) => JSX.Element) & {\n  displayName?: string;\n};\n\nconst DataTable = <TData extends MRT_RowData>({\n  additionalActionButton,\n  additionalActionMenuItems,\n  bulkActionMenuItems,\n  columns,\n  currentPage,\n  emptyPlaceholder,\n  errorMessage,\n  filters,\n  getData,\n  hasChangeableDensity,\n  hasColumnResizing,\n  hasColumnVisibility,\n  initialDensity,\n  hasFilters,\n  hasPagination,\n  hasRowReordering,\n  hasRowSelection,\n  hasSearch,\n  hasSearchSubmitButton,\n  hasSorting,\n  isLoading,\n  isEmpty,\n  isNoResults,\n  isPaginationMoreDisabled,\n  isRowReorderingDisabled,\n  maxResultsPerPage,\n  maxPages,\n  noResultsPlaceholder,\n  onChangeRowSelection,\n  paginationType,\n  renderDetailPanel,\n  resultsPerPage,\n  rowActionButtons,\n  rowActionMenuItems,\n  searchDelayTime,\n  totalRows,\n}: DataTableProps<TData>) => {\n  const tableLayoutOptions = useMemo(\n    () => ({\n      columns,\n      hasChangeableDensity,\n      hasColumnResizing,\n      hasColumnVisibility,\n      hasSorting,\n      initialDensity,\n      renderDetailPanel,\n      rowActionButtons,\n      rowActionMenuItems,\n    }),\n    [\n      columns,\n      hasChangeableDensity,\n      hasColumnResizing,\n      hasColumnVisibility,\n      hasSorting,\n      initialDensity,\n      renderDetailPanel,\n      rowActionButtons,\n      rowActionMenuItems,\n    ],\n  );\n\n  return (\n    <DataView\n      additionalActionButton={additionalActionButton}\n      additionalActionMenuItems={additionalActionMenuItems}\n      availableLayouts={[\"table\"]}\n      bulkActionMenuItems={bulkActionMenuItems}\n      currentPage={currentPage}\n      emptyPlaceholder={emptyPlaceholder}\n      errorMessage={errorMessage}\n      filters={filters}\n      getData={getData}\n      hasFilters={hasFilters}\n      hasPagination={hasPagination}\n      hasRowReordering={hasRowReordering}\n      hasRowSelection={hasRowSelection}\n      hasSearch={hasSearch}\n      hasSearchSubmitButton={hasSearchSubmitButton}\n      isEmpty={isEmpty}\n      isLoading={isLoading}\n      isNoResults={isNoResults}\n      isPaginationMoreDisabled={isPaginationMoreDisabled}\n      isRowReorderingDisabled={isRowReorderingDisabled}\n      maxPages={maxPages}\n      maxResultsPerPage={maxResultsPerPage}\n      noResultsPlaceholder={noResultsPlaceholder}\n      onChangeRowSelection={onChangeRowSelection}\n      paginationType={paginationType}\n      resultsPerPage={resultsPerPage}\n      searchDelayTime={searchDelayTime}\n      tableLayoutOptions={tableLayoutOptions}\n      totalRows={totalRows}\n    />\n  );\n};\n\nconst MemoizedDataTable = memo(DataTable) as DataTableComponent;\nMemoizedDataTable.displayName = \"DataTable\";\n\nexport { MemoizedDataTable as DataTable };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,EAAEC,OAAO,QAAQ,OAAO;AAAC,SAE7BC,QAAQ;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAYjB,MAAMC,SAAS,GAAGA,CAA4B;EAC5CC,sBAAsB;EACtBC,yBAAyB;EACzBC,mBAAmB;EACnBC,OAAO;EACPC,WAAW;EACXC,gBAAgB;EAChBC,YAAY;EACZC,OAAO;EACPC,OAAO;EACPC,oBAAoB;EACpBC,iBAAiB;EACjBC,mBAAmB;EACnBC,cAAc;EACdC,UAAU;EACVC,aAAa;EACbC,gBAAgB;EAChBC,eAAe;EACfC,SAAS;EACTC,qBAAqB;EACrBC,UAAU;EACVC,SAAS;EACTC,OAAO;EACPC,WAAW;EACXC,wBAAwB;EACxBC,uBAAuB;EACvBC,iBAAiB;EACjBC,QAAQ;EACRC,oBAAoB;EACpBC,oBAAoB;EACpBC,cAAc;EACdC,iBAAiB;EACjBC,cAAc;EACdC,gBAAgB;EAChBC,kBAAkB;EAClBC,eAAe;EACfC;AACqB,CAAC,KAAK;EAC3B,MAAMC,kBAAkB,GAAGzC,OAAO,CAChC,OAAO;IACLQ,OAAO;IACPM,oBAAoB;IACpBC,iBAAiB;IACjBC,mBAAmB;IACnBQ,UAAU;IACVP,cAAc;IACdkB,iBAAiB;IACjBE,gBAAgB;IAChBC;EACF,CAAC,CAAC,EACF,CACE9B,OAAO,EACPM,oBAAoB,EACpBC,iBAAiB,EACjBC,mBAAmB,EACnBQ,UAAU,EACVP,cAAc,EACdkB,iBAAiB,EACjBE,gBAAgB,EAChBC,kBAAkB,CAEtB,CAAC;EAED,OACEnC,IAAA,CAACF,QAAQ;IACPI,sBAAsB,EAAEA,sBAAuB;IAC/CC,yBAAyB,EAAEA,yBAA0B;IACrDoC,gBAAgB,EAAE,CAAC,OAAO,CAAE;IAC5BnC,mBAAmB,EAAEA,mBAAoB;IACzCE,WAAW,EAAEA,WAAY;IACzBC,gBAAgB,EAAEA,gBAAiB;IACnCC,YAAY,EAAEA,YAAa;IAC3BC,OAAO,EAAEA,OAAQ;IACjBC,OAAO,EAAEA,OAAQ;IACjBK,UAAU,EAAEA,UAAW;IACvBC,aAAa,EAAEA,aAAc;IAC7BC,gBAAgB,EAAEA,gBAAiB;IACnCC,eAAe,EAAEA,eAAgB;IACjCC,SAAS,EAAEA,SAAU;IACrBC,qBAAqB,EAAEA,qBAAsB;IAC7CG,OAAO,EAAEA,OAAQ;IACjBD,SAAS,EAAEA,SAAU;IACrBE,WAAW,EAAEA,WAAY;IACzBC,wBAAwB,EAAEA,wBAAyB;IACnDC,uBAAuB,EAAEA,uBAAwB;IACjDE,QAAQ,EAAEA,QAAS;IACnBD,iBAAiB,EAAEA,iBAAkB;IACrCE,oBAAoB,EAAEA,oBAAqB;IAC3CC,oBAAoB,EAAEA,oBAAqB;IAC3CC,cAAc,EAAEA,cAAe;IAC/BE,cAAc,EAAEA,cAAe;IAC/BG,eAAe,EAAEA,eAAgB;IACjCE,kBAAkB,EAAEA,kBAAmB;IACvCD,SAAS,EAAEA;EAAU,CACtB,CAAC;AAEN,CAAC;AAED,MAAMG,iBAAiB,GAAG5C,IAAI,CAACK,SAAS,CAAuB;AAC/DuC,iBAAiB,CAACC,WAAW,GAAG,WAAW;AAE3C,SAASD,iBAAiB,IAAIvC,SAAS"}

package/dist/labs/DataView/DataView.js

@@ -20,7 +20,7 @@ import { DataFilters } from "../DataFilters.js";
 import { EmptyState } from "../../EmptyState.js";
 import { fetchData } from "./fetchData.js";
 import { LayoutSwitcher } from "./LayoutSwitcher.js";
-import { MenuButton } from "../../MenuButton.js";
+import { MenuButton } from "../../Buttons/index.js";
 import { MoreIcon } from "../../icons.generated/index.js";
 import { TableSettings } from "./TableSettings.js";
 import { Pagination, usePagination } from "../../Pagination/index.js";
@@ -183,8 +183,8 @@ const DataView = ({
     });
   }, [dataQueryParams, errorMessageProp, getData, isLoadingProp]);
   useEffect(() => {
-    setIsEmpty(pagination.pageIndex === currentPage && pagination.pageSize === resultsPerPage && search === "" && filters === initialFilters && data.length === 0);
-  }, [currentPage, data, filters, initialFilters, pagination, resultsPerPage, search]);
+    setIsEmpty(pagination.pageIndex === currentPage && pagination.pageSize === resultsPerPage && search === "" && (!hasFilters || filters === initialFilters) && data.length === 0);
+  }, [currentPage, data, filters, hasFilters, initialFilters, pagination, resultsPerPage, search]);
   useEffect(() => {
     setIsLoading(prevValue => isLoadingProp ?? prevValue);
   }, [isLoadingProp]);